/* ============================================================
   Mycelium — Brand System v2.0
   "The Standing Record + The Classification"
   Stylesheet v23 · 18 August 2026

   Governing rule: colour tells you what it is; ink tells you
   where it stands. Classification is carried by hue and is
   always accompanied by its Roman numeral. State is carried by
   geometry, always in ink. The two axes never swap.

   No cobalt. No monospace. No red-amber-green. No fifth colour.
   ============================================================ */

/* ---------- 1. FONTS ---------- */

@font-face {
  font-family: 'MycSans';
  src: url('/assets/fonts/schibsted-grotesk-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MycSerif';
  src: url('/assets/fonts/source-serif-4-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MycSerif';
  src: url('/assets/fonts/source-serif-4-italic-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. TOKENS ---------- */

:root {
  /* Grounds, text, rules */
  --paper:        #F2F2F0;
  --white:        #FFFFFF;
  --ink:          #14161A;
  --ink-fixed:    #14161A;   /* never remapped — text on paper surfaces inside deep sections */
  --deep:         #14161A;
  --deep-soft:    #1D2024;
  --slate:        #5A6167;
  --meta:         #686F75;
  --on-dark:      #C9CDD1;
  --on-dark-meta: #8B9298;
  --hair:         #DDDEDB;
  --med:          #C6C8C4;

  /* Hairlines expressed as alpha so they work on any ground */
  --hair-a:       rgba(20,22,26,0.13);
  --med-a:        rgba(20,22,26,0.22);
  --hair-d:       rgba(201,205,209,0.14);
  --med-d:        rgba(201,205,209,0.26);

  /* Classification — light grounds */
  --cl-1: #6E2622;  /* I   Govern  */
  --cl-2: #1F5D5B;  /* II  Protect */
  --cl-3: #7A5C13;  /* III Operate */
  --cl-4: #7A4A6B;  /* IV  Enable  */

  /* Type */
  --sans:  MycSans, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: MycSerif, Georgia, 'Times New Roman', serif;

  /* Grid */
  --max:  1320px;
  --pad:  clamp(18px, 3.4vw, 48px);
  --rail: 64px;
  --gut:  clamp(18px, 1.9vw, 26px);   /* space either side of every internal rule */
}

/* Deep grounds remap the whole token set, not just classification.
   Every ratio below is verified against #14161A:
     white 18.11 · on-dark 11.33 · on-dark-meta 5.75
     I 5.31 · II 5.53 · III 5.62 · IV 6.34
   Remapping at the token layer means a component written once is correct
   on both grounds — the alternative is a per-element override for every
   muted text style, which is exactly how a system drifts out of AA. */
.sec-deep, .page-hero, .hero, .footer, .nav, .on-deep {
  --cl-1: #C9736C;
  --cl-2: #3E9C98;
  --cl-3: #B08A28;
  --cl-4: #B98BAC;
  --ink:    #FFFFFF;
  --slate:  #C9CDD1;
  --meta:   #8B9298;
  --hair-a: rgba(201,205,209,0.14);
  --med-a:  rgba(201,205,209,0.26);
}

/* ---------- 3. RESET AND BASE ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tabular figures are applied where numerals must align in a column —
   never globally. Schibsted Grotesk widens the full stop and comma to
   figure width under `tnum`, which puts a visible gap before every
   sentence-ending period in display type. */
.tabular, .figure-xl, .tbl td.num, .tbl th.num {
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- 4. TYPE SCALE ---------- */

.display {
  font-family: var(--sans);
  font-size: clamp(34px, 4.6vw, 58px);
  /* Spec value. Schibsted Grotesk's natural ink box is 1.24em, so at
     display sizes the ink extends a few px past the line box. That is
     normal for tight display leading and is absorbed by the 18px gap
     below — verified for collision at both breakpoints, not assumed. */
  line-height: 1.0;
  letter-spacing: -0.038em;
  font-weight: 600;
  margin: 0;
}
.h1 {
  font-family: var(--sans);
  font-size: clamp(29px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.034em;
  font-weight: 600;
  margin: 0;
}
.h2 {
  font-family: var(--sans);
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.030em;
  font-weight: 600;
  margin: 0;
}
.h3 {
  font-family: var(--sans);
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.2;
  letter-spacing: -0.024em;
  font-weight: 600;
  margin: 0;
}
.h4 {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0;
}

/* Continuous prose — serif, permitted only at ~40 words or more */
.prose {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate);
  margin: 18px 0 0;
  max-width: 62ch;
}
.prose.lead { font-size: 17.5px; line-height: 1.58; }
.prose.on-deep { color: var(--on-dark); }
.prose p { margin: 0 0 15px; }
.prose p:last-child { margin-bottom: 0; }

/* Short UI body — grotesque */
.body-s { font-family: var(--sans); font-size: 14.5px; line-height: 1.55; color: var(--slate); margin: 0; }

/* Label / eyebrow */
.label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta);
  display: block;
}
.label.on-deep { color: var(--on-dark-meta); }

/* Metadata and reference IDs */
.metadata { font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--meta); }
.metadata.on-deep { color: var(--on-dark-meta); }
.ref { font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--slate); }
.ref.on-deep { color: var(--on-dark-meta); }

.caption { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.01em; color: var(--meta); line-height: 1.5; }
.caption.on-deep { color: var(--on-dark-meta); }

/* ---------- 5. SECTIONS AND GROUNDS ---------- */

.sec { padding: clamp(64px, 8.5vw, 116px) 0; position: relative; }
.sec.tight { padding: clamp(44px, 6vw, 76px) 0; }
.sec-paper { background: var(--paper); color: var(--ink); }
.sec-white { background: var(--white); color: var(--ink); }
.sec-deep  { background: var(--deep);  color: var(--on-dark); }

.sec-head { margin-bottom: clamp(36px, 4.5vw, 56px); max-width: 62ch; }
.sec-head .label { margin-bottom: 16px; }
.sec-head .h1, .sec-head .h2 { max-width: 22ch; }
.sec-head .prose { margin-top: 16px; }

.reveal { opacity: 1; transform: none; transition: opacity .45s ease-out, transform .45s ease-out; }
html.js-ready .reveal { opacity: 0; transform: translateY(6px); }
html.js-ready .reveal.in { opacity: 1; transform: none; }

/* ---------- 6. THE MARGIN RAIL — structural signature ---------- */

.railed { display: grid; grid-template-columns: var(--rail) 1fr; }
.rail {
  border-right: 1px solid var(--hair-a);
  padding-top: 38px;
  display: flex;
  justify-content: center;
}
.sec-deep .rail, .hero .rail { border-right-color: var(--hair-d); }
.rail-text {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--meta);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  text-transform: uppercase;
}
.sec-deep .rail-text, .hero .rail-text { color: var(--on-dark-meta); }
.railed > .railed-body { padding-left: clamp(20px, 3vw, 40px); min-width: 0; }
@media (max-width: 860px) {
  .railed { grid-template-columns: 1fr; }
  .rail { display: none; }
  .railed > .railed-body { padding-left: 0; }
}

