/* ============================================================
   WILDHOG — MAIN STYLES
   Spacing: 8px grid (--space-N = N×8px)
   Palette: near-black / warm-white / amber accent
   Mobile-first throughout
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────── */
:root {
  /* Color — black, white, one accent */
  --color-bg:       #080808;
  --color-surface:  #111111;
  --color-border:   #222222;
  --color-text:     #F2EFE9;        /* warm white */
  --color-muted:    #6B6860;
  --color-accent:   #F15A2B;        /* red-orange — brand accent */

  /* Stage tag text colors — ripens toward released (hot = red) */
  --color-stage-released:    #F15A2B;  /* ripe = accent red-orange */
  --color-stage-production:  #D48B2E;  /* warming = amber/orange */
  --color-stage-development: #D4C832;  /* early = yellow */

  /* 8px grid — --space-N = N×8px */
  --space-1:  0.5rem;    /*  8px */
  --space-2:  1rem;      /* 16px */
  --space-3:  1.5rem;    /* 24px */
  --space-4:  2rem;      /* 32px */
  --space-6:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-10: 5rem;      /* 80px */
  --space-12: 6rem;      /* 96px */
  --space-16: 8rem;      /* 128px */
  --space-20: 10rem;     /* 160px */

  /* Layout */
  --nav-height:    4rem;      /* 64px */
  --content-width: 1280px;
  --text-width:    720px;
  --site-margin:   clamp(1.5rem, 5vw, 5rem);  /* consistent left/right margin */
  /* On extra-wide displays, h-pad centers content inside --content-width, matching the nav */
  --h-pad: max(var(--site-margin), calc((100vw - var(--content-width)) / 2 + var(--site-margin)));

  /* Transitions */
  --ease-fast: 150ms ease;
  --ease-mid:  300ms ease;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; color: inherit; font: inherit; }
a { text-decoration: none; color: inherit; }

::selection { background: var(--color-accent); color: #000; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* ── Unified Button ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4em 1.2em;
  border: 3px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
}
.btn:hover { background: var(--color-accent); color: #000; text-decoration: none; }


/* ── Site Nav ──────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-bg);
}
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--site-margin);
  max-width: var(--content-width);
  margin: 0 auto;
}
.site-header { transition: background var(--ease-mid); }
.site-header.is-scrolled { background: var(--color-accent); }
.site-header.is-scrolled .site-nav__links a,
.site-header.is-scrolled .site-nav__logo { color: #fff; }
.site-header.is-scrolled .site-nav__links a[aria-current="page"] { opacity: 1; }
.site-header.is-scrolled .site-nav__toggle span { background: #fff; }
.site-nav__logo {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.site-nav__logo-text { display: block; }
.site-nav__logo img { display: block; height: 2.5rem; width: auto; }

/* Frontpage: hide nav logo until user scrolls past the hero */
.template-home .site-nav__logo img {
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.template-home .site-header.logo-visible .site-nav__logo img {
  opacity: 1;
  pointer-events: auto;
}
.site-nav__links {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}
.site-nav__links a {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  opacity: 0.5;
  transition: opacity var(--ease-fast);
  /* 44px touch target */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] { opacity: 1; }

/* Hamburger — mobile only */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-1);
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.site-nav__toggle span {
  display: block;
  width: 20px;
  height: 3px;
  background: var(--color-text);
  transition: var(--ease-fast);
}

@media (max-width: 640px) {
  .site-nav { padding: 0 var(--site-margin); }
  .site-nav__toggle { display: flex; }
  .site-nav__links {
    display: none;
    position: fixed;
    top: var(--nav-height);
    inset-inline: 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    gap: 0;
  }
  .site-nav__links li { width: 100%; }
  .site-nav__links a {
    width: 100%;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--color-border);
  }
  .site-nav__links.is-open { display: flex; }
}

/* ── Page offset ───────────────────────────────────────── */
main { padding-top: var(--nav-height); }


