/* ==========================================================================
   DRYDOCK PARTNERS — design system v2 "The Dock"
   Brand guidelines v1.0 (Aug 2026): Paper · Ink · Acid Yellow · Electric Blue.
   One typeface: Archivo (variable, width axis used for display type).
   Voice: verdict first. Full stops in headlines. Evidence over decoration.
   ========================================================================== */

/* ==========================================================================
   Fonts — Archivo variable (SIL Open Font License), self-hosted (audit A5)
   ========================================================================== */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 75% 125%; font-display: swap; src: url("../fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 75% 125%; font-display: swap; src: url("../fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   TOKENS — three tiers. Primitives carry brand names; components reference the
   alias tier (surface / text / rule / signal / link / negative / fund); themes
   override aliases only. Type steps are the only permitted font sizes.
   ========================================================================== */
:root {
  /* primitives · colour (brand v1.0 + red v1.1) */
  --paper: #ECEDE0; --paper-2: #E2E3D4; --paper-3: #D8D9C8;
  --ink: #0A0A0A; --ink-2: #16160F; --ink-soft: #3A3A32;
  --sage: #B9BCAB; --sage-deep: #63635A;
  --yellow: #F2F87D; --blue: #1B4BFF; --orange: #F4611A; --orange-text: #A63C09;   /* negatives in small text: 4.9:1 on paper-2 */
  --red: #E8361F; --red-deep: #BD230F; --red-ink: #78190C;   /* v1.4: aligned with Lidion Bank's red-orange */
  --white: #FFFFFF;                       /* only inside the Fund header */
  /* primitives · alpha */
  --rule: rgba(10, 10, 10, 0.16); --rule-strong: rgba(10, 10, 10, 0.32);
  --rule-ink: rgba(236, 237, 224, 0.22); --rule-ink-strong: rgba(236, 237, 224, 0.42); --rule-red: rgba(236, 237, 224, 0.3);
  --paper-a84: rgba(236, 237, 224, 0.84); --paper-a72: rgba(236, 237, 224, 0.72); --paper-a30: rgba(236, 237, 224, 0.3);
  --paper-a12: rgba(236, 237, 224, 0.12); --paper-a08: rgba(236, 237, 224, 0.08); --ink-a16: rgba(0, 0, 0, 0.16);
  --focus-ring: rgba(27, 75, 255, 0.18); --focus-ring-on-ink: rgba(242, 248, 125, 0.22);

  /* aliases · semantic (themes override here) */
  --color-surface: var(--paper); --color-surface-2: var(--paper-2); --color-surface-3: var(--paper-3);
  --color-surface-ink: var(--ink); --color-surface-ink-2: var(--ink-2);
  --color-text: var(--ink); --color-text-soft: var(--ink-soft); --color-text-muted: var(--sage-deep);
  --color-text-on-ink: var(--paper); --color-text-on-ink-muted: var(--sage);
  --color-rule: var(--rule); --color-rule-strong: var(--rule-strong); --color-rule-on-ink: var(--rule-ink); --color-rule-on-ink-strong: var(--rule-ink-strong);
  --color-signal: var(--yellow); --color-link: var(--blue); --color-focus: var(--blue); --color-negative: var(--orange); --color-negative-text: var(--orange-text);
  --color-fund: var(--red-deep); --color-fund-accent: var(--red); --color-fund-deep: var(--red-ink);

  /* type · one family, one scale */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display-1: clamp(3rem, 8.2vw, 7.2rem);
  --display-2: clamp(2.25rem, 4.8vw, 4.1rem);
  --display-3: clamp(1.6rem, 2.6vw, 2.25rem);
  --fs-title: clamp(1.3rem, 1.75vw, 1.6rem);          /* h3, card and pillar titles */
  --fs-lead: clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-xl: 1.25rem; --fs-lg: 1.1875rem; --fs-md: 1.0625rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-2xs: 0.75rem;

  /* space (8px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
  --section: clamp(5rem, 10vw, 8.5rem);
  --block: clamp(2.5rem, 5vw, 4rem);
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 12px; --radius-lg: 18px; --radius-pill: 999px;

  /* motion */
  --dur-base: 260ms; --dur-slow: 480ms; --dur-deliberate: 720ms;
  --ease-base: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* alphas and light for forms and the Fund cover glass (v1.4) */
  --negative-ring: rgba(244, 97, 26, 0.18); --ink-a90: rgba(10, 10, 10, 0.9); --fund-glow: #FF6A45; --fund-rim: #A93B53; --fund-halo: rgba(232, 54, 31, 0.22); --glass-hi: rgba(255, 255, 255, 0.20); --glass-mid: rgba(255, 255, 255, 0.13); --glass-lo: rgba(255, 255, 255, 0.03); --glass-edge: rgba(255, 255, 255, 0.38); --glass-edge-soft: rgba(255, 255, 255, 0.17);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    :root { --dur-base: 1ms; --dur-slow: 1ms; --dur-deliberate: 1ms; }
}
html.qa { --dur-base: 1ms; --dur-slow: 1ms; --dur-deliberate: 1ms; } /* QA renders stay deterministic */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.band--ink :focus-visible { outline-color: var(--yellow); }

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 300;
  background: var(--ink); color: var(--paper); padding: 0.8em 1.2em; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }

.display-1 {
  font-size: var(--display-1);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-stretch: 96%;
}
.display-2 { font-size: var(--display-2); font-weight: 900; line-height: 0.98; letter-spacing: -0.04em; }
.display-3 { font-size: var(--display-3); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-size: var(--fs-title); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -0.012em;
  max-width: 34em;
}
.prose { max-width: 40em; }
.prose p + p { margin-top: 1.15em; }
.prose h2 { font-size: var(--fs-title); margin: 2.2em 0 0.7em; }
.prose h3 { font-size: var(--fs-xl); margin: 1.8em 0 0.5em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.35em; }
.muted { color: var(--color-text-muted); }
.band--ink .muted { color: var(--sage); }
.small { font-size: var(--fs-sm); }

/* kicker — `NN · SECTION` with a rule */
.kicker {
  display: flex; align-items: center; gap: 0.85em;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-link);
  margin-bottom: 1.5rem;
}
.kicker::before { content: ""; width: 2.25rem; height: 2px; background: currentColor; flex: none; }
.band--ink .kicker { color: var(--paper); }
.band--yellow .kicker { color: var(--ink); }

