/* ===== NO UA LINK COLOURS — 26 Jul 2026 (Benjie, urgent) ==================
   §2A.3: no blue or purple hues outside the ink/teal/gold system. Nothing in
   this sheet declared `:visited`, so any anchor an author rule did not reach
   fell through to the browser's own defaults — #0000EE unvisited and #551A8B
   PURPLE once visited. That is why the purple only appeared in real use: it
   needed a reader who had actually clicked through the directory first.

   Lowest specificity in the file (0-0-1 and 0-1-1) and placed FIRST, so every
   existing author rule still wins. This takes nothing away except the
   browser's ability to choose a colour we never chose.
   ======================================================================== */
a { color: inherit; }
a:visited { color: inherit; }

/* CoreBridge Advisory — site styles */

/* v4.2 type gate, 27 Jul 2026: Cormorant and every italic face are no longer loaded.
   Cormorant is retired and no page names it; the italic files were the last way an
   italic could reach the page, since `em, i { font-style: normal }` only governs rules
   that exist. Two faces, upright only: Hanken Grotesk and Spectral. */
/* Serif revision 23 Jul 2026 (Benjie): Spectral replaces Cormorant as the site serif (body, ledes, box titles, numerals). Hanken Grotesk stays on display/UI. Self-hosted, SIL OFL. */
@font-face { font-family: "Spectral"; src: url("fonts/Spectral-Regular.woff2") format("woff2"), url("fonts/Spectral-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/Spectral-Medium.woff2") format("woff2"), url("fonts/Spectral-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/Spectral-SemiBold.woff2") format("woff2"), url("fonts/Spectral-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/Spectral-Bold.woff2") format("woff2"), url("fonts/Spectral-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* Two-face system: Hanken Grotesk (display, headings, eyebrows, UI chrome) +
   Spectral (running body, ledes, pull-quotes, numerals). Tiempos, JetBrains and
   Cormorant are all retired; the Cormorant @font-face below is kept only so an
   in-flight document that still names it does not fall back to a system serif. */
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-VariableFont_wght.woff2") format("woff2-variations"), url("fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* ===== Ink — Oil Slick, one green-cast temperature (v3.1) ===== */
  --ink: #031602;          /* body + headings */
  --ink-2: #2E2A22;        /* secondary text · small text ~7:1 (canonical, confirmed Benjie 23 Jul) */
  --ink-3: #6B6557;        /* tertiary / captions */
  --ink-4: #9C9583;        /* faint meta / disabled */
  --ink-chip: #031602;  /* 23 Jul PM5 (Benjie): the black is the oil-slick #031602 */
  --ink-surface: #031602;  /* 23 Jul PM5 (Benjie): all dark grounds unified on oil-slick #031602 */
  --ink-surface-2: #0C2410; /* raised step on the oil-slick ground */
  /* Oil-slick green — full-page dark STATEMENT grounds & section dividers (2027).
     Warm near-black (--ink-surface) is reserved for small chips / UI / footer only.
     23 Jul 2026 (Benjie): more black in the green — both steps deepened. */
  --ink-surface-green: #031602;
  --ink-surface-green-2: #0C2410;
  --surface-dark:   var(--ink-surface-green);
  --surface-dark-2: var(--ink-surface-green-2);

  /* ===== Paper — warm off-white (v3.1) ===== */
  --paper: #F2F0EF;        /* Paper Tint — canonical body tone; every page bg */
  --paper-2: #EFEDE6;      /* recessed surface — sidebars, alternating rows (2027 spec) */
  --paper-3: #E4E0D6;      /* hairline divisions, hover-on-paper (2027 spec) */
  --paper-tint: #FBF9F4;   /* lifted surface — cards, modals, callouts (2027) */
  --paper-bright: #FEFCF7; /* brightest paper — input fields, elevated cards */
  --paper-deep: #D2CCBE;   /* heaviest cream — quiet decorative accent (2027) */
  --paper-on-ink: #CBC7BB; /* text on dark / ink surfaces */
  --paper-on-ink-2: #B8B1A1;

  /* Rule */
  --rule: #A6A294;
  --rule-hairline: #CBC7BB;
  --rule-soft: #DDD9CF;
  /* Corner radius scale. AUDIT 26 Jul 2026: this ladder still held the v4.0 "pillowy"
     values (2/6/12/20/28) that canonical v4.1 retired on 24 Jul in favour of a flat
     3/5/8/10. Nothing in this stylesheet references --radius-1..5 — every box uses the
     working pair below — so the ladder was six retired values sitting in the token block
     waiting to be picked up by the next person who needed a radius. Restated on the
     canonical scale: chips 3 · buttons 5 · cards 8 · hero 10. */
  --radius-1: 3px; --radius-2: 5px; --radius-3: 8px; --radius-4: 10px; --radius-5: 10px; --radius-pill: 999px;
  /* 23 Jul 2026 (Benjie): corners across the page were too rounded — cards now
     sit on a tighter working pair. Every box references these, not the ladder. */
  --radius-card: 10px; --radius-card-sm: 7px;
  --line-soft: rgba(20, 17, 13, 0.14);

  /* ===== Accent — DEEP TEAL (indigo/purple-blue retired site-wide, Jul 2026) =====
     Benjie's call: no purple or purple-blue anywhere. The interactive accent is the
     canonical deep teal #234C50 (v4.1, 24 Jul 2026); gold (--chip-gold) carries emphasis text.
     AUDIT 26 Jul 2026: this header said "TERRACOTTA" and the line under it said "the canonical
     indigo accent (v4.0)". Neither had been true since the v4.1 import — terracotta is a warm
     secondary and indigo is retired outright — so the block described two colours the site does
     not use. The four supporting steps had also drifted a hex or two off the canonical
     (#163437/#9FBFC2/#E3EDEE); they are back on _canonical/colors_and_type.css, which wins
     under Rule 0. */
  --accent: #234C50;         /* Signature accent — deep teal (Benjie, 23 Jul 2026) */
  --accent-control: #2F686D;   /* canonical v4.2.1 — filled controls; paper text at 6.17:1 */
  --accent-deep: #16363A;    /* accent-deep — hover / pressed */
  --accent-soft: #9CC2C0;    /* accent-soft tint */
  --accent-wash: #E1ECEA;    /* faint teal wash — callout cards, flagged states */
  --accent-ink: #16363A;     /* deep accent text on wash */
  --force-external: var(--chart-gold); /* purple-blue exhibit colour retired → gold */
  /* Four IP-instrument force colours + chart secondary (2027 exhibits palette).
     Reference the tokens in every tension diagram / capability map / chart. */
  --force-community:     #C2466B; /* Community Voice — raspberry rose */
  --force-bestpractice:  #9C6A00; /* Best Practice — full-strength ochre */
  --force-stewardship:   #2E7D52; /* First Nations Stewardship — deep green */
  --chart-gold:          #D4A017; /* chart secondary — fills/strokes only, never small text */
  --force-external-soft:     color-mix(in oklab, var(--force-external) 16%, var(--paper));
  --force-community-soft:    color-mix(in oklab, var(--force-community) 16%, var(--paper));
  --force-bestpractice-soft: color-mix(in oklab, var(--force-bestpractice) 16%, var(--paper));
  --force-stewardship-soft:  color-mix(in oklab, var(--force-stewardship) 16%, var(--paper));

  /* ===== Warm secondary — Terracotta + Ochre (v3.1) ===== */
  --terracotta: #A24B28;      /* warm secondary · ~5.3:1 (canonical restored 23 Jul) */
  --terracotta-deep: #7C3A1E; /* small text · ~7:1 (canonical restored 23 Jul) */
  --ochre: #96702A;           /* large / quiet · ~4.1:1 */

  /* ===== Status ===== */
  --success: #3D5A3D;
  --warning: #8A6A1F;
  --danger:  #8E2E2E;
  --info:    var(--accent); /* 2027: info uses the signature accent, not the frozen exhibit indigo */

  /* Gradients are retired site-wide (canonical v4.1, 24 Jul 2026). Flat fills
     only. ONE survivor remains, functional rather than decorative, and it
     carries its justification where it is declared: the photo legibility scrim
     on .photo-divider. (The text-clamp fade mask that was the second exception
     went with the bench rebuild on 26 Jul — nothing is truncated any more, so
     nothing needs fading out.) Nothing else in this stylesheet may declare a
     gradient. */

  /* ===== Gold — two roles, kept separate. Do not cross them. =====
     --chip-gold  UI ONLY: chips, pills, dark-section stat numerals, the Beta
                  pill. Rare by design. Never body text, never a large fill.
     --chart-gold DATA MARKS ONLY: chart and Exhibit fills/strokes. Never
                  chrome, never small text (it fails contrast below ~18px).
     --chip-yellow is a legacy alias of --chip-gold, kept only so older rules
     keep resolving; new work references --chip-gold. */
  --chip-yellow: #D4AF67;
  --chip-gold:   #D4AF67;

  /* Type — 2027 four-face system */
  --display: "Hanken Grotesk", "Helvetica Neue", "Inter", system-ui, -apple-system, sans-serif; /* display + headings */
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; /* UI chrome */
  /* Two faces only: Hanken Grotesk + Spectral (canonical v4.1, 24 Jul 2026). */
  --serif: "Spectral", Georgia, "Times New Roman", serif;                 /* running body + serif accents (Spectral, 23 Jul 2026) */
  --serif-accent: "Spectral", Georgia, "Times New Roman", serif;          /* ledes, pull-quotes, numerals (Spectral, 23 Jul 2026) */
  --mono: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; /* eyebrows/labels (was JetBrains) */

  /* ===== Type scale (§2A.1) — the whole scale, as named tokens =====
     §2A.7.4: track via the scale, not the element. A component that needs a
     size takes a token from here. A component that needs a size the scale does
     not have extends the scale HERE, with a name and a reason — never a bare
     px in the rule.

     The five core steps. Everything below them is an extension. */
  --fs-caption: 10.5px;  /* museum caption, "Source: …" under an exhibit        */
  --fs-kicker:  11px;    /* kicker / eyebrow, uppercase +0.16em                 */
  --fs-small:   14px;    /* small / meta — dates, read-times, metadata lines    */
  --fs-base:    16.5px;  /* page default                                       */
  --fs-body:    17px;    /* running body inside a measure                       */

  /* Extensions, each with the reason it exists. The stylesheet previously
     carried 9 / 9.5 / 10 / 10.5 / 11 / 11.5 / 12 / 12.5 / 13 / 14 / 14.5 / 15 /
     15.5 / 16 / 16.5 / 17 — sixteen micro-sizes, most of them drift rather than
     decision (§2A.7.1). The half-steps are gone; what remains is named. */
  --fs-exhibit-num: 40px;   /* the central numeral inside an Exhibit SVG    */
  --fs-exhibit-name: 20px;  /* force / node names inside an Exhibit SVG     */
  --fs-exhibit-lbl: 9.5px;  /* labels INSIDE Exhibit SVGs. Below caption size
                               because they sit within a drawn diagram at a
                               fixed viewBox, not in the page's text column.   */
  --fs-chrome:   13px;      /* dense UI chrome: nav, drawer, footer lists. Not
                               reading text; sits below --fs-small on purpose. */
  --fs-card:     15px;      /* body inside a card, where the measure is short  */
  --fs-card-lg:  16px;      /* body inside a wide card                         */
  --fs-callout:  18px;      /* callout band body — one step above running body */
  --fs-article:  19px;      /* long-form article body at 720px measure. One step
                               above running body because an article page is
                               read start-to-finish, not scanned.              */
  --fs-article-q: 21px;     /* quoted matter inside an article body            */
  --fs-article-t: 22px;     /* related-article card title                      */

  --max: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --header-h: 72px;

  /* ===== Spacing — 4px base scale (2027) ===== */
  --space-0: 0;   --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px; --space-11: 192px;

  /* ===== Shadows — soft, paper-on-paper (2027) ===== */
  --shadow-1: 0 1px 2px rgba(20,17,13,.04), 0 1px 1px rgba(20,17,13,.03);
  --shadow-2: 0 8px 24px -8px rgba(20,17,13,.08), 0 2px 4px rgba(20,17,13,.04);
  --shadow-3: 0 24px 48px -16px rgba(20,17,13,.14), 0 8px 16px -8px rgba(20,17,13,.06);
  --shadow-4: 0 40px 80px -24px rgba(20,17,13,.20), 0 16px 32px -16px rgba(20,17,13,.10);
  --shadow-card: 0 2px 6px rgba(20,17,13,.04), 0 12px 28px -12px rgba(20,17,13,.10);

  /* ===== Motion (2027) ===== */
  --ease-out:   cubic-bezier(0.2,0.7,0.2,1);
  --ease-in:    cubic-bezier(0.6,0,0.85,0.4);
  --ease-std:   cubic-bezier(0.4,0,0.2,1);
  --ease-spring:cubic-bezier(0.5,1.5,0.4,1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms;

  /* ===== Photography overlays + accent wash (2027) ===== */
  --photo-overlay: color-mix(in oklab, var(--ink) 28%, transparent);
  --photo-deepen:  color-mix(in oklab, var(--ink) 60%, transparent);

  /* ===== Layout measures (2027) ===== */
  --measure: 62ch; --measure-narrow: 48ch;
  --container: 1200px; --container-wide: 1440px; --container-text: 720px;
}

:root { color-scheme: only light; } /* opt out of Android Chrome Force Dark — mobile was re-tinting the paper/ink palette (Benjie, 24 Jul 2026) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  /* Spectral (23 Jul 2026): larger x-height than Cormorant, so the Cormorant
     size/weight lift comes off — 16.5px Regular reads right on screen */
  font-family: var(--serif);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
/* Global keyboard-focus floor — every interactive element shows a visible ring.
   :where() keeps specificity at 0 so the bespoke :focus-visible rules still win,
   and mouse clicks stay ring-free (only :focus-visible, not :focus). */
:where(a, button, [tabindex], summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
/* v3.1: UI chrome (nav, footer links, controls) stays sans Hanken Grotesk; only content is Cormorant */
.nav a, .drawer__nav a, .site-foot a, .cta-pill, .cta-pill span, .menu-btn,
input, select, textarea, .brand span { font-family: var(--sans); }

/* Type scale — §2A.1. Hanken Grotesk carries display and headings; Spectral
   carries the lede and running body, upright. No italics anywhere in headings.
   Neue Haas and the Tiempos italic accent word this comment used to describe
   are both retired. */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

/* Black eyebrow chip — the "PROPOSAL 06 / AERO" pattern */
.eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink-chip);
  color: var(--chip-yellow);
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px 7px;
  border-radius: 3px;
  line-height: 1;
}
.section--ink .eyebrow-chip { background: var(--paper); color: var(--ink); }

.display {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 7.2vw, 104px);
  line-height: 1.0;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.display em {
  /* 2026-07 revision: accent words render in the heading face, upright — one continuous voice */
  font-family: var(--display);
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
.display-2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.024em;
  margin: 0;
  text-wrap: balance;
}
.display-2 em {
  font-family: var(--display);
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
.h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
.h2 em { font-family: var(--display); font-style: normal; font-weight: inherit; color: inherit; }
.h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
}
.h3 em { font-family: var(--display); font-style: normal; font-weight: inherit; color: inherit; }
/* Lede — §2A.1: Spectral 400 UPRIGHT, clamp(20px, 1.8vw, 24px) / 1.4, --ink-2,
   text-wrap: pretty, one per section. The italic setting this comment used to
   specify is retired (canonical v4.1: "always upright, no italics anywhere").
   `<em>` inside a lede stays in the same face, upright, same weight and same
   colour — emphasis never introduces a second typeface or a second colour
   (§2A.2 rule 1). */
.lede {
  font-family: var(--serif-accent);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lede em {
  /* One colour, one treatment: emphasised words read as part of the lede,
     no second highlight colour. */
  font-style: inherit;
  font-weight: inherit;
  color: inherit;
}
.body { font-size: var(--fs-body); font-weight: 560; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.body p { margin: 0 0 1.05em; }
.body p:last-child { margin-bottom: 0; }
.small { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-3); }
.kicker {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}
.num {
  font-family: var(--mono);
  font-size: var(--fs-chrome);
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: clamp(80px, 13vw, 192px) 0; position: relative; overflow-x: clip; overflow-y: visible; }
.section--ink { background: var(--surface-dark); color: var(--paper-on-ink); } /* 2027: full-page dark statements use the oil-slick green ground */
/* AUDIT 26 Jul 2026 (§4.7 contrast). Quiet type on the oil-slick ink ground was set by
   fading --paper-on-ink with alpha. Anything under alpha 0.6 misses the 4.5:1 AA floor at
   these sizes: 0.55 lands at 4.07:1, 0.45 at 3.11:1, 0.4 at 2.80:1 — and 0.4 was carrying
   the Acknowledgement of Country label and the footer photo credit. Thirteen declarations
   across this stylesheet are lifted to 0.62 (4.99:1). Hierarchy still reads: it is carried
   by size, weight and case, which is where it belonged. Border alphas are untouched — a
   1px rule is decoration, not text. */
.section--ink .eyebrow, .section--ink .kicker, .section--ink .num { color: rgba(203, 199, 187, 0.62); }
.section--ink .body { color: rgba(203, 199, 187, 0.78); }
.section--ink .display em, .section--ink .display-2 em { color: inherit; }
.section--paper-2 { background: var(--paper-2); }
.divider-rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }
.section--ink .divider-rule { background: rgba(246, 242, 236, 0.12); }

/* Giant running numerals — magazine-masthead device.
   Now restrained: only on even-numbered sections (02, 04, 06, 08), 0.05 opacity.
   Recurring motif rather than fixed template. */
/* Giant background numeral retired (2027) — removed from every section. */
.section[data-num="02"]::before,
.section[data-num="04"]::before,
.section[data-num="06"]::before,
.section[data-num="08"]::before {
  content: none;
  display: none;
  position: absolute;
  bottom: clamp(-24px, -2vw, -8px);
  right: clamp(-12px, -1vw, 0px);
  font-family: var(--serif);
  font-style: normal;   /* v4.2: upright everywhere */
  font-weight: 300;
  font-size: clamp(180px, 30vw, 480px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink-3);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  white-space: nowrap;
}
.section--ink[data-num="04"]::before,
.section--ink[data-num="06"]::before,
.section--ink[data-num="08"]::before { color: var(--paper-on-ink); opacity: 0.035; }
.section[data-num] > .wrap,
.contact-cta[data-num] > .wrap { position: relative; z-index: 1; }
/* Chapter bar now lives on the section itself — see the 23 Jul refinement
   block at the end of this file. The old right-aligned wrap number is retired. */
.section[data-num] > .wrap::before { content: none; }
@media (max-width: 720px) {
  .section[data-num="02"]::before,
  .section[data-num="04"]::before,
  .section[data-num="06"]::before,
  .section[data-num="08"]::before {
    font-size: clamp(140px, 44vw, 220px);
    bottom: -8px;
    right: -4px;
    opacity: 0.045;
  }
  .section--ink[data-num="04"]::before,
  .section--ink[data-num="06"]::before,
  .section--ink[data-num="08"]::before { opacity: 0.03; }
}

/* Header */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  background: rgba(246, 242, 236, 0.96);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.site-head--ink {
  background: rgba(14, 17, 22, 0.92);
  border-bottom-color: rgba(246, 242, 236, 0.10);
  color: var(--paper-on-ink);
}
.site-head__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-card-lg);
  letter-spacing: -0.012em;
  color: inherit;
}
.brand__mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.nav { display: none; }
@media (min-width: 880px) {
  .nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); margin-left: auto; }
}
.nav a {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--ink-2);
  position: relative;
  padding: 6px 0;
  transition: color 120ms linear;
}
.site-head--ink .nav a { color: rgba(203, 199, 187, 0.78); }
.nav a:hover { color: var(--ink); }
.site-head--ink .nav a:hover { color: var(--paper-on-ink); }
.nav a.is-active::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: currentColor;
}
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: var(--fs-chrome);
  font-weight: 500;
  letter-spacing: 0.005em;
  background: var(--ink-surface);
  color: var(--paper-on-ink);
  border: 1px solid var(--ink);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.cta-pill:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.site-head--ink .cta-pill { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.site-head--ink .cta-pill:hover { background: var(--accent-soft); border-color: var(--chip-gold); color: var(--ink); }
.cta-pill__arrow { transition: transform 220ms ease; }
.cta-pill:hover .cta-pill__arrow { transform: translateX(3px); }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 8px 0;
  color: inherit;
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (min-width: 880px) { .menu-btn { display: none; } }
.menu-btn__icon {
  width: 22px;
  height: 14px;
  position: relative;
}
.menu-btn__icon::before, .menu-btn__icon::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 240ms ease;
}
.menu-btn__icon::before { top: 2px; }
.menu-btn__icon::after { bottom: 2px; }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::after { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
/* The overlay nav (26 Jul 2026). Brought to the same language as the dashboard
   selection panel: a full-bleed PAPER surface rather than an ink one, a single
   hairline where it meets the header, generous rows, and hover as a colour
   shift on the type. It was a dark slab that inverted the whole page for the
   length of a menu interaction — the loudest thing on a site built on quiet. */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--rule-hairline);
  z-index: 99;
  padding: clamp(32px, 5vw, 56px) var(--gutter) 48px;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.drawer__nav { display: flex; flex-direction: column; gap: 0; max-width: var(--container-text); }
