/* ==========================================================================
   Victorian Concussion Network — site styles (2026 design system)
   Built on assets/css/tokens.css. Components follow styleguide-2026.html.
   Light mode only; deep Tide navy appears as fixed bands, never a theme.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-text);font-weight:400;color:var(--ink);background:var(--bone);line-height:var(--leading-body);font-size:var(--t-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.1;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:var(--azure-700)}
:focus-visible{outline:3px solid var(--azure-300);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--azure-700);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:100}
.skip-link:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--font-mono);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--azure-700)}
.lead{font-size:var(--t-lead);color:var(--ink-soft);line-height:1.5;max-width:62ch}
.mono{font-family:var(--font-mono)}

/* ---- Buttons & chips ---- */
.btn{font-family:var(--font-text);font-weight:600;font-size:.95rem;border-radius:var(--r-pill);padding:13px 26px;border:1.5px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:9px;text-decoration:none;transition:all var(--dur) var(--ease-out)}
.btn-sm{padding:9px 18px;font-size:.86rem}
.btn-primary{background:var(--azure-700);color:#fff}
.btn-primary:hover{background:var(--azure-900);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--azure-700);color:var(--azure-700)}
.btn-white{background:#fff;color:var(--azure-900)}
.btn-white:hover{transform:translateY(-2px)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:.82rem;font-weight:500;padding:7px 15px;border-radius:var(--r-pill)}
.chip.soft{background:color-mix(in srgb,var(--azure-300) 18%,transparent);color:var(--azure-700)}
.chip.line{border:1px solid var(--line);color:var(--ink-soft)}
.cluster{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---- Announcement bar ---- */
.anno{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px var(--gutter);font-size:.86rem;background:var(--azure-900);color:#eaf6ff;text-align:center}
.anno a{color:#fff}
.anno .x{margin-left:8px;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;font-family:var(--font-mono);font-size:.9rem}
.anno .x:hover{opacity:1}
.anno[hidden]{display:none}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bone) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;gap:20px;padding-block:12px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brandmark{aspect-ratio:91.86/100.29;display:block;flex:none}
.m-vcn{--head:#0E2233;--ring-deep:#0870B8;--ring-bright:#20A8E0}
.m-reverse{--head:#fff;--ring-deep:#20A8E0;--ring-bright:#6AC5EB}
.wm-lock{display:flex;flex-direction:column;line-height:.98;font-family:var(--font-display);font-size:1rem}
.wm-lock .l1{font-weight:500;color:var(--ink)}
.wm-lock .l2{font-weight:600;color:var(--azure-700)}
.main-nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav-link{font-family:var(--font-text);font-size:.92rem;color:var(--ink-soft);text-decoration:none;padding:9px 13px;border-radius:10px;background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-link:hover{color:var(--ink);background:color-mix(in srgb,var(--sand) 55%,transparent)}
.nav-link[aria-current="page"]{color:var(--ink);font-weight:600}
.nav-item{position:relative}
.nav-item .caret{font-size:.6rem;color:var(--ink-mute);transition:transform var(--dur-fast) var(--ease-out)}
.nav-item.open .caret{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 8px);left:0;min-width:290px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-2);padding:8px;display:none;z-index:60}
.nav-item.open .sub{display:block}
.sub a{display:block;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:500;padding:10px 12px;border-radius:8px}
.sub a:hover{background:var(--azure-50)}
.sub a small{display:block;color:var(--ink-mute);font-size:.76rem;font-weight:400}
.header-cta{display:flex;align-items:center;gap:10px;margin-left:8px}
.nav-burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;color:var(--ink)}
@media(max-width:960px){
  /* backdrop-filter would make the header the containing block for the
     fixed drawer, clipping it — use a solid header on mobile instead */
  .site-header{background:var(--bone);backdrop-filter:none;-webkit-backdrop-filter:none}
  .main-nav{position:fixed;inset:0;top:0;background:var(--tide-900);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;padding:140px var(--gutter) 40px;display:none;overflow-y:auto;z-index:49}
  .main-nav.open ~ .header-cta .nav-burger{color:#fff;border-color:rgba(255,255,255,.4)}
  .main-nav.open{display:flex}
  .main-nav .nav-link{color:rgba(255,255,255,.85);font-size:1.25rem;font-family:var(--font-display);padding:10px 0;width:100%}
  .main-nav .nav-link:hover{background:none;color:#fff}
  .sub{position:static;background:transparent;border:none;box-shadow:none;padding:0 0 8px 14px;min-width:0}
  .sub a{color:rgba(255,255,255,.72)}
  .sub a:hover{background:rgba(255,255,255,.06)}
  .sub a small{color:rgba(255,255,255,.4)}
  .nav-burger{display:block;position:relative;z-index:51}
  .site-header .bar .btn{position:relative;z-index:51}
  /* .main-nav carries the margin-left:auto that pushes the CTA right, but here
     it is taken out of flow, so the bar would pack left and leave a gap on the
     right. Hand the job to .header-cta so the burger lands on the gutter, in
     line with the page content below it. */
  .header-cta{margin-left:auto}
}

/* ---- Hero (home) ----
   All of the client's footage is portrait (video 720x1280, photos 2:3), so the
   hero treats that as the format rather than cropping it into a landscape
   band: editorial type on the left, a tall media panel on the right, layered
   with a soft glow behind and the APA mark overlapping its lower corner. */
.hero{position:relative;overflow:hidden;padding-block:clamp(44px,6vw,88px) clamp(48px,6vw,88px)}
/* Subtle lift from the bottom edge upwards. Kept light enough that ink and
   ink-soft copy sitting on top of it still clear WCAG AA. */
.hero-wash{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--azure-100) 62%,transparent) 0%,
    color-mix(in srgb,var(--azure-50) 55%,transparent) 30%,
    transparent 66%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,72px);align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}
.hero-copy{min-width:0}

.hero-media{position:relative;width:min(100%,400px);justify-self:end;min-width:0}
@media(max-width:860px){.hero-media{justify-self:center;width:min(100%,340px)}}
.hero-frame{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e-3);background:var(--tide-900)}
/* Capped so the whole hero, trust rail included, clears a 900px laptop
   viewport. object-fit crops the portrait clip rather than letterboxing it. */
.hero-frame video{width:100%;aspect-ratio:9/16;max-height:min(66vh,680px);object-fit:cover;object-position:50% 15%;display:block}
/* Hairline lift so the panel reads as glass on the wash */
.hero-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);pointer-events:none}
.hero-badge{position:absolute;left:-14px;bottom:52px;z-index:2;display:flex;align-items:center;gap:11px;
  max-width:min(255px,86%);padding:11px 15px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--e-2)}
