/* ─────────────────────────────────────────────
     SURFACE 1 — DARK CINEMATIC
     LeleKai platform shell · 12 sections
     MUBI × Criterion × Festival de Cannes prestige
     ───────────────────────────────────────────── */

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

  :root {
    --black:        #050507;
    --near-black:   #0A0A0E;
    --dark:         #10101A;
    --panel:        #16162A;
    --panel-light:  #1F1F36;
    --border:       rgba(201,168,76,0.18);
    --border-dim:   rgba(255,255,255,0.07);
    --gold:         #C9A84C;
    --gold-light:   #E0C070;
    --gold-dim:     rgba(201,168,76,0.4);
    --cream:        #F1EAD8;
    --cream-dim:    rgba(241,234,216,0.7);
    --cream-muted:  rgba(241,234,216,0.4);
    --oxblood:      #8A2A20;
    --oxblood-deep: #6E1F18;
    --oxblood-soft: rgba(138,42,32,0.12);
    --ochre:        #B8851F;

    --fnt-display: 'Fraunces', Georgia, serif;
    --fnt-body:    'Inter Tight', system-ui, sans-serif;
    --fnt-edit:    'Newsreader', Georgia, serif;
    --fnt-mono:    'JetBrains Mono', ui-monospace, monospace;

    --gutter-mobile: 22px;
    --gutter-desktop: 56px;
  }

  html { scroll-behavior: smooth; }

  body {
    background: var(--black);
    color: var(--cream);
    font-family: var(--fnt-body);
    font-weight: 300;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  ::selection { background: var(--gold); color: var(--black); }

  a { color: inherit; text-decoration: none; }
  img, video { max-width: 100%; display: block; }

  /* Film grain overlay — site-wide */
  body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 200;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    background-size: 220px;
    mix-blend-mode: overlay;
    opacity: 0.5;
  }

  /* ─── Legal coming-soon anchor ─── */
  .legal-anchor {
    border-top: 1px solid var(--border-dim);
    background: linear-gradient(180deg, var(--near-black), var(--black));
    scroll-margin-top: 80px;
  }
  .legal-anchor .asterism {
    color: var(--gold);
    font-size: 1.4rem;
    letter-spacing: 0.4em;
    text-align: center;
  }

  /* ─── Treated photography ─── */
  .treated {
    filter: brightness(0.85) contrast(1.08) saturate(0.85) sepia(0.05);
  }
  .treated-warm {
    filter: brightness(0.9) contrast(1.05) saturate(0.92) sepia(0.10) hue-rotate(-3deg);
  }

  /* ─── Reusable type ─── */
  .eyebrow {
    font-family: var(--fnt-mono);
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 400;
  }
  .eyebrow-cream { color: var(--cream-muted); }

  .display {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    line-height: 1.02;
    letter-spacing: -0.015em;
  }
  .display-roman {
    font-family: var(--fnt-display);
    font-style: normal;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    line-height: 1.02;
    letter-spacing: -0.015em;
  }

  .h-section {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 600;
    font-variation-settings: "opsz" 96, "SOFT" 40;
    font-size: clamp(2.2rem, 6vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -0.012em;
  }

  .lede {
    font-family: var(--fnt-edit);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.7;
    color: var(--cream-dim);
    font-weight: 400;
  }

  .asterism {
    text-align: center;
    color: var(--gold);
    font-size: 1.25rem;
    letter-spacing: 0.6em;
    padding-left: 0.6em;
    margin: 56px auto;
    user-select: none;
  }

  .hairline {
    height: 1px;
    background: var(--gold-dim);
    border: 0;
    margin: 48px 0;
  }
  .hairline-dim { background: var(--border-dim); }

  /* ─── LOGO LOCKUP ─── */
  .logo-lockup { display: flex; align-items: center; gap: 12px; }
  .logo-stork {
    width: 30px; height: 30px;
    background-image: url('../shared/assets/stork-gold-transparent.png');
    background-size: contain; background-repeat: no-repeat; background-position: center;
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(201,168,76,0.25));
  }
  .logo-text {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "opsz" 36, "SOFT" 50;
    font-size: 1.4rem;
    letter-spacing: 0.005em;
    color: var(--cream);
    line-height: 1;
  }
  .logo-text .kai { color: var(--gold); }
  .logo-sub {
    display: block;
    font-family: var(--fnt-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cream-muted);
    margin-top: 4px;
  }

  /* ─── TOP NAV ─── */
  nav.top {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 18px var(--gutter-desktop);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(5,5,7,0.95) 60%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, background 0.3s;
  }
  nav.top.scrolled {
    background: rgba(5,5,7,0.92);
    border-bottom-color: var(--border);
  }
  .nav-center {
    display: flex; gap: 34px; align-items: center;
  }
  .nav-link {
    font-family: var(--fnt-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-dim);
    transition: color 0.2s;
    position: relative;
    padding: 6px 0;
  }
  .nav-link:hover { color: var(--gold); }
  .nav-link.has-sub::after {
    content: '▾'; margin-left: 5px; font-size: 0.6rem; color: var(--cream-muted);
  }
  .nav-sub {
    position: absolute; top: 100%; left: -16px;
    background: var(--near-black);
    border: 1px solid var(--border);
    padding: 14px 18px;
    min-width: 200px;
    opacity: 0; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s;
  }
  .nav-link.has-sub:hover .nav-sub,
  .nav-link.has-sub:focus-within .nav-sub {
    opacity: 1; pointer-events: auto; transform: translateY(0);
  }
  .nav-sub a {
    display: block;
    font-family: var(--fnt-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream-dim);
    padding: 8px 0;
    border-bottom: 1px solid var(--border-dim);
  }
  .nav-sub a:last-child { border-bottom: 0; }
  .nav-sub a:hover { color: var(--gold); }

  .nav-right { display: flex; align-items: center; gap: 18px; }
  .lang-pill {
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream-dim);
    border: 1px solid var(--border-dim);
    padding: 7px 12px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
  }
  .lang-pill:hover { border-color: var(--gold-dim); color: var(--gold-light); }

  .signin-link {
    font-family: var(--fnt-mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-dim);
    cursor: pointer;
    background: none; border: 0;
    padding: 0;
  }
  .signin-link:hover { color: var(--gold); }

  /* ─── BUTTONS ─── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    font-family: var(--fnt-mono);
    font-size: 0.68rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    transition: all 0.25s;
    background: var(--gold);
    color: var(--black);
    font-weight: 500;
    text-decoration: none;
  }
  .btn:hover { background: var(--gold-light); transform: translateY(-1px); }
  .btn-ghost {
    background: transparent;
    color: var(--cream);
    border: 1px solid rgba(241,234,216,0.25);
  }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
  .btn-oxblood {
    background: var(--oxblood);
    color: var(--cream);
  }
  .btn-oxblood:hover { background: var(--oxblood-deep); }
  .btn-arrow::after { content: '↗'; font-size: 0.85rem; letter-spacing: 0; }

  /* ─── MOBILE NAV ─── */
  .hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 4px; }
  .hamburger span {
    display: block; width: 22px; height: 1px; background: var(--cream); margin: 6px 0;
    transition: transform 0.3s, opacity 0.3s;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    position: fixed; inset: 0;
    background: var(--black);
    z-index: 90;
    padding: 110px 32px 40px;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(.7,0,.3,1);
    overflow-y: auto;
  }
  .mobile-menu.open { transform: translateY(0); }
  .mobile-menu a {
    display: block;
    font-family: var(--fnt-display);
    font-style: italic;
    font-size: 2rem;
    color: var(--cream);
    padding: 14px 0;
    border-bottom: 1px solid var(--border-dim);
  }
  .mobile-menu a:hover { color: var(--gold); }
  .mobile-menu .sub { font-size: 1.1rem; padding-left: 18px; color: var(--cream-dim); font-style: normal; font-family: var(--fnt-mono); letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 0; }
  .mobile-cta { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }

  /* ─── SECTIONS ─── */
  section.surface {
    padding: 110px var(--gutter-desktop) 110px;
    position: relative;
  }
  section#section-01 { background: var(--black); padding-top: 0; }
  section#section-02 { background: var(--near-black); }
  section#section-03 { background: var(--oxblood); color: var(--cream); }
  section#section-04 { background: var(--black); }
  section#section-05 { background: var(--near-black); }
  section#section-06,
  section#section-07,
  section#section-08 { background: var(--dark); }
  section#section-09 { background: var(--near-black); }
  section#section-10 { background: var(--black); }
  section#section-11 { background: var(--near-black); }
  section#section-12 { background: var(--black); }

  .container { max-width: 1280px; margin: 0 auto; }
  .container-narrow { max-width: 780px; margin: 0 auto; }
  .container-prose { max-width: 680px; margin: 0 auto; }

  /* ─────── HERO (S01) ─────── */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 120px 24px 80px;
  }
  .hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.55) contrast(1.1) saturate(0.78) sepia(0.08);
    z-index: 0;
  }
  .hero-vignette {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at center, transparent 30%, rgba(5,5,7,0.7) 90%),
      linear-gradient(to bottom, rgba(5,5,7,0.4) 0%, transparent 30%, rgba(5,5,7,0.95) 100%);
    z-index: 1;
  }
  .hero-content {
    position: relative; z-index: 2;
    text-align: center;
    max-width: 920px;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    border: 1px solid var(--gold-dim);
    padding: 9px 18px;
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(201,168,76,0.06);
    margin-bottom: 36px;
  }
  .hero-eyebrow .live-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
    animation: pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse {
    0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201,168,76,0.6); }
    50% { opacity: 0.4; box-shadow: 0 0 0 8px rgba(201,168,76,0); }
  }
  .hero-wordmark {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "opsz" 144, "SOFT" 60;
    font-size: clamp(4rem, 13vw, 10rem);
    line-height: 0.9;
    letter-spacing: -0.025em;
    color: var(--cream);
    margin-bottom: 12px;
  }
  .hero-wordmark .kai { color: var(--gold); }
  .hero-divider {
    width: 80px; height: 1px;
    background: var(--gold);
    margin: 36px auto 32px;
  }
  .hero-tagline {
    font-family: var(--fnt-edit);
    font-style: italic;
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    line-height: 1.55;
    color: var(--cream-dim);
    max-width: 620px;
    margin: 0 auto 44px;
    font-weight: 400;
  }
  .hero-tagline .paren { color: var(--gold); font-style: normal; font-family: var(--fnt-mono); font-size: 0.85em; letter-spacing: 0.04em; }
  .hero-cta-row {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  }
  .hero-scroll {
    position: absolute;
    bottom: 32px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-family: var(--fnt-mono);
    font-size: 0.6rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--cream-muted);
    writing-mode: vertical-rl;
  }
  .hero-trailer-toggle {
    position: absolute;
    bottom: 32px; right: 40px;
    z-index: 3;
    background: rgba(5,5,7,0.65);
    border: 1px solid var(--border);
    color: var(--cream-dim);
    padding: 9px 14px;
    font-family: var(--fnt-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(8px);
  }
  .hero-trailer-toggle:hover { color: var(--gold); border-color: var(--gold); }

  /* ─── KNOBLOCH PULL QUOTE (full bleed) ─── */
  .knobloch {
    padding: 140px var(--gutter-desktop);
    background: var(--near-black);
    text-align: center;
    position: relative;
    border-top: 1px solid var(--border-dim);
    border-bottom: 1px solid var(--border-dim);
  }
  .knobloch::before {
    content: '“';
    position: absolute; top: 30px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--fnt-display);
    font-size: 8rem;
    color: var(--gold);
    opacity: 0.3;
    line-height: 1;
  }
  .knobloch q {
    display: block;
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 80;
    font-size: clamp(1.8rem, 4.5vw, 3.2rem);
    line-height: 1.2;
    color: var(--cream);
    max-width: 920px;
    margin: 0 auto 40px;
    letter-spacing: -0.01em;
    quotes: none;
  }
  .knobloch q::before, .knobloch q::after { content: ''; }
  .knobloch cite {
    font-family: var(--fnt-mono);
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .knobloch cite::before { content: '— '; color: var(--cream-muted); }

  /* ─── 3-block "what this is" ─── */
  .three-blocks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-dim);
    margin-top: 80px;
  }
  .three-block {
    background: var(--black);
    padding: 56px 40px;
    position: relative;
  }
  .three-block .num {
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    color: var(--gold);
    margin-bottom: 24px;
    display: block;
  }
  .three-block h3 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 600;
    font-variation-settings: "opsz" 72, "SOFT" 50;
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 18px;
    color: var(--cream);
  }
  .three-block p {
    font-family: var(--fnt-edit);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cream-dim);
  }

  /* ─── audience entry cards ─── */
  .entry-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
  }
  .entry-card {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    cursor: pointer;
    background: var(--panel);
    transition: transform 0.4s;
  }
  .entry-card:hover { transform: translateY(-4px); }
  .entry-card .bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform 0.6s;
  }
  .entry-card:hover .bg { transform: scale(1.04); }
  .entry-card .scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(5,5,7,0.85) 75%, var(--black) 100%);
  }
  .entry-card .body {
    position: absolute; inset: auto 0 0 0;
    padding: 32px 28px;
    z-index: 2;
  }
  .entry-card .eyebrow { color: var(--gold); margin-bottom: 12px; display: block; }
  .entry-card h3 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "opsz" 96, "SOFT" 50;
    font-size: 2.1rem;
    line-height: 1; margin-bottom: 10px;
    color: var(--cream);
  }
  .entry-card p {
    font-size: 0.92rem;
    color: var(--cream-dim);
    margin-bottom: 14px;
  }
  .entry-card .cta {
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .entry-card .cta::after { content: ' →'; }

  /* ─── manifesto preview lane ─── */
  .lane {
    margin-top: 100px;
    padding: 64px 0;
    border-top: 1px solid var(--gold-dim);
    border-bottom: 1px solid var(--gold-dim);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 64px;
    align-items: start;
  }
  .lane .lane-label .eyebrow { display: block; margin-bottom: 18px; }
  .lane .lane-label .num {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 400;
    font-size: 4rem;
    color: var(--gold);
    line-height: 1;
  }
  .lane .lane-body p {
    font-family: var(--fnt-edit);
    font-size: 1.2rem;
    line-height: 1.65;
    color: var(--cream);
    margin-bottom: 18px;
  }
  .lane .lane-body p .quote { font-style: italic; color: var(--gold-light); }
  .lane .lane-body a {
    font-family: var(--fnt-mono);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid var(--gold-dim);
    padding-bottom: 4px;
  }

  /* ─── selected work strip ─── */
  .work-header {
    display: flex; justify-content: space-between; align-items: end;
    margin-bottom: 40px;
    flex-wrap: wrap; gap: 16px;
  }
  .work-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .film-card { cursor: pointer; }
  .film-poster {
    aspect-ratio: 2/3;
    background: var(--panel);
    background-size: cover; background-position: center;
    border: 1px solid var(--border-dim);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s;
  }
  .film-card:hover .film-poster { transform: translateY(-4px); border-color: var(--gold-dim); }
  .film-poster::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(201,168,76,0.06));
  }
  .film-poster .runtime {
    position: absolute; top: 10px; left: 10px;
    font-family: var(--fnt-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: var(--cream);
    background: rgba(5,5,7,0.7);
    padding: 4px 8px;
    z-index: 2;
  }
  .film-poster .youth-tag {
    position: absolute; top: 10px; right: 10px;
    font-family: var(--fnt-mono);
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    color: var(--black);
    background: var(--gold);
    padding: 4px 7px;
    z-index: 2;
  }
  .film-title {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 600;
    font-variation-settings: "opsz" 36, "SOFT" 50;
    font-size: 1.15rem;
    line-height: 1.15;
    margin-bottom: 4px;
    color: var(--cream);
  }
  .film-meta {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cream-muted);
    margin-bottom: 10px;
  }
  .tool-chips { display: flex; gap: 5px; flex-wrap: wrap; }
  .tool-chip {
    font-family: var(--fnt-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--gold-dim);
    padding: 2px 7px;
  }

  /* ─── dispatch list strip ─── */
  .dispatch-list .item {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 32px;
    padding: 28px 0;
    border-bottom: 1px solid var(--border-dim);
    align-items: baseline;
  }
  .dispatch-list .item:hover { background: rgba(201,168,76,0.025); }
  .dispatch-list .date {
    font-family: var(--fnt-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .dispatch-list h4 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 500;
    font-variation-settings: "opsz" 48, "SOFT" 40;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--cream);
    margin-bottom: 6px;
  }
  .dispatch-list .deck {
    font-family: var(--fnt-edit);
    font-size: 0.95rem;
    color: var(--cream-dim);
  }
  .dispatch-list .read {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream-muted);
    white-space: nowrap;
  }

  /* ─── partner grid ─── */
  .partner-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--border-dim);
    margin-top: 40px;
  }
  .partner-cell {
    background: var(--black);
    aspect-ratio: 5/3;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-muted);
    text-align: center; padding: 12px;
    position: relative;
  }
  .partner-cell::after {
    content: 'Announced July 2026';
    position: absolute;
    bottom: 8px; left: 50%; transform: translateX(-50%);
    font-size: 0.5rem; letter-spacing: 0.2em;
    color: var(--gold-dim);
  }

  /* ─── newsletter ─── */
  .newsletter {
    margin-top: 100px;
    padding: 64px 48px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(201,168,76,0.04), transparent);
    text-align: center;
  }
  .newsletter h3 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-size: 2.4rem;
    color: var(--cream);
    margin-bottom: 14px;
  }
  .newsletter p {
    color: var(--cream-dim);
    margin-bottom: 28px;
    font-family: var(--fnt-edit);
  }
  .newsletter form {
    display: flex; gap: 0;
    max-width: 520px; margin: 0 auto;
    border: 1px solid var(--border);
  }
  .newsletter input {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--cream);
    font-family: var(--fnt-mono);
    font-size: 0.78rem;
    padding: 16px 18px;
    letter-spacing: 0.05em;
    outline: none;
  }
  .newsletter input::placeholder { color: var(--cream-muted); }
  .newsletter button {
    background: var(--gold); color: var(--black);
    border: 0; padding: 0 24px;
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 500;
  }
  .newsletter .tier-teaser {
    margin-top: 18px;
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream-muted);
  }
  .form-success {
    color: var(--gold);
    font-family: var(--fnt-mono);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 16px 0;
    display: none;
  }
  .form-success.show { display: block; }

  /* ─── SECTION 02 / About ─── */
  .about-hero {
    margin: -110px calc(var(--gutter-desktop) * -1) 80px;
    height: 70vh;
    min-height: 480px;
    position: relative;
    overflow: hidden;
    display: flex; align-items: end;
    padding: 0 var(--gutter-desktop) 64px;
  }
  .about-hero .bg {
    position: absolute; inset: 0;
    background: url('../shared/assets/cannes-atmosphere.png') center/cover;
    filter: brightness(0.55) contrast(1.1) saturate(0.78) sepia(0.08);
  }
  .about-hero .scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(5,5,7,0.4), rgba(5,5,7,0.95));
  }
  .about-hero h1 {
    position: relative; z-index: 2;
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "opsz" 144, "SOFT" 60;
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--cream);
    max-width: 920px;
  }
  .about-hero h1 em { color: var(--gold); font-style: italic; }

  .about-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    margin-bottom: 100px;
  }
  .about-grid h3.h-section { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom: 6px; }
  .about-grid .body p {
    font-family: var(--fnt-edit);
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--cream-dim);
    margin-bottom: 20px;
  }

  .advisor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-dim);
    margin-top: 48px;
  }
  .advisor-card {
    background: var(--near-black);
    padding: 36px 28px;
    border-left: 2px solid var(--gold);
  }
  .advisor-card.tba { border-left-color: var(--cream-muted); opacity: 0.6; }
  .advisor-card .role {
    font-family: var(--fnt-mono);
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
  }
  .advisor-card .name {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--cream);
    margin-bottom: 4px;
  }
  .advisor-card .city {
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: var(--cream-muted);
    text-transform: uppercase;
  }

  .map-block {
    margin-top: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .office {
    border: 1px solid var(--border);
    padding: 32px;
    background: rgba(201,168,76,0.03);
  }
  .office .city-name {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 8px;
  }
  .office .addr {
    font-family: var(--fnt-edit);
    color: var(--cream-dim);
    line-height: 1.6;
  }
  .office .role-tag {
    font-family: var(--fnt-mono);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    color: var(--cream-muted);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
  }

  /* ─── SECTION 03 — MANIFESTO (cream-on-oxblood) ─── */
  #section-03 { color: var(--cream); }
  .manifesto-hero {
    text-align: center;
    padding: 60px 0 80px;
    border-bottom: 1px solid rgba(241,234,216,0.2);
  }
  .manifesto-hero .eyebrow { color: var(--cream); }
  .manifesto-hero .display {
    font-size: clamp(3.5rem, 10vw, 8rem);
    color: var(--cream);
    margin-top: 28px;
  }
  .manifesto-hero .display-roman {
    font-size: clamp(3.5rem, 10vw, 8rem);
    color: var(--cream-dim);
  }
  .manifesto-hero .asterism { color: var(--cream); margin: 32px auto 0; }

  .manifesto-figure {
    margin: 80px auto;
    max-width: 920px;
  }
  .manifesto-figure img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    filter: brightness(0.92) contrast(1.05) saturate(0.9) sepia(0.15);
  }
  .manifesto-figure figcaption {
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-dim);
    text-align: center;
    margin-top: 16px;
  }

  .manifesto-byline {
    text-align: center;
    font-family: var(--fnt-mono);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cream-dim);
    margin-bottom: 60px;
  }
  .manifesto-byline span { color: var(--cream); }

  .essay {
    max-width: 680px;
    margin: 0 auto;
    font-family: var(--fnt-edit);
    font-size: 1.18rem;
    line-height: 1.85;
    color: var(--cream);
  }
  .essay p { margin-bottom: 24px; }
  .essay p.first::first-letter {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    float: left;
    font-size: 5.5rem;
    line-height: 0.78;
    padding: 8px 14px 0 0;
    color: var(--cream);
  }
  .essay h3 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 600;
    font-size: 2rem;
    margin: 40px 0 18px;
    color: var(--cream);
    line-height: 1.1;
  }
  .essay .pull {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.7rem;
    line-height: 1.3;
    border-left: 3px solid var(--cream);
    padding: 8px 0 8px 24px;
    margin: 32px -24px;
    color: var(--cream);
  }
  .essay .pull cite {
    display: block;
    font-family: var(--fnt-mono);
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cream-dim);
    margin-top: 14px;
  }
  .essay .asterism { color: var(--cream); margin: 56px auto; }
  .essay .signature {
    font-family: var(--fnt-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--cream);
    margin-top: 50px;
    text-align: right;
    border-top: 1px solid rgba(241,234,216,0.2);
    padding-top: 24px;
  }

  .related-essays {
    max-width: 1100px;
    margin: 100px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .related-essays .card {
    background: rgba(241,234,216,0.05);
    border: 1px solid rgba(241,234,216,0.15);
    padding: 28px;
  }
  .related-essays .card .date {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cream-dim);
    margin-bottom: 14px;
  }
  .related-essays .card h5 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--cream);
  }

  /* ─── SECTION 04 — Festival 2026 ─── */
  .dates-poster {
    text-align: center;
    padding: 60px 0 100px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 100px;
  }
  .dates-poster .eyebrow { display: block; margin-bottom: 32px; }
  .dates-poster .dates {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "opsz" 144, "SOFT" 60;
    font-size: clamp(4rem, 16vw, 14rem);
    line-height: 0.85;
    color: var(--cream);
    letter-spacing: -0.04em;
  }
  .dates-poster .dates em {
    color: var(--gold);
    font-style: italic;
    font-weight: 400;
  }
  .dates-poster .place {
    font-family: var(--fnt-mono);
    font-size: 0.85rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 32px;
  }
  .dates-poster .place::before, .dates-poster .place::after { content: ' · '; color: var(--cream-muted); }

  .schedule {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--border-dim);
  }
  .day-row {
    display: grid;
    grid-template-columns: 100px 130px 1fr;
    gap: 32px;
    padding: 28px 0;
    border-bottom: 1px solid var(--border-dim);
    align-items: baseline;
  }
  .day-row:hover { background: rgba(201,168,76,0.025); }
  .day-row .day-num {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--gold);
    line-height: 1;
  }
  .day-row .day-label {
    font-family: var(--fnt-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-dim);
  }
  .day-row .day-content h4 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--cream);
    margin-bottom: 4px;
  }
  .day-row .day-content p {
    font-family: var(--fnt-edit);
    color: var(--cream-dim);
    font-size: 0.98rem;
  }

  .venues {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 80px;
  }
  .venue {
    border: 1px solid var(--border);
    padding: 36px 28px;
    background: linear-gradient(180deg, rgba(201,168,76,0.04), transparent);
  }
  .venue .num {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .venue h4 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.7rem;
    color: var(--cream);
    margin-bottom: 12px;
    line-height: 1.1;
  }
  .venue p {
    font-family: var(--fnt-edit);
    color: var(--cream-dim);
    font-size: 0.95rem;
  }

  .paths {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-dim);
    margin-top: 60px;
  }
  .path {
    background: var(--near-black);
    padding: 32px;
    text-align: center;
  }
  .path .num {
    font-family: var(--fnt-display); font-style: italic;
    font-size: 3rem; color: var(--gold); line-height: 1;
    margin-bottom: 18px;
  }
  .path h5 {
    font-family: var(--fnt-mono);
    font-size: 0.78rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cream); margin-bottom: 12px;
  }
  .path p {
    font-family: var(--fnt-edit);
    color: var(--cream-dim); font-size: 0.92rem;
  }

  /* ─── SECTION 05 — Films ─── */
  .films-hero-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 40px;
    height: 360px;
    overflow: hidden;
  }
  .films-still {
    background-size: cover; background-position: center;
    filter: brightness(0.78) contrast(1.1) saturate(0.8) sepia(0.05);
    transition: filter 0.5s;
  }
  .films-still:hover { filter: brightness(1) contrast(1.05) saturate(1); }

  .filter-chips {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin: 40px 0 50px;
  }
  .chip {
    font-family: var(--fnt-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-dim);
    border: 1px solid var(--border-dim);
    padding: 10px 18px;
    cursor: pointer;
    background: transparent;
    transition: all 0.2s;
  }
  .chip:hover { color: var(--gold); border-color: var(--gold-dim); }
  .chip.active { color: var(--black); background: var(--gold); border-color: var(--gold); }

  .film-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }

  /* ─── SECTION 06–08 ─── */
  .for-you-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 100px;
  }
  .for-you-hero .photo {
    aspect-ratio: 4/5;
    background-size: cover; background-position: center;
    filter: brightness(0.85) contrast(1.08) saturate(0.85) sepia(0.05);
  }
  .for-you-hero h2 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "opsz" 144, "SOFT" 60;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    line-height: 1.02;
    color: var(--cream);
    letter-spacing: -0.018em;
    margin-bottom: 24px;
  }
  .for-you-hero h2 em { color: var(--gold); }
  .for-you-hero p { color: var(--cream-dim); font-family: var(--fnt-edit); font-size: 1.1rem; }

  .submission-window {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1px;
    background: var(--border-dim);
    margin: 60px 0;
  }
  .window-card {
    background: var(--dark);
    padding: 40px;
  }
  .window-card .label {
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .window-card .range {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 600;
    font-size: 2rem;
    color: var(--cream);
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .window-card .for {
    font-family: var(--fnt-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--cream-muted);
    text-transform: uppercase;
  }

  .tracks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 50px 0;
  }
  .track {
    border: 1px solid var(--border);
    padding: 28px 22px;
    text-align: center;
    background: rgba(201,168,76,0.04);
  }
  .track .ico {
    font-family: var(--fnt-display); font-style: italic;
    color: var(--gold);
    font-size: 2.4rem; line-height: 1;
    margin-bottom: 10px;
  }
  .track h5 {
    font-family: var(--fnt-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream);
  }

  .prizes {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border-dim);
  }
  .prize {
    background: var(--dark);
    padding: 36px;
    border-left: 3px solid var(--gold);
  }
  .prize .amt {
    font-family: var(--fnt-display); font-style: italic;
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 10px;
  }
  .prize h5 {
    font-family: var(--fnt-display); font-style: italic;
    font-size: 1.4rem; color: var(--cream); margin-bottom: 6px;
  }
  .prize p { color: var(--cream-dim); font-family: var(--fnt-edit); font-size: 0.95rem; }

  .curric {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-dim);
    margin: 60px 0;
  }
  .module {
    background: var(--dark);
    padding: 32px;
    position: relative;
  }
  .module .num {
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    color: var(--gold);
    margin-bottom: 16px;
  }
  .module h5 {
    font-family: var(--fnt-display); font-style: italic;
    font-size: 1.5rem; color: var(--cream); margin-bottom: 8px;
  }
  .module p { color: var(--cream-dim); font-family: var(--fnt-edit); font-size: 0.95rem; }

  .pilot-schools {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 40px;
  }
  .pilot {
    border: 1px solid var(--border-dim);
    padding: 24px 20px;
    text-align: center;
  }
  .pilot .country {
    font-family: var(--fnt-mono);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .pilot .name {
    font-family: var(--fnt-display); font-style: italic;
    color: var(--cream); font-size: 1.05rem;
  }
  .pilot.your { border-color: var(--gold); border-style: dashed; }
  .pilot.your .name { color: var(--gold); }

  .policy-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 40px;
    font-size: 0.88rem;
  }
  .policy-table th {
    font-family: var(--fnt-mono);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1px solid var(--gold-dim);
  }
  .policy-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--border-dim);
    color: var(--cream-dim);
    font-family: var(--fnt-edit);
  }
  .policy-table td:first-child { color: var(--cream); font-weight: 500; }

  /* ─── PARTNER tiers ─── */
  .tiers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 60px 0;
  }
  .tier {
    border: 1px solid var(--border);
    padding: 40px 32px;
    background: linear-gradient(180deg, rgba(201,168,76,0.05), transparent);
    position: relative;
  }
  .tier.featured {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(201,168,76,0.1), rgba(138,42,32,0.06));
  }
  .tier.featured::before {
    content: 'Most chosen';
    position: absolute; top: -10px; left: 32px;
    font-family: var(--fnt-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--gold);
    padding: 4px 10px;
  }
  .tier .price {
    font-family: var(--fnt-display); font-style: italic; font-weight: 700;
    color: var(--gold);
    font-size: 1.7rem;
    margin-bottom: 6px;
  }
  .tier h3 {
    font-family: var(--fnt-display); font-style: italic;
    font-weight: 600;
    font-size: 2rem;
    color: var(--cream);
    margin-bottom: 16px;
  }
  .tier p {
    color: var(--cream-dim); font-family: var(--fnt-edit);
    font-size: 1rem;
    line-height: 1.7;
  }

  .why-now {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 60px 0;
  }
  .why {
    border-left: 2px solid var(--gold);
    padding: 16px 0 16px 22px;
  }
  .why .num {
    font-family: var(--fnt-display); font-style: italic;
    color: var(--gold); font-size: 2.4rem; line-height: 1; margin-bottom: 12px;
  }
  .why h5 {
    font-family: var(--fnt-display); font-style: italic;
    color: var(--cream); font-size: 1.3rem; margin-bottom: 6px;
  }
  .why p { color: var(--cream-dim); font-family: var(--fnt-edit); font-size: 0.95rem; }

  /* ─── SECTION 10 — Membership ─── */
  .pricing-poster {
    text-align: center;
    padding: 40px 0 80px;
  }
  .pricing-poster h1 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "opsz" 144, "SOFT" 60;
    font-size: clamp(3rem, 10vw, 8rem);
    line-height: 0.92;
    color: var(--cream);
    letter-spacing: -0.025em;
  }
  .pricing-poster h1 em { color: var(--gold); }

  .price-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--gold-dim);
  }
  .price-tier {
    background: var(--near-black);
    padding: 36px 28px;
    border-top: 3px solid var(--gold);
    display: flex; flex-direction: column;
  }
  .price-tier .pname {
    font-family: var(--fnt-display); font-style: italic; font-weight: 700;
    color: var(--cream);
    font-size: 1.7rem; margin-bottom: 4px;
  }
  .price-tier .price-amt {
    font-family: var(--fnt-display); font-style: italic;
    color: var(--gold); font-size: 1.5rem;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border-dim);
    padding-bottom: 20px;
  }
  .price-tier ul { list-style: none; flex: 1; }
  .price-tier li {
    font-family: var(--fnt-edit);
    color: var(--cream-dim);
    font-size: 0.94rem;
    line-height: 1.55;
    padding: 8px 0 8px 20px;
    position: relative;
  }
  .price-tier li::before {
    content: '⁂'; position: absolute; left: 0; top: 6px;
    color: var(--gold); font-size: 0.7rem; letter-spacing: 0;
  }
  .price-tier .btn { margin-top: 24px; align-self: stretch; justify-content: center; }

  .faq { margin-top: 80px; }
  .faq-item {
    border-bottom: 1px solid var(--border-dim);
    padding: 24px 0;
    cursor: pointer;
  }
  .faq-item summary {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--cream);
    list-style: none;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: '+';
    font-family: var(--fnt-mono);
    color: var(--gold);
    font-size: 1.4rem;
    transition: transform 0.2s;
  }
  .faq-item[open] summary::after { content: '–'; }
  .faq-item p {
    margin-top: 14px;
    color: var(--cream-dim);
    font-family: var(--fnt-edit);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 720px;
  }

  /* ─── PRESS ─── */
  .press-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 60px;
  }
  .download-block {
    border: 1px solid var(--border);
    padding: 36px 28px;
    background: linear-gradient(180deg, rgba(201,168,76,0.04), transparent);
  }
  .download-block h4 {
    font-family: var(--fnt-display); font-style: italic;
    font-weight: 600;
    font-size: 1.5rem; color: var(--cream); margin-bottom: 8px;
  }
  .download-block p {
    color: var(--cream-dim); font-family: var(--fnt-edit);
    font-size: 0.95rem; margin-bottom: 18px;
  }
  .quote-pull {
    border-left: 3px solid var(--oxblood);
    padding: 4px 0 4px 22px;
    margin: 18px 0;
    font-family: var(--fnt-display); font-style: italic;
    font-size: 1.3rem;
    color: var(--cream);
    line-height: 1.4;
  }
  .quote-pull cite {
    display: block;
    margin-top: 10px;
    font-family: var(--fnt-mono);
    font-style: normal;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-muted);
  }

  /* ─── CONTACT ─── */
  .contact-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-dim);
    margin: 60px 0;
  }
  .contact-card {
    background: var(--near-black);
    padding: 32px 24px;
    text-align: center;
  }
  .contact-card .role {
    font-family: var(--fnt-mono);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .contact-card .email {
    font-family: var(--fnt-display); font-style: italic;
    font-weight: 500;
    color: var(--cream);
    font-size: 1.1rem;
    word-break: break-all;
  }

  .contact-form {
    margin-top: 80px;
    max-width: 720px;
  }
  .field {
    display: block;
    margin-bottom: 24px;
  }
  .field label {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
    display: block;
  }
  .field input, .field select, .field textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--cream);
    font-family: var(--fnt-edit);
    font-size: 1.1rem;
    padding: 10px 0;
    outline: none;
    transition: border-color 0.2s;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    border-bottom-color: var(--gold);
  }
  .field select { -webkit-appearance: none; appearance: none; cursor: pointer; }
  .field textarea { min-height: 120px; resize: vertical; }

  /* ─── FOOTER ─── */
  footer {
    background: var(--black);
    border-top: 1px solid var(--border);
    padding: 80px var(--gutter-desktop) 32px;
    color: var(--cream-dim);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(5, 1fr);
    gap: 48px;
    margin-bottom: 60px;
  }
  .footer-brand .logo-text { font-size: 1.6rem; margin-bottom: 18px; display: block; }
  .footer-brand p {
    font-family: var(--fnt-edit);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--cream-muted);
  }
  .footer-col h6 {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
  }
  .footer-col ul { list-style: none; }
  .footer-col li {
    padding: 6px 0;
    font-family: var(--fnt-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .footer-col li a { color: var(--cream-dim); }
  .footer-col li a:hover { color: var(--gold); }

  .colophon {
    border-top: 1px solid var(--border-dim);
    padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px;
    font-family: var(--fnt-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-muted);
  }
  .colophon a { color: var(--cream-muted); }
  .colophon a:hover { color: var(--gold); }
  .colophon .center { text-align: center; flex: 1; }

  /* ─── COOKIE BANNER ─── */
  .cookie {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    background: var(--cream);
    color: var(--black);
    padding: 14px 24px;
    border-radius: 100px;
    display: flex; align-items: center; gap: 16px;
    font-family: var(--fnt-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    max-width: calc(100vw - 32px);
    flex-wrap: wrap;
    justify-content: center;
  }
  .cookie.hidden { display: none; }
  .cookie p { font-style: normal; }
  .cookie button {
    border: 0;
    background: var(--black);
    color: var(--cream);
    padding: 7px 14px;
    border-radius: 100px;
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .cookie button.ghost { background: transparent; color: var(--black); border: 1px solid var(--black); }

  /* ─── MODALS ─── */
  .modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(5,5,7,0.85);
    backdrop-filter: blur(8px);
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .modal-backdrop.open { display: flex; }
  .modal {
    background: var(--near-black);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 480px;
    padding: 48px 40px;
    position: relative;
  }
  .modal-close {
    position: absolute; top: 18px; right: 18px;
    background: none; border: 0; color: var(--cream-dim);
    font-size: 1.5rem; cursor: pointer; line-height: 1;
    width: 32px; height: 32px;
  }
  .modal h2 {
    font-family: var(--fnt-display); font-style: italic;
    font-weight: 700;
    font-size: 2.2rem;
    color: var(--cream);
    margin-bottom: 8px;
  }
  .modal .sub {
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 32px;
  }
  .modal .field input { font-size: 1rem; }
  .modal .modal-footer {
    margin-top: 14px;
    text-align: center;
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream-muted);
  }
  .modal .modal-footer a { color: var(--gold); cursor: pointer; }
  .modal .divider {
    text-align: center;
    margin: 24px 0;
    font-family: var(--fnt-mono);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    color: var(--cream-muted);
    position: relative;
  }
  .modal .divider::before, .modal .divider::after {
    content: ''; display: inline-block;
    width: 60px; height: 1px;
    background: var(--border-dim);
    vertical-align: middle;
    margin: 0 12px;
  }
  .modal .oauth { display: flex; flex-direction: column; gap: 8px; }
  .modal .oauth button { width: 100%; justify-content: center; }
  .modal .step-dots {
    display: flex; gap: 8px; margin-bottom: 28px;
  }
  .modal .step-dot {
    width: 30px; height: 2px;
    background: var(--border-dim);
  }
  .modal .step-dot.active { background: var(--gold); }
  .modal .role-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }
  .modal .role-btn {
    background: transparent;
    border: 1px solid var(--border-dim);
    color: var(--cream);
    padding: 22px 14px;
    cursor: pointer;
    font-family: var(--fnt-display); font-style: italic;
    font-size: 1.2rem;
    transition: all 0.2s;
  }
  .modal .role-btn:hover, .modal .role-btn.selected { border-color: var(--gold); color: var(--gold); }

  /* ─── MOBILE ─── */
  @media (max-width: 900px) {
    section.surface { padding: 80px var(--gutter-mobile) 80px; }
    nav.top { padding: 14px var(--gutter-mobile); }
    .nav-center, .nav-right .lang-pill, .nav-right .signin-link { display: none; }
    .hamburger { display: block; }
    .nav-right { gap: 10px; }

    .three-blocks, .entry-cards, .work-strip, .partner-grid,
    .advisor-grid, .map-block, .schedule, .venues, .paths,
    .films-hero-strip, .filter-chips, .film-grid,
    .for-you-hero, .submission-window, .tracks, .prizes,
    .curric, .pilot-schools, .tiers, .why-now,
    .price-tiers, .press-grid, .contact-cards,
    .footer-grid, .related-essays {
      grid-template-columns: 1fr;
    }
    .work-strip { grid-template-columns: 1fr 1fr; }
    .film-grid { grid-template-columns: 1fr 1fr; }
    .tracks { grid-template-columns: 1fr 1fr; }
    .pilot-schools { grid-template-columns: 1fr 1fr; }
    .partner-grid { grid-template-columns: 1fr 1fr; }
    .contact-cards { grid-template-columns: 1fr 1fr; }

    .lane { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .for-you-hero { grid-template-columns: 1fr; gap: 32px; }
    .day-row { grid-template-columns: 60px 1fr; gap: 16px; }
    .day-row .day-label { display: none; }

    .three-block { padding: 40px 26px; }
    .knobloch { padding: 80px 26px; }
    .newsletter { padding: 40px 24px; }
    .newsletter form { flex-direction: column; }
    .newsletter button { padding: 14px; }

    .hero { min-height: 88vh; padding: 100px 22px 60px; }
    .hero-trailer-toggle { right: 16px; bottom: 16px; }
    .hero-scroll { display: none; }

    .footer-grid { gap: 32px; }
    .colophon { font-size: 0.55rem; }

    .essay { font-size: 1.05rem; }
    .essay .pull { margin: 24px 0; font-size: 1.35rem; padding-left: 18px; }
    .essay p.first::first-letter { font-size: 4.5rem; padding-right: 10px; }

    .dispatch-list .item { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
    .dispatch-list .read { font-size: 0.55rem; }

    .modal { padding: 36px 24px; }
  }

  /* ─────────────────────────────────────────────
     v2 SOUL ADDITIONS — kids + education + safe AI
     ───────────────────────────────────────────── */

  /* Beehiiv-style capture form */
  .beehiiv-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
  }
  .beehiiv-form input[type="email"],
  .beehiiv-form input[type="text"],
  .beehiiv-form select,
  .beehiiv-form textarea {
    background: rgba(241,234,216,0.04);
    border: 1px solid rgba(241,234,216,0.18);
    color: var(--cream);
    padding: 14px 16px;
    font-family: var(--fnt-body);
    font-size: 0.95rem;
    border-radius: 0;
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
  }
  .beehiiv-form input:focus,
  .beehiiv-form select:focus,
  .beehiiv-form textarea:focus {
    border-color: var(--gold);
  }
  .beehiiv-form select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
  }
  .beehiiv-form select option { background: var(--near-black); color: var(--cream); }
  .beehiiv-form textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
  .beehiiv-form button[type="submit"] {
    background: var(--gold);
    color: var(--black);
    border: 0;
    padding: 14px 22px;
    font-family: var(--fnt-mono);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .beehiiv-form button[type="submit"]:hover { background: var(--gold-light); }
  .beehiiv-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  @media (max-width: 600px) {
    .beehiiv-form .form-row { grid-template-columns: 1fr; }
  }
  .beehiiv-success {
    display: none;
    padding: 18px 22px;
    background: rgba(201,168,76,0.06);
    border: 1px solid var(--gold-dim);
    color: var(--cream);
    font-family: var(--fnt-edit);
    font-style: italic;
    text-align: center;
  }
  .beehiiv-success.show { display: block; }

  /* Sample video strip — Films section + hero override */
  .sample-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 32px 0 60px;
  }
  @media (max-width: 900px) {
    .sample-strip { grid-template-columns: 1fr; gap: 28px; }
  }
  .sample-card {
    background: var(--panel);
    border: 1px solid var(--border-dim);
  }
  .sample-card .video-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--black);
  }
  .sample-card video,
  .sample-card .poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.85) contrast(1.08) saturate(0.85) sepia(0.05);
  }
  .sample-card .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .sample-card .play-overlay::before {
    content: '';
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(201,168,76,0.85);
    box-shadow: 0 0 0 6px rgba(201,168,76,0.18);
  }
  .sample-card .play-overlay::after {
    content: '';
    position: absolute;
    width: 0; height: 0;
    border-left: 16px solid var(--black);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    transform: translateX(3px);
  }
  .sample-card .body {
    padding: 22px 22px 26px;
  }
  .sample-card .sample-num {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 10px;
  }
  .sample-card .sample-title {
    font-family: var(--fnt-display);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--cream);
    line-height: 1.2;
    margin-bottom: 8px;
  }
  .sample-card .sample-byline {
    color: var(--cream-dim);
    font-size: 0.9rem;
    font-family: var(--fnt-edit);
    font-style: italic;
    margin-bottom: 14px;
  }
  .sample-card .sample-disclosure {
    border-top: 1px solid var(--border-dim);
    padding-top: 12px;
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cream-muted);
    line-height: 1.55;
  }
  .sample-card .sample-disclosure strong {
    color: var(--cream-dim);
    font-weight: 400;
  }

  /* Director Board */
  .director-board-section {
    background: var(--panel);
    padding: 100px 0;
  }
  .director-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 50px 0 40px;
  }
  @media (max-width: 900px) { .director-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .director-grid { grid-template-columns: 1fr; } }
  .director-card {
    background: var(--near-black);
    border: 1px solid var(--border-dim);
    border-top: 2px solid var(--gold-dim);
    padding: 28px 24px 30px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease;
  }
  .director-card.confirmed {
    border-top-color: var(--oxblood);
    background: linear-gradient(180deg, rgba(138,42,32,0.04), var(--near-black));
  }
  .director-card .portrait {
    aspect-ratio: 4 / 5;
    background-color: var(--panel-light);
    background-size: cover;
    background-position: center;
    margin-bottom: 22px;
    filter: brightness(0.85) contrast(1.08) saturate(0.85) sepia(0.05);
  }
  .director-card.tba .portrait {
    background-image: none;
    background: linear-gradient(135deg, var(--panel-light), var(--panel));
    position: relative;
  }
  .director-card.tba .portrait::after {
    content: '⁂';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream-muted);
    font-size: 2rem;
  }
  .director-card .role {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
  }
  .director-card.tba .role { color: var(--cream-muted); }
  .director-card .name {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--cream);
    margin-bottom: 4px;
    line-height: 1.15;
  }
  .director-card.tba .name { color: var(--cream-muted); }
  .director-card .city {
    font-family: var(--fnt-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream-dim);
    margin-bottom: 14px;
  }
  .director-card .bio {
    font-family: var(--fnt-edit);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--cream-dim);
    margin-top: auto;
  }
  .director-card.tba .bio {
    color: var(--cream-muted);
    font-style: italic;
  }

  /* Soft partner blocks (no pricing) */
  .partner-soft-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 32px 0 40px;
  }
  @media (max-width: 900px) { .partner-soft-grid { grid-template-columns: 1fr; } }
  .partner-soft {
    background: var(--near-black);
    border: 1px solid var(--border-dim);
    border-left: 2px solid var(--gold-dim);
    padding: 30px 28px;
  }
  .partner-soft .label {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 14px;
  }
  .partner-soft h4 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.45rem;
    color: var(--cream);
    line-height: 1.2;
    margin-bottom: 14px;
  }
  .partner-soft p {
    font-family: var(--fnt-edit);
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--cream-dim);
  }

  /* Free tiers (lead) vs paid tiers (demoted) */
  .free-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 24px 0 60px;
  }
  @media (max-width: 900px) { .free-tiers { grid-template-columns: 1fr; } }
  .free-tier {
    background: linear-gradient(180deg, rgba(201,168,76,0.05), var(--near-black));
    border: 1px solid var(--gold-dim);
    border-top: 3px solid var(--gold);
    padding: 30px 26px;
  }
  .free-tier .badge {
    display: inline-block;
    font-family: var(--fnt-mono);
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(201,168,76,0.1);
    padding: 4px 10px;
    margin-bottom: 16px;
  }
  .free-tier h4 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--cream);
    margin-bottom: 8px;
  }
  .free-tier .who {
    font-family: var(--fnt-edit);
    font-style: italic;
    color: var(--cream-dim);
    margin-bottom: 16px;
    font-size: 0.95rem;
  }
  .free-tier ul {
    list-style: none;
    padding: 0;
    margin-bottom: 22px;
  }
  .free-tier ul li {
    padding: 6px 0 6px 18px;
    color: var(--cream-dim);
    font-size: 0.92rem;
    line-height: 1.55;
    position: relative;
  }
  .free-tier ul li::before {
    content: '⁂';
    position: absolute;
    left: 0;
    color: var(--gold-dim);
    font-size: 0.8rem;
  }

  .paid-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
  }
  @media (max-width: 900px) { .paid-tiers { grid-template-columns: 1fr; } }
  .paid-tier-mini {
    background: var(--near-black);
    border: 1px solid var(--border-dim);
    padding: 22px 22px 24px;
  }
  .paid-tier-mini .pname {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cream-dim);
    margin-bottom: 8px;
  }
  .paid-tier-mini h5 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--cream);
    margin-bottom: 6px;
  }
  .paid-tier-mini .price-amt-mini {
    font-family: var(--fnt-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--gold);
    margin-bottom: 12px;
  }
  .paid-tier-mini p {
    color: var(--cream-dim);
    font-size: 0.86rem;
    line-height: 1.55;
    font-family: var(--fnt-edit);
  }

  /* Reasons block — homepage 3 cards */
  .reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 40px 0 60px;
  }
  @media (max-width: 900px) { .reasons-grid { grid-template-columns: 1fr; } }
  .reason-card {
    background: var(--near-black);
    border: 1px solid var(--border-dim);
    padding: 30px 26px;
    position: relative;
  }
  .reason-card .reason-num {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--oxblood);
    margin-bottom: 18px;
    display: block;
  }
  .reason-card h3 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--cream);
    line-height: 1.2;
    margin-bottom: 14px;
  }
  .reason-card p {
    font-family: var(--fnt-edit);
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--cream-dim);
    margin-bottom: 18px;
  }
  .reason-card .source {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream-muted);
    border-top: 1px solid var(--border-dim);
    padding-top: 12px;
    display: block;
  }

  /* Roadmap (festival section) */
  .roadmap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 40px 0;
  }
  @media (max-width: 900px) { .roadmap { grid-template-columns: 1fr; } }
  .roadmap-step {
    background: var(--panel);
    border: 1px solid var(--border-dim);
    padding: 26px 24px;
  }
  .roadmap-step .year {
    font-family: var(--fnt-mono);
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
  }
  .roadmap-step h4 {
    font-family: var(--fnt-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--cream);
    margin-bottom: 12px;
    line-height: 1.2;
  }
  .roadmap-step p {
    color: var(--cream-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    font-family: var(--fnt-edit);
  }

  /* "What is this?" expandable */
  .expandable {
    margin-top: 24px;
    border-top: 1px solid var(--border-dim);
    border-bottom: 1px solid var(--border-dim);
    padding: 16px 0;
  }
  .expandable summary {
    cursor: pointer;
    font-family: var(--fnt-mono);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    list-style: none;
  }
  .expandable summary::after {
    content: ' →';
    transition: transform 0.2s;
    display: inline-block;
  }
  .expandable[open] summary::after { transform: rotate(90deg); }
  .expandable summary::-webkit-details-marker { display: none; }
  .expandable .body {
    margin-top: 14px;
    color: var(--cream-dim);
    line-height: 1.7;
    font-family: var(--fnt-edit);
    font-size: 0.98rem;
  }

  /* ──────────────────────────────────────────────────────────────
     MOBILE NAV FIX — 2026-05-27
     Overrides per-page inline @media rules. Uses !important and
     higher specificity (body header.top-nav-fixed) to win against
     inline <style> blocks loaded after this file.
     Problem fixed: lang pills (EN FR RU UA) and brand stork were
     overlapping H1 on every page at ≤720px because the fixed nav
     wraps to 3 rows but page-hero only had 140px top padding and
     the nav had a fade-out background that bled text through.
     ────────────────────────────────────────────────────────────── */
  @media (max-width: 720px) {
    body header.top-nav-fixed {
      background: rgba(5,5,7,0.985) !important;
      padding: 10px 14px !important;
      gap: 8px !important;
      align-items: center !important;
    }
    body header.top-nav-fixed .brand,
    body header.top-nav-fixed .brand-stack {
      flex-direction: row !important;
      align-items: center !important;
      gap: 10px !important;
    }
    body header.top-nav-fixed .brand img,
    body header.top-nav-fixed .brand-stack img {
      height: 26px !important;
    }
    body header.top-nav-fixed .brand-stack .brand-wordmark,
    body header.top-nav-fixed .brand span {
      font-size: 15px !important;
      letter-spacing: 0.04em !important;
    }
    body header.top-nav-fixed nav {
      gap: 10px !important;
      flex: 1 1 100% !important;
      justify-content: flex-start !important;
      margin-top: 6px !important;
      flex-wrap: wrap !important;
    }
    body header.top-nav-fixed nav a {
      font-size: 9.5px !important;
      letter-spacing: 0.14em !important;
      padding: 4px 0 !important;
      min-height: 0 !important;
    }
    body header.top-nav-fixed .lang-pills {
      margin-left: auto !important;
      margin-top: 0 !important;
      padding-left: 0 !important;
      border-left: 0 !important;
      width: auto !important;
      gap: 2px !important;
      flex: 0 0 auto !important;
      order: 1 !important;
    }
    body header.top-nav-fixed .lang-pills a {
      font-size: 9px !important;
      padding: 3px 5px !important;
      min-height: 0 !important;
      letter-spacing: 0.14em !important;
    }
    /* Push hero content below the (now compact, solid) fixed nav.
       Nav at mobile = brand row (~46px) + nav links row (~24px) + lang row = ~118px */
    body main .page-hero,
    body section#section-01 .hero,
    body section#section-01 > .hero,
    body main > section:first-of-type {
      padding-top: 140px !important;
    }
    /* Partners/Join use <section class="surface"> for the first section.
       Need to scope by inline H1 too — re-push only the FIRST section's H1
       away from the nav. */
    body main > section:first-of-type > h1,
    body main > section:first-of-type > .container > h1,
    body main > section:first-of-type > div > h1 {
      margin-top: 60px !important;
    }
    /* Smaller hero stork on mobile so it doesn't dominate the screen */
    body .hero-stork-mark {
      width: clamp(72px, 22vw, 110px) !important;
      margin-bottom: 10px !important;
    }
  }
  /* Tablet — nav still risk of wrapping */
  @media (min-width: 721px) and (max-width: 900px) {
    body main .page-hero,
    body section#section-01 .hero {
      padding-top: 150px !important;
    }
  }