/* ══════════════════════════════════════════════════════════════════════════
   MINEERS 2.0 — HOMEPAGE
   Loaded only by index.html, after styles.css. Built from the existing
   tokens (ivory / char / taupe / sand, Cormorant Garamond + Inter). One
   addition: IBM Plex Mono for the instrument-style annotations — the
   vocabulary of a smile-design screen (midline, incisal plane, tooth
   numbers), used nowhere else.

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

.home {
  --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) { .home { --nav-h: 76px; } }

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

.home a:focus-visible,
.home 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 home.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); }


/* ══════════════════════════════════════════════════════════════════════════
   1 · HERO
   Composition and motion from the Mineers React site (SmileHero.tsx), set
   in this site's own type and colours. Three real results crossfade in one
   photo stack, which bleeds off the right edge from 1024px and is a 4:5
   frame below that. Everything that moves on scroll derives from --exit
   (0 → 1, written by home.js), so the parting is reversible and never
   re-renders.
   ══════════════════════════════════════════════════════════════════════════ */

.smile {
  --exit: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100svh - var(--nav-h));
  background: var(--ivory);
}
.smile__inner {
  display: flex; flex-direction: column;
  max-width: 1400px;
  min-height: calc(100svh - var(--nav-h));
  margin: 0 auto;
  padding: clamp(12px, 2.5vh, 36px) var(--gutter) clamp(12px, 2vh, 28px);
}

/* The type recedes as the plate parts: it hands the frame over rather than
   merely scrolling away. */
.smile__copy {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  transform: translate3d(0, calc(var(--exit) * -58px), 0);
  opacity: calc(1 - var(--exit) * 1.3);
}
.smile__title { margin: 0; font: 500 44px/.92 var(--serif); letter-spacing: -.035em; }
.smile__eyebrow { display: flex; align-items: center; gap: 12px; }
.smile__rule { flex: none; width: 32px; height: 1px; background: var(--taupe); }
.home .smile__kicker { margin: 0; font-family: Inter, Arial, sans-serif; line-height: 1.5; letter-spacing: .24em; }
.smile__wide { display: none; }
.smile__line { display: block; }
.smile__eyebrow + .smile__line { margin-top: 22px; }
.smile__line--em { font-style: italic; }

.smile__lede { max-width: 30rem; margin: clamp(22px, 3.4vh, 32px) 0 0; font-size: clamp(15px, 1.15vw, 17px); color: var(--ink-soft); }

.smile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin-top: clamp(26px, 4.4vh, 40px); }
.smile__actions .text-link { margin-top: 0; }

.smile__rating {
  display: flex; align-items: center; gap: 12px;
  margin: clamp(24px, 4.4vh, 40px) 0 0;
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--taupe);
}
.smile__stars { display: flex; gap: 3px; }
.smile__stars svg { display: block; fill: var(--char); }

/* ── Photo stack: a contained 4:5 frame below 1024px ── */
.smile__plate {
  position: relative;
  width: 100%; max-width: 440px;
  margin: 32px 0 16px;
  transform: translate3d(calc(var(--exit) * 120px), calc(var(--exit) * 30px), 0);
  opacity: calc(1 - var(--exit) * .95);
}
.smile__stack {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand);
}
.smile__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1);
}
.smile__frame.is-on { opacity: 1; }
.smile__fade { display: none; }

/* Shared scroll-cue sweep (used by the clinic walkthrough cue). */
@keyframes cue { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* Staggered entrance, pure CSS so it can never be left stuck invisible. */
@keyframes smile-rise { from { opacity: 0; transform: translate3d(0, 20px, 0); filter: blur(7px); } }
.smile__rise { animation: smile-rise .95s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 105ms) both; }

@media (min-width: 640px) {
  .smile__eyebrow { gap: 16px; }
  .smile__rule { width: 48px; }
  .smile__wide { display: inline; }
  .smile__title { font-size: 64px; }
  .smile__eyebrow + .smile__line { margin-top: 30px; }
  .smile__plate { margin-top: 40px; }
}

