@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap");

/* ══════════════════════════════════════════
   SPRPWR Token System — StrongerWork
   Pairing: MONUMENT (Instrument Serif + Instrument Sans)
   Theme: Light-first / Editorial / radius-md
   ══════════════════════════════════════════ */

:root {
  /* ── COLOR — forest-green + warm-cream reskin (ref #107) ──────
     RE-SKIN 2026-06 (#107): editorial premium — deep forest-green ⇄ warm-cream
     in stacked rounded panels, warm-gold accent used sparingly.
     Variable names preserved so the whole sheet inherits the remap.
     "green-*" raw scale repurposed to the forest/cream scale. */

  /* Raw scale (kept variable names; values now forest/gold/cream) */
  --color-green-200: #a98a5e; /* warm gold accent (eyebrows/links/marks) */
  --color-green-300: #bda079; /* lighter gold */
  --color-green-400: #243c30; /* deep forest (hover borders, links on cream) */
  --color-green-500: #e8e6df; /* page surface — warm-cream base */
  --color-green-600: #243c30; /* deep forest (footer / deepest band) */

  /* Neutrals (raw scale) — warm-cream family */
  --color-neutral-100: #e8e6df; /* warm cream — text on dark sections */
  --color-neutral-200: #f4f2ec; /* lighter cream — alt surface */
  --color-neutral-300: rgba(36, 60, 48, 0.12); /* card / hairline on cream */
  --color-neutral-400: rgba(36, 60, 48, 0.2); /* stronger hairline */
  --color-neutral-500: #5e6a60; /* muted forest-grey */

  /* Semantic surface — warm-cream / forest-green */
  --color-page: #e8e6df; /* default page base (warm cream) */
  --color-page-soft: #f4f2ec; /* alt section bg — lighter cream */
  --color-page-deep: #243c30; /* deep-forest contrast band */
  --color-page-light: #fcfcfc; /* white-section variant */
  --color-cream-surface: #f4f2ec; /* warm cream-card section variant */
  --color-white: #fcfcfc;
  --color-dark: #243c30; /* deep forest */
  --color-dark-layered: #34483a; /* lifted green (cards/tiles on dark) */
  --color-dark-soft: #34483a; /* soft green for overlays */
  --color-secondary: #16291d; /* deepest green (hero) */

  /* Ground — the forest-green the rounded panels float on (home #107) */
  --color-ground: #243c30;

  /* Ink — DARK forest on the cream base */
  --color-heading: #1a2a1f; /* headings / strong (deep forest ink) */
  --color-body: #3e4a42; /* body (forest-grey) */
  --color-muted: #5e6a60; /* muted */
  --color-ink-faint: #5e6a60;
  --color-cream: #e8e6df; /* warm cream — text ON dark sections */

  /* On-dark ink (for the forest bands / footer / hero overlays) */
  --color-on-dark: #e8e6df;
  --color-on-dark-muted: rgba(232, 230, 223, 0.7);

  /* Light-context ink scale — deep forest for text on cream surfaces */
  --color-ink-deep: #1a2a1f; /* h2/h3, bold body, links */
  --color-ink-medium: #3e4a42; /* body prose */
  --color-ink-darker: #16291d; /* deepest accents */

  /* Surface variants */
  --color-olive-deep: #243c30; /* why-persists--olive band → deep forest */
  --color-slate-navy: #34483a; /* testimonials band → lifted forest */
  --color-bento-edge: rgba(36, 60, 48, 0.12); /* bento cell hairline */
  --color-selection-bg: #243c30; /* ::selection background */

  /* Borders on cream */
  --color-border: rgba(36, 60, 48, 0.12);
  --color-border-strong: rgba(36, 60, 48, 0.2);

  /* Primary — deep-forest button */
  --color-primary: #243c30; /* CTA fill */
  --color-primary-light: #34483a; /* CTA hover (lifted green) */
  --color-primary-deep: #a98a5e; /* warm gold for eyebrows/links */
  --color-primary-ink: #e8e6df; /* text on primary fills */
  --color-primary-subtle: rgba(169, 138, 94, 0.12);
  --color-primary-border: rgba(36, 60, 48, 0.2);

  /* Accent — warm gold for eyebrows / small highlights / links (sparingly) */
  --color-accent: #a98a5e;

  /* Footer — deep warm charcoal (near-black, NOT brown; max contrast vs the green) */
  --color-footer-bg: #1b1a18;
  --color-footer-surface: #2a2825;
  --color-footer-text: rgba(232, 230, 223, 0.72);
  --color-footer-muted: rgba(232, 230, 223, 0.6);
  --color-footer-border: rgba(232, 230, 223, 0.14);
  --color-footer-heading: #e8e6df;

  /* ── TYPOGRAPHY ──────────────────────── */
  --font-display: "Instrument Serif", "Albra", Georgia, serif;
  --font-sans: "Figtree", system-ui, -apple-system, sans-serif;

  --text-hero: clamp(2.5rem, 4.5vw, 3.75rem);
  --text-display: clamp(2.25rem, 4vw, 3.75rem);
  --text-h2: clamp(2rem, 3.5vw, 3rem);
  --text-h3: 1.25rem;
  --text-h3-lg: 1.5rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  --leading-hero: 1;
  --leading-display: 1.05;
  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  --tracking-hero: -0.02em;
  --tracking-display: -0.03em;
  --tracking-tight: -0.01em;
  --tracking-eyebrow: 0.14em;
  --tracking-wide: 0.05em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── RADIUS — Reforge-derived ─────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* ── SPACING ─────────────────────────── */
  --width-content: 72rem;

  /* ── SHADOW (subtle on light surface, teal-tinted) ──── */
  --shadow-sm: 0 1px 2px rgba(36, 60, 48, 0.05), 0 1px 2px rgba(36, 60, 48, 0.06);
  --shadow-md: 0 1px 2px rgba(36, 60, 48, 0.05), 0 10px 24px -18px rgba(36, 60, 48, 0.22);
  --shadow-lg: 0 1px 2px rgba(36, 60, 48, 0.05), 0 18px 40px -28px rgba(36, 60, 48, 0.25);

  /* ── MOTION ──────────────────────────── */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ──────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
::selection {
  background: var(--color-selection-bg);
  color: var(--color-white);
}
::-moz-selection {
  background: var(--color-selection-bg);
  color: var(--color-white);
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-body);
  background: var(--color-page);
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
input,
textarea {
  font: inherit;
}

/* ── LAYOUT ─────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--width-content);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── TYPOGRAPHY ─────────────────────────── */
.font-display {
  font-family: var(--font-display);
}
.text-hero {
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
}
.text-display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.text-h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.text-h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.text-body-lg {
  font-size: var(--text-body-lg);
}
.text-small {
  font-size: var(--text-small);
}
.text-xs {
  font-size: var(--text-xs);
}
.text-muted {
  color: var(--color-muted);
}
.section-title {
  margin-top: 1rem;
  color: var(--color-heading);
}
.section-desc {
  margin-top: 2rem;
  line-height: var(--leading-relaxed);
  color: var(--color-body);
  max-width: 42rem;
}
.disclaimer {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.eyebrow::before {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.eyebrow-light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.85);
}
.eyebrow-light::before {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

/* ── NAV COMPONENT — premium deep-teal bar, scroll-aware, underline-grow hover ─── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0;
  /* Solid (inner-page) default: premium deep-teal surface, light content */
  background: var(--color-page-deep);
  border-bottom: 1px solid rgba(232, 230, 223, 0.1);
  box-shadow: 0 1px 24px -8px rgba(8, 16, 11, 0.5);
  transition:
    background-color var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default),
    backdrop-filter var(--duration-normal) var(--ease-default);
}
/* Homepage / dark-hero variant — transparent, overlays the hero until scrolled */
.site-nav[data-nav="transparent"] {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* Scrolled state — transparent bar settles into the solid premium surface */
.site-nav[data-nav="transparent"].is-scrolled {
  background: color-mix(in srgb, var(--color-page-deep) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(232, 230, 223, 0.1);
  box-shadow: 0 6px 28px -12px rgba(8, 16, 11, 0.6);
}
/* Fixed nav is out of flow — solid (inner) pages need a top offset so content
   isn't hidden behind the bar. Transparent pages overlay the hero on purpose. */
body:has(.site-nav[data-nav="solid"]) main {
  padding-top: 3.75rem;
}
@media (min-width: 640px) {
  body:has(.site-nav[data-nav="solid"]) main {
    padding-top: 4.5rem;
  }
}
body:has(.site-nav[data-nav="transparent"]) main {
  isolation: isolate;
}
.nav-inner {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 5%;
  height: 3.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 640px) {
  .nav-inner {
    height: 4.5rem;
  }
}
.nav-logo {
  height: 1.5rem;
}
@media (min-width: 768px) {
  .nav-logo {
    height: 1.75rem;
  }
}
.nav-logo-link {
  flex-shrink: 0;
  z-index: 400;
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
}
.nav-logo-link:focus {
  outline: none;
}
.nav-logo-link:focus-visible {
  outline: 2px solid var(--color-primary-border);
  outline-offset: 2px;
}
.nav-logo {
  height: 1.57rem;
  width: auto;
  display: block;
  transition: opacity var(--duration-fast) var(--ease-default);
}
@media (min-width: 768px) {
  .nav-logo {
    height: 1.81rem;
  }
}
.nav-logo-link:hover .nav-logo {
  opacity: 0.92;
}
/* Bar is deep-teal everywhere now — logo renders white throughout */
.site-nav .nav-logo {
  filter: brightness(0) invert(1);
}

.nav-links {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
}
.nav-links-group {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav-links-divider {
  width: 1px;
  height: 0.875rem;
  margin: 0 1.5rem;
  background: rgba(232, 230, 223, 0.2);
  flex-shrink: 0;
}
.nav-link {
  position: relative;
  padding: 0.5rem 0.125rem;
  font-size: 0.9375rem; /* 15px — tighter than WeConsult's 20px */
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--color-on-dark-muted);
  transition: color var(--duration-fast) var(--ease-default);
}
/* Refined hover — a fine gold hairline that fades in (no bold white wipe),
   paired with a quiet color lift. Higher-end + subtle, in the accent register. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.125rem;
  right: 0.125rem;
  bottom: 0.3rem;
  height: 1px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.nav-link:hover,
.nav-link.active {
  color: var(--color-on-dark);
}
.nav-link:hover::after,
.nav-link.active::after {
  opacity: 0.9;
}
.nav-link:focus {
  outline: none;
}
.nav-link:focus-visible {
  outline: 2px solid var(--color-on-dark);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* CTA — premium white pill with deep-teal ink (high contrast on the teal bar) */
.nav-cta-btn {
  flex-shrink: 0;
  margin-left: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-white);
  background: var(--color-white);
  color: var(--color-primary);
  text-decoration: none;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
  box-shadow: 0 2px 10px -4px rgba(8, 16, 11, 0.45);
  transition:
    background-color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}
.nav-cta-btn:hover {
  background: var(--color-on-dark);
  border-color: var(--color-on-dark);
  box-shadow: 0 4px 16px -4px rgba(8, 16, 11, 0.55);
}
.nav-cta-btn:active {
  transform: translateY(1px);
}
.nav-cta-btn:focus {
  outline: none;
}
.nav-cta-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}
.nav-cta-label {
  font-weight: var(--weight-semibold);
}
.nav-cta-arrow {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--duration-fast) var(--ease-default);
}
.nav-cta-btn:hover .nav-cta-arrow {
  transform: translateX(0.2rem);
}
/* Buttons — lime pill (primary) + outlined cream (ghost) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  transition:
    background var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}
.btn-primary:hover {
  background: var(--color-primary-light);
}
.btn-primary:active {
  transform: translateY(1px);
}
.btn-primary-lg {
  height: 3rem;
  padding: 0 1.75rem;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(232, 230, 223, 0.35);
  background: transparent;
  color: var(--color-cream);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}
.btn-ghost:hover {
  background: rgba(232, 230, 223, 0.08);
  border-color: rgba(232, 230, 223, 0.55);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-cream);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition:
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}
.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Animated hamburger — 3 spans → X */
.nav-hamburger {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
  z-index: 400;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  color: var(--color-white);
  transition:
    background-color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}
.nav-hamburger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}
.nav-hamburger:focus {
  outline: none;
}
.nav-hamburger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}
body.nav-open .nav-hamburger {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}
.nav-hamburger span {
  display: block;
  position: absolute;
  left: 50%;
  width: 1.125rem;
  height: 2px;
  margin-left: -0.5625rem;
  background: currentColor;
  transition:
    transform var(--duration-normal) var(--ease-default),
    opacity var(--duration-fast) var(--ease-default),
    top var(--duration-normal) var(--ease-default);
}
.nav-hamburger span:nth-child(1) {
  top: calc(50% - 0.375rem);
}
.nav-hamburger span:nth-child(2) {
  top: calc(50% - 1px);
}
.nav-hamburger span:nth-child(3) {
  top: calc(50% + 0.375rem - 2px);
}
/* Bar is deep-teal everywhere — hamburger stays white on all variants */
/* Hamburger → X when drawer open */
body.nav-open .nav-hamburger span:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}
body.nav-open .nav-hamburger span:nth-child(2) {
  opacity: 0;
}
body.nav-open .nav-hamburger span:nth-child(3) {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

/* Backdrop dim layer behind side-sheet drawer */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.25);
  cursor: default;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}
