/* =====================================================================
   Kayakriti — Futuristic 3D Splash
   Screen 0 → Q1 → Q2 → Q3 → Success
   Premium aesthetic with animated mesh gradients, glass orbs, 3D depth
   ===================================================================== */

/* Lock scroll ONLY on the full-screen splash — all other pages scroll normally */
/* Was `overflow: hidden` — that hid every sibling rendered AFTER the
   .splash-shell (awards band, credentials band etc.) because the body
   couldn't scroll. We now allow vertical scroll so the trust strips
   below the funnel become visible. .splash-shell still locks the
   funnel itself to one viewport height — see its rule below. */
body.is-splash { overflow-x: hidden; overflow-y: auto; }
body.is-splash {
  padding: 0;
  background: var(--page-bg);
  position: relative;
}

/* Aux palette tokens (used by 3D ring nodes) */
:root {
  --ring-line: rgba(45, 125, 210, 0.32);
  --ring-glow: rgba(45, 125, 210, 0.55);
}

/* Original blue aurora mesh background */
.splash-shell {
  /* Was `height: 100vh` exact — that clipped funnel steps whose option
     list ran past the viewport (user couldn't scroll to reach the last
     few options on desktop or mobile). Now the shell uses min-height so
     it ALWAYS fills the first viewport on the landing screen, but
     expands taller on steps with overflowing content; the body's own
     overflow-y: auto then handles the scroll. Trust strips still sit
     below in the document flow. */
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(194, 221, 243, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(214, 232, 248, 0.6) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 80% 90%, rgba(235, 243, 251, 0.7) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(214, 232, 248, 0.55) 0%, transparent 55%),
    var(--page-bg);
  z-index: 1;
  overflow: hidden;
}

/* Floating ambient blue orbs */
.splash-shell::before,
.splash-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.splash-shell::before {
  width: 380px; height: 380px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, var(--blue-2) 0%, transparent 70%);
  animation: orbDrift1 22s ease-in-out infinite;
}
.splash-shell::after {
  width: 460px; height: 460px;
  bottom: -180px; right: -140px;
  background: radial-gradient(circle, var(--tint-2) 0%, transparent 70%);
  animation: orbDrift2 28s ease-in-out infinite;
}
@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, 40px) scale(1.1); }
  66% { transform: translate(-30px, 80px) scale(0.95); }
}
@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-80px, -60px) scale(1.08); }
}

/* ========== TOP BAR ==========
   The logo on the left of this bar must align with the LEFT EDGE of
   the .splash-screen text column below (where the eyebrow, headline
   and CTA all start). To guarantee this on every viewport, the bar
   mirrors the splash-stage / splash-screen pattern EXACTLY:

     .splash-top         = full width, same horizontal padding as .splash-stage
       └─ .splash-top-inner  = max-width 1100, margin auto  (= .splash-screen)
            ├─ .brand
            └─ .actions

   Because both `.splash-top-inner` and `.splash-screen` use identical
   centring math, their left edges line up at every viewport width. */
.splash-top {
  width: 100%;
  padding: 18px clamp(20px, 5vw, 80px);
  flex-shrink: 0;
  z-index: 5;
  position: relative;
  box-sizing: border-box;
}
.splash-top-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
/* The brand is the FIRST child of the inner wrapper — pin it hard to
   the left edge of that wrapper. `margin: 0` + the parent's flex
   start position is enough; explicit overrides here defeat any earlier
   `.brand`/`a` rule that might inject padding. */
.splash-top .splash-top-inner > .brand {
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
/* Stacked brand override — when the splash brand link carries the
   .kn-brand-stack modifier (logo on top, "Plastic Surgery and Dental
   Clinic" tagline below), the cross-axis alignment must be flush-left
   so the two lines read as one column hugging the left edge. Without
   this, the rule above leaves `align-items: center` in effect and the
   tagline visually drifts toward the centre of the logo. */
.splash-top .splash-top-inner > .brand.kn-brand-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
}
/* PNG logo replaces the "K" dot + wordmark on the splash header.
   No drop-shadow, no filter, no box-shadow — the logo PNG already
   carries its own chrome ring; any extra CSS shadow on top muddies it. */
.splash-top .brand-logo {
  height: 84px;
  width: auto;
  display: block;
  object-fit: contain;
  margin: 0;
  padding: 0;
  filter: none;
  box-shadow: none;
}
.splash-top .actions { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; }
.splash-top .skip-link { white-space: nowrap; }
/* Splash variant of the language switch — solid blue track with a
   white sliding thumb so it stands out on the light splash background.
   Specificity boosted via .splash-top so it always wins over the
   default switch styles in mega-menu.css (which load later). */
