/* Native-scroll background film. The exact-aspect picture stays intact. */
.brand-mark { width:2rem; height:1.7rem; flex:0 0 auto; }
.fullscreen-toggle {border:0;background:none;display:grid;place-items:center;min-width:44px;min-height:44px;padding:.7rem;color:#a6afbc}
.fullscreen-toggle svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.fullscreen-toggle:hover {color:#f4f7fa}
.fullscreen-exit {display:none}
.fullscreen-toggle[aria-pressed="true"] .fullscreen-enter {display:none}
.fullscreen-toggle[aria-pressed="true"] .fullscreen-exit {display:block}
@media(max-width:600px){.header-actions{gap:.2rem}.fullscreen-toggle{padding:.6rem}.motion-toggle{padding-left:.3rem}.header-inner{gap:.5rem}.wordmark{gap:.4rem}.wordmark>span{font-size:.58rem}}
@media(max-width:360px){.motion-toggle [data-motion-label]{display:none}.motion-toggle{min-width:40px;justify-content:center;padding:.3rem}.wordmark>span{font-size:.56rem}}
.site-header { position:fixed; inset:0 0 auto; }
main { position:relative; }
.scroll-story { position:relative; min-height:100svh; scroll-margin-top:0; }
.story-stage { height:100svh; min-height:580px; position:relative; overflow:hidden; isolation:isolate; background:#050608; }
.scroll-story.is-enhanced { height:960svh; }
.scroll-story.is-enhanced .story-stage { position:sticky; top:0; min-height:0; }
.story-camera { position:absolute; inset:0; z-index:0; transform:translate3d(0,var(--scene-lift,0px),0) scale(var(--scene-scale,1)); transform-origin:50% 35%; will-change:transform; }
#hero-portrait.story-poster { position:absolute; inset:0; z-index:-2; width:100%; height:100%; }
#hero-portrait.story-poster img { width:100%; height:100%; object-fit:contain; object-position:center; }
.story-video { position:absolute; inset:0; display:block; height:100%; width:100%; object-fit:contain; z-index:0; opacity:0; }
.scroll-story.is-ready .story-video { opacity:1; }
.scroll-story.is-ready .story-poster { opacity:0; }
.story-stage[data-fit="cover"] #intro-video {object-fit:cover}
.story-stage[data-fit="cover"] #hero-portrait.story-poster img {object-fit:cover}
.story-scrim { position:absolute; inset:0; pointer-events:none; z-index:1; background:linear-gradient(90deg,rgba(5,6,8,.36),transparent 55%),linear-gradient(0deg,rgba(5,6,8,.2),transparent 25%); opacity:var(--opening-opacity,1); }
.story-opening { padding-top:clamp(8rem,17vh,12rem); padding-bottom:8rem; position:relative; z-index:3; opacity:var(--opening-opacity,1); transform:translate3d(0,calc(var(--opening-shift,0) * 1px),0); }
.story-opening .eyebrow { display:flex; align-items:center; gap:.75rem; color:#b8c1cc; margin-bottom:2rem; }
.story-opening h1 { max-width:8.5em; font-size:clamp(4rem,8.2vw,8.7rem); }
.story-positioning { margin-top:1.8rem; color:#e1e7ef; font-size:clamp(.9rem,1.2vw,1.2rem); }
.story-bottom { position:absolute; bottom:max(2.4rem,calc(env(safe-area-inset-bottom) + 1.5rem)); left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; z-index:5; }
.scroll-hint { font:.65rem/1.7 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#b9c7d9; display:flex; align-items:center; gap:1rem; }
.scroll-hint > span { color:var(--blue); font-size:1.4rem; }
.story-transport { display:flex; gap:1.5rem; align-items:center; }
.story-transport .text-button { color:#dce6f2; min-height:44px; font-size:.7rem; }
.story-chapters { position:absolute; inset:0; pointer-events:none; z-index:3; }
.story-chapters > div { position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:0; visibility:hidden; transition:opacity .16s linear; }
.story-chapters > div.is-active { opacity:1; visibility:visible; }
.story-chapters .eyebrow { color:#b9c7d9; display:block; margin-bottom:1.2rem; text-shadow:0 2px 12px black; }
.story-chapters p { font-size:clamp(2.5rem,5.6vw,6rem); line-height:1.03; letter-spacing:-.055em; text-shadow:0 3px 28px rgba(0,0,0,.6); }
.story-chapters em { font-style:normal; color:#8fcbff; }
.story-chapters [data-chapter="work"] { top:77%; }
.story-chapters [data-chapter="work"] p { font-size:clamp(2rem,4vw,4rem); }
.story-chapters [data-chapter="return"] .text-link { margin-top:1.5rem; pointer-events:auto; }
.project-screens {position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0}
.project-screen {position:absolute;left:0;top:0;width:640px;height:360px;transform-origin:0 0;backface-visibility:hidden;overflow:hidden;background:#0a1520;color:#f4f7fa;pointer-events:auto;display:block;border:1px solid #739cbb;text-decoration:none}
.project-screen img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.84}
.project-screen::after {content:"";position:absolute;inset:0;background:linear-gradient(0deg,#050608 3%,rgba(5,6,8,.6) 54%,transparent)}
.project-screen .screen-type,.project-screen strong,.project-screen .screen-subtitle,.project-screen .screen-cta {position:absolute;z-index:1;left:32px;right:28px}
.screen-type {top:24px;font:12px/1.4 var(--mono);letter-spacing:2px;color:#b9d9f4}
.project-screen strong {top:196px;font-size:40px;line-height:1.1;letter-spacing:-1px}
.screen-subtitle {top:249px;font-size:17px;color:#d3e5f4}
.screen-cta {bottom:20px;font:12px/1.4 var(--mono);letter-spacing:1.6px;color:#8fcbff}
.project-screen:focus-visible {outline:6px solid #c6e6ff;outline-offset:-7px}
.project-screen:hover {filter:brightness(1.15)}
.showcase-heading {position:absolute;left:var(--gutter);right:var(--gutter);bottom:16%;z-index:3;pointer-events:none;text-shadow:0 3px 24px #000}
.showcase-heading .eyebrow {color:#8fcbff;font-size:.63rem}
.showcase-heading h2 {font-size:clamp(2rem,4.8vw,4.75rem);line-height:1.1;letter-spacing:-.055em;margin:.65rem 0}
.showcase-heading p {font-size:.8rem;color:#c0cede}
.experience-loader { position:fixed; inset:0; z-index:120; background:#050608; display:grid; place-items:center; padding:2rem; }
.loader-inner { width:min(100%,480px); }
.loader-logo { width:65px; color:#168bff; margin-bottom:3rem; }
.loader-inner .eyebrow { color:#9aaabd; font-size:.58rem; }
.loader-inner h2 { font-size:clamp(2.8rem,8vw,4.8rem); line-height:1.05; letter-spacing:-.055em; margin:1rem 0 2rem; }
.loader-meter { display:flex; align-items:center; gap:1rem; }
.loader-meter progress { flex:1; width:100%; height:3px; appearance:none; accent-color:#168bff; background:#24282f; border:0; }
.loader-meter progress::-webkit-progress-bar { background:#24282f; }
.loader-meter progress::-webkit-progress-value { background:#168bff; }
.loader-meter progress::-moz-progress-bar { background:#168bff; }
.loader-meter output { font:.72rem/1 var(--mono); width:3.5rem; text-align:right; color:#8fcbff; }
#load-status { font-size:.8rem; color:#a6afbc; margin-top:1rem; min-height:2.8em; }
#skip-loading { background:transparent; border:0; padding:0; margin-top:2rem; color:#f4f7fa; }
.loader-note { margin-top:2rem; color:#858e9c; font:.62rem/1.7 var(--mono); }
.loader-directions {display:flex;gap:1.5rem;margin-top:1.35rem;font-size:.79rem;color:#d2dce8}
.loader-directions span {display:flex;align-items:center;gap:.5rem}
.loader-directions b {font-size:1.1rem;color:#8fcbff;font-weight:400}
@media(max-width:600px){.loader-directions{flex-direction:column;gap:.35rem}}
html[data-motion="reduced"] .scroll-story { height:auto; }
html[data-motion="reduced"] .story-stage { position:relative; }
html[data-motion="reduced"] .story-chapters { display:none; }
.work { position:relative; background:#050608; }
@media(min-width:1800px) { .story-opening { padding-top:19vh; } }
@media(max-width:860px) {
  .story-opening { padding-top:calc(var(--header-height) + 2.5rem); }
  .story-opening h1 { font-size:clamp(3.4rem,10vw,6rem); }
  .story-chapters > div { top:25%; }
  .story-chapters p { font-size:clamp(2.5rem,7.5vw,4.6rem); }
  .story-chapters [data-chapter="work"] { top:78%; }
  .story-chapters [data-chapter="return"] { top:24%; }
}
@media(max-width:600px) {
  .story-stage { min-height:720px; }
  .scroll-story.is-enhanced { height:880svh; }
  .scroll-story.is-enhanced .story-stage { min-height:0; }
  .story-opening { padding-top:calc(var(--header-height) + 2rem); }
  .story-opening .eyebrow { font-size:.46rem; margin-bottom:1.2rem; max-width:85%; }
  .story-opening h1 { font-size:clamp(2.5rem,10.9vw,4rem); line-height:1; max-width:9em; }
  .story-positioning { font-size:.73rem; margin-top:1.1rem; }
  .story-opening .hero-actions { margin-top:1rem; }
  .story-opening .hero-actions .button { min-height:44px; font-size:.7rem; padding:.55rem .8rem; gap:.8rem; }
  .story-bottom { bottom:max(.6rem,env(safe-area-inset-bottom)); gap:.4rem; }
  .scroll-hint { font-size:.5rem; gap:.55rem; }
  .story-transport { gap:.5rem; }
  .story-transport .text-button { font-size:.58rem; }
  .story-chapters > div { top:22%; }
  .story-chapters p { font-size:clamp(2.2rem,8.8vw,3rem); }
  .story-chapters .eyebrow { font-size:.52rem; margin-bottom:.7rem; }
  .story-chapters [data-chapter="work"] { top:80%; }
  .story-chapters [data-chapter="work"] p { font-size:1.8rem; }
  .story-chapters [data-chapter="return"] { top:21%; }
  .story-chapters [data-chapter="return"] .text-link { font-size:.72rem; margin-top:.65rem; }
  .showcase-heading {bottom:12%}
  .showcase-heading h2 {font-size:2.1rem}
  .showcase-heading .eyebrow {font-size:.5rem}
  .showcase-heading p {font-size:.68rem}
}
/* Large viewport units do not resize when mobile browser chrome hides on the
   first swipe. The progress denominator uses this same stable stage height. */
@media (pointer:coarse) {
  .scroll-story.is-enhanced {height:var(--story-distance,880svh)}
  .scroll-story .story-stage {height:var(--story-viewport,100lvh);min-height:0}
}
@media(max-width:600px) and (max-height:780px) {
  .showcase-heading {bottom:max(1.5rem,calc(env(safe-area-inset-bottom) + 1rem))}
  .showcase-heading h2 {font-size:1.75rem;margin:.4rem 0}
  .showcase-heading p {font-size:.62rem}
}
@media(max-height:600px) and (orientation:landscape) {
  .story-opening { padding-top:calc(var(--header-height) + 1rem); }
  .story-opening h1 { font-size:clamp(2rem,10vh,3.8rem); }
  .story-opening .eyebrow { margin-bottom:.65rem; }
  .story-positioning { margin-top:.5rem; font-size:.7rem; }
  .story-opening .hero-actions { margin-top:.5rem; }
  .story-chapters p { font-size:2.4rem; }
  .story-bottom { bottom:.2rem; }
  .showcase-heading {bottom:13%}
  .showcase-heading h2 {font-size:2rem}
}
@media print {
  .experience-loader,.story-video,.story-chapters,.story-bottom {display:none!important}
  .scroll-story {height:auto!important}
  .story-stage {height:auto;min-height:0;position:relative!important}
  .story-opening {opacity:1!important;transform:none!important}
}