/* ==========================================================================
   NY MedCare — Core Stylesheet v2 (P7 ENAMEL / 15 Distinct Archetypes)
   Warm clinical white ground, deep teal & warm brass accents.
   ========================================================================== */

/* 1. Anti-flash rule — MUST be the first rule */
html, body {
  background: #fbfaf7 !important;
  color: #141210;
  margin: 0;
  padding: 0;
}

:root {
  /* Ground + Ink — P7 ENAMEL */
  --void: #fbfaf7;
  --void-2: #ffffff;
  --void-3: #f4f1ea;
  --ink: #141210;
  --muted: #5a544c;
  --dim: #9a948c;
  --line: rgba(20, 18, 16, 0.12);
  --line-2: rgba(20, 18, 16, 0.06);

  /* Accents */
  --accent: #136f63;
  --accent-deep: #0d564d;
  --accent-2: #b8813a;
  --accent-soft: rgba(19, 111, 99, 0.10);
  --seal: #b8813a;
  --seal-soft: rgba(184, 131, 58, 0.12);

  /* Semantic */
  --alert: #a63a1e;
  --alert-soft: rgba(166, 58, 30, 0.07);
  --ok: #2f7d4f;

  --glass: rgba(255, 255, 255, 0.62);
  --glass-line: rgba(20, 18, 16, 0.10);
  --pill: #141210;
  --pill-ink: #fbfaf7;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(20, 18, 16, 0.06);
  --shadow-md: 0 12px 30px rgba(20, 18, 16, 0.10);
  --shadow-lg: 0 30px 70px rgba(20, 18, 16, 0.14);
  --contact: 0 24px 40px -20px rgba(20, 18, 16, 0.35);

  /* Units — canvas 1512 x 1024 reference */
  --u: calc(100dvh / 1024);
  --h-raw: min(calc(100vw / 1512), calc(100dvh / 1024));
  --h: max(var(--h-raw), 0.97px); /* Clamp for 16px body minimum */
  --gutter: clamp(20px, 5.6vw, 92px);

  /* v2 Animated Channels */
  --hero-y: 0px;
  --hero-img-y: 0px;
  --hero-img-s: 1;
  --hero-opacity: 1;
  --sub-y: 0px;
  --sub-opacity: 1;
  --veil: 0;
  --gl-op: 0.55;
  --marq-x: 0%;
  --skew: 0deg;
  --rail-x: 0px;
  --rail-p: 0;
  --prog: 0%;
  --mos-drift: 0px;
  --idx-y: 0px;

  --ease-in: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-scroll: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-aspect-ratio: 11/10) {
  :root {
    --m: min(calc(100vw / 430), calc(100dvh / 932));
    --h: max(var(--m), 0.97px);
    --u: calc(100dvh / 932);
  }
}

/* ==========================================================================
   2. Reset & Typography
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: calc(16.5 * var(--h));
  line-height: 1.68;
  font-weight: 400;
  color: var(--muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* NEVER overflow-x:hidden */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: none;
}

/* Focus Rings */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Skip Link */
.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 95;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--void);
  font-weight: 600;
  font-size: calc(14 * var(--h));
  border-radius: 8px;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.skip:focus {
  left: var(--gutter);
}

/* Background Canvas & Grain */
canvas#gl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  opacity: var(--gl-op);
  transition: opacity 0.4s linear;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

main#main {
  position: relative;
  z-index: 2;
  overflow-x: clip;
}

/* Tier 2 fallback SVG */
.hero-ecg-fallback {
  display: none;
}
html.no-gl canvas#gl {
  display: none !important;
}
html.no-gl .hero-ecg-fallback {
  display: block;
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 240px;
  pointer-events: none;
  opacity: 0.14;
  z-index: 0;
}
html.no-gl .hero-ecg-fallback path {
  stroke: var(--ink);
  stroke-width: 2.2;
  fill: none;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: ecgDash 2.4s linear infinite;
}
@keyframes ecgDash {
  to { stroke-dashoffset: 0; }
}

/* ==========================================================================
   3. Buttons, Badges & Interactive Elements
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--h));
  padding: calc(14 * var(--h)) calc(28 * var(--h));
  border-radius: 999px;
  background: var(--pill);
  color: var(--pill-ink);
  font-family: 'Inter', sans-serif;
  font-size: calc(15 * var(--h));
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease-scroll), background-color 0.25s, box-shadow 0.25s;
  min-height: 44px;
  white-space: nowrap;
}
.pill:hover {
  background: #000000;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: #ffffff;
}

.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--h));
  padding: calc(14 * var(--h)) calc(28 * var(--h));
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  font-family: 'Inter', sans-serif;
  font-size: calc(15 * var(--h));
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.25s var(--ease-scroll), border-color 0.25s, color 0.25s, background-color 0.25s;
  min-height: 44px;
  white-space: nowrap;
}
.ghost:hover {
  border-color: var(--ink);
  background: rgba(20, 18, 16, 0.03);
  transform: translateY(-2px);
}

/* Topbar */
.topbar {
  position: relative;
  z-index: 51;
  background: var(--accent-deep);
  color: #fbfaf7;
  font-family: 'Inter', sans-serif;
  font-size: calc(12.5 * var(--h));
  font-weight: 600;
  letter-spacing: 0.06em;
  height: calc(36 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
}
.topbar-items {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--h));
}

/* Header v2 — Nav & CTA hard right with --prog hairline */
header.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.34s var(--ease-scroll), box-shadow 0.34s var(--ease-scroll), border-color 0.34s var(--ease-scroll);
}
header.hdr.is-stuck {
  background: rgba(251, 250, 247, 0.88);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: var(--shadow-sm);
}
.hdr-in {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-inline: var(--gutter);
  height: calc(84 * var(--u));
  transition: height 0.34s var(--ease-scroll);
}
header.hdr.is-stuck .hdr-in {
  height: calc(64 * var(--u));
}

/* Progress Hairline */
.hdr::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: var(--prog);
  background: var(--accent);
  transition: width 0.1s linear;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--h));
  color: var(--ink);
}
.brand svg {
  color: var(--accent);
  flex-shrink: 0;
}
.brand-word {
  font-family: 'Manrope', sans-serif;
  font-size: calc(19 * var(--h));
  font-weight: 800;
  letter-spacing: -0.02em;
}
.brand-word b {
  color: var(--accent);
  font-weight: 800;
}

/* Right Nav Block */
.hdr-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: calc(28 * var(--h));
}
nav.nav {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--h));
}
.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: calc(14 * var(--h));
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s ease;
  padding-block: 4px;
}
.nav-link:hover {
  color: var(--accent);
}
.hdr-cta {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--h));
}

/* Section-Index Rail (Desktop >= 1300px) */
.rail {
  position: fixed;
  right: calc(26 * var(--h));
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: calc(13 * var(--h));
  pointer-events: auto;
}
.rail a {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  transition: width 0.32s var(--ease-scroll), background-color 0.32s;
}
.rail a[aria-current="true"] {
  width: 30px;
  background: var(--accent);
}
.rail a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Mobile Burger & Overlay */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 65;
  padding: 0;
}
.burger-bar {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-in), opacity 0.3s var(--ease-in);
}
.burger.is-open .burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.is-open .burger-bar:nth-child(2) {
  opacity: 0;
}
.burger.is-open .burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--void);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(100 * var(--u)) var(--gutter) calc(40 * var(--u));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-in);
}
.mobile-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--h));
}
.mobile-nav a {
  font-family: 'Manrope', sans-serif;
  font-size: calc(28 * var(--h));
  font-weight: 700;
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s var(--ease-in), transform 0.35s var(--ease-in), color 0.2s;
}
.mobile-nav a:hover {
  color: var(--accent);
}
.mobile-overlay.is-active .mobile-nav a {
  opacity: 1;
  transform: translateY(0);
}
.mobile-footer-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Sticky Mobile CTA (<= 900px) */
.mcta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  height: 68px;
  background: rgba(251, 250, 247, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 10px var(--gutter);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  align-items: center;
  gap: 12px;
}
.mcta .pill, .mcta .ghost {
  flex: 1;
  text-align: center;
  padding-block: 10px;
  font-size: 15px;
}

/* ==========================================================================
   4. Entrances & Keyframes
   ========================================================================== */
.appear {
  animation-duration: 1.05s;
  animation-fill-mode: both;
  animation-timing-function: var(--ease-in);
  animation-delay: var(--d, 0.08s);
}
.appear.is-in {
  animation: none;
  opacity: 1;
  transform: none;
  clip-path: none;
  filter: none;
}
.appear--scale { animation-name: in-scale; }
.appear--soft  { animation-name: in-soft; }
.appear--mask  { animation-name: in-mask; }
.appear--pop   { animation-name: in-pop; }
.appear--btn   { animation-name: in-btn; }
.appear--side  { animation-name: in-side; }

@keyframes in-scale { from { opacity: 0; transform: scale(0.84); } }
@keyframes in-soft  { from { opacity: 0; transform: translateY(14px); } }
@keyframes in-mask  { from { opacity: 0; transform: translateY(40%); } }
@keyframes in-pop   { 0% { opacity: 0; transform: scale(0.9); } 70% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes in-btn   { from { opacity: 0; transform: translateY(18px) scale(0.94); } }
@keyframes in-side  { from { opacity: 0; transform: translateX(22px); } }
@keyframes draw     { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }

/* Shared Section Base */
.section {
  padding: calc(96 * var(--u)) var(--gutter);
  position: relative;
}
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: calc(12 * var(--h));
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: calc(16 * var(--h));
  display: block;
}
.sec-title {
  font-size: calc(46 * var(--h));
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: calc(18 * var(--h));
  max-width: calc(920 * var(--h));
}
.sec-lead {
  font-size: calc(20 * var(--h));
  line-height: 1.55;
  color: var(--muted);
  max-width: calc(760 * var(--h));
}