.hero-badge img{height:30px;width:auto;flex:none}
.hero-badge span{font-size:.72rem;line-height:1.3;font-weight:500;color:var(--ink-soft)}
/* ink-mute only reached 3:1 against the wash at this size, so the caption uses
   ink-soft to clear AA */
.hero-media .cap{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:14px;text-align:center}

/* Trust rail: the same three verified facts, spanning the full hero width
   below both columns so each one sits on a single line with room to breathe */
.hero-ticks{position:relative;list-style:none;display:flex;flex-wrap:wrap;gap:12px 0;margin-top:clamp(34px,4vw,56px);padding-top:24px;border-top:1px solid var(--line)}
/* The tick was a rotated-border pseudo-element with hand-tuned em offsets, and
   it never sat true: the rotation moves the visible ink off the box centre, so
   every correction just traded one drift for another. It is now a real Lucide
   check in a flex-centred dot, so the geometry is layout-driven and exact. */
.hero-ticks li{display:flex;align-items:flex-start;gap:11px;flex:1 1 250px;padding-right:24px;font-size:.92rem;color:var(--ink-soft);font-weight:500;line-height:1.35;--dot:15px}
.hero-ticks li+li{border-left:1px solid var(--line);padding-left:20px}
.hero-ticks .tick{flex:none;width:var(--dot);height:var(--dot);border-radius:50%;
  background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);
  display:grid;place-items:center;
  /* centres the dot on the first text line, whatever the line-height */
  margin-top:calc((1.35em - var(--dot)) / 2)}
