/* =============================================================================
   LODEMARK  ·  shared stylesheet + design tokens
   Institutional mineral-estate advisory. One practice, four disciplines.
   Signature: the lodemark. A survey benchmark and a stratigraphic datum line,
   the fixed reference an estate is measured from. Precision (the CFO) rendered
   as fine measured marks; grit (the field) rendered as warm stone and rock.
   ============================================================================= */

/* Self-hosted: Newsreader (variable font, wght 200..600 + opsz axis), latin + latin-ext
   subsets from Google Fonts, font-display: swap. font-optical-sizing:auto uses opsz.
   Mono/label typeface is Roboto, ALSO self-hosted (see below). It was previously
   loaded via a Google Fonts <link> that existed on index.html only. */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 500;
  font-display: swap;
  src: url(fonts/newsreader-italic-200-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 500;
  font-display: swap;
  src: url(fonts/newsreader-italic-200-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url(fonts/newsreader-normal-200-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url(fonts/newsreader-normal-200-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mono/label typeface: Roboto, self-hosted to match Newsreader. Variable, wght
   axis only; declared 400..600, the range styles.css actually uses. Subsets and
   unicode-ranges are the same latin / latin-ext pair used above. Replaces the
   Google Fonts <link>, which lived on index.html only and so left the label
   typeface falling back to a system monospace on the other seven pages. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/roboto-normal-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/roboto-normal-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* F7: metric-matched fallback for Newsreader. Renders a locally available serif
   (Times New Roman / Liberation Serif, which are metric-compatible) with
   Newsreader's own line box, so the swap from fallback to web font causes no
   vertical layout shift (CLS). Overrides computed from the real Newsreader
   metrics (unitsPerEm 2000, ascent 1470, descent 530, lineGap 0) against a
   frequency-weighted average advance width: size-adjust is ~1.004, so the
   vertical overrides carry the anti-shift work. Used via the --voice stack. */
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Times New Roman'), local('Liberation Serif'), local('Times');
  size-adjust: 100.43%;
  ascent-override: 73.18%;
  descent-override: 26.39%;
  line-gap-override: 0%;
}

/* ----------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------------- */
:root {
  /* Palette, locked (Brand KB v21, the 06-18 set) */
  --stone:      #2C2A25;
  --obsidian:   #1C1A17;
  --slate:      #888780;
  --sand:       #F1EFE8;
  --parchment:  #D2D1C7;
  --amber:      #BA7517;
  --gold:       #EF9F27;

  --discovery:      #185FA5;  --discovery-lt:   #85B7EB;  --discovery-bg:   #E6F1FB;
  --realization:    #0F6E56;  --realization-lt: #5DCAA5;  --realization-bg: #E1F5EE;
  --monitoring:     #534AB7;  --monitoring-lt:  #AFA9EC;  --monitoring-bg:  #EEEDFE;
  --forecasting:    #BA7517;  --forecasting-lt: #EF9F27;  --forecasting-bg: #FAEEDA;

  /* Herald coral: the one new color (Session 3, Item 5). Communication maps to no discipline. */
  --herald:         #B24A3A;  --herald-lt:      #E0988B;

  /* Per-page identity color (Item 5/6). Overridden per page on <body data-page>. Default neutral. */
  --identity: var(--ink-deep);

  /* Semantic */
  --bg:        var(--sand);
  --ink:       var(--stone);
  --ink-deep:  var(--obsidian);
  --muted:     #6d6c66;              /* darkened slate for readable meta text  */
  --faint:     var(--slate);
  --rule:      rgba(44, 42, 37, 0.16);
  --rule-soft: rgba(44, 42, 37, 0.09);
  --accent:    var(--amber);
  --accent-hi: var(--gold);

  /* Type */
  --voice: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --mono:  "Roboto", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid scale (1.2 minor third, editorial) */
  --t-mono:    0.72rem;
  --t-small:   0.9rem;
  --t-body:    1.075rem;
  --t-lead:    1.3rem;
  --t-h4:      clamp(1.15rem, 1.0rem + 0.7vw, 1.45rem);
  --t-h3:      clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  --t-h2:      clamp(2.0rem, 1.5rem + 2.3vw, 3.2rem);
  --t-h1:      clamp(2.6rem, 1.7rem + 4.1vw, 5.1rem);
  --t-display: clamp(3.1rem, 1.9rem + 5.4vw, 6.4rem);

  /* Space */
  --gut: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1240px;
  --readw: 40rem;
  --sec-y: clamp(4.5rem, 9vw, 8.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----------------------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--voice);
  font-size: var(--t-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
svg { height: auto; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }
em { font-style: italic; }

::selection { background: var(--amber); color: var(--sand); }

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; }
.h-display { font-size: var(--t-display); line-height: 1.0; letter-spacing: -0.025em; }
h1, .h1 { font-size: var(--t-h1); }
h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); }
h4, .h4 { font-size: var(--t-h4); }

p { max-width: var(--readw); }
p + p { margin-top: 1em; }

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); font-weight: 300; }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }
.serif-it { font-style: italic; }