/* ---------- 7. CLASSIFICATION ---------- */

/* 7.1 The rail bar — 3px vertical bar */
.cl-bar { display: block; width: 3px; align-self: stretch; flex: none; }
.cl-bar.c1 { background: var(--cl-1); }
.cl-bar.c2 { background: var(--cl-2); }
.cl-bar.c3 { background: var(--cl-3); }
.cl-bar.c4 { background: var(--cl-4); }

/* 7.2 The label — numeral is mandatory and is part of the content */
.cl-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
}
.cl-label.c1 { color: var(--cl-1); }
.cl-label.c2 { color: var(--cl-2); }
.cl-label.c3 { color: var(--cl-3); }
.cl-label.c4 { color: var(--cl-4); }

/* 7.3 The band — four equal segments, covers and hero panels only */
.cl-band { display: flex; gap: 3px; }
.cl-band span { flex: 1; height: 4px; }
.cl-band span:nth-child(1) { background: var(--cl-1); }
.cl-band span:nth-child(2) { background: var(--cl-2); }
.cl-band span:nth-child(3) { background: var(--cl-3); }
.cl-band span:nth-child(4) { background: var(--cl-4); }

/* ---------- 8. STATE MARKS ---------- */
/* Fill = evidence. Border = provisional. Rules = approval chain.
   Strike = superseded. Always ink, never a classification colour.
   A mark never appears without its text label. */

.mk {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  width: 12px;
  vertical-align: middle;
}
.mk i {
  display: block;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  font-style: normal;
}
.mk u { display: block; width: 12px; height: 2px; background: currentColor; }

.mk-draft      i { border: 1.5px dashed currentColor; }
.mk-pending    i { border: 1.5px dotted currentColor; }
.mk-absent     i { border: 1.5px solid currentColor; }
.mk-partial    i { border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.mk-evidenced  i { background: currentColor; }
.mk-attested   i { background: currentColor; }
.mk-approved   i { background: currentColor; }
.mk-superseded i { border: 1.5px solid currentColor; background: linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%); opacity: 0.55; }

.state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}
.sec-deep .state, .hero .state, .footer .state { color: var(--on-dark); }
.state .txt { white-space: nowrap; }

/* Exception — the only element permitted to interrupt a layout */
.exception {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--med-a);
  margin-top: 4px;
}
.exception::before { content: ''; display: block; width: 3px; align-self: stretch; min-height: 20px; background: var(--ink); flex: none; }
.sec-deep .exception::before { background: var(--on-dark); }

/* ---------- 9. THE MYCELIUM ENTRY ---------- */

.entries { display: block; }
.entry {
  display: grid;
  grid-template-columns: 3px 76px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--hair-a);
}
.sec-deep .entry, .hero .entry { border-top-color: var(--hair-d); }
.entry .e-title { font-family: var(--serif); font-size: 16px; color: var(--ink); line-height: 1.35; }
.sec-deep .entry .e-title, .hero .entry .e-title { color: var(--on-dark); }
.entry .state .txt { min-width: 74px; color: var(--meta); font-weight: 600; }
.sec-deep .entry .state .txt, .hero .entry .state .txt { color: var(--on-dark-meta); }
.entries-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 16px;
}
.sec-deep .entries-head, .hero .entries-head { color: var(--on-dark-meta); }
@media (max-width: 620px) {
  .entry { grid-template-columns: 3px minmax(0,1fr); gap: 12px; row-gap: 10px; padding: 16px 0; }
  .entry .btn { grid-column: 2; justify-self: start; width: auto; max-width: 100%; }
  .entry .ref { grid-column: 2; }
  .entry .e-title { grid-column: 2; }
  .entry .state { grid-column: 2; }
}

/* ---------- 10. BUTTONS AND LINKS ---------- */
/* The master accent is ink. Buttons are ink-filled with paper text. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity .15s, border-color .15s, background-color .15s;
  border-radius: 0;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { opacity: 0.88; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--med-a); }
.btn-secondary:hover { border-color: var(--ink); }

.on-deep .btn-primary, .hero .btn-primary, .sec-deep .btn-primary, .page-hero .btn-primary { background: var(--white); color: var(--ink-fixed); }
.on-deep .btn-secondary, .hero .btn-secondary, .sec-deep .btn-secondary, .page-hero .btn-secondary { color: var(--white); border-color: rgba(255,255,255,0.30); }
.on-deep .btn-secondary:hover, .hero .btn-secondary:hover, .sec-deep .btn-secondary:hover, .page-hero .btn-secondary:hover { border-color: var(--white); }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

/* Links — ink with a 1px underline */
.link {
  color: var(--ink);
  border-bottom: 1px solid var(--med-a);
  padding-bottom: 1px;
  font-weight: 500;
  transition: border-color .15s;
}
.link:hover { border-bottom-color: var(--ink); }
.sec-deep .link, .hero .link, .footer .link, .page-hero .link { color: var(--on-dark); border-bottom-color: var(--med-d); }
.sec-deep .link:hover, .hero .link:hover, .footer .link:hover, .page-hero .link:hover { border-bottom-color: var(--on-dark); }

.link-row { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }

/* Focus — 2px ink at 2px offset, never removed */
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.sec-deep a:focus-visible, .hero a:focus-visible, .footer a:focus-visible, .nav a:focus-visible, .nav button:focus-visible, .page-hero a:focus-visible {
  outline-color: var(--on-dark);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink-fixed); color: var(--paper);
  padding: 12px 18px; font-weight: 600; font-size: 14px; font-family: var(--sans);
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- 11. NAVIGATION ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20,22,26,0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair-d);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 17px var(--pad); max-width: var(--max); margin: 0 auto;
}

