/* ============================================================
   DHARAN HOSPITAL v3 — glass scrollytelling design system
   One continuous blue wash · floating translucent panels
   ============================================================ */

@font-face {
  font-family: "Blauer Nue";
  src: url("/__l5e/assets-v1/ab8c9bb4-31b1-4be8-95d7-1d586666d2ad/BlauerNue-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/__l5e/assets-v1/9788228e-9a96-4d3e-876d-27e726f7c6f0/BlauerNue-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/__l5e/assets-v1/40592887-fc34-4d81-9838-48c6011d4112/BlauerNue-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Blauer Nue";
  src: url("/__l5e/assets-v1/84785326-093c-4565-8b44-b3266642a61e/BlauerNue-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --gradient-primary: linear-gradient(135deg, #10b8d6 0%, #0b2b45 100%);
  --navy: #0b2b45;
  --navy-2: #0b2e4a;
  --navy-3: #2e6e96;
  --teal: #10b8d6;
  --teal-soft: #a9dee6;
  --light-1: #e7f5fa;
  --light-2: #dff1f7;
  --light-3: #e9f6fb;
  --charcoal: #2e2e2e;
  --white: #fafafa;
  --green: #7ed957;
  --emergency: #fbdcdd;
  --emergency-accent: #e5484d;
  --font-head: "Blauer Nue", system-ui, sans-serif;
  --font-body: "Blauer Nue", system-ui, sans-serif;
  --font-display: "Blauer Nue", system-ui, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --radius-panel: 34px;
  --shadow-panel: 0 30px 80px -40px rgba(11, 43, 69, 0.28);
  --shadow-card: 0 26px 60px -28px rgba(11, 43, 69, 0.4);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* The continuous soft-blue wash behind the whole page */
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: #ffffff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }

::selection { background: var(--teal); color: #fff; }

/* Grain overlay */
.noise {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Structure: floating translucent panels ---------- */
.container { width: min(1200px, 92vw); margin-inline: auto; }

/* Each section is a glass panel floating on the wash, tucking under the previous */
.panel {
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}
.panel.tuck { margin-top: -34px; z-index: 2; }
.panel.tint-a { background: rgba(231, 245, 250, 0.6); }
.panel.tint-b { background: rgba(255, 255, 255, 0.5); }
.panel.flat-x { /* container-width panel */ }

.section { position: relative; }
.panel .section-pad { padding-block: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--teal-soft);
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow.green { background: #ecf9e4; border-color: #cdeeb8; color: #4f9e2f; }
.eyebrow.red { background: var(--emergency); border-color: #f5b6b8; color: #c53a3f; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(16, 184, 214, 0.16); }
.eyebrow.green .dot { background: var(--green); box-shadow: 0 0 0 4px rgba(126, 217, 87, 0.2); }
.eyebrow.red .dot { background: var(--emergency-accent); box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.18); }

.section-title {
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  color: var(--navy);
  max-width: 22ch;
}
.section-title .hl {
  display: inline;
  font-weight: 600;
  font-family: var(--font-body);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-intro { margin-top: 16px; font-size: 1.02rem; color: #51606e; max-width: 56ch; }

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(2rem, 4.5vw, 3.2rem);
}

/* ---------- Buttons ---------- */
.btn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), filter 0.35s var(--ease);
  white-space: nowrap;
}
.btn-pill .arr {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.btn-pill:hover { transform: scale(1.05); }
.btn-pill:active { transform: scale(0.98); }
.btn-gradient { background: var(--gradient-primary); color: #fff; }
.btn-gradient:hover { box-shadow: 0 16px 40px -12px rgba(16, 184, 214, 0.6); filter: brightness(1.05); }
.btn-white { background: #fff; color: var(--navy); box-shadow: 0 10px 30px -16px rgba(11, 43, 69, 0.45); border: 1px solid rgba(11, 43, 69, 0.06); }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--teal); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.7); }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
.utility-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 0.78rem;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.utility-strip .strip-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 500; color: var(--navy);
  padding: 4px 10px; border-radius: 999px;
  transition: background 0.3s var(--ease);
}
.utility-strip .strip-link:hover { background: rgba(255, 255, 255, 0.6); }
.utility-strip .strip-link.emergency {
  background: var(--emergency); color: #b02e33; font-weight: 600;
}
.utility-strip .strip-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gradient-primary); color: #fff;
  padding: 6px 16px; border-radius: 999px; font-weight: 600;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.utility-strip .strip-cta:hover { transform: scale(1.04); box-shadow: 0 8px 20px -10px rgba(16, 184, 214, 0.6); }
.nav-main {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 24px;
  border-radius: 22px;
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav.scrolled .utility-strip { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.nav.scrolled .nav-main {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 14px 40px -24px rgba(11, 43, 69, 0.4);
  padding: 10px 20px;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 46px; width: auto; border-radius: 10px; }
.nav-links { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 24px); }
.nav-link {
  position: relative;
  font-size: 0.88rem; font-weight: 500; color: var(--navy);
  padding: 6px 2px;
  display: inline-flex; align-items: center; gap: 4px;
  transition: transform 0.3s var(--ease);
}
.nav-link .caret-down { font-size: 0.6em; opacity: 0.7; transition: transform 0.3s var(--ease); }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: var(--teal);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-link:hover { transform: translateY(-1px); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link:hover .caret-down { transform: rotate(180deg); }
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-burger span { width: 24px; height: 2px; border-radius: 2px; background: var(--navy); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile {
  position: fixed; inset: 0; z-index: 59;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease);
}
.nav-mobile.open { opacity: 1; pointer-events: auto; }
.nav-mobile a { font-family: var(--font-head); font-size: 1.5rem; color: var(--navy); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; min-height: 720px; overflow: hidden; border-radius: 0; padding: 0; margin: 0; }
.hero-canvas { position: absolute; inset: 0; z-index: 0; border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 45% 55%;
  gap: 40px; align-items: center;
}
.hero-title { font-size: clamp(2.8rem, 6.8vw, 5.2rem); color: var(--navy); line-height: 0.98; letter-spacing: -0.02em; max-width: 12ch; }
.hero-title .hl {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { margin-top: 20px; font-size: 1.03rem; color: #51606e; max-width: 44ch; }
.hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; position: relative; z-index: 5; }

.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  font-size: 0.85rem; font-weight: 500; color: var(--navy);
  box-shadow: 0 10px 26px -18px rgba(11, 43, 69, 0.45);
}
.chip .ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gradient-primary); color: #fff; }
.chip.hot .ic { background: var(--emergency-accent); }
.chip.hot { color: #b02e33; }

.hero-visual { position: relative; display: grid; place-items: center; min-height: 520px; }
.orbit-ring {
  position: absolute; inset: 8%;
  border-radius: 50%; border: 1px dashed rgba(16, 184, 214, 0.4);
  animation: spin 64s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.portrait-holder {
  position: relative;
  width: min(420px, 80vw); aspect-ratio: 1;
  border-radius: 50%; padding: 9px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(169, 222, 230, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -34px rgba(11, 43, 69, 0.55);
}
.portrait-holder .pimg { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.lungs-art { position: absolute; right: 0; bottom: 6%; width: 42%; height: 42%; opacity: 0.9; pointer-events: none; }
.lungs-art svg { width: 100%; height: 100%; }

.float-card {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px -22px rgba(11, 43, 69, 0.5);
  font-size: 0.85rem; font-weight: 500; color: var(--navy);
}
.float-card .fc-label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 2px; }
.float-card .fc-val { font-family: var(--font-head); font-size: 1.5rem; line-height: 1; }
.float-card .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gradient-primary); color: #fff; flex: none; }
.fc-exp { top: 4%; left: -4%; }
.fc-patients { bottom: 10%; right: -4%; }

/* Instant appointment card — straddles the hero / cards seam */
.instant-card {
  position: relative; z-index: 6;
  margin-top: 40px; transform: translateY(46px);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 26px;
  padding: clamp(22px, 3.4vw, 34px);
  box-shadow: var(--shadow-card);
}
.instant-card .ic-head { display: flex; align-items: center; gap: 12px; }
.instant-card .ic-head .ic-badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gradient-primary); color: #fff; flex: none; }
.instant-card .ic-head h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; }
.instant-card .ic-head p { font-size: 0.8rem; color: #51606e; }
.instant-form { display: grid; grid-template-columns: 1.1fr 1.1fr 1.1fr auto; gap: 14px; margin-top: 20px; align-items: end; }
.instant-form .f { display: flex; flex-direction: column; gap: 6px; }
.instant-form label { font-size: 0.72rem; font-weight: 600; color: var(--navy); }
.instant-form input, .instant-form select {
  padding: 13px 16px; border-radius: 14px;
  border: 1.5px solid rgba(11, 43, 69, 0.08); background: #fff;
  font-size: 0.9rem; color: var(--charcoal); outline: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.instant-form input:focus, .instant-form select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(16, 184, 214, 0.14); }
.instant-form .btn-pill { padding: 15px 26px; }

/* ---------- Health cards (light idle → dark hover) ---------- */
.scan-section-panel { padding-top: 120px; } /* clears the instant card overlap */
.scan-grid { display: flex; flex-direction: column; gap: 22px; }
.scan-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.scan-card {
  position: relative; height: 420px;
  border-radius: 28px; overflow: hidden; cursor: pointer;
  transition: transform 0.38s var(--ease), box-shadow 0.38s var(--ease);
  will-change: transform;
}
.scan-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-card); }
.scan-layer { position: absolute; inset: 0; transition: opacity 0.38s var(--ease); }
.scan-layer img { width: 100%; height: 100%; object-fit: cover; object-position: 32% 56%; transform: scale(1.08); }
.scan-layer.light {
  background: linear-gradient(150deg, #f6fbfd 0%, #e9f3f8 100%);
}
.scan-layer.dark {
  background: linear-gradient(135deg, #0b2e4a 0%, #2e6e96 100%);
  opacity: 0;
}
.scan-card:hover .scan-layer.dark { opacity: 1; }
.scan-glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  transition: opacity 0.38s var(--ease);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.32), transparent 45%);
}
.scan-card:hover .scan-glare { opacity: 1; }
.scan-open {
  position: absolute; top: 20px; right: 20px; z-index: 4;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); color: #000;
  box-shadow: 0 10px 24px -12px rgba(46, 125, 050, 0.55);
  font-size: 1.1rem;
  transition: background 0.38s var(--ease), transform 0.38s var(--ease);
}
.scan-card:hover .scan-open { background: #fff; transform: rotate(90deg); }
.scan-title {
  position: absolute; right: 22px; bottom: 20px; z-index: 4;
  text-align: right;
  font-family: var(--font-head); font-size: 1.6rem;
  color: var(--charcoal); line-height: 1.08;
  transition: color 0.38s var(--ease);
  max-width: 10ch;
}
.scan-title .l2 { display: block; font-size: 0.95em; }
.scan-card:hover .scan-title { color: #fff; }
.scan-card .scan-tag {
  position: absolute; bottom: 24px; left: 22px; z-index: 4;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(46, 46, 46, 0.55);
  transition: color 0.38s var(--ease);
}
.scan-card:hover .scan-tag { color: rgba(255, 255, 255, 0.65); }

/* ---------- Discover / Intro ---------- */
.intro-grid { display: grid; grid-template-columns: 50% 50%; gap: clamp(30px, 5vw, 60px); align-items: center; }
.intro-photo {
  position: relative;
  border-radius: 30px; overflow: visible;
}
.intro-photo .frame {
  border-radius: 30px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-card);
}
.intro-photo img { width: 100%; height: 500px; object-fit: cover; }
.since-badge {
  position: absolute; top: -18px; right: -10px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 34px -18px rgba(11, 43, 69, 0.55);
  font-size: 0.8rem; font-weight: 600; color: var(--navy);
}
.since-badge .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--gradient-primary); color: #fff; }
.intro-copy h2 { margin-top: 16px; font-size: clamp(1.8rem, 3.4vw, 2.8rem); max-width: 18ch; }
.intro-copy > p { margin-top: 16px; color: #51606e; max-width: 50ch; }
.feature-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.feat-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(16, 184, 214, 0.18);
  backdrop-filter: blur(10px);
  font-size: 0.84rem; font-weight: 600; color: var(--navy);
  box-shadow: 0 8px 22px -16px rgba(11, 43, 69, 0.4);
}
.feat-pill .ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gradient-primary); color: #fff; }
.intro-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.phone-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 22px; border-radius: 999px;
  background: #fff; border: 1px solid var(--teal-soft); color: var(--navy);
  font-size: 0.9rem; font-weight: 600;
}
.phone-chip .ic { color: var(--teal); }

/* ---------- DNA (pinned set piece) ---------- */
.dna-panel {
  position: relative; z-index: 2;
  background: linear-gradient(160deg, #08213a 0%, #0b2b45 55%, #0e3a5c 100%);
  border-radius: var(--radius-panel);
  margin-top: -34px;
  overflow: hidden;
  color: #fff;
  box-shadow: var(--shadow-panel);
}
.dna-inner { display: grid; grid-template-columns: 55% 45%; gap: clamp(24px, 4vw, 50px); align-items: center; padding: clamp(4rem, 7vw, 6rem); min-height: 90vh; }
.dna-visual { position: relative; display: grid; place-items: center; min-height: 460px; }
.dna-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(16, 184, 214, 0.4), transparent 60%); filter: blur(24px); }
.dna-helix { position: relative; z-index: 2; transform-style: preserve-3d; }
.dna-canvas { position: relative; z-index: 2; width: 100%; display: grid; place-items: center; }
.dna-fallback {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: contain;
  object-position: left center;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.dna-canvas canvas { display: block; max-width: 100%; height: auto; }
.dna-static { position: relative; z-index: 2; display: grid; place-items: center; }
.dna-static img { width: min(360px, 68%); height: auto; display: block; }
.dna-particles span {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal-soft); opacity: 0.55;
  animation: particleDrift linear infinite;
}
@keyframes particleDrift {
  from { transform: translate(0, 0); }
  to { transform: translate(180px, 220px); }
}
.dna-copy h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.8rem); max-width: 16ch; }
.dna-copy h2 .hl { font-family: var(--font-body); font-weight: 700; background: linear-gradient(135deg, #10b8d6, #7ed957); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dna-copy > p { margin-top: 16px; color: rgba(255, 255, 255, 0.75); max-width: 42ch; }
.dna-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.dna-card { padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); }
.dna-card .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gradient-primary); color: #fff; margin-bottom: 12px; }
.dna-card h3 { color: #fff; font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; }
.dna-card p { margin-top: 5px; font-size: 0.83rem; color: rgba(255, 255, 255, 0.7); }
.dna-card .big { font-family: var(--font-head); font-size: 2.1rem; color: #fff; line-height: 1; }
.dna-card .big span { color: var(--green); }
.dna-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.dna-reports { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); }
.dna-reports .ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---------- Doctors ---------- */
.doctors-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: end; }
.doctor-card {
  position: relative; border-radius: 26px; overflow: hidden;
  background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px -26px rgba(11, 43, 69, 0.45);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.doctor-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card); }
.doctor-card.feat .doctor-photo { height: 380px; }
.doctor-photo { height: 340px; overflow: hidden; }
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s var(--ease); }
.doctor-card:hover .doctor-photo img { transform: scale(1.05); }
.doctor-info { padding: 20px 22px 22px; text-align: center; }
.doctor-info h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.06rem; color: var(--navy); }
.doctor-info .spec { font-size: 0.8rem; color: var(--teal); font-weight: 500; margin-top: 3px; }
.doctor-socials { display: flex; gap: 8px; justify-content: center; margin-top: 14px; opacity: 0; transform: translateY(6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.doctor-card:hover .doctor-socials { opacity: 1; transform: translateY(0); }
.soc-btn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #eef6fa; border: 1px solid var(--teal-soft); color: var(--navy); transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); }
.soc-btn:hover { transform: rotate(15deg) scale(1.1); background: var(--gradient-primary); color: #fff; }

/* ---------- Packages ---------- */
.packages-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.pk-w7 { grid-column: span 7; }
.pk-w5 { grid-column: span 5; }
.package-card {
  position: relative; height: 340px; border-radius: 26px; overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.package-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.package-card img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 58%; transform: scale(1.06); transition: transform 0.5s var(--ease); }
.package-card:hover img { transform: scale(1.12); }
.package-card .pk-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(255, 255, 255, 0.9) 85%);
  transition: background 0.4s var(--ease);
  pointer-events: none;
}
.package-body { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 3; }
.package-body h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--navy); }
.package-body .pk-desc { font-size: 0.8rem; color: #51606e; margin-top: 2px; }
.package-price {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.9);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--navy);
  box-shadow: 0 10px 24px -14px rgba(11, 43, 69, 0.5);
}
.package-arrow {
  position: absolute; bottom: 20px; right: 22px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--navy);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}
