/* global.css — SCAFFOLD reset + base (bead yodowebsite-48k.1.1).
   Minimal, self-contained shell: modern reset, dark background, and the structural utilities
   BaseLayout depends on (.container, .skip-link, .visually-hidden, :focus-visible).
   The rich typographic APPLICATION (heading display family, font-variation-settings, .eyebrow,
   fluid scale) belongs to bead yodowebsite-48k.1.3 alongside the full token system — that owner
   layers it on top of these tokens. fonts.css (bead 1.2) handles @font-face loading. */
@import "./tokens.css";
@import "./fonts.css";

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--surface-1000);
}

body {
  min-height: 100svh;
  background: var(--surface-900);
  color: var(--text);
  font-family: var(--font-text);
  font-variation-settings: var(--vfs-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Long-text overflow protection (bead yodowebsite-48k.8.1.1). overflow-wrap is an
     INHERITED property, so this one declaration cascades to every text element —
     CMS-editable one-liners, display names, leadership bio, manifesto. An over-long
     unbroken token (e.g. a 200-char string pasted into a Tina field) breaks to the
     next line instead of forcing horizontal scroll. `anywhere` (not `break-word`) is
     deliberate: it also shrinks the min-content size, so a long token inside a flex
     row (.teaser__name-row, .showcase__head) lets the flex item shrink rather than
     overflow its track. Normal prose with spaces is unaffected — it only ever breaks
     a word that would otherwise overflow. */
  overflow-wrap: anywhere;
}

/* ── Typographic application (bead 1.3) ──────────────────────────────────────
   Headings use the display family at NORMAL width (wght 600, wdth 100). The
   EXPANDED look (--vfs-display, wdth 125) is reserved for hero + manifesto only
   and applied via `.display`. font-family + font-variation-settings are always
   paired on the same selector (the wdth axis doesn't inherit reliably). */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-variation-settings: "wght" 600, "wdth" 100;
  color: var(--text-strong);
  letter-spacing: var(--track-heading); /* h1/h2 -0.027em per spec §4; h3/h4 override below */
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-display);
}
h4 {
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: var(--track-display);
}

/* The single expanded-width treatment — hero + manifesto headlines only.
   font-stretch:125% is load-bearing, not cosmetic: @fontsource-variable/archivo
   ships the wdth axis as a SEPARATE woff2 (wdth.css, font-stretch 62%–125%) from the
   weight-only file (wght.css, normal width). With no font-stretch the browser matches the
   wght-only file and the wdth axis silently no-ops; 125% forces the wdth file and gives the
   computed expanded width. (bead 1.2) */
.display {
  font-family: var(--font-display);
  font-variation-settings: var(--vfs-display);
  font-stretch: 125%;
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--text-strong);
  text-wrap: balance;
}

/* Bracketed micro-label type (the Eyebrow component layers brackets on top). */
.eyebrow {
  font-family: var(--font-text);
  font-variation-settings: "wght" 600, "wdth" 100;
  font-size: var(--fs-label);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Responsive-image wrapper: a <picture> used only to offer AVIF/WebP <source>s before the <img>
   fallback must not introduce a box of its own — `display:contents` makes it vanish from layout so
   the inner <img> keeps its component-scoped sizing (height:100%, object-fit, aspect-ratio, etc.). */
.pic {
  display: contents;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

/* Full-bleed background, constrained inner content. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Accessibility utilities. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 8px 16px;
  background: var(--gold);
  color: var(--on-gold);
  border-radius: 8px;
  font-weight: 600;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* The skip-link has a gold background, so the global gold :focus-visible ring above would be
   gold-on-gold (invisible). Override to a dark ring so keyboard focus on the skip-link is
   clearly visible (WCAG 2.4.7 / 1.4.11) — --on-gold on --gold ≈ 9.76:1. (bead 10.3, P2-2) */
.skip-link:focus-visible {
  outline-color: var(--on-gold);
}

/* Scroll-reveal initial state (Phase 5, bead 6.1) — applied ONLY when JS is available
   (the `js` class is set on <html> before first paint in BaseLayout). No-JS users never see
   hidden content. motion.js fades each [data-reveal] up once on scroll-in; under reduced motion
   they are shown immediately (belt-and-suspenders below, in addition to motion.js's JS fallback). */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

/* SplitText headline (hero + manifesto, bead 6.2): same JS-gated pre-hide so the deferred
   motion.js never flashes the headline visible before its per-line reveal. opacity only — the
   line lift is animated on .split-line, not on the container. */
html.js [data-splittext] {
  opacity: 0;
}

/* Honour reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  html.js [data-splittext] {
    opacity: 1;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── Print (audit L-1) ─────────────────────────────────────────────────────── */
@media print {
  .nav,
  .footer__socials,
  .hero__videos,
  .hero__scrim,
  .hero__toggle,
  .motif-texture,
  .skip-link { display: none !important; }
  html,
  body { background: #fff; color: #000; }
  .proof::before,
  .manifesto::before,
  .about-intro::before { display: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.85em; }
}


/* ── Ported component styles (S2 gap fix 2026-09-11: component <style> blocks
   were never carried from Astro; see tools/merge-component-css.py) ── */

/* ── Ported from src/components/ApproachColumns.astro (Astro <style>; :global() unwrapped) ── */

/* Layered-black depth: the base surface plus one soft warm gold bloom anchored top-left so the
     dark reads as a lit room, not absence. The bloom is the only "texture" — subtle, tied to the
     accent, no filter stacks (recon trap). overflow:clip contains it to the band. */
  .ops {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--surface-900);
    padding-block: var(--section-py);
  }
  .ops::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
      90% 80% at 10% 6%,
      color-mix(in oklab, var(--gold) 6%, transparent) 0%,
      transparent 62%
    );
  }

  .ops__inner {
    display: flex;
    flex-direction: column;
    /* The marker labels the ledger directly below it — tie them. The first row carries its own
       40px padding-top, so a smaller inner gap keeps marker→first-index a clear-but-connected break
       rather than a floating gap. */
    gap: var(--s6);
  }

  /* Section marker (industrial-premium move): a small tracked-caps label flush-left, then a single
     gold hairline running to the edge. This hairline is the entire gold budget for the viewport. */
  .ops__marker {
    display: flex;
    align-items: center;
    gap: var(--s4);
  }
  .ops__marker-label {
    flex: none;
    margin: 0;
    font-family: var(--font-text);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-label);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .ops__rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--gold);
  }

  .ops__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  /* Mobile-first: each principle is a vertical 3-tier stack with generous rhythm; hairline rules
     between rows give the band an editorial-ledger structure (no boxes, no equal-column monotony). */
  .ops__row {
    display: grid;
    gap: var(--s3);
    /* 40px — one notch above the 32px token; the scale has no 40px stop, so compose it from
       tokens rather than hardcode. Confident editorial cadence: separation lives between rows,
       each index/statement/body reads as one tight unit. */
    padding-block: calc(var(--s8) + var(--s2));
  }
  .ops__row + .ops__row {
    border-top: 1px solid var(--border);
  }
  .ops__text {
    display: flex;
    flex-direction: column;
    /* 20px drop from the oversized statement to the body — enough to read as a distinct tier in the
       3-tier rhythm, still tight enough that statement+body stay one unit. */
    gap: calc(var(--s4) + var(--s1));
  }

  .ops__index {
    font-family: var(--font-display); /* spec §3: gold-numbered columns — the sanctioned gold numeral */
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--gold);
  }
  @media (min-width: 768px) {
    .ops__index { padding-top: 0.5em; } /* anchors the numeral to the statement's cap height */
    .ops__row { grid-template-columns: minmax(4rem, 6rem) minmax(0, 1fr); }
  }

  /* The protagonist: a scale-fill statement that colonizes the measure. Normal width — the expanded
     wdth axis stays reserved for hero + the one About manifesto (design law). */
  .ops__statement {
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-statement);
    line-height: 1.06;
    letter-spacing: var(--track-display);
    color: var(--text-strong);
    text-wrap: balance;
  }
  .ops__body {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-muted);
    max-width: 46ch;
  }

  /* Desktop: hang the index in a left margin column so the statements sit on a clean editorial axis
     (asymmetry over centering). The index anchors to the statement's cap-height — the small number
     reads as a marginal annotation beside the top of the big word, not floating at its baseline. */
  @media (min-width: 768px) {
    .ops__row {
      grid-template-columns: minmax(3.5rem, 5rem) minmax(0, 1fr);
      column-gap: var(--s8);
      align-items: start;
    }
    .ops__index {
      grid-column: 1;
      padding-top: 0.35em;
    }
    .ops__text {
      grid-column: 2;
    }
  }

