/* ==========================================================================
   CAD BROKERS / main.css
   --------------------------------------------------------------------------
   "Facility file" design system.

   The site is set like a properly prepared finance file: numbered sections,
   hairline rules, monospaced annotations, dotted-leader specification tables
   and indexed rows. One assertive accent (vermilion) over near-white and
   near-black. Everything else is disciplined, cool grey.

   Typography
     Space Grotesk   display, headings, numerals
     Archivo         body copy and interface text
     JetBrains Mono  labels, indices, keys, table data

   All assets are local. No CDNs, no third-party scripts.
   ========================================================================== */

/* ---------- Fonts (local woff2, downloaded at build time) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --paper:     #FFFFFF;
  --bone:      #F4F5F3;
  --ink:       #0A1116;
  --ink-2:     #131E25;

  /* Text */
  --text:      #0A1116;
  --text-soft: #38474F;
  --text-mute: #6B7880;
  --text-faint:#939DA3;
  --on-ink:    #F2F4F2;
  --on-ink-soft: #A6B2B8;
  --on-ink-mute: #6E7C84;

  /* Accent */
  --signal:    #E23E1E;
  --signal-2:  #FF5A33;
  --signal-ink:#B32D12;

  /* Supporting */
  --petrol:    #0F4C5C;

  /* Rules */
  --rule:        #DCDFE1;
  --rule-strong: #B9BFC3;
  --rule-ink:    rgba(242, 244, 242, .16);
  --rule-ink-2:  rgba(242, 244, 242, .32);

  /* Grid overlay strength */
  --grid-ink: rgba(242, 244, 242, .055);

  /* Type */
  --display: 'Space Grotesk', 'Archivo', system-ui, sans-serif;
  --sans:    'Archivo', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Metrics */
  --wrap: 78rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --head-h: 4.75rem;
  --ease: cubic-bezier(.19, .82, .24, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.5rem);
}
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; }
address { font-style: normal; }
code { font-family: var(--mono); font-size: .9em; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

.skip-link {
  position: fixed; top: 0; left: 50%; z-index: 200;
  transform: translate(-50%, -120%);
  background: var(--ink); color: var(--on-ink);
  padding: .7rem 1.2rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  transition: transform .3s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sections: numbered, ruled, generous */
.sec { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.sec--tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.sec--bone { background: var(--bone); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sec--ink {
  background: var(--ink);
  color: var(--on-ink);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* Faint engineering grid, applied only where it earns its place */
.grid-bg { background-image:
  linear-gradient(var(--grid-ink) 1px, transparent 1px),
  linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 3rem 3rem;
}

/* ---------- Type primitives ---------- */
.display,
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.022em;
  text-wrap: balance;
  font-variant-numeric: tabular-nums;
}
.display--l  { font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; }
.display--m  { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; }
.display--s  { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -.015em; }
/* One accent, used consistently inside display headings */
.display em { font-style: normal; color: var(--signal); }

/* Mono annotation: the site's signature label */
.mono {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mute);
}
.eyebrow::before {
  content: ''; width: 1.6rem; height: 1px; background: var(--signal); flex: none;
}
.eyebrow--signal { color: var(--signal-ink); }
.sec--ink .eyebrow { color: var(--on-ink-soft); }
.sec--ink .eyebrow--signal { color: var(--signal-2); }

.lede {
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.7;
  color: var(--text-soft);
}
.sec--ink .lede { color: var(--on-ink-soft); }

/* Editorial prose */
.prose p { margin-bottom: 1.25rem; color: var(--text-soft); line-height: 1.78; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: .22em;
  transition: text-decoration-color .25s var(--ease), color .25s var(--ease);
}
.prose a:hover { color: var(--signal-ink); text-decoration-color: var(--signal); }

/* Numbers always align in columns */
.tnum, .entry__no, .spec, .country__no, .timeline__year { font-variant-numeric: tabular-nums; }

/* ---------- Section head: index / title / lede on a ruled grid ---------- */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sec--ink .sec-head { border-top-color: var(--rule-ink); }
.sec-head__index {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--signal-ink);
  display: flex; align-items: center; gap: .6rem;
}
.sec-head__index::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.sec--ink .sec-head__index { color: var(--signal-2); }
.sec--ink .sec-head__index::after { background: var(--rule-ink); }
.sec-head__lede { color: var(--text-mute); font-size: 1rem; max-width: 40rem; }
.sec--ink .sec-head__lede { color: var(--on-ink-soft); }

@media (min-width: 62rem) {
  .sec-head { grid-template-columns: 10rem minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .sec-head__index::after { display: none; }
  .sec-head__index { padding-top: .5rem; }
  .sec-head > .display { grid-column: 2; }
  .sec-head__lede { grid-column: 3; padding-top: .35rem; }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .95rem 1.5rem;
  border: 1px solid var(--ink);
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  overflow: hidden; isolation: isolate;
  transition: color .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { color: var(--paper); }
.btn__arrow { font-family: var(--mono); transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--signal { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn--signal::before { background: var(--ink); }
.btn--signal:hover, .btn--signal:focus-visible { border-color: var(--ink); color: #fff; }

.btn--quiet { border-color: var(--rule-strong); }
.btn--lg { padding: 1.15rem 1.9rem; font-size: .74rem; }

.sec--ink .btn:not(.btn--signal) { border-color: var(--rule-ink-2); color: var(--on-ink); }
.sec--ink .btn:not(.btn--signal)::before { background: var(--paper); }
.sec--ink .btn:not(.btn--signal):hover { color: var(--ink); border-color: var(--paper); }

/* ---------- Arrow link: the line extends on hover ---------- */
.arrow-link {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text);
}
.arrow-link::after {
  content: ''; width: 1.5rem; height: 1px;
  background: currentColor;
  transition: width .38s var(--ease);
}
.arrow-link:hover::after { width: 2.6rem; }
.sec--ink .arrow-link { color: var(--on-ink); }

/* ---------- Registration marks: corner ticks on a panel ---------- */
.marks { position: relative; }
.marks::before, .marks::after {
  content: ''; position: absolute; width: 10px; height: 10px;
  border: 0 solid var(--signal); pointer-events: none;
}
.marks::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.marks::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- Plate: an image filed as evidence, with a capped caption ---------- */
.plate { margin: 0; }
.plate__frame {
  position: relative;
  border: 1px solid var(--rule-strong);
  background: var(--bone);
  padding: .5rem;
  overflow: clip;
}
.plate__frame img {
  width: 100%; object-fit: cover;
  filter: grayscale(.34) contrast(1.05);
  transition: filter .6s var(--ease), transform .9s var(--ease);
}
.plate:hover .plate__frame img { filter: grayscale(0) contrast(1); }
.plate figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  margin-top: .7rem; padding-top: .55rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .62rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
}
.plate figcaption b { font-weight: 500; color: var(--text); }
.sec--ink .plate__frame { border-color: var(--rule-ink-2); background: var(--ink-2); }
.sec--ink .plate figcaption { border-top-color: var(--rule-ink); color: var(--on-ink-mute); }
.sec--ink .plate figcaption b { color: var(--on-ink); }

/* ---------- Panel: a bordered block with an optional header strip ---------- */
.panel { border: 1px solid var(--rule-strong); background: var(--paper); }
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.15rem;
  border-bottom: 1px solid var(--rule);
  background: var(--bone);
}
.panel__body { padding: clamp(1.15rem, 2vw, 1.6rem); }
.panel__label {
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute);
}
.panel__label--signal { color: var(--signal-ink); }

/* ---------- Spec: dotted-leader key/value table ---------- */
.spec { border-top: 1px solid var(--rule); }
.spec__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule);
}
.spec__key {
  display: flex; align-items: baseline; gap: .6rem; min-width: 0;
  font-family: var(--mono); font-size: .64rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
}
.spec__key::after {
  content: ''; flex: 1 1 auto; min-width: 1.5rem;
  border-bottom: 1px dotted var(--rule-strong);
  transform: translateY(-.2em);
}
.spec__val {
  font-family: var(--display); font-size: .98rem; font-weight: 500;
  color: var(--text); text-align: right;
}
.sec--ink .spec, .sec--ink .spec__row { border-color: var(--rule-ink); }
.sec--ink .spec__key { color: var(--on-ink-mute); }
.sec--ink .spec__key::after { border-bottom-color: var(--rule-ink-2); }
.sec--ink .spec__val { color: var(--on-ink); }

/* ---------- Sector index: a dense ruled reference list ---------- */
.sectors__list {
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.sectors__list li {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .58rem 0;
  border-top: 1px solid var(--rule);
  font-size: .9rem; color: var(--text-soft);
}
.sectors__list li i {
  font-family: var(--mono); font-style: normal; font-size: .6rem;
  color: var(--text-faint); flex: none;
}
.sec--ink .sectors__list li { border-top-color: var(--rule-ink); color: var(--on-ink-soft); }
.sec--ink .sectors__list li i { color: var(--on-ink-mute); }
@media (min-width: 46rem) { .sectors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .sectors__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Notice: compliance and risk wording ---------- */
.notice { display: grid; gap: .5rem; border-left: 2px solid var(--signal); padding: .15rem 0 .15rem 1.1rem; }
.notice__label {
  font-family: var(--mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--signal-ink);
}
.notice p { font-size: .82rem; line-height: 1.65; color: var(--text-mute); }
.sec--ink .notice__label { color: var(--signal-2); }
.sec--ink .notice p { color: var(--on-ink-mute); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-head.is-scrolled { border-bottom-color: var(--rule-strong); background: rgba(255, 255, 255, .96); }
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: var(--head-h);
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
}
/* Header progress rule: a hairline that fills as the page is read */
.site-head__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
}

.brand { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.brand__mark {
  width: 2.35rem; height: 2.35rem; flex: none;
  display: inline-flex;
}
.brand__mark svg { width: 100%; height: 100%; }
.brand__mark .tile { fill: var(--signal); }
.brand__mark .dot { fill: #FFFFFF; }
.brand__text { display: grid; line-height: 1.15; }
.brand__text strong {
  font-family: var(--display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: .14em; text-transform: uppercase;
}

.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav__link {
  position: relative;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute);
  padding: .4rem 0;
  transition: color .25s var(--ease);
  white-space: nowrap;
}
.site-nav__link i { font-style: normal; color: var(--text-faint); margin-right: .35rem; font-size: .58rem; }
.site-nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--text); }
.site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__link[aria-current="page"] i { color: var(--signal); }
.site-nav__cta { margin-left: .35rem; }

.burger {
  display: none; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--rule-strong);
  position: relative; z-index: 120;
}
.burger span {
  position: absolute; left: 50%; width: 1.1rem; height: 1px; margin-left: -.55rem;
  background: var(--ink);
  transition: transform .32s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 1.05rem; }
.burger span:nth-child(2) { top: 1.45rem; }
.burger.is-open span:nth-child(1) { transform: translateY(.2rem) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-.2rem) rotate(-45deg); }

@media (max-width: 62rem) {
  /* backdrop-filter makes .site-head the containing block for fixed
     descendants, which breaks the full-screen drawer — drop it here. */
  .site-head {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .burger { display: block; }
  .site-nav {
    position: fixed; inset: 0; z-index: 110;
    display: grid; align-content: center; gap: .25rem;
    padding: 6rem var(--gutter) 3rem;
    background: var(--paper);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .45s var(--ease), visibility 0s linear .45s;
    overflow-y: auto;
  }
  .site-nav.is-open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
  .site-nav__link {
    font-family: var(--display); font-size: clamp(1.6rem, 7vw, 2.4rem);
    font-weight: 500; letter-spacing: -.02em; text-transform: none;
    padding: .7rem 0; border-bottom: 1px solid var(--rule);
    color: var(--text);
  }
  .site-nav__link i {
    font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
    display: inline-block; width: 2.2rem;
  }
  .site-nav__link::after { display: none; }
  .site-nav__cta { margin: 1.5rem 0 0; justify-self: start; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot { background: var(--ink); color: var(--on-ink); }
.site-foot a { color: var(--on-ink-soft); }

.foot-mark {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 3rem;
  padding: clamp(3.5rem, 7vw, 6rem) 0 1.8rem;
}
.foot-mark__word {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 5.6rem); line-height: .86;
  letter-spacing: -.045em; text-transform: uppercase;
}
.foot-mark__meta {
  display: grid; gap: .5rem; text-align: right;
  font-family: var(--mono); font-size: .62rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-mute);
}
.foot-mark__meta b { color: var(--signal-2); font-weight: 500; }

.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  padding: clamp(2.2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink);
}
.foot-col h3 {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink);
  margin-bottom: 1.1rem;
}
.foot-col h3::before { content: ''; width: 6px; height: 6px; background: var(--signal); flex: none; }
/* Links stack in a column. The marker gutter is reserved at rest so that
   hovering never reflows the column, and the dash is drawn with scaleX
   rather than width so it cannot overlap a neighbouring link. */