/* ==========================================================================
   5. S1 · Hero — Asymmetric Bleed Split
   ========================================================================== */
.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 58fr 42fr;
  align-items: end;
  gap: calc(48 * var(--h));
  padding: 0 0 calc(90 * var(--u)) var(--gutter);
  position: relative;
  overflow-x: clip;
}
.hero-txt {
  transform: translate3d(0, var(--hero-y), 0);
  opacity: var(--hero-opacity);
  position: relative;
  z-index: 3;
}
.hero h1 {
  font-size: calc(72 * var(--h));
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.025em;
  max-width: calc(760 * var(--h));
  text-wrap: balance;
  margin-bottom: 0;
}
.hero .line {
  display: block;
  overflow: hidden;
  padding: 0.06em 0.15em 0.14em;
}
.hero h1 em {
  color: var(--accent);
  font-style: normal;
  position: relative;
}
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 3px;
  background: var(--accent-2);
  transform-origin: left;
  transform: scaleX(var(--em, 0));
  transition: transform 1.2s var(--ease-in) 0.72s;
}
.is-loaded .hero h1 em::after {
  --em: 1;
}
.hero .lead {
  font-size: calc(20 * var(--h));
  line-height: 1.55;
  color: var(--muted);
  max-width: calc(540 * var(--h));
  margin-top: calc(26 * var(--h));
}
.hero .actions {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--h));
  margin-top: calc(34 * var(--h));
  transform: translate3d(0, var(--sub-y), 0);
  opacity: var(--sub-opacity);
}

/* Hero Bleed Image Column */
.hero-img {
  position: relative;
  height: 100dvh;
  margin-right: 0;
  border-radius: 26px 0 0 0;
  overflow: hidden;
  transform: translate3d(0, var(--hero-img-y), 0) scale(var(--hero-img-s));
  transform-origin: right bottom;
  z-index: 2;
}
.hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--void) 0%, rgba(251, 250, 247, 0.35) 22%, transparent 55%);
}

/* Seal Medallion on the Seam */
.hero-medallion {
  position: absolute;
  left: 58%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--void-2);
  box-shadow: var(--shadow-md);
  z-index: 4;
  display: grid;
  place-items: center;
  color: var(--seal);
}
.hero-medallion svg {
  width: 88px;
  height: 88px;
}

/* Scroll Cue */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: calc(44 * var(--h));
  font-size: calc(13 * var(--h));
  color: var(--dim);
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: opacity 0.3s;
}
.scroll-wheel {
  width: 16px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  position: relative;
}
.scroll-wheel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 2px;
  height: 5px;
  background: var(--accent);
  border-radius: 1px;
  transform: translateX(-50%);
  animation: wheelDrop 1.8s infinite;
}
@keyframes wheelDrop {
  0% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, 8px); opacity: 0; }
}

.hero-veil {
  position: absolute;
  inset: 0;
  background: var(--void);
  opacity: var(--veil);
  pointer-events: none;
  z-index: 3;
}

/* ==========================================================================
   6. S2 · Credential Ribbon — Velocity Marquee
   ========================================================================== */
.ribbon {
  overflow: hidden;
  padding-block: calc(34 * var(--u));
  border-block: 1px solid var(--line);
  background: var(--void-2);
  position: relative;
  z-index: 3;
}
.ribbon-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  transform: translate3d(var(--marq-x), 0, 0) skewX(var(--skew));
  animation: marq 34s linear infinite;
  transition: transform 0.1s linear;
}
@keyframes marq {
  to { transform: translate3d(calc(var(--marq-x) - 50%), 0, 0) skewX(var(--skew)); }
}
.ribbon-track span {
  font-family: 'Manrope', sans-serif;
  font-size: calc(46 * var(--h));
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20, 18, 16, 0.30);
  padding-inline: calc(26 * var(--h));
}
.ribbon-track span:nth-child(3n) {
  color: var(--accent);
  -webkit-text-stroke: 0;
}

/* ==========================================================================
   7. S3 · The Numbers — Arc Stats
   ========================================================================== */
.arc-section {
  background: var(--void);
  padding: calc(100 * var(--u)) var(--gutter);
  display: grid;
  grid-template-columns: 48fr 52fr;
  align-items: center;
  gap: calc(40 * var(--h));
  overflow: hidden;
}
.arc-content {
  max-width: calc(620 * var(--h));
}
.arc-graphic-wrap {
  position: relative;
  width: 100%;
  height: 520px;
}
svg.arcs {
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.arc-line {
  fill: none;
  stroke-width: 1.1;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.arc-section.is-in .arc-line {
  stroke-dashoffset: 0;
}
.arc-dot {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.arc-section.is-in .arc-dot {
  opacity: 1;
  transform: scale(1);
}
.arc-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.35;
  animation: pulseRing 2.8s ease-in-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.35; }
  100% { transform: scale(1.45); opacity: 0; }
}
.arc-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 32px;
  fill: var(--accent-2);
}
.arc-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 2px;
  fill: var(--muted);
  opacity: 0.8;
  text-transform: uppercase;
}

/* Fallback 2x2 grid for mobile */
.arc-fallback-grid {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.arc-fallback-cell {
  background: var(--void-2);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.arc-fallback-cell .num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 48px;
  color: var(--accent-2);
  line-height: 1;
  margin-bottom: 8px;
}
.arc-fallback-cell .lbl {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ==========================================================================
   8. S4 · Why Applicants Choose Us — Sticky-Heading Rail
   ========================================================================== */
.why {
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: calc(80 * var(--h));
  padding-block: calc(120 * var(--u));
  background: var(--void);
}
.why-head {
  position: sticky;
  top: calc(150 * var(--u));
  align-self: start;
}
.why-head .pill {
  margin-top: calc(32 * var(--h));
}
.why-acts {
  display: flex;
  flex-direction: column;
}
.act {
  position: relative;
  padding-block: calc(58 * var(--u));
  isolation: isolate;
  border-top: 1px solid var(--line);
}
.act:first-child {
  border-top: none;
}
.act .idx {
  position: absolute;
  right: 0;
  top: calc(-24 * var(--u));
  z-index: -1;
  font-family: 'Manrope', sans-serif;
  font-size: calc(150 * var(--h));
  font-weight: 800;
  line-height: 0.8;
  color: var(--line-2);
  letter-spacing: -0.04em;
  transition: color 0.3s var(--ease-scroll);
}
.act h3 {
  font-size: calc(26 * var(--h));
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: calc(14 * var(--h));
  transition: color 0.3s var(--ease-scroll);
}
.act p {
  font-size: calc(16.5 * var(--h));
  line-height: 1.68;
  color: var(--muted);
  max-width: calc(640 * var(--h));
}
.act:hover .idx {
  color: var(--accent-soft);
}
.act:hover h3 {
  color: var(--accent);
}

/* ==========================================================================
   9. S5 · What's Included — Masked Mosaic (12-Column Asymmetric)
   ========================================================================== */
.included {
  background: var(--void);
  padding: calc(100 * var(--u)) var(--gutter);
}
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(10 * var(--h));
  min-height: calc(720 * var(--u));
  position: relative;
  isolation: isolate;
}
.m1 { grid-column: span 5; }
.m2 { grid-column: span 4; }
.m3 { grid-column: span 3; }
.m4 { grid-column: span 3; }
.m5 { grid-column: span 4; }
.m6 { grid-column: span 5; }

.mos-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(28 * var(--h));
  background: var(--void-2);
  border: 1px solid var(--line-2);
  min-height: 300px;
}
.mos-card .mos-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-repeat: no-repeat;
  background-size: var(--mos-w, 1200px) var(--mos-h, 720px);
  background-position: var(--mx, 0px) calc(var(--my, 0px) + var(--mos-drift, 0px));
}
.mos-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg,
    rgba(251, 250, 247, 0.97) 0%,
    rgba(251, 250, 247, 0.90) 44%,
    rgba(251, 250, 247, 0.34) 100%);
}
.mos-card .ico {
  width: 26px;
  height: 26px;
  color: var(--accent);
  margin-bottom: calc(14 * var(--h));
  flex-shrink: 0;
}
.mos-card h3 {
  font-size: calc(20 * var(--h));
  font-weight: 700;
  margin-bottom: calc(8 * var(--h));
  position: relative;
  z-index: 1;
}
.mos-card p {
  font-size: calc(15 * var(--h));
  line-height: 1.55;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   10. S6 · Margin Note — TB Positive Guidance
   ========================================================================== */
.note {
  display: grid;
  grid-template-columns: calc(72 * var(--h)) 1fr;
  max-width: calc(940 * var(--h));
  margin-inline: auto;
  padding-block: calc(70 * var(--u));
  border-left: 1px solid var(--alert);
  padding-left: calc(34 * var(--h));
  margin-top: calc(40 * var(--u));
  margin-bottom: calc(40 * var(--u));
}
.note .ico {
  width: 24px;
  height: 24px;
  color: var(--alert);
  margin-top: 4px;
}
.note h3 {
  font-size: calc(21 * var(--h));
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: calc(12 * var(--h));
}
.note p {
  font-size: calc(18 * var(--h));
  color: var(--ink);
  line-height: 1.65;
}

/* ==========================================================================
   11. S7 · The Process — Horizontal Pinned Scroll Rig
   ========================================================================== */
section.rig#process {
  height: calc(5 * 86vh); /* 430vh pin length */
  position: relative;
  background: var(--void);
}
.stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.process-pinned-head {
  position: absolute;
  top: calc(70 * var(--u));
  left: var(--gutter);
  z-index: 5;
  max-width: calc(540 * var(--h));
}
.track {
  display: flex;
  gap: calc(28 * var(--h));
  padding-inline: 12vw;
  width: max-content;
  transform: translate3d(var(--rail-x), 0, 0);
  align-items: center;
}
.hpanel {
  flex: 0 0 clamp(360px, 46vw, 640px);
  opacity: calc(0.34 + var(--a, 0.4) * 0.66);
  transform: translateY(calc((1 - var(--a, 0.4)) * 18px));
  background: var(--void-2);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  padding: calc(44 * var(--h));
  border: 1px solid var(--line);
  transition: opacity 0.12s linear;
}
.hpanel.is-lit {
  opacity: 1;
  box-shadow: var(--shadow-lg);
}
.hpanel .n {
  font-family: 'Manrope', sans-serif;
  font-size: calc(110 * var(--h));
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--line);
  transition: color 0.3s var(--ease-scroll);
  margin-bottom: calc(14 * var(--h));
}
.hpanel.is-lit .n {
  color: var(--accent);
}
.hpanel h3 {
  font-size: calc(24 * var(--h));
  font-weight: 700;
  margin-bottom: calc(10 * var(--h));
}
.hpanel p {
  font-size: calc(16.5 * var(--h));
  line-height: 1.6;
  color: var(--muted);
}
.hpanel .when {
  font-family: 'Inter', sans-serif;
  font-size: calc(13.5 * var(--h));
  font-weight: 600;
  color: var(--accent-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: calc(20 * var(--h));
}
.rail-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--line);
  z-index: 10;
}
.rail-progress-inner {
  height: 100%;
  width: calc(var(--rail-p, 0) * 100%);
  background: var(--accent);
  transition: width 0.1s linear;
}

