/* ══════════════════════════════════════════════════════════════════════════
   MINEERS 2.0 — SHARED DESIGN SYSTEM
   Loaded by every page except the homepage, after styles.css. The homepage
   keeps its own home.css / home.js and does not load this file; the shared
   blocks below (journey, compare, menu, walk) are copies of the homepage's.
   Built from the existing tokens (ivory / char / taupe / sand, Cormorant
   Garamond + Inter), plus IBM Plex Mono for instrument-style annotations —
   the vocabulary of a smile-design screen, used for labels and readouts.

   The only saturated colour on any page is the photography: lips, gums,
   enamel. Everything around it stays warm and quiet.

   Contents
     · tokens, reveals, smile-arc rule, word-lit text
     · journey (six-step video process)
     · compare (before / after)
     · menu (treatment index with pointer preview)
     · walk (scroll-scrubbed clinic walkthrough)
     · doc (doctor card)
     · wh (window hero for inner pages)
     · inner-page components (scoped to body.v2)
   ══════════════════════════════════════════════════════════════════════════ */

.v2 {
  --nav-h: 92px;
  --porcelain: #fbfaf7;
  --ink-soft: #655f58;
  --line: rgba(25, 24, 23, .13);
  --on-dark: #efe9df;
  --on-dark-soft: #aea69b;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --gutter: clamp(20px, 6vw, 96px);
  overflow-x: clip;
}
@media (max-width: 800px) { .v2 { --nav-h: 76px; } }

.v2 main { display: block; }
.v2 .eyebrow { font-size: 11px; letter-spacing: .24em; margin: 0 0 22px; }
.v2 h2 { font: 500 clamp(44px, 5.4vw, 88px)/.94 var(--serif); letter-spacing: -.03em; margin: 0; }
.v2 h2 em, .v2 h1 em { font-style: italic; }
.v2 .btn { transition: background-color .3s, color .3s; }
.v2 .btn:hover { background: #3a3632; }
.v2 .btn.light:hover { background: #fff; }
.v2 .text-link { transition: opacity .3s; }

.v2 a:focus-visible,
.v2 button:focus-visible { outline: 2px solid var(--char); outline-offset: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Scroll-in reveal (one-shot, driven by site.js). Without JS nothing hides. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .9s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* The smile arc — the curve the front teeth follow — reused as a rule. */
.arc-rule { display: block; width: 100%; height: clamp(26px, 3.6vw, 56px); overflow: visible; }
.arc-rule path { fill: none; stroke: var(--taupe); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.js .arc-rule[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease); }
.js .arc-rule[data-reveal].is-in { clip-path: inset(0 0 0 0); }

/* Word-by-word reading light: [data-lit] paragraphs (split by site.js). */
.v2 [data-lit] .w { opacity: clamp(.14, calc(var(--lit, 1) * var(--n) - var(--i)), 1); }

@keyframes cue { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }


/* ══════════════════════════════════════════════════════════════════════════
   JOURNEY — six-step video process
   ══════════════════════════════════════════════════════════════════════════ */

.journey { background: var(--char); color: var(--on-dark); padding: clamp(96px, 12vw, 180px) var(--gutter) clamp(64px, 8vw, 120px); }
.journey .eyebrow { color: var(--on-dark-soft); }
.journey a:focus-visible { outline-color: var(--ivory); }
.journey__head { max-width: 1320px; margin: 0 auto clamp(40px, 6vw, 80px); }
.journey__head h2 { max-width: 12ch; }
.journey__head > p:last-child { max-width: 34rem; margin: 26px 0 0; color: var(--on-dark-soft); }

.journey__body {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
}
.journey__screen {
  position: sticky;
  top: calc(var(--nav-h) + 7vh);
  height: calc(100svh - var(--nav-h) - 14vh);
  max-height: 760px;
  overflow: hidden;
  background: #0e0d0c;
}
.journey__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s ease;
}
.journey__video.is-on { opacity: 1; }
.journey__count {
  position: absolute; left: 18px; bottom: 16px; margin: 0; z-index: 1;
  padding: 7px 10px 6px; background: rgba(14, 13, 12, .72);
  font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--on-dark-soft);
}
.journey__now { color: #fff; }

.journey__steps { --fill: 0; position: relative; list-style: none; margin: 0; padding: 6vh 0 22vh; }
.journey__steps::before,
.journey__steps::after {
  content: ""; position: absolute; left: 19px; top: calc(6vh + 20px); bottom: calc(22vh + 20px); width: 1px;
  background: rgba(255, 255, 255, .14);
}
.journey__steps::after { background: var(--on-dark); transform-origin: 50% 0; transform: scaleY(var(--fill)); }

.step {
  position: relative;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px);
  padding: 0 0 clamp(96px, 20vh, 220px);
  opacity: .34; transition: opacity .6s ease;
}
.step:last-child { padding-bottom: 0; }
.step.is-active { opacity: 1; }
.step__num {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .24); background: var(--char);
  font: 500 11px/1 var(--mono); letter-spacing: .04em;
  transition: background-color .5s, color .5s, border-color .5s;
}
.step.is-active .step__num { background: var(--on-dark); color: var(--char); border-color: var(--on-dark); }
.step h3 { font: 500 clamp(30px, 3vw, 46px)/1 var(--serif); letter-spacing: -.02em; margin: 2px 0 14px; }
.step p { margin: 0; color: var(--on-dark-soft); font-size: 16px; max-width: 38ch; }

