/* ============================================================
   REVIVE BY MWS, editorial healthcare build
   Structure: Home Page 3 · Visual language: editorial references
   Display: Playfair Display · UI/body: Inter
   black #0A0A0A · ink #131312 · beige #D9A38E · bg #F5F5F5 · white #FFF · gray #E1E1E1
   ============================================================ */
:root{
  /* ---- Revive palette ---- */
  --black:#0A0A0A;
  --ink:#131312;
  --beige:#D9A38E;
  --bg:#F5F5F5;
  --white:#FFFFFF;
  --gray:#E1E1E1;

  /* ---- derived tones (accessibility + depth; all from the six above) ---- */
  --clay:#975537;              /* accent-family text that passes AA on light grounds */
  --beige-lo:#EAC9B9;
  --ink-90:rgba(19,19,18,.9);  --ink-72:rgba(19,19,18,.72); --ink-62:rgba(19,19,18,.62);
  --ink-40:rgba(19,19,18,.4);  --ink-16:rgba(19,19,18,.16); --ink-09:rgba(19,19,18,.09);
  --line:var(--gray);
  --line-dark:rgba(255,255,255,.14);
  --cod:#FFFFFF;               /* type on dark */
  --mist:rgba(255,255,255,.72);/* secondary type on dark */

  /* legacy token names kept so every structural rule from Home Page 3 still resolves */
  --cream:var(--white); --cream-hi:var(--white); --cream-lo:var(--bg);
  --teal:#1C1C1B; --sand:var(--gray); --mint:var(--beige); --bronze:var(--beige); --bronze-dk:var(--clay);

  --f-d:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-b:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --s--1:clamp(.72rem,.7rem + .1vw,.78rem);
  --s-0:clamp(.97rem,.95rem + .12vw,1.03rem);
  --s-1:clamp(1.15rem,1.08rem + .3vw,1.3rem);
  --s-2:clamp(1.5rem,1.3rem + .8vw,2rem);
  --s-3:clamp(2.2rem,1.7rem + 1.9vw,3.3rem);
  --s-4:clamp(2.6rem,1.9rem + 3vw,4.3rem);
  --s-5:clamp(3.2rem,2.1rem + 4.8vw,5.8rem);

  --sp:clamp(4.5rem,3rem + 5.6vw,7.5rem);
  --gut:clamp(1.25rem,.5rem + 2.6vw,2.75rem);
  --maxw:1240px;
  --cgap:1.25rem;

  /* One global radius system, softened slightly from the previous 12px pass
     to read closer to the My Dental Touch / My Wellness Studio sibling
     brands (rounder photo corners, same restrained logic otherwise):
     --r-m/--r-l/--r-xl all resolve to the same value, kept as separate
     tokens only so existing rules stay readable. --r-s is the deliberate
     exception, for small UI chrome (inputs, tiny banners) that reads better
     tighter than a large photograph. Full-bleed sections stay square; CTAs
     stay full pill, neither is a "card". */
  --r-s:8px; --r-m:18px; --r-l:18px; --r-xl:18px; --r-pill:999px;
  /* Whisper-soft elevation, used instead of hard 1px borders on the
     photo-forward cards (hub cards, the about portrait, the contact panel)
     so they read as floating prints on the page rather than outlined boxes,
     matching the sibling brands' borderless card treatment. Kept extremely
     soft per earlier direction ("almost imperceptible", not a floating card). */
  --sh-1:0 1px 2px rgba(19,19,18,.03),0 16px 32px -22px rgba(19,19,18,.16);
  --sh-2:0 24px 56px -28px rgba(19,19,18,.22);
  /* One shared photography treatment, a muted, near-monochrome grade with a
     whisper of warmth (sepia) rather than flat greyscale, applied to every
     major photo so the page reads as one consistent editorial gallery, the
     way the reference site's imagery does. -hover is the "comes into focus"
     state for interactive photos (hub cards, condition tiles): less grey,
     slightly brighter, never full colour. */
  --photo:grayscale(.85) sepia(.06) contrast(1.04) brightness(.96);
  --photo-hover:grayscale(.55) sepia(.05) contrast(1.03) brightness(1);
  --ease:cubic-bezier(.22,.61,.36,1);
  --eout:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--f-b);font-size:var(--s-0);line-height:1.7;color:var(--ink);
  background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg,iframe{display:block;max-width:100%}img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;-webkit-appearance:none;appearance:none}
input,textarea,select{font:inherit;color:inherit}
/* Focus ring uses currentColor, so it is visible on light and dark grounds alike */
:focus-visible{outline:2px solid currentColor;outline-offset:3px;box-shadow:none}
.on-dark :focus-visible,.hero :focus-visible,.approach :focus-visible{outline-color:var(--beige)}

h1,h2,h3,h4{font-family:var(--f-d);font-weight:400;line-height:1.06;letter-spacing:-.012em}
/* Playfair Display has a real italic. On a white/light background the whole
   heading, including this word, must read as plain black, so the italic
   carries the emphasis alone, with no accent-colour tint; on dark sections
   the accent colour still applies via the overrides below. */
.i{font-style:italic;color:#000}
.on-dark .i,.hero .i,.visit .i,.approach .i{color:var(--beige)}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sp)}

/* ---------- Buttons: full pill, tracked, restrained ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;font-weight:600;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  padding:1.15rem 1.9rem;border-radius:999px;border:1px solid transparent;
  transition:background-color .45s var(--ease),color .45s var(--ease),
    border-color .45s var(--ease),opacity .45s var(--ease);white-space:nowrap}
.btn svg{width:1.15em;height:1.15em;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-dark{background:var(--black);color:var(--white);border-color:var(--black)}
.btn-dark:hover{background:var(--ink);border-color:var(--ink)}
.btn-bronze{background:var(--beige);color:var(--ink);border-color:var(--beige)}
.btn-bronze:hover{background:var(--beige-lo);border-color:var(--beige-lo);color:var(--ink)}
.btn-light{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-light:hover{background:var(--ink);color:var(--white)}
.btn-ghost-dark{background:transparent;color:var(--white);border-color:rgba(255,255,255,.42)}
.btn-ghost-dark:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn-lg{padding:1.3rem 2.2rem}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity 1s var(--eout),transform 1s var(--eout)}
.js .reveal.in{opacity:1;transform:none}
.js [data-d]{transition-delay:var(--d)}

/* ============================================================ ANNOUNCEMENT BAR */
.announce{background:var(--black);padding:.75rem var(--gut);text-align:center}
.announce p{font-family:var(--f-b);font-size:.72rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.78);line-height:1.5;margin:0}
.announce .i{color:var(--beige);font-weight:600;font-style:normal}
@media(max-width:640px){
  .announce p{font-size:.64rem;letter-spacing:.12em;line-height:1.5}
}

/* ============================================================ NAV
   Full-width bar, flush with both viewport edges, no floating card, no
   outer frame. Only a bottom hairline separates it from the hero, and that
   hairline runs edge-to-edge with the bar itself. The inner row keeps the
   page's own max-width so the logo/links/phone still line up with the rest
   of the content, but that's a content constraint, not a visible container.
   position:sticky (not fixed) is what keeps it pinned once the announcement
   bar above it scrolls out of view, with no gap and no JS scroll-position
   math. margin-bottom cancels its own height so it still overlays the hero
   without pushing it down, --nav-h is measured once in JS (same pattern as
   the old --announce-h) purely for that cancellation.
   Always solid white with black text/logo, from the very top of the page,
   no transparent-over-hero state. The .scrolled class (still toggled by JS
   on scroll, for any future use) currently changes nothing visible here. */
.nav{position:sticky;top:0;margin-bottom:calc(-1 * var(--nav-h, 76px));
  z-index:100;color:var(--ink);background:var(--white);border-bottom:1px solid var(--line)}
.nav-in{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem;padding:.85rem clamp(1.5rem,4vw,4rem)}
.brand{display:inline-flex;align-items:center;line-height:0;color:inherit}
/* Source file is a solid white mark, so it needs brightness(0) to render as
   a black silhouette against this always-white header. */
.brand-logo{height:clamp(26px,2.5vw,34px);width:auto;display:block;filter:brightness(0)}
.nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;
  gap:clamp(1.1rem,1.9vw,2.2rem);list-style:none;white-space:nowrap}
.nav-links a{position:relative;font-size:calc(.7rem + 1px);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:inherit;opacity:.82;padding:.4rem 0;transition:opacity .3s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--beige);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.nav .btn{padding:.85rem 1.4rem;font-size:calc(.68rem + 1px)}
.nav-phone{background:var(--beige);color:var(--ink);border-color:var(--beige)}
.nav-phone:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.nav-phone svg{width:14px;height:14px}
.nav-phone:hover svg{transform:none}
.m-phone{display:inline-flex!important;font-size:calc(.76rem + 1px)!important;letter-spacing:.14em;
  padding:1.15rem 1.9rem!important;margin-top:1.6rem;
  background:var(--beige)!important;color:var(--ink)!important;border-color:var(--beige)!important}
.m-phone svg{width:15px;height:15px}
.m-phone:hover{background:var(--white)!important;border-color:var(--white)!important}
.nav-tog{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:inherit}
.nav-tog svg{width:22px;height:22px}
/* Above .nav's z-index (100), otherwise the sticky bar's own logo/toggle
   render on top of this full-screen overlay and collide with its first link. */
