/* =========================================================================
   theme-premium.css — dark premium overlay for MDBilling
   Layered AFTER styles.css. Retunes the existing html.dark theme toward a
   navy / teal / ivory "operational luxury" palette (brand has no gold), upgrades
   glass surfaces, and styles the travelling 3D glass heart on the homepage.
   Additive + revertible: remove this file + the <link> to restore the original.
   ========================================================================= */

:root {
  --mdh-teal: hsl(178 58% 48%);
  --mdh-teal-soft: hsl(178 52% 64%);
  --mdh-teal-glow: hsla(178, 72%, 58%, 0.45);
  /* Brand palette is navy / teal / cream — NO gold. These legacy "gold" tokens now map to teal. */
  --mdh-gold: hsl(178 58% 48%);
  --mdh-gold-soft: hsl(178 52% 64%);
  --mdh-ivory: hsl(42 45% 96%);
  --mdh-navy: hsl(218 55% 15%);
  --mdh-navy-deep: hsl(220 60% 9%);
  --mdh-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Retune the dark theme tokens used throughout styles.css ------------- */
html.dark {
  --bg: 9 18 37;            /* deep navy */
  --bg-deep: 8 14 30;
  --surface: 16 32 58;
  --surface-strong: 12 26 50;
  --text: 244 241 232;      /* ivory */
  --text-muted: 178 195 220;
  --line: 46 74 116;
  --glow: 52 194 184;       /* teal */
}

/* Premium background field (teal + navy radials over deep navy) */
html.dark body {
  background-color: rgb(var(--bg));
  background-image:
    radial-gradient(1200px 720px at 80% -10%, hsla(178, 50%, 32%, 0.16), transparent 60%),
    radial-gradient(900px 620px at 10% 6%, hsla(218, 62%, 34%, 0.22), transparent 60%),
    linear-gradient(180deg, var(--mdh-navy-deep) 0%, hsl(221 58% 7%) 100%);
  background-attachment: fixed;
}

/* ---- Glass surfaces ------------------------------------------------------ */
html.dark .panel,
html.dark .nav-card,
html.dark .metric-card,
html.dark .faq-item {
  background: hsla(214, 45%, 16%, 0.46) !important;
  border: 1px solid hsla(0, 0%, 100%, 0.08) !important;
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 18px 50px hsla(220, 70%, 3%, 0.5), inset 0 1px 0 hsla(0, 0%, 100%, 0.06) !important;
}
html.dark .panel::before {
  background: linear-gradient(160deg, hsla(0, 0%, 100%, 0.22), transparent 34%, transparent 70%, var(--mdh-teal-glow)) !important;
  opacity: 0.8;
}
html.dark .site-header.is-scrolled .nav-card {
  background: hsla(220, 58%, 8%, 0.72) !important;
  box-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.06), 0 14px 40px hsla(220, 70%, 2%, 0.5) !important;
}

/* ---- Eyebrow → restrained gold ------------------------------------------ */
html.dark .eyebrow {
  border-color: hsla(178, 46%, 50%, 0.32) !important;
  background: hsla(178, 48%, 46%, 0.10) !important;
  color: var(--mdh-teal-soft) !important;
}

/* ---- Accent text recolouring (mint → teal pulse) ------------------------- */
html.dark .text-mint,
html.dark .text-teal { color: var(--mdh-teal-soft) !important; }

/* ---- Buttons ------------------------------------------------------------- */
/* Consistent two-tier button system (dark):
   PRIMARY  = teal fill, navy text  → same look everywhere (nav, hero, sections, inner pages)
   SECONDARY/GHOST = outline, ivory text, teal hover
   nav-cta only adjusts size, not color, so "Contact Us" matches site-wide. */
html.dark .button--primary,
html.dark .button--nav-cta {
  background: linear-gradient(135deg, var(--mdh-gold-soft), var(--mdh-gold)) !important;
  color: var(--mdh-navy-deep) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 28px hsla(178, 50%, 20%, 0.45) !important;
  transition: transform 0.25s var(--mdh-ease), box-shadow 0.25s var(--mdh-ease), filter 0.25s var(--mdh-ease) !important;
}
html.dark .button--primary:hover,
html.dark .button--nav-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 40px hsla(178, 60%, 34%, 0.5) !important;
}
html.dark .button--secondary,
html.dark .button--ghost {
  background: rgba(255, 255, 255, 0.13) !important;
  color: #f4f9ff !important;
  border: 1px solid rgba(176, 209, 255, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
html.dark .button--secondary:hover,
html.dark .button--ghost:hover {
  border-color: var(--mdh-teal-soft) !important;
  background: hsla(178, 50%, 45%, 0.2) !important;
  transform: translateY(-2px);
}

/* ---- Trust chips / pills ------------------------------------------------- */
html.dark .trust-chip,
html.dark .hero-brand-scene__pill {
  border-color: hsla(178, 50%, 50%, 0.28) !important;
  background: hsla(178, 50%, 40%, 0.10) !important;
  color: var(--mdh-teal-soft) !important;
}

/* ---- Focus states -------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--mdh-teal-soft);
  outline-offset: 3px;
}

/* Remove all eyebrow kicker labels (every page + container) and the
   brand-scene pills, site-wide, per request. */
.eyebrow,
.hero-brand-scene__pills { display: none !important; }

/* Nav CTA: wrap word-wise only under text enlargement; never letter-by-letter.
   (The old dark-only white-space:nowrap forced the label to widen the button
   past the viewport under enlarged text — the base .button rule wraps safely.) */
.button--nav-cta { overflow-wrap: normal; }
/* Compact CTA in the tight 960-1099px window where the header has least slack.
   (Previously targeted max-width:860px where the CTA is display:none — dead.) */
@media (min-width: 960px) and (max-width: 1099px) {
  .button--nav-cta { padding-left: 0.85rem; padding-right: 0.85rem; font-size: 0.82rem; }
}

/* Home hero (desktop): hero text contained on the left; MD Billing logo card
   vertically centered ("middle") in the right column and pushed to the right,
   sized so it stays fully visible (replaces the translateY hack). */
.page--home .home-hero,
.page--home .home-hero__frame { overflow-x: clip; }

/* Strip the brand-scene card chrome on the homepage — show only the logo on the
   hero background (no dark container, border, shadow, sheen, or glow). */
.page--home .hero-brand-scene--home .hero-brand-scene__card {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.page--home .hero-brand-scene--home .hero-brand-scene__card-sheen,
.page--home .hero-brand-scene--home .hero-brand-scene__glow { display: none !important; }
@media (min-width: 1024px) {
  .page--home .home-hero__content,
  .page--home .home-hero__trust { padding-left: clamp(36px, 4.5vw, 80px); }
  .page--home .home-hero__content { max-width: 40rem; } /* wider text column (~640px) so copy breathes */
  .page--home .hero-brand-scene--home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
  }
  .page--home .hero-brand-scene--home .hero-brand-scene__card {
    transform: none;
    margin-inline: auto;        /* center the logo within the wider right column so it
                                   sits well right with negative space on both sides */
    width: min(100%, 616px);
  }
  .page--home .hero-brand-scene--home .hero-brand-scene__image {
    width: min(100%, 473px);    /* logo size unchanged (position, not size) */
  }
}

/* ---- Homepage content components (rebuilt copy) ------------------------- */
.hero-video {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.3rem;
  padding: 0.4rem 1rem 0.4rem 0.4rem; border-radius: 999px;
  background: hsla(0, 0%, 100%, 0.05); border: 1px solid hsla(0, 0%, 100%, 0.14);
  color: var(--mdh-ivory); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.01em;
}
.hero-video__icon {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mdh-teal-soft), var(--mdh-teal)); color: #07121c;
}

.section-cta { margin-top: 1.6rem; }
.story-card .section-cta { margin-top: 1.1rem; }

.trusted-carousel {
  margin-top: 1.1rem; display: grid; place-items: center; min-height: 110px; padding: 1.5rem;
  border-radius: 16px; border: 1px dashed hsla(0, 0%, 100%, 0.16); background: hsla(0, 0%, 0%, 0.18);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem;
  color: hsl(217 20% 74%); letter-spacing: 0.02em;
}

.solution-stack { display: grid; gap: 1.2rem; margin-top: 0.5rem; }
.solution-panel {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2.4vw, 1.8rem); align-items: start;
  padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: 18px;
  background: hsla(214, 45%, 16%, 0.42); border: 1px solid hsla(0, 0%, 100%, 0.07);
}
.solution-panel__index {
  font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 600; color: var(--mdh-gold); line-height: 1; font-variant-numeric: tabular-nums;
}
.solution-panel__title { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem); font-weight: 650; color: #fff; line-height: 1.25; margin-bottom: 0.7rem; }
.solution-panel__copy { color: rgba(233, 242, 255, 0.82); line-height: 1.75; max-width: 70ch; }
@media (max-width: 640px) {
  .solution-panel { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* ---- Inner-page hero aligned to homepage: bare logo, no card chrome -------- */
.hero-brand-scene__card {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero-brand-scene__card-sheen,
.hero-brand-scene__glow { display: none !important; }

/* ---- Compact hero video button (shorter overall length) ------------------- */
.hero-video {
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
  font-size: 0.8rem;
  width: fit-content;     /* don't stretch to the grid column */
  justify-self: start;
}
.hero-video__icon { width: 26px; height: 26px; }

/* ---- Hero video modal ----------------------------------------------------- */
.video-modal[hidden] { display: none; }
.video-modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
}
.video-modal__backdrop { position: absolute; inset: 0; background: hsla(220, 60%, 3%, 0.82); backdrop-filter: blur(4px); }
.video-modal__dialog {
  position: relative; width: min(960px, 100%); border-radius: 16px; overflow: hidden;
  background: #05101c; box-shadow: 0 30px 90px hsla(220, 70%, 2%, 0.7); border: 1px solid hsla(0, 0%, 100%, 0.1);
}
.video-modal__video { display: block; width: 100%; height: auto; background: #000; }
.video-modal__close {
  position: absolute; top: 8px; right: 10px; z-index: 1; width: 38px; height: 38px; border-radius: 50%;
  background: hsla(0, 0%, 0%, 0.5); color: #fff; font-size: 1.6rem; line-height: 1; border: 1px solid hsla(0, 0%, 100%, 0.2);
}
.video-modal__close:hover { background: hsla(0, 0%, 0%, 0.75); }

/* ---- Placeholders (clearly marked: blank art + lorem) --------------------- */
.image-placeholder {
  margin: 1.4rem 0 0; display: grid; place-items: center; gap: 0.4rem; text-align: center;
  min-height: clamp(150px, 22vw, 240px); padding: 1.5rem; border-radius: 16px;
  border: 1px dashed hsla(178, 50%, 60%, 0.35); background:
    repeating-linear-gradient(45deg, hsla(0,0%,100%,0.02) 0 12px, transparent 12px 24px), hsla(214, 45%, 16%, 0.3);
}
.image-placeholder__tag {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--mdh-teal-soft);
}
.image-placeholder__note { font-size: 0.9rem; color: hsl(217 20% 78%); max-width: 42ch; }
.lorem-note { margin-top: 1rem; opacity: 0.85; }
.lorem-note__tag {
  display: inline-block; margin-right: 0.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mdh-gold-soft);
}

/* ---- Two half-width panels sharing one row ------------------------------- */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  align-items: stretch;
}
.split-row > .section-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}
.split-row .section-cta { margin-top: auto; }  /* align CTAs at the bottom of both panels */
@media (max-width: 820px) {
  .split-row { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Mobile pass (≤640px) — re-compose, don't just stack
   =========================================================================== */
@media (max-width: 640px) {
  /* Stats: 2×2 grid instead of one tall column */
  .metric-band { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .metric-tile { width: auto; min-width: 0; padding: 1.1rem 0.9rem; }
  .metric-tile__value { font-size: clamp(1.6rem, 9vw, 2.2rem); }

  /* CTAs: full-width, consistent, comfortable tap targets (all heroes) */
  .home-hero__actions,
  .page-hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .home-hero__actions .button,
  .page-hero__actions .button,
  .section-cta .button,
  .story-card .section-cta .button { width: 100%; justify-content: center; }
  .section-cta { display: flex; flex-direction: column; gap: 0.6rem; }

  /* Bare hero logo: keep it tidy and not oversized on small screens */
  .home-hero__visual .hero-brand-scene__image { width: min(72vw, 260px); }

  /* Placeholders: a touch shorter on mobile */
  .image-placeholder { min-height: 140px; padding: 1.1rem; }
}

/* =========================================================================
   Accessibility preferences widget (bottom-right) + reader modes
   ========================================================================= */
.a11y-widget { position: fixed; right: 20px; bottom: 20px; z-index: 1200; }
.a11y-fab {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(135deg, var(--mdh-teal-soft), var(--mdh-teal));
  color: var(--mdh-navy-deep);
  border: 1px solid hsla(0, 0%, 100%, 0.28);
  box-shadow: 0 10px 28px hsla(178, 50%, 16%, 0.5);
  transition: transform 0.2s var(--mdh-ease), box-shadow 0.2s var(--mdh-ease);
}
.a11y-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 40px hsla(178, 55%, 26%, 0.55); }
.a11y-fab svg { width: 28px; height: 28px; fill: currentColor; }
.a11y-panel {
  position: absolute; right: 0; bottom: 64px; width: 272px;
  background: hsl(220 52% 12%); color: var(--mdh-ivory);
  border: 1px solid hsla(0, 0%, 100%, 0.16); border-radius: 16px; padding: 16px;
  box-shadow: 0 24px 60px hsla(220, 70%, 3%, 0.6);
  display: flex; flex-direction: column; gap: 10px;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; }
.a11y-panel__title { font-weight: 700; font-size: 1rem; }
.a11y-panel__close {
  background: none; border: 0; color: var(--mdh-ivory); font-size: 1.5rem; line-height: 1;
  cursor: pointer; width: 36px; height: 36px; border-radius: 8px;
}
.a11y-panel__close:hover { background: hsla(0, 0%, 100%, 0.08); }
.a11y-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.a11y-field__label { font-size: 0.9rem; color: var(--mdh-teal-soft); }
.a11y-seg { display: flex; border: 1px solid hsla(0, 0%, 100%, 0.18); border-radius: 10px; overflow: hidden; }
.a11y-seg__btn {
  background: transparent; color: var(--mdh-ivory); border: 0; padding: 6px 12px;
  min-width: 44px; min-height: 44px; cursor: pointer; font-weight: 700;
}
.a11y-seg__btn[aria-pressed="true"] { background: var(--mdh-teal); color: var(--mdh-navy-deep); }
.a11y-opt, .a11y-reset {
  text-align: left; background: hsla(0, 0%, 100%, 0.05); color: var(--mdh-ivory);
  border: 1px solid hsla(0, 0%, 100%, 0.16); border-radius: 10px; padding: 10px 12px;
  min-height: 44px; cursor: pointer; font-size: 0.92rem;
}
.a11y-opt[aria-pressed="true"] { background: var(--mdh-teal); color: var(--mdh-navy-deep); border-color: transparent; font-weight: 700; }
.a11y-opt:hover, .a11y-reset:hover { border-color: var(--mdh-teal-soft); }
.a11y-reset { text-align: center; margin-top: 2px; background: transparent; opacity: 0.85; }

/* Reader modes (attributes set on <html>) */
html[data-a11y-text="lg"] { font-size: 112.5%; }
html[data-a11y-text="xl"] { font-size: 125%; }
html[data-a11y-links="1"] a:not(.button):not(.a11y-fab) { text-decoration: underline !important; text-underline-offset: 3px; }
html[data-a11y-contrast="1"] { --text: 255 255 255; --text-muted: 224 232 245; }
html[data-a11y-contrast="1"] body { background-image: none !important; background-color: #050c1e !important; }
html[data-a11y-contrast="1"] .panel,
html[data-a11y-contrast="1"] .nav-card,
html[data-a11y-contrast="1"] .section-panel,
html[data-a11y-contrast="1"] .section-panel--dark,
html[data-a11y-contrast="1"] .metric-card,
html[data-a11y-contrast="1"] .story-card,
html[data-a11y-contrast="1"] .solution-panel,
html[data-a11y-contrast="1"] .faq-item {
  background: #0c1a33 !important;
  border-color: hsla(0, 0%, 100%, 0.34) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-a11y-contrast="1"] .button--secondary,
html[data-a11y-contrast="1"] .button--ghost { border-color: hsla(0, 0%, 100%, 0.5) !important; }
html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}

@media (max-width: 640px) {
  .a11y-widget { right: 12px; bottom: 80px; } /* clear the mobile CTA bar */
  .a11y-panel { width: calc(100vw - 24px); right: -2px; }
}

/* ===== Brand motif images (transparent, float frameless) ================= */
.motif { margin: 1.6rem auto 0; line-height: 0; display: block; }
.motif picture { display: block; }
.motif-img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 40px hsla(200, 80%, 6%, 0.55));
}
.motif--sq { max-width: 300px; }
.motif--land { max-width: 840px; width: 100%; }
.motif--vert { max-width: 260px; }

