/*
 * ============================================================
 *  Enlightened Order — Banner Theme
 *  Drop-in CSS to apply the hero banner's dark aesthetic
 *  across key sections site-wide.
 *
 *  Include AFTER the page's own <style> block:
 *  <link rel="stylesheet" href="eo-banner-theme.css">
 * ============================================================
 */

/* ── Extra design tokens ─────────────────────────────────── */
:root {
  --dark-bg:      #181616;
  --dark-bg-mid:  #181616;
  --dark-border:  rgba(255, 255, 255, 0.08);
  --terra-dim:    rgba(184, 112, 110, 0.18);
  --sage-dim:     rgba(165, 168, 136, 0.12);
  /* Hex grid SVG tile (flat-top, r=72, 216×125) */
  --hex-tile: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMTYnIGhlaWdodD0nMTI1Jz4KICA8ZyBmaWxsPSdub25lJyBzdHJva2U9J3JnYmEoMjU1LDI1NSwyNTUsLjA1NSknIHN0cm9rZS13aWR0aD0nMSc+CiAgICA8cG9seWdvbiBwb2ludHM9JzE4MC4wLDYyLjQgMTQ0LjAsMTI0LjcgNzIuMCwxMjQuNyAzNi4wLDYyLjQgNzIuMCwwLjAgMTQ0LjAsMC4wJy8+CiAgICA8cG9seWdvbiBwb2ludHM9Jy0zNi4wLDYyLjQgLTcyLjAsMTI0LjcgLTE0NC4wLDEyNC43IC0xODAuMCw2Mi40IC0xNDQuMCwwLjAgLTcyLjAsMC4wJy8+CiAgICA8cG9seWdvbiBwb2ludHM9JzM5Ni4wLDYyLjQgMzYwLjAsMTI0LjcgMjg4LjAsMTI0LjcgMjUyLjAsNjIuNCAyODguMCwwLjAgMzYwLjAsMC4wJy8+CiAgICA8cG9seWdvbiBwb2ludHM9JzcyLjAsLTYyLjQgMzYuMCwwLjAgLTM2LjAsMC4wIC03Mi4wLC02Mi40IC0zNi4wLC0xMjQuNyAzNi4wLC0xMjQuNycvPgogICAgPHBvbHlnb24gcG9pbnRzPScyODguMCwtNjIuNCAyNTIuMCwwLjAgMTgwLjAsMC4wIDE0NC4wLC02Mi40IDE4MC4wLC0xMjQuNyAyNTIuMCwtMTI0LjcnLz4KICAgIDxwb2x5Z29uIHBvaW50cz0nNzIuMCwxODcuMSAzNi4wLDI0OS40IC0zNi4wLDI0OS40IC03Mi4wLDE4Ny4xIC0zNi4wLDEyNC43IDM2LjAsMTI0LjcnLz4KICAgIDxwb2x5Z29uIHBvaW50cz0nMjg4LjAsMTg3LjEgMjUyLjAsMjQ5LjQgMTgwLjAsMjQ5LjQgMTQ0LjAsMTg3LjEgMTgwLjAsMTI0LjcgMjUyLjAsMTI0LjcnLz4KICA8L2c+Cjwvc3ZnPg==');
}


/* ── Navigation: dark glass ──────────────────────────────── */
nav.site-nav {
  background: rgba(24, 22, 22, 0.97) !important;
  border-bottom: none !important;
  backdrop-filter: blur(14px) !important;
  /* Gradient hairline at bottom of nav — matches ornament-divider style */
  box-shadow:
    0 1px 0 0 rgba(184,112,110,0.0),
    0 1px 0 0 rgba(165,168,136,0.0),
    inset 0 -1px 0 0 rgba(255,255,255,0.07) !important;
  position: relative !important;
}
nav.site-nav::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184,112,110,0.25) 15%,
    rgba(184,112,110,0.65) 35%,
    rgba(165,168,136,0.65) 65%,
    rgba(165,168,136,0.25) 85%,
    transparent 100%
  ) !important;
  z-index: 101 !important;
}

/* Invert the Forest logo so it reads on dark — swap for Parchment asset when available */
nav.site-nav .nav-logo img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

nav.site-nav .nav-links > li > a {
  color: rgba(255, 255, 255, 0.80) !important;
}
nav.site-nav .nav-links > li > a:hover {
  color: var(--terra) !important;
}

