.s-hero-video{
  width:100%;
}

.s-hero-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:var(--mid);
}

.s-hero-video-el{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:var(--mid);
}

.s-hero-video-el::-webkit-media-controls-panel{
  background:linear-gradient(transparent,rgba(11,18,32,0.88));
}

.s-hero-video-play{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:none;
  background:rgba(11,18,32,0.22);
  cursor:pointer;
  transition:opacity 0.25s ease,visibility 0.25s ease;
}

.s-hero-video-play-icon{
  width:clamp(3.5rem,12vw,4.5rem);
  height:clamp(3.5rem,12vw,4.5rem);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--ink);
  background:linear-gradient(135deg,var(--gold),var(--gold-l));
  box-shadow:0 10px 36px rgba(0,0,0,0.45);
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}

.s-hero-video-play-icon svg{
  margin-left:0.15rem;
}

.s-hero-video-play:hover .s-hero-video-play-icon,
.s-hero-video-play:focus-visible .s-hero-video-play-icon{
  transform:scale(1.06);
  box-shadow:0 12px 40px rgba(200,168,75,0.35);
}

.s-hero-video-play:focus-visible{
  outline:2px solid var(--gold-l);
  outline-offset:-4px;
}

.s-hero-video.is-playing .s-hero-video-play{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@media (max-width:992px){
  .s-hero-video-frame{
    border-radius:10px;
  }
}

@media (prefers-reduced-motion:reduce){
  .s-hero-video-play,
  .s-hero-video-play-icon{
    transition:none;
  }
}