/* ============================================================================
   ICARE "HORIZON" DESIGN LAYER — layered over the exact Phase 2 production CSS.
   site.css stays byte-identical (parity-verified); everything below re-skins the
   same markup: aurora-glass surfaces, deep gradient heroes, glass navigation,
   pointer-reactive cards, and self-hosted variable typography.
   Interactivity lives in /assets/fx.js; every effect degrades gracefully with
   no JavaScript and honors prefers-reduced-motion.
   ========================================================================== */

/* ---------- Legacy portable-source rules (preserved) ---------- */
.mobileMenu__panel,
.mobileMenu__backdrop {
  animation: icare-menu-in 160ms ease-out;
}

/* Keep the modal navigation above the fixed mobile call bar. Hiding the bar
   also removes its links from keyboard and assistive-technology navigation
   while the modal is open. */
body.mobile-menu-open .siteHeader {
  z-index: 120;
}

body.mobile-menu-open .mobileActionBar {
  visibility: hidden;
  pointer-events: none;
}

@keyframes icare-menu-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

noscript .noScriptNotice {
  background: #f8d7ce;
  color: #08293a;
  padding: 12px 20px;
  text-align: center;
  font-weight: 700;
}

/* ---------- Typography: self-hosted variable fonts ---------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-var.woff2) format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-var.woff2) format("woff2");
}

/* Metric-tuned local fallbacks so font-display:swap does not shift layout.
   Values computed from the shipped woff2 files vs Segoe UI/Arial metrics
   (Space Grotesk is ~11% wider than either; unadjusted swap moves headings).
   Android aliases Arial to Roboto, so the same faces cover old phones. */
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Segoe UI"), local("Arial"), local("Roboto");
  size-adjust: 110.6%;
  ascent-override: 89%;
  descent-override: 26.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Segoe UI"), local("Arial"), local("Roboto");
  size-adjust: 107%;
  ascent-override: 90.5%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