/* ── Showreel Hero ─────────────────────────────────────── */
.showreel-hero {
  position: relative;
  height: calc(100dvh - var(--nav-height));
  min-height: 400px;
  overflow: hidden;
  background: var(--color-surface);
}
.showreel-hero__video,
.showreel-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showreel-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-8) var(--site-margin);
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
}
.showreel-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
.showreel-hero__subtitle {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-top: calc(var(--space-1) * -1);
}
/* Logo sits above the title; font-size ties 1em to the title size, so its
   width tracks the word "Wildhog" (~4em of Space Mono). max-height caps it to
   the free vertical space so the tall monogram never clips on wide/short screens. */
.showreel-hero__logo {
  display: block;
  font-size: var(--text-2xl);
  width: auto;
  height: auto;
  max-width: 4.08em;
  max-height: calc(100dvh - 26rem);
}

@media (max-width: 640px) {
  .showreel-hero__overlay { padding: var(--space-4) var(--space-3); }
  .scroll-cue { display: none; }
}

/* Scroll cue — right edge, vertically aligned with hero text block */
.scroll-cue {
  position: absolute;
  right: var(--site-margin);
  bottom: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
  z-index: 2;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}
.scroll-cue::after {
  content: '←';
  font-size: var(--text-sm);
  animation: scroll-cue-bob 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue::after { animation: none; }
}


/* ── Shared page hero (about / contact) ───────────────── */
.page-hero {
  position: relative;
  max-height: 60dvh;
  overflow: hidden;
  background: var(--color-surface);
}
.page-hero__video,
.page-hero__image {
  width: 100%;
  max-height: 60dvh;
  object-fit: cover;
  display: block;
}

/* ── Shared page intro (about) ─────────────────────────── */
.page-intro {
  position: relative;
  padding: var(--space-12) var(--h-pad);
}
.page-intro::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--h-pad);
  right: var(--h-pad);
  height: 1px;
  background: var(--color-border);
}
.contact .page-intro::after { display: none; }
.about .page-intro::after   { display: none; }
.contact .page-intro__lead  { color: var(--color-text); }
/* About: big statement is a title for the bio — tighten gap */
.about .page-intro   { padding-bottom: var(--space-3); }
/* Contact: tighten gap between intro text and contact people */
.contact .page-intro { padding-bottom: var(--space-2); }
.page-intro__inner { }
.page-intro__text {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.page-intro__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}
.page-intro__lead {
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-loose);
  color: var(--color-muted);
  max-width: 60ch;
}

/* ── Home News (big optional announcement) ─────────────── */
.home-news {
  padding: var(--space-12) var(--h-pad);
}
.home-news__inner {
}
.home-news__text {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* ── Home Intro ────────────────────────────────────────── */
.home-intro {
  background: var(--color-accent);
  padding: var(--space-12) var(--h-pad);
  position: relative;
  overflow: hidden;
}
.home-intro__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(360px, 80%, 1100px);
  height: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
/* Static brand mark is a tall portrait monogram.
   --logo-size (% from panel, 100 = full screen width) and opacity are set inline
   from the home blueprint. Section's overflow:hidden crops the tall portrait height. */
.home-intro__logo--mark {
  width: calc(100vw * (var(--logo-size, 100) / 100));
  height: auto;
  z-index: 0;
}
.home-intro__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.home-intro__text {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #000;
}
/* Button on red background — black border/text, inverts on hover */
.home-intro .btn {
  border-color: #000;
  color: #000;
}
.home-intro .btn:hover { background: #000; color: #fff; }


/* ── Awards Strip ──────────────────────────────────────── */
.awards-strip {
  padding: var(--space-6) 0;
  overflow: hidden;
}
.awards-strip__title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 400;
  margin-bottom: var(--space-4);
  margin-left: var(--h-pad);
}
/* Ticker — track holds two copies of the list, loops forever.
   Full-bleed (no horizontal padding on strip) so no gap at start.
   Each list carries the inter-copy gap as padding-right so
   translateX(-50%) lands exactly one copy over. */
.awards-strip__inner {
  display: flex;
  width: max-content;
  animation: awards-marquee 50s linear infinite;
  animation-delay: -20s;
}
a.awards-strip__item { text-decoration: none; color: inherit; }
a.awards-strip__item--laurel .awards-strip__logo { transition: opacity 0.2s; }
a.awards-strip__item--laurel:hover .awards-strip__logo { opacity: 0.8; }
@keyframes awards-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .awards-strip__inner { animation: none; flex-wrap: wrap; width: auto; padding: 0 var(--h-pad); }
  .awards-strip__list--clone { display: none; }
}
.awards-strip__list {
  display: flex;
  gap: var(--space-20);
  align-items: center;
  flex-shrink: 0;
  padding-right: var(--space-20);
}
.awards-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.awards-strip__text { display: flex; align-items: center; gap: var(--space-3); }
.awards-strip__logo { height: 3rem; width: auto; opacity: 0.7; }
.awards-strip__year { color: var(--color-text); }

