/* ============================================================
   TEMPLATE ONE - styles.css
   Global styles + homepage sections.
   Ported from reference/temp1-homepage-demo.html (approved demo).
   Variable names follow the skill spec (TEMP1-BUILD / SKILL.md);
   where the demo used short names, the skill names win.
   ============================================================ */

/* ---------- DESIGN TOKENS - SWAP THESE PER CLIENT ---------- */
:root{
  --color-accent:      #1F97C9;   /* GeriHab brand cyan, deepened for fill contrast */
  --color-accent-dim:  #16749A;   /* darker hover variant (nudged 3% darker from #17789F: measured 4.39:1 against the .sec-tint composite background used under wayfinding labels/kickers on interior pages, below the 4.5:1 AA minimum; still 5.25:1+ everywhere else it's used) */
  --color-accent-2:    #26723E;   /* secondary - deep green, sampled from GeriHab's logo icon (same hue, lightness dropped for white-text contrast) */
  --color-bg-light:    #F6F5F1;   /* warm light background */
  --color-bg-dark:     #0C1A20;   /* near-black cyan-tinted dark */
  --color-bg-darkest:  #061014;   /* footer */
  --color-ink-light:   #14212B;   /* text on light */
  --color-ink-dark:    #EEF3F5;   /* text on dark */
  /* brand-derived tints - derived from the GeriHab logo cyan #45BAE0 */
  --accent-soft:       rgba(69,186,224,.12);  /* chips, active fills */
  --accent-glow:       rgba(31,151,201,.32);  /* button/card glow shadows */
  --offer-grad-2:      #0E4A60;               /* offer gradient end */
  --offer-tint:        #ACEBFC;               /* offer accent text (nudged from #A9E6F7: the small-text "09 / Direct Access" label in .offer .way was 4.31:1 on the gradient's lighter end, just under the 4.5:1 AA text minimum) */
  --font-display:      'Fraunces', serif;
  --font-body:         'Hanken Grotesk', sans-serif;
  --spring:            cubic-bezier(.34,1.56,.64,1);
  --section-pad-v:     clamp(70px, 10vw, 130px);
  --section-pad-h:     clamp(20px, 6vw, 100px);
  --max-width:         1240px;
}

/* ---------- ACCESSIBILITY: SKIP LINK ----------
   First focusable element on every page. Hidden off-screen until
   keyboard focus lands on it, then jumps above the sticky nav. */
.skip-link{position:fixed;top:12px;left:12px;z-index:200;transform:translateY(-140px);
  background:var(--color-accent-dim);color:#fff;padding:14px 22px;border-radius:100px;
  font-family:var(--font-body);font-weight:700;font-size:.94rem;text-decoration:none;
  transition:transform .2s ease-out}
.skip-link:focus{transform:translateY(0)}

/* ---------- ACCESSIBILITY: GLOBAL FOCUS-VISIBLE RING ----------
   Nothing site-wide previously defined a custom focus style (a few
   components explicitly suppressed the browser default with no
   replacement), so keyboard focus was invisible or inconsistent on
   most controls. Double ring (white + dark halo) guarantees >=3:1
   contrast against every section background this template uses
   (light, dark, offer gradient, darkest footer, white cards) without
   needing a per-context color. !important guarantees it wins over
   the handful of explicit outline:none resets. */
:focus-visible{outline:3px solid #fff !important;outline-offset:2px;
  box-shadow:0 0 0 5px rgba(0,0,0,.6);border-radius:4px}
.skip-link:focus-visible{outline-color:#fff;box-shadow:0 0 0 5px rgba(0,0,0,.6)}

/* ---------- BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--color-bg-light);color:var(--color-ink-light);
  overflow-x:clip; /* clip, NOT hidden - hidden breaks position:sticky */
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:80;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.shell{max-width:var(--max-width);margin:0 auto;padding:0 var(--section-pad-h)}
section{padding:var(--section-pad-v) 0;position:relative}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.012em}

/* ---------- TYPOGRAPHY SCALE (skill spec) ---------- */
.t-hero{font-size:clamp(2.8rem,8vw,6.5rem)}
.t-h1{font-size:clamp(2.6rem,6vw,5rem)}
.t-h2,h2{font-variation-settings:'opsz' 100,'wght' 480;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.07;max-width:22ch}
.t-h3,h3{font-variation-settings:'opsz' 70,'wght' 500;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.12}
.t-label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.t-body,p{line-height:1.68}
.t-body{font-size:clamp(1rem,1.2vw,1.12rem)}
.muted{opacity:.72;font-weight:300}
.dark{background:var(--color-bg-dark);color:var(--color-ink-dark)}
.dark .muted{opacity:.7}

/* ---------- LOAD/REVEAL INITIAL STATES (gated on html.js so a
     JS failure never leaves content invisible) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(30px)}
.js [data-load]{opacity:0;transform:translateY(20px)}

/* ---------- SYSTEM 6: NUMBERED WAYFINDING ---------- */
.way{display:flex;align-items:center;gap:14px;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--color-accent-dim)}
.dark .way{color:var(--color-accent)}
.way .num{font-family:var(--font-display);font-variation-settings:'opsz' 40,'wght' 500;font-size:.86rem}
.way .rule{height:1px;background:currentColor;width:clamp(36px,5vw,80px)}
.js .way .rule{transform:scaleX(0);transform-origin:left}
.hud{position:fixed;left:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:11px;
  font-variant-numeric:tabular-nums;font-size:.7rem;letter-spacing:.14em;font-weight:600;
  color:rgba(255,255,255,.6);mix-blend-mode:difference}
