/* Dental Hygiene Centers — shared design system (the approved GATE C/D design).
   Elevated navy + white. primary #16306b, accent #2f7df6, amber #f7b500. Poppins + Inter.
   Every page links this one file; build agents add NO new CSS. */
:root{
  --navy:#16306b; --navy-deep:#0f2150; --navy-2:#1f4ea8;
  --accent:#2f7df6; --accent-deep:#1f5fd0; --amber:#f7b500; --amber-deep:#d99a00;
  /* --line + the shadows derive from the palette (var(--ink)/var(--navy-deep)) so a recolor tracks them
     instead of a frozen blue-gray divider + navy-tinted shadow. Defaults reproduce the old look. */
  --ink:#0f1b33; --muted:#56607a; --line:color-mix(in srgb,var(--ink) 12%,#fff); --bg:#f5f8fc; --surface:#fff;
  --space:clamp(1rem,2vw,1.5rem); --maxw:1180px; --radius:14px; --radius-sm:10px;
  --shadow:0 18px 50px -28px color-mix(in srgb,var(--navy-deep) 45%,transparent); --shadow-card:0 10px 30px -22px color-mix(in srgb,var(--navy-deep) 50%,transparent);
  --head:"Poppins",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--surface);font-family:var(--body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
/* Generic link colour must never reach a BUTTON. `a:hover{color:var(--navy)}` was repainting the
   label of every .btn on hover, so a gold CTA got navy text at 4.31:1 and the amber-deep focus
   state fell to 3.01:1. Same root cause as the .mega a:hover bug: an element-level anchor rule
   outranking the component that owns the control. Scoped 2026-08-19. */
a:not(.btn){color:var(--accent-deep)} a:not(.btn):hover{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.14;letter-spacing:-.02em;margin:0 0 .5em;color:var(--navy)}
h1{font-weight:800} h2{font-size:clamp(1.6rem,3.2vw,2.4rem)} h3{font-size:1.18rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space)}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--head);font-weight:600;font-size:1rem;padding:.85rem 1.55rem;border-radius:999px;transition:.15s;cursor:pointer;text-decoration:none;border:0}
/* Buttons have NO drop shadow by DEFAULT (owner call + the "no glowing buttons" anti-slop rule). The old
   hard-coded colored glow (amber/blue) didn't track a palette recolor, leaving a recolored button with a
   stale mismatched glow. A member who WANTS elevation can opt in via the design system, which sets
   --btn-shadow (neutral, palette-independent); unset → none. */
.btn-primary{background:var(--accent-deep);color:#fff;box-shadow:var(--btn-shadow,none)} .btn-primary:hover{background:color-mix(in srgb,var(--accent-deep) 84%,#000);color:#fff}
.btn-amber{background:var(--amber);color:color-mix(in srgb,var(--amber) 26%,#000);box-shadow:var(--btn-shadow,none)} .btn-amber:hover{background:var(--amber-deep)}
/* on-band ink: navy bands read var(--on-navy,#fff) so a light member-picked primary flips band text dark
   (the brand layer computes --on-navy by luminance); default is the classic white-on-navy. */
.btn-ghost{background:transparent;color:var(--on-navy,#fff);border:2px solid color-mix(in srgb,var(--on-navy,#fff) 55%,transparent)} .btn-ghost:hover{background:color-mix(in srgb,var(--on-navy,#fff) 12%,transparent);color:var(--on-navy,#fff)}
.eyebrow{font-family:var(--head);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--accent-deep);margin:0 0 .4rem}
/* top bar */
.topbar{background:var(--navy-deep);color:color-mix(in srgb,var(--on-navy,#fff) 82%,transparent);font-size:.85rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem var(--space);flex-wrap:wrap}
.topbar a{color:var(--on-navy,#fff);font-weight:600;text-decoration:none} .topbar a:hover{color:var(--amber)}
.topbar .meta{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center}
/* header */
header.site{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem var(--space)}
.logo{display:flex;align-items:center}
/* Logo fits WITHIN the header box whatever the source shape. The height is DEFINITE (not height:auto):
   an uploaded SVG that has only a viewBox and NO width/height attributes has no intrinsic height, so with
   height:auto it collapses to 0 and renders blank (the "I added a logo but nothing shows" bug). A definite
   height forces such an SVG to scale to that height via its viewBox ratio; max-width caps a wide wordmark so
   it can't blow out the header; object-fit:contain preserves the aspect ratio and centers it in the box. */
.logo img{height:var(--logo-h,48px);width:auto;max-width:var(--logo-w,220px);object-fit:contain;display:block}
/* Member-nudgeable logo size (chat: "make the logo bigger/smaller" → set_logo_size). The .logo anchor
   carries sz-sm / sz-md / sz-lg; each just re-pins the max box, so the logo still fits by construction. */
.logo.sz-sm{--logo-h:34px;--logo-w:170px} .logo.sz-md{--logo-h:48px;--logo-w:220px} .logo.sz-lg{--logo-h:66px;--logo-w:300px}
nav.main{display:flex;gap:.3rem;align-items:stretch;font-family:var(--head);font-weight:600;font-size:.95rem}
nav.main>a,nav.main>.has-mega>a{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;padding:.6rem .8rem;border-radius:8px}
nav.main>a:hover{color:var(--accent-deep);background:var(--bg)}
nav.main a.btn-primary,nav.main a.cta{color:#fff}
nav.main .cta{margin-left:.4rem}
/* mega menu */
.has-mega{position:relative;display:flex;align-items:stretch}
.has-mega>a{cursor:pointer}
.has-mega>a::after{content:"";width:.42rem;height:.42rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:.45rem;opacity:.7}
/* width is clamped to the viewport, and the TRAILING hubs' panels right-align: the header nav sits on
   the right edge (space-between), so a left-anchored 560-680px panel on the last items runs off-screen. */
.mega{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.2rem;min-width:min(560px,calc(100vw - 2rem));max-width:calc(100vw - 2rem);display:none;z-index:60}
nav.main .has-mega:nth-last-of-type(-n+2) .mega{left:auto;right:0}
.mega.areas-mega{min-width:300px}
.has-mega:hover .mega,.has-mega:focus-within .mega{display:block}
.mega .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:.3rem 1.6rem}
.mega .col-h{font-family:var(--head);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:.4rem 0 .3rem;grid-column:1/-1}
.mega .col-h:first-child{margin-top:0}
/* Mega-menu LINKS. Scoped with :not(.btn) because these two rules also matched a BUTTON placed
   inside .mega__feature, and at (0,2,1) they outrank .btn-amber:hover at (0,2,0) — so the panel's
   gold CTA turned near-white with navy text on a navy panel and read as disappearing on hover.
   Any client whose mega panel carries a CTA hit this. Scoped 2026-08-19. */
.mega a:not(.btn):not(.mega__all){display:block;padding:.4rem .5rem;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500}
.mega a:not(.btn):not(.mega__all):hover{background:var(--bg);color:var(--accent-deep)}
/* upgraded mega: multi-column links + a featured CTA panel (parity with the local build) */
.has-mega:hover .mega,.has-mega:focus-within .mega{display:flex;gap:1.8rem}
.mega--wide{min-width:min(680px,calc(100vw - 2rem))} .mega__cols{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1.4rem;align-content:start}
.mega--wide .mega__cols{grid-template-columns:1fr 1fr 1fr}
.mega__feature{flex:none;width:210px;background:var(--bg);border-radius:var(--radius-sm);padding:1.1rem;display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
.mega__feature-h{font-family:var(--head);font-weight:700;color:var(--navy);font-size:1.02rem}
.mega__feature p{font-size:.84rem;color:var(--muted);margin:0;line-height:1.45}
.mega__all{font-family:var(--head);font-weight:600;color:var(--accent-deep);text-decoration:none;font-size:.9rem;margin-top:auto}
.mega__feature .btn{width:100%;justify-content:center;font-size:.9rem;padding:.6rem 1rem}
/* video-background band — full-bleed, looping bg video + scrim + overlaid content */
.video-band{position:relative;background:var(--navy);color:var(--on-navy,#fff);overflow:hidden;text-align:center}
.video-band--left{text-align:left}
.video-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--navy-deep) 78%,transparent),color-mix(in srgb,var(--navy-deep) 62%,transparent))}
.video-band .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.video-band .wrap{position:relative;z-index:2;padding:clamp(3rem,7vw,6rem) var(--space)}
.video-band__inner{max-width:680px;margin:0 auto} .video-band--left .video-band__inner{margin:0}
.video-band h2{color:var(--on-navy,#fff);font-size:clamp(1.8rem,3.6vw,2.6rem)} .video-band p{color:color-mix(in srgb,var(--on-navy,#fff) 85%,transparent);font-size:1.15rem;margin:.8rem 0 1.4rem}
.video-band .actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center} .video-band--left .actions{justify-content:flex-start}
@media(max-width:760px){.mega__cols,.mega--wide .mega__cols{grid-template-columns:1fr}.mega__feature{width:100%}}
.navtoggle,.navtoggle-label{display:none}
/* hero */
.hero,.ihero{position:relative;background:var(--navy);color:var(--on-navy,#fff);overflow:hidden}
/* the scrim over the hero image is the brand PRIMARY (--navy) at decreasing alpha — derived from the token
   via color-mix so a recolor tracks it. (Was a hard-coded rgba(22,48,107,…) = the dental navy, which stayed
   blue on any other palette; the overlay must never introduce a color that isn't in the brand.) */
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,var(--navy) 34%,color-mix(in srgb,var(--navy) 74%,transparent) 56%,color-mix(in srgb,var(--navy) 30%,transparent) 100%)}
.ihero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--navy) 44%,color-mix(in srgb,var(--navy) 72%,transparent) 64%,color-mix(in srgb,var(--navy) 38%,transparent) 100%)}
.hero img.bg,.ihero img.bg,.hero video.bg,.ihero video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
/* provider background-video iframe scaled to COVER the section (16:9 cover trick); decorative only */
.video-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.video-bg iframe{position:absolute;top:50%;left:50%;width:177.78vh;height:56.25vw;min-width:100%;min-height:100%;transform:translate(-50%,-50%);border:0}
.hero .wrap{position:relative;z-index:2;padding:clamp(2.2rem,4.4vw,3.6rem) var(--space)}
.ihero .wrap{position:relative;z-index:2;padding:clamp(2.2rem,5vw,3.4rem) var(--space)}
.hero .col{max-width:min(960px,94%)}
/* eyebrow ON the dark hero band: a LIGHT tint of the brand ACCENT (was a hard-coded #9cc0ff light-blue that
   ignored the palette — the tagline showed blue on a non-blue brand). The default accent reproduces the old
   look; a recolor tracks it. Overrides the base .eyebrow (var(--accent-deep)), which is too dark on navy. */
.hero .eyebrow,.ihero .eyebrow{color:color-mix(in srgb,var(--accent) 55%,var(--on-navy,#fff))}
.hero h1{font-size:clamp(2rem,4.2vw,2.95rem);color:var(--on-navy,#fff)}
.hero h1 .accent,.ihero h1 .accent{color:var(--on-navy,#fff);border-bottom:5px solid var(--amber);padding-bottom:2px}
/* hero supporting copy: neutral white-alpha (brand-independent light text), NOT the old blue-tinted
   #e3eafb / #cdd8f3 which read as an off-palette blue over a recolored band. */
.hero p.lede{font-size:1.2rem;color:color-mix(in srgb,var(--on-navy,#fff) 90%,transparent);margin:1rem 0 1.6rem;max-width:620px}
.hero .actions,.ihero .actions{display:flex;gap:.8rem;flex-wrap:wrap}
.hero .serving{margin-top:1.5rem;font-size:.85rem;color:color-mix(in srgb,var(--on-navy,#fff) 78%,transparent);letter-spacing:.03em}
.crumb{font-size:.82rem;color:color-mix(in srgb,var(--on-navy,#fff) 78%,transparent);margin-bottom:.7rem}
.crumb a{color:color-mix(in srgb,var(--on-navy,#fff) 90%,transparent);text-decoration:none} .crumb a:hover{color:var(--on-navy,#fff)}
/* Widened 2026-08-19. 780px inside a 1180px wrap forced a normal 66-character H1 onto three
   lines while 400px sat unused beside it. Operator rule: no heading past two lines. */
.ihero h1{font-size:clamp(1.85rem,3.9vw,2.7rem);color:var(--on-navy,#fff);max-width:min(1040px,94%)}
.ihero p.sub{color:color-mix(in srgb,var(--on-navy,#fff) 90%,transparent);max-width:680px;font-size:1.12rem;margin:.6rem 0 1.2rem}
/* trust strip */
/* trust + creds render as real <section>s (so the editor can select them whole) but keep their strip
   look — zero out the generic section band padding; their own .wrap padding is the strip's spacing. */
section.trust,section.creds{padding:0}
.trust{background:var(--navy-deep);color:var(--on-navy,#fff);border-top:4px solid var(--amber)}
.trust .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;padding:1.4rem var(--space)}
.trust .stat{text-align:center}
.trust .num{font-family:var(--head);font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.trust .num .star{color:var(--amber)}
.trust .lbl{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:color-mix(in srgb,var(--on-navy,#fff) 72%,transparent);margin-top:.35rem}
/* credential chips */
.creds{background:#fff;border-bottom:1px solid var(--line)}
.creds .wrap{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;align-items:center;padding:1.1rem var(--space)}
.creds .lead-lbl{font-size:.8rem;font-weight:600;color:var(--muted);margin-right:.3rem}
.chip{border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;font-size:.85rem;font-weight:600;color:var(--navy);background:var(--bg)}
/* sections + grids */
section{padding:clamp(3rem,6vw,4.5rem) 0}
/* Heading measure. A heading that wraps past two lines reads as broken, and the old caps were far
   too tight: .section-head at 760px and an inline 32ch on the reviews title put normal headings on
   four and six lines. Give headings real width and let the BODY copy keep the narrow measure.
   Operator rule 2026-08-19: no H1, H2 or H3 may exceed two rendered lines. */
.section-head{max-width:min(1000px,92%);margin-bottom:2rem}
.section-head h2{text-wrap:balance}
.reviews-head__title{max-width:min(46rem,92%)}
.reviews-head__title h2{text-wrap:balance}
h1,h2,h3{text-wrap:balance;overflow-wrap:anywhere}
/* The media-band macro emits `.split > div > h2`, not `.mband` — the earlier selector matched
   nothing. The band's text column is ~574px, so the heading steps down a size to hold two
   lines at a realistic 55 to 65 characters. */
/* Long-form prose keeps a 68ch body measure for readability, so its headings live in a ~590px
   column and must be sized for it rather than inheriting the full-width section scale. */
.prose h2{font-size:clamp(1.35rem,1.9vw,1.72rem);line-height:1.24;text-wrap:balance}
.prose h3{font-size:clamp(1.12rem,1.4vw,1.3rem);line-height:1.28;text-wrap:balance}
.split h2{max-width:none;font-size:clamp(1.3rem,1.75vw,1.62rem);line-height:1.24;text-wrap:balance}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
/* A related-pages list is navigation, not prose. Rendered as `.prose` it picked up the 68ch reading
   measure from base.css and centred itself beneath a left-aligned 1000px section head, so a heading
   and its own list did not share a left edge. It takes the section-head measure and columns instead,
   and follows the head when the head is centred. */
.linklist{max-width:min(1000px,92%)}
.linklist ul{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));gap:.5rem 2rem}
.linklist li{position:relative;padding-left:1.7rem;margin:0}
.linklist li::before{content:"";position:absolute;left:0;top:.55em;width:.75rem;height:.42rem;
  border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(-45deg)}
.section-head.center + .linklist{margin-inline:auto}
.section-head p{color:var(--muted)}
/* mid-page conversion moment (how-it-works, reviews): a centered actions row below section content */
.section-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.grid{display:grid;gap:1.3rem}
.cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-card)}
/* a whole card can be a link — never underline its heading/body; keep ink/navy colors, not link blue */
a.card,a.svc,a.mcard{text-decoration:none;color:var(--ink)} a.card:hover,a.svc:hover,a.mcard:hover{text-decoration:none}
a.card h3,a.svc h3,a.mcard h3{color:var(--navy)} a.svc p,a.card p,a.mcard p{color:var(--muted)}
.card.seg{border-top:4px solid var(--accent)} .card.seg.alt{border-top-color:var(--amber)}
.card .more{font-family:var(--head);font-weight:600;color:var(--accent-deep);font-size:.9rem;text-decoration:none}
.bg-soft{background:var(--bg)} .bg-navy{background:var(--navy);color:var(--on-navy,#fff)} .bg-navy h2,.bg-navy h3{color:var(--on-navy,#fff)}
/* service icon cards */
.svc{display:flex;flex-direction:column;gap:.4rem;transition:.15s} a.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.svc .ico{width:58px;height:58px;border-radius:14px;background:color-mix(in srgb,var(--accent) 10%,#fff);display:grid;place-items:center;color:var(--accent-deep);margin-bottom:.3rem}
.svc .ico svg{width:32px;height:32px}
/* media cards + gallery */
.mcard{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-card);transition:.15s} a.mcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mcard img{aspect-ratio:4/3;object-fit:cover;width:100%}
.mcard .body{padding:1rem 1.1rem}
.mcard h3{margin:0 0 .2rem;font-size:1.05rem}
.mcard p{margin:0;font-size:.9rem;color:var(--muted)}
/* photo-forward service card (local-business look): taller photo + a "Learn more" affordance */
.mcard.svc-media img{aspect-ratio:3/2}
.mcard.svc-media .go{display:inline-block;margin-top:.4rem;font-family:var(--head);font-weight:600;font-size:.9rem;color:var(--accent-deep)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--radius)}
/* split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:2.4rem;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.split img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;width:100%}
/* member image-size nudge (chat: "make this image bigger/smaller" → set_image_size): the crop discipline
   (cover) is untouched — the nudge just picks the box. sm caps + centers; lg goes taller (square). */
.split img.img-sz-sm{max-width:420px;margin-inline:auto}
.split img.img-sz-lg{aspect-ratio:1/1}
.checks{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.45rem .9rem}
.checks li{position:relative;padding-left:1.7rem;font-size:.96rem}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:.8rem;height:.45rem;border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(-45deg)}
/* alternating bands: flip the image to the left on odd bands; empty slot → a branded gradient panel */
.split--reverse{grid-template-columns:.95fr 1.05fr} .split--reverse>div:first-child{order:2}
.split__panel{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/3;width:100%;background:linear-gradient(135deg,var(--navy),var(--navy-2))}
/* about / story band */
.about-band{max-width:760px;margin:0 auto;text-align:center} .about-band p{color:var(--muted);font-size:1.08rem}
/* comparison */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.compare__col{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-card)}
.compare__col--rec{border:2px solid var(--accent)}
.compare__tag{position:absolute;top:-.8rem;left:1.4rem;background:var(--accent);color:#fff;font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .7rem;border-radius:999px}
.compare__col h3{color:var(--navy);margin-bottom:.6rem} .compare .checks{grid-template-columns:1fr}
/* stat band */
.statband__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;text-align:center}
.statband__val{font-family:var(--head);font-weight:800;font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--on-navy,#fff);line-height:1}
.statband__lbl{color:color-mix(in srgb,var(--on-navy,#fff) 85%,transparent);font-weight:600;margin-top:.3rem} .statband__note{color:color-mix(in srgb,var(--on-navy,#fff) 68%,transparent);font-size:.82rem;margin-top:.15rem}
.statband__disclaim{text-align:center;color:color-mix(in srgb,var(--on-navy,#fff) 68%,transparent);font-size:.78rem;margin:1.2rem 0 0}
/* before / after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.ba__item{margin:0;position:relative} .ba__item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.ba__item figcaption{position:absolute;top:.8rem;left:.8rem}
.ba__tag{font-family:var(--head);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .75rem;border-radius:999px;color:#fff}
.ba__tag--before{background:var(--muted)} .ba__tag--after{background:var(--accent)}
.ba__caption{text-align:center;color:var(--muted);margin:1rem 0 0}
/* safe embed (booking / scheduling / calculator / map) */
.embed-block{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.embed-block__frame{display:block;width:100%;min-height:640px;border:0}
@media(max-width:760px){.compare,.ba,.statband__grid{grid-template-columns:1fr}.statband__grid{gap:1.6rem}}
/* pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start} .pricing--2{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto} .pricing--1{grid-template-columns:1fr;max-width:420px;margin:0 auto}
.price-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:.5rem}
.price-card--featured{border:2px solid var(--accent);box-shadow:var(--shadow)}
.price-card__tag{position:absolute;top:-.8rem;left:1.6rem;background:var(--accent);color:#fff;font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .7rem;border-radius:999px}
.price-card h3{color:var(--navy)} .price-card__price{font-family:var(--head);font-weight:800;font-size:2.1rem;color:var(--navy);line-height:1} .price-card__price span{font-size:.95rem;font-weight:600;color:var(--muted)}
.price-card__sum{color:var(--muted);margin:0} .price-card .checks{grid-template-columns:1fr;margin:.4rem 0} .price-card .btn{margin-top:auto;justify-content:center}
/* guarantee */
.guarantee{display:flex;gap:1.4rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--radius);padding:1.8rem}
.guarantee__seal{flex:none;width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent-deep)} .guarantee__seal svg{width:32px;height:32px}
.guarantee__body h2{margin-bottom:.3rem} .guarantee__body p{color:var(--muted);margin:0} .guarantee__list{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.3rem;font-size:.95rem}
/* offer band */
.offer{background:linear-gradient(120deg,var(--amber),var(--amber-deep));color:color-mix(in srgb,var(--amber) 26%,#000)} .offer h2{color:color-mix(in srgb,var(--amber) 26%,#000)} .offer p{color:color-mix(in srgb,var(--amber) 34%,#000);margin:.2rem 0 0}
.offer__inner{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;padding:1.6rem 0} .offer__code{font-family:var(--head);font-weight:600}
/* team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem} .team__card{margin:0;text-align:center}
.team__photo{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-card)}
.team__photo--ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:var(--on-navy,#fff);font-family:var(--head);font-weight:800;font-size:2.4rem;text-transform:uppercase}
.team__name{font-family:var(--head);font-weight:700;color:var(--navy);margin-top:.6rem} .team__role{color:var(--accent-deep);font-size:.9rem;font-weight:600} .team__bio{color:var(--muted);font-size:.9rem;margin:.4rem 0 0}
/* logo wall */
.logowall{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:center}
.logowall__logo{height:42px;max-width:200px;width:auto;object-fit:contain;opacity:.75;filter:grayscale(1)} .logowall__logo:hover{opacity:1;filter:none}
.logowall__chip{font-family:var(--head);font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.55rem 1.1rem;font-size:.95rem}
/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .gallery__item{margin:0;position:relative}
.gallery__item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);box-shadow:var(--shadow-card)}
.gallery__item figcaption{font-size:.85rem;color:var(--muted);margin-top:.35rem}
/* hours */
.hours{max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-card)}
.hours__head{text-align:center;margin-bottom:.8rem} .hours__table{width:100%;border-collapse:collapse} .hours__table th{text-align:left;font-family:var(--head);color:var(--navy);padding:.5rem 0} .hours__table td{text-align:right;color:var(--muted);padding:.5rem 0;border-bottom:1px solid var(--line)}
/* case studies */
.case__img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:.8rem} .case__result{font-weight:600;color:var(--accent-deep);margin:.3rem 0}
.post__img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:.8rem}
/* evidence mockup */
.evidence{max-width:640px;margin:0 auto} .evidence__mock{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow)}
.evidence__badge{position:absolute;top:1rem;right:1rem;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .6rem;border-radius:6px}
.evidence__mock h3{color:var(--navy)} .evidence__lines,.evidence__check,.evidence__timeline{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.5rem}
.evidence__check li{padding-left:1.7rem;position:relative} .evidence__check li::before{content:"";position:absolute;left:0;top:.4em;width:.8rem;height:.45rem;border-left:3px solid var(--line);border-bottom:3px solid var(--line);transform:rotate(-45deg)} .evidence__check li.is-done::before{border-color:var(--accent)}
.evidence__when{font-family:var(--head);font-weight:700;color:var(--accent-deep);margin-right:.4rem} .evidence__disclaim{text-align:center;color:var(--muted);font-size:.78rem;margin:.8rem 0 0;font-style:italic}
/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center} .contact h2{color:var(--on-navy,#fff)} .contact__intro p{color:color-mix(in srgb,var(--on-navy,#fff) 85%,transparent)}
.contact__nap{display:flex;flex-direction:column;gap:.3rem;margin-top:.8rem} .contact__nap a{color:var(--on-navy,#fff);font-family:var(--head);font-weight:600;text-decoration:none}
.contact__form{display:grid;gap:.7rem} .contact__form input,.contact__form textarea{width:100%;padding:.8rem 1rem;border-radius:var(--radius-sm);border:1px solid color-mix(in srgb,var(--on-navy,#fff) 25%,transparent);background:color-mix(in srgb,var(--on-navy,#fff) 8%,transparent);color:var(--on-navy,#fff);font-family:var(--body)}
.contact__form input::placeholder,.contact__form textarea::placeholder{color:color-mix(in srgb,var(--on-navy,#fff) 60%,transparent)} .contact__form .btn{justify-content:center}
.contact__cta{display:flex;gap:.7rem;flex-wrap:wrap}
/* ported video */
.video-section__inner{display:grid;gap:2rem;align-items:center} .video-section--split .video-section__inner{grid-template-columns:1.1fr .9fr} .video-section--reverse .video-section__media{order:2}
.video-embed__frame{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--navy-deep)} .video-embed__iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-embed__facade{position:relative;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:var(--navy-deep)} .video-embed__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-embed__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent)}
@media(max-width:860px){.pricing,.team,.gallery{grid-template-columns:repeat(2,1fr)}.contact,.video-section--split .video-section__inner{grid-template-columns:1fr}.offer__inner{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.pricing,.team,.guarantee{grid-template-columns:1fr}.guarantee{flex-direction:column;text-align:center}}
/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.step .n{width:46px;height:46px;border-radius:999px;background:var(--accent-deep);color:#fff;display:grid;place-items:center;font-family:var(--head);font-weight:800;margin-bottom:.6rem}
.step h3{font-size:1.02rem} .step p{font-size:.9rem;color:var(--muted);margin:.2rem 0 0}
/* article + sidebar (interior) */
.layout{display:grid;grid-template-columns:1fr 330px;gap:2.6rem;padding:clamp(2.5rem,5vw,3.5rem) 0}
.prose>p,.prose>ul{margin:0 0 1.1rem} .prose h2{margin-top:2rem} .prose h3{margin-top:1.4rem}
.prose ul{padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:1.7rem;margin-bottom:.5rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.6em;width:.75rem;height:.42rem;border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(-45deg)}
.prose img.inline{border-radius:var(--radius);box-shadow:var(--shadow);margin:1.4rem 0;aspect-ratio:16/9;object-fit:cover;width:100%}
/* long-form body (`body_md` -> markdownify). `.wrap` is --maxw wide, which is right for card grids and
   wrong for an article: capped to a readable measure and centered. Also styles the elements markdown
   emits that the base .prose rules never needed (ol, blockquote, code, table, hr) so a full-length post
   inherits the design instead of arriving as hand-built HTML. */
.prose--longform{max-width:68ch;margin-inline:auto}
.prose--longform>ol{margin:0 0 1.1rem;padding-left:1.4rem}
.prose--longform>ol li{margin-bottom:.5rem}
.prose--longform blockquote{margin:1.5rem 0;padding:.2rem 0 .2rem 1.3rem;border-left:4px solid var(--accent);color:var(--navy);font-style:italic}
.prose--longform blockquote p{margin:0}
.prose--longform code{background:var(--bg);border-radius:4px;padding:.12em .38em;font-size:.92em}
.prose--longform pre{background:var(--bg);border-radius:var(--radius);padding:1rem;overflow-x:auto}
.prose--longform pre code{background:none;padding:0}
.prose--longform table{width:100%;border-collapse:collapse;margin:0 0 1.1rem;display:block;overflow-x:auto}
.prose--longform th,.prose--longform td{border:1px solid var(--line,#e5e7eb);padding:.55rem .7rem;text-align:left}
.prose--longform hr{border:0;border-top:1px solid var(--line,#e5e7eb);margin:2rem 0}
.prose--longform img{border-radius:var(--radius);box-shadow:var(--shadow);margin:1.4rem 0;width:100%;height:auto}
.lead{font-size:1.18rem;color:var(--ink)}
.callout{background:var(--bg);border-left:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:1.1rem 1.3rem;margin:1.5rem 0}
.callout p{margin:0;font-style:italic;color:var(--navy)}
.callout .who{font-style:normal;font-weight:700;font-size:.88rem;color:var(--muted);margin-top:.4rem}
.side{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:1.2rem}
.side .card h3{font-size:1rem} .side .quote{background:var(--navy);color:var(--on-navy,#fff);border:none} .side .quote h3{color:var(--on-navy,#fff)}
.side .phone{font-family:var(--head);font-weight:800;color:var(--navy);font-size:1.3rem;display:block;text-decoration:none;margin:0 0 .1rem;line-height:1.2}
.side .off{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-top:.55rem}
.side ul{list-style:none;padding:0;margin:.4rem 0 0} .side ul a{display:block;padding:.32rem 0;font-size:.92rem;text-decoration:none;border-bottom:1px solid var(--line)}
.side .stars{color:var(--amber);letter-spacing:2px}
.btn-full{width:100%;justify-content:center;margin-top:.4rem}
/* reviews */
.reviews-head{display:flex;gap:1.5rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:2rem;text-align:center}
.rscore{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.6rem;box-shadow:var(--shadow-card)}
.rscore .big{font-family:var(--head);font-size:2.6rem;font-weight:800;color:var(--navy);line-height:1}
.rscore .stars{color:var(--amber);font-size:1.1rem;letter-spacing:2px}
.rscore .src{font-size:.82rem;color:var(--muted)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
/* A real review set is whatever the business actually has, so a 3-up grid regularly ends with one
   card stranded alone in the left column (7 reviews on the reviews hub). Centre a last card that
   starts its own row rather than dropping a genuine review to make the count divide. */
.quotes>:last-child:nth-child(3n+1){grid-column:2}
/* the card RESETS text color: it sits inside the navy reviews band (.bg-navy, light ink), and without
   its own color the review body inherited that light ink onto the light card — white-on-white. Its text
   pairs with the CARD surface via --on-surface (luminance-computed by the brand layer, like --on-navy),
   so a dark-surface palette gets light card text instead of navy-on-dark (the invisible reviewer name). */
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-card);color:var(--on-surface,var(--ink))}
.quote .stars{color:var(--amber);letter-spacing:2px;font-size:1rem}
.quote p{font-size:.95rem;margin:.6rem 0 .8rem}
.quote .who{font-family:var(--head);font-weight:700;color:var(--on-surface,var(--navy));font-size:.9rem}
.quote .who span{display:block;font-family:var(--body);font-weight:500;color:var(--on-surface-dim,var(--muted));font-size:.82rem}
/* service areas */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem 1.1rem}
.areas .city{display:flex;align-items:center;gap:.5rem;font-family:var(--head);font-weight:600;color:var(--navy);font-size:.98rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .9rem}
.areas .city .pin{width:18px;height:18px;color:var(--accent-deep);flex:none}
.areas a{display:block;color:var(--ink);text-decoration:none} .areas a:hover{color:var(--accent-deep)}
.areas .sub{font-size:.82rem;color:var(--muted);margin-top:.15rem}
.areas-note{text-align:center;margin:1.4rem 0 0;color:var(--muted);font-size:.95rem}
.areas-note a{color:var(--accent-deep);font-weight:600}
/* section sub-heading (intro line under an h2) */
.section-sub{color:var(--muted);font-size:1.06rem;margin:.3rem 0 0}
/* why-us / value cards */
.value{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.5rem}
.value .vmark{width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent-deep);margin-bottom:.2rem}
.value .vmark svg{width:32px;height:32px}
.value h3{color:var(--navy);font-size:1.08rem}.value p{color:var(--muted);margin:0}
/* brandmark — monogram chip + wordmark (the no-logo fallback, works for any business) */
.brandmark{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.brandmark .monogram{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--navy);color:var(--on-navy,#fff);font-family:var(--head);font-weight:800;font-size:1.15rem;text-transform:uppercase;flex:none}
.brandmark .wordmark{font-family:var(--head);font-weight:800;color:var(--navy);font-size:1.18rem;letter-spacing:-.01em;line-height:1.05}
/* faq */
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:.3rem 0}
.faq summary{cursor:pointer;font-family:var(--head);font-weight:600;color:var(--navy);padding:.95rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 1rem;color:var(--muted)}
/* contact form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form .full{grid-column:1/-1}
.form label{font-family:var(--head);font-weight:600;font-size:.85rem;color:var(--navy);display:block;margin-bottom:.3rem}
.form input,.form select,.form textarea{width:100%;padding:.72rem .85rem;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem;background:#fff}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.form textarea{min-height:120px}
.hp{position:absolute;left:-9999px}
/* cta band */
.cta-band{background:linear-gradient(100deg,var(--navy),var(--navy-deep));color:var(--on-navy,#fff);text-align:center;padding:clamp(3rem,6vw,4.5rem) 0}
.cta-band h2{color:var(--on-navy,#fff)} .cta-band p{color:color-mix(in srgb,var(--on-navy,#fff) 85%,transparent);max-width:640px;margin:.5rem auto 1.5rem}
.cta-band .actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
/* footer */
footer.site{background:var(--navy-deep);color:color-mix(in srgb,var(--on-navy,#fff) 78%,transparent);font-size:.92rem;padding:3rem 0 1.5rem}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:1.6rem}
footer.site h3{color:var(--on-navy,#fff);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .8rem;font-weight:600}
footer.site a{color:color-mix(in srgb,var(--on-navy,#fff) 78%,transparent);display:block;padding:.18rem 0;text-decoration:none} footer.site a:hover{color:var(--on-navy,#fff)}
footer.site .foot-logo{font-family:var(--head);font-weight:800;color:var(--on-navy,#fff);font-size:1.2rem;margin-bottom:.6rem}
footer.site .nap{font-size:.88rem;line-height:1.7}
footer.site .legal{border-top:1px solid color-mix(in srgb,var(--on-navy,#fff) 14%,transparent);margin-top:2rem;padding-top:1.1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:color-mix(in srgb,var(--on-navy,#fff) 60%,transparent)}
@media(max-width:980px){
  nav.main .label-full{display:none}
  .trust .wrap{grid-template-columns:repeat(3,1fr);row-gap:1.3rem}
  .cols-3,.cols-4,.quotes,.gallery{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr}
  .quotes>:last-child:nth-child(3n+1){grid-column:auto}
  .split,.split.rev,.layout{grid-template-columns:1fr;gap:1.5rem} .side{position:static} .areas{grid-template-columns:1fr 1fr 1fr} footer.site .cols{grid-template-columns:1fr 1fr}
  /* mobile nav */
  nav.main{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:.5rem var(--space) 1rem;display:none;box-shadow:var(--shadow);max-height:80vh;overflow:auto}
  nav.main>a,nav.main>.has-mega>a{padding:.8rem 0;border-bottom:1px solid var(--line);border-radius:0}
  nav.main .cta{margin-top:.7rem;justify-content:center}
  .has-mega{flex-direction:column} .mega{position:static;display:block;min-width:0;border:0;box-shadow:none;padding:.2rem 0 .6rem 1rem}
  .mega .mega-grid{grid-template-columns:1fr}
  .navtoggle:checked ~ nav.main{display:flex}
  .navtoggle-label{display:inline-flex;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem}
  .navtoggle-label span{width:26px;height:3px;background:var(--navy);border-radius:2px}
}
@media(max-width:560px){
  .cols-2,.cols-3,.cols-4,.quotes,.gallery,.steps,.checks,.areas,.form{grid-template-columns:1fr}
  .trust .wrap{grid-template-columns:1fr 1fr} footer.site .cols{grid-template-columns:1fr}
}

/* ---- Catfish-style split hero + inline quote card (renders only when pg.hero_form is set) ---- */
.hero--split .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.hero--split .col{max-width:none}
.hero__formcol{min-width:0}
@media(max-width:900px){.hero--split .wrap{grid-template-columns:1fr}.hero--split .quote-card{margin:0}}

/* hero quote card — a LIGHT lead card so it reads over the hero video/scrim */
.quote-card{background:var(--surface);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(1.3rem,2.6vw,1.8rem);max-width:440px;width:100%;margin-left:auto}
.quote-card__eyebrow{font-family:var(--head);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--accent-deep);margin:0 0 .3rem}
.quote-card__title{color:var(--navy);font-size:1.35rem;margin:0 0 .1rem}
.quote-card__intro{color:var(--muted);font-size:.92rem;margin:0 0 .9rem}
.quote-card__form{display:grid;gap:.6rem}
.quote-card__form input,.quote-card__form select,.quote-card__form textarea{width:100%;padding:.72rem .85rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--body);font-size:.95rem}
.quote-card__form input::placeholder,.quote-card__form textarea::placeholder{color:var(--muted)}
.quote-card__form select:invalid{color:var(--muted)}
.quote-card__form textarea{resize:vertical;min-height:66px}
.quote-card__form .btn{justify-content:center;width:100%;margin-top:.2rem}
.quote-card__consent{display:flex;gap:.5rem;align-items:flex-start;font-size:.74rem;color:var(--muted);line-height:1.5} .quote-card__consent input{width:auto;margin-top:.2rem}
.quote-card__note{font-size:.78rem;color:var(--muted);text-align:center;margin:.55rem 0 0}
.quote-card .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* "View full gallery" CTA under the Our Work grid */
.gallery__cta{display:flex;justify-content:center;margin-top:1.5rem}
.gallery__cta .btn-ghost{color:var(--accent-deep);border-color:color-mix(in srgb,var(--accent-deep) 45%,transparent)} .gallery__cta .btn-ghost:hover{background:var(--bg);color:var(--accent-deep)}
.eyebrow.center{text-align:center}

/* sticky mobile call/quote bar — homepage w/ hero_form only; hidden on desktop */
.mobile-cta{display:none}
@media(max-width:720px){
  body:has(.mobile-cta){padding-bottom:4.75rem}
  .mobile-cta{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:.6rem var(--space);background:color-mix(in srgb,var(--navy-deep) 96%,transparent);box-shadow:0 -8px 24px -14px rgba(0,0,0,.55)}
  .mobile-cta .btn{justify-content:center;padding:.72rem 1rem}
}

/* ---- contact form (contact-form.njk) --------------------------------------------------------
   PORTED FROM base.css. These classes (.contact-section/.contact-form/.field/.consent/.fineprint)
   existed ONLY in the legacy token cascade, which no live page has linked since the 2026-06-29
   premium cutover — so the contact form, the whole conversion path of every site, rendered with
   raw browser default inputs on every premium build. Additive: site.css carried no rules for any
   of these selectors, so nothing can regress. Written against site.css tokens, not base.css ones. */
.contact-section{padding:clamp(3rem,6vw,4.5rem) 0}
.contact-section .split{align-items:start;gap:clamp(1.75rem,4vw,3.5rem)}
.contact-form{margin-top:1.4rem;display:grid;gap:1.1rem}
.field{display:grid;gap:.45rem;margin:0}
.field label{font-family:var(--head);font-size:.86rem;font-weight:600;color:var(--ink);line-height:1.4}
.field input,.field select,.field textarea{
  width:100%;box-sizing:border-box;padding:.8rem .9rem;font:inherit;font-size:1rem;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);transition:border-color .15s ease,box-shadow .15s ease}
.field textarea{min-height:9rem;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.75}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field input[type=checkbox]{width:1.05rem;height:1.05rem;min-width:1.05rem;accent-color:var(--accent);cursor:pointer}
.consent{font-size:.82rem;line-height:1.6;color:var(--muted)}
.consent a{color:var(--accent);text-underline-offset:.15em}
.contact-form .btn{width:100%;justify-content:center}
/* contact-form.njk emits `btn btn--primary`, a modifier site.css never defined, so the submit
   button rendered with no background at all. Alias it to the primary CTA styling. */
/* WCAG 1.4.11 non-text contrast. A LIGHT brand gold on a white surface gives the control no
   discernible boundary (#F2B705 on #fff is 1.82:1, below the 3:1 a UI component needs), so the
   button reads as a coloured patch rather than an edge. A 1px rim derived from the brand amber
   restores the boundary on any pinned gold without changing the fill. Applies to every amber
   button; on a dark band the rim simply disappears into the surface. */
.btn-amber,.btn--primary{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--amber) 52%,#000),var(--btn-shadow,0 0 #0000)}

/* The label was hardcoded #fff on an amber surface. That assumes a DARK amber: on a brand whose
   real gold is light (#F2B705) the site's most important button, the contact form's submit, shipped
   white-on-gold at 1.82:1 and was effectively illegible. Use the same derived dark-amber ink
   .btn-amber already computes, so the label tracks whatever amber the brand actually pins.
   Found by the interactive-state contrast gate, 2026-08-19. */
.btn--primary{background:var(--amber);color:color-mix(in srgb,var(--amber) 24%,#000)}
.btn--primary:hover{background:var(--amber-deep);color:color-mix(in srgb,var(--amber-deep) 22%,#000)}
.fineprint{font-size:.8rem;line-height:1.6;color:var(--muted)}

/* The feature panel's 'View all' link sits on the dark panel, not in the white column list, so it
   must not take the light-pill hover above: that painted a near-white background under text the
   brand layer had set to white, and the link vanished. Its own hover stays on the dark panel. */
.mega__all{background:none;padding:0;border-radius:0;text-decoration:none}
.mega__all:hover{background:none;text-decoration:underline;text-underline-offset:3px}