/* ── Ported from src/components/Button.astro (Astro <style>; :global() unwrapped) ── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    font-family: var(--font-text);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-small);
    line-height: 1;
    text-align: center;
    cursor: pointer;
    border: 0;
    border-radius: var(--radius);
    transition:
      background-color var(--dur-micro) var(--ease-snap),
      color var(--dur-micro) var(--ease-snap),
      border-color var(--dur-micro) var(--ease-snap),
      transform var(--dur-micro) var(--ease-snap);
  }

  /* Primary — solid gold, dark text. The single bold gold moment. */
  .btn--primary {
    padding: 14px 28px;
    background: var(--gold);
    color: var(--on-gold);
  }
  .btn--primary:hover {
    background: var(--gold-bright);
    transform: translateY(-2px);
  }
  .btn--primary:active {
    transform: scale(0.98);
  }

  /* Ghost — transparent, hairline border, fills to gold on hover. */
  .btn--ghost {
    padding: 14px 28px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
  }
  .btn--ghost:hover {
    border-color: var(--gold);
    color: var(--gold);
  }
  .btn--ghost:active {
    transform: scale(0.98);
  }

  /* Text link — inline, gold underline draws in on hover. */
  .btn--text {
    padding: 0;
    background:
      linear-gradient(var(--gold), var(--gold)) no-repeat left bottom / 0% 1px;
    color: var(--text);
    border-radius: 0;
    transition: background-size var(--dur) var(--ease-out);
  }
  .btn--text:hover {
    background-size: 100% 1px;
    color: var(--text-strong);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn--primary:hover,
    .btn--primary:active,
    .btn--ghost:active {
      transform: none;
    }
  }

/* ── Ported from src/components/Card.astro (Astro <style>; :global() unwrapped) ── */

.card {
    display: flex;
    flex-direction: column;
    background: var(--surface-800);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
  }

  .card__media {
    overflow: hidden;
  }
  .card__media--16-9 {
    aspect-ratio: 16 / 9;
  }
  .card__media--3-2 {
    aspect-ratio: 3 / 2;
  }
  /* Slotted media (img/picture) fills the frame and scales on hover. */
  .card__media img,
  .card__media picture,
  .card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur) var(--ease-out);
  }

  .card__body {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    padding: var(--s6);
  }

  .card__eyebrow {
    /* Inherits global .eyebrow type; spacing handled by body gap. */
  }

  .card__title {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "wdth" 100;
    color: var(--text-strong);
    margin: 0;
  }

  .card__arrow {
    color: var(--gold);
    transition: transform var(--dur-micro) var(--ease-snap);
  }

  .card__byline {
    display: flex;
    align-items: center;
    gap: var(--s2);
  }
  .card__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
  }
  .card__name {
    font-size: var(--fs-small);
    color: var(--text-muted);
  }

  /* Hover only for interactive (linked) cards. */
  .card--link:hover .card__media img,
  .card--link:hover .card__media picture,
  .card--link:hover .card__media video {
    transform: scale(1.03);
  }
  .card--link:hover .card__arrow {
    transform: translateX(4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .card__media img,
    .card__media picture,
    .card__media video,
    .card__arrow {
      transition: none;
    }
    .card--link:hover .card__media img,
    .card--link:hover .card__media picture,
    .card--link:hover .card__media video {
      transform: none;
    }
    .card--link:hover .card__arrow {
      transform: none;
    }
  }

/* ── Ported from src/components/CompaniesSection.astro (Astro <style>; :global() unwrapped) ── */

.companies-section {
    background: var(--surface-1000);
    padding-block: var(--section-py);
  }
  .companies-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s12);
  }
  .companies-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    max-width: 38ch;
  }
    .companies-section__unity {
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    color: var(--text);
  }

/* ── Ported from src/components/CompanyShowcase.astro (Astro <style>; :global() unwrapped) ── */

.showcase {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s8);
  }
  @media (min-width: 768px) {
    .showcase { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 992px) {
    .showcase { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
  }
  .showcase__item { display: flex; }

  .ccard {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 0; /* tonal panels, no borders (spec §3) — surface lift does the separation */
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-800);
    transition: transform var(--dur) var(--ease-snap), box-shadow var(--dur) var(--ease-snap);
  }
  /* The card itself is NOT a link (only the CTA navigates) — but it still responds to hover and to
     keyboard focus landing on its CTA (:focus-within), so the lift/sheen track the active card. */
  .ccard:hover,
  .ccard:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 28px 64px -22px rgba(0, 0, 0, 0.82), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  /* The motif (.motif is absolute inset:0) lives in this 4:5 box. */
  .ccard__visual {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }
  .ccard__index {
    position: absolute;
    left: var(--s4);
    bottom: var(--s3);
    z-index: 3;
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: var(--track-micro);
    color: var(--gold);
  }

  /* Hover sheen — a faint diagonal gleam, deliberately subtle so it never competes with the
     motif's own ambient motion. */
  .ccard__sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
  .ccard__sheen::before {
    content: "";
    position: absolute;
    top: -25%;
    left: -65%;
    width: 48%;
    height: 150%;
    transform: skewX(-18deg);
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06) 36%, rgba(230, 221, 46, 0.1) 50%, rgba(255, 255, 255, 0.06) 64%, transparent);
  }
  .ccard:hover .ccard__sheen::before,
  .ccard:focus-within .ccard__sheen::before { animation: ccard-gleam 1.35s var(--ease-out); }
  @keyframes ccard-gleam {
    0% { left: -65%; opacity: 0; }
    14% { opacity: 1; }
    86% { opacity: 1; }
    100% { left: 135%; opacity: 0; }
  }

  .ccard__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--s3);
    padding: var(--s6);
    border-top: 1px solid var(--border);
  }
  /* Name takes the full width so the status tag ALWAYS sits on its own row beneath it,
     left-aligned — identical head rhythm whether the name is one line ("Yodo Pay") or wraps
     to two ("Yodo Importation Services"). Without this, baseline+wrap put the tag inline on
     short names and dropped-and-indented on the wrapping name: three different heads. */
  .ccard__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
  }
  .ccard__name {
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-display-2);
    line-height: var(--lh-snug);
    color: var(--text-strong);
    margin: 0;
  }
  .ccard__tagline {
    font-size: var(--fs-body);
    font-variation-settings: "wght" 500, "wdth" 100;
    line-height: var(--lh-snug);
    color: var(--text);
  }
  /* A hair more separation from the tagline than the base body gap, so the supporting detail
     reads as a clearly subordinate block stepping down from the one-liner — a deliberate
     name -> tagline -> [breath] -> supporting rhythm rather than one flat run of text. */
  .ccard__supporting {
    margin-top: var(--s1);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--text-muted);
  }
  .ccard__cta {
    align-self: flex-start;
    /* Push the CTA to the foot of the body so all three "Visit site" links baseline-align on a
       common row regardless of how long each card's supporting copy runs — the row reads as a
       deliberate set, not three ragged endings. The min margin keeps breathing room on the
       shortest card (Yodo Pay) where there's the least copy above it. */
    margin-top: auto;
    padding-top: var(--s4);
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--fs-small);
    font-variation-settings: "wght" 600, "wdth" 100;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius);
    transition: color var(--dur-micro) var(--ease-snap);
  }
  .ccard:hover .ccard__cta,
  .ccard__cta:hover,
  .ccard__cta:focus-visible { color: var(--gold); }
  .ccard__cta:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  .ccard__arrow { transition: transform var(--dur-micro) var(--ease-snap); }
  .ccard:hover .ccard__arrow,
  .ccard__cta:hover .ccard__arrow,
  .ccard__cta:focus-visible .ccard__arrow { transform: translateX(3px); }

  @media (prefers-reduced-motion: reduce) {
    .ccard { transition: none; }
    .ccard:hover,
    .ccard:focus-within { transform: none; }
    .ccard:hover .ccard__sheen::before,
    .ccard:focus-within .ccard__sheen::before { animation: none; }
    .ccard__arrow { transition: none; }
    .ccard:hover .ccard__arrow,
    .ccard__cta:hover .ccard__arrow,
    .ccard__cta:focus-visible .ccard__arrow { transform: none; }
  }

