/* =============================================================================
   TERRA-TECH — SITE STYLESHEET
   One file, linked by every page. Requires assets/tokens.css to be loaded first;
   every value below is a var() from it, so there is no hex here at all.

   Section references (§) point at ../Requirement.md.
   Layout §6 · type §5 · colour §4 · motion §10 · accessibility §12
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--text-primary);
  font-family: var(--f-ui);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  font-synthesis-weight: none;
}

h1, h2, h3, h4 { margin: 0 0 24px; text-wrap: balance; }
p  { margin: 0 0 24px; }
ul, ol { margin: 0 0 24px; padding-left: 24px; }
li { margin-bottom: 12px; }
img { max-width: 100%; height: auto; }
svg { display: block; max-width: 100%; height: auto; }

/* --- Type scale, desktop (§5.2) -------------------------------------- */

.display { font-family: var(--f-display); font-size: 64px; line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; }
h1, .h1  { font-family: var(--f-display); font-size: 52px; line-height: 1.10; font-weight: 400; letter-spacing: -0.02em; }
h2, .h2  { font-family: var(--f-display); font-size: 40px; line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; color: var(--navy-600); }
h3, .h3  { font-family: var(--f-ui); font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
h4, .h4  { font-family: var(--f-ui); font-size: 20px; line-height: 1.35; font-weight: 600; }
.lead    { font-size: 20px; line-height: 1.55; font-weight: 400; }
.small   { font-size: 14px; line-height: 1.55; }
.metric  { font-size: 48px; line-height: 1.0; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--navy-600); }

h1, .h1, .display { color: var(--navy-600); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4,
.band--ink  h1, .band--ink  h2, .band--ink  h3, .band--ink  h4,
.band--dark .h1, .band--dark .h2, .band--ink .h1, .band--ink .h2,
.band--dark .metric, .band--ink .metric { color: var(--text-inverse); }

.measure { max-width: 68ch; }   /* §5.4 — body copy never exceeds 68ch */

/* --- Eyebrow: the signature 2px amber rule (§5.4) --------------------- */

.eyebrow {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px; line-height: 1.4; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 32px;
}
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }

/* --- Container and grid (§6) ----------------------------------------- */

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }

.c3  { grid-column: span 3; }
.c4  { grid-column: span 4; }
.c5  { grid-column: span 5; }
.c6  { grid-column: span 6; }
.c7  { grid-column: span 7; }
.c8  { grid-column: span 8; }
.c12 { grid-column: span 12; }
.offset2 { grid-column: 3 / span 8; }

/* --- Band rhythm (§4.5) ---------------------------------------------- */

.band          { padding: var(--section-y) 0; }
.band--white   { background: var(--white); }
.band--surface { background: var(--grey-100); }
.band--dark    { background: var(--navy-600); color: var(--text-inverse); }
.band--ink     { background: var(--navy-900); color: var(--text-inverse); }
.band--tight   { padding: 96px 0; }

/* On inverse bands the eyebrow label lightens; the amber rule does not —
   amber on navy is a non-text mark and stays the accent (§4.3). */
.band--dark .eyebrow, .band--ink .eyebrow { color: var(--navy-200); }
.band--dark .txt-secondary, .band--ink .txt-secondary { color: var(--navy-200); }
.txt-secondary { color: var(--text-secondary); }
.txt-accent    { color: var(--accent-text); }   /* amber-600 — never amber-500 on light */

/* --- Links and buttons ------------------------------------------------ */