.m-menu{position:fixed;inset:0;z-index:150;background:var(--black);transform:translateY(-100%);
  transition:transform .7s var(--eout);display:flex;flex-direction:column;justify-content:center;
  padding:var(--gut);visibility:hidden}
.m-menu.open{transform:none;visibility:visible}
.m-menu ul{list-style:none;display:flex;flex-direction:column;gap:0}
.m-menu li{border-bottom:1px solid var(--line-dark)}
.m-menu li:last-child{border-bottom:0}
.m-menu a{font-family:var(--f-d);font-size:calc(clamp(1.72rem,7.2vw,2.5rem) + 1px);letter-spacing:-.012em;
  color:var(--white);padding:.75rem 0;display:block}
.m-menu a:hover{color:var(--beige)}
.m-close{position:absolute;top:1.2rem;right:var(--gut);width:48px;height:48px;color:var(--white)}
.m-close svg{width:26px;height:26px}

/* ============================================================ HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  background:var(--black)}
.hero-bg{position:absolute;inset:0;z-index:-3;background:var(--black)}
.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;
  filter:var(--photo) contrast(1.06) brightness(.9);
  animation:kb 34s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.12)}}
/* Deep editorial scrim: type sits on near-black at the left, image breathes at the right */
.hero-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(92deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.74) 32%,rgba(10,10,10,.36) 58%,rgba(10,10,10,.1) 82%),
  linear-gradient(180deg,rgba(10,10,10,.6) 0%,transparent 26% 62%,rgba(10,10,10,.7) 100%)}
.hero-in{width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(9rem,16vh,12rem) var(--gut) clamp(4rem,9vh,6.5rem)}
.hero-content{max-width:min(52%,660px)}
.hero-badge{display:inline-flex;align-items:center;gap:.85rem;padding:0;border:0;background:none;
  font-family:var(--f-b);font-size:var(--s--1);font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(255,255,255,.76)}
.hero-badge::before{content:"";width:32px;height:1px;flex:none;background:var(--beige);border-radius:999px}
.hero h1{font-family:var(--f-d);font-size:clamp(2.85rem, 1.4rem + 4.5vw, 5.5rem);line-height:1.0;
  letter-spacing:-.02em;color:var(--white);max-width:16ch;margin-top:clamp(1.4rem,2.4vw,2rem)}
.hero .lede{max-width:42ch;margin-top:clamp(1.5rem,2.6vw,2.1rem);color:rgba(255,255,255,.8);
  font-size:clamp(1rem,.96rem + .32vw,1.14rem);font-weight:300;line-height:1.75}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(2.2rem,3.8vw,3.2rem)}
.btn-glass{background:transparent;color:var(--white);border-color:rgba(255,255,255,.42)}
.btn-glass:hover{background:var(--white);color:var(--ink);border-color:var(--white)}

/* ============================================================ ABOUT */
.about{background:var(--white)}
.about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2.75rem, 6vw, 6.5rem);align-items:center}
.about-media{position:relative}
.about-frame{position:relative;overflow:hidden;aspect-ratio:.76/1;background:var(--gray);border-radius:var(--r-l);
  box-shadow:var(--sh-2)}
.about-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.about-copy h2{font-weight:400;font-size:clamp(2.15rem, 1.6rem + 2.45vw, 3.5rem);line-height:1.1;
  letter-spacing:-.018em;margin:1.5rem 0 0}
.about-copy p{color:var(--ink-72);margin-top:1.6rem;line-height:1.85;font-weight:300;max-width:56ch}
.about-copy .btn{margin-top:2.4rem}

/* ============================================================ APPROACH (editorial, image-led)
   Full-bleed cinematic photo behind a five-step progression. All five steps
   stay visible and legible at once, never a carousel, but hovering
   (desktop) or tapping (touch) one brings its title and description into
   full focus, dims its siblings, and lets the background photo drift and
   settle very slightly, so the whole thing reads as one continuous frame
   rather than a UI widget sitting on top of a picture. */
.approach{position:relative;isolation:isolate;overflow:hidden;background:var(--black);
  padding-block:clamp(4.5rem,7vw,7rem)}
.approach-bg{position:absolute;inset:0;z-index:-2}
.approach-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;filter:grayscale(1) contrast(1.1) brightness(.7);transform:scale(1.06);
  transition:object-position 1.2s var(--ease),filter 1.2s var(--ease),transform 1.4s var(--ease)}
.approach-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.6) 32%,rgba(10,10,10,.7) 66%,rgba(10,10,10,.92) 100%)}
.approach-in{position:relative;z-index:1;color:var(--white);max-width:none;padding-inline:clamp(2rem,5vw,4.5rem)}
.approach-head{max-width:640px}
.approach-head h2{font-weight:400;color:var(--white);margin-top:1.2rem;
  font-size:clamp(2.4rem,1.8rem + 2.8vw,4rem);line-height:1.06;letter-spacing:.006em}
.approach-lede{margin-top:1.2rem;color:rgba(255,255,255,.84);font-size:1.05rem;
  font-weight:300;line-height:1.7;max-width:38ch}

.approach-steps{position:relative;margin-top:clamp(3.6rem,6.5vw,5.2rem);
  display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(1rem,2vw,1.8rem)}
/* The connecting line is built as real, separate DOM segments (JS measures
   each node's centre and stops a segment short on either side), not one
   continuous bar with the node laid on top. That's a structural gap, not a
   z-index trick or a background-colour patch, so the node's circular area
   stays completely clean regardless of what's behind it. */
.approach-rail{position:absolute;left:0;right:0;top:7.5px;height:1px;pointer-events:none}
.approach-seg{position:absolute;top:0;height:1px;background:rgba(255,255,255,.32);
  transition:background-color .5s var(--ease)}
.approach-seg.is-filled{background:var(--beige)}

.ap-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
  text-align:left;background:none;border:0;padding:0;cursor:pointer;
  opacity:.58;transition:opacity .5s var(--ease)}
.ap-step.is-active,.ap-step:hover,.ap-step:focus-visible{opacity:1}
.ap-node{position:relative;width:16px;height:16px;flex:none;border-radius:50%;
  background:transparent;border:1.5px solid rgba(255,255,255,.6);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease)}
.ap-step:hover .ap-node,.ap-step:focus-visible .ap-node{border-color:var(--beige)}
.ap-step.is-active .ap-node{background:var(--beige);border-color:var(--beige);
  box-shadow:0 0 0 6px rgba(208,167,149,.22),0 0 0 13px rgba(208,167,149,.1)}
.ap-text{display:flex;flex-direction:column;gap:.5rem;max-width:23ch}
.ap-num{font-family:var(--f-b);font-size:.66rem;font-weight:600;letter-spacing:.22em;color:var(--beige)}
.ap-label{font-family:var(--f-d);font-weight:400;color:var(--white);
  font-size:clamp(1.05rem,.94rem + .5vw,1.3rem);line-height:1.22;letter-spacing:.005em}
.ap-desc{font-family:var(--f-b);font-size:.86rem;font-weight:300;line-height:1.65;
  color:rgba(255,255,255,.82)}
@media (max-width:1024px){
  .approach-steps{grid-template-columns:none;display:flex;flex-direction:column;row-gap:2.4rem}
  .approach-rail{left:7.5px;right:auto;top:0;bottom:0;height:auto;width:1px}
  .ap-step{flex-direction:row;align-items:flex-start;gap:1.2rem}
  .ap-node{margin-top:3px}
  .ap-text{max-width:38ch}
}
@media (prefers-reduced-motion:reduce){
  .approach-bg img{transition:none}
}

/* ============================================================ CONDITIONS RAIL (#services)
   Home Page 3's hover-expand rail, kept, now six conditions, hairline-separated. */
.services{background:var(--white)}
.svc-head{text-align:center;max-width:760px;margin:0 auto}
.svc-head h2{font-weight:400;font-size:clamp(2.15rem, 1.6rem + 2.45vw, 3.5rem);line-height:1.1;
  letter-spacing:-.018em;margin:1.4rem 0 0}
.svc-head p{color:var(--ink-72);margin:1.5rem auto 0;max-width:62ch;line-height:1.85;font-weight:300}
/* Rounded on the outer silhouette only, overflow:hidden on the rail clips the flush,
   edge-to-edge tiles to one soft frame instead of rounding each seam individually. */
.svc-rail{display:flex;gap:2px;background:var(--black);overflow:hidden;border-radius:var(--r-l);
  height:clamp(460px, 60vh, 620px);margin-top:clamp(3rem, 5vw, 4.5rem)}
.svc{position:relative;flex:1 1 0;min-width:clamp(104px, 9.6vw, 150px);overflow:hidden;
  cursor:pointer;background:var(--ink);isolation:isolate;
  transition:flex-grow .85s var(--eout)}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.35) brightness(.86);
  transition:transform 1.3s var(--eout),filter 1s var(--ease)}
.svc::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,10,.1) 24%,rgba(10,10,10,.5) 56%,rgba(10,10,10,.94) 100%);
  transition:background .7s var(--ease)}
.svc-inner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-end;padding:1.6rem .95rem;
  transition:padding .85s var(--eout)}
.svc.is-open .svc-inner{padding:1.9rem 1.6rem}
/* Collapsed titles live in a ~100px column, so they stay small and are allowed to break */
.svc h3{font-family:var(--f-d);font-weight:400;font-size:clamp(.92rem, .85rem + .24vw, 1.04rem);
  letter-spacing:-.004em;color:var(--white);line-height:1.24;overflow-wrap:break-word;
  transition:font-size .7s var(--ease),letter-spacing .7s var(--ease)}
.svc-body{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .85s var(--eout),opacity .5s var(--ease),margin .85s var(--eout)}
.svc-body p{color:rgba(255,255,255,.8);font-size:.9rem;line-height:1.72;font-weight:300;max-width:44ch}
.svc-more{margin-top:1.3rem;display:inline-flex;align-items:center;gap:.6rem;font-weight:600;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--beige)}
.svc-more svg{width:1.1em;height:1.1em;transition:transform .4s var(--ease)}
.svc.is-open{flex-grow:4}
.svc.is-open h3{font-size:clamp(1.5rem, 1.18rem + 1vw, 2.05rem);letter-spacing:-.014em}
.svc.is-open img{transform:scale(1.04);filter:brightness(.88)}
.svc.is-open::after{background:linear-gradient(180deg,rgba(10,10,10,.06) 18%,rgba(10,10,10,.44) 52%,rgba(10,10,10,.92) 100%)}
.svc.is-open .svc-body{max-height:280px;opacity:1;margin-top:.9rem}
.svc.is-open .svc-more:hover svg{transform:translateX(5px)}

/* ============================================================ SERVICE HUB (explorer) */
.hub{background:var(--bg)}
.hub-grid{display:grid;
  grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  column-gap:clamp(2rem, 4.4vw, 4.25rem);
  row-gap:clamp(2.6rem, 4.4vw, 4rem)}

.hub-headL{grid-column:1;grid-row:1;align-self:center}
.hub-h1{font-weight:400;color:var(--ink);margin-top:1.4rem;
  font-size:clamp(2.15rem, 1.6rem + 2.45vw, 3.5rem);line-height:1.1;letter-spacing:-.018em}

.hub-headR{grid-column:2;grid-row:1;align-self:center;max-width:46rem}

.hub-navL{grid-column:1;grid-row:2;min-width:0}
.hub-nav{display:flex;flex-direction:column;position:sticky;top:clamp(100px, 11vh, 130px)}
.hub-tab{display:flex;align-items:center;gap:1.1rem;width:100%;padding:1.3rem .1rem;text-align:left;
  border-bottom:1px solid var(--line);transition:color .35s var(--ease)}
.hub-tab:first-child{border-top:1px solid var(--line)}
.hub-tab .ic-tile{margin-right:-.3rem}
.hub-tab .hn{font-family:var(--f-b);font-size:.66rem;font-weight:600;letter-spacing:.18em;
  color:var(--ink-40);flex:none;transition:color .35s var(--ease)}
.hub-tab .hl{font-family:var(--f-d);font-size:1.28rem;letter-spacing:-.006em;line-height:1.3;color:var(--ink-72);
  transition:color .35s var(--ease)}
.hub-tab:hover .hl{color:var(--ink)}
.hub-tab.is-active{position:relative}
.hub-tab.is-active .hn{color:var(--clay)}
.hub-tab.is-active .hl{color:var(--ink)}
.hub-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--beige)}

.hub-content{grid-column:2;grid-row:2;min-width:0}
.hub-panel{display:none}
.hub-panel.is-active{display:block;animation:hubIn .7s var(--eout) both}
@keyframes hubIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hub-panel-head .hub-label{display:inline-flex;align-items:center;gap:.7rem;font-size:var(--s--1);
  font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-62)}
.hub-panel-head .hub-label .hn{color:var(--clay);font-weight:700}
.hub-title{font-weight:400;color:var(--ink);margin-top:1rem;
  font-size:clamp(1.72rem, 1.4rem + 1.4vw, 2.25rem);line-height:1.18;letter-spacing:-.015em}
.hub-panel-head p{max-width:46rem}

.hub-lede,.hub-headR,.hub-panel-head p{
  font-family:var(--f-b);color:var(--ink-72);font-size:var(--s-0);line-height:1.85;
  font-weight:300;margin-top:1.2rem}

.hub-svc-title,.hub-card-b h4,.hub-point h4{
  font-family:var(--f-d);font-weight:400;color:var(--ink);letter-spacing:-.01em;
  font-size:clamp(1.26rem, 1.12rem + .48vw, 1.52rem);line-height:1.24}

.hub-body,.hub-card-b p,.hub-point p{
  font-family:var(--f-b);color:var(--ink-72);font-size:.88rem;line-height:1.78;font-weight:300}

.hub-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem, 2vw, 1.6rem);
  margin-top:clamp(2.4rem, 4vw, 3.2rem);align-items:stretch}

.hub-card{display:flex;flex-direction:column;background:var(--white);
  overflow:hidden;border-radius:var(--r-m);box-shadow:var(--sh-1)}
.hub-card-media{position:relative;aspect-ratio:3/2;background:var(--gray);flex:none;overflow:hidden}
.hub-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--eout)}
.hub-card:hover .hub-card-media img{transform:scale(1.045)}
.hub-card-b{display:flex;flex-direction:column;flex:1;gap:.75rem;padding:1.7rem 1.5rem 1.8rem}
.hub-card-b h4{margin:0}
.hub-card-b p{margin:0}
.hub-learn{margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.6rem;
  font-weight:600;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.hub-learn svg{width:1.1em;height:1.1em;transition:transform .4s var(--ease)}
.hub-card:hover .hub-learn svg{transform:translateX(5px)}

.hub-card--wide{grid-column:1/-1}
.hub-card--wide .hub-card-media{aspect-ratio:21/9}
.hub-card-b--split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem, 3vw, 2.4rem)}
.hub-point{display:flex;flex-direction:column;gap:.5rem}
.hub-point h4,.hub-point p{margin:0}

@media (max-width:1024px){
  .hub-grid{grid-template-columns:1fr;row-gap:2.2rem}
  .hub-headL,.hub-headR,.hub-navL,.hub-content{grid-column:1;grid-row:auto}
  .hub-headR{max-width:none}
  .hub-nav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .hub-nav::-webkit-scrollbar{display:none}
  .hub-tab{flex:none;flex-direction:column;align-items:flex-start;gap:.4rem;width:auto;
    padding:1rem 1.3rem;border:0!important;border-right:1px solid var(--line)!important;white-space:nowrap}
  .hub-tab .hl{font-size:1.06rem}
  .hub-tab.is-active::after{bottom:0;height:2px}
  .hub-tab.is-active{background:var(--white)}
}
@media (max-width:640px){
  .hub-cards{grid-template-columns:minmax(0,1fr)}
  .hub-card--wide .hub-card-media{aspect-ratio:4/3}
  .hub-card-b--split{grid-template-columns:1fr;gap:1.4rem}
}

/* ============================================================ REVIEWS
   Editorial single-quote treatment: one large translucent glass panel per
   slide (not a row of cards), floating on a dimmed monochrome photograph.
   The carousel markup/JS is untouched, grid-auto-columns:100% is what turns
   the existing 3-up track into a one-slide-at-a-time slider, so the same
   prev/next + dot logic just adapts on its own. Content order in the DOM
   stays exactly as written (quote, then name, then stars); the visual
   order below (quote → name → stars-at-bottom) is done with flex `order`
   only, so nothing in the markup or copy has to change. */
.reviews{background:var(--black);position:relative;isolation:isolate}
.reviews::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:url("new assets/shared-reviews-background.webp");
  background-size:cover;background-position:50% 32%;
  filter:grayscale(1) contrast(1.08) brightness(.6)}
.reviews::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,.55) 45%,rgba(10,10,10,.85) 100%)}
.rev-head{max-width:60rem;margin:0 auto clamp(2.8rem, 5vw, 4rem);text-align:center}
.rev-head h2{font-weight:400;color:var(--white);font-size:clamp(2.1rem, 1.6rem + 2.15vw, 3.25rem);
  line-height:1.12;letter-spacing:-.016em;margin-top:1.4rem}
.rev-card{background:rgba(0,0,0,.88);
  border-radius:clamp(16px,2vw,22px);overflow:hidden;
  padding:clamp(2.2rem,3.4vw,2.8rem) clamp(1.8rem,2.6vw,2.4rem);
  display:flex;flex-direction:column;align-items:stretch;text-align:left;
  gap:clamp(1.1rem,1.8vw,1.5rem);min-height:20rem;justify-content:flex-start;height:100%}
.rev-stars{order:2;display:flex;justify-content:flex-start;gap:.4rem;color:var(--beige);
  margin-left:calc(48px + .9rem)}
.rev-stars svg{width:14px;height:14px}
.rev-card p.rt{order:3;color:rgba(255,255,255,.88);font-family:var(--f-d);font-weight:400;
  font-size:clamp(.88rem,.83rem + .22vw,.98rem);line-height:1.6;letter-spacing:.002em;
  margin:0}
.rev-more{display:none}
.rev-who{order:1;align-self:flex-start;display:flex;flex-direction:row;align-items:center;gap:.9rem}
.rev-who .av{width:48px;height:48px;flex:none;overflow:hidden;position:relative;
  background:var(--beige);border-radius:50%}
.rev-who .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rev-who .av.ini{display:flex;align-items:center;justify-content:center;color:var(--ink);
  font-family:var(--f-b);font-size:.72rem;font-weight:600;letter-spacing:.12em}
.rev-meta{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left}
.rev-who .n{font-family:var(--f-b);font-weight:500;font-size:.92rem;letter-spacing:.02em;
  color:var(--white);line-height:1.2}
