.hero-image {
  width: auto;
  height: 90%;
}

/* Media query for smaller screens (phones) */
@media (max-width: 900px) {
  .hero-image {
    height: 100%;
    visibility: hidden;
  }
  #home {
    margin-top: 50px;
    overflow: hidden;
  }
  #footer {
    margin-top: 100px;
  }
}

/* Media query for medium screens (tablets) */
@media (min-width: 768px) and (max-width: 1513px) {
  .hero-image {
    height: 600px;
  }
}

/* ─────────────────────────────────────────────────────────
   Initial states — GSAP drives ALL animation
   CSS only sets the hidden starting state; no transitions.
   ───────────────────────────────────────────────────────── */
.fade-in-up,
.fade-in-up-delay {
  opacity: 0;
}

.hero-image-animate {
  opacity: 0;
}

.reveal {
  opacity: 0;
}

/* ─────────────────────────────────────────────────────────
   Scroll Progress Bar
   ───────────────────────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.55);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
}

/* ─────────────────────────────────────────────────────────
   Hero — clip for scale parallax
   ───────────────────────────────────────────────────────── */
#home {
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────
   Mobile nav menu — GSAP controls opacity; inset-0 handles size
   ───────────────────────────────────────────────────────── */
#mobile-menu {
  opacity: 0;
}

/* ─────────────────────────────────────────────────────────
   Back to Top — GSAP autoAlpha controls visibility
   ───────────────────────────────────────────────────────── */
#back-to-top {
  visibility: hidden;
  opacity: 0;
  will-change: opacity, transform;
}

/* ─────────────────────────────────────────────────────────
   Section spacing — mobile override
   ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #reinvention,
  #mindset,
  #leave,
  #reset,
  #journey,
  #disclaimer {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}