.hud .cur{color:#fff;font-size:.84rem}
.hud .hr{width:32px;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.hud .hr i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
@media(max-width:899px){.hud{display:none}}

/* ---------- SYSTEM 8: TOUCH VOCABULARY ---------- */
/* --color-accent (#1F97C9) only gives white button text 3.32:1
   contrast, below the 4.5:1 AA text minimum; --color-accent-dim is
   already an approved token (the previous hover color) at 4.97:1, so
   the default state now uses it and hover darkens further via filter
   instead of a second color swap (contrast can only improve). */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--color-accent-dim);color:#fff;
  text-decoration:none;border:0;cursor:pointer;font-family:var(--font-body);font-weight:700;
  font-size:.94rem;padding:16px 28px;border-radius:100px;user-select:none;
  transition:transform .5s var(--spring),box-shadow .4s,filter .3s}
.btn:hover{filter:brightness(.88);box-shadow:0 12px 36px var(--accent-glow)}
.btn:active{transform:scale(.95);transition:transform .1s ease-out}
.btn.ghost{background:transparent;color:inherit;border:1.5px solid currentColor;opacity:.85}
.btn.ghost:hover{box-shadow:none;opacity:1;background:rgba(0,0,0,.04)}
.dark .btn.ghost:hover{background:rgba(255,255,255,.06)}
.tlink{font-weight:600;text-decoration:none;font-size:.92rem;color:var(--color-accent-dim);
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-size:0% 1.5px;background-position:0 100%;padding-bottom:3px;
  transition:background-size .45s cubic-bezier(.65,0,.35,1)}
.tlink:hover{background-size:100% 1.5px}
.dark .tlink{color:var(--color-accent)}

/* ---------- SYSTEM 4: IMAGE REVEAL LANGUAGE ---------- */
.img-reveal{position:relative;overflow:hidden;border-radius:22px}
.js .img-reveal{clip-path:inset(14% 16% 14% 16% round 22px)}
.img-reveal img{width:100%;height:100%;object-fit:cover}
.js .img-reveal img{transform:scale(1.28);will-change:transform}

/* ---------- TOP BAR (multi-location) ---------- */
.topbar{background:var(--color-accent-2);color:#fff;font-size:.78rem;padding:9px 0}
.topbar .shell{display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar .loc{display:flex;align-items:center;gap:8px;font-weight:600}
.topbar select{background:transparent;border:0;color:#fff;font-family:var(--font-body);
  font-size:.78rem;font-weight:600;cursor:pointer;outline:none}
.topbar select option{color:var(--color-ink-light)}
.topbar .locinfo{opacity:.85}
.topbar .right{display:flex;align-items:center;gap:18px}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar .soc{display:flex;gap:10px;opacity:.85}
@media(max-width:820px){.topbar .locinfo,.topbar .soc,.topbar .mail{display:none}}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,245,241,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(20,35,28,.08)}
.nav .shell{display:flex;justify-content:space-between;align-items:center;height:72px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--color-ink-light);
  font-family:var(--font-display);font-variation-settings:'opsz' 50,'wght' 620;font-size:1.2rem}
.logo i{width:26px;height:26px;border-radius:8px;background:var(--color-accent);position:relative;flex-shrink:0}
.logo i::after{content:'';position:absolute;inset:7px;border:2.5px solid #fff;border-radius:50%;border-bottom-color:transparent;transform:rotate(45deg)}
.nav-links{display:flex;gap:26px;list-style:none;font-size:.9rem;font-weight:500}
.nav-links a{text-decoration:none}
.nav-links li{position:relative}
/* dropdowns */
.nav-links .drop>a::after{content:' ▾';font-size:.7em;opacity:.55}
.nav-links .drop-menu{position:absolute;top:100%;left:-14px;min-width:230px;background:#fff;
  border-radius:14px;box-shadow:0 18px 50px rgba(20,35,28,.16);padding:10px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s,transform .3s,visibility .3s}
.nav-links .drop:hover .drop-menu,.nav-links .drop:focus-within .drop-menu{
  opacity:1;visibility:visible;transform:none}
.nav-links .drop-menu a{display:block;padding:9px 12px;border-radius:9px;font-size:.86rem}
.nav-links .drop-menu a:hover{background:var(--accent-soft);color:var(--color-accent-dim)}
.nav-links .drop-menu li.drop-all{margin-top:6px;padding-top:6px;border-top:1px solid rgba(20,35,28,.08)}
.nav-links .drop-menu li.drop-all a{font-weight:700}
.mnav a.msub.drop-all{font-weight:700;margin-top:2px;margin-bottom:8px}
.nav-phone{font-weight:700;text-decoration:none;font-size:.92rem;color:var(--color-accent-dim)}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--color-ink-light);transition:.3s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
@media(max-width:920px){
  .nav-links,.nav-phone{display:none}
  .burger{display:block;flex-shrink:0}
  /* long clinic names (and the unfilled master token) must never
     push the burger off-screen */
  .logo{min-width:0;overflow:hidden;white-space:nowrap;font-size:1.05rem}
}
/* The list starts at the top and scrolls; it is taller than any phone
   screen, so centring it pushed Home/About/Services above the screen
   where they could not be scrolled to. Top padding keeps the first item
   clear of the close button. */