/* ---------- Horizon tokens ---------- */
:root {
  --hz-display: "Space Grotesk", "Space Grotesk Fallback", "Segoe UI", system-ui, sans-serif;
  --hz-body: "Inter", "Inter Fallback", "Segoe UI", system-ui, sans-serif;

  --hz-void: #060f16;
  --hz-deep: #0a1a26;
  --hz-deep-2: #0d2334;
  --hz-ink: #0e2431;
  --hz-mist: #f3f7f9;
  --hz-paper: rgba(252, 254, 255, 0.86);

  --hz-teal: #12b5a4;
  --hz-sky: #4cc3ff;
  --hz-coral: #ff8a66;
  --hz-violet: #8f7bff;
  --hz-sage: #7fd8a5;

  --hz-grad-brand: linear-gradient(112deg, #12b5a4 0%, #4cc3ff 55%, #8f7bff 100%);
  --hz-grad-warm: linear-gradient(112deg, #ff8a66 0%, #ffb15c 100%);
  /* end stop lightened from #b3a6ff: that violet fell to 3.87:1 where the
     strongest hero glow (--hero-a at full opacity) lightens the backdrop;
     #c6bcff holds 4.75:1 there and >=9:1 on the unlit hero base. */
  --hz-grad-text: linear-gradient(100deg, #67e8d9 0%, #7fd0ff 60%, #c6bcff 100%);
  /* darker gradient for clip-to-text on LIGHT surfaces: every stop >=4.5:1 on white */
  --hz-grad-text-dark: linear-gradient(112deg, #0b7d71 0%, #15639b 55%, #5c4bd3 100%);

  --hz-glass: rgba(255, 255, 255, 0.62);
  --hz-glass-strong: rgba(255, 255, 255, 0.78);
  --hz-glass-dark: rgba(13, 30, 43, 0.55);
  --hz-hairline: rgba(12, 52, 72, 0.14);
  --hz-hairline-light: rgba(255, 255, 255, 0.16);

  --hz-glow-teal: 0 0 0 1px rgba(18, 181, 164, 0.25), 0 18px 60px -18px rgba(18, 181, 164, 0.45);
  --hz-shadow-1: 0 6px 24px -8px rgba(8, 30, 45, 0.16);
  --hz-shadow-2: 0 24px 80px -24px rgba(8, 30, 45, 0.34);

  --hz-r-lg: 22px;
  --hz-r-xl: 28px;

  --hz-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Pointer-reactive vars (--mx / --my / --spot) are set as inline styles by
     fx.js on the elements that use them. They are deliberately NOT defined
     here: every var() usage below carries its own fallback, so with no JS
     each surface renders its intended static design (hero grid mask at
     70% / 30%, card spotlight hidden). */
}

/* ---------- Base canvas & typography swap ---------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--hz-body);
  background: var(--hz-mist);
  font-optical-sizing: auto;
}

/* fx.js injects <canvas class="fxAurora"> as the interactive backdrop.
   The Pulse Grid draws crisp full-resolution dots, so the canvas maps 1:1 to
   the viewport (no overscan, no upscale blur, no filters). */
.fxAurora {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Static aurora fallback (no JS / reduced motion): the page never looks flat */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(52vmax 40vmax at 12% -6%, rgba(18, 181, 164, 0.16), transparent 62%),
    radial-gradient(48vmax 38vmax at 96% 12%, rgba(76, 195, 255, 0.15), transparent 60%),
    radial-gradient(44vmax 40vmax at 78% 96%, rgba(255, 138, 102, 0.12), transparent 62%),
    radial-gradient(40vmax 36vmax at 4% 88%, rgba(143, 123, 255, 0.1), transparent 60%),
    var(--hz-mist);
  /* Old-Android compositors repaint fixed backgrounds during scroll; pinning
     this to its own layer trades one viewport texture for zero repaints.
     translateZ(0) promotes on the very engines that predate will-change. */
  will-change: transform;
  transform: translateZ(0);
}

/* The Pulse Grid canvas draws over these static gradients (dots at z -1,
   gradients at z -2), so the ambient brand color stays underneath the grid in
   every mode — animated, reduced-motion, no-JS, and low-end devices alike.
   When fx.js activates the hero grid it sets .fxGridOn, replacing the static
   masked CSS grid on heroes so the two never double up. */
.fxGridOn .pageHero::after {
  display: none;
}

h1, h2, h3,
.premiumHero h1,
.pageHero h1 {
  font-family: var(--hz-display);
  font-weight: 560;
  letter-spacing: -0.028em;
}

/* site.css pins Georgia on ~35 scoped selectors; swap them all to the display
   face at matching specificity so the cascade order settles it. */
.sectionHeading h2, .connectedCare h2, .referralBand h2, .locationSection h2,
.contentSection__heading h2, .relatedSection h2, .conversionStrip h2,
.wholePersonSection__copy h2, .careExperienceSection__copy h2, .confidenceCard h2,
.homeHero__copy h1, .pageHero__copy h1, .premiumHero__copy h1,
.serviceCard h3, .infoCard h3, .stepsGrid h3, .startPathCard h3,
.premiumServiceCard h3, .experienceList h3, .premiumSteps h3, .pageCallout h3,
.faqList summary, .megaMenu__intro strong, .referralBand__badge strong,
.premiumHero__badge strong, .editorialMedia figcaption strong,
.pageHeroMedia figcaption strong, .premiumTrustRail__grid span,
.orbitCenter span, .orbitNode strong, .pathPoint span, .pathResult b,
.stepNumber, .startPathCard__number, .pageHeroArt__center,
.featureList span, .pageSteps span, .premiumSteps li > span,
.experienceList article > span {
  font-family: var(--hz-display);
  letter-spacing: -0.015em;
}

.pageSteps p {
  font-family: var(--hz-body);
}

/* Hero headline scale (must outrank site.css's scoped clamps) */
.pageHero__copy h1 {
  font-size: clamp(2.7rem, 4.4vw, 4.2rem);
  line-height: 1.05;
  font-weight: 560;
  letter-spacing: -0.03em;
}

.premiumHero__copy h1 {
  font-size: clamp(3rem, 5vw, 4.6rem);
  line-height: 1.02;
  font-weight: 560;
  letter-spacing: -0.03em;
}

.homeHero__copy h1 {
  font-weight: 560;
  letter-spacing: -0.03em;
}

.eyebrow {
  font-family: var(--hz-display);
  font-weight: 640;
  letter-spacing: 0.22em;
}

/* Gradient eyebrow accent on light surfaces.
   AA-safe solid color first; the clip-to-text gradient is applied only where
   supported (otherwise `color: transparent` over an unclipped gradient box
   renders the label invisible). Stops darkened so both ends hold >=4.5:1 on
   the paper surfaces (#087b78 = 5.0:1, #15639b = 6.3:1 on white). */
.contentSection .eyebrow,
.sectionHeading .eyebrow {
  color: var(--teal-700, #087b78);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .contentSection .eyebrow,
  .sectionHeading .eyebrow {
    background: linear-gradient(100deg, #087b78, #15639b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------- Accessibility: visible focus everywhere ----------
   Two-tone ring: the teal outline carries >=3:1 on light paper, and the white
   halo underneath carries >=3:1 on the dark heroes/footer AND on the teal
   aurora glow fields where teal-on-teal alone would fall to ~2.2:1. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #0a8f81;
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95);
}

/* ============================================================================
   HEADER — floating glass command bar with futuristic tab navigation
   ========================================================================== */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 80;
}

/* No blur: at 92% opacity the filtered backdrop is invisible, but old GPUs
   still paid full price re-filtering a sticky full-width strip every frame. */
.utilityBar {
  background: rgba(6, 15, 22, 0.95);
  border-bottom: 1px solid var(--hz-hairline-light);
  letter-spacing: 0.02em;
}

.mainHeader {
  background: var(--hz-glass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid var(--hz-hairline);
  transition: box-shadow 0.4s var(--hz-ease), background 0.4s var(--hz-ease);
}

.fxScrolled .mainHeader {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 40px -18px rgba(8, 30, 45, 0.35);
}

/* Navigation links become glowing pill tabs */
.desktopNav {
  gap: 6px;
  font-family: var(--hz-display);
  font-weight: 560;
  letter-spacing: 0.01em;
}

.desktopNav > a,
.navMenu > summary {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.25s var(--hz-ease), border-color 0.25s var(--hz-ease),
    color 0.25s var(--hz-ease), box-shadow 0.25s var(--hz-ease);
}

.desktopNav > a:hover,
.navMenu > summary:hover,
.navMenu[open] > summary {
  background: rgba(18, 181, 164, 0.1);
  border-color: rgba(18, 181, 164, 0.32);
  box-shadow: inset 0 0 18px rgba(18, 181, 164, 0.08), 0 4px 18px -8px rgba(18, 181, 164, 0.5);
  color: #085f56;
}

/* Mega menu / mini menu → glass panels */
.megaMenu,
.miniMenu {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--hz-hairline);
  border-radius: var(--hz-r-lg);
  box-shadow: var(--hz-shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.megaMenu__links a,
.miniMenu a {
  border-radius: 14px;
  transition: background 0.2s var(--hz-ease), transform 0.2s var(--hz-ease);
}

.megaMenu__links a:hover,
.miniMenu a:hover {
  background: linear-gradient(100deg, rgba(18, 181, 164, 0.1), rgba(76, 195, 255, 0.1));
  transform: translateX(3px);
}

/* ---------- Buttons: gradient cores, glow, shine sweep ---------- */
.button {
  font-family: var(--hz-display);
  font-weight: 620;
  letter-spacing: 0.015em;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--hz-ease), box-shadow 0.25s var(--hz-ease),
    background 0.25s var(--hz-ease), border-color 0.25s var(--hz-ease);
}

.button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--hz-ease);
  pointer-events: none;
}

.button:hover::after { left: 130%; }

.button--primary {
  background: var(--hz-grad-warm);
  color: #2a1206;
  border: none;
  box-shadow: 0 10px 34px -12px rgba(255, 122, 80, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.button--primary:hover {
  background: var(--hz-grad-warm);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(255, 122, 80, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.button--secondary {
  /* Opacity raised in lieu of per-button backdrop blur (several instances per
     page; each was its own filtered layer on old phones). */
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(12, 52, 72, 0.28);
}

.button--secondary:hover {
  border-color: rgba(18, 181, 164, 0.6);
  box-shadow: var(--hz-glow-teal);
  transform: translateY(-2px);
}

/* ============================================================================
   HEROES — deep-space aurora fields with glass instrumentation
   ========================================================================== */
.pageHero {
  background:
    radial-gradient(60vmax 46vmax at 82% -18%, var(--hero-a, rgba(76, 195, 255, 0.34)), transparent 58%),
    radial-gradient(52vmax 44vmax at -8% 110%, var(--hero-b, rgba(18, 181, 164, 0.3)), transparent 55%),
    linear-gradient(158deg, #071420 0%, #0b2233 52%, #0d2a3c 100%);
  color: #eef6fa;
}

/* subtle holographic grid overlay */
.pageHero::before {
  border-color: rgba(255, 255, 255, 0.1);
}

.pageHero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60% 70% at var(--mx, 70%) var(--my, 30%), rgba(0, 0, 0, 0.85), transparent 75%);
  mask-image: radial-gradient(60% 70% at var(--mx, 70%) var(--my, 30%), rgba(0, 0, 0, 0.85), transparent 75%);
}

/* per-variant aurora hues (same classes, new atmospheres) */
.pageHero--sky   { --hero-a: rgba(76, 195, 255, 0.36); --hero-b: rgba(18, 181, 164, 0.28); background-color: #081826; }
.pageHero--teal  { --hero-a: rgba(31, 216, 187, 0.32); --hero-b: rgba(76, 195, 255, 0.24); background-color: #071e22; }
.pageHero--coral { --hero-a: rgba(255, 138, 102, 0.34); --hero-b: rgba(143, 123, 255, 0.22); background-color: #160f1c; }
.pageHero--sand  { --hero-a: rgba(255, 177, 92, 0.3);  --hero-b: rgba(18, 181, 164, 0.24); background-color: #131313; }
.pageHero--sage  { --hero-a: rgba(127, 216, 165, 0.3); --hero-b: rgba(76, 195, 255, 0.22); background-color: #0a1c18; }
.pageHero--navy  { --hero-a: rgba(76, 195, 255, 0.3);  --hero-b: rgba(143, 123, 255, 0.26); background-color: #0a1626; }

.pageHero h1 {
  color: #f7fbfd;
  text-shadow: 0 2px 40px rgba(76, 195, 255, 0.18);
}

.pageHero__copy > p {
  color: rgba(233, 243, 248, 0.86);
}

/* AA-safe solid fallback first; clip-to-text only where supported, so the
   label can never render as an empty gradient box. */
.pageHero .eyebrow {
  color: #9fded8;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pageHero .eyebrow {
    background: var(--hz-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.breadcrumb,
.breadcrumb a {
  /* 0.72 alpha sat at exactly 4.51:1 where the hero glow is strongest; 0.85
     restores a real margin (5.6:1 worst case) for this small bold text. */
  color: rgba(226, 238, 244, 0.85);
}

.breadcrumb a:hover { color: #fff; }

.pageHero .button--secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.34);
  color: #f2f8fb;
}

.pageHero .button--secondary:hover {
  border-color: rgba(103, 232, 217, 0.75);
  box-shadow: 0 0 0 1px rgba(103, 232, 217, 0.3), 0 16px 48px -16px rgba(18, 181, 164, 0.6);
}

/* hero media becomes a glass viewport */
.pageHeroMedia {
  border-radius: var(--hz-r-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 90px -30px rgba(0, 0, 0, 0.7),
    0 0 80px -30px var(--hero-a, rgba(76, 195, 255, 0.4));
}

.pageHero__footer {
  /* No blur: the backdrop here is the hero's own smooth gradient — blurring a
     gradient returns the same pixels, so the filter was pure cost. */
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid var(--hz-hairline-light);
  /* 0.92 alpha: at 0.78 this small uppercase text measured 4.60:1 where the
     strip crosses the bottom-left --hero-b glow (its strongest point). */
  color: rgba(230, 240, 246, 0.92);
  font-family: var(--hz-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* #7fd0ff measured 4.35:1 over the glow-lit strip; #b7e3ff holds 5.4:1 there
   and 9.2:1 on the unlit strip. */
.pageHero__footer a { color: #b7e3ff; }

/* Homepage premium hero: deepen the veil into an aurora field */
.premiumHero { background: var(--hz-void); }

.premiumHero__veil {
  background:
    radial-gradient(48vmax 40vmax at 84% 4%, rgba(76, 195, 255, 0.3), transparent 58%),
    radial-gradient(42vmax 36vmax at 8% 96%, rgba(18, 181, 164, 0.3), transparent 55%),
    linear-gradient(120deg, rgba(6, 15, 22, 0.92) 8%, rgba(6, 15, 22, 0.55) 46%, rgba(6, 15, 22, 0.28) 100%);
}

.premiumHero .eyebrow {
  color: #9fded8;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .premiumHero .eyebrow {
    background: var(--hz-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.premiumHero__badge {
  /* 0.82, not 0.6: the badge floats over the hero photo, whose local
     luminance is not under this layer's control. At 0.6 the small teal
     label fell to 3.1:1 over a bright photo region; 0.82 keeps every badge
     color >=6.7:1 even over pure white while the blur keeps the glass read. */
  background: rgba(10, 26, 38, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--hz-hairline-light);
  border-radius: var(--hz-r-lg);
  box-shadow: var(--hz-shadow-2);
}

.premiumTrustRail {
  /* No blur: 85% opaque over the hero's gradient field — effect invisible. */
  background: rgba(6, 15, 22, 0.88);
  border-top: 1px solid var(--hz-hairline-light);
}

/* ---------- Scope bar: dark glass console strip bridging hero → content ---------- */
.scopeBar {
  /* No blur: 94% opaque — the filtered backdrop could never be seen. */
  background: rgba(9, 22, 32, 0.95);
  color: rgba(226, 238, 244, 0.85);
  border-bottom: 1px solid var(--hz-hairline-light);
}

.scopeBar__inner > span {
  background: var(--hz-grad-brand);
  color: #04211d;
  font-weight: 800;
}

.scopeBar__inner p {
  color: rgba(228, 240, 246, 0.9);
}

/* ============================================================================
   CONTENT SURFACES — translucent paper over the aurora
   ========================================================================== */
.contentSection {
  background: var(--hz-paper);
}

.contentSection--tint {
  background: rgba(238, 246, 249, 0.82);
}

/* ---------- Cards: glass, gradient hairlines, pointer spotlight ---------- */
.infoCard,
.premiumServiceCard,
.startPathCard,
.confidenceCard {
  background: var(--hz-glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid var(--hz-hairline);
  box-shadow: var(--hz-shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.35s var(--hz-ease), box-shadow 0.35s var(--hz-ease),
    border-color 0.35s var(--hz-ease);
}

/* pointer-tracked spotlight (fx.js drives --mx/--my/--spot).
   NOTE: .startPathCard uses ::before because site.css already owns
   .startPathCard::after (decorative corner circle) — reusing ::after would
   clobber it and inherit its 190px size + visible border. */
.infoCard::before,
.premiumServiceCard::after,
.startPathCard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--spot, 0);
  transition: opacity 0.35s var(--hz-ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(76, 195, 255, 0.16), rgba(18, 181, 164, 0.08) 45%, transparent 70%);
}

.infoCard:hover,
.premiumServiceCard:hover,
.startPathCard:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 181, 164, 0.45);
  box-shadow: var(--hz-shadow-2), var(--hz-glow-teal);
}

.infoCard__number {
  font-family: var(--hz-display);
  font-weight: 700;
  /* AA-safe solid first; the brand gradient's sky stop is ~2:1 on the light
     glass cards, and clip-to-text without @supports would render an invisible
     numeral on engines that ignore the clip. Same pattern as the eyebrows. */
  color: var(--teal-700, #087b78);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .infoCard__number {
    background: var(--hz-grad-text-dark);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* #0a8f81 measured 3.98:1 on the white glass cards — under AA for this small
   bold link. teal-700 holds 5.1:1 (5.06:1 on the aurora-tinted worst case). */
.infoCard__link { color: var(--teal-700, #087b78); }

/* ---------- Numbered lists: holographic numerals & energy lines ----------
   Dark gradient (the token built for clip-to-text on light surfaces): the
   brand gradient fell to ~2:1 against the paper sections. Solid AA fallback
   first so unsupported engines keep site.css's colored-circle numerals
   instead of an invisible transparent box. */
.featureList li > span,
.pageSteps li > span,
.premiumSteps li > span {
  font-family: var(--hz-display);
  font-weight: 700;
  color: var(--teal-700, #087b78);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .featureList li > span,
  .pageSteps li > span,
  .premiumSteps li > span {
    background: var(--hz-grad-text-dark);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* site.css shadows the (now backgroundless) 56px premiumSteps circle —
       without this, a stray grey smudge floats under each numeral. */
    box-shadow: none;
  }
}

.featureList li {
  border-bottom: 1px solid rgba(18, 181, 164, 0.18);
  transition: background 0.3s var(--hz-ease), padding-left 0.3s var(--hz-ease);
}

.featureList li:hover {
  background: linear-gradient(90deg, rgba(18, 181, 164, 0.07), transparent 70%);
  padding-left: 10px;
}

.pageSteps li {
  border-top: 1px solid rgba(18, 181, 164, 0.22);
}

/* ---------- FAQ: glass disclosure rows ---------- */
.faqList details {
  /* No blur: N FAQ rows were N extra filtered layers on old Androids, over a
     backdrop that is already ~86%-opaque section paper. Slightly higher
     opacity keeps the glass read. */
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--hz-hairline);
  border-radius: 16px;
  margin-bottom: 12px;
  padding-inline: 18px;
  transition: border-color 0.3s var(--hz-ease), box-shadow 0.3s var(--hz-ease);
}

.faqList details[open] {
  border-color: rgba(18, 181, 164, 0.5);
  box-shadow: var(--hz-glow-teal);
  background: rgba(255, 255, 255, 0.8);
}

.faqList summary { font-family: var(--hz-display); font-weight: 560; }

.faqList summary b {
  font-family: var(--hz-body);
  transition: transform 0.3s var(--hz-ease), color 0.3s var(--hz-ease);
}

.faqList details[open] summary b {
  transform: rotate(45deg);
  color: #0a8f81;
}

/* ---------- Callouts: glass with signal edges ---------- */
.pageCallout {
  /* No blur: over ~86%-opaque section paper the filter was imperceptible. */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--hz-hairline);
  border-left: 4px solid var(--hz-teal);
  box-shadow: var(--hz-shadow-1);
}

.pageCallout--coral { border-left-color: #e4502e; }
.pageCallout--teal  { border-left-color: var(--hz-teal); }
.pageCallout--navy  { border-left-color: #1d7fc4; }
.pageCallout--sand  { border-left-color: #d9942e; }

/* ============================================================================
   DEEP FIELDS — related sections, conversion strip, footer
   ========================================================================== */
.relatedSection,
.conversionStrip,
.siteFooter {
  background:
    radial-gradient(50vmax 40vmax at 88% -10%, rgba(76, 195, 255, 0.14), transparent 60%),
    radial-gradient(46vmax 38vmax at 2% 108%, rgba(18, 181, 164, 0.13), transparent 58%),
    var(--hz-deep);
  position: relative;
}

.conversionStrip {
  border-block: 1px solid var(--hz-hairline-light);
}

.relatedSection .infoCard,
.relatedSection .infoCard--link {
  background: rgba(255, 255, 255, 0.07);
  /* The section behind these cards is fully opaque (--hz-deep + gradients),
     so the inherited card blur filtered a flat backdrop: zero visual change,
     three fewer filtered layers per page. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--hz-hairline-light);
  color: #e8f1f6;
  box-shadow: none;
}

.relatedSection .infoCard h3 { color: #fff; }
.relatedSection .infoCard p { color: rgba(232, 241, 246, 0.75); }
.relatedSection .infoCard__link { color: #67e8d9; }

.relatedSection .infoCard:hover {
  border-color: rgba(103, 232, 217, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

.siteFooter {
  border-top: 1px solid var(--hz-hairline-light);
}

.siteFooter h2 {
  font-family: var(--hz-display);
  letter-spacing: 0.16em;
}

.footerLegal {
  border-top: 1px solid var(--hz-hairline-light);
}

/* ---------- Crisis bar: maximum-contrast, deliberately not glassy ---------- */
.crisisBar {
  background: #050b10;
  color: rgba(255, 255, 255, 0.88);
  border-top: 2px solid #e4502e;
}

.crisisBar a {
  color: #ffb3a0;
  text-decoration: underline;
}

/* ---------- Mobile action bar: glass dock ---------- */
@media (max-width: 900px) {
  .mobileActionBar {
    background: rgba(10, 26, 38, 0.82);
    /* Kept (it is the signature always-on-screen glass on phones), but at a
       smaller radius — blur cost grows with radius and this bar re-filters on
       every scroll frame. */
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    border-top: 1px solid var(--hz-hairline-light);
    box-shadow: 0 -14px 44px -18px rgba(0, 0, 0, 0.55);
  }
}

/* ---------- Mobile menu: dark glass panel ---------- */
.mobileMenu__panel {
  /* No blur: 94% opaque — invisible effect, and this full-height panel was
     the single most expensive filtered surface on phones while open. */
  background: rgba(8, 19, 28, 0.96);
}

/* ============================================================================
   MOTION — scroll reveals (fx.js) with strict reduced-motion guards
   ========================================================================== */
/* The hidden state carries NO transition: if a frame painted before fx.js
   ran, adding .fxReveal hides the element instantly instead of animating a
   visible fade-OUT. The transition lives on the revealed state, so only the
   hidden → visible direction ever animates. */
.fxReveal {
  opacity: 0;
  transform: translateY(18px);
}

.fxReveal.fxIn {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--hz-ease), transform 0.8s var(--hz-ease);
  transition-delay: calc(var(--fxi, 0) * 70ms);
}

/* Never hide content when JS is absent: .fxReveal is only added by fx.js */

/* Print: a below-fold element still waiting on its IntersectionObserver keeps
   opacity:0 — without this guard it prints as blank space. */
@media print {
  .fxAurora,
  .fxStars { display: none; }
  .fxReveal,
  .fxReveal.fxIn { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fxAurora { display: none; }
  .fxReveal,
  .fxReveal.fxIn { opacity: 1; transform: none; transition: none; }
  .button::after { display: none; }
  .infoCard, .premiumServiceCard, .startPathCard, .confidenceCard,
  .featureList li, .button, .megaMenu__links a, .miniMenu a {
    transition: none;
  }
  /* legacy menu fade (top of file) — completeness, not vestibular risk */
  .mobileMenu__panel,
  .mobileMenu__backdrop { animation: none; }
}

/* ---------- Fallbacks when backdrop-filter is unsupported ---------- */
@supports not (backdrop-filter: blur(1px)) {
  /* Only the surfaces that still use backdrop-filter need solid stand-ins;
     faqList/pageCallout/scopeBar/mobileMenu now render blur-free everywhere. */
  .mainHeader { background: #fdfeff; }
  .megaMenu, .miniMenu { background: #ffffff; }
  .infoCard, .premiumServiceCard, .startPathCard, .confidenceCard { background: #ffffff; }
  .relatedSection .infoCard, .relatedSection .infoCard--link { background: rgba(255, 255, 255, 0.07); }
  .mobileActionBar { background: #0a1a26; }
  .premiumHero__badge { background: #0a1a26; }
}

/* ---------- Small screens: lighter effects, same identity ---------- */
@media (max-width: 720px) {
  .pageHero::after { display: none; }
  .pageHero__copy h1 { font-size: clamp(2.15rem, 8.6vw, 2.9rem); }
  .premiumHero__copy h1 { font-size: clamp(2.4rem, 10vw, 3.1rem); }
  .infoCard, .premiumServiceCard, .startPathCard, .confidenceCard {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  /* Sticky header re-filters on every scroll frame; halve the radius where
     GPUs are weakest. */
  .mainHeader {
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    backdrop-filter: blur(12px) saturate(1.5);
  }
}

/* ============================================================================
   REGRESSION FIXES — site.css scoped rules that still painted old-design
   colors inside surfaces this layer turned dark (coverage audit). Kept at the
   end of the file so they also outrank the @supports fallbacks above.
   ========================================================================== */

/* ---------- Homepage premium hero: copy was still navy-on-dark ----------
   site.css paints .premiumHero__copy h1 in navy-950, its em in teal-700, the
   intro p in #405e6b and the checklist in navy-800 — all invisible on the new
   void/aurora field. site.css also hides the veil at <=720px and reflows the
   photo, leaving the copy directly on .premiumHero__canvas, which site.css
   paints #f6f2eb — keep the canvas dark at every width. */
.premiumHero__canvas { background: var(--hz-void); }

.premiumHero__copy h1 {
  color: #f7fbfd;
  text-shadow: 0 2px 40px rgba(76, 195, 255, 0.18);
}

.premiumHero__copy h1 em { color: #67e8d9; }

.premiumHero__copy > p { color: rgba(233, 243, 248, 0.88); }

.premiumHero__checks { color: rgba(226, 238, 244, 0.85); }

.premiumHero__checks li:before { color: #67e8d9; }

.premiumHero .button--secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.34);
  color: #f2f8fb;
}

.premiumHero .button--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(103, 232, 217, 0.75);
  box-shadow: 0 0 0 1px rgba(103, 232, 217, 0.3), 0 16px 48px -16px rgba(18, 181, 164, 0.6);
}

/* ---------- Trust rail: site.css text/borders assumed a white rail ---------- */
.premiumTrustRail { border-bottom-color: rgba(255, 255, 255, 0.1); }
.premiumTrustRail__grid span { color: #67e8d9; }
.premiumTrustRail__grid strong { color: #f2f8fb; }
.premiumTrustRail__grid small { color: rgba(226, 238, 244, 0.66); }
.premiumTrustRail__grid > div:not(:last-child) { border-right-color: var(--hz-hairline-light); }

@media (max-width: 940px) {
  .premiumTrustRail__grid > div:nth-child(-n+2) { border-bottom-color: var(--hz-hairline-light); }
}

@media (max-width: 720px) {
  .premiumTrustRail__grid > div { border-bottom-color: var(--hz-hairline-light); }
}

/* ---------- Page hero footer strip: site.css's `.pageHero__footer .container`
   (0,2,0) sets color:var(--muted) and outranked this layer's (0,1,0) light
   color — near-invisible gray on the dark strip. ---------- */
.pageHero__footer .container { color: rgba(230, 240, 246, 0.92); }

/* ---------- Conversion strip: site.css's scoped `.conversionStrip
   .button--secondary { color: white }` met this layer's white-glass secondary
   background — white on white. ---------- */
.conversionStrip .button--secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  color: #f2f8fb;
}

.conversionStrip .button--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(103, 232, 217, 0.75);
  box-shadow: 0 0 0 1px rgba(103, 232, 217, 0.3), 0 16px 48px -16px rgba(18, 181, 164, 0.6);
}

/* ---------- Referral confidence card: the glass card override beat site.css's
   navy background at equal specificity, stranding its white text (h2/p/link)
   on white glass. Restore a deep field so the intended light/dark card pair
   survives. The background is opaque, so the inherited card blur could never
   be seen — drop it too, or old GPUs pay for a 100%-occluded filter. ---------- */
.confidenceCard--referral {
  background:
    radial-gradient(46vmax 38vmax at 88% -10%, rgba(76, 195, 255, 0.16), transparent 60%),
    radial-gradient(42vmax 34vmax at 0% 110%, rgba(18, 181, 164, 0.15), transparent 58%),
    var(--hz-deep);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--hz-hairline-light);
  box-shadow: var(--hz-shadow-2);
}

/* ---------- Navy page callout (6 pages): same strand — site.css keeps
   color:white while this layer made the background white. ---------- */
.pageCallout--navy {
  background: rgba(10, 26, 38, 0.94);
  border-color: var(--hz-hairline-light);
  border-left: 4px solid #4cc3ff;
  color: #eef6fa;
}

/* ---------- Mobile action bar: site.css gives links navy-950 text and a faint
   navy border — invisible on the new dark glass dock. ---------- */
@media (max-width: 900px) {
  .mobileActionBar a {
    color: #eef6fa;
    /* 0.45, not 0.28: the pill boundary on this glass dock measured 2.24:1
       over light page content behind it — under the 3:1 non-text minimum for
       the one control older patients use most. 0.45 holds 3.45:1 worst case. */
    border-color: rgba(255, 255, 255, 0.45);
  }

  .mobileActionBar a:last-child {
    background: var(--hz-grad-warm);
    border-color: transparent;
    color: #2a1206;
  }
}

/* ---------- Mobile menu: site.css colored every part of this JS-built panel
   for a light warm-white sheet (navy links, muted group links, navy close
   button, coral-dark emergency link); the panel is now rgba(8,19,28,.96). ---------- */
.mobileMenu__panel { color: #e8f1f6; }

/* the cloned header logo is a dark-on-transparent image — give it a light
   chip, matching site.css's own .siteFooter .logo treatment */
.mobileMenu__top .logo {
  background: #fff;
  border-radius: 14px;
  padding: 8px 12px;
}

.mobileMenu__close {
  color: #eef6fa;
  border-color: rgba(255, 255, 255, 0.35);
}

.mobileMenu__links > a {
  color: #f2f8fb;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.mobileMenu__group { border-bottom-color: rgba(255, 255, 255, 0.14); }

.mobileMenu__group a { color: rgba(226, 238, 244, 0.75); }

.mobileMenu__panel .mobileEmergency { color: #ffb3a0; }

.mobileMenu__panel .mobileCall {
  background: var(--hz-grad-warm);
  color: #2a1206;
}

/* the layer's teal focus ring is too dark for the panel */
.mobileMenu__panel a:focus-visible,
.mobileMenu__panel button:focus-visible { outline-color: #67e8d9; }

/* ---------- Mega menu intro: plain .eyebrow stays teal-700 on the navy intro
   card — ~1.8:1. Pre-existing in Phase 2, but cheap to correct here. ---------- */
.megaMenu__intro .eyebrow { color: #9fded8; }

/* ---------- Harmonize the remaining opaque cream/warm-white sections with the
   translucent paper system so no old-palette islands sit on the aurora ---------- */
.startPathSection,
.careExperienceSection,
.confidenceSection,
.locationSection { background: var(--hz-paper); }

.premiumServices,
.premiumProcess { background: rgba(238, 246, 249, 0.82); }

/* ---------- Precision wayfinding — a restrained, luminous location frame
   built around the owner-supplied orientation map. The map stays static and
   the separate CTA opens current routing, so the visual never masquerades as
   an embedded interactive map. ---------- */
.premiumLocation {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(42rem 30rem at -8% 8%, rgba(76, 195, 255, 0.11), transparent 68%),
    radial-gradient(34rem 28rem at 108% 92%, rgba(18, 181, 164, 0.1), transparent 70%),
    var(--hz-paper);
}

.premiumLocation::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(12, 52, 72, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 52, 72, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 72%);
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.premiumLocation .locationGrid {
  position: relative;
  z-index: 1;
  align-items: center;
}

.locationMap {
  min-width: 0;
  margin: 0;
}

.locationMap__frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(159, 222, 216, 0.58);
  border-radius: 32px;
  background: #dfe8ee;
  box-shadow:
    0 34px 80px rgba(7, 30, 44, 0.18),
    0 10px 28px rgba(7, 30, 44, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.locationMap__frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 24px;
  box-shadow: inset 0 0 30px rgba(76, 195, 255, 0.08);
}

.locationMap__image {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.86) contrast(1.025);
}

.locationMap__frame picture { display: block; }
.locationMap__surface { position: relative; }

.locationMap__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 30, 44, 0.02) 48%, rgba(7, 30, 44, 0.22) 100%),
    radial-gradient(circle at 51.7% 49.6%, rgba(103, 232, 217, 0.14), transparent 18%);
}

.locationMap__locator {
  position: absolute;
  top: 49.6%;
  left: 51.7%;
  z-index: 2;
  width: 50px;
  height: 50px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow:
    0 0 0 7px rgba(18, 181, 164, 0.16),
    0 0 26px rgba(18, 181, 164, 0.42);
  transform: translate(-50%, -50%);
}

.locationMap__locator::before {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(18, 181, 164, 0.46);
  border-radius: inherit;
}

.locationMap__badge {
  position: absolute;
  right: clamp(18px, 3vw, 30px);
  bottom: clamp(18px, 3vw, 30px);
  z-index: 4;
  display: grid;
  gap: 3px;
  max-width: min(310px, calc(100% - 36px));
  padding: 18px 20px;
  color: #f2f8fb;
  border: 1px solid rgba(159, 222, 216, 0.32);
  border-radius: 18px;
  background: rgba(7, 30, 44, 0.9);
  box-shadow: 0 18px 42px rgba(7, 30, 44, 0.28);
  backdrop-filter: blur(14px) saturate(1.15);
}

.locationMap__badge span {
  color: #9fded8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.locationMap__badge strong {
  font-family: var(--hz-display);
  font-size: clamp(1rem, 2vw, 1.24rem);
  line-height: 1.25;
}

.locationMap__badge small {
  color: rgba(226, 238, 244, 0.78);
  font-size: 0.8rem;
}

.locationMap figcaption {
  margin: 12px 8px 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
  .locationMap__locator::before {
    animation: locationSignal 3.4s ease-out infinite;
  }
}

@keyframes locationSignal {
  0%, 34% { opacity: 0.86; transform: scale(0.78); }
  74%, 100% { opacity: 0; transform: scale(1.45); }
}

@media (max-width: 760px) {
  .premiumLocation .locationCopy { order: 1; }
  .premiumLocation .locationMap { order: 2; }

  .locationMap__frame { border-radius: 24px; }
  .locationMap__frame::after { inset: 7px; border-radius: 18px; }
  .locationMap__badge { padding: 14px 16px; border-radius: 15px; }
}

@media (max-width: 430px) {
  .locationMap__badge {
    position: relative;
    right: auto;
    bottom: auto;
    max-width: none;
    border-width: 1px 0 0;
    border-radius: 0;
    background: #071e2c;
    box-shadow: none;
    backdrop-filter: none;
  }

  .locationMap__locator {
    width: 42px;
    height: 42px;
  }
}

/* old flat navy-950 band → the same deep field used by relatedSection/footer */
.wholePersonSection {
  background:
    radial-gradient(50vmax 40vmax at 88% -10%, rgba(76, 195, 255, 0.14), transparent 60%),
    radial-gradient(46vmax 38vmax at 2% 108%, rgba(18, 181, 164, 0.13), transparent 58%),
    var(--hz-deep);
}

/* ---------- Desktop nav: site.css still drew its old teal underline bar
   (scaleX(0)→1 on hover, 8px below the link) under the new pill tabs — two
   competing hover languages, with the stray bar floating outside the pill's
   rounded border. The pills carry their own hover feedback; retire the bar. */
.desktopNav > a::after,
.navMenu > summary::after { display: none; }

/* ---------- Scope bar "i" chip: the one Georgia-italic remnant missed by the
   typography swap — keep the info-mark read, in the display face. ---------- */
.scopeBar__inner > span {
  font-family: var(--hz-display);
  font-style: normal;
}

/* ============================================================================
   CONTRAST MODES — kept last so these outrank every rule above them.
   ========================================================================== */

/* Forced colors (Windows High Contrast): the UA already forces colors and
   drops gradient backgrounds, but engines have shipped bugs pairing
   background-clip:text with forced colors — make every clip-to-text element
   an ordinary CanvasText run so no numeral or label can vanish. The aurora
   canvas paints its own pixels (never forced); it is occluded by the forced
   body background, so drop it outright. */
@media (forced-colors: active) {
  .fxAurora { display: none; }

  .contentSection .eyebrow, .sectionHeading .eyebrow,
  .pageHero .eyebrow, .premiumHero .eyebrow,
  .infoCard__number,
  .featureList li > span, .pageSteps li > span, .premiumSteps li > span {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: CanvasText;
  }
}

/* Users asking for more contrast trade the glass and gradient-text accents
   for solid surfaces and solid AA+ ink. */
@media (prefers-contrast: more) {
  :root {
    --hz-paper: #ffffff;
    --hz-glass: #ffffff;
    --hz-glass-strong: #ffffff;
    --hz-hairline: rgba(12, 52, 72, 0.45);
  }

  .faqList details,
  .faqList details[open] { background: #ffffff; }

  .contentSection .eyebrow, .sectionHeading .eyebrow,
  .infoCard__number,
  .featureList li > span, .pageSteps li > span, .premiumSteps li > span {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #065a52; /* 7.4:1 on white */
  }

  .pageHero .eyebrow,
  .premiumHero .eyebrow {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #c9ece7; /* >=8:1 on every hero field incl. full glow */
  }
}

/* ---------- Pulse Grid hero layer (canvas injected into the hero by fx.js) --- */
.fxStars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Hero content must stack above the hero grid canvas */
.pageHero .container,
.pageHero__footer,
.pathfinder .container,
.premiumHero__canvas .premiumHero__content,
.premiumHero__badge {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fxStars { display: none; }
}

@media (forced-colors: active) {
  .fxStars { display: none; }
}

/* ============================================================================
   VERSION 14 / CONNECTED LIGHT
   Human imagery, precise orbital geometry, and deliberate patient-led motion.
   ========================================================================== */
.connectedLightHero .premiumHero__canvas {
  min-height: 760px;
  isolation: isolate;
  background: #071722;
}
.connectedLightHero .premiumHero__content {
  min-height: 760px;
  padding-block: 84px 72px;
}
.connectedLightHero .premiumHero__copy { width: min(56%, 650px); }
.connectedLightHero .premiumHero__copy h1 {
  font-size: clamp(3.5rem, 5.6vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -.05em;
  font-weight: 500;
}
.connectedLightHero .premiumHero__copy h1 em {
  color: #9eece2;
  font-style: normal;
  margin-top: .12em;
}
.connectedLightHero .premiumHero__copy > p { max-width: 540px; font-size: 1.06rem; }
.connectedLightHero .premiumHero__image { object-position: 58% center; }
.connectedLightHero .premiumHero__veil {
  display: block;
  background:
    radial-gradient(ellipse at 48% 108%, rgba(18,181,164,.18), transparent 50%),
    linear-gradient(90deg, #071722 2%, rgba(7,23,34,.96) 28%, rgba(7,23,34,.87) 43%, rgba(7,23,34,.2) 66%, rgba(7,23,34,.05) 100%);
}
/* Static geometry survives JS failure and every motion preference. */
.connectedLightHero .premiumHero__canvas::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 58%;
  aspect-ratio: 1;
  right: -5%;
  top: 4%;
  border: 1px solid rgba(205,245,242,.17);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 36px rgba(153,229,220,.035), 0 0 0 100px rgba(153,229,220,.025);
}
.connectedLightCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.connectedLightHero .premiumHero__content,
.pageHero .container,
.pageHero__footer { z-index: 2; }
.connectedLightHero .premiumHero__badge {
  position: absolute;
  bottom: 34px;
  z-index: 3;
  border-radius: 20px 20px 20px 4px;
}
.heroChapters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid rgba(206,242,241,.25);
}
.heroChapters a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #f0f8fa;
  font-size: .875rem;
  text-decoration: none;
}
.heroChapters a span { color: #a1d5d3; font-size: .75rem; }
.heroChapters a:hover { text-decoration: underline; text-underline-offset: 5px; }
.heroChapters a:focus-visible { outline: 2px solid #9eece2; outline-offset: 5px; border-radius: 4px; }
.premiumHero__checks, .premiumTrustRail__grid small { font-size: .875rem; }
.premiumHero__badge > span { font-size: .75rem; }
.premiumHero__badge a { font-size: .875rem; min-height: 44px; }
#explore-care, #how-to-start, #visit-icare { scroll-margin-top: 145px; }

/* A crisp index beside one large photographic canvas. Static HTML remains
   six complete service articles; JS adds manual-activation tab behavior. */
.careExplorer {
  --care-accent: #94e4da;
  display: grid;
  grid-template-columns: minmax(250px, .82fr) minmax(0, 1.65fr);
  gap: clamp(22px, 3.5vw, 48px);
  align-items: start;
}
.careExplorer__selectors {
  display: grid;
  gap: 8px;
  padding: 8px;
  background: rgba(255,255,255,.8);
  border: 1px solid #cfdee4;
  border-radius: 24px;
}
.careExplorer__selector {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr 22px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 78px;
  padding: 18px 16px;
  text-align: left;
  text-decoration: none;
  color: #173747;
  font: inherit;
  border: 1px solid transparent;
  border-radius: 17px;
  background: transparent;
  cursor: pointer;
  scroll-margin-block: 150px 30px;
  transition: background .2s, border-color .2s;
}
.careExplorer__selector span { font-size: .8rem; color: #55717e; }
.careExplorer__selector strong { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.careExplorer__selector b { font-size: 1.2rem; font-weight: 400; }
.careExplorer__selector:hover { background: #edf5f5; border-color: #a9c8c9; }
.careExplorer__selector[aria-selected="true"] {
  color: #f4fafb;
  background: #0d2b39;
  border-color: #0d2b39;
  box-shadow: inset 4px 0 #94e4da, 0 8px 22px rgba(8,35,49,.12);
}
.careExplorer__selector[aria-selected="true"] span,
.careExplorer__selector[aria-selected="true"] b { color: #94e4da; }
.careExplorer__selector:focus-visible { outline: 3px solid #08695f; outline-offset: 3px; }
.careExplorer__stage { min-width: 0; }
.careExplorer__panel {
  overflow: hidden;
  margin-bottom: 26px;
  color: #f4fafb;
  border: 1px solid #77979e;
  border-radius: 28px;
  background: #0c2634;
  box-shadow: 0 26px 70px -34px rgba(7,30,43,.45);
  scroll-margin-top: 150px;
}
.careExplorer__panel[hidden] { display: none; }
.careExplorer.is-enhanced .careExplorer__panel { margin: 0; }
.careExplorer__media { position: relative; margin: 0; aspect-ratio: 16 / 10; max-height: 390px; overflow: hidden; background: #b9ccce; }
.careExplorer__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 43%; }
.careExplorer__media::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(6,22,32,.62));
}
.careExplorer__media figcaption {
  position: absolute;
  left: 24px;
  bottom: 20px;
  z-index: 1;
  padding: 8px 14px;
  border: 1px solid rgba(218,246,245,.45);
  border-radius: 100px;
  background: rgba(7,28,41,.9);
  color: #eff8f9;
  font-size: .875rem;
}
.careExplorer__copy {
  position: relative;
  min-height: 258px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 34px 32px;
  border-top: 1px solid rgba(184,234,229,.26);
  background: radial-gradient(ellipse at 110% 110%, rgba(34,138,157,.18), transparent 60%), #0c2634;
}
.careExplorer__index { color: #a5c5ce; font-size: .75rem; letter-spacing: .15em; margin-bottom: 8px; }
.careExplorer__copy h3 { margin: 0; color: #f4fafb; font: 500 clamp(1.65rem, 2.6vw, 2.2rem)/1.18 var(--hz-display); letter-spacing: -.035em; }
.careExplorer__copy p { color: #d2e3e9; font-size: 1rem; line-height: 1.65; margin: 14px 0 20px; max-width: 560px; }
.careExplorer__copy .arrowLink { margin-top: auto; color: #a2e7df; font-size: .95rem; min-height: 44px; }
.careExplorer__copy .arrowLink:focus-visible { outline: 2px solid #a2e7df; outline-offset: 5px; }
.careExplorer__panel:focus-visible { outline: 3px solid #08695f; outline-offset: 5px; }
html[data-motion="running"] .careExplorer.is-enhanced .careExplorer__panel:not([hidden]) { animation: carePanelEnter 260ms ease-out; }
@keyframes carePanelEnter { from { opacity: .65; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The existing care pathfinder becomes an editorial split layout; its flow,
   clinical boundaries, and no-storage behavior stay intact. */
@media (min-width: 1020px) {
  .pathfinder .container { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.15fr); gap: 24px 70px; align-items: start; }
  .pathfinder .pathfinder__head { margin-bottom: 0; }
  .pathfinder .pathfinder__head h2 { font-size: clamp(2.5rem,3.7vw,3.7rem); line-height: 1.08; letter-spacing: -.04em; }
  .pathfinder__panel { grid-column: 2; grid-row: 1 / span 2; min-height: 450px; }
  .pathfinder .pathfinder__note { grid-column: 1; margin-top: 0; }
  .pathfinder .pathfinder__options { grid-template-columns: 1fr; }
}
.pathfinder .pathfinder__step { font-size: .8rem; letter-spacing: .12em; }
.pathfinder .pathfinder__options small,
.pathfinder .pathfinder__links a small { font-size: .875rem; color: #c6d8e0; }
.pathfinder .pathfinder__facts li { font-size: .8rem; letter-spacing: .03em; }
.pathfinder .pathfinder__note { font-size: .875rem; color: #c6d8e0; }
.pathfinder .pathfinder__panel { background: #112b3b; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* The three existing steps acquire one connecting line. Content remains in
   normal document order, with no pinning, required scroll, or hidden state. */
.premiumProcess .premiumSteps { position: relative; gap: 20px; }
.premiumProcess .premiumSteps li,
.premiumProcess .premiumSteps li:not(:first-child) {
  border: 1px solid #ccdde3;
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  padding: 30px;
  gap: 30px;
  min-width: 0;
  transition: border-color .4s, box-shadow .4s;
}
.premiumProcess .premiumSteps li > span {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  background: #eef7f6;
  color: #086359;
  font: 500 1.2rem var(--hz-display);
  border: 1px solid #b6d5d0;
  box-shadow: none;
}
.premiumProcess .premiumSteps li.journeyReached { border-color: #83bdb7; box-shadow: 0 16px 44px -28px rgba(8,100,94,.4); }
.premiumProcess .premiumSteps li.journeyReached > span { background: #0d393c; color: #b6eee5; border-color: #0d393c; }
.premiumProcess .premiumSteps p { font-size: 1rem; }
.premiumProcess .premiumSteps h3 { font-family: var(--hz-display); font-size: 1.5rem; }
@media (min-width: 761px) {
  .premiumProcess .premiumSteps li:not(:last-child)::after {
    content: ""; position: absolute; z-index: 2; top: 57px; right: -21px; width: 20px; height: 1px; background: #83bdb7;
  }
}

/* A single site-wide motion preference, above the mobile call bar. */
.motionToggle {
  position: fixed;
  z-index: 70;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  background: #102c3a;
  color: #edf8fa;
  border: 1px solid #729da9;
  border-radius: 100px;
  box-shadow: 0 8px 26px rgba(4,26,40,.2);
  font: 500 .875rem var(--hz-body);
  cursor: pointer;
}
.motionToggle::before { content: "Ⅱ"; font-size: 1rem; color: #a2e7df; }
html[data-motion="paused"] .motionToggle::before { content: "▷"; }
.motionToggle:disabled::before { content: "−"; }
.motionToggle:disabled { cursor: default; }
.motionToggle:focus-visible { outline: 3px solid #08695f; outline-offset: 3px; box-shadow: 0 0 0 3px white; }
body.mobile-menu-open .motionToggle { visibility: hidden; }
.readingProgress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,#08695f,#12b5a4,#348aaa); pointer-events: none; }
.mobileActionBar { grid-template-columns: 1.1fr 1fr; }
.mobileActionBar a:first-child { background: var(--hz-grad-warm); border-color: #ffab78; color: #2a1206; }
.mobileActionBar a:last-child { background: rgba(255,255,255,.07); border-color: rgba(216,241,244,.4); color: #eff8fa; }

/* The controller's state always outranks component motion. Without JS the
   entire design is static, including the former auto-start ticker. */
html:not([data-motion="running"]) { scroll-behavior: auto; }
html:not([data-motion="running"]) *,
html:not([data-motion="running"]) *::before,
html:not([data-motion="running"]) *::after { animation: none !important; transition: none !important; }
html:not([data-motion="running"]) .connectedLightCanvas { display: none; }
html:not([data-motion="running"]) .svcTicker__track { width: auto; }
html:not([data-motion="running"]) .svcTicker__group { width: 100%; min-width: 0; flex-shrink: 1; flex-wrap: wrap; justify-content: center; row-gap: 12px; }
html:not([data-motion="running"]) .svcTicker__group[aria-hidden="true"] { display: none; }
html:not([data-motion="running"]) .readingProgress { display: none; }
html:not([data-motion="running"]) .infoCard:hover,
html:not([data-motion="running"]) .startPathCard:hover,
html:not([data-motion="running"]) .pathfinder__options button:hover,
html:not([data-motion="running"]) .pathfinder__links a:hover { transform: none; }
html:not([data-motion="running"]) a:hover,
html:not([data-motion="running"]) button:hover,
html:not([data-motion="running"]) .featureList li:hover { transform: none; }

@media (max-width: 1020px) {
  .connectedLightHero .premiumHero__canvas,
  .connectedLightHero .premiumHero__content { min-height: 700px; }
  .connectedLightHero .premiumHero__copy { width: 63%; }
  .connectedLightHero .premiumHero__copy h1 { font-size: clamp(3.1rem, 6.6vw, 4.5rem); }
  .careExplorer { grid-template-columns: minmax(230px,.9fr) minmax(0,1.4fr); gap: 24px; }
  .careExplorer__selector { padding-inline: 12px; gap: 8px; }
}
@media (max-width: 760px) {
  .connectedLightHero .premiumHero__canvas { min-height: 0; display: flex; flex-direction: column; }
  .connectedLightHero .premiumHero__content { min-height: 0; order: 1; padding-block: 52px 36px; }
  .connectedLightHero .premiumHero__copy { width: 100%; }
  .connectedLightHero .premiumHero__copy h1 { font-size: clamp(2.6rem, 8.8vw, 4rem); line-height: 1.08; }
  .connectedLightHero .premiumHero__copy > p { font-size: 1rem; }
  .connectedLightHero .premiumHero__image { position: relative; order: 2; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 70% center; }
  .connectedLightHero .premiumHero__veil { display: none; }
  .connectedLightHero .premiumHero__canvas::before { top: auto; bottom: -20%; width: 85%; }
  .heroChapters { gap: 8px 18px; margin-top: 26px; padding-top: 16px; }
  .heroChapters a { font-size: .875rem; }
  .careExplorer { grid-template-columns: 1fr; gap: 20px; }
  .careExplorer__selectors { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; border-radius: 20px; }
  .careExplorer__selector { min-height: 76px; grid-template-columns: 20px 1fr; gap: 8px; padding: 12px 10px; }
  .careExplorer__selector strong { font-size: .875rem; }
  .careExplorer__selector b { display: none; }
  .careExplorer__copy { padding: 24px; min-height: 270px; }
  .careExplorer__panel { border-radius: 22px; }
  .careExplorer__media figcaption { left: 18px; bottom: 16px; }
  .premiumProcess .premiumSteps { grid-template-columns: 1fr; gap: 18px; }
  .premiumProcess .premiumSteps li,
  .premiumProcess .premiumSteps li:not(:first-child) { padding: 24px; gap: 18px; }
  .motionToggle { bottom: calc(86px + env(safe-area-inset-bottom)); left: max(12px,env(safe-area-inset-left)); padding-inline: 13px; font-size: .8125rem; }
  .pathfinder .pathfinder__panel { padding: 24px; }
}
@media (prefers-contrast: more) {
  .careExplorer__selectors { background: #fff; border-color: #164650; }
  .careExplorer__selector { border-color: #6b858e; }
  .careExplorer__panel { border-color: #164650; }
}
@media (forced-colors: active) {
  .connectedLightCanvas, .readingProgress, .connectedLightHero .premiumHero__canvas::before,
  .locationMap__locator, .locationMap__wash, .locationMap__frame::after { display: none; }
  .careExplorer__selector { border: 1px solid ButtonText; color: ButtonText; }
  .careExplorer__selector[aria-selected="true"] { outline: 3px solid Highlight; outline-offset: -4px; }
  .careExplorer__selector:focus-visible, .careExplorer__panel:focus-visible,
  .careExplorer__copy .arrowLink:focus-visible, .motionToggle:focus-visible { outline: 3px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .connectedLightCanvas, .readingProgress { display: none; }
}
@media print {
  .motionToggle, .connectedLightCanvas, .readingProgress, .heroChapters,
  .careExplorer.is-enhanced .careExplorer__selectors { display: none; }
  .careExplorer { display: block; }
  .careExplorer .careExplorer__panel[hidden] { display: block !important; }
  .careExplorer__panel { break-inside: avoid; margin-block: 20px !important; }
}
/* Version 15: entrance to the dedicated brain-learning room. */
.brainInvitation{background:#060e1a;color:#edf6fc;overflow:hidden;padding:48px 0}
.brainInvitation__grid{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:55px;min-height:460px}
.brainInvitation__copy{position:relative;z-index:1;padding:35px 0}
.brainInvitation .eyebrow{color:#9fe7e5;font-size:10px;letter-spacing:.15em}
.brainInvitation h2{color:#f0f6fc;font-size:clamp(36px,4.5vw,62px);line-height:1.1;letter-spacing:-.055em;font-weight:400;margin:22px 0}
.brainInvitation p{font-size:15px;line-height:1.9;color:#bacbdb;max-width:435px}
.brainInvitation__action{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;color:#092133;background:#b9e8e2;border-radius:40px;padding:16px 23px;margin-top:15px;min-height:52px;text-decoration:none;font-size:14px;font-weight:600}
.brainInvitation__topics{display:flex;gap:23px;flex-wrap:wrap;margin-top:24px}
.brainInvitation__topics a{font-size:11px;color:#c0d7e8;text-decoration:none;border-bottom:1px solid #567080;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.brainInvitation__art{position:relative;display:block;text-decoration:none;isolation:isolate}
.brainInvitation__art img{display:block;width:125%;max-width:none;height:auto;margin-left:-12.5%;mix-blend-mode:screen;mask-image:radial-gradient(ellipse 60% 65% at 50% 49%,#000 40%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 60% 65% at 50% 49%,#000 40%,transparent 78%);transition:transform .7s ease}
.brainInvitation__art:hover img{transform:translateY(-5px)}
.brainInvitation__art>span{display:flex;align-items:center;justify-content:space-between;color:#b7d7e5;font-size:10px;letter-spacing:.11em;text-transform:uppercase;padding:0 25px}
.brainInvitation__art b{font-size:23px;font-weight:400;border:1px solid #65838f;border-radius:50%;width:47px;height:47px;display:grid;place-content:center}
.brainInvitation a:focus-visible{outline:3px solid #b7f5ec;outline-offset:7px}
@media(max-width:760px){.brainInvitation{padding:40px 0}.brainInvitation__grid{grid-template-columns:1fr;gap:0}.brainInvitation__copy{padding:0}.brainInvitation__art{margin:12px auto 0;width:100%;max-width:460px}.brainInvitation__art img{width:112%;margin-left:-6%}.brainInvitation__art>span{padding-inline:10px}.brainInvitation h2{font-size:40px}.brainInvitation__topics{gap:20px}}
@media(prefers-reduced-motion:reduce){.brainInvitation__art img{transform:none!important;transition:none!important}}
html[data-motion="paused"] .brainInvitation__art img{transform:none!important;transition:none!important}