.splash-top .kn-lang-switch.kn-lang-switch-splash {
  background: var(--blue, #2D7DD2);
  border-color: var(--blue, #2D7DD2);
  box-shadow: 0 6px 16px -6px rgba(45, 125, 210, 0.55);
}
.splash-top .kn-lang-switch.kn-lang-switch-splash:hover {
  background: var(--blue-deep, #1e6bbd);
  border-color: var(--blue-deep, #1e6bbd);
}
/* Inactive opt: faded white. Active opt (selected via data-lang on the
   parent): dark ink so it reads on the white sliding thumb. */
.splash-top .kn-lang-switch.kn-lang-switch-splash .kn-lang-opt {
  color: rgba(255, 255, 255, 0.82);
}
.splash-top .kn-lang-switch.kn-lang-switch-splash[data-lang="en"] .kn-lang-opt[data-opt="en"],
.splash-top .kn-lang-switch.kn-lang-switch-splash[data-lang="hi"] .kn-lang-opt[data-opt="hi"] {
  color: var(--ink, #0E1E35);
}
.splash-top .kn-lang-switch.kn-lang-switch-splash .kn-lang-thumb {
  background: #ffffff;
}
/* Mobile — the Lucknow pill + Skip link + brand all crowd a 390px row.
   Hide the location pill (it's nice-to-have, not critical), tighten skip link. */
@media (max-width: 720px) {
  .splash-top { padding: 14px clamp(16px, 5vw, 24px); }
  .splash-top .brand { font-size: 18px; }
  .splash-top .brand-logo { height: 64px; }
  .splash-top .actions .pill-white { display: none; }
  .splash-top .skip-link { font-size: 12px; padding: 7px 12px; }
}
/* "Home" button on the splash header — brand-blue pill matching the
   language switch chip so the two controls read as one set in the
   header. Was originally a low-contrast "Skip to website" text link;
   promoted to a proper button because visitors were missing it. */
.skip-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Sized to MATCH the language switch height exactly — 5 px outer +
     5 px inner padding on EN/HI = 10 px total above/below the glyph;
     plus the 1 px border ≈ 32 px total. The home pill needs 7 px / 14 px
     to land at the same height with its single-button (no inner opt)
     structure. Was 9 px / 16 px, which made the home pill visibly
     taller than its two siblings (per user screenshot). */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  line-height: 1.1;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--blue, #2D7DD2);
  background: var(--blue, #2D7DD2);
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 16px -6px rgba(45, 125, 210, 0.55);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.skip-link:hover {
  background: var(--blue-deep, #1e6bbd);
  border-color: var(--blue-deep, #1e6bbd);
  color: #ffffff;
  box-shadow: 0 10px 22px -10px rgba(30, 107, 189, 0.6);
  transform: translateY(-1px);
}
.skip-link:active { transform: translateY(0); }
.skip-link svg { display: block; flex-shrink: 0; }
.skip-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ===== Sticky vertical "Home" rail — flush right edge "tab" that
   slides in from the side once the top header Home pill scrolls out
   of view. Stronger gradient + bigger shadow + uppercase tracking
   to be more prominent than the previous flat pill. Text + icon stay
   pure white across idle / hover / active / focus / visited so the
   colour never merges with the background. ===== */
.kp-sticky-home {
  position: fixed;
  right: 0;                                /* flush against the viewport edge */
  top: 50%;
  transform: translateY(-50%) translateX(110%);   /* hidden, slid off-screen */
  z-index: 60;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 11px;
  /* Tab shape — rounded LEFT corners, square RIGHT corners so it reads
     as anchored to the viewport edge rather than floating. */
  border-radius: 16px 0 0 16px;
  border: 0;
  background: linear-gradient(160deg, #2D7DD2 0%, #4A9EE8 100%);
  color: #ffffff !important;               /* guaranteed white across states */
  text-decoration: none;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Big drop-shadow throws it forward, ring-glow draws the eye. */
  box-shadow:
    -10px 12px 28px -10px rgba(14, 30, 53, 0.45),
    0 0 0 0 rgba(74, 158, 232, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    visibility 0s linear 0.35s;
}
/* Desktop only — scale the chip ~10% bigger so it pulls the eye more
   firmly on wider viewports (per user request 2026-06-13). Mobile values
   stay as the base rule above so the chip doesn't crowd small screens. */
@media (min-width: 760px) {
  .kp-sticky-home {
    padding: 22px 12px;
    font-size: 13.75px;
    gap: 11px;
    border-radius: 18px 0 0 18px;
  }
}
.kp-sticky-home.is-visible {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Gentle "look at me" pulse, only fires while visible. */
  animation: kp-sticky-home-pulse 2.4s ease-in-out infinite;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    visibility 0s linear 0s;
}
@keyframes kp-sticky-home-pulse {
  0%   { box-shadow: -10px 12px 28px -10px rgba(14, 30, 53, 0.45), 0 0 0 0   rgba(74, 158, 232, 0.55); }
  60%  { box-shadow: -10px 12px 28px -10px rgba(14, 30, 53, 0.45), 0 0 0 16px rgba(74, 158, 232, 0);    }
  100% { box-shadow: -10px 12px 28px -10px rgba(14, 30, 53, 0.45), 0 0 0 0   rgba(74, 158, 232, 0);    }
}
/* Hover / focus / active — keep text + icon SOLID WHITE.
   Previous version used `var(--blue-deep)` which the iOS Safari
   visited-link tint sometimes turned into a muddy near-black background
   while the text was still calculated against a now-stale colour
   variable — so the user saw the label "merge" into the chip. The new
   rule forces colour: white !important on every interactive state. */
.kp-sticky-home:hover,
.kp-sticky-home:focus,
.kp-sticky-home:active,
.kp-sticky-home:visited {
  color: #ffffff !important;
  text-decoration: none;
}
.kp-sticky-home:hover {
  background: linear-gradient(160deg, #1e6bbd 0%, #3a8ed8 100%);
  box-shadow:
    -12px 14px 32px -10px rgba(14, 30, 53, 0.5),
    0 0 0 0 rgba(74, 158, 232, 0);          /* halt the pulse on hover */
}
.kp-sticky-home:hover { animation-play-state: paused; }
.kp-sticky-home:active {
  transform: translateY(-50%) translateX(0) scale(0.97);
}
.kp-sticky-home svg {
  display: block;
  flex-shrink: 0;
  color: #ffffff;
  width: 18px;
  height: 18px;
}
.kp-sticky-home-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);                /* read bottom-to-top */
  line-height: 1;
  color: #ffffff;
}
.kp-sticky-home:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -3px;
}
/* Reduced-motion — kill the pulse but keep the slide-in. */
@media (prefers-reduced-motion: reduce) {
  .kp-sticky-home.is-visible { animation: none; }
}
/* Mobile — slightly smaller padding so the rail doesn't crowd. */
@media (max-width: 640px) {
  .kp-sticky-home {
    padding: 16px 9px;
    font-size: 11.5px;
    gap: 8px;
  }
  .kp-sticky-home svg { width: 16px; height: 16px; }
}

/* ========== STAGE ========== */
.splash-stage {
  flex: 1;
  display: flex;
  align-items: safe center; justify-content: center;
  padding: 16px clamp(20px, 5vw, 80px) 32px;
  position: relative;
  min-height: 0;
  /* overflow-y: auto was creating a nested scroll container on the
     funnel. User scrolled and the splash-stage consumed the first
     swipe/wheel (it had no real overflow but the browser still treated
     it as scrollable), forcing a second swipe to cascade to body scroll.
     Set to visible so all scroll events go straight to the body — the
     splash-shell's overflow: hidden still clips any genuinely overflowing
     content visually. */
  overflow: visible;
  z-index: 2;
}
.splash-screen {
  width: 100%;
  max-width: 1200px;
  animation: splashIn 0.6s var(--ease);
}
/* Q1 — matches the splash-top-inner / .splash-screen width (1200 px) so
   the row of category cards lines up with the logo + Skip-to-website
   on the header. Extra room also lets each card's icon scale up. */
#screen-q1.splash-screen { max-width: 1200px; }
.splash-screen:not(.active) { display: none !important; }
@keyframes splashIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Bottom progress bar */
.splash-bottom {
  padding: 18px clamp(20px, 4vw, 48px);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
  border-top: 1px solid rgba(227, 236, 245, 0.6);
  background: rgba(245, 248, 253, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 5;
  position: relative;
}
.splash-bottom.hidden { display: none; }
.splash-progress-wrap { display: flex; align-items: center; gap: 14px; }
.splash-progress-dots { display: flex; gap: 6px; }
.splash-progress-dots .dot {
  width: 32px; height: 4px; border-radius: 4px; background: var(--line);
  transition: all 0.4s var(--ease);
}
.splash-progress-dots .dot.done { background: var(--blue); }
.splash-progress-dots .dot.active {
  background: var(--grad-blue);
  width: 48px;
  box-shadow: 0 0 12px rgba(45, 125, 210, 0.4);
}
.splash-step-text {
  font-family: var(--font);
  font-size: 11px; color: var(--muted);
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.funnel-back {
  font-family: var(--font);
  font-size: 14px; color: var(--muted);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.funnel-back:hover {
  color: var(--ink);
  border-color: var(--tint);
  transform: translateX(-2px);
}

/* ========================================================================
   SCREEN 0 — FUTURISTIC 3D HERO SPLASH
   ======================================================================== */
.screen-0 {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 48px; align-items: center;
  max-width: 1200px;
}
@media (max-width: 960px) {
  .screen-0 { grid-template-columns: 1fr; gap: 32px; text-align: center; }
}

/* Opt-out from `.eyebrow`'s `text-transform: uppercase` so credentials
   that have a specific letter-case (M.Ch — capital M, lowercase h) stay
   readable as written. Used inline within the eyebrow text. */
.kaya-keep-case { text-transform: none; }
.screen-0 .pill-wrap { margin-bottom: 10px; }
.screen-0 .eyebrow {
  background: var(--white);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px -4px rgba(45, 125, 210, 0.15);
}
.screen-0 h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.8vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.024em;
  margin-bottom: 14px;
  font-weight: 400;
  color: var(--ink);
}
.screen-0 h1 .serif {
  display: block;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 50%, var(--blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.screen-0 .lead {
  font-size: clamp(15px, 1.4vw, 17px);
  margin-bottom: 16px;
  line-height: 1.5;
  color: var(--ink-3);
}
/* Desktop: clamp the active lead variant to 2 lines so the hero copy
   block keeps a tight, symmetrical height across both doctors (slight
   word-wrap differences can otherwise leave one variant taller and
   shift the CTA position during the 6 s swap). Mobile keeps natural
   wrapping.
   IMPORTANT: this rule must target only the ACTIVE variant — applying
   `display: -webkit-box` to both unconditionally overrides the
   `display: none` default and renders Amit + Shweta together. */
@media (min-width: 901px) {
  /* Desktop line-clamp — applied to BOTH lead variants always (not just
     the active one) so the parent's grid cell sizes to a consistent
     two-line height regardless of which variant is currently visible.
     Layout stays rock-stable through the doctor swap. */
  .screen-0 .lead-amit,
  .screen-0 .lead-shweta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.screen-0 .statbar {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-bd);
  box-shadow: 0 8px 32px -8px rgba(14, 30, 53, 0.08);
}
.screen-0 .statbar strong { font-size: 36px; }
@media (max-width: 720px) {
  /* Smaller on phones so the four stats still fit one row neatly. */
  .screen-0 .statbar strong { font-size: 24px; }
}
.screen-0 .statbar span { font-size: 12px; }
/* The rolling-count <span> sits INSIDE the <strong> wrapper but would
   otherwise be caught by the rule above and shrunk to 12 px. Force it
   to inherit the strong's big font + weight so the number renders at
   the same size it did before the count-up animation was added. */
.screen-0 .statbar strong .kp-count {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.screen-0 .actions {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  flex-wrap: wrap;
}
@media (max-width: 960px) { .screen-0 .actions { align-items: center; } }
.cta-call-line {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.cta-call-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.cta-call-link:hover { color: var(--ink); }

/* ========== EDITORIAL SCULPTURE STAGE (3D perspective) ========== */
.illo {
  position: relative;
  aspect-ratio: 0.82;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}

/* True 3D orbital rings — tilted in perspective, spin on Z (Saturn-style) */
.illo-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--ring-line);
  transform-style: preserve-3d;
  pointer-events: none;
}
.illo-orbit-1 {
  inset: 18% 6%;
  transform: rotateX(72deg) rotateZ(0deg);
  animation: orbit3D-1 28s linear infinite;
}
.illo-orbit-2 {
  inset: 30% 14%;
  border-color: rgba(45, 125, 210, 0.24);
  border-style: dashed;
  transform: rotateX(70deg) rotateY(18deg) rotateZ(0deg);
  animation: orbit3D-2 38s linear infinite reverse;
}
.illo-orbit-3 {
  inset: 8% 20%;
  border-color: rgba(45, 125, 210, 0.18);
  border-width: 0.5px;
  transform: rotateX(76deg) rotateY(-12deg) rotateZ(0deg);
  animation: orbit3D-3 46s linear infinite;
}

/* Glowing nodes that travel on the rim — they appear to come forward / recede in 3D */
.illo-orbit .orbit-node {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5BAEFF, var(--blue) 50%, var(--blue-deep));
  box-shadow: 0 0 12px var(--ring-glow), inset 0 -2px 3px rgba(0,0,0,0.2);
  top: -5px; left: 50%; transform: translateX(-50%);
}
.illo-orbit-1 .orbit-node:nth-child(2) { top: auto; bottom: -5px; }
.illo-orbit-2 .orbit-node { width: 6px; height: 6px; }

@keyframes orbit3D-1 {
  from { transform: rotateX(72deg) rotateZ(0deg); }
  to   { transform: rotateX(72deg) rotateZ(360deg); }
}
@keyframes orbit3D-2 {
  from { transform: rotateX(70deg) rotateY(18deg) rotateZ(0deg); }
  to   { transform: rotateX(70deg) rotateY(18deg) rotateZ(360deg); }
}
@keyframes orbit3D-3 {
  from { transform: rotateX(76deg) rotateY(-12deg) rotateZ(0deg); }
  to   { transform: rotateX(76deg) rotateY(-12deg) rotateZ(360deg); }
}

/* Editorial frame — thin blue rectangle behind sculpture */
.illo-frame {
  position: absolute;
  top: 14%; left: 28%;
  width: 44%; height: 64%;
  border: 1.5px solid var(--ring-line);
  border-radius: 2px;
  z-index: 1;
  animation: frameBreathe 7s ease-in-out infinite;
}
@keyframes frameBreathe {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(-8px); opacity: 0.85; }
}

/* Soft warm pedestal glow under the sculpture */
.illo-pedestal {
  position: absolute;
  bottom: 8%; left: 50%;
  width: 60%; height: 80px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 100% 50% at 50% 50%, rgba(45, 125, 210, 0.28) 0%, transparent 70%);
  filter: blur(20px);
  z-index: 0;
}

/* Sphere/old-rings classes silenced (safety in case any HTML still references them) */
.illo-ring-outer, .illo-ring-mid, .illo-bg, .illo-sphere, .illo-svg { display: none !important; }
@keyframes sphereFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Floating service tags — refined white/blue glass chips */
.illo-tag {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-pill);
  padding: 10px 16px 10px 12px;
  font-family: var(--font);
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  display: inline-flex; gap: 8px; align-items: center;
  box-shadow:
    0 18px 36px -10px rgba(14, 30, 53, 0.14),
    0 2px 6px rgba(45, 125, 210, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: floaty 6s ease-in-out infinite;
  z-index: 5;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  font-size: 11px;
}
.illo-tag .tag-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5BAEFF 0%, var(--blue) 60%, var(--blue-deep) 100%);
  display: grid; place-items: center;
  color: var(--white);
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(45, 125, 210, 0.45);
}
.illo-tag .tag-icon svg { width: 13px; height: 13px; }
/* Push tags well outside the figure silhouette so they don't overlap the sculpture */
.illo-tag-1 { top:  4%; left:  -20%; animation-delay: 0s; }
.illo-tag-2 { top: 36%; right: -22%; animation-delay: 1.4s; }
.illo-tag-3 { bottom: 14%; left: -16%; animation-delay: 2.8s; }
.illo-tag-4 { top: 12%; right: -16%; animation-delay: 4.2s; }
/* Tablet (901–960px): just shrink the tag font; positions stay at the
   negative-offset edges defined above. Below 900px the tags are hidden
   entirely by the mobile rules. */
@media (max-width: 960px) {
  .illo-tag { font-size: 11px; padding: 7px 12px 7px 8px; }
  .illo-tag .tag-icon { width: 20px; height: 20px; }
}

/* Decorative drifting particles (sky blue) */
.illo-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 14px rgba(45, 125, 210, 0.55);
  animation: particleFloat 7s ease-in-out infinite;
  z-index: 2;
}
.illo-particle.p1 { width: 6px; height: 6px; top: 12%; left: 18%; animation-delay: 0s; opacity: 0.6; }
.illo-particle.p2 { width: 5px; height: 5px; top: 80%; left: 78%; animation-delay: 1.5s; opacity: 0.5; }
.illo-particle.p3 { width: 4px; height: 4px; top: 28%; right: 12%; animation-delay: 3s; opacity: 0.55; }
.illo-particle.p4 { width: 5px; height: 5px; bottom: 22%; left: 8%; animation-delay: 4.5s; opacity: 0.6; }
@keyframes particleFloat {
  0%, 100% { transform: translate(0, 0); opacity: 0.5; }
  50% { transform: translate(8px, -16px); opacity: 0.9; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ========================================================================
   SCREENS 1-2 — QUESTIONS
   ======================================================================== */
.screen-q {
  max-width: 920px; margin: 0 auto;
  text-align: center;
}
.screen-q .eyebrow { margin-bottom: 14px; }
.screen-q h2 {
  font-size: clamp(28px, 4.2vw, 48px);
  margin-bottom: 12px;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.screen-q h2 .accent { color: var(--blue); }
.screen-q .subtitle {
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 17px);
  margin-bottom: 36px;
  max-width: 580px;
  margin-left: auto; margin-right: auto;
}

/* Q1 / Q2 / Q3 grids — using minmax(0, 1fr) instead of 1fr forces every
   column to the same width even when one card's text is longer than the
   others. (Plain `1fr` is shorthand for `minmax(auto, 1fr)` — the auto
   floor lets a column grow to fit min-content, which made the "Not sure
   yet" card visibly wider than its siblings.) `align-items: stretch`
   makes every card the same height as the tallest in its row. */
.opt-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
  width: 100%;
  align-items: stretch;
}
/* funnel.css's `.opt-list` rule (loaded after splash.css) re-sets some
   properties — re-assert grid here at the splash-shell scope so its
   properties win on the splash page. */
.splash-shell .opt-list {
  display: grid !important;
  align-items: stretch !important;
}
.opt-list.opt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt-list.opt-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opt-list.opt-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Belt-and-braces: force each grid item to its share width AND height
   regardless of the inner content's min-content size. Without this, a
   card with a wrapped title or a longer description can request more
   horizontal space than its siblings (so it appears wider) or vary in
   height (so the row looks staggered).
   NOTE: Q1 wraps each card in a `<div data-stagger>` for the entrance
   animation, so the direct grid child is the wrapper — not `.opt`.
   We stretch BOTH so the cards inside still inherit a full-row height. */
.opt-list > .opt,
.opt-list > [data-stagger] {
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  display: flex;
}
.opt-list > [data-stagger] > .opt {
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Q1 (opt-grid-4 / opt-grid-5) only — fixed min-height so all cards
   converge to the same visible size even when one card's title wraps
   to two lines. Q2 / Q3 grids keep their natural compact sizing. */
.opt-list.opt-grid-4 > .opt,
.opt-list.opt-grid-5 > .opt { min-height: 180px; }
.opt-list.opt-list-stack { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
/* Tablet — collapse to 2-3 columns to keep cards readable */
@media (max-width: 1100px) {
  .opt-list.opt-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .opt-list,
  .opt-list.opt-grid-3,
  .opt-list.opt-grid-4,
  .opt-list.opt-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobile — single column, every card the same width as its siblings */
@media (max-width: 720px) {
  .opt-list,
  .opt-list.opt-grid-3,
  .opt-list.opt-grid-4,
  .opt-list.opt-grid-5 { grid-template-columns: 1fr; }
  .opt-list .opt { width: 100%; max-width: 100%; box-sizing: border-box; }
}

/* Compact card-style option (used in Q1 grid) */
.opt {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  padding: 20px 18px;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  position: relative;
  overflow: hidden;
  min-height: 84px;
}
.opt::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--grad-aurora);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  z-index: -1;
  border-radius: inherit;
}
.opt:hover {
  border-color: var(--blue-2);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(45, 125, 210, 0.2);
}
.opt:hover::before { opacity: 0.5; }
.opt.selected {
  border-color: var(--blue);
  background: rgba(214, 232, 248, 0.6);
  box-shadow: 0 0 0 4px rgba(45, 125, 210, 0.15), var(--glow-blue);
}

.opt-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--surface), var(--tint));
  display: grid; place-items: center;
  color: var(--blue);
  font-size: 22px;
  flex-shrink: 0;
  transition: all var(--t-base) var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.opt-icon svg { width: 34px; height: 34px; }

/* ---------------------------------------------------------------------
   SPLASH PNG ICONS — overrides the inline SVG fallback
   ---------------------------------------------------------------------
   When a card has `data-icon="splash-<slug>"` AND the matching PNG
   exists at /assets/img/icons/<slug>.png, we paint the PNG via CSS
   mask-image on a ::before pseudo so the icon picks up brand-blue
   `--blue` regardless of the PNG's source colour. PNG missing → the
   ::before is invisible and the inline SVG keeps showing.
   --------------------------------------------------------------------- */
.opt-icon[data-icon] { position: relative; }
.opt-icon[data-icon]::before {
  content: "";
  position: absolute;
  inset: 11px;
  background-color: var(--blue);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
/* Mobile / narrow tablets — bump the splash card icons so they read
   clearly inside the stacked single-column cards. Breakpoint matches
   the single-column layout switch (720 px). Icon tile is 58 px per
   client spec; tile + mask::before scale together so PNG icons fill
   the tile proportionally. */
@media (max-width: 720px) {
  .opt { grid-template-columns: 58px 1fr !important; gap: 14px !important; padding: 18px !important; }
  .opt-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
  }
  .opt-icon svg { width: 30px; height: 30px; }
  .opt-icon[data-icon]::before { inset: 9px; }
}
/* Active/selected state — flip mask to white to match the blue background */
.opt.selected .opt-icon[data-icon]::before { background-color: var(--white); }

/* Per-icon PNG bindings — one line per splash icon.
   Add new lines here when you add new icons to the funnel. */
.opt-icon[data-icon="splash-non-surgical"]::before { -webkit-mask-image: url("/assets/img/icons/splash-non-surgical.webp"); mask-image: url("/assets/img/icons/splash-non-surgical.webp"); }
.opt-icon[data-icon="splash-cosmetic"]::before     { -webkit-mask-image: url("/assets/img/icons/splash-cosmetic.webp");     mask-image: url("/assets/img/icons/splash-cosmetic.webp"); }
.opt-icon[data-icon="splash-reconstructive"]::before { -webkit-mask-image: url("/assets/img/icons/splash-reconstructive.webp"); mask-image: url("/assets/img/icons/splash-reconstructive.webp"); }
.opt-icon[data-icon="splash-dental"]::before       { -webkit-mask-image: url("/assets/img/icons/splash-dental.webp");       mask-image: url("/assets/img/icons/splash-dental.webp"); }
.opt-icon[data-icon="splash-question"]::before     { -webkit-mask-image: url("/assets/img/icons/splash-question.png");     mask-image: url("/assets/img/icons/splash-question.png"); }
/* Q2 categories — generic slugs that map across pillars */
.opt-icon[data-icon="splash-face"]::before     { -webkit-mask-image: url("/assets/img/icons/splash-face.png");     mask-image: url("/assets/img/icons/splash-face.png"); }
.opt-icon[data-icon="splash-breast"]::before   { -webkit-mask-image: url("/assets/img/icons/splash-breast.png");   mask-image: url("/assets/img/icons/splash-breast.png"); }
.opt-icon[data-icon="splash-body"]::before     { -webkit-mask-image: url("/assets/img/icons/splash-body.png");     mask-image: url("/assets/img/icons/splash-body.png"); }
.opt-icon[data-icon="splash-genitals"]::before { -webkit-mask-image: url("/assets/img/icons/splash-genitals.png"); mask-image: url("/assets/img/icons/splash-genitals.png"); }
.opt-icon[data-icon="splash-makeover"]::before { -webkit-mask-image: url("/assets/img/icons/splash-makeover.png"); mask-image: url("/assets/img/icons/splash-makeover.png"); }
.opt-icon[data-icon="splash-general"]::before  { -webkit-mask-image: url("/assets/img/icons/splash-general.png");  mask-image: url("/assets/img/icons/splash-general.png"); }
.opt-icon[data-icon="splash-hand"]::before     { -webkit-mask-image: url("/assets/img/icons/splash-hand.png");     mask-image: url("/assets/img/icons/splash-hand.png"); }
.opt-icon[data-icon="splash-burns"]::before    { -webkit-mask-image: url("/assets/img/icons/splash-burns.png");    mask-image: url("/assets/img/icons/splash-burns.png"); }
.opt-icon[data-icon="splash-jaw"]::before      { -webkit-mask-image: url("/assets/img/icons/splash-jaw.png");      mask-image: url("/assets/img/icons/splash-jaw.png"); }
.opt-icon[data-icon="splash-smile"]::before    { -webkit-mask-image: url("/assets/img/icons/splash-smile.png");    mask-image: url("/assets/img/icons/splash-smile.png"); }
.opt-icon[data-icon="splash-nerve"]::before    { -webkit-mask-image: url("/assets/img/icons/splash-nerve.png");    mask-image: url("/assets/img/icons/splash-nerve.png"); }
.opt-icon[data-icon="splash-diabetic-foot"]::before { -webkit-mask-image: url("/assets/img/icons/splash-diabetic-foot.png"); mask-image: url("/assets/img/icons/splash-diabetic-foot.png"); }
/* Face sub-category icons — eyes / ear / nose / lips / neck / cheek /
   chin / smile / makeover. Source PNGs already live in /assets/img/icons/
   under their plain names (no `splash-` prefix), so we point the mask
   straight at those rather than duplicating files. */
.opt-icon[data-icon="splash-eyes"]::before     { -webkit-mask-image: url("/assets/img/icons/eyes.webp");          mask-image: url("/assets/img/icons/eyes.webp"); }
.opt-icon[data-icon="splash-ear"]::before      { -webkit-mask-image: url("/assets/img/icons/ear.webp");           mask-image: url("/assets/img/icons/ear.webp"); }
.opt-icon[data-icon="splash-nose"]::before     { -webkit-mask-image: url("/assets/img/icons/nose.webp");          mask-image: url("/assets/img/icons/nose.webp"); }
.opt-icon[data-icon="splash-lips"]::before     { -webkit-mask-image: url("/assets/img/icons/lips.webp");          mask-image: url("/assets/img/icons/lips.webp"); }
.opt-icon[data-icon="splash-neck"]::before     { -webkit-mask-image: url("/assets/img/icons/neck.webp");          mask-image: url("/assets/img/icons/neck.webp"); }
.opt-icon[data-icon="splash-cheek"]::before    { -webkit-mask-image: url("/assets/img/icons/cheek.webp");         mask-image: url("/assets/img/icons/cheek.webp"); }
.opt-icon[data-icon="splash-chin"]::before     { -webkit-mask-image: url("/assets/img/icons/chin.webp");          mask-image: url("/assets/img/icons/chin.webp"); }
.opt-icon[data-icon="splash-makeover"]::before { -webkit-mask-image: url("/assets/img/icons/face-makeover.webp"); mask-image: url("/assets/img/icons/face-makeover.webp"); }
/* `splash-smile` was already bound to splash-smile.png higher up; alias it
   to the dedicated smile.png too so the dental smile card and the cosmetic
   face/smile card both pick the same dedicated icon. */
.opt-icon[data-icon="splash-smile"]::before    { -webkit-mask-image: url("/assets/img/icons/smile.webp");         mask-image: url("/assets/img/icons/smile.webp"); }

/* Aliases — auto-generated `icon` field values that don't match a unique PNG */
.opt-icon[data-icon="splash-facialrecon"]::before  { -webkit-mask-image: url("/assets/img/icons/splash-jaw.png");           mask-image: url("/assets/img/icons/splash-jaw.png"); }
.opt-icon[data-icon="splash-nonsurgical"]::before  { -webkit-mask-image: url("/assets/img/icons/splash-non-surgical.webp");  mask-image: url("/assets/img/icons/splash-non-surgical.webp"); }

/* Hide the inline SVG fallback ONLY for splash slugs whose PNG is
   actually present on disk. Cards whose PNG hasn't been uploaded yet
   keep their SVG so the user always sees an icon. Add a slug here
   whenever you drop a new splash-<slug>.png into /assets/img/icons/. */
.opt-icon[data-icon="splash-non-surgical"]   > svg,
.opt-icon[data-icon="splash-nonsurgical"]    > svg,
.opt-icon[data-icon="splash-cosmetic"]       > svg,
.opt-icon[data-icon="splash-reconstructive"] > svg,
.opt-icon[data-icon="splash-dental"]         > svg,
.opt-icon[data-icon="splash-eyes"]           > svg,
.opt-icon[data-icon="splash-ear"]            > svg,
.opt-icon[data-icon="splash-nose"]           > svg,
.opt-icon[data-icon="splash-lips"]           > svg,
.opt-icon[data-icon="splash-neck"]           > svg,
.opt-icon[data-icon="splash-cheek"]          > svg,
.opt-icon[data-icon="splash-chin"]           > svg,
.opt-icon[data-icon="splash-smile"]          > svg,
.opt-icon[data-icon="splash-makeover"]       > svg { display: none; }
.opt:hover .opt-icon { transform: scale(1.08) rotate(-4deg); }
.opt.selected .opt-icon {
  background: var(--grad-blue); color: var(--white);
  box-shadow: 0 6px 16px rgba(45, 125, 210, 0.45);
}

.opt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-main .title {
  color: var(--ink); font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em;
  font-family: var(--font-display);
  line-height: 1.2;
}
.opt-main .desc {
  color: var(--muted); font-size: 12.5px;
  line-height: 1.4;
}

/* Larger stacked variant (used for Q2 sub-services list) */
.opt-list-stack .opt {
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  padding: 18px 22px;
}
.opt-list-stack .opt-icon { width: 52px; height: 52px; font-size: 24px; border-radius: 16px; }
.opt-list-stack .opt-main .title { font-size: 16.5px; }
.opt-list-stack .opt-main .desc { font-size: 13.5px; }
.opt-list-stack .opt-check {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--line);
  display: grid; place-items: center;
  transition: all var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.opt-list-stack .opt.selected .opt-check {
  background: var(--blue); border-color: var(--blue);
}
.opt-list-stack .opt.selected .opt-check::after {
  content: "✓"; color: var(--white); font-size: 14px; font-weight: 800;
}

/* Q2 sub-service grid (3-col on desktop) */
.opt-grid-sub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: left;
}
@media (max-width: 900px) { .opt-grid-sub { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .opt-grid-sub { grid-template-columns: 1fr; } }
.opt-grid-sub .opt {
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 14px 16px;
  min-height: 68px;
}
.opt-grid-sub .opt-icon { width: 40px; height: 40px; font-size: 18px; border-radius: 12px; }
.opt-grid-sub .opt-icon svg { width: 18px; height: 18px; }
.opt-grid-sub .opt-main .title { font-size: 14px; font-family: var(--font); font-weight: 600; }
.opt-grid-sub .opt-main .desc { font-size: 12px; }

/* Sub-section header within Q2 */
.q2-section {
  margin-bottom: 24px;
}
.q2-section-title {
  text-align: left;
  font-family: var(--font);
  font-size: 11px; font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 10px 4px;
  display: flex; align-items: center; gap: 8px;
}
.q2-section-title::before {
  content: ""; width: 14px; height: 2px; background: var(--blue);
  border-radius: 2px;
}

/* ========================================================================
   SCREEN 3 — LEAD FORM
   ======================================================================== */
.screen-form {
  max-width: 680px; margin: 0 auto;
}
.screen-form .form-header {
  background: var(--grad-ink);
  color: var(--white);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
}
.screen-form .form-header::before {
  content: "";
  position: absolute; top: -80px; right: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(45, 125, 210, 0.4) 0%, transparent 70%);
  pointer-events: none;
}
.screen-form .form-header h2 {
  color: var(--white);
  font-size: clamp(26px, 3.2vw, 34px);
  margin-bottom: 8px;
  position: relative;
  letter-spacing: -0.03em;
}
.screen-form .form-header p {
  color: rgba(255,255,255,0.78);
  font-size: 14.5px;
  margin-bottom: 16px;
  position: relative;
}
.screen-form .form-header .tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  position: relative;
}
.screen-form .form-header .pill {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  font-size: 11px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.screen-form .form-body {
  background: var(--white);
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  padding: 32px 36px;
  box-shadow: 0 24px 60px -16px rgba(14, 30, 53, 0.12);
}

/* Preview-of-service card inside step 3 */
.screen-form .preview-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--tint) 100%);
  border-radius: var(--r-lg); padding: 20px;
  margin-bottom: 24px;
  border: 1px solid rgba(45, 125, 210, 0.15);
  position: relative;
  overflow: hidden;
}
.screen-form .preview-card::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
  pointer-events: none;
}
.screen-form .preview-card .eyebrow { margin-bottom: 6px; }
.screen-form .preview-card h3 {
  font-size: 18px; margin-bottom: 6px;
  position: relative;
}
.screen-form .preview-card p { color: var(--body); font-size: 13.5px; margin-bottom: 12px; position: relative; }
.screen-form .preview-card .meta-row {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); margin-bottom: 12px;
  position: relative;
}
.screen-form .preview-card .meta-row strong { color: var(--ink); }

