/* DOUGLASFILM V15.2 REPAIR — sequential showreel, sequential card hover, approved copy, legal footer */
:root{
  --v152-deep:#082920;
  --v152-green:#123c31;
  --v152-lime:#d7ff00;
  --v152-paper:#f6f7ef;
  --v152-line:rgba(18,60,49,.18);
}

.showreel,
.showreel-media,
.reel-media,
.project-card,
.card-media,
.project-card-media,
.project-media{position:relative}

/* Hide the old placeholder only after the first curated GIF has loaded. */
.showreel.v152-reel-mounted > video,
.showreel-media.v152-reel-mounted > video,
.reel-media.v152-reel-mounted > video{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.v152-sequence-player{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--v152-deep);
  pointer-events:none;
  z-index:2;
}
.v152-sequence-player img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.001);
  transition:opacity .16s ease;
}
.v152-sequence-player img.is-active{opacity:1}

/* Keep existing labels / play controls above the GIF sequence. */
.showreel .showreel-shade,
.showreel .showreel-top,
.showreel .showreel-bottom,
.showreel .play-orb,
.showreel-media > button,
.showreel-media #showreel-play,
.reel-media ~ *,
.reel-media .film-label{position:relative;z-index:4}

/* Card hover: exactly one 16:9 GIF fills the card media area at a time. */
.project-card .v152-hover-sequence{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#0b201a;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:90;
  transition:opacity .13s ease,visibility .13s ease;
}
.project-card .v152-hover-sequence.is-active{opacity:1;visibility:visible}
.project-card .v152-hover-sequence img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Neutralize all known 3×3 hover layers only inside index cards. Detail-page 9-media remains untouched. */
.project-card .hover-grid,
.project-card .micro-grid,
.project-card .project-hover-grid,
.project-card .hover-media-grid,
.project-card .media-preview-grid{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Approved studio copy */
.v152-approved-copy{white-space:normal}
.studio-statement .statement-copy.v152-approved-copy,
.studio-intro .studio-copy.v152-approved-copy{
  text-transform:uppercase;
  letter-spacing:.01em;
}

/* Business/legal footer — follows the current deep-green + lime design cue. */
.v152-legal-footer{
  background:var(--v152-deep);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.20);
  display:grid;
  grid-template-columns:1.05fr .9fr 1.35fr 1fr;
  gap:clamp(22px,4vw,70px);
  padding:34px clamp(18px,2vw,34px) 40px;
}
.v152-legal-footer .v152-legal-col{min-width:0}
.v152-legal-footer .v152-legal-label{
  display:block;
  margin-bottom:14px;
  color:var(--v152-lime);
  font-size:8px;
  line-height:1;
  letter-spacing:.11em;
  font-weight:700;
}
.v152-legal-footer p,
.v152-legal-footer a{
  display:block;
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:10px;
  line-height:1.7;
  letter-spacing:.015em;
}
.v152-legal-footer .v152-legal-brand{color:#fff;font-weight:700;letter-spacing:.03em}
.v152-legal-footer a:hover{color:var(--v152-lime)}

@media(max-width:900px){.v152-legal-footer{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.v152-legal-footer{grid-template-columns:1fr;gap:26px}}
@media(prefers-reduced-motion:reduce){
  .v152-sequence-player img,.project-card .v152-hover-sequence{transition:none!important}
}