body.nav-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Side-sheet drawer — slides in from right, light bg */
.nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: min(100%, 22rem);
  z-index: 350;
  flex-direction: column;
  background: var(--color-white);
  border-left: 1px solid var(--color-border);
  box-shadow: -12px 0 48px -12px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  pointer-events: none;
  transition: transform var(--duration-normal) cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-drawer.open {
  transform: translateX(0);
  pointer-events: auto;
}
.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.nav-drawer-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.nav-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-body);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}
.nav-drawer-close:hover {
  background: var(--color-page);
  color: var(--color-heading);
}
.nav-drawer-close:focus {
  outline: none;
}
.nav-drawer-close:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 2px;
}
.nav-drawer-close svg {
  width: 1.25rem;
  height: 1.25rem;
}
.nav-drawer-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem 1.25rem 2.5rem;
}
.nav-drawer-link {
  display: block;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(0.25rem);
  transition:
    color var(--duration-fast) var(--ease-default),
    opacity var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-default);
}
.nav-drawer-link:hover {
  color: var(--color-primary);
}
.nav-drawer-link:focus {
  outline: none;
}
.nav-drawer-link:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}
.nav-drawer.open .nav-drawer-link {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(80ms + var(--i, 0) * 45ms);
}
.nav-drawer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.875rem 1.25rem;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(0.25rem);
  transition:
    background-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default),
    opacity var(--duration-normal) var(--ease-default);
}
.nav-drawer-cta:hover {
  background: var(--color-primary-light);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
}
.nav-drawer-cta:active {
  transform: translateY(1px);
}
.nav-drawer-cta:focus {
  outline: none;
}
.nav-drawer-cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.nav-drawer.open .nav-drawer-cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(80ms + var(--i, 0) * 45ms);
}
body.nav-open {
  overflow: hidden;
}

/* Breakpoints */
@media (max-width: 1023px) {
  .nav-links {
    display: none;
  }
  .nav-cta-btn {
    display: none;
  }
  .nav-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-backdrop {
    display: block;
  }
  .nav-drawer {
    display: flex;
  }
}
@media (min-width: 1024px) {
  .nav-drawer,
  .nav-backdrop,
  .nav-hamburger {
    display: none !important;
  }
}

/* Spacer for pages without full-bleed hero */
.nav-spacer {
  height: 4rem;
}

/* ── HERO A (full-bleed image) ──────────── */
.hero-a {
  position: relative;
  margin-top: 0;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      95deg,
      rgba(36, 60, 48, 0.95) 0%,
      rgba(36, 60, 48, 0.88) 30%,
      rgba(36, 60, 48, 0.6) 58%,
      rgba(36, 60, 48, 0.3) 100%
    ),
    linear-gradient(
      180deg,
      rgba(36, 60, 48, 0.25) 0%,
      rgba(36, 60, 48, 0) 26%,
      rgba(36, 60, 48, 0) 58%,
      rgba(36, 60, 48, 0.62) 100%
    );
  z-index: 0;
}
.hero-a .hero-content {
  z-index: 1;
}
.hero-a .hero-content {
  position: relative;
  width: 100%;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 30vh 1.5rem 10vh;
}
.hero-a .hero-text {
  max-width: 48rem;
}

/* ── HERO A — split variant w/ mini calculator on right ── */
.hero-a--split {
  align-items: stretch;
}
.hero-content--split {
  padding: 4rem 1.5rem 8rem;
}
@media (min-width: 1024px) {
  .hero-content--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    padding: 2.5rem 1.5rem 12rem;
  }
  .hero-content--split .hero-text {
    max-width: 32rem;
  }
}

/* ── HERO A — focused single-column (redesigned: fold-disciplined, one hierarchy, directional depth) ── */
/* Full-viewport hero, content vertically centered (left-aligned), everything
   above the fold. Balanced padding (top buffer clears the fixed nav). */
.hero-a--focused {
  align-items: center;
  min-height: 100vh;
}
/* NB: needs `.hero-a` prefix to out-specify the base `.hero-a .hero-content`
   rule (which sets 30vh/10vh padding) — otherwise the content can't center. */
.hero-a .hero-content--focused {
  position: relative;
  width: 100%;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 4.5rem; /* balanced → flex align-items:center truly centers */
}
.hero-content--focused .hero-text { max-width: 42rem; }
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 1.25rem 0 0;
  text-wrap: balance;
}
.hero-content--focused .hero-subtitle {
  margin-top: 1.5rem;
  max-width: 38rem;
  font-size: var(--text-body-lg);
  line-height: 1.55;
  color: rgba(232, 230, 223, 0.82);
}
.hero-content--focused .hero-actions { margin-top: 1.85rem; }
.hero-content--focused .btn-white { padding: 1.05rem 1.85rem; font-size: var(--text-body); }
.hero-proof {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  max-width: 36rem;
  border-top: 1px solid rgba(232, 230, 223, 0.16);
  font-size: var(--text-small);
  line-height: 1.5;
  color: rgba(232, 230, 223, 0.62);
}

.hero-mini-calc {
  margin-top: 3rem;
  background: rgba(36, 60, 48, 0.62);
  border: 1px solid rgba(232, 230, 223, 0.14);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--color-cream);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}
@media (min-width: 1024px) {
  .hero-mini-calc {
    margin-top: 0;
    padding: 2rem;
    max-width: 32rem;
    justify-self: end;
    width: 100%;
  }
}
.mini-calc-head {
  margin-bottom: 1.25rem;
}
.mini-calc-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-on-dark-muted);
}
.mini-calc-title {
  font-family: var(--font-sans) !important;
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-cream);
  margin: 0.5rem 0 0;
  letter-spacing: -0.01em;
}
.mini-calc-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(232, 230, 223, 0.1);
  border-bottom: 1px solid rgba(232, 230, 223, 0.1);
}
.mini-calc-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mini-calc-field label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold);
  color: rgba(232, 230, 223, 0.65);
}
.mini-calc-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mini-calc-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: var(--radius-xs);
  background: rgba(232, 230, 223, 0.18);
  outline: none;
}
.mini-calc-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-ink-deep);
}
.mini-calc-row input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-ink-deep);
}
.mini-calc-value {
  min-width: 5rem;
  text-align: right;
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--color-cream);
  font-variant-numeric: tabular-nums;
}
.mini-calc-result {
  padding: 1.25rem 0 1rem;
}
.mini-calc-result-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold);
  color: rgba(232, 230, 223, 0.65);
}
.mini-calc-result-value {
  font-family: var(--font-sans) !important;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  margin-top: 0.25rem;
}
.mini-calc-result-note {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: rgba(232, 230, 223, 0.55);
  line-height: 1.5;
}
.mini-calc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  padding-top: 1rem;
  border-top: 1px solid rgba(232, 230, 223, 0.1);
  width: 100%;
  justify-content: space-between;
  transition: color var(--duration-fast) var(--ease-default);
}
.mini-calc-cta:hover {
  color: var(--color-cream);
}
.mini-calc-cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration-fast) var(--ease-default);
}
.mini-calc-cta:hover svg {
  transform: translateX(0.2rem);
}
.hero-a h1,
.hero-b-image h1 {
  margin-top: 1.25rem;
  color: var(--color-white);
}
.hero-subtitle {
  margin-top: 2rem;
  margin-left: 0;
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.85);
  max-width: 36rem;
}

/* Calculator CTA-band phone link */
.cta-phone-link {
  color: rgba(255, 255, 255, 0.8);
}
.cta-phone-link:hover {
  color: var(--color-white);
}
.hero-subtitle-wide {
  max-width: 42rem;
}
.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
/* Subpage hero CTA group — used inside .hero-b-image .hero-text */
.hero-cta-row {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Subpage hero inline-link CTA — light-bg variant (Insights pattern) */
.hero-inline-cta {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--color-ink-medium);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.hero-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-ink-deep);
  text-decoration: underline;
  text-decoration-color: rgba(36, 60, 48, 0.32);
  text-underline-offset: 4px;
  font-weight: var(--weight-semibold);
  transition:
    color var(--duration-fast) var(--ease-default),
    text-decoration-color var(--duration-fast) var(--ease-default);
}
.hero-inline-link:hover {
  color: var(--color-green-500);
  text-decoration-color: var(--color-green-500);
}
.hero-inline-link svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--duration-fast) var(--ease-default);
}
.hero-inline-link:hover svg {
  transform: translateX(0.2rem);
}
.hero-disclaimer {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-left: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hero-disclaimer::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}
.btn-with-arrow {
  gap: 0.5rem;
}
.btn-with-arrow svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--duration-fast) var(--ease-default);
}
.btn-with-arrow:hover svg {
  transform: translateX(0.25rem);
}
.btn-ghost-sm {
  height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 0.8125rem;
}

/* Hero scroll cue — subtle indicator at hero bottom */
.hero-scroll-cue {
  position: absolute;
  left: 1.5rem;
  bottom: 2rem;
  display: none;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
@media (min-width: 768px) {
  .hero-scroll-cue {
    display: inline-flex;
  }
}
.hero-scroll-cue:hover {
  color: rgba(255, 255, 255, 0.85);
}
.hero-scroll-cue-line {
  position: relative;
  display: block;
  width: 1px;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.hero-scroll-cue-line::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.85));
  animation: scroll-cue 2.4s var(--ease-default) infinite;
}
@keyframes scroll-cue {
  0% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(200%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue-line::after {
    animation: none;
  }
}

/* ── HERO B (image variant + light variant) ── */
.hero-b-image {
  position: relative;
  isolation: isolate;
  margin-top: 0;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  background-color: var(--color-secondary);
  color: var(--color-white);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.hero-b-image .hero-content {
  position: relative;
  width: 100%;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 30vh 1.5rem 8vh;
}
.hero-b-image .hero-text {
  max-width: 48rem;
}
.hero-b-light {
  background: var(--color-white);
}
.hero-b-light .hero-content {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 5rem 1.5rem 5rem;
}
@media (min-width: 768px) {
  .hero-b-light .hero-content {
    padding: 7rem 1.5rem 7rem;
  }
}

/* ── SECTIONS (shared) ──────────────────── */
.section {
  position: relative;
  background: var(--color-page);
  color: var(--color-body);
}
.section.muted {
  background: var(--color-page-soft);
}
/* Warm cream section variant */
.section.cream {
  background: var(--color-cream-surface);
}
/* Deep-teal contrast band — light ink on the dark fill */
.section.deep {
  background: var(--color-page-deep);
  color: var(--color-on-dark);
}
.section.deep .section-title,
.section.deep h1,
.section.deep h2,
.section.deep h3,
.section.deep .text-h2,
.section.deep .text-h3 {
  color: var(--color-on-dark);
}
.section.deep p,
.section.deep li {
  color: var(--color-on-dark-muted);
}
.section.deep .card {
  background: rgba(232, 230, 223, 0.06);
  border-color: rgba(232, 230, 223, 0.14);
  color: var(--color-on-dark);
  box-shadow: none;
}
.section.deep .card h3 {
  color: var(--color-on-dark);
}
.section.deep .card p {
  color: var(--color-on-dark-muted);
}
/* White-section variant — breaks up the dark sage (e.g. Approach, Insights) */
:is(.section.light, .section.neutral) {
  background: var(--color-page-light);
  color: var(--color-ink-deep); /* near-black sage body text */
}
:is(.section.light, .section.neutral) .section-title,
:is(.section.light, .section.neutral) h1,
:is(.section.light, .section.neutral) h2,
:is(.section.light, .section.neutral) h3,
:is(.section.light, .section.neutral) .text-h2,
:is(.section.light, .section.neutral) .text-h3 {
  color: var(--color-ink-deep); /* near-black sage heading */
}
:is(.section.light, .section.neutral) p {
  color: var(--color-ink-medium);
}
:is(.section.light, .section.neutral) .text-muted,
:is(.section.light, .section.neutral) .author-role,
:is(.section.light, .section.neutral) .insight-card .read-more {
  color: var(--color-neutral-500);
}
:is(.section.light, .section.neutral) .eyebrow {
  color: var(--color-ink-deep);
}
:is(.section.light, .section.neutral) .eyebrow::before {
  background: var(--color-ink-deep);
}
:is(.section.light, .section.neutral) .card,
:is(.section.light, .section.neutral) .insight-card {
  background: var(--color-white);
  border-color: var(--color-neutral-300);
  color: var(--color-ink-medium);
}
:is(.section.light, .section.neutral) .card h3,
:is(.section.light, .section.neutral) .insight-card h3 {
  color: var(--color-ink-deep);
}
:is(.section.light, .section.neutral) .card p,
:is(.section.light, .section.neutral) .insight-card p {
  color: var(--color-ink-medium);
}
:is(.section.light, .section.neutral) .card:hover,
:is(.section.light, .section.neutral) .insight-card:hover {
  border-color: var(--color-green-400);
  background: var(--color-white);
}
:is(.section.light, .section.neutral) .arrow-link {
  color: var(--color-green-600);
  text-decoration-color: var(--color-green-400);
}
:is(.section.light, .section.neutral) .arrow-link:hover {
  color: var(--color-ink-deep);
  text-decoration-color: var(--color-green-600);
}
:is(.section.light, .section.neutral) .btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}
:is(.section.light, .section.neutral) .btn-ghost,
:is(.section.light, .section.neutral) .btn-outline {
  border-color: var(--color-neutral-400);
  color: var(--color-ink-deep);
}
:is(.section.light, .section.neutral) .btn-ghost:hover,
:is(.section.light, .section.neutral) .btn-outline:hover {
  border-color: var(--color-green-600);
  background: transparent;
  color: var(--color-green-600);
}
/* Dark-photo variant — section that wants a texture/nature background */
.section.dark-photo {
  background: var(--color-ink-darker);
  color: var(--color-body);
  isolation: isolate;
}
.section.dark-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-photo, none);
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  z-index: 0;
}
.section.dark-photo > * {
  position: relative;
  z-index: 1;
}
.section-inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 5rem 1.5rem;
  position: relative;
}
@media (min-width: 768px) {
  .section-inner {
    padding: 7rem 1.5rem;
  }
}