/* Laurel award — large wreath on top, title stacked below it */
.awards-strip__item--laurel {
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.awards-strip__item--laurel .awards-strip__logo {
  height: clamp(10.5rem, 15vw, 16.5rem);
  display: block;
  opacity: 1;
}
.awards-strip__item--laurel .awards-strip__text {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1px;
  max-width: 16rem;
  white-space: normal;
  line-height: 1.2;
}
.awards-strip__item--laurel .awards-strip__name { font-weight: 700; }
.awards-strip__item--laurel .awards-strip__year { color: var(--color-text); }
.awards-strip__production { color: var(--color-text); font-style: normal; }


/* ── Spearhead / horizontal scroll ────────────────────── */
.spearhead {
  position: relative;
  padding: var(--space-10) 0 0;
}
.spearhead__header {
  padding: 0 var(--h-pad) var(--space-4);
}
.spearhead__title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.spearhead__track {
  display: flex;
  gap: 0;
  padding: 0 var(--h-pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.spearhead__track::-webkit-scrollbar { display: none; }
.spearhead__track .production-card {
  /* ~2.5 cards visible across the viewport (left inset accounted for) */
  flex: 0 0 calc((100vw - var(--h-pad)) / 2.5);
  scroll-snap-align: start;
}
.spearhead__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  min-width: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity var(--ease-fast);
  z-index: 10;
}
.spearhead__arrow:hover { opacity: 1; }
.spearhead__arrow--prev { left: 0; }
.spearhead__arrow--next { right: 0; }

@media (max-width: 640px) {
  .spearhead { padding: var(--space-6) 0; }
  .spearhead__track { flex-direction: column; overflow-x: visible; padding: 0 var(--site-margin); gap: 0; }
  .spearhead__track .production-card { flex: none; width: 100%; }
  .spearhead__arrow { display: none; }
  .spearhead__header { padding: 0 var(--site-margin) var(--space-3); }
}


/* ── Partners ──────────────────────────────────────────── */
.partners {
  padding: var(--space-10) var(--h-pad);
}
.partners__title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 400;
  margin-bottom: var(--space-4);
}
.partners__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
  justify-content: center;
}
.partners__item img { height: 4.5rem; width: auto; opacity: 0.9; transition: opacity var(--ease-fast); }
.partners__item img:hover { opacity: 1; }
.partners__name { font-size: var(--text-xs); color: var(--color-muted); }


/* ── Stage Tags ────────────────────────────────────────── */
.stage-tag {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-display);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: 400;
}
/* Stage tags: plain white text, no background */
.stage-tag--released,
.stage-tag--in-production,
.stage-tag--in-development { background: transparent; color: var(--color-text); }


/* ── Production Card ───────────────────────────────────── */
.production-card { background: var(--color-surface); }
.production-card__link { display: block; color: inherit; }
.production-card__image {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--color-border);
}
.production-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease-mid);
}
.production-card__link:hover .production-card__image img { transform: scale(1.03); }
.production-card__placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--color-border),
    var(--color-border) 1px,
    transparent 1px,
    transparent 10px
  );
}
.production-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.production-card__format {
  font-family: var(--font-display);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
}
.production-card__body {
  padding: var(--space-3) var(--space-3) var(--space-4);
  transition: background var(--ease-fast);
}
.productions-grid .production-card:hover .production-card__body { background: var(--color-accent); }
.productions-grid .production-card:hover .production-card__title { color: #fff; }
.productions-grid .production-card:hover .production-card__year  { color: rgba(255,255,255,0.7); }
.production-card__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}
.production-card__year {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-weight: 300;
}