.rev-who .r{font-size:.6rem;color:rgba(255,255,255,.56);letter-spacing:.2em;text-transform:uppercase}

/* ============================================================ CAROUSEL (shared) */
.carousel{position:relative}
.c-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*var(--cgap))/3);
  gap:var(--cgap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.4rem}
.c-track::-webkit-scrollbar{display:none}
.c-track>*{scroll-snap-align:start}
.c-nav{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:clamp(1.8rem,3vw,2.6rem)}
.c-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--ink-16);display:flex;
  align-items:center;justify-content:center;color:var(--ink);
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.c-btn:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.c-btn svg{width:16px;height:16px}
.c-dots{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.55rem;max-width:60vw}
.c-dot{width:20px;height:1px;border-radius:999px;padding:0;flex:none;background:var(--ink-16);
  transition:background-color .35s var(--ease),width .35s var(--ease)}
.c-dot.on{background:var(--clay);width:34px}
.on-dark .c-btn{border-color:var(--line-dark);color:var(--white)}
.on-dark .c-btn:hover{background:var(--beige);color:var(--ink);border-color:var(--beige)}
.on-dark .c-dot{background:rgba(255,255,255,.24)}
.on-dark .c-dot.on{background:var(--beige)}

/* ============================================================ GALLERY (coverflow)
   Three photos on a 3D rail: the centered card sits flat and in color, the two
   others recede, rotated, pushed back in Z, faded, toward the vanishing
   point set by .cf-stage's perspective. Position is one continuous float
   (0, 1 or 2, or anything between while dragging), eased toward its target
   each frame; drag and the prev/next buttons both just move that target. */
.gallery{background:var(--white)}
.gallery-head{text-align:center;max-width:760px;margin:0 auto}
.gallery-head h2{font-weight:400;font-size:clamp(2.15rem, 1.6rem + 2.45vw, 3.5rem);line-height:1.1;
  letter-spacing:-.012em;margin:1.2rem 0 0}
.gallery-head p{color:var(--ink-72);margin:1.3rem auto 0;max-width:58ch;line-height:1.75;font-weight:300}
.cf{margin-top:clamp(2.8rem,4.5vw,3.8rem)}
.cf-stage{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;outline:none;
  padding-block:clamp(1.6rem,3.2vw,2.6rem);perspective:calc(var(--cf-card) * 2.6)}
.cf-stage:active{cursor:grabbing}
.cf-track{position:relative;height:var(--cf-card);transform-style:preserve-3d}
.cf-card{position:absolute;left:50%;top:0;width:var(--cf-card);aspect-ratio:1;overflow:hidden;
  border-radius:var(--r-l);border:0;padding:0;background:var(--gray);cursor:pointer;
  will-change:transform;box-shadow:0 24px 60px -28px rgba(10,10,10,.12)}
.cf-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);transition:filter .5s var(--eout)}
.cf-card.is-active img{filter:none}
.cf-nav{display:flex;align-items:center;justify-content:center;gap:clamp(1.2rem,3vw,2.4rem);
  margin-top:clamp(1.2rem,2.4vw,1.8rem)}
/* Smaller than the shared .c-btn used elsewhere (Reviews), this row sits
   much closer to the photography, so a lighter touch keeps the arrows from
   competing with the image and caption. */
.cf-nav .c-btn{width:34px;height:34px}
.cf-nav .c-btn svg{width:12px;height:12px}
.cf-caption{min-width:14rem;max-width:42rem;text-align:center;display:flex;flex-direction:column;gap:.4rem}
.cf-title{font-family:var(--f-d);font-weight:400;font-size:1.3rem;letter-spacing:-.008em;color:var(--ink)}
.cf-sub{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.cf-desc{font-family:var(--f-b);font-size:.86rem;font-weight:300;line-height:1.6;
  color:var(--ink-72);margin-top:.3rem}
@media (prefers-reduced-motion:reduce){
  .cf-card{transition:none}
}

/* ============================================================ SCROLL EXPAND
   A tall track (.se-track) provides scroll distance; the stage inside it
   (.se-pin) is position:sticky, so it stays pinned in the viewport while
   the track scrolls past underneath. JS reads how far the track has scrolled
   to drive the media's size and the heading's split-and-exit as plain
   percentages, no scroll-jacking, no locked wheel/touch events. */
.scroll-expand{background:#000;position:relative}
.se-track{position:relative;height:230vh}
.se-pin{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;isolation:isolate}
/* Solid pure black, no gradient/halo behind the video, per the client's
   direction for this section specifically (elsewhere on the page still uses
   the brand's near-black --black token; this one is literally #000). */
.se-bg{position:absolute;inset:0;z-index:-1;background:#000}
.se-media{position:relative;flex:none;overflow:hidden;border-radius:var(--r-xl);
  box-shadow:0 40px 90px -36px rgba(0,0,0,.65);background:var(--gray)}
.se-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:var(--photo)}
/* Constant dim for text legibility only, it does not darken as the user
   scrolls, so the video itself reads unchanged throughout the interaction. */
.se-media-overlay{position:absolute;inset:0;background:#000;opacity:.18}
.se-head{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:1.15rem;
  padding-inline:var(--gut);pointer-events:none}
.se-title{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.55em 1em;text-align:center;font-family:var(--f-d);font-weight:400;
  font-size:clamp(2.1rem,1.5rem + 3vw,4rem);letter-spacing:-.015em;line-height:1.08;color:var(--white)}
.se-word--r{color:var(--beige);font-style:italic}
/* Tighter than the standard .section top padding, the pinned video already
   fills the viewport right above this, so the full rhythm-spacing read as a
   gap rather than a transition. Bottom padding stays at the normal .section
   value. */
.se-below{background:#000;padding-top:clamp(2rem,1.3rem + 2.8vw,3.2rem)}
.se-below-in{max-width:52rem;margin-inline:auto;text-align:center}
.se-below-in p{color:rgba(255,255,255,.82);font-weight:300;line-height:1.85;font-size:1.02rem;margin-top:1.2rem}
.se-below-in p:first-child{margin-top:0}
.se-below-in .btn{margin-top:2.1rem}
@media (max-width:720px){
  .se-track{height:190vh}
}
/* Reduced motion: no pin, no scroll-driven sizing, a normal static block,
   settled near its darkest state so it still leads naturally into .se-below. */
.se-track.no-motion{height:auto}
.se-track.no-motion .se-pin{position:relative;height:auto;min-height:min(72vh,620px);
  padding-block:clamp(3rem,6vw,4.5rem)}

/* ============================================================ FAQ
   Restyled to a 2-column grid of soft rounded cards (reference look),
   markup/behaviour (button + hidden answer, aria-expanded) is unchanged,
   only the visual shell around it. align-items:start keeps a card that
   expands from stretching its row-mate to match its new height. */
.faq{background:var(--white)}
.faq-head{text-align:left;margin-bottom:clamp(2.8rem,5vw,4rem)}
.faq-head h2{font-weight:400;font-size:clamp(2.15rem, 1.6rem + 2.45vw, 3.5rem);line-height:1.1;
  letter-spacing:-.018em;margin-top:1.4rem}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.4rem);align-items:start}
.faq-item{background:var(--bg);border-radius:var(--r-m);overflow:hidden;
  transition:background-color .4s var(--ease)}
.faq-item:hover{background:var(--gray)}
.faq-item[aria-expanded="true"]{background:#000}
.faq-item[aria-expanded="true"]:hover{background:#000}
.faq-q{width:100%;display:flex;align-items:flex-start;justify-content:flex-start;text-align:left;
  padding:clamp(1.5rem,2.2vw,1.9rem) clamp(1.6rem,2.4vw,2rem);font-family:var(--f-b);font-weight:400;
  font-size:1rem;line-height:1.5;color:var(--ink);transition:color .4s var(--ease)}
.faq-item[aria-expanded="true"] .faq-q{color:var(--white)}
/* Icon dropped for the reference's plain-card look, the whole card stays a
   real <button> with aria-expanded, so click-to-expand and screen readers
   still work exactly as before, just without the visible +/- affordance. */
.faq-ic{display:none}
.faq-a{overflow:hidden;height:0;transition:height .5s var(--ease)}
.faq-a-in{padding:0 clamp(1.6rem,2.4vw,2rem) clamp(1.5rem,2.2vw,1.9rem);color:var(--ink-72);
  line-height:1.85;font-weight:300;transition:color .4s var(--ease)}
.faq-item[aria-expanded="true"] .faq-a-in{color:rgba(255,255,255,.84)}
@media (max-width:640px){
  .faq-list{grid-template-columns:1fr}
}

/* ============================================================ CONTACT */
/* Tighter bottom padding, paired with .visit's own reduced top padding so
   the form and the "Get in Touch" panel that follows read as one continuous
   contact flow instead of two sections separated by a wide gap. */
.contact{background:var(--bg);padding-bottom:clamp(2.4rem,1.6rem + 3vw,3.8rem)}
.contact-panel{display:grid;grid-template-columns:1.12fr .88fr;background:var(--white);
  overflow:hidden;border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.contact-copy{padding:clamp(1.9rem, 3.6vw, 3.4rem)}
.contact-copy h2{font-weight:400;font-size:clamp(2rem, 1.56rem + 2.15vw, 3.1rem);line-height:1.1;
  letter-spacing:-.018em}
.contact-copy>p{color:var(--ink-72);margin-top:1rem;max-width:38ch;font-weight:300;line-height:1.8}
.form{margin-top:clamp(1.8rem, 3vw, 2.4rem)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.4rem}
.field label{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-62)}
.field label .req{color:var(--clay)}
.field input,.field select,.field textarea{width:100%;padding:.85rem 1rem;background:var(--white);
  border:1px solid var(--gray);border-radius:var(--r-s);font-weight:300;
  transition:border-color .3s var(--ease)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-40)}
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:2.7rem;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23131312%22%3E%3Cpath%20d%3D%22M4%209h16l-8%207L4%209z%22/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:11px 11px}
.field textarea{resize:vertical;min-height:118px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-40)}
.field :focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.8rem;line-height:1.65;font-weight:300;
  color:var(--ink-72);margin:.2rem 0 1.6rem}