/* Slimmer metrics strip on home — half-height padding */
#metrics.section .section-inner {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
  #metrics.section .section-inner {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }
}

/* Site-wide: kill all eyebrows */
.eyebrow,
.eyebrow-light {
  display: none !important;
}

/* ── CARD GRID ──────────────────────────── */
.card-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}
.card-grid.cols-2,
.card-grid.cols-3,
.card-grid.cols-4 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .card-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-grid.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .card-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .card-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  background: var(--color-white);
  color: var(--color-body);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default),
    background-color var(--duration-normal) var(--ease-default);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(169, 138, 94, 0), rgba(169, 138, 94, 0.04));
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
  pointer-events: none;
}
.card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  background: var(--color-white);
}
.card:hover::before {
  opacity: 1;
}
.card > * {
  position: relative;
}
.card h3 {
  color: var(--color-heading);
}
.card p {
  color: var(--color-body);
}
.card-number {
  font-family: monospace;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.card h3 {
  margin-top: 0.75rem;
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.card p {
  margin-top: 0.75rem;
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
}
@media (min-width: 768px) {
  .card p {
    font-size: var(--text-body);
  }
}

/* ══════════════════════════════════════════
   BENTO (Neero-style) — mixed-height panel grid
   ══════════════════════════════════════════ */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 3rem;
}
.sw-bento-cell {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0; /* hard edge — cleaner, higher-end card system */
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}
.sw-bento-cell--system:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}
/* Accent feature tile — deep teal, light ink */
.sw-bento-cell--accent {
  background: var(--color-page-deep);
  border-color: var(--color-page-deep);
  color: var(--color-on-dark);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2.25rem;
}
.bento-feature-title {
  color: var(--color-on-dark);
}
.bento-feature-desc {
  color: var(--color-on-dark-muted);
  max-width: 38rem;
  line-height: var(--leading-relaxed);
}
.bento--diff .bento-feature-desc { color: var(--color-on-dark); }
.bento-feature-bridge {
  font-family: var(--font-display);
  font-size: var(--text-h3-lg);
  line-height: var(--leading-tight);
  color: var(--color-on-dark);
  max-width: 40rem;
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(232, 230, 223, 0.14);
}
/* CTA anchored to the bottom of the tile; the reading block sits up top */
.bento-feature-actions {
  margin-top: auto;
  padding-top: 0.5rem;
}
/* Flow chips: Clarity → People → Execution → Results */
.bento-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.bento-flow-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  background: rgba(232, 230, 223, 0.08);
  border: 1px solid rgba(232, 230, 223, 0.16);
}
.bento-flow-num {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--color-on-dark-muted);
  font-variant-numeric: tabular-nums;
}
.bento-flow-name {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-on-dark);
}
.bento-flow-arrow {
  color: rgba(232, 230, 223, 0.55);
  font-size: 1rem;
  line-height: 1;
}
/* System cards */
.sw-bento-cell--system {
  display: flex;
  flex-direction: column;
}
.bento-system-name {
  margin-top: 0.75rem;
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.bento-system-label {
  margin-top: 0.5rem;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}
.sw-bento-cell--system p {
  margin-top: 0.75rem;
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
}
/* Desktop bento: feature 2×2 top-left, four cards in a 2×2 on the right */
@media (min-width: 900px) {
  .bento--system {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
  }
  .sw-bento-cell--lead {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
}

/* Generic bento for outcome / differentiation card grids */
.bento--cols3 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .bento--cols3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .bento--cols3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.sw-bento-cell--wide {
  grid-column: 1 / -1;
}

/* Differentiation bento — not / is, 2-up on desktop */
.bento--diff {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .bento--diff {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}
.bento--diff .sw-bento-cell {
  display: flex;
  flex-direction: column;
}
.bento--diff .sw-bento-cell--accent {
  gap: 1rem;
}

/* lead-list inside an accent (dark) cell — light markers + ink */
.sw-bento-cell--accent .lead-list li {
  color: var(--color-on-dark-muted);
}
.sw-bento-cell--accent .lead-list li::before,
.lead-list--on-dark li::before {
  background: var(--color-on-dark);
}
.lead-list--on-dark li {
  color: var(--color-on-dark-muted);
}
/* card-number reads light inside accent cells */
.sw-bento-cell--accent .card-number {
  color: var(--color-on-dark-muted);
}

/* ── SPLIT LAYOUT (2-col sticky) ────────── */
.split {
  display: grid;
  gap: 3rem;
}
@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .split-sticky {
    position: sticky;
    top: 6rem;
  }
}

/* ── METRICS ────────────────────────────── */
.metrics-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}
.metric-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3rem, 6.5vw, 5rem);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-hero);
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  display: inline-block;
  position: relative;
}
.metric-value::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.75rem;
  background: var(--color-primary);
}
.metric-label {
  margin-top: 1.25rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  max-width: 18rem;
  line-height: 1.5;
}

/* ── APPROACH MOSAIC ────────────────────── */
.mosaic {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 768px) {
  .mosaic {
    grid-template-columns: 1fr 1fr;
  }
}
.mosaic-image {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-page);
}
.mosaic-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-primary-border);
  transition:
    text-decoration-color var(--duration-fast) var(--ease-default),
    gap var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
  transition: gap var(--duration-fast) var(--ease-default);
}
.arrow-link:hover {
  gap: 0.875rem;
  color: var(--color-primary-deep);
  text-decoration-color: var(--color-primary);
}
.arrow-link-lg {
  margin-top: 3rem;
}

/* ── WHY US ─────────────────────────────── */
.why-us-text p {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
}
.why-us-text p + p {
  margin-top: 1.5rem;
}
@media (min-width: 768px) {
  .why-us-text p {
    font-size: var(--text-body-lg);
  }
}
.signature {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-family: monospace;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-muted);
}

/* ── TESTIMONIAL ────────────────────────── */
.testimonial-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--color-heading);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  max-width: 64rem;
  margin-left: 0;
}
.testimonial-quote::before {
  content: "\201C";
  color: var(--color-primary);
  margin-right: 0.25rem;
}
.testimonial-quote::after {
  content: "\201D";
  color: var(--color-primary);
}
.testimonial-author {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.author-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-primary-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.author-name {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}
.author-role {
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.testimonial-dots {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dot {
  height: 4px;
  border-radius: var(--radius-pill);
  transition: all var(--duration-normal) var(--ease-default);
}
.dot.active {
  width: 3rem;
  background: var(--color-primary);
}
.dot.inactive {
  width: 1.5rem;
  background: var(--color-border);
}

/* ── INSIGHTS GRID ──────────────────────── */
.insight-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  background: transparent;
  color: var(--color-body);
  min-height: 240px;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    background-color var(--duration-normal) var(--ease-default);
}
.insight-card h3 {
  color: var(--color-cream);
}
.insight-card:hover {
  border-color: var(--color-primary-border);
  background: rgba(169, 138, 94, 0.025);
}
.insight-tag {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-primary-border);
  font-family: monospace;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-primary);
}
.insight-card h3 {
  margin-top: 1rem;
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
@media (min-width: 768px) {
  .insight-card h3 {
    font-size: var(--text-h3);
  }
}
.insight-card .read-more {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

/* ── INSIGHTS LIST (variant) ────────────── */
.insights-list {
  margin-top: 3rem;
  border-top: 1px solid var(--color-border);
}
.insight-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--duration-fast);
}
.insight-row:hover h3 {
  color: var(--color-primary);
}
.insight-row-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .insight-row {
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
  }
  .insight-row .insight-meta {
    width: 16rem;
    flex-shrink: 0;
  }
  .insight-row h3 {
    flex: 1;
  }
}
.insight-row h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  transition: color var(--duration-fast);
}
@media (min-width: 768px) {
  .insight-row h3 {
    font-size: var(--text-h3-lg);
  }
}

/* ── STEPPER section heading wrap ── */
#timeline.section .section-title {
  max-width: 50%;
  text-wrap: balance;
  word-break: keep-all;
  hyphens: none;
}
@media (max-width: 768px) {
  #timeline.section .section-title {
    max-width: 100%;
  }
}

/* ── STEPPER (vertical phases rail) ─────── */
.stepper {
  margin-top: 3rem;
  list-style: none;
  padding: 0;
}
.stepper-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 0.5px solid var(--color-neutral-300);
}
.stepper-row.is-final {
  border-bottom: 0;
}
@media (min-width: 768px) {
  .stepper-row {
    grid-template-columns: 200px 1fr;
    gap: 2.5rem;
    padding: 2.25rem 0;
  }
}

.stepper-rail {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: stretch;
}
/* The thin vertical line behind nodes — runs the full row height,
   stops short of the bottom on the final row to terminate at the node */
.stepper-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-neutral-300);
  transform: translateX(-0.5px);
}
.stepper-row:first-child .stepper-rail::before {
  top: 50%;
}
.stepper-row.is-final .stepper-rail::before {
  bottom: 50%;
}

.stepper-node {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  background: var(--color-green-600);
  color: var(--color-cream);
  border: 1.5px solid var(--color-green-600);
  align-self: center;
}

.stepper-content {
  padding-left: 0.25rem;
}
.stepper-title {
  font-family: var(--font-sans) !important;
  font-size: 1.375rem;
  font-weight: var(--weight-semibold) !important;
  color: var(--color-ink-deep);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .stepper-title {
    font-size: 1.5rem;
  }
}
.stepper-desc {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-medium);
  max-width: 42rem;
}
.stepper-pill {
  display: inline-block;
  margin-top: 0.875rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-green-600);
  color: var(--color-cream);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

/* Inline CTA tile under the stepper */
.stepper-cta {
  margin-top: 3rem;
  padding: 1.75rem 2rem;
  background: var(--color-neutral-200);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .stepper-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2.5rem;
  }
}
.stepper-cta-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.stepper-cta-eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-green-600);
}
.stepper-cta-headline {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  color: var(--color-ink-deep);
  letter-spacing: -0.01em;
}

/* Legacy timeline classes — kept harmless */
.timeline {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
}
.timeline-item {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
}
.timeline-item:last-child {
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .timeline-item {
    grid-template-columns: auto 1fr;
    gap: 2.5rem;
  }
  .timeline-meta {
    width: 16rem;
    flex-shrink: 0;
  }
}
.timeline-item h3 {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}
.timeline-item p {
  margin-top: 0.75rem;
  line-height: var(--leading-relaxed);
  color: var(--color-body);
  max-width: 42rem;
}
.timeline-duration {
  margin-top: 0.5rem;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
}

/* ── CTA BAND ───────────────────────────── */
.cta-band {
  position: relative;
  background: var(--color-dark);
  color: var(--color-white);
  overflow: hidden;
}
.cta-band-bg {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-size: cover;
  background-position: center;
}
.cta-band .section-inner {
  position: relative;
  text-align: center;
}
.cta-band h2 {
  max-width: 56rem;
  margin: 0 auto;
}
.cta-band p {
  margin-top: 1.5rem;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.8);
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .cta-band p {
    font-size: var(--text-body-lg);
  }
}
.cta-band .cta-actions {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}
/* Deep-teal band — primary CTA flips to white so it's not teal-on-teal */
.cta-band .btn-primary {
  background: var(--color-white);
  color: var(--color-primary);
}
.cta-band .btn-primary:hover {
  background: var(--color-on-dark);
}
.cta-band .disclaimer {
  margin-top: 1rem;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

/* ── CONTACT FUNNEL ───────────────────────── */
.contact-funnel .contact-head {
  max-width: 48rem;
  margin-bottom: 3rem;
}
.contact-funnel .contact-head .section-title {
  margin-top: 0.75rem;
  text-wrap: balance;
}
.contact-subhead {
  margin-top: 1.25rem;
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-medium);
  max-width: 36rem;
}

.contact-value-props {
  list-style: none;
  padding: 0;
  margin: 0 0 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  border-top: 1px solid var(--color-neutral-300);
  border-bottom: 1px solid var(--color-neutral-300);
  padding: 2rem 0;
}
@media (min-width: 768px) {
  .contact-value-props {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}
.contact-value-prop {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
.contact-value-prop-num {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  padding-top: 0.125rem;
}
.contact-value-prop-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  margin: 0 0 0.375rem;
  color: var(--color-ink-deep);
  letter-spacing: 0;
}
.contact-value-prop-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-ink-medium);
  margin: 0;
}

.contact-funnel-grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .contact-funnel-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.form-row + .form-group,
.form-row + .form-row,
.form-group + .form-row {
  margin-top: 1.25rem;
}
.form-row .form-group + .form-group {
  margin-top: 0;
}
@media (min-width: 640px) {
  .form-row-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%231a2a1f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.contact-submit-btn {
  margin-top: 1.5rem;
  width: 100%;
  justify-content: space-between;
}
@media (min-width: 640px) {
  .contact-submit-btn {
    width: auto;
    min-width: 18rem;
  }
}
.contact-form-pledge {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--color-ink-medium);
  line-height: 1.5;
}
.contact-form-success {
  margin-top: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-lg);
}
.contact-form-success h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  color: var(--color-ink-deep);
  margin: 0 0 0.5rem;
  letter-spacing: 0;
}
.contact-form-success p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-medium);
  margin: 0;
}

.contact-funnel-side {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-next-steps {
  padding: 1.75rem;
  background: var(--color-neutral-200);
  border-radius: var(--radius-lg);
}
.contact-next-steps-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}
.contact-next-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-next-steps-list li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: start;
}
.contact-next-steps-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}
.contact-next-steps-label {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  color: var(--color-ink-deep);
  margin-bottom: 0.25rem;
  letter-spacing: 0;
}
.contact-next-steps-desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink-medium);
}

.contact-proof {
  margin: 0;
  padding: 1.75rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
.contact-proof-quote {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--color-ink-deep);
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
.contact-proof-quote::before {
  content: "“";
  margin-right: 0.125rem;
}
.contact-proof-quote::after {
  content: "”";
}
.contact-proof-attr {
  border-top: 1px solid var(--color-neutral-300);
  padding-top: 0.875rem;
}
.contact-proof-name {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--color-ink-deep);
  letter-spacing: 0;
}
.contact-proof-role {
  font-size: 0.8125rem;
  color: var(--color-ink-medium);
  margin-top: 0.125rem;
}

.contact-fallback {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-neutral-300);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-fallback-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-medium);
  margin-bottom: 0.25rem;
}
.contact-fallback-link {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-ink-deep);
  text-decoration: none;
}
.contact-fallback-link:hover {
  color: var(--color-accent);
}
.contact-fallback-meta {
  font-size: 0.8125rem;
  color: var(--color-ink-medium);
  line-height: 1.5;
  margin-top: 0.25rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-group + .form-group {
  margin-top: 1.25rem;
}
.form-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}
.form-input {
  height: 3rem;
  padding: 0 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-size: var(--text-body);
  color: var(--color-heading);
  transition: border-color var(--duration-fast);
}
.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.form-textarea {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-size: var(--text-body);
  color: var(--color-heading);
  resize: vertical;
  transition: border-color var(--duration-fast);
}
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.contact-detail {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.5rem;
}
.contact-detail + .contact-detail {
  margin-top: 2rem;
}
.contact-detail .label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.contact-detail .value {
  margin-top: 0.5rem;
  font-size: var(--text-body-lg);
  color: var(--color-heading);
}
@media (min-width: 768px) {
  .contact-detail .value {
    font-size: var(--text-h3);
  }
}
.contact-detail a:hover {
  color: var(--color-primary);
  transition: color var(--duration-fast);
}

/* ── FOOTER (SLR-pattern, dark inverted) ─── */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  position: relative;
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 400px at 20% 0%, rgba(169, 138, 94, 0.12), transparent 70%),
    radial-gradient(800px 300px at 90% 100%, rgba(169, 138, 94, 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.site-footer-inner {
  position: relative;
  z-index: 1;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 2rem;
}
@media (min-width: 768px) {
  .site-footer-inner {
    padding: 6rem 1.5rem 2.5rem;
  }
}

.site-footer-row {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--color-footer-border);
}
.site-footer-row:first-child {
  padding-top: 0;
}

/* Tagline row */
.site-footer-row-tagline {
  display: grid;
  gap: 1.5rem;
  align-items: end;
}
@media (min-width: 768px) {
  .site-footer-row-tagline {
    grid-template-columns: 7fr 5fr;
    gap: 3rem;
  }
}
.site-footer-brand-logo {
  display: block;
  height: auto;
  width: clamp(8.5rem, 18.7vw, 13.6rem);
  max-width: 100%;
  filter: brightness(0) invert(1);
}
.site-footer-tagline {
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-footer-text);
  max-width: 32rem;
}
@media (min-width: 768px) {
  .site-footer-tagline {
    font-size: var(--text-body);
  }
}

/* Link grid row */
.site-footer-row-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 2rem;
}
@media (min-width: 768px) {
  .site-footer-row-links {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem 2rem;
  }
}
.site-footer-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-footer-muted);
  margin-bottom: 1.125rem;
}
.site-footer-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}
.site-footer-list li {
  line-height: 1.4;
}
.site-footer-list a,
.site-footer-meta {
  font-size: 0.9375rem;
  color: var(--color-footer-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
.site-footer-list a:hover {
  color: var(--color-footer-heading);
}
.site-footer-meta {
  color: var(--color-footer-muted);
  font-size: 0.875rem;
}
.site-footer-list-creds {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.site-footer-list-creds li {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--color-footer-border);
  border-radius: 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-footer-text);
}

/* CTA column */
.site-footer-col-cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.site-footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-footer-border);
  border-radius: var(--radius-md);
  color: var(--color-footer-heading);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  transition:
    background-color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}
.site-footer-cta:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.site-footer-cta:hover .site-footer-cta-arrow {
  transform: translateX(0.25rem);
}
.site-footer-cta-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.site-footer-cta-arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-default);
}
.site-footer-social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  color: var(--color-footer-muted);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
.site-footer-social svg {
  width: 1rem;
  height: 1rem;
}
.site-footer-social:hover {
  color: var(--color-footer-heading);
}

/* Bottom bar */
.site-footer-bar {
  margin-top: 2rem;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .site-footer-bar {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.site-footer-legal {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-footer-muted);
}
.site-footer-credit {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-footer-muted);
}
.site-footer-credit::before {
  content: "—  ";
  color: var(--color-footer-border);
}

/* ── UTILITY ────────────────────────────── */
.skip-to-content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 0.75rem 1rem;
  background: var(--color-ink);
  color: var(--color-page);
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-100%);
  transition: transform 0.15s ease;
}
.skip-to-content:focus {
  transform: translateY(0);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-md {
  max-width: 28rem;
}

/* ── REVEAL UTILITY ─────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 600ms var(--ease-default),
    transform 600ms var(--ease-default);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(0.75rem);
}
.reveal-stagger.is-visible > * {
  animation: reveal-stagger-up 500ms var(--ease-default) both;
}
.reveal-stagger.is-visible > *:nth-child(2) {
  animation-delay: 80ms;
}
.reveal-stagger.is-visible > *:nth-child(3) {
  animation-delay: 160ms;
}
.reveal-stagger.is-visible > *:nth-child(4) {
  animation-delay: 240ms;
}
.reveal-stagger.is-visible > *:nth-child(5) {
  animation-delay: 320ms;
}
.reveal-stagger.is-visible > *:nth-child(6) {
  animation-delay: 400ms;
}
@keyframes reveal-stagger-up {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── SLR-style section rule (asterisk separator) ── */
.rule-asterisk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 4rem 0;
  color: var(--color-muted);
}
.rule-asterisk::before,
.rule-asterisk::after {
  content: "";
  flex: 1;
  max-width: 8rem;
  height: 1px;
  background: var(--color-border);
}
.rule-asterisk-mark {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.5em;
  color: var(--color-muted);
}

/* ── PROSE LINK STYLE ───────────────────── */
.prose-link,
.prose a {
  color: var(--color-heading);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-primary-border);
  transition: text-decoration-color var(--duration-fast) var(--ease-default);
}
.prose-link:hover,
.prose a:hover {
  text-decoration-color: var(--color-primary);
}

/* ── ACCENT WORDMARK (italic display word in copy) ── */
.accent-word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
}

/* ── BASE FOCUS-VISIBLE ─────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── GEOMETRIC PATTERN UTILITY ────────────
   Octagonal lattice tile in lime hairline.
   Use .has-pattern-accent on a section to add a fading
   right-edge strip; use .pattern-block as a standalone
   background fill (e.g. footer right-half). */

.has-pattern-accent {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.has-pattern-accent::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32%;
  min-width: 18rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='35' viewBox='0 0 40 35'><g stroke='%23a98a5e' stroke-opacity='0.10' stroke-width='0.5' fill='none' stroke-linecap='round'><path d='M0 0 L20 35 L40 0'/><path d='M0 35 L20 0 L40 35'/><path d='M0 0 L0 35 M40 0 L40 35'/></g></svg>");
  background-size: 40px 35px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.5) 35%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.5) 35%,
    rgba(0, 0, 0, 1) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.has-pattern-accent > * {
  position: relative;
  z-index: 1;
}

.pattern-block {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='35' viewBox='0 0 40 35'><g stroke='%23a98a5e' stroke-opacity='0.10' stroke-width='0.5' fill='none' stroke-linecap='round'><path d='M0 0 L20 35 L40 0'/><path d='M0 35 L20 0 L40 35'/><path d='M0 0 L0 35 M40 0 L40 35'/></g></svg>");
  background-size: 40px 35px;
  background-repeat: repeat;
}

/* ── ROUNDED IMAGES (no notches, hard rule) ─── */
.mosaic-image,
.mosaic-image img,
.split-image,
.split-image img,
.image-rounded,
.image-rounded img {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ── ARROW UP-RIGHT GLYPH (matches SLR CTA pattern) ── */
.arrow-up-right {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-default);
}
.arrow-up-right-hover-translate:hover .arrow-up-right {
  transform: translateX(0.2rem);
}

/* ── HERO — 50/50 split, type-led, rounded media ─── */
.hero-split {
  background: var(--color-page);
  border-bottom: 1px solid var(--color-border);
  padding-top: 0;
}
.hero-split-inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 960px) {
  .hero-split-inner {
    grid-template-columns: 6fr 6fr;
    gap: 3.5rem;
    padding: 4.5rem 1.5rem 6rem;
    min-height: 70vh;
  }
}
.hero-split-text {
  max-width: 36rem;
}
.hero-split-headline {
  margin-top: 1.25rem;
  color: var(--color-cream);
  font-weight: var(--weight-normal);
}
.hero-split-sub {
  margin-top: 1.5rem;
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
  max-width: 32rem;
}
.hero-split-media {
  position: relative;
  aspect-ratio: 5 / 4;
  width: 100%;
}
@media (min-width: 960px) {
  .hero-split-media {
    aspect-ratio: 4 / 3;
  }
}
.hero-split-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
/* Subtle lime corner mark top-right of media (matches SLR ref) */
.hero-split-mark {
  position: absolute;
  top: -1.25rem;
  right: -0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  pointer-events: none;
}
.hero-split-mark::before,
.hero-split-mark::after {
  content: "";
  position: absolute;
  background: var(--color-primary);
}
.hero-split-mark::before {
  top: 0;
  right: 0;
  width: 1px;
  height: 1.5rem;
}
.hero-split-mark::after {
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1px;
}

/* ── ARTICLE CARDS (image-top, tag pill, meta, divider, action) ─── */
.article-grid {
  display: grid;
  gap: 1.75rem;
  margin-top: 3rem;
}
@media (min-width: 768px) {
  .article-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}
.article-card:hover {
  border-color: var(--color-green-500);
  box-shadow: 0 12px 32px -16px rgba(36, 60, 48, 0.18);
  transform: translateY(-2px);
}
.article-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--color-neutral-200);
}
.article-card-tag {
  position: absolute;
  bottom: 0.875rem;
  left: 0.875rem;
  padding: 0.3125rem 0.625rem;
  background: rgba(232, 230, 223, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--color-ink-deep);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  border-radius: var(--radius-xs);
}
.article-card-body {
  padding: 1.125rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex: 1;
}
.article-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.75rem;
  color: var(--color-neutral-500);
  font-weight: var(--weight-normal);
  font-family: var(--font-sans);
}
.article-card-readtime {
  color: var(--color-neutral-500);
}
.article-card-title {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-ink-deep);
  margin: 0;
}
@media (min-width: 768px) {
  .article-card-title {
    font-size: 1.125rem;
  }
}
.article-card-byline {
  font-size: 0.8125rem;
  color: var(--color-neutral-500);
  font-family: var(--font-sans);
}
.article-card-divider {
  height: 1px;
  background: var(--color-neutral-300);
  margin-top: auto;
}
.article-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  color: var(--color-ink-deep);
}
.article-card:hover .article-card-action svg {
  transform: translateX(0.2rem);
}