.mnav{position:fixed;inset:0;background:var(--color-bg-dark);color:var(--color-ink-dark);z-index:70;
  display:flex;flex-direction:column;justify-content:flex-start;padding:84px 32px calc(40px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-100%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.mnav.open{transform:none}
.mnav a,.mnav .mlabel{display:block;text-decoration:none;font-family:var(--font-display);
  font-variation-settings:'opsz' 90,'wght' 480;font-size:clamp(1.8rem,7vw,2.6rem);
  padding:12px 0}
.mnav .mlabel{margin:0}
.js .mnav a,.js .mnav .mlabel{opacity:0;transform:translateY(24px)}
.mnav .msub{font-size:clamp(1.05rem,4.5vw,1.3rem);opacity:.75;padding:8px 0 8px 22px}
.mnav .mcall{color:var(--color-accent);font-size:clamp(1.3rem,5.5vw,1.7rem)}
/* fixed (the open menu has no transform) so it stays put and above the
   scrolling links, which used to slide underneath and take its taps */
.mnav .close{position:fixed;top:20px;right:20px;z-index:2;background:var(--color-bg-dark);border:0;border-radius:50%;
  color:var(--color-ink-dark);font-size:1.6rem;cursor:pointer;width:44px;height:44px}
/* "Patient Resources" has no page of its own: a button opens the dropdown */
.nav-links .drop-btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.nav-links .drop>.drop-btn::after{content:' ▾';font-size:.7em;opacity:.55}

/* ---------- 01 HERO ---------- */
.hero{padding:clamp(44px,6vw,80px) 0 var(--section-pad-v);overflow:hidden}
.hero .shell{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4.5vw,70px);align-items:start}
@media(max-width:880px){.hero .shell{grid-template-columns:1fr}}
.hero h1{font-variation-settings:'opsz' 144,'wght' 560,'SOFT' 8;
  font-size:clamp(2.8rem,8vw,6.5rem);line-height:1.02;margin-top:22px}
.hero h1 .word{display:inline-block;white-space:nowrap;margin-right:.24em}
.hero h1 .ch{display:inline-block}
.js .hero h1 .ch{opacity:0;transform:translateY(.5em);
  font-variation-settings:'opsz' 144,'wght' 200,'SOFT' 100,'WONK' 0}
.hero h1 .accent-word,.hero h1 .accent-word .ch{color:var(--color-accent-dim)}
.hero .tag{margin-top:16px;font-family:var(--font-display);font-style:italic;
  font-variation-settings:'opsz' 90,'wght' 440,'SOFT' 50;font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--color-accent-dim)}
.hero .sub{margin-top:18px;max-width:44ch}
.hero-photo{margin-top:30px;aspect-ratio:16/10;max-width:520px}
@media(max-width:640px){.hero-photo{display:none}}
.gbadge{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:.86rem;font-weight:600}
/* #F5B301 measured 1.7:1 against the light background - darkened to
   clear the 3:1 non-text/graphical-object minimum (treated as a
   rating glyph, not body text: the numeric rating is always given in
   adjacent text, e.g. "5.0 . 63 Google Reviews") */
.gbadge .stars,.stars{color:#B58401;letter-spacing:2px}

/* ---------- SYSTEM 7: MULTI-STEP FORM CARD ---------- */
.form-card{background:#fff;border-radius:22px;padding:clamp(22px,3vw,34px);
  box-shadow:0 24px 70px rgba(20,35,28,.12);border:1px solid rgba(20,35,28,.06)}
.dark .form-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);
  box-shadow:none;color:var(--color-ink-dark)}
.form-card .fc-head{font-family:var(--font-display);font-variation-settings:'opsz' 70,'wght' 520;
  font-size:1.3rem;line-height:1.15}
.fm-progress{display:flex;align-items:center;gap:12px;margin:18px 0 22px}
.fm-progress .bar{flex:1;height:3px;background:rgba(20,35,28,.12);border-radius:3px;overflow:hidden}
.dark .fm-progress .bar{background:rgba(255,255,255,.14)}
.fm-progress .bar i{display:block;height:100%;width:20%;background:var(--color-accent);border-radius:3px;
  transition:width .55s cubic-bezier(.22,1,.36,1)}
.fm-progress .count{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  opacity:.65;white-space:nowrap;font-variant-numeric:tabular-nums} /* .6 measured 4.36:1 on white, below 4.5 */
/* gated on .js: with JS disabled (or failing to load), every step
   must render at once so the form degrades to a normal flat form
   instead of permanently showing only step 1 with no way to reach
   the phone/email/message fields or the submit control (see the
   data-next button below, which becomes a real type="submit" for
   exactly this case) */
.js .ms-step{display:none}
.js .ms-step.active{display:block;animation:stepIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes stepIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.ms-step .q{font-weight:600;font-size:1.02rem;line-height:1.35}
.field{position:relative;margin-top:20px}
.field input{width:100%;background:transparent;border:0;border-bottom:1.5px solid rgba(20,35,28,.22);
  color:inherit;font-family:var(--font-body);font-size:1.08rem;padding:12px 2px 10px;outline:none}
.dark .field input{border-bottom-color:rgba(255,255,255,.25)}
.field label{position:absolute;left:2px;top:12px;opacity:.68;font-size:1rem;pointer-events:none;
  transition:all .35s cubic-bezier(.65,0,.35,1)} /* .5 measured 3.23:1 on white (form fields), below 4.5; still comfortably clears 4.5 on the dark form-card variant */
.field .ul{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--color-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.field:focus-within .ul{transform:scaleX(1)}
.field:focus-within label,.field.filled label{top:-13px;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;opacity:1;color:var(--color-accent-dim);font-weight:700}
.dark .field:focus-within label,.dark .field.filled label{color:var(--color-accent)}
.field .err{position:absolute;left:2px;top:100%;padding-top:5px;font-size:.72rem;color:#C0472F;
  opacity:0;transition:opacity .3s}
.field.error .err{opacity:1}
.field.error input{border-bottom-color:#C0472F}
.ms-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px}
.ms-back{background:none;border:0;font-family:var(--font-body);font-size:.84rem;font-weight:600;
  opacity:.64;cursor:pointer;color:inherit;padding:10px 4px;min-height:44px;visibility:hidden} /* .55 measured 3.74:1 on white, below 4.5 */
.ms-back.show{visibility:visible}
.ms-summary{margin-top:16px;display:grid;gap:4px}
.ms-summary .row{display:flex;justify-content:space-between;gap:14px;font-size:.88rem;
  padding:9px 0;border-bottom:1px solid rgba(20,35,28,.1)}
.dark .ms-summary .row{border-bottom-color:rgba(255,255,255,.1)}
.ms-summary .row span:first-child{opacity:.55}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.74rem;
  line-height:1.5;opacity:.8;cursor:pointer;user-select:none}
.consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--color-accent);flex-shrink:0;cursor:pointer}
.btn[disabled]{opacity:.45;pointer-events:none}
.ms-done{display:none;text-align:center;padding:18px 0 6px}
.ms-done.show{display:block;animation:stepIn .5s cubic-bezier(.22,1,.36,1)}
.ms-done .ok{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--color-accent-dim);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 14px}