.package-card:hover .package-arrow { transform: rotate(45deg); background: var(--green); color: #000; }

/* ---------- Departments ---------- */
.dep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dep-card {
  position: relative; padding: 24px 22px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(16, 184, 214, 0.1);
  backdrop-filter: blur(10px);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}
.dep-card:hover { transform: translateY(-6px); background: #fff; box-shadow: var(--shadow-card); }
.dep-num { position: absolute; top: 16px; right: 18px; font-family: var(--font-head); font-size: 1.05rem; color: rgba(16, 184, 214, 0.55); }
.dep-ic {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px;
  background: #fff; border: 1px solid var(--teal-soft); color: var(--teal);
  margin-bottom: 16px;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}
.dep-card:hover .dep-ic { transform: scale(1.12) rotate(-6deg); background: var(--gradient-primary); color: #fff; }
.dep-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; color: var(--navy); }
.dep-card p { margin-top: 7px; font-size: 0.8rem; color: #51606e; }
.view-all-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; align-items: center; }
.view-more-pill { padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px dashed var(--teal-soft); font-size: 0.8rem; font-weight: 600; color: var(--navy); }

/* ---------- Happening / News ---------- */
.happening-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.feature-case {
  position: relative; border-radius: 28px; overflow: hidden;
  background: linear-gradient(160deg, #0b2e4a, #2e6e96);
  min-height: 520px; display: flex; align-items: flex-end;
}
.feature-case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; opacity: 0.85; }
.feature-case .fc-veil { position: absolute; inset: 0; background: linear-gradient(200deg, transparent 15%, rgba(8, 33, 58, 0.92) 78%); }
.feature-case .fc-body { position: relative; z-index: 2; padding: clamp(24px, 3.4vw, 38px); }
.feature-case .eyebrow { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.2); color: #cdeef5; }
.feature-case .eyebrow .dot { background: var(--green); box-shadow: 0 0 0 4px rgba(126, 217, 87, 0.25); }
.feature-case h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: 14px; max-width: 16ch; }
.feature-case .fc-quote { margin-top: 12px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); max-width: 52ch; }
.fc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.fc-meta .doc { display: flex; align-items: center; gap: 10px; }
.fc-meta .doc img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.5); }
.fc-meta .doc .who b { color: #fff; font-weight: 600; font-size: 0.9rem; }
.fc-meta .doc .who span { font-size: 0.74rem; color: rgba(255, 255, 255, 0.68); display: block; }
.case-dots { display: inline-flex; gap: 8px; margin-top: 18px; }
.case-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.case-dots span.on { background: var(--green); width: 22px; border-radius: 999px; }
.happening-side { display: flex; flex-direction: column; gap: 22px; }
.case-mini {
  position: relative; border-radius: 24px; overflow: hidden;
  min-height: 128px; flex: 1;
  background: linear-gradient(135deg, #11385c, #366f92);
  display: flex; align-items: flex-end;
  padding: 18px 20px;
  cursor: pointer;
  transition: transform 0.4s var(--ease);
}
.case-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 55%; opacity: 0.55; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.case-mini:hover { transform: translateY(-4px); }
.case-mini:hover img { opacity: 0.75; transform: scale(1.05); }
.case-mini h4 { position: relative; z-index: 2; color: #fff; font-size: 1.06rem; font-family: var(--font-body); font-weight: 600; }
.case-mini .arrowr { margin-left: auto; position: relative; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: transparent; color: #fff; }

/* ---------- Appointment + testimonial ---------- */
.appt-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 56px); }
.appt-photo { position: relative; border-radius: 30px; }
.appt-photo .frame { border-radius: 30px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: var(--shadow-card); }
.appt-photo img { width: 100%; height: 540px; object-fit: cover; object-position: center 30%; }
.testimonial-card {
  position: absolute; bottom: -24px; left: -10px; z-index: 4;
  max-width: 320px;
  background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px; padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.testimonial-card .stars { color: #f5a623; letter-spacing: 2px; font-size: 0.95rem; }
.testimonial-card p { margin-top: 8px; font-size: 0.86rem; color: #3d4c59; font-style: italic; }
.testimonial-card .who { margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--navy); }

.appt-form {
  position: relative; z-index: 6;
  padding: clamp(26px, 3.6vw, 38px);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
  transform: translateY(60px); /* straddles the footer seam */
}
.appt-form h3 { font-family: var(--font-head); font-size: clamp(1.85rem, 2.8vw, 2.5rem); font-weight: 600; color: var(--navy); letter-spacing: -0.02em; }
.appt-form > p { margin-top: 6px; font-size: 0.86rem; color: #51606e; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.f-field { position: relative; }
.f-field.wide { grid-column: 1 / -1; }
.f-field input, .f-field select {
  width: 100%;
  padding: 15px 16px; padding-top: 20px;
  border-radius: 14px;
  border: 1.5px solid rgba(11, 43, 69, 0.1); background: #fff;
  font-size: 0.92rem; color: var(--charcoal); outline: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.f-field label {
  position: absolute; left: 16px; top: 16px;
  font-size: 0.88rem; color: #8a99a5;
  pointer-events: none;
  transition: all 0.25s var(--ease);
}
.f-field input:focus, .f-field select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(16, 184, 214, 0.16); }
.f-field input:focus + label, .f-field input:not(:placeholder-shown) + label {
  top: 7px; font-size: 0.68rem; color: var(--teal); font-weight: 600;
}
.f-field.static label { position: static; font-size: 0.72rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; display: block; }
.f-field.static input { padding-top: 13px; }
.f-field.static { display: flex; flex-direction: column; }
.f-submit { width: 100%; justify-content: center; margin-top: 6px; padding: 17px; }

/* ---------- Footer ---------- */
.footer {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #0b2b45 0%, #081d31 100%);
  color: rgba(255, 255, 255, 0.78);
  margin-top: -20px;
  padding: clamp(90px, 11vw, 130px) 0 30px; /* clears the overlapping form */
  border-radius: 0;
}
.footer-brand .foot-logo img { height: 60px; width: auto; margin-bottom: 18px; }
.footer-brand .tag { font-size: 0.92rem; color: rgba(255, 255, 255, 0.68); max-width: 32ch; }
.footer-contact { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 0.86rem; }
.footer-brand .footer-contact { margin-top: 26px; }
.footer-brand .footer-contact h4 {
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: #fff;
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 14px;
}
.footer-contact .fc-row { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gradient-primary); color: #fff; flex: none; margin-top: 1px; }
.footer-follow { margin-top: 22px; }
.footer-follow .ff-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-soft); margin-bottom: 12px; }
.footer-socials { display: flex; gap: 10px; }
.footer-socials .soc-btn { width: 38px; height: 38px; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.footer-socials .soc-btn:hover { background: var(--gradient-primary); color: #fff; transform: none; }
.footer-cols {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 24px;
}
.footer-cols > .foot-col:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.footer-cols > .foot-col:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.footer-cols > .foot-col:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
.footer-cols > .foot-col:nth-child(4) { grid-area: 1 / 4 / 2 / 5; }
.foot-col h4 { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: #fff; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 16px; }
.foot-col a { display: block; font-size: 0.84rem; color: rgba(255, 255, 255, 0.68); padding: 5px 0; transition: color 0.3s var(--ease), transform 0.3s var(--ease); }
.foot-col a:hover { color: var(--teal-soft); transform: translateX(4px); }
.footer-top { display: grid; grid-template-columns: 1.35fr 2fr; gap: clamp(30px, 5vw, 60px); padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 24px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }
.foot-legal { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.foot-legal a { color: rgba(255, 255, 255, 0.62); }
.foot-legal a:hover { color: var(--teal-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .scan-row { grid-template-columns: repeat(2, 1fr); }
  .dep-grid { grid-template-columns: repeat(2, 1fr); }
  .pk-w7, .pk-w5 { grid-column: span 6; }
  .doctors-row { grid-template-columns: repeat(2, 1fr); }
  .happening-layout { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; }
  .intro-grid, .dna-inner, .appt-layout { grid-template-columns: 1fr; }
  .hero { padding-top: 120px; }
  .hero-visual { min-height: 460px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .instant-form { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .dep-grid, .doctors-row, .packages-grid { grid-template-columns: 1fr; }
  .pk-w7, .pk-w5 { grid-column: span 1; }
  .form-grid, .instant-form { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .fc-exp { left: 0; }
  .fc-patients { right: 0; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .utility-strip { justify-content: center; }
  .instant-card { transform: translateY(30px); }
  .testimonial-card { left: 0; right: 0; max-width: none; }
}

/* ====================== v3 SET HEADER ====================== */
/* ---------- NAV (two-row floating glass) ---------- */
.nav.v3 { position: fixed; top: 0; left: 0; right: 0; z-index: 65; padding: 8px 0; }
.nav-scrim { position: fixed; top: 0; left: 0; right: 0; height: 130px; z-index: 64; pointer-events: none; background: linear-gradient(to bottom, rgba(11, 43, 69, 0.30), transparent 78%); }
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.nav-logo-v3 { display: flex; align-items: center; line-height: 0; padding: 10px 0 6px; }
.nav-logo-v3 .nl-full { height: 46px; width: auto; }
.nav-logo-v3 .nl-icon { display: none; height: 40px; width: auto; }

.nav-pills { display: flex; align-items: center; gap: 10px; }
.nav-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; color: var(--navy);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  white-space: nowrap;
}
.nav-pill:hover { transform: scale(1.04); }
.nav-pill:active { transform: scale(0.98); }
.pill-find { background: transparent; border: 1.5px solid rgba(11, 43, 69, 0.55); color: #0c3f52; backdrop-filter: blur(8px); }
.nav.v3:not(.scrolled) .pill-find { color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.pill-emergency { background: var(--emergency); color: var(--navy); }
.pill-emergency:hover { box-shadow: 0 8px 22px -10px rgba(229, 72, 77, 0.5); }
.pill-consult { background: var(--light-3); border: 1px solid rgba(255, 255, 255, 0.7); }
.pill-consult:hover { box-shadow: 0 8px 24px -10px rgba(16, 184, 214, 0.55); }
.pill-consult .cbadge {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy); color: #fff; margin-left: 2px;
  transition: transform 0.35s var(--ease);
}
.pill-consult:hover .cbadge { transform: rotate(45deg); }

/* Row 2 — translucent glass pill bar */
.nav-main-v3 {
  display: flex; align-items: center; gap: clamp(4px, 1vw, 20px); flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  padding: 8px 16px;
  margin-top: 2px;
}
.nav.v3.scrolled .nav-main-v3 { background: rgba(255, 255, 255, 0.68); }
.nav-item { position: relative; }
.nav-item .nav-link { cursor: pointer; }
.nav-item .caret { font-size: 0.62em; opacity: 0.7; transition: transform 0.25s var(--ease); }
.nav-item.open .caret { transform: rotate(180deg); }

.nav-drop {
  position: absolute; top: 100%; left: -10px; margin-top: 8px;
  min-width: 240px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px; padding: 12px;
  box-shadow: 0 26px 60px -22px rgba(11, 43, 69, 0.45);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 70;
  display: flex; flex-direction: column; gap: 2px;
}
.nav-item.open .nav-drop { opacity: 1; transform: translateY(0); pointer-events: auto; }
.drop-item {
  display: block; padding: 8px 12px; border-radius: 12px;
  font-size: 0.85rem; color: var(--navy); font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.drop-item:hover { background: var(--light-3); transform: translateX(3px); }
.nav-drop.mega {
  min-width: 560px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 14px;
}
.nav-drop.mega .drop-item { white-space: normal; }

/* Mobile menu? reuse .nav-mobile */
.nm-inner { max-height: 80vh; overflow-y: auto; width: min(340px, 86vw); }
.nm-item .nm-link {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-head); font-size: 1.4rem; color: var(--navy);
  padding: 10px 0; background: none; text-align: left;
}
.nm-sub { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.nm-sub.show { max-height: 1000px; }
.nm-sub a { display: block; padding: 8px 0 8px 12px; font-size: 1rem; color: #51606e; }
.nm-sub.col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.nm-sub.col a { padding-left: 12px; }

@media (max-width: 1024px) {
  .nav-main-v3 { display: none; }
  .nav-logo-v3 .nl-icon { display: block; }
  .nav-logo-v3 .nl-full { display: none; }
  .nav-pills { display: none; }
  .nav-top { width: 100%; }
  .nav.v3 .nav-burger { margin-left: auto; }
}

/* ---------- HERO (full-bleed carousel) ---------- */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; border-radius: 0; }
.hero-frame { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.9s var(--ease), visibility 0.9s; pointer-events: none; }
.hero-slide.active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; }
.hero-slide.leaving { opacity: 0; z-index: 0; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-photo.kb { animation: kenburns 8s ease-out forwards; transform-origin: 60% 30%; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-scrim2 {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(9, 30, 49, 0.82) 0%, rgba(9, 30, 49, 0.32) 40%, transparent 68%),
    linear-gradient(to right, rgba(9, 30, 49, 0.5) 0%, transparent 55%);
}
.hero-ui { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; padding-bottom: clamp(4rem, 8vh, 6.5rem); }
.hero-copy { max-width: 58%; }
.hero-h.display {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.04;
  color: #fff;
  margin: 0; font-weight: 400;
}
.hero-line { display: block; }
.hero-line.accent { color: var(--teal); }
.hero-line-sub { color: rgba(255, 255, 255, 0.85); font-size: 1.02rem; margin-top: 18px; max-width: 42ch; }
.hero-side {
  position: absolute; right: clamp(16px, 4vw, 48px); bottom: clamp(4rem, 8vh, 6.5rem);
  display: flex; gap: 26px; z-index: 2;
}
.hstat { display: flex; align-items: center; gap: 11px; }
.hstat-marker { width: 9px; height: 9px; transform: rotate(45deg); background: var(--teal); flex: none; box-shadow: 0 0 10px rgba(16, 184, 214, 0.8); }
.hstat b { display: block; font-family: var(--font-body); font-weight: 600; color: #fff; font-size: 1.06rem; line-height: 1; }
.hstat i { font-style: normal; font-size: 0.76rem; color: rgba(255, 255, 255, 0.72); display: block; margin-top: 3px; line-height: 1; }
.hero-dots { position: absolute; right: clamp(16px, 4vw, 48px); bottom: 2rem; z-index: 3; display: flex; gap: 10px; }
.hdot {
  position: relative; width: 10px; height: 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.35); overflow: hidden;
  transition: width 0.3s var(--ease);
}
.hdot.on { width: 42px; background: rgba(255, 255, 255, 0.25); }
.hdot-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--teal); border-radius: 999px; }
.hero:not(.paused) .hdot.on .hdot-fill { animation: dotFill 6s linear forwards; }
@keyframes dotFill { from { width: 0; } to { width: 100%; } }
.hero-down {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 3;
  color: rgba(255, 255, 255, 0.8); font-size: 1.4rem; animation: bounceDown 2s infinite;
}
@keyframes bounceDown { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

@media (max-width: 767px) {
  .hero-ui { padding-bottom: 7rem; }
  .hero-copy { max-width: 100%; }
  .hero-h.display { font-size: clamp(2rem, 10vw, 3rem); }
  .hero-side { right: auto; left: 16px; bottom: auto; top: auto; position: static; margin-top: 20px; }
  .hero-dots { bottom: 1.2rem; }
}

/* ---------- ORGAN CARDS — square 3×2 grid, glass cutouts ---------- */
.scan-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.10) 100%),
    linear-gradient(135deg, #fdfeff 0%, #e7f1f8 100%);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  isolation: isolate;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
/* glass sheen across the surface */
.scan-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 36%, transparent 56%);
  opacity: 0.5;
  transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.scan-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 26px 54px -24px rgba(11, 43, 69, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -24px 48px -20px rgba(150, 200, 230, 0.32);
}
/* hover gradient — locked exact colors: #0A384C -> #1F82AD */
.scan-bg-dark {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #0a384c 0%, #1f82ad 100%);
  opacity: 0;
  transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.scan-card:hover .scan-bg-dark { opacity: 1; }
/* soft bloom behind the organ on hover */
.scan-glow {
  position: absolute;
  top: 14%;
  left: 4%;
  width: 66%;
  height: 52%;
  background: radial-gradient(circle, rgba(150, 210, 255, 0.95) 0%, rgba(150, 210, 255, 0) 70%);
  filter: blur(16px);
  opacity: 0;
  transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.scan-card:hover .scan-glow { opacity: 1; }
/* organ render — normalized cutout template (baked: same height, inset, centering) */
.scan-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.scan-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(1.02);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), filter 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.scan-card:hover .scan-media img {
  transform: scale(1.09);
  filter: drop-shadow(0 0 24px rgba(140, 208, 255, 0.7)) brightness(1.1);
}
/* blue dye — re-tints the organ into the locked hover gradient's blue range */
.scan-dye {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(150deg, rgba(31, 130, 173, 1) 0%, rgba(10, 56, 76, 1) 100%);
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.scan-card:hover .scan-dye { opacity: 1; }
/* glass sheen — lightens subtly on hover, tinted toward the hover blues */
.scan-card:hover::before {
  opacity: 0.22;
  background: linear-gradient(115deg, rgba(140, 205, 255, 0.5) 0%, rgba(140, 205, 255, 0.06) 40%, transparent 60%);
}
/* circular arrow button — green → white on hover, arrow stays dark */
.scan-open {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #000;
  font-size: 1rem;
  box-shadow: 0 10px 22px -12px rgba(46, 125, 50, 0.6);
  transition: background 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.scan-card:hover .scan-open { background: #fff; }
/* title — two lines, bottom-right, right-aligned; dark → white on hover */
.scan-title {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 4;
  text-align: right;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.25;
  color: #16232e;
  max-width: 11ch;
  transition: color 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.scan-card:hover .scan-title { color: #fff; }

/* ---------- INSTANT APPOINTMENT (moved below cards, overlaps scan grid) ---------- */
.instant-wrap {
  position: relative; z-index: 6; margin-top: -40px;
  padding-bottom: 20px;
}
.instant-wrap .instant-card { position: relative; margin: 0 auto; transform: none; }

@media (max-width: 1024px) {
  .instant-wrap { margin-top: -24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo.kb { animation: none; transform: none; }
  .hero-slide { transition: opacity 0.6s; }
  .hero-dots { display: none; }
  .hero-down { display: none; }
}

/* ====================== / v3 ====================== */

/* ============================================================
   HERO — one media element that grows into the full frame
   ============================================================ */
.hero-grow {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
}

/* title only — centered, static, inside the page gutters */
.hs-title {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 15vh clamp(18px, 4.5vw, 96px) 0;
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 400;
  color: #33414d;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}
.hs-title-line { display: block; }

/* the single media frame — rounded, inset, absolute so it can grow */
.hs-frame {
  position: absolute;
  left: clamp(18px, 4.5vw, 96px);
  right: clamp(18px, 4.5vw, 96px);
  top: calc(15vh + 11rem);
  bottom: 4vh;
  border-radius: 24px;
  overflow: hidden;
  background: #eef3f7;
}
.hs-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 0 70px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.hs-frame img, .hs-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* reduced motion — static resting layout */
.hs-reduced .hero-grow { height: auto; }
.hs-reduced .hs-title { padding-top: 9vh; }
.hs-reduced .hs-frame {
  position: static;
  display: block;
  width: auto;
  margin: 2rem clamp(18px, 4.5vw, 96px) 4rem;
  height: 60vh;
  border-radius: 24px;
}

@media (max-width: 767px) {
  .hs-title { padding-top: 12vh; font-size: clamp(1.7rem, 7.5vw, 2.5rem); }
  .hs-frame { top: calc(12vh + 4.5rem); bottom: 3vh; border-radius: 20px; }
  .hs-reduced .hs-frame { height: 46vh; margin-top: 1.5rem; }
}

/* ---------- NAV: logo badge + hide/reveal ---------- */
.nav.v3 { transition: transform 0.4s var(--ease), opacity 0.4s var(--ease); }
.nav.v3.hidden { transform: translateY(-115%); opacity: 0; pointer-events: none; }
.nav-logo-v3 .nl-badge {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 13px;
  background: #fff; border: 1px solid rgba(11, 43, 69, 0.08);
  box-shadow: 0 8px 20px -10px rgba(11, 43, 69, 0.4);
  flex: none;
}
.nav-logo-v3 .nl-mark { height: 30px; width: auto; }
.nav-logo-v3 .nl-word { display: flex; flex-direction: column; line-height: 1; margin-left: 10px; }
.nav-logo-v3 .nl-word b { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; color: var(--navy); letter-spacing: 0; }
.nav-logo-v3 .nl-word i { font-style: normal; font-size: 0.6rem; font-weight: 500; color: var(--teal); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 3px; }
@media (max-width: 1024px) {
  .nav-logo-v3 .nl-word { display: none; }
}

/* ============ ABOUT (scroll-driven) ============ */
.about-scroll { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.as-stage { position: absolute; inset: 0; }
.as-frame {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 84%;
  height: 74%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.as-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px -16px rgba(11, 43, 69, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  opacity: 0;
  pointer-events: none;
}
.as-badge .as-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--gradient-primary);
  color: #fff;
}
.as-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: start;
}
.as-body > * { opacity: 0; }
.as-left h2 { margin-top: 14px; font-size: clamp(1.8rem, 3.4vw, 2.7rem); max-width: 16ch; line-height: 1.12; }
.as-left p { margin-top: 14px; color: #51606e; max-width: 46ch; }
.as-right h2 { margin-top: 14px; font-size: clamp(1.8rem, 3.4vw, 2.7rem); max-width: 16ch; line-height: 1.12; }
.as-right .eyebrow { margin-bottom: 2px; }
.as-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.as-points { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; margin: 22px 0 0; padding: 0; }
.as-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
}
.as-points .as-ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--light-1);
  border: 1px solid var(--teal-soft);
  color: var(--teal);
  flex: none;
}
@media (max-width: 767px) {
  .about-scroll { height: auto; min-height: 0; overflow: visible; }
  .as-stage { position: relative; height: 70vh; }
  .as-frame { position: absolute; inset: auto 0 0 0; height: 56vh; border-radius: 18px; }
  .as-body { position: relative; top: auto; grid-template-columns: 1fr; gap: 26px; padding: 28px 0 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-scroll { height: auto; min-height: 0; overflow: visible; }
  .as-stage { position: relative; height: auto; }
  .as-frame { position: relative; height: 50vh; border-radius: 24px; }
  .as-badge { opacity: 1; }
  .as-body { position: relative; top: auto; opacity: 1; padding: 30px 0 60px; }
  .as-body > * { opacity: 1; transform: none; }
}




/* ============ DOCTORS — 3D coverflow carousel ============ */
.coverflow { overflow: hidden; perspective: 1600px; padding-top: 10px; }
.coverflow-track {
  display: flex;
  align-items: center;
  transform-style: preserve-3d;
  padding: 30px 0 22px;
}
.coverflow-slide {
  flex: 0 0 39%;
  min-width: 0;
  padding: 0 10px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.doctor-card3 {
  position: relative;
  background: #fff;
  border-radius: 24px;
  overflow: visible;
  box-shadow: 0 18px 46px -22px rgba(11, 43, 69, 0.4);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.doctor-card3:hover { transform: translateY(-6px); box-shadow: 0 26px 56px -24px rgba(11, 43, 69, 0.5); }
.dc-photo {
  position: relative;
  margin: 12px 12px 0;
  border-radius: 17px;
  overflow: hidden;
  background: linear-gradient(160deg, #e4eef6, #f3f8fb);
}
.dc-photo img { width: 100%; height: 300px; object-fit: cover; object-position: top center; display: block; transition: transform 0.5s var(--ease); }
.doctor-card3:hover .dc-photo img { transform: scale(1.05); }
.dc-info { padding: 18px 20px 22px; text-align: center; }
.dc-info h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.06rem; color: var(--navy); line-height: 1.25; }
.dc-spec { font-size: 0.82rem; color: #6b7f8e; font-weight: 500; margin-top: 3px; }
.dc-socials { display: flex; gap: 9px; justify-content: center; margin-top: 14px; }
.dc-soc {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--teal-soft);
  color: var(--teal);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.dc-soc.dc-ig { background: var(--navy); border-color: var(--navy); color: #fff; }
.dc-soc:hover { transform: scale(1.12) rotate(12deg); background: var(--gradient-primary); color: #fff; }
/* hover: info floats as frosted panel over the photo */
.doctor-card3:hover .dc-info {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 16px 40px -10px rgba(11, 43, 69, 0.45);
  padding: 16px 18px 20px;
}
.doctor-card3:hover .dc-info h3 { font-size: 1.14rem; }
.doctor-card3:hover .dc-spec { font-size: 0.86rem; }
.coverflow-controls { display: flex; gap: 14px; justify-content: center; margin-top: 24px; }
.cc-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--teal-soft);
  color: var(--navy);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cc-btn:hover { transform: scale(1.08); background: var(--gradient-primary); color: #fff; box-shadow: 0 12px 28px -12px rgba(16, 184, 214, 0.55); }
.cc-btn:active { transform: scale(0.94); }
@media (max-width: 1024px) {
  .coverflow-slide { flex: 0 0 52%; }
}
@media (max-width: 767px) {
  .coverflow-slide { flex: 0 0 78%; }
  .dc-photo img { height: 240px; }
}


/* ============ DOCTORS v2 — flat 4-up sliding carousel ============ */
.coverflow { overflow: hidden; }
.coverflow-track { display: flex; align-items: stretch; }
.coverflow-slide {
  flex: 0 0 25% !important;
  max-width: 25%;
  padding: 0 12px;
  transform: none !important;
  opacity: 1 !important;
}
.doctor-card3 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 46px -22px rgba(11, 43, 69, 0.4);
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease), background 0.32s var(--ease);
}
.doctor-card3:hover {
  background: linear-gradient(150deg, #d8eaf3, #f1f7fb);
  transform: translateY(-4px);
  box-shadow: 0 26px 56px -24px rgba(11, 43, 69, 0.5);
}
.dc-photo {
  position: relative;
  margin: 12px;
  margin-bottom: 0;
  border-radius: 17px;
  overflow: hidden;
  background: linear-gradient(150deg, #e4eef6, #f4f9fc);
}
.dc-photo img {
  width: 100%;
  height: 290px;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.32s var(--ease);
}
.doctor-card3:hover .dc-photo img { transform: scale(1.05); }
.dc-info {
  position: static !important;
  padding: 18px 20px 22px;
  text-align: center;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
}
.dc-info h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.06rem; color: var(--navy); line-height: 1.25; }
.dc-spec { font-size: 0.82rem; color: #6b7f8e; font-weight: 500; margin-top: 3px; }
.dc-socials { display: flex; gap: 9px; justify-content: center; margin-top: 14px; }
.dc-soc {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--teal-soft);
  color: var(--teal);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.dc-soc:hover { transform: scale(1.12) rotate(12deg); background: var(--gradient-primary); color: #fff; }
.coverflow-controls { display: flex; gap: 14px; justify-content: center; margin-top: 26px; }
.cc-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--teal-soft);
  color: var(--navy);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cc-btn:hover { transform: scale(1.08); background: var(--gradient-primary); color: #fff; box-shadow: 0 12px 28px -12px rgba(16, 184, 214, 0.55); }
.cc-btn:active { transform: scale(0.94); }
@media (max-width: 1024px) {
  .coverflow-slide { flex: 0 0 45% !important; max-width: 45%; }
}
@media (max-width: 767px) {
  .coverflow-slide { flex: 0 0 82% !important; max-width: 82%; }
  .dc-photo img { height: 232px; }
}


/* ============ DOCTORS — center-focus fan carousel ============ */
.focus-row {
  position: relative;
  height: 430px;
  margin-top: 8px;
}
.focus-slide {
  position: absolute;
  left: 50%;
  top: 0;
  width: 21%;
  height: 100%;
  transform: translateX(-50%) scale(1);
  will-change: transform, opacity;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.focus-slide .doctor-card3 {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.focus-slide .dc-photo { flex: none; }
.focus-slide .dc-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 1024px) {
  .focus-row { height: 400px; }
  .focus-slide { width: 26%; }
}
@media (max-width: 767px) {
  .focus-row { height: 360px; }
  .focus-slide { width: 42%; }
}


/* ============ PACKAGES — horizontal sticky-scroll ============ */
.pkg-pin { height: 100vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pkg-head-wrap { padding-top: 44px; position: relative; z-index: 3; }
.pkg-head-wrap .sec-head { margin-bottom: 6px; }
.pkg-hscroll { position: relative; flex: 1; display: flex; align-items: stretch; overflow: hidden; }
.pkg-track {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  padding: 0 clamp(4vw, 5vw, 72px);
  will-change: transform;
  min-width: max-content;
}
.pkg-slide { flex: none; width: min(72vw, 880px); height: clamp(300px, 62vh, 520px); }
.pkg-slide .package-card { width: 100%; height: 100%; }
/* reduced-motion fallback grid */
.packages-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.pkg-cell.w7 { grid-column: span 7; }
.pkg-cell.w5 { grid-column: span 5; }
.pkg-cell .package-card { height: 300px; }
@media (max-width: 1024px) {
  .pkg-slide { width: 78vw; }
}
@media (max-width: 767px) {
  .pkg-pin { height: auto; overflow: visible; }
  .pkg-hscroll { overflow-x: auto; }
  .pkg-track { min-width: max-content; padding-bottom: 10px; }
  .pkg-slide { width: 82vw; height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .pkg-pin { height: auto; overflow: visible; }
  .pkg-hscroll { overflow-x: auto; }
}


/* ============ HAPPENING — card-stack push ============ */
.hstack-section { position: relative; height: 100vh; min-height: 620px; display: flex; flex-direction: column; overflow: hidden; }
.hstack-head { padding-top: 46px; position: relative; z-index: 5; }
.stack-viewport { position: relative; flex: 1; display: grid; place-items: center; }
.stack-cards { position: relative; width: min(880px, 90%); height: min(72vh, 540px); }
.stack-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(160deg, #0d2c48, #14506f);
  box-shadow: 0 30px 70px -24px rgba(8, 33, 58, 0.65);
  will-change: transform, opacity;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.stack-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; opacity: 0.6; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); }
.stack-card:hover > img { transform: scale(1.05); opacity: 0.75; }
.stack-card .sm-veil { position: absolute; inset: 0; background: linear-gradient(160deg, transparent 42%, rgba(8, 33, 58, 0.85) 82%); }
.stack-body {
  position: absolute;
  inset: 0;
  padding: clamp(22px, 3.6vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.stack-body h3 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); margin-top: 12px; }
.stack-body .fc-quote { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; line-height: 1.65; margin-top: 12px; max-width: 62ch; }
.stack-body .fc-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 20px; }
.stack-card .doc { display: flex; align-items: center; gap: 10px; }
.stack-card .doc img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.5); }
.stack-card .doc b { color: #fff; font-size: 0.9rem; }
.stack-card .doc span { display: block; font-size: 0.74rem; color: rgba(255,255,255,0.68); }
.stack-card .case-dots { display: inline-flex; gap: 8px; margin-top: 18px; }
.stack-card .case-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.stack-card .case-dots span.on { background: var(--green); width: 22px; border-radius: 999px; }
.stack-mini { display: flex; align-items: flex-end; }
.stack-mini h4 {
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 22px;
  max-width: 60%;
}
.stack-mini .arrowr {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.stack-mini:hover .arrowr { background: var(--gradient-primary); transform: rotate(45deg); }
@media (max-width: 767px) {
  .hstack-section { height: 86vh; min-height: 560px; }
  .stack-cards { width: 92%; height: 62vh; }
  .stack-body .fc-meta { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .hstack-section { height: auto; min-height: 0; overflow: visible; }
  .hstack-head { padding-top: 70px; }
  .stack-viewport { display: none; }
  .happening-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
}


/* ============ HAPPENING — tiered deck (revision) ============ */
.stack-cards {
  position: relative;
  width: min(900px, 92%);
  height: min(76vh, 600px);
}
.stack-card {
  left: 50%;
  top: 24%;
  right: auto;
  bottom: auto;
  width: min(560px, 100%);
  height: min(340px, 62%);
  margin-left: -min(280px, 50%);
  border-radius: 26px;
  box-shadow: 0 24px 54px -20px rgba(8, 33, 58, 0.55);
  background: linear-gradient(160deg, #0d2c48, #14506f);
  overflow: hidden;
}
.stack-card .stack-body { inset: 0; }
.stack-mini .sm-veil { position: absolute; inset: 0; z-index: 1; }
.stack-mini h4 { z-index: 3; padding: 24px 26px; max-width: 70%; font-size: clamp(0.95rem, 1.4vw, 1.15rem); }
.stack-mini .arrowr { z-index: 4; width: 40px; height: 40px; right: 22px; bottom: 22px; }
.stack-feature .stack-body .eyebrow { font-size: 0.72rem; }
.stack-feature .stack-body h3 { font-size: clamp(1.25rem, 2vw, 1.8rem); }
.stack-feature .stack-body .fc-quote { font-size: 0.84rem; max-height: 92px; overflow: hidden; }
.stack-feature .stack-body .fc-meta { margin-top: 14px; }
.stack-feature .stack-body .case-dots { margin-top: 14px; }
@media (max-width: 767px) {
  .stack-cards { height: 60vh; }
  .stack-card { top: 26%; width: 94%; margin-left: 0; left: 3%; height: 52vh; }
}


/* ============ HAPPENING — full-width stacked-scroll banners (rev 2) ============ */
.hstack-section {
  height: 100vh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.hstack-head { padding-top: 44px; position: relative; z-index: 6; }
.stack-wrap { position: relative; flex: 1; display: grid; place-items: center; z-index: 1; }
.stack-banners {
  position: relative;
  width: min(1180px, 94%);
  height: min(60vh, 600px);
}
.stack-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(160deg, #0d2c48, #14506f);
  box-shadow: 0 30px 64px -28px rgba(8, 33, 58, 0.6);
  will-change: transform, opacity;
}
.stack-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 50%;
  opacity: 0.62;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.stack-card:hover > img { transform: scale(1.05); opacity: 0.72; }
.stack-card .sm-veil {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent 46%, rgba(8, 33, 58, 0.88) 86%);
}
.stack-body {
  position: absolute;
  inset: 0;
  padding: clamp(24px, 3.6vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.stack-body h3 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.3rem); margin-top: 12px; }
.stack-body .fc-quote { color: rgba(255,255,255,0.86); font-size: 0.92rem; line-height: 1.66; margin-top: 12px; max-width: 64ch; }
.stack-body .fc-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 20px; }
.stack-card .doc { display: flex; align-items: center; gap: 10px; }
.stack-card .doc img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.5); }
.stack-card .doc b { color: #fff; font-size: 0.92rem; }
.stack-card .doc span { display: block; font-size: 0.76rem; color: rgba(255,255,255,0.68); }
.stack-card .case-dots { display: inline-flex; gap: 8px; margin-top: 18px; }
.stack-card .case-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.stack-card .case-dots span.on { background: var(--green); width: 22px; border-radius: 999px; }
.stack-mini h4 {
  position: relative;
  z-index: 3;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  padding: 26px 30px;
  max-width: 80%;
}
.stack-mini .arrowr {
  position: absolute;
  right: 26px;
  bottom: 26px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.stack-mini:hover .arrowr { background: var(--gradient-primary); transform: rotate(45deg); }
@media (max-width: 767px) {
  .hstack-section { height: 92vh; min-height: 560px; }
  .stack-banners { width: 92%; height: 56vh; }
  .stack-body .fc-meta { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .hstack-section { height: auto; min-height: 0; }
  .hstack-head { padding-top: 70px; }
  .stack-wrap { display: none; }
  .happening-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
}


/* ============ HAPPENING — full-width stacked banners (definitive, rev 2) ============ */
.hstack-section {
  height: 100vh;
  min-height: 660px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hstack-head { position: relative; z-index: 30; padding-top: 46px; }
.stack-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  z-index: 10;
}
.stack-banners {
  position: relative;
  width: min(1160px, 94%);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.stack-card {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: min(46vh, 470px);
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(160deg, #0d2c48, #14506f);
  box-shadow: 0 34px 70px -30px rgba(6, 22, 40, 0.75);
  will-change: transform, opacity;
}
.stack-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 50%;
  opacity: 0.66;
}
.stack-card:hover > img { opacity: 0.8; }
.stack-card .sm-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, transparent 44%, rgba(8, 33, 58, 0.88) 88%);
}
.stack-card .sc-dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(5, 18, 34, 0) 0%, rgba(5, 18, 34, 0.5) 68%, rgba(3, 12, 24, 0.86) 100%);
  opacity: 0;
}
.stack-body {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: clamp(24px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.stack-body .eyebrow { font-size: 0.76rem; }
.stack-body h3 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.3rem); margin-top: 12px; }
.stack-body .fc-quote { color: rgba(255,255,255,0.88); font-size: 0.92rem; line-height: 1.62; margin-top: 12px; max-width: 64ch; }
.stack-body .fc-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 20px; }
.stack-card .doc { display: flex; align-items: center; gap: 10px; }
.stack-card .doc img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.5); }
.stack-card .doc b { color: #fff; font-size: 0.92rem; }
.stack-card .doc span { display: block; font-size: 0.76rem; color: rgba(255,255,255,0.68); }
.stack-card .case-dots { display: inline-flex; gap: 8px; margin-top: 18px; }
.stack-card .case-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.stack-card .case-dots span.on { background: var(--green); width: 22px; border-radius: 999px; }
.stack-mini h4 {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  margin: 0;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  padding: 26px 30px;
  max-width: 82%;
}
.stack-mini .arrowr {
  position: absolute;
  right: 26px;
  bottom: 26px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.stack-mini:hover .arrowr { background: var(--gradient-primary); transform: rotate(45deg); }
@media (max-width: 767px) {
  .hstack-section { height: 92vh; min-height: 560px; }
  .stack-banners { width: 92%; }
  .stack-card { height: min(42vh, 420px); }
  .stack-body .fc-meta { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .hstack-section { height: auto; min-height: 0; overflow: visible; }
  .hstack-head { padding-top: 70px; }
  .stack-wrap { display: none; }
  .happening-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
}


/* ============ HAPPENING — larger immersive banners (rev 3) ============ */
.stack-banners {
  width: min(1560px, 96.5%);
}
.stack-card {
  height: min(78vh, 100%);
  border-radius: 30px;
  box-shadow: 0 40px 90px -34px rgba(6, 22, 40, 0.8);
}
.stack-card > img { object-position: 45% 46%; }
.stack-body {
  padding: clamp(28px, 4.2vw, 56px);
}
.stack-body h3 { font-size: clamp(1.8rem, 4vw, 3.4rem); margin-top: 16px; }
.stack-body .fc-quote { font-size: clamp(0.95rem, 1.4vw, 1.1rem); line-height: 1.62; margin-top: 14px; max-width: 70ch; }
.stack-body .fc-meta { margin-top: 24px; }
.stack-card .doc { gap: 12px; }
.stack-card .doc img { width: 54px; height: 54px; }
.stack-card .doc b { font-size: 1.05rem; }
.stack-card .doc span { font-size: 0.85rem; }
.stack-body .eyebrow { font-size: 0.85rem; }
.stack-card .case-dots { margin-top: 22px; }
.stack-card .case-dots span { width: 10px; height: 10px; }
.stack-card .case-dots span.on { width: 28px; }
.stack-mini h4 {
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  padding: 34px 38px;
  max-width: 86%;
}
.stack-mini .arrowr {
  width: 58px;
  height: 58px;
  right: 34px;
  bottom: 34px;
}
.stack-mini .arrowr svg { width: 22px; height: 22px; }
@media (max-width: 767px) {
  .stack-banners { width: 94%; }
  .stack-card { height: min(72vh, 100%); border-radius: 22px; }
  .stack-mini h4 { padding: 24px; max-width: 84%; }
  .stack-mini .arrowr { width: 48px; height: 48px; right: 24px; bottom: 24px; }
}


/* ============ HAPPENING — compact header + taller card (rev 3b) ============ */
.hstack-head { padding-top: 30px !important; }
.hstack-head .sec-head,
.hstack-head .sec-head > div { margin-bottom: 10px !important; }
.hstack-head .section-title { line-height: 1.05 !important; font-size: clamp(2rem, 5vw, 3.3rem) !important; margin-top: 10px !important; }
.stack-banners { height: 100%; }
.stack-card { height: min(76vh, 100%); }

/* ============ HAPPENING — tighter header for taller banner (rev 3c) ============ */
.hstack-head { padding-top: 22px !important; }
.hstack-head .eyebrow { font-size: 11px !important; padding: 5px 11px !important; }
.hstack-head .section-title { font-size: clamp(1.9rem, 4.4vw, 3rem) !important; margin-top: 8px !important; }
.hstack-head .sec-head > div { margin-bottom: 8px !important; }
.stack-card { height: min(76vh, 100%); }


/* ============ PACKAGES — whole-track horizontal scroll (intro + cards move together) ============ */
.pkg-intro {
  flex: none;
  width: clamp(480px, 50vw, 980px);
  align-self: center;
  display: flex;
  align-items: center;
}
.pkg-intro .sec-head { margin: 0; width: 100%; }
.pkg-track { padding-left: 0; }

/* ============ DEPARTMENTS — pinned left column + overlapping image cards ============ */
.dept-pin { min-height: 100vh; display: flex; align-items: center; padding: clamp(40px, 7vh, 84px) 0; }
.dept-layout { width: min(1360px, 95%); margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.18fr; gap: clamp(20px, 3.2vw, 48px); align-items: center; }
.dept-left { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 36px); align-items: flex-start; }
.dept-left .section-title { font-size: clamp(1.9rem, 3.4vw, 3.1rem); line-height: 1.08; }
.dept-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.view-more-group { display: flex; flex-wrap: wrap; gap: 8px; }
.dept-left .view-more-pill { padding: 8px 14px; font-size: 0.8rem; }
.dept-stage { position: relative; }
.dept-cards { position: relative; height: clamp(320px, 58vh, 640px); border-radius: 28px; }
.dept-slide { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; will-change: transform, opacity; box-shadow: 0 40px 80px -36px rgba(6, 20, 40, 0.8); }
.dept-slide .dept-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(160deg, #0b2c48, #123e5e);
}
.dept-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.72; }
.dept-card .dimg-ovl { position: absolute; inset: 0; background: linear-gradient(205deg, rgba(6, 18, 34, 0.22) 0%, rgba(3, 12, 26, 0.86) 86%); }
.dept-card .dveil { position: absolute; inset: 0; background: rgba(4, 14, 28, 0.8); opacity: 0; }
.dept-card .d-top { position: absolute; top: 20px; left: 22px; right: 22px; display: flex; align-items: center; justify-content: space-between; }
.dept-card .dep-num { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.7rem); color: #fff; letter-spacing: 0.05em; opacity: 0.94; }
.dept-card .dep-ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.26); color: #77e3f2; }
.dept-card .d-body { position: absolute; left: 22px; right: 22px; bottom: 22px; }
.dept-card .d-body h3 { color: #fff; font-size: clamp(1.2rem, 2vw, 1.7rem); }
.dept-card .d-body p { color: rgba(255,255,255,0.8); font-size: 0.92rem; line-height: 1.5; margin-top: 6px; max-width: 46ch; }
.dep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dep-grid .dept-card, .dep-grid .dept-slide { height: 300px; }
.dep-grid .dept-card { border-radius: 22px; }
@media (max-width: 1024px) { .dep-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .dept-layout { grid-template-columns: 1fr; }
  .dept-cards { height: 54vh; }
  .dep-grid { grid-template-columns: 1fr; }
  .dep-grid .dept-card, .dep-grid .dept-slide { height: 240px; }
}

/* ============ HAPPENING — breathing room ============ */
.hstack-section { margin-top: clamp(64px, 10vh, 130px); row-gap: clamp(18px, 3vh, 34px); }
.hstack-head { padding-top: 6px !important; }

/* ============ HAPPENING — guaranteed top spacing (above title) ============ */
section.hstack-section { margin-top: clamp(64px, 11vh, 136px) !important; }


/* ============ CORR 1 — NAV: transparent at top, full-width glass on scroll ============ */
.nav.v3 {
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), background 0.35s ease,
    backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}
.nav.v3:not(.scrolled) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: none;
}
.nav.v3.scrolled {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 14px 44px -22px rgba(11, 43, 69, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}
/* the per-row links bar no longer carries its own glass — the header bar owns it */
.nav.v3 .nav-main-v3 {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
}
.nav-scrim { background: linear-gradient(to bottom, rgba(11, 43, 69, 0.08), transparent 80%); }

/* ============ CORR 2 — FOOTER: logo+tagline top-left, address+socials bottom-left ============ */
.footer-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.fb-bottom { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.fb-bottom .footer-contact { margin-top: 0; }
.fb-bottom .footer-follow { margin-top: 0; }

/* ============ CORR 3 — PACKAGES: left margin + left-aligned stacked text block ============ */
.pkg-track { padding-left: 8px; }
.pkg-intro { padding-left: clamp(20px, 3.5vw, 64px); align-items: flex-start; }
.pkg-intro .sec-head { display: block; text-align: left !important; }
.pkg-intro .sec-head > div { text-align: left; }
.pkg-intro .sec-head .section-title { text-align: left; }
.pkg-intro .sec-head .section-intro,
.pkg-intro .sec-head .eyebrow { text-align: left; margin-left: 0; }
.pkg-intro .sec-head > .btn-pill { margin-top: 22px; }


/* ============ CORR 1 — NAV "Find a Doctor" clearly visible ============ */
.nav-pill.pill-find {
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav.v3:not(.scrolled) .pill-find { color: #fff !important; border-color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.14); }
.nav.v3.scrolled .pill-find { background: #0b2b45 !important; border-color: #0b2b45 !important; color: #fff !important; }

/* ============ CORR 2 — tighter spacing between Packages / Departments / Happening ============ */
.dept-pin { min-height: min(88vh, 860px); padding: clamp(30px, 5vh, 60px) 0; }
section.hstack-section { margin-top: clamp(24px, 4.5vh, 60px) !important; }
.pkg-pin { padding-top: 0; }

/* ============ CORR 3 — Happening cards fully visible, no cropping, content legible ============ */
.stack-banners { overflow: visible !important; }
.hstack-section { overflow: visible !important; }
.stack-feature .stack-body .fc-quote { max-height: none !important; overflow: visible !important; }
.stack-feature .stack-body {
  background: linear-gradient(to top, rgba(6, 14, 26, 0.5), rgba(6, 14, 26, 0.02) 62%);
}
.stack-mini .sm-veil { background: linear-gradient(160deg, transparent 48%, rgba(8, 33, 58, 0.9) 90%); }

/* ============ CORR 4 — Departments: lighter overlay, gradient only behind text ============ */
.dept-card > img { opacity: 1 !important; }
.dept-card .dimg-ovl {
  background: linear-gradient(to top, rgba(4, 14, 28, 0.72) 0%, rgba(4, 14, 28, 0.2) 46%, rgba(4, 14, 28, 0.04) 62%) !important;
}

/* ============ CORR 5 — Footer: quote tucked directly under logo ============ */
.footer-brand .foot-logo { display: block; }
.footer-brand .foot-logo img { margin-bottom: 6px !important; }


/* ============ PART 0 — Happening: title clears the cards ============ */
.stack-wrap { padding-top: clamp(150px, 17vh, 200px) !important; }

/* ============ PART 1 — START LOADER ============ */
.loader-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: radial-gradient(120% 120% at 50% 42%, #0a1626 0%, #05070f 72%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.loader-stage {
  width: min(780px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.loader-svg { width: 100%; height: auto; overflow: visible; }
.loader-meter {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #7ff0c0;
}
.ld-num {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  color: #e2fbff;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ld-pct { font-size: clamp(1rem, 2.4vw, 1.6rem); color: #3cf983; }
@media (prefers-reduced-motion: reduce) {
  .loader-screen { display: none; }
}


/* ============ HERO — staggered stair-step mask reveal ============ */
.hero-mask {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}
.hm-block {
  position: absolute;
  display: block;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  box-shadow: inset 0 -1px 0 rgba(11, 43, 69, 0.06);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-mask { display: none; }
}


/* ============ HERO — vertical-column mask reveal (revised) ============ */
.hm-col {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
  background: linear-gradient(180deg, #ffffff 0%, #eef3f9 100%);
  box-shadow: inset -1px 0 0 rgba(11, 43, 69, 0.07);
  will-change: transform;
}


/* ============ CORR 1 — Happening: full card visible, bottom clearance ============ */
.stack-wrap {
  padding-top: clamp(150px, 17vh, 200px) !important;
  padding-bottom: clamp(44px, 7vh, 84px) !important;
}


/* ============ CORR — Happening: tall banner + compact title gap ============ */
.hstack-head { padding: 20px 0 10px !important; }
.stack-wrap {
  padding-top: clamp(24px, 4vw, 48px) !important;
  padding-bottom: clamp(18px, 3vh, 36px) !important;
}
.stack-card { height: min(78vh, 100%); }


/* ============ CORR — Happening: compact header + genuinely tall banner ============ */
.hstack-head { padding: 16px 0 8px !important; }
.hstack-head .sec-head > div { margin-bottom: 0 !important; }
.hstack-head .section-title {
  font-size: clamp(1.7rem, 3vw, 2.5rem) !important;
  line-height: 1.04 !important;
  margin-top: 8px !important;
  white-space: nowrap;
}
.stack-wrap {
  padding-top: clamp(8px, 3vw, 36px) !important;
  padding-bottom: clamp(16px, 2.5vh, 30px) !important;
}
.stack-card { height: min(78vh, 100%); }
@media (max-width: 640px) {
  .hstack-head .section-title { white-space: normal; }
}


/* ============ CORR — Happening: final tighten (gap + taller cap) ============ */
.hstack-section { row-gap: 10px !important; }
.stack-wrap {
  padding-top: clamp(4px, 2vw, 18px) !important;
  padding-bottom: clamp(14px, 2vh, 24px) !important;
}
.stack-card { height: min(80vh, 100%); }


/* ============ SITE-WIDE CORRECTIONS ============ */

/* 1 — nav logo (new full logo, transparent) */
.nav-logo-v3 .nl-new {
  height: clamp(38px, 5vh, 48px);
  width: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 767px) {
  .nav-logo-v3 .nl-new { height: 34px; }
}

/* 2 — Find Doctor: primary-blue outline treatment (reads on hero + glass) */
.nav-pill.pill-find {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1.5px solid var(--navy) !important;
  color: var(--navy) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3 — eyebrow label pills above section titles removed (card/internal eyebrows stay) */
.sec-head .eyebrow { display: none !important; }
.dept-left .eyebrow { display: none !important; }
.as-left .eyebrow { display: none !important; }

/* 4 — uniform section rhythm (normal sections only; pinned sections keep own) */
.section:not(.pkg-pin):not(.dept-pin):not(.hstack-section) {
  padding: clamp(4.9rem, 7vw, 6.4rem) 0 !important;
}
.sec-head { margin-bottom: clamp(2rem, 4vw, 3rem) !important; }
.pkg-intro .sec-head { margin: 0 !important; }

/* 6 — green arrows → primary blue (navy) */
.scan-open { background: var(--navy) !important; color: #fff !important; box-shadow: 0 10px 24px -12px rgba(11, 43, 69, 0.55) !important; }
.package-card:hover .package-arrow { background: var(--navy) !important; color: #fff !important; }
.stack-mini:hover .arrowr { background: var(--navy) !important; }

/* 7 — CTA buttons: bare arrow, no glassy circle */
.btn-pill .arr {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  margin-left: 6px;
}

/* 9 — form section: new review image fills the frame cleanly */
.appt-photo .frame { background: #fff; }
.appt-photo img { width: 100%; height: 520px; object-fit: cover; object-position: center 22%; }

/* 2b — Find Doctor: navy outline text/border in BOTH nav states (specificity win) */
.nav.v3:not(.scrolled) .pill-find,
.nav.v3.scrolled .pill-find {
  color: var(--navy) !important;
  border-color: var(--navy) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ============ Appt creative — shown as-is, no crop ============ */
.appt-photo .frame {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.appt-photo img {
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* ============ SITE-WIDE SCROLL-REVEAL (IntersectionObserver) ============ */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
  will-change: opacity, transform;
}
html.js-reveal [data-reveal].shown {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* DOCTOR CARDS — SEAMLESS GRADIENT FROSTED GLASS */
#doctors .doctor-rail-card .dc4-info,
#doctors .doctor-rail-card .doc-card5.on .dc4-info,
#doctors .doctor-rail-card .doc-card5:not(.on) .dc4-info {
  isolation: isolate;
  overflow: visible;
  border-top: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#doctors .doctor-rail-card .dc4-info::before {
  position: absolute;
  inset: -42% 0 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #136681 0%, transparent) 0%,
    color-mix(in srgb, #136681 7%, transparent) 24%,
    color-mix(in srgb, #136681 25%, transparent) 55%,
    color-mix(in srgb, #136681 60%, transparent) 100%
  );
  backdrop-filter: blur(18px) saturate(135%);
  mask-image: linear-gradient(180deg, transparent 0%, black 34%, black 100%);
}

#doctors .doctor-rail-card .dc4-info > * {
  position: relative;
  z-index: 1;
}


/* ============ Case cards: keep text overlay, let card imagery show a touch more ============ */
.stack-card > img { opacity: 0.78 !important; }
.stack-card:hover > img { opacity: 0.9 !important; }


/* ============ CORR 6 — Happening cards: no CASE STUDY label, no carousel dots, lighter image veil ============ */
.stack-body .eyebrow,
.fc-body .eyebrow,
.stack-card .case-dots,
.feature-case .case-dots,
.case-dots { display: none !important; }

/* image reads clearly; the darkening lives only behind the text block */
.stack-card > img { opacity: 0.92 !important; }
.stack-card:hover > img { opacity: 1 !important; }
.stack-feature .fc-veil {
  background: linear-gradient(to top, rgba(6, 16, 30, 0.82) 0%, rgba(6, 16, 30, 0.42) 34%, rgba(6, 16, 30, 0.06) 62%, transparent 78%) !important;
}
.stack-feature .stack-body {
  background: linear-gradient(to top, rgba(6, 14, 26, 0.58) 0%, rgba(6, 14, 26, 0.16) 40%, transparent 66%) !important;
}
.stack-card .sc-dim { background: rgba(4, 14, 28, 0.9); }
.feature-case img { opacity: 0.95 !important; }
.feature-case .fc-veil {
  background: linear-gradient(to top, rgba(6, 16, 30, 0.84) 0%, rgba(6, 16, 30, 0.4) 36%, rgba(6, 16, 30, 0.05) 64%, transparent 80%) !important;
}
.stack-mini .sm-veil { background: linear-gradient(to top, rgba(8, 33, 58, 0.86) 0%, rgba(8, 33, 58, 0.28) 42%, transparent 70%) !important; }


/* ============ CORR 7 — Case studies: split cards, dealt-stack scroll ============ */
.hcs-section { position: relative; padding: clamp(40px, 6vh, 80px) 0 clamp(30px, 5vh, 60px); }
.hcs-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: clamp(26px, 4vh, 48px); }
.hcs-head .section-title { margin: 0; max-width: 20ch; }
.hcs-rule { display: block; width: 92px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--teal), var(--navy-3)); }
.hcs-sub { max-width: 62ch; color: #4b6070; font-size: 0.98rem; }

.hcs-stage { position: relative; padding: 0 clamp(16px, 3.4vw, 48px); }
.hcs-deck { position: relative; max-width: 1240px; margin: 0 auto; height: clamp(420px, 52vh, 540px); }
.hcs-flat { display: flex; flex-direction: column; gap: 28px; }

.hcs-card {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 3vw, 52px);
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #f2f9fc 100%);
  border: 1px solid rgba(16, 184, 214, 0.16);
  border-radius: 24px;
  box-shadow: 0 34px 70px -34px rgba(11, 43, 69, 0.32);
  padding: clamp(24px, 2.6vw, 44px);
  overflow: hidden;
  transform-origin: 50% 100%;
}
.hcs-deck .hcs-card { position: absolute; inset: 0; will-change: transform, opacity; }
.hcs-flat .hcs-card { position: relative; }

.hcs-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.hcs-tag {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(16, 184, 214, 0.12); border: 1px solid rgba(16, 184, 214, 0.28);
  color: #0e6f8a; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}
.hcs-copy h3 {
  font-family: var(--font-head); font-weight: 400;
  color: var(--navy); line-height: 1.16;
  font-size: clamp(1.35rem, 2.3vw, 2.05rem);
  margin: 0; text-wrap: pretty;
}
.hcs-body { color: #4b6070; font-size: clamp(0.86rem, 1vw, 0.97rem); line-height: 1.62; text-wrap: pretty; }
.hcs-doc { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.hcs-doc > img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 6px 16px -8px rgba(11, 43, 69, 0.5); }
.hcs-doc .who b { display: block; color: var(--navy); font-size: 0.92rem; font-weight: 600; }
.hcs-doc .who span { display: block; color: #6b7f8e; font-size: 0.76rem; }
.hcs-cta { margin-top: 6px; }

.hcs-media { position: relative; border-radius: 18px; overflow: hidden; background: #e7f2f7; aspect-ratio: 4 / 3; box-shadow: 0 22px 44px -26px rgba(11, 43, 69, 0.45); }
.hcs-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .hcs-deck { height: auto; }
  .hcs-deck .hcs-card { position: relative; inset: auto; transform: none !important; opacity: 1 !important; margin-bottom: 24px; }
  .hcs-card { grid-template-columns: 1fr; }
  .hcs-media { aspect-ratio: 16 / 10; }
}


/* ============ CORR 8 — HERO v2: split layout, arch portrait, liquid-glass organ ============ */
.hero-v2 {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(100vh, 900px);
  display: flex; align-items: center;
  padding: clamp(96px, 13vh, 150px) 0 clamp(40px, 6vh, 70px);
  background: linear-gradient(150deg, #cddcf6 0%, #dbe8fa 32%, #eef4fc 62%, #fbfdff 100%);
}
.hero-v2 .hv-mesh {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(48% 52% at 82% 8%, rgba(150, 182, 240, 0.85), transparent 70%),
    radial-gradient(42% 44% at 12% 88%, rgba(255, 255, 255, 0.95), transparent 72%),
    radial-gradient(38% 40% at 55% 40%, rgba(214, 232, 250, 0.7), transparent 74%);
  filter: blur(10px);
}
.hero-v2 .hv-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr 0.92fr 1.06fr;
  gap: clamp(12px, 2vw, 34px); align-items: center;
}

/* left */
.hv-copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2vh, 26px); }
.hv-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px 11px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: var(--navy);
  font-size: 0.94rem; font-weight: 600;
  box-shadow: 0 12px 26px -14px rgba(23, 58, 94, 0.4);
}
.hv-title {
  margin: 0; font-family: var(--font-body, inherit);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.9rem, 5.6vw, 5.4rem); line-height: 0.94; letter-spacing: -0.02em;
  color: #ffffff; text-shadow: 0 10px 26px rgba(38, 72, 118, 0.32);
  display: flex; flex-direction: column;
}
.hv-line { display: block; }
.hv-line-2 { position: relative; padding-left: 0.42em; }
.hv-steth {
  position: absolute; left: -0.34em; top: 50%; transform: translateY(-52%);
  width: 1.02em; height: 1.02em; color: #2a5f8f;
  display: grid; place-items: center;
  filter: drop-shadow(0 8px 16px rgba(30, 66, 110, 0.35));
}
.hv-steth svg { width: 100%; height: 100%; }
.hv-lede {
  max-width: 34ch; color: var(--navy); font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.62; text-wrap: pretty;
}
.hv-lede b { font-weight: 700; color: #102c48; }
.hv-cta { display: flex; align-items: center; gap: 12px; }
.hv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 40px; border-radius: 999px;
  background: linear-gradient(180deg, #1c4573 0%, #0f2a44 100%);
  color: #fff; font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em;
  box-shadow: 0 18px 34px -18px rgba(15, 42, 68, 0.75);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hv-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -18px rgba(15, 42, 68, 0.85); }
.hv-btn-round {
  width: 56px; height: 56px; border-radius: 999px; flex: none;
  display: grid; place-items: center; background: #fff; color: var(--navy);
  box-shadow: 0 14px 28px -16px rgba(23, 58, 94, 0.6);
  transition: transform 0.25s ease;
}
.hv-btn-round:hover { transform: translateY(-2px) rotate(8deg); }

/* centre portrait */
.hv-portrait { position: relative; display: grid; place-items: center; }
.hv-halo {
  position: absolute; inset: -14% -22%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
  filter: blur(6px); pointer-events: none;
}
.hv-arch {
  position: relative; width: min(100%, 420px); aspect-ratio: 0.72;
  border-radius: 50% 50% 46% 46% / 46% 46% 40% 40%;
  overflow: hidden;
  background: linear-gradient(180deg, #e7effb, #f7fbff);
  box-shadow: 0 40px 80px -44px rgba(23, 58, 94, 0.55);
}
.hv-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }

/* right zone */
.hv-right { position: relative; display: flex; flex-direction: column; gap: 14px; }
.hv-stat-row { display: flex; gap: 12px; align-items: flex-start; justify-content: flex-end; position: relative; z-index: 3; }
.hv-stack { display: flex; flex-direction: column; gap: 10px; }
.hv-card {
  background: rgba(255, 255, 255, 0.96); border-radius: 16px;
  box-shadow: 0 18px 36px -22px rgba(23, 58, 94, 0.55);
  padding: 12px 18px; display: flex; align-items: center; gap: 12px;
}
.hv-card b { display: block; color: var(--navy); font-size: 1.16rem; font-weight: 700; line-height: 1.15; }
.hv-card span { display: block; color: #64798a; font-size: 0.8rem; }
.hv-card-award { flex-direction: column; align-items: center; gap: 2px; padding: 12px 16px 8px; text-align: center; }
.hv-card-award span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--navy); }
.hv-trophy { width: 46px; height: 46px; color: #4d7ba8; margin-top: 4px; }
.hv-ic {
  width: 38px; height: 38px; flex: none; border-radius: 999px;
  display: grid; place-items: center; background: #eaf6f4; color: #14496f;
}

/* liquid-glass organ */
.hv-organ {
  position: relative; margin: -18px 0 -10px auto;
  width: min(100%, 460px); aspect-ratio: 1 / 1;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  animation: hvBreathe 4.6s ease-in-out infinite;
}
.hv-organ-defs { position: absolute; width: 0; height: 0; }
.hv-organ > img {
  position: relative; z-index: 2; width: 100%; height: 100%;
  object-fit: contain; display: block;
  filter: url(#hvLiquid) drop-shadow(0 26px 44px rgba(31, 86, 148, 0.32)) saturate(1.12);
  mix-blend-mode: multiply;
}
.hv-organ-glow {
  position: absolute; z-index: 1; inset: 12%;
  background:
    radial-gradient(42% 34% at 50% 24%, rgba(60, 214, 168, 0.55), transparent 70%),
    radial-gradient(58% 58% at 50% 60%, rgba(120, 186, 255, 0.5), transparent 72%);
  filter: blur(18px);
  animation: hvFlow 5.4s ease-in-out infinite;
}
.hv-sheen {
  position: absolute; z-index: 3; inset: 0; pointer-events: none; border-radius: 40%;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.6) 47%, rgba(255, 255, 255, 0.05) 58%, transparent 68%);
  mix-blend-mode: screen; opacity: 0.75;
  animation: hvSheen 7s linear infinite;
}
.hv-organ:hover .hv-organ-glow { animation-duration: 1.6s; }

.hv-bottom-cards { display: flex; gap: 12px; justify-content: center; position: relative; z-index: 3; margin-top: -8px; }

@keyframes hvBreathe { 0%, 100% { scale: 1; } 50% { scale: 1.028; } }
@keyframes hvFlow { 0%, 100% { opacity: 0.62; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2%); } }
@keyframes hvSheen { 0% { background-position: -160% 0; } 100% { background-position: 260% 0; } }

@media (prefers-reduced-motion: reduce) {
  .hv-organ { transform: none !important; }
  .hv-sheen, .hv-organ-glow { animation: none; }
  .hv-organ:hover .hv-organ-glow { animation: none; }
}

@media (max-width: 1180px) {
  .hero-v2 .hv-grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .hv-right { grid-column: 1 / -1; }
  .hv-organ { margin-inline: auto; }
}
@media (max-width: 760px) {
  .hero-v2 .hv-grid { grid-template-columns: 1fr; }
  .hv-portrait { order: 2; }
  .hv-right { order: 3; }
  .hv-stat-row, .hv-bottom-cards { flex-wrap: wrap; justify-content: flex-start; }
  .hv-organ { width: min(100%, 340px); }
}


/* CORR 8b — stethoscope clears the S glyph */
.hv-line-2 { padding-left: 0.86em; }
.hv-steth { left: -0.1em; width: 0.92em; height: 0.92em; }
@media (max-width: 760px) { .hv-line-2 { padding-left: 0.78em; } }


/* ============ CORR 9 — HERO: reference background, dark title, 3-image anatomy row ============ */
.hero-v2 {
  background: linear-gradient(118deg, #b9cdea 0%, #c4d6ee 22%, #d3e2f4 44%, #e4eefa 68%, #f3f8fd 100%) !important;
}
.hero-v2 .hv-mesh {
  background:
    radial-gradient(46% 50% at 6% 34%, rgba(150, 180, 224, 0.9), transparent 72%),
    radial-gradient(40% 44% at 92% 74%, rgba(255, 255, 255, 0.9), transparent 72%),
    radial-gradient(44% 46% at 52% 6%, rgba(203, 223, 245, 0.75), transparent 74%) !important;
}
.hv-title { color: #3d3d3d !important; text-shadow: none !important; }
.hv-steth { color: #3d3d3d; filter: drop-shadow(0 6px 14px rgba(61, 61, 61, 0.22)); }
.hv-lede, .hv-lede b { color: #3d3d3d; }

.hero-v2 .hv-grid { grid-template-columns: 1.04fr 0.86fr 1.24fr; }

.hv-right { justify-content: center; }
.hv-anatomy {
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: end; gap: clamp(6px, 1.2vw, 18px);
  width: 100%; margin: 0;
}
.hv-an {
  position: relative; margin: 0;
  aspect-ratio: 0.82; display: grid; place-items: center;
}
.hv-an img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  mix-blend-mode: multiply;
  filter: saturate(1.06) contrast(1.03) drop-shadow(0 22px 30px rgba(23, 58, 94, 0.16));
}
@media (max-width: 1180px) {
  .hv-anatomy { max-width: 620px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .hv-anatomy { gap: 8px; }
  .hv-an { aspect-ratio: 0.78; }
}

/* CORR 9b — case-study header: single-line title */
.hcs-head .section-title { max-width: none; }


/* CORR 9c — real alpha cutouts (no blend hack), equal image heights */
.hv-organ > img { filter: none !important; }
.hv-anatomy { align-items: center; justify-items: center; }
.hv-an {
  aspect-ratio: auto; height: clamp(210px, 25vw, 330px);
  width: 100%; display: flex; align-items: center; justify-content: center;
}
.hv-an img {
  mix-blend-mode: normal !important;
  height: 100%; width: auto; max-width: 100%;
  filter: saturate(1.04) drop-shadow(0 18px 26px rgba(23, 58, 94, 0.18)) !important;
}
@media (max-width: 760px) { .hv-an { height: clamp(150px, 30vw, 210px); } }


/* CORR 10 — hero visual: two supplied renders only, portrait removed */
.hero-v2 .hv-grid { grid-template-columns: 1fr 1.15fr; }
.hv-anatomy { grid-template-columns: 0.9fr 1.1fr; align-items: center; }
.hv-an { height: clamp(280px, 38vw, 470px); }
@media (max-width: 900px) {
  .hero-v2 .hv-grid { grid-template-columns: 1fr; }
  .hv-anatomy { max-width: 560px; margin-inline: auto; }
  .hv-an { height: clamp(200px, 40vw, 300px); }
}


/* CORR 10b — cancel stale 3-column-era rules between 901px and 1180px */
@media (min-width: 901px) {
  .hero-v2 .hv-grid { grid-template-columns: 1fr 1.15fr !important; }
  .hv-right { grid-column: auto !important; }
  .hv-anatomy { max-width: none !important; margin-inline: 0 !important; }
}


/* ============ CORR 11 — Packages section goes dark (navy → cyan) ============ */
.pkg-pin, #packages { background: linear-gradient(140deg, #061a2e 0%, #0a2942 46%, #0d3a55 78%, #0e4a63 100%); }
#packages .panel, #packages .panel.tint-a { background: transparent !important; }

#packages .eyebrow { color: #7fe3e0 !important; }
#packages .eyebrow .dot { background: #34d6cf !important; box-shadow: 0 0 0 4px rgba(52, 214, 207, 0.18) !important; }
#packages .section-title { color: #eef8fc !important; }
#packages .section-title .hl {
  background: linear-gradient(96deg, #2f6fd0 0%, #35c7e8 52%, #6ff0e4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
#packages .section-intro { color: #a8c6d8 !important; }
#packages .btn-pill.btn-gradient {
  background: linear-gradient(96deg, #1b56b0 0%, #22a6cd 60%, #45d9d0 100%) !important;
  color: #04121f !important; box-shadow: 0 18px 38px -18px rgba(34, 166, 205, 0.65) !important;
}
#packages .btn-pill.btn-gradient .arr { background: rgba(4, 18, 31, 0.16) !important; color: #04121f !important; }

/* cards */
#packages .package-card {
  background: #071f34;
  border: 1px solid rgba(84, 205, 218, 0.22);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.75);
}
#packages .package-card img { opacity: 0.72; }
#packages .package-card:hover img { opacity: 0.82; }
#packages .package-card .pk-overlay {
  background: linear-gradient(180deg, rgba(4, 16, 28, 0.12) 24%, rgba(4, 16, 28, 0.78) 66%, rgba(3, 12, 22, 0.95) 100%) !important;
}
#packages .package-body h3 { color: #f2fbfd !important; }
#packages .package-body .pk-desc { color: #9fc0d2 !important; }
#packages .package-price {
  background: linear-gradient(96deg, #1b56b0 0%, #23a9cf 58%, #4fdcd3 100%) !important;
  color: #04121f !important; border: 0 !important;
  box-shadow: 0 14px 30px -14px rgba(35, 169, 207, 0.7) !important;
}
#packages .package-arrow {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(120, 224, 224, 0.4) !important;
  color: #cdf3f6 !important;
  backdrop-filter: blur(6px);
}
#packages .package-card:hover .package-arrow {
  background: linear-gradient(96deg, #23a9cf, #4fdcd3) !important; color: #04121f !important; border-color: transparent !important;
}


/* ============ CORR 12 — hero background (#0B7CD2 blur field on white) ============ */
.hero-v2 { background: #ffffff !important; }
.hero-v2 .hv-mesh {
  inset: -14% !important;
  background:
    radial-gradient(38% 42% at 6% 4%, rgba(11, 124, 210, 0.72), rgba(11, 124, 210, 0) 70%),
    radial-gradient(30% 34% at 48% 46%, rgba(11, 124, 210, 0.22), rgba(11, 124, 210, 0) 72%),
    radial-gradient(34% 30% at 52% 104%, rgba(11, 124, 210, 0.34), rgba(11, 124, 210, 0) 72%),
    radial-gradient(46% 46% at 88% 26%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 74%) !important;
  filter: blur(58px) !important;
  animation: hvDrift 16s ease-in-out infinite alternate;
}
@keyframes hvDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(1.6%, -1.2%, 0) scale(1.05); }
  100% { transform: translate3d(-1.4%, 1.6%, 0) scale(1.02); }
}

/* bigger visuals filling the right side, with a slow floating micro-interaction */
.hero-v2 .hv-grid { grid-template-columns: 0.86fr 1.5fr !important; align-items: center; }
.hv-anatomy { grid-template-columns: 1fr 1.05fr !important; gap: clamp(4px, 1vw, 16px) !important; }
.hv-an { height: clamp(340px, 52vw, 640px) !important; }
.hv-an img { transform-origin: 50% 60%; will-change: transform; }
.hv-an-body img { animation: hvFloatA 9s ease-in-out infinite; border-radius: 46% / 42%; }
.hv-an-lungs img { animation: hvFloatB 11s ease-in-out infinite; }
.hv-an img:hover { animation-play-state: paused; }
@keyframes hvFloatA {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-14px) scale(1.022); }
}
@keyframes hvFloatB {
  0%, 100% { transform: translateY(-6px) scale(1); }
  50%      { transform: translateY(10px) scale(1.03); }
}
@media (max-width: 900px) {
  .hero-v2 .hv-grid { grid-template-columns: 1fr !important; }
  .hv-an { height: clamp(220px, 46vw, 340px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-v2 .hv-mesh, .hv-an img { animation: none !important; }
}

/* CORR 12b — packages cards: white overlay, black text */
#packages .package-card { background: #ffffff; border-color: rgba(11, 124, 210, 0.18); }
#packages .package-card img { opacity: 0.9; }
#packages .package-card:hover img { opacity: 1; }
#packages .package-card .pk-overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0.88) 62%, rgba(255, 255, 255, 0.98) 100%) !important;
}
#packages .package-body h3 { color: #101418 !important; }
#packages .package-body .pk-desc { color: #3d4750 !important; }
#packages .package-arrow {
  background: #ffffff !important; border-color: rgba(11, 124, 210, 0.3) !important; color: #0b2c45 !important;
}


/* ============ CORR 13 — nav right-align, stronger blur field, image stethoscope ============ */
.nav-main-v3 { justify-content: flex-end !important; }

/* blur field: bigger, brighter, gentler drift; white left as breathing room */
.hero-v2 .hv-mesh {
  inset: -26% !important;
  background:
    radial-gradient(46% 48% at 4% -2%, rgba(11, 124, 210, 0.95), rgba(11, 124, 210, 0) 68%),
    radial-gradient(40% 42% at 46% 44%, rgba(11, 124, 210, 0.5), rgba(11, 124, 210, 0) 70%),
    radial-gradient(44% 38% at 54% 106%, rgba(11, 124, 210, 0.62), rgba(11, 124, 210, 0) 70%),
    radial-gradient(34% 36% at 96% 62%, rgba(11, 124, 210, 0.42), rgba(11, 124, 210, 0) 72%),
    radial-gradient(30% 32% at 78% 8%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 72%),
    radial-gradient(28% 30% at 22% 74%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%) !important;
  filter: blur(76px) saturate(1.1) !important;
  opacity: 0.95;
  animation: hvDrift 26s ease-in-out infinite alternate !important;
}
@keyframes hvDrift {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02) rotate(-1.2deg); }
  50%  { transform: translate3d(2.2%, 1.4%, 0) scale(1.09) rotate(1deg); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.05) rotate(-0.6deg); }
}

/* pointer-parallax tilt on the visual pair */
.hv-anatomy { perspective: 1100px; transform-style: preserve-3d; }
.hv-an { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.2s linear; }

/* stethoscope now a real image, same footprint, gentle pulse */
.hv-steth { width: 1.5em !important; height: 1.5em !important; left: -0.34em !important; filter: none !important; }
.hv-steth img { width: 100%; height: 100%; object-fit: contain; display: block; animation: hvSteth 5.2s ease-in-out infinite; }
.hv-line-2 { padding-left: 1.28em !important; }
@keyframes hvSteth {
  0%, 100% { transform: translateY(0) rotate(-3deg) scale(1); }
  50%      { transform: translateY(-5px) rotate(3deg) scale(1.06); }
}
@media (max-width: 760px) { .hv-line-2 { padding-left: 1.2em !important; } }
@media (prefers-reduced-motion: reduce) { .hv-steth img { animation: none; } }


/* CORR 13b — size cells from each render's aspect so both fill their box */
.hv-anatomy {
  grid-template-columns: 0.624fr 0.984fr !important;
  align-items: center;
}
.hv-an { height: clamp(340px, 50vw, 620px) !important; overflow: visible; }
.hv-an img {
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  object-fit: contain;
}
@media (max-width: 900px) { .hv-an { height: clamp(220px, 44vw, 330px) !important; } }


/* CORR 13c — stethoscope image back to the old icon footprint, inside the copy edge */
.hv-steth {
  width: 1.16em !important; height: auto !important;
  left: 0 !important; top: 50% !important;
  transform: translateY(-52%) !important;
}
.hv-steth img { height: auto; }
.hv-line-2 { padding-left: 1.02em !important; }
@media (max-width: 760px) { .hv-line-2 { padding-left: 0.98em !important; } }

/* keep the blur field on its own compositor layer (cheaper paint) */
.hero-v2 .hv-mesh { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }


/* ============ CORR 14 — hero: no pin, wider blur field, new renders ============ */
.hero-v2 { min-height: auto; padding-block: clamp(90px, 11vh, 150px) clamp(70px, 9vh, 120px); }

/* blur spread across more of the section, in irregular places */
.hero-v2 .hv-mesh {
  inset: -22% !important;
  filter: blur(78px) !important;
  background:
    radial-gradient(30% 32% at 4% 6%,   rgba(11, 124, 210, 0.82), rgba(11, 124, 210, 0) 70%),
    radial-gradient(22% 26% at 26% 84%, rgba(11, 124, 210, 0.46), rgba(11, 124, 210, 0) 72%),
    radial-gradient(18% 22% at 44% 30%, rgba(11, 124, 210, 0.34), rgba(11, 124, 210, 0) 74%),
    radial-gradient(24% 24% at 62% 96%, rgba(11, 124, 210, 0.42), rgba(11, 124, 210, 0) 72%),
    radial-gradient(20% 24% at 82% 12%, rgba(11, 124, 210, 0.40), rgba(11, 124, 210, 0) 74%),
    radial-gradient(24% 28% at 99% 62%, rgba(11, 124, 210, 0.52), rgba(11, 124, 210, 0) 72%),
    radial-gradient(26% 26% at 14% 44%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 76%),
    radial-gradient(28% 26% at 72% 52%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 76%) !important;
  animation: hvDrift 22s ease-in-out infinite alternate !important;
}
@keyframes hvDrift {
  0%   { transform: translate3d(-1%, 0.6%, 0) scale(1.01) rotate(-0.4deg); }
  50%  { transform: translate3d(1.8%, -1.4%, 0) scale(1.06) rotate(0.5deg); }
  100% { transform: translate3d(-0.6%, 1.8%, 0) scale(1.03) rotate(-0.2deg); }
}

/* the supplied renders arrive with their own backgrounds — show them whole */
.hv-anatomy { grid-template-columns: 0.72fr 1fr !important; }
.hv-an img { object-fit: contain; border-radius: 0 !important; }
.hv-an-body img { border-radius: 0 !important; }


/* CORR 14b — columns match the new renders' aspects; width-driven so art fills each cell */
.hv-anatomy { grid-template-columns: 0.624fr 0.756fr !important; align-items: center; }
.hv-an { height: auto !important; }
.hv-an img { height: auto !important; width: 100% !important; object-fit: contain; }
@media (max-width: 900px) { .hv-an { height: auto !important; } }


/* CORR 14c — stethoscope clears the E of EXPERT */
.hv-line-2 { padding-left: 1.34em !important; }
@media (max-width: 760px) { .hv-line-2 { padding-left: 1.3em !important; } }


/* ============ CORR 15 — full-vh hero, WebGL field, 48px title, larger creative ============ */
.hero-v2 {
  min-height: 100vh !important;
  display: flex; align-items: center;
  padding-block: clamp(148px, 17vh, 200px) clamp(48px, 7vh, 90px) !important;
  overflow: hidden;
}
.hv-gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: none;
}
/* the CSS mesh now only softens the shader field */
.hero-v2 .hv-mesh { opacity: 0.42 !important; filter: blur(90px) !important; z-index: 1; }
.hero-v2 .hv-grid { position: relative; z-index: 2; }

/* title capped at 48px, generous breathing room under the nav */
.hv-title { font-size: clamp(30px, 4.4vw, 48px) !important; line-height: 1.08 !important; }
.hv-line-2 { padding-left: 1.34em !important; }
.hv-copy { gap: clamp(20px, 2.6vh, 30px); }
.hv-lede { font-size: clamp(0.95rem, 1.15vw, 1.06rem) !important; max-width: 46ch; }

/* creative fills the right side */
.hero-v2 .hv-grid { grid-template-columns: 0.74fr 1.62fr !important; gap: clamp(18px, 3vw, 54px) !important; }
.hv-anatomy { grid-template-columns: 0.624fr 0.9fr !important; gap: clamp(2px, 0.8vw, 12px) !important; align-items: center; }
.hv-an img {
  width: 100% !important; height: auto !important;
  max-height: 76vh; object-fit: contain;
  transition: transform 0.7s cubic-bezier(0.22, 0.68, 0.24, 1), filter 0.5s ease;
}
.hv-an:hover img { filter: saturate(1.1) brightness(1.03); }

/* smooth transitions across hero interactive bits */
.hv-btn, .hv-btn-round, .hv-an, .hv-anatomy {
  transition: transform 0.55s cubic-bezier(0.22, 0.68, 0.24, 1), box-shadow 0.4s ease,
              background-color 0.35s ease, color 0.35s ease, opacity 0.4s ease;
}
.hv-btn:hover { transform: translateY(-2px); }
.hv-btn-round:hover { transform: translateY(-2px) rotate(8deg); }

@media (max-width: 900px) {
  .hero-v2 { min-height: auto !important; padding-block: clamp(120px, 16vh, 160px) 60px !important; }
  .hero-v2 .hv-grid { grid-template-columns: 1fr !important; }
  .hv-an img { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-an img, .hv-btn, .hv-btn-round { transition: none !important; }
}


/* ============ HERO v2 — "Hands Meet" ============ */
.hero-v2b {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(140px, 16vh, 200px) clamp(34px, 5vh, 64px);
  background: #ffffff;
}
.hv2-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; opacity: 0.5; }

/* orb — anchor for the spark and the exit bloom; sits behind the headline */
.hv2-orb {
  position: absolute; left: 50%; top: 44%;
  width: clamp(380px, 48vw, 760px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 46%,
    rgba(255, 252, 245, 0.98) 0%, rgba(255, 255, 255, 0.62) 20%,
    rgba(47, 182, 163, 0.44) 42%, rgba(46, 111, 176, 0.36) 64%, rgba(46, 111, 176, 0) 78%);
  filter: blur(24px); z-index: 1; pointer-events: none; will-change: transform;
}
.hv2-flare {
  position: absolute; left: 50%; top: 44%;
  width: clamp(240px, 28vw, 440px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(186, 242, 234, 0.75) 32%, rgba(47, 182, 163, 0) 70%);
  filter: blur(12px); z-index: 3; pointer-events: none;
}

/* hands — the band they occupy is the headline band (top 44%), never the footer row */
.hv2-hand {
  position: absolute; top: 44%; z-index: 4; pointer-events: none; will-change: transform;
  width: clamp(280px, 40vw, 640px);
}
.hv2-hand-l { left: -6%; transform: translateY(-50%); }
.hv2-hand-r { right: -6%; transform: translateY(-50%); }
.hv2-hand img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 40px rgba(18, 57, 94, 0.28));
}
/* supplied assets face the "wrong" way for their side — mirror the photo only */
.hv2-hand-l img { transform: scaleX(-1); }
.hv2-hand-r img { transform: scaleX(-1); }

.hv2-grid {
  position: relative; z-index: 5;
  display: flex; flex-direction: column;
  gap: clamp(64px, 14vh, 150px);
}
.hv2-center { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.4vh, 28px); text-align: center; }
.hv2-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: #2e6fb0; }
.hv2-title {
  margin: 0; font-family: var(--font-head); font-weight: 400;
  font-size: clamp(26px, 4.2vw, 48px); line-height: 1.1; letter-spacing: 0.01em; color: #3d3d3d;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.34em;
}
.hv2-title .hv2-sep { color: #2fb6a3; }
.hv2-cta { display: flex; align-items: center; gap: 12px; }
.hv2-btn {
  display: inline-flex; align-items: center; padding: 15px 30px; border-radius: 999px;
  background: #12395e; color: #fff; font-weight: 600; font-size: 0.92rem; text-decoration: none;
  box-shadow: 0 20px 40px -20px rgba(18, 57, 94, 0.6);
  transition: transform 0.45s cubic-bezier(0.22, 0.68, 0.24, 1), background-color 0.3s ease;
}
.hv2-btn:hover { transform: translateY(-2px); background: #16456f; }
.hv2-btn-round {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px;
  background: #fff; color: #12395e; border: 1px solid rgba(18, 57, 94, 0.18);
  box-shadow: 0 16px 32px -18px rgba(18, 57, 94, 0.45); text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.22, 0.68, 0.24, 1), background-color 0.3s ease, color 0.3s ease;
}
.hv2-btn-round:hover { transform: translateY(-2px) rotate(8deg); background: #2fb6a3; color: #04121f; border-color: transparent; }

.hv2-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 40px); }
.hv2-lede { margin: 0; max-width: 44ch; color: #3d3d3d; font-size: clamp(0.86rem, 1.05vw, 0.98rem); line-height: 1.6; text-wrap: pretty; }
.hv2-divider { width: 1px; height: 46px; background: linear-gradient(180deg, transparent, rgba(18, 57, 94, 0.34), transparent); }
.hv2-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.hv2-tag {
  padding: 8px 16px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em;
  color: #12395e; background: rgba(255, 255, 255, 0.74); border: 1px solid rgba(46, 111, 176, 0.22);
  backdrop-filter: blur(8px);
  transition: transform 0.4s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.hv2-tag:hover { transform: translateY(-2px); background: #fff; border-color: rgba(47, 182, 163, 0.5); }

/* bright light tunnel on exit */
.hv2-tunnel {
  position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f1fdfa 34%, #e3f3fb 62%, #d6eaf6 100%);
}
.hv2-streaks {
  position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1;
  transform: translate(-50%, -50%); opacity: 0.4;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(47, 182, 163, 0.26) 0deg 1.3deg, rgba(255, 255, 255, 0) 1.3deg 6.5deg),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98) 0 16%, rgba(255, 255, 255, 0) 58%);
  filter: blur(6px); will-change: transform;
}
.hv2-bokeh {
  position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1;
  transform: translate(-50%, -50%); opacity: 0;
  background:
    radial-gradient(circle at 22% 30%, rgba(47, 182, 163, 0.28) 0 3%, transparent 6%),
    radial-gradient(circle at 74% 26%, rgba(46, 111, 176, 0.22) 0 2%, transparent 5%),
    radial-gradient(circle at 66% 70%, rgba(47, 182, 163, 0.24) 0 4%, transparent 7%),
    radial-gradient(circle at 30% 74%, rgba(46, 111, 176, 0.2) 0 2.5%, transparent 5.5%),
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.9) 0 2%, transparent 4%),
    radial-gradient(circle at 84% 52%, rgba(255, 255, 255, 0.9) 0 1.6%, transparent 3.6%);
  filter: blur(10px); will-change: transform;
}
.hv2-tunnel-word {
  position: relative; z-index: 2; opacity: 0;
  font-family: var(--font-head); font-size: clamp(20px, 3vw, 38px);
  letter-spacing: 0.28em; text-transform: uppercase; color: #12395e;
}

@media (max-width: 900px) {
  .hero-v2b { padding-block: clamp(118px, 15vh, 150px) 48px; }
  .hv2-hand { width: 52vw; opacity: 0.55; top: 40%; }
  .hv2-grid { gap: 48px; }
  .hv2-foot { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hv2-divider { width: 46px; height: 1px; background: linear-gradient(90deg, transparent, rgba(18, 57, 94, 0.34), transparent); }
  .hv2-tags { justify-content: center; }
}


/* HERO v2 — short viewports: keep the hands in the headline band, clear of the foot row */
@media (max-height: 680px) and (min-width: 901px) {
  .hero-v2b { padding-block: clamp(110px, 14vh, 140px) 28px; }
  .hv2-hand { width: clamp(220px, 28vw, 380px); top: 36%; }
  .hv2-orb, .hv2-flare { top: 38%; }
  .hv2-grid { gap: clamp(36px, 7vh, 64px); }
}


/* ============ HERO v2 fixes — scrubbed join, shared centre, foot row clear of hands ============ */
.hero-v2b {
  --hv2-c: 47%;                 /* the ONE visual centre: orb core, headline, meeting point */
  min-height: 100vh; height: 100vh;
  display: block; padding: 0;
}
.hv2-grid {
  position: absolute; left: 0; right: 0; top: var(--hv2-c);
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  margin-inline: auto; z-index: 5;
}
.hv2-orb, .hv2-flare { top: var(--hv2-c); }
.hv2-orb { background: none; filter: none; }
.hv2-orb-breathe {
  position: absolute; inset: 0; border-radius: 50%; display: block;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 252, 245, 0.98) 0%, rgba(255, 255, 255, 0.64) 20%,
    rgba(47, 182, 163, 0.44) 42%, rgba(46, 111, 176, 0.36) 64%, rgba(46, 111, 176, 0) 78%);
  filter: blur(24px); will-change: transform;
}

/* hands travel through the headline band only */
.hv2-hand { top: var(--hv2-c); width: clamp(240px, 34vw, 520px); }
.hv2-hand-l { left: 0; }
.hv2-hand-r { right: 0; }
.hv2-hand-r { transform: translateY(-46%); }

/* CTA pairing: even gap, centres aligned */
.hv2-cta { gap: 16px; align-items: center; }
.hv2-btn { height: 52px; padding: 0 30px; line-height: 1; }

/* foot row pinned to the bottom, above the hands, with a soft backing for legibility */
.hv2-foot {
  position: absolute; left: 0; right: 0; bottom: clamp(26px, 4.5vh, 48px);
  margin-inline: auto; z-index: 6;
}
.hv2-lede { max-width: 42ch; }
.hv2-lede, .hv2-tags { position: relative; }
.hv2-lede::before {
  content: ""; position: absolute; inset: -10px -14px; z-index: -1; border-radius: 14px;
  background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px);
  -webkit-mask: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 100%);
  mask: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 100%);
}

@media (max-width: 900px) {
  .hero-v2b { height: auto; min-height: 100vh; }
  .hv2-grid { top: 42%; }
  .hv2-hand { width: 46vw; opacity: 0.9; }
  .hv2-foot { position: absolute; bottom: 24px; }
}
@media (max-height: 680px) and (min-width: 901px) {
  .hero-v2b { --hv2-c: 44%; }
  .hv2-hand { width: clamp(200px, 26vw, 340px); top: var(--hv2-c); }
  .hv2-orb, .hv2-flare { top: var(--hv2-c); }
}


/* HERO v2 — transforms on hands/orb/flare are GSAP-owned (inline); no stylesheet transform, never !important */
.hv2-hand-l, .hv2-hand-r, .hv2-orb, .hv2-flare { transform: none; }


/* CORR 16 — scan section: no pin, natural flow */
#scan { min-height: 0; }
.scan-grid { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 30px); }

/* CORR 16b — packages: price + CTA text in white */
#packages .package-price { color: #ffffff !important; }
#packages .btn-pill.btn-gradient { color: #ffffff !important; }
#packages .btn-pill.btn-gradient .arr { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; }

/* CORR 16c — doctor cards: full credential block from the supplied artwork */
.doctor-card3 .dc-photo { aspect-ratio: 3 / 4; }
.doctor-card3 .dc-photo img { object-fit: cover; object-position: 32% 50%; }
.dc-qual { margin-top: 2px; font-size: 0.76rem; color: #6b7f8e; }
.dc-spec { margin-top: 2px; }
.dc-years { margin-top: 4px; font-size: 0.72rem; color: #8aa0ae; letter-spacing: 0.02em; }


/* CORR 16d — doctor photo fills its frame (overrides the legacy fixed height) */
.doctor-card3 .dc-photo img {
  width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: 50% 38%;
}


/* CORR 16e — portrait photo frame + credential block with slack */
.doctor-card3 .dc-photo { aspect-ratio: 3 / 4 !important; height: auto !important; }
.doctor-card3 .dc-photo img { object-position: 50% 26%; }
.doctor-card3 { height: auto; }
.dc-info { padding-bottom: 16px; }
.dc-info h3 { line-height: 1.2; }
.dc-qual, .dc-spec, .dc-years { line-height: 1.35; }


/* CORR 17 — case cards: clinical image plate + multi-doctor credit row */
.hcs-media { aspect-ratio: auto; background: #fff; padding: 10px; display: grid; place-items: center; }
.hcs-media img { width: 100%; height: auto; max-height: 380px; object-fit: contain; }
.hcs-body { max-height: 11.5em; overflow: hidden; }
.hcs-docs { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 2px; }
.hcs-doc .who .q { display: block; color: #7b8e9c; font-size: 0.72rem; }
.hcs-doc .who span { font-size: 0.74rem; }
.hcs-doc > img { object-position: 50% 26%; }
@media (max-width: 900px) { .hcs-media img { max-height: 260px; } .hcs-body { max-height: none; } }


/* CORR 17b — deck sized to the real content: full case text, credits and CTA all inside */
.hcs-deck { height: clamp(560px, 78vh, 720px) !important; }
.hcs-card { overflow: visible; align-items: stretch; }
.hcs-copy { justify-content: center; overflow: hidden; }
.hcs-body { max-height: none !important; overflow: visible; font-size: clamp(0.8rem, 0.92vw, 0.9rem); line-height: 1.55; }
.hcs-copy h3 { font-size: clamp(1.15rem, 1.8vw, 1.6rem); }
.hcs-docs { gap: 14px; }
.hcs-doc > img { width: 38px; height: 38px; }
.hcs-media { align-self: center; }
.hcs-media img { max-height: min(600px, 62vh) !important; }
@media (max-width: 900px) {
  .hcs-deck { height: auto !important; }
  .hcs-media img { max-height: 300px !important; }
}


/* CORR 17c — no clip on the copy column; wider media column so plate labels read */
.hcs-deck { height: clamp(640px, 78vh, 760px) !important; max-width: 1400px; }
.hcs-copy { overflow: visible !important; }
.hcs-card { grid-template-columns: 0.92fr 1.18fr !important; }
@media (max-width: 900px) {
  .hcs-card { grid-template-columns: 1fr !important; }
  .hcs-deck { height: auto !important; }
}


/* CORR 17d — deck height derived from the viewport (header + gap budget), never a px floor */
.hcs-deck { height: min(760px, calc(100vh - 210px)) !important; }
@media (max-width: 900px) { .hcs-deck { height: auto !important; } }


/* CORR 17e — deck is an intrinsic-height grid stack; pin is gated on it fitting the viewport */
.hcs-deck {
  height: auto !important;
  display: grid; grid-template-areas: "stack";
  align-items: stretch;
}
.hcs-deck .hcs-card {
  position: relative !important; inset: auto !important;
  grid-area: stack; overflow: hidden;
}
.hcs-copy { overflow: visible !important; }

/* fallback when the stack cannot fit the viewport: normal flowing list */
.hcs-section.hcs-flow .hcs-deck { display: flex; flex-direction: column; gap: 28px; }
.hcs-section.hcs-flow .hcs-deck .hcs-card { grid-area: auto; transform: none !important; opacity: 1 !important; }


/* ============ CORR 18 — doctor coverflow cards (reference clone), full-bleed row ============ */
#doctors .panel { padding-inline: 0; }
#doctors .focus-row {
  width: 100vw; margin-left: calc(50% - 50vw);
  height: clamp(420px, 52vh, 520px);
}
.doc-card4 {
  width: clamp(260px, 24vw, 330px);
  background: #ffffff; border-radius: 26px; padding: 14px 14px 20px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background-color 0.45s ease;
}
.dc4-photo {
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #dbe6f4 0%, #c6d6ea 100%);
  aspect-ratio: 1 / 0.86;
}
.dc4-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.dc4-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 8px; }
.dc4-info h3 {
  margin: 0; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: #12395e; line-height: 1.2;
}
.dc4-spec { margin: 0; color: #4a7ba8; font-size: 0.86rem; font-weight: 500; }
.dc4-social { display: flex; gap: 10px; margin-top: 10px; }
.dc4-ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(18, 57, 94, 0.22); color: #12395e; background: #fff;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.dc4-ic:hover { transform: translateY(-2px); border-color: transparent; background: #2fb6a3; color: #04121f; }
.dc4-ic.primary { background: #12395e; border-color: transparent; color: #fff; }
.dc4-ic.primary:hover { background: #16456f; color: #fff; }

/* active slide: taller photo, name plate floating over the image */
.doc-card4.on { width: clamp(320px, 30vw, 420px); }
.doc-card4.on .dc4-photo { aspect-ratio: 1 / 1.12; }
.doc-card4.on { position: relative; padding-bottom: 14px; }
.doc-card4.on .dc4-info {
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  align-items: center; text-align: center; padding: 18px 16px 20px;
  background: rgba(248, 251, 254, 0.92); backdrop-filter: blur(10px);
  border-radius: 20px;
}
.doc-card4.on .dc4-social { justify-content: center; }
@media (max-width: 900px) {
  #doctors .focus-row { height: auto; width: auto; margin-left: 0; }
  .doc-card4, .doc-card4.on { width: 100%; }
  .doc-card4.on .dc4-info { position: static; background: none; box-shadow: none; padding: 0 8px; }
}


/* CORR 18b — scan rows stay 3-up and size off viewport height so the pinned stack fits */
.scan-row { grid-template-columns: repeat(3, 1fr) !important; }
/* intrinsic card layout: media band + its own title row (no absolute height) */
.scan-card {
  height: auto !important;
  display: flex; flex-direction: column;
}
.scan-card .scan-media { position: relative !important; inset: auto !important; aspect-ratio: 4 / 3; flex: 0 0 auto; }
.scan-card .scan-title { position: relative !important; inset: auto !important; padding: 14px 18px 18px; margin: 0; }

/* active coverflow slide is genuinely wider than its neighbours */
.focus-slide { width: clamp(260px, 24vw, 330px); }
.focus-slide:has(.doc-card4.on) { width: clamp(320px, 30vw, 420px); }


/* CORR 18c — card sizes to media + title: kill the square aspect lock and the media's 100% height */
.scan-card { aspect-ratio: auto !important; }
.scan-card .scan-media { height: auto !important; width: 100% !important; }
.scan-card .scan-media img { width: 100%; height: 100%; object-fit: contain; }
.scan-card .scan-title { width: auto !important; max-width: none !important; }


/* CORR 19 — doctor cards: full uncropped portrait + credential block, even spacing */
#doctors .focus-row { height: clamp(460px, 58vh, 560px); }
.focus-slide { padding-inline: 10px; }
.doc-card4 { padding: 16px 16px 22px; gap: 16px; }
.dc4-photo { aspect-ratio: 750 / 600; background: #eef5fb; }
.dc4-photo img { object-fit: contain !important; object-position: 50% 50% !important; }
.dc4-info { gap: 6px; padding: 0 6px; }
.dc4-qual { margin: 0; color: #6b8398; font-size: 0.78rem; line-height: 1.35; }
.dc4-years {
  display: inline-flex; align-items: center; margin-top: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(47, 182, 163, 0.12); border: 1px solid rgba(47, 182, 163, 0.28);
  color: #0e6f6a; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
}
.doc-card4.on .dc4-info {
  left: 18px; right: 18px; bottom: 18px;
  padding: 16px 18px 18px; gap: 5px;
}
.doc-card4.on .dc4-years { margin-top: 8px; }


/* CORR 19b — active card uses the artwork's own ratio (no letterbox) and a static info block */
.doc-card4.on .dc4-photo { aspect-ratio: 750 / 600 !important; }
.doc-card4.on { position: relative; padding-bottom: 22px; }
.doc-card4.on .dc4-info {
  position: static !important; background: none !important; box-shadow: none !important;
  backdrop-filter: none !important; padding: 0 6px !important; align-items: flex-start; text-align: left;
}






.scan-cta { cursor: default; }


/* CORR 21 — remove the strip behind the title row (media block owned its own backing) */
.scan-card .scan-media { background: transparent !important; }
.scan-card .scan-title { background: transparent !important; box-shadow: none !important; }


/* CORR 22 — scan cards square again, title floating over the art (no separate row) */
.scan-card { aspect-ratio: 1 / 1 !important; display: block !important; position: relative; }
.scan-card .scan-media { position: absolute !important; inset: 0 !important; aspect-ratio: auto !important; height: auto !important; }
.scan-card .scan-title {
  position: absolute !important; right: 18px !important; bottom: 16px !important;
  left: auto !important; width: auto !important; max-width: 12ch !important; padding: 0 !important;
  background: none !important; box-shadow: none !important;
}



/* ============ HERO v3 — collage → Dharan mark (mask-only, sticky pin) ============ */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-v3 {
  --mkp: 4200%; --rw: 100vw; --rh: 100vh; --ix: 0%; --iy: 0%;
  position: relative; height: 400vh; background: #ffffff;
  font-family: var(--font-body);
}
.h3-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; }

/* the BOX is the letterbox rect; the mark masks it as a % of the box, so the two
   always share one scale and converge to an exact fit at the end of the morph */
.h3-mask, .h3-stroke {
  position: absolute; left: 50%; top: 50%;
  width: var(--rw); height: var(--rh);
  transform: translate(-50%, -50%);
  overflow: hidden;
  -webkit-mask-image: url("/__l5e/assets-v1/29390e4e-c56d-43a0-95b1-24bf33265d93/dharan-mark-mask.png"); mask-image: url("/__l5e/assets-v1/29390e4e-c56d-43a0-95b1-24bf33265d93/dharan-mark-mask.png");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: var(--mkp); mask-size: var(--mkp);
  will-change: width, height, mask-size, -webkit-mask-size;
}
.h3-stroke {
  z-index: 0; opacity: 0; background: #3AAFA9;
  width: calc(var(--rw) + 3px); height: calc(var(--rh) + 3px);
}
.h3-mask { z-index: 1; }
.h3-img {
  position: absolute; left: 50%; top: 50%; display: block;
  width: 100vw; height: 100vh; object-fit: cover; object-position: 52% 42%;
  transform: translate(calc(-50% + var(--ix)), calc(-50% + var(--iy)));
  will-change: transform;
}

.h3-copy { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; place-items: center; }
.h3-row {
  display: grid; width: 100%;
  grid-template-columns: 1fr clamp(200px, 22vw, 340px) 1fr;
  column-gap: 4vw; align-items: center;
}
.h3-word {
  font-weight: 600; font-size: clamp(40px, 5.2vw, 84px); letter-spacing: -0.02em; line-height: 1;
  color: #C8D3DD; white-space: nowrap; will-change: transform, opacity;
}
.h3-word-l { justify-self: end; }
.h3-word-r { justify-self: start; }

.h3-sub {
  position: absolute; left: 0; right: 0; z-index: 2; margin: 0;
  top: calc(50% + clamp(120px, 13vw, 200px));
  text-align: center; font-size: 18px; font-weight: 400; color: #4A5B6B;
}
.h3-ctas {
  position: absolute; left: 0; right: 0; z-index: 2;
  top: calc(50% + clamp(170px, 16vw, 250px));
  display: flex; justify-content: center; gap: 12px;
}
.h3-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 0.94rem; text-decoration: none;
  transition: transform 0.35s ease, background-color 0.3s ease, color 0.3s ease;
}
.h3-btn:hover { transform: translateY(-2px); }
.h3-btn.solid { background: #1F6FB2; color: #fff; }
.h3-btn.outline { border: 1.5px solid #1F6FB2; color: #1F6FB2; background: #fff; }
.h3-red { width: 8px; height: 8px; border-radius: 999px; background: #e03131; box-shadow: 0 0 0 4px rgba(224, 49, 49, 0.18); }

.h3-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; animation: h3Bounce 1.6s ease-in-out infinite; }
.h3-cue svg { filter: drop-shadow(0 1px 2px rgba(11, 31, 51, 0.7)) drop-shadow(0 0 10px rgba(11, 31, 51, 0.45)); }
@keyframes h3Bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

@media (max-width: 767px) {
  .hero-v3 { height: 250vh; }
  .h3-row { grid-template-columns: 1fr; row-gap: 14px; justify-items: center; }
  .h3-word-l, .h3-word-r { justify-self: center; x: 0; }
  .h3-word { font-size: clamp(34px, 9vw, 48px); }
  .h3-sub { top: auto; bottom: 130px; }
  .h3-ctas { top: auto; bottom: 60px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .h3-cue { animation: none; opacity: 0; } }


/* CORR 23 — doctor names larger, semibold, brand navy */
.dc4-info h3 {
  font-size: clamp(1.25rem, 1.85vw, 1.6rem) !important;
  font-weight: 600 !important;
  color: #12395e !important;
  letter-spacing: -0.01em;
}
.doc-card4.on .dc4-info h3 { font-size: clamp(1.4rem, 2.1vw, 1.85rem) !important; }


/* final composition sits higher so the bar has clear air below it */
.h3-mask, .h3-stroke { top: 44% !important; }
.h3-copy { align-items: center; padding-bottom: 12vh; }
.h3-sub { top: calc(44% + clamp(120px, 13vw, 200px)); }
.h3-ctas { top: calc(44% + clamp(170px, 16vw, 250px)); }

.h3-bar {
  position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  width: min(1180px, 88vw); z-index: 5;
  will-change: transform, opacity;
}
.appt {
  background: #FFFFFF; border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(11, 31, 51, 0.18), 0 2px 6px rgba(11, 31, 51, 0.06);
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr auto;
  align-items: center; height: var(--bar-h); padding: 0 12px 0 28px;
  font-family: var(--font-body);
}
.appt-cell {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 0 18px 0 0; min-width: 0; cursor: text;
}
.appt-cell + .appt-cell { padding-left: 18px; }
.appt-cell + .appt-cell::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 56px; background: #E6EDF3; transition: background-color 0.25s ease;
}
.appt-cell:focus-within + .appt-cell::before,
.appt-cell:focus-within:last-of-type::after { background: #1F6FB2; }
.appt-ic { display: grid; place-items: center; color: #1F6FB2; flex: 0 0 auto; }
.appt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.appt-label { font-size: 13px; font-weight: 600; color: #0B1F33; transition: color 0.25s ease; }
.appt-cell:focus-within .appt-label { color: #1F6FB2; }
.appt-cell input, .appt-cell select {
  border: 0; background: none; outline: none; padding: 0; margin: 0; width: 100%;
  font-family: inherit; font-size: 15px; font-weight: 400; color: #0B1F33;
  appearance: none; -webkit-appearance: none;
}
.appt-cell input::placeholder { color: #6B7C8C; }
.appt-cell select:invalid { color: #6B7C8C; }
.appt-chev { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: #6B7C8C; pointer-events: none; }
.appt-cell.has-chev { padding-right: 28px; }

.appt-submit {
  height: 64px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #1F6FB2, #0B3A5E); color: #fff;
  font-family: inherit; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; gap: 10px; justify-self: end;
  box-shadow: 0 14px 30px -14px rgba(11, 58, 94, 0.55);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.appt-submit:hover { transform: translateY(-1px); box-shadow: 0 22px 44px -16px rgba(11, 58, 94, 0.6); }
.appt-done { grid-column: 1 / -1; margin: 0; text-align: center; font-weight: 600; color: #1F6FB2; }

/* the section after the hero clears the overlapping half */
#scan { padding-top: calc(var(--bar-h, 96px) / 2 + 80px); }

@media (min-width: 768px) and (max-width: 1199px) {
  .hero-v3 { --bar-h: auto; }
  .appt { grid-template-columns: repeat(3, 1fr); height: auto; padding: 20px 24px; gap: 18px 0; }
  .appt-submit { grid-column: 3; justify-self: stretch; }
  .appt-cell:nth-of-type(4) { grid-column: 1 / 3; }
  .appt-cell + .appt-cell::before { height: 40px; }
}
@media (max-width: 767px) {
  .hero-v3 { --bar-h: auto; }
  .h3-bar { width: 92vw; transform: translate(-50%, 24px); }
  .appt { grid-template-columns: 1fr; height: auto; padding: 8px 20px 20px; }
  .appt-cell { padding: 14px 0 !important; }
  .appt-cell + .appt-cell::before { left: 0; right: 0; top: 0; width: auto; height: 1px; transform: none; }
  .appt-submit { justify-self: stretch; width: 100%; justify-content: center; margin-top: 12px; }
  #scan { padding-top: 104px; }
}


/* copy block is bounded so the CTAs always finish above the bar */
.h3-copy { padding-bottom: 0; }
.h3-sub { top: auto; bottom: calc(var(--bar-space) + 66px); }
.h3-ctas { top: auto; bottom: var(--bar-space); }

@media (max-height: 760px) {
  .h3-mask, .h3-stroke { top: 40% !important; }
  .hero-v3 { --bar-space: 130px; }
  .h3-sub { bottom: calc(var(--bar-space) + 56px); font-size: 16px; }
}
@media (min-width: 768px) and (max-width: 1199px) { .hero-v3 { --bar-space: 210px; } }

/* next section clears the overlapping half (variable declared where it is used) */
#scan { padding-top: 128px !important; }
@media (max-width: 767px) { #scan { padding-top: 104px !important; } }


/* HERO v3 — State A geometry: CSS centres, GSAP only scales; box centre is animated */
.hero-v3 { --cy: 50%; }
.h3-mask, .h3-stroke { top: var(--cy) !important; }
.h3-imgwrap {
  position: absolute; left: 50%; top: 50%;
  width: 100vw; height: 100vh;
  transform: translate(calc(-50% + var(--ix)), calc(-50% + var(--iy)));
  will-change: transform;
}
.h3-pin .h3-img {
  position: absolute; inset: 0; left: 0; top: 0;
  width: 100vw !important; height: 100vh !important;
  max-width: none !important; min-width: 100vw;
  transform: none;
  object-fit: cover; object-position: 52% 42%;
  will-change: transform;
}
@media (max-height: 760px) { .h3-mask, .h3-stroke { top: var(--cy) !important; } }


/* HERO v3 — ONE layout system: the copy stack is a flex column sharing the mark's
   centre (--cy), with a square mark-sized spacer, so nothing can overlap by construction */
.h3-copy {
  position: absolute !important; inset: auto 0 auto 0 !important;
  top: var(--cy) !important;
  /* shift up by half the ROW height only (= the mark spacer), so the row's centre
     lands on --cy exactly like .h3-mask; sub + CTAs then flow below the mark */
  transform: translateY(calc(clamp(200px, 22vw, 340px) / -2));
  display: flex !important; flex-direction: column; align-items: center;
  gap: clamp(14px, 2.2vh, 26px); padding: 0 !important;
  z-index: 2; pointer-events: none;
}
.h3-gap { height: clamp(200px, 22vw, 340px); }
.h3-sub, .h3-ctas {
  position: static !important; top: auto !important; bottom: auto !important;
  width: auto; margin: 0;
}
.h3-ctas { pointer-events: auto; }
@media (max-width: 767px) {
  .h3-copy { top: 50% !important; transform: translateY(calc(clamp(180px, 46vw, 300px) / -2)); }
  .h3-gap { height: clamp(180px, 46vw, 300px); }
}


/* CORR 24 — package price sits under the copy, larger (wireframe alignment) */
#packages .package-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
#packages .package-price {
  position: static !important; inset: auto !important;
  margin-top: 12px;
  padding: 12px 26px !important;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem) !important;
  font-weight: 600 !important; letter-spacing: 0.01em;
  border-radius: 999px;
}
#packages .package-card img { object-fit: cover; object-position: 50% 40%; }


/* ============ HERO v3 — original appointment card, repositioned only ============ */
.h3-appt {
  position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  width: min(1200px, 88vw); z-index: 5;
}
.h3-appt-in { will-change: transform, opacity; }
.h3-appt .instant-card { transform: none !important; margin: 0 !important; }

/* the section after the hero clears the overhanging half */
#scan { padding-top: calc(var(--appt-h, 240px) / 2 + 80px) !important; }

/* headline stack finishes above the card */
.hero-v3 { --cy: 44%; }
@media (max-width: 1023px) and (min-width: 768px) {
  .h3-appt .instant-form { grid-template-columns: 1fr 1fr; }
  .h3-appt .instant-form .btn-pill { grid-column: 1 / -1; justify-content: center; }
  .h3-appt .instant-card { padding: 24px; }
}
@media (max-width: 767px) {
  .h3-appt { width: 92vw; transform: translate(-50%, 24px); }
  .h3-appt .instant-card { padding: 20px; }
  .h3-appt .instant-form { grid-template-columns: 1fr; }
  #scan { padding-top: 120px !important; }
}


/* HERO v3 — the copy band is bounded by the card, so the stack can never reach it */
.hero-v3 { --band-bottom: calc(var(--appt-h, 335px) / 2 + 80px); --cy: 50%; }
.h3-pin { --band-h: calc(100vh - var(--band-bottom)); }
/* mark + copy share the centre of the REMAINING band, not of the viewport */
.h3-mask, .h3-stroke, .h3-copy { top: calc(var(--band-h) / 2) !important; }
/* mark spacer scales with viewport height too, so the stack always fits the band */
.h3-gap { height: min(clamp(200px, 22vw, 340px), 26vh) !important; }
.h3-copy { gap: clamp(10px, 1.8vh, 24px) !important; }
.h3-word { font-size: min(clamp(40px, 5.2vw, 84px), 9vh); }
.h3-sub { font-size: clamp(15px, 1.9vh, 18px); }

/* State A must stay dead-centre full-bleed: only the shrinking box follows the band */
.h3-imgwrap { top: 50% !important; }

@media (max-width: 767px) {
  .hero-v3 { --band-bottom: 24px; }
  .h3-gap { height: min(clamp(180px, 46vw, 300px), 30vh) !important; }
}


/* HERO v3 — box centre is animated (viewport centre at State A → band centre after the morph);
   only the copy stack is statically pinned to the band centre */
.hero-v3 { --band-cy: calc((100vh - var(--band-bottom)) / 2); --boxcy: 50vh; }
.h3-mask, .h3-stroke { top: var(--boxcy) !important; }
.h3-copy { top: var(--band-cy) !important; }
@media (prefers-reduced-motion: reduce) { .h3-mask, .h3-stroke { top: var(--band-cy) !important; } }


/* CORR 27 — copy spacer matches the real mark box, so sub + CTAs clear the mark */
.h3-gap {
  width: clamp(200px, 22vw, 340px) !important;
  height: clamp(200px, 22vw, 340px) !important;
  flex: 0 0 auto;
}
.h3-row { grid-template-columns: 1fr clamp(200px, 22vw, 340px) 1fr !important; }
.h3-copy { gap: clamp(20px, 3vh, 34px) !important; }
.h3-sub { margin-top: 4px !important; }
.h3-ctas { align-items: center; gap: 14px !important; }
@media (max-width: 767px) {
  .h3-gap { width: auto !important; height: clamp(180px, 46vw, 300px) !important; }
}


/* CORR 28 — pinned two-step reveal: GPU hints only, no layout animation */
.scan-card, .scan-head-reveal, .scan-cta { will-change: transform, opacity; }


/* ============ ABOUT v2 — inline-image zoom + pinned reveal ============ */
.about-zoom { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: #0A0F16; }
.about-zoom.is-static { height: auto; min-height: 0; }
.az-stage { position: absolute; inset: 0; overflow: hidden; }
.about-zoom.is-static .az-stage { position: relative; }

.az-orbits { position: absolute; inset: 0; pointer-events: none; }
.az-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, 0.12);
}
.az-ring.r1 { width: 62vmax; height: 62vmax; }
.az-ring.r2 { width: 88vmax; height: 88vmax; }
.az-ring.r3 { width: 118vmax; height: 118vmax; border-color: rgba(255, 255, 255, 0.07); }
.az-dot {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: #2FB6A3; box-shadow: 0 0 0 10px rgba(47, 182, 163, 0.14);
}
.az-dot.d1 { left: calc(50% - 31vmax * 0.87); top: calc(50% - 31vmax * 0.5); }
.az-dot.d2 { left: calc(50% + 44vmax * 0.86); top: calc(50% - 44vmax * 0.5); }
.az-dot.d3 { left: calc(50% - 44vmax * 0.8); top: calc(50% + 44vmax * 0.6); }

.az-hero {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 3vh, 30px); text-align: center; padding: 0 6vw;
  will-change: transform, opacity;
}
.about-zoom.is-static .az-hero { position: relative; padding: 120px 6vw 80px; }
.az-hero > * { will-change: transform, opacity; }
.az-eyebrow {
  display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22); color: #E9EEF3;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
}
.az-title {
  margin: 0; color: #fff; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(56px, 9.2vw, 150px); line-height: 1.02; letter-spacing: -0.02em;
  display: flex; flex-direction: column; align-items: center; gap: 0.06em;
}
.az-line { display: inline-flex; align-items: center; gap: 0.26em; }
.az-accent { color: #1F6FB2; }
.az-slot {
  display: inline-block; width: clamp(150px, 22vw, 330px); height: 0.78em;
  border-radius: 18px; overflow: hidden; flex: 0 0 auto;
}
.az-slot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; opacity: 0; }
.about-zoom.is-static .az-slot img { opacity: 1; }
.az-lead {
  margin: 0; max-width: 62ch; color: #8E98A3;
  font-family: var(--font-body); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55;
}

.az-pic {
  position: absolute; z-index: 3; overflow: hidden; border-radius: 18px;
  will-change: transform, opacity; pointer-events: none;
}
.az-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.about-zoom.is-static .az-pic { display: none; }

.az-body {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none;
}
.about-zoom.is-static .az-body { position: relative; padding: 0 0 100px; }
.az-body .az-grid { position: static; opacity: 1; pointer-events: auto; }
.az-body .as-body > * { opacity: 1; }
.az-body [data-az] { display: block; will-change: transform, opacity; }
.az-body .eyebrow[data-az] { display: inline-flex; }
.az-body .as-left h2 { color: #fff; }
.az-body .as-right p { color: #B3BCC6; }
.az-body .as-points li { color: #E9EEF3; }
.az-body .phone-chip { color: #E9EEF3; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04); }
.az-body .phone-chip .ic { color: #fff; }

@media (max-width: 767px) {
  .az-title { font-size: clamp(40px, 13vw, 64px); }
  .az-slot { width: clamp(96px, 30vw, 160px); border-radius: 12px; }
  .az-lead { font-size: 15px; }
  .az-dot { width: 14px; height: 14px; box-shadow: 0 0 0 7px rgba(47, 182, 163, 0.14); }
}


/* ============ ABOUT v2 corrections ============ */
.about-zoom { background: #0E2842 !important; }

/* 2 — inline video, taller */
.az-slot { height: 1.02em !important; width: clamp(180px, 26vw, 400px) !important; }
.az-slot video, .az-pic video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.az-slot video { opacity: 0; }
.about-zoom.is-static .az-slot video { opacity: 1; }
.az-slot img, .az-pic img { display: none; }

/* 3 — breathable content */
.az-hero { gap: clamp(26px, 4.2vh, 44px) !important; padding: 0 8vw !important; }
.az-lead { line-height: 1.75 !important; max-width: 58ch !important; }
.az-body { padding: 0 8vw; }
.az-body .az-grid { gap: clamp(40px, 6vw, 96px) !important; max-width: 1180px; }
.az-body .as-left h2 { margin-top: 26px !important; line-height: 1.18 !important; }
.az-body .as-cta-row { margin-top: 40px !important; gap: 18px !important; }
.az-body .as-right p { line-height: 1.85 !important; max-width: 52ch; font-size: clamp(15px, 1.1vw, 17px); }
.az-body .as-points { margin-top: 40px !important; gap: 26px 40px !important; }
.az-body .as-points li { line-height: 1.5; gap: 14px; }

/* 4 — living orbits */
.az-orbits { will-change: transform; }
.az-ring { will-change: transform, opacity; animation: azPulse 3.6s ease-in-out infinite; }
.az-ring.r1 { animation-delay: 0s; }
.az-ring.r2 { animation-delay: -1.2s; animation-duration: 4.2s; }
.az-ring.r3 { animation-delay: -2.4s; animation-duration: 4.8s; }
@keyframes azPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.03); opacity: 1; }
}
.az-orbit { position: absolute; inset: 0; will-change: transform; animation: azOrbit linear infinite; }
.az-orbit.o1 { animation-duration: 48s; }
.az-orbit.o2 { animation-duration: 72s; animation-direction: reverse; }
.az-orbit.o3 { animation-duration: 96s; }
@keyframes azOrbit { to { transform: rotate(360deg); } }
.az-dot {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%; background: #2FB6A3;
  box-shadow: 0 0 0 10px rgba(47, 182, 163, 0.14), 0 0 24px rgba(47, 182, 163, 0.55);
  will-change: transform, opacity; animation: azGlow 3s ease-in-out infinite;
}
.az-orbit.o2 .az-dot { animation-delay: -1s; }
.az-orbit.o3 .az-dot { animation-delay: -2s; }
@keyframes azGlow {
  0%, 100% { opacity: 0.75; box-shadow: 0 0 0 8px rgba(47, 182, 163, 0.12), 0 0 16px rgba(47, 182, 163, 0.4); }
  50% { opacity: 1; box-shadow: 0 0 0 12px rgba(47, 182, 163, 0.18), 0 0 30px rgba(47, 182, 163, 0.7); }
}
.az-dot.d1, .az-dot.d2, .az-dot.d3 { display: none; }
@media (prefers-reduced-motion: reduce) {
  .az-ring, .az-orbit, .az-dot { animation: none !important; }
}


/* until the supplied clip lands, the poster must be visible in the slot */
.az-slot video { opacity: 1 !important; background: #0E2842 url("/__l5e/assets-v1/b78ec89a-3b57-4985-89ba-97077d954082/hero-1.webp") center 40% / cover no-repeat; }
.az-pic video { background: #0E2842 url("/__l5e/assets-v1/b78ec89a-3b57-4985-89ba-97077d954082/hero-1.webp") center 40% / cover no-repeat; }


/* ABOUT v2 — reveal end-state fixes at the cause */
.az-body .as-left .eyebrow[data-az] { display: inline-flex !important; }
.az-body .az-grid.container { width: 100% !important; max-width: 1180px !important; min-width: 0; }


/* ============ HERO v4 — particle reveal ============ */
.hero-v4 {
  --bg-top: #E4F1F7; --bg-bottom: #CFE6F0; --ink: #0B1F33; --ink-soft: #4A5B6B; --brand: #1F6FB2;
  position: relative; height: 300vh; background: var(--bg-top);
  font-family: var(--font-body);
}
.hero-v4.is-static { height: 200vh; }
.h4-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; }
.h4-bg { position: absolute; inset: 0; --ang: 160deg; --bgb: #CFE6F0; background: linear-gradient(var(--ang), var(--bg-top), var(--bgb)); }
.h4-bodybase, .h4-bodywrap, .h4-bodypar { position: absolute; inset: 0; will-change: transform, opacity; }
.h4-bodywrap {
  --mr: 140%; transform-origin: 50% 88%;
  -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 calc(var(--mr) * 0.5), transparent calc(var(--mr) * 0.5 + 30%));
  mask-image: radial-gradient(circle at 50% 55%, #000 calc(var(--mr) * 0.5), transparent calc(var(--mr) * 0.5 + 30%));
}
.h4-body {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; object-position: 50% 50%; transform-origin: 50% 88%; will-change: transform, opacity, clip-path; display: block;
}
.h4-scanwrap { position: absolute; left: 0; right: 0; top: 42vh; height: 1px; overflow: hidden; pointer-events: none; opacity: 0.15; }
.h4-scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #3AAFA9 40%, #3AAFA9 60%, transparent); will-change: transform; }
.h4-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; will-change: transform; z-index: 2; }

.h4-copy {
  position: absolute; left: 8vw; top: 50%; transform: translateY(-50%); z-index: 3;
  max-width: min(520px, 30vw); display: flex; flex-direction: column; gap: 22px; will-change: transform, opacity;
}
.h4-eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.h4-title { margin: 0; font-weight: 600; font-size: clamp(48px, 6vw, 96px); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); }
.h4-title .w { display: inline-block; will-change: transform, opacity; }
.h4-title .w--accent { color: var(--brand); }
.h4-sub { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }
.h4-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.h4-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px;
  font-weight: 600; font-size: 15px; text-decoration: none; will-change: transform, opacity;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.h4-btn:hover { transform: translateY(-2px); }
.h4-btn.solid { background: var(--brand); color: #fff; box-shadow: 0 14px 30px -14px rgba(31, 111, 178, 0.6); }
.h4-btn.ghost { border: 1.5px solid var(--brand); color: var(--brand); background: rgba(255, 255, 255, 0.5); }
.h4-red { width: 8px; height: 8px; border-radius: 999px; background: #e03131; box-shadow: 0 0 0 4px rgba(224, 49, 49, 0.18); }

.h4-copy2 { position: absolute; left: 8vw; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 22px; max-width: 520px; pointer-events: none; }
.h4-vert {
  position: absolute; left: calc(4vw - 8vw); top: 50%; transform: translate(-50%, -50%) rotate(-90deg);
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.h4-copy2 h2 { margin: 0; font-weight: 600; font-size: clamp(32px, 3.6vw, 56px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.h4-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.h4-pill {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(31, 111, 178, 0.18); color: var(--ink); font-weight: 600; font-size: 14px;
  backdrop-filter: blur(6px);
}
.h4-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; animation: h3Bounce 1.6s ease-in-out infinite; }

.h4-appt { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); width: min(1200px, 88vw); z-index: 5; }
.h4-appt-in { will-change: transform, opacity; }

@media (max-width: 1023px) {
  .h4-bodybase { transform: translateY(8vh) scale(0.85); transform-origin: 50% 88%; }
  .h4-copy, .h4-copy2 { left: 50%; top: 9vh; transform: translateX(-50%); align-items: center; text-align: center; max-width: 88vw; }
  .h4-title { font-size: clamp(40px, 8vw, 72px); }
  .h4-vert { display: none; }
}
@media (max-width: 767px) {
  .hero-v4 { height: 220vh; }
  .h4-appt { width: 92vw; transform: translate(-50%, 24px); }
}
@media (prefers-reduced-motion: reduce) { .h4-cue { animation: none; opacity: 0; } }


/* HERO v4 <1024 — copy ABOVE the figure; image stays at cover scale (no exposed edges) */
@media (max-width: 1023px) {
  .h4-bodybase { transform: none; }
  .h4-body { object-position: 50% 50%; }

  .h4-copy, .h4-copy2 { top: 7vh; gap: 14px; }
  .h4-title { font-size: clamp(36px, 7vw, 60px); }
  .h4-sub { font-size: 15px; max-width: 46ch; }
  .h4-btn { height: 46px; padding: 0 20px; font-size: 14px; }
}


/* HERO v4 — word gaps via flex gap (whitespace is not preserved between .w spans) */
.h4-title { display: flex; flex-direction: column; }
.h4-line { display: flex; gap: 0.22em; }
@media (max-width: 1023px) {
  .h4-title { align-items: center; }
  .h4-line { justify-content: center; }

}


/* ============ ABOUT v3 — grow-in-place, no eyebrows, airy ============ */
.about-zoom { background: #0E2842 !important; }
.az-eyebrow, .az-pic, .az-body .eyebrow { display: none !important; }
.az-slot {
  height: 1.05em !important; width: clamp(190px, 27vw, 420px) !important;
  border-radius: 20px; will-change: transform; transform-origin: 50% 50%; position: relative; z-index: 1;
}
.az-slot video { opacity: 1 !important; visibility: visible !important; }
.az-hero { gap: clamp(30px, 5vh, 52px) !important; padding: 0 8vw !important; }
.az-title { position: relative; z-index: 1; }
.az-lead { line-height: 1.8 !important; max-width: 56ch !important; }

.az-body { padding: 0 9vw; }
.az-body .az-grid.container { width: 100% !important; max-width: 1180px !important; gap: clamp(48px, 7vw, 110px) !important; }
.az-body .as-left h2 { margin-top: 0 !important; line-height: 1.2 !important; }
.az-body .as-cta-row { margin-top: 44px !important; gap: 18px !important; }
.az-body .as-right p { line-height: 1.9 !important; max-width: 50ch; font-size: clamp(15px, 1.1vw, 17px); }
.az-body .as-points { margin-top: 44px !important; gap: 30px 44px !important; }
.az-body .as-points li { line-height: 1.7 !important; gap: 14px; }
@media (max-width: 767px) {
  .az-slot { width: clamp(110px, 32vw, 180px) !important; height: 0.95em !important; border-radius: 14px; }
}


/* ABOUT v3 — full-bleed grow: slot may scale past its line box */
.az-hero, .az-title, .az-line { overflow: visible !important; }
.az-slot { z-index: 3 !important; }
.az-slot video { border-radius: inherit; }


/* ABOUT — feature points: more vertical room between rows */
.az-body .as-points { display: flex !important; flex-direction: column !important; gap: 22px !important; }
.az-body .as-points li { line-height: 1.6 !important; padding: 2px 0; }


/* ABOUT — CTA row spacing, title scale, two extra orbit rings */
.az-body .as-cta-row[data-az] { display: flex !important; gap: 24px !important; }
.az-body .as-cta-row > * { margin: 0 !important; }
.az-body .as-left h2 { font-size: 56px !important; font-weight: 600 !important; letter-spacing: -0.02em; line-height: 1.1 !important; max-width: none; }
.az-ring.r4 { width: 40vmax; height: 40vmax; border-color: rgba(255, 255, 255, 0.16); animation-delay: -0.6s; animation-duration: 3.2s; }
.az-ring.r5 { width: 150vmax; height: 150vmax; border-color: rgba(255, 255, 255, 0.05); animation-delay: -3s; animation-duration: 5.4s; }
.az-orbit.o4 { animation-duration: 36s; animation-direction: reverse; }
.az-orbit.o5 { animation-duration: 120s; }


/* ============ PACKAGES — dealt-stack scroll (same mechanic as Happening) ============ */
.pkgs-section {
  position: relative;
  padding: clamp(40px, 6vh, 80px) 0 clamp(30px, 5vh, 60px) !important;
  overflow: hidden;
}
.pkgs-section .pkgs-head { margin-bottom: clamp(22px, 3.4vh, 40px); }
.pkgs-stage { position: relative; padding: 0 clamp(16px, 3.4vw, 48px); }
.pkgs-deck {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-areas: "stack"; align-items: stretch;
}
.pkgs-card {
  grid-area: stack;
  will-change: transform, opacity;
  transform-origin: 50% 100%;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(3, 18, 32, 0.42);
  height: min(520px, calc(100vh - 300px));
}
.pkgs-card .package-card { width: 100%; height: 100%; border-radius: 26px; }
.pkgs-section.pkgs-flow .pkgs-deck { display: flex; flex-direction: column; gap: 26px; }
.pkgs-section.pkgs-flow .pkgs-card { grid-area: auto; transform: none !important; opacity: 1 !important; height: 420px; }
@media (max-width: 900px) {
  .pkgs-deck { display: flex !important; flex-direction: column; gap: 22px; }
  .pkgs-card { grid-area: auto; transform: none !important; opacity: 1 !important; height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .pkgs-deck { display: flex !important; flex-direction: column; gap: 22px; }
  .pkgs-card { grid-area: auto; transform: none !important; opacity: 1 !important; height: 340px; }
}


/* ============ HAPPENING — static carousel (chevrons + dots) ============ */
.hcs-carousel .hcs-viewport { overflow: hidden; max-width: 1400px; margin: 0 auto; }
.hcs-carousel .hcs-rail {
  display: flex;
  will-change: transform;
  transition: transform 0.62s cubic-bezier(0.22, 0.61, 0.24, 1);
}
.hcs-carousel .hcs-slide { flex: 0 0 100%; min-width: 100%; padding: 6px 4px 10px; }
.hcs-carousel .hcs-slide .hcs-card {
  position: relative !important; inset: auto !important;
  grid-area: auto !important; transform: none !important; opacity: 1 !important;
  height: 100%;
}
.hcs-carousel .hcs-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; margin-top: clamp(18px, 2.6vh, 30px);
}
.hcs-carousel .hcs-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(10, 41, 66, 0.16);
  background: #fff; color: #0a2942; cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.hcs-carousel .hcs-arrow:hover {
  background: #0a2942; color: #fff; border-color: #0a2942; transform: translateY(-2px);
}
.hcs-carousel .hcs-arrow svg { width: 18px; height: 18px; }
.hcs-carousel .hcs-dots { display: flex; align-items: center; gap: 10px; }
.hcs-carousel .hcs-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(10, 41, 66, 0.22); cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}
.hcs-carousel .hcs-dot.is-on { width: 26px; border-radius: 999px; background: #12a3c4; }
@media (prefers-reduced-motion: reduce) {
  .hcs-carousel .hcs-rail { transition: none; }
}


/* ============ HERO V5 — scroll-scrubbed video hero ============ */
.hero-v5 {
  position: relative;
  height: 400vh;
  background: #eaf4fa;
  padding-bottom: calc(var(--appt-h, 150px) / 2);
}
.hero-v5.is-static { height: auto; }
.h5-pin {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
  background: #eaf4fa;
}
@media (min-width: 1024px) {
  .h5-media { position: absolute; inset: 0; }
  .h5-copy { position: absolute; inset: 0; }
}
.hero-v5.is-static .h5-pin { position: relative; }
.h5-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.h5-copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(90px, 13vh, 150px) clamp(20px, 5vw, 80px) clamp(48px, 9vh, 96px);
  pointer-events: none;
}
.h5-copy a { pointer-events: auto; }
.h5-headline {
  display: grid;
  grid-template-columns: 1fr minmax(160px, 30vw) 1fr;
  align-items: baseline;
  gap: 0;
}
.h5-h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #0e2842;
  white-space: nowrap;
}
.h5-h--l { text-align: left; }
.h5-h--r { text-align: right; }
.h5-h > span {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.h5-h--l > span { transform: translate3d(-40px, 0, 0); }
.h5-h--r > span { transform: translate3d(40px, 0, 0); }
.hero-v5.is-revealed .h5-h > span { opacity: 1; transform: translate3d(0, 0, 0); }

.h5-foot { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.h5-sub {
  margin: 0; text-align: center;
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  color: #5b7285;
  opacity: 0; transform: translate3d(0, 24px, 0);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.14s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.14s;
}
.h5-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.h5-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  font-size: 0.98rem; font-weight: 500; text-decoration: none;
  opacity: 0; transform: translate3d(0, 24px, 0);
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, color 0.25s ease;
}
.h5-btn.solid { background: #12a3c4; color: #fff; }
.h5-btn.solid:hover { background: #0e2842; color: #fff; }
.h5-btn.ghost { border: 1px solid rgba(14, 40, 66, 0.22); color: #0e2842; background: rgba(255, 255, 255, 0.72); }
.h5-btn.ghost:hover { border-color: #0e2842; background: #fff; }
.h5-red { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.16); }
.hero-v5.is-revealed .h5-sub { opacity: 1; transform: translate3d(0, 0, 0); }
.hero-v5.is-revealed .h5-btn.solid { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0.3s; }
.hero-v5.is-revealed .h5-btn.ghost { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .h5-h > span, .h5-sub, .h5-btn { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* hero v5 — nav slides down only after the pin releases */
.nav.v3 { transition: transform 0.56s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease; }
body:has(.hero-v5:not(.is-static)) .nav-scrim { opacity: 0; transition: opacity 0.4s ease; }
body:has(.hero-v5:not(.is-static)) .nav.v3:not(.hidden) ~ .nav-scrim,
body:has(.hero-v5:not(.is-static)) .nav.v3.scrolled ~ .nav-scrim { opacity: 1; }

/* hero v5 — headline block centred (flanking halves hug the body) */
.h5-copy { justify-content: center !important; gap: clamp(28px, 6vh, 64px); }
.h5-headline {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  grid-template-columns: 1fr minmax(120px, 22vw) 1fr !important;
  justify-items: center;
}
.h5-h--l { justify-self: end; text-align: right; }
.h5-h--r { justify-self: start; text-align: left; }
.h5-foot { margin-top: auto; }

/* hero v5 — headline symmetric around the body, seated lower */
.h5-copy { justify-content: flex-start !important; padding-top: clamp(180px, 30vh, 340px) !important; }
.h5-headline {
  display: flex !important;
  justify-content: center;
  align-items: baseline;
  gap: clamp(150px, 26vw, 420px);
  max-width: none;
}
.h5-gap { display: none; }
.h5-h { flex: 0 0 auto; }
.h5-h--l, .h5-h--r { justify-self: auto; }
.h5-h--l { text-align: right; }
.h5-h--r { text-align: left; }

/* ============ HERO V5 — mobile layout fix ============ */
.h5-pin { height: 100vh; height: 100dvh; }
@supports (height: 100svh) { .h5-pin { height: 100svh; } }
.h5-video { object-position: center; }


/* hero v5 — TRUE symmetry: the centre gap is the centred track, not the row */
.h5-headline {
  display: grid !important;
  grid-template-columns: 1fr clamp(150px, 26vw, 420px) 1fr !important;
  align-items: baseline !important;
  gap: 0 !important;
  width: 100%;
  max-width: none;
}
.h5-gap { display: block !important; }
.h5-h--l { justify-self: end !important; text-align: right !important; padding-right: 0; }
.h5-h--r { justify-self: start !important; text-align: left !important; padding-left: 0; }

/* ============ HERO V5 — appointment card must not appear mid-scrub ============ */
.hero-v5 { z-index: 2; }
.h5-pin { z-index: 1; }
/* card lives at the very bottom of the tall wrapper AND stays invisible until the
   headline has revealed, so nothing shows over the particle phase */
.hero-v5 .h4-appt {
  z-index: 6;
  opacity: 0;
  transform: translate(-50%, 50%) translateY(28px);
  pointer-events: none;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.45s,
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}
.hero-v5.is-revealed .h4-appt {
  opacity: 1;
  transform: translate(-50%, 50%);
  pointer-events: auto;
}
/* the section after the hero must never ride over it */
.hero-v5 + .section, .hero-v5 + section {
  position: relative;
  z-index: 1;
  margin-top: 0;
  background: #fff;
}


/* ============ HERO V5 — mobile: single-screen static hero ============ */



/* ============ HAPPENING — wireframe order: doctors row → title → body → CTA ============ */
.hcs-carousel .hcs-copy { gap: 0; justify-content: center; }
.hcs-carousel .hcs-docs {
  display: flex !important; flex-wrap: nowrap !important;
  align-items: flex-start; gap: clamp(14px, 2.2vw, 32px);
  width: 100%; margin: 0 0 clamp(26px, 3.4vh, 40px);
  overflow: visible;
}
.hcs-carousel .hcs-doc {
  flex: 1 1 0; min-width: 0; max-width: 200px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0;
}
.hcs-carousel .hcs-doc > img {
  width: clamp(64px, 6.2vw, 96px) !important; height: clamp(64px, 6.2vw, 96px) !important;
  border: 3px solid #fff; box-shadow: 0 10px 24px -10px rgba(11, 43, 69, 0.55);
}
.hcs-carousel .hcs-doc .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hcs-carousel .hcs-doc .who b { font-size: clamp(0.78rem, 0.95vw, 0.95rem); line-height: 1.25; }
.hcs-carousel .hcs-doc .who .q { font-size: clamp(0.64rem, 0.74vw, 0.74rem); line-height: 1.3; }
.hcs-carousel .hcs-doc .who span:not(.q) { font-size: clamp(0.66rem, 0.76vw, 0.76rem); line-height: 1.3; color: #5b7080; }
.hcs-carousel .hcs-docs[data-count="1"] .hcs-doc { flex: 0 1 auto; max-width: 260px; }
.hcs-carousel .hcs-copy h3 { font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: 1.18; margin: 0 0 18px; }
.hcs-carousel .hcs-body { margin: 0 0 clamp(22px, 3vh, 32px); color: #4b6070; line-height: 1.7; }
.hcs-carousel .hcs-cta { margin: 0; }
@media (max-width: 900px) {
  .hcs-carousel .hcs-docs { gap: 12px; overflow-x: auto; scrollbar-width: none; margin-bottom: 22px; }
  .hcs-carousel .hcs-docs::-webkit-scrollbar { display: none; }
  .hcs-carousel .hcs-doc { flex: 1 0 auto; min-width: 120px; max-width: 160px; }
  .hcs-carousel .hcs-doc > img { width: 56px !important; height: 56px !important; }
  .hcs-carousel .hcs-docs[data-count="1"] .hcs-doc { min-width: 0; }
}


/* ============ FOOTER — specialties in two columns; tagline tucked under logo ============ */
.footer-brand { justify-content: flex-start !important; gap: 0; }
.footer-brand .tag { margin: 4px 0 28px; }
.footer-cols {
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 28px;
}
.footer-cols > .foot-col:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.footer-cols > .foot-col:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.footer-cols > .foot-col:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
.footer-cols > .foot-col:nth-child(4) { grid-area: 1 / 4 / 2 / 5; }
.foot-two-col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
@media (max-width: 1024px) {
  .footer-cols { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .footer-cols > .foot-col:nth-child(1),
  .footer-cols > .foot-col:nth-child(2),
  .footer-cols > .foot-col:nth-child(3),
  .footer-cols > .foot-col:nth-child(4) { grid-area: auto; }
  .foot-col--wide { grid-column: 1 / -1; }
}


/* ============ DEPARTMENTS — falling-card deck (hinge on bottom edge) ============ */
.dept-fall { min-height: 100vh !important; align-items: flex-start !important; padding: clamp(28px, 5vh, 56px) 0 clamp(20px, 4vh, 40px) !important; }
.dept-fall .dept-layout { align-items: start; grid-template-columns: 0.82fr 1.25fr; }
.dept-fall .dept-left { align-items: center; text-align: center; padding-top: clamp(6px, 1.5vh, 20px); }
.dept-fall .dept-left .section-title { text-align: center; }
.dept-fall .dept-ctas, .dept-fall .view-more-group { justify-content: center; }
.dept-active {
  display: flex; align-items: baseline; gap: 14px; justify-content: center;
  font-family: var(--font-head); color: var(--navy);
  will-change: transform, opacity;
}
.dept-active .da-num { font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.5rem); color: #12a3c4; letter-spacing: 0.06em; }
.dept-active .da-name { font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 600; line-height: 1.15; text-wrap: balance; }
.dept-fall .dept-stage { perspective: 1400px; perspective-origin: 50% 40%; padding-top: clamp(40px, 7vh, 90px); }
.dept-fall .dept-cards {
  transform-style: preserve-3d;
  height: min(calc(100vh - 200px), 700px);
  border-radius: 28px;
}
.dept-fall .dept-slide {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  box-shadow: 0 44px 90px -30px rgba(6, 20, 40, 0.75), 0 12px 24px -12px rgba(6, 20, 40, 0.5);
}
.dept-fall .dept-card .d-body h3 { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.dept-fall .dept-card .d-body p { font-size: clamp(0.9rem, 1.05vw, 1.02rem); }
@media (max-width: 900px) {
  .dept-fall .dept-layout { grid-template-columns: 1fr; }
  .dept-fall .dept-stage { padding-top: 24px; }
  .dept-fall .dept-cards { height: 56vh; }
}


/* ============ DEPARTMENTS — title top-center, stage full width below ============ */
.dept-fall .dept-layout { grid-template-columns: 1fr !important; gap: clamp(18px, 3vh, 32px); width: min(1200px, 92%); }
.dept-fall .dept-left { width: 100%; align-items: center; gap: clamp(18px, 2.4vh, 28px); padding-top: 0; }
.dept-fall .dept-left .section-title { text-align: center; max-width: 24ch; }
.dept-fall .dept-stage { padding-top: clamp(20px, 4vh, 48px); max-width: 1040px; margin: 0 auto; width: 100%; }
.dept-fall .dept-cards { height: min(calc(100vh - 330px), 560px); }
@media (max-width: 900px) {
  .dept-fall .dept-cards { height: 50vh; }
}


/* ============ DOCTORS v5 — photo-top cards, floating focal panel, micro-animations ============ */
.doc-card5 {
  --e: cubic-bezier(0.22, 1, 0.36, 1);
  padding: 12px 12px 18px !important; gap: 14px !important;
  border-radius: 26px; background: #fff;
  transition: transform 0.32s var(--e);
  will-change: transform;
}
.doc-card5 .dc4-photo {
  aspect-ratio: 938 / 1090 !important; border-radius: 20px; overflow: hidden; background: #d9eef4;
}
.doc-card5 .dc4-photo img {
  width: 100%; height: 100%;
  object-fit: cover !important; object-position: 50% 0% !important;
  transition: transform 0.35s var(--e); will-change: transform;
}
.doc-card5 .dc4-info {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 2px 6px 0; text-align: left;
  border-radius: 18px;
  transition: background 0.3s var(--e), box-shadow 0.3s var(--e);
}
.doc-card5 .dc4-info h3 { margin: 0; color: var(--navy); font-weight: 700; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.25; }
.doc-card5 .dc4-spec { margin: 0; color: #12a3c4; font-weight: 600; font-size: 0.86rem; }
.doc-card5 .dc4-qual { margin: 0; color: #6a7f90; font-size: 0.78rem; }
.doc-card5 .dc4-years {
  display: inline-block; margin-top: 8px; padding: 5px 12px; border-radius: 999px;
  background: #e2f6ee; color: #0e6f6a; font-size: 0.72rem; font-weight: 600;
  transition: transform 0.3s var(--e);
}
/* hover: lift, photo zoom, panel tint, pill pulse */
.doc-card5:hover { transform: translateY(-6px); }
.doc-card5:hover .dc4-photo img { transform: scale(1.05); }
.doc-card5:hover .dc4-info { background: rgba(18, 163, 196, 0.07); box-shadow: inset 0 0 0 1px rgba(18, 163, 196, 0.16); }
.doc-card5:hover .dc4-years { animation: doc5Pulse 0.45s var(--e) 1; }
@keyframes doc5Pulse { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* focal card: floating frosted panel overlapping the photo */
.doc-card5.on { position: relative; padding-bottom: 12px !important; }
.doc-card5.on .dc4-photo { aspect-ratio: 938 / 1090 !important; }
.doc-card5.on .dc4-info {
  position: absolute !important; left: 22px; right: 22px; bottom: 22px;
  align-items: center; text-align: center; padding: 16px 16px 18px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
  animation: doc5PanelIn 0.6s var(--e) both;
}
.doc-card5.on .dc4-info h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem) !important; }
.doc-card5.on .dc4-spec { font-size: 0.95rem; }
.doc-card5.on .dc4-info > * { animation: doc5Rise 0.5s var(--e) both; }
.doc-card5.on .dc4-info > :nth-child(1) { animation-delay: 0.14s; }
.doc-card5.on .dc4-info > :nth-child(2) { animation-delay: 0.23s; }
.doc-card5.on .dc4-info > :nth-child(3) { animation-delay: 0.32s; }
.doc-card5.on .dc4-info > :nth-child(4) { animation-delay: 0.41s; }
.doc-card5.on:hover .dc4-info { background: rgba(255, 255, 255, 0.94) !important; }
@keyframes doc5PanelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes doc5Rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* focal glide */
.doc5-row .focus-slide { transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.7s cubic-bezier(0.45, 0, 0.2, 1); will-change: transform, opacity; }
/* section entry cascade */
.doc5-row .doc-card5 { --e: cubic-bezier(0.22, 1, 0.36, 1); opacity: 0; }
.doc5-row.shown .doc-card5 { animation: doc5Rise 0.6s var(--e) both; animation-delay: calc(var(--i, 0) * 100ms + 120ms); }
.doc5-row.shown .doc-card5:hover { animation: none; opacity: 1; }
/* 5th doctor: old artwork carries a baked caption — crop it out until a matching portrait arrives */
.doc-card5 .dc4-photo img[src*="vijayakumar"] { object-position: 50% 12% !important; transform: scale(1.18); }
.doc-card5:hover .dc4-photo img[src*="vijayakumar"] { transform: scale(1.24); }
/* chevrons */
#doctors .cc-btn { transition: transform 0.2s var(--e), background 0.2s var(--e), color 0.2s var(--e), box-shadow 0.2s var(--e); }
#doctors .cc-btn:hover { transform: none; background: var(--gradient-primary); color: #fff; }
#doctors .cc-btn svg { transition: transform 0.2s var(--e); }
#doctors .cc-btn:first-child:hover svg { transform: translateX(-3px); }
#doctors .cc-btn:last-child:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .doc-card5, .doc-card5 *, .doc5-row .focus-slide { animation: none !important; transition: none !important; }
}


/* ============ PACKAGES — bento grid ============ */
.bento-section, #packages.bento-section { background: #f3f7fb !important; }
.bento-section .panel { background: transparent !important; }
.bento-wrap { max-width: 1240px; }
.bento-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  --bento-bg: #f3f7fb;
  --bento-r: 24px;
}
.bento-tile {
  position: relative; border-radius: var(--bento-r); overflow: hidden;
  background: #fff; min-width: 0;
  box-shadow: 0 10px 30px -22px rgba(11, 43, 69, 0.45);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.bento-tile:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -26px rgba(11, 43, 69, 0.5); }
.bento-img { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.bento-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.bento-tile:hover .bento-img img { transform: scale(1.04); }

/* hero tile */
.bento-hero { grid-column: 1; grid-row: 1 / span 2; min-height: clamp(420px, 56vh, 640px); background: #dfeaf3; }
.bento-hero .bento-img img { object-position: 60% 50%; }
.bento-notch {
  position: absolute; top: 0; left: 0; z-index: 3;
  max-width: min(72%, 560px);
  padding: 0 28px 22px 0;
  background: var(--bento-bg);
  border-bottom-right-radius: var(--bento-r);
}
.bento-notch::before, .bento-notch::after {
  content: ""; position: absolute; width: var(--bento-r); height: var(--bento-r);
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--bento-r) - 0.5px), var(--bento-bg) var(--bento-r));
}
.bento-notch::before { top: 0; right: calc(-1 * var(--bento-r)); }
.bento-notch::after { bottom: calc(-1 * var(--bento-r)); left: 0; }
.bento-title { margin: 0; text-align: left; font-size: clamp(1.7rem, 2.9vw, 2.6rem); line-height: 1.08; text-wrap: balance; }
.bento-sub { margin: 12px 0 0; color: #51606e; font-size: clamp(0.88rem, 1vw, 0.98rem); max-width: 42ch; }
.bento-stat {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 22px; margin: 0;
  background: #fff; border-top-right-radius: var(--bento-r);
  font-weight: 600; color: var(--navy); font-size: 0.95rem;
  will-change: transform;
}
.bento-stat::before, .bento-stat::after {
  content: ""; position: absolute; width: var(--bento-r); height: var(--bento-r);
  background: radial-gradient(circle at 100% 0%, transparent calc(var(--bento-r) - 0.5px), #fff var(--bento-r));
}
.bento-stat::before { top: calc(-1 * var(--bento-r)); left: 0; }
.bento-stat::after { bottom: 0; right: calc(-1 * var(--bento-r)); }
.bento-stat:hover { animation: bentoPulse 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes bentoPulse { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
.bento-badge { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; }
.bento-cta {
  position: absolute; right: 22px; bottom: 22px; z-index: 3;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 24px; border-radius: 999px;
  background: #fff; color: var(--navy); font-weight: 600; font-size: 0.98rem;
  box-shadow: 0 12px 26px -16px rgba(11, 43, 69, 0.5);
  transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.bento-cta:hover { box-shadow: 0 20px 36px -16px rgba(11, 43, 69, 0.6); transform: translateY(-1px); }
.bento-cta-arr {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green, #5ff58a); color: #05261a;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.bento-cta-arr svg { width: 18px; height: 18px; transform: rotate(-45deg); }
.bento-cta:hover .bento-cta-arr { transform: rotate(45deg) translate(1px, -1px); }

/* trust tile */
.bento-trust { grid-column: 2; grid-row: 1; background: linear-gradient(160deg, #eef4f9, #d8e6f1); min-height: 240px; }
.bento-trust-text {
  position: absolute; left: 26px; bottom: 26px; z-index: 3; margin: 0;
  font-family: var(--font-head); font-size: clamp(1.3rem, 1.9vw, 1.8rem); line-height: 1.12; color: var(--navy);
}
.bento-trust-img { left: 42%; }
.bento-trust-img img { object-position: 50% 0%; }
.bento-trust-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #e3ecf4 0%, rgba(227, 236, 244, 0) 40%); }

/* metric tile */
.bento-metric { grid-column: 2; grid-row: 2; background: linear-gradient(150deg, #2b6aa8 0%, #1e4f85 55%, #163f6e 100%); color: #fff; min-height: 240px; }
.bento-metric-img { right: 50%; opacity: 0.45; mix-blend-mode: screen; }
.bento-metric-img img { object-fit: contain; object-position: 30% 50%; padding: 18px; }
.bento-metric-num { position: absolute; right: 26px; top: 26px; z-index: 3; text-align: right; display: flex; flex-direction: column; }
.bento-metric-num b { font-family: var(--font-head); font-weight: 500; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1; }
.bento-metric-num span { font-size: clamp(1.1rem, 1.6vw, 1.5rem); color: rgba(255, 255, 255, 0.86); margin-top: 2px; }
.bento-metric-label { position: absolute; right: 26px; bottom: 24px; z-index: 3; margin: 0; text-align: right; font-size: clamp(0.95rem, 1.15vw, 1.1rem); line-height: 1.3; color: rgba(255, 255, 255, 0.92); }

/* package tiles row */
.bento-pkg { grid-column: span 1; min-height: 250px; background: #fff; }
.bento-grid .bento-pkg:nth-of-type(4), .bento-grid .bento-pkg:nth-of-type(5), .bento-grid .bento-pkg:nth-of-type(6) { grid-row: 3; }
.bento-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto; }
.bento-hero { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.bento-trust { grid-column: 5 / span 2; grid-row: 1; }
.bento-metric { grid-column: 5 / span 2; grid-row: 2; }
.bento-pkg { grid-column: span 2; }
.bento-pkg-veil { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.9) 66%, #fff 100%); }
.bento-price {
  position: absolute; top: 16px; right: 16px; left: auto; z-index: 3;
  padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 0.86rem; color: #fff;
  background: linear-gradient(96deg, #1b56b0 0%, #23a9cf 58%, #4fdcd3 100%);
  box-shadow: 0 12px 26px -14px rgba(35, 169, 207, 0.7);
}
.bento-pkg-body { position: absolute; left: 20px; right: 70px; bottom: 18px; z-index: 3; }
.bento-pkg-body h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; color: var(--navy); margin: 0; }
.bento-pkg-body p { font-size: 0.8rem; color: #51606e; margin: 4px 0 0; }
.bento-pkg-arr {
  position: absolute; right: 18px; bottom: 18px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--navy); border: 1px solid rgba(11, 43, 69, 0.14);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s, color 0.3s;
}
.bento-pkg-arr svg { width: 16px; height: 16px; }
.bento-pkg:hover .bento-pkg-arr { transform: rotate(-45deg); background: var(--navy); color: #fff; }

/* cascade entry */
.bento-section .bento-tile { opacity: 0; transform: translateY(30px); }
.bento-section.is-in .bento-tile {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 120ms), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 120ms), box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.bento-section.is-in .bento-tile:hover { transform: translateY(-6px); transition-delay: 0s; }

@media (max-width: 1024px) {
  .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-hero { grid-column: 1 / -1; grid-row: 1; min-height: 460px; }
  .bento-trust { grid-column: 1; grid-row: 2; }
  .bento-metric { grid-column: 2; grid-row: 2; }
  .bento-pkg { grid-column: span 1; grid-row: auto !important; }
  .bento-grid .bento-pkg:last-of-type { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-hero, .bento-trust, .bento-metric, .bento-pkg { grid-column: 1 !important; grid-row: auto !important; }
  .bento-hero { min-height: 380px; display: flex; flex-direction: column; }
  .bento-notch { position: relative; max-width: none; padding: 0 0 18px; background: transparent; border-radius: 0; margin-bottom: 14px; }
  .bento-notch::before, .bento-notch::after { display: none; }
  .bento-hero .bento-img { position: relative; height: 300px; margin-top: auto; border-radius: 20px; }
  .bento-hero { background: transparent; box-shadow: none; overflow: visible; }
  .bento-stat { bottom: 0; left: 0; }
  .bento-cta { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bento-section .bento-tile { opacity: 1; transform: none; transition: none; }
  .bento-tile:hover, .bento-section.is-in .bento-tile:hover { transform: none; }
  .bento-tile:hover .bento-img img { transform: none; }
  .bento-stat:hover { animation: none; }
}


/* bento fixes — accent word + soft metric art */
.bento-trust-text .hl { color: #12a3c4; -webkit-text-fill-color: #12a3c4; }
.bento-metric-img { right: 46%; opacity: 0.55; mix-blend-mode: normal; }
.bento-metric-img img {
  object-fit: contain; object-position: 40% 55%; padding: 22px 10px 22px 18px;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 45% 50%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 75% at 45% 50%, #000 50%, transparent 100%);
  filter: saturate(0.6) brightness(1.15);
}


/* doctors carousel — full-bleed row so outer cards clip at the viewport edge */
#doctors .doc5-row { width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); overflow: hidden; }
#doctors .doc5-row .focus-slide { transform-origin: center center; }
@media (max-width: 900px) { #doctors .doc5-row { width: 100%; margin-left: 0; transform: none; } }

/* focal emphasis comes from scale only — equal layout width keeps gaps constant */
#doctors .doc5-row .doc-card5 { width: 100%; }


/* uniform slide slot — focal emphasis from scale only, so cumulative offsets hold */
#doctors .doc5-row .focus-slide,
#doctors .doc5-row .focus-slide:has(.doc-card4.on) { width: clamp(260px, 24vw, 330px) !important; padding-inline: 0 !important; }

.bento-notch .bento-title { color: #0e2842 !important; -webkit-text-fill-color: #0e2842 !important; background: none !important; }
.bento-notch .bento-title .hl { color: #12a3c4 !important; -webkit-text-fill-color: #12a3c4 !important; }

/* doctors carousel — one constant rendered gap, symmetric, edge-bleed */
#doctors .focus-row { padding-inline: 0; }
#doctors .doc5-row .focus-slide { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
@media (max-width: 900px) { #doctors .doc5-row .focus-slide { width: clamp(210px, 62vw, 280px) !important; } }

/* doctors carousel — uniform 24px gaps, layered active card, edge bleed */
#doctors .doc5-row { --card-gap: 24px; padding-inline: 0; max-width: none; }
#doctors .doc5-row .focus-slide { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), z-index 0s linear 0.45s; }
@media (max-width: 900px) { #doctors .doc5-row { --card-gap: 18px; } }

/* bento package-only grid */
.bento-grid-pkgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento-grid-pkgs .bento-pkg { grid-column: span 1; min-height: 340px; }
@media (max-width: 1024px) {
  .bento-grid-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-grid-pkgs .bento-pkg { grid-column: span 1 !important; grid-row: auto !important; }
  .bento-grid-pkgs .bento-pkg:last-of-type { grid-column: 1 / -1 !important; }
}
@media (max-width: 640px) {
  .bento-grid-pkgs { grid-template-columns: 1fr; }
  .bento-grid-pkgs .bento-pkg { grid-column: 1 !important; grid-row: auto !important; }
}

/* bento packages — feature + stacked layout (larger cards) */
.bento-grid-feature {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(260px, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch;
}
.bento-grid-feature .bento-pkg { grid-column: 3 !important; grid-row: auto !important; min-height: 300px !important; }
.bento-grid-feature .bento-pkg-feature {
  grid-column: 1 / 3 !important;
  grid-row: 1 / 3 !important;
  min-height: 622px !important;
}
.bento-grid-feature .bento-pkg-feature .bento-pkg-body { left: 32px; right: 96px; bottom: 28px; }
.bento-grid-feature .bento-pkg-feature .bento-pkg-body h3 { font-size: 1.6rem; line-height: 1.2; }
.bento-grid-feature .bento-pkg-feature .bento-pkg-body p { font-size: 0.95rem; margin-top: 8px; }
.bento-grid-feature .bento-pkg-feature .bento-price { font-size: 1.05rem; padding: 12px 20px; }
.bento-grid-feature .bento-pkg-feature .bento-pkg-arr { width: 56px; height: 56px; right: 28px; bottom: 28px; }
.bento-grid-feature .bento-pkg-feature .bento-pkg-arr svg { width: 20px; height: 20px; }
@media (max-width: 1024px) {
  .bento-grid-feature { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: auto !important; }
  .bento-grid-feature .bento-pkg { grid-column: auto !important; min-height: 320px !important; }
  .bento-grid-feature .bento-pkg-feature { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 460px !important; }
}
@media (max-width: 640px) {
  .bento-grid-feature { grid-template-columns: 1fr !important; }
  .bento-grid-feature .bento-pkg { grid-column: 1 !important; }
  .bento-grid-feature .bento-pkg-feature { min-height: 400px !important; }
  .bento-grid-feature .bento-pkg-feature .bento-pkg-body h3 { font-size: 1.3rem; }
}

/* ============ 2026-09 refinements ============ */

/* Departments title on a single line */
.dept-fall .dept-left .section-title,
.dept-left .section-title {
  max-width: none !important;
  white-space: nowrap;
  font-size: clamp(1.5rem, 2.9vw, 2.9rem);
}
@media (max-width: 900px) {
  .dept-fall .dept-left .section-title,
  .dept-left .section-title { white-space: normal; font-size: clamp(1.8rem, 6vw, 2.4rem); }
}

/* ---- Bento checkup cards: bigger, lighter veil ---- */
.bento-wrap { max-width: 1440px !important; width: min(1440px, 94vw) !important; }
.bento-section { padding-block: clamp(48px, 6vh, 80px) !important; }
.bento-section .bento-grid-feature .bento-tile {
  opacity: 1;
  transform: none;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.bento-grid-feature { gap: 26px !important; grid-template-rows: repeat(2, minmax(320px, 1fr)) !important; }
.bento-grid-feature .bento-pkg { min-height: 360px !important; }
.bento-grid-feature .bento-pkg-feature { min-height: 746px !important; }
.bento-grid-feature .bento-pkg-veil {
  background: linear-gradient(180deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.55) 74%, rgba(255,255,255,0.9) 100%) !important;
}
.bento-grid-feature .bento-pkg-body h3 { font-size: 1.18rem; }
.bento-grid-feature .bento-pkg-feature .bento-pkg-body h3 { font-size: 1.85rem; }
@media (max-width: 1024px) {
  .bento-grid-feature .bento-pkg-feature { min-height: 520px !important; }
  .bento-grid-feature .bento-pkg { min-height: 340px !important; }
}

/* ---- Footer: 100px side spacing, wider link columns ---- */
.footer > .container {
  width: 100% !important;
  max-width: none !important;
  padding-inline: 100px;
}
.footer-top { grid-template-columns: 0.95fr 2.6fr !important; gap: clamp(36px, 6vw, 96px) !important; }
.footer-brand .tag { max-width: 30ch; }
.footer-cols {
  grid-template-columns: 1.9fr 1fr 1fr 1fr !important;
  grid-template-rows: auto !important;
  gap: clamp(24px, 3vw, 48px) !important;
}
.footer-cols > .foot-col:nth-child(1) { grid-area: 1 / 1 / 2 / 2 !important; }
.footer-cols > .foot-col:nth-child(2) { grid-area: 1 / 2 / 2 / 3 !important; }
.footer-cols > .foot-col:nth-child(3) { grid-area: 1 / 3 / 2 / 4 !important; }
.footer-cols > .foot-col:nth-child(4) { grid-area: 1 / 4 / 2 / 5 !important; }
.foot-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 32px !important;
  align-items: start;
}
@media (max-width: 1280px) {
  .footer > .container { padding-inline: 56px; }
}
@media (max-width: 1080px) {
  .footer > .container { padding-inline: 28px; }
  .footer-top { grid-template-columns: 1fr !important; }
  .footer-cols { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; }
  .footer-cols > .foot-col:nth-child(1),
  .footer-cols > .foot-col:nth-child(2),
  .footer-cols > .foot-col:nth-child(3),
  .footer-cols > .foot-col:nth-child(4) { grid-area: auto !important; }
  .foot-col--wide { grid-column: 1 / -1 !important; }
  .foot-two-col { grid-auto-flow: row; grid-template-rows: auto; }
}

/* ============ 2026-09-05 tweaks ============ */

/* bento section heading */
.bento-head { text-align: center; margin-bottom: clamp(12px, 1.8vh, 22px); }
.bento-head .section-title { max-width: 20ch; margin-inline: auto; }
.bento-sub { margin-top: 6px; color: #51606e; font-size: clamp(0.98rem, 1.15vw, 1.12rem); max-width: 62ch; margin-inline: auto; }

/* bigger, pulsing price labels on all checkup cards */
.bento-grid-feature .bento-price {
  font-size: 1.15rem;
  padding: 12px 22px;
  animation: pricePulse 2.2s ease-in-out infinite;
  transform-origin: center center;
}
.bento-grid-feature .bento-pkg-feature .bento-price { font-size: 1.22rem; padding: 14px 26px; }
@media (max-width: 640px) {
  .bento-grid-feature .bento-price { font-size: 0.98rem; padding: 10px 16px; }
  .bento-grid-feature .bento-pkg-feature .bento-price { font-size: 1.05rem; padding: 12px 20px; }
}
@keyframes pricePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 12px 26px -14px rgba(35, 169, 207, 0.7); }
  50% { transform: scale(1.07); box-shadow: 0 18px 38px -12px rgba(35, 169, 207, 0.9); }
}

/* tighter gap between the case carousel and the appointment CTA */
.hcs-section { padding-bottom: clamp(8px, 1.4vh, 20px) !important; }
#appointment { padding-top: clamp(8px, 1.6vh, 24px) !important; }

/* bigger department cards */
.dept-fall .dept-stage { max-width: 1240px !important; }
.dept-fall .dept-cards { height: min(calc(100vh - 250px), 680px) !important; }
@media (max-width: 900px) { .dept-fall .dept-cards { height: 58vh !important; } }

/* doctor carousel: equal card heights (focal card included) */
#doctors .doc5-row .doc-card5 {
  display: flex; flex-direction: column;
  height: clamp(430px, 34vw, 520px);
}
#doctors .doc5-row .doc-card5 .dc4-photo {
  aspect-ratio: auto !important; flex: 1 1 auto; min-height: 0;
}
@media (max-width: 900px) {
  #doctors .doc5-row .doc-card5 { height: clamp(340px, 74vw, 420px); }
}

/* ============================================================
   DESIGN SYSTEM — unified spacing rhythm (audit pass)
   Tokens derived from the master reference section (.sec-head block)
   Only spacing/typographic rhythm; no colors, layout or animation changes.
   ============================================================ */
:root {
  --ds-section-y: clamp(4.9rem, 7vw, 6.4rem);   /* section top/bottom padding */
  --ds-eyebrow-gap: 14px;                        /* eyebrow -> title */
  --ds-title-gap: 14px;                          /* title -> description */
  --ds-head-gap: clamp(2rem, 4vw, 3rem);         /* description -> main content */
  --ds-head-gap-tight: clamp(1.25rem, 2.2vw, 1.75rem);
  --ds-grid-gap: clamp(20px, 2.2vw, 26px);       /* card / grid gaps */
  --ds-inline-gap: 14px;                         /* buttons & inline elements */
  --ds-cta-gap: 26px;                            /* content -> CTA row */
  --ds-measure: 62ch;                            /* description width */
}

/* --- 1. Section padding rhythm (pinned/scroll-driven sections keep their own) --- */
.section:not(.pkg-pin):not(.dept-pin):not(.hstack-section):not(.bento-section):not(.hcs-section) {
  padding-block: var(--ds-section-y) !important;
}

/* --- 2. Content container alignment --- */
.section > .panel > .container,
.section > .panel > .section-pad > .container { width: min(1200px, 92vw); margin-inline: auto; }

/* --- 3. H2 heading style + eyebrow/title/description rhythm --- */
.sec-head .section-title,
.hcs-head .section-title,
.bento-head .section-title,
.as-left .section-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.dept-left .section-title { margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.1; }

.eyebrow + .section-title,
.eyebrow + h2 { margin-top: var(--ds-eyebrow-gap) !important; }

.section-intro,
.hcs-sub,
.bento-sub,
.dept-sub {
  margin-top: var(--ds-title-gap) !important;
  font-size: clamp(1rem, 1.05vw, 1.08rem);
  line-height: 1.65;
  max-width: var(--ds-measure);
}
.hcs-head .section-intro,
.hcs-sub,
.bento-sub { margin-inline: auto; }

/* --- 4. Description -> main content --- */
.sec-head { margin-bottom: var(--ds-head-gap) !important; gap: var(--ds-head-gap-tight) !important; }
.hcs-head { margin-bottom: var(--ds-head-gap) !important; gap: 0 !important; }
.bento-head { margin-bottom: var(--ds-head-gap-tight) !important; }
.pkg-intro .sec-head { margin: 0 !important; }

/* --- 5. Card & grid gaps --- */
.scan-grid, .scan-row, .dep-grid, .packages-grid, .happening-layout, .doctors-row {
  gap: var(--ds-grid-gap) !important;
}

/* --- 6. Buttons & inline element spacing --- */
.hero-cta-row, .intro-cta-row, .dna-cta-row, .view-all-row {
  gap: var(--ds-inline-gap) !important;
  margin-top: var(--ds-cta-gap) !important;
}
.sec-head > .btn-pill, .hcs-head > .btn-pill, .bento-head > .btn-pill { margin-top: var(--ds-inline-gap) !important; }
.pkg-intro .sec-head > .btn-pill { margin-top: var(--ds-cta-gap) !important; }

/* --- 7. Tablet / mobile rhythm --- */
@media (max-width: 1024px) {
  :root {
    --ds-section-y: clamp(3.6rem, 6.4vw, 5rem);
    --ds-head-gap: clamp(1.6rem, 3.6vw, 2.4rem);
    --ds-grid-gap: 20px;
    --ds-cta-gap: 22px;
  }
}
@media (max-width: 640px) {
  :root {
    --ds-section-y: 3rem;
    --ds-head-gap: 1.5rem;
    --ds-head-gap-tight: 1.1rem;
    --ds-grid-gap: 16px;
    --ds-inline-gap: 12px;
    --ds-cta-gap: 20px;
    --ds-measure: 40ch;
  }
  .sec-head .section-title,
  .hcs-head .section-title,
  .bento-head .section-title,
  .as-left .section-title { font-size: clamp(1.75rem, 7vw, 2.2rem); }
}

/* ============================================================
   2026-09-07 — What's New carousel + mobile responsiveness pass
   ============================================================ */

/* --- bento: tighter title -> cards gap (screenshot fix) --- */
.bento-section .bento-head { margin-bottom: clamp(10px, 1.2vh, 16px) !important; }
.bento-section .bento-head .bento-sub { margin-top: 10px !important; }
.bento-section .bento-grid-feature { margin-top: 0 !important; padding-top: 0 !important; }
.bento-section .bento-wrap { padding-top: 0 !important; }
.bento-section { padding-block: clamp(36px, 4.5vh, 60px) clamp(48px, 6vh, 80px) !important; }

/* --- What's New at Dharan: banner carousel --- */
.updates-section { position: relative; }
.upd-head { align-items: flex-end; }
.upd-head .section-intro { margin-top: var(--ds-title-gap); }
.upd-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: #eef4f9;
  box-shadow: 0 26px 60px -34px rgba(12, 51, 84, 0.45);
}
.upd-track { display: flex; transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.upd-slide { flex: 0 0 100%; margin: 0; }
.upd-slide img { display: block; width: 100%; aspect-ratio: 1920 / 760; object-fit: cover; }
.upd-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 999px; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.9); color: #0d3a5c;
  box-shadow: 0 10px 24px -12px rgba(12, 51, 84, 0.55);
  transition: background 0.25s ease, transform 0.25s ease;
}
.upd-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.upd-nav svg { width: 20px; height: 20px; }
.upd-prev { left: 14px; }
.upd-next { right: 14px; }
.upd-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.upd-dot {
  width: 9px; height: 9px; border-radius: 999px; border: 0; cursor: pointer; padding: 0;
  background: rgba(13, 58, 92, 0.22); transition: width 0.3s ease, background 0.3s ease;
}
.upd-dot.on { width: 26px; background: linear-gradient(90deg, #1a74c4, #23a9cf); }

@media (max-width: 900px) {
  .upd-carousel { border-radius: 18px; }
  .upd-slide img { aspect-ratio: 16 / 9; object-fit: contain; background: #eef4f9; }
  .upd-nav { width: 38px; height: 38px; }
  .upd-prev { left: 8px; }
  .upd-next { right: 8px; }
}
@media (max-width: 640px) {
  .upd-slide img { aspect-ratio: 16 / 9; object-fit: contain; background: #eef4f9; }
  .upd-head { align-items: stretch; }
}

/* ============ mobile responsiveness / consistency pass ============ */
@media (max-width: 1024px) {
  .container { width: min(100%, 92vw) !important; padding-inline: 0 !important; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .sec-head > .btn-pill { align-self: flex-start; }
}

@media (max-width: 768px) {
  html, body { overflow-x: clip; }
  .container { width: min(100%, 100vw) !important; padding-inline: 20px !important; }
  .sec-head { text-align: left; }
  .sec-head .section-title, .hcs-head .section-title,
  .bento-head .section-title, .dept-left .section-title,
  .as-left .section-title { font-size: clamp(1.6rem, 6.6vw, 2.1rem) !important; }
  .section-intro, .hcs-sub, .bento-sub, .dept-sub { font-size: 0.98rem !important; max-width: none !important; }
  .btn-pill { width: auto; font-size: 0.92rem; }
  .hero-cta-row, .intro-cta-row, .dna-cta-row, .view-all-row { flex-wrap: wrap; }

  /* single-column stacking for all multi-column blocks */
  .scan-grid, .scan-row, .dep-grid, .doctors-row, .happening-layout,
  .packages-grid, .intro-grid, .dna-grid, .as-grid, .contact-grid,
  .footer-top { grid-template-columns: 1fr !important; }
  .foot-two-col { grid-template-columns: 1fr 1fr !important; column-gap: 18px !important; }

  /* images and media never overflow */
  img, video, iframe { max-width: 100%; }

  /* bento packages stack cleanly */
  .bento-grid-feature { grid-template-columns: 1fr !important; }
  .bento-grid-feature .bento-pkg,
  .bento-grid-feature .bento-pkg-feature { grid-area: auto !important; min-height: 260px !important; }

  /* comfortable tap targets */
  .nav-pill, .cc-btn, .upd-nav, .bento-pkg-arr { min-height: 40px; }
}

@media (max-width: 480px) {
  .container { padding-inline: 16px !important; }
  .bento-grid-feature .bento-pkg,
  .bento-grid-feature .bento-pkg-feature { min-height: 230px !important; }
  .bento-pkg-body h3 { font-size: 1.05rem !important; }
}

/* 2026-09-07 — larger updates, restored checkup palette, flat section transitions */
.updates-section > .container {
  width: min(1440px, 94vw);
}
.upd-slide img {
  aspect-ratio: 12 / 5;
}

#packages.bento-section .section-title {
  color: var(--navy) !important;
}
#packages.bento-section .section-title .hl {
  background: var(--gradient-primary) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
#packages.bento-section .bento-sub {
  color: #51606e !important;
}
#packages.bento-section .bento-price {
  background: var(--gradient-primary) !important;
}
#packages.bento-section .bento-head {
  margin-bottom: 8px !important;
}

/* Sections sit directly on the page wash; elevation remains limited to cards and controls. */
.panel,
.dna-panel {
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .updates-section > .container { width: min(100%, 94vw) !important; }
  .upd-slide img { aspect-ratio: 16 / 9; }
}

/* --- about/appointment zoom block: mobile stacking + no horizontal overflow --- */
@media (max-width: 900px) {
  .az-body { padding: 0 20px !important; }
  .az-body .az-grid,
  .az-body .az-grid.container {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 28px !important;
  }
  .az-body .as-left, .az-body .as-right { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .az-body .as-left h2 { font-size: clamp(1.7rem, 8vw, 2.3rem) !important; max-width: none !important; }
  .az-body .as-right p { max-width: none !important; }
  .az-body .as-points { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  .az-body .as-cta-row { gap: 12px !important; margin-top: 24px !important; }
  .az-ring, .az-orbit, .as-stage { pointer-events: none; }
  .about-zoom, .az-body { overflow-x: clip; }
}

/* doctors carousel: remove dead space under cards on small screens */
@media (max-width: 900px) {
  #doctors .doc5-row { height: clamp(360px, 78vw, 440px) !important; }
  #doctors .coverflow-controls { margin-top: 14px; }
}

/* 2026-09-07 — subtle doctor depth, single-line checkup title, framed About reveal */
#doctors .doc-card5,
#doctors .doc-card5.on {
  box-shadow: 0 14px 34px -26px rgba(11, 43, 69, 0.22) !important;
}

@media (min-width: 769px) {
  #packages.bento-section .section-title { white-space: nowrap; }
}

.az-slot { box-shadow: 0 20px 54px -34px rgba(0, 0, 0, 0.42); }

#packages.bento-section .bento-head {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 80px);
  text-align: left;
}
#packages.bento-section .bento-head-copy { min-width: 0; }
#packages.bento-section .bento-head .section-title,
#packages.bento-section .bento-head .bento-sub {
  margin-inline: 0 !important;
  text-align: left !important;
}
#packages.bento-section .bento-head .bento-sub { max-width: 64ch; }
#packages.bento-section .bento-head-cta { flex: 0 0 auto; margin-bottom: 4px; }

@media (max-width: 900px) {
  #packages.bento-section .bento-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  #packages.bento-section .bento-head-cta { margin-bottom: 0; }
}

@media (max-width: 768px) {
  #packages.bento-section .section-title { white-space: normal; }
}

/* ============ footer specialties: independent columns (equal rhythm) ============ */
.foot-two-col {
  display: block !important;
  columns: 2;
  column-gap: 32px;
}
.foot-two-col a {
  break-inside: avoid;
  line-height: 1.35;
  padding: 6px 0 !important;
}
@media (max-width: 480px) {
  .foot-two-col { columns: 1; }
}

/* 2026-09-07 — footer contact and package-arrow alignment refinements */
.footer-contact .fc-row {
  align-items: center;
  min-height: 34px;
}
.footer-contact .fc-row > a,
.footer-contact .fc-row > span:not(.ic) {
  display: block;
  line-height: 1.5;
}

#packages .bento-pkg-arr,
#packages .bento-pkg:hover .bento-pkg-arr {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--navy);
}


/* About video: a readable, compact mobile composition without desktop pinning. */
@media (max-width: 767px) {
  .about-zoom.is-static {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  .about-zoom.is-static .az-stage {
    position: relative;
    inset: auto;
    overflow: hidden;
  }
  .about-zoom.is-static .az-hero {
    position: relative;
    min-height: 0;
    justify-content: center;
    padding: 64px 20px 48px !important;
    gap: 24px !important;
  }
  .about-zoom.is-static .az-title {
    width: 100%;
    gap: 8px;
    font-size: clamp(2.25rem, 11vw, 3.25rem);
    line-height: 1.04;
  }
  .about-zoom.is-static .az-line {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .about-zoom.is-static .az-line:last-child {
    display: grid;
    grid-template-columns: auto 1fr;
  }
  .about-zoom.is-static .az-slot {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    margin: 10px auto 4px;
    border-radius: 28px !important;
    transform: none !important;
  }
  .about-zoom.is-static .az-slot video {
    object-position: 50% 42%;
  }
  .about-zoom.is-static .az-lead {
    max-width: 34ch !important;
    font-size: 0.95rem;
    line-height: 1.6 !important;
  }
  .about-zoom.is-static .az-body {
    position: relative;
    inset: auto;
    padding: 32px 20px 72px !important;
  }
  .about-zoom.is-static .az-body [data-az] {
    opacity: 1 !important;
    transform: none !important;
  }
  .about-zoom.is-static .az-body .az-grid,
  .about-zoom.is-static .az-body .az-grid.container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  .about-zoom.is-static .az-body .as-left h2 {
    margin: 0 !important;
  }
  .about-zoom.is-static .az-body .as-right p {
    line-height: 1.7 !important;
  }
  .about-zoom.is-static .az-body .as-points {
    margin-top: 24px !important;
  }
}

/* ==================================================================
   2026-09-08 — mobile (<1024px) consolidated layout
   ================================================================== */
.az-body .as-cta-row.as-cta-mob[data-az], .as-cta-mob { display: none !important; }
@media (max-width: 1023px) {
  .az-body .as-cta-row.as-cta-desk[data-az], .as-cta-desk { display: none !important; }
  .az-body .as-cta-row.as-cta-mob[data-az], .as-cta-mob { display: grid !important; }
}

/* ---- HERO V5: pinned + scroll-scrubbed on mobile, like desktop ---- */
@media (max-width: 1023px) {
  .hero-v5 { height: 280vh; padding-bottom: 0; }
  .h5-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }

  .h5-media { position: absolute; left: 0; right: 0; top: 0; height: 60svh; overflow: hidden; }
  .h5-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .h5-media::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
    background: linear-gradient(180deg, rgba(234, 244, 250, 0), #eaf4fa); pointer-events: none;
  }

  .h5-copy {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end !important;
    padding: 0 20px calc(20px + env(safe-area-inset-bottom)) !important;
    gap: 0 !important;
  }
  .h5-headline { display: flex !important; flex-direction: column; align-items: center; gap: 0 !important; max-width: none; }
  .h5-gap { display: none !important; }
  .h5-h, .h5-h--l, .h5-h--r {
    text-align: center !important; justify-self: auto !important;
    font-size: clamp(1.9rem, 8.6vw, 2.5rem) !important; line-height: 1.06;
    white-space: normal; letter-spacing: -0.02em;
  }
  .h5-h--r { color: #12a3c4; }
  .h5-h--l > span, .h5-h--r > span { transform: translate3d(0, 22px, 0); }
  .h5-foot { margin-top: 12px; gap: 12px; width: 100%; }
  .h5-sub { font-size: 0.92rem; line-height: 1.45; max-width: 30ch; text-wrap: balance; }
  .h5-ctas { flex-direction: row; gap: 10px; width: 100%; max-width: 340px; margin: 0 auto; }
  .h5-btn { flex: 1; justify-content: center; height: 46px; padding: 0 14px; font-size: 0.92rem; white-space: nowrap; }

  .hero-v5 .h4-appt {
    position: absolute; left: 50%; bottom: 0;
    transform: translate(-50%, 50%) translateY(28px);
    width: min(560px, 92vw); z-index: 6; opacity: 0; pointer-events: none;
  }
  .hero-v5.is-revealed .h4-appt { opacity: 1; transform: translate(-50%, 50%); pointer-events: auto; }
  .hero-v5 + .section, .hero-v5 + section { padding-top: calc(var(--appt-h, 320px) / 2 + 40px); }
  .instant-form { grid-template-columns: 1fr; }
  .instant-form input, .instant-form select { font-size: 16px; min-height: 48px; }
  .instant-form .btn-pill { width: 100%; justify-content: center; }

  .hero-v5.is-fallback .h5-video { object-fit: cover; }
}
@media (max-width: 400px) {
  .h5-media { height: 56svh; }
  .h5-h, .h5-h--l, .h5-h--r { font-size: clamp(1.7rem, 8.2vw, 2.2rem) !important; }
  .h5-ctas { flex-direction: column; }
}

/* ---- SCAN YOUR BODY: 2 identical square cards per row ---- */
@media (max-width: 1023px) {
  .scan-row { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .scan-grid { gap: 12px; }
  .scan-card { border-radius: 16px; }
  .scan-card .scan-media { aspect-ratio: 1 / 1; }
  .scan-card .scan-media img { width: 72%; height: 72%; object-fit: contain; margin: auto; }
  .scan-card .scan-title { font-size: 0.9rem; line-height: 1.25; padding: 10px 12px 14px; text-align: right; }
  .scan-open { width: 34px; height: 34px; top: 10px; right: 10px; }
  .scan-open svg { width: 14px; height: 14px; }
  #scan .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  #scan .scan-cta { align-self: flex-start; }
}
@media (max-width: 360px) {
  .scan-card .scan-title { font-size: 0.82rem; }
}

/* ---- ABOUT: title → paragraph → points → buttons ---- */
@media (max-width: 1023px) {
  .az-body { padding: 0 20px; }
  .az-body .az-grid { display: flex; flex-direction: column; gap: 22px !important; }
  .az-body .as-left h2 {
    font-size: clamp(1.7rem, 7.4vw, 2.2rem); line-height: 1.12;
    max-width: none; margin-top: 0 !important;
  }
  .az-body .as-right p { font-size: 0.95rem; line-height: 1.6; max-width: none; }
  .az-body .as-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 8px; }
  .az-body .as-points li { font-size: 0.86rem; align-items: flex-start; gap: 8px; }
  .az-body .as-cta-row {
    display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; width: 100%;
  }
  .az-body .as-cta-row .btn-pill,
  .az-body .as-cta-row .phone-chip {
    width: 100%; justify-content: center; height: 48px; padding: 0 14px;
    font-size: 0.88rem; white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .az-body .as-points { grid-template-columns: 1fr; }
}

/* ---- DOCTORS: face visible, info panel below photo ---- */
@media (max-width: 1023px) {
  #doctors .focus-row { height: auto !important; min-height: 0; padding: 8px 0 12px; }
  .focus-slide { width: min(78vw, 320px); padding-inline: 8px; }
  .focus-slide:has(.doc-card4.on) { width: min(82vw, 340px); }

  .doc-card4, .doc-card5 { display: flex; flex-direction: column; }
  .dc4-photo, .doc-card4.on .dc4-photo { aspect-ratio: 3 / 4 !important; border-radius: 18px 18px 0 0; overflow: hidden; }
  .dc4-photo img { object-fit: cover !important; object-position: 50% 15% !important; }
  .doc-card4.on .dc4-info, .dc4-info {
    position: static !important; transform: none !important;
    background: #fff; box-shadow: none; border-radius: 0 0 18px 18px;
    padding: 14px 14px 16px !important; align-items: center; text-align: center; gap: 4px;
  }
  .dc4-info h3, .doc-card4.on .dc4-info h3 { font-size: 1.1rem !important; line-height: 1.2; }
  .dc4-spec { font-size: 0.86rem; line-height: 1.3; }
  .dc4-qual { font-size: 0.76rem; }
  .dc4-years { margin-top: 6px; font-size: 0.74rem; padding: 5px 12px; }

  .coverflow-controls { margin-top: 12px; gap: 12px; }
  .cc-btn { width: 44px; height: 44px; }
  #doctors .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  #doctors .sec-head .btn-pill { align-self: flex-start; }
}

/* ---- WHAT'S HAPPENING ---- */
@media (max-width: 1023px) {
  .hcs-head { padding: 0 20px; gap: 12px !important; }
  .hcs-head .section-title {
    font-size: clamp(1.7rem, 7.4vw, 2.2rem); line-height: 1.15;
    max-width: 14ch !important; margin: 0 auto;
  }
  .hcs-head .section-title .hl { display: inline; }
  .hcs-rule { position: static; width: 56px; height: 3px; margin: 2px auto 0; }
  .hcs-sub { font-size: 0.92rem; line-height: 1.55; max-width: 32ch; text-wrap: balance; margin: 0 auto; }
}

/* ---- FOOTER: compact mobile structure ---- */
@media (max-width: 1023px) {
  .footer { padding: 48px 0 24px; }
  .footer-top { grid-template-columns: 1fr !important; gap: 32px !important; padding-bottom: 28px; }

  .footer-brand { align-items: flex-start; }
  .footer-brand .foot-logo img { height: 48px; margin-bottom: 10px !important; }
  .footer-brand .tag { font-size: 0.9rem; max-width: 34ch; margin: 0 0 20px; }
  .fb-bottom { gap: 18px; width: 100%; }
  .footer-contact { display: flex; flex-direction: column; gap: 12px; }
  .fc-row { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; line-height: 1.45; }
  .fc-row .ic { flex: none; width: 34px; height: 34px; }
  .footer-follow { display: flex; align-items: center; gap: 14px; }
  .ff-label { font-size: 0.74rem; letter-spacing: 0.08em; }
  .footer-socials { gap: 8px; }
  .soc-btn { width: 40px; height: 40px; }

  .footer-cols { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; }
  .foot-col--wide { grid-column: 1 / -1; }
  .foot-two-col { display: grid; grid-template-columns: 1fr 1fr !important; column-gap: 16px; }
  .foot-col h4 { font-size: 0.78rem; margin-bottom: 10px; }
  .foot-col a { font-size: 0.84rem; padding: 4px 0; }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 18px; font-size: 0.76rem; }
  .foot-legal { gap: 14px; }
}
@media (max-width: 400px) {
  .foot-two-col { grid-template-columns: 1fr !important; }
}

/* =========================================================
   MOBILE FIXES (< 1024px) — final cascade block
   ========================================================= */
@media (max-width: 1023px) {
  /* ---- HERO ---- */
  .hero-v5 { height: 280vh !important; padding-bottom: 0 !important; }
  .h5-pin { position: sticky !important; top: 0; height: 100svh !important; overflow: hidden; }
  .h5-media { position: absolute; left: 0; right: 0; top: 0; height: 62svh !important; overflow: hidden; }
  .h5-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50% !important; }
  .h5-copy {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto !important;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end !important;
    padding: 0 20px calc(18px + env(safe-area-inset-bottom)) !important; gap: 0 !important;
  }
  .h5-foot { margin-top: 12px; gap: 12px; width: 100%; }
  .hero-v5 .h4-appt {
    position: absolute; left: 50%; bottom: 0; width: min(560px, 92vw); z-index: 6;
    opacity: 0; pointer-events: none; transform: translate(-50%, 50%) translateY(28px);
  }
  .hero-v5.is-revealed .h4-appt { opacity: 1; pointer-events: auto; transform: translate(-50%, 50%); }
  #scan { padding-top: calc(var(--appt-h, 320px) / 2 + 48px) !important; }
  .instant-form { grid-template-columns: 1fr; }
  .instant-form input, .instant-form select { font-size: 16px; min-height: 48px; }
  .instant-form .btn-pill { width: 100%; justify-content: center; }

  /* ---- SCAN: flat 2-column grid, no orphans ---- */
  .scan-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .scan-row { display: contents !important; }
  .scan-card { border-radius: 16px; }
  .scan-card .scan-media { aspect-ratio: 1 / 1; }
  .scan-card .scan-media img { width: 70%; height: 70%; object-fit: contain; margin: auto; }
  .scan-card .scan-title { font-size: 0.9rem; line-height: 1.25; padding: 10px 12px 14px; }
  .scan-open { width: 34px; height: 34px; top: 10px; right: 10px; }
  #scan .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* ---- ABOUT: pinned zoom on mobile ---- */
  .about-zoom .az-hero { padding: 0 20px; }
  .az-title { font-size: clamp(2rem, 9.4vw, 2.8rem); line-height: 1.08; text-align: center; }
  .az-line { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
  .az-slot { width: clamp(72px, 22vw, 110px) !important; height: 0.95em !important; border-radius: 10px; }
  .az-lead { font-size: 0.95rem; line-height: 1.55; max-width: 32ch; margin: 18px auto 0; text-align: center; }
  .az-body { padding: 0 20px; }
  .az-body .az-grid { display: flex; flex-direction: column; gap: 20px !important; }
  .az-body .as-left h2 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); line-height: 1.12; max-width: none; }
  .az-body .as-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .az-body .as-cta-row { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .az-body .as-cta-row .btn-pill,
  .az-body .as-cta-row .phone-chip { width: 100%; justify-content: center; height: 48px; padding: 0 14px; font-size: 0.88rem; white-space: nowrap; }

  /* ---- DOCTORS: restore card height ---- */
  #doctors .focus-row { position: relative; height: clamp(440px, 64vh, 540px) !important; }
  #doctors .doc5-row .focus-slide { position: absolute; top: 0; left: 50%; width: min(76vw, 300px) !important; padding-inline: 0 !important; }
  #doctors .doc5-row .focus-slide:has(.doc-card4.on) { width: min(80vw, 320px) !important; }
  .doc-card4, .doc-card5 { display: flex; flex-direction: column; height: 100%; }
  .dc4-photo, .doc-card4.on .dc4-photo { aspect-ratio: 3 / 4 !important; border-radius: 18px 18px 0 0; overflow: hidden; }
  .dc4-photo img { object-fit: cover !important; object-position: 50% 15% !important; }
  .dc4-info, .doc-card4.on .dc4-info {
    position: static !important; transform: none !important; background: #fff; box-shadow: none;
    border-radius: 0 0 18px 18px; padding: 12px 14px 14px !important; align-items: center; text-align: center; gap: 3px;
  }
  .dc4-info h3 { font-size: 1.05rem !important; }
  .dc4-spec { font-size: 0.84rem; }
  .dc4-qual { font-size: 0.74rem; }
  .dc4-years { font-size: 0.72rem; padding: 4px 10px; }
  .coverflow-controls { margin-top: 14px; }
  #doctors .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* ---- FOOTER ---- */
  .footer-brand .tag { margin: 6px 0 22px; font-size: 0.92rem; max-width: 32ch; }
  .footer-contact { display: flex; flex-direction: column; gap: 14px; width: 100%; }
  .footer-contact .fc-row { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: start; min-height: 0; }
  .footer-contact .fc-row .ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
  .footer-contact .fc-row > span:not(.ic),
  .footer-contact .fc-row > a { font-size: 0.9rem; line-height: 1.5; padding-top: 5px; word-break: normal; }
  .footer-contact .fc-row > span br { display: none; }
  .footer-follow { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
  .ff-label { font-size: 0.74rem; letter-spacing: 0.08em; }
  .footer-cols { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; }
  .foot-col--wide { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 0.76rem; }
}
@media (max-width: 400px) {
  .h5-media { height: 58svh !important; }
  .h5-ctas { flex-direction: column; }
}

/* =========================================================
   2026-09-08 — PHONE HERO RESTRUCTURE (< 768px) + global hygiene
   Desktop (>=1024px) untouched.
   ========================================================= */
.nav-mob-actions { display: none; }
.nav-call { display: none; }
.h5-btn-tx { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.h5-btn-tx small { display: none; }
.h5-cue { display: none; }
.h5-prog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(14, 40, 66, 0.08); z-index: 6; pointer-events: none;
}
.h5-prog > i {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #12a3c4, #0e2842);
}
.hero-v5.is-static .h5-prog { display: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #12a3c4; outline-offset: 2px; border-radius: 6px;
}
.nav-scrim--menu { pointer-events: auto; }

@media (max-width: 1023px) {
  .nav-mob-actions { display: flex; align-items: center; gap: 10px; }
  .nav-call {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #12a3c4, #0e2842); color: #fff;
  }
  .nav-call svg { fill: #fff; }
  .nav-burger { min-width: 44px; min-height: 44px; }
}

@media (max-width: 767px) {
  /* --- one-screen, non-pinned hero --- */
  .hero-v5,
  .hero-v5.is-static { height: auto !important; min-height: 0 !important; padding-bottom: 0 !important; }
  .hero-v5 .h5-pin {
    position: relative !important; top: auto !important;
    height: 100svh !important; min-height: 560px;
    display: block; overflow: hidden;
  }
  /* particle layer fills the whole screen behind the copy */
  .hero-v5 .h5-media {
    position: absolute !important; inset: 0 !important;
    height: 100% !important; overflow: hidden; pointer-events: none; z-index: 0;
  }
  .hero-v5 .h5-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(238,244,250,0) 30%, rgba(238,244,250,0.72) 62%, rgba(238,244,250,0.95) 100%);
  }
  .hero-v5 .h5-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 38% !important; opacity: 0.92;
  }
  /* copy overlaps the video, anchored bottom-centre */
  .hero-v5 .h5-copy {
    position: absolute !important; inset: auto 0 0 0 !important;
    z-index: 2; display: flex !important; flex-direction: column;
    align-items: center !important; justify-content: flex-end !important;
    text-align: center !important;
    padding: 0 24px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important;
  }
  .hero-v5 .h5-copy::before,
  .hero-v5 .h5-copy::after { content: none !important; }
  .hero-v5 .h5-headline {
    display: flex !important; flex-direction: column; align-items: center !important;
    gap: 0 !important; max-width: none; margin: 0 !important;
  }
  .hero-v5 .h5-gap { display: none !important; }
  .hero-v5 .h5-h,
  .hero-v5 .h5-h--l,
  .hero-v5 .h5-h--r {
    font-size: clamp(34px, 10vw, 56px) !important; line-height: 1.06 !important;
    font-weight: 600 !important; letter-spacing: -0.02em;
    text-align: center !important; justify-self: center !important; margin: 0 !important; padding: 0 !important;
  }
  .hero-v5 .h5-h--l { color: #0e2842 !important; }
  .hero-v5 .h5-h--r { color: #12a3c4 !important; }
  .hero-v5 .h5-foot {
    margin-top: 14px !important; display: flex; flex-direction: column; gap: 14px; width: 100%;
    align-items: center;
  }
  .hero-v5 .h5-sub {
    font-size: clamp(15px, 4vw, 18px) !important; line-height: 1.5 !important;
    color: #46566b !important; max-width: 32ch !important; margin: 0 auto !important; text-align: center !important;
  }
  .hero-v5 .h5-ctas {
    display: flex !important; flex-direction: column !important; gap: 12px !important;
    width: 100% !important; max-width: none !important; margin: 0 !important; justify-content: center !important;
  }

  .hero-v5 .h5-btn {
    width: 100%; min-height: 52px; height: auto !important; flex: 0 0 auto !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 1rem !important; padding: 10px 18px !important; border-radius: 999px;
  }
  .hero-v5 .h5-btn.solid { background: #0e2842 !important; color: #fff !important; }
  .hero-v5 .h5-btn.solid svg { fill: #fff; }
  .hero-v5 .h5-btn-tx { align-items: center; }
  .hero-v5 .h5-btn-tx small {
    display: block; font-size: 0.78rem; font-weight: 500; opacity: 0.82; letter-spacing: 0.02em;
  }
  .hero-v5 .h5-btn.ghost {
    border: 1.5px solid rgba(14, 40, 66, 0.3) !important; color: #0e2842 !important;
    background: rgba(255, 255, 255, 0.85) !important;
  }
  .hero-v5 .h5-copy::after { content: ""; flex: 1 1 auto; }
  .hero-v5 .h5-cue {
    display: grid; place-items: center; width: 36px; height: 36px; margin: 10px auto 0;
    color: #12a3c4; opacity: 0.8; animation: h5CueBob 1.8s ease-in-out infinite;
  }

  .hero-v5 .h5-cue svg { fill: currentColor; }
  /* appointment card back in normal flow under the hero */
  .hero-v5 .h4-appt {
    position: static !important; transform: none !important; opacity: 1 !important;
    pointer-events: auto !important; width: 100% !important; left: auto !important; bottom: auto !important;
    padding: 24px 24px 0 !important;
  }
  .hero-v5 + .section, .hero-v5 + section { padding-top: 56px !important; }
  .hero-v5 .h5-h > span, .hero-v5 .h5-sub, .hero-v5 .h5-btn { opacity: 1; transform: none; }
}
@keyframes h5CueBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* --- global mobile hygiene --- */
@media (max-width: 767px) {
  html, body { overflow-x: clip; max-width: 100%; }
  .container, .section > .container { padding-left: 24px !important; padding-right: 24px !important; }
  .section { padding-top: 64px !important; padding-bottom: 64px !important; }
  p, li { line-height: 1.55; }
  .sec-sub, .sec-head p { font-size: clamp(15px, 3.9vw, 17px); color: #46566b; }
  a, button { -webkit-tap-highlight-color: transparent; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .container, .section > .container { padding-left: 40px !important; padding-right: 40px !important; }
  .section { padding-top: 96px !important; padding-bottom: 96px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   2026-09-08 — TABLET + PHONE: same pinned scroll hero as web
   Desktop (>=1024px) untouched.
   ========================================================= */
@media (max-width: 1023px) {
  .hero-v5,
  .hero-v5.is-static {
    height: 300vh !important; min-height: 0 !important; padding-bottom: 0 !important;
  }
  .hero-v5 .h5-pin {
    position: sticky !important; top: 0 !important;
    height: 100svh !important; min-height: 0 !important; overflow: hidden;
  }
  /* full-bleed video, no white wash over it */
  .hero-v5 .h5-media {
    position: absolute !important; inset: 0 !important; height: 100% !important;
    overflow: hidden; pointer-events: none; z-index: 0;
  }
  .hero-v5 .h5-media::after,
  .hero-v5 .h5-media::before { content: none !important; background: none !important; }
  .hero-v5 .h5-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 42% !important; opacity: 1 !important;
  }
  /* copy overlays the video, bottom-centre */
  .hero-v5 .h5-copy {
    position: absolute !important; inset: auto 0 0 0 !important; top: auto !important;
    z-index: 2; display: flex !important; flex-direction: column;
    align-items: center !important; justify-content: flex-end !important; text-align: center !important;
    padding: 0 24px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important;
  }
  .hero-v5 .h5-copy::before, .hero-v5 .h5-copy::after { content: none !important; }
  .hero-v5 .h5-headline {
    display: flex !important; flex-direction: column; align-items: center !important;
    gap: 0 !important; margin: 0 !important; max-width: none;
  }
  .hero-v5 .h5-gap { display: none !important; }
  .hero-v5 .h5-h, .hero-v5 .h5-h--l, .hero-v5 .h5-h--r {
    font-size: clamp(34px, 7.4vw, 62px) !important; line-height: 1.06 !important;
    text-align: center !important; justify-self: center !important; margin: 0 !important; padding: 0 !important;
  }
  .hero-v5 .h5-h--l { color: #0e2842 !important; }
  .hero-v5 .h5-h--r { color: #12a3c4 !important; }
  .hero-v5 .h5-foot { margin-top: 16px !important; gap: 14px; width: 100%; align-items: center; }
  .hero-v5 .h5-sub { max-width: 38ch !important; margin: 0 auto !important; text-align: center !important; }
  .hero-v5 .h5-ctas {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    gap: 12px !important; width: 100% !important; max-width: 420px !important; margin: 0 auto !important;
  }
  .hero-v5 .h5-btn {
    flex: 1 1 0 !important; min-height: 52px; height: auto !important;
    justify-content: center; font-size: 0.98rem !important; padding: 10px 16px !important; white-space: nowrap;
  }
  .hero-v5 .h5-btn-tx { align-items: center; }
  .hero-v5 .h5-btn-tx small { display: none !important; }
  .hero-v5 .h5-cue { display: none !important; }
  /* appointment card flows under the hero once the pin releases */
  .hero-v5 .h4-appt {
    position: static !important; transform: none !important; opacity: 1 !important;
    pointer-events: auto !important; width: 100% !important; left: auto !important; bottom: auto !important;
    padding: 24px !important;
  }
  .hero-v5 + .section, .hero-v5 + section { padding-top: 24px !important; }
  #scan { padding-top: 24px !important; }

  /* ---- DOCTORS: web-style coverflow ---- */
  #doctors .focus-row { position: relative; height: clamp(480px, 62vh, 620px) !important; }
  #doctors .doc5-row .focus-slide {
    position: absolute; top: 0; left: 50%;
    width: clamp(230px, 34vw, 300px) !important; padding-inline: 0 !important;
  }
  #doctors .doc5-row .focus-slide:has(.doc-card5.on),
  #doctors .doc5-row .focus-slide:has(.doc-card4.on) { width: clamp(260px, 42vw, 360px) !important; }
}
@media (max-width: 767px) {
  #doctors .focus-row { height: clamp(430px, 66vh, 560px) !important; }
  #doctors .doc5-row .focus-slide { width: min(66vw, 260px) !important; }
  #doctors .doc5-row .focus-slide:has(.doc-card5.on),
  #doctors .doc5-row .focus-slide:has(.doc-card4.on) { width: min(76vw, 300px) !important; }
  .hero-v5 .h5-ctas { max-width: none !important; }
}

/* =========================================================
   2026-09-09 — mobile section flow and carousel corrections
   Desktop (>=1024px) remains unchanged.
   ========================================================= */
.hcs-title { display: flex; flex-direction: column; align-items: center; }
.hcs-title > span { display: block; }

@media (max-width: 1023px) {
  /* About video: portrait frame with a centred, contained zoom target. */
  .about-zoom { min-height: 100svh; }
  .about-zoom .az-stage { min-height: 100svh; }
  .about-zoom .az-slot {
    width: clamp(54px, 9vw, 82px) !important;
    height: 1.38em !important;
    aspect-ratio: 3 / 4;
    border-radius: 10px !important;
  }
  .about-zoom .az-slot video { object-position: 50% 42%; }
  .about-zoom .az-body { overflow-y: visible; overscroll-behavior: auto; padding: 72px 24px 36px; }
  .about-zoom .az-body .az-grid { width: min(100%, 720px); margin: auto; }

  /* Long card sections stay in document flow; only the cinematic sections pin. */
  #packages.bento-section { height: auto !important; min-height: 0 !important; }
  #packages .bento-wrap { width: 100% !important; }
  #packages .bento-grid-feature {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: none !important;
    gap: 16px !important;
  }
  #packages .bento-grid-feature .bento-pkg,
  #packages .bento-grid-feature .bento-pkg-feature {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 390px !important;
    transform: none !important;
    opacity: 1 !important;
  }
  #packages .bento-grid-feature .bento-pkg-feature { grid-column: 1 / -1 !important; min-height: 500px !important; }

  /* Doctors: stable coverflow height and always-visible active card. */
  #doctors { position: relative; z-index: 1; overflow: hidden; }
  #doctors .panel { overflow: visible; }
  #doctors .doc5-row,
  #doctors .doc5-row.shown { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  #doctors .doc5-row .doc-card5 { opacity: 1; animation: none; }
  #doctors .focus-row { min-height: 560px !important; height: 560px !important; overflow: visible; }
  #doctors .doc5-row .focus-slide { top: 0; }
  #doctors .coverflow-controls { position: relative; z-index: 40; }

  /* Banner and case carousels keep one complete slide inside the viewport. */
  .updates-section > .container,
  .hcs-section .hcs-head,
  .hcs-section .hcs-stage { width: 100%; max-width: 100%; }
  .upd-carousel { width: 100%; overflow: hidden; }
  .upd-track { align-items: stretch; }
  .upd-slide { min-width: 100%; }
  .upd-slide img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
  .hcs-carousel .hcs-viewport { width: 100%; overflow: hidden; }
  .hcs-carousel .hcs-slide { min-width: 100%; padding-inline: 0; }
  .hcs-carousel .hcs-card { width: 100%; min-width: 0; overflow: hidden; }

  /* Departments use a clean flowing grid below desktop, avoiding stacked pinned cards. */
  #departments .panel { overflow: visible; }
  #departments .dep-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  #departments .dep-grid .dept-card { width: 100%; height: 360px; }
  #departments .view-all-row { display: flex; flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 767px) {
  .about-zoom .az-title { font-size: clamp(2rem, 9vw, 2.65rem); }
  .about-zoom .az-slot { width: clamp(48px, 14vw, 62px) !important; height: 1.42em !important; }
  .about-zoom .az-body { padding: 64px 24px 30px; }
  .about-zoom .az-body .az-grid { gap: 16px !important; }
  .about-zoom .az-body .as-left h2 { margin-top: 0 !important; }
  .about-zoom .az-body .as-right p { line-height: 1.55 !important; }
  .about-zoom .az-body .as-points { margin-top: 20px !important; gap: 10px 14px !important; }
  .about-zoom .az-body .as-cta-row { margin-top: 20px !important; }

  #packages .bento-grid-feature { grid-template-columns: 1fr !important; }
  #packages .bento-grid-feature .bento-pkg,
  #packages .bento-grid-feature .bento-pkg-feature {
    grid-column: 1 !important;
    min-height: clamp(380px, 112vw, 470px) !important;
  }

  #doctors .focus-row { min-height: 500px !important; height: 500px !important; }
  #doctors .doc5-row .focus-slide { width: min(70vw, 270px) !important; }
  #doctors .doc5-row .focus-slide:has(.doc-card5.on),
  #doctors .doc5-row .focus-slide:has(.doc-card4.on) { width: min(78vw, 300px) !important; }
  #doctors .doc-card5 { height: 470px !important; }

  .updates-section .upd-head { align-items: flex-start; }
  .updates-section .upd-carousel { border-radius: 14px; }
  .updates-section .upd-nav { width: 42px; height: 42px; }
  .hcs-carousel .hcs-stage { padding-inline: 24px; }
  .hcs-carousel .hcs-card { display: flex; flex-direction: column; height: auto !important; }
  .hcs-carousel .hcs-copy,
  .hcs-carousel .hcs-media { width: 100%; min-width: 0; }
  .hcs-carousel .hcs-media { aspect-ratio: 4 / 3; }
  .hcs-carousel .hcs-media img { width: 100%; height: 100%; object-fit: cover; }

  #departments .dep-grid { grid-template-columns: 1fr !important; }
  #departments .dep-grid .dept-card { height: min(118vw, 460px); }
}

/* =========================================================
   2026-09-09 — mobile parity: doctors, departments, packages
   Desktop (>=1024px) remains unchanged.
   ========================================================= */
@media (max-width: 1023px) {
  /* Keep the health-checkup bento section present in normal page order. */
  #packages.bento-section {
    display: block !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: clip;
  }
  #packages .bento-wrap,
  #packages .bento-head,
  #packages .bento-grid-feature { visibility: visible !important; opacity: 1 !important; }
  #packages .bento-head { margin-bottom: 32px !important; }

  /* Use the desktop doctor-card UI: full portrait with floating frosted details. */
  #doctors .panel { overflow: hidden !important; }
  #doctors .focus-row {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    min-height: 520px !important;
    height: 520px !important;
    overflow: hidden !important;
  }
  #doctors .doc5-row .focus-slide {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: clamp(250px, 38vw, 320px) !important;
    padding-inline: 0 !important;
  }
  #doctors .doc5-row .focus-slide:has(.doc-card5.on),
  #doctors .doc5-row .focus-slide:has(.doc-card4.on) { width: clamp(280px, 44vw, 360px) !important; }
  #doctors .doc-card5,
  #doctors .doc-card5.on {
    position: relative !important;
    height: 500px !important;
    padding: 12px 12px 18px !important;
    gap: 14px !important;
    border-radius: 26px !important;
  }
  #doctors .doc-card5 .dc4-photo,
  #doctors .doc-card5.on .dc4-photo {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 20px !important;
  }
  #doctors .doc-card5 .dc4-photo img { object-fit: cover !important; object-position: 50% 0% !important; }
  #doctors .doc-card5.on .dc4-info {
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    bottom: 22px !important;
    transform: none !important;
    align-items: center !important;
    text-align: center !important;
    padding: 16px 16px 18px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 20px !important;
  }

  /* Preserve the desktop falling-card animation with a viewport-safe stage. */
  #departments.dept-pin.dept-fall {
    display: flex !important;
    min-height: 100svh !important;
    padding: 24px 0 32px !important;
    overflow: hidden !important;
  }
  /* Tighten the packages -> departments hand-off on mobile. */
  #packages.bento-section { padding-bottom: 28px !important; }
  #departments .dept-layout { width: min(100% - 48px, 760px) !important; gap: 20px !important; }
  #departments .dept-left { gap: 16px !important; }
  #departments .dept-left .section-title { max-width: 22ch !important; }
  #departments .dept-stage { width: 100% !important; max-width: 720px !important; padding-top: 18px !important; }
  #departments .dept-cards {
    position: relative !important;
    height: min(54svh, 520px) !important;
    min-height: 380px !important;
    overflow: visible !important;
  }
  #departments .dept-slide { position: absolute !important; inset: 0 !important; }
  #departments .dept-card { height: 100% !important; }
}

@media (max-width: 767px) {
  #doctors .focus-row { min-height: 490px !important; height: 490px !important; }
  #doctors .doc5-row .focus-slide { width: min(68vw, 265px) !important; }
  #doctors .doc5-row .focus-slide:has(.doc-card5.on),
  #doctors .doc5-row .focus-slide:has(.doc-card4.on) { width: min(78vw, 304px) !important; }
  #doctors .doc-card5,
  #doctors .doc-card5.on { height: 465px !important; }

  #departments.dept-pin.dept-fall { padding: 20px 0 28px !important; }
  #departments .dept-layout { width: calc(100% - 40px) !important; }
  #departments .dept-left .section-title { font-size: clamp(1.8rem, 8vw, 2.35rem) !important; }
  #departments .dept-ctas { width: 100%; }
  #departments .dept-ctas .btn-pill { flex: 1 1 0; justify-content: center; min-height: 48px; }
  #departments .dept-cards { height: min(50svh, 460px) !important; min-height: 350px !important; }
  #departments .dept-card .d-body { left: 18px; right: 18px; bottom: 18px; }
  #departments .dept-card .d-body h3 { font-size: 1.35rem; }
}

/* =========================================================
   2026-09-09 — mobile fixes: departments stack + happening case card
   Desktop (>=1024px) unchanged.
   ========================================================= */
@media (max-width: 1023px) {
  /* Departments: the pinned panel must fit one screen exactly, so no card
     can linger or bleed over the next section after the pin releases. */
  #departments.dept-pin.dept-fall {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    padding: 18px 0 22px !important;
    overflow: clip !important;
    background: #fff;
    z-index: 2;
  }
  #departments .dept-layout {
    height: 100% !important;
    align-content: center !important;
    gap: 14px !important;
  }
  #departments .dept-stage {
    padding-top: 6px !important;
    overflow: clip !important;
    min-height: 0 !important;
  }
  #departments .dept-cards {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    aspect-ratio: 4 / 5;
    max-height: min(52svh, 460px) !important;
    overflow: visible !important;
    margin-inline: auto !important;
  }

  /* Happening: keep the case card compact and fully readable on one screen. */
  .hcs-carousel .hcs-stage { padding-inline: 20px !important; }
  .hcs-carousel .hcs-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    padding: 18px !important;
    gap: 16px !important;
  }
  .hcs-carousel .hcs-copy h3 {
    font-size: 1.16rem !important;
    line-height: 1.3 !important;
    margin: 0 0 10px !important;
  }
  .hcs-carousel .hcs-body {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin: 0 0 16px !important;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hcs-carousel .hcs-cta { align-self: stretch; justify-content: center; min-height: 48px; }
  .hcs-carousel .hcs-media {
    aspect-ratio: 16 / 10 !important;
    border-radius: 16px;
    overflow: hidden;
  }
  .hcs-carousel .hcs-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .hcs-carousel .hcs-nav { margin-top: 16px !important; }
}

@media (max-width: 767px) {
  #departments .dept-cards { max-height: min(48svh, 420px) !important; }
  .hcs-carousel .hcs-body { -webkit-line-clamp: 6; }
}

/* Steady compositing for the two scrub-driven sections: promote only the moving
   layers so pinned scrolling stays smooth instead of jittering. */
#departments .dept-slide,
.az-slot {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
#departments .dept-cards { transform: translateZ(0); }

/* About feature icons — stronger, consistent contrast on pale circular badges. */
.az-body .as-points .as-ic {
  width: 34px;
  height: 34px;
  background: var(--light-1);
  border: 1px solid color-mix(in srgb, var(--navy) 22%, transparent);
  color: var(--navy);
  box-shadow: 0 4px 12px rgba(11, 43, 69, 0.12);
}
.az-body .as-points .as-ic svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

@media (max-width: 1023px) {
  .az-body .as-points .as-ic {
    width: 32px;
    height: 32px;
  }
  .az-body .as-points .as-ic svg {
    width: 17px;
    height: 17px;
  }
}

/* =========================================================
   HOME PAGE RHYTHM — final consistency layer
   Spacing and alignment only; visual styling and motion stay intact.
   ========================================================= */
:root {
  --home-section-y: clamp(80px, 7vw, 102px);
  --home-head-content: clamp(32px, 3.3vw, 48px);
  --home-title-copy: 14px;
  --home-grid-gap: clamp(20px, 2vw, 26px);
  --home-container: 1200px;
  --home-wide-container: 1440px;
  --home-gutter: max(4vw, 24px);
}

/* One predictable content edge for standard sections. */
.section > .container,
.section > .panel > .container,
.section > .panel > .section-pad > .container {
  box-sizing: border-box;
  width: min(var(--home-container), calc(100% - (var(--home-gutter) * 2))) !important;
  max-width: none;
  margin-inline: auto;
  padding-inline: 0 !important;
}

/* Intentional wide-media sections share one wider grid. */
.updates-section > .container,
#packages .bento-wrap {
  box-sizing: border-box;
  width: min(var(--home-wide-container), calc(100% - (var(--home-gutter) * 2))) !important;
  max-width: none !important;
  margin-inline: auto;
  padding-inline: 0 !important;
}

/* Normal-flow sections use one vertical cadence. Cinematic pinned sections,
   the compact final CTA handoff, and the footer keep their intentional geometry. */
#scan,
#doctors,
#updates,
#packages.bento-section,
#happening.hcs-section {
  padding-top: var(--home-section-y) !important;
  padding-bottom: var(--home-section-y) !important;
}

/* Consistent introduction hierarchy and content handoff. */
.sec-head,
.bento-head,
.hcs-head {
  margin-bottom: var(--home-head-content) !important;
}
.sec-head {
  column-gap: clamp(24px, 4vw, 64px) !important;
  row-gap: 20px !important;
}
.sec-head > .btn-pill,
.bento-head > .btn-pill,
.hcs-head > .btn-pill {
  margin-top: 0 !important;
}
.section-intro,
.bento-sub,
.hcs-sub {
  margin-top: var(--home-title-copy) !important;
}

/* Repeated content follows the same gap scale without changing card geometry. */
.scan-grid,
.scan-row,
.bento-grid-feature,
.dep-grid,
.doctors-row,
.hcs-flat {
  gap: var(--home-grid-gap) !important;
}

/* Preserve the intentionally tight carousel-to-appointment transition. */
#happening.hcs-section { padding-bottom: clamp(20px, 2vw, 32px) !important; }
#appointment { padding-top: clamp(20px, 2vw, 32px) !important; }

@media (max-width: 1023px) {
  :root {
    --home-section-y: 72px;
    --home-head-content: 32px;
    --home-grid-gap: 20px;
    --home-gutter: 40px;
  }

  .sec-head { row-gap: 18px !important; }
  #packages.bento-section { padding-bottom: 48px !important; }

  /* Keep the pinned department composition compact while matching its
     neighbouring horizontal grid. */
  #departments .dept-layout {
    width: min(760px, calc(100% - (var(--home-gutter) * 2))) !important;
  }

  .hcs-section .hcs-head {
    width: min(var(--home-container), calc(100% - (var(--home-gutter) * 2))) !important;
    padding-inline: 0 !important;
  }
}

@media (max-width: 767px) {
  :root {
    --home-section-y: 56px;
    --home-head-content: 24px;
    --home-grid-gap: 16px;
    --home-gutter: 24px;
  }

  .sec-head { row-gap: 16px !important; }
  #packages.bento-section { padding-bottom: 40px !important; }
  #happening.hcs-section { padding-bottom: 24px !important; }
  #appointment { padding-top: 24px !important; }

  #departments .dept-layout {
    width: calc(100% - (var(--home-gutter) * 2)) !important;
  }

  .hcs-carousel .hcs-stage {
    padding-inline: var(--home-gutter) !important;
  }
}

/* Doctor carousel card states: primary-gradient shell with reference-matched layouts. */
#doctors .doc-card5,
#doctors .doc-card5.on {
  background: var(--gradient-primary) !important;
}

#doctors .doc-card5 .dc4-photo,
#doctors .doc-card5.on .dc4-photo {
  background: var(--gradient-primary) !important;
}

#doctors .doc-card5:not(.on) .dc4-info {
  background: var(--color-background, #fff) !important;
  box-shadow: none !important;
}

#doctors .doc-card5.on .dc4-info {
  background: rgba(255, 255, 255, 0.9) !important;
}

#doctors .doc-card5.on:hover .dc4-info {
  background: rgba(255, 255, 255, 0.94) !important;
}

/* =========================================================
   2026-09-17 — OUR DOCTORS: reference-matched glass carousel
   ========================================================= */
#doctors,
#doctors .panel,
#doctors .panel.tint-b {
  background: linear-gradient(180deg, #f3f9fc 0%, #e9f3f8 100%) !important;
}

#doctors { overflow: hidden; }
#doctors .panel {
  padding-inline: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
}
#doctors .container { max-width: 1200px; }

#doctors .focus-row.doc5-row {
  --doctor-card-width: clamp(260px, 22.7vw, 326px);
  --doctor-gap: 24px;
  position: relative;
  width: 100vw !important;
  max-width: none !important;
  height: 560px !important;
  min-height: 560px !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  touch-action: pan-y;
}

#doctors .doc5-row .focus-slide,
#doctors .doc5-row .focus-slide:has(.doc-card4.on),
#doctors .doc5-row .focus-slide:has(.doc-card5.on) {
  position: absolute;
  top: 66px !important;
  left: 50%;
  width: var(--doctor-card-width) !important;
  padding: 0 !important;
  opacity: calc(1 - max(0, var(--doctor-distance) - 2)) !important;
  transform: translateX(calc(-50% + var(--doctor-offset) * (var(--doctor-card-width) + var(--doctor-gap)))) !important;
  transform-origin: center center;
  cursor: pointer;
  pointer-events: auto !important;
  transition: transform 300ms ease, opacity 300ms ease, top 300ms ease !important;
  will-change: transform;
}

#doctors .doc5-row .focus-slide[aria-hidden="true"] {
  pointer-events: none !important;
}

#doctors .doc5-row .focus-slide:has(.doc-card5.on) {
  top: 10px !important;
  cursor: default;
  transform: translateX(calc(-50% + var(--doctor-offset) * (var(--doctor-card-width) + var(--doctor-gap)))) scale(1.12) !important;
}

#doctors .doc-card5,
#doctors .doc-card5.on {
  box-sizing: border-box;
  width: 100%;
  height: 410px !important;
  padding: 12px 12px 18px !important;
  gap: 14px !important;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(16, 58, 82, 0.08) !important;
  transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease !important;
}

#doctors .focus-slide:not(:has(.doc-card5.on)):hover .doc-card5 {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(16, 58, 82, 0.13) !important;
}

#doctors .doc-card5 .dc4-photo,
#doctors .doc-card5.on .dc4-photo {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4 / 3 !important;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(160deg, #dcebf3 0%, #bfdcea 100%) !important;
}

#doctors .doc-card5 .dc4-photo img,
#doctors .doc-card5.on .dc4-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
  transition: transform 300ms ease;
}

#doctors .doc-card5 .dc4-info,
#doctors .doc-card5:not(.on) .dc4-info {
  position: static !important;
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  padding: 2px 16px 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
  backdrop-filter: none !important;
}

#doctors .doc-card5 .dc4-info h3,
#doctors .doc-card5.on .dc4-info h3 {
  margin: 0;
  color: #123a5a;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 1.2;
}

#doctors .doc-card5 .dc4-spec,
#doctors .doc-card5.on .dc4-spec {
  margin: 0;
  color: #2e9bd6;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

#doctors .doc-card5 .dc4-qual,
#doctors .doc-card5.on .dc4-qual {
  margin: 0;
  color: #6b8494;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

#doctors .doc-card5 .dc4-years,
#doctors .doc-card5.on .dc4-years {
  align-self: flex-start;
  margin-top: 8px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: #e7f6ef;
  color: #1f7a5c;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

#doctors .doc-card5.on {
  position: relative;
  height: 500px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(160deg, #eaf4fa 0%, #fff 60%) !important;
  box-shadow: 0 20px 45px rgba(16, 58, 82, 0.16) !important;
}

#doctors .doc-card5.on .dc4-photo {
  height: 100%;
  aspect-ratio: 3 / 4 !important;
  background: linear-gradient(160deg, #2e86ab 0%, #14527a 100%) !important;
}

#doctors .doc-card5.on .dc4-info {
  position: absolute !important;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 20px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: 0 8px 24px rgba(16, 58, 82, 0.12) !important;
  text-align: center;
  backdrop-filter: blur(22px) saturate(140%) !important;
  animation: none !important;
  transition: background 300ms ease, box-shadow 300ms ease, backdrop-filter 300ms ease !important;
}

#doctors .doc-card5.on .dc4-info h3 { font-size: 26px !important; }
#doctors .doc-card5.on .dc4-spec { font-size: 16px; }
#doctors .doc-card5.on .dc4-years { align-self: center; }
#doctors .doc-card5.on .dc4-info > * { animation: none !important; }

@media (max-width: 1023px) {
  #doctors .focus-row.doc5-row {
    --doctor-card-width: min(62vw, 300px);
    height: 530px !important;
    min-height: 530px !important;
  }
  #doctors .doc5-row .focus-slide,
  #doctors .doc5-row .focus-slide:has(.doc-card5.on) {
    top: 22px !important;
  }
  #doctors .doc-card5 { height: 410px !important; }
  #doctors .doc-card5.on { height: 480px !important; }
}

@media (max-width: 767px) {
  #doctors .focus-row.doc5-row {
    --doctor-card-width: min(84vw, 340px);
    --doctor-gap: 18px;
    height: 520px !important;
    min-height: 520px !important;
  }
  #doctors .doc5-row .focus-slide:not(:has(.doc-card5.on)) {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #doctors .doc-card5.on { height: 486px !important; }
  #doctors .sec-head { padding-inline: var(--home-gutter, 24px); }
  #doctors .coverflow-controls { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #doctors .doc5-row .focus-slide,
  #doctors .doc-card5,
  #doctors .doc-card5 * { transition: none !important; }
}

/* =========================================================
   2026-09-17 — WHITE SURFACES, AIRIER RHYTHM, 3-DOCTOR CAROUSEL
   ========================================================= */
:root {
  --home-section-y: clamp(92px, 8vw, 116px);
  --home-head-content: clamp(38px, 3.7vw, 54px);
  --home-grid-gap: clamp(24px, 2.25vw, 30px);
  --home-surface: #fff;
}

/* Keep page bands neutral while preserving gradients inside cards and media. */
body,
main,
.section,
.section > .panel,
.section > .panel.tint-a,
.section > .panel.tint-b,
.scan-section-panel,
.updates-section,
#doctors,
#doctors .panel,
#doctors .panel.tint-b,
#packages.bento-section,
#happening.hcs-section,
#appointment {
  background: var(--home-surface) !important;
}

/* Equal carousel spacing with the existing side-card dimensions unchanged. */
#doctors .focus-row.doc5-row {
  /* Compensates for the active card's 1.12 scale so visible gaps remain 24px. */
  --doctor-gap: 43px;
  height: 520px !important;
  min-height: 520px !important;
}

#doctors .doc5-row .focus-slide:has(.doc-card5.on) {
  top: 28px !important;
}

#doctors .doc-card5.on {
  height: 444px !important;
  background: linear-gradient(180deg, rgba(234, 244, 250, 0) 0%, rgba(20, 82, 122, 1) 100%) !important;
}

#doctors .doc-card5.on .dc4-photo {
  background: linear-gradient(180deg, rgba(46, 134, 171, 0) 0%, rgba(20, 82, 122, 1) 100%) !important;
}

@media (max-width: 1023px) {
  :root {
    --home-section-y: 80px;
    --home-head-content: 38px;
    --home-grid-gap: 24px;
  }

  #doctors .focus-row.doc5-row {
    --doctor-gap: 42px;
    height: 500px !important;
    min-height: 500px !important;
  }

  #doctors .doc-card5.on { height: 444px !important; }
}

@media (max-width: 767px) {
  :root {
    --home-section-y: 64px;
    --home-head-content: 30px;
    --home-grid-gap: 20px;
  }

  #doctors .focus-row.doc5-row {
    --doctor-gap: 18px;
    height: 480px !important;
    min-height: 480px !important;
  }

  #doctors .doc-card5.on { height: 438px !important; }
}

/* =========================================================
   2026-09-17 — CAROUSEL MOTION + FINAL SECTION CORRECTIONS
   ========================================================= */
/* The off-screen card changes sides without crossing through the active card. */
#doctors .doc5-row .focus-slide.doctor-slide-wrap {
  opacity: 0 !important;
  transition: none !important;
}

#doctors .doc5-row .focus-slide,
#doctors .doc5-row .focus-slide:has(.doc-card5.on) {
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease, top 460ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#doctors .doc-card5,
#doctors .doc-card5.on {
  transition: height 460ms cubic-bezier(0.22, 1, 0.36, 1), transform 460ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 460ms ease, background 460ms ease !important;
}

#doctors .doc-card5.on,
#doctors .doc-card5.on .dc4-photo {
  background: linear-gradient(180deg, rgba(19, 102, 129, 0) 0%, rgba(19, 102, 129, 0.6) 100%) !important;
}

/* About is the sole dark page band. */
#about.about-zoom {
  background: #0e2842 !important;
}

/* Keep the complete heading together at every viewport width. */
.hcs-head .hcs-title {
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: center;
  gap: 0.22em;
  max-width: none !important;
  white-space: nowrap;
}

.hcs-head .hcs-title > span {
  display: inline !important;
}

@media (max-width: 767px) {
  .hcs-head .hcs-title {
    font-size: clamp(1.05rem, 4.5vw, 2.2rem) !important;
  }
}

/* =========================================================
   2026-09-17 — DOCTOR CARD SURFACES
   ========================================================= */
#doctors .doc-card5,
#doctors .doc-card5.on {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

#doctors .focus-slide:not(:has(.doc-card5.on)) .doc-card5 {
  background: #ffffff !important;
}

#doctors .focus-slide:not(:has(.doc-card5.on)):hover .doc-card5 {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.13) !important;
}

/* =========================================================
   2026-09-17 — FIVE-CARD CONTINUOUS DOCTORS RAIL
   ========================================================= */
:root {
  --doctor-card-surface: #dcebf3;
  --doctor-card-overlay: linear-gradient(180deg, rgba(11, 43, 69, 0) 42%, rgba(11, 43, 69, 0.92) 100%);
  --doctor-card-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

h1,
h2,
h3,
h4,
.section-title,
.section-title .hl,
.hcs-title,
.as-left h2,
.appt-form h3 {
  font-family: var(--font-head) !important;
  letter-spacing: 0 !important;
}

#doctors .panel {
  padding: clamp(72px, 6vw, 92px) 0 clamp(42px, 4vw, 60px) !important;
}

#doctors .doctors-container {
  width: min(1200px, calc(100% - 48px));
  max-width: 1200px;
}

#doctors .doctors-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(30px, 3vw, 44px);
}

#doctors .doctors-heading {
  min-width: 0;
}

#doctors .doctors-heading .section-title {
  max-width: 17ch;
  margin-top: 16px;
}

#doctors .coverflow-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px !important;
}

#doctors .cc-btn {
  display: grid;
  width: 52px;
  height: 52px;
  min-height: 52px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--teal) 42%, transparent);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  box-shadow: none;
}

