/* ===========================================================
   Noah's Ark Veterinary Hospital — Global site styles
   Direction: REFINED MODERN SANS
   Type: Bricolage Grotesque (headlines) + Inter (body/UI)
   Palette: brand indigo #342D4F (logo) · porcelain paper #FCFBFA · teal #1FA6AC
   Principles: editorial grid, hairline rules, small radii,
               negative space. Warmth via paper + photography, not shape.
   =========================================================== */

:root{
  /* palette — restrained: ink + paper + ONE warm accent */
  --ink:#342D4F;          /* brand indigo — matches the logo lockup */
  --ink-soft:#5B5278;     /* muted body copy (plum-indigo tint) — 6.9:1 on paper */
  --ink-faint:#8C86A8;
  --paper:#FCFBFA;        /* porcelain — crisp warm-white base (was #FBFAF7 cream; yellow undertone read dated) */
  --paper-2:#F1F0F3;      /* faint neutral mist — accent band / hover only (retuned off the old greige) */
  --white:#ffffff;
  --accent:#1FA6AC;        /* teal — fills, hovers, marks on dark */
  --accent-dk:#0E7378;     /* deep teal — white-text buttons + marks/links on light (AA) */
  --accent-lt:#7FD0D4;     /* light aqua — accent text on the dark ink sections */
  --sky:#EBEEFB;           /* soft airy periwinkle wash — light/cheerful section bg */
  --line:rgba(52,45,79,.14);
  --line-strong:rgba(52,45,79,.26);
  --line-control:rgba(52,45,79,.56); /* form/button boundaries — 3.11:1 on --paper (WCAG 1.4.11).
                                        --line and --line-strong are decorative only: they sit on
                                        components that are already identifiable by fill or shadow,
                                        so they are not held to 3:1. Never use them on a control. */

  /* type */
  --font-head:'Bricolage Grotesque', sans-serif;
  --font-body:'Inter', sans-serif;

  /* radius + shadow — small, architectural */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow-sm:0 4px 18px -12px rgba(52,45,79,.4);
  --shadow-md:0 18px 40px -26px rgba(52,45,79,.4);
  --shadow-lg:0 30px 60px -34px rgba(52,45,79,.42);

  --maxw:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- accessibility: visible focus + skip link ---------- */
/* Ring must clear 3:1 against whatever sits behind it (WCAG 1.4.11).
   --accent #1FA6AC only manages 2.86:1 on --paper, 2.95:1 on white,
   2.55:1 on --sky and 2.60:1 on --paper-2 — it failed on every light
   surface on the site. --accent-dk clears it everywhere on light
   (5.43 paper / 5.61 white / 4.85 sky) and --accent-lt covers dark. */
:focus-visible{outline:3px solid var(--accent-dk);outline-offset:3px;border-radius:3px}
/* Dark sections: a deep-teal ring disappears on --ink, so lift it.
   Keep this list in sync with any new dark-background section. */
.site-footer :focus-visible,
.util-bar :focus-visible,
.cta-band :focus-visible,
.carely-hero :focus-visible,
.home-hero :focus-visible,
.svc-hero :focus-visible,
.svc-instrument :focus-visible,
.svc-feature__card :focus-visible,
.team-section.dark :focus-visible,
.mobile-menu :focus-visible,
.join :focus-visible,
.role-hero :focus-visible,
.article-hero :focus-visible,
.vz :focus-visible{outline-color:var(--accent-lt)}
/* ⚠️ .role-hero and .article-hero were missing from the list above and were
   caught by the 10 Aug keyboard sweep. Both set background:var(--ink), so the
   default --accent-dk ring renders teal-on-ink: #0E7378 (L .137) against
   #342D4F (L .031) is 2.31:1 against a 3:1 requirement. Measured 2.28-2.49:1 on
   the four careers role pages and 1.65:1 on the article template.
   📌 THE LIST IS THE WEAKNESS. Every dark surface has to be remembered here or
   its focus ring silently fails, and three have now been missed (.site-header,
   .role-hero, .article-hero). If a new dark section is added, add it here too. */
/* The transparent header sits ON the hero photograph, so it is a dark surface
   even though it is not in the list above — and it was missed. Measured
   2026-08-10: --accent-dk #0E7378 over the dark header renders about 2.75:1
   against a 3:1 requirement (WCAG 1.4.11), corroborated by a pixel diff at
   2.85-2.89:1 and by hand calculation. Flagged as pre-existing on 27 Jul and
   deferred to the pre-launch sweep; this is that sweep.
   --accent-lt on the same surface measures ~8.8:1.
   Scoped with :not(.scrolled):not(.header-solid) because once the header goes
   opaque white the marks turn ink and the DARK ring is the correct one. */
.site-header:not(.scrolled):not(.header-solid) :focus-visible{outline-color:var(--accent-lt)}
/* ...except when the hero underneath is LIGHT. data-header="transparent-dark"
   is the light-hero variant (ink logo + ink nav), where a pale ring would
   vanish. Put the dark ring back for it. */
body[data-header="transparent-dark"] .site-header:not(.scrolled):not(.header-solid) :focus-visible{outline-color:var(--accent-dk)}
.skip-link{position:absolute;left:16px;top:-100px;z-index:200;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:var(--r-sm);font-family:var(--font-body);font-weight:600;font-size:14.5px;
  box-shadow:var(--shadow-md);transition:top .2s ease}
.skip-link:focus{top:16px}
main:focus{outline:none}

.container{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.08;color:var(--ink);letter-spacing:-.02em}
.accent{color:var(--accent)}
.eyebrow{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:12.5px;color:var(--accent-dk);
  display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--accent);display:inline-block}
.eyebrow.center{justify-content:center}
.section-title{font-size:clamp(32px,4.6vw,56px);letter-spacing:-.025em}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:62ch;font-weight:400}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-family:var(--font-body);cursor:pointer;border:none;
  padding:14px 26px;border-radius:var(--r-sm);font-size:15.5px;letter-spacing:.01em;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn .arrow{display:none}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--accent-dk);color:#fff;transform:translateY(-2px)}
/* accent CTA: white on darker periwinkle (#5E6CC0) — WCAG AA 4.79:1 */
.btn-accent{background:var(--accent-dk);color:#fff}
.btn-accent:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
/* Border is the ONLY thing identifying this as a button (no fill), so it must
   clear 3:1 (1.4.11). --line-strong was 1.64:1. --line-control is 3.11:1. */
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-control)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn-ghost-light:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px #fff}

/* ===========================================================
   GLOBAL HEADER
   =========================================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,box-shadow .3s,border-color .3s}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;max-width:1340px;margin:0 auto}
.brand{display:flex;align-items:center}
.brand img{height:81px;width:auto;display:block}
/* 🔴 The 81px lockup collided with the homepage <h1> on phones — measured
   overlap 67px @320, 46px @360, 33px @390, 13px @414 (clean from 480 up).
   The headline wraps to more lines as the viewport narrows, so it climbs into
   a logo whose height never changed. Shrink the logo instead of pushing the
   hero down, which would have shoved the CTAs below the fold. */
@media(max-width:480px){ .brand img{height:54px} }
.site-header .logo-dark{display:none}
.nav-links{list-style:none;display:flex;align-items:center;gap:34px}
.nav-links a{font-family:var(--font-body);font-weight:500;font-size:15px;color:#fff;opacity:.92;position:relative;transition:opacity .2s,color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-7px;height:1.5px;width:0;background:var(--accent);transition:width .25s}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{opacity:1}
.nav-cta{padding:11px 22px;border-radius:var(--r-sm);background:var(--accent-dk);color:#fff !important;opacity:1 !important;font-weight:600;transition:transform .2s,background .2s,color .2s}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--ink);color:#fff !important;transform:translateY(-2px)}

/* scrolled / solid state */
.site-header.scrolled,.site-header.header-solid{background:var(--white);box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(52,45,79,.5)}
.site-header.scrolled .nav-links a,.site-header.header-solid .nav-links a{color:var(--ink)}
.site-header.scrolled .logo-light,.site-header.header-solid .logo-light{display:none}
.site-header.scrolled .logo-dark,.site-header.header-solid .logo-dark{display:block}

/* hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:90}
.hamburger span{width:26px;height:2px;background:#fff;transition:background .3s}
.site-header.scrolled .hamburger span,.site-header.header-solid .hamburger span{background:var(--ink)}

/* transparent-until-sticky over a LIGHT hero (e.g. team page): stays transparent with
   dark logo/nav for legibility, then the .scrolled state fades in the white bar on scroll */
body[data-header="transparent-dark"] .site-header .nav-links a{color:var(--ink)}
body[data-header="transparent-dark"] .site-header .logo-light{display:none}
body[data-header="transparent-dark"] .site-header .logo-dark{display:block}
body[data-header="transparent-dark"] .site-header .hamburger span{background:var(--ink)}

/* mobile overlay
   ⚠️ SCROLLING: this panel is `position:fixed;inset:0` and the list can be taller
   than a phone viewport once a submenu is open. It previously centered the items
   with `justify-content:center` and had NO overflow rule — so anything past the
   viewport was clipped at BOTH ends and completely unreachable (reported 13 Aug:
   "the mobile menu doesn't scroll so you can't see everything"). The fix is the
   pair below, and they only work together:
     - the panel scrolls  (`overflow-y:auto`)
     - the list centers via `margin:auto 0` on .mm-inner, NOT justify-content.
   Auto margins absorb free space when the list is short (visually centered) and
   collapse to 0 when it is tall, so the top never gets cut off. `justify-content:
   center` cannot do that — it clips overflow on the start edge at any height. */
/* z-index 100, ABOVE .hamburger's 90. Both live inside .site-header, which is
   position:fixed with z-index:60 and therefore its own stacking context, so
   they stack against each other directly. At 80 the hamburger painted ON TOP of
   the open panel - the ☰ sat under the ✕ and, once the panel became scrollable,
   floated over the moving list. Keep this above .hamburger. */
.mobile-menu{position:fixed;inset:0;z-index:100;background:var(--ink);transform:translateX(100%);transition:transform .4s cubic-bezier(.7,0,.2,1);
  display:flex;flex-direction:column;justify-content:flex-start;padding:80px 44px;visibility:hidden;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mobile-menu[aria-hidden="false"]{transform:translateX(0);visibility:visible}
.mm-inner{list-style:none;margin:auto 0;width:100%;flex:0 0 auto}
.mobile-menu a{display:block;font-family:var(--font-head);font-weight:500;font-size:30px;color:#fff;padding:12px 0;letter-spacing:-.02em}
/* staggered entrance — on the top-level ROWS, so a group animates as one unit */
.mm-inner > li{opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s}
.mobile-menu[aria-hidden="false"] .mm-inner > li{opacity:1;transform:translateY(0)}
.mobile-menu[aria-hidden="false"] .mm-inner > li:nth-child(2){transition-delay:.10s}
.mobile-menu[aria-hidden="false"] .mm-inner > li:nth-child(3){transition-delay:.15s}
.mobile-menu[aria-hidden="false"] .mm-inner > li:nth-child(4){transition-delay:.20s}
.mobile-menu[aria-hidden="false"] .mm-inner > li:nth-child(5){transition-delay:.25s}
.mobile-menu[aria-hidden="false"] .mm-inner > li:nth-child(6){transition-delay:.30s}

/* group parent: hub link + caret toggle share one row.
   The link keeps the full remaining width so the tap target stays large. */
.mm-row{display:flex;align-items:center;gap:12px}
.mm-row > a{flex:1 1 auto}
.mm-toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:none;border:none;color:#fff;cursor:pointer;padding:0}
.mm-toggle .caret{width:18px;height:18px;transition:transform .25s}
.mm-toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
/* submenu: indented under its parent with a hairline spine, matching the desktop
   dropdown's contents exactly. `hidden` needs an explicit rule to beat display:block. */
.mm-sub{list-style:none;margin:2px 0 10px;padding-left:18px;border-left:1px solid rgba(255,255,255,.22)}
.mm-sub[hidden]{display:none}
.mm-sub a{font-size:21px;font-weight:400;color:rgba(255,255,255,.88);padding:9px 0}
.mm-sub a:hover{color:#fff}

.mobile-menu .mm-cta{display:inline-block;margin-top:22px;background:var(--accent-dk);color:#fff;border-radius:var(--r-sm);padding:13px 28px;font-family:var(--font-body);font-weight:600;font-size:17px;width:max-content}
/* `fixed`, not `absolute`: the panel is now a scroll container, and an absolutely
   positioned close button scrolls away with the list. .mobile-menu carries a
   transform, which makes it the containing block for fixed descendants — so this
   pins to the panel (and still slides with it when closed), never to the page. */
.mobile-close{position:fixed;top:26px;right:28px;background:none;border:none;color:#fff;font-size:34px;cursor:pointer;line-height:1;z-index:1}
@media (prefers-reduced-motion: reduce){
  .mm-inner > li{opacity:1;transform:none;transition:none}
  .mm-toggle .caret{transition:none}
}

@media(max-width:940px){
  .nav-links{display:none}
  .hamburger{display:flex}
}

/* ===========================================================
   GLOBAL FOOTER
   =========================================================== */
.site-footer{background:var(--ink);color:#fff;padding:84px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px}
.footer-brand .brand{margin-bottom:18px}
.footer-brand .brand img{height:96px;width:auto}
.footer-brand p{color:rgba(255,255,255,.65);font-size:15px;max-width:32ch;line-height:1.7}
.footer-brand .ftr-cta{margin-top:22px;background:var(--accent-lt);color:var(--ink)}
.footer-brand .ftr-cta:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.footer-social{list-style:none;display:flex;gap:12px;margin-top:24px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.82);transition:background .2s,color .2s}
.footer-social a:hover{background:var(--accent-dk);color:#fff}
.footer-social svg{width:18px;height:18px}
/* Column headings must cover h3 AND h4. The global `h1,h2,h3,h4{color:var(--ink)}`
   at the top of this file is a DIRECT rule, so it beats the white that
   `.site-footer{color:#fff}` only passes down by inheritance — a heading with no
   explicit colour here renders ink-on-ink and is invisible.
   That is not hypothetical: commit 056940a (the 22 Jul ADA pass) changed the
   footer markup h4 -> h3 to fix heading-level skipping, this selector still said
   h4 only, and "Explore" / "Services" / "Visit Us" were invisible at 1.00:1 on
   all 21 pages for three weeks. axe reported it as `incomplete`, never as a
   violation, so every "0 violations" run passed straight over it.
   If the footer markup ever changes heading level again, this selector must follow. */
.footer-col h3,.footer-col h4{font-family:var(--font-head);font-weight:600;font-size:15px;margin-bottom:18px;color:#fff;letter-spacing:.02em}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-col a{color:rgba(255,255,255,.66);font-size:15px;transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-contact p{color:rgba(255,255,255,.66);font-size:15px;margin-bottom:14px;display:flex;gap:11px;align-items:flex-start}
.footer-contact .ic{color:var(--accent);flex:0 0 auto;display:inline-flex;margin-top:1px}
.footer-contact .ic svg{width:18px;height:18px;display:block}
.footer-contact a:hover{color:var(--accent)}
.footer-utility{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13)}
.footer-utility a{color:rgba(255,255,255,.66);font-size:13.5px;font-weight:500}
.footer-utility a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:54px;padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{color:rgba(255,255,255,.66);font-size:13px}
.footer-bottom .de a{color:rgba(255,255,255,.66)}
.footer-bottom .de a:hover{color:var(--accent)}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(46px) scale(.985);transition:opacity .85s ease-out,transform .9s cubic-bezier(.2,.7,.15,1)}
.reveal.in{opacity:1;transform:none}

/* directional + staggered reveal */
.reveal-right{opacity:0;transform:translateX(70px);transition:opacity .9s ease-out,transform .95s cubic-bezier(.2,.7,.15,1)}
.reveal-right.in{opacity:1;transform:none}
/* On narrow viewports the 70px X-offset pushes near-full-width media past the
   right edge BEFORE the reveal fires, so the page loads with a horizontal
   scrollbar (WCAG 1.4.10 reflow). Reveal upward instead - same effect, no
   horizontal overflow. Fixes the cause; do NOT paper over it with
   body{overflow-x:hidden}, which would also kill position:sticky. */
@media(max-width:1000px){
  .reveal-right{transform:translateY(28px)}
}
/* ⚠️ The breakpoint above is NOT sufficient on its own - it was, until a full sweep
   (every page x 18 widths) found the SAME overflow returning between roughly 1024px
   and 1180px, where the container gutters are still too narrow to absorb the 70px
   offset: 38px of horizontal scroll on index, diagnostics, end-of-life-care and
   surgery. It was missed for months because reflow had only ever been spot-checked at
   320/375/768/1440/1920 - never in the 1024-1180 band.
   Proved by subtraction, not inference: hiding .mobile-menu or .trust-marquee changed
   nothing; hiding .reveal-right (or neutralising its transform) took overflow to 0.
   Clip the axis at section level so a pre-reveal offset can never extend the page's
   scroll width at ANY width. overflow-x:clip is deliberate - unlike `hidden` it does
   NOT create a scroll container, so the sticky homepage hero, the values zoom-stage
   and the FAQ aside all keep working. */
main > section{overflow-x:clip}
.reveal-delay-1{transition-delay:.12s}
.reveal-delay-2{transition-delay:.24s}
/* clear left-to-right cascade for the service cards */
.svc-grid .svc-card:nth-child(1){transition-delay:0s}
.svc-grid .svc-card:nth-child(2){transition-delay:.09s}
.svc-grid .svc-card:nth-child(3){transition-delay:.18s}
.svc-grid .svc-card:nth-child(4){transition-delay:.27s}
.svc-grid .svc-card:nth-child(5){transition-delay:.36s}
.svc-grid .svc-card:nth-child(6){transition-delay:.45s}

/* ---------- parallax (movement) ---------- */
[data-parallax]{will-change:transform}
.svc-hero .bg[data-parallax],
.cta-band--image .cta-bg[data-parallax]{top:-18%;bottom:auto;height:136%}
.svc-split__img img[data-parallax]{height:142%}
/* cinematic slow zoom on the hero footage — always-on life, even at rest */
@keyframes heroZoom{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.svc-hero .bg video,.svc-hero .bg img{animation:heroZoom 20s ease-in-out infinite alternate}
/* framed intro photo settles from a zoom as it reveals */
.svc-media img{transition:transform 1.4s ease-out}
.svc-intro .reveal-right img{transform:scale(1.12)}
.svc-intro .reveal-right.in img{transform:scale(1)}

@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-right{opacity:1;transform:none;transition:none}
  .svc-grid .svc-card{transition-delay:0s}
  [data-parallax]{transform:none!important}
  .svc-hero .bg[data-parallax],
  .cta-band--image .cta-bg[data-parallax]{inset:0;height:auto}
  .svc-split__img img[data-parallax]{height:100%}
  .svc-hero .bg video,.svc-hero .bg img{animation:none}
  .svc-media img,.svc-intro .reveal-right img{transform:none!important;transition:none}
  *{scroll-behavior:auto}
  /* Card hover lifts and image zooms. These were the one motion family not
     gated - team.html gated its own two card types inline; this covers the
     rest of the site. (JS-driven motion is gated in load-partials.js.) */
  .svc-card:hover,.pcard:hover,.hub-card:hover,.xcard:hover,.role-card:hover,
  .bene:hover,.handout-card:hover,.post-card:hover,.blog-featured:hover,
  .jstep:hover,.vet-card:hover,.staff-card:hover,
  .btn:hover,.btn-accent:hover,.btn-primary:hover{transform:none!important}
  .svc-card:hover img,.pcard:hover img,.hub-card:hover img,.post-card:hover img,
  .vet-card:hover .vet-photo img,.staff-card:hover .staff-photo img{transform:none!important}
  .post-item:hover{padding-left:0}
  .svc-card,.pcard,.hub-card,.xcard,.role-card,.bene,.handout-card,
  .post-card,.blog-featured,.jstep,.post-item{transition:none}
}

/* Anchor targets must clear the fixed header (2.4.1 / 2.4.3). Without this the
   skip link and every in-page #anchor landed underneath it. Header is ~120px
   plus the utility bar, so 140px leaves a little breathing room. */
:target,#main,[id]{scroll-margin-top:140px}

/* ===========================================================
   UTILITY BAR (sits above the main nav, always navy)
   =========================================================== */
.util-bar{background:var(--ink);position:relative;z-index:2}
.util-inner{max-width:1340px;margin:0 auto;padding:7px 32px;display:flex;align-items:center;justify-content:flex-end;gap:20px}
.util-bar a{color:rgba(255,255,255,.84);font-family:var(--font-body);font-weight:500;font-size:13px;
  display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.util-bar a:hover{color:#fff}
.util-bar a:focus-visible{outline-color:#fff}
.util-social{margin-right:auto;color:rgba(255,255,255,.84)}
.util-social svg{width:17px;height:17px;display:block}
.util-social:hover{color:#fff}
.util-phone{color:#fff !important;font-weight:600;letter-spacing:.01em}
.util-phone svg{width:14px;height:14px;color:var(--accent)}
.util-sep{width:1px;height:14px;background:rgba(255,255,255,.22);flex:0 0 auto}
/* Utility-link icons are a NARROW-VIEWPORT affordance only. Above 940 the text
   labels fit and the icons would just add width, so they stay hidden here and
   are switched on inside the max-width:940 block below. */
.util-link svg{display:none;width:17px;height:17px}
@media(max-width:940px){
  /* 🔴 SPECIFICITY BUG, FIXED 11 Aug 2026 — this was `.util-link,.util-sep`,
     which is (0,1,0). The base rule `.util-bar a{display:inline-flex}` above is
     (0,1,1) and therefore WON: media queries add no specificity, so this
     `display:none` never applied to the links and they have been visible at
     every width since it was written. `.util-sep` is a <span>, so `.util-bar a`
     never matched it and the separators DID hide — which is why the bar looked
     half-right and the bug went unnoticed. Scoped with .util-bar to outrank it. */
  /* Labels wrap below 940 ("Pet / Portal", "RX / Refill") and shove the phone
     number onto two lines — "(757) 564-" / "9815". Swap each label for its icon
     instead of hiding the links outright: Pet Portal and RX Refill are NOT in
     the mobile menu, so hiding them would strip the only mobile route to them.
     ⚠️ Icons and labels must never both show — that is wider than the label
     alone and re-wraps the bar at 560–768. */
  .util-bar .util-sep{display:none}
  .util-bar .util-label{display:none}
  .util-link svg{display:block}
  .util-inner{gap:18px;padding:6px 20px}
  .util-phone{white-space:nowrap}
}

/* ===========================================================
   DROPDOWN NAV (hover + keyboard via :focus-within)
   =========================================================== */
.has-sub{position:relative}
.has-sub > a .caret{width:10px;height:10px;margin-left:5px;transition:transform .25s;display:inline-block}
.subnav{position:absolute;top:calc(100% + 16px);left:-16px;min-width:252px;list-style:none;background:#fff;
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);border:1px solid var(--line);padding:14px;
  display:flex;flex-direction:column;gap:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:70}
.subnav::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px} /* hover bridge */
.has-sub:hover > .subnav,.has-sub:focus-within > .subnav{opacity:1;visibility:visible;transform:translateY(0)}
.has-sub:hover > a .caret,.has-sub:focus-within > a .caret{transform:rotate(180deg)}
/* 🔴 :focus-within ALONE CANNOT OPEN THIS MENU — it is a deadlock, and it was a
   live WCAG 2.1.1 failure from the day the dropdowns were built until 13 Aug
   2026. `.subnav` is visibility:hidden, which makes its links non-focusable;
   focus therefore can never get INSIDE, so :focus-within never matches, so the
   submenu never opens. Tab went straight from "About" to "Services", skipping
   all 11 submenu links on all 22 pages. It looked correct because it works
   perfectly on hover, and axe never caught it because axe does not traverse the
   tab order. `.sub-open` is applied by load-partials.js on focusin of the
   TRIGGER (which IS focusable), breaking the deadlock. Keep this rule ABOVE
   `.sub-collapsed` so Escape still wins. */
.has-sub.sub-open > .subnav{opacity:1;visibility:visible;transform:translateY(0)}
.has-sub.sub-open > a .caret{transform:rotate(180deg)}
/* Escape closes the submenu while focus stays on the trigger. Without this the
   only way to release :focus-within was to blur, which dropped focus to <body>
   and sent the next Tab back to the top of the page. Cleared on focusout/mouseleave. */
.has-sub.sub-collapsed > .subnav{opacity:0;visibility:hidden;transform:translateY(-6px)}
.has-sub.sub-collapsed > a .caret{transform:none}
.subnav a{color:var(--ink) !important;opacity:1 !important;font-size:15px;font-weight:500;padding:16px 22px;
  border-radius:var(--r-sm);white-space:nowrap;transition:color .18s ease}
.subnav a::after{display:none !important}
.subnav a:hover,.subnav a:focus-visible{background:none;color:var(--accent-dk) !important}

/* ===========================================================
   SERVICE HERO — full-bleed cinematic video (mimics team hero,
   overlaid editorial heading on a solid navy scrim)
   =========================================================== */
.svc-hero{position:relative;min-height:76vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.svc-hero .bg{position:absolute;inset:0;z-index:0}
.svc-hero .bg video,.svc-hero .bg img{width:100%;height:100%;object-fit:cover;display:block}
/* solid scrim (no gradient) — strong enough for white text over any frame */
.svc-hero .scrim{position:absolute;inset:0;z-index:1;background:rgba(26,21,38,.66)}
/* a second, heavier solid band hugging the bottom where the text sits — still solid, not a gradient */
.svc-hero .scrim-base{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;background:rgba(26,21,38,.42)}
.svc-hero .hero-inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;padding:0 32px 66px}
.svc-hero .crumbs{color:rgba(255,255,255,.82);margin-bottom:16px}
.svc-hero .crumbs a{color:rgba(255,255,255,.92)}
.svc-hero .crumbs a:hover{color:#fff}
.svc-hero .crumbs .sep{color:rgba(255,255,255,.5)}
.svc-hero .eyebrow{color:#fff;margin-bottom:16px}
.svc-hero .eyebrow::before{background:var(--accent)}
.svc-hero h1{color:#fff;font-family:var(--font-head);font-weight:600;font-size:clamp(36px,5.6vw,70px);
  letter-spacing:-.03em;line-height:1.02;margin:0 0 18px;max-width:20ch;text-wrap:balance}
.svc-hero .intro{color:rgba(255,255,255,.92);font-size:clamp(16.5px,1.9vw,20px);max-width:60ch;line-height:1.6;font-weight:400}
.svc-hero .intro + .intro{margin-top:12px}
@media(max-width:640px){
  .svc-hero{min-height:62vh}
  .svc-hero .hero-inner{padding-bottom:44px}
  .svc-hero .scrim{background:rgba(26,21,38,.6)}
}

/* ===========================================================
   CONTENT PAGE PATTERN (light hero — used by blog posts + indexes)
   =========================================================== */
.page-hero{background:var(--paper);padding:168px 0 64px;border-bottom:1px solid var(--line)}
.page-hero .container{max-width:880px}
.crumbs{font-size:13px;color:var(--ink-faint);margin-bottom:18px;font-weight:500}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--accent-dk)}
.crumbs .sep{margin:0 9px;color:var(--ink-faint)}
.page-hero .eyebrow{margin-bottom:18px}
.page-hero h1{font-size:clamp(33px,5vw,60px);letter-spacing:-.03em;line-height:1.05;margin:0 0 22px;max-width:21ch}
.page-hero .intro{font-size:clamp(16.5px,1.9vw,20px);color:var(--ink-soft);max-width:64ch;line-height:1.7}
.page-hero .intro + .intro{margin-top:14px}

.page-body{padding:60px 0 0}
.page-body .container{max-width:880px}

/* draft / builder flag — REMOVE before launch */
.draft-flag{background:#FFF3D2;border:1px solid #D9B441;color:#5a4710;border-radius:var(--r-sm);
  padding:15px 18px;font-size:14px;line-height:1.55;margin-bottom:34px}
.draft-flag strong{color:#3c2f06}

/* ===========================================================
   RICH SERVICE-PAGE SECTIONS (DE pattern: editorial intro,
   numbered icon cards, split highlight, image CTA)
   =========================================================== */
/* editorial intro — copy + framed media with overlapping caption */
.svc-intro{background:var(--paper);padding:100px 0}
.svc-intro .container{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.svc-intro .copy .eyebrow{margin-bottom:18px}
.svc-intro .copy h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.025em;line-height:1.1;margin-bottom:22px;max-width:18ch}
.svc-intro .copy p{color:var(--ink-soft);font-size:17px;line-height:1.8;max-width:54ch}
.svc-intro .copy p + p{margin-top:16px}
/* The pre-reveal zoom (.svc-intro .reveal-right img{scale(1.12)}) bleeds ~36px
   past this box on each side. Unclipped, that pushed the page into horizontal
   scroll at 200% text zoom (WCAG 1.4.4) - .home-story__frame already clips its
   equivalent. `clip` not `hidden`: it doesn't create a scroll container.
   The 16px margin keeps the img's box-shadow visible (it has a -26px spread,
   so it barely extends horizontally). */
.svc-media{position:relative;overflow:clip;border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.svc-media img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.svc-media .cap{position:absolute;left:22px;bottom:22px;right:22px;max-width:268px;background:var(--ink);color:#fff;
  padding:20px 22px;border-radius:var(--r-md);box-shadow:var(--shadow-lg)}
.svc-media .cap::before{content:"";display:block;width:30px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:13px}
.svc-media .cap strong{display:block;font-family:var(--font-head);font-weight:600;font-size:25px;letter-spacing:-.02em;line-height:1.05;margin-bottom:6px}
.svc-media .cap span{display:block;font-size:13px;color:rgba(255,255,255,.84);line-height:1.55}
@media(max-width:860px){.svc-intro{padding:72px 0}.svc-intro .container{grid-template-columns:1fr;gap:36px}}

/* sec2 VARIANT — animated "instrument" band (adapted from our Lewis & Clark
   monitoring section): a dark ink band with a teal pulse line that draws across
   the top and a threaded list of "readings" that slide in on scroll. Used on the
   3 variant service pages for rhythm. Pulse = CSS loop; slide-in reuses .reveal. */
.svc-instrument{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:clamp(72px,8vw,108px) 0}
.svc-instrument .container{position:relative;z-index:1}
.instr-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(40px,6vw,88px);align-items:center}
.instr-copy .peak-eyebrow,.instr-copy .peak-eyebrow svg{color:var(--accent-lt)}
.instr-copy h2{color:#fff;font-size:clamp(30px,4.2vw,52px);letter-spacing:-.03em;line-height:1.06;margin:14px 0 20px;max-width:15ch}
.instr-copy p{color:rgba(255,255,255,.82);font-size:17px;line-height:1.8;max-width:46ch}
.instr-copy .accent{color:var(--accent-lt)}
.instr-list{position:relative;padding-left:30px;margin:0;list-style:none}
.instr-list::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.16)}
.instr-item{position:relative;padding:18px 0 18px 6px;border-bottom:1px solid rgba(255,255,255,.1)}
.instr-item:last-child{border-bottom:none}
.instr-item::before{content:"";position:absolute;left:-30px;top:24px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(31,166,172,.2)}
.instr-item .k{display:block;font-family:var(--font-head);font-weight:600;font-size:18px;letter-spacing:-.01em;color:#fff;margin-bottom:4px}
.instr-item .v{display:block;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.7)}
@media(max-width:860px){.instr-grid{grid-template-columns:1fr;gap:34px}}

/* "connected" service pages — keep the cards as the single --sky pop, then let
   that sky SPILL halfway down through the next section (the feature's top half,
   via .svc-feature::before) so the two read as one connected flow before
   resolving to warm paper. Only one purple moment, no hard rectangle seam. */

/* numbered icon service cards — the centerpiece */
.svc-cards{background:var(--sky);padding:96px 0 104px}
.svc-cards .head{max-width:660px;margin:0 0 54px}
.svc-cards .head .eyebrow{margin-bottom:16px}
.svc-cards .head h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.025em}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px 30px;overflow:hidden;
  box-shadow:0 1px 1px rgba(52,45,79,.05), 0 14px 30px -20px rgba(52,45,79,.34);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .3s ease}
.svc-card:hover{transform:translateY(-8px);
  box-shadow:0 2px 5px rgba(52,45,79,.07), 0 32px 56px -28px rgba(52,45,79,.5);border-color:var(--accent)}
.svc-card__num{position:absolute;top:12px;right:20px;font-family:var(--font-head);font-weight:700;font-size:56px;line-height:1;color:var(--ink);opacity:.07;pointer-events:none}
.svc-card__icon{width:52px;height:52px;border-radius:12px;background:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  box-shadow:0 10px 20px -8px rgba(52,45,79,.5);transition:background .3s ease,box-shadow .3s ease,transform .3s ease}
.svc-card:hover .svc-card__icon{background:var(--accent-dk);box-shadow:0 14px 26px -8px rgba(94,108,192,.6);transform:translateY(-2px)}
.svc-card__icon svg{width:25px;height:25px;color:#fff}
.svc-card__accent{width:34px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:16px;transition:width .4s ease}
.svc-card:hover .svc-card__accent{width:54px}
.svc-card h3{font-size:19px;letter-spacing:-.012em;margin-bottom:9px}
.svc-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.65}
.svc-card p a{color:var(--accent-dk);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--accent)}
@media(max-width:900px){.svc-cards{padding:76px 0}.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* ===========================================================
   ARK CONCEPT — arched portals + the peak mark + waterline
   (the brand signature: the name + logo made structural)
   =========================================================== */
.peak-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px}
.peak-eyebrow svg{width:21px;height:14px;color:var(--accent-dk);flex:0 0 auto}

.ark-hero{background:var(--sky);position:relative;overflow:hidden;padding:150px 0 86px}
.ark-hero__inner{max-width:var(--maxw);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1.04fr .96fr;gap:64px;align-items:center}
.ark-hero h1{font-family:var(--font-head);font-weight:600;font-size:clamp(38px,5vw,66px);letter-spacing:-.03em;line-height:1.03;color:var(--ink);margin-bottom:22px}
.ark-hero .intro{color:var(--ink-soft);font-size:clamp(16.5px,1.7vw,19px);line-height:1.65;max-width:52ch;margin-bottom:30px}
.ark-hero__actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.ark-hero__call{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--ink);font-size:15.5px}
.ark-hero__call svg{width:18px;height:18px;color:var(--accent-dk)}
.ark-hero__call:hover{color:var(--accent-dk)}
.ark-hero__portal{position:relative}
/* the arch: a rounded-top portal — the ark's hull / the roof in the logo */
.ark-hero .arch{position:relative;height:min(600px,68vh);border-radius:50% 50% 18px 18px / 46% 46% 3% 3%;
  overflow:hidden;box-shadow:var(--shadow-lg)}
.ark-hero .arch video,.ark-hero .arch img{width:100%;height:100%;object-fit:cover;display:block}
/* the waterline — a single periwinkle horizon the ark rests on */
.ark-waterline{max-width:var(--maxw);margin:52px auto 0;padding:0 32px}
.ark-waterline::before{content:"";display:block;height:2px;background:var(--accent);opacity:.6;border-radius:2px}
@media(max-width:860px){
  .ark-hero{padding:120px 0 60px}
  .ark-hero__inner{grid-template-columns:1fr;gap:36px}
  .ark-hero .arch{height:60vh;max-height:440px}
  .ark-waterline{margin-top:36px}
}

/* ---- CarelyGo-language hero: warm full-bleed photo, white pill tag, friendly head ---- */
.pill-eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);
  font-family:var(--font-body);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 17px;border-radius:999px;margin-bottom:22px;box-shadow:0 6px 18px -10px rgba(52,45,79,.4)}
.pill-eyebrow svg{width:18px;height:12px;color:var(--accent-dk);flex:0 0 auto}

.carely-hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.carely-hero__bg{position:absolute;inset:0;z-index:0}
.carely-hero__bg img,.carely-hero__bg video{width:100%;height:100%;object-fit:cover;display:block}
.carely-hero__bg img{animation:heroZoom 22s ease-in-out infinite alternate}
/* Scrim is .66 for BOTH photo and video heroes.
   It used to be .52 here with a .66 --photo override, on the assumption that
   the hero videos were "all comparatively dark". Measuring real frames
   (ffmpeg, 2fps) disproved that: .carely-hero .intro is 16.5-20px regular, so
   it needs 4.5:1, and a .52 scrim floors at 3.61:1 over a white pixel — it can
   never be guaranteed. Diagnostics measured 3.76:1 (14 of 20 frames failing)
   and emergency-care 3.89:1 (15 of 26); only surgery passed. .66 floors at
   5.73:1. Do not lower this without re-measuring against actual frames.
   .carely-hero--photo is kept as a no-op alias so existing markup is valid. */
.carely-hero__scrim,
.carely-hero--photo .carely-hero__scrim{position:absolute;inset:0;z-index:1;background:rgba(26,21,38,.66)}
.carely-hero__inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;padding:0 32px 104px}
.carely-hero h1{font-family:var(--font-head);font-weight:600;font-size:clamp(38px,5.4vw,72px);letter-spacing:-.03em;line-height:1.02;color:#fff;max-width:20ch;margin-bottom:18px}
.carely-hero .intro{color:#fff;font-size:clamp(16.5px,1.8vw,20px);line-height:1.6;max-width:52ch;margin-bottom:30px}
.carely-hero__actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.carely-hero__call{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:#fff;font-size:15.5px}
.carely-hero__call svg{width:18px;height:18px;color:var(--accent-lt)}
.carely-hero__call:hover{color:var(--accent-lt)}
@media(prefers-reduced-motion:reduce){.carely-hero__bg img{animation:none}}
/* 🔴 H1 UNDER THE FIXED HEADER — MEASURED, NOT NUDGED (13 Aug 2026).
   .carely-hero is `align-items:flex-end` with NO top padding, so once the H1
   wraps to 3+ lines the content block grows past the hero and runs up UNDER the
   fixed header. Measured before the fix, header bottom = 119px on mobile:
       320px  surgery h1Top 0 (5 lines) · request-appointment 0 · diagnostics 38
       375px  surgery/dental/request-appointment h1Top 76 · diagnostics 103
   i.e. EVERY carely-hero page, not the 3 the overlap sweep flagged — the others
   were overlapping by less than its threshold. This is the same defect class
   that already shipped here once ("H1 overlapping the logo on every phone").
   The top padding only binds when the content would otherwise overflow upward:
   while the inner box is shorter than the hero it stays bottom-aligned and this
   changes nothing, so short heroes are visually untouched.
   ⚠️ Must stay >= header height AT EVERY WIDTH. 18vw was the first attempt and
   left a latent gap: at 768 the header is 146px but 18vw resolves to 138px -
   masked only because the content happens to be short there. 20vw clears 146.
   Re-measure with _qa-measure.js if the header ever gets taller. */
@media(max-width:860px){
  .carely-hero{min-height:74vh}
  .carely-hero__inner{padding-top:clamp(136px,20vw,176px);padding-bottom:76px}
}

/* soft pill tag for light sections */
.pill-eyebrow--soft{background:var(--sky);color:var(--ink)}

/* photo service cards (image fills, floating white label) */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 14px 30px -20px rgba(52,45,79,.34);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.pcard:hover{transform:translateY(-8px);box-shadow:0 32px 56px -28px rgba(52,45,79,.5)}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pcard:hover img{transform:scale(1.06)}
.pcard__label{position:absolute;left:14px;right:14px;bottom:14px;background:#fff;border-radius:var(--r-md);
  padding:16px 18px;box-shadow:0 12px 26px -16px rgba(52,45,79,.55)}
.pcard__label h3{font-size:18px;letter-spacing:-.012em;color:var(--ink);margin-bottom:5px}
.pcard__label p{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
@media(max-width:900px){.pcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pcards{grid-template-columns:1fr}}

/* FEATURE highlight — one continuous paper field; a floating dark card overlaps a photo (NO band) */
.svc-feature{background:var(--paper);padding:104px 0;overflow:hidden;position:relative}
/* the purple field spills down into the top half — the photo + card straddle the seam */
.svc-feature::before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:var(--sky);z-index:0}
.svc-feature__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1.14fr .86fr;align-items:center}
.svc-feature__media{position:relative;overflow:hidden;border-radius:var(--r-lg);height:580px;box-shadow:var(--shadow-md)}
.svc-feature__media img{width:100%;height:100%;object-fit:cover;display:block}
.svc-feature__media img[data-parallax]{height:124%}
.svc-feature__card{position:relative;z-index:2;margin-left:-120px;background:var(--ink);color:#fff;
  padding:48px 46px;border-radius:var(--r-lg);box-shadow:0 44px 84px -34px rgba(52,45,79,.62)}
.svc-feature__card .peak-eyebrow{color:var(--accent-lt);margin-bottom:16px}
.svc-feature__card .peak-eyebrow svg{color:var(--accent)}
.svc-feature__card h2{color:#fff;font-size:clamp(25px,3.1vw,38px);letter-spacing:-.025em;line-height:1.1;margin-bottom:18px;max-width:18ch}
.svc-feature__card p{color:rgba(255,255,255,.84);font-size:16.5px;line-height:1.78;max-width:46ch}
.svc-feature__card p + p{margin-top:13px}
/* Mirrored variant: card on the LEFT, photo on the right. Use when the subject
   of the photo sits on its right-hand side and the overlapping dark card would
   otherwise cover it (diagnostics: the radiograph is on the right of frame).
   Flips the layout rather than the image, so nothing in-frame is reversed. */
.svc-feature--flip .svc-feature__inner{grid-template-columns:.86fr 1.14fr}
.svc-feature--flip .svc-feature__media{order:2}
.svc-feature--flip .svc-feature__card{order:1;margin-left:0;margin-right:-120px}
@media(max-width:860px){
  .svc-feature{padding:64px 0}
  .svc-feature__inner{grid-template-columns:1fr;padding:0 20px}
  .svc-feature__media{height:330px}
  .svc-feature__card{margin:-52px 18px 0;padding:32px 28px}
  /* stacked on mobile: photo first, card tucked under it, same as default */
  .svc-feature--flip .svc-feature__inner{grid-template-columns:1fr}
  .svc-feature--flip .svc-feature__media{order:1}
  .svc-feature--flip .svc-feature__card{order:2;margin:-52px 18px 0}
}

/* FAQ section — editorial sticky-rail + numbered open Q&A (no toggles) */
.svc-faq{background:var(--paper);padding:120px 0 104px}
.svc-faq .container{max-width:var(--maxw)}
/* legacy head (other pages) */
.svc-faq .head{max-width:660px;margin:0 0 26px}
.svc-faq .head .eyebrow{margin-bottom:16px}
.svc-faq .head h2{font-size:clamp(26px,3.2vw,42px);letter-spacing:-.025em}

.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:60px;align-items:start}
.faq-aside{position:sticky;top:152px}
.faq-aside .eyebrow{margin-bottom:16px}
.faq-aside h2{font-size:clamp(26px,3.2vw,42px);letter-spacing:-.025em;margin-bottom:16px}
.faq-aside p{color:var(--ink-soft);font-size:16px;line-height:1.7;max-width:30ch;margin-bottom:24px}
.faq-aside .faq-call{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--accent-dk)}
.faq-aside .faq-call svg{width:18px;height:18px;flex:0 0 auto}
.faq-aside .faq-call:hover{color:var(--ink)}
.faq-list{display:flex;flex-direction:column}
/* FAQ accordion — native <details>/<summary>, collapsed by default to cut scroll */
.faq-item{display:block;border-top:1px solid var(--line)}
.faq-item:first-child{border-top:none}
.faq-item > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;
  column-gap:22px;align-items:start;padding:26px 0}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item:first-child > summary{padding-top:2px}
.faq-item .qnum{font-family:var(--font-head);font-weight:700;font-size:22px;line-height:1.3;color:var(--accent-dk)}
.faq-item summary h3{font-size:clamp(18px,2.1vw,22px);letter-spacing:-.015em;line-height:1.3;margin:0;transition:color .2s ease}
.faq-item > summary:hover h3{color:var(--accent-dk)}
.faq-item .faq-ind{position:relative;width:20px;height:20px;margin-top:5px}
.faq-item .faq-ind::before,.faq-item .faq-ind::after{content:"";position:absolute;background:var(--accent-dk);
  transition:transform .3s ease,opacity .3s ease}
.faq-item .faq-ind::before{top:9px;left:0;width:20px;height:2px}
.faq-item .faq-ind::after{left:9px;top:0;width:2px;height:20px}
.faq-item[open] .faq-ind::after{transform:scaleY(0);opacity:0}
.faq-item .a{padding:0 0 28px 49px}
.faq-item .a p{color:var(--ink-soft);font-size:16px;line-height:1.78;max-width:64ch}
.faq-item .a p + p{margin-top:12px}
.faq-item .a a{color:var(--accent-dk);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--accent)}
.faq-item .a a:hover{color:var(--ink)}
@media(max-width:860px){
  .faq-layout{grid-template-columns:1fr;gap:34px}
  .faq-aside{position:static}
  .faq-aside p{max-width:none}
}
@media(max-width:520px){
  .faq-item > summary{column-gap:14px}
  .faq-item .a{padding-left:0}
}

/* image-backed CTA band (solid scrim, no gradient) */
.cta-band--image{position:relative;overflow:hidden;background:var(--ink)}
.cta-band--image .cta-bg{position:absolute;inset:0;z-index:0}
.cta-band--image .cta-bg img{width:100%;height:100%;object-fit:cover}
/* warm closer: lighter scrim reveals more of the photo (still AA for white text, verified worst-case 6.1:1 at .68) */
.cta-band--image .cta-scrim{position:absolute;inset:0;z-index:1;background:rgba(26,21,38,.68)}
.cta-band--image .container{position:relative;z-index:2}
/* on the lighter photo band: white pill tag carries the eyebrow; bump body + phone icon to white for AA */
.cta-band--image p{color:rgba(255,255,255,.9)}
.cta-band--image .cta-phone svg{color:#fff}

/* open editorial sections (question heading + visible answer, hairline rhythm) */
.svc-sections{margin-top:4px}
.svc-block{display:grid;grid-template-columns:.82fr 1.18fr;gap:36px;padding:46px 0;border-top:1px solid var(--line)}
.svc-block:first-child{border-top:none;padding-top:6px}
.svc-block h2{font-size:clamp(21px,2.5vw,30px);letter-spacing:-.02em;line-height:1.12;margin:0;max-width:18ch}
.svc-block .a p{color:var(--ink-soft);font-size:16.5px;line-height:1.8;max-width:62ch}
.svc-block .a p + p{margin-top:14px}
.svc-block .a a{color:var(--accent-dk);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--accent)}
.svc-block .a a:hover{color:var(--ink)}
@media(max-width:760px){
  .svc-block{grid-template-columns:1fr;gap:14px;padding:34px 0}
  .svc-block h2{max-width:none}
}

/* toggles — native <details>/<summary> (retained for any legacy use) */
.toggles{border-top:1px solid var(--line)}
details.tog{border-bottom:1px solid var(--line)}
details.tog > summary{list-style:none;cursor:pointer;position:relative;padding:25px 52px 25px 2px;
  font-family:var(--font-head);font-weight:600;font-size:clamp(18px,2.2vw,23px);letter-spacing:-.015em;
  color:var(--ink);transition:color .2s}
details.tog > summary::-webkit-details-marker{display:none}
details.tog > summary:hover{color:var(--accent-dk)}
.tog-ind{position:absolute;right:4px;top:30px;width:22px;height:22px}
.tog-ind::before,.tog-ind::after{content:"";position:absolute;background:var(--accent-dk);transition:transform .3s ease,opacity .3s ease}
.tog-ind::before{top:10px;left:0;width:22px;height:2px}
.tog-ind::after{left:10px;top:0;width:2px;height:22px}
details.tog[open] > summary .tog-ind::after{transform:scaleY(0);opacity:0}
.tog-body{padding:0 52px 28px 2px}
.tog-body p{color:var(--ink-soft);font-size:16.5px;line-height:1.75;max-width:70ch}
.tog-body p + p{margin-top:14px}
.tog-body a{color:var(--accent-dk);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--accent)}
.tog-body a:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.tog-ind::before,.tog-ind::after,.faq-ind::before,.faq-ind::after{transition:none}}

/* long-form prose (blog body, simple index intros) */
.prose{max-width:720px}
.prose p{color:var(--ink-soft);font-size:17px;line-height:1.8;margin-bottom:20px}
.prose h2{font-size:clamp(23px,3vw,32px);letter-spacing:-.02em;margin:42px 0 14px}
.prose h2:first-child{margin-top:0}
.prose a{color:var(--accent-dk);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--accent)}
.prose a:hover{color:var(--ink)}
.prose ul{margin:0 0 20px 22px;color:var(--ink-soft);font-size:17px;line-height:1.8}
.prose li{margin-bottom:8px}

/* cross-link cards ("explore more") */
.crosslinks{padding:48px 0 84px}
.crosslinks > h2{font-size:15px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);
  font-family:var(--font-body);font-weight:700;margin-bottom:20px}
.xcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.xcard{display:block;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.xcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.xcard .x-k{font-family:var(--font-head);font-weight:600;font-size:17px;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.xcard .x-k .arrow{color:var(--accent-dk);transition:transform .2s}
.xcard:hover .x-k .arrow{transform:translateX(4px)}
.xcard p{font-size:14px;color:var(--ink-soft);margin-top:7px;line-height:1.55}

/* bottom CTA band */
.cta-band{background:var(--ink);color:#fff;margin-top:74px}
.cta-band .container{max-width:880px;padding-top:74px;padding-bottom:74px;text-align:center}
/* 12.5px/700 uppercase is small text -> needs 4.5:1. --accent on --ink is
   only 4.35:1; --accent-lt is 7.27:1. Matches .car-section.dark .eyebrow. */
.cta-band .eyebrow{justify-content:center;color:var(--accent-lt);margin-bottom:16px}
.cta-band .eyebrow::before{background:var(--accent-lt)}
.cta-band h2{color:#fff;font-size:clamp(27px,3.6vw,42px);letter-spacing:-.025em;margin-bottom:14px}
.cta-band p{color:rgba(255,255,255,.82);font-size:17px;max-width:54ch;margin:0 auto 30px;line-height:1.7}
.cta-actions{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.cta-phone{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-head);
  font-weight:600;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.01em}
.cta-phone svg{width:22px;height:22px;color:var(--accent)}

/* simple card grid for index/hub pages */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;padding:8px 0 12px}
.hub-card{display:flex;flex-direction:column;padding:30px 30px 28px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:#fff;transition:border-color .2s,transform .2s,box-shadow .2s}
.hub-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.hub-card .h-num{font-family:var(--font-head);font-weight:600;color:var(--accent-dk);font-size:14px;margin-bottom:14px}
.hub-card h2,.hub-card h3{font-size:23px;letter-spacing:-.02em;margin-bottom:10px}
.hub-card p{color:var(--ink-soft);font-size:15px;line-height:1.65;flex:1}
.hub-card .more{margin-top:18px;color:var(--accent-dk);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px}
.hub-card .more .arrow{transition:transform .2s}
.hub-card:hover .more .arrow{transform:translateX(4px)}

/* post list (blog index) */
.post-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.post-item{display:block;padding:30px 2px;border-bottom:1px solid var(--line);transition:padding .25s}
.post-item:hover{padding-left:14px}
.post-item h2,.post-item h3{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;margin-bottom:8px}
.post-item:hover h2,.post-item:hover h3{color:var(--accent-dk)}
.post-item p{color:var(--ink-soft);font-size:15.5px;line-height:1.6;max-width:70ch}

/* ===========================================================
   HOMEPAGE (index.html) — CarelyGo direction, teal accent
   Storytelling spine + sequenced hero. All motion reduced-motion gated.
   =========================================================== */

/* ---- HERO: warm full-bleed photo, sequenced load ---- */
.home-hero{position:sticky;top:0;z-index:0;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.home-hero__bg{position:absolute;inset:0;z-index:0}
.home-hero__bg img,.home-hero__bg video{width:100%;height:100%;object-fit:cover;display:block}
.home-hero__bg img{animation:heroZoom 24s ease-in-out infinite alternate}
.home-hero__scrim{position:absolute;inset:0;z-index:1;background:rgba(26,21,38,.60)}
.home-hero__inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;padding:120px 32px}
.home-hero h1{font-family:var(--font-head);font-weight:600;font-size:clamp(38px,5.6vw,68px);letter-spacing:-.03em;line-height:1.02;color:#fff;max-width:18ch;margin-bottom:18px}
.home-hero__sub{color:#fff;font-size:clamp(16.5px,1.8vw,20px);line-height:1.6;max-width:50ch;margin-bottom:28px}
.home-hero__actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:30px}
.home-hero__call{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:#fff;font-size:15.5px}
.home-hero__call svg{width:18px;height:18px;color:var(--accent-lt)}
.home-hero__call:hover{color:var(--accent-lt)}
/* ---- HERO trust marquee: infinite-drifting trust strip ---- */
.trust-marquee{position:relative;margin-top:30px;max-width:560px;overflow:hidden;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.trust-track{display:flex;width:max-content;will-change:transform;animation:trustScroll 26s linear infinite}
.trust-set{display:flex;align-items:center;flex:0 0 auto}
.trust-item{flex:0 0 auto;padding:0 18px;color:#fff;font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 6px rgba(26,21,38,.55)}
.trust-sep{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--accent-lt)}
.trust-sep svg{width:20px;height:14px;filter:drop-shadow(0 1px 4px rgba(26,21,38,.5))}
/* pause the drift when the user hovers or tabs into it */
.trust-marquee:hover .trust-track,
.trust-marquee:focus-within .trust-track{animation-play-state:paused}
/* visually-hidden, screen-reader copy of the same trust signals */
.trust-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@keyframes trustScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* sequenced entrance */
.home-hero .seq{opacity:0;transform:translateY(24px);animation:seqUp .85s cubic-bezier(.2,.7,.2,1) forwards}
.home-hero .seq:nth-child(1){animation-delay:.20s}
.home-hero .seq:nth-child(2){animation-delay:.36s}
.home-hero .seq:nth-child(3){animation-delay:.52s}
.home-hero .seq:nth-child(4){animation-delay:.68s}
.home-hero .seq:nth-child(5){animation-delay:.84s}
@keyframes seqUp{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .home-hero__bg img{animation:none}
  .home-hero .seq{animation:none;opacity:1;transform:none}
  .trust-track{animation:none}
}
@media(max-width:760px){.home-hero{min-height:82vh}.home-hero__inner{padding:104px 24px}}

/* ---- STORY: Independently Owned Since 1983 ---- */
.home-story{background:var(--sky);padding:clamp(64px,8vw,100px) 0}
.home-story__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.home-story__copy h2{font-weight:600;font-size:clamp(28px,3.6vw,46px);letter-spacing:-.03em;line-height:1.08;margin:18px 0 22px;max-width:16ch}
.home-story__copy h2 .accent{color:var(--accent-dk)}              /* "Since 1983" — same words, teal */
.home-story__copy p{color:var(--ink-soft);font-size:16.5px;line-height:1.8;max-width:54ch;margin-bottom:14px}
.home-story__copy p.lead{color:var(--ink);font-weight:500;font-size:clamp(18px,1.9vw,21px);line-height:1.6;margin-bottom:16px}
/* hairline-divided stat ledger */
.stat-strip{display:flex;gap:0;flex-wrap:wrap;margin-top:38px;border-top:1px solid var(--line-strong);padding-top:2px}
.stat{flex:1;min-width:120px;padding:18px 26px 0;border-left:1px solid var(--line)}
.stat:first-child{padding-left:0;border-left:none}
.stat dt{font-size:12.5px;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px}
.stat dd{font-family:var(--font-head);font-weight:700;font-size:clamp(32px,4.2vw,46px);letter-spacing:-.02em;color:var(--ink);line-height:1}
.home-story__media{position:relative}
.home-story__frame{position:relative;overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--shadow-md);aspect-ratio:4/5}
.home-story__frame img{width:100%;height:100%;object-fit:cover}
.home-story__frame img[data-parallax]{height:122%}
.home-story__stamp{position:absolute;left:-16px;bottom:30px;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  padding:13px 20px;font-family:var(--font-head);font-weight:500;font-size:13px;color:var(--ink-soft);display:flex;flex-direction:column;line-height:1.05}
.home-story__stamp strong{font-size:26px;color:var(--accent-dk);font-weight:700}
@media(max-width:860px){.home-story__inner{grid-template-columns:1fr;gap:40px}.home-story__media{max-width:420px}}
@media(max-width:520px){.stat{min-width:46%;border-left:none;padding:14px 0 0}.stat:nth-child(n+2){border-top:1px solid var(--line);margin-top:4px}}

/* ---- JOURNEY: Care for Every Stage (signature scroll spine) ---- */
.journey{background:#fff;padding:clamp(64px,9vw,108px) 0;overflow:hidden}
.journey__head{max-width:680px;margin:0 auto;text-align:center}
.journey__head .pill-eyebrow{margin-left:auto;margin-right:auto}
.journey__head h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.025em;margin:14px 0 16px}
.journey__head .lede{margin:0 auto}
.journey__track{position:relative;max-width:1000px;margin:60px auto 0}
.journey__line{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%;width:6px;overflow:visible}
.journey__line path{fill:none;stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.journey__line-bg{stroke:var(--line)}
.journey__line-fg{stroke:var(--accent);stroke-dasharray:1;stroke-dashoffset:1}
.jstep{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:64px;align-items:center;margin-bottom:60px}
.jstep:last-child{margin-bottom:0}
.jstep__media{overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.jstep__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .6s ease}
.jstep:hover .jstep__media img{transform:scale(1.05)}
.jstep__node{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 5px #fff,0 0 0 7px var(--line);z-index:2}
.jstep__body h3{font-size:clamp(20px,2.4vw,28px);letter-spacing:-.015em;margin-bottom:10px}
.jstep__body p{color:var(--ink-soft);font-size:16px;line-height:1.7;margin-bottom:14px;max-width:42ch}
.jstep:nth-of-type(even) .jstep__media{order:2}
.jstep:nth-of-type(even) .jstep__body{order:1;text-align:right}
.jstep:nth-of-type(even) .jstep__body p{margin-left:auto}
.textlink{display:inline-flex;align-items:center;gap:7px;color:var(--accent-dk);font-weight:600;font-size:15px}
.textlink .arrow{transition:transform .25s}
.textlink:hover{color:var(--ink)}
.textlink:hover .arrow{transform:translateX(4px)}
@media(max-width:760px){
  .journey__track{max-width:520px}
  .journey__line{left:22px;transform:none}
  .jstep{grid-template-columns:1fr;row-gap:16px;padding-left:54px;margin-bottom:46px}
  .jstep__media,.jstep:nth-of-type(even) .jstep__media{order:0}
  .jstep__body,.jstep:nth-of-type(even) .jstep__body{order:0;text-align:left}
  .jstep:nth-of-type(even) .jstep__body p{margin-left:0}
  .jstep__node{left:22px;top:26px;transform:translate(-50%,0)}
}

/* ---- VALUES: cinematic zoom-stage (Catskill-style camera) ----
   Desktop + motion-OK (JS adds .vz-ready): the dark band pins and a giant
   canvas pans/zooms value → value along a drawn teal thread; the title sits
   top-left over card 1 then fades as you reach card 2.
   Mobile / reduced-motion / no-JS: the default stacked story holds (no camera). */
.vz{background:var(--ink);color:#fff;position:relative}

/* DEFAULT (stacked — also the no-JS / mobile / reduced-motion fallback) */
.vz-stage{position:relative}
.vz-scene{position:relative;overflow:hidden}
.vz-overlay{max-width:760px;margin:0 auto;text-align:center;padding:clamp(64px,9vw,104px) 24px clamp(20px,4vw,40px)}
.vz-overlay h2{color:#fff;font-size:clamp(30px,4vw,52px);margin:0 0 16px}
.vz-overlay .lede{color:rgba(255,255,255,.82);font-size:clamp(17px,2vw,20px);max-width:54ch;margin:0 auto}
.vz-dots,.vz-cue{display:none}
.vz-camera{position:relative}
.vz-canvas{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,48px);
  padding:clamp(28px,4vw,48px) 24px clamp(64px,9vw,104px)}
.vz-thread{display:none}
.vz-beat{width:100%;max-width:560px;background:var(--white);color:var(--ink);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);display:grid;grid-template-rows:auto auto}
.vz-beat__img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.vz-beat__img img{width:100%;height:100%;object-fit:cover}
.vz-beat__body{padding:clamp(26px,3vw,40px) clamp(26px,3vw,40px) clamp(30px,3.4vw,44px)}
.vz-beat__n{font-family:var(--font-head);font-weight:700;font-size:clamp(40px,5vw,68px);line-height:.9;
  color:var(--accent-dk);letter-spacing:-.03em;display:block}
.vz-beat__n::after{content:"";display:block;width:46px;height:3px;background:var(--accent);border-radius:2px;margin:14px 0 16px}
.vz-beat__body h3{font-size:clamp(24px,3vw,34px);color:var(--ink);margin-bottom:12px}
.vz-beat__body p{color:var(--ink-soft);font-size:16.5px;line-height:1.7;max-width:46ch}

/* CAMERA MODE (JS adds .vz-ready on capable, motion-OK desktop) */
.vz.vz-ready .vz-stage{height:400vh}
.vz.vz-ready .vz-scene{position:sticky;top:0;height:100vh}
.vz.vz-ready .vz-overlay{position:absolute;top:var(--vz-safe,0);left:0;z-index:12;max-width:min(27vw,380px);text-align:left;
  margin:0;padding:clamp(20px,2.4vw,34px) clamp(40px,4.5vw,72px) clamp(20px,2.4vw,34px) clamp(28px,4vw,56px);transition:opacity .4s cubic-bezier(.5,.05,.25,1)}
.vz.vz-ready .vz-overlay h2{font-size:clamp(28px,3vw,44px)}
.vz.vz-ready .vz-overlay .lede{margin:0;font-size:clamp(15px,1.5vw,18px);max-width:28ch}
.vz.vz-ready.intro-gone .vz-overlay{opacity:0;pointer-events:none}
.vz.vz-ready .vz-camera{position:absolute;inset:0;overflow:hidden}
.vz.vz-ready .vz-canvas{position:absolute;top:0;left:0;width:5600px;height:3900px;display:block;padding:0;gap:0;
  transform-origin:0 0;will-change:transform}
.vz.vz-ready .vz-thread{display:block;position:absolute;inset:0;width:5600px;height:3900px;pointer-events:none;overflow:visible}
.vz.vz-ready .vz-beat{position:absolute;width:1360px;max-width:none;height:1040px;grid-template-rows:none;
  grid-template-columns:46fr 54fr;border-radius:20px;transition:box-shadow .5s cubic-bezier(.5,.05,.25,1),transform .6s cubic-bezier(.5,.05,.25,1);transform:scale(.985)}
.vz.vz-ready .vz-beat.is-active{box-shadow:0 50px 110px -40px rgba(0,0,0,.7);transform:scale(1)}
.vz.vz-ready .vz-beat__img{aspect-ratio:auto;height:100%}
.vz.vz-ready .vz-beat[data-flip] .vz-beat__img{order:2}
.vz.vz-ready .vz-beat__body{display:flex;flex-direction:column;justify-content:center;padding:64px 72px}
.vz.vz-ready .vz-beat__n{font-size:150px}
.vz.vz-ready .vz-beat__n::after{width:84px;height:5px;margin:26px 0 28px}
.vz.vz-ready .vz-beat__body h3{font-size:62px;margin-bottom:26px}
.vz.vz-ready .vz-beat__body p{font-size:28px;line-height:1.5;max-width:32ch}
/* beat placement on the 5600x3900 canvas (loose descending zig-zag) */
.vz.vz-ready .vz-beat[data-i="0"]{left:560px;top:380px}
.vz.vz-ready .vz-beat[data-i="1"]{left:3680px;top:980px}
.vz.vz-ready .vz-beat[data-i="2"]{left:640px;top:2040px}
.vz.vz-ready .vz-beat[data-i="3"]{left:3560px;top:2640px}

/* the teal thread (reuses the homepage Signature spine language) */
.vz-thread .t-line{fill:none;stroke:rgba(127,208,212,.22);stroke-width:5}
.vz-thread .t-fg{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.vz-thread .t-node{fill:var(--ink);stroke:var(--accent);stroke-width:4;opacity:0;transition:opacity .5s cubic-bezier(.5,.05,.25,1)}
.vz-thread .t-node.on{opacity:1}
.vz-thread .t-node-core{fill:var(--accent-lt);opacity:0;transition:opacity .5s cubic-bezier(.5,.05,.25,1) .1s}
.vz-thread .t-node-core.on{opacity:1}

/* progress dots */
.vz.vz-ready .vz-dots{display:flex;flex-direction:column;gap:14px;position:absolute;right:clamp(20px,3vw,40px);
  top:50%;transform:translateY(-50%);z-index:12}
.vz-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.24);transition:all .4s cubic-bezier(.5,.05,.25,1)}
.vz-dots span.on{background:var(--accent);transform:scale(1.45);box-shadow:0 0 0 5px rgba(31,166,172,.18)}

/* scroll cue */
.vz.vz-ready .vz-cue{display:flex;align-items:center;gap:9px;position:absolute;left:50%;bottom:26px;
  transform:translateX(-50%);z-index:12;color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  transition:opacity .4s cubic-bezier(.5,.05,.25,1)}
.vz.vz-ready.is-end .vz-cue{opacity:0;pointer-events:none}
.vz-cue svg{width:16px;height:16px;animation:vzbob 1.8s ease-in-out infinite}
@keyframes vzbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.vz-cue svg{animation:none}}

/* ---- NEIGHBORHOOD: place + map ---- */
.home-place{position:relative;overflow:hidden;background:var(--sky);padding:clamp(60px,8vw,96px) 0}
/* decorative Virginia silhouette watermark — bleeds off the left, sits under the content, never read by AT */
.home-place__bg{position:absolute;top:60%;left:-43%;transform:translateY(-50%);width:100%;z-index:0;
  pointer-events:none;line-height:0}
.home-place__bg svg{width:100%;height:auto;display:block;fill:var(--ink);opacity:.06}
.home-place__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.home-place__copy h2{font-size:clamp(26px,3.2vw,40px);letter-spacing:-.025em;margin:14px 0 16px;max-width:16ch}
.home-place__copy p{color:var(--ink-soft);font-size:16.5px;line-height:1.8;max-width:52ch;margin-bottom:22px}
.place__facts{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.place__facts li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--ink);line-height:1.5}
.place__ic{color:var(--accent-dk);flex:0 0 auto;display:inline-flex;margin-top:1px}
.place__ic svg{width:20px;height:20px}
.place__facts a{color:var(--accent-dk);font-weight:600}
.place__facts a:hover{color:var(--ink)}
.place__actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.home-place__map{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/3;background:#fff;border:1px solid var(--line)}
.home-place__map iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:860px){.home-place__inner{grid-template-columns:1fr;gap:36px}}

/* ============================================================
   SECTION BRIDGING — stacked rounded panels (homepage)
   Each homepage section lifts onto the one above with a rounded
   top + soft upward shadow, so hard color seams read as layered
   ledges instead of flat cuts. Solid colors only — no gradients,
   no wave dividers. (Thread + map-straddle treatments dropped.)
   NOTE: deliberately NO overflow:hidden on .vz — that would break
   the sticky pin of the zoom-stage. The rounded top still clips
   because each panel paints its own background to the border box.
   ============================================================ */
.home-story,.journey,.vz,.home-place{position:relative}
.home-story{z-index:2}
.journey{z-index:3}
.vz{z-index:4}
.home-place{z-index:5}
/* trailing homepage sections are static by default, so the sticky hero
   (z-index:0) would paint OVER them and show through. Lift them above it. */
/* continue the curved-ledge bridging through the last two homepage
   sections (FAQ + CTA). Also lifts them above the pinned hero (z-index)
   and the overlap closes the old margin gap that exposed the video. */
body[data-page="home"] .svc-faq{position:relative;z-index:6;
  margin-top:-52px;border-top-left-radius:40px;border-top-right-radius:40px;
  box-shadow:0 -22px 50px -28px rgba(52,45,79,.30)}   /* onto sky Find Us */
body[data-page="home"] .cta-band{position:relative;z-index:7;
  margin-top:-52px;border-top-left-radius:40px;border-top-right-radius:40px;
  box-shadow:0 -22px 50px -26px rgba(52,45,79,.45)}    /* dark onto paper FAQ */

@media(max-width:560px){
  body[data-page="home"] .svc-faq,
  body[data-page="home"] .cta-band{margin-top:-36px;
    border-top-left-radius:28px;border-top-right-radius:28px}
}

.home-story,.journey,.vz,.home-place{
  margin-top:-52px;
  border-top-left-radius:40px;border-top-right-radius:40px;
}
/* Find Us must NOT lift onto the pinned Values zoom-stage — a -52px
   overlap collides with the last held card. Sit flush below it. */
.home-place{margin-top:0}
/* upward shadow — depth scaled to the contrast of the band below */
.home-story{box-shadow:0 -22px 50px -28px rgba(52,45,79,.45)} /* onto ink hero  */
.journey{box-shadow:0 -22px 50px -28px rgba(52,45,79,.30)}    /* onto sky story */
.vz{box-shadow:0 -22px 50px -26px rgba(52,45,79,.55)}         /* onto white     */
.home-place{box-shadow:0 -22px 50px -28px rgba(52,45,79,.30)} /* onto ink vals  */

/* breathing room so content clears the rounded shoulder
   (.vz handles its own top spacing in both stacked + pinned modes) */
.home-story{padding-top:clamp(28px,3vw,44px)}
.journey{padding-top:clamp(44px,5vw,72px)}
.home-place{padding-top:clamp(40px,4.5vw,64px)}

@media(max-width:560px){
  .home-story,.journey,.vz,.home-place{margin-top:-36px;
    border-top-left-radius:28px;border-top-right-radius:28px}
}
/* reduced motion: drop the sticky-hero reveal — hero scrolls normally */
@media(prefers-reduced-motion:reduce){
  .home-hero{position:relative}
}

/* ── Reusable curved-ledge bridging (interior pages: team, wellness) ──
   Add class="bridge" to <main>. Every section after the hero lifts onto
   the one above with a rounded top + soft shadow. Static sections paint
   in DOM order (later on top), so the overlap reads correctly without
   explicit z-index. NO blanket overflow:hidden — it would break the
   wellness FAQ's sticky aside; image-bg CTAs (.join, .cta-band--image)
   already set their own overflow:hidden, which clips the rounded top. */
.bridge > section{position:relative}
.bridge > section:not(:first-of-type):not(.svc-feature):not(.svc-faq):not(.crosslinks-band){
  margin-top:-52px;
  border-top-left-radius:40px;border-top-right-radius:40px;
  box-shadow:0 -22px 50px -28px rgba(52,45,79,.34);
  /* sit above the hero's dark scrim (z-index:1) so the lifted porcelain panel
     paints over it instead of being tinted grey by it. Equal z-index to the
     scrim → DOM order wins (panel comes later); still below hero text (z-index:2). */
  z-index:1;
}
/* svc-feature has its own sky-spill + floating dark card composition —
   the bridging curve clashes with it, so opt this section out.
   svc-faq + crosslinks read cleaner flush (no curve/shadow): the FAQ
   shadow didn't "flow" and the lifted dark CTA was overlapping the
   crosslinks cards. Opt them out too. */
.bridge > .svc-feature,
.bridge > .svc-faq,
.bridge > .crosslinks-band{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:none}
@media(max-width:560px){
  .bridge > section:not(:first-of-type):not(.svc-feature):not(.svc-faq):not(.crosslinks-band){margin-top:-36px;
    border-top-left-radius:28px;border-top-right-radius:28px}
}

/* Prototype lock REMOVED at launch (11 Aug 2026) — `lockPrototype()` and the
   `.is-locked` / `.proto-noop` rules are gone. It greyed out and disabled every
   internal link not on an allow-list, which was correct for prototype review and
   is a live-site outage if it ever fires again. Do not reintroduce it. */