/* The mono "instrument" register: eyebrows, labels, coordinates, data */
.mono {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

/* ----------------------------------------------------------------------------
   4. SIGNATURE  ·  the lodemark datum + benchmark
   ---------------------------------------------------------------------------- */

/* Coordinate eyebrow: a benchmark cross, then a mono label sitting on the datum */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow--index::before { display: none; }

/* Datum line: a hairline carrying tick registration marks */
.datum {
  height: 10px;
  border: 0;
  border-top: 1px solid var(--rule);
  background:
    repeating-linear-gradient(to right,
      var(--rule) 0, var(--rule) 1px,
      transparent 1px, transparent 40px);
  background-position: top left;
  background-size: 100% 6px;
  background-repeat: repeat-x;
  margin: 0;
  opacity: 0.9;
}

/* A single measured index number (mono) used for disciplines / timeline */
.index {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  color: var(--faint);
}

/* ----------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   ---------------------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 920px; }
.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.stack > * + * { margin-top: 1.2rem; }
.stack-lg > * + * { margin-top: 2rem; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.section-head { max-width: 54rem; }
.section-head .eyebrow { margin-bottom: 1.5rem; }
.section-head h2 { margin-bottom: 0.5rem; }

/* tone variants */
.tone-dark  { background: var(--obsidian); color: var(--sand); }
.tone-stone { background: var(--stone);    color: var(--sand); }
.tone-parch { background: var(--parchment); color: var(--ink); }
.tone-dark .muted, .tone-stone .muted { color: rgba(241,239,232,0.66); }
.tone-dark .mono,  .tone-stone .mono  { color: rgba(241,239,232,0.6); }
.tone-dark .eyebrow, .tone-stone .eyebrow { color: var(--gold); }
.tone-dark .datum, .tone-stone .datum {
  border-top-color: rgba(241,239,232,0.2);
  background-image: repeating-linear-gradient(to right,
    rgba(241,239,232,0.2) 0, rgba(241,239,232,0.2) 1px,
    transparent 1px, transparent 40px);
}
.tone-dark a.link, .tone-stone a.link { color: var(--gold); }

/* ----------------------------------------------------------------------------
   6. LINKS + BUTTONS
   ---------------------------------------------------------------------------- */
a.link {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: gap 0.25s var(--ease), color 0.2s var(--ease);
}
a.link::after { content: "\2192"; transition: transform 0.25s var(--ease); }
a.link:hover { gap: 0.9em; color: var(--ink-deep); }
.tone-dark a.link:hover, .tone-stone a.link:hover { color: var(--sand); }

.btn {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.85em 1.4em;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn::after {
  content: "";
  width: 7px; height: 7px;
  border-top: 1.4px solid currentColor;
  border-right: 1.4px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--sand); }
.btn:hover::after { transform: rotate(45deg) translate(1px, -1px); }
.btn--solid { background: var(--ink-deep); color: var(--sand); border-color: var(--ink-deep); }
.btn--solid:hover { background: var(--amber); border-color: var(--amber); color: var(--obsidian); }
.tone-dark .btn, .tone-stone .btn { border-color: rgba(241,239,232,0.5); color: var(--sand); }
.tone-dark .btn:hover, .tone-stone .btn:hover { background: var(--gold); color: var(--obsidian); border-color: var(--gold); }

/* ----------------------------------------------------------------------------
   7. HEADER / NAV
   ---------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(241,239,232,0.9);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav {
  max-width: var(--maxw); margin-inline: auto; padding: 1.6rem var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand {
  font-family: var(--voice);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--ink-deep);
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  flex-shrink: 0;
}
.brand img { flex-shrink: 0; }
.brand .brand-mark { display: inline-flex; align-items: center; }
.brand .brand-mark svg { width: 2.4em; height: auto; display: block; }
.brand small {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav-links a {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.13em;
  text-transform: uppercase; font-weight: 500; color: var(--muted);
  padding-block: 0.4rem; position: relative; transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--ink-deep); }
.nav-links a[aria-current="page"] { color: var(--ink-deep); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.3rem;
  height: 1.5px; background: var(--amber);
}
.nav-cta { display: inline-flex; }
.nav-toggle { display: none; }

/* ----------------------------------------------------------------------------
   8. HERO
   ---------------------------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: 0; overflow: hidden; }
.hero-inner { position: relative; z-index: 2; }
.hero .eyebrow { margin-bottom: 2rem; }
.hero h1 { max-width: 25ch; margin-bottom: 1.6rem; font-weight: 300; font-family: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif; }
.hero .lead { max-width: 65ch; }
.hero .mono { max-width: 95ch; }
.hero .c-muted { max-width: 70ch !important; }
.hero-figure { position: relative; }

/* Big editorial stat row */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat { padding: 1.6rem 1.5rem 1.6rem 0; padding-left: 1.5rem; }
.stat:first-child { padding-left: 0; }
.stat .fig { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink-deep); white-space: nowrap; }
.stat .fig sup { font-size: 0.5em; vertical-align: super; }
.stat .lab { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--muted); margin-top: 0.9rem; line-height: 1.5; max-width: 26ch; }
.tone-dark .stat .fig, .tone-stone .stat .fig { color: var(--sand); }
.tone-dark .stat, .tone-stone .stat { border-color: rgba(241,239,232,0.2); }

/* ----------------------------------------------------------------------------
   9. TWO DOORS  ·  the structural arrival
   ---------------------------------------------------------------------------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); align-items: stretch; }
.door {
  background: var(--sand);
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  display: flex; flex-direction: column; gap: 1rem;
  position: relative; min-height: 100%;
  transition: background 0.3s var(--ease);
}
/* The whole entry card is the toggle for its lane's boxes (JS); real links inside
   keep their own behavior. Only the JS-enhanced page gets the card-wide pointer. */
.js .door { cursor: pointer; }
.js .door a { cursor: pointer; }
.door:hover { background: #F7F5EF; }
.door .door-tag { display: flex; align-items: center; justify-content: space-between; }
.door h3 { font-size: var(--t-h3); max-width: 18ch; }
.door p { color: var(--muted); font-size: 1rem; }
.door .link { margin-top: auto; padding-top: 0.5rem; }

/* Whole-card-clickable: each door has exactly one link, so its stretched
   ::after covers the whole card. No nested links, no screen-reader trap; the
   link keeps its own accessible name. Content is baked; with JS off the link
   still works. Hover lift and focus ring are gated on reduced motion. */
.door { position: relative; }
/* Whole-card stretch RETIRED 2026-07-13 (Chad doors accordion): the header is
   now the toggle target, so the full-card overlay would swallow it. Links act
   as links again. */
.door > .link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.door:focus-within { outline: 2px solid var(--amber); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .door { transition: background 0.3s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
}
@media (hover: hover) {
  .door:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(44, 42, 37, 0.10); }
}
.door--owner .door-accent { color: var(--realization); }
.door--inst .door-accent { color: var(--discovery); }
.door .door-accent { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }

/* ----------------------------------------------------------------------------
   10. DISCIPLINE / CONTENT CARDS
   ---------------------------------------------------------------------------- */
.disc { --c: var(--slate); --cbg: var(--sand); }
.disc--discovery   { --c: var(--discovery);   --clt: var(--discovery-lt);   --cbg: var(--discovery-bg); }
.disc--realization { --c: var(--realization); --clt: var(--realization-lt); --cbg: var(--realization-bg); }
.disc--forecasting { --c: var(--forecasting); --clt: var(--forecasting-lt); --cbg: var(--forecasting-bg); }
.disc--monitoring  { --c: var(--monitoring);  --clt: var(--monitoring-lt);  --cbg: var(--monitoring-bg); }

.discipline {
  background: var(--cbg);
  border-top: 2px solid var(--c);
  padding: clamp(1.75rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1rem;
  position: relative;
}
.discipline .index { color: var(--c); font-size: 0.8rem; }
.discipline h3 { color: var(--ink-deep); }
.discipline .disc-qual { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); font-weight: 600; }
.discipline p { color: var(--stone); font-size: 1rem; max-width: 42ch; }
.discipline .disc-list { list-style: none; padding: 0; margin-top: 0.6rem; display: grid; gap: 0.6rem; }
.discipline .disc-list li { font-size: 0.94rem; color: var(--stone); padding-left: 1.1rem; position: relative; max-width: 44ch; }
.discipline .disc-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: var(--c); }

.card {
  background: var(--sand);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  display: flex; flex-direction: column; gap: 0.85rem;
}
.card h4 { color: var(--ink-deep); }
.card p { color: var(--muted); font-size: 0.98rem; }

/* Recovery / proof inset */
.proof {
  border-left: 2px solid var(--accent);
  padding: 1.2rem 0 1.2rem 1.5rem;
  background: transparent;
}
.proof .mono { color: var(--accent); }
.proof .fig { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1; color: var(--ink-deep); letter-spacing: -0.03em; margin: 0.5rem 0; }
.proof p { font-size: 0.98rem; color: var(--muted); }

/* pull quote */
.pull {
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.15rem);
  line-height: 1.32; font-weight: 300; letter-spacing: -0.015em;
  max-width: 24ch;
}
.pull-wide { max-width: 30ch; }
blockquote { margin: 0; }

