/* ==========================================================================
   VISHWAS ORTHOPAEDIC HOSPITAL — Design System
   01 Tokens · 02 Base · 03 Grid · 04 Chrome · 05 Intro · 06 Hero
   07 Sections · 08 Inner pages · 09 Motion · 10 Responsive
   ========================================================================== */

/* ---------- 01 TOKENS ---------------------------------------------------- */
:root {
  /* Surfaces */
  --ivory:        #F4F1EA;   /* warm bone-white canvas */
  --ivory-2:      #EBE6DB;   /* recessed ivory */
  --ivory-3:      #DFD9CC;   /* stone edge */
  --graphite:     #16161A;   /* deep graphite */
  --graphite-2:   #1E1E22;
  --charcoal:     #2A2A2C;

  /* Ink */
  --ink:          #1A1A18;
  --ink-60:       rgba(26,26,24,.62);
  --ink-40:       rgba(26,26,24,.42);
  --ink-12:       rgba(26,26,24,.12);
  --paper:        #F4F1EA;
  --paper-64:     rgba(244,241,234,.64);
  --paper-40:     rgba(244,241,234,.40);
  --paper-14:     rgba(244,241,234,.14);

  /* Accent — oxide red drawn from the Vishwas mark */
  --accent:       #A32C24;
  --accent-soft:  #C0554A;
  /* Secondary — surgical light, used only for x-ray/clinical moments */
  --surgical:     #8FA8AC;

  /* Type */
  --sans: "Inter Tight", "Inter", "Helvetica Now Display", "Neue Haas Grotesk Display Pro",
          "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --mono: "Geist Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Display scale (fluid, editorial) */
  --fs-mega:   clamp(3.4rem, 11.2vw, 9.5rem);   /* 54 → 152 */
  --fs-d1:     clamp(2.9rem, 8.2vw, 7rem);      /* 46 → 112 */
  --fs-d2:     clamp(2.3rem, 5.4vw, 4.5rem);    /* 37 → 72  */
  --fs-d3:     clamp(1.75rem, 3.1vw, 2.6rem);
  --fs-lead:   clamp(1.06rem, 1.35vw, 1.32rem);
  --fs-body:   1rem;
  --fs-sm:     .875rem;
  --fs-label:  .6875rem;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(20px, 3.4vw, 56px);
  --maxw: 1560px;

  /* Lines */
  --hair: 1px solid var(--ink-12);
  --hair-light: 1px solid var(--paper-14);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --slow: 1.1s;
  --med: .62s;
  --fast: .32s;
}

/* ---------- 02 BASE ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; height: 100vh; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--ivory); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--graphite); color: var(--paper);
  padding: 14px 20px; font-size: var(--fs-sm);
}
.skip:focus { left: 12px; top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Display type primitives */
.display {
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: .9;
  text-transform: uppercase;
  font-size: var(--fs-d1);
}
.display--mega { font-size: var(--fs-mega); letter-spacing: -.042em; line-height: .86; }
.display--sm { font-size: var(--fs-d2); }
.label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
}
.lead { font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -.011em; }
.muted { color: var(--ink-60); }
.on-dark .muted, .dark .muted { color: var(--paper-64); }
.measure { max-width: 46ch; }
.measure-wide { max-width: 62ch; }

/* ---------- 03 GRID ----------------------------------------------------- */
.wrap {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 1.7vw, 28px);
}
.rule { height: 1px; background: var(--ink-12); width: 100%; }
.on-dark .rule { background: var(--paper-14); }
.section { padding-block: clamp(72px, 11vh, 152px); position: relative; }
.section--tight { padding-block: clamp(56px, 7vh, 96px); }
.dark { background: var(--graphite); color: var(--paper); }
.dark ::selection { background: var(--paper); color: var(--graphite); }

/* Section index marker: 01 / SECTION NAME */
.smark {
  display: flex; align-items: baseline; gap: var(--s4);
  border-top: var(--hair); padding-top: var(--s4);
  margin-bottom: clamp(40px, 6vw, 88px);
}
.dark .smark { border-color: var(--paper-14); }
.smark__n { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .18em; color: var(--accent); }
.smark__t { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-40); }
.dark .smark__t { color: var(--paper-40); }

/* ---------- 04 CHROME: nav, menu, cursor, footer ------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  padding: clamp(16px, 2vw, 26px) var(--gutter);
  transition: background var(--med) var(--ease), backdrop-filter var(--med),
              padding var(--med) var(--ease), border-color var(--med);
  border-bottom: 1px solid transparent;
  mix-blend-mode: normal;
}
.nav__logo { display: flex; align-items: center; gap: 12px; }
.nav__logo img { height: clamp(30px, 3.1vw, 42px); width: auto; transition: opacity var(--med) var(--ease); }
.nav__logo .lg-light { position: absolute; opacity: 0; }
.nav__logo .lg-wrap { position: relative; display: block; }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav__links a {
  font-size: var(--fs-sm); letter-spacing: -.01em; position: relative; padding-block: 4px;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: currentColor; transition: right var(--med) var(--ease-out);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { right: 0; }
.nav__right { display: flex; align-items: center; gap: var(--s4); }

/* The horizontal nav links were 30px tall at every size. Above 860px they are
   the primary navigation, and an iPad in landscape is 1024-1366px wide - a
   finger, not a mouse. Padding plus an equal negative margin gives them a
   48px target without moving the bar or the links by a single pixel. */
.nav__links a { padding-block: 13px; margin-block: -9px; }
.nav__links a::after { bottom: 13px; }

/* nav states */
.nav--over { color: var(--paper); }
.nav--over .lg-light { opacity: 1; }
.nav--over .lg-dark { opacity: 0; }
.nav--solid {
  background: rgba(244,241,234,.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--ink-12);
  color: var(--ink);
}
.nav--solid .lg-light { opacity: 0; }
.nav--solid .lg-dark { opacity: 1; }
.nav--hidden { transform: translateY(-102%); }
/* the hide/show transform was .62s - long enough that a couple of quick
   direction changes left the bar permanently mid-slide */
.nav { transition: transform .34s var(--ease), background var(--med) var(--ease), border-color var(--med); }

/* Buttons */
.btn {
  --btn-fg: var(--ivory); --btn-bg: var(--graphite);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 13px 22px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase;
  font-family: var(--mono); font-weight: 500;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color var(--med) var(--ease), transform var(--fast) var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent); transform: translateY(101%);
  transition: transform var(--med) var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--ivory); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.btn--ghost:hover { color: var(--ivory); }
.btn--paper { --btn-bg: var(--ivory); --btn-fg: var(--graphite); }
.btn--sm { min-height: 40px; padding: 10px 16px; font-size: var(--fs-label); }

/* Text link with arrow */
.tlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: .18em; text-transform: uppercase;
  padding-bottom: 6px; position: relative; min-height: 30px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--med) var(--ease-out);
}
.tlink:hover::after { transform: scaleX(1); }
.tlink i { font-style: normal; transition: transform var(--med) var(--ease-out); }
.tlink:hover i { transform: translateX(6px); }

/* Menu burger */
.burger { display: flex; flex-direction: column; gap: 5px; width: 46px; height: 46px; align-items: center; justify-content: center; }
.burger span { display: block; width: 22px; height: 1px; background: currentColor; transition: transform var(--med) var(--ease), opacity var(--fast); }
body.menu-open .burger span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }

/* Fullscreen menu */
.menu {
  position: fixed; inset: 0; z-index: 95;
  background: var(--graphite); color: var(--paper);
  display: grid; grid-template-columns: 1.15fr .85fr;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .82s var(--ease-out);
  pointer-events: none;
}
body.menu-open .menu { clip-path: inset(0 0 0 0); pointer-events: auto; }
.menu__list { align-self: center; padding: clamp(80px, 12vh, 140px) var(--gutter) var(--s8); }
.menu__list li { overflow: hidden; }
.menu__list a {
  display: block; font-size: clamp(2.4rem, 5.6vw, 5rem);
  text-transform: uppercase; letter-spacing: -.04em; line-height: 1.06;
  font-weight: 500; padding-block: clamp(2px, .5vw, 8px);
  transform: translateY(105%); transition: transform .7s var(--ease-out), color var(--fast);
  color: var(--paper-64);
}
body.menu-open .menu__list a { transform: translateY(0); }
.menu__list a:hover, .menu__list a.is-on { color: var(--paper); }
.menu__meta { padding-inline: var(--gutter); margin-top: var(--s7); display: flex; gap: var(--s7); flex-wrap: wrap; color: var(--paper-64); }
.menu__media { position: relative; overflow: hidden; border-left: var(--hair-light); }
.menu__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); filter: grayscale(.15);
  transition: opacity .7s var(--ease), transform 1.4s var(--ease);
}
.menu__media img.is-on { opacity: .92; transform: scale(1); }

/* Custom cursor */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: width var(--fast) var(--ease), height var(--fast) var(--ease), background var(--fast);
  mix-blend-mode: normal;
}
.cursor__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ivory); opacity: 0;
  transition: opacity var(--fast);
  white-space: nowrap;
}
.cursor.is-big { width: 74px; height: 74px; background: var(--accent); }
.cursor.is-big .cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* Page transition curtain */
.curtain {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  background: var(--graphite);
  transform: translateY(100%);
}
/* the cover has to be complete by the time the navigation fires (300ms in
   site.js), otherwise the old page shows through the gap */
.curtain.is-in { animation: curtainIn .3s var(--ease-out) forwards; }
.curtain.is-out { animation: curtainOut .48s var(--ease-out) forwards; }
@keyframes curtainIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes curtainOut { from { transform: translateY(0); } to { transform: translateY(-100%); } }

/* Footer */
.foot { background: var(--graphite); color: var(--paper); padding-top: clamp(64px, 8vw, 110px); }
.foot__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s7); }
.foot__word {
  font-size: clamp(3rem, 13vw, 12rem); line-height: .82; letter-spacing: -.05em;
  text-transform: uppercase; font-weight: 500; color: var(--paper);
  margin-top: clamp(40px, 6vw, 80px); opacity: .96;
}
.foot__word span { color: var(--paper-40); }
.foot :is(h2, h3, h4) { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-40); margin-bottom: var(--s4); font-weight: 500; }
.foot li + li { margin-top: 9px; }
.foot li a, .foot address { color: var(--paper-64); font-style: normal; }
.foot li a:hover { color: var(--paper); }
.foot__bar {
  margin-top: clamp(40px, 5vw, 64px); border-top: var(--hair-light);
  padding-block: var(--s5) var(--s6);
  display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper-40);
}
.foot__logo { height: 40px; width: auto; margin-bottom: var(--s5); }

/* ---------- 05 INTRO ---------------------------------------------------- */
.intro {
  position: fixed; inset: 0; z-index: 160; color: var(--paper);
  display: grid; place-items: center; overflow: hidden; background: transparent;
}
/* two panes that later part along the alignment line */
.intro__pane { position: absolute; left: 0; right: 0; height: 50.3%; background: #0B0B0D; will-change: transform; }
.intro__pane--t { top: 0; box-shadow: inset 0 60px 120px -60px rgba(255,255,255,.05); }
.intro__pane--b { bottom: 0; box-shadow: inset 0 -60px 120px -60px rgba(255,255,255,.05); }
.intro__grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .45;
  background-image: radial-gradient(rgba(255,255,255,.06) .5px, transparent .5px);
  background-size: 3px 3px;
}
/* the surgical alignment line + travelling measure slug + tick rule */
.intro__line {
  position: absolute; left: 50%; top: 50%; z-index: 3; height: 1px; width: 100vw;
  transform: translate(-50%, -50%) scaleX(0); transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(244,241,234,.26) 10%, rgba(244,241,234,.88) 50%, rgba(244,241,234,.26) 90%, transparent);
}
.intro__slug {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: 7px; height: 7px;
  background: var(--accent-soft); opacity: 0;
  transform: translate(-46vw, -50%) rotate(45deg);
}
.intro__ruler {
  position: absolute; left: 50%; top: calc(50% + 9px); z-index: 3;
  width: min(720px, 84vw); height: 8px; opacity: 0;
  transform: translateX(-50%) scaleX(0); transform-origin: center;
  background: repeating-linear-gradient(90deg, rgba(244,241,234,.38) 0 1px, transparent 1px 24px);
}
.intro__stage { position: relative; z-index: 2; width: min(760px, 86vw); text-align: center; }
/* x-ray contour + scan sweep */
.intro__x { position: relative; overflow: hidden; width: min(300px, 48vw); aspect-ratio: 6/5; margin: 0 auto; display: grid; place-items: center; }
.intro__joint { display: block; width: 100%; height: auto; opacity: 0; filter: drop-shadow(0 0 26px rgba(143,168,172,.16)); }
.intro__joint path, .intro__joint circle {
  fill: none; stroke: rgba(244,241,234,.6); stroke-width: 1.1; vector-effect: non-scaling-stroke;
}
.intro__joint .hot { stroke: var(--accent-soft); }
.intro__joint .axis { stroke: rgba(244,241,234,.3); }
.intro__scan {
  position: absolute; left: -12%; right: -12%; top: 0; height: 40%; opacity: 0;
  transform: translateY(-140%); pointer-events: none;
  background: linear-gradient(180deg, rgba(205,226,230,0), rgba(205,226,230,.26) 45%, rgba(205,226,230,.5) 50%, rgba(205,226,230,.26) 55%, rgba(205,226,230,0));
}
/* the mark rises behind a mask */
.intro__mark { overflow: hidden; margin-top: clamp(18px, 2.4vw, 30px); }
.intro__logo { display: block; width: min(340px, 60vw); margin-inline: auto; transform: translateY(104%); }
.intro__kicker {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .5em;
  text-transform: uppercase; color: var(--paper-40);
  margin-top: clamp(16px, 2.2vw, 26px); opacity: 0;
}
/* corner plate */
.intro__meta {
  position: absolute; inset: clamp(16px, 2.6vw, 32px); z-index: 3; pointer-events: none;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--paper-40);
}
.intro__m { position: absolute; opacity: 0; white-space: nowrap; }
.intro__m--tl { top: 0; left: 0; }
.intro__m--tr { top: 0; right: 0; }
.intro__m--bl { bottom: 0; left: 0; }
.intro__m--br { bottom: 0; right: 0; color: var(--paper-64); }
.intro__m--br i { font-style: normal; }
.intro.is-done { pointer-events: none; }