/* Logo — geometry unchanged. The gate takes ink or paper only. */
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: -0.005em; color: var(--on-dark); white-space: nowrap; }
.brand-mark {
  width: 23px; height: 23px; flex: none;
  border-radius: 4px; background: var(--on-dark); color: var(--ink-fixed);
  display: grid; place-items: center;
}
/* Generated content, so the M never appears in textContent. */
.brand-mark::before { content: 'M'; font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1; }
/* The gate. Kerning is symmetric margin, not a word space, so the mark
   still reads as one word — treatment B of the tested matrix (0.055em).
   The bar takes METADATA INK: classification-neutral, already a system
   token, and AA on both grounds (4.55:1 on paper, 5.75:1 on deep).
   No exception to Brand v2.0 §8 is required — this is ink, not colour. */
.gate { font-weight: 400; margin: 0 0.055em; color: var(--meta); }
.tm { font-size: 0.5em; vertical-align: super; opacity: 0.6; font-weight: 400; margin-left: 1px; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-family: var(--sans); font-size: 13px; letter-spacing: 0.01em; color: var(--on-dark-meta); transition: color .15s; white-space: nowrap; }
.nav-links a:hover { color: var(--on-dark); }
.nav-links a.is-active { color: var(--on-dark); font-weight: 600; }
.nav-cta { background: var(--white); color: var(--ink-fixed) !important; padding: 10px 18px; font-weight: 600; font-size: 13px; }
.nav-cta:hover { opacity: 0.9; }
.nav-burger { display: none; background: none; border: 0; width: 36px; height: 36px; color: var(--on-dark); cursor: pointer; }

@media (max-width: 1000px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--deep); border-bottom: 1px solid var(--hair-d);
    padding: 8px var(--pad) 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; color: var(--on-dark); border-bottom: 1px solid var(--hair-d); }
  .nav-cta { margin-top: 12px; text-align: center; justify-content: center; display: block; border-bottom: 0; }
  .nav-burger { display: inline-grid; place-items: center; }
}

/* ---------- 12. HEROES ---------- */

.hero { background: var(--deep); color: var(--on-dark); padding: 0; }
.hero .railed { align-items: stretch; }
.hero-body { padding: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 76px); }
.hero .display { color: var(--white); margin: 20px 0 0; max-width: 15ch; }
.hero .prose { max-width: 44ch; margin-top: 20px; }

.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 4.4vw, 52px); align-items: start; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.page-hero { background: var(--deep); color: var(--on-dark); padding: 0; }
.page-hero-body { padding: clamp(48px, 6vw, 76px) 0 clamp(40px, 5vw, 60px); }
.page-hero .h1 { color: var(--white); max-width: 20ch; margin-top: 18px; }
.page-hero .prose { max-width: 52ch; }
.crumb { font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-meta); margin-bottom: 22px; }
.crumb a { color: var(--on-dark-meta); border-bottom: 1px solid transparent; }
.crumb a:hover { color: var(--on-dark); border-bottom-color: var(--on-dark-meta); }

/* ---------- 13. THE JOURNEY RAIL (Z54) ---------- */
/* The five-stage buyer journey. Ink only — never a classification
   colour, never a Roman numeral, never a state mark. This is what
   keeps "Govern", "Enable" and "Operate" as stages distinguishable
   from the pillars of the same name. */

.journey {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--med-a);
}
.journey-step {
  padding: 22px var(--gut) 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.journey-step + .journey-step { border-left: 1px solid var(--hair-a); }
.journey-step .jn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--meta);
 
}
.journey-step .jt { font-family: var(--sans); font-size: 19px; font-weight: 600; letter-spacing: -0.024em; color: var(--ink); }
.journey-step .js { font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--slate); }
.sec-deep .journey, .hero .journey { border-top-color: var(--med-d); }
.sec-deep .journey-step, .hero .journey-step { border-left-color: var(--hair-d); }
.sec-deep .journey-step .jn, .hero .journey-step .jn { color: var(--on-dark-meta); }
.sec-deep .journey-step .jt, .hero .journey-step .jt { color: var(--on-dark); }
.sec-deep .journey-step .js, .hero .journey-step .js { color: var(--on-dark-meta); }
@media (max-width: 1000px) {
  .journey { grid-template-columns: repeat(2, 1fr); }
  .journey-step { padding-left: var(--gut); padding-right: var(--gut); }
  .journey-step + .journey-step:nth-child(2n+1), .journey-step:nth-child(2n+1) { border-left: 0; }
  .journey-step:not(:nth-child(2n+1)) { border-left: 1px solid var(--hair-a); }
  .journey-step:nth-child(n+3) { border-top: 1px solid var(--hair-a); }
}
@media (max-width: 560px) {
  .journey { grid-template-columns: 1fr; }
  .journey-step + .journey-step { border-left: 0; }
  .journey-step + .journey-step { border-top: 1px solid var(--hair-a); }
}

/* ---------- 14. THE GOVERNANCE FLOW ---------- */
/* Orthogonal boxes, 1px rules, right angles only.
   No rounded shapes, no drop shadows, no icons inside nodes. */

.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--med-a); }
.flow-step {
  padding: 20px var(--gut) 22px;
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
  background: transparent;
}
.flow-step + .flow-step { border-left: 1px solid var(--hair-a); }
.flow-step .fs-n { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--meta); }
.flow-step .fs-t { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); line-height: 1.25; }
.flow-step .fs-s { font-family: var(--sans); font-size: 12.5px; line-height: 1.4; color: var(--slate); }
/* The gate is the point — marked by ink weight, not by colour */
.flow-step.is-gate { background: var(--white); box-shadow: inset 0 3px 0 var(--ink); }
.flow-step.is-gate .fs-t { font-weight: 700; }
.flow-cap { margin: 16px 0 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--slate); max-width: 62ch; }

.sec-deep .flow, .hero .flow { border-color: var(--med-d); }
.sec-deep .flow-step, .hero .flow-step { border-left-color: var(--hair-d); }
.sec-deep .flow-step .fs-n, .hero .flow-step .fs-n { color: var(--on-dark-meta); }
.sec-deep .flow-step .fs-t, .hero .flow-step .fs-t { color: var(--white); }
.sec-deep .flow-step .fs-s, .hero .flow-step .fs-s { color: var(--on-dark-meta); }
.sec-deep .flow-step.is-gate, .hero .flow-step.is-gate { background: var(--deep-soft); box-shadow: inset 0 3px 0 var(--on-dark); }
.sec-deep .flow-cap, .hero .flow-cap { color: var(--on-dark-meta); }