a { color: var(--navy-900); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
/* Buttons are excluded: `.band--ink a` is more specific than `.btn--inverse`,
   so without :not(.btn) it repainted the inverse button white on white. */
.band--dark a:not(.btn), .band--ink a:not(.btn) { color: var(--white); }

/* §12 — focus rings are never removed. 2px amber, 2px offset. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* §4.3 — the primary CTA is navy-filled with white text, not amber. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 28px;
  font-family: var(--f-ui); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer;
  background: var(--navy-600); color: var(--white);
  transition: background var(--duration-fast) var(--ease-out);
}
.btn:hover { background: var(--navy-700); }
.btn--ghost { background: transparent; color: var(--navy-600); border-color: var(--navy-600); }
.btn--ghost:hover { background: var(--navy-050); }
.btn--inverse { background: var(--white); color: var(--navy-900); }
.btn--inverse:hover { background: var(--navy-050); }
/* Amber fill exists, but only ever with navy-900 text. White on amber is
   2.61:1 and is prohibited (§4.3). */
.btn--accent { background: var(--amber-500); color: var(--navy-900); }
.btn--accent:hover { background: var(--amber-300); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 16px; text-decoration: none;
  color: var(--navy-600); min-height: 44px;
}
.arrow-link::after { content: "\2192"; transition: transform var(--duration-fast) var(--ease-out); }
.arrow-link:hover::after { transform: translateX(4px); }
.band--dark .arrow-link, .band--ink .arrow-link { color: var(--white); }

/* --- Cards (§6.2 — borders, not shadows) ------------------------------ */

.card {
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--card-pad);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card--rule-top { border-top: 2px solid var(--accent); }
.card > :last-child, .callout > :last-child { margin-bottom: 0; }

.callout {
  background: var(--accent-fill);
  border-left: 2px solid var(--accent);
  padding: var(--card-pad);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.tag {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border-default); background: var(--white);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-secondary);
}

.rule { border: 0; border-top: 1px solid var(--border-default); margin: 48px 0; }
.rule--accent { border: 0; border-top: 2px solid var(--accent); width: 64px; margin: 32px 0; }

/* --- Placeholders for client-supplied assets (§14) --------------------- */

.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--navy-050); border: 1px dashed var(--navy-400); border-radius: var(--r-md);
  padding: 24px; color: var(--grey-500);
  font-family: var(--f-mono); font-size: 12px; line-height: 1.5;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--4x5  { aspect-ratio: 4 / 5; }
.ph--sq   { aspect-ratio: 1 / 1; }
.ph--strip { min-height: 88px; }
.band--dark .ph, .band--ink .ph {
  background: rgba(255, 255, 255, 0.06); border-color: var(--navy-200); color: var(--navy-200);
}

/* --- Skip link (§12) --------------------------------------------------- */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy-900); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; text-decoration: none;
}
.skip:focus { left: 0; }

/* --- Header (§7.1, §10.3) ---------------------------------------------- */

.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white); border-bottom: 1px solid var(--border-default);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.header__inner {
  display: flex; align-items: center; gap: 32px; height: 80px;
  transition: height var(--duration-fast) var(--ease-out);
}
/* Compresses to 64px past 100px of scroll, with a subtle shadow. */
.header.is-compact .header__inner { height: 64px; }
.header.is-compact { box-shadow: var(--shadow-hover); }

