body.production{ padding-top:0; }

.prod-hero{
  position:relative; height:100vh; height:100dvh; min-height:560px;
  display:flex; flex-direction:column; justify-content:center;
  background:
    linear-gradient(180deg, rgba(10,10,12,.15) 0%, rgba(10,10,12,.75) 100%),
    radial-gradient(120% 90% at 20% 20%, #1a1d24 0%, #0a0a0c 60%);
}
.prod-hero .letterbox{
  position:absolute; left:0; right:0; height:clamp(1.6rem,5vh,4.2rem);
  background:var(--black); z-index:3;
}
.prod-hero .letterbox.top{ top:0; }
.prod-hero .letterbox.bottom{ bottom:0; }

.prod-hero-inner{ padding:0 clamp(1.4rem,4vw,3rem); position:relative; z-index:2; }
.prod-hero .slate{
  display:flex; gap:1.2rem; align-items:center; margin-bottom:1.6rem;
  font-family:var(--f-black); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--white-dim);
}
.prod-hero .slate span.dot{ width:6px; height:6px; border-radius:50%; background:var(--cobalt); display:inline-block; }
.prod-hero h1{ max-width:14em; }
.prod-hero .lede{ margin-top:1.6rem; }
.prod-hero .cta-row{ margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; }

.prod-hero .ph{ position:absolute; inset:0; z-index:0; opacity:.5; }
.prod-hero .photo{ position:absolute; inset:0; z-index:0; }
.prod-hero .photo::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,12,.35) 0%, rgba(10,10,12,.88) 100%),
    linear-gradient(90deg, rgba(10,10,12,.55) 0%, transparent 60%);
}
.prod-hero .photo img{ object-position:center 20%; }

.reel-note{
  position:absolute; right:clamp(1.4rem,4vw,3rem); bottom:clamp(3.5rem,7vh,6rem);
  z-index:2; text-align:right;
  font-family:var(--f-black); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--white-dim);
}

/* services */
.services-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:3rem; }

/* selected work grid */
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }

/* portfolio rows (image/video + write-up) — used by the 3 named pieces */
.portfolio-row{
  display:grid; grid-template-columns:1fr 1.3fr; gap:2.4rem; align-items:start;
  margin-bottom:3.5rem;
}
.portfolio-row-last{ margin-bottom:0; }

@media (max-width:760px){
  .portfolio-row{ grid-template-columns:1fr; gap:1.4rem; }
}

/* real embedded video — 16:9, same rounded footprint as the work items */
.video-embed{
  position:relative; width:100%; aspect-ratio:16/9;
  background:var(--black-soft); overflow:hidden;
}
.video-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.work-item{ position:relative; aspect-ratio:16/10; }
.work-item .ph{ position:absolute; inset:0; }
.work-item .play{
  position:absolute; top:50%; left:1.4rem; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.work-item:hover .play{ background:var(--cobalt); border-color:var(--cobalt); }
.work-item .play::after{
  content:''; width:0; height:0;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-left:11px solid var(--white); margin-left:3px;
}
.work-item .meta{
  position:absolute; left:1.4rem; bottom:1.2rem;
  font-family:var(--f-black); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
}
.work-item .meta small{ display:block; font-family:var(--f-body); font-size:.7rem; letter-spacing:.08em; color:var(--white-dim); margin-top:.3rem; text-transform:uppercase; }

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

/* contact / cta band */
.cta-band{
  background:var(--black-soft);
  padding:clamp(4rem,9vw,7rem) 0;
  text-align:center;
}
.cta-band .wrap{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }