:root{
  --bg:#000;--ink:#f5f5f7;--mute:#86868b;--line:rgba(255,255,255,.12);
  --gold:#d9b27a;--gold-2:#f3dcb0;--glass:rgba(22,22,24,.62);
  --ease:cubic-bezier(.2,.7,.1,1);--pad:clamp(16px,5vw,64px);
  --display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter Tight","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--display);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--bg);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#000}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* film grain over everything */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:100;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);
  background:rgba(0,0,0,.4);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);
  transform:translateY(-100%);transition:transform .9s var(--ease) 1.6s}
.loaded .nav{transform:none}
.nav .brand{font-weight:600;letter-spacing:.32em;font-size:12px;text-transform:uppercase}
.nav .brand b{color:var(--gold);font-weight:600}
.nav ul{display:flex;gap:28px;list-style:none;font-size:12px;color:#d2d2d7}
.nav ul a:hover{color:#fff}
.nav .cta{font-size:12px;padding:6px 14px;border-radius:980px;background:var(--ink);color:#000;font-weight:500}
@media(max-width:820px){.nav ul{display:none}}

/* type */
.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600}
.h-xl{font-size:clamp(56px,13vw,200px);line-height:.88;letter-spacing:-.045em;font-weight:700}
.h-l{font-size:clamp(40px,7vw,96px);line-height:.95;letter-spacing:-.035em;font-weight:700}
.h-m{font-size:clamp(28px,4vw,56px);line-height:1.05;letter-spacing:-.025em;font-weight:600}
.lead{font-size:clamp(19px,1.8vw,24px);line-height:1.4;color:var(--mute);max-width:40ch;letter-spacing:-.01em}
.lead strong{color:var(--ink);font-weight:600}
.gold-text{background:linear-gradient(100deg,#8a6a3a 0%,var(--gold) 30%,#fff3dc 50%,var(--gold) 70%,#8a6a3a 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s var(--ease) infinite}
@keyframes sheen{0%{background-position:100% 0}60%,100%{background-position:-100% 0}}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:980px;font-size:16px;font-weight:500;transition:transform .4s var(--ease),background .3s}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1206}
.btn-ghost{border:1px solid rgba(255,255,255,.3)}
.btn:hover{transform:scale(1.04)}

/* hero */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:grid;place-items:end start;padding:0 var(--pad) 12vh}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 3.2s var(--ease)}
.loaded .hero video{transform:scale(1)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 80% at 30% 100%,rgba(0,0,0,.75),transparent 60%),linear-gradient(0deg,#000 0,transparent 30%)}
.bar{position:absolute;left:0;right:0;height:50vh;background:#000;z-index:3;transition:transform 1.6s cubic-bezier(.7,0,.2,1) .2s}
.bar.t{top:0}.bar.b{bottom:0}
.loaded .bar.t{transform:translateY(-88%)}.loaded .bar.b{transform:translateY(88%)}
.hero-copy{position:relative;z-index:2;display:grid;gap:22px}
.hero-copy>*{opacity:0;transform:translateY(40px);filter:blur(12px);transition:all 1.4s var(--ease)}
.loaded .hero-copy>*{opacity:1;transform:none;filter:none}
.loaded .hero-copy>*:nth-child(1){transition-delay:1.2s}.loaded .hero-copy>*:nth-child(2){transition-delay:1.4s}
.loaded .hero-copy>*:nth-child(3){transition-delay:1.7s}.loaded .hero-copy>*:nth-child(4){transition-delay:1.9s}
.hero .row{display:flex;gap:12px;flex-wrap:wrap}
.scroll-cue{position:absolute;z-index:2;bottom:28px;left:50%;width:1px;height:56px;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* sections */
section{position:relative}
.wrap{padding:clamp(100px,16vh,180px) var(--pad);max-width:1440px;margin:0 auto}
.reveal{opacity:0;transform:translateY(60px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* scroll-lit statement */
.statement p{font-size:clamp(30px,4.6vw,68px);line-height:1.12;letter-spacing:-.03em;font-weight:600;max-width:22ch}
.statement .w{color:#2a2a2c;transition:color .4s}
.statement .w.on{color:var(--ink)}
.statement .w.g.on{color:var(--gold)}

/* expanding image */
.expand{height:260vh}
.expand .stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.expand .frame{width:calc(46% + 54% * var(--p,0));height:calc(52% + 48% * var(--p,0));border-radius:calc(28px * (1 - var(--p,0)));overflow:hidden;position:relative}
.expand img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.25 - .25 * var(--p,0)))}
.expand .cap{position:absolute;inset:auto var(--pad) 10vh;z-index:2;opacity:calc(var(--p,0) * 2 - 1)}
.expand .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 50%)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line);margin-top:72px}
.stats div{background:#000;padding:44px 8px}
.stats b{display:block;font-size:clamp(44px,6vw,88px);font-weight:700;letter-spacing:-.04em;line-height:1}
.stats span{color:var(--mute);font-size:14px}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* film */
.film{background:#000}
.film .screen{position:relative;aspect-ratio:2.39/1;overflow:hidden;border-radius:18px;margin-top:56px;box-shadow:0 60px 160px -40px rgba(217,178,122,.35)}
.film video{width:100%;height:100%;object-fit:cover}

/* horizontal collections */
.hscroll{height:var(--h,300vh)}
.hscroll .stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hscroll .track{display:flex;gap:28px;padding:0 var(--pad);will-change:transform;margin-top:44px}
.card{flex:0 0 min(78vw,520px);aspect-ratio:4/5;border-radius:24px;overflow:hidden;position:relative;background:#111;isolation:isolate}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform 1.4s var(--ease)}
.card:hover img{transform:scale(1.06)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 55%)}
.card .in{position:absolute;inset:auto 28px 28px}
.card h3{font-size:30px;letter-spacing:-.02em;font-weight:600;margin:6px 0}
.card p{color:#c7c7cc;font-size:15px}
.card .tag{display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:56px}
.tile{background:linear-gradient(160deg,#141416,#0a0a0b);border:1px solid var(--line);border-radius:28px;padding:36px;position:relative;overflow:hidden;min-height:260px}
.tile.img{padding:0}.tile.img img{width:100%;height:100%;object-fit:cover}
.tile h3{font-size:28px;letter-spacing:-.02em;margin-top:10px}
.tile p{color:var(--mute);margin-top:10px}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}
@media(max-width:900px){.bento>*{grid-column:span 6}}

/* search / lead */
.panel{background:var(--glass);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4vw,48px);margin-top:48px}
form{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
form .full{grid-column:1/-1}form .half{grid-column:span 2}
@media(max-width:820px){form>*{grid-column:1/-1!important}}
label{font-size:12px;color:var(--mute);display:grid;gap:6px;letter-spacing:.04em}
input,select,textarea{font:inherit;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:14px 16px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
.seg{display:flex;gap:6px;background:rgba(255,255,255,.06);border-radius:14px;padding:4px}
.seg label{flex:1;cursor:pointer}.seg input{position:absolute;opacity:0;width:1px}
.seg span{display:block;text-align:center;padding:10px;border-radius:10px;color:#d2d2d7;font-size:14px;transition:.3s}
.seg input:checked+span{background:var(--ink);color:#000}
.seg input:focus-visible+span{outline:2px solid var(--gold)}
.hp{position:absolute;left:-9999px}
.msg{grid-column:1/-1;color:var(--gold);min-height:1.5em}

/* about */
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:center}
.about .portrait{border-radius:28px;overflow:hidden;aspect-ratio:7/10;position:relative}
.about .portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05)}
@media(max-width:820px){.about{grid-template-columns:1fr}}

/* footer */
footer{border-top:1px solid var(--line);padding:56px var(--pad) 40px;color:var(--mute);font-size:12px;line-height:1.7}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;max-width:1440px;margin:0 auto 40px}
footer h4{color:var(--ink);font-size:12px;margin-bottom:10px;font-weight:600}
footer a:hover{color:var(--ink)}
footer .legal{max-width:1440px;margin:0 auto;border-top:1px solid var(--line);padding-top:20px}
@media(max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}

/* page hero (sub pages) */
.phero{position:relative;height:88svh;min-height:520px;display:grid;align-items:end;overflow:hidden;padding:0 var(--pad) 10vh}
.phero img,.phero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 18s var(--ease) both}
@keyframes kb{from{transform:scale(1.15)}to{transform:scale(1)}}
.phero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#000 2%,rgba(0,0,0,.2) 60%,rgba(0,0,0,.5))}
.phero>div{position:relative;z-index:2;display:grid;gap:18px}
.faq details{border-bottom:1px solid var(--line);padding:26px 0}
.faq summary{font-size:22px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;letter-spacing:-.01em}
.faq summary::after{content:"+";color:var(--gold);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--mute);margin-top:12px;max-width:70ch}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.hero-copy>*{opacity:1;transform:none;filter:none}
  .bar{display:none}.nav{transform:none}
}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--gold);color:#000;padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}