/* ========================================================================
   SCREEN 4 — SUCCESS
   ======================================================================== */
.screen-success {
  text-align: center; max-width: 600px; margin: 0 auto;
}
.screen-success .check {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(31, 169, 113, 0.15), rgba(45, 125, 210, 0.1));
  border: 2px solid rgba(31, 169, 113, 0.3);
  color: var(--success);
  margin: 0 auto 28px;
  display: grid; place-items: center;
  font-size: 48px;
  position: relative;
  animation: checkBounce 0.8s var(--ease-spring);
}
.screen-success .check::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(31, 169, 113, 0.2);
  animation: checkRipple 2s ease-out infinite;
}
@keyframes checkBounce {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes checkRipple {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.screen-success h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 12px;
  letter-spacing: -0.035em;
}
.screen-success .lead { color: var(--muted); margin-bottom: 32px; }
.screen-success .next-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 24px;
  text-align: left;
  margin-bottom: 14px;
  transition: all var(--t-base) var(--ease);
}
.screen-success .next-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-soft);
  border-color: var(--tint);
}
.screen-success .next-card h4 {
  font-family: var(--font);
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 8px; font-weight: 700;
}
.screen-success .next-card .hdr { font-weight: 700; color: var(--ink); margin-bottom: 12px; font-size: 17px; }
.screen-success .next-card p { color: var(--body); font-size: 14px; margin-bottom: 16px; }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 720px) {
  /* Splash form (Q4) — keep everything inside the container on phones. */
  .screen-form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .screen-form .form-header,
  .screen-form .form-body {
    padding: 22px 18px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;          /* clip any ghost pixel of bleed */
  }
  .screen-form .form { gap: 12px; }
  .screen-form .form .field input,
  .screen-form .form .field select,
  .screen-form .form .field textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .screen-form .tel-wrap { min-width: 0; max-width: 100%; }
  .opt-list-stack .opt {
    grid-template-columns: 44px 1fr auto;
    padding: 14px 16px; gap: 12px;
  }
  .opt-list-stack .opt-icon { width: 42px; height: 42px; font-size: 20px; }
}

