@charset "utf-8";
/* ==========================================================================
   Eigenvector Group — "Invariant Folio"
   --------------------------------------------------------------------------
   MOTIF LAW  A = [1.6 0.6 ; 0.4 1.4]   trace 3, det 2
              λ₁ = 2, eigenvector (3, 2)      λ₂ = 1, eigenvector (1, −1)
              Because λ₂ = 1 exactly, every vector on span{(1,−1)} is FIXED.
              Screen space (y down): (1,−1) → 45° down-right; (3,2) → slope −2/3.
              These are the ONLY two non-orthogonal directions on the site.

   MOTIF CAP  Five expressions, no more: (1) hero figure, (2) the mark,
              (3) the annotation segment, (4) the no-data hatch, (5) the footer
              signature. Adding a sixth is a defect.

   AMBER BUDGET  Per viewport-height of scroll: max THREE amber marks; ZERO
              amber fills over 96×2px. The checkbox glyph (20×20) is the one
              written exception. Amber is otherwise rules, ticks, link text
              and the focus ring.

   LAWS       border-radius: 0 everywhere (exception: input[type=radio]).
              box-shadow banned (exceptions: focus keyline, mobile drawer).
              opacity forbidden on any element containing text.
              transition: all banned. Only transform/opacity are animated.
              Every border uses `border`, never box-shadow — forced-colors
              depends on it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01  FONTS
   NOTE: the <link> to fonts.googleapis.com lives in each document <head>.
   To self-host (recommended — see README "Fonts and GDPR"), drop the woff2
   files into assets/fonts/, delete the <link>, and uncomment the @font-face
   block in assets/css/fonts-selfhost.css.
   -------------------------------------------------------------------------- */

/* Metric-matched fallback so the condensed display face does not shift.
   Declared BEFORE the generic fallbacks in --font-display. */
@font-face {
  font-family: 'PlexCondFallback';
  src: local('Arial Narrow'), local('Helvetica Neue Condensed'), local('Liberation Sans Narrow');
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   02  PALETTE
   Every ratio below is computed from the shipped hex (sRGB, WCAG 2.1),
   not estimated. The smallest text figure on the board is 4.61:1.
   -------------------------------------------------------------------------- */
:root {
  /* Grounds */
  --navy-950: #02050B;  /* deepest plate: footer, wells, bezel ground */
  --navy-900: #0B1627;  /* primary page surface */
  --navy-800: #1A2C48;  /* panels, cards, stat cells   step 1.293:1 */
  --navy-700: #223755;  /* raised / hover              step 1.166:1 */

  /* Lines. --rule is DECORATIVE and legal only on --navy-950/900.
     --rule-strong is STRUCTURAL and legal on all four navies.
     --edge-control is the ONLY border permitted on an interactive control. */
  --rule:          #40567A;  /* 2.75 / 2.44 on 950 / 900 */
  --rule-strong:   #586F92;  /* 3.99 / 3.54 / 2.74 / 2.35 */
  --edge-control:  #7089AE;  /* 5.71 / 5.08 / 3.92 / 3.37 — all ≥3:1 */

  /* Ink. No token darker than --ink-400 ever sets text. */
  --ink-050: #EEF3F9;  /* headings, wordmark, stat figures, primary btn fill  16.25 */
  --ink-100: #DCE6F0;  /* body on panels, attestation quote                   14.35 */
  --ink-200: #C2CEDD;  /* DEFAULT BODY COPY                                   11.37 */
  --ink-300: #A6B4C7;  /* card copy, nav at rest, form labels                  8.61 */
  --ink-400: #9BAABF;  /* muted metadata FLOOR                                 7.68 */

  /* The mark. Lines and ticks only. */
  --signal-500: #D9A441;  /* the invariant line, segments, ticks */
  --signal-400: #E6B45E;  /* amber as TEXT — links, § numerals    9.54 */
  --signal-300: #F0C87E;  /* focus ring, link hover              11.45 */
  --signal-700: #8A6420;  /* NON-TEXT only: rest underline colour 3.39 */

  /* Status */
  --status-alert: #F08074;  /* 6.95 on 900 — always paired with a glyph + "Error: " */
  --status-ok:    #5FD3A8;  /* 9.82 on 900 */

  /* .surface-paper — an inset sheet, not a theme switch */
  --paper-050:       #F3F6F9;
  --paper-ink:       #06090F;  /* 18.37 on paper */
  --paper-ink-muted: #4A5F75;  /*  6.08 */
  --paper-rule:      #AEBBC8;
  --paper-edge:      #6E7E90;  /*  3.83 */
  --paper-accent:    #8F5D08;  /*  5.18 — the only ochre permitted on paper */

  /* ---- Alias layer. Components consume ONLY these. ---- */
  --bg:             var(--navy-900);
  --bg-plate:       var(--navy-950);
  --bg-panel:       var(--navy-800);
  --bg-hover:       var(--navy-700);
  --text:           var(--ink-200);
  --text-strong:    var(--ink-050);
  --text-panel:     var(--ink-100);
  --text-secondary: var(--ink-300);
  --text-muted:     var(--ink-400);
  --hairline:        var(--rule);
  --hairline-strong: var(--rule-strong);
  --border:          var(--edge-control);
  --accent:        var(--signal-500);
  --accent-text:   var(--signal-400);
  --accent-hover:  var(--signal-300);
  --accent-decor:  var(--signal-700);
  --on-accent-fill: var(--navy-950);
  --btn-fill:       var(--ink-050);
  --focus:          var(--signal-300);
  --focus-keyline:  var(--navy-950);
  --radius: 0;

  /* ---- Type families ---- */
  --font-display: 'IBM Plex Sans Condensed', 'PlexCondFallback', 'Arial Narrow', 'IBM Plex Sans', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* ---- Type scale. Linear 360 → 1440; frozen at ≥1440. ---- */
  --fs-d1:      clamp(2.75rem, 2.0833rem + 2.963vw, 4.75rem);    /* 44 → 76 */
  --fs-d2:      clamp(2.25rem, 1.9167rem + 1.4815vw, 3.25rem);   /* 36 → 52 */
  --fs-h2:      clamp(1.625rem, 1.5rem + 0.556vw, 2rem);         /* 26 → 32 */
  --fs-h3:      clamp(1.125rem, 1.0833rem + 0.185vw, 1.25rem);   /* 18 → 20 */
  --fs-lead:    clamp(1.125rem, 1.0625rem + 0.278vw, 1.3125rem); /* 18 → 21 */
  --fs-body:    clamp(1rem, 0.9792rem + 0.093vw, 1.0625rem);     /* 16 → 17 */
  --fs-body-sm: clamp(0.875rem, 0.8542rem + 0.093vw, 0.9375rem); /* 14 → 15 */
  --fs-caption: clamp(0.8125rem, 0.8021rem + 0.046vw, 0.8438rem);/* 13 → 13.5 */
  --fs-label:   clamp(0.75rem, 0.7396rem + 0.046vw, 0.7813rem);  /* 12 → 12.5 */
  --fs-meta:    var(--fs-label);
  --fs-stat:    clamp(2.5rem, 2rem + 2.222vw, 4rem);             /* 40 → 64 */
  /* There is no 11px step and no sixth display step. */

  /* ---- Geometry ---- */
  --shell-max: 1360px;
  --rail: 0px;
  --rail-gap: 0px;
  --gutter: clamp(20px, 4vw, 48px);
  --cols: 4;
  --col-gap: 16px;
  --header-h: 64px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-rule:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-precise:  cubic-bezier(0.33, 0, 0, 1);
  --t-state:  120ms;
  --t-rule:   180ms;
  --t-panel:  240ms;
  --t-exit:   180ms;
  --t-reveal: 200ms;
  --t-figure: 1200ms;
}

/* Breakpoints: exactly five, min-width, literal px.
   (Custom properties do not work in media queries — do not attempt it.) */
@media (min-width: 600px)  { :root { --cols: 8;  --col-gap: 24px; } }
@media (min-width: 900px)  { :root { --header-h: 72px; } }
@media (min-width: 1200px) { :root { --cols: 12; --col-gap: 32px; --rail: 176px; --rail-gap: 40px; } }
@media (min-width: 2000px) { :root { --rail: 200px; } }

/* --------------------------------------------------------------------------
   03  RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
* { margin: 0; }
input[type="radio"] { border-radius: 50%; }  /* the ONE written exception */

html {
  font-size: 100%;                 /* never overridden; every step is rem */
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: 88px;
}
@media (min-width: 900px) { html { scroll-padding-block-start: 96px; } }

body {
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/1.65 var(--font-body);
  font-synthesis: none;            /* no faux bold, no faux italic, ever */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--signal-500); color: var(--navy-950); }
