/* home.css -- GENERATED by build-hybrid.py. DO NOT EDIT.
   Concatenation of the twelve homepage donor sheets in cascade order
   (HOME_SHEETS). Edit the donor sheet named in each banner below and
   rebuild; a hand edit here is overwritten by the next run. */

/* ---- donor: site/css/anatomy-navigator.css ---- */
.ipc-navigator {
  --mineral: #01062a;
  --mineral-deep: #000318;
  --navy: #00076d;
  --navy-light: #1b2a94;
  --porcelain: #eef3fb;
  --steel: #8ea3c7;
  --steel-bright: #cbd6e8;
  --green: #53ba00;
  --green-bright: #88ed3e;
  --green-ink: #3f9200;
  --hairline: rgba(174, 194, 229, 0.22);
  --copy: #f3f6fc;
  --muted: #a9b6d1;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  color-scheme: dark;
}
.ipc-navigator * {
  box-sizing: border-box;
}
.ipc-navigator {
  min-width: 320px;
  background: var(--mineral-deep);
}
.ipc-navigator {
  min-width: 320px;
  background:
    radial-gradient(circle at 51% 46%, rgba(24, 42, 146, 0.44) 0, rgba(5, 15, 74, 0.2) 25%, transparent 51%),
    linear-gradient(135deg, #00031c 0%, var(--mineral) 48%, #000524 100%);
  color: var(--copy);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
.ipc-navigator button,
.ipc-navigator a {
  -webkit-tap-highlight-color: transparent;
}
.ipc-navigator button {
  color: inherit;
  font: inherit;
}
.ipc-navigator .navigator {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 3.1vw, 52px) clamp(24px, 4.4vw, 68px) clamp(38px, 4vw, 64px);
}
.ipc-navigator .navigator.is-initializing *,
.ipc-navigator .navigator.is-initializing *::before,
.ipc-navigator .navigator.is-initializing *::after {
  animation: none !important;
  scroll-behavior: auto !important;
  transition: none !important;
}
.ipc-navigator .navigator::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(62, 84, 190, 0.12), transparent 35%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016), transparent 19%, transparent 81%, rgba(255, 255, 255, 0.012));
  content: "";
}
.ipc-navigator .navigator::after {
  content: none;
}
.ipc-navigator .navigator__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: min(100%, 1390px);
  margin: 0 auto clamp(14px, 1.6vw, 24px);
}
.ipc-navigator .navigator__intro h1 {
  max-width: 620px;
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(3.7rem, 5.5vw, 5.7rem);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 0.88;
  text-wrap: balance;
}
.ipc-navigator .navigator__intro p {
  max-width: 580px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(0.92rem, 1.15vw, 1.04rem);
  line-height: 1.65;
}
.ipc-navigator .navigator__measure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ipc-navigator .navigator__measure strong {
  color: var(--copy);
  font-size: 0.84rem;
}
.ipc-navigator .navigator__measure span {
  width: 26px;
  height: 1px;
  margin: 0 5px;
  background: var(--hairline);
}
.ipc-navigator .navigator__experience {
  position: relative;
  display: grid;
  grid-template-columns: minmax(205px, 0.72fr) minmax(430px, 1.72fr) minmax(300px, 1fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: center;
  width: min(100%, 1390px);
  /* #107 -- the reserve is the chrome this grid sits inside, and it was STALE.
     Measured at 1440x900: .navigator padding-top 28 + .navigator__header 192
     + that header's 18px margin-bottom + padding-bottom 32 = 270px, while the
     reserve said 220 -- under-reserving by exactly the 50px the band overflowed
     by (950 in a 900 viewport). Cutting grid-template-rows 710 -> 630 earlier
     returned only 30px because the element then bottomed out on THIS floor at
     680px, which is why ~50px looked unaccounted for: the binding pin was here,
     not in the row or the stage.
     Corrected, not replaced by a literal, so it stays viewport-responsive. The
     630px row remains the floor -- height is max(row, min-height) -- so this can
     only ever RELEASE dead space on tall viewports and is a no-op at and below
     900px tall. Measured after: band 950 -> 900 at 1440x900, overflow 50 -> 0,
     figure height 462 and aspect ratio 0.4647 both UNCHANGED (no scaling). */
  min-height: min(735px, calc(100vh - 270px));
  margin: 0 auto;
}
.ipc-navigator .region-index {
  position: relative;
  z-index: 7;
  align-self: center;
  min-width: 0;
}
.ipc-navigator .region-index__label,
.ipc-navigator .condition-folio__label {
  margin: 0 0 22px;
  color: #8598bf;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ipc-navigator .region-index__items {
  display: grid;
}
.ipc-navigator .region-choice {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 74px;
  padding: 13px 10px 13px 25px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.ipc-navigator .region-choice:first-child {
  border-top: 1px solid var(--hairline);
}
.ipc-navigator .region-choice__signal {
  position: absolute;
  left: 0;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(198, 212, 236, 0.62);
  border-radius: 50%;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}
.ipc-navigator .region-choice__copy {
  display: grid;
  gap: 7px;
}
.ipc-navigator .region-choice strong {
  color: #b7c3da;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 500;
  line-height: 1.1;
  transition: color 220ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ipc-navigator .region-choice small {
  color: #7084ad;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: color 220ms ease;
}
.ipc-navigator .region-choice:hover strong,
.ipc-navigator .region-choice:focus-visible strong {
  color: #fff;
  transform: translateX(3px);
}
.ipc-navigator .region-choice.is-active strong {
  color: #fff;
  font-size: clamp(1.12rem, 1.48vw, 1.42rem);
}
.ipc-navigator .region-choice.is-active small {
  color: #a2b3d4;
}
.ipc-navigator .region-choice.is-active .region-choice__signal {
  border-color: var(--green-bright);
  background: var(--green);
  box-shadow: 0 5px 13px rgba(40, 122, 0, 0.38);
  transform: scale(1.25);
}
.ipc-navigator .region-choice:focus-visible,
.ipc-navigator .orientation button:focus-visible,
.ipc-navigator .condition-panel__links a:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 4px;
}
.ipc-navigator .anatomy-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 710px;
  perspective: 900px;
  transform: translateY(-155px);
}
.ipc-navigator .orientation {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  padding: 5px;
  border: 1px solid rgba(164, 183, 219, 0.22);
  border-radius: 999px;
  background: rgba(1, 6, 42, 0.78);
  box-shadow: 0 9px 28px rgba(0, 2, 22, 0.24);
  transform: translateX(-50%);
}
.ipc-navigator .orientation button {
  position: relative;
  min-width: 68px;
  padding: 8px 13px 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8fa0c1;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 220ms ease, background-color 220ms ease;
}
.ipc-navigator .orientation button.is-active {
  background: rgba(101, 219, 18, 0.11);
  color: #bdfc91;
}
.ipc-navigator .orientation span {
  width: 1px;
  height: 18px;
  background: rgba(174, 194, 229, 0.2);
}
.ipc-navigator .anatomy-stage__well {
  position: absolute;
  z-index: -3;
  top: 5%;
  bottom: 4%;
  left: 50%;
  width: min(97%, 525px);
  background:
    linear-gradient(180deg, transparent 1%, rgba(180, 204, 248, 0.31) 15%, rgba(149, 174, 224, 0.09) 80%, transparent 99%) left / 1px 100% no-repeat,
    linear-gradient(180deg, transparent 1%, rgba(180, 204, 248, 0.31) 15%, rgba(149, 174, 224, 0.09) 80%, transparent 99%) right / 1px 100% no-repeat;
  transform: translateX(-50%);
}
.ipc-navigator .anatomy-stage__well::before {
  position: absolute;
  inset: 0 -5%;
  background:
    radial-gradient(ellipse at 50% 37%, rgba(80, 113, 233, 0.2), transparent 46%),
    linear-gradient(180deg, rgba(22, 38, 123, 0.08), rgba(13, 24, 90, 0.22) 48%, rgba(4, 11, 53, 0.06));
  box-shadow:
    inset 20px 0 46px rgba(42, 66, 165, 0.08),
    inset -20px 0 46px rgba(42, 66, 165, 0.08),
    0 28px 52px rgba(0, 2, 25, 0.16);
  clip-path: polygon(8% 0, 92% 0, 100% 7%, 98% 92%, 88% 100%, 12% 100%, 2% 92%, 0 7%);
  content: "";
}
.ipc-navigator .anatomy-stage__well::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(190, 209, 241, 0.09) 18%, rgba(190, 209, 241, 0.15) 48%, transparent 88%);
  content: "";
}
.ipc-navigator .anatomy-stage__focus {
  --focus-opacity: 0.38;
  position: absolute;
  z-index: 1;
  top: var(--focus-y, 43%);
  left: 50%;
  width: clamp(150px, 17vw, 220px);
  aspect-ratio: 1 / 0.74;
  border-radius: 50%;
  opacity: var(--focus-opacity);
  background:
    radial-gradient(ellipse, rgba(210, 226, 255, 0.18) 0, var(--focus-accent, rgba(83, 186, 0, 0.06)) 34%, transparent 72%);
  box-shadow: 0 18px 36px rgba(0, 2, 31, 0.28);
  filter: blur(14px);
  transform: translate(-50%, -50%) scale(0.96);
  transition:
    top 520ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 360ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.ipc-navigator .navigator[data-region="nerve"] .anatomy-stage__focus {
  --focus-accent: rgba(120, 232, 55, 0.15);
  --focus-opacity: 0.58;
}
.ipc-navigator .navigator[data-region="muscle"] .anatomy-stage__focus {
  --focus-accent: rgba(125, 213, 74, 0.09);
  --focus-opacity: 0.46;
}
.ipc-navigator .navigator[data-region="joints"] .anatomy-stage__focus {
  --focus-accent: rgba(145, 235, 88, 0.1);
  --focus-opacity: 0.48;
}
.ipc-navigator .navigator[data-region="complex"] .anatomy-stage__focus {
  --focus-accent: rgba(108, 210, 51, 0.1);
  --focus-opacity: 0.44;
}
.ipc-navigator .navigator.is-changing .anatomy-stage__focus {
  animation: focus-settle 620ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ipc-navigator .anatomy-stage__floor {
  position: absolute;
  z-index: -1;
  bottom: 1.8%;
  left: 50%;
  width: min(82%, 450px);
  height: 58px;
  border: 1px solid rgba(141, 168, 218, 0.16);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(43, 64, 161, 0.22), rgba(0, 2, 24, 0.74) 62%, transparent 72%);
  box-shadow: 0 28px 36px rgba(0, 1, 17, 0.4);
  opacity: 1;
  transform: translateX(-50%);
}
.ipc-navigator .anatomy-camera {
  position: absolute;
  z-index: 3;
  inset: -64px 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.ipc-navigator .figure-stack {
  --camera-scale: 1;
  --camera-shift-y: 0px;
  position: relative;
  z-index: 3;
  width: auto;
  height: clamp(650px, 72vh, 750px);
  max-height: calc(100vh - 188px);
  aspect-ratio: 148 / 318.455;
  margin-top: 26px;
  transform: translateY(var(--camera-shift-y)) scale(var(--camera-scale));
  transform-origin: 50% 16%;
  transform-style: preserve-3d;
}
.ipc-navigator .navigator[data-region="head"] .figure-stack {
  --camera-scale: 2;
  --camera-shift-y: 120px;
}
.ipc-navigator .navigator.is-camera-ready.is-camera-moving .figure-stack {
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ipc-navigator .navigator.is-camera-ready.is-camera-moving.is-camera-entering .figure-stack {
  transition-duration: 720ms;
}
.ipc-navigator .navigator.is-camera-ready.is-camera-moving.is-camera-leaving .figure-stack {
  transition-duration: 540ms;
}
.ipc-navigator .navigator.is-camera-moving .figure-stack {
  will-change: transform;
}
.ipc-navigator .navigator.is-camera-moving .anatomy-stage__focus {
  opacity: 0 !important;
  animation: none !important;
  transition: none;
}
.ipc-navigator .signal-connector,
.ipc-navigator .anatomy-leaders,
.ipc-navigator .anatomy-callouts {
  transition: opacity 140ms ease;
}
.ipc-navigator .navigator.is-camera-moving .signal-connector,
.ipc-navigator .navigator.is-camera-moving .anatomy-leaders,
.ipc-navigator .navigator.is-camera-moving .anatomy-callouts {
  opacity: 0;
}
.ipc-navigator .navigator.is-camera-ready .anatomy-stage__floor,
.ipc-navigator .navigator.is-camera-ready .figure-caption {
  transition: opacity 360ms ease;
}
.ipc-navigator .navigator[data-region="head"] .anatomy-stage__floor {
  opacity: 0;
}
.ipc-navigator .navigator[data-region="head"] .figure-caption {
  opacity: 0;
}
.ipc-navigator .anatomy-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: rotateY(-20deg) scale(0.985);
  transform-origin: 50% 50%;
  transition: opacity 360ms ease, transform 440ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.ipc-navigator .navigator[data-view="front"] .anatomy-view--front,
.ipc-navigator .navigator[data-view="back"] .anatomy-view--back {
  opacity: 1;
  transform: rotateY(0) scale(1);
}
.ipc-navigator .navigator[data-view="front"] .anatomy-view--back,
.ipc-navigator .navigator[data-view="back"] .anatomy-view--front {
  transform: rotateY(20deg) scale(0.985);
}
.ipc-navigator .body-shell,
.ipc-navigator .body-shell--rake,
.ipc-navigator .relief-lines,
.ipc-navigator .anatomy-layers {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.ipc-navigator .body-shell {
  z-index: 0;
  filter: saturate(0.86) contrast(1.05) drop-shadow(0 20px 19px rgba(0, 1, 20, 0.5)) drop-shadow(0 0 12px rgba(179, 199, 235, 0.16));
  user-select: none;
}
.ipc-navigator .body-shell--rake {
  z-index: 2;
  opacity: 0.13;
  clip-path: polygon(0 0, 42% 0, 23% 100%, 0 100%);
  filter: brightness(1.6) saturate(0.25);
  mix-blend-mode: screen;
}
.ipc-navigator .anatomy-view::before {
  content: none;
}
.ipc-navigator .anatomy-view--back::before {
  content: none;
}
.ipc-navigator .relief-lines {
  display: none;
}
.ipc-navigator .anatomy-layers {
  z-index: 4;
  overflow: visible;
}
.ipc-navigator .system-layer {
  opacity: 0;
  transform: scale(0.985);
  transform-origin: center;
  transition: opacity 240ms ease, transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 300ms ease;
}
.ipc-navigator .navigator[data-region="head"] .system-layer--head,
.ipc-navigator .navigator[data-region="back"] .system-layer--back,
.ipc-navigator .navigator[data-region="nerve"] .system-layer--nerve,
.ipc-navigator .navigator[data-region="muscle"] .system-layer--muscle,
.ipc-navigator .navigator[data-region="joints"] .system-layer--joints,
.ipc-navigator .navigator[data-region="complex"] .system-layer--complex {
  opacity: 1;
  transform: scale(1);
}
.ipc-navigator .navigator.is-changing[data-region="head"] .system-layer--head,
.ipc-navigator .navigator.is-changing[data-region="back"] .system-layer--back,
.ipc-navigator .navigator.is-changing[data-region="nerve"] .system-layer--nerve,
.ipc-navigator .navigator.is-changing[data-region="muscle"] .system-layer--muscle,
.ipc-navigator .navigator.is-changing[data-region="joints"] .system-layer--joints,
.ipc-navigator .navigator.is-changing[data-region="complex"] .system-layer--complex {
  animation: anatomy-resolve 560ms 105ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.anatomy-lacquer {
  fill: url("#front-lacquer");
  stroke: rgba(208, 255, 181, 0.82);
  stroke-width: 0.65;
}
.anatomy-view--back .anatomy-lacquer,
.ipc-navigator .lumbar-field,
.ipc-navigator .sacrum {
  fill: url("#back-lacquer");
}
.ipc-navigator .anatomy-wash {
  fill: url("#front-field");
}
.ipc-navigator .anatomy-view--back .anatomy-wash,
.ipc-navigator .lumbar-field {
  fill: url("#back-field");
}
.ipc-navigator .anatomy-detail,
.ipc-navigator .anatomy-trace,
.joint-route,
.muscle-fibers,
.systemic-network {
  fill: none;
  stroke: #9cf15d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}
.ipc-navigator .anatomy-detail {
  stroke: rgba(235, 255, 222, 0.9);
  stroke-width: 0.7;
}
.ipc-navigator .anatomy-trace {
  filter: url("#front-glow");
}
.system-layer--head .head-field {
  fill: url("#front-field");
  stroke: rgba(136, 237, 62, 0.34);
  stroke-width: 0.42;
  vector-effect: non-scaling-stroke;
}
.anatomy-view--back .system-layer--head .head-field {
  fill: url("#back-field");
}
.system-layer--head .head-muscle {
  fill: url("#front-lacquer");
  stroke: rgba(235, 255, 222, 0.72);
  stroke-width: 0.42;
  opacity: 0.56;
  vector-effect: non-scaling-stroke;
}
.anatomy-view--back .system-layer--head .head-muscle {
  fill: url("#back-lacquer");
}
.ipc-navigator .system-layer--head .head-axis-rail,
.ipc-navigator .system-layer--head .head-sensory-rail,
.ipc-navigator .system-layer--head .head-axis-core,
.ipc-navigator .system-layer--head .head-sensory-pulse,
.ipc-navigator .system-layer--head .head-vertebra-core,
.system-layer--head .head-fiber {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ipc-navigator .system-layer--head .head-axis-rail {
  stroke: #2f7f08;
  stroke-width: 1.8;
  opacity: 0.65;
  filter: none;
}
.ipc-navigator .system-layer--head .head-sensory-rail {
  stroke: #3e8f12;
  stroke-width: 0.44;
  opacity: 0.78;
  filter: none;
}
.ipc-navigator .head-sensory--pulses {
  pointer-events: none;
}
.ipc-navigator .system-layer--head .head-sensory-pulse {
  fill: none;
  stroke: #ecffe0;
  stroke-width: 0.24;
  stroke-dasharray: 0.075 0.925;
  stroke-dashoffset: 0;
  opacity: 0;
  filter: none;
  animation: none;
}
.ipc-navigator .navigator[data-region="head"][data-view="front"]:not(.is-changing):not(.is-camera-moving):not(.is-camera-settling) .anatomy-view--front .head-sensory-pulse,
.ipc-navigator .navigator[data-region="head"][data-view="back"]:not(.is-changing):not(.is-camera-moving):not(.is-camera-settling) .anatomy-view--back .head-sensory-pulse {
  animation: head-sensory-conduction 4.6s linear infinite;
}
.ipc-navigator .system-layer--head .head-axis-core {
  stroke: #c9ffa5;
  stroke-width: 0.68;
  opacity: 0.92;
  filter: none;
}
.ipc-navigator .system-layer--head .head-vertebra {
  fill: url("#front-lacquer");
  stroke: rgba(235, 255, 222, 0.78);
  stroke-width: 0.48;
  opacity: 0.78;
  vector-effect: non-scaling-stroke;
}
.ipc-navigator .anatomy-view--back .system-layer--head .head-vertebra {
  fill: url("#back-lacquer");
}
.ipc-navigator .system-layer--head .head-vertebra-core {
  stroke: rgba(244, 255, 236, 0.9);
  stroke-width: 0.48;
  opacity: 0.88;
}
.ipc-navigator .system-layer--head .head-cervical-special,
.ipc-navigator .system-layer--head .head-disc {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ipc-navigator .system-layer--head .head-cervical-special {
  stroke: rgba(244, 255, 236, 0.88);
  stroke-width: 0.52;
}
.ipc-navigator .system-layer--head .head-disc {
  stroke: rgba(47, 127, 8, 0.72);
  stroke-width: 0.44;
}
.ipc-navigator .anatomy-view--front .system-layer--head .head-vertebra {
  opacity: 0.6;
  stroke: rgba(235, 255, 222, 0.64);
}
.ipc-navigator .anatomy-view--front .system-layer--head .head-axis-rail {
  opacity: 0.46;
}
.ipc-navigator .anatomy-view--front .system-layer--head .head-axis-core {
  opacity: 0.76;
}
.system-layer--head .head-fiber {
  stroke: rgba(226, 255, 207, 0.62);
  stroke-width: 0.42;
}
.ipc-navigator .system-layer--head .head-landmark {
  fill: #f2ffe9;
  stroke: var(--green);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.ipc-navigator .anatomy-view--back .anatomy-trace {
  filter: url("#back-glow");
}
.ipc-navigator .anatomy-trace--soft {
  opacity: 0.48;
  stroke-width: 0.75;
}
.ipc-navigator .lumbar-field {
  opacity: 0.72;
  stroke: rgba(204, 255, 174, 0.62);
  stroke-width: 0.55;
}
.ipc-navigator .spine-axis {
  opacity: 0.7;
  stroke-width: 1.8;
}
/* ⚠️ THESE THREE SELECTORS MUST STAY UNSCOPED. Do not prefix them with
   `.ipc-navigator ` to match the rest of this file.

   The spine is drawn as 16 <use href="#vertebra-relief"> clones of a single
   template that lives inside <defs>. A <use> clone is shadow content, and a
   DESCENDANT-COMBINATOR selector cannot reach it: matching `.ipc-navigator X`
   requires walking to an ancestor the clone does not expose. A bare `.X` has
   no ancestor requirement and does reach.

   When this component was ported into site/ every rule was namespaced with
   `.ipc-navigator `, which silently killed exactly these three. Nothing
   errored and nothing looked wrong in the CSS: the <defs> ORIGINAL still
   computed the right green (it does have the ancestor), so a computed-style
   probe on it reads perfectly healthy. Only the 16 visible clones lost their
   paint and fell back to inheriting `fill` from the <use> element -- initial
   BLACK. That is the "the green overlays turned black when you ported them".

   Scope is derived, not guessed: a DOM scan of the built page found exactly
   three classes that appear inside <defs> and nowhere else -- these three.
   Every other <use> template also renders directly, so its scoped rule is
   fine and is deliberately left alone.

   Values are byte-identical to the pre-port original
   (sandbox/body-region/anatomy-navigator/anatomy-navigator.css:762-779);
   only the selectors change. Guarded by build-hybrid.py. */
.vertebra-process {
  fill: rgba(192, 255, 151, 0.54);
  stroke: rgba(233, 255, 218, 0.66);
  stroke-width: 0.32;
}
.vertebra-core {
  fill: rgba(235, 255, 222, 0.84);
  stroke: rgba(83, 186, 0, 0.72);
  stroke-width: 0.32;
}
.vertebra-nub {
  fill: none;
  stroke: rgba(83, 186, 0, 0.68);
  stroke-linecap: round;
  stroke-width: 0.34;
}
.ipc-navigator .sacrum {
  stroke: #d9ffc0;
  stroke-width: 0.6;
}
.ipc-navigator .pelvic-outline {
  fill: none;
  stroke: rgba(211, 255, 184, 0.74);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.72;
}
.ipc-navigator .sciatic-route {
  stroke-width: 1.55;
}
.ipc-navigator .terminal-nodes circle,
.joint-cores circle {
  fill: #d8ffc1;
  stroke: var(--green);
  stroke-width: 0.8;
}
.ipc-navigator .nerve-rail,
.ipc-navigator .nerve-core,
.ipc-navigator .nerve-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ipc-navigator .nerve-rail--major {
  opacity: 0.78;
  stroke: #2d7800;
  stroke-width: 2.65;
}
.ipc-navigator .nerve-rail--fine {
  opacity: 0.52;
  stroke: #347b10;
  stroke-width: 1.75;
}
.ipc-navigator .nerve-core--major {
  --core-opacity: 1;
  opacity: var(--core-opacity);
  stroke: #8cf04a;
  stroke-width: 1.35;
}
.ipc-navigator .nerve-core--fine {
  --core-opacity: 0.86;
  opacity: var(--core-opacity);
  stroke: #a4f66f;
  stroke-width: 0.9;
}
.ipc-navigator .system-layer--nerve .terminal-nodes circle {
  fill: #f2ffe9;
  stroke: #62ca14;
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}
.ipc-navigator .terminal-centers circle {
  fill: #a8ff70;
  stroke: none;
}
.ipc-navigator .nerve-pulses {
  pointer-events: none;
}
.ipc-navigator .nerve-pulses--halo {
  --pulse-opacity: 0.42;
}
.ipc-navigator .nerve-pulses--halo .nerve-pulse {
  stroke: #79e538;
  stroke-width: 3.8;
}
.ipc-navigator .nerve-pulses--core {
  --pulse-opacity: 0.98;
}
.ipc-navigator .nerve-pulses--core .nerve-pulse {
  stroke: #f7fff0;
  stroke-width: 1.65;
}
.ipc-navigator .nerve-pulse {
  fill: none;
  opacity: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.055 0.945;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
  animation: none;
}
.ipc-navigator .nerve-echo {
  fill: none;
  opacity: 0;
  stroke: #a8ff70;
  stroke-width: 0.8;
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  animation: none;
}
.ipc-navigator .navigator[data-region="nerve"][data-view="front"] .anatomy-view--front .nerve-pulse--trunk,
.ipc-navigator .navigator[data-region="nerve"][data-view="back"] .anatomy-view--back .nerve-pulse--trunk {
  animation: nerve-pulse-trunk 4.6s linear infinite;
}
.ipc-navigator .navigator[data-region="nerve"][data-view="front"] .anatomy-view--front .nerve-pulse--arm,
.ipc-navigator .navigator[data-region="nerve"][data-view="back"] .anatomy-view--back .nerve-pulse--arm {
  animation: nerve-pulse-arm 4.6s linear infinite;
}
.ipc-navigator .navigator[data-region="nerve"][data-view="front"] .anatomy-view--front .nerve-pulse--leg,
.ipc-navigator .navigator[data-region="nerve"][data-view="back"] .anatomy-view--back .nerve-pulse--leg {
  animation: nerve-pulse-leg 4.6s linear infinite;
}
.ipc-navigator .navigator[data-region="nerve"][data-view="front"] .anatomy-view--front .nerve-echo--arm,
.ipc-navigator .navigator[data-region="nerve"][data-view="back"] .anatomy-view--back .nerve-echo--arm {
  animation: nerve-echo-arm 4.6s linear infinite;
}
.ipc-navigator .navigator[data-region="nerve"][data-view="front"] .anatomy-view--front .nerve-echo--leg,
.ipc-navigator .navigator[data-region="nerve"][data-view="back"] .anatomy-view--back .nerve-echo--leg {
  animation: nerve-echo-leg 4.6s linear infinite;
}
.ipc-navigator .navigator.is-changing[data-region="nerve"][data-view="front"] .anatomy-view--front .nerve-core,
.ipc-navigator .navigator.is-changing[data-region="nerve"][data-view="back"] .anatomy-view--back .nerve-core {
  animation: nerve-network-draw 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ipc-navigator .navigator.is-changing[data-region="nerve"] .nerve-core--lower {
  animation-delay: 55ms;
}
.ipc-navigator .navigator.is-changing[data-region="nerve"] .nerve-core--fine {
  animation-delay: 105ms;
}
.muscle-fibers {
  opacity: 0.9;
  stroke: rgba(238, 255, 228, 0.85);
  stroke-width: 0.58;
}
.system-layer--muscle .anatomy-lacquer {
  opacity: 0.66;
  stroke: rgba(208, 255, 181, 0.28);
  stroke-width: 0.3;
  mix-blend-mode: multiply;
}
.muscle-tendon {
  fill: none;
  opacity: 0.78;
  stroke: rgba(238, 255, 228, 0.72);
  stroke-linecap: round;
  stroke-width: 0.42;
}
.joint-route {
  opacity: 0.34;
  stroke-width: 0.75;
}
.joint-structure {
  fill: none;
  stroke: rgba(229, 255, 211, 0.9);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.72;
}
.joint-rings circle {
  fill: rgba(83, 186, 0, 0.13);
  stroke: #b7ff88;
  stroke-width: 0.9;
}
.anatomy-view--back .joint-rings circle {
  filter: none;
}
.system-layer--complex .systemic-network {
  opacity: 0.62;
  stroke: var(--green);
  stroke-dasharray: 0.35 3.25;
  stroke-width: 0.9;
  filter: none;
}
.ipc-navigator .system-layer--complex .systemic-network--bridges {
  opacity: 0.42;
  stroke-dasharray: 0.35 4.5;
}
.ipc-navigator .system-layer--complex .pain-field {
  fill: url("#front-complex-field");
  opacity: 0.78;
  stroke: rgba(63, 146, 0, 0.6);
  stroke-width: 0.58;
  transform-box: fill-box;
  transform-origin: center;
  animation: pain-breathe 4.8s ease-in-out infinite;
}
.ipc-navigator .anatomy-view--back .system-layer--complex .pain-field {
  fill: url("#back-complex-field");
}
.ipc-navigator .pain-field--delay-1 { animation-delay: -0.9s; }
.ipc-navigator .pain-field--delay-2 { animation-delay: -1.8s; }
.ipc-navigator .pain-field--delay-3 { animation-delay: -2.7s; }
.ipc-navigator .pain-field--delay-4 { animation-delay: -3.6s; }
.ipc-navigator .system-layer--complex .pain-field {
  animation-play-state: paused;
}
.ipc-navigator .navigator[data-region="complex"][data-view="front"] .anatomy-view--front .pain-field,
.ipc-navigator .navigator[data-region="complex"][data-view="back"] .anatomy-view--back .pain-field {
  animation-play-state: running;
}
.ipc-navigator .anatomy-stage__sweep {
  position: absolute;
  z-index: 6;
  top: 8%;
  bottom: 7%;
  left: calc(50% - min(17vw, 178px));
  width: 58px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(232, 248, 255, 0.24), rgba(146, 237, 87, 0.16), transparent);
  filter: blur(8px);
  transform: translateX(-160px) skewX(-8deg);
  pointer-events: none;
}
.ipc-navigator .navigator.is-changing .anatomy-stage__sweep {
  animation: raking-sweep 590ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ipc-navigator .anatomy-leaders {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ipc-navigator .anatomy-leader path {
  fill: none;
  opacity: 0.72;
  stroke: rgba(147, 230, 91, 0.55);
  stroke-linecap: round;
  stroke-width: 0.85;
  vector-effect: non-scaling-stroke;
}
.ipc-navigator .anatomy-leader circle {
  fill: #ecffe2;
  stroke: var(--green);
  stroke-width: 0.9;
  filter: drop-shadow(0 2px 5px rgba(83, 186, 0, 0.28));
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}
.ipc-navigator .navigator.is-changing .anatomy-leader path {
  animation: draw-leader 300ms 370ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ipc-navigator .navigator.is-changing .anatomy-leader circle {
  animation: leader-pin-in 220ms 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ipc-navigator .navigator.is-changing .anatomy-callout {
  animation: callout-in 280ms 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ipc-navigator .navigator.is-camera-settling .anatomy-leader path {
  animation: draw-leader 300ms 20ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ipc-navigator .navigator.is-camera-settling .anatomy-leader circle {
  animation: leader-pin-in 220ms 70ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ipc-navigator .navigator.is-camera-settling .anatomy-callout {
  animation: camera-callout-in 240ms 60ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ipc-navigator .anatomy-callouts {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
}
.ipc-navigator .anatomy-callout {
  position: absolute;
  left: calc(50% + clamp(94px, 10.5vw, 145px));
  display: flex;
  align-items: center;
  gap: 8px;
  width: clamp(86px, 9vw, 130px);
  color: #a9b8d6;
  font-size: clamp(0.58rem, 0.7vw, 0.67rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: opacity 220ms ease;
}
.ipc-navigator .anatomy-callout::before {
  width: clamp(21px, 2.6vw, 38px);
  height: 1px;
  background: linear-gradient(90deg, var(--green), rgba(83, 186, 0, 0.18));
  content: "";
}
.ipc-navigator .anatomy-callout::after {
  position: absolute;
  left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 2px 8px rgba(83, 186, 0, 0.36);
  content: "";
}
.ipc-navigator .anatomy-callout--one { top: 19%; }
.ipc-navigator .anatomy-callout--two { top: 43%; }
.ipc-navigator .anatomy-callout--three { top: 68%; }
.ipc-navigator .figure-caption {
  position: absolute;
  z-index: 7;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7184ab;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.ipc-navigator .figure-caption span {
  width: 23px;
  height: 1px;
  background: rgba(164, 183, 219, 0.32);
}
.ipc-navigator .signal-connector {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ipc-navigator .signal-connector path {
  fill: none;
  stroke: var(--green);
  stroke-linecap: round;
  stroke-width: 1.25;
  filter: drop-shadow(0 3px 6px rgba(83, 186, 0, 0.26));
}
.ipc-navigator .signal-connector.is-drawing path {
  animation: draw-signal 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ipc-navigator .condition-folio {
  position: relative;
  z-index: 7;
  align-self: center;
  min-width: 0;
  padding-top: 22px;
}
.ipc-navigator .condition-folio::before {
  display: block;
  width: 54px;
  height: 1px;
  margin-bottom: 28px;
  background: linear-gradient(90deg, var(--green), rgba(83, 186, 0, 0.15));
  content: "";
}
.ipc-navigator .condition-panel {
  opacity: 1;
}
.ipc-navigator .navigator.is-changing .condition-panel.is-active {
  animation: folio-in 340ms 410ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ipc-navigator .condition-panel[hidden] {
  display: none;
}
.ipc-navigator .condition-panel__heading {
  padding-bottom: clamp(20px, 2vw, 28px);
  border-bottom: 1px solid var(--hairline);
}
.ipc-navigator .condition-panel__heading h2 {
  max-width: 440px;
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.ipc-navigator .condition-panel__heading span {
  display: block;
  margin-top: 14px;
  color: #8da1c7;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.ipc-navigator .condition-panel__summary {
  max-width: 40ch;
  margin: 23px 0 21px;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.7;
}
.ipc-navigator .condition-panel__links {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
}
.ipc-navigator .condition-panel__links li {
  border-bottom: 1px solid var(--hairline);
}
.ipc-navigator .condition-panel__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  padding: 14px 2px;
  color: #dce4f3;
  font-size: clamp(0.86rem, 1vw, 0.98rem);
  line-height: 1.36;
  text-decoration: none;
  transition: color 220ms ease;
}
.ipc-navigator .condition-panel__links a:hover {
  color: #fff;
}
.ipc-navigator .condition-panel__links a span {
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ipc-navigator .condition-panel__links a:hover span {
  transform: translateX(7px);
}
.ipc-navigator .condition-panel__links i {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 10px;
}
.ipc-navigator .condition-panel__links i::before {
  position: absolute;
  top: 50%;
  right: 1px;
  left: 1px;
  height: 1px;
  background: var(--green-bright);
  content: "";
  transform: translateY(-50%);
}
.ipc-navigator .condition-panel__links i::after {
  position: absolute;
  top: 2px;
  right: 1px;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--green-bright);
  border-right: 1px solid var(--green-bright);
  content: "";
  transform: rotate(45deg);
}
.ipc-navigator .condition-panel__cue {
  position: relative;
  max-width: 42ch;
  margin: 22px 0 0;
  padding-left: 19px;
  color: #7f91b5;
  font-size: 0.72rem;
  line-height: 1.58;
}
.ipc-navigator .condition-panel__cue::before {
  position: absolute;
  top: 0.32em;
  bottom: 0.32em;
  left: 0;
  width: 1px;
  background: rgba(83, 186, 0, 0.62);
  content: "";
}
.ipc-navigator .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes raking-sweep {
0% { opacity: 0; transform: translateX(-160px) skewX(-8deg); }
18% { opacity: 1; }
72% { opacity: 0.8; }
100% { opacity: 0; transform: translateX(320px) skewX(-8deg); }
}
@keyframes focus-settle {
0% { opacity: 0.12; transform: translate(-50%, -50%) scale(0.86); }
44% { opacity: 0.68; }
100% { opacity: var(--focus-opacity); transform: translate(-50%, -50%) scale(1); }
}
@keyframes anatomy-resolve {
from {
    opacity: 0.16;
    filter: brightness(1.28) saturate(1.1);
    transform: scale(0.992);
  }
to {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
}
@keyframes draw-signal {
from { stroke-dashoffset: var(--signal-length, 500); }
to { stroke-dashoffset: 0; }
}
@keyframes draw-leader {
from {
    opacity: 0;
    stroke-dasharray: var(--leader-length, 200);
    stroke-dashoffset: var(--leader-length, 200);
  }
to {
    opacity: 0.72;
    stroke-dasharray: var(--leader-length, 200);
    stroke-dashoffset: 0;
  }
}
@keyframes leader-pin-in {
from { opacity: 0; transform: scale(0.55); }
to { opacity: 1; transform: scale(1); }
}
@keyframes callout-in {
from { opacity: 0; transform: translateX(8px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes camera-callout-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes nerve-network-draw {
from {
    opacity: 0.16;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
to {
    opacity: var(--core-opacity, 1);
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}
@keyframes head-sensory-conduction {
0% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
2% {
    opacity: 0.96;
  }
28% {
    opacity: 0.96;
    stroke-dashoffset: -1;
  }
29%,
100% {
    opacity: 0;
    stroke-dashoffset: -1;
  }
}
@keyframes nerve-pulse-trunk {
0% { opacity: 0; stroke-dashoffset: 0; }
1.5% { opacity: var(--pulse-opacity); }
17% { opacity: var(--pulse-opacity); stroke-dashoffset: -1; }
18%,
100% { opacity: 0; stroke-dashoffset: -1; }
}
@keyframes nerve-pulse-arm {
0%,
6% { opacity: 0; stroke-dashoffset: 0; }
7% { opacity: var(--pulse-opacity); }
29% { opacity: var(--pulse-opacity); stroke-dashoffset: -1; }
30%,
100% { opacity: 0; stroke-dashoffset: -1; }
}
@keyframes nerve-pulse-leg {
0%,
14% { opacity: 0; stroke-dashoffset: 0; }
15% { opacity: var(--pulse-opacity); }
42% { opacity: var(--pulse-opacity); stroke-dashoffset: -1; }
43%,
100% { opacity: 0; stroke-dashoffset: -1; }
}
@keyframes nerve-echo-arm {
0%,
28% { opacity: 0; transform: scale(1); }
29% { opacity: 0.72; transform: scale(1); }
35%,
100% { opacity: 0; transform: scale(1.55); }
}
@keyframes nerve-echo-leg {
0%,
41% { opacity: 0; transform: scale(1); }
42% { opacity: 0.72; transform: scale(1); }
48%,
100% { opacity: 0; transform: scale(1.55); }
}
@keyframes pain-breathe {
0%,
100% { opacity: 0.56; transform: scale(0.94); }
50% { opacity: 0.9; transform: scale(1.05); }
}
@keyframes folio-in {
from { opacity: 0; transform: translateY(9px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1120px) {
.ipc-navigator .navigator__experience {
    grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
    min-height: 0;
  }
.ipc-navigator .region-index {
    grid-column: 1 / -1;
  }
.ipc-navigator .region-index::after {
    position: absolute;
    z-index: 4;
    top: 29px;
    right: 0;
    bottom: 0;
    width: 42px;
    background: linear-gradient(90deg, transparent, rgba(1, 6, 42, 0.96));
    content: "";
    pointer-events: none;
  }
.ipc-navigator .region-index__label {
    margin-bottom: 12px;
  }
.ipc-navigator .region-index__items {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(132, 154, 199, 0.45) transparent;
  }
.ipc-navigator .region-choice {
    flex: 0 0 190px;
    min-height: 68px;
    border-top: 1px solid var(--hairline);
  }
.ipc-navigator .region-choice + .region-choice {
    border-left: 1px solid var(--hairline);
  }
.ipc-navigator .anatomy-stage {
    min-height: 720px;
    transform: none;
  }
.ipc-navigator .navigator[data-region="head"] .figure-stack {
    --camera-scale: 2;
    --camera-shift-y: 110px;
  }
.ipc-navigator .signal-connector {
    display: none;
  }
.ipc-navigator .condition-folio {
    align-self: center;
  }
}
@media (max-width: 900px) {
.ipc-navigator .navigator[data-region="head"] .anatomy-leaders,
.ipc-navigator .navigator[data-region="head"] .anatomy-callouts {
    display: none;
  }
}
@media (max-width: 760px) {
.ipc-navigator .navigator {
    padding: 30px 20px 48px;
  }
.ipc-navigator .navigator__header {
    display: block;
    margin-bottom: 32px;
  }
.ipc-navigator .navigator__intro h1 {
    font-size: clamp(3.35rem, 15vw, 4.45rem);
  }
.ipc-navigator .navigator__intro p {
    max-width: 35ch;
    margin-top: 17px;
  }
.ipc-navigator .navigator__measure {
    margin-top: 22px;
  }
.ipc-navigator .navigator__experience {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
.ipc-navigator .region-index {
    grid-column: auto;
  }
.ipc-navigator .region-index::before {
    position: absolute;
    z-index: 4;
    top: 29px;
    bottom: 0;
    left: 0;
    width: 42px;
    background: linear-gradient(90deg, rgba(1, 6, 42, 0.96), transparent);
    content: "";
    pointer-events: none;
  }
.ipc-navigator .region-index__items {
    padding-inline: calc((100% - 174px) / 2);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
.ipc-navigator .region-index__items::-webkit-scrollbar {
    display: none;
  }
.ipc-navigator .region-choice {
    flex-basis: 174px;
    min-height: 64px;
    padding-left: 22px;
    scroll-snap-align: center;
  }
.ipc-navigator .region-choice strong,
.ipc-navigator .region-choice.is-active strong {
    font-size: 1rem;
  }
.ipc-navigator .anatomy-stage {
    min-height: 610px;
  }
.ipc-navigator .figure-stack {
    height: min(560px, 143vw);
    max-height: none;
    margin-top: 22px;
  }
.ipc-navigator .navigator[data-region="head"] .figure-stack {
    --camera-scale: 2;
    --camera-shift-y: 88px;
  }
.ipc-navigator .anatomy-stage__well {
    top: 5%;
    bottom: 5%;
    width: min(92vw, 430px);
  }
.ipc-navigator .anatomy-stage__floor {
    bottom: 0;
    width: min(86vw, 390px);
  }
.ipc-navigator .anatomy-leaders,
.ipc-navigator .anatomy-callouts {
    display: none;
  }
.ipc-navigator .condition-folio {
    padding-top: 10px;
  }
.ipc-navigator .condition-panel__heading h2 {
    font-size: clamp(2.5rem, 12vw, 3.4rem);
  }
.ipc-navigator .condition-panel__summary {
    max-width: 48ch;
  }
}
@media (max-width: 420px) {
.ipc-navigator .navigator__measure {
    gap: 6px;
    font-size: 0.64rem;
  }
.ipc-navigator .navigator__measure span {
    width: 16px;
    margin: 0 2px;
  }
.ipc-navigator .anatomy-stage {
    min-height: 560px;
  }
.ipc-navigator .figure-stack {
    height: min(515px, 138vw);
  }
.ipc-navigator .orientation button {
    min-width: 62px;
  }
.ipc-navigator .figure-caption {
    bottom: -2px;
  }
}
@media (prefers-reduced-motion: reduce) {
.ipc-navigator .head-sensory--pulses,
.ipc-navigator .nerve-pulses,
.ipc-navigator .nerve-echoes {
    display: none !important;
  }
.ipc-navigator .navigator.is-changing[data-region="nerve"] .nerve-core {
    animation: none !important;
  }
.ipc-navigator *,
.ipc-navigator *::before,
.ipc-navigator *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ---- donor: sandbox/homepage-final/cdx-base.css ---- */
.cdx {
  --navy: #00076D;
  --green: #53BA00;
  --navy-deep: #00054C;
  --ink: #0B1020;
  --porcelain: #F5F8FF;
  --pearl: #EEF3FB;
  --steel: #9FB0C8;
  --steel-dark: #63738D;
  --line: rgba(0, 7, 109, 0.14);
  --white: #FFFFFF;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --shadow-soft: 0 28px 80px rgba(0, 5, 76, 0.11);
  --shadow-rest: 0 16px 44px rgba(0, 5, 76, 0.10), 0 2px 7px rgba(0, 5, 76, 0.06);
  --shell: min(1400px, calc(100% - 64px));
}
.cdx *, .cdx *::before, .cdx *::after {
  box-sizing: border-box;
}
.cdx {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
.cdx {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.cdx.is-menu-open, .cdx.is-location-open {
  overflow: hidden;
}
.cdx img, .cdx svg {
  display: block;
  max-width: 100%;
}
.cdx a {
  color: inherit;
  text-decoration: none;
}
.cdx button, .cdx input, .cdx select, .cdx textarea {
  font: inherit;
}
.cdx button {
  border: 0;
}
.cdx h1, .cdx h2, .cdx h3, .cdx p, .cdx figure {
  margin-top: 0;
}
.cdx h1, .cdx h2, .cdx h3 {
  text-wrap: balance;
}
.cdx :focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}
.cdx .shell {
  width: var(--shell);
  margin-inline: auto;
}
.cdx .skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  transform: translateY(-150%);
  border-radius: 6px;
  background: var(--green);
  color: var(--ink);
  font-weight: 800;
  transition: transform 180ms ease;
}
.cdx .skip-link:focus {
  transform: translateY(0);
}
.cdx .section-pad {
  padding-block: clamp(92px, 9vw, 150px);
}
.cdx .button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.cdx .button svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}
.cdx .button--primary {
  background: var(--green);
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(83, 186, 0, 0.18);
}
.cdx .button--primary:hover {
  transform: translateY(-2px);
  background: var(--green);
  box-shadow: 0 16px 34px rgba(83, 186, 0, 0.25);
}
.cdx .text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(0, 7, 109, 0.28);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: gap 180ms ease, border-color 180ms ease;
}
.cdx .text-link:hover {
  gap: 22px;
  border-color: var(--green);
}
.cdx .text-link--dark {
  color: var(--navy-deep);
}
.cdx .site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: 96px;
  border-bottom: 1px solid rgba(0, 7, 109, 0.1);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
}
.cdx .site-header__inner {
  display: grid;
  height: 100%;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}
.cdx .brand {
  display: inline-flex;
  width: 176px;
  align-items: center;
}
.cdx .brand img {
  width: 176px;
  height: auto;
}
.cdx .primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 2.5vw, 42px);
}
.cdx .primary-nav a {
  position: relative;
  padding-block: 36px;
  color: #26304A;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cdx .primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: 28px;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--green);
  content: "";
  transition: transform 220ms ease;
}
.cdx .primary-nav a:hover::after, .cdx .primary-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.cdx .header-action {
  min-height: 48px;
  padding-inline: 19px;
}
.cdx .menu-toggle {
  display: none;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 7px;
  background: var(--porcelain);
  color: var(--navy);
  cursor: pointer;
}
.cdx .menu-toggle__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cdx .menu-toggle__icon {
  display: grid;
  width: 18px;
  gap: 5px;
}
.cdx .menu-toggle__icon i {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 180ms ease;
}
.cdx .site-header.is-menu-open .menu-toggle__icon i:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.cdx .site-header.is-menu-open .menu-toggle__icon i:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}
.cdx .location-panel {
  position: relative;
  z-index: 48;
  border-bottom: 1px solid var(--line);
  background: var(--porcelain);
}
.cdx .location-panel__inner {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(620px, 1.8fr);
  gap: 72px;
  padding-block: 38px 44px;
}
.cdx .location-panel__intro h2 {
  margin-bottom: 8px;
  color: var(--navy-deep);
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.06;
}
.cdx .location-panel__intro p:last-child {
  max-width: 42ch;
  margin-bottom: 0;
  color: var(--steel-dark);
  font-size: 0.9rem;
}
.cdx .location-panel__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}
.cdx .location-panel__list a {
  display: flex;
  min-height: 104px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 18px;
  border-right: 1px solid var(--line);
  transition: background-color 180ms ease, color 180ms ease;
}
.cdx .location-panel__list a:hover {
  background: var(--white);
  color: var(--navy);
}
.cdx .location-panel__list span {
  color: var(--steel-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.cdx .location-panel__list strong {
  color: var(--navy-deep);
  font-size: 0.88rem;
}
.cdx.js .location-panel {
  position: fixed;
  top: 96px;
  right: 0;
  left: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--shadow-soft);
  transition: max-height 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cdx.js .location-panel.is-open {
  max-height: 330px;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cdx .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--porcelain);
}
.cdx .hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.96), transparent 38%),
    linear-gradient(120deg, var(--porcelain) 0 56%, #E6ECF7 56% 100%);
  content: "";
}
.cdx .hero::after {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% + 280px);
  width: 1px;
  background: rgba(0, 7, 109, 0.13);
  content: "";
}
.cdx .hero__inner {
  display: grid;
  min-height: 700px;
  grid-template-columns: minmax(0, 0.94fr) minmax(480px, 0.82fr);
  align-items: stretch;
}
.cdx .hero__copy {
  position: relative;
  z-index: 3;
  align-self: center;
  max-width: 770px;
  padding: 88px 70px 94px 0;
}
.cdx .hero h1 {
  max-width: 12.5ch;
  margin-bottom: 28px;
  color: var(--navy-deep);
  font-size: clamp(3.65rem, 5.6vw, 6.25rem);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.96;
}
.cdx .hero__lede {
  max-width: 590px;
  margin-bottom: 34px;
  color: #526078;
  font-size: clamp(1.03rem, 1.35vw, 1.22rem);
  line-height: 1.72;
}
.cdx .hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
}
.cdx .hero__portrait {
  position: relative;
  z-index: 2;
  min-height: 700px;
  margin: 0;
  align-self: stretch;
}
.cdx .hero__portrait-field {
  position: absolute;
  z-index: -1;
  inset: 9% -8% 0 10%;
  border-radius: 50% 50% 3% 3% / 42% 42% 3% 3%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), 0 32px 100px rgba(0, 7, 109, 0.08);
}
.cdx .hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 7% 62%);
}
.cdx .hero__identity {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(400px, 84%);
  padding: 26px 28px;
  background: var(--navy-deep);
  color: var(--white);
  box-shadow: none;
}
.cdx .hero__identity strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 2vw, 2.2rem);
  font-weight: 600;
  line-height: 1.05;
}
.cdx .hero__identity em {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.78rem;
  font-style: normal;
}
.cdx .hero__identity a {
  display: inline-flex;
  gap: 9px;
  margin-top: 18px;
  border-bottom: 1px solid rgba(83, 186, 0, 0.65);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cdx .hero__trajectory {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: calc(100% - 116px);
  overflow: visible;
  pointer-events: none;
}
.cdx .hero__trajectory path {
  fill: none;
  stroke: var(--green);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 2.25;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 1200ms cubic-bezier(0.16, 1, 0.3, 1) 180ms;
}
.cdx.is-ready .hero__trajectory path {
  stroke-dashoffset: 0;
}
.cdx .hero__rail {
  position: relative;
  z-index: 4;
  background: var(--navy-deep);
  color: var(--white);
}
.cdx .hero__rail-inner {
  display: grid;
  min-height: 116px;
  grid-template-columns: 0.9fr repeat(3, 1fr);
  align-items: stretch;
}
.cdx .hero__rail-inner > p {
  display: flex;
  align-items: center;
  margin: 0;
  padding-right: 34px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cdx .hero__rail-inner > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 24px 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  transition: background-color 180ms ease;
}
.cdx .hero__rail-inner > a:hover {
  background: rgba(255, 255, 255, 0.07);
}
.cdx .hero__rail strong {
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.cdx .hero__rail span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.77rem;
}
.cdx .physician-section {
  position: relative;
  background: var(--white);
}
.cdx .physician-section__grid, .cdx .explorer-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.7fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}
.cdx .physician-section__statement h2, .cdx .explorer-intro h2, .cdx .section-heading h2, .cdx .patient-guide h2, .cdx .closing-cta h2 {
  margin-bottom: 0;
  color: var(--navy-deep);
  font-family: var(--sans);
  font-size: clamp(2.8rem, 4.5vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.98;
}
.cdx .physician-section__detail {
  padding-top: 42px;
}
.cdx .physician-section__detail p {
  margin-bottom: 26px;
  color: #56647A;
  font-size: 1rem;
  line-height: 1.78;
}
.cdx .physician-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 94px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cdx .physician-principles > div {
  min-height: 220px;
  padding: 34px 42px 38px;
  border-right: 1px solid var(--line);
}
.cdx .physician-principles > div:last-child {
  border-right: 0;
}
.cdx .physician-principles strong {
  display: block;
  margin-bottom: 14px;
  color: var(--navy-deep);
  font-size: 1.2rem;
}
.cdx .physician-principles p {
  max-width: 31ch;
  margin: 0;
  color: var(--steel-dark);
  font-size: 0.88rem;
}
.cdx .treatments {
  position: relative;
  overflow: hidden;
  background: var(--porcelain);
  color: var(--ink);
}
.cdx .treatments::before {
  position: absolute;
  top: -280px;
  right: -180px;
  width: 680px;
  height: 680px;
  border: 1px solid rgba(0, 7, 109, 0.1);
  border-radius: 50%;
  content: "";
}
.cdx .section-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.55fr);
  gap: 90px;
  align-items: end;
}
.cdx .treatments .section-heading h2, .cdx .patient-guide h2 {
  color: var(--navy-deep);
}
.cdx .closing-cta h2 {
  color: var(--white);
}
.cdx .section-heading--split > p {
  max-width: 48ch;
  margin-bottom: 4px;
  color: var(--steel-dark);
  line-height: 1.75;
}
.cdx .treatment-routes {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  margin-top: 80px;
  border: 1px solid var(--line);
  background: var(--white);
}
.cdx .treatment-route {
  position: relative;
  display: grid;
  min-height: 350px;
  grid-template-columns: 1fr auto;
  gap: 26px;
  padding: 46px;
  border-bottom: 1px solid var(--line);
  transition: background-color 220ms ease;
}
.cdx .treatment-route:hover {
  background: var(--porcelain);
}
.cdx .treatment-route--primary {
  min-height: 700px;
  grid-row: span 2;
  padding: 58px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}
.cdx .treatment-route--compact {
  border-bottom: 0;
}
.cdx .treatment-route h3 {
  max-width: 14ch;
  margin-bottom: 24px;
  color: var(--navy-deep);
  font-family: var(--sans);
  font-size: clamp(2rem, 3vw, 3.45rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1.03;
}
.cdx .treatment-route:not(.treatment-route--primary) h3 {
  font-size: clamp(1.65rem, 2.3vw, 2.45rem);
}
.cdx .treatment-route > div > p {
  max-width: 43ch;
  color: var(--steel-dark);
}
.cdx .route-links {
  display: grid;
  max-width: 520px;
  margin-top: 44px;
  border-top: 1px solid var(--line);
}
.cdx .route-links a {
  position: relative;
  padding: 14px 26px 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-size: 0.83rem;
}
.cdx .route-links a::after {
  position: absolute;
  right: 0;
  color: var(--green);
  content: "→";
}
.cdx .route-links a:hover {
  color: var(--navy-deep);
}
.cdx .route-arrow {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--green);
  font-size: 1.2rem;
  transition: background-color 180ms ease, color 180ms ease;
}
.cdx .route-arrow:hover {
  background: var(--green);
  color: var(--ink);
}
.cdx .explorer-intro {
  padding-bottom: clamp(54px, 6vw, 86px);
  background: var(--porcelain);
}
.cdx .explorer-intro__grid > p {
  padding-top: 38px;
  color: var(--steel-dark);
  line-height: 1.75;
}
.cdx .ipc-navigator-band {
  padding: 0 32px clamp(90px, 9vw, 145px);
  background: var(--porcelain);
}
.cdx .ipc-navigator-band > .ipc-navigator {
  width: min(1320px, 100%);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 40px 110px rgba(0, 5, 76, 0.2);
}
.cdx .ipc-navigator .navigator__intro h2 {
  max-width: 620px;
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(3.7rem, 5.5vw, 5.7rem);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 0.88;
  text-wrap: balance;
}
.cdx .ipc-navigator .condition-panel__heading h3 {
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(2.15rem, 3vw, 3.35rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.cdx .clinics {
  background: var(--white);
}
.cdx .section-heading--clinics h2 {
  max-width: 12ch;
}
.cdx .section-heading--clinics > p {
  color: var(--steel-dark);
}
.cdx .clinic-panorama {
  display: grid;
  height: 560px;
  grid-template-columns: 1.55fr 0.72fr 0.9fr;
  margin-top: 74px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.cdx .clinic-photo {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border-right: 4px solid var(--white);
}
.cdx .clinic-photo:last-child {
  border-right: 0;
}
.cdx .clinic-photo::after {
  position: absolute;
  z-index: 0;
  inset: 42% 0 0;
  background: linear-gradient(transparent, rgba(0, 5, 76, 0.88));
  content: "";
}
.cdx .clinic-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cdx .clinic-photo--tall img {
  object-position: 50% 48%;
}
.cdx .clinic-photo:hover img {
  transform: scale(1.035);
}
.cdx .clinic-photo > span {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  padding: 30px;
  color: var(--white);
}
.cdx .clinic-photo small {
  color: var(--green);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.cdx .clinic-photo strong {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: clamp(1.7rem, 2.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.cdx .clinic-photo em {
  margin-top: 15px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cdx .clinic-directory {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 52px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cdx .clinic-directory > a {
  display: grid;
  min-height: 170px;
  align-content: center;
  gap: 15px;
  padding: 26px;
  border-right: 1px solid var(--line);
  transition: background-color 180ms ease;
}
.cdx .clinic-directory > a:last-child {
  border-right: 0;
}
.cdx .clinic-directory > a:hover {
  background: var(--porcelain);
}
.cdx .clinic-directory span {
  display: grid;
}
.cdx .clinic-directory b {
  color: var(--navy-deep);
  font-size: 1.05rem;
}
.cdx .clinic-directory small {
  color: var(--steel-dark);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cdx .clinic-directory strong {
  color: var(--navy);
  font-size: 0.82rem;
}
.cdx .clinic-directory em {
  color: var(--steel-dark);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cdx .patient-guide {
  background: var(--porcelain);
  color: var(--ink);
}
.cdx .patient-guide__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
  gap: 110px;
  align-items: start;
}
.cdx .patient-guide__copy p:last-child {
  max-width: 50ch;
  margin: 28px 0 0;
  color: var(--steel-dark);
}
.cdx .patient-guide__links {
  border-top: 1px solid var(--line);
}
.cdx .patient-guide__links a {
  display: grid;
  min-height: 116px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  transition: padding-left 180ms ease, background-color 180ms ease;
}
.cdx .patient-guide__links a:hover {
  padding-left: 14px;
  background: var(--white);
}
.cdx .patient-guide__links strong {
  color: var(--navy-deep);
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 700;
}
.cdx .patient-guide__links em {
  color: var(--steel-dark);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cdx .closing-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(92px, 9vw, 138px);
  background: var(--navy-deep);
  color: var(--white);
  text-align: center;
}
.cdx .closing-cta > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}
.cdx .closing-cta > svg path {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.cdx .closing-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
}
.cdx .closing-cta h2 {
  max-width: 12ch;
  font-size: clamp(3rem, 5.2vw, 5.3rem);
}
.cdx .closing-cta p {
  max-width: 54ch;
  margin: 28px auto 34px;
  color: rgba(255, 255, 255, 0.62);
}
.cdx .site-footer {
  padding-top: 72px;
  background: var(--white);
  color: var(--ink);
}
.cdx .site-footer__top {
  display: grid;
  grid-template-columns: 210px 1fr auto;
  align-items: center;
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--line);
}
.cdx .brand--footer, .cdx .brand--footer img {
  width: 200px;
}
.cdx .site-footer__top p {
  max-width: 38ch;
  margin: 0;
  color: var(--steel-dark);
}
.cdx .site-footer button.text-link {
  border: 0;
  border-bottom: 1px solid rgba(0, 7, 109, 0.28);
  background: transparent;
  cursor: pointer;
}
.cdx .site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px;
  padding-block: 56px;
}
.cdx .site-footer__nav > div {
  display: grid;
  gap: 9px;
}
.cdx .site-footer__nav strong {
  margin-bottom: 8px;
  color: var(--navy-deep);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cdx .site-footer__nav a {
  width: max-content;
  color: var(--steel-dark);
  font-size: 0.87rem;
}
.cdx .site-footer__nav a:hover {
  color: var(--navy);
}
.cdx .site-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
  color: var(--steel-dark);
  font-size: 0.69rem;
}
.cdx .site-footer__legal p {
  margin: 0;
}
.cdx .site-footer__legal div {
  display: flex;
  gap: 22px;
}
@media (max-width: 1180px) {
.cdx {
    --shell: min(100% - 48px, 1080px);
  }
.cdx .site-header__inner {
    grid-template-columns: 160px 1fr auto;
    gap: 24px;
  }
.cdx .brand, .cdx .brand img {
    width: 154px;
  }
.cdx .primary-nav {
    gap: 20px;
  }
.cdx .header-action {
    display: none;
  }
.cdx .location-panel__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
.cdx .location-panel__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: end;
  }
.cdx .location-panel__list {
    border-top: 1px solid var(--line);
  }
.cdx.js .location-panel.is-open {
    max-height: 460px;
  }
.cdx .hero__inner {
    min-height: 640px;
    grid-template-columns: minmax(0, 1.1fr) minmax(390px, 0.82fr);
  }
.cdx .hero__copy {
    padding-right: 38px;
  }
.cdx .hero h1 {
    font-size: clamp(3.4rem, 6.2vw, 5rem);
  }
.cdx .hero__portrait {
    min-height: 640px;
  }
.cdx .hero__identity {
    right: -8px;
  }
.cdx .hero__rail-inner {
    grid-template-columns: repeat(3, 1fr);
  }
.cdx .hero__rail-inner > p {
    display: none;
  }
.cdx .physician-section__grid, .cdx .explorer-intro__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.72fr);
    gap: 38px;
  }
.cdx .treatment-route, .cdx .treatment-route--primary {
    padding: 38px;
  }
.cdx .clinic-directory {
    grid-template-columns: repeat(3, 1fr);
  }
.cdx .clinic-directory > a:nth-child(3) {
    border-right: 0;
  }
.cdx .clinic-directory > a:nth-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }
.cdx .patient-guide__grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 70px;
  }
}
@media (max-width: 900px) {
.cdx .site-header {
    height: 84px;
  }
.cdx .site-header__inner {
    grid-template-columns: 1fr auto;
  }
.cdx .menu-toggle {
    display: inline-flex;
  }
.cdx .primary-nav {
    position: absolute;
    top: 84px;
    right: 0;
    left: 0;
    display: grid;
    max-height: 0;
    overflow: hidden;
    padding-inline: 24px;
    background: var(--white);
    opacity: 0;
    box-shadow: var(--shadow-rest);
    transition: max-height 320ms ease, opacity 180ms ease, padding 320ms ease;
  }
.cdx .primary-nav a {
    min-height: 52px;
    padding: 15px 4px;
    border-bottom: 1px solid var(--line);
  }
.cdx .primary-nav a::after {
    display: none;
  }
.cdx .site-header.is-menu-open .primary-nav {
    max-height: 430px;
    padding-block: 12px 20px;
    opacity: 1;
  }
.cdx.js .location-panel {
    top: 84px;
  }
.cdx .location-panel__list {
    grid-template-columns: repeat(2, 1fr);
  }
.cdx .location-panel__list a {
    min-height: 82px;
    border-bottom: 1px solid var(--line);
  }
.cdx.js .location-panel.is-open {
    max-height: calc(100vh - 84px);
    overflow-y: auto;
  }
.cdx .hero__inner {
    min-height: auto;
    grid-template-columns: 1fr;
  }
.cdx .hero__copy {
    max-width: 820px;
    padding: 78px 0 54px;
  }
.cdx .hero h1 {
    max-width: 14ch;
    font-size: clamp(3.3rem, 9vw, 5.3rem);
  }
.cdx .hero__portrait {
    min-height: 610px;
    margin-inline: 8%;
  }
.cdx .hero__portrait img {
    clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%, 4% 55%);
  }
.cdx .hero__portrait-field {
    inset: 8% 0 0;
  }
.cdx .hero__identity {
    right: -18px;
    bottom: 24px;
  }
.cdx .hero__trajectory {
    top: 240px;
    height: 660px;
  }
.cdx .hero__rail-inner {
    grid-template-columns: 1fr;
  }
.cdx .hero__rail-inner > a {
    min-height: 82px;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
.cdx .physician-section__grid, .cdx .explorer-intro__grid {
    grid-template-columns: 1fr;
  }
.cdx .physician-section__detail, .cdx .explorer-intro__grid > p {
    grid-column: 1;
    padding-top: 0;
  }
.cdx .physician-principles {
    grid-template-columns: 1fr;
  }
.cdx .physician-principles > div {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
.cdx .physician-principles > div:last-child {
    border-bottom: 0;
  }
.cdx .section-heading--split {
    grid-template-columns: 1fr;
    gap: 34px;
  }
.cdx .treatment-routes {
    grid-template-columns: 1fr;
  }
.cdx .treatment-route, .cdx .treatment-route--primary {
    min-height: auto;
    grid-row: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
.cdx .treatment-route--compact {
    border-bottom: 0;
  }
.cdx .ipc-navigator-band {
    padding-inline: 24px;
  }
.cdx .ipc-navigator-band > .ipc-navigator {
    border-radius: 12px;
  }
.cdx .clinic-panorama {
    height: auto;
    grid-template-columns: 1fr 1fr;
  }
.cdx .clinic-photo {
    min-height: 390px;
  }
.cdx .clinic-photo--wide:first-child {
    grid-column: 1 / -1;
    min-height: 460px;
    border-right: 0;
    border-bottom: 4px solid var(--white);
  }
.cdx .clinic-directory {
    grid-template-columns: repeat(2, 1fr);
  }
.cdx .clinic-directory > a, .cdx .clinic-directory > a:nth-child(3) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
.cdx .clinic-directory > a:nth-child(even) {
    border-right: 0;
  }
.cdx .patient-guide__grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
.cdx .site-footer__top {
    grid-template-columns: 1fr auto;
  }
.cdx .site-footer__top p {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (max-width: 760px) {
.cdx {
    --shell: calc(100% - 36px);
  }
.cdx {
    scroll-padding-top: 84px;
  }
.cdx .section-pad {
    padding-block: 78px;
  }
.cdx .brand, .cdx .brand img {
    width: 136px;
  }
.cdx .location-panel__inner {
    padding-block: 28px;
  }
.cdx .location-panel__intro {
    display: block;
  }
.cdx .location-panel__list {
    grid-template-columns: 1fr;
  }
.cdx .hero__copy {
    padding-block: 38px 24px;
  }
.cdx .hero h1 {
    max-width: 12ch;
    margin-bottom: 24px;
    font-size: clamp(2.75rem, 8.4vw, 3.5rem);
    line-height: 0.98;
  }
.cdx .hero__lede {
    margin-bottom: 26px;
    font-size: 1rem;
  }
.cdx .hero__actions {
    align-items: center;
    flex-direction: row;
    gap: 12px;
  }
.cdx .hero__actions .button {
    min-width: 0;
    flex: 1 1 auto;
  }
.cdx .hero__actions .text-link {
    flex: 0 0 auto;
  }
.cdx .hero__portrait {
    height: 560px;
    min-height: 0;
    margin-inline: 0;
  }
.cdx .hero__portrait img {
    object-position: 50% 38%;
  }
.cdx .hero__identity {
    right: 0;
    bottom: 18px;
    width: 86%;
    padding: 22px;
  }
.cdx .hero__rail {
    display: none;
  }
.cdx .hero__trajectory {
    top: 410px;
    height: 480px;
  }
.cdx .physician-section__grid, .cdx .explorer-intro__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
.cdx .physician-section__detail, .cdx .explorer-intro__grid > p {
    grid-column: 1;
  }
.cdx .physician-section__statement h2, .cdx .explorer-intro h2, .cdx .section-heading h2, .cdx .patient-guide h2, .cdx .closing-cta h2 {
    font-size: clamp(2.55rem, 12vw, 3.7rem);
  }
.cdx .physician-principles {
    margin-top: 58px;
  }
.cdx .physician-principles > div {
    padding-inline: 22px;
  }
.cdx .treatment-routes {
    margin-top: 54px;
  }
.cdx .treatment-route, .cdx .treatment-route--primary {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 32px 24px;
  }
.cdx .treatment-route h3, .cdx .treatment-route:not(.treatment-route--primary) h3 {
    font-size: 2rem;
  }
.cdx .route-arrow {
    grid-column: 1;
    margin-top: 12px;
  }
.cdx .ipc-navigator-band {
    padding: 0 0 78px;
  }
.cdx .ipc-navigator-band > .ipc-navigator {
    border-radius: 0;
    box-shadow: none;
  }
.cdx .ipc-navigator .navigator__intro h2 {
    font-size: clamp(2.7rem, 13vw, 3.9rem);
  }
.cdx .ipc-navigator .condition-panel__heading h3 {
    font-size: 2.25rem;
  }
.cdx .clinic-panorama {
    height: auto;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82vw;
    margin-top: 52px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 0;
    scroll-snap-type: inline mandatory;
    scrollbar-color: var(--green) rgba(0, 7, 109, 0.08);
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    box-shadow: none;
  }
.cdx .clinic-photo, .cdx .clinic-photo--wide:first-child {
    grid-column: auto;
    min-height: 360px;
    border-right: 4px solid var(--white);
    border-bottom: 0;
    scroll-snap-align: start;
  }
.cdx .clinic-photo:last-child {
    border-right: 0;
  }
.cdx .clinic-panorama::-webkit-scrollbar {
    height: 7px;
  }
.cdx .clinic-panorama::-webkit-scrollbar-track {
    background: rgba(0, 7, 109, 0.08);
  }
.cdx .clinic-panorama::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: var(--green);
  }
.cdx .clinic-directory {
    grid-template-columns: 1fr;
  }
.cdx .clinic-directory > a, .cdx .clinic-directory > a:nth-child(3), .cdx .clinic-directory > a:nth-child(even) {
    min-height: 128px;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-right: 0;
  }
.cdx .clinic-directory em {
    grid-column: 1 / -1;
  }
.cdx .patient-guide__links a {
    grid-template-columns: 1fr auto;
    padding-block: 18px;
  }
.cdx .patient-guide__links em {
    grid-column: 2;
  }
.cdx .site-footer__top, .cdx .site-footer__nav {
    grid-template-columns: 1fr;
  }
.cdx .site-footer__top .text-link {
    justify-self: start;
  }
.cdx .site-footer__top p {
    grid-column: 1;
    grid-row: auto;
  }
.cdx .site-footer__nav {
    gap: 34px;
  }
.cdx .site-footer__legal {
    align-items: flex-start;
    flex-direction: column;
  }
.cdx .site-footer__legal div {
    flex-wrap: wrap;
  }
}
@media (max-width: 430px) {
.cdx {
    --shell: calc(100% - 28px);
  }
.cdx .menu-toggle__label {
    display: none;
  }
.cdx .hero h1 {
    font-size: 2.75rem;
  }
.cdx .hero__portrait {
    height: 470px;
  }
.cdx .hero__actions .button {
    padding-inline: 14px;
    font-size: 0.7rem;
  }
.cdx .hero__actions .text-link {
    gap: 9px;
    font-size: 0.7rem;
  }
.cdx .hero__identity {
    width: 92%;
  }
.cdx .treatment-route, .cdx .treatment-route--primary {
    padding-inline: 20px;
  }
.cdx .clinic-photo, .cdx .clinic-photo--wide:first-child {
    min-height: 320px;
  }
.cdx .patient-guide__links a {
    grid-template-columns: 1fr;
    gap: 4px;
  }
.cdx .patient-guide__links em {
    grid-column: 1;
  }
.cdx .clinic-photo > span {
    padding: 24px;
  }
.cdx .closing-cta .button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
.cdx {
    scroll-behavior: auto;
  }
.cdx *, .cdx *::before, .cdx *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
.cdx .hero__trajectory path {
    stroke-dashoffset: 0;
  }
.cdx .clinic-photo:hover img, .cdx .button--primary:hover {
    transform: none;
  }
}


/* ---- donor: sandbox/homepage-final/cdx-clinics.css ---- */
.cdx :is(
  .physician-section, .cdx .treatments, .cdx .explorer-intro, .cdx .clinics, .cdx .patient-guide, .cdx .closing-cta, .cdx .site-footer
) {
  font-size: 17px;
}
.cdx :is(
  .physician-section, .cdx .treatments, .cdx .explorer-intro, .cdx .clinics, .cdx .patient-guide
).section-pad {
  padding-block: var(--section-rhythm);
}
.cdx :is(
  .physician-section__statement h2, .cdx .treatments .section-heading h2, .cdx .explorer-intro h2, .cdx .clinics .section-heading h2, .cdx .patient-guide h2, .cdx .closing-cta h2
) {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.99;
}
.cdx :is(
  .physician-section, .cdx .treatments, .cdx .explorer-intro, .cdx .clinics, .cdx .patient-guide, .cdx .closing-cta, .cdx .site-footer
) :is(a, .cdx button):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}
.cdx :is(
  .physician-section, .cdx .treatments, .cdx .explorer-intro, .cdx .clinics, .cdx .patient-guide, .cdx .closing-cta, .cdx .site-footer
) .text-link {
  font-size: 0.9rem;
}
.cdx .clinics {
  background:
    radial-gradient(circle at 5% 18%, rgba(0, 7, 109, 0.05) 0 1px, transparent 2px),
    #F9FBFE;
}
.cdx .clinic-panorama {
  display: grid;
  height: 480px;
  grid-template-columns: 1.52fr 0.74fr 0.92fr;
  gap: 8px;
  margin-top: 48px;
  padding: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: var(--corridor-depth);
}
.cdx .clinic-photo, .cdx .clinic-photo:last-child {
  border: 0;
  border-radius: 10px;
}
.cdx .clinic-photo::after {
  inset: 32% 0 0;
  background: linear-gradient(transparent, rgba(0, 5, 76, 0.92));
}
.cdx .clinic-photo > span {
  padding: 26px;
}
.cdx .clinic-photo small {
  color: #9CEB61;
  font-size: 0.7rem;
}
.cdx .clinic-photo strong {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 2.4vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}
.cdx .clinic-photo em {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
}
.cdx .clinic-directory {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: 24px;
  padding: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #10227B, #00054C);
  box-shadow: var(--corridor-depth);
}
.cdx .clinic-directory > a, .cdx .clinic-directory > a:last-child {
  position: relative;
  display: grid;
  min-height: 150px;
  align-content: center;
  gap: 12px;
  padding: 22px 20px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  transition: transform 180ms ease, background-color 180ms ease;
}
.cdx .clinic-directory > a::after {
  position: absolute;
  top: 20px;
  right: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}
.cdx .clinic-directory > a:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}
.cdx .clinic-directory b {
  color: #FFFFFF;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
}
.cdx .clinic-directory small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.7rem;
}
.cdx .clinic-directory strong {
  color: #FFFFFF;
  font-size: 0.9rem;
}
.cdx .clinic-directory em {
  color: #9CEB61;
  font-size: 0.9rem;
}
@media (max-width: 900px) {
.cdx .clinic-panorama {
    height: 440px;
    grid-template-columns: 1.25fr 0.8fr 0.95fr;
  }
.cdx .clinic-directory {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.cdx .clinic-directory > a:nth-child(n) {
    min-height: 132px;
    border: 0;
  }
}
@media (max-width: 760px) {
.cdx :is(
    .physician-section, .cdx .treatments, .cdx .explorer-intro, .cdx .clinics, .cdx .patient-guide
  ).section-pad {
    padding-block: var(--section-rhythm-mobile);
  }
.cdx .clinic-panorama {
    height: auto;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84vw;
    gap: 8px;
    margin-top: 34px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scroll-snap-type: inline mandatory;
  }
.cdx .clinic-photo, .cdx .clinic-photo--wide:first-child {
    min-height: 360px;
    border: 0;
    scroll-snap-align: start;
  }
.cdx .clinic-directory {
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: 18px;
    padding: 7px;
  }
.cdx .clinic-directory > a:nth-child(n) {
    min-height: 108px;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 7px 18px;
    padding: 18px;
  }
.cdx .clinic-directory > a::after {
    top: 16px;
    right: 16px;
  }
.cdx .clinic-directory em {
    grid-column: 1 / -1;
  }
}
@media (max-width: 420px) {
.cdx .clinic-directory > a:nth-child(n) {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
.cdx :is(
    .physician-principles > div, .cdx .treatment-route, .cdx .patient-guide__links a, .cdx .clinic-directory > a, .cdx .clinic-photo img, .cdx .route-arrow
  ) {
    transition: none !important;
  }
.cdx :is(
    .physician-principles > div:hover, .cdx .treatment-route:hover, .cdx .patient-guide__links a:hover, .cdx .clinic-directory > a:hover, .cdx .clinic-photo:hover img
  ) {
    transform: none !important;
  }
}


/* ---- donor: sandbox/homepage-final/cdx-directory.css ---- */
/* GENERATED from sandbox/homepage-codex/options/c/option-c.css
   by build-hybrid.py -- owner round 16c. Do not hand-edit: rerun the
   build. Selectors are re-scoped body[data-option="c"] -> .cdx and
   option C's own token VALUES are inlined, because .cdx does not
   define --route-steel or --depth-hover. */

/* RESET FIRST. Extracting one donor's rules does NOT undo the other
   donor's -- it only overrides the properties option C actually
   DECLARES. cdx-clinics.css (option A) styles the same component and
   loads earlier, so everything C is silent about survived underneath:
   A's `gap:1px` and `padding:8px` on the panel (C divides with borders
   and has no gutter), A's translucent tile background and 10px radius
   (C's tiles are the panel itself), and A's green ::after status dot,
   which C does not have at all. Measured: the panel still rendered with
   a 1px gap after a clean extraction. Neutralised explicitly rather
   than by hoping the override list is complete. */
.cdx .clinic-directory { gap: 0; padding: 0; }
.cdx .clinic-directory > a { background: transparent; border-radius: 0; }
.cdx .clinic-directory > a::after { content: none; }

.cdx .clinic-directory {display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 20px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 7, 109, 0.04), 0 12px 32px rgba(0, 7, 109, 0.09);}
.cdx .clinic-directory > a {min-height: 150px;
  gap: 12px;
  padding: 24px;
  border-right: 1px solid rgba(0, 7, 109, 0.11);
  transition: background-color 180ms ease, transform 180ms ease;}
.cdx .clinic-directory > a:last-child {border-right: 0;}
.cdx .clinic-directory > a:hover {z-index: 1;
  transform: translateY(-3px);
  background: #EEF5E9;
  box-shadow: 0 4px 8px rgba(0, 7, 109, 0.05), 0 20px 52px rgba(0, 7, 109, 0.16);}
.cdx .clinic-directory b {color: #00054C;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 600;}
.cdx .clinic-directory small {color: #63738D;
  font-size: 0.7rem;}
.cdx .clinic-directory strong {color: #00076D;
  font-size: 0.91rem;}
.cdx .clinic-directory em {color: #63738D;
  font-size: 0.9rem;}
@media(max-width: 1180px) {
  .cdx .clinic-directory {grid-template-columns: repeat(3, 1fr);}
  .cdx .clinic-directory > a:nth-child(3) {border-right: 0;}
  .cdx .clinic-directory > a:nth-child(-n + 3) {border-bottom: 1px solid rgba(0, 7, 109, 0.11);}
}
@media(max-width: 900px) {
  .cdx .clinic-directory {grid-template-columns: repeat(2, 1fr);}
  .cdx .clinic-directory > a, .cdx .clinic-directory > a:nth-child(3) {border-right: 1px solid rgba(0, 7, 109, 0.11);
    border-bottom: 1px solid rgba(0, 7, 109, 0.11);}
  .cdx .clinic-directory > a:nth-child(even) {border-right: 0;}
}
@media(max-width: 760px) {
  .cdx .clinic-directory {grid-template-columns: 1fr;
    margin-top: 14px;}
  .cdx .clinic-directory > a, .cdx .clinic-directory > a:nth-child(3), .cdx .clinic-directory > a:nth-child(even) {min-height: 112px;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 7, 109, 0.11);}
  .cdx .clinic-directory > a:last-child {border-bottom: 0;}
  .cdx .clinic-directory em {grid-column: 1 / -1;}
}
@media(max-width: 430px) {
  .cdx .clinic-directory strong {font-size: 0.9rem;}
}
@media(prefers-reduced-motion: reduce) {
  .cdx :is( .pathway-index a, .treatment-route, .clinic-directory > a, .patient-guide__links a ):hover {transform: none;}
}


/* ---- donor: sandbox/homepage-final/cdx-guide.css ---- */
.cdx :is(.physician-section, .cdx .treatments, .cdx .explorer-intro, .cdx .clinics, .cdx .patient-guide, .cdx .closing-cta, .cdx .site-footer) {
  font-size: 17px;
}
.cdx :is(.gallery-spread, .cdx .folio-plate, .cdx .clinic-artifact, .cdx .treatment-route, .cdx .patient-guide__links, .cdx .closing-cta__inner) {
  min-width: 0;
}
.cdx :is(.physician-section, .cdx .treatments, .cdx .explorer-intro, .cdx .clinics, .cdx .patient-guide, .cdx .closing-cta) h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.15rem, 4.7vw, 5.35rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.96;
}
.cdx :is(.gallery-spread__heading > p, .cdx .physician-artifact__intro, .cdx .gallery-spread--explorer > p) {
  color: var(--gallery-steel);
  font-size: 1rem;
  line-height: 1.75;
}
.cdx .gallery-spread {
  display: grid;
  grid-template-columns: minmax(250px, 0.35fr) minmax(0, 0.9fr);
  gap: clamp(42px, 6vw, 94px);
  align-items: start;
}
.cdx .gallery-spread__heading {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 28px;
  padding-top: 16px;
}
.cdx .gallery-spread__heading h2 {
  max-width: 9.5ch;
  color: var(--navy-deep);
}
.cdx .gallery-spread__heading > p {
  max-width: 34ch;
  margin: 0;
}
.cdx .folio-number {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  background: var(--green);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
  color: #14200D;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}
.cdx .folio-plate {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFD 62%, #EEF3FB 100%);
  box-shadow: var(--gallery-rest-depth);
}
.cdx .folio-plate::before {
  position: absolute;
  z-index: 3;
  top: -11px;
  right: 34px;
  width: 38px;
  height: 38px;
  background: var(--green);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 32% 30%, 32% 100%, 0 100%);
  content: "";
  pointer-events: none;
}
.cdx .folio-plate::after {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 30px;
  color: rgba(0, 7, 109, 0.52);
  content: attr(data-folio);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  pointer-events: none;
}
.cdx .gallery-spread--physician {
  align-items: center;
}
.cdx .gallery-spread--physician .gallery-spread__heading {
  padding-bottom: 24px;
}
.cdx .gallery-spread--physician .text-link {
  width: max-content;
  max-width: 100%;
  color: var(--navy);
  font-size: 0.92rem;
}
.cdx .gallery-spread--treatments .gallery-spread__heading {
  padding-top: 10px;
}
.cdx .gallery-spread--treatments .gallery-spread__heading > p {
  margin-top: 8px;
}
.cdx .gallery-spread--explorer {
  align-items: end;
}
.cdx .gallery-spread--explorer .gallery-spread__heading {
  padding-top: 0;
}
.cdx .gallery-spread--explorer .gallery-spread__heading h2 {
  max-width: 10ch;
}
.cdx .gallery-spread--explorer > p {
  max-width: 49ch;
  margin: 0 0 7px;
  padding: 0 14% 0 0;
}
.cdx .gallery-spread--clinics {
  grid-template-columns: minmax(250px, 0.3fr) minmax(0, 1fr);
}
.cdx .gallery-spread--clinics .gallery-spread__heading {
  padding-top: 2px;
}
.cdx .gallery-spread--clinics .gallery-spread__heading h2 {
  max-width: 9.3ch;
  color: #FFFFFF;
}
.cdx .gallery-spread--clinics .gallery-spread__heading > p {
  color: rgba(255, 255, 255, 0.82);
}
.cdx .gallery-spread--clinics .folio-number {
  background: var(--green);
  color: #14200D;
}
.cdx .patient-guide {
  background: linear-gradient(180deg, #E9EEF6 0%, #F6F8FB 100%);
}
.cdx .gallery-spread--patient {
  align-items: center;
}
.cdx .patient-guide__copy p:last-child {
  max-width: 34ch;
  margin: 0;
  color: var(--gallery-steel);
  font-size: 1rem;
  line-height: 1.7;
}
.cdx .patient-guide__links {
  overflow: visible;
  border: 0;
  transform: translateY(7px);
  counter-reset: patient-ledger;
}
.cdx .patient-guide__links a {
  position: relative;
  display: grid;
  min-height: 124px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 24px;
  padding: 22px 30px;
  border: 0;
  border-bottom: 1px solid rgba(0, 7, 109, 0.12);
  counter-increment: patient-ledger;
}
.cdx .patient-guide__links a:last-child {
  border-bottom: 0;
  border-radius: 0 0 16px 16px;
}
.cdx .patient-guide__links a:first-child {
  border-radius: 16px 16px 0 0;
}
.cdx .patient-guide__links a::before {
  color: var(--green);
  content: "0" counter(patient-ledger);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.cdx .patient-guide__links a:hover {
  padding-left: 38px;
  background: rgba(0, 7, 109, 0.035);
}
.cdx .patient-guide__links strong {
  color: var(--navy-deep);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  font-weight: 600;
}
.cdx .patient-guide__links em {
  max-width: 28ch;
  color: var(--gallery-steel);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: right;
}
@media (max-width: 1180px) {
.cdx .gallery-spread {
    grid-template-columns: minmax(220px, 0.31fr) minmax(0, 0.69fr);
    gap: 48px;
  }
}
@media (max-width: 900px) {
.cdx .gallery-spread, .cdx .gallery-spread--clinics {
    grid-template-columns: 1fr;
    gap: 38px;
  }
.cdx .gallery-spread__heading {
    max-width: 720px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px 22px;
    align-items: start;
    padding-top: 0;
  }
.cdx .gallery-spread__heading h2 {
    max-width: 12ch;
  }
.cdx .gallery-spread__heading > :is(p, .cdx .text-link) {
    grid-column: 2;
  }
.cdx .treatment-routes, .cdx .patient-guide__links {
    transform: none;
  }
.cdx .gallery-spread--explorer {
    gap: 26px;
  }
.cdx .gallery-spread--explorer > p {
    max-width: 58ch;
    padding-right: 0;
  }
}
@media (max-width: 760px) {
.cdx :is(.physician-section, .cdx .treatments, .cdx .explorer-intro, .cdx .clinics, .cdx .patient-guide, .cdx .closing-cta, .cdx .site-footer) {
    font-size: 16px;
  }
.cdx :is(.physician-section, .cdx .treatments, .cdx .explorer-intro, .cdx .clinics, .cdx .patient-guide, .cdx .closing-cta) h2 {
    font-size: clamp(2.55rem, 11.5vw, 3.7rem);
  }
.cdx .gallery-spread {
    gap: 30px;
  }
.cdx .gallery-spread__heading {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px 18px;
  }
.cdx .folio-number, .cdx .closing-cta__number {
    width: 42px;
    height: 42px;
  }
.cdx .folio-plate::before {
    right: 20px;
  }
.cdx .folio-plate::after {
    right: 18px;
    max-width: 52%;
    overflow: hidden;
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.cdx .patient-guide__links a {
    min-height: 110px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 15px;
    padding: 22px 20px;
  }
.cdx .patient-guide__links a:hover {
    padding-left: 20px;
  }
.cdx .patient-guide__links em {
    grid-column: 2;
    text-align: left;
  }
}
@media (max-width: 430px) {
.cdx .gallery-spread__heading h2 {
    font-size: 2.55rem;
  }
.cdx .patient-guide__links strong {
    font-size: 1.2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
.cdx .clinic-photo:hover img, .cdx .route-arrow:hover, .cdx .patient-guide__links a:hover {
    transform: none;
  }
}


/* ---- donor: sandbox/homepage-final/hybrid-hero.css ---- */
/* ==========================================================================
   HERO TUNING — owner round 7 (2026-08-12)
   Asks: (a) bring the hero's top closer to the nav, (b) shrink the type and
   lift the bottom so Dr. Hare's identity plate is visible without scrolling.
   MEASURED BEFORE: viewport 900, hero top 72, hero height 943 (115px past the
   fold), h1 80.64px over five lines, inner min-height 700px, identity plate
   bottom at 899 - i.e. flush with the very edge on a 900px viewport and below
   the fold on a real browser with a bookmarks bar. Loaded after cdx-base.css.
   ========================================================================== */

/* (a) close the gap under the nav */
.cdx .hero__inner {
  min-height: 0;
  padding-top: 1.6rem;
  padding-bottom: 0;
}

/* (b) smaller display type - four lines instead of five, and it stops
   competing with the portrait for the first screen */
.cdx .hero h1 {
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  line-height: 1.02;
  margin-bottom: .8rem;
  max-width: 15ch;
}
.cdx .hero__lede {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 1.4rem;
  max-width: 46ch;
}
.cdx .hero__actions { margin-bottom: 0; }

/* the portrait column follows the shorter copy column rather than forcing
   its own height */
.cdx .hero__portrait { align-self: end; }

@media (min-width: 1024px) {
  /* keep the identity plate inside the first screen on a laptop: the plate is
     anchored to the portrait's lower edge, so the portrait is what must not
     overrun. 72px nav + hero must land under ~780px of usable height. */
  .cdx .hero__inner { min-height: 0; }
  .cdx .hero__portrait img { max-height: 60vh; width: auto; object-fit: cover; }
}

/* the hero rail sits directly under the fold line - tighten it so it reads as
   the hero's base rather than a separate band */
.cdx .hero__rail { padding-block: .9rem; }

/* MEASURED SECOND PASS (viewport 800): hero still 870. The drivers were not
   the type - they were (1) .hero__copy's own 88/94px block padding and (2)
   .hero__portrait sitting at a fixed 700px while its image was only 480px.
   Both are Codex rules; overridden here rather than in their sheet. */
.cdx .hero__copy { padding-block: 1.6rem 1.8rem; }
.cdx .hero__portrait { min-height: 0; height: auto; align-self: end; }
.cdx .hero__portrait img {
  max-height: calc(100vh - 330px);
  min-height: 320px;
  /* object-fit:cover at a reduced height crops BOTH edges and was clipping the
     top of his head. Anchor to the top so any crop takes the shirt instead. */
  object-position: top center;
}
.cdx .hero__rail { padding-block: .7rem; }
.cdx .hero__rail-inner { gap: 1rem; }

/* ==========================================================================
   OWNER ROUND 8 (2026-08-12) — two asks, and they interact.

   (1) "I dont want to see the second section I want the bottom of the hero to
       snap to the bottom so its all you see on the launch of the website."
       Round 7 overshot: MEASURED at 1440x900 the hero ran 72 -> 806 in a 900px
       viewport, leaving a 94px strip of the next section showing. Tuning the
       portrait's max-height again would only move that number, so the hero now
       OWNS the first screen by construction: its own min-height is the viewport
       minus the sticky header, and the rail is its base.

   (2) "use this version of Dr Hare for the hero so there is no gray background."
       The portrait is now an alpha cutout. That changes the required FIT: the
       donor rules were written for a rectangular studio photograph and both of
       them damage a cutout -- `object-fit: cover` crops the figure, and the
       decorative clip-path polygon slices through his left shoulder.

   These are appended so they win over the round-7 caps above, which were the
   thing holding the hero short.
   ========================================================================== */

/* --- (1) the hero owns the first screen ---------------------------------- */
.cdx .hero {
  /* vh first as the fallback, then dvh: on a phone a collapsing URL bar must
     not reveal a strip of the next section, which is the whole ask. */
  min-height: calc(100vh - var(--header-h, 72px));
  min-height: calc(100dvh - var(--header-h, 72px));
  display: flex;
  flex-direction: column;
}
/* the copy/portrait grid absorbs whatever slack there is; the rail keeps its
   natural height and lands flush on the fold line */
.cdx .hero__inner { flex: 1 1 auto; min-height: 0; }
.cdx .hero__rail  { flex: 0 0 auto; }

/* --- (2) the portrait is a CUTOUT, not a framed photograph ---------------- */
.cdx .hero__portrait {
  align-self: stretch;   /* was `end` - the figure now owns the full column */
  height: auto;
  min-height: 0;
}
/* The image is taken OUT OF FLOW on purpose. Left in flow it has `width:100%`
   and an 800x1014 intrinsic aspect, so it computes its own height from the
   COLUMN WIDTH and drives the row -- measured 766px, which pushed the hero
   102px past the fold even with the min-height above. Absolute positioning
   inverts that: the hero decides the box, the image fills it. That is also why
   there are no magic numbers here for the rail or the padding, which is the
   trap round 7 fell into. */
.cdx .hero__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;      /* round 7's calc() cap is what kept the hero short */
  min-height: 0;
  object-fit: contain;             /* cover would crop a cutout */
  object-position: bottom center;  /* he stands on the rail */
  clip-path: none;                 /* the polygon shaped a RECTANGULAR photo */
}

/* the white arch behind him was a backdrop for a photo with edges. Against a
   cutout it reads as a halo, which is the point - but it must not sit wider
   than the figure or it looks like a leftover shape. */
/* Symmetric insets so the arch is centred on its box BY CONSTRUCTION, then the
   same translate the figure gets -- so the two stay concentric whatever
   `--hare-shift` is set to, instead of needing a re-tuned constant each time.
   (Measured before this: the arch's centre sat 60px right of his -- 46px of
   figure shift plus 14px from the old asymmetric 0%/4% insets.)
   The 0px fallback matters: `--hare-shift` only exists in the desktop block
   below, and an unresolved var() would invalidate the whole declaration. */
.cdx .hero__portrait-field {
  inset: 14% 2% 0 2%;
  transform: translateX(calc(-1 * var(--hare-shift, 0px)));
}

/* --- ROUND 8b: "I feel like Dr hare is too small." ------------------------
   HEIGHT is the binding constraint, not width: the figure is CONTAINed, and
   its box was only the copy row (the hero MINUS the rail), so it fitted to
   664px tall and letterboxed to 524 wide with 40px of dead air each side.
   Widening the column alone does nothing while height binds.

   So he gets the hero's FULL height and passes BEHIND the rail (rail z-index 4
   vs the portrait's 2), which reads as deliberate rather than cropped, and the
   column widens so width never becomes the new binding edge.

   The rail height is DECLARED here once and the rail is pinned to it, so the
   two stay in step -- deliberately not the loose per-element pixel cap that
   round 7 kept having to re-tune. Scoped to the branch where the snap applies. */
@media (min-width: 901px) {
  .cdx .hero {
    --hero-rail-h: 138px;
    /* ROUND 8c knobs. Kept as three INDEPENDENT variables so each can be dialled
       without disturbing the others -- size and horizontal position interact if
       you try to do both by resizing the box, because `contain` re-centres. */
    /* extra height beyond the hero => a bigger figure. Tied to viewport height
       rather than a flat 54px: the figure's top lands at `98px - extra`, so a
       FIXED extra eats the headroom above his hair as the screen gets shorter
       (measured 21px at 900 tall, 10px at 720). `6vh` holds it at ~21px across
       the range instead. */
    --hare-extra: min(54px, 6vh);
    --hare-shift: 46px;   /* how far LEFT he sits (pure translate, no resize) */
    /* distance from the shell's content edge out to the page edge, so the
       identity plate can escape the centred container and hug the right side.
       The shell in the .cdx scope is `min(1400px, 100% - 64px)` -- READ OFF THE
       LIVE ELEMENT, not assumed: a 1320px guess put the plate 28px past the
       edge. Below ~1464px wide the two terms cancel to exactly 32+32, so the
       scrollbar cannot skew it; above that it can be off by half a scrollbar,
       which the plate's right padding absorbs. */
    --shell-gutter: calc((100vw - min(1400px, 100vw - 64px)) / 2 + 2rem);
  }
  .cdx .hero__rail { min-height: var(--hero-rail-h); }
  /* GROW THE HEIGHT, don't offset the bottom: the base rule above sets
     `top:0` AND `height:100%`, which fully determines the box, so a `bottom`
     here is over-constrained and CSS silently DISCARDS it (measured: +0%). */
  .cdx .hero__portrait img {
    /* ANCHOR THE BOTTOM, let the top compute. With `top:0` fixed, extra height
       grows the box DOWNWARD -- and since he is bottom-anchored that just buries
       more of him behind the rail: measured, his hair moved 144px -> 147px, i.e.
       the figure got taller and looked identical. Pinning the bottom to the
       hero's base makes the extra height rise into the frame instead.
       `top:auto` is load-bearing: top + height would over-constrain and CSS
       would silently discard `bottom` (see round 8b). */
    top: auto;
    bottom: calc(-1 * var(--hero-rail-h));
    height: calc(100% + var(--hero-rail-h) + var(--hare-extra));
    /* translate rather than re-inset: `contain` re-centres the drawn figure
       inside its box, so moving an EDGE only shifts him by half of it. */
    transform: translateX(calc(-1 * var(--hare-shift)));
  }
  /* the portrait column must stay wide enough that HEIGHT keeps binding --
     if width binds, the extra height above buys nothing (see the corollary in
     web_html_css_cache_pitfalls.md) */
  .cdx .hero__inner { grid-template-columns: minmax(0, 0.82fr) minmax(520px, 0.98fr); }

  /* the identity plate hugs the PAGE edge, and comes down a size */
  .cdx .hero__identity {
    right: calc(-1 * var(--shell-gutter));
    width: min(348px, 78%);
    padding: 20px 24px;
  }
  .cdx .hero__identity strong { font-size: clamp(1.35rem, 1.6vw, 1.78rem); }
  .cdx .hero__identity em { font-size: .74rem; }
  .cdx .hero__identity a { margin-top: 13px; }
}

@media (max-width: 900px) {
  /* stacked: the copy alone is taller than a phone screen, so forcing the
     figure into the same screen would squash it. Let the hero grow instead --
     the ask ("nothing of section 2 on arrival") still holds, because a taller
     hero shows even less of what follows. */
  .cdx .hero { min-height: 0; display: block; }
  /* back INTO flow: stacked, the figure should size itself again */
  .cdx .hero__portrait img { position: static; height: auto; max-height: 58vh; }
}

/* ==========================================================================
   OWNER ROUND 9 (2026-08-13) — three asks.

   (1) "the text should be a smidge bigger and closer to the navbar"
   (2) "I dont like the dark blue section below the hero area tbh ... get rid
       of that and replace it with the location cards right below"
   (3) "remove the 'meet our providers' right next to book appointment and
       replace it with a 'call now' CTA"

   (2) is the structural one and it reaches further than it looks: the rail was
   not decoration, it was the hero's BASE. Round 8 pinned the portrait to it
   (`bottom: -138px`, `height: 100% + 138px + extra`) so the figure passed
   BEHIND the band. With the band gone those rules would hang the figure 138px
   below the hero and straight into the clinic cards. Re-based off the single
   declared variable rather than re-tuned by hand -- that is the whole reason
   round 8 declared it once instead of scattering pixel caps.
   ========================================================================== */

/* --- (1) a smidge bigger, and tighter to the nav ------------------------- */
.cdx .hero h1 { font-size: clamp(2.3rem, 4vw, 3.9rem); }
.cdx .hero__lede { font-size: 1.06rem; }
/* BOTH of these contribute to the gap under the navbar -- the round-7 sheet
   set one and the round-7 second pass set the other, so trimming only one
   moves the top by half of what you expect. */
.cdx .hero__inner { padding-top: .5rem; }
.cdx .hero__copy { padding-block: .6rem 1.6rem; }
/* ...but padding was NOT the thing holding the copy down. MEASURED: the copy
   column is a grid item with `align-self: center` in an 828px row, so it sat
   200px below the hero top and trimming its padding moved it ~10px. Anchoring
   it to the top is the actual lever; the padding above just sets the gap. */
.cdx .hero__copy { align-self: start; }

/* --- (2) the rail is gone; the figure stands on the hero's own base ------ */
@media (min-width: 901px) {
  .cdx .hero {
    --hero-rail-h: 0px;
    /* `--hare-extra` is deliberately left at round 8's value. The first cut
       raised it, on the assumption that losing the rail's 138px of box would
       shrink the figure. MEASURED, it does not: the portrait column is 706px
       wide and the cutout is 800x1014, so CONTAIN is bound by WIDTH (it needs
       765px to use the full height) and the drawn figure is 895px tall either
       way. Extra height is dead work while width binds -- the same corollary
       round 8c hit from the other side. Widen the column if he must grow. */
  }
}

/* --- (3) the secondary action is the navbar's clinic chooser, reused ------
   Five clinics, no single main line: a hardcoded tel: here would be #11. The
   component's base rules come from frozen-header.css (they are unscoped, so a
   hero instance inherits them); franken-header.css's copies are scoped to
   .hp-header and deliberately do NOT apply. Only the fit needs stating. */
.cdx .hero__actions .call-menu { position: relative; }
/* MEASURED: the button rendered as bare text. `.btn` (0,1,0) declares the pill,
   but Codex's own `.cdx button` reset is (0,1,1) and outranks it, zeroing the
   border and the weight -- the same scope-vs-donor-reset collision already
   filed in web_html_css_cache_pitfalls.md, just pointing the other way. The
   values below are frozen-header.css's OWN .btn / .btn-ghost-navy tokens, not
   new ones, so the hero control and the navbar control stay the same object. */
.cdx .hero__actions .call-menu > .btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(0, 7, 109, .35);
  border-radius: 999px;
  background: transparent;
  color: var(--navy, #00076D);
  font-weight: 700;
  font-size: .95rem;
  padding: .72rem 1.5rem;
  min-height: 44px;           /* tap target */
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.cdx .hero__actions .call-menu > .btn:hover {
  border-color: var(--navy, #00076D);
  background: rgba(0, 7, 109, .05);
}
.cdx .hero__actions .call-menu-panel {
  /* the navbar's panel is right-aligned under a right-hand button; in the hero
     it opens under a LEFT-hand control, so it anchors left instead. */
  left: 0;
  right: auto;
  z-index: 12;
}

/* ==========================================================================
   OWNER ROUND 9 (2026-08-13) — "on my large screen the header text, subtext
   and the two CTAs take up nowhere near enough room and there's a bunch of
   dead space."

   Correct, and it is MECHANICAL rather than taste: every piece of hero type
   stops growing between 1464px and 1560px of viewport, while the layout keeps
   widening. Above that the extra width becomes gutter, so the bigger the
   screen the smaller the hero reads.

   MEASURED on the shipped bytes at 1920x911 (his screen class):

     .hero__inner    1400px inside 1920      -> 520px of empty gutter
     h1              62.4px over FIVE lines  -> clamp ceiling 3.9rem, hit @1560
     .hero__lede     16.96px                 -> flat 1.06rem, never scales
     "Choose your clinic"  12.48px           -> .cdx .button flat .78rem
     "Call now"      15.2px                  -> flat .95rem

   A 12.48px primary call-to-action on a 1920px screen is the worst of these:
   it is the page's main conversion control and it renders smaller than the
   body copy underneath it.

   SCOPE — deliberately >=1500px only. Everything at and below the laptop
   breakpoints took sixteen owner rounds to settle and the fold/snap contract
   from round 8 lives there; none of it moves. The floor of each clamp below is
   the CURRENT value, so at 1499px this block is a no-op by construction.

   The h1 is widened 15ch -> 17ch on purpose. At 76.8px the headline would set
   in five lines again inside 15ch; 17ch holds it at FOUR, which is the shape
   round 7 chose. Four bigger lines is very nearly the same block height as
   five smaller ones, so this does not re-open the "hero snaps to the fold"
   constraint — re-measure rather than trust that sentence.

   .cdx .button is a page-wide class (the closing CTA uses it too). Scoped to
   .hero__actions here so this stays a hero change and nothing else moves.
   ========================================================================== */
@media (min-width: 1500px) {
  /* WHY THE CONTAINER IS NOT WIDENED HERE, THOUGH THE GUTTER IS THE OBVIOUS
     TARGET. Widening `--shell` to 1620 genuinely is the bigger win -- the copy
     column goes 608.6 -> 708.8px and the headline holds five lines at 76.8px.
     It also CLIPS THE "Joshua Hare, DO" PLATE, and that is not a tuning issue,
     it is geometry:

       .cdx .hero__identity is position:absolute; right:-292px -- it hangs
       deliberately OUTSIDE the portrait column, and .hero is overflow:hidden.

     So the plate needs (viewport - shell) / 2 >= ~260px of room to survive,
     i.e. shell <= viewport - 520. At the owner's 1920 that is shell <= 1400 --
     exactly the shipped value. There is ZERO headroom at 1920: any widening at
     all clips the plate. Measured at 1620: plate right edge 2023 against a
     1920 viewport, cut by 103px, and `scrollWidth` still reported NO overflow
     because .hero clips it -- so the DOM check passes and only a SCREENSHOT
     shows the damage.

     Unlocking the wider container therefore means re-anchoring the plate, which
     is an owner-approved design element. Left alone deliberately; raised with
     the owner instead. If it is ever unlocked, `--shell` is the one right lever
     (`.shell` consumes it as BOTH width (cdx-base:63) and max-width
     (frozen-header:36), and max-width beats width, so overriding either
     property alone is inert -- two probes at 1520/1620/1720 left the element at
     1400px and read as "widening doesn't help").

     What is left is type, and it has hard ceilings at the 1400 shell. MEASURED
     at 1920 by sweeping both axes:
        h1   68px -> 5 lines      70px -> SIX lines
        lede 20px -> 3 lines      21px -> FOUR lines
     Both ceilings are taken exactly. Going past either re-flows the block into
     the shape round 7 already rejected, which is worse than leaving it small. */

  .cdx .hero h1 {
    font-size: clamp(3.9rem, 3.55vw, 4.25rem);   /* 62.4 -> 68px @1920 */
    max-width: 17ch;                             /* 15ch re-breaks it to six
                                                    lines at 68px */
  }

  .cdx .hero__lede {
    font-size: clamp(1.06rem, 1.05vw, 1.25rem);  /* 16.96 -> 20px @1920 */
    max-width: 46ch;              /* ch scales with the font, so the line count
                                     holds while the measure grows with it */
  }

  .cdx .hero__actions .button {
    font-size: clamp(.78rem, .95vw, 1.05rem);
    min-height: 60px;
    padding: 18px 30px;
  }

  .cdx .hero__actions .call-menu > .btn {
    font-size: clamp(.95rem, 1vw, 1.15rem);
    min-height: 60px;
    padding: .95rem 1.9rem;
  }
}


/* ---- donor: sandbox/homepage-final/frozen-header.css ---- */
/* GENERATED by build-hybrid.py - the frozen navbar's own rules, copied
   VERBATIM from sandbox/front-page-claude/page.css (owner: "for the
   style just copy this"). Do not hand-edit; re-run the build.
   Its :root tokens come along so the copied rules resolve identically. */
:root {
  --navy: #00076D;
  --green: #53BA00;
  --navy-deep: #00054C;
  --navy-ink-2: #010314;
  --navy-lift: #00098F;
  --green-text: #377A00;
  --green-deep: #3B8500;
  --green-hover: #489F00;
  --green-tint: rgba(83,186,0,.10);
  --ink: #0B1020;
  --text: #1E293B;
  --text-light: #4A5568;
  --text-muted: #6B7280;
  --bg: #FFFFFF;
  --bg-light: #F7F8FA;
  --bg-cool: #F2F5FA;
  --border: #E3E8EF;
  --border-light: #F1F4F8;
  --hairline: rgba(0,7,109,.08);
  --shadow-rest: 0 2px 4px rgba(0,7,109,.04), 0 12px 32px rgba(0,7,109,.09);
  --shadow-hover: 0 4px 8px rgba(0,7,109,.05), 0 20px 52px rgba(0,7,109,.16);
  --shell: 1320px;
  --header-h: 72px;
  --rhythm: 84px;
  --rhythm-tight: 56px;
  --radius: 22px;
  --display: 'Archivo', 'Segoe UI', Arial, sans-serif;
  --serif: 'Archivo', 'Segoe UI', Arial, sans-serif;
  --sans: 'Inter', 'Segoe UI', Arial, sans-serif;
}
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 2rem; position: relative; }
.hero :focus-visible, .hp-header :focus-visible, .station-dark :focus-visible,
.midband :focus-visible, .close-cta :focus-visible, .hp-footer :focus-visible,
.sticky-call :focus-visible {
  outline-color: #fff; box-shadow: 0 0 0 6px rgba(0,5,76,.9);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--sans); font-weight: 700; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; border-radius: 999px;
  padding: .72rem 1.5rem; font-size: .95rem; min-height: 44px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-lg { padding: .9rem 1.9rem; font-size: 1.02rem; }
.btn-sm { padding: .5rem 1.1rem; font-size: .88rem; }
.btn-green { background: var(--green); color: var(--ink); }
.btn-green:hover { background: var(--green-hover); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-lift); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: var(--bg-cool); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-ghost-navy { background: transparent; color: var(--navy); border-color: rgba(0,7,109,.35); }
.btn-ghost-navy:hover { border-color: var(--navy); background: rgba(0,7,109,.05); }
@media (prefers-reduced-motion: no-preference) {
.btn:hover { transform: translateY(-1px); }
}
.hp-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.hp-header.scrolled {
  background: rgba(9,12,20,.74);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
html:not(.hp-motion) .hp-header { background: rgba(9,12,20,.94); }
.hp-header-row { display: flex; align-items: center; gap: 1.3rem; min-height: var(--header-h); }
.hp-logo {
  flex-shrink: 0; display: flex; flex-direction: column; text-decoration: none; line-height: 1.05;
}
.hp-logo b {
  font-family: var(--display); font-stretch: 112%; font-weight: 780; font-size: 1.02rem;
  color: #fff; letter-spacing: .01em;
}
.hp-logo span {
  font-size: .58rem; letter-spacing: .34em; text-transform: uppercase;
  
  color: #60D600; font-weight: 700;
}
.hp-nav { flex: 1; }
.hp-nav ul { list-style: none; display: flex; align-items: center; gap: .05rem; }
.hp-nav li { position: relative; }
.hp-nav a, .hp-nav button {
  display: inline-flex; align-items: center; gap: .3rem;
  font: inherit; font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.88);
  background: none; border: 0; cursor: pointer;
  padding: .6rem .72rem; border-radius: 8px; text-decoration: none;
}
.hp-nav > ul > li > a:hover, .hp-nav > ul > li > button:hover { color: #fff; background: rgba(255,255,255,.10); }
.hp-nav .has-menu > button::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
  opacity: .55;
}
.menu {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--border-light); border-radius: 14px;
  box-shadow: var(--shadow-hover); padding: .6rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 500;
}
.has-menu.open > .menu, .has-menu:focus-within > .menu, .has-menu:hover > .menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.menu a {
  display: block; padding: .48rem .7rem; border-radius: 8px;
  font-weight: 500; color: var(--text); font-size: .92rem;
}
.menu a small { display: block; color: var(--text-muted); font-size: .72rem; font-weight: 400; }
.menu a:hover { background: var(--green-tint); color: var(--navy); }
.menu-cols { min-width: 470px; column-count: 2; column-gap: .4rem; }
.menu-cols a { break-inside: avoid; }
.menu .menu-all { column-span: all; border-top: 1px solid var(--border-light); margin-top: .4rem; padding-top: .6rem; font-weight: 700; color: var(--navy); }
.hp-header-cta { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.hp-header-cta .btn-ghost-navy { color: #fff; border-color: rgba(255,255,255,.4); }
.hp-header-cta .btn-ghost-navy:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.call-menu { position: relative; }
.call-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 280px;
  background: #fff; border: 1px solid var(--border-light); border-radius: 14px;
  box-shadow: var(--shadow-hover); padding: .7rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 950;
}
.call-menu.open .call-menu-panel, .call-menu:focus-within .call-menu-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.call-menu--up .call-menu-panel { top: auto; bottom: calc(100% + 10px); }
.call-menu-title {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: var(--text-muted); padding: .2rem .6rem .5rem;
}
.call-menu-panel a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .55rem .6rem; min-height: 44px;
  border-radius: 8px; text-decoration: none; color: var(--text); font-size: .92rem;
}
.call-menu-panel a:hover { background: var(--green-tint); }
.call-menu-panel a b { color: var(--navy); font-variant-numeric: tabular-nums; }
.hp-mobile { display: none; margin-left: auto; }
.hp-mobile summary {
  list-style: none; cursor: pointer; display: flex; flex-direction: column;
  gap: 5px; padding: 12px; border-radius: 10px; min-width: 44px; min-height: 44px;
  justify-content: center; align-items: center;
}
.hp-mobile summary::-webkit-details-marker { display: none; }
.hp-mobile summary span { width: 22px; height: 2px; background: #fff; border-radius: 2px; }
.hp-mobile[open] summary { background: rgba(255,255,255,.12); }
.hp-mobile nav {
  position: absolute; left: 0; right: 0; top: var(--header-h);
  background: #fff; border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 40px rgba(0,7,109,.14);
  padding: .8rem 1.2rem 1.2rem; display: grid; gap: .1rem;
  max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.hp-mobile nav a {
  padding: .7rem .6rem; min-height: 44px; display: flex; align-items: center;
  text-decoration: none; color: var(--text); font-weight: 600;
  border-bottom: 1px solid var(--border-light);
}
.hp-mobile nav a.mob-book { background: var(--green); color: var(--ink); border-radius: 10px; justify-content: center; border: 0; margin-top: .6rem; }
.station > .shell { position: relative; z-index: 2; }
.sticky-actions .btn { white-space: nowrap; }
@media (max-width: 1024px) {
.hp-nav { display: none; }
.hp-header-cta .btn-ghost-navy { display: none; }
.hp-mobile { display: block; }
}
@media (max-width: 480px) {
.shell { padding: 0 1.1rem; }
.hp-header-row { gap: .55rem; }
.hp-logo b { font-size: .9rem; }
.hp-header-cta .btn-green { padding: .45rem .85rem; font-size: .84rem; }
.hero-ctas .btn { width: 100%; }
.sticky-actions .call-menu .btn { width: 100%; }
}
@media print {
.hp-header, .sticky-call, .pathway, .hero-aurora { display: none; }
}


/* ---- donor: sandbox/homepage-final/franken-header.css ---- */
/* ==========================================================================
   HYBRID HEADER — owner-picked 2026-08-12 (the Frankenstein round)
   LOOKS: sandbox/front-page-claude/ hp-header (RR-style dark glass pill),
          adapted from fixed+transparent-over-dark-hero to STICKY, ALWAYS-DARK
          because this page's hero is daylight porcelain — a transparent state
          would put white nav text on a white ground.
   CONTENT: the Meridian Command (fan-out opt-a) full real-IA dropdowns.
   SCOPING: every rule is prefixed .hp-header, and every custom property the
   copied rules consume is (re)declared ON .hp-header — the Codex base defines
   the SAME token names (--navy, --serif=Playfair…) at :root, so nothing here
   may fall through to inherited values. The one backdrop-filter surface on
   this page lives here (the Codex site-header that carried theirs is gone).
   ========================================================================== */

/* Both donor sheets scope their own box-sizing reset (.cdx * / .opt-a *), so
   this header - which belongs to neither - had none, and content-box made
   width:100% + padding overflow by 24px. Scoped reset, not a global one. */
.hp-header, .hp-header *, .hp-header *::before, .hp-header *::after { box-sizing: border-box; }

/* Both donor sheets scope their body reset too (.cdx / .opt-a), so the real
   <body> kept the UA default 8px margin - the gap above and to both sides of
   the bar. Reset it at the document level; nothing else owns this. */
html, body { margin: 0; padding: 0; }

.hp-header {
  /* frozen-build token values, localized (source: front-page-claude/page.css :root) */
  --navy:         #00076D;
  --green:        #53BA00;   /* NEVER pair with white text */
  --green-hover:  #489F00;
  --green-tint:   rgba(83,186,0,.10);
  --ink:          #0B1020;
  --text:         #1E293B;
  --text-muted:   #6B7280;
  --border:       #E3E8EF;
  --border-light: #F1F4F8;
  --shadow-hover: 0 4px 8px rgba(0,7,109,.05), 0 20px 52px rgba(0,7,109,.16);
  --header-h:     72px;
  --hsans:        'Inter', 'Segoe UI', Arial, sans-serif;

  /* the frozen navbar's .scrolled recipe VERBATIM, held as the resting state:
     the frozen page is dark so its bar can sit transparent at top; this page
     opens on the light Codex hero, so transparent-at-top = white-on-white. */
  position: sticky; top: 0; left: 0; right: 0; z-index: 900;
  /* the frozen bar's own frosted value, verbatim - owner wants it TRANSLUCENT
     like the bar he pointed at, not the opaque fallback. */
  background: rgba(9,12,20,.74);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
  font-family: var(--hsans);
}

/* the base fragment's skip link anchors to .opt-a, which no longer starts at
   the page top - its top:-200px would paint over the hero. Hide until focused;
   its own :focus { top: 0 } rule takes over on focus. */
.opt-a .skip-a:not(:focus) {
  clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden;
  white-space: nowrap; padding: 0;
}

/* owner round 4: the bar spans the FULL width - no 1320px shell, no centred
   island. Nav sits hard against the logo and the CTAs pin to the right edge. */
.hp-header .hp-header-row {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--header-h);
  width: 100%; max-width: none; margin: 0; padding: 0 1.6rem;
}
.hp-header .hp-nav { flex: 1 1 auto; min-width: 0; }
.hp-header .hp-header-cta { margin-left: auto; }
/* Nav items never wrap to a second line - a wrapped label reads as a defect
   and it was what pushed Contact under the Call-us button. */
.hp-header .hp-nav > ul > li > a, .hp-header .hp-nav > ul > li > button { white-space: nowrap; }

/* (the crowded-band taper lives at the END of this file - it overrides the
   base rules below at equal specificity, so it must come after them) */

/* the frozen two-line text lockup, VERBATIM rules, with the mark set beside it */
/* the frozen .hp-logo is flex-direction:column (it held a two-LINE text
   lockup); the mark now sits BESIDE that text, so force a row. */
.hp-header .hp-logo { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; gap: .6rem; text-decoration: none; line-height: 1.05; }
.hp-header .hp-logo img { height: 40px; width: auto; display: block; }
/* owner 2026-08-12: centre the green tagline under the clinic name. The column's
   width is set by its widest child (the name), so centring moves only the
   shorter tagline -- measured 13px left of the name's centre before this. */
.hp-header .hp-logo-text { display: flex; flex-direction: column; align-items: center; }
.hp-header .hp-logo b {
  font-family: var(--display, 'Archivo', 'Segoe UI', Arial, sans-serif);
  font-stretch: 112%; font-weight: 780; font-size: 1.02rem;
  color: #fff; letter-spacing: .01em;
}
.hp-header .hp-logo-text > span {
  font-size: .58rem; letter-spacing: .34em; text-transform: uppercase;
  /* #60D600, not --green: the ground is the dark header, so the AA direction is
     LIGHTER, not darker - 4.62:1 on #494B51 vs --green's 3.48:1 (#205). */
  color: #60D600; font-weight: 700;
  /* letter-spacing appends a trailing space AFTER the last letter, so the
     glyph box is .34em wider than the visible ink and centring would leave it
     ~1.6px light. Cancel the trailing space so the INK centres, not the box. */
  margin-right: -.34em;
}

.hp-header .hp-nav { flex: 1; }
.hp-header .hp-nav ul { list-style: none; display: flex; align-items: center; gap: .05rem; margin: 0; padding: 0; }
.hp-header .hp-nav li { position: relative; }
.hp-header .hp-nav li.wide { position: static; }
.hp-header .hp-nav a, .hp-header .hp-nav button {
  display: inline-flex; align-items: center; gap: .3rem;
  font: inherit; font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.88);
  background: none; border: 0; cursor: pointer;
  padding: .6rem .72rem; border-radius: 8px; text-decoration: none;
}
.hp-header .hp-nav > ul > li > a:hover, .hp-header .hp-nav > ul > li > button:hover { color: #fff; background: rgba(255,255,255,.10); }
.hp-header .hp-nav .has-menu > button::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
  opacity: .55;
}

.hp-header .menu {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--border-light); border-radius: 14px;
  box-shadow: var(--shadow-hover); padding: .6rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 500;
}
.hp-header .has-menu.open > .menu, .hp-header .has-menu:focus-within > .menu, .hp-header .has-menu:hover > .menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.hp-header .menu a {
  display: block; padding: .48rem .7rem; border-radius: 8px;
  font-weight: 500; color: var(--text); font-size: .92rem; text-decoration: none;
}
.hp-header .menu a small { display: block; color: var(--text-muted); font-size: .72rem; font-weight: 400; }
.hp-header .menu a:hover { background: var(--green-tint); color: var(--navy); }
.hp-header .menu-cols { min-width: 470px; column-count: 2; column-gap: .4rem; }
.hp-header .menu-cols a { break-inside: avoid; }
.hp-header .menu .menu-all { column-span: all; border-top: 1px solid var(--border-light); margin-top: .4rem; padding-top: .6rem; font-weight: 700; color: var(--navy); }

/* mega menu — NEW variant in the frozen design language (white panel, radius,
   resting shadow) sized for the full real-IA procedures content */
.hp-header .menu-mega {
  left: 50%; transform: translate(-50%, 6px);
  width: min(1180px, calc(100vw - 32px));
  padding: 1rem 1.1rem .9rem;
}
.hp-header .has-menu.open > .menu-mega, .hp-header .has-menu:focus-within > .menu-mega, .hp-header .has-menu:hover > .menu-mega {
  transform: translate(-50%, 0);
}
.hp-header .mega-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: .2rem 1.1rem;
}
.hp-header .mega-col h4 {
  font-family: var(--hsans); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--navy);
  margin: .45rem 0 .15rem; padding: 0 .7rem;
}
.hp-header .menu-mega .menu-all { border-top: 1px solid var(--border-light); margin-top: .6rem; padding-top: .6rem; display: block; }
.hp-header .menu-note {
  font-size: .72rem; color: var(--text-muted); margin: .35rem .2rem 0;
  padding: .35rem .7rem 0; border-top: 1px solid var(--border-light); max-width: 30ch;
}
.hp-header .menu-ext small { color: var(--text-muted); }

/* buttons (frozen .btn family, header-scoped) */
.hp-header .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--hsans); font-weight: 700; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; border-radius: 999px;
  padding: .5rem 1.1rem; font-size: .88rem; min-height: 44px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.hp-header .btn-green { background: var(--green); color: var(--ink); }
.hp-header .btn-green:hover { background: var(--green-hover); }
.hp-header .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.hp-header .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
/* the frozen markup's Call-us button class, verbatim rules (v2 first render
   showed the UA's white button ground leaking without them) */
.hp-header .btn-ghost-navy { background: transparent; color: var(--navy); border-color: rgba(0,7,109,.35); }
.hp-header .btn-ghost-navy:hover { border-color: var(--navy); background: rgba(0,7,109,.05); }
.hp-header .hp-header-cta .btn-ghost-navy { color: #fff; border-color: rgba(255,255,255,.4); }
.hp-header .hp-header-cta .btn-ghost-navy:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.hp-header .hp-header-cta { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

.hp-header .call-menu { position: relative; }
.hp-header .call-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 280px;
  background: #fff; border: 1px solid var(--border-light); border-radius: 14px;
  box-shadow: var(--shadow-hover); padding: .7rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 950;
}
.hp-header .call-menu.open .call-menu-panel, .hp-header .call-menu:focus-within .call-menu-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.hp-header .call-menu-title {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: var(--text-muted); padding: .2rem .6rem .5rem; margin: 0;
}
.hp-header .call-menu-panel a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .55rem .6rem; min-height: 44px;
  border-radius: 8px; text-decoration: none; color: var(--text); font-size: .92rem;
}
.hp-header .call-menu-panel a:hover { background: var(--green-tint); }
.hp-header .call-menu-panel a b { color: var(--navy); font-variant-numeric: tabular-nums; }
.hp-header .call-menu-foot {
  font-size: .72rem; color: var(--text-muted); margin: .3rem 0 0;
  padding: .45rem .6rem 0; border-top: 1px solid var(--border-light);
}

/* mobile sheet (frozen hp-mobile shell; Meridian's grouped content) */
.hp-header .hp-mobile { display: none; margin-left: auto; }
.hp-header .hp-mobile summary {
  list-style: none; cursor: pointer; display: flex; flex-direction: column;
  gap: 5px; padding: 12px; border-radius: 10px; min-width: 44px; min-height: 44px;
  justify-content: center; align-items: center;
}
.hp-header .hp-mobile summary::-webkit-details-marker { display: none; }
.hp-header .hp-mobile summary span { width: 22px; height: 2px; background: #fff; border-radius: 2px; }
.hp-header .hp-mobile[open] summary { background: rgba(255,255,255,.12); }
.hp-header .hp-mobile nav {
  position: absolute; left: 0; right: 0; top: var(--header-h);
  background: #fff; border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 40px rgba(0,7,109,.14);
  padding: .8rem 1.2rem 1.2rem; display: grid; gap: .1rem;
  max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.hp-header .hp-mobile nav h4 {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-muted); margin: .7rem 0 .1rem; padding: 0 .6rem;
}
.hp-header .hp-mobile nav a {
  padding: .7rem .6rem; min-height: 44px; display: flex; align-items: center;
  text-decoration: none; color: var(--text); font-weight: 600;
  border-bottom: 1px solid var(--border-light);
}
.hp-header .hp-mobile nav a.mob-call { justify-content: space-between; }
/* owner round 8d: the autologous descriptors ("Your own platelets") carry over
   to the mobile list. Mobile nav links are a centred flex ROW, so a <small>
   would sit beside the label instead of under it -- only the links that carry
   one become a stack. Scoped with :has() so mob-call's phone layout and
   mob-book's centred button are untouched; without :has() support the small
   simply renders inline, which degrades rather than breaks. */
.hp-header .hp-mobile nav a:has(small) { flex-direction: column; align-items: flex-start; gap: 2px; }
.hp-header .hp-mobile nav a small { color: var(--text-muted); font-size: .72rem; font-weight: 400; }
.hp-header .hp-mobile nav a.mob-call b { color: var(--navy); font-variant-numeric: tabular-nums; }
.hp-header .hp-mobile nav a.mob-book { background: var(--green); color: var(--ink); border-radius: 10px; justify-content: center; border: 0; margin-top: .6rem; }
/* The menu extends to 1300px; the two homepage layouts switch at 760px. */
.hp-header .hp-mobile nav a.mob-book--compact { display: none; }
@media (max-width: 760px) {
  .hp-header .hp-mobile nav a.mob-book--compact { display: flex; }
  .hp-header .hp-mobile nav a.mob-book--wide { display: none; }
}

/* focus ring on the dark bar: white ring + navy halo (docket #90 two-tone) */
.hp-header :focus-visible {
  outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(0,5,76,.9);
}
.hp-header .menu :focus-visible, .hp-header .call-menu-panel :focus-visible, .hp-header .hp-mobile nav :focus-visible {
  outline: 3px solid var(--navy); box-shadow: 0 0 0 2px #fff;
}

/* anchor jumps must clear the 72px sticky bar */
#physician, #treatments, #body-explorer, #clinics, #new-patients { scroll-margin-top: 88px; }

/* Codex's location panel pins itself under THEIR 96px header; this page's
   header is 72px. Same specificity as their rule, later sheet, so it wins. */
.cdx.js .location-panel { top: 72px; }

@media (max-width: 560px) {
  /* the mark alone below phone width - the wordmark would wrap */
  .hp-header .hp-logo-text { display: none; }
}
@media (max-width: 480px) {
  .hp-header .hp-header-cta .btn-green { display: none; }
  .hp-header .hp-logo img { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-header .menu, .hp-header .call-menu-panel { transition: none; }
}

/* ==========================================================================
   CROWDED-BAND TAPER — must stay LAST in this file
   MEASURED at 1440x900: option A's nine items need 962px, the frozen text
   lockup 338px, the two CTAs 212px = 1572px against a 1425px viewport. Option
   A fit nine items because its logo was a compact IMAGE; the frozen lockup is
   the wide part, so it tapers first. An earlier cut of this block sat above
   the base rules and lost the cascade at equal specificity - only its
   display:none took effect, which read as "the taper doesn't work".
   ========================================================================== */
@media (min-width: 1301px) and (max-width: 1620px) {
  .hp-header .hp-header-row { gap: .7rem; padding: 0 .9rem; }
  .hp-header .hp-logo { gap: .4rem; }
  /* the LOCKUP keeps its frozen size (1.02rem name + green .58rem tagline) -
     it is the thing that identifies the bar. The nine items give up the room
     instead; an earlier cut shrank the name to 12.8px and it read as wrong. */
  .hp-header .hp-logo img { height: 38px; }
  .hp-header .hp-nav a, .hp-header .hp-nav button { padding: .55rem .28rem; font-size: .78rem; }
  .hp-header .hp-header-cta { gap: .4rem; }
  .hp-header .btn { padding: .42rem .8rem; font-size: .78rem; min-height: 40px; }
}
/* Below 1300 the nine-item row cannot be made to fit honestly - hamburger. */
@media (max-width: 1300px) {
  .hp-header .hp-nav, .hp-header .call-menu { display: none; }
  .hp-header .hp-mobile { display: block; }
}

/* owner round 4, second half - "the nav bar should take up the whole space":
   the items SPREAD across the width between logo and CTAs rather than bunching
   left with dead space. Measured slack at 1440 was 171px before this. */
.hp-header .hp-nav > ul { justify-content: space-between; width: 100%; }
@media (min-width: 1621px) {
  /* plenty of room - a fixed comfortable gutter reads better than a huge spread */
  .hp-header .hp-nav > ul { justify-content: flex-start; gap: .2rem; width: auto; }
}

/* ==========================================================================
   OPTION A's MENU ACCENTS — carried verbatim (owner: "you didnt transition
   over any of the green highlighted words"). Re-skinning option A's menus
   into the frozen sheet kept the frozen's navy/grey and dropped these three
   green accents, which are what the panels actually look like.
   Values lifted from opt-a.html; --a-green is #53BA00, identical to --green.
   ========================================================================== */
.hp-header .mega-col h4 {
  font-family: var(--hsans); font-size: .655rem; text-transform: uppercase;
  letter-spacing: .14em; font-weight: 800; color: var(--green-text);
  padding: .5rem .6rem .25rem; margin: 0;
}
.hp-header .menu-ext { color: var(--green-text) !important; font-weight: 700 !important; }
/* owner round 8d: the external link now CLOSES a ten-item dropdown, so it takes
   the same separator a `menu-all` footer link gets. Scoped under .menu so it
   cannot affect an external link used anywhere outside a dropdown. */
.hp-header .menu .menu-ext { border-top: 1px solid var(--border-light); margin-top: .4rem; padding-top: .6rem; }
.hp-header .menu-all { color: var(--green-text) !important; font-weight: 700 !important; }
.hp-header .call-menu-title {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .15em;
  font-weight: 800; color: var(--green-text); padding: .35rem .6rem .5rem;
}


/* ---- donor: sandbox/homepage-final/meridian-a.css ---- */

/* ==========================================================================
   OPTION A — "MERIDIAN COMMAND"
   The homepage as the practice's flagship Meridian surface: cinematic photo
   arrival, an immediate per-clinic call rail, then a guided numbered descent.
   Every selector is scoped under .opt-a; every authored id ends in "-a".
   EXEMPT by contract: the locked #homepage-form block and the verbatim
   .ipc-navigator block keep their own ids (assembler dedups on assembly).
   Palette is logo-measured: navy #00076D, green #53BA00. Green never carries
   white text — dark ink (#0B1020) on green, 7.57:1.
   ========================================================================== */

.opt-a {
  /* ---- measured brand ---- */
  --a-navy:        #00076D;
  --a-navy-deep:   #00054C;
  --a-navy-lift:   #00098F;
  --a-green:       #53BA00;   /* NEVER under white text */
  --a-green-text:  #377A00;   /* green AS TEXT on light, 5.32:1 */
  --a-green-deep:  #3B8500;
  --a-green-hover: #489F00;
  --a-green-tint:  rgba(83,186,0,.10);

  /* ---- neutral darks: the owner's "dark neutral colours, brand highlights" ---- */
  --a-dark:        #080B16;
  --a-dark-2:      #0B0F1C;
  --a-dark-3:      #05070F;
  --a-scrim:       #040716;

  --a-ink:         #0B1020;
  --a-text:        #1E293B;
  --a-text-light:  #4A5568;
  --a-text-muted:  #6B7280;

  --a-bg:          #FFFFFF;
  --a-bg-light:    #F7F8FA;
  --a-bg-cool:     #F2F5FA;

  --a-border:      #E3E8EF;
  --a-border-light:#F1F4F8;
  --a-hairline:    rgba(0,7,109,.08);
  --a-hairline-lt: rgba(255,255,255,.14);

  --a-shadow-rest:  0 2px 4px rgba(0,7,109,.04), 0 12px 32px rgba(0,7,109,.09);
  --a-shadow-hover: 0 4px 8px rgba(0,7,109,.05), 0 20px 52px rgba(0,7,109,.16);
  --a-shadow-dark:  0 2px 6px rgba(0,0,0,.30), 0 22px 60px rgba(0,0,0,.42);

  --a-shell:       1320px;
  --a-header-h:    72px;
  --a-rhythm:      84px;
  --a-rhythm-tight:56px;
  --a-radius:      22px;

  --a-display: 'Archivo', 'Segoe UI', Helvetica, Arial, sans-serif;
  --a-sans:    'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;

  position: relative;
  isolation: isolate;
  display: block;
  font-family: var(--a-sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--a-text);
  background: var(--a-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* the sticky crisis bar is ~87px tall; keep scroll landings clear of it */
  scroll-padding-bottom: 100px;
}
.opt-a *, .opt-a *::before, .opt-a *::after { box-sizing: border-box; }
.opt-a p, .opt-a h1, .opt-a h2, .opt-a h3, .opt-a h4,
.opt-a ul, .opt-a ol, .opt-a li, .opt-a figure, .opt-a blockquote { margin: 0; padding: 0; }
.opt-a ul, .opt-a ol { list-style: none; }
.opt-a img { max-width: 100%; height: auto; display: block; }
.opt-a a { color: var(--a-navy); }

.opt-a .shell-a {
  max-width: var(--a-shell); margin: 0 auto; padding: 0 2rem; position: relative;
}

/* ---------- accessibility floor ---------- */
.opt-a .sr-a {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.opt-a .skip-a {
  position: absolute; top: -200px; left: 12px; z-index: 60;
  background: var(--a-navy); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 10px 10px; font-weight: 700; text-decoration: none;
}
.opt-a .skip-a:focus { top: 0; outline: 3px solid #fff; outline-offset: -6px; }
/* The header is sticky at var(--a-header-h). Without this, EVERY in-page jump —
   the skip link, the hero's primary CTA, all five station-index links — lands
   its target underneath an opaque 72px bar. */
.opt-a [id] { scroll-margin-top: calc(var(--a-header-h) + 16px); scroll-margin-bottom: 100px; }
/* the sticky crisis pill is ~87px tall: keep any scripted or anchor-driven
   landing on the callback submit above it */
.opt-a .book-a-form button[type="submit"] { scroll-margin-bottom: 100px; }
.opt-a :focus-visible {
  outline: 3px solid var(--a-green); outline-offset: 3px; border-radius: 4px;
}
.opt-a .hdr-a :focus-visible,
.opt-a .hero-a :focus-visible,
.opt-a .rail-a :focus-visible,
.opt-a .stn-a--dark :focus-visible,
.opt-a .midband-a :focus-visible,
.opt-a .close-a :focus-visible,
.opt-a .ftr-a :focus-visible,
.opt-a .crisis-a :focus-visible {
  outline-color: #fff; outline-offset: 3px;
}

/* ---------- type ---------- */
.opt-a h1, .opt-a h2, .opt-a h3, .opt-a h4 {
  font-family: var(--a-display); color: var(--a-navy);
  line-height: 1.06; font-weight: 700; font-style: normal;
}
.opt-a h1 {
  font-size: clamp(2rem, 4.2vw, 3.7rem);
  letter-spacing: -.03em; font-stretch: 112%; font-weight: 780;
}
.opt-a h2 {
  font-size: clamp(1.85rem, 2.9vw, 2.6rem);
  letter-spacing: -.024em; font-stretch: 110%; font-weight: 740;
}
.opt-a h3 { font-size: 1.28rem; letter-spacing: -.012em; font-weight: 730; font-stretch: 106%; }
.opt-a .eyebrow-a {
  font-family: var(--a-sans); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .16em; font-weight: 800; color: var(--a-green-text);
}
.opt-a .stn-a--dark .eyebrow-a,
.opt-a .hero-a .eyebrow-a,
.opt-a .midband-a .eyebrow-a,
.opt-a .close-a .eyebrow-a { color: var(--a-green); }

/* ---------- buttons ---------- */
.opt-a .btn-a {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--a-sans); font-weight: 700; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; border-radius: 999px;
  padding: .74rem 1.5rem; font-size: .95rem; min-height: 46px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.opt-a .btn-a--lg { padding: .95rem 1.95rem; font-size: 1.03rem; min-height: 54px; }
.opt-a .btn-a--sm { padding: .5rem 1.05rem; font-size: .86rem; min-height: 42px; }
.opt-a .btn-a--green { background: var(--a-green); color: var(--a-ink); box-shadow: 0 8px 24px rgba(83,186,0,.24); }
.opt-a .btn-a--green:hover { background: var(--a-green-hover); }
.opt-a .btn-a--navy { background: var(--a-navy); color: #fff; }
.opt-a .btn-a--navy:hover { background: var(--a-navy-lift); }
.opt-a .btn-a--ghost { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.42); }
.opt-a .btn-a--ghost:hover { border-color: #fff; background: rgba(255,255,255,.11); }
.opt-a .btn-a--ghost-navy { background: transparent; color: var(--a-navy); border-color: rgba(0,7,109,.34); }
.opt-a .btn-a--ghost-navy:hover { border-color: var(--a-navy); background: rgba(0,7,109,.05); }
@media (prefers-reduced-motion: no-preference) {
  .opt-a .btn-a:hover { transform: translateY(-1px); }
}

/* ==========================================================================
   HEADER — dark, flush and full-width on mobile; an inset frosted pill on
   desktop. The frost is the ONE backdrop-filter surface in this option.
   ========================================================================== */
.opt-a .hdr-a {
  position: sticky; top: 0; z-index: 40;
  padding: 0; background: transparent;
}
.opt-a .hdr-a-row {
  display: flex; align-items: center; gap: 1.1rem;
  min-height: var(--a-header-h);
  padding: .55rem 1.1rem;
  background: rgba(6,9,22,.82);
  border-bottom: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
@media (min-width: 1024px) {
  .opt-a .hdr-a { padding: 14px 20px 0; }
  .opt-a .hdr-a-row {
    max-width: var(--a-shell); margin: 0 auto;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 100px; padding: .5rem .55rem .5rem 1.25rem;
    box-shadow: 0 10px 40px rgba(0,0,0,.34);
  }
}
.opt-a .logo-a { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.opt-a .logo-a img { height: 46px; width: auto; }
@media (min-width: 1024px) { .opt-a .logo-a img { height: 58px; } }

.opt-a .nav-a-primary { display: none; margin-left: auto; }
@media (min-width: 1180px) { .opt-a .nav-a-primary { display: block; } }
/* the nav itself is the positioning context, so no panel can ever overflow the
   viewport the way a button-anchored, centre-translated panel does */
.opt-a .nav-a-primary { position: relative; }
.opt-a .nav-a-primary > ul { display: flex; align-items: center; gap: .1rem; }
.opt-a .nav-a-primary > ul > li { position: relative; }
/* the two wide panels measure against the whole nav, never against one button */
.opt-a .nav-a-primary > ul > li.has-menu-a--wide { position: static; }
.opt-a .nav-a-primary > ul > li > a,
.opt-a .nav-a-primary > ul > li > button {
  display: inline-flex; align-items: center; gap: .3rem;
  font: inherit; font-size: .845rem; font-weight: 600; letter-spacing: -.005em;
  color: rgba(255,255,255,.88); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  padding: .62rem .62rem; border-radius: 10px; min-height: 42px;
  transition: color .16s ease, background-color .16s ease;
}
.opt-a .nav-a-primary > ul > li > a:hover,
.opt-a .nav-a-primary > ul > li > button:hover { color: #fff; background: rgba(255,255,255,.09); }
.opt-a .nav-a-caret { width: 8px; height: 8px; flex-shrink: 0; opacity: .6; transition: transform .18s ease; }
.opt-a .has-menu-a:hover > button .nav-a-caret,
.opt-a .has-menu-a > button[aria-expanded="true"] .nav-a-caret { transform: rotate(180deg); }

.opt-a .menu-a {
  position: absolute; top: calc(100% + 10px); transform: translateY(-6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  background: rgba(9,12,26,.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  padding: 1rem; z-index: 45;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.opt-a .has-menu-a:hover > .menu-a,
.opt-a .has-menu-a:focus-within > .menu-a,
.opt-a .has-menu-a.open-a > .menu-a {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.opt-a .menu-a a {
  display: block; color: rgba(255,255,255,.84); text-decoration: none;
  font-size: .855rem; font-weight: 500; padding: .42rem .6rem; border-radius: 8px;
  transition: color .14s ease, background-color .14s ease;
}
.opt-a .menu-a a:hover { color: #fff; background: rgba(83,186,0,.16); }
.opt-a .menu-a a small { display: block; font-size: .68rem; color: rgba(255,255,255,.62); font-weight: 500; }
.opt-a .menu-a-all {
  margin-top: .5rem; padding-top: .7rem !important;
  border-top: 1px solid rgba(255,255,255,.14);
  color: var(--a-green) !important; font-weight: 700 !important;
}
.opt-a .menu-a--narrow { width: 288px; left: auto; right: 0; }
.opt-a .menu-a--cond { left: 0; width: min(660px, 100%); columns: 2; column-gap: 1.4rem; }
.opt-a .menu-a--cond a { break-inside: avoid; }
.opt-a .menu-a--cond .menu-a-all { column-span: all; }
.opt-a .menu-a--mega { left: 0; right: 0; }
.opt-a .mega-a-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .4rem 1.2rem;
}
.opt-a .mega-a-col h4 {
  font-family: var(--a-sans); font-size: .655rem; text-transform: uppercase;
  letter-spacing: .14em; font-weight: 800; color: var(--a-green);
  padding: .5rem .6rem .25rem; margin: 0;
}
.opt-a .menu-a-ext { color: var(--a-green) !important; font-weight: 700 !important; }
.opt-a .menu-a-note {
  margin-top: .55rem; padding: .55rem .6rem 0; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .72rem; line-height: 1.5; color: rgba(255,255,255,.66);
}

/* header call picker + book */
.opt-a .hdr-a-cta { display: none; margin-left: .4rem; gap: .5rem; }
@media (min-width: 1180px) { .opt-a .hdr-a-cta { display: flex; align-items: center; } }
.opt-a .callpick-a { position: relative; }
.opt-a .callpick-a > button {
  display: inline-flex; align-items: center; gap: .4rem; font: inherit;
  font-size: .845rem; font-weight: 700; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px; padding: .55rem 1.05rem; min-height: 42px;
  transition: background-color .16s ease, border-color .16s ease;
}
.opt-a .callpick-a > button:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.opt-a .callpick-a-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 288px;
  background: rgba(9,12,26,.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55); padding: .7rem; z-index: 45;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.opt-a .callpick-a:hover > .callpick-a-panel,
.opt-a .callpick-a:focus-within > .callpick-a-panel,
.opt-a .callpick-a.open-a > .callpick-a-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.opt-a .callpick-a-title {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 800;
  color: var(--a-green); padding: .35rem .6rem .5rem;
}
.opt-a .callpick-a-panel a {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .5rem .6rem; border-radius: 10px; text-decoration: none; min-height: 44px;
  transition: background-color .14s ease;
}
.opt-a .callpick-a-panel a:hover { background: rgba(83,186,0,.16); }
.opt-a .callpick-a-panel a span { color: rgba(255,255,255,.72); font-size: .8rem; font-weight: 600; }
.opt-a .callpick-a-panel a b { color: #fff; font-size: .92rem; font-variant-numeric: tabular-nums; }
.opt-a .callpick-a-foot {
  padding: .55rem .6rem 0; margin-top: .35rem; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .71rem; color: rgba(255,255,255,.66); line-height: 1.5;
}

/* mobile menu — <details>, works with JS off */
.opt-a .mob-a { margin-left: auto; }
@media (min-width: 1180px) { .opt-a .mob-a { display: none; } }
.opt-a .mob-a > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; font-weight: 700; font-size: .85rem;
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  padding: .55rem 1rem; min-height: 44px;
}
.opt-a .mob-a > summary::-webkit-details-marker { display: none; }
.opt-a .mob-a-bars { display: inline-grid; gap: 3px; }
.opt-a .mob-a-bars span { display: block; width: 17px; height: 2px; background: #fff; border-radius: 2px; }
.opt-a .mob-a-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(7,10,22,.985);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 1rem 1.1rem 1.3rem; max-height: 74vh; overflow-y: auto; z-index: 44;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.opt-a .mob-a-panel h4 {
  font-family: var(--a-sans); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .15em; font-weight: 800; color: var(--a-green);
  margin: 1rem 0 .3rem;
}
.opt-a .mob-a-panel h4:first-child { margin-top: 0; }
.opt-a .mob-a-panel a {
  display: block; color: rgba(255,255,255,.86); text-decoration: none;
  font-size: .92rem; font-weight: 600; padding: .55rem .2rem; min-height: 44px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.opt-a .mob-a-panel a:hover { color: var(--a-green); }
.opt-a .mob-a-panel .mob-a-book {
  margin-top: 1rem; border: 0; text-align: center; background: var(--a-green);
  color: var(--a-ink); border-radius: 999px; font-weight: 800; padding: .8rem;
}
.opt-a .mob-a-call {
  display: flex !important; align-items: center; justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.opt-a .mob-a-call b { color: #fff; }

/* ==========================================================================
   HERO — cinematic clinic photograph, left-anchored 5-stop navy scrim,
   one green aurora edge, staged entrance cascade, scroll parallax.
   ========================================================================== */
.opt-a .hero-a {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--a-dark-3);
  margin-top: calc(var(--a-header-h) * -1 - .55rem);
  padding: calc(var(--a-header-h) + 5.5rem) 0 clamp(3.2rem, 6vw, 5.4rem);
  color: #fff;
}
@media (min-width: 1024px) {
  .opt-a .hero-a { margin-top: calc(var(--a-header-h) * -1 - 14px); padding-top: calc(var(--a-header-h) + 3.2rem); }
}
.opt-a .hero-a-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.opt-a .hero-a-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 56% 42%;
  transform: scale(1.08); will-change: transform;
}
/* five-stop scrim, anchored left so the copy always sits on the deep end */
.opt-a .hero-a-scrim {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(96deg,
      rgba(4,7,22,.96) 0%,
      rgba(4,7,22,.93) 26%,
      rgba(5,9,30,.78) 50%,
      rgba(6,10,34,.44) 74%,
      rgba(8,12,38,.14) 100%),
    linear-gradient(180deg, rgba(4,7,22,.72) 0%, rgba(4,7,22,0) 26%, rgba(4,7,22,0) 62%, rgba(6,9,20,.92) 100%);
}
/* the single green aurora edge */
.opt-a .hero-a-aurora {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at -4% 74%, rgba(83,186,0,.20), transparent 68%),
    radial-gradient(26% 30% at 88% 4%, rgba(0,9,143,.30), transparent 70%);
}
.opt-a .hero-a-aurora::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--a-green), rgba(83,186,0,.35) 34%, rgba(83,186,0,0) 78%);
}
.opt-a .hero-a-inner { max-width: 800px; }
.opt-a .hero-a-eyebrow {
  display: flex; flex-wrap: wrap; gap: .45rem .85rem; margin-bottom: 1.15rem;
  font-size: .69rem; text-transform: uppercase; letter-spacing: .17em; font-weight: 800;
  color: rgba(255,255,255,.86);
}
.opt-a .hero-a-eyebrow span { display: inline-flex; align-items: center; gap: .5rem; }
.opt-a .hero-a-eyebrow span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--a-green);
}
.opt-a .hero-a h1 { color: #fff; text-wrap: balance; margin-bottom: 1rem; line-height: 1.1; }
.opt-a .hero-a h1 em { font-style: normal; position: relative; white-space: nowrap; }
.opt-a .hero-a h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .085em;
  background: linear-gradient(90deg, var(--a-green), rgba(83,186,0,.22));
  border-radius: 3px;
}
.opt-a .hero-a-sub {
  color: rgba(255,255,255,.84); font-size: 1.04rem; max-width: 60ch; margin-bottom: 1.7rem;
}
.opt-a .hero-a-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ==========================================================================
   CONVERSION RAIL — the money band, immediately under the hero.
   Five per-clinic tap-to-call chips, each with its own number and hours.
   ========================================================================== */
.opt-a .rail-a {
  position: relative; z-index: 2;
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(83,186,0,.09), transparent 62%),
    linear-gradient(180deg, #070A14 0%, #0A0E1B 62%, #0C111F 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: clamp(1.6rem, 3vw, 2.3rem) 0 clamp(1.7rem, 3vw, 2.4rem);
  color: #fff;
}
.opt-a .rail-a-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .6rem 1.4rem; margin-bottom: 1.05rem;
}
.opt-a .rail-a-status {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .84rem; font-weight: 700; color: #fff;
}
.opt-a .pulse-a {
  width: 9px; height: 9px; border-radius: 50%; background: var(--a-green);
  box-shadow: 0 0 0 0 rgba(83,186,0,.55); flex-shrink: 0;
}
.opt-a .rail-a-status--mb { margin-bottom: .8rem; }
.opt-a .rail-a-note { font-size: .84rem; color: rgba(255,255,255,.72); }
.opt-a .rail-a-note b { color: var(--a-green); font-weight: 700; }
.opt-a .rail-a-chips {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.opt-a .chip-a {
  display: grid; gap: .1rem; align-content: center;
  min-height: 88px; padding: .8rem .95rem; text-decoration: none;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.opt-a .chip-a:hover { background: rgba(255,255,255,.12); border-color: rgba(83,186,0,.65); }
@media (prefers-reduced-motion: no-preference) { .opt-a .chip-a:hover { transform: translateY(-2px); } }
.opt-a .chip-a-county {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 800;
  color: rgba(255,255,255,.64);
}
.opt-a .chip-a-city { font-size: .86rem; font-weight: 700; color: rgba(255,255,255,.9); }
.opt-a .chip-a-num {
  font-family: var(--a-display); font-size: 1.24rem; font-weight: 760; font-stretch: 106%;
  color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.015em; line-height: 1.2;
}
.opt-a .chip-a-hours { font-size: .71rem; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   METRICS + STATION INDEX — the light band that breaks the dark run
   ========================================================================== */
.opt-a .metrics-a {
  background: linear-gradient(180deg, #EDF0F5 0%, #F8F9FB 34%, #FFFFFF 66%, #EEF1F6 100%);
  padding: clamp(2rem, 3.6vw, 3rem) 0 clamp(2.2rem, 3.6vw, 3rem);
}
.opt-a .metrics-a-grid {
  display: grid; gap: 1.2rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
/* NO accent edge here: the single-accent-edge treatment is scoped sitewide to
   the CALLOUT (.callout-a). The uppercase green eyebrow plus the display
   numeral carry the tile. */
.opt-a .metric-a { display: grid; gap: .18rem; }
.opt-a .metric-a b {
  font-family: var(--a-display); font-size: clamp(2.1rem, 3.6vw, 2.9rem); font-weight: 800;
  font-stretch: 112%; letter-spacing: -.035em; line-height: 1; color: var(--a-navy);
  font-variant-numeric: tabular-nums;
}
.opt-a .metric-a span {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 800;
  color: var(--a-green-text);
}
.opt-a .metric-a small { font-size: .84rem; color: var(--a-text-light); line-height: 1.45; }
.opt-a .index-a {
  margin-top: clamp(1.6rem, 3vw, 2.2rem); padding-top: 1.3rem;
  border-top: 1px solid var(--a-border);
  display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.opt-a .index-a a {
  display: flex; align-items: baseline; gap: .65rem; text-decoration: none;
  padding: .55rem .2rem; min-height: 44px; border-bottom: 1px solid transparent;
  transition: border-color .16s ease, color .16s ease;
}
.opt-a .index-a a:hover { border-bottom-color: var(--a-green); }
.opt-a .index-a b {
  font-family: var(--a-display); font-size: .82rem; font-weight: 800;
  color: var(--a-green-text); font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.opt-a .index-a span { font-size: .93rem; font-weight: 650; color: var(--a-navy); }

/* ==========================================================================
   STATION CHROME — grounds, cross-fade seams, heads, the green signal thread
   ========================================================================== */
.opt-a .stn-a { position: relative; padding: var(--a-rhythm) 0; }
.opt-a .stn-a--light {
  background-image:
    radial-gradient(50% 42% at 6% 0%, rgba(0,7,109,.04), transparent 70%),
    radial-gradient(40% 40% at 100% 100%, rgba(83,186,0,.05), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 74%, #EEF1F6 100%);
}
.opt-a .stn-a--tint {
  background: linear-gradient(180deg, #EDEFF4 0%, #F2F4F8 40%, #F7F8FA 84%, #EBEEF3 100%);
}
.opt-a .stn-a--dark {
  color: #fff;
  background:
    radial-gradient(44% 50% at 100% 0%, rgba(0,7,109,.26), transparent 62%),
    radial-gradient(32% 44% at 0% 100%, rgba(83,186,0,.08), transparent 66%),
    linear-gradient(180deg, var(--a-dark-2) 0%, var(--a-dark) 56%, var(--a-dark-3) 100%);
}
.opt-a .stn-a--dark h2, .opt-a .stn-a--dark h3 { color: #fff; }
/* cross-fade seams — no stark boundary between grounds */
/* Seams are long and eased. Each one STARTS at the exact colour the previous
   band exits on (#EEF1F6 leaving a light band, #06080F leaving a dark one), so
   there is no step at the top edge — the owner's "stark and too abrupt" note. */
/* The wash paints ABOVE the band's own background and BELOW the content, so any
   text it reaches is composited on the cross-fade rather than on the band token
   the colour was chosen against. It therefore has to be fully transparent before
   the first line of text: every seamed band caps its ::before at that band's OWN
   top padding, so no eyebrow, station numeral or heading is ever painted on it.
   The gradient stops are percentages, so the ease survives the shorter run. */
.opt-a .seam-a::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  /* -8px so the wash finishes STRICTLY above the first line, not flush with it:
     at flush the boundary is a sub-pixel coin-toss on fractional clamp values. */
  height: calc(var(--a-seam-h, var(--a-rhythm)) - 8px);
  pointer-events: none; z-index: 0;
}
.opt-a .stn-a.seam-a     { --a-seam-h: var(--a-rhythm); }
.opt-a .midband-a.seam-a { --a-seam-h: clamp(2.6rem, 5vw, 4rem); }
.opt-a .close-a.seam-a   { --a-seam-h: clamp(3.4rem, 6vw, 5.4rem); }
.opt-a .seam-a--to-dark::before {
  background: linear-gradient(180deg,
    rgba(238,241,246,1) 0%, rgba(230,234,242,.94) 12%, rgba(196,204,220,.80) 25%,
    rgba(140,151,177,.58) 40%, rgba(84,94,120,.36) 55%, rgba(44,52,74,.19) 70%,
    rgba(20,26,44,.07) 85%, rgba(11,15,28,0) 100%);
}
.opt-a .seam-a--to-light::before {
  background: linear-gradient(180deg,
    rgba(6,8,15,1) 0%, rgba(9,12,22,.94) 12%, rgba(28,34,52,.79) 25%,
    rgba(74,84,110,.57) 40%, rgba(132,142,166,.35) 55%, rgba(190,198,214,.18) 70%,
    rgba(228,233,241,.06) 85%, rgba(255,255,255,0) 100%);
}
/* no height override: --soft keeps the shared band-padding cap above */
.opt-a .seam-a--soft::before {
  background: linear-gradient(180deg, rgba(235,238,243,1) 0%, rgba(243,245,249,.6) 42%, rgba(255,255,255,0) 100%);
}
.opt-a .stn-a > .shell-a { position: relative; z-index: 1; }

.opt-a .stn-a-head { margin-bottom: clamp(2rem, 3.6vw, 3rem); }
.opt-a .stn-a-head--center { text-align: center; max-width: 780px; margin-inline: auto; }
.opt-a .stn-a-no {
  font-family: var(--a-display); font-size: .82rem; font-weight: 800; letter-spacing: .3em;
  color: var(--a-green-text); font-variant-numeric: tabular-nums; margin-bottom: .55rem;
}
.opt-a .stn-a--dark .stn-a-no { color: var(--a-green); }
.opt-a .stn-a-rule {
  height: 2px; width: 72px; margin-top: 1.1rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--a-green), rgba(83,186,0,0));
}
.opt-a .stn-a-head--center .stn-a-rule { margin-inline: auto; background: linear-gradient(90deg, rgba(83,186,0,0), var(--a-green), rgba(83,186,0,0)); width: 120px; }
.opt-a .stn-a-intro { margin-top: 1.05rem; color: var(--a-text-light); font-size: 1.02rem; max-width: 74ch; }
.opt-a .stn-a--dark .stn-a-intro { color: rgba(255,255,255,.76); }
.opt-a .stn-a-head--center .stn-a-intro { margin-inline: auto; }

/* the green signal thread that stitches the numbered descent together */
.opt-a .thread-a {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 62px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(83,186,0,0), var(--a-green));
}

/* ---------- the one sanctioned accent edge: the callout ---------- */
.opt-a .callout-a {
  border-left: 4px solid var(--a-green);
  background: linear-gradient(90deg, var(--a-green-tint), rgba(83,186,0,.02));
  border-radius: 0 var(--a-radius) var(--a-radius) 0;
  padding: 1.5rem 1.75rem;
}
.opt-a .callout-a p + p { margin-top: .6rem; }
.opt-a .callout-a-label {
  font-size: .67rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 800;
  color: var(--a-green-text); margin-bottom: .45rem;
}
.opt-a .callout-a h3 { margin-bottom: .5rem; }
.opt-a .callout-a p { color: var(--a-text-light); }

/* ==========================================================================
   01 — THE DOSSIER. Portrait large and CENTRED, credentials symmetric.
   ========================================================================== */
.opt-a .dossier-a-portrait {
  position: relative; isolation: isolate;
  width: min(360px, 78vw); margin: 0 auto clamp(1.6rem, 3vw, 2.2rem);
}
.opt-a .dossier-a-portrait img {
  width: 100%; border-radius: 26px; display: block;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--a-shadow-dark);
}
.opt-a .dossier-a-portrait::before {
  content: ""; position: absolute; inset: -18% -22% -10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,9,143,.55), rgba(83,186,0,.10) 62%, transparent 80%);
  filter: blur(6px);
}
.opt-a .dossier-a-portrait::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -10px; height: 2px;
  background: linear-gradient(90deg, rgba(83,186,0,0), var(--a-green), rgba(83,186,0,0));
}
.opt-a .dossier-a-id { text-align: center; margin-bottom: clamp(2rem, 3.6vw, 2.8rem); }
.opt-a .dossier-a-name {
  font-family: var(--a-display); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 780;
  font-stretch: 110%; letter-spacing: -.028em; color: #fff; line-height: 1.05;
}
.opt-a .dossier-a-name .cred-a {
  font-size: .48em; font-weight: 800; color: var(--a-green);
  letter-spacing: .06em; vertical-align: .3em; margin-left: .18em;
}
.opt-a .dossier-a-role { color: rgba(255,255,255,.78); font-weight: 600; margin-top: .35rem; }
.opt-a .dossier-a-boards {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .4rem .55rem;
  margin-top: .95rem;
}
.opt-a .dossier-a-boards li {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.9); padding: .35rem .8rem;
  border: 1px solid rgba(83,186,0,.5); border-radius: 999px;
  background: rgba(83,186,0,.10);
}
.opt-a .dossier-a-prose {
  display: grid; gap: 1.2rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  max-width: 1080px; margin: 0 auto clamp(2.2rem, 4vw, 3rem);
}
.opt-a .dossier-a-prose p { color: rgba(255,255,255,.8); font-size: 1.01rem; }
.opt-a .dossier-a-facts {
  display: grid; gap: 0 2.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  border-top: 1px solid rgba(255,255,255,.14);
}
.opt-a .dossier-a-facts li {
  display: flex; gap: 1rem; align-items: baseline; padding: .85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.opt-a .dossier-a-facts span {
  font-size: .655rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 800;
  color: var(--a-green); min-width: 138px; flex-shrink: 0;
}
.opt-a .dossier-a-facts b { color: #fff; font-weight: 600; font-size: .94rem; line-height: 1.5; }
.opt-a .dossier-a-ctas {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
  margin-top: clamp(2rem, 3.6vw, 2.8rem);
}

/* ==========================================================================
   02 — THE NAVIGATOR framed as an instrument
   ========================================================================== */
.opt-a .navframe-a {
  border: 1px solid rgba(255,255,255,.13); border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  background: var(--a-dark-3);
}
.opt-a .navframe-a-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
  padding: .75rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
}
.opt-a .navframe-a-bar p {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 800;
  color: rgba(255,255,255,.6);
}
.opt-a .navframe-a-bar p b { color: var(--a-green); }
/* the navigator ships its own scoped stylesheet; only the display face and the
   band padding are re-pointed at this option's grotesk. Its bytes are untouched. */
.opt-a .ipc-navigator { --serif: var(--a-display); }
.opt-a .ipc-navigator .navigator__intro h2.nav-display {
  max-width: 620px; margin: 0; color: #fff;
  font-family: var(--a-display); font-stretch: 112%;
  font-size: clamp(2.9rem, 4.4vw, 4.4rem);
  font-weight: 780; letter-spacing: -.03em; line-height: .93; text-wrap: balance;
}
@media (max-width: 760px) {
  .opt-a .ipc-navigator .navigator__intro h2.nav-display { font-size: clamp(2.6rem, 11vw, 3.6rem); }
}
.opt-a .ipc-navigator-band { padding: 0; }

/* ==========================================================================
   03 — TREATMENT PATHWAYS as rich cards with a two-layer RESTING shadow
   ========================================================================== */
/* explicit column counts rather than auto-fit: eight cards divide evenly into
   1, 2 and 4 columns, so no breakpoint leaves a dead cell in the last row */
.opt-a .treat-a-grid {
  display: grid; gap: 24px; grid-template-columns: minmax(0,1fr);
  margin-top: clamp(2rem, 3.4vw, 2.6rem);
}
@media (min-width: 620px)  { .opt-a .treat-a-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1180px) { .opt-a .treat-a-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1180px) {
  .opt-a .treat-a-grid .card-a { padding: 24px 24px 22px; }
  .opt-a .treat-a-grid .card-a-name { font-size: 1.12rem; }
}
.opt-a .card-a {
  position: relative; display: flex; flex-direction: column; gap: .55rem;
  background: var(--a-bg); border: 1px solid var(--a-border);
  border-radius: var(--a-radius); padding: 28px 30px 26px;
  box-shadow: var(--a-shadow-rest); text-decoration: none;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.opt-a .card-a:hover { box-shadow: var(--a-shadow-hover); border-color: rgba(83,186,0,.55); }
@media (prefers-reduced-motion: no-preference) { .opt-a .card-a:hover { transform: translateY(-3px); } }
.opt-a .card-a-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.opt-a .card-a-tile {
  width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--a-navy-lift), var(--a-navy-deep));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 18px rgba(0,7,109,.28);
}
.opt-a .card-a-tile svg { width: 24px; height: 24px; stroke: var(--a-green); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The sequence numeral has to be readable. At --a-border it composited to
   1.23:1 on white, which reads as a rendering artifact rather than a design
   element. --a-text-muted is 4.83:1 on white. */
.opt-a .card-a-idx {
  font-family: var(--a-display); font-size: 1.35rem; font-weight: 800; font-stretch: 116%;
  letter-spacing: -.03em; color: var(--a-text-muted); font-variant-numeric: tabular-nums;
  line-height: 1; transition: color .22s ease;
}
.opt-a .card-a:hover .card-a-idx { color: var(--a-green); }
.opt-a .card-a-cat {
  font-size: .655rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 800;
  color: var(--a-green-text); margin-top: .35rem;
}
.opt-a .card-a-name {
  font-family: var(--a-display); font-size: 1.2rem; font-weight: 740; font-stretch: 106%;
  letter-spacing: -.015em; color: var(--a-navy); line-height: 1.2;
}
.opt-a .card-a-desc { color: var(--a-text-light); font-size: .95rem; flex: 1 1 auto; }
.opt-a .card-a-more {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem;
  font-size: .82rem; font-weight: 800; letter-spacing: .02em; color: var(--a-navy);
  border-top: 1px solid var(--a-border-light); padding-top: .75rem;
  transition: color .18s ease;
}
.opt-a .card-a:hover .card-a-more { color: var(--a-green-text); }
.opt-a .treat-a-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--a-border);
}
.opt-a .treat-a-foot p { color: var(--a-text-light); font-size: .95rem; max-width: 62ch; }
.opt-a .treat-a-foot a.inline-a { color: var(--a-navy); font-weight: 700; }

/* ==========================================================================
   MIDBAND — cross-practice
   ========================================================================== */
.opt-a .midband-a {
  position: relative; color: #fff;
  background:
    radial-gradient(50% 100% at 100% 0%, rgba(0,9,143,.30), transparent 66%),
    linear-gradient(180deg, #0A0E1B, #070A14);
  padding: clamp(2.6rem, 5vw, 4rem) 0;
}
.opt-a .midband-a-inner {
  display: grid; gap: 2rem 3.4rem; align-items: center;
  grid-template-columns: minmax(0,1fr);
}
@media (min-width: 900px) { .opt-a .midband-a-inner { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); } }
.opt-a .midband-a h2 { color: #fff; margin-bottom: .7rem; }
.opt-a .midband-a p { color: rgba(255,255,255,.78); max-width: 52ch; }
.opt-a .midband-a-rail .rail-a-chips { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ==========================================================================
   04 — CLINIC PHOTO CARDS
   ========================================================================== */
.opt-a .loc-a-grid {
  display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.opt-a .loc-a-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--a-bg); border: 1px solid var(--a-border);
  border-radius: var(--a-radius); box-shadow: var(--a-shadow-rest);
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.opt-a .loc-a-card:hover { box-shadow: var(--a-shadow-hover); border-color: rgba(0,7,109,.28); }
@media (prefers-reduced-motion: no-preference) { .opt-a .loc-a-card:hover { transform: translateY(-3px); } }
.opt-a .loc-a-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--a-bg-cool); }
.opt-a .loc-a-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-focus, center);
  transition: transform .4s ease;
}
@media (prefers-reduced-motion: no-preference) { .opt-a .loc-a-card:hover .loc-a-photo img { transform: scale(1.04); } }
.opt-a .loc-a--dalton    { --photo-focus: center 58%; }
.opt-a .loc-a--ringgold  { --photo-focus: center 38%; }
.opt-a .loc-a--cleveland { --photo-focus: center 72%; }
.opt-a .loc-a--farragut  { --photo-focus: center 66%; }
.opt-a .loc-a--oakridge  { --photo-focus: center 34%; }
.opt-a .loc-a-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: .35rem; flex: 1 1 auto; }
.opt-a .loc-a-county {
  font-size: .645rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 800;
  color: var(--a-green-text);
}
.opt-a .loc-a-city {
  font-family: var(--a-display); font-size: 1.32rem; font-weight: 760; font-stretch: 108%;
  letter-spacing: -.02em; color: var(--a-navy);
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
}
.opt-a .loc-a-flag {
  font-family: var(--a-sans); font-size: .6rem; text-transform: uppercase; letter-spacing: .13em;
  font-weight: 800; color: var(--a-ink); background: var(--a-green);
  border-radius: 999px; padding: .2rem .6rem;
}
.opt-a .loc-a-addr { color: var(--a-text-light); font-size: .93rem; line-height: 1.55; }
.opt-a .loc-a-hours {
  display: flex; align-items: baseline; gap: .5rem; font-size: .85rem;
  color: var(--a-text); font-weight: 600; margin-top: .2rem;
}
.opt-a .loc-a-hours .dot-a {
  width: 7px; height: 7px; border-radius: 50%; background: var(--a-green); flex-shrink: 0;
  transform: translateY(-1px);
}
.opt-a .loc-a-actions {
  margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem 1rem; border-top: 1px solid var(--a-border-light);
}
.opt-a .loc-a-call {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
  background: var(--a-green); color: var(--a-ink); font-weight: 800; font-size: .9rem;
  border-radius: 999px; padding: .55rem 1.15rem; text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color .18s ease;
}
.opt-a .loc-a-call:hover { background: var(--a-green-hover); }
.opt-a .loc-a-link {
  font-size: .85rem; font-weight: 700; color: var(--a-navy); text-decoration: none;
  border-bottom: 1px solid rgba(0,7,109,.25); padding-bottom: 1px;
  transition: border-color .18s ease;
}
.opt-a .loc-a-link:hover { border-bottom-color: var(--a-navy); }
.opt-a .loc-a-hubs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 24px; }
.opt-a .loc-a-hub {
  display: grid; gap: .3rem; text-decoration: none; padding: 22px 24px;
  background: linear-gradient(135deg, var(--a-navy), var(--a-navy-deep));
  border-radius: var(--a-radius); box-shadow: var(--a-shadow-rest);
  transition: box-shadow .22s ease, transform .22s ease;
}
.opt-a .loc-a-hub:hover { box-shadow: var(--a-shadow-hover); }
@media (prefers-reduced-motion: no-preference) { .opt-a .loc-a-hub:hover { transform: translateY(-3px); } }
.opt-a .loc-a-hub span {
  font-size: .645rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 800;
  color: var(--a-green);
}
.opt-a .loc-a-hub b { color: #fff; font-family: var(--a-display); font-size: 1.08rem; font-weight: 720; }

/* ==========================================================================
   05 — BOOK. The locked form is wrapped, never edited.
   ========================================================================== */
.opt-a .book-a-split { display: grid; gap: 2.4rem 3.4rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 980px) { .opt-a .book-a-split { grid-template-columns: minmax(0,1fr) minmax(0,440px); } }
.opt-a .book-a-info h3 { margin-bottom: .6rem; }
.opt-a .book-a-info > p:first-of-type { color: var(--a-text-light); margin-bottom: 1.4rem; max-width: 62ch; }
.opt-a .book-a-points { display: grid; gap: .5rem; }
.opt-a .book-a-points li {
  display: flex; gap: .65rem; align-items: baseline; color: var(--a-text); font-size: .96rem;
}
.opt-a .book-a-points li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--a-green);
  flex-shrink: 0; transform: translateY(-2px);
}
.opt-a .book-a-ins-title { margin: 2rem 0 .9rem; }
.opt-a .ins-a-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt-a .ins-a-chips li {
  font-size: .82rem; font-weight: 650; color: var(--a-navy);
  background: var(--a-bg); border: 1px solid var(--a-border);
  border-radius: 999px; padding: .38rem .85rem;
}
.opt-a .ins-a-foot { margin-top: 1rem; color: var(--a-text-light); font-size: .9rem; }
.opt-a .ins-a-foot a { color: var(--a-navy); font-weight: 700; }
.opt-a .book-a-form {
  background: var(--a-bg); border: 1px solid var(--a-hairline); border-radius: var(--a-radius);
  box-shadow: var(--a-shadow-rest); padding: 30px 32px; align-self: start;
}
.opt-a .book-a-form-head { margin-bottom: 1.1rem; }
.opt-a .book-a-form-head h3 { margin-bottom: .3rem; }
.opt-a .book-a-form-head p { font-size: .9rem; color: var(--a-text-light); }
.opt-a .book-a-form form { display: grid; gap: 1rem; }
.opt-a .book-a-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.opt-a .book-a-form .form-group { display: grid; gap: .3rem; }
.opt-a .book-a-form label { font-size: .8rem; font-weight: 700; color: var(--a-navy); }
.opt-a .book-a-form input, .opt-a .book-a-form select {
  font: inherit; font-size: .95rem; color: var(--a-text);
  border: 1.5px solid #B8C4D6; border-radius: 10px; padding: .65rem .8rem;
  background: var(--a-bg); min-height: 46px; width: 100%;
}
.opt-a .book-a-form input:focus-visible, .opt-a .book-a-form select:focus-visible {
  border-color: var(--a-navy); outline: 3px solid var(--a-navy); outline-offset: 2px;
}
.opt-a .book-a-form button[type="submit"] {
  font: inherit; font-weight: 800; cursor: pointer; border: 0;
  background: var(--a-green); color: var(--a-ink); border-radius: 999px;
  padding: .9rem 1.5rem; min-height: 50px;
  transition: background-color .18s ease;
}
.opt-a .book-a-form button[type="submit"]:hover { background: var(--a-green-hover); }
.opt-a .book-a-form .text-xs { font-size: .78rem; color: var(--a-text-muted); line-height: 1.55; }

/* ==========================================================================
   CLOSE + FOOTER
   ========================================================================== */
.opt-a .close-a {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  padding: clamp(3.4rem, 6vw, 5.4rem) 0;
}
.opt-a .close-a-media { position: absolute; inset: 0; z-index: -2; }
.opt-a .close-a-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 68%; }
.opt-a .close-a-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(4,7,22,.96) 0%, rgba(4,7,22,.90) 34%, rgba(5,9,30,.72) 62%, rgba(6,10,34,.46) 100%),
    linear-gradient(180deg, rgba(5,7,15,.9), rgba(5,7,15,.35) 40%, rgba(5,7,15,.9));
}
.opt-a .close-a h2 { color: #fff; margin-bottom: .8rem; max-width: 20ch; }
.opt-a .close-a .eyebrow-a { margin-bottom: .6rem; }
.opt-a .close-a-lede { color: rgba(255,255,255,.84); max-width: 60ch; margin-bottom: 1.6rem; }

.opt-a .ftr-a {
  background: linear-gradient(180deg, var(--a-dark-3), #03050C);
  color: rgba(255,255,255,.72);
  padding: clamp(2.6rem, 5vw, 3.8rem) 0 clamp(2rem, 3vw, 2.6rem);
  border-top: 1px solid rgba(255,255,255,.08);
}
.opt-a .ftr-a-grid {
  display: grid; gap: 2rem 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.opt-a .ftr-a-brand img { height: 68px; width: auto; margin-bottom: 1rem; }
.opt-a .ftr-a-tag { font-size: .9rem; line-height: 1.65; max-width: 34ch; }
.opt-a .ftr-a-social {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  color: rgba(255,255,255,.8); text-decoration: none; font-size: .88rem; font-weight: 650;
  min-height: 44px;
}
.opt-a .ftr-a-social:hover { color: var(--a-green); }
.opt-a .ftr-a h3 {
  font-family: var(--a-sans); font-size: .655rem; text-transform: uppercase;
  letter-spacing: .16em; font-weight: 800; color: var(--a-green); margin-bottom: .75rem;
}
.opt-a .ftr-a nav a, .opt-a .ftr-a-contact a {
  display: block; color: rgba(255,255,255,.72); text-decoration: none;
  font-size: .89rem; padding: .3rem 0; min-height: 30px;
  transition: color .16s ease;
}
.opt-a .ftr-a nav a:hover, .opt-a .ftr-a-contact a:hover { color: #fff; }
.opt-a .ftr-a-contact p { font-size: .89rem; line-height: 1.7; margin-bottom: .8rem; }
.opt-a .ftr-a-bottom {
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  font-size: .82rem; color: rgba(255,255,255,.56);
}
.opt-a .ftr-a-bottom a { color: rgba(255,255,255,.72); }
.opt-a .ftr-a-disclaimer {
  margin-top: 1.4rem; font-size: .78rem; line-height: 1.65; color: rgba(255,255,255,.62);
  max-width: 96ch;
}
.opt-a .ftr-a-disclaimer strong { color: rgba(255,255,255,.7); }

/* ==========================================================================
   BOTTOM CRISIS BAR — sticky pill, drop-UP clinic picker, works with JS off
   ========================================================================== */
.opt-a .crisis-a {
  position: sticky; bottom: 0; z-index: 50;
  padding: 0 10px 10px; pointer-events: none;
}
.opt-a .crisis-a-pill {
  pointer-events: auto;
  max-width: 720px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .6rem .6rem .6rem 1rem;
  background: linear-gradient(135deg, rgba(9,13,30,.96), rgba(4,7,20,.96));
  border: 1px solid rgba(255,255,255,.18); border-radius: 100px;
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
}
.opt-a .crisis-a-msg {
  display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; min-width: 0;
  font-size: .84rem; color: rgba(255,255,255,.74); line-height: 1.3;
}
.opt-a .crisis-a-msg strong { color: #fff; font-weight: 800; }
.opt-a .crisis-a-drop { position: relative; flex-shrink: 0; }
.opt-a .crisis-a-drop > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--a-green); color: var(--a-ink);
  font-weight: 800; font-size: .87rem; border-radius: 100px;
  padding: .55rem 1.1rem; min-height: 44px; white-space: nowrap;
}
.opt-a .crisis-a-drop > summary::-webkit-details-marker { display: none; }
.opt-a .crisis-a-drop > summary:hover { background: var(--a-green-hover); }
.opt-a .crisis-a-drop svg { width: 10px; height: 10px; transition: transform .18s ease; }
.opt-a .crisis-a-drop[open] > summary svg { transform: rotate(180deg); }
.opt-a .crisis-a-panel {
  position: absolute; bottom: calc(100% + 12px); right: 0;
  width: min(300px, calc(100vw - 32px));
  background: rgba(9,12,26,.98);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.62); padding: .7rem;
}
.opt-a .crisis-a-panel-title {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 800;
  color: var(--a-green); padding: .3rem .6rem .5rem;
}
.opt-a .crisis-a-panel a {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .5rem .6rem; border-radius: 10px; text-decoration: none; min-height: 44px;
  transition: background-color .14s ease;
}
.opt-a .crisis-a-panel a:hover { background: rgba(83,186,0,.16); }
.opt-a .crisis-a-panel a span { color: rgba(255,255,255,.74); font-size: .8rem; font-weight: 600; }
.opt-a .crisis-a-panel a b { color: #fff; font-size: .9rem; font-variant-numeric: tabular-nums; }
.opt-a .crisis-a-panel-foot {
  padding: .55rem .6rem 0; margin-top: .35rem; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .71rem; color: rgba(255,255,255,.68); line-height: 1.5;
}
.opt-a .crisis-a-x {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.8); font-size: 1rem; line-height: 1;
  display: grid; place-items: center;
  transition: background-color .16s ease, color .16s ease;
}
.opt-a .crisis-a-x:hover { background: rgba(255,255,255,.18); color: #fff; }
.opt-a .crisis-a[hidden] { display: none; }
/* Reserve the sticky pill's height so the LAST scroll position never leaves a
   control — most importantly the callback form's submit — underneath it. */
.opt-a .main-a { padding-bottom: 100px; }
@media (max-width: 560px) {
  .opt-a .crisis-a-pill { border-radius: 22px; padding: .65rem .7rem; gap: .5rem; }
  .opt-a .crisis-a-msg { flex: 1 1 100%; font-size: .8rem; order: 1; }
  .opt-a .crisis-a-drop { flex: 1 1 auto; order: 2; }
  .opt-a .crisis-a-drop > summary { width: 100%; }
  .opt-a .crisis-a-panel { left: 0; right: 0; width: auto; }
  .opt-a .crisis-a-x { order: 3; }
}

/* ==========================================================================
   MOTION — every animation is gated; nothing depends on JS
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .opt-a .pulse-a { animation: opt-a-pulse 2.4s ease-out infinite; }
  @keyframes opt-a-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(83,186,0,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(83,186,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(83,186,0,0); }
  }
  /* staged hero entrance — time-based, so it completes with or without JS */
  .opt-a .rise-a { animation: opt-a-rise .78s cubic-bezier(.22,.61,.36,1) both; }
  .opt-a .d1-a { animation-delay: .06s; }
  .opt-a .d2-a { animation-delay: .16s; }
  .opt-a .d3-a { animation-delay: .26s; }
  .opt-a .d4-a { animation-delay: .36s; }
  .opt-a .d5-a { animation-delay: .46s; }
  @keyframes opt-a-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }
  /* scroll parallax + section reveals, CSS-only, and only where supported */
  @supports (animation-timeline: view()) {
    .opt-a .hero-a-media img {
      animation: opt-a-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes opt-a-parallax {
      from { transform: translate3d(0, -4%, 0) scale(1.14); }
      to   { transform: translate3d(0, 5%, 0) scale(1.14); }
    }
    /* NOTE: the scroll reveal moves only TRANSFORM, never opacity. A view()
       timeline sits at range-start for anything that has not been scrolled
       through, so an opacity keyframe renders the whole page invisible in a
       full-page capture, a print, or any non-scrolled render. Every word stays
       painted at every point on this timeline. */
    .opt-a .reveal-a {
      animation: opt-a-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes opt-a-reveal {
      from { transform: translateY(20px); }
      to   { transform: none; }
    }
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .opt-a .mega-a-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .opt-a { font-size: 16px; }
  .opt-a .shell-a { padding: 0 1.15rem; }
  .opt-a .stn-a { padding: var(--a-rhythm-tight) 0; }
  /* the seam cap follows the tighter mobile band padding */
  .opt-a .stn-a.seam-a { --a-seam-h: var(--a-rhythm-tight); }
  .opt-a .hero-a { padding-top: calc(var(--a-header-h) + 3.4rem); }
  .opt-a .hero-a-media img { object-position: 72% 46%; }
  /* the scrim goes vertical on a phone (the copy is full-width there, so a
     left-anchored ramp would leave the last words on bare photo) — but it stays
     light enough that the clinic still reads as a photograph */
  .opt-a .hero-a-scrim {
    background:
      linear-gradient(180deg, rgba(4,7,22,.88) 0%, rgba(4,7,22,.66) 46%, rgba(4,7,22,.92) 100%),
      linear-gradient(96deg, rgba(4,7,22,.42) 0%, rgba(6,10,34,.10) 100%);
  }
  .opt-a .hero-a-ctas .btn-a { width: 100%; }
  .opt-a .card-a { padding: 24px 22px 22px; }
  .opt-a .book-a-form { padding: 22px 18px; }
  .opt-a .book-a-form .form-row { grid-template-columns: 1fr; }
  .opt-a .dossier-a-facts span { min-width: 118px; }
}
@media (max-width: 420px) {
  .opt-a .chip-a { min-height: 80px; }
  .opt-a .metric-a b { font-size: 2rem; }
  /* the hero place-names stay on one line so each keeps a single underline;
     narrowing the axis is what makes them fit a 320px screen */
  .opt-a .hero-a h1 { font-stretch: 100%; letter-spacing: -.035em; }
  .opt-a .crisis-a-pill { padding: .55rem .6rem; }
  .opt-a .crisis-a-msg { font-size: .78rem; }
}


/* ---- donor: sandbox/homepage-final/hybrid-sections.css ---- */
/* ==========================================================================
   HYBRID SECTION OVERRIDES — hand-authored, loaded LAST.

   Why last: meridian-a.css is GENERATED from the option-A fragment and owns
   the .opt-a rules at the same specificity these overrides use. Loaded before
   it, every rule here would lose the cascade at equal specificity and read as
   "the CSS isn't applying" -- the same trap already filed in
   web_html_css_cache_pitfalls.md (a media query placed above its base rules).

   OWNER ROUND 10 (2026-08-13).
   ========================================================================== */

/* --------------------------------------------------------------------------
   (0) OWNER ROUND 13 — the conversion rail shares the FIRST SCREEN with the
       hero, which is what "at the bottom of the hero how the old navy bar
       thing was" actually requires.

   Round 11 placed the rail immediately after the hero. That is not the same
   thing: the hero snaps to the viewport, so "immediately after" put the strip
   exactly one scroll below the fold and it was never visible on arrival.

   Rebuilt as the relationship the old hero__rail had, one level up: the STACK
   owns the viewport height, the hero absorbs whatever slack is left and the
   rail keeps its natural height at the base. No magic numbers -- the rail's
   height is content-driven and can change (it wraps at narrow widths) and
   round 7 already proved that hardcoding a strip's height means re-tuning it
   forever.

   COST, measured and stated rather than discovered later: the rail is 230px,
   so at 1440x900 the hero drops 828 -> ~598px and the portrait shrinks with
   it (height becomes the binding axis instead of width). If the figure needs
   to come back up, the lever is the RAIL's own height, not the hero's.
   -------------------------------------------------------------------------- */
.cdx .hero-stack {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h, 72px));
  min-height: calc(100dvh - var(--header-h, 72px));
}
/* the hero's own round-8 min-height moves UP to the stack; left in place it
   would claim the whole screen and push the rail straight back off it */
.cdx .hero-stack > .hero {
  min-height: 0;
  flex: 1 1 auto;
}
.cdx .hero-stack__rail { flex: 0 0 auto; }

@media (max-width: 900px) {
  /* stacked: the hero already runs past the fold by design, so forcing the
     stack to a screen height would only squash it further */
  .cdx .hero-stack { min-height: 0; display: block; }
}

/* --------------------------------------------------------------------------
   (1) "The current crisis bar we have now is fine but it only shows up once
        you scroll down past halfway of the entire page, it should be there
        from the start."

   CAUSE, measured rather than guessed: the bar is `position: sticky` and its
   containing block is .opt-a. A sticky element cannot paint before its own
   container reaches the viewport, and .opt-a now begins BELOW the hero AND the
   clinic route (round 9 moved the clinics above it), so the bar's first
   possible appearance moved down the page with it. Nothing was wrong with the
   bar; it was anchored to the wrong thing.

   FIX: anchor it to the viewport instead of to .opt-a. `fixed` is deliberate
   over restructuring the DOM -- the bar's entire stylesheet is scoped under
   .opt-a, so lifting the markup out to <body> would silently unstyle it.
   -------------------------------------------------------------------------- */
.opt-a .crisis-a {
  position: fixed;
  left: 0; right: 0;
  /* RR floats its bar OFF the bottom edge rather than sitting flush on it */
  bottom: 0;
  padding: 0 14px 24px;
  /* above the page, below the header's open dropdowns (z-index 900) */
  z-index: 60;
}

/* --------------------------------------------------------------------------
   (2) "The spacing and sizing of the crisis bar is odd... it shouldn't be so
        smushed with so much free space, use the space wisely." Then, after a
        first attempt that made everything BIGGER: "thats not what i meant.
        Maybe look and see how RRWEBSITE does theirs."

   Went and read it: RRWEBSITE-main/public/index.html ships a `.crisis-bar`
   with the same job, and the difference is not SIZE, it is SIZING MODEL.

   RR's pill is CONTENT-SIZED and floats:
     position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
     white-space:nowrap; padding:13px 18px; gap:14px; border-radius:100px
   so it is only ever as wide as the words inside it and there is no free
   space to distribute. Mine was a 900px bar with the message pinned left and
   the CTA pinned right -- which is exactly where "so much free space" came
   from, and making the contents bigger only fed it.

   Its type is also much smaller than I had guessed: label 13px, CTA 11.5px
   uppercase at 9px/22px padding. Those are RR's own values, used here rather
   than re-derived.

   ONE deliberate divergence: RR's CTA is a direct tel: link because RR has a
   single number. IPC has five clinic lines and no main line, so this stays a
   chooser (hardcoding one would be #11). The pill is sized to the chooser.
   RR's backdrop-filter:blur(20px) is also NOT copied -- this project measured
   frosted surfaces starving IntersectionObserver/rAF, and the bar does not
   need it to read.
   -------------------------------------------------------------------------- */
.opt-a .crisis-a-pill {
  /* shrink-to-fit and centre, RR's model -- not a wide bar with a gap in it */
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 12px;
  /* ROUND 16: 13px -> 10px. RR's own value was 13px and this deviates from it
     deliberately. The rail's bottom padding is DERIVED from this pill's
     height, so the pill is the only lever on the "massive padding" the owner
     flagged twice (rounds 15 and 16); at 65px tall it reserved 84px of rail. */
  padding: 10px 16px;
  border-radius: 100px;
}
.opt-a .crisis-a-msg {
  font-size: 13px;
  gap: .55rem;
  color: #b8c8e4;
  line-height: 1.3;
}
.opt-a .crisis-a-msg strong { font-size: 13px; font-weight: 700; }
/* RR's CTA proportions. ~34px tall, which clears WCAG 2.2 AA target size
   (2.5.8 asks 24x24 CSS px); the 44px figure is the AAA / iOS guideline. */
.opt-a .crisis-a-drop > summary {
  padding: 7px 20px;   /* round 16: 9px -> 7px, same reason. Still ~30px tall,
                          clear of WCAG 2.2 SC 2.5.8's 24px floor. */
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-height: 0;
}

@media (max-width: 600px) {
  /* RR's own breakpoint and treatment: the pill stops shrink-wrapping and
     spans the viewport with tighter padding and a squarer radius. */
  .opt-a .crisis-a { padding: 0 14px 16px; }
  /* #150: the 91px reservation for this band MOVED to the footer section below,
     beside its own base rule. It cannot live here: `.opt-a .ftr-a{padding: 0}`
     is declared later in this file and its SHORTHAND resets padding-bottom, so
     any reservation authored above that line is wiped on canon. Search "#150". */
  .opt-a .crisis-a-pill {
    width: auto;
    white-space: normal;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 18px;
  }
  .opt-a .crisis-a-msg { font-size: 12.5px; }
  .opt-a .crisis-a-msg strong { font-size: 12.5px; }
  .opt-a .crisis-a-drop > summary { padding: 8px 14px; }
}

/* --------------------------------------------------------------------------
   (2b) COLLISION the fix above created, caught by measuring rather than by
        reading: with the bar now painting from page load, it lands on top of
        Dr. Hare's identity plate in the hero -- measured overlap 85x78px,
        obscuring the "Meet our providers" link inside it.

   Narrowing the pill does NOT fix this. The plate is pinned to the page's
   right edge while the pill is centred, so at 1440 a 720px pill just clears
   it, and at 1024 the same pill overlaps by ~196px -- the collision gets WORSE
   on smaller desktops. Lifting the plate clears it at every width.

   Keyed to the bar's own dismiss state (the × sets [hidden]), so closing the
   bar puts the plate back on the page edge where round 8 placed it, instead of
   leaving a permanent gap for a bar that is no longer there.

   ROUND 13 UPDATE: this no longer applies. The rail now sits at the base of
   the first screen, so the crisis bar floats over the RAIL, not over the hero
   -- and the 100px clearance that was correct in round 10 left the identity
   plate stranded in the middle of the portrait once the hero got shorter.
   The plate goes back to the hero's base, which is where round 8 put it.
   The clearance moves to the thing the bar actually covers, below.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   (2c) The crisis bar was measured covering 50px of the clinic cards -- i.e.
   hiding three of the five phone numbers it exists to offer. On a practice
   whose tel: links are the only working conversion path (#63 keeps forms out
   of scope), a floating CTA that occludes the numbers is strictly worse than
   no CTA there at all.

   Reserved space in the RAIL rather than hiding the bar, because both
   behaviours were asked for explicitly: the bar is visible from load (round
   10) AND the strip is on the first screen (round 13). Its top padding is
   trimmed to pay for part of the clearance instead of charging all of it to
   the hero. (Round 15 tightened both figures -- see below.)

   NOTE the selector: the scope class and the stack class are on the SAME
   element (<div class="opt-a hero-stack__rail">), so it must COMPOUND --
   `.opt-a.hero-stack__rail`, never `.opt-a .hero-stack__rail`. Written with a
   space first and measured: the padding silently did not apply and the cards
   stayed covered. Same trap as `.cdx.js` vs `.cdx .js`, already filed in
   web_html_css_cache_pitfalls.md.

   ROUND 15: "the padding for the location card strip is way too much anyways."
   Correct -- 120px of the rail's 275px was padding, and the 96px bottom was me
   reserving the crisis bar's FULL footprint. Tightened on both ends, and the
   bar's own float comes down with it so the reservation shrinks too. The
   bottom figure is not free to choose: the cards must end above the pill, so
   it is derived from the pill (65px) + its float (14px) + 5px, not picked.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .opt-a .crisis-a { padding-bottom: 10px; }   /* round 16: was 14px */
  /* #150: the 74px reservation for this band MOVED to the footer section below,
     beside its own base rule -- same reason as the <=600px band. Search "#150". */
  .opt-a.hero-stack__rail .rail-a {
    padding-top: 14px;
    /* ROUND 16g -- THE RESERVATION IS GONE. Asked about five times.

       Every prior round treated this number as DERIVED from the crisis pill's
       footprint and therefore not free to choose. That premise was mine, not
       the owner's: round 15's note reads "the padding for the location card
       strip is way too much anyways" -- a complaint about PADDING. Nobody ever
       reported the pill covering a card. I inferred the constraint, wrote it
       into this comment as if it were a requirement, then cited my own comment
       back as the reason the padding could not shrink, four times over.

       The pill is `position: fixed`. It floats over every other section on
       this page. The rail was the only one paying rent for it, and that rent
       was 70 of the 118px of dead band under the cards.

       Cost, stated rather than discovered later: at scroll 0 the pill now
       overlaps the lower part of the middle cards, as it does everywhere
       else. The phone number sits above the overlap; the pill is dismissible. */
    padding-bottom: 18px;
  }
}

/* --------------------------------------------------------------------------
   (2d) "The top of Dr Hare's head is being eaten by the nav bar."

   MEASURED by scanning the cutout's alpha channel for its first opaque row --
   the box top says nothing here, because the PNG carries ~60 rows of
   transparent padding above his hair. His hair sat at y=61 against a nav that
   ends at 72: clipped by 11px.

   CAUSE: `--hare-extra` grows the figure box BEYOND the hero and it is
   bottom-anchored, so every extra pixel pushes his head up past the hero's top
   edge and under the fixed nav. That was harmless when the hero owned the
   whole screen; once the rail took 275px of it, the overflow became a clip.

   Set to 0 so the figure can never exceed the hero: its top IS the hero's top,
   which is exactly the nav's bottom edge, and the cutout's own transparent
   padding then guarantees his hair clears it. Slimming the rail above gives
   the height back the honest way.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .cdx .hero { --hare-extra: 0px; }
}

/* --------------------------------------------------------------------------
   (3) "I dont like how the dropdown for 'conditions' is off to the side
        instead of centered under the button. Also it doesn't have the level of
        detail and polish as the dropdown for 'procedures' with the coloreds
        section headers."

   The panel is now a .menu-mega, which is where the centring and the green
   column headings already live (franken-header.css) -- so this file only sets
   its WIDTH. The Procedures mega is 1180px because it carries 33 links across
   nine columns; Conditions has 17 across six, and at that width the six groups
   would strand a mostly-empty final row. 760px lands three columns by two.
   -------------------------------------------------------------------------- */
.hp-header .menu-mega--cond {
  width: min(760px, calc(100vw - 32px));
}
.hp-header .menu-mega--cond .mega-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
/* CENTRING, and this is the actual fix for "off to the side" -- MEASURED at
   238px off after the mega conversion alone. `.menu-mega` is `left:50%;
   translateX(-50%)`, which resolves against the nearest POSITIONED ancestor,
   and the <li> is not positioned -- so it was centring on the fixed .hp-header,
   i.e. on the page. That is correct for the Procedures panel (1180px wide; it
   has to span the page or it would overflow), and wrong for this one.
   Scoped with :has() to the item that owns THIS panel, so Procedures keeps
   page-centring and only Conditions centres on its own button. */
.hp-header .hp-nav .has-menu:has(> .menu-mega--cond) { position: relative; }

/* --------------------------------------------------------------------------
   (4) Option B's patient-guide transplant sits between two .cdx sections, so
       it needs the same vertical rhythm as the clinic route above it rather
       than option B's own page spacing.
   -------------------------------------------------------------------------- */
.cdx .patient-guide {
  background: var(--a-bg, #f7f9fc);
}

/* ==========================================================================
   OWNER ROUND 14
   ========================================================================== */

/* --------------------------------------------------------------------------
   (5) "There is a random white strip at the bottom of the page before the
        footer that needs to be removed."

   MEASURED: exactly 100px, and it is not a stray element -- it is .main-a's
   own `padding-bottom: 100px` showing through the white .opt-a. That padding
   is right for every other chunk (it spaces the last station off the footer),
   but the trailing chunk ends with the full-bleed dark closing section, which
   is supposed to run straight into the footer. Scoped with :has() to exactly
   that case rather than zeroed globally.
   -------------------------------------------------------------------------- */
.opt-a .main-a:has(> .close-a:last-child) { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   (6) "The 'book an appointment' section offers them to call the clinic but
        offers no phone numbers." The five clinic chips are now inside the
        booking section, lifted from the closing section so the numbers cannot
        drift apart. They sit on a LIGHT ground here, where the closing
        section's chips sit on a dark photo, so the surface is restated.
   -------------------------------------------------------------------------- */
.opt-a .book-a-chips { margin: 1.4rem 0 .4rem; }
.opt-a .book-a-chips .rail-a-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .6rem;
}
.opt-a .book-a-chips .chip-a {
  background: #fff;
  border: 1px solid rgba(0, 7, 109, .14);
  border-radius: 14px;
  padding: .8rem .9rem;
  box-shadow: 0 1px 0 rgba(0, 7, 109, .05), 0 10px 24px -18px rgba(0, 7, 109, .35);
}
.opt-a .book-a-chips .chip-a:hover { border-color: rgba(0, 7, 109, .34); }
.opt-a .book-a-chips .chip-a-county { color: #5b6480; }
.opt-a .book-a-chips .chip-a-city   { color: var(--navy, #00076D); }
.opt-a .book-a-chips .chip-a-num    { color: var(--navy, #00076D); }
.opt-a .book-a-chips .chip-a-hours  { color: #5b6480; }

/* --------------------------------------------------------------------------
   (7) "Can we use the colored logo in the footer instead of the black and
        white... make it a bit bigger."
   The mark is the full-colour PNG now, so it needs no white treatment; the
   footer ground is dark enough for it to read. Sized up ~40%.

   MEASURED: `width: 300px` on `.opt-a .ftr-a-logo` (0,2,0) did nothing -- the
   donor's `.opt-a .ftr-a-brand img` (0,2,1) outranks it and was holding the
   mark at 124px. Matched on the same element+class so it wins outright.
   -------------------------------------------------------------------------- */
.opt-a .ftr-a-brand img.ftr-a-logo {
  width: 300px;
  max-width: 76%;
  height: auto;
}

/* --------------------------------------------------------------------------
   (8) #101 -- FOOTER PARITY WITH RRWEBSITE. Owner: "The footer should match
       RRWEBSITE."

   Every metric below is READ OFF RR's own stylesheet (RRWEBSITE-main/
   styles.unmin.css:543-577, 739, 758-759) rather than eyeballed from a
   screenshot -- same discipline as the navbar extraction in round 5.

   COLOURS ARE DELIBERATELY NOT PORTED, for two reasons that both point the
   same way:
     - brand_system.md: "port that site's discipline, never its palette." RR
       is dark-navy/periwinkle; IPC is the daylight inverse.
     - RR's own footer text would FAIL AA here. Measured from its hexes:
       .footer-col-label #566070 on the #07101f ground is 3.00:1, and
       .footer-disclaimer #2e3d50 is far below that. Porting those literally
       would import a contrast failure into a YMYL medical footer and
       re-create docket #22 in a new place.
   So: RR's GEOMETRY (grid ratios, paddings, sizes, tracking, hairline
   opacities, breakpoints) verbatim; RR's COLOUR ROLES mapped onto .opt-a
   tokens at values that clear AA on our own ground.
   -------------------------------------------------------------------------- */

/* the three bands are full-bleed; the shell sits INSIDE each one so the
   hairlines run edge to edge exactly as RR's do. The donor put one shell
   around all three, so its padding is dropped here. */
.opt-a .ftr-a { padding: 0; }

/* #129 -- RESERVE THE CRISIS BAR'S HEIGHT. The bar is `position: fixed;
   bottom: 0`, so it is out of flow and nothing reserves its height: at full
   scroll it sits ON TOP of the last band of the footer, and that band holds the
   MEDICAL DISCLAIMER. On a YMYL medical site a notice that is in the DOM and
   unreachable to every sighted mouse user is worse than one that is merely
   short.

   MEASURED 2026-08-15 (Playwright; scroll-behavior forced to auto and scrollY
   polled to a stop -- a smooth-scroll probe reports a viewport that never
   moved). Bar height / disclaimer occluded, at full scroll, on /about,
   /conditions, /faq and /location/dalton-ga:

       1280px  bar 66.0px  ->  37.4px of the disclaimer covered
       1024px  bar 66.0px  ->  37.4px
        900px  bar 80.0px  ->  56.1px
        768px  bar 80.0px  ->  56.1px
        600px  bar 69.5px  ->  53.2px
        390px  bar 82.8px  ->  66.4px

   TWO CORRECTIONS TO DOCKET #129, both from that table. The row sampled two
   widths and recorded "66px at 1280 / 83px at 390" -- but the TALLEST desktop
   state is the 601-900px band at 80px, which neither width sees. And the row
   says "at 390x844 nothing is hidden": that is true of THIS page only, and on
   the other 100 pages 66.4px of the disclaimer is covered at 390px. The defect
   was present at every width tested, not width-dependent. Same single-viewport
   blind spot as #126, which is why this is declared per band.

   WHY THE FOOTER AND NOT THE PAGE. `.ftr-a` paints its ground with a
   linear-gradient (its background-COLOR is transparent) while `body` is white,
   so reserving on the body would open a white strip below the dark footer --
   the exact visual signature of the "bare page background below the footer"
   defect the at-rule grouping bug once produced. Padding the footer extends the
   footer's own gradient, so the reserved band is invisible.

   WHY IT NEEDS NO FRONT-PAGE EXEMPTION. Here the footer lives inside `.opt-a`,
   and mobile-front.css hides that whole block below 760px (#112), so the
   reservation is inert on this page at mobile by construction -- no breakpoint
   to keep in sync. chrome.py rescopes `.opt-a .ftr-a` to `.ftr-a` for the other
   100 pages, where footer and bar are both always present.

   VALUES = measured bar height + 8px separation, keyed to the bar's OWN
   breakpoints declared above (24px base, 16px <=600, 10px >=901). If the pill's
   padding changes these must move with it; `chrome.py --selftest` pins both
   directions so they cannot drift apart silently.

   ⚠️ EDIT THIS FILE, NOT site/css/hybrid-sections.css. promote-homepage.py
   copies this sandbox sheet OVER site/css/, so an edit made there is destroyed
   by the next promotion (measured 2026-08-15 -- it silently reverted this exact
   rule and left chrome.css carrying a reservation its donor no longer had).

   #150: ALL THREE BANDS LIVE HERE NOW, AND BOTH HALVES OF THAT ARE LOAD-BEARING.
   The two @media reservations used to be authored next to the crisis-bar rules
   they are derived from, ~250 lines above. That read better and was WRONG twice
   over, in opposite directions:

     - `.opt-a .ftr-a { padding: 0; }` is declared just above this comment, and
       the SHORTHAND resets padding-bottom. Anything authored above it is wiped
       on canon. Measured: with the bands up there and the base down here, canon
       reserved 88px at EVERY width -- both bands inert -- while the 101 pages
       built from the compiled chrome.css correctly got 91/88/74, because
       chrome.py emits unconditional rules before at-rules. The rendered guard
       had been reporting those 101 CORRECT pages as `site_footer DRIFT`.
     - Moving only the BASE above the bands (the obvious repair) is worse, not
       better: it lands above `padding: 0` too, so canon measured 0px at every
       width -- the reservation gone entirely. Measured before it shipped.

   So the order below is the fix and it is not stylistic: `padding: 0` first,
   then the base, then the bands ascending. Keep <=600 before >=901 --
   `chrome.py --selftest` pins the compiled emission as exactly (88, 91, 74) and
   also pins that the reservation is emitted AFTER the `padding: 0` shorthand. */
.opt-a .ftr-a { padding-bottom: 88px; }

/* #129: the pill wraps to two rows below 560px, so the bar is TALLER here
   (82.8px measured at 390px) than in the 601-900px band despite the smaller bar
   padding. Reserve the widest case across this whole band. */
@media (max-width: 600px) {
  .opt-a .ftr-a { padding-bottom: 91px; }
}

/* #129: the bar's own padding drops to 10px here, so the bar measures 66px
   against 80px in the 601-900px band. Reserve the smaller figure. */
@media (min-width: 901px) {
  .opt-a .ftr-a { padding-bottom: 74px; }
}

.opt-a .ftr-a-upper { padding: 72px 0 56px; }          /* RR .footer-upper */

.opt-a .ftr-a-grid {
  display: grid;
  /* ROUND 16f: five columns, not RR's four. RR's single Navigation column is
     10 links; ours was 15 and measured 530px, which is what made the footer
     836px tall. Split into Practice and Care -- the donor's own grouping --
     each column is now roughly half as tall and nothing wraps. A 2-column
     list INSIDE the 253px Navigation column was tried first and is exactly
     what round 16 already rejected: it wraps five of the labels. */
  grid-template-columns: 1.25fr .82fr .95fr 1.05fr .95fr;
  gap: 40px;
}

.opt-a .ftr-a-tag {
  font-size: 14px; line-height: 1.7;
  margin: 0 0 26px; max-width: 30ch;
  color: rgba(255,255,255,.66);
}
.opt-a .ftr-a-social-row { display: flex; gap: 10px; }

/* RR .footer-col-label -- geometry verbatim, colour lifted to clear AA */
.opt-a .ftr-a-col-label {
  font-family: var(--a-sans);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.62);
  margin-bottom: 22px;
}

/* RR .footer-nav-links -- ONE column, as RR's is. Measured: a 2-col grid here
   wrapped 5 of the 15 labels onto a second line ("Conditions we treat",
   "Radiofrequency ablation", "Spinal cord stimulation", "Medication
   management", "Epidural injections"), because IPC's labels are longer than
   RR's. At the full column width every label fits on one line. */
.opt-a .ftr-a-nav-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.opt-a .ftr-a-nav-links li a {
  display: block; font-size: 14px; padding: 0;
  color: rgba(255,255,255,.72); text-decoration: none;
  transition: color .18s ease;
  /* the donor sets min-height:30px on every .ftr-a nav a as a tap target.
     RR sets none, and at 15 links that is ~90px of column IPC does not need
     on a mouse device. 26px keeps it above the WCAG 2.2 SC 2.5.8 24px floor;
     the full 30px comes back on touch at the <=720px breakpoint below. */
  min-height: 26px;
}
.opt-a .ftr-a-nav-links li a:hover { color: #fff; }

/* RR .footer-contact-block / .footer-ci -- the label/value row. This is what
   replaces the old single "Main office" phone: five clinic lines, one row
   each, so no one number stands in for a practice that has five and no main
   line (#11/#82). */
.opt-a .ftr-a-contact-block { display: flex; flex-direction: column; gap: 0; }
.opt-a .ftr-a-ci {
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.opt-a .ftr-a-ci:last-child { border-bottom: none; }
.opt-a .ftr-a-ci .ci-label {
  display: block; margin-bottom: 3px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.62);
}
.opt-a .ftr-a-ci .ci-label a {
  color: inherit; text-decoration: none; transition: color .18s ease;
}
.opt-a .ftr-a-ci .ci-label a:hover { color: var(--a-green); }
.opt-a .ftr-a-ci .ci-value { display: block; font-size: 14px; color: rgba(255,255,255,.78); }
.opt-a .ftr-a-ci .ci-value a {
  color: rgba(255,255,255,.78); text-decoration: none; transition: color .18s ease;
}
.opt-a .ftr-a-ci .ci-value a:hover { color: #fff; }

/* RR .footer-trust-list / .trust-item / .trust-check. The check glyph is the
   BRAND green on a dark ground (never white-on-green, which is the 2.50:1
   pair brand_system.md bans). */
.opt-a .ftr-a-trust-list { display: flex; flex-direction: column; gap: 9px; }
.opt-a .ftr-a-trust {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.72);
}
.opt-a .ftr-a-check {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--a-green-tint);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 10px; font-weight: 800; color: var(--a-green);
}

/* RR .footer-bottom / .footer-bottom-row / .footer-legal */
.opt-a .ftr-a-bottom {
  margin-top: 0; padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: block;
}
.opt-a .ftr-a-bottom-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.opt-a .ftr-a-legal {
  font-size: 12px; line-height: 1.5; margin: 0;
  color: rgba(255,255,255,.62);
}
.opt-a .ftr-a-legal a {
  color: rgba(255,255,255,.78); text-decoration: underline;
  transition: color .18s ease;
}
.opt-a .ftr-a-legal a:hover { color: #fff; }

/* RR .footer-disclaimer. Geometry ported; RR's #2e3d50 ink is not -- see the
   header comment. Ours stays legible. */
.opt-a .ftr-a-disclaimer-band {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 16px 0;
}
.opt-a .ftr-a-disclaimer {
  margin: 0; max-width: none;
  font-size: 11px; line-height: 1.7;
  color: rgba(255,255,255,.55);
}
.opt-a .ftr-a-disclaimer strong { color: rgba(255,255,255,.72); }

/* RR's own two breakpoints, verbatim */
@media (max-width: 1024px) {
  .opt-a .ftr-a-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 720px) {
  .opt-a .ftr-a-grid { grid-template-columns: 1fr; gap: 32px; }
  .opt-a .ftr-a-bottom-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .opt-a .ftr-a-nav-links li a { min-height: 30px; }   /* full tap target on touch */
  .opt-a .ftr-a-upper { padding: 48px 0 40px; }
}

/* --------------------------------------------------------------------------
   (9) OWNER ROUND 16 -- the conversion rail: brand colour, and tighter.
       "can we have it match the branding colors and fix the padding? Id like
        to make the section a little tighter so it fits neatly on the page when
        you first open the site. The color is also just kind of offputting
        because its randomly gray when it should probably use branding colors"

   THE GREY IS THE CARDS, not the band. The donor paints .chip-a with
   `rgba(255,255,255,.055)` over a near-black ground -- a translucent WHITE,
   which composites to neutral grey and carries no brand at all. The band
   itself is the owner's own ruled "dark neutral, brand highlights" direction
   (#99 round 3), so it is only inflected toward navy, not repainted.

   MEASURED before touching anything: chip box = 114px against a
   `min-height: 88px`. The CONTENT is the binding axis, so trimming
   min-height would have been dead work -- the same trap as round 8c's
   width-vs-height under object-fit. The height comes out of the padding and
   the internal line-heights instead.

   THE BOTTOM PADDING IS NOT FREE and is deliberately untouched. Its 84px is
   derived (65px crisis pill + 14px float + 5px clearance) so the cards clear
   the fixed pill; round 15 already established that. If the strip must get
   shorter still, the PILL has to shrink or move -- that is an owner call, not
   a number to shave here.
   -------------------------------------------------------------------------- */

/* OWNER ROUND 16b -- INVERTED. The first pass made the BAND dark and the
   CARDS navy; the owner asked for the opposite: "instead of making the cards
   blue and the backround dark, can we have the backround be blue and the
   cards dark with the green/blue brand accent or font colors instead?"
   Band takes the brand navy, cards take the neutral dark, green stays the
   accent. Same tokens, swapped roles. */
.opt-a .rail-a {
  /* ROUND 16e -- the owner reported the cards and Dr Hare's plate reading as
     different colours. Sampled from the rendered PNG they are byte-identical
     (0,5,76) on both, so this is SIMULTANEOUS CONTRAST, not a colour bug: the
     plate sits on the pale hero and reads rich, while the same navy on a navy
     band reads dull. The band's own gradient made it worse by ENDING at
     #00054C -- exactly the card colour -- so its lower half merged into the
     cards. The band now stays well above the cards for its whole run, which
     restores the dark-panel-on-lighter-ground relationship the plate has. */
  /* ROUND 16h: the SECTION is what should match Dr Hare's plate -- flat
     #00054C, the value measured off `.hero__identity`. The green aurora stays
     as the only modulation; a gradient here would stop it being "the same
     colour as" the plate, which is the whole ask. */
  background:
    radial-gradient(70% 130% at 12% 0%, rgba(83,186,0,.10), transparent 62%),
    #00054C;
}
/* ROUND 16d -- "make the backround of the location cards below the same color
   as the blue card under dr hare". MEASURED off the rendered page rather than
   guessed: that card is `.hero__identity`, a FLAT rgb(0,5,76) = #00054C with
   no gradient. Same value as --a-navy-deep, so the two are the same colour by
   measurement, not by coincidence -- but they live in different scopes (the
   plate is Codex's hero, this is Meridian's rail), so if one is ever re-toned
   the other must be re-measured against it.
   Flat, not a gradient, because the plate is flat and matching it is the ask.
   The cards still separate from the band: the band's gradient is lighter than
   #00054C everywhere the cards sit, so they read as darker panels on it, and
   the green hairline carries the edge. */
/* ROUND 16h -- I had this INVERTED. The owner's actual ask: "the backround of
   the inside of the cards is supposed to be gray like it was before. The
   backround of the SECTION, the part that is sitting behind the cards or what
   the cards is sitting on top of is supposed to be the same color as the card
   introducing DR HARE."
   So: the BAND takes the plate's #00054C, and the CARDS go back to the
   donor's translucent white. Rounds 16a-16d moved these two surfaces around
   each other three times because I kept reading "the cards" as the thing to
   recolour when the SECTION was the subject. */
.opt-a .rail-a .chip-a,
.opt-a.hero-stack__rail .chip-a {
  background: rgba(255,255,255,.055);          /* the donor's original grey */
  border-color: rgba(255,255,255,.16);
}
.opt-a .rail-a .chip-a:hover,
.opt-a.hero-stack__rail .chip-a:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(83,186,0,.65);
}
.opt-a .rail-a .chip-a-county,
.opt-a.hero-stack__rail .chip-a-county { color: var(--a-green); }

/* tighter: every figure here is one the content does not need */
.opt-a .rail-a .rail-a-head { margin-bottom: .62rem; }      /* was 1.05rem */
.opt-a .rail-a .rail-a-chips { gap: .6rem; }                /* was .7rem   */
.opt-a .rail-a .chip-a {
  min-height: 0;                    /* content is the binding axis, not this */
  padding: .58rem .9rem;            /* was .8rem .95rem */
  gap: 0;                           /* was .1rem */
}
.opt-a .rail-a .chip-a-num { line-height: 1.12; }           /* was 1.2 */
.opt-a .rail-a .chip-a-city { line-height: 1.25; }
@media (min-width: 901px) {
  .opt-a.hero-stack__rail .rail-a { padding-top: 10px; }    /* was 14px */
}

/* the booking-section copy of the chips keeps its own light treatment (7);
   these navy rules are scoped to the RAIL so they cannot reach it. */

/* --------------------------------------------------------------------------
   (10) #100 -- THE REVIEW WHEEL, on RRWEBSITE's trust-bar model.
        Owner round 16: "Can you make it like RRWEBSITE has theirs? with IPC
        design though of course."

   Read off RRWEBSITE-main/public/styles.css (.trust-bar / .trust-marquee /
   .trust-track / .trust-card) rather than eyeballed. RR's geometry verbatim:
   the 260px + 1fr inner grid, 40px gap, 48px band padding, 360px cards, 18px
   track gap, the 6%/94% edge mask, the 50s linear loop, translateX(-50% - gap/2)
   over a set rendered twice, and pause on hover/focus-within.

   THREE THINGS DELIBERATELY NOT PORTED:

   1. backdrop-filter: blur(8px) on every card. RR runs ~32 frosted cards here.
      This project MEASURED ~100 frosted surfaces starving IntersectionObserver
      and rAF (~700ms callback latency, reveals stuck) -- it is a standing ban
      in meridian_visual_system.md, and a marquee animating 16 blurred layers
      is the worst possible place to break it.

   2. The serif italic quote. RR sets var(--serif) + font-style:italic; the
      owner replaced Playfair with Archivo in round 1 of #99 and ruled "no
      italic display anywhere". Sans, upright.

   3. RR's palette, and RR's `display:none` on mobile. Hiding the reviews
      entirely below 900px means phone users -- most of this practice's
      traffic -- get no social proof at all. Here the marquee DEGRADES to the
      manual scroll-snap track instead, which is also what a coarse pointer
      and prefers-reduced-motion get.
   -------------------------------------------------------------------------- */
.opt-a .rev-a {
  --rev-star: #E8B23A;
  position: relative;
  /* ROUND 16g: 48px -> 30px on top. This is the OTHER half of the 118px dead
     band under the cards -- the reviews band's own top padding sitting
     directly beneath the rail's. Every prior round measured the rail's number
     and none of them measured this one, which is why cutting the rail alone
     never looked like it had worked. Bottom stays 48px: nothing is stacked
     under it. */
  padding: 30px 0 48px;                                   /* RR .trust-bar */
  background: linear-gradient(180deg, #050A22 0%, #070D2A 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
/* RR's hairline accent across the top of the band */
.opt-a .rev-a::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(83,186,0,.45) 50%,
                              rgba(0,9,143,.55) 50%, transparent 100%);
  opacity: .8;
}
.opt-a .rev-a-inner {
  display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center;
}

/* the score block */
.opt-a .rev-a-score .eyebrow-a { margin-bottom: .5rem; }
.opt-a .rev-a-score-row { display: flex; align-items: center; gap: 14px; }
.opt-a .rev-a-num {
  font-family: var(--a-display); font-size: 58px; font-weight: 760;
  line-height: 1; color: #fff; letter-spacing: -.02em;
}
.opt-a .rev-a-stars-big { display: inline-flex; gap: 2px; color: var(--rev-star); }
.opt-a .rev-a-stars-big svg { width: 17px; height: 17px; }
.opt-a .rev-a-star-full { fill: var(--rev-star); }
.opt-a .rev-a-count {
  margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.7);
}
.opt-a .rev-a-count b { color: #fff; font-weight: 700; }
.opt-a .rev-a-cta {
  display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700;
  color: var(--a-green); text-decoration: none;
}
.opt-a .rev-a-cta:hover { text-decoration: underline; }

/* B20/#71: the substantiation line -- five per-clinic Google listing links
   (stable CID form, derived from reviews.json). These sit IN PROSE, so they
   carry underlines per #205's prose-link rule; the standalone .rev-a-cta
   above is not prose and keeps its hover-only underline. */
.opt-a .rev-a-google {
  margin: 12px 0 0; font-size: 13px; line-height: 1.9; color: rgba(255,255,255,.7);
}
.opt-a .rev-a-google a {
  color: var(--a-green); font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap;
}
.opt-a .rev-a-google a:hover { text-decoration: none; }

/* the marquee */
.opt-a .rev-a-marquee {
  overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.opt-a .rev-a-track {
  display: flex; gap: 18px; width: max-content;
  /* MEASURED, answering the owner's question directly: at 50s ours ran
     57 px/s to RR's 121 px/s -- already 2.1x SLOWER than RR, because the
     same 50s covers half the distance over 16 cards instead of 32. Slowed
     again anyway on request: 90s = ~32 px/s, ~11s per card, which is a
     reading pace rather than a ticker pace. Duration is the wrong knob to
     copy between marquees -- px/sec is the comparable quantity. */
  animation: rev-a-scroll 90s linear infinite;
  will-change: transform;
}
@keyframes rev-a-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 9px)); }
}
/* WCAG 2.2 SC 2.2.2 -- moving content needs a way to stop it. RR pauses on
   hover and focus-within; both are kept, and the reduced-motion and
   coarse-pointer rules below remove the motion outright rather than only
   pausing it. */
.opt-a .rev-a-marquee:hover .rev-a-track,
.opt-a .rev-a-marquee:focus-within .rev-a-track { animation-play-state: paused; }

.opt-a .rev-a-card {
  flex: 0 0 340px; min-height: 148px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 22px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(0,9,143,.40), rgba(0,7,109,.56));
  border: 1px solid rgba(83,186,0,.20);
  transition: border-color .28s ease, transform .28s ease;
}
.opt-a .rev-a-card:hover {
  border-color: rgba(83,186,0,.5); transform: translateY(-2px);
}
.opt-a .rev-a-stars { display: inline-flex; gap: 3px; }
.opt-a .rev-a-stars svg { width: 13px; height: 13px; fill: var(--rev-star); }
.opt-a .rev-a-quote {
  /* ROUND 16c: serif italic, at owner request -- "something italicized or
     better used for quotes from actual people / dialouge". This is RR's own
     treatment (var(--serif) + font-style:italic), which 16a deliberately did
     NOT port because #99 round 1 banned italic DISPLAY type after the owner
     rejected Playfair headings. A pull-quote is not display type and the
     owner has now asked for it directly, so the ban is not in tension: the
     headings stay Archivo, only the quoted speech is italic. Playfair is
     already loaded on this page for the .cdx clinic directory, so this costs
     no extra font request. */
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 16px; line-height: 1.5;
  color: rgba(255,255,255,.93);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.opt-a .rev-a-quote::before { content: "\201C"; }
.opt-a .rev-a-quote::after  { content: "\201D"; }
.opt-a .rev-a-by {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: auto; padding-top: 4px; font-size: 11.5px;
}
.opt-a .rev-a-who { color: #fff; font-weight: 700; }
.opt-a .rev-a-where {
  position: relative; padding-left: 14px; font-weight: 700;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--a-green);
}
.opt-a .rev-a-where::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--a-green);
  box-shadow: 0 0 0 2px rgba(83,186,0,.2);
}

/* degrade to a manual track: no motion, but the reviews stay on the page */
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .opt-a .rev-a-track {
    animation: none; width: auto;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px;
  }
  .opt-a .rev-a-card { scroll-snap-align: start; }
  .opt-a .rev-a-marquee { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 900px) {
  .opt-a .rev-a-inner { grid-template-columns: 1fr; gap: 24px; }
  .opt-a .rev-a-num { font-size: 46px; }
  .opt-a .rev-a-card { flex-basis: 82vw; }
}

/* Section (11) -- the hand-written white treatment for .clinic-directory --
   was REMOVED in round 16c. The owner asked for option C's version instead
   ("just pull it from here instead of trying to recreate it"), so it is now
   EXTRACTED into the generated cdx-directory.css. Two sheets styling the
   same component from opposite directions is how the cascade bugs in
   web_html_css_cache_pitfalls.md started, so the hand-written one is gone
   rather than left to lose a specificity race. */

/* the Google mark, round 16c: "can we add a little google logo in the corner
   of each review". Sits in the footer beside the attribution rather than
   floating in the card corner, so it reads as part of the source line and
   cannot collide with the quote text at any card width. Fixed 14px and never
   recoloured -- it is a trademark being used to attribute a real Google
   review, so it is reproduced as-is. */
.opt-a .rev-a-g {
  width: 14px; height: 14px; flex: 0 0 14px; display: block;
}
.opt-a .rev-a-by { gap: 4px 8px; }

/* --------------------------------------------------------------------------
   (12) ROUND 16f -- three fixes the owner flagged together.
   -------------------------------------------------------------------------- */

/* (a) "There should be no white spaces between sections like this."
   FOUND BY MEASURING, not by reading: `.main-a` carries `padding-bottom:100px`
   and `.cdx` behind it is white, so the last 100px of the column paints as a
   white strip. This is the SAME defect round 15 fixed before the footer -- the
   .main-a splits around the Codex transplants, so the padding shows at EVERY
   split, and round 15 only closed the one it could see. Zeroed at the source
   rather than patched per-seam; every section inside carries its own padding. */
.opt-a .main-a { padding-bottom: 0; }

/* (b) "the popup on the crisis bar has text hanging off of it."
   CAUSE: round 12 ported RR's `white-space: nowrap` onto .crisis-a-pill so the
   pill would shrink-wrap its own label. The dropdown panel is a DESCENDANT of
   the pill, so it inherited the nowrap and its footnote sentence could not
   wrap -- it rendered as one line straight out of the rounded box. The pill
   still needs nowrap; the panel must not have it. */
.opt-a .crisis-a-panel,
.opt-a .crisis-a-panel * { white-space: normal; }
.opt-a .crisis-a-panel-foot { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   (13) The desktop body map is a single-screen instrument, not a second page.

   The original navigator brought standalone-page geometry into the homepage:
   144px of station padding, a title that grew until it wrapped, six 74px rows,
   a 630-735px stage and a folio that reached 712px. Merely shrinking the body
   artwork left those layout boxes behind. The homepage owns a bounded desktop
   composition instead: the title stays on one line, every column becomes more
   compact together, and the row responds to short viewports without growing
   past the taller-screen cap. The anatomy aspect ratio and all content remain
   unchanged. Tablet/mobile keep their established layouts below 1121px.
   -------------------------------------------------------------------------- */
@media (min-width: 1121px) {
  #where-it-hurts-a { padding-block: 16px; }

  #where-it-hurts-a .navframe-a-bar {
    min-height: 36px;
    padding-block: 7px;
  }

  #where-it-hurts-a .ipc-navigator .navigator {
    --navigator-row: clamp(440px, calc(100svh - 320px), 560px);
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #where-it-hurts-a .ipc-navigator .navigator__header {
    margin-bottom: 12px;
  }

  #where-it-hurts-a .ipc-navigator .navigator__intro h2.nav-display {
    max-width: none;
    font-size: 3rem;
    line-height: 1;
    white-space: nowrap;
  }

  #where-it-hurts-a .ipc-navigator .navigator__intro > p {
    max-width: 760px;
    margin-top: 6px;
    margin-bottom: 0;
    font-size: .9375rem;
    line-height: 1.45;
  }

  #where-it-hurts-a .ipc-navigator .navigator__measure {
    margin-top: 5px;
  }

  #where-it-hurts-a .ipc-navigator .navigator__experience {
    grid-template-rows: var(--navigator-row);
    min-height: 0;
  }

  #where-it-hurts-a .ipc-navigator .region-index__label,
  #where-it-hurts-a .ipc-navigator .condition-folio__label {
    margin-bottom: 10px;
  }

  #where-it-hurts-a .ipc-navigator .region-choice {
    min-height: 56px;
    padding: 8px 8px 8px 22px;
  }

  #where-it-hurts-a .ipc-navigator .region-choice__copy { gap: 3px; }

  #where-it-hurts-a .ipc-navigator .region-choice strong,
  #where-it-hurts-a .ipc-navigator .region-choice.is-active strong {
    font-size: 1rem;
  }

  #where-it-hurts-a .ipc-navigator .anatomy-stage {
    height: var(--navigator-row);
    min-height: var(--navigator-row);
    transform: none;
  }

  #where-it-hurts-a .ipc-navigator .anatomy-stage__well {
    top: 6%;
    bottom: 6%;
    max-height: 400px;
  }

  #where-it-hurts-a .ipc-navigator .figure-stack {
    height: clamp(340px, calc(100svh - 420px), 380px);
    max-height: none;
    margin-top: 18px;
  }

  #where-it-hurts-a .ipc-navigator .condition-folio {
    padding-top: 0;
  }

  #where-it-hurts-a .ipc-navigator .condition-folio::before {
    width: 42px;
    margin-bottom: 12px;
  }

  #where-it-hurts-a .ipc-navigator .condition-panel__heading {
    padding-bottom: 8px;
  }

  #where-it-hurts-a .ipc-navigator .condition-panel__heading h2 {
    font-size: clamp(1.8rem, 2.2vw, 2.15rem);
    line-height: 1;
  }

  #where-it-hurts-a .ipc-navigator .condition-panel__heading span {
    margin-top: 8px;
  }

  #where-it-hurts-a .ipc-navigator .condition-panel__summary {
    margin: 10px 0;
    font-size: .86rem;
    line-height: 1.45;
  }

  #where-it-hurts-a .ipc-navigator .condition-panel__links a {
    min-height: 48px;
    padding: 9px 2px;
  }

  #where-it-hurts-a .ipc-navigator .condition-panel__cue {
    margin-top: 10px;
    padding-left: 15px;
    font-size: .68rem;
    line-height: 1.4;
  }
}

/* --------------------------------------------------------------------------
   (14) ROUND 16k -- consistent section rhythm, no numbering, no green thread,
        and the crisis bar gated behind the reviews on the FRONT PAGE only.
   -------------------------------------------------------------------------- */

/* (a) "the padding is totally inconsistant across this page, the bottom of the
       treatment option section has huge padding then this clinic card section
       has virtually 0 padding and is touching the top its bounds."
   MEASURED in-browser at 1280x720 (round 17): .stn-a runs 84/84 and .close-a
   84/84, while the Codex transplants -- .clinics and .patient-guide, both
   carrying .section-pad -- run 0/0. That is the whole inconsistency.

   ROOT CAUSE, and it is NOT what round 16k assumed. Three attempts there tried
   to out-specify `.cdx .section-pad` (0,2,0) and all three measured as no-ops,
   because that is not the rule that wins. The winner lives in cdx-clinics.css:

     .cdx :is(.physician-section, .cdx .treatments, .cdx .explorer-intro,
              .cdx .clinics, .cdx .patient-guide).section-pad
       { padding-block: var(--section-rhythm); }

   `:is()` takes the specificity of its MOST SPECIFIC ARGUMENT -- `.cdx .clinics`
   (0,2,0) -- so the full selector is `.cdx` + :is() + `.section-pad` = (0,4,0).
   That is double anything this sheet was offering, and load order never enters
   into it. Then the second half: `--section-rhythm` is declared NOWHERE in the
   build, so `padding-block: var(--section-rhythm)` is INVALID AT COMPUTED-VALUE
   TIME and padding-block falls back to its initial value -- 0. Which is the
   measured 0/0, exactly.

   So the fix is not a fourth selector. It is to DEFINE the token the donor's
   own rule already consumes. The rule then does the right thing on its own.

   Declared on :root, NOT bound to var(--a-rhythm): --a-rhythm is scoped to
   .opt-a, and .cdx is a SIBLING of .opt-a, not a descendant (marker order is
   cdx / opt-a / cdx / opt-a). Probed live -- --a-rhythm reads 84px on .stn-a
   and UNSET on .clinics and .patient-guide, so `var(--a-rhythm)` here would be
   unresolvable and would re-create this very bug.

   The `cdx-base.css:1233` suspect recorded in #105 is a DEAD END: that rule is
   inside @media (max-width:760px) and cannot govern a desktop measurement.

   ROUND 17b -- 84 -> 72 at the owner's call ("looks like its a bit too much,
   the padding should be reduced just a smidge"). For the record, this is NOT a
   deviation from RRWEBSITE: RR's own live stylesheet runs .section 96px,
   .conditions-wrap / .reviews-section 80px, .svc-entry 64px (48px responsive)
   and .why-strip 48px -- a SCALE, not one number, and 84 already sat below its
   primary .section. 72/48 stays inside that family.

   ONE number now drives BOTH section families. The first cut declared the
   Meridian literals a second time here and gated the two copies for equality;
   that is a duplicate kept in step by a gate, which is better than a comment
   but still two numbers. Instead --a-rhythm is RE-POINTED at this token on
   .opt-a below (equal specificity, later sheet wins), so .stn-a and the .cdx
   transplants cannot drift by construction rather than by assertion.
   The donor sandbox that declares --a-rhythm: 84px is left untouched, per the
   standing instruction to leave every donor intact. */
:root {
  --section-rhythm:        72px;
  --section-rhythm-mobile: 48px;
}
/* .opt-a's own --a-rhythm (meridian-a.css, same 0,1,0 specificity, earlier
   sheet) is superseded here so the Meridian stations read the token above.
   --section-rhythm is on :root and inherits into .opt-a, so it resolves. */
.opt-a {
  --a-rhythm:       var(--section-rhythm);
  --a-rhythm-tight: var(--section-rhythm-mobile);
}
.opt-a .close-a { padding-top: var(--section-rhythm); padding-bottom: var(--section-rhythm); }
@media (max-width: 760px) {
  .opt-a .close-a {
    padding-top: var(--section-rhythm-mobile);
    padding-bottom: var(--section-rhythm-mobile);
  }
}

/* (b) "remove the numbering" -- the 01-05 folios. They indexed the station
   strip that round 16h removed, so they have been numbering against nothing
   since. */
.opt-a .stn-a-no { display: none; }

/* (c) "remove the random green vertical line in the center of some sections."
   That is `.thread-a`, described in the donor's own stylesheet as "the green
   signal thread that stitches the NUMBERED descent together" -- so it is the
   numbering's companion and goes with it. Removing one and keeping the other
   would leave a connector joining nothing. */
.opt-a .thread-a { display: none; }

/* (d) the crisis bar is gated by JS below; this is the hidden state. Kept as
   a visual state rather than `display:none` so the bar can transition, and so
   nothing reflows when it appears. */
.opt-a .crisis-a[data-crisis-gated] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
}
@media (prefers-reduced-motion: no-preference) {
  .opt-a .crisis-a { transition: opacity .25s ease, transform .25s ease; }
}

