
/* =========================================================
   HERO WHITE-SCREEN REPAIR
   Robust two-stage hero using one fixed canvas.
   ========================================================= */

.hero-fixed-canvas{
  position:relative!important;
  min-height:200svh!important;
  background:#111!important;
  overflow:visible!important;
  isolation:isolate;
}

/* One fixed background image shared by both stages */
.hero-fixed-media{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100svh!important;
  min-height:100svh!important;
  z-index:-3!important;
  overflow:hidden!important;
  margin:0!important;
  opacity:1!important;
  visibility:visible!important;
  display:block!important;
  background:#111!important;
  pointer-events:none!important;
}

.hero-fixed-media picture,
.hero-fixed-media img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}

.hero-fixed-media img{
  object-fit:cover!important;
  object-position:center center!important;
  filter:brightness(1.16) contrast(.97) saturate(1.04)!important;
  transform:none!important;
  animation:none!important;
}

/* Shared overlay, also fixed */
.hero-fixed-overlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100svh!important;
  min-height:100svh!important;
  z-index:-2!important;
  margin:0!important;
  opacity:1!important;
  visibility:visible!important;
  display:block!important;
  pointer-events:none!important;
  background:
    linear-gradient(
      0deg,
      rgba(0,0,0,.44) 0%,
      rgba(0,0,0,.16) 52%,
      rgba(0,0,0,.06) 100%
    )!important;
}

/* Scrolling content sits above the fixed background */
.hero-fixed-content{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  min-height:200svh!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  z-index:2!important;
  background:transparent!important;
  color:#fff!important;
}

.hero-fixed-content .hero-stage{
  position:relative!important;
  min-height:100svh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(5rem,8vh,7rem) clamp(1.25rem,6vw,6rem)!important;
  background:transparent!important;
}

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

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

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

.hero-opening-title{
  color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  text-shadow:0 5px 40px rgba(0,0,0,.42);
}

.hero-opening-scroll{
  color:rgba(255,255,255,.94)!important;
  opacity:1!important;
  visibility:visible!important;
}

/* Stage 2 */
.hero-stage-two{
  color:#fff!important;
}

.hero-stage-two-inner{
  padding-top:4rem!important;
  padding-bottom:4rem!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,
.hero-stage-two .hero-actions-simple,
.hero-stage-two .all-instagram-links{
  color:#fff!important;
  opacity:1!important;
  visibility:visible!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,.45)!important;
}

/* Keep hero links/buttons visible */
.hero-stage-two a{
  opacity:1!important;
  visibility:visible!important;
}

/* Restore normal document rendering after the hero */
.hero-fixed-canvas + *{
  position:relative;
  z-index:1;
  background:inherit;
}

/* Mobile */
@media(max-width:768px){
  .hero-fixed-media,
  .hero-fixed-overlay{
    height:100svh!important;
    min-height:100svh!important;
  }

  .hero-fixed-content .hero-stage{
    padding:5rem 18px 4rem!important;
  }

  .hero-fixed-content .hero-stage-inner{
    width:100%!important;
    max-width:100%!important;
  }

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