.surface-paper ::selection { background: #D8E2F2; color: var(--paper-ink); }

/* --------------------------------------------------------------------------
   04  FOCUS  — never transitioned; appears on the same frame as the event.
   The keyline fills the 3px offset so amber never abuts a light surface:
   on the primary button's --ink-050 fill, --signal-300 alone is 1.42:1;
   against the keyline it is 12.89:1.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--focus-keyline);
}
/* :focus { outline: none } is FORBIDDEN. */

.skip {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 200;
  background: var(--ink-050);
  color: var(--navy-950);
  padding: 12px 20px;
  font: 500 var(--fs-label)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   05  TYPOGRAPHY
   Tracking ramp is strictly monotone: it increases as size decreases and
   crosses zero at ~13.5px. -0.022em is banned outright at display sizes —
   the condensed 600 face already carries reduced sidebearings.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--text-strong);
  text-wrap: balance;
  overflow-wrap: normal;           /* headings never break a word */
}
p { text-wrap: pretty; }

.d1, h1.d1 {
  font-family: var(--font-display);
  font-size: var(--fs-d1);
  line-height: 1.02;
  letter-spacing: -0.012em;
  max-width: 20ch;
}
.d2, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  line-height: 1.06;
  letter-spacing: -0.011em;
  max-width: 18ch;
}
h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -0.009em;
  max-width: 24ch;
}
h3, .h3 {
  font-family: var(--font-body);   /* never condensed below 26px */
  font-size: var(--fs-h3);
  line-height: 1.30;
  letter-spacing: -0.006em;
  max-width: 26ch;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  letter-spacing: -0.010em;
  color: var(--text-secondary);
  max-width: 52ch;
}
.prose p { max-width: 68ch; letter-spacing: -0.008em; }
.prose p + p { margin-block-start: 20px; }
.prose h2 + p, .prose h3 + p { margin-block-start: 16px; }

.small { font-size: var(--fs-body-sm); line-height: 1.60; letter-spacing: -0.005em; }
.caption { font-size: var(--fs-caption); line-height: 1.50; letter-spacing: 0; color: var(--text-muted); }

/* Mono furniture. A paragraph in mono is a bug. */
.label {
  font: 500 var(--fs-label)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.meta {
  font: 400 var(--fs-meta)/1.40 var(--font-mono);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
}

/* Numerals: tabular in furniture, PROPORTIONAL in running prose. */
.tnum, .stat__figure, td, th, time, .meta { font-variant-numeric: tabular-nums lining-nums; }
.prose p, .lead { font-variant-numeric: proportional-nums lining-nums; }

/* Units render at 0.62em, baseline-aligned. Never <sup>. */
.unit { font-size: 0.62em; color: var(--text-muted); margin-inline-start: 0.1em; }

/* Emphasis: italic is neither loaded nor used. */
strong, b { font-weight: 600; color: var(--text-strong); }
em, i { font-style: normal; font-weight: 500; color: var(--text-strong); }

/* Prose links */
.prose a, .linked {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-decor);
  transition: color var(--t-state) var(--ease-standard),
              text-decoration-color var(--t-state) var(--ease-standard);
}
.prose a:hover, .linked:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-text);
  text-decoration-thickness: 2px;
}

/* Uppercase is permitted in exactly two places: mono furniture, and the
   wordmark. Title Case is forbidden everywhere. */

/* --------------------------------------------------------------------------
   06  THE FRAME
   Full-bleed WITHOUT the scrollbar bug: never `margin-inline: calc(50% - 50vw)`
   — 50vw includes the scrollbar and every band lands half a scrollbar off
   centre. The page root is a grid instead.

   --frame-max = rail + rail-gap + shell + 2×gutter
               = 176 + 40 + 1360 + 96 = 1672px  (1200–1999px)
               = 200 + 40 + 1360 + 96 = 1696px  (≥2000px)
   -------------------------------------------------------------------------- */
main,
.band,
.hdr__inner,
.ftr__inner {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [rail-start] var(--rail) [rail-end] var(--rail-gap)
    [content-start] minmax(0, var(--shell-max)) [content-end]
    minmax(var(--gutter), 1fr) [full-end];
}
main > *, .band > * { grid-column: content; }
.band { grid-column: full; }

/* The content column subdivides. At 1200–1999px the track is exactly
   (1360 − 11 × 32) / 12 = 84.000px. Never hardcode it. */
.cols {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 32px;
}
@media (min-width: 1200px) { .cols { row-gap: 40px; } }

/* ≥2000px bezel: the frame reads as an instrument mounted in a bezel,
   not a card floating in a void. The margin is margin — no lattice,
   no texture, no second grid. */
@media (min-width: 2000px) {
  body { background: var(--navy-950); }
  /* No transform/filter/contain here: that would make .frame a containing
     block for the fixed-position drawer and break the sticky header. */
  .frame {
    max-inline-size: 1696px;
    margin-inline: auto;
    background: var(--navy-900);
    border-inline: 1px solid var(--rule-strong);
  }
}

/* --------------------------------------------------------------------------
   07  SECTION HEADER, SEAM, ANNOTATION SEGMENT (Motif 3)
   The site's highest-frequency, lowest-cost mark. Present on every section
   of every page, and felt without ever becoming pattern.
   -------------------------------------------------------------------------- */
.band { padding-block: clamp(64px, 7.5vw, 128px); }
/* Two adjacent sections never both draw a seam; the seam's own clearance
   carries the join, so paddings never stack. */
.band + .band { padding-block-start: 0; }
/* ...but a band that carries its own full-bleed background keeps its own
   padding: the reset above outranks the single-class rules that set it. */
.band + .statband, .band + .ctaband { padding-block-start: clamp(64px, 7vw, 96px); }
.band + .surface-paper { padding-block-start: clamp(64px, 7vw, 112px); }

.band > .seam    { grid-row: 1; }
.band > .rail    { grid-row: 2; grid-column: rail; }
.band > .section-head { grid-row: 2; }
.band > .section-body { grid-row: 3; }

.seam {
  position: relative;
  block-size: 1px;
  background: var(--hairline-strong);
}
.seam::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 56px;
  block-size: 1px;
  background: var(--accent);
}
.seam--full {
  grid-column: full !important;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [rail-start] var(--rail) [rail-end] var(--rail-gap)
    [content-start] minmax(0, var(--shell-max)) [content-end]
    minmax(var(--gutter), 1fr) [full-end];
}
.seam--full::after {
  position: static;
  grid-column: content;
  justify-self: start;
  inline-size: 96px;
}
.surface-paper .seam { background: var(--paper-rule); }
.surface-paper .seam::after { background: var(--paper-accent); }

.section-head { margin-block-start: 40px; }
@media (min-width: 900px) { .section-head { margin-block-start: 56px; } }
.section-head > h2 { margin-block-start: 16px; }
.section-head > .lead { margin-block-start: 20px; }
.section-body { margin-block-start: 40px; }
@media (min-width: 900px) { .section-body { margin-block-start: 56px; } }

/* The eyebrow. § numbers are real: § 03 is the third section on the page. */
.eyebrow {
  font: 500 var(--fs-label)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}
.eyebrow .idx { color: var(--accent-text); font-variant-numeric: tabular-nums; }
.eyebrow .sep {
  inline-size: 12px;
  block-size: 1px;
  background: var(--border);
  margin-inline: 8px;
  flex: none;
}

/* The margin rail (≥1200px only). The § numeral detaches into the rail
   track. Below 1200px it returns inline and NO vertical rules exist
   anywhere on the site. */