#doctors .doctors-continuous-rail {
  display: flex;
  gap: 24px;
  width: 100vw;
  margin-left: calc((100vw - min(1200px, calc(100vw - 48px))) / -2);
  padding: 4px max(24px, calc((100vw - 1200px) / 2)) 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
}

#doctors .doctors-continuous-rail::-webkit-scrollbar {
  display: none;
}

#doctors .doctor-rail-card {
  flex: 0 0 calc((min(1200px, calc(100vw - 48px)) - 96px) / 5);
  scroll-snap-align: start;
}

#doctors .doctor-rail-card .doc-card5,
#doctors .doctor-rail-card .doc-card5.on {
  position: relative;
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 0.72;
  padding: 0 !important;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--doctor-card-surface) !important;
  box-shadow: var(--doctor-card-shadow) !important;
  isolation: isolate;
  transition: transform 300ms ease, box-shadow 300ms ease !important;
}

#doctors .doctor-rail-card .doc-card5::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--doctor-card-overlay);
  content: "";
  pointer-events: none;
}

#doctors .doctor-rail-card .dc4-photo,
#doctors .doctor-rail-card .doc-card5.on .dc4-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  border-radius: 0;
  background: linear-gradient(160deg, var(--doctor-card-surface) 0%, var(--teal-soft) 100%) !important;
}