/* ── Productions Hero (rotating) ──────────────────────── */
.productions-hero {
  position: relative;
  aspect-ratio: 16/7;
  min-height: 260px;
  overflow: hidden;
  background: var(--color-surface);
}
.productions-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.productions-hero__slide.is-active { opacity: 1; }
.productions-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.productions-hero__placeholder { width: 100%; height: 100%; background: var(--color-border); }
.productions-hero__overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-6) var(--space-4);
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.productions-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
.hero-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  min-width: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity var(--ease-fast);
}
.hero-arrow:hover { opacity: 1; }
.hero-arrow--prev { left: var(--space-2); z-index: 10; }
.hero-arrow--next { right: var(--space-2); z-index: 10; }

@media (max-width: 640px) {
  .productions-hero { aspect-ratio: 4/3; }
  .productions-hero__overlay { padding: var(--space-3) var(--space-3); }
}


/* ── Filter Bar ────────────────────────────────────────── */
.filter-bar {
  padding: var(--space-6) var(--h-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
.filter-bar__row { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.filter-bar__label {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  min-width: 4.5rem;
  font-weight: 400;
}
.filter-bar__pills { display: flex; gap: var(--space-1); flex-wrap: wrap; }
/* Filter pills share the .btn language — 3px accent outline, fill-to-black when on */
.filter-pill {
  font-family: var(--font-display);
  min-height: 44px;
  padding: 0.4em 1.2em;
  border: 3px solid var(--color-accent);
  border-radius: 0;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  background: transparent;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
}
.filter-pill:hover { background: var(--color-accent); color: #000; }
.filter-pill.is-active { background: var(--color-accent); color: #000; }

@media (max-width: 640px) {
  .filter-bar { padding: var(--space-4) var(--site-margin); }
  .filter-bar__row { justify-content: flex-start; }
}


/* ── Productions Grid ──────────────────────────────────── */
.productions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--color-surface);
  min-height: 40vh;
}
.productions-grid .production-card { background: var(--color-surface); }
.productions-grid .production-card.is-hidden { display: none; }
.productions-grid.is-empty::after {
  content: 'No productions match the selected filters.';
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  padding: var(--space-12) var(--site-margin);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
}

@media (min-width: 480px)  { .productions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .productions-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .productions-grid { grid-template-columns: repeat(4, 1fr); } }


/* ── Production Detail ─────────────────────────────────── */
.production-detail__hero {
  position: relative;
  aspect-ratio: 16/7;
  min-height: 260px;
  overflow: hidden;
  background: var(--color-surface);
}
.production-detail__hero-image,
.production-detail__hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.production-detail__hero-placeholder { width: 100%; height: 100%; background: var(--color-border); }
.production-detail__hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6) var(--site-margin);
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
}
.production-detail__hero-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: #fff;
}

.production-detail__body {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-10) var(--site-margin);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 900px) {
  .production-detail__body {
    grid-template-columns: 1fr 300px;
    gap: var(--space-16);
  }
  .production-detail__header { grid-column: 1; }
  .production-info { grid-column: 2; grid-row: 1 / 4; }
  .production-detail__gallery { grid-column: 1; }
  .production-detail__video { grid-column: 1; }
}

.production-detail__logline {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 300;
  line-height: var(--leading-loose);
  color: var(--color-muted);
}

.production-info__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
}
.production-info__grid dt {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 400;
  padding-top: 0.15em;
}
.production-info__grid dd {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: var(--leading-normal);
}

.production-detail__gallery { padding-bottom: var(--space-8); }

.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-surface);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

