/* =========================================================
   Fund V — alternate build ("The Elsewhere Report")
   Editorial long-scroll in five chapters. Same brand tokens, new layout.
   ========================================================= */
@font-face{font-family:"Founders Grotesk";font-weight:400;src:url(assets/fonts/founders-grotesk-web-regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Founders Grotesk";font-weight:400;font-style:italic;src:url(assets/fonts/founders-grotesk-web-regular-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Founders Grotesk";font-weight:500;src:url(assets/fonts/founders-grotesk-web-medium.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Founders Grotesk";font-weight:600;src:url(assets/fonts/founders-grotesk-web-semibold.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Founders Grotesk";font-weight:700;src:url(assets/fonts/founders-grotesk-web-bold.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Founders Grotesk X-Condensed";font-weight:600;src:url(assets/fonts/founders-grotesk-x-condensed-semibold.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Founders Grotesk X-Condensed";font-weight:700;src:url(assets/fonts/founders-grotesk-x-condensed-bold.woff2) format("woff2");font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --purple:#5a0860; --purple-hi:#7c1a84; --purple-lo:#36033b;
  --cream:#ffffeb; --cream-2:#ffe8ac;
  --blue:#0d1daf; --blue-hi:#2237d6; --blue-lo:#070f6a;
  --yellow:#ffcf53; --yellow-lo:#eab63a;
  --teal:#09e1cd;
  --ink:#01000f; --white:#fff;
  --rule:rgba(90,8,96,.22);

  --font-body:"Founders Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-display:"Founders Grotesk X-Condensed","Founders Grotesk",Impact,sans-serif;

  /* fluid type scale (min at 375px, max at 1440px) */
  --t-sm:clamp(.875rem, .8rem + .3vw, 1rem);
  --t-base:clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --t-lg:clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem);
  --t-h2:clamp(2.75rem, 1.6rem + 5vw, 6rem);
  --t-h1:clamp(3.25rem, 1rem + 8.6vw, 9.25rem);
  --t-num:clamp(3.5rem, 2rem + 6vw, 8rem);

  /* spacing scale (spacious) */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem; --s-6:4.5rem; --s-7:6rem; --s-8:9rem;

  /* motion tokens */
  --d-fast:180ms; --d:360ms; --d-slow:700ms;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);

  --bar-h:64px;
  --slab:20px;
}

*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--t-base);line-height:1.5;color:var(--cream);background:var(--purple-lo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s-2);top:-100px;z-index:10000;background:var(--yellow);color:var(--ink);padding:.6rem 1rem;font-weight:600;transition:top var(--d-fast)}
.skip:focus{top:var(--s-2)}

.wrap{width:min(100% - 2*clamp(20px, 4vw, 64px), 1280px);margin-inline:auto}

/* ---------- Type ---------- */
.t-display{font-family:var(--font-display);font-weight:600;text-transform:uppercase;line-height:.9;letter-spacing:-.005em}
.t-h2{font-size:var(--t-h2);text-wrap:balance}
.h2-line{display:block;text-wrap:pretty;max-width:18ch}
.t-lg{font-size:var(--t-lg);line-height:1.25;text-wrap:pretty}
.muted{opacity:.62}
.chapter{display:flex;align-items:center;gap:.75rem;font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:var(--s-3)}
.chapter .n{font-family:var(--font-display);font-size:1.4em;letter-spacing:0;color:var(--teal)}
.section-head{max-width:60rem;margin-bottom:var(--s-6)}
.section-note{margin-top:var(--s-3);font-size:var(--t-lg);opacity:.85}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.75rem 1.5rem;background:var(--yellow);color:var(--ink);font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:1.35rem;line-height:1;text-decoration:none;position:relative;transition:transform var(--d) var(--ease-out),box-shadow var(--d) var(--ease-out),background var(--d-fast)}
.btn:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--teal)}
.btn:active{transform:translate(0,0);box-shadow:none}
.btn-sm{min-height:40px;padding:.5rem 1rem;font-size:1.1rem}
.icon-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:var(--ink);transition:transform var(--d-fast) var(--ease),background var(--d-fast)}
.icon-btn:hover{transform:scale(1.06);background:var(--white)}
.icon-btn:disabled{opacity:.35;cursor:default;transform:none}

