:root{--blue:#0b4dff;--ink:#15171b;--muted:#646971}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:5px}header{position:absolute;inset:0 0 auto;z-index:5;height:92px;padding:0 4.5vw;display:flex;align-items:center;justify-content:space-between;background:white}.brand{font-size:29px;letter-spacing:-1.5px;display:flex;gap:11px;align-items:center}.mark{color:var(--blue);font-weight:800;font-size:34px}.header-note,.eyebrow,.bottom-meta,footer{font-family:monospace;font-size:12px;letter-spacing:2px}.header-note{color:var(--muted);letter-spacing:1.8px}.contact{font-size:14px;border:1px solid #dadce0;border-radius:30px;padding:12px 20px}.contact span{padding-left:20px}#journey{height:680vh;height:680svh}.sticky{height:100vh;height:100svh;position:sticky;top:0;overflow:hidden;min-height:640px}.heading{position:absolute;top:125px;left:4.5vw;z-index:2;pointer-events:none}.eyebrow{color:var(--muted);line-height:1.6;margin:0 0 18px}h1{font-weight:400;font-size:clamp(42px,5.6vw,88px);letter-spacing:-.055em;line-height:1.01;margin:0}h1 span,.ending h2 span{color:var(--blue)}.intro{font-size:16px;color:var(--muted);margin:18px 0 0}.scene{position:absolute;inset:30% 0 160px;overflow:hidden}.scene img{position:absolute;top:50%;left:0;transform-origin:0 50%;max-width:none;will-change:transform}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#fff 0%,transparent 3%,transparent 97%,#fff 100%)}.caption{position:absolute;bottom:150px;left:4.5vw;max-width:590px;z-index:3;background:rgba(255,255,255,.86);padding:14px 25px 12px 0}.caption .eyebrow{color:var(--blue);margin-bottom:10px}.caption h2{font-size:clamp(24px,2.6vw,39px);letter-spacing:-1.4px;line-height:1.1;font-weight:400;margin:0 0 10px}.caption>p:last-of-type{font-size:16px;line-height:1.5;color:var(--muted);margin:0;max-width:510px}.bottom{position:absolute;bottom:26px;left:4.5vw;right:4.5vw;z-index:4}.bottom-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;letter-spacing:1.4px;margin-bottom:23px}.bottom-meta button{background:none;border:0;color:var(--muted);font-size:12px}nav{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}nav button{text-align:left;border:0;background:none;padding:0 0 15px;font-size:15px;color:#6a6d74;white-space:nowrap}nav button span{font:12px monospace;margin-right:12px;color:#858992}nav button.active,nav button.active span{color:var(--blue)}.track{height:2px;background:#e9ebee}#progress{height:100%;background:var(--blue);width:0;transition:width .1s}#terminal{display:none;font-family:monospace;font-size:24px;margin-top:15px;color:var(--blue)}#terminal i{display:inline-block;width:10px;height:23px;background:var(--blue);vertical-align:middle;margin-left:3px;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.ending{min-height:85vh;background:#101216;color:white;padding:95px 8vw 30px;display:flex;align-items:flex-start;flex-direction:column}.ending h2{font-size:clamp(48px,8vw,110px);font-weight:400;letter-spacing:-.055em;line-height:1.02;margin:10px 0 40px}.ending h2 span{color:#799aff}.end-cta{background:var(--blue);padding:18px 24px;font-size:16px}#replay{background:none;border:0;color:#c0c4ce;padding:25px 0;font-size:14px}footer{width:100%;margin-top:auto;padding-top:60px;display:flex;justify-content:space-between;font-size:11px;color:#90949d}footer span:first-child{font-family:Arial;font-size:25px;color:white;letter-spacing:-1px}@media(min-height:900px){.scene{inset:28% 0 210px}.caption{bottom:165px}}@media(max-width:700px){header{height:76px;padding:0 6vw}.brand{font-size:25px}.mark{font-size:30px}.header-note{display:none}.contact{padding:10px 14px;font-size:13px}.contact span{padding-left:6px}.sticky{min-height:570px}.heading{top:102px;left:6vw}.heading .eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:14px}h1{font-size:47px}.intro{font-size:14px;max-width:260px;line-height:1.5}.scene{inset:29% 0 220px}.caption{left:6vw;right:6vw;bottom:151px;padding:8px 0;max-width:none}.caption .eyebrow{font-size:11px;margin-bottom:7px}.caption h2{font-size:26px;letter-spacing:-1px}.caption>p:last-of-type{font-size:14px;line-height:1.45}.bottom{left:6vw;right:6vw;bottom:20px}.bottom-meta{font-size:10px;letter-spacing:.5px;margin-bottom:17px}.bottom-meta button{font-size:11px}nav{gap:4px;grid-template-columns:repeat(6,minmax(0,1fr))}nav button{font-size:10px;white-space:normal;min-height:48px;padding-bottom:11px}nav button span{display:block;margin:0 0 7px;font-size:11px}#terminal{font-size:19px;margin-top:5px}#terminal i{height:17px;width:8px}.ending{padding:70px 6vw 25px;min-height:75vh}footer{gap:30px;align-items:end}footer span:last-child{max-width:150px;line-height:1.8;font-size:9px}}@media(prefers-reduced-motion:reduce){#terminal i{animation:none}#progress{transition:none}}

/* Restrained focus falloff; motion follows scroll, never the pointer. */
.scene:after{content:"";position:absolute;inset:0;pointer-events:none;backdrop-filter:blur(1.6px);-webkit-backdrop-filter:blur(1.6px);mask-image:linear-gradient(90deg,#000,transparent 30%,transparent 70%,#000);-webkit-mask-image:linear-gradient(90deg,#000,transparent 30%,transparent 70%,#000);opacity:var(--focus-opacity,0)}
@media(prefers-reduced-motion:reduce){.scene:after{display:none}}

/* The rendered camera movement replaces the image transform. */
.scene{inset:245px 4.5vw 230px;overflow:visible}
.scene:after{display:none}
.scene img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;transform:none;will-change:auto}
#flyby{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .35s;background:white}
.video-ready #flyby{opacity:1}
.video-ready #miniatures{opacity:0}
.heading{top:112px}
h1{font-size:clamp(42px,4.4vw,68px)}
h1 br{display:none}
.intro{margin-top:12px}
@media(min-height:900px){.scene{inset:245px 4.5vw 240px}}
@media(max-width:700px){.heading{top:98px}h1{font-size:43px;max-width:350px}h1 br{display:block}.scene{inset:250px 0 260px;min-height:130px}.caption{bottom:149px}.intro{font-size:14px}}
@media(max-height:700px) and (min-width:701px){.heading{top:94px}h1{font-size:42px}.heading .eyebrow{margin-bottom:8px}.intro{margin-top:8px}.scene{top:190px;bottom:225px}}


/* Full-width film and a deterministic white edge fade. */
#journey{height:440svh}
.scene{isolation:isolate;background:#fff}
.caption{background:transparent}
@media(max-width:700px){
 .sticky{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px;min-height:calc(480px + 75vw);height:100svh;padding:92px 0 max(16px,env(safe-area-inset-bottom));overflow:hidden}
 .heading{position:relative;inset:auto;margin:0 6vw;z-index:2}
 .heading .eyebrow{font-size:11px;margin-bottom:10px}
 h1{font-size:clamp(34px,9.5vw,43px);max-width:none}
 .intro{margin:10px 0 0;font-size:14px;max-width:none}
 .scene{position:relative;inset:auto;width:100%;height:auto;min-height:0;aspect-ratio:4/3;align-self:center;overflow:visible}
 .scene img,#flyby{width:100%;height:100%;object-fit:contain;inset:0}
 .caption{position:relative;inset:auto;margin:0 6vw;padding:0;max-width:none;min-height:98px}
 .caption h2{font-size:25px;line-height:1.12;margin-bottom:7px}
 .caption .eyebrow{margin-bottom:7px}
 .caption>p:last-of-type{font-size:14px;line-height:1.4}
 .bottom{position:relative;inset:auto;margin:0 6vw;align-self:end}
 .bottom-meta{margin-bottom:10px;font-size:11px}
 nav{gap:2px}
 nav button{font-size:12px;padding-bottom:9px;min-height:48px}
 nav button span{font-size:12px;margin-bottom:5px}
}

/* White overlays cannot turn black while a video frame is unavailable. */
.scene::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 88%,#fff 100%)}
#flyby{background:#fff;mask-image:none;-webkit-mask-image:none}
#media-status{position:absolute;z-index:3;left:50%;bottom:8px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:95%;width:max-content;padding:8px 12px;border-radius:20px;background:rgba(255,255,255,.94);color:var(--muted);font-size:14px}
#media-status[hidden],#retry-video[hidden]{display:none}
#retry-video{border:0;background:none;color:var(--blue);padding:4px;text-decoration:underline;font-size:14px}

/* User-controlled frame changes remain available with reduced motion enabled. */
#flyby{opacity:1;transition:none}

/* Exact mark from the supplied brand guide, with its approved live-text wordmark. */
@font-face{font-family:Archivo;src:url('fonts/archivo-latin-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
.brand{color:#060D16;gap:24px;flex-shrink:0}
.brand-mark{display:block;width:23.625px;height:36px;flex:none}
.brand-wordmark{font-family:Archivo,Arial,sans-serif;font-weight:300;letter-spacing:-.02em;white-space:nowrap}
.brand-dot{color:#1650E8}
@media(max-width:700px){.brand{gap:20px}.brand-mark{width:19.6875px;height:30px}}

/* Fit the full frame without cropping. The fade must follow the actual picture
   bounds, not a larger letterboxed container. Fill the viewport when it fits;
   cap by available height / 1280px and blend all four edges on wide desktops. */
@media(min-width:701px){
 .scene{--scene-top:245px;--scene-bottom:230px;inset:auto;top:var(--scene-top);left:50%;transform:translateX(-50%);width:min(100vw,1280px,calc((max(640px,100svh) - var(--scene-top) - var(--scene-bottom))*4/3));height:auto;min-height:0;aspect-ratio:4/3}
 .scene::before{background:linear-gradient(to right,#fff 0,rgba(255,255,255,0) 9%,rgba(255,255,255,0) 91%,#fff 100%),linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 88%,#fff 100%)}
}
@media(min-width:701px) and (min-height:900px){.scene{--scene-bottom:240px}}
@media(min-width:701px) and (max-height:700px){.scene{--scene-top:190px;--scene-bottom:225px}}

/* Desktop: a generous right-hand frame balanced by a separate text column.
   Preserve the full 4:3 picture and the existing stacked mobile composition. */
@media(min-width:1024px){
 .scene{--scene-top:210px;--scene-bottom:112px;left:auto;right:2.5vw;transform:none;width:min(62vw,calc((max(640px,100svh) - var(--scene-top) - var(--scene-bottom))*4/3))}
 .caption{top:clamp(300px,46svh,600px);bottom:auto;width:28vw;max-width:460px;padding:0}
}

/* The shared logo comes from lib/brand.js; the film stays on a white canvas
   in both themes because its contact shadows are baked into the footage. */
.lockup{display:flex;align-items:center;gap:24px;color:#060D16}
.lockup-mark{width:23.625px;height:36px;flex:none}
.wordmark{font-family:Archivo,Arial,sans-serif;font-weight:300;letter-spacing:-.02em;white-space:nowrap}
.wordmark-dot{color:#1650E8}
.theme-toggle{position:fixed;right:18px;bottom:8px;z-index:10;background:#fff;color:#15171b;border:0;border-bottom:1px solid #dadce0;padding:5px 8px;font-size:11px}
[data-theme="night"]{--ink:#dce6f2;--muted:#7b8ca0}
[data-theme="night"] body{background:#04080e}
.sticky{--ink:#15171b;--muted:#646971;color:var(--ink);background:#fff}
[data-theme="night"] .theme-toggle{background:#04080e;color:#dce6f2;border-color:#4a5a6c}
.hero-pin{position:relative}
@media(max-width:700px){.lockup{gap:20px}.lockup-mark{width:19.6875px;height:30px}}