/* ── Ported from src/components/ContactForm.astro (Astro <style>; :global() unwrapped) ── */

.cform {
    display: flex;
    flex-direction: column;
    gap: var(--s6);
  }

  .cform__honeypot {
    display: none;
  }

  .cform__field {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }

  /* Tracked micro-label, sibling of the Eyebrow treatment but as a real <label>. */
  .cform__label {
    font-size: var(--fs-label);
    font-variation-settings: "wght" 600, "wdth" 100;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .cform__req {
    color: var(--gold);
  }

  /* Hairline-bordered field on the dark stage; gold border on focus is the punctuation. */
  .cform__input {
    width: 100%;
    padding: 14px 16px;
    background: var(--surface-1000);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    transition: border-color var(--dur-micro) var(--ease-snap);
  }
  .cform__input::placeholder {
    color: var(--text-muted); /* full opacity: placeholders carry real guidance (audit M-4, AA) */
  }
  .cform__input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-color: var(--gold);
  }
  .cform__input[aria-invalid="true"] {
    border-color: var(--error);   /* error state — the one colour outside the brand palette (tokens.css) */
  }
  .cform__textarea {
    resize: vertical;
    min-height: 140px;
  }

  .cform__error {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--error);
  }

  /* Submission-level failure notice — hairline error-red rule, distinct from the per-field hints. */
  .cform__server-error {
    margin: 0;
    padding: var(--s4);
    border: 1px solid var(--error);
    border-radius: var(--radius);
    font-size: var(--fs-small);
    color: var(--text);
  }
  .cform__server-error a {
    color: var(--gold);
  }

  .cform__submit {
    align-self: flex-start;
    margin-top: var(--s2);
  }
  .cform__submit[disabled] {
    opacity: 0.6;
    cursor: progress;
  }

/* ── Ported from src/components/Eyebrow.astro (Astro <style>; :global() unwrapped) ── */

/* Base type (size, weight, tracking, caps, muted colour) comes from global `.eyebrow`. */
  .eyebrow--bracketed {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5ch;
  }

  .eyebrow--block {
    display: flex;
  }

  .eyebrow__bracket {
    color: var(--gold);
    font-weight: 600;
  }

/* ── Ported from src/components/Footer.astro (Astro <style>; :global() unwrapped) ── */

.footer {
    background: var(--surface-1000);
    color: var(--text-muted);
  }
  .footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
    padding-block: calc(var(--s16) + var(--s8)) var(--s12); /* spec §5 footer: 96px top, on-scale */
  }
  /* On About the logo is dropped, so the footer needn't reserve hero-sized top room — pull it up
     closer to the page's closing "Oyodo" beat. */
  .footer__inner--tight {
    padding-top: var(--s12);
  }

  .footer__wordmark {
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: var(--vfs-display);
    font-stretch: 125%;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-strong);
  }
  .footer__dot {
    display: inline-block;
    width: 0.14em;
    height: 0.14em;
    border-radius: 50%;
    background: var(--gold);
    margin-left: 0.08em;
  }

  /* The footer's single gold punctuation: one hairline under the wordmark (echoes the How-We-Operate
     section marker, so the editorial language is consistent across the site). */
  .footer__rule {
    height: 1px;
    width: 100%;
    background: var(--gold);
    opacity: 0.9;
  }

  .footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s8);
    margin-top: var(--s4);
  }
  .footer__col-head {
    margin-bottom: var(--s4);
  }
  .footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
  }

  /* Every link is an icon + label row; both share `currentColor` so they brighten together on hover. */
  .footer__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--fs-small);
    color: var(--text-muted);
    transition: color var(--dur-micro) var(--ease-snap);
  }
  .footer__link:hover {
    color: var(--text-strong);
  }
  .footer__link-label {
    min-width: 0;
  }

  .footer__socials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* brand groups share a row (arrange M1) */
    gap: var(--s6) var(--s8);
    margin-top: var(--s6);
  }
  .footer__social-brand {
    margin-bottom: var(--s2);
    font-size: var(--fs-small);
    font-variation-settings: "wght" 600, "wdth" 100;
    color: var(--text);
  }

  .footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
    padding-top: var(--s8);
    border-top: 1px solid var(--border);
    font-size: var(--fs-small);
    color: var(--text-muted);
  }
  /* Meta separators stay muted (not gold) so the gold budget is spent only on the hairline above. */
  .footer__sep {
    color: var(--text-muted);
  }
  .footer__link--meta {
    color: var(--text-muted);
  }

  /* Stack columns below the desktop breakpoint (>=992px); on touch each link becomes a >=44px hit
     area (audit 10.1 P2). The 44px row supplies its own separation, so the inter-link gap tightens. */
  @media (max-width: 991px) {
    .footer__cols {
      grid-template-columns: 1fr;
      gap: var(--s8);
    }
    .footer__list {
      gap: var(--s1);
    }
    .footer__link {
      min-height: 44px;
    }
  }

/* ── Ported from src/components/FooterIcon.astro (Astro <style>; :global() unwrapped) ── */

.footer__ico {
    flex: none;
    display: block;
  }

/* ── Ported from src/components/FounderGrid.astro (Astro <style>; :global() unwrapped) ── */

.leaders {
    background: var(--surface-900);
    padding-block: var(--section-py); /* F5: match site section rhythm (was fixed 64px) */
  }
  .leaders__intro {
    margin: var(--s6) 0 0;
    max-width: 62ch;
    color: var(--text-muted);
  }

  .leaders__row {
    list-style: none;
    margin: var(--s12) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s8);
  }
  .leaders__card {
    display: flex;
    flex-direction: column;
  }

  /* Fixed-ratio box keeps photo + img-placeholder cards the same height (AC#2). */
  .leaders__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface-800);
  }
  .leaders__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Initials + gold-dot overlay, centred on the img-placeholder frame. Decorative
     (aria-hidden) — the person's name is carried by the adjacent <h3>. */
  .leaders__initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45ch;
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-h2);
    color: var(--text-muted);
    letter-spacing: var(--track-display);
  }
  .leaders__initials-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    flex: none;
  }

  .leaders__name {
    margin: var(--s6) 0 0;
    font-size: var(--fs-h3);
  }
  .leaders__title {
    margin: var(--s2) 0 0;
    color: var(--text);
  }
  .leaders__location {
    margin: var(--s1) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-small);
  }

  @media (max-width: 767px) {
    .leaders__row {
      grid-template-columns: 1fr;
      gap: var(--s12);
    }
    .leaders__media {
      max-width: 320px;
    }
  }

