/* ============================================================
   ARENA — the world's first AI-native school
   Editorial homepage. Tokens extend the Skylarq DNA
   (rust accent #E59375, warm paper) into a warmer, literary
   register: Newsreader display + Geist body/mono.
   ============================================================ */

@import url('/fonts/fonts.css');

:root {
  /* ---------- Riso palette (Sept 2026 design system) ---------- */
  --riso-blue:    #22458A;   /* primary: buttons, links, focus */
  --riso-blue-dk: #183366;
  --coral:        #E59375;   /* highlight: graphics, dark backgrounds, large type */
  --coral-light:  #F2A98E;   /* coral text on navy */
  --coral-deep:   #A6482A;   /* coral text on paper (AA) */
  --seal-navy:    #152636;
  --sand:         #FFFFFF;
  --paper-art:    #CDD3DF;   /* paper color of the artwork itself */
  --card:         #F5F7FA;
  /* ---------- Riso paper and ink ---------- */
  --bg-paper:        #FFFFFF;
  --bg-paper-soft:   #F5F7FA;
  --text-ink:        #101A2E;
  --text-ink-soft:   #3E4660;
  --text-ink-muted:  #5B5B6B;
  --border-paper:    #E2E6EE;

  /* ---------- Night bands ---------- */
  --bg-dark:         #0E1729;
  --bg-dark-surface: #16213A;
  --text-cream:      #E6E9F0;
  --text-cream-soft: #A9AEC0;
  --border-dark:     #26324F;

  /* ---------- Accent = riso blue for actions (coral highlights live in --coral) ---------- */
  --accent:          #22458A;
  --accent-soft:     rgba(34, 69, 138, 0.12);
  --accent-strong:   #183366;
  --accent-blue:     #22458A;
  --accent-gold:     #E59375;

  /* ---------- Type families ---------- */
  --font-display: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --font-body:    'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Fluid scale — commanding at the top, refined mid-scale ---------- */
  --text-hero:    clamp(48px, 6.6vw, 106px);
  --text-h2:      clamp(40px, 4.8vw, 84px);
  --text-h3:      clamp(23px, 2.4vw, 32px);
  --text-body-lg: clamp(19px, 1.4vw, 22px);
  --text-body:    17px;
  --text-small:   15px;
  --text-eyebrow: 11px;

  /* ---------- Weights ---------- */
  --w-display:  300;
  --w-body:     400;
  --w-emphasis: 500;

  /* ---------- Tracking — tighter on headlines, wider on wayfinding ---------- */
  --tr-display: -0.026em;
  --tr-eyebrow: 0.16em;

  /* ---------- Spacing & layout ---------- */
  --section-py:       clamp(96px, 12vh, 168px);
  --section-px:       clamp(24px, 4vw, 80px);
  --container-max:    1240px;
  --container-narrow: 720px;
  --container-essay:  640px;

  /* ---------- Motion (Skylarq grammar, brief-tuned) ---------- */
  --ease:    cubic-bezier(0.2, 0, 0, 1);
  --dur:     560ms;
  --dur-fast: 240ms;
  --dur-250: 250ms;
  --ticker-h: 30px;

  /* ---------- Radius & shadow (inherited from Skylarq) ---------- */
  --radius:    16px;
  --radius-sm: 12px;
  --shadow-card:       0 1px 3px rgba(14,23,41,0.07), 0 1px 2px rgba(14,23,41,0.04);
  --shadow-card-hover: 0 16px 40px -16px rgba(14,23,41,0.24), 0 2px 6px rgba(14,23,41,0.07);
  --shadow-lift:       0 24px 60px -24px rgba(0,0,0,0.5);
}

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg-paper);
  color: var(--text-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--w-body);
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: rgba(229,147,117,0.35); }

/* ---------- Focus states — visible, consistent, accent-colored ---------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--section-px); }
.narrow    { max-width: var(--container-narrow); }
.essay     { max-width: var(--container-essay); }

section { padding-block: var(--section-py); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-ink-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--accent);
  display: inline-block;
}

.display {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  letter-spacing: var(--tr-display);
  line-height: 1.02;
}
.display em { font-style: italic; }

.mono { font-family: var(--font-mono); }

/* ---------- Section headers ---------- */
.h2 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--text-h2);
  line-height: 1.04;
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
.h2 em { font-style: italic; }
.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.lede {
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--text-ink-soft);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--w-emphasis);
  letter-spacing: -0.004em;
  padding: 14px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn .arr { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent);
  color: #F5F7FA;
  box-shadow: 0 1px 2px rgba(24,51,102,0.28);
}
.btn-primary:hover { background: var(--accent-strong); box-shadow: 0 8px 24px -8px rgba(34,69,138,0.45); }

.btn-ghost {
  background: transparent;
  color: var(--text-ink);
  border-color: var(--border-paper);
}
.btn-ghost:hover { border-color: var(--text-ink); background: rgba(16,26,46,0.03); }

/* ---------- Inline text link ---------- */
.tlink {
  color: var(--accent);
  font-weight: var(--w-emphasis);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
/* the underline sits on the label (.tl) from the font's own metrics, so it stays 3px under the
   text whatever the link's hit-area padding or line height; it fades in, the arrow nudges right */
.tlink .tl {
  text-decoration: underline 1px transparent;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  transition: text-decoration-color .25s var(--ease);
}
.tlink:not(:has(.tl)) { text-decoration: underline 1px transparent; text-underline-offset: 3px; transition: text-decoration-color .25s var(--ease); }
.tlink .arr { display: inline-block; transition: transform .25s var(--ease); }
.tlink:is(:hover, :focus-visible) .tl, .tlink:not(:has(.tl)):is(:hover, :focus-visible) { text-decoration-color: currentColor; }
.tlink:is(:hover, :focus-visible) .arr { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .tlink .tl, .tlink:not(:has(.tl)), .tlink .arr { transition: none; }
  .tlink:is(:hover, :focus-visible) .arr { transform: none; }
}

/* ============================================================
   STATUS TICKER
   ============================================================ */
.ticker {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--ticker-h);
  background: var(--bg-dark);
  color: var(--text-cream);
  display: flex; align-items: center;
  transition: transform var(--dur-fast) var(--ease);
}
 .ticker-carousel {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-cream-soft);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes tickerPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 69, 138,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(34, 69, 138,0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 69, 138,0); }
}