/* Outlined "Read more" full-width variant — when the action sits inside its own button-frame */
.article-card-action-framed {
  margin: 0 1.25rem 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-ink-deep);
  transition: border-color var(--duration-fast) var(--ease-default);
}
.article-card:hover .article-card-action-framed {
  border-color: var(--color-green-500);
}

/* ── Light-section background pattern — same lattice, dark hairlines ─── */
.has-pattern-bg-light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.has-pattern-bg-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='35' viewBox='0 0 40 35'><g stroke='%231a2a1f' stroke-opacity='0.08' stroke-width='0.5' fill='none' stroke-linecap='round'><path d='M0 0 L20 35 L40 0'/><path d='M0 35 L20 0 L40 35'/><path d='M0 0 L0 35 M40 0 L40 35'/></g></svg>");
  background-size: 40px 35px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}
.has-pattern-bg-light > * {
  position: relative;
  z-index: 1;
}

/* ── INTERACTIVE PENTAGON DIAGRAM ─────── */
.systems-pentagon {
  background: var(--color-page);
  position: relative;
  overflow: hidden;
}
.systems-pentagon .section-inner {
  position: relative;
}
.pentagon-grid {
  margin-top: 4rem;
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 960px) {
  .pentagon-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
  }
}
.pentagon-stage {
  position: relative;
  width: 100%;
  max-width: 36rem;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.pentagon-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pentagon-edges line {
  stroke: rgba(169, 138, 94, 0.18);
  stroke-width: 0.18;
  stroke-linecap: round;
  transition:
    stroke 500ms var(--ease-default),
    stroke-width 500ms var(--ease-default),
    stroke-opacity 500ms var(--ease-default);
}
.pentagon-edges line.is-active {
  stroke: var(--color-primary);
  stroke-width: 0.38;
  stroke-opacity: 0.85;
  filter: url(#pentagonGlow);
}
.pentagon-edges line.is-dim {
  stroke: rgba(169, 138, 94, 0.05);
  stroke-width: 0.12;
}
.pentagon-hub {
  fill: rgba(169, 138, 94, 0.12);
  stroke: rgba(169, 138, 94, 0.4);
  stroke-width: 0.18;
  transition:
    fill 500ms var(--ease-default),
    stroke 500ms var(--ease-default);
}
[data-pentagon].has-active .pentagon-hub {
  fill: rgba(169, 138, 94, 0.22);
  stroke: rgba(169, 138, 94, 0.6);
}
.pentagon-hub-label {
  fill: var(--color-primary);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 2.6px;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.pentagon-hub-glow {
  transition: opacity 500ms var(--ease-default);
  opacity: 0.7;
}
[data-pentagon].has-active .pentagon-hub-glow {
  opacity: 1;
}

.pentagon-nodes {
  position: absolute;
  inset: 0;
}
.pentagon-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 5.25rem;
  height: 5.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-page);
  color: var(--color-cream);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  font-family: var(--font-sans);
  padding: 0;
  transition:
    transform 400ms var(--ease-default),
    border-color 400ms var(--ease-default),
    background 400ms var(--ease-default),
    color 400ms var(--ease-default),
    opacity 400ms var(--ease-default),
    box-shadow 400ms var(--ease-default);
}
@media (min-width: 768px) {
  .pentagon-node {
    width: 6rem;
    height: 6rem;
  }
}
.pentagon-node::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid transparent;
  transition:
    border-color 400ms var(--ease-default),
    opacity 400ms var(--ease-default);
  opacity: 0;
  pointer-events: none;
}
.pentagon-node:hover {
  transform: translate(-50%, -50%) scale(1.04);
  border-color: var(--color-primary-border);
}
.pentagon-node:focus-visible {
  outline: none;
  border-color: var(--color-primary);
}
.pentagon-node:focus-visible::before {
  border-color: var(--color-primary);
  opacity: 0.5;
}
.pentagon-node-id {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  transition: color 300ms var(--ease-default);
}
.pentagon-node-label {
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.005em;
  text-align: center;
  line-height: 1.15;
  padding: 0 0.5rem;
}
@media (min-width: 768px) {
  .pentagon-node-label {
    font-size: 0.8125rem;
  }
}

/* States — driven by JS class flags */
[data-pentagon].has-active .pentagon-node:not(.is-active):not(.is-connected) {
  opacity: 0.42;
}
.pentagon-node.is-connected {
  border-color: var(--color-primary-border);
}
.pentagon-node.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow:
    0 0 0 6px rgba(169, 138, 94, 0.12),
    0 0 32px -4px rgba(169, 138, 94, 0.45);
}
.pentagon-node.is-active .pentagon-node-id {
  color: var(--color-primary-ink);
}
.pentagon-node.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-primary);
  animation: pentagon-ping 1.6s var(--ease-default) infinite;
  pointer-events: none;
}
@keyframes pentagon-ping {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pentagon-node.is-active::after {
    animation: none;
  }
}

/* Info panel */
.pentagon-panel {
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pentagon-panel-empty,
.pentagon-panel-active {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pentagon-panel-empty[hidden],
.pentagon-panel-active[hidden] {
  display: none;
}
.pentagon-panel-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}
.pentagon-panel-mark svg {
  width: 1.5rem;
  height: 1.5rem;
}
.pentagon-panel-eyebrow {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.pentagon-panel-title {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-cream);
}
.pentagon-panel-body {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
  max-width: 32rem;
}
.pentagon-panel-active {
  animation: pentagon-panel-in 500ms var(--ease-default) both;
}
@keyframes pentagon-panel-in {
  0% {
    opacity: 0;
    transform: translateX(0.75rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.pentagon-panel-connections {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.5rem;
}
.pentagon-panel-connections-label {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.pentagon-panel-connections-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pentagon-chip {
  background: rgba(232, 230, 223, 0.06);
  border: 1px solid var(--color-border);
  color: var(--color-cream);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}
.pentagon-chip:hover {
  background: var(--color-primary-subtle);
  border-color: var(--color-primary-border);
  color: var(--color-primary);
}

/* ── Heading font lock — Figtree on every heading, site-wide ── */
h1,
h2,
h3,
h4,
h5,
h6,
h1.font-display,
h2.font-display,
h3.font-display,
h4.font-display,
h5.font-display,
h6.font-display,
.section-title,
.text-display,
.text-hero,
.text-h2,
.text-h3 {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
}
/* .font-display still serif on non-heading elements (blockquotes, wordmarks) */
.font-display {
  font-family: var(--font-display);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-display);
}

/* ── WHY IT PERSISTS — 3-col tabbed section ─── */
.why-persists {
  padding-top: 0;
  padding-bottom: 0;
}

/* Dark slate-olive variant */
.why-persists--olive.section {
  background: var(--color-olive-deep);
  color: var(--color-cream);
}
.why-persists--olive .section-title,
.why-persists--olive .why-persists-panel-title {
  color: var(--color-cream);
}
.why-persists--olive .why-tab {
  color: rgba(232, 230, 223, 0.55);
}
.why-persists--olive .why-tab:hover,
.why-persists--olive .why-tab.is-active {
  color: var(--color-cream);
}
.why-persists--olive .why-tab::before {
  background: rgba(232, 230, 223, 0.18);
}
.why-persists--olive .why-tab.is-active::before {
  background: var(--color-primary);
}
.why-persists--olive .why-tab .why-tab-arrow {
  color: rgba(232, 230, 223, 0.55);
}
.why-persists--olive .why-tab.is-active .why-tab-arrow,
.why-persists--olive .why-tab:hover .why-tab-arrow {
  color: var(--color-primary);
}
.why-persists--olive .why-persists-panel-body {
  color: rgba(232, 230, 223, 0.78);
}
.why-persists--olive .why-persists-supporting-title {
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.why-persists--olive .why-persists-supporting-list {
  color: rgba(232, 230, 223, 0.78);
}
.why-persists--olive .why-persists-supporting-list li {
  border-color: rgba(232, 230, 223, 0.14);
}
.why-persists .section-inner {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.why-persists-head {
  max-width: 48rem;
}
.why-persists-head .section-title {
  margin-top: 1.5rem;
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}

.why-persists-grid {
  margin-top: 4rem;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .why-persists-grid {
    grid-template-columns: 18rem minmax(0, 1fr);
    grid-template-areas:
      "tabs panel"
      "tabs supporting";
    grid-template-rows: auto 1fr;
    column-gap: 3rem;
  }
  .why-persists-tabs {
    grid-area: tabs;
    align-self: start;
  }
  .why-persists-panel {
    grid-area: panel;
  }
  .why-persists-supporting {
    grid-area: supporting;
  }
}

/* Tabs */
.why-persists-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0;
}
.why-tab {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: baseline;
  gap: 0.875rem;
  padding: 1rem 1rem 1rem 1.5rem;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(232, 230, 223, 0.08);
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  color: var(--color-cream);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default);
}
.why-tab:last-child {
  border-bottom: 1px solid rgba(232, 230, 223, 0.08);
}
.why-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background var(--duration-fast) var(--ease-default);
}
.why-tab:hover {
  color: var(--color-primary);
}
.why-tab:hover .why-tab-number {
  color: var(--color-primary);
}
.why-tab.is-active {
  color: var(--color-cream);
}
.why-tab.is-active::before {
  background: var(--color-primary);
}
.why-tab.is-active .why-tab-number {
  color: var(--color-primary);
}
.why-tab-number {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  color: rgba(232, 230, 223, 0.45);
  font-variant-numeric: tabular-nums;
  transition: color var(--duration-fast) var(--ease-default);
}
.why-tab-label {
  display: block;
  line-height: 1.35;
}

/* Center panel — flat, no card styling (lives on dark-photo section) */
.why-persists-panel {
  padding: 0.5rem 0;
  background: transparent;
}
.why-tab-panel[hidden] {
  display: none;
}
.why-tab-panel.is-active {
  animation: why-panel-in 500ms var(--ease-default) both;
}
@keyframes why-panel-in {
  0% {
    opacity: 0;
    transform: translateX(0.5rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.why-persists-panel-body {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
  margin-left: 0;
  max-width: 38rem;
}

/* Supporting list — stacked under the body copy as a subordinate block */
.why-persists-supporting {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(232, 230, 223, 0.12);
  max-width: 38rem;
}
.why-persists-supporting-title {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  color: var(--color-cream);
  margin-top: 0;
  margin-bottom: 1rem;
  letter-spacing: 0;
}
.why-persists-supporting-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.why-persists-supporting-list[hidden] {
  display: none;
}
.why-persists-supporting-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  color: var(--color-body);
  line-height: 1.4;
}
.why-persists-supporting-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--color-primary);
  border-top: 1.5px solid var(--color-primary);
  transform: rotate(45deg);
}

/* ── DARK-SAGE SECTION DEPTH GRADIENTS ──────
   Subtle radial wash on every dark sage surface. */
.section,
.cta-band {
  position: relative;
  isolation: isolate;
}
.section:not(.light)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 480px at 12% 8%, rgba(169, 138, 94, 0.06), transparent 65%),
    radial-gradient(900px 360px at 92% 92%, rgba(169, 138, 94, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(36, 60, 48, 0) 0%, rgba(36, 60, 48, 0.18) 100%);
  pointer-events: none;
  z-index: 0;
}
.section:not(.light) > * {
  position: relative;
  z-index: 1;
}
.section.dark-photo::before {
  display: none;
} /* photo bg already has its own treatment */

/* Light sections — subtle warm depth gradient tuned for cream bg */
.section.light::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 480px at 12% 8%, rgba(169, 138, 94, 0.18), transparent 60%),
    radial-gradient(900px 360px at 92% 92%, rgba(169, 138, 94, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(169, 138, 94, 0) 0%, rgba(169, 138, 94, 0.04) 100%);
  pointer-events: none;
  z-index: 0;
}
.section.light > * {
  position: relative;
  z-index: 1;
}

/* Update footer gradient to match new palette */
.site-footer::before {
  background:
    radial-gradient(1200px 400px at 18% 0%, rgba(169, 138, 94, 0.08), transparent 65%),
    radial-gradient(900px 360px at 88% 100%, rgba(169, 138, 94, 0.22), transparent 70%);
}

/* Ensure has-pattern-accent stacks above the new gradient ::before */
.has-pattern-accent::after {
  z-index: 0;
}

/* Subpage hero dark overlay + content z-index */
.hero-b-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 60, 48, 0.55) 0%,
    rgba(36, 60, 48, 0.18) 18%,
    rgba(36, 60, 48, 0) 32%,
    rgba(36, 60, 48, 0.06) 70%,
    rgba(36, 60, 48, 0.2) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.hero-b-image .hero-content {
  z-index: 1;
}

/* ── DARK BUTTON VARIANT — near-black fill, cream text ── */
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border: 1px solid var(--color-primary);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}
.btn-dark:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
}
.btn-dark:active {
  transform: translateY(1px);
}
.btn-dark svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--duration-fast) var(--ease-default);
}
.btn-dark:hover svg {
  transform: translateX(0.2rem);
}

/* ── WHITE BUTTON VARIANT — solid white fill, near-black text ── */
.btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.25rem; /* twin .btn-primary geometry — one button system, inverted for dark grounds */
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-ink-deep);
  border: 1px solid var(--color-white);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}
.btn-white:hover {
  background: var(--color-cream);
  border-color: var(--color-cream);
}
.btn-white:active {
  transform: translateY(1px);
}
.btn-white svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--duration-fast) var(--ease-default);
}
.btn-white:hover svg {
  transform: translateX(0.2rem);
}

/* CTA risk-reducer microcopy — sits directly under a primary CTA button */
.cta-microcopy {
  margin: 0.85rem 0 0;
  font-size: var(--text-small);
  letter-spacing: 0.01em;
  color: var(--color-muted);
}
.cta-microcopy--on-dark {
  color: var(--color-on-dark-muted);
}
.cta-band .cta-microcopy {
  text-align: center;
  margin-top: 1rem;
}

/* ── 1-UP TESTIMONIAL CAROUSEL ───────────── */
.testimonial-carousel {
  position: relative;
  margin-top: 3rem;
  max-width: 100%;
}
.testimonial-viewport {
  overflow: hidden;
  margin-left: -2rem;
  margin-right: -2rem;
  position: relative;
}
.testimonial-rail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
.testimonial-slide {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  padding: 0.5rem 2rem 1rem;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 350ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 350ms;
  pointer-events: none;
}
.testimonial-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 350ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
  pointer-events: auto;
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--weight-normal);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-ink-deep);
  max-width: none;
  margin: 0 0 1.5rem;
}
.testimonial-body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-ink-medium);
  max-width: 34rem;
  margin: 0;
}
.testimonial-divider {
  border: 0;
  border-top: 1px solid var(--color-neutral-300);
  margin: 2.5rem 0 2rem;
  max-width: 36rem;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.testimonial-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--color-neutral-200);
  color: var(--color-ink-deep);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.testimonial-name {
  font-size: 1rem;
  font-weight: var(--weight-medium);
  color: var(--color-ink-deep);
}
.testimonial-role {
  font-size: 0.875rem;
  color: var(--color-neutral-500);
  margin-top: 0.25rem;
}
.testimonial-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.testimonial-nav-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--color-neutral-400);
  background: transparent;
  color: var(--color-ink-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}
.testimonial-nav-btn:hover {
  border-color: var(--color-green-600);
  background: rgba(36, 60, 48, 0.04);
}
.testimonial-nav-btn:disabled,
.testimonial-nav-btn[disabled] {
  opacity: 0.32;
  cursor: not-allowed;
}
.testimonial-nav-btn:disabled:hover {
  border-color: var(--color-neutral-400);
  background: transparent;
}
.testimonial-nav-btn svg {
  width: 1rem;
  height: 1rem;
}
.testimonial-counter {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-neutral-500);
  margin-left: 0.5rem;
  font-variant-numeric: tabular-nums;
}

/* ── LEFT-SIDE PATTERN ACCENT (mirror of right) ── */
.has-pattern-accent-left {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.has-pattern-accent-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 32%;
  min-width: 18rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='35' viewBox='0 0 40 35'><g stroke='%231a2a1f' stroke-opacity='0.10' stroke-width='0.5' fill='none' stroke-linecap='round'><path d='M0 0 L20 35 L40 0'/><path d='M0 35 L20 0 L40 35'/><path d='M0 0 L0 35 M40 0 L40 35'/></g></svg>");
  background-size: 40px 35px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0, 0, 0, 0.5) 35%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0, 0, 0, 0.5) 35%,
    rgba(0, 0, 0, 1) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.has-pattern-accent-left > * {
  position: relative;
  z-index: 1;
}

/* ── LIGHT-HERO COLOR FIX (insights, contact, calculator) ── */
.hero-b-light {
  background: var(--color-page-light);
  border-bottom: 1px solid var(--color-neutral-300);
  color: var(--color-ink-deep);
}
.hero-b-light .eyebrow,
.hero-b-light .eyebrow::before {
  color: var(--color-ink-deep);
  background: currentColor;
}
.hero-b-light .eyebrow {
  color: var(--color-ink-deep);
}
.hero-b-light .eyebrow::before {
  background: var(--color-ink-deep);
}
.hero-b-light h1,
.hero-b-light h2,
.hero-b-light .section-title,
.hero-b-light .text-hero,
.hero-b-light .text-display {
  color: var(--color-ink-deep);
}
.hero-b-light p,
.hero-b-light .section-desc,
.hero-b-light .hero-subtitle {
  color: var(--color-ink-medium);
}
.hero-b-light .btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}
.hero-b-light .btn-ghost {
  border-color: var(--color-neutral-400);
  color: var(--color-ink-deep);
  background: transparent;
}
.hero-b-light .btn-ghost:hover {
  border-color: var(--color-green-600);
  color: var(--color-green-600);
  background: rgba(36, 60, 48, 0.04);
}
.hero-b-light .disclaimer {
  color: var(--color-neutral-500);
}

/* Nav is a unified deep-teal premium bar on all pages — light-hero pages
   keep the same treatment (overrides removed for consistency). */

/* ── BENTO GRID — Five Systems ──────────── */
.systems-bento .section-title,
section.systems-bento h2.font-display.text-h2.section-title {
  margin-top: 1rem;
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: -0.015em !important;
}
.systems-bento .section-desc {
  margin-top: 1.5rem;
  margin-bottom: 4rem;
}

.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 12.5rem;
    gap: 1rem;
  }
}

.bento-cell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-bento-edge);
  background: rgba(36, 60, 48, 0.18);
  padding: 1.75rem;
  display: flex;
}
.bento-cell-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 0.5rem;
}
.bento-cell-id {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  color: var(--color-primary);
}
.bento-cell-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: var(--weight-semibold);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--color-cream);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.bento-cell-body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-body);
  flex: 1;
}
.bento-cell-action {
  display: none;
}
.bento-cell-rule {
  display: none;
}

/* Glow orb decoration on large cells (static, no hover) */
.bento-cell-orb {
  position: absolute;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(169, 138, 94, 0.1), rgba(169, 138, 94, 0) 70%);
  top: -8rem;
  right: -8rem;
  pointer-events: none;
  z-index: 0;
}
.bento-cell-orb--bottom {
  top: auto;
  right: -10rem;
  bottom: -12rem;
  width: 28rem;
  height: 28rem;
}

.bento-cell-expanded {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(232, 230, 223, 0.55);
  margin-top: 0.75rem;
}

/* Footer w/ avatar stack on cell 05 */
.bento-cell-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.25rem;
}
.bento-avatar-stack {
  display: inline-flex;
}
.bento-avatar-stack span {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(232, 230, 223, 0.08);
  border: 2px solid var(--color-page);
  margin-left: -0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color: rgba(232, 230, 223, 0.6);
}
.bento-avatar-stack span:first-child {
  margin-left: 0;
}
.bento-cell-footer-label {
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Bento spans — 4-col layout on lg */
@media (min-width: 1024px) {
  .bento-cell--xl {
    grid-column: span 2;
    grid-row: span 2;
  }
  .bento-cell--md {
    grid-column: span 2;
    grid-row: span 1;
  }
  .bento-grid .bento-cell--feature {
    grid-column: span 1;
    grid-row: span 2;
  }
  /* Last cell — wide */
  .bento-grid > .bento-cell:last-child {
    grid-column: span 3;
    grid-row: span 2;
  }
}

/* Larger title on the two large cells */
@media (min-width: 1024px) {
  .bento-cell--xl .bento-cell-title {
    font-size: 2rem;
  }
}

/* ── BENTO CELLS WITH BG IMAGE ─── */
.bento-cell--has-image {
  background-image:
    linear-gradient(155deg, rgba(36, 60, 48, 0.92) 0%, rgba(36, 60, 48, 0.88) 100%), var(--bg-image);
  background-size: cover, cover;
  background-position: center, var(--bg-position, center);
  background-repeat: no-repeat, no-repeat;
  background-color: var(--color-green-600);
}

/* ── LIGHT-CONTEXT FIX: kill lime text on light bg ── */
/* Section.light + hero-b-light ground rules */
:is(.section.light, .section.neutral) .eyebrow,
:is(.section.light, .section.neutral) .eyebrow::before,
.hero-b-light .eyebrow,
.hero-b-light .eyebrow::before {
  color: var(--color-ink-deep);
}
:is(.section.light, .section.neutral) .eyebrow::before,
.hero-b-light .eyebrow::before {
  background: var(--color-ink-deep);
}

/* arrow-link, read-more, accent-word, link decorations */
:is(.section.light, .section.neutral) .arrow-link,
.hero-b-light .arrow-link {
  color: var(--color-green-600);
  text-decoration-color: rgba(36, 60, 48, 0.32);
}
:is(.section.light, .section.neutral) .arrow-link:hover,
.hero-b-light .arrow-link:hover {
  color: var(--color-ink-deep);
  text-decoration-color: var(--color-green-600);
}
:is(.section.light, .section.neutral) .read-more,
.hero-b-light .read-more {
  color: var(--color-green-600);
}
:is(.section.light, .section.neutral) .accent-word,
.hero-b-light .accent-word {
  color: var(--color-green-600);
  font-style: italic;
}
:is(.section.light, .section.neutral) .prose-link,
:is(.section.light, .section.neutral) .prose a,
.hero-b-light .prose a {
  color: var(--color-ink-deep);
  text-decoration-color: rgba(36, 60, 48, 0.35);
}
:is(.section.light, .section.neutral) .prose-link:hover,
:is(.section.light, .section.neutral) .prose a:hover {
  text-decoration-color: var(--color-green-600);
}

/* author avatar (initials chip) */
:is(.section.light, .section.neutral) .author-avatar,
:is(.section.light, .section.neutral) .testimonial-avatar {
  background: var(--color-neutral-200);
  color: var(--color-ink-deep);
}

/* card numbers / system ids */
:is(.section.light, .section.neutral) .card-number,
:is(.section.light, .section.neutral) .insight-tag,
:is(.section.light, .section.neutral) .bento-cell-id {
  color: var(--color-green-600);
}

/* signature / pull quote */
:is(.section.light, .section.neutral) .signature {
  color: var(--color-green-600);
}

/* metric values on light bg */
:is(.section.light, .section.neutral) .metric-value {
  color: var(--color-ink-deep);
}
:is(.section.light, .section.neutral) .metric-value::after {
  background: var(--color-green-500);
}
:is(.section.light, .section.neutral) .metric-label {
  color: var(--color-neutral-500);
}
:is(.section.light, .section.neutral) .form-label,
.hero-b-light .form-label {
  color: var(--color-green-600);
}

/* ── CARDS ON LIGHT BG ── */
:is(.section.light, .section.neutral) .card {
  border-color: var(--color-neutral-300);
  background: var(--color-white);
  color: var(--color-ink-deep);
}
:is(.section.light, .section.neutral) .card::before {
  display: none;
}
:is(.section.light, .section.neutral) .card:hover {
  border-color: var(--color-green-500);
  background: var(--color-white);
  box-shadow: 0 6px 24px -12px rgba(36, 60, 48, 0.18);
}
:is(.section.light, .section.neutral) .card h3 {
  color: var(--color-ink-deep);
}
:is(.section.light, .section.neutral) .card p {
  color: var(--color-ink-medium);
}

/* ── TESTIMONIALS — slate navy variant ── */
#testimonials.section {
  background: var(--color-slate-navy);
  color: var(--color-cream);
}
#testimonials .section-title,
#testimonials h2,
#testimonials h3 {
  color: var(--color-cream);
}
#testimonials .testimonial-quote {
  color: var(--color-cream);
}
#testimonials .testimonial-divider {
  background: rgba(232, 230, 223, 0.18);
}
#testimonials .testimonial-avatar {
  background: rgba(232, 230, 223, 0.1);
  color: var(--color-cream);
  border: 1px solid rgba(232, 230, 223, 0.22);
}
#testimonials .author-name,
#testimonials .testimonial-author .author-name {
  color: var(--color-cream);
}
#testimonials .author-role,
#testimonials .testimonial-author .author-role {
  color: rgba(232, 230, 223, 0.65);
}
#testimonials [data-prev],
#testimonials [data-next] {
  color: var(--color-cream);
  border-color: rgba(232, 230, 223, 0.28);
}
#testimonials [data-prev]:disabled,
#testimonials [data-next]:disabled {
  opacity: 0.35;
}
#testimonials [data-counter] {
  color: rgba(232, 230, 223, 0.65);
}
#testimonials .dot {
  background: rgba(232, 230, 223, 0.28);
}
#testimonials .dot.active {
  background: var(--color-cream);
}

/* Catch the remaining testimonial classes used in markup */
#testimonials .section-title,
#testimonials.testimonials-slate .section-title {
  color: var(--color-cream);
}
#testimonials .testimonial-name {
  color: var(--color-cream);
  font-weight: var(--weight-semibold);
}
#testimonials .testimonial-role {
  color: rgba(232, 230, 223, 0.65);
  font-size: 0.875rem;
}
#testimonials .testimonial-body {
  color: rgba(232, 230, 223, 0.78);
}
#testimonials .testimonial-author {
  color: var(--color-cream);
}
#testimonials .testimonial-counter,
#testimonials .testimonial-counter span {
  color: rgba(232, 230, 223, 0.65);
}
:is(.section.light, .section.neutral) .contact-detail .label,
.hero-b-light .contact-detail .label {
  color: var(--color-green-600);
}
:is(.section.light, .section.neutral) .contact-detail .value,
:is(.section.light, .section.neutral) .contact-detail a.value,
.hero-b-light .contact-detail .value,
.hero-b-light .contact-detail a.value {
  color: var(--color-ink-deep);
}
:is(.section.light, .section.neutral) .contact-detail a.value:hover,
.hero-b-light .contact-detail a.value:hover {
  color: var(--color-green-500);
}

/* dot indicators */
:is(.section.light, .section.neutral) .dot.active {
  background: var(--color-green-600);
}
:is(.section.light, .section.neutral) .dot.inactive {
  background: var(--color-neutral-300);
}

/* insight rows on insights page */
:is(.section.light, .section.neutral) .insight-row,
:is(.section.light, .section.neutral) .insight-row * {
  color: var(--color-ink-medium);
}
:is(.section.light, .section.neutral) .insight-row .insight-tag {
  color: var(--color-green-600);
}
:is(.section.light, .section.neutral) .insight-row h3 {
  color: var(--color-ink-deep);
}
:is(.section.light, .section.neutral) .insight-row a {
  color: var(--color-green-600);
}

/* contact page links */
:is(.section.light, .section.neutral)
  a:not(.btn-primary):not(.btn-ghost):not(.btn-outline):not(.btn-dark):not(.btn-white):not(
    .article-card
  ):not(.testimonial-nav-btn) {
  color: var(--color-green-600);
}
:is(.section.light, .section.neutral)
  a:not(.btn-primary):not(.btn-ghost):not(.btn-outline):not(.btn-dark):not(.btn-white):not(
    .article-card
  ):not(.testimonial-nav-btn):hover {
  color: var(--color-ink-deep);
}

/* ── NEUTRAL BG VARIANT — warm gray with global radial gradient ────── */
.section.neutral,
.section.insights-narrow {
  background: var(--color-neutral-200);
  color: var(--color-ink-deep);
}
.section.neutral .section-title,
.section.insights-narrow .section-title {
  color: var(--color-ink-deep);
}

/* Calculator gated CTA — dark card inside .section.light, restore cream text */
:is(.section.light, .section.neutral) .calc-gated-cta,
:is(.section.light, .section.neutral) .calc-gated-cta * {
  color: var(--color-cream);
}
:is(.section.light, .section.neutral) .calc-gated-cta .calc-gated-cta-eyebrow {
  color: var(--color-primary);
}
:is(.section.light, .section.neutral) .calc-gated-cta .calc-gated-cta-body {
  color: rgba(232, 230, 223, 0.8);
}
:is(.section.light, .section.neutral) .calc-gated-cta .calc-gated-cta-list li {
  color: rgba(232, 230, 223, 0.88);
}
:is(.section.light, .section.neutral) .calc-gated-cta .calc-gated-cta-fineprint {
  color: rgba(232, 230, 223, 0.55);
}

/* ══════════════════════════════════════════
   HOME — LAYOUT CRAFT UPGRADE (2026-06)
   Eyebrows, icon chips, tension / comparison /
   outcome cards. Tokens only — no new colors.
   ══════════════════════════════════════════ */

/* ── Eyebrow (craft) — opt-in, bypasses the global eyebrow kill ── */
.eyebrow-craft {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}
.eyebrow-craft::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
/* Light variant — for the deep-teal hero overlay */
.eyebrow-craft--light {
  color: rgba(232, 230, 223, 0.85);
}
/* On the deep-teal accent bento tile, eyebrow reads light */
.sw-bento-cell--accent .eyebrow-craft,
.section.deep .eyebrow-craft {
  color: rgba(232, 230, 223, 0.85);
}

/* Section header rhythm: eyebrow → heading */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 44rem;
}
.section-head .section-title {
  margin-top: 0;
}

/* ── Icon chip — rounded-square / circle, Lucide inside ── */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-primary-subtle);
  color: var(--color-accent);
}
.icon-chip svg {
  width: 1.375rem;
  height: 1.375rem;
}
.icon-chip--circle {
  border-radius: var(--radius-pill);
}
/* Muted/translucent teal chip — "friction / leak" signal (tension) */
.icon-chip--muted {
  background: rgba(36, 60, 48, 0.07);
  border-color: var(--color-border);
  color: var(--color-primary);
}
/* Accent chip — system + outcome */
.icon-chip--accent {
  background: var(--color-primary-subtle);
  border-color: rgba(169, 138, 94, 0.22);
  color: var(--color-accent);
}
/* Small variants used in comparison rows */
.icon-chip--neg,
.icon-chip--pos {
  width: 1.625rem;
  height: 1.625rem;
}
.icon-chip--neg svg,
.icon-chip--pos svg {
  width: 1rem;
  height: 1rem;
}
/* Negative (X) chip — muted, de-emphasized */
.icon-chip--neg {
  background: rgba(36, 60, 48, 0.06);
  border-color: var(--color-border);
  color: var(--color-muted);
}
/* Positive (check) chip on the deep-teal "This" card — light */
.icon-chip--pos {
  background: rgba(232, 230, 223, 0.12);
  border-color: rgba(232, 230, 223, 0.24);
  color: var(--color-on-dark);
}

/* ── 2. TENSION — 2×2 icon card grid ── */
.tension-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 3rem;
}
@media (min-width: 768px) {
  .tension-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
.tension-card {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  padding: 1.5rem 1.625rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}
.tension-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.tension-card-text {
  margin: 0;
  align-self: center;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-body);
}
.tension-closing-block {
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}
.tension-closing-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  max-width: 40rem;
}

/* ── 3. SYSTEM bento — icon-chip head on system cards ── */
.bento-system-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.bento-system-head .card-number {
  margin: 0;
}
.sw-bento-cell--system .bento-system-name {
  margin-top: 0;
}

/* ── 4. DIFFERENTIATION — check-vs-X comparison ── */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 3rem;
  align-items: start;
}
@media (min-width: 768px) {
  .compare-grid {
    grid-template-columns: 1fr 1fr; /* symmetric — fits the grid cleanly */
    gap: 1.5rem;
    align-items: stretch;
  }
}
.compare-card {
  display: flex;
  flex-direction: column;
  border-radius: 0; /* hard edge — cleaner, higher-end card system */
  padding: 1.875rem;
}
.compare-card--not {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.compare-card--is {
  background: var(--color-page-deep);
  border: 1px solid var(--color-page-deep);
  box-shadow: var(--shadow-lg);
  padding: 2.125rem;
}
/* The "is" card carries emphasis through colour (deep teal) — not by breaking
   the grid. Equal height, aligned top + bottom to its row. */
.compare-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}
.compare-label--is {
  color: rgba(232, 230, 223, 0.7);
}
.compare-intro {
  margin: 0 0 1.25rem;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-on-dark);
  font-weight: var(--weight-medium);
}
.compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.compare-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.compare-row-text {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}
.compare-row--not .compare-row-text {
  color: var(--color-muted);
}
.compare-row--is .compare-row-text {
  color: var(--color-on-dark);
  font-weight: var(--weight-medium);
}
/* Comparison sits in a .neutral section — keep card heads correct */
.section.neutral .compare-card--not .compare-row-text {
  color: var(--color-neutral-500);
}

/* ── 5. OUTCOME — compact editorial LEDGER ──
   No tall boxes. Each benefit is a tight cell: mono index → gold check →
   text, divided by thin gold hairlines. 4-up desktop, 2-up tablet, 1-up
   mobile. Much shorter than the old cards — no empty box height. */
.outcome-ledger {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  /* hairline rule between rows via the border + collapse trick */
}
.outcome-row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  column-gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(169, 138, 94, 0.22);
}
.outcome-row:last-child {
  border-bottom: 1px solid rgba(169, 138, 94, 0.22);
}
.outcome-row-index {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-border-strong);
  font-variant-numeric: tabular-nums;
}
.outcome-row-check {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}
.outcome-row-check svg {
  width: 1rem;
  height: 1rem;
}
.outcome-row-text {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-tight);
  color: var(--color-heading);
  font-weight: var(--weight-medium);
}
.outcome-row-detail {
  margin: 0.5rem 0 0;
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
}
@media (min-width: 600px) {
  .outcome-ledger {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2.5rem;
  }
  /* top hairline spans both columns of the first row */
  .outcome-row:nth-child(2) {
    border-top: 1px solid rgba(169, 138, 94, 0.22);
  }
  .outcome-row:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid rgba(169, 138, 94, 0.22);
  }
}
@media (min-width: 1024px) {
  .outcome-ledger {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
  }
  .outcome-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.9rem;
    padding: 1.5rem 1.75rem 1.5rem 0;
    border-top: 1px solid rgba(169, 138, 94, 0.22);
    border-bottom: none !important;
  }
  /* vertical hairline between columns */
  .outcome-row::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: 1.5rem;
    right: 1.25rem;
    width: 1px;
    background: rgba(169, 138, 94, 0.18);
  }
  .outcome-row:last-child::before {
    display: none;
  }
  .outcome-row-index {
    order: -1;
  }
  .outcome-row-text {
    line-height: var(--leading-normal);
  }
}

/* ── RECOGNITION — 3-up symptom grid (felt symptoms, system-agnostic) ── */
@media (min-width: 768px) {
  .tension-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .tension-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── PROOF — deep-teal band: single featured quote + credentials strip ── */
.proof-head {
  margin-bottom: 2.75rem;
}
.proof-quote {
  margin: 0;
  max-width: 52rem;
}
.proof-quote-mark {
  color: var(--color-on-dark);
  margin-bottom: 1.75rem;
}
.proof-quote-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.25rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-on-dark);
}
.proof-attrib {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 2rem;
}
.proof-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: rgba(232, 230, 223, 0.12);
  border: 1px solid rgba(232, 230, 223, 0.24);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-on-dark);
}
.proof-attrib-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.proof-attrib-name {
  font-weight: var(--weight-semibold);
  color: var(--color-on-dark);
}
.proof-attrib-role {
  font-size: var(--text-small);
  color: var(--color-on-dark-muted);
}
.proof-creds {
  margin-top: 3.25rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(232, 230, 223, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
.proof-creds-label {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-on-dark-muted);
}
.proof-creds-marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.proof-cred-mark {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  border-radius: 0;
  background: rgba(232, 230, 223, 0.08);
  border: 1px solid rgba(232, 230, 223, 0.18);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-on-dark);
}

/* ════════════════════════════════════════════════════════════════════
   PROOF — EDITORIAL IMAGE MOMENT (#109 layering, adapted to #107 forest)
   Asymmetric two-column composition: a forest-duotoned photo sitting proud
   of an offset gold color-block on one side, the serif quote + attribution
   + credentials on the other. Restrained editorial depth — tokens only.
   ════════════════════════════════════════════════════════════════════ */

/* Mobile-first: single column, image on top, text below. */
.proof-editorial .proof-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
}

/* ── IMAGE COLUMN ── */
.proof-figure {
  position: relative;
  /* left/bottom room for the offset gold block to peek out behind the photo */
  padding: 0 0 1.6rem 1rem;
}

/* The #109 color-block — a warm-gold slab offset behind the photo so the
   image sits proud of it and the block peeks out bottom-left. Anchored to the
   image box (top/left/right of figure padding), overhanging down + left. */
.proof-block {
  position: absolute;
  left: 0;
  right: 1.6rem;
  top: 2.4rem;
  bottom: 0;
  background: var(--color-accent);
  border-radius: 0;
  opacity: 0.9;
}

.proof-image {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 28px 60px -34px rgba(8, 16, 11, 0.7);
  aspect-ratio: 4 / 3;
}
.proof-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* settle the airy office shot into the forest palette */
  filter: saturate(0.78) contrast(1.02);
}

/* Low-opacity forest gradient overlay → image reads in-palette and stays
   legible alongside cream text. */
.proof-image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--color-page-deep) 30%, transparent) 0%,
      color-mix(in srgb, var(--color-page-deep) 64%, transparent) 100%
    );
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Small editorial-dossier index marker under the figure. Sits above the gold
   block (z-index) so it stays legible where the block peeks out below. */
.proof-figure-index {
  display: block;
  position: relative;
  z-index: 2;
  margin-top: 1rem;
  padding-left: 1.5rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-on-dark-muted);
}
.proof-figure-index::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1rem;
  height: 1px;
  background: rgba(169, 138, 94, 0.7);
}

/* ── TEXT COLUMN ── on mobile the quote + creds keep their existing styling. */
.proof-editorial .proof-head {
  margin-bottom: 1.75rem;
}
.proof-editorial .proof-quote {
  max-width: none;
}

/* ── Desktop: asymmetric ~5/7 split, vertically offset columns ── */
@media (min-width: 768px) {
  .proof-editorial .proof-layout {
    grid-template-columns: 5fr 7fr;
    gap: 3.5rem;
    align-items: center;
  }
  /* Vertical offset — the image column lifts above the text column for the
     layered, off-grid editorial feel. */
  .proof-figure {
    margin-top: -1.5rem;
    padding: 0 0 1.75rem 1.5rem;
  }
  /* Let the photo break slightly toward the text column / inner padding for an
     intentional grid-break (stays inside section-inner — no overflow). */
  .proof-image {
    aspect-ratio: 3 / 4;
    margin-right: -1rem;
  }
  .proof-body {
    padding-top: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .proof-editorial .proof-layout {
    gap: 4.5rem;
  }
  .proof-figure {
    margin-top: -2.5rem;
  }
  .proof-image {
    margin-right: -2rem; /* photo sits proud, drifting into the text gutter */
  }
}

/* ── HOW IT WORKS (legacy boxed steps) — still used by /our-solutions.
   Home uses the new .process-flow band below; this stays for other pages. ── */
.process-steps {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  counter-reset: none;
}
@media (min-width: 600px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}
.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}
.process-step:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.process-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary-subtle);
  border: 1px solid rgba(169, 138, 94, 0.22);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.process-step-text {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-heading);
  font-weight: var(--weight-medium);
}

/* ── HOW IT WORKS — connected 1→4 process FLOW (HOME) ──
   No boxes. A single gold hairline runs across the row through a node dot
   at each step; a large Instrument-Serif numeral sits above the step text.
   Reads as a sequence (1→2→3→4), one compact band. Mobile stacks to a
   vertical connected line. Tokens only, hard edges. */
.process-flow {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.process-node {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 1.25rem;
  padding: 1.1rem 0 1.1rem 0;
}
/* vertical connector hairline (mobile) — runs through the node mark */
.process-node-rail {
  position: absolute;
  left: calc((2.5rem - 1px) / 2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(169, 138, 94, 0.3);
}
.process-node:first-child .process-node-rail {
  top: 1.1rem;
}
.process-node:last-child .process-node-rail {
  bottom: calc(100% - 1.1rem - 2.5rem);
}
.process-node-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  grid-row: 1 / span 2;
  z-index: 1;
}
.process-node-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px var(--color-page-light);
}
.process-node-num {
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums lining-nums;
  grid-column: 2;
}
.process-node-text {
  margin: 0.4rem 0 0;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-heading);
  font-weight: var(--weight-medium);
  grid-column: 2;
  max-width: 22rem;
}
/* Desktop ≥ 768px — flip to a HORIZONTAL connected band */
@media (min-width: 768px) {
  .process-flow {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
    margin-top: 3rem;
  }
  .process-node {
    display: block;
    padding: 0;
    padding-top: 2.75rem;
  }
  /* horizontal hairline — each node's segment extends right across the 2rem
     column-gap so the segments meet into ONE continuous line through the dots.
     Starts at the first dot's center; the last node draws no segment (the line
     terminates at the final node). */
  .process-node-rail {
    left: 4.5px;
    right: -2rem;
    top: calc(2.75rem - 1px);
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .process-node:last-child .process-node-rail {
    display: none;
  }
  .process-node-mark {
    position: absolute;
    top: 2.75rem;
    left: 0;
    width: auto;
    height: auto;
    transform: translate(-1px, -50%);
  }
  .process-node-num {
    display: block;
    grid-column: auto;
  }
  .process-node-text {
    grid-column: auto;
    margin-top: 0.75rem;
    max-width: none;
  }
}
.process-closing {
  margin: 2.75rem 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h3-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}

/* ══════════════════════════════════════════
   #107 — EDITORIAL STACKED ROUNDED PANELS (HOME ONLY)
   Forest-green ground, cream + forest panels floating on it
   with large rounded leading edges, serif display, glass
   stat cards, whisper-grain. Scoped to body[data-cms-page="index"]
   so other pages keep the standard flat-section treatment.
   ══════════════════════════════════════════ */

/* ── STEP 5: whisper grain (fixed overlay, magazine texture) ──
   Sits above surfaces but below interaction; pointer-events:none so it
   never blocks clicks. Very low opacity for a true whisper. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

/* ── Ground: the forest-green field the home panels float on ── */
body[data-cms-page="index"] {
  background: var(--color-ground);
}

/* ── STEP 2: stacked rounded panels ──
   Each content section after the hero lifts onto the previous one
   with a big rounded leading edge, a slight overlap, and a soft
   top-shadow. Hero stays full-bleed; footer anchors the bottom. */
body[data-cms-page="index"] main {
  position: relative;
  z-index: 1;
  background: var(--color-ground);
}

/* The radius + lift mechanic — applies to every home .section and the
   CTA band, but NOT the hero (full-bleed) and NOT the footer (anchored). */
/* Only sections that START a new tonal block lift onto the previous one;
   same-tone sections below them sit FLAT and "finish" the block. */
/* Rounded lift ONLY on the first section after the hero (Recognition).
   Every other section transition is flat. */
body[data-cms-page="index"] main > #recognition {
  border-top-left-radius: 2.5rem;
  border-top-right-radius: 2.5rem;
  margin-top: -2.5rem;
  box-shadow: 0 -8px 24px -20px rgba(8, 16, 11, 0.18);
  overflow: hidden; /* clip the gradient ::before to the rounded edge */
}
/* First panel after the hero still lifts onto the hero's bottom edge */
body[data-cms-page="index"] #hero {
  border-bottom: 0;
  position: relative;
  z-index: 0;
}
/* The deep-green panels (proof, cta) blend into the ground; their rounded
   top still reads because the panel above is cream. Give the green panels a
   hairline top highlight so the seam stays crisp on the green ground. */
/* Footer is the other rounded panel — it lifts onto the last section. */
body[data-cms-page="index"] .site-footer {
  position: relative;
  z-index: 1;
  border-top-left-radius: 2.5rem;
  border-top-right-radius: 2.5rem;
  margin-top: -2.5rem;
  box-shadow:
    inset 0 1px 0 0 rgba(232, 230, 223, 0.06),
    0 -8px 24px -20px rgba(8, 16, 11, 0.22);
}
/* Mobile: keep the radius, reduce the overlap so panels don't crowd */
@media (max-width: 640px) {
  body[data-cms-page="index"] main > #recognition,
  body[data-cms-page="index"] .site-footer {
    border-top-left-radius: 1.75rem;
    border-top-right-radius: 1.75rem;
    margin-top: -1.5rem;
  }
}

/* ── STEP 3: serif display on home headlines ──
   Override the site-wide Figtree heading-lock for home display type only.
   Body copy stays Figtree. */
body[data-cms-page="index"] .hero-headline,
body[data-cms-page="index"] .section-title,
body[data-cms-page="index"] .bento-feature-title {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-normal) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.02;
}
/* Refined display sizing — editorial, slightly larger + tighter leading */
body[data-cms-page="index"] .hero-headline {
  font-size: clamp(3.1rem, 6vw, 4.75rem);
  line-height: 0.98;
}
body[data-cms-page="index"] .section-title {
  font-size: clamp(2.2rem, 3.9vw, 3.35rem);
  line-height: 1.0;
}
body[data-cms-page="index"] .bento-feature-title {
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  line-height: 1.02;
}
/* The serif tension/process closing lines already lean serif — tighten leading */
body[data-cms-page="index"] .tension-closing-line,
body[data-cms-page="index"] .process-closing,
body[data-cms-page="index"] .proof-quote-text {
  line-height: 1.08;
}

/* ── STEP 4: glass stat / feature cards on the forest-green panels ──
   Inner cards on .deep sections + the bento accent lead tile read as
   translucent glass on the green. */
body[data-cms-page="index"] .section.deep .card,
body[data-cms-page="index"] .sw-bento-cell--accent,
body[data-cms-page="index"] .compare-card--is,
body[data-cms-page="index"] .proof-cred-mark,
body[data-cms-page="index"] .proof-avatar {
  background: rgba(232, 230, 223, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(232, 230, 223, 0.16);
  box-shadow: 0 18px 40px -28px rgba(8, 16, 11, 0.55);
}
/* The accent bento lead tile sits inside a cream (muted) section, so it reads
   as a solid forest tile, not glass — give it depth instead of translucency. */
body[data-cms-page="index"] .sw-bento-cell--accent {
  background: var(--color-page-deep);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--color-page-deep);
  box-shadow: 0 24px 56px -32px rgba(8, 16, 11, 0.5);
}
/* The "This" comparison card lives in a cream section too — keep it solid forest
   with depth, but lift its glass-chip children. */
body[data-cms-page="index"] .compare-card--is {
  background: var(--color-page-deep);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--color-page-deep);
}
/* Glass flow-chips inside the dark accent tile + the bento glass pills */
body[data-cms-page="index"] .bento-flow-chip {
  background: rgba(232, 230, 223, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: rgba(232, 230, 223, 0.18);
}

/* Inner cream cards keep their crisp cream-card surface; nudge them to the
   lighter cream so they pop off the cream panel ground. */
body[data-cms-page="index"] .tension-card,
body[data-cms-page="index"] .compare-card--not,
body[data-cms-page="index"] .sw-bento-cell--system {
  background: var(--color-page-light);
  border-radius: 0; /* hard edge across the whole card family — cleaner, higher-end */
}

/* The dot-halo + node-dot ring read on whatever ground the section sits on:
   #how-it-works is .muted, #outcome is .cream. Match the halo to each. */
body[data-cms-page="index"] #how-it-works .process-node-dot {
  box-shadow: 0 0 0 6px var(--color-page-soft);
}
body[data-cms-page="index"] #outcome {
  /* compact editorial ledger — no card grounds needed */
}

/* ── Trim the vertical padding on these two now-compact sections so they stop
   eating space (the flat boxes are gone; the bands are short). Home only. ── */
body[data-cms-page="index"] #how-it-works .section-inner,
body[data-cms-page="index"] #outcome .section-inner {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
@media (min-width: 768px) {
  body[data-cms-page="index"] #how-it-works .section-inner,
  body[data-cms-page="index"] #outcome .section-inner {
    padding-top: 5.25rem;
    padding-bottom: 5.25rem;
  }
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL GRID-BREAK LAYER (#108) — home only.
   Additive marginal dossier markers + hairline connectors on the cream
   content sections. Whisper-subtle gold hairlines, tokens only. Markers
   live in the left gutter and HIDE below 1100px (they need gutter room).
   ════════════════════════════════════════════════════════════════════ */

/* Per-section dossier markers are retired — replaced by ONE continuous rail
   with a single scroll-following dot (.scroll-rail, below). Hide the legacy
   per-section markers entirely (spans kept in markup, inert + aria-hidden). */
body[data-cms-page="index"] .gridbreak-marker {
  display: none;
}

/* Echo / lengthen the eyebrow's leading dash → a longer hairline connector. */
body[data-cms-page="index"] .gridbreak .eyebrow-craft::before {
  width: 2.25rem;
  background: rgba(169, 138, 94, 0.55);
}

/* ════════════════════════════════════════════════════════════════════
   SCROLL RAIL — ONE continuous gold hairline down the content gutter with a
   single weighted dot that LAGS the scroll (spring + heavy easing): drifts
   toward the top while scrolling down, toward the bottom while scrolling up,
   and eases back to center at rest. Position is driven by the rAF physics
   loop in index.astro via the --dot-y custom property. Fixed-position, so it
   never introduces horizontal overflow. Gutter-only — shown only once there's
   real room left of the 72rem content column (≥1180px).
   ════════════════════════════════════════════════════════════════════ */
body[data-cms-page="index"] .scroll-rail {
  display: none;
}
@media (min-width: 1180px) {
  body[data-cms-page="index"] .scroll-rail {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    /* ~1rem left of the centered content column's left edge */
    left: max(1.75rem, calc(50vw - (var(--width-content) / 2) - 1rem));
    width: 1.5rem;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.7s var(--ease-default);
  }
  body[data-cms-page="index"] .scroll-rail.is-active {
    opacity: 1;
  }
  /* the continuous hairline, soft-masked at both ends so it fades in/out */
  body[data-cms-page="index"] .scroll-rail__line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(169, 138, 94, 0.3);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%);
  }
  /* the traveling marker — a zero-size anchor riding the line. Neutral rest
     position is viewport center (top:50%); JS adds --dot-y. */
  body[data-cms-page="index"] .scroll-rail__dot {
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    transform: translateY(var(--dot-y, 0px));
    will-change: transform;
  }
  body[data-cms-page="index"] .scroll-rail__node {
    position: absolute;
    left: -3px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0.92;
  }
  /* horizontal connector tick off the node */
  body[data-cms-page="index"] .scroll-rail__connector {
    position: absolute;
    left: 7px;
    top: -0.5px;
    width: 1.5rem;
    height: 1px;
    background: rgba(169, 138, 94, 0.3);
  }
  /* fine measurement ticks descending below the node — editorial texture */
  body[data-cms-page="index"] .scroll-rail__ruler {
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 7px;
    height: 4.5rem;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(169, 138, 94, 0.28) 0,
      rgba(169, 138, 94, 0.28) 1px,
      transparent 1px,
      transparent 0.7rem
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-cms-page="index"] .scroll-rail__dot {
    transform: none !important;
  }
}