#doctors .doctor-rail-card .dc4-photo img,
#doctors .doctor-rail-card .doc-card5.on .dc4-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
  transition: transform 300ms ease !important;
}

#doctors .doctor-rail-card .dc4-info,
#doctors .doctor-rail-card .doc-card5.on .dc4-info,
#doctors .doctor-rail-card .doc-card5:not(.on) .dc4-info {
  position: absolute !important;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  min-height: 35%;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  padding: 22px 20px 18px !important;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
  backdrop-filter: none !important;
}

#doctors .doctor-rail-card .dc4-info h3,
#doctors .doctor-rail-card .doc-card5.on .dc4-info h3 {
  color: var(--white);
  font-size: clamp(1.15rem, 1.35vw, 1.35rem) !important;
  font-weight: 600;
  line-height: 1.16;
}

#doctors .doctor-rail-card .dc4-spec,
#doctors .doctor-rail-card .doc-card5.on .dc4-spec {
  color: var(--teal-soft);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

#doctors .doctor-rail-card .dc4-qual,
#doctors .doctor-rail-card .doc-card5.on .dc4-qual {
  color: var(--white);
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.82;
}

#doctors .doctor-rail-card .dc4-years,
#doctors .doctor-rail-card .doc-card5.on .dc4-years {
  align-self: flex-start;
  margin-top: 8px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--white) 88%, transparent);
  color: var(--navy);
  font-size: 0.7rem;
}