.hero-ticks .tick .i{width:9px;height:9px;stroke-width:3}
.hero-ticks li+li::before{left:20px}
.hero-ticks li+li::after{left:24.5px}
@media(max-width:620px){
  .hero-ticks li{flex:1 1 100%}
  .hero-ticks li+li{border-left:0;padding-left:26px}
  .hero-ticks li+li::before{left:0}
  .hero-ticks li+li::after{left:4.5px}
}
.btn-lg{padding:16px 34px;font-size:1.05rem}
.hero h1{font-size:var(--t-display);max-width:16ch;line-height:var(--leading-tight)}
.hero h1 .it{font-style:italic;font-weight:400;color:var(--azure-700)}
/* Rotating headline word. The caret only appears once the motion layer is
   live (.gsap-on), so with JS off or reduced motion on there is no blinking
   bar next to a word that never changes. Sized in em so it tracks the fluid
   display type. The h1 wraps with the word alone on line one, so retyping it
   never reflows the lines below. */
/* The rotating word gets its own line. Left inline, a short word ("Co" while
   retyping) lets "treatment" pull up onto line one, the h1 loses a line and
   everything below it jumps ~46px on every cycle. Block pins the wrap exactly
   where the copy already broke naturally. */
.rotator{display:block}
.rw-caret{display:none;width:.055em;height:.72em;margin-left:.05em;background:var(--azure-700)}
.gsap-on .rw-caret{display:inline-block;animation:rw-blink 1.05s steps(1) infinite}
@keyframes rw-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.gsap-on .rw-caret{display:none}}
/* Stepped up from the global --t-eyebrow (12px) so the two clinic names carry
   in the hero without needing a chip or an icon. */
.hero .eyebrow{display:inline-block;margin-bottom:22px;font-size:.95rem}
.hero .lead{margin-top:24px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-meta{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:52px;padding-top:20px;border-top:1px solid var(--azure-700)}
.hero-meta dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--azure-700);margin-bottom:6px}
.hero-meta dd{font-size:.9rem;color:var(--ink-soft)}

/* ---- Page hero (interior) ---- */
.pagehero{padding-block:clamp(44px,6vw,72px) clamp(32px,4vw,48px)}
.pagehero h1{font-size:var(--t-h1);max-width:20ch}
.pagehero .lead{margin-top:18px}
.pagehero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.pagehero.tide{background:var(--tide-900);color:#eaf1f6}
.pagehero.tide h1{color:#fff}
.pagehero.tide .lead{color:#b9cbd7}
.crumbs{display:flex;gap:8px;align-items:center;font-size:.84rem;color:var(--ink-mute);flex-wrap:wrap;margin-bottom:16px}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--azure-700)}
.crumbs .sep{color:var(--line)}
.pagehero.tide .crumbs,.pagehero.tide .crumbs a{color:#9fb4c2}

/* ---- Sections ---- */
.section{padding-block:var(--section-y)}
.section.tint{background:var(--shell);border-block:1px solid var(--line)}
/* CTA bands sit tight under the preceding section, but a tinted section ends in a
   1px rule that needs room beneath it before the band starts. */
.section-cta{padding-top:0}
.section.tint + .section-cta{padding-top:var(--section-y)}
.section-header{margin-bottom:clamp(28px,4vw,48px);max-width:820px}
.section-num{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--azure-700);margin-bottom:12px}
.section-header h2{font-size:var(--t-h2);max-width:24ch}
.section-header .lead{margin-top:14px}
.label-sm{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin:28px 0 12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}}

/* editorial split */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.split h2{font-size:var(--t-h2)}
.split .markclay{color:var(--clay);font-style:italic}
.media{aspect-ratio:4/3;border-radius:var(--r-lg);background:var(--grad-azure);position:relative;overflow:hidden;box-shadow:var(--e-2)}
.media::after{content:"";position:absolute;inset:0;background:radial-gradient(160px 160px at 75% 25%,rgba(255,255,255,.32),transparent)}
.media.sand{background:linear-gradient(135deg,var(--sand),var(--azure-100))}
.media .mark{position:absolute;inset:0;display:grid;place-items:center}
.media-photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--r-lg);box-shadow:var(--e-2)}
.media-photo.portrait{aspect-ratio:3/4}
.media-photo.wide{aspect-ratio:16/10}
/* The client's b-roll is all 2:3 portrait, so a landscape frame keeps only the
   middle band and centring it decapitates anyone standing. .faces pulls the
   crop window up to start ~15% down the source, which clears the hairline. */
.media-photo.faces{object-position:50% 30%}
.imgrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.imgrow{grid-template-columns:1fr}}
.tile-photo{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;display:block}