/* ===== Ambient section video ============================================= */
.section-video { margin: 1.6rem auto 0; line-height: 0; display: block; }
.section-video__el {
  display: block; width: 100%; height: auto; border-radius: 18px;
  background: hsl(220 52% 12%);
  box-shadow: 0 18px 50px hsla(220, 70%, 3%, 0.5);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
}
.section-video--sq { max-width: 360px; }
.section-video--feature { max-width: 520px; }

/* ===== Text-beside-media row + vertically-centered panel ================= */
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.media-row__text {
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  max-width: 34rem;             /* keep reading line length sane on wide screens */
  justify-self: end;            /* push text to the inner edge (near the video) */
}
.media-row--reverse .media-row__text { justify-self: start; }  /* mirror when media is on the left */
.media-row__media { display: flex; justify-content: center; align-items: center; }
.media-row__media .section-video, .media-row__media .motif { margin: 0; width: 100%; max-width: min(100%, 460px); }
.media-row--reverse .media-row__text { order: 2; }
.media-row--reverse .media-row__media { order: 1; }
.section-panel--center { display: flex; flex-direction: column; justify-content: center; }
.section-cta--center { display: flex; justify-content: center; }
/* CTA sits in the text column on desktop, below the media on mobile */
.media-cta--mobile { display: none; }
@media (max-width: 820px) {
  .media-row { grid-template-columns: 1fr; }
  .media-row__text, .media-row--reverse .media-row__text { justify-self: stretch; max-width: none; }
  .media-row--reverse .media-row__text, .media-row--reverse .media-row__media { order: 0; }
  .media-cta--desktop { display: none; }
  .media-cta--mobile { display: flex; }
}

/* =========================================================================
   POLISH PASS — typography refinement, stat tiles, editorial testimonials
   ========================================================================= */

/* Fraunces variable-font axes for display-grade headlines.
   Using 'opsz' (optical size) lets larger headlines use the display-optimized
   cut (tighter joins, finer contrast) while body uses the text-optimized cut. */
.section-title,
.hero-title,
.page-hero__title {
  font-family: "Fraunces", "Source Serif 4", Georgia, serif !important;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 0;
  letter-spacing: -0.022em;
  text-wrap: balance;          /* prevent orphans on big serifs */
}

/* Body & small headings use the text-optimized cut (more readable in long copy) */
.section-copy, .story-card__copy, p {
  font-variation-settings: "opsz" 14, "SOFT" 50;
}

/* Refined easing token used by reveals + button hover (more elegant than ease-out) */
:root { --mdh-ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* === Stat tiles: tabular numerals + thin top accent rule (signals audited) === */
html.dark .metric-band .metric-tile {
  position: relative;
  background: hsla(214, 45%, 12%, 0.62) !important;
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid hsla(0, 0%, 100%, 0.08) !important;
  box-shadow: 0 12px 30px hsla(220, 70%, 3%, 0.4), inset 0 1px 0 hsla(0, 0%, 100%, 0.05) !important;
}
html.dark .metric-band .metric-tile::after {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--mdh-teal-soft), transparent);
  opacity: 0.7;
}
.metric-tile__value {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 0;
  font-feature-settings: "tnum" 1, "lnum" 1;     /* tabular + lining numerals */
  letter-spacing: -0.03em;
}
html.dark .metric-band .metric-tile__value { color: var(--mdh-ivory) !important; }
/* Pair the sub-label with the dark glass tile too. styles.css forces the label
   to --navy-ink (intended for the light/white tile), but in dark mode the tile
   is dark glass — so the label was dark-on-dark (≈1:1, invisible). Light it up
   to match the value, kept slightly dimmer for hierarchy. WCAG AA: ~9:1. */
html.dark .metric-band .metric-tile__label {
  color: var(--mdh-ivory) !important;
  opacity: 0.8 !important;
}
.metric-tile__label {
  font-family: "Work Sans", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.78;
}

/* === Editorial testimonial cards === */
/* The testimonial story-cards are rendered with name as title, quote as copy.
   Make the quote feel like a real pull-quote: italic Fraunces with a big
   decorative opening glyph, attribution in a refined uppercase microline. */
html.dark .home-chapter .story-card:has(.story-card__meta),
html.dark section .story-card:has(.story-card__meta) {
  background: hsla(214, 42%, 13%, 0.65) !important;
  border: 1px solid hsla(178, 30%, 50%, 0.18) !important;
  position: relative;
  padding: 2rem 1.6rem 1.4rem;
}
.story-card:has(.story-card__meta)::before {
  content: "\201C";                              /* big opening curly quote */
  position: absolute; top: -10px; left: 18px;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 20;
  font-size: 5.2rem; line-height: 1;
  color: var(--mdh-teal-soft); opacity: 0.32;
  pointer-events: none;
}
.story-card:has(.story-card__meta) .story-card__title {
  font-family: "Work Sans", sans-serif;          /* the NAME is small uppercase */
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mdh-teal-soft);
  margin: 0 0 0.7rem;
  order: 2;
}
.story-card:has(.story-card__meta) .story-card__copy {
  font-family: "Fraunces", Georgia, serif;       /* the QUOTE is editorial serif */
  font-variation-settings: "opsz" 48, "SOFT" 50;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--mdh-ivory);
  order: 1;
  margin: 0;
}
.story-card:has(.story-card__meta) .story-card__meta {
  font-family: "Work Sans", sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mdh-teal-soft);
  opacity: 0.78;
  margin-top: 0.4rem;
  order: 3;
}
.story-card:has(.story-card__meta) { display: flex; flex-direction: column; }

/* === Section-title micro-emphasis: italic spans inside headlines === */
.section-title em, .section-title i {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
  color: var(--mdh-teal-soft);
}

/* Teal-emphasis span (e.g., key verbs inside the hero headline) */
.t-teal {
  color: var(--mdh-teal-soft);
}
/* Inline teal emphasis inside body copy (e.g. media-band paragraphs): a touch
   of weight for punch. Light teal reads well on the dark theme; on light
   surfaces use a darker teal so it clears WCAG AA. */
.media-band__copy .t-teal,
.section-copy .t-teal { font-weight: 600; }
html:not(.dark) .media-band__copy .t-teal,
html:not(.dark) .section-copy .t-teal { color: #006257; }

/* === Subtle hairline section divider for editorial rhythm === */
.home-chapter + .home-chapter > .shell::before {
  content: ""; display: block; height: 1px; margin: 0 auto 2.4rem;
  width: min(220px, 30%);
  background: linear-gradient(90deg, transparent, hsla(178, 40%, 60%, 0.32), transparent);
}

/* =========================================================================
   AUDIT-DRIVEN POLISH (frontend-ui-ux pass)
   ========================================================================= */

/* --- Card hover choreography (Stripe/Linear-grade tactility) ---------------
   GPU-only (transform + filter); honors prefers-reduced-motion via a11y toggle. */
html.dark .story-card,
html.dark .metric-tile,
html.dark .solution-panel,
html.dark .faq-item {
  transition: transform 0.36s var(--mdh-ease), border-color 0.36s var(--mdh-ease), box-shadow 0.36s var(--mdh-ease), filter 0.36s var(--mdh-ease);
  will-change: transform;
}
html.dark .story-card:hover,
html.dark .solution-panel:hover {
  transform: translateY(-3px);
  border-color: hsla(178, 50%, 60%, 0.32) !important;
  box-shadow: 0 26px 60px hsla(220, 70%, 3%, 0.55), 0 0 0 1px hsla(178, 60%, 56%, 0.12) inset !important;
}
html.dark .metric-tile:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}
html[data-a11y-motion="reduce"] .story-card,
html[data-a11y-motion="reduce"] .metric-tile,
html[data-a11y-motion="reduce"] .solution-panel,
html[data-a11y-motion="reduce"] .faq-item { transition: none !important; }

/* --- Tablet headline wrap fix ---------------------------------------------
   At ~600-900px, force the hero H1 onto two lines (Minimize Denials, / Maximize Certainty!)
   instead of orphan-stacking. Uses text-wrap: balance + a narrower max-width. */
@media (min-width: 600px) and (max-width: 960px) {
  .home-hero .hero__title,
  .hero__title {
    max-width: 28ch;
    text-wrap: balance;
    font-size: clamp(2.4rem, 5.6vw, 3.2rem);
    line-height: 1.05;
  }
}
/* Stronger balance globally. overflow-wrap:anywhere is an ACCESSIBILITY
   safeguard: keep-all normally holds words together, but when text is enlarged
   via the accessibility hub (up to 2x) a long word like "reimbursement" could
   otherwise overflow its box and clip on narrow/mobile screens. anywhere only
   breaks a word that would otherwise overflow — no effect at default sizes. */
.hero__title { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }

/* --- Hero composition rebalance -------------------------------------------
   The giant MD BILLING logo on the right competed with the headline.
   Dim + scale it so the typography leads (kept visible as brand-watermark texture). */
.home-hero .hero-brand-scene__image {
  opacity: 1;
  transform: scale(0.78);
  transform-origin: center;
  transition: opacity 0.6s var(--mdh-ease), transform 0.6s var(--mdh-ease);
  /* Clean opaque logo — soft depth shadow only (no halo/rings). */
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.32));
}
.home-hero:hover .hero-brand-scene__image {
  opacity: 1;
  transform: scale(0.8);
}
@media (max-width: 820px) {
  .home-hero .hero-brand-scene__image { opacity: 1; }
}

/* --- Subtle button hover ---------------------------------------------------
   Restrained motion that doesn't break the calm clinical feel. */
html.dark .button--primary,
html.dark .button--nav-cta,
html.dark .button--secondary,
html.dark .button--ghost {
  transition: transform 0.28s var(--mdh-ease), background 0.28s var(--mdh-ease), box-shadow 0.28s var(--mdh-ease), border-color 0.28s var(--mdh-ease), filter 0.28s var(--mdh-ease) !important;
}

/* =========================================================================
   Dropdown navigation
   ========================================================================= */
/* Dropdown nav items */
.nav-item--has-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-link--toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font: inherit; display: inline-flex; align-items: center; gap: 6px;
}
.nav-link__chevron { transition: transform 0.25s var(--mdh-ease); opacity: 0.7; }
.nav-item--has-dropdown:hover .nav-link__chevron,
.nav-item--has-dropdown:focus-within .nav-link__chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 240px; padding: 10px;
  background: hsl(220 52% 11%);
  border: 1px solid hsla(0, 0%, 100%, 0.14);
  border-radius: 14px;
  box-shadow: 0 24px 60px hsla(220, 70%, 3%, 0.6);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s var(--mdh-ease), transform 0.25s var(--mdh-ease), visibility 0s linear 0.25s;
  z-index: 50;
}
.nav-item--has-dropdown:hover .nav-dropdown,
.nav-item--has-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.25s var(--mdh-ease), transform 0.25s var(--mdh-ease), visibility 0s linear 0s;
}
.nav-dropdown__item {
  display: block; padding: 10px 14px; border-radius: 10px;
  color: var(--mdh-ivory); text-decoration: none;
  font-size: 0.94rem; font-weight: 500;
  transition: background 0.2s var(--mdh-ease), color 0.2s var(--mdh-ease);
  white-space: nowrap;
}
.nav-dropdown__item:hover {
  background: hsla(178, 50%, 45%, 0.16);
  color: var(--mdh-teal-soft);
}
.nav-dropdown__item:focus-visible {
  outline: 2px solid var(--mdh-teal-soft); outline-offset: 1px;
  background: hsla(178, 50%, 45%, 0.12);
}

/* Mobile accordion (replaces flat .drawer-quick-links for items with children) */
.drawer-group { background: transparent; }
.drawer-group__summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid hsla(0, 0%, 100%, 0.18);
  color: var(--mdh-ivory); font-weight: 600;
  background: hsla(0, 0%, 100%, 0.05);
}
.drawer-group__summary::-webkit-details-marker { display: none; }
.drawer-group__summary svg { transition: transform 0.25s var(--mdh-ease); opacity: 0.7; }
.drawer-group[open] .drawer-group__summary svg { transform: rotate(180deg); }
.drawer-group__items {
  display: flex; flex-direction: column; padding: 8px 6px 4px;
}
.drawer-group__items a {
  padding: 8px 10px; color: var(--mdh-ivory); text-decoration: none;
  font-size: 0.94rem; border-radius: 8px;
}
.drawer-group__items a:hover { background: hsla(178, 50%, 45%, 0.12); color: var(--mdh-teal-soft); }