/* --- Brand lockup: the supplied mark and wordmark -------------------------
   Both are client artwork (assets/brand/TT-Logo.png and TT-Text.png), served
   at 2x of display size. Heights are set in CSS and widths left auto, with the
   intrinsic width/height still on the element so the space is reserved and CLS
   stays flat (§13). */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark, .brand__word {
  width: auto; flex: 0 0 auto; display: block;
  transition: height var(--duration-fast) var(--ease-out);
}
.brand__mark { height: 45px; }
.brand__word { height: 40px; }
.header.is-compact .brand__mark { height: 45px; }
.header.is-compact .brand__word { height: 40px; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav__list > li { margin: 0; position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 15px; font-weight: 500; text-decoration: none; color: var(--navy-900);
  background: none; border: 0; cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { border-bottom-color: var(--accent); }
.nav__link .caret { font-size: 10px; color: var(--text-secondary); }
.header .btn { margin-left: 8px; }
/* The nav holds a second "Let's talk" for the mobile panel only; at desktop the
   one in .header__inner is the visible one. Without this both render. */
.nav > .btn { display: none; }

.menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 260px; background: var(--white);
  border: 1px solid var(--border-default); border-radius: 0 0 var(--r-md) var(--r-md);
  padding: 24px; box-shadow: var(--shadow-hover);
}
.menu[data-open="true"] { display: block; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { margin: 0 0 4px; }
.menu a { display: block; padding: 8px 0; font-size: 15px; text-decoration: none; min-height: 44px; }
.menu a:hover { text-decoration: underline; }

/* The AI column carries a thin amber left rule — the differentiated
   capability, marked without breaking the visual equality (§7.2). */
.nav__list > li.has-mega { position: static; }
.menu--mega {
  left: 50%; right: auto;
  transform: translateX(-50%);
  width: min(1280px, calc(100vw - 2 * var(--margin)));
}
/* The panel now hangs off the header rather than the item, which opens a gap
   between the trigger and the panel. This invisible bridge spans it, so the
   pointer can travel down into the menu without the item losing :hover. */
.menu--mega::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.menu--mega .menu__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.menu__title {
  font-size: 14px; font-weight: 600; margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-default); color: var(--navy-600);
}
.menu__col--accent { border-left: 2px solid var(--accent); padding-left: 24px; }

.hamburger { display: none; }

/* --- Footer ------------------------------------------------------------ */

.footer { background: var(--navy-900); color: var(--text-inverse); padding: 96px 0 0; }
.footer h2 {
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--f-mono); font-weight: 500; color: var(--navy-200); margin-bottom: 20px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer a { color: var(--navy-200); text-decoration: none; font-size: 15px; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__bottom {
  margin-top: 64px; padding: 24px 0; border-top: 1px solid var(--navy-400);
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  font-size: 14px; color: var(--navy-200);
}
.footer__bottom nav { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }

/* --- Forms (§12) -------------------------------------------------------- */

.field { margin-bottom: 24px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.field .hint { display: block; font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-family: inherit; font-size: 16px; color: var(--navy-900);
  background: var(--white); border: 1px solid var(--grey-500); border-radius: var(--r-sm);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--navy-600); }
.field textarea { min-height: 160px; resize: vertical; }
.checkbox { display: flex; gap: 12px; align-items: flex-start; }
.checkbox input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; flex: 0 0 auto; accent-color: var(--navy-600); }
.checkbox label { font-weight: 400; font-size: 15px; line-height: 1.55; }
/* Errors are described in text and marked by weight and an icon glyph —
   amber is never the sole carrier of meaning (§12). */
.field-error {
  border-left: 2px solid var(--amber-600); background: var(--amber-100);
  color: var(--navy-900); padding: 12px 16px; font-size: 14px; margin-top: 8px;
}
.field-error strong { font-weight: 600; }
[aria-invalid="true"] { border-width: 2px; border-color: var(--amber-600); }

/* --- Tables -------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin-bottom: 24px; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { text-align: left; padding: 16px; border-bottom: 1px solid var(--border-default); vertical-align: top; }
th { font-size: 14px; font-weight: 600; color: var(--navy-600); }
tbody tr:nth-child(odd) { background: var(--navy-050); }

/* --- Utilities ----------------------------------------------------------- */

.mb-0 { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.mb-64 { margin-bottom: 64px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ========================================================================
   MOTION (§10)
   Containers animate, never their contents. Transform and opacity only —
   no layout property is ever animated (§13).
   ======================================================================== */

/* Section and card entry: fade 0→1 with translateY(20px→0), 500ms,
   triggered at 15% into the viewport, fires once (§10.3). */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--travel));
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal].is-in { will-change: auto; }

/* Diagrams: SVG stroke line-draw, 1000ms, bottom-up where the diagram has
   a stack order (§10.3). */
[data-draw] .draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset var(--duration-slow) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
[data-draw].is-in .draw { stroke-dashoffset: 0; }
[data-draw] .fade { opacity: 0; transition: opacity var(--duration-base) var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms + 300ms); }
[data-draw].is-in .fade { opacity: 1; }

/* ========================================================================
   BREAKPOINTS (§6.1)
   ======================================================================== */