/* ---- Cards / bento ---- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--e-2)}
.card h3{font-size:1.2rem;margin-bottom:8px}
.card .meta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--azure-700)}
.ico{width:42px;height:42px;border-radius:12px;background:var(--azure-50);display:grid;place-items:center;color:var(--azure-700);flex:none}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1020px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bento{grid-template-columns:1fr}}
.bento.bento-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1020px){.bento.bento-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bento.bento-3{grid-template-columns:1fr}}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--e-2);display:flex;flex-direction:column;gap:10px;justify-content:space-between;transition:all var(--dur) var(--ease-out);overflow:hidden;text-decoration:none;color:var(--ink);min-height:190px}
a.tile:hover{transform:translateY(-5px);border-color:var(--azure-300);box-shadow:var(--e-3)}
.tile h3{font-size:1.2rem}
.tile p{font-size:.9rem;color:var(--ink-soft)}
.tile .reveal{font-size:.84rem;color:var(--azure-700);font-weight:600;margin-top:auto}
/* Compact variant: tiles fit their content instead of the 190px floor, and the
   Explore link sits just under the text rather than being pushed to the bottom. */
.compact-tiles .tile{min-height:auto}
.compact-tiles .tile .reveal{margin-top:12px}
/* Every service tile shares one footprint, so headache and migraine read as
   equal billing to concussion. .feature now only changes colour, not size.
   The shared --grad-azure starts at #38B0E2, which only gave white 2.5:1 and
   the body copy 2.1:1 once the tiles shrank to a quarter width. This deeper
   ramp starts at azure-700, so the lightest point is still 5.2:1 for the
   heading and 4.75:1 for the body copy. */
.tile.feature{background:linear-gradient(135deg,var(--azure-700) 0%,var(--azure-900) 100%);color:#fff;border:none}
.tile.feature h3{color:#fff}
.tile.feature p{color:var(--azure-50)}
.tile.feature .reveal{color:#fff}
.tile.feature .ico{background:rgba(255,255,255,.18);color:#fff}
.tile.wide{grid-column:span 2}
@media(max-width:560px){.tile.feature,.tile.wide{grid-column:span 1}}

/* pricing cards */
.pricecard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--e-2);display:flex;flex-direction:column;gap:12px}
.pricecard .n{font-family:var(--font-mono);font-size:.72rem;color:var(--azure-700);text-transform:uppercase;letter-spacing:.1em}
.pricecard h3{font-size:1.25rem}
.pricecard p{font-size:.9rem;color:var(--ink-soft)}
.pricecard .price{font-family:var(--font-mono);font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute)}
.pricecard .dur{font-family:var(--font-display);font-size:2rem;color:var(--ink);margin-top:auto}

/* spec list (two-column bullet cards) */
.speclist{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:820px){.speclist{grid-template-columns:1fr}}
.speccard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px}
.speccard h3{font-family:var(--font-text);font-weight:700;font-size:.95rem;margin-bottom:10px}
.speccard ul{list-style:none}
.speccard li{padding:4px 0 4px 18px;position:relative;font-size:.9rem;color:var(--ink-soft)}
.speccard li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--azure-400)}

/* checklist (single) */
.checklist{list-style:none;max-width:720px}
.checklist li{padding:7px 0 7px 30px;position:relative;color:var(--ink-soft)}
.checklist li::before{content:"✓";position:absolute;left:0;top:7px;color:var(--ok);font-weight:700}

/* prose */
.prose{max-width:760px}
.prose p{margin-bottom:1.1em;color:var(--ink-soft)}
.prose h2{font-size:var(--t-h3);margin:1.6em 0 .6em;color:var(--ink)}
.prose h3{font-size:1.15rem;margin:1.4em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.1em 1.3em;color:var(--ink-soft)}
.prose li{margin-bottom:.35em}
.prose strong{color:var(--ink)}

/* ---- Trust band / stats ---- */
.band{background:var(--tide-900);color:#eaf1f6;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;opacity:.06;background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1px);background-size:4px 4px}
.band .wrap{position:relative}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
/* two-column fallback lives in the touch refinements block below (860px) */
.stat .n{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.2rem);line-height:1;color:#fff}
.stat .l{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#9fb4c2;margin-top:8px}

/* ---- FAQ ---- */
.faq{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--paper);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;font-size:.98rem;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--azure-700);flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 22px 18px;color:var(--ink-soft);font-size:.92rem}
.faq .a p{margin-bottom:.8em}
.faq .a p:last-child{margin-bottom:0}