/* ---------- 02/05/10 SPLITS ---------- */
.split .shell{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:840px){.split .shell{grid-template-columns:1fr}}
.split h2{margin-top:18px}
.split p{margin-top:16px;max-width:48ch}
.split .cta{margin-top:26px}
.split .img-reveal{aspect-ratio:4/5;max-height:520px}
.taglinks{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.taglinks a{font-size:.8rem;font-weight:600;text-decoration:none;padding:9px 16px;border-radius:100px;
  border:1px solid rgba(255,255,255,.25);transition:border-color .3s,background .3s,transform .5s var(--spring)}
.taglinks a:hover{border-color:var(--color-accent);background:var(--accent-soft)}
.taglinks a:active{transform:scale(.94);transition:transform .1s}

/* ---------- SYSTEM 2: SNAP CAROUSELS + CARDS ---------- */
.car-wrap{margin-top:clamp(32px,4vw,50px)}
.car{display:grid;gap:16px}
@media(min-width:768px){.car.cols-4{grid-template-columns:repeat(4,1fr)}.car.cols-3{grid-template-columns:repeat(3,1fr)}
  .car.cols-2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){
  .car{grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;padding:4px var(--section-pad-h) 8px;margin:0 calc(-1*var(--section-pad-h));
    scrollbar-width:none}
  .car::-webkit-scrollbar{display:none}
  .car>*{scroll-snap-align:center}
}
.car-progress{height:2px;background:rgba(20,35,28,.14);border-radius:2px;margin-top:18px;overflow:hidden}
.dark .car-progress{background:rgba(255,255,255,.14)}
.car-progress i{display:block;height:100%;width:18%;background:var(--color-accent);border-radius:2px;transition:width .15s linear}
@media(min-width:768px){.car-progress{display:none}}
.tcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .5s var(--spring),border-color .4s;user-select:none}
.tcard:hover{transform:translateY(-6px);border-color:rgba(69,186,224,.5)}
.tcard:active{transform:scale(.965);transition:transform .1s}
.tcard .img-reveal{border-radius:0;aspect-ratio:4/3}
.js .tcard .img-reveal{clip-path:inset(14% 16% 14% 16% round 0)}
.tcard .body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.tcard .body h3{font-size:1.2rem}
.tcard .body p{font-size:.88rem;opacity:.7;line-height:1.55}
.tcard .go{margin-top:auto;padding-top:12px;font-size:.82rem;font-weight:700;color:var(--color-accent);
  display:flex;justify-content:space-between;align-items:center}

/* ---------- 4-PHASE PROGRAM ---------- */
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(18px,3vw,32px);margin-top:clamp(34px,5vw,54px)}
.phase{border-top:2px solid rgba(20,35,28,.14);padding-top:20px}
.phase .pnum{font-family:var(--font-display);font-variation-settings:'opsz' 144,'wght' 300,'SOFT' 30;
  font-size:clamp(2.6rem,4.5vw,3.6rem);line-height:.9;color:var(--color-accent-dim)}
.phase h3{margin-top:12px;font-size:1.35rem}
.phase p{margin-top:8px;font-size:.9rem;opacity:.7;line-height:1.6}

/* ---------- TEAM CARDS ---------- */
.mcard{background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--color-ink-light);
  box-shadow:0 8px 28px rgba(20,35,28,.08);display:flex;flex-direction:column;
  transition:transform .5s var(--spring),box-shadow .5s;user-select:none}
.mcard:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(20,35,28,.14)}
.mcard:active{transform:scale(.965);transition:transform .1s}
.mcard .img-reveal{border-radius:0;aspect-ratio:4/5}
.js .mcard .img-reveal{clip-path:inset(14% 16% 14% 16% round 0)}
.mcard .body{padding:20px 22px 22px}
.mcard .body h3{font-size:1.25rem}
.mcard .cred{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--color-accent-dim);margin-top:3px}
.mcard .pos{font-size:.86rem;opacity:.65;margin-top:5px} /* .6 measured 4.36:1 on white, below 4.5 */
.mcard .go{margin-top:12px;font-size:.82rem;font-weight:700;color:var(--color-accent-dim)}

/* ---------- 07 BODY AREAS (light, reference layout) ---------- */
.areas-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,60px);align-items:end;margin-top:16px}
@media(max-width:840px){.areas-head{grid-template-columns:1fr}}
.areas-head .sub-h{font-family:var(--font-display);font-variation-settings:'opsz' 60,'wght' 540;
  font-size:clamp(1.05rem,1.8vw,1.3rem);margin-top:16px;color:var(--color-accent-dim)}
.area-chips{display:flex;flex-wrap:wrap;gap:9px}
.area-chips a{font-size:.8rem;font-weight:600;text-decoration:none;padding:10px 16px;border-radius:100px;
  background:#fff;box-shadow:0 3px 12px rgba(20,35,28,.07);min-height:40px;display:inline-flex;align-items:center;
  transition:transform .5s var(--spring),box-shadow .4s}
.area-chips a:hover{box-shadow:0 8px 22px rgba(20,35,28,.13)}
.area-chips a:active{transform:scale(.94);transition:transform .1s}
.areas-grid{display:grid;grid-template-columns:1fr minmax(230px,320px) 1fr;
  gap:clamp(16px,2.5vw,30px);align-items:center;margin-top:clamp(34px,5vw,54px)}
@media(max-width:920px){.areas-grid{grid-template-columns:1fr;justify-items:center}}
.model-wrap{position:relative;width:100%;max-width:320px}
.model-wrap img{width:100%;border-radius:20px}
.mdot{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;
  background:#fff;border:2px solid var(--color-accent-dim);color:var(--color-accent-dim);
  font-size:.66rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .35s var(--spring);
  box-shadow:0 4px 14px rgba(20,35,28,.2);z-index:2}
/* 44px hit target around the visible 26px dot */
.mdot::before{content:'';position:absolute;inset:-9px;border-radius:50%}
.mdot::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--color-accent);opacity:0}
.mdot.active{background:var(--color-accent-dim);border-color:var(--color-accent-dim);color:#fff;
  transform:translate(-50%,-50%) scale(1.18)}
.mdot.active::after{opacity:1;animation:hsPulse 1.8s ease-out infinite}
@keyframes hsPulse{from{transform:scale(.55);opacity:.8}to{transform:scale(1.7);opacity:0}}
.area-col{display:grid;gap:14px;align-content:center}
@media(max-width:920px){.area-col{width:100%;max-width:520px}}
.acard{background:#fff;border-radius:18px;padding:18px 20px;border:1.5px solid transparent;cursor:pointer;
  box-shadow:0 4px 18px rgba(20,35,28,.06);user-select:none;
  transition:border-color .4s,box-shadow .4s,transform .5s var(--spring)}
.acard:active{transform:scale(.975);transition:transform .1s}
.acard.active{border-color:var(--color-accent);box-shadow:0 16px 40px rgba(69,186,224,.16)}
.acard .ahead{display:flex;align-items:center;gap:10px}
.acard .anum{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--color-accent-dim);
  font-size:.64rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .3s,color .3s}
.acard.active .anum{background:var(--color-accent-dim);color:#fff}
.acard h3{font-size:1rem;font-variation-settings:'opsz' 50,'wght' 560}
.acard p{font-size:.79rem;line-height:1.55;opacity:.65;margin-top:8px} /* .6 measured 4.36:1 on white, below 4.5 */
.acard .tlink{font-size:.76rem;margin-top:10px;display:inline-block}
.bm-list{margin-top:clamp(30px,4vw,44px);display:flex;flex-wrap:wrap;gap:8px 22px;
  font-size:.84rem;justify-content:center}
.bm-list a{opacity:.66;text-decoration:none;transition:opacity .3s,color .3s} /* .6 measured 4.24:1 on bg-light, below 4.5 */
.bm-list a:hover{opacity:1;color:var(--color-accent-dim)}

/* ---------- BANDS ---------- */
.band{padding:clamp(44px,6vw,70px) 0}
.logos{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,48px);align-items:center;justify-content:center;
  margin-top:26px}
.logos span,.logos img{font-family:var(--font-display);font-variation-settings:'opsz' 40,'wght' 560;
  font-size:clamp(1rem,1.8vw,1.3rem);opacity:.42;white-space:nowrap}
.logos img{max-height:44px;width:auto}
.paper .shell{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(26px,4vw,60px);align-items:center;
  background:#fff;border-radius:24px;padding:clamp(26px,4vw,48px);box-shadow:0 12px 40px rgba(20,35,28,.07)}
@media(max-width:760px){.paper .shell{grid-template-columns:1fr}}
.paper .img-reveal{aspect-ratio:4/3}

/* ---------- 08 OFFER ---------- */
.offer{background:linear-gradient(135deg,var(--color-accent-2),var(--offer-grad-2));color:#fff;text-align:center;overflow:hidden}
.offer .way{justify-content:center;color:var(--offer-tint)}
.offer h2{margin:18px auto 0;font-size:clamp(2.1rem,5vw,4rem)}
.offer h2 em{font-style:italic;font-variation-settings:'opsz' 144,'wght' 440,'SOFT' 60;color:var(--offer-tint)}
.offer .gline{margin-top:20px;font-weight:600}
.offer .cta{margin-top:30px}
.offer .btn{background:#fff;color:var(--color-accent-2)}
.offer .btn:hover{background:#fff;box-shadow:0 14px 44px rgba(0,0,0,.3)}

/* ---------- MOVEMENT LINKS ---------- */
.movelinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.movelinks a{font-size:.86rem;font-weight:600;text-decoration:none;padding:12px 20px;border-radius:100px;
  background:#fff;box-shadow:0 4px 16px rgba(20,35,28,.07);
  transition:transform .5s var(--spring),box-shadow .4s;min-height:44px;display:inline-flex;align-items:center}
.movelinks a:hover{box-shadow:0 10px 28px rgba(20,35,28,.13)}
.movelinks a:active{transform:scale(.94);transition:transform .1s}

/* ---------- 09 TESTIMONIALS ---------- */
.qcard{background:#fff;border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 8px 28px rgba(20,35,28,.07);user-select:none;
  transition:transform .5s var(--spring)}
.qcard:active{transform:scale(.97);transition:transform .1s}
.qcard .stars{font-size:.86rem}
.qcard p{font-size:.94rem;line-height:1.6}
.qcard .who{margin-top:auto;font-size:.8rem;font-weight:700;color:var(--color-accent-dim)}

/* ---------- 11 JOURNEY STATS ---------- */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(20px,3vw,40px);margin-top:clamp(30px,4vw,46px)}
.stat .odo{display:flex;align-items:baseline;font-family:var(--font-display);
  font-variation-settings:'opsz' 144,'wght' 420;font-size:clamp(2.6rem,5vw,4rem);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--color-accent-dim)}
.stat .odo .slot{height:1em;overflow:hidden;line-height:1}
.stat .odo .col{display:block;will-change:transform}
.stat .odo .col span{display:block;height:1em;line-height:1}
.stat .odo .suffix{font-size:.5em;margin-left:2px;color:var(--color-accent)}
/* unfilled master tokens render small and readable instead of at
   display size (they'd overlap adjacent stats) */
.stat .odo .static-token{font-size:clamp(.95rem,1.3vw,1.2rem);line-height:1.3;
  letter-spacing:0;word-break:break-word;font-variation-settings:'opsz' 40,'wght' 520}
.stat .odo[data-static]{align-items:center;min-height:1em}
.stat .odo[data-static] .suffix{font-size:1em}
.stat .slabel{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  opacity:.66;margin-top:8px} /* .55 measured 3.67:1 on bg-light, below 4.5 */

/* ---------- 12 FAQ / SYSTEM 8 ACCORDION ---------- */
.faq-list{margin-top:30px;border-top:1px solid rgba(20,35,28,.12);max-width:820px}
.faq-item{border-bottom:1px solid rgba(20,35,28,.12)}
.dark .faq-list,.dark .faq-item{border-color:rgba(255,255,255,.12)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;color:inherit;font-family:var(--font-body);
  font-size:1rem;font-weight:600;text-align:left;padding:20px 4px;display:flex;
  justify-content:space-between;align-items:center;gap:14px;min-height:44px;user-select:none}
.faq-q:active{opacity:.7}
.faq-q .chev{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid rgba(20,35,28,.25);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--color-accent-dim);
  transition:transform .5s var(--spring),background .3s}
.dark .faq-q .chev{border-color:rgba(255,255,255,.3);color:var(--color-accent)}
.faq-item.open .chev{transform:rotate(135deg);background:var(--accent-soft)}
.faq-a{overflow:hidden;transition:height .45s cubic-bezier(.22,1,.36,1)}
.js .faq-a{height:0} /* JS-off renders answers open (auto height) */
.faq-a p{padding:0 4px 20px;font-weight:300;opacity:.75;max-width:62ch}

/* ---------- 13 APPOINTMENT (global booking section) ---------- */
.appt .shell{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:840px){.appt .shell{grid-template-columns:1fr}}
.appt h2{margin-top:18px}
.hoursbox{margin-top:26px;display:grid;gap:10px;font-size:.92rem}
.hoursbox .row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.hoursbox .row span:first-child{opacity:.6}
.mapbox{margin-top:24px;height:180px;border-radius:16px;position:relative;overflow:hidden;background:var(--color-bg-dark)}
.mapbox iframe{width:100%;height:100%;border:0;display:block}

/* ---------- FOOTER ---------- */
footer{background:var(--color-bg-darkest);color:var(--color-ink-dark);padding:clamp(50px,7vw,80px) 0 0}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:clamp(26px,4vw,60px)}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr}}
.foot-grid p{font-size:.88rem;opacity:.6;margin-top:14px;max-width:34ch}
.floc h3{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent)}
.floc div{font-size:.88rem;line-height:1.75;opacity:.75;margin-top:12px}
.floc a{text-decoration:none}
.foot-soc{display:flex;gap:14px;margin-top:8px;font-size:.8rem;opacity:.7}
.foot-soc a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:10px 0}
.foot-bottom{margin-top:clamp(36px,5vw,54px);padding:20px 0;border-top:1px solid rgba(255,255,255,.08);
  font-size:.76rem;opacity:.5;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- SYSTEM 1: THUMB-ZONE CTA DOCK ---------- */
.dock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:65;
  transform:translateX(-50%) translateY(180%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.dock.show{transform:translateX(-50%) translateY(0)}
.dock a{display:flex;align-items:center;gap:11px;background:var(--color-accent-dim);color:#fff;text-decoration:none;
  font-weight:700;font-size:.93rem;padding:16px 28px;border-radius:100px;user-select:none;
  box-shadow:0 14px 44px rgba(0,0,0,.35),0 4px 18px var(--accent-glow);
  transition:transform .5s var(--spring)}
.dock a:active{transform:scale(.94);transition:transform .1s}
.dock .dot{width:8px;height:8px;border-radius:50%;background:#fff;position:relative}
.dock .dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #fff;
  opacity:.45;animation:pulse 2s ease-out infinite}
@keyframes pulse{from{transform:scale(.6);opacity:.5}to{transform:scale(1.5);opacity:0}}

/* ============================================================
   WP-ORIGINAL VISUAL LANGUAGE (waves, photo clusters, badges,
   tinted panels, photo band) - ported from temp1-2026 Divi CSS
   ============================================================ */

/* ---------- LAYERED WAVE SECTION DIVIDERS ----------
   Exact Divi 3-path wave. Colored via currentColor to match the
   ADJACENT section's background. Markup:
   <div class="wave wave-top" style="color:var(--color-bg-light)" aria-hidden="true"><svg>…</svg></div> */
.wave{position:absolute;left:0;right:0;height:clamp(40px,7vw,110px);pointer-events:none;z-index:1;overflow:hidden}
.wave svg{width:100%;height:100%;display:block}
.wave-top{top:-1px;transform:rotate(180deg)}
.wave-bottom{bottom:-1px}
section.has-wave-top{padding-top:calc(var(--section-pad-v) + clamp(20px,3.5vw,55px))}
section.has-wave-bottom{padding-bottom:calc(var(--section-pad-v) + clamp(20px,3.5vw,55px))}

/* ---------- PHOTO CLUSTER (split sections) ----------
   Main 4:5 photo + smaller overlapping landscape photo, framed in
   the section background color. Both use the System 4 reveal. */
.photo-cluster{position:relative;margin-bottom:clamp(28px,6vw,56px)}
.photo-cluster .pc-main{aspect-ratio:4/5;max-height:520px}
.photo-cluster .pc-sub{position:absolute;bottom:-9%;left:-6%;width:52%;aspect-ratio:4/3;
  border:6px solid var(--color-bg-light);border-radius:24px;box-shadow:0 18px 50px rgba(20,35,28,.18)}
.js .photo-cluster .pc-sub{clip-path:inset(14% 16% 14% 16% round 18px)}
.dark .photo-cluster .pc-sub{border-color:var(--color-bg-dark)}
@media(max-width:840px){.photo-cluster .pc-sub{left:0}}

/* ---------- CARD LOGO BADGE (treatment + team cards) ----------
   Circular brand badge bridging the photo and the card body,
   echoing the WP original's notch badge. */
.card-badge{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:48px;height:48px;
  border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(20,35,28,.18);
  display:flex;align-items:center;justify-content:center;z-index:2}
.card-badge i{width:30px;height:30px;background:url('/assets/images/favicon.svg') center/contain no-repeat;display:block}
.tcard .body,.mcard .body{position:relative}
.tcard .body.has-badge,.mcard .body.has-badge{padding-top:34px}

/* ---------- TINTED ROUNDED PANEL (07 body areas) ---------- */
.areas-panel{background:rgba(69,186,224,.07);border-radius:clamp(22px,3vw,36px);
  padding:clamp(22px,4vw,56px);margin-top:clamp(24px,3.5vw,44px)}
.areas-panel .areas-head{margin-top:0}

/* ---------- FULL-WIDTH PHOTO BAND (movement health) ---------- */
.photo-band{position:relative;border-radius:clamp(20px,2.5vw,28px);overflow:hidden;
  padding:clamp(44px,7vw,90px) clamp(24px,4.5vw,64px);color:var(--color-ink-dark)}
.photo-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.photo-band::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(8,16,9,.82) 10%,rgba(8,16,9,.45) 60%,rgba(8,16,9,.25))}
.photo-band>*:not(img){position:relative;z-index:2}
.photo-band .movelinks a{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);box-shadow:none}
.photo-band .movelinks a:hover{background:rgba(255,255,255,.24)}

