/* LUMG — private presentation. One continuous narrative; the page changes tone as sections pass. */
:root {
  --ivory: #f4efe4;
  --stone: #e5ddcc;
  --forest: #0f2b1f;
  --night: #09190f;
  --green: #1d4f38;
  --gold: #c49a3a;
  --gold-light: #dcbd70;
  --gold-ink: #94701f;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1240px;
}

body { --bg: var(--ivory); --fg: #14211a; --dim: rgba(20, 33, 26, .62); --rule: rgba(20, 33, 26, .14); --accent: var(--gold-ink); --card: rgba(255, 255, 255, .5); }
body[data-tone="stone"] { --bg: var(--stone); --card: rgba(255, 255, 255, .42); }
body[data-tone="forest"], body[data-tone="night"] { --fg: #eee8da; --dim: rgba(238, 232, 218, .64); --rule: rgba(238, 232, 218, .15); --accent: var(--gold-light); --card: rgba(255, 255, 255, .045); }
body[data-tone="forest"] { --bg: var(--forest); }
body[data-tone="night"] { --bg: var(--night); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 300 clamp(1rem, .96rem + .2vw, 1.12rem)/1.72 var(--sans);
  transition: background-color 1.1s var(--ease), color 1.1s var(--ease);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
::selection { background: var(--gold); color: #0f2b1f; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 1.1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
.hp { position: absolute; left: -9999px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.kicker { font: 500 .72rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.8rem; display: flex; align-items: center; gap: 14px; }
.kicker .num { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .04em; }
.kicker .num::after { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; opacity: .6; vertical-align: middle; margin-left: 14px; }
.display { font: 500 clamp(2.1rem, 1.25rem + 3.6vw, 4.4rem)/1.06 var(--serif); letter-spacing: -.012em; text-wrap: balance; margin-bottom: clamp(24px, 4vh, 40px); max-width: 17em; }
.display.xl { font-size: clamp(2.5rem, 1.3rem + 5vw, 6rem); max-width: 14em; }
.display em { font-style: italic; color: var(--accent); }
.display-s { font: 500 clamp(1.7rem, 1.2rem + 2vw, 2.8rem)/1.12 var(--serif); text-wrap: balance; }
.lede { font-size: clamp(1.15rem, 1.02rem + .55vw, 1.45rem); line-height: 1.55; font-weight: 300; max-width: 34em; text-wrap: pretty; }
.strong { font-weight: 500; }
.dim { color: var(--dim); }
.fine { font-size: .82rem; color: var(--dim); letter-spacing: .02em; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.gold { color: var(--accent); }
.gold-ink { color: var(--accent); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 4vw, 64px); max-width: 980px; }
.cols-1 { max-width: 40em; margin: 0 auto; text-align: center; color: var(--dim); }

section { position: relative; padding: clamp(96px, 16vh, 180px) 0; }

/* ── Reveal ── */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(26px); transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--d, 0s); }
  .rv.in { opacity: 1; transform: none; }
}

/* ── Pinned sections: a tall track with a sticky stage; JS writes --p (0→1) ── */
.pin { padding: 0; height: calc(var(--len, 2) * 100svh); --p: 0; }
.pin__stage { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; overflow: hidden; }

/* ── Frame (fixed chrome) ── */
.frame { position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: 0; transition: opacity 1s var(--ease) .2s; }
body.past-hero .frame { opacity: 1; }
.frame > * { pointer-events: auto; }
.frame__mark { position: absolute; top: clamp(16px, 3vh, 28px); left: var(--gutter); display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 .74rem/1 var(--sans); letter-spacing: .3em; color: var(--fg); }
.frame__mark svg { color: var(--fg); transition: color 1.1s var(--ease); }
body[data-tone="ivory"] .frame__mark svg, body[data-tone="stone"] .frame__mark svg { color: var(--green); }
.frame__index { position: absolute; top: clamp(12px, 2.6vh, 24px); right: var(--gutter); font: 500 .72rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--fg); background: none; border: 1px solid var(--rule); border-radius: 99px; padding: 11px 18px; cursor: pointer; transition: border-color .4s, background .4s; }
.frame__index:hover { border-color: var(--accent); }
.frame__where { position: absolute; left: var(--gutter); bottom: clamp(14px, 3vh, 26px); margin: 0; display: flex; align-items: center; gap: 12px; font: 400 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.frame__where [data-no] { font: 500 .95rem/1 var(--serif); letter-spacing: .06em; color: var(--accent); }
.frame__where i { width: 24px; height: 1px; background: currentColor; opacity: .5; }
.frame__progress { position: absolute; right: calc(var(--gutter) * .5); top: 22vh; bottom: 22vh; width: 1px; background: var(--rule); }
.frame__progress i { position: absolute; inset: 0 0 auto; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(var(--sp, 0)); }
@media (max-width: 640px) { .frame__where [data-where], .frame__where i { display: none; } .frame__progress { display: none; } }

/* ── Index overlay ── */
.index { position: fixed; inset: 0; z-index: 40; background: rgba(9, 25, 15, .97); color: #eee8da; overflow-y: auto; animation: fadeIn .5s var(--ease); }
.index__inner { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 12vh, 120px) var(--gutter) 60px; }
.index__label { font: 500 .72rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-light); }
.index__list { list-style: none; padding: 0; margin: 0; columns: 2 320px; column-gap: 64px; counter-reset: ix 1; }
.index__list li { counter-increment: ix; break-inside: avoid; border-bottom: 1px solid rgba(238, 232, 218, .12); }
.index__list a { display: flex; gap: 18px; align-items: baseline; padding: 14px 0; text-decoration: none; font: 500 clamp(1.25rem, 1rem + .8vw, 1.7rem)/1.2 var(--serif); transition: color .3s, padding .4s var(--ease); }
.index__list a::before { content: counter(ix, decimal-leading-zero); font: 400 .74rem/1 var(--sans); letter-spacing: .14em; color: var(--gold-light); min-width: 2em; }
.index__list a:hover { color: var(--gold-light); padding-left: 8px; }
body.index-open .frame__index { background: #eee8da; color: #0f2b1f; border-color: #eee8da; }
body.index-open .frame { opacity: 1; z-index: 50; }

/* ── Gate ── */
.gate { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: 1fr auto; background: radial-gradient(1200px 700px at 50% 30%, #163b2a 0%, var(--forest) 55%, var(--night) 100%); color: #eee8da; transition: opacity 1.2s var(--ease), visibility 1.2s; }
.skip-gate .gate { opacity: 0; visibility: hidden; transition: none; }
.gate--leaving { opacity: 0; visibility: hidden; }
.gate__inner { align-self: center; justify-self: center; width: min(100% - 40px, 440px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.gate__mark { width: 74px; height: 74px; color: #eee8da; margin-bottom: 34px; animation: fadeUp 1.6s var(--ease-out) both; }
.gate__name { font: 500 clamp(1.25rem, 1rem + 1.2vw, 1.7rem)/1.3 var(--serif); letter-spacing: .3em; text-transform: uppercase; margin-right: -.3em; animation: fadeUp 1.6s var(--ease-out) .25s both; }
.gate__sub { margin: 14px 0 52px; font: 400 .74rem/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-light); animation: fadeUp 1.6s var(--ease-out) .45s both; }
.gate__form { width: 100%; animation: fadeUp 1.6s var(--ease-out) .65s both; }
.gate__label { display: block; font: 400 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(238, 232, 218, .6); margin-bottom: 16px; }
.gate__field { display: flex; align-items: center; border-bottom: 1px solid rgba(238, 232, 218, .35); transition: border-color .4s; }
.gate__field:focus-within { border-color: var(--gold-light); }
.gate__field input { flex: 1; min-width: 0; background: none; border: 0; color: #eee8da; font: 400 1.25rem/1 var(--sans); letter-spacing: .3em; text-align: center; padding: 14px 0 14px 44px; outline: none; }
.gate__field button { width: 44px; height: 44px; background: none; border: 0; color: var(--gold-light); font-size: 1.3rem; cursor: pointer; transition: transform .4s var(--ease); }
.gate__field button:hover { transform: translateX(4px); }
.gate__form.busy .gate__field { opacity: .5; }
.gate__form.shake .gate__field { animation: shake .5s; }
.gate__status { min-height: 1.6em; margin: 14px 0 0; font-size: .86rem; color: rgba(238, 232, 218, .72); }
.gate__request { margin-top: 30px; background: none; border: 0; color: rgba(238, 232, 218, .55); font: 400 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; padding: 8px; animation: fadeIn 2s var(--ease) 1.2s both; }
.gate__request:hover { color: var(--gold-light); }
.gate__ask[hidden] { display: none; }
.gate__ask { width: 100%; display: grid; gap: 10px; margin-top: 16px; animation: fadeUp .7s var(--ease-out); }
.gate__ask input, .gate__ask textarea { width: 100%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(238, 232, 218, .18); border-radius: 10px; color: #eee8da; font: 300 .95rem/1.4 var(--sans); padding: 12px 14px; }
.gate__ask input::placeholder, .gate__ask textarea::placeholder { color: rgba(238, 232, 218, .45); }
.gate__ask button { justify-self: center; background: none; border: 1px solid var(--gold-light); color: var(--gold-light); border-radius: 99px; font: 500 .74rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 13px 22px; cursor: pointer; }
.gate__foot { text-align: center; font: 400 .68rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(238, 232, 218, .38); padding: 24px; margin: 0; }

/* ── 01 Hero ── */
.hero { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; justify-items: center; text-align: center; padding: clamp(40px, 8vh, 90px) var(--gutter) clamp(20px, 4vh, 40px); }
.hero__mark { align-self: center; display: flex; flex-direction: column; align-items: center; }
.hero__logo { width: clamp(118px, 20vh, 200px); height: auto; color: var(--green); margin-bottom: clamp(34px, 6vh, 64px); overflow: visible; }
.hero__arc { fill: var(--gold); }
.hero__name { display: flex; flex-direction: column; align-items: center; color: var(--green); }
.hero__main { font: 500 clamp(1.75rem, .9rem + 3.6vw, 4.2rem)/1.1 var(--serif); letter-spacing: .16em; margin-right: -.16em; text-transform: uppercase; }
.hero__sub { margin-top: clamp(14px, 2.4vh, 24px); font: 400 clamp(.78rem, .66rem + .5vw, 1.05rem)/1 var(--sans); letter-spacing: .72em; margin-right: -.72em; text-transform: uppercase; color: var(--gold-ink); }
.hero__name .wd { display: inline-block; white-space: nowrap; }
.hero__name .l { display: inline-block; }
.hero__next { width: 44px; height: 64px; display: grid; justify-items: center; align-content: end; color: var(--gold-ink); }
.hero__next i { width: 1px; height: 44px; background: currentColor; transform-origin: top; }
@media (max-width: 520px) { .hero__main { letter-spacing: .1em; margin-right: -.1em; } }

@media (prefers-reduced-motion: no-preference) {
  .hero__globe > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .hero__arc { clip-path: inset(0 100% 0 0); }
  .hero__name .l, .hero__next { opacity: 0; }
  html.play .hero__globe > * { animation: draw 1.9s var(--ease) forwards; }
  html.play .hero__globe > :nth-child(2) { animation-delay: .25s; }
  html.play .hero__globe > :nth-child(3) { animation-delay: .4s; }
  html.play .hero__globe > :nth-child(4) { animation-delay: .5s; }
  html.play .hero__globe > :nth-child(5) { animation-delay: .65s; }
  html.play .hero__globe > :nth-child(6) { animation-delay: .75s; }
  html.play .hero__arc { animation: wipe 1.5s var(--ease) 1.15s forwards; }
  html.play .hero__name .l { animation: letterIn .9s var(--ease-out) forwards; animation-delay: calc(1.7s + var(--i) * .06s); }
  html.play .hero__next { animation: fadeIn 1.2s var(--ease) 4s forwards; }
  html.play .hero__next i { animation: drift 2.8s ease-in-out 5s infinite; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes letterIn { from { opacity: 0; filter: blur(8px); transform: translateY(.12em); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.6); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ── 02 Proposition ── */
.prop__inner { text-align: center; }
.prop__a { font: 400 clamp(1.3rem, 1rem + 1.4vw, 2.2rem)/1.3 var(--serif); font-style: italic; color: var(--dim); margin-bottom: clamp(20px, 4vh, 40px);
  opacity: calc(.35 + .65 * min(1, var(--p) * 5)); }
.prop__b { font: 500 clamp(2.2rem, 1.2rem + 4.4vw, 5.4rem)/1.05 var(--serif); letter-spacing: -.015em; max-width: 14em; margin: 0 auto clamp(28px, 5vh, 52px); text-wrap: balance;
  --t: clamp(0, (var(--p) - .18) * 3.2, 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 40px)); filter: blur(calc((1 - var(--t)) * 6px)); }
.prop__c { font: 400 clamp(.95rem, .9rem + .3vw, 1.15rem)/1.6 var(--sans); letter-spacing: .04em; color: var(--accent); max-width: 34em; margin: 0 auto;
  --t: clamp(0, (var(--p) - .55) * 4, 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 20px)); }

/* ── 03 Question ── */
.question__inner { max-width: 1100px; }
.question__q { margin: 0 0 clamp(36px, 6vh, 64px); font: 500 clamp(1.9rem, 1.1rem + 3.4vw, 4.4rem)/1.12 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.question__q .w { opacity: .14; transition: opacity .6s var(--ease); }
.question__q .w.on { opacity: 1; }
.question__after { max-width: 36em; --t: clamp(0, (var(--p) - .7) * 4, 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 24px)); }
.question__after p { margin-bottom: .5em; color: var(--dim); }
.question__after .strong { color: var(--fg); margin-top: 1em; }
@media (prefers-reduced-motion: reduce) { .question__q .w { opacity: 1; } .question__after { opacity: 1; transform: none; } .prop__b, .prop__c, .prop__a { opacity: 1; transform: none; filter: none; } }

/* ── 04 Change ── */
.shifts { list-style: none; padding: 0; margin: clamp(48px, 8vh, 96px) 0; border-top: 1px solid var(--rule); }
.shifts li { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 48px); padding: clamp(26px, 4vh, 40px) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.shifts__no { font: 500 1.1rem/1 var(--serif); color: var(--accent); }
.shifts h3 { font: 500 clamp(1.45rem, 1.1rem + 1.2vw, 2.15rem)/1.15 var(--serif); }
.shifts p { margin: 0; color: var(--dim); }
@media (max-width: 820px) { .shifts li { grid-template-columns: 44px 1fr; } .shifts p { grid-column: 2; } }
.coda { text-align: center; padding-top: clamp(20px, 4vh, 40px); }
.coda p { font: 400 clamp(1.2rem, 1rem + .9vw, 1.7rem)/1.3 var(--serif); font-style: italic; color: var(--dim); margin-bottom: .4em; }
.coda .coda__strong { font: 500 clamp(2rem, 1.2rem + 3vw, 3.8rem)/1.1 var(--serif); font-style: normal; color: var(--fg); }

/* ── 05 Model: stacked pillars ── */
.stack { margin: clamp(56px, 9vh, 110px) auto; display: grid; gap: 0; }
.stack__card { position: sticky; top: calc(14vh + var(--k) * 22px); display: grid; grid-template-columns: 80px 1fr auto; align-items: baseline; gap: clamp(14px, 3vw, 40px);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 18px; padding: clamp(26px, 4vh, 44px) clamp(22px, 4vw, 52px); margin-bottom: 28vh;
  box-shadow: 0 -18px 40px -30px rgba(15, 43, 31, .4); transition: background-color 1.1s var(--ease); }
.stack__card:last-child { margin-bottom: 0; }
.stack__card span { font: 500 1.2rem/1 var(--serif); color: var(--accent); }
.stack__card h3 { font: 500 clamp(1.6rem, 1.15rem + 1.8vw, 2.8rem)/1.1 var(--serif); }
.stack__card p { margin: 0; color: var(--dim); text-align: right; max-width: 18em; }
@media (max-width: 760px) { .stack__card { grid-template-columns: 40px 1fr; margin-bottom: 18vh; } .stack__card p { grid-column: 2; text-align: left; } }
.model__connect { font: 500 clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem)/1.25 var(--serif); font-style: italic; max-width: 24em; margin: 0 auto; text-align: center; text-wrap: balance; }

/* ── Chapters ── */
.chapter__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 6vw, 110px); align-items: start; }
.chapter__grid + .chapter__grid { margin-top: clamp(64px, 10vh, 120px); }
.chapter__head { position: sticky; top: 16vh; }
.chapter__head .display { margin-bottom: 0; }
@media (max-width: 860px) { .chapter__grid { grid-template-columns: 1fr; } .chapter__head { position: static; } }

/* AI */
.stages { list-style: none; padding: 0; margin: clamp(48px, 8vh, 90px) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); position: relative; }
.stages li { padding: 34px clamp(16px, 2.6vw, 36px) 0 0; position: relative; }
.stages li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.stages__when { font: 500 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.stages h3 { font: 500 clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem)/1.1 var(--serif); margin-bottom: .5em; }
.stages p:last-child { color: var(--dim); }
@media (max-width: 820px) { .stages { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--rule); } .stages li { padding: 0 0 34px 28px; } .stages li::before { top: 6px; left: -5px; } }
.split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 96px); align-items: start; padding-top: clamp(30px, 5vh, 60px); border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .split2 { grid-template-columns: 1fr; } }

/* Money ladder */
.money { margin-top: clamp(80px, 12vh, 150px); }
.ladder { list-style: none; padding: 0; margin: clamp(40px, 7vh, 80px) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: st; }
.ladder li { counter-increment: st; font: 500 clamp(1.05rem, .95rem + .4vw, 1.3rem)/1.25 var(--serif); padding: 0 18px 0 0; position: relative; }
.ladder li::before { content: counter(st, decimal-leading-zero); display: block; font: 400 .72rem/1 var(--sans); letter-spacing: .16em; color: var(--accent); padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); }
@media (min-width: 821px) { .ladder li:nth-child(1) { margin-top: 96px; } .ladder li:nth-child(2) { margin-top: 72px; } .ladder li:nth-child(3) { margin-top: 48px; } .ladder li:nth-child(4) { margin-top: 24px; } }
@media (max-width: 820px) { .ladder { grid-template-columns: 1fr; gap: 18px; } }

/* Human cascade */
.cascade { list-style: none; padding: 0; margin: clamp(40px, 7vh, 80px) 0; display: flex; flex-wrap: wrap; gap: .1em .55em; font: 500 clamp(1.8rem, 1.1rem + 3vw, 4rem)/1.18 var(--serif); }
.cascade li { color: var(--fg); }
.cascade li:nth-child(even) { font-style: italic; color: var(--accent); }
.cascade li:not(:last-child)::after { content: "·"; margin-left: .55em; color: var(--rule); font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .cascade li, .spaces li, .impact__grid li, .needs li { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--j, 0) * 70ms); }
  .in > li, li.in { opacity: 1 !important; transform: none !important; }
}

