@font-face{font-family:Barlow;src:url('assets/barlow-condensed-black.ttf') format('truetype');font-weight:900;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-weight:400 500;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-bold.ttf') format('truetype');font-weight:600 900;font-display:swap}
:root{--white:#f5f4ee;--ink:#151a20;--blue:#2878cb;--gutter:3.5vw;--line:rgba(255,255,255,.32)}
*{box-sizing:border-box}html{scrollbar-width:thin;scrollbar-color:#eee #388bd6;scroll-padding-top:90px}body{margin:0;color:var(--white);background:#438ed4;font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a,button{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:7px}::selection{background:#c3e5ff;color:#172332}.skip-link{position:fixed;top:0;left:20px;transform:translateY(-130%);padding:14px;background:var(--white);color:var(--ink);z-index:99}.skip-link:focus{transform:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:4vw;padding:26px var(--gutter);transition:color .3s,background .3s, padding .3s}.header.dark{color:var(--ink);background:rgba(245,244,238,.94);padding-top:18px;padding-bottom:18px}.header.footer-mode{color:var(--white);background:rgba(21,26,32,.94)}.brand{display:flex;gap:11px;align-items:center;flex-shrink:0}.brand-mark{width:29px;height:41px}.brand-name{font-family:Barlow,Impact,sans-serif;font-size:28px;line-height:.85;letter-spacing:-.5px}.brand-name>span{display:block;font-family:Manrope,Arial,sans-serif;font-size:8px;letter-spacing:2.2px;margin-top:8px;font-weight:700}.edition{font-size:9px;line-height:1.55;letter-spacing:1px;font-weight:700}.header nav{margin-left:auto;display:flex;align-items:center;gap:34px}.nav-link{font-size:11px;font-weight:700;position:relative}.nav-link:after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}.nav-link:hover:after{transform:scaleX(1)}.nav-link>span{font-size:8px;vertical-align:super;opacity:.6;margin-left:5px}.motion-toggle{border:1px solid var(--line);border-radius:40px;background:transparent;display:flex;align-items:center;gap:10px;padding:13px 16px;font-size:9px;letter-spacing:.6px}.dark .motion-toggle{border-color:#151a2030}.motion-icon{height:12px;display:flex;gap:2px;align-items:center}.motion-icon i{width:2px;height:6px;background:currentColor;animation:equalizer 1s ease-in-out infinite alternate}.motion-icon i:nth-child(2){height:12px;animation-delay:-.4s}.motion-icon i:nth-child(3){height:8px;animation-delay:-.7s}.motion-icon i:nth-child(4){height:4px;animation-delay:-.2s}.motion-toggle[aria-pressed=true] i{animation-play-state:paused}@keyframes equalizer{to{transform:scaleY(.4)}}
.experience{height:680vh;position:relative}.stage{height:100vh;height:100svh;position:sticky;top:0;overflow:hidden;isolation:isolate}.film{position:absolute;inset:0;z-index:-2;background:#438ed4}.film video,.poster{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;inset:0}.film video{opacity:0;transition:opacity .35s}.film video.ready{opacity:1}.film-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,48,86,.19),transparent 47%),linear-gradient(0deg,rgba(15,49,77,.2),transparent 28%,transparent 86%,rgba(8,43,75,.1))}.scene{position:absolute;inset:0;pointer-events:none;will-change:opacity,transform}.scene a{pointer-events:auto}.scene:not(.scene-intro){opacity:0;visibility:hidden}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;margin:0;line-height:1.5}.small-star{font-size:23px;line-height:0;vertical-align:-2px;display:inline-block;margin-right:9px}.scene-intro>.eyebrow{position:absolute;left:var(--gutter);top:24%}.scene-intro h1{position:absolute;left:var(--gutter);top:30%;margin:0;font-family:Barlow,Impact,sans-serif;font-size:clamp(80px,9.1vw,170px);font-weight:900;line-height:.9;letter-spacing:-.025em}.scene-intro h1>span{display:block}.title-period{color:#c6e5f9}.intro-note{position:absolute;right:var(--gutter);bottom:26%;font-size:14px;line-height:1.7;letter-spacing:-.2px}.scroll-invitation{position:absolute;bottom:12%;left:var(--gutter);display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:1.1px;line-height:1.5;font-weight:700}.round-arrow{width:44px;height:44px;border:1px solid #ffffff70;display:grid;place-items:center;border-radius:50%;font-size:23px;transition:background .25s,transform .25s}.scroll-invitation:hover .round-arrow{background:#ffffff20;transform:translateY(4px)}.intro-index{position:absolute;right:var(--gutter);bottom:12%;font-size:9px;letter-spacing:1.5px;font-weight:700}.side-label{position:absolute;right:17px;top:50%;writing-mode:vertical-rl;font-size:8px;letter-spacing:2px;opacity:.7}
.stage-bottom{position:absolute;bottom:24px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1px;font-weight:700}.chapter{display:flex;gap:12px;align-items:center;min-width:230px}.chapter>span:first-child{opacity:.7}.chapter-line{width:28px;height:1px;background:#ffffff70}.frame-counter{font-variant-numeric:tabular-nums;min-width:230px;text-align:right}.frame-counter>span:last-child{opacity:.5}.progress-track{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff22}.progress-track span{display:block;width:100%;height:100%;background:var(--white);transform:scaleX(0);transform-origin:left;will-change:transform}.film-loader{display:flex;gap:8px;align-items:center;font-size:8px;transition:opacity .4s}.film-loader.loaded{opacity:0;pointer-events:none}.loader-dot{width:5px;height:5px;background:currentColor;border-radius:50%;animation:pulse 1s infinite alternate}@keyframes pulse{to{opacity:.2}}.flight-anchor{position:absolute;top:24%;width:1px;height:1px}
.scene-flight>.eyebrow{position:absolute;top:23%;left:var(--gutter)}.scene-flight h2{position:absolute;left:var(--gutter);top:32%;font-family:Barlow,Impact,sans-serif;font-size:clamp(100px,13.2vw,230px);line-height:.8;letter-spacing:-.025em;margin:0}.scene-flight h2>span{display:block}.outline{color:transparent;-webkit-text-stroke:1.3px var(--white)}.scene-aside{position:absolute;right:7%;top:37%;font-size:15px;line-height:1.6}.crosshair{position:absolute;right:8%;bottom:25%;width:52px;height:52px;border:1px solid #ffffff70;border-radius:50%}.crosshair:before,.crosshair:after{content:'';position:absolute;background:var(--white);top:50%;left:50%;transform:translate(-50%,-50%)}.crosshair:before{width:16px;height:1px}.crosshair:after{height:16px;width:1px}.flight-caption{position:absolute;left:var(--gutter);bottom:17%;font-size:9px;letter-spacing:1.5px}.close-word{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-family:Barlow,Impact,sans-serif;font-size:39vw;line-height:.8;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px #fff8}.close-caption{position:absolute;left:var(--gutter);bottom:17%;font-size:10px;letter-spacing:2px}.scene-finale>.eyebrow{position:absolute;left:var(--gutter);top:26%}.scene-finale h2{position:absolute;left:var(--gutter);top:34%;margin:0;font-family:Barlow,Impact,sans-serif;font-size:clamp(86px,10vw,175px);line-height:.82;letter-spacing:-.025em}.scene-finale h2>span{display:block}.scene-finale h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.4px var(--white)}.finale-note{position:absolute;right:var(--gutter);bottom:26%;font-size:14px;line-height:1.7}.scene-finale .pill-link{position:absolute;left:var(--gutter);bottom:16%}.film .frames{position:absolute;inset:0;width:100%;height:100%;opacity:0}.film .frames.ready{opacity:1}.film.frames-ready .poster{visibility:hidden}
.noscript{position:fixed;bottom:0;z-index:99;background:var(--white);color:var(--ink);padding:20px;width:100%;margin:0}.is-reduced .motion-icon i{animation:none}
@media(min-width:1800px){.scene-intro h1{font-size:9.1vw}.scene-finale h2{font-size:10vw}}
@media(max-width:1000px){.edition{display:none}.header nav{gap:20px}.scene-intro h1{font-size:9.1vw;top:35%}.scene-flight h2{font-size:14vw}.scene-finale h2{font-size:11vw}.intro-note,.finale-note{font-size:12px}}
@media(max-width:650px){:root{--gutter:6vw}.header{padding-top:20px}.brand-name{font-size:24px}.brand-mark{width:22px}.header nav{gap:17px}.nav-link{font-size:10px}.motion-toggle{padding:10px}.motion-toggle>span:last-child{display:none}.experience{height:570vh}.scene-intro>.eyebrow{font-size:8px;top:26%}.scene-intro h1{font-size:10.7vw;top:40%;text-shadow:0 2px 30px #18374d20}.intro-note,.finale-note,.intro-index,.scene-aside,.side-label{display:none}.scene-flight h2{font-size:22vw;top:38%}.scene-flight>.eyebrow,.scene-finale>.eyebrow{font-size:8px;top:26%}.scene-finale h2{font-size:17vw;top:40%}.scene-finale .pill-link{bottom:20%}.stage-bottom{bottom:20px}.chapter,.frame-counter{min-width:0;font-size:8px}.film-loader{position:absolute;bottom:28px;left:0}.crosshair{right:10%;bottom:23%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Continuous native playback needs an immediate, frame-aligned decoder swap. */
.film video{transition:none}.scene-intro h1{top:38%}

/* Keep the opening portrait below the headline on phones. Later shots keep
   their original full-viewport crop once --opening-frame reaches zero. */
@media(max-width:650px){
  .stage{--opening-frame:1;--opening-focus-x:90%;overflow:clip}
  .film video,.film .poster{
    top:calc(30% * var(--opening-frame));
    height:calc(100% - 30% * var(--opening-frame));
    object-position:var(--opening-focus-x) 50%;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 calc(6% * var(--opening-frame)));
    mask-image:linear-gradient(to bottom,transparent,#000 calc(6% * var(--opening-frame)));
  }
  .scene-intro>.eyebrow{top:12%;font-size:7px;letter-spacing:1.1px;max-width:88%}
  .scene-intro h1{top:17%;font-size:12.8vw;line-height:.95}
}

/* ───────────────────────── After the film: product, details, footer ───────────────────────── */
:root{--sky-1:#7db8f2;--sky-2:#4b9cee;--sky-3:#2a83e0;--cream:#f5f4ee;--muted:#5d646b;--ease:cubic-bezier(.2,.75,.2,1)}
.cta svg,.sky svg,.footer svg{display:block;width:1em;height:1em;flex-shrink:0}

/* 02 — Sky product stage */
.sky{position:relative;overflow:hidden;color:#fff;padding:118px var(--gutter) 42px;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 46%,var(--sky-3) 100%)}
.sky:before{content:'';position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 55%,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.meta-row{position:relative;display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.4);padding-top:16px;font-size:10px;font-weight:700;letter-spacing:1.4px}
.sky-stage{position:relative;margin-top:3.2vw}
.sky-title{margin:0;font-family:Barlow,Impact,sans-serif;font-weight:900;font-size:30vw;line-height:.8;letter-spacing:-.02em;color:#fff}
.sky-line{display:block;white-space:nowrap;will-change:transform}
.sky-line>span{display:inline-block;padding-top:.06em}
.sky-line--b{text-align:right;margin-top:.1em}
.can{position:absolute;z-index:2;margin:0;left:51%;top:50%;width:29vw;transform:translate(-50%,-50%) translate3d(0,var(--py,0px),0) rotate(var(--rot,0deg));will-change:transform;pointer-events:none}
.can img{display:block;width:100%;height:auto;filter:drop-shadow(0 4vw 4vw rgba(12,58,110,.38))}
.callout{position:absolute;z-index:3;top:9.5%;left:62%;right:0;display:flex;align-items:flex-start;gap:18px;margin:0;font-size:10px;font-weight:700;line-height:1.7;letter-spacing:1.2px}
.callout-line{position:relative;flex:0 0 7vw;height:1px;margin-top:8px;background:#fff}
.callout-text b{display:block;font-weight:400;opacity:.75;margin-bottom:6px}
.sky-foot{position:relative;display:grid;grid-template-columns:1.1fr 1fr auto;gap:4vw;align-items:end;margin-top:6.4vw;padding-top:26px;border-top:1px solid rgba(255,255,255,.4)}
.sky-lede{margin:0;font-family:Barlow,Impact,sans-serif;font-size:clamp(40px,4.4vw,76px);line-height:.88;letter-spacing:-.01em}
.sky-copy{margin:0;max-width:330px;font-size:14px;line-height:1.75;color:rgba(255,255,255,.9)}

/* Pill CTA with sliding arrow */
.cta{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:34px;padding:9px 9px 9px 28px;border-radius:999px;background:#fff;color:var(--ink);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.cta:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--ease)}
.cta:hover:before{transform:none}.cta:hover{color:#fff}.cta{transition:color .45s var(--ease)}
.cta-icon{position:relative;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;overflow:hidden;font-size:20px}
.cta-icon svg{position:absolute;left:50%;top:50%;margin:-.5em 0 0 -.5em;transition:transform .5s var(--ease)}
.cta-icon svg+svg{transform:translateX(-160%)}
.cta:hover .cta-icon svg:first-child{transform:translateX(160%)}
.cta--down .cta-icon svg+svg{transform:translateY(-160%)}.cta--down:hover .cta-icon svg:first-child{transform:translateY(160%)}.cta:hover .cta-icon svg+svg{transform:none}

/* Footer */
.footer{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);padding:72px var(--gutter) 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:4vw}
.footer-brand{display:flex;gap:16px;align-items:flex-start}
.footer-brand p{margin:0;font-size:11px;font-weight:700;letter-spacing:1.2px;line-height:1.6;text-transform:uppercase}
.footer-mark{width:22px!important;height:29px!important;color:var(--cream)}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-label{margin:0 0 8px;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:rgba(245,244,238,.45)}
.footer-col a{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:16px}
.footer-col a:after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.footer-col a:hover:after{transform:scaleX(1);transform-origin:left}
.inline-arrow{font-size:14px;transition:transform .35s var(--ease)}.footer-col a:hover .inline-arrow{transform:translateX(3px)}
.to-top{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:rgba(245,244,238,.6)}
.to-top-ring{display:grid;place-items:center;width:96px;height:96px;border:1px solid rgba(245,244,238,.25);border-radius:50%;font-size:24px;color:var(--cream);transition:background .4s var(--ease),color .4s var(--ease),border-color .4s}
.to-top-ring svg{transition:transform .5s var(--ease)}
.to-top:hover .to-top-ring{background:var(--cream);color:var(--ink);border-color:var(--cream)}.to-top:hover .to-top-ring svg{transform:translateY(-5px)}
.footer-bar{display:flex;justify-content:space-between;gap:20px;margin-top:90px;padding-top:20px;border-top:1px solid rgba(245,244,238,.16);font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(245,244,238,.55)}
.footer-bar time{color:var(--cream);font-variant-numeric:tabular-nums;margin-left:6px}
.wordmark{display:block;margin:4vw 0 -2.8vw;font-family:Barlow,Impact,sans-serif;font-size:39.8vw;line-height:.8;letter-spacing:-.025em;text-align:center;white-space:nowrap}
.wordmark>span{display:inline-flex}
.wordmark b{display:inline-block;font-weight:900;transform:translateY(60%);opacity:0;transition:transform 1.2s var(--ease),opacity 1.2s var(--ease),color .35s}
.wordmark b:nth-child(2){transition-delay:.06s,.06s,0s}.wordmark b:nth-child(3){transition-delay:.12s,.12s,0s}.wordmark b:nth-child(4){transition-delay:.18s,.18s,0s}.wordmark b:nth-child(5){transition-delay:.24s,.24s,0s}
.wordmark.visible b{transform:none;opacity:1}
.wordmark b:hover{color:var(--sky-2)}

@media(max-width:1000px){
  .callout{left:60%}.callout-line{flex-basis:4vw}
  .sky-foot{grid-template-columns:1fr 1fr}.sky-foot .cta{grid-column:1/-1;justify-self:start}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:50px}
}
@media(max-width:650px){
  .sky{padding:96px var(--gutter) 34px}
  .meta-row{font-size:8px}.meta-mid{display:none}
  .sky-stage{margin-top:9vw}
  .sky-title{font-size:28.5vw}
  .can{width:41vw;left:63%;top:54%}
  .callout{display:none}
  .sky-foot{grid-template-columns:1fr;gap:18px;margin-top:10vw}
  .sky-lede{font-size:13vw}
  .cta{width:100%;justify-content:space-between}
  .footer{padding-top:56px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .to-top{grid-column:1/-1;flex-direction:row;justify-self:start}.to-top-ring{width:64px;height:64px;font-size:20px}
  .footer-bar{flex-direction:column;gap:8px;margin-top:60px}
  .wordmark{margin-top:8vw;font-size:37.4vw;margin-bottom:-2.4vw}
}
@media(prefers-reduced-motion:reduce){.wordmark b{opacity:1!important;transform:none!important}}

/* Mobile: from the can close-up on, the frame is bright white, so the overlay
   UI goes ink. The finale is image only on phones. */
@media(max-width:650px){
  .scene-close,.stage-bottom,.header{transition:color .45s ease}
  .scene-finale{display:none}
  .stage.is-light .close-word{-webkit-text-stroke-color:rgba(21,26,32,.55)}
  .stage.is-light .close-caption{color:var(--ink)}
  .stage.is-light .stage-bottom{color:var(--ink)}
  .stage.is-light .chapter-line{background:rgba(21,26,32,.45)}
  .stage.is-light .progress-track{background:rgba(21,26,32,.12)}
  .stage.is-light .progress-track span{background:var(--ink)}
  .header.on-light:not(.dark){color:var(--ink)}
  .header.on-light:not(.dark) .motion-toggle{border-color:rgba(21,26,32,.3)}
}

/* Phones hold scrolling until the frame sequence has loaded (app.js). */
html.is-loading,html.is-loading body{overflow:hidden;overscroll-behavior:none}
html.is-loading .scroll-invitation{opacity:.45;pointer-events:none}

/* Phone loading screen: the claw fills from the bottom as the film loads,
   then the screen lifts away to reveal the opening. */
.preloader{display:none;position:fixed;inset:0;z-index:60;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:var(--ink);color:var(--white);--load:0%;transition:transform .95s cubic-bezier(.76,0,.24,1)}
html.has-preloader .preloader{display:flex}
.preloader.done{transform:translateY(-100%)}
.preloader-mark{position:relative;width:62px;height:80px;transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.preloader-mark svg{position:absolute;inset:0;width:100%;height:100%;fill:rgba(245,244,238,.14)}
.preloader-mark .preloader-fill{fill:var(--white);clip-path:inset(calc(100% - var(--load)) 0 0 0);transition:clip-path .35s ease}
.preloader.done .preloader-mark{transform:translateY(-24px) scale(.92)}
.preloader-count{margin:0;font-family:Barlow,Impact,sans-serif;font-size:40px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;min-width:3ch;text-align:center}
.preloader-label{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));margin:0;text-align:center;font-size:9px;font-weight:700;letter-spacing:2.2px;color:rgba(245,244,238,.55)}
.preloader-label span{color:#6fb0ee}
@media(prefers-reduced-motion:reduce){.preloader{transition:none}}