/* Dropdown on dark nav */
.dropdown {
  background: #181616 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}
.dropdown-col h4 {
  color: var(--terra) !important;
}
.dropdown-col a {
  color: rgba(255, 255, 255, 0.72) !important;
}
.dropdown-col a:hover {
  color: var(--gold) !important;
}

/* Mobile nav open state */
.nav-links.open {
  background: #181616 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.nav-links.open li a {
  color: rgba(255, 255, 255, 0.82) !important;
}


/* ── Hero: full banner treatment ─────────────────────────── */
.hero {
  background: var(--dark-bg) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* Hex grid overlay (replaces dot grid) */
.hero::before {
  background-image: var(--hex-tile) !important;
  background-size: 216px 125px !important;
  background-color: transparent !important;
  opacity: 1 !important;
}

/* Warm glow: coral bloom top-center + sage bloom bottom-right */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 50% 0%,  rgba(184, 112, 110, 0.13) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 100% 100%, rgba(165, 168, 136, 0.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Make sure content sits above both overlay layers */
.hero .wrap { position: relative; z-index: 2 !important; }

/* Typography on dark hero */
.hero-eyebrow {
  color: var(--terra) !important;
}
.hero-eyebrow::before {
  background: var(--terra) !important;
}
.hero h1,
.hero h1.hero-h1-larger {
  color: #FFFFFF !important;
}
.hero h1 em,
.hero h1.hero-h1-larger em {
  color: var(--terra) !important;
}
.hero p.hero-subhead {
  color: rgba(229, 207, 191, 0.90) !important;  /* warm gold-ish */
}
.hero p.hero-body {
  color: rgba(255, 255, 255, 0.65) !important;
  opacity: 1 !important;
}

/* Buttons in dark hero */
.hero .btn-primary {
  background: var(--terra-dark) !important;
  border-color: var(--terra-dark) !important;
  color: var(--white) !important;
}
.hero .btn-primary:hover {
  background: #7E4A48 !important;
  border-color: #7E4A48 !important;
}
.hero .btn-secondary {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
.hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

/* Photo badge on dark */
.hero-photo-badge {
  background: #E5CFBF !important;
  color: var(--ink) !important;
  border: 1px solid var(--sage) !important;
  backdrop-filter: blur(8px);
}

/* Portrait: subtle dark vignette border */
.hero-photo img.hero-portrait {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 24px 60px rgba(0, 0, 0, 0.55) !important;
}


/* ── Service-tags bar: banner pill style ─────────────────── */
.service-tags {
  background: #181616 !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  gap: 0.5rem 0.75rem !important;
  padding: 1.1rem 1.5rem !important;
}
.service-tags span {
  font-family: 'Comfortaa', sans-serif !important;
  font-style: normal !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  color: rgba(255, 255, 255, 0.60) !important;
  opacity: 1 !important;
  /* pill outline — matches banner's capsule tags */
  padding: 0.3rem 0.85rem !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: border-color 0.15s, color 0.15s;
}
.service-tags span:hover {
  border-color: rgba(184, 112, 110, 0.45) !important;
  color: var(--gold) !important;
}
.service-tags .dot {
  display: none !important;  /* dots replaced by pill borders */
}


/* ── Stats section: EO Sage — pops between dark sections ──── */
.stats-section {
  background: #A5A888 !important;  /* EO Accounting Sage */
  position: relative;
  overflow: hidden;
}

/* Hex overlay at lower opacity so sage color reads clearly */
.stats-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hex-tile);
  background-size: 216px 125px;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}
.stats-section > * { position: relative; z-index: 1; }
.stats-section .wrap { position: relative; z-index: 1; }

/* Top gradient line: sage → terra → sage */
.stats-section::before {
  background: linear-gradient(90deg, transparent, rgba(51,51,51,0.25) 30%, rgba(51,51,51,0.25) 70%, transparent) !important;
  height: 1px !important;
  top: 0 !important;
}

/* Eyebrow label */
.stats-eyebrow {
  color: rgba(51, 51, 51, 0.70) !important;
}
.stats-eyebrow::before,
.stats-eyebrow::after {
  background: rgba(51, 51, 51, 0.35) !important;
}

/* Stat numbers: deep charcoal for max contrast on sage */
.stat-number { color: #181616 !important; }
.stat-number .pct { color: var(--terra) !important; }

/* Stat text: near-charcoal */
.stat-text { color: rgba(24, 22, 22, 0.88) !important; }
.stat-text strong { color: #181616 !important; }

/* Source citation: slightly muted */
.stat-source { color: rgba(24, 22, 22, 0.55) !important; }

/* Dividers between stat items */
.stat-item { border-right-color: rgba(51, 51, 51, 0.18) !important; }


/* ── CTA band: hex overlay + gradient ───────────────────── */
.cta-band {
  background: var(--dark-bg) !important;
  position: relative;
  overflow: hidden;
}

/* Replace the existing dot ::before with hex grid */
.cta-band::before {
  background-image:
    var(--hex-tile),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(184,112,110,0.10) 0%, transparent 70%) !important;
  background-size: 216px 125px, 100% 100% !important;
  background-color: transparent !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

/* Add a second pseudo for the warm glow */
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(165,168,136,0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.cta-band > * { position: relative; z-index: 1; }

/* CTA band text refinements */
.cta-band h2 { color: var(--white) !important; }
.cta-band p { color: rgba(255,255,255,0.78) !important; }
.cta-band .btn-primary {
  background: var(--terra-dark) !important;
  color: var(--white) !important;
  border-color: var(--terra-dark) !important;
}
.cta-band .btn-primary:hover {
  background: #7E4A48 !important;
  border-color: #7E4A48 !important;
}
.cta-band .btn-secondary {
  border-color: rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.82) !important;
}
.cta-band .btn-secondary:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}


/* ── Sage band: subtle hex overlay ──────────────────────── */
.sage-band {
  position: relative;
  overflow: hidden;
}
.sage-band::before {
  background-image: var(--hex-tile) !important;
  background-size: 216px 125px !important;
  opacity: 0.4 !important;
}


/* ── Section divider hairlines: match dark-to-light join ── */
/* When hero (dark) is followed by a light section,          */
/* soften the border crossing                                */
.hero + .service-tags + section::before,
.hero + section::before {
  display: none !important;
}

/* Transition shim: dark → light */
.service-tags + section:first-of-type {
  border-top: 1px solid var(--light-gray);
}


/* ── Footer: dark matching base ─────────────────────────── */
footer,
.site-footer {
  background: #333333 !important; /* charcoal — distinct from the #181616 CTA band per the standing no-adjacent-same-color rule (owner, July 3 2026) */
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.65) !important;
}
footer a, .site-footer a {
  color: rgba(255,255,255,0.60) !important;
}
footer a:hover, .site-footer a:hover {
  color: var(--terra) !important;
}
footer h3, footer h4,
.site-footer h3, .site-footer h4 {
  color: rgba(255,255,255,0.85) !important;
}


/* ── Newsletter section: restore gold + fix bleed ─────────── */
.newsletter-section {
  background: var(--gold) !important;
  color: var(--charcoal) !important;
}
.newsletter-section::before {
  background-image: radial-gradient(rgba(51,51,51,0.04) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  background-color: transparent !important;
}
.newsletter-centered h2 { color: var(--charcoal) !important; }
.newsletter-sub { color: rgba(51,51,51,0.72) !important; }
.newsletter-form-inline input {
  background: rgba(255,255,255,0.80) !important;
  border-color: rgba(51,51,51,0.18) !important;
  color: var(--charcoal) !important;
}
.newsletter-form-inline input:focus {
  border-color: var(--sage) !important;
  box-shadow: 0 0 0 3px rgba(165,168,136,0.22) !important;
}
.newsletter-form-inline button {
  background: var(--charcoal) !important;
  color: var(--white) !important;
}
.newsletter-form-inline button:hover { background: var(--terra) !important; }


/* ── Cards: EO brand color contrast ───────────────────────── */

/* Base card: subtle warm off-white + sage left accent bar */
.card {
  background: #F3F3F3 !important;
  border-left: 3px solid var(--sage) !important;
  border-top: 1px solid rgba(165,168,136,0.20) !important;
  border-right: 1px solid rgba(165,168,136,0.12) !important;
  border-bottom: 1px solid rgba(165,168,136,0.12) !important;
}
.card:hover { border-left-color: var(--terra) !important; }

.card .eo-bicon {
  color: var(--sage) !important;
  background: rgba(165,168,136,0.10) !important;
  border-color: rgba(165,168,136,0.25) !important;
}

/* Dark card: near-black to match hero/CTA sections */
.card.dark {
  background: var(--dark-bg) !important;
  border-left: 3px solid var(--terra) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.card.dark:hover { border-left-color: var(--gold) !important; }
.card.dark h3 { color: var(--white) !important; }
.card.dark p  { color: rgba(255,255,255,0.75) !important; }
.card.dark .eo-bicon {
  color: var(--terra) !important;
  background: rgba(184,112,110,0.10) !important;
  border-color: rgba(184,112,110,0.25) !important;
}

/* Testimonial cards: terra left rail */
.testi-card {
  border-left: 3px solid var(--terra) !important;
  background: var(--white) !important;
}
.testi-quote-mark { color: var(--terra) !important; }


/* ── Mobile adjustments ──────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links.open { background: #181616 !important; }
}
@media (max-width: 720px) {
  .service-tags span {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.7rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   SITE-WIDE FIXES  (appended)
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Ornament divider: visible dots on any background ──── */
/* ornament-divider round-1 block removed — replaced by direct HTML edit */


/* ── 2. Stat-band (30–90 days): dark + centered ─────────── */
/* Was flush against the sage band with a white bg.
   Now: near-black, centred text, generous padding, clear gap. */
.stat-band,
div[class~="stat-band"],
section > div > div[style*="stat-band"],
/* catch inline stat-band blocks */
div[style*="border-left: 4px solid var(--sage)"][style*="flex"],
div[style*="border-left:4px solid var(--sage)"][style*="flex"] {
  background: var(--dark-bg, #181616) !important;
  border-left: 4px solid var(--terra) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
  color: rgba(255,255,255,0.85) !important;
  flex-direction: column !important;
  text-align: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 2rem 2.5rem !important;
}
/* The big number */
.stat-band > div:first-child,
div[style*="Lora"][style*="2.4rem"] {
  color: var(--gold, #E5CFBF) !important;
  font-size: 3rem !important;
}
/* The label and sub-text */
.stat-band > div:last-child > div:first-child {
  color: rgba(255,255,255,0.90) !important;
}
.stat-band > div:last-child > div:last-child {
  color: rgba(255,255,255,0.60) !important;
}

/* Wrap the stat-band section itself to add breathing room */
section:has(.stat-band),
section:has(div[style*="border-left: 4px solid var(--sage)"]) {
  background: var(--white) !important;
  padding: 2.5rem 0 !important;
}


/* ── 3. CTA band → footer separator ─────────────────────── */
/* CTA (.cta-band) and footer both use charcoal/dark-bg.
   Add a terra gradient hairline + extra bottom padding on CTA. */
.cta-band {
  padding-bottom: 5.5rem !important;
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(90deg, transparent, var(--terra) 30%, var(--sage) 70%, transparent) 1 !important;
}

footer.site-footer,
.site-footer {
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  /* small top padding bump so content doesn't kiss the border */
  padding-top: 4rem !important;
}


/* ── 4. CFO page hero: remove cream/yellow background ──── */
/* .hero on fractional-cfo.html uses a cream→gold gradient
   that clashes with the terracotta text. Override to dark.  */
.hero[style*="cream"],
body:has(.cfo-scorecard) .hero {
  background: var(--dark-bg, #181616) !important;
}
/* Make CFO hero text readable on dark */
body:has(.cfo-scorecard) .hero h1 {
  color: #ffffff !important;
}
body:has(.cfo-scorecard) .hero p.lead {
  color: rgba(255,255,255,0.70) !important;
}


/* ── 5. Ornament divider overflow fix (cut-off on CFO, About) */
/* The divider SVG was clipping because parent overflow:hidden
   was set on preceding sections.                              */
/* ornament-divider round-2 block removed — replaced by direct HTML edit */


/* ── 6. Hero cream/gold gradient → dark on ALL pages ────── */
/* Affects: glossary, about, foundation, fundamentals,
   contact, faq, resources, how-it-works, tax-services,
   ai-and-accounting, assessment,
   controller-as-a-service, focused-advisory, who-we-serve,
   aba-pediatric-therapy, and fractional-cfo (covered above) */
.hero {
  background: #181616 !important;
  background-image: none !important;
}
.hero::before {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMTYnIGhlaWdodD0nMTI1Jz4KICA8ZyBmaWxsPSdub25lJyBzdHJva2U9J3JnYmEoMjU1LDI1NSwyNTUsLjA1NSknIHN0cm9rZS13aWR0aD0nMSc+CiAgICA8cG9seWdvbiBwb2ludHM9JzE4MC4wLDYyLjQgMTQ0LjAsMTI0LjcgNzIuMCwxMjQuNyAzNi4wLDYyLjQgNzIuMCwwLjAgMTQ0LjAsMC4wJy8+CiAgICA8cG9seWdvbiBwb2ludHM9Jy0zNi4wLDYyLjQgLTcyLjAsMTI0LjcgLTE0NC4wLDEyNC43IC0xODAuMCw2Mi40IC0xNDQuMCwwLjAgLTcyLjAsMC4wJy8+CiAgICA8cG9seWdvbiBwb2ludHM9JzM5Ni4wLDYyLjQgMzYwLjAsMTI0LjcgMjg4LjAsMTI0LjcgMjUyLjAsNjIuNCAyODguMCwwLjAgMzYwLjAsMC4wJy8+CiAgICA8cG9seWdvbiBwb2ludHM9JzcyLjAsLTYyLjQgMzYuMCwwLjAgLTM2LjAsMC4wIC03Mi4wLC02Mi40IC0zNi4wLC0xMjQuNyAzNi4wLC0xMjQuNycvPgogICAgPHBvbHlnb24gcG9pbnRzPScyODguMCwtNjIuNCAyNTIuMCwwLjAgMTgwLjAsMC4wIDE0NC4wLC02Mi40IDE4MC4wLC0xMjQuNyAyNTIuMCwtMTI0LjcnLz4KICAgIDxwb2x5Z29uIHBvaW50cz0nNzIuMCwxODcuMSAzNi4wLDI0OS40IC0zNi4wLDI0OS40IC03Mi4wLDE4Ny4xIC0zNi4wLDEyNC43IDM2LjAsMTI0LjcnLz4KICAgIDxwb2x5Z29uIHBvaW50cz0nMjg4LjAsMTg3LjEgMjUyLjAsMjQ5LjQgMTgwLjAsMjQ5LjQgMTQ0LjAsMTg3LjEgMTgwLjAsMTI0LjcgMjUyLjAsMTI0LjcnLz4KICA8L2c+Cjwvc3ZnPg==') !important;
  background-size: 216px 125px !important;
  background-color: transparent !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  right: 0 !important;
  border-radius: 0 !important;
  opacity: 0.4 !important;
}
/* White headline on all dark heroes */
.hero h1,
.hero .hero-h1-larger { color: #ffffff !important; }
.hero h1 em,
.hero .hero-h1-larger em { color: var(--terra, #B8706E) !important; }

/* Body/lead text */
.hero p.lead,
.hero p.hero-subhead,
.hero p.hero-body { color: rgba(255,255,255,0.68) !important; }

/* Eyebrow labels */
.hero-eyebrow,
.hero .section-label { color: var(--terra, #B8706E) !important; }


/* ═══════════════════════════════════════════════════════════
   ROUND 3 FIXES
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Service-tags ticker → white background ────────────── */
.service-tags {
  background: var(--white, #ffffff) !important;
  border-top-color: var(--light-gray, #DCDDC3) !important;
  border-bottom-color: var(--light-gray, #DCDDC3) !important;
}
.service-tags span {
  color: var(--charcoal, #333333) !important;
  border-color: rgba(51,51,51,0.18) !important;
  background: transparent !important;
}
.service-tags span:hover {
  border-color: rgba(184,112,110,0.45) !important;
  color: var(--terra, #B8706E) !important;
}


/* ── 2. Stat-band: centered + dark (all instances) ───────── */
/* Override the flex-left layout so 30–90 and 100% center properly */
.stat-band,
div[class~="stat-band"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0.4rem !important;
  padding: 2.25rem 2rem !important;
  background: #181616 !important;
  border-left: none !important;
  border-top: 3px solid var(--terra, #B8706E) !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 8px !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}
/* Number */
.stat-band > div:first-child {
  color: var(--gold, #E5CFBF) !important;
  font-size: 3.5rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}
/* Label row */
.stat-band > div:nth-child(2) > div:first-child {
  color: rgba(255,255,255,0.90) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}
/* Sub-text row */
.stat-band > div:nth-child(2) > div:last-child {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.88rem !important;
}
/* Section that contains stat-band: white bg, padded */
section:has(.stat-band) {
  padding: 2.5rem 0 3rem !important;
  background: var(--white, #ffffff) !important;
}


/* ── 3. Niche-hero (ABA page) → dark, matching all heroes ── */
.niche-hero {
  background: #181616 !important;
  background-image: none !important;
}
.niche-hero::before {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMTYnIGhlaWdodD0nMTI1Jz4KICA8ZyBmaWxsPSdub25lJyBzdHJva2U9J3JnYmEoMjU1LDI1NSwyNTUsLjA1NSknIHN0cm9rZS13aWR0aD0nMSc+CiAgICA8cG9seWdvbiBwb2ludHM9JzE4MC4wLDYyLjQgMTQ0LjAsMTI0LjcgNzIuMCwxMjQuNyAzNi4wLDYyLjQgNzIuMCwwLjAgMTQ0LjAsMC4wJy8+CiAgICA8cG9seWdvbiBwb2ludHM9Jy0zNi4wLDYyLjQgLTcyLjAsMTI0LjcgLTE0NC4wLDEyNC43IC0xODAuMCw2Mi40IC0xNDQuMCwwLjAgLTcyLjAsMC4wJy8+CiAgICA8cG9seWdvbiBwb2ludHM9JzM5Ni4wLDYyLjQgMzYwLjAsMTI0LjcgMjg4LjAsMTI0LjcgMjUyLjAsNjIuNCAyODguMCwwLjAgMzYwLjAsMC4wJy8+CiAgICA8cG9seWdvbiBwb2ludHM9JzcyLjAsLTYyLjQgMzYuMCwwLjAgLTM2LjAsMC4wIC03Mi4wLC02Mi40IC0zNi4wLC0xMjQuNyAzNi4wLC0xMjQuNycvPgogICAgPHBvbHlnb24gcG9pbnRzPScyODguMCwtNjIuNCAyNTIuMCwwLjAgMTgwLjAsMC4wIDE0NC4wLC02Mi40IDE4MC4wLC0xMjQuNyAyNTIuMCwtMTI0LjcnLz4KICAgIDxwb2x5Z29uIHBvaW50cz0nNzIuMCwxODcuMSAzNi4wLDI0OS40IC0zNi4wLDI0OS40IC03Mi4wLDE4Ny4xIC0zNi4wLDEyNC43IDM2LjAsMTI0LjcnLz4KICAgIDxwb2x5Z29uIHBvaW50cz0nMjg4LjAsMTg3LjEgMjUyLjAsMjQ5LjQgMTgwLjAsMjQ5LjQgMTQ0LjAsMTg3LjEgMTgwLjAsMTI0LjcgMjUyLjAsMTI0LjcnLz4KICA8L2c+Cjwvc3ZnPg==') !important;
  background-size: 216px 125px !important;
  background-color: transparent !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important; right: 0 !important;
  border-radius: 0 !important;
  opacity: 0.4 !important;
}
.niche-hero h1,
.niche-hero .hero-h1-larger { color: #ffffff !important; }
.niche-hero h1 em { color: var(--terra, #B8706E) !important; }
.niche-hero p,
.niche-hero .hero-subhead,
.niche-hero .hero-body { color: rgba(255,255,255,0.68) !important; }
.niche-hero .hero-eyebrow,
.niche-hero .section-label { color: var(--terra, #B8706E) !important; }
/* The eyebrow pill/tag box */
.niche-hero .hero-eyebrow-tag {
  background: rgba(184,112,110,0.15) !important;
  border-color: rgba(184,112,110,0.35) !important;
  color: var(--terra, #B8706E) !important;
}


/* ── 4. CTA bands: hex pattern on ALL pages ──────────────── */
/* The index CTA already had this; push it site-wide */
.cta-band {
  background: #181616 !important;
  position: relative !important;
  overflow: hidden !important;
}
.cta-band::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMTYnIGhlaWdodD0nMTI1Jz4KICA8ZyBmaWxsPSdub25lJyBzdHJva2U9J3JnYmEoMjU1LDI1NSwyNTUsLjA1NSknIHN0cm9rZS13aWR0aD0nMSc+CiAgICA8cG9seWdvbiBwb2ludHM9JzE4MC4wLDYyLjQgMTQ0LjAsMTI0LjcgNzIuMCwxMjQuNyAzNi4wLDYyLjQgNzIuMCwwLjAgMTQ0LjAsMC4wJy8+CiAgICA8cG9seWdvbiBwb2ludHM9Jy0zNi4wLDYyLjQgLTcyLjAsMTI0LjcgLTE0NC4wLDEyNC43IC0xODAuMCw2Mi40IC0xNDQuMCwwLjAgLTcyLjAsMC4wJy8+CiAgICA8cG9seWdvbiBwb2ludHM9JzM5Ni4wLDYyLjQgMzYwLjAsMTI0LjcgMjg4LjAsMTI0LjcgMjUyLjAsNjIuNCAyODguMCwwLjAgMzYwLjAsMC4wJy8+CiAgICA8cG9seWdvbiBwb2ludHM9JzcyLjAsLTYyLjQgMzYuMCwwLjAgLTM2LjAsMC4wIC03Mi4wLC02Mi40IC0zNi4wLC0xMjQuNyAzNi4wLC0xMjQuNycvPgogICAgPHBvbHlnb24gcG9pbnRzPScyODguMCwtNjIuNCAyNTIuMCwwLjAgMTgwLjAsMC4wIDE0NC4wLC02Mi40IDE4MC4wLC0xMjQuNyAyNTIuMCwtMTI0LjcnLz4KICAgIDxwb2x5Z29uIHBvaW50cz0nNzIuMCwxODcuMSAzNi4wLDI0OS40IC0zNi4wLDI0OS40IC03Mi4wLDE4Ny4xIC0zNi4wLDEyNC43IDM2LjAsMTI0LjcnLz4KICAgIDxwb2x5Z29uIHBvaW50cz0nMjg4LjAsMTg3LjEgMjUyLjAsMjQ5LjQgMTgwLjAsMjQ5LjQgMTQ0LjAsMTg3LjEgMTgwLjAsMTI0LjcgMjUyLjAsMTI0LjcnLz4KICA8L2c+Cjwvc3ZnPg=='),
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(184,112,110,0.10) 0%, transparent 70%) !important;
  background-size: 216px 125px, 100% 100% !important;
  opacity: 1 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.cta-band > * { position: relative; z-index: 1; }


/* ── 5. Ornament divider → LinkedIn banner line style ─────── */
/* Replace the 3-dot SVG band with a slim gradient hairline
   inspired by the LinkedIn banner: a fine terra↔sage gradient
   rule with very light dot-grid echo, no sage-light bg band.  */
.ornament-divider {
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  height: 1px !important;
  margin: 0 !important;
  position: relative !important;
  overflow: visible !important;
  display: block !important;
}
.ornament-divider::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184,112,110,0.25) 15%,
    rgba(184,112,110,0.65) 35%,
    rgba(165,168,136,0.65) 65%,
    rgba(165,168,136,0.25) 85%,
    transparent 100%
  ) !important;
}
/* Hide the SVG — the line is now pure CSS */
.ornament-divider svg {
  display: none !important;
}
/* Ensure sage-band doesn't clip the following divider */
.sage-band {
  overflow: visible !important;
}


/* ── 6. Advisory project cards: align Engagement line ─────── */
/* Make both track cards equal-height with Engagement pinned
   to the bottom via flex column layout */
.focused-advisory-cards > div,
div[style*="border-top: 4px solid var(--sage)"][style*="padding: 2rem"],
div[style*="border-top: 4px solid var(--terra)"][style*="padding: 2rem"] {
  display: flex !important;
  flex-direction: column !important;
}
div[style*="border-top: 4px solid var(--sage)"][style*="padding: 2rem"] > div[style*="border-top: 1px"],
div[style*="border-top: 4px solid var(--terra)"][style*="padding: 2rem"] > div[style*="border-top: 1px"] {
  margin-top: auto !important;
}


/* ── 7. Fundamentals: sage-dark text override on dark hero ── */
.hero .hero-subhead[style*="sage"],
.hero p[style*="sage-dark"],
.hero [style*="color: var(--sage-dark)"] {
  color: rgba(255,255,255,0.68) !important;
}


/* ── Hero subhead → sage (italic Lora intro line) ──────────── */
.hero p.hero-subhead,
.niche-hero p.hero-subhead,
.hero .hero-subhead {
  color: var(--sage, #A5A888) !important;
}

/* ── Hero bottom gradient hairline ─────────────────────────── */
/* Matches the nav bottom line and ornament-divider style */
.hero,
.niche-hero {
  border-bottom: none !important;
}
.hero::after,
.niche-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184,112,110,0.25) 15%,
    rgba(184,112,110,0.65) 35%,
    rgba(165,168,136,0.65) 65%,
    rgba(165,168,136,0.25) 85%,
    transparent 100%
  ) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* ── Gradient hairline divider (replaces ornament-divider HTML) ── */
.eo-hairline {
  height: 1px;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184,112,110,0.25) 15%,
    rgba(184,112,110,0.65) 35%,
    rgba(165,168,136,0.65) 65%,
    rgba(165,168,136,0.25) 85%,
    transparent 100%
  );
  border: none;
  display: block;
}


/* ═══════════════════════════════════════════════════════════
   AUDIT FIXES — Items 8, 9, 10
   ═══════════════════════════════════════════════════════════ */

/* ── 8. CTA button standardization ──────────────────────── */
/* Single authoritative size for all .btn variants.
   Inline overrides on specific pages are overridden here.   */
.btn {
  padding: 0.75rem 1.5rem !important;
  font-size: 0.88rem !important;
  font-family: 'Comfortaa', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  border-radius: 4px !important;
  border-width: 2px !important;
  border-style: solid !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Ghost / small variant used in card CTAs keeps slightly smaller */
.btn-ghost {
  padding: 0.55rem 1.1rem !important;
  font-size: 0.82rem !important;
}

/* Icon arrow on btn-arrow: ensure it doesn't shift size */
.btn-arrow::after {
  content: '\2192' !important;
  margin-left: 0.3rem !important;
  font-size: 1em !important;
  font-weight: 400 !important;
}

/* Ensure btn-row children are all same baseline */
.btn-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.85rem !important;
}
.btn-row.centered {
  justify-content: center !important;
}

/* Remove conflicting inline padding from specific buttons */
.cta-band .btn,
.hero .btn,
.hero-content .btn {
  padding: 0.75rem 1.5rem !important;
  font-size: 0.88rem !important;
}


/* ── 9. Card grid equal height + internal alignment ─────── */

/* All card-grids: stretch so cards in same row are equal height */
.card-grid,
[class*="card-grid"],
.grid-2,
.grid-3,
.grid-4 {
  align-items: stretch !important;
}

/* Cards: flex column so last element (CTA/tag) pins to bottom */
.card {
  display: flex !important;
  flex-direction: column !important;
}

/* Push the last CTA/button inside a card to the bottom (for cards with mixed content)
   NOTE: .card > p:last-child REMOVED — was breaking peer-card top-alignment when cards 
   only had h3+p (which is the common case). Cards with mixed content can use .card-cta. */
.card > .card-cta:last-child,
.card > .btn:last-child,
.card > a.btn:last-child {
  margin-top: auto !important;
}

/* Tier grids: equal height tiers */
.tier-grid {
  align-items: stretch !important;
}
.tier {
  display: flex !important;
  flex-direction: column !important;
}

/* Step/process grids */
.process-grid {
  align-items: stretch !important;
}
.step {
  display: flex !important;
  flex-direction: column !important;
}

/* Compare columns */
.compare-grid {
  align-items: stretch !important;
}
.compare-col {
  display: flex !important;
  flex-direction: column !important;
}

/* Pillar grid */
.pillars-grid {
  align-items: stretch !important;
}
.pillar {
  display: flex !important;
  flex-direction: column !important;
}
/* Pillar tag pins to bottom */
.pillar-tag {
  margin-top: auto !important;
  padding-top: 1rem !important;
}

/* Track cards */
.track {
  display: flex !important;
  flex-direction: column !important;
}
.track-services {
  margin-top: auto !important;
}

/* Inline grid layouts (custom) */
div[style*="grid-template-columns"][style*="gap"] {
  align-items: stretch;
}

/* Two-column resource cards (resources page) */
.resources-2col,
.resources-2col-c,
.resources-2col-d,
.resources-exit-grid {
  align-items: stretch !important;
}

/* Speaker cards on about page */
.card-grid.grid-2 > div[style*="flex-direction: column"] {
  align-items: stretch !important;
}


/* ── 10. Widows & orphans ───────────────────────────────── */
/* Prevent single words on the last line of a paragraph
   and single lines at the top/bottom of columns.           */
p,
li,
.card p,
.section-intro,
.hero p,
.lead,
.faq-answer p,
.stat-text {
  orphans: 3 !important;
  widows: 3 !important;
}

/* Headings should never break across columns */
h1, h2, h3, h4 {
  page-break-after: avoid;
  break-after: avoid;
  widows: 2 !important;
  orphans: 2 !important;
}

/* Prevent lonely headings at the bottom of a container */
h2 + p,
h3 + p {
  orphans: 3;
}

/* Balance short headlines to avoid single-word last lines */
h1, h2, h3 {
  text-wrap: balance;
}

/* Balance short paragraphs (3 lines or fewer) */
p.section-intro,
p.lead,
.hero-subhead,
.tier-desc,
.card > p:first-of-type {
  text-wrap: balance;
}

/* For longer body paragraphs: pretty wrap reduces widows
   without the aggressive balancing of 'balance' */
p, li {
  text-wrap: pretty;
}


/* ── 9b. Internal card line alignment ───────────────────── */
/* When cards sit side by side, headings in each card
   should not float — use consistent heading margins.        */
.card h3 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.5rem !important;
}
.card h4 {
  margin-top: 0 !important;
  margin-bottom: 0.4rem !important;
}
/* Card body text consistent line-height */
.card p {
  line-height: 1.65 !important;
  margin-bottom: 0.75rem !important;
}
.card p:last-of-type {
  margin-bottom: 0 !important;
}

/* Tier card heading consistency */
.tier-name {
  min-height: 1.6rem !important;
}
.tier-price {
  min-height: 2.2rem !important;
}

/* Pillar heading + tag consistency */
.pillar h3 {
  min-height: 2.4rem !important;
}

/* ── Responsive safeguards ─────────────────────────────── */
/* Was: max-width: 900px (forced 1fr on tablets, blocking the per-page 3→2→1 collapse).
   Narrowed to 600px so the safeguard only enforces single-column on small mobile,
   letting per-page CSS handle the 3-col → 2-col transition at tablet widths. */
@media (max-width: 600px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 720px) {
  .btn { white-space: normal !important; }
  p, li { text-wrap: pretty; }
}


/* ── Card contrast in dark sections ─────────────────────── */
/* Plain .card inside dark-bg sections gets elevated treatment */
section[style*="background: #181616"] .card,
section[style*="background: #333333"] .card,
.anchor-dark .card {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.85) !important;
}
section[style*="background: #181616"] .card h3,
section[style*="background: #333333"] .card h3,
.anchor-dark .card h3 {
  color: #ffffff !important;
}
section[style*="background: #181616"] .card p,
section[style*="background: #333333"] .card p,
.anchor-dark .card p {
  color: rgba(255,255,255,0.70) !important;
}


/* ═══════════════════════════════════════════════════════════
   FULL AUDIT VISUAL FIXES — Round 5
   ═══════════════════════════════════════════════════════════ */

/* ── Card contrast on every background type ─────────────── */
/* White section → cards get off-white bg + strong border */
section[style*="var(--white)"] .card,
section[style*="background: var(--white)"] .card,
section[style*="var(--white)"] .tier:not(.featured),
section[style*="background: var(--white)"] .tier:not(.featured) {
  background: #F3F3F3 !important;
  border: 1.5px solid var(--light-gray) !important;
  box-shadow: 0 2px 8px rgba(51,51,51,0.08) !important;
}

/* Off-white section → cards get white bg */
section[style*="var(--off-white)"] .card,
section[style*="background: var(--off-white)"] .card {
  background: var(--white) !important;
  border: 1.5px solid rgba(165,168,136,0.25) !important;
  box-shadow: 0 2px 12px rgba(51,51,51,0.07) !important;
}

/* Sage-light section → cards get white bg with sage border */
section[style*="var(--sage-light)"] .card,
section[style*="background: var(--sage-light)"] .card {
  background: var(--white) !important;
  border: 1.5px solid rgba(165,168,136,0.30) !important;
  box-shadow: 0 2px 10px rgba(51,51,51,0.09) !important;
}

/* ── Top-align all card content ─────────────────────────── */
.card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.card h3, .card h4 { margin-top: 0 !important; }
/* Force consistent margin-top on body p so peer cards align even when h3 wraps differently */
.card > p { margin-top: 0 !important; }
.card > p + p { margin-top: 0.7rem !important; }
.card .eo-icon { align-self: flex-start !important; flex-shrink: 0 !important; }

/* ── Site-wide peer-box top-alignment (Entry 10) ─────────── */
/* All grid-based peer collections: tier, fit-card, indicator-card,
   value-card, scenario-card, signal-card, benefit-card, outcome-card,
   track-track, niche-snapshot card, compare-col, step.
   force flex-column with content top-aligned so titles and bodies
   start at the same y-pixel across all peers in the row. */
.tier, .fit-card, .indicator-card, .value-card, .scenario-card,
.signal-card, .benefit-card, .outcome-card, .compare-col,
.step, .pillar, .niche-snapshot {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.tier h3, .fit-card h3, .indicator-card h3, .value-card h3,
.scenario-card h3, .signal-card h3, .benefit-card h3, .outcome-card h3,
.compare-col h3, .step h3, .pillar h3, .niche-snapshot h3 {
  margin-top: 0 !important;
}

/* Inline-grid peer collections (e.g., div[style*="grid-template-columns"])
   need their direct-child cards to top-align too */
div[style*="grid-template-columns"] > .card,
div[style*="grid-template-columns"] > .tier,
div[style*="grid-template-columns"] > .fit-card,
div[style*="grid-template-columns"] > .scenario-card {
  align-self: stretch !important;
}

/* ── Middle "Most Common" featured tier — always dark ────── */
.tier.featured {
  background: #181616 !important;
  border-color: var(--terra) !important;
  color: #ffffff !important;
}
.tier.featured .tier-name { color: var(--sage) !important; }
.tier.featured .tier-price { color: var(--gold) !important; }
.tier.featured .tier-price span { color: rgba(255,255,255,0.88) !important; font-weight: 500 !important; font-size: 0.82rem !important; }
.tier.featured .tier-price span[style*="var(--gray)"],
.tier.featured .tier-price span[style*="color:var(--gray)"] { color: rgba(255,255,255,0.88) !important; font-weight: 500 !important; font-size: 0.82rem !important; }
.tier.featured .tier-desc { color: rgba(255,255,255,0.75) !important; }
.tier.featured li { color: rgba(255,255,255,0.85) !important; }
.tier.featured .tier-note,
.tier.featured p { color: rgba(255,255,255,0.65) !important; }
.tier.featured h3 { color: #ffffff !important; }
.tier.featured .tier-sub { color: rgba(255,255,255,0.78) !important; }
.tier.featured .tier-price-sub { color: rgba(255,255,255,0.85) !important; font-weight: 500 !important; }
.tier.featured div[style*="color: var(--gray)"],
.tier.featured div[style*="color:var(--gray)"] { color: rgba(255,255,255,0.65) !important; }

/* ── Track cards on homepage: align "Services" label ─────── */
.track {
  display: flex !important;
  flex-direction: column !important;
}
.track-label { margin-bottom: 0.5rem !important; }
.track h3 { min-height: 2.5rem !important; }
.track > p { min-height: 7.6rem !important; }  /* equalize 5-line intro height */
.track-services { margin-top: 0 !important; }
.track-services .services-heading {
  /* "SERVICES ON THIS TRACK" label at same level both columns */
  padding-top: 1.5rem !important;
}

/* ── Advisory scenarios hero (and detail page heroes) ────── */
/* Our theme already forces .hero to dark; ensure advisory pages get it */
.hero,
.niche-hero {
  background: #181616 !important;
}

/* ── CFO page specific fixes ─────────────────────────────── */
/* Hero: more generous padding for content visibility */
.hero .hero-content[style*="max-width: 820px"] {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* "Why it matters" comparison: gold col needs stronger ink color */
.clarity-compare > div:first-child p {
  color: var(--ink) !important;
}

/* Anchor-dark body text: ensure max readability */
.anchor-dark p,
.anchor-dark .section-intro,
.anchor-dark li {
  color: rgba(255,255,255,0.92) !important;
}
.anchor-dark .section-label {
  color: var(--gold) !important;
  opacity: 1 !important;
}
.anchor-dark h2,
.anchor-dark .section-title {
  color: #ffffff !important;
}

/* "What the work looks like" section text on any bg */
section .work-item p,
section .work-detail { color: var(--gray) !important; }

/* "Honesty on fit" section */
.fit-not-right p { color: var(--gray) !important; }

/* ── Advisory projects: track cards contrast ─────────────── */
/* Track cards that sit on white/off-white need visible bg */
.track-card {
  background: var(--white) !important;
  border: 1.5px solid var(--light-gray) !important;
}

/* Compare boxes in Advisory projects */
.compare-col.typical {
  background: var(--off-white) !important;
  border: 1.5px solid var(--light-gray) !important;
}
.compare-col.eo {
  background: #181616 !important;
}

/* ── Controller middle tier text readability ──────────────── */
/* The Established (dark) tier bullets: force white */
.tier-grid .tier.featured li,
.tier-grid .tier.featured p,
.tier-grid .tier.featured .tier-desc {
  color: rgba(255,255,255,0.88) !important;
}
.tier-grid .tier.featured .tier-note {
  color: rgba(255,255,255,0.55) !important;
}

/* ── Advisory detail page hero backgrounds ────────────────── */
/* All pages with .hero get #181616 — catches advisory detail pages */

/* ── Advisory scenarios: jump-to pills on dark hero ─────── */
.hero .jump-to-nav span,
.hero .jump-pill {
  border-color: rgba(255,255,255,0.30) !important;
  color: rgba(255,255,255,0.80) !important;
  background: rgba(255,255,255,0.06) !important;
}
.hero .jump-to-nav span:hover,
.hero .jump-pill:hover {
  border-color: var(--terra) !important;
  color: var(--gold) !important;
}

/* ── Glossary category headers: use approved palette ─────── */
.glossary-letter,
.glossary-cat {
  color: var(--terra) !important;
  border-color: var(--light-gray) !important;
}
.glossary-term {
  background: var(--white) !important;
  border-left: 2px solid var(--sage) !important;
}

/* ── ABA/Niche: "Book a call" button on dark service marquee */
.service-marquee .btn,
.niche-hero .btn-secondary {
  border-color: rgba(255,255,255,0.50) !important;
  color: rgba(255,255,255,0.92) !important;
  background: rgba(255,255,255,0.08) !important;
}
.service-marquee .btn:hover,
.niche-hero .btn-secondary:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(255,255,255,0.12) !important;
}

/* ── Resources: card contrast in off-white section ─────── */
section[style*="var(--off-white)"] .card-grid > div,
section[style*="background: var(--off-white)"] .card-grid > div {
  background: var(--white) !important;
  border: 1px solid rgba(165,168,136,0.25) !important;
}

/* ── Tax services: card contrast ────────────────────────── */
section[style*="var(--sage-light)"] > .wrap > div > .card,
section[style*="background: var(--sage-light)"] > .wrap > div > .card {
  background: var(--white) !important;
  border: 1.5px solid rgba(165,168,136,0.30) !important;
}

/* ── Text: ensure gray text is readable everywhere ─────── */
/* Minimum contrast: var(--gray) = rgba(51,51,51,0.65) which is 5.8:1 on white
   But on sage-light it's ~4.5:1 — acceptable for body text */
.card p { color: var(--gray) !important; }
.card p strong { color: var(--ink) !important; }

/* ── Who We Serve: "not a right fit" box contrast ────────── */
.fit-signals .not-fit-box,
.not-a-fit { 
  background: var(--off-white) !important;
  border: 1.5px solid var(--light-gray) !important;
}

/* ── Two-track homepage alignment fix ───────────────────── */
.two-track-grid .track {
  min-height: 460px;
}
.two-track-grid .track-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.two-track-grid .track-services {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* ── Foundation: signal cards top-align ─────────────────── */
.signal-cards-grid .card,
.card-grid .card {
  justify-content: flex-start !important;
}
.card .card-icon,
.card .eo-bicon,
.card .eo-icon { flex-shrink: 0; align-self: flex-start; }
.card > p, .card > h3, .card > h4, .card > ul, .card > ol { width: 100%; }
/* Site-wide peer-card h3 alignment — reserve 2 lines so body content top-aligns */
.card-grid .card > h3 { line-height: 1.35; min-height: 50px; }
.card-grid .card > h3[style*="0.98rem"] { min-height: 42px; }

/* ── Tier cards: top-align all content ──────────────────── */
.tier {
  justify-content: flex-start !important;
}
.tier ul { margin-top: auto; } /* push feature list to consistent position */

/* ── Resources: HTML tool boxes (estimated tax worksheet) ── */
.tool-grid,
.worksheet-grid {
  align-items: stretch !important;
}
.tool-box {
  display: flex !important;
  flex-direction: column !important;
}

/* ── WCAG AA fix (F-18/F-19): terra/sage text on light backgrounds ──
   Light Terra (#B8706E) and Sage (#A5A888) fail 4.5:1 as small text/links
   on white and tinted backgrounds. Use the accessible dark variants for
   body-size colored text and links. Large display emphasis is unaffected.
   NOTE: scoped to links and known light-bg labels only — terra text on dark
   inline cards (background:#181616) must stay light terra (passes 4.79), so
   broad p/span selectors are intentionally avoided here. */
a[style*="color: var(--terra)"]:not(.btn),
a[style*="color:var(--terra)"]:not(.btn) {
  color: var(--terra-dark) !important;
}
/* Light-background eyebrow labels that are NOT inside a dark card */
section[style*="#F3F3F3"] .section-label,
section[style*="var(--off-white)"] .section-label,
section[style*="#FFFFFF"] .section-label,
section[style*="var(--white)"] .section-label {
  color: var(--terra-dark) !important;
}

/* ── WCAG / visibility fix (F-20) + box-border consistency ──
   Cards on tinted sections need visible edges (≥3:1) AND the brand's
   standard look is a solid sage left-accent. We satisfy both: a prominent
   3px sage left accent plus a 1px dark-sage hairline on the other three
   sides (dark-sage passes 4.7–7.1 on every approved background). This is
   applied uniformly so every box carries the same border treatment. */
.card:not(.anchor-dark .card):not(.tier),
.tier {
  border-top: 1px solid var(--sage-dark) !important;
  border-right: 1px solid var(--sage-dark) !important;
  border-bottom: 1px solid var(--sage-dark) !important;
  border-left: 3px solid var(--sage) !important;
}
.card:not(.anchor-dark .card):hover {
  border-left-color: var(--terra-dark) !important;
}

/* ── CTA consistency (F-21): one canonical primary/secondary button ──
   Audit found CTA buttons rendering at mixed heights (46/52/55px),
   radii (0/4/8px), and font-sizes. Standardize all .btn instances so
   primary and secondary share identical dimensions site-wide.
   Loaded last; intentional variants (hero, cta-band colors) keep their
   own background rules above — only geometry is normalized here. */
.btn,
.btn-primary,
.btn-secondary,
.btn-arrow {
  border-radius: 4px !important;
  padding: 0.85rem 1.6rem !important;
  font-size: 0.92rem !important;
  line-height: 1.4 !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* ── Contrast cleanup (final pass): inline color/badge overrides ──
   These catch white-text-on-light and colored-text patterns set via
   inline styles or page-level rules that the variable changes didn't reach. */

/* Footer Client Portal: force solid white on dark-sage (was rendering ~60% white) */
.footer-bottom a.footer-client-portal,
a.footer-client-portal {
  color: #FFFFFF !important;
  opacity: 1 !important;
  background: var(--sage-dark) !important;
}

/* Tier badges / pills with white text on terra -> dark-terra */
[class*="tier"] [style*="background: var(--terra)"],
[class*="badge"][style*="var(--terra)"],
.tier-badge, .pill-terra {
  background: var(--terra-dark) !important;
}

/* Inline sage bands / CTAs carrying white or off-white text -> dark-sage */
[style*="background: var(--sage)"][style*="color: var(--white)"],
[style*="background:var(--sage)"][style*="color:var(--white)"],
[style*="background: var(--sage)"][style*="color: #fff"],
[style*="background: var(--sage)"][style*="color: #FFF"] {
  background: var(--sage-dark) !important;
}

/* ── Primary button consistency + contrast (final) ──
   Base .btn-primary was sage (#A5A888) + white text on many pages = 2.45 (fail)
   and inconsistent with the hero/cta-band primary (terra-dark). Standardize the
   default primary button to terra-dark + white (passes 7.09), unless a more
   specific hero/cta-band/white-band rule applies. */
.btn-primary:not(.btn-white):not(.cta-band .btn-primary):not(.hero .btn-primary) {
  background: var(--terra-dark) !important;
  border-color: var(--terra-dark) !important;
  color: #FFFFFF !important;
}

/* Terra/dark-terra eyebrow text sitting on DARK backgrounds must stay light,
   not dark-terra (a remap side-effect turned some into dark-on-dark). */
.hero [style*="color: var(--terra)"],
.anchor-dark [style*="color: var(--terra)"],
[class*="dark"] [style*="color: var(--terra)"],
.hero .section-label,
.niche-hero .section-label {
  color: var(--terra) !important;
}

/* ── Contrast: final stragglers ──────────────────────────── */
/* Sage text/links on white -> dark-sage (e.g. index nav, accent spans) */
a[style*="color: var(--sage)"]:not(.btn),
span.accent[style*="var(--sage)"],
.nav-links a[style*="var(--sage)"] {
  color: var(--sage-dark) !important;
}
/* Terra link on white in privacy/terms nav (Client Portal) -> dark-terra */
nav a[style*="--terracotta"] {
  color: var(--terra-dark) !important;
}
/* Light disclaimer/footnote text on dark: lift to higher-opacity white */
.anchor-dark p[style*="rgba(255"], .hero p[style*="rgba(255"] { color: rgba(255,255,255,0.92) !important; }

/* ── Footer accent line consistency ──────────────────────────
   The terra→sage gradient hairline at the top of the dark footer
   appeared on index.html only. Add it site-wide so every footer
   carries the same accent. position:relative ensures the ::before
   anchors to the footer regardless of page-level styles. */
footer.site-footer {
  position: relative !important;
}
footer.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--sage) 30%, var(--terra) 50%, var(--sage) 70%, transparent 100%);
  opacity: 0.6;
  z-index: 2;
}

/* ── Box-border consistency: uniform sage-left accent on all cards ──
   Some pages added a terra top-stripe (::before) or inline terra top/left
   borders to certain cards, so boxes looked different page to page. The
   sage left-accent above is now the single standard; normalize the card
   top-stripe to sage (it tints terra on hover for feedback) so every box
   matches. Section dividers, hero, footer accents are unaffected. */
.card::before {
  background: var(--sage) !important;
  height: 2px !important;
}
.card:hover::before {
  background: var(--terra-dark) !important;
  height: 3px !important;
}

/* ── Box-border consistency: remove alternating sage/terra card accent ──
   Several pages set the 2nd card in a 2-column grid to a terra top-stripe
   (alternating accent), so paired cards looked different (e.g. Michelle's
   leadership card vs Katie's). Force every 2-grid card to the same sage
   stripe so all boxes match. Theme loads last; matches the page selector's
   specificity with the same :nth-child target. */
.card-grid.grid-2 > .card::before,
.card-grid.grid-2 > .card:nth-child(2)::before {
  background: var(--sage) !important;
  height: 2px !important;
}
.card-grid.grid-2 > .card:hover::before,
.card-grid.grid-2 > .card:nth-child(2):hover::before {
  background: var(--terra-dark) !important;
  height: 3px !important;
}