@media (max-width: 1023px) {
  :root { --margin: 40px; --section-y: 96px; }
  .display { font-size: 52px; }
  h1, .h1 { font-size: 44px; }
  h2, .h2 { font-size: 34px; }
  .c3 { grid-column: span 6; }
  .c4 { grid-column: span 6; }
  .c5, .c7 { grid-column: span 12; }

  .hamburger {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
    min-height: 44px; padding: 8px 12px; background: none; cursor: pointer;
    border: 1px solid var(--border-default); border-radius: var(--r-sm);
    font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--navy-900);
  }
  .header .btn { display: none; }

  .nav {
    position: fixed; inset: 80px 0 0; z-index: 55;
    background: var(--white); overflow-y: auto; padding: 24px var(--margin) 64px;
    margin-left: 0;
  }
  .nav[hidden] { display: none; }
  .nav__list { display: block; }
  .nav__list > li { border-bottom: 1px solid var(--border-default); }
  .nav__link { width: 100%; justify-content: space-between; padding: 12px 0; font-size: 18px; border-bottom: 0; }
  .menu, .menu--mega {
    position: static; width: auto; min-width: 0; border: 0; padding: 0 0 16px;
    box-shadow: none; transform: none; left: auto; right: auto;
  }
  .menu--mega::before { display: none; }
  .nav__list > li.has-mega { position: relative; }
  .menu--mega .menu__cols { grid-template-columns: 1fr; gap: 24px; }
  .menu__col--accent { padding-left: 16px; }
  .nav .btn { display: inline-flex; margin: 24px 0 0; }
}

@media (max-width: 767px) {
  :root { --margin: 20px; --section-y: 64px; --card-pad: 24px; }
  body { font-size: 16px; line-height: 1.70; }
  .display { font-size: 40px; line-height: 1.10; }
  h1, .h1 { font-size: 34px; line-height: 1.15; }
  h2, .h2 { font-size: 28px; line-height: 1.20; }
  h3, .h3 { font-size: 22px; line-height: 1.30; }
  h4, .h4 { font-size: 18px; line-height: 1.40; }
  .lead { font-size: 18px; line-height: 1.60; }
  .metric { font-size: 36px; }
  .grid > * { grid-column: 1 / -1 !important; }
  .nav { inset: 80px 0 0; }
}

@media (max-width: 479px) {
  .display { font-size: 34px; }
  h1, .h1 { font-size: 30px; }
  h2, .h2 { font-size: 25px; }
  .btn { width: 100%; }
}

/* ========================================================================
   REDUCED MOTION (§10.6)
   All content renders in its final state. Pinning disabled. Line-draws
   render complete. Counters show final values. The page must remain fully
   comprehensible with zero motion.
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-draw] .draw { stroke-dashoffset: 0 !important; }
  [data-draw] .fade { opacity: 1 !important; }
  .pov { height: auto !important; }
  .pov__pin { position: static !important; height: auto !important; }
  .pov__caption { position: static !important; opacity: 1 !important; }
  .pyr__course, .pyr__slab, .pyr__bracket { transition: none !important; }
}

/* =============================================================================
   PAGE COMPONENTS
   Previously ten near-duplicate blocks, one per page. Consolidated here into a
   single vocabulary, so a change lands once. Where two pages genuinely needed
   different values, the exception is scoped by the <body> class rather than
   redefining the class — see PAGE EXCEPTIONS at the end of this section.
   ========================================================================== */

/* --- Page hero: the opening band on every template except the homepage --- */
.page-hero { padding: 96px 0; }

/* --- Long-form column: 8 columns, offset 2 (§9 T4, T6, T10) -------------- */
.body-col { grid-column: 3 / span 8; }

/* --- Pull-quote ---------------------------------------------------------- */
.pull {
  font-family: var(--f-display); font-size: 32px; line-height: 1.3; letter-spacing: -0.01em;
  border-left: 2px solid var(--accent); padding-left: 32px; margin: 48px 0;
}

