/* ══════════════════════════════════════════════════════════
   MSCH — Studio engine · shared design system (interactive)
   ══════════════════════════════════════════════════════════ */
:root{
  --bg:#0A0A0B; --bg-2:#0F0F11; --surface:#141417;
  --line:rgba(245,242,235,.13); --line-2:rgba(245,242,235,.06);
  --fg:#F5F2EB; --fg-dim:#A9A59C; --mute:rgba(245,242,235,.5); --faint:rgba(245,242,235,.26);
  --acc:#FF4D2E;                 /* vermillion */
  --acc-2:#FF7A5C;
  --disp:'Syne',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1480px; --gut:clamp(20px,5vw,90px);
  --e:cubic-bezier(.19,1,.22,1); --e2:cubic-bezier(.65,.05,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-weight:300;line-height:1.6;
  letter-spacing:.004em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::selection{background:var(--acc);color:#fff}
.i{font-style:italic}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:.95}

/* grain + vignette */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  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='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.ey{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.ey--a{color:var(--acc)}
.ix{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--faint)}

/* ── CUSTOM CURSOR ── */
.cur,.cur-f{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);mix-blend-mode:difference}
.cur{width:7px;height:7px;background:#fff}
.cur-f{width:42px;height:42px;border:1px solid rgba(255,255,255,.6);transition:width .35s var(--e),height .35s var(--e),background .35s,border-color .35s}
.cur-f.hov{width:78px;height:78px;background:rgba(255,255,255,.1);border-color:transparent}
.cur-f.view::after{content:"VIEW";font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:#fff;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);mix-blend-mode:normal}
@media(hover:none),(pointer:coarse){.cur,.cur-f{display:none}}

/* ── LOADER ── */
.load{position:fixed;inset:0;z-index:9000;background:var(--bg);display:flex;align-items:flex-end;justify-content:space-between;
  padding:var(--gut)}
.load__n{font-family:var(--disp);font-weight:800;font-size:clamp(70px,18vw,260px);line-height:.8;letter-spacing:-.04em;color:var(--fg)}
.load__c{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--mute)}
.load__bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--acc)}

/* ── PAGE TRANSITION ── */
.pt{position:fixed;inset:0;z-index:8000;background:var(--acc);transform:scaleY(0);transform-origin:bottom;pointer-events:none}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--gut);mix-blend-mode:difference;transition:padding .5s var(--e)}
.nav.stuck{padding-block:16px}
.brand{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.02em;color:#fff}
.brand .dot{color:var(--acc)}
.nav__links{display:flex;gap:30px;align-items:center}
.nav__links a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:#fff;transition:width .4s var(--e)}
.nav__links a:hover::after{width:100%}
.nav__cta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:9px}
.nav__cta i{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:pul 2.4s var(--e) infinite}
@keyframes pul{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media(max-width:880px){.nav__links{display:none}}

/* ── HERO ── */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end;padding:0 var(--gut) clamp(36px,7vh,80px)}
.hero__bg{position:absolute;inset:-8% 0;z-index:-2;will-change:transform}
.hero__bg video,.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.5;filter:contrast(1.08) brightness(.78) saturate(1.05)}
.hero__veil{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(120% 90% at 50% 30%,transparent,rgba(10,10,11,.55) 70%,var(--bg)),
  linear-gradient(180deg,rgba(10,10,11,.5),transparent 30%,transparent 55%,var(--bg))}
.hero__top{position:absolute;top:108px;left:var(--gut);right:var(--gut);display:flex;justify-content:space-between;gap:20px}
.hero__top .ix{line-height:1.9}.hero__top b{color:var(--fg);font-weight:500}
.hero__r{text-align:right}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(50px,10.5vw,156px);line-height:.84;letter-spacing:-.045em;text-transform:uppercase}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln span{display:inline-block}
.hero h1 .out{-webkit-text-stroke:1.4px var(--fg);color:transparent}
.hero h1 .acc{color:var(--acc)}
.hero__sub{margin-top:26px;max-width:42ch;font-size:clamp(15px,1.4vw,18px);color:var(--fg-dim)}
.hero__float{position:absolute;width:clamp(110px,12vw,200px);aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line);z-index:-1;
  filter:grayscale(.2) contrast(1.05)}
