:root {
  /* ---- LIGHT THEME ----------------------------------------------------
     Surfaces are warm off-whites; ink tokens now mean dark-on-light. Dark
     bands (hero, footer, header, the "will not promise" section and the CTA)
     re-declare these same tokens, so every component adapts automatically
     instead of needing a second set of rules. ------------------------- */
  --ink:          #FAF8F3;   /* primary surface */
  --ink-raised:   #EFEBE1;   /* raised surface / cards */
  --ink-line:     #D9D4C7;   /* hairlines and borders */
  --ink-text:     #333B43;   /* body copy      — 9.9:1 on --ink */
  --ink-head:     #0E1216;   /* headings       — 17.6:1 */
  --ink-muted:    #5C666E;   /* secondary copy — 5.6:1 */

  --gold:         #7E560F;   /* accent — 5.2:1 on the darkest light surface */
  --gold-bright:  #6B4A0D;   /* hover / emphasis, darker on light */
  --gold-rule:    #C9973F;   /* decorative rules only, never text */

  --cryo:         #1F6178;
  --cryo-deep:    #14323F;   /* dark emphasis band */
  --cryo-lt:      #A8CEDE;

  --paper:        #EFEBE1;
  --paper-warm:   #FAF8F3;
  --paper-ink:    #0E1216;
  --paper-muted:  #5C666E;
  --paper-line:   #D9D4C7;

  --signal:       #B03A30;
  --signal-lt:    #F0958B;
  --signal-dk:    #8E2A22;
  --verify:       #3F7D5C;
  --verify-dk:    #2F6B49;

  /* Illustrations default to their light-surface values */
  --ill-fg:       #0E1216;
  --ill-dim:      #5C666E;
  --ill-line:     #C6C0B2;
  --ill-gold-tx:  #6B4A0D;
  --ill-red-tx:   #8E2A22;
  --ill-cryo-tx:  #1B5266;
  --ill-gold:     #7E560F;
  --ill-mono:     "IBM Plex Mono", ui-monospace, monospace;

  --display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sect-y: clamp(4.5rem, 9vw, 8.5rem);
}

/* ---- DARK CONTEXTS --------------------------------------------------
   Re-declaring the same tokens flips every descendant component at once. */
.hero,
.site-header,
.site-footer,
.sect--cryo,
.cta-band,
.consent {
  --ink:          #0A0C0F;
  --ink-raised:   #12171C;
  --ink-line:     #2A343C;
  --ink-text:     #D7DBDE;
  --ink-head:     #F4F6F7;
  --ink-muted:    #97A1A8;
  --gold:         #C9973F;
  --gold-bright:  #F0C876;
  --gold-rule:    #C9973F;
  --cryo:         #6FA6BE;
  --paper:        #12171C;
  --paper-warm:   #12171C;
  --paper-ink:    #F4F6F7;
  --paper-muted:  #97A1A8;
  --paper-line:   #2A343C;
  --signal:       #C4483E;
  --ill-fg:       #F4F6F7;
  --ill-dim:      #97A1A8;
  --ill-line:     #2C363E;
  --ill-gold-tx:  #F0C876;
  --ill-red-tx:   #F0958B;
  --ill-cryo-tx:  #AFD6E6;
  --ill-gold:     #C9973F;
  color: var(--ink-text);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* ---------- accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -110%);
  z-index: 200; background: var(--gold); color: var(--ink);
  padding: .7rem 1.25rem; font-family: var(--mono);
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

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

.eyebrow {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.5rem;
  display: block;
}

.mono { font-family: var(--mono); font-size: .95em; letter-spacing: .01em; }

.h-display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.08;
  color: var(--ink-head);
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  max-width: 22ch;
}
.h-display--wide { max-width: 30ch; }

