@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap');

:root{
  --black:#0a0a0a;
  --near-black:#111110;
  --panel:#161615;
  --off-white:#f2f1ec;
  --dim:#9c9a92;
  --line:#2a2a27;
  --rec:#d9401f;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--off-white);
  font-family:'Inter',sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}

img{max-width:100%;display:block;}

.wrap{
  max-width:1140px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Type ---------- */

h1,h2,h3,.display{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.95;
}

h1{font-size:clamp(48px,9vw,110px);}
h2{font-size:clamp(32px,5vw,56px);}
h3{font-size:20px;letter-spacing:0.04em;}

.eyebrow{
  font-family:'Roboto Mono',monospace;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--dim);
}

.eyebrow .dot{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--rec);
  margin-right:8px;
  position:relative;
  top:-1px;
}

p{color:var(--dim);font-size:16px;max-width:60ch;}

/* ---------- Nav ---------- */

header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,0.88);
  backdrop-filter:blur(8px);
  border-bottom:0.5px solid var(--line);
}

nav.wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}

.brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Anton',sans-serif;
  font-size:18px;
  letter-spacing:0.06em;
}

.brand img{height:34px;width:auto;}

.navlinks{display:flex;gap:36px;font-size:14px;letter-spacing:0.02em;}

.navlinks a{
  color:var(--dim);
  transition:color 0.15s ease;
  padding:4px 0;
  border-bottom:1px solid transparent;
}

.navlinks a:hover,.navlinks a.active{
  color:var(--off-white);
  border-bottom-color:var(--rec);
}

.navlinks a:focus-visible,.btn:focus-visible,a:focus-visible{
  outline:2px solid var(--rec);
  outline-offset:3px;
}

@media(max-width:700px){
  .navlinks{gap:20px;font-size:12px;}
  .brand span.full{display:none;}
}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  border:1px solid var(--off-white);
  font-family:'Roboto Mono',monospace;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:background 0.15s ease,color 0.15s ease;
}

.btn:hover{background:var(--off-white);color:var(--black);}

.btn.primary{background:var(--rec);border-color:var(--rec);color:var(--off-white);}
.btn.primary:hover{background:#b8330f;border-color:#b8330f;color:var(--off-white);}

/* ---------- Sections ---------- */

section{padding:100px 0;border-bottom:0.5px solid var(--line);}
section:last-of-type{border-bottom:none;}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:56px;
  flex-wrap:wrap;
}

/* ---------- Hero ---------- */

.hero{
  padding-top:110px;
  padding-bottom:80px;
  border-bottom:0.5px solid var(--line);
}

.hero .eyebrow{margin-bottom:22px;}

.hero h1{margin-bottom:28px;}

.hero p.lede{font-size:19px;color:var(--off-white);margin-bottom:40px;}

.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:64px;}

.reel-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:var(--panel);
  border:0.5px solid var(--line);
  overflow:hidden;
}

.reel-frame iframe{width:100%;height:100%;border:0;}

/* ---------- Timecode strip ---------- */

.timecode-strip{
  display:flex;
  border-top:0.5px solid var(--line);
  border-bottom:0.5px solid var(--line);
  font-family:'Roboto Mono',monospace;
  font-size:12px;
  color:var(--dim);
  letter-spacing:0.06em;
}

.timecode-strip div{
  flex:1;
  padding:16px 32px;
  border-right:0.5px solid var(--line);
}

.timecode-strip div:last-child{border-right:none;}

.timecode-strip strong{color:var(--off-white);display:block;font-size:22px;font-family:'Anton',sans-serif;margin-bottom:2px;}

@media(max-width:700px){
  .timecode-strip{flex-wrap:wrap;}
  .timecode-strip div{flex:1 1 50%;border-bottom:0.5px solid var(--line);}
}

/* ---------- Grid cards ---------- */

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}

@media(max-width:800px){
  .grid-2,.grid-3{grid-template-columns:1fr;}
}

.card{
  background:var(--black);
  padding:40px;
}

.card .tc{
  font-family:'Roboto Mono',monospace;
  font-size:12px;
  color:var(--rec);
  margin-bottom:18px;
  letter-spacing:0.06em;
}

.card h3{margin-bottom:14px;color:var(--off-white);}

/* ---------- Work items ---------- */

.work-item{
  border-bottom:0.5px solid var(--line);
  padding:36px 0;
  display:grid;
  grid-template-columns:120px 1fr auto;
  align-items:center;
  gap:24px;
}

.work-item:first-child{border-top:0.5px solid var(--line);}

.work-item .tc{font-family:'Roboto Mono',monospace;color:var(--dim);font-size:13px;}

.work-item h3{font-size:24px;margin-bottom:6px;}

.work-item .meta{color:var(--dim);font-size:14px;}

.work-item .link{
  font-family:'Roboto Mono',monospace;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border:1px solid var(--line);
  padding:10px 18px;
  white-space:nowrap;
}

.work-item .link:hover{border-color:var(--off-white);}

@media(max-width:700px){
  .work-item{grid-template-columns:1fr;gap:10px;}
}

/* ---------- Client strip ---------- */

.clients{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.clients span{
  font-family:'Roboto Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--dim);
  border:0.5px solid var(--line);
  padding:8px 16px;
}

/* ---------- Contact ---------- */

.contact-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 0;
  border-bottom:0.5px solid var(--line);
  flex-wrap:wrap;
  gap:12px;
}

.contact-row:first-child{border-top:0.5px solid var(--line);}

.contact-row .label{
  font-family:'Roboto Mono',monospace;
  font-size:12px;
  color:var(--dim);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.contact-row .value{font-size:24px;font-family:'Anton',sans-serif;text-transform:none;}

.contact-row a.value:hover{color:var(--rec);}

/* ---------- Footer ---------- */

footer{padding:48px 0;}

footer .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}

footer p{font-family:'Roboto Mono',monospace;font-size:12px;color:var(--dim);max-width:none;}

/* ---------- Services list ---------- */

.service-row{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:24px;
  padding:32px 0;
  border-bottom:0.5px solid var(--line);
  align-items:baseline;
}

.service-row:first-child{border-top:0.5px solid var(--line);}

.service-row .tc{font-family:'Roboto Mono',monospace;color:var(--rec);font-size:13px;}

.service-row h3{font-size:26px;margin-bottom:8px;color:var(--off-white);text-transform:none;font-family:'Anton',sans-serif;text-transform:uppercase;}

@media(max-width:700px){
  .service-row{grid-template-columns:1fr;gap:8px;}
}

/* ---------- CTA band ---------- */

.cta-band{
  text-align:center;
  padding:120px 0;
}

.cta-band h2{margin-bottom:24px;}

.cta-band p{margin:0 auto 40px;text-align:center;}

.cta-band .hero-actions{justify-content:center;}