/* Scroll-over-hero effect
   - Keeps hero (reel + caption) fixed behind
   - Allows all content below to scroll up and cover it
   - Ensures content stays under the fixed top nav/logo
*/

#main-nav {
  z-index: 9999; /* above everything */
}

/* Keep the reel pinned behind the page content */
.home #hero,
#hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  z-index: 1;
}

/* Make sure the hero internals fill the fixed area */
#hero .hero-fullscreen,
#hero #video-wrapper {
  height: 100%;
  width: 100%;
}

#hero #video-mp4 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrolling content that “slides up” over the hero */
#scroll-content {
  position: relative;
  z-index: 5;
  margin-top: 100vh;
  margin-top: 100svh;
  background: #f2f2f2; /* matches your light grey section background */
}

/* Prevent a gap flash on some browsers while the fixed hero is visible */
body {
  background: #000;
}

/* Footer should also scroll over the fixed hero */
footer#contact {
  position: relative;
  z-index: 5;
}

/* The original footer.css adds a 30px margin-top which becomes a "window" to the fixed hero.
   When we're doing the scroll-over-hero effect, remove that gap so the light-grey content
   meets the footer cleanly.
*/
footer {
  margin-top: 0;
}

/* Recreate the original 30px spacing above the footer, but filled with the light-grey background
   so the fixed hero video never peeks through. */
footer#contact::before {
  content: "";
  display: block;
  height: 30px;
  background: #f2f2f2;
}