:root{
  --bg:#0C0C0B;
  --bg-2:#141412;
  --line:rgba(237,232,223,.14);
  --fg:#EDE8DF;
  --fg-2:rgba(237,232,223,.62);
  --mute:rgba(237,232,223,.38);
  --acc:#D9532B;
  --grot:"Bricolage Grotesque",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.76,0,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--grot);font-weight:300;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none}
@media (hover:none){body{cursor:auto}.cursor{display:none}}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
h1,h2,h3{font-weight:400;line-height:.95;letter-spacing:-.03em}
.mono,.nav__meta,.hero__tag,.works__label,.works__of,.manifest__label,.process__label,.reel__label,.studio__label,.press__label,.pstep__n,.st__l,.award span:first-child,.award span:last-child,.contact__cols span,.footer,.loader__coords,.work-text p:first-of-type,figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad)}
.loader__coords{display:flex;gap:32px;color:var(--fg-2);margin-bottom:18px;font-size:13px}
.loader__line{height:1px;background:var(--line);margin-bottom:22px}
.loader__line i{display:block;height:100%;width:0;background:var(--fg)}
.loader__name{font-size:clamp(64px,14vw,200px);line-height:.85;letter-spacing:-.05em;font-weight:300;overflow:hidden}

/* cursor */
.cursor{position:fixed;left:0;top:0;z-index:99;pointer-events:none;width:0;height:0;transform:translate(0,0)}
.cursor i{position:absolute;left:0;top:0;background:var(--fg);transition:width .3s var(--ease),height .3s var(--ease),transform .3s var(--ease)}
.cursor i:first-child{width:18px;height:1px;transform:translate(-50%,-50%)}
.cursor i:nth-child(2){width:1px;height:18px;transform:translate(-50%,-50%)}
.cursor span{position:absolute;left:14px;top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .2s}
.cursor.is-hover i:first-child{width:34px}
.cursor.is-hover i:nth-child(2){height:34px}
.cursor.is-hover span{opacity:1}
.cursor.is-acc i{background:var(--acc)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px var(--pad);transform:translateY(-100%);mix-blend-mode:difference}
.nav__logo{font-size:22px;letter-spacing:-.04em;font-weight:500}
.nav__meta{display:flex;gap:22px;color:var(--fg-2);justify-self:center}
.nav__links{display:flex;gap:28px;justify-self:end;font-size:13px}
.nav__links a{position:relative}
.nav__links a::before{content:"";position:absolute;left:-10px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--acc);transform:scale(0);transition:transform .3s var(--ease)}
.nav__links a:hover::before{transform:scale(1)}
.nav__burger{display:none;background:none;border:0;width:36px;height:36px;justify-self:end;position:relative;cursor:pointer}
.nav__burger i{position:absolute;left:8px;right:8px;height:1px;background:var(--fg)}
.nav__burger i:first-child{top:14px}.nav__burger i:last-child{top:21px}
@media (max-width:900px){.nav{grid-template-columns:1fr 1fr}.nav__meta,.nav__links{display:none}.nav__burger{display:block}}

/* hero */
.hero{position:relative;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:110px var(--pad) 40px}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__video{width:100%;height:100%;object-fit:cover;filter:brightness(.72) contrast(1.05)}
.hero__grain{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(12,12,11,.85),rgba(12,12,11,.15) 60%),linear-gradient(180deg,rgba(12,12,11,.5),transparent 30%)}
.hero__top,.hero__bottom,.hero__title{position:relative;z-index:2}
.hero__tag{display:flex;gap:26px;color:var(--fg-2)}
.hero__tag span{opacity:0}
.hero__title{font-size:clamp(90px,19vw,300px);line-height:.8;letter-spacing:-.06em;font-weight:300;margin:auto 0 0 -.04em;-webkit-text-stroke:1px var(--fg);color:transparent;overflow:hidden}
.hero__title span{display:block;transform:translateY(105%)}
.hero__bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:28px}
.hero__lead{max-width:38ch;font-size:clamp(16px,1.5vw,22px);line-height:1.35;color:var(--fg-2);opacity:0}
.hero__lead em{color:var(--fg);font-size:1.12em}
.hero__cta{display:inline-flex;align-items:center;gap:16px;font-size:13px;letter-spacing:.02em;border:1px solid var(--line);padding:16px 22px;border-radius:999px;opacity:0;white-space:nowrap;transition:border-color .4s}
.hero__cta:hover{border-color:var(--fg)}
.hero__cta svg{width:18px;height:18px}
@media (max-width:900px){.hero{padding-top:90px}.hero__bottom{flex-direction:column;align-items:flex-start}.hero__tag span:nth-child(2){display:none}}