/* ── From 1024px: one large smile bleeding off the right edge ── */
@media (min-width: 1024px) {
  .smile__copy { max-width: 54%; }
  .smile__title { font-size: clamp(52px, 5.4vw, 92px); }

  .smile__plate {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: clamp(300px, 48vw, 780px); max-width: none;   /* wider at the user's request (2026-09-23; was 44vw, 620px) */
    margin: 0;
    transform: translate3d(calc(var(--exit) * 150px), 0, 0) scale(calc(1 + var(--exit) * .05));
    opacity: calc(1 - var(--exit) * .9);
  }
  .smile__plate > .smile__rise { height: 100%; }
  .smile__stack { height: 100%; aspect-ratio: auto; background: none; }
  /* Biased above centre so the teeth stay in frame however the plate crops. */
  .smile__frame { object-position: 52% 40%; }

  /* Feathered edges into the ivory: a hard seam between photograph and
     page reads as a pasted rectangle. */
  .smile__fade { display: block; position: absolute; z-index: 1; pointer-events: none; }
  .smile__fade--left { top: 0; bottom: 0; left: 0; width: 38%; background: linear-gradient(90deg, var(--ivory) 0%, rgba(245, 242, 236, .7) 40%, rgba(245, 242, 236, 0) 100%); }
  .smile__fade--top { top: 0; left: 0; right: 0; height: 112px; background: linear-gradient(180deg, var(--ivory) 0%, rgba(245, 242, 236, 0) 100%); }
  .smile__fade--bottom { bottom: 0; left: 0; right: 0; height: 96px; background: linear-gradient(0deg, var(--ivory) 0%, rgba(245, 242, 236, 0) 100%); }
}


/* ══════════════════════════════════════════════════════════════════════════
   1b · SMILE DESIGN STAGE — the geometry of a smile
   Analysis guides draw over a finished smile, each front tooth is outlined,
   then the lines clear. home.js writes one progress value into custom
   properties; everything below derives from them.
   ══════════════════════════════════════════════════════════════════════════ */

.design { position: relative; background: var(--ivory); }

/* ── Static composition (default) ───────────────────────────────────────── */
.design__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "slot" "note" "chap";
  gap: 0 clamp(32px, 5vw, 80px);
  padding: clamp(48px, 9vh, 110px) var(--gutter) clamp(64px, 10vh, 120px);
  align-items: center;
}

.design__close, .design__slot, .design__rail { display: none; }

.design__frame {
  grid-area: slot;
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #cdb4a8;
}
.design__media { position: absolute; inset: 0; transform-origin: 50% 50%; }
.design__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.design__svg { display: none; }

.design__note {
  grid-area: note; align-self: start;
  position: relative; z-index: 2;
  margin: 12px 0 0;
  font: 500 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--taupe);
  pointer-events: none;
}
.design__chapters { margin-top: clamp(48px, 8vh, 88px); }

.design__chapters { grid-area: chap; }
.design__chapters ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}
.chapter { border-top: 1px solid var(--line); padding-top: 20px; }
.chapter__kicker {
  display: flex; gap: 12px; margin: 0 0 14px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe);
}
.chapter h3 { font: 500 clamp(26px, 2.2vw, 34px)/1.02 var(--serif); letter-spacing: -.015em; margin: 0 0 12px; }
.chapter > p:last-child { margin: 0; font-size: 14px; color: var(--ink-soft); }

/* ── Live, scroll-driven stage ──────────────────────────────────────────── */
.design.is-live .design__track { height: 380svh; }
.design.is-live .design__stage {
  --fw: min(calc(100cqw - 48px), calc((100cqh - 48px) * 16 / 9));
  --fh: calc(var(--fw) * 9 / 16);
  --close: 0; --an: 0; --ds: 0; --ov: 0;
  --chap: 0; --c0: 0; --c1: 0; --c2: 0; --rail: 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";
}