@media (max-width: 800px) {
  .journey__body { display: block; }
  .journey__media {
    position: sticky; top: var(--nav-h); z-index: 2;
    margin: 0 calc(var(--gutter) * -1);
    padding: 10px var(--gutter) 14px;
    background: var(--char);
  }
  .journey__screen { position: relative; top: 0; height: 36svh; max-height: none; }
  .journey__steps { padding: 32px 0 12vh; }
  .journey__steps::before, .journey__steps::after { top: 52px; bottom: calc(12vh + 20px); }
  .step { padding-bottom: 26vh; }
  .step p { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BEFORE / AFTER COMPARE
   ══════════════════════════════════════════════════════════════════════════ */

.compare {
  --pos: 50%;
  position: relative;
  aspect-ratio: 2 / 1;
  max-height: calc(100svh - var(--nav-h) - 96px);
  overflow: hidden;
  background: var(--sand);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.compare:has(.compare__range:focus-visible) { outline: 2px solid var(--char); outline-offset: 5px; }
.compare__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .35s ease;
  -webkit-user-drag: none;
}
.compare.is-swapping .compare__img { opacity: 0; }
.compare__before { position: absolute; inset: 0; overflow: hidden; transform: translate3d(calc(var(--pos) - 100%), 0, 0); }
.compare__before .compare__img { transform: translate3d(calc(100% - var(--pos)), 0, 0); }
.compare__line { position: absolute; inset: 0; pointer-events: none; transform: translate3d(var(--pos), 0, 0); }
.compare__line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px; background: #fff; }
.compare__line i {
  position: absolute; left: 0; top: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: rgba(245, 242, 236, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191817' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.compare__tag {
  position: absolute; top: clamp(14px, 2vw, 24px); z-index: 1; pointer-events: none;
  padding: 7px 11px 6px; background: rgba(245, 242, 236, .9);
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.compare__tag--before { left: clamp(14px, 2vw, 24px); }
.compare__tag--after { right: clamp(14px, 2vw, 24px); }
.compare__range {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 2px; margin: 0;
  opacity: 0; pointer-events: none;
}
@media (max-width: 800px) {
  .compare { aspect-ratio: 4 / 3; max-height: none; }
  .compare__line i { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MENU — treatment index
   ══════════════════════════════════════════════════════════════════════════ */

.menu { position: relative; background: var(--porcelain); padding: clamp(96px, 12vw, 180px) var(--gutter); }
.menu__head {
  max-width: 1320px; margin: 0 auto clamp(40px, 6vw, 80px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: end; gap: 24px 48px;
}
.menu__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.menu__head > p:last-child { margin: 0; color: var(--ink-soft); font-size: 15px; }
.menu__list { list-style: none; max-width: 1320px; margin: 0 auto clamp(32px, 4vw, 48px); padding: 0; border-top: 1px solid var(--line); }
.menu__list a {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 32px;
  align-items: center; gap: 12px 32px;
  padding: clamp(22px, 2.6vw, 36px) 0;
  border-bottom: 1px solid var(--line);
  transition: opacity .4s ease;
}
.menu__name { font: 500 clamp(32px, 3.8vw, 60px)/1 var(--serif); letter-spacing: -.025em; transition: transform .6s var(--ease); }
.menu__desc { color: var(--ink-soft); font-size: 15px; max-width: 34ch; }
.menu__arrow { justify-self: end; font-size: 20px; transition: transform .5s var(--ease); }
.menu__thumb { display: none; }
.menu > .text-link { display: table; margin: 0 auto; }
.menu > .text-link { margin-left: max(0px, calc((100% - 1320px) / 2)); }

@media (hover: hover) and (pointer: fine) {
  .menu__list:hover a { opacity: .36; }
  .menu__list a:hover, .menu__list a:focus-visible { opacity: 1; }
  .menu__list a:hover .menu__name { transform: translate3d(18px, 0, 0); }
  .menu__list a:hover .menu__arrow { transform: translate3d(6px, 0, 0); }
}
.menu__preview {
  position: fixed; left: 0; top: 0; z-index: 30;
  width: clamp(220px, 20vw, 320px); aspect-ratio: 4 / 3;
  overflow: hidden; pointer-events: none;
  opacity: 0; visibility: hidden;
  box-shadow: 0 30px 60px -30px rgba(25, 24, 23, .45);
}
.menu__preview.is-on { visibility: visible; }
.menu__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 800px), (hover: none) {
  .menu__head { grid-template-columns: minmax(0, 1fr); }
  .menu__list a { grid-template-columns: minmax(0, 1fr) 76px; grid-template-rows: auto auto; gap: 8px 18px; }
  .menu__name { grid-column: 1; }
  .menu__desc { grid-column: 1; font-size: 14px; }
  .menu__thumb { display: block; grid-column: 2; grid-row: 1 / span 2; width: 76px; height: 76px; object-fit: cover; }
  .menu__arrow { display: none; }
  .menu__preview { display: none; }
}

/* ── Index with a case viewer (treatments page) ──────────────────────────
   The list runs down the left; a sticky viewer on the right plays each
   treatment's real case, before to after, when its row is hovered or
   focused. On touch screens the viewer sticks above the list and follows
   the row being scrolled past. Before is always left of the line. */
.menu--viewer .menu__body {
  max-width: 1320px; margin: 0 auto clamp(32px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
  gap: 0 clamp(40px, 5.5vw, 104px); align-items: start;
}
.menu--viewer .menu__list { margin: 0; }
.menu--viewer .menu__list a { grid-template-columns: 34px minmax(0, 1fr) 24px; grid-template-rows: auto auto; gap: 10px 18px; }
.menu__no { grid-column: 1; grid-row: 1; align-self: start; padding-top: .9em; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--taupe); transition: color .4s; }
.menu--viewer .menu__name { grid-column: 2; font-size: clamp(30px, 3.1vw, 50px); }
.menu--viewer .menu__desc { grid-column: 2; grid-row: 2; font-size: 14.5px; max-width: 46ch; }
.menu--viewer .menu__arrow { grid-column: 3; grid-row: 1 / span 2; }
.menu--viewer .menu__list a.is-active .menu__no { color: var(--char); }
.menu--viewer .menu__list a.is-active .menu__name { transform: translate3d(14px, 0, 0); }

.viewer { position: sticky; top: calc(var(--nav-h) + clamp(20px, 5vh, 56px)); }
.viewer__screen {
  --cut: 1; --tb: 1; --ta: 0; --scan: 0;
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--sand);
}
.viewer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease; }
.viewer.is-swapping .viewer__img { opacity: 0; }
/* Before sits left of the line: clipped from the right as --cut falls. */
.viewer__before { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--cut)) * 100%) 0 0); }
.viewer__scan {
  position: absolute; top: 0; bottom: 0; left: calc(var(--cut) * 100%); width: 2px; margin-left: -1px;
  background: #fff; opacity: var(--scan); pointer-events: none;
  box-shadow: 0 0 18px 4px rgba(255, 255, 255, .5), 0 0 60px 14px rgba(255, 255, 255, .16);
}
.viewer__tag {
  position: absolute; top: 18px; padding: 7px 11px 6px;
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--char); background: rgba(245, 242, 236, .9);
  transition: opacity .25s ease;
}
.viewer__tag--before { left: 18px; opacity: var(--tb); }
.viewer__tag--after { right: 18px; opacity: var(--ta); }
/* Viewfinder corners, the vocabulary of a clinical camera. */
.viewer__corners {
  position: absolute; inset: 12px; pointer-events: none;
  --c: rgba(255, 255, 255, .85); --l: 18px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l) no-repeat;
}
.viewer__readout {
  position: absolute; right: 22px; bottom: 20px;
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  font-variant-numeric: tabular-nums;
}
.viewer[data-kind="photo"] .viewer__before,
.viewer[data-kind="photo"] .viewer__scan,
.viewer[data-kind="photo"] .viewer__tag { display: none; }

