/* Base (desktop/tablet) stays the same */
.parallax {
  min-height: 600px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Mobile: fill the visible screen height reliably */
@media (max-width: 650px) {
  .parallax {
    height: 100dvh;          /* best for modern mobile */
    min-height: 100dvh;
    background-attachment: scroll; /* avoid iOS issues */
  }
}

/* Fallback if 100dvh isn’t supported */
@supports not (height: 100dvh) {
  @media (max-width: 650px) {
    .parallax {
      height: 100vh;
      min-height: 100vh;
    }
  }
}

/* Older iOS Safari fallback */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 650px) {
    html, body { height: -webkit-fill-available; }
    .parallax  { height: -webkit-fill-available; }
  }
}