#doctors .doctor-rail-card:hover .doc-card5 {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14) !important;
}

#doctors .doctor-rail-card:hover .dc4-photo img {
  transform: scale(1.025) !important;
}

#doctors + .updates-section {
  padding-top: clamp(42px, 4vw, 60px) !important;
}

@media (max-width: 1023px) {
  #doctors .doctors-container {
    width: min(100%, calc(100% - 40px)) !important;
    padding-inline: 0 !important;
  }

  #doctors .doctors-continuous-rail {
    margin-left: -20px;
    padding-inline: 20px;
  }

  #doctors .doctor-rail-card {
    flex-basis: clamp(240px, 38vw, 300px);
  }
}

@media (max-width: 767px) {
  #doctors .panel {
    padding: 56px 0 36px !important;
  }

  #doctors .doctors-container {
    width: 100% !important;
    padding-inline: 20px !important;
  }

  #doctors .doctors-header {
    gap: 16px;
    margin-bottom: 26px;
  }

  #doctors .doctors-heading .eyebrow {
    display: none;
  }

  #doctors .doctors-heading .section-title {
    margin-top: 0;
    font-size: clamp(1.75rem, 8vw, 2.2rem) !important;
  }

  #doctors .coverflow-controls {
    gap: 8px;
  }

  #doctors .cc-btn {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  #doctors .doctors-continuous-rail {
    width: 100vw;
    margin-left: -20px;
    padding: 4px 20px 16px;
  }

  #doctors .doctor-rail-card {
    flex-basis: min(78vw, 310px);
  }

  #doctors + .updates-section {
    padding-top: 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #doctors .doctor-rail-card .doc-card5,
  #doctors .doctor-rail-card .dc4-photo img {
    transition: none !important;
  }
}