/* --- Numbered process steps ---------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0 0 24px; counter-reset: step; }
.steps > li {
  counter-increment: step; position: relative; padding: 0 0 32px 64px; margin: 0 0 32px;
  border-bottom: 1px solid var(--border-default);
}
.steps > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.steps > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 2px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--accent-text); border-bottom: 2px solid var(--accent); padding-bottom: 4px;
}

/* --- Sticky in-page navigation: sub-nav (T3) and table of contents (T4) --- */
.subnav, .toc { position: sticky; top: 112px; }
.subnav ul, .toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-default); }
.subnav li, .toc li { margin: 0; }
.subnav a, .toc a {
  display: block; padding: 10px 16px; font-size: 15px; line-height: 1.4; text-decoration: none;
  color: var(--text-secondary); border-left: 2px solid transparent; margin-left: -1px; min-height: 44px;
}
.subnav a:hover, .toc a:hover { color: var(--navy-900); }
.subnav a[aria-current="true"], .toc a[aria-current="true"] {
  color: var(--navy-900); font-weight: 600; border-left-color: var(--accent);
}
.toc-col { grid-column: span 2; }

/* --- Homepage hero (§8 S1) ------------------------------------------------ */
.hero { padding-top: 96px; padding-bottom: 0; min-height: 72vh; display: flex; flex-direction: column; }
.hero__body { flex: 1 0 auto; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.hero__visual { align-self: center; }
.trust { margin-top: 64px; border-top: 1px solid var(--border-default); padding: 24px 0 0; }
.trust__marks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: -40px; }

/* --- The pinned sequence (§8 S3, §10.4) ----------------------------------- */
/* 200vh of pin travel plus one viewport of container. */
.pov { position: relative; height: 300vh; }
.pov__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.pov__svg { max-width: 380px; margin: 0 auto; }
/* --- The pyramid: courses strip away across the four states ---------------
   Persistent geometry that moves, rather than four drawings swapped over. Each
   course carries its colour through `currentColor`, so one property recolours
   a whole course, and `--c` is its index so the strip-away can cascade from the
   bottom up. Scrubbing back up reverses it, because every state is expressed as
   a transform rather than a switch. */
.pyr__course  { color: var(--navy-200); }
.pyr__slab    { color: var(--amber-500); opacity: 0; }
.pyr__bracket { color: var(--amber-500); opacity: 0; }
.pyr__course, .pyr__slab, .pyr__bracket {
  transition: color 400ms var(--ease-out),
              opacity 400ms var(--ease-out),
              transform 400ms var(--ease-out);
}

/* State 2 — the billable bulk lights up, bracketed. */
.pov[data-state="1"] .pyr__course--junior { color: var(--amber-500); }
.pov[data-state="1"] .pyr__bracket { opacity: 1; }

/* State 3 — the junior courses strip away, widest and lowest first. */
.pov[data-state="2"] .pyr__course--junior,
.pov[data-state="3"] .pyr__course--junior {
  opacity: 0;
  transform: translateY(64px);
  transition-delay: calc(var(--c) * 70ms);
}

/* State 4 — the AI layer arrives and the survivors come down to rest on it. */
.pov[data-state="3"] .pyr__slab { opacity: 1; transition-delay: 150ms; }
.pov[data-state="3"] .pyr__course--senior {
  transform: translateY(197.33px);
  color: var(--white);
  transition-delay: 240ms;
}

/* The static frames carry the same states with the motion removed. */
.pyr.is-static * { transition: none !important; }
.pyr[data-static="1"] .pyr__course--junior { color: var(--amber-500); }
.pyr[data-static="1"] .pyr__bracket { opacity: 1; }
.pyr[data-static="2"] .pyr__course--junior,
.pyr[data-static="3"] .pyr__course--junior { opacity: 0; }
.pyr[data-static="3"] .pyr__slab { opacity: 1; }
.pyr[data-static="3"] .pyr__course--senior { transform: translateY(197.33px); color: var(--white); }