.rail { display: none; }
@media (min-width: 1200px) {
  .rail {
    display: block;
    text-align: end;
    padding-inline-end: var(--rail-gap);
    border-inline-end: 1px solid var(--hairline);
    margin-block-start: 0.24em;        /* optical align to the title cap height */
    font: 500 var(--fs-label)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
  }
  .rail .rail__note {
    display: block;
    margin-block-start: 8px;
    color: var(--text-muted);
  }
  .band > .section-head .eyebrow .idx,
  .band > .section-head .eyebrow .sep { display: none; }
}

/* --------------------------------------------------------------------------
   08  HEADER
   ONE HEIGHT, ALWAYS. It never shrinks, never hides, never compacts, and
   there is no document-control bar above it — invented revision codes are
   costume, and scroll-linked height changes make scroll-padding
   state-dependent.
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--navy-900);
  border-block-end: 1px solid var(--rule-strong);
  transition: background-color var(--t-state) var(--ease-standard),
              border-color var(--t-state) var(--ease-standard);
}
.hdr.is-drawer-open { z-index: 170; }   /* above the drawer, so the cross shows */
.hdr.is-scrolled {
  background: rgba(11, 22, 39, .92);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-block-end-color: var(--edge-control);
}
.hdr__inner > .hdr__bar {
  grid-column: content;
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Wordmark lockup. The wordmark is set in Plex Sans, NOT the condensed
   face, because the condensed face has a hard 26px floor — a wordmark that
   breaks the type law is the tell that costs a room. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding-block: 12px;               /* 44px hit area, not bigger type */
  color: var(--ink-050);
}
.wordmark__mark { inline-size: 20px; block-size: 20px; flex: none; }
.wordmark__name {
  font: 600 18px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-050);
}
.wordmark__bar {
  inline-size: 1px;
  block-size: 16px;
  background: var(--rule-strong);
  margin-inline: 12px;
  flex: none;
}
.wordmark__tld {
  font: 500 var(--fs-label)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-400);
}

/* Desktop nav (≥900px) */
.nav { display: none; }
/* The header sits on the content column like everything else, so its budget
   is the content width minus the wordmark. The nav is tuned to fit that
   budget at every breakpoint rather than allowed to overflow the frame. */
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: 20px; }
  .nav__list { display: flex; gap: 20px; }
}
@media (min-width: 1200px) { .nav, .nav__list { gap: 24px; } }
@media (min-width: 1440px) { .nav, .nav__list { gap: 32px; } }

.nav__link {
  position: relative;
  display: block;
  white-space: nowrap;
  font: 500 var(--fs-body-sm)/var(--header-h) var(--font-body);
  letter-spacing: -0.005em;
  color: var(--ink-300);
  text-decoration: none;
  transition: color var(--t-state) var(--ease-standard);
}
/* The 2px amber underline sits exactly on the header's bottom boundary line,
   so it reads as a tick on the seam, not a highlight. */
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-rule) var(--ease-rule);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--ink-050); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); }
.nav__link[aria-current="page"], .nav__link.is-section { color: var(--ink-050); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link.is-section::after { transform: scaleX(1); background: var(--rule-strong); }
.nav__link:focus-visible { outline-offset: -2px; }
@media (min-width: 1440px) { .nav__cta .tel { display: inline; } }
/* The .group half of the lockup is the first thing to go when space is
   tight -- the name is the half that carries the identity. */
@media (max-width: 1279px) {
  .hdr .wordmark__bar, .hdr .wordmark__tld { display: none; }
}

/* Mobile trigger + drawer (<900px) */
.nav-toggle {
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--edge-control);
  cursor: pointer;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-toggle__bars { inline-size: 18px; block-size: 18px; position: relative; }
.nav-toggle__bars i {
  position: absolute;
  inset-inline: 0;
  block-size: 1px;
  background: var(--ink-050);
  transition: transform var(--t-panel) var(--ease-standard),
              opacity var(--t-panel) linear;
}
.nav-toggle__bars i:nth-child(1) { inset-block-start: 0; }
.nav-toggle__bars i:nth-child(2) { inset-block-start: 8px; }
.nav-toggle__bars i:nth-child(3) { inset-block-start: 16px; }
/* 45deg here is the single deliberate exception to the two-direction law,
   because a close glyph must read instantly. */
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(2, 5, 11, .92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-panel) linear, visibility 0s linear var(--t-panel);
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.drawer {
  position: fixed; inset: 0; z-index: 160;
  background: var(--navy-900);
  padding-block-start: var(--header-h);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-exit) var(--ease-exit);
  box-shadow: 0 24px 48px -12px rgba(2, 5, 11, .62);  /* one of two exceptions */
}
.drawer.is-open { transform: translateX(0); transition: transform var(--t-panel) var(--ease-standard); }
@media (min-width: 900px) { .drawer, .drawer-backdrop { display: none; } }

.drawer__row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-block-size: 56px;
  padding-inline: var(--gutter);
  border-block-end: 1px solid var(--rule);
  text-decoration: none;
  transition: background-color var(--t-state) var(--ease-standard);
}
.drawer__row:active { background: var(--navy-700); }
.drawer__row:focus-visible { outline-offset: -3px; }
.drawer__idx { font: 400 var(--fs-meta)/1.4 var(--font-mono); color: var(--ink-400); font-variant-numeric: tabular-nums; }
.drawer__label { font: 500 17px/1.4 var(--font-body); color: var(--ink-050); }
.drawer__row[aria-current="page"] { border-inline-start: 2px solid var(--accent); }
.drawer__row[aria-current="page"] .drawer__idx { color: var(--ink-050); }
.drawer__foot { padding: 24px var(--gutter) 48px; border-block-start: 1px solid var(--rule); }
.drawer__foot .btn { inline-size: 100%; }

/* With JS disabled the trigger is hidden and the nav renders as a plain
   wrapped list — the site never becomes unnavigable. */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .nav { display: flex; flex-wrap: wrap; }
html:not(.js) .nav__list { flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   09  BUTTONS
   NOTHING TRANSLATES OR SCALES, including on :active — a press is a fill
   change. The primary is deliberately NOT amber: a filled amber rectangle
   on near-black is the largest accent area this site could have, and it
   reads as monitoring-vendor chrome.
   -------------------------------------------------------------------------- */
.btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  block-size: 48px;
  padding-inline: 24px;
  border: 1px solid transparent;
  font: 600 var(--fs-body-sm)/1 var(--font-body);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: background-color var(--t-state) var(--ease-standard),
              border-color var(--t-state) var(--ease-standard),
              color var(--t-state) var(--ease-standard);
}
.btn--sm { block-size: 40px; padding-inline: 20px; }
.btn--lg { block-size: 56px; padding-inline: 32px; }

.btn--primary { background: var(--btn-fill); border-color: var(--btn-fill); color: var(--navy-950); }
.btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; }
.btn--primary:active { background: var(--ink-200); border-color: var(--ink-200); }

.btn--secondary { border-color: var(--edge-control); color: var(--ink-050); }
.btn--secondary:hover { background: var(--navy-800); border-color: var(--ink-300); }
.btn--secondary:active { background: var(--navy-700); }

.btn[aria-disabled="true"] {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--ink-400);
  cursor: not-allowed;
  opacity: 1;                        /* a faded control is an unreadable control */
}

/* Ghost / text button — a rule that fills across the label. */
.btn--ghost {
  block-size: auto;
  padding-inline: 0;
  padding-block: 14px;               /* 14 + 16 line-box + 14 = 44px */
  line-height: 16px;
  border: 0;
  color: var(--accent-text);
  background-image: linear-gradient(var(--accent-text), var(--accent-text));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  border-block-end: 1px solid var(--accent-decor);
  transition: background-size var(--t-rule) var(--ease-rule),
              color var(--t-state) var(--ease-standard);
}
.btn--ghost:hover { background-size: 100% 1px; color: var(--accent-hover); }

/* Card affordance. Non-interactive: the card is the link, so the arrow
   never has its own hover state. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 var(--fs-label)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent-text);
}
.link-arrow svg { inline-size: 14px; block-size: 14px; transition: transform var(--t-rule) var(--ease-standard); }
.card:hover .link-arrow svg,
.ledger__row:hover .link-arrow svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   10  ICONS  — inline SVG only. Square terminals and mitred joins are
   non-negotiable: rounded caps read as consumer software and break the
   register instantly.
   -------------------------------------------------------------------------- */