.splash-stage { padding-bottom: 24px; }

/* ========================================================================
   Q4 SERVICE PICKER
   When the user picked a sub-category at Q3 (e.g. Eyes), the Q4 preview
   card lists every procedure under it as small selectable chips. Picking
   one writes state.step4 and updates the redirect target + tag pills.
   ======================================================================== */
.preview-card-services .preview-prompt {
  margin: 8px 0 12px;
  font-size: 13.5px;
  color: var(--body);
}
.q4-service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 540px) {
  .q4-service-list { grid-template-columns: 1fr; }
}
.q4-service {
  display: flex;
  align-items: center;
  text-align: left;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  min-width: 0;
}
.q4-service:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}
.q4-service.selected {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.18);
}
.q4-service-title {
  flex: 1;
  line-height: 1.25;
  word-break: break-word;
}

/* ========================================================================
   APPOINTMENT TYPE CARDS
   Two selectable cards above "Preferred time" — Video (Free) / In-patient (Paid).
   Each card has a flashing golden-gradient sticker pinned to the top-right.
   ======================================================================== */
.appt-type-field { gap: 8px; }
.appt-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.appt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  /* Symmetric padding — sticker is now pinned to the same baseline as
     the title, so we don't need extra top space above the heading. */
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md, 12px);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
  color: var(--ink);
  min-width: 0;
}
.appt-card:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}
.appt-card.selected {
  border-color: var(--blue);
  background: var(--tint, #E6F0FB);
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.15);
}
.appt-title {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--ink);
  /* Reserve space on the right for the absolutely-positioned sticker so
     a long title never overlaps the badge. */
  padding-right: 60px;
}
.appt-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}