.consent input{width:18px;height:18px;flex:none;margin-top:.2rem;accent-color:var(--ink);border-radius:5px}
.form .btn{padding:1.15rem 1.7rem;width:100%}
.form-ok{display:none;margin-top:1.1rem;text-align:center;padding:1rem;border-radius:var(--r-s);
  background:var(--bg);border:1px solid var(--beige);color:var(--ink);font-size:.9rem}
.form-ok.show{display:block}
.contact-media{position:relative;min-height:460px;background:var(--gray)}
.contact-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%}
/* The ramp needs headroom above the type, or the caption lands on the bright part of the photo */
.contact-glass{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(4rem,7vw,6rem) clamp(1.6rem,2.6vw,2.2rem) clamp(1.6rem,2.6vw,2.2rem);
  text-align:left;color:var(--white);
  background:linear-gradient(180deg,transparent 0%,rgba(10,10,10,.5) 48%,rgba(10,10,10,.9) 100%)}
.contact-glass .gt{font-family:var(--f-d);font-size:clamp(1.38rem,1.12rem + .98vw,1.82rem);
  line-height:1.26;letter-spacing:-.012em;display:block}

/* ============================================================ VISIT (black) */
/* Both edges tightened: top pairs with .contact's reduced bottom padding
   (see its comment); bottom pairs with .footer's reduced top padding, since
   both are solid black and a full double gap reads as one big dark void
   between the form and the footer. */
.visit{background:var(--black);padding-top:clamp(2.4rem,1.6rem + 3vw,3.8rem);
  padding-bottom:clamp(2.4rem,1.6rem + 3vw,3.8rem)}
.visit-panel{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.8rem,3.6vw,3rem);align-items:start}
.visit-info{background:transparent;color:var(--white);padding:clamp(1.9rem,3.4vw,2.8rem);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl)}
.visit-info h2{font-size:clamp(1.92rem,1.5rem + 1.82vw,2.85rem);color:var(--white);margin-top:1.2rem;
  letter-spacing:-.016em;line-height:1.12}
.visit-lede{color:var(--mist);margin-top:1.2rem;max-width:52ch;line-height:1.8;font-size:.94rem;font-weight:300}
.vrows{margin-top:2.4rem;display:flex;flex-direction:column;gap:0}
.vrow{display:flex;gap:1.2rem;align-items:flex-start;padding:1.3rem 0;border-top:1px solid var(--line-dark)}
.vrow:last-child{border-bottom:1px solid var(--line-dark)}
.vrow .vi{width:38px;height:38px;flex:none;border-radius:50%;background:transparent;
  border:1px solid rgba(255,255,255,.2);color:var(--beige);display:flex;align-items:center;justify-content:center}
.vrow .vi svg{width:17px;height:17px}
.vrow .vk{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.56)}
.vrow .vv{margin-top:.4rem;line-height:1.6;font-weight:300;font-size:.94rem;color:rgba(255,255,255,.9)}
.vrow .vv a:hover{color:var(--beige)}
.hrs{display:grid;grid-template-columns:auto auto;gap:.4rem 1.8rem;font-size:.9rem;margin-top:.4rem}
.hrs .d{color:rgba(255,255,255,.56)}
.visit-actions{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.9rem}
.visit-map-col{width:100%}
.visit-map{position:relative;height:clamp(500px,58vh,640px);overflow:hidden;border-radius:var(--r-l);
  border:1px solid rgba(255,255,255,.14);background:var(--ink)}
.visit-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.04)}
.visit-map-guard{position:absolute;inset:0;cursor:pointer;background:transparent;border:0;padding:0;
  display:flex;align-items:flex-end;justify-content:center}
.visit-map.active .visit-map-guard{display:none}
.visit-map-hint{margin-bottom:1.2rem;padding:.7rem 1.2rem;background:var(--black);color:var(--white);
  border-radius:999px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  display:flex;align-items:center;gap:.6rem}
.visit-map-hint svg{width:13px;height:13px;color:var(--beige);flex:none}
.visit-map-note{margin-top:1.1rem;color:var(--mist);font-size:.86rem;font-weight:300;line-height:1.7}
@media(min-width:1025px){
  .visit-map-col{position:sticky;top:clamp(100px,10vh,130px)}
}
@media(max-width:1024px){
  .visit-map{height:clamp(360px,50vh,460px)}
}

/* ============================================================ FOOTER */
.footer{background:var(--black);color:var(--white);padding-top:clamp(2.4rem,1.6rem + 3vw,3.8rem)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,3.4rem);
  padding-bottom:3.4rem;border-bottom:1px solid var(--line-dark);text-align:left}
.foot-brand .brand{color:var(--white)}
.foot-logo{height:clamp(32px,3vw,40px);width:auto;display:block}
.foot-brand p{color:var(--mist);margin-top:1.6rem;max-width:34ch;font-size:.9rem;font-weight:300;line-height:1.8}
.foot-social{display:flex;gap:.6rem;margin-top:1.8rem}
.foot-social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.foot-social a:hover{background:var(--beige);border-color:var(--beige);color:var(--ink)}
.foot-social svg{width:16px;height:16px}
.foot-col{text-align:left}
.foot-col h4{font-family:var(--f-b);font-size:.64rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--beige);margin:0 0 1.4rem}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin:0;padding:0}
.foot-col li{margin:0;padding:0}
.foot-col a{display:inline-block;color:rgba(255,255,255,.74);font-size:.9rem;font-weight:300;
  transition:color .3s var(--ease)}
.foot-col a:hover{color:var(--beige)}
/* R2/G5: explicit "see all" exits from the two index columns. */
.foot-all{margin-top:.35rem}
.foot-all a{color:var(--beige);font-weight:600;letter-spacing:.06em}
.foot-all a span{display:inline-block;transition:transform .35s var(--ease)}
.foot-all a:hover span{transform:translateX(4px)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  padding:2rem 0;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.foot-bot .links{display:flex;gap:1.8rem}
.foot-bot a:hover{color:var(--beige)}

/* ============================================================ RESPONSIVE */
@media (max-width:1180px) and (min-width:721px){
  /* Six conditions read better as a two-row grid than a six-way rail on tablet */
  .svc-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;height:auto}
  .svc{flex:none;height:380px;min-width:0}
  .svc.is-open{flex-grow:0}
  .svc h3,.svc.is-open h3{font-size:1.42rem}
  .svc-body{max-height:none;opacity:1;margin-top:.7rem}
  .svc img,.svc.is-open img{transform:none;filter:brightness(.88)}
  .svc::after,.svc.is-open::after{background:linear-gradient(180deg,rgba(10,10,10,.08) 6%,rgba(10,10,10,.52) 34%,rgba(10,10,10,.95) 100%)}
  .svc-more{margin-top:1rem}
}
@media (max-width:1024px){
  .nav-links,.nav-cta .btn,.nav-phone{display:none}
  .nav-tog{display:flex}
  .hero-content{max-width:min(78%,600px)}
  .about-grid{grid-template-columns:minmax(0,1fr);gap:3rem}.about-media{max-width:440px}
  .why-inner{width:100%}
  .why-media{position:relative;top:auto;bottom:auto;right:auto;width:100%;max-width:none;height:300px}
  .contact-panel{grid-template-columns:minmax(0,1fr)}
  .contact-media{min-height:340px;order:-1}
  .visit-panel{grid-template-columns:minmax(0,1fr)}
  .c-track{grid-auto-columns:calc((100% - var(--cgap))/2)}
  .sol-cards{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}
}
@media (max-width:720px){
  .hero{align-items:flex-end}
  .hero-content{max-width:100%}
  .hero-bg img,.hero-bg video{object-position:66% 26%}
  .hero-scrim{background:
    linear-gradient(180deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,.3) 32%,rgba(10,10,10,.82) 74%,rgba(10,10,10,.95) 100%)}
  .hero-actions .btn{flex:1 1 100%}
  .rev-head,.faq-head,.svc-head{text-align:left}
  .svc-head p{margin-inline:0}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .form .btn{white-space:normal;text-align:center;line-height:1.5}
  .c-track,.reviews .c-track{grid-auto-columns:88%}
  /* Solutions triptych → stacked composition */
  .sol-fan{overflow:visible}
  .sol-pic.l,.sol-pic.r{display:block;position:absolute;top:50%;width:clamp(96px,28vw,130px);z-index:1}
  .sol-pic.l{left:calc(50% - 150px);transform:translateY(-50%) rotate(-6deg)!important}
  .sol-pic.r{right:calc(50% - 150px);transform:translateY(-50%) rotate(6deg)!important}
  .sol-pic.c{position:relative;width:clamp(180px,56vw,220px);transform:none!important;z-index:2;margin-inline:auto}
  .js .solutions .sol-pic.l,.js .solutions .sol-pic.r{opacity:1}
  .js .solutions .sol-pic.c{transform:translateY(24px) scale(.94)!important}
  .js .solutions.play .sol-pic.c{transform:none!important}
  .sol-cards{grid-template-columns:minmax(0,1fr)}
  /* Conditions rail → stacked cards, copy always visible */
  .svc-rail{flex-direction:column;height:auto;gap:2px}
  .svc{flex:none;height:400px;min-width:0}.svc.is-open{flex:none}
  .svc h3,.svc.is-open h3{font-size:1.6rem}
  .svc-inner{padding:1.9rem 1.5rem 1.8rem}
  .svc-body{max-height:none;opacity:1;margin-top:.7rem}
  .svc img,.svc.is-open img{transform:none;filter:brightness(.86)}
  .svc::after,.svc.is-open::after{background:linear-gradient(180deg,rgba(10,10,10,.06) 6%,rgba(10,10,10,.5) 30%,rgba(10,10,10,.95) 100%)}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .foot-bot{flex-direction:column;align-items:flex-start}
  .foot-bot .links{gap:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal,.js .solutions .sol-pic{opacity:1!important;transform:none!important}
  .hub-panel.is-active{animation:none}
}