.lede { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); max-width: 62ch; }
.measure { max-width: 68ch; }

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .045em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  padding: 1rem 1.6rem; border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: #12181D; color: #FAF8F3; border-color: #12181D; }
.btn--primary:hover { background: #2A343C; border-color: #2A343C; }
/* Gold reverts inside every dark context. The header and footer are dark
   regardless of the page theme, so they belong in this list too. */
.hero .btn--primary, .cta-band .btn--primary, .sect--cryo .btn--primary,
.consent .btn--primary, .site-header .btn--primary, .site-footer .btn--primary {
  background: #C9973F; color: #0A0C0F; border-color: #C9973F;
}
.hero .btn--primary:hover, .cta-band .btn--primary:hover,
.sect--cryo .btn--primary:hover, .consent .btn--primary:hover,
.site-header .btn--primary:hover, .site-footer .btn--primary:hover {
  background: #F0C876; border-color: #F0C876;
}
/* Ghost buttons in dark contexts need a visible edge too */
.site-header .btn--ghost, .site-footer .btn--ghost {
  color: #F4F6F7; border-color: #2A343C;
}
.site-header .btn--ghost:hover, .site-footer .btn--ghost:hover {
  border-color: #C9973F; color: #F0C876;
}
.btn--ghost { background: transparent; color: var(--ink-head); border-color: var(--ink-line); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-bright); }
.btn--onpaper { background: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink); }
.btn--onpaper:hover { background: #26313a; border-color: #26313a; }
.btn--ghost-paper { background: transparent; color: var(--paper-ink); border-color: var(--paper-line); }
.btn--ghost-paper:hover { border-color: var(--paper-ink); }

.arrow::after { content: "\2192"; }

/* Section backgrounds — alternate deliberately, never two the same in a row */
.sect { padding-block: var(--sect-y); position: relative; }
.sect--ink    { background: #FAF8F3; }
.sect--raised { background: #E9E5DA; }
.sect--paper  { background: #F2EFE6; }
.sect--paper2 { background: #FAF8F3; }
.sect--cryo   { background: var(--cryo-deep); }
.cta-band     { background: #0A0C0F; }

.sect--paper .h-display, .sect--paper2 .h-display { color: var(--ink-head); }
.sect--paper .eyebrow, .sect--paper2 .eyebrow { color: var(--gold); }

.rule { height: 1px; background: var(--ink-line); border: 0; margin: 0; }
.panel { background: #FFFDF8; }
.rule--gold { background: linear-gradient(90deg, var(--gold), transparent); }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 1.15rem;
  background: rgba(10,12,15,.94);
  backdrop-filter: blur(10px);
  transition: background .3s ease, border-color .3s ease, padding .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck { border-bottom-color: #2A343C; padding-block: .8rem; }
/* Only the homepage hero gets a transparent bar, and only before it sticks. */
body:has(.hero) .site-header:not(.is-stuck) { background: rgba(10,12,15,0); backdrop-filter: none; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  display: flex; align-items: center;
  text-decoration: none; color: var(--ink-head);
  white-space: nowrap;
}
.brand__logo {
  height: 38px; width: auto; display: block;
  transition: opacity .16s ease;
}
.brand:hover .brand__logo { opacity: .82; }
.site-header.is-stuck .brand__logo { height: 34px; }
.site-footer .brand__logo { height: 44px; margin-bottom: 1.25rem; }
@media (max-width: 480px) { .brand__logo { height: 30px; } }
.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list { display: flex; gap: 1.75rem; }
.nav__link {
  font-family: var(--display); font-weight: 600; font-size: .8125rem;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-text);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.nav__link:hover { color: var(--gold-bright); }
.nav__link[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--ink-line);
  color: var(--ink-head); font-family: var(--display); font-weight: 700;
  font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .6rem .9rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 auto 0; top: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--ink-line);
    padding: 5.5rem var(--gut) 2rem;
    transform: translateY(-102%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    max-height: 100dvh; overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { display: block; padding: 1.05rem 0; border-bottom: 1px solid var(--ink-line); }
  .nav .btn { margin-top: 1.5rem; justify-content: center; }
}

/* ==========================================================================
   HERO — cinematic intro
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink);
}
.hero__media {
  position: absolute; inset: 0;
  z-index: 0;
  will-change: transform;
  transform: scale(1);
}
.hero__media > * {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__svg { z-index: 0; }
.hero__video { z-index: 1; }

/* A slow breathing zoom -- in, then back out -- running continuously. It is
   deliberately unhurried: at this speed the movement is felt, not noticed.
   The footage already contains its own camera push-in, so when the film is
   present the CSS amplitude drops right down instead of stacking two moves. */
.hero__media { animation: heroBreathe 56s ease-in-out infinite; }
@keyframes heroBreathe {
  0%   { transform: scale(1.000); }
  50%  { transform: scale(1.105); }
  100% { transform: scale(1.000); }
}
.hero.has-film .hero__media { animation: heroFilmBreathe 72s ease-in-out infinite; }
@keyframes heroFilmBreathe {
  0%   { transform: scale(1.000); }
  50%  { transform: scale(1.040); }
  100% { transform: scale(1.000); }
}

.hero__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,12,15,.8) 0%, rgba(10,12,15,.55) 30%, rgba(10,12,15,.1) 60%, rgba(10,12,15,0) 78%),
    linear-gradient(0deg, rgba(10,12,15,.92) 0%, rgba(10,12,15,.35) 34%, rgba(10,12,15,0) 62%),
    radial-gradient(120% 90% at 50% 40%, rgba(10,12,15,0) 28%, rgba(10,12,15,.5) 76%, rgba(10,12,15,.9) 100%),
    linear-gradient(180deg, rgba(10,12,15,.5) 0%, rgba(10,12,15,0) 20%);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero.is-revealed .hero__vignette { opacity: 1; }

/* The film is considerably brighter than the SVG fallback across the whole
   frame, so the text scrim is deepened when it is in use. Measured to keep the
   eyebrow and headline above 4.5:1 against the brightest frame of the loop. */
.hero.has-film .hero__vignette {
  background:
    linear-gradient(90deg, rgba(10,12,15,.94) 0%, rgba(10,12,15,.78) 30%, rgba(10,12,15,.34) 62%, rgba(10,12,15,.12) 82%),
    linear-gradient(0deg, rgba(10,12,15,.96) 0%, rgba(10,12,15,.55) 38%, rgba(10,12,15,.05) 68%),
    radial-gradient(120% 90% at 50% 38%, rgba(10,12,15,0) 22%, rgba(10,12,15,.42) 72%, rgba(10,12,15,.88) 100%),
    linear-gradient(180deg, rgba(10,12,15,.62) 0%, rgba(10,12,15,0) 22%);
}


/* The gold hairline that draws in at 1.8s — the first thing on screen */
.hero__hairline {
  position: absolute; z-index: 2; left: 0; bottom: 33%;
  height: 1px; width: 0;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-bright) 50%, var(--gold) 82%, transparent);
  opacity: 0;
}
.hero.is-playing .hero__hairline { animation: hairlineDraw 1.2s ease-out 1.8s forwards; }
@keyframes hairlineDraw {
  from { width: 0; opacity: 0; }
  40%  { opacity: 1; }
  to   { width: 100%; opacity: .85; }
}

.hero__content {
  position: relative; z-index: 3;
  padding-bottom: clamp(3.5rem, 8vh, 7rem);
  padding-top: 8rem;
}

/* Staged elements start hidden but remain in the DOM, focusable and readable. */
.stage { opacity: 0; transform: translateY(14px); }
.hero.is-revealed .stage { opacity: 1; transform: translateY(0); }
.hero.is-revealed .stage--eyebrow { transition: opacity .9s ease .0s, transform .9s ease 0s; }
.hero.is-revealed .stage--l1 { transition: opacity 1s ease .3s, transform 1s ease .3s; }
.hero.is-revealed .stage--l2 { transition: opacity 1s ease .42s, transform 1s ease .42s; }
.hero.is-revealed .stage--cta { transition: opacity .9s ease 1.4s, transform .9s ease 1.4s; }

/* Nav starts transparent but present. Any focus completes the intro (JS). */
.site-header.is-hidden .brand,
.site-header.is-hidden .nav,
.site-header.is-hidden .nav-toggle { opacity: 0; transform: translateY(-8px); }
.site-header .brand,
.site-header .nav,
.site-header .nav-toggle { transition: opacity .9s ease, transform .9s ease; }

.hero__title {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink-head);
  font-size: clamp(2.6rem, 6vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.042em;
  margin: 0 0 2.25rem;
  max-width: 20ch;
  text-wrap: balance;
}
.hero__title span { display: block; }
.hero__title em { font-style: normal; color: var(--gold-bright); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

.hero__scroll {
  font-family: var(--display); font-weight: 600; font-size: .875rem;
  letter-spacing: .02em; color: var(--ink-head); text-decoration: none;
  border-bottom: 1px solid rgba(201,151,63,.5); padding-bottom: 2px;
}
.hero__scroll:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

.skip-intro {
  position: absolute; z-index: 5; right: var(--gut); bottom: 1.75rem;
  background: transparent; border: 1px solid rgba(111,166,190,.4);
  color: var(--cryo); font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .55rem .9rem; cursor: pointer;
  opacity: 0; transition: opacity .5s ease .0s, border-color .16s ease, color .16s ease;
}
.hero.is-playing .skip-intro { animation: skipIn .6s ease 1.5s forwards; }
.skip-intro:hover { border-color: var(--cryo); color: #a8cede; }
@keyframes skipIn { to { opacity: 1; } }
.hero.is-revealed .skip-intro { opacity: 0; pointer-events: none; animation: none; }

/* Narrow viewports: frame the cryostat in the upper area so the whole object
   reads, rather than slicing it into abstract stripes behind the headline. */
@media (max-width: 767px) {
  .hero__svg { top: 3.5rem; bottom: auto; height: 56%; }
  .hero__hairline { bottom: 38%; }
  .hero__content { padding-top: 6rem; }
}

/* Repeat visits within a session, and reduced-motion: land on the final state
   with no transition at all, so nothing appears to fade in a second time. */
.hero.is-instant .stage,
.hero.is-instant .hero__vignette,
.site-header.is-instant .brand,
.site-header.is-instant .nav,
.site-header.is-instant .nav-toggle { transition: none !important; }
.hero.is-instant .stage { opacity: 1; transform: none; }
.hero.is-instant .hero__vignette { opacity: 1; }

/* No-JS and reduced-motion: show everything immediately, no animation. */
.no-js .stage,
.no-js .hero__vignette { opacity: 1; transform: none; }
.no-js .site-header.is-hidden .brand,
.no-js .site-header.is-hidden .nav,
.no-js .site-header.is-hidden .nav-toggle { opacity: 1; transform: none; }
.no-js .skip-intro { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__media,
  .hero.is-playing .hero__hairline,
  .hero.is-playing .skip-intro { animation: none !important; }
  .hero__media { transform: none !important; }
  .hero__hairline { width: 100%; opacity: .85; }
  .stage { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__vignette { opacity: 1 !important; transition: none !important; }
  .skip-intro { display: none; }
}

/* ==========================================================================
   Compliance Clock — the signature element
   ========================================================================== */
.clock { border-top: 1px solid var(--ink-line); }
.clock__head {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 3.25rem;
}
.clock__toggle { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--ink-line); }
.clock__toggle button {
  background: transparent; border: 0; border-right: 1px solid var(--ink-line);
  color: var(--ink-text); font-family: var(--display); font-weight: 600;
  font-size: .8125rem; letter-spacing: .03em; text-transform: uppercase;
  padding: .7rem 1.05rem;
  cursor: pointer; transition: color .16s ease, background .16s ease;
}
.clock__toggle button:last-child { border-right: 0; }
.clock__toggle button:hover { color: var(--ink-head); }
.clock__toggle button[aria-pressed="true"] { background: var(--ink-head); color: var(--ink); }

.clock__track {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  border-top: 1px solid var(--gold-rule);
}
.milestone {
  padding: 2rem 1.5rem 2.25rem 0;
  border-right: 1px solid var(--ink-line);
  position: relative;
  padding-left: 1.5rem;
}
.milestone:first-child { padding-left: 0; }
.milestone:last-child { border-right: 0; }
.milestone::before {
  content: ""; position: absolute; top: -5px; left: 1.5rem;
  width: 9px; height: 9px; background: var(--gold-rule); border-radius: 50%;
}
.milestone:first-child::before { left: 0; }
.milestone__year {
  font-family: var(--mono); font-size: 1.75rem; font-weight: 500;
  color: var(--gold-bright); letter-spacing: -0.01em; display: block;
  margin-bottom: .5rem;
}
.milestone__ref {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cryo); display: block; margin-bottom: .75rem;
}
.milestone__what { font-size: .9375rem; color: var(--ink-text); margin-bottom: 1rem; }
.milestone__left {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  color: var(--ink-muted); border-top: 1px solid var(--ink-line);
  padding-top: .75rem; display: block;
}
.milestone__left strong { color: var(--ink-head); font-weight: 500; }
.milestone--past .milestone__year { color: var(--signal-dk); }
.milestone--past .milestone__left strong { color: var(--signal-dk); }
.sect--cryo .milestone--past .milestone__year, .cta-band .milestone--past .milestone__year { color: var(--signal-lt); }
.milestone__src {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); text-decoration: none;
  border-bottom: 1px solid var(--ink-line); display: inline-block; margin-top: .85rem;
}
.milestone__src:hover { color: var(--gold-bright); border-bottom-color: var(--gold); }

.clock__note {
  margin-top: 3rem; font-family: var(--display); font-weight: 600; font-size: clamp(1.125rem, 2vw, 1.4rem); letter-spacing: -0.02em;
  color: var(--ink-head); max-width: 44ch; line-height: 1.4;
}

/* ==========================================================================
   Cards & grids
   ========================================================================== */
.grid { display: grid; gap: 1.5rem; }
/* 420px min keeps this at exactly two columns on desktop (3x420 > wrap width),
   so four-item groups pair evenly instead of orphaning a card on a third row. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
@media (max-width: 520px) { .grid--2 { grid-template-columns: 1fr; } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }

/* Document-style card, used in paper sections */
.doc {
  background: #FFFDF8;
  border: 1px solid var(--paper-line);
  border-top: 2px solid var(--gold-rule);
  padding: 2rem 1.75rem 2.25rem;
  display: flex; flex-direction: column;
}
.doc__title {
  font-family: var(--display); font-weight: 600; font-size: 1.375rem; line-height: 1.2;
  color: var(--paper-ink); margin-bottom: .9rem; letter-spacing: -0.015em;
}
.doc__body { font-size: .9375rem; color: var(--paper-muted); margin-bottom: 1.5rem; }
.doc__label {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper-ink);
  border-top: 1px solid var(--paper-line); padding-top: 1rem;
  margin-bottom: .85rem; display: block;
}
.doc__list { font-size: .875rem; color: var(--paper-muted); margin-top: auto; }
.doc__list li { padding-left: 1.1rem; position: relative; margin-bottom: .55rem; }
.doc__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; background: var(--gold);
}
.doc__meta {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--paper-muted);
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--paper-line);
}