@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; }
  .flow-step { border-left: 0; }
  .flow-step + .flow-step { border-left: 0; border-top: 1px solid var(--hair-a); }
  .sec-deep .flow-step + .flow-step, .hero .flow-step + .flow-step { border-top-color: var(--hair-d); }
}
/* Stacked variant for narrow columns */
.flow.is-stacked { grid-template-columns: 1fr; }
.flow.is-stacked .flow-step { border-left: 0; }
.flow.is-stacked .flow-step + .flow-step { border-left: 0; border-top: 1px solid var(--hair-a); }
.sec-deep .flow.is-stacked .flow-step + .flow-step, .hero .flow.is-stacked .flow-step + .flow-step { border-top-color: var(--hair-d); }

/* ---------- 15. PILLARS ---------- */

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--med-a); }
.pillar {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 16px;
  padding: 26px var(--gut) 28px;
  min-width: 0;
}
.pillar + .pillar { border-left: 1px solid var(--hair-a); }
.pillar:nth-child(1)::before { content: ''; background: var(--cl-1); }
.pillar:nth-child(2)::before { content: ''; background: var(--cl-2); }
.pillar:nth-child(3)::before { content: ''; background: var(--cl-3); }
.pillar:nth-child(4)::before { content: ''; background: var(--cl-4); }
.pillar .p-body { min-width: 0; }
.pillar .cl-label { display: block; margin-bottom: 10px; }
.pillar .p-range { font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--meta); margin-bottom: 14px; }
.pillar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pillar li { font-family: var(--sans); font-size: 13.5px; line-height: 1.35; color: var(--slate); }
@media (max-width: 1000px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .pillar { padding-left: var(--gut); padding-right: var(--gut); }
  .pillar + .pillar:nth-child(2n+1), .pillar:nth-child(2n+1) { border-left: 0; }
  .pillar:not(:nth-child(2n+1)) { border-left: 1px solid var(--hair-a); }
  .pillar:nth-child(n+3) { border-top: 1px solid var(--hair-a); }
}
@media (max-width: 560px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: 0; }
  .pillar + .pillar { border-top: 1px solid var(--hair-a); }
}

/* Data is cross-cutting — an ink rail carrying no classification colour */
.crosscut {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 16px;
  margin-top: 0;
  padding: 20px 0 22px;
  border-top: 1px solid var(--med-a);
}
.crosscut::before { content: ''; background: var(--ink); }
.sec-deep .crosscut::before, .hero .crosscut::before { background: var(--on-dark); }
.crosscut .cc-label { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; display: block; }
.sec-deep .crosscut .cc-label { color: var(--on-dark); }
.crosscut p { margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--slate); max-width: 72ch; }
.sec-deep .crosscut p { color: var(--on-dark-meta); }

/* ---------- 16. STANDARDS RAIL ---------- */

.standards-rail {
  margin-top: 36px; padding-top: 18px;
  border-top: 1px solid var(--hair-a);
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em;
  color: var(--meta); text-transform: uppercase; line-height: 1.9;
}
.sec-deep .standards-rail, .hero .standards-rail { border-top-color: var(--hair-d); color: var(--on-dark-meta); }

/* ---------- 17. TABLES ---------- */
/* Hairline row rules, no vertical rules, no zebra, tabular figures,
   right-aligned numerics. */

.tbl { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13.5px; }
.tbl th {
  text-align: left; font-weight: 700; font-size: 12px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--meta);
  padding: 0 12px 10px 0; border-bottom: 1px solid var(--med-a);
}
.tbl td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--hair-a); vertical-align: top; color: var(--ink); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
.tbl .t-dim { color: var(--slate); }
.sec-deep .tbl td { color: var(--on-dark); border-bottom-color: var(--hair-d); }
.sec-deep .tbl th { color: var(--on-dark-meta); border-bottom-color: var(--med-d); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 18. THE SCORECARD ---------- */
/* Fourteen dimensions, four rails, one glance. State marks in ink;
   classification by rail bar and numeral. No colour-graded cells. */

.scorecard { border: 1px solid var(--med-a); background: var(--white); padding: clamp(18px, 2.4vw, 26px); }
.scorecard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.scorecard-head .title { font-family: var(--sans); font-size: 14px; font-weight: 600; }
.sc-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13px; }
.sc-table th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--meta); padding: 0 10px 9px 0; border-bottom: 1px solid var(--med-a); }
.sc-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--hair-a); }
.sc-table td.sc-rail { padding: 0; width: 3px; }
.sc-table td.sc-rail span { display: block; width: 3px; height: 100%; min-height: 32px; }
.sc-table td.sc-num { width: 34px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; padding-left: 12px; }
.sc-table td.sc-num.c1 { color: var(--cl-1); }
.sc-table td.sc-num.c2 { color: var(--cl-2); }
.sc-table td.sc-num.c3 { color: var(--cl-3); }
.sc-table td.sc-num.c4 { color: var(--cl-4); }
.sc-table td.sc-dim { font-size: 13.5px; }
/* STATE column: a two-track grid — fixed symbol cell, fixed label start.
   Nothing moves left or right between rows, whatever the row height. */
.sc-table td.sc-state { padding-left: var(--gut); vertical-align: middle; width: 1%; white-space: nowrap; }
.sc-table td.sc-state .state {
  display: grid;
  grid-template-columns: 14px auto;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.sc-table td.sc-state .mk { justify-self: center; }
.sc-table td.sc-state .txt { text-align: left; color: var(--meta); font-size: 12px; letter-spacing: 0.08em; }
.sc-table td.sc-rail, .sc-table td.sc-num, .sc-table td.sc-dim { vertical-align: middle; }
.scorecard-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--med-a); }
.scorecard-foot .title { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--meta); margin-bottom: 12px; }
.priority-list { display: flex; flex-direction: column; gap: 10px; }
.priority-list .row { display: flex; gap: 12px; align-items: baseline; font-family: var(--sans); font-size: 13.5px; }
.priority-list .row .p-n { font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: var(--meta); flex: none; }
@media (max-width: 620px) {
  .sc-table td.sc-dim { font-size: 13px; }
  .sc-table td.sc-state .txt { font-size: 12px; letter-spacing: 0.04em; }
  .sc-table td.sc-state { padding-left: 12px; }
}

/* ---------- 19. THE BOUNDARY (accountability split) ---------- */

