@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{font-family:Arial,Helvetica,sans-serif;color:#f6f6ef;background:#040a13;font-synthesis:none;color-scheme:dark;--gold:#e5b873;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}a{color:inherit}button{cursor:pointer}button:disabled{cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button[hidden],[hidden]{display:none!important}
#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}header{position:fixed;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:32px 4.5%;pointer-events:none}header a{pointer-events:auto}.brand{position:absolute;left:50%;transform:translateX(-50%);font-weight:700;font-size:21px;letter-spacing:5px;text-decoration:none;white-space:nowrap}.brand span{font-size:11px;letter-spacing:3px;display:block;text-align:center;margin-top:5px}.stage,.header-note{font:12px var(--mono);letter-spacing:1px;opacity:.6}.stage{text-transform:uppercase;max-width:140px}.header-note{margin-left:auto}
.skip{position:fixed;left:20px;top:-100px;z-index:100;padding:14px;background:#121a24}.skip:focus{top:15px}.hud{position:fixed;inset:140px 4.5% 80px;pointer-events:none;z-index:2;opacity:.45}.cross{position:absolute;width:17px;height:17px}.cross:before,.cross:after{content:'';position:absolute;background:#a7b4c5}.cross:before{height:1px;width:17px;top:8px}.cross:after{width:1px;height:17px;left:8px}.tl{top:0;left:0}.tr{top:0;right:0}.bl{bottom:0;left:0}.br{bottom:0;right:0}.side-label{position:absolute;right:-20px;top:35%;writing-mode:vertical-rl;font:12px var(--mono);letter-spacing:3px}.rail{position:absolute;right:0;top:50%;height:26%;width:1px;background:#ffffff25}.rail i{display:block;width:2px;height:0;background:var(--gold)}
#story-copy{position:fixed;z-index:3;left:14%;bottom:17%;max-width:760px;pointer-events:none;text-shadow:0 2px 30px #0007}#scene-label,.eyebrow{font:12px var(--mono);letter-spacing:2px;color:var(--gold);margin:0 0 18px}h1{font-family:'Barlow Condensed',Impact,Arial,sans-serif;font-size:clamp(44px,5.7vw,92px);font-weight:800;line-height:.91;letter-spacing:-1.5px;margin:0 0 20px;white-space:pre-line}#scene-body{font:14px/1.75 var(--mono);max-width:550px;margin:0;letter-spacing:.1px}#explore{position:fixed;right:5%;bottom:26%;z-index:3;font:12px var(--mono);letter-spacing:1.5px;pointer-events:none}#explore span{margin-left:16px}#scroll-space{height:2300vh;pointer-events:none}
#loading{position:fixed;inset:0;background:#040912;z-index:50;display:flex;justify-content:center;align-items:center;flex-direction:column;transition:opacity .6s}.loader-mark{font-size:25px;letter-spacing:6px}.loader-mark span{font-size:13px}.loader-ring{width:90px;height:90px;margin:40px;border:1px solid #a5b6d525;border-top-color:#e4bf86;border-radius:50%;animation:orbit 3s linear infinite}#load-progress{font:14px var(--mono)}#load-error{max-width:420px;text-align:center;font:14px/1.6 var(--mono)}#retry{padding:12px 25px;background:transparent;border:1px solid var(--gold);color:white}@keyframes orbit{to{transform:rotate(360deg)}}
#application{position:fixed;z-index:7;width:min(1120px,88%);left:50%;top:50%;transform:translate(-50%,-46%);display:grid;grid-template-columns:1fr 1.1fr;gap:8%;opacity:0;pointer-events:none;max-height:82dvh;overflow:auto;overscroll-behavior:contain;padding:32px;background:linear-gradient(110deg,#080604da,#080604a0);border:1px solid #dfbb7829;backdrop-filter:blur(8px)}#application.active{pointer-events:auto}h2{font-family:'Barlow Condensed',Impact,Arial,sans-serif;font-size:clamp(40px,4.6vw,68px);line-height:.97;letter-spacing:-1px;white-space:pre-line;margin:15px 0 24px}.form-intro{padding:20px 0}.form-intro>p:last-child{font-size:16px;line-height:1.6;color:#d8d1c4}#fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{font-size:14px;display:block;line-height:1.4;color:#dfd8cd}.field:nth-child(n+3){grid-column:1/-1}input,textarea{color:#fcf9ef;background:#1e180d66;border:1px solid #bba16b50;width:100%;padding:12px;margin-top:8px;border-radius:0;font-size:16px;line-height:1.3}textarea{resize:vertical;min-height:76px}label small{font:12px/1.5 var(--mono);display:block;color:#bbb2a3;margin-top:5px}#submit{margin-top:23px;width:100%;background:#e8c28b;color:#1a1208;border:0;padding:17px;font:500 14px var(--mono);letter-spacing:1px}#form-status{font-size:14px;line-height:1.5;min-height:20px;color:#edcf99}.field-help{font:12px/1.5 var(--mono);color:#b8b0a3;margin:7px 0 0}
#review{position:fixed;z-index:20;bottom:12px;left:50%;transform:translateX(-50%);width:min(960px,96%);background:#07101aeF;border:1px solid #7e8e9b55;padding:12px 16px;font:12px var(--mono)}#review label{font:12px var(--mono);display:inline}#review input{width:45%;padding:0;margin:0 15px;vertical-align:middle}#review output{font-size:12px}#milestones{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}#milestones button{border:1px solid #596576;background:transparent;color:#ccd6df;padding:5px 8px;font:12px var(--mono)}#review a{position:absolute;right:16px;top:12px;font-size:11px}
@media(max-width:700px){header{padding:22px 6%}.stage{font-size:10px;max-width:80px}.header-note{display:none}.brand{font-size:18px}.hud{inset:110px 6% 100px}#story-copy{left:8%;right:8%;bottom:15%;max-width:none}h1{font-size:clamp(40px,10.5vw,64px);letter-spacing:-.8px}#scene-body{font-size:13px;line-height:1.6;max-width:360px}#scene-label{font-size:10px;letter-spacing:1.4px}#explore{left:8%;bottom:6%;font-size:10px;right:auto}#application{width:94%;max-height:80dvh;grid-template-columns:1fr;gap:12px;padding:23px;top:54%;}.form-intro{padding:0}.form-intro>p:last-child{font-size:15px;margin-bottom:10px}h2{font-size:41px;margin:8px 0 15px}#fields{gap:14px;grid-template-columns:1fr}.field{grid-column:1!important}#review{font-size:10px}#review a{display:none}#review input{width:45%;margin:0 5px}#review output{font-size:10px}#milestones button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.loader-ring{animation:none}#loading{transition:none}}
#story-copy:before{content:'';position:absolute;inset:-70px -50px -55px -65px;z-index:-1;background:radial-gradient(ellipse at 30% 70%,#03060a80,transparent 72%);pointer-events:none}
body.reviewing #application{max-height:70dvh;top:44%}
@media(max-width:700px){body.reviewing #explore{display:none}}

#city-frame{position:fixed;inset:19% 12% 17%;z-index:2;pointer-events:none;opacity:0}#city-frame svg{width:100%;height:100%;overflow:visible;fill:none;stroke:#f4f1df;stroke-width:1;opacity:.65}#city-frame .frame-bars{stroke-width:4}.frame-code,.frame-coordinates{position:absolute;font:11px/1.6 var(--mono);letter-spacing:2px;color:#efe9d7}.frame-code{top:-24px;right:0}.frame-coordinates{bottom:-42px;right:0;text-align:right}


#story-copy:before{display:none}#story-copy{text-shadow:0 2px 18px #000a,0 1px 3px #0007}

#cinematic-stage{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#040912}#cinematic-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}#world{z-index:1}#film-loading{position:fixed;z-index:6;bottom:22px;left:50%;transform:translateX(-50%);padding:8px 14px;background:#040912c9;color:#ddd;font:12px var(--mono);pointer-events:none}#cinematic-stage video{transition:none}
/* Keep the cinematic background full-height, including narrow browser windows. */
@media(max-aspect-ratio:1/1){
 #cinematic-stage video{height:100%;object-fit:cover;object-position:var(--film-focus,58%) 50%}
 #cinematic-stage:after{display:none}
 header{padding: max(24px,env(safe-area-inset-top)) 24px;align-items:flex-start}
 .brand{font-size:19px;letter-spacing:5px}.brand span{font-size:10px}
 .stage{font-size:9px;letter-spacing:1.3px;max-width:70px;margin-top:3px}
 .hud{inset:105px 24px 80px}.hud .cross,.side-label{display:none}.rail{top:auto;bottom:0;height:72px;right:0}
 #story-copy{left:26px;right:30px;top:auto;bottom:max(100px,12svh);max-width:520px}
 #story-copy h1{font-size:clamp(36px,9.5vw,52px);letter-spacing:-.8px;line-height:.94;margin-bottom:18px;text-wrap:balance}
 #scene-body{position:static;max-width:35ch;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55;color:#c9d1dc;letter-spacing:.1px}
 #scene-label{font-size:10px;letter-spacing:2px;margin-bottom:13px}
 #explore{left:26px;bottom:max(34px,env(safe-area-inset-bottom));font-size:9px;letter-spacing:1.5px}
 #city-frame,body[data-stage="3"] #city-frame{inset:17% 7% 38%}.frame-code,.frame-coordinates{font-size:9px;letter-spacing:1px}
 #application{top:52%;width:calc(100% - 32px);max-height:78dvh;padding:24px 20px;border-radius:4px;background:#100d09ed}
 #film-loading{bottom:12px;font-size:10px;white-space:nowrap;max-width:95%}
}
@media(max-width:380px) and (max-aspect-ratio:1/1){#story-copy{left:22px;right:24px}#scene-body{font-size:14px}}

#cinematic-stage{background-size:cover;background-position:center;background-repeat:no-repeat}
@media(max-aspect-ratio:1/1){#cinematic-stage{background-size:cover;background-position:var(--film-focus,58%) center}}

/* Editorial positions follow the active text, never the nearest navigation marker. */
body[data-copy="module"] #story-copy{left:21%;bottom:15%;max-width:420px}
body[data-copy="module"] #scene-title{font-size:clamp(42px,4vw,64px)}
body[data-copy="city"] #story-copy{left:12%;right:12%;top:11%;bottom:20%;max-width:none}
body[data-copy="city"] #scene-title{font-size:clamp(32px,3.4vw,52px)}
body[data-copy="city"] #scene-body{position:absolute;right:0;bottom:0;max-width:340px;font-size:13px}
#scene-body{color:#fff;text-shadow:0 1px 3px #000,0 2px 8px #000,0 0 18px #0008}
#scene-label{text-shadow:0 1px 3px #000,0 1px 8px #000}
@media(max-aspect-ratio:1/1){
 #story-copy{left:8%;right:8%;bottom:16%;max-width:none}
 #scene-title{font-size:clamp(36px,9.5vw,52px);line-height:.96}
 body[data-copy="module"] #story-copy{left:8%;right:8%;bottom:14%;max-width:none}
 body[data-copy="module"] #scene-title{font-size:clamp(36px,8vw,48px)}
 body[data-copy="city"] #story-copy{left:8%;right:8%;top:14%;bottom:18%;max-width:none}
 body[data-copy="city"] #scene-title{font-size:clamp(32px,8vw,44px)}
 body[data-copy="city"] #scene-body{position:absolute;right:0;bottom:0;max-width:280px;font-size:13px}
 #scene-body{font:13px/1.6 var(--mono)}
 #city-frame{inset:29% 7% 32%}
}

header{text-shadow:0 1px 4px #000b,0 2px 12px #0006}
@media(max-width:699px){
 header{opacity:0;visibility:hidden;filter:blur(10px);transition:opacity .7s ease,filter .7s ease}
 header[data-visible="true"]{opacity:1;visibility:visible;filter:blur(0)}
 header:not([data-visible="true"]){transition:none}
}
@media(max-width:699px) and (prefers-reduced-motion:reduce){header{transition:none;filter:none}}
#scene-intro{font:16px/1.5 var(--mono);max-width:550px;margin:0 0 18px;color:#fff;text-shadow:0 1px 3px #000,0 2px 8px #000}
@media(max-aspect-ratio:1/1){#scene-intro{font-size:14px;line-height:1.5;margin-bottom:14px}}

/* Scale the fixed logo with the journey without changing header layout. */
.brand{top:18px;font-size:32px;line-height:1;letter-spacing:6px;transform-origin:50% 0;transform:translateX(-50%) scale(var(--brand-scale,1.1));will-change:transform}
.brand span{font-size:13px;line-height:1;letter-spacing:3.8px;margin-top:7px}
.header-note{font-size:16px;letter-spacing:1.5px;opacity:.85}
.stage{opacity:.78;line-height:1.45}
#journey-counter{position:fixed;right:4.5%;bottom:max(24px,env(safe-area-inset-bottom));z-index:4;pointer-events:none;text-align:right;font:10px/1.5 var(--mono);letter-spacing:1.3px;color:#f6f6ef;text-shadow:0 1px 5px #000}
#journey-counter span{display:block;opacity:.55;font-size:8px}#journey-counter strong{font-weight:400;font-variant-numeric:tabular-nums}#journey-counter i{display:block;margin:6px 0 0 auto;height:1px;width:64px;background:linear-gradient(to right,#e5b873 calc(var(--progress,0)*100%),#ffffff30 0)}
body[data-copy="hero"][data-hero-sand="true"] #scene-label,body[data-copy="hero"][data-hero-sand="true"] #scene-title{opacity:0}
@media(max-aspect-ratio:1/1){
 .brand{top:max(24px,env(safe-area-inset-top));font-size:26px}
 .brand span{font-size:11px;margin-top:6px}
 .header-note{display:block;font-size:clamp(9px,2.6vw,12px);line-height:1.35;max-width:60px;text-align:right;letter-spacing:.8px}
 .stage{max-width:clamp(62px,17vw,110px)}#journey-counter{right:24px;bottom:max(28px,env(safe-area-inset-bottom))}
}

/* A soft edge treatment focuses the city scene without hiding the center. */
#city-vignette{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;will-change:opacity;background:radial-gradient(ellipse at 58% 44%,transparent 20%,rgba(2,5,9,.1) 43%,rgba(2,5,9,.58) 76%,rgba(2,5,9,.88) 100%)}
body[data-copy="city"] #scene-label{font-family:'Barlow Condensed',Impact,Arial,sans-serif;font-size:clamp(26px,2.8vw,44px);font-weight:800;line-height:1.05;letter-spacing:.6px;color:#edcf9c;margin-bottom:16px;text-wrap:balance}
body[data-copy="city"] #scene-title{font-size:clamp(40px,4.6vw,68px);line-height:.94}
body[data-copy="city"] #scene-label,body[data-copy="city"] #scene-title{position:relative;top:calc(-1 * clamp(12px,2svh,20px))}
body[data-copy="city"] #scene-body{font-size:15px;line-height:1.65;max-width:370px}
@media(max-aspect-ratio:1/1){
 body[data-copy="city"] #scene-label{font-size:clamp(24px,6.5vw,32px);max-width:25ch;letter-spacing:.4px;margin-bottom:16px}
 body[data-copy="city"] #scene-title{font-size:clamp(36px,9vw,48px);line-height:.96}
body[data-copy="city"] #scene-body{font-size:14px;line-height:1.65;max-width:280px}
}

/* Keep the frame anchored to the city typography at every viewport size. */
body #city-frame[data-calibrated="true"]{inset:var(--city-top,19%) var(--city-right,12%) var(--city-bottom,17%) var(--city-left,12%);transform:translateY(var(--city-copy-shift,0px))}
#city-frame[data-calibrated="true"] .frame-coordinates{bottom:12px;right:12px}
body[data-copy="city"] #scene-label,body[data-copy="city"] #scene-title{text-shadow:0 1px 2px #000a,0 2px 8px #0006}
body[data-copy="city"] #scene-body{text-shadow:0 1px 2px #000b,0 2px 7px #0008}
@media(max-aspect-ratio:1/1){#city-frame[data-calibrated="true"] .frame-code{top:var(--city-code-top,140px);right:12px}}

/* Give the office message a compact, lower placement of its own. */
body[data-copy="office"] #story-copy{top:auto;bottom:14%;max-width:650px}
body[data-copy="office"] #scene-title{font-size:clamp(44px,4.4vw,68px);line-height:.98;margin-bottom:18px}
body[data-copy="office"] #scene-body{max-width:44ch}
@media(max-aspect-ratio:1/1){
 body[data-copy="office"] #story-copy{left:8%;right:8%;bottom:max(72px,14svh);max-width:none}
 body[data-copy="office"] #scene-title{font-size:clamp(34px,8.8vw,46px);line-height:.98;letter-spacing:-.6px;margin-bottom:16px}
 body[data-copy="office"] #scene-label{margin-bottom:14px}
 body[data-copy="office"] #scene-body{font-size:14px;line-height:1.6;max-width:36ch}
}

/* Preserve the two short lines in the module message. */
body[data-copy="module"] #scene-body{white-space:pre-line}

/* The opening has embedded lettering: keep the complete desktop composition. */
#cinematic-stage[data-segment="orbit"]{background-size:contain;background-position:center}
#cinematic-stage video[data-segment="orbit"]{object-fit:contain;object-position:center;transform:scale(var(--opening-zoom,1));transform-origin:center}

/* The dedicated vertical hero stays complete while its lettering is visible. */
@media(max-width:699px) and (max-aspect-ratio:1/1){
 #cinematic-stage[data-segment="orbit"][data-orientation="portrait"]{background-color:#020a17;background-size:contain;background-position:var(--film-focus,52.5%) center}
 #cinematic-stage[data-segment="orbit"][data-orientation="portrait"][data-mode="video"]{background-image:none!important}
 #cinematic-stage[data-segment="orbit"][data-orientation="portrait"][data-mode="video"]:before,#cinematic-stage[data-segment="orbit"][data-orientation="portrait"][data-mode="video"]:after{content:'';display:block;position:absolute;inset:0;background-size:cover;background-position:var(--film-focus,52.5%) center}
 #cinematic-stage[data-segment="orbit"][data-orientation="portrait"][data-mode="video"]:before{background-image:url('/assets/cinematic/mobile-hero-h3/posters/000.jpg');filter:blur(18px) brightness(.8)}
 #cinematic-stage[data-segment="orbit"][data-orientation="portrait"][data-mode="video"]:after{background-image:url('/assets/cinematic/mobile-hero-h3/next-exact.jpg');opacity:var(--opening-edge-opacity,0)}
 #cinematic-stage video[data-segment="orbit"][data-orientation="portrait"]{z-index:1;object-fit:contain;object-position:var(--film-focus,52.5%) center;transform:scale(var(--mobile-opening-zoom,1));transform-origin:var(--film-focus,52.5%) center;mask-image:linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent)}
}

/* Short, distinct reading blocks accompany each shot. */
#scene-body,body[data-copy="city"] #scene-body,body[data-copy="office"] #scene-body{font:16px/1.45 var(--mono);max-width:48ch}
#scene-body p{margin:0 0 10px}#scene-body p:last-child{margin-bottom:0}
body[data-copy="city"] #scene-body{max-width:36ch}
#scene-label{font-size:14px}

/* One question per screen, with answers retained when going back. */
#application{gap:6%;grid-template-columns:.85fr 1.15fr}
#apply-form{min-width:0}#fields{display:block}
.form-progress{display:flex;align-items:center;gap:18px;margin:0 0 24px;font:12px var(--mono);color:#d1c4ae}
.form-progress span{white-space:nowrap}.form-progress progress{height:3px;width:100%;border:0;background:#ffffff20;accent-color:var(--gold)}
.form-progress progress::-webkit-progress-bar{background:#ffffff20}.form-progress progress::-webkit-progress-value{background:var(--gold)}
#question-title{font:700 clamp(28px,2.8vw,38px)/1.08 'Barlow Condensed',Arial,sans-serif;margin:0 0 18px;color:#fff7e8}
#question-title:focus{outline:none}
#question-help{font-size:16px;line-height:1.45;color:#cfc5b5;margin:0 0 18px}
.choices{padding:0;border:0;margin:0;display:grid;gap:9px;min-width:0}
.choice{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:48px;border:1px solid #cfb4854d;background:#d0b0740b;font:16px/1.4 Arial,Helvetica,sans-serif;cursor:pointer;color:#f0eade;transition:background .15s,border-color .15s}
.choice:hover{border-color:#e5b873a0;background:#e5b87315}
.choice:has(input:checked){border-color:var(--gold);background:#e5b87325;color:#fff5df}
.choice:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px}
.choice input{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0}
.choice-key{display:grid;place-items:center;flex:0 0 25px;height:25px;font:12px var(--mono);border:1px solid #d9bc814d;color:#d9bc81}
.choice:has(input:checked) .choice-key{background:var(--gold);color:#160f06}
#fields .field{margin-bottom:16px}#fields .field:last-child{margin-bottom:0}
#fields label:not(.choice){font-size:16px}
#fields [data-other]{margin-top:16px}
#question-error{font-size:14px;line-height:1.4;color:#ffc7ae;margin:14px 0 0}#question-error:empty{display:none}
.form-actions{display:flex;align-items:center;gap:12px;margin-top:22px}
#previous{padding:13px 16px;min-height:46px;background:transparent;color:#e7dac7;border:1px solid #dfbb7855;font-size:14px}
#previous:disabled{opacity:.3;cursor:default}
#submit{margin:0;width:auto;flex:1;min-height:46px;padding:14px;font:500 14px var(--mono);letter-spacing:.5px}
#form-status{font-size:14px;margin:18px 0 0;line-height:1.45}
@media(max-width:700px){
 #application{grid-template-columns:1fr;gap:22px;top:52%;padding:22px 20px;max-height:82dvh}
 .form-intro h2{font-size:32px;margin:8px 0 12px}.form-intro .eyebrow{font-size:12px;margin-bottom:10px}
 .form-intro>p:last-child{font-size:16px;line-height:1.4;margin:0}
 #application:not([data-question="1"]) .form-intro{display:none}
 #application:not([data-question="1"]){gap:0}
 .form-progress{margin-bottom:16px;gap:14px}#question-title{font-size:28px}
 .choice{padding:10px 12px}.choices{gap:8px}.form-actions{margin-top:18px}
 #fields input,#fields textarea{font-size:16px;padding:12px}#fields textarea{min-height:100px}
}
@media(max-aspect-ratio:1/1){
 #scene-body,body[data-copy="city"] #scene-body,body[data-copy="office"] #scene-body{font:16px/1.45 var(--mono);max-width:36ch}
 #scene-body p{margin-bottom:9px}
 #scene-label,body[data-copy="office"] #scene-label{font-size:14px;letter-spacing:1.2px;margin-bottom:12px}
 body[data-copy="city"] #scene-label{font-size:clamp(24px,6.5vw,32px);letter-spacing:.4px}
 body[data-copy="city"] #scene-body{max-width:30ch}
}
@media(max-height:600px) and (min-aspect-ratio:1/1){
 #story-copy,body[data-copy="office"] #story-copy{bottom:10%}
 #story-copy h1,body[data-copy="office"] #scene-title{font-size:44px}
 #scene-body{max-width:55ch;line-height:1.3}#scene-body p{margin-bottom:5px}
 #application{max-height:86dvh;padding:20px}
}