/* Panel on dark, for the three pillars */
.panel {
  background: var(--ink);
  border: 1px solid var(--ink-line);
  border-left: 2px solid var(--cryo);
  padding: 2rem 1.75rem;
}
.panel__title {
  font-family: var(--display); font-weight: 600; font-size: 1.375rem; color: var(--ink-head);
  margin-bottom: .9rem; letter-spacing: -0.015em; line-height: 1.2;
}
.panel__body { font-size: .9375rem; color: var(--ink-text); }
.panel__body:last-child { margin-bottom: 0; }
.panel__note {
  font-size: .875rem; color: var(--ink-muted);
  border-top: 1px solid var(--ink-line); padding-top: 1rem; margin-top: 1.25rem;
}

/* Status pills */
.pill {
  display: inline-block; font-family: var(--mono); font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .7rem; border: 1px solid currentColor; margin-bottom: 1.25rem;
}
.pill--dev { color: var(--gold); }
.sect--cryo .pill--dev, .cta-band .pill--dev { color: var(--gold-bright); }
.pill--verify { color: var(--verify); }
.pill--cryo { color: var(--cryo); }
.pill--signal { color: var(--signal-dk); }
.sect--cryo .pill--signal, .cta-band .pill--signal { color: var(--signal-lt); }
.pill--verify { color: var(--verify-dk); }
.sect--cryo .pill--verify, .cta-band .pill--verify { color: var(--verify); }
.pill--cryo { color: var(--cryo); }