.boundary { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; border-top: 1px solid var(--med-a); }
.boundary-col { padding: 28px 34px 30px 0; min-width: 0; }
.boundary-col:last-child { padding: 28px 0 30px 34px; }
.boundary-rule { background: var(--med-a); }
.boundary-col .b-who { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); margin-bottom: 14px; display: block; }
.boundary-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.boundary-col li { font-family: var(--sans); font-size: 14.5px; line-height: 1.45; color: var(--ink); padding-left: 18px; position: relative; }
.boundary-col li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--ink); }
.sec-deep .boundary { border-top-color: var(--med-d); }
.sec-deep .boundary-rule { background: var(--med-d); }
.sec-deep .boundary-col li { color: var(--on-dark); }
.sec-deep .boundary-col li::before { background: var(--on-dark); }
.sec-deep .boundary-col .b-who { color: var(--on-dark-meta); }
@media (max-width: 780px) {
  .boundary { grid-template-columns: 1fr; }
  .boundary-col, .boundary-col:last-child { padding: 24px 0; border-top: 1px solid var(--hair-a); }
  .boundary-col:first-child { border-top: 0; }
  .boundary-rule { display: none; }
}

/* Independence rail — the constraints, beneath the boundary */
.independence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--med-a); margin-top: 0; }
.ind-item { padding: 24px var(--gut) 26px; min-width: 0; }
.ind-item + .ind-item { border-left: 1px solid var(--hair-a); }
.ind-item .i-n { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--meta); display: block; margin-bottom: 10px; }
.ind-item .i-c { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); display: block; margin-bottom: 8px; line-height: 1.25; }
.ind-item .i-b { font-family: var(--sans); font-size: 13.5px; line-height: 1.45; color: var(--slate); margin: 0; }
.sec-deep .independence { border-top-color: var(--med-d); }
.sec-deep .ind-item { border-left-color: var(--hair-d); }
.sec-deep .ind-item .i-n { color: var(--on-dark-meta); }
.sec-deep .ind-item .i-c { color: var(--white); }
.sec-deep .ind-item .i-b { color: var(--on-dark-meta); }
@media (max-width: 860px) {
  .independence { grid-template-columns: 1fr; }
  .ind-item + .ind-item { border-left: 0; border-top: 1px solid var(--hair-a); }
}

/* ---------- 20. CARD PATTERNS ---------- */

.cards { display: grid; gap: 0; border-top: 1px solid var(--med-a); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards > .cd { padding: 28px var(--gut) 30px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cards-2 > .cd:not(:nth-child(2n+1)), .cards-3 > .cd:not(:nth-child(3n+1)), .cards-4 > .cd:not(:nth-child(4n+1)) { border-left: 1px solid var(--hair-a); }
.cd .cd-n { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--meta); }
.cd h3 { font-family: var(--sans); font-size: 19px; font-weight: 600; letter-spacing: -0.024em; margin: 0; color: var(--ink); }
.cd p { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--slate); margin: 0; }
.cd .cd-link { margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--ink); border-bottom: 0; display: inline-flex; gap: 6px; align-items: center; }
.cd .cd-link span { border-bottom: 1px solid var(--med-a); padding-bottom: 1px; }
.cd .cd-link:hover span { border-bottom-color: var(--ink); }
.sec-deep .cards, .hero .cards { border-top-color: var(--med-d); }
.sec-deep .cd, .hero .cd { border-left-color: var(--hair-d); }
.sec-deep .cd h3, .hero .cd h3 { color: var(--white); }
.sec-deep .cd p, .hero .cd p { color: var(--on-dark-meta); }
.sec-deep .cd .cd-n, .hero .cd .cd-n { color: var(--on-dark-meta); }
.sec-deep .cd .cd-link, .hero .cd .cd-link { color: var(--on-dark); }
.sec-deep .cd .cd-link span, .hero .cd .cd-link span { border-bottom-color: var(--med-d); }
@media (max-width: 1000px) {
  .cards-3, .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .cards-3 > .cd { padding-left: var(--gut); padding-right: var(--gut); }
  .cards-3 > .cd + .cards-3 > .cd:nth-child(2n+1), .cards-3 > .cd:nth-child(2n+1) { border-left: 0; }
  .cards-3 > .cd:not(:nth-child(2n+1)) { border-left: 1px solid var(--hair-a); }
  .cards-3 > .cd:not(:nth-child(3n+1)):nth-child(2n+1) { border-left: 0; }
  .cards-3 > .cd:nth-child(2n+1) { border-left: 0; }
  .cards-3 > .cd:nth-child(n+3) { border-top: 1px solid var(--hair-a); }
  .cards-4 > .cd { padding-left: var(--gut); padding-right: var(--gut); }
  .cards-4 > .cd + .cards-4 > .cd:nth-child(2n+1), .cards-4 > .cd:nth-child(2n+1) { border-left: 0; }
  .cards-4 > .cd:not(:nth-child(2n+1)) { border-left: 1px solid var(--hair-a); }
  .cards-4 > .cd:not(:nth-child(4n+1)):nth-child(2n+1) { border-left: 0; }
  .cards-4 > .cd:nth-child(2n+1) { border-left: 0; }
  .cards-4 > .cd:nth-child(n+3) { border-top: 1px solid var(--hair-a); }
}
@media (max-width: 620px) {
  .cards-2, .cards-3, .cards-4 { grid-template-columns: 1fr; }
  .cards-2 > .cd:not(:nth-child(2n+1)) { border-left: 0; }
  .cards-2 > .cd:not(:nth-child(2n+1)) { border-left: 0; }
  .cards-2 > .cd:nth-child(n+2) { border-top: 1px solid var(--hair-a); }
  .cards-2 > .cd + .cards-2 > .cd { border-top: 1px solid var(--hair-a); }
  .cards-3 > .cd:nth-child(3n+1) { padding-left: var(--gut); }
  .cards-3 > .cd:nth-child(3n) { padding-right: var(--gut); }
  .cards-3 > .cd:not(:nth-child(3n+1)) { border-left: 0; }
  .cards-3 > .cd:not(:nth-child(2n+1)) { border-left: 0; }
  .cards-3 > .cd:nth-child(n+2) { border-top: 1px solid var(--hair-a); }
  .cards-3 > .cd + .cards-3 > .cd { border-top: 1px solid var(--hair-a); }
  .cards-4 > .cd:nth-child(4n+1) { padding-left: var(--gut); }
  .cards-4 > .cd:nth-child(4n) { padding-right: var(--gut); }
  .cards-4 > .cd:not(:nth-child(4n+1)) { border-left: 0; }
  .cards-4 > .cd:not(:nth-child(2n+1)) { border-left: 0; }
  .cards-4 > .cd:nth-child(n+2) { border-top: 1px solid var(--hair-a); }
  .cards-4 > .cd + .cards-4 > .cd { border-top: 1px solid var(--hair-a); }
}

