:root{--bg:#0e0d0b;--ink:#f3efe6;--mut:#a39e92;--acc:#ff7a45;--sans:"Manrope",system-ui,sans-serif;--mono:"DM Mono",ui-monospace,monospace;--serif:"Instrument Serif",Georgia,serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);scroll-behavior:smooth}
body{color:var(--ink);font:400 17px/1.65 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--acc);font-size:1.1em}
.bar{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;z-index:60}
header{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;padding:22px 5vw;z-index:50;font:13px var(--mono);mix-blend-mode:difference;color:#fff}
header nav{display:flex;gap:26px}
header a:hover{text-decoration:underline;text-underline-offset:5px}
.tag{font:12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}

/* pinned scenes */
.stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#2a241b,var(--bg))}
.hero{height:220vh}.story{height:520vh}
video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dim{position:absolute;inset:0;background:linear-gradient(180deg,#0e0d0b66,#0e0d0bcc)}
.hero video{transform:scale(calc(1 + var(--p,0)*.18));filter:brightness(calc(.8 - var(--p,0)*.45))}
.hero-copy{position:absolute;left:5vw;right:5vw;bottom:12vh;max-width:15em;transform:translateY(calc(var(--p,0)*-90px));opacity:calc(1 - var(--p,0)*1.7)}
.hero h1{font-size:clamp(40px,7.4vw,108px);line-height:.98;letter-spacing:-.05em;font-weight:800;margin:18px 0 22px}
.hero h1 em{font-size:1.12em;letter-spacing:-.02em}
.sub{max-width:30em;font-size:clamp(16px,1.5vw,20px);color:#e3ded2}

/* story */
.story video{filter:brightness(.55) saturate(.8);transform:scale(calc(1.14 + var(--p,0)*.06)) translate(calc(var(--sx,0)*1%),calc(var(--sy,0)*1%));transition:transform 1.6s var(--ease)}
.ch{position:absolute;inset:0;display:grid;align-content:center;padding:0 8vw;opacity:0;transition:opacity .6s}
.ch.on{opacity:1}
.ch p{font-size:clamp(26px,4.8vw,66px);line-height:1.14;letter-spacing:-.035em;font-weight:600;max-width:17em}
.ch em{font-size:1.1em}
.w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);transition:opacity .7s,transform .7s,filter .7s}
.ch.on .w{opacity:1;transform:none;filter:none}
.ch:not(.on) .w{transition-delay:0s!important}
.ticks{position:absolute;left:8vw;bottom:calc(8vh + 18px);display:flex;gap:8px}
.ticks span{display:block;width:14px;height:3px;border-radius:2px;background:#ffffff40;transition:width .6s var(--ease),background .4s}
.ticks span.done{background:#ffffffa0}
.ticks span.on{width:44px;background:var(--acc)}
.line{position:absolute;left:8vw;right:8vw;bottom:8vh;height:1px;background:#ffffff33}
.line i{display:block;height:100%;background:var(--acc);transform:scaleX(var(--p,0));transform-origin:0 50%}

/* sections */
.pad{padding:18vh 5vw}
h2{font-size:clamp(32px,5.4vw,76px);line-height:1.02;letter-spacing:-.045em;font-weight:800;margin:14px 0 26px;max-width:14em}
.lead{max-width:36em;color:var(--mut);font-size:clamp(16px,1.4vw,19px)}
.lead.small{margin-top:28px;font-size:15px}

/* client page frame */
.stage{perspective:1600px;margin-top:9vh}
.frame{--fp:1;display:flex;flex-direction:column;height:min(82vh,780px);border:1px solid #ffffff26;border-radius:14px;overflow:hidden;background:#1a1814;transform-origin:50% 100%;transform:rotateX(calc((1 - var(--fp))*20deg)) scale(calc(.84 + var(--fp)*.16));opacity:calc(.2 + var(--fp)*.8);box-shadow:0 60px 120px -30px #000c,0 20px 40px -20px #000a}
.chrome{display:flex;align-items:center;gap:7px;height:38px;flex:none;padding:0 14px;background:#221f1a;border-bottom:1px solid #ffffff1a;font:11px var(--mono);color:var(--mut)}
.chrome i{width:9px;height:9px;border-radius:50%;background:#ffffff2e}
.chrome span{margin-left:12px;padding:3px 14px;border-radius:99px;background:#ffffff0f}
iframe{width:100%;flex:1;min-height:0;border:0;display:block;background:#fff}
.more{margin-top:24px}
.more a{border-bottom:1px solid var(--acc);padding-bottom:3px}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:8vh}
.step{padding-top:24px;position:relative}
.step:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#ffffff26}
.step:after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--ease) var(--d)}
.step.in:after{transform:none}
.step h3{font-size:20px;letter-spacing:-.02em;margin-bottom:8px;transition:color .3s,transform .45s var(--ease)}
.step p{color:var(--mut);font-size:15px;transition:color .3s}
.step:hover h3{color:var(--acc);transform:translateX(7px)}
.step:hover p{color:var(--ink)}
.step:hover:before{background:#ffffff55}

/* contact */
.contact{--k:1;background:color-mix(in srgb,var(--ink) calc(var(--k)*100%),var(--bg));color:color-mix(in srgb,#16140f calc(var(--k)*100%),var(--ink));margin-top:6vh}
.contact .lead{color:color-mix(in srgb,#4d493f calc(var(--k)*100%),var(--mut))}
.mail{display:inline-block;margin-top:6vh;font-size:clamp(20px,5.4vw,84px);line-height:1.05;font-weight:800;letter-spacing:-.045em;overflow-wrap:anywhere;background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 .07em no-repeat;transition:background-size .5s var(--ease),color .3s}
.mail:hover{background-size:100% .07em;color:var(--acc)}
footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 5vw;font:12px var(--mono);color:var(--mut)}
footer a:hover{color:var(--ink)}

/* reveal */
.js [data-r]{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s var(--ease)}
.js [data-r].in{opacity:1;transform:none}
.js .step[data-r]{transition-delay:var(--d)}

@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}.frame{height:72vh}.pad{padding:14vh 6vw}}
@media(max-width:520px){
  .steps{grid-template-columns:1fr;gap:26px}
  header{padding:16px 6vw}header nav{gap:16px}
  .hero-copy{bottom:9vh}
  .ch{padding:0 7vw}.ticks{left:7vw}.line{left:7vw;right:7vw}
  .chrome span{display:none}
  .frame{height:68vh;border-radius:10px}
  footer{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.track{height:auto!important}.stick{position:relative;height:auto;min-height:80vh}.story .stick{padding:14vh 0}.ch{position:relative;inset:auto;opacity:1;padding:5vh 8vw}.w{opacity:1;transform:none;filter:none;transition:none}.line,.ticks{display:none}.js [data-r]{opacity:1;transform:none;transition:none}.step:after{transform:none;transition:none}.hero-copy{position:relative;left:auto;bottom:auto;padding:22vh 5vw 8vh;opacity:1;transform:none}.hero video,.story video{transform:none;transition:none}.frame{transform:none;opacity:1}.step h3{transition:none}}