/* A single sharp film fills the hero, cropping excess area proportionally. */
.hero-film-frame {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  mask-image: none;
  -webkit-mask-image: none;
}
.hero-media #hero-video { object-fit: cover; object-position: center 52%; filter: none; }
.hero-media { background: #06162a; }
.hero-shade { background: linear-gradient(90deg, #06162ae8, #06162a99 32%, #06162a26 58%, transparent 78%), linear-gradient(0deg, #06162acc, transparent 25%); }

.hero { --hero-control-size: 32px; }
.hero .scroll-icon, .hero .video-control-icon {
  width: var(--hero-control-size);
  height: var(--hero-control-size);
  flex: 0 0 var(--hero-control-size);
}
.hero .video-control-icon svg { width: 17px; height: 17px; }

@media (max-width: 700px) {
  .hero { --hero-control-size: 29px; }
  .hero-media #hero-video { object-position: center; }
  .hero-shade { background: linear-gradient(180deg, #06162a99, transparent 75%), linear-gradient(90deg, #06162aa6, #06162a12), linear-gradient(0deg, #06162acc, transparent 25%); }
}