body[data-page="home"] {
    --paper: #f5f0e6;
    --paper-ink: #142d40;
    --coral: #f36b47;
    --aqua: #72ead6;
    background: var(--paper);
}

body[data-page="home"] main { overflow: clip; }

body[data-page="home"] .site-header.is-scrolled {
    background: rgba(8,35,46,.94);
    border-color: rgba(255,255,255,.13);
}

body[data-page="home"] .site-header.is-scrolled .brand img {
    filter: brightness(0) invert(1) drop-shadow(0 8px 20px rgba(0,0,0,.2));
}

/* Hero: atmospheric, but lifted out of pure black. */
.hero-organic {
    --hero-progress: 0;
    min-height: max(760px, 100svh);
    align-items: center;
    color: #fff;
    background: #0b3a4c;
}

.hero-fallback,
.hero-fallback img {
    position: absolute;
    z-index: -5;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-fallback img { object-fit: cover; object-position: 58% center; }

.hero-organic .hero-media {
    inset: -5%;
    width: 110%;
    height: 110%;
    max-width: none;
    object-position: 58% center;
    opacity: 0;
    filter: saturate(1.12) contrast(.96) brightness(1.08);
    transform: translate3d(0, calc(var(--hero-progress) * 4.5vh), 0) scale(1.055);
    will-change: transform, opacity;
    transition: opacity .7s ease;
}

.hero-organic .hero-media.is-playing { opacity: .96; }

.hero-motion-toggle {
    position: absolute;
    z-index: 5;
    left: max(24px, calc((100vw - var(--max)) / 2));
    bottom: 27px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 13px 8px 10px;
    color: rgba(255,255,255,.82);
    background: rgba(5,35,45,.3);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
    cursor: pointer;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.hero-motion-toggle:hover { color: #fff; background: rgba(8,62,72,.58); border-color: rgba(255,255,255,.5); }
.hero-motion-icon { display: grid; width: 20px; height: 20px; place-items: center; color: #b9fff0; font-size: 11px; line-height: 1; }

.hero-organic .hero-vignette {
    background:
        linear-gradient(90deg, rgba(5,31,45,.86), rgba(7,39,50,.48) 48%, rgba(8,44,54,.04) 77%),
        linear-gradient(0deg, rgba(8,48,57,.84), transparent 34%),
        linear-gradient(180deg, rgba(4,27,38,.46), transparent 22%);
}

.hero-organic::after {
    opacity: .24;
    background-image: radial-gradient(circle, rgba(255,255,255,.3) 0 1px, transparent 1.5px);
    background-size: 31px 31px;
    mask-image: linear-gradient(90deg, #000, transparent 58%);
}

.hero-light {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    animation: portal-breathe 7s ease-in-out infinite alternate;
}

.hero-light-cyan {
    width: 48vw;
    height: 48vw;
    right: -19vw;
    top: -22vw;
    background: radial-gradient(circle, rgba(76,232,222,.27), transparent 67%);
}

.hero-light-coral {
    width: 34vw;
    height: 34vw;
    right: 15vw;
    bottom: -23vw;
    background: radial-gradient(circle, rgba(255,116,82,.25), transparent 68%);
    animation-delay: -3s;
}

@keyframes portal-breathe {
    to { transform: translate3d(2.5vw, -1.5vw, 0) scale(1.12); }
}

.hero-organic .hero-content {
    width: min(780px, calc(100% - 48px));
    margin-inline: max(24px, calc((100vw - var(--max)) / 2));
    padding: calc(var(--header) + 70px) 0 180px;
    opacity: calc(1 - var(--hero-progress) * .55);
    transform: translate3d(0, calc(var(--hero-progress) * -3vh), 0);
    will-change: transform, opacity;
}

.hero-organic .hero-content .eyebrow { color: #b9fff0; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.hero-organic h1 { max-width: 760px; font-family: var(--body); font-size: clamp(58px, 7.5vw, 112px); font-weight: 760; line-height: .91; letter-spacing: -.065em; text-wrap: balance; text-shadow: 0 8px 45px rgba(0,18,27,.3); }
.hero-organic .hero-lede { max-width: 680px; margin: 30px 0 34px; color: rgba(255,255,255,.9); font-size: clamp(18px,1.55vw,22px); line-height: 1.56; text-shadow: 0 3px 26px rgba(0,18,27,.7); }
.button-glass { color: #fff; background: rgba(219,255,250,.1); border-color: rgba(229,255,251,.54); backdrop-filter: blur(14px); }
.button-glass:hover { background: rgba(229,255,251,.2); border-color: #fff; }

.hero-metrics {
    position: absolute;
    z-index: 3;
    right: max(25px, calc((100vw - var(--max)) / 2));
    bottom: 90px;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 9px;
}

.hero-metrics > div {
    min-width: 150px;
    padding: 13px 18px 12px;
    background: rgba(6,39,48,.28);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 99px;
    backdrop-filter: blur(17px) saturate(1.2);
    box-shadow: 0 18px 36px rgba(0,29,34,.12);
}

.hero-metrics strong,
.hero-metrics span { display: block; line-height: 1.15; }
.hero-metrics strong { font: 700 17px var(--display); letter-spacing: -.03em; }
.hero-metrics span { margin-top: 3px; color: rgba(255,255,255,.72); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.hero-threshold-link {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 24px;
    display: grid;
    justify-items: center;
    gap: 7px;
    color: rgba(255,255,255,.74);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .18em;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.hero-threshold-link i { position: relative; width: 17px; height: 27px; border: 1px solid rgba(255,255,255,.48); border-radius: 12px 12px 50% 50%; }
.hero-threshold-link i::after { content: ""; position: absolute; left: 7px; top: 6px; width: 2px; height: 7px; background: #fff; border-radius: 3px; animation: step-down 1.8s ease-in-out infinite; }
@keyframes step-down { 50% { transform: translateY(8px); opacity: .25; } }

.hero-threshold { position: absolute; z-index: 2; left: 50%; bottom: -45px; width: min(92vw,1120px); height: 105px; pointer-events: none; transform: translateX(-50%); }
.hero-threshold::before,
.hero-threshold::after,
.hero-threshold span { content: ""; position: absolute; inset: 0; border: 1px solid rgba(171,255,239,.38); border-radius: 50%; }
.hero-threshold::before { box-shadow: 0 -13px 70px rgba(93,242,219,.19); }
.hero-threshold::after { inset: 10px 8%; border-color: rgba(255,141,97,.28); }
.hero-threshold span { inset: 20px 16%; border-color: rgba(255,255,255,.18); }

/* The original sketch is the central proof, treated like a physical artifact. */
.explain-flow {
    position: relative;
    z-index: 2;
    padding: clamp(120px,14vw,210px) 0 clamp(110px,13vw,190px);
    color: var(--paper-ink);
    background:
        radial-gradient(circle at 4% 18%, rgba(255,137,90,.17), transparent 25rem),
        radial-gradient(circle at 92% 65%, rgba(39,190,185,.14), transparent 29rem),
        var(--paper);
}

.explain-flow::before { content: ""; position: absolute; inset: 0; opacity: .26; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"); }

.flow-heading { position: relative; width: min(var(--max),calc(100% - 48px)); margin: 0 auto clamp(80px,10vw,150px); }
.flow-heading .eyebrow,
.builder-flow .eyebrow,
.voices-flow .eyebrow,
.faq-flow .eyebrow { color: #b43b21; }
.flow-heading h2 { max-width: 1000px; font-size: clamp(48px,7.1vw,104px); line-height: .96; letter-spacing: -.065em; }
.flow-heading h2 em { color: #147d82; font-family: Georgia,serif; font-weight: 400; letter-spacing: -.05em; }
.flow-heading > p:last-child { max-width: 680px; margin: 34px 0 0 auto; color: #425367; font-size: clamp(18px,2vw,24px); line-height: 1.55; }

.sketch-story { position: relative; width: min(1380px,calc(100% - 48px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0,1.28fr) minmax(330px,.72fr); gap: clamp(50px,8vw,130px); align-items: start; }
.sketch-stage { position: sticky; top: calc(var(--header) + 45px); margin: 0; perspective: 1200px; }
.sketch-paper { position: relative; padding: clamp(13px,1.6vw,23px); background: #fffdf8; border-radius: 1% 2.5% 1.4% 2%; box-shadow: 0 44px 90px rgba(30,50,64,.17),0 7px 18px rgba(57,60,51,.1); transform: rotate(-1.35deg) rotateX(calc((.5 - var(--sketch-progress,.5)) * 1.1deg)); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.sketch-paper::before { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 45px rgba(122,92,42,.05); }
.sketch-paper img { width: 100%; height: auto; border-radius: 1%; }
.sketch-stage figcaption { margin: 20px 4% 0; color: #6c776f; font-size: 12px; letter-spacing: .03em; }

.sketch-pin { position: absolute; z-index: 4; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: #df502d; border: 4px solid #fffdf8; border-radius: 50%; font: 700 14px var(--display); box-shadow: 0 8px 22px rgba(89,44,25,.25); transform: scale(.74); opacity: .42; transition: transform .45s cubic-bezier(.2,.9,.2,1.25),opacity .35s,background .35s; }
.sketch-pin-one { left: 24%; top: 61%; }
.sketch-pin-two { right: 23%; top: 34%; }
.sketch-pin-three { left: 46%; top: 14%; }
.sketch-story[data-active="0"] .sketch-pin-one,
.sketch-story[data-active="1"] .sketch-pin-two,
.sketch-story[data-active="2"] .sketch-pin-three { opacity: 1; background: #117f86; transform: scale(1); }

.sketch-notes { padding: 5vh 0 18vh; }
.sketch-note { position: relative; min-height: 65vh; display: flex; flex-direction: column; justify-content: center; padding: 8vh 0 8vh clamp(32px,4vw,66px); opacity: .35; transform: translateX(16px); transition: opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1); }
.sketch-note::before { content: ""; position: absolute; left: 0; top: calc(50% - 5px); width: 10px; height: 10px; background: #c9a99a; border-radius: 50%; box-shadow: 0 0 0 8px rgba(191,73,43,.06); transition: background .3s,transform .3s; }
.sketch-note::after { content: ""; position: absolute; left: 4px; top: calc(50% + 9px); width: 1px; height: 48%; background: linear-gradient(#c8bbb1,transparent); }
.sketch-note.is-active { opacity: 1; transform: none; }
.sketch-note.is-active::before { background: #147f83; transform: scale(1.35); }
.sketch-note > span { color: #ca5c3f; font: 700 12px var(--display); letter-spacing: .16em; }
.sketch-note .eyebrow { margin: 18px 0 12px; color: #54717c; }
.sketch-note h3 { max-width: 430px; font-size: clamp(38px,4.2vw,62px); }
.sketch-note > p:last-child { max-width: 470px; margin-top: 22px; color: #496471; }
.flow-deeper { max-width: 810px; margin: clamp(55px,8vw,110px) auto 0; padding-top: 32px; color: #58727c; border-top: 1px solid rgba(28,74,88,.17); text-align: center; }
.flow-deeper a { color: #bf462e; font-weight: 650; }

/* Real gameplay captures blend into a continuous impossible-space threshold. */
.world-threshold {
    --threshold-progress: 0;
    position: relative;
    z-index: 3;
    min-height: min(82vw,880px);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: #156d7a;
    clip-path: ellipse(calc(40% + var(--threshold-progress) * 46%) calc(46% + var(--threshold-progress) * 34%) at 50% 50%);
}

.threshold-art,
.threshold-art img { position: absolute; inset: -5%; width: 110%; height: 110%; }
.threshold-still { z-index: 0; }
.threshold-art img { object-fit: cover; filter: saturate(1.06) brightness(1.04); transform: translate3d(0,calc((.5 - var(--threshold-progress)) * 7%),0) scale(1.05); will-change: transform; }
video.threshold-art { z-index: 0; max-width: none; object-fit: cover; opacity: 0; filter: saturate(1.06) brightness(.9); transform: translate3d(0,calc((.5 - var(--threshold-progress)) * 7%),0) scale(1.05); will-change: transform, opacity; transition: opacity .9s ease; }
video.threshold-art.is-playing { opacity: 1; }
.world-threshold::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(4,38,51,.74),rgba(6,46,57,.08) 69%),linear-gradient(0deg,rgba(3,42,51,.4),transparent 55%); }
.threshold-copy { position: relative; z-index: 2; width: min(var(--max),calc(100% - 48px)); }
.threshold-copy h2 { max-width: 880px; font-size: clamp(50px,7vw,105px); text-shadow: 0 4px 40px rgba(0,25,34,.35); }
.threshold-copy a { display: inline-flex; gap: 10px; margin-top: 33px; color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.52); }
.threshold-iris { display: none; }

/* The world sequence alternates placement but shares one continuous landscape. */
.world-journey {
    position: relative;
    padding: clamp(130px,14vw,220px) max(24px,calc((100vw - var(--max)) / 2)) 170px;
    color: #0d3143;
    background:
        radial-gradient(circle at 10% 19%,rgba(255,145,80,.22),transparent 23rem),
        radial-gradient(circle at 92% 43%,rgba(40,194,196,.2),transparent 27rem),
        radial-gradient(circle at 12% 74%,rgba(105,127,232,.17),transparent 28rem),
        linear-gradient(180deg,#e7f1ee,#f6eadd 38%,#e6f4f1 70%,#f2eadf);
}

.world-journey::before { content: ""; position: absolute; top: -78px; left: -5%; width: 110%; height: 145px; background: #e7f1ee; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.journey-intro { max-width: 980px; margin-bottom: clamp(90px,12vw,180px); }
.journey-intro h2 { font-size: clamp(50px,6.3vw,94px); }
.journey-intro > p:last-child { max-width: 650px; margin: 30px 0 0 auto; color: #496a77; font-size: clamp(18px,1.7vw,22px); }

.journey-progress { position: sticky; z-index: 8; top: 84px; width: max-content; max-width: 100%; display: flex; gap: 5px; margin: 0 auto -62px; padding: 6px; background: rgba(247,244,236,.72); border: 1px solid rgba(30,76,89,.12); border-radius: 999px; box-shadow: 0 12px 34px rgba(26,70,80,.08); backdrop-filter: blur(15px); }
.journey-progress a { display: flex; align-items: center; gap: 7px; padding: 8px 12px; color: #54717b; font-size: 11px; font-weight: 700; text-decoration: none; border-radius: 999px; transition: color .25s,background .25s; }
.journey-progress a span { font-size: 9px; opacity: .6; }
.journey-progress a.is-active { color: #fff; background: #174f60; }

.world-scene { --scene-progress: .5; position: relative; min-height: 105svh; display: grid; grid-template-columns: repeat(12,1fr); align-items: center; gap: 20px; isolation: isolate; }
.world-copy { position: relative; z-index: 3; grid-row: 1; }
.world-scene-right .world-copy { grid-column: 1 / span 4; }
.world-scene-left .world-copy { grid-column: 9 / span 4; }
.world-copy h3 { margin: 14px 0 23px; font-size: clamp(54px,6.2vw,91px); }
.world-copy p { margin: 0; color: #426370; font-size: clamp(17px,1.45vw,20px); }
.world-index { color: #dc583c; font-size: 11px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }

.world-media { position: relative; z-index: 2; grid-row: 1; margin: 0; transform: translate3d(0,calc((.5 - var(--scene-progress)) * 8vh),0) rotate(calc((var(--scene-progress) - .5) * 1.2deg)); will-change: transform; }
.world-scene-right .world-media { grid-column: 5 / -1; }
.world-scene-left .world-media { grid-column: 1 / span 8; }
.world-media picture,
.world-media video { display: block; overflow: hidden; box-shadow: 0 34px 75px rgba(19,59,69,.19); }
.world-scene-right .world-media picture,
.world-scene-right .world-media video { border-radius: 42% 6% 35% 9% / 12% 14% 10% 24%; }
.world-scene-left .world-media picture,
.world-scene-left .world-media video { border-radius: 7% 38% 10% 32% / 17% 9% 25% 11%; }
.world-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transform: scale(calc(1.07 - var(--scene-progress) * .035)); }
.world-media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #09151a; }
.world-visual { position: relative; display: grid; aspect-ratio: 16 / 9; overflow: hidden; box-shadow: 0 34px 75px rgba(19,59,69,.19); }
.world-scene-right .world-visual { border-radius: 42% 6% 35% 9% / 12% 14% 10% 24%; }
.world-scene-left .world-visual { border-radius: 7% 38% 10% 32% / 17% 9% 25% 11%; }
.world-visual > picture,
.world-visual > video { grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.world-visual > picture { z-index: 1; opacity: 1; transition: opacity .7s ease; }
.world-visual.has-video > picture { opacity: 0; }
.world-visual > picture img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.world-visual > video { z-index: 2; aspect-ratio: auto; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.world-visual > video.is-ready,
.world-visual > video.is-playing { opacity: 1; pointer-events: auto; }
.world-visual::after {
    content: "GAMEPLAY · IN MOTION";
    position: absolute;
    z-index: 4;
    right: 16px;
    top: 16px;
    padding: 8px 11px;
    color: #fff;
    background: rgba(5,35,45,.68);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    opacity: 0;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .11em;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
    backdrop-filter: blur(12px);
}
.world-visual.is-playing::after { opacity: 1; transform: none; }
.world-scene-tower .world-halo { background: radial-gradient(circle,rgba(255,143,75,.3),rgba(84,210,204,.09) 43%,transparent 70%); }
.world-scene-community .world-media img { aspect-ratio: 5 / 4; }
.world-media figcaption { max-width: 600px; margin: 17px 24px 0; color: #617d86; font-size: 11px; letter-spacing: .04em; }

.world-halo { position: absolute; z-index: -1; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; border-radius: 50%; opacity: calc(.42 + var(--scene-progress) * .3); transform: translate3d(0,calc((.5 - var(--scene-progress)) * 8vh),0) scale(calc(.9 + var(--scene-progress) * .12)); }
.world-scene-right .world-halo { right: -7vw; background: radial-gradient(circle,rgba(34,202,194,.25),transparent 68%); }
.world-scene-left .world-halo { left: -8vw; background: radial-gradient(circle,rgba(255,128,76,.22),transparent 67%); }

/* Features become a flowing movement sequence rather than four boxes. */
.movement-river { position: relative; padding: clamp(145px,16vw,240px) 0; overflow: hidden; color: #fff; background: radial-gradient(circle at 14% 22%,rgba(93,232,215,.26),transparent 29rem),radial-gradient(circle at 88% 78%,rgba(255,117,77,.26),transparent 29rem),linear-gradient(135deg,#075879,#083e6d 55%,#153c6d); }
.movement-river::before,
.movement-river::after { content: ""; position: absolute; left: -7%; width: 114%; height: 105px; background: #f2eadf; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.movement-river::before { top: -67px; }
.movement-river::after { bottom: -67px; transform: rotate(180deg); }

.kinetic-type { --kinetic-shift: 0px; position: absolute; top: 58px; left: 0; display: flex; width: max-content; color: rgba(255,255,255,.075); font: 700 clamp(74px,11vw,168px)/.8 var(--display); letter-spacing: -.055em; white-space: nowrap; transform: translate3d(var(--kinetic-shift),0,0); will-change: transform; }
.kinetic-type span { padding-right: .25em; }
.movement-intro,
.capability-path { width: min(var(--max),calc(100% - 48px)); margin-inline: auto; }
.movement-intro { position: relative; z-index: 2; }
.movement-intro .eyebrow { color: #c9ffe9; }
.movement-intro h2 { max-width: 950px; font-size: clamp(50px,7vw,100px); line-height: .95; letter-spacing: -.065em; }

.capability-path { position: relative; margin-top: clamp(90px,12vw,165px); display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(24px,4vw,62px); padding: 0; list-style: none; }
.capability-path::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: linear-gradient(90deg,#98ffe4,rgba(255,255,255,.1),#ffb08d); }
.capability-path li { position: relative; padding-top: 46px; }
.capability-path li::before { content: ""; position: absolute; z-index: 1; left: 0; top: 6px; width: 11px; height: 11px; background: #c7fff0; border: 4px solid #176b85; border-radius: 50%; box-sizing: content-box; }
.capability-path li > span { color: rgba(219,255,245,.56); font: 700 11px var(--display); letter-spacing: .16em; }
.capability-path h3 { margin-top: 20px; font-size: clamp(29px,2.7vw,42px); }
.capability-path p { color: rgba(238,255,250,.73); font-size: 15px; line-height: 1.67; }

.builder-flow { position: relative; display: grid; grid-template-columns: minmax(340px,.75fr) minmax(0,1.25fr); gap: clamp(55px,9vw,145px); align-items: center; padding: clamp(130px,15vw,220px) max(24px,calc((100vw - var(--max)) / 2)); color: #112a3c; background: radial-gradient(circle at 12% 80%,rgba(255,137,89,.15),transparent 28rem),linear-gradient(120deg,#f2eadb,#dff2eb); }
.builder-flow::before { display: none; }
.builder-copy h2 { font-size: clamp(54px,7vw,98px); letter-spacing: -.07em; }
.builder-copy > p:not(.eyebrow):not(.builder-manifesto) { max-width: 560px; color: #4a6070; font-size: 19px; }
.builder-manifesto { margin: 39px 0; color: #2e5360; font: 500 clamp(25px,3vw,40px)/1.2 var(--display); letter-spacing: -.035em; }
.builder-manifesto strong { color: #b23c24; }
.button-ink { color: #fff; background: #153b4c; border-color: #153b4c; }
.button-ink:hover { color: #fff; background: #0b777a; border-color: #0b777a; }
.builder-copy .button-row { align-items: center; }
.builder-copy .text-link { color: #1c6770; font-size: 13px; font-weight: 750; }

.builder-window { position: relative; padding: clamp(12px,1.4vw,21px); background: rgba(255,255,255,.48); border-radius: 48% 52% 40% 60% / 54% 43% 57% 46%; box-shadow: 0 45px 100px rgba(42,85,83,.18); transform: rotate(1.1deg); }
.builder-window::after { content: ""; position: absolute; z-index: -1; inset: -7%; background: radial-gradient(circle at 65% 45%,rgba(47,186,176,.2),transparent 60%); border-radius: 50%; }
.builder-window video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: inherit; clip-path: inset(0 round 47% 53% 39% 61% / 53% 42% 58% 47%); }
.builder-window-label { position: absolute; z-index: 2; right: 9%; top: 7%; padding: 8px 13px; color: #eafff8; background: rgba(13,71,77,.7); border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(10px); }

.voices-flow { position: relative; min-height: 110svh; padding: clamp(120px,14vw,200px) max(24px,calc((100vw - var(--max)) / 2)); overflow: hidden; color: #182c3d; background: #f7d9c3; }
.voices-flow::before,
.voices-flow::after { content: "“"; position: absolute; color: rgba(177,63,35,.075); font: 500 44vw/.7 Georgia,serif; pointer-events: none; }
.voices-flow::before { left: -4vw; top: 8%; }
.voices-flow::after { content: "”"; right: -2vw; bottom: -7%; }
.voices-heading { max-width: 900px; }
.voices-heading h2 { font-family: Georgia,serif; font-size: clamp(45px,6.2vw,88px); font-weight: 400; letter-spacing: -.055em; }
.voice { position: relative; max-width: 720px; margin-top: clamp(80px,10vw,150px); }
.voice blockquote { margin: 0; color: #223c4d; font: 500 clamp(26px,3.2vw,46px)/1.24 var(--display); letter-spacing: -.04em; }
.voice p { margin: 20px 0 0; color: #a43d28; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.voice p span { color: #48575c; }
.voices-flow .voices-heading .eyebrow { color: #96301c; }
.voice-two { margin-left: auto; }
.voice-three { margin-left: 15%; }

.faq-flow { display: grid; grid-template-columns: minmax(280px,.65fr) minmax(0,1.35fr); gap: clamp(55px,10vw,160px); align-items: start; padding: clamp(120px,14vw,190px) max(24px,calc((100vw - var(--max)) / 2)); color: #14293b; background: var(--paper); }
.faq-heading { position: sticky; top: calc(var(--header) + 55px); }
.faq-heading h2 { font-size: clamp(47px,5.5vw,78px); }
.faq-flow .faq-list { margin: 0; }
.faq-flow .faq-list details { border-color: rgba(35,75,82,.18); }
.faq-flow .faq-list summary { color: #19394b; font-size: clamp(19px,2vw,25px); }
.faq-flow .faq-list summary::after { color: #b54a31; }
.faq-flow .faq-list details > p { color: #506b77; }
.faq-flow .faq-list a { color: #a9432d; }

.closing-portal { --closing-progress: .5; position: relative; min-height: 92svh; display: flex; align-items: center; overflow: hidden; padding: 130px max(24px,calc((100vw - var(--max)) / 2)); color: #fff; background: #102e39; isolation: isolate; }
.closing-art,
.closing-art img { position: absolute; z-index: -2; inset: -5%; width: 110%; height: 110%; }
.closing-art img { object-fit: cover; filter: saturate(1.03) brightness(.86); transform: translate3d(0,calc((.5 - var(--closing-progress)) * 5%),0) scale(1.04); }
.closing-portal::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(6,28,37,.82),rgba(8,34,43,.26) 66%),radial-gradient(circle at 68% 50%,transparent,rgba(6,24,32,.3)); }
.closing-copy { max-width: 840px; }
.closing-copy .eyebrow { color: #b8ffe9; }
.closing-copy h2 { font-size: clamp(57px,7.3vw,110px); letter-spacing: -.07em; text-shadow: 0 8px 45px rgba(0,0,0,.28); }
.closing-copy > p:not(.eyebrow) { margin: 28px 0; color: rgba(255,255,255,.84); font-size: clamp(18px,2vw,24px); }

body[data-page="home"] .site-footer { margin-top: 0; background: #102b36; }
body[data-page="home"] .site-footer .footer-links h2 { color: #aeb8c1; }
body[data-page="home"] .site-footer .footer-fineprint { color: #a0aab3; }

@media (max-width: 1100px) {
    .hero-organic .hero-content { width: min(690px,calc(100% - 48px)); }
    .hero-metrics { grid-template-columns: 1fr; }
    .world-scene { min-height: 900px; }
    .world-scene-right .world-copy { grid-column: 1 / span 5; }
    .world-scene-left .world-copy { grid-column: 8 / span 5; }
    .world-scene-right .world-media { grid-column: 5 / -1; }
    .world-scene-left .world-media { grid-column: 1 / span 8; }
    .capability-path { grid-template-columns: repeat(2,1fr); gap: 65px 42px; }
    .capability-path::before { display: none; }
    .builder-flow { grid-template-columns: 1fr; }
    .builder-copy { max-width: 780px; }
    .builder-window { width: min(850px,100%); margin-inline: auto; }
}

@media (max-width: 820px) {
    body[data-page="home"] .site-nav { background: rgba(6,37,51,.98); }
    .hero-organic .hero-content { padding-bottom: 230px; }
    .hero-metrics { right: 24px; left: 24px; bottom: 80px; grid-template-columns: repeat(2,1fr); }
    .hero-threshold-link { display: none; }
    .sketch-story { display: block; }
    .sketch-stage { position: relative; top: auto; }
    .sketch-paper { max-width: 680px; margin-inline: auto; }
    .sketch-notes { padding: 35px 0 0; }
    .sketch-note { min-height: auto; padding: 50px 0 50px 48px; opacity: 1; transform: none; }
    .sketch-note::before { top: 67px; }
    .sketch-note::after { top: 81px; height: calc(100% - 14px); }
    .world-threshold { min-height: 720px; clip-path: ellipse(76% 54% at 50% 50%); }
    .world-scene { min-height: auto; display: flex; flex-direction: column; gap: 45px; padding: 115px 0; }
    .world-copy { width: min(680px,100%); align-self: flex-start; }
    .world-media { width: calc(100% + 16vw); align-self: center; transform: none; }
    .world-media picture,
    .world-media video,
    .world-visual { border-radius: 13% 4% 15% 6% / 7% 12% 8% 14% !important; }
    .world-visual > picture,
    .world-visual > video { border-radius: 0 !important; }
    .world-media figcaption { margin-inline: max(8vw,24px); }
    .journey-progress { top: 76px; margin-bottom: 30px; }
    .journey-progress a { font-size: 0; padding: 10px 12px; }
    .journey-progress a span { font-size: 9px; }
    .faq-flow { grid-template-columns: 1fr; }
    .faq-heading { position: relative; top: auto; }
}

@media (max-width: 620px) {
    .hero-organic { min-height: 800px; }
    .hero-organic .hero-media,
    .hero-organic noscript { object-position: center; opacity: .92; }
    .hero-organic .hero-vignette { background: linear-gradient(0deg,rgba(5,34,45,.93),rgba(6,41,51,.53) 62%,rgba(2,25,36,.22)); }
    .hero-organic .hero-content { width: calc(100% - 36px); margin-inline: 18px; padding: 130px 0 270px; }
    .hero-organic h1 { font-size: clamp(53px,16vw,76px); }
    .hero-organic .hero-lede { font-size: 16px; line-height: 1.52; }
    .hero-organic .hero-content .button { width: 100%; }
    .hero-motion-toggle { left: 18px; bottom: 23px; }
    .hero-metrics { left: 18px; right: 18px; bottom: 62px; gap: 7px; }
    .hero-metrics > div { min-width: 0; padding: 10px 13px; }
    .hero-metrics strong { font-size: 15px; }
    .hero-metrics span { font-size: 8px; }
    .hero-threshold { bottom: -52px; width: 130vw; }
    .flow-heading,
    .sketch-story,
    .journey-intro,
    .world-scene,
    .movement-intro,
    .capability-path { width: calc(100% - 36px); }
    .explain-flow { padding-block: 110px; }
    .flow-heading h2 { font-size: clamp(45px,13vw,66px); }
    .flow-heading > p:last-child { margin-left: 0; font-size: 17px; }
    .sketch-paper { padding: 8px; transform: rotate(-1deg); }
    .sketch-pin { width: 31px; height: 31px; border-width: 3px; font-size: 11px; }
    .sketch-stage figcaption { margin-inline: 0; }
    .sketch-note { padding-left: 40px; }
    .sketch-note h3 { font-size: 35px; }
    .flow-deeper { width: calc(100% - 36px); text-align: left; }
    .world-threshold { min-height: 92svh; clip-path: ellipse(91% 55% at 50% 50%); }
    .threshold-art img { object-position: center; }
    .threshold-copy { width: calc(100% - 36px); padding-top: 17vh; }
    .threshold-copy h2 { font-size: clamp(48px,13vw,68px); }
    .world-journey { padding-inline: 0; }
    .journey-intro { padding: 100px 0 50px; }
    .journey-intro h2 { font-size: clamp(44px,12.5vw,65px); }
    .journey-intro > p:last-child { margin-left: 0; font-size: 17px; }
    .journey-progress { top: calc(var(--header) + 10px); max-width: calc(100% - 20px); margin-bottom: 0; }
    .journey-progress a { padding: 7px 11px; }
    .world-scene { margin-inline: auto; padding: 92px 0; }
    .world-copy h3 { font-size: 53px; }
    .world-copy p { font-size: 16px; }
    .world-media { width: calc(100% + 36px); }
    .world-media img { height: 80vw; }
    .world-media figcaption { margin-inline: 18px; font-size: 9px; }
    .movement-river { padding-block: 120px; }
    .kinetic-type { top: 4%; font-size: 88px; }
    .movement-intro h2 { font-size: clamp(45px,12vw,62px); }
    .capability-path { grid-template-columns: 1fr; gap: 55px; margin-top: 85px; }
    .builder-flow { padding: 120px 18px; }
    .builder-copy h2 { font-size: 58px; }
    .builder-copy > p:not(.eyebrow):not(.builder-manifesto) { font-size: 16px; }
    .builder-copy .button { width: 100%; }
    .builder-window { padding: 8px; }
    .builder-window-label { top: 1%; right: 3%; }
    .voices-flow { padding: 115px 18px; }
    .voice { margin-top: 95px; }
    .voice-three { margin-left: 0; }
    .faq-flow { padding: 110px 18px; }
    .faq-heading h2 { font-size: 50px; }
    .closing-portal { min-height: 88svh; padding: 110px 18px; }
    .closing-copy h2 { font-size: clamp(51px,14vw,72px); }
    .closing-copy .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-organic .hero-media,
    .hero-organic .hero-content,
    .threshold-art img,
    .world-media,
    .world-halo,
    .kinetic-type,
    .closing-art img { transform: none !important; }
    .world-threshold { clip-path: ellipse(78% 77% at 50% 50%); }
    .sketch-note { opacity: 1; transform: none; }
    .hero-light { animation: none; }
}