.foot-col a {
  position: relative;
  display: block;
  padding: .42rem 0 .42rem 1.15rem;
  font-size: .9rem;
  transition: color .25s var(--ease);
}
.foot-col a::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: .7rem; height: 1px;
  background: var(--signal);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--ease);
}
.foot-col a:hover,
.foot-col a:focus-visible,
.foot-col a[aria-current="page"] { color: var(--on-ink); }
.foot-col a:hover::before,
.foot-col a:focus-visible::before,
.foot-col a[aria-current="page"]::before { transform: translateY(-50%) scaleX(1); }
.foot-col p { font-size: .86rem; line-height: 1.7; color: var(--on-ink-mute); margin-top: .9rem; max-width: 26rem; }
.foot-col p.foot-col__lead { margin-top: 0; color: var(--on-ink-soft); }
.foot-col--wide p { max-width: 34rem; }
@media (min-width: 46rem) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .foot-grid { grid-template-columns: 1.5fr .75fr .8fr 1.15fr; } }

.foot-legal { display: grid; gap: 1.5rem; padding: clamp(2rem, 4vw, 3rem) 0; }
.foot-legal__notes { display: grid; gap: .75rem; max-width: 66rem; }
.foot-legal__notes p { font-size: .74rem; line-height: 1.75; color: var(--on-ink-mute); }
.foot-legal__risk {
  border-left: 2px solid var(--signal);
  padding-left: 1.1rem;
  font-family: var(--mono); font-size: .66rem; font-weight: 400;
  letter-spacing: .06em; line-height: 1.8; text-transform: uppercase;
  color: var(--on-ink);
}
.foot-legal__id {
  display: grid; gap: .5rem;
  padding-top: 1.3rem; border-top: 1px solid var(--rule-ink);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-ink-mute);
}
@media (min-width: 62rem) {
  .foot-legal { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3.5rem; }
  .foot-legal__id { padding-top: 0; border-top: 0; align-content: start; }
}