/* The closing line takes the left column as the photo settles into the slot. */
.design.is-live .design__close {
  grid-area: copy;
  align-self: center;
  padding: 0 clamp(24px, 3.4vw, 56px) 0 var(--gutter);
  display: block;
  opacity: var(--close);
  transform: translate3d(0, calc((1 - var(--close)) * 34px), 0);
}
.design.is-live .design__close:not(.is-here) { visibility: hidden; }
.design__close-title {
  font: 500 clamp(50px, 5.8vw, 100px)/.9 var(--serif);
  letter-spacing: -.035em;
  margin: 0 0 clamp(26px, 4vh, 40px);
  max-width: 9ch;
}

.design.is-live .design__slot { display: block; grid-area: slot; align-self: stretch; margin: clamp(16px, 3vh, 28px) clamp(16px, 2vw, 28px) clamp(16px, 3vh, 28px) 0; }

/* Absolutely positioned grid items take their grid area as containing block,
   so the stage-level layers opt out of the grid entirely. */
.design.is-live .design__frame,
.design.is-live .design__chapters { grid-area: auto; }
.design.is-live .design__frame {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--fw);
  height: var(--fh);
  aspect-ratio: auto;
  margin: calc(var(--fh) / -2) 0 0 calc(var(--fw) / -2);
  transform-origin: 50% 50%;
  z-index: 1;
}
/* Legibility scrim for the chapter captions (desktop captions sit on the photo). */
.design.is-live .design__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(22, 19, 17, .72) 0%, rgba(22, 19, 17, .28) 34%, rgba(22, 19, 17, 0) 58%),
    linear-gradient(to right, rgba(22, 19, 17, .35) 0%, rgba(22, 19, 17, 0) 42%);
  opacity: var(--chap);
}

/* ── Smile-design overlay ── */
.design.is-live .design__svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; --u: 1.4; }
.dsd path {
  fill: none;
  stroke: rgba(255, 255, 255, .94);
  stroke-width: calc(1.3px * var(--u));
  stroke-linecap: round;
  stroke-dasharray: 1 1;
}
.dsd text {
  font: 500 calc(10.5px * var(--u))/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(24, 20, 18, .38);
  stroke-width: calc(2.2px * var(--u));
}
.dsd--analyse, .dsd--design { opacity: var(--ov); }
.dsd--analyse path { stroke-dashoffset: calc(1 - var(--an)); }
.dsd--analyse path:first-child { stroke-dasharray: .006 .008; stroke-dashoffset: 0; clip-path: inset(0 0 calc((1 - var(--an)) * 100%) 0); }
.dsd--analyse .dsd__tick { stroke-width: calc(1px * var(--u)); }
/* Guide labels step aside once the teeth start being traced. */
.dsd--analyse text { opacity: clamp(0, min(calc((var(--an) - .55) * 3), calc(1 - var(--ds) * 3)), 1); }

.dsd--design path {
  --k: 0;
  --dp: clamp(0, calc(var(--ds) * 1.6 - var(--k) * .3), 1);
  stroke-dashoffset: calc(1 - var(--dp));
  fill: rgba(255, 255, 255, .16);
  fill-opacity: clamp(0, calc((var(--ds) - .75) * 4), 1);
  stroke-width: calc(1.6px * var(--u));
}
.dsd--design path:nth-of-type(1), .dsd--design path:nth-of-type(6) { --k: 2; }
.dsd--design path:nth-of-type(2), .dsd--design path:nth-of-type(5) { --k: 1; }
.dsd--design text { opacity: clamp(0, calc((var(--ds) - .6) * 3), 1); }

/* The credit belongs to the static layout; the live stage opens full-frame. */
.design.is-live .design__note { display: none; }