/* ==========================================================================
   "What we will not promise"
   ========================================================================== */
.sect--cryo .h-display { color: #F4F6F7; }
.sect--cryo .eyebrow { color: var(--cryo-lt); }
.cta-band .eyebrow { color: var(--gold); }
.wont { border-top: 1px solid rgba(255,255,255,.16); margin-top: 3rem; }
.wont li {
  display: grid; grid-template-columns: 2rem 1fr; gap: 1.25rem;
  padding: 1.75rem 0; border-bottom: 1px solid rgba(255,255,255,.16);
  color: #DCE8EE; font-size: 1rem;
}
.wont__x {
  font-family: var(--mono); font-size: 1.25rem; line-height: 1;
  color: var(--gold-bright); font-weight: 500;
}
.wont strong { color: #fff; font-weight: 500; }
.wont a { color: var(--cryo-lt); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Publications
   ========================================================================== */
.pub {
  border-top: 1px solid var(--paper-line);
  padding: 2rem 0;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem 2.5rem;
}
.pub:last-child { border-bottom: 1px solid var(--paper-line); }
.pub__cat {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper-muted); display: block; margin-bottom: .75rem;
}
.pub__title {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.3;
  color: var(--paper-ink); margin-bottom: .6rem; letter-spacing: -0.01em;
}
.pub__venue { font-family: var(--mono); font-size: .8125rem; color: var(--paper-muted); }
.pub__why { font-size: .9375rem; color: var(--paper-muted); }
.pub__why strong {
  display: block; font-family: var(--mono); font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink);
  margin-bottom: .5rem; font-weight: 500;
}
.doi {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--verify-dk) !important;
  text-decoration: none; border: 1px solid currentColor;
  padding: .4rem .7rem; margin-top: 1rem;
}
.doi:hover { background: var(--verify-dk); color: var(--paper-warm) !important; }
.doi--todo { color: var(--signal-dk) !important; }
.doi--todo:hover { background: transparent; color: var(--signal-dk) !important; }

