/* ============================================================
   FIFTY — a design studio for the first fifty milliseconds
   ============================================================ */
:root{
  --bg:#0b0b0b;
  --bg-2:#131312;
  --fg:#f4f3ee;
  --mute:#8f8f8a;
  --dim:#5c5c58;
  --line:rgba(244,243,238,.14);
  --line-2:rgba(244,243,238,.26);
  --accent:#ff6b35;
  --pad:clamp(14px,1.6vw,24px);
  --gap:clamp(12px,1.4vw,20px);
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.77,0,.18,1);
  --out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.45;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body.locked{overflow:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.hide{display:none!important}

/* ---------- type ---------- */
.mono{font-family:var(--mono);font-size:12.5px;line-height:1.35;letter-spacing:.02em;text-transform:uppercase}
.mute{color:var(--mute)}
.acc{color:var(--accent)}
.h-xl{font-size:clamp(2.2rem,5.4vw,6.4rem);line-height:.96;letter-spacing:-.045em;font-weight:400}
.h-l{font-size:clamp(1.9rem,3.8vw,4.4rem);line-height:1;letter-spacing:-.04em;font-weight:400}
.h-m{font-size:clamp(1.5rem,2.2vw,2.6rem);line-height:1.06;letter-spacing:-.03em;font-weight:400}
.h-s{font-size:clamp(1.15rem,1.4vw,1.55rem);line-height:1.15;letter-spacing:-.02em;font-weight:400}
.body{font-size:clamp(1rem,1.08vw,1.16rem);line-height:1.55;color:var(--mute);letter-spacing:-.005em}
.line{display:block;overflow:hidden}
.line>span{display:inline-block;will-change:transform}
.ch{display:inline-block;will-change:transform,opacity}

/* ---------- grid ---------- */
.wrap{padding-inline:var(--pad)}
.g12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
.row{display:flex;align-items:center;gap:12px}
.sec{padding-block:clamp(90px,12vw,200px)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:var(--pad);
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start;
  mix-blend-mode:difference;color:#fff;pointer-events:none;
}
.hdr>*{pointer-events:auto}
.logo{grid-column:1/4;display:inline-flex;align-items:flex-start;gap:8px;width:max-content}
.logo svg{height:24px;width:auto;display:block}
.nav{grid-column:7/10;display:flex;gap:clamp(14px,1.6vw,28px);align-items:baseline}
.nav a,.nav button{font-size:clamp(1rem,1.15vw,1.2rem);letter-spacing:-.01em;position:relative;display:inline-flex;align-items:flex-start;gap:3px}
.nav sup{font-family:var(--mono);font-size:10px;letter-spacing:0;top:-.1em;position:relative}
.nav a::after,.nav button::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--out)}
.nav a:hover::after,.nav button:hover::after,.nav a.on::after{transform:scaleX(1);transform-origin:left}
.clock{grid-column:10/13;justify-self:end;text-align:right}

/* ---------- WebGL background ---------- */
.gl{position:fixed;inset:0;z-index:0;width:100vw;height:100vh;pointer-events:none}
.gl-fallback{position:fixed;inset:0;z-index:0;background:radial-gradient(60% 60% at 70% 60%,#3a1406 0%,#140905 45%,var(--bg) 80%)}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.07;
  background-image: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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- home (single screen) ---------- */
.home{position:relative;z-index:2;min-height:100svh;display:grid;grid-template-rows:1fr auto auto;padding:calc(var(--pad) + 70px) var(--pad) var(--pad)}
.home-head{align-self:end;grid-column:1/-1;padding-bottom:clamp(30px,5vh,70px)}
.home-head .h-xl{max-width:16ch}
@media (max-width:900px){.home-head .h-xl{max-width:none;font-size:clamp(2.2rem,8.4vw,4rem)}}
.info{padding-top:14px;border-top:1px solid var(--line)}
.info .col h4{margin-bottom:10px}
.info li{line-height:1.5}
.info a{position:relative}
.info a:hover{color:var(--accent)}
.c1{grid-column:1/4}.c2{grid-column:4/7}.c3{grid-column:7/10}.c4{grid-column:10/13}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;box-shadow:0 0 0 0 rgba(255,107,53,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,107,53,.55)}70%{box-shadow:0 0 0 10px rgba(255,107,53,0)}100%{box-shadow:0 0 0 0 rgba(255,107,53,0)}}
.reel-btn{display:inline-flex;align-items:center;gap:12px;margin-top:14px}
.reel-thumb{width:120px;aspect-ratio:16/9;overflow:hidden;background:#1a1a1a;position:relative}
.reel-thumb video{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--out)}
.reel-btn:hover .reel-thumb video{transform:scale(1.12)}
.reel-thumb::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ---------- loader / transition ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);padding:var(--pad);align-items:center}
.loader-txt{grid-column:2/8;font-size:clamp(1.1rem,1.6vw,1.6rem);line-height:1.2;letter-spacing:-.02em}
.loader-ms{position:absolute;right:var(--pad);bottom:calc(var(--pad) + 14px);font-family:var(--mono);font-size:12.5px}
.loader-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--fg);width:0}
.wipe{position:fixed;inset:0;z-index:290;background:var(--bg);transform:translateY(100%);pointer-events:none;display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad)}
.wipe span{font-family:var(--mono);font-size:12.5px;text-transform:uppercase}