@media (max-width: 640px) {
  .production-detail__hero { aspect-ratio: 4/3; }
  .production-detail__body { padding: var(--space-6) var(--space-3); gap: var(--space-6); }
}


/* ── Gallery ───────────────────────────────────────────── */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  background: var(--color-border);
}
.gallery__item {
  aspect-ratio: 3/2;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--color-surface);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease-mid); }
.gallery__item:hover img { transform: scale(1.03); }

@media (min-width: 640px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  /* Lock columns when there aren't enough images to fill a row */
  .gallery--1col { grid-template-columns: 1fr; }
  .gallery--2col { grid-template-columns: repeat(2, 1fr); }
}


/* ── Lightbox ──────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.96);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}
.lightbox[hidden] { display: none; }
.lightbox__content { position: relative; max-width: 90vw; max-height: 90dvh; }
.lightbox__image { max-width: 90vw; max-height: 85dvh; object-fit: contain; }
.lightbox__caption {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-2);
  font-weight: 300;
}
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: fixed;
  font-size: var(--text-lg);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: color var(--ease-fast);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { color: var(--color-accent); }
.lightbox__close { top: var(--space-2); right: var(--space-4); }
.lightbox__prev  { left: var(--space-2); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--space-2); top: 50%; transform: translateY(-50%); }


/* ── About ─────────────────────────────────────────────── */
.about-hero { overflow: hidden; }
.about-hero__image { width: 100%; max-height: 65dvh; object-fit: cover; display: block; }

.about-bio { position: relative; padding: var(--space-3) var(--h-pad) var(--space-4); }
.about-bio::after { display: none; }
.about-bio__inner {
  font-size: var(--text-md);
  font-weight: 300;
  line-height: var(--leading-loose);
}
.about-bio__inner p + p { margin-top: var(--space-4); }

.about-team { padding: var(--space-4) var(--h-pad) var(--space-12); }
.about-team__intro {
  margin: 0 0 var(--space-10);
  font-size: var(--text-md);
  font-weight: 300;
  line-height: var(--leading-loose);
}
.about-team__intro p + p { margin-top: var(--space-3); }
.about-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .about-team__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}
.team-member { display: flex; flex-direction: column; gap: var(--space-4); }
.team-member__photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.team-member__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.team-member__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}
.team-member__role {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: 400;
}
.team-member__bio {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-loose);
  color: var(--color-muted);
}
.team-member__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }

/* Red CTA band — mirrors .home-intro so every page gets one red moment */
.about-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-accent);
  padding: var(--space-12) var(--h-pad);
  /* tall enough to fully contain the logo (+ its padding) so it never clips */
  min-height: clamp(240px, 33vh, 420px);
}
/* Big white brand mark, centered, fills full viewport width — parallax via footer.js */
.about-cta__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: auto;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  z-index: 0;
}
.about-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.about-cta__text {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #000;
}
.about-cta .btn { border-color: #000; color: #000; }
.about-cta .btn:hover { background: #000; color: #fff; }

/* about mobile padding already uses --site-margin which is fluid */


/* ── Contact ───────────────────────────────────────────── */

/* Open Positions — red band, black text (the contact page's red block) */
.open-positions {
  padding: var(--space-12) var(--h-pad);
  background: var(--color-accent);
}
.open-positions .open-positions__title { background: transparent; color: #000; opacity: 0.7; }
.open-positions .open-position__title { color: #000; }
.open-positions .open-position__description { color: rgba(0,0,0,0.75); }
.open-positions .open-position__apply { color: #000; }
.open-positions .open-position__apply a { color: #000; border-bottom-color: #000; }
.open-positions__title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 400;
  margin-bottom: var(--space-8);
}
.open-position { margin-bottom: var(--space-10); }
.open-position:last-child { margin-bottom: 0; }
.open-position__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}
.open-position__description {
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-loose);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}
.open-position__description p + p { margin-top: var(--space-3); }
.open-position__apply { font-size: var(--text-sm); font-weight: 300; }
.open-position__apply a { color: var(--color-accent); border-bottom: 1px solid var(--color-accent); padding-bottom: 0.1em; }

/* Form section */
.contact-form-section {
  padding: var(--space-12) var(--site-margin);
}
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 860px; margin-inline: auto; }
.form-field { display: flex; flex-direction: column; gap: var(--space-1); }
.form-field label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 400;
}
.form-field input,
.form-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  transition: border-color var(--ease-fast);
  border-radius: 0;
  outline: none;
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 8rem; }
.form-field input:focus,
.form-field textarea:focus { border-bottom-color: var(--color-accent); }
.form-field.has-error input,
.form-field.has-error textarea { border-bottom-color: #c44; }
.form-field__error { font-size: var(--text-xs); color: #c44; font-family: var(--font-body); }
.contact-form .btn { align-self: flex-start; margin-top: var(--space-2); }
.contact-form__success {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
}
.contact-form__error {
  padding: var(--space-2);
  color: #c44;
  border: 1px solid #c44;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
}

/* Contact people — direct email links */
.contact-info {
  padding: var(--space-3) var(--h-pad) var(--space-6);
}
.contact-casting {
  padding: 0 var(--h-pad) var(--space-12);
}
.contact-casting p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}
.contact-casting a { color: var(--color-text); text-decoration: underline; }
.contact-info__inner {
}
.contact-info__person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
}
.contact-info__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
.contact-info__role {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 400;
}
.contact-info__address {
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--color-muted);
  line-height: var(--leading-loose);
}


