:root{
  --bg:#F9FAFB;
  --bg-dim:#F2F3F5;
  --ink:#0C0E13;
  --dark:#0B0D16;
  --muted:#75798A;
  --muted-dark:#8B8FA3;
  --line:#E5E6EA;
  --line-dark:rgba(255,255,255,0.09);
  --violet:#6D4EF5;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:1440px;margin:0 auto;padding:0 40px;}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;font-weight:500;letter-spacing:-0.01em;color:var(--ink);}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.12em;
  color:var(--muted);text-transform:uppercase;margin-bottom:26px;
}
.eyebrow .rule{width:22px;height:1px;background:var(--muted);display:inline-block;}
.section-dark .eyebrow{color:var(--muted-dark);}
.section-dark .eyebrow .rule{background:var(--muted-dark);}

/* NAV */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(249,250,251,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;}
.logo{display:flex;align-items:center;gap:9px;font-family:'Outfit',sans-serif;font-size:18px;}
.logo .dot{width:8px;height:8px;border-radius:50%;background:var(--violet);flex-shrink:0;}
.logo b{font-weight:600;color:var(--ink);}
.logo span{font-weight:400;color:var(--muted);}
.navlinks{display:flex;gap:40px;}
.navlinks a{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.1em;
  color:var(--muted);text-transform:uppercase;transition:color .2s;
}
.navlinks a:hover{color:var(--ink);}
.navcta{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.08em;
  border:1px solid var(--ink);padding:11px 18px;
  display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;
  transition:background .2s, color .2s;
}
.navcta:hover{background:var(--ink);color:var(--bg);}
@media (max-width:900px){.navlinks{display:none;}}

/* HERO */
.hero-top{position:relative;height:420px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg-dim);}
.hero-top svg{position:absolute;inset:0;width:100%;height:100%;opacity:0.55;}
.hero-copy{position:relative;text-align:center;max-width:720px;padding:0 24px;}
.hero-copy h1{font-size:clamp(30px,4vw,46px);line-height:1.15;font-weight:400;}
.hero-copy h1 em{font-style:normal;color:var(--violet);}
.scroll-cue{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  text-align:center;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:0.18em;color:var(--muted);
}
.scroll-cue .arrow{margin-top:8px;font-size:14px;animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;white-space:nowrap;padding:26px 0;
}
.marquee-track{display:inline-flex;align-items:center;animation:scroll 26s linear infinite;}
.marquee-track span{
  font-family:'Outfit',sans-serif;font-size:clamp(28px,4.2vw,54px);font-weight:500;
  color:var(--ink);padding:0 34px;white-space:nowrap;
}
.marquee-track .sep{color:var(--violet);padding:0;}
@keyframes scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* generic section */
section{padding:130px 0;}
.section-dark{background:var(--dark);color:#EDEEF3;}
.section-dark h2, .section-dark h3{color:#F4F5F9;}
.head-row{
  display:grid;grid-template-columns:1.3fr 0.9fr;gap:60px;align-items:end;margin-bottom:74px;
}
@media (max-width:880px){.head-row{grid-template-columns:1fr;}}
.head-row h2{font-size:clamp(32px,3.6vw,46px);line-height:1.12;font-weight:400;}
.head-row h2 b{font-weight:600;color:var(--violet);}
.head-row p{color:var(--muted);font-size:16px;max-width:400px;}
.section-dark .head-row p{color:var(--muted-dark);}

/* testing section signal panel */
.signal-row{display:grid;grid-template-columns:1.4fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1px;}
@media (max-width:880px){.signal-row{grid-template-columns:1fr;}}
.signal-panel{
  background-color:#070810;
  background-size:cover;
  background-position:center;
  position:relative;min-height:420px;overflow:hidden;
}
.signal-panel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(7,8,16,0.55) 0%, rgba(7,8,16,0.15) 40%, rgba(7,8,16,0.65) 100%);
}
.signal-head{
  position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  padding:20px 24px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;
  color:#DEE0E8;z-index:2;
}
.rec{display:inline-flex;align-items:center;gap:7px;}
.rec .reddot{width:6px;height:6px;border-radius:50%;background:var(--violet);animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.25;}}

.stat-panel{background:var(--bg);padding:44px;display:flex;flex-direction:column;justify-content:space-between;}
.stat-panel .big{font-family:'Outfit',sans-serif;font-size:82px;font-weight:500;line-height:1;}
.stat-panel .big span{color:var(--violet);}
.stat-panel p{color:var(--muted);margin-top:20px;font-size:15px;max-width:340px;}
.stat-panel .div{border-top:1px solid var(--line);margin:34px 0 18px;}
.stat-panel .foot{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;color:var(--muted);text-transform:uppercase;}

.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-top:none;}
@media (max-width:820px){.metric-grid{grid-template-columns:repeat(2,1fr);}}
.metric{border-right:1px solid var(--line);border-top:1px solid var(--line);padding:30px 28px;}
.metric:nth-child(4n){border-right:none;}
.metric-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;color:var(--ink);}
.metric-head .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:0.08em;}
.metric h4{font-size:17px;font-weight:600;margin-bottom:6px;}
.metric p{font-size:13.5px;color:var(--muted);}

/* post production */
.pp-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:start;}
@media (max-width:900px){.pp-grid{grid-template-columns:1fr;}}
.pp-list .item{border-top:1px solid var(--line-dark);padding:28px 0;display:grid;grid-template-columns:40px 1fr;gap:18px;}
.pp-list .item:last-child{border-bottom:1px solid var(--line-dark);}
.pp-list .num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted-dark);padding-top:8px;}
.pp-list h3{font-size:clamp(26px,2.6vw,38px);font-weight:400;margin-bottom:8px;}
.pp-list p{color:var(--muted-dark);font-size:14.5px;max-width:420px;}
.studio-shot{
  border-radius:2px;overflow:hidden;position:sticky;top:100px;
  aspect-ratio:4/5;
  background-color:#0b1b1e;
  background-size:cover;
  background-position:center;
  border:1px solid var(--line-dark);
}

/* method */
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);}
@media (max-width:820px){.step-grid{grid-template-columns:1fr;}}
.step{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:38px 34px;position:relative;}
.step:nth-child(3n){border-right:none;}
.step-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;}
.step-top .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:0.08em;}
.step-top .mark{width:6px;height:6px;border-radius:50%;background:var(--line);margin-top:4px;}
.step h3{font-size:24px;font-weight:500;margin-bottom:10px;}
.step p{color:var(--muted);font-size:14.5px;}

/* manifesto */
.manifesto-item{
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:200px 1fr;gap:40px;padding:52px 0;align-items:start;
}
.manifesto-item:last-child{border-bottom:1px solid var(--line);}
@media (max-width:760px){.manifesto-item{grid-template-columns:1fr;}}
.manifesto-item .n{font-family:'Outfit',sans-serif;font-size:96px;font-weight:300;color:var(--line);line-height:1;position:relative;}
.manifesto-item .n::after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:var(--violet);left:50%;top:50%;transform:translate(-50%,-50%);}
.manifesto-item h3{font-size:clamp(26px,2.8vw,38px);font-weight:400;margin-bottom:16px;}
.manifesto-item p{color:var(--muted);font-size:16px;max-width:620px;}

/* work */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:60px;flex-wrap:wrap;gap:20px;}
.work-head h2{font-size:clamp(34px,4.2vw,56px);font-weight:400;}
.work-count{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:0.08em;}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px 40px;}
@media (max-width:820px){.work-grid{grid-template-columns:1fr;}}
.work-card{margin-bottom:56px;}
.work-thumb{
  aspect-ratio:16/10;position:relative;overflow:hidden;margin-bottom:20px;border:1px solid var(--line);
  background-color:#0a0304;
  background-size:cover;
  background-position:center;
}
.work-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
.work-badge{
  position:absolute;left:18px;bottom:18px;background:var(--violet);color:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;
  padding:7px 12px;text-transform:uppercase;z-index:2;
}
.work-meta{display:flex;justify-content:space-between;align-items:flex-start;}
.work-meta h3{font-size:21px;font-weight:600;}
.work-meta .tags{text-align:right;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:0.04em;line-height:1.7;}

/* footer */
footer{padding:130px 0 0;}
.foot-mail{
  font-family:'Outfit',sans-serif;font-size:clamp(28px,4.4vw,48px);font-weight:400;
  display:inline-flex;align-items:center;gap:14px;border-bottom:1px solid var(--line-dark);
  padding-bottom:20px;color:#F4F5F9;
}
.foot-grid{display:grid;grid-template-columns:1fr auto auto;gap:80px;padding:80px 0 60px;}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:40px;}}
.foot-col .lab{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted-dark);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;}
.foot-col p, .foot-col a{display:block;color:#D7D9E2;font-size:14.5px;margin-bottom:8px;}
.foot-col a:hover{color:var(--violet);}
.foot-bottom{
  border-top:1px solid var(--line-dark);padding:26px 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;color:var(--muted-dark);
}