.foot-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 2rem;
  padding: 1.4rem 0 2rem;
  border-top: 1px solid var(--rule-ink);
  font-family: var(--mono); font-size: .62rem; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--on-ink-mute);
}
.foot-bar a:hover { color: var(--signal-2); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  padding-top: calc(var(--head-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: clip;
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.hero__title {
  font-size: clamp(2.7rem, 7.2vw, 5.6rem);
  font-weight: 700; letter-spacing: -.042em; line-height: .94;
  margin-top: 1.5rem;
}
.hero__title em { font-style: normal; color: var(--signal); }
.hero__lede { margin-top: 1.7rem; max-width: 36rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.3rem; }
.hero__aside { display: grid; gap: clamp(1.5rem, 3vw, 2rem); align-content: start; }

@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
  .hero__aside { padding-top: 3.75rem; }
}

/* Ruler strip: mono labels divided by hairlines */
.ticks {
  display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.ticks span {
  flex: 1 1 auto;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  font-family: var(--mono); font-size: .6rem; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute);
  white-space: nowrap;
}
.ticks span:last-child { border-right: 0; }
.ticks span b { color: var(--text); font-weight: 500; }
@media (max-width: 46rem) { .ticks span { flex-basis: 50%; } }

/* ==========================================================================
   HOME
   ========================================================================== */

/* ---------- Split: the standard two-column editorial block ---------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.split__copy > * + * { margin-top: 1.25rem; }
.split__copy > .display { margin-top: 1.3rem; }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
}

/* Statement paragraph pulled out of the body copy */
.statement {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.32; letter-spacing: -.022em;
  color: var(--text);
}

/* Drop cap, used once on the home page */
.dropcap::first-letter {
  float: left;
  font-family: var(--display); font-weight: 700;
  font-size: 3.1em; line-height: .78;
  padding: .06em .12em 0 0;
  color: var(--signal);
}

/* ---------- Index rows + sticky preview ---------- */
.index-rows {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.rows { border-top: 1px solid var(--rule); }
.row {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: .35rem 1.25rem;
  align-items: baseline;
  padding: clamp(1.15rem, 2vw, 1.6rem) 1.15rem;
  margin-inline: -1.15rem;
  border-bottom: 1px solid var(--rule);
  transition: background .3s var(--ease);
}
.row__no {
  grid-column: 1; grid-row: 1;
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .1em; color: var(--text-faint);
  transition: color .3s var(--ease);
}
.row__title {
  grid-column: 2; grid-row: 1;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  letter-spacing: -.022em; line-height: 1.14;
  transition: color .3s var(--ease);
}
.row__note { grid-column: 2; grid-row: 2; color: var(--text-mute); font-size: .92rem; }
.row__cue {
  grid-column: 2; grid-row: 3;
  margin-top: .4rem;
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute);
  display: inline-flex; align-items: center; gap: .6rem;
}
.row__cue::after { content: ''; width: 1.1rem; height: 1px; background: currentColor; transition: width .34s var(--ease); }
.row:hover, .row.is-active { background: var(--bone); }
.row:hover .row__no, .row.is-active .row__no { color: var(--signal); }
.row:hover .row__title { color: var(--signal-ink); }
.row:hover .row__cue::after { width: 2.1rem; }

.row-preview { display: none; }
@media (min-width: 68rem) {
  .index-rows { grid-template-columns: minmax(0, 1fr) 21rem; }
  .row { grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: .3rem 1.5rem; align-items: baseline; }
  .row__no { grid-column: 1; grid-row: 1 / span 2; }
  .row__title { grid-column: 2; grid-row: 1; }
  .row__note { grid-column: 2; grid-row: 2; }
  .row__cue { grid-column: 3; grid-row: 1; margin-top: 0; align-self: baseline; }
  .row__cue span { display: none; }
  .row-preview { display: block; position: sticky; top: calc(var(--head-h) + 2.25rem); }
  .row-preview__frame {
    position: relative; aspect-ratio: 4 / 5;
    border: 1px solid var(--rule-strong);
    background: var(--ink-2);
    overflow: clip;
  }
  .row-preview__frame img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: grayscale(.32) contrast(1.06);
    transition: opacity .55s var(--ease), transform 1.1s var(--ease);
  }
  .row-preview__frame img.is-on { opacity: 1; }
  .row-preview__frame img.is-on { transform: scale(1.005); }
  .row-preview__cap {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: .7rem; padding-top: .55rem; border-top: 1px solid var(--rule);
    font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-mute);
  }
  .row-preview__cap b { font-weight: 500; color: var(--text); }
}

/* ==========================================================================
   COVERAGE CHART
   ========================================================================== */
