.parallax-hero {
  position: relative;
  min-height: 40vh;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.parallax-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}
.parallax-hero > .hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  padding: 2rem;
}
.parallax-hero .hero-title {
  margin: 0;
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  line-height: 1.2;
}
.parallax-hero .hero-sub {
  margin-top: .5rem;
  font-size: clamp(.95rem, 2.2vw, 1.25rem);
  opacity: .95;
}
@media (max-width: 768px){
  .parallax-hero { background-attachment: scroll; }
}