.viewer__meta { padding-top: 20px; }
.viewer__count { display: flex; align-items: baseline; gap: 6px; margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--taupe); }
.viewer__num { color: var(--char); }
.viewer__kind { margin-left: auto; text-transform: uppercase; }
.viewer__name { margin: 14px 0 0; font: 500 clamp(28px, 2.4vw, 38px)/1 var(--serif); letter-spacing: -.02em; }
.viewer__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin: 22px 0 0; border-top: 1px solid var(--line);
}
.viewer__facts div { padding: 14px 12px 0 0; }
.viewer__facts div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.viewer__facts dt { margin: 0 0 8px; font: 500 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
.viewer__facts dd { margin: 0; font-size: 14.5px; line-height: 1.35; }

/* Touch screens and narrow windows: the viewer sticks above the list. */
@media (max-width: 1000px), (hover: none) {
  .menu--viewer .menu__body { grid-template-columns: minmax(0, 1fr); }
  .menu--viewer .viewer {
    order: -1; z-index: 2;
    top: var(--nav-h);
    margin: 0 calc(var(--gutter) * -1);
    padding: 12px var(--gutter) 14px;
    background: var(--porcelain);
    border-bottom: 1px solid var(--line);
  }
  .menu--viewer .viewer__screen { aspect-ratio: 16 / 10; max-height: 32svh; width: 100%; }
  .menu--viewer .viewer__meta { display: flex; align-items: baseline; gap: 14px; padding-top: 12px; }
  .menu--viewer .viewer__name { order: -1; margin: 0; font-size: 24px; }
  .menu--viewer .viewer__count { margin-left: auto; }
  .menu--viewer .viewer__kind, .menu--viewer .viewer__facts { display: none; }
  .menu--viewer .menu__list a { grid-template-columns: 30px minmax(0, 1fr); }
  .menu--viewer .menu__no { display: block; }
  .menu--viewer .menu__arrow { display: none; }
  .viewer__tag { top: 12px; padding: 6px 9px 5px; font-size: 9.5px; }
  .viewer__tag--before { left: 12px; }
  .viewer__tag--after { right: 12px; }
  .viewer__readout { right: 16px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer__img, .viewer__tag { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   WALK — scroll-scrubbed clinic walkthrough
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Static composition (default) ── */
.walk { position: relative; background: var(--ivory); }
.walk__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  padding: 0 var(--gutter) clamp(88px, 11vw, 160px);
  max-width: 1500px; margin: 0 auto;
}
.walk__intro { order: -1; }
.walk__intro h2 { max-width: 11ch; }
.walk__intro > p:last-child { max-width: 30rem; margin: 22px 0 0; color: var(--ink-soft); }
.walk__film { position: relative; aspect-ratio: 864 / 496; max-height: calc(100svh - var(--nav-h) - 96px); overflow: hidden; background: #d9cfc2; }
.walk__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.walk__canvas { display: none; }
.walk__plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.walk__acts { display: contents; list-style: none; margin: 0; padding: 0; }
.plate { border-top: 1px solid var(--line); padding-top: 18px; }
.plate__kicker { margin: 0 0 12px; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.plate h3 { font: 500 clamp(26px, 2.4vw, 38px)/1.04 var(--serif); letter-spacing: -.015em; margin: 0 0 10px; }
.plate > p:not(.plate__kicker) { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.walk .plate > p.walk__words { font: italic 500 clamp(20px, 1.8vw, 26px)/1.2 var(--serif); color: var(--char); margin: 4px 0 20px; }
.walk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.walk__actions .text-link { margin-top: 0; }
.walk__rail, .walk__cue { display: none; }

/* ── Live, pinned walkthrough ── */
.walk.is-live .walk__track { height: 430svh; }
.walk.is-live .walk__stage {
  --intro: 1; --a1: 0; --a2: 0; --a3: 0; --close: 0; --rail: 0; --cue: 1; --fs: .9; --dk: 0;
  position: sticky; top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  max-width: none; margin: 0; padding: 0; gap: 0;
  display: block;
  overflow: hidden;
  background: color-mix(in srgb, var(--char) calc(var(--dk) * 100%), var(--ivory));
}
.walk.is-live .walk__film {
  position: absolute; inset: 0; aspect-ratio: auto; max-height: none;
  transform: scale(var(--fs));
  transform-origin: 50% 50%;
}
.walk.is-live .walk__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.walk.is-live .walk__film.has-frames .walk__poster { visibility: hidden; }
/* Opening scrim: light, left-weighted, only while the intro is on screen. */
.walk.is-live .walk__film::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 90% at 18% 52%, rgba(245, 242, 236, .92) 0%, rgba(245, 242, 236, .62) 38%, rgba(245, 242, 236, 0) 70%);
  opacity: var(--intro);
}

.walk.is-live .walk__intro {
  position: absolute; z-index: 2;
  left: var(--gutter); top: 50%;
  width: min(640px, 52%);
  opacity: var(--intro);
  transform: translate3d(0, calc(-50% - (1 - var(--intro)) * 40px), 0);
  pointer-events: none;
}
.walk.is-live .walk__intro h2 { font-size: clamp(50px, min(6.4vw, 12vh), 112px); }
.walk.is-live .walk__intro > p:last-child { color: var(--char); }

.walk.is-live .walk__plates {
  position: absolute; z-index: 3;
  left: var(--gutter); bottom: clamp(24px, 6vh, 64px);
  width: min(440px, calc(100% - 2 * var(--gutter)));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  pointer-events: none;
}
.walk.is-live .plate {
  grid-area: 1 / 1; align-self: end;
  border: 0;
  padding: clamp(22px, 2.2vw, 32px);
  background: rgba(245, 242, 236, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 24px 60px -30px rgba(25, 24, 23, .45);
  opacity: var(--o);
  transform: translate3d(0, calc((1 - var(--o)) * 22px), 0);
  visibility: hidden;
}
.walk.is-live .plate.is-on { visibility: visible; }
.walk.is-live .act:nth-child(1) { --o: var(--a1); }
.walk.is-live .act:nth-child(2) { --o: var(--a2); }
.walk.is-live .act:nth-child(3) { --o: var(--a3); }
.walk.is-live .walk__close { --o: var(--close); }
.walk.is-live .walk__close.is-on { pointer-events: auto; }
.walk.is-live .plate h3 { font-size: clamp(28px, 2.6vw, 42px); }

.walk.is-live .walk__rail {
  display: grid; position: absolute; z-index: 3;
  right: var(--gutter); top: 50%; transform: translateY(-50%);
  grid-template-columns: auto 1px; column-gap: 14px; row-gap: 14px;
  padding: 18px 18px 18px 20px;
  background: rgba(245, 242, 236, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: calc(1 - var(--close));
  pointer-events: none;
}
.walk__rail-bar { grid-column: 2; grid-row: 1 / span 5; position: relative; background: var(--line); }
.walk__rail-bar span { position: absolute; inset: 0; background: var(--char); transform-origin: 50% 0; transform: scaleY(var(--rail)); }
.walk__rail-step { grid-column: 1; justify-self: end; font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--char); }
.walk__rail-step:nth-child(2) { grid-row: 1; opacity: calc(.38 + .62 * var(--intro)); }
.walk__rail-step:nth-child(3) { grid-row: 2; opacity: calc(.38 + .62 * var(--a1)); }
.walk__rail-step:nth-child(4) { grid-row: 3; opacity: calc(.38 + .62 * var(--a2)); }
.walk__rail-step:nth-child(5) { grid-row: 4; opacity: calc(.38 + .62 * var(--a3)); }
.walk__rail-step:nth-child(6) { grid-row: 5; opacity: calc(.38 + .62 * var(--close)); }

.walk.is-live .walk__cue {
  display: flex; position: absolute; z-index: 3;
  left: 50%; bottom: clamp(18px, 4vh, 36px); transform: translateX(-50%);
  align-items: center; gap: 14px;
  padding: 9px 14px; background: rgba(245, 242, 236, .82);
  font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--char);
  white-space: nowrap;
  opacity: var(--cue);
  pointer-events: none;
}
.walk__cue i { position: relative; display: block; width: 40px; height: 1px; overflow: hidden; background: var(--sand); }
.walk__cue i::after { content: ""; position: absolute; inset: 0; background: var(--char); transform: translateX(-100%); animation: cue 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }

@media (max-width: 800px) {
  .walk.is-live .walk__track { height: 360svh; }
  .walk.is-live .walk__film::after {
    background: linear-gradient(to bottom, rgba(245, 242, 236, .94) 0%, rgba(245, 242, 236, .75) 42%, rgba(245, 242, 236, 0) 72%);
  }
  .walk.is-live .walk__intro { top: clamp(28px, 7vh, 64px); width: auto; right: var(--gutter); transform: translate3d(0, calc((1 - var(--intro)) * -32px), 0); }
  .walk.is-live .walk__intro h2 { font-size: clamp(44px, min(12vw, 8vh), 72px); }
  .walk.is-live .walk__plates { left: 16px; right: 16px; width: auto; bottom: 16px; }
  .walk.is-live .plate > p:not(.plate__kicker):not(.walk__words) { font-size: 14px; }
  .walk.is-live .walk__rail {
    top: auto; bottom: 0; left: 0; right: 0; transform: none;
    display: block; padding: 0; height: 2px; background: var(--line);
  }
  .walk.is-live .walk__rail-bar { position: absolute; inset: 0; background: transparent; }
  .walk.is-live .walk__rail-bar span { transform-origin: 0 50%; transform: scaleX(var(--rail)); }
  .walk.is-live .walk__rail-step { display: none; }
  .walk.is-live .walk__cue { bottom: 28px; }
}
/* ══════════════════════════════════════════════════════════════════════════
   DOCTOR CARD (shared by the homepage strip and the team page)
   ══════════════════════════════════════════════════════════════════════════ */

.doc { display: block; }
.doc__photo { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand); }
.doc__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; transition: transform 1.4s var(--ease); }
.js .doc[data-reveal] { transform: none; }
.js .doc[data-reveal] .doc__photo { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease) var(--d, 0ms); }
.js .doc[data-reveal] .doc__photo img { transform: scale(1.14); }
.js .doc[data-reveal].is-in .doc__photo { clip-path: inset(0 0 0 0); }
.js .doc[data-reveal].is-in .doc__photo img { transform: scale(1); }
@media (hover: hover) { .js .doc[data-reveal].is-in:hover .doc__photo img { transform: scale(1.04); } }
.doc__role { display: block; margin: 20px 0 8px; font: 500 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
.doc__name { display: block; font: 500 clamp(26px, 2.3vw, 36px)/1.05 var(--serif); letter-spacing: -.015em; }
.doc:hover .doc__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }


/* ══════════════════════════════════════════════════════════════════════════
   WINDOW HERO — the homepage stage, generalised for every inner page
   A photo sits beside the headline; scrolling opens it to the full stage,
   scans in the "before" photo when the page has a real case, lays the
   page's key facts over it as an instrument readout, and hands off on a
   framed picture. Static by default; site.js adds .is-live.
   ══════════════════════════════════════════════════════════════════════════ */

.wh { position: relative; background: var(--ivory); }
.wh__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas: "copy slot" "copy note";
  gap: 0 clamp(32px, 5vw, 80px);
  padding: clamp(40px, 8vh, 100px) var(--gutter) clamp(64px, 10vh, 110px);
  align-items: center;
}
.wh__copy { grid-area: copy; }
.wh__title {
  font: 500 clamp(52px, 6.6vw, 118px)/.88 var(--serif);
  font-size: clamp(50px, min(6.6vw, 12.5vh), 118px);
  letter-spacing: -.04em;
  margin: 0 0 clamp(20px, 3vh, 32px);
}
.wh__lede { max-width: 32rem; margin: 0 0 clamp(24px, 4vh, 36px); color: var(--ink-soft); font-size: clamp(15px, 1.1vw, 17px); }
.wh__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.wh__actions .text-link { margin-top: 0; }
.wh__stats {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin: clamp(28px, 5vh, 48px) 0 0; padding: 0;
  font: 500 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe);
}
.wh__stats li { display: flex; align-items: center; gap: 10px; }
.wh__stats li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sand); }