.label {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.caption {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.band--ink .caption { color: var(--sage); }

/* highlight bar behind key words */
.hl {
  background: var(--color-signal);
  color: var(--ink);                                   /* yellow + ink in both themes */
  padding: 0.04em 0.22em;
  margin: 0 -0.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 3px;
}
.band--yellow .hl { background: var(--ink); color: var(--paper); }

/* tag pill */
.pill {
  display: inline-flex; align-items: center; gap: 0.6em;
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.5em 0.95em; border-radius: var(--radius-pill);
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); display: inline-block; }
.band--ink .pill { background: var(--paper); color: var(--ink); }

/* evidence grade */
.grade {
  display: inline-block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.08em;
  border: 1px solid currentColor; border-radius: 3px; padding: 0.05em 0.4em; vertical-align: middle;
 color: var(--color-text-muted); }
.band--ink .grade { color: var(--color-text-on-ink-muted); }

.x { color: var(--color-link); font-weight: 800; }  /* the × device */
.band--ink .x { color: var(--yellow); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }

.band { position: relative; padding-block: var(--section); }
.band--tight { padding-block: var(--block); }
.band--paper2 { background: var(--color-surface-2); }
.band--ink { background: var(--color-surface-ink); color: var(--color-text-on-ink); }
.band--yellow { background: var(--yellow); color: var(--ink); }
.band--ink + .band--ink { padding-top: 0; }
.band--ink + .band--ink.band--divided { padding-top: var(--section); border-top: 1px solid var(--color-rule-on-ink); } /* Method 07: a separate section, not a merged band */

.grid { display: grid; gap: clamp(1.25rem, 2.6vw, 2.25rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: 5fr 7fr; align-items: start; }
.grid--split-rev { grid-template-columns: 7fr 5fr; align-items: start; }
.grid--sticky > :first-child { position: sticky; top: 7rem; }
@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--split, .grid--split-rev { grid-template-columns: 1fr; }
  .grid--sticky > :first-child { position: static; }
}
@media (max-width: 720px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.sect-head { margin-bottom: var(--block); max-width: 62rem; }
.sect-head .lead { margin-top: 1.4rem; }

.divider { height: 1px; background: var(--color-rule); border: 0; }
.band--ink .divider { background: var(--color-rule-on-ink); }

/* crop marks — two thin L corners (top-left, bottom-right) */
.crop { position: relative; }
.crop::before, .crop::after {
  content: ""; position: absolute; width: 22px; height: 22px; opacity: 0.55; pointer-events: none;
  border-color: currentColor; border-style: solid; border-width: 0;
}
.crop::before { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.crop::after { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.crop--paper::before, .crop--paper::after { border-color: var(--paper); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: -0.005em;
  padding: 0.95em 1.55em; border-radius: var(--radius-pill);
  text-decoration: none; white-space: nowrap; position: relative;
  transition: background-color var(--dur-base) var(--ease-base), color var(--dur-base) var(--ease-base),
              border-color var(--dur-base) var(--ease-base), transform var(--dur-slow) var(--ease-out);
}
.btn .btn-arrow { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--dur-slow) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(0.3em); }
.btn:active { transform: scale(0.985); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--yellow); color: var(--ink); }
.btn--secondary { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }
.btn--lg { font-size: var(--fs-md); padding: 1.1em 1.9em; }
.btn--sm { font-size: var(--fs-xs); padding: 0.7em 1.2em; }

.band--ink .btn--primary { background: var(--yellow); color: var(--ink); }
.band--ink .btn--primary:hover { background: var(--paper); }
.band--ink .btn--secondary { border-color: var(--paper); color: var(--paper); }
.band--ink .btn--secondary:hover { background: var(--paper); color: var(--ink); }
.band--yellow .btn--primary { background: var(--ink); color: var(--paper); }
.band--yellow .btn--primary:hover { background: var(--paper); color: var(--ink); }
.band--yellow .btn--secondary:hover { background: var(--ink); color: var(--paper); }

.link {
  font-weight: 700; text-decoration: none; color: var(--color-text);
  border-bottom: 1.5px solid var(--ink); padding-bottom: 0.1em;
  transition: color var(--dur-base), border-color var(--dur-base);
}
.link:hover { color: var(--color-link); border-color: var(--color-link); }
.band--ink .link { color: var(--paper); border-color: var(--paper); }
.band--ink .link:hover { color: var(--yellow); border-color: var(--yellow); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5em; }
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--dur-slow) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(0.25em); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: transform var(--dur-slow) var(--ease-out), background-color var(--dur-base), box-shadow var(--dur-base);
}
.site-header.is-scrolled {
  background: var(--paper-a84);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 var(--color-rule);
}
.site-header.is-hidden { transform: translateY(-100%); }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  height: 78px; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 26px; width: auto; }
.brand .brand-mark { display: none; }
@media (max-width: 480px) {
  .brand img { display: none; }
  .brand .brand-mark { display: block; width: 30px; height: 30px; }
}
.nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); list-style: none; }
.nav-links a:not(.btn) {
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--color-text-soft);
  padding: 0.35em 0; position: relative; transition: color var(--dur-base);
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  background: var(--color-link); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.nav-links a:not(.btn):hover, .nav-links a.is-active { color: var(--color-text); }
.nav-links a:not(.btn):hover::after, .nav-links a.is-active::after { transform: scaleX(1); }
.nav-links .btn { padding: 0.7em 1.25em; font-size: var(--fs-sm); }
.nav-toggle { display: none; }

@media (max-width: 960px) {
  .nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; z-index: 120;
    border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper);
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; display: block; width: 18px; height: 2px; background: var(--ink); position: relative;
    transition: transform var(--dur-slow) var(--ease-out), background-color var(--dur-base);
  }
  .nav-toggle span::before { position: absolute; top: -6px; }
  .nav-toggle span::after { position: absolute; top: 6px; }
  body.is-nav-open .nav-toggle span { background: transparent; }
  body.is-nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
  body.is-nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
  .nav-links {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 1.5rem;
    background: var(--ink); color: var(--paper);
    transform: translateY(-100%); opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow), visibility 0s var(--dur-slow);
  }
  body.is-nav-open .nav-links { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow), visibility 0s; }
  /* The overlay is a fixed-position child of the header. A header with backdrop-filter (scrolled) or a transform
     (hidden) becomes its containing block and shrinks the menu to the header bar. While the menu is open or closing,
     the header carries neither. */
  body.is-nav-open .site-header, body.is-nav-closing .site-header {
    -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; background: transparent; box-shadow: none;
  }
  .nav-links a:not(.btn) { font-size: var(--display-3); font-weight: 800; letter-spacing: -0.02em; color: var(--paper); }
  .nav-links a:not(.btn):hover, .nav-links a.is-active { color: var(--yellow); }
  .nav-links a:not(.btn)::after { background: var(--yellow); }
  .nav-links .btn { background: var(--yellow); color: var(--ink); font-size: var(--fs-md); padding: 1em 1.6em; margin-top: 0.5rem; }
  body.is-nav-open { overflow: hidden; }
  body.is-nav-open .nav-toggle { background: var(--paper); }
}

/* --------------------------------------------------------------------------
   Hero (home) — editorial: type on paper, framed film beneath
   -------------------------------------------------------------------------- */