/* ── Ported from src/components/Hero.astro (Astro <style>; :global() unwrapped) ── */

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;        /* fallback for browsers without svh */
    min-height: 100svh;
    overflow: hidden;
    background: var(--surface-1000);   /* dark stage when footage is absent */
  }

  /* Poster-first fallback layer (8.1.4): behind the videos in an identical box. */
  .hero__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  /* Cross-fade stack: all clips fill the stage; the active one fades in over the previous. */
  .hero__videos {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--dur-slow, 800ms) var(--ease-out, ease);
  }
  .hero__video.is-active {
    opacity: 1;
  }

  /* Bottom-up scrim — lifts headline legibility off the footage (.impeccable §5). */
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
  }

  /* Pause/play control (WCAG 2.2.2) — bottom-right, opposite the copy; keyboard-operable. */
  .hero__toggle {
    position: absolute;
    bottom: var(--s12);
    right: var(--gutter);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-1000) 55%, transparent);
    border: 1px solid var(--border);
    color: var(--text-strong);
    cursor: pointer;
    opacity: 0.72;
    backdrop-filter: blur(4px);
    transition: background-color var(--dur-micro) var(--ease-snap), opacity var(--dur-micro) var(--ease-snap);
  }
  .hero__toggle:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--surface-1000) 72%, transparent);
  }
  .hero__toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    opacity: 1;
  }
  .hero__toggle[hidden] {
    display: none;
  }
  .hero__toggle-icon {
    width: 15px;
    height: 15px;
    display: none;
  }
  .hero__toggle[data-state='playing'] .hero__toggle-icon--pause {
    display: block;
  }
  .hero__toggle[data-state='paused'] .hero__toggle-icon--play {
    display: block;
  }

  /* Editorial copy block, pinned bottom-left. */
  .hero__content {
    position: absolute;
    bottom: var(--s12);
    left: var(--gutter);
    right: var(--gutter);
    z-index: 2;
    max-width: 720px;
  }

  .hero__index {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s4);
  }

  .hero__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--gold);
    flex: none;
  }

  .hero__headline {
    /* .display supplies the expanded width (font-stretch:125% + --vfs-display) and --fs-hero. */
    color: var(--text-strong);
    margin: 0;
  }
  .hero__headline .hero__line {
    display: block;
  }

  .hero__subhead {
    margin-top: var(--s6);
    max-width: 52ch;
    color: var(--text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    margin-top: var(--s8);
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__video {
      transition: none;
    }
  }

  @media (max-width: 480px) {
    /* arrange L2: reserve the pause control's column so wrapped CTAs never run under it */
    .hero__content { right: calc(var(--gutter) + 56px); }
    .hero__toggle { bottom: var(--s6); }
  }

/* ── Ported from src/components/ManifestoBlock.astro (Astro <style>; :global() unwrapped) ── */

.manifesto {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--surface-900);
    padding-block: var(--section-py);
  }
  /* One soft warm bloom behind the statement so the manifesto sits in a lit room, not on flat black. */
  .manifesto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
      62% 60% at 22% 42%,
      color-mix(in oklab, var(--gold) 7%, transparent) 0%,
      transparent 64%
    );
  }
  /* Two columns, MIRRORED against the intro: the tall graded EV-charging frame (the "physical
     service stations" the copy names) holds the LEFT; the statement + supporting line sit on the
     RIGHT, still left-aligned within their block. The image/text swap (vs the intro's text-left/
     image-right) breaks the repeated right-column rhythm. DOM order stays text-then-figure so the
     heading is read first; CSS grid placement does the visual swap. Text centres against the image;
     stacks (text then image) on mobile. */
  .manifesto__grid {
    display: grid;
    grid-template-columns: 0.82fr 1fr;
    gap: clamp(var(--s12), 6vw, var(--s30));
    align-items: start;
  }
  .manifesto__text {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s6);
    min-width: 0;
  }
  .manifesto__figure {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    align-self: stretch;
  }
  .manifesto__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(380px, 44vw, 600px);
    object-fit: cover;
      }

  /* The opening line IS the display beat — oversized expanded Archivo, short and punchy (where the
     wide axis reads well). font-stretch:125% pairs with --vfs-display to force the wdth woff2. */
  .manifesto__lead {
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: var(--vfs-display);
    font-stretch: 125%;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--track-display);
    color: var(--text-strong);
    max-width: 11ch;
    text-wrap: balance;
  }
  /* Supporting paragraph — readable body, normal width, a comfortable measure. */
  .manifesto__body {
    margin: var(--s2) 0 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    max-width: 54ch;
  }

  @media (max-width: 991px) {
    .manifesto__grid {
      grid-template-columns: 1fr;
      gap: var(--s12);
    }
    /* Reset the desktop column swap so DOM order governs: text on top, image below. */
    .manifesto__text,
    .manifesto__figure {
      grid-column: auto;
      grid-row: auto;
    }
    .manifesto__img {
      min-height: 0;
      aspect-ratio: 4 / 3;
    }
  }

/* ── Ported from src/components/Motif.astro (Astro <style>; :global() unwrapped) ── */

.motif-mark {
    display: block;
  }

  /* Full-bleed tiling texture: anchored to the nearest positioned ancestor,
     never captures pointer events, sits below the content layer. */
  .motif-texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
  }

  .motif-texture svg {
    display: block;
    width: 100%;
    height: 100%;
  }

/* ── Ported from src/components/NameOrigin.astro (Astro <style>; :global() unwrapped) ── */

.name-origin {
    background: var(--surface-1000);
    /* Generous room above (the closer breathes off the leadership row); tighter below so the footer
       follows close behind rather than leaving a dead black band. */
    padding-block: clamp(var(--s16), 14vw, var(--s30)) var(--s12);
  }
  .name-origin__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .name-origin__eyebrow {
    margin: 0 0 var(--s6);
    font-family: var(--font-text);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-label);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* Etymology made visible: a real "o" cropped from the wordmark (so the letterform matches exactly),
     ghosted back and tucked in front of the canonical Yodo logo — the logo IS the "Yodo" inside
     "Oyodo" (the surname). Both glyphs are full-logo-height (164px) canvases, so rendering them at the
     same height baseline-aligns the ghost "o" to the logo's own letters automatically. */
  .name-origin__lockup {
    --lockup-h: clamp(1.875rem, 4.6vw, 3.5rem);
    display: flex;
    align-items: center;
    gap: clamp(0px, 0.15vw, 2px);
    margin: 0 0 calc(var(--s8) + var(--s2));
  }
  .name-origin__o {
    height: var(--lockup-h);
    width: auto;
    display: block;
    opacity: 0.2;
  }
  .name-origin__logo {
    height: var(--lockup-h);
    width: auto;
    display: block;
  }

  .name-origin__body {
    margin: 0;
    max-width: 46ch;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
  }

/* ── Ported from src/components/Nav.astro (Astro <style>; :global() unwrapped) ── */