/* ---- Carousel slides ---- */
.ticker-carousel {
  position: relative;
  flex: 1;
  height: var(--ticker-h);
  min-width: 0;
  max-width: 720px;
  margin: 0 16px;
  overflow: hidden;
}
.ticker-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-cream);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  pointer-events: none;
}
.ticker-slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.ticker-slide::before {
  content: "—";
  color: var(--text-faint, #5C5850);
  opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
  .ticker-slide { transition: none; }
}
@media (max-width: 600px) {
  .ticker-carousel { font-size: 10px; letter-spacing: 0.05em; margin: 0 8px; }
  .ticker-slide::before { display: none; }
  .ticker-slide { gap: 8px; }
}

/* When dismissed or page scrolled, ticker retracts and nav rises to top. */
body.ticker-up .ticker { transform: translateY(-100%); }
body.ticker-up .nav { top: 0; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: var(--ticker-h); left: 0; right: 0; z-index: 50;
  transition: top var(--dur-250) var(--ease), background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), backdrop-filter var(--dur-fast) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255, 255, 255,0.86);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: var(--border-paper);
}
.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 15px var(--section-px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  transition: padding var(--dur-250) var(--ease);
}
.nav.scrolled .nav-inner { padding-block: 12px; }
.wordmark {
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: -0.02em;
  color: var(--text-ink);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
}
@media (max-width: 480px) {
  .wordmark { font-size: 21px; }
}
.nav-links {
  display: flex; align-items: center; gap: 30px;
  flex-wrap: nowrap;
}
@media (max-width: 1300px) { .nav-links { gap: 20px; } }
.nav-links a {
  font-size: var(--text-small);
  color: var(--text-ink-soft);
  font-weight: var(--w-body);
  transition: color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text-ink); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; color: var(--text-ink); }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-paper); border-bottom: 1px solid var(--border-paper);
    padding: 20px var(--section-px); gap: 4px;
  }
  .nav-links.open a { padding: 11px 0; width: 100%; }
  .nav-cta .btn { display: none; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; padding: 11px; min-width: 44px; min-height: 44px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(150px, 22vh, 240px); padding-bottom: clamp(90px, 12vh, 150px); position: relative; overflow: hidden; }
.hero h1 {
  font-size: var(--text-hero);
  margin-bottom: 28px;
  max-width: 22ch;
  text-wrap: balance;
}
.hero .sub { max-width: 46ch; margin-bottom: 30px; }
.hero-eyebrow-row { margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* Monogram visual */

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 860px) {
  .hero h1 { max-width: 100%; }
}

/* ============================================================
   PILOT PROOF BAND
   ============================================================ */
.proof { background: var(--bg-paper-soft); }
.stat .num {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(48px, 5.5vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-ink);
  display: flex; align-items: baseline; gap: 4px;
}
.stat .num .unit { font-size: 0.42em; color: var(--text-ink-muted); font-family: var(--font-body); font-weight: var(--w-emphasis); letter-spacing: -0.01em; }
.stat .label { margin-top: 14px; font-size: var(--text-small); color: var(--text-ink-soft); line-height: 1.45; }
.stat .label strong { color: var(--text-ink); font-weight: var(--w-emphasis); }

/* ---- Next pilot — ISB Beijing announcement card ---- */

/* Featured variant — saffron-tinted card so the next pilot commands attention */

/* Subtle texture / corner glow on the featured card */

/* Nav "Next pilot · ISB" pill — persistent tether to the upcoming program */

/* Hide pill on tighter widths so the nav doesn't get cramped */

/* Hero meta link styling — quiet but obviously interactive */

/* ---------- Editorial pilot gallery (6 tiles, asymmetric) ---------- */

/* Layout: classroom wide hero | hands video | collab video stacked
            sticky | check | cohort selfie wide */

/* ---------- Credibility strip ---------- */

/* ============================================================
   THE STRUCTURE
   ============================================================ */
.sec-head { max-width: 56ch; margin-bottom: clamp(48px, 6vw, 80px); }
.sec-head .h2 { margin-top: 20px; }
.sec-head .lede { margin-top: 22px; }

/* Structure section head: the h2 runs long, so give it a wide balanced
   measure and let the lede sit beside it rather than leaving the right
   half of the section dead. */
.structure { border-top: 1px solid rgba(16, 26, 46, 0.1); }
.structure .sec-head {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  column-gap: clamp(36px, 6vw, 80px);
  align-items: end;
}
.structure .sec-head .eyebrow { grid-column: 1 / -1; }
.structure .sec-head .h2 { grid-column: 1; margin-top: 20px; max-width: 22ch; }
.structure .sec-head .lede { grid-column: 2; margin-top: 0; align-self: end; }
@media (max-width: 900px) {
  .structure .sec-head { grid-template-columns: 1fr; }
  .structure .sec-head .h2 { grid-column: 1; max-width: 100%; }
  .structure .sec-head .lede { grid-column: 1; margin-top: 22px; }
}

.structure-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding-block: clamp(30px, 3.4vw, 44px);
  border-top: 1px solid var(--border-paper);
}
.structure-row:last-child { border-bottom: 1px solid var(--border-paper); }
.structure-row .rtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.structure-row .rtitle em { font-style: italic; color: var(--text-ink-soft); }
.structure-row .rbody { color: var(--text-ink-soft); font-size: var(--text-body); line-height: 1.6; }
.structure-row .rbody .hl { color: var(--text-ink); font-weight: var(--w-emphasis); }

