/* ============================================================
   Fixes layer — loaded last, overrides everything above.
   1) Banner media is never cropped at the top/bottom.
   2) Interior page heroes sit on pure black.
   ============================================================ */

/* ---------- 1. HOME BANNER: show the full frame ---------- */
.home-hero .page-hero-bg {
  background: #000;
}
.home-hero .page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/* the soft fade used to eat the top and bottom of the banner */
.home-hero .page-hero-bg::after {
  background: linear-gradient(90deg, transparent 78%, rgba(6, 6, 7, 0.5) 92%, #000 100%);
}
.home-hero .hero-network img {
  height: auto;
  width: auto;
  max-height: 88%;
  max-width: 92%;
  object-fit: contain;
}

/* full-bleed scroll film bands stay on black */
.vs-cinema,
.vs-cinema-pin,
.vs-cinema-media {
  background: #000;
}

/* ---------- 2. INTERIOR PAGE HEROES: complete black ---------- */
.page-hero:not(.home-hero) {
  background: #000 !important;
}
.page-hero:not(.home-hero)::before,
.page-hero:not(.home-hero)::after {
  display: none !important;
}
.page-hero:not(.home-hero) .page-hero-bg,
.page-hero:not(.home-hero) .page-hero-bg::after {
  background: #000;
}

/* showreel banner video: 16:9 source, so use a 16:9 frame — no top/bottom crop */
.tdc-hero-media {
  aspect-ratio: 16 / 9;
  background: #000;
}
.tdc-hero-media video {
  object-fit: contain;
  background: #000;
}

/* opaque black plate that also blocks the site-wide ambient bloom/glow layers */
.page-hero:not(.home-hero)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: auto !important;
  background: #000 !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 2 !important;
  pointer-events: none;
}
.page-hero:not(.home-hero) > *:not(.vs-hero-film) {
  z-index: 3 !important;
}

/* ---------- 3. HOME BANNER VIDEO: own band on top, hero copy below ---------- */
.home-banner-video {
  display: block;
  position: relative;
  width: 100%;
  background: #000;
  line-height: 0;
  z-index: 5;
  margin-top: var(--header-h, 78px);
  height: calc(100svh - var(--header-h, 78px));
  min-height: calc(100svh - var(--header-h, 78px));
  overflow: hidden;
}
.home-banner-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
  background: #000;
}

/* hero copy now sits under the banner video */
.page-hero.home-hero {
  min-height: 0 !important;
  height: auto !important;
  padding-top: clamp(60px, 8vw, 120px);
  padding-bottom: clamp(60px, 8vw, 120px);
  background: #000;
}
.page-hero.home-hero .page-hero-bg { display: none !important; }

/* ---------- 4. INTERIOR SHOWREEL VIDEO: bigger, borderless ---------- */
.tdc-hero {
  grid-template-columns: 1.9fr 1fr;
  max-width: 1720px;
  gap: clamp(24px, 3vw, 56px);
}
.tdc-hero-media {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  aspect-ratio: 16 / 9;
  width: 100%;
}
@media (max-width: 900px) {
  .tdc-hero { grid-template-columns: 1fr; }
}


/* About: unified "Why We Exist" block */
.about-split-copy p{ max-width:60ch; }
.about-split{ align-items:start; }
.about-split .img-frame{ position:sticky; top:120px; }
@media (max-width:900px){ .about-split .img-frame{ position:static; } }

/* Page banner image: show the full image, never cropped */
.tdc-hero-media{ aspect-ratio:auto; background:#000; }
.tdc-hero-media .tdc-hero-img{
  width:100%; height:auto; display:block; object-fit:contain; background:#000;
}

/* Page banner: single full image, no overlay content */
.page-banner{
  margin-top: 0;
  background:#000; line-height:0; width:100%;
}
.page-banner .page-banner-img{
  display:block; width:100%; height:auto; object-fit:contain; background:#000;
}