/* works */
.works{position:relative;height:500vh}
.works__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.works__media{position:absolute;inset:0}
.work-img{position:absolute;inset:0;clip-path:inset(100% 0 0 0)}
.work-img.is-active{clip-path:inset(0 0 0 0)}
.work-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
.works__ui{position:absolute;inset:0;padding:110px var(--pad) 40px;display:grid;grid-template-rows:auto 1fr auto;z-index:2}
.works__label{color:var(--fg-2)}
.works__counter{align-self:end;display:flex;align-items:baseline;gap:14px;position:absolute;right:var(--pad);top:110px}
.works__idx{font-size:clamp(64px,10vw,160px);line-height:.8;letter-spacing:-.05em;font-weight:300;overflow:hidden;height:.85em;display:block}
.works__of{color:var(--fg-2);font-size:13px}
.works__info{position:relative;align-self:end;max-width:640px;min-height:220px}
.work-text{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(14px)}
.work-text.is-active{opacity:1;transform:none}
.work-text h2{font-size:clamp(40px,6vw,96px);margin-bottom:16px}
.work-text p:first-of-type{color:var(--fg-2);margin-bottom:14px}
.work-text p:last-child{font-size:clamp(15px,1.2vw,18px);line-height:1.45;color:var(--fg-2);max-width:44ch}
.works__bar{height:1px;background:var(--line);margin-top:34px}
.works__bar i{display:block;height:100%;width:0;background:var(--fg)}
@media (max-width:900px){.works{height:420vh}.works__counter{top:90px}.work-text h2{font-size:44px}.work-text p:last-child{font-size:14px}}

/* manifest */
.manifest{position:relative;padding:clamp(120px,18vw,260px) var(--pad);overflow:hidden;border-top:1px solid var(--line)}
.manifest__ghost{position:absolute;right:-.05em;top:0;font-size:clamp(200px,40vw,640px);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--line);pointer-events:none;user-select:none}
.manifest__inner{position:relative;max-width:1100px}
.manifest__label{color:var(--acc);margin-bottom:40px}
.manifest__line{font-size:clamp(30px,4.4vw,72px);line-height:1.05;letter-spacing:-.03em;overflow:hidden;padding-bottom:.08em}
.manifest__line span{display:block;transform:translateY(110%)}
.manifest__line em{color:var(--fg);font-size:1.08em}
.manifest__foot{margin-top:60px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--fg-2);max-width:40ch;line-height:1.7}

/* process */
.process{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);padding:0 var(--pad);border-top:1px solid var(--line)}
.process__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:60px 0}
.process__label{color:var(--fg-2);margin-bottom:28px}
.process__plan{width:min(100%,520px);aspect-ratio:1}
.plan__line{stroke:var(--fg);stroke-width:1.2;stroke-dasharray:2400;stroke-dashoffset:2400}
.plan__dot{fill:var(--acc);opacity:0}
.plan__txt{fill:var(--fg-2);font-family:var(--mono);font-size:11px;letter-spacing:.1em;opacity:0}
.process__steps{list-style:none;padding:34vh 0 30vh}
.pstep{padding:44px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:60px 1fr;gap:14px;opacity:.28;transition:opacity .6s}
.pstep.is-on{opacity:1}
.pstep__n{color:var(--acc);padding-top:10px;grid-row:span 2}.pstep h3,.pstep p{grid-column:2}
.pstep h3{font-size:clamp(30px,3.4vw,52px);margin-bottom:16px}
.pstep p{font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:var(--fg-2);max-width:40ch}
@media (max-width:900px){.process{grid-template-columns:1fr}.process__sticky{position:relative;height:auto;padding:60px 0 0}.process__steps{padding:20px 0 60px}}