.chart {
  position: relative;
  border: 1px solid var(--rule-ink-2);
  background: var(--ink);
  padding: clamp(.85rem, 2vw, 1.6rem);
}
.chart__plot { position: relative; display: block; }
.chart__graticule {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* A graticule for the Mercator plate. Meridians stay evenly spaced in
     Mercator: every 30 degrees of longitude is 30/359.596545 of the plate
     width, i.e. 8.3427%. Parallels do not space evenly - each sits at the
     height of its Mercator ordinate over the 83.6N..58.2S span - so they are
     individual hairlines drawn by the ::before overlay below. */
  background-image: repeating-linear-gradient(
    90deg, var(--grid-ink) 0 1px, transparent 1px 8.3427%);
}
.chart__graticule::before {
  /* parallels at 60N, 30N, 0 and 30S, each at its Mercator height:
     y(lat) = (m(83.6008) - m(lat)) / (m(83.6008) - m(-58.2174)) */
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-ink), var(--grid-ink)),
    linear-gradient(var(--grid-ink), var(--grid-ink)),
    linear-gradient(var(--grid-ink), var(--grid-ink)),
    linear-gradient(var(--grid-ink), var(--grid-ink));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 37.8506%, 0 56.3907%, 0 69.6573%, 0 82.9239%;
}
.chart__dots { position: relative; z-index: 1; width: 100%; height: auto; }
.chart path.land { fill: rgba(242, 244, 242, .16); }
.chart circle { transition: fill .5s var(--ease); }
/* countries on the books, then the region filter state on top of them */
.chart circle.covered { fill: rgba(242, 244, 242, .62); }
.chart.is-filtered circle.covered { fill: rgba(242, 244, 242, .14); }
.chart circle.covered.on-region { fill: var(--signal-2); }

.chart__pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.chart__pin { position: absolute; width: 0; height: 0; }
.chart__pin::before {
  content: ''; position: absolute; left: -3px; top: -3px;
  width: 6px; height: 6px; background: var(--signal);
}
.chart__pin::after {
  content: ''; position: absolute; left: -10px; top: -.5px;
  width: 20px; height: 1px; background: rgba(226, 62, 30, .55);
}
.chart__pin b {
  position: absolute; left: .7rem; top: -.42rem;
  font-family: var(--mono); font-size: .55rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-ink); white-space: nowrap;
  /* knock the pale dot field out behind the glyphs so city names stay readable */
  text-shadow: 0 0 3px rgba(10, 17, 22, .95), 0 1px 2px rgba(10, 17, 22, .95);
}
/* the label moves to whichever side of the marker has room for it */
.chart__pin--n b { left: 0; top: auto; bottom: .55rem; transform: translateX(-50%); }
.chart__pin--s b { left: 0; top: .55rem; transform: translateX(-50%); }
.chart__pin--w b { left: auto; right: .7rem; }
.chart__pin--e b { left: .7rem; }
.chart__legend {
  display: flex; flex-wrap: wrap; gap: .55rem 1.75rem;
  margin-top: 1.1rem; padding-top: .95rem;
  border-top: 1px solid var(--rule-ink);
  font-family: var(--mono); font-size: .6rem; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--on-ink-mute);
}
.chart__legend i { display: inline-block; width: 6px; height: 6px; margin-right: .5rem; }
.chart__legend i.pin { background: var(--signal); }
.chart__legend i.on { background: rgba(242, 244, 242, .62); }
.chart__legend i.off { background: rgba(242, 244, 242, .16); }

/* A phone would shrink the plate until a dot is barely a pixel. Keep the plot
   legible and let it scroll sideways instead; the pins live inside the plot,
   so they travel with the dots. */
@media (max-width: 46rem) {
  .chart { overflow-x: auto; }
  .chart__plot { min-width: 40rem; }
  .chart__pin b { font-size: .5rem; }
  .chart__legend { gap: .45rem 1.1rem; }
}

/* ---------- Filters: tabs and search ---------- */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--rule-strong); }
.tab {
  padding: .72rem 1.05rem;
  border-right: 1px solid var(--rule);
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.tab:last-child { border-right: 0; }
.tab:hover { color: var(--text); background: var(--bone); }
.tab.is-on { background: var(--ink); color: var(--on-ink); }

.search {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--rule-strong);
  padding: .7rem 1rem; min-width: 17rem;
  transition: border-color .25s var(--ease);
}
.search__icon { width: 1rem; color: var(--signal); flex: none; }
.search input {
  background: none; border: 0; width: 100%;
  font-family: var(--mono); font-size: .72rem; font-weight: 400;
  letter-spacing: .06em; color: var(--text); text-transform: uppercase;
}
.search input::placeholder { color: var(--text-faint); }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--ink); }

.count-line {
  margin-top: 1.6rem;
  font-family: var(--mono); font-size: .64rem; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute);
}
.count-line strong { color: var(--signal-ink); font-weight: 500; }
.count-line--ink { color: var(--on-ink-mute); }
.count-line--ink strong { color: var(--signal-2); }

/* ---------- Country index ---------- */
.country-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 1.4rem;
}
.country {
  display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto;
  align-items: baseline; gap: .75rem;
  background: var(--paper);
  padding: .8rem 1rem;
  transition: background .3s var(--ease);
}
.country:hover { background: var(--bone); }
.country.is-hidden { display: none; }
.country__no { font-family: var(--mono); font-size: .58rem; color: var(--text-faint); }
.country__name {
  font-family: var(--display); font-size: 1rem; font-weight: 500;
  letter-spacing: -.014em; line-height: 1.25;
}
.country__tier {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .54rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
  white-space: nowrap;
}
.country__tier::before { content: ''; width: 5px; height: 5px; flex: none; }
.country__tier--desk::before { background: var(--signal); }
.country__tier--panel::before { border: 1px solid var(--text-faint); }