.wh__slot, .wh__cue, .wh__readout, .wh__wipe, .wh__scan, .wh__tag { display: none; }

.wh__frame {
  grid-area: slot;
  position: relative;
  margin: 0;
  aspect-ratio: var(--ar, 16 / 10);
  max-width: var(--fmax, none);
  overflow: hidden;
  background: var(--sand);
}
.wh__media { position: absolute; inset: 0; transform-origin: 50% 50%; }
.wh__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.wh__note {
  grid-area: note; align-self: start;
  position: relative; z-index: 2;
  margin: 12px 0 0;
  font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--taupe);
  pointer-events: none;
}

/* ── Live ── */
.wh.is-live .wh__track { height: 330svh; }
.wh.is-live .wh__stage {
  --fw: min(calc(100cqw - 48px), calc((100cqh - 48px) * var(--ar, 1.6)), var(--fmax, 100000px));
  --fh: calc(var(--fw) / var(--ar, 1.6));
  --copy: 1; --cut: 1; --scan: 0; --rd: 0; --r1: 0; --r2: 0; --r3: 0; --cue: 1; --ta: 0; --tb: 0;
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  container-type: size;
  overflow: hidden;
  padding: 0;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "copy slot";
}
.wh.is-live .wh__copy {
  align-self: center;
  padding: 0 clamp(24px, 3.4vw, 56px) 0 var(--gutter);
  opacity: var(--copy);
  transform: translate3d(0, calc((1 - var(--copy)) * -56px), 0);
}
.wh.is-live .wh__copy.is-gone { visibility: hidden; }
.wh.is-live .wh__slot { display: block; grid-area: slot; align-self: stretch; margin: clamp(16px, 3vh, 28px) clamp(16px, 2vw, 28px) clamp(16px, 3vh, 28px) 0; }
.wh.is-live .wh__frame,
.wh.is-live .wh__readout { grid-area: auto; }
.wh.is-live .wh__frame {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--fw); height: var(--fh);
  max-width: none;
  aspect-ratio: auto;
  margin: calc(var(--fh) / -2) 0 0 calc(var(--fw) / -2);
  transform-origin: 50% 50%;
  z-index: 1;
}
.wh.is-live .wh__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(22, 19, 17, .5) 0%, rgba(22, 19, 17, 0) 45%);
  opacity: var(--rd);
}
/* The before photo enters from the left: before left of the line, after right. */
.wh.is-live .wh__wipe {
  display: block; position: absolute; inset: 0; overflow: hidden;
  transform: translate3d(calc(var(--cut) * -100%), 0, 0);
}
.wh.is-live .wh__wipe .wh__img { transform: translate3d(calc(var(--cut) * 100%), 0, 0); }
.wh.is-live .wh__scan {
  display: block; position: absolute; inset: 0; pointer-events: none;
  transform: translate3d(calc((1 - var(--cut)) * 100%), 0, 0);
  opacity: var(--scan);
}
.wh__scan::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: #fff;
  box-shadow: 0 0 18px 4px rgba(255, 255, 255, .55), 0 0 60px 14px rgba(255, 255, 255, .18);
}
.wh.is-live .wh__tag {
  display: block; position: absolute; top: clamp(14px, 2.2vw, 26px); z-index: 2;
  padding: 7px 11px 6px;
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--char); background: rgba(245, 242, 236, .9);
}
.wh__tag--before { left: clamp(14px, 2.2vw, 26px); opacity: var(--tb); }
.wh__tag--after { right: clamp(14px, 2.2vw, 26px); opacity: var(--ta); }
.wh.is-live .wh__note {
  grid-area: slot; align-self: end; justify-self: start;
  color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
  margin: 0 0 calc(clamp(16px, 3vh, 28px) + 16px) 18px;
  opacity: calc(var(--copy) * var(--copy));
}