.hero__float.f1{top:20%;right:9%}.hero__float.f2{top:46%;right:20%;width:clamp(90px,9vw,150px)}
@media(max-width:880px){.hero__float{display:none}}
.scroll{position:absolute;left:var(--gut);bottom:clamp(36px,7vh,80px);font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:11px}
.scroll i{display:block;width:1px;height:40px;background:linear-gradient(var(--acc),transparent);transform-origin:top;animation:fall 2.2s var(--e) infinite}
@keyframes fall{0%{transform:scaleY(0)}45%{transform:scaleY(1)}45.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── BIG MARQUEE ── */
.mq{padding:clamp(40px,7vh,90px) 0;border-block:1px solid var(--line-2);overflow:hidden;white-space:nowrap}
.mq__t{display:inline-block;font-family:var(--disp);font-weight:800;font-size:clamp(40px,8vw,128px);letter-spacing:-.03em;
  text-transform:uppercase;line-height:1;will-change:transform}
.mq__t span{color:var(--fg)}.mq__t .o{-webkit-text-stroke:1.2px var(--fg);color:transparent}
.mq__t .s{display:inline-block;vertical-align:middle;width:clamp(80px,9vw,150px);aspect-ratio:16/10;object-fit:cover;margin:0 38px;border:1px solid var(--line)}
.mq__t i{color:var(--acc);font-style:normal;margin:0 30px}

/* ── SECTION ── */
section.s{padding:clamp(90px,15vh,200px) 0;position:relative}
.s-head{display:grid;gap:20px;margin-bottom:clamp(46px,7vh,80px)}
.s-head__top{display:flex;align-items:center;gap:16px}
.s-head__top .rule{flex:1;height:1px;background:var(--line)}
.s-head h2{font-size:clamp(34px,6vw,92px);text-transform:uppercase;line-height:.9;max-width:16ch}
.s-head h2 .o{-webkit-text-stroke:1.4px var(--fg);color:transparent}
.s-head h2 .acc{color:var(--acc)}
.s-head p{color:var(--mute);max-width:50ch;font-size:15.5px}

/* reveal (JS sets initial) */
.rv{will-change:transform,opacity}

/* ── WORK TILES ── */
.work{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,30px)}
.tile{position:relative;display:block;overflow:hidden;background:var(--surface);border:1px solid var(--line-2)}
.tile.big{grid-column:span 7;aspect-ratio:16/11}
.tile.sm{grid-column:span 5;aspect-ratio:4/3}
.tile.wide{grid-column:span 12;aspect-ratio:21/8}
@media(max-width:860px){.tile.big,.tile.sm,.tile.wide{grid-column:span 12;aspect-ratio:4/3}}
.tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform 1.1s var(--e),filter 1.1s var(--e);filter:grayscale(.25) brightness(.82)}
.tile:hover .tile__img{transform:scale(1.08);filter:grayscale(0) brightness(.92)}
.tile__grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,10,11,.85))}
.tile__b{position:absolute;left:0;bottom:0;padding:clamp(20px,2.4vw,38px);width:100%}
.tile__no{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--acc-2)}
.tile__t{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.6vw,40px);text-transform:uppercase;letter-spacing:-.02em;margin-top:10px;line-height:.95}
.tile__t .i{font-style:italic;color:var(--fg-dim)}
.tile__m{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mute);display:flex;gap:18px;flex-wrap:wrap}
.tile__ph{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg);background:rgba(255,77,46,.85);padding:5px 9px}

/* ── CAPABILITIES ── */
.cap{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);border-block:1px solid var(--line-2)}
@media(max-width:760px){.cap{grid-template-columns:1fr}}
.cap__i{background:var(--bg);padding:clamp(34px,4vw,64px) clamp(24px,3vw,50px);transition:background .5s var(--e);position:relative;overflow:hidden}
.cap__i:hover{background:var(--bg-2)}
.cap__n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--acc)}
.cap__i h3{font-size:clamp(26px,3.4vw,46px);text-transform:uppercase;margin:16px 0 12px}
.cap__i h3 .o{-webkit-text-stroke:1.2px var(--fg);color:transparent}
.cap__i p{color:var(--mute);font-size:14.5px;max-width:38ch}

/* ── STUDIO STRIP ── */
.studio{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(34px,5vw,84px);align-items:center}
@media(max-width:840px){.studio{grid-template-columns:1fr}}
.studio__media{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)}
.studio__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.02)}
.studio__lead{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.6vw,52px);text-transform:uppercase;line-height:.98;letter-spacing:-.025em}
.studio__lead .acc{color:var(--acc)}
.studio__body{margin-top:24px;color:var(--fg-dim);max-width:52ch;font-size:16px}

/* ── METRICS ── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
@media(max-width:680px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{background:var(--bg);padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,34px)}
.metric__n{font-family:var(--disp);font-weight:800;font-size:clamp(40px,5vw,76px);letter-spacing:-.04em;line-height:.9}
.metric__n .acc{color:var(--acc)}
.metric__l{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-top:14px;max-width:20ch;line-height:1.6}

/* ── BIG CTA ── */
.cta{text-align:center;padding:clamp(100px,18vh,240px) 0}
.cta h2{font-size:clamp(44px,11vw,200px);text-transform:uppercase;line-height:.86}
.cta h2 .acc{color:var(--acc)}.cta h2 .o{-webkit-text-stroke:1.5px var(--fg);color:transparent}
.cta a{display:inline-flex;align-items:center;gap:13px;margin-top:42px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--line);padding:18px 32px;border-radius:100px;transition:.4s var(--e)}
.cta a:hover{background:var(--acc);border-color:var(--acc);color:#fff;gap:20px}

/* ── FOOTER ── */
.foot{padding:50px var(--gut);border-top:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mute)}
.foot a{color:var(--mute);transition:color .3s}.foot a:hover{color:var(--acc)}
.foot__legal{display:flex;gap:20px}

/* magnetic */
.mag{will-change:transform}
.note{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  text-align:center;padding:9px var(--gut);border-bottom:1px solid var(--line-2)}
.note b{color:var(--acc)}

@media(prefers-reduced-motion:reduce){*{animation:none!important}.tile__img{transform:none}}