/* =========================================================
   2026-09-17 — NAV ALIGNMENT + FOUR-CARD GLASS DOCTOR RAIL
   ========================================================= */
.nav.v3 .nav-top {
  min-height: 64px;
  align-items: center;
}

.nav.v3 .nav-logo-v3 {
  align-self: center;
  padding-block: 0;
}

.nav.v3 .nav-logo-v3 .nl-new {
  width: auto;
  height: clamp(52px, 4.4vw, 64px);
  object-position: center;
}

#doctors .doctors-heading .section-title {
  margin-top: 0;
}

#doctors .doctor-rail-card {
  flex-basis: calc((min(1200px, calc(100vw - 48px)) - 72px) / 4);
}

#doctors .doctor-rail-card .doc-card5::after {
  display: none;
}

#doctors .doctor-rail-card .dc4-info,
#doctors .doctor-rail-card .doc-card5.on .dc4-info,
#doctors .doctor-rail-card .doc-card5:not(.on) .dc4-info {
  min-height: 39%;
  padding: 24px 20px 18px !important;
  border-top: 1px solid color-mix(in srgb, var(--white) 34%, transparent);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.14)
  ) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
}

#doctors .doctor-rail-card .dc4-info h3,
#doctors .doctor-rail-card .doc-card5.on .dc4-info h3,
#doctors .doctor-rail-card .dc4-spec,
#doctors .doctor-rail-card .doc-card5.on .dc4-spec,
#doctors .doctor-rail-card .dc4-qual,
#doctors .doctor-rail-card .doc-card5.on .dc4-qual {
  color: var(--white) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 8px color-mix(in srgb, #136681 45%, transparent);
}

