

/* DG-CR-P003-002 v2.4 — page-scoped poster-first Cinematography proof only. */

.service-chapter__cinema-video .video-frame--poster {

  aspect-ratio:16/9;

  background:#111712;

}

.service-chapter__cinema-video .video-poster-state {

  position:absolute;

  inset:0;

  display:grid;

  place-items:center;

  isolation:isolate;

  overflow:hidden;

}

.service-chapter__cinema-video .video-poster {

  width:100%;

  height:100%;

  display:block;

  object-fit:cover;

}

.service-chapter__cinema-video .video-poster-state::after {

  content:"";

  position:absolute;

  inset:0;

  z-index:1;

  background:linear-gradient(180deg,rgba(8,15,11,.08) 0%,rgba(8,15,11,.16) 42%,rgba(8,15,11,.72) 100%);

  pointer-events:none;

}

.service-chapter__cinema-video .video-poster__play {

  position:absolute;

  left:50%;

  top:50%;

  transform:translate(-50%,-50%);

  z-index:2;

  display:inline-flex;

  align-items:center;

  gap:.75rem;

  min-height:3.1rem;

  padding:.82rem 1.05rem;

  border:1px solid rgba(243,237,227,.72);

  border-radius:999px;

  background:rgba(18,29,23,.86);

  color:#f3ede3;

  font:600 .68rem/1 Inter,system-ui,sans-serif;

  letter-spacing:.14em;

  text-transform:uppercase;

  cursor:pointer;

  transition:background .2s ease,transform .2s ease;

}

.service-chapter__cinema-video .video-poster__play:hover {

  background:rgba(18,29,23,.98);

  transform:translate(-50%,-51%);

}

.service-chapter__cinema-video .video-poster__play:focus-visible {

  outline:2px solid #f3ede3;

  outline-offset:4px;

}

.service-chapter__cinema-video .video-poster__play-icon {

  width:0;

  height:0;

  border-top:.42rem solid transparent;

  border-bottom:.42rem solid transparent;

  border-left:.65rem solid currentColor;

}

.service-chapter__cinema-video .video-frame[data-video-state="loading"]::after,

.service-chapter__cinema-video .video-frame[data-video-state="fallback"]::after {

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:linear-gradient(180deg,rgba(8,15,11,.08),rgba(8,15,11,.22));

}

.service-chapter__cinema-video .service-chapter__cinema-meta {

  align-items:center;

}

.service-chapter__cinema-video .video-fallback-link {

  color:#f3ede3;

  text-decoration:underline;

  text-decoration-thickness:1px;

  text-underline-offset:.22em;

}

.service-chapter__cinema-video .video-fallback-link:focus-visible {

  outline:2px solid #f3ede3;

  outline-offset:4px;

}

@media (prefers-reduced-motion:reduce) {

  .service-chapter__cinema-video .video-poster__play { transition:none; }

}