/* ── Chapter captions ── */
.design.is-live .design__chapters {
  position: absolute; z-index: 3;
  margin: 0;
  left: calc(50% - var(--fw) / 2 + clamp(24px, 3vw, 52px));
  bottom: calc(50% - var(--fh) / 2 + clamp(24px, 3.4vw, 52px));
  width: min(460px, 42%);
  color: #fff;
  pointer-events: none;
}
.design.is-live .design__chapters ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.design.is-live .chapter {
  grid-area: 1 / 1;
  align-self: end;
  border: 0; padding: 0;
  transform: translate3d(0, calc((1 - var(--o)) * 18px), 0);
  opacity: var(--o);
}
.design.is-live .chapter:nth-child(1) { --o: var(--c0); }
.design.is-live .chapter:nth-child(2) { --o: var(--c1); }
.design.is-live .chapter:nth-child(3) { --o: var(--c2); }
.design.is-live .chapter__kicker { color: rgba(255, 255, 255, .78); }
.design.is-live .chapter__kicker span { color: #fff; }
.design.is-live .chapter h3 { font-size: clamp(32px, 3.2vw, 52px); margin-bottom: 14px; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.design.is-live .chapter > p:last-child { color: rgba(255, 255, 255, .86); font-size: clamp(14px, 1.05vw, 16px); max-width: 38ch; }

/* ── Progress rail ── */
.design.is-live .design__rail {
  display: grid; position: absolute; z-index: 3;
  right: calc(50% - var(--fw) / 2 + clamp(24px, 3vw, 52px));
  bottom: calc(50% - var(--fh) / 2 + clamp(24px, 3.4vw, 52px));
  grid-template-columns: auto 1px; grid-auto-rows: auto;
  column-gap: 14px; row-gap: 14px;
  opacity: var(--chap);
  pointer-events: none;
}
.design__rail-bar { grid-column: 2; grid-row: 1 / span 3; position: relative; background: rgba(255, 255, 255, .28); }
.design__rail-bar span { position: absolute; inset: 0; background: #fff; transform-origin: 50% 0; transform: scaleY(var(--rail)); }
.design__rail-step {
  grid-column: 1; justify-self: end;
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.design__rail-step:nth-child(2) { opacity: calc(.42 + .58 * var(--c0)); grid-row: 1; }
.design__rail-step:nth-child(3) { opacity: calc(.42 + .58 * var(--c1)); grid-row: 2; }
.design__rail-step:nth-child(4) { opacity: calc(.42 + .58 * var(--c2)); grid-row: 3; }


/* ── Tablet / phone ── */
@media (max-width: 1000px) {
  .design__chapters ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design__frame { aspect-ratio: 6 / 5; }
}
@media (max-width: 520px) {
  .design__chapters ol { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  .design.is-live .design__track { height: 350svh; }
  .design.is-live .design__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";
  }
  .design.is-live .design__close { align-self: start; padding: clamp(20px, 4.5vh, 44px) var(--gutter) 0; }
  .design.is-live .design__close-title { font-size: clamp(44px, 12vw, 76px); margin-bottom: 22px; }
  .design.is-live .design__slot { margin: clamp(18px, 3vh, 28px) 16px 16px; }
  .design.is-live .design__frame { top: 16px; margin-top: 0; }
  .design.is-live .design__frame::after { display: none; }

  .design.is-live .design__chapters {
    left: var(--gutter); right: var(--gutter); width: auto;
    top: calc(16px + var(--fh) + 58px); bottom: auto;
    color: var(--char);
  }
  .design.is-live .chapter { align-self: start; }
  .design.is-live .chapter__kicker { color: var(--taupe); }
  .design.is-live .chapter__kicker span { color: var(--char); }
  .design.is-live .chapter h3 { font-size: clamp(30px, 8vw, 44px); text-shadow: none; }
  .design.is-live .chapter > p:last-child { color: var(--ink-soft); font-size: 15px; }

  .design.is-live .design__rail {
    left: var(--gutter); right: var(--gutter); bottom: auto;
    top: calc(16px + var(--fh) + 20px);
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1px;
    column-gap: 8px; row-gap: 10px;
  }
  .design__rail-bar { grid-column: 1 / -1; grid-row: 2; background: var(--line); }
  .design__rail-bar span { background: var(--char); transform-origin: 0 50%; transform: scaleX(var(--rail)); }
  .design__rail-step { justify-self: start; color: var(--char); grid-row: 1 !important; }
  .design__rail-step:nth-child(2) { grid-column: 1; }
  .design__rail-step:nth-child(3) { grid-column: 2; }
  .design__rail-step:nth-child(4) { grid-column: 3; }
}


/* ══════════════════════════════════════════════════════════════════════════
   2 · APPROACH
   ══════════════════════════════════════════════════════════════════════════ */

.creed { max-width: 1400px; margin: 0 auto; padding: clamp(96px, 14vw, 200px) var(--gutter) clamp(88px, 11vw, 160px); }
.creed__text {
  margin: 0;
  max-width: 36ch;
  font: 500 clamp(34px, 4.5vw, 72px)/1.06 var(--serif);
  letter-spacing: -.02em;
}
.creed__text .w { opacity: clamp(.14, calc(var(--lit, 1) * var(--n) - var(--i)), 1); }
.creed .arc-rule { margin: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 64px); }
.creed__points { list-style: none; margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.creed__points h3 { font: 500 clamp(26px, 2.2vw, 34px)/1.05 var(--serif); margin: 0 0 12px; }
.creed__points p { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 32ch; }
@media (max-width: 800px) { .creed__points { grid-template-columns: minmax(0, 1fr); } }


/* ══════════════════════════════════════════════════════════════════════════
   3 · 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; }
}


/* ══════════════════════════════════════════════════════════════════════════
   4 · RESULTS
   ══════════════════════════════════════════════════════════════════════════ */

.cases { max-width: 1500px; margin: 0 auto; padding: clamp(96px, 12vw, 180px) var(--gutter); }
.cases__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: end; gap: 24px 48px; margin-bottom: clamp(36px, 5vw, 64px); }
.cases__head h2 { grid-column: 1; }
.cases__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.cases__head > p:last-child { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* Six finished results from the live site, three across. Every photo sits in
   the same 4:5 frame whatever shape it was shot in (they run from 3:2 to 3:4),
   so the rows line up; all six keep the teeth near the centre, which is what
   object-fit: cover keeps. */
.cases__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}
.cases__item figure { margin: 0; }
.cases__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.cases__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s var(--ease);
}
@media (hover: hover) { .cases__item:hover .cases__photo img { transform: scale(1.04); } }
.cases__tag {
  position: absolute; top: clamp(12px, 1.6vw, 18px); left: clamp(12px, 1.6vw, 18px);
  padding: 7px 11px 6px; background: rgba(245, 242, 236, .9); color: var(--char);
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.cases > .text-link { margin-top: clamp(44px, 5vw, 72px); }

@media (max-width: 1024px) {
  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .cases__head { grid-template-columns: minmax(0, 1fr); }
}
/* Phone: one swipeable row. Each card is 78% wide so the next one shows at
   the edge, which is the whole affordance. */
@media (max-width: 640px) {
  .cases__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    gap: 16px;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .cases__grid::-webkit-scrollbar { display: none; }
  .cases__item { scroll-snap-align: start; }
}


/* ══════════════════════════════════════════════════════════════════════════
   5 · TREATMENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* The choices are the patient's own sentences, set as a field of words
   rather than a list. Choosing one sets that sentence large in the panel
   beside it, with the treatment that answers it. Without JavaScript the
   choices are hidden and every answer is shown, one under the other. */
.ask { position: relative; background: var(--porcelain); padding: clamp(96px, 12vw, 180px) var(--gutter); }
.ask__head {
  max-width: 1320px; margin: 0 auto clamp(44px, 6vw, 84px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: end; gap: 24px 48px;
}
.ask__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.ask__head > p:last-child { margin: 0; color: var(--ink-soft); font-size: 15px; }

.ask__inner {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(44px, 5vw, 96px); align-items: start;
}

/* ── The field of choices ───────────────────────────────────────────────── */
.ask__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; max-width: 560px; }
.ask__chip {
  display: inline-flex; align-items: baseline; gap: 12px; margin: 0;
  padding: 13px 24px; border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--ink-soft); cursor: pointer; text-align: left;
  font: 500 clamp(17px, 1.35vw, 22px)/1.15 var(--serif); letter-spacing: -.01em;
  transition: color .35s, background-color .45s var(--ease), border-color .35s;
  -webkit-tap-highlight-color: transparent;
}
.ask__chip::after { content: "\2192"; font: 12px/1 var(--mono); opacity: 0; transition: opacity .35s; }
.ask__chip:hover, .ask__chip:focus-visible { color: var(--char); border-color: var(--taupe); }
.ask__chip[aria-expanded="true"] { background: var(--char); border-color: var(--char); color: var(--ivory); }
.ask__chip[aria-expanded="true"]::after { opacity: .7; }
.ask__chip--else { border-style: dashed; color: var(--char); }
.ask__chip--else::after { opacity: .55; }
.ask__chip--else:hover { background: var(--char); border-color: var(--char); color: var(--ivory); }
.ask__all { margin-top: clamp(34px, 4vw, 56px); }

/* ── The answer ─────────────────────────────────────────────────────────── */
.ask__panel { position: relative; }
.ask__index {
  display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(24px, 2.6vw, 34px);
  font: 500 10.5px/1 var(--mono); letter-spacing: .16em; color: var(--taupe);
}
.ask__index::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ask__index b { font-weight: 500; color: var(--char); }

.js .ask__slip:not(.is-open) { display: none; }
.js .ask__slip.is-open { animation: ask-in .7s var(--ease) both; }
@keyframes ask-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.ask__meta { margin: 0 0 16px; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.ask__echo {
  margin: 0; font: 500 clamp(30px, 3.1vw, 46px)/1.04 var(--serif); letter-spacing: -.025em;
  color: var(--char); text-wrap: balance;
}
.ask__echo em { font-style: italic; color: var(--taupe); }
.ask__lead { margin: 20px 0 0; max-width: 44ch; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }

.ask__txs { list-style: none; margin: clamp(30px, 3.4vw, 44px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.ask__tx {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 16px;
  padding: clamp(22px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--line);
}
.js .ask__slip.is-open .ask__tx { animation: ask-in .7s var(--ease) both; animation-delay: calc(140ms + var(--i, 0) * 110ms); }
.ask__no { font: italic 500 17px/1.6 var(--serif); color: var(--taupe); }
.ask__tx h4 { margin: 0; font: 500 clamp(24px, 2.1vw, 32px)/1 var(--serif); letter-spacing: -.02em; }
.ask__tx p { margin: 12px 0 0; max-width: 42ch; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.ask__tx .text-link { margin-top: 16px; }

/* Without JavaScript: no chooser, every answer in turn. */
html:not(.js) .ask__inner { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .ask__choose { order: 2; }
html:not(.js) .ask__chips, html:not(.js) .ask__index { display: none; }
html:not(.js) .ask__slip + .ask__slip { margin-top: clamp(52px, 6vw, 86px); }

@media (max-width: 980px) {
  .ask__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 7vw, 64px); }
  .ask__head { grid-template-columns: minmax(0, 1fr); }
  .ask__all { margin-top: clamp(26px, 4vw, 40px); }
}
@media (max-width: 700px) {
  .ask__chips { gap: 10px; }
  .ask__chip { padding: 11px 18px; font-size: 16px; }
  .ask__tx { grid-template-columns: 24px minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   6 · DOCTORS
   ══════════════════════════════════════════════════════════════════════════ */

.team {
  max-width: 1500px; margin: 0 auto;
  padding: clamp(96px, 12vw, 180px) var(--gutter) clamp(32px, 3vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px); align-items: start;
}
.team__intro h2 { max-width: 10ch; }
.team__facts { display: flex; flex-wrap: wrap; gap: 24px clamp(28px, 3vw, 48px); margin: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px); }
.team__facts dt { font: 500 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); margin-bottom: 8px; }
.team__facts dd { margin: 0; font: 500 clamp(40px, 3.8vw, 60px)/1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }

/* A portrait in an arched niche. Four layers, back to front: the stone
   arch (starting 26% down, so the head can rise above its crown), the first
   name set large, the cut-out figure, and a line of type up the right side.
   The figure's box is the whole cover and clips at its edges, which are
   also the arch's sides: Dr. Milena's photo is cropped at the shoulders,
   and those cut edges must never show. Sizes are in cqw so the name and the
   figure keep their proportions at every width. */
.doc { display: block; }
.doc + .doc { margin-top: clamp(64px, 10vw, 150px); }
.doc__cover { position: relative; display: block; aspect-ratio: 4 / 5.5; container-type: inline-size; isolation: isolate; }
.doc__arch {
  position: absolute; left: 0; right: 0; top: 26%; bottom: 0; z-index: 0;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #ece5d9 0%, #ddd3c4 58%, #cfc4b3 100%);
  box-shadow: inset 0 -60px 80px -60px rgba(25, 24, 23, .22);
  transition: background-color .6s, filter .6s;
}
.doc__word {
  position: absolute; left: 50%; top: 1.5%; z-index: 1;
  font: italic 500 30cqw/.8 var(--serif); letter-spacing: -.035em; white-space: nowrap;
  color: var(--char);
  transform: translate3d(calc(-50% + var(--drift, 0) * 1cqw), 0, 0);
}
.doc__fig { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.doc__fig img {
  position: absolute; left: 50%; top: var(--fig-top); height: var(--fig-h); width: auto; max-width: none;
  transform-origin: 50% 100%;
  transform: translate3d(-50%, 0, 0);
  translate: 0 calc(var(--rise, 0) * 1%);
  transition: transform 1.2s var(--ease);
}
/* Head sizes matched: his photo runs to the waist, hers stops at the chest. */
/* The name sits above the arch and the head rises into the foot of its
   letters, so the name is overlapped but still reads. */
.doc--milena { --fig-top: 14.5%; --fig-h: 91%; }
/* Dr. Elias is a photograph on its own studio backdrop, not a cut-out, so the
   arch itself is his frame: the figure's box takes the arch's shape and the
   picture fills it. It is drawn 6% taller than the arch so the scroll rise
   never uncovers an edge. The name stays above the crown, clear of him. */
.doc--photo .doc__fig { top: 26%; border-radius: 999px 999px 0 0; }
.doc--photo .doc__fig::after { /* the niche's floor shade; a gradient, as a blurred inset shadow bands on this layer */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(25, 24, 23, .13), rgba(25, 24, 23, 0) 70px);
}
.doc--photo .doc__fig img { /* 15% wider than the arch, so his head sits near Dr. Milena's size */
  left: -7.5%; top: -3%; width: 115%; height: 106%;
  object-fit: cover; object-position: 50% 30%;
  transform-origin: 50% 40%; transform: none;
}
.doc__line {
  position: absolute; left: calc(100% + 14px); bottom: 0; z-index: 3;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--taupe);
  white-space: nowrap;
}
.doc__role { display: block; margin: 22px 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__facts { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.doc:hover .doc__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (hover: hover) {
  .doc:hover .doc__fig img { transform: translate3d(-50%, 0, 0) scale(1.03); }
  .doc--photo:hover .doc__fig img { transform: scale(1.03); }
  .doc:hover .doc__arch { filter: brightness(.97); }
}

/* Entrance: the arch rises out of the floor, then the name, then the figure. */
.js .doc[data-reveal] { transform: none; opacity: 1; }
.js .doc[data-reveal] .doc__arch { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease) var(--d, 0ms), filter .6s; }
.js .doc[data-reveal] .doc__word { opacity: 0; transition: opacity 1s var(--ease) calc(var(--d, 0ms) + 250ms); }
.js .doc[data-reveal] .doc__fig { opacity: 0; transform: translate3d(0, 7%, 0); transition: opacity 1s var(--ease) calc(var(--d, 0ms) + 380ms), transform 1.4s var(--ease) calc(var(--d, 0ms) + 380ms); }
.js .doc[data-reveal] .doc__role, .js .doc[data-reveal] .doc__name, .js .doc[data-reveal] .doc__facts { opacity: 0; transition: opacity .9s var(--ease) calc(var(--d, 0ms) + 600ms); }
.js .doc[data-reveal].is-in .doc__arch { clip-path: inset(0 0 0 0); }
.js .doc[data-reveal].is-in .doc__word,
.js .doc[data-reveal].is-in .doc__role, .js .doc[data-reveal].is-in .doc__name, .js .doc[data-reveal].is-in .doc__facts { opacity: 1; }
.js .doc[data-reveal].is-in .doc__fig { opacity: 1; transform: none; }
/* A framed photograph rises with its arch instead of stepping up into it. */
.js .doc--photo[data-reveal] .doc__fig { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease) calc(var(--d, 0ms) + 120ms); }
.js .doc--photo[data-reveal].is-in .doc__fig { clip-path: inset(0 0 0 0); }

@media (max-width: 900px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__intro { grid-column: 1 / -1; }
  .doc__line { display: none; }
}
@media (max-width: 560px) {
  .team { grid-template-columns: minmax(0, 1fr); }
  .doc { max-width: 380px; }
  .doc + .doc { margin-top: 56px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   3 · THE CLINIC — scroll-scrubbed walkthrough
   (Placed here in the file only for history; it renders third on the page.)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 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; }
}


/* ══════════════════════════════════════════════════════════════════════════
   8 · INVITATION
   ══════════════════════════════════════════════════════════════════════════ */

.invite { text-align: center; padding: clamp(48px, 5vw, 72px) var(--gutter) clamp(96px, 12vw, 170px); }
.invite .arc-rule--short { width: min(520px, 72%); margin: 0 auto clamp(40px, 5vw, 60px); }
.invite h2 { font-size: clamp(54px, 7.4vw, 120px); }
.invite__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; margin: clamp(32px, 4vw, 48px) auto clamp(40px, 5vw, 56px); padding: 0; }
.invite__list li { padding: 10px 16px 9px; border: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; }
.invite__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 36px; }
.invite__actions .text-link { margin-top: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   Reduced motion: nothing moves on its own, nothing is pinned.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .home { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .arc-rule[data-reveal], .js .doc[data-reveal] .doc__arch, .js .doc--photo[data-reveal] .doc__fig { clip-path: none; transition: none; }
  .js .doc[data-reveal] .doc__word, .js .doc[data-reveal] .doc__fig, .js .doc[data-reveal] .doc__role, .js .doc[data-reveal] .doc__name, .js .doc[data-reveal] .doc__facts { opacity: 1; transform: none; transition: none; }
  .smile__rise { animation: none; }
  .smile__frame { transition: none; }
  .walk__cue i::after { animation: none; }
  .journey__video, .cases__photo img, .step, .ask__chip { transition: none; }
  .js .ask__slip.is-open, .js .ask__slip.is-open .ask__tx { animation: none; }
}