/* ============================================================ MEGA-MENU (global, identical across all pages) */
.nav-primary{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.nav-links{display:flex;align-items:center;gap:.2rem;list-style:none;margin:0;padding:0;white-space:nowrap}
.nav-item:nth-last-child(2){margin-right:.6rem}
.nav-item{position:relative;list-style:none}
.nav-link,.nav-trigger{position:relative;display:inline-flex;align-items:center;gap:.35rem;
  padding:.55rem .95rem;font-family:var(--f-b);font-size:calc(.7rem + 1px);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);opacity:.82;background:none;border:0;cursor:pointer;
  transition:opacity .3s var(--ease),color .3s var(--ease)}
.nav-link:hover,.nav-trigger:hover,.nav-trigger[aria-expanded="true"]{opacity:1;color:var(--ink)}
.nav-chev{width:11px;height:11px;flex:none;transition:transform .35s var(--ease)}
.nav-trigger[aria-expanded="true"] .nav-chev{transform:rotate(180deg)}
.nav-item.is-active .nav-trigger,.nav-item.is-active .nav-link{color:var(--clay);opacity:1}

/* Panel, anchored to sticky nav, centered horizontally on the viewport */
/* R2/G2: anchored under its OWN trigger (JS sets --mega-x on open), never
   viewport-centred. padding-top is the hover-intent bridge: it is part of the
   panel, so the pointer can travel from the trigger into the menu without
   crossing dead space and cancelling the open state. */
.mega{position:absolute;left:var(--mega-x,0px);top:100%;padding-top:12px;transform:translateY(-4px);
  z-index:120;opacity:0;pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease)}
.mega:not([hidden]){opacity:1;pointer-events:auto;transform:translateY(0)}
.mega-inner{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 24px 60px -24px rgba(19,19,18,.28);
  padding:clamp(1.5rem,1.2rem + 1vw,2rem);
  display:grid;gap:clamp(1.4rem,2.2vw,2.4rem);
  max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--gray) transparent}
.mega-inner::-webkit-scrollbar{width:8px}
.mega-inner::-webkit-scrollbar-track{background:transparent}
.mega-inner::-webkit-scrollbar-thumb{background:var(--gray);border-radius:99px}
.mega-inner::-webkit-scrollbar-thumb:hover{background:var(--ink-16)}
.mega-cols-1{grid-template-columns:minmax(220px,260px)}
.mega-cols-3{grid-template-columns:repeat(3,minmax(200px,240px))}
.mega-cols-4{grid-template-columns:repeat(4,minmax(240px,280px))}
.mega-flex{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(1.4rem,2.2vw,2.4rem) clamp(1.8rem,2.6vw,3rem)}
.mega-col-group{display:flex;flex-direction:column;flex:0 1 auto;gap:clamp(1.4rem,2.2vw,2.2rem)}
.mega--widest .mega-inner{width:min(1120px,calc(100vw - 40px));max-width:min(1120px,calc(100vw - 40px))}
/* R2/G4: conditions grouped by body location, balanced across columns. */
.mega-bygroup{display:block;columns:4;column-gap:clamp(1.5rem,2.2vw,2.4rem)}
.mega-group{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:inline-block;width:100%;margin-bottom:clamp(1.1rem,1.8vw,1.6rem)}
.mega-group .mega-h{margin-bottom:.5rem}
@media(max-width:1200px){.mega-bygroup{columns:3}}
.mega-col{min-width:0}
.mega-col--wide{flex:0 1 auto}
.mega-lists{display:flex;gap:0 1.6rem}
.mega-lists .mega-list{flex:0 0 auto;min-width:140px;max-width:230px}
.mega-h{display:block;font-family:var(--f-b);font-size:calc(.62rem + 1px);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--clay);margin-bottom:.85rem}
.mega-h--split{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line)}
.mega-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.05rem}
.mega-list a{display:block;padding:.4rem .5rem;font-family:var(--f-b);font-size:calc(.86rem + 1px);font-weight:400;
  color:var(--ink-72);border-radius:8px;transition:background-color .25s var(--ease),color .25s var(--ease),padding-left .25s var(--ease)}
.mega-list a:hover{background:var(--bg);color:var(--ink);padding-left:.85rem}
@media(max-width:1200px){
  .mega-cols-4{grid-template-columns:repeat(3,minmax(200px,240px))}
  .mega-lists{flex-direction:column;gap:0}
  .mega-lists .mega-list{max-width:none}
}
@media(max-width:1024px){
  .nav-primary{display:none}
  .mega{display:none}
}

/* Mobile menu, accordion groups */
.m-menu ul .m-group{border-bottom:1px solid var(--line-dark)}
.m-menu ul .m-group:last-of-type{border-bottom:0}
.m-menu .m-group-h{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 0;background:none;border:0;color:var(--white);cursor:pointer;
  font-family:var(--f-d);font-size:calc(clamp(1.72rem,7.2vw,2.5rem) + 1px);letter-spacing:-.012em;text-align:left}
.m-menu .m-group-h svg{width:20px;height:20px;flex:none;transition:transform .3s var(--ease);color:var(--beige)}
.m-menu .m-group-h[aria-expanded="true"] svg{transform:rotate(180deg)}
.m-menu .m-sub{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);
  list-style:none;margin:0;padding:0}
.m-menu .m-group[aria-expanded="true"] .m-sub{max-height:1400px}
.m-menu .m-sub li{border:0}
.m-menu .m-sub a{padding:.55rem 0;font-family:var(--f-b);font-size:calc(1rem + 1px);letter-spacing:.01em;
  font-weight:400;color:rgba(255,255,255,.78);text-transform:none;display:block}
.m-menu .m-sub a:hover{color:var(--beige)}
.m-menu .m-sub-h{padding:1rem 0 .35rem;font-family:var(--f-b);font-size:calc(.6rem + 1px);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--beige);list-style:none}


/* ============================================================ VARIANT B (factory additions)
   Every rule below composes the mockup's own tokens and the eight motion
   primitives catalogued in MOTION-INVENTORY.md §5. Nothing is restyled. */
:root{
  --motion-ease:var(--ease);
  --motion-ease-out:var(--eout);
  --motion-ui:.35s; --motion-control:.45s; --motion-panel:.5s;
}
/* shared eyebrow for the new sections (namespaced so it never collides) */
.vb-eyebrow{display:inline-flex;align-items:center;gap:.85rem;font-family:var(--f-b);
  font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--clay)}
.vb-eyebrow::before{content:"";width:32px;height:1px;flex:none;background:var(--beige);border-radius:999px}
.on-dark .vb-eyebrow,.vb-eyebrow.on-dark{color:var(--beige)}
.vb-h2{font-family:var(--f-d);font-weight:400;line-height:1.1;letter-spacing:-.016em;
  font-size:clamp(1.9rem,1.5rem + 1.6vw,2.9rem);margin-top:1.1rem}
.on-dark .vb-h2{color:var(--white)}
.vb-lede{margin-top:1rem;font-size:.98rem;font-weight:300;line-height:1.75;color:var(--ink-72);max-width:64ch}
.on-dark .vb-lede{color:var(--mist)}

/* Long-label CTAs in the new sections wrap instead of forcing a horizontal
   scroll at phone widths (.btn is white-space:nowrap by default). */
.offer-in > .btn,.cta-copy .btn,.fhost .btn{max-width:100%;white-space:normal;text-align:center}
@media(max-width:560px){.offer-in > .btn{width:100%}}

/* ---- hero trust element (R2/G3: stars over "Google Business Profile" in white) ---- */
.trust-strip{display:inline-flex;flex-direction:column;align-items:center;gap:.45rem;
  padding:.8rem 1.3rem;
  border-radius:var(--r-m);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--white);text-align:center;
  transition:background-color var(--motion-control) var(--ease),
             border-color var(--motion-control) var(--ease),
             transform var(--motion-control) var(--ease)}