.pov__captions { position: relative; min-height: 260px; }
.pov__caption {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.pov[data-state="0"] .pov__caption[data-frame="0"],
.pov[data-state="1"] .pov__caption[data-frame="1"],
.pov[data-state="2"] .pov__caption[data-frame="2"],
.pov[data-state="3"] .pov__caption[data-frame="3"] { opacity: 1; pointer-events: auto; }
.band--dark .pov__num {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy-200); margin-bottom: 16px;
}
.pov__progress { display: flex; gap: 8px; margin-top: 40px; }
.pov__dot { width: 40px; height: 2px; background: var(--navy-400); transition: background var(--duration-fast) var(--ease-out); }
.pov[data-state="0"] .pov__dot:nth-child(1),
.pov[data-state="1"] .pov__dot:nth-child(-n+2),
.pov[data-state="2"] .pov__dot:nth-child(-n+3),
.pov[data-state="3"] .pov__dot { background: var(--amber-500); }
.pov__static { display: none; }
.pov__static-item + .pov__static-item { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--navy-400); }
.pov__static .pov__svg { max-width: 260px; margin: 0 0 24px; }
.pov[data-degraded] { height: auto; }
.pov[data-degraded] .pov__pin { display: none; }
.pov[data-degraded] .pov__static { display: block; }

/* --- The AI stack (§8 S6) ------------------------------------------------- */
/* Real HTML text rather than SVG labels: selectable, translatable, and the
   layer names stay in the accessibility tree. Drawn bottom-up. */
.stack-diagram { display: flex; gap: 16px; }
.stack-diagram__layers { flex: 1; display: flex; flex-direction: column-reverse; gap: 8px; }
.stack-layer {
  border-radius: var(--r-sm); padding: 24px; text-align: center;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0; transform: translateY(var(--travel));
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 160ms);
}
[data-reveal].is-in .stack-layer { opacity: 1; transform: none; }
.stack-layer--top  { background: var(--amber-500); color: var(--navy-900); }  /* 5.69:1 */
.stack-layer--mid  { background: var(--navy-600);  color: var(--white); }     /* 10.08:1 */
.stack-layer--base { background: var(--navy-900);  color: var(--white); }     /* 14.87:1 */
.stack-diagram__gov { width: 44px; border-left: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; }
.stack-diagram__gov span {
  writing-mode: vertical-rl; font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text);
}

/* --- Capability icons ----------------------------------------------------- */
.icon { width: 48px; height: 44px; margin-bottom: 32px; }

/* --- Metric row (§8 S8) --------------------------------------------------- */
.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);
  margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--border-default);
}
.metric-label {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-secondary); margin-top: 8px;
}

/* --- Card strips and grids ------------------------------------------------ */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.marks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }

/* --- Listing page (T5) ---------------------------------------------------- */
.filters fieldset { border: 0; padding: 0; margin: 0 0 32px; }
.filters legend {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-secondary); padding: 0 0 12px;
}
.filters label { display: flex; gap: 10px; align-items: center; font-size: 15px; min-height: 44px; }
.filters input { width: 18px; height: 18px; accent-color: var(--navy-600); }
.filters { position: sticky; top: 112px; }
.chips { display: none; }
.results-col { grid-column: 5 / span 8; }
.results-count { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.card-link .ph {
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad);
  border-radius: var(--r-md) var(--r-md) 0 0; border-width: 0 0 1px 0; border-style: dashed;
}
.card-meta { margin-top: auto; padding-top: 16px; font-size: 14px; color: var(--text-secondary); }

/* --- Article / story detail (T6) ------------------------------------------ */
.article-meta { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; font-size: 14px; color: var(--text-secondary); }
.article-body { max-width: 68ch; }
.article-body h2 { font-size: 32px; margin-top: 56px; }
.article-body h3 { font-size: 22px; margin-top: 40px; }
.author { display: flex; gap: 24px; align-items: flex-start; }
.author .ph { flex: 0 0 96px; width: 96px; }

/* --- Course detail (T7) --------------------------------------------------- */
.course-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.badge {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-sm);
  border: 2px solid var(--accent); background: var(--accent-fill); color: var(--accent-text);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.booking { position: sticky; top: 112px; }