/* On desktop the drawer-quick-links bar isn't needed; hide it once nav fits */
@media (min-width: 880px) {
  .drawer-quick-links { display: none !important; }
}

/* =========================================================================
   "Delivering results across the board." — Level the playing field section
   ========================================================================= */
.results-header { text-align: center; max-width: 56ch; margin: 0 auto 2.4rem; }
.results-header__eyebrow {
  font-family: "Work Sans", sans-serif;
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--mdh-teal-soft); margin: 0 0 0.8rem;
}
.results-header__title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "SOFT" 30;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.06; letter-spacing: -0.022em;
  margin: 0 0 0.9rem; text-wrap: balance;
}
.results-header__copy {
  font-size: 1.02rem; line-height: 1.65;
  color: hsl(217 20% 80%); margin: 0;
}

.results-stack { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.4rem); margin-top: 2.4rem; }

.results-panel {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center; position: relative;
}
.results-panel--reverse .results-panel__media { order: 2; }
.results-panel--reverse .results-panel__body  { order: 1; }
.results-panel__index {
  position: absolute; top: -10px; left: 0;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 20;
  font-size: 2rem; line-height: 1;
  color: var(--mdh-teal-soft); opacity: 0.42;
  letter-spacing: -0.02em;
}
.results-panel--reverse .results-panel__index { left: auto; right: 0; }
.results-panel__media {
  margin: 0;
  border-radius: 18px; overflow: hidden;
  aspect-ratio: 1 / 1;                       /* unified 1:1 frame; object-fit handles other ratios */
  background: hsla(214, 45%, 14%, 0.55);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  box-shadow: 0 20px 50px hsla(220, 70%, 3%, 0.5);
}
.results-panel__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.results-panel__media--placeholder {
  display: grid; place-items: center; gap: 0.4rem; padding: 1.4rem; text-align: center;
  border: 1px dashed hsla(178, 50%, 60%, 0.35);
  background:
    repeating-linear-gradient(45deg, hsla(0,0%,100%,0.02) 0 12px, transparent 12px 24px),
    hsla(214, 45%, 16%, 0.3);
}
.results-panel__media--placeholder .image-placeholder__tag {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--mdh-teal-soft);
}
.results-panel__media--placeholder figcaption {
  font-size: 0.88rem; color: hsl(217 20% 78%); max-width: 36ch; line-height: 1.45;
}
.results-panel__body { display: flex; flex-direction: column; gap: 0.85rem; padding-top: 1.2rem; }
.results-panel__title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 64, "SOFT" 30;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.18; letter-spacing: -0.015em;
  margin: 0; color: var(--mdh-ivory); text-wrap: balance;
}
.results-panel__copy {
  margin: 0; font-size: 1rem; line-height: 1.65;
  color: hsl(217 20% 80%);
}

/* hover micro-elevation on real-image panels (placeholders stay static) */
.results-panel__media img { transition: transform 0.7s var(--mdh-ease); will-change: transform; }
.results-panel:hover .results-panel__media img { transform: scale(1.03); }
html[data-a11y-motion="reduce"] .results-panel__media img { transition: none !important; transform: none !important; }

@media (max-width: 820px) {
  .results-panel { grid-template-columns: 1fr; }
  .results-panel--reverse .results-panel__media,
  .results-panel--reverse .results-panel__body { order: 0; }
  .results-panel__index { position: static; margin-bottom: 0.4rem; }
}


/* ── Slide carousel ──────────────────────────────────────────────── */
.slide-carousel { position: relative; overflow: hidden; }
.slide-carousel__track { display: grid; grid-template-columns: 100%; }
.slide-carousel__slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px);
  transition: opacity 0.45s var(--mdh-ease), transform 0.45s var(--mdh-ease);
}
.slide-carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.slide-carousel__slide.is-leaving {
  opacity: 0;
  transform: translateX(-40px);
}
/* Reduced motion: neutralize the 40px slide translate. A selector list cannot
   contain an at-rule, so these MUST be two separate blocks (the old comma-joined
   form was discarded wholesale by the parser, leaving the slide animating). */
html[data-a11y-motion="reduce"] .slide-carousel__slide {
  transition: opacity 0.2s linear;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .slide-carousel__slide,
  .slide-carousel__slide.is-active,
  .slide-carousel__slide.is-leaving {
    transition: none !important;
    transform: none !important;
  }
}

