/* =========================================================
   SAME HERO BACKGROUND — BOTH SCROLL STAGES
   ========================================================= */

/* One continuous hero canvas */
.hero-scroll-story{
  position:relative!important;
  min-height:200svh!important;
  background:transparent!important;
  overflow:visible!important;
}

/* The image is a single sticky background for both stages */
.hero-scroll-story .hero-media{
  position:sticky!important;
  top:0!important;
  left:0!important;
  width:100%!important;
  height:100svh!important;
  min-height:100svh!important;
  z-index:0!important;
  overflow:hidden!important;
  margin:0!important;
}

.hero-scroll-story .hero-media picture,
.hero-scroll-story .hero-media img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}

.hero-scroll-story .hero-media img{
  object-fit:cover!important;
  object-position:center center!important;
  filter:
    brightness(1.2)
    contrast(.96)
    saturate(1.05)!important;
  transform:none!important;
  animation:none!important;
}

/* One consistent overlay across both stages */
.hero-scroll-story .hero-overlay{
  position:sticky!important;
  top:0!important;
  width:100%!important;
  height:100svh!important;
  min-height:100svh!important;
  margin-top:-100svh!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(
      0deg,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.17) 50%,
      rgba(0,0,0,.07) 100%
    )!important;
}

/* Content scrolls over the same sticky background */
.hero-scroll-story .hero-content{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  min-height:200svh!important;
  margin-top:-100svh!important;
  padding:0!important;
  z-index:2!important;
  transform:none!important;
  background:transparent!important;
}

.hero-scroll-story .hero-stage{
  position:relative!important;
  min-height:100svh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
}

.hero-scroll-story .hero-stage-inner{
  width:min(1180px,88vw)!important;
  max-width:1180px!important;
  margin:0 auto!important;
}

/* Stage 1: brand only */
.hero-stage-one{
  text-align:center!important;
}

.hero-stage-one-inner{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  min-height:100svh!important;
}

.hero-opening-title{
  margin:0!important;
  color:#fff!important;
  font-family:"Cormorant Garamond","Times New Roman",serif!important;
  font-size:clamp(5.8rem,12vw,13rem)!important;
  font-weight:500!important;
  line-height:.82!important;
  letter-spacing:.015em!important;
  white-space:nowrap!important;
  text-shadow:0 5px 40px rgba(0,0,0,.4);
}

.hero-opening-scroll{
  position:absolute!important;
  bottom:clamp(2.4rem,5vh,4rem)!important;
  color:rgba(255,255,255,.94)!important;
}

/* Stage 2: information over the exact same background */
.hero-stage-two{
  background:transparent!important;
}

.hero-stage-two-inner{
  padding:5rem 0!important;
}

/* Keep the brand visible again in stage 2 */
.hero-stage-two .hero-brand-title{
  display:block!important;
  margin-bottom:1.25rem!important;
}

/* Improve readability without changing the photo */
.hero-stage-two .hero-brand-title,
.hero-stage-two .hero-brand-subtitle,
.hero-stage-two .hero-brand-statement,
.hero-stage-two .hero-guest-welcome,
.hero-stage-two .hero-actions-simple,
.hero-stage-two .all-instagram-links{
  position:relative!important;
  z-index:3!important;
}

.hero-stage-two .hero-brand-title,
.hero-stage-two .hero-brand-subtitle,
.hero-stage-two .hero-brand-statement,
.hero-stage-two .hero-guest-welcome{
  text-shadow:0 3px 24px rgba(0,0,0,.42)!important;
}

/* Mobile */
@media(max-width:768px){
  .hero-scroll-story{
    min-height:200svh!important;
  }

  .hero-scroll-story .hero-media,
  .hero-scroll-story .hero-overlay{
    height:100svh!important;
    min-height:100svh!important;
  }

  .hero-scroll-story .hero-stage-inner{
    width:100%!important;
    max-width:100%!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }

  .hero-opening-title{
    font-size:clamp(2.7rem,13vw,4.4rem)!important;
    line-height:.9!important;
  }

  .hero-stage-two-inner{
    padding-top:5.5rem!important;
    padding-bottom:6rem!important;
  }

  .hero-stage-two .hero-brand-title{
    font-size:clamp(2.15rem,10.2vw,3.35rem)!important;
    white-space:nowrap!important;
  }
}

@media(max-width:390px){
  .hero-opening-title{
    font-size:2.5rem!important;
  }

  .hero-stage-two .hero-brand-title{
    font-size:2.02rem!important;
  }
}