/* ============================================
   STICKY IMAGE (shared component)
   The image sticks to the top of the viewport while its (taller) outer
   wrapper scrolls past — the section before reveals it, the section after
   (higher z-index, opaque background) scrolls up and covers it again.
   ============================================ */

.sticky-image {
  position: relative;
  z-index: 1;
  height: 300vh;
  margin-top: -100vh;
  margin-bottom: -100vh;
}

.sticky-image__wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.sticky-image__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}