.slide-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 2rem;
}
.slide-carousel__btn {
  background: transparent;
  border: 1.5px solid hsl(180 60% 40% / 0.5);
  border-radius: 50%;
  width: 2.75rem;        /* 44px — WCAG 2.5.5 target */
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mdh-teal);
  transition: border-color 0.2s, background 0.2s;
}
.slide-carousel__btn:hover {
  border-color: var(--mdh-teal);
  background: hsl(180 60% 40% / 0.12);
}
.slide-carousel__btn:focus-visible { outline: 2px solid var(--mdh-teal); outline-offset: 3px; }
.slide-carousel__dots { display: flex; align-items: center; gap: 0; }
.slide-carousel__dot {
  /* Painted dot stays 8px (content box); transparent padding gives a 44px hit
     target (8 + 18*2). background-clip keeps the fill inside the content box. */
  box-sizing: content-box;
  width: 8px; height: 8px;
  padding: 18px;
  border-radius: 50%;
  border: none;
  background: hsl(180 60% 40% / 0.35);
  background-clip: content-box;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.slide-carousel__dot.is-active {
  background: var(--mdh-teal);
  background-clip: content-box;
  transform: scale(1.3);
}

/* ── Blog card carousel (left-to-right) ──────────────────────────── */
.blog-carousel { position: relative; margin-top: 1.6rem; }
.blog-carousel__viewport {
  display: grid;
  grid-auto-flow: column;
  /* Fixed track sizes (NOT minmax(0, …)): minmax lets the grid shrink tracks
     to fit the viewport, which collapses all cards side-by-side and kills the
     scroll/snap behaviour entirely (56px cards on phones). */
  grid-auto-columns: 85%;                   /* ~1 card on mobile */
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  padding: 4px 4px 0.9rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.blog-carousel__viewport::-webkit-scrollbar { display: none; }
.blog-carousel__viewport:focus-visible { outline: 2px solid var(--mdh-teal); outline-offset: 4px; }
@media (min-width: 720px) {
  .blog-carousel__viewport { grid-auto-columns: calc(50% - 0.55rem); }  /* 2 cards */
}
@media (min-width: 1080px) {
  .blog-carousel__viewport { grid-auto-columns: calc(33.333% - 0.74rem); }  /* 3 cards */
}
.blog-slide { scroll-snap-align: start; text-decoration: none; color: inherit; display: block; }
.blog-slide__inner {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 100%;
  padding: 1.5rem;
  border-radius: 22px;
  border: 1px solid hsl(200 40% 80% / 0.14);
  background: linear-gradient(160deg, hsl(210 45% 96% / 0.08), hsl(210 45% 96% / 0.03));
  box-shadow: 0 18px 46px hsl(215 40% 4% / 0.4);
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.blog-slide:hover .blog-slide__inner,
.blog-slide:focus-visible .blog-slide__inner {
  transform: translateY(-4px);
  border-color: hsl(180 60% 45% / 0.45);
  box-shadow: 0 26px 60px hsl(215 40% 4% / 0.5);
}
.blog-slide__eyebrow {
  color: var(--mdh-teal);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.blog-slide__title {
  margin: 0;
  color: #f2f8ff;
  font-size: 1.12rem;
  line-height: 1.28;
  font-weight: 650;
}
.blog-slide__copy {
  margin: 0;
  color: hsl(210 35% 90% / 0.72);
  font-size: 0.92rem;
  line-height: 1.6;
  flex: 1 1 auto;
}
.blog-slide__meta {
  color: hsl(210 30% 88% / 0.55);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.blog-slide__cta { color: var(--mdh-teal); font-weight: 700; font-size: 0.9rem; }
.blog-carousel__controls { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.3rem; }
.blog-carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.blog-carousel__btn:disabled:hover { border-color: hsl(180 60% 40% / 0.5); background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .blog-slide__inner { transition: none; }
  .blog-slide:hover .blog-slide__inner { transform: none; }
  .blog-carousel__viewport { scroll-snap-type: none; }
}

/* ── Blog article prose ──────────────────────────────────────────── */
.blog-article { max-width: 72ch; margin-inline: auto; }
.blog-article__h2 {
  margin: 2rem 0 0.7rem;
  color: #f2f8ff;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.22;
  font-weight: 650;
}
.blog-article__h2:first-child { margin-top: 0; }
.blog-article__p {
  margin: 0 0 1.1rem;
  color: hsl(210 35% 90% / 0.82);
  font-size: 1.02rem;
  line-height: 1.8;
}
.blog-article__p:last-child { margin-bottom: 0; }
.blog-article__p strong { color: #f2f8ff; font-weight: 650; }
.blog-article__list {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
  color: hsl(210 35% 90% / 0.82);
  line-height: 1.7;
}
.blog-article__list li { margin-bottom: 0.4rem; }
.blog-article a {
  color: var(--mdh-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.blog-article a:hover { text-decoration-thickness: 2px; }

/* ── CTA halftone band ───────────────────────────────────────────── */
.cta-halftone {
  position: relative;
  background: hsl(215 25% 7%);
  padding-block: 8rem 9rem;
  overflow: hidden;
  border-top: 1px solid hsl(180 60% 35% / 0.25);
}
.cta-halftone__bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, hsl(180 60% 50% / 0.18) 1px, transparent 1px),
    radial-gradient(
      ellipse 80% 100% at 85% 50%,
      hsl(180 55% 28% / 0.28) 0%,
      transparent 65%
    );
  background-size: 22px 22px, 100% 100%;
  background-position: 0 0, 0 0;
  mask-image: radial-gradient(ellipse 75% 100% at 80% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 75% 100% at 80% 50%, black 0%, transparent 80%);
}
.cta-halftone__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.5rem;
}
.cta-halftone__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-variation-settings: 'wght' 700, 'SOFT' 60, 'WONK' 0;
  color: var(--mdh-ivory);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  max-width: 22ch;
}
.cta-halftone__action {
  /* nothing extra needed */
}
/* Teal CTA button inside this section */
.cta-halftone__btn {
  display: inline-block;
  background: var(--mdh-teal);
  color: #0a1628 !important;
  border: 2px solid var(--mdh-teal);
  border-radius: 999px;
  padding: 0.85rem 2rem;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  will-change: transform;
}
@media (hover: hover) {
  .cta-halftone__btn:hover {
    background: hsl(180 58% 42%);
    border-color: hsl(180 58% 42%);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px hsl(180 60% 35% / 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta-halftone__btn {
    transition: none;
    will-change: auto;
  }
}

/* ── Home mission split section ──────────────────────────────────── */
.home-mission {
  padding-block: 6rem;
}
.home-mission__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  /* prevent grid blowout from aspect-ratio children */
  min-width: 0;
}
.home-mission__media {
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
}
.home-mission__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.home-mission__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.home-mission__kicker {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.75rem; /* 12px — label legibility floor (was 11.52px) */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mdh-teal);
  margin: 0 0 1.25rem;
  font-weight: 500;
}
.home-mission__headline {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
}
@media (max-width: 900px) {
  .home-mission__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* ══════════════════════════════════════════════════════════════════
   INDUSTRIAL BRUTALISM — HOME SECTIONS  (Tactical Telemetry mode)
   Targets .home-chapter — never touches hero or inner pages
   ══════════════════════════════════════════════════════════════════ */

/* CRT scanline wash — very subtle, pure atmosphere */
.home-chapter { position: relative; }
.home-chapter::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0, transparent 3px,
    rgba(0,0,0,0.055) 3px, rgba(0,0,0,0.055) 4px
  );
  pointer-events: none;
  z-index: 0;
}
.home-chapter .shell,
.home-chapter .section-panel,
.home-chapter .card-grid,
.home-chapter .metric-band,
.home-chapter .story-card,
.home-chapter .metric-tile,
.home-chapter .results-stack,
.home-chapter .slide-carousel__track,
.home-chapter .slide-carousel__controls,
.home-chapter .media-row { position: relative; z-index: 1; }

/* Abolish border-radius in all home sections */
.home-chapter .story-card,
.home-chapter .metric-tile,
.home-chapter .button,
.home-chapter .section-video,
.home-chapter figure.section-video,
.home-chapter figure.motif,
.home-chapter .slide-carousel__btn,
.home-chapter .slide-carousel__dot { border-radius: 0 !important; }

/* ── Stat band: 1-px hairline telemetry grid ───────────────────── */
.home-chapter .metric-band {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1px !important;
  background: hsl(180 60% 38% / 0.22) !important;
  border: 1px solid hsl(180 60% 38% / 0.3) !important;
  border-radius: 0 !important;
}
.home-chapter .metric-tile {
  background: hsl(215 28% 6%) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2.25rem 2rem !important;
  box-shadow: none !important;
  transition: background 0.15s !important;
}
.home-chapter .metric-tile:hover { background: hsl(215 28% 9%) !important; }
.home-chapter .metric-tile__value {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(2.8rem, 4.5vw, 4.2rem) !important;
  font-variation-settings: 'wght' 900, 'SOFT' 0 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: var(--mdh-ivory) !important;
  font-variant-numeric: tabular-nums !important;
}
.home-chapter .metric-tile__label {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  font-size: 0.75rem !important; /* 12px — label legibility floor (was 9.6px) */
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mdh-teal) !important;
  margin-top: 0.6rem !important;
  line-height: 1.45 !important;
  opacity: 0.85;
}

/* ── Card grid: gap=1px creates teal hairlines between cells ────── */
.home-chapter .card-grid {
  gap: 1px !important;
  background: hsl(180 60% 38% / 0.2) !important;
  border: 1px solid hsl(180 60% 38% / 0.25) !important;
  border-radius: 0 !important;
}
.home-chapter .card-grid .story-card {
  border: none !important;
  border-radius: 0 !important;
  background: hsl(215 28% 6%) !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: background 0.15s !important;
}
.home-chapter .card-grid .story-card:hover {
  background: hsl(215 28% 9%) !important;
  box-shadow: none !important;
  transform: none !important;
}
.home-chapter .card-grid .story-card__title {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1.45 !important;
  color: var(--mdh-teal) !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
}
.home-chapter .card-grid .story-card__copy {
  font-size: 0.9rem !important;
  color: hsl(217 20% 68%) !important;
  line-height: 1.65 !important;
}

/* ── Section titles: more compressed, architectural ────────────── */
.home-chapter .section-title {
  letter-spacing: -0.04em !important;
  line-height: 0.93 !important;
  font-variation-settings: 'wght' 800, 'SOFT' 60 !important;
}

/* ── Section copy: slightly dimmer in home sections ────────────── */
.home-chapter .section-copy {
  color: hsl(217 20% 68%) !important;
}

/* ── Testimonial cards: teal top-rail + monospace attribution ───── */
.home-chapter .story-card:has(.story-card__meta) {
  border-top: 2px solid var(--mdh-teal) !important;
  border-radius: 0 !important;
}
.home-chapter .story-card:has(.story-card__meta) .story-card__meta {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ── Structural accent: teal micro-rule above each section header ─ */
.home-chapter .section-header::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--mdh-teal);
  margin-bottom: 1.5rem;
}
.home-chapter .results-header::before { display: none; }

/* ── Section divider hairline between home chapters ─────────────── */
.home-chapter { border-top: 1px solid hsl(180 60% 38% / 0.18); }

/* ── Buttons in home sections: mechanical square corners ────────── */
.home-chapter .button { border-radius: 0 !important; }

/* Responsive: 2-col metric band on mobile */
@media (max-width: 640px) {
  .home-chapter .metric-band { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ══════════════════════════════════════════════════════════════════
   UI/UX PRO MAX POLISH — Contrast + Hierarchy + Anti-slop pass
   Target: WCAG AAA (7:1+) on all key text in .home-chapter
   ══════════════════════════════════════════════════════════════════ */

/* ── Metric values: pure white, maximum contrast ───────────────── */
.home-chapter .metric-tile__value {
  color: #FFFFFF !important;
  text-shadow: 0 0 28px hsl(180 60% 40% / 0.22) !important;
}
/* Teal label at full opacity — monospace stamps, not whispers */
.home-chapter .metric-tile__label {
  opacity: 1 !important;
  color: var(--mdh-teal) !important;
  letter-spacing: 0.12em !important; /* trimmed for the now-12px glyphs */
}
/* Tile hover: surface lift without color noise */
.home-chapter .metric-tile:hover {
  background: hsl(215 28% 10%) !important;
}

/* ── Card copy: lift from 68% → 80% luminance for 7:1 on dark bg ─ */
.home-chapter .card-grid .story-card__copy {
  color: hsl(217 15% 80%) !important;
}
/* Section copy (intro paragraphs beneath section titles) */
.home-chapter .section-copy {
  color: hsl(217 15% 78%) !important;
}

/* ── Section titles: full ivory — no dimming ───────────────────── */
.home-chapter .section-title {
  color: var(--mdh-ivory) !important;
}

/* ── Teal hairlines: heavier so the grid structure reads ─────────  */
.home-chapter .card-grid {
  background: hsl(180 60% 42% / 0.28) !important;
  border-color: hsl(180 60% 42% / 0.35) !important;
}
.home-chapter .metric-band {
  background: hsl(180 60% 42% / 0.28) !important;
  border-color: hsl(180 60% 42% / 0.38) !important;
}

/* ── Story card titles: pure white for process/service lists ─────── */
.home-chapter .card-grid .story-card__title {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* ── Section header micro-rule: stronger teal ────────────────────── */
.home-chapter .section-header::before {
  background: var(--mdh-teal) !important;
  opacity: 1 !important;
  height: 3px !important;
}

/* ── Testimonial copy: brighter quote text ───────────────────────── */
.home-chapter .story-card:has(.story-card__meta) .story-card__copy {
  color: hsl(217 15% 82%) !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}


/* ── Media row copy: section panels inside carousel ─────────────── */
.home-chapter .media-row .section-copy {
  color: hsl(217 15% 78%) !important;
}
.home-chapter .media-row .section-title {
  color: #FFFFFF !important;
}

/* ── Delivering results panels: copy contrast ────────────────────── */
.results-panel__copy {
  color: hsl(217 15% 75%) !important;
}
.results-header__copy {
  color: hsl(217 15% 75%) !important;
}

/* ── Anti-slop: remove any stray box-shadows in home sections ─────  */
.home-chapter .story-card,
.home-chapter .metric-tile {
  box-shadow: none !important;
}

/* ── Cursor pointer on all interactive home elements ─────────────── */
.home-chapter .button,
.home-chapter .slide-carousel__btn,
.home-chapter .slide-carousel__dot,
.home-chapter .metric-tile,
.home-chapter .story-card[href] { cursor: pointer; }

/* ── Focus states: visible teal ring for keyboard nav ───────────── */
.home-chapter .button:focus-visible,
.home-chapter .slide-carousel__btn:focus-visible,
.home-chapter .slide-carousel__dot:focus-visible {
  outline: 2px solid var(--mdh-teal) !important;
  outline-offset: 3px !important;
}

/* ══════════════════════════════════════════════════════════════════
   PREMIUM FRONTEND UI — Luxury dark-mode override
   Supersedes industrial-brutalist card treatment on .home-chapter.
   No text changes. Pure visual upgrade.
   ══════════════════════════════════════════════════════════════════ */

/* ── Global photographic grain — removes digital sterility ──────── */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.028;
  pointer-events: none;
  z-index: 9000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* ── Kill scanlines — too harsh for luxury ──────────────────────── */
.home-chapter::after { display: none !important; }

/* ── Atmospheric deep-teal glow per section ─────────────────────── */
.home-chapter {
  overflow: hidden;
}

/* ── Restore card elegance: kill the 1-px hairline grid ────────── */
.home-chapter .card-grid {
  gap: 1.5rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* ── Glass cards with hover elevation ───────────────────────────── */
.home-chapter .card-grid .story-card {
  border: 1px solid hsl(180 60% 45% / 0.14) !important;
  border-radius: 14px !important;
  background: linear-gradient(
    145deg,
    hsl(215 28% 9% / 0.95) 0%,
    hsl(215 28% 7% / 0.98) 100%
  ) !important;
  box-shadow:
    0 1px 0 0 hsl(0 0% 100% / 0.05) inset,
    0 4px 24px hsl(0 0% 0% / 0.3) !important;
  transition:
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s,
    box-shadow 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .home-chapter .card-grid .story-card:hover {
    transform: translateY(-5px) !important;
    border-color: hsl(180 60% 45% / 0.38) !important;
    box-shadow:
      0 1px 0 0 hsl(0 0% 100% / 0.07) inset,
      0 16px 48px hsl(180 60% 38% / 0.14),
      0 4px 16px hsl(0 0% 0% / 0.35) !important;
    background: linear-gradient(
      145deg,
      hsl(215 28% 11% / 0.98) 0%,
      hsl(215 28% 8% / 1) 100%
    ) !important;
  }
}

/* ── Card titles: editorial Fraunces, NOT all-caps monospace ─────── */
.home-chapter .card-grid .story-card__title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(1rem, 1.8vw, 1.15rem) !important;
  font-variation-settings: 'wght' 600, 'SOFT' 70 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--mdh-ivory) !important;
  line-height: 1.3 !important;
  font-weight: normal !important;
  margin-bottom: 0.6rem !important;
}

/* ── Process cards: large ghost index watermark ──────────────────── */
.home-chapter .card-grid .story-card { position: relative; overflow: hidden; }
.home-chapter .card-grid .story-card::before {
  display: none !important; /* kill section-header rule on these */
}

/* ── Services cards (2-col): bigger, more feature-card feel ──────── */
.home-chapter .card-grid.card-grid--2 .story-card {
  padding: clamp(2rem, 4vw, 3rem) !important;
  border-left: 3px solid var(--mdh-teal) !important;
  border-top: 1px solid hsl(180 60% 45% / 0.14) !important;
}
.home-chapter .card-grid.card-grid--2 .story-card__title {
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
}

/* ── Pill buttons for luxury feel (not square) ───────────────────── */
.home-chapter .button {
  border-radius: 999px !important;
}

/* ── Metric band: keep structural, soften the hairlines ─────────── */
.home-chapter .metric-band {
  background: hsl(180 60% 42% / 0.1) !important;
  border-color: hsl(180 60% 42% / 0.18) !important;
}
.home-chapter .metric-tile {
  background: linear-gradient(
    170deg,
    hsl(215 30% 8%) 0%,
    hsl(215 30% 6%) 100%
  ) !important;
}
.home-chapter .metric-tile:hover {
  background: linear-gradient(
    170deg,
    hsl(215 30% 10%) 0%,
    hsl(215 30% 8%) 100%
  ) !important;
}
.home-chapter .metric-tile__value {
  text-shadow: 0 0 40px hsl(180 60% 45% / 0.3) !important;
}

/* ── Section header: keep micro-rule, refine it ─────────────────── */
.home-chapter .section-header::before {
  width: 2rem !important;
  height: 2px !important;
}

/* ── Reduced-motion: strip all transitions for accessibility ─────── */
@media (prefers-reduced-motion: reduce) {
  .home-chapter .card-grid .story-card {
    transition: none !important;
    will-change: auto !important;
  }
  .home-chapter .card-grid .story-card:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Revenue Cycle Management page — premium redesign
   ═══════════════════════════════════════════════════════════════════ */

/* Hero */
.rcm-hero {
  position: relative;
  background: hsl(215 25% 7%);
  padding-block: 7rem 8rem;
  overflow: hidden;
  border-bottom: 1px solid hsl(180 60% 35% / 0.2);
}
.rcm-hero__bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, hsl(180 50% 40% / 0.22) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 100% at 88% 50%, rgba(0,0,0,0.85) 0%, transparent 68%);
  pointer-events: none;
}
.rcm-hero__inner { max-width: 72ch; }
.rcm-hero__kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  color: var(--mdh-teal);
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.rcm-hero__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  color: var(--mdh-ivory);
  margin: 0 0 1.75rem;
  font-weight: 700;
}
.rcm-hero__copy {
  color: hsl(215 15% 72%);
  font-size: 1.05rem;
  line-height: 1.72;
  margin: 0 0 1rem;
  max-width: 68ch;
}
.rcm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* Stats band */
.rcm-stats {
  background: hsl(215 20% 97%);
  padding-block: 4rem;
  border-bottom: 1px solid hsl(215 15% 90%);
}
.rcm-stats__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  text-align: center;
}
.rcm-stat__num {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  color: hsl(215 40% 18%);
  margin: 0 0 0.5rem;
  line-height: 1;
}
.rcm-stat__pct {
  font-size: 0.55em;
  vertical-align: super;
}
.rcm-stat__label {
  font-size: 0.875rem;
  color: hsl(215 15% 45%);
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Why RCM Matters */
.rcm-why { padding-block: 6rem; }
.rcm-why__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.rcm-why__text { min-width: 0; }
.rcm-why__media { min-width: 0; border-radius: 12px; overflow: hidden; }
.rcm-why__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  color: var(--mdh-ivory);
  margin: 0 0 1.25rem;
  line-height: 1.15;
}
.rcm-why__intro {
  color: hsl(215 15% 68%);
  margin: 0 0 1.5rem;
  line-height: 1.72;
}
.rcm-why__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.rcm-why__list li {
  color: hsl(215 15% 72%);
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.6;
}
.rcm-why__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mdh-teal);
}
.rcm-why__img { width: 100%; height: auto; display: block; }

/* Comprehensive RCM Services — alternating image + card rows */
.rcm-services-section { padding-block: 6rem; }
.rcm-services-section .section-header { text-align: center; margin-inline: auto; margin-bottom: 3.5rem; }
.rcm-svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media card";
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 2rem;
  min-width: 0;
}
.rcm-svc-row--reverse { grid-template-areas: "card media"; }
.rcm-svc-row__media {
  grid-area: media;
  min-width: 0;
  overflow: hidden;
}
.rcm-svc-row__media img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
}
.rcm-svc-row__card {
  grid-area: card;
  background: hsl(218 55% 16%);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.rcm-svc-row__num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.73rem;
  color: var(--mdh-teal);
  letter-spacing: 0.1em;
  margin-bottom: 0.875rem;
  display: block;
}
.rcm-svc-row__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--mdh-ivory);
  margin: 0 0 1rem;
  line-height: 1.2;
}
.rcm-svc-row__copy {
  color: hsl(215 15% 72%);
  font-size: 0.95rem;
  line-height: 1.72;
  margin: 0;
}

/* What Sets Us Apart */
.rcm-services-section .section-header { text-align: center; }

.rcm-apart { padding-block: 6rem; }
.rcm-apart__title { text-align: center; margin-bottom: 3.5rem; }
.rcm-apart__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.rcm-apart__col { min-width: 0; }
.rcm-apart__col-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mdh-teal);
  margin: 0 0 1.25rem;
  border-bottom: 1px solid hsl(180 60% 35% / 0.28);
  padding-bottom: 0.875rem;
}
.rcm-apart__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rcm-apart__list li {
  color: hsl(215 15% 72%);
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.6;
}
.rcm-apart__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mdh-teal);
}

/* Partnership That Delivers — two-column, light */
.rcm-partnership { padding-block: 6rem; }
.rcm-partnership__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.rcm-partnership__media { border-radius: 12px; overflow: hidden; }
.rcm-partnership__img { display: block; width: 100%; height: auto; border-radius: 12px; }
.rcm-partnership__title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  color: var(--mdh-ivory);
  margin: 0 0 1.25rem;
  line-height: 1.15;
}
.rcm-partnership__copy {
  color: hsl(215 15% 65%);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 1rem;
}
.rcm-partnership__proven-head {
  font-family: 'Fraunces', serif;
  font-size: 1.35rem;
  color: var(--mdh-ivory);
  margin: 2rem 0 1.25rem;
}
@media (max-width: 860px) {
  .rcm-partnership__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .rcm-partnership__media { order: -1; }
}

/* Proven Results */
.rcm-proven { padding-block: 6rem; }
.rcm-proven__title { text-align: center; margin-bottom: 3rem; }
.rcm-proven__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.rcm-proven__item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: hsl(215 15% 35%);
}
/* Teal triangle bullet (right-pointing) instead of the filled check circle. */
.rcm-proven__check {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--mdh-teal);
  margin-top: 0.5em;
}

/* CTA subtitle — used on RCM final CTA */
.cta-halftone__subtitle {
  color: hsl(215 15% 68%);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 52ch;
  text-align: center;
  margin: -0.5rem 0 0;
}