/* Instrument readout: the page's key facts, laid over the open photo. */
.wh.is-live .wh__readout {
  display: grid; position: absolute; z-index: 3;
  left: calc(50% - var(--fw) / 2 + clamp(16px, 2.4vw, 40px));
  bottom: calc(50% - var(--fh) / 2 + clamp(16px, 2.4vw, 40px));
  max-width: calc(var(--fw) - 2 * clamp(16px, 2.4vw, 40px));
  grid-template-columns: repeat(3, auto);
  margin: 0;
  background: rgba(245, 242, 236, .92);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 24px 60px -30px rgba(25, 24, 23, .5);
  opacity: var(--rd);
  transform: translate3d(0, calc((1 - var(--rd)) * 20px), 0);
  pointer-events: none;
}
.wh__readout div { padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.8vw, 28px); border-left: 1px solid var(--line); min-width: 0; }
.wh__readout div:first-child { border-left: 0; }
.wh__readout div:nth-child(1) { opacity: var(--r1); }
.wh__readout div:nth-child(2) { opacity: var(--r2); }
.wh__readout div:nth-child(3) { opacity: var(--r3); }
.wh__readout dt { margin: 0 0 8px; font: 500 9.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); white-space: nowrap; }
.wh__readout dd { margin: 0; font: 500 clamp(19px, 1.7vw, 28px)/1.1 var(--serif); letter-spacing: -.01em; color: var(--char); }

.wh.is-live .wh__cue {
  display: flex; position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(18px, 4vh, 36px);
  align-items: center; gap: 14px;
  font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe);
  opacity: var(--cue);
  pointer-events: none;
}
.wh__cue i { position: relative; display: block; width: 56px; height: 1px; overflow: hidden; background: var(--sand); }
.wh__cue i::after { content: ""; position: absolute; inset: 0; background: var(--char); transform: translateX(-100%); animation: cue 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }

@media (max-width: 1000px) {
  .wh__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "slot" "note"; }
  .wh__frame { margin-top: 32px; aspect-ratio: 6 / 5; max-width: none; }

  .wh.is-live .wh__track { height: 300svh; }
  .wh.is-live .wh__stage {
    --fw: min(calc(100cqw - 32px), calc(54cqh * 6 / 5));
    --fh: calc(var(--fw) * 5 / 6);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "copy" "slot";
  }
  .wh.is-live .wh__copy { align-self: start; padding: clamp(20px, 4.5vh, 44px) var(--gutter) 0; }
  .wh.is-live .wh__slot { margin: clamp(16px, 2.6vh, 26px) 16px 16px; }
  .wh.is-live .wh__title { font-size: clamp(40px, min(11vw, 7.4vh), 76px); }
  .wh.is-live .wh__lede { margin-bottom: clamp(16px, 2.6vh, 26px); }
  .wh.is-live .wh__stats { display: none; }
  .wh.is-live .wh__frame { top: 16px; margin-top: 0; }
  .wh.is-live .wh__note { margin: 0 0 32px 32px; }
  .wh.is-live .wh__readout {
    left: 16px; right: 16px; bottom: auto; max-width: none;
    top: calc(16px + var(--fh) + 16px);
    grid-template-columns: minmax(0, 1fr);
    background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .wh__readout div { border-left: 0; border-top: 1px solid var(--line); padding: 14px 4px; }
  .wh.is-live .wh__readout dd { font-size: clamp(24px, 6.4vw, 32px); }
  .wh.is-live .wh__cue { display: none; }
}
@media (max-width: 1000px) and (max-height: 700px) {
  .wh.is-live .wh__actions .text-link { display: none; }
  .wh.is-live .wh__lede { font-size: 14px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   INNER PAGES — the shared components from styles.css, redrawn in the
   homepage language. Everything below is scoped to body.v2.
   ══════════════════════════════════════════════════════════════════════════ */

.v2 { --wrap: max(var(--gutter), calc((100% - 1320px) / 2)); }

/* One-shot reveals for existing markup (the selectors match site.js AUTO). */
.js .v2 :is(.sec-head, .statement > *, .facts > p, .fact, .checklist li, :not([data-timeline]) > .steps article, .quote, .media-card, .plan, .ba-case, .results .grid3 > .card, .gallery-category .card, .faq details, .link-row a, .smile-grid figure, .short, .media-frame, .experience-grid > div, .history-paragraphs p, .doctor > div, .cta > *, .contact > div, .contact form, .map-frame, .photo-band, .v2-head > *) {
  transition: opacity .9s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms);
}
.js .v2 :is(.sec-head, .statement > *, .facts > p, .fact, .checklist li, :not([data-timeline]) > .steps article, .quote, .media-card, .plan, .ba-case, .results .grid3 > .card, .gallery-category .card, .faq details, .link-row a, .smile-grid figure, .short, .media-frame, .experience-grid > div, .history-paragraphs p, .doctor > div, .cta > *, .contact > div, .contact form, .map-frame, .photo-band, .v2-head > *):not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}
.v2 .fade-up { animation: none; opacity: 1; }

/* Sections share one measure and rhythm. */
.v2 .statement,
.v2 .content,
.v2 .results,
.v2 .facts,
.v2 .map-band { max-width: none; padding-left: var(--wrap); padding-right: var(--wrap); }
.v2 .statement { padding-top: clamp(88px, 11vw, 170px); padding-bottom: clamp(32px, 4vw, 56px); }
.v2 .content, .v2 .results { padding-top: clamp(88px, 11vw, 170px); padding-bottom: clamp(88px, 11vw, 170px); }
.v2 .statement h2, .v2 .results h2 { font: 500 clamp(52px, 6.8vw, 112px)/.9 var(--serif); letter-spacing: -.035em; margin: 0 0 24px; }
.v2 .statement > p:not(.eyebrow) { max-width: 34rem; color: var(--ink-soft); }
.v2 .sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
.v2 .sec-title { font: 500 clamp(44px, 5.4vw, 88px)/.94 var(--serif); letter-spacing: -.03em; margin: 0 0 22px; }