.icon {
  inline-size: 24px; block-size: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.icon--sm { inline-size: 16px; block-size: 16px; }
.icon--md { inline-size: 20px; block-size: 20px; }

/* --------------------------------------------------------------------------
   11  HOME HERO  — flat. No gradient, no radial, no texture, no lattice.
   -------------------------------------------------------------------------- */
.hero {
  background: var(--navy-900);
  padding-block: clamp(80px, 9vw, 140px) clamp(72px, 8vw, 128px);
  row-gap: 56px;
}
.hero > .cols { row-gap: 56px; }
.hero__copy   { grid-column: 1 / -1; }
.hero__figure { grid-column: 1 / -1; }
@media (min-width: 1200px) {
  .hero__copy   { grid-column: span 7; }
  .hero__figure { grid-column: span 5; align-self: center; }
}
.hero__eyebrow { display: flex; align-items: center; gap: 12px; }
.hero__eyebrow::before {
  content: "";
  inline-size: 24px; block-size: 1px;
  background: var(--accent);
  flex: none;
}
.hero__eyebrow span {
  font: 500 var(--fs-label)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-300);
}
.hero h1 { margin-block-start: 32px; }
.hero .lead { margin-block-start: 28px; }
.hero__actions { margin-block-start: 40px; display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 479px) { .hero__actions .btn { inline-size: 100%; } }

.figure figcaption {
  margin-block-start: 12px;
  font: 400 var(--fs-meta)/1.5 var(--font-mono);
  color: var(--text-muted);
  max-width: 60ch;
}
.hero__figure svg { inline-size: 100%; block-size: auto; }
@media (min-width: 1200px) { .hero__figure svg { min-block-size: 480px; } }
@media (max-width: 1199px) { .hero__figure svg { max-block-size: 380px; margin-inline: auto; } }
@media (max-width: 599px) { .anno--minor { display: none; } }

/* --------------------------------------------------------------------------
   12  INTERIOR PAGE HEADER  — no figure and no motif. The transformation
   belongs to Home only.
   -------------------------------------------------------------------------- */
.pagehead { background: var(--navy-900); padding-block: clamp(72px, 8vw, 120px) 56px; }
.pagehead__copy  { grid-column: 1 / -1; }
.pagehead__facts { grid-column: 1 / -1; }
@media (min-width: 1200px) {
  .pagehead__copy  { grid-column: span 7; }
  .pagehead__facts { grid-column: 9 / -1; margin-block-start: 0.6em; }
}
.pagehead .eyebrow { margin-block-start: 24px; }
.pagehead h1 { margin-block-start: 28px; }
.pagehead .lead { margin-block-start: 24px; }
.pagehead__facts { margin-block-start: 40px; }
.pagehead__facts div { padding-block: 12px; border-block-start: 1px solid var(--rule); }
.pagehead__facts dt {
  font: 500 var(--fs-label)/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-muted);
}
.pagehead__facts dd { margin-block-start: 6px; font-size: var(--fs-body-sm); color: var(--ink-100); }

/* Breadcrumb. The separator is a literal "/" at the same 7.68:1 as the
   links — never a lighter decorative grey. */
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; font: 400 var(--fs-meta)/1.4 var(--font-mono); letter-spacing: .02em; }
.crumb a { color: var(--text-muted); text-decoration: none; position: relative; }
.crumb a::before { content: ""; position: absolute; inset: -12px -4px; }
.crumb a:hover { color: var(--ink-200); text-decoration: underline; text-underline-offset: 3px; }
.crumb .sep { color: var(--text-muted); margin-inline: 10px; }
.crumb [aria-current="page"] { color: var(--ink-200); }
@media (max-width: 599px) { .crumb li:not(:nth-last-child(-n+3)) { display: none; } }

/* --------------------------------------------------------------------------
   13  CAPABILITY SCHEDULE (ledger row) — the primary Services treatment.
   Procurement reads a schedule as a scope of work and a card grid as a
   pricing page.
   -------------------------------------------------------------------------- */
.ledger { border-block-end: 1px solid var(--rule); }
.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 24px;
  padding-block: 24px;
  padding-inline: min(24px, var(--gutter));
  /* Bleeds past the text edge, never past the page edge. */
  margin-inline: calc(min(24px, var(--gutter)) * -1);
  border-block-start: 1px solid var(--rule);
  transition: background-color var(--t-state) var(--ease-standard);
}
@media (min-width: 600px) { .ledger__row { padding-block: 32px; } }
@media (min-width: 900px) {
  .ledger__row { grid-template-columns: 56px minmax(0, 1fr) 200px 24px; }
  .ledger--nodelivery .ledger__row { grid-template-columns: 56px minmax(0, 1fr) 24px; }
}
.ledger__row::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 56px;
  block-size: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-rule) var(--ease-rule);
}
.ledger__row:hover, .ledger__row:focus-within { background: var(--navy-800); }
.ledger__row:hover::before, .ledger__row:focus-within::before { transform: scaleX(1); }
/* Rows that are not links get no hover affordance, but keep the focus segment
   so an in-page anchor jump still shows you where you landed. */
.ledger--static .ledger__row:hover { background: none; }
.ledger--static .ledger__row:hover::before { transform: scaleX(0); }
.ledger--static .ledger__row:hover .ledger__idx { color: var(--accent-text); }
.ledger__title:focus-visible { outline-offset: 4px; }
.ledger__idx {
  font: 500 var(--fs-label)/1.6 var(--font-mono);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-state) var(--ease-standard);
}
.ledger__row:hover .ledger__idx { color: var(--ink-050); }
.ledger__title { color: var(--ink-050); }
.ledger__desc { margin-block-start: 12px; font-size: var(--fs-body-sm); color: var(--ink-300); max-width: 62ch; }
.ledger__tags {
  margin-block-start: 16px;
  display: flex; flex-wrap: wrap; align-items: center;
  font: 500 var(--fs-label)/1.8 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-muted);
}
.ledger__tags li:not(:last-child)::after {
  content: ""; display: inline-block;
  inline-size: 1px; block-size: 10px;
  background: var(--rule);
  margin-inline: 10px;
  vertical-align: -1px;
}
.ledger__delivery {
  font: 500 var(--fs-label)/1.6 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-muted);
}
@media (max-width: 899px) { .ledger__delivery { grid-column: 2; margin-block-start: 16px; } }
.ledger__arrow { align-self: center; color: var(--ink-300); }
@media (max-width: 899px) { .ledger__arrow { display: none; } }
/* The whole row is one anchor. display:contents is forbidden. */
.ledger__link { position: static; text-decoration: none; color: inherit; }
.ledger__link::after { content: ""; position: absolute; inset: 0; }
.ledger__row:has(.ledger__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -1px; }
.ledger__link:focus-visible { outline: none; }

/* --------------------------------------------------------------------------
   14  FLAGSHIP SERVICE CARD  — at most three per page.
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--navy-800);
  border: 1px solid var(--rule-strong);
  padding: 32px;
  min-block-size: 260px;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--t-rule) var(--ease-standard),
              border-color var(--t-rule) var(--ease-standard);
}
.card::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: -1px;
  block-size: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-rule);
}
.card:hover, .card:focus-within { background: var(--navy-700); border-color: var(--edge-control); }
.card:hover::before, .card:focus-within::before { transform: scaleX(1); }
.card:focus-visible { outline-offset: -1px; }
.card__idx { font: 500 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--text-muted); }
.card__icon { margin-block-start: 24px; color: var(--ink-300); }
.card__title { margin-block-start: 24px; color: var(--ink-050); }
.card__desc { margin-block-start: 12px; flex: 1; font-size: var(--fs-body-sm); color: var(--ink-300); max-width: 42ch; }
.card__foot { margin-block-start: 24px; padding-block-start: 24px; border-block-start: 1px solid var(--rule-strong); }

/* --------------------------------------------------------------------------
   15  STAT BAND
   CONTENT LAW: every numeral is a real, sourceable figure with a real label.
   If a real number is unavailable the cell is DELETED, not filled. No
   simulated telemetry, no counters that tick up, no "LIVE" dots.
   -------------------------------------------------------------------------- */