/* RCM page responsive */
@media (max-width: 900px) {
  .rcm-stats__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rcm-why__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .rcm-why__media { order: -1; }
  .rcm-apart__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .rcm-svc-row,
  .rcm-svc-row--reverse {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "card";
  }
}
@media (max-width: 540px) {
  .rcm-hero { padding-block: 4.5rem 5.5rem; }
  .rcm-hero__actions { flex-direction: column; }
  .rcm-stats { padding-block: 2.5rem; }
  .rcm-stats__inner { gap: 1.25rem; }
  .rcm-svc-row__card { padding: 2rem 1.5rem; }
  .rcm-partnership { padding-block: 4.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   UI/UX PRO MAX — POLISH PASS 2
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Metric value: prevent "8–9.5%" from wrapping on en-dash ──── */
.metric-tile__value { white-space: nowrap; }
@media (max-width: 640px) {
  .home-chapter .metric-tile__value {
    font-size: clamp(1.5rem, 7.5vw, 2.6rem) !important;
  }
  .home-chapter .metric-tile {
    padding: 1.5rem 0.85rem !important;
  }
}

/* ── 2. Button tactile press (active state scale) ────────────────── */
@media (hover: hover) and (pointer: fine) {
  .button:active {
    transform: scale(0.97) translateY(0) !important;
    transition-duration: 80ms !important;
  }
}
/* Touch devices: immediate press feedback via opacity */
@media (hover: none) {
  .button:active { opacity: 0.82 !important; }
}

/* ── 3. Desktop nav: animated underline on link hover/active ─────── */
.desktop-nav a.nav-link {
  position: relative;
}
.desktop-nav a.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 0; right: 0;
  height: 1.5px;
  background: var(--mdh-teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 1px;
}
.desktop-nav a.nav-link.is-active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .desktop-nav a.nav-link:hover::after { transform: scaleX(1); }
}

/* ── 4. Mobile quick-links: single-row horizontal scroll ─────────── */
.drawer-quick-links {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
  /* fade edges to signal scrollability */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 8px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 8px), transparent 100%);
}
.drawer-quick-links::-webkit-scrollbar { display: none; }
/* Ensure chips don't shrink */
.drawer-quick-link,
.drawer-group { flex-shrink: 0; }

/* ── 5. Global focus rings: consistent teal outline everywhere ────── */
:focus-visible {
  outline: 2px solid var(--mdh-teal) !important;
  outline-offset: 3px !important;
}
/* Preserve custom radii on specific components */
.nav-dropdown__item:focus-visible { border-radius: 10px !important; }
.slide-carousel__btn:focus-visible,
.slide-carousel__dot:focus-visible,
.a11y-fab:focus-visible { border-radius: 50% !important; }
.button:focus-visible { border-radius: 999px !important; }

/* ── 6. Form fields: smooth hover + focus transitions ────────────── */
.form-field {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .form-field:hover {
    border-color: hsl(180 60% 40% / 0.4) !important;
  }
}
.form-field:focus-within {
  border-color: var(--mdh-teal) !important;
  box-shadow: 0 0 0 3px hsl(180 60% 40% / 0.14) !important;
}
/* Ensure placeholders meet contrast on dark bg */
html.dark .form-field input::placeholder,
html.dark .form-field textarea::placeholder {
  color: hsl(215 15% 55%) !important;
}

/* ── 7. RCM service rows: subtle glow on hover ───────────────────── */
@media (hover: hover) and (pointer: fine) {
  .rcm-svc-row {
    transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .rcm-svc-row:hover {
    box-shadow: 0 6px 44px hsl(180 60% 35% / 0.2), 0 0 0 1px hsl(180 60% 42% / 0.16);
  }
}

/* ── 8. Results panels: add link cursor + subtle border on hover ──── */
.results-panel {
  cursor: default;
  transition: none;
}
.results-panel:has(a) { cursor: pointer; }

/* ── 9. Section-to-section shadow: prevent harsh edge cuts ───────── */
.home-chapter + .home-chapter {
  box-shadow: inset 0 1px 0 hsl(180 60% 42% / 0.12);
}

/* ── 10. Testimonial card: min-height so 4-col grid stays even ─────  */
@media (min-width: 880px) {
  .home-chapter .card-grid:has(.story-card__meta) {
    align-items: stretch;
  }
  .home-chapter .card-grid .story-card:has(.story-card__meta) {
    min-height: 280px;
  }
}

/* ── 11. Reduce-motion guard for all new transitions ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .desktop-nav a.nav-link::after { transition: none !important; }
  .rcm-svc-row { transition: none !important; }
  .form-field { transition: none !important; }
}

/* ── Desktop shell: generous horizontal gutters (content sections) ── */
@media (min-width: 960px) {
  .shell {
    width: min(1200px, calc(100vw - 140px)) !important;
  }

  /* Wide-but-capped sections — stats band + testimonials: wider than
     content, still visibly inset (heroes are now full-bleed below) */
  .rcm-hero .shell,
  .home-chapter .shell,
  .rcm-stats .shell,
  .page-section:has(.metric-band) .shell,
  .page-section:has(.story-card) .shell {
    width: min(1360px, calc(100vw - 60px)) !important;
    max-width: none;
  }

  /* Full-bleed structural frame — nav, ALL heroes (home + page), bottom
     CTA, footer share the same outer edge for a consistent frame */
  .site-header .shell,
  .hero .shell,
  .cta-halftone .shell,
  .site-footer .shell {
    width: calc(100vw - 48px) !important;
    max-width: none;
  }
}
@media (min-width: 1400px) {
  .shell {
    width: min(1200px, calc(100vw - 200px)) !important;
  }

  .rcm-hero .shell,
  .home-chapter .shell,
  .rcm-stats .shell,
  .page-section:has(.metric-band) .shell,
  .page-section:has(.story-card) .shell {
    width: min(1360px, calc(100vw - 80px)) !important;
    max-width: none;
  }

  /* Full-bleed structural frame — nav, ALL heroes (home + page), bottom
     CTA, footer share the same outer edge for a consistent frame */
  .site-header .shell,
  .hero .shell,
  .cta-halftone .shell,
  .site-footer .shell {
    width: calc(100vw - 48px) !important;
    max-width: none;
  }
}

/* ── Service row bullet lists ─────────────────────────────────────── */
.rcm-svc-row__bullets {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rcm-svc-row__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: hsl(215 20% 80%);
}
.rcm-svc-row__bullets li::before {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 0.3em;
  border-top: 2px solid var(--mdh-teal);
  border-right: 2px solid var(--mdh-teal);
  transform: rotate(45deg);
}

/* ════════════════════════════════════════════════════════════════════
   AWARD-WINNING MOBILE NAV — hamburger, full-screen glass overlay,
   scroll-reactive header. Gated to <960px; desktop nav untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ── Scroll-reactive header ──────────────────────────────────────────
   Transform the CARD, never .site-header (a transform on the header
   would become the containing block for the fixed overlay). */
.nav-card {
  transition: transform 0.45s var(--mdh-ease), background 0.25s var(--mdh-ease),
    border-color 0.25s var(--mdh-ease), box-shadow 0.25s var(--mdh-ease);
  will-change: transform;
}
.site-header.is-hidden .nav-card {
  transform: translateY(calc(-100% - 24px));
}

/* ── Hamburger toggle ────────────────────────────────────────────────*/
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 13px;
  cursor: pointer;
  color: var(--ink);
  border: 1px solid rgba(9, 53, 122, 0.16);
  background: rgba(9, 53, 122, 0.05);
  transition: background 0.2s var(--mdh-ease), border-color 0.2s var(--mdh-ease);
}
html.dark .nav-toggle {
  color: var(--mdh-ivory);
  border-color: hsla(0, 0%, 100%, 0.14);
  background: hsla(0, 0%, 100%, 0.05);
}
.nav-toggle:hover { border-color: var(--mdh-teal); }
.nav-toggle__bars { position: relative; width: 22px; height: 16px; }
.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s var(--mdh-ease), opacity 0.2s var(--mdh-ease);
}
.nav-toggle__bar--1 { top: 0; }
.nav-toggle__bar--2 { top: 7px; }
.nav-toggle__bar--3 { top: 14px; }
.nav-toggle.is-active .nav-toggle__bar--1 { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle__bar--2 { opacity: 0; }
.nav-toggle.is-active .nav-toggle__bar--3 { transform: translateY(-7px) rotate(-45deg); }

/* Hide inline CTA on mobile (it lives in the overlay); show hamburger.
   Both flip at >=960px. */
.button--nav-cta { display: none; }
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .button--nav-cta { display: inline-flex; }
}

/* Keep logo + morphed X clickable above the overlay */
body.mobile-nav-open .site-header { z-index: 210; }
body.mobile-nav-open .nav-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.is-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* ── Full-screen glass overlay ───────────────────────────────────────*/
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: block;
}
.mobile-nav[hidden] { display: none; }

.mobile-nav__bg {
  position: absolute;
  inset: 0;
  background: hsla(220, 60%, 5%, 0.55);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  opacity: 0;
  transition: opacity 0.4s var(--mdh-ease);
}
.mobile-nav.is-open .mobile-nav__bg { opacity: 1; }

.mobile-nav__panel {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(88px, 13vh, 124px) clamp(24px, 7vw, 48px) clamp(28px, 5vh, 46px);
  display: flex;
  flex-direction: column;
  background: hsla(220, 58%, 7%, 0.92);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--mdh-ease), transform 0.45s var(--mdh-ease);
}
.mobile-nav.is-open .mobile-nav__panel { opacity: 1; transform: none; }

.mobile-nav__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, hsl(180 60% 50% / 0.14) 1px, transparent 1px),
    radial-gradient(ellipse 75% 55% at 82% 8%, hsl(180 55% 30% / 0.32) 0%, transparent 70%);
  background-size: 22px 22px, 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse 95% 65% at 82% 6%, black 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 95% 65% at 82% 6%, black 0%, transparent 78%);
}

.mobile-nav__list { position: relative; z-index: 1; display: flex; flex-direction: column; }

/* Large editorial links + accordion summaries */
.mnav-link {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-variation-settings: 'wght' 600, 'SOFT' 0, 'WONK' 0;
  font-weight: 600;
  color: var(--mdh-ivory);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  text-align: left;
  line-height: 1.08;
  padding: clamp(10px, 1.7vh, 17px) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.09);
  cursor: pointer;
}
.mnav-link.is-active { color: var(--mdh-teal); }
.mnav-chev {
  flex: none;
  color: var(--mdh-teal);
  transition: transform 0.3s var(--mdh-ease);
}
.mnav-acc.is-expanded .mnav-chev { transform: rotate(180deg); }

.mnav-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--mdh-ease);
}
.mnav-acc.is-expanded .mnav-acc__panel { grid-template-rows: 1fr; }
.mnav-acc__inner { overflow: hidden; display: flex; flex-direction: column; padding: 2px 0 6px; }
.mnav-sub {
  color: hsl(215 24% 72%);
  text-decoration: none;
  font-size: 1rem;
  padding: 9px 0 9px 2px;
  transition: color 0.2s var(--mdh-ease), transform 0.2s var(--mdh-ease);
}
.mnav-sub:hover, .mnav-sub:focus-visible { color: var(--mdh-teal-soft); transform: translateX(3px); }

/* Staggered entrance */
.mnav-row {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--mdh-ease), transform 0.5s var(--mdh-ease);
}
.mobile-nav.is-open .mnav-row { opacity: 1; transform: none; }
.mobile-nav.is-open .mnav-row:nth-child(1) { transition-delay: 0.07s; }
.mobile-nav.is-open .mnav-row:nth-child(2) { transition-delay: 0.12s; }
.mobile-nav.is-open .mnav-row:nth-child(3) { transition-delay: 0.17s; }
.mobile-nav.is-open .mnav-row:nth-child(4) { transition-delay: 0.22s; }
.mobile-nav.is-open .mnav-row:nth-child(5) { transition-delay: 0.27s; }
.mobile-nav.is-open .mnav-row:nth-child(6) { transition-delay: 0.32s; }
.mobile-nav.is-open .mnav-row:nth-child(7) { transition-delay: 0.37s; }

/* Foot: CTA + concierge contact */
.mobile-nav__foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: clamp(20px, 3vh, 30px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--mdh-ease) 0.32s, transform 0.5s var(--mdh-ease) 0.32s;
}
.mobile-nav.is-open .mobile-nav__foot { opacity: 1; transform: none; }
.mobile-nav__cta { display: flex; justify-content: center; width: 100%; text-align: center; }
.mobile-nav__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  justify-content: space-between;
  margin-top: 16px;
}
.mobile-nav__contact a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: hsl(215 22% 72%);
  text-decoration: none;
  font-size: 0.9rem;
}
.mobile-nav__contact a:hover, .mobile-nav__contact a:focus-visible { color: var(--mdh-teal-soft); }
.mobile-nav__contact svg { color: var(--mdh-teal); flex: none; }

/* High-contrast / no-blur fallback keeps overlay legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-nav__panel { background: hsl(220 58% 7%); }
  .mobile-nav__bg { background: hsla(220, 60%, 5%, 0.9); }
}

/* Reduced motion: collapse the entrance, no slides */
@media (prefers-reduced-motion: reduce) {
  .nav-card, .mobile-nav__panel, .mobile-nav__bg, .mnav-row, .mobile-nav__foot,
  .nav-toggle__bar, .mnav-chev, .mnav-acc__panel { transition-duration: 0.001ms !important; }
  .mnav-row, .mobile-nav__foot { opacity: 1; transform: none; }
}
/* Widget-toggled reduced motion: guarantee overlay content is visible
   instantly, independent of any transition timing. */
html[data-a11y-motion="reduce"] .mobile-nav.is-open .mnav-row,
html[data-a11y-motion="reduce"] .mobile-nav.is-open .mobile-nav__foot {
  opacity: 1 !important;
  transform: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   REUSABLE CONTENT PRIMITIVES — media band (text + ratio'd photo) and
   rich bullet list. Used by /mdbilling-port to keep source lists as lists
   and place the supplied image assets.
   ════════════════════════════════════════════════════════════════════ */
.media-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.media-band--left .media-band__media { order: -1; }
.media-band__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  color: var(--mdh-ivory);
  margin: 0 0 1.25rem;
}
.media-band__copy {
  color: hsl(215 16% 70%);
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0 0 1rem;
}
/* Closing summary paragraph below a media-band's bullet list — separate it
   from the list so it doesn't read as another bullet. */
.media-band__copy--closer { margin-top: 1.35rem; }
.media-band__media {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px hsl(220 70% 3% / 0.45);
}
.media-band__img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
  .media-band { grid-template-columns: 1fr; gap: 2rem; }
  .media-band--left .media-band__media,
  .media-band__media { order: -1; }
}

