/* ==========================================================
   SHARED BASE — used by every template.
   Relies ONLY on the token contract below. Each template's
   theme.css defines these tokens and adds its personality.

   TOKEN CONTRACT
   Colors:  --color-bg --color-surface --color-ink --color-muted
            --color-line --color-primary --color-on-primary
            --color-accent --color-on-accent
   Fonts:   --font-heading --font-body --heading-weight --heading-tracking
   Sizes:   --fs-sm --fs-base --fs-lg --fs-xl --fs-2xl --fs-3xl --fs-4xl --fs-5xl
   Shape:   --radius-sm --radius-lg --container --section-pad --gap
   ========================================================== */

:root {
  /* Fluid type scale (360px -> 1280px). Templates may override. */
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-xl:   clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
  --fs-2xl:  clamp(1.65rem, 1.35rem + 1.3vw, 2.5rem);
  --fs-3xl:  clamp(2.1rem, 1.6rem + 2.3vw, 3.6rem);
  --fs-4xl:  clamp(2.3rem, 1.6rem + 3.6vw, 5rem);
  --fs-5xl:  clamp(2.6rem, 1.5rem + 6vw, 7.5rem);
  --container: 76rem;
  --section-pad: clamp(4rem, 3rem + 4vw, 7rem);
  --gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  --measure: 40rem;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6;
  color: var(--color-ink); background: var(--color-bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-heading); font-weight: var(--heading-weight, 700);
  letter-spacing: var(--heading-tracking, -0.02em); line-height: 1.1; text-wrap: balance;
}
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: var(--fs-4xl); line-height: 1.02; }
h2 { font-size: var(--fs-3xl); line-height: 1.05; }
h3 { font-size: var(--fs-xl); line-height: 1.2; }
p { max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: 1em; }
a { color: inherit; text-underline-offset: 0.2em; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }   /* :where() = zero specificity, so template classes always win */
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--color-ink); color: var(--color-bg); padding: .6rem 1rem; z-index: 100; border-radius: var(--radius-sm); }
.skip:focus { top: 1rem; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-pad); }
.section--alt { background: var(--color-surface); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); max-width: 46rem; }
.section-head p { color: var(--color-muted); font-size: var(--fs-lg); }
.muted { color: var(--color-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .9em 1.5em; border-radius: var(--radius-sm); border: 2px solid transparent;
  font: 600 var(--fs-base)/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s, color .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: color-mix(in srgb, var(--color-primary) 85%, black); }
.btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn--accent:hover { background: color-mix(in srgb, var(--color-accent) 85%, black); }
.btn--ghost { border-color: currentColor; background: transparent; color: inherit; }
.btn--ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn svg { width: 1.1em; height: 1.1em; }

/* ---------- Media ---------- */
.media { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-line); }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(2.5rem, 2rem + 2vw, 4rem); }
.page-hero h1 { font-size: var(--fs-4xl); max-width: 16ch; }
.page-hero p { margin-top: 1.25rem; font-size: var(--fs-lg); color: var(--color-muted); }

/* ---------- Service detail rows ---------- */
.svc-rows { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); }
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.svc-row:nth-child(even) .media { order: -1; }
.svc-row .media { aspect-ratio: 4/3; }
.svc-row h2 { font-size: var(--fs-2xl); margin-bottom: 1rem; }
.svc-row p { color: var(--color-muted); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); counter-reset: s; }
.step { counter-increment: s; }
.step::before { content: counter(s); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); font: 700 1rem var(--font-heading); margin-bottom: 1.1rem; }
.step h3 { margin-bottom: .4rem; }
.step p { color: var(--color-muted); }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.review { display: grid; gap: 1rem; align-content: start; }
.review blockquote { font-size: var(--fs-lg); line-height: 1.5; }
.review figcaption { font-size: var(--fs-sm); color: var(--color-muted); font-weight: 600; }
.stars { color: var(--color-accent); letter-spacing: .15em; font-size: var(--fs-sm); }

/* ---------- Projects ---------- */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 1.5rem + 2vw, 3rem) var(--gap); }
.project .media { aspect-ratio: 3/2; }
.project h3 { margin-top: 1.1rem; }
.project .meta { font-size: var(--fs-sm); color: var(--color-muted); font-weight: 600; margin-top: .2rem; }
.project p { color: var(--color-muted); margin-top: .5rem; }

/* ---------- Values ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.value h3 { margin-bottom: .5rem; }
.value p { color: var(--color-muted); }

/* ---------- FAQ ---------- */
.faq { display: grid; max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.3rem; font: var(--heading-weight, 700) var(--fs-lg)/1.3 var(--font-heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5em; line-height: .8; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.3rem; color: var(--color-muted); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form label { display: grid; gap: .4rem; font-size: var(--fs-sm); font-weight: 600; }
.form input, .form select, .form textarea {
  font: inherit; font-size: var(--fs-base); padding: .85em 1em; color: var(--color-ink);
  background: var(--color-bg); border: 1.5px solid var(--color-line); border-radius: var(--radius-sm);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); }
.contact-card { display: grid; gap: 1.4rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-lg); background: var(--color-surface); }
.contact-card dt { font-weight: 700; font-family: var(--font-heading); }
.contact-card dd { margin: .15rem 0 0; color: var(--color-muted); }
.contact-card a { color: var(--color-ink); }