/* reel */
.reel{position:relative;height:220vh}
.reel__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.reel__frame{width:40vw;aspect-ratio:16/9;overflow:hidden;will-change:width,height}
.reel__frame video{width:100%;height:100%;object-fit:cover}
.reel__text{position:absolute;left:var(--pad);bottom:40px;z-index:2;opacity:0}
.reel__label{color:var(--fg-2);margin-bottom:14px}
.reel__title{font-size:clamp(40px,6vw,96px)}
@media (max-width:900px){.reel__frame{width:80vw}}

/* studio */
.studio{position:relative;padding:clamp(100px,14vw,200px) var(--pad);border-top:1px solid var(--line)}
.studio__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:60px}
.studio__label{color:var(--fg-2)}
.studio__title{font-size:clamp(36px,5vw,80px);text-align:right}
.studio__photo{aspect-ratio:21/9;overflow:hidden;clip-path:inset(0 0 100% 0)}
.studio__photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.studio__stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);margin-top:60px}
.st{padding:34px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.st__n{font-size:clamp(48px,6vw,96px);line-height:.9;letter-spacing:-.04em;font-weight:300}
.st__l{color:var(--fg-2)}
.awards{list-style:none;margin-top:100px}
.award{display:grid;grid-template-columns:100px 1fr 140px;gap:20px;padding:26px 0;border-top:1px solid var(--line);align-items:center;transition:padding .4s var(--ease)}
.award:last-child{border-bottom:1px solid var(--line)}
.award span:nth-child(2){font-size:clamp(20px,2.4vw,36px);letter-spacing:-.02em}
.award span:first-child{color:var(--fg-2)}
.award span:last-child{text-align:right;color:var(--acc)}
.award:hover{padding-left:20px}
.awards__img{position:fixed;left:0;top:0;width:280px;aspect-ratio:3/4;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) rotate(-4deg);overflow:hidden}
.awards__img img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.studio__head{flex-direction:column;align-items:flex-start}.studio__title{text-align:left}.studio__stats{grid-template-columns:1fr 1fr}.award{grid-template-columns:60px 1fr;gap:10px}.award span:last-child{grid-column:2;text-align:left}.awards__img{display:none}}

/* press */
.press{padding:0 var(--pad) clamp(100px,14vw,200px)}
.press__label{color:var(--fg-2);margin-bottom:30px}
.press__row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.press__tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2);clip-path:inset(0 0 100% 0)}
.press__tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.85);transform:scale(1.12)}
.press__tile figcaption{position:absolute;left:14px;bottom:14px;background:rgba(12,12,11,.7);padding:6px 10px;color:var(--fg)}
@media (max-width:900px){.press__row{grid-template-columns:1fr}.press__tile{aspect-ratio:16/10}}

/* contact */
.contact{border-top:1px solid var(--line);padding:60px 0 100px;overflow:hidden}
.contact__marquee{white-space:nowrap;overflow:hidden;margin-bottom:60px}
.contact__marquee div{display:flex;gap:.3em;width:max-content}
.contact__marquee span{font-size:clamp(70px,14vw,220px);line-height:.9;letter-spacing:-.05em;font-weight:300;padding-right:.3em}
.contact__marquee span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--fg)}
.contact__inner{padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact__mail{font-size:clamp(28px,4vw,64px);letter-spacing:-.03em;display:inline-block;border-bottom:1px solid var(--fg);padding-bottom:6px}
.contact__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;font-size:15px;line-height:1.5;color:var(--fg-2)}
.contact__cols span{display:block;color:var(--mute);margin-bottom:10px}
@media (max-width:900px){.contact__inner{grid-template-columns:1fr}.contact__cols{grid-template-columns:1fr;gap:26px}}

/* footer */
.footer{display:flex;justify-content:space-between;padding:26px var(--pad);border-top:1px solid var(--line);color:var(--mute)}
@media (max-width:900px){.footer{flex-direction:column;gap:8px}}

@media (prefers-reduced-motion:reduce){
  .hero__title span,.manifest__line span{transform:none}
  .hero__tag span,.hero__lead,.hero__cta,.reel__text{opacity:1}
}