@media (max-width: 760px) {
  .structure-row {
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 12px;
  }
  .structure-row .rtitle { grid-column: 2; grid-row: 1; }
  .structure-row > div:last-child { grid-column: 1 / -1; grid-row: 2; }
}

/* ============================================================
   DARK BANDS (generic)
   ============================================================ */

/* ---------- Hubs map ---------- */
.hubs { position: relative; overflow: hidden; }
.hubs .sec-head { margin-inline: auto; text-align: center; max-width: 60ch; }
.cohort-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  opacity: 0.85;
}
.cohort-path.drawn { animation: draw 2400ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cohort-path { stroke-dashoffset: 0; } }
@keyframes pulse { 0%,100% { opacity: 0.12; transform: scale(1); } 50% { opacity: 0.28; transform: scale(1.5); } }

details.hub-cap {
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.015);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
details.hub-cap[open] {
  border-color: var(--accent);
  background: rgba(34, 69, 138, 0.04);
}
details.hub-cap summary {
  list-style: none; cursor: pointer; outline: none;
}
details.hub-cap summary::-webkit-details-marker { display: none; }
details.hub-cap summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px;
}
@keyframes hcFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  details.hub-cap, details.hub-cap[open] { transition: none; }
}

/* Mobile: SVG arc → vertical timeline with a saffron line that draws on scroll */

/* ---------- Manifesto ---------- */

/* ============================================================
   PHILOSOPHY — Why / What AI changed / What's left
   ============================================================ */

/* Shared editorial prose used in the philosophy sections */

/* --- Section 4: Why school exists --- */

/* --- Section 5: What AI changed --- */

/* --- Section 6: What's left for humans --- */

/* ============================================================
   OPEN-SOURCE — one quiet line
   ============================================================ */

/* ============================================================
   THE BET — count-up stats
   ============================================================ */

/* ============================================================
   COHORT ZERO STRIP
   ============================================================ */
.cohort { background: var(--bg-paper-soft); }
/* ============================================================
   BUILD IT WITH US — the converting section. Audience tag list,
   tightened form, soft trust line, editorial spacing.
   ============================================================ */
.partners {
  background: var(--bg-paper);
  border-top: 1px solid var(--border-paper);
  padding-block: clamp(80px, 10vw, 132px);
}
.partners-grid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}
.partners-lede .h2.partners-h {
  margin-top: 18px;
  letter-spacing: -0.014em;
  max-width: 18ch;
}
.partners-sub {
  margin-top: 22px;
  max-width: 50ch;
  color: var(--text-ink-soft);
}
.partner-cta { text-align: left; }
.partners-form {
  background: var(--bg-paper-soft);
  border: 1px solid var(--border-paper);
  padding: clamp(28px, 4vw, 40px);
  border-radius: 2px;
}
.partners-form .big {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  margin-bottom: 10px;
}
@media (max-width: 820px) {
  .partners-grid { grid-template-columns: 1fr; }
}
.cohort-form {
  background: var(--bg-paper);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 36px) clamp(24px, 3.5vw, 32px);
  box-shadow: var(--shadow-card);
}
.cohort-form .big {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: var(--text-h3); line-height: 1.2; margin: 0 0 8px;
}
.cohort-form .seats { color: var(--text-ink-soft); font-size: var(--text-small); margin: 0 0 28px; }
.form-row { display: block; margin-bottom: 16px; }
.form-row label {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-ink-muted); margin-bottom: 6px;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-ink);
  background: #FFFFFF;
  border: 1px solid var(--border-paper);
  border-radius: 6px;
  padding: 11px 14px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 69, 138, 0.15);
}
.form-row textarea { resize: vertical; min-height: 84px; font-family: var(--font-body); }
.form-row select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cohort-form .cf-submit {
  width: 100%; justify-content: center; margin-top: 8px;
  position: relative;
}
.cohort-form .cf-submit-loading { display: none; }
.cohort-form.is-loading .cf-submit-label { display: none; }
.cohort-form.is-loading .cf-submit-loading { display: inline-flex; align-items: center; gap: 6px; }
.cohort-form.is-loading .cf-submit::after {
  content: ""; width: 12px; height: 12px; margin-left: 6px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; display: inline-block;
  animation: cfSpin 700ms linear infinite;
}
@keyframes cfSpin { to { transform: rotate(360deg); } }
.cf-status {
  margin: 14px 0 0; min-height: 1.4em;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.02em;
}
.cohort-form .closes { margin: 16px 0 0; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-ink-muted); }
@media (max-width: 480px) { .form-row-split { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .cohort-form.is-loading .cf-submit::after { animation: none; }
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.closing { text-align: center; padding-block: clamp(64px, 9vw, 120px); }
.closing .big {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--text-cream);
  margin-bottom: 14px;
  text-wrap: balance;
}
.closing .h2 { margin-inline: auto; }
.closing .sub { color: var(--text-cream-soft); font-size: var(--text-body-lg); max-width: 40ch; margin: 0 auto 40px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--bg-dark); color: var(--text-cream-soft); padding-block: clamp(64px, 8vw, 96px) 48px; }
.footer-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
.footer .wordmark { color: var(--text-cream); display: block; margin-bottom: 12px; }
.footer .tag {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 18px; line-height: 1.4; max-width: 28ch;
  color: var(--text-cream); margin-bottom: 14px;
}
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-cream-soft); font-weight: 500; margin-bottom: 18px; }
.footer-col a { display: block; color: var(--text-cream); font-size: var(--text-small); padding-block: 6px; transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: clamp(48px, 6vw, 72px); padding-top: 28px;
  border-top: 1px solid var(--border-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-cream-soft); letter-spacing: 0.01em;
}
.footer-bottom .license { color: var(--text-cream); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 36px 24px; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* image-slot theming */
image-slot {
  --is-bg: var(--bg-paper);
  border-radius: var(--radius);
}

/* ============================================================
   EDITORIAL ANIMATIONS — restrained, on-brand motion
   All effects gated by prefers-reduced-motion via the @media block at the end.
   ============================================================ */

/* Hero crest — very slow, almost imperceptible rotation */

@keyframes crest-drift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pilot gallery tiles — subtle lift on hover, image scales gently */

/* Structure rows — saffron underline grows under the title on hover */
.structure-row { position: relative; }
.structure-row .rtitle {
  position: relative;
  display: inline-block;
}
.structure-row .rtitle::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 500ms var(--ease);
}
.structure-row:hover .rtitle::after { width: 100%; }

