@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:center;
  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;}

/* ---------- Video hero (home) ---------- */

.video-hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  border-bottom:0.5px solid var(--line);
  background:var(--black);
}

.video-hero--home{
  min-height:100vh;
  border-bottom:none;
}

.video-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.video-hero-bg video{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:var(--black);
}

.video-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.25) 32%, rgba(10,10,10,0.55) 68%, rgba(10,10,10,0.97) 100%);
}

.video-hero-content{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  padding:56px 32px 76px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
}

.hero-logo{
  width:clamp(200px,26vw,320px);
  height:auto;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,0.5));
}

.pill-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

.pill-nav .pill{
  font-family:'Roboto Mono',monospace;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-align:center;
  min-width:150px;
  color:var(--off-white);
  background:rgba(10,10,10,0.55);
  border:0.5px solid rgba(242,241,236,0.25);
  padding:13px 26px;
  border-radius:999px;
  backdrop-filter:blur(6px);
  transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease;
}

.pill-nav .pill:hover{
  background:var(--off-white);
  color:var(--black);
  border-color:var(--off-white);
}

.social-nav{
  display:flex;
  justify-content:center;
  gap:14px;
}

.social-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(10,10,10,0.55);
  border:0.5px solid rgba(242,241,236,0.25);
  backdrop-filter:blur(6px);
  transition:background 0.15s ease,border-color 0.15s ease;
}

.social-nav a:hover{
  background:var(--off-white);
  border-color:var(--off-white);
}

.social-nav a:hover svg{fill:var(--black);}

.social-nav svg{width:17px;height:17px;fill:var(--off-white);}

@media(max-width:700px){
  .video-hero--home{min-height:100svh;}
  .pill-nav .pill{min-width:120px;font-size:12px;padding:12px 20px;}
}

@media(max-width:700px){
  .video-hero{min-height:78vh;}
  .video-hero-content{padding-bottom:56px;}
}

@media(prefers-reduced-motion:reduce){
  .video-hero-bg iframe{display:none;}
  .video-hero{background:var(--panel);}
}

/* ---------- 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:28px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}

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

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

@media(max-width:600px){
  .grid-4{grid-template-columns:1fr;}
}

.card{
  background:var(--near-black);
  border:0.5px solid var(--line);
  border-left:2px solid var(--rec);
  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{
  background:var(--near-black);
  border:0.5px solid var(--line);
  border-left:2px solid var(--rec);
  padding:32px 36px;
  margin-bottom:20px;
  display:grid;
  grid-template-columns:120px 1fr auto;
  align-items:center;
  gap:24px;
}

.work-item:last-child{margin-bottom:0;}

.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:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:0.5px solid var(--line);
  border-left:0.5px solid var(--line);
}

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

@media(max-width:480px){
  .clients{grid-template-columns:1fr;}
}

.clients span{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--near-black);
  border-right:0.5px solid var(--line);
  border-bottom:0.5px solid var(--line);
  padding:40px 24px;
  transition:background 0.15s ease;
}

.clients img{
  max-width:100%;
  max-height:52px;
  opacity:0.75;
  transition:opacity 0.15s ease;
}

.clients img.logo-boost{max-height:74px;}

.clients span:hover{background:var(--panel);}
.clients span:hover img{opacity:1;}

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

.contact-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:72px;
  align-items:start;
}

@media(max-width:800px){
  .contact-grid{grid-template-columns:1fr;gap:48px;}
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.hidden-field{display:none;}

.form-field{
  display:flex;
  flex-direction:column;
  gap:10px;
}

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

.form-field label .optional{
  text-transform:none;
  letter-spacing:0;
  font-family:'Inter',sans-serif;
}

.form-field input,
.form-field textarea{
  background:transparent;
  border:none;
  border-bottom:0.5px solid var(--line);
  color:var(--off-white);
  font-family:'Inter',sans-serif;
  font-size:16px;
  padding:12px 2px;
  resize:vertical;
}

.form-field textarea{font-family:'Inter',sans-serif;}

.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--dim);opacity:0.7;}

.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-bottom-color:var(--rec);
}

.contact-form button{
  align-self:flex-start;
  border:none;
  cursor:pointer;
  margin-top:8px;
}

.contact-form button:disabled{opacity:0.6;cursor:default;}

.form-error{
  display:none;
  color:var(--rec);
  font-size:14px;
  margin-top:4px;
}

.contact-success{
  display:none;
  border:0.5px solid var(--line);
  border-left:2px solid var(--rec);
  background:var(--near-black);
  padding:40px;
}

.contact-sidebar{
  display:flex;
  flex-direction:column;
}

.contact-sidebar .contact-row{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:24px 0;
}

.contact-sidebar .contact-row:first-child{border-top:none;}

.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{
  background:var(--near-black);
  border:0.5px solid var(--line);
  border-left:2px solid var(--rec);
  display:grid;
  grid-template-columns:80px 1fr;
  gap:24px;
  padding:32px 36px;
  margin-bottom:20px;
  align-items:baseline;
}

.service-row:last-child{margin-bottom:0;}

.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;}