/* independence list */
.indep { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
.indep li {
  padding: 1rem 0; border-bottom: 1px solid var(--rule-soft);
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  font-size: 1.02rem; color: var(--ink);
}
.indep li .no { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); padding-top: 0.35em; letter-spacing: 0.1em; }
.tone-dark .indep, .tone-stone .indep { border-color: rgba(241,239,232,0.18); }
.tone-dark .indep li, .tone-stone .indep li { border-color: rgba(241,239,232,0.14); color: var(--sand); }

/* canonical lines block */
.canon { display: grid; gap: 0.4rem; }
.canon p { font-family: var(--voice); font-style: italic; font-size: clamp(1.2rem, 0.95rem + 1vw, 1.7rem); color: var(--sand); max-width: none; line-height: 1.4; }
.canon p .q { color: var(--gold); font-style: normal; font-family: var(--mono); font-size: 0.9rem; }

/* who we serve, expand-in-place (native <details>). The whole section stays a
   single scannable column of five rows; a row opens to its detail on demand.
   Content is baked in the HTML and toggled by the browser, so it works with JS
   off and stays legible to a crawler. */
.serve { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.serve-row { border-bottom: 1px solid var(--rule); }
.serve-row > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem); padding: 1.6rem 0;
}
.serve-row > summary::-webkit-details-marker { display: none; }
.serve-row .serve-key { display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.25rem); }
.serve-row .index { flex: none; }
.serve-row h3 { color: var(--ink-deep); font-size: var(--t-h4); }
.serve-row summary:hover h3 { color: var(--accent); }
.serve-row > p { color: var(--muted); font-size: 1rem; max-width: 60ch; padding: 0 0 1.6rem 3.25rem; }
/* a plus that becomes a minus on open */
.serve-row .serve-toggle { flex: none; position: relative; width: 14px; height: 14px; align-self: center; }
.serve-row .serve-toggle::before,
.serve-row .serve-toggle::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--accent); transform: translateY(-50%); }
.serve-row .serve-toggle::after { transform: translateY(-50%) rotate(90deg); }
.serve-row[open] .serve-toggle::after { transform: translateY(-50%) rotate(0deg); }
@media (prefers-reduced-motion: no-preference) {
  .serve-row .serve-toggle::after { transition: transform 0.25s var(--ease); }
  .serve-row[open] > p { animation: serve-in 0.35s var(--ease) both; }
  @keyframes serve-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ----------------------------------------------------------------------------
   11. TIMELINE
   ---------------------------------------------------------------------------- */
.timeline { list-style: none; padding: 0; display: grid; gap: 0; position: relative; }
.timeline li {
  display: grid; grid-template-columns: clamp(5rem, 12vw, 9rem) 1fr;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: 1.75rem 0; border-top: 1px solid var(--rule); position: relative;
}
.timeline li:last-child { border-bottom: 1px solid var(--rule); }
.timeline .yr { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--accent); font-weight: 600; padding-top: 0.3rem; }
.timeline h3 { color: var(--ink-deep); margin-bottom: 0.5rem; max-width: 60ch; white-space: nowrap; font-size: var(--t-h4); font-weight: 400; }
.timeline p { color: var(--muted); font-size: 1rem; }

/* ----------------------------------------------------------------------------
   12. CTA BAND + FOOTER
   ---------------------------------------------------------------------------- */
.cta-band { text-align: left; }
.cta-band h2 { max-width: 20ch; margin-bottom: 2rem; }

.site-footer { background: var(--obsidian); color: var(--sand); padding-block: clamp(3rem, 6vw, 5rem); }
.site-footer .foot-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(241,239,232,0.16); }
.site-footer .brand { color: var(--sand); }
.site-footer .brand .brand-mark { color: var(--gold); }
.foot-tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(241,239,232,0.55); margin-top: 0.6rem; line-height: 1.7; }
.foot-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.foot-nav a { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(241,239,232,0.7); }
.foot-nav a:hover { color: var(--gold); }
.foot-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.75rem; }
.foot-bottom p { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: rgba(241,239,232,0.58); text-transform: uppercase; max-width: none; }

/* ----------------------------------------------------------------------------
   13. UTILITIES
   ---------------------------------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--ink-deep); color: var(--sand); padding: 0.6rem 1rem; font-family: var(--mono); font-size: 0.75rem; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.tone-dark :focus-visible, .tone-stone :focus-visible { outline-color: var(--gold); }

.divider-note { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35em 0.7em; border: 1px solid var(--rule); color: var(--muted); }
.tag--on { border-color: var(--c, var(--accent)); color: var(--c, var(--accent)); }

/* Progressive enhancement: only hide-then-reveal when JS is present. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ----------------------------------------------------------------------------
   14. RESPONSIVE
   ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: 1fr; }
  .hero-split { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  /* Collapse every inline-defined multi-column grid to one column on phones.
     Many content sections set grid-template-columns inline (text + figure,
     two-column proofs), which overrides the class-based rules, so target the
     inline style directly. */
  .grid.gc-2, .grid.gc-9505, .grid.gc-8515, .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--sand); flex-direction: column; align-items: flex-start; gap: 0; padding: 0.5rem var(--gut) 1.5rem; border-bottom: 1px solid var(--rule); }
  .nav-links.open a { padding: 0.8rem 0; width: 100%; border-bottom: 1px solid var(--rule-soft); }
  .nav-links.open .nav-cta { margin-top: 0.75rem; }
  .nav-toggle { display: inline-flex; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 0.5rem; }
  .nav-toggle span { width: 22px; height: 1.5px; background: var(--ink); display: block; }
  .doors { grid-template-columns: 1fr; }
  .cols-2 { grid-template-columns: 1fr; }
  .statrow { grid-template-columns: 1fr; }
  .stat { padding-left: 0; }
  .serve-row > p { padding-left: 0; }
  .timeline li { grid-template-columns: 1fr; gap: 0.5rem; }
  .foot-top { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  a.link, .btn, .door { transition: none !important; }
}

/* ----------------------------------------------------------------------------
   15. PRINT  ·  a prospect may print Results or About
   ---------------------------------------------------------------------------- */
@media print {
  /* Keep the designed colors so dark sections stay readable on paper. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* Content must print even if the scroll reveal never fired. */
  .reveal { opacity: 1 !important; transform: none !important; }
  /* Drop interactive chrome that does not belong on a printout. */
  .site-header, .skip-link, .nav-toggle { display: none !important; }
  a { text-decoration: none; }
  .section, .section--tight, .hero { padding-block: 1.5rem !important; }
  .cta-band { page-break-inside: avoid; }
  figure, .card, .door, .proof, article, .timeline li { page-break-inside: avoid; }
}

/* ----------------------------------------------------------------------------
   16. MOTION + INTERACTION  ·  forward-looking, progressive, performant
   The whole layer is opt-in: it only animates when the browser supports it and
   the reader has not asked for reduced motion. Without it, every diagram is the
   same static, correct picture it is today. Only compositor-cheap properties
   move (opacity, transform, stroke-dashoffset on short paths). No layout shift.
   ---------------------------------------------------------------------------- */

/* Cross-document view transitions: a quiet cross-fade between pages (Chrome/Edge
   today; a normal instant navigation everywhere else). The sticky header keeps
   its identity across the change. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.22s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in 0.30s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

  /* Diagram draw-on-reveal. Paths carry pathLength="1" so a single
     dash rule draws any curve regardless of its real length. The figure gets
     .in from the same IntersectionObserver that runs the section reveals. */
  /* Initial (pre-reveal) states apply ONLY when JS is present to trigger them,
     so a no-JS browser sees every diagram fully drawn, never blank. */
  .js .fig-anim svg .draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.1s var(--ease);
    transition-delay: calc(var(--i, 0) * 0.11s);
  }
  .js .fig-anim svg .pop {
    opacity: 0;
    transform: scale(0.55);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
    transition-delay: calc(0.25s + var(--i, 0) * 0.09s);
  }
  .js .fig-anim svg .rise {
    opacity: 0;
    transition: opacity 0.7s var(--ease);
    transition-delay: calc(0.15s + var(--i, 0) * 0.06s);
  }
  .js .fig-anim.in svg .draw { stroke-dashoffset: 0; }
  .js .fig-anim.in svg .pop  { opacity: 1; transform: scale(1); }
  .js .fig-anim.in svg .rise { opacity: 1; }

  /* A whisper of scroll parallax on hero figures, only where the native
     scroll timeline exists. Off the main thread, no JS. */
  @supports (animation-timeline: scroll()) {
    .parallax { animation: par linear both; animation-timeline: scroll(root); animation-range: 0 55vh; }
    @keyframes par { to { transform: translateY(-14px); } }
  }
}

/* Interactive four-disciplines wheel: hover or tap a discipline to bring it
   forward and light its line to the estate; the others recede. Keyboard and
   touch reach it through real focus on each node. */
.dwheel .disc-node { cursor: pointer; }
.dwheel .disc-node * { transition: opacity 0.28s var(--ease); }
.dwheel .conn { transition: stroke-width 0.28s var(--ease), opacity 0.28s var(--ease); }
@media (hover: hover) {
  .dwheel:hover .disc-node > * { opacity: 0.32; }
  .dwheel .disc-node:hover > * { opacity: 1; }
  .dwheel .disc-node:hover .conn { stroke-width: 3.2; }
}
.dwheel:focus-within .disc-node > * { opacity: 0.32; }
.dwheel .disc-node:focus-visible > *,
.dwheel .disc-node.active > * { opacity: 1; }
.dwheel .disc-node.active .conn { stroke-width: 3.2; }
.dwheel .disc-node:focus-visible { outline: none; }
.dwheel .disc-node:focus-visible .node-ring { opacity: 1; }
.node-ring { opacity: 0; }

/* Clickable architecture diagram (Home naming moment). Tarrick apex down to the
   MineralForce base. Every node is a real SVG link, so navigation needs no
   JavaScript and works with JS off. Hover or focus dims the other three
   disciplines and lights the relationship rails; touch simply navigates. The
   effect is decorative and never the only signal (the link set below is baked). */
.arch { width: 100%; height: auto; }
.arch .arch-node { cursor: pointer; }
.arch .arch-rel { opacity: 0.6; }
/* Focus and hover are always meaningful; only the easing is motion, so the
   transition is gated on reduced-motion while the state change itself is not. */
@media (prefers-reduced-motion: no-preference) {
  .arch .arch-disc,
  .arch .arch-rel { transition: opacity 0.28s var(--ease); }
}
.arch:focus-within .arch-disc { opacity: 0.4; }
.arch .arch-disc:focus-within { opacity: 1; }
.arch:focus-within .arch-rel { opacity: 1; }
@media (hover: hover) {
  .arch:hover .arch-disc { opacity: 0.4; }
  .arch .arch-disc:hover { opacity: 1; }
  .arch:hover .arch-rel { opacity: 1; }
}

/* The baked link set: the diagram's no-JavaScript finished state and a clean set
   of tap targets on a narrow screen. Reads as a labeled legend of the same links. */
.arch-linkset { margin-top: 1.5rem; }
.arch-linkset ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}
.arch-linkset li { border-top: 1px solid var(--rule-soft); }
.arch-linkset a {
  display: flex; align-items: baseline; gap: 0.6em;
  padding: 0.65rem 0;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
  transition: color 0.2s var(--ease);
}
.arch-linkset a:hover { color: var(--accent); }
.arch-linkset .k { color: var(--muted); font-size: 0.62rem; flex: none; min-width: 6.5em; }
@media (max-width: 720px) {
  .arch-linkset ul { grid-template-columns: 1fr; }
}

/* Shadow Portfolio seams (Home Fig. 2) and Methodology engagement-flow chips:
   real SVG links into their fuller treatment. Navigation needs no JavaScript;
   hover and focus give a light affordance. Decorative, never the only signal. */
.sp-seam, .flow-chip { cursor: pointer; }
.sp-seam text { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .sp-seam text, .sp-seam circle, .flow-chip rect, .flow-chip text { transition: opacity 0.2s var(--ease), fill 0.2s var(--ease); }
}
@media (hover: hover) {
  .sp-seam:hover text { fill: var(--amber); }
  .sp-seam:hover circle { opacity: 1; }
  .flow-chip:hover { opacity: 0.82; }
}

/* AI coda: a quiet end-of-page colophon into the AI story. Not navigation. */
.coda { border-top: 1px solid var(--rule); margin-top: 0.5rem; }
.coda-link {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem); padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  transition: gap 0.3s var(--ease);
}
.coda-link:hover { gap: clamp(1.4rem, 3.6vw, 2.75rem); }
.coda-mark { width: 30px; height: 30px; position: relative; flex: none; }
.coda-mark::before, .coda-mark::after { content: ""; position: absolute; background: var(--amber); }
.coda-mark::before { inset: 0 auto 0 50%; width: 1.5px; transform: translateX(-50%); }
.coda-mark::after { inset: 50% 0 auto 0; height: 1.5px; transform: translateY(-50%); }
.coda-mark span { position: absolute; inset: 0; border: 1.5px solid var(--amber); }
.coda-text .mono { color: var(--amber); margin-bottom: 0.35rem; }
.coda-text h3 { font-size: var(--t-h4); color: var(--ink-deep); max-width: 30ch; }
.coda-arrow { font-family: var(--mono); color: var(--amber); font-size: 1.4rem; }
@media (max-width: 720px) {
  .coda-link { grid-template-columns: auto 1fr; }
  .coda-arrow { display: none; }
}

/* ----------------------------------------------------------------------------
   17. SESSION 3 REFRAME  ·  per-page color identity, wayfinding, uniform cards
   ---------------------------------------------------------------------------- */

/* Per-page identity color (Item 5). Firm/Tarrick/MineralForce are neutral ground;
   Custos borrows Monitoring indigo (correct by identity); Herald is the one new coral. */
body[data-page="home"]        { --identity: var(--ink-deep); }
body[data-page="methodology"] { --identity: var(--ink-deep); }
body[data-page="results"]     { --identity: var(--herald); }
body[data-page="about"]       { --identity: var(--monitoring); }

/* Active-state nav in the page's identity color (Item 6). */
.nav-links a[aria-current="page"]::after { background: var(--identity, var(--amber)); }
/* Consistent header pattern: the hero eyebrow carries the page identity color (Item 6/7). */
.hero .eyebrow { color: var(--identity, var(--accent)); }
.hero .eyebrow::before { opacity: 0.8; }

/* Brand-colored name identifiers (Item 5/7): color pops as TEXT, never backgrounds. */
.id-herald { color: var(--herald); }
.tone-dark .id-herald, .tone-stone .id-herald { color: var(--herald-lt); }
.id-custos { color: var(--monitoring); }
.tone-dark .id-custos, .tone-stone .id-custos { color: var(--monitoring-lt); }

/* Way-back breadcrumb at the top of a diagram-deep-linked section (Item 6). */
.wayback {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; color: var(--muted);
  margin-bottom: 1.25rem; transition: color 0.2s var(--ease);
}
.wayback::before { content: "\2039"; font-size: 1.1em; line-height: 1; }
.wayback:hover { color: var(--identity, var(--ink-deep)); }
.tone-dark .wayback, .tone-stone .wayback { color: rgba(241,239,232,0.6); }
.tone-dark .wayback:hover, .tone-stone .wayback:hover { color: var(--gold); }

/* Uniform stat-card spec (Item 7): one number/label treatment across the stat row
   and the Results proof callouts, so every figure reads from the same card. */
.proof .fig { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; margin: 0.4rem 0 0.6rem; }
.proof .fig sup { font-size: 0.5em; vertical-align: super; }
.proof .mono { margin-bottom: 0.2rem; }
.proof p { font-size: 0.9rem; line-height: 1.5; }
/* Engagement 05's provisional state uses the same card, dimmed, so it reads uniform-but-provisional. */
.proof.is-provisional .fig { color: var(--faint); }

/* ----------------------------------------------------------------------------
   18. UTILITIES (F3 lift)  ·  inline declarations appearing 3+ times sitewide.
   !important preserves exact cascade equivalence with the inline styles they
   replace (inline won over component rules); grid-column utilities omit it so
   the mobile-collapse media rule still wins. --i stagger indices stay inline. */
.c-stone { color:var(--stone) !important; }
.c-realization { color:var(--realization) !important; }
.c-forecasting { color:var(--forecasting) !important; }
.c-discovery { color:var(--discovery) !important; }
.c-monitoring { color:var(--monitoring) !important; }
.c-muted { color:var(--muted) !important; }
.c-inkdeep { color:var(--ink-deep) !important; }
.bc-realization { border-color:var(--realization) !important; }
.bc-forecasting { border-color:var(--forecasting) !important; }
.bc-discovery { border-color:var(--discovery) !important; }
.blc-discovery { border-left-color:var(--discovery) !important; }
.blc-realization { border-left-color:var(--realization) !important; }
.blc-forecasting { border-left-color:var(--forecasting) !important; }
.blc-monitoring { border-left-color:var(--monitoring) !important; }
.mb-12 { margin-bottom:1.2rem !important; }
.mb-25 { margin-bottom:2.5rem !important; }
.mb-20 { margin-bottom:2rem !important; }
.mb-175 { margin-bottom:1.75rem !important; }
.mt-15 { margin-top:1.5rem !important; }
.mt-10 { margin-top:1rem !important; }
.mt-175 { margin-top:1.75rem !important; }
.mt-05 { margin-top:0.5rem !important; }
.mt-20 { margin-top:2rem !important; }
.mt-09 { margin-top:0.9rem !important; }
.mt-04 { margin-top:0.4rem !important; }
.m-disch2 { margin:0.8rem 0 0.6rem !important; } /* F4: isolate the methodology discipline anchor h2 */
.m-heroh1 { margin:1.5rem 0 1.6rem !important; }
.mw-16ch { max-width:16ch !important; }
.mw-26ch { max-width:26ch !important; }
.mw-44rem { max-width:44rem !important; }
.mw-18ch { max-width:18ch !important; }
.mw-max { max-width:var(--maxw) !important; }
.mw-44ch { max-width:44ch !important; }
.mw-20ch { max-width:20ch !important; }
.pad-card { padding:clamp(2.5rem,5vw,4rem) !important; } /* F4: more room in the results engagement cards */
.pt-0 { padding-top:0 !important; }
.p-0 { padding:0 !important; }
.bd-0 { border:0 !important; }
.bd-rule { border:1px solid var(--rule); } /* no !important: residual inline border-top accent must win */
.bg-sand { background:var(--sand) !important; }
.gc-2 { grid-template-columns:1fr 1fr; }
.gc-9505 { grid-template-columns:0.95fr 1.05fr; }
.gc-8515 { grid-template-columns:0.85fr 1.15fr; }
.gap-lg { gap:clamp(2.5rem,5vw,5rem) !important; } /* F4: more column air in the dense bands */
.gap-xl { gap:clamp(2rem,5vw,4.5rem) !important; }
.ai-center { align-items:center !important; }
.ai-start { align-items:start !important; }
.tt-none { text-transform:none !important; }
.ls-04 { letter-spacing:0.04em !important; }
.fs-085 { font-size:0.85rem !important; }
.fs-064 { font-size:0.64rem !important; }
.fs-098 { font-size:0.98rem !important; }

/* ----------------------------------------------------------------------------
   19. F4/F5 RHYTHM VARIATION (v22)  ·  band-tone alternation, anchor scale
   contrast, and a short discipline-colored lead-rule at each dense-band anchor.
   All utility swaps / new utilities on the locked palette; no component-rule
   fights, no copy edits, no added padding beyond the F4 air already in place.
   ---------------------------------------------------------------------------- */

/* Lever 1 · band-tone alternation. The Results engagement cards were five sand
   panels in a row; each now sits on its own faint discipline tint, alternated
   tint / sand / tint / sand / tint so no two consecutive cards share a ground
   (the tint always matches the card's own border-top discipline). Methodology's
   discipline bands already carry these tints inline, so this only serves Results. */
.bg-discovery   { background:var(--discovery-bg)   !important; }
.bg-realization { background:var(--realization-bg) !important; }
.bg-forecasting { background:var(--forecasting-bg) !important; }

/* Lever 2 · scale contrast on the first-glance anchor. Discipline / engagement
   h2 anchors step up from --t-h2 (3.2rem cap) toward, but short of, the hero
   --t-h1, so one element clearly wins each band; the proof/stat figures on the
   Results page step up in turn so the number wins there. Supporting text is
   untouched. .st-2 gives a two-figure stat row room to grow to the larger size. */
.anchor-lg { font-size:clamp(2.3rem, 1.6rem + 2.9vw, 3.9rem) !important; }
.fig-xl    { font-size:clamp(2.5rem, 1.7rem + 3.0vw, 4.1rem) !important; }
.st-2      { grid-template-columns:1fr 1fr !important; }

/* Lever 3 · discipline color as band identity. A short colored lead-rule opens
   each dense-band anchor in that discipline's color, so every band opens with a
   cue the next band changes. Square to match the hard-edged system, never rounded. */
.lead-rule::before {
  content:""; display:block;
  width:2.75rem; height:3px;
  background:var(--accent);
  margin-bottom:1.1rem;
}
.lr-discovery::before   { background:var(--discovery); }
.lr-realization::before { background:var(--realization); }
.lr-forecasting::before { background:var(--forecasting); }
.lr-monitoring::before  { background:var(--monitoring); }

/* ----------------------------------------------------------------------------
   20. HERO COLLAPSE (NavAB build)  ·  index-only layout tighten so the entry-path
   section ("Two ways in") crests the 1440x900 fold. Hero Option A CONTENT is
   unchanged; this is layout only (type scale + internal spacing + figure scale),
   scoped to the home page so no other hero moves. Not a lock reopen.
   ---------------------------------------------------------------------------- */
/* Clamp lows are held near the v23 values so mobile only tightens modestly;
   the reductions land at desktop widths, where the fold matters. */
body[data-page="home"] .hero { padding-top: clamp(2.25rem, 2.6vw, 2.4rem); }
body[data-page="home"] .hero .eyebrow { margin-bottom: 1.1rem; }
body[data-page="home"] .hero .h-display { font-size: 3.8rem; line-height: 1.06; }
body[data-page="home"] .hero-figure { max-width: 420px; margin-inline: auto; }
body[data-page="home"] .hero h1,
body[data-page="home"] .hero .lead,
body[data-page="home"] .hero .mono,
body[data-page="home"] .hero .c-muted { color: #1C1A17; }
@media (max-width: 900px) {
  body[data-page="home"] .hero .h-display { font-size: 3.1rem; }
}
@media (max-width: 720px) {
  body[data-page="home"] .hero .h-display { font-size: 2.5rem; }
}

/* ----------------------------------------------------------------------------
   21. SUB-BRAND SPINE RAIL (standing nav; Arm B won the A/B). The approved rail
   mock lifted into tokenized component classes per the F3 discipline (no raw
   mock hex; locked tokens only). Sitewide on desktop (>=960px, LOCKED); hidden
   below, where the top strip carries navigation on its own. On methodology the
   items are in-page anchors with a scroll-spy (site.js); on other pages they are
   cross-page links with no active state. Standing discipline: the rail carries
   the SYSTEM (two ways in, the disciplines, the layers); the top strip carries
   the SITE PAGES. They never share a destination.
   ---------------------------------------------------------------------------- */
.subrail { display: none; }
/* Breakpoint LOCKED at 960: the 196px rail plus the top strip need ~922px before
   the top nav (which collapses to its toggle only at 720px) stops overflowing;
   900-959 has no meaningful device population. Below 960 the top strip carries. */
@media (min-width: 960px) {
  body { padding-left: 196px; }
  .subrail {
    display: block;
    position: fixed; left: 0; top: 0; bottom: 0; width: 196px; z-index: 40;
    background: var(--sand);
    border-right: 1px solid var(--rule);
    padding: 92px 0 24px;
    overflow-y: auto;
  }
}
.subrail__group {
  padding: 1.15rem 1.15rem 0.4rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--ink);
}
.subrail__item + .subrail__group { margin-top: 0.6rem; }
.subrail__item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1.15rem;
  text-decoration: none;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500; color: var(--ink);
  border-left: 3px solid transparent;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.subrail__item svg { flex: none; width: 26px; height: 26px; }
.subrail__item:hover { background: rgba(44, 42, 37, 0.05); }
.subrail__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.subrail__item.is-active {
  background: rgba(44, 42, 37, 0.05);
  border-left-color: var(--edge, var(--accent));
  color: var(--ink-deep);
}
/* Mobile bottom rail (Chad 2026-07-13): below 960 the rail is not gone, it
   moves to a fixed bottom bar. Same markup, same ten destinations, icon over
   label, horizontal scroll with snap. Group labels hide (the icons and labels
   carry). Body gets bottom padding so content and footer clear the bar; iOS
   safe-area respected. Locked 960 breakpoint unchanged: this styles the
   below-960 side only. */
@media (max-width: 959.98px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .subrail {
    display: flex; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    height: calc(76px + env(safe-area-inset-bottom, 0px));
    padding: 0 0 env(safe-area-inset-bottom, 0px) 0;
    z-index: 40;
    background: var(--sand);
    border-top: 1px solid var(--rule); border-right: 0;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .subrail::-webkit-scrollbar { display: none; }
  .subrail__group { display: none; }
  .subrail__item + .subrail__group { margin-top: 0; }
  .subrail__item {
    flex: none; scroll-snap-align: start;
    flex-direction: column; justify-content: center; gap: 0.3rem;
    min-width: 84px; padding: 0.5rem 0.6rem;
    text-align: center; font-size: 0.56rem; letter-spacing: 0.05em;
    border-left: 0; border-top: 3px solid transparent;
  }
  .subrail__item svg { width: 22px; height: 22px; margin: 0 auto; }
  .subrail__item span { display: block; }
  .subrail__item.is-active { border-top-color: var(--edge, var(--accent)); border-left-color: transparent; }
}

/* Reduced motion: native anchor jumps instead of smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Rail-aware column collapse: while the spine rail is shown it takes 196px, so
   the 4-up card grids (which otherwise reflow to 2-up only at 900px viewport)
   must reflow one step earlier across the rail's desktop band, or they overrun
   the narrowed content column. Matches the site's existing 900px collapse. */
@media (min-width: 960px) and (max-width: 1180px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------------------------------------
   22. SCENARIO BAND (individual translation layer, index only). Four situation
   cards under the two doors, each routing to the discipline section where that
   work lives + its FAQ group. Tokenized, locked palette. Route TEXT is ink-deep
   (the forecasting/amber discipline color fails AA as small text on sand); the
   discipline identity is carried by the card's top edge and the route marks,
   which clear the 3:1 graphics bar. Rail-aware 4->2 up in the 960-1180 band.
   The --collapsed / --revealed states drive Variant B (expand-under-door);
   Variant A never sets them, so the band stays static.
   ---------------------------------------------------------------------------- */
.scen-eyebrow { margin-bottom: 1.75rem; }
.scenarios { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); align-items: stretch; }
@media (min-width: 960px) and (max-width: 1180px) { .scenarios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .scenarios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .scenarios { grid-template-columns: 1fr; } }

.scenario-card {
  display: flex; flex-direction: column;
  height: 100%;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--sand);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--c, var(--accent));
}
.scenario-q {
  font-family: var(--voice); font-style: italic;
  font-size: 1.12rem; line-height: 1.32; color: var(--ink-deep);
  margin-bottom: 0.7rem;
  min-height: 2.64em;
}
.scenario-body { font-size: 0.96rem; line-height: 1.55; color: var(--ink); margin-bottom: 1.1rem; }
.scenario-route {
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--rule);
  font-weight: 700; color: var(--ink-deep); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.scenario-route::before { content: ""; width: 0.85rem; height: 3px; flex: none; background: var(--c, var(--accent)); }
.scenario-route::after { content: "\2192"; color: var(--c, var(--accent)); }
.scenario-route:hover { text-decoration: underline; }
.scenario-route:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.scenario-faq {
  margin-top: 0.55rem;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.scenario-faq::after { content: " \2192"; }
.scenario-faq:hover { color: var(--ink-deep); }
.scenario-faq:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.scen-close { margin-top: 1.5rem; letter-spacing: 0.05em; color: var(--muted); }

/* Variant B (expand-under-door): band collapsed by JS on load (no-JS keeps it
   visible), expands in place on the door trigger, stays open, no scroll-jump. */
.scenario-band--collapsed { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* backwards (not both): holds the pre-start state during the stagger delay so
     there is no flash, but does NOT retain the end transform, which would
     otherwise override the :hover lift once the reveal finishes. */
  .scenario-band--revealed .scenario-card { animation: scenIn 0.42s var(--ease) backwards; }
  .scenario-band--revealed .scenario-card:nth-child(2) { animation-delay: 0.05s; }
  .scenario-band--revealed .scenario-card:nth-child(3) { animation-delay: 0.1s; }
  .scenario-band--revealed .scenario-card:nth-child(4) { animation-delay: 0.15s; }
}
@keyframes scenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------------------
   23. FAQ PAGE (faq.html). Native <details>/<summary> accordion: keyboard and
   no-JS support for free, no open/close motion. Tokenized, locked palette.
   ---------------------------------------------------------------------------- */
.faq-grp-h { font-size: var(--t-h3); max-width: 30ch; margin-bottom: 1.4rem; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-group .faq-item:first-of-type { border-top: 1px solid var(--rule); }
.faq-q {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 0;
  font-family: var(--voice); font-size: 1.16rem; line-height: 1.35; color: var(--ink-deep);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: "+"; flex: none;
  font-family: var(--mono); font-size: 1.5rem; line-height: 1; color: var(--accent);
  transition: transform 0.2s var(--ease);
}
details[open] > .faq-q::after { transform: rotate(45deg); }
.faq-q:hover { color: var(--stone); }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq-a { padding: 0 0 1.4rem; max-width: 68ch; }
.faq-a p { color: var(--ink); line-height: 1.66; }
.faq-close {
  color: var(--ink-deep);
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px;
}
.faq-close:hover { text-decoration-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .faq-q::after { transition: none; } }

/* The FAQ strip entry (5th top-nav item) overruns the top nav by ~21px only at
   960px, where the sitewide rail leaves the strip 764px. Tighten the nav gap in
   that narrow rail band so the strip fits; the rail breakpoint stays locked 960. */
@media (min-width: 960px) and (max-width: 1012px) {
  .nav-links { gap: 0.85rem; }
}

/* ----------------------------------------------------------------------------
   24. UNIFIED CARD HOVER (Chad): every card lifts the same way the doors do.
   Pure CSS, no JS. Gated on hover-capable pointers and reduced motion, so touch
   devices and reduced-motion users get no transform. The doors already carry
   this (section 9); here it extends to the content, scenario, and layer cards
   so card hover is one behavior sitewide. Shadow tuned for the light grounds. */
@media (prefers-reduced-motion: no-preference) {
  /* .js-prefixed so the transform speed (0.25s, matching the doors) overrides the
     reveal's 0.7s transform transition on cards that carry .reveal; opacity stays
     at 0.7s so the scroll-reveal fade is unchanged. */
  .js .card, .js .scenario-card, .js .discipline,
  .card, .scenario-card, .discipline {
    transition: opacity 0.7s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.3s var(--ease);
  }
}
@media (hover: hover) {
  /* .js-prefixed so this outranks `.js .reveal.in { transform: none }` (equal
     specificity, later source) on cards that also carry .reveal; the bare
     selector is the no-JS fallback. Matches the doors' lift exactly. */
  .js .card:hover, .js .scenario-card:hover, .js .discipline:hover,
  .card:hover, .scenario-card:hover, .discipline:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(44, 42, 37, 0.10);
  }
}

/* FAQ group-header discipline links (copy v4, option A): each group header links
   to its methodology discipline. Quiet per the band pattern: the heading keeps
   its ink color and a small discipline-colored arrow (var(--c) from the .disc
   class on the h2) signals where it goes; underline on hover. */
.faq-grp-link { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.4rem; }
.faq-grp-link::after { content: "\2192"; font-size: 0.6em; color: var(--c, var(--accent)); }
.faq-grp-link:hover { text-decoration: underline; text-decoration-color: var(--c, var(--accent)); text-underline-offset: 4px; }
.faq-grp-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* ----------------------------------------------------------------------------
   25. DOORS HEADER (Chad 2026-07-14): Individual and Institution both stay fully
   open at all times; their info never collapses. The h3 > button header is the
   keyboard/AT control that reveals that lane's scenario band (aria-controls names
   the band; site.js also makes the whole card the click target). The caret points
   down when the lane is quiet and up once its boxes show (aria-expanded). No new
   colors, existing tokens only.
   ---------------------------------------------------------------------------- */
.door-h { font-size: var(--t-h3); max-width: 18ch; }
.door-head { display: inline-flex; align-items: baseline; gap: 0.6rem;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; }
.door-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.door-head .door-caret { width: 0.42em; height: 0.42em; flex: none;
  border-right: 2px solid var(--stone); border-bottom: 2px solid var(--stone);
  transform: rotate(45deg); transition: transform 0.2s var(--ease); }
.door-head[aria-expanded="true"] .door-caret { transform: rotate(225deg); }
.door-body { display: flex; flex-direction: column; gap: 1rem; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .door-head .door-caret { transition: none; } }

/* ----------------------------------------------------------------------------
   26. RESULTS STORY (results.html, Engagement 01): a stepped iceberg story. The
   iceberg is the progress spine (locked palette hex, matching the SVG-inline
   convention used by the compounding chart). Five beats sit on a persistent
   progress rail; JS shows one beat at a time and lights the iceberg cumulatively.
   No-JS: the .is-stepped class is never added, so all beats stay visible stacked,
   the iceberg shows every component, Prev/Next hide, and the rail anchors act as
   plain in-page jump links. Reduced-motion: transitions off, changes are instant.
   Discipline identity is carried by edges, dots, and iceberg marks (all graphics,
   >= 3:1); all beat/rail TEXT is ink-deep or muted so it clears AA on sand.
   ---------------------------------------------------------------------------- */
.story-intro { max-width: 60ch; }
.story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; margin-top: 1.9rem; }
@media (max-width: 720px) { .story { grid-template-columns: 1fr; } }

.iceberg { margin: 0; }
.iceberg svg { display: block; width: 100%; height: auto; max-width: 320px; margin: 0 auto; }
.iceberg text { font-family: var(--mono); }

/* Progress rail: anchors that step in place (JS) or jump (no-JS). */
.story-rail { list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.story-stop { display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  padding: 0.3rem 0; border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.story-stop-dot { width: 0.6rem; height: 0.6rem; flex: none; border-radius: 50%;
  background: var(--c, var(--slate)); opacity: 0.4; transition: opacity 0.2s var(--ease); }
.story-stop:hover { color: var(--ink-deep); }
.story-stop.is-current { color: var(--ink-deep); border-bottom-color: var(--c, var(--accent)); }
.story-stop.is-current .story-stop-dot, .story-stop.is-done .story-stop-dot { opacity: 1; }
.story-stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Beats. No-JS default: all visible, stacked, each with its numbered heading. */
.beat { border-left: 3px solid var(--c, var(--rule)); padding-left: 1.15rem; }
.beat--result { border-left-color: var(--accent); }
.beat + .beat { margin-top: 1.9rem; }
.beat-step { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.beat-disc { display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-deep); font-weight: 600; margin-top: 0.3rem; }
.beat-disc::before { content: ""; width: 0.7rem; height: 0.7rem; flex: none; background: var(--c, var(--accent)); }
.beat-h { font-size: var(--t-h4); margin: 0.5rem 0 0.65rem; color: var(--ink-deep); }
.beat-body { color: var(--ink); line-height: 1.66; max-width: 52ch; }
.story-detail-link { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; }

/* Prev/Next + step counter. Hidden until JS enables the stepper. */
.story-nav { display: none; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.9rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.story-btn { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.6rem 1.15rem; background: none;
  border: 1px solid var(--rule); color: var(--ink-deep); cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.story-btn:hover { border-color: var(--accent); }
.story-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.story-btn[disabled] { opacity: 0.4; cursor: default; }
.story-btn[disabled]:hover { border-color: var(--rule); }
.story-progress { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.1em; }

/* Stepped mode (JS on): one beat shown, Prev/Next visible, iceberg lights up
   cumulatively as the reader advances; the waterline erases at the Result beat. */
.story.is-stepped .story-nav { display: flex; }
.story.is-stepped .beat { display: none; }
.story.is-stepped .beat.is-active { display: block; }
.story.is-stepped .beat + .beat { margin-top: 0; }
.story.is-stepped .berg-item { opacity: 0.12; transition: opacity 0.5s var(--ease); }
.story.is-stepped .berg-item.lit { opacity: 1; }
.story.is-stepped .berg-water { transition: opacity 0.5s var(--ease); }
.story.is-stepped.is-result .berg-water { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .story.is-stepped .berg-item, .story.is-stepped .berg-water,
  .story-stop, .story-stop-dot, .story-btn { transition: none; }
}

/* ----------------------------------------------------------------------------
   TWO DOORS + its expanding scenario bands: dark tone override (main content
   only, not the subrail sidebar which has its own "Two ways in" label).
   Eyebrow, link, and tag/accent colors are left as-is per spec; everything
   else reads as sand-on-obsidian.
   ---------------------------------------------------------------------------- */
.tone-doors-dark { background: #2C2A25; }
.tone-doors-dark h2,
.tone-doors-dark h3,
.tone-doors-dark .door-h,
.tone-doors-dark p,
.tone-doors-dark .index { color: #F1EFE8; }
section[aria-labelledby="doors-h"] { margin-top: 3rem; padding-bottom: 0; }
#scenario-band, #scenario-band-inst { padding-top: 1.25rem; }
.tone-doors-dark .eyebrow { color: #BA7517; }
.tone-doors-dark .scenario-card { background: #2C2A25; }
.door--owner .door-accent { color: #5DCAA5 !important; }
.door--inst .door-accent { color: #85B7EB !important; }
.tone-doors-dark .disc--realization { --c: #5DCAA5; }
.tone-doors-dark .disc--discovery { --c: #85B7EB; }
.tone-doors-dark .scenario-route { color: #F1EFE8; white-space: nowrap; }
.tone-doors-dark .door,
.tone-doors-dark .door:hover { background: rgba(241, 239, 232, 0.06); }
.tone-doors-dark .door-head .door-caret { border-right-color: #F1EFE8; border-bottom-color: #F1EFE8; }

/* ABOUT PAGE: "How the firm arrived here" timeline section override */
#arrived-section { background: #F8F7F2; }
#arrived-section .eyebrow,
#arrived-section h2,
#arrived-section h3,
#arrived-section p { color: #2C2A25; }

/* ABOUT PAGE: hero bottom padding (scoped so it doesn't affect the home hero) */
body[data-page="about"] .hero { padding-bottom: 4rem; }

/* ABOUT PAGE: "What the firm owns" cards — give the label a fixed min-height so
   paragraph text starts at the same line whether the label wraps to one or two lines. */
section[aria-labelledby="built-h"] .card > p:first-child { min-height: 3.2rem; }
section[aria-labelledby="built-h"] .card p:not(:first-child) { color: #2C2A25; }

/* METHODOLOGY PAGE: discipline sections — exact row-based alignment so the left
   column's paragraph text and the right column's list start on the same line,
   regardless of how tall the header block (wayback link + index + qualifier + h2)
   happens to be. Robust to content changes, unlike a guessed margin-top offset. */
.disc-head { grid-column: 1; grid-row: 1; }
.disc-body { grid-column: 1; grid-row: 2; }
.disc-side { grid-column: 2; grid-row: 2; }
@media (max-width: 900px) {
  .disc-head, .disc-body, .disc-side { grid-column: 1; grid-row: auto; }
}

/* METHODOLOGY PAGE: hero bottom padding (scoped so it doesn't affect other pages' heroes) */
body[data-page="methodology"] .hero { padding-bottom: 4rem; }

/* METHODOLOGY PAGE: reduce the row-gap between the discipline header (row 1) and
   the paragraph/list row (row 2), while keeping the wider column-gap between
   the left and right columns from .gap-lg. */
.disc .grid.gc-8515.gap-lg { row-gap: 0.75rem !important; column-gap: clamp(2.5rem, 5vw, 5rem) !important; }

/* METHODOLOGY PAGE: center the engagement-flow diagram within its sand container */
section[aria-labelledby="flow-h"] figure svg { display: block; margin-inline: auto; max-width: 100%; }

/* RESULTS PAGE: hero bottom padding (scoped so it doesn't affect other pages' heroes) */
body[data-page="results"] .hero { padding-bottom: 4rem; }

/* RESULTS PAGE: engagement sections — proof/stat caption text was still using the
   sitewide muted gray; convert to stone within the engagement content specifically. */
.eng-section .proof p, .eng-section .stat .lab { color: #2C2A25; }

/* RESULTS PAGE: "What we've found" cards — the site-wide cols-4 breakpoint (900px)
   left a wide 900-1240px range where 4 columns were forced into a cramped width,
   causing "Indefinitely" and "Every cycle" to overflow. Scoped earlier breakpoint
   (1200px) for just this grid, plus a lower font-size floor for extra margin. */
section[aria-labelledby="po-h"] .fig { font-size: clamp(1rem, 0.8rem + 0.6vw, 1.3rem) !important; }
@media (max-width: 1200px) {
  section[aria-labelledby="po-h"] .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* RESULTS PAGE: "What we've found" cards — header figure gold + bold, paragraph stone */
section[aria-labelledby="po-h"] .card .fig { color: #BA7517 !important; font-weight: 700; }
section[aria-labelledby="po-h"] .card p { color: #2C2A25; }

/* RESOURCES PAGE: glossary definition list, nested inside the group-level
   accordions (.glossary-group reuses .faq-item/.faq-q for the fold behavior). */
.glossary-group .faq-q { font-size: 1.02rem; }
.glossary-list { display: grid; gap: 1.1rem; padding-top: 0.5rem; }
.glossary-list dt { font-family: var(--voice); font-weight: 500; color: var(--ink-deep); font-size: 1.02rem; margin-bottom: 0.25rem; }
.glossary-list dd { margin: 0; color: var(--ink); line-height: 1.6; max-width: 62ch; }

/* RESOURCES PAGE: preserve the gap the removed hero divider was providing */
body[data-page="faq"] .hero { padding-bottom: 1.5rem; }
/* RESOURCES PAGE: tighten the padding between consecutive FAQ groups */
.faq-group { padding-block: clamp(1.5rem, 3vw, 2.5rem) !important; }