/* ==========================================================================
   12. S8 · What to Bring — Trigger Card + A27 Modal Overlay
   ========================================================================== */
.bring-trigger-sec {
  background: var(--void-3);
  padding: calc(100 * var(--u)) var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bring-card-wrap {
  max-width: calc(1000 * var(--h));
  margin: 0 auto;
}
.trigger-plate {
  background: var(--void-2);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  padding: calc(48 * var(--h));
  position: relative;
  overflow: hidden;
  margin-top: calc(36 * var(--u));
}
.preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
.preview-item {
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--h));
  padding-block: calc(16 * var(--h));
  border-bottom: 1px solid var(--line-2);
}
.trigger-cta-bar {
  position: absolute;
  bottom: calc(28 * var(--h));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
}
.sub-note {
  font-size: calc(14.5 * var(--h));
  color: var(--dim);
  margin-top: 8px;
}

/* Modal Overlay (A27) */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 18, 16, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-scroll);
}
.modal-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}
.modal-panel {
  max-width: calc(760 * var(--h));
  max-height: 86dvh;
  overflow-y: auto;
  background: var(--void-2);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: calc(48 * var(--h));
  position: relative;
  transform: scale(0.95);
  transition: transform 0.28s var(--ease-scroll);
}
.modal-overlay.is-active .modal-panel {
  transform: scale(1);
}
.modal-close-btn {
  position: absolute;
  top: calc(24 * var(--h));
  right: calc(24 * var(--h));
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--void);
  transition: background-color 0.2s;
}
.modal-close-btn:hover {
  background: var(--line-2);
}
.chk {
  list-style: none;
  padding: 0;
  margin: calc(28 * var(--h)) 0 0;
}
.chk li {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--h));
  padding-block: calc(15 * var(--h));
}
.chk .nm {
  font: 600 calc(17 * var(--h))/1.4 'Inter', sans-serif;
  color: var(--ink);
  flex: 0 0 auto;
}
.chk .dots {
  flex: 1;
  border-bottom: 1px dashed var(--line);
  transform: translateY(-4px);
}
.chk .nt {
  font-size: calc(14.5 * var(--h));
  color: var(--muted);
  flex: 0 0 auto;
  max-width: 46%;
  text-align: right;
}

/* ==========================================================================
   13. S9 · Vaccines — Pointer-Driven Index Swapper
   ========================================================================== */
.vax-sec {
  background: var(--void);
  padding: calc(100 * var(--u)) var(--gutter);
}
.vax {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(56 * var(--h));
  align-items: start;
  margin-top: calc(40 * var(--u));
}
.vax-list-wrap {
  position: relative;
}
.vax-list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}
.vax-list li + li {
  border-top: 1px solid var(--line-2);
}
.vax-list button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: calc(15 * var(--h)) 0;
  background: none;
  border: 0;
  text-align: left;
  font: 600 calc(18 * var(--h))/1.3 'Inter', sans-serif;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.22s var(--ease-scroll);
}
.vax-list button[aria-selected="true"] {
  color: var(--accent);
}
.vax-bar {
  position: absolute;
  left: calc(-18 * var(--h));
  top: 0;
  width: 2px;
  height: calc(30 * var(--h));
  background: var(--accent);
  border-radius: 2px;
  transform: translateY(var(--idx-y));
  transition: transform 0.22s var(--ease-scroll);
}
.vax-detail {
  position: sticky;
  top: calc(160 * var(--u));
  background: var(--void-2);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: calc(44 * var(--h));
  min-height: calc(320 * var(--u));
  border: 1px solid var(--line);
}
.vax-detail .n {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: calc(56 * var(--h));
  color: var(--accent-2);
  line-height: 1;
  margin-bottom: calc(14 * var(--h));
}
.vax-detail-title {
  font-size: calc(22 * var(--h));
  font-weight: 700;
  margin-bottom: calc(10 * var(--h));
}
.vax-detail-body {
  font-size: calc(16 * var(--h));
  line-height: 1.65;
  color: var(--muted);
}

.vax-notes-stack {
  margin-top: calc(48 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--h));
}
.notice-box {
  background: var(--void-3);
  border-radius: 14px;
  padding: calc(22 * var(--h));
  font-size: calc(14.5 * var(--h));
  line-height: 1.6;
  color: var(--muted);
}
.callout--info {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  padding: calc(26 * var(--h)) calc(30 * var(--h));
  display: flex;
  gap: calc(18 * var(--h));
  align-items: flex-start;
}
.callout--info svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.callout--info h3 {
  font-size: calc(19 * var(--h));
  font-weight: 700;
  color: var(--accent-deep);
  margin-bottom: calc(6 * var(--h));
}
.callout--info p {
  font-size: calc(15.5 * var(--h));
  line-height: 1.6;
  color: var(--ink);
}

/* ==========================================================================
   14. S10 · Booking — Full-Bleed Working Split
   ========================================================================== */
.book {
  display: grid;
  grid-template-columns: 43fr 57fr;
  min-height: 100dvh;
}
.book-media {
  background: var(--accent-deep);
  color: #fbfaf7;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(90 * var(--u)) calc(64 * var(--h));
}
.book-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  mix-blend-mode: luminosity;
  z-index: 0;
}
.book-media > * {
  position: relative;
  z-index: 1;
}
.book-media h2 {
  color: #fbfaf7;
  font-size: calc(42 * var(--h));
  margin-bottom: calc(16 * var(--h));
}
.book-media .lead {
  color: rgba(251, 250, 247, 0.85);
  font-size: calc(18 * var(--h));
  line-height: 1.6;
  margin-bottom: calc(36 * var(--h));
}
.reassurance-list {
  display: flex;
  flex-direction: column;
  margin-bottom: calc(40 * var(--h));
}
.reassurance-row {
  padding-block: calc(14 * var(--h));
  border-top: 1px solid rgba(251, 250, 247, 0.15);
  font-size: calc(15 * var(--h));
  color: rgba(251, 250, 247, 0.82);
}
.book-pane {
  background: var(--void);
  padding: calc(70 * var(--u)) calc(56 * var(--h));
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--h));
}

/* Status Pill in S10 */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--void-2);
  border: 1px solid var(--line);
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  width: fit-content;
}
.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dim);
}
.pulse-dot.is-open {
  background: var(--ok);
  box-shadow: 0 0 0 0 var(--ok);
  animation: pulseGreen 2s infinite;
}
@keyframes pulseGreen {
  0% { box-shadow: 0 0 0 0 var(--ok); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.ghl-container {
  min-height: 700px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--void-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  position: relative;
}

/* ==========================================================================
   15. S11 · Dr. Irshad — Editorial Asymmetric Layout
   ========================================================================== */
.doctor {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: calc(28 * var(--h));
  padding-block: calc(150 * var(--u));
  overflow: hidden;
  background: var(--void);
  align-items: center;
}
.doctor .watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22vw;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.06em;
  color: var(--ink);
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.doc-plate {
  grid-column: 2 / span 5;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  box-shadow: var(--contact);
  transform: translateY(calc(46 * var(--u)));
  z-index: 1;
  background: var(--void-2);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(48 * var(--h));
  text-align: center;
  position: relative;
}
.doc-plate-monogram {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: calc(104 * var(--h));
  color: var(--accent-2);
  line-height: 1;
  margin-bottom: calc(16 * var(--h));
}
.doc-txt {
  grid-column: 8 / span 4;
  align-self: center;
  z-index: 1;
}
.doc-name {
  font-size: calc(88 * var(--h));
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: calc(10 * var(--h));
}
.doc-name sup {
  font-size: calc(26 * var(--h));
  color: var(--accent-2);
  vertical-align: super;
  margin-left: 0.12em;
}
.creds {
  list-style: none;
  margin-top: calc(30 * var(--h));
  margin-bottom: calc(36 * var(--h));
  padding: 0;
}
.creds li {
  position: relative;
  padding-left: calc(28 * var(--h));
  padding-block: calc(11 * var(--h));
  border-top: 1px solid var(--line-2);
  font-size: calc(15.5 * var(--h));
  color: var(--ink);
}
.creds li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-2);
}