/* ---------- CTA band ---------- */
.cta { background: var(--color-primary); color: var(--color-on-primary); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.cta .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; }
.cta h2 { font-size: var(--fs-3xl); max-width: 14ch; }
.cta p { margin-top: .75rem; opacity: .85; }

/* ---------- Mobile nav (shared behavior) ---------- */
.nav-toggle { display: none; }
@media (max-width: 56rem) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  body .nav-list:not(.is-open) { display: none; }
  body .nav-list.is-open { display: flex; }
  .svc-row, .contact-grid { grid-template-columns: 1fr; }
  .svc-row:nth-child(even) .media { order: 0; }
  .steps, .reviews, .values { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .projects, .form-row { grid-template-columns: 1fr; }
}

/* Mobile sticky call button (templates opt in with .has-callfab on body) */
.call-fab { display: none; }
@media (max-width: 40rem) {
  .has-callfab .call-fab { display: flex; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60; justify-content: center; box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
  .has-callfab { padding-bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Long business names: wrap on small screens, never overflow ---------- */
@media (max-width: 56rem) {
  body .site-header .logo { white-space: normal; overflow: visible; min-width: 0; flex-shrink: 1; line-height: 1.1; text-overflow: clip; }
  body .site-header .container > *:not(.logo) { flex-shrink: 0; }
}
/* Footers: long names and emails wrap instead of widening the page */
body .site-footer .logo { white-space: normal; overflow: visible; min-width: 0; text-overflow: clip; }
.site-footer a, .site-footer li, .site-footer p, .site-footer span { overflow-wrap: anywhere; }
.site-footer [class*="grid"] > *, .site-footer [class*="row"] > *, .site-footer [class*="cols"] > * { min-width: 0; }

/* Long emails and addresses must wrap inside the contact card (found with long demo emails) */
.contact-card, .contact-card dd, .contact-card a { min-width: 0; overflow-wrap: anywhere; }

/* "View all services" under the homepage services (only when there are more than 6) */
.more-svc { grid-column: 1 / -1; width: 100%; max-width: none; margin: clamp(1.75rem, 1.5rem + 1vw, 2.5rem) 0 0; display: flex; justify-content: center; }

/* Homepage FAQ section (partials/faq-section.njk), for templates designed before FAQs were standard */
.faq-sec { border-top: 1px solid var(--color-line); }
.faq-sec__g { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.faq-sec__hd p { margin-top: 1rem; color: var(--color-muted); font-size: var(--fs-lg); max-width: 26rem; }
.faq-sec__hd a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; white-space: nowrap; }
.faq-sec .faq { max-width: none; border-top: 1px solid var(--color-line); }
@media (max-width: 56rem) { .faq-sec__g { grid-template-columns: minmax(0, 1fr); } }

/* Extra pages: "More" in the menu when it doesn't fit on one row (assets/js/main.js adds it only then) */
.tc-more { position: relative; }
.tc-more > a > span:not([data-edit]) { display: inline-block; margin-left: .3em; font-size: .75em; }
.tc-more__list { position: absolute; top: 100%; right: 0; z-index: 60; display: none; min-width: 12rem; margin: .5rem 0 0; padding: .4rem;
  list-style: none; text-align: left; background: var(--color-bg, #FFFFFF); border: 1px solid var(--color-line, rgb(0 0 0 / .12)); border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .35); }
.tc-more__list::before { content: ""; position: absolute; inset: -.6rem 0 auto; height: .6rem; }
.tc-more:hover > .tc-more__list, .tc-more:focus-within > .tc-more__list, .tc-more.is-open > .tc-more__list { display: grid; gap: 2px; }
.nav-list .tc-more__list li { margin: 0; padding: 0; border: 0; }
.nav-list .tc-more__list a { display: block !important; padding: .6rem .8rem !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important;
  background: transparent !important; color: var(--color-ink, #111111) !important; font-size: .95rem; text-decoration: none !important; white-space: nowrap; box-shadow: none !important; }
.nav-list .tc-more__list a::before, .nav-list .tc-more__list a::after { display: none !important; }
.nav-list .tc-more__list a:hover, .nav-list .tc-more__list a[aria-current="page"] { background: var(--color-surface, rgb(0 0 0 / .05)) !important; }

/* Word stats: a word (e.g. "Licensed") sitting where a template shows a big number. Big-number sizes are
   tuned for short figures like "4.9" or "2014", so a whole word overflowed its box. Words get a calmer size. */
.stat-word { font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; overflow-wrap: normal !important; }