.booking dl { margin: 0 0 24px; }
.booking dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.booking dd { margin: 4px 0 16px; font-size: 16px; }
.booking .price { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sticky-bar { display: none; }
.outline { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: mod; }
.outline > li { counter-increment: mod; border-top: 1px solid var(--border-default); padding: 20px 0 20px 56px; position: relative; margin: 0; }
.outline > li::before {
  content: "M" counter(mod); position: absolute; left: 0; top: 22px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--accent-text);
}

/* --- People page (T8) ----------------------------------------------------- */
.profile { align-items: start; }
.profile + .profile { margin-top: 96px; padding-top: 96px; border-top: 1px solid var(--border-default); }
.profile__photo { grid-column: span 5; }
.profile__bio   { grid-column: span 7; }
.profile--flip .profile__photo { grid-column: 8 / span 5; grid-row: 1; }
.profile--flip .profile__bio   { grid-column: 1 / span 7; grid-row: 1; }

/* --- Contact (T9) --------------------------------------------------------- */
.aside .card + .card { margin-top: 24px; }
.required { color: var(--accent-text); font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; }

/* --- Utility (T10) -------------------------------------------------------- */
.legal h2 { font-size: 28px; margin-top: 48px; }
.legal h3 { font-size: 20px; margin-top: 32px; }
.variant-divider { border: 0; border-top: 2px dashed var(--navy-400); margin: 0; }

/* --- Component sheet ------------------------------------------------------ */
.sw { display: block; width: 100%; height: 56px; border: 1px solid var(--border-default); border-radius: var(--r-sm); margin-bottom: 8px; }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gutter); }
.dist { display: flex; height: 40px; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 8px; border: 1px solid var(--border-default); }
.specimen { padding: 24px 0; border-top: 1px solid var(--border-default); }
.specimen > .mono { margin-bottom: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 24px; }
.prohibited {
  background: repeating-linear-gradient(135deg, var(--grey-100), var(--grey-100) 6px, var(--navy-050) 6px, var(--navy-050) 12px);
  color: var(--navy-900); font-weight: 600;
}
code { font-family: var(--f-mono); font-size: 0.9em; background: var(--navy-050); padding: 2px 6px; border-radius: 3px; }

/* --- PAGE EXCEPTIONS ------------------------------------------------------ */
/* The only places two pages needed different values for the same component. */
.page-components .page-hero { padding: 64px 0; }
.page-components .stack-layer { padding: 20px 16px; }
.page-components .icon { margin-bottom: 0; }

/* --- Page-component breakpoints ------------------------------------------- */

@media (max-width: 1023px) {
  .toc-col, .subnav, .filters { display: none; }   /* sticky rails are lg and above */
  .body-col, .results-col { grid-column: 1 / -1; }
  .pull { font-size: 26px; padding-left: 24px; }
  .article-body h2 { font-size: 28px; }
  .trust__marks, .metrics, .strip, .marks { grid-template-columns: repeat(2, 1fr); }
  .swatches { grid-template-columns: repeat(3, 1fr); }
  .profile__photo, .profile__bio,
  .profile--flip .profile__photo, .profile--flip .profile__bio { grid-column: 1 / -1; grid-row: auto; }

  /* §9 T5 — the filter rail becomes horizontally scrolling chips */
  .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 32px; }
  .chips .tag { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
  .chips .tag[aria-pressed="true"] { border-color: var(--accent); border-width: 2px; color: var(--navy-900); }

  /* §9 T7 — booking panel moves below the header, a sticky bar carries the CTA */
  .booking { position: static; }
  .booking-col { order: -1; }
  .sticky-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    align-items: center; gap: 16px; padding: 12px var(--margin);
    background: var(--white); border-top: 1px solid var(--border-default);
  }
  .sticky-bar .btn { margin-left: auto; }
  .page-course { padding-bottom: 84px; }
}

