html {
  scroll-behavior: smooth;
}

/*
 * Below 1024px (site max width): stop scaling the hero — fixed height, image locked
 * at 1024px and cropped from the right so text stays on the dark left area.
 */
@media (max-width: 1023px) {
  #hero .hero-bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 1024px;
    max-width: none;
    object-fit: cover;
    object-position: left center;
  }
}