@media (max-width: 720px) { .pub { grid-template-columns: 1fr; } }

/* ==========================================================================
   Mandate table
   ========================================================================== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 2.5rem; }
table.mandates { width: 100%; border-collapse: collapse; min-width: 720px; }
table.mandates caption {
  text-align: left; font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
  padding-bottom: 1rem;
}
table.mandates th, table.mandates td {
  text-align: left; padding: 1.1rem 1.25rem 1.1rem 0;
  border-bottom: 1px solid var(--ink-line); vertical-align: top;
  font-size: .9375rem;
}
table.mandates th {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); font-weight: 400;
  border-bottom-color: var(--gold);
}
table.mandates td.date { font-family: var(--mono); color: var(--ink-head); white-space: nowrap; }
table.mandates a { color: var(--cryo); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Numbered ladder (the six offers) — order carries real information here
   ========================================================================== */
.ladder { counter-reset: step; margin-top: 3rem; }
.ladder__item {
  counter-increment: step;
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.5rem 2rem;
  padding: 2.5rem 0; border-top: 1px solid var(--ink-line);
}
.ladder__item:last-child { border-bottom: 1px solid var(--ink-line); }
.ladder__num {
  font-family: var(--mono); font-size: 1.5rem; color: var(--gold);
  line-height: 1;
}
.ladder__num::before { content: "0" counter(step); }
.ladder__title {
  font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: var(--ink-head);
  margin-bottom: .85rem; letter-spacing: -0.015em;
}
.ladder__body { max-width: 62ch; }
.ladder__out {
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--ink-line);
  font-size: .9375rem;
}
.ladder__out strong {
  display: block; font-family: var(--mono); font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cryo);
  font-weight: 400; margin-bottom: .6rem;
}
.ladder__out li { padding-left: 1.1rem; position: relative; margin-bottom: .5rem; color: var(--ink-text); }
.ladder__out li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; background: var(--cryo);
}
.ladder__for {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  color: var(--ink-muted); margin-top: 1.25rem;
}