/* ---------- 06 HERO ----------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  background: #0E0E10; color: var(--paper); overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%;
  transform: scale(1.06); will-change: transform;
}
.hero.is-ready .hero__bg img { transform: scale(1); transition: transform 2.4s var(--ease-out); }
/* layered depth: graphite scrim + foreground blur plate */
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(100deg, rgba(10,10,12,.94) 0%, rgba(10,10,12,.72) 34%, rgba(10,10,12,.18) 62%, rgba(10,10,12,.52) 100%),
    radial-gradient(120% 90% at 76% 32%, rgba(143,168,172,.16), transparent 60%);
}
.hero__fg {
  position: absolute; z-index: -1; left: -6%; bottom: -8%;
  width: 46%; aspect-ratio: 4/3;
  background-image: var(--fg-src); background-size: cover; background-position: 20% 80%;
  filter: blur(26px) saturate(.8) brightness(.5);
  opacity: .85;
  -webkit-mask-image: radial-gradient(60% 70% at 30% 70%, #000 40%, transparent 78%);
  mask-image: radial-gradient(60% 70% at 30% 70%, #000 40%, transparent 78%);
}
/* oversized editorial wordmark behind headline */
.hero__ghost {
  position: absolute; z-index: -1; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  font-size: clamp(6rem, 24vw, 24rem); line-height: .8; letter-spacing: -.055em;
  text-transform: uppercase; font-weight: 500; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(244,241,234,.13);
  pointer-events: none;
}
.hero__inner { width: 100%; padding-bottom: clamp(28px, 5vh, 64px); padding-top: 22vh; }
.hero__rule { height: 1px; background: var(--paper-14); margin-bottom: clamp(28px, 5vh, 60px); transform-origin: left; }
.hero__head { grid-column: 1 / span 8; }
.hero__kicker { color: var(--paper-64); margin-bottom: var(--s5); display: flex; align-items: center; gap: 14px; }
.hero__kicker::before { content: ""; width: clamp(28px, 5vw, 68px); height: 1px; background: var(--accent); display: block; }
.hero h1 { font-size: var(--fs-mega); line-height: .86; letter-spacing: -.045em; text-transform: uppercase; font-weight: 500; }
.hero h1 em { font-style: normal; color: var(--accent-soft); }
.hero__sub { grid-column: 1 / span 4; align-self: end; color: var(--paper-64); }
.hero__cta { grid-column: 6 / span 4; align-self: end; display: flex; gap: var(--s4); flex-wrap: wrap; }
.hero__scroll { grid-column: 11 / span 2; align-self: end; justify-self: end; text-align: right; color: var(--paper-64); }
.hero__meta {
  margin-top: clamp(28px, 5vh, 58px); border-top: var(--hair-light);
  padding-top: var(--s4); display: flex; justify-content: space-between; gap: var(--s5);
  flex-wrap: wrap; color: var(--paper-40);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- 07 SECTIONS ------------------------------------------------- */

/* 07.1 Movement statement — words separate on scroll */
.move { position: relative; background: var(--ivory); overflow: clip; }
.move__stage { position: relative; min-height: 190vh; }
.move__sticky {
  position: sticky; top: 0; height: 100svh;
  display: grid; place-items: center; overflow: hidden;
}
.move__type {
  position: relative; z-index: 2; text-align: center;
  font-size: clamp(2.6rem, 8.4vw, 7.4rem); line-height: .92;
  letter-spacing: -.045em; text-transform: uppercase; font-weight: 500;
  pointer-events: none; mix-blend-mode: normal;
}
.move__type .ln { display: block; }
.move__type .w { display: inline-block; will-change: transform; }
.move__media {
  position: absolute; z-index: 1; overflow: hidden;
  will-change: transform, opacity; opacity: 0;
}
.move__media img { width: 100%; height: 100%; object-fit: cover; }
.move__m1 { left: 4%;  top: 12%;  width: clamp(150px, 20vw, 300px); aspect-ratio: 4/5; }
.move__m2 { right: 5%; top: 20%;  width: clamp(130px, 16vw, 250px); aspect-ratio: 3/4; }
.move__m3 { left: 16%; bottom: 6%; width: clamp(160px, 22vw, 330px); aspect-ratio: 3/2; }
.move__m4 { right: 11%; bottom: 10%; width: clamp(120px, 15vw, 230px); aspect-ratio: 4/5; }
.move__copy {
  position: relative; z-index: 3; padding-bottom: clamp(64px, 10vh, 130px);
}
.move__copy .grid > * { grid-column: 7 / span 5; }

/* 07.2 WHERE IT HURTS — scroll-driven anatomical explorer */
.hurts { background: var(--graphite); color: var(--paper); position: relative; }
.hurts__head { padding-top: clamp(72px, 10vh, 130px); }
.hurts__head h2 { font-size: var(--fs-d1); line-height: .88; letter-spacing: -.042em; text-transform: uppercase; font-weight: 500; }
.hurts__track { position: relative; }
.hurts__sticky {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(70px, 9vh, 110px) var(--gutter) clamp(40px, 6vh, 70px);
  max-width: var(--maxw); margin-inline: auto;
}
.hurts__stage {
  position: relative; height: min(74vh, 640px); width: 100%;
  display: grid; place-items: center;
}
.hurts__figure {
  position: relative; height: 100%; aspect-ratio: 4/5; overflow: hidden;
  background: #0F0F11;
}
.hurts__figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.07);
  transition: opacity .9s var(--ease), transform 1.6s var(--ease);
  filter: brightness(.82) contrast(1.04);
}
.hurts__figure img.is-on { opacity: 1; transform: scale(1); filter: brightness(1) contrast(1.04); }
/* thin anatomical alignment lines over the active region */
.hurts__cross { position: absolute; inset: 0; pointer-events: none; }
.hurts__cross span {
  position: absolute; background: rgba(244,241,234,.55);
  transition: transform .8s var(--ease-out), opacity .5s var(--ease);
}
.hurts__cross .h { left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left; }
.hurts__cross .v { top: 0; height: 100%; width: 1px; transform: scaleY(0); transform-origin: top; }
.hurts.is-active .hurts__cross .h { transform: scaleX(1); }
.hurts.is-active .hurts__cross .v { transform: scaleY(1); }
.hurts__dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
  transition: left .8s var(--ease-out), top .8s var(--ease-out);
  box-shadow: 0 0 0 6px rgba(163,44,36,.22);
}
.hurts__idx {
  position: absolute; right: clamp(6px, 1vw, 14px); bottom: clamp(6px, 1vw, 14px);
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .2em; color: var(--paper-40);
}
.hurts__panels { position: relative; height: min(74vh, 640px); }
.hurts__panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(26px);
  transition: opacity .55s var(--ease), transform .7s var(--ease-out);
  pointer-events: none;
}
.hurts__panel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hurts__panel h3 {
  font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: .92; letter-spacing: -.04em;
  text-transform: uppercase; font-weight: 500; margin-bottom: var(--s4);
}
.hurts__panel .n { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .22em; color: var(--accent-soft); margin-bottom: var(--s4); }
.hurts__panel p { color: var(--paper-64); max-width: 42ch; }
.hurts__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s5) 0 var(--s6); }
.hurts__tags li {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; padding: 7px 11px;
  box-shadow: inset 0 0 0 1px var(--paper-14); color: var(--paper-64);
}
.hurts__prog { display: flex; gap: 6px; margin-top: var(--s6); }
.hurts__prog button {
  flex: 1; height: 2px; background: var(--paper-14); position: relative; min-height: 0;
  padding: 0; border-radius: 0;
}
.hurts__prog button span { position: absolute; inset: -14px 0; }
.hurts__prog button.is-on { background: var(--accent); }

/* 07.3 Treatment journey */
.journey__rows { border-top: var(--hair); }
.journey__row {
  display: grid; grid-template-columns: 90px 1.1fr 1.4fr; gap: clamp(16px, 3vw, 48px);
  align-items: start; padding-block: clamp(28px, 3.6vw, 52px);
  border-bottom: var(--hair); position: relative;
}
.journey__row .n { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .2em; color: var(--accent); padding-top: 8px; }
.journey__row h3 { font-size: clamp(1.4rem, 2.5vw, 2.1rem); letter-spacing: -.03em; text-transform: uppercase; font-weight: 500; line-height: 1; }
.journey__row p { color: var(--ink-60); }
.journey__row::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease-out);
}
.journey__row.is-in::after { transform: scaleX(1); }

/* 07.4 Doctor portfolio */
.doc { background: var(--ivory-2); position: relative; overflow: clip; }
.doc__type {
  position: relative; z-index: 1; text-align: center;
  font-size: clamp(3.6rem, 15.5vw, 15rem); line-height: .84; letter-spacing: -.05em;
  text-transform: uppercase; font-weight: 500; color: var(--ink);
  pointer-events: none;
}
.doc__type .ln2 { display: block; color: transparent; -webkit-text-stroke: 1.4px rgba(26,26,24,.45); }
.doc__portrait {
  position: relative; z-index: 2; width: min(430px, 62vw); margin: -8% auto 0;
  aspect-ratio: 4/5; overflow: hidden; background: var(--graphite);
}
.doc__portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.doc.is-in .doc__portrait img { transform: scale(1); transition: transform 1.8s var(--ease-out); }
.doc__aside {
  position: relative; z-index: 3; margin-top: clamp(-70px, -5vw, -30px);
}
.doc__facts { display: flex; flex-direction: column; gap: 6px; }
.doc__facts li { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60); }
.doc__quote {
  font-size: clamp(1.3rem, 2.5vw, 2.05rem); line-height: 1.24; letter-spacing: -.028em;
  font-weight: 400; max-width: 30ch;
}
.doc__quote .hl { color: var(--accent); }
.doc__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.4vw, 20px); margin-top: clamp(40px, 6vw, 80px); }
.doc__strip figure { overflow: hidden; }
.doc__strip img { aspect-ratio: 3/2; object-fit: cover; width: 100%; transition: transform 1.2s var(--ease-out); }
.doc__strip figure:hover img { transform: scale(1.04); }
.doc__strip figcaption { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40); margin-top: 10px; }

/* 07.5 Surgical precision — horizontal scroll lock */
.prec { background: var(--graphite); color: var(--paper); }
.prec__pin { position: relative; }
.prec__vp { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.prec__track { display: flex; will-change: transform; }
.prec__panel {
  flex: 0 0 clamp(320px, 78vw, 1080px);
  padding-inline: clamp(20px, 4vw, 80px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 56px); align-items: center;
}
.prec__panel:first-child { flex-basis: clamp(320px, 92vw, 1180px); }
.prec__panel h3 { font-size: clamp(1.7rem, 3.2vw, 2.8rem); letter-spacing: -.035em; text-transform: uppercase; font-weight: 500; line-height: .95; margin-bottom: var(--s4); }
.prec__panel p { color: var(--paper-64); }
.prec__panel .n { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .22em; color: var(--accent-soft); margin-bottom: var(--s4); }
.prec__lead {
  font-size: clamp(2.4rem, 6.6vw, 5.6rem); line-height: .9; letter-spacing: -.045em;
  text-transform: uppercase; font-weight: 500;
}
.prec__media { overflow: hidden; aspect-ratio: 3/2; }
.prec__media img { width: 100%; height: 100%; object-fit: cover; }
.prec__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 42px; height: 1px; background: var(--paper-14); }
.prec__bar i { display: block; height: 1px; background: var(--accent); width: 0; }

/* 07.6 Treatments editorial catalogue */
.treat__row {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 28px);
  align-items: center; padding-block: clamp(30px, 4.4vw, 76px);
  border-top: var(--hair);
}
.treat__row figure { position: relative; overflow: hidden; }
.treat__row img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; transition: transform 1.3s var(--ease-out); }
.treat__row:hover img { transform: scale(1.035); }
.treat__n {
  font-family: var(--mono); font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(26,26,24,.34);
  line-height: .9;
}
.treat__row h3 { font-size: clamp(1.5rem, 2.9vw, 2.5rem); letter-spacing: -.034em; text-transform: uppercase; font-weight: 500; line-height: .98; margin-block: var(--s3) var(--s4); }
.treat__row p { color: var(--ink-60); }
.treat__row--a figure { grid-column: 1 / span 7; }
.treat__row--a .treat__txt { grid-column: 9 / span 4; }
.treat__row--a .treat__n { grid-column: 8 / span 1; align-self: start; }
.treat__row--b figure { grid-column: 6 / span 7; }
.treat__row--b .treat__txt { grid-column: 1 / span 4; }
.treat__row--b .treat__n { grid-column: 5 / span 1; align-self: start; text-align: right; }
.treat__row--c figure { grid-column: 3 / span 8; aspect-ratio: 21/9; }
.treat__row--c figure img { aspect-ratio: 21/9; }
.treat__row--c .treat__txt { grid-column: 3 / span 5; margin-top: var(--s5); }
.treat__row--c .treat__n { grid-column: 1 / span 2; align-self: start; }

/* 07.7 Recovery full-bleed */
.rec { background: var(--ivory); }
.rec__frame { position: relative; height: clamp(400px, 88svh, 900px); overflow: hidden; }
.rec__frame img { position: absolute; inset: 0; width: 100%; height: 118%; object-fit: cover; top: -9%; will-change: transform; }
.rec__frame figcaption {
  position: absolute; left: var(--gutter); bottom: clamp(20px, 4vw, 44px); z-index: 2;
  color: var(--paper); max-width: 34ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
.rec__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(12,12,14,.66), rgba(12,12,14,.05) 52%);
}
.rec__head h2 { font-size: var(--fs-d1); line-height: .88; letter-spacing: -.042em; text-transform: uppercase; font-weight: 500; }

/* 07.8 Patient stories */
.story { background: var(--ivory-2); }
.story__stage { position: relative; min-height: clamp(430px, 60vh, 620px); }
.story__item {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: 4fr 6fr; gap: clamp(24px, 4vw, 64px); align-items: center;
  opacity: 0; transform: translateX(48px); pointer-events: none;
  transition: opacity .6s var(--ease), transform .8s var(--ease-out);
}
.story__item.is-on { opacity: 1; transform: none; pointer-events: auto; }
.story__item.is-prev { transform: translateX(-48px); }
.story__item figure { overflow: hidden; aspect-ratio: 4/5; max-height: clamp(320px, 52vh, 560px); }
.story__item img { width: 100%; height: 100%; object-fit: cover; }
.story__q { font-size: clamp(1.35rem, 3vw, 2.5rem); line-height: 1.16; letter-spacing: -.032em; }
.story__who { margin-top: var(--s5); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60); }
.story__nav { display: flex; align-items: center; justify-content: space-between; margin-top: clamp(24px, 3vw, 44px); border-top: var(--hair); padding-top: var(--s4); }
.story__count { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .2em; }
.story__btns { display: flex; gap: var(--s3); }
.story__btns button {
  width: 46px; height: 46px; box-shadow: inset 0 0 0 1px var(--ink-12);
  display: grid; place-items: center; transition: background var(--fast), color var(--fast), box-shadow var(--fast);
}
.story__btns button:hover { background: var(--graphite); color: var(--ivory); box-shadow: none; }