.hero { padding-top: clamp(8rem, 16vh, 11rem); padding-bottom: 0; }
.hero .display-1 { max-width: 14ch; }
.hero-row {
  display: grid; grid-template-columns: 7fr 5fr; gap: 2rem; align-items: end;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.hero-row .lead { margin: 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; }
@media (max-width: 960px) {
  .hero-row { grid-template-columns: 1fr; align-items: start; }
  .hero-ctas { justify-content: flex-start; }
}

/* framed image / film */
.frame {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--paper-2); isolation: isolate;
}
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.frame picture { display: block; width: 100%; height: 100%; }
/* living imagery: the film sits beneath its still at full opacity and the still fades out once the film reports
   "playing" (dock.js adds .is-playing to the frame). The film is never started invisible: a film at opacity 0 is not
   reliably started by every engine. */
.frame-film { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.frame picture { position: relative; z-index: 1; transition: opacity var(--dur-slow) var(--ease-base); }
.frame.is-playing picture { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .frame-film { display: none; } .frame.is-playing picture { opacity: 1; } }
@media print { .frame picture { opacity: 1 !important; } }
.frame--21x9 { aspect-ratio: 21 / 9; }

.frame--3x2 { aspect-ratio: 3 / 2; }
@media (max-width: 720px) { .frame--21x9 { aspect-ratio: 16 / 10; } }

.frame .crop-mark { position: absolute; z-index: 3; width: 22px; height: 22px; border: 0 solid var(--paper); opacity: 0.85; pointer-events: none; }
.frame .crop-mark.tl { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; }
.frame .crop-mark.br { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.hero-frame { margin-top: clamp(2rem, 4vw, 3.5rem); }
.hero-frame .frame { aspect-ratio: 21 / 9; }
@media (max-width: 720px) { .hero-frame .frame { aspect-ratio: 4 / 5; } }

/* the dock monogram drawn over the film */
.dock-svg {
  position: absolute; z-index: 2; pointer-events: none;
  right: 5%; top: 8%; height: 84%; width: auto; aspect-ratio: 1 / 1;
  color: var(--paper);
}
.dock-svg path, .dock-svg line { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dock-svg .draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.is-inview .dock-svg .draw, .hero .dock-svg.is-drawn .draw { animation: dock-draw var(--dur-deliberate) var(--ease-out) forwards; animation-delay: var(--d, 0s); animation-duration: 1.4s; }
.dock-svg .hull { transform-box: fill-box; transform-origin: 50% 0; }
.dock-svg .water { stroke-dasharray: 6 8; opacity: 0.7; }
.dock-svg .yellow { color: var(--yellow); }
@keyframes dock-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .dock-svg .draw { stroke-dashoffset: 0; animation: none; } }

/* hero meta strip beneath the frame */
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: center;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--color-rule);
}
.hero-meta .label { color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   Page head (sub-pages)
   -------------------------------------------------------------------------- */
.page-head { padding-top: clamp(8rem, 16vh, 11rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-head .display-1 { max-width: 13ch; }
.page-head .lead { margin-top: 1.6rem; }

.page-head-row { display: grid; grid-template-columns: 7fr 5fr; gap: 2rem; align-items: end; margin-top: 1.5rem; }
@media (max-width: 960px) { .page-head-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface-2); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  position: relative;
  transition: transform var(--dur-slow) var(--ease-out), background-color var(--dur-base);
}
a.card:hover { transform: translateY(-4px); background: var(--paper-3); }
.card h3 { font-size: var(--fs-title); margin: 0.5rem 0 0.7rem; letter-spacing: -0.025em; }
.card p { font-size: var(--fs-sm); color: var(--color-text-soft); }
.card-index { display: block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-link); margin-bottom: 1.2rem; }
.band--ink .card { background: transparent; border: 1.5px solid var(--color-rule-on-ink-strong); }
.band--ink a.card:hover { background: var(--ink-2); border-color: var(--paper); }
.band--ink .card p { color: var(--sage); }
.band--ink .card-index { color: var(--yellow); }
.band--yellow .card { background: var(--paper); }
.band--yellow a.card:hover { background: var(--white); }
.band--yellow .card-index { color: var(--ink); }
.card--flat:hover { transform: none; }

/* --------------------------------------------------------------------------
   Stats (big-stat grid)
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; border-top: 1.5px solid var(--ink); }
.stats--4 { grid-template-columns: repeat(4, 1fr); }
.band--ink .stats { border-color: var(--paper); }
@media (max-width: 960px) { .stats, .stats--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats, .stats--4 { grid-template-columns: 1fr; } }
.stat { padding-top: 1.4rem; display: block; text-decoration: none; color: inherit; position: relative; }
.stat::before {
  content: ""; position: absolute; top: -1.5px; left: 0; width: 100%; height: 3px; background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease-out);
}
.stat.is-inview::before { transform: scaleX(1); }
.band--ink .stat::before { background: var(--yellow); }
.stat-num {
  font-weight: 900; font-size: var(--display-2); line-height: 1; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.band--ink .stat-num { color: var(--yellow); }
.stat-line { font-weight: 600; margin-top: 0.8rem; font-size: var(--fs-sm); }
.stat-src { display: block; margin-top: 0.45rem; }

/* --------------------------------------------------------------------------
   Pillars
   -------------------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 960px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  border-radius: var(--radius); padding: clamp(1.5rem, 2.6vw, 2.2rem);
  background: var(--paper-2); position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem;
}
.pillar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--lane, var(--ink)); }
.pillar--fin { --lane: var(--ink); }
.pillar--ops { --lane: var(--ink-soft); }
.pillar--own { --lane: var(--sage-deep); }
.pillar .card-index { margin-bottom: 0; }
.pillar h3 { font-size: var(--fs-title); letter-spacing: -0.03em; }
.pillar .pillar-verdict { font-weight: 600; font-size: var(--fs-md); }
.pillar-list { list-style: none; margin-top: 0.5rem; border-top: 1px solid var(--color-rule); }
.pillar-list li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--color-rule); font-size: var(--fs-sm); }
.pillar-list li b { font-weight: 800; color: var(--color-text); }
.pillar-list li span { color: var(--color-text-soft); }
.pillar-list li strong { display: block; font-weight: 700; color: var(--color-text); }

/* --------------------------------------------------------------------------
   Steps — Refit and Launch
   -------------------------------------------------------------------------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; position: relative; padding-top: 2.2rem; }
.steps::before { content: ""; position: absolute; top: 0.55rem; left: 0; right: 0; height: 1.5px; background: var(--color-rule-on-ink); }
.steps-line { position: absolute; top: 0.5rem; left: 0; height: 2.5px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out); }
.steps.is-inview .steps-line { transform: scaleX(1); }
.step { position: relative; }
.step::before {
  content: ""; position: absolute; top: -2.2rem; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--yellow); transform: translateY(-1px) scale(0); transition: transform 0.5s var(--ease-out); transition-delay: calc(var(--i, 0) * 0.28s);
}
.steps.is-inview .step::before { transform: translateY(-1px) scale(1); }
.step-num { font-weight: 900; font-size: var(--fs-2xs); letter-spacing: 0.18em; color: var(--yellow); }
.step h3 { font-size: var(--fs-xl); margin: 0.6rem 0 0.5rem; }
.step p { font-size: var(--fs-sm); color: var(--sage); }
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; padding-top: 0; padding-left: 2rem; }
  .steps::before, .steps-line { left: 0.35rem; top: 0; bottom: 0; width: 1.5px; height: auto; }
  .steps-line { width: 2.5px; transform: scaleY(0); transform-origin: top; }
  .steps.is-inview .steps-line { transform: scaleY(1); }
  .step::before { top: 0.25rem; left: -2rem; }
}

/* --------------------------------------------------------------------------
   Gantt — the six-month plan (three lanes)
   -------------------------------------------------------------------------- */
.gantt { background: var(--paper); border-radius: var(--radius); padding: clamp(1.25rem, 2.6vw, 2rem); border: 1.5px solid var(--color-rule); }
.band--ink .gantt { background: transparent; border-color: var(--color-rule-on-ink-strong); }
.gantt-head, .gantt-row { display: grid; grid-template-columns: minmax(10rem, 15rem) repeat(var(--months, 6), 1fr); gap: 0 4px; align-items: center; }
.gantt-head { padding-bottom: 0.7rem; border-bottom: 1.5px solid var(--ink); margin-bottom: 0.6rem; }
.band--ink .gantt-head { border-color: var(--paper); }
.gantt-head span { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.14em; text-align: center; }
.gantt-row { padding: 0.45rem 0; border-bottom: 1px solid var(--color-rule); }
.band--ink .gantt-row { border-color: var(--color-rule-on-ink); }
.gantt-row:last-of-type { border-bottom: 0; }
.gantt-label { font-size: var(--fs-sm); font-weight: 600; padding-right: 1rem; line-height: 1.3; }
.gantt-bar {
  grid-row: 1; height: 1.15rem; border-radius: 3px; background: var(--lane, var(--ink));
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 0.08s);
}
.gantt.is-inview .gantt-bar { transform: scaleX(1); }
.lane--fin { --lane: var(--ink); } .lane--ops { --lane: var(--ink-soft); } .lane--own { --lane: var(--sage-deep); }
.band--ink .lane--fin { --lane: var(--paper); } .band--ink .lane--ops { --lane: var(--sage); } .band--ink .lane--own { --lane: var(--sage-deep); }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; margin-top: 1.4rem; font-size: var(--fs-xs); font-weight: 700; }
.gantt-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--lane); margin-right: 0.55em; vertical-align: -1px; }
@media (max-width: 720px) {
  /* stacked plan: label above a full-width six-month track */
  .gantt { padding: 1rem 1rem 0.6rem; }
  .gantt-head, .gantt-row { grid-template-columns: 0 repeat(var(--months, 6), 1fr); grid-template-rows: auto auto; row-gap: 0.4rem; }
  .gantt-head { padding-bottom: 0.5rem; margin-bottom: 0.2rem; }
  .gantt-label { grid-column: 1 / -1; grid-row: 1; padding-right: 0; font-size: var(--fs-xs); }
  .gantt-bar { grid-row: 2; height: 0.8rem; }
  .gantt-row { padding: 0.65rem 0; }
}

/* --------------------------------------------------------------------------
   Flow — the four handover points
   -------------------------------------------------------------------------- */
.flow { list-style: none; counter-reset: flow; display: grid; gap: 0.75rem; }
.flow li {
  counter-increment: flow; display: grid; grid-template-columns: 3.2rem 1fr auto 1fr; gap: 1rem; align-items: center;
  padding: 1.15rem 1.35rem; border-radius: var(--radius); background: var(--color-surface-2);
}
.flow li::before { content: "0" counter(flow); font-weight: 900; font-size: var(--fs-xl); letter-spacing: -0.04em; color: var(--color-link); }
.flow li .from, .flow li .to { font-size: var(--fs-sm); }
.flow li .from b, .flow li .to b { display: block; font-weight: 800; letter-spacing: 0.08em; font-size: var(--fs-2xs); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.2rem; }
.flow li .arrow { width: 2.6rem; height: 1.2rem; color: var(--color-text); }
.flow li .arrow path { stroke: currentColor; stroke-width: 1.5; fill: none; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 0.15s); }
.flow.is-inview li .arrow path { stroke-dashoffset: 0; }
@media (max-width: 720px) {
  .flow li { grid-template-columns: 2.4rem 1fr; }
  .flow li .arrow { display: none; }
  .flow li .to { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Boundaries (five commitments) — on ink
   -------------------------------------------------------------------------- */
.bounds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; border-top: 1.5px solid var(--paper); }
@media (max-width: 960px) { .bounds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bounds { grid-template-columns: 1fr; } }
.bound { padding-top: 1.2rem; }
.bound .num { font-weight: 900; font-size: var(--display-3); letter-spacing: -0.05em; color: var(--yellow); line-height: 1; }
.bound h3 { font-size: var(--fs-xl); margin: 0.9rem 0 0.5rem; }
.bound p { font-size: var(--fs-sm); color: var(--sage); }

/* --------------------------------------------------------------------------
   Takeaway band
   -------------------------------------------------------------------------- */
.takeaway {
  background: var(--ink); color: var(--paper); border-radius: 10px;
  padding: 1.25rem 1.6rem; font-size: var(--fs-md); display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
}
.takeaway strong { color: var(--yellow); font-weight: 800; white-space: nowrap; }
.band--ink .takeaway { background: var(--paper); color: var(--ink); }
.band--ink .takeaway strong { color: var(--blue); }
.band--yellow .takeaway { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   Tables — DryDock shows its numbers
   -------------------------------------------------------------------------- */
.dd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dd-table th {
  background: var(--ink); color: var(--paper); text-align: left; padding: 0.7rem 0.9rem;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
.dd-table th:first-child { border-radius: 6px 0 0 6px; }
.dd-table th:last-child { border-radius: 0 6px 6px 0; }
.dd-table td { padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.dd-table td.num, .dd-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dd-table tr.key td { background: var(--yellow); font-weight: 800; color: var(--ink); }
.dd-table tr.key td:first-child { border-radius: 6px 0 0 6px; }
.dd-table tr.key td:last-child { border-radius: 0 6px 6px 0; }
.dd-table .neg { color: var(--color-negative-text); }
.band--ink .dd-table th { background: var(--paper); color: var(--ink); }
.band--ink .dd-table td { border-color: var(--color-rule-on-ink); }
.band--ink .dd-table tr.key td { color: var(--ink); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */
.num-list { list-style: none; counter-reset: n; }
.num-list > li { counter-increment: n; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem; padding: 1.5rem 0; border-top: 1px solid var(--color-rule); align-items: baseline; }
.band--ink .num-list > li { border-color: var(--color-rule-on-ink); }
.num-list > li::before { content: "0" counter(n); grid-column: 1; grid-row: 1; font-weight: 900; font-size: var(--fs-xl); letter-spacing: -0.03em; color: var(--color-link); }
.band--ink .num-list > li::before { color: var(--yellow); }
.num-list > li > * { grid-column: 2; }
.num-list strong, .num-list h3 { display: block; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.num-list p { font-size: var(--fs-sm); color: var(--color-text-soft); }
.band--ink .num-list p { color: var(--sage); }

.x-list, .check-list { list-style: none; }
.x-list li, .check-list li { display: flex; gap: 1rem; align-items: baseline; padding: 0.95rem 0; border-top: 1px solid var(--color-rule); font-size: var(--fs-md); }
.band--ink .x-list li, .band--ink .check-list li { border-color: var(--color-rule-on-ink); }
.x-list li::before { content: "×"; font-weight: 900; color: var(--orange); flex: none; }
.check-list li::before { content: "—"; font-weight: 900; color: var(--color-link); flex: none; }
.band--ink .check-list li::before { color: var(--yellow); }

/* --------------------------------------------------------------------------
   Charts (rendered by dock.js)
   -------------------------------------------------------------------------- */
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font); font-weight: 600; fill: var(--ink-soft); }
.band--ink .chart text { fill: var(--sage); }
.chart .v { font-weight: 800; fill: var(--ink); }
.band--ink .chart .v { fill: var(--paper); }
.chart-title { display: flex; justify-content: space-between; gap: 1rem; font-weight: 800; font-size: var(--fs-sm); letter-spacing: -0.01em; margin-bottom: 1rem; }
.chart-title span:last-child { color: var(--color-text-muted); font-weight: 600; }
.chart-src { margin-top: 0.8rem; }

/* --------------------------------------------------------------------------
   Partners
   -------------------------------------------------------------------------- */
.portrait {
  aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--ink); color: var(--paper);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.05); }

.band--ink .portrait { background: var(--paper-2); color: var(--ink); }
.partner-card h3 { font-size: var(--fs-title); margin-top: 1.4rem; letter-spacing: -0.03em; }
.partner-role { margin-top: 0.4rem; color: var(--color-link); }
.band--ink .partner-role { color: var(--yellow); }
.partner-bio { margin-top: 1rem; font-size: var(--fs-sm); color: var(--color-text-soft); }
.band--ink .partner-bio { color: var(--sage); }
.partner-facts { list-style: none; margin-top: 1.1rem; }
.partner-facts li { font-size: var(--fs-xs); font-weight: 600; padding: 0.55rem 0; border-top: 1px solid var(--color-rule); }
.band--ink .partner-facts li { border-color: var(--color-rule-on-ink); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.2rem; }
.field label { font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-soft); }
.band--ink .field label { color: var(--sage); }
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--fs-md); padding: 0.9em 1em; border-radius: 8px;
  background: var(--paper); border: 1.5px solid var(--color-rule-strong); color: var(--ink);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.band--ink .field input, .band--ink .field textarea, .band--ink .field select { background: var(--ink-2); border-color: var(--color-rule-on-ink-strong); color: var(--paper); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.band--ink .field input:focus, .band--ink .field textarea:focus, .band--ink .field select:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--focus-ring-on-ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.form-note { margin-top: 1rem; }
.form-success { border-radius: var(--radius); padding: 1.6rem; background: var(--yellow); color: var(--ink); display: none; }
.band--ink .form-success { background: var(--yellow); }
form.is-submitted { display: none; }
form.is-submitted + .form-success { display: block; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-block; padding: 0.55em 1em; border-radius: var(--radius-pill); border: 1.5px solid var(--color-rule-strong);
  font-size: var(--fs-sm); font-weight: 600; transition: background-color var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}
.band--ink .choice span { border-color: var(--color-rule-on-ink-strong); }
.choice input:checked + span { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Scheduler (fit call)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--paper); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 3rem; padding-block: 4.5rem 3.5rem; }
@media (max-width: 960px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }
.footer-top h3 { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage); margin-bottom: 1.2rem; }
.footer-top ul { list-style: none; }
.footer-top li { margin-bottom: 0.6rem; }
.footer-top a { color: var(--paper); text-decoration: none; font-weight: 500; transition: color var(--dur-base); }
.footer-top a:hover { color: var(--yellow); }
.footer-top address { font-style: normal; padding-left: 1.05em; text-indent: -1.05em; line-height: 1.55; } /* two-line office address; the dot sits in the indent */
.footer-brand img { height: 26px; }
.footer-brand p { margin-top: 1.4rem; font-size: var(--fs-sm); color: var(--sage); max-width: 26em; }
.footer-legal { border-top: 1px solid var(--color-rule-on-ink); padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; justify-content: space-between; font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.04em; color: var(--sage); }
.footer-legal a { color: var(--sage); }
.footer-legal a:hover { color: var(--paper); }