@media (max-width: 640px) {
  .ladder__item { grid-template-columns: 1fr; gap: .75rem; }
  .ladder__num { font-size: 1.125rem; }
}

/* ==========================================================================
   Team
   ========================================================================== */
.person { border-top: 1px solid var(--ink-line); padding-top: 1.75rem; }
.person__name {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--ink-head);
  letter-spacing: -0.01em; margin-bottom: .3rem;
}
.person__role {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; display: block;
}
.person__body { font-size: .9375rem; color: var(--ink-text); }
.person__link {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cryo); text-decoration: none;
  border-bottom: 1px solid rgba(111,166,190,.35);
}
.person__link:hover { color: #a8cede; }

/* Entity block */
.entity {
  border: 1px solid var(--ink-line); border-left: 2px solid var(--gold);
  padding: 2rem 1.75rem; font-size: .9375rem;
}
.entity dl { margin: 0; display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: .85rem 2rem; }
.entity dt {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-muted); padding-top: .2em;
}
.entity dd { margin: 0; color: var(--ink-text); }
.entity dd .mono { color: var(--ink-head); }
@media (max-width: 620px) { .entity dl { grid-template-columns: 1fr; gap: .3rem 0; } .entity dt { margin-top: .9rem; } }

.todo {
  font-family: var(--mono); font-size: .75rem;
  color: var(--signal-dk); border: 1px dashed var(--signal-dk);
  padding: .2rem .5rem; display: inline-block;
}
.sect--paper .todo, .sect--paper2 .todo {
  color: var(--signal-dk); border-color: var(--signal-dk);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: 1.5rem; max-width: 640px; }
.field { display: grid; gap: .5rem; }
.field label {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted);
}
.field .req { color: var(--gold); }
.field input, .field select, .field textarea {
  background: var(--ink); color: var(--ink-head);
  border: 1px solid var(--ink-line); padding: .95rem 1rem;
  font-family: var(--body); font-size: 1rem; width: 100%;
  border-radius: 0; appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 3rem;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 620px) { .field--row { grid-template-columns: 1fr; } }

.form__note { font-size: .875rem; color: var(--ink-muted); max-width: 60ch; }
.form__note a { color: var(--cryo); }
.form__status {
  font-family: var(--mono); font-size: .8125rem; padding: 1rem 1.25rem;
  border-left: 2px solid var(--verify); background: var(--ink-raised);
}
.form__status[hidden] { display: none; }

