:root{color-scheme:dark;--ink:#151718;--paper:#fcf7e7;--accent:#b9583d;--p:0}*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:90px}body{margin:0;font-family:Arimo,Arial,Helvetica,sans-serif;background:var(--paper);color:var(--ink)}a{color:inherit}button,input{font:inherit}button,a,input,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #c26143;outline-offset:5px}header{position:absolute;z-index:5;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:30px 5%;color:var(--paper);gap:20px}.brand{text-decoration:none;font-size:25px;letter-spacing:-1.5px;font-weight:900}.brand span{font-size:11px;vertical-align:top;letter-spacing:0}.study{font-size:10px;letter-spacing:.16em}button{border:1px solid #ffffff50;border-radius:30px;background:#11171988;color:inherit;padding:10px 15px;font-size:11px;cursor:pointer}.journey{height:430svh;position:relative;background:#090b0f}.stage{position:sticky;top:0;height:100svh;overflow:hidden;color:var(--paper)}.visual,.visual video,.visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:76% top}.visual img{display:block}.visual video{display:block}.hero,.arrival{position:absolute;z-index:1;left:8%;top:25%;width:49%;pointer-events:none}.hero a{pointer-events:auto}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;line-height:1.8}h1,h2{font-size:clamp(54px,7.5vw,122px);line-height:.94;letter-spacing:-.065em;margin:28px 0;font-weight:900}.claim{font-size:clamp(16px,1.5vw,21px);line-height:1.5;max-width:350px}.cta{margin-top:25px;text-decoration:none;background:var(--paper);color:var(--ink);border-radius:40px;display:inline-flex;padding:16px 22px;gap:35px;font-size:14px;font-weight:700}.hero small{display:block;opacity:.5;font-size:10px;margin-top:17px}.arrival{top:40%;color:var(--ink);opacity:0}.scrollhint{position:absolute;left:8%;bottom:7%;font-size:10px;letter-spacing:.18em;display:flex;gap:40px}.reading{padding:100px 8% 130px;min-height:100svh;background:var(--paper);position:relative;z-index:2;color-scheme:light}.reading-head{max-width:800px}.reading h2{font-size:clamp(60px,7vw,100px);margin-top:20px}.draft{font-size:12px;line-height:1.6;opacity:.6;max-width:360px}.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:5%;margin-top:90px}.pillars article{border-top:1px solid #18191a55;padding-top:22px}.pillars span{font-size:10px;letter-spacing:.12em}.pillars h3{font-size:clamp(28px,3vw,43px);line-height:1.05;letter-spacing:-.04em;margin:35px 0 20px}.pillars p{font-size:16px;line-height:1.7;max-width:300px}.back{display:inline-block;margin-top:90px;font-size:13px}.testpanel{position:fixed;z-index:10;bottom:18px;right:18px;border:1px solid #ffffff2b;border-radius:12px;background:#182021f5;color:#f7f3e6;width:300px;font-size:11px;box-shadow:0 10px 35px #0003}.testpanel summary{padding:13px 16px;cursor:pointer}.testpanel output{float:right}.testpanel p,.testpanel label,.metrics{display:block;margin:12px 16px;line-height:1.6}.testpanel input[type=range]{width:calc(100% - 32px);margin:0 16px;accent-color:#d18362}.metrics{display:flex;justify-content:space-between;gap:10px;font-size:10px}.skip{position:fixed;top:-100px;left:20px;z-index:20;background:var(--paper);padding:15px;color:var(--ink)}.skip:focus{top:10px}.reduced .journey{height:160svh}.reduced .hero{opacity:1!important;transform:none!important}.reduced .arrival{display:none}.reduced .scrollhint{display:none}@media(max-width:700px){header{padding:22px 6%}.brand{font-size:22px}.study{display:none}.journey{height:370svh}.visual video,.visual img{object-fit:contain;object-position:center 88%;background:#090b0f}.hero{left:7%;top:16%;width:86%}h1{font-size:clamp(48px,12vw,78px);max-width:95%;margin:22px 0}.claim{max-width:260px;font-size:15px}.cta{padding:13px 20px;margin-top:10px}.hero small{margin-top:10px}.arrival{left:7%;top:20%;width:85%;color:var(--paper)}.arrival h2{font-size:66px}.scrollhint{left:7%;bottom:4%}.reading{padding:70px 7% 150px}.pillars{grid-template-columns:1fr;margin-top:55px;gap:35px}.pillars h3{margin:22px 0 15px}.pillars p{max-width:100%}.testpanel{width:270px;bottom:10px;right:10px}.reduced .journey{height:120svh}}

/* Figma D01/M01: native layout spacing, 225/900 top and 26 px gaps. */
@font-face{font-family:Arimo;src:url('assets/arimo-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Arimo;src:url('assets/arimo-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
header{height:40px;box-sizing:content-box;width:auto;right:0;padding:30px 5%;align-items:center}
.brand{display:block;flex-shrink:0;line-height:0}.brand img{display:block;max-width:none}
header button{border:0;background:none;border-radius:0;padding:0;color:var(--paper)}
#reduce{font-size:12px;line-height:19px;white-space:nowrap}
#main-nav{display:flex;align-items:center;gap:28px}
#main-nav a,#main-nav button{font-size:14px;line-height:20px;font-weight:700;color:var(--paper);text-decoration:none;white-space:nowrap}
#main-nav a:hover{text-decoration:underline;text-underline-offset:6px}
#main-nav button:disabled{cursor:default;opacity:.65}
.menu-toggle,.nav-note{display:none}
.hero{display:flex;flex-direction:column;align-items:flex-start;gap:26px;top:25svh}
.hero .eyebrow{margin:0;font-size:11px;line-height:20px;letter-spacing:1.7px}
.hero h1{margin:0;font-size:clamp(54px,7.5vw,108px);line-height:.944444;letter-spacing:-.055556em;font-weight:700}
.hero .claim{margin:0;font-size:20px;line-height:30px;width:350px;max-width:100%}
.hero .cta{margin:0;padding:6px 22px;min-height:32px;line-height:20px;gap:0;white-space:nowrap}
.hero .mobile-status{display:none;margin:0}
.pillars{margin-top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:900px){
header{padding:22px 6%;gap:12px}
.menu-toggle{display:block;font-weight:700;font-size:14px;line-height:20px}
#main-nav{display:none;position:absolute;top:80px;left:6%;right:6%;padding:24px;border-radius:12px;background:#0e1112fa;align-items:flex-start;flex-direction:column;gap:20px;box-shadow:0 18px 35px #0004}
header.menu-open #main-nav{display:flex}
#main-nav a,#main-nav button{font-size:14px;line-height:20px}
.nav-note{display:block;font-size:11px;line-height:18px;opacity:.55;margin:0}
}
@media(max-width:700px){
.hero{top:16svh;gap:20px;left:7%;width:86%}
.hero h1{font-size:48px;line-height:46px;letter-spacing:-2.8px}
.hero .claim{font-size:16px;line-height:26px;width:280px}
.hero .cta{padding:6px 22px;margin:0}
.hero .mobile-status{display:block;font-size:12px;line-height:19px;color:#767468;opacity:1}
#reduce{font-size:12px}
}
@media(max-width:359px){header{flex-wrap:wrap;height:auto}.brand{margin-right:auto}#reduce{font-size:11px}.hero h1{font-size:42px;line-height:42px}}

/* Mobile launch: crop the wide clip into a larger, bottom-aligned scene. */
@media(max-width:700px){
.visual{background:#090b0f}
.visual::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 12% 12%,#fcf7e7a0 0 1px,transparent 1.7px),radial-gradient(circle at 68% 8%,#fcf7e770 0 .7px,transparent 1.5px),radial-gradient(circle at 89% 23%,#fcf7e7c0 0 1px,transparent 2px),radial-gradient(circle at 35% 34%,#fcf7e775 0 .8px,transparent 1.5px),radial-gradient(circle at 8% 46%,#fcf7e760 0 .7px,transparent 1.4px),radial-gradient(circle at 72% 42%,#fcf7e795 0 .9px,transparent 1.6px),radial-gradient(circle at 48% 19%,#fcf7e755 0 .7px,transparent 1.4px)}
.visual video,.visual img{inset:auto 0 0;width:100%;height:56svh;object-fit:cover;object-position:76% bottom;background:transparent;mask-image:linear-gradient(to bottom,transparent,#000 7%,#000)}
.visual::after{content:'';position:absolute;bottom:0;left:0;right:0;height:18svh;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--paper) 92%);opacity:var(--mobile-ground,0)}
.arrival{top:18%}
}

.video-enable{position:absolute;z-index:3;left:8%;bottom:10%;background:var(--paper);color:var(--ink);border:0;font-size:14px;padding:12px 20px}.video-enable[hidden]{display:none}

/* Interactive controls: stable targets, visible hover/focus/press feedback. */
button,.cta{transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s}button:disabled{cursor:not-allowed;opacity:.45}button:active:not(:disabled){box-shadow:inset 0 2px 6px #0004}.cta:active{background:#d8c09a;color:#151718}
#main-nav button:focus-visible{text-decoration:underline;text-underline-offset:6px}#main-nav button:active{color:#e8b885}
@media(hover:hover){button:not(:disabled):not(.room-hotspot):not([data-room]):not(#room-close):not(#menu-toggle):hover{background:#b9583d;color:#fcf7e7;border-color:#d88a6b}.cta:hover{background:#e8b885;color:#151718}#main-nav button:hover{color:#e8b885}#menu-toggle:hover{background:#fcf7e71a}}
@media(prefers-reduced-motion:reduce){button,.cta{transition:none}}.reduced button,.reduced .cta{transition:none}

/* Fill the visible viewport when mobile browser chrome expands or collapses.
   Scroll sections retain svh so their length stays stable during the gesture. */
.stage{height:100vh;height:100dvh}
.testpanel{display:none}.debug .testpanel{display:block}

.experience-page{background:#080f12}
/* Short landscape screens need a compact hero so the claim and CTA stay reachable. */
@media(max-height:500px) and (orientation:landscape){
header{height:32px;padding:12px 5%}
.hero{top:64px;gap:8px;width:55%}
.hero .eyebrow{font-size:10px;line-height:16px}
.hero h1{font-size:34px;line-height:34px;letter-spacing:-1.8px}
.hero .claim{font-size:13px;line-height:18px;max-width:340px}
.hero .cta{padding:4px 16px;min-height:28px;font-size:12px}
.scrollhint{display:none}
.arrival h2{font-size:42px}
#main-nav{top:58px;padding:16px;gap:12px;max-height:calc(100dvh - 80px);overflow:auto}
}