.trust-strip:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.52);transform:translateY(-2px)}
.trust-stars{display:inline-flex;gap:3px;flex:none}
.trust-stars svg{width:17px;height:17px;fill:#fbbc04;stroke:none;display:block}
.trust-copy{display:flex;flex-direction:column;align-items:center;gap:.22rem;min-width:0}
.trust-v{font-family:var(--f-b);font-size:.88rem;font-weight:500;line-height:1.25;color:#FFFFFF;
  letter-spacing:.01em}
.trust-k{font-family:var(--f-b);font-size:.6rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.78)}
.hero-trust{margin-top:clamp(1.4rem,2.4vw,2rem)}
/* R3-1: keep the hero button at the ORIGINAL mockup's intrinsic height; the taller
   trust strip sibling was stretching it in the flex row. */
.hero-actions > .btn{align-self:center}
.cond-trust{margin-top:clamp(1.2rem,2vw,1.7rem)}
@media(max-width:560px){.trust-strip{width:100%}}

/* ---- persistent mobile CTA bar (<=768px) ---- */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:140;display:none;
  grid-template-columns:auto minmax(0,1fr);gap:.5rem;
  padding:.5rem .6rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom,0px));
  background:rgba(10,10,10,.97);border-top:1px solid var(--line-dark)}
.mcta .btn{white-space:normal;text-align:center;justify-content:center;
  padding:.78rem .9rem;font-size:.7rem;line-height:1.25;letter-spacing:.1em;min-height:48px}
.mcta .btn svg{width:16px;height:16px;flex:none}
@media(max-width:768px){.mcta{display:grid}body{padding-bottom:5.1rem}}

/* ---- Poptin-shaped booking host (no live Poptin ID assigned yet) ---- */
.fhost-head h3{font-family:var(--f-d);font-weight:400;letter-spacing:-.012em;line-height:1.15;
  font-size:clamp(1.24rem,1.06rem + .6vw,1.62rem);margin-top:.6rem}
.fhost-box{min-height:560px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-m);padding:clamp(.9rem,1.5vw,1.3rem);display:flex;margin-top:1.1rem}
.fhost-slot{flex:1;min-height:620px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.7rem;text-align:center;padding:1.5rem;
  background:var(--white);border:1px dashed var(--ink-16);border-radius:var(--r-s)}
.fhost-note{font-family:var(--f-b);font-size:.72rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--clay)}
.fhost-sub{font-family:var(--f-b);font-size:.88rem;font-weight:300;line-height:1.65;
  color:var(--ink-62);max-width:36ch}
.fhost-alt{margin-top:1rem;font-size:.88rem;font-weight:300;color:var(--ink-72)}
.fhost-alt a{color:var(--clay);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* "Cardless" at the mobile breakpoint: the CHROME goes, the height stays. */
@media(max-width:768px){
  .fhost-box{background:transparent;border:0;border-radius:0;padding:0;margin-top:.9rem}
  .fhost-slot{border-radius:var(--r-m)}
}
.on-dark .fhost-box{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.on-dark .fhost-slot{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.24)}
.on-dark .fhost-note{color:var(--beige)}
.on-dark .fhost-sub,.on-dark .fhost-alt{color:var(--mist)}
.on-dark .fhost-alt a{color:var(--beige)}

/* ---- sticky right rail (Service + Condition) ---- */
.svc-rail-grid{display:grid;grid-template-columns:minmax(0,1fr) 358px;
  gap:clamp(2.4rem,4.5vw,4rem);align-items:start}
.svc-rail-main{display:flex;flex-direction:column;gap:clamp(2.4rem,4vw,3.4rem);min-width:0}
.svc-sticky-rail{position:sticky;top:6.5rem;display:flex;flex-direction:column;gap:1.1rem}
.rail-contact{border:1px solid var(--line);border-radius:var(--r-m);
  padding:clamp(1.1rem,1.8vw,1.4rem);background:var(--white)}
.rail-contact .rc-k{font-family:var(--f-b);font-size:.6rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--clay);display:block;margin-bottom:.6rem}
.rail-contact p{font-size:.88rem;font-weight:300;line-height:1.6;color:var(--ink-72);margin-top:.5rem}
.rail-contact .rc-phone{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-d);
  font-size:1.35rem;letter-spacing:-.01em;color:var(--ink)}
.rail-contact .rc-phone svg{width:17px;height:17px;color:var(--clay)}
@media(max-width:1024px){
  .svc-rail-grid{grid-template-columns:minmax(0,1fr)}
  .svc-sticky-rail{position:static}
}
/* A pinned rail taller than the viewport would strand its lower half, so it
   scrolls inside itself once pinned. */
@media(min-width:1025px){
  .svc-sticky-rail{max-height:calc(100vh - 7.5rem);overflow-y:auto;overscroll-behavior:contain;
    padding-right:3px;scrollbar-width:thin;scrollbar-color:var(--gray) transparent}
  .svc-sticky-rail::-webkit-scrollbar{width:8px}
  .svc-sticky-rail::-webkit-scrollbar-track{background:transparent}
  .svc-sticky-rail::-webkit-scrollbar-thumb{background:var(--gray);border-radius:99px}
}

/* ---- service: at-a-glance ---- */
.glance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;margin-top:clamp(1.5rem,2.4vw,2.1rem)}
.glance-cell{background:var(--white);padding:clamp(1.1rem,1.8vw,1.5rem);
  transition:background-color var(--motion-ui) var(--ease)}
.glance-cell:hover{background:var(--bg)}
.glance-cell dt{font-family:var(--f-b);font-size:.6rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--clay);margin-bottom:.6rem}
.glance-cell dd{margin:0;font-size:.9rem;font-weight:300;line-height:1.65;color:var(--ink-72)}
.tbc{font-style:italic;color:var(--ink-62)}
@media(max-width:640px){.glance-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- condition: TL;DR box ---- */
.cond-tldr{border-left:3px solid var(--beige);background:var(--bg);
  border-radius:0 var(--r-m) var(--r-m) 0;
  padding:clamp(1.2rem,2vw,1.75rem) clamp(1.3rem,2.2vw,2rem)}
.cond-tldr ul{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.cond-tldr li{position:relative;padding-left:1.2rem;font-size:.95rem;font-weight:300;
  line-height:1.65;color:var(--ink-90)}
.cond-tldr li::before{content:"";position:absolute;left:0;top:.66em;width:6px;height:6px;
  border-radius:50%;background:var(--clay)}

/* ---- numbered walk-through rows (first visit / how we evaluate) ---- */
.vb-steps{list-style:none;margin:clamp(1.4rem,2.2vw,2rem) 0 0;padding:0;border-top:1px solid var(--line)}
.vb-steps li{display:flex;gap:1.15rem;padding:1.2rem .25rem;border-bottom:1px solid var(--line);
  transition:background-color var(--motion-ui) var(--ease),padding-left var(--motion-ui) var(--ease)}
.vb-steps li:hover{background:var(--bg);padding-left:.85rem}
.vb-steps .n{flex:none;font-family:var(--f-b);font-size:.68rem;font-weight:700;
  letter-spacing:.18em;color:var(--clay);padding-top:.34rem;width:2.1rem}
.vb-steps h3{font-family:var(--f-d);font-weight:400;font-size:1.12rem;letter-spacing:-.008em;
  line-height:1.25;margin-bottom:.35rem;color:var(--ink)}
.vb-steps p{font-size:.9rem;font-weight:300;line-height:1.68;color:var(--ink-72)}

/* ---- Home: complimentary-consultation offer strip ---- */
.offer-strip{background:var(--black);color:var(--white);
  padding-block:clamp(2.4rem,1.7rem + 2.4vw,3.6rem)}
.offer-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(1.4rem,3vw,2.8rem)}
.offer-copy{flex:1 1 30rem;max-width:54ch;min-width:0}
.offer-copy h2{font-family:var(--f-d);font-weight:400;letter-spacing:-.014em;line-height:1.14;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.15rem);color:var(--white);margin-top:.9rem}
.offer-copy p{margin-top:.85rem;font-size:.95rem;font-weight:300;line-height:1.72;color:var(--mist)}

/* ---- Home: credentials band (no photos) ---- */
.creds{background:var(--bg)}
.creds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  margin-top:clamp(1.6rem,2.6vw,2.4rem)}
.cred{background:var(--white);padding:clamp(1.3rem,2vw,1.8rem);
  transition:background-color var(--motion-ui) var(--ease)}
.cred:hover{background:var(--bg)}
.cred .ck{font-family:var(--f-d);font-weight:400;line-height:1.08;letter-spacing:-.02em;
  font-size:clamp(1.45rem,1.2rem + .9vw,2rem);color:var(--ink);display:block}
.cred .cv{margin-top:.6rem;font-size:.88rem;font-weight:300;line-height:1.6;color:var(--ink-72)}
.creds .creds-grid + .vb-lede{margin-top:clamp(1.4rem,2.2vw,2rem)}

/* ---- Home: stat band (verified facts only) ---- */
.statband{background:var(--black);color:var(--white)}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3vw,3rem);
  margin-top:clamp(1.6rem,2.6vw,2.4rem)}
.stat{border-top:1px solid var(--line-dark);padding-top:1.25rem}
.stat .sk{font-family:var(--f-d);font-weight:400;line-height:1;letter-spacing:-.022em;
  font-size:clamp(2rem,1.5rem + 2vw,3.1rem);color:var(--beige);display:block}
.stat .sv{margin-top:.65rem;font-size:.88rem;font-weight:300;line-height:1.62;color:var(--mist)}
@media(max-width:720px){.stat-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- Home: service-area block ---- */
.vb-area-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:start}
.vb-chiplist{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.4rem 0 0;padding:0;list-style:none}
.vb-chiplist li{padding:.58rem 1rem;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:.82rem;font-weight:400;color:var(--ink-72);
  transition:border-color var(--motion-ui) var(--ease),color var(--motion-ui) var(--ease)}