/* ---------- panel (studio overlay) ---------- */
.panel{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none}
.panel.on{visibility:visible;pointer-events:auto}
.panel-bg{position:absolute;inset:0;background:rgba(11,11,11,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0}
.panel-in{position:absolute;top:0;right:0;bottom:0;width:min(640px,100%);background:#141413;overflow-y:auto;transform:translateX(100%);padding:var(--pad);padding-top:calc(var(--pad) + 4px)}
.panel-in::-webkit-scrollbar{width:0}
.panel-close{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding-bottom:40px;background:#141413;z-index:2}
.panel h2{margin:0 0 18px}
.panel section{padding:34px 0;border-top:1px solid var(--line)}
.svc{border-bottom:1px solid var(--line)}
.svc-h{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 0;text-align:left}
.svc-h i{width:11px;height:11px;position:relative;flex:none}
.svc-h i::before,.svc-h i::after{content:"";position:absolute;background:currentColor;transition:transform .5s var(--out)}
.svc-h i::before{left:0;right:0;top:5px;height:1px}
.svc-h i::after{top:0;bottom:0;left:5px;width:1px}
.svc.open .svc-h i::after{transform:scaleY(0)}
.svc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--out)}
.svc.open .svc-b{grid-template-rows:1fr}
.svc-b>div{overflow:hidden}
.svc-b p{padding-bottom:18px}

/* ---------- reel modal ---------- */
.reel{position:fixed;inset:0;z-index:250;background:#000;display:grid;place-items:center;visibility:hidden;clip-path:inset(50% 0 50% 0)}
.reel.on{visibility:visible}
.reel video{width:100%;height:100%;object-fit:contain}
.reel-ui{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:flex;justify-content:space-between;align-items:center;gap:20px}
.reel-prog{flex:1;height:1px;background:var(--line-2);position:relative;cursor:pointer}
.reel-prog i{position:absolute;left:0;top:-.5px;bottom:-.5px;background:var(--fg);width:0}
.reel-close{position:absolute;top:var(--pad);right:var(--pad)}

/* ---------- inner pages ---------- */
.page{position:relative;z-index:2;padding-top:calc(var(--pad) + 110px)}
.page-title{padding-bottom:clamp(40px,6vw,90px)}
.work-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:12px;text-transform:uppercase;padding:6px 11px;border:1px solid var(--line-2);border-radius:40px;transition:all .4s var(--out);color:var(--mute)}
.chip:hover{color:var(--fg);border-color:var(--fg)}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.view-t{display:flex;gap:14px}
.view-t button{color:var(--dim)}
.view-t button.on{color:var(--fg)}

.plist{border-bottom:1px solid var(--line)}
.prow{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:baseline;padding:18px 0;border-top:1px solid var(--line);position:relative;transition:color .4s}
.prow:first-child{border-top:0}
.prow .n{grid-column:1/2;color:var(--dim)}
.prow .t{grid-column:2/7;font-size:clamp(1.5rem,3.4vw,3.8rem);line-height:1;letter-spacing:-.04em;transition:transform .7s var(--out),color .4s}
.prow .s{grid-column:7/11;color:var(--mute)}
.prow .y{grid-column:11/13;text-align:right;color:var(--mute)}
.plist:hover .prow{color:var(--dim)}
.plist:hover .prow .t{color:var(--dim)}
.plist .prow:hover .t{color:var(--fg);transform:translateX(14px)}
.plist .prow:hover .s,.plist .prow:hover .y{color:var(--fg)}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap) var(--gap)}
.pcard{display:block}
.pcard .m{aspect-ratio:16/10;overflow:hidden;background:#161616;position:relative}
.pcard video,.pcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out)}
.pcard:hover video{transform:scale(1.04)}
.pcard .cap{display:flex;justify-content:space-between;gap:12px;padding-top:12px}

.hover-prev{position:fixed;left:0;top:0;z-index:90;width:clamp(260px,26vw,420px);aspect-ratio:16/10;pointer-events:none;overflow:hidden;background:#111;
  clip-path:inset(50% 50% 50% 50%);transition:clip-path .6s var(--out)}
.hover-prev.on{clip-path:inset(0 0 0 0)}
.hover-prev video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.hover-prev video.on{opacity:1}

/* ---------- project ---------- */
.p-hero{position:relative;height:100svh;overflow:hidden}
.p-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.5),transparent 30%,transparent 60%,rgba(11,11,11,.85))}
.p-hero-in{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);z-index:2}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);padding:18px 0;border-top:1px solid var(--line)}
.meta div p+p{margin-top:4px}
.media{overflow:hidden;background:#141414;position:relative}
.media video,.media img{width:100%;height:100%;object-fit:cover}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);border-top:1px solid var(--line);padding-top:18px}
.stats b{display:block;font-size:clamp(2.4rem,5vw,5.4rem);font-weight:400;letter-spacing:-.05em;line-height:1}
.next{display:block;padding:clamp(60px,9vw,140px) 0;border-top:1px solid var(--line);position:relative;overflow:hidden}
.next .t{font-size:clamp(2.6rem,9vw,11rem);letter-spacing:-.055em;line-height:.9;transition:transform 1s var(--out)}
.next:hover .t{transform:translateX(2vw)}
.next .bg{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .8s var(--out)}
.next .bg video{width:100%;height:100%;object-fit:cover;filter:brightness(.4)}
.next:hover .bg{opacity:1}

