/* Keep the hero compact; adjust to taste */
.parallax-image-wrapper {
  position: relative;
  height: 150%;              /* smaller hero so it’s not “way too much” */
  overflow: hidden;          /* clip the oversize image as it moves */
}

/* Match Webflow's image sizing exactly */
.parallax-image {
  object-fit: cover;
  min-width: 100vw;
  max-width: none;
  min-height: 120%;          /* key to avoid the top gap during translate */
  position: static;          /* Webflow has it static; wrapper does the clipping */
  opacity: 0.5;              /* initial dim, JS will animate to 1 */
  transform: translate3d(0, 0vh, 0) scale3d(1,1,1)
  rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
  transform-style: preserve-3d;
  will-change: opacity, transform;
}

/* Dim overlay starts visible and fades out on scroll */
.parallax-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.5;              /* initial; JS reduces to 0 as you scroll */
  pointer-events: none;
  will-change: opacity;
}

/* Your overlay text container stays on top */
.hero-overlay {
  position: absolute;
  opacity: 1;
  inset: 0;
  display: grid;
  /*place-items: center;*/
  /*text-align: center;*/
  will-change: transform, opacity;
  z-index: 1;
}