/* ---------- Region row (dark band) ---------- */
.region-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule-ink);
  border: 1px solid var(--rule-ink);
}
.region-card {
  display: grid; gap: .45rem; align-content: start;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: var(--ink);
  transition: background .35s var(--ease);
}
.region-card:hover { background: var(--ink-2); }
.region-card__count {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1;
  letter-spacing: -.035em; color: var(--on-ink);
}
.region-card__name {
  font-family: var(--display); font-size: 1rem; font-weight: 500;
  letter-spacing: -.014em; color: var(--on-ink);
}
.region-card__note {
  font-family: var(--mono); font-size: .56rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-mute);
}
@media (min-width: 52rem) { .region-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   SHARED BLOCKS
   ========================================================================== */

/* ---------- Process steps: four ruled columns ---------- */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule); }
.steps > li {
  display: grid; gap: .5rem; align-content: start;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) 0;
  border-bottom: 1px solid var(--rule);
}
.steps__no {
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .16em; color: var(--signal-ink);
}
.steps h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.steps p { color: var(--text-mute); font-size: .93rem; max-width: 42rem; }
@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .steps > li {
    border-bottom: 0; border-right: 1px solid var(--rule);
    padding: clamp(1.5rem, 2.6vw, 2.1rem) clamp(1.1rem, 2vw, 1.8rem);
  }
  .steps > li:first-child { padding-left: 0; }
  .steps > li:last-child { border-right: 0; padding-right: 0; }
}
.steps--compact > li { padding-block: clamp(1.1rem, 2vw, 1.5rem); }
.steps--compact p { font-size: .88rem; }

/* ---------- Entries: a journal-style index of articles ---------- */
.entries { border-top: 1px solid var(--rule); }
.entry {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: .55rem;
  padding: clamp(1.3rem, 2.4vw, 1.8rem) 1.15rem;
  margin-inline: -1.15rem;
  border-bottom: 1px solid var(--rule);
  transition: background .3s var(--ease);
}
.entry:hover { background: var(--bone); }
.entry__no { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; color: var(--text-faint); }
.entry__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  letter-spacing: -.022em; line-height: 1.16;
  transition: color .25s var(--ease);
}
.entry:hover .entry__title { color: var(--signal-ink); }
.entry__dek { color: var(--text-mute); font-size: .92rem; max-width: 54rem; }
.entry__meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  font-family: var(--mono); font-size: .58rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
}
.entry__meta b { color: var(--signal-ink); font-weight: 500; }
@media (min-width: 60rem) {
  .entry {
    grid-template-columns: 3rem minmax(0, 1fr) 12rem;
    gap: .5rem 1.75rem; align-items: baseline;
  }
  .entry__no { grid-column: 1; grid-row: 1; }
  .entry__title { grid-column: 2; grid-row: 1; }
  .entry__dek { grid-column: 2; grid-row: 2; }
  .entry__meta { grid-column: 3; grid-row: 1; justify-content: flex-end; text-align: right; }
}

/* ---------- CTA band ---------- */
.cta {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: end;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 56rem) {
  .cta { grid-template-columns: minmax(0, 1fr) auto; }
  .cta__actions { justify-content: flex-end; }
}

/* ---------- Cards: three-up editorial blocks ---------- */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 3vw, 2.5rem); }
.card { border-top: 2px solid var(--rule-strong); padding-top: 1.2rem; transition: border-color .35s var(--ease); }
.card:hover { border-top-color: var(--signal); }
.card h3 { font-size: clamp(1.1rem, 1.7vw, 1.3rem); margin-bottom: .5rem; }
.card p { color: var(--text-mute); font-size: .92rem; }
.card .plate { margin-bottom: 1.2rem; }
/* Crop every plate image to one shared ratio so card rows keep equal
   heights whatever each photograph's native proportions are.          */