/* ==========================================================================
   16. S12 · Patient Reviews — Pinned Quote Rig (Ground Tint Morphs)
   ========================================================================== */
section.rig.proof {
  height: calc(1800px + 100dvh);
  position: relative;
}
.proof-stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  place-items: center;
  transition: background-color 0.45s ease-in-out;
  padding: 0 var(--gutter);
}
.quote-wrap {
  max-width: calc(900 * var(--h));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quote-text {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: calc(42 * var(--h));
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: calc(28 * var(--h));
  transition: opacity 0.22s, transform 0.22s;
}
.quote-author-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: calc(14 * var(--h));
}
.quote-name {
  font-weight: 600;
  color: var(--ink);
}
.quote-place {
  color: var(--dim);
}
.quote-tag {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: calc(12.5 * var(--h));
  font-weight: 600;
}
.quote-progress-bars {
  display: flex;
  gap: 8px;
  width: 140px;
  margin-top: calc(36 * var(--h));
}
.quote-bar {
  height: 2px;
  flex: 1;
  border-radius: 2px;
  background: rgba(20, 18, 16, 0.2);
  transition: background-color 0.3s;
}
.quote-bar.is-active {
  background: var(--ink);
}

/* ==========================================================================
   17. S13 · Who We Serve + Find Us — Three-Panel Band (2fr / 1fr / 2fr)
   ========================================================================== */
.band {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  border-block: 1px solid var(--line);
  background: var(--void);
}
.band > * {
  padding: calc(76 * var(--u)) calc(48 * var(--h));
  position: relative;
}
.band > * + * {
  border-left: 1px solid var(--line);
}
.band-p1 {
  background: var(--void-2);
}
.band-p2 {
  background: var(--void);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}
.band-p3 {
  background: var(--accent-deep);
  color: #fbfaf7;
}
.band-p3 h3, .band-p3 .loc-label {
  color: #fbfaf7;
}
.band-p3 .loc-val {
  color: rgba(251, 250, 247, 0.85);
}
.band-areas-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: calc(20 * var(--h));
}
.band-area-item {
  font-size: calc(14 * var(--h));
  color: var(--muted);
  font-weight: 500;
}
.band-affordances {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: calc(20 * var(--h));
}
.afford-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(14.5 * var(--h));
  font-weight: 600;
  color: var(--ink);
}
.afford-row svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.band-map-box {
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  margin-top: calc(20 * var(--h));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.band-map-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   18. S14 · FAQ — Sticky Index + Rule-Only Accordion
   ========================================================================== */
.faq {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: calc(72 * var(--h));
  padding-block: calc(130 * var(--u));
  background: var(--void);
}
.faq-index {
  position: sticky;
  top: calc(150 * var(--u));
  align-self: start;
}
.faq-index a {
  display: flex;
  gap: calc(12 * var(--h));
  padding-block: calc(7 * var(--h));
  font: 500 calc(14 * var(--h))/1.35 'Inter', sans-serif;
  color: var(--dim);
  transition: color 0.24s var(--ease-scroll);
}
.faq-index a .n {
  font-variant-numeric: tabular-nums;
  color: var(--line);
}
.faq-index a[aria-current="true"] {
  color: var(--accent);
}
.faq-index a[aria-current="true"] .n {
  color: var(--accent-2);
}

.faq-accordion {
  display: flex;
  flex-direction: column;
}
details {
  border-top: 1px solid var(--line);
}
details:last-of-type {
  border-bottom: 1px solid var(--line);
}
summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(20 * var(--h));
  padding: calc(26 * var(--h)) 0;
  font-family: 'Manrope', sans-serif;
  font-size: calc(21 * var(--h));
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
summary::-webkit-details-marker {
  display: none;
}
summary .chev {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--accent);
  transition: transform 0.38s var(--ease-scroll);
}
details[open] summary .chev {
  transform: rotate(180deg);
}
.ans {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s var(--ease-scroll);
}
details[open] .ans {
  grid-template-rows: 1fr;
}
.ans > div {
  overflow: hidden;
}
.ans p {
  padding-bottom: calc(26 * var(--h));
  font-size: calc(16 * var(--h));
  line-height: 1.68;
  color: var(--muted);
}

/* ==========================================================================
   19. S15 · Final CTA — Empty Void & Seal
   ========================================================================== */
.cta {
  background: var(--void);
  min-height: calc(780 * var(--u));
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(120 * var(--u)) var(--gutter);
  position: relative;
}
.cta-inner {
  max-width: calc(880 * var(--h));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.seal {
  width: 132px;
  height: 132px;
  color: var(--seal);
  margin-bottom: calc(32 * var(--h));
}
.seal .ring {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1.2s var(--ease-in);
}
.seal .ring:nth-of-type(2) {
  transition-delay: 0.18s;
}
.seal.is-drawn .ring {
  stroke-dashoffset: 0;
}
.seal .mono {
  opacity: 0;
  transform-origin: 66px 66px;
  transform: scale(1.35);
  transition: opacity 0.26s cubic-bezier(0.2, 0.9, 0.25, 1), transform 0.26s cubic-bezier(0.2, 0.9, 0.25, 1);
  transition-delay: 0.9s;
}
.seal.is-stamped .mono {
  opacity: 1;
  transform: scale(1);
}
.seal .spin {
  transform-origin: 66px 66px;
  animation: sealspin 24s linear infinite;
}
@keyframes sealspin {
  to { transform: rotate(360deg); }
}

.cta h2 {
  font-size: calc(52 * var(--h));
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: calc(18 * var(--h));
}
.cta h2 em {
  font-style: normal;
  color: var(--accent);
  position: relative;
}
.cta h2 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 3px;
  background: var(--accent-2);
}
.cta .sec-lead {
  max-width: calc(640 * var(--h));
  margin-bottom: calc(36 * var(--h));
}
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--h));
}

/* ==========================================================================
   20. Footer
   ========================================================================== */
footer.ftr {
  background: var(--void-3);
  border-top: 1px solid var(--line);
  padding: calc(86 * var(--u)) var(--gutter) calc(38 * var(--u));
  position: relative;
  z-index: 2;
}
.ftr-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.3fr;
  gap: calc(48 * var(--h));
  margin-bottom: calc(60 * var(--u));
}
.ftr-brand-col p {
  font-size: calc(15 * var(--h));
  line-height: 1.6;
  color: var(--muted);
  margin-top: calc(18 * var(--h));
  margin-bottom: calc(24 * var(--h));
  max-width: 380px;
}
.ftr-socials {
  display: flex;
  gap: 16px;
  font-size: calc(14 * var(--h));
  font-weight: 600;
}
.ftr-socials a {
  color: var(--ink);
  transition: color 0.2s;
}
.ftr-socials a:hover {
  color: var(--accent);
}
.ftr-col h4 {
  font-family: 'Inter', sans-serif;
  font-size: calc(13.5 * var(--h));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-bottom: calc(20 * var(--h));
}
.ftr-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--h));
}
.ftr-links a {
  font-size: calc(15 * var(--h));
  color: var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.24s var(--ease-scroll);
  display: inline-block;
  width: fit-content;
}
.ftr-links a:hover {
  background-size: 100% 1px;
}
.ftr-contact-p {
  font-size: calc(14.5 * var(--h));
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 12px;
}
.ftr-disclaimer {
  font-size: calc(12.5 * var(--h));
  line-height: 1.5;
  color: var(--dim);
  margin-top: 16px;
}
.ftr-bottom {
  border-top: 1px solid var(--line);
  padding-top: calc(28 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(13.5 * var(--h));
  color: var(--dim);
}

/* ==========================================================================
   21. Breakpoints & Responsive Overrides
   ========================================================================== */
@media (max-width: 1500px) {
  :root {
    --gutter: clamp(20px, 4.8vw, 64px);
  }
  .hero {
    grid-template-columns: 56fr 44fr;
  }
  .book {
    grid-template-columns: 46fr 54fr;
  }
}

@media (max-width: 1300px) {
  .rail {
    display: none;
  }
}

@media (max-width: 1100px) {
  .topbar {
    display: none;
  }
  nav.nav, .hdr-cta {
    display: none;
  }
  .burger {
    display: flex;
  }
  .why {
    grid-template-columns: 1fr;
  }
  .why-head {
    position: static;
  }
  .vax {
    grid-template-columns: 1fr;
  }
  .vax-detail {
    position: static;
    margin-top: 24px;
  }
  .doctor {
    grid-template-columns: 1fr;
  }
  .doc-plate {
    grid-column: 1 / -1;
    transform: none;
    max-width: 480px;
    margin: 0 auto 32px;
  }
  .doc-txt {
    grid-column: 1 / -1;
  }
  .band {
    grid-template-columns: 1fr;
  }
  .band > * + * {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .faq {
    grid-template-columns: 1fr;
  }
  .faq-index {
    display: none;
  }
  .mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, auto);
  }
  .m1, .m2, .m3, .m4, .m5, .m6 {
    grid-column: span 3;
  }
  .ftr-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  body {
    padding-bottom: 68px;
  }
  .mcta {
    display: flex;
  }

  /* S3 Arcs dropped for 2x2 grid */
  .arc-section {
    grid-template-columns: 1fr;
  }
  .arc-graphic-wrap {
    display: none;
  }
  .arc-fallback-grid {
    display: grid;
  }

  /* S7 Unpinned on touch/mobile */
  section.rig#process {
    height: auto !important;
  }
  .stage {
    position: static !important;
    height: auto !important;
    padding-block: 60px;
  }
  .process-pinned-head {
    position: static !important;
    margin-bottom: 32px;
  }
  .track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--gutter);
    width: 100%;
    transform: none !important;
  }
  .hpanel {
    scroll-snap-align: center;
    flex: 0 0 82vw;
    opacity: 1 !important;
    transform: none !important;
  }
  .rail-progress-bar {
    display: none;
  }

  /* S8 Modal collapses to bottom sheet */
  .modal-panel {
    position: fixed;
    inset: auto 0 0 0;
    max-height: 92dvh;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 100%;
  }

  /* S10 Booking Stack */
  .book {
    grid-template-columns: 1fr;
  }
  .book-media {
    min-height: 280px;
    padding: 40px var(--gutter);
  }
  .book-pane {
    margin-top: -28px;
    border-radius: 28px 28px 0 0;
    position: relative;
    z-index: 2;
  }
}