/* ==========================================================================
   CTA band + footer
   ========================================================================== */
.cta-band { border-top: 1px solid var(--gold); }
.cta-band .h-display { color: var(--ink-head); }
.cta-band__reply {
  font-family: var(--display); font-weight: 600; font-size: .9375rem;
  letter-spacing: .01em; color: var(--ink-text);
}

.site-footer {
  background: var(--ink); border-top: 1px solid var(--ink-line);
  padding-block: 4rem 2.5rem; font-size: .875rem;
}
.site-footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  padding-bottom: 3rem;
}
.site-footer__grid > * { min-width: 0; }
@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
@media (max-width: 420px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}
.site-footer h2 {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem;
}
.site-footer a { color: var(--ink-text); text-decoration: none; }
.site-footer a:hover { color: var(--gold-bright); }
.site-footer li { margin-bottom: .7rem; }
.site-footer__legal {
  border-top: 1px solid var(--ink-line); padding-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
  color: var(--ink-muted);
}
.site-footer__legal p { margin: 0; }

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.page-hero { padding-top: clamp(9rem, 16vh, 12rem); padding-bottom: var(--sect-y); }
.page-hero .h1 {
  font-family: var(--display); font-weight: 700; color: var(--ink-head);
  font-size: clamp(2.5rem, 5.5vw, 4.25rem); line-height: 1.04;
  letter-spacing: -0.038em; margin-bottom: 1.75rem; max-width: 24ch;
  text-wrap: balance;
}
.page-hero .lede { color: var(--ink-text); }

/* Utility spacing */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.stack > * + * { margin-top: 1.5rem; }
.center-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

/* Print */
@media print {
  .site-header, .hero__media, .hero__vignette, .skip-intro, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   Illustrations
   Bespoke inline SVG. No stock imagery: exact palette match, ~1KB each,
   sharp at any pixel density, and no third-party licensing exposure.
   ========================================================================== */
.ill {
  width: 100%; max-width: 250px; height: auto; display: block;
  overflow: visible;
}
.ill-frame {
  background: rgba(138,95,17,.05);
  border: 1px solid var(--ink-line);
  padding: 1.25rem 1rem;
  margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  min-height: 128px;
}
.sect--cryo .ill-frame, .cta-band .ill-frame {
  background: rgba(201,151,63,.05); border-color: var(--ink-line);
}
/* On light surfaces the cryo blue needs to darken to hold contrast */
/* Illustration tokens are set globally and flipped inside dark bands. */

/* Ladder: illustration replaces the bare numeral, numeral demoted to a label */
.ladder__item { grid-template-columns: 190px 1fr; }
.ladder__num {
  display: flex; flex-direction: column; align-items: flex-start; gap: .75rem;
  font-size: 1rem;
}
.ladder__num .ill { max-width: 150px; }
.ladder__num .ill-frame {
  margin-bottom: 0; padding: .9rem .75rem; min-height: 104px; width: 100%;
}
.ladder__num::before { content: none; }
.ladder__step {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .14em;
  color: var(--gold); text-transform: uppercase;
}
@media (max-width: 640px) {
  .ladder__item { grid-template-columns: 1fr; }
  .ladder__num { flex-direction: row; align-items: center; gap: 1rem; }
  .ladder__num .ill { max-width: 130px; }
  .ladder__num .ill-frame { min-height: 0; padding: .6rem; }
}


/* ==========================================================================
   Consent banner
   Analytics is opt-in: nothing loads until the visitor chooses. The banner is
   a real dialog -- focusable, escapable, and reopenable from the footer.
   ========================================================================== */
.consent {
  position: fixed; z-index: 300; left: 0; right: 0; bottom: 0;
  background: rgba(10,12,15,.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--gold);
  padding: 1.5rem var(--gut);
  animation: consentIn .38s cubic-bezier(.2,0,.2,1);
}
@keyframes consentIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
.consent__inner {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; gap: 1.5rem 2.5rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.consent__h {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--ink-head); margin: 0 0 .4rem;
}
.consent__b {
  margin: 0; font-size: .9375rem; color: var(--ink-text); max-width: 62ch;
}
.consent__b a { color: var(--cryo); text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.consent__actions .btn { padding: .85rem 1.5rem; }
@media (max-width: 640px) {
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1; justify-content: center; }
}


/* ==========================================================================
   Form consent controls
   Everything a person needs to give informed consent, at the point of
   collection rather than buried in a linked notice.
   ========================================================================== */
.opt {
  font-family: var(--body); font-size: .6875rem; letter-spacing: 0;
  text-transform: none; color: var(--ink-muted); font-style: italic;
}
.consent-box {
  border: 1px solid var(--ink-line); border-left: 2px solid var(--cryo);
  background: var(--ink-raised); padding: 1.5rem 1.5rem 1.25rem;
}
.consent-note {
  border-top: 1px solid var(--ink-line); padding-top: 1.5rem;
}
.consent-note > p {
  font-size: .875rem; color: var(--ink-muted); line-height: 1.65; margin-bottom: 1.25rem;
}
.consent-note a { color: var(--cryo); text-decoration: underline; text-underline-offset: 3px; }
.consent-note .optin { border-top: 0; padding-top: 0; }
.consent-box__h {
  font-family: var(--display); font-weight: 700; font-size: .9375rem;
  color: var(--ink-head); margin: 0 0 1rem;
}
.consent-box__list { margin: 0 0 1.5rem; font-size: .875rem; color: var(--ink-text); }
.consent-box__list li {
  padding-left: 1.1rem; position: relative; margin-bottom: .8rem; line-height: 1.6;
}
.consent-box__list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 5px; height: 5px; background: var(--cryo);
}
.consent-box__list li:last-child { margin-bottom: 0; }
.consent-box__list strong { color: var(--ink-head); font-weight: 600; }
.consent-box__list a { color: var(--cryo); text-decoration: underline; text-underline-offset: 3px; }