/* Planet */
.planet { min-height: 90svh; display: grid; align-items: center; overflow: hidden; }
.planet::before { content: ""; position: absolute; width: min(120vw, 1200px); aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(196, 154, 58, .14), transparent 62%); transform: translateY(calc(var(--par, 0) * 1px)); pointer-events: none; }

/* Living classroom */
.systems { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1px; margin-top: clamp(48px, 8vh, 90px); background: var(--rule); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; }
.systems article { background: var(--bg); padding: clamp(26px, 4vh, 40px) clamp(22px, 3vw, 36px); transition: background-color 1.1s var(--ease); }
.systems h3 { font: 500 clamp(1.45rem, 1.15rem + 1vw, 2rem)/1.15 var(--serif); margin-bottom: .55em; }
.systems h3::before { content: ""; display: block; width: 28px; height: 2px; background: var(--gold); margin-bottom: 18px; }
.systems p { margin: 0; color: var(--dim); }

.asks__inner { text-align: center; }
.asks__list { list-style: none; padding: 0; margin: 0 auto; position: relative; height: clamp(220px, 34vh, 340px); max-width: 980px; }
.asks__list li { position: absolute; inset: 0; display: grid; place-items: center; font: 500 clamp(1.9rem, 1.1rem + 3.4vw, 4.2rem)/1.12 var(--serif); font-style: italic; text-wrap: balance;
  opacity: 0; transform: translateY(36px); filter: blur(6px); transition: opacity .9s var(--ease), transform 1.1s var(--ease-out), filter .9s var(--ease); }
