@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Manrope:wght@500;700&family=Instrument+Serif:ital@0;1&display=swap');

:root{color-scheme:dark;--white:#faf9f5;--font:'DM Sans',Arial,sans-serif;--serif:'Instrument Serif',Georgia,serif;--gutter:5.4vw}
*{box-sizing:border-box}
html{background:#303238;scroll-behavior:smooth}
body{margin:0;color:var(--white);font:1rem/1.6 var(--font);isolation:isolate}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:6px}
h1,h2,p{margin:0}
em{font-weight:400}
svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3}
.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}
.skip{position:fixed;top:-100px;left:24px;padding:10px 16px;background:#171d29;z-index:20}
.skip:focus{top:20px}
.header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:38px var(--gutter);z-index:5;pointer-events:none}
.header>*{pointer-events:auto}
.brand{font:700 27px/1.2 'Manrope',Arial,sans-serif;letter-spacing:-1.3px}
.brand span{font-weight:500;opacity:.82}
.access-btn{display:flex;align-items:center;gap:22px;background:transparent;border:0;padding:9px 0;font-size:.875rem;letter-spacing:.02em;min-height:44px}
.access-btn svg{transition:transform .25s}
.access-btn:hover svg{transform:translate(2px,-2px)}
main{outline:0}
.stage{position:relative;isolation:isolate}
.scene{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#3d4149}
.scene-frame{position:absolute;inset:0;transform-origin:50% 53%;will-change:transform}
.scene img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 51%;animation:image-arrive 1.4s ease-out both}
.scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,35,.34) 0%,rgba(15,22,35,.03) 26%,rgba(15,22,35,.07) 45%,rgba(15,22,35,.46) 100%)}
.scene-depth{position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,18,37,.82),rgba(12,28,52,.3) 62%,rgba(15,24,39,.12));opacity:0}
.scene-depth-end{position:absolute;inset:0;background:linear-gradient(265deg,rgba(8,18,37,.85),rgba(12,28,52,.3) 62%,rgba(15,24,39,.12));opacity:0}
.moment{position:relative;min-height:100svh;padding:140px var(--gutter) 100px;display:flex;align-items:flex-end}
.copy{position:relative}
h1,h2{font:400 clamp(5rem,13.5vw,13rem)/1.04 var(--serif);letter-spacing:-.035em;text-shadow:0 2px 25px #0000000c}
.line{display:block;overflow:hidden;padding:.07em .04em .11em;margin:-.07em -.04em -.11em}
.line>span{display:block;transform-origin:0 100%}
.origin-copy{padding-bottom:0}
.moment-origin .line>span{animation:title-arrive 1.1s .15s cubic-bezier(.16,1,.3,1) both}
.moment-thought{align-items:center}
.thought-copy h2{font-size:clamp(4.5rem,8.8vw,9.2rem);line-height:1.08}
.thought-mark{display:block;width:42px;height:1px;background:#ffffff70;margin-top:35px;transform-origin:left}
.moment-beyond{justify-content:flex-end;padding-bottom:15svh}
.beyond-copy{width:fit-content;padding-right:5vw}
.beyond-copy h2{font-size:clamp(5rem,10vw,10.8rem);line-height:1.03}
.signature{display:flex;align-items:center;gap:12px;margin-top:40px;font-size:.75rem;letter-spacing:.055em;color:#ffffffc2}
.signature>span[aria-hidden]{font-size:17px;color:#ffffff70}
.scroll-cue,.return-link{position:absolute;bottom:34px;display:flex;align-items:center;gap:15px;font-size:.6875rem;letter-spacing:.06em;min-height:44px}
.scroll-cue{left:var(--gutter)}
.cue-line{display:block;height:1px;width:42px;background:#ffffff70;transition:width .4s}
.scroll-cue:hover .cue-line{width:64px}
.scroll-cue svg{width:13px;height:13px}
.return-link{right:var(--gutter);color:#ffffffba}
.return-link svg{width:13px;height:13px;transition:transform .25s}
.return-link:hover svg{transform:translateY(-3px)}
.progress{position:fixed;right:calc(var(--gutter) - 17px);top:50%;transform:translateY(-50%);z-index:5;display:none;flex-direction:column}
.progress a{width:44px;height:34px;display:flex;align-items:center;justify-content:center}
.progress span{display:block;width:2px;height:13px;background:#ffffff40;transition:height .4s,background .4s}
.progress a[aria-current] span{height:24px;background:#fff}
.progress a:hover span{background:#fff}

/* Native scrolling drives one continuous image and three quiet compositions. */
.motion .journey{height:340svh}
.motion .stage{position:sticky;top:0;height:100svh;overflow:hidden}
.motion .scene{position:absolute}
.motion .moment{position:absolute;inset:0;height:100%;min-height:0;opacity:var(--opacity,0);pointer-events:none;will-change:opacity}
.motion .moment-origin{--opacity:1}
.motion .moment a{pointer-events:auto}
.motion .moment[inert] a{pointer-events:none}
.motion .line>span{transform:translate3d(0,var(--shift,0%),0);will-change:transform}
.motion .moment-origin .line>span{transform:none}
.motion .signature{opacity:var(--detail-opacity,0);transform:translateY(var(--detail-shift,12px))}
.motion .thought-mark{transform:scaleX(var(--detail-opacity,0))}
.motion .progress{display:flex}

/* Readable, ordinary page flow is also the no-script / reduced-motion version. */
html:not(.motion) .moment-thought{background:linear-gradient(90deg,#0f1d35ad,#0f1d3530)}
html:not(.motion) .moment-beyond{background:linear-gradient(90deg,#0f1d3530,#0f1d3580)}

dialog{color:var(--white);background:#202731;border:1px solid #ffffff25;width:min(480px,calc(100% - 36px));max-height:90svh;padding:0;border-radius:2px;box-shadow:0 30px 100px #0004}
dialog::backdrop{background:#17202c75;backdrop-filter:blur(12px)}
.dialog-inner{position:relative;padding:64px 38px 38px}
.close-btn{position:absolute;right:16px;top:14px;background:transparent;border:0;width:44px;height:44px;font-size:28px;line-height:1}
.dialog-inner h2{font:400 3.75rem/1.1 var(--serif);letter-spacing:-.02em;margin-bottom:22px}
.dialog-inner p{font-size:1rem;line-height:1.7;color:#c9cdd4;max-width:310px}
.return-btn{margin-top:35px;display:flex;gap:35px;align-items:center;font-size:.875rem;border:0;border-bottom:1px solid #ffffff55;background:transparent;padding:0 0 8px;min-height:44px}
.return-btn span{font-size:20px}
.modal-open{overflow:hidden}
@keyframes image-arrive{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@keyframes title-arrive{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:translateY(0)}}

@media(min-width:1600px){.moment-origin{padding-bottom:11svh}}
@media(max-width:700px){
  :root{--gutter:25px}
  .header{padding:24px var(--gutter)}
  .brand{font-size:25px}
  .access-btn{gap:15px}
  .moment{padding:125px var(--gutter) 100px}
  h1{font-size:clamp(4.5rem,16vw,7.5rem);line-height:1.1}
  .thought-copy h2{font-size:clamp(3.65rem,12.8vw,6rem);line-height:1.08}
  .moment-thought{align-items:center}
  .moment-beyond{justify-content:flex-start;padding-bottom:20svh}
  .beyond-copy{padding:0}
  .beyond-copy h2{font-size:clamp(4rem,14.6vw,7rem);line-height:1.08}
  .signature{font-size:.625rem;letter-spacing:.03em;gap:9px;margin-top:28px}
  .scene img{object-position:49% 50%}
  .scene-shade{background:linear-gradient(180deg,#0f162354 0%,#0f162305 29%,#0f16230d 45%,#0f16238a 100%)}
  .scroll-cue,.return-link{bottom:max(20px,env(safe-area-inset-bottom))}
  .progress{right:5px;top:auto;bottom:29px;transform:none;flex-direction:row;gap:0}
  .progress a{width:25px;height:25px}
  .progress span{width:12px;height:2px;transition:width .4s,background .4s}
  .progress a[aria-current] span{height:2px;width:20px}
  .return-link{left:var(--gutter);right:auto}
  .dialog-inner{padding:63px 28px 32px}
}
@media(max-width:350px){:root{--gutter:20px}h1{font-size:4rem}.thought-copy h2{font-size:3.3rem}.beyond-copy h2{font-size:3.7rem}.signature{gap:7px;font-size:.57rem}.access-btn{gap:10px}}
@media(max-height:550px) and (min-width:701px){.header{padding-block:16px}.moment{padding-top:90px;padding-bottom:65px}h1{font-size:6.5rem}.thought-copy h2,.beyond-copy h2{font-size:4.5rem}.signature{margin-top:16px}.scroll-cue,.return-link{bottom:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.scene-frame{will-change:auto}.moment-thought .thought-copy,.moment-beyond .beyond-copy{padding-block:40px}}