/* Entry 02 — black preload, one headline, one object, one continuous surface. */
:root{--paper:#0a0909}
body.opening-active{overflow:hidden}body.opening-active>header,body.opening-active>main,body.opening-active>footer{visibility:hidden}
.header{border:0;height:98px}.header nav{opacity:.74}.brand-wordmark{filter:brightness(1.4)}
.rig-experience{height:340svh;position:relative;background:var(--paper)}
.rig-sticky{position:sticky;top:0;height:100svh;min-height:680px;overflow:hidden;background:radial-gradient(ellipse at 50% 62%,#171514 0,transparent 48%),var(--paper)}
.landing-headline{position:absolute;z-index:3;top:15%;left:var(--pad);right:var(--pad);text-align:center;pointer-events:none;will-change:transform,opacity}
.landing-headline .eyebrow{justify-content:center;font-size:8px;letter-spacing:.15em;color:#a6a19d}
.landing-headline h1{font-family:var(--typeface),monospace;font-size:clamp(50px,5.7vw,88px);font-weight:400;line-height:1.1;letter-spacing:-.075em;margin:24px 0 0}.landing-headline h1 span{color:#c9c4c0}
#rig-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.assembly-caption{position:absolute;top:12%;left:0;width:100%;z-index:3;text-align:center;opacity:0;pointer-events:none;will-change:transform,opacity}.assembly-caption .eyebrow{justify-content:center;font-size:8px;letter-spacing:.13em;color:#958b84}.assembly-caption p{font-size:clamp(25px,3.2vw,46px);line-height:1.2;letter-spacing:-.055em;margin-top:18px}
.rig-bottom{position:absolute;z-index:4;bottom:32px;left:var(--pad);right:var(--pad);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:24px;font-size:8px;color:#aca49f}
.rig-stage{display:flex;flex-direction:column;gap:10px;font-size:8px;letter-spacing:.08em}.rig-study-link{font-size:8px;letter-spacing:0;color:#7b736d;width:max-content;padding:4px 0}.rig-study-link:hover{color:#e8e5e3}.rig-scroll{justify-self:center;display:flex;align-items:center;gap:18px;font-size:8px;letter-spacing:.08em}.rig-scroll span{font-size:20px}.rig-bottom .motion-toggle{justify-self:end;font-size:8px;color:#9b928b}.rig-bottom .motion-toggle span{border-color:#3c342e}
.rig-loading{position:absolute;top:63%;left:0;width:100%;text-align:center;font-size:10px;color:#9b928b}.rig-scroll-progress{position:absolute;bottom:0;left:var(--pad);right:var(--pad);height:1px;background:transparent}.rig-scroll-progress span{height:100%;display:block;background:#94877d;width:0;opacity:.5}
/* The loader is a black screen. Its logo never appears behind page copy. */
.opening{position:fixed;inset:0;background:#000;z-index:1000;clip-path:none;opacity:1;transition:opacity .38s .12s;pointer-events:auto}.opening::before{display:none}.opening.is-ready{clip-path:none;opacity:0;pointer-events:none;transition:opacity .38s .12s}
#loader-emblem{position:absolute;inset:0;width:100%;height:100%;transition:none;transform:none;pointer-events:none}
.preload-bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:max(28px,env(safe-area-inset-bottom));font-family:var(--typeface),monospace}
.preload-status{display:flex;justify-content:space-between;align-items:center;color:#b5b0ad;font-size:8px;letter-spacing:.08em;margin-bottom:15px}.opening-progress{position:relative;inset:auto;height:1px;background:#272524}.opening-progress span{height:1px;background:#dbd7d4;transition:width .2s ease}.opening.is-ready .opening-progress{opacity:1}
#skip-opening{display:block;background:none;font-size:8px;color:#99908a;margin:17px 0 0 auto;padding:8px 0}.opening.is-ready #skip-opening{visibility:hidden}.opening.is-ready .preload-status{opacity:.6}
#type-preview-intro{margin-top:23px}.study-links{display:flex;gap:25px;flex-wrap:wrap}
@media(min-width:1700px){.rig-sticky{max-height:1200px}.landing-headline{top:15%}}
@media(max-width:750px){.header{height:82px}.header nav{display:none}.rig-experience{height:320svh}.rig-sticky{min-height:620px}.landing-headline{top:17%;left:24px;right:24px}.landing-headline .eyebrow{font-size:6px;letter-spacing:.09em}.landing-headline h1{font-size:clamp(38px,10.6vw,62px);line-height:1.17;margin-top:20px;letter-spacing:-.065em}.assembly-caption{top:12%}.assembly-caption .eyebrow{font-size:6px}.assembly-caption p{font-size:28px;margin-top:16px}.rig-bottom{bottom:24px;left:24px;right:24px;grid-template-columns:1fr auto;gap:15px}.rig-stage{font-size:6px;gap:7px}.rig-study-link{font-size:7px}.rig-scroll{justify-self:end;font-size:6px;gap:9px}.rig-scroll span{font-size:18px}.rig-bottom .motion-toggle{position:absolute;right:0;bottom:48px;font-size:0}.rig-bottom .motion-toggle span{font-size:10px;width:26px;height:26px;display:grid;place-items:center;padding:0}.rig-scroll-progress{left:24px;right:24px}.preload-status{font-size:7px}.preload-bottom{left:24px;right:24px;bottom:max(24px,env(safe-area-inset-bottom))}.rig-loading{font-size:9px}.hero-bottom{display:none}}
@media(max-height:700px){.landing-headline{top:17%}.landing-headline h1{font-size:clamp(35px,8.8vw,58px);margin-top:14px}.rig-sticky{min-height:560px}}
@media(prefers-reduced-motion:reduce){.rig-experience{height:180svh}.opening,.opening.is-ready{transition:opacity .12s}}

/* Film stills lead the project view; supporting detail follows. */
#project-dialog{width:min(1040px,calc(100% - 32px));padding:0;max-height:92svh;border-radius:0}#project-dialog .dialog-close{background:#0a0909a8;border-radius:50%;color:#fff;top:16px;right:16px}.project-dialog-media{position:relative;aspect-ratio:16/9;max-height:56svh;overflow:hidden}.project-dialog-media img{width:100%;height:100%;object-fit:cover}.project-dialog-media>span{position:absolute;bottom:18px;left:28px;color:#fff;font-size:8px;letter-spacing:.09em;text-shadow:0 1px 8px #000}.project-dialog-copy{padding:35px 42px 42px}.project-dialog-copy h2{margin:18px 0 20px}.project-dialog-copy p{max-width:760px}.project-dialog-copy ul{display:flex;gap:25px;margin:24px 0 30px}.project-dialog-copy li{flex:1;font-size:10px;line-height:1.8}.project-dialog-copy li:before{display:none}.project-dialog-copy .eyebrow{font-size:8px}.project-media{border-radius:0}.project img{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}
@media(max-width:650px){.project-dialog-copy{padding:25px 24px 32px}.project-dialog-copy h2{font-size:27px}.project-dialog-copy p{font-size:12px}.project-dialog-copy ul{display:block;margin:15px 0 25px}.project-dialog-copy li{padding:9px 0}.project-dialog-media{aspect-ratio:1.25}.project-dialog-media>span{left:20px;font-size:6px}.project-dialog-copy .pill-button{font-size:10px}}

/* One persistent logo canvas: the background clears without swapping emblems. */
html{scrollbar-gutter:stable}
.opening{background:transparent;transition:none}
.opening::before{content:"";display:block;position:absolute;inset:0;background:#000;opacity:1;transition:opacity .65s ease}
.opening.is-ready{opacity:1;transition:none}
.opening.is-landing::before,.opening.is-ready::before{opacity:0}
.opening.is-landing .preload-bottom,.opening.is-ready .preload-bottom{opacity:0;transition:opacity .3s}
#loader-emblem,.opening.is-ready #loader-emblem{opacity:1;transition:none}
#loader-emblem.landed{z-index:2;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
body.opening-settled>header,body.opening-settled>main,body.opening-settled>footer{visibility:visible}
@media(prefers-reduced-motion:reduce){.opening::before{transition:none}}

/* Header, title and centred emblem each retain their own vertical space. */
.rig-sticky{min-height:0;max-height:none}
.landing-headline{top:120px}
.landing-headline h1{font-size:clamp(38px,4.7vw,68px);line-height:1.12;margin-top:16px;white-space:nowrap;letter-spacing:-.065em}
.header{gap:24px}
.header .logo,.header-actions{flex-shrink:0}
@media(max-width:1000px){.header nav{display:none}}
@media(max-width:750px){
 .header{gap:12px}
 .header .logo,.header .brand-wordmark{width:132px}
 .header .brand-wordmark{height:38px;mask-size:132px auto;mask-position:0 -59px}
 .header .contact-link{gap:10px;padding:11px 13px;white-space:nowrap}
 .landing-headline{top:100px;left:24px;right:24px}
 .landing-headline h1{font-size:clamp(24px,7.2vw,48px);margin-top:12px}
}
@media(min-width:751px) and (max-height:800px){
 .landing-headline{top:116px}
 .landing-headline h1{font-size:clamp(30px,4vw,44px);margin-top:12px}
}
@media(min-width:751px) and (max-height:650px){
 .header{height:72px}
 .landing-headline{top:88px}
 .landing-headline h1{font-size:36px;margin-top:8px}
}
@media(max-height:560px){
 .header{height:62px}
 .landing-headline{top:76px}
 .landing-headline .eyebrow{display:none}
 .landing-headline h1{font-size:clamp(22px,3.8vw,30px);margin-top:0}
}

/* The complete rig opens into an actual SkySurf film, with no hard section cut. */
/* 220 viewport heights of travel become 198: exactly 10% less scrolling. */
.rig-experience{height:298svh}
.rig-film{position:absolute;z-index:3;top:50%;left:50%;aspect-ratio:910/512;width:min(88%,1200px);opacity:var(--film-reveal,0);visibility:hidden;transform:translate(-50%,-50%);will-change:opacity;pointer-events:none}
.rig-film:not([inert]){pointer-events:auto}
.rig-film-screen{display:block;position:absolute;left:50%;top:50%;width:var(--film-source-width,100%);height:var(--film-source-height,100%);max-width:none;max-height:none;transform:translate(-50%,-50%);padding:0;background:#0a0909;aspect-ratio:910/512;overflow:hidden;text-align:left;clip-path:var(--film-aperture,ellipse(0px 0px));will-change:clip-path}
.rig-film-screen video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;display:block}
.rig-film-play{position:absolute;left:24px;bottom:22px;color:#fff;font-size:11px;padding:10px 14px;background:#0a0909a6;border-radius:28px;backdrop-filter:blur(4px)}
.rig-film-meta{position:absolute;top:calc(100% + 20px);left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:8px;letter-spacing:.08em;color:#b8b0aa}
[data-preview-start]{background:none;color:#e8e5e3;font-size:10px;padding:10px 0;min-height:44px;letter-spacing:0}
@media(max-width:750px){.rig-experience{height:320svh}.rig-film{width:calc(100% - 32px)}.rig-film-play{font-size:10px;left:12px;bottom:12px;padding:9px 12px}.rig-film-meta{top:calc(100% + 10px);font-size:7px}}
@media(max-height:560px){.rig-film{width:min(72%,calc(118svh));}.rig-film-meta{top:calc(100% + 8px)}}
@media(prefers-reduced-motion:reduce){.rig-experience{height:180svh}.rig-film{display:none}}

.rig-film-play,.rig-film-meta{opacity:var(--film-ui,0)}
.rig-stage,.rig-scroll{opacity:calc(1 - var(--film-reveal,0))}
/* Preserve the canvas aspect ratio even during a mobile viewport/lifecycle change. */
#loader-emblem,#rig-canvas{object-fit:contain;object-position:center}

/* The optical reveal becomes the first reference, with context already attached. */
.rig-film{width:min(88%,1200px,calc((100svh - 220px) * 910 / 512))}
.rig-film-heading{position:absolute;bottom:calc(100% + 22px);left:0;right:0;opacity:var(--film-context,0);pointer-events:none}
.rig-film-heading .eyebrow{font-size:9px;letter-spacing:.1em;color:#b1a7a0;margin-bottom:10px}
.rig-film-heading h2{width:max-content;max-width:100%;position:relative;isolation:isolate;font-size:clamp(32px,4.5vw,62px);line-height:1.1;letter-spacing:-.065em}
.rig-film-meta{opacity:var(--film-context,0);align-items:flex-start;line-height:1.6;letter-spacing:0}
.rig-film-credits{display:grid;gap:5px;min-width:0}.rig-film-credits strong{font-size:13px;font-weight:400;color:#dbd6d2}.rig-film-credits>span{font-size:10px;color:#ada29b}
.rig-bottom .motion-toggle{opacity:calc(1 - var(--film-reveal,0))}
.rig-film-active .rig-experience{margin-bottom:calc(-1 * var(--rig-tail-space,0px))}
@media(max-width:750px){.rig-film{width:min(calc(100% - 32px),calc((100svh - 190px) * 910 / 512))}.rig-film-heading{bottom:calc(100% + 16px)}.rig-film-heading .eyebrow{font-size:8px;margin-bottom:8px}.rig-film-heading h2{font-size:clamp(28px,8vw,38px)}.rig-film-credits strong{font-size:12px}.rig-film-credits>span{font-size:9px}}

/* Shared camera/glass plane for the brief frontal spring finish. */
.rig-media{position:absolute;inset:0;z-index:2;pointer-events:none;transform-origin:50% 50%}

/* The side note explains scrolling; the lower action skips to the films. */
.rig-bottom{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.rig-bottom .rig-skip{justify-self:end;display:inline-flex;align-items:center;gap:9px;min-width:44px;min-height:44px;color:#c6b9bc;background:none;font-size:10px;line-height:1.5;letter-spacing:.015em;white-space:nowrap;opacity:calc(1 - var(--film-reveal,0));transition:color .18s ease}
.rig-skip>span{font-size:16px;line-height:1;transition:transform .18s ease}
.rig-skip:hover>span{transform:translateY(2px)}
.rig-scroll{position:absolute;z-index:4;right:max(28px,calc(env(safe-area-inset-right) + 28px));bottom:clamp(140px,18svh,205px);display:inline-flex;align-items:center;gap:10px;min-width:44px;min-height:44px;padding:8px 0;border:0;border-radius:0;box-shadow:none;color:var(--accent-soft);background:none;font-size:10.5px;line-height:1.4;letter-spacing:.025em;text-align:center;white-space:nowrap;writing-mode:vertical-rl;text-orientation:mixed;opacity:calc(1 - var(--film-reveal,0));transition:opacity .34s cubic-bezier(.2,.65,.3,1),color .18s ease}
.rig-scroll.is-scrolling{opacity:0;pointer-events:none;transition:opacity .2s cubic-bezier(.2,.65,.3,1),color .18s ease}
.rig-scroll.is-scrolling:focus-visible{opacity:calc(1 - var(--film-reveal,0));pointer-events:auto}
.rig-scroll::before{content:"";width:1px;height:18px;background:var(--accent-line)}
.rig-scroll:hover,.rig-scroll:focus-visible,.rig-skip:hover,.rig-skip:focus-visible{color:var(--accent-ink);background:none}
.rig-scroll>.rig-scroll-label{font-size:inherit;line-height:1.5}
.rig-scroll>.rig-scroll-arrow{display:block;width:16px;height:32px;flex:none;writing-mode:horizontal-tb}
.rig-scroll-arrow svg{display:block;width:100%;height:100%;overflow:visible}
.rig-scroll-arrow path{fill:none;stroke:currentColor;stroke-width:.95;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.rig-scroll-arrow .rig-scroll-stroke{opacity:.68}
.rig-scroll-arrow .rig-scroll-glint{stroke-dasharray:.24 .76;stroke-dashoffset:1;opacity:0}
@media(max-width:750px){
 .rig-bottom{column-gap:18px;row-gap:0;bottom:max(20px,env(safe-area-inset-bottom))}
 .rig-stage{grid-column:1;grid-row:1;min-width:0;gap:0}.rig-stage .rig-study-link{display:none}
 .rig-bottom .rig-skip{grid-column:2;grid-row:1;font-size:8.5px;gap:8px}
 .rig-scroll{right:max(24px,calc(env(safe-area-inset-right) + 24px));font-size:9.5px}
}
@media(max-height:560px){
 .rig-sticky{min-height:0}
 .rig-scroll{writing-mode:horizontal-tb;right:var(--pad);bottom:max(106px,calc(env(safe-area-inset-bottom) + 94px));padding:0}
 .rig-scroll::before{width:18px;height:1px}
}
/* Draw once, then keep a quiet downward rhythm through the complete build. */
@keyframes rig-scroll-draw{0%{stroke-dashoffset:1;opacity:0}30%{opacity:.68}100%{stroke-dashoffset:0;opacity:.68}}
@keyframes rig-scroll-nudge{0%,72%,100%{transform:translateY(0)}30%{transform:translateY(5px)}46%{transform:translateY(1px)}58%{transform:translateY(2.5px)}}
@keyframes rig-scroll-shimmer{0%{stroke-dashoffset:1;opacity:0}14%{opacity:.4}42%{opacity:1}68%{opacity:.55}80%,100%{stroke-dashoffset:0;opacity:0}}
body:not(.opening-active) .rig-scroll.is-guiding .rig-scroll-stroke{animation:rig-scroll-draw .55s cubic-bezier(.22,.65,.35,1) .1s 1 both}
body:not(.opening-active) .rig-scroll.is-guiding>.rig-scroll-arrow{animation:rig-scroll-nudge 2.8s cubic-bezier(.22,.65,.35,1) .65s infinite}
body:not(.opening-active) .rig-scroll.is-guiding .rig-scroll-glint{animation:rig-scroll-shimmer 2.8s linear .65s infinite}
body:not(.opening-active) .rig-scroll.is-guiding.is-scrolling>.rig-scroll-arrow,body:not(.opening-active) .rig-scroll.is-guiding.is-scrolling .rig-scroll-stroke,body:not(.opening-active) .rig-scroll.is-guiding.is-scrolling .rig-scroll-glint{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.rig-scroll,.rig-scroll.is-scrolling,.rig-skip,.rig-skip>span{transition:none}.rig-skip:hover>span{transform:none}body:not(.opening-active) .rig-scroll.is-guiding>.rig-scroll-arrow,body:not(.opening-active) .rig-scroll.is-guiding .rig-scroll-stroke,body:not(.opening-active) .rig-scroll.is-guiding .rig-scroll-glint{animation:none}.rig-scroll-arrow .rig-scroll-glint{display:none}}