.hero-video-bg .hero-fallback {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Defines the hero box size */
.hero-video-bg {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 900; /* match your video */
  overflow: hidden;
}

/* Video + fallback fill the hero box */
.hero-video-bg video,
.hero-video-bg .hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Fallback image layer */
.hero-video-bg .hero-fallback {
  opacity: 1;
  transition: opacity 0.2s ease;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Video: hidden until it actually plays (prevents iOS autoplay overlay being visible) */
.hero-video-bg video {
  opacity: 0;
  transition: opacity 0.2s ease;
  object-fit: contain; /* desktop */
  object-position: center;
  z-index: 0;
}

/* Overlay content (your hero text/buttons) */
.hero-contents {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: clamp(20px, 8vw, 120px);
  padding-right: clamp(20px, 8vw, 120px);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .hero-video-bg {
    aspect-ratio: 4 / 5;
    max-height: 75vh;
  }

  .hero-video-bg video {
    object-fit: cover; /* mobile: fill the taller box */
  }
}

/* Logo shadow (keep single declaration; webkit is fine) */
.logo-shadow {
  -webkit-filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}