.drawer__nav a {
  font-family: var(--display);
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.022em;
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--rule-hairline);
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  transition: color 180ms ease;
}
.drawer__nav a:hover { color: var(--ink); }
/* The numeral is the quiet secondary line — grey to the name's black, the same
   hierarchy the panel headings use.
   AUDIT 26 Jul 2026 (§4.7 contrast): --ink-4 #9C9583 is 2.63:1 on paper. The base
   .num rule already uses --ink-3 (5.10:1) for exactly this job; this override had
   dropped a step and taken the nav numerals below AA with it. */
.drawer__nav a .num {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.drawer__foot {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--fs-chrome);
  color: var(--ink-3);
}
.drawer__foot a { display: inline-flex; align-items: center; min-height: 24px; }

/* Buttons */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 500;
  background: transparent;
  color: inherit;
  transition: background 200ms ease, color 200ms ease;
}
.btn-line:hover { background: var(--ink-surface); color: var(--paper-on-ink); }
.section--ink .btn-line:hover { background: var(--paper); color: var(--ink); }
.btn-line__arrow { transition: transform 240ms ease; }
.btn-line:hover .btn-line__arrow { transform: translateX(4px); }

/* Hero — light editorial opener on CoreBridge paper (Benjie, 23 Jul 2026).
   Words left; a mosaic of close-up faces right — all editorial B&W, on the
   canonical paper ground. The dark cinematic panel, moving mood layer and
   grain are retired. */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(28px, 5vw, 64px));
  padding-bottom: clamp(44px, 6vw, 88px);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
@media (min-width: 920px) {
  .hero__inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
.hero__eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(18px, 2.6vw, 28px);
}
.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(42px, 5.6vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.012em;
  margin: 0 0 clamp(20px, 3vw, 32px);
  color: var(--ink);
  text-wrap: balance;
}
.hero__title em { font-family: var(--display); font-style: normal; font-weight: inherit; color: inherit; }
.hero__title .word { display: inline-block; }
.hero__lede {
  font-family: var(--serif-accent);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: var(--ink-2);
  margin: 0 0 clamp(24px, 3.4vw, 40px);
  /* 4 Aug 2026 (Benjie): the 46ch cap stopped this lede 79px short of the eyebrow,
     title and regions line directly above and below it, all of which fill the hero
     copy column. The column is the container; the lede now matches its siblings. */
  max-width: none;
  text-align: left;
}
.hero__anchor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 17px);
  letter-spacing: -0.005em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  width: max-content;
  transition: color 200ms ease, border-bottom-color 200ms ease;
}
.hero__anchor:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.hero__anchor svg { transition: transform 220ms ease; }
.hero__anchor:hover svg { transform: translateX(3px); }
.hero__anchor, .contact-cta__email { will-change: transform; }

/* The mosaic — three columns of close-up faces; middle column drops for
   editorial rhythm. Square-cut tiles per the tightened corner scale. */
.hero-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.1vw, 16px);
  align-items: start;
}
.hero-mosaic__col {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.1vw, 16px);
}
.hero-mosaic__col:nth-child(2) { transform: translateY(clamp(18px, 3vw, 44px)); }
.hero-mosaic__tile {
  position: relative;
  overflow: hidden;
  /* Square, to match the bench gallery wall (WI-2, 26 Jul 2026). These are the
     same seven portraits; a rounded corner here and a square one there would be
     two treatments of one set of faces. A photograph is content, not a box, so
     §2A.5's card radii do not apply — see the note on .team-grid. */
  border-radius: 0;
  background: var(--paper-3);
  aspect-ratio: 4 / 5;
  margin: 0;
}
.hero-mosaic__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}
/* No hover zoom. Seven real people, not product tiles. */
@media (max-width: 919px) {
  .hero { min-height: 0; }
}

/* Reveal-on-scroll — softer than the old 24px / 800ms template. Now 8px / 600ms.
   Per the audit: when every paragraph rises 24px on entry, the page reads as Wix/Framer
   rather than authored. Short distance, fast tween, light touch. */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* When GSAP is driving, suppress the CSS opacity/transform so GSAP can set inline styles cleanly. */
body.gsap-ready .reveal { transition: none; }

/* Top scroll progress hairline — fixed at very top, fills as you scroll */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(20, 17, 13, 0.06);
  z-index: 200;
  pointer-events: none;
}
.scroll-progress__fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
}

/* Character cascade — words wrapped in .char-word (no-wrap) so they stay atomic;
   chars inside are inline-block for transform animation */
.display-2 .char-word {
  display: inline-block;
  white-space: nowrap;
}
.display-2 .char {
  display: inline-block;
  will-change: transform, opacity;
}
/* Safety: if GSAP fails to run, chars must remain visible */
body:not(.gsap-ready) .display-2 .char { opacity: 1 !important; transform: none !important; }

/* Impact pin wrapper — kept as a passive wrapper, no styling */
.impact-pin { display: contents; }

/* Full-bleed photo divider — editorial strip between sections */
.photo-divider {
  position: relative;
  height: var(--photo-divider-h, clamp(280px, 48vh, 520px));
  /* SYMMETRY, 29 Jul 2026 (Benjie: uneven whitespace between homepage sections).
     The band had 166px of air above it and 218px below at 1280px — lopsided, and there are two
     of them on the page. The cause was two special-case rules pulling in opposite directions:
     `.section + .photo-divider` zeroed the top margin (so the space above came only from the
     preceding section's 166px padding) while the bottom kept a 77px margin AND the following
     section was given a SMALLER 141px top padding, which added to 218. Both special cases are
     removed. With no margins the band inherits the page's own rhythm: 166px of section padding
     either side, which is exactly half the 333px that separates two plain sections. The photo
     band supplies the rest of the separation, so the rhythm is the same everywhere. */
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-surface);
}
/* Section that follows or precedes a photo divider — pull the buffer in. */
.photo-divider__bg { position: absolute; inset: 0; z-index: 0; }
.photo-divider__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  /* The house photo curve (§2B.2.1): one grade, applied everywhere, so the set
     reads as a single shoot. Warm desaturate rather than flat greyscale keeps
     the paper ground's warmth in the image. Every photograph on the site runs
     through this, or through the identical grade on .hero-mosaic__tile. */
  filter: grayscale(1) contrast(1.18) brightness(0.80) sepia(0.06);
}
.photo-divider::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  /* THE GRADIENT EXCEPTION (functional, not decorative). A caption set over
     a photograph needs a ramp, not a flat wash: a flat overlay would grey the
     whole image to hold one line of type. Ink #031602 only — the same hue as
     --photo-overlay/--photo-deepen, so photography stays inside the ink ramp. */
  background: linear-gradient(180deg, rgba(3, 22, 2, 0.22) 0%, rgba(3, 22, 2, 0) 30%, rgba(3, 22, 2, 0.26) 58%, rgba(3, 22, 2, 0.78) 100%);
  pointer-events: none;
}
/* Same exception: dividers carrying an overlaid quote pool the ink bottom-left
   behind the text, so the quote holds over a pale sky band as well as a dark
   base. Legibility device, single hue, no second colour introduced. */
.photo-divider:has(.photo-divider__quote)::after {
  background:
    radial-gradient(150% 135% at 14% 92%, rgba(3, 22, 2, 0.82) 0%, rgba(3, 22, 2, 0.48) 40%, rgba(3, 22, 2, 0.14) 68%, rgba(3, 22, 2, 0) 85%),
    linear-gradient(180deg, rgba(3, 22, 2, 0.22) 0%, rgba(3, 22, 2, 0) 30%, rgba(3, 22, 2, 0.26) 58%, rgba(3, 22, 2, 0.78) 100%);
}
.photo-divider__kicker {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(20px, 3vw, 32px);
  z-index: 2;
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(203, 199, 187, 0.92);
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.photo-divider__quote {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(48px, 6vw, 88px);
  z-index: 2;
  margin: 0;
  max-width: 56ch;
}
.photo-divider__quote-text {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: rgba(203, 199, 187, 0.98);
  margin: 0 0 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 2px 18px rgba(0,0,0,0.5);
  text-wrap: balance;
}
.photo-divider__quote-text::before { content: "\201C"; }
.photo-divider__quote-text::after { content: "\201D"; }
.photo-divider__quote-cite {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(203, 199, 187, 0.86);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 1px 10px rgba(0,0,0,0.45);
}
.photo-divider__credit {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(20px, 3vw, 32px);
  z-index: 2;
  font-family: var(--mono);
  font-size: var(--fs-exhibit-lbl);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(203, 199, 187, 0.62);
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* Trusted-by section.
   WI-2, 26 Jul 2026 — REMOVED: a "2027 zip atmospheric texture" wash
   (cb-texture-green-plaster.jpg) at 14% opacity with a 22s drift.
   The asset carries a four-pointed sparkle glyph in its lower-right corner:
   a generative-AI watermark. §2B.1.5 bans AI-generated imagery outright,
   including AI-looking stock, so the file is retired to
   .imagery-retired-2026-07-26/ rather than left in the served tree.
   It shipped in the same handoff bundle as the AI-generated "Mist" ground
   already pulled from the dashboards — treat anything from that bundle as
   unverified provenance until checked frame by frame. */
#trusted {
  position: relative;
  isolation: isolate;
}
#trusted > .wrap { position: relative; z-index: 1; }

/* Impact section.
   WI-2, 26 Jul 2026 — REMOVED: the same treatment as #trusted above, a plaster
   texture wash at 6% opacity with a 28s drift. No watermark is visible on this
   frame, but it arrived in the handoff bundle that produced two confirmed
   AI-generated assets, and §2B.3.3 says reject when provenance is in doubt.
   At 6% it was also invisible work: the section reads identically without it. */
#impact { position: relative; isolation: isolate; }
#impact > .wrap { position: relative; z-index: 1; }

/* Engagement-partners credits grid — cream tile per logo, natural colour, on dark band.
   Each tile is a paper card so the canonical institution logos display as intended. */
.partners {
  list-style: none;
  padding: 0;
  margin: clamp(40px, 6vw, 72px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
@media (min-width: 720px) { .partners { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .partners { grid-template-columns: repeat(4, 1fr); } }
.partner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.partner__logo {
  width: 100%;
  height: clamp(96px, 11vw, 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 24px);
  background: var(--paper);
  /* was a bare 4px — not a step on the radius register (§2A.5). A logo tile
     is a small module, so it takes the small-module token. */
  border-radius: var(--radius-card-sm);
  transition: transform 320ms ease, background 240ms ease;
}
.partner__logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* Multiply blend so white logo backgrounds disappear against the cream tile —
     only the coloured/dark logo shapes show. Works for white-bg vector PNGs. */
  mix-blend-mode: multiply;
}
.partner:hover .partner__logo { transform: translateY(-2px); background: var(--paper-bright); }
.partner__name {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(203, 199, 187, 0.7);
  line-height: 1.4;
  text-align: center;
}
.partner__note {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-style: normal;
  font-size: var(--fs-chrome);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: rgba(203, 199, 187, 0.62);
  text-align: center;
  text-wrap: pretty;
  text-transform: none;
}

/* About / two-col blocks */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (min-width: 920px) {
  .two-col { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr); }
}
.two-col__head { position: static; }
@media (min-width: 920px) {
  .two-col__head { position: sticky; top: calc(var(--header-h) + 24px); }
}
.two-col__body { display: flex; flex-direction: column; gap: 28px; }
.principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 32px;
}
.principle {
  border-top: 1px solid var(--line-soft);
  padding: 24px 0;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: start;
}
.section--ink .principle { border-top-color: rgba(246, 242, 236, 0.12); }
.principle:last-child { border-bottom: 1px solid var(--line-soft); }
.section--ink .principle:last-child { border-bottom-color: rgba(246, 242, 236, 0.12); }
.principle__num {
  font-family: var(--mono);
  font-size: var(--fs-chrome);
  color: var(--ink-3);
  padding-top: 4px;
}
.section--ink .principle__num { color: rgba(203, 199, 187, 0.62); }

/* ===== About — founder-led editorial feature ===== */
.about-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 880px) {
  .about-feature { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}
.about-feature__portrait {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper-tint);
  box-shadow: 0 1px 2px rgba(20, 17, 13, 0.05), 0 24px 60px -26px rgba(20, 17, 13, 0.30);
  transition: box-shadow 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.about-feature__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.about-feature__portrait:hover {
  box-shadow:
    0 1px 2px rgba(20, 17, 13, 0.05),
    0 30px 72px -22px rgba(20, 17, 13, 0.45),
    0 10px 30px -14px rgba(20, 17, 13, 0.28);
}
.about-feature__portrait:hover img { transform: scale(1.035); }
.about-feature__credit {
  position: absolute;
  bottom: 10px; right: 12px;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  color: rgba(247, 245, 240, 0.88);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .about-feature__portrait img, .about-feature__portrait:hover img { transition: none; transform: none; }
}

/* Reach — two measured text columns */
.about-body {
  margin-top: clamp(40px, 5.5vw, 76px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 40px);
}
@media (min-width: 760px) { .about-body { grid-template-columns: 1fr 1fr; } }
.about-body p { font-size: var(--fs-card-lg); line-height: 1.62; color: var(--ink-2); margin: 0; }

#about .callout { margin-top: clamp(40px, 5vw, 64px); }

/* Two principles — glowing cards */
.about-principles {
  margin-top: clamp(16px, 2.2vw, 24px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 22px);
}
@media (min-width: 680px) { .about-principles { grid-template-columns: 1fr 1fr; } }
.about-principles > .reveal { display: flex; }
.about-principles > .reveal > .principle-card { flex: 1; }
.principle-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--paper-bright);
  padding: clamp(30px, 2.8vw, 44px);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  transition: box-shadow 380ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 320ms ease, transform 380ms ease;
}
.principle-card:hover {
  border-color: rgba(35, 76, 80, 0.4);
  box-shadow: var(--shadow-3);
  transform: translateY(-3px);
}
.principle-card__num {
  font-family: var(--serif-accent);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(46px, 4.6vw, 62px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-hairline);
}
.principle-card__title {
  font-family: var(--serif-accent);
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.principle-card__body { font-size: var(--fs-card-lg); font-weight: 560; line-height: 1.58; color: var(--ink-2); margin: 0; text-wrap: pretty; }

/* Practices — editorial stack. Three full-width rows separated by hairline rules.
   Asymmetric: each row uses a different column emphasis. No card chrome, no surface variants. */
/* ===== Practices — three editorial cards (cream, soft shadow, 22px radius) ===== */
.practices-stack {
  margin-top: clamp(48px, 7vw, 88px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 22px);
  align-items: stretch;        /* equal-height cards */
}
@media (min-width: 720px) and (max-width: 1039px) {
  .practices-stack { grid-template-columns: 1fr 1fr; }
  /* third card centred when it sits alone on the last row */
  .practices-stack > .practice-row:last-child:nth-child(2n+1) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: calc((100% - clamp(16px, 2vw, 22px)) / 2);
  }
}
@media (min-width: 1040px) {
  .practices-stack { grid-template-columns: repeat(3, 1fr); }
}
.practice-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--paper-bright);
  padding: clamp(30px, 2.8vw, 44px);
  border-radius: var(--radius-card);
  border: 1px solid rgba(20, 17, 13, 0.06);
  box-shadow:
    0 1px 2px rgba(20, 17, 13, 0.04),
    0 10px 30px -14px rgba(20, 17, 13, 0.16);
  /* shadow / glow hover only (the reveal leaves an inline transform, so no translate here) */
  transition: box-shadow 420ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 420ms ease;
}
.practice-row:hover {
  border-color: rgba(20, 17, 13, 0.18);
  box-shadow:
    0 1px 3px rgba(20, 17, 13, 0.06),
    0 26px 60px -18px rgba(20, 17, 13, 0.28);
}
/* oversized editorial numeral — upright serif, identical size across all three cards (v4.1: no italics, and the indigo this once named is retired) */
.practice-row__num {
  font-family: var(--serif-accent);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(56px, 6vw, 84px);
  line-height: 0.84;
  letter-spacing: -0.04em;
  color: var(--accent-deep);
  margin: 2px 0 clamp(16px, 1.8vw, 24px);
  text-transform: none;
  transition: color 420ms ease, text-shadow 420ms ease;
}
.practice-row:hover .practice-row__num {
  color: var(--accent);
  text-shadow: 0 8px 30px rgba(20, 17, 13, 0.26);
}
/* hairline between numeral and body text — editorial structure */
.practice-row__body {
  border-top: 1px solid rgba(20, 17, 13, 0.10);
  padding-top: clamp(16px, 1.7vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 420ms ease;
}
.practice-row:hover .practice-row__body { border-color: rgba(20, 17, 13, 0.20); }
.practice-row__title {
  font-family: var(--serif-accent);
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.practice-row__title em { font-family: var(--display); font-style: normal; font-weight: inherit; color: inherit; }
.practice-row__lede {
  font-family: var(--serif);
  font-weight: 520;
  font-size: clamp(15.5px, 1.05vw, 17px);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

/* Impact (case studies) — card-framed list. All cards uniform height. */
.impact-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: clamp(40px, 6vw, 72px);
}
@media (min-width: 760px) {
  .impact-list {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    grid-auto-rows: 1fr; /* all rows equal height -> all cards same size */
  }
}
/* The .reveal wrappers between the grid and .impact must fill the grid cell */
.impact-list > .reveal { display: flex; height: 100%; }
.impact-list > .reveal > .impact { flex: 1; height: 100%; }
.impact {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(28px, 3vw, 40px);
  background: var(--paper-bright);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  position: relative;
  box-shadow: var(--shadow-1);
  transition: transform 400ms ease, box-shadow 400ms ease, border-color 200ms ease;
  transform-origin: 50% 100%;
}
.impact:hover { border-color: rgba(35, 76, 80, 0.4); box-shadow: var(--shadow-3); transform: translateY(-3px); }
.impact__num {
  font-family: var(--serif-accent); font-size: clamp(34px, 3.2vw, 44px); line-height: 0.9;
  letter-spacing: -0.02em; color: var(--accent-deep); font-weight: 500; font-style: normal;
  display: block; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--rule-hairline);
  font-variant-numeric: lining-nums;
}
.impact__title { font-family: var(--serif-accent); font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; }
.impact__body { font-size: var(--fs-card-lg); font-weight: 560; line-height: 1.58; color: var(--ink-2); margin: 0; }
.impact:hover {
  transform: rotate(0.4deg) translateY(-1px);
  border-color: var(--line);
  box-shadow: 0 18px 40px -18px rgba(20, 17, 13,.12), 0 6px 14px -8px rgba(20, 17, 13,.06);
}

/* Trusted-by marquee */
.trusted {
  display: flex;
  gap: clamp(32px, 5vw, 64px);
  flex-wrap: wrap;
  margin-top: 32px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 28px);
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.trusted span { white-space: nowrap; }
.trusted span + span::before { content: "—"; margin-right: clamp(32px, 5vw, 64px); margin-left: -8px; color: var(--ink-4); font-style: normal; }

/* Logo grid for trusted-by — cream tiles on dark band, full-colour logos */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: clamp(40px, 6vw, 64px);
}
@media (min-width: 640px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
.logo-cell {
  background: var(--paper-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 32px);
  min-height: 140px;
  border-radius: 4px;
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 280ms ease;
}
.logo-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.45);
}
.logo-cell img {
  max-height: 64px;
  max-width: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Team */
/* ============================================================================
   THE BENCH — gallery wall (WI-2, 26 Jul 2026)
   ----------------------------------------------------------------------------
   Rebuilt from a card grid to a gallery wall on Benjie's direction, against the
   Aesop reference.

   WHAT THE REFERENCE ACTUALLY DOES (NN/g's analysis of aesop.com): a three-column
   grid; imagery centred in its column and anchored to a shared baseline; every
   item's secondary content on the same height, the same padding, left-aligned to
   the same grid line; a monochrome palette where black carries primary text and
   grey carries secondary; and negative space doing the structural work that
   borders and shadows do elsewhere.

   WHAT THIS SECTION USED TO BE: seven cards. Each one a paper-bright panel with
   a two-layer shadow, wrapping a photograph that carried a SECOND two-layer
   shadow of its own, plus a rounded frame, a "+" badge floated over the face, a
   hover lift, a hover shadow bloom, a clamped bio with a fade mask, and a row of
   pill controls. Nine pieces of chrome around a photograph of a person. That is
   a LinkedIn directory.

   WHAT IT IS NOW: the photograph, then the name, then the role. Nothing else.
   No panel, no border, no radius, no shadow, no hover, no badge. The portraits
   hang on the paper the way prints hang on a wall, on one baseline, at one crop,
   under one grade.

   TWO DELIBERATE DEPARTURES FROM §2A, both recorded here rather than left to be
   discovered:

   1. SQUARE CORNERS. §2A.5 says "never 0 on cards". These are no longer cards —
      §2A.5 governs boxes that group functioning content, and a photograph is
      not a box, it is the content. A rounded corner is a frame, and the brief
      is explicit: no decorative chrome around the photo. The hero mosaic on the
      home page carries the SAME portraits and has been squared to match;
      the two treatments of one set of faces cannot disagree.
   2. NO ORPHAN CENTRING. Seven portraits in a three-column grid left one alone
      on the last row. The old rule centred it. A gallery wall aligns; it does
      not centre a straggler, and centring made the seventh advisor read as
      either a featured outlier or a mistake. It sat on the grid line with the
      others. The bench went to nine on 28 Jul 2026, which fills three rows of
      three exactly and leaves no straggler to argue about — but the rule stays,
      because the tenth advisor would bring the question straight back.

   Spacing is from the §2A.6 ladder. Row gap is deliberately larger than the
   column gap: on a wall, the horizontal run reads as one hang and the vertical
   break separates them.
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* row gap: block-spacing ladder · column gap: one step down */
  gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 560px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }

/* The Reveal wrapper must not become a layout box of its own. */
.team-grid > .reveal { display: block; }

.member {
  display: flex;
  flex-direction: column;
  scroll-margin-top: 96px;
  /* No ground, no padding, no border, no radius, no shadow, no hover. The
     photograph sits directly on the paper. */
}

/* ---- The photograph ------------------------------------------------------ */
/* One crop for every portrait (§2B.2.2, "one crop per slot: decide once, hold
   everywhere") and one grade (§2B.2.1). 4:5 is the same ratio the home-page
   hero mosaic uses, so the bench reads as one shoot in both places. */
.member__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-3);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The house B&W curve, unchanged and shared with .hero-mosaic__tile. */
  filter: grayscale(1) contrast(1.08);
}
/* Per-person framing — the original crops sit differently in the frame. */
.member__photo img[data-person="benjie"]   { object-position: center 28%; }
.member__photo img[data-person="margaret"] { object-position: center 22%; }
.member__photo img[data-person="belinda"]  { object-position: center 22%; }
.member__photo img[data-person="bronwyn"]  { object-position: center 30%; }
.member__photo img[data-person="jacob"]    { object-position: center 24%; }
.member__photo img[data-person="ray"]      { object-position: center 18%; }
.member__photo img[data-person="annette"]  { object-position: center 32%; }

/* Fallback when no photograph exists: flat accent, initials. No gradient. */
.member__photo--initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--paper-on-ink);
  font-family: var(--serif);
  font-size: clamp(72px, 12vw, 132px);
  font-weight: 300;
  letter-spacing: -0.04em;
}

/* ---- The label ----------------------------------------------------------- */
/* A gallery label: the name, then what they do. Black for the primary line,
   grey for the secondary — the reference's own typographic hierarchy. Both
   left-aligned to the photograph's edge, which is the grid line. */
.member__name {
  font-family: var(--display);
  /* 26 Jul 2026: dropped from the §2A.1 H3 clamp to running-body size. At H3 a
     name was the loudest thing in the section and each label competed with the
     face above it; a gallery label names the work, it does not announce it. On
     the scale (--fs-body), not an ad-hoc value. */
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.006em;
  color: var(--ink);
  margin: clamp(18px, 2vw, 22px) 0 0;
  text-wrap: balance;
}
.member__role {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-3);
  margin-top: 8px;
  /* Two lines' worth, always. The reference's rule is that every item's
     secondary content sits at the same height and padding, so the control
     beneath lands on one line across a row instead of stepping up and down
     with the length of each person's title. Roles run one or two lines; none
     runs three. */
  min-height: calc(2 * 1.4em);
}

/* ---- The bio, out of the picture ----------------------------------------- */
/* The bios stay — they are real information about real people — but they are no
   longer inside the tile competing with the photograph. Collapsed by default,
   opened by a quiet text control, and the fade-mask clamp is gone with them:
   nothing is truncated, so nothing needs to be faded out. */
.member__disclose {
  align-self: flex-start;
  margin-top: 14px;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-hairline);
  border-radius: 0;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}
.member__disclose:hover { color: var(--ink); border-bottom-color: var(--ink); }

.member__bio {
  max-width: var(--measure);
  margin-top: 16px;
}
.member__bio p {
  font-family: var(--serif);
  font-size: var(--fs-card);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 0.85em;
}
.member__bio p:last-child { margin-bottom: 0; }

.member__bullets {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-hairline);
}
.member__bullets li {
  font-family: var(--serif);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-hairline);
}
.member__bullets li:last-child { border-bottom: 0; }

/* Benjie, 3 Aug 2026: the sectors were reading as a stack of separate labels;
   she asked for dots between them.
   NOT flex. In a bench column of ~390px the four labels measure 192-355px each,
   so as flex items they take one row apiece and a separator would hang off the
   end of every line. Set as inline text they flow and wrap mid-run, which is
   what makes the dots read as separators inside one line rather than as
   trailing punctuation. The dot is appended to its own label with no whitespace
   before it, so a wrap can never orphan a dot to the start of a line. */
.member__sectors {
  list-style: none;
  display: block;
  margin: 14px 0 0;
  padding: 0;
  line-height: 1.85;
}
.member__sectors li {
  display: inline;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* The middot is the house separator already used by the hero regions line and
   the footer credit. Faint, so it spaces the labels without competing with them.
   letter-spacing is zeroed because the li's 0.13em tracking would otherwise hang
   extra air off the right of the dot and throw the pair off centre. */
.member__sectors li:not(:last-child)::after {
  content: "·";
  margin: 0 0.42em 0 0.52em;
  color: var(--ink-4);
  letter-spacing: 0;
}

/* ---- Links --------------------------------------------------------------- */
/* Quiet text links on a hairline. No pills, no filled buttons, no ring pulse:
   a wall label does not need a call to action. */
.member__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 16px;
}
.member__linkedin,
.member__direct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--rule-hairline);
  border-radius: 0;
  background: none;
  transition: color 200ms ease, border-color 200ms ease;
}
.member__linkedin:hover,
.member__direct:hover { color: var(--accent); border-bottom-color: var(--accent); }

.member__direct-note {
  font-family: var(--serif);
  font-size: var(--fs-small);
  color: var(--ink-3);
  line-height: 1.6;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-hairline);
  max-width: var(--measure);
}

/* Skip-to-content link — visually hidden until focused (a11y) */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 2000;
  background: var(--ink-surface);
  color: var(--paper-on-ink);
  padding: 10px 16px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: var(--fs-chrome);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: top 160ms ease;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--accent); outline-offset: 2px; }

/* Footer / contact */
.contact-cta {
  background: var(--ink-surface);
  color: var(--paper-on-ink);
  padding: clamp(80px, 13vw, 192px) 0;   /* the section rhythm, not a bespoke one (29 Jul 2026) */
  position: relative;
  overflow: hidden;
}
.contact-cta__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.030em;
  margin: 0 0 clamp(24px, 4vw, 48px);
  text-wrap: balance;
}
.contact-cta__title em { font-family: var(--display); font-style: normal; font-weight: inherit; color: inherit; }
.contact-cta__lede { max-width: 56ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: rgba(203, 199, 187, 0.78); margin: 0 0 clamp(28px, 4vw, 40px); }
.contact-cta__email {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 600;
  color: var(--paper-on-ink);
  border-bottom: 1px solid rgba(246, 242, 236, 0.4);
  padding-bottom: 6px;
  letter-spacing: -0.018em;
  transition: border-color 240ms ease, color 240ms ease;
}
.contact-cta__email:hover { color: var(--chip-gold); border-bottom-color: var(--chip-gold); }

.site-foot__brand {
  display: inline-block;
  margin-bottom: 24px;
  /* Wordmark ships light-on-dark (transparent), so it sits on the footer as-is */
}
.site-foot__brand img { width: 160px; height: auto; opacity: 0.95; }
.site-foot {
  background: var(--ink-surface);
  color: rgba(203, 199, 187, 0.6);
  padding: 56px 0 32px;
  border-top: 1px solid rgba(246, 242, 236, 0.10);
}
.site-foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
@media (min-width: 760px) {
  .site-foot__grid { grid-template-columns: 1.7fr 0.9fr 1.1fr; gap: 64px; }
}
.site-foot a { color: rgba(203, 199, 187, 0.78); }
.site-foot a:hover { color: var(--paper-on-ink); }
.site-foot__col h3 { font-family: var(--mono); font-size: var(--fs-kicker); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(203, 199, 187, 0.6); margin: 0 0 16px; font-weight: 400; }
.site-foot__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-foot__col ul a { font-size: var(--fs-small); display: inline-block; padding: 5px 2px; position: relative; }
/* Underline-draw on hover — left-to-right, editorial */
.site-foot__col ul a::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.1, 1);
}
.site-foot__col ul a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .site-foot__col ul a::after { transition: none; } }
.site-foot__colophon li {
  font-family: var(--serif);
  font-size: var(--fs-chrome);
  line-height: 1.55;
  color: rgba(203, 199, 187, 0.6);
  font-weight: 300;
}
.site-foot__colophon li em { font-style: normal; color: rgba(203, 199, 187, 0.8); }
.site-foot__colophon a { color: rgba(203, 199, 187, 0.85); border-bottom: 1px dotted rgba(246, 242, 236, 0.3); }
.site-foot__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(246, 242, 236, 0.10);
  font-size: var(--fs-chrome);
  color: rgba(203, 199, 187, 0.62);
}
@media (min-width: 760px) {
  .site-foot__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.acknowledgement__label {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(203, 199, 187, 0.62);
  margin: 0 0 14px;
  font-weight: 400;
}
.acknowledgement {
  font-size: var(--fs-chrome);
  line-height: 1.5;
  color: rgba(203, 199, 187, 0.6);
  max-width: 64ch;
  margin: 0;
}
.acknowledgement + .acknowledgement { margin-top: 14px; }

/* Inline page heads (non-home pages) */
.page-head {
  padding: calc(var(--header-h) + clamp(56px, 9vw, 120px)) 0 clamp(48px, 7vw, 96px);
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.page-head--ink { background: var(--ink-surface); color: var(--paper-on-ink); border-bottom-color: rgba(246, 242, 236, 0.12); }
.page-head__crumbs {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.page-head--ink .page-head__crumbs { color: rgba(203, 199, 187, 0.62); }
.page-head__crumbs .sep { color: var(--ink-4); }
.page-head__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  margin: 0 0 clamp(20px, 3vw, 32px);
  text-wrap: balance;
}
.page-head__title em { font-family: var(--display); font-style: normal; font-weight: inherit; color: inherit; }
.page-head--ink .page-head__title em { font-family: var(--display); font-style: normal; font-weight: inherit; color: inherit; }
.page-head__lede { max-width: 60ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); }
.page-head--ink .page-head__lede { color: rgba(203, 199, 187, 0.78); }

/* Frameworks list — em-dash editorial list, replaces the four-card grid.
   Sits below the two-col block at full wrap-width. */
/* ===== Leadership Evolution — large-numeral editorial grid (2×2) ===== */
.frameworks-list {
  list-style: none;
  margin: clamp(56px, 8vw, 96px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(44px, 6vw, 68px) clamp(48px, 6vw, 100px);
}
@media (min-width: 760px) {
  .frameworks-list { grid-template-columns: 1fr 1fr; }
}
.frameworks-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* big italic-serif numeral as the anchor for each framework */
.frameworks-list__num {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(54px, 5.6vw, 82px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--accent-deep);
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.frameworks-list__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}
.frameworks-list__body {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
  max-width: 44ch;
}
.section--ink .frameworks-list__title { color: var(--paper-on-ink); }
.section--ink .frameworks-list__body { color: rgba(203, 199, 187, 0.78); }
.section--ink .frameworks-list__num { color: var(--chip-gold); }

/* Leadership Evolution + Philosophy + Practices — cinematic dark + atmospheric, glowing numerals */
#practices, #leadership, #philosophy { position: relative; isolation: isolate; }
/* The gold atmospheric wash over Leadership and Philosophy is retired (WI-1,
   26 Jul 2026). It was three stacked radial gradients doing decorative work on
   an already-dark ground: an embellishment by the §1 definition, and the last
   large gold field on the site. The ink ground and the type carry these
   sections now. Do not reintroduce an atmospheric layer here. */
#practices > .wrap, #leadership > .wrap, #philosophy > .wrap { position: relative; z-index: 1; }
#leadership .display-2 { color: var(--paper-on-ink); }
#leadership .lede { color: rgba(203, 199, 187, 0.74); }
/* Gold numeral, no glow: gold is a numeral device, and a drop-shadow halo is
   the kind of embellishment §1 rules out. */
#leadership .frameworks-list__num { color: var(--chip-gold); }

/* Leadership Evolution — four discipline boxes (dark-section cards) */
.le-boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: clamp(36px, 4.5vw, 60px);
}
@media (min-width: 720px) { .le-boxes { grid-template-columns: 1fr 1fr; gap: 20px; } }
.le-box {
  background: var(--paper-bright);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  padding: clamp(28px, 2.8vw, 42px);
  box-shadow: var(--shadow-1);
  transition: border-color 360ms ease, box-shadow 360ms ease, transform 360ms ease;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(22px, 2.6vw, 36px);
  align-items: start;
}
.le-box:hover {
  border-color: rgba(35, 76, 80, 0.4);
  box-shadow: var(--shadow-3);
  transform: translateY(-3px);
}
.le-box__num {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: start;
  font-family: var(--serif-accent);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(40px, 4vw, 58px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin: 0;
  padding-right: clamp(20px, 2.4vw, 34px);
  border-right: 1px solid var(--rule-hairline);
}
.le-box__title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--serif-accent);
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 23px);
  letter-spacing: -0.014em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 12px;
}
.le-box__body { grid-column: 2; grid-row: 2; }
.le-box__body {
  font-family: var(--serif);
  font-weight: 540;
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

/* ===== Practices — DARK CINEMATIC cards (oil-slick green ground, warm numerals; no purple) ===== */
/* Practices is a LIGHT section (2027) — a subtly recessed warm-paper ground so
   it reads distinct from the dark statement sections and from the plain-paper
   sections around it; the bright cards lift off it. */
.section--practices-light { background: var(--paper-2); }
#practices .display-2 { color: var(--ink); }
#practices .lede { color: var(--ink-2); }
/* cards float over the warm dark ground: faint light-film panel, hairline border */
/* Cream cards on the green ground — high contrast (Jul 2026: green-on-green retired) */
#practices .practice-row {
  background: var(--paper-bright);
  border: 1px solid var(--rule-soft);
  box-shadow: var(--shadow-1);
}
#practices .practice-row:hover {
  border-color: rgba(35, 76, 80, 0.4);
  box-shadow: var(--shadow-3);
  transform: translateY(-3px);
}
#practices .practice-row__num {
  color: var(--accent);
  text-shadow: none;
}
#practices .practice-row:hover .practice-row__num {
  color: var(--accent-deep);
  text-shadow: none;
}
#practices .practice-row__body { border-top-color: var(--rule-hairline); }
#practices .practice-row:hover .practice-row__body { border-top-color: var(--rule-hairline); }
#practices .practice-row__title { color: var(--ink); }
#practices .practice-row__title em { color: inherit; }
#practices .practice-row__lede { color: var(--ink-2); }

/* IP Set — three integrated instruments, deeper treatment */
.ip-intro { margin-top: 8px; }
.ip-intro__kicker {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chip-gold);
  font-weight: 500;
  margin-bottom: 14px;
}
.ip-intro__lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--paper-on-ink);
  max-width: 64ch;
  margin: 0 0 clamp(40px, 5vw, 56px);
  text-wrap: pretty;
}
/* Editorial slabs — replaces the three-card chrome.
   Full-width vertical slabs separated by a hairline rule.
   No accent-wash background, no rounded corners, no card frame. */
.ip-slabs {
  list-style: none;
  padding: 0;
  margin: clamp(40px, 5vw, 64px) 0 0;
  display: flex;
  flex-direction: column;
}
.ip-slab {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 40px);
  padding: clamp(40px, 5vw, 68px) 0;
  border-top: 1px solid rgba(246, 242, 236, 0.12);
}
.ip-slab:last-child { border-bottom: 1px solid rgba(246, 242, 236, 0.12); }
@media (min-width: 880px) {
  .ip-slab {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
}
.ip-slab__lead { max-width: 46ch; }
.ip-slab__numeral {
  display: block;
  font-family: var(--serif-accent);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(56px, 6vw, 96px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--chip-gold);
  margin-bottom: 20px;
}
/* Editorial numerals are upright, not italic (2027 refinement — applies to
   every 01/02/03 numeral: About principles, Practices, Philosophy frameworks,
   Leadership Evolution boxes, and IP slabs). */
.principle-card__num,
.practice-row__num,
.frameworks-list__num,
.le-box__num,
.impact__num,
.ip-slab__numeral { font-style: normal; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.ip-slab__kicker {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(203, 199, 187, 0.6);
  font-weight: 600;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(246, 242, 236, 0.16);
}
.ip-slab__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--paper-on-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.ip-slab__lede {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: rgba(203, 199, 187, 0.82);
  margin: 0;
  text-wrap: pretty;
}
.ip-slab__exhibit { display: flex; justify-content: center; min-width: 0; }
.ip-slab__exhibit .gtt-fig { max-width: 100%; margin: 0; }
.ip-slab__list { margin: 0 0 24px; padding: 0; border-top: 1px solid rgba(246, 242, 236, 0.10); }
.ip-slab__list > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(246, 242, 236, 0.08);
}
@media (min-width: 720px) {
  .ip-slab__list > div { grid-template-columns: minmax(180px, 26%) 1fr; column-gap: 24px; align-items: baseline; }
}
.ip-slab__list dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: -0.005em;
  color: var(--paper-on-ink);
  margin: 0;
}
.ip-slab__list dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: rgba(203, 199, 187, 0.7);
}
.ip-slab__list dd em { font-family: var(--serif); font-style: normal; color: var(--chip-gold); }
.ip-slab__dims {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  counter-reset: dim;
}
@media (min-width: 720px) { .ip-slab__dims { grid-template-columns: repeat(4, 1fr); } }
.ip-slab__dims li {
  counter-increment: dim;
  padding: 13px 12px 14px;
  background: rgba(242, 240, 239, 0.045);
  border: 1px solid rgba(242, 240, 239, 0.14);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-chrome);
  letter-spacing: 0.005em;
  color: rgba(242, 240, 239, 0.92);
}
.ip-slab__dims li::before {
  content: counter(dim, decimal-leading-zero);
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  color: #C97A6E;
}
.ip-slab__verdict {
  padding-top: 16px;
  border-top: 1px solid rgba(246, 242, 236, 0.10);
  margin-bottom: 24px;
}
.ip-slab__verdict-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chip-gold);
  font-weight: 500;
  margin-bottom: 12px;
}
.ip-slab__verdict-modes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  counter-reset: vmode;
}
.ip-slab__verdict-modes li {
  counter-increment: vmode;
  padding: 10px 0;
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(203, 199, 187, 0.86);
  border-bottom: 1px dotted rgba(246, 242, 236, 0.14);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.ip-slab__verdict-modes li::before {
  content: "M" counter(vmode, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.10em;
  color: rgba(203, 199, 187, 0.62);
  flex: 0 0 auto;
}
.ip-slab__verdict-modes li:last-child { border-bottom: none; }
.ip-slab__foot {
  font-family: var(--serif);
  font-style: normal;
  font-size: var(--fs-card);
  line-height: 1.55;
  color: rgba(203, 199, 187, 0.7);
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(246, 242, 236, 0.10);
}
.ip-slab__foot em { font-style: normal; }   /* v4.1: no italics; matches .ip-slab__list dd em above */

/* ===== IP-instrument exhibits — Governance Tension · Twenty-Year Horizon · Sustainability Frame.
   Light editorial exhibit panels (cream ground, ink type, terracotta focal core) that sit on the
   dark-green statement section at full contrast. One considered "consulting exhibit" family. ===== */
/* ===== IP-instrument exhibits — McKinsey-style: flat white, labelled masthead, sourced, all-sans, restrained ===== */
.gtt-fig {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 14px auto 6px;
  background: var(--paper-bright);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-1);
  padding: 24px 30px 20px;
}
/* Exhibit masthead: small label, a one-line takeaway title, a firm rule under */
.gtt-fig__head {
  display: block;
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1.5px solid var(--ink);
}
.gtt-fig__tag {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-kicker); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 7px;
}
.gtt-fig__desc {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(14px, 1.2vw, 16px); letter-spacing: -0.01em; line-height: 1.25;
  color: var(--ink);
}
.gtt-fig__src {
  font-family: var(--display); font-weight: 500;
  font-size: var(--fs-caption); letter-spacing: 0.02em;
  color: var(--ink-3); /* AA: see the caption note lower in this file */
  margin-top: 18px; padding-top: 11px;
  border-top: 1px solid var(--rule-hairline);
}
.gtt-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.gtt-node { cursor: default; }
.gtt-edge  { stroke: var(--rule-hairline); stroke-width: 1; stroke-dasharray: 2 5; }
.gtt-spoke { stroke: var(--accent); stroke-width: 1.4; stroke-opacity: 0.85; }
.gtt-node-c { fill: var(--paper-deep); stroke: var(--rule); stroke-width: 1; transition: stroke .22s ease, fill .22s ease; }
.gtt-node:hover .gtt-node-c { stroke: var(--accent); fill: var(--paper-tint); }
.gtt-core   { fill: var(--accent); }
.gtt-force    { font-family: var(--display); font-weight: 700; font-size: var(--fs-exhibit-lbl); letter-spacing: 0.14em; fill: var(--ink-3); }
.gtt-name     { font-family: var(--display); font-weight: 700; font-size: var(--fs-exhibit-name); letter-spacing: -0.014em; fill: var(--ink); }
.gtt-desc     { font-family: var(--display); font-weight: 500; font-size: var(--fs-chrome); letter-spacing: -0.004em; fill: var(--ink-3); }
.gtt-trust    { font-family: var(--display); font-weight: 700; font-size: var(--fs-exhibit-num, 40px); letter-spacing: -0.02em; fill: var(--paper); font-variant-numeric: tabular-nums; }
.gtt-core-lbl { font-family: var(--display); font-weight: 700; font-size: var(--fs-exhibit-lbl); letter-spacing: 0.18em; fill: rgba(247, 245, 240, 0.82); }
.gtt-tension  { font-family: var(--display); font-weight: 600; font-size: var(--fs-exhibit-lbl); letter-spacing: 0.2em; fill: var(--ink-3); }
/* Horizon + Sustainability shared marks */
.gtt-axis   { stroke: var(--rule); stroke-width: 1.2; stroke-dasharray: 2 5; }
.gtt-arrow  { fill: var(--accent); }
.gtt-dot    { fill: var(--ink-4); }
.gtt-dot--hi{ fill: var(--accent); }
.gtt-dim    { font-family: var(--display); font-weight: 600; font-size: var(--fs-small); letter-spacing: -0.006em; fill: var(--ink-2); }
.gtt-dim--hi{ fill: var(--accent); font-weight: 700; }
.gtt-dim-idx{ font-family: var(--display); font-weight: 600; font-size: var(--fs-caption); letter-spacing: 0.1em; fill: var(--ink-3); }

/* ===== IP instruments carousel (one instrument at a time) ===== */
.ip-carousel { margin: clamp(40px, 5vw, 64px) 0 0; }
.ip-carousel__viewport { overflow: hidden; transition: height 480ms cubic-bezier(0.4, 0, 0.1, 1); }
.ip-carousel__track {
  list-style: none; padding: 0; margin: 0;
  display: flex;
  transition: transform 560ms cubic-bezier(0.4, 0, 0.1, 1);
}
.ip-carousel__slide { flex: 0 0 100%; min-width: 0; align-self: start; }
/* slab inside the carousel: drop the list dividers */
.ip-carousel .ip-slab { border: 0; padding: 4px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .ip-carousel__viewport, .ip-carousel__track { transition: none; }
}
.ip-carousel__controls {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  margin-top: clamp(28px, 4vw, 44px);
}
.ip-carousel__arrow {
  width: 48px; height: 48px; border-radius: 999px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(246, 242, 236, 0.22);
  color: var(--paper-on-ink);
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.ip-carousel__arrow:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.ip-carousel__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ip-carousel__arrow svg { width: 16px; height: 16px; }
.ip-carousel__arrow--prev svg { transform: rotate(180deg); }
.ip-carousel__dots { display: flex; align-items: center; gap: 10px; }
.ip-carousel__dot {
  width: 9px; height: 9px; border-radius: 999px; padding: 0;
  background: rgba(246, 242, 236, 0.24);
  border: 0; cursor: pointer;
  transition: background 240ms ease, width 240ms ease;
}
.ip-carousel__dot.is-active { background: var(--accent-soft); width: 26px; }
.ip-carousel__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ip-carousel__arrow:hover { transform: none; } }

/* Pull-quote — Spectral 400, upright, editorial pull-quotes only. Both specs
   this comment used to carry are retired: the italic setting (canonical v4.1)
   and the indigo left-border accent (the rule is a neutral hairline now). */
.pullquote {
  font-family: var(--serif-accent);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.014em;
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
  padding-left: clamp(20px, 2.4vw, 32px);
  /* §2A.4, 26 Jul 2026: 1px, like every other rule in the system. The quote
     is carried by its measure, its face and its size, not by the weight of
     the line beside it. */
  border-left: 1px solid var(--rule);
}
.pullquote em { font-style: normal; color: var(--accent-deep); }
.section--ink .pullquote { color: var(--paper-on-ink); border-left-color: rgba(203, 199, 187, 0.35); }
.section--ink .pullquote em { color: var(--chip-gold); }
.pullquote__attr { display: block; font-family: var(--mono); font-size: var(--fs-kicker); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 24px; font-style: normal; font-weight: 400; }
.section--ink .pullquote__attr { color: rgba(203, 199, 187, 0.62); }

/* Photo splits */
.photo-split { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 920px) { .photo-split { grid-template-columns: 1fr 1fr; } }
.photo-split__img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--paper-2);
}
.photo-split__img img { width: 100%; height: 100%; object-fit: cover; }
.photo-split__credit {
  position: absolute;
  bottom: 8px; left: 8px;
  font-family: var(--mono);
  font-size: var(--fs-exhibit-lbl);
  letter-spacing: 0.12em;
  color: rgba(203, 199, 187, 0.7);
  text-transform: uppercase;
  background: rgba(14, 17, 22, 0.4);
  padding: 4px 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Perspectives — three posts, one row at desktop. Stack on tablet/mobile to avoid empty cells. */
.posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(40px, 6vw, 72px);
}
@media (min-width: 880px) { .posts { grid-template-columns: repeat(3, 1fr); } }
/* Each post is wrapped in a .reveal grid item that stretches to the tallest in
   the row; make the wrapper a flex container so the .post card fills it and all
   three cards read as one size on desktop. */
.posts > .reveal { display: flex; }
.posts > .reveal > .post { width: 100%; }
.post {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  padding: clamp(28px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 420ms ease, border-color 240ms ease;
  color: var(--ink);
}
.post:hover { transform: translateY(-4px); border-color: rgba(35, 76, 80, 0.4); box-shadow: var(--shadow-3); }
.post--paper { background: var(--paper-tint); }
.post--wash { background: var(--accent-wash); }
/* Flat ink card. The three-stop green ramp and the corner radial that sat over
   it are retired (WI-1) — a card is a surface, not a light source. */
.post--dark {
  background: var(--ink-surface-2);
  color: var(--paper-on-ink);
}
.post--dark > * { position: relative; z-index: 1; }
.post--dark .post__title { color: var(--paper-on-ink); }
.post--dark .post__excerpt { color: rgba(239, 234, 224, 0.78); }
.post--dark .post__meta { color: rgba(239, 234, 224, 0.55); }
.post--dark .post__cta { color: var(--chip-gold); }
.post__meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--fs-kicker); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 16px; border-bottom: 1px solid var(--rule-hairline); }
.post--dark .post__meta { border-bottom-color: rgba(239, 234, 224, 0.18); }
.post__title { font-family: var(--serif-accent); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.16; letter-spacing: -0.022em; }
.post__title em { font-family: var(--display); font-style: normal; font-weight: inherit; color: inherit; }
.post__excerpt { font-size: var(--fs-card-lg); font-weight: 540; line-height: 1.56; color: var(--ink-2); margin-top: auto; }
.post__cta { font-family: var(--mono); font-size: var(--fs-kicker); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.post__cta svg { transition: transform 240ms cubic-bezier(0.2, 0.7, 0.1, 1); }
.post:hover .post__cta svg { transform: translateX(5px); }

/* Founding-principle callout — lavender accent-wash, two-column */
.callout {
  background: var(--accent-wash);
  border: 1px solid var(--rule-hairline); /* was rgba(42,36,131,.14) — retired indigo */
  border-radius: var(--radius-card);
  padding: clamp(32px, 3.8vw, 52px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: clamp(32px, 4vw, 48px);
}
@media (min-width: 760px) {
  .callout { grid-template-columns: 0.82fr 1.18fr; gap: 0; align-items: start; }
  .callout > div:first-child { padding-right: clamp(32px, 4vw, 56px); }
  .callout__body { border-left: 1px solid var(--rule); /* was rgba(42,36,131,.22) — retired indigo */ padding-left: clamp(32px, 4vw, 56px); padding-top: 0; }
}
.callout__eyebrow { font-family: var(--mono); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.callout__title { font-family: var(--serif-accent); font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.024em; line-height: 1.03; color: var(--ink); margin: 14px 0 0; }
.callout__title em { font-family: var(--display); font-style: normal; font-weight: inherit; color: inherit; }
.callout__body { font-family: var(--serif); font-weight: 540; font-size: var(--fs-callout); line-height: 1.55; color: var(--ink-2); }

/* Form */
.form { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } }
.form__row--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--mono); font-size: var(--fs-kicker); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea, .field select {
  font-family: var(--sans);
  font-size: var(--fs-card-lg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 0;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 200ms ease;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--accent); }
.field textarea { resize: vertical; min-height: 120px; }

/* Misc */
.bridge-rule {
  display: block;
  height: 1px;
  background: var(--line-soft);
  position: relative;
  margin: clamp(40px, 6vw, 80px) 0;
}
.bridge-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── View-all link (Perspectives → Blog) ─────────────── */
.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 16px 22px 16px 0;
  border-bottom: 1px solid var(--ink);
  transition: gap 220ms ease, color 220ms ease;
}
.view-all-link svg { transition: transform 220ms ease; }
.view-all-link:hover { gap: 22px; color: var(--accent); }
.view-all-link:hover svg { transform: translateX(4px); }
/* AUDIT 26 Jul 2026 (§4.7 contrast). The rule above was written for the Perspectives
   section, which sits on paper, and takes --ink for its text and its underline. The
   same component was later reused for "Full program details" inside #leadership,
   which is a .section--ink — so ink type sat on the oil-slick ink ground at 1:1 and
   the link was invisible. Every other component in this stylesheet already carries a
   .section--ink variant; this one had been missed. Hover goes to --chip-gold rather
   than --accent, because the teal accent on the ink ground is only 2.3:1. */
.section--ink .view-all-link { color: var(--paper-on-ink); border-bottom-color: rgba(203, 199, 187, 0.45); }
.section--ink .view-all-link:hover { color: var(--chip-gold); border-bottom-color: var(--chip-gold); }

/* ── Sector Intelligence — the public data platform on the front page ── */
/* The faint "data-cell" grid texture that used to sit behind this section was
   retired on 23 Jul 2026 (de-slop pass) and its rules are removed here (WI-1,
   26 Jul) — they were dead weight carrying repeating gradients that the QA
   grep would keep finding. The section is hairline rules on plain paper. */
#sector-intelligence { position: relative; isolation: isolate; }
#sector-intelligence > .wrap { position: relative; z-index: 1; }

.sector-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: clamp(48px, 6vw, 80px);
}
@media (min-width: 680px) {
  .sector-stats { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.sector-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(26px, 3vw, 34px);
  background: var(--paper-tint);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card-sm);
  box-shadow: 0 1px 2px rgba(20, 17, 13, .04), 0 10px 24px -14px rgba(20, 17, 13, .35);
  transition: transform 400ms ease, box-shadow 400ms ease;
}
.sector-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20, 17, 13, .05), 0 18px 34px -16px rgba(20, 17, 13, .45);
}
.sector-stat__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 58px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.sector-stat__label {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.sector-intel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
}
.sector-intel__cta {
  color: var(--paper-on-ink);
  border-bottom-color: rgba(246, 242, 236, 0.4);
}
.sector-intel__beta {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(203, 199, 187, 0.62);
}

/* ── Blog index page ────────────────────────────────── */
.blog-page { background: var(--paper); }
.blog-hero {
  padding: clamp(140px, 18vw, 200px) 0 clamp(64px, 8vw, 96px);
  border-bottom: 1px solid var(--line-soft);
}
.blog-hero__eyebrow { margin-bottom: 24px; }
.blog-hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 7.2vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.006em;
  color: var(--ink);
  margin: 0;
  max-width: 14ch;
}
/* AUDIT 26 Jul 2026: canonical v4.1 retired italics outright — Spectral carries the
   serif accent register upright. Every other em-in-a-heading rule in this stylesheet
   (.h2 em, .h3 em, .hero__title em, .practice-row__title em) already sets
   font-style: normal; the blog hero title had been left behind, so one heading on the
   site rendered in Spectral Italic. */
.blog-hero__title em {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 300;
  font-size: 1.08em;
  letter-spacing: -0.020em;
  color: var(--accent-deep);
}
.blog-hero__lede {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin: clamp(32px, 4vw, 48px) 0 0;
}

.blog-list {
  padding: clamp(64px, 8vw, 112px) 0 clamp(96px, 12vw, 160px);
}
.blog-list__items {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.blog-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background 240ms ease, padding-left 240ms ease;
}
.blog-row:hover { background: var(--paper-2); padding-left: 16px; padding-right: 16px; }
.blog-row__num {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 8px;
}
.blog-row__main { display: flex; flex-direction: column; gap: 16px; }
.blog-row__meta {
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.blog-row__meta span:first-child { color: var(--accent); }
.blog-row__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  /* 24ch stopped a 44px title at 645px inside a 1006px row and left a third of the row empty
     (28 Jul 2026, Benjie). A heading is not body copy: it has no measure to protect, because
     nobody reads a title across many lines. It runs to the column and ends where the words end. */
  transition: color 220ms ease;
}
.blog-row:hover .blog-row__title { color: var(--accent); }
.blog-row__title em { font-family: var(--display); font-style: normal; font-weight: inherit; color: inherit; }
.blog-row__excerpt {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
}
.blog-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding-top: 4px;
}
.blog-row__cta svg { transition: transform 220ms ease; }
.blog-row:hover .blog-row__cta svg { transform: translateX(4px); }

@media (max-width: 720px) {
  .blog-row { grid-template-columns: 1fr; gap: 12px; }
  .blog-row__num { padding-top: 0; }
}

/* ── Blog post page ─────────────────────────────────── */
.post-hero {
  padding: clamp(140px, 18vw, 200px) 0 clamp(48px, 6vw, 72px);
  border-bottom: 1px solid var(--line-soft);
}
.post-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  margin-bottom: 40px;
  transition: color 200ms ease, gap 200ms ease;
}
.post-hero__back:hover { color: var(--accent); gap: 16px; }
.post-hero__back svg { width: 14px; height: 14px; transform: rotate(180deg); transition: transform 220ms ease; }
.post-hero__back:hover svg { transform: rotate(180deg) translateX(-4px); }
.post-hero__meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.post-hero__meta span:first-child { color: var(--accent); }
.post-hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.post-hero__title em { font-family: var(--display); font-style: normal; font-weight: inherit; color: inherit; }
.post-hero__byline {
  margin-top: clamp(40px, 5vw, 56px);
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.post-body {
  padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 128px);
  max-width: 720px;
  margin: 0 auto;
}
.post-body p {
  font-family: var(--serif);
  font-size: var(--fs-article);
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 1.4em;
  text-wrap: pretty;
}
.post-body p:first-child::first-letter {
  font-family: var(--display);
  font-weight: 700;
  font-size: 4.2em;
  line-height: 0.86;
  float: left;
  padding: 6px 14px 0 0;
  color: var(--accent);
}
.post-body p:first-child::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}
.post-body .post-h2 {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--ink);
  margin: 2.2em 0 0.6em;
  text-wrap: balance;
}
.post-body .post-h3 {
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 1.6em 0 0.4em;
}
/* AUDIT 26 Jul 2026: pull-quotes are Spectral upright under canonical v4.1. */
.post-body .post-quote {
  font-family: var(--serif);
  font-style: normal;
  font-size: var(--fs-article-q);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 1.6em 0;
  padding: 0 0 0 24px;
  border-left: 3px solid var(--rule); /* 2027: neutral hairline, indigo left-border retired */
}

/* Embedded PDF block — shown when a POST has a `pdf` field */
.post-pdf {
  margin: clamp(48px, 6vw, 72px) auto clamp(64px, 8vw, 96px);
  max-width: 1100px;
}
.post-pdf__label {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 20px;
}
.post-pdf__frame-wrap {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  /* aspect ratio matches A4 portrait: width / sqrt(2) — leaves room for browser PDF chrome */
  aspect-ratio: 1 / 1.35;
  max-height: 90vh;
}
.post-pdf__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--paper-bright);
}
.post-pdf__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.post-pdf__download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--fs-chrome);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: gap 220ms ease, color 220ms ease;
}
.post-pdf__download:hover { gap: 14px; color: var(--accent-deep); }
.post-pdf__download svg { width: 14px; height: 14px; }
.post-pdf__size {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.post-pdf__fallback {
  font-size: var(--fs-chrome);
  line-height: 1.5;
  color: var(--ink-3);
  margin-top: 12px;
}
.post-pdf__fallback a { color: var(--accent); border-bottom: 1px solid currentColor; }
@media (max-width: 720px) {
  .post-pdf__frame-wrap { aspect-ratio: 1 / 1.6; }
}

/* Other posts at the end of an article */
.post-related {
  border-top: 1px solid var(--line);
  padding: clamp(64px, 8vw, 96px) 0;
}
.post-related__label {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 32px;
}
.post-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 720px) { .post-related__grid { grid-template-columns: 1fr 1fr; } }
.post-related__item {
  background: var(--paper);
  padding: 32px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 220ms ease;
}
.post-related__item:hover { background: var(--paper-2); }
.post-related__item-tag {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.post-related__item-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-article-t);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}

/* =====================================================================
   UNIFIED HOVER GLOW — every card / box across the site lights up with a
   neutral ink glow on hover (indigo retired). Placed last so it wins the cascade over
   each box's original neutral-shadow hover. Existing lift transforms on
   .impact / .member / .post are preserved (set in their own :hover rules).
   Accent bars removed; glow is the single shared hover language now.
   ===================================================================== */
.callout {
  box-shadow: 0 1px 2px rgba(20, 17, 13, 0.03), 0 8px 24px -14px rgba(20, 17, 13, 0.10);
  transition: box-shadow 380ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 320ms ease, transform 380ms ease;
}
/* light boxes — neutral ink glow lifting off the cream */
.impact:hover,
/* .member removed (WI-2, 26 Jul 2026): the bench is a gallery wall, not a set
   of light boxes. It has no border and no shadow for this rule to lift. */
.post--paper:hover,
.post--wash:hover,
.callout:hover,
.principle-card:hover {
  border-color: rgba(20, 17, 13, 0.22);
  box-shadow:
    0 1px 2px rgba(20, 17, 13, 0.04),
    0 18px 40px -18px rgba(20, 17, 13, 0.28),
    0 6px 16px -8px rgba(20, 17, 13, 0.16);
}
.callout:hover { transform: translateY(-2px); }
/* dark boxes — brighter neutral ink glow */
.post--dark:hover {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.30),
    0 34px 80px -22px rgba(20, 17, 13, 0.55),
    0 12px 32px -16px rgba(20, 17, 13, 0.40);
}
@media (prefers-reduced-motion: reduce) {
  .callout, .callout:hover { transform: none; }
}

/* While the page is scrolling, suppress card hover so the boxes don't "pulse"
   as they pass under a stationary cursor (the glow would otherwise flick
   on/off). pointer-events restore the instant scrolling stops, so resting the
   cursor on a card still glows normally. */
body.is-scrolling .impact,
body.is-scrolling .post,
body.is-scrolling .callout,
body.is-scrolling .principle-card,
body.is-scrolling .practice-row,
body.is-scrolling .about-feature__portrait {
  pointer-events: none;
}


/* =====================================================================
   23 Jul 2026 refinement pass (Benjie) — full-measure copy, Cormorant box
   titles at corrected optical sizes, University Intelligence light cards.
   ===================================================================== */

/* 24 Jul 2026 (brand brief §5.2): body copy is left-aligned, ragged-right,
   hyphenation off — justification produced rivers. Supersedes the 23 Jul
   justify pass. */
.about-body p, .body, .principle-card__body, .practice-row__lede, .impact__body,
.le-box__body, .ip-slab__lede, .callout__body, .member__bio, .post__excerpt,
.contact-cta__lede, .lede, .acknowledgement, .intel-card__body {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Cormorant box titles — optical size correction for the serif. */
.principle-card__title { font-size: clamp(23px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.006em; }
.practice-row__title  { font-size: clamp(25px, 2.3vw, 31px); font-weight: 600; letter-spacing: -0.008em; }
.impact__title        { font-size: clamp(23px, 2.5vw, 30px); font-weight: 600; letter-spacing: -0.008em; }
.le-box__title        { font-size: clamp(22px, 2vw, 27px);   font-weight: 600; letter-spacing: -0.006em; }
.callout__title       { font-size: clamp(33px, 3.9vw, 50px); font-weight: 600; letter-spacing: -0.01em; }
.post__title          { font-size: clamp(25px, 2.9vw, 34px); font-weight: 600; letter-spacing: -0.008em; }

/* Philosophy — editorial slab list replaces the carousel; all four IP
   instruments visible, hairline-separated. Slab styles are the .ip-slab
   family above; the stewardship slab lists its three levels. */
.ip-slab__levels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(246, 242, 236, 0.14);
}
.ip-slab__levels li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(246, 242, 236, 0.10);
  font-family: var(--serif-accent);
  font-weight: 500;
  font-size: clamp(19px, 1.7vw, 24px);
  color: var(--paper-on-ink);
}
.ip-slab__levels li span {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(203, 199, 187, 0.62);
  flex: 0 0 84px;
}

#sector-intelligence .sector-intel__foot { margin-top: clamp(32px, 4vw, 48px); }
#sector-intelligence .sector-intel__cta { color: var(--ink); border-bottom-color: var(--rule); }
#sector-intelligence .sector-intel__beta { color: var(--ink-3); }


/* =====================================================================
   23 Jul 2026 PM revision (Benjie) — black About boxes, 3-across Impact,
   dark blueprint exhibits, the sector ledger, and chapter bars that make
   every section read as its own clearly-bounded page.
   ===================================================================== */

/* Chapter bar — a firm rule + "N — Section name" label at the top of every
   numbered section. Each section opens like its own page. */
.section[data-num]::before {
  content: attr(data-num) "  —  " attr(data-screen-label);
  display: block;
  position: static;
  inset: auto;
  max-width: var(--max);
  margin: 0 auto clamp(40px, 5vw, 72px);
  padding: 14px var(--gutter) 0;
  font-family: var(--mono);
  font-size: var(--fs-chrome);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-3);
  opacity: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.section[data-num] {
  border-top: 1px solid var(--rule);
}
.section--ink[data-num] { border-top-color: rgba(246, 242, 236, 0.22); }
.section--ink[data-num]::before { color: rgba(203, 199, 187, 0.6); }

/* About — the boxes go to the black style: warm-black chip ground,
   chip-gold numerals, paper type. */
#about .callout {
  background: var(--ink-chip);
  border-color: rgba(246, 242, 236, 0.10);
}
#about .callout__eyebrow { color: var(--chip-gold); }
#about .callout__title { color: var(--paper-on-ink); }
#about .callout__body { color: rgba(203, 199, 187, 0.82); }
@media (min-width: 760px) {
  #about .callout__body { border-left-color: rgba(246, 242, 236, 0.18); }
}
#about .principle-card {
  background: var(--ink-chip);
  border-color: rgba(246, 242, 236, 0.10);
}
#about .principle-card:hover,
#about .callout:hover {
  border-color: rgba(246, 242, 236, 0.28);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.30),
    0 24px 56px -20px rgba(20, 17, 13, 0.55);
}
#about .principle-card__num {
  color: var(--chip-gold);
  border-bottom-color: rgba(246, 242, 236, 0.16);
}
#about .principle-card__title { color: var(--paper-on-ink); }
#about .principle-card__body { color: rgba(203, 199, 187, 0.80); }

/* Impact — three across on desktop. */
@media (min-width: 1100px) {
  .impact-list { grid-template-columns: repeat(3, 1fr); }
}

/* IP exhibits — dark blueprint redesign. The white consulting card is
   retired; exhibits now sit natively on the statement ground: hairline
   frame, paper linework, chip-gold focal core. */
.gtt-fig {
  background: rgba(242, 240, 239, 0.03);
  border: 1px solid rgba(246, 242, 236, 0.16);
  border-radius: var(--radius-card-sm);
  box-shadow: none;
}
.gtt-fig__head { border-bottom-color: rgba(246, 242, 236, 0.35); }
.gtt-fig__tag { color: var(--chip-gold); }
.gtt-fig__desc { color: var(--paper-on-ink); }
/* Same audit, dark ground: paper-on-ink at 45% is 3.12:1 against #031602,
   below AA. At 72% it is 6.4:1 and still reads as a quiet caption. */
.gtt-fig__src { color: rgba(203, 199, 187, 0.72); border-top-color: rgba(246, 242, 236, 0.14); }
.gtt-edge  { stroke: rgba(246, 242, 236, 0.28); }
.gtt-spoke { stroke: var(--chip-gold); stroke-opacity: 0.9; }
.gtt-node-c { fill: rgba(242, 240, 239, 0.05); stroke: rgba(246, 242, 236, 0.38); }
.gtt-node:hover .gtt-node-c { stroke: var(--chip-gold); fill: rgba(212, 175, 103, 0.08); }
.gtt-core { fill: var(--chip-gold); }
.gtt-force    { fill: rgba(203, 199, 187, 0.55); }
.gtt-name     { fill: var(--paper-on-ink); }
.gtt-desc     { fill: rgba(203, 199, 187, 0.65); }
.gtt-trust    { fill: var(--ink-chip); }
.gtt-core-lbl { fill: rgba(20, 17, 13, 0.72); }
.gtt-tension  { fill: rgba(203, 199, 187, 0.42); }
.gtt-axis   { stroke: rgba(246, 242, 236, 0.30); }
.gtt-arrow  { fill: var(--chip-gold); }
.gtt-dot    { fill: rgba(203, 199, 187, 0.45); }
.gtt-dot--hi{ fill: var(--chip-gold); }
.gtt-dim    { fill: rgba(203, 199, 187, 0.8); }
.gtt-dim--hi{ fill: var(--chip-gold); }
.gtt-dim-idx{ fill: rgba(203, 199, 187, 0.5); }

/* University Intelligence — the sector ledger. Two dark statement panels
   butted together, each led by a giant Cormorant numeral and read as
   hairline ledger rows, echoing the dashboards themselves. */
.ledger {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(246, 242, 236, 0.18);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: clamp(44px, 5.5vw, 72px);
  box-shadow: var(--shadow-2);
}
@media (min-width: 880px) { .ledger { grid-template-columns: 1fr 1fr; } }
.ledger__panel {
  background: var(--surface-dark);
  color: var(--paper-on-ink);
  padding: clamp(32px, 3.6vw, 56px);
  display: flex;
  flex-direction: column;
}
.ledger__panel + .ledger__panel { background: var(--surface-dark-2); }
.ledger__region {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chip-gold);
  padding-bottom: 16px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid rgba(246, 242, 236, 0.16);
}
.ledger__figure {
  font-family: var(--serif-accent);
  font-weight: 500;
  font-style: normal;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: clamp(88px, 9vw, 148px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.ledger__figure-label {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.4;
  color: rgba(203, 199, 187, 0.78);
  margin: 14px 0 clamp(24px, 3vw, 36px);
  max-width: 30ch;
}
.ledger__rows {
  margin: 0 0 clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(246, 242, 236, 0.14);
}
.ledger__rows > div {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  column-gap: 20px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(246, 242, 236, 0.10);
}
.ledger__rows dt {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(203, 199, 187, 0.62);
  margin: 0;
}
.ledger__rows dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.005em;
  color: var(--paper-on-ink);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}
.ledger__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chip-gold);
  padding: 14px 0 6px;
  border-bottom: 1px solid rgba(212, 175, 103, 0.5);
  transition: gap 220ms ease, color 220ms ease, border-color 220ms ease;
}
.ledger__cta:hover { gap: 18px; color: var(--paper); border-bottom-color: var(--paper); }
.ledger__cta svg { transition: transform 220ms ease; }
.ledger__cta:hover svg { transform: translateX(4px); }
#sector-intelligence .sector-intel__cta { color: var(--ink); border-bottom-color: var(--rule); }
#sector-intelligence .sector-intel__beta { color: var(--ink-3); }
#sector-intelligence .sector-intel__foot { margin-top: clamp(32px, 4vw, 48px); }

/* 23 Jul 2026 (Benjie): numerals on light grounds set in terracotta deep
   #7C3A1E (~7:1 on cream). Dark-ground numerals stay chip-gold. */
.practice-row__num,
#practices .practice-row__num,
.impact__num,
.le-box__num,
.frameworks-list__num,
.intel-strip__num,
.principle-card__num,
.sector-stat__num {
  color: var(--terracotta-deep);
}
#practices .practice-row:hover .practice-row__num { color: var(--terracotta); }
.practice-row:hover .practice-row__num { color: var(--terracotta); text-shadow: none; }

/* Footer photography credit */
.site-foot__photo-credit {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(203, 199, 187, 0.62);
}


/* =====================================================================
   Spectral optical pass (23 Jul 2026) — Spectral sits heavier and larger
   than Cormorant, so the Cormorant-era weight boosts come off. Placed
   last to win the cascade.
   ===================================================================== */
.body, .about-body p, .principle-card__body, .practice-row__lede, .impact__body,
.le-box__body, .ip-slab__lede, .callout__body, .member__bio, .post__excerpt,
.ledger__figure-label, .site-foot__colophon li { font-weight: 400; }
.lede, .hero__lede { font-weight: 400; }
.principle-card__num, .practice-row__num, .frameworks-list__num, .le-box__num,
.impact__num, .ip-slab__numeral, .ledger__figure { font-weight: 400; }
.pullquote { font-weight: 400; }


/* =====================================================================
   23 Jul 2026 (Benjie): all cards set in Hanken Grotesk — titles,
   numerals and body copy inside every card family. Spectral remains the
   serif for running copy outside cards (about columns, ledes,
   pull-quotes). Placed last to win the cascade.
   ===================================================================== */
/* .member__name left out of the card-title family, 26 Jul 2026: the bench is a
   gallery wall, not a card grid, so its label is not a card title. Its weight
   and tracking are set with the rest of the label in the .member__name rule. */
.principle-card__title, .practice-row__title, .impact__title, .le-box__title,
.callout__title, .post__title, .ip-slab__title,
.intel-card__title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.018em;
}
.principle-card__num, .practice-row__num, .frameworks-list__num, .le-box__num,
.impact__num, .ip-slab__numeral, .ledger__figure {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.principle-card__body, .practice-row__lede, .impact__body, .le-box__body,
.callout__body, .post__excerpt, .member__bio, .ip-slab__lede,
.ledger__figure-label {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0;
}
/* Hanken carries these numerals well at slightly smaller sizes */
.ledger__figure { font-size: clamp(80px, 8.2vw, 132px); letter-spacing: -0.03em; }
.principle-card__num { font-size: clamp(40px, 4vw, 54px); }
.practice-row__num { font-size: clamp(48px, 5vw, 72px); }
.impact__num { font-size: clamp(30px, 2.8vw, 40px); }
.le-box__num { font-size: clamp(36px, 3.6vw, 52px); }
.ip-slab__numeral { font-size: clamp(48px, 5vw, 84px); }


/* =====================================================================
   23 Jul 2026 — exhibits matched to the Joint Thought Leadership magazine
   ("The Last Lecture", Exhibit 05 + p.12). Light paper panel, square
   hairline frame; radar triangle + horizon curve in the magazine palette:
   teal polygons/curve, raspberry + ochre force poles, ink Trust dot.
   Placed last to win over the earlier dark-blueprint pass.
   ===================================================================== */
.gtt-fig {
  background: var(--paper-bright);
  border: 1px solid var(--ink-2);
  border-radius: 0;
  box-shadow: none;
  max-width: 680px;
  padding: 22px 26px 18px;
}
.gtt-fig__head { border-bottom: 1px solid var(--rule-hairline); padding-bottom: 12px; margin-bottom: 18px; }
.gtt-fig__tag {
  font-family: var(--mono);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--success);
}
.gtt-fig__desc { color: var(--ink); font-family: var(--display); font-weight: 600; }
/* §4.7 contrast audit, 26 Jul 2026: --ink-4 #9C9583 on paper is 2.63:1,
   below WCAG AA for text. This is the museum caption under every exhibit —
   the line that makes a figure traceable — so it has to be readable. --ink-3
   #6B6557 is 5.10:1 and is the other colour §2A.1 names for captions. */
.gtt-fig__src { color: var(--ink-3); border-top: 1px solid var(--rule-hairline); }

/* magazine exhibit palette. --force-external is aliased to --chart-gold here: the frozen
   indigo #5B4FE5 that token once carried is retired site-wide, exhibits included. */
.gx-grid   { stroke: var(--rule-hairline); stroke-width: 1; fill: none; }
.gx-today  { fill: rgba(35, 76, 80, 0.14); stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; }
.gx-next   { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 6 6; stroke-linejoin: round; }
.gx-vertex { fill: var(--paper-bright); stroke: var(--accent); stroke-width: 2; }
.gx-vertex--next { stroke-width: 1.6; }
.gx-pole--f1 { fill: var(--accent); }
.gx-pole--f2 { fill: var(--force-community); }
.gx-pole--f3 { fill: var(--force-bestpractice); }
.gx-trust  { fill: var(--ink); }
.gx-trust-lbl { font-family: var(--display); font-weight: 700; font-size: var(--fs-body); fill: var(--ink); }
.gx-force  { font-family: var(--mono); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: 0.14em; }
.gx-force--f1 { fill: var(--accent); }
.gx-force--f2 { fill: var(--force-community); }
.gx-force--f3 { fill: var(--force-bestpractice); }
.gx-force--soft { fill: #6E9296; }
.gx-name   { font-family: var(--display); font-weight: 700; font-size: var(--fs-card-lg); fill: var(--ink); letter-spacing: -0.01em; }
.gx-name--hi { fill: var(--accent); }
.gx-sub    { font-family: var(--display); font-weight: 500; font-size: var(--fs-chrome); fill: var(--ink-3); letter-spacing: 0.01em; }
/* AUDIT 26 Jul 2026 (§4.7 contrast): the same finding as .gtt-fig__src below — --ink-4
   is 2.63:1 on paper. It is fine for a dot or a rule, but these three selectors set
   exhibit TEXT (the tension label, the dimension index, the quiet sub-label), which has
   to clear 4.5:1 like any other caption. All three move to --ink-3 at 5.10:1. The
   graphical marks (.gtt-dot, .gx-dot) keep --ink-4: they are decoration behind labelled
   content, not information on their own. */
.gx-sub--quiet { fill: var(--ink-3); }
.gx-legend-solid { stroke: var(--accent); stroke-width: 2.4; }
.gx-legend-dash  { stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 6 6; }
.gx-wash { fill: rgba(35, 76, 80, 0.10); }
.gx-wash--deep { fill: rgba(35, 76, 80, 0.18); }
.gx-drop { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.55; }
.gx-axis { stroke: var(--ink-2); stroke-width: 1.6; }
.gx-arrow { fill: var(--ink-2); }
.gx-curve { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; }
.gx-horizon-dot { fill: var(--accent); }
.gx-dot { fill: var(--ink-4); }
.gx-spoke--hi { stroke: var(--accent); stroke-width: 1.6; }


/* =====================================================================
   23 Jul 2026 PM3 (Benjie) — one-line divider quotes, chapter bars
   removed (heading appeared twice), gold Contact chip, full-measure
   contact lede, dark audience-first University Intelligence, font-scale
   harmonisation (audit pass). Placed last to win the cascade.
   ===================================================================== */

/* Divider quotes hold one line on desktop; wrap is allowed only on small screens. */
.photo-divider__quote { max-width: none; right: var(--gutter); }
.photo-divider__quote-text {
  white-space: nowrap;
  font-size: clamp(15px, 2.1vw, 31px);
}
@media (max-width: 719px) {
  .photo-divider__quote-text { white-space: normal; font-size: clamp(17px, 4.6vw, 22px); }
}

/* Chapter bar retired — the eyebrow chip already names the section. */
.section[data-num]::before { content: none; display: none; }
.section[data-num] { border-top: 0; }

/* Contact — the chip takes the gold ground so it reads against the dark band. */
/* The gold-ground Contact chip was retired 28 Jul 2026; the on-dark rule near the end of this
   file now covers `.contact-cta` alongside `.section--ink`. The declaration is deleted rather
   than left to lose on order, because a dead rule that contradicts the live one is how Contact
   drifted away from every other heading bar in the first place. */
.contact-cta__lede { max-width: none; }

/* University Intelligence — dark statement ground, stat strip, gold CTAs. */
#sector-intelligence { background: var(--surface-dark); color: var(--paper-on-ink); }
.intel-lede { color: rgba(203, 199, 187, 0.85); }
.intel-strip {
  list-style: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(246, 242, 236, 0.22);
  border-bottom: 1px solid rgba(246, 242, 236, 0.22);
}
@media (min-width: 720px) { .intel-strip { grid-template-columns: repeat(4, 1fr); } }
.intel-strip li {
  padding: clamp(18px, 2vw, 26px) clamp(4px, 1vw, 12px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid rgba(246, 242, 236, 0.12);
}
.intel-strip li:last-child { border-right: 0; }
@media (max-width: 719px) { .intel-strip li:nth-child(2n) { border-right: 0; } }
.intel-strip__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--chip-gold);
  font-variant-numeric: lining-nums tabular-nums;
}
.intel-strip__label {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(203, 199, 187, 0.6);
}
#sector-intelligence .ledger { background: rgba(246, 242, 236, 0.20); box-shadow: none; }
#sector-intelligence .ledger__panel { background: var(--surface-dark-2); }
#sector-intelligence .ledger__panel + .ledger__panel { background: var(--ink-surface-2); }
.ledger__cta {
  border: 1px solid var(--chip-gold);
  border-radius: 999px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--chip-gold);
  transition: background 220ms ease, color 220ms ease, gap 220ms ease;
}
.ledger__cta:hover { background: var(--chip-gold); color: var(--ink-chip); border-color: var(--chip-gold); }
#sector-intelligence .sector-intel__cta { color: var(--paper-on-ink); border-bottom-color: rgba(246, 242, 236, 0.4); }
#sector-intelligence .sector-intel__beta { color: rgba(203, 199, 187, 0.62); }

/* Font-scale harmonisation (audit, 23 Jul): body copy converges on 16.5px,
   small/meta on 14px, so no stray 14.5/15.5/17 steps remain. */
.body, .intel-card__body { font-size: var(--fs-base); }
.about-body p { font-size: var(--fs-base); }
.principle-card__body, .practice-row__lede, .impact__body, .le-box__body,
.post__excerpt, .callout__body { font-size: var(--fs-base); line-height: 1.6; }
.member__bio { font-size: var(--fs-card); }
.ledger__rows dt { font-size: var(--fs-caption); }
.ledger__rows dd { font-size: var(--fs-card); }
.site-foot__colophon li { font-size: var(--fs-chrome); }
.contact-cta__lede { font-size: clamp(17px, 1.4vw, 20px); }

/* Audit tightening — card-title ladder converges on three steps:
   27px (member / le-box / principle), 30px (impact / practice), then
   post 32 and ip-slab 38 as the top card tiers. */
/* .member__name removed from this step, 26 Jul 2026 — a gallery label sits at
   running-body size, set in the .member__name rule above. Card titles keep it. */
.le-box__title, .principle-card__title { font-size: clamp(21px, 1.9vw, 27px); }
.impact__title, .practice-row__title { font-size: clamp(23px, 2.1vw, 30px); }
.post__title { font-size: clamp(24px, 2.3vw, 32px); }


/* 23 Jul 2026 PM4 — About sits on the recessed warm ground so it reads as
   its own section after the paper hero; exhibit labels carry hairline boxes. */
#about { background: var(--paper-2); }
/* 23 Jul 2026 (Benjie): exhibit labels use the standard CoreBridge box —
   dark #031602 chip, slightly rounded, gold eyebrow text, paper names. */
.gx-labelbox {
  fill: var(--ink-chip);
  stroke: none;
  rx: 4px;
}
.gx-boxed .gx-force,
.gx-boxed .gx-force--f1,
.gx-boxed .gx-force--f2,
.gx-boxed .gx-force--f3,
.gx-boxed .gx-force--soft { fill: var(--chip-yellow); }
.gx-boxed .gx-name,
.gx-boxed .gx-name--hi,
.gx-boxed .gx-trust-lbl { fill: var(--paper); }
.gx-boxed .gx-sub { fill: var(--paper-on-ink); }

/* The 23 Jul bench-chip radius rule is removed (WI-2, 26 Jul 2026). It set a
   corner radius on .member__more and .member__photo-toggle, which no longer
   exist, and on .member__direct, which is now a text link on a hairline rather
   than a pill. Nothing on a gallery label is a chip. */

/* 23 Jul 2026 — header brand follows the canonical inline lockup
   (preview/brand-wordmark.html): CoreBridge 700 / Advisory 300, no space,
   baseline-aligned, one colour. */
.brand__word { display: inline-flex; align-items: baseline; gap: 0; }
.brand__name {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.022em;
}
.brand__descriptor {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.005em;
}


/* 23 Jul 2026 — University Intelligence back on paper (Benjie: the dark
   green ground didn't work). The two #031602 ledger panels now carry all
   the dark weight and lift straight off the paper. */
#sector-intelligence { background: var(--paper); color: var(--ink); }
.intel-lede { color: var(--ink-2); }
.intel-strip { border-top-color: var(--rule); border-bottom-color: var(--rule); }
.intel-strip li { border-right-color: var(--rule-hairline); }
.intel-strip__num { color: var(--ink); }
.intel-strip__label { color: var(--ink-3); }
#sector-intelligence .ledger { background: rgba(3, 22, 2, 0.22); box-shadow: var(--shadow-2); }
#sector-intelligence .ledger__panel { background: var(--surface-dark); }
#sector-intelligence .ledger__panel + .ledger__panel { background: var(--surface-dark-2); }
#sector-intelligence .sector-intel__cta { color: var(--ink); border-bottom-color: var(--rule); }
#sector-intelligence .sector-intel__beta { color: var(--ink-3); }

/* 23 Jul 2026 — final cascade assert: light-ground numerals in terracotta
   deep #7C3A1E (the PM3/paper blocks above otherwise re-ink the stat strip). */
.practice-row__num, #practices .practice-row__num, .impact__num, .le-box__num,
.frameworks-list__num, .intel-strip__num, .sector-stat__num {
  color: var(--terracotta-deep);
}

/* 23 Jul 2026 (Benjie) — every numeral in ochre #96702A, light or dark
   ground. Final cascade assert, id-scoped variants included so nothing
   upstream outranks it. */
.practice-row__num, #practices .practice-row__num,
.impact__num, .le-box__num, .frameworks-list__num,
.intel-strip__num, .sector-stat__num,
.principle-card__num, #about .principle-card__num,
.ip-slab__numeral, .ledger__figure,
.section--ink .frameworks-list__num {
  color: var(--ochre);
}
#practices .practice-row:hover .practice-row__num,
.practice-row:hover .practice-row__num { color: var(--ochre); }
#leadership .frameworks-list__num { color: var(--ochre); filter: none; }

/* 23 Jul 2026 — hero regions line (Benjie): the three markets named on the
   front of the site, quiet mono under the lede. */
.hero__regions {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 clamp(24px, 3.4vw, 40px);
}


/* =====================================================================
   23 Jul 2026 PM7 — University Intelligence de-slopped: the stat tiles,
   twin cards and grid texture are retired. One hairline-ruled sector
   table on plain paper, in the magazine's data-page register.
   ===================================================================== */
.sxt {
  margin-top: clamp(44px, 5.5vw, 72px);
  border-top: 2px solid var(--ink);
}
.sxt__mast {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--rule-hairline);
}
.sxt__row {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) 1fr 1fr;
  column-gap: clamp(24px, 3.4vw, 64px);
  padding: clamp(16px, 1.8vw, 24px) 0;
  border-bottom: 1px solid var(--rule-hairline);
  align-items: baseline;
}
.sxt__row--head { padding: 18px 0 12px; border-bottom: 1px solid var(--rule); }
.sxt__head {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.sxt__label {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sxt__cell {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-card-lg);
  line-height: 1.5;
  color: var(--ink);
  text-align: left;
}
.sxt__figure {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(44px, 4.6vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ochre);
  font-variant-numeric: lining-nums tabular-nums;
}
.sxt__row--cta { border-bottom: 0; padding-bottom: 0; }
.sxt__row--cta .view-all-link { padding-top: 4px; }
@media (max-width: 759px) {
  .sxt__row { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .sxt__label { grid-column: 1 / -1; }
}

/* 23 Jul 2026 (Benjie) — all numerals in the teal accent #234C50.
   Supersedes the ochre pass; final cascade assert. */
.practice-row__num, #practices .practice-row__num,
.impact__num, .le-box__num, .frameworks-list__num,
.intel-strip__num, .sector-stat__num,
.principle-card__num, #about .principle-card__num,
.ip-slab__numeral, .ledger__figure, .sxt__figure,
.section--ink .frameworks-list__num, #leadership .frameworks-list__num {
  color: var(--accent);
}
#practices .practice-row:hover .practice-row__num,
.practice-row:hover .practice-row__num { color: var(--accent-deep); }

/* 23 Jul 2026 (Benjie) — University Intelligence sits on the deep cream
   #D2CCBE (--paper-deep), giving the data page its own ground. */
#sector-intelligence { background: var(--paper-deep); }
/* AUDIT 26 Jul 2026 (§4.7 contrast). Moving this section onto --paper-deep darkened
   the ground under type that had been measured against --paper. --ink-3 #6B6557 is
   5.10:1 on #F2F0EF but only 3.62:1 on #D2CCBE, which puts the unit labels under every
   ledger numeral ("universities", "source markets") and the "Free · Beta" chip below AA.
   Both are small caps at 10.5–11px, so they need the full 4.5:1. --ink-2 #2E2A22 is
   8.92:1 on this ground and is the canonical step for small secondary text. */
#sector-intelligence .sil__nunit,
#sector-intelligence .sector-intel__beta { color: var(--ink-2); }
/* Three-sector variant (AU · UK · NZ, 24 Jul 2026): same hairline table, one more column.
   On phones the row stacks and each cell announces its sector via data-c. */
.sxt--three .sxt__row { grid-template-columns: minmax(140px, 0.5fr) 1fr 1fr 1fr; }
@media (max-width: 760px) {
  .sxt--three .sxt__row { grid-template-columns: 1fr; row-gap: 8px; }
  .sxt--three .sxt__row--head { display: none; }
  .sxt--three .sxt__cell::before { content: attr(data-c); display: block; font-size: var(--fs-caption); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
  .sxt--three .sxt__cell[data-c=""]::before { display: none; }
}
#sector-intelligence .sxt { border-top-color: var(--ink); }
#sector-intelligence .sxt__row { border-bottom-color: rgba(3, 22, 2, 0.16); }
#sector-intelligence .sxt__mast { border-bottom-color: rgba(3, 22, 2, 0.16); }
#sector-intelligence .sxt__row--head { border-bottom-color: rgba(3, 22, 2, 0.35); }


/* 23 Jul 2026 (Benjie) — Perspectives cards carry a photograph: full-bleed
   band at the top of the card, editorial B&W like every photo on the page. */
.post { padding-top: 0; }
/* ...but zero top is only right when a photo is there to fill it. The three
   homepage Perspectives cards carry no `.post__media`, so they inherited an
   inset meant for a full-bleed band and the "№ 01" numeral sat hard on the
   card's top rule with 40px on every other side. Photoless cards take the
   card inset back, so the box reads square on all four sides. */
.post:not(:has(.post__media)) { padding-top: clamp(28px, 3.4vw, 40px); }
.post__media {
  margin: 0 calc(-1 * clamp(28px, 3.4vw, 40px)) 20px;
  height: clamp(180px, 16vw, 230px);
  overflow: hidden;
}
.post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.96);
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.1, 1);
}
.post:hover .post__media img { transform: scale(1.03); }

/* 23 Jul 2026 (Benjie, final) — numerals in ink on light grounds, paper
   on dark grounds. Supersedes the teal pass; last word in the cascade. */
.practice-row__num, #practices .practice-row__num,
.impact__num, .le-box__num, .frameworks-list__num,
.intel-strip__num, .sector-stat__num, .sxt__figure {
  color: var(--ink);
}
.principle-card__num, #about .principle-card__num,
.ip-slab__numeral, .ledger__figure,
.section--ink .frameworks-list__num, #leadership .frameworks-list__num {
  color: var(--paper);
}
#practices .practice-row:hover .practice-row__num,
.practice-row:hover .practice-row__num { color: var(--ink); }


/* 23 Jul 2026 (final polish): exhibits share the card radius. */
.gtt-fig { border-radius: 4px; }

/* Header parity: at desktop the trailing (empty) menu/CTA container gave the
   main nav a 24px inset the other pages don't have. Hide it ≥880px. */
@media (min-width: 880px) {
  .site-head__inner > div:last-child { display: none !important; }
}


/* Mobile hero mosaic. Since WI-2 (26 Jul 2026) these are the real advisors, not
   stock portraits, so every tile shows on a phone: the whole bench is the point
   of the headline above it. Tighter gaps and a gentler stagger keep them inside
   one screen. Counts are left out of this note deliberately — the bench has gone
   from seven to nine once already and the numbers in the prose went stale. */
@media (max-width: 719px) {
  .hero-mosaic { gap: 6px; }
  .hero-mosaic__col { gap: 6px; }
  .hero-mosaic__col:nth-child(2) { transform: translateY(10px); }
}

/* 24 Jul 2026 (Benjie) — University Intelligence simplified: the .sxt--three comparison
   table retired in favour of a three-row country ledger with ONE destination, the
   /university-intelligence/ chooser. Numerals ink on --paper-deep per the 23 Jul rule. */
/* §2A.4 gives the system three rule weights and all of them are 1px. This
   opened the sector ledger on a 2px ink rule; it is now the 1px emphasis
   rule (--rule), which is the weight the scale reserves for exactly this
   job. Flag if the heavier rule was a deliberate exception. */
.sil { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); }
.sil__row { display: grid; grid-template-columns: clamp(100px, 12vw, 150px) 1fr;
  gap: clamp(18px, 3vw, 44px); align-items: start;
  padding: clamp(22px, 2.8vw, 32px) 0; border-bottom: 1px solid var(--rule); }
.sil__nwrap { text-align: right; }
.sil__n { display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(44px, 4.6vw, 68px); line-height: 0.95; letter-spacing: -0.02em;
  color: var(--ink); font-variant-numeric: lining-nums; }
.sil__nunit { display: block; font-family: var(--mono); font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-top: 7px; }
.sil__c { display: block; font-weight: 700; font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.01em; color: var(--ink); padding-top: 6px; }
.sil__d { display: block; margin-top: 7px; color: var(--ink-2); font-size: var(--fs-card);
  /* 4 Aug 2026 (Benjie): was 58ch, holding each ledger line to 435px inside a 1,125px
     row and stranding 690px, four rows over. Edge to edge. */
  line-height: 1.55; max-width: none; }
@media (max-width: 640px) {
  .sil__row { grid-template-columns: 76px 1fr; gap: 16px; }
  /* Stat numeral at the phone step. §2A.1 sets numerals in display clamps;
     this is the floor of the .sil__n clamp above, restated for narrow. */
  .sil__n { font-size: clamp(36px, 11vw, 44px); }
  .sil__d { font-size: var(--fs-small); }
}

/* Perspectives index and hero.
   WI-2 + WI-11, 26 Jul 2026 — the .blog-row--media photo variant and the
   .blog-hero__mosaic face grid are both removed. The journal runs on one card
   treatment, typographic: number, date, tag, author, read-time, title, excerpt.
   The hero is type on paper. Both rule sets are deleted rather than left
   dormant, so a future edit cannot quietly re-enable a thumbnail column. */
.blog-hero__grid { max-width: var(--container-text); }

/* Leadership Evolution statement line (WI-2, 26 Jul 2026). The sentence that
   used to sit over the retired Brisbane cityscape divider, set as type on the
   ink ground. Sizes come from the §2A.1 scale: this is a Lede, upright serif,
   no italic, no second colour — emphasis by placement and a hairline above. */
.le-statement {
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(246, 242, 236, 0.12);
  /* 4 Aug 2026 (Benjie): was var(--measure-narrow) (48ch), which held the statement to
     457px inside its own 720px column and stranded 263px. The token stays for anything
     that genuinely wants a short measure; this block sits in a column already. */
  max-width: none;
  font-family: var(--serif-accent);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--paper-on-ink);
  text-wrap: pretty;
}

/* Perspectives card number (WI-11, 26 Jul 2026). The journal index numbers its
   pieces "№ 01"; the three homepage cards now carry the same device, so the two
   views read as one publication. Kicker scale per §2A.1. */
.post__num {
  font-family: var(--mono);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 14px;
}
.post--dark .post__num { color: rgba(239, 234, 224, 0.55); }

/* Drawer contact link. Accent teal on paper is 8.32:1; the gold it replaced was
   1.83:1 and only ever passed because the drawer used to sit on ink. */
.drawer__email { color: var(--accent); border-bottom: 1px solid var(--rule-hairline); padding-bottom: 1px; }
.drawer__email:hover { border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------------------
   DS7 / DS13 — the two rules that were being decided per component.
   Added 26 Jul 2026 alongside the dashboard stylesheets, which carry the same
   two blocks verbatim, so both layers of the site answer to one statement.

   DS7 · THE TAG COLOUR RULE. Colour on a chip, tag, pill or badge means one
   thing: the direction of a data reading. It never means category, section,
   tab, brand or emphasis. A chip that labels a kind of thing is neutral — paper
   ground, hairline border, ink text. Gold is reserved twice over: --chip-gold
   for chips and dark-section numerals, --chart-gold for data marks. Neither is
   available to a tag. The test: if two chips in one view differ in colour, a
   reader must be able to say what the difference MEANS. If the answer is "they
   are different sections", the colour is wrong and the difference belongs to
   the numeral or the label (§2A.5).

   DS13 · TYPOGRAPHY. Data is set in the sans with tabular numerals — figures,
   axis labels, table cells, stat numerals — because columns must align and a
   proportional serif figure will not. Prose is Spectral. Italics are retired
   (canonical v4.1, 24 Jul 2026): the serif accent register is upright
   everywhere, the italic faces stay on disk only for in-flight documents, and
   emphasis in prose is carried by weight or by phrasing. The rule below is the
   enforcement, not the intention.
   --------------------------------------------------------------------------- */
em, i, cite, dfn, var, address { font-style: normal; }
.stat, .stat-num, .num, .n, [class*="numeral"], table td, table th {
  font-variant-numeric: tabular-nums;
}

/* 26 Jul 2026 — Exhibit diagrams were unreadable on a phone.
   Each is drawn on a 720–840 unit viewBox. Squeezed into the 281px column a
   375px screen leaves, that is a scale of 0.33–0.39, and the smallest labels
   inside them rendered at 3.7px, 4.3px and 5.1px. §2A.1 sets 9.5px as the floor
   for a label inside an Exhibit SVG, and below about 8px the words stop being
   words — "FORCE 1 · EXTERNAL ENVIRONMENT" was a grey smudge.

   The diagram now scrolls sideways at a width that keeps its labels legible
   rather than being shrunk past the point of use. The figure itself is the
   scroll container (the SVG is a direct child of <figure>, so wrapping it would
   mean a markup change and a JSX rebuild for no gain), and the kicker, title
   and source line are pinned with `position: sticky; left: 0` so they stay at
   the reading column's left edge while the diagram moves under them. The
   caption is therefore never scrolled off, and the scroll is contained, so it
   cannot re-open the page-level horizontal scroll fixed the same day. */
/* THE EXHIBIT FITS THE PHONE. NO SIDEWAYS SCROLL. (Benjie, 28 Jul 2026.)
   The rule above pinned the diagram at 730px and let the figure scroll, on the sound reasoning
   that scaling an 840-unit viewBox down to a phone puts its 11px labels at about 4.4px. That
   reasoning was right about the type and wrong about the reader: a diagram you have to drag
   sideways on a phone is one most people never see the right-hand half of.

   So the type stops being the thing that has to survive the scale. The geometry scales to fit,
   which it does cleanly because every exhibit is a viewBox; the WORDS come out of the SVG and
   are reprinted underneath as ordinary HTML, at ordinary size. That is strictly better than the
   4.4px version and better than the scroll: nothing is hidden, nothing needs dragging, and the
   labels are now selectable, translatable and reflowable, which SVG text never was.
   The `.gtt-key` lists are aria-hidden because each figure's own aria-label already narrates
   the same content, and a screen reader should not hear it twice. */
@media (max-width: 720px) {
  .gtt-fig { overflow-x: visible; }
  .gtt-fig > svg { min-width: 0; width: 100%; max-width: 100%; height: auto; display: block; }
  /* Every text-bearing element in the exhibits, and the plates drawn behind them. Hidden rather
     than shrunk: an illegible label is visual noise sitting on top of the geometry. */
  .gtt-fig .gx-force,
  .gtt-fig .gx-name,
  .gtt-fig .gx-sub,
  .gtt-fig .gx-trust-lbl,
  .gtt-fig .gx-labelbox,
  .gtt-fig .gx-legend-solid,
  .gtt-fig .gx-legend-dash { display: none; }
}

/* The key itself. Desktop keeps the labels inside the diagram where they point at things, so
   the key is phone-only — except the Sustainability Frame's four modes, which are new content
   and show at every width. */
.gtt-key { display: none; margin: 14px 0 0; padding: 0; list-style: none; }
/* `!important` because the web type ladder sets `p, li` at the body rung with `!important`,
   which a plain caption-sized declaration cannot beat. A key is chrome around a figure, not
   body copy: at 17px it outweighed the diagram it is supposed to annotate. */
.gtt-key li {
  /* 13px, not the 10.5px caption token. The caption size is right for a source line you
     glance at; this key is now the only place the diagram's labels appear on a phone, so it
     has to be read, not squinted at. 20px leading keeps it on the 4px baseline. */
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--ink-2);
  padding: 5px 0;
  border-top: 1px solid var(--rule-hairline);
}
.gtt-key li:first-child { border-top: 0; }
.gtt-key b {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 8px;
}
.gtt-modes { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule-hairline); }
.gtt-modes__row { padding: 7px 0; }
.gtt-modes dt {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.gtt-modes dd {
  margin: 3px 0 0;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--ink-2);
}
/* Deliberately AFTER the `display: none` above rather than beside the other phone rules.
   Both selectors are 0,1,0, so position decides and the later one wins — put this in the
   earlier block and the key stays hidden on the one screen size it exists for. */
@media (max-width: 720px) {
  .gtt-key { display: block; }
}

/* 26 Jul 2026 — the phone gutter, enforced rather than assumed.
   Benjie: "all boxes and text need a margin on the margins of the phone."
   The gutter token already resolves to 20px at 375px and .wrap applies it, but
   two things were escaping it: the eyebrow chips, whose reveal animation slid
   them in from x:-12 and so parked them 8px from the bezel (fixed at source in
   components.jsx — the clip-path wipe already carried that motion), and any
   reveal wrapper mid-transform. The rule below is the backstop: on a phone no
   revealed element may translate horizontally at all, so nothing can be dragged
   outside the reading column by an animation that has not finished, or that
   never runs at all. */
@media (max-width: 720px) {
  .reveal { transform: translateX(0) !important; }
  .reveal.is-visible { transform: none !important; }
  /* Anything full-bleed by design keeps its own padding; anything that carries
     running text inside a band gets the gutter whether or not its component
     remembered to ask for it. */
  .section > p, .section > h2, .section > h3, .section > ul, .section > ol {
    padding-left: var(--gutter); padding-right: var(--gutter);
  }
}

/* ==========================================================================
   v4.2 RADIUS — square the structure, round the interaction (27 Jul 2026, Benjie)
   Audited on the live build before writing this: the homepage was serving controls at 0px,
   photographs at 0px and pills at 3px, none of which match the ruling. Roles, not sizes.
   ========================================================================== */
:root {
  --radius-structure: 0;
  --radius-control: 5px;
  --radius-media: 4px;
  --radius-pill: 999px;
  --radius-sheet: 8px;
}
/* structure: holds content, so it is square */
.card, .choice, section.block, table.data, .panel, .well, .ledger, .ip-slab { border-radius: var(--radius-structure); }
/* interaction: does something, so it is rounded just enough to invite the hand */
button, .btn, a.btn, .cta, input, select, textarea, .btn-line, .skip-link,
.ip-carousel__arrow, .ledger__cta, .member__disclose { border-radius: var(--radius-control); }
/* media inside a box: soften the content, never the architecture */
.hero-mosaic__tile, .hero-mosaic__tile img, figure img, .member__photo img,
.hd-mosaic__t, .mug { border-radius: var(--radius-media); }
/* tags and pills: functional contrast that separates metadata from content */
.chip, .pill, .tag, .flag, .beta, .eyebrow-chip, .cta-pill, .ip-carousel__dot { border-radius: var(--radius-pill); }
/* sheets: platform-native top rounding only */
.drawer, .modal, .sheet { border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; }

:root {
  --font-display: var(--display);
  --font-accent: var(--serif);
}
/* ==========================================================================
   v4.2 TYPE RHYTHM — one scale, one measure, one rhythm (27 Jul 2026, Benjie)

   Audited on the live build first, which is why this exists. Body copy was running at three
   different sizes across four page types (21.7px on Perspectives and Leadership Evolution,
   20.4px on the homepage, 16.5px on the dashboards) against a spec of 14. Line-height was
   1.5-1.55 against a spec of 1.6. Worst of all, the gap between paragraphs was 0px on the
   homepage, 17px on Leadership Evolution and 89px on Perspectives: the same content type with
   three unrelated rhythms, which is what makes a site feel assembled rather than designed.

   The 14px in the scale is the DOCUMENT figure and reads small on screen, so the web body is
   set at 17px on the spec's own 1.6 leading. Everything else keeps the spec's ratios: the
   heading ladder, the lede, the negative tracking on display sizes and the positive, uppercase
   tracking on chrome. Sizes clamp down on small screens rather than being redefined per page.
   ========================================================================== */
:root {
  --t-body: 17px;
  --t-lead: 1.6;          /* the spec's leading, applied everywhere rather than per page */
  --t-para: 1em;          /* one paragraph rhythm, not 0 / 17 / 89 */
}

/* Running copy. One size, one leading, one gap. */
p, li, dd, blockquote,
.body, .copy, .prose p,
.practice-row__lede, .impact__body, .le-box__body, .member__bio, .post__excerpt,
.callout__body, .ip-slab__lede, .intel-card__body,
.lede, .hero__lede { line-height: var(--t-lead) !important; }
p, li, dd, blockquote, .body, .copy, .prose p,
.practice-row__lede, .impact__body, .le-box__body, .member__bio, .post__excerpt,
.callout__body, .ip-slab__lede, .intel-card__body { font-size: var(--t-body) !important; }
p { margin-block-end: var(--t-para) !important; }
p:last-child { margin-block-end: 0; }

/* The lede sits one step above body, as the scale has it. */
.lede, .hero__lede, .cb-lede { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; }

/* Heading ladder, on the spec's ratios: 72 / 48 / 32 / 24 / 18 / 14.
   Clamped so the ratio survives a phone instead of each page inventing its own sizes. */
h1 { font-size: clamp(34px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -0.018em; }
h2 { font-size: clamp(27px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.014em; }
h3 { font-size: clamp(21px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -0.010em; }
h4 { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.25; letter-spacing: -0.008em; }
h5 { font-size: 18px; line-height: 1.3; }
h6 { font-size: 14px; line-height: 1.35; }

/* Chrome and eyebrows: positive tracking, uppercase, and inside the 0.04-0.16em band.
   These were sitting at 0.18em, just outside it, on every page. */
.eyebrow, .eyebrow-chip, .hero__eyebrow, .kicker, .crumb, .label,
.meta, .ref, .srcs, .sc-year, .tab-n {
  letter-spacing: 0.16em;
}
.meta, .ref, .figure-caption { font-size: 12px; line-height: 1.5; }

/* Chrome never wraps. A two-line head or foot label is a bug, so it is prevented here rather
   than discovered later. */
.site-head nav a, .site-foot-nav a, .eyebrow, .kicker, .crumb { white-space: nowrap; }

/* ==========================================================================
   PRACTICES AS A RULED REGISTER (27 Jul 2026, Benjie)
   These were the plainest thing on the page: three rounded paper cards with 72px numerals, in a
   grid, unchanged from v2, sitting directly beneath the engagements register and the logo wall,
   which both speak a ruled editorial language. A card says "widget"; a ruled row says "record",
   and the record is what the rest of the middle of this page is made of.
   Structure only: no markup change, so the JSX and the compiled twin stay as they are.
   ========================================================================== */
.practices-stack {
  display: block;                       /* one column: a register, not a grid of tiles */
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--rule, #A6A294);
}
.practices-stack > .practice-row:last-child:nth-child(2n+1) {
  grid-column: auto; justify-self: auto; width: auto; max-width: none;
}
.practice-row {
  display: grid !important;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(22px, 2.4vw, 34px) 0;
  background: none !important;          /* the card chrome comes off entirely */
  border: 0 !important;
  border-bottom: 1px solid var(--rule-hairline, #CBC7BB) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.practice-row:hover {
  background: none; border: 0; border-bottom: 1px solid var(--rule, #A6A294);
  box-shadow: none; transform: none;
}
/* The numeral becomes an index, not a display element: it labels the row, it is not the row. */
.practice-row__num {
  font-size: clamp(12px, 1vw, 13px) !important;
  line-height: 1.4;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--ink-3, #6B6557);
  text-shadow: none;
  margin: 4px 0 0;
}
.practice-row:hover .practice-row__num { color: var(--accent, #234C50); text-shadow: none; }
/* The body no longer needs its own rule; the row carries it. */
.practice-row__body { border-top: 0; padding-top: 0; gap: 8px; }
.practice-row__title { font-size: clamp(20px, 1.9vw, 27px); line-height: 1.15; margin: 0; }
/* 4 Aug 2026 (Benjie): edge to edge. The 68ch cap put this lede at 647px inside a
   1,211px row, directly under a title running the full width, so every practice read
   as a full-width heading over a half-width paragraph with 563px of nothing beside it.
   Same rule as the hubs: narrow the CONTAINER for prose, never the text in a wide one. */
.practice-row__lede { max-width: none; margin: 0; }
@media (max-width: 640px) {
  .practice-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .practice-row__num { margin: 0; }
}

/* ==========================================================================
   v4.2 RADIUS, SECOND PASS (27 Jul 2026)
   The first pass targeted class names I knew. This one was written from an enumeration of every
   element on every page that actually renders a box, which surfaced a tail the guesswork missed:
   callouts, principle cards, the impact grid, the Leadership Evolution boxes and the partner
   logo wall were all still on 10px or 7px, and the article cards were controls at 10px.
   Roles, per the ruling: a box that holds content is square, a box that does something is 4-6px.
   ========================================================================== */
.callout, .principle-card, .impact, .le-box, .partner__logo,
.frameworks-list, .ledger, .intel-card, .sector-stat, .ip-slab,
.about-feature, .contact-cta, .logo-wall__cell { border-radius: 0 !important; }

/* article cards are clickable, so they are controls, not containers */
.post, .post-card, .intel-card__cta { border-radius: var(--radius-control, 5px) !important; }

/* an eyebrow is metadata, which the ruling puts in the fully-rounded register */
.eyebrow, .eyebrow-chip, .kicker-chip { border-radius: var(--radius-pill, 999px) !important; }

/* ==========================================================================
   v4.2 BODY FACE CORRECTION (27 Jul 2026)
   The spec is explicit that Spectral is the ACCENT register and "never body copy, never chrome,
   never a whole paragraph of running text". Hanken carries all running body. Every page on this
   site was setting p in Spectral, which is the opposite; the dashboards, on Hanken, were right.
   Spectral is kept exactly where the spec puts it: ledes, pull-quotes, drop-caps and captions.
   ========================================================================== */
p, li, dd, blockquote, .body, .copy, .prose p,
.practice-row__lede, .impact__body, .le-box__body, .member__bio, .post__excerpt,
.callout__body, .ip-slab__lede, .intel-card__body,
.srcs, .meta, .ref { font-family: var(--font-display) !important; }

/* the accent register, exactly as the spec scopes it */
.lede, .hero__lede, .cb-lede, .pullquote, .cb-caption, .figure-caption, .dropcap,
.cb-title-serif { font-family: var(--font-accent) !important; }

/* ==========================================================================
   SECTION-HEADING EYEBROW: SQUARE, AND GOLD ON BOTH GROUNDS (28 Jul 2026, Benjie)
   ==========================================================================
   Benjie's ruling for the section headings ("About", "Practices", "Impact", "The bench"…):
   square the box, keep it inside the page margin, and carry gold on the dark AND the light box.

   SQUARE. The v4.2 sweep filed `.eyebrow-chip` under "tags and pills stay fully rounded" and gave
   it `--radius-pill` twice, the second time with `!important`, so it rendered as a 999px lozenge.
   A section heading is not metadata floating beside content, it is the head of the structure, and
   v4.2's own rule is that structure is square. Overridden here rather than edited above, so the
   two sweeps keep working for the genuine tags they were written for.

   GOLD ON BOTH, AND WHY THE LIGHT BOX IS A GOLD GROUND RATHER THAN GOLD TEXT.
   The dark box was already right: --chip-gold #D4AF67 on ink #031602 is 9.05:1. The light variant
   on ink sections inverted to a paper box with INK text, so it carried no gold at all. Gold TEXT
   on that paper box is not available: measured against the paper #F2F0EF, every gold in the
   canonical fails AA for text this size — --chip-gold 1.83:1, --chart-gold 2.09:1, --ochre 3.98:1,
   --force-bestpractice 4.13:1, --warning 4.44:1, against the 4.5:1 an 11px uppercase label needs.
   That is the same trap as the 1.70:1 teal chips fixed in r83: a colour chosen on the dark band
   and carried onto paper unchecked.
   So the light box becomes a GOLD GROUND with ink text, which is 9.05:1, is gold, and already has
   precedent in .contact-cta. Both grounds now carry gold and both clear AAA.
   Margin alignment was already correct (chip left edge == content column left edge), so it is
   asserted here rather than changed, to keep it that way. */
.eyebrow-chip,
.eyebrow,
.kicker-chip { border-radius: var(--radius-structure, 0) !important; }

/* ON A DARK SECTION: CoreBridge white ground, CoreBridge gold type (28 Jul 2026, Benjie).
   The gold has to change with the ground, and this is the whole reason why. --chip-gold #D4AF67
   is the gold FOR DARK: it is 9.05:1 on ink and only 2.07:1 on white, so carrying it onto a white
   box would put the label a third of the way to the contrast it needs. The canonical's darker
   gold, --force-bestpractice #9C6A00, is the light-ground member of the same family: 4.58:1 on
   --paper-bright and 4.69:1 on pure white, clearing the 4.5:1 an 11px uppercase label needs.
   Same instruction, two tokens, because "gold" is a different hex depending on what is behind it. */
.section--ink .eyebrow-chip,
/* THE RULE IS "ON A DARK GROUND", NOT "ON .section--ink". Contact is dark-grounded but classed
   `.contact-cta`, not `.section--ink`, so the rule above sailed straight past it and it kept an
   older treatment from line ~3335: a GOLD ground with ink type, the exact inverse of every other
   heading bar on the page. Matching on the class rather than on the ground is what let one
   section drift; naming the second dark section here closes it. Both selectors are 0,2,0, and
   this block sits after the `.contact-cta` rule it supersedes, so it wins on order. */
.contact-cta .eyebrow-chip {
  background: var(--paper-bright, #FEFCF7);
  color: var(--force-bestpractice, #9C6A00);
}

/* FULL COLUMN WIDTH, TEXT ON THE MARGIN (28 Jul 2026, Benjie).
   The chip was `inline-flex`, so it shrank to its own label: a 101px black tab floating in a
   305px column. Benjie's ruling is that the section heading is a BAR the width of the text column,
   with its label starting on the left margin, not a badge sitting near it.
   Two things follow. The box becomes a block-level flex row at 100% of the column, so its right
   edge lands on the right margin exactly as its left edge already landed on the left one. And the
   left padding goes to zero, because the label has to sit on the SAME vertical as the heading and
   the body copy beneath it: with the inherited 14px the text started at 34 while everything else
   in the column started at 20, which is the kind of near-miss that reads as a mistake rather than
   a margin. Right padding is kept so a label never runs to the very edge of the ground.
   Vertical padding is untouched. */
.eyebrow-chip {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  /* SPACE INSIDE THE BAR (28 Jul 2026, Benjie). Zero left padding put the label hard against the
     ground's own edge: the text sat exactly on the margin, which was the ask, but it read as
     cramped rather than aligned, and the 8/7 vertical padding left a 26px bar that the label
     filled top to bottom. The label now has room on all four sides. The trade-off is deliberate
     and worth naming: the text is inset from the margin by its own padding, so it no longer sits
     on the same vertical as the heading below it. Keeping BOTH would mean bleeding the black
     ground to the left of the margin, which contradicts running the box inside the margin. */
  padding: 11px 16px 10px;
  margin-left: 0;
}

/* =========================================================================
   TYPE SCALE — implemented from the canonical `preview/type-scale.html`
   (claude.ai design project 744fba84, 28 Jul 2026)
   =========================================================================
   THE RULE THE SPEC EXISTS TO ENFORCE: "Every line height is a whole multiple
   of the 4px baseline and is declared in px, because a ratio computes to a
   fraction and a fraction breaks the grid." The site had ZERO px line-heights —
   every one was a ratio (1.04, 1.18, 1.6…), so nothing sat on a baseline and
   the headings drifted apart page by page. That is the mechanism behind the
   "some look too big and not refined" reading.

   WHAT WAS ACTUALLY WRONG, measured before this block was written:
     h1   69.1 – 71.7px   (close to the canonical 72, the one rung that held)
     h2   28 → 43.5 → 64 → 89.6px   a 3.2x spread for ONE element, and the 89.6
          instance rendered LARGER than its own h1 — the hierarchy inverted
     h3   17 / 22 / 23 / 24.3 / 26.9px   five variants, four on one page
     body 17px everywhere — the one register that was already consistent

   WHERE THIS DEPARTS FROM THE CANONICAL, DELIBERATELY. The canonical ladder is
   a document register: body 13px, and it assumes a fixed page. A website is
   read at arm's length on three widths, so two things change and nothing else:
     1. BODY STAYS 17px. 13px is a print measure; 17px was set estate-wide on
        27 Jul and is correct for screen. Its leading becomes 28px (4x7), so it
        joins the baseline instead of floating on a 1.6 ratio.
     2. THE HEADINGS STEP DOWN BY BREAKPOINT. 72px is right on a desktop column
        and absurd on a 375px phone. The desktop rung IS the canonical value;
        tablet and mobile are proportional steps, every one still landing on the
        4px grid.
   The ladder's RATIOS, its faces, and its 4px discipline are unchanged.
   ========================================================================= */

:root {
  /* desktop — the canonical rungs, unmodified */
  --w-h1: 72px;   --w-h1-lh: 76px;
  --w-h2: 48px;   --w-h2-lh: 52px;
  --w-h3: 32px;   --w-h3-lh: 36px;
  --w-h4: 24px;   --w-h4-lh: 28px;
  --w-lede: 22px; --w-lede-lh: 32px;
  --w-sub: 16px;  --w-sub-lh: 24px;
  --w-body: 17px; --w-body-lh: 28px;
  --w-meta: 12px; --w-meta-lh: 16px;
  --w-micro: 11px; --w-micro-lh: 16px;
}
@media (max-width: 1023px) {           /* iPad and small laptop */
  :root {
    --w-h1: 56px; --w-h1-lh: 60px;
    --w-h2: 40px; --w-h2-lh: 44px;
    --w-h3: 28px; --w-h3-lh: 32px;
    --w-h4: 22px; --w-h4-lh: 28px;
    --w-lede: 20px; --w-lede-lh: 28px;
  }
}
@media (max-width: 640px) {            /* phone */
  :root {
    --w-h1: 40px; --w-h1-lh: 44px;
    --w-h2: 32px; --w-h2-lh: 36px;
    --w-h3: 24px; --w-h3-lh: 28px;
    --w-h4: 20px; --w-h4-lh: 24px;
    --w-lede: 18px; --w-lede-lh: 28px;
  }
}

/* Applied with !important because the sizes being corrected are themselves set
   with clamp() further up, and a clamp beats a plain declaration regardless of
   order. Scoped to the marketing site only — the four dashboards ship their own
   styles.css and are a denser register by design. */
h1, .cb-h1 { font-size: var(--w-h1) !important; line-height: var(--w-h1-lh) !important; letter-spacing: -0.008em; }
h2, .cb-h2 { font-size: var(--w-h2) !important; line-height: var(--w-h2-lh) !important; letter-spacing: -0.022em; }
h3, .cb-h3 { font-size: var(--w-h3) !important; line-height: var(--w-h3-lh) !important; letter-spacing: -0.018em; }
h4, .cb-h4 { font-size: var(--w-h4) !important; line-height: var(--w-h4-lh) !important; }
/* !important here too: the body leading was still resolving to the old 1.6 RATIO further up,
   which computes to 27.2px and rounds to 27 — one pixel off the baseline, on every paragraph
   on the site. Exactly the fraction the spec warns about. 28px is 4x7. */
p, .cb-p, li { font-size: var(--w-body) !important; line-height: var(--w-body-lh) !important; }
.lede, .cb-lede, .hero__lede, .section__lede { font-size: var(--w-lede) !important; line-height: var(--w-lede-lh) !important; }
.cb-subhead, .subhead { font-size: var(--w-sub); line-height: var(--w-sub-lh); }
.cb-meta, .meta { font-size: var(--w-meta); line-height: var(--w-meta-lh); }
.cb-figure, .cb-label, .eyebrow, .eyebrow-chip, .kicker { font-size: var(--w-micro); line-height: var(--w-micro-lh); }

/* CANONICAL DRIFT CORRECTED. colors_and_type.css sets `--radius-pill: 0` under
   the 2027-07 "square the structure" revision, with the name retained only so
   existing rules keep resolving. This stylesheet still carried 999px in two
   places, so every tag and metadata pill on the site was a lozenge against a
   canonical that had squared them. Rule 0: the canonical wins. */
:root { --radius-pill: 0; }

/* The named body-copy classes carry their own `line-height: 1.6`, and one of them sets it with
   !important, so the element rule above could not reach them: twelve paragraphs stayed at 27px
   while the rest of the page moved to 28. These are all running body copy, so they take the body
   rung. `.lede` and `.hero__lede` are deliberately NOT in this list — they are the 22/32 lede rung
   and are set above. */
.practice-row__lede,
.impact__body,
.le-box__body,
.member__bio,
.post__excerpt,
.callout__body,
.ip-slab__lede,
.intel-card__body {
  font-size: var(--w-body) !important;
  line-height: var(--w-body-lh) !important;
}

/* =========================================================================
   HERO MOSAIC on /blog (28 Jul 2026, Benjie)
   =========================================================================
   The interactive reader indexes the same eight papers as /perspectives/ and
   had no imagery, which was half of why the two pages looked like different
   products. This is the same four-tile architectural set that page already
   runs, so the pair now open the same way.
   Only the radius line for `.hd-mosaic__t` lived in this stylesheet; the rest
   of the mosaic CSS was inline on /perspectives/ and therefore unreachable
   from here. Ported, unchanged apart from being scoped to the blog hero for
   the two-column split. */
.blog-hero__grid { max-width: var(--container-wide); }
@media (min-width: 900px) {
  .blog-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: start; }
  .blog-hero__mosaic { aspect-ratio: 6 / 5; }
}
.hd-mosaic { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1.3fr 1fr; gap: 10px; margin: 0; }
.hd-mosaic__t { position: relative; overflow: hidden; background: var(--paper-deep, #D2CCBE);
  min-height: 0; border-radius: var(--radius-media, 4px); }
.hd-mosaic__t--lg { grid-row: 1 / span 2; }
.hd-mosaic--4 { grid-template-rows: repeat(3, 1fr); }
.hd-mosaic--4 .hd-mosaic__t--lg { grid-row: 1 / span 3; }
.hd-mosaic__t img { width: 100%; height: 100%; object-fit: cover; display: block;
  /* the source frames are already black and white; this only guards a colour frame slipping in */
  filter: grayscale(100%) contrast(1.02); }
@media (max-width: 899px) {
  /* On a phone the mosaic becomes a swipe strip rather than a grid, so four tiles do not
     compress into four unreadable slivers. Same behaviour as /perspectives/. */
  .hd-mosaic--4 { grid-template-columns: repeat(4, 62vw); grid-template-rows: 1fr; gap: 8px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .hd-mosaic--4::-webkit-scrollbar { display: none; }
  .hd-mosaic--4 .hd-mosaic__t--lg { grid-row: auto; }
  .hd-mosaic__t { aspect-ratio: 4 / 3; }
  .blog-hero__mosaic { margin-top: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hd-mosaic__t img { transition: transform .5s cubic-bezier(.2,.6,.2,1); }
  .hd-mosaic__t:hover img { transform: scale(1.03); }
}



/* ── CoreBridge Intelligence in the menu (29 Jul 2026, Benjie) ──────────────────
   The second business line reads as a business line: the CB mark sits on its row,
   and its four sectors are indented under it against a hairline so the menu shows
   one product with four parts rather than five sibling links. The children are a
   step down in size and weight — the same parent/child hierarchy the drawer's name
   and numeral already use, one level deeper. */
.drawer__nav a .drawer__lbl { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.drawer__nav a.is-brand .drawer__lbl img { flex: 0 0 auto; }
.drawer__nav a.drawer__sub {
  font-size: clamp(16px, 2.7vw, 21px);
  font-weight: 500;
  letter-spacing: -0.012em;
  padding-top: clamp(11px, 1.4vw, 15px);
  padding-bottom: clamp(11px, 1.4vw, 15px);
  padding-left: 40px;
  position: relative;
}
/* The hairline is the group's spine. It runs the full height of each child, so four
   consecutive children read as one continuous bracket and it stops dead at Contact. */
.drawer__nav a.drawer__sub::before {
  content: "";
  position: absolute;
  left: 15px; top: 0; bottom: -1px;
  border-left: 1px solid var(--rule-hairline);
}

/* ── The homepage section carries the same lockup ──────────────────────────────
   The eyebrow chip is already an inline-flex row with an 8px gap, so the mark drops
   in beside the wordmark without new layout. mark-on-dark is the ink-ground member
   of the pair: the chip ground is --ink-chip. */
.eyebrow-chip .eyebrow-chip__mark {
  width: 18px; height: 18px; flex: 0 0 18px;
  object-fit: contain; display: block;
}

/* ── The section chip is a wordmark, not a kicker (29 Jul 2026, Benjie) ────────
   Every other eyebrow-chip on the page is a category label, so the base rule sets
   them in uppercase mono with wide tracking. This one names a brand, and a brand
   set in another face at 11px is not that brand. It reverts to the display face at
   wordmark size and drops the uppercasing and the tracking the label register adds;
   the ink ground and gold ink stay, because that is what the chip is for. */
.eyebrow-chip--brand { padding-top: 7px; padding-bottom: 6px; }
.eyebrow-chip--brand .brand__word {
  font-family: var(--display);
  font-size: 15px;
  text-transform: none;
  letter-spacing: -0.018em;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.eyebrow-chip--brand .brand__name { font-weight: 700; letter-spacing: -0.022em; }
.eyebrow-chip--brand .brand__descriptor { font-weight: 300; letter-spacing: -0.005em; }

/* The trade mark symbol rides the lockup without disturbing it: superscript, regular weight so
   it never inherits the 700 of brand__name, no tracking of its own. All three CoreBridge marks
   are unregistered — 2681343 is Published, which is acceptance and advertisement for opposition
   rather than registration; 2681342 and 2681421 are at pre-application — so the estate carries
   the trade mark symbol and never the registered one. */
.brand__tm { font-size: .5em; line-height: 1; vertical-align: super; font-weight: 400;
  letter-spacing: 0; margin-left: 1px; }

/* ── The legal line (30 Jul 2026, Benjie) ─────────────────────────────────────
   Entity, both business names, copyright and trade mark status, at the foot of
   every page in the estate in identical wording. Quiet by design: this is read
   deliberately or not at all, and must never compete with the content above it. */
.site-foot .legal-line { margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10); font-size: 12px; line-height: 1.6;
  /* 4 Aug 2026 (Benjie): was 92ch, which rendered at 552px inside a 1,319px footer and
     left 767px empty under a rule that runs the full width. Edge to edge. */
  color: var(--paper-on-ink, #CBC7BB); max-width: none; }
.site-foot .legal-line b { font-weight: 600; color: inherit; }

/* ── CoreBridge Intelligence section: the capability line and a real button ────────────
   4 Aug 2026 (Benjie): "this is weak — needs to be stronger like the CoreBridge Intelligence
   landing page." The ledger stated coverage and stopped. Two additions, no new form: a closing
   line that carries what the tools let a reader DO, and a filled button instead of the quiet
   text link, matching the CTAs on /university-intelligence/ so the two surfaces read as one
   product. Ground here is --paper-deep, so the button takes the canonical filled-control teal
   with paper text (v4.2.1). No measure cap on the line — edge to edge, as everywhere. */
.sil__close {
  /* No rule of its own: the ledger's last row already draws one, and the two stacked
     30px apart read as a mistake rather than as a divider. The line sits in the space
     the ledger's own bottom rule opens. */
  margin-top: clamp(18px, 2vw, 26px);
  padding-top: 0;
  font-family: var(--serif);
  font-size: clamp(16px, 1.7vw, 18.5px);
  line-height: 1.55;
  color: var(--ink-2);
}
.sector-intel__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-control, #2F686D); color: var(--paper-bright, #FEFCF7);
  font-family: var(--display); font-weight: 650; font-size: 15px;
  padding: 13px 22px; border-radius: var(--radius-control, 5px);
  border: 1px solid var(--accent-control, #2F686D);
  text-decoration: none; line-height: 1;
  transition: background 180ms var(--ease, ease), border-color 180ms var(--ease, ease);
}
.sector-intel__btn:hover { background: var(--accent, #234C50); border-color: var(--accent, #234C50); }
.sector-intel__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sector-intel__btn svg { width: 18px; height: 18px; }


/* ========================================================================
   CoreBridge Intelligence — standalone navigation (11 Aug 2026)
   Added by build_standalone.py. Not present in the advisory stylesheet.
   ===================================================================== */
.nav .nav-soon-item {
  font-size: var(--fs-small); font-weight: 400; letter-spacing: 0.005em;
  color: var(--ink-4); padding: 6px 0; display: inline-flex;
  align-items: center; gap: .4em; white-space: nowrap; cursor: default;
}
.nav .nav-soon, .drawer__soon .num {
  font-size: .68em; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); background: var(--paper-3);
  border-radius: var(--radius-pill, 999px); padding: .15em .5em;
}
.nav a.nav-out { color: var(--ink-3); }
.drawer__soon {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--ink-4); cursor: default;
}
.drawer__nav a.drawer__out { color: var(--ink-3); }