/* Bet stats — subtle slide-in on reveal (in addition to existing reveal/count-up) */

/* Next-pilot card — full card hover lift + accent border deepen */

/* Manifesto crest fade-and-rise on reveal */

/* Hub-cap details — saffron border pulse when an item opens */
details.hub-cap[open] {
  animation: hub-open 600ms var(--ease);
}
@keyframes hub-open {
  0%   { box-shadow: 0 0 0 0 rgba(34, 69, 138, 0.45); }
  100% { box-shadow: 0 0 0 12px rgba(34, 69, 138, 0); }
}

/* Founder-strip logos — gentle, sequenced fade-in on reveal */

@keyframes logo-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero CTA arrow nudge on hover (saffron primary button) */
.btn-primary .arr {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
}
.btn-primary:hover .arr { transform: translateX(4px); }

/* Section-eyebrow underline draw on first reveal */
.eyebrow {
  position: relative;
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .structure-row .rtitle::after { transition: none; }
  details.hub-cap[open] { animation: none; }
}

/* ============================================================
   FOUNDER CREDENTIALS STRIP — between pilot proof and philosophy
   Cream-soft alternate band; grayscale logos, accent on hover.
   ============================================================ */
.founder-strip {
  background: var(--bg-paper-soft);
  border-top: 1px solid var(--border-paper);
  border-bottom: 1px solid var(--border-paper);
  padding-block: clamp(64px, 8vw, 96px);
}
/* Wordmarks (Caltech, McKinsey, Goldman) — width-bound */

/* Crest marks (Harvard, YC, Tsinghua) — square-ish, height-bound */

/* legacy fine-tune blocks removed — the unified .fs-wordmark / .fs-mark
   rules + 860px / 520px breakpoints now cover all viewports cleanly */

/* ============================================================
   ARENA SEAL — logos/arena/seal-*.png: navy on paper, ivory on dark bands
   ============================================================ */
.crest { width: 100%; max-width: 440px; height: auto; display: block; }

@keyframes hubPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Footer crest — smaller treatment */
.footer .crest { max-width: 110px; margin-bottom: 18px; }
.footer .crest circle[stroke="var(--accent)"] { stroke: var(--accent); }

/* ============================================================
   TRACKS — homepage "what we run" nested formats + proof quiet rows
   ============================================================ */

/* ---------- Case-study series — each implementation reads as its own
   self-contained entry, rule-framed and visually parallel ---------- */
.case-study {
  margin-top: clamp(56px, 7vw, 80px);
  padding-top: clamp(36px, 4.5vw, 48px);
  border-top: 1px solid var(--border-paper);
}
.case-study:first-of-type { margin-top: clamp(28px, 4vw, 36px); }

/* ============================================================
   TIMELINE — zero-to-launch day-by-day
   ============================================================ */
.timeline {
  list-style: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
}
.tl-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding-block: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--border-paper);
  align-items: start;
}
.tl-row:last-child { border-bottom: 1px solid var(--border-paper); }
.tl-day {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 3px;
}
.tl-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-ink);
}
.tl-desc { margin-top: 8px; font-size: var(--text-small); color: var(--text-ink-soft); line-height: 1.6; }
@media (max-width: 620px) {
  .tl-row { grid-template-columns: 1fr; gap: 6px; }
  .tl-day { padding-top: 0; }
}

/* ============================================================
   FAQ — details/summary accordion, light-ground context
   ============================================================ */