.nav {
    position: fixed;
    /* Top offset clears the optional utility bar when present (--ubar-h set by BaseLayout); 0 otherwise. */
    inset: var(--ubar-h, 0px) 0 auto 0;
    z-index: 100;
    transition: height 250ms var(--ease-snap);
  }
  /* The scrolled background + blur live on this pseudo-element, NOT on .nav itself. backdrop-filter
     (like transform/filter) makes its element the containing block for any position:fixed descendant
     — and the mobile menu overlay is a fixed child of .nav. With the blur on .nav, the moment
     [data-scrolled] is set the full-screen overlay collapses into the ~56px bar (renders broken, the
     close control unreachable) — the "menu won't render/close when scrolled" bug. Keeping .nav
     filter-free leaves the overlay viewport-anchored at any scroll position; the bar's own
     background/hairline/blur is painted here instead. */
  .nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition:
      background-color 250ms var(--ease-snap),
      border-color 250ms var(--ease-snap),
      backdrop-filter 250ms var(--ease-snap);
  }
  /* Past ~80px of scroll: near-black, hairline (the slight shrink is handled by .nav__inner height). */
  .nav[data-scrolled]::before {
    background: color-mix(in srgb, var(--surface-900) 92%, transparent);
    border-bottom-color: var(--border);
    backdrop-filter: blur(8px);
  }

  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s6);
    height: 72px;
    transition: height 250ms var(--ease-snap);
  }
  .nav[data-scrolled] .nav__inner {
    height: 60px;
  }

  /* Yodo Group logo placeholder slot (img) — swap the SVG for the final logo. */
  .nav__logo-link {
    display: inline-flex;
    align-items: center;
    flex: none;
    position: relative;
    z-index: 95; /* keep the logo above the mobile overlay (z-90) when the menu is open */
  }
  .nav__logo {
    display: block;
    height: 26px;
    width: auto;
    transition: height 250ms var(--ease-snap);
  }
  .nav[data-scrolled] .nav__logo {
    height: 24px;
  }

  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--s8);
    margin-inline: auto;
  }
  .nav__link {
    font-size: var(--fs-small);
    font-variation-settings: "wght" 600, "wdth" 100;
    color: var(--text-muted);
    transition: color var(--dur-micro) var(--ease-snap);
  }
  .nav__link[aria-current='page'] { color: var(--text-strong); }
  .nav__overlay-link[aria-current='page'] { color: var(--gold); }
  .nav__link:hover {
    color: var(--text-strong);
  }

  .nav__cta {
    flex: none;
  }

  /* Hamburger — hidden on desktop; hidden entirely without JS (audit H-1). */
  .nav__toggle {
    display: none;
  }
  html.js .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 95;
    /* repaired 2026-09-11: orphaned declarations re-homed here; fix upstream in Nav.astro too */
  }
  @media (min-width: 992px) {
    html.js .nav__toggle {
      display: none;
    }
  }
    .nav__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin-inline: auto;
    background: var(--text);
    transition:
      transform var(--dur-micro) var(--ease-snap),
      opacity var(--dur-micro) var(--ease-snap);
  }

  .nav__overlay {
    display: none;
  }

  /* ── Below ~992px: collapse to hamburger + full-screen overlay ──
     The collapse is gated behind html.js: without JS the mobile visitor gets the
     plain link list (audit H-1 — nav must not depend on JS to be reachable). */
  @media (max-width: 991px) {
    html.js .nav__links,
    html.js .nav__cta {
      display: none;
    }
    .nav__toggle {
      display: flex;
    }
    .nav__inner {
      height: 56px;
    }
    .nav[data-scrolled] .nav__inner {
      height: 56px;
    }

    .nav__overlay {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--s8);
      background: var(--surface-1000);
      opacity: 0;
      visibility: hidden;
      transition:
        opacity var(--dur) var(--ease-out),
        visibility var(--dur) var(--ease-out);
    }
    .nav[data-open] .nav__overlay {
      opacity: 1;
      visibility: visible;
    }
    .nav__overlay[hidden] {
      display: flex; /* keep transitionable; visibility handles hiding */
    }

    .nav__overlay-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--s6);
    }
    .nav__overlay-link {
      font-family: var(--font-display);
      font-variation-settings: "wght" 600, "wdth" 100;
      font-size: var(--fs-h3);
      color: var(--text-strong);
    }
    .nav__overlay-link:hover {
      color: var(--gold);
    }

    /* Hamburger -> X when open. */
    .nav[data-open] .nav__toggle-bar:nth-child(1) {
      transform: translateY(3.5px) rotate(45deg);
    }
    .nav[data-open] .nav__toggle-bar:nth-child(2) {
      transform: translateY(-3.5px) rotate(-45deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav,
    .nav__inner,
    .nav__logo,
    .nav__link,
    .nav__toggle-bar,
    .nav__overlay {
      transition: none;
    }
  }

/* ── Ported from src/components/SectionHeader.astro (Astro <style>; :global() unwrapped) ── */

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s6);
  }

  .section-header__lead {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
  }

  .section-header__title {
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "wdth" 100;
    color: var(--text-strong);
    margin: 0;
  }

  .section-header__more {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    flex: none;
    font-size: var(--fs-small);
    font-variation-settings: "wght" 600, "wdth" 100;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-micro) var(--ease-snap);
  }
  .section-header__more:hover {
    color: var(--text-strong);
  }
  .section-header__arrow {
    color: var(--gold);
    transition: transform var(--dur-micro) var(--ease-snap);
  }
  .section-header__more:hover .section-header__arrow {
    transform: translateX(4px);
  }

  @media (max-width: 480px) {
    .section-header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--s4);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .section-header__arrow {
      transition: none;
    }
    .section-header__more:hover .section-header__arrow {
      transform: none;
    }
  }

/* ── Ported from src/components/StatsTicker.astro (Astro <style>; :global() unwrapped) ── */

.proof__line {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .proof {
    position: relative;
    background: var(--surface-800);
    overflow: hidden;
  }
  /* Faint dot-grid texture (the same vocabulary as the company motifs), masked to fade at the edges. */
  .proof::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: radial-gradient(circle at 1px 1px, rgba(245, 243, 244, 0.06) 1px, transparent 0);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(120% 140% at 50% 50%, #000 40%, transparent 85%);
    mask-image: radial-gradient(120% 140% at 50% 50%, #000 40%, transparent 85%);
  }

  .proof__list {
    position: relative;
    list-style: none;
    margin: 0;
    padding-block: var(--s8);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  /* The cross-border line, through the vertical centre of the row. */
  .proof__list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--border);
  }

  /* Each stat is a station. The number, node and label all anchor to the stat's vertical CENTRE so
     the node sits EXACTLY on the line — the line + travelling pulse are at the list's 50%, which
     equals each stat's 50% (the stats fill the row, padding is symmetric). Anchoring to the centre
     (rather than a flow/grid layout) means the tall number can never push the node off the line.
     The children are all absolutely positioned, so min-height defines the band. */
  .proof__stat {
    position: relative;
    min-height: 172px;
    text-align: center;
  }
  .proof__num {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50%;
    margin-bottom: var(--s6);
    font-family: var(--font-display);
    font-variation-settings: var(--vfs-display);
    font-stretch: 125%;
    font-size: var(--fs-statement);
    line-height: var(--lh-display);
    letter-spacing: var(--track-display);
    color: var(--gold);
    font-variant-numeric: tabular-nums;
  }
  /* Trailing unit recedes so the core figure leads. */
  .proof__unit {
    font-variation-settings: "wght" 500, "wdth" 100; /* font-weight is inert inside a wght-variation context */
    font-stretch: 100%;
    font-size: 0.6em;
  }
  .proof__node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    background: var(--surface-800);
    border: 1.5px solid var(--gold);
    z-index: 1;
  }
  .proof__label {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: var(--s6);
    margin-inline: auto;
    max-width: 18ch;
    font-size: var(--fs-small);
    line-height: var(--lh-snug);
    color: var(--text-muted);
  }

  /* Line end-caps + the travelling pulse (the route reaching past the first/last station). */
  .proof__cap {
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--gold);
    transform: translateY(-50%);
    z-index: 1;
  }
  .proof__cap--start { left: 0; }
  .proof__cap--end { right: 0; }
  .proof__pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--gold);
    box-shadow: 0 0 9px rgba(206, 198, 11, 0.85);
    transform: translate(-50%, -50%);
    animation: proof-pulse 7s linear infinite;
    z-index: 1;
  }
  @keyframes proof-pulse {
    from { left: 0; }
    to { left: 100%; }
  }

  /* Mobile: drop the line, re-flow to a clean 2x2 grid of figures (the stations are a desktop
     flourish). The pieces revert from centre-anchored absolute to normal column flow. */
  @media (max-width: 767px) {
    .proof__list {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--s8) var(--s6);
    }
    .proof__list::before { display: none; }
    .proof__node,
    .proof__cap,
    .proof__pulse { display: none; }
    .proof__stat {
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--s2);
    }
    .proof__num,
    .proof__label {
      position: static;
      margin: 0;
      max-width: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .proof__pulse { animation: none; opacity: 0; }
  }

/* ── Ported from src/components/StatusTag.astro (Astro <style>; :global() unwrapped) ── */

.status-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s3);
    background: var(--surface-800);
    border-radius: var(--radius-pill);
    font-size: var(--fs-label);
    font-variation-settings: "wght" 600, "wdth" 100;
    letter-spacing: var(--track-micro);
    color: var(--text-muted);
    white-space: nowrap;
  }

  .status-tag__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    flex: none;
  }

  /* Live: in-market — solid gold punctuation. */
  .status-tag--live .status-tag__dot {
    background: var(--gold);
  }

  /* Beta: partial — gold ring, hollow centre. */
  .status-tag--beta .status-tag__dot {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--gold);
  }

  /* Soon: not yet — muted (default dot). */

/* ── Ported from src/components/UtilityBar.astro (Astro <style>; :global() unwrapped) ── */

.ubar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 101; /* above the nav (z-index 100) */
    height: var(--ubar-h, 38px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6ch;
    padding-inline: var(--gutter);
    background: var(--surface-1000);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-small);
    transition: color var(--dur-micro) var(--ease-snap);
  }
  .ubar:hover {
    color: var(--text-strong);
  }
  .ubar__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    flex: none;
  }
  .ubar__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (prefers-reduced-motion: reduce) {
    .ubar {
      transition: none;
    }
  }

/* ── Ported from src/components/WhereWeOperate.astro (Astro <style>; :global() unwrapped) ── */

.operate {
    background: var(--surface-1000);
    padding-block: var(--section-py);
  }
  .operate__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
  }

  .operate__display {
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-display);
    color: var(--text-strong);
    max-width: 24ch;
  }

  /* Two tall graded cards: side-by-side on desktop, stacked on mobile. Imagery carries the section. */
  .operate__cities {
    list-style: none;
    margin: var(--s4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--s8);
  }
  .operate__card {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
  }

  .operate__media {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface-900);
  }
  .operate__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur) var(--ease-out);
  }
  /* Bottom scrim so the overlaid label stays legible on the graded photo. */
  .operate__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 46%);
    pointer-events: none;
  }
  .operate__card:hover .operate__img,
  .operate__card:focus-within .operate__img {
    transform: scale(1.03);
  }

  .operate__label {
    position: absolute;
    left: var(--s6);
    bottom: var(--s4);
    z-index: 1;
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: var(--track-display);
    color: var(--text-strong);
  }

  .operate__body {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-muted);
    max-width: 38ch;
  }

  @media (min-width: 768px) {
    .operate__cities {
      grid-template-columns: 1fr 1fr;
      gap: var(--s12);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .operate__img {
      transition: none;
    }
    .operate__card:hover .operate__img,
    .operate__card:focus-within .operate__img {
      transform: none;
    }
  }

/* ── Ported from src/layouts/BaseLayout.astro (Astro <style>; :global() unwrapped) ── */

/* <main> hosts the full-bleed Motif texture (z-index:-1), so it must be positioned. */
  .shell-main {
    position: relative;
  }
  /* <main> takes tabindex="-1" so the skip-link can move focus here (WCAG 2.4.1). It is a
     non-interactive container, so suppress the global :focus-visible gold outline — the user
     asked to jump TO the content, not to ring the whole page. Screen-reader focus still lands. */
  .shell-main:focus {
    outline: none;
  }
  /* Interior pages: clear the fixed nav (72px desktop -> 56px below ~992px), plus the optional
     utility bar height (--ubar-h, 0 when the bar is absent). */
  .shell-main--pad {
    padding-top: calc(72px + var(--ubar-h, 0px));
  }
  @media (max-width: 991px) {
    .shell-main--pad {
      padding-top: calc(56px + var(--ubar-h, 0px));
    }
  }

/* ── Ported from src/layouts/GuideLayout.astro (Astro <style>; :global() unwrapped) ── */

/* Readable single column on a deep-black stage. */
  .gwrap {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding-inline: clamp(20px, 6vw, 40px);
  }

  body {
    background: var(--surface-1000);
  }

  /* Slim brand bar — tonal, no border; the wordmark is the type-based mark + gold dot. */
  .gtop {
    background: var(--surface-900);
  }
  .gtop__inner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s4);
    padding-block: calc(var(--s4) + var(--s1));
  }
  .gmark {
    font-family: var(--font-display);
    font-variation-settings: var(--vfs-display);
    font-stretch: 125%;
    font-size: var(--fs-small);
    letter-spacing: var(--track-label);
    color: var(--text-strong);
    white-space: nowrap;
  }
  .gmark__dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 4px;
    border-radius: var(--radius-pill);
    background: var(--gold);
    vertical-align: middle;
  }
  .gkicker {
    font-size: var(--fs-label);
    font-variation-settings: "wght" 600, "wdth" 100;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .gmain {
    padding-block: clamp(40px, 9vw, 80px) clamp(48px, 10vw, 96px);
  }
  .gmain:focus {
    outline: none;
  }

  /* Tonal sign-off — no border, one step up from the page base. */
  .gfoot {
    background: var(--surface-900);
    padding-block: var(--s8);
  }
  .gfoot p {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--text-muted);
  }

/* ── Ported from src/layouts/GuideLayout.astro (Astro <style>; :global() unwrapped) ── */

/* Article typography — scoped under .garticle so it never leaks to the main site.
     Slotted page content renders in the page's scope, so it must be styled globally. */
  .garticle > .eyebrow-line {
    margin: 0 0 var(--s4);
    font-size: var(--fs-label);
    font-variation-settings: "wght" 600, "wdth" 100;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--gold);
  }
  .garticle h1 {
    margin: 0 0 var(--s6);
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-display);
    color: var(--text-strong);
    text-wrap: balance;
  }
  .garticle h2 {
    margin: var(--s12) 0 var(--s4);
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-display);
    color: var(--text-strong);
    text-wrap: balance;
  }
  .garticle .lede {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
  }
  .garticle p {
    margin: 0 0 calc(var(--s4) + var(--s1));
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-muted);
    max-width: 62ch;
  }
  .garticle a {
    color: var(--text-strong);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  .garticle strong {
    color: var(--text-strong);
    font-variation-settings: "wght" 600, "wdth" 100;
  }
  .garticle code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--surface-800);
    color: var(--text-strong);
    font-size: 0.92em;
  }

  /* Numbered steps — gold counter is the punctuation, hanging in the left margin. */
  .garticle ol.steps {
    counter-reset: step;
    list-style: none;
    margin: 0 0 var(--s6);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s4);
  }
  .garticle ol.steps > li {
    position: relative;
    padding-left: calc(var(--s8) + var(--s2));
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    max-width: 62ch;
  }
  .garticle ol.steps > li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--s6) + var(--s1));
    height: calc(var(--s6) + var(--s1));
    border-radius: var(--radius-pill);
    background: var(--surface-800);
    color: var(--gold);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-small);
  }
  .garticle ol.steps code,
  .garticle ul code {
    white-space: nowrap;
  }

  /* Plain bullet list. */
  .garticle ul {
    margin: 0 0 var(--s6);
    padding-left: calc(var(--s4) + var(--s1));
    list-style: disc;
  }
  .garticle ul > li {
    margin-bottom: var(--s2);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-muted);
    max-width: 60ch;
  }
  .garticle ul > li::marker {
    color: var(--gold);
  }

  /* Tonal callouts — no borders (design law); a surface step + a small gold heading dot. */
  .garticle .panel {
    margin: 0 0 var(--s6);
    padding: var(--s6);
    border-radius: var(--radius);
    background: var(--surface-800);
  }
  .garticle .panel h2 {
    margin-top: 0;
  }
  .garticle .panel > :last-child {
    margin-bottom: 0;
  }
  .garticle .panel p {
    color: var(--text);
  }

  /* Responsive content table (what-you-can-edit). Stacks to label/value rows on small screens. */
  .garticle .gtable {
    width: 100%;
    margin: 0 0 var(--s6);
    border-collapse: collapse;
    font-size: var(--fs-small);
  }
  .garticle .gtable th,
  .garticle .gtable td {
    padding: var(--s3) var(--s4);
    text-align: left;
    vertical-align: top;
    line-height: var(--lh-body);
  }
  .garticle .gtable thead th {
    color: var(--text-muted);
    font-variation-settings: "wght" 600, "wdth" 100;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-size: var(--fs-label);
  }
  .garticle .gtable tbody tr {
    background: var(--surface-900);
  }
  .garticle .gtable tbody tr:nth-child(even) {
    background: var(--surface-800);
  }
  .garticle .gtable td:first-child {
    color: var(--text-strong);
    font-variation-settings: "wght" 600, "wdth" 100;
    white-space: nowrap;
  }
  .garticle .gtable td:last-child {
    color: var(--text-muted);
  }

  @media (max-width: 560px) {
    /* Collapse the table into stacked label/value blocks so nothing is cramped on a phone. */
    .garticle .gtable,
    .garticle .gtable tbody,
    .garticle .gtable tr,
    .garticle .gtable td {
      display: block;
      width: 100%;
    }
    .garticle .gtable thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }
    .garticle .gtable tbody tr {
      margin-bottom: var(--s3);
      border-radius: var(--radius);
      padding: var(--s2);
    }
    .garticle .gtable td:first-child {
      white-space: normal;
      padding-bottom: var(--s1);
    }
  }

/* ── Ported from src/pages/404.astro (Astro <style>; :global() unwrapped) ── */

.error {
    background: var(--surface-1000);
    min-height: 70svh;
    display: flex;
    align-items: center;
    padding-block: var(--s20) var(--s16);
  }
  .error__inner {
    max-width: 52ch;
  }

  /* Oversized numeral — hero scale, display family at normal width (not expanded). */
  .error__code {
    margin: var(--s6) 0 0;
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-hero);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-display);
    color: var(--gold);
  }
  .error__title {
    margin: var(--s2) 0 0;
  }
  .error__body {
    margin: var(--s4) 0 0;
    max-width: 42ch;
    color: var(--text-muted);
  }
  .error__action {
    margin-top: var(--s8);
  }

  @media (max-width: 991px) {
    .error {
      padding-block: var(--s16) var(--s12);
    }
  }

/* ── Ported from src/pages/about.astro (Astro <style>; :global() unwrapped) ── */

/* Establishing band — deep black opener with one soft warm bloom so the page doesn't open on a
     flat-black wall of text. The hierarchy (title -> bright lead -> muted body) does the rest. */
  .about-intro {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--surface-1000);
    padding-block: var(--section-py) calc(var(--section-py) * 0.66);
  }
  .about-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
      70% 58% at 12% 10%,
      color-mix(in oklab, var(--gold) 6%, transparent) 0%,
      transparent 62%
    );
  }
  /* Two columns: the narrative holds the left; a tall graded port frame (cross-border trade) fills
     the right so the opener reads as a composed spread, not a column of text floating in black.
     The image fills the row height and the text centres against it; stacks under the text on mobile. */
  .about-intro__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(var(--s12), 6vw, var(--s30));
    align-items: stretch;
  }
  .about-intro__text {
    min-width: 0;
    align-self: center;
  }
  .about-intro__figure {
    margin: 0;
    align-self: stretch;
  }
  .about-intro__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(380px, 44vw, 600px);
    object-fit: cover;
      }
  .about-intro__title {
    margin: 0;
    max-width: 18ch;
  }
  .about-intro__lede {
    margin-top: var(--s12);
  }
  /* First paragraph = the lead: brighter and larger, the thesis that owns the opener. */
  .about-intro__lede p:first-of-type {
    margin: 0;
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    color: var(--text);
    max-width: 34ch;
  }
  /* Supporting paragraphs = muted body on a wider measure (the stagger creates editorial asymmetry). */
  .about-intro__lede p:not(:first-of-type) {
    margin: var(--s8) 0 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-muted);
    max-width: 58ch;
  }

  @media (max-width: 991px) {
    .about-intro {
      /* --section-py clamp handles mobile scaling */
    }
    .about-intro__grid {
      grid-template-columns: 1fr;
      gap: var(--s12);
    }
    .about-intro__text {
      align-self: start;
    }
    .about-intro__img {
      min-height: 0;
      aspect-ratio: 4 / 3;
    }
    .about-intro__lede {
      margin-top: var(--s8);
    }
  }

/* ── Ported from src/pages/companies.astro (Astro <style>; :global() unwrapped) ── */

.hub {
    background: var(--surface-1000);
    padding-block: var(--section-py) calc(var(--section-py) / 2);
  }
  .hub__head {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    max-width: 54ch;
    margin-bottom: var(--s16);
  }
  .hub__title {
    margin: 0;
  }
  .hub__lead {
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    color: var(--text);
  }

  /* Full-bleed chapters — each band spans the viewport; the image touches the outer edge. */
  .hub__chapters {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .hub__chapter + .hub__chapter {
    border-top: 1px solid var(--border);
  }
  .chapter__link {
    display: flex;
    align-items: stretch;
    min-height: clamp(420px, 50vw, 640px);
    text-decoration: none;
    color: inherit;
  }
  /* Odd chapters mirror: image moves to the right, body to the left. */
  .hub__chapter[data-flip='true'] .chapter__link {
    flex-direction: row-reverse;
  }

  .chapter__media {
    flex: 1 1 50%;
    margin: 0;
    overflow: clip;
  }
  .chapter__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur) var(--ease-out);
  }
  .chapter__link:hover .chapter__img,
  .chapter__link:focus-visible .chapter__img {
    transform: scale(1.03);
  }

  .chapter__body {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s4);
    /* Inset the text from the outer edge and the centre seam; cap the measure so it doesn't sprawl. */
    padding: var(--s12) clamp(var(--s6), 5vw, var(--s20));
  }
  .chapter__num {
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    letter-spacing: var(--track-label);
    margin-bottom: calc(var(--s2) * -1); /* pulls the numeral into the name's optical top (arrange M5) */
    color: var(--gold);
  }
  .chapter__name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s4);
  }
  /* Bold display at NORMAL width — the expanded (wdth 125) axis stays reserved for hero + manifesto. */
  .chapter__name {
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-statement);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-display);
    color: var(--text-strong);
  }
  .chapter__status {
    transform: translateY(-0.15em);
  }
  .chapter__oneliner {
    margin: 0;
    max-width: 42ch;
    color: var(--text-muted);
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
  }
  .chapter__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s2);
    font-size: var(--fs-label);
    font-variation-settings: "wght" 600, "wdth" 100;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text);
  }
  .chapter__cta-arrow {
    transition: transform var(--dur) var(--ease-snap), color var(--dur) var(--ease-snap);
  }
  .chapter__link:hover .chapter__cta-arrow,
  .chapter__link:focus-visible .chapter__cta-arrow {
    color: var(--gold);
    transform: translateX(6px);
  }
  .chapter__link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -4px;
  }

  @media (max-width: 991px) {
    /* Stack: image on top, body below — in normal source order regardless of flip. */
    .chapter__link,
    .hub__chapter[data-flip='true'] .chapter__link {
      flex-direction: column;
      min-height: 0;
    }
    .chapter__media {
      flex: none;
      width: 100%;
      aspect-ratio: 16 / 10;
    }
    .chapter__body {
      flex: none;
      padding: var(--s8) var(--s6) var(--s12);
    }
    .chapter__oneliner {
      font-size: var(--fs-body);
      line-height: var(--lh-body);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .chapter__img,
    .chapter__cta-arrow {
      transition: none;
    }
    .chapter__link:hover .chapter__img,
    .chapter__link:focus-visible .chapter__img {
      transform: none;
    }
  }

/* ── Ported from src/pages/companies/[slug].astro (Astro <style>; :global() unwrapped) ── */

.cpage { background: var(--surface-1000); }

  /* ── Hero: full-bleed graded company frame (the same image-world as the hub chapter, for a
     seamless hub→sub-page hand-off), copy anchored bottom-left over a darkening scrim. ── */
  .cpage__hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: flex;
    align-items: flex-end;
    min-height: clamp(480px, 74vh, 760px);
  }
  .cpage__hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* Scrim: darken the bottom (under the copy, and into the page below) plus a gentle left wash,
     so white copy clears contrast over any frame and the band fuses with the section beneath. */
  .cpage__hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top, var(--surface-1000) 4%, color-mix(in oklab, var(--surface-1000) 72%, transparent) 34%, transparent 72%),
      linear-gradient(to right, color-mix(in oklab, var(--surface-1000) 78%, transparent) 0%, transparent 64%);
  }
  .cpage__hero-inner {
    width: 100%;
    padding-block: var(--s16) var(--s12);
  }
  .cpage__hero-copy { max-width: 640px; }
  .cpage__back {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--fs-small);
    font-variation-settings: "wght" 600, "wdth" 100;
    color: var(--text-muted);
    transition: color var(--dur-micro) var(--ease-snap);
  }
  .cpage__back:hover { color: var(--gold); }
  .cpage__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s4);
    margin-top: var(--s6);
  }
  .cpage__title { margin: 0; color: var(--text-strong); font-size: var(--fs-h1); }
  .cpage__status { transform: translateY(-0.2em); }
  .cpage__oneliner {
    margin-top: var(--s6);
    max-width: 34ch;
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    color: var(--text);
  }
  .cpage__supporting {
    margin-top: var(--s4);
    max-width: 54ch;
    color: var(--text-muted);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .cpage__cta { margin-top: var(--s8); }

  /* ── Sections ── */
  .cpage__section { padding-block: var(--section-py); }
  .cpage__section.is-alt { background: var(--surface-900); }
  .cpage__section-head { margin-bottom: var(--s8); }

  .cpage__prose {
    max-width: 60ch;
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    color: var(--text);
  }

  /* cards */
  .cpage__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
  @media (min-width: 768px) {
    .cpage__cards { grid-template-columns: repeat(3, 1fr); }
  }
  .cpage__card {
    padding: var(--s6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-800);
  }
  .cpage__card-title {
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-h3);
    color: var(--text-strong);
    margin: 0 0 var(--s3);
  }
  .cpage__card-body { margin: 0; color: var(--text-muted); line-height: var(--lh-body); }

  /* steps */
  .cpage__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s8);
    counter-reset: none;
  }
  @media (min-width: 768px) {
    .cpage__steps { grid-template-columns: repeat(4, 1fr); gap: var(--s6); }
  }
  .cpage__step { display: flex; flex-direction: column; gap: var(--s3); }
  .cpage__step-num {
    font-family: var(--font-display);
    font-variation-settings: var(--vfs-display);
    font-stretch: 125%;
    font-size: var(--fs-h2);
    color: var(--gold);
    line-height: 1;
  }
  .cpage__step-title {
    font-size: var(--fs-h3);
    color: var(--text-strong);
    margin: 0;
    font-variation-settings: "wght" 600, "wdth" 100;
    font-family: var(--font-display);
  }
  .cpage__step-body { margin: 0; color: var(--text-muted); line-height: var(--lh-body); }

  /* list / chips */
  .cpage__list-lead { max-width: 52ch; color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 var(--s6); }
  .cpage__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); }
  .cpage__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    color: var(--text);
  }
  .cpage__chip-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--gold); flex: none; }

  /* people */
  .cpage__people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s6); }
  @media (min-width: 768px) { .cpage__people { grid-template-columns: repeat(3, 1fr); } }
  .cpage__person { display: flex; flex-direction: column; gap: var(--s1); padding-top: var(--s4); border-top: 1px solid var(--border); }
  .cpage__person-name { font-size: var(--fs-h3); color: var(--text-strong); font-family: var(--font-display); font-variation-settings: "wght" 600, "wdth" 100; }
  .cpage__person-role { color: var(--text-muted); font-size: var(--fs-small); }

  /* ── Outro ── */
  .cpage__outro { padding-block: var(--section-py); border-top: 1px solid var(--border); }
  .cpage__outro-inner { display: flex; flex-direction: column; gap: var(--s6); align-items: flex-start; }
  .cpage__outro-lead {
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: var(--fs-h2);
    color: var(--text-strong);
    margin: 0;
  }
  .cpage__outro-ctas { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

  /* ── Responsive ── */
  @media (max-width: 991px) {
    .cpage__hero { min-height: clamp(420px, 70vh, 620px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .cpage__back { transition: none; }
  }

/* ── Ported from src/pages/contact.astro (Astro <style>; :global() unwrapped) ── */

.contact {
    background: var(--surface-1000);
    padding-block: var(--section-py); /* F5: match site section rhythm */
  }

  .contact__head {
    max-width: 52ch;
  }
  .contact__title {
    margin: 0;
  }
  .contact__lead {
    margin-top: var(--s6);
    color: var(--text-muted);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  /* Asymmetric two-column: form gets the larger measure, details the narrower rail. */
  .contact__grid {
    margin-top: var(--s16);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--s16);
    align-items: start;
  }

  .contact__details {
    display: flex;
    flex-direction: column;
    gap: var(--s8);
    padding-top: var(--s2);
  }

  .detail {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }
  .detail__value {
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    color: var(--text-strong);
  }
  a.detail__value {
    transition: color var(--dur-micro) var(--ease-snap);
  }
  a.detail__value:hover {
    color: var(--gold);
  }
  .detail__note {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
  }

  /* Offices — both locations shown EQUALLY (same size), each clearly labelled, so the
     Nigeria <-> China split reads at a glance instead of one office dominating the other. */
  .offices {
    display: flex;
    flex-direction: column;
    gap: var(--s6);
  }
  /* Critique C3: the two offices are the strongest trust facts — compose them as
     paired panels bridged by the gold ⇄ mark on wide screens. */
  .offices__bridge {
    align-self: flex-start;
    color: var(--gold);
    font-size: var(--fs-h3);
    line-height: 1;
    padding-inline: var(--s1);
  }
  @media (min-width: 992px) {
    .offices {
      flex-direction: row;
      align-items: stretch;
      gap: var(--s3);
    }
    .office {
      flex: 1;
      background: var(--surface-800);
      border-radius: var(--radius);
      padding: var(--s6);
    }
    .offices__bridge {
      align-self: center;
      font-size: var(--fs-h2);
    }
  }
  .office {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
  }
  .office__loc {
    font-size: var(--fs-label);
    font-variation-settings: "wght" 600, "wdth" 100;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .office__addr {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
  }

  /* Stack on tablet/mobile — both columns read independently. */
  @media (max-width: 991px) {
    .contact {
      padding-block: var(--s16) var(--s12);
    }
    .contact__grid {
      margin-top: var(--s12);
      grid-template-columns: 1fr;
      gap: var(--s12);
    }
  }

/* ── Ported from src/pages/privacy.astro (Astro <style>; :global() unwrapped) ── */

.privacy {
    background: var(--surface-1000);
    padding-block: var(--s20) var(--s16);
  }

  /* Header band — eyebrow, title, updated date. Left-anchored. */
  .privacy__head {
    max-width: 62ch;
  }
  .privacy__title {
    /* Eyebrow->heading gap matches the site-wide SectionHeader rhythm (--s3 / 12px). (bead 11.1) */
    margin: var(--s3) 0 0;
    max-width: 16ch;
  }
  .privacy__meta {
    margin: var(--s4) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-small);
  }

  /* Single readable measure for the policy body. */
  .privacy__prose {
    margin-top: var(--s12);
    max-width: 62ch;
    color: var(--text);
  }

  /* Section headings inherit the global display family; just space them. */
  .privacy__prose h2 {
    margin-top: var(--s12);
    margin-bottom: var(--s4);
  }
  .privacy__prose h3 {
    margin-top: var(--s8);
    margin-bottom: var(--s3);
  }

  .privacy__prose p {
    margin: 0;
  }
  .privacy__prose p + p {
    margin-top: var(--s4);
  }

  /* Lists — restrained, left rule rather than bullets. */
  .privacy__prose ul {
    margin: var(--s4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--s3);
  }
  .privacy__prose li {
    padding-left: var(--s4);
    border-left: 2px solid var(--border);
  }
  .privacy__prose li strong {
    color: var(--text-strong);
  }

  /* Inline links — gold, underlined on the accent only. */
  .privacy__prose a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: color var(--dur-micro) var(--ease-snap);
  }
  .privacy__prose a:hover {
    color: var(--gold-bright);
  }

  /* The legal disclaimer — gold-keyed callout panel, no border. */
  .privacy__prose blockquote {
    margin: 0 0 var(--s8);
    padding: var(--s6);
    background: var(--surface-800);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    color: var(--text-muted);
  }
  .privacy__prose blockquote p {
    margin: 0;
  }
  .privacy__prose blockquote strong {
    color: var(--text-strong);
  }

  @media (max-width: 991px) {
    .privacy {
      padding-block: var(--s16) var(--s12);
    }
    .privacy__prose {
      margin-top: var(--s8);
    }
  }

/* ── Ported from src/pages/thank-you.astro (Astro <style>; :global() unwrapped) ── */

.thanks {
    background: var(--surface-1000);
    padding-block: var(--s20) var(--s16);
  }
  .thanks__title {
    margin: 0;
    max-width: 18ch;
  }
  .thanks__lead {
    margin-top: var(--s6);
    max-width: 52ch;
    color: var(--text-muted);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .thanks__back {
    margin-top: var(--s12);
  }

  @media (max-width: 991px) {
    .thanks {
      padding-block: var(--s16) var(--s12);
    }
  }