/* Background only: preserve the contact hero's existing dimensions and layout. */
.contact-hero {
  background: #071321;
}

.contact-hero .contact-background {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.contact-hero .contact-background-poster,
.contact-hero .contact-background-poster img,
.contact-hero .contact-background-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.contact-hero .contact-background-poster img,
.contact-hero .contact-background-video {
  object-fit: cover;
  object-position: center;
}

.contact-hero .contact-background-video {
  opacity: 0;
}

.contact-hero .contact-background.is-playing .contact-background-video {
  opacity: 1;
}

.contact-hero::before {
  background:
    linear-gradient(90deg, rgba(4, 13, 25, .88), rgba(5, 15, 28, .68) 42%, rgba(6, 17, 30, .24) 100%),
    linear-gradient(180deg, rgba(5, 14, 25, .24), transparent 50%);
}

@media screen and (max-width: 767px) {
  .contact-hero::before {
    background:
      linear-gradient(90deg, rgba(4, 13, 25, .78), rgba(5, 15, 28, .45)),
      linear-gradient(180deg, rgba(5, 14, 25, .2), rgba(5, 14, 25, .3));
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero .contact-background .contact-background-video {
    opacity: 0;
  }
}