/* 07.9 Hospital gallery */
.gal { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1.4vw, 22px); }
.gal figure { overflow: hidden; position: relative; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.gal figure:hover img { transform: scale(1.045); }
.gal figcaption {
  position: absolute; left: 14px; bottom: 12px; color: var(--paper);
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 1px 16px rgba(0,0,0,.6);
}
.gal .g1 { grid-column: 1 / span 7; aspect-ratio: 3/2; }
.gal .g2 { grid-column: 8 / span 5; aspect-ratio: 4/5; align-self: end; }
.gal .g3 { grid-column: 1 / span 4; aspect-ratio: 4/5; }
.gal .g4 { grid-column: 5 / span 5; aspect-ratio: 3/2; align-self: start; }
.gal .g5 { grid-column: 10 / span 3; aspect-ratio: 3/4; }

/* 07.10 Closing CTA */
.close { background: var(--graphite); color: var(--paper); position: relative; overflow: hidden; }
.close__inner { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; }
.close h2 { font-size: var(--fs-mega); line-height: .86; letter-spacing: -.045em; text-transform: uppercase; font-weight: 500; }
.close__row { margin-top: clamp(32px, 5vw, 64px); display: flex; gap: var(--s5); flex-wrap: wrap; align-items: center; }
.close__meta { margin-top: clamp(40px, 6vw, 84px); border-top: var(--hair-light); padding-top: var(--s5); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.close__meta :is(h3, h4) { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .2em; color: var(--paper-40); margin-bottom: 8px; font-weight: 500; }
.close__meta a, .close__meta p { color: var(--paper-64); }
.close__meta a:hover { color: var(--paper); }
.close__ghost {
  position: absolute; right: -2%; bottom: -12%; z-index: 0;
  font-size: clamp(7rem, 26vw, 26rem); line-height: .8; letter-spacing: -.055em;
  text-transform: uppercase; font-weight: 500; color: transparent;
  -webkit-text-stroke: 1px rgba(244,241,234,.08); pointer-events: none;
}

/* ---------- 08 INNER PAGES ---------------------------------------------- */
.phero {
  position: relative; min-height: clamp(560px, 86svh, 900px);
  display: flex; align-items: flex-end; background: var(--graphite); color: var(--paper);
  overflow: hidden; isolation: isolate;
}
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.phero.is-ready .phero__bg img { transform: scale(1); transition: transform 2.2s var(--ease-out); }
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(104deg, rgba(12,12,14,.92), rgba(12,12,14,.55) 46%, rgba(12,12,14,.28));
}
.phero__inner { width: 100%; padding-block: clamp(90px, 14vh, 150px) clamp(32px, 5vh, 60px); }
.phero h1 { font-size: var(--fs-d1); line-height: .88; letter-spacing: -.042em; text-transform: uppercase; font-weight: 500; }
.phero .lead { color: var(--paper-64); margin-top: var(--s5); max-width: 48ch; }
.crumb { display: flex; gap: 10px; align-items: center; color: var(--paper-40); margin-bottom: var(--s5); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; }
.crumb a:hover { color: var(--paper); }

.prose { max-width: 66ch; }
.prose p + p { margin-top: var(--s5); }
.prose h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.028em; margin-block: var(--s7) var(--s4); text-transform: uppercase; font-weight: 500; }
.prose ul { margin-top: var(--s4); }
.prose li { position: relative; padding-left: 22px; color: var(--ink-60); }
.prose li + li { margin-top: 10px; }
.prose li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--accent); }

.split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 28px); row-gap: clamp(28px, 4vw, 56px); }
.split__l { grid-column: 1 / span 4; }
.split__r { grid-column: 6 / span 7; }
.sticky-side { position: sticky; top: clamp(90px, 12vh, 130px); }

.facts { border-top: var(--hair); }
.facts div { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s4); padding-block: var(--s4); border-bottom: var(--hair); }
.facts dt { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40); }
.facts dd { margin: 0; }

.faq { border-top: var(--hair); }
.faq details { border-bottom: var(--hair); }
.faq summary {
  list-style: none; cursor: pointer; padding-block: clamp(18px, 2.4vw, 26px);
  display: flex; align-items: baseline; gap: var(--s4);
  font-size: clamp(1.02rem, 1.6vw, 1.22rem); letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-family: var(--mono); color: var(--accent); transition: transform var(--fast); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding-bottom: clamp(18px, 2.4vw, 26px); color: var(--ink-60); max-width: 68ch; }

.tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.tile {
  grid-column: span 4; position: relative; overflow: hidden; display: block;
  background: var(--graphite); color: var(--paper); min-height: clamp(260px, 30vw, 380px);
  display: flex; align-items: flex-end; padding: clamp(18px, 2vw, 28px);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: transform 1.3s var(--ease-out), opacity var(--med); }
.tile:hover img { transform: scale(1.05); opacity: .74; }
.tile__t { position: relative; z-index: 2; }
.tile h3 { font-size: clamp(1.15rem, 1.9vw, 1.6rem); text-transform: uppercase; letter-spacing: -.03em; font-weight: 500; }
.tile p { color: var(--paper-64); font-size: var(--fs-sm); margin-top: 8px; max-width: 30ch; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(12,12,14,.86), rgba(12,12,14,.12) 62%); }

.map {
  position: relative; aspect-ratio: 3/2; background: var(--ivory-3);
  display: grid; place-items: center; overflow: hidden;
}
.map__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--ink-12) 1px, transparent 1px), linear-gradient(90deg, var(--ink-12) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .7;
}
.map__pin { position: relative; z-index: 2; text-align: center; }
.map__pin i { display: block; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; margin: 0 auto 12px; box-shadow: 0 0 0 8px rgba(163,44,36,.16); }

.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--ink-12);
  padding: 12px 2px; min-height: 46px; border-radius: 0;
  transition: border-color var(--fast);
}
.field textarea { min-height: 108px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.note { font-size: var(--fs-sm); color: var(--ink-40); }

/* Editorial pull quote */
.pull {
  font-size: clamp(1.5rem, 3.4vw, 2.9rem); line-height: 1.14; letter-spacing: -.035em;
  max-width: 26ch;
}

/* ---------- 09 MOTION --------------------------------------------------- */
.rv { opacity: 0; transform: translateY(26px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .95s var(--ease-out); }
.rv-d1.is-in { transition-delay: .08s; }
.rv-d2.is-in { transition-delay: .16s; }
.rv-d3.is-in { transition-delay: .24s; }
/* masked line reveal */
.mask { display: block; overflow: hidden; }
.mask > * { display: block; transform: translateY(102%); }
.mask.is-in > * { transform: none; transition: transform 1s var(--ease-out); }
.mask-d1.is-in > * { transition-delay: .09s; }
.mask-d2.is-in > * { transition-delay: .18s; }
.mask-d3.is-in > * { transition-delay: .27s; }
/* clip reveal for media */
.clip { clip-path: inset(0 0 100% 0); }
.clip.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.15s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .rv, .mask > *, .clip { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .intro { display: none !important; }
  .cursor { display: none !important; }
  .move__stage { min-height: auto; }
  .move__sticky { position: relative; height: auto; padding-block: 80px; }
  .move__media { opacity: 1 !important; position: relative; inset: auto; width: 100%; margin-top: 16px; }
  .hurts__sticky { position: relative; height: auto; }
  .prec__vp { position: relative; height: auto; overflow-x: auto; }
  .prec__track { transform: none !important; }
}

/* ---------- 10 RESPONSIVE ----------------------------------------------- */
@media (max-width: 1100px) {
  .foot__top { grid-template-columns: 1fr 1fr; }
  .close__meta { grid-template-columns: repeat(2, 1fr); }
  .menu { grid-template-columns: 1fr; }
  .menu__media { display: none; }
  .split__l, .split__r { grid-column: 1 / -1; }
  .sticky-side { position: static; }
  .tile { grid-column: span 6; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .hero { align-items: flex-end; }
  .hero__bg img { object-position: 62% 32%; }
  .hero__scrim {
    background: linear-gradient(to top, rgba(10,10,12,.95) 8%, rgba(10,10,12,.42) 52%, rgba(10,10,12,.72) 100%);
  }
  .hero__inner { padding-top: 16vh; }
  .hero__ghost { top: 30%; font-size: 30vw; }
  .hero__head, .hero__sub, .hero__cta { grid-column: 1 / -1; }
  .hero__cta { margin-top: var(--s5); }
  .hero__scroll { display: none; }
  .hero__meta { font-size: 10px; }

  .move__type { font-size: clamp(2.1rem, 10vw, 3.4rem); }
  .move__copy .grid > * { grid-column: 1 / -1; }
  .move__m1 { left: -4%; top: 6%; width: 42vw; }
  .move__m2 { right: -6%; top: 16%; width: 34vw; }
  .move__m3 { left: 2%; bottom: 2%; width: 44vw; }
  .move__m4 { right: 0; bottom: 8%; width: 30vw; }

  .hurts__sticky { grid-template-columns: 1fr; align-content: center; gap: var(--s5); padding-top: clamp(84px, 12vh, 120px); }
  .hurts__stage { height: 42svh; }
  .hurts__figure { aspect-ratio: 3/4; height: 100%; }
  .hurts__panels { height: auto; min-height: 34svh; }
  .hurts__panel { position: absolute; }
  .hurts__panel h3 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .hurts__panel p { font-size: var(--fs-sm); }
  .hurts__tags { margin-block: var(--s4); }

  .journey__row { grid-template-columns: 60px 1fr; row-gap: var(--s3); }
  .journey__row p { grid-column: 2; }

  .doc__portrait { width: min(360px, 76vw); margin-top: -12%; }
  .doc__strip { grid-template-columns: 1fr; }
  .doc__strip figure + figure { margin-top: var(--s4); }

  .prec__panel { grid-template-columns: 1fr; gap: var(--s4); flex-basis: 86vw; }
  .prec__panel .prec__media { order: -1; }

  .treat__row { row-gap: var(--s4); }
  .treat__row--a figure, .treat__row--b figure, .treat__row--c figure { grid-column: 1 / -1; }
  .treat__row--a .treat__txt, .treat__row--b .treat__txt, .treat__row--c .treat__txt { grid-column: 1 / -1; }
  .treat__row--a .treat__n, .treat__row--b .treat__n, .treat__row--c .treat__n { grid-column: 1 / -1; text-align: left; }
  .treat__row--c figure, .treat__row--c figure img { aspect-ratio: 3/2; }

  .story__item { grid-template-columns: 1fr; align-content: start; gap: var(--s5); }
  .story__item figure { max-height: 40svh; aspect-ratio: 3/2; }
  .story__stage { min-height: clamp(520px, 74vh, 720px); }

  .gal .g1, .gal .g2, .gal .g3, .gal .g4, .gal .g5 { grid-column: 1 / -1; aspect-ratio: 3/2; }
  .gal .g2, .gal .g3 { aspect-ratio: 4/5; }

  .form { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; }
  .close__meta { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 520px) {
  .btn { width: 100%; justify-content: space-between; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .doc__type { font-size: 19vw; }
}

/* ---------- 11 PATCHES -------------------------------------------------- */
.doc__type .ln1 { display: block; }
.hero h1 .mask + .mask { margin-top: -.02em; }
.hurts__head h2 .mask, .rec__head h2 .mask, .close h2 .mask, .phero h1 .mask { display: block; }
.treat__row figure { align-self: start; }
.smark { width: 100%; }
.crumb span[aria-current] { color: var(--paper-64); }
.tlink[data-cursor] { cursor: pointer; }
.gal figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,12,14,.6), transparent 46%);
  pointer-events: none;
}
.rec__frame figcaption { z-index: 3; }
.story__item[aria-hidden="true"] * { visibility: hidden; }
.story__item.is-on * { visibility: visible; }

/* Reduced motion: unpin every scroll-driven module and let content stack */
@media (prefers-reduced-motion: reduce) {
  .hurts__track { height: auto !important; }
  .hurts__sticky { grid-template-columns: 1fr; }
  .hurts__stage { height: auto; }
  .hurts__figure { height: auto; aspect-ratio: 4/5; }
  .hurts__figure img { position: relative; opacity: 0; }
  .hurts__figure img.is-on { opacity: 1; }
  .hurts__figure img:not(.is-on) { display: none; }
  .hurts__panels { height: auto; min-height: 0; }
  .hurts__panel {
    position: relative; opacity: 1; transform: none; pointer-events: auto;
    border-top: 1px solid var(--paper-14); padding-block: var(--s5);
  }
  .hurts__cross, .hurts__dot, .hurts__idx, .hurts__prog { display: none; }
  .prec__pin { height: auto !important; }
  .prec__vp { display: block; }
  .prec__track { flex-direction: column; gap: var(--s7); padding-block: var(--s7); }
  .prec__panel { flex-basis: auto; }
  .prec__bar { display: none; }
  .story__stage { min-height: 0; }
  .story__item {
    position: relative; opacity: 1; transform: none; pointer-events: auto;
    padding-block: var(--s6); border-top: var(--hair);
  }
  .story__item[aria-hidden="true"] * { visibility: visible; }
  .story__btns { display: none; }
  .move__type .w { transform: none !important; }
  .rec__frame img { transform: none !important; }
}

/* ---------- 12 QA FIXES ------------------------------------------------- */
/* Hero must resolve inside one viewport, including both CTAs and the meta row */
.hero h1 { font-size: clamp(2.9rem, 7.9vw, 6.9rem); line-height: .9; }
.hero__inner { padding-block: clamp(96px, 13vh, 150px) clamp(52px, 7vh, 78px); }
.hero__sub { font-size: clamp(1rem, 1.15vw, 1.2rem); max-width: 34ch; }
.hero__cta { align-items: center; }
.nav__logo img { height: clamp(30px, 3vw, 42px); width: auto; }
@media (max-height: 760px) and (min-width: 861px) {
  .hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); }
  .hero__sub { display: none; }
}
@media (max-width: 860px) {
  .nav .btn--sm { display: none; }
  .nav { padding-block: 14px; }
  .hero h1 { font-size: clamp(2.5rem, 11.6vw, 3.9rem); }
  .hero__ghost { opacity: .07; }
  .hero__inner { padding-block: 92px 26px; }
  .hero__sub { font-size: .95rem; max-width: 30ch; }
  .hero__meta { gap: 4px; font-size: .5625rem; }
  .hero__meta span:nth-child(2) { display: none; }
  .hero__scroll { display: none; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(2.3rem, 11.2vw, 3.4rem); }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

/* ---------- 13 QA FIXES II ---------------------------------------------- */
.hero__cta { grid-column: 1 / span 5; }
.hero__scroll { grid-column: 9 / span 4; justify-self: end; text-align: right; }
@media (max-width: 860px) {
  .hero__bg img { object-position: 62% 18%; }
  .hero__scrim { opacity: .84; }
  .hero__cta, .hero__scroll { grid-column: 1 / -1; }
}

/* ---------- 14 QA FIXES III --------------------------------------------- */
/* The movement copy must arrive as an opaque plate over the pinned type,
   never as text colliding with it. */
.move__copy {
  position: relative; z-index: 5; background: var(--ivory);
  border-top: var(--hair); padding-block: clamp(44px, 7vh, 96px) clamp(8px, 2vh, 24px);
}
.move__stage { min-height: 210vh; }
@media (max-width: 860px) { .move__stage { min-height: 190vh; } }

/* ---------- 15 CLIP REVEAL FIX ------------------------------------------ */
/* A clip-path on the observed element makes its intersection rect empty in
   Chromium, so the reveal never fires. Clip the media inside instead. */
.clip { clip-path: none; }
.clip > img, .clip > picture, .clip > picture > img {
  clip-path: inset(0 0 100% 0);
}
.clip.is-in > img, .clip.is-in > picture, .clip.is-in > picture > img {
  clip-path: inset(0 0 0 0); transition: clip-path 1.15s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .clip > img, .clip > picture, .clip > picture > img { clip-path: none !important; }
}

/* ---------- 16 DOCTOR STACK FIX ----------------------------------------- */
.doc__aside { margin-top: clamp(20px, 3vw, 40px); }
@media (min-width: 861px) {
  .doc__facts { margin-top: clamp(-190px, -13vw, -70px); }
  .doc__aside > p:last-child { margin-top: clamp(-150px, -10vw, -50px); }
}

/* ---------- 17 OVERFLOW FIX --------------------------------------------- */
/* Bleeding editorial crops must never create a horizontal scrollbar. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ===================== 18. HERO v2 + DOCTOR PORTFOLIO ===================== */
.hero--v2 .hero__inner{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(20px,3vh,38px);padding-bottom:clamp(20px,4vh,46px)}
.hero--v2 .hero__block{max-width:min(72ch,100%)}
.hero--v2 .hero__kicker{color:var(--paper-64);margin:0 0 clamp(14px,2vh,24px)}
.hero--v2 .hero__sub{max-width:46ch;margin-top:clamp(16px,2.4vh,28px)}
.hero--v2 .hero__cta{margin-top:clamp(20px,3vh,34px)}
.hero__rail{position:absolute;left:calc(var(--gutter)/2);bottom:clamp(110px,22vh,240px);margin:0;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--paper-40);letter-spacing:.24em;z-index:3}
.hero__bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(14px,2.4vw,32px);border-top:1px solid rgba(244,241,234,.18);padding-top:clamp(12px,2vh,20px)}
.hero__list{display:flex;flex-wrap:wrap;gap:clamp(10px,1.8vw,26px);list-style:none;margin:0;padding:0;color:var(--paper-64)}
.hero__list li{position:relative;padding-left:15px}
.hero__list li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:1px;background:var(--paper-40)}
.hero__down{color:var(--paper)}

.docx{background:var(--graphite);color:var(--paper);position:relative;overflow:clip}
.docx .smark,.docx .smark__n,.docx .smark__t{color:var(--paper-40);border-color:rgba(244,241,234,.18)}
.docx__type{margin:clamp(18px,3vw,34px) 0 0;font-size:clamp(3.4rem,14vw,13rem);line-height:.84;letter-spacing:-.05em;text-transform:uppercase;font-weight:600;color:var(--paper)}
.docx__type .ln1,.docx__type .ln2{display:block}
.docx__type .ln2{color:transparent;-webkit-text-stroke:1.3px rgba(244,241,234,.42);margin-left:.14em}
.docx__stage{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:end}
.docx__portrait{grid-column:2/span 5;margin:clamp(-160px,-10vw,-56px) 0 0;aspect-ratio:4/5;overflow:hidden;background:var(--graphite-2);position:relative;z-index:2}
.docx__portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.docx__side{grid-column:8/span 4;padding-bottom:clamp(6px,1vw,18px)}
.docx__spec{margin:0}
.docx__spec>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid rgba(244,241,234,.14)}
.docx__spec dt{flex:0 0 auto;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-40)}
.docx__spec dd{margin:0;text-align:right;font-size:var(--fs-sm);color:var(--paper)}
.docx__quote{margin:clamp(48px,7vw,104px) 0 0 auto;width:min(900px,100%);padding-left:clamp(18px,2.4vw,34px);border-left:1px solid rgba(244,241,234,.22);font-size:var(--fs-d3);line-height:1.16;letter-spacing:-.02em;color:var(--paper)}
.docx__quote .hl{color:var(--accent-soft)}
.docx__work{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:clamp(48px,7vw,104px)}
.docx__work figure{margin:0;overflow:hidden}
.docx__work img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.docx__work .cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-40)}
.docx__more{margin-top:clamp(32px,4.4vw,60px)}
.docx__more .tlink{color:var(--paper)}

@media (max-width:860px){
  .hero__rail{display:none}
  .hero--v2 .hero__list{display:none}
  .hero--v2 .hero__inner{justify-content:flex-start;padding-top:clamp(92px,16vh,150px)}
  .hero--v2 .hero__bar{margin-top:auto}
  .docx__stage{grid-template-columns:1fr}
  .docx__portrait{grid-column:auto;width:min(420px,84vw);margin-top:-10%}
  .docx__side{grid-column:auto;margin-top:clamp(24px,4vw,40px)}
  .docx__quote{margin-left:0;padding-left:14px}
  .docx__work{grid-template-columns:1fr}
}

/* ===== 19. DOCTOR TYPE ALIGNMENT FIX ===== */
.docx__type{grid-template-columns:1fr}
.docx__type .ln1{justify-self:start;text-align:left}
.docx__type .ln2{justify-self:end;text-align:right}
@media (max-width:860px){
.docx__type .ln2{justify-self:start;text-align:left}
}

/* ===== 20. HERO v2 MOBILE ANCHORING + LEGIBILITY ===== */
.hero.hero--v2{display:flex;flex-direction:column}
.hero--v2 .hero__inner{flex:1 1 auto;min-height:0}
@media (max-width:860px){
.hero--v2 .hero__scrim{opacity:1;background:linear-gradient(180deg,rgba(10,10,12,.93) 0%,rgba(10,10,12,.78) 38%,rgba(10,10,12,.5) 66%,rgba(10,10,12,.88) 100%)}
.hero--v2 .hero__sub{max-width:34ch}
}

/* ===== 21. DOCTOR PORTFOLIO MOBILE TYPE CLEARANCE ===== */
@media (max-width:860px){
.docx__portrait{margin-top:clamp(10px,2vh,18px)}
.docx__type{margin-bottom:clamp(4px,1vh,10px)}
}

/* ===== 22. JOURNEY ROWS: MOBILE GRID FIX ===== */
@media (max-width:860px){
.journey__row{grid-template-columns:46px 1fr;column-gap:14px;row-gap:10px}
.journey__row .n{grid-column:1;grid-row:1;padding-top:3px}
.journey__row h3{grid-column:2;grid-row:1}
.journey__row p:not(.n){grid-column:2;grid-row:2;font-size:var(--fs-sm);line-height:1.6}
}

/* ===== 23. NAV LOGO ALIGNMENT ===== */
.nav{align-items:center}
.nav__logo{align-items:center;line-height:0}
.nav__logo .lg-wrap{display:block;line-height:0;font-size:0}
.nav__logo img{display:block;height:clamp(68px,5.6vw,104px);width:auto}
.nav__logo .lg-light{position:absolute;left:0;top:0}
@media (max-width:860px){.nav__logo img{height:44px}}
.nav .btn--sm{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.nav .btn--sm:hover{background:var(--accent-soft);border-color:var(--accent-soft)}

/* ===== 24. HERO v3 (CENTRED EDITORIAL) ===== */
.hero--v3 .hero__bg img{object-position:50% 42%}
.hero--v3 .hero__scrim{opacity:1;background:radial-gradient(120% 100% at 50% 38%,rgba(10,10,12,.26) 0%,rgba(10,10,12,.60) 52%,rgba(10,10,12,.93) 100%),linear-gradient(180deg,rgba(10,10,12,.74) 0%,rgba(10,10,12,.22) 26%,rgba(10,10,12,.86) 100%)}
.hero__arc{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(58% 74% at 50% 44%,transparent 61.4%,rgba(163,44,36,.22) 61.7%,transparent 62.2%),radial-gradient(86% 104% at 44% 50%,transparent 63.2%,rgba(244,241,234,.09) 63.5%,transparent 64%)}
.hero__dots{position:absolute;left:0;bottom:14%;width:190px;height:130px;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(244,241,234,.24) 1px,transparent 1px);background-size:13px 13px;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.hero--v3 .hero__inner{justify-content:center;align-items:center;text-align:center;padding-block:clamp(120px,17vh,180px) clamp(34px,6vh,72px)}
.hero--v3 .hero__block{max-width:min(1120px,94vw);margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.hero--v3 .hero__kicker{letter-spacing:.32em;color:var(--paper-64);margin:0 0 clamp(16px,2.4vh,26px)}
.hero--v3 .hero__kicker em{font-style:normal;color:var(--accent-soft)}
.hero--v3 h1{font-size:clamp(2.2rem,6.4vw,5.4rem);line-height:1;letter-spacing:-.035em;text-transform:uppercase;font-weight:600}
.hero--v3 h1 em{font-style:normal;color:var(--accent-soft)}
.hero--v3 .hero__sub{margin:clamp(18px,2.6vh,30px) auto 0;max-width:60ch;color:var(--paper-64)}
.hero--v3 .hero__sub em{font-style:normal;color:var(--accent-soft);font-weight:500}
.hero__hr{display:block;position:relative;width:clamp(130px,18vw,230px);height:1px;margin:clamp(22px,3.4vh,38px) auto 0;background:linear-gradient(90deg,transparent,rgba(244,241,234,.46),transparent)}
.hero__hr::after{content:"";position:absolute;left:50%;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateX(-50%);box-shadow:0 0 14px 3px rgba(163,44,36,.55)}
.hero--v3 .hero__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,3.2vh,36px)}
.hero__stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,30px);width:min(1060px,96%);margin:clamp(26px,4.4vh,52px) auto 0;padding:clamp(16px,2.2vw,26px) clamp(14px,2vw,30px);border:1px solid rgba(244,241,234,.16);background:rgba(10,10,12,.40);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.hero__stats li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.hero__stats li+li::before{content:"";position:absolute;left:calc(-1 * clamp(5px,1vw,15px));top:8%;bottom:8%;width:1px;background:rgba(244,241,234,.16)}
.hero__stats b{font-size:clamp(1.45rem,2.9vw,2.35rem);font-weight:600;letter-spacing:-.03em;color:var(--paper);line-height:1}
.hero__stats span{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-40);line-height:1.5}
@media (max-width:860px){
.hero--v3 .hero__bg img{object-position:50% 34%}
.hero--v3 .hero__inner{justify-content:flex-end;padding-block:clamp(90px,13vh,130px) clamp(24px,4vh,40px)}
.hero--v3 h1{font-size:clamp(2rem,9.2vw,2.9rem)}
.hero--v3 .hero__kicker{font-size:.625rem;letter-spacing:.26em}
.hero--v3 .hero__sub{font-size:.9375rem;max-width:38ch}
.hero--v3 .hero__cta{width:100%;flex-direction:column;gap:10px}
.hero--v3 .hero__cta .btn{width:100%}
.hero__stats{grid-template-columns:repeat(2,1fr);gap:0;width:100%;padding:0}
.hero__stats li{padding:14px 8px;border-bottom:1px solid rgba(244,241,234,.12)}
.hero__stats li:nth-child(odd){border-right:1px solid rgba(244,241,234,.12)}
.hero__stats li:nth-last-child(-n+2){border-bottom:0}
.hero__stats li+li::before{display:none}
.hero__stats span{font-size:.5625rem;letter-spacing:.12em;text-align:center}
.hero__dots{display:none}
.hero__arc{background:radial-gradient(78% 52% at 50% 40%,transparent 62%,rgba(163,44,36,.18) 62.4%,transparent 63%)}
}

/* ===== 25. HERO v3 CENTRING + SCRIM BALANCE ===== */
.hero--v3 .hero__kicker,.hero--v3 h1,.hero--v3 .hero__sub,.hero--v3 .hero__hr,.hero--v3 .hero__cta,.hero--v3 .hero__stats{align-self:center}
.hero--v3 .hero__cta{grid-column:auto}
.hero--v3 .hero__scrim{background:radial-gradient(122% 104% at 50% 40%,rgba(10,10,12,.10) 0%,rgba(10,10,12,.44) 54%,rgba(10,10,12,.88) 100%),linear-gradient(180deg,rgba(10,10,12,.62) 0%,rgba(10,10,12,.06) 26%,rgba(10,10,12,.30) 58%,rgba(10,10,12,.80) 100%)}
.hero--v3 h1{text-shadow:0 2px 34px rgba(10,10,12,.55)}
.hero--v3 .hero__sub{text-shadow:0 1px 18px rgba(10,10,12,.6)}

/* ===== 26. HERO v3 COPY LEGIBILITY ===== */
.hero--v3 .hero__scrim{background:radial-gradient(48% 34% at 50% 54%,rgba(10,10,12,.62) 0%,rgba(10,10,12,.28) 62%,transparent 100%),radial-gradient(122% 104% at 50% 40%,rgba(10,10,12,.10) 0%,rgba(10,10,12,.44) 54%,rgba(10,10,12,.88) 100%),linear-gradient(180deg,rgba(10,10,12,.62) 0%,rgba(10,10,12,.06) 26%,rgba(10,10,12,.30) 58%,rgba(10,10,12,.80) 100%)}
.hero--v3 .hero__sub{color:rgba(244,241,234,.86)}
.hero--v3 .hero__kicker{color:rgba(244,241,234,.78)}
@media (max-width:860px){
.hero--v3 .hero__scrim{background:linear-gradient(180deg,rgba(10,10,12,.86) 0%,rgba(10,10,12,.34) 30%,rgba(10,10,12,.62) 62%,rgba(10,10,12,.94) 100%)}
}

/* ===== 27. SECTION HEAD GRIDS STACK ON MOBILE ===== */
@media (max-width:860px){
.grid{grid-template-columns:1fr}
.grid>*{grid-column:1/-1!important}
}

/* ===== 28. LOGO RED + TIGHTER VERTICAL SCALE ===== */
:root{
--accent:#981D0E;          /* sampled from the Vishwas logo */
--accent-soft:#B8291A;
--accent-bright:#C42A15;   /* logo hue, lifted for dark backgrounds */
--fs-mega:clamp(2.9rem,8.2vw,6.6rem);
--fs-d1:clamp(2.4rem,6vw,4.9rem);
--fs-d2:clamp(1.9rem,4.2vw,3.3rem);
--fs-d3:clamp(1.6rem,2.7vw,2.2rem);
}
.section{padding-block:clamp(52px,6.6vh,104px)}
.section--tight{padding-block:clamp(44px,5vh,74px)}
.hero h1 em,.docx__quote .hl{color:var(--accent-bright)}
.phero{min-height:min(76svh,700px)}
.docx__quote{margin-top:clamp(30px,4.2vw,64px);font-size:var(--fs-d3)}
.docx__work{margin-top:clamp(30px,4.2vw,64px)}

/* ===== 29. HERO v4 — EDITORIAL LEDGER COMPOSITION ===== */
.hero--v4{min-height:100svh;display:block;position:relative}
.hero--v4 .hero__bg img{object-position:52% 28%;transform:scale(1.1)}
.hero--v4.is-ready .hero__bg img{transform:scale(1.02);transition:transform 3s var(--ease-out)}
.hero--v4 .hero__scrim{
background:
linear-gradient(to top,rgba(9,9,11,.95) 0%,rgba(9,9,11,.80) 28%,rgba(9,9,11,.30) 54%,rgba(9,9,11,.10) 72%,rgba(9,9,11,.52) 100%),
linear-gradient(90deg,rgba(9,9,11,.60) 0%,rgba(9,9,11,.12) 44%,rgba(9,9,11,0) 68%)}
.hero--v4 .hero__arc{position:absolute;z-index:-1;right:-16vw;top:50%;transform:translateY(-50%);width:62vw;aspect-ratio:1;border-radius:50%;border:1px solid rgba(196,42,21,.34);-webkit-mask-image:linear-gradient(205deg,#000 18%,transparent 60%);mask-image:linear-gradient(205deg,#000 18%,transparent 60%);pointer-events:none}
.hero--v4 .hero__dots{position:absolute;z-index:-1;left:0;bottom:0;width:24vw;height:24vh;background-image:radial-gradient(rgba(244,241,234,.24) 1px,transparent 1px);background-size:14px 14px;-webkit-mask-image:linear-gradient(to top right,#000,transparent 72%);mask-image:linear-gradient(to top right,#000,transparent 72%);opacity:.55;pointer-events:none}
.hero--v4 .hero__rail{position:absolute;left:14px;top:52%;transform:rotate(-90deg);transform-origin:left center;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.34em;text-transform:uppercase;color:var(--paper-40);white-space:nowrap;pointer-events:none}
.hero--v4 .hero__inner{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);align-content:end;padding-top:0;padding-bottom:clamp(26px,4.6vh,58px)}
.hero--v4 .hero__block{grid-column:1/span 7;align-self:end;display:block}
.hero--v4 .hero__kicker{color:var(--paper-64);margin:0 0 clamp(14px,2vh,22px);letter-spacing:.28em;align-self:auto}
.hero--v4 .hero__kicker em{font-style:normal;color:var(--accent-bright)}
.hero--v4 h1{font-size:clamp(2.3rem,6.5vw,5.3rem);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;font-weight:600;text-shadow:0 2px 40px rgba(0,0,0,.55);align-self:auto}
.hero--v4 h1 .mask{display:block}
.hero--v4 .hero__sub{grid-column:auto;align-self:auto;max-width:44ch;margin:clamp(16px,2.4vh,26px) 0 0;color:rgba(244,241,234,.82);font-size:var(--fs-body);line-height:1.55;text-shadow:0 1px 22px rgba(0,0,0,.6)}
.hero--v4 .hero__sub em{font-style:normal;color:var(--paper)}
.hero--v4 .hero__cta{grid-column:auto;align-self:auto;margin-top:clamp(20px,3vh,34px);display:flex;gap:var(--s4);flex-wrap:wrap}
.hero--v4 .hero__ledger{grid-column:9/span 4;align-self:end;justify-self:end;width:min(100%,310px);list-style:none;margin:0;padding:0}
.hero--v4 .hero__ledger li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid rgba(244,241,234,.17)}
.hero--v4 .hero__ledger li:last-child{border-bottom:1px solid rgba(244,241,234,.17)}
.hero--v4 .hero__ledger b{font-size:clamp(1.2rem,1.9vw,1.7rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.hero--v4 .hero__ledger span{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-40);text-align:right;max-width:16ch;line-height:1.4}
.hero--v4 .hero__scroll{position:absolute;left:50%;bottom:clamp(10px,1.8vh,20px);transform:translateX(-50%);grid-column:auto;justify-self:auto;text-align:center;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--paper-40)}
@media (max-width:1100px){.hero--v4 .hero__rail,.hero--v4 .hero__scroll{display:none}}
@media (max-width:860px){
.hero--v4 .hero__bg img{object-position:50% 30%;transform:scale(1.04)}
.hero--v4.is-ready .hero__bg img{transform:scale(1)}
.hero--v4 .hero__scrim{background:linear-gradient(to top,rgba(9,9,11,.95) 0%,rgba(9,9,11,.84) 32%,rgba(9,9,11,.36) 62%,rgba(9,9,11,.58) 100%)}
.hero--v4 .hero__inner{grid-template-columns:1fr;padding-bottom:clamp(20px,3vh,34px)}
.hero--v4 .hero__block{grid-column:1/-1}
.hero--v4 h1{font-size:clamp(2rem,8.8vw,2.9rem)}
.hero--v4 .hero__sub{max-width:38ch;font-size:var(--fs-sm)}
.hero--v4 .hero__cta{flex-direction:column;align-items:stretch;margin-top:18px}
.hero--v4 .hero__ledger{grid-column:1/-1;width:100%;justify-self:stretch;display:grid;grid-template-columns:1fr 1fr;column-gap:18px;margin-top:16px}
.hero--v4 .hero__ledger li{flex-direction:column;align-items:flex-start;gap:2px;padding:9px 0}
.hero--v4 .hero__ledger li:last-child{border-bottom:none}
.hero--v4 .hero__ledger span{text-align:left;max-width:none;font-size:10px}
.hero--v4 .hero__dots{display:none}
}

/* ===== 30. TREATMENT ROW ALIGNMENT + CROPS ===== */
.treat__row{align-items:start}
.treat__row figure{align-self:start}
.treat__row .treat__n{align-self:start;line-height:.84;margin:0}
.treat__row .treat__txt{align-self:start}
.treat__row img{aspect-ratio:16/10;object-position:50% 46%}
.treat__row--c figure,.treat__row--c figure img{aspect-ratio:21/9}
.treat__row--c .treat__txt{margin-top:var(--s4)}
.treat__row img[src*="anat-shoulder"]{object-position:50% 24%}
.treat__row img[src*="anat-knee"]{object-position:50% 40%}
@media (max-width:860px){
.treat__row img,.treat__row--c figure,.treat__row--c figure img{aspect-ratio:16/10}
.treat__row .treat__n{font-size:clamp(1.6rem,7vw,2.2rem)}
}

/* ===== 31. DOCTOR STAGE — NAME STAYS VISIBLE ===== */
.docx__type{font-size:clamp(2.6rem,9.2vw,7.2rem);line-height:.86}
.docx__type .ln1,.docx__type .ln2{justify-self:start;text-align:left}
.docx__type .ln2{margin-left:.04em;-webkit-text-stroke:1.1px rgba(244,241,234,.5)}
.docx__stage{align-items:end;margin-top:clamp(12px,1.8vw,26px)}
.docx__portrait{grid-column:7/span 6;justify-self:end;width:min(100%,460px);margin:clamp(-26px,-1.8vw,-6px) 0 0;aspect-ratio:4/5}
.docx__side{grid-column:1/span 6;padding-bottom:clamp(8px,1.6vw,26px)}
.docx__work img{aspect-ratio:3/4}
@media (max-width:860px){
.docx__portrait{grid-column:auto;width:min(340px,78vw);margin-top:12px;justify-self:start}
.docx__side{grid-column:auto;margin-top:clamp(20px,3.4vw,34px)}
}

/* ===== 32. ROW PLACEMENT + HERO POLISH + DOCTOR DENSITY ===== */
/* root cause of misaligned treatment rows: right-side figures pushed the
   number + title into a second implicit grid row */
.treat__row--a>figure,.treat__row--a>.treat__n,.treat__row--a>.treat__txt,
.treat__row--b>figure,.treat__row--b>.treat__n,.treat__row--b>.treat__txt,
.treat__row--c>figure,.treat__row--c>.treat__n{grid-row:1}
.treat__row--c>.treat__txt{grid-row:2}
@media (max-width:860px){
.treat__row>figure,.treat__row>.treat__n,.treat__row>.treat__txt{grid-row:auto!important}
}
/* red: hold the logo hue on dark surfaces */
:root{--accent-bright:#B4230F}
/* vertical rail without rotation clipping */
.hero--v4 .hero__rail{writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:center;left:12px;top:auto;bottom:clamp(300px,42vh,440px);letter-spacing:.3em}
.hero--v4 .hero__arc{right:-24vw;border-color:rgba(180,35,15,.26)}
@media (max-width:860px){
.hero--v4 .hero__kicker{font-size:10px;letter-spacing:.16em;gap:10px}
.hero--v4 .hero__kicker::before{width:22px;flex:0 0 22px}
}
/* doctor stage: close the dead space, keep the name clear */
.docx__stage{align-items:start}
.docx__portrait{margin:clamp(-22px,-1.4vw,-4px) 0 0}
.docx__side{align-self:start;padding-bottom:0;margin-top:clamp(6px,1vw,16px)}
.docx__quote{margin-left:0;max-width:56ch}
.docx__work img{aspect-ratio:1/1}
@media (max-width:860px){.docx__quote{padding-left:14px}}

/* ===== 33. PRECISION PANEL NEVER CLIPS ===== */
.prec__panel{box-sizing:border-box;grid-template-columns:minmax(0,1fr) minmax(0,1fr);flex-basis:min(1080px,90vw);max-width:100vw}
.prec__panel:first-child{flex-basis:min(1180px,92vw)}
.prec__panel>*{min-width:0}
.prec__panel p{max-width:42ch;overflow-wrap:break-word}
.prec__panel h3{overflow-wrap:break-word}
@media (max-width:860px){
.prec__panel{grid-template-columns:minmax(0,1fr);flex-basis:min(560px,88vw)}
.prec__panel:first-child{flex-basis:min(560px,88vw)}
}

/* ===== 34. DOCTOR PAGE PORTFOLIO — NAME NEVER COVERED ===== */
.doc__type{text-align:left}
.doc__type .ln1,.doc__type .ln2{display:block;text-align:left}
@media (min-width:861px){
.doc__portrait{width:min(420px,36vw);margin:clamp(-26px,-1.8vw,-6px) 0 0 auto}
}
@media (max-width:860px){
.doc__type{font-size:clamp(2.6rem,13.5vw,4.6rem)}
.doc__portrait{width:min(100%,420px);margin:16px 0 0!important;aspect-ratio:4/5}
.doc__aside{margin-top:clamp(18px,3.6vw,32px)}
.doc__facts{margin-top:0}
.doc__quote{max-width:34ch}
}
@media (max-width:520px){.doc__type{font-size:13.5vw}}

/* ===== 35. DOCTOR PAGE DENSITY (desktop) ===== */
@media (min-width:861px){
.doc__portrait{margin:clamp(-300px,-20vw,-110px) 0 0 auto}
.doc__aside{margin-top:clamp(-330px,-22vw,-120px)}
.doc__facts{margin-top:0}
.doc__aside>p:last-child{grid-column:1/span 4!important;align-self:start;margin-top:var(--s5)}
.doc__quote{max-width:32ch}
.doc__strip{margin-top:clamp(32px,3.4vw,56px)}
}

/* ===== 36. DOCTOR PAGE — GUARANTEED CLEARANCE ===== */
@media (min-width:861px){
.doc__type{font-size:clamp(3.2rem,11.2vw,9.5rem)}
.doc__portrait{width:min(400px,29vw)}
.doc__quote{grid-column:5/span 4!important}
.doc__strip{margin-top:clamp(44px,4.4vw,72px);position:relative;z-index:4}
}

/* ===== 37. DOCTOR SECTIONS — NO OVERLAP, NO VOID ===== */
@media (min-width:861px){
/* homepage: spec list sits BESIDE the portrait, same grid row */
.docx__stage>.docx__portrait{grid-row:1}
.docx__stage>.docx__side{grid-row:1;align-self:start;margin-top:clamp(6px,1.2vw,20px)}
/* doctor page: text always BELOW the name; only the portrait rises beside it */
.doc__aside{margin-top:clamp(26px,2.8vw,46px)}
.doc__facts{margin-top:0}
.doc__aside>p:last-child{margin-top:clamp(20px,2.4vw,34px)}
.doc__portrait{margin:clamp(-340px,-23vw,-120px) 0 0 auto}
}
@media (max-width:860px){
.docx__stage>.docx__portrait,.docx__stage>.docx__side{grid-row:auto!important}
}

/* ---------- 38 SURGICAL CARE — LARGER MEDIA + INTRO SMALL SCREENS ---- */
@media (min-width: 861px) {
.prec__panel{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,3.6vw,60px);align-items:center;flex-basis:min(1340px,94vw)}
.prec__panel:first-child{flex-basis:min(1400px,95vw)}
.prec__media{aspect-ratio:16/11;max-height:70svh}
.prec__panel p{max-width:36ch}
}
@media (max-width: 860px) {
.prec__panel{flex-basis:min(680px,93vw)}
.prec__panel:first-child{flex-basis:min(680px,93vw)}
.prec__media{aspect-ratio:4/3}
}
@media (max-width: 520px) {
.intro__meta{font-size:.5625rem;letter-spacing:.2em}
.intro__m--tr,.intro__m--bl{display:none}
.intro__kicker{letter-spacing:.34em}
.intro__ruler{width:88vw}
}

/* ---------- 39 HERO SCALE + RECOVERY CROPS + PAGE HERO DENSITY --------- */
@media (min-width: 861px) {
.hero h1{font-size:clamp(2.9rem,6.85vw,6.1rem);line-height:.9}
.hero__inner{padding-block:clamp(62px,7.6vh,96px) clamp(140px,20vh,244px)}
.hero__sub{font-size:clamp(1.02rem,1.2vw,1.24rem)}
}
/* recovery frames: subject-aware crops so heads are never cut */
.rec__frame:nth-of-type(1) img{object-position:50% 14%}
.rec__frame:nth-of-type(2) img{object-position:50% 20%}
.rec__frame:nth-of-type(3) img{object-position:50% 38%}
@media (max-width: 860px) {
.rec__frame{height:clamp(430px,64svh,620px)}
.rec__frame img{height:108%;top:-4%}
.rec__frame:nth-of-type(1) img{object-position:64% 10%}
.rec__frame:nth-of-type(2) img{object-position:58% 16%}
.rec__frame:nth-of-type(3) img{object-position:50% 32%}
.rec__frame figcaption{font-size:.95rem}
}
/* inner page heroes: shorter, better framed on phones */
@media (max-width: 860px) {
.phero{min-height:min(60svh,540px)}
.phero__inner{padding-block:clamp(74px,11vh,104px) clamp(24px,4vh,38px)}
.phero__bg img{object-position:50% 18%}
.phero h1{font-size:clamp(2.1rem,9.2vw,3rem)}
.phero .lead{font-size:.95rem;max-width:34ch;margin-top:var(--s4)}
}
@media (max-width: 520px) {
.phero{min-height:min(56svh,470px)}
}

/* ==================== 40 BLOG / INSIGHTS ==================== */
.bmeta{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;color:var(--ink-60)}
.bmeta span+span{position:relative;padding-left:18px}
.bmeta span+span::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--ink-40)}
.keys{border-left:2px solid var(--accent);padding:2px 0 2px 22px;margin:0 0 clamp(28px,3vw,40px)}
.keys .label{color:var(--accent);margin-bottom:12px}
.keys ul{margin:0;padding-left:18px}
.keys li{margin:0 0 8px;font-size:.9375rem;line-height:1.55}
.tile__k{display:block;color:var(--accent);margin-bottom:10px;letter-spacing:.14em}
.blist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-12)}
.blist li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 2px;border-bottom:1px solid var(--ink-12);transition:padding .55s var(--ease)}
.blist li:hover{padding-left:12px}
.blist a{font-size:clamp(1.05rem,1.6vw,1.3rem);text-decoration:none;color:var(--ink);letter-spacing:-.01em}
.blist li:hover a{color:var(--accent)}
.blist span{color:var(--ink-40);font-size:.875rem}
.bcta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.prose .keys li{font-size:.9375rem}
@media (max-width:860px){
.keys{padding-left:16px}
.blist a{font-size:1.05rem}
.bmeta{font-size:.6875rem}
.bcta .btn{flex:1 1 260px;justify-content:center;min-height:48px}
}

/* ============ 41 CLOSING WORDMARK FIX + DOCTOR SECTION v3 ============ */
/* the oversized MOVE wordmark stays behind the content and no longer clips out of frame */
.close__inner { position: relative; z-index: 1; }
.close__meta { position: relative; z-index: 2; }
.close__ghost{
  right:auto; left:50%; transform:translateX(-50%); bottom:-9%;
  font-size:clamp(4rem,12.6vw,11rem); line-height:.72; white-space:nowrap;
  letter-spacing:-.05em; -webkit-text-stroke:1px rgba(244,241,234,.055);
}
@media (max-width:860px){ .close__ghost{ font-size:23vw; bottom:-3% } }
@media (max-width:520px){ .close__ghost{ display:none } }

/* ---- doctor section, rebuilt as a portfolio spread ---- */
.dsec { background: var(--ivory); }
.dsec__name{
  font-size:clamp(2.6rem,9.4vw,7.6rem); line-height:.85; letter-spacing:-.05em;
  text-transform:uppercase; font-weight:500; margin:clamp(22px,3vw,44px) 0 0;
}
.dsec__name i{ font-style:normal; font-size:.34em; letter-spacing:.01em; vertical-align:.72em; color:var(--accent); margin-right:.2em; }
.dsec__last{ display:block; }
.dsec__role{
  display:flex; flex-wrap:wrap; gap:8px 0; color:var(--ink-60);
  margin:clamp(20px,2.6vw,34px) 0 clamp(30px,4vw,58px);
  border-top:1px solid var(--ink-12); padding-top:var(--s4);
}
.dsec__role span{ padding-right:clamp(14px,1.6vw,26px); margin-right:clamp(14px,1.6vw,26px); border-right:1px solid var(--ink-12); }
.dsec__role span:last-child{ border-right:0; margin-right:0; padding-right:0; }
.dsec__grid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(26px,3.6vw,68px); align-items:start; }
.dsec__pic{ margin:0; position:relative; overflow:hidden; }
.dsec__pic img{ display:block; width:100%; aspect-ratio:2/3; max-height:78svh; object-fit:cover; object-position:50% 16%; }
.dsec__cap{
  position:static; display:flex; justify-content:space-between; gap:16px; margin-top:14px;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-40);
}
.dsec__body{ display:flex; flex-direction:column; gap:clamp(24px,2.8vw,40px); }
.dsec__quote{
  margin:0; font-size:clamp(1.3rem,2.35vw,2.2rem); line-height:1.18; letter-spacing:-.02em;
  border-left:2px solid var(--accent); padding-left:clamp(18px,2vw,30px);
}
.dsec__quote .hl{ color:var(--accent); }
.dsec__note{ color:var(--ink-60); max-width:46ch; }
.dsec__spec{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px clamp(20px,2.4vw,36px); margin:0; border-top:1px solid var(--ink-12); padding-top:clamp(20px,2.4vw,32px); }
.dsec__spec dt{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-40); margin-bottom:6px; }
.dsec__spec dd{ margin:0; font-size:.9375rem; line-height:1.45; }
.dsec__cta{ display:flex; align-items:center; gap:clamp(16px,2vw,30px); flex-wrap:wrap; }
.dsec__work{ margin-top:clamp(44px,5.6vw,104px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.8vw,30px); }
.dsec__work figure{ margin:0; overflow:hidden; }
.dsec__work img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (min-width:861px){ .dsec__name .mask + .mask > span{ padding-left:clamp(40px,11vw,200px); } }
@media (max-width:860px){
  .dsec__name{ font-size:clamp(2.3rem,12.4vw,4.2rem); }
  .dsec__grid{ grid-template-columns:1fr; gap:clamp(26px,5vw,40px); }
  .dsec__pic img{ aspect-ratio:4/5; max-height:none; }
  .dsec__spec{ gap:18px 20px; }
  .dsec__work{ grid-template-columns:1fr; }
  .dsec__work img{ aspect-ratio:3/2; }
  .dsec__role{ font-size:.625rem; }
}

/* ============ 42 HERO BLOCK LIFT (v4) ============ */
@media (min-width:861px){
  .hero--v4 .hero__inner{ padding-bottom:clamp(76px,10.5vh,140px) }
  .hero--v4 .hero__sub{ font-size:clamp(1rem,1.15vw,1.18rem) }
}
@media (max-width:860px){
  .hero--v4 .hero__inner{ padding-bottom:clamp(44px,7vh,78px) }
}

/* ============ 43 NAV: NO MENU BUTTON ON LAPTOP + SINGLE WORK IMAGE ============ */
@media (min-width:861px){
  .burger{ display:none }
  .nav__right{ gap:0 }
}
.dsec__work--one{ grid-template-columns:1fr }
@media (min-width:861px){
  .dsec__work--one img{ aspect-ratio:16/9; object-position:50% 30% }
}

/* ===== 44 DOCTOR PAGE PORTRAIT SCALE ===== */
/* doctor page: the portrait was too small next to the name */
@media (min-width:861px){
  .doc__portrait{ width:min(640px,44vw); margin:clamp(-330px,-20vw,-90px) 0 0 auto }
}
@media (max-width:860px){
  .doc__portrait{ width:min(100%,560px) }
}

/* ===== 45 INTRO v6 — CSS-BUILT SURGICAL STAGE (no artwork, no svg) ===== */
.intro__scene{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none }
.intro__scene::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 78% at 50% 4%, rgba(255,255,255,.05), transparent 56%),
             radial-gradient(90% 60% at 50% 112%, rgba(255,255,255,.045), transparent 58%) }

/* the overhead lamp ignites */
.intro__lamp{ position:absolute; left:50%; top:-8%; width:min(540px,62vw); aspect-ratio:2/1;
  transform:translateX(-50%) scale(.9); opacity:0; filter:blur(2px);
  background:radial-gradient(50% 58% at 50% 42%, rgba(240,248,250,.92), rgba(212,231,235,.4) 44%,
             rgba(176,202,208,.11) 70%, transparent 80%);
  animation:iLamp 1000ms cubic-bezier(.16,1,.3,1) 200ms forwards }
@keyframes iLamp{ to{ opacity:1; transform:translateX(-50%) scale(1) } }

/* its light descends as a hard-edged cone */
.intro__shaft{ position:absolute; left:50%; top:0; width:min(780px,88vw); height:76%;
  transform:translateX(-50%); overflow:hidden;
  clip-path:polygon(42% 0, 58% 0, 95% 100%, 5% 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 52%,transparent);
  mask-image:linear-gradient(180deg,#000 0 52%,transparent) }
.intro__shaft::before{ content:""; position:absolute; inset:0; transform:translateY(-102%);
  background:linear-gradient(180deg, rgba(228,242,245,.34), rgba(198,220,226,.12) 40%, transparent 78%);
  animation:iShaft 1300ms cubic-bezier(.16,1,.3,1) 340ms forwards }
@keyframes iShaft{ to{ transform:translateY(0) } }

/* two thin arcs sweep in from the wings, in the logo red */
.intro__arc{ position:absolute; top:50%; width:min(1240px,124vw); aspect-ratio:1; border-radius:50%; opacity:0;
  background:radial-gradient(closest-side, transparent 79%, rgba(152,29,14,.8) 80%,
             rgba(184,41,26,.16) 82%, transparent 84%) }
.intro__arc--l{ left:-64%; transform:translateY(-50%) translateX(-7%);
  animation:iArcL 1400ms cubic-bezier(.16,1,.3,1) 880ms forwards }
.intro__arc--r{ right:-64%; transform:translateY(-50%) translateX(7%);
  animation:iArcR 1400ms cubic-bezier(.16,1,.3,1) 980ms forwards }
@keyframes iArcL{ to{ opacity:.92; transform:translateY(-50%) translateX(0) } }
@keyframes iArcR{ to{ opacity:.92; transform:translateY(-50%) translateX(0) } }

/* the floor catches the light */
.intro__floor{ position:absolute; left:50%; bottom:17%; width:min(1120px,92vw); height:1px; opacity:0;
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  background:linear-gradient(90deg,transparent,rgba(152,29,14,.5) 20%,rgba(255,238,234,.9) 50%,
             rgba(152,29,14,.5) 80%,transparent);
  animation:iFloor 1100ms cubic-bezier(.16,1,.3,1) 1480ms forwards }
@keyframes iFloor{ to{ opacity:1; transform:translateX(-50%) scaleX(1) } }
.intro__flare{ position:absolute; left:50%; bottom:17%; width:min(240px,44vw); aspect-ratio:1; opacity:0;
  transform:translate(-50%,50%) scale(.4);
  background:radial-gradient(closest-side, rgba(255,242,238,.8), rgba(184,41,26,.3) 32%, transparent 64%);
  animation:iFlare 1300ms ease-out 1860ms forwards }
@keyframes iFlare{ 32%{ opacity:1; transform:translate(-50%,50%) scale(1) }
  100%{ opacity:.4; transform:translate(-50%,50%) scale(1.14) } }

/* the mark rises through the light */
.intro__stage{ position:relative; width:min(760px,86vw) }
.intro__logo{ width:min(420px,68vw) }
.intro__mark{ position:relative; z-index:2 }
.intro__kicker{ position:relative; z-index:2 }
.intro__scan{ left:-8%; right:-8%; top:2%; height:52% }
@media (max-width:860px){
  .intro__lamp{ width:76vw }
  .intro__shaft{ width:98vw; height:62% }
  .intro__arc{ width:154vw }
  .intro__floor{ width:94vw }
  .intro__logo{ width:min(300px,74vw) }
}
@media (prefers-reduced-motion:reduce){
  .intro__lamp,.intro__shaft::before,.intro__arc,.intro__floor,.intro__flare{ animation:none }
}

/* 45b intro: css choreography for the mark, kicker and corner plate
   (the script drives these too; identical targets, so they never fight) */
.intro__logo{ animation:iMark 900ms cubic-bezier(.16,1,.3,1) 2120ms forwards }
@keyframes iMark{ from{ transform:translateY(104%) } to{ transform:translateY(0) } }
.intro__kicker{ animation:iKick 800ms cubic-bezier(.16,1,.3,1) 2440ms forwards }
@keyframes iKick{ from{ opacity:0; letter-spacing:.78em } to{ opacity:1; letter-spacing:.5em } }
.intro__m{ animation:iMeta 700ms cubic-bezier(.16,1,.3,1) 1340ms forwards }
.intro__m--tr{ animation-delay:1450ms } .intro__m--bl{ animation-delay:1560ms } .intro__m--br{ animation-delay:1670ms }
@keyframes iMeta{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:translateY(0) } }
@media (prefers-reduced-motion:reduce){
  .intro__logo,.intro__kicker,.intro__m{ animation:none; opacity:1; transform:none }
}

/* ===== 46 DOCTOR PAGE: PORTFOLIO ON THE HOME DOCTOR LAYOUT ===== */
.dsec--doc{ background:var(--ivory-2); overflow:clip }
.dsec--doc .dsec__quote{ font-size:clamp(1.2rem,2.1vw,1.8rem) }
@media (min-width:861px){
  .dsec--doc .dsec__name{ font-size:clamp(3.2rem,10.8vw,8.4rem) }
  .dsec--doc .dsec__grid{ grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(30px,4vw,72px) }
  .dsec--doc .dsec__pic img{ max-height:86svh; object-position:50% 12% }
}
/* areas of focus: real internal links, 44px tap targets */
.dsec__focus{ display:flex; flex-wrap:wrap; gap:10px;
  border-top:1px solid var(--ink-12); padding-top:clamp(20px,2.4vw,32px) }
.dsec__focus a{ display:inline-flex; align-items:center; min-height:44px; padding:0 15px;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); border:1px solid var(--ink-12);
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease) }
.dsec__focus a:hover,.dsec__focus a:focus-visible{ background:var(--graphite); border-color:var(--graphite); color:var(--paper) }
@media (max-width:860px){
  .dsec--doc .dsec__pic img{ aspect-ratio:4/5 }
  .dsec__focus{ gap:8px }
  .dsec__focus a{ padding:0 12px }
}
/* 46b keep the name clear of the portrait, and let the right column
   distribute down the full height of the picture instead of leaving a void */
@media (min-width:861px){
  .dsec--doc .dsec__grid{ padding-top:clamp(22px,2.6vw,40px); align-items:stretch }
  .dsec--doc .dsec__body{ justify-content:space-between }
}

/* ===== 47 SECOND SURGEON: TEAM BLOCK (doctor page band + homepage inline row) ===== */
.dteam{background:var(--ivory-2)}
.dteam__row{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(24px,3.4vw,64px);align-items:center}
.dteam__pic{margin:0;overflow:hidden;background:var(--ivory-3)}
.dteam__pic img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 14%}
.dteam__body{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.4vw,20px)}
.dteam__kicker{color:var(--accent)}
.dteam__name{font-family:"Inter Tight","Inter",system-ui,sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:.92;font-size:clamp(1.75rem,3.6vw,3.1rem);margin:0}
.dteam__role{color:var(--ink-40)}
.dteam__body .dsec__cta{margin-top:clamp(8px,1vw,14px)}
.dteam--inline{margin-top:clamp(46px,5.4vw,96px);padding-top:clamp(30px,3.4vw,56px);border-top:1px solid var(--ink-12);background:none}
.dteam--inline .dteam__row{grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);align-items:center}
@media (min-width:861px){.dteam--inline .dteam__pic img{aspect-ratio:3/4}}
@media (max-width:860px){
  .dteam__row,.dteam--inline .dteam__row{grid-template-columns:1fr;gap:clamp(20px,5vw,30px)}
  .dteam__pic img,.dteam--inline .dteam__pic img{aspect-ratio:4/5;max-height:70svh}
  .dteam--inline{margin-top:clamp(34px,8vw,54px)}
}

/* ===== 47b TEAM BAND BALANCE (doctor page) ===== */
@media (min-width:861px){
  .dteam .dteam__row{grid-template-columns:minmax(0,.34fr) minmax(0,.66fr)}
  .dteam .dteam__pic img{aspect-ratio:3/4;max-height:58svh}
  .dteam__body p.measure{max-width:52ch}
}

/* ---------- 20 MOBILE QA: HERO TYPE + MOVEMENT STATEMENT ---------------- */
/* The display headings asked for weight 600, but the webfont request only
   loaded 400/500. Mobile browsers therefore synthesised a faux-bold, which
   read as a different typeface to the rest of the page. Weight 600 is now
   requested in the <head>; block synthesis so a slow font load can never
   reintroduce the mismatch. */
.hero--v3 h1,
.hero--v4 h1,
.hero--v4 .hero__ledger b,
.hero__stats b,
.hero--v4 .hero__ledger span {
  font-family: var(--sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 860px) {
  /* --- Hero: keep the surgeon's face clear of the headline ------------- */
  /* hero-ot-mobile.webp is 768x1660, so on a phone it covers the viewport
     almost exactly and object-position has no room to work. Lift the crop
     with a transform instead, then compress the text block so the type
     starts below the face rather than across it. */
  .hero--v4 .hero__bg img {
    object-position: 50% 0%;
    transform: scale(1.1) translateY(-5.5%);
    transform-origin: 50% 50%;
  }
  .hero--v4 .hero__scrim {
    background: linear-gradient(to top,
      rgba(9, 9, 11, .97) 0%,
      rgba(9, 9, 11, .95) 32%,
      rgba(9, 9, 11, .88) 44%,
      rgba(9, 9, 11, .46) 57%,
      rgba(9, 9, 11, .16) 71%,
      rgba(9, 9, 11, .60) 100%);
  }
  .hero--v4 .hero__inner { padding-bottom: clamp(20px, 3vh, 30px); }
  .hero--v4 .hero__kicker {
    flex-wrap: wrap;
    row-gap: 5px;
    min-width: 0;
    margin-bottom: 10px;
  }
  .hero--v4 h1 {
    font-size: clamp(1.95rem, 8.4vw, 2.8rem);
    line-height: .93;
    letter-spacing: -.038em;
  }
  .hero--v4 .hero__sub {
    max-width: 34ch;
    margin-top: 12px;
    font-size: .8125rem;
    line-height: 1.5;
  }
  /* Two-up CTAs reclaim ~56px of vertical space, which is what pushed the
     headline up onto the face. Both remain full-height tap targets. */
  .hero--v4 .hero__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
  }
  .hero--v4 .hero__cta .btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 10px;
    justify-content: center;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: .06em;
  }
  .hero--v4 .hero__ledger { margin-top: 14px; }
  .hero--v4 .hero__ledger li { padding: 7px 0; }

  /* --- Movement statement: mobile choreography (MOVE-CHOREO) ------------
     This section used to be flattened on phones into a static 2x2 plate,
     which killed the reveal entirely. It is pinned again here, but sized
     for a phone: the four figures sit in the four corners at safe widths
     so the three lines of type keep a clear band across the middle of the
     screen. The old mobile offsets parked two of them partly off-screen
     (left:-4%, right:-6%), so all four are re-anchored.
     opacity and transform are deliberately NOT set here - site.js drives
     them per frame so the images fade, rise, drift and settle on scroll. */
  /* content defines the track now - see MOVE-PHASES below */
  .move__stage { min-height: 0; }
  .move__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    overflow: hidden;
    padding: 0 var(--gutter);
  }
  .move__type {
    order: 0;
    grid-column: auto;
    text-align: center;
    font-size: clamp(2rem, 10.4vw, 3.2rem);
    line-height: .94;
    letter-spacing: -.04em;
    margin-bottom: 0;
    z-index: 2;
  }
  .move__m1 { left: 3%;  top: 7%;     right: auto; bottom: auto; width: 40vw; aspect-ratio: 4/5; }
  .move__m2 { right: 3%; top: 15%;    left: auto;  bottom: auto; width: 32vw; aspect-ratio: 3/4; }
  .move__m3 { left: 5%;  bottom: 6%;  right: auto; top: auto;    width: 42vw; aspect-ratio: 3/2; }
  .move__m4 { right: 4%; bottom: 15%; left: auto;  top: auto;    width: 30vw; aspect-ratio: 4/5; }
  /* MOVE-PHASES: this block is opaque and paints above the pinned
     statement (z-index 5 vs 2), and in flow it starts immediately
     after the sticky - so on a full-width phone it rose up and wiped
     the headline from about a third of the way in. One screen of
     transparent space in front of it gives the pinned choreography
     clean, uncovered scroll time; the copy then rises over the
     finished statement as a deliberate handoff, as it does on
     desktop. Measured: the copy itself is only 340px tall. */
  .move__copy {
    margin-top: 100svh;
    padding-top: clamp(30px, 5vh, 52px);
  }
}

@media (max-width: 380px) {
  /* Very narrow phones: let the CTAs stack again rather than squeeze the
     labels to an unreadable size. */
  .hero--v4 .hero__cta { grid-template-columns: 1fr; gap: 8px; }
  .hero--v4 .hero__cta .btn { min-height: 44px; font-size: 10px; }
  .hero--v4 .hero__sub { font-size: .78125rem; }
}

/* ===== 48 SECOND SURGEON BLOCK, REDESIGNED =====
   Rebuilt to use the same portfolio language as the Dr. Nisarg section
   (quote, spec table, focus chips, caption) at a deliberately smaller scale,
   so the page reads as one system instead of a photo with a paragraph. */
.dteam__row{align-items:start}
.dteam__pic{position:relative;overflow:visible}
.dteam__pic::after{content:"";position:absolute;left:0;top:0;width:56px;height:3px;background:var(--accent);z-index:2}
.dteam__pic img{aspect-ratio:2/3;max-height:none;object-position:50% 10%}
.dteam__pic .dsec__cap{margin-top:14px}
.dteam__body{gap:clamp(16px,1.9vw,26px)}
.dteam__name{font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:.88;letter-spacing:-.042em}
.dteam__name i{font-style:normal;font-size:.34em;letter-spacing:.01em;vertical-align:.72em;color:var(--accent);margin-right:.2em}
.dteam__last{display:block}
/* .dteam__body is align-items:flex-start, so full-width children must say so */
.dteam__role{display:flex;flex-wrap:wrap;gap:8px 0;width:100%;color:var(--ink-60);margin:0;border-top:1px solid var(--ink-12);padding-top:var(--s4)}
.dteam__role span{padding-right:clamp(12px,1.5vw,24px);margin-right:clamp(12px,1.5vw,24px);border-right:1px solid var(--ink-12)}
.dteam__role span:last-child{border-right:0;margin-right:0;padding-right:0}
.dteam__body .dsec__quote{font-size:clamp(1.05rem,1.9vw,1.6rem)}
.dteam__body .dsec__note{max-width:54ch}
.dteam__body .dsec__spec,.dteam__body .dsec__focus{width:100%}
.dteam__body .dsec__spec{padding-top:clamp(18px,2vw,26px);gap:18px clamp(18px,2.2vw,32px)}
.dteam__body .dsec__focus{padding-top:clamp(18px,2vw,26px)}
@media (min-width:861px){
  .dteam .dteam__row,.dteam--inline .dteam__row{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:clamp(30px,3.8vw,72px)}
  .dteam .dteam__pic img,.dteam--inline .dteam__pic img{aspect-ratio:2/3;max-height:74svh}
}
@media (max-width:860px){
  .dteam__pic img,.dteam--inline .dteam__pic img{aspect-ratio:4/5;max-height:60svh;object-position:50% 12%}
  .dteam__name{font-size:clamp(1.85rem,9.4vw,2.7rem)}
  .dteam__role{font-size:.625rem}
  .dteam__body .dsec__spec{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
}
@media (max-width:420px){
  .dteam__body .dsec__spec{grid-template-columns:1fr}
}

/* ===== 49 SECOND SURGEON BLOCK: QA REFINEMENTS ===== */
/* The two caption labels together are wider than this figure (the profile
   page figure is far wider), so they were clipping. Let them wrap, and drop
   them on mobile where the name and role already sit directly underneath. */
.dteam__pic .dsec__cap{flex-wrap:wrap;gap:4px 16px;letter-spacing:.12em}
@media (max-width:860px){
  .dteam__pic .dsec__cap{display:none}
  /* keep the spec table two-up at 390px; one column made the block very long */
  .dteam__body .dsec__spec{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:360px){
  .dteam__body .dsec__spec{grid-template-columns:1fr}
}

/* === 52 . CONTRAST REMEDIATION === */
/* Measured failures this fixes (WCAG AA, audited at 390x844 and 1440x900):
   - dark sections inherited the light-mode ink tokens, so body copy and list
     items landed on graphite at 1.01-1.02:1 and were effectively invisible
   - --ink-40 label text measured 2.49-2.65:1 on the ivory canvases
   - --paper-40 label text measured 3.51-3.53:1 on graphite
   - accent used as text on graphite measured 2.16-2.90:1 */
:root{
  --ink-60: rgba(26,26,24,.72);       /* body copy on ivory   -> ~6.4:1 */
  --ink-40: rgba(26,26,24,.64);       /* labels on ivory      -> ~4.9:1 */
  --paper-40: rgba(244,241,234,.56);  /* labels on graphite   -> ~5.9:1 */
  --accent-on-dark: #D9705E;          /* accent text on dark  -> ~5.7:1 */
  --accent-bright: #C4331F;           /* display accent, large text -> ~3.5:1 */
}

/* Dark contexts re-map the ink tokens onto their paper equivalents.
   .vipx is deliberately NOT listed: it is a body-level class that wraps
   predominantly light content (cards, summaries, forms, ivory sections). */
:is(.dark,.on-dark,.close,.hurts,.prec,.docx,.foot,.phero,.hero,.tile){
  --ink-60: rgba(244,241,234,.74);    /* -> ~9.3:1 on graphite */
  --ink-40: rgba(244,241,234,.56);    /* -> ~5.9:1 on graphite */
}

/* Accent as *text* on graphite is only ~2.2:1. Lift it on the label elements
   themselves so an inline color:var(--accent) resolves to the legible tint,
   while solid accent fills, rules and list bullets keep the true brand red. */
:is(.dark,.on-dark,.close,.hurts,.prec,.docx,.foot,.phero,.hero,.tile,.vx-hero) :is(.label,.smark__n,.tile__k,.n,.hurts__idx){
  --accent: var(--accent-on-dark);
  --accent-soft: var(--accent-on-dark);
}

/* The hero kicker is 10-11px, so it needs the full 4.5:1 rather than the
   large-text allowance the mega headline gets from --accent-bright. */
:is(.hero,.hero--v4) .hero__kicker em{ color: var(--accent-on-dark); }

/* Light panels nested inside dark sections must keep dark ink. */
:is(.dark,.on-dark,.close,.hurts,.prec,.docx,.foot,.phero,.hero,.tile) :is(.btn--paper,.map,input,select,textarea){
  --ink-60: rgba(26,26,24,.72);
  --ink-40: rgba(26,26,24,.64);
  --accent: #981D0E;
  --accent-soft: #B8291A;
}

/* contact.html: .map is an ivory-3 panel sitting inside a .dark section, so
   its label inherited paper-white text onto a light background. */
:is(.dark,.on-dark,.close,.hurts,.prec,.docx,.foot,.phero,.hero,.tile) .map{ color: var(--ink); }
:is(.dark,.on-dark,.close,.hurts,.prec,.docx,.foot,.phero,.hero,.tile) .map :is(.label,.smark__n,.tile__k,.n){
  --accent: #981D0E;
  --accent-soft: #B8291A;
}

/* === 53 . MOBILE SCROLL === */
/* The horizontal scroll-lock is desktop-only. Below 861px the panels stack
   and scroll normally, mirroring the prefers-reduced-motion fallback. Without
   this, .prec__vp stayed sticky + overflow:hidden with a 1813px-wide track
   inside a 390px box, and the pin added ~1300px of dead vertical scroll. */
@media (max-width: 860px) {
  .prec__pin { height: auto !important; }
  .prec__vp {
    position: relative; top: auto; height: auto;
    overflow: visible; display: block;
  }
  .prec__track {
    flex-direction: column; gap: var(--s7); padding-block: var(--s7);
    transform: none !important; will-change: auto;
  }
  /* in a column flex container flex-basis sets HEIGHT, so it must be reset */
  .prec__panel, .prec__panel:first-child { flex-basis: auto; }
  .prec__bar { display: none; }
}

/* === 54 . MOBILE ORDER, PACING & CLICKABLE MEDIA === */

/* Dr. Smit / team row on a phone: the name reads first, then a smaller
   portrait.  display:contents lifts .dteam__body's children into the row
   grid so the heading can be ordered above the figure without changing the
   markup (which would disturb the two-column desktop layout). */
@media (max-width: 860px) {
  .dteam__row, .dteam--inline .dteam__row {
    display: grid; grid-template-columns: 1fr;
    gap: clamp(16px, 4vw, 22px); align-items: start;
  }
  .dteam__body { display: contents; }
  .dteam__kicker { order: -3; }
  .dteam__name { order: -2; }
  .dteam__pic { order: -1; width: 74%; max-width: 300px; }
  .dteam__pic img, .dteam--inline .dteam__pic img {
    aspect-ratio: 4/5; max-height: 46svh; object-position: 50% 12%;
  }
  .dteam__body .dsec__cta { margin-top: 4px; }
}

/* Where it hurts: the track is 700vh, which is seven screens of flicking on
   a phone.  All that momentum was still being carried when the track ended,
   so the next section shot past.  Half the track, same eight regions. */
@media (max-width: 860px) {
  .hurts__track { height: 420vh !important; }
}

/* Tapping the picture should do what tapping the link does */
.treat__row figure > a.treat__imglink { display: block; width: 100%; height: 100%; }
.treat__row figure > a.treat__imglink img { display: block; }
.hurts__figure.is-link { cursor: pointer; }

/* === 55 . CONTACT LINES & INSTAGRAM === */
/* the appointment grid now carries five items, so let it reflow */
.close__meta{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.foot__social{display:flex;align-items:center;gap:12px;margin-top:18px}
.foot__social .fsoc{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;color:#fff;background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF);transition:transform .5s var(--ease-out),filter .5s var(--ease-out)}
.foot__social .fsoc svg{width:21px;height:21px}
.foot__social .fsoc:hover{transform:translateY(-2px);filter:brightness(1.09)}
.foot__social .fsoc__h{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;color:var(--paper-64)}

.igx{background:var(--graphite);color:var(--ivory);padding-block:clamp(56px,9vw,124px);border-top:1px solid var(--paper-14);overflow:hidden}
.igx .muted{color:var(--paper-64)}
.igx__in{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,76px);align-items:center}
.igx__k{color:var(--accent-on-dark)}
.igx__h{font-size:clamp(30px,4.6vw,64px);line-height:1.03;letter-spacing:-.02em;margin:14px 0 0}
.igx__h em{font-style:italic;color:var(--accent-on-dark)}
.igx__lead{margin-top:16px;max-width:48ch}
.igx__cta{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:14px 24px;border:1px solid var(--paper-14);border-radius:999px;color:var(--ivory);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;transition:background .5s var(--ease-out),border-color .5s var(--ease-out),transform .5s var(--ease-out)}
.igx__cta svg{width:19px;height:19px}
.igx__cta i{font-style:normal;transition:transform .5s var(--ease-out)}
.igx__cta:hover{background:rgba(244,241,234,.07);border-color:rgba(244,241,234,.42);transform:translateY(-2px)}
.igx__cta:hover i{transform:translateX(5px)}

.igx__tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;aspect-ratio:4/3;border-radius:22px;padding:28px;text-align:center;color:var(--ivory);background:radial-gradient(120% 120% at 18% 8%,rgba(245,133,41,.20),transparent 56%),radial-gradient(120% 120% at 86% 88%,rgba(129,52,175,.28),transparent 60%),var(--graphite-2);border:1px solid var(--paper-14);transition:transform .6s var(--ease-out),border-color .6s var(--ease-out)}
.igx__tile:hover{transform:translateY(-4px);border-color:rgba(244,241,234,.34)}
.igx__ring{display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:21px;color:#fff;background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF);box-shadow:0 12px 34px rgba(221,42,123,.30)}
.igx__ring svg{width:33px;height:33px}
.igx__tileh{font-size:clamp(19px,2.2vw,27px);letter-spacing:-.01em}
.igx__tilesub{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-64)}

@media (max-width:860px){
  .close__meta{grid-template-columns:repeat(auto-fit,minmax(146px,1fr))}
  .igx{padding-block:clamp(46px,10vw,76px)}
  .igx__in{grid-template-columns:1fr;gap:clamp(24px,6vw,34px)}
  .igx__tile{order:-1;aspect-ratio:16/10}
  .igx__lead{max-width:none}
  .igx__cta{margin-top:22px}
}

/* === 56 . FLOATING INSTAGRAM BUTTON === */
.igfab{position:fixed;right:clamp(14px,2.2vw,26px);bottom:calc(clamp(14px,2.2vw,26px) + env(safe-area-inset-bottom,0px));z-index:85;display:inline-flex;align-items:center;height:56px;border-radius:999px;color:#fff;background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF);box-shadow:0 10px 30px rgba(0,0,0,.28),0 4px 14px rgba(221,42,123,.30);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),opacity .35s var(--ease-out)}
.igfab__ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;flex:0 0 auto}
.igfab__ico svg{width:25px;height:25px}
.igfab__t{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;max-width:0;padding-right:0;opacity:0;overflow:hidden;transition:max-width .55s var(--ease-out),padding-right .55s var(--ease-out),opacity .4s var(--ease-out)}
.igfab:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(0,0,0,.34),0 6px 20px rgba(221,42,123,.38)}
.igfab:hover .igfab__t,.igfab:focus-visible .igfab__t{max-width:190px;padding-right:20px;opacity:1}
.igfab:focus-visible{outline:2px solid var(--ivory);outline-offset:3px}

/* stay out of the way of the open menu and the intro curtain */
body.menu-open .igfab,body.is-locked .igfab{opacity:0;pointer-events:none;transform:translateY(10px)}

@media (max-width:860px){
  .igfab{height:52px}
  .igfab__ico{width:52px;height:52px}
  .igfab__ico svg{width:23px;height:23px}
  .igfab__t{display:none}
  /* clear the vip-opd sticky pay bar */
  .vipx .igfab{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion: reduce){
  .igfab,.igfab__t{transition:none}
  .igfab:hover{transform:none}
}
@media print{.igfab{display:none}}

/* === 57 . HOME VIP SECTION - MOBILE ORDER === */
/* kicker -> heading -> image -> lead, facts, buttons.
   .split__l becomes display:contents so its children can be ordered against
   the image, which lives in .split__r. */
@media (max-width: 860px) {
  #vip-opd .split { display: flex; flex-direction: column; row-gap: clamp(18px, 4vw, 28px); }
  #vip-opd .split__l { display: contents; }
  #vip-opd .split__l > .label { order: -4; }
  #vip-opd .split__l > h2 { order: -3; margin-top: 4px !important; }
  #vip-opd .split__r { order: -2; }
  /* everything else keeps order 0 and follows the image */

  /* display:contents promotes these to flex items, so the flex row-gap now
     stacks on top of each element's own margin-top and the copy drifts
     apart. Let the gap do the spacing. */
  #vip-opd .split__l > p.muted { margin-top: 0 !important; }
  #vip-opd .split__l > dl.facts { margin-top: 0 !important; }
  #vip-opd .split__l > .close__row { margin-top: clamp(4px, 1.2vw, 10px) !important; }
  #vip-opd .split__r .note { margin-top: 12px !important; }
}

/* === 60 . MOBILE MENU: reachable close, scrollable panel, safe areas ======
   The overlay is z-index 95 and paints an opaque graphite field over the
   whole viewport, while the header sits at 90 - so the burger that turns
   into the X was buried underneath it. On a phone there is no Escape key,
   which left the only exit as navigating away. Lift the header above the
   overlay while it is open and keep it transparent so the menu reads as one
   surface. */
body.menu-open .nav {
  z-index: 96;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--paper);
  transform: none;
}
body.menu-open .nav .lg-light { opacity: 1; }
body.menu-open .nav .lg-dark { opacity: 0; }
/* the X needs a real 48px touch target and must never be the thing that is
   hard to hit at the top of a phone screen */
body.menu-open .burger { position: relative; z-index: 2; }
.burger { width: 48px; height: 48px; margin-right: -6px; -webkit-tap-highlight-color: transparent; }

/* A 667px-tall phone (SE, 8, and any iPhone held sideways) could not fit the
   nine page names plus the contact block: it overflowed by ~74px with no way
   to reach it, because a fixed inset:0 grid does not scroll. */
.menu {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  contain: layout paint;
}
@media (max-width: 1100px) {
  .menu { display: block; }
  .menu__list {
    padding-top: max(96px, calc(72px + env(safe-area-inset-top, 0px)));
    padding-bottom: var(--s6);
  }
  .menu__list a { padding-block: 6px; }
  .menu__meta { padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)); }
}
/* short viewports: shrink the type rather than clip the contact details */
@media (max-width: 1100px) and (max-height: 720px) {
  .menu__list { padding-top: max(80px, calc(64px + env(safe-area-inset-top, 0px))); }
  .menu__list a { font-size: clamp(1.7rem, 6.4vw, 2.3rem); }
  .menu__meta { margin-top: var(--s5); gap: var(--s4); }
}

/* === 61 . MOBILE SCROLL SMOOTHNESS ======================================
   A live backdrop blur on a full-width fixed bar means iOS re-blurs a strip
   of the page on every frame of every scroll, which is the single most
   expensive thing on the phone build. The bar is already 86% opaque, so at
   phone widths take it to a flat fill instead - the difference is close to
   invisible and the scroll stops stuttering. */
@media (max-width: 860px) {
  .nav--solid {
    background: rgba(244, 241, 234, .97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .dark .nav--solid, .nav--solid.on-dark {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* optimizeLegibility asks for ligature and kerning work the browser would
   otherwise skip, and it is measurable on long pages for no visible gain in
   these faces. */
body { text-rendering: optimizeSpeed; }
h1, h2, h3, h4, .hero h1, .move__type { text-rendering: optimizeLegibility; }

/* Grey iOS tap flashes on a site with this much full-bleed imagery read as
   glitches rather than feedback. */
a, button, [role="button"], summary { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* Touch targets. Apple's floor is 44px; these sat at 30px and, in the case
   of the region chips, at a 2px painted line with a 30px hit area.

   Keyed to width, not to `pointer: coarse`. Pointer detection is unreliable -
   touch laptops report a fine pointer, some Android browsers report coarse
   for a stylus - and a generous target harms nobody on a small window. */
@media (max-width: 1024px) {
  .tlink { min-height: 44px; align-items: center; padding-bottom: 0; }
  .tlink::after { bottom: 8px; }
  .hurts__prog { gap: 8px; }
  .hurts__prog button { min-height: 2px; }
  .hurts__prog button span { inset: -21px 0; }
  .story__prev, .story__next { min-width: 48px; min-height: 48px; }

  /* Link lists. Padding plus an equal negative margin grows the hit area
     without moving anything: the row keeps its rhythm, the finger gets 44px.
     `.foot li + li` already supplies 9px of separation, so the padding is
     what closes the gap between one target and the next. */
  .foot li a,
  .close__meta a,
  .blist a,
  dd a {
    display: block;
    padding-block: 11px;
    margin-block: -5px;
  }
  .foot li + li { margin-top: 0; }
  .menu__meta a { display: inline-block; padding-block: 12px; }

  /* Prose lists (the 404 signposts) put a link and a description on one line,
     so the link has to stay inline - grow it vertically instead, and space the
     rows so neighbouring targets cannot overlap. */
  .prose li { margin-block: 10px; }
  .prose li > a[href] { display: inline-block; padding-block: 11px; margin-block: -7px; }

  /* the logo is the second most tapped thing on the page after the burger */
  .nav__logo { min-height: 44px; align-items: center; }

  /* phone numbers and addresses are the whole point of a clinic site */
  /* :not(.btn) matters - the WhatsApp CTA is <a class="btn" href="wa.me/...">
     and without this it loses .btn's inline-flex centring and grows a 44px
     line-height, which is what made that button tall and off-centre. */
  address a:not(.btn),
  a[href^="tel:"]:not(.btn),
  a[href^="mailto:"]:not(.btn),
  a[href*="wa.me"]:not(.btn) {
    display: inline-block; min-height: 44px; line-height: 44px;
  }
  .foot__bar a, .crumb a { min-height: 44px; display: inline-flex; align-items: center; }
}


/* Rubber-banding past either end on iOS exposed the browser's own white
   canvas against a dark hero and a dark footer, which reads as a flash of
   broken page. Painting the canvas graphite makes the bounce disappear into
   the design. Pull-to-refresh is deliberately left working - overscroll
   -behavior would take it away, and people do use it. */
html { background: var(--graphite); }

/* === 62 . WHERE IT HURTS: no double-exposed panels =======================
   Both panels crossfaded over .55s on the same opacity curve, stacked in the
   same absolute box. For more than half a second you were reading HIP and
   ANKLE / FOOT printed on top of each other - two headings, two paragraphs,
   two rows of chips, all pale text on the same dark ground. Scroll quickly
   through the seven regions and it never resolved.

   The outgoing panel now leaves quickly and the incoming one waits for it,
   so the two are never both legible, and the panel that is off gets
   visibility:hidden so it cannot contribute a single pixel once it is out. */
.hurts__panel {
  visibility: hidden;
  transition: opacity .16s var(--ease),
              transform .5s var(--ease-out),
              visibility 0s linear .16s;
}
.hurts__panel.is-on {
  visibility: visible;
  transition: opacity .28s var(--ease) .12s,
              transform .6s var(--ease-out) .06s,
              visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  /* stacked and all visible in the reduced-motion layout - do not hide them */
  .hurts__panel, .hurts__panel.is-on { visibility: visible; transition: none; }
}

/* === 63 . KEYBOARD FOCUS ON DARK SECTIONS ===============================
   The global focus ring is `2px solid var(--accent)`, and the brand red on
   graphite measures 2.53:1 - under the 3:1 WCAG asks of a UI indicator. The
   dark-context remap that already exists further up only reaches label text
   (.label, .n, .smark__n ...), so every link and button inside the hero, the
   footer, the region explorer, the closing CTA and the menu had a focus ring
   you could barely find. Same lifted tint, applied to the ring itself. */
:is(.dark, .on-dark, .close, .hurts, .prec, .docx, .foot, .phero, .hero,
    .tile, .vx-hero, .menu, .vintro) :focus-visible {
  outline-color: var(--accent-on-dark);
}
/* the menu is a full-screen graphite panel, and the burger sits over it */
body.menu-open .burger:focus-visible,
.menu :focus-visible { outline-color: var(--accent-on-dark); }

/* The skip link is the first thing a keyboard user meets - it lands on the
   ivory canvas, so it keeps the brand red, but it needs to sit above the
   fixed header rather than behind it. */
.skip:focus { z-index: 200; }

/* === 62 . FOOTER POLICY LINKS ===========================================
   The four pages a payment gateway checks for during merchant verification,
   sitting in the existing .foot__bar. That element is already a wrapping
   flex row, so this is one more item in it - nothing above the footer moves. */
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--s4); }
.foot__legal a { color: var(--paper-40); }
.foot__legal a:hover, .foot__legal a:focus-visible { color: var(--paper); }

/* ===== Google Business Profile map + reviews ============================ */
.map--live { background: var(--graphite-2); border: 1px solid var(--paper-14); }
.map--live iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; filter: saturate(.82) contrast(1.04); }
.map__actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 14px; }
.map__actions .note { max-width: 44ch; }
.map__actions .tlink { flex: 0 0 auto; color: var(--paper); }
.gbp-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--paper-14); }
.gbp-review { padding: 22px 0 24px; border-bottom: 1px solid var(--paper-14); }
.gbp-review__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.gbp-review__top b { color: var(--paper); font-size: 1.02rem; font-weight: 500; }
.gbp-review__stars { color: #e8b45e; font-size: .9rem; letter-spacing: .12em; white-space: nowrap; }
.gbp-review__meta { margin-top: 5px; color: var(--paper-40) !important; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; }
.gbp-review blockquote { margin-top: 14px; color: var(--paper-64); font-size: .98rem; line-height: 1.62; }
@media (max-width: 860px) {
  .map__actions { display: block; }
  .map__actions .tlink { display: inline-block; margin-top: 16px; }
  .map--live iframe { min-height: 300px; }
  .gbp-reviews { grid-template-columns: 1fr; }
}

/* ===== 64. MOBILE BRAND MARK + HAMBURGER CROSS ============================ */
@media (max-width: 860px) {
  /* The full lock-up carries the hospital name and specialty, so it needs
     enough height to remain legible over the hero image. */
  .nav__logo img { height: 54px; }
  .nav__logo { min-height: 54px; }

  /* Keep the three strokes on one exact centre line. The old flex-gap
     transform left the open-state X slightly offset and too thin. */
  .burger { position: relative; width: 52px; height: 52px; margin-right: -6px; }
  .burger span {
    position: absolute; left: 50%; top: 50%;
    width: 30px; height: 2px; margin: 0;
    transform-origin: center;
  }
  .burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 8px)); }
  .burger span:nth-child(2) { transform: translate(-50%, -50%); }
  .burger span:nth-child(3) { transform: translate(-50%, calc(-50% + 8px)); }
  body.menu-open .burger span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { opacity: 0; }
  body.menu-open .burger span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }
}

/* Treatment pages without the shared diagnosis heading use the full reading column. */
@media (min-width: 861px) { .split__r--full { grid-column: 1 / -1; } }

/* Homepage visit map: sits between Hospital experience and Insights. */
.visit-map .split { align-items: center; }
.visit-map .split__r, .visit-map__map { min-width: 0; width: 100%; }
.visit-map__map { height: clamp(360px, 44vw, 620px); }
.visit-map__map iframe { min-height: 0; max-width: 100%; }
.visit-map__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.visit-map__actions .tlink { color: var(--paper); }
@media (max-width: 860px) {
  .visit-map__map { height: 360px; }
  .visit-map__actions { align-items: flex-start; flex-direction: column; }
}

/* Compact footer: keep the logo/contact essentials without the oversized wordmark. */
.foot { padding-top: clamp(42px, 5vw, 72px); }
.foot__top { gap: clamp(24px, 4vw, 48px); }
.foot__word { display: none; }
.foot__bar { margin-top: clamp(28px, 4vw, 48px); }
.foot li + li { margin-top: 5px; }
@media (max-width: 860px) {
  .foot__top > div:nth-child(2) ul,
  .foot__top > div:nth-child(3) > ul:first-of-type { columns: 2; column-gap: 24px; }
  .foot__top > div:nth-child(2) li,
  .foot__top > div:nth-child(3) > ul:first-of-type li { break-inside: avoid; }
}

/* Footer brand lockup: use the current contrast logo and keep the large wordmark visible on mobile too. */
.foot__logo { height: 52px; }
.foot__word { display: block; margin-top: clamp(32px, 5vw, 64px); }
@media (max-width: 860px) {
  .foot__logo { height: 46px; }
  .foot__word { font-size: clamp(3.2rem, 16vw, 6.5rem); margin-top: 32px; }
}

/* Give the full footer lockup more presence on desktop without enlarging mobile navigation. */
.foot__logo { height: 72px; }
@media (max-width: 860px) {
  .foot__logo { height: 46px; }
}

/* Extra-prominent desktop footer lockup. */
.foot__logo { height: 120px; }
@media (max-width: 860px) {
  .foot__logo { height: 46px; }
}