/* Golden sticker — animated shimmer + soft pulsing glow.
   Pinned to the top-right of each card. */
.appt-sticker {
  position: absolute;
  /* Top:14px aligns with the card's 14px top padding so the sticker sits
     on the SAME line as the title (no empty space above the title). */
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5A3A00;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(212, 158, 47, 0.6);
  background: linear-gradient(
    105deg,
    #E6B23F 0%,
    #FCE38A 30%,
    #FFF6CF 50%,
    #FCE38A 70%,
    #E6B23F 100%
  );
  background-size: 220% 100%;
  animation: applyShimmer 2.4s linear infinite, applyPulse 1.6s ease-in-out infinite;
  z-index: 2;
}
@keyframes applyShimmer {
  0%   { background-position: 220% 50%; }
  100% { background-position: -120% 50%; }
}
@keyframes applyPulse {
  0%, 100% { box-shadow: 0 4px 12px -4px rgba(212, 158, 47, 0.4); transform: scale(1); }
  50%      { box-shadow: 0 6px 18px -4px rgba(255, 200, 80, 0.85); transform: scale(1.06); }
}

/* On phones, stack the two cards. */
@media (max-width: 540px) {
  .appt-type-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .appt-sticker { animation: none; }
}

/* ========================================================================
   SYNCED HEADLINE WORD ROTATOR + CENTER MORPHING BODY-PART STACK
   Single 14s clock — 4 states × 3.5s each.
   Word and matching body-part icon are locked via shared animation-delay.
   ======================================================================== */

/* --- Three-line stacked headline (Where every / [rotator] / begins.) --- */
.screen-0 h1.hero-headline { line-height: 1.02; }
.screen-0 h1.hero-headline .line {
  display: block;
}
.screen-0 h1.hero-headline .line-rotator {
  /* The rotator line sits on its own row so width changes don't push other words. */
  min-height: 1.05em;
}

/* --- Headline rotator --- */
.screen-0 h1 .word-rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  perspective: 800px;
}
/* Invisible ghost word — sets the container width to the longest word.
   Now isolated to its own line so trailing words never collide. */
.screen-0 h1 .word-rotator .word-ghost {
  display: inline-block;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.screen-0 h1 .word-rotator .word {
  position: absolute;
  left: 0; right: 0; top: 0;
  /* Inherit alignment from parent — center on mobile (where headline is centered),
     left on desktop (where headline sits in the left column). */
  text-align: inherit;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  background: linear-gradient(135deg, #5BAEFF 0%, var(--blue) 45%, var(--blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 8px 24px rgba(45, 125, 210, 0.18);
  opacity: 0;
  transform: translateY(28px) rotateX(-40deg);
  transform-origin: 50% 100%;
  filter: blur(10px);
  animation: wordCycle 14s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.screen-0 h1 .word-rotator .w1 { animation-delay: 0s; }
.screen-0 h1 .word-rotator .w2 { animation-delay: 3.5s; }
.screen-0 h1 .word-rotator .w3 { animation-delay: 7s; }
.screen-0 h1 .word-rotator .w4 { animation-delay: 10.5s; }

@keyframes wordCycle {
  0%   { opacity: 0; transform: translateY(28px) rotateX(-40deg); filter: blur(10px); }
  4%   { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
  21%  { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
  25%  { opacity: 0; transform: translateY(-24px) rotateX(40deg); filter: blur(10px); }
  100% { opacity: 0; transform: translateY(28px) rotateX(-40deg); filter: blur(10px); }
}

/* --- Center morphing sculpture stack (DEGA-style) --- */
.illo-morph {
  position: absolute;
  top: 6%; left: 50%;
  transform: translateX(-50%);
  width: 78%;
  aspect-ratio: 0.73;
  z-index: 3;
  display: grid;
  place-items: end center;
  pointer-events: none;
  animation: sculptFloat 9s ease-in-out infinite;
}
@keyframes sculptFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-10px); }
}
.illo-morph .morph-svg,
.illo-morph .morph-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transform: scale(0.7) translateY(20px);
  filter: blur(18px) drop-shadow(0 18px 30px rgba(45, 125, 210, 0.18));
  animation: morphCycle 14s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  will-change: opacity, transform, filter;
}
.illo-morph .m1 { animation-delay: 0s; }
.illo-morph .m2 { animation-delay: 3.5s; }
.illo-morph .m3 { animation-delay: 7s; }
.illo-morph .m4 { animation-delay: 10.5s; }

@keyframes morphCycle {
  0%   { opacity: 0; transform: scale(0.7) translateY(30px); filter: blur(20px); }
  4%   { opacity: 1; transform: scale(1.02) translateY(0); filter: blur(0); }
  10%  { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  20%  { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  25%  { opacity: 0; transform: scale(1.05) translateY(-30px); filter: blur(20px); }
  100% { opacity: 0; transform: scale(0.7) translateY(30px); filter: blur(20px); }
}

/* Reduced motion — kill the rotation, freeze on the first state */
@media (prefers-reduced-motion: reduce) {
  .screen-0 h1 .word-rotator .word,
  .illo-morph .morph-svg,
  .illo-morph .morph-img {
    animation: none;
  }
  .screen-0 h1 .word-rotator .w1,
  .illo-morph .m1 {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .illo-morph .m1 { filter: drop-shadow(0 18px 36px rgba(45, 125, 210, 0.42)); }
}

/* ============================================================
   MOBILE FIRST-FOLD FIX
   Goal: image AND rotating word are visible together in the
   initial viewport — no scrolling required to see the rotation.
   Layout order (mobile only):
     1. Compact image (top, ~36% of viewport)
     2. Eyebrow + headline (rotating word)
     3. Lead text + buttons
     4. Statbar (intentionally below the fold)
   ============================================================ */
@media (max-width: 900px) {
  .screen-0 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-template-columns: none;
    gap: 10px; /* 10px rhythm between every column item */
  }
  /* Flatten the text-block so its children participate in the flex column
     gap (and let us reorder independently of HTML structure). */
  .screen-0 > div:first-child { display: contents; }

  /* === Mobile order — title + image + Get started visible in first viewport ===
     1 pill   2 headline   3 IMAGE   4 actions   5 lead   6 statbar
     All vertical spacing is now driven by the parent's `gap: 5px`,
     so per-element margins are zeroed out. */
  .screen-0 .pill-wrap        { order: 1; margin: 0; }
  .screen-0 h1.hero-headline  { order: 2; margin: 0; font-size: clamp(38px, 8vw, 46px); line-height: 1.05; }
  .screen-0 > .illo,
  .screen-0 > .doctor-stage   { order: 3; margin: 0 auto; }
  .screen-0 .actions          { order: 4; margin: 0; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .screen-0 .actions .btn     { padding: 12px 18px; font-size: 14px; }
  .screen-0 .lead             { order: 5; margin: 0 auto; font-size: 14px; line-height: 1.5; max-width: 420px; }
  .screen-0 .statbar          { order: 6; margin: 0; padding: 12px 14px; gap: 8px; width: 100%; max-width: 460px; }
  .screen-0 .statbar > div strong { font-size: 22px; }
  .screen-0 .statbar > div span   { font-size: 11px; }
  /* Awards/honours strip — keep visible on mobile, right after the statbar.
     Three small pills in a row (NOT single column) so the section stays
     compact in the first viewport instead of stacking into 3 tall rows. */
  .screen-0 .hero-honours     { order: 7; margin: 0; width: 100%; max-width: 460px; }

  /* === Image: sized so title + image + Get started all fit in first fold ===
     Cap height at ~42vh so the actions row stays above the fold on
     standard mobile viewports (~700–850px tall). */
  .screen-0 > .illo,
  .screen-0 > .doctor-stage {
    margin: 0 auto;
    width: 70%;
    max-width: 280px;
    min-width: 200px;
    max-height: 42vh;
  }
  .screen-0 > .illo         { aspect-ratio: 0.82; }
  .screen-0 > .doctor-stage { aspect-ratio: 0.78; }

  /* === Center the eyebrow pill explicitly on mobile ===
     The pill-wrap container needs to be a flex centring box so the
     inline-flex .eyebrow chip lands in the middle of its line. */
  .screen-0 .pill-wrap { display: flex; justify-content: center; width: 100%; }

  /* === Mobile fix for the DOCTOR variant only ===
     The doctor portrait was using position:absolute, which can collapse
     the stage's aspect-ratio height in a flex column and let the lead
     text overlap the image. Switch to natural flow so the stage height
     is driven by the image itself. The sculpture variant is left
     completely alone — its absolute positioning is correctly anchored
     by .illo's aspect-ratio inside its grid frame. */
  .screen-0.doctor-mode .doctor-stage {
    aspect-ratio: auto;
    min-height: 0;
  }
  .screen-0.doctor-mode .dr-portrait {
    position: relative;
    inset: auto;
    width: 100%;
    /* Keep two-doctor grid stacking on mobile too — otherwise both
       <img> elements render in normal flow, doubling the stage height
       and dropping the visible photo into the CTA area. */
    display: grid;
    place-items: center;
  }
  .screen-0.doctor-mode .dr-portrait img {
    height: auto;
    width: auto;
    /* Clamp BOTH dimensions so wider portraits (e.g. Dr. Shweta at
       1043×1291) can't overflow horizontally past the stage. */
    max-width: 100%;
    max-height: 40vh;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    /* Same soft fade at the bottom on mobile too */
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 78%,
      rgba(0, 0, 0, 0.6) 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 78%,
      rgba(0, 0, 0, 0.6) 90%,
      transparent 100%
    );
  }

  /* === Floating tags on mobile — keep them visible but compact ===
     Smaller font, icon-only feel, anchored to the outer edges of the stage. */
  .screen-0 .illo-tag,
  .screen-0 .dr-tag {
    font-size: 10px;
    padding: 3px 9px 3px 4px;
    gap: 5px;
    box-shadow: 0 4px 12px -4px rgba(14, 30, 53, 0.18);
  }
  .screen-0 .illo-tag .tag-icon,
  .screen-0 .dr-tag .tag-icon { width: 28px; height: 28px; }
  .screen-0 .illo-tag .tag-icon svg,
  .screen-0 .dr-tag .tag-icon svg { width: 16px; height: 16px; }

  /* Pull tags closer in — negative offsets are too aggressive on a small stage */
  .screen-0 .illo-tag-1 { top:  -2%; left:  -10%; }
  .screen-0 .illo-tag-2 { top:  32%; right: -12%; }
  .screen-0 .illo-tag-3 { bottom: 4%; left:  -10%; }
  .screen-0 .illo-tag-4 { top:   8%; right: -10%; }

  /* ---- Dr. Amit — mobile ---- */
  .screen-0 .dr-doc-amit.dr-tag-1 { top:  2%;  left:  -10%; }
  .screen-0 .dr-doc-amit.dr-tag-2 { top:  14%;  right: -20%; }
  .screen-0 .dr-doc-amit.dr-tag-3 { top:  40%;  left:  -22%; }
  .screen-0 .dr-doc-amit.dr-tag-4 { top:  54%;  right: -12%; }
  .screen-0 .dr-doc-amit.dr-tag-5 { bottom: 18%; left:  -8%;  }
  .screen-0 .dr-doc-amit.dr-tag-6 { bottom: 12%; right: -10%; }
  .screen-0 .dr-doc-amit.dr-tag-7 { bottom: 1%; left:   2%;  }

  /* ---- Dr. Shweta — mobile ---- */
  .screen-0 .dr-doc-shweta.dr-tag-1 { top:  2%;  left:  -10%; }
  .screen-0 .dr-doc-shweta.dr-tag-2 { top:  14%;  right: -15%; }
  .screen-0 .dr-doc-shweta.dr-tag-3 { top:  36%;  left:  -12%; }
  .screen-0 .dr-doc-shweta.dr-tag-4 { top:  44%;  right: -10%; }
  .screen-0 .dr-doc-shweta.dr-tag-5 { bottom: 28%; left:  -8%;  }
  .screen-0 .dr-doc-shweta.dr-tag-6 { bottom: 14%; right: -10%; }
  .screen-0 .dr-doc-shweta.dr-tag-7 { bottom: 2%; left:   2%;  }

  /* dr-cred no longer used (Shweta's chips converted to dr-tag style),
     but rules kept so any legacy markup still renders cleanly. */
  .screen-0 .dr-cred { font-size: 9px; padding: 4px 8px; }
  .screen-0 .dr-cred-1 { top: 12%;  right: -8%; }
  .screen-0 .dr-cred-2 { top: 50%;  left:  -14%; }
  .screen-0 .dr-cred-3 { bottom: 18%; right: -8%; }

  /* Hide only the very small decorative noise — keep the orbits/frame */
  .screen-0 .illo-particle,
  .screen-0 .dr-particle { display: none !important; }
}

/* Very small screens (<380px) — drop image size further so it still fits */
@media (max-width: 380px) {
  .screen-0 > .illo,
  .screen-0 > .doctor-stage { max-width: 240px; width: 80%; }
  .screen-0 h1.hero-headline { font-size: 32px; }
  /* On very small screens the tags compete for too little horizontal room.
     Hide them — the image carries the story. */
  .screen-0 .illo-tag,
  .screen-0 .dr-tag,
  .screen-0 .dr-cred { display: none; }
}

/* =====================================================================
   DOCTOR-LED HERO VARIANT  (.screen-0.doctor-mode)
   index-doctor.html — Dr. Agarwal photo with orbiting service tags
   ===================================================================== */

.doctor-stage {
  position: relative;
  aspect-ratio: 0.78;
  max-width: 340px;       /* reduced — was 440, still too large */
  width: 100%;
  margin: 0 auto;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
  overflow: visible; /* tags need to extend beyond the stage box */
}
/* The image itself shouldn't ever bleed into following text, so we
   isolate its overflow via the dr-portrait container (see below). */

/* Desktop only: pin doctor stage to the top of the right column so it
   sits next to the title, not centered vertically. */
@media (min-width: 901px) {
  .screen-0.doctor-mode { align-items: start; }
  .doctor-stage { align-self: start; margin-top: 8px; }
}

/* Soft halo behind the doctor (radial brand glow) */
.dr-halo {
  position: absolute;
  inset: 8% 12% 14% 12%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(45,125,210,0.22) 0%, rgba(194,221,243,0.18) 30%, transparent 60%);
  filter: blur(20px);
  z-index: 1;
}

/* Doctor portrait — anchored at the bottom centre of the stage */
.dr-portrait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  z-index: 3;
  pointer-events: none;
}
/* ---------------------------------------------------------------------
   TWO-DOCTOR HERO SWAP
   The hero (#screen-0) toggles `.doctor-amit` ↔ `.doctor-shweta` every
   3 seconds (driven by a tiny IIFE at the bottom of index.php). Every
   element that differs per doctor is duplicated in the markup and
   tagged with `.dr-doc-amit` / `.dr-doc-shweta` (or its variant for
   eyebrow/lead/portrait). CSS below cross-fades the active set in and
   the inactive set out. Layout is identical for both so nothing shifts
   during the swap.
   --------------------------------------------------------------------- */
/* Stack both portraits in the same .dr-portrait grid cell — only the
   opacity (and a subtle scale) differentiates them. */
.dr-portrait { display: grid; }
.dr-portrait .dr-portrait-img {
  grid-area: 1 / 1;          /* stack on top of each other */
  transition: opacity 700ms ease, transform 700ms ease;
  /* +10% brightness on both doctor portraits so the studio-lit shots
     sit a touch warmer against the splash hero gradient. */
  filter: brightness(1.1);
}
.screen-0.doctor-amit   .dr-portrait-shweta,
.screen-0.doctor-shweta .dr-portrait-amit {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

/* Eyebrow + lead-copy variants: swap visibility, no transition needed
   (text doesn't lend itself to overlap-fade cleanly). */
/* Doctor-variant text swap — STACK both variants in the same grid cell
   so the parent's height = max(amit, shweta). When the swap fires the
   visible variant flips via opacity only; the taller text reserves the
   space at all times. Fixes the visible layout shift the user reported
   when the new portraits + new copy lengths landed (Jun 12). The old
   approach used display:none ↔ display:block which let the parent
   re-measure on every swap. */
.screen-0 .lead {
  display: grid;
}
/* Eyebrows are inline chips sitting in flow — opacity-stacking them
   broke their visual alignment (both invisible eyebrows took horizontal
   space at the same time). Keep the original display:none / display:inline
   swap; the eyebrow text length difference is tiny and any residual
   shift is imperceptible. */
.eyebrow-amit, .eyebrow-shweta { display: none; }
.lead-amit, .lead-shweta {
  grid-area: 1 / 1;          /* both children share one grid cell */
  display: block;             /* override any global display:none */
  opacity: 0;
  visibility: hidden;
  transition: opacity 450ms ease;
}
.screen-0.doctor-amit   .eyebrow-amit,
.screen-0.doctor-shweta .eyebrow-shweta {
  display: inline;
}
.screen-0.doctor-amit   .lead-amit,
.screen-0.doctor-shweta .lead-shweta {
  opacity: 1;
  visibility: visible;
}

/* Tag + credential chips: fade between sets. The `dr-doc-*` classes
   pin each element to one doctor; the active set fades in, inactive
   fades out (and is pulled out of layout via visibility so it can't
   intercept hover/clicks on the active doctor's chips). */
.dr-tag.dr-doc-amit, .dr-tag.dr-doc-shweta,
.dr-cred.dr-doc-amit, .dr-cred.dr-doc-shweta {
  transition: opacity 500ms ease;
}
.screen-0.doctor-amit   .dr-doc-shweta,
.screen-0.doctor-shweta .dr-doc-amit {
  opacity: 0;
  visibility: hidden;
}

/* Visually reduce orbit/halo movement when prefers-reduced-motion is on
   (the JS already stops the doctor-swap loop after one swap). */
@media (prefers-reduced-motion: reduce) {
  .dr-portrait .dr-portrait-img { transition: opacity 0ms; }
}

.dr-portrait img {
  height: 96%;
  width: auto;
  /* Hard cap horizontal expansion so wider portraits (e.g. Dr. Shweta's
     1043×1291, ratio 0.81) can't blow past the stage container the way
     Dr. Amit's narrower 605×1024 (ratio 0.59) naturally stays inside. */
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(14, 30, 53, 0.20))
          drop-shadow(0 4px 8px rgba(45, 125, 210, 0.10));
  /* Soft fade-out at the bottom so the photo melts into the background
     instead of cutting hard against the page. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 80%,
    rgba(0, 0, 0, 0.6) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 80%,
    rgba(0, 0, 0, 0.6) 90%,
    transparent 100%
  );
  animation: dr-float 9s ease-in-out infinite;
  will-change: transform;
}
@keyframes dr-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* --- Orbital rings (slow rotation around the doctor) --- */
.dr-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(45, 125, 210, 0.18);
  pointer-events: none;
  z-index: 2;
  transform-style: preserve-3d;
}
.dr-orbit-1 {
  inset: 8% 4%;
  transform: rotateX(72deg);
  animation: dr-spin 28s linear infinite;
}
.dr-orbit-2 {
  inset: 14% 10%;
  border-color: rgba(45, 125, 210, 0.12);
  border-style: dashed;
  transform: rotateX(72deg) rotateZ(45deg);
  animation: dr-spin 36s linear infinite reverse;
}
.dr-orbit-3 {
  inset: 22% 18%;
  border-color: rgba(45, 125, 210, 0.10);
  transform: rotateX(72deg);
  animation: dr-spin 22s linear infinite;
}
@keyframes dr-spin {
  from { transform: rotateX(72deg) rotateZ(0); }
  to   { transform: rotateX(72deg) rotateZ(360deg); }
}

/* --- Floating service tags (orbit around the photo, but stay legible) --- */
.dr-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px 5px 6px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--glow-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  z-index: 4;
  white-space: nowrap;
  animation: dr-floaty 7s ease-in-out infinite;
}
.dr-tag .tag-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--blue);
}
.dr-tag .tag-icon svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------
   PNG-icon override (auto-recolored to brand blue)
   ---------------------------------------------------------------------
   When a tag has a `data-icon="<slug>"` attribute AND a matching PNG
   exists at /assets/img/icons/tag-<slug>.png, we paint the PNG via
   CSS mask-image on a ::before pseudo so the icon picks up the brand
   blue `--blue` colour regardless of the PNG's original colour. This
   means you can drop a flat black or white PNG into /assets/img/icons/
   and it will recolour itself automatically.

   The inline SVG inside .tag-icon stays as a fallback. We hide it
   only when this rule's image actually exists (the browser fetches
   the URL; if 404 the ::before is invisible and SVG keeps showing).
   --------------------------------------------------------------------- */
