/* Hero pin, restored without a library.
 * The original (HeroWrapper, module 7370) pinned the hero with GSAP ScrollTrigger using an empty
 * timeline, pin: true and pinSpacing: false. That is a pure pin: the hero holds still while the
 * rest of the page scrolls up over it. position: sticky gives the same result with no script.
 * Everything after the hero sits above it so the page covers the hero as it scrolls. */
.style_Hero__wrapper__MHTo8 {
  position: sticky;
  top: 0;
  z-index: 0;
}
.style_Hero__wrapper__MHTo8 ~ * {
  position: relative;
  z-index: 1;
}

/* No video sizing here: the original stylesheet already sets the container's <video> to
   width 100%, height 100%, object-fit cover. */

/* Hero on short screens (added 2026-10-06, after Ajay saw the buttons cut off). The original fixes the hero at
   80vh (85vh below 1180px) with overflow hidden, and from 1400px wide the headline jumps to 5rem. On a wide but
   short window (1440x659 is a common laptop viewport with Windows display scaling) the content needs ~670px, so the
   buttons were clipped or hidden entirely. The original page has the same flaw; same stylesheet.
   1. The hero grows to fit its content instead of clipping. min-height keeps the original look on normal screens,
      and the inner column still fills it so the logo stays top and the text stays at the bottom.
   2. From 1400px the headline also scales with the screen height, so the hero fits above the fold. */
.style_Hero__wrapper__MHTo8 {
  display: flex;
  flex-direction: column;
}
.style_Hero__wrapper__MHTo8 > .style_Hero__DDERN {
  flex: 1 0 auto;
  height: auto;
}
@media (max-width: 73.749em) {
  .style_Hero__wrapper__MHTo8 { height: auto; min-height: 85vh; }
}
@media (min-width: 73.75em) {
  .style_Hero__wrapper__MHTo8 { height: auto; min-height: 80vh; }
}
@media (min-width: 87.5em) {
  .style_Hero__content__FTS6s h2 { font-size: min(5rem, 9.5vh); }
}