.cards .plate__frame img { aspect-ratio: 3 / 2; }
@media (min-width: 56rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Region notes (ruled grid) ---------- */
.rnotes {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.rnotes > li {
  display: grid; gap: .6rem; align-content: start;
  background: var(--paper);
  padding: clamp(1.2rem, 2vw, 1.6rem);
}
.rnote__count {
  font-family: var(--display); font-weight: 700;
  font-size: 1.9rem; line-height: 1; letter-spacing: -.035em;
  color: var(--signal);
}
.rnotes h3 { font-size: 1.15rem; }
.rnotes p { color: var(--text-mute); font-size: .9rem; }
@media (min-width: 48rem) { .rnotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .rnotes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   INTERIOR PAGE HERO
   ========================================================================== */
.page-hero {
  padding-top: calc(var(--head-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.page-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.page-hero__title {
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  font-weight: 700; letter-spacing: -.04em; line-height: .98;
  margin-top: 1.4rem;
}
.page-hero__title em { font-style: normal; color: var(--signal); }
.page-hero__lede { margin-top: 1.6rem; max-width: 48rem; }
.page-hero__aside { align-self: start; }
@media (min-width: 64rem) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); align-items: end; }
  .page-hero__aside { padding-bottom: .35rem; }
}

/* ---------- File index: sticky in-page nav ---------- */
.file-index {
  position: sticky; top: var(--head-h); z-index: 40;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.file-index__list { display: flex; overflow-x: auto; scrollbar-width: none; }
.file-index__list::-webkit-scrollbar { display: none; }
.file-index a {
  flex: none;
  display: inline-flex; align-items: baseline; gap: .55rem;
  padding: .95rem 1.15rem;
  border-right: 1px solid var(--rule);
  font-family: var(--mono); font-size: .6rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
  transition: color .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.file-index a:first-child { border-left: 1px solid var(--rule); }
.file-index a:hover, .file-index a.is-on { color: var(--text); background: var(--bone); }
.file-index a b, .file-index a.is-on b { color: var(--signal); font-weight: 500; }

/* ---------- Service detail ---------- */
.svc {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  border-top: 1px solid var(--rule);
  scroll-margin-top: calc(var(--head-h) + 3.6rem);
}
.svc__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.svc__head { display: grid; gap: .85rem; }
.svc__no {
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--signal-ink);
  display: flex; align-items: center; gap: .7rem;
}
.svc__no::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.svc__title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing: -.034em; }
.svc__tagline {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.42; letter-spacing: -.018em;
  color: var(--petrol);
}
.svc__caps { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); }
.svc__caps li {
  display: flex; gap: .7rem;
  padding: .55rem 0; border-top: 1px solid var(--rule);
  font-size: .9rem; color: var(--text-soft);
}
.svc__caps li::before { content: ''; width: 5px; height: 5px; background: var(--signal); flex: none; margin-top: .6rem; }
.svc__media { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 48rem) { .svc__caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .svc__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .svc--flip .svc__media { order: 2; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.pull {
  border-left: 2px solid var(--signal);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.36; letter-spacing: -.022em;
  color: var(--text);
}

/* ---------- Principals ---------- */
.principals { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); }
.principal { display: grid; border: 1px solid var(--rule-strong); background: var(--paper); }
.principal__body {
  display: grid; gap: .55rem; align-content: start;
  padding: clamp(1.2rem, 2vw, 1.6rem);
}
.principal__name { font-size: 1.22rem; }
.principal__role {
  font-family: var(--mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--signal-ink);
}
.principal p { color: var(--text-mute); font-size: .9rem; }
@media (min-width: 52rem) { .principals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Principles ---------- */
.principles {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.principles > li {
  display: grid; gap: .6rem; align-content: start;
  background: var(--paper);
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
}
.principles__no {
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .16em; color: var(--signal);
}
.principles h3 { font-size: 1.2rem; }
.principles p { color: var(--text-mute); font-size: .92rem; }
@media (min-width: 48rem) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Timeline ---------- */
.timeline { border-top: 1px solid var(--rule); }
.timeline > li {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: .3rem 1.5rem;
  padding: clamp(1rem, 1.9vw, 1.4rem) 0;
  border-bottom: 1px solid var(--rule);
}
.timeline__year {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; color: var(--signal-ink);
}
.timeline p { color: var(--text-soft); font-size: .94rem; }
@media (min-width: 56rem) {
  .timeline > li { grid-template-columns: 6rem minmax(0, 1fr); }
}

/* ==========================================================================
   INSIGHTS
   ========================================================================== */
.lead {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: center;
  padding-bottom: clamp(2.75rem, 5vw, 4rem);
}
.lead__body { display: grid; gap: .9rem; align-content: start; }
@media (min-width: 56rem) { .lead { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.article { display: block; }
.article__head { padding-top: calc(var(--head-h) + clamp(2.25rem, 4.5vw, 3.75rem)); }
.article__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: .6rem; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute);
}
.article__meta b { color: var(--signal-ink); font-weight: 500; }
.article__title {
  font-size: clamp(1.95rem, 4.4vw, 3.4rem);
  font-weight: 700; letter-spacing: -.036em; line-height: 1.02;
  margin-top: 1.5rem; max-width: 26ch;
}
.article__dek { margin-top: 1.4rem; max-width: 46rem; }
.article__hero { margin-top: clamp(2rem, 4vw, 3rem); }
.article__hero img { width: 100%; max-height: 32rem; object-fit: cover; }

.article__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.article__rail { display: none; }
.article__rail h2 {
  font-family: var(--mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute);
  margin-bottom: .9rem;
}
.article__rail ol li { border-top: 1px solid var(--rule); }
.article__rail a {
  display: block; padding: .6rem 0;
  font-family: var(--mono); font-size: .62rem; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute);
  transition: color .25s var(--ease);
}
.article__rail a:hover { color: var(--signal-ink); }
.article__rail a i { font-style: normal; color: var(--text-faint); margin-right: .5rem; }
@media (min-width: 66rem) {
  .article__wrap { grid-template-columns: 13rem minmax(0, 1fr); }
  .article__wrap--solo { grid-template-columns: minmax(0, 1fr); }
  .article__rail { display: block; position: sticky; top: calc(var(--head-h) + 2.5rem); align-self: start; }
}

.article__body { max-width: 46rem; }
.article__body p { color: var(--text-soft); font-size: 1.01rem; line-height: 1.82; margin-bottom: 1.35rem; }
.article__body .article__lede { font-size: 1.14rem; color: var(--text); line-height: 1.7; }
.article__body h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -.025em; line-height: 1.2;
  margin: 2.5rem 0 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.article__body h2::before {
  content: ''; display: block; width: 1.6rem; height: 2px;
  background: var(--signal); margin-bottom: 1.1rem;
}
.article__body blockquote {
  margin: 2rem 0;
  border-left: 2px solid var(--signal);
  padding: .2rem 0 .2rem clamp(1rem, 2vw, 1.5rem);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.4; letter-spacing: -.02em;
  color: var(--text);
}
.article__foot {
  display: grid; gap: 1.25rem;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.article__foot p { font-size: .86rem; color: var(--text-mute); margin: 0; }
.article__foot p a {
  color: var(--text); text-decoration: underline;
  text-decoration-color: var(--rule-strong); text-underline-offset: .2em;
}
.article__foot p a:hover { color: var(--signal-ink); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 4vw, 3.5rem);
}
@media (min-width: 60rem) { .contact__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }

.fields { border-top: 1px solid var(--rule); }
.fields > div {
  display: grid; gap: .35rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.fields dt {
  font-family: var(--mono); font-size: .6rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute);
}
.fields dd { font-family: var(--display); font-weight: 500; font-size: 1.04rem; line-height: 1.45; }
.fields dd span { display: block; }
.fields dd small { display: block; margin-top: .3rem; font-family: var(--sans); font-weight: 400; font-size: .84rem; color: var(--text-mute); }
.fields a { border-bottom: 1px solid var(--rule-strong); transition: color .25s var(--ease), border-color .25s var(--ease); }
.fields a:hover { color: var(--signal-ink); border-color: var(--signal); }
@media (min-width: 34rem) {
  .fields > div { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: baseline; gap: 1.5rem; }
}

/* Numbered checklist */
.checklist { display: grid; counter-reset: cl; }
.checklist li {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 1rem; align-items: baseline;
  padding: .85rem 0;
  border-top: 1px solid var(--rule);
  color: var(--text-soft); font-size: .94rem;
}
.checklist li::before {
  content: counter(cl, decimal-leading-zero);
  counter-increment: cl;
  font-family: var(--mono); font-size: .6rem; font-weight: 500;
  color: var(--signal); letter-spacing: .1em;
}

/* ==========================================================================
   404
   ========================================================================== */
.lost {
  min-height: 76svh;
  display: grid; align-content: center;
  padding: calc(var(--head-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(3rem, 7vw, 6rem);
}
.lost__title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700; letter-spacing: -.042em; line-height: .96;
  margin-top: 1.4rem;
}
.lost__title em { font-style: normal; color: var(--signal); }
.lost__lede { margin-top: 1.6rem; max-width: 40rem; }
.lost code { color: var(--signal-ink); word-break: break-all; }
.lost__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }

/* ==========================================================================
   COOKIE NOTICE
   A fixed panel above the bottom edge, shown once per browsing session.
   Paper surface so it reads over both light pages and the dark footer,
   with the case-file label treatment and the vermilion Accept button.
   ========================================================================== */
.cookie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 130;
  background: var(--paper);
  border-top: 1px solid var(--rule-strong);
  box-shadow: 0 -14px 38px rgba(10, 17, 22, .12);
  animation: cookie-rise .55s var(--ease) .35s both;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@keyframes cookie-rise {
  from { transform: translateY(102%); }
  to   { transform: translateY(0); }
}
.cookie__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
@media (min-width: 56rem) {
  .cookie__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 2.25rem; }
}
.cookie__label {
  font-family: var(--mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--signal-ink);
}
.cookie__label::before {
  content: ''; display: inline-block; width: .5rem; height: .5rem;
  background: var(--signal); margin-right: .55rem;
}
.cookie__text {
  margin-top: .45rem;
  max-width: 56rem;
  font-size: .92rem;
  color: var(--text-soft);
}
.cookie__text a {
  color: var(--text); font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: .2em;
}
.cookie__text a:hover { color: var(--signal-ink); text-decoration-color: var(--signal); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.cookie .btn { padding: .78rem 1.15rem; font-size: .66rem; }

@media print {
  .cookie { display: none !important; }
}

/* ==========================================================================
   MOTION
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.muted { color: var(--text-mute); }
.small { font-size: .85rem; }
.tnum { font-variant-numeric: tabular-nums; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.mt-4 { margin-top: clamp(2rem, 4vw, 3rem); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 52rem) { .stack-2--split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   REDUCED MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-head, .site-foot, .file-index, .row-preview, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .sec, .svc { padding: 1.5rem 0; break-inside: avoid; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .7em; }
}