/* --------------------------------------------------------------------------
   Reveal system (JS-gated; content visible without JS)
   -------------------------------------------------------------------------- */
html.js .reveal { opacity: 0; transform: translateY(22px); }
.reveal { transition: opacity var(--dur-deliberate) var(--ease-out), transform var(--dur-deliberate) var(--ease-out); transition-delay: var(--d, 0s); }
html.js .reveal.is-inview, .reveal.is-inview { opacity: 1; transform: none; }
html.js .reveal-group .reveal-item { opacity: 0; transform: translateY(22px); }
.reveal-group .reveal-item { transition: opacity var(--dur-deliberate) var(--ease-out), transform var(--dur-deliberate) var(--ease-out); }
html.js .reveal-group.is-inview .reveal-item, .reveal-group.is-inview .reveal-item { opacity: 1; transform: none; }
.reveal-group.is-inview .reveal-item:nth-child(2) { transition-delay: 0.08s; }
.reveal-group.is-inview .reveal-item:nth-child(3) { transition-delay: 0.16s; }
.reveal-group.is-inview .reveal-item:nth-child(4) { transition-delay: 0.24s; }
.reveal-group.is-inview .reveal-item:nth-child(5) { transition-delay: 0.32s; }
.reveal-group.is-inview .reveal-item:nth-child(6) { transition-delay: 0.4s; }
.line-reveal .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
html.js .line-reveal .line > span { transform: translateY(108%); }
.line-reveal .line > span { display: block; transition: transform 1s var(--ease-out); }
html.js .line-reveal.is-inview .line > span, .line-reveal.is-inview .line > span { transform: none; }
.line-reveal .line:nth-child(2) > span { transition-delay: 0.1s; }
.line-reveal .line:nth-child(3) > span { transition-delay: 0.2s; }
html:not(.js) .gantt-bar, html:not(.js) .steps-line, html:not(.js) .stat::before { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-group .reveal-item { opacity: 1; transform: none; }
  html.js .line-reveal .line > span { transform: none; }
  .gantt-bar, .steps-line, .stat::before, .step::before { transform: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   Marquee of evidence (hero meta) — optional quiet ticker
   -------------------------------------------------------------------------- */
.ticker { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: inline-flex; gap: 3rem; padding-right: 3rem; animation: ticker 48s linear infinite; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-deep); }
.ticker-track b { color: var(--color-text); font-weight: 900; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta .display-2 { max-width: 16ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2.4rem; }
.cta-sub { margin-top: 1.4rem; max-width: 36em; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.mt-1 { margin-top: var(--space-4); } .mt-2 { margin-top: var(--space-6); } .mt-3 { margin-top: var(--space-7); } .mt-4 { margin-top: var(--space-8); }

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

.right { text-align: right; }

.yellow { color: var(--yellow); }

/* band--paper2 surface adjustments */
.band--paper2 .card, .band--paper2 .pillar, .band--paper2 .flow li { background: var(--paper); }
.band--paper2 a.card:hover { background: var(--paper); }

/* nav density at mid-desktop widths */
.nav-links a { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 961px) {
  .nav-links { gap: 1rem; }
  .nav-links a:not(.btn) { font-size: var(--fs-xs); }
  .nav-links .btn { padding: 0.65em 1em; font-size: var(--fs-xs); }
  .brand img { height: 22px; }
}

/* QA mode (?qa=1): everything visible, no transitions — for screenshots and crawlers */
html.qa .reveal, html.qa .reveal-group .reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; }
html.qa .line-reveal .line > span { transform: none !important; transition: none !important; }
html.qa .gantt-bar, html.qa .steps-line, html.qa .stat::before, html.qa .step::before, html.qa .flow li .arrow path { transform: none !important; transition: none !important; stroke-dashoffset: 0 !important; }
html.qa .dock-svg .draw { stroke-dashoffset: 0 !important; animation: none !important; }
/* partner cards as links */
.partner-card { display: block; text-decoration: none; color: inherit; }
a.partner-card:hover .portrait { background: var(--ink-2); }
a.partner-card:hover h3 { color: var(--color-link); }

/* ==========================================================================
   v2.1 — RED. The Indie Media Fund's identity colour (see v2.3 rules above): the Fund cover,
   the Fund card, the Fund pill and nav marker, the London mark, the red-page header.
   ========================================================================== */
.page-head--red { position: relative; overflow: hidden; background: var(--color-surface-ink); color: var(--color-text-on-ink); isolation: isolate; }
.page-head--red > .container { position: relative; z-index: 3; }
.page-head--red .kicker { color: var(--paper); }
.page-head--red .muted,.page-head--red .caption { color: var(--paper-a84); }
.page-head--red .pill { background: var(--paper); color: var(--red-deep); }
.page-head--red .pill i { background: var(--red); }
.page-head--red .btn--primary { background: var(--paper); color: var(--ink); }
.page-head--red .btn--primary:hover, .page-head--red .btn--primary:focus-visible { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper); }
.page-head--red .btn--secondary { border-color: var(--paper); color: var(--paper); }
.page-head--red .btn--secondary:hover { background: var(--paper); color: var(--red-deep); }

.page-head--red :focus-visible { outline-color: var(--paper); }


.dot { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--color-fund-accent); margin-right: 0.55em; vertical-align: 0.08em; }
.nav-links a.nav-fund::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-fund-accent); margin-right: 0.5em; vertical-align: 0.12em; }
.band--yellow .btn--primary:hover { background: var(--paper); color: var(--ink); }