/* ---------- Sticky chapter bar ---------- */
.bar{position:sticky;top:0;z-index:100;height:var(--bar-h);display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo nav cta";align-items:center;gap:var(--s-4);padding:0 clamp(16px,3vw,40px);
  background:color-mix(in srgb, var(--page-lo, var(--purple-lo)) 80%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.bar-logo img{width:140px;height:32px}
.bar-logo{grid-area:logo}.bar-cta{grid-area:cta}
.bar-nav{grid-area:nav;display:flex;justify-content:center;align-items:center;gap:clamp(.75rem,2.5vw,2.5rem)}
.bar-link{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.6rem .25rem;text-decoration:none;font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:1.15rem;line-height:1;white-space:nowrap;color:rgba(255,255,235,.72);transition:color var(--d-fast)}
.bar-link svg{width:15px;height:15px;transition:transform var(--d) var(--ease-out)}
a.bar-link:hover{color:var(--white)}
.bar-prev:hover svg{transform:translateX(-4px)}.bar-next:hover svg{transform:translateX(4px)}
.bar-link.is-current{color:var(--white);text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:.35em;text-decoration-thickness:2px}
/* page links: "What got us here" (left, past) and "Where we're headed" (right, future) */
.pagelink{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .6rem;text-decoration:none;font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:1.15rem;line-height:1;color:var(--teal);white-space:nowrap;transition:color var(--d-fast)}
.pagelink svg{transition:transform var(--d) var(--ease-out)}
.pagelink:hover{color:var(--white)}
.pagelink-left:hover svg{transform:translateX(-4px)}
.pagelink-right:hover svg{transform:translateX(4px)}
.bar-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.bar-progress span{display:block;height:100%;width:0;background:var(--teal);transform-origin:left}

/* ---------- Logos: any SVG, recoloured via mask so every mark sits in one brand colour ---------- */
/* --s = optical scale per mark (seeded from measured ink mass, then hand-tuned) so marks read as the same size */
.logo{display:block;height:calc(var(--h,28px) * var(--s,1));width:auto;max-width:100%;fill:currentColor;overflow:visible}
.logo *{vector-effect:non-scaling-stroke}
.logo-sm{--h:14px}

/* ---------- Grain ---------- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.28;mix-blend-mode:overlay;background-size:240px 240px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2.2' intercept='-0.6'/><feFuncG type='linear' slope='2.2' intercept='-0.6'/><feFuncB type='linear' slope='2.2' intercept='-0.6'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:calc(100svh - var(--bar-h));display:grid;align-content:center;overflow:hidden;padding:var(--s-5) 0 calc(var(--s-6) + 150px);
  background:radial-gradient(120% 90% at 30% 20%, var(--purple-hi) 0%, var(--purple) 40%, var(--purple-lo) 100%)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-cubes{position:absolute;right:-6%;top:-8%;width:min(62vw,820px);height:auto;opacity:.45}
.hero-inner{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--teal);margin-bottom:var(--s-4)}
.eyebrow-dot{width:10px;height:10px;background:var(--yellow);display:inline-block}
.hero-title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:var(--t-h1);line-height:.88;letter-spacing:-.01em;color:var(--white);max-width:19ch}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line > span{display:inline-block;will-change:transform}
.hero-title em{font-style:normal;color:var(--teal)}
.hero-lede{margin-top:var(--s-4);font-size:var(--t-lg);line-height:1.3;max-width:34ch;color:var(--cream)}
/* page buttons: past on the left, future on the right; label rolls up on hover */
.pbtn{display:inline-flex;align-items:center;gap:.75rem;min-height:52px;padding:.7rem 1.25rem;border:1.5px solid var(--teal);background:var(--purple-lo);color:var(--teal);text-decoration:none;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(1.15rem,1rem+.6vw,1.5rem);line-height:1;transition:background var(--d) var(--ease),color var(--d) var(--ease),transform var(--d) var(--ease-out)}
.pbtn:hover{background:var(--teal);color:var(--ink);transform:translateY(-2px)}
.pbtn-txt{position:relative;display:block;overflow:hidden;height:1em;line-height:1}
.pbtn-a,.pbtn-b{display:block;white-space:nowrap;transition:transform var(--d-slow) var(--ease-out)}
.pbtn-b{position:absolute;left:0;top:0;transform:translateY(110%)}
.pbtn:hover .pbtn-a{transform:translateY(-110%)}
.pbtn:hover .pbtn-b{transform:translateY(0)}
.pbtn-ico{display:grid;place-items:center;width:1.1em;height:1.1em;transition:transform var(--d) var(--ease-out)}
.pbtn-left:hover .pbtn-ico{transform:translateX(-4px)}
.pbtn-right:hover .pbtn-ico{transform:translateX(4px)}
.hero-stats{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid rgba(255,255,235,.22);max-width:52rem}
.hero-stats dt{font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.hero-stats dd{font-family:var(--font-display);font-size:clamp(2.2rem,1.5rem + 2.5vw,3.5rem);line-height:1;color:var(--yellow)}

.skyline{position:absolute;left:0;right:0;bottom:0;height:200px;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.skyline-track{position:absolute;bottom:0;left:0;display:flex;width:max-content;will-change:transform;animation:skyline 70s linear infinite}
.skyline-set{display:flex;align-items:flex-end;gap:clamp(24px,3vw,56px);padding-right:clamp(24px,3vw,56px)}
.skyline-set img{height:auto;max-height:190px;width:auto;opacity:.85}
@keyframes skyline{to{transform:translateX(-50%)}}

/* =========================================================
   01 GRAVITY — pinned narrative over a particle field
   ========================================================= */
.gravity{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);color:var(--purple)}
.gravity-pin{position:relative;height:calc(100svh - var(--bar-h));display:grid;align-items:center;overflow:hidden}
.field{position:absolute;inset:0;width:100%;height:100%;display:block}
.gravity-copy{position:relative;z-index:1;display:grid;gap:var(--s-3);align-content:center}
.steps{position:relative;min-height:12.5em;max-width:24ch}
.step{position:absolute;inset:0;opacity:0;transform:translateY(14px);transition:opacity var(--d) var(--ease),transform var(--d) var(--ease);pointer-events:none}
.step.is-on{opacity:1;transform:none;pointer-events:auto}
.step strong{font-weight:700}
.step .elsewhere{font-size:2.6em;display:block;line-height:.9;margin-top:.1em}
.step-dots{display:flex;gap:.5rem}
.step-dots li{width:34px;height:3px;background:var(--rule);transition:background var(--d)}
.step-dots li.is-on{background:var(--purple)}

/* "Elsewhere." is a term with a popup definition (hover / focus / tap) */
.term-wrap{position:relative;display:inline-block}
.term{background:none;border:0;padding:0;margin:0;color:inherit;font-family:var(--font-display);font-weight:600;text-transform:uppercase;line-height:.9;cursor:help;text-decoration:underline dotted;text-decoration-color:rgba(90,8,96,.5);text-decoration-thickness:3px;text-underline-offset:.12em;transition:text-decoration-color var(--d)}
.term:hover,.term:focus-visible,.term[aria-expanded="true"]{text-decoration-color:var(--teal)}
.def-tip{position:absolute;left:0;top:calc(100% + 14px);width:min(30rem, 80vw);z-index:20;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity var(--d) var(--ease),transform var(--d) var(--ease)}
.def-tip::before{content:"";position:absolute;inset:0 -12px -12px 0;background:var(--yellow);clip-path:polygon(0 calc(100% - 12px),12px 100%,100% 100%,100% 12px,calc(100% - 12px) 0)}
.def-tip-inner{position:relative;display:block;background:var(--white);border:1.5px solid var(--purple);padding:1rem 1.15rem;font-family:var(--font-body);font-size:var(--t-base);font-weight:400;text-transform:none;line-height:1.4;color:var(--purple);text-align:left}
.def-tip-term{display:block;margin-bottom:.35rem;font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase}
.def-tip-term i{font-style:italic;text-transform:none;letter-spacing:0;opacity:.6;margin-left:.4em}
.term-wrap:hover .def-tip,.term:focus-visible + .def-tip,.term[aria-expanded="true"] + .def-tip{opacity:1;transform:none;pointer-events:auto}
.step .elsewhere{font-size:2.6em;display:inline-block;line-height:.9;margin-top:.1em}

/* =========================================================
   02 PROOF — stat wall; each tile reveals a small story on hover / focus / tap
   ========================================================= */
.proof{background:var(--cream-2);color:var(--purple);padding:var(--s-8) 0}
.wall-hint{font-size:var(--t-sm);letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin:calc(-1*var(--s-4)) 0 var(--s-3)}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.tile{position:relative;background:var(--cream);border:1.5px solid var(--rule);min-height:290px;cursor:default;overflow:hidden;transition:border-color var(--d),transform var(--d) var(--ease-out),background var(--d)}
.tile:hover,.tile:focus-visible,.tile.is-open{border-color:var(--purple);transform:translateY(-3px)}
.tile-hero{grid-column:span 2;grid-row:span 2;min-height:440px;background:var(--purple);color:var(--cream);border-color:var(--purple)}
.tile-hero .tile-num{color:var(--teal)}
.tile-front{position:absolute;inset:0;display:grid;align-content:end;padding:clamp(1.25rem,2.5vw,2rem);transition:transform var(--d) var(--ease),opacity var(--d)}
.tile-num{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:var(--t-num);line-height:.86;letter-spacing:-.01em}
.tile-cap{margin-top:.5rem;font-size:var(--t-base);line-height:1.3;opacity:.85}
.tile-more{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:.75rem;padding:clamp(1.25rem,2.5vw,2rem);opacity:0;transform:translateY(12px);transition:transform var(--d) var(--ease),opacity var(--d);pointer-events:none}
.tile:hover .tile-more,.tile:focus-visible .tile-more,.tile.is-open .tile-more{opacity:1;transform:none;pointer-events:auto}
.tile:hover .tile-front,.tile:focus-visible .tile-front,.tile.is-open .tile-front{opacity:0;transform:translateY(-10px)}
.tile-hero:hover .tile-front,.tile-hero:focus-within .tile-front,.tile-hero.is-open .tile-front{opacity:1;transform:none}   /* hero keeps its number; the pool plays above it */
.tile-hero .tile-more{bottom:auto;height:60%;grid-template-rows:minmax(0,1fr) auto auto;gap:.6rem}
.tile-hero .tile-more .anim{max-height:none}
.tile-note{font-size:var(--t-sm);line-height:1.4}
.tile-logos{display:flex;gap:1.1rem 1.4rem;flex-wrap:wrap;align-items:center;color:var(--cream)}
.tile-logos .logo{--h:16px;opacity:.9}
.anim{width:100%;height:100%;min-height:0;max-height:180px;color:var(--purple);justify-self:center}
.tile-hero .anim{color:var(--cream)}

/* bubbles rise and the unicorn bobs */
.anim-bubbles .bubble{transform:translate(var(--x), 160px);opacity:0;fill:#ffcf53;stroke:none;transition:transform var(--d-slow) var(--ease-out),opacity var(--d);transition-delay:calc(var(--i) * 90ms)}
.tile:hover .anim-bubbles .bubble,.tile:focus-visible .anim-bubbles .bubble,.tile.is-open .anim-bubbles .bubble{opacity:1;transform:translate(var(--x), calc(30px + var(--i) * 14px));animation:bubble 3s ease-in-out infinite;animation-delay:calc(var(--i) * -.5s)}
@keyframes bubble{0%,100%{translate:0 0}50%{translate:0 -10px}}
.anim-bubbles .uni-float{transform-box:fill-box;transform-origin:center;transform:translateY(40px);opacity:0;transition:transform var(--d-slow) var(--ease-out),opacity var(--d)}
.tile:hover .anim-bubbles .uni-float,.tile:focus-visible .anim-bubbles .uni-float,.tile.is-open .anim-bubbles .uni-float{transform:none;opacity:1;animation:bob 3.4s ease-in-out infinite .6s}
@keyframes bob{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -7px;rotate:3deg}}

/* exit: the door swings open, runners leave */
.anim-exit .door{transform-box:fill-box;transform-origin:left center;transition:transform var(--d-slow) var(--ease-out)}
.anim-exit .runners circle{opacity:0;transition:transform var(--d-slow) var(--ease-out),opacity var(--d)}
.tile:hover .anim-exit .door,.tile:focus-visible .anim-exit .door,.tile.is-open .anim-exit .door{transform:perspective(200px) rotateY(-70deg)}
.tile:hover .anim-exit .runners circle,.tile:focus-visible .anim-exit .runners circle,.tile.is-open .anim-exit .runners circle{opacity:1}
.tile:hover .anim-exit .runners circle:nth-child(1){transform:translate(28px,6px);transition-delay:120ms}
.tile:hover .anim-exit .runners circle:nth-child(2){transform:translate(48px,-10px);transition-delay:220ms}
.tile:hover .anim-exit .runners circle:nth-child(3){transform:translate(64px,14px);transition-delay:320ms}

/* bell: swings, sound rings appear */
.anim-bell .bell{animation:swing 1.1s ease-in-out infinite;animation-play-state:paused}
.anim-bell .rings path{opacity:0;transition:opacity var(--d)}
.tile:hover .anim-bell .bell,.tile:focus-visible .anim-bell .bell,.tile.is-open .anim-bell .bell{animation-play-state:running}
.tile:hover .anim-bell .rings path,.tile:focus-visible .anim-bell .rings path,.tile.is-open .anim-bell .rings path{opacity:1}
.anim-bell .rings path:nth-child(3),.anim-bell .rings path:nth-child(4){transition-delay:180ms}
@keyframes swing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}

/* coins: the stack builds to six */
.anim-coins .coins ellipse{transform:translateY(40px);opacity:0;transition:transform var(--d) var(--ease-out),opacity var(--d);transition-delay:calc(var(--i) * 70ms)}
.anim-coins .mult{opacity:0;transition:opacity var(--d) 450ms}
.tile:hover .anim-coins .coins ellipse,.tile:focus-visible .anim-coins .coins ellipse,.tile.is-open .anim-coins .coins ellipse{transform:none;opacity:1}
.tile:hover .anim-coins .mult,.tile:focus-visible .anim-coins .mult,.tile.is-open .anim-coins .mult{opacity:1}

/* ticker: three rows of company marks roll while you hover (placeholders until real logos land) */
.anim-ticker{display:grid;gap:14px;align-content:center;max-height:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-row{display:flex;width:max-content;opacity:.35;transition:opacity var(--d)}
.ticker-row{color:var(--purple)}
.ticker-track{display:flex;align-items:center;gap:30px;padding-right:30px;animation:ticker 48s linear infinite;animation-play-state:paused}
.ticker-rev .ticker-track{animation-direction:reverse;animation-duration:56s}
.ticker-row .logo{--h:13px}
.tile:hover .ticker-row,.tile:focus-visible .ticker-row,.tile.is-open .ticker-row{opacity:1}
.tile:hover .ticker-track,.tile:focus-visible .ticker-track,.tile.is-open .ticker-track{animation-play-state:running}
@keyframes ticker{to{transform:translateX(-100%)}}

.scale{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1.5px solid var(--rule);display:grid;grid-template-columns:1fr 2fr;gap:var(--s-5);align-items:end}
.scale-label{font-size:var(--t-lg);margin:0;align-self:center}
.scale-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:end}

/* =========================================================
   03 VOICES — pinned conveyor (positions set by JS); stacked list on phones
   ========================================================= */
.voices{background:radial-gradient(110% 100% at 50% 40%, var(--blue-hi) 0%, var(--blue) 45%, var(--blue-lo) 100%);color:var(--teal)}
.quotes-pin{position:relative;height:calc(100svh - var(--bar-h));overflow:hidden;perspective:1400px;perspective-origin:50% 50%}
.quotes-head{position:absolute;left:0;right:0;top:clamp(1.5rem,4vh,3rem);z-index:5;color:var(--cream);pointer-events:none}
.quotes-head .t-h2{font-size:clamp(2rem,1.2rem + 3vw,4.25rem);max-width:22ch}
.quotes-track{position:absolute;left:50%;top:calc(var(--head-h, 180px) + (100% - var(--head-h, 180px)) * .5);width:0;height:0;transform-style:preserve-3d}
.qcard{position:absolute;left:0;top:0;width:var(--w);height:var(--h);will-change:transform;backface-visibility:hidden}
.qcard-landscape{--w:680px;--h:400px}
.qcard-square{--w:400px;--h:400px}
.qcard::before{content:"";position:absolute;inset:0 calc(-1*var(--slab)) calc(-1*var(--slab)) 0;background:var(--yellow);
  clip-path:polygon(0 calc(100% - var(--slab)),var(--slab) 100%,100% 100%,100% var(--slab),calc(100% - var(--slab)) 0);pointer-events:none}
.qbody{position:relative;height:100%;overflow:hidden;background:var(--blue);border:1.5px solid var(--teal);display:flex;gap:28px;padding:36px 32px}
.qcard-square .qbody{padding:44px 40px}
.qtext{flex:1;min-width:0;display:flex;flex-direction:column}
.qname{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:34px;line-height:1.05}
.qrole{font-size:15px;line-height:1.2;margin-top:.2em;opacity:.9}
.qquote{font-size:17px;line-height:1.35;margin-top:auto;padding-top:22px}
.qphoto{width:44%;height:100%;object-fit:cover;border:1.5px solid var(--teal)}
.quotes-cue{position:absolute;left:50%;bottom:1.25rem;translate:-50% 0;font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;opacity:.6;transition:opacity var(--d)}
.quotes-pin.is-done .quotes-cue{opacity:0}

/* =========================================================
   04 PARTNERS + PRESS
   ========================================================= */
.partners{background:var(--yellow);color:var(--ink);padding:var(--s-8) 0}
.partners .chapter .n{color:var(--purple)}
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5) var(--s-5);padding:var(--s-6) 0;border-top:1.5px solid rgba(1,0,15,.2);border-bottom:1.5px solid rgba(1,0,15,.2);color:var(--ink)}
.slot{position:relative;height:72px;display:grid;place-items:center;perspective:700px}
.slot .logo{--h:32px;position:absolute;max-width:min(100%,200px);transform-style:preserve-3d;backface-visibility:hidden;will-change:transform}
.slot .is-back{opacity:0}