.statband { background: var(--navy-800); border-block: 1px solid var(--rule-strong); padding-block: clamp(64px, 7vw, 96px); }
/* A TRUE HAIRLINE GRID that survives wrapping: the gap IS the rule. */
.statgrid {
  display: grid;
  gap: 1px;
  background: var(--rule-strong);
  grid-template-columns: 1fr;
}
@media (min-width: 480px)  { .statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .statgrid { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--navy-800);
  padding: 24px 20px;
  transition: background-color var(--t-state) var(--ease-standard);
}
@media (min-width: 600px) { .stat { padding: 40px 32px; } }
.stat:hover { background: var(--navy-700); }
.stat::before { content: ""; display: block; inline-size: 32px; block-size: 1px; background: var(--accent); }
.stat__figure {
  margin-block-start: 16px;
  font: 600 var(--fs-stat)/1 var(--font-display);
  letter-spacing: -0.010em;
  color: var(--ink-050);
  font-variant-numeric: tabular-nums lining-nums;
}
.stat__label {
  margin-block-start: 12px;
  font: 500 var(--fs-label)/1.5 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-300);
  max-width: 24ch;
}
.stat__ref { font-size: var(--fs-label); vertical-align: super; line-height: 0; color: var(--text-muted); margin-inline-start: 4px; }
/* EVERY FIGURE IS FOOTNOTED. */
.stat-sources {
  margin-block-start: 32px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--rule-strong);
  display: grid;
  gap: 8px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   16  ATTESTATION / PULL QUOTE
   No quotation marks, no portrait, no italics, no card. An attestation ships
   only with a named person and organisation who have approved the wording.
   -------------------------------------------------------------------------- */
.attest {
  margin-block: 56px;
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: 28px;
}
.attest__quote { font-size: var(--fs-lead); line-height: 1.55; letter-spacing: -0.010em; color: var(--text-panel); max-width: 46ch; }
.attest__rule { inline-size: 24px; block-size: 1px; background: var(--rule-strong); margin-block-start: 24px; }
.attest__name { margin-block-start: 12px; color: var(--ink-050); }
.attest__role {
  margin-block-start: 4px;
  font: 500 var(--fs-label)/1.5 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-muted);
}
.surface-paper .attest { border-inline-start-color: var(--paper-accent); }

/* --------------------------------------------------------------------------
   17  INSIGHT INDEX ROW + CARD  — Insights is an INDEX, not a shop.
   -------------------------------------------------------------------------- */
.index { border-block-end: 1px solid var(--rule); }
.index__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding-block: 28px;
  padding-inline: min(24px, var(--gutter));
  margin-inline: calc(min(24px, var(--gutter)) * -1);
  border-block-start: 1px solid var(--rule);
  transition: background-color var(--t-state) var(--ease-standard);
}
@media (min-width: 900px) {
  .index__row { grid-template-columns: 96px minmax(0, 1fr) 140px; column-gap: 24px; }
}
.index__row::before {
  content: "";
  position: absolute;
  inset-block-start: -1px; inset-inline-start: 0;
  inline-size: 96px; block-size: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-rule) var(--ease-rule);
}
.index__row:hover, .index__row:focus-within { background: var(--navy-800); }
.index__row:hover::before, .index__row:focus-within::before { transform: scaleX(1); }
.index__date { font: 400 var(--fs-meta)/1.6 var(--font-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.index__title { color: var(--ink-050); max-width: 34ch; }
.index__title a {
  text-decoration: none;
  color: inherit;
  background-image: linear-gradient(var(--accent-text), var(--accent-text));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--t-rule) var(--ease-rule);
}
.index__row:hover .index__title a { background-size: 100% 1px; }
.index__title a::after { content: ""; position: absolute; inset: 0; }
.index__dek {
  margin-block-start: 8px;
  font-size: var(--fs-body-sm);
  color: var(--ink-300);
  max-width: 64ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.index__cat {
  font: 500 var(--fs-label)/1.6 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-muted);
}
@media (min-width: 900px) { .index__cat { text-align: end; } }
/* Home teaser card: transparent, no fill, no side padding. */
.teaser { border-block-start: 1px solid var(--rule-strong); padding-block-start: 24px; position: relative; }
.teaser__title { margin-block-start: 12px; color: var(--ink-050); max-width: 26ch; }
.teaser__title a { text-decoration: none; color: inherit; }
.teaser__title a::after { content: ""; position: absolute; inset: 0; }
.teaser__dek {
  margin-block-start: 12px; font-size: var(--fs-body-sm); color: var(--ink-400); max-width: 42ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.teaser:hover .teaser__title { color: var(--text-strong); }

/* --------------------------------------------------------------------------
   18  FORMS
   Stacked labels only — never floating, never placeholder-as-label.
   Required fields append the WORD "REQUIRED": an asterisk is a glyph a
   screen reader may or may not announce and a sighted user may or may not
   decode.
   -------------------------------------------------------------------------- */
.field { display: block; }
.field + .field { margin-block-start: 24px; }
.field__label {
  display: flex; align-items: baseline; gap: 8px;
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-300);
  margin-block-end: 8px;
}
.field__req { color: var(--accent-text); }
.field__help { font-size: var(--fs-caption); color: var(--text-muted); margin-block-end: 8px; }

.input, .select, .textarea {
  inline-size: 100%;
  background: var(--navy-950);       /* a recessed well */
  border: 1px solid var(--edge-control);
  color: var(--ink-050);
  font: 400 16px/1.5 var(--font-body);  /* never below 16px — iOS zoom */
  transition: border-color var(--t-state) var(--ease-standard);
}
.input, .select { block-size: 48px; padding-inline: 16px; }
.textarea { min-block-size: 160px; padding: 16px; line-height: 1.6; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-300); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--accent); }
/* The chevron takes the accent on focus. */
.select:focus-visible {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%23D9A441' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

.select {
  appearance: none;
  padding-inline-end: 44px;
  /* A 10x6 chevron of two 1.5px strokes, per the icon system: butt caps,
     mitred joins. Drawn as SVG rather than crossed CSS gradients -- a 10%
     band of a 6px gradient is 0.6px wide and anti-aliases away to nothing. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%23A6B4C7' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
  background-size: 10px 6px;
  background-position: calc(100% - 16px) center;
  background-repeat: no-repeat;
}

.check-row { display: flex; align-items: flex-start; gap: 12px; min-block-size: 44px; padding-block: 12px; cursor: pointer; }
.check-row input[type="checkbox"], .check-row input[type="radio"] {
  appearance: none;
  inline-size: 20px; block-size: 20px;
  flex: none;
  background: var(--navy-950);
  border: 1px solid var(--edge-control);
  margin: 0;
  display: grid; place-content: center;
  cursor: pointer;
}
/* The 20×20 checked fill is the ONLY amber fill permitted anywhere. */
.check-row input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.check-row input[type="checkbox"]:checked::after {
  content: "";
  inline-size: 12px; block-size: 7px;
  border: 1.5px solid var(--navy-950);
  border-block-start: 0; border-inline-end: 0;
  transform: rotate(-45deg) translate(1px, -2px);
}
.check-row input[type="radio"]:checked::after {
  content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent);
}
.check-row span { font-size: var(--fs-body-sm); color: var(--ink-200); }
.check-row .field__req {
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent-text);
  order: 3; align-self: center;
}

.check-row.field--error input[type="checkbox"] { border-color: var(--status-alert); border-width: 2px; }
.field--error .input, .field--error .select, .field--error .textarea {
  border-color: var(--status-alert);
  border-inline-start-width: 2px;
}
.field__error {
  display: flex; align-items: flex-start; gap: 8px;
  margin-block-start: 8px;
  font-size: var(--fs-caption);
  color: var(--status-alert);
}
fieldset { border: 0; padding: 0; }
legend {
  font: 600 var(--fs-h3)/1.3 var(--font-body);
  color: var(--ink-050);
  padding-block-end: 12px;
  margin-block-end: 24px;
  border-block-end: 1px solid var(--rule);
  inline-size: 100%;
}

