/* Hero wrapper: fluid height using clamp() for smooth scaling across screens */
.intro-container {
  position: relative;
  width: 100%;
  height: clamp(
    50vh,   /* min: never shorter than half the viewport height */
    80vh,   /* target: ~80% of the viewport height */
    100vh   /* max: never taller than the full viewport */
  );
  overflow: hidden; /* crop any overflow from the background image */
}

/* Background image: cover the area and bias the crop toward the upper portion */
.intro-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* keep image centered horizontally */
  width: 100%;
  height: 100%;        /* fill the container’s height */
  object-fit: cover;   /* scale to fill and crop excess */
  object-position: center 25%; /*focus around the upper quarter (not the exact top)*/
}

/* Overlay: centers the headline and copy on top of the image with a soft mask */
.intro-overlay {
  position: absolute;
  inset: 0;                        /* top/right/bottom/left: 0 */
  display: flex;
  flex-direction: column;
  justify-content: center;         /* vertical centering */
  align-items: center;             /* horizontal centering */
  text-align: center;
  background: rgba(0, 0, 0, 0.4);  /* readable text over photo */
  color: white;
  padding: 1rem;
}

/* Keep overlay text readable on wide screens */
.intro-overlay h2,
.intro-overlay p {
  max-width: 900px;
  margin: 0.5rem auto;
}