@media (max-width: 767px) {
  .hero { min-height: 0; }
  .trust__marks, .metrics, .strip, .marks { grid-template-columns: 1fr; }
  .trust__marks { margin-bottom: 0; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
  .stack-diagram__gov { width: 36px; }
  .pull { font-size: 24px; }
  /* §10.4 — pinning is disabled below 768px; four static frames instead */
  .pov { height: auto; }
  .pov__pin { display: none; }
  .pov__static { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .pov__pin { display: none; }
  .pov__static { display: block; }
  .stack-layer { opacity: 1 !important; transform: none !important; }
}

/* --- Hero globe (§8 S1) --------------------------------------------------- */
/* A meridian at longitude L projects to an ellipse of half-width R x cos(L), so
   the globe turns by animating scaleX through a cosine. Six meridians share one
   keyframe cycle, phase-shifted by a negative animation-delay; after 30 degrees
   of turn the set is identical to where it started, so the loop is seamless by
   construction rather than by hiding a cut. Full cycle 60s, mesh repeat 5s.

   non-scaling-stroke is what keeps the line weight even as the ellipses
   flatten -- without it the left and right of each meridian would thin to
   nothing while the top and bottom stayed full weight.

   Continuous motion above the fold is a deliberate client override of §8 S1
   non-negotiable 4, §10.3, §10.5 and §11.5. */
.globe { width: 100%; }
.globe ellipse, .globe circle { vector-effect: non-scaling-stroke; }
.globe__meridian {
  transform-box: fill-box;
  transform-origin: center;
  animation: globe-turn 60s linear infinite;
}

@keyframes globe-turn {
  0% { transform: scaleX(1.0000); }
  2.5% { transform: scaleX(0.9877); }
  5% { transform: scaleX(0.9511); }
  7.5% { transform: scaleX(0.8910); }
  10% { transform: scaleX(0.8090); }
  12.5% { transform: scaleX(0.7071); }
  15% { transform: scaleX(0.5878); }
  17.5% { transform: scaleX(0.4540); }
  20% { transform: scaleX(0.3090); }
  22.5% { transform: scaleX(0.1564); }
  25% { transform: scaleX(0.0000); }
  27.5% { transform: scaleX(-0.1564); }
  30% { transform: scaleX(-0.3090); }
  32.5% { transform: scaleX(-0.4540); }
  35% { transform: scaleX(-0.5878); }
  37.5% { transform: scaleX(-0.7071); }
  40% { transform: scaleX(-0.8090); }
  42.5% { transform: scaleX(-0.8910); }
  45% { transform: scaleX(-0.9511); }
  47.5% { transform: scaleX(-0.9877); }
  50% { transform: scaleX(-1.0000); }
  52.5% { transform: scaleX(-0.9877); }
  55% { transform: scaleX(-0.9511); }
  57.5% { transform: scaleX(-0.8910); }
  60% { transform: scaleX(-0.8090); }
  62.5% { transform: scaleX(-0.7071); }
  65% { transform: scaleX(-0.5878); }
  67.5% { transform: scaleX(-0.4540); }
  70% { transform: scaleX(-0.3090); }
  72.5% { transform: scaleX(-0.1564); }
  75% { transform: scaleX(-0.0000); }
  77.5% { transform: scaleX(0.1564); }
  80% { transform: scaleX(0.3090); }
  82.5% { transform: scaleX(0.4540); }
  85% { transform: scaleX(0.5878); }
  87.5% { transform: scaleX(0.7071); }
  90% { transform: scaleX(0.8090); }
  92.5% { transform: scaleX(0.8910); }
  95% { transform: scaleX(0.9511); }
  97.5% { transform: scaleX(0.9877); }
  100% { transform: scaleX(1.0000); }
}

/* The globe reads perfectly well standing still, so reduced motion simply
   stops it -- no substitute asset needed. */
@media (prefers-reduced-motion: reduce) {
  .globe__meridian { animation: none; }
}

/* --- Hero globe: WAN 2.2 animation --------------------------------------- */
/* The generated clip replaces the authored SVG globe. An animated WebP plays
   and loops by itself inside an <img>; the <picture> element's
   prefers-reduced-motion <source> is what stops it, by serving the still PNG
   to anyone who has asked for less motion. There is no way to pause an
   animated WebP from CSS, which is why the swap has to happen at the source.

   The SVG globe is kept in the repo and can be put back — see the README. */
.globe-anim { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }