/* ==========================================================================
   Back End Solutions LLC — Design System
   Company details ([PHONE]/[EMAIL]/[ADDRESS], domain) are PLACEHOLDERS.
   Palette (BES brand): charcoal-navy #2E3140 (primary dark), gold #D9B07E
         (CTA / accent), #F2F2F2 (light copy on dark). Light paper base with
         dark feature sections; gold used sparingly for CTAs + key accents.
   Type: Futura/Jost (H1) + Inter (H2-H4) + Source Sans 3 (body). Futura is commercial;
         Jost is the free geometric stand-in that ships for everyone.
   Theme motifs: uniform vertical traces, monoline marks, node bullets.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Core palette — BES brand */
  --ink:        #2E3140;   /* brand dark — primary dark background */
  --ink-2:      #383C4D;   /* raised surface on dark */
  --ink-3:      #4A4F63;   /* borders on dark */
  --charcoal:   #24262F;   /* deepest shade for gradient depth */
  --paper:      #F2F2F2;   /* brand light — page background */
  --paper-2:    #E7E7EA;   /* section tint */
  --paper-3:    #DFDFE3;   /* cooler card tint */
  --line:       #D8D8DD;   /* hairline on paper */
  --line-2:     #C1C1C9;   /* stronger border */

  /* Semantic surfaces (light) */
  --surface:    #FFFFFF;   /* cards, menus, inputs */
  --surface-2:  #E7E7EA;   /* secondary surface */
  --heading:    #2E3140;   /* heading text */
  --header-bg:  rgba(242,242,242,.85);
  --btn-bg:     #D9B07E;   /* primary button bg — brand gold */
  --btn-fg:     #2E3140;   /* dark text on gold — ~6.4:1 AA */

  /* Text — all AA (>=4.5:1) on --paper */
  --text:       #2A2C36;   /* body      ~12:1 */
  --text-soft:  #4C4F5A;   /* secondary ~7.4:1 */
  --text-mute:  #5E616C;   /* tertiary  ~5.6:1 */
  --on-ink:     #F2F2F2;   /* primary text on always-dark sections — brand light */
  --on-ink-soft:#CFD1D8;   /* secondary/explanatory text on dark   ~8:1 */

  /* Accent — brand gold (a11y-tuned) */
  --accent:     #D9B07E;   /* gold — decorative / non-text UI + text ON DARK (6.5:1) */
  --accent-2:   #8A5A2B;   /* interactive TEXT on LIGHT (links, eyebrows) — AA bronze 5.4:1 */
  --accent-soft:#E4C79B;   /* gold labels on always-dark surfaces (8:1) */
  --accent-tint:#F3E7D6;   /* halo / tinted fills on light */

  /* Feedback */
  --focus:      #2C6FA6;

  /* Geometry */
  --radius:     14px;
  --radius-sm:  9px;
  --radius-lg:  22px;
  --maxw:       1180px;
  --maxw-narrow:820px;
  --gutter:     clamp(20px, 5vw, 48px);

  /* Elevation */
  --shadow-sm:  0 1px 2px rgba(12,30,46,.06), 0 2px 8px rgba(12,30,46,.05);
  --shadow-md:  0 8px 24px rgba(12,30,46,.09), 0 2px 6px rgba(12,30,46,.05);
  --shadow-lg:  0 24px 60px rgba(12,30,46,.16);

  /* Type — Futura (H1, falls back to free Jost) + Inter (H2-H4) + Source Sans 3 (body).
     Futura is commercial; Jost is the free geometric stand-in and loads for everyone. */
  --serif:   "Futura", "Jost", "Century Gothic", system-ui, -apple-system, sans-serif; /* H1 / display (Futura -> free Jost) */
  --heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* H2-H4 */
  --sans:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* body */
  --mono:    "Inter", system-ui, -apple-system, sans-serif; /* labels / eyebrows */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---- Typography --------------------------------------------------------- */
h1 { font-family: var(--serif); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; color: var(--heading); font-optical-sizing: auto; }
h2, h3, h4 { font-family: var(--heading); font-weight: 600; line-height: 1.12; letter-spacing: -.012em; color: var(--heading); }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.018em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.12rem; font-family: var(--heading); font-weight: 680; letter-spacing: -.01em; }
p { color: var(--text-soft); }
strong { color: var(--text); font-weight: 640; }

.eyebrow {
  font-family: var(--mono);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent-2);
  display: inline-flex; align-items: center; gap: .55rem;
}
/* monoline trace prefix (circuit motif) */
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); display: inline-block; }
.eyebrow.center::before { display: none; }

/* a11y: on any dark surface, accent labels use the LIGHT teal (>=7:1),
   never the dark interactive teal. Structural — not reliant on inline styles. */
.bg-ink .eyebrow, .bg-grad-ink .eyebrow, .hero-grad .eyebrow,
.cta-band .eyebrow, .aud-card:not(.warm) .eyebrow { color: var(--accent-soft); }
.bg-ink .eyebrow::before, .bg-grad-ink .eyebrow::before, .hero-grad .eyebrow::before,
.cta-band .eyebrow::before { background: var(--accent-soft); }
/* link-arrows + kickers on dark surfaces likewise */
.bg-grad-ink .link-arrow, .hero-grad .link-arrow, .cta-band .link-arrow,
.bg-grad-ink .svc-card .kicker, .bg-ink .svc-card .kicker { color: var(--accent-soft); }

.lead { font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.55; color: var(--text-soft); }
.on-ink .lead, .lead.on-ink { color: var(--on-ink-soft); }

/* ---- Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: var(--maxw-narrow); }
.section { padding-block: clamp(4rem, 8vw, 7rem); }
.section.tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section-head { max-width: 720px; }
.section-head.center { max-width: 760px; margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head p { margin-top: 1rem; }

/* Surfaces */
.bg-ink   { background: var(--ink); color: var(--on-ink); }
/* a11y: ALL headings + bold on ANY dark surface must be light (was only .bg-ink h1-h3,
   so gradient/CTA H2s and every <h4> in dark cards rendered dark-on-dark). */
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4, .bg-ink strong,
.bg-grad-ink h1, .bg-grad-ink h2, .bg-grad-ink h3, .bg-grad-ink h4, .bg-grad-ink strong,
.hero-grad h1, .hero-grad h2, .hero-grad h3, .hero-grad h4, .hero-grad strong,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4, .cta-band strong,
.aud-card:not(.warm) h1, .aud-card:not(.warm) h2, .aud-card:not(.warm) h3, .aud-card:not(.warm) h4,
.stage h1, .stage h2, .stage h3, .stage h4 { color: #fff; }
/* a11y: explanatory text on ANY dark surface must use the light tint.
   Previously only .bg-ink was covered, so paragraphs/leads inside the gradient
   heroes, the continuum, and CTA bands fell through to the dark body color. */
.bg-ink p, .bg-ink li,
.bg-grad-ink p, .bg-grad-ink li,
.hero-grad p, .hero-grad li,
.cta-band p, .cta-band li { color: var(--on-ink-soft); }
.bg-ink .lead, .bg-grad-ink .lead, .hero-grad .lead, .cta-band .lead,
.hero .lead, .page-hero .lead { color: var(--on-ink-soft); }
.bg-paper2 { background: var(--paper-2); }
.bg-grad-ink { background: radial-gradient(120% 120% at 15% 0%, #3B3F52 0%, var(--ink) 55%, #202230 100%); color: var(--on-ink); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sans); font-weight: 620; font-size: .98rem; letter-spacing: -.005em;
  padding: .82rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), background .2s, box-shadow .2s, border-color .2s, color .2s;
  white-space: nowrap; line-height: 1;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 6px 18px rgba(217,176,126,.38); }
.btn-primary:hover { background: #CBA067; box-shadow: 0 10px 24px rgba(203,160,103,.48); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-2); }
.btn-outline { background: transparent; border-color: var(--line-2); color: var(--heading); }
.btn-outline:hover { border-color: var(--heading); background: rgba(12,30,46,.04); }
.btn-ghost-light { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.link-arrow { font-weight: 620; color: var(--accent-2); display: inline-flex; align-items: center; gap: .4rem; transition: gap .2s; }
.link-arrow:hover { gap: .65rem; }
.link-arrow::after { content: "→"; }
.bg-ink .link-arrow, .link-arrow.on-ink { color: var(--accent-soft); }

/* ---- Header / Nav ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s, background .25s;
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(12,30,46,.06); }
.nav { display: flex; align-items: center; gap: 1.4rem; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--serif); font-weight: 600; font-size: 1.24rem; color: var(--heading); letter-spacing: -.02em; }
.brand .mark { width: 30px; height: 30px; flex: none; }
.brand small { display:block; font-family: var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--text-mute); margin-top:2px; }
.nav-primary { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.nav-link { display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .8rem; border-radius: 8px; font-weight: 560; font-size: .96rem; color: var(--text); transition: color .18s, background .18s; }
.nav-link:hover { color: var(--heading); background: rgba(12,30,46,.045); }
.nav-cta { margin-left: .5rem; }

/* Dropdown */
.has-menu { position: relative; }
.has-menu > .nav-link .caret { width: .62em; transition: transform .2s; opacity:.6; }
.has-menu[data-open="true"] > .nav-link .caret { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .6rem; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s;
}
.has-menu[data-open="true"] .menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.menu a { display: flex; flex-direction: column; gap: 2px; padding: .7rem .8rem; border-radius: var(--radius-sm); transition: background .15s; }
.menu a:hover { background: var(--accent-tint); }
.menu a span { font-weight: 620; color: var(--heading); font-size: .98rem; }
.menu a small { color: var(--text-mute); font-size: .84rem; line-height: 1.35; }

/* Mobile nav toggle */
.nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--heading); cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle svg { width: 22px; }
.mobile-nav { display: none; }

@media (max-width: 960px) {
  .nav-primary, .nav > .nav-cta.desktop-only { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Full-screen takeover menu on the BES dark brand color */
  .mobile-nav {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 200;
    background: var(--ink); color: var(--on-ink);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0 0 calc(2rem + env(safe-area-inset-bottom));
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .mobile-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

  /* Top bar inside the menu: brand + close (X) — injected by main.js */
  .mobile-nav .m-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: max(env(safe-area-inset-top), .8rem) var(--gutter) .8rem;
    position: sticky; top: 0; background: var(--ink);
    border-bottom: 1px solid var(--ink-3); z-index: 1;
  }
  .mobile-nav .m-bar .brand,
  .mobile-nav .m-bar .brand span { color: #fff; }
  .mobile-nav .m-bar .brand small { color: var(--on-ink-soft); }
  .mobile-nav .m-close {
    width: 46px; height: 46px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); border: 1px solid var(--ink-3); border-radius: 12px;
    color: #fff; cursor: pointer;
  }
  .mobile-nav .m-close svg { width: 22px; }
  .mobile-nav .m-close:hover { background: rgba(255,255,255,.12); }

  .mobile-nav .m-list { padding: .6rem var(--gutter) 0; }
  .mobile-nav .m-group { border-bottom: 1px solid var(--ink-3); }
  .mobile-nav .m-head {
    width: 100%; min-height: 56px; display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; padding: 1rem .2rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
    color: #fff; background: none; border: none; cursor: pointer; text-align: left;
  }
  .mobile-nav .m-head .caret { width: 1em; flex: none; transition: transform .25s var(--ease); color: var(--accent); opacity: .9; }
  .mobile-nav .m-group[data-open="true"] .m-head { color: var(--accent-soft); }
  .mobile-nav .m-group[data-open="true"] .m-head .caret { transform: rotate(180deg); }
  /* Accordion panel: animated, stays open until toggled/selected */
  .mobile-nav .m-panel { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .28s var(--ease); }
  .mobile-nav .m-panel > div { min-height: 0; }
  .mobile-nav .m-group[data-open="true"] .m-panel { grid-template-rows: 1fr; padding-bottom: .6rem; }
  .mobile-nav .m-panel a {
    display: flex; align-items: center; min-height: 48px; padding: .5rem .9rem; margin-bottom: .25rem;
    color: var(--on-ink-soft); font-weight: 500; font-size: 1.02rem;
    border-left: 2px solid var(--ink-3); border-radius: 0 8px 8px 0;
  }
  .mobile-nav .m-panel a:hover, .mobile-nav .m-panel a:focus-visible { color: #fff; border-left-color: var(--accent); background: rgba(255,255,255,.04); }
  .mobile-nav .m-solo {
    display: flex; align-items: center; min-height: 56px; padding: 1rem .2rem;
    font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: #fff; border-bottom: 1px solid var(--ink-3);
  }
  .mobile-nav .m-solo:hover, .mobile-nav .m-solo:focus-visible { color: var(--accent-soft); }
  .mobile-nav .m-cta { padding: 1.6rem var(--gutter) 0; }
  .mobile-nav .m-cta .btn { margin-top: 0; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: none; }
  .mobile-nav .m-panel { transition: none; }
}

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero-grad { background: radial-gradient(130% 120% at 12% -10%, #3D4256 0%, var(--ink) 52%, #1E2029 100%); color: var(--on-ink); }
.hero-inner { padding-block: clamp(3.4rem, 7vw, 6rem); position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lead { margin-top: 1.4rem; max-width: 56ch; }
.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.hero-note { margin-top: 1.4rem; font-size: .9rem; color: var(--on-ink-soft); display:flex; align-items:center; gap:.5rem; }
.hero-note svg { width: 1.05rem; color: var(--accent); flex:none; }
/* vertical circuit-trace motif: uniform vertical strokes + nodes */
.grid-motif { position: absolute; inset: 0; z-index: 1; opacity: .7;
  background-image:
    repeating-linear-gradient(90deg, rgba(217,176,126,.12) 0 1.5px, transparent 1.5px 54px),
    radial-gradient(rgba(217,176,126,.30) 1.7px, transparent 2.2px);
  background-size: 54px 100%, 54px 54px;
  background-position: 0 0, 27px 27px;
  mask-image: radial-gradient(120% 95% at 80% 4%, #000 0%, transparent 72%); }

/* ---- Grids -------------------------------------------------------------- */
.grid { display: grid; gap: 1.4rem; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split.reverse > :first-child { order: 2; }
@media (max-width: 900px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
}
@media (max-width: 560px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}

/* ---- Cards -------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.card.hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .98rem; }
.card .ico { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-2); margin-bottom: 1.1rem; }
.card .ico svg { width: 24px; }
.bg-ink .card, .bg-grad-ink .card, .hero-grad .card, .cta-band .card { background: var(--ink-2); border-color: var(--ink-3); box-shadow: none; }
.bg-ink .card h3 { color: #fff; }
.bg-ink .card .ico { background: rgba(217,176,126,.18); color: var(--accent-soft); }

/* Service card w/ list */
.svc-card { display: flex; flex-direction: column; height: 100%; }
.svc-card .kicker { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); margin-bottom: .5rem; }
.svc-card ul.ticks { margin: 1rem 0 1.3rem; display: grid; gap: .5rem; }
.svc-card .foot { margin-top: auto; }

/* circuit-node bullet: node dot + halo pad + outgoing trace */
ul.ticks li { position: relative; padding-left: 1.75rem; font-size: .96rem; color: var(--text-soft); }
ul.ticks li::before { content: ""; position: absolute; left: 1px; top: .52em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
ul.ticks li::after { content: ""; position: absolute; left: 11px; top: calc(.52em + 3px); width: 9px; height: 2px; background: var(--accent); opacity: .5; }
.bg-ink ul.ticks li { color: var(--on-ink-soft); }
.bg-ink ul.ticks li::before { box-shadow: 0 0 0 3px rgba(217,176,126,.22); }

/* Outcome card */
.outcome { padding: 1.5rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.outcome .num { font-family: var(--serif); font-size: 1.1rem; color: var(--accent-2); font-weight: 600; }

/* ---- Audience selector -------------------------------------------------- */
.audience { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 760px){ .audience { grid-template-columns: 1fr; } }
.aud-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--ink-3); background: linear-gradient(160deg, var(--ink-2), var(--ink)); color: var(--on-ink); display: flex; flex-direction: column; min-height: 320px; transition: transform .25s var(--ease), box-shadow .25s; }
.aud-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.aud-card.warm { background: linear-gradient(160deg, var(--surface), var(--surface-2)); color: var(--text); border-color: var(--line-2); }
.aud-card.warm h3, .aud-card h3 { color: inherit; font-size: 1.5rem; }
.aud-card.warm h3 { color: var(--heading); }
.aud-card h3 { color:#fff; }
.aud-card .tag { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: .9rem; }
.aud-card.warm .tag { color: var(--accent-2); }
.aud-card p { margin: .8rem 0 1.6rem; }
.aud-card.warm p { color: var(--text-soft); }
.aud-card:not(.warm) p { color: var(--on-ink-soft); }
.aud-card .foot { margin-top: auto; }

/* ---- Continuum / stepper ------------------------------------------------ */
.continuum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: step; position: relative; }
@media (max-width: 900px){ .continuum { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .continuum { grid-template-columns: 1fr; } }
.stage { position: relative; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--radius); padding: 1.5rem 1.35rem; overflow: hidden; }
.stage .lvl { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft); }
.stage h3 { color: #fff; font-size: 1.18rem; margin: .5rem 0 .9rem; }
.stage ul { display: grid; gap: .35rem; }
.stage ul li { color: var(--on-ink-soft); font-size: .92rem; padding-left: 1rem; position: relative; }
.stage ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.stage .bignum { position: absolute; top: .6rem; right: 1rem; font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: rgba(255,255,255,.06); font-weight: 600; }
.stage.is-foundation { border-top: 3px solid var(--accent); }
.continuum-note { text-align: center; margin-top: 1.8rem; color: var(--on-ink-soft); }

/* ---- Process steps ------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; counter-reset: s; }
@media (max-width: 900px){ .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .steps { grid-template-columns: 1fr; } }
.step { counter-increment: s; padding-top: 1.6rem; border-top: 2px solid var(--line-2); position: relative; }
.step::before { content: counter(s, decimal-leading-zero); font-family: var(--serif); font-size: 1.1rem; color: var(--accent-2); font-weight: 600; position: absolute; top: -1.05rem; left: 0; background: var(--paper); padding-right: .6rem; }
.bg-ink .step { border-color: var(--ink-3); }
.bg-ink .step::before { background: var(--ink); color: var(--accent-soft); }
.step h3 { font-size: 1.2rem; margin-bottom: .5rem; }

/* ---- Stat / figures ----------------------------------------------------- */
.figrow { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
@media (max-width: 700px){ .figrow { grid-template-columns: 1fr; } }

/* ---- Section illustrations ----------------------------------------------- */
.img-illustration { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); background: var(--ink); }
.img-illustration img { display: block; width: 100%; height: 100%; object-fit: cover; }
.img-illustration.card-fig { padding: 0; }
.img-illustration figcaption { padding: .85rem 1rem; font-size: .88rem; font-weight: 620; color: var(--text-soft); background: var(--surface); border-top: 1px solid var(--line); }
.fig .k { font-family: var(--serif); font-size: clamp(2rem,4vw,2.8rem); color: var(--heading); font-weight: 600; }
.bg-ink .fig .k { color:#fff; }
.fig .v { color: var(--text-soft); font-size: .98rem; }

/* ---- Pill row (roles / logos placeholder) ------------------------------- */
.pillrow { display: flex; flex-wrap: wrap; gap: .6rem; }
.pill { border: 1px solid var(--line-2); border-radius: 999px; padding: .5rem 1rem; font-size: .92rem; font-weight: 560; color: var(--text-soft); background: var(--surface); }
.bg-ink .pill { background: var(--ink-2); border-color: var(--ink-3); color: var(--on-ink-soft); }
.pill.accent { border-color: var(--accent); color: var(--accent-2); background: var(--accent-tint); }

/* logo placeholders */
.logo-strip { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; align-items: center; }
@media (max-width: 700px){ .logo-strip { grid-template-columns: repeat(2,1fr); } }
.logo-ph { height: 64px; border: 1px dashed var(--line-2); border-radius: 10px; display: grid; place-items: center; color: var(--text-mute); font-size: .78rem; letter-spacing: .06em; background: var(--surface); }

/* ---- FAQ accordion ------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.25rem .2rem; display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; font-family: var(--heading); font-size: clamp(1.08rem,1.6vw,1.28rem); color: var(--heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 22px; height: 22px; position: relative; margin-top: .35rem; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; background: var(--accent-2); border-radius: 2px; transition: transform .25s var(--ease); }
.faq summary .plus::before { top: 10px; left: 0; width: 22px; height: 2.5px; }
.faq summary .plus::after { left: 10px; top: 0; width: 2.5px; height: 22px; }
.faq details[open] summary .plus::after { transform: scaleY(0); }
.faq .ans { padding: 0 2.4rem 1.4rem .2rem; color: var(--text-soft); }
.faq .ans p + p { margin-top: .8rem; }

/* ---- Forms -------------------------------------------------------------- */
.form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .88rem; font-weight: 620; color: var(--heading); }
.field label .opt { color: var(--text-mute); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .95rem; border: 1.5px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--text); transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(217,176,126,.40); }
.field input:invalid:not(:placeholder-shown), .field input[aria-invalid="true"] { border-color: #C0392B; }
.field .field-error { display: none; font-size: .82rem; color: #B4342A; font-weight: 600; }
.field.invalid .field-error { display: block; }
@media (prefers-color-scheme: dark){ .field .field-error { color: #F0857A; } }
.field.row-2 { grid-template-columns: 1fr 1fr; gap: 1rem; display: grid; }
@media (max-width: 560px){ .field.row-2 { grid-template-columns: 1fr; } }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
@media (max-width: 560px){ .check-grid { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: .6rem; border: 1.5px solid var(--line-2); border-radius: 10px; padding: .65rem .8rem; cursor: pointer; transition: border-color .15s, background .15s; font-size: .94rem; }
.check:hover { border-color: var(--accent-2); }
.check input { width: 18px; height: 18px; accent-color: var(--accent-2); flex: none; }
.check:has(input:checked) { border-color: var(--accent-2); background: var(--accent-tint); }
.form-note { font-size: .85rem; color: var(--text-mute); }
.form-success { display: none; padding: 1.4rem 1.5rem; border-radius: var(--radius); background: var(--accent-tint); border: 1px solid var(--accent-soft); color: var(--heading); }
.form-success.show { display: block; }
.form.hide { display: none; }

/* ---- Callout / CTA band ------------------------------------------------- */
.cta-band { border-radius: var(--radius-lg); padding: clamp(2.4rem, 5vw, 4rem); background: radial-gradient(120% 130% at 85% 0%, #3D4256 0%, var(--ink) 60%); color: var(--on-ink); position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { margin-top: 1rem; max-width: 52ch; }
.cta-band .actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.cta-band .subtle { margin-top: 1rem; font-size: .9rem; color: var(--on-ink-soft); }

/* ---- Note / disclosure -------------------------------------------------- */
.note { border-left: 3px solid var(--accent); background: var(--accent-tint); padding: 1rem 1.2rem; border-radius: 0 10px 10px 0; font-size: .95rem; color: var(--text); }
.placeholder-tag { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); background:var(--accent-tint); border:1px dashed var(--accent-soft); border-radius:6px; padding:.2rem .5rem; }

/* ---- Breadcrumb / page hero (interior) ---------------------------------- */
.page-hero { padding-block: clamp(3rem, 6vw, 5rem); }
.crumb { font-size: .84rem; color: var(--on-ink-soft); margin-bottom: 1.2rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.crumb a:hover { color:#fff; }
.crumb .sep { opacity:.5; }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { margin-top: 1.2rem; max-width: 60ch; }

/* Anchor offset for sticky header */
:target { scroll-margin-top: 90px; }
[id] { scroll-margin-top: 90px; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--on-ink-soft); padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 860px){ .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }
@media (max-width: 480px){ .footer-top { grid-template-columns: 1fr; } }
.site-footer .brand { color: #fff; }
.site-footer .brand small { color: var(--on-ink-soft); }
.footer-col h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 680; }
.footer-col a { display: block; padding: .3rem 0; color: var(--on-ink-soft); font-size: .95rem; transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-about p { margin: 1rem 0; font-size: .95rem; max-width: 34ch; }
.footer-contact { display: grid; gap: .4rem; font-size: .95rem; }
.footer-bottom { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--ink-3); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .86rem; color: var(--on-ink-soft); }
.footer-bottom .legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ---- Reveal animation --------------------------------------------------- */
/* Fail-safe reveal: hidden state applies ONLY when main.js confirms it can reveal
   (adds html.reveals-active). If JS is blocked or stale, content stays visible. */
.reveal.in { opacity: 1; transform: none; }
html.reveals-active .reveal { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.reveals-active .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }

/* ---- Utilities ---------------------------------------------------------- */
.center { text-align: center; }
.mt-0{margin-top:0}.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem}.mt-4{margin-top:3rem}
.mb-2{margin-bottom:1.2rem}.mb-3{margin-bottom:2rem}
.maxw-prose{max-width:64ch}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:0 0 8px 0;z-index:1000}
.skip-link:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ---- Dark mode (auto, follows OS) — WCAG AA contrast maintained --------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* page + surfaces: page darkest, cards raised above it for separation */
    --paper:      #212330;   /* page / default section — darker than brand base */
    --paper-2:    #282B3A;   /* secondary section */
    --paper-3:    #2E3140;
    --surface:    #363A4B;   /* cards/menus/inputs — sits above page */
    --surface-2:  #282B3A;
    --line:       #3E4356;
    --line-2:     #545A70;

    --heading:    #F2F2F2;   /* brand light — ~15:1 on page */
    --text:       #E2E3E9;   /* ~13:1 on page */
    --text-soft:  #B4B7C4;   /* ~6.5:1 on surface */
    --text-mute:  #9BA0AF;   /* ~4.8:1 on surface */

    /* gold accents read well on the dark surfaces */
    --accent:     #D9B07E;   /* decorative gold */
    --accent-2:   #E4C79B;   /* links/eyebrows — ~7:1 on surface */
    --accent-soft:#E9D2AC;
    --accent-tint:#3A3322;   /* subtle warm tinted fill on dark */

    --btn-bg:     #D9B07E;   /* gold button */
    --btn-fg:     #24262F;   /* dark text on gold — ~6.8:1 */
    --header-bg:  rgba(33,35,48,.88);
    --focus:      #7FB6E8;

    --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --shadow-md:  0 8px 24px rgba(0,0,0,.45);
    --shadow-lg:  0 24px 60px rgba(0,0,0,.6);
  }
  /* primary button hover: brighten (dark text stays) */
  .btn-primary:hover { background: #E4C089; box-shadow: 0 10px 24px rgba(217,176,126,.30); }
  /* .btn-ink is a dark pill on light pages; on a dark page make it a bordered raised surface */
  .btn-ink { background: var(--surface); color: var(--heading); border-color: var(--line-2); }
  .btn-ink:hover { background: var(--paper-3); }
  /* light hover washes were tuned for a light page; invert on dark */
  .nav-link:hover { background: rgba(255,255,255,.06); }
  .btn-outline:hover { background: rgba(255,255,255,.06); }
  .site-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.5); }
  /* give the always-dark sections a faint top edge so they read as panels on the dark page */
  .bg-ink, .bg-grad-ink, .hero-grad, .cta-band { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
  /* dashed placeholders read better a touch brighter */
  .logo-ph { border-color: var(--line-2); }
}


/* ==========================================================================
   Homepage IA rebuild — 3 "movement" dividers group the page into a clear
   1-2-3 path. Section titles were demoted H2->H3 and sub-items H3->H4 for
   correct nesting; these .home-scoped rules preserve their visual weight so
   only the SEMANTICS changed, not the look. Other pages are unaffected.
   ========================================================================== */
.movement { padding-block: clamp(2.6rem,5vw,3.6rem) 0; }
.movement .container { border-top: 2px solid var(--line); padding-top: 1.5rem; }
.movement .m-index { font-family: var(--mono); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; font-size: .8rem; color: var(--accent-2); }
.movement h2 { font-size: clamp(1.7rem,3.4vw,2.5rem); letter-spacing: -.018em; margin-top: .35rem; }
.movement .m-sub { margin-top: .6rem; max-width: 60ch; font-size: 1.05rem; }

/* section titles (now H3) keep the old H2 presence on the homepage */
.home .section-head h3, .home .split h3 { font-size: clamp(1.85rem,3.4vw,2.8rem);
  letter-spacing: -.018em; line-height: 1.1; }

/* sub-item titles (now H4) keep their card/stage/step look on the homepage */
.home .card h4, .home .svc-card h4, .home .aud-card h4, .home .stage h4, .home .step h4 {
  font-family: var(--heading); font-weight: 600; letter-spacing: -.01em; }
.home .card h4, .home .svc-card h4 { font-size: 1.28rem; margin-bottom: .5rem; }
.home .aud-card h4 { font-size: clamp(1.3rem,2vw,1.5rem); }
.home .stage h4 { font-size: 1.18rem; margin: .5rem 0 .9rem; }
.home .step h4 { font-size: 1.2rem; margin-bottom: .5rem; }
.home .cta-band h3 { max-width: 20ch; }

/* ==========================================================================
   Mobile UX + platform adaptation (iOS vs Android)
   platform.js sets <html data-os="ios|android|other" data-touch="true|false">.
   Shared mobile polish + a sticky CTA; platform-specific texture layered on top.
   ========================================================================== */
/* --- Android: Material ripple + elevation + motion --- */
.btn { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.45); pointer-events: none; animation: ripple .5s ease-out; }
[data-os="android"] .btn-outline .ripple, [data-os="android"] .btn-ink .ripple { background: rgba(217,176,126,.30); }
[data-os="android"] .btn-primary .ripple { background: rgba(46,49,64,.30); }
@keyframes ripple { to { transform: scale(2.4); opacity: 0; } }
[data-os="android"] .card.hover:hover { box-shadow: 0 10px 30px rgba(12,30,46,.18); }
[data-os="android"] .btn { --ease: cubic-bezier(.2,0,0,1); }  /* Material standard easing */

/* --- iOS: momentum scroll, no tap-highlight, safe-area insets --- */
[data-os="ios"] { -webkit-tap-highlight-color: transparent; }
[data-os="ios"] body { -webkit-overflow-scrolling: touch; }
[data-os="ios"] .site-header { padding-top: env(safe-area-inset-top); }
[data-os="ios"] .mobile-nav { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }

/* --- Shared touch ergonomics: 44px min targets on touch devices --- */
[data-touch="true"] .nav-link, [data-touch="true"] .footer-col a,
[data-touch="true"] .menu a { min-height: 44px; display: flex; align-items: center; }
[data-touch="true"] .faq summary { padding-block: 1.35rem; }

/* --- Mobile sticky CTA bar (both platforms, phones only) --- */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: var(--header-bg); backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--line); }
@media (min-width: 701px) { .mobile-cta { display: none; } }
body:has(.mobile-cta) { padding-bottom: 82px; }
/* PWA install chip (Android beforeinstallprompt) — hidden until offered */
[data-install] { }

/* ==========================================================================
   Homepage hero — messaging hierarchy (per spec, within the existing system).
   3-font system kept: Museo Sans display H1 / Roboto supporting+body / labels mono.
   Sizes: H1 38->68px, support 21->25px, body 17->19px, close 18->20px.
   ========================================================================== */
.hero-inner { max-width: 940px; }
.hero .hero-h1 { font-size: clamp(2rem, 5.6vw, 4.25rem); line-height: 1.07;
  font-weight: 600; letter-spacing: -.02em; max-width: 24ch; color: #fff; }
.hero .hero-h1 .wordmark { font-weight: 700; color: var(--accent-soft); }
.hero .hero-support { font-family: var(--sans); font-weight: 500; color: var(--on-ink);
  font-size: clamp(1.3rem, 2.1vw, 1.5625rem); line-height: 1.35; max-width: 48ch; margin-top: 1.4rem; }
.hero .hero-body { font-family: var(--sans); font-weight: 400; color: var(--on-ink-soft);
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.62; max-width: 62ch; margin-top: 1.4rem; }
.hero .hero-close { font-family: var(--sans); font-weight: 600; color: #fff;
  font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.4; margin-top: 1.7rem; }
.hero .hero-actions { margin-top: 2rem; }
@media (max-width: 620px) { .hero .hero-h1 br { display: none; } }  /* wrap naturally on phones */

/* ==========================================================================
   Mobile refinements (phones) — lighter, easier to scan; preserves desktop.
   Addresses iOS density: more line-height in cards, comfortable hero body,
   clearer separation between stacked sections. Uses the existing system.
   ========================================================================== */
@media (max-width: 640px) {
  .section-head p { margin-top: .85rem; }
  /* card breathing room + comfortable line-height (fixes dense gray-on-dark boxes) */
  .card { padding: 1.5rem 1.4rem; }
  .card p, .outcome p, .aud-card p, .svc-card p, .stage li, .note { line-height: 1.62; }
  /* hero reads comfortably at phone distance */
  .hero .hero-support { font-size: 1.2rem; line-height: 1.42; }
  .hero .hero-body { font-size: 1.05rem; line-height: 1.62; }
  /* clear gap between stacked split halves */
  .split { gap: 2rem; }
  /* stacked service/outcome grids get a touch more air */
  .grid { gap: 1.15rem; }
}
/* very small phones: keep the display H1 from dominating the screen */
@media (max-width: 360px) {
  .hero .hero-h1 { font-size: 1.85rem; }
}

/* ==========================================================================
   Mobile CTAs (Android + iOS phones ≤480px): full-width, tap-friendly.
   Buttons stack instead of crowding side-by-side at 360-430px widths.
   ========================================================================== */
@media (max-width: 480px) {
  .hero-actions, .cta-band .actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .cta-band .actions .btn { width: 100%; }
  .btn { min-height: 46px; }          /* comfortable thumb target */
}

/* ==========================================================================
   BES cleanup pass — form error state, legal pages, About section nav.
   ========================================================================== */

/* ---- Form error panel (mirror of .form-success) ------------------------- */
.form-error { display: none; padding: 1.4rem 1.5rem; border-radius: var(--radius);
  background: #FBE9E7; border: 1px solid #E7B7AF; color: #7A241B; margin-top: 1rem; }
.form-error h3 { color: #7A241B; }
.form-error.show { display: block; }
@media (prefers-color-scheme: dark) {
  .form-error { background: #3A2422; border-color: #5E322C; color: #F2C7C0; }
  .form-error h3 { color: #F2C7C0; }
}

/* ---- Legal / policy pages ----------------------------------------------- */
.legal-doc { max-width: 74ch; }
.legal-doc h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 2.4rem 0 .6rem; padding-top: .4rem; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 { font-size: 1.08rem; margin: 1.4rem 0 .5rem; }
.legal-doc p { margin-bottom: .9rem; line-height: 1.7; }
.legal-doc ul { margin: 0 0 1rem; padding-left: 0; display: grid; gap: .5rem; }
.legal-doc ul li { position: relative; padding-left: 1.4rem; color: var(--text-soft); line-height: 1.6; }
.legal-doc ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.legal-doc a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc a:hover { color: var(--heading); }
.legal-doc strong { color: var(--text); }

/* ---- About page: sticky secondary section navigation -------------------- */
.about-nav { position: sticky; top: 74px; z-index: 80;
  background: var(--header-bg); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line); }
.about-nav .container { display: flex; flex-wrap: wrap; gap: .4rem; padding-block: .6rem; }
.about-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .9rem;
  border-radius: 999px; font-size: .92rem; font-weight: 560; color: var(--text-soft);
  border: 1px solid transparent; transition: color .15s, background .15s, border-color .15s; }
.about-nav a:hover { color: var(--heading); background: rgba(46,49,64,.05); }
.about-nav a.active { color: var(--accent-2); border-color: var(--accent); background: var(--accent-tint); }
@media (prefers-color-scheme: dark) { .about-nav a:hover { background: rgba(255,255,255,.06); } }
/* offset anchored sections for the sticky header + sticky about-nav stack */
body.about-page [id] { scroll-margin-top: 128px; }

/* footer fine-print disclaimer (no-advice notice) */
.site-footer .footer-fine { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--ink-3);
  font-size: .82rem; line-height: 1.6; color: var(--on-ink-soft); max-width: 90ch; }
.site-footer .footer-fine a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.site-footer .footer-fine + .footer-bottom { margin-top: 1.2rem; border-top: 0; padding-top: 0; }