/* ── Eyebrow labels — red pills, black text ────────────── */
.awards-strip__title,
.spearhead__title,
.partners__title,
.open-positions__title,
.form-field label {
  display: inline-block;
  width: fit-content;
  background: var(--color-accent);
  color: #000;
  padding: 0.3em 0.55em;
}


/* ── Footer ────────────────────────────────────────────── */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-accent);
  min-height: clamp(240px, 33vh, 420px);
  padding: var(--space-8) var(--h-pad) var(--space-6);
}
.site-footer__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: auto;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  z-index: 0;
}
.site-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.site-footer__cta {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: #000;
  transition: opacity var(--ease-fast);
}
.site-footer__cta:hover { opacity: 0.7; }
.site-footer__cta--text { cursor: default; }
.site-footer__cta--text:hover { opacity: 1; }
.site-footer__casting {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: #000;
}
.site-footer__casting a { color: #000; text-decoration: underline; }
.site-footer__email {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: #000;
  transition: opacity var(--ease-fast);
  word-break: break-all;
}
.site-footer__email:hover { opacity: 0.7; }
.site-footer__meta {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(0,0,0,0.6);
  font-weight: 400;
}
.site-footer__meta a { color: rgba(0,0,0,0.6); transition: color var(--ease-fast); }
.site-footer__meta a:hover { color: #000; }


/* ── Error page ────────────────────────────────────────── */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 60dvh;
  text-align: center;
  padding: var(--space-4);
}
.error-page h1 { font-size: var(--text-2xl); }


.production-detail__nav {
  padding: var(--space-6) var(--h-pad);
}


/* ── Privacy Policy ────────────────────────────────────── */
.privacy-policy {
  max-width: var(--text-width);
  margin: 0 auto;
  padding: var(--space-12) var(--site-margin);
}
.privacy-policy h1 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
}
.privacy-policy__updated {
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-10);
}
.privacy-policy__section {
  margin-bottom: var(--space-8);
}
.privacy-policy__section h2 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}
.privacy-policy__section h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-2);
  margin-top: var(--space-4);
}
.privacy-policy__section p {
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-loose);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}
.privacy-policy__section ul {
  list-style: disc;
  padding-left: var(--space-4);
  margin-bottom: var(--space-3);
}
.privacy-policy__section ul li {
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-loose);
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}
.privacy-policy__section a { color: var(--color-accent); border-bottom: 1px solid var(--color-accent); }
.privacy-policy__section strong { color: var(--color-text); font-weight: 700; }
.privacy-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: var(--leading-loose);
}
.privacy-note a { color: var(--color-muted); border-bottom: 1px solid var(--color-muted); }


/* ── Utility ───────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}