/* Rich bullet list — keeps source lists as lists (never collapsed to prose) */
.rich-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.7rem;
}
.rich-list li {
  position: relative;
  padding-left: 1.6rem;
  color: hsl(215 16% 76%);
  font-size: 0.97rem;
  line-height: 1.6;
}
.rich-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--mdh-teal);
  border-right: 2px solid var(--mdh-teal);
  transform: rotate(45deg);
}
.rich-list li strong { color: var(--mdh-ivory); font-weight: 600; }
.story-card .rich-list { margin-top: 1rem; }

/* stat_band() column variant (default is 4-up; credentialing uses 3-up) */
.rcm-stats__inner--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .rcm-stats__inner--cols-3 { grid-template-columns: 1fr; gap: 1.5rem; } }

/* media_band "Result:" payoff line + CCM/RPM intro "Why" box */
.media-band__result { color: hsl(215 16% 80%); font-size: 1rem; line-height: 1.6; margin: 1.25rem 0 0; }
.media-band__result strong { color: var(--mdh-teal-soft); }
.media-band__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mdh-teal); margin: 0 0 1rem; }
.why-box { border: 1px solid hsla(0, 0%, 100%, 0.16); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.25rem); background: hsla(0, 0%, 100%, 0.02); }
.why-box__title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--mdh-ivory); margin: 0 0 0.5rem; }
.why-box .rich-list { margin-top: 1rem; }

/* ============================================================
   HERO ALIGNMENT — inner-page heroes mirror the home hero's
   brand-scene logo (same scale, shadow, and float). Width, teal
   emphasis, the particle flow, card-strip, and grid/title scale are
   already shared; this unifies the one remaining delta (the logo).
   ============================================================ */
.hero .hero-brand-scene__image {
  opacity: 1;
  transform: scale(0.78);
  transform-origin: center;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.32));
}
@media (min-width: 960px) {
  .page-hero .hero-brand-scene--page .hero-brand-scene__card { transform: translateY(-42px); }
}
@media (min-width: 1400px) {
  .page-hero .hero-brand-scene--page .hero-brand-scene__card { transform: translateY(-200px); }
}

/* ============================================================
   FULLY-LIGHT MODE  (html:not(.dark))
   Below the dark hero/nav band, EVERY section is light: light page bg,
   cream panels, white cards — with dark ink text, slate body, and
   AA-safe teal-ink accents. Formerly-dark panels/cards/tiles are
   lightened here and in the FULLY-LIGHT ADDITIONS block at end of file.
   Only .nav-card and the hero frames stay dark. Dark mode unaffected.
   ============================================================ */
/* Primary + nav CTA — teal fill + navy-deep text (same as dark mode);
   was navy-deep text on no fill in light → invisible. */
/* Quiet the light shell to one calm temperature band: lower the chroma of both
   near-whites so the warm ivory panels stop reading yellow and the cool body
   stops reading saturated blue. Same hues, ~half chroma. Dark mode untouched
   (its --bg/--surface tokens live under html.dark). */
html:not(.dark) {
  --bg: #f7f8fb;
  --bg-soft: #f3f5f9;
  --surface: rgba(250, 249, 246, 0.94);
  --surface-strong: rgba(249, 247, 243, 0.96);
}

/* Primary / nav CTA → deep operational teal with white text. The brand spec
   pairs white on operational teal; navy text at this depth would fail AA, so we
   keep white (clears 4.5:1 across the gradient). Light mode only — the dark-mode
   button keeps its brighter gradient via the html.dark rule above. */