/* ---------- 21. NUMBERED LIST ---------- */

.num-list { list-style: none; padding: 0; margin: 0; }
.num-list li { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 22px 0; border-top: 1px solid var(--hair-a); }
.num-list li:first-child { border-top: 1px solid var(--med-a); }
.num-list .n { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--meta); padding-top: 3px; }
.num-list h3 { margin: 0 0 7px; font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -0.024em; }
.num-list p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--slate); max-width: 68ch; }
.sec-deep .num-list li { border-top-color: var(--hair-d); }
.sec-deep .num-list li:first-child { border-top-color: var(--med-d); }
.sec-deep .num-list h3 { color: var(--white); }
.sec-deep .num-list p { color: var(--on-dark-meta); }
.sec-deep .num-list .n { color: var(--on-dark-meta); }
@media (max-width: 620px) { .num-list li { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- 22. DIMENSION GRID ---------- */

.dim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--med-a); }
.dim-item { display: grid; grid-template-columns: 3px 46px 1fr; gap: 14px; padding: 17px var(--gut) 18px; border-bottom: 1px solid var(--hair-a); align-items: start; min-width: 0; }
.dim-item .d-id { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--slate); padding-top: 2px; }
.dim-item .d-name { font-family: var(--sans); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 3px; }
.dim-item p { margin: 0; font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--slate); }
@media (max-width: 720px) {
  .dim-grid { grid-template-columns: 1fr; }
}

/* ---------- 23. TIMELINE ---------- */

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--med-a); }
.tl-step { padding: 24px var(--gut) 26px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tl-step + .tl-step { border-left: 1px solid var(--hair-a); }
.tl-step .week { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.tl-step h3 { margin: 0; font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -0.024em; }
.tl-step p { margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--slate); }
.tl-step .tl-meta { margin-top: auto; padding-top: 12px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--meta); }
@media (max-width: 1000px) {
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .tl-step { padding-left: var(--gut); padding-right: var(--gut); }
  .tl-step + .tl-step:nth-child(2n+1), .tl-step:nth-child(2n+1) { border-left: 0; }
  .tl-step:not(:nth-child(2n+1)) { border-left: 1px solid var(--hair-a); }
  .tl-step:nth-child(n+3) { border-top: 1px solid var(--hair-a); }
}
@media (max-width: 560px) {
  .timeline { grid-template-columns: 1fr; }
  .tl-step + .tl-step { border-left: 0; }
  .tl-step + .tl-step { border-top: 1px solid var(--hair-a); }
}

/* ---------- 24. AGENT / MODULE CARDS ---------- */

.agent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--med-a); }
.agent-card { display: grid; grid-template-columns: 3px 1fr; gap: 16px; padding: 24px var(--gut) 26px; border-bottom: 1px solid var(--hair-a); min-width: 0; }
.agent-card .a-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.agent-card h3 { margin: 0 0 7px; font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -0.024em; }
.agent-card p { margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--slate); }
.agent-card .scope { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair-a); font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--meta); }
@media (max-width: 720px) {
  .agent-grid { grid-template-columns: 1fr; }
}

/* ---------- 25. SECTOR GRID ---------- */

.sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--med-a); }
.sector { padding: 22px var(--gut) 24px; min-width: 0; }
.sector:not(:nth-child(4n+1)) { border-left: 1px solid var(--hair-a); }
.sector .label { margin-bottom: 8px; }
.sector .name { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
@media (max-width: 1000px) {
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .sector { padding-left: var(--gut); padding-right: var(--gut); }
  .sector + .sector:nth-child(2n+1), .sector:nth-child(2n+1) { border-left: 0; }
  .sector:not(:nth-child(2n+1)) { border-left: 1px solid var(--hair-a); }
  .sector:nth-child(n+3) { border-top: 1px solid var(--hair-a); }
}
@media (max-width: 480px) {
  .sector-grid { grid-template-columns: 1fr; }
  .sector:nth-child(4n+1) { padding-left: var(--gut); }
  .sector:nth-child(4n) { padding-right: var(--gut); }
  .sector:not(:nth-child(4n+1)) { border-left: 0; }
  .sector:not(:nth-child(2n+1)) { border-left: 0; }
  .sector:nth-child(n+2) { border-top: 1px solid var(--hair-a); }
  .sector + .sector { border-top: 1px solid var(--hair-a); }
}

/* ---------- 26. PRINCIPAL ---------- */

.principal { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 780px) { .principal { grid-template-columns: 1fr; } }
.principal .portrait { aspect-ratio: 4 / 5; margin: 0; overflow: hidden; background: var(--white); max-width: 340px; border: 1px solid var(--hair-a); }
.principal .portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.principal .name { font-family: var(--sans); font-size: 24px; font-weight: 600; letter-spacing: -0.030em; margin: 0 0 6px; }
.principal .role { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); margin-bottom: 18px; display: block; }
.principal .links { margin-top: 22px; display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- 27. DELIVERABLES ---------- */

.deliverables { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--med-a); }
.deliverable { padding: 28px var(--gut) 30px; min-width: 0; }
.deliverable h3 { margin: 12px 0 10px; font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -0.030em; }
.deliverable p { margin: 0 0 14px; font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--slate); }
.deliverable ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.deliverable li { font-family: var(--sans); font-size: 13.5px; line-height: 1.4; color: var(--slate); padding-left: 16px; position: relative; }
.deliverable li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--ink); }
@media (max-width: 720px) {
  .deliverables { grid-template-columns: 1fr; }
  .deliverables .deliverable:nth-child(2n) { border-left: 0; }
  .deliverable:nth-child(n+2) { border-top: 1px solid var(--hair-a); }
  .deliverable + .deliverable { border-top: 1px solid var(--hair-a); }
}

/* ---------- 28. AUDIT LOG ---------- */

.audit-log {
  margin-top: 22px; background: var(--deep); color: var(--on-dark);
  padding: 15px 20px;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.02em; line-height: 1.85;
  overflow-wrap: anywhere;
}
.audit-log .k { color: var(--on-dark-meta); }
.audit-log .v { color: var(--white); }
.sec-deep .audit-log { border: 1px solid var(--med-d); }