.dr-tag[data-icon] .tag-icon { position: relative; }
.dr-tag[data-icon] .tag-icon::before {
  content: "";
  position: absolute;
  inset: 5px;
  background-color: var(--blue);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
/* One rule per icon — each points to its PNG. If the PNG is missing,
   the ::before paints nothing visible and the inline SVG remains. */
.dr-tag[data-icon="orthognathic-surgery"]      .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-orthognathic-surgery.webp");      mask-image: url("/assets/img/icons/tag-orthognathic-surgery.webp"); }
.dr-tag[data-icon="diabetic-foot-surgery"]     .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-diabetic-foot-surgery.webp");     mask-image: url("/assets/img/icons/tag-diabetic-foot-surgery.webp"); }
.dr-tag[data-icon="breast-reduction-enhancement"] .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-breast-reduction-enhancement.webp"); mask-image: url("/assets/img/icons/tag-breast-reduction-enhancement.webp"); }
.dr-tag[data-icon="facial-cosmetic-surgery"]   .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-facial-cosmetic-surgery.webp");   mask-image: url("/assets/img/icons/tag-facial-cosmetic-surgery.webp"); }
.dr-tag[data-icon="advanced-plastic-surgery"]  .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-advanced-plastic-surgery.webp");  mask-image: url("/assets/img/icons/tag-advanced-plastic-surgery.webp"); }
.dr-tag[data-icon="rhinoplasty"]               .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-rhinoplasty.webp");               mask-image: url("/assets/img/icons/tag-rhinoplasty.webp"); }
.dr-tag[data-icon="gynecomastia"]              .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-gynecomastia.webp");              mask-image: url("/assets/img/icons/tag-gynecomastia.webp"); }
.dr-tag[data-icon="smile-designing"]           .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-smile-designing.webp");           mask-image: url("/assets/img/icons/tag-smile-designing.webp"); }
.dr-tag[data-icon="cosmetic-dentistry"]        .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-cosmetic-dentistry.webp");        mask-image: url("/assets/img/icons/tag-cosmetic-dentistry.webp"); }
.dr-tag[data-icon="dental-implants"]           .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-dental-implants.webp");           mask-image: url("/assets/img/icons/tag-dental-implants.webp"); }
.dr-tag[data-icon="aligners"]                  .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-aligners.webp");                  mask-image: url("/assets/img/icons/tag-aligners.webp"); }
.dr-tag[data-icon="pediatric-dentistry"]       .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-pediatric-dentistry.webp");       mask-image: url("/assets/img/icons/tag-pediatric-dentistry.webp"); }
.dr-tag[data-icon="orthodontics"]              .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-orthodontics.webp");              mask-image: url("/assets/img/icons/tag-orthodontics.webp"); }
.dr-tag[data-icon="crown-bridge"]              .tag-icon::before { -webkit-mask-image: url("/assets/img/icons/tag-crown-bridge.webp");              mask-image: url("/assets/img/icons/tag-crown-bridge.webp"); }
/* All 14 PNGs are present in /assets/img/icons/ — hide the inline SVG
   fallbacks so only the PNG mask renders. (Re-comment this rule if a
   PNG ever goes missing and you want the SVG to show through again.) */
.dr-tag[data-icon] .tag-icon svg { display: none; }

/* =====================================================================
   DESKTOP TAG POSITIONS — split per doctor so each can be tuned
   independently. Edit the AMIT block to move his 7 tags only; edit the
   SHWETA block to move hers only. Both blocks start identical.
   ===================================================================== */

/* ---- Dr. Amit — desktop ---- */
.dr-doc-amit.dr-tag-1 { top:  20%;  left:  -22%; animation-delay: 0s;   }
.dr-doc-amit.dr-tag-2 { top:  28%;  right: -30%; animation-delay: 1.0s; }
.dr-doc-amit.dr-tag-3 { top:  55%;  left:  -32%; animation-delay: 2.0s; }
.dr-doc-amit.dr-tag-4 { top:  50%;  right: -22%; animation-delay: 3.0s; }
.dr-doc-amit.dr-tag-5 { bottom: 15%; left:  -18%; animation-delay: 4.0s; }
.dr-doc-amit.dr-tag-6 { bottom: 14%; right: -24%; animation-delay: 5.0s; }
.dr-doc-amit.dr-tag-7 { bottom: -6%; left:   8%;  animation-delay: 6.0s; }

/* ---- Dr. Shweta — desktop ---- */
.dr-doc-shweta.dr-tag-1 { top:  20%;  left:  -22%; animation-delay: 0s;   }
.dr-doc-shweta.dr-tag-2 { top:  28%;  right: -30%; animation-delay: 1.0s; }
.dr-doc-shweta.dr-tag-3 { top:  42%;  left:  -20%; animation-delay: 2.0s; }
.dr-doc-shweta.dr-tag-4 { top:  50%;  right: -22%; animation-delay: 3.0s; }
.dr-doc-shweta.dr-tag-5 { bottom: 20%; left:  -18%; animation-delay: 4.0s; }
.dr-doc-shweta.dr-tag-6 { bottom: 14%; right: -24%; animation-delay: 5.0s; }
.dr-doc-shweta.dr-tag-7 { bottom: -2%; left:   4%;  animation-delay: 6.0s; }

@keyframes dr-floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* --- Credential chips (smaller, more clinical, ink-coloured) --- */
.dr-cred {
  position: absolute;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: var(--r-pill);
  z-index: 4;
  white-space: nowrap;
  box-shadow: 0 6px 20px -8px rgba(14, 30, 53, 0.35);
  animation: dr-floaty 8s ease-in-out infinite;
}
.dr-cred-1 { top: 10%;   right: -12%; animation-delay: 0.6s; }
.dr-cred-2 { top: 48%;   left: -22%;  animation-delay: 2.2s; }
.dr-cred-3 { bottom: 18%; right: -14%; animation-delay: 3.6s; }

/* --- Decorative particles --- */
.dr-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.5;
  z-index: 2;
  animation: dr-float 6s ease-in-out infinite;
}
.dr-particle.p1 { top: 12%; left: 22%; animation-delay: 0s; }
.dr-particle.p2 { top: 65%; right: 20%; animation-delay: 1.5s; opacity: 0.4; }
.dr-particle.p3 { top: 80%; left: 30%; animation-delay: 3s; width: 4px; height: 4px; }