/* --------------------------------------------------------------------------
   (15) ROUND 17 -- "i dont even thing the title 'Our clinic locations' in
        neccesary fore this section. it speaks for itself."
   -------------------------------------------------------------------------- */

/* The heading is HIDDEN, not DELETED, and the distinction is load-bearing:

     <section class="clinics section-pad" id="clinics"
              aria-labelledby="clinics-title">

   names itself THROUGH this h2. Delete the element and that reference dangles,
   so the section has no accessible name at all -- a screen-reader user loses
   the one thing that identifies this block while sighted users lose nothing.
   It is also this block's only entry in the document outline, and the page's
   only on-page "clinic locations" string for local search, which is the whole
   commercial point of the section.

   Clipped rather than `display:none` for the same reason, and this is the part
   that is easy to get wrong: display:none removes the element from the
   accessibility TREE, and an aria-labelledby pointing at a display:none
   element resolves to no name -- visually identical, silently broken. Clipping
   takes it off the screen while leaving it nameable.

   Not reusing .sr-a: that utility is scoped .opt-a and this section is inside
   .cdx, a SIBLING of .opt-a, so it does not reach here. */
.cdx .section-heading--clinics h2 {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* ROUND 17c -- "the section should just start with the location cards without
   text above them." The description is now deleted in the generator, so this
   head holds ONLY the clipped h2 and must occupy no space at all.

   Its box cannot simply be removed: the h2 is position:absolute and resolves
   its static position inside this element, and the section still names itself
   through that h2. So the container stays and is reduced to zero height --
   display:block (the two-column grid is gone with the description) with its
   own margins zeroed. */
.cdx .section-heading--clinics {
  display: block;
  margin: 0;
  padding: 0;
}
/* The cards carried margin-top:74px to clear the head. With the head empty
   that 74px stacks on top of the section's own 72px rhythm and reads as a
   large dead band above the first card -- exactly the "text above them" gap
   the owner is removing. The section's padding is the only spacing now. */
.cdx .clinics .clinic-panorama {
  margin-top: 0;
}

/* ROUND 17b -- the optional email field's "(optional)" marker. It rides inside
   the <label> so assistive tech announces it as part of the field name; this
   only makes it read as secondary to the sighted eye.

   The FALLBACK is not decoration. The first cut used var(--steel-dark), which
   is a .cdx token -- and this form is in .opt-a, the SIBLING scope, so the
   token was unset, the declaration was invalid at computed-value time, and
   because `color` INHERITS the marker silently rendered navy, byte-identical
   to the label it was supposed to sit behind. Measured, not noticed by reading:
   computed color came back rgb(0,7,109). Exactly the #105 mechanism -- an
   undefined custom property fails silently -- so every cross-scope var() here
   carries a literal fallback that is the real value, never a guess.
   --a-text-light resolves in .opt-a; #4A5568 on the white card measures
   7.52:1, above the 4.5 floor for text this size (11.8px). */
.appointment-form .form-optional {
  font-weight: 500;
  color: var(--a-text-light, #4A5568);
  font-size: .92em;
}

/* --------------------------------------------------------------------------
   (18) THE ROOT COLOUR CONTRACT -- why a page that is correct on every desktop
        can render inverted on a real phone.

   REPORTED 2026-08-13 by the owner, from a phone: black background, white
   headline, a grey box behind the logo -- while the green CTA, the navy
   identity plate and the portrait were untouched. That split is the signature:
   everything with an EXPLICIT colour survived, everything relying on a default
   flipped.

   MEASURED on the live page, not inferred from reading CSS:
       getComputedStyle(html).backgroundColor -> rgba(0, 0, 0, 0)
       getComputedStyle(body).backgroundColor -> rgba(0, 0, 0, 0)
   and a CSSOM walk of all ten loaded sheets returned ZERO rules declaring
   background-color, color or color-scheme on html/body/:root, and ZERO
   prefers-color-scheme blocks. The page never paints its own ground. In light
   mode the UA's white shows through and the result is correct -- which is
   exactly why every gate, every desktop check and the first mobile capture all
   passed. The defect is invisible until a browser decides to supply its own
   ground.

   Browsers apply heuristic dark-mode patches to any page that does not DECLARE
   its supported schemes: inverting UA-default surfaces, and painting an opaque
   grey rectangle BEHIND transparent PNG logos so they stay visible.
   `ipc-logo-icon-white.png` is a transparent PNG -- that is the grey box.

   RRWEBSITE shipped this same bug and mis-diagnosed it once (2026-05-02): the
   owner reported "a white box around the logo", the first fix made the mobile
   topbar transparent, it verified clean IN LIGHT MODE, and the owner came back
   with the box still present under system dark mode. The real cause was never
   the topbar. One declaration closed it there; this is that declaration.

   DELIBERATELY PINNED, NOT ADAPTIVE. `color-scheme: light` says "this page has
   one scheme, do not patch it". IPC has no dark theme built, so claiming
   `light dark` would invite the UA to invert surfaces we have never designed.

   FALLBACKS ARE REAL VALUES, per this file's standing rule. --bg/--ink resolve
   on :root only because frozen-header.css -- a GENERATED sheet whose token
   block is extracted from page.css's :root -- happens to publish them there;
   cdx-base.css scopes its own --ink to `.cdx`, which html/body are outside of.
   If that extraction ever changes shape these literals are what keeps the page
   painted, so they are the measured values (#FFFFFF / #0B1020), never a guess.

   NOTE the background is set on html AND body. RRWEBSITE sets it on body only,
   which leaves iOS rubber-band overscroll flashing the UA default past the end
   of the document. Setting html too is strictly better than what RR shipped. */
:root { color-scheme: light; }
html {
  background-color: var(--bg, #FFFFFF);
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
body {
  background-color: var(--bg, #FFFFFF);
  color: var(--ink, #0B1020);
}

/* --------------------------------------------------------------------------
   (19) THE MOBILE HERO REACHES THE SCREEN EDGES.

   REPORTED alongside (18): "the hero picture doesn't reach the left and right
   side". MEASURED at 375px: 31.6px of dead space per side, from TWO unrelated
   sources that have nothing to do with the hero --

     14.0px  the --shell width cap. cdx-base.css:1415 takes --shell to
             calc(100% - 28px) at <=430, and `.cdx .shell` centres it.
     17.6px  frozen-header.css's BARE `.shell { padding: 0 2rem }` (1.1rem at
             <=480). That rule is (0,1,0) and carries no `.hp-header` scope, so
             the HEADER sheet is padding page components. It reaches
             .hero__inner, .location-panel__inner and .gallery-spread.
             `.cdx .shell` only ever declares width and margin-inline, so it
             never resets that padding and the header's value survives.

   Fixing this AT SOURCE means dropping "shell" from build-hybrid.py's frozen
   extraction WANT list -- but the header markup contains no `.shell` element at
   all (verified against index.html), so the rule serves nothing in the header
   and removing it would silently widen three components on DESKTOP too. That
   is a live-site visual change and a separate owner decision, deliberately not
   smuggled into a mobile pass. Recorded rather than done.

   So this is scoped to the hero, at the phone breakpoint this project already
   uses (760 -- NOT a new number; RR's documented mistake was accumulating
   twelve near-duplicate breakpoints). `.cdx .hero__inner.shell` is (0,3,0) and
   beats both `.cdx .shell` (0,2,0) and the bare `.shell` (0,1,0) on merit, so
   it does not depend on this sheet loading last.

   The COPY keeps its own gutter -- full-bleed is wanted for the figure, never
   for the text. */
@media (max-width: 760px) {
  .cdx .hero__inner.shell {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .cdx .hero__inner.shell > .hero__copy { padding-inline: 18px; }
}

/* --------------------------------------------------------------------------
   (20) THE PRACTICE NAME COMES BACK TO THE MOBILE NAVBAR.

   REPORTED by the owner: "the navbar on mobile is still blank without the
   clinics name or anything but the logo". Correct -- MEASURED at 375px, the
   72px bar contained a 34.7px logo mark and a 46px hamburger and nothing else.
   franken-header.css:268 hides .hp-logo-text at <=560, and :271 hides the green
   Book CTA at <=480, so below 480 the header carries no name, no phone control
   and no booking control.

   The hide was DELIBERATE, commented "the wordmark would wrap", and that was
   true as the bar was built. Measured with a text Range on the real font
   (Archivo 780 @ 16.32px) rather than on the block box, which is the mistake
   this project already made once when it flagged a clipped name:

       wordmark  "Interventional Pain Consultants"   234.5px
       tagline   "North Georgia - East Tennessee"    239.0px   <- the WIDER line
       room available in the bar at 375px            ~195px

   So the previous session was right, and hiding was the wrong remedy: the room
   was being spent on padding, not on the name. The row runs 25.6px of inline
   padding and a 24px flex gap (two gaps, since the zero-width .hp-header-cta
   still takes one). Tightening both on phones returns ~47px, and the name fits.

   THE TAGLINE STAYS HIDDEN. It is the wider of the two lines AND it renders at
   9.28px, below any readable floor -- restoring it would re-introduce the type
   defect this pass exists to remove.

   NO white-space:nowrap. A nowrap wordmark that does not fit does not wrap, it
   OVERFLOWS, which is the failure this file already documents at 107px on
   another project. The clamp is sized so it sits on one line at >=360px and is
   free to fall to a second line on a 320px phone rather than bleed. Checked:
     360px -> 13.7px type -> 197px wide vs ~212px free -> one line
     375px -> 14.3px type -> 205px wide vs ~242px free -> one line

   COLOUR: the wordmark is white because the bar is currently the dark
   translucent rgba(9,12,20,.74). If that bar becomes light or brand-navy -- the
   next item on the mobile list -- this colour must move with it. Flagged rather
   than pre-empted, because the bar's treatment is an owner call. */
@media (max-width: 560px) {
  .hp-header .hp-header-row { padding-inline: 14px; gap: 12px; }
  /* .hp-logo ships `flex: 0 0 auto`. min-width:0 alone is INERT against that --
     shrinking has to be permitted before a min-width floor can matter, and the
     first cut of this block set only min-width and pushed the page 15-38px wide
     at every width tested. The mark itself keeps flex-shrink:0 so the shrink is
     spent on the text, which is what may wrap; the logo never squashes. */
  .hp-header .hp-logo { min-width: 0; flex-shrink: 1; gap: 10px; }
  .hp-header .hp-logo img { flex-shrink: 0; }
  .hp-header .hp-logo-text { display: block; min-width: 0; }
  .hp-header .hp-logo-text b {
    font-size: clamp(12px, 3.8vw, 16.32px);
    line-height: 1.15;
  }
  .hp-header .hp-logo-text span { display: none; }
}

/* --------------------------------------------------------------------------
   (21) "PREPARE FOR YOUR FIRST VISIT" -- the heading printed THROUGH the copy.

   Owner: "the header text is overlapping the subtext". Confirmed by SCREENSHOT,
   and worth recording that a box-intersection probe returned ZERO overlaps for
   this section: the element BOXES do not overlap, the GLYPHS overflow their
   box. Box-overlap is the wrong instrument for an oversized heading in a narrow
   column -- only the render shows it.

   Cause: the section keeps its DESKTOP two-column split on phones (heading
   left, description right) while cdx-guide.css:234 takes the h2 to
   clamp(2.55rem, 11.5vw, 3.7rem) -- ~43px at 375px. A 43px serif cannot sit in
   a half-width column, so "Prepare"/"for"/"your" bleed across the paragraph.

   Fix: stack the header at <=760 and let the heading own the full width, with
   the type re-clamped to something a phone column can actually hold.

   FIRST CUT MISSED, recorded because the failure is the instructive part: it
   targeted .section-heading / .guide-head / .patient-guide__head, none of which
   exist on this page, and it read as a clean edit that changed nothing. The
   real container is `header.gallery-spread__heading.patient-guide__copy`, and
   the mechanism is not the font size at all -- that header is a GRID running
   `grid-template-columns: 42px 252px`, so the h2 is laid into a 42px column
   while its glyphs measure 148.5px. Collapsing the grid is the fix; the type
   re-clamp is secondary. Selectors below are pinned to the measured DOM. */
@media (max-width: 760px) {
  .cdx .patient-guide .gallery-spread__heading,
  .cdx .patient-guide .patient-guide__copy {
    display: block;
    grid-template-columns: 1fr;
  }
  .cdx .patient-guide .gallery-spread__heading h2 {
    font-size: clamp(1.9rem, 8.2vw, 2.55rem);
    line-height: 1.08;
    max-width: 100%;
    margin-bottom: .6rem;
  }
  .cdx .patient-guide .gallery-spread__heading p { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   (22) THE BODY MAP LOSES ITS GRAPHIC ON PHONES, BUT KEEPS ITS LINKS.

   Owner: "I don't think the body map should even be available on mobile, it
   looks really bad". Agreed on the graphic -- it renders 2,168px tall at 375px.

   NOT hidden wholesale, and this is the load-bearing part: its 17 condition
   links (/condition/neck-pain, sciatica, radiculopathy, neuropathy, CRPS,
   arthritis ...) were MEASURED to exist NOWHERE ELSE on the page -- not in the
   mobile menu, not in the desktop nav. display:none on the band would strand
   all 17 on the device most patients arrive on. So the interactive stage goes
   and the navigation survives.

   SCOPE, measured not assumed: the navigator is NOT under .cdx. Its chain is
   .anatomy-stage > .navigator__experience > .navigator > .ipc-navigator >
   .ipc-navigator-band > .stn-a > .main-a > .opt-a. A first cut prefixed these
   with `.cdx ` and matched nothing at all.

   OWNER RULING 2026-08-13, superseding the partial hide above: "until i think
   of something else, hide it completely and mark it as return to later." So the
   whole band goes at <=760, not just its graphic. Filed as docket #111.

   THE COST IS ACCEPTED, NOT UNKNOWN, and is recorded here so the next reader
   does not have to re-derive it: 17 condition links live in this band and were
   MEASURED to exist nowhere else in the document. display:none keeps them in
   the DOM and therefore crawlable, but no phone visitor can reach them from the
   homepage. That is the trade the owner took knowingly, pending a replacement.

   HIDE THE FRAME, NOT JUST THE BAND. A first cut targeted .ipc-navigator-band
   alone and left 71px behind -- its sibling `.navframe-a-bar`, a caption reading
   "Body map - 6 systems - 17 conditions". An orphaned caption for a component
   that is no longer on the page is worse than the empty strip it sits in, so
   the whole .navframe-a frame goes and .shell-a (its only child) collapses with
   it. Verified: 0px rendered, and the desktop band is untouched at 901px. */
@media (max-width: 760px) {
  .navframe-a { display: none; }
}

/* ---------- IPC brand patterns (owner-approved logo tiles, 2026-08-22) ----------
   Decorative only. Reproducible sources: sandbox/ipc-logo-tiles/build-*.ps1
   (deterministic, hash-verified); tracked production copies live at
   site/img/brand-patterns/. The layer rides ::after (the mobile hero's ::before
   is its dot texture) at z-index:-1 inside the section's own isolated stacking
   context -- above the surface color, below all content. No blend modes, no
   filters, no animation, no JS. */
.ipc-pattern { position: relative; isolation: isolate; }
.ipc-pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  pointer-events: none;
  z-index: -1;
}
.ipc-pattern--light::after {
  background-image: url("/img/brand-patterns/staggered-signal-light.png");
  background-size: 480px;
  opacity: 0.05;
}
.ipc-pattern--midnight::after {
  background-image: url("/img/brand-patterns/midnight-signal.webp");
  background-size: 360px;
  opacity: 0.06;
}
/* Keeps the midnight tile in the hero's copy field and off the portrait below
   it -- the same placement device as the hero's own dot texture (a mask used
   for placement, not to disguise the tile). */
.ipc-pattern--fade::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 24%, transparent 52%);
  mask-image: linear-gradient(to bottom, #000 24%, transparent 52%);
}
@media (max-width: 760px) {
  .ipc-pattern--light::after { background-size: 350px; }
}
/* The patient-guide's markup is extracted by build-hybrid on an anchor that
   includes its exact class attribute, so the light pattern composes here by
   SELECTOR rather than by adding .ipc-pattern--light in the donor (a class
   edit would break the extraction anchor). Same layer contract as the system
   above. */
.cdx .patient-guide { position: relative; isolation: isolate; }
.cdx .patient-guide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/img/brand-patterns/staggered-signal-light.png") repeat;
  background-size: 480px;
  opacity: 0.05;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 760px) {
  .cdx .patient-guide::after { background-size: 350px; }
}


/* ---- donor: sandbox/homepage-final/mobile-front.css ---- */
/* Mobile/desktop root selector.

   The accepted phone design is emitted as .mobile-exact-root by
   build-hybrid.py and receives its own accepted stylesheet verbatim. The
   existing generated homepage remains the desktop document. Keeping this
   boundary small is intentional: visual rules belong to the accepted source,
   not to another compatibility layer over unrelated markup. */

.mobile-exact-root {
  display: none;
}

@media (max-width: 760px) {
  body > .hp-header,
  body > .cdx,
  body > .opt-a {
    display: none !important;
  }

  body > .mobile-exact-root {
    display: block !important;
  }
}


/* ---- donor: sandbox/mobile-hero-alternative/mobile-hero-alt.css [wrapped in @media (max-width: 760px)] ---- */
@media (max-width: 760px) {
:root {
  --navy: #00076d;
  --navy-deep: #061039;
  --navy-ink: #07112f;
  --green: #53ba00;
  --paper: #f3f5fa;
  --white: #f8f9ff;
  --muted: #b9c3dc;
  --line: rgba(233, 237, 255, 0.18);
  --display: "Playfair Display", Georgia, serif;
  --sans: "Inter", "Segoe UI", sans-serif;
  --wide: "Archivo", "Arial Narrow", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: #dfe4ef;
  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: #dfe4ef;
  color: var(--white);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid #9be557;
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.prototype {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin-inline: auto;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--navy-deep);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(11px, env(safe-area-inset-top)) 18px 10px;
  border-bottom: 1px solid var(--line);
  background: #08123b;
}

.brand {
  display: inline-flex;
  min-height: 44px;
  min-width: 0;
  align-items: center;
  gap: 11px;
  color: var(--white);
  text-decoration: none;
}

.brand img {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand__text {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.brand__text strong {
  overflow: hidden;
  font-family: var(--wide);
  font-size: 0.76rem;
  font-stretch: 92%;
  font-weight: 720;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand__text small {
  color: var(--green);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu-toggle {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-content: center;
  gap: 5px;
  border: 1px solid rgba(242, 245, 255, 0.28);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.menu-toggle span[aria-hidden] {
  display: block;
  width: 19px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.menu-toggle[aria-expanded="true"] span[aria-hidden]:nth-of-type(2) {
  transform: translateY(6.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span[aria-hidden]:nth-of-type(3) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span[aria-hidden]:nth-of-type(4) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-nav {
  position: absolute;
  z-index: 19;
  top: 76px;
  right: 0;
  left: 0;
  display: grid;
  padding: 12px 18px 18px;
  border-bottom: 1px solid var(--line);
  background: #08123b;
  box-shadow: 0 18px 36px rgba(0, 2, 22, 0.32);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav a,
.mobile-nav button {
  min-height: 48px;
  padding: 13px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--white);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.mobile-nav button {
  margin-top: 10px;
  padding-inline: 16px;
  border: 0;
  background: var(--green);
  color: var(--navy-ink);
  text-align: center;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: calc(100svh - 76px);
  grid-template-rows: auto minmax(286px, 1fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 66%, rgba(48, 75, 153, 0.62) 0, rgba(21, 41, 103, 0.22) 29%, transparent 53%),
    linear-gradient(152deg, #08133e 0%, #050c2c 58%, #020821 100%);
}

.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(rgba(223, 229, 255, 0.13) 0.65px, transparent 0.65px);
  background-size: 9px 9px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 50%);
  content: "";
  opacity: 0.34;
}

.hero__trajectory {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__trajectory path {
  fill: none;
  stroke: rgba(105, 207, 29, 0.34);
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  stroke-width: 1.2;
}

.hero__copy {
  position: relative;
  z-index: 4;
  padding: 24px 22px 0;
}

.availability {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 15px;
  color: #cfddc5;
  font-family: var(--wide);
  font-size: 0.67rem;
  font-stretch: 105%;
  font-weight: 720;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.availability span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64cc0d;
  box-shadow: 0 0 0 5px rgba(83, 186, 0, 0.12);
}

.hero h1 {
  max-width: none;
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2.45rem, 10.75vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-wrap: balance;
}

.hero h1 span {
  display: block;
}

.hero__region {
  max-width: 25ch;
  margin: 17px 0 0;
  padding-left: 13px;
  border-left: 1px solid var(--green);
  color: #e7eaff;
  font-family: var(--wide);
  font-size: 0.95rem;
  font-stretch: 103%;
  font-weight: 650;
  letter-spacing: 0.005em;
  line-height: 1.28;
}

.hero__lede {
  max-width: 37ch;
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.5;
}

.hero__actions {
  display: grid;
  gap: 7px;
  margin-top: 20px;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  cursor: pointer;
}

.button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.button--primary {
  min-height: 56px;
  width: 100%;
  padding: 14px 20px;
  background: var(--green);
  color: var(--navy-ink);
  font-family: var(--wide);
  font-size: 0.82rem;
  font-stretch: 110%;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 14px 32px rgba(52, 126, 0, 0.21);
}

.button--primary svg {
  margin-left: auto;
}

.button--quiet {
  justify-self: center;
  padding: 10px 16px;
  background: transparent;
  color: #e2e6fa;
  font-size: 0.93rem;
  font-weight: 650;
}

.button--quiet svg {
  width: 18px;
  height: 18px;
}

/* The portrait band and the portrait inside it are both sized in ABSOLUTE px on
   purpose. They used to be viewport-height-derived, and the hero that clips this
   figure is min-height:calc(100svh - 76px) -- so the container tracked the SMALL
   viewport (URL bar showing) while the image tracked the LARGE one (bar hidden).
   On a desktop browser svh == lvh == dvh, so the mismatch is invisible to every
   gate we have; on a phone they differ by the URL bar, the image outgrows its
   own band as the bar collapses, and Dr Hare's head is clipped up behind the
   "Call now" button. Owner-reported 2026-08-14. Keep these two values in px. */
.hero__portrait {
  position: relative;
  z-index: 2;
  min-height: 348px;
  margin: 2px 0 0;
  overflow: hidden;
}

.portrait__halo {
  position: absolute;
  z-index: 0;
  right: -22%;
  bottom: -22%;
  width: 108%;
  aspect-ratio: 1;
  border: 1px solid rgba(200, 211, 255, 0.19);
  border-radius: 50%;
  background: rgba(31, 54, 128, 0.23);
  box-shadow:
    0 0 0 28px rgba(39, 61, 137, 0.08),
    0 0 0 58px rgba(39, 61, 137, 0.045);
}

.portrait__crosshair {
  position: absolute;
  z-index: 1;
  right: 17%;
  top: 9%;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(119, 215, 48, 0.34);
  border-radius: 50%;
}

.portrait__crosshair::before,
.portrait__crosshair::after {
  position: absolute;
  background: rgba(119, 215, 48, 0.34);
  content: "";
}

.portrait__crosshair::before {
  top: 50%;
  right: -7px;
  left: -7px;
  height: 1px;
}

.portrait__crosshair::after {
  top: -7px;
  bottom: -7px;
  left: 50%;
  width: 1px;
}

.hero__portrait img {
  position: absolute;
  z-index: 2;
  right: -4%;
  bottom: -2px;
  width: auto;
  height: 365px;
  min-height: 300px;
  object-fit: contain;
  filter: saturate(0.9) contrast(1.015);
}

.hero__portrait::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(3, 9, 33, 0.72));
  content: "";
  pointer-events: none;
}

.hero__portrait figcaption {
  position: absolute;
  z-index: 4;
  bottom: 24px;
  left: 22px;
  display: grid;
  gap: 4px;
  max-width: 55%;
  padding: 2px 0 2px 12px;
  border-left: 1px solid var(--green);
  text-shadow: 0 2px 14px #02071e;
}

.hero__portrait figcaption strong {
  color: var(--white);
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.hero__portrait figcaption span {
  color: #b9c3dc;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.3;
  text-transform: uppercase;
}

.sandbox-stamp {
  position: fixed;
  z-index: 50;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  margin: 0;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(5, 12, 44, 0.76);
  color: rgba(242, 245, 255, 0.7);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.clinic-sheet {
  position: fixed;
  z-index: 100;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: min(100%, 480px);
  max-height: min(88vh, 720px);
  margin: auto auto 0;
  padding: 10px 20px max(24px, env(safe-area-inset-bottom));
  overflow: auto;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--paper);
  color: var(--navy-ink);
  box-shadow: 0 -20px 60px rgba(0, 2, 22, 0.32);
}

.clinic-sheet[open] {
  animation: sheet-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.clinic-sheet::backdrop {
  background: rgba(0, 4, 30, 0.7);
  backdrop-filter: blur(3px);
}

.sheet__handle {
  width: 42px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 4px;
  background: #c6cbd6;
}

.sheet__heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.sheet__heading p {
  margin: 0 0 5px;
  color: #5f687c;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sheet__heading h2 {
  margin: 0;
  color: var(--navy-ink);
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.sheet__close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid #cbd1de;
  border-radius: 50%;
  background: transparent;
  color: var(--navy-ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.clinic-list {
  display: grid;
  margin-top: 19px;
  border-top: 1px solid #d9dee8;
}

.clinic-list a {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #d9dee8;
  color: var(--navy-ink);
  text-decoration: none;
}

.clinic-list a span {
  font-weight: 650;
}

.clinic-list a strong {
  color: var(--navy);
  font-size: 0.86rem;
  white-space: nowrap;
}

.sheet__foot {
  margin: 15px 0 0;
  color: #666f81;
  font-size: 0.76rem;
  line-height: 1.45;
}

@keyframes sheet-in {
  from { transform: translateY(22px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 359px) {
  .site-header {
    padding-inline: 14px;
  }

  .brand__text strong {
    max-width: 188px;
    font-size: 0.7rem;
  }

  .brand__text small {
    font-size: 0.52rem;
  }

  .hero__copy {
    padding-inline: 18px;
  }

  .hero h1 {
    font-size: 2.52rem;
  }

  .hero__lede {
    font-size: 0.86rem;
  }

  .hero__portrait figcaption {
    left: 18px;
  }
}

@media (min-width: 600px) {
  body {
    padding: 28px;
  }

  .prototype {
    width: 430px;
    min-height: calc(100dvh - 56px);
    border-radius: 20px;
    box-shadow: 0 30px 90px rgba(16, 24, 54, 0.28);
  }

  .hero {
    min-height: 790px;
  }

  .sandbox-stamp {
    right: calc(50% - 207px);
    bottom: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   FULL MOBILE HOMEPAGE STUDY
   Extends the approved hero through the complete patient journey. The page
   remains deliberately narrow on larger screens because this is a mobile
   composition study, not a replacement desktop design.
   ========================================================================== */

:root {
  --surface-paper: oklch(0.975 0.008 274);
  --surface-mist: oklch(0.935 0.018 274);
  --surface-navy: oklch(0.245 0.105 270);
  --surface-night: oklch(0.18 0.075 270);
  --ink: oklch(0.22 0.06 270);
  --ink-soft: oklch(0.48 0.035 270);
  --line-light: oklch(0.83 0.018 274);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;
}

main {
  background: var(--surface-paper);
  color: var(--ink);
}

.full-page-section {
  position: relative;
  scroll-margin-top: 76px;
}

.section-shell {
  width: 100%;
  padding-inline: 22px;
}

.section-kicker {
  margin: 0;
  color: var(--navy);
  font-family: var(--wide);
  font-size: 0.67rem;
  font-stretch: 108%;
  font-weight: 780;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.section-heading {
  display: grid;
  gap: var(--space-lg);
}

.section-heading h2,
.proof h2,
.final-cta h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.25rem, 10.2vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.section-heading > p:last-child {
  max-width: 37ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.62;
}

.section-heading--split {
  gap: var(--space-xl);
}

.text-action {
  display: inline-flex;
  min-height: 46px;
  width: max-content;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.section-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  color: var(--navy);
  font-weight: 750;
  text-decoration: none;
}

/* Patient proof: the hero resolves into one dark trust chapter. */
.proof {
  overflow: hidden;
  padding-block: 58px 56px;
  background: #071039;
  color: #f3f5ff;
}

.proof::before {
  position: absolute;
  top: 0;
  right: -44%;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid rgba(205, 214, 255, 0.14);
  border-radius: 50%;
  content: "";
}

.proof__heading {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-2xl);
}

.proof .section-kicker {
  margin-bottom: var(--space-md);
  color: #add88a;
}

.proof h2 {
  color: #f6f7ff;
}

.proof__score {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 var(--space-lg);
  padding-block: var(--space-xl);
  border-block: 1px solid rgba(224, 229, 255, 0.17);
}

.proof__score > strong {
  grid-row: 1 / 3;
  color: #f7f8ff;
  font-family: var(--display);
  font-size: 3.5rem;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.proof__stars,
.review-card__stars {
  color: #74cc2d;
  letter-spacing: 0.1em;
}

.proof__score small {
  color: #bdc7e1;
  font-size: 0.76rem;
  line-height: 1.35;
}

.review-rail,
.location-photo-rail {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: var(--space-2xl) 22px var(--space-lg);
  scroll-padding-inline: 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.review-rail::-webkit-scrollbar,
.location-photo-rail::-webkit-scrollbar {
  display: none;
}

.review-card {
  display: grid;
  min-height: 300px;
  flex: 0 0 calc(100% - 54px);
  align-content: space-between;
  gap: var(--space-xl);
  padding: 26px 24px 24px;
  border: 1px solid rgba(224, 229, 255, 0.16);
  border-radius: 0 30px 0 0;
  background: #0d1949;
  scroll-snap-align: start;
}

.review-card blockquote {
  margin: 0;
  color: #eef1ff;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.42;
}

.review-card footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(224, 229, 255, 0.13);
  color: #bdc7e1;
  font-size: 0.72rem;
}

.review-card footer strong {
  color: #eef1ff;
}

.rail-hint {
  margin: var(--space-sm) 22px 0;
  color: #909dbc;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-align: right;
  text-transform: uppercase;
}

/* The desktop body map becomes a compact, complete disclosure index. */
.conditions {
  padding-block: 76px;
  background: var(--surface-paper);
}

.condition-list {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--line-light);
}

.condition-group {
  border-bottom: 1px solid var(--line-light);
}

.condition-group summary,
.insurance-disclosure summary,
.site-footer summary {
  list-style: none;
}

.condition-group summary::-webkit-details-marker,
.insurance-disclosure summary::-webkit-details-marker,
.site-footer summary::-webkit-details-marker {
  display: none;
}

.condition-group summary {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  color: var(--ink);
  cursor: pointer;
}

.condition-group summary > span {
  display: grid;
  gap: var(--space-xs);
}

.condition-group summary b {
  font-family: var(--wide);
  font-size: 1rem;
  font-stretch: 105%;
}

.condition-group summary small {
  color: var(--ink-soft);
  font-size: 0.73rem;
}

.condition-group summary i,
.insurance-disclosure summary i {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid var(--line-light);
  border-radius: 50%;
}

.condition-group summary i::before,
.condition-group summary i::after,
.insurance-disclosure summary i::before,
.insurance-disclosure summary i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.condition-group summary i::after,
.insurance-disclosure summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.condition-group[open] summary i::after,
.insurance-disclosure[open] summary i::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.condition-group__body {
  display: grid;
  padding: 0 0 var(--space-xl);
}

.condition-group__body p {
  margin: 0 0 var(--space-lg);
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
}

.condition-group__body a {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  border-top: 1px solid var(--line-light);
  color: var(--navy);
  font-size: 0.91rem;
  font-weight: 680;
  text-decoration: none;
}

/* Procedures are an editorial index, not eight stacked cards. */
.treatments {
  padding-block: 80px;
  background: var(--surface-mist);
}

.diagnosis-note {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-block: var(--space-xl);
  border-block: 1px solid color-mix(in oklch, var(--navy) 24%, transparent);
}

.diagnosis-note span {
  color: var(--navy);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.diagnosis-note h3,
.visit-facts h3,
.callback-panel__heading h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.diagnosis-note p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
}

.treatment-list {
  margin-top: var(--space-2xl);
  border-top: 1px solid color-mix(in oklch, var(--navy) 18%, transparent);
}

.treatment-item {
  border-bottom: 1px solid color-mix(in oklch, var(--navy) 18%, transparent);
}

.treatment-item a {
  display: grid;
  min-height: 124px;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: start;
  gap: var(--space-md);
  padding-block: 21px;
  color: var(--ink);
  text-decoration: none;
}

.treatment-item__number {
  padding-top: 2px;
  color: var(--navy);
  font-family: var(--wide);
  font-size: 0.68rem;
  font-weight: 800;
}

.treatment-item a > span:nth-child(2) {
  display: grid;
  gap: var(--space-xs);
}

.treatment-item small {
  color: var(--navy);
  font-size: 0.62rem;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.treatment-item strong {
  font-family: var(--wide);
  font-size: 1rem;
  font-stretch: 104%;
  line-height: 1.2;
}

.treatment-item em {
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-style: normal;
  line-height: 1.48;
}

.treatment-item a > i {
  color: var(--navy);
  font-style: normal;
}

.js .treatment-item[data-extra-treatment] {
  display: none;
}

.js .treatment-list.is-expanded .treatment-item[data-extra-treatment] {
  display: block;
}

.reveal-treatments {
  display: flex;
  min-height: 52px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xl);
  padding: 12px 16px;
  border: 1px solid color-mix(in oklch, var(--navy) 45%, transparent);
  background: transparent;
  color: var(--navy);
  font-weight: 740;
  cursor: pointer;
}

.treatment-foot {
  margin: var(--space-xl) 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.55;
}

.treatment-foot a {
  color: var(--navy);
  font-weight: 700;
}

/* Clinic photography carries the transition back into the brand navy. */
.locations {
  padding-block: 76px;
  overflow: hidden;
  background: #071039;
  color: #f3f5ff;
}

.locations .section-kicker {
  color: #add88a;
}

.locations .section-heading h2 {
  color: #f6f7ff;
}

.locations .text-action {
  color: #eef1ff;
}

.location-photo-rail {
  padding-top: var(--space-2xl);
}

.location-photo-rail > a {
  position: relative;
  min-height: 288px;
  flex: 0 0 calc(100% - 58px);
  overflow: hidden;
  background: #101a49;
  color: #f7f8ff;
  scroll-snap-align: start;
  text-decoration: none;
}

.location-photo-rail img {
  width: 100%;
  height: 100%;
  min-height: 288px;
  object-fit: cover;
}

.location-photo-rail > a::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 7, 30, 0.9), transparent 58%);
  content: "";
}

.location-photo-rail > a > span {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: grid;
  gap: var(--space-xs);
}

.location-photo-rail small {
  color: #c6cfeb;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.location-photo-rail strong {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.location-photo-rail em {
  color: #b9c3dc;
  font-size: 0.75rem;
  font-style: normal;
}

.location-directory {
  display: grid;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.location-directory section > h3 {
  margin: 0 0 var(--space-md);
  color: #add88a;
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.clinic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px;
  border-top: 1px solid rgba(224, 229, 255, 0.16);
}

.clinic-row:last-child {
  border-bottom: 1px solid rgba(224, 229, 255, 0.16);
}

.clinic-row > a {
  display: flex;
  min-height: 78px;
  align-items: center;
  color: #eef1ff;
  text-decoration: none;
}

.clinic-row > a:first-child {
  min-width: 0;
  justify-content: space-between;
  gap: var(--space-md);
  padding-right: var(--space-md);
}

.clinic-row > a:first-child span {
  display: grid;
  min-width: 0;
  gap: var(--space-xs);
}

.clinic-row b {
  font-family: var(--wide);
  font-size: 0.98rem;
}

.clinic-row small {
  overflow: hidden;
  color: #9eabc9;
  font-size: 0.66rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinic-row em {
  color: #aab5d1;
  font-size: 0.64rem;
  font-style: normal;
  white-space: nowrap;
}

.clinic-row > a:last-child {
  justify-content: center;
  border-left: 1px solid rgba(224, 229, 255, 0.16);
  color: #b6eb8d;
  font-size: 0.78rem;
  font-weight: 760;
}

/* A quiet paper checklist between choosing a clinic and booking. */
.first-visit {
  padding-block: 76px;
  background: var(--surface-paper);
}

.resource-list {
  padding: 0;
  margin: var(--space-2xl) 0 0;
  border-top: 1px solid var(--line-light);
  list-style: none;
}

.resource-list li {
  border-bottom: 1px solid var(--line-light);
}

.resource-list a {
  display: grid;
  min-height: 98px;
  grid-template-columns: 30px 1fr;
  align-content: center;
  gap: var(--space-xs) var(--space-md);
  color: var(--ink);
  text-decoration: none;
}

.resource-list a > span {
  grid-row: 1 / 3;
  color: var(--navy);
  font-size: 0.66rem;
  font-weight: 800;
}

.resource-list strong {
  font-family: var(--wide);
  font-size: 1rem;
}

.resource-list em {
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-style: normal;
}

/* Booking is the primary lower-page task. */
.booking {
  padding-block: 80px;
  background: var(--surface-mist);
}

.booking__intro {
  margin: var(--space-xl) 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

.visit-facts {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding: 26px 24px;
  background: #071039;
  color: #eef1ff;
}

.visit-facts h3 {
  color: #f5f7ff;
}

.visit-facts ul {
  display: grid;
  gap: var(--space-md);
  padding: 0;
  margin: 0;
  list-style: none;
}

.visit-facts li {
  position: relative;
  padding-left: 22px;
  color: #c2cbe3;
  font-size: 0.86rem;
  line-height: 1.5;
}

.visit-facts li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}

.callback-panel {
  margin-top: var(--space-2xl);
  padding: 28px 22px;
  border: 1px solid var(--line-light);
  border-radius: 0 30px 0 0;
  background: #f8f9ff;
}

.callback-panel__heading {
  display: grid;
  gap: var(--space-sm);
}

.callback-panel__heading > p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

#callback-form {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.form-field {
  display: grid;
  gap: var(--space-sm);
}

.form-field label {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.form-field label span {
  color: var(--ink-soft);
  font-weight: 500;
}

.form-field input,
.form-field select {
  width: 100%;
  min-height: 54px;
  padding: 12px 13px;
  border: 1px solid #bdc5d5;
  border-radius: 0;
  background: #fdfdff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--navy);
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

.form-submit,
.primary-action {
  display: flex;
  min-height: 56px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: 14px 18px;
  border: 0;
  background: var(--green);
  color: var(--navy-ink);
  font-family: var(--wide);
  font-size: 0.8rem;
  font-stretch: 110%;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  cursor: pointer;
}

.form-privacy {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.45;
}

.form-status {
  margin: 0;
  padding: var(--space-md);
  border: 1px solid color-mix(in oklch, var(--green) 45%, var(--surface-paper));
  background: color-mix(in oklch, var(--green) 11%, var(--surface-paper));
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.45;
}

.insurance-disclosure {
  margin-top: var(--space-2xl);
  border-block: 1px solid var(--line-light);
}

.insurance-disclosure summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  cursor: pointer;
}

.insurance-disclosure summary > span {
  display: grid;
  gap: var(--space-xs);
}

.insurance-disclosure summary b {
  font-family: var(--wide);
  font-size: 0.95rem;
}

.insurance-disclosure summary small {
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.insurance-disclosure > div {
  padding-bottom: var(--space-xl);
}

.insurance-disclosure ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-lg);
  padding: 0;
  margin: 0;
  list-style: none;
}

.insurance-disclosure li {
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--line-light);
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.3;
}

.insurance-disclosure > div > p {
  margin: var(--space-xl) 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.5;
}

.insurance-disclosure a {
  color: var(--navy);
  font-weight: 700;
}

/* The closing photograph reprises the cinematic hero composition. */
.final-cta {
  isolation: isolate;
  min-height: 540px;
  overflow: hidden;
  background: #061039;
  color: #f4f6ff;
}

.final-cta > img,
.final-cta__scrim {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.final-cta > img {
  object-fit: cover;
  object-position: 56% center;
}

.final-cta__scrim {
  z-index: -1;
  background: linear-gradient(to top, rgba(3, 8, 31, 0.98) 5%, rgba(5, 13, 48, 0.88) 48%, rgba(4, 10, 36, 0.45));
}

.final-cta__content {
  display: flex;
  min-height: 540px;
  flex-direction: column;
  justify-content: end;
  gap: var(--space-lg);
  padding-block: 84px 58px;
}

.final-cta .section-kicker {
  color: #bce49d;
}

.final-cta h2 {
  color: #f6f7ff;
}

.final-cta__content > p:not(.section-kicker) {
  margin: 0 0 var(--space-sm);
  color: #c7cfe5;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Condensed mobile footer: facts stay visible; long directories disclose. */
.site-footer {
  padding-block: 64px 58px;
  background: #030921;
  color: #d9dff1;
}

.site-footer__brand {
  display: flex;
  align-items: start;
  gap: var(--space-lg);
}

.site-footer__brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.site-footer__brand > div {
  display: grid;
  gap: var(--space-sm);
}

.site-footer__brand strong {
  color: #f5f7ff;
  font-family: var(--wide);
  font-size: 0.9rem;
  font-stretch: 105%;
}

.site-footer__brand p {
  margin: 0;
  color: #9da9c8;
  font-size: 0.76rem;
  line-height: 1.5;
}

.footer-email {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  margin-top: var(--space-xl);
  color: #dfe5f7;
  font-weight: 650;
  text-decoration: none;
}

.footer-disclosures {
  margin-top: var(--space-xl);
  border-top: 1px solid rgba(224, 229, 255, 0.15);
}

.site-footer details {
  border-bottom: 1px solid rgba(224, 229, 255, 0.15);
}

.site-footer summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  color: #eef1ff;
  font-family: var(--wide);
  font-size: 0.8rem;
  font-weight: 740;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
}

.site-footer details[open] summary span {
  transform: rotate(45deg);
}

.site-footer nav,
.footer-phones {
  display: grid;
  padding: 0 0 var(--space-lg);
}

.site-footer nav a,
.footer-phones a {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  color: #aeb9d3;
  font-size: 0.8rem;
  text-decoration: none;
}

.footer-phones b {
  color: #dce2f5;
  font-size: 0.74rem;
}

.footer-credentials {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.footer-credentials span {
  position: relative;
  padding-left: 18px;
  color: #b4bed7;
  font-size: 0.75rem;
}

.footer-credentials span::before {
  position: absolute;
  top: 0.43em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}

.footer-social {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: var(--space-xl);
  color: #dce2f5;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.footer-legal {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(224, 229, 255, 0.15);
}

.footer-legal p,
.footer-disclaimer {
  margin: 0;
  color: #8996b7;
  font-size: 0.66rem;
  line-height: 1.55;
}

.footer-legal a {
  color: #b8c2da;
}

.footer-disclaimer {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(224, 229, 255, 0.12);
}

.footer-disclaimer strong {
  color: #b8c2da;
}

@media (max-width: 359px) {
  .section-shell {
    padding-inline: 18px;
  }

  .review-rail,
  .location-photo-rail {
    padding-inline: 18px;
    scroll-padding-inline: 18px;
  }

  .review-card,
  .location-photo-rail > a {
    flex-basis: calc(100% - 42px);
  }

  .clinic-row {
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  .clinic-row em {
    display: none;
  }
}

@media (min-width: 600px) {
  .site-header {
    top: 28px;
  }

  .full-page-section {
    scroll-margin-top: 104px;
  }
}

}