.press{margin-top:var(--s-7)}
.press-title{margin-bottom:var(--s-5);max-width:60rem}
.press-list li + li{border-top:1px solid rgba(1,0,15,.18)}
.press-row{display:grid;grid-template-columns:minmax(120px,.8fr) 3fr auto auto;gap:var(--s-3);align-items:baseline;padding:1.1rem 0;text-decoration:none;min-height:56px;transition:background var(--d-fast),padding var(--d) var(--ease)}
.press-row:hover{background:rgba(255,255,235,.35);padding-left:.75rem;padding-right:.75rem}
.press-outlet{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:1.3rem;line-height:1}
.press-head{font-size:var(--t-base);text-wrap:pretty}
.press-date{font-size:var(--t-sm);opacity:.7;white-space:nowrap}
.press-arrow{font-size:1.4rem;transition:transform var(--d) var(--ease-out)}
.press-row:hover .press-arrow{transform:translateX(6px)}

/* =========================================================
   05 LETTER
   ========================================================= */
.letter{background:radial-gradient(120% 95% at 50% 40%, var(--purple-hi) 0%, var(--purple) 42%, var(--purple-lo) 100%);color:var(--cream);padding:var(--s-8) 0}
.letter-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s-7);align-items:center}
.letter-copy{display:grid;gap:var(--s-4);justify-items:start;max-width:36rem}
.letter-copy .t-h2{color:var(--teal)}
.letter-photo{justify-self:center;width:min(100%,380px)}
.photo-frame{position:relative}
.photo-frame::before{content:"";position:absolute;inset:0 calc(-1*var(--slab)) calc(-1*var(--slab)) 0;background:var(--yellow);z-index:-1;
  clip-path:polygon(0 calc(100% - var(--slab)),var(--slab) 100%,100% 100%,100% var(--slab),calc(100% - var(--slab)) 0)}