/* ---------- studio page ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.team .ph{aspect-ratio:3/4;overflow:hidden;background:#151515;filter:grayscale(1);transition:filter .8s var(--out)}
.team .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out)}
.team>div:hover .ph{filter:grayscale(0)}
.team>div:hover img{transform:scale(1.05)}
.steps li{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);padding:22px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.clients{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.clients span{padding:22px 0;border-bottom:1px solid var(--line);font-size:clamp(1.1rem,1.6vw,1.6rem);letter-spacing:-.02em;color:var(--mute);transition:color .4s}
.clients span:hover{color:var(--fg)}

/* ---------- contact ---------- */
.brief{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:34px}
.q{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);padding-top:14px;border-top:1px solid var(--line)}
.q>.mono{grid-column:1/4}
.q>.a{grid-column:4/13;display:flex;gap:8px;flex-wrap:wrap}
.opt{padding:10px 16px;border:1px solid var(--line-2);border-radius:40px;font-size:1rem;transition:all .4s var(--out);color:var(--mute)}
.opt:hover{color:var(--fg);border-color:var(--fg)}
.opt.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.fld{grid-column:4/13;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.fld .full{grid-column:1/-1}
.fi{display:flex;flex-direction:column;gap:8px}
.fi input,.fi textarea{background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:10px 0;font-size:clamp(1.1rem,1.6vw,1.6rem);letter-spacing:-.02em;outline:0;border-radius:0;transition:border-color .3s;width:100%;min-width:0}
.fi input:focus,.fi textarea:focus{border-color:var(--fg)}
.fi input::placeholder,.fi textarea::placeholder{color:var(--dim)}
.fi.bad input{border-color:var(--accent)}
.send{display:inline-flex;align-items:center;gap:14px;font-size:clamp(1.6rem,3.4vw,3.6rem);letter-spacing:-.04em;line-height:1}
.send i{width:.9em;height:.9em;border-radius:50%;background:var(--accent);display:inline-block;transition:transform .6s var(--out)}
.send:hover i{transform:scale(1.25)}
.note{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;color:var(--mute);border:1px dashed var(--line-2);padding:12px 14px;line-height:1.5}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;padding:var(--pad);padding-top:clamp(80px,10vw,160px)}
.foot-big{font-size:clamp(3rem,15vw,18rem);letter-spacing:-.065em;line-height:.8;font-weight:400;margin:40px 0 18px}
.foot-big a:hover{color:var(--accent)}
.foot .g12{padding-top:14px;border-top:1px solid var(--line)}

/* ---------- cursor ---------- */
.cur{position:fixed;left:0;top:0;z-index:400;pointer-events:none;width:8px;height:8px;border-radius:50%;background:#fff;mix-blend-mode:difference;transform:translate(-50%,-50%);opacity:0;transition:width .45s var(--out),height .45s var(--out),opacity .3s}
.cur.live{opacity:1}
.cur.big{width:82px;height:82px}
.cur-l{position:fixed;left:0;top:0;z-index:401;pointer-events:none;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:#000;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;mix-blend-mode:normal}
.cur-l.on{opacity:1}
@media (hover:none){.cur,.cur-l{display:none}}

.toast{position:fixed;left:50%;bottom:var(--pad);transform:translate(-50%,30px);z-index:500;background:var(--fg);color:var(--bg);padding:12px 20px;font-family:var(--mono);font-size:12px;text-transform:uppercase;opacity:0;transition:all .5s var(--out);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- motion fallbacks ---------- */
[data-fade]{opacity:0;transform:translateY(24px)}
.no-gsap [data-fade],.reduced [data-fade]{opacity:1;transform:none}
.no-gsap .loader,.no-gsap .wipe{display:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav{grid-column:5/13;justify-content:flex-end}
  .clock{display:none}
  .home{padding-top:calc(var(--pad) + 60px)}
  .info{row-gap:26px}
  .c1,.c2,.c3,.c4{grid-column:span 6}
  .prow .t{grid-column:2/13}
  .prow .s{grid-column:2/9;margin-top:6px}
  .prow .y{grid-column:9/13}
  .pgrid,.duo{grid-template-columns:1fr}
  .meta,.team,.clients{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr}
  .q>.mono,.q>.a,.fld{grid-column:1/-1}
  .q>.mono{margin-bottom:12px}
  .fld{grid-template-columns:1fr}
  .loader-txt{grid-column:1/-1}
  .hover-prev{display:none}
}
@media (max-width:560px){
  .c1,.c2,.c3,.c4{grid-column:1/-1}
  .nav{gap:14px}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}.dot{animation:none}}