/* studio-logo intro (once per session) */
.intro{position:fixed;inset:0;z-index:300;background:#000;display:grid;place-items:center;transition:opacity 1.2s var(--ease),visibility 1.2s}
.intro video{width:100%;height:100%;object-fit:cover}
.intro button{position:absolute;right:24px;bottom:24px;background:none;border:1px solid rgba(255,255,255,.3);color:#d2d2d7;border-radius:980px;padding:8px 16px;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.intro.done{opacity:0;visibility:hidden}

/* scroll-scrubbed turntable */
.scrub{height:400vh}
.scrub .stick{position:sticky;top:0;height:100svh;overflow:hidden}
.scrub canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scrub .head{position:absolute;top:14vh;left:0;right:0;text-align:center;z-index:2;padding:0 var(--pad);text-shadow:0 4px 40px #000,0 0 80px #000;transition:opacity .3s}
.scrub .call{text-shadow:0 2px 24px #000}
.scrub .call{position:absolute;z-index:2;max-width:300px;opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.scrub .call.on{opacity:1;transform:none}
.scrub .call b{display:block;font-size:clamp(40px,5vw,72px);letter-spacing:-.04em;line-height:1;font-weight:700}
.scrub .call span{color:var(--mute)}
.scrub .c1{left:var(--pad);bottom:16vh}.scrub .c2{right:var(--pad);bottom:16vh;text-align:right}.scrub .c3{left:var(--pad);top:40vh}
.scrub .stick::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000 0,transparent 25%,transparent 75%,#000 100%);pointer-events:none}

/* gold spotlight that follows the pointer on cards/tiles */
.card,.tile{--mx:50%;--my:50%}
.card::before,.tile::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(243,220,176,.18),transparent 60%)}
.card:hover::before,.tile:hover::before{opacity:1}

/* ---------- mobile ---------- */
.burger{display:none;background:none;border:0;width:40px;height:40px;position:relative;cursor:pointer;margin-left:8px}
.burger span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform .5s var(--ease)}
.burger span:first-child{top:16px}.burger span:last-child{top:23px}
.nav-open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}.nav-open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.92);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 28px}
.mmenu[hidden]{display:none}
.mmenu a{font-size:40px;font-weight:700;letter-spacing:-.03em;opacity:0;transform:translateY(20px);animation:min .7s var(--ease) forwards}
.mmenu a:nth-child(2){animation-delay:.05s}.mmenu a:nth-child(3){animation-delay:.1s}.mmenu a:nth-child(4){animation-delay:.15s}.mmenu a:nth-child(5){animation-delay:.2s}
@keyframes min{to{opacity:1;transform:none}}
.mbar{display:none}
@media(max-width:820px){
  .burger{display:block}
  .nav .cta{display:none}
  .mbar{display:flex;position:fixed;z-index:44;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));gap:6px;padding:6px;border-radius:980px;
    background:rgba(28,28,30,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--line);
    transform:translateY(140%);transition:transform .8s var(--ease) 2.2s}
  .loaded .mbar{transform:none}
  .mbar a{flex:1;text-align:center;padding:12px 0;border-radius:980px;font-size:15px;font-weight:500}
  .mbar a.gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1206}
  footer{padding-bottom:110px}
  .hero{padding-bottom:calc(14vh + 60px)}
  .scrub .call{max-width:70vw}.scrub .c2{bottom:calc(16vh + 70px)}.scrub .c1{bottom:calc(16vh + 70px)}
}
.intro::after{content:"";position:absolute;inset:auto 0 0;height:35%;background:linear-gradient(transparent,#000);pointer-events:none}