/* 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}
a{color:var(--accent-deep)} a: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 a{display:block;padding:.4rem .5rem;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500}
.mega a: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:760px}
/* 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(2.1rem,5vw,3.4rem);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)}
.ihero h1{font-size:clamp(1.9rem,4.2vw,2.9rem);color:var(--on-navy,#fff);max-width:780px}
.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}
.section-head{max-width:760px;margin-bottom:2rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.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:48px;height:48px;border-radius:12px;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:26px;height:26px}
/* 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)}
.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%}
.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}
/* 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:46px;height:46px;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:24px;height:24px}
.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}
  .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}
}