/* ==========================================================================
   v2.2 — change list of 5 Sep 2026 (item 6 kept; items 2–5 superseded by v2.3)
   ========================================================================== */
/* 6 · header on the red (IMF) page: white logo and menu, blue button */
body.page--fund .site-header { color: var(--paper); }
body.page--fund .site-header.is-scrolled { background: var(--ink-a90); box-shadow: 0 1px 0 var(--paper-a30); }
body.page--fund .nav-links a:not(.btn) { color: var(--paper-a84); }
body.page--fund .nav-links a:not(.btn):hover, body.page--fund .nav-links a.is-active { color: var(--white); }
body.page--fund .nav-links a:not(.btn)::after { background: var(--paper); }
body.page--fund .nav-links a.nav-fund::before { background: var(--paper); }
body.page--fund .nav-links .btn--primary { background: var(--paper); color: var(--ink); }
body.page--fund .nav-links .btn--primary:hover, body.page--fund .nav-links .btn--primary:focus-visible { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper); }
body.page--fund .nav-toggle { border-color: var(--paper); background: transparent; }
body.page--fund .nav-toggle span, body.page--fund .nav-toggle span::before, body.page--fund .nav-toggle span::after { background: var(--paper); }
body.page--fund.is-nav-open .nav-toggle span { background: transparent; }
@media (max-width: 960px) { body.page--fund .nav-links .btn { background: var(--paper); color: var(--ink); } }

/* ==========================================================================
   v2.3 — "Quiet system, loud signal" (approved 5 Sep 2026)
   Paper ≥ 60% · ink ≤ 30% · vivid surfaces ≤ 8%, from ONE accent per page.
   Yellow = the house signal (.hl, key rows, the one ask band, primary hover).
   Blue = type-level only (kickers, links, data points, the × device) — never a surface.
   Red = Indie Media Fund identity only (cover, card, nav marker, red-page header);
   paper text and paper markers on red — never yellow on red.
   Pillars and plan lanes are coded tonally (ink / ink-soft / sage-deep; on ink: paper / sage / sage-deep), never by hue.
   Orange = negatives only. Never more than two hues in one viewport.
   ========================================================================== */
.pill--red, .band--ink .pill--red { background: var(--color-fund); color: var(--color-text-on-ink); }
.pill--red i { background: var(--paper); }
.page-head--red .hl { background: var(--paper); color: var(--red-deep); }

/* v2.3 · boundaries grid on paper (home 07 moved off ink) */
.band:not(.band--ink) .bounds { border-top-color: var(--ink); }
.band:not(.band--ink) .bound .num { color: var(--blue); }
.band:not(.band--ink) .bound h3 { color: var(--ink); }
.band:not(.band--ink) .bound p { color: var(--ink-soft); }
.band:not(.band--ink) .bound { border-color: var(--color-rule); }

/* ==========================================================================
   States — disabled / loading (v2.3 audit, phase C)
   ========================================================================== */
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { pointer-events: none; opacity: 0.75; }
.btn.is-loading .btn-arrow { animation: btn-nudge 0.9s var(--ease-out) infinite; }
@keyframes btn-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.35em); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading .btn-arrow { animation: none; } }

/* ==========================================================================
   Print — paper pages, no navigation or film, reveals shown, bands as rules
   ========================================================================== */