/* ============================================================
   GOOGLE REVIEWS WALL (light section; cards fed by
   assets/data/reviews.json via initReviews in app.js)
   ============================================================ */
.section-reviews{overflow:hidden}
.reviews-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(3rem,6vw,7rem);align-items:center}
.reviews-hero h2{margin-top:18px}
.reviews-hero .t-body{margin:1.4rem 0 2.4rem;max-width:40ch}
.reviews-aggregate{display:flex;align-items:center;gap:.75rem;margin-top:2rem;padding-top:1.6rem;
  border-top:1px solid rgba(20,35,28,.12)}
.reviews-agg-stars{display:inline-flex;gap:2px}
.rev-agg-star{width:14px;height:14px;fill:#BA8B03 /* darkened from #FBBC04 for 3:1 non-text contrast on white */}
.reviews-agg-text{font-size:.85rem;opacity:.75}
.reviews-agg-text strong{opacity:1;font-weight:600}
.reviews-wall{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative}
/* the fixed height + clipped overflow + fade mask only make sense once
   the JS drift animation is actually running; gated on .js so a no-JS
   visitor gets a normal auto-height, fully-scrollable/readable stack of
   the (statically pre-rendered, see app.js) review cards instead of
   having everything past the first screenful clipped away with no way
   to reach it. */
.js .reviews-wall{height:clamp(560px,72vh,820px);overflow:hidden;
  mask-image:linear-gradient(to bottom,transparent 0%,black 7%,black 93%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 7%,black 93%,transparent 100%)}
.reviews-col{display:flex;flex-direction:column;gap:12px;will-change:transform}
.review-card{background:#fff;border-radius:18px;padding:1.1rem;flex:none;width:100%;
  font-family:var(--font-body);box-shadow:0 1px 6px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.05)}
.review-card-header{display:flex;align-items:center;gap:.7rem;margin-bottom:.65rem}
.review-avatar-wrap{position:relative;flex:none}
.review-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;background:#E0DDD8}
.review-avatar-initial{display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  font-weight:600;color:#fff;user-select:none}
.review-g-badge{position:absolute;bottom:-2px;right:-3px;width:16px;height:16px;background:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.review-g-badge svg{width:10px;height:10px}
.review-name{display:block;font-size:.88rem;font-weight:600;color:#1A1A1A;line-height:1.3}
.review-date{display:block;font-size:.72rem;color:#7B7571 /* darkened from #8C8580: 3.63:1 on white, below the 4.5:1 text minimum */;margin-top:.1rem}
.review-stars{display:flex;gap:2px;margin-bottom:.55rem}
.review-star{width:11px;height:11px;fill:#BA8B03 /* darkened from #FBBC04 for 3:1 non-text contrast on white */}
.review-star-empty{fill:#D9D5D0}
.review-text{font-size:.84rem;line-height:1.55;color:#2A2520;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.4rem}
.review-read-more{display:block;font-size:.73rem;color:#7B7571 /* darkened from #8C8580: 3.63:1 on white, below the 4.5:1 text minimum */;cursor:default}
@media(max-width:1024px){
  .reviews-shell{grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem)}
  .reviews-wall{height:clamp(400px,52vh,520px)}
}
@media(max-width:600px){
  .reviews-wall{display:block;padding:6px 0}
  .js .reviews-wall{height:auto;
    mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%)}
  /* no-JS: keep the default column stack (one card per row, fully
     visible, no horizontal scroll needed at 320px); the horizontal
     swipe track is a JS-driven enhancement */
  .js .reviews-col{flex-direction:row;gap:10px}
  .js .review-card{width:clamp(260px,78vw,300px);flex:none}
  #reviews-col-b{display:none}
}

/* ---------- ELFSIGHT EMBED (09 testimonials) ---------- */
.elfsight-wrap{margin-top:clamp(32px,4vw,50px);min-height:120px}

/* ---------- GSAP-OFF FALLBACK ----------
   systems.js adds .gsap-off to <html> when the GSAP CDN fails to
   load; every .js-gated hidden state renders in its final position
   so content is never invisible. Mirrors the reduced-motion block. */
.js.gsap-off [data-reveal],.js.gsap-off [data-load]{opacity:1;transform:none}
.js.gsap-off .hero h1 .ch{opacity:1;transform:none;font-variation-settings:'opsz' 144,'wght' 560,'SOFT' 8}
.js.gsap-off .way .rule{transform:scaleX(1)}
.js.gsap-off .img-reveal{clip-path:none}
.js.gsap-off .img-reveal img{transform:none}
.js.gsap-off .photo-cluster .pc-sub{clip-path:none}
.js.gsap-off .mnav a,.js.gsap-off .mnav .mlabel{opacity:1;transform:none}
.js.gsap-off .inner-hero h1 .line-inner{transform:none}

/* ---------- EXPANDED HIT AREAS (44px tap targets) ----------
   Small chrome text links keep their visual size but gain an
   invisible touch area. position:relative is layout-neutral here. */
.topbar a,.crumb a,.tlink,.nav-phone,.logo{position:relative}
.topbar a::before,.crumb a::before,.tlink::before,.nav-phone::before,.logo::before{
  content:'';position:absolute;top:-12px;bottom:-12px;left:-6px;right:-6px}

/* ---------- REDUCED MOTION (all seven systems fall back) ----------
   The targeted rules below (ported from the demo) already put every
   animated element from all seven systems into its final visible
   state. This generic backstop is additional insurance for anything
   not explicitly listed above (hover/press transitions, anything
   added later) - it does not replace the targeted rules, which are
   still what prevents content from getting stuck mid-animation or
   hidden. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  html{scroll-behavior:auto}
  .js [data-reveal],.js [data-load]{opacity:1;transform:none}
  .js .hero h1 .ch{opacity:1;transform:none;font-variation-settings:'opsz' 144,'wght' 560,'SOFT' 8}
  .js .way .rule{transform:scaleX(1)}
  .js .img-reveal{clip-path:inset(0 0 0 0 round 22px)}
  .js .tcard .img-reveal,.js .mcard .img-reveal{clip-path:inset(0 0 0 0 round 0)}
  .js .img-reveal img{transform:none}
  .js .mnav a,.js .mnav .mlabel{opacity:1;transform:none}
  .mdot.active::after{animation:none;opacity:.5}
  .dock,.dock .dot::after{transition:none;animation:none}
  .ms-step.active,.ms-done.show{animation:none}
  .faq-a{transition:none}
  .hud .hr i{transition:none}
  .js .photo-cluster .pc-sub{clip-path:inset(0 0 0 0 round 18px)}
  .reviews-col{will-change:auto;overflow-y:auto;max-height:100%}
}

/* ---------- MOBILE TAP-TO-CALL (header icon + menu link) ---------- */
.nav-call{display:none}
@media(max-width:920px){
  .nav-call{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;margin-left:auto;margin-right:4px;
    border-radius:50%;color:var(--color-accent-dim);text-decoration:none}
  .nav-call svg{width:22px;height:22px;fill:currentColor}
  .nav-call:focus-visible{outline:2px solid var(--color-accent-dim);outline-offset:2px}
}

/* ---------- CHAT WIDGET vs MOBILE MENU / FORMS ----------
   initChatWidget (systems.js) adds .chat-off to <html> while the mobile
   menu is open, and on phones while a form's Continue / Submit is on
   screen; an active conversation is never hidden. */
html.chat-off chat-widget:not([data-active="true"]){display:none!important}

/* ---------- MOBILE READABILITY + TAP TARGETS (pre-launch QA 2026-10-21) ----------
   Phones only: sentence text at 16px minimum, and every chrome link/button
   at least 44px tall (WCAG 2.5.5 target size). Inline links inside running
   text are exempt and keep their size. */
@media (max-width:640px){
  main p,.review-text,.acard p,.phase p,.bcard p,.callout p,.body.has-badge p,.ecite,
  .foot-grid p,.floc div,.floc a,.bm-list a,.trust-list li,.gbadge span{font-size:1rem!important;line-height:1.6}
  .field .err,.foot-bottom span,.crumb .cur{font-size:.875rem!important}
  .topbar{padding:0}
  .topbar .loc,.topbar select,.topbar .right a:not(.mail){min-height:44px;display:inline-flex;align-items:center}
  .topbar .right a{white-space:nowrap}
  .crumb a{display:inline-flex;align-items:center;min-height:44px}
  .floc a{display:inline-flex;align-items:center;min-height:44px}
  .floc div{line-height:1.5}
  .foot-soc a{display:inline-flex;align-items:center;min-height:44px}
  .foot-bottom a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .car-arrow{width:44px;height:44px}
  .taglinks a,.area-chips a{min-height:44px;display:inline-flex;align-items:center}
  .bm-list{gap:0 18px}
  .bm-list a{display:inline-flex;align-items:center;min-height:44px}
  a.tlink,.acard .tlink{display:inline-flex;align-items:center;min-height:44px}
  .mnav .msub{padding-top:12px;padding-bottom:12px}
  .loc-info a.li-val{display:inline-flex;align-items:center;min-height:44px!important}
  .nav .logo,.nf-head .logo{min-height:44px;display:flex;align-items:center}
  .nf-foot a{display:inline-flex;align-items:center;min-height:44px}
  /* the page's last row scrolls clear of the dock and chat launcher */
  footer{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
}

/* phones: #appt jumps land on the booking form, clear of the sticky nav */
@media (max-width:767px){#appt [data-msform]{scroll-margin-top:88px}}