@media (max-width: 1023px) {
  .nav.v3 .nav-top { min-height: 58px; }
  .nav.v3 .nav-logo-v3 .nl-new { height: 50px; }
  #doctors .doctor-rail-card { flex-basis: clamp(250px, 38vw, 310px); }
}

@media (max-width: 767px) {
  .nav.v3 .nav-top { min-height: 54px; }
  .nav.v3 .nav-logo-v3 .nl-new { height: 46px; }
  #doctors .doctor-rail-card { flex-basis: min(78vw, 320px); }
  #doctors .doctor-rail-card .dc4-info,
  #doctors .doctor-rail-card .doc-card5.on .dc4-info,
  #doctors .doctor-rail-card .doc-card5:not(.on) .dc4-info {
    min-height: 38%;
    padding: 22px 18px 16px !important;
  }
}

/* =========================================================
   2026-09-17 — THREE-CARD DOCTOR RAIL + TEXT CONTRAST
   ========================================================= */
@media (min-width: 1024px) {
  #doctors .doctor-rail-card {
    flex-basis: clamp(320px, 25vw, 360px);
  }
}

#doctors .doctor-rail-card .dc4-info h3,
#doctors .doctor-rail-card .doc-card5.on .dc4-info h3 {
  color: var(--navy) !important;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--white) 82%, transparent);
}