/* One explanatory picture on a treatment page: an illustration or a scan
   that shows the treatment itself, beside a short explanation. */
.v2 .explain {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 88px); align-items: center;
}
.v2 .explain .sec-head { margin-bottom: 0; }
.v2 .explain__text > p:last-child { max-width: 34rem; margin: 0; color: var(--ink-soft); }
.v2 .explain__figure { margin: 0; }
.v2 .explain__figure img { display: block; width: 100%; height: auto; background: var(--sand); }
.v2 .explain__figure figcaption {
  margin-top: 12px;
  font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--taupe);
}
@media (max-width: 800px) { .v2 .explain { grid-template-columns: minmax(0, 1fr); } }
.v2 .sec-lead { max-width: 36rem; font-size: clamp(15px, 1.15vw, 17px); }
.v2 .text-link { margin-top: clamp(24px, 3vw, 36px); }

/* Quick answer: the answer reads as a statement, the facts as a readout. */
.v2 .facts { padding-bottom: clamp(88px, 11vw, 170px); }
.v2 .facts > p:not(.eyebrow) {
  max-width: 40ch;
  margin: 0 0 clamp(48px, 6vw, 88px);
  font: 500 clamp(26px, 2.7vw, 42px)/1.22 var(--serif);
  letter-spacing: -.012em;
  color: var(--char);
}
.v2 .facts > p strong { font-weight: 600; }
.v2 .facts-grid {
  counter-reset: fact;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 48px);
  background: none; border: 0;
}
.v2 .fact { counter-increment: fact; background: none; padding: 22px 0 30px; border-top: 1px solid var(--line); }
.v2 .fact span { display: flex; gap: 12px; margin-bottom: 14px; font: 500 10px/1.3 var(--mono); letter-spacing: .16em; color: var(--taupe); }
.v2 .fact span::before { content: counter(fact, decimal-leading-zero); color: var(--char); }
.v2 .fact strong { font: 500 clamp(26px, 2.4vw, 38px)/1.06 var(--serif); letter-spacing: -.015em; }

/* Dark feature: the heading holds while the list reads past it. */
.v2 .feature {
  padding: clamp(96px, 12vw, 180px) var(--wrap);
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 140px);
  align-items: start;
}
.v2 .feature > div:first-child { position: sticky; top: calc(var(--nav-h) + 8vh); }
.v2 .feature h2 { font: 500 clamp(48px, 6vw, 100px)/.9 var(--serif); letter-spacing: -.035em; color: var(--ivory); margin: 0; }
.v2 .feature .eyebrow { color: var(--on-dark-soft); }
.v2 .feature > div > p { color: var(--on-dark-soft); margin: 0 0 28px; font-size: clamp(15px, 1.15vw, 17px); }
.v2 .dark a:focus-visible { outline-color: var(--ivory); }

.v2 .checklist { counter-reset: chk; margin-bottom: 40px; }
.v2 .checklist li { counter-increment: chk; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; padding: 20px 0 22px; }
.v2 .checklist li::before { content: counter(chk, decimal-leading-zero); grid-row: 1 / span 2; padding-top: 7px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--taupe); }
.v2 .checklist li > * { grid-column: 2; }
.v2 .checklist b { font: 500 clamp(21px, 1.8vw, 27px)/1.2 var(--serif); letter-spacing: -.005em; margin: 0; }
.v2 .checklist p { margin: 6px 0 0; }
.v2 .dark .checklist b { font-size: clamp(21px, 1.8vw, 27px); }

/* Step cards (unordered benefits). */
.v2 .steps { gap: clamp(20px, 2.4vw, 40px); margin-top: 0; }
.v2 .steps article { border-top: 1px solid var(--line); padding-top: 22px; }
.v2 .steps b { display: block; margin-bottom: 18px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--taupe); }
.v2 .steps h3 { font: 500 clamp(24px, 2vw, 32px)/1.06 var(--serif); letter-spacing: -.01em; margin: 0 0 10px; }
.v2 .steps p { font-size: 14.5px; color: var(--ink-soft); }

/* Process as a timeline: heading holds on the left, steps light up in turn. */
.v2 [data-timeline] {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 140px); align-items: start;
}
.v2 [data-timeline] > .sec-head { position: sticky; top: calc(var(--nav-h) + 8vh); margin: 0; }
.v2 [data-timeline] .steps { --fill: 0; display: block; position: relative; padding: 2vh 0 10vh; }
.v2 [data-timeline] .steps::before,
.v2 [data-timeline] .steps::after {
  content: ""; position: absolute; left: 19px; top: calc(2vh + 20px); bottom: calc(10vh + 20px); width: 1px;
  background: var(--line);
}
.v2 [data-timeline] .steps::after { background: var(--char); transform-origin: 50% 0; transform: scaleY(var(--fill)); }
.v2 [data-timeline] .steps article {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 32px);
  border: 0; padding: 0 0 clamp(64px, 14vh, 160px);
  transition: opacity .6s ease;
}
.v2 [data-timeline] .steps article:last-child { padding-bottom: 0; }
.js .v2 [data-timeline] .steps article { opacity: .3; }
.js .v2 [data-timeline] .steps article.is-active { opacity: 1; }
.v2 [data-timeline] .steps b {
  grid-row: 1 / span 2; position: relative; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px; margin: 0; border-radius: 50%;
  border: 1px solid rgba(25, 24, 23, .22); background: var(--ivory); color: var(--char);
  transition: background-color .5s, color .5s, border-color .5s;
}
.js .v2 [data-timeline] .steps article.is-active b { background: var(--char); color: var(--ivory); border-color: var(--char); }
.v2 [data-timeline] .steps article > :not(b) { grid-column: 2; }
.v2 [data-timeline] .steps h3 { font-size: clamp(28px, 2.8vw, 44px); margin: 4px 0 12px; }
.v2 [data-timeline] .steps p { font-size: 16px; max-width: 38ch; }