@media print {
  @page { margin: 16mm; }
  html.js .reveal, html.js .reveal-group .reveal-item, html.js .line-reveal .line > span { opacity: 1 !important; transform: none !important; }
  .site-header, .nav-toggle, .skip, .btn, .hero-ctas, .cta-actions, .footer-top ul, .footer-top h3, video, .crop-mark, .dock-svg, .ticker, form, .theme-toggle { display: none !important; }
  body { background: var(--white); color: var(--ink); font-size: 11pt; }
  .band, .band--ink, .band--paper2, .band--yellow, .page-head--red, .card--red, .card, .takeaway, .pill, .portrait { background: var(--white) !important; color: var(--ink) !important; box-shadow: none !important; }
  .band { padding: 10mm 0 !important; border-top: 1px solid var(--ink); }
  .band--ink *, .page-head--red *, .card--red *, .takeaway * { color: var(--ink) !important; }
  .card, .pillar, .step, .stat, .frame, li, tr { break-inside: avoid; }
  .frame img { max-height: 90mm; }
  .hl { background: var(--yellow) !important; color: var(--ink) !important; }
  .gantt-bar { background: var(--ink) !important; }
  a[href^="http"]:not(.btn)::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* v2.3 audit C5 · reading measure ≤ 70ch in wide columns */
.step p, .pillar-list li, p.caption { max-width: 70ch; }

/* ==========================================================================
   Form validation — error pattern (audit D3). Orange is the negative colour;
   both forms sit on ink (6.2:1). On paper use a darker orange before shipping.
   ========================================================================== */
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select,
.band--ink .field.is-invalid input, .band--ink .field.is-invalid textarea, .band--ink .field.is-invalid select { border-color: var(--color-negative); box-shadow: 0 0 0 3px var(--negative-ring); }
.field-error { display: block; margin-top: 0.45rem; font-size: var(--fs-xs); font-weight: 600; color: var(--color-negative); }
.form-summary { border: 1.5px solid var(--color-negative); border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 1.2rem; font-size: var(--fs-sm); color: var(--color-text); }
.band--ink .form-summary { color: var(--color-text-on-ink); }
.form-summary strong { color: var(--color-negative); }

/* audit A6 · the hero schematic is drawn for 21:9; hide it on the 4:5 phone frame */
@media (max-width: 720px) { .dock-svg { display: none; } }

/* ==========================================================================
   The ask bands (home 08, the three sub-page fit-call sections, the Fund
   request-access band): ink ground, paper button at rest, yellow on hover.
   ========================================================================== */
.band--ink.ask .btn--primary { background: var(--paper); color: var(--ink); }
.band--ink.ask .btn--primary:hover, .band--ink.ask .btn--primary:focus-visible { background: var(--yellow); color: var(--ink); }

/* ==========================================================================
   Fund cover — gradient glass (brand v1.4). Ink ground; a red-orange → magenta
   light field with two glass slabs on the right; the text column stays on ink.
   The light drifts over 40 s — off under reduced motion and in QA mode.
   ========================================================================== */
.cover-glass { position: absolute; inset: -4%; z-index: 0; pointer-events: none; will-change: transform;
  background:
    radial-gradient(55% 95% at 78% 48%, var(--color-fund-accent) 0%, var(--color-fund) 36%, rgba(10, 10, 10, 0) 70%),
    radial-gradient(28% 48% at 66% 16%, var(--fund-glow) 0%, rgba(10, 10, 10, 0) 60%),
    radial-gradient(42% 70% at 97% 90%, var(--fund-rim) 0%, rgba(10, 10, 10, 0) 62%),
    linear-gradient(100deg, var(--ink) 0 47%, rgba(10, 10, 10, 0) 74%);
  animation: glass-drift 40s ease-in-out infinite; }
.cover-glass::before, .cover-glass::after { content: ""; position: absolute; top: -14%; bottom: -14%; transform: skewX(-14deg); }
.cover-glass::before { left: 57%; width: 23%;
  background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo) 42%, var(--glass-mid) 72%, var(--glass-lo));
  border-left: 1px solid var(--glass-edge); border-right: 1px solid var(--glass-edge-soft);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 0 90px 24px var(--fund-halo), inset 0 0 70px rgba(255, 255, 255, 0.05); }
.cover-glass::after { left: 85%; width: 8%;
  background: linear-gradient(180deg, var(--glass-mid), var(--glass-lo) 50%, var(--glass-mid)); border-left: 1px solid var(--glass-edge-soft);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cover-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .8 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"); }
@keyframes glass-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-1.2%, 0.8%, 0) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .cover-glass { animation: none; } }
html.qa .cover-glass { animation: none; }
@media (max-width: 720px) {
  .cover-glass { background:
      radial-gradient(75% 55% at 72% 88%, var(--color-fund-accent) 0%, var(--color-fund) 40%, rgba(10, 10, 10, 0) 72%),
      radial-gradient(40% 30% at 95% 60%, var(--fund-rim) 0%, rgba(10, 10, 10, 0) 60%),
      linear-gradient(180deg, var(--ink) 0 48%, rgba(10, 10, 10, 0) 78%); }
  .cover-glass::before { left: 30%; width: 40%; top: 40%; bottom: -20%; }
  .cover-glass::after { left: 78%; width: 12%; top: 45%; bottom: -20%; }
}

/* ==========================================================================
   Fund card (home 05) — the cover in miniature: ink, light field, glass slab.
   ========================================================================== */
.card--red { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--paper); border: 1px solid var(--color-rule-on-ink); }
.card--red:hover { transform: none; }
.card--red::before { content: ""; position: absolute; inset: -10%; z-index: 0;
  background: radial-gradient(60% 70% at 88% 100%, var(--color-fund-accent) 0%, var(--color-fund) 34%, rgba(10, 10, 10, 0) 68%), radial-gradient(34% 40% at 100% 58%, var(--fund-rim) 0%, rgba(10, 10, 10, 0) 60%); }
.card--red::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 74%; width: 15%; transform: skewX(-14deg); z-index: 0;
  background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo) 45%, var(--glass-mid)); border-left: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.card--red > * { position: relative; z-index: 1; }
.card--red p { color: var(--paper-a84); }
.card--red .card-index { color: var(--paper-a84); }
.card--red .check-list li { border-color: var(--color-rule-on-ink); color: var(--paper); }
.card--red .check-list li::before { color: var(--paper); }
.card--red .btn--primary { background: var(--paper); color: var(--ink); }
.card--red .btn--primary:hover, .card--red .btn--primary:focus-visible { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper); }