/* --------------------------------------------------------------------------
   19  CONTACT LAYOUT
   The panel takes order:-1 when stacked, because a phone user wants the
   phone number before the form.
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 7fr 1fr 4fr; gap: 0; } }
.contact-grid__form { grid-column: 1; }
.contact-grid__panel { order: -1; }
@media (min-width: 900px) { .contact-grid__panel { grid-column: 3; order: 0; } }
.fieldrow { display: grid; gap: 24px; }
@media (min-width: 600px) { .fieldrow { grid-template-columns: 1fr 1fr; } }
.fieldrow > .field + .field { margin-block-start: 0; }

.panel { background: var(--navy-800); border: 1px solid var(--rule-strong); padding: 32px; }
.panel__row { padding-block: 20px; border-block-start: 1px solid var(--rule-strong); }
.panel__row:first-child { padding-block-start: 0; border-block-start: 0; }
.panel__k {
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-muted);
}
.panel__v { margin-block-start: 8px; font-size: var(--fs-body-sm); color: var(--ink-100); }
.panel__v a { color: var(--ink-100); text-decoration: none; border-block-end: 1px solid var(--accent-decor); }
.panel__v a:hover { color: var(--accent-hover); border-block-end-color: var(--accent-text); }

/* --------------------------------------------------------------------------
   20  DATA TABLE
   Presence markers each carry a visually-hidden text label, so meaning never
   rides on a glyph or a colour.
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule-strong);
}
.table caption {
  text-align: start;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  padding: 16px;
}
.table th {
  background: var(--navy-800);
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-300);
  text-align: start;
  padding: 12px 16px;
  border-block-end: 1px solid var(--rule-strong);
  white-space: nowrap;
}
.table td {
  padding: 16px;
  font-size: var(--fs-body-sm);
  color: var(--ink-200);
  border-block-end: 1px solid var(--rule-strong);
  vertical-align: top;
}
.table tbody tr:last-child td { border-block-end: 0; }
.table td:first-child { font-weight: 500; color: var(--ink-050); }
.table .num { font-family: var(--font-mono); color: var(--ink-100); text-align: end; font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background-color var(--t-state) var(--ease-standard); }
.table tbody tr:hover { background: var(--navy-800); }
/* Below 600px any table over three columns re-renders as stacked blocks. */
@media (max-width: 599px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table--stack tr { display: block; border-block-end: 1px solid var(--rule-strong); padding-block: 8px; }
  .table--stack td { display: grid; grid-template-columns: 1fr; gap: 4px; border: 0; padding: 8px 16px; }
  .table--stack td::before {
    content: attr(data-label);
    font: 500 var(--fs-label)/1.4 var(--font-mono);
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--text-muted);
  }
}

/* --------------------------------------------------------------------------
   21  DISCLOSURE / FAQ  — a plus becoming a minus, with no rotation.
   -------------------------------------------------------------------------- */
.disclosure { border-block-end: 1px solid var(--rule); }
.disclosure details { border-block-start: 1px solid var(--rule); }
.disclosure summary {
  list-style: none;
  padding-block: 24px;
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  gap: 24px;
  cursor: pointer;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary:focus-visible { outline-offset: -2px; }
.disclosure__q { font: 600 var(--fs-h3)/1.3 var(--font-body); color: var(--ink-050); max-width: 60ch; }
.disclosure__marker { position: relative; inline-size: 16px; block-size: 16px; }
.disclosure__marker::before, .disclosure__marker::after {
  content: ""; position: absolute; background: var(--ink-300);
  transition: transform var(--t-rule) var(--ease-standard), background-color var(--t-state) var(--ease-standard);
}
.disclosure__marker::before { inset-block-start: 50%; inset-inline: 0; block-size: 1px; }
.disclosure__marker::after  { inset-inline-start: 50%; inset-block: 0; inline-size: 1px; }
.disclosure details[open] .disclosure__marker::after { transform: scaleY(0); }
.disclosure summary:hover .disclosure__marker::before,
.disclosure summary:hover .disclosure__marker::after { background: var(--accent-text); }
.disclosure details[open] { border-inline-start: 2px solid var(--accent); }
.disclosure details[open] > summary,
.disclosure details[open] .disclosure__a { padding-inline-start: 24px; }
.disclosure__a { padding-block-end: 32px; }
.disclosure__a p { max-width: 68ch; color: var(--ink-200); }
.disclosure__a p + p { margin-block-start: 20px; }

/* --------------------------------------------------------------------------
   22  PERSON CARD
   Photography is permanently monochrome. There is no colour-on-hover reveal
   anywhere on this site, on any image, for any reason.
   -------------------------------------------------------------------------- */
.person__portrait {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  inline-size: 100%;
  border: 1px solid var(--rule-strong);
  filter: grayscale(1) contrast(1.06) brightness(.98);
}
.person__name { color: var(--ink-050); }
/* Retained only for the day real portraits are supplied. Nothing emits it
   today: the cards carry no portrait and no placeholder frame. Restore the
   20px clearance below the image if one is added. */
.person__portrait + .person__name { margin-block-start: 20px; }
.person__role {
  margin-block-start: 8px;
  font: 500 var(--fs-label)/1.5 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-muted);
}
.person__rule { inline-size: 24px; block-size: 1px; background: var(--rule-strong); margin-block-start: 12px; }
.person__cred { margin-block-start: 12px; font-size: var(--fs-caption); color: var(--text-muted); }

/* Motif 4 — THE NO-DATA HATCH. The only repeating gradient on the site.
   CONVERSION LAW: stripes at α° from horizontal require a CSS gradient angle
   of (180 − α)deg. The invariant direction is 45°, therefore 135deg.
   No second hatch angle is ever invented. */
.hatch {
  background-color: var(--navy-950);
  background-image: repeating-linear-gradient(135deg, var(--rule-strong) 0 1px, transparent 1px 7px);
  border: 1px solid var(--rule-strong);
  min-block-size: 200px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px;
}

/* --------------------------------------------------------------------------
   23  ACCREDITATION STRIP  — a plain mono list, NOT bordered boxes with
   centred small caps, which is the most default layout available and which
   invites inventing certifications to fill the third box.
   -------------------------------------------------------------------------- */
.marks { display: grid; gap: 1px; background: var(--rule-strong); grid-template-columns: 1fr; }
@media (min-width: 600px)  { .marks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .marks { grid-template-columns: repeat(4, 1fr); } }
.marks li {
  background: var(--navy-900);
  padding: 24px 20px;
  font: 500 var(--fs-label)/1.5 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-300);
}
.marks li span { display: block; margin-block-start: 8px; color: var(--text-muted); letter-spacing: .02em; text-transform: none; font-weight: 400; }

/* --------------------------------------------------------------------------
   24  CTA BAND
   -------------------------------------------------------------------------- */