.faq { display: grid; gap: 12px; }
.faq-item {
  border: 1.5px solid rgba(16,26,46,.12);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--card, #fff);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq-item[open] { border-color: var(--accent); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 24px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.faq-q { font-size: var(--text-body); font-weight: var(--w-emphasis); color: var(--text-ink); line-height: 1.4; }
.faq-toggle {
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
  transition: transform var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-a {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-paper);
  font-size: var(--text-small);
  color: var(--text-ink-soft);
  line-height: 1.6;
  animation: hcFade 320ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item[open] { transition: none; }
  .faq-toggle, .faq-item[open] .faq-toggle { transition: none; }
  .faq-a { animation: none; }
}
@media (max-width: 480px) {
  .faq-item { padding: 15px 16px; }
  .faq-q { font-size: 15px; }
}

/* ============================================================
   ZERO TO LAUNCH — cohort landing pages (EN + CN)
   Slim nav, language toggle, timeline spine, teacher card,
   bilingual hero subtitle, shared info tiles.
   ============================================================ */

/* No status ticker lives on these pages — nav should sit flush at top,
   not float 30px down waiting for a ticker that never renders. */
.no-ticker .nav { top: 0; }

/* ---- Language toggle — EN | 中文, pill style matching .next-pill ---- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(34, 69, 138, 0.07);
  border: 1px solid rgba(34, 69, 138, 0.24);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.lang-switch a {
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--text-ink-soft);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  line-height: 1;
}
.lang-switch a:hover { color: var(--text-ink); }
.lang-switch a.lang-active {
  background: var(--accent);
  color: #F5F7FA;
  font-weight: 500;
}
.lang-switch a.lang-active:hover { color: #F5F7FA; }
@media (max-width: 480px) {
  .lang-switch { font-size: 10px; }
  .lang-switch a { padding: 5px 9px; }
}

/* ---- Cohort-page nav: 2-link set, CTA stays visible through the
   hamburger breakpoint, shortens its label at the tightest widths.
   Below 760px the two in-page anchors drop rather than hiding behind
   a hamburger — there are only two, both reachable by scrolling, and
   the lang toggle + CTA need the room. ---- */

/* ---- Hero — bilingual subtitle line, quiet under the primary lede ---- */

/* ---- Shared info tile — replaces repeated inline card styles ---- */
.tile {
  background: var(--card, #fff);
  border: 1.5px solid rgba(16, 26, 46, 0.12);
  border-radius: 16px;
  padding: 20px 22px;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

/* ---- Day-by-day timeline: the page's centerpiece ----
   A continuous spine runs down the page threading through the day
   markers; tags read as small accent-tinted pills. */
.timeline { --tl-gap: clamp(20px, 3vw, 44px); position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px;
  left: calc(96px + var(--tl-gap) / 2);
  width: 1px;
  background: var(--border-paper);
}
.tl-row {
  position: relative;
  grid-template-columns: 96px 1fr;
  gap: var(--tl-gap);
  padding-block: clamp(26px, 3.4vw, 38px);
}
.tl-row::before {
  content: "";
  position: absolute;
  left: calc(96px + var(--tl-gap) / 2);
  top: clamp(26px, 3.4vw, 38px);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, 4px);
  box-shadow: 0 0 0 4px var(--bg-paper);
}
.tl-day {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.tl-title {
  font-size: clamp(21px, 2.1vw, 27px);
}
.tl-desc { max-width: 62ch; }
@media (max-width: 620px) {
  .timeline::before, .tl-row::before { display: none; }
}

/* ---- Who teaches it — bordered card, deliberate weight ---- */

/* ---- Logistics — merged band, quiet divider from the FAQ above ---- */

/* ============================================================
   ZERO TO LAUNCH — .zl-* design system
   Flagship cohort landing page. Consolidates ~106 inline-styled
   patches into one card idiom, one shadow scale, one radius
   scale, and a deliberate section-padding rhythm.
   ============================================================ */

/* ---- Section rhythm & alternating grounds ---- */
.zl-section { padding-block: clamp(56px, 7vw, 100px); }

/* ---- One card idiom, one shadow scale, one radius scale ---- */
.zl-card {
  background: var(--card, #fff);
  border: 1.5px solid rgba(16, 26, 46, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ---- Nav: transparent-over-photo at top, solid on scroll ---- */
body.zl-page .nav {
  background: transparent;
  border-bottom-color: transparent;
}
body.zl-page .nav.scrolled {
  background: rgba(238, 241, 246, 0.92);
  border-bottom-color: var(--border-paper);
}
body.zl-page .nav .wordmark,
body.zl-page .nav-links a,
body.zl-page .nav-toggle {
  color: var(--text-cream);
  transition: color var(--dur-fast) var(--ease);
}
body.zl-page .nav-links a:hover { color: #fff; }
body.zl-page .nav.scrolled .wordmark,
body.zl-page .nav.scrolled .nav-links a,
body.zl-page .nav.scrolled .nav-toggle { color: var(--text-ink); }
body.zl-page .nav.scrolled .nav-links a { color: var(--text-ink-soft); }
body.zl-page .nav.scrolled .nav-links a:hover { color: var(--text-ink); }
body.zl-page .nav .lang-switch a { color: rgba(230, 233, 240, 0.6); }
body.zl-page .nav .lang-switch a.lang-active { color: var(--text-cream); }
body.zl-page .nav.scrolled .lang-switch a { color: var(--text-ink-muted); }
body.zl-page .nav.scrolled .lang-switch a.lang-active { color: var(--text-ink); }
body.zl-page .nav .btn-ghost { color: var(--text-cream); border-color: rgba(230, 233, 240, 0.35); }
body.zl-page .nav.scrolled .btn-ghost { color: var(--text-ink); border-color: var(--border-paper); }
/* Seal over the photo hero: render the navy seal as white until the nav goes solid. */

/* Co-brand lockup: Arena wordmark + hairline divider + Lux mark, one
   deliberate unit. The Lux mark crossfades navy↔white with the nav state. */
.zl-cobrand { display: inline-flex; align-items: center; gap: 16px; margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(230, 233, 240, 0.28); transition: border-color var(--dur-fast) var(--ease); }
body.zl-page .nav.scrolled .zl-cobrand { border-left-color: rgba(16, 26, 46, 0.14); }
.zl-cobrand-mark { position: relative; height: 24px; width: 128px; display: block; }
.zl-cobrand-mark img { position: absolute; inset: 0; height: 24px; width: auto; object-fit: contain; object-position: left center; transition: opacity var(--dur-fast) var(--ease); }
.zl-cobrand-mark .zl-mark-white { opacity: 1; }
.zl-cobrand-mark .zl-mark-navy { opacity: 0; }
body.zl-page .nav.scrolled .zl-cobrand-mark .zl-mark-white { opacity: 0; }
body.zl-page .nav.scrolled .zl-cobrand-mark .zl-mark-navy { opacity: 1; }
@media (max-width: 760px) {
  .zl-cobrand { display: none; }
}

/* ---- Hero: cinematic scrim guaranteeing legibility everywhere ---- */

.zl-hero-copy { max-width: 980px; }
.zl-hero-cta { margin-bottom: 20px; }
.zl-hero-hosted { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.zl-hero-hosted-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: rgba(245, 247, 250,.55); }
.zl-hero-hosted img { height: 30px; width: auto; }

/* ---- Trust band: straddles the hero/section seam ---- */

/* ---- Stat tiles ---- */

/* ---- Story cards (interview problem / true story) ---- */

/* ---- Career cards ---- */

/* ---- Beyond the classroom trio ---- */

/* ---- Tools grid ---- */
.zt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.zt-col { background: var(--card, #fff); border: 1.5px solid rgba(16, 26, 46, 0.1); border-radius: var(--radius); padding: 18px 18px 12px; }
.zt-cat { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--accent); padding-bottom: 10px; border-bottom: 1px solid var(--border-paper); margin-bottom: 6px; }
.zt-cat small { display: block; font-size: 11.5px; letter-spacing: 0; text-transform: none; opacity: .55; font-weight: 500; margin-top: 2px; font-family: var(--font-body); }
.zt-tool { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.zt-tool img { width: 28px; height: 28px; object-fit: contain; border-radius: 7px; flex: none; }
.zt-tool b { font-size: 14.5px; font-weight: 600; display: block; line-height: 1.15; }
.zt-tool i { font-style: normal; font-size: 12px; opacity: .6; display: block; line-height: 1.3; margin-top: 1px; }

/* ---- Teacher card: photo + lede + institution chips, composed ---- */

/* ---- Gallery ---- */

/* ---- Logistics: a single elegant spec sheet, not a ragged card grid ---- */
.zl-spec {
  margin-top: 22px;
  border: 1px solid var(--border-paper);
  border-radius: var(--radius);
  background: var(--card, #fff);
  overflow: hidden;
}
.zl-spec-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; }
.zl-spec-row + .zl-spec-row { border-top: 1px solid var(--border-paper); }
.zl-spec-label, .zl-spec-value { padding: 16px 22px; display: flex; align-items: center; }
.zl-spec-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-ink-muted); background: var(--bg-paper-soft); }
.zl-spec-value { font-size: 15.5px; font-weight: 600; color: var(--text-ink); }
@media (max-width: 560px) {
  .zl-spec-row { grid-template-columns: 1fr; }
  .zl-spec-label { padding-bottom: 4px; }
  .zl-spec-value { padding-top: 4px; }
}

/* ============================================================
   FOUNDERS PROGRAM — .fp-* visual system
   ============================================================ */

/* ---- Triptych: passion / admissions / competitions ---- */

/* ---- Board rhythm strip: board day -> async pulse -> board day ---- */

.fp-rhythm-track { display: flex; align-items: flex-start; gap: 0; }
.fp-rhythm-node { display: flex; flex-direction: column; align-items: center; text-align: center; width: 108px; flex: none; }
.fp-rhythm-label { margin-top: 13px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--text-ink); }
.fp-rhythm-node.is-async .fp-rhythm-label { color: var(--text-ink-muted); font-weight: 500; }
@media (max-width: 700px) {
  .fp-rhythm-track { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fp-rhythm-node { flex-direction: row; width: auto; text-align: left; gap: 12px; }
  .fp-rhythm-label { margin-top: 0; }
}

/* ---- Milestone ladder: an ascending five-rung composition ---- */

.fp-ladder-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; }
.fp-rung { background: #fff; border: 1.5px solid var(--border-paper); border-radius: 14px 14px 5px 5px; padding: 22px 16px 20px; transition: transform var(--dur-fast) var(--ease); }
.fp-rung-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; margin-top: 10px; color: var(--text-ink); }
.fp-ladder-track .fp-rung:nth-child(1) { transform: translateY(0); }
.fp-ladder-track .fp-rung:nth-child(2) { transform: translateY(-11px); }
.fp-ladder-track .fp-rung:nth-child(3) { transform: translateY(-22px); }
.fp-ladder-track .fp-rung:nth-child(4) { transform: translateY(-33px); }
.fp-ladder-track .fp-rung:nth-child(5) { transform: translateY(-48px); background: var(--accent); border-color: var(--accent-strong); box-shadow: var(--shadow-card-hover); }
.fp-ladder-track .fp-rung:nth-child(5) .fp-rung-title { color: #F5F7FA; }
@media (max-width: 760px) {
  .fp-ladder-track { grid-template-columns: 1fr; gap: 12px; }
  .fp-ladder-track .fp-rung { transform: none !important; }
}

/* ---- Atmospheric photo band ---- */

/* ============================================================
   SUB-PAGE SHARED SCALE — paper-hero utility pages
   (teachers, speaking; also matches schools/partnerships hero scale)
   Replaces the inline style="" attributes those pages were built with,
   so the "for X" page family stays on one padding/type/card system.
   ============================================================ */
.hero-pad-md { padding-bottom: clamp(48px, 6vw, 84px); }
.hero-copy-wide { max-width: 960px; }
.lede-56 { max-width: 56ch; }

.zl-section-md { padding-block: clamp(48px, 6vw, 84px); }
.section-alt { background: var(--bg-paper-soft); }

.h2-md { font-size: clamp(28px, 3.2vw, 46px); }
.card-p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(16, 26, 46, .72); }

/* ============================================================
   SITE REVAMP (September 2026): dropdown nav, language toggle,
   founding-team grid, program cards, proof links, team cards,
   case-study category pages, contact page.
   ============================================================ */
[hidden] { display: none !important; }

/* ---- Nav dropdowns ---- */
.nav-dd { position: relative; }
.nav-dd-btn {
  font: inherit; font-size: var(--text-small); color: var(--text-ink-soft);
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.nav-dd-btn:hover, .nav-dd.open .nav-dd-btn, .nav-dd.is-current .nav-dd-btn { color: var(--text-ink); }
.nav-dd-chev { transition: transform var(--dur-fast) var(--ease); }
.nav-dd.open .nav-dd-chev, .nav-dd:hover .nav-dd-chev { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute; top: calc(100% + 12px); left: -16px; min-width: 310px;
  background: var(--card); border: 1px solid var(--border-paper); border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(14,23,41,0.28), 0 2px 6px rgba(14,23,41,0.06);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
  z-index: 60;
}
.nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu, .nav-dd.open .nav-dd-menu {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav-links .nav-dd-menu a {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px;
  white-space: normal; color: var(--text-ink);
}
.nav-dd-menu a b { font-weight: 500; font-size: 14.5px; color: var(--text-ink); }
.nav-dd-menu a span { font-size: 12.5px; line-height: 1.4; color: var(--text-ink-muted); }
.nav-dd-menu a:hover, .nav-dd-menu a[aria-current="page"] { background: var(--bg-paper-soft); }
.nav-links > a[aria-current="page"] { color: var(--text-ink); }
.nav-mobile-only { display: none; }

/* ---- Language toggle stands apart from navigation ---- */
.nav-divider { width: 1px; height: 22px; background: var(--border-paper); flex-shrink: 0; }

/* zl pages: nav floats over a photo until scrolled */
body.zl-page .nav-dd-btn { color: var(--text-cream); }
body.zl-page .nav-dd-btn:hover, body.zl-page .nav-dd.open .nav-dd-btn { color: #fff; }
body.zl-page .nav.scrolled .nav-dd-btn { color: var(--text-ink-soft); }
body.zl-page .nav.scrolled .nav-dd-btn:hover { color: var(--text-ink); }
body.zl-page .nav-links .nav-dd-menu a, body.zl-page .nav-links .nav-dd-menu a:hover { color: var(--text-ink); }
body.zl-page .nav-divider { background: rgba(230, 233, 240, 0.3); }
body.zl-page .nav.scrolled .nav-divider { background: var(--border-paper); }

@media (max-width: 1080px) {
  .nav-divider { display: none; }
  .nav-links.open { max-height: calc(100vh - 90px); overflow-y: auto; box-shadow: 0 18px 30px -20px rgba(14,23,41,0.3); }
  .nav-links.open .nav-dd { width: 100%; }
  .nav-links.open .nav-dd-btn {
    pointer-events: none; padding: 16px 0 4px; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--text-ink-muted);
  }
  .nav-links.open .nav-dd-chev { display: none; }
  .nav-links.open .nav-dd-menu {
    position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
    background: none; border: 0; box-shadow: none; padding: 0;
  }
  .nav-links.open .nav-dd-menu::before { display: none; }
  .nav-links.open .nav-dd-menu a { padding: 9px 0; }
  .nav-links.open .nav-dd-menu a span { display: none; }
  .nav-links.open .nav-mobile-only { display: block; margin-top: 10px; font-weight: 500; color: var(--accent); }
  body.zl-page .nav-links.open > a, body.zl-page .nav-links.open .nav-dd-menu a { color: var(--text-ink); }
  body.zl-page .nav-links.open .nav-mobile-only { color: var(--accent); }
}

/* ---- Founding team: ten equal tiles ---- */

/* ---- Homepage: program cards ---- */
.programs { padding-block: clamp(72px, 9vw, 120px); }
.prog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.prog-card {
  background: var(--card); border: 1px solid var(--border-paper); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.prog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.prog-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; letter-spacing: -0.015em; }
.prog-p { color: var(--text-ink-soft); font-size: 15.5px; line-height: 1.6; flex: 1; }
.prog-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; }
@media (max-width: 900px) { .prog-grid { grid-template-columns: 1fr; } }

/* ---- Homepage: proof links ---- */

.pl-num { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 46px); line-height: 1; letter-spacing: -0.02em; color: var(--text-ink); }

/* ---- Testimonials (hidden until quotes arrive) ---- */

/* ---- About: team cards ---- */

/* ---- Case-study category pages ---- */
.cs-h1 { max-width: 22ch; }
.cs-note { margin-top: 26px; color: var(--text-ink-soft); font-size: 15px; }
.steps .structure-row { grid-template-columns: 24px minmax(0, 0.9fr) minmax(0, 1.6fr); }
@media (max-width: 760px) { .steps .structure-row { grid-template-columns: 18px 1fr; } .steps .structure-row > div:last-child { grid-column: 2; } }

/* ---- For schools: four ways ---- */

/* ---- Contact page ---- */

.contact-card { max-width: 680px; margin: 0 auto; }
/* current-section marker must stay light while the nav floats over a photo */
body.zl-page .nav:not(.scrolled) .nav-dd.is-current .nav-dd-btn,
body.zl-page .nav:not(.scrolled) .nav-links > a[aria-current="page"] { color: #fff; }
@media (max-width: 1080px) {
  .nav-links.open > a:not(.nav-mobile-only) { color: var(--text-ink); }
  body.zl-page .nav:not(.scrolled) .nav-links.open .nav-dd.is-current .nav-dd-btn { color: var(--text-ink-muted); }
}
body.zl-page .nav.scrolled .nav-dd.is-current .nav-dd-btn { color: var(--text-ink); }

/* ============================================================
   RISO DESIGN SYSTEM (September 2026)
   Palette from the Midjourney riso prints: ultramarine and coral
   inks on peach paper, anchored by the seal's navy.
     Paper #FFFFFF · Soft paper #F5F7FA · Card #F5F7FA
     Ink #101A2E · Riso blue #22458A (actions) · Coral #E59375 (highlights)
     Night #0E1729 (dark bands) · Seal navy #152636 · Sand #FFFFFF (site paper; darker #E2E6EE retired 2026-09-28)
   Motion: riso-dots.js draws every dot live (data-dots), including the
   halftone glow in dark bands. All motion stops under
   prefers-reduced-motion.
   ============================================================ */

/* ---- Paper grain over everything, like ink on uncoated stock ---- */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 70;
  background-image: url('/art/grain.png'); background-size: 220px 220px;
  opacity: 0.16; mix-blend-mode: multiply;
}

/* ---- Coral for decorative marks; blue stays for anything clickable ---- */
.eyebrow::before, .structure-row .rtitle::after, .tl-row::before{ background: var(--coral); }
.tl-day, .faq-toggle{ color: var(--coral-deep); }
.hl { background: linear-gradient(transparent 58%, rgba(229,147,117,0.38) 58%); color: inherit; }

/* ---- Buttons: riso blue with a soft ink bloom ---- */
.btn { border-radius: 999px; }
.btn-primary { background: var(--riso-blue); color: #FFFFFF; box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 6px 18px -10px rgba(24,51,102,0.55); }
.btn-primary:hover { background: var(--riso-blue-dk); box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 12px 28px -10px rgba(34,69,138,0.6), 0 0 0 4px rgba(229,147,117,0.22); }
.btn-ghost { border-color: rgba(16,26,46,0.22); }
.btn-ghost:hover { border-color: var(--riso-blue); color: var(--riso-blue); background: rgba(34,69,138,0.05); }
.tlink { color: var(--riso-blue); text-decoration-color: rgba(229,147,117,0.7); }
.tlink:hover { color: var(--riso-blue-dk); }
.lang-switch a.lang-active { background: var(--riso-blue); color: #FFFFFF; }
.nav.scrolled { background: rgba(255, 255, 255,0.86); }

/* ---- Homepage hero: big lockup left, what-we-do right, moving waves below ---- */
.hero-riso { position: relative; background: var(--paper-art); padding: 0; overflow: hidden; }
.hero-riso-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px);
  align-items: center; padding-top: clamp(118px, 15vh, 160px); padding-bottom: 0;
}
.hero-riso-copy .hero-eyebrow-row { margin-bottom: 14px; }
.hero-riso-h1 {
  font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: -0.022em; line-height: 1.04;
  font-size: clamp(34px, 3.5vw, 56px); color: var(--text-ink); margin-bottom: 18px; text-wrap: balance;
}
.hero-riso-h1 em { color: var(--riso-blue); }
.hero-riso-copy .lede { font-size: clamp(16px, 1.15vw, 18px); color: var(--text-ink-soft); max-width: 50ch; }
.hero-riso-copy .hero-cta { margin-top: 24px; }
@media (max-width: 900px) {
  .hero-riso-grid { grid-template-columns: 1fr; gap: 26px; padding-top: 118px; }
}

/* ---- Every hero with page art: artwork on the right, fading into paper ---- */
[data-dots] { background-repeat: no-repeat; background-size: cover; }
.curr-hero.has-art .reveal { max-width: min(56vw, 700px); }
 .curr-hero.has-art h1 { font-size: clamp(40px, 4.4vw, 70px); max-width: 13ch; }
@media (max-width: 860px) {
   .curr-hero.has-art .reveal { max-width: 100% !important; }
}

/* ---- Dark bands and footer: halftone night sky with a drifting glow ---- */
 .footer { position: relative; isolation: isolate; background-color: var(--bg-dark); }
.ticker { background: #0B1322; }

/* ---- Photo heroes: navy duotone and a halftone screen so they sit in the same print ---- */

@keyframes photo-pan { 0% { background-position: 50% 26%; } 100% { background-position: 50% 42%; } }

/* ---- Cards pick up the warm paper ---- */
.zl-card, .prog-card{ background: var(--card); }

 html[lang="zh-CN"] .curr-hero.has-art h1 { max-width: 12em; }

/* ---- Round 2: seal-only hero, lockup in nav and footer, logo row ---- */

.nav-lockup { height: 30px; width: auto; display: block; }
@media (max-width: 480px) { .nav-lockup { height: 23px; } }
body.zl-page .nav-lockup { filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.35)); transition: filter var(--dur-fast) var(--ease); }
body.zl-page .nav.scrolled .nav-lockup { filter: none; }
.footer-lockup-link { display: inline-block; margin-bottom: 18px; }
.footer-lockup { height: 40px; width: auto; display: block; }

/* ---- Round 3: live dot artwork, centred hero, credentials in two rows ---- */

.hero-riso { min-height: calc(100vh - var(--ticker-h)); min-height: calc(100svh - var(--ticker-h)); display: flex; align-items: center; background: #EEF1F6; }
.hero-riso-grid { width: 100%; padding-top: 104px; padding-bottom: 56px; align-items: center; }
.hero-riso-copy { position: relative; }
.hero-riso-copy::before {
  content: ""; position: absolute; inset: -18% -14% -18% -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(238, 241, 246,0.92), rgba(238, 241, 246,0.75) 55%, rgba(238, 241, 246,0) 100%);
}
@media (max-width: 900px) {
  .hero-riso { align-items: flex-start; }
  .hero-riso-grid { padding-top: 110px; }
}

/* ---- Round 4: printed knot panel in the hero ---- */
.hero-riso { background: var(--bg-paper); }
.hero-riso-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
.hero-art { position: relative; padding-left: clamp(70px, 8vw, 130px); }
.hero-riso-copy::before { display: none; }
@media (max-width: 900px) {
  .hero-art { padding-left: 0; }
  .hero-riso-copy { margin-top: 44px; }
}
@media (max-width: 900px) {
  .hero-riso-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 104px; }
  .hero-riso-copy { margin-top: 36px; }
}

/* ---- Artwork removed (2026-09-24); layout kept, seal stands alone ---- */
.hero-art { padding-left: 0; display: flex; justify-content: center; }
.hero-riso-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 900px) { .hero-riso-grid { grid-template-columns: 1fr; } .hero-riso-copy { margin-top: 8px; } }

/* ---- Hero print (riso-shimmer.js): exact print, gently animated; seal overlaps its edge ---- */
.hero-riso-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: clamp(28px, 3.5vw, 56px); }
.hero-art { position: relative; display: block; padding-left: clamp(60px, 6vw, 110px); }
.shimmer-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 600ms var(--ease); }
.shimmer-live .shimmer-canvas { opacity: 1; }
@media (max-width: 900px) {
  .hero-riso-grid { grid-template-columns: 1fr; }
  .hero-art { padding-left: 0; padding-bottom: 56px; }
}

/* ---- Hero: the print fills the whole hero; seal and copy sit on top ---- */
.hero-full { background: #E9E6E8; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 25% 50%; display: block; }
.hero-full .hero-riso-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); position: relative; z-index: 2; }
.hero-full .hero-art { padding-left: 0; display: flex; justify-content: center; }
.hero-full .nav:not(.scrolled) { background: transparent; }
@media (max-width: 900px) {
  .hero-full .hero-riso-grid { grid-template-columns: 1fr; }
  .hero-full .hero-art { padding-bottom: 0; }
}