/* ---------- 29. EDITORIAL MODE ---------- */
/* Permitted on campaign surfaces only. One oversized element per
   composition. Ghost words are aria-hidden and never unique content. */

.ghost {
  font-family: var(--sans); font-weight: 600; letter-spacing: -0.05em;
  font-size: clamp(72px, 13vw, 150px); line-height: 0.85;
  color: rgba(20,22,26,0.045); pointer-events: none; user-select: none;
}
.sec-deep .ghost { color: rgba(255,255,255,0.05); }
.figure-xl { font-family: var(--sans); font-weight: 600; letter-spacing: -0.05em; font-size: clamp(64px, 9vw, 110px); line-height: 0.9; font-variant-numeric: tabular-nums; }
.figure-xl .unit { font-size: 0.25em; letter-spacing: 0.06em; font-weight: 600; margin-left: 0.15em; vertical-align: 0.9em; }

/* ---------- 30. PULLQUOTE ---------- */

.pullquote { border-top: 1px solid var(--med-a); padding-top: 26px; }
.pullquote q { display: block; font-family: var(--sans); font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.030em; line-height: 1.2; color: var(--ink); quotes: '\201C' '\201D'; max-width: 24ch; }
.pullquote .attrib { margin-top: 18px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.sec-deep .pullquote { border-top-color: var(--med-d); }
.sec-deep .pullquote q { color: var(--white); }
.sec-deep .pullquote .attrib { color: var(--on-dark-meta); }

/* ---------- 31. SPLIT LAYOUT ---------- */

.split { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 4.4vw, 60px); align-items: start; }
.split.narrow-first { grid-template-columns: 0.82fr 1.18fr; }
@media (max-width: 900px) { .split, .split.narrow-first { grid-template-columns: 1fr; } }

/* ---------- 32. FORMS ---------- */

.form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.form-field label { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--meta); }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--med-a); background: var(--white);
  border-radius: 0; width: 100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--ink); }
.form-note { font-family: var(--sans); font-size: 12.5px; color: var(--meta); line-height: 1.5; margin: 12px 0 0; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- 33. CTA BLOCK ---------- */

.cta-block { border-top: 1px solid var(--med-a); padding-top: clamp(32px, 4vw, 48px); }
.cta-block .h1 { max-width: 18ch; }
.cta-block .cta-row { margin-top: 28px; }
.cta-block .metadata { margin-top: 22px; letter-spacing: 0.14em; text-transform: uppercase; }
.sec-deep .cta-block { border-top-color: var(--med-d); }

/* ---------- 34. FOOTER ---------- */

.footer { background: var(--deep); color: var(--on-dark); padding: clamp(48px, 6vw, 72px) 0 26px; }
.footer .cl-band { margin-bottom: clamp(36px, 4vw, 52px); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 40px); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer .brand-block { display: flex; flex-direction: column; gap: 14px; }
.footer .brand-block .tagline { font-family: var(--sans); font-size: 13.5px; color: var(--on-dark-meta); max-width: 32ch; line-height: 1.5; }
.footer .col h3, .footer .col .foot-h { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--on-dark-meta); letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 16px; }
.footer .col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer .col a { font-family: var(--sans); font-size: 13.5px; color: var(--on-dark); border-bottom: 1px solid transparent; }
.footer .col a:hover { border-bottom-color: var(--on-dark-meta); }
.footer-meta {
  margin-top: clamp(36px, 4vw, 52px); padding-top: 20px;
  border-top: 1px solid var(--hair-d);
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em;
  color: var(--on-dark-meta); line-height: 1.8;
}
.footer-copyright { margin-top: 10px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.02em; color: var(--on-dark-meta); line-height: 1.7; max-width: 92ch; }

/* ---------- 35. 404 ---------- */

.notfound { background: var(--paper); color: var(--ink); min-height: 62vh; display: flex; align-items: center; padding: clamp(56px, 8vw, 110px) 0; }
.notfound .display { max-width: 16ch; }

/* ---------- 36. UTILITIES ---------- */