/* Mobile fold + reorder + decoration-hiding handled in the global
   @media (max-width: 900px) block above (search "Order requested by client"). */

/* ===========================================================================
   4-step funnel additions
   =========================================================================== */

/* Make the progress bar handle 4 dots without crowding */
.splash-progress-dots .dot {
  width: 26px;       /* was 32px — leaves room for the new fourth dot */
}
.splash-progress-dots .dot.active { width: 38px; }

/* Q3 grid matches Q2 visual density */
#screen-q3 .opt-list,
#screen-q3 .opt-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 720px) {
  #screen-q3 .opt-list,
  #screen-q3 .opt-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  #screen-q3 .opt-list,
  #screen-q3 .opt-grid-3 { grid-template-columns: 1fr; }
}

/* Success screen — the 5-second redirect note */
.screen-success .redirect-note {
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--muted);
  background: rgba(45, 125, 210, 0.08);
  border: 1px solid rgba(45, 125, 210, 0.18);
  border-radius: 12px;
  padding: 12px 18px;
  display: inline-block;
}
.screen-success .redirect-note strong { color: var(--ink); }
.screen-success #redirect-countdown {
  display: inline-block;
  min-width: 1.4em;
  font-weight: 700;
  color: var(--blue);
  font-feature-settings: "tnum";
}

/* ============================================================================
   INACTIVITY POPUP — homepage only.
   Appears after 6s of no clicks/taps/keys. 4 CTAs: Video / In-patient /
   Call / WhatsApp. Dismissible via close button, overlay, or ESC.
   ============================================================================*/
.kaya-inact {
  position: fixed; inset: 0;
  z-index: 9500;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.kaya-inact.open { opacity: 1; visibility: visible; }
.kaya-inact-overlay {
  position: absolute; inset: 0;
  background: rgba(14, 30, 53, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.kaya-inact-box {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  width: 100%; max-width: 540px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(14, 30, 53, 0.25);
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.kaya-inact.open .kaya-inact-box { transform: translateY(0); }

.kaya-inact-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none;
  cursor: pointer;
  color: #fff; display: grid; place-items: center;
  padding: 0;
  transition: background 0.15s;
  z-index: 2;
}
.kaya-inact-close svg { width: 14px; height: 14px; display: block; }
.kaya-inact-close:hover { background: rgba(255,255,255,0.3); }

.kaya-inact-head {
  background: linear-gradient(135deg, var(--blue) 0%, #1a5fa8 100%);
  border-radius: 20px 20px 0 0;
  padding: 28px 28px 22px;
}
.kaya-inact-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: block; margin-bottom: 8px;
}
.kaya-inact-head h2 {
  font-size: clamp(20px, 3vw, 24px);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600; margin: 0 0 8px; color: #fff;
  line-height: 1.2;
}
.kaya-inact-head p {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  margin: 0;
}

.kaya-inact-body {
  padding: 22px 24px 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.kaya-inact-body .appt-card { width: 100%; min-height: 0; }

/* Skip-to-Website button — sits above the booking options. Layout
   mirrors the .appt-card below: title + description stacked on the
   left, badge / sticker on the right. */
.kaya-inact-skip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md, 12px);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.kaya-inact-skip:hover {
  border-color: var(--blue);
  background: var(--tint, #E6F0FB);
  transform: translateY(-1px);
}
.kaya-inact-skip-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kaya-inact-skip-title {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.25;
}
.kaya-inact-skip-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}
/* Arrow badge — same golden gradient + shimmer + pulse animations as
   the Free / Paid stickers on the booking cards below. */
.kaya-inact-skip-arrow {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  color: #5A3A00;
  box-shadow: 0 4px 12px -4px rgba(212, 158, 47, 0.6);
  background: linear-gradient(
    105deg,
    #E6B23F 0%,
    #FCE38A 30%,
    #FFF6CF 50%,
    #FCE38A 70%,
    #E6B23F 100%
  );
  background-size: 220% 100%;
  animation: applyShimmer 2.4s linear infinite, applyPulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .kaya-inact-skip-arrow { animation: none; }
}

.kaya-inact-or {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 2px;
  font-size: 12px; color: var(--muted);
}
.kaya-inact-or::before, .kaya-inact-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.kaya-inact-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.kaya-inact-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600; font-size: 14px;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink);
  transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.kaya-inact-btn:hover { transform: translateY(-1px); }
.kaya-inact-btn-call { color: var(--ink); }
.kaya-inact-btn-call:hover { background: var(--surface); }
.kaya-inact-btn-wa {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}
.kaya-inact-btn-wa:hover {
  background: #1ebe5b;
  border-color: #1ebe5b;
  color: #fff;
}

@media (max-width: 480px) {
  .kaya-inact-head { padding: 22px 20px 18px; border-radius: 20px 20px 0 0; }
  .kaya-inact-body { padding: 18px 18px 22px; }
  /* Keep Call Us / Chat with us side-by-side on phones too (don't stack). */
  .kaya-inact-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kaya-inact-btn { padding: 12px 10px; font-size: 13px; gap: 6px; }
  .kaya-inact-btn span:last-child { white-space: nowrap; }
}

/* =====================================================================
   HERO HONOURS — compact awards strip below the statbar (homepage only)
   ---------------------------------------------------------------------
   The same 3 awards rendered in full-size cards on Dr. Amit's bio page.
   Here they collapse to a slim 3-pill row so they fit the splash hero
   without crowding the existing CTA + statbar block.
   ===================================================================== */
.hero-honours {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.hero-honour {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(45, 125, 210, 0.18);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.hero-honour-logo {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #ffffff;
  display: grid; place-items: center;
  flex-shrink: 0;
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(45, 125, 210, 0.12);
}
.hero-honour-logo img,
.hero-honour-logo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-honour[data-placeholder] .hero-honour-logo { color: var(--blue, #2D7DD2); }
.hero-honour[data-placeholder] .hero-honour-logo svg { width: 22px; height: 22px; }

.hero-honour-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hero-honour-text strong {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0E1E35);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.hero-honour-text em {
  font-style: normal;
  font-size: 10px;
  color: var(--muted, #555c66);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.1;
}
/* Tablet — keep 3-col but trim padding so the row still fits */
@media (max-width: 1100px) {
  .hero-honour { padding: 8px 10px; gap: 8px; }
  .hero-honour-logo { width: 30px; height: 30px; }
  .hero-honour-text strong { font-size: 12px; }
  .hero-honour-text em { font-size: 9px; }
}
/* Phone — keep 3 columns (one card per column) so the awards strip
   stays in the first viewport. Card stacks vertically inside (logo
   on top, text below); icon is larger than the previous compact
   version so the chrome ring / trophy / crest reads clearly. */
@media (max-width: 720px) {
  .hero-honours {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }
  .hero-honour {
    padding: 8px 6px !important;
    gap: 8px !important;
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
  }
  .hero-honour-logo { width: 44px; height: 44px; padding: 5px; }
  .hero-honour[data-placeholder] .hero-honour-logo svg { width: 24px; height: 24px; }
  .hero-honour-text { align-items: center !important; }
  .hero-honour-text strong { font-size: 10.5px; line-height: 1.15; }
  .hero-honour-text em { font-size: 8.5px; line-height: 1.1; }
}