/* ==========================================================================
   THEMES — dark mode. The head script sets html[data-theme] before paint from the
   stored choice or the OS preference (?theme=dark|light forces it for QA); the
   header switch toggles it. Only the alias tier and brand variants change here.
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink-3: #22221A;
  --color-surface: var(--ink); --color-surface-2: #121210; --color-surface-3: #1A1A15;
  --color-surface-ink: #1A1A15; --color-surface-ink-2: #22221A;
  --color-text: var(--paper); --color-text-soft: #C9CABB; --color-text-muted: var(--sage);
  --color-text-on-ink: var(--paper); --color-text-on-ink-muted: var(--sage);
  --color-rule: rgba(236, 237, 224, 0.16); --color-rule-strong: rgba(236, 237, 224, 0.32);
  --color-rule-on-ink: rgba(236, 237, 224, 0.18); --color-rule-on-ink-strong: rgba(236, 237, 224, 0.42);
  --color-link: #7C97FF; --color-focus: #7C97FF;
  --color-negative-text: var(--orange);          /* #F4611A on ink 6.2:1; the dark orange fails on ink */
  --focus-ring: rgba(124, 151, 255, 0.28);
}
html[data-theme="dark"] body { background: var(--color-surface); color: var(--color-text); }
html[data-theme="dark"] .band--paper2 { background: var(--color-surface-2); }
html[data-theme="dark"] .band--ink { background: var(--color-surface-ink); box-shadow: inset 0 1px 0 var(--color-rule-on-ink), inset 0 -1px 0 var(--color-rule-on-ink); }
html[data-theme="dark"] .card { background: var(--color-surface-2); border: 1px solid var(--color-rule); }
html[data-theme="dark"] .band--paper2 .card, html[data-theme="dark"] .pillar, html[data-theme="dark"] .band--paper2 .flow li { background: var(--color-surface-3); }
html[data-theme="dark"] .flow li { background: var(--color-surface-2); border: 1px solid var(--color-rule); }
html[data-theme="dark"] .card p, html[data-theme="dark"] .pillar-list li { color: var(--color-text-soft); }
html[data-theme="dark"] .card--red { background: var(--ink); border-color: var(--color-rule-on-ink-strong); }
html[data-theme="dark"] .pillar--fin { --lane: var(--paper); } html[data-theme="dark"] .pillar--ops { --lane: var(--sage); } html[data-theme="dark"] .pillar--own { --lane: var(--sage-deep); }
html[data-theme="dark"] .lane--fin { --lane: var(--paper); } html[data-theme="dark"] .lane--ops { --lane: var(--sage); } html[data-theme="dark"] .lane--own { --lane: var(--sage-deep); }
html[data-theme="dark"] .btn--primary { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .btn--primary:hover, html[data-theme="dark"] .btn--primary:focus-visible { background: var(--yellow); color: var(--ink); }
html[data-theme="dark"] .btn--secondary { border-color: var(--paper); color: var(--paper); }
html[data-theme="dark"] .btn--secondary:hover { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .takeaway { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .takeaway strong { color: var(--ink); }
html[data-theme="dark"] .site-header.is-scrolled { background: rgba(10, 10, 10, 0.88); box-shadow: 0 1px 0 var(--color-rule-on-ink); }
html[data-theme="dark"] .nav-toggle { border-color: var(--paper); } html[data-theme="dark"] .nav-toggle span, html[data-theme="dark"] .nav-toggle span::before, html[data-theme="dark"] .nav-toggle span::after { background: var(--paper); }
html[data-theme="dark"] .site-footer { border-top: 1px solid var(--color-rule-on-ink); }
html[data-theme="dark"] .portrait, html[data-theme="dark"] .frame { background: var(--color-surface-3); }
html[data-theme="dark"] .dd-table thead th { background: var(--color-surface-3); }
html[data-theme="dark"] .bounds { border-top-color: var(--color-rule-strong); }
html[data-theme="dark"] .band:not(.band--ink) .bound .num { color: var(--color-link); }
html[data-theme="dark"] .band:not(.band--ink) .bound h3 { color: var(--paper); }
html[data-theme="dark"] .band:not(.band--ink) .bound p { color: var(--color-text-soft); }
html[data-theme="dark"] .steps .step h3, html[data-theme="dark"] .num-list strong { color: var(--paper); }
html[data-theme="dark"] .field label { color: var(--paper-a84); }
html[data-theme="dark"] .field input, html[data-theme="dark"] .field textarea, html[data-theme="dark"] .field select { background: var(--color-surface-2); border-color: var(--color-rule-strong); color: var(--paper); }
html[data-theme="dark"] .stats { background: transparent; }
/* logo swap */
.brand .logo-dark { display: none; }
html[data-theme="dark"] .brand .logo-light { display: none; }
html[data-theme="dark"] .brand .logo-dark { display: block; }
/* the switch */
.theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; padding: 0; margin-right: 0.35rem; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.theme-toggle:hover, .theme-toggle:focus-visible { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
body.page--fund .theme-toggle { color: var(--paper); }
body.page--fund .theme-toggle:hover, body.page--fund .theme-toggle:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (max-width: 960px) { .theme-toggle { width: 44px; height: 44px; margin: 0.5rem 0 0; } }
@media print { html[data-theme="dark"] { color-scheme: light; --color-surface: #FFFFFF; --color-text: #0A0A0A; } }
/* phone menu button: outlined on ink (dark theme and Fund page), paper with an ink × while the menu is open */
@media (max-width: 960px) {
  html[data-theme="dark"] .nav-toggle { background: transparent; }
  body.is-nav-open .nav-toggle, html[data-theme="dark"] body.is-nav-open .nav-toggle, body.page--fund.is-nav-open .nav-toggle { background: var(--paper); border-color: var(--paper); }
  body.is-nav-open .nav-toggle span::before, body.is-nav-open .nav-toggle span::after,
  html[data-theme="dark"] body.is-nav-open .nav-toggle span::before, html[data-theme="dark"] body.is-nav-open .nav-toggle span::after,
  body.page--fund.is-nav-open .nav-toggle span::before, body.page--fund.is-nav-open .nav-toggle span::after { background: var(--ink); }
}
/* phones show the mark only — must follow the logo-swap rules above to win the cascade */
@media (max-width: 480px) { html[data-theme="dark"] .brand .logo-dark { display: none; } }
/* divided ink band in dark: the border is the one divider — no doubled hairlines */
html[data-theme="dark"] .band--ink.band--divided { box-shadow: inset 0 -1px 0 var(--color-rule-on-ink); }
html[data-theme="dark"] .band--ink:has(+ .band--divided) { box-shadow: inset 0 1px 0 var(--color-rule-on-ink); }
/* theme switch hover in dark: paper, like the dark-mode primary button */
html[data-theme="dark"] .theme-toggle:hover, html[data-theme="dark"] .theme-toggle:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); }
/* evidence grades read as labelled chips, not stray letters */
.grade { display: inline-block; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.08em; line-height: 1; padding: 0.3em 0.55em 0.25em; border: 1px solid var(--color-rule-strong); border-radius: 999px; vertical-align: 0.12em; margin-left: 0.15em; white-space: nowrap; }
p:not(.caption) > .grade::before { content: "Grade "; }
.band--ink .grade { border-color: var(--color-rule-on-ink-strong); }
/* forms: honeypot (never seen by people) and the failure line */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin-top: 0.85rem; font-size: var(--fs-sm); color: var(--color-negative-text); max-width: 36em; }
.band--ink .form-error, html[data-theme="dark"] .form-error { color: var(--orange); }
.form-error a { color: inherit; font-weight: 700; }