.optin {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem;
  align-items: start; border-top: 1px solid var(--ink-line); padding-top: 1.25rem;
}
.optin input[type="checkbox"] {
  width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--gold);
  flex: none; cursor: pointer;
}
.optin label { cursor: pointer; font-family: var(--body); letter-spacing: 0; text-transform: none; }
.optin__t {
  display: block; font-size: .875rem; color: var(--ink-head); font-weight: 500; margin-bottom: .25rem;
}
.optin__s { display: block; font-size: .8125rem; color: var(--ink-muted); line-height: 1.55; }

/* Panels and entity blocks sit on dark surfaces inside the dark bands */
.sect--cryo .panel, .cta-band .panel, .sect--cryo .entity, .cta-band .entity { background: var(--ink-raised); }
.pub__title, .doc__title, .panel__title, .person__name, .ladder__title { color: var(--ink-head); }
.pub__why, .doc__body, .panel__body { color: var(--ink-text); }
.pub__cat, .pub__venue, .doc__list, .doc__meta { color: var(--ink-muted); }

/* Layered consent: preference panel */
.consent__inner { flex-wrap: wrap; }
.consent__copy { flex: 1 1 380px; }
.consent__actions { flex-wrap: wrap; }
.consent__actions .btn { padding: .8rem 1.15rem; font-size: .75rem; }
.consent__panel {
  flex: 1 1 100%; border-top: 1px solid var(--ink-line);
  margin-top: 1.25rem; padding-top: 1.25rem;
}
.consent__panel[hidden] { display: none; }
.consent__cat {
  display: flex; gap: 1.5rem; align-items: flex-start; justify-content: space-between;
  padding: .9rem 0; border-bottom: 1px solid var(--ink-line);
}
.consent__cn {
  font-family: var(--display); font-weight: 600; font-size: .875rem;
  color: var(--ink-head); margin: 0 0 .25rem;
}
.consent__cn label { cursor: pointer; }
.consent__cd { margin: 0; font-size: .8125rem; color: var(--ink-muted); max-width: 68ch; }
.consent__always {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; padding-top: .2rem;
}
.consent__toggle input { width: 20px; height: 20px; accent-color: var(--gold-bright); cursor: pointer; }
.consent__panel .btn { margin-top: 1.25rem; }
@media (max-width: 640px) { .consent__cat { flex-direction: column; gap: .6rem; } }


/* ==========================================================================
   Proof band — the "we publish our work" counters
   ========================================================================== */
.proof-band {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  margin-bottom: 2rem;
}
.proof-band > div {
  background: #FFFDF8; padding: 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.sect--cryo .proof-band > div, .cta-band .proof-band > div { background: var(--ink-raised); }
.proof-band__n {
  font-family: var(--display); font-weight: 700; font-size: 2.5rem;
  line-height: 1; color: var(--ink-head); letter-spacing: -0.03em;
}
.proof-band__v {
  font-family: var(--mono); font-size: .9375rem; color: var(--ink-head);
  line-height: 1.35; padding-top: .3rem;
}
.proof-band__l {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted);
}