.stack-sm > * + * { margin-top: 10px; }
.stack-md > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 36px; }
.mt-0 { margin-top: 0 !important; }
.mt-sm { margin-top: 14px; }
.mt-md { margin-top: 28px; }
.mt-lg { margin-top: 44px; }
.measure { max-width: 62ch; }
.nowrap { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 37. REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- 38. PRINT ---------- */
/* The system must survive being photocopied. */

@media print {
  .nav, .skip-link, .cta-row, .nav-burger { display: none !important; }
  body { background: #fff; color: #000; }
  .sec-deep, .hero, .page-hero, .footer { background: #fff !important; color: #000 !important; }
  .sec-deep *, .hero *, .page-hero *, .footer * { color: #000 !important; }
  .sec { padding: 24pt 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}


/* ============================================================
   39. GUTTER MODEL  (v22)
   Symmetric padding on every ruled-grid child at every width; the grid is
   pulled outward by one gutter so outer edges align with the container.
   Column count governs only where the hairline is drawn.
   ============================================================ */

.journey, .pillars, .independence, .timeline,
.sector-grid, .dim-grid, .agent-grid, .deliverables, .cards {
  margin-left: calc(var(--gut) * -1);
  margin-right: calc(var(--gut) * -1);
}
.journey-step, .pillar, .ind-item, .tl-step,
.sector, .dim-item, .agent-card, .deliverable, .cards > .cd {
  padding-left: var(--gut) !important;
  padding-right: var(--gut) !important;
}

/* Rules: drawn on every item after the first in its row. */
.journey-step + .journey-step,
.pillar + .pillar,
.ind-item + .ind-item,
.tl-step + .tl-step,
.cards > .cd + .cd,
.sector + .sector,
.dim-item + .dim-item,
.agent-card + .agent-card,
.deliverable + .deliverable { border-left: 1px solid var(--hair-a); }

.sec-deep .journey-step + .journey-step, .hero .journey-step + .journey-step,
.sec-deep .pillar + .pillar,
.sec-deep .ind-item + .ind-item,
.sec-deep .tl-step + .tl-step,
.sec-deep .cards > .cd + .cd, .hero .cards > .cd + .cd,
.sec-deep .sector + .sector,
.sec-deep .dim-item + .dim-item,
.sec-deep .agent-card + .agent-card,
.sec-deep .deliverable + .deliverable { border-left-color: var(--hair-d); }

/* First item of each row carries no left rule. Column counts per breakpoint. */
.journey-step:nth-child(4n+1), .pillar:nth-child(4n+1),
.sector-grid .sector:nth-child(4n+1), .cards-4 > .cd:nth-child(4n+1) { border-left: 0; }
.cards-3 > .cd:nth-child(3n+1), .ind-item:nth-child(3n+1) { border-left: 0; }
.cards-2 > .cd:nth-child(2n+1), .dim-item:nth-child(2n+1),
.agent-card:nth-child(2n+1), .deliverable:nth-child(2n+1) { border-left: 0; }
.timeline .tl-step:nth-child(4n+1) { border-left: 0; }

@media (max-width: 1000px) {
  .journey-step:nth-child(2n+1), .pillar:nth-child(2n+1),
  .tl-step:nth-child(2n+1), .sector:nth-child(2n+1),
  .cards-3 > .cd:nth-child(2n+1), .cards-4 > .cd:nth-child(2n+1) { border-left: 0; }
  .journey-step:nth-child(4n+1), .pillar:nth-child(4n+1),
  .tl-step:nth-child(4n+1), .sector:nth-child(4n+1),
  .cards-3 > .cd:nth-child(3n+1), .cards-4 > .cd:nth-child(4n+1) { border-left: 1px solid var(--hair-a); }
  .journey-step:nth-child(2n+1), .pillar:nth-child(2n+1),
  .tl-step:nth-child(2n+1), .sector:nth-child(2n+1),
  .cards-3 > .cd:nth-child(2n+1), .cards-4 > .cd:nth-child(2n+1) { border-left: 0; }
}

/* Single column: no vertical rules at all; rows separate horizontally. */
@media (max-width: 620px) {
  .journey-step, .pillar, .ind-item, .tl-step,
  .sector, .dim-item, .agent-card, .deliverable, .cards > .cd,
  .journey-step + .journey-step, .pillar + .pillar, .ind-item + .ind-item,
  .tl-step + .tl-step, .cards > .cd + .cd, .sector + .sector,
  .dim-item + .dim-item, .agent-card + .agent-card, .deliverable + .deliverable {
    border-left: 0;
  }
  .journey-step + .journey-step, .pillar + .pillar, .ind-item + .ind-item,
  .tl-step + .tl-step, .cards > .cd + .cd, .sector + .sector,
  .agent-card + .agent-card, .deliverable + .deliverable {
    border-top: 1px solid var(--hair-a);
  }
  .sec-deep .journey-step + .journey-step, .sec-deep .pillar + .pillar,
  .sec-deep .ind-item + .ind-item, .sec-deep .tl-step + .tl-step,
  .sec-deep .cards > .cd + .cd { border-top-color: var(--hair-d); }
}

/* The flow box carries its own border, so its steps keep their padding. */
.flow-step { padding-left: var(--gut); padding-right: var(--gut); }

/* Cross-cutting footnotes — a note, not a panel. */
.footnote {
  font-family: var(--sans); font-size: 13px; line-height: 1.5;
  color: var(--meta); margin: 10px 0 0; max-width: 76ch;
}
.footnote:first-of-type { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair-a); }
.footnote strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   Consent bar — v23.
   The site sets no advertising cookie until a visitor opts in.
   Ink-only, no colour: this is state, and state is geometry.
   ============================================================ */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: var(--paper); border-top: 1px solid var(--ink);
  box-shadow: 0 -8px 32px rgba(20,22,26,0.10);
  transform: translateY(101%); transition: transform .28s ease;
}
.consent.is-open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }
.consent-inner {
  max-width: 1180px; margin: 0 auto; padding: 20px 24px 22px;
  display: flex; gap: 28px; align-items: flex-start; justify-content: space-between;
}
.consent-copy { max-width: 74ch; }
.consent-label {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta);
  display: block; margin-bottom: 7px;
}
.consent-copy p {
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  color: var(--ink); margin: 0;
}
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; padding-top: 2px; }
.consent .btn { font-size: 13px; padding: 10px 20px; white-space: nowrap; }
@media (max-width: 720px) {
  .consent-inner { flex-direction: column; gap: 14px; padding: 16px 20px 18px; }
  .consent-copy p { font-size: 13px; line-height: 1.5; }
  .consent-actions { width: 100%; }
  .consent .btn { flex: 1; text-align: center; }
}

/* Choice control on the privacy page. */
.consent-state {
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  margin: 18px 0 0; padding: 16px 18px; background: var(--paper);
  border-left: 2px solid var(--ink);
}
.consent-state .consent-current { font-weight: 600; }
.consent-state .btn { margin-top: 12px; font-size: 13px; padding: 9px 18px; }


/* ============================================================
   INDEPENDENCE — four constraints (v2.5)
   Appended last so these beat the generic row rules above.
   ============================================================ */
.independence { grid-template-columns: repeat(4, 1fr); }
.ind-item { border-left: 1px solid var(--hair-a); border-top: 0; }
.ind-item:nth-child(4n+1) { border-left: 0; }
.sec-deep .ind-item { border-left-color: var(--hair-d); }

@media (max-width: 1000px) {
  .independence { grid-template-columns: repeat(2, 1fr); }
  .ind-item:nth-child(2n+1) { border-left: 0; }
  .ind-item:not(:nth-child(2n+1)) { border-left: 1px solid var(--hair-a); }
  .sec-deep .ind-item:not(:nth-child(2n+1)) { border-left-color: var(--hair-d); }
  .ind-item:nth-child(n+3) { border-top: 1px solid var(--hair-a); }
  .sec-deep .ind-item:nth-child(n+3) { border-top-color: var(--hair-d); }
}

@media (max-width: 860px) {
  .independence { grid-template-columns: 1fr; }
  .ind-item { border-left: 0; }
  .ind-item + .ind-item { border-left: 0; border-top: 1px solid var(--hair-a); }
  .sec-deep .ind-item + .ind-item { border-top-color: var(--hair-d); }
}

/* ============================================================
   DECLARED EACH TIME — three tests, in a row of three (v2.6)
   The four constraints above are properties of the business model
   and hold whoever is in the room. These three turn on the
   engagement, so they are declared rather than published.
   Only the column count differs: the rule and wrap behaviour
   inherited from .ind-item is already correct for three items.
   ============================================================ */
.independence.ind-3 { grid-template-columns: repeat(3, 1fr); }
.ind-label { margin-bottom: 14px; }

@media (max-width: 1000px) {
  .independence.ind-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .independence.ind-3 { grid-template-columns: 1fr; }
}