.hero-section {
  height: 100svh;
}

.hero-section .hero-sticky {
  height: 100svh;
}

.hero-section .hero-video-wrapp {
  /* The fixed decorative layer must not intercept links in later sections. */
  pointer-events: none;
}

.hero-section .lottie-animation {
  width: 0.9375rem;
  /* Compensate for the empty space below the arrow inside its Lottie canvas. */
  bottom: 0.125rem;
}

.hero-pattern {
  position: absolute;
  z-index: 0;
  inset: var(--basic-size--10px);
  overflow: hidden;
  border-radius: var(--basic-size--25px);
  pointer-events: none;
}

.hero-pattern-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 991px) {
  .hero-pattern {
    border-radius: var(--basic-size--10px);
  }
}