.photo-frame img{width:100%;height:auto;border:1.5px solid var(--teal)}
.letter-photo figcaption{margin-top:var(--s-4);font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;opacity:.75}

/* ---------- Footer ---------- */
.foot{background:var(--purple-lo);color:var(--cream);padding:var(--s-8) 0 var(--s-5);border-top:1px solid rgba(255,255,235,.1)}
.foot-grid{display:grid;gap:var(--s-7)}
.foot-line{font-size:clamp(2.5rem, .4rem + 6.55vw, 6.25rem);line-height:.9;color:var(--teal);text-wrap:balance}
.foot-pages{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.pagebtn{display:grid;gap:.5rem;padding:clamp(1.25rem,2.5vw,2rem);border:1.5px solid rgba(255,255,235,.25);text-decoration:none;min-height:120px;align-content:end;transition:border-color var(--d),background var(--d),transform var(--d) var(--ease-out)}
.pagebtn:hover{border-color:var(--teal);background:rgba(9,225,205,.06);transform:translateY(-3px)}
.pagebtn-right{text-align:right;justify-items:end}
.pagebtn-kicker{font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.pagebtn-label{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(1.6rem,1rem + 2vw,2.75rem);line-height:1;color:var(--teal)}
.pagebtn-label svg{width:.8em;height:.8em;transition:transform var(--d) var(--ease-out)}
.pagebtn-left:hover svg{transform:translateX(-6px)}
.pagebtn-right:hover svg{transform:translateX(6px)}
.foot-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);align-items:center;padding-top:var(--s-4);border-top:1px solid rgba(255,255,235,.1)}
.foot-nav{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.foot-nav a{min-height:44px;display:inline-flex;align-items:center;font-family:var(--font-display);text-transform:uppercase;font-size:1.3rem;text-decoration:none;border-bottom:2px solid transparent;transition:border-color var(--d-fast)}
.foot-nav a:hover{border-color:var(--teal)}
.foot-small{font-size:var(--t-sm);opacity:.6}

/* stub pages */
.stub-main{min-height:calc(100svh - var(--bar-h));display:grid;align-content:center;padding:var(--s-8) 0;background:radial-gradient(120% 95% at 50% 40%, var(--purple-hi) 0%, var(--purple) 42%, var(--purple-lo) 100%)}
.stub-main .wrap{display:grid;gap:var(--s-4);max-width:50rem}
.stub .bar{grid-template-columns:auto 1fr auto}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-hero{grid-column:span 2;grid-row:auto;min-height:380px}
  .bar{gap:var(--s-3)}
  .letter-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
  .slot .logo{--h:26px}
}
@media (max-width: 767px){
  :root{--bar-h:92px}
  /* phones: logo + button on the first row, the three chapter links on a slim second row */
  .bar{height:auto;min-height:var(--bar-h);grid-template-columns:1fr auto;grid-template-areas:"logo cta" "nav nav";gap:0 var(--s-2);padding-top:.5rem;padding-bottom:.15rem}
  .bar-nav{gap:.6rem}
  .bar-link{font-size:.88rem;min-height:34px;padding:.35rem .15rem}
  .bar-link svg{display:none}
  .bar-cta{font-size:1rem;padding:.45rem .8rem}
  .gravity-pin{align-items:end}
  .field{height:58%}
  .gravity-copy{padding-bottom:var(--s-6)}
  .steps{min-height:10em}
  .bar-logo img{width:112px;height:26px}
  .hero{padding-bottom:calc(var(--s-7) + 90px)}
  .hero-cubes{width:120vw;right:-40%;top:-4%;opacity:.3}
  .skyline{height:120px}
  .skyline-set img{max-height:110px}
  .steps{min-height:11em;max-width:none}
  .wall{grid-template-columns:1fr 1fr;gap:var(--s-2)}
  .tile{min-height:200px}
  .tile-hero{min-height:320px}
  .tile-front,.tile-more{padding:1rem}
  .anim{max-height:110px}
  .scale{grid-template-columns:1fr;gap:var(--s-4)}
  .scale-row{grid-template-columns:1fr;gap:var(--s-4)}
  .pbtn{justify-content:space-between}
  .def-tip{left:auto;right:0}
  .quotes-pin{height:auto;overflow:visible;perspective:none;padding:var(--s-7) 0 var(--s-6)}
  .quotes-head{position:static;margin-bottom:var(--s-5)}
  .quotes-track{position:static;width:auto;height:auto;display:grid;gap:44px;padding:0 clamp(20px,4vw,64px)}
  .qcard{position:static;width:auto;height:auto;transform:none !important}
  .qbody,.qcard-square .qbody{padding:24px;flex-direction:column}
  .qquote{margin-top:16px;padding-top:0}
  .qphoto{width:60%;height:auto;align-self:center}
  .quotes-cue{display:none}
  .foot-pages{grid-template-columns:1fr}
  .pagebtn-right{text-align:left;justify-items:start}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
  .slot{height:56px}
  .slot .logo{--h:22px;max-width:min(100%,140px)}
  .press-row{grid-template-columns:1fr auto;grid-template-rows:auto auto}
  .press-head{grid-column:1 / -1}
  .press-arrow{display:none}
}

/* ---------- Reduced motion: final, readable states, no scroll-jacking ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .skyline-track{animation:none;transform:none}
  .gravity-pin{height:auto;padding:var(--s-7) 0}
  .quotes-pin{height:auto;overflow:visible;perspective:none;padding:var(--s-7) 0}
  .quotes-head{position:static;margin-bottom:var(--s-5)}
  .quotes-track{position:static;width:auto;height:auto;display:grid;gap:44px;padding:0 clamp(20px,4vw,64px)}
  .qcard{position:static;width:auto;height:auto;transform:none !important}
  .tile-more{opacity:1;transform:none;position:static}
  .tile-front{position:static}
  .steps{min-height:0}
  .step{position:static;opacity:1;transform:none;margin-bottom:var(--s-4)}
  .step-dots{display:none}
}