/* Results: before/after sliders in the homepage compare language. */
.v2 .results > p:not(.eyebrow) { max-width: 36rem !important; }
.v2 .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin: clamp(36px, 5vw, 64px) 0 0; }
.v2 .card { border-radius: 0; }
.v2 .ba-case .card { aspect-ratio: 16 / 10; }
.v2 .ba-case > p { margin: 14px 0 0; font: 500 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
.v2 .ba-slider { touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.v2 .ba-slider img { -webkit-user-drag: none; }
.v2 .ba-slider::after { width: 1px; }
.js .v2 .ba-slider input[type="range"] { top: auto; height: 2px; opacity: 0; pointer-events: none; }
.v2 .ba-slider:has(input:focus-visible) { outline: 2px solid var(--char); outline-offset: 4px; }
.v2 .slider-btn {
  width: 50px; height: 50px;
  background: rgba(245, 242, 236, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191817' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.v2 .slider-btn::after { content: none; }
.v2 .ba-label {
  top: clamp(12px, 1.6vw, 20px);
  padding: 7px 11px 6px; border-radius: 0;
  background: rgba(245, 242, 236, .9); color: var(--char);
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.v2 .ba-label, .compare__tag { transition: opacity .25s ease; }
.v2 .ba-label.is-hidden, .compare__tag.is-hidden { opacity: 0; }
.v2 .ba-label.left { left: clamp(12px, 1.6vw, 20px); }
.v2 .ba-label.right { right: clamp(12px, 1.6vw, 20px); }

/* Photo grids: staggered, opened from below. */
.v2 .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); align-items: start; }
.v2 .photo-grid img { aspect-ratio: 4 / 5; transition: clip-path 1.2s var(--ease) var(--d, 0ms); }
.v2 .photo-grid img:nth-child(3n + 2) { margin-top: clamp(28px, 5vw, 80px); }
.js .v2 .photo-grid img:not(.is-in) { clip-path: inset(100% 0 0 0); }
.js .v2 .photo-grid img.is-in { clip-path: inset(0 0 0 0); }

/* FAQ */
.v2 .faq { max-width: 980px; counter-reset: faq; }
.v2 .faq details { counter-increment: faq; overflow: hidden; }
.v2 .faq summary { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 28px 56px 28px 0; font: 500 clamp(22px, 2.2vw, 30px)/1.2 var(--serif); }
.v2 .faq summary::before { content: counter(faq, decimal-leading-zero); padding-top: .55em; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--taupe); }
.v2 .faq summary::after { content: ""; right: 6px; width: 16px; height: 16px; background: linear-gradient(var(--char), var(--char)) center / 16px 1px no-repeat, linear-gradient(var(--char), var(--char)) center / 1px 16px no-repeat; transition: transform .45s var(--ease); }
.v2 .faq details[open] summary::after { content: ""; transform: translateY(-50%) rotate(45deg); }
.v2 .faq summary:focus-visible { outline: 2px solid var(--char); outline-offset: 4px; }
.v2 .faq details > p { margin: -4px 0 30px 48px; font-size: 15.5px; }

/* Booking */
.v2 .contact {
  padding: clamp(96px, 12vw, 180px) var(--wrap);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
  min-height: 0;
}
.v2 .contact > div { position: sticky; top: calc(var(--nav-h) + 6vh); }
.v2 .contact ul { margin: 32px 0 0; border-top-color: var(--line); }
.v2 .contact li { border-bottom-color: var(--line); font-size: 13.5px; color: var(--ink-soft); }
.v2 .contact li a { color: var(--char); border-bottom: 1px solid var(--sand); }
.v2 .contact form {
  gap: 24px;
  padding: clamp(24px, 3.2vw, 52px);
  background: var(--porcelain);
  border-top: 1px solid var(--char);
}
.v2 .contact label { font: 500 10px/1.3 var(--mono); letter-spacing: .14em; color: var(--taupe); }
.v2 .contact input,
.v2 .contact select,
.v2 .contact textarea {
  margin-top: 6px;
  padding: 12px 0 10px;
  border: 0; border-bottom: 1px solid rgba(25, 24, 23, .24); border-radius: 0;
  background: transparent;
  font: 16px/1.4 Inter, Arial, sans-serif; letter-spacing: 0; text-transform: none; color: var(--char);
  transition: border-color .3s, box-shadow .3s;
}
.v2 .contact select {
  -webkit-appearance: none; appearance: none; padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23191817' stroke-width='1.2'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 4px center / 11px no-repeat;
}
.v2 .contact textarea { resize: vertical; }
.v2 .contact input:focus,
.v2 .contact select:focus,
.v2 .contact textarea:focus { outline: none; border-bottom-color: var(--char); box-shadow: 0 1px 0 var(--char); }
.v2 .contact input::placeholder, .v2 .contact textarea::placeholder { color: #aaa299; }
.v2 .contact .btn { justify-self: start; align-self: flex-start; }
.v2 .service-detail { border: 0; border-left: 1px solid var(--char); background: var(--ivory); }

/* Find us */
.v2 .map-band { padding-bottom: clamp(88px, 11vw, 170px); }
.v2 .map-frame { height: clamp(320px, 40vw, 540px); border: 0; filter: grayscale(.92) sepia(.08) contrast(1.02); transition: filter .8s ease; }
/* Contact page: the clinic photograph between the form and the map */
.v2 .photo-band { padding-left: var(--wrap); padding-right: var(--wrap); }
.v2 .photo-band img { display: block; width: 100%; height: auto; }
.v2 .map-frame:hover, .v2 .map-frame:focus { filter: none; }

/* Explore further */
.v2 .link-row a {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 18px 13px;
  font: 500 10px/1 var(--mono); letter-spacing: .14em;
  border-color: var(--line); color: var(--char);
}
.v2 .link-row a::after { content: "→"; font-family: Inter, sans-serif; transition: transform .4s var(--ease); }
.v2 .link-row a:hover { background: var(--char); color: var(--ivory); border-color: var(--char); }
.v2 .link-row a:hover::after { transform: translateX(4px); }

/* Closing call: the smile arc returns above the line. */
.v2 .cta { padding: clamp(110px, 14vw, 220px) var(--wrap); }
.v2 .cta::before {
  content: ""; display: block;
  width: min(520px, 72%); height: clamp(26px, 3.6vw, 56px);
  margin: 0 auto clamp(40px, 5vw, 60px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 8Q600 92 1200 8' fill='none' stroke='%239a8e80' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.v2 .cta h2 { font: 500 clamp(54px, 7.4vw, 120px)/.9 var(--serif); letter-spacing: -.035em; margin: 0 0 clamp(32px, 4vw, 52px); }
.v2 .dark.cta h2 { color: var(--ivory); }

/* Scroll-linked opening for dark bands: they arrive as a frame that widens. */
.v2 [data-open] { clip-path: inset(0 calc((1 - var(--open, 1)) * 5vw) round 0); }

/* Doctor / feature rows with a picture */
.v2 .doctor { padding: clamp(96px, 12vw, 180px) var(--wrap); gap: clamp(40px, 8vw, 140px); }
.v2 .doctor.reverse { background: var(--porcelain); }
.v2 .doctor h2 { font: 500 clamp(48px, 6vw, 100px)/.9 var(--serif); letter-spacing: -.035em; margin: 0 0 24px; }
.v2 .doctor img { display: block; }
.v2 .doctor .portrait { min-height: 0; aspect-ratio: 4 / 5; }

/* Quotes */
.v2 .quote-grid { gap: clamp(16px, 2vw, 28px); }
.v2 .quote { background: var(--porcelain); border: 0; border-top: 1px solid var(--char); padding: clamp(24px, 2.6vw, 40px); }
.v2 .quote .stars { font: 500 11px/1 var(--mono); letter-spacing: .3em; color: var(--char); }
.v2 .quote blockquote { font: italic 500 clamp(20px, 1.7vw, 25px)/1.4 var(--serif); }
.v2 .quote cite { font: 500 10px/1.3 var(--mono); letter-spacing: .14em; color: var(--taupe); }

/* Media */
.v2 .media-cards { gap: clamp(16px, 2vw, 28px); }
.v2 .media-card { background: none; border: 0; }
.v2 .media-card .m { aspect-ratio: 4 / 5; }
.v2 .media-card .t { padding: 20px 0 0; }
.v2 .media-card .num { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--taupe); margin-bottom: 14px; }
.v2 .media-card h3 { font: 500 clamp(24px, 2vw, 32px)/1.06 var(--serif); }
.v2 .media-card p { color: var(--ink-soft); }
.v2 .media-frame { background: var(--char); }
.v2 .plans { gap: clamp(16px, 2vw, 28px); }
.v2 .plan { background: var(--porcelain); border: 0; border-top: 1px solid var(--char); }
.v2 .plan .per { font-family: var(--mono); }
.v2 .smile-grid { gap: clamp(16px, 2vw, 32px); }
.v2 .smile-grid figcaption { font: 500 10px/1.3 var(--mono); letter-spacing: .14em; }
.v2 .short { background: var(--char); }

/* Experience grid (four words) */
.v2 .experience-grid { padding: clamp(96px, 12vw, 180px) var(--wrap); gap: 0 clamp(24px, 4vw, 64px); background: var(--char); }
.v2 .experience-grid > div { padding: clamp(24px, 2.6vw, 40px) 0 clamp(40px, 5vw, 72px); border: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.v2 .experience-grid h2 { font: 500 clamp(44px, 5vw, 84px)/.95 var(--serif); letter-spacing: -.03em; color: var(--ivory); margin: 0 0 14px; }
.v2 .experience-grid p { color: var(--on-dark-soft); }
.v2 .experience-grid.compact h2 { font-size: clamp(34px, 3.4vw, 54px); }

/* Generic page heading block (contact, gallery sections) */
.v2 .v2-head { max-width: 1320px; margin: 0 auto clamp(40px, 5vw, 72px); }
.v2 .v2-head h2 { max-width: 14ch; }
.v2 .v2-head > p:not(.eyebrow) { max-width: 36rem; margin: 22px 0 0; color: var(--ink-soft); }

/* People grid (team page) */
.people { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 6vw, 96px) clamp(20px, 3vw, 48px); align-items: start; }
.people .doc:nth-child(3n + 2) { margin-top: clamp(40px, 7vw, 120px); }
@media (max-width: 800px) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people .doc:nth-child(3n + 2) { margin-top: 0; }
  .people .doc:nth-child(2n) { margin-top: clamp(40px, 12vw, 80px); }
}

/* History: the portrait holds while the story lights up paragraph by paragraph */
.story { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 8vw, 140px); align-items: start; padding: clamp(88px, 11vw, 170px) var(--wrap); }
.story__text p { margin: 0 0 clamp(28px, 3vw, 44px); font: 500 clamp(22px, 2.1vw, 32px)/1.3 var(--serif); letter-spacing: -.008em; color: var(--char); }
.story__media { position: sticky; top: calc(var(--nav-h) + 8vh); margin: 0; }
.story__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; display: block; background: var(--sand); }
.story__media figcaption { margin-top: 14px; font: 500 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
@media (max-width: 800px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__media { position: relative; top: 0; order: -1; max-width: 420px; }
}

/* Walkthrough as a page hero (experience page): h1 intro, h2 plate titles */
.walk__intro .walk__h1 { font: 500 clamp(52px, 6.4vw, 112px)/.9 var(--serif); letter-spacing: -.035em; margin: 0; }
.walk.is-live .walk__intro .walk__h1 { font-size: clamp(50px, min(6.4vw, 12vh), 112px); }
.v2 .plate .plate__title { font: 500 clamp(26px, 2.4vw, 38px)/1.04 var(--serif); letter-spacing: -.015em; margin: 0 0 10px; }
.v2 .walk.is-live .plate .plate__title { font-size: clamp(28px, 2.6vw, 42px); }
@media (max-width: 800px) {
  .walk.is-live .walk__intro .walk__h1 { font-size: clamp(44px, min(12vw, 8vh), 72px); }
}

/* Reviews: one quote is read aloud, word by word, before the grid */
.review-lead { max-width: 30ch; margin: 0; font: italic 500 clamp(32px, 4vw, 64px)/1.12 var(--serif); letter-spacing: -.02em; }
.review-lead__name { margin: 20px 0 clamp(56px, 7vw, 104px); font: 500 10px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }

/* Contact page: the booking section leads */
.v2 .contact.is-lead { padding-top: clamp(48px, 8vw, 120px); }
.v2 .contact.is-lead h1 { font: 500 clamp(56px, 7.2vw, 120px)/.86 var(--serif); letter-spacing: -.04em; margin: 0 0 28px; }
.v2 .contact.is-lead > div > p:not(.eyebrow) { color: var(--ink-soft); max-width: 30rem; }

@media (max-width: 800px) {
  .v2 .facts-grid { grid-template-columns: minmax(0, 1fr); }
  .v2 .feature { grid-template-columns: minmax(0, 1fr); }
  .v2 .feature > div:first-child { position: relative; top: 0; }
  .v2 [data-timeline] { grid-template-columns: minmax(0, 1fr); }
  .v2 [data-timeline] > .sec-head { position: relative; top: 0; }
  .v2 [data-timeline] .steps article { padding-bottom: 12vh; }
  .v2 .grid3 { grid-template-columns: minmax(0, 1fr); }
  .v2 .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2 .photo-grid img:nth-child(3n + 2) { margin-top: 0; }
  .v2 .photo-grid img:nth-child(2n) { margin-top: clamp(24px, 8vw, 56px); }
  .v2 .contact > div { position: relative; top: 0; }
  .v2 .faq summary { grid-template-columns: 36px minmax(0, 1fr); padding-right: 40px; }
  .v2 .faq details > p { margin-left: 36px; }
  .v2 [data-open] { clip-path: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Reduced motion: nothing moves on its own, nothing is pinned.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .v2 { scroll-behavior: auto; }
  .js [data-reveal],
  .js .v2 :is(.sec-head, .statement > *, .facts > p, .fact, .checklist li, :not([data-timeline]) > .steps article, .quote, .media-card, .plan, .ba-case, .results .grid3 > .card, .gallery-category .card, .faq details, .link-row a, .smile-grid figure, .short, .media-frame, .experience-grid > div, .history-paragraphs p, .doctor > div, .cta > *, .contact > div, .contact form, .map-frame, .photo-band, .v2-head > *):not(.is-in) { opacity: 1; transform: none; transition: none; }
  .js .arc-rule[data-reveal], .js .doc[data-reveal] .doc__photo, .js .v2 .photo-grid img:not(.is-in) { clip-path: none; transition: none; }
  .js .doc[data-reveal] .doc__photo img { transform: none; }
  .js .v2 [data-timeline] .steps article { opacity: 1; }
  .wh__cue i::after, .walk__cue i::after { animation: none; }
  .journey__video, .compare__img, .step { transition: none; }
  .v2 [data-open] { clip-path: none; }
}