#doctors .doctor-rail-card .dc4-spec,
#doctors .doctor-rail-card .doc-card5.on .dc4-spec {
  color: var(--teal) !important;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--white) 82%, transparent);
}

#doctors .doctor-rail-card .dc4-qual,
#doctors .doctor-rail-card .doc-card5.on .dc4-qual {
  color: var(--navy) !important;
  opacity: 0.88 !important;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--white) 82%, transparent);
}

/* =========================================================
   2026-09-17 — DOCTOR CARD TEXT: BLACK NAME / DARK BLUE ROLE + STUDIES
   ========================================================= */
#doctors .doctor-rail-card .dc4-info h3,
#doctors .doctor-rail-card .doc-card5.on .dc4-info h3 {
  color: #111111 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85) !important;
}

#doctors .doctor-rail-card .dc4-spec,
#doctors .doctor-rail-card .doc-card5.on .dc4-spec,
#doctors .doctor-rail-card .dc4-qual,
#doctors .doctor-rail-card .doc-card5.on .dc4-qual {
  color: var(--navy) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85) !important;
}

/* =========================================================
   2026-09-19 — FROSTED GLASS: SHORTER + 80% STRENGTH
   ========================================================= */
#doctors .doctor-rail-card .dc4-info,
#doctors .doctor-rail-card .doc-card5.on .dc4-info,
#doctors .doctor-rail-card .doc-card5:not(.on) .dc4-info {
  min-height: 30%;
  padding: 18px 20px 14px !important;
  border-top: 1px solid color-mix(in srgb, var(--white) 27%, transparent);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.016),
    rgba(255, 255, 255, 0.112)
  ) !important;
  backdrop-filter: blur(18px) saturate(116%) !important;
}

@media (max-width: 767px) {
  #doctors .doctor-rail-card .dc4-info,
  #doctors .doctor-rail-card .doc-card5.on .dc4-info,
  #doctors .doctor-rail-card .doc-card5:not(.on) .dc4-info {
    min-height: 30%;
    padding: 16px 18px 13px !important;
  }
}

/* =========================================================
   2026-09-19 — NAV LOGO: VERTICALLY CENTERED ACROSS BOTH ROWS
   ========================================================= */
@media (min-width: 1024px) {
  .nav.v3 .container {
    position: relative;
  }

  .nav.v3 .nav-logo-v3 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding-block: 0;
    z-index: 5;
  }

  .nav.v3 .nav-top .nav-pills {
    margin-left: auto;
  }
}