.ctaband { background: var(--navy-800); border-block: 1px solid var(--rule-strong); padding-block: clamp(64px, 7vw, 96px); }
.ctaband__inner { display: grid; gap: 32px; }
@media (min-width: 900px) { .ctaband__inner { grid-template-columns: 1fr auto; align-items: end; gap: 48px; } }
.ctaband h2 { color: var(--ink-050); }
.ctaband p { margin-block-start: 16px; color: var(--ink-100); max-width: 56ch; }
.ctaband__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* --------------------------------------------------------------------------
   25  PROCESS STEPS
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 1px; background: var(--rule); }
@media (min-width: 600px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.step { background: var(--navy-900); padding: 32px 24px; }
.step__idx { font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .14em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.step__title { margin-block-start: 20px; color: var(--ink-050); }
.step__text { margin-block-start: 12px; font-size: var(--fs-body-sm); color: var(--ink-300); }

/* --------------------------------------------------------------------------
   26  FOOTER
   No document stamp, no revision code, no "DOC EV-000": inventing document
   furniture is the exact costume failure this register cannot afford.
   -------------------------------------------------------------------------- */
.ftr {
  background: var(--navy-950);
  padding-block: 0 32px;
}
.ftr__top { margin-block-start: clamp(64px, 7vw, 112px); }
.ftr__inner > * { grid-column: content; }
.ftr__top { display: grid; gap: 48px; }
@media (min-width: 600px)  { .ftr__top { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } }
@media (min-width: 1200px) { .ftr__top { grid-template-columns: 4fr 2fr 2fr 2fr; gap: 32px; } }
.ftr__id .wordmark { padding-block: 0; }
.ftr__id .wordmark__mark { inline-size: 32px; block-size: 32px; }
.ftr__pos { margin-block-start: 16px; font-size: var(--fs-body-sm); color: var(--ink-300); max-width: 34ch; }
.ftr__addr { margin-block-start: 24px; font: 400 var(--fs-meta)/1.6 var(--font-mono); font-style: normal; color: var(--text-muted); }
.ftr__col h2 {
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-muted);
  max-width: none;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--rule);
}
.ftr__col ul { margin-block-start: 12px; }
.ftr__col a {
  display: inline-block;
  padding-block: 12px;               /* 12 + 20 + 12 = 44px */
  font-size: var(--fs-body-sm);
  line-height: 20px;
  color: var(--ink-400);
  text-decoration: none;
  background-image: linear-gradient(var(--accent-decor), var(--accent-decor));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--t-state) var(--ease-standard), background-size var(--t-rule) var(--ease-rule);
}
.ftr__col a:hover { color: var(--ink-050); background-size: 100% 1px; }
.ftr__base {
  margin-block-start: 64px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--rule-strong);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  font: 400 var(--fs-meta)/1.6 var(--font-mono);
  color: var(--text-muted);
}
.ftr__legal a { color: var(--text-muted); text-decoration: none; }
.ftr__legal a:hover { color: var(--ink-050); text-decoration: underline; text-underline-offset: 3px; }
.ftr__legal .sep { margin-inline: 12px; }
/* Motif 5 — THE SIGNATURE. Every claim in this line is checkable by hand in
   ten seconds, which is the only reason it is on the page. */
.ftr__sig { font-variant-numeric: tabular-nums; }
.ftr__sig b { font-weight: 400; color: var(--accent-text); }
.ftr__legalline { margin-block-start: 24px; font-size: var(--fs-caption); color: var(--text-muted); max-width: 96ch; font-family: var(--font-body); }

/* --------------------------------------------------------------------------
   27  .surface-paper  — an inset sheet, not a theme switch. Nine token
   redeclarations instead of a light-mode toggle and a doubled token surface.
   -------------------------------------------------------------------------- */
.surface-paper {
  --bg: var(--paper-050);
  --bg-plate: #FFFFFF;
  --bg-panel: #FFFFFF;
  --text: var(--paper-ink);
  --text-strong: var(--paper-ink);
  --text-secondary: var(--paper-ink-muted);
  --text-muted: var(--paper-ink-muted);
  --text-panel: var(--paper-ink);
  --hairline: var(--paper-rule);
  --hairline-strong: var(--paper-rule);
  --border: var(--paper-edge);
  --accent: var(--paper-accent);
  --accent-text: var(--paper-accent);
  --accent-hover: var(--paper-accent);
  --accent-decor: #C9A46B;
  --focus: var(--paper-accent);
  --focus-keyline: #FFFFFF;
  background: var(--paper-050);
  color: var(--paper-ink);
  border-block: 1px solid var(--rule-strong);
  padding-block: clamp(64px, 7vw, 112px);
}
.surface-paper h1, .surface-paper h2, .surface-paper h3 { color: var(--paper-ink); }
.surface-paper .lead { color: var(--paper-ink-muted); }
.surface-paper .caption, .surface-paper .meta { color: var(--paper-ink-muted); }
.surface-paper .prose a { color: var(--paper-accent); text-decoration-color: #C9A46B; }
.surface-paper .prose a:hover { color: var(--paper-accent); text-decoration-color: var(--paper-accent); }
.surface-paper .btn--primary { background: var(--navy-950); border-color: var(--navy-950); color: var(--paper-050); }

.article { grid-column: 1 / -1; }
@media (min-width: 1200px) {
  .article { grid-column: 3 / span 7; }
}
.article .prose > * + * { margin-block-start: 20px; }
.article .prose h2 {
  margin-block-start: 56px;
  padding-block-start: 56px;
  position: relative;
  border-block-start: 1px solid var(--paper-rule);
}
.article .prose h2::before {
  content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0;
  inline-size: 56px; block-size: 1px; background: var(--paper-accent);
}
.article .prose h2 + p { margin-block-start: 20px; }
.article .prose ul { margin-block-start: 20px; }
.article .prose li { position: relative; padding-inline-start: 24px; max-width: 68ch; }
.article .prose li + li { margin-block-start: 12px; }
.article .prose li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em;
  inline-size: 10px; block-size: 1px; background: var(--paper-edge);
}

/* --------------------------------------------------------------------------
   28  GRID HELPERS
   -------------------------------------------------------------------------- */
.span-4  { grid-column: span 4; }
.span-6  { grid-column: span 6; }
.span-12 { grid-column: 1 / -1; }
@media (max-width: 1199px) { .span-4, .span-6 { grid-column: span 4; } }
@media (max-width: 599px)  { .span-4, .span-6 { grid-column: 1 / -1; } }