/* ---- CTA band ---- */
.ctaband{border-radius:var(--r-xl);padding:clamp(30px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ctaband.grad{background:var(--grad-azure);color:#fff}
.ctaband h2{font-size:var(--t-h3);max-width:22ch}
.ctaband.grad h2{color:#fff}
.ctaband.grad p{color:#dff0fb;font-size:.92rem;margin-top:6px}
.ctaband.soft{background:var(--azure-50);border:1px solid var(--azure-100)}

/* ---- Location cards ---- */
.locationcard{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);box-shadow:var(--e-2)}
.locationcard .info{flex:1 1 auto;min-width:0}
@media(max-width:620px){.locationcard{flex-direction:column}}
.locationcard .info{padding:26px}
.locationcard .info h3{font-size:1.3rem;margin-bottom:4px}
.locationcard .info .served{font-size:.84rem;color:var(--azure-700);margin-bottom:14px}
.locationcard .info dd a{text-decoration:none}
.locationcard .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.locationcard .visual{background:linear-gradient(135deg,var(--azure-100),var(--azure-300));display:grid;place-items:center;min-height:190px}
.locationcard .visual-wrap{flex:0 0 42%;max-width:42%;position:relative;overflow:hidden;min-height:220px}
.locationcard .visual-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:620px){.locationcard .visual-wrap{flex:none;max-width:none;width:100%;min-height:0;aspect-ratio:16/9}}

/* alerts */
.alert{display:flex;gap:12px;padding:16px 18px;border-radius:var(--r-md);font-size:.9rem;border:1px solid;max-width:820px}
.alert.warn{background:#fbf2dd;border-color:#ecd9a6;color:#8a6312}
.alert.info{background:var(--azure-50);border-color:var(--azure-100);color:var(--azure-800)}

/* ---- Forms ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;max-width:720px}
@media(max-width:620px){.form-grid{grid-template-columns:1fr}}
.field{margin-top:16px}
.field.full{grid-column:1/-1}
.field label{display:block;font-size:.84rem;font-weight:600;margin-bottom:7px}
.field .hint{font-size:.76rem;color:var(--ink-mute);margin-top:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--font-text);font-size:1rem;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);outline:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--azure-300);box-shadow:0 0 0 3px color-mix(in srgb,var(--azure-300) 35%,transparent)}
.form-note{font-size:.8rem;color:var(--ink-mute);margin-top:14px;max-width:720px}
.form-status{margin-top:16px;display:none;padding:14px 16px;border-radius:var(--r-md);font-size:.9rem;border:1px solid}
.form-status.ok{display:block;background:#eaf6ef;border-color:#bfe3cf;color:#1d6b46}
.form-status.err{display:block;background:#fbeaea;border-color:#f0c4c4;color:#a33}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---- Accreditation ---- */
.logos{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.logos .lg{min-height:54px;padding:12px 20px;border:1px solid var(--line);border-radius:12px;background:var(--paper);display:grid;place-items:center;font-family:var(--font-display);color:var(--ink-soft);font-size:.9rem;text-align:center}
.fundbadges{display:flex;gap:10px;flex-wrap:wrap}
.fundbadge{display:flex;align-items:center;gap:8px;border:1px solid var(--azure-100);background:var(--azure-50);color:var(--azure-800);border-radius:var(--r-pill);padding:8px 16px;font-size:.84rem;font-weight:500}
.fundbadge::before{content:"✓";color:var(--ok);font-weight:700}

/* ---- Footer ---- */
.site-footer{background:var(--tide-900);color:#cdd9e2;padding-block:clamp(40px,6vw,64px) 28px;margin-top:var(--section-y)}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media(max-width:820px){.site-footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer h2{font-family:var(--font-display);color:#fff;font-size:1.2rem;margin-bottom:10px;font-weight:500}
.site-footer h3{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#7e94a3;margin-bottom:12px;font-weight:500}
.site-footer .cols a,.site-footer .cols address{display:block;color:#cdd9e2;text-decoration:none;font-size:.86rem;padding:4px 0;font-style:normal}
.site-footer .cols a:hover{color:#fff}
.site-footer .tag{font-size:.86rem;color:#9fb4c2;max-width:34ch}
.site-footer .ack{font-size:.78rem;color:#8ba0ae;border-top:1px solid rgba(255,255,255,.1);margin-top:28px;padding-top:18px;max-width:78ch}
.site-footer .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.76rem;color:#7e94a3;margin-top:14px}
.site-footer .legal a{color:#7e94a3;text-decoration:none}
.site-footer .legal a:hover{color:#fff}

/* ---- Motion ---- */
/* Heading mask: animations.js wraps the heading text in .mask-line and adds
   .is-masked. The padding/margin pair keeps descenders from being clipped. */
.is-masked{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.mask-line{display:block}
.reveal-up{opacity:0;transform:translateY(14px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal-up.in{opacity:1;transform:none}
/* GSAP drives inline styles; disable the CSS transition so they don't fight */
html.gsap-on .reveal-up{transition:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto}
  .reveal-up{opacity:1;transform:none}
}

/* ---- Line icons + description lists ---- */
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Keeps the term readable to screen readers once the icon replaces it */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.datalist{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:.92rem}
/* Optically centre the icon against the first line of its value */
.datalist dt{display:flex;align-items:center;min-height:1.55em;color:var(--azure-700)}
.locationcard .info .datalist{font-size:.9rem;gap:8px 14px}
/* Align each icon with the first line of its value. */
.locationcard .datalist dt{align-self:start}

/* ---- Blog ---- */

/* Draft notice. Client copy rule: placeholder writing is always visibly marked,
   never quietly published. Removing the band is one flag in build-vcn-5.mjs. */
.draftnote{display:flex;gap:12px;align-items:flex-start;max-width:820px;margin-bottom:clamp(24px,3vw,36px);
  padding:15px 18px;border-radius:var(--r-md);border:1px dashed #ddb75f;background:#fbf2dd;color:#75540f;font-size:.88rem}
.draftnote .lbl{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  flex:none;padding:3px 9px;border-radius:var(--r-pill);background:#75540f;color:#fbf2dd}
.draftnote p{margin:0}
.draftnote strong{color:#5c410b}

/* Post cards */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.postgrid>*{min-width:0}
.postcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e-2);text-decoration:none;color:var(--ink);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.postcard:hover{transform:translateY(-3px);box-shadow:var(--e-3)}
.postcard img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 38%;display:block}
.postcard .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.postcard h3{font-size:1.12rem;line-height:1.25}
.postcard p{font-size:.9rem;color:var(--ink-soft)}
.postcard .reveal{font-size:.84rem;color:var(--azure-700);font-weight:600;margin-top:auto;padding-top:4px}

/* Lead post: same card, laid on its side */
.postcard.feature{flex-direction:row;align-items:stretch}
.postcard.feature img{flex:0 0 46%;max-width:46%;aspect-ratio:auto;min-height:320px;object-position:50% 34%}
.postcard.feature .body{padding:clamp(26px,3vw,40px);justify-content:center;gap:12px}
.postcard.feature h3{font-size:var(--t-h3);line-height:1.15}
.postcard.feature p{font-size:.98rem}
@media(max-width:900px){
  .postgrid{grid-template-columns:repeat(2,1fr)}
  .postcard.feature{flex-direction:column}
  .postcard.feature img{flex:none;max-width:100%;aspect-ratio:16/9;min-height:0}
}
@media(max-width:620px){.postgrid{grid-template-columns:1fr}}

/* Card + article metadata rail */
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.postmeta .cat{color:var(--azure-700)}
.postmeta .dot{color:var(--sand)}

/* Article */
.article-head{max-width:820px}
.article-head h1{font-size:var(--t-h1);max-width:19ch}
.article-head .lead{margin-top:18px}
.article-head .postmeta{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.article-figure{margin-bottom:clamp(28px,4vw,44px)}
.article-figure img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 34%;
  display:block;border-radius:var(--r-lg);box-shadow:var(--e-2)}
.article-figure figcaption{margin-top:10px;font-size:.82rem;color:var(--ink-soft)}

/* Body column with a contents rail alongside it on desktop */
.article-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.article-body .prose{max-width:720px}
.toc{position:sticky;top:96px;border-left:2px solid var(--sand);padding-left:18px}
.toc h2{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:12px}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0}
.toc a{font-size:.86rem;color:var(--ink-soft);text-decoration:none;line-height:1.35;display:block}
.toc a:hover{color:var(--azure-700)}
@media(max-width:1000px){
  .article-body{grid-template-columns:1fr}
  .toc{position:static;border-left:none;border:1px solid var(--line);background:var(--paper);
    border-radius:var(--r-md);padding:20px 22px}
  .toc ol{gap:11px}
}
/* Anchored headings should not land under the sticky header */
.prose h2[id]{scroll-margin-top:96px}

/* Key takeaways */
.takeaways{background:var(--azure-50);border:1px solid var(--azure-100);border-radius:var(--r-lg);
  padding:24px 26px;margin-bottom:clamp(28px,4vw,40px);max-width:720px}
.takeaways h2{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--azure-800);margin:0 0 12px}
.takeaways ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:9px}
.takeaways li{position:relative;padding-left:28px;font-size:.94rem;color:var(--ink-soft)}
.takeaways li::before{content:"";position:absolute;left:0;top:.44em;width:9px;height:9px;border-radius:50%;
  background:var(--azure-300);box-shadow:0 0 0 4px color-mix(in srgb,var(--azure-300) 22%,transparent)}
.takeaways strong{color:var(--ink)}

/* Author / review box at the foot of an article */
.authorbox{display:flex;gap:18px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--e-1);max-width:720px}
.authorbox .avatar{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--sand);color:var(--azure-800);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em}
.authorbox h2{font-size:1rem;margin-bottom:6px}
.authorbox p{font-size:.88rem;color:var(--ink-soft);margin:0}
.authorbox p+p{margin-top:8px}
@media(max-width:520px){.authorbox{flex-direction:column;gap:14px}}

/* Medical disclaimer, foot of every article */
.disclaimer{max-width:720px;margin-top:clamp(24px,3vw,32px);padding-top:20px;border-top:1px solid var(--line);
  font-size:.84rem;color:var(--ink-mute)}
.disclaimer a{color:var(--ink-soft)}

/* ---- Touch + small-screen refinements ---- */

/* Grid children default to min-width:auto, so an unbreakable token (a clinic
   email) can push a column wider than its container. Let them shrink, and let
   the addresses themselves break. */
.grid2>*,.grid3>*,.split>*,.speclist>*,.bento>*,.form-grid>*,.stats>*{min-width:0}
a[href^="mailto:"]{overflow-wrap:anywhere}

/* iPad portrait is 768px, so four stat columns land just inside the old 760px
   breakpoint and read as cramped. Drop to two a bit earlier. */
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}

@media(max-width:960px){
  /* The drawer is fixed at z-index 49; without a stacking context of its own
     the logo disappears underneath it. Lift it and flip it to the reverse
     colourway while the menu is open. */
  .site-header .brand{position:relative;z-index:51}
  /* cw-reverse, straight from logo-variants.html */
  .site-header .bar:has(.main-nav.open) .m-vcn{--head:#fff;--ring-deep:var(--azure-500);--ring-bright:var(--azure-300)}
  .site-header .bar:has(.main-nav.open) .wm-lock .l1{color:#fff}
  .site-header .bar:has(.main-nav.open) .wm-lock .l2{color:var(--azure-300)}
  /* Keep the header CTA on one line instead of wrapping to three */
  .site-header .header-cta .btn{white-space:nowrap}
}
/* Below this the wordmark and the CTA cannot both fit; keep the mark + the CTA */
@media(max-width:430px){.site-header .wm-lock{display:none}}

/* Tap targets. The announcement dismiss is a 9x18 glyph, so widen its hit area
   with a pseudo-element rather than growing the bar itself. */
.anno .x{position:relative}
.anno .x::after{content:"";position:absolute;inset:-13px -18px}
/* WCAG 2.2 AA 2.5.8 asks for 24px targets regardless of input device */
.crumbs a{display:inline-flex;align-items:center;min-height:24px}
@media(pointer:coarse){
  /* Standalone phone/email rows are primary actions on a clinic site, so give
     them a full 44px on touch. Prose links are left alone so they do not
     disturb their line boxes, and desktop layout is untouched. */
  dd>a[href^="tel:"],dd>a[href^="mailto:"],
  .site-footer a[href^="tel:"],.site-footer a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}
  .crumbs a{min-height:44px}
}

/* 404 */
.err404{min-height:52vh;display:grid;place-items:center;text-align:center;padding-block:64px}
.err404 .big{font-family:var(--font-display);font-size:clamp(4rem,10vw,7rem);color:var(--azure-700);line-height:1}