.asks__list li.on { opacity: 1; transform: none; filter: none; }
.asks__list li.past { opacity: 0; transform: translateY(-36px); }
.asks__count { margin: clamp(20px, 4vh, 40px) 0 0; font: 400 .78rem/1 var(--sans); letter-spacing: .24em; color: var(--dim); }
.asks__count span { color: var(--accent); font-family: var(--serif); font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .asks.pin { height: auto; } .asks .pin__stage { position: static; height: auto; padding: 100px 0; } .asks__list { height: auto; } .asks__list li { position: static; opacity: 1; transform: none; filter: none; margin-bottom: 1em; } .asks__count { display: none; } }

.living-coda .disciplines { text-align: center; font: 500 .78rem/2 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); max-width: 52em; margin: 0 auto 10px; }
.living-coda .lede { margin-bottom: clamp(56px, 9vh, 100px); font-style: italic; font-family: var(--serif); }
.living-coda .display { max-width: 18em; }

/* Culture */
.balance { margin: clamp(80px, 12vh, 140px) auto 0; max-width: 26em; text-align: center; font: 500 clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem)/1.25 var(--serif); font-style: italic; text-wrap: balance; }

/* Campus */
.spaces { list-style: none; padding: 0; margin: clamp(48px, 8vh, 90px) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); border-top: 1px solid var(--rule); }
.spaces li { font: 500 clamp(1.2rem, 1rem + .7vw, 1.6rem)/1.25 var(--serif); padding: 22px 0; border-bottom: 1px solid var(--rule); margin-right: 24px; }

