:root { --header:86px; --header-occupied:calc(var(--header) + env(safe-area-inset-top) + 1px); }
.viewport-metrics {position:fixed;left:0;top:0;width:0;height:100vh;height:100svh;padding-bottom:env(safe-area-inset-bottom);visibility:hidden;pointer-events:none;z-index:-1;}
.site-header {position:fixed;inset:0 0 auto;z-index:50;background:var(--ink);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top);}
.header-inner {height:var(--header);padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));max-width:1600px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.wordmark {display:inline-flex;align-items:center;gap:12px;font-size:24px;font-weight:650;letter-spacing:-1px;min-height:44px;flex:none;}
.wordmark svg {width:28px;height:28px;flex:none;}
.nav-links {display:flex;align-items:center;gap:30px;font-size:.8125rem;}
.nav-links>a:not(.button) {color:#bdc1c9;min-height:44px;display:flex;align-items:center;}
.nav-links>a:hover {color:var(--paper)}
.button {display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:52px;padding:0 22px;font-size:.8125rem;font-weight:600;border:1px solid transparent;transition:background .2s,border-color .2s;}
.button span {font-size:20px;font-weight:400}
.primary {background:var(--accent);color:#fff}
.primary:hover {background:var(--accent-hover)}
.header-cta {border-color:#ffffff30;min-height:44px;padding:0 18px;gap:22px}
.header-cta:hover {background:#ffffff0b;border-color:#ffffff65}
.menu-button,.fallback-navigation {display:none}
.eyebrow,.object-label,.story-bottom,.skip-intro,.module-label,.index,.tag,.section-label {font-family:var(--mono);font-size:10px;letter-spacing:1.4px;font-weight:400}
.eyebrow {display:flex;align-items:center;gap:11px;color:#b4bccd}
.status-dot {width:5px;height:5px;flex:none;background:var(--accent);box-shadow:0 0 10px #4167f86b}
.text-link {font-size:.8125rem;display:inline-flex;align-items:center;gap:14px;min-height:44px;border-bottom:1px solid #ffffff25}
.text-link:hover {border-color:var(--accent)}
.actions {display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:26px}
.copy-mobile {display:none}
.story {position:relative;border-bottom:1px solid var(--line);padding-top:var(--header-occupied);overflow-anchor:none;}
.story-stage {position:relative;padding:70px var(--gutter) 85px;min-height:100svh;}
.hero-visual {position:absolute;width:53%;height:620px;top:100px;right:0;pointer-events:none;}
.desk-svg {display:block;width:100%;height:100%;overflow:visible;}
.chapters {position:relative;z-index:2;width:46%;max-width:640px;}
.chapter {margin:0 0 90px;min-width:0;}
.chapter:last-child {margin-bottom:0}
.chapter h1,.chapter h2 {font-size:clamp(3rem,5.55vw,5.4rem);line-height:1.07;margin:24px 0;overflow-wrap:anywhere;}
.chapter h1 em {color:var(--paper)}
.chapter-text {color:#a7afbd;max-width:390px;font-size:1rem;line-height:1.75}
.skip-intro {position:absolute;right:var(--gutter);top:12px;z-index:6;min-height:44px;display:flex;align-items:center;gap:16px;color:#b3bdcf;font-size:.6875rem;letter-spacing:.3px;}
.hero-blueprint {position:absolute;inset:0;overflow:clip;pointer-events:none;background-image:linear-gradient(#ffffff02 1px,transparent 1px),linear-gradient(90deg,#ffffff02 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(90deg,transparent,#000);}
.orbit {position:absolute;left:72%;top:48%;width:min(560px,50vw);aspect-ratio:1;border:1px solid #ffffff06;border-radius:50%;transform:translate(-50%,-50%)}
.orbit-two {width:min(750px,66vw)}
.cross {position:absolute;color:#566071;font:18px var(--mono);font-style:normal}
.cross-one {left:53%;top:23%}.cross-two {right:6%;bottom:25%}
.story-bottom {display:none}
.scroll-cue {display:flex;align-items:center;gap:12px}
.scroll-icon {display:inline-flex;width:25px;height:32px;border:1px solid #ffffff25;border-radius:15px;align-items:center;justify-content:center;font-size:14px;color:#c3cada}
.discipline-key {display:flex;gap:20px}
.discipline-key span {display:flex;align-items:center;gap:7px}
.discipline-key i {width:4px;height:4px}
.beat-number {color:#8490a5}.beat-number b {color:#e4e7ef;font-weight:400}
.has-whatsapp .story .story-bottom {right:calc(96px + env(safe-area-inset-right))}
.object-label {position:absolute;font-size:8px;letter-spacing:1.1px;color:#8190a7}
.label-top {top:15%;left:30%}.label-bottom {bottom:10%;right:20%}
.module-label {position:absolute;top:78%;left:40%;color:var(--tint);opacity:0;font-size:10px;white-space:nowrap}
.module-label.active {opacity:1}
.label-icon {display:inline-block;margin-right:9px;font-size:15px;vertical-align:middle}
.story-progress {position:absolute;bottom:0;left:0;width:100%;height:2px;background:#ffffff06}
.story-progress-fill {height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.story.is-animated {height:calc(var(--travel) + var(--stage-height));padding:0}
.is-animated .story-stage {position:sticky;top:0;height:var(--stage-height);min-height:0;padding:0 var(--gutter)}
.is-animated .skip-intro {top:var(--header-occupied)}
.is-animated .hero-visual {position:absolute;left:var(--focal-x,71%);top:48%;transform:translate(-50%,-50%);right:auto;width:58%;height:80%;max-height:760px}
.is-animated .chapters {position:absolute;left:var(--gutter);top:50%;transform:translateY(-45%);height:var(--copy-height)}
.is-animated .chapter {position:absolute;top:0;left:0;right:0;margin:0;visibility:hidden;opacity:0}
.is-animated .story-bottom {position:absolute;bottom:20px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1px;color:#a0acc1}
.is-drift .story-bottom {visibility:hidden}
.section {padding:110px var(--gutter);max-width:1600px;margin:auto}
.section h2 {font-size:clamp(2.4rem,4vw,3.9rem)}
@media (max-width: 900px), (max-width: 1180px) and (max-aspect-ratio: 1) {
 :root {--header:68px;--gutter:clamp(20px,4.5vw,40px)}
 .wordmark {font-size:21px;gap:9px}.wordmark svg {width:25px;height:25px}
 .header-inner {height:var(--header);min-height:var(--header);flex-wrap:nowrap}
 .nav-links {display:none;font-size:.875rem}
 .nav-links .header-cta {min-height:48px}
 .js-enhanced .header-inner {height:var(--header);flex-wrap:nowrap}
 .js-enhanced .menu-button {display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:92px;min-height:44px;background:none;border:0;color:var(--paper);font-size:.75rem;padding:0 4px}
 .js-enhanced .nav-links {display:none;position:absolute;left:0;right:0;top:100%;padding:16px var(--gutter) max(22px,env(safe-area-inset-bottom));max-height:calc(100dvh - var(--header-occupied));overflow-y:auto;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 16px 30px #0005;gap:0}
 .js-enhanced .nav-links.open {display:flex;flex-direction:column;align-items:stretch}
 .js-enhanced .nav-links>a {min-height:52px}.js-enhanced .nav-links .header-cta {margin-top:12px;background:var(--accent);border-color:transparent}
 .copy-desktop {display:none}.copy-mobile {display:inline}
 .story-stage {padding:44px var(--gutter) 70px;min-height:0}
 .hero-visual {position:relative;width:100%;height:clamp(190px,58vw,360px);inset:auto;max-width:700px;margin:0 auto 16px}
 .chapters {width:100%;max-width:700px;margin:auto}
 .chapter {margin-bottom:78px}
 .chapter h1,.chapter h2 {font-size:clamp(2.375rem,10.25vw,3.75rem);letter-spacing:-.05em;line-height:1.12;margin:18px 0 16px}
 .chapter-text {max-width:580px;font-size:.9375rem;line-height:1.65}
 .chapter .eyebrow {font-size:.5625rem;letter-spacing:.8px;line-height:1.65}
 .actions {gap:18px;margin-top:22px}.button {font-size:.8125rem;min-height:52px;padding:0 18px;gap:24px}.text-link {font-size:.8125rem;gap:10px}
 .skip-intro {font-size:.6875rem;top:0}
 .is-animated .hero-visual {left:var(--focal-x,50%);top:var(--visual-top);transform:translateX(-50%);width:calc(100% - 24px);height:var(--visual-height);max-height:none;margin:0;right:auto}
 .is-animated .chapters {left:var(--gutter);right:var(--gutter);top:var(--copy-top);width:auto;max-width:700px;height:var(--copy-height);transform:none;margin-inline:auto}
 .is-animated .story-bottom {bottom:max(12px,env(safe-area-inset-bottom));font-size:.5rem}
 .object-label,.module-label,.discipline-key {display:none}
 .orbit {left:50%;top:25%;width:min(330px,84vw)}.orbit-two {width:min(500px,100vw)}
 .cross-one {left:8%;top:25%}.cross-two {right:8%;bottom:55%}
 .section {padding:78px var(--gutter)}
 .section h2 {font-size:clamp(2.25rem,6.5vw,3rem)}
 .header-inner .wordmark {max-width:calc(100% - 100px)}
 .story:not(.is-animated) .hero-blueprint {mask-image:linear-gradient(#000,transparent 650px)}
}
@media (max-width: 600px) {
 .story-stage {padding-bottom:60px}
 .chapter h1,.chapter h2 {font-size:clamp(2.375rem,10.25vw,2.8rem)}
 .chapter .actions {gap:12px}.chapter .button {padding-inline:16px;gap:18px}
 .section h2 {font-size:clamp(2.25rem,10vw,2.8rem)}
}
@media(prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto}
 *,*::before,*::after {animation:none!important;transition:none!important}
 .scroll-cue {display:none}
}

.hero-poster {display:block;width:100%;height:100%;}
.hero-poster img {display:block;width:100%;height:100%;object-fit:contain;}
.hero-visual>.desk-svg {display:none}
.is-animated .hero-poster {display:none}
.is-animated .hero-visual>.desk-svg {display:block}
@media (max-width: 900px), (max-width: 1180px) and (max-aspect-ratio: 1) {
 .fallback-navigation {display:block;font-size:.875rem}
 .fallback-navigation summary {display:flex;align-items:center;min-height:44px;min-width:50px;cursor:pointer}
 .fallback-navigation nav {position:absolute;inset:100% 0 auto;background:var(--surface);padding:16px var(--gutter);display:grid;gap:8px;max-height:calc(100dvh - var(--header-occupied));overflow-y:auto}
 .fallback-navigation nav>a {display:flex;align-items:center;min-height:44px}
 .js-enhanced .fallback-navigation {display:none}
}
@media (max-height: 660px) {
 .story:not(.is-animated) .hero-visual {margin-bottom:0}
}

/* Reserve the eventual pinned layout before paint; a boot watchdog restores static flow. */
.motion-candidate .story {height:calc(7.5 * 100svh);padding:0}
.motion-candidate .story-stage {position:sticky;top:0;height:100svh;min-height:0;padding:0 var(--gutter)}
.motion-candidate .skip-intro {top:var(--header-occupied)}
.motion-candidate .hero-visual {position:absolute;left:71%;top:48%;transform:translate(-50%,-50%);right:auto;width:58%;height:80%;max-height:760px}
.motion-candidate .chapters,.is-animated .chapters {display:grid;height:auto}
.motion-candidate .chapters {position:absolute;left:var(--gutter);top:50%;transform:translateY(-45%)}
.motion-candidate .chapter,.is-animated .chapter {position:relative;grid-area:1 / 1;inset:auto;margin:0;visibility:hidden}
.motion-candidate .chapter:first-child {visibility:visible}
.motion-candidate .story-bottom {position:absolute;bottom:20px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;font-size:8px}
@media (max-width: 900px), (max-width: 1180px) and (max-aspect-ratio: 1) {
 .motion-candidate .story {height:calc(6.25 * 100svh)}
 .motion-candidate .story-stage,.is-animated .story-stage {display:grid;grid-template-rows:44px minmax(0,1fr) 20px max-content calc(64px + env(safe-area-inset-bottom));padding-top:var(--header-occupied)}
 .motion-candidate .hero-visual,.is-animated .hero-visual {position:relative;grid-row:2;left:auto;top:auto;transform:none;right:auto;width:100%;height:100%;max-height:none;min-height:0;max-width:700px;margin:0 auto}
 .motion-candidate .chapters,.is-animated .chapters {position:relative;grid-row:4;left:auto;right:auto;top:auto;transform:none;width:100%;max-width:700px;height:auto;margin:0 auto}
 .motion-candidate .story-bottom {bottom:max(12px,env(safe-area-inset-bottom));font-size:.5rem}
}