.pillars { display: grid; gap: 32px; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); gap: 48px; } }
.pillar__head {
  padding-block-end: 16px;
  border-block-end: 1px solid var(--rule-strong);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.pillar__name { font: 500 var(--fs-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--accent-text); }
.pillar__count { font: 400 var(--fs-meta)/1.4 var(--font-mono); color: var(--text-muted); }
.pillar__body { margin-block-start: 20px; color: var(--ink-300); font-size: var(--fs-body-sm); max-width: 52ch; }
.pillar__list { margin-block-start: 24px; }
.pillar__list li { border-block-start: 1px solid var(--rule); }
.pillar__list a {
  display: flex; align-items: baseline; gap: 16px;
  padding-block: 14px;
  text-decoration: none;
  color: var(--ink-200);
  font-size: var(--fs-body-sm);
  transition: color var(--t-state) var(--ease-standard), background-color var(--t-state) var(--ease-standard);
}
.pillar__list a:hover { color: var(--ink-050); }
.pillar__list .n { font: 500 var(--fs-label)/1.6 var(--font-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }

.sector { border-block-start: 1px solid var(--rule); padding-block: 28px; }
.sector__name { color: var(--ink-050); }
.sector__sum { margin-block-start: 12px; font-size: var(--fs-body-sm); color: var(--ink-300); max-width: 62ch; }
.sector__list { margin-block-start: 16px; }
.sector__list li { position: relative; padding-inline-start: 20px; font-size: var(--fs-body-sm); color: var(--ink-300); }
.sector__list li + li { margin-block-start: 8px; }
.sector__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.72em;
  inline-size: 10px; block-size: 1px; background: var(--edge-control);
}
.regimes { margin-block-start: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.regimes li {
  font: 500 var(--fs-label)/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-300);
  border: 1px solid var(--rule-strong);
  padding: 8px 12px;
}

.grid-people { display: grid; gap: 40px 32px; grid-template-columns: 1fr; }
@media (min-width: 600px)  { .grid-people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid-people { grid-template-columns: repeat(3, 1fr); } }
.grid-cards { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 600px)  { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; gap: 40px 32px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.grid-3 { display: grid; gap: 40px 32px; grid-template-columns: 1fr; }
@media (min-width: 600px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.rows { display: grid; }
.rows > * { border-block-start: 1px solid var(--rule); padding-block: 32px; }
.rows > *:last-child { border-block-end: 1px solid var(--rule); }
.row-2 { display: grid; gap: 16px; }
@media (min-width: 900px) { .row-2 { grid-template-columns: 5fr 7fr; gap: 48px; } }
.row-2 h3 { color: var(--ink-050); }
.row-2 p { color: var(--ink-300); max-width: 62ch; }
@media (min-width: 900px) { .offices { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .incident { padding: 40px; } }

/* --------------------------------------------------------------------------
   29  MOTION
   ONE reveal pattern, opacity only. NO TRANSLATION: an 8–12px lift on every
   block makes a capability brief feel like a seed-stage landing page, and it
   is the first thing that dates a serious site.
   Progressive enhancement is mandatory — the hidden state is written under
   .js, so with JavaScript off everything renders visible.
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; }
.js .reveal:focus-within { opacity: 1; }
.js .reveal.is-in {
  opacity: 1;
  transition: opacity var(--t-reveal) var(--ease-standard);
  transition-delay: calc(min(var(--i, 0), 3) * 60ms);   /* capped at four steps */
}

/* --------------------------------------------------------------------------
   30  REDUCED MOTION  — a first-class state, screenshotted during QA.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; }
  .nav__link::after,
  .ledger__row::before,
  .card::before,
  .index__row::before { transform: scaleX(1); }
  .btn--ghost { background-size: 100% 1px; }
  /* Colour and border feedback is RE-PERMITTED: instantaneous colour
     snapping is legible and carries no vestibular risk, while removing
     hover feedback entirely would harm usability. */
  a:hover, button:hover, a:focus-visible, button:focus-visible,
  .btn:hover, .card:hover, .ledger__row:hover, .index__row:hover, .stat:hover {
    transition-duration: var(--t-state) !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --------------------------------------------------------------------------
   31  PRINT  — the buyers for this firm print RFP responses, so this is a
   real deliverable and not an afterthought.
   -------------------------------------------------------------------------- */
@media print {
  /* Redeclare the ALIAS LAYER, not a handful of selectors: ~70 rules set
     colour from a pale ink token directly on the element, and those beat any
     inherited value. #A6B4C7 on white is 2.11:1 -- effectively blank. */
  :root {
    --bg: #FFFFFF; --bg-plate: #FFFFFF; --bg-panel: #FFFFFF; --bg-hover: #FFFFFF;
    --text: #0B1627; --text-strong: #000000; --text-panel: #0B1627;
    --text-secondary: #1B2839; --text-muted: #3A4A61;
    --ink-050: #000000; --ink-100: #0B1627; --ink-200: #0B1627;
    --ink-300: #1B2839; --ink-400: #3A4A61;
    --hairline: #B9C3D0; --hairline-strong: #8C99AA; --border: #8C99AA;
    --rule: #B9C3D0; --rule-strong: #8C99AA; --edge-control: #8C99AA;
    --accent: #6B4A00; --accent-text: #6B4A00; --accent-decor: #6B4A00;
    --paper-ink: #0B1627; --paper-ink-muted: #3A4A61; --paper-rule: #B9C3D0;
    --paper-accent: #6B4A00; --paper-050: #FFFFFF;
  }
  body { background: #FFFFFF; color: #0B1627; font-size: 10.5pt; }
  .hdr, .drawer, .drawer-backdrop, .skip, .btn, .ftr__col, .nav-toggle, .ctaband__actions { display: none !important; }
  .band, .statband, .ctaband, .panel, .card, .stat, .office, .step, .marks li, .hero, .pagehead, .ftr, .surface-paper {
    background: #FFFFFF !important;
    color: #0B1627 !important;
  }
  h1, h2, h3, .stat__figure, .ledger__title, .card__title { color: #0B1627 !important; }
  .seam, .seam::after, .stat::before { background: #B9C3D0 !important; }
  .attest { border-inline-start: 2px solid #6B4A00 !important; background: none !important; }
  * { border-color: #B9C3D0 !important; }
  .ftr__base, .ftr__id, .ftr__legalline { display: block; color: #0B1627 !important; }
  a[href^="http"]::after { content: " [" attr(href) "]"; font: 400 8pt var(--font-mono); }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  thead { display: table-header-group; }
  .band { padding-block: 18pt; }
}

/* --------------------------------------------------------------------------
   32  FORCED COLORS
   This works ONLY because every border on the site is drawn with `border`
   rather than box-shadow or a background gradient. That constraint exists
   for this reason and must not be relaxed.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  * { border-color: CanvasText !important; }
  .seam::after, .stat::before, .ledger__row::before, .card::before,
  .index__row::before, .nav__link::after, .hero__eyebrow::before {
    background: Highlight !important;
    forced-color-adjust: none;
  }
  .hero__figure svg, .hatch { display: none; }
  :focus-visible { box-shadow: none; outline: 2px solid Highlight; }
  .btn--primary { border: 1px solid CanvasText; }
}

/* --------------------------------------------------------------------------
   33  CONTENT THAT WAS PREVIOUSLY DROPPED
   Each of these carries a field the generator used to discard: certificate
   numbers, phase timings, office hours, bylines, panel qualifiers.
   -------------------------------------------------------------------------- */
.marks__cert {
  display: block;
  margin-block-start: 10px;
  font: 400 var(--fs-meta)/1.5 var(--font-mono);
  letter-spacing: .02em;
  text-transform: none;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.step__when {
  display: block;
  margin-block-start: 8px;
  color: var(--text-muted);
  letter-spacing: .14em;
}
.panel__note {
  margin-block-start: 8px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.panel__note a { color: inherit; }
.person__bio {
  margin-block-start: 12px;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  max-width: 42ch;
}
.person__cred {
  margin-block-start: 12px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--hairline);
}
.index__by {
  margin-block-start: 8px;
  font: 400 var(--fs-meta)/1.4 var(--font-mono);
  letter-spacing: .02em;
  color: var(--text-muted);
}
.hero__incident {
  margin-block-start: 20px;
  color: var(--text-muted);
}
.field__opt {
  font: 500 var(--fs-label)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
}
.pillar__name a {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color var(--t-state) var(--ease-standard);
}
.pillar__name a:hover { border-block-end-color: currentColor; }

/* The forced-colors list must name the bars that are now real borders. */
@media (forced-colors: active) {
  .disclosure details[open],
  .drawer__row[aria-current="page"],
  .check-row.field--error input[type="checkbox"] { border-color: var(--status-alert); border-width: 2px; }
.field--error .input, .field--error .select, .field--error .textarea {
    border-inline-start-color: Highlight !important;
  }
  .btn--ghost { border-block-end-color: LinkText !important; }
}

/* Error summary at the head of a form. Focusable and announced, and it links
   to each field that produced it. */
.form-summary {
  border: 1px solid var(--status-alert);
  border-inline-start-width: 2px;
  padding: 24px;
  margin-block-end: 32px;
  color: var(--text);
}
.form-summary strong { color: var(--status-alert); }
.form-summary ul { margin-block-start: 12px; }
.form-summary li + li { margin-block-start: 8px; }
.form-summary a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--fs-body-sm);
}

/* Confirmation panel for the mailto delivery path. Uses the ok status colour
   rather than the alert colour the error summary takes. */
.form-summary--ok { border-color: var(--status-ok); }
.form-summary--ok strong { color: var(--status-ok); }
.form-summary--ok a { color: var(--accent-text); }
.form-summary__copy {
  margin-block-start: 16px;
  min-block-size: 0;
  font: 400 var(--fs-body-sm)/1.6 var(--font-mono);
}
.form-summary__btn { margin-block-start: 16px; }

/* --------------------------------------------------------------------------
   34  UTILITIES
   These exist so the generator emits no inline style attributes. That is not
   tidiness: it lets the site ship a Content-Security-Policy without
   `style-src 'unsafe-inline'`, which on a security firm's own site is worth
   the twenty rules below. Every value is on the 4px spacing scale.
   -------------------------------------------------------------------------- */
.mt-12 { margin-block-start: 12px; }
.mt-16 { margin-block-start: 16px; }
.mt-20 { margin-block-start: 20px; }
.mt-24 { margin-block-start: 24px; }
.mt-32 { margin-block-start: 32px; }
.mt-40 { margin-block-start: 40px; }
.c-2 { color: var(--text-secondary); }
.c-3 { color: var(--text-muted); }
.mw-52  { max-width: 52ch; }
.mw-64  { max-width: 64ch; }
.mw-520 { max-width: 520px; }
.row2  { grid-row: 2; }
.flush { margin-block-start: 0; }
.tick-96 { inline-size: 96px; block-size: 1px; background: var(--accent); }
.as-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -0.009em;
  max-width: 24ch;
}
.teaser--lead { border-block-start-width: 2px; border-block-start-color: var(--accent); }

/* Reveal stagger, capped at four steps. Driven by a data attribute rather than
   an inline custom property, for the same CSP reason. */
[data-i="0"] { --i: 0; }
[data-i="1"] { --i: 1; }
[data-i="2"] { --i: 2; }
[data-i="3"] { --i: 3; }
[data-i="4"], [data-i="5"], [data-i="6"], [data-i="7"], [data-i="8"] { --i: 3; }