/* Suriname */
.people__inner { text-align: center; }
.people__a { font: 400 clamp(1.4rem, 1rem + 1.8vw, 2.6rem)/1.25 var(--serif); font-style: italic; color: var(--dim); margin-bottom: .3em;
  opacity: calc(.4 + .6 * min(1, var(--p) * 5)); }
.people__b { font: 500 clamp(3.2rem, 1.6rem + 7vw, 8.5rem)/1 var(--serif); color: var(--accent); margin-bottom: clamp(30px, 5vh, 56px);
  --t: clamp(0, (var(--p) - .2) * 3.5, 1); opacity: var(--t); transform: scale(calc(.94 + .06 * var(--t))); filter: blur(calc((1 - var(--t)) * 8px)); }
.people__c { font: 300 clamp(1.1rem, 1rem + .6vw, 1.5rem)/1.55 var(--sans); max-width: 30em; margin: 0 auto;
  --t: clamp(0, (var(--p) - .55) * 4, 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 20px)); }
.people__c strong { display: block; font: 500 clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem)/1.2 var(--serif); margin-top: .5em; }
@media (prefers-reduced-motion: reduce) { .people__a, .people__b, .people__c { opacity: 1; transform: none; filter: none; } }
.needs { list-style: none; padding: 0; margin: 24px 0 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.needs li { border: 1px solid var(--rule); border-radius: 99px; padding: 10px 20px; font: 500 1.15rem/1.2 var(--serif); }
.suriname-2 .display { margin: clamp(60px, 10vh, 120px) auto clamp(30px, 5vh, 50px); max-width: 16em; }

/* Infrastructure */
.infra__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 6vw, 100px); align-items: center; }
@media (max-width: 900px) { .infra__grid { grid-template-columns: 1fr; } }
.orbit { margin: 0; }
.orbit svg { width: 100%; max-width: 460px; margin: 0 auto; overflow: visible; }
.orbit__ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.orbit__ring--in { stroke-dasharray: 3 6; }
.orbit__spokes line { stroke: var(--accent); stroke-width: 1; opacity: .45; stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 1.6s var(--ease-out) .4s; }
.orbit.in .orbit__spokes line { stroke-dashoffset: 0; }
.orbit__core { fill: var(--green); }
.orbit__core-t { fill: #eee8da; font: 500 20px var(--serif); text-anchor: middle; }
.orbit__core-s { fill: var(--gold-light); font: 400 9px var(--sans); letter-spacing: .2em; text-transform: uppercase; text-anchor: middle; }
.orbit__nodes circle { fill: var(--gold); }
.orbit__labels text { fill: var(--fg); font: 500 17px var(--serif); text-anchor: middle; }
@media (prefers-reduced-motion: no-preference) { .orbit svg { animation: none; } .orbit.in .orbit__nodes { animation: pulse 4s ease-in-out 2s infinite; transform-origin: 200px 200px; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Governance */
.principles { list-style: none; padding: 0; margin: clamp(48px, 8vh, 90px) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.principles li { border-top: 1px solid var(--accent); padding-top: 26px; }
.principles span { font: 500 1.2rem/1 var(--serif); color: var(--accent); }
.principles h3 { font: 500 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.15 var(--serif); margin: 14px 0 12px; }
.principles p { color: var(--dim); margin: 0; }
@media (max-width: 820px) { .principles { grid-template-columns: 1fr; } }
.gov__final { max-width: 46em; color: var(--dim); }
.steward { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 96px); margin-top: clamp(64px, 10vh, 120px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--rule); }
@media (max-width: 820px) { .steward { grid-template-columns: 1fr; } }
.founders { display: grid; gap: 18px; }
.founders article { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 24px 26px; }
.founders h3 { font: 500 1.6rem/1.15 var(--serif); margin-bottom: 8px; }
.founders p { margin: 0; color: var(--dim); }

/* Roadmap */
.rm-intro { color: var(--dim); max-width: 34em; }
.phases { list-style: none; padding: 0; margin: clamp(48px, 8vh, 90px) 0 clamp(36px, 6vh, 60px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.phases::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--rule); }
.phases::after { content: ""; position: absolute; left: 0; top: 7px; height: 1px; width: calc(var(--fill, .1) * 100%); background: var(--accent); transition: width 2s var(--ease-out) .4s; }
.phases:not(.in)::after { width: 0; }
.phase { position: relative; padding: 36px clamp(10px, 2vw, 28px) 0 0; }
.phase::before { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent); transition: background-color 1.1s var(--ease); }
.phase.is-done::before { background: var(--accent); }
.phase.is-current::before { background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 22%, transparent); }
.phase__no { font: 400 .72rem/1 var(--sans); letter-spacing: .18em; color: var(--accent); text-transform: uppercase; }
.phase h3 { font: 500 clamp(1.25rem, 1.05rem + .7vw, 1.7rem)/1.15 var(--serif); margin: 12px 0 10px; }
.phase p { font-size: .92rem; color: var(--dim); margin: 0; }
.phase__now { display: inline-block; margin-top: 14px; font: 500 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 99px; padding: 6px 10px; }
@media (max-width: 900px) {
  .phases { grid-template-columns: 1fr; padding-left: 30px; }
  .phases::before, .phases::after { top: 0; bottom: 0; left: 7px; right: auto; width: 1px; height: auto; }
  .phases::after { height: calc(var(--fill, .1) * 100%); bottom: auto; }
  .phases:not(.in)::after { height: 0; width: 1px; }
  .phase { padding: 0 0 36px 10px; } .phase::before { left: -30px; }
}
.rm-duration { font: 400 italic clamp(1.1rem, 1rem + .4vw, 1.35rem)/1.5 var(--serif); color: var(--dim); max-width: 40em; padding-top: 26px; border-top: 1px solid var(--rule); }

/* Investment */
.ways { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(40px, 7vh, 80px); }
@media (max-width: 860px) { .ways { grid-template-columns: 1fr; } }
.ways article, .risks { background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: clamp(28px, 4vw, 48px); }
.ways__label { font: 500 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.ways .lede { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.ticks { list-style: none; padding: 0; margin: 0 0 24px; columns: 2 200px; column-gap: 28px; }
.ticks li { break-inside: avoid; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--rule); position: relative; font-size: .95rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 9px; height: 1px; background: var(--accent); }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.tags li { border: 1px solid var(--rule); border-radius: 99px; padding: 8px 15px; font-size: .9rem; }
.risks { margin-top: clamp(20px, 3vw, 40px); }
.risks__list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 28px; }
.risks__list li { font: 500 1.2rem/1.3 var(--serif); padding: 14px 0; border-bottom: 1px solid var(--rule); }

/* Impact */
.impact__grid { list-style: none; padding: 0; margin: clamp(40px, 7vh, 80px) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; }
.impact__grid li { background: var(--bg); padding: 28px 24px; font: 500 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1.25 var(--serif); min-height: 118px; display: flex; align-items: flex-end; transition: background-color 1.1s var(--ease), opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.impact .display-s { margin-top: clamp(40px, 7vh, 80px); }

/* Invitation */
.invite__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
@media (max-width: 900px) { .invite__grid { grid-template-columns: 1fr; } }
.invite .owner { font-style: normal; color: var(--dim); margin-top: 36px; line-height: 1.8; }
.invite .owner strong { color: var(--fg); font-weight: 500; }
.talk { background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: clamp(26px, 4vw, 44px); display: grid; gap: 16px; }
.talk__title { font: 500 1.7rem/1.15 var(--serif); margin: 0 0 6px; }
.talk__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .talk__row { grid-template-columns: 1fr; } }
.talk label { display: grid; gap: 7px; }
.talk label > span { font: 500 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.talk input:not([type="checkbox"]), .talk select, .talk textarea { width: 100%; font: 300 1rem/1.4 var(--sans); color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 10px 0; border-radius: 0; transition: border-color .4s; }
.talk input:focus, .talk select:focus, .talk textarea:focus { outline: none; border-color: var(--accent); }
.talk select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.talk textarea { resize: vertical; }
.talk__consent { display: flex !important; gap: 12px; align-items: flex-start; font-size: .86rem; color: var(--dim); }
.talk__consent input { margin-top: 4px; accent-color: var(--green); width: 16px; height: 16px; flex: none; }
.talk [aria-invalid="true"] { border-color: #b4552d !important; }
.btn { justify-self: start; background: var(--green); color: #f4efe4; border: 0; border-radius: 99px; padding: 16px 28px; font: 500 .76rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .4s var(--ease), transform .4s var(--ease); }
.btn:hover { background: var(--forest); transform: translateY(-1px); }
.talk__status { margin: 0; min-height: 1.4em; font-size: .9rem; color: var(--dim); }
.talk.sent > :not(.talk__status):not(.talk__title) { display: none; }
.talk.sent .talk__status { font: 400 1.3rem/1.4 var(--serif); color: var(--fg); }

/* Footer */
.foot { padding: clamp(80px, 12vh, 130px) 0 50px; background: var(--night); color: rgba(238, 232, 218, .6); text-align: center; font-size: .86rem; }
.foot__inner { display: flex; flex-direction: column; align-items: center; }
.foot svg { color: #eee8da; margin-bottom: 22px; }
.foot__name { font: 500 1rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #eee8da; margin-bottom: 18px; }
.foot__legal { max-width: 44em; font-size: .76rem; line-height: 1.7; color: rgba(238, 232, 218, .4); margin-top: 20px; }

/* Soft fade behind the fixed chrome so text never collides with it */
.frame::before { content: ""; position: absolute; inset: 0 0 auto; height: clamp(64px, 10vh, 96px); background: linear-gradient(var(--bg) 35%, transparent); pointer-events: none; transition: background 1.1s var(--ease); }
.frame::after { content: ""; position: absolute; inset: auto 0 0; height: clamp(48px, 8vh, 72px); background: linear-gradient(transparent, var(--bg) 70%); pointer-events: none; }
.asks .kicker, .people .kicker { justify-content: center; }

/* Founders (inside Governance) */
.founders-block { margin-top: clamp(72px, 11vh, 130px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--rule); }
.founder { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(20px, 5vw, 80px); padding: clamp(36px, 6vh, 60px) 0; border-bottom: 1px solid var(--rule); }
.founder h3 { font: 500 clamp(1.9rem, 1.4rem + 1.8vw, 3rem)/1.05 var(--serif); position: sticky; top: 16vh; align-self: start; }
.founder p { max-width: 38em; }
@media (max-width: 820px) { .founder { grid-template-columns: 1fr; } .founder h3 { position: static; } }
.founders-role { margin: clamp(40px, 6vh, 64px) auto 0; max-width: 40em; text-align: center; font: 500 clamp(1.25rem, 1.05rem + .8vw, 1.7rem)/1.4 var(--serif); font-style: italic; color: var(--fg); text-wrap: balance; }

/* The graduate */
.abilities { list-style: none; padding: 0; margin: clamp(30px, 5vh, 56px) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: clamp(20px, 4vw, 56px); counter-reset: ab; }
.abilities li { counter-increment: ab; display: flex; align-items: baseline; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--rule); font: 500 clamp(1.35rem, 1.1rem + 1vw, 2rem)/1.2 var(--serif); }
.abilities li::before { content: counter(ab, decimal-leading-zero); font: 400 .72rem/1 var(--sans); letter-spacing: .14em; color: var(--accent); min-width: 2em; }
@media (prefers-reduced-motion: no-preference) {
  .abilities li { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--j, 0) * 80ms); }
}
.anchor__inner { text-align: center; }
.anchor__a { font: 400 clamp(1.5rem, 1.05rem + 2vw, 2.8rem)/1.25 var(--serif); font-style: italic; text-wrap: balance; color: var(--dim); max-width: 22em; margin: 0 auto clamp(24px, 4vh, 44px);
  opacity: calc(.35 + .65 * min(1, var(--p) * 4)); }
.anchor__b { font: 500 clamp(2.3rem, 1.3rem + 4.4vw, 5.6rem)/1.06 var(--serif); color: var(--fg); max-width: 13em; margin: 0 auto; text-wrap: balance;
  --t: clamp(0, (var(--p) - .25) * 3, 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 36px)); filter: blur(calc((1 - var(--t)) * 6px)); }
.anchor__b::after { content: ""; display: block; width: 56px; height: 1px; background: var(--gold); margin: clamp(28px, 5vh, 48px) auto 0; opacity: var(--t); }
@media (prefers-reduced-motion: reduce) { .anchor__a, .anchor__b { opacity: 1; transform: none; filter: none; } }

/* Founders & stewardship (own section) */
.stewards .founder:first-of-type { border-top: 1px solid var(--rule); margin-top: clamp(30px, 5vh, 56px); }
.founders-role p { margin-bottom: .6em; }
.founders-role .founders-role__s { font: 300 clamp(1rem, .96rem + .2vw, 1.12rem)/1.7 var(--sans); font-style: normal; color: var(--dim); max-width: 36em; margin: 0 auto; }
.gov__structure { margin-top: clamp(40px, 7vh, 72px); padding-top: clamp(30px, 5vh, 48px); border-top: 1px solid var(--rule); }
.gov__structure .tags { margin-top: 18px; }
.addr__label { display: block; font: 500 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.addr__note { display: block; margin-top: 14px; font-size: .86rem; color: var(--dim); max-width: 26em; }