@media (max-aspect-ratio: 11/10) {
  /* S1 Hero Stack */
  .hero {
    grid-template-columns: 1fr;
    padding: 0 var(--gutter) calc(120 * var(--u));
    gap: 24px;
  }
  .hero-img {
    height: clamp(260px, 38svh, 340px);
    border-radius: 0 0 26px 26px;
    order: -1;
  }
  .hero-medallion {
    left: auto;
    right: 20px;
    top: auto;
    bottom: -36px;
    transform: none;
    width: 78px;
    height: 78px;
  }
  .hero-medallion svg {
    width: 58px;
    height: 58px;
  }

  /* S12 Proof Unpinned */
  section.rig.proof {
    height: auto !important;
  }
  .proof-stage {
    position: static !important;
    height: auto !important;
    padding-block: 80px;
  }

  .mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 8px;
  }
  .m1, .m2, .m3, .m4, .m5, .m6 {
    grid-column: 1 / -1;
  }
  .mos-card {
    min-height: 230px;
  }
}

@media (max-width: 430px) {
  :root {
    --gutter: 18px;
  }
  .hero h1 {
    font-size: calc(38 * var(--h));
  }
  .ribbon-track span {
    font-size: calc(26 * var(--h));
  }
  .doc-name {
    font-size: calc(42 * var(--h));
  }
  .ftr-grid {
    grid-template-columns: 1fr;
  }
}

/* Height Breakpoints */
@media (min-width: 901px) and (max-height: 850px) {
  .hero h1 {
    font-size: calc(60 * var(--h));
  }
  .hero {
    padding-bottom: calc(70 * var(--u));
  }
  .hpanel {
    flex: 0 0 clamp(340px, 42vw, 560px);
  }
}
@media (min-width: 901px) and (max-height: 720px) {
  .hero h1 {
    font-size: calc(50 * var(--h));
  }
  .hero .lead {
    font-size: calc(17 * var(--h));
  }
  .quote-text {
    font-size: calc(32 * var(--h));
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .ribbon-track {
    animation: none !important;
    transform: none !important;
  }
  .arc-line {
    stroke-dashoffset: 0 !important;
  }
  .arc-dot {
    opacity: 1 !important;
    transform: none !important;
  }
  .scroll-wheel::after {
    animation: none !important;
  }
  section.rig#process {
    height: auto !important;
  }
  .stage {
    position: static !important;
    height: auto !important;
  }
  .track {
    transform: none !important;
  }
  .hpanel {
    opacity: 1 !important;
    transform: none !important;
  }
  section.rig.proof {
    height: auto !important;
  }
  .proof-stage {
    position: static !important;
    height: auto !important;
  }
  .seal .ring {
    stroke-dashoffset: 0 !important;
  }
  .seal .mono {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   OVERRIDES — logo lock-up, equal mosaic boxes, justified copy, nav hover
   ========================================================================== */

/* --- brand lock-up replaces the inline mark + text wordmark --- */
.brand-logo {
  display: block;
  width: auto;
  height: calc(38 * var(--u));
  min-height: 30px;
  max-height: 46px;
}
.hdr.is-stuck .brand-logo { height: calc(32 * var(--u)); }
.brand--ftr .brand-logo { height: calc(42 * var(--u)); max-height: 52px; }
.brand-logo, .hdr.is-stuck .brand-logo { transition: height .34s var(--ease-scroll); }

/* --- S5 mosaic: six EQUAL windows, 3 across --- */
.mosaic {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-rows: 1fr;
}
.m1, .m2, .m3, .m4, .m5, .m6 { grid-column: auto; grid-row: auto; }
.mos-card {
  min-height: calc(330 * var(--u));
  justify-content: flex-start;
}
.mos-card h3 { margin-top: auto; }

/* --- justified body copy inside the windows --- */
.mos-card p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* --- nav: a hover you can actually see --- */
.nav-link {
  position: relative;
  transition: color .22s var(--ease-scroll);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease-scroll);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--accent); }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }

/* header buttons get a real hover too */
.hdr-right .ghost, .hdr-right .pill { transition:
  background-color .24s var(--ease-scroll),
  color .24s var(--ease-scroll),
  border-color .24s var(--ease-scroll),
  transform .24s var(--ease-scroll),
  box-shadow .24s var(--ease-scroll); }
.hdr-right .ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.hdr-right .pill:hover {
  background: var(--accent);
  color: #fbfaf7;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .nav-link::after { transition: none; }
  .hdr-right .ghost:hover, .hdr-right .pill:hover { transform: none; }
}

/* --- mosaic on small screens: still equal, one column --- */
@media (max-width: 1100px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
}
@media (max-aspect-ratio: 11/10), (max-width: 700px) {
  .mosaic { grid-template-columns: 1fr; grid-template-rows: auto; }
  .mos-card { min-height: 250px; }
  .mos-card p { text-align: left; hyphens: manual; }
}

/* --- hero: <picture> must fill the bleed column, and the crop keeps the
       clinician in frame instead of centring on the empty middle --- */
.hero-img picture { display: block; width: 100%; height: 100%; }

/* --- tablet --- */
@media (max-width: 1100px) {
}

/* --- phone: copy sits at the bottom over a stronger bottom scrim --- */
@media (max-aspect-ratio: 11/10), (max-width: 700px) {
}

/* --- reduced motion: unpin entirely, show all four stacked and readable --- */
@media (prefers-reduced-motion: reduce) {
}

/* --- hero slow-motion plate (video.md V1) ---------------------------------
   The poster is frame 0 of the clip, so the handoff is invisible. The video
   sits on top at opacity 0 and only fades in once it can actually play, which
   means a blocked or refused autoplay simply leaves a finished-looking still. */
.hero-poster,
.hero-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 52%;
}
.hero-plate {
  opacity: 0;
  transition: opacity .7s linear;
  pointer-events: none;            /* never let the plate take a click */
}
.hero-plate.is-live { opacity: 1; }

/* V1 requires both fades — the side fade keeps the type column legible,
   the bottom fade drops the plate into the page colour. */
.hero-img::after {
  background:
    linear-gradient(90deg, var(--void) 0%, rgba(251,250,247,.35) 22%, transparent 55%),
    linear-gradient(0deg, var(--void) 0%, rgba(251,250,247,.30) 12%, transparent 34%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-plate { display: none; }   /* poster only, per V1 */
}

/* ==========================================================================
   HERO v2.1 — the plate goes FULL-BLEED behind the whole first viewport.
   Why: a 16:9 clip inside a 42%-wide, 100dvh column is cropped to a vertical
   sliver, so you only ever saw the edge of the room. Full-bleed shows the
   real frame, and the scrim carries the type instead of a column edge.
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;      /* bottom-weighted: reads as a film frame */
  align-items: flex-start;
  grid-template-columns: none;
  padding: 0 var(--gutter) calc(94 * var(--u));
  position: relative;
  overflow: hidden;               /* the hero is not an ancestor of a sticky rig */
}

/* the media becomes the ground, not a column */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  z-index: 0;
  transform: translate3d(0, var(--hero-img-y), 0) scale(var(--hero-img-s));
  transform-origin: center center;
}
.hero-img .hero-poster,
.hero-img .hero-plate { object-position: 50% 50%; }

/* the scrim does the legibility work — ink type needs a near-solid left third */
.hero-img::after {
  background:
    linear-gradient(90deg,
      rgba(251,250,247,.975) 0%,
      rgba(251,250,247,.94)  26%,
      rgba(251,250,247,.66)  48%,
      rgba(251,250,247,.24)  72%,
      rgba(251,250,247,.06) 100%),
    linear-gradient(0deg,
      var(--void) 0%,
      rgba(251,250,247,.62) 14%,
      rgba(251,250,247,.10) 34%,
      rgba(251,250,247,0)   52%);
}

.hero-txt {
  position: relative;
  z-index: 2;
  max-width: calc(820 * var(--h));
}
.hero-txt h1 { max-width: calc(780 * var(--h)); }
.hero-txt .lead { max-width: calc(560 * var(--h)); }

/* --- portrait: the scrim flips to bottom-weighted, since there is no left
       third to hide in on a narrow screen --- */
@media (max-aspect-ratio: 11/10), (max-width: 700px) {
  .hero { padding-bottom: calc(124 * var(--u)); }
  .hero-img {
    height: 100%;
    border-radius: 0;   /* was a rounded bottom band; it is the ground now */
    order: 0;
  }
  .hero-img .hero-poster,
  .hero-img .hero-plate { object-position: 54% 46%; }
  .hero-img::after {
    background: linear-gradient(0deg,
      var(--void) 0%,
      rgba(251,250,247,.965) 26%,
      rgba(251,250,247,.86)  44%,
      rgba(251,250,247,.34)  66%,
      rgba(251,250,247,0)    92%);
  }
  .hero-txt { max-width: none; }
}

/* ==========================================================================
   S5 mosaic — new shared photograph
   The worktop flat-lay was too busy: hands, a stethoscope and tubes got cut
   across the six windows and fought the copy. The defocused corridor has no
   hard focal point, so every crop reads as a calm image on its own.
   ========================================================================== */

/* the softer sheet needs less scrim to stay legible, so let more of it show */
.mos-card::before {
  background: linear-gradient(0deg,
    rgba(251,250,247,.96) 0%,
    rgba(251,250,247,.86) 46%,
    rgba(251,250,247,.42) 78%,
    rgba(251,250,247,.22) 100%);
}

/* ==========================================================================
   S7 process — the five panels carry colour now.
   A ramp, not five arbitrary hues: teal deepens step by step as you move
   through the process, and step 5 arrives in brass — the sealed envelope,
   matching the seal on the final CTA. Two brand hues only.
   ========================================================================== */

.hpanel {
  background: var(--p-bg, var(--void-2));
  border-color: var(--p-line, var(--line));
  position: relative;
  overflow: hidden;
}
/* the coloured cap that reads as progress */
.hpanel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--p-rule, var(--accent));
}
/* The rule colour is decoration only. Text never inherits it — at 38% alpha
   on a pale ground it lands at 1.76:1. Labels use --p-when, the lit numeral
   uses --p-num-lit; both are verified above 4.5:1 and 3:1 respectively. */
.hpanel .n { color: var(--p-num, var(--line)); }
.hpanel.is-lit .n { color: var(--p-num-lit, var(--accent)); }
.hpanel .when { color: var(--p-when, var(--accent-deep)); }

.hpanel:nth-child(1) {
  --p-when: #0d564d; --p-num-lit: #136f63;
  --p-bg: #f2f8f6; --p-rule: rgba(19,111,99,.38);
  --p-num: rgba(19,111,99,.13); --p-line: rgba(19,111,99,.14);
}
.hpanel:nth-child(2) {
  --p-when: #0d564d; --p-num-lit: #136f63;
  --p-bg: #e9f3f0; --p-rule: rgba(19,111,99,.56);
  --p-num: rgba(19,111,99,.16); --p-line: rgba(19,111,99,.18);
}
.hpanel:nth-child(3) {
  --p-when: #0d564d; --p-num-lit: #136f63;
  --p-bg: #e0ede9; --p-rule: rgba(19,111,99,.74);
  --p-num: rgba(19,111,99,.19); --p-line: rgba(19,111,99,.22);
}
.hpanel:nth-child(4) {
  --p-when: #0d564d; --p-num-lit: #136f63;
  --p-bg: #d6e7e2; --p-rule: #136f63;
  --p-num: rgba(19,111,99,.22); --p-line: rgba(19,111,99,.26);
}
/* step 5 · the payoff: brass, like the seal on the envelope */
.hpanel:nth-child(5) {
  --p-when: #8f6425; --p-num-lit: #a06f2c;
  --p-bg: #f8efe1; --p-rule: #b8813a;
  --p-num: rgba(184,131,58,.22); --p-line: rgba(184,131,58,.30);
}

/* ==========================================================================
   S5 mosaic sheet — purpose-generated, measured for evenness
   A mosaic sheet has one job: every window must read as a complete picture AND
   hold body copy. Measured per-window luminance spread across the 3x2 grid:
     corridor  0.255  worst contrast 1.21:1   <- what looked broken
     plaster   0.229  (a hard teal band down one edge)
     linen     0.164  ->  0.133 after flattening toward its own mean
   The sheet now holds 4.00:1 even with NO scrim, so the scrim is only there to
   lift the copy further rather than to rescue it.
   ========================================================================== */

.mos-card::before {
  background: linear-gradient(0deg,
    rgba(251,250,247,.94) 0%,
    rgba(251,250,247,.82) 44%,
    rgba(251,250,247,.46) 76%,
    rgba(251,250,247,.30) 100%);
}

/* ==========================================================================
   S11 · real portrait replaces the monogram plate
   Dr. Irshad's photograph was supplied by the practice, so the plate now
   carries it. Square corners and the contact shadow are kept — it is an
   editorial plate, not a rounded card.
   ========================================================================== */
.doc-plate--photo {
  padding: 0;
  overflow: hidden;
  background: var(--void-3);
  border-color: var(--line);
}
.doc-plate--photo picture,
.doc-plate--photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.doc-plate--photo img {
  object-fit: cover;
  object-position: 50% 18%;   /* keeps the face high in the 4:5 plate */
}

/* No credential badge on the plate. It repeated the sub-line that sits
   directly beneath the name ("Primary Care Physician · USCIS-Designated Civil
   Surgeon"), and at narrow widths the plate keeps only a 32px gap before the
   heading, so a white box on a white ground collided with "Dr. Huma Irshad, MD".
   The credential is already stated three times in this section. */

@media (max-width: 1100px) {
  .doc-plate--photo { aspect-ratio: 1 / 1; }
}
/* give the stacked plate real air before the name */
@media (max-width: 1100px) {
  .doc-plate { margin: 0 auto calc(46 * var(--u)); }
}

/* ==========================================================================
   S11 · the name was overlapping itself
   .doc-txt is 4 of 12 columns (~442px at 1512). "Dr. Huma Irshad," in Manrope
   800 at 88px needs ~770px, so it wrapped — and line-height .94 gives an 82.7px
   line box for glyphs that occupy ~120px, so the wrapped lines sat on top of
   each other. Three fixes: a wider column, a size that fits, and a line-height
   above 1 so stacked lines can never collide.
   ========================================================================== */

.doc-txt { grid-column: 7 / span 5; }

.doc-name {
  font-size: calc(60 * var(--h));
  line-height: 1.04;             /* never below 1 on a multi-line heading */
  letter-spacing: -0.025em;
  text-wrap: balance;
  padding-bottom: 0.06em;        /* room for the comma's descender */
  margin-bottom: calc(14 * var(--h));
}

/* `vertical-align: super` raises the sup by a font-dependent amount and pushed
   it out of the tight line box. An explicit offset is predictable. */
.doc-name sup {
  font-size: calc(22 * var(--h));
  vertical-align: baseline;
  position: relative;
  top: -0.62em;
  margin-left: 0.14em;
}

@media (max-width: 1100px) {
  .doc-txt { grid-column: 1 / -1; }
  .doc-name { font-size: calc(52 * var(--h)); }
}
@media (max-width: 430px) {
  .doc-name { font-size: calc(38 * var(--h)); line-height: 1.06; }
}

/* ==========================================================================
   TIGHTEN + JUSTIFY + PLATE POSITION
   ========================================================================== */

/* --- 1 · the portrait moves right, and the text column widens so the name
       stops wrapping onto two lines at mid-range widths --- */
/* Two real columns instead of a 12-col grid with empty tracks. The plate is
   right-aligned inside a deliberately narrow left column, so the photo moves
   toward the text without leaving a dead 2-column gap at the page edge. */
.doctor { grid-template-columns: 0.82fr 1.18fr; }
.doc-plate { grid-column: 1; justify-self: end; width: min(100%, calc(440 * var(--h))); }
.doc-txt   { grid-column: 2; }
.doc-name  { font-size: calc(54 * var(--h)); }

/* --- 2 · remove the dashes from the credentials list --- */
.creds li::before { content: none; }
.creds li { padding-left: 0; }

/* --- 3 · close up the vertical air. Every section was on 100-150 --u of
       padding, which on a 1024-tall reference is 100-150px top AND bottom.
       Roughly a 40% cut, applied consistently so the rhythm still holds. --- */
.ribbon        { padding-block: calc(24 * var(--u)); }
.arc-section   { padding: calc(62 * var(--u)) var(--gutter); }
.why           { padding-block: calc(74 * var(--u)); }
.why .act      { padding-block: calc(38 * var(--u)); }
.included      { padding: calc(62 * var(--u)) var(--gutter); }
.mosaic        { min-height: calc(600 * var(--u)); }
.note          { padding-block: calc(44 * var(--u)); }
.bring-trigger-sec { padding: calc(62 * var(--u)) var(--gutter); }
.vax-sec       { padding: calc(62 * var(--u)) var(--gutter); }
.book-media    { padding: calc(64 * var(--u)) calc(64 * var(--h)); }
.book-pane     { padding: calc(50 * var(--u)) calc(56 * var(--h)); }
.doctor        { padding-block: calc(88 * var(--u)); }
.band > *      { padding: calc(52 * var(--u)) calc(48 * var(--h)); }
.faq           { padding-block: calc(80 * var(--u)); }
.cta           { min-height: calc(520 * var(--u)); padding: calc(76 * var(--u)) var(--gutter); }
.ftr           { padding: calc(60 * var(--u)) var(--gutter) calc(30 * var(--u)); }
.mos-card      { min-height: calc(272 * var(--u)); }
.vax-detail    { min-height: calc(260 * var(--u)); }

/* --- 4 · justified body copy, with hyphenation so the word gaps stay tight.
       Left-aligned on anything narrow, where justification opens rivers. --- */
.sec-lead,
.doc-txt > p,
.why .act p,
.note p,
.hpanel p,
.vax-detail p,
.ans p,
.band p,
.preview-item .nt,
.ftr-brand-col p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (max-width: 760px) {
  .sec-lead, .doc-txt > p, .why .act p, .note p, .hpanel p, .vax-detail p, .ans p, .band p, .preview-item .nt, .ftr-brand-col p,
  .mos-card p {
    text-align: left;
    hyphens: manual;
  }
}

@media (max-width: 1100px) {
  .doc-plate { grid-column: 1 / -1; }
  .doc-txt   { grid-column: 1 / -1; }
}

/* --- live status dot ------------------------------------------------------
   engine.js sets .is-open on the dot itself, not on the pill, so the earlier
   .status-pill.is-open selectors never matched. The base .pulse-dot rules
   already handle colour; this only stops the ping under reduced motion, which
   the previous rule missed because the pulse is an animation on the element,
   not a ::after. */
@media (prefers-reduced-motion: reduce) {
  .pulse-dot.is-open { animation: none; box-shadow: none; }
}

/* --- hero scrim v3: the consultation plate puts the clinician at ~25-45% of
   frame width, right where the old scrim was heaviest (94-66%), which washed
   her out. Measured the lightest ramp that still holds the headline:
     .975/.94/.66/.24/.06  ->  6.44:1  (subjects too washed)
     .95/.90/.55/.18/.04   ->  4.60:1  <- chosen, lightest that passes
     .92/.84/.42/.12/0     ->  2.97:1  FAIL
     narrow .97/.93/.34    ->  1.53:1  FAIL                                  */
.hero-img::after {
  background:
    linear-gradient(90deg,
      rgba(251,250,247,.95) 0%,
      rgba(251,250,247,.90) 26%,
      rgba(251,250,247,.55) 48%,
      rgba(251,250,247,.18) 72%,
      rgba(251,250,247,.04) 100%),
    linear-gradient(0deg,
      var(--void) 0%,
      rgba(251,250,247,.58) 14%,
      rgba(251,250,247,.10) 34%,
      rgba(251,250,247,0)   52%);
}
/* Showing more of the frame's left edge pushes the two figures rightward, out
   from under the headline. 16:9 in a ~1.48 container overflows ~309px
   horizontally, so 26% crops 80px from the left instead of 155px at centre. */
.hero-img .hero-poster,
.hero-img .hero-plate { object-position: 50% 50%; }

/* ==========================================================================
   HERO HEADLINE — self-limiting size
   Bug: the only small-screen breakpoint was `max-width: 430px`, so every
   viewport from 431px to 900px (small tablets, phones in landscape,
   split-screen windows) rendered the h1 at the full 72 * --h. Measured in a
   512px-wide portrait viewport: font-size 69.84px, box 465px, and the single
   word "Immigration" needs ~476px — so it overflowed the line box and was
   clipped by .hero{overflow:hidden}.
   Fix: cap the size against the viewport itself, so it can never outgrow its
   column, and allow a break as a last-resort guard.
   ========================================================================== */
.hero h1 {
  font-size: min(calc(72 * var(--h)), 11vw);
  overflow-wrap: break-word;
}
@media (max-width: 430px) {
  .hero h1 { font-size: min(calc(38 * var(--h)), 11vw); }
}
@media (min-width: 901px) and (max-height: 850px) {
  .hero h1 { font-size: min(calc(60 * var(--h)), 11vw); }
}
@media (min-width: 901px) and (max-height: 720px) {
  .hero h1 { font-size: min(calc(50 * var(--h)), 11vw); }
}

/* --- hero plate: mirrored -------------------------------------------------
   The reference footage places the clinician in the left third and the patient
   on the right. The headline owns the left half, so at every crop she ended up
   behind the type while the patient's hair dominated the right edge. Mirroring
   puts the clinician in the clear right half and pushes the patient into the
   scrimmed left. The only cost is the wall posters reading reversed, and they
   are already illegible at this scale and behind 90-95% scrim.
   -------------------------------------------------------------------------- */
.hero-img .hero-poster,
.hero-img .hero-plate {
  /* translateX sits OUTERMOST so it shifts on screen, not in the flipped
     coordinate system. Extra scale buys slack so the shift never exposes an
     edge of the frame. */
  transform: translateX(7%) scale(1.16);
  object-position: 50% 44%;
}

/* The hero eyebrow sits over the brightest part of the plate. In --accent it
   measured 3.98:1 against that background, under the 4.5:1 floor for small
   text. --accent-deep takes it to 5.7:1 without changing the look. */
.hero .eyebrow { color: var(--accent-deep); }

@media (max-width: 900px), (max-aspect-ratio: 11/10) {
}

/* ==========================================================================
   HEADING LINE-HEIGHT — five rules were inheriting the body's 1.68
   body has no line-height of its own, so it resolves to 1.68 and any heading
   that sets font-size without setting line-height inherits it. Measured on a
   390px viewport: .book-media h2 rendered at 40.74px type on a 68.44px line
   box, which is what made "Reserve your immigration exam appointment" fall
   apart into four widely spaced lines. .hero h1 (0.98) and .sec-title (1.02)
   already set theirs; these five did not.
   ========================================================================== */
.book-media h2    { line-height: 1.12; }
.mos-card h3      { line-height: 1.28; }
.hpanel h3        { line-height: 1.22; }
.callout--info h3 { line-height: 1.30; }
.ftr-col h4       { line-height: 1.30; }

/* the booking headline is a display size; give it room to breathe on a phone */
@media (max-width: 900px), (max-aspect-ratio: 11/10) {
  .book-media h2 { font-size: calc(31 * var(--h)); }
}

/* ==========================================================================
   HERO v3 (desktop only) — video becomes a right-hand panel
   A full-height column can only ever show ~68% of a 16:9 frame, and the two
   people span ~85% of it, so one of them was always cut or buried under the
   headline. A 16:9 panel shows 100% of the frame, so both read clearly, and
   the left half is freed for the type on clean ground.
   Scoped to >=901px: the mobile treatment is untouched.
   ========================================================================== */
@media (min-width: 901px) {
  .hero { overflow: visible; }

  .hero-img {
    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    translate: 0 -50%;
    width: 62%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 20px 0 0 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    /* keep the existing scroll parallax, just without the old full-bleed scale */
    transform: translate3d(0, var(--hero-img-y), 0) scale(var(--hero-img-s));
    transform-origin: right center;
    z-index: 0;
  }

  /* the whole frame, unrotated and uncropped */
  .hero-img .hero-poster,
  .hero-img .hero-plate {
    transform: none;
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* a soft fade on the panel's left edge so it sits on the page rather than
     reading as a pasted-on box, plus a light wash where the lede can reach it */
  .hero-img::after {
    background:
      linear-gradient(90deg,
        var(--void) 0%,
        rgba(251,250,247,.72) 12%,
        rgba(251,250,247,.20) 26%,
        rgba(251,250,247,0) 44%);
  }

  /* the type now owns clean ground on the left. Sized so the accent line
     "Guided Start to Finish" stays on one line in the narrower column:
     22 chars x ~0.55em x 56px = ~677px against a ~700px column. */
  .hero-txt { max-width: 47%; position: relative; z-index: 2; }
  .hero-txt h1 { max-width: none; font-size: min(calc(56 * var(--h)), 9vw); }
  .hero-txt .lead { max-width: calc(500 * var(--h)); }

  /* the eyebrow is back on plain page colour, so the accent reads again */
  .hero .eyebrow { color: var(--accent); }
}

/* a little more room for the type at mid widths */
@media (min-width: 901px) and (max-width: 1250px) {
  .hero-img { width: 56%; }
  .hero-txt { max-width: 46%; }
}

/* ==========================================================================
   HERO CTAs ON SMALL SCREENS
   The two buttons sit in a flex row and cannot shrink, so they set the
   min-content width of .hero-txt. Measured at 390px: .hero-txt resolved to
   435px inside 354px of available space, and .hero{overflow:hidden} clipped
   the headline, lede and the second button rather than scrolling — which is
   why a scrollWidth check reported no overflow. It fit at 512px, so wider
   test viewports hid it.
   Below 560px they stack full width, which also gives proper tap targets.
   ========================================================================== */
@media (max-width: 560px) {
  .hero-txt { width: 100%; max-width: 100%; min-width: 0; }
  .hero .actions { flex-wrap: wrap; width: 100%; gap: calc(12 * var(--h)); }
  .hero .actions .pill,
  .hero .actions .ghost {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
    min-height: 48px;
  }
}

/* ==========================================================================
   CHECKLIST ROWS ON SMALL SCREENS
   Each row is [name][dashed leader][note] in a flex line. Neither text can
   shrink, so at 390px the rows measured up to 433px inside a 254px panel and
   were clipped. The dashed leader only makes sense when name and note sit on
   one line, so below 560px the row stacks and the leader is dropped.
   ========================================================================== */
@media (max-width: 560px) {
  .chk li {
    display: block;
    padding-block: calc(12 * var(--h));
  }
  .chk .nm { display: block; max-width: 100%; }
  .chk .dots { display: none; }
  .chk .nt {
    display: block;
    max-width: 100%;
    text-align: left;
    margin-top: calc(4 * var(--h));
  }
}

/* ==========================================================================
   MOBILE PASS  (<= 900px)
   Audited at a real 390px viewport. Fixes, in order of severity:
   1. The hero video was a full-bleed background under a 97% scrim, so it only
      ever showed a washed-out window and part of a laptop — neither person was
      visible. It becomes a 16:9 panel above the type, which shows 100% of the
      frame, same reasoning as the desktop panel.
   2. .sec-title was 44.6px at 390px, which broke "I-693" across lines.
   3. Body copy measured 14.1-15.5px in six places; 16px is the floor for
      copy that non-native English speakers have to read on a phone.
   4. .modal-close-btn was 38x38 against a 44px minimum.
   ========================================================================== */
@media (max-width: 900px) {

  /* --- 1 · hero becomes video-on-top, type below on clean ground --- */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    padding: calc(26 * var(--u)) var(--gutter) calc(46 * var(--u));
    overflow: visible;
  }
  .hero-img {
    position: relative;
    inset: auto;
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transform: none;
    margin-bottom: calc(30 * var(--u));
  }
  .hero-img::after { display: none; }      /* type is below it now, not over it */
  .hero-img .hero-poster,
  .hero-img .hero-plate {
    transform: none;
    object-fit: cover;
    object-position: 50% 50%;
  }
  /* the scroll parallax was written for a full-bleed plate; neutralise it */
  .hero .eyebrow,
  .hero h1,
  .hero .lead,
  .hero .actions {
    transform: none;
    opacity: 1;
  }
  .hero .eyebrow { color: var(--accent); }
  .hero-txt { position: static; width: 100%; max-width: 100%; }
  .scroll-cue { display: none; }

  /* --- 2 · headings sized for a 390px column --- */
  .sec-title { font-size: calc(31 * var(--h)); line-height: 1.12; }
  .doc-name  { font-size: calc(34 * var(--h)); }
  .faq summary { font-size: calc(18 * var(--h)); }

  /* --- 3 · body copy floor --- */
  .mos-card p,
  .ans p,
  .creds li,
  .band p,
  .sub-note,
  .reassurance-row,
  .chk .nt,
  .ftr-col a,
  .ftr-contact-p,
  .quote-name,
  .quote-place { font-size: calc(16 * var(--h)); }
  .ftr-col a { line-height: 1.9; }          /* keeps the 44px tap target */

  /* --- 4 · tap targets --- */
  .modal-close-btn { width: 44px; height: 44px; }
}

/* Those four blocks carried hardcoded 14px inline styles, which beat every
   stylesheet rule. They now use classes so the mobile floor can apply. */
.talk-note    { font-size: calc(14 * var(--h)); }
.band-hours   { font-size: calc(14 * var(--h)); color: var(--muted); line-height: 1.5; }
.band-call    { padding: 10px 20px; font-size: calc(14 * var(--h)); }
.band-contact { font-size: calc(14 * var(--h)); line-height: 1.6; margin-bottom: 16px; }

@media (max-width: 900px) {
  /* --h resolves to 0.97 on a phone, so calc(16 * --h) lands at 15.5px.
     These use absolute px to actually reach the 16px reading floor. */
  .mos-card p, .ans p, .creds li, .band p,
  .sub-note, .reassurance-row, .chk .nt, .ftr-contact-p,
  .talk-note, .band-hours, .band-call, .band-contact,
  .quote-name, .quote-place, .band-area-item { font-size: 16px; }
  .ftr-col a { font-size: 16px; line-height: 1.85; }
  .pill, .ghost { font-size: 16px; }

  /* a true 44px target, padding and border included */
  .modal-close-btn { min-width: 44px; min-height: 44px; box-sizing: border-box; }
  .ftr-bottom a { display: inline-block; padding-block: 12px; }
}

.band-note { font-size: calc(15 * var(--h)); color: var(--muted); line-height: 1.6; }
.band-lead { font-size: calc(14.5 * var(--h)); color: rgba(251,250,247,.8); }

@media (max-width: 900px) {
  /* .visit.is-stacked .visit-body is 0,3,0 and was out-ranking the floor */
  .band-note,
  .band-lead { font-size: 16px; }
}

/* ==========================================================================
   S5 "What's Included" — the copy comes first now
   The six windows shared one photograph behind the text, which is what buried
   the content. The cards are plain now: white ground, hairline border, an
   accent rule across the top, and the icon and copy at full contrast. This is
   the fallback the build always carried for the no-photograph case; it is now
   the default, because the section exists to be read.
   ========================================================================== */
.mos-card .mos-img { display: none; }
.mos-card::before  { display: none; }

.mos-card {
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: calc(30 * var(--h));
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
}
.mos-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
}
.mos-card h3 {
  margin-top: calc(16 * var(--h));
  margin-bottom: calc(10 * var(--h));
  color: var(--ink);
}
.mos-card p { color: var(--muted); }
.mos-card .ico { color: var(--accent); }

/* ==========================================================================
   S7 PROCESS — heading above the track, not on top of it
   The pinned head was position:absolute at top-left with a 540px max-width,
   while the track starts at 12vw (181px at 1512), so the cards overlapped the
   heading and lede. The head now sits in normal flow at the top of the sticky
   stage and the track follows beneath it.
   ========================================================================== */
@media (min-width: 901px) {
  .stage {
    justify-content: flex-start;
    /* clears the sticky header (topbar + hdr is ~106px at this scale), since
       the header is z-50 and the stage is z-5 */
    padding-top: calc(142 * var(--u));
    padding-bottom: calc(40 * var(--u));
  }
  .process-pinned-head {
    position: static;
    max-width: calc(660 * var(--h));
    margin: 0 var(--gutter) calc(34 * var(--u));
    z-index: 5;
  }
  /* centre the cards in whatever height is left under the heading */
  .track { align-items: stretch; margin-block: auto; }
}

/* the process heading needs the page gutter once the stage is unpinned */
@media (max-width: 900px) {
  .process-pinned-head {
    padding-inline: var(--gutter);
    margin-bottom: calc(26 * var(--u));
  }
  .stage { padding-top: calc(30 * var(--u)); }
}

/* ==========================================================================
   1 · CHECKLIST TRIGGER — the button was landing on top of the copy
   .trigger-cta-bar was position:absolute at the bottom of .trigger-plate, so
   it sat over the third preview row ("All vaccination records — including
   ...") instead of below it. It now sits in normal flow under the list, and
   the list's fade starts later so the last row is still clearly a preview.
   ========================================================================== */
.trigger-cta-bar {
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
  margin-top: calc(26 * var(--u));
  text-align: center;
}
.preview-list {
  mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  padding-bottom: calc(6 * var(--u));
}
.trigger-plate { padding-bottom: calc(38 * var(--h)); }

/* ==========================================================================
   2 · JUSTIFIED BODY COPY, SITE-WIDE
   Previously only some sections were justified and it reverted to ragged-left
   below 760px. Every block of running copy is justified now, at every width,
   with automatic hyphenation so the word spacing stays even rather than
   opening rivers on a narrow column.
   Deliberately NOT justified: headings, eyebrows, labels, buttons, table-like
   rows and anything centred, where justification has nothing to align to.
   ========================================================================== */
.hero .lead,
.sec-lead,
.doc-txt > p,
.why .act p,
.note p,
.hpanel p,
.mos-card p,
.vax-detail p,
.vax-note,
.ans p,
.band p,
.band-note,
.band-lead,
.preview-item .nt,
.ftr-brand-col p,
.ftr-disclaimer,
.book-media .lead,
.callout--info p,
.callout--alert p,
.quote-text,
.sub-note {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* the earlier rule that un-justified everything on small screens is retired;
   hyphenation is what keeps a 390px column readable when justified */
@media (max-width: 760px) {
  .sec-lead, .doc-txt > p, .why .act p, .note p, .hpanel p, .vax-detail p,
  .ans p, .band p, .preview-item .nt, .ftr-brand-col p, .mos-card p,
  .hero .lead {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}
@media (max-aspect-ratio: 11/10), (max-width: 700px) {
  .mos-card p { text-align: justify; hyphens: auto; }
}

/* centred copy can't be justified — keep these ragged */
.post-cta p,
.cta .lead,
.trigger-cta-bar .sub-note { text-align: center; }

/* the checklist preview rows are short two-part lines (name — note); justifying
   them stretched "Form  I-693,  edition" across the row. They stay ragged. */
.preview-item { text-align: left; }

/* ==========================================================================
   S3 "BY THE NUMBERS" — ledger replaces the concentric arcs
   The arcs read as stray curved hairlines rather than a graphic, and the
   figures were too small to scan. Four hairline rows now carry the numbers at
   real size, in the same language as the Why-us rows and the credentials
   list. One treatment for every width, so there is no separate mobile grid.
   ========================================================================== */
.stat-ledger {
  margin: 0;
  padding: 0;
  align-self: center;
}
.stat-row {
  display: grid;
  grid-template-columns: minmax(calc(120 * var(--h)), auto) 1fr;
  align-items: baseline;
  gap: calc(28 * var(--h));
  padding-block: calc(26 * var(--u));
  border-top: 1px solid var(--line);
}
.stat-row:last-child { border-bottom: 1px solid var(--line); }

.stat-num {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: calc(84 * var(--h));
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--accent-2);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat-lbl {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: calc(13 * var(--h));
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

/* the section is two columns on desktop, stacked below */
@media (min-width: 901px) {
  .arc-section {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: calc(72 * var(--h));
    align-items: center;
  }
  .arc-content { align-self: center; }
}
@media (max-width: 900px) {
  .arc-section { display: block; }
  .stat-ledger { margin-top: calc(34 * var(--u)); }
  .stat-row {
    grid-template-columns: minmax(calc(92 * var(--h)), auto) 1fr;
    gap: calc(20 * var(--h));
    padding-block: calc(20 * var(--u));
  }
  .stat-num { font-size: calc(58 * var(--h)); }
  .stat-lbl { font-size: 13px; letter-spacing: 0.14em; }
}

/* ==========================================================================
   BOOKING REMOVED — the practice takes appointments by phone
   The booking section and its calendar embed are gone, so every CTA is now a
   phone call. The sticky mobile bar carries one full-width Call button rather
   than a Call/Book pair.
   ========================================================================== */
.mcta-single {
  flex: 1 1 100%;
  justify-content: center;
  text-align: center;
  min-height: 48px;
}

/* rules that only served the removed booking section, kept inert on purpose
   rather than deleted, so nothing else that referenced them can break:
   .book, .book-media, .book-pane, .ghl-container, .reassurance-list,
   .reassurance-row, .talk-note, .status-pill */