html:not(.dark) .button--primary,
html:not(.dark) .button--nav-cta {
  background: linear-gradient(135deg, #0c7a6e, #0a5d54) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 28px hsla(174, 60%, 20%, 0.30) !important;
}
/* Halftone CTA button is a bespoke primary — match the deepened operational
   teal + white in light mode so it doesn't read as the old candy teal. Dark mode
   keeps its bright fill (consistent with the dark-mode primaries). */
html:not(.dark) .cta-halftone__btn {
  background: linear-gradient(135deg, #0c7a6e, #0a5d54) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
html:not(.dark) .cta-halftone__btn:hover {
  background: linear-gradient(135deg, #0e8b7d, #0b6a5f) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 28px hsla(174, 60%, 18%, 0.34) !important;
}
/* Section headings — dark ink on light panels; stay light on dark accent panels. */
html:not(.dark) .section-title { color: var(--ink); }
html:not(.dark) .page-section--dark .section-title,
html:not(.dark) .section-panel--dark .section-title { color: var(--ink); }
/* Header tagline sits in the dark hero/nav band → keep it light. */
html:not(.dark) .brand-tagline span { color: rgba(232, 241, 255, 0.86); }
/* Teal small labels/headings on LIGHT surfaces — darken to clear AA (#007f71 ≈ 4.4:1). */
html:not(.dark) .footer-column h3,
html:not(.dark) .contact-mini-card__label { color: #006257; }
/* Home-chapter section headings/intro sit on the LIGHT ivory panel but the
   dark-first rules force ivory/gray text with !important → override to dark ink.
   Dark accent panels (--dark) and media-row carousels keep light text. */
html:not(.dark) .home-chapter .section-title { color: var(--ink) !important; }
html:not(.dark) .home-chapter .section-copy { color: #41506a !important; }
html:not(.dark) .home-chapter .section-panel--dark .section-title,
html:not(.dark) .home-chapter .media-row .section-title { color: var(--ink) !important; }
html:not(.dark) .home-chapter .section-panel--dark .section-copy,
html:not(.dark) .home-chapter .media-row .section-copy { color: var(--lm-slate) !important; }
/* Nav is part of the dark hero band → keep it solidly dark with light text in
   light mode (reliable when the sticky nav scrolls over light content). */
html:not(.dark) .nav-card { background: rgba(8, 20, 44, 0.9) !important; border-color: rgba(158, 197, 255, 0.16) !important; }
html:not(.dark) .nav-link { color: rgba(236, 244, 255, 0.9); }
html:not(.dark) .nav-link.is-active,
html:not(.dark) .nav-link:hover { color: var(--mdh-teal-soft); }
/* Footer links on the light page — explicit dark ink (token resolution was
   flaky in light mode). */
html:not(.dark) .footer-nav .footer-column a,
html:not(.dark) .footer-column a,
html:not(.dark) .footer-bottom__links a,
html:not(.dark) .footer-backtop { color: #41506a !important; }
/* Secondary/ghost buttons on light surfaces (section CTAs, footer) — dark ink on
   a near-white fill. The dark-hero secondary buttons keep their own (more
   specific) light-on-glass treatment. */
html:not(.dark) .button--secondary,
html:not(.dark) .button--ghost {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(9, 53, 122, 0.24) !important;
}
/* Media bands (text+image rows) default to the LIGHT page in light mode → their
   dark-first ivory/gray text fails AA. Make them dark ink; bands explicitly
   themed dark (.page-section--dark) keep their light text. */
html:not(.dark) .media-band__title { color: var(--ink); }
html:not(.dark) .media-band__copy { color: #41506a; }
html:not(.dark) .media-band__eyebrow { color: #006257; }
html:not(.dark) .media-band__result { color: #41506a; }
html:not(.dark) .media-band__result strong { color: #006257; }
html:not(.dark) .page-section--dark .media-band__title { color: var(--ink); }
html:not(.dark) .page-section--dark .media-band__copy { color: var(--lm-slate); }
html:not(.dark) .page-section--dark .media-band__result { color: var(--lm-slate); }
html:not(.dark) .page-section--dark .media-band__result strong,
html:not(.dark) .page-section--dark .media-band__eyebrow { color: var(--teal-ink); }
/* A dark-themed media band keeps light text, but it has no background painter of
   its own — in dark mode it sits on the dark page, yet in light mode the section
   was transparent, leaving light text on the LIGHT page (illegible). Paint the
   dark surface in light mode so the band reads the same in both themes. (Scoped
   to media-band sections via :has so panel-based dark sections are untouched.) */
html:not(.dark) .page-section--dark:has(.media-band) {
  background: none;
}
/* Rich-list bullets are light (dark-first). On the LIGHT page (e.g. media-band
   lists) make them dark ink; keep them light inside dark panels & story cards. */
html:not(.dark) .rich-list li { color: #41506a; }
html:not(.dark) .rich-list li strong { color: var(--ink); }
html:not(.dark) .page-section--dark .rich-list li,
html:not(.dark) .section-panel--dark .rich-list li,
html:not(.dark) .story-card .rich-list li { color: var(--lm-slate); }
html:not(.dark) .page-section--dark .rich-list li strong,
html:not(.dark) .section-panel--dark .rich-list li strong,
html:not(.dark) .story-card .rich-list li strong { color: var(--ink); }
/* Muted helper/body copy that sits directly on a DARK panel in light mode
   (e.g. the free-audit lead form's small print) — lighten so it clears AA. */
html:not(.dark) .page-section--dark .lead-form__meta,
html:not(.dark) .section-panel--dark .lead-form__meta,
html:not(.dark) .page-section--dark .section-copy,
html:not(.dark) .section-panel--dark .section-copy { color: var(--lm-slate); }
/* RCM "Partnership That Delivers" bespoke section sits on the LIGHT page —
   its dark-first ivory/gray text needs dark ink in light mode. */
html:not(.dark) .rcm-partnership__title,
html:not(.dark) .rcm-partnership__proven-head { color: var(--ink); }
html:not(.dark) .rcm-partnership__copy { color: #41506a; }
/* Story-cards default to white-glass in light mode (great on light sections).
   On a DARK panel that white glass washes to mid-gray under the card's light
   text → fails. Use the dark-glass surface (same as dark mode) so light text
   on these cards stays legible. (metric-tiles keep their own opaque treatment.) */
html:not(.dark) .section-panel--dark .story-card,
html:not(.dark) .page-section--dark .story-card {
  background: var(--lm-card);
  border-color: var(--lm-border);
  box-shadow: var(--lm-shadow);
}
/* Testimonial pull-quote cards (:has(.story-card__meta)) carry ivory/teal text
   by design; dark mode gives them a dark card bg. On non-home pages in light
   mode they fell back to white-glass → light-on-light. Mirror the dark card so
   they read as dark pull-quotes on the light page. */
html:not(.dark) .home-chapter .story-card:has(.story-card__meta),
html:not(.dark) section .story-card:has(.story-card__meta) {
  background: var(--lm-card) !important;
  border: 1px solid var(--lm-border) !important;
  border-top: 2px solid var(--teal) !important;
}

/* ============================================================
   HERO SOCIAL ICONS — brand-teal LinkedIn / Facebook / Instagram,
   placed just left of the secondary "Contact Us" CTA in the home hero.
   The hero frame is dark in both themes, so teal-on-dark reads well.
   ============================================================ */
.home-hero__secondary-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--mdh-teal-soft);
  border: 1px solid hsla(178, 52%, 55%, 0.42);
  background: hsla(178, 50%, 45%, 0.1);
  transition: transform 0.25s var(--mdh-ease), background 0.25s ease,
    color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.hero-social__link svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .hero-social__link:hover {
    color: hsl(206 65% 10%);
    background: var(--mdh-teal);
    border-color: var(--mdh-teal);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px hsla(178, 50%, 35%, 0.42);
  }
}
.hero-social__link:focus-visible {
  outline: 2px solid var(--mdh-teal-soft);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-social__link { transition: none; }
  .hero-social__link:hover { transform: none; }
}
/* Mobile: hero actions stack full-width; keep the icons beside (left of) the
   Contact Us button rather than forcing the button to full width inside the row. */
@media (max-width: 640px) {
  .home-hero__secondary-row { width: 100%; }
  .home-hero__secondary-row .button { width: auto; flex: 1 1 auto; }
}

/* ============================================================
   HEADER LIGHT/DARK THEME TOGGLE — sits left of the nav CTA. The nav is dark in
   both themes, so the icon stays light. app.js wires #theme-toggle and swaps the
   sun/moon icons + persists the choice. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(176, 209, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: #eaf2ff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.2s ease;
}
.theme-toggle__icon { width: 19px; height: 19px; display: block; }
.theme-toggle__icon[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    background: hsla(178, 50%, 45%, 0.2);
    border-color: var(--mdh-teal-soft);
    color: var(--mdh-teal-soft);
    transform: translateY(-1px);
  }
}
.theme-toggle:focus-visible { outline: 2px solid var(--mdh-teal-soft); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

/* ============================================================
   FULLY-LIGHT ADDITIONS  (loads last; completes the light-mode pass)
   Lightens the remaining dark-first surfaces so light mode is fully
   light below the hero/nav band. Every rule is html:not(.dark).
   ============================================================ */

/* Formerly-dark section panels → cream surface + dark ink */
html:not(.dark) .page-section--dark .section-panel {
  background: linear-gradient(160deg, var(--surface), var(--surface-strong)) !important;
  color: var(--ink) !important;
}
html:not(.dark) .page-section--dark .section-copy,
html:not(.dark) .page-section--dark .story-card__copy,
html:not(.dark) .page-section--dark .process-stage__copy { color: var(--lm-slate) !important; }
html:not(.dark) .page-section--dark .process-stage__title { color: var(--ink) !important; }

/* General light-page text defaults below the hero */
html:not(.dark) .story-card__title { color: var(--ink); }
html:not(.dark) .story-card__copy { color: var(--lm-slate); }
html:not(.dark) .story-card__eyebrow { color: var(--teal-ink); }

/* Home-chapter industrial grid → Swiss-print LIGHT variant
   (white cells, teal hairlines, navy values, teal-ink labels) */
html:not(.dark) .home-chapter .metric-tile,
html:not(.dark) .home-chapter .card-grid .story-card { background: var(--lm-card) !important; }
html:not(.dark) .home-chapter .metric-tile__value { color: var(--ink) !important; text-shadow: none !important; }
html:not(.dark) .home-chapter .metric-tile__label,
html:not(.dark) .home-chapter .card-grid .story-card__title { color: var(--teal-ink) !important; }
html:not(.dark) .home-chapter .card-grid .story-card__copy { color: var(--lm-slate) !important; }

/* Light-mode depth: navy soft-shadow scale on the white service/testimonial cards
   — not the dark-mode black drop + white inset gloss leaking from the unscoped
   .home-chapter .card-grid .story-card rule above. */
html:not(.dark) .home-chapter .card-grid .story-card { box-shadow: var(--lm-shadow) !important; }
/* Metric tiles are static stat cells: pin the hover (the cream→cream swap was a no-op). */
html:not(.dark) .home-chapter .metric-tile:hover { background: var(--lm-card) !important; }
@media (hover: hover) and (pointer: fine) {
  html:not(.dark) .home-chapter .card-grid .story-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(46, 184, 184, 0.45) !important;
    box-shadow: 0 14px 34px rgba(8, 32, 78, 0.10), 0 2px 8px rgba(8, 32, 78, 0.06) !important;
    background: var(--lm-card) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.dark) .home-chapter .card-grid .story-card:hover {
    transform: none !important;
    box-shadow: 0 14px 34px rgba(8, 32, 78, 0.10), 0 2px 8px rgba(8, 32, 78, 0.06) !important;
    background: var(--lm-card) !important;
  }
}

/* Metric band keeps a calmer teal hairline grout; card grids (Services +
   Testimonials) are floating cards (gap:1.5rem) so never paint the container —
   matching dark mode and killing the light-mode teal slab specificity collision. */
html:not(.dark) .home-chapter .metric-band {
  background: hsl(178 48% 42% / 0.32) !important;
  border-color: hsl(178 48% 42% / 0.4) !important;
}
html:not(.dark) .home-chapter .card-grid {
  background: transparent !important;
  border: none !important;
}

/* Mission mono kicker → teal-ink (the bright --mdh-teal failed AA ~2.2:1 on white). */
html:not(.dark) .home-mission__kicker { color: var(--teal-ink); }

/* Light-mode photo shadows on the navy soft-shadow scale (base rules use a
   near-black 0.45–0.5 alpha shadow tuned for the dark page). */
html:not(.dark) .media-band__media { box-shadow: 0 24px 60px rgba(8, 32, 78, 0.12); }
html:not(.dark) .results-panel__media { background: var(--lm-card); border-color: var(--lm-border); box-shadow: var(--lm-shadow); }
html:not(.dark) .home-mission__media,
html:not(.dark) .home-mission__img { box-shadow: var(--lm-shadow); }

/* Testimonial pull-quotes on light cards: dark quote, teal-ink attribution */
html:not(.dark) .story-card:has(.story-card__meta) .story-card__copy,
html:not(.dark) .home-chapter .story-card:has(.story-card__meta) .story-card__copy { color: var(--lm-slate) !important; }
html:not(.dark) .story-card:has(.story-card__meta) .story-card__title { color: var(--ink) !important; }
html:not(.dark) .story-card:has(.story-card__meta) .story-card__meta,
html:not(.dark) .home-chapter .story-card:has(.story-card__meta) .story-card__meta { color: var(--teal-ink) !important; }

/* Closing CTA band (.cta-halftone) → soft light band, dark text */
html:not(.dark) .cta-halftone { background: var(--band-tint); border-top-color: var(--lm-border); }
html:not(.dark) .cta-halftone__bg { opacity: 0.4; }
html:not(.dark) .cta-halftone__title { color: var(--ink); }
html:not(.dark) .cta-halftone__subtitle { color: var(--lm-slate); }

/* Results panels ("Delivering results" 4-panel section) on light */
html:not(.dark) .results-panel__copy,
html:not(.dark) .results-header__copy { color: var(--lm-slate) !important; }
html:not(.dark) .results-header__title,
html:not(.dark) .results-panel__title { color: var(--ink) !important; }
html:not(.dark) .results-header__eyebrow,
html:not(.dark) .results-panel__index { color: var(--teal-ink) !important; }

/* RCM bespoke sections (rcm-why "Why RCM Matters", rcm-apart comparison) on light.
   rcm-stats is already a light band; rcm-partnership/proven handled above. */
html:not(.dark) .rcm-why__title { color: var(--ink) !important; }
html:not(.dark) .rcm-why__intro,
html:not(.dark) .rcm-why__list li,
html:not(.dark) .rcm-apart__list li { color: var(--lm-slate) !important; }
html:not(.dark) .rcm-why__list li strong,
html:not(.dark) .rcm-apart__list li strong { color: var(--ink) !important; }
html:not(.dark) .rcm-apart__col-head { color: var(--teal-ink) !important; }

/* Contact form: dark navy input fields → light fields (fully-light), matching
   the already-light free-audit form. (.page--contact body class is shared by
   both; the free-audit fields stay white either way.) */
html:not(.dark) .page--contact .form-field {
  background: var(--lm-card) !important;
  border-color: var(--lm-border) !important;
  box-shadow: var(--lm-shadow) !important;
}
html:not(.dark) .page--contact .form-field label,
html:not(.dark) .page--contact .form-field span { color: var(--lm-slate) !important; }
html:not(.dark) .page--contact .form-field input,
html:not(.dark) .page--contact .form-field textarea,
html:not(.dark) .page--contact .form-field select { color: var(--ink) !important; }
html:not(.dark) .page--contact .form-field input::placeholder,
html:not(.dark) .page--contact .form-field textarea::placeholder { color: var(--muted) !important; }

/* Free-audit multi-step assessment: dark-first component → light cards + dark text */
html:not(.dark) .assessment-step,
html:not(.dark) .assessment-option__surface,
html:not(.dark) .assessment-input textarea,
html:not(.dark) .assessment-input input,
html:not(.dark) .assessment-input select {
  background: var(--lm-card) !important;
  border-color: var(--lm-border) !important;
  color: var(--ink) !important;
}
html:not(.dark) .assessment-step { box-shadow: var(--lm-shadow) !important; }
html:not(.dark) .assessment-option input:checked + .assessment-option__surface {
  border-color: var(--teal) !important;
  background: hsl(178 48% 95%) !important;
  box-shadow: 0 14px 34px hsla(178, 50%, 40%, 0.18) !important;
}
html:not(.dark) .assessment-progress__track { background: rgba(9, 53, 122, 0.1) !important; }
html:not(.dark) .assessment-step__title,
html:not(.dark) .assessment-question legend,
html:not(.dark) .assessment-option__label { color: var(--ink) !important; }
html:not(.dark) .assessment-step__copy,
html:not(.dark) .assessment-shell__note,
html:not(.dark) .assessment-progress__label,
html:not(.dark) .assessment-input span { color: var(--lm-slate) !important; }
html:not(.dark) .assessment-step__eyebrow { color: var(--teal-ink) !important; }
html:not(.dark) .assessment-question.is-invalid legend { color: #b3261e !important; }

/* Revenue Health Assessment — light-mode surfaces for the single-page layout + panel */
html:not(.dark) .assessment-questions .assessment-question,
html:not(.dark) .assessment-panel {
  background: var(--lm-card) !important;
  border-color: var(--lm-border) !important;
  box-shadow: var(--lm-shadow) !important;
}
html:not(.dark) .assessment-question__prompt { color: var(--ink) !important; }
html:not(.dark) .assessment-question__number { color: var(--teal-ink) !important; }
html:not(.dark) .assessment-focus-pill {
  border-color: var(--lm-border) !important;
  color: var(--lm-slate) !important;
}
html:not(.dark) .assessment-option__key {
  background: var(--surface-strong) !important;
  border-color: var(--lm-border) !important;
  color: var(--ink) !important;
}
html:not(.dark) .assessment-panel__eyebrow { color: var(--teal-ink) !important; }
html:not(.dark) .assessment-score__value { color: var(--ink) !important; }
html:not(.dark) .assessment-score__label,
html:not(.dark) .assessment-score__note,
html:not(.dark) .assessment-output-row,
html:not(.dark) .assessment-gate__note,
html:not(.dark) .assessment-gate__hint,
html:not(.dark) .assessment-panel__fineprint,
html:not(.dark) .assessment-focus__next { color: var(--lm-slate) !important; }
html:not(.dark) .assessment-output { border-top-color: var(--lm-border) !important; }
html:not(.dark) .assessment-output-row { border-bottom-color: var(--lm-border) !important; }
html:not(.dark) .assessment-focus__title { color: var(--ink) !important; }
html:not(.dark) .assessment-focus-list li {
  background: var(--surface-strong) !important;
  border-left-color: var(--teal) !important;
}
html:not(.dark) .assessment-focus-list strong { color: var(--ink) !important; }
html:not(.dark) .assessment-focus-list span { color: var(--lm-slate) !important; }
html:not(.dark) .assessment-band[data-tone="strong"],
html:not(.dark) .assessment-band[data-tone="stable"] {
  border-color: rgba(0, 127, 113, 0.4) !important;
  background: hsl(178 48% 95%) !important;
  color: #054a41 !important;
}
html:not(.dark) .assessment-band[data-tone="mixed"],
html:not(.dark) .assessment-band[data-tone="risk"] {
  border-color: rgba(180, 120, 40, 0.45) !important;
  background: #fff3d6 !important;
  color: #6f4a10 !important;
}
html:not(.dark) .assessment-band[data-tone="urgent"] {
  border-color: rgba(192, 57, 43, 0.5) !important;
  background: #fdeae7 !important;
  color: #8f2b20 !important;
}

/* Lead-form opt-in switches — light mode */
html:not(.dark) .form-optin__switch {
  background: rgba(9, 53, 122, 0.16) !important;
  border-color: var(--lm-border) !important;
}
html:not(.dark) .form-optin input:checked + .form-optin__switch {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
}
html:not(.dark) .form-optin__text { color: var(--lm-slate) !important; }
html:not(.dark) .form-optin__icon { color: var(--teal-ink) !important; }

/* Blog card carousel — light mode */
html:not(.dark) .blog-slide__inner {
  background: var(--lm-card) !important;
  border-color: var(--lm-border) !important;
  box-shadow: var(--lm-shadow) !important;
}
html:not(.dark) .blog-slide:hover .blog-slide__inner,
html:not(.dark) .blog-slide:focus-visible .blog-slide__inner {
  border-color: rgba(0, 127, 113, 0.4) !important;
}
html:not(.dark) .blog-slide__title { color: var(--ink) !important; }
html:not(.dark) .blog-slide__copy { color: var(--lm-slate) !important; }
html:not(.dark) .blog-slide__eyebrow,
html:not(.dark) .blog-slide__cta { color: var(--teal-ink) !important; }
html:not(.dark) .blog-slide__meta { color: var(--muted) !important; }

/* Blog article prose — light mode */
html:not(.dark) .blog-article__h2 { color: var(--ink) !important; }
html:not(.dark) .blog-article__p { color: var(--lm-slate) !important; }
html:not(.dark) .blog-article__p strong { color: var(--ink) !important; }
html:not(.dark) .blog-article__list { color: var(--lm-slate) !important; }
html:not(.dark) .blog-article a { color: var(--teal-ink) !important; }

/* Misc teal chips/labels that sit on teal-tinted surfaces → AA teal-ink on light */
html:not(.dark) .report-preview__header span { color: var(--teal-ink) !important; }
/* "Why … Matter" callout box title (CCM/RPM, credentialing) on light */
html:not(.dark) .why-box__title { color: var(--ink) !important; }

/* ============================================================
   ACCESSIBILITY FAB — premium matte finish (navy + white)
   Overrides the Rosecraft hub's glossy "plastic sphere" FAB with a deep
   MATTE brand-NAVY disc + white accessibility icon. Scoped with .rc-ui so it
   beats the hub's injected styles by specificity AND survives hub regeneration
   (never needs re-applying inside mdb-accessibility-hub.js). Depth comes from a
   layered soft shadow + a thin light hairline ring — the ring also keeps the
   navy disc legible on the near-black dark-mode page background.
   ============================================================ */
.rc-ui .rc-fab {
  background: linear-gradient(180deg, #12408c, #0a2a63) !important; /* deep matte navy, diffuse top-down shading (no specular) */
  color: #ffffff !important;                                        /* white icon (currentColor) */
  border: 1px solid hsla(214, 70%, 86%, 0.28) !important;           /* faint cool hairline edge — pops navy on dark pages */
  box-shadow: 0 2px 5px rgba(3, 12, 30, 0.34),                      /* tight contact shadow */
    0 14px 30px -10px rgba(3, 12, 30, 0.52) !important;             /* soft ambient shadow */
}
.rc-ui .rc-fab:hover {
  box-shadow: 0 3px 7px rgba(3, 12, 30, 0.4),
    0 22px 46px -10px rgba(3, 12, 30, 0.6) !important;              /* lift via shadow only — no gloss */
}
.rc-ui .rc-fab svg { filter: none !important; width: 31px; height: 31px; }
/* The decorative liquid blob behind the FAB was still the hub's Rosecraft
   teal, reading as a teal outer circle around the navy disc. Recolor it to
   the same dark-blue family (slightly lighter highlight so the halo still
   separates from the deeper disc). The collapsed mini-bubble matches. */
.rc-ui .rc-blob {
  background: radial-gradient(120% 120% at 34% 26%, #3f6db6, #1c478f 58%, #0c2f66) !important;
}
.rc-ui .rc-bubble {
  background: radial-gradient(120% 120% at 34% 26%, #3f6db6, #16407f 62%, #0a2a63) !important;
  color: #ffffff !important;
}
/* Panel close button: 34px visual -> 44px minimum hit target (WCAG 2.5.5) */
.rc-ui .rc-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* Panel-header chip → same matte navy mark (keeps the FAB identity in the panel) */
.rc-ui .rc-head-chip {
  background: linear-gradient(180deg, #12408c, #0a2a63) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px -8px rgba(3, 12, 30, 0.54) !important;
}
.rc-ui .rc-head-chip svg { width: 26px; height: 26px; }

/* A11y hardening: when the hub enlarges text (text size / zoom, up to 2x), long
   words in site content must WRAP, not clip. [data-rc-page] wraps the site body
   (never the hub UI), so this only touches page content. overflow-wrap:anywhere
   is inert at default sizes — it breaks a word only when it would overflow. */
[data-rc-page] h1, [data-rc-page] h2, [data-rc-page] h3, [data-rc-page] h4,
[data-rc-page] p, [data-rc-page] li, [data-rc-page] a,
[data-rc-page] .section-title, [data-rc-page] .results-header__title,
[data-rc-page] .results-panel__title, [data-rc-page] .story-card__title,
[data-rc-page] .home-mission__headline {
  overflow-wrap: anywhere;
}

/* Carousel prev/next arrows + dots → brand navy in light mode (teal stays in
   dark mode, where navy would disappear on the dark page). */
html:not(.dark) .slide-carousel__btn { color: var(--navy); border-color: rgba(9, 53, 122, 0.62); } /* 3.9:1 UI boundary (WCAG 1.4.11) */
html:not(.dark) .slide-carousel__btn:hover { border-color: var(--navy); background: rgba(9, 53, 122, 0.1); }
html:not(.dark) .slide-carousel__dot { background: rgba(9, 53, 122, 0.4); background-clip: content-box; }
html:not(.dark) .slide-carousel__dot.is-active { background: var(--navy); background-clip: content-box; }

/* Homepage background → white/light in light mode: drop the dark top band +
   navy radials (they only render in dark mode). The hero frame and nav keep
   their own dark fills, so they read as dark elements on the white page. */
html:not(.dark) body.page--home {
  background: linear-gradient(180deg, var(--bg), var(--bg-soft)) !important;
}

/* The homepage header carries a dark-mode "atmosphere" glow (navy radials + a
   dark linear fade extending 18px below the nav) to blend the nav into the dark
   page. On the now-light page that glow just hazes the top-left, so drop its
   paint in light mode — the dark nav pill (.nav-card) keeps its own fill and
   sits cleanly on the light page, like the hero frame. Dark mode untouched. */
html:not(.dark) .page--home .site-header::before {
  background: none;
}

/* ============================================================
   HERO VERTICAL RHYTHM (issue: dead space between nav and hero)
   The gap was never padding — it was min-height: 820px stages with
   centered content. Home keeps the full hero but on a viewport-aware
   stage; interior pages get the compact variant below.
   ============================================================ */
:root {
  --hero-min-h: clamp(540px, 72vh, 680px); /* home hero stage (was 680/820px fixed) */
}
@media (min-width: 960px) {
  .page--home .home-hero__grid { min-height: var(--hero-min-h); }
}

/* ============================================================
   COMPACT INTERIOR HERO (.hero--compact) — geometry only, no colors,
   so WCAG AA is unaffected in dark and light. Applied by generate_pages.py
   hero() on every interior page; the homepage uses home_hero() (full).
   Must stay at the END of this file: the (0,3,0) card rules tie the
   translateY-lift rules earlier in this file and win by order.
   ============================================================ */
.hero--compact { padding: clamp(14px, 2.5vh, 20px) 0 16px; }
.hero--compact .page-hero__frame { padding: 20px; }
.hero--compact .hero__title { font-size: clamp(2.2rem, 3.6vw, 3.5rem); }
.hero--compact .hero-brand-scene--page { min-height: clamp(220px, 30vw, 380px); padding: 12px 8px; }
.hero--compact .hero-brand-scene--page .hero-brand-scene__card {
  min-height: 0;
  padding: 24px 20px;
  /* Neutralize the translateY(-42px/-200px) lifts tuned to the old 820px
     stage — inside the shorter compact frame they would clip the logo
     (frame is overflow:hidden). */
  transform: none;
}
.hero--compact .hero-brand-scene__image { width: min(100%, 330px); } /* x0.78 scale => ~257px rendered (~70% of full) */
@media (max-width: 640px) {
  /* Interior pages previously had NO mobile logo clamp (only home did) —
     the interior graphic rendered LARGER than home's on a 375px phone. */
  .hero--compact .hero-brand-scene__image { width: min(60vw, 230px); }
  .hero--compact .hero-brand-scene--page { min-height: clamp(180px, 44vw, 300px); }
}
@media (min-width: 960px) {
  .hero--compact { padding-top: clamp(16px, 2.5vh, 24px); }
  .hero--compact .page-hero__frame { padding: 28px; }
  .hero--compact .page-hero__grid { min-height: 420px; gap: 38px; }
  .hero--compact .hero-brand-scene--page { padding: 20px 12px 16px; }
  .hero--compact .hero-brand-scene--page .hero-brand-scene__card { min-height: 300px; padding: 32px 28px; }
}
@media (min-width: 1180px) {
  .hero--compact .page-hero__frame { padding: 30px clamp(32px, 4vw, 90px); }
  .hero--compact .page-hero__grid { min-height: 480px; max-width: 1720px; }
  .hero--compact .hero__title { font-size: clamp(2.4rem, 3.2vw, 3.8rem); }
  .hero--compact .hero-brand-scene--page .hero-brand-scene__card { min-height: 320px; padding: 34px 30px; }
}

/* ── Sticky mobile CTA bar (dark theme + a11y-hub FAB clearance) ─────────
   Base layout/light theme lives in styles.css (.mobile-cta-bar). Here:
   1. dark-glass surface when the premium dark theme is active;
   2. lift the accessibility hub's FAB above the bar so the two
      bottom-anchored elements never overlap on phones. */
html.dark .mobile-cta-bar {
  background: hsla(214, 45%, 12%, 0.88);
  border-top: 1px solid hsla(0, 0%, 100%, 0.08);
  box-shadow: 0 -12px 32px hsla(220, 70%, 3%, 0.45);
}
@media (max-width: 959px) {
  body:has(.mobile-cta-bar) .rc-fab {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* The hub's decorative blob + collapsed bubble are bottom-anchored too.
     Offsets keep their original spacing relative to the FAB (fab 22 / blob 14 /
     bubble 27) so the stack stays concentric, just lifted above the bar. */
  body:has(.mobile-cta-bar) .rc-blob {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body:has(.mobile-cta-bar) .rc-bubble {
    bottom: calc(89px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   LIGHT-MODE HERO REDESIGN (2026-07-14) — color only.
   In light mode the heroes previously kept their dark navy
   panels. Per direction: true light surface, navy-forward —
   deep navy carries the headline and buttons, teal survives
   only as small accents (headline underline, video-pill icon).
   Scope: html:not(.dark) heroes only (.home-hero + .page-hero).
   Dark mode untouched. No layout/typography changes.
   ============================================================ */

/* ---- Surfaces ------------------------------------------------ */
/* Interior hero frame: cream-white sheet with a faint cool foot. */
html:not(.dark) .page-hero__frame {
  border-color: rgba(9, 53, 122, 0.16);
  background: linear-gradient(180deg, #fdfefe, #f1f5fa);
  box-shadow: 0 18px 48px rgba(13, 44, 94, 0.10);
}
/* The dark left-to-right wash becomes a top-only white sheen. No horizontal
   ramp: a 90deg white gradient rising again at 100% stacked with the
   backdrop's own wash and painted a hard-edged bright streak down the
   frame's right side on real monitors. */
html:not(.dark) .page-hero__frame::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 22%);
}
/* Glow accents: screen-blend teal/gold glows wash out on white —
   swap to whisper-quiet navy/teal tints at normal blend. */
html:not(.dark) .page-hero__frame::after {
  background:
    radial-gradient(circle at 18% 18%, rgba(9, 53, 122, 0.06), transparent 22%),
    radial-gradient(circle at 74% 24%, rgba(0, 127, 113, 0.06), transparent 20%),
    radial-gradient(circle at 78% 74%, rgba(9, 53, 122, 0.05), transparent 20%);
  mix-blend-mode: normal;
}
/* The hero's halo pseudo-element extends 20px past and 26px below the
   frame. In dark mode it is an ambient glow; painting it as a bordered,
   shadowed light panel made it read as a second container edge below the
   hero ("double layer"). The frame itself carries the light sheet now, so
   the halo paints nothing in light mode. */
html:not(.dark) .page--home .hero::before {
  background: none;
  border: 0;
  box-shadow: none;
}
/* The dark gradient band behind the sticky header reads as a murky
   strip over the now-light hero — drop it; the navy nav pill carries
   the header on its own (as it already does on interior pages). */
html:not(.dark) .page--home .site-header::before {
  background: none;
}
/* Ambient particle canvas is tuned for the dark panel — keep it as a
   faint texture on the light sheet instead of bright confetti. */
html:not(.dark) .hero [data-hero-flow] {
  opacity: 0.18;
}

/* ---- Type ---------------------------------------------------- */
html:not(.dark) .page--home .hero__title,
html:not(.dark) .page-hero .hero__title {
  color: #0c2d5e;
}
/* Navy-forward: accent words stay navy; teal survives as a thin
   underline accent beneath them. */
html:not(.dark) .hero__title .t-teal {
  color: #0c2d5e;
  text-decoration: underline;
  text-decoration-color: rgba(12, 122, 110, 0.75);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
}
html:not(.dark) .page--home .hero__copy,
html:not(.dark) .page-hero .hero__copy {
  color: var(--lm-slate);
}

/* ---- Buttons & chips ----------------------------------------- */
/* Primary CTA inside heroes: deep navy fill, white label (site-wide
   light-mode primaries stay operational teal — hero only). */
html:not(.dark) .hero .button--primary {
  background: linear-gradient(135deg, #123f88, #0b2a61) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 28px rgba(13, 44, 94, 0.28) !important;
}
html:not(.dark) .hero .button--primary:hover {
  background: linear-gradient(135deg, #16499a, #0d3170) !important;
}
/* Secondary CTA: white sheet, navy ink + border (replaces the opaque
   deep-teal fill that suited the dark panel). */
html:not(.dark) .page--home .home-hero .button--secondary,
html:not(.dark) .hero.page-hero .button--secondary {
  color: #0c2d5e !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(9, 53, 122, 0.30) !important;
  box-shadow: 0 8px 22px rgba(13, 44, 94, 0.10) !important;
}
html:not(.dark) .page--home .home-hero .button--secondary:hover,
html:not(.dark) .hero.page-hero .button--secondary:hover {
  background: #f2f6fb !important;
  border-color: rgba(9, 53, 122, 0.50) !important;
}
/* Social round buttons: navy outline set. */
html:not(.dark) .hero-social__link {
  color: #0c2d5e;
  border-color: rgba(9, 53, 122, 0.32);
  background: rgba(9, 53, 122, 0.05);
}
@media (hover: hover) and (pointer: fine) {
  html:not(.dark) .hero-social__link:hover {
    color: #ffffff;
    background: #123f88;
    border-color: #123f88;
    box-shadow: 0 8px 22px rgba(13, 44, 94, 0.28);
  }
}
html:not(.dark) .hero-social__link:focus-visible {
  outline-color: #123f88;
}
/* Video pill: light chip, navy label (icon keeps its small teal accent). */
html:not(.dark) .hero-video {
  color: #0c2d5e;
  background: rgba(9, 53, 122, 0.05);
  border-color: rgba(9, 53, 122, 0.20);
}
/* Homepage hero trust chips were white-glass with light text. */
html:not(.dark) .page--home .trust-chip--hero {
  color: #41506a;
  border-color: rgba(9, 53, 122, 0.18);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 24px rgba(13, 44, 94, 0.08);
}

/* ---- Brand logo ----------------------------------------------- */
/* The near-white MD BILLING wordmark disappears on a light sheet —
   colorize it to the deep brand navy (pure color transform: flatten
   to black, then rotate/saturate into navy) with a soft cool shadow. */
html:not(.dark) .hero .hero-brand-scene__image {
  /* Chain solved against a white source pixel to land ≈#081F4A (verified via
     ctx.filter, which implements the same spec) — element rendering can drift
     a touch lighter than the math, so the target sits below the headline navy
     #0c2d5e to keep the mark decisively dark on the light sheet. */
  filter: brightness(0) saturate(100%) invert(9%) sepia(50%) saturate(3000%) hue-rotate(208deg)
    drop-shadow(0 10px 24px rgba(13, 44, 94, 0.16));
}
/* The homepage hero has its own frame element (mirrors .page-hero__frame)
   — same light sheet + white sheen treatment. */
html:not(.dark) .page--home .home-hero__frame {
  border-color: rgba(9, 53, 122, 0.16);
  background: linear-gradient(180deg, #fdfefe, #f1f5fa);
  box-shadow: 0 18px 48px rgba(13, 44, 94, 0.10);
}
/* Top-only sheen — see the .page-hero__frame::before note about the
   right-edge streak the horizontal ramp caused. */
html:not(.dark) .page--home .home-hero__frame::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 22%);
}
/* The hero backdrop "data wave" is a DARK composition twice over — a static
   JPG (opacity .18 home / .52 interior) and, when WebGL is available, a canvas
   (data-wave) that fades in at full opacity on top of the light sheet. In light
   mode both must recede to a whisper of texture. Specificity note: the
   .has-wave-gl rules run (0,3,0), so these are anchored on the backdrop/flow
   wrappers to outrank them. */
html:not(.dark) .home-hero__backdrop .home-hero__wave-image,
html:not(.dark) .page-hero__backdrop .page-hero__wave-image {
  opacity: 0.07;
}
html:not(.dark) .home-hero__backdrop .home-hero__wave-canvas,
html:not(.dark) .page-hero__backdrop .page-hero__wave-canvas,
html:not(.dark) .hero canvas[data-wave] {
  opacity: 0.07 !important;
}
/* The remaining dark painters: both hero backdrops carry heavy navy washes on
   ::before (rgba(3,11,24,…) up to .92) and the flow wrappers add another dark
   vignette on ::after. On the light sheet these become soft white sheens; the
   faint blueprint grid on backdrop::after is retinted from pale-blue-on-dark
   to pale-navy-on-light. */
/* Left-only sheen behind the text column, fading out by 62% and staying
   transparent to the right edge — the dark theme's edge vignettes must NOT
   become white ones (a white rise at 100% stacked with the frame sheen and
   painted the right-side streak). */
html:not(.dark) .page-hero__backdrop::before,
html:not(.dark) .page--home .home-hero__backdrop::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 34%, rgba(255, 255, 255, 0) 62%);
}
html:not(.dark) .page-hero__flow::after,
html:not(.dark) .page--home .home-hero__flow::after {
  background:
    radial-gradient(circle at 18% 64%, rgba(9, 53, 122, 0.05), transparent 24%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.06) 36%, transparent 62%);
}
html:not(.dark) .page-hero__backdrop::after,
html:not(.dark) .page--home .home-hero__backdrop::after {
  background-image:
    linear-gradient(rgba(9, 53, 122, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 53, 122, 0.055) 1px, transparent 1px);
}

/* ── Accessibility hub panel — light-mode tokens ─────────────────────────
   The hub's appended brand re-skin block sets its tokens for the DARK
   theme (solid deep-navy panel, ivory ink). In light mode those made the
   panel unreadable: the (previously malformed) glass value collapsed to
   transparent, leaving ivory text over a blur of the light page. These
   html:not(.dark) declarations outrank the hub's :root block by
   specificity, giving the panel a solid light surface with dark ink. */
/* Radial petal label chips keep their fixed dark pill background in BOTH
   themes, so their font must stay white — without this they inherit the
   light-mode dark ink and vanish into the pill. */
.rc-ui .rc-bub-lab {
  color: #ffffff !important;
}

html:not(.dark) {
  --rc-glass: rgba(251, 250, 247, 0.96);
  --rc-bg: #fbfaf7;
  --rc-bg-2: #ffffff;
  --rc-ink: #16233c;
  --rc-muted: #44506a;
  --rc-line: #d8dfe9;
}