/* Mobile-first hero built from the selected first visual concept. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.hero {
  min-height: 0;
  aspect-ratio: 941/1672;
  background: #07171d;
}
.hero-visual {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-visual img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quick-proof {
  position: relative;
  z-index: 2;
  box-shadow: 0 -12px 30px #04161c59;
}
.mobile-sticky {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.mobile-sticky.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
@media (min-width: 700px) {
  .hero {
    aspect-ratio: 3/4;
  }
  .hero-visual img {
    object-position: center 45%;
  }
}

/* Desktop-only correction: keep the original mobile/site structure and show
   the complete hero visual without cropping or shifting its composition. */
@media (min-width: 700px) {
  .hero {
    aspect-ratio: auto;
    min-height: 0;
    background: #07171d;
  }
  .hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 760px;
    background: #07171d;
  }
  .hero-visual img {
    width: 100%;
    height: auto;
    max-height: 860px;
    object-fit: contain;
    object-position: center;
  }
}