:root{--bg:#070707;--ink:#f2eee6;--mut:#928e84;--line:rgba(242,238,230,.13);--or:#ff5a1f;--disp:'Anton',Impact,'Arial Narrow',sans-serif;--sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--pad:clamp(20px,4vw,64px);--hh:64px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 12px)}
body{background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--or);color:#000;padding:10px 14px;z-index:100}.skip:focus{left:8px}
.wrap{width:100%;max-width:1360px;margin:0 auto;padding:0 var(--pad)}
.disp{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.95}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:#000;border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:var(--hh)}
.brand{text-decoration:none;font:400 21px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase}
.brand i{font-style:normal;color:var(--or)}
.nav{display:flex;align-items:center;gap:clamp(22px,3vw,44px);font:600 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.nav a{text-decoration:none;padding:12px 0;border-bottom:2px solid transparent;transition:border-color .25s,color .25s}
.nav a:hover{border-color:var(--or)}
.nav a.cta{border:1.5px solid var(--ink);padding:12px 18px;transition:background .25s,color .25s}.nav a.cta:hover{background:var(--or);border-color:var(--or);color:#000}
.nav-toggle{display:none;width:48px;height:48px;margin-right:-10px;background:none;border:0;cursor:pointer;color:var(--ink);position:relative}
.nav-toggle span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;transition:transform .3s,opacity .3s}
.nav-toggle span:nth-child(1){top:16px}.nav-toggle span:nth-child(2){top:23px}.nav-toggle span:nth-child(3){top:30px}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-open .nav-toggle span:nth-child(2){opacity:0}.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:899px){
  .nav-toggle{display:block}
  .js .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#000;border-bottom:1px solid var(--line);padding:4px var(--pad) 20px;display:none}
  .js .nav-open .nav{display:flex}
  .js .nav a{padding:17px 0;border-bottom:1px solid var(--line);font-size:14px}
  .js .nav a.cta{margin-top:16px;text-align:center;padding:17px;border:1.5px solid var(--ink)}
  html:not(.js) .nav{gap:14px;font-size:11px}
  html:not(.js) .nav-toggle{display:none}
  html:not(.js) .bar{flex-wrap:wrap;height:auto;padding:10px 0}
}
/* letterbox hero */
.letterbox{background:#000;aspect-ratio:2.39/1;max-height:calc(100vh - var(--hh) - 130px);min-height:200px;overflow:hidden;width:100%}
.letterbox video{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.letterbox{aspect-ratio:16/9;max-height:none}}
.hero-cap{padding-top:clamp(26px,3.6vw,52px);padding-bottom:clamp(44px,6vw,88px);display:grid;gap:24px}
.kicker{font:700 12px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--or)}
.hero h1{font-size:clamp(42px,7.4vw,124px);margin-top:14px}
.hero h1 span{color:var(--or)}
.lede{font-size:clamp(17px,1.5vw,20px);color:#cfcabf;max-width:34em}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;font:700 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--ink);transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ink);color:#000}
.btn.solid{background:var(--or);border-color:var(--or);color:#000}.btn.solid:hover{background:var(--ink);border-color:var(--ink)}
@media (min-width:900px){.hero-cap{grid-template-columns:1fr auto;align-items:end;column-gap:64px}.hero-cap .intro{grid-column:1/-1}}
/* sections */
section{padding:clamp(56px,9vw,128px) 0}
.rule{border-top:1px solid var(--line)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,56px)}
.sec-head h2{font-size:clamp(40px,6.4vw,100px)}
.sec-head p.d{color:var(--mut);max-width:30em}
@media (min-width:900px){.sec-head{grid-template-columns:1fr minmax(260px,360px);align-items:end;column-gap:64px}}
/* poster video */
.pv{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.pv video{width:100%;height:100%;object-fit:cover}
.pv.wide{aspect-ratio:2.39/1}
.pv.wide video{object-position:50% 28%}
@media (max-width:640px){.pv.wide{aspect-ratio:16/9}}
.pv-btn{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;cursor:pointer;display:none;align-items:center;justify-content:center;color:#fff}
.js .pv-btn{display:flex}.js .pv.started .pv-btn{display:none}
.pv-btn b{display:grid;place-items:center;width:clamp(56px,6vw,76px);aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(0,0,0,.28);transition:background .25s,border-color .25s,color .25s,transform .25s}
.pv-btn b::after{content:"";margin-left:5px;border-left:16px solid currentColor;border-top:10px solid transparent;border-bottom:10px solid transparent}
.pv-btn:hover b{background:var(--or);border-color:var(--or);color:#000;transform:scale(1.05)}
.pv.preview .pv-btn b{opacity:.0}
/* work */
.feat{margin-bottom:clamp(44px,6vw,88px)}
.cap{display:grid;gap:12px;padding-top:20px}
.cap h3{font-size:clamp(30px,3.4vw,50px)}
.meta{font:600 12px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.cap p.dek{color:#bdb8ad;font-size:16px;max-width:34em}
@media (min-width:900px){.feat .cap{grid-template-columns:1fr 1fr;column-gap:64px;align-items:end}.feat .cap h3{font-size:clamp(44px,5.4vw,84px)}}
.cards{display:grid;gap:clamp(36px,4vw,60px) clamp(20px,3vw,44px)}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
.card .cap h3{font-size:clamp(26px,2.6vw,36px)}
/* field + about */
.trio{display:grid;gap:14px}
.trio img{width:100%;aspect-ratio:4/3;object-fit:cover}
.trio figure{display:grid;gap:8px}.trio figcaption{font:600 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
@media (min-width:700px){.trio{grid-template-columns:repeat(3,1fr)}}
.about-grid{display:grid;gap:36px}
.about-grid blockquote{font:300 clamp(28px,3.8vw,56px)/1.14 var(--sans);letter-spacing:-.015em}
.about-grid blockquote b{font-weight:700;color:var(--or)}
.bio p{color:#c7c2b7;margin-bottom:18px;max-width:38em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.stats b{display:block;font:400 clamp(38px,4.6vw,66px)/1 var(--disp)}
.stats span{font:600 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
@media (min-width:900px){.about-grid{grid-template-columns:1.1fr 1fr;column-gap:96px;align-items:start}}
.nets{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:clamp(36px,5vw,64px);padding-top:24px;border-top:1px solid var(--line);align-items:baseline}
.nets b{width:100%;font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.nets span{font:400 clamp(22px,2.4vw,34px)/1.1 var(--disp);text-transform:uppercase;letter-spacing:.04em}
/* contact */
.contact{text-align:left}
.contact h2{font-size:clamp(60px,13vw,220px);margin:18px 0 0}
.contact h2 span{color:var(--or)}
.mail{display:inline-block;margin:clamp(22px,3vw,40px) 0 26px;font:300 clamp(22px,3.8vw,54px)/1.15 var(--sans);text-decoration:none;border-bottom:2px solid var(--or);word-break:break-word;transition:color .25s}
.mail:hover{color:var(--or)}
.soc{display:flex;flex-wrap:wrap;gap:10px 30px;font:700 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.soc a{text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line)}.soc a:hover{border-color:var(--or)}
footer{border-top:1px solid var(--line);padding:26px 0 36px;font-size:13px;color:var(--mut)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}
.js .fade{opacity:0;transition:opacity 1s ease}.js .fade.in{opacity:1}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .fade{opacity:1;transition:none}*{transition-duration:.01s!important}}

/* ---- mockup 15: monitor wall ---- */
.wall{display:grid;gap:clamp(28px,3.4vw,48px) clamp(16px,2vw,28px)}
@media (min-width:640px){.wall{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.wall{grid-template-columns:repeat(3,1fr)}}
.mon{display:grid;gap:14px;align-content:start}
.mon .bezel{background:#0d0d0d;border:1px solid #2a2a29;padding:clamp(5px,.6vw,9px);transition:border-color .3s}
@media (hover:hover){.mon:hover .bezel{border-color:#55524c}}
.mon .tt{display:flex;align-items:center;gap:12px}
.mon h3{font:400 clamp(21px,1.9vw,27px)/1.1 var(--disp);text-transform:uppercase;letter-spacing:.03em}
.mon .m{font:600 11px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding-left:22px}
.tally{flex:none;width:10px;height:10px;border-radius:50%;background:#37352f;transition:background .3s,box-shadow .3s}
.mon.is-preview .tally{background:#f2a63a}
.mon.is-live .tally{background:#e5321f;box-shadow:0 0 10px rgba(229,50,31,.7)}
.mon .pv-btn b{width:52px}
.mon .pv-btn b::after{border-left-width:13px;border-top-width:8px;border-bottom-width:8px;margin-left:4px}
.wall-note{color:var(--mut);font-size:15px;max-width:34em}