.vb-chiplist li:hover{border-color:var(--clay);color:var(--ink)}
.vb-county{margin-top:1.5rem;font-size:.88rem;font-weight:300;line-height:1.7;color:var(--ink-72)}
@media(max-width:860px){.vb-area-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- About: fact snapshot (dark ground, no photos) ---- */
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:1px;
  background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r-m);
  overflow:hidden;margin-top:clamp(1.6rem,2.6vw,2.2rem)}
.fact{background:#0F0F0E;padding:clamp(1.2rem,1.9vw,1.6rem)}
.fact dt{font-family:var(--f-b);font-size:.6rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--beige);margin-bottom:.55rem}
.fact dd{margin:0;font-size:.9rem;font-weight:300;line-height:1.62;color:rgba(255,255,255,.82)}

/* ---- no-JS fallbacks (progressive enhancement) ---- */
html:not(.js) .faq-a{height:auto}
html:not(.js) .faq-ic{opacity:.3}
@media(max-width:1024px){
  html:not(.js) .m-menu{position:static;inset:auto;transform:none;visibility:visible;
    height:auto;padding:1.3rem var(--gut) 2rem;justify-content:flex-start}
  html:not(.js) .m-close{display:none}
  html:not(.js) .nav-tog{display:none}
  html:not(.js) .m-menu .m-sub{max-height:none}
  html:not(.js) .m-menu .m-group-h svg{display:none}
}

/* ---- ONE canonical closing CTA band (replaces the .cond-cta duplication) ---- */
.cta-band{background:var(--white);padding-block:clamp(2.8rem,1.9rem + 3.4vw,4.8rem)}
.cta-banner{display:grid;grid-template-columns:1fr 1fr;background:var(--black);color:var(--white);
  overflow:hidden;isolation:isolate;border-radius:var(--r-l);min-height:clamp(320px,29vw,440px)}
.cta-copy{padding:clamp(2rem,1.3rem + 2.8vw,3.6rem);display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center}
.cta-copy p{margin:0;font-family:var(--f-d);font-weight:400;color:var(--white);
  font-size:clamp(1.42rem,1.08rem + 1.5vw,2.35rem);line-height:1.2;letter-spacing:-.012em;
  text-wrap:balance;max-width:26ch}
.cta-copy .cta-sub{display:block;margin-top:.9rem;font-family:var(--f-b);font-weight:300;
  color:rgba(255,255,255,.74);font-size:clamp(.94rem,.88rem + .3vw,1.06rem);
  line-height:1.65;letter-spacing:0}
.cta-copy .btn{margin-top:clamp(1.7rem,2.4vw,2.4rem)}
.cta-media{position:relative;overflow:hidden}
.cta-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 32%;
  filter:var(--photo)}
@media(max-width:860px){
  .cta-banner{grid-template-columns:minmax(0,1fr)}
  .cta-media{min-height:230px;position:relative}
}

/* ---- coverflow captions are server-rendered; JS only switches the active one ---- */
.cf-caption{gap:0}
.cf-cap{display:flex;flex-direction:column;gap:.4rem}
.cf-cap + .cf-cap{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.js .cf-cap{display:none}
.js .cf-cap.is-active{display:flex}
.js .cf-cap + .cf-cap{margin-top:0;padding-top:0;border-top:0}

.about-facts{background:var(--black)}

/* ---- POPTIN EMBED (CORE30-POPTIN-PLAYBOOK) ------------------------------
   min-height is LOAD-BEARING: Poptin scales the whole form (fields AND type)
   to the box it is given. Container 560, iframe 620. The tinted .fhost-box
   host stays on light grounds so Poptin's white inputs remain visible, and
   goes cardless (chrome off, HEIGHT KEPT) at the mobile breakpoint above.
   Static pages, so there is no ClientRouter re-init. */
.poptin-embedded{width:100%;min-height:560px;color:var(--ink)}
.poptin-embedded iframe{width:100%!important;min-height:620px;background:transparent!important;
  border:0;display:block}
.on-dark .poptin-embedded,.book-band .poptin-embedded{color:var(--ink)}
.fhost-fallback{font-family:var(--f-b);font-size:.82rem;font-weight:300;line-height:1.6;
  color:var(--ink-62);margin-top:.8rem}
.on-dark .fhost-fallback{color:var(--mist)}

/* ---- ROUND 4 (owner 2026-09-22, phone): mobile hub rail + cardless Poptin ----
   R4-1 the hub tab strip is a horizontal scroll-snap rail with a visible peek
   of the next card and an edge fade, so tab 03+ is obviously reachable.
   R4-2 the Poptin host goes CARDLESS and FULL-BLEED with a 16px gutter: the
   card padding, the panel radius and the container gutter all come off, the
   HEIGHT stays (container 560 / iframe 620) because Poptin scales the whole
   form to the box it is given. */
@media(max-width:768px){
  .hub-navL{position:relative}
  .hub-nav{scroll-snap-type:x mandatory;scroll-padding-inline:0;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .hub-tab{scroll-snap-align:start;flex:0 0 43%;min-width:0;max-width:43%;overflow-wrap:anywhere;white-space:normal;padding:1rem 1.1rem}
  /* 43% of the rail (not 42vw) so a ~45px slice of the NEXT card always shows:
     at 42vw exactly two cards filled the rail and the peek vanished. */
  .hub-tab .hl{font-size:1rem;line-height:1.25}
  .hub-navL::after{content:"";position:absolute;right:0;top:1px;bottom:1px;width:34px;
    pointer-events:none;z-index:2;
    background:linear-gradient(90deg,rgba(245,245,245,0),var(--bg))}
  .contact .container{padding-inline:0}
  .contact-panel{overflow:visible;border-radius:0;box-shadow:none}
  .contact-copy{padding-inline:var(--gut)}
  .fhost{margin-inline:calc(-1 * var(--gut))}
  .fhost-head,.fhost-alt,.fhost-fallback{padding-inline:var(--gut)}
  .fhost-box{display:block;max-width:none;background:transparent;border:0;border-radius:0;
    padding:0 16px;margin-top:.9rem;min-height:560px}
  .poptin-embedded{width:100%;min-height:560px}
}


/* ---- low-page booking band (Service + Condition; the rail only links here) ---- */
.book-band{background:var(--bg);scroll-margin-top:6.5rem}
.book-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,4vw,3.4rem);align-items:start}
.book-steps{list-style:none;margin:clamp(1.4rem,2.2vw,2rem) 0 0;padding:0;
  border-top:1px solid var(--line)}
.book-steps li{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.book-steps .n{font-family:var(--f-b);font-size:.66rem;font-weight:700;letter-spacing:.2em;
  color:var(--clay);flex:none;padding-top:.25rem}
.book-steps h3{font-family:var(--f-d);font-weight:400;font-size:1.06rem;line-height:1.3;
  margin-bottom:.3rem;color:var(--ink)}
.book-steps p{font-size:.9rem;font-weight:300;line-height:1.65;color:var(--ink-72);margin:0}
.book-assure{margin-top:1.3rem;font-size:.88rem;font-weight:300;line-height:1.7;color:var(--ink-72)}
@media(max-width:900px){.book-grid{grid-template-columns:minmax(0,1fr)}}

/* R2/S4: the compliance duty lives in ONE place, globally, sourced from a
   single entity variable (medical_oversight_provider, awaiting the client). */
.foot-oversight{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line-dark);
  font-family:var(--f-b);font-size:.78rem;font-weight:300;line-height:1.7;
  color:rgba(255,255,255,.6);max-width:78ch}
.foot-oversight .tbc-foot{font-style:italic}

/* ---- ICON SYSTEM (R2/G6) -------------------------------------------------
   ONE system everywhere: the art sits on a soft tinted tile with the mockup's
   own radius. No icon-in-a-circle anywhere in the body. Generated duotone PNGs
   are wired by slug; anything not yet generated renders the inline line icon
   on the same tile, so the system never breaks. */
.ic-tile{width:88px;height:88px;flex:none;border-radius:var(--r-m);
  background:rgba(151,85,55,.07);display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;transition:background-color var(--motion-ui,.35s) var(--ease)}
.ic-tile img{width:64px;height:64px;object-fit:contain;display:block}
.ic-tile svg{width:32px;height:32px;color:var(--clay)}
.on-dark .ic-tile,.on-black .ic-tile,.visit .ic-tile{background:rgba(255,255,255,.08)}
.on-dark .ic-tile svg,.on-black .ic-tile svg,.visit .ic-tile svg{color:var(--beige)}
.ic-tile--sm{width:60px;height:60px;border-radius:var(--r-m)}
.ic-tile--sm img{width:46px;height:46px}
.ic-tile--sm svg{width:24px;height:24px}
/* rows that carry no generated art keep the old compact footprint */
.ic-tile--xs{width:40px;height:40px;border-radius:var(--r-s)}
.ic-tile--xs img{width:26px;height:26px}
.ic-tile--xs svg{width:18px;height:18px}
@media(max-width:640px){.ic-tile{width:72px;height:72px}.ic-tile img{width:54px;height:54px}}
.ic-tile--photo{background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin-bottom:.7rem}
.ic-tile--photo svg{color:var(--beige)}