/* Photograph band. The scrim is the one permitted gradient: it exists to make
   the copy legible over the image, not to colour a surface. It is heaviest on
   the left where the text sits, lifts across the middle so the two people stay
   visible, and returns at the right edge so the band closes cleanly. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding: clamp(72px, 12vh, 132px) 0;
  background-color: var(--petrol-900);
  background-image: url("../../assets/img/factory-hero.webp");
  background-size: cover;
  background-position: 62% center;
  color: var(--on-dark);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(14, 59, 59, 0.94) 0%,
    rgba(14, 59, 59, 0.92) 30%,
    rgba(14, 59, 59, 0.88) 46%,
    rgba(14, 59, 59, 0.26) 58%,
    rgba(14, 59, 59, 0.18) 76%,
    rgba(14, 59, 59, 0.68) 100%
  );
}

.hero-inner { position: relative; }

.hero-copy { max-width: 40%; }

.hero .display-hero { color: var(--on-dark); max-width: 17ch; }

.hero-sub {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--on-dark-soft);
  max-width: 44ch;
  margin: 20px 0 0;
}

.hero-actions { margin-top: 28px; }

@media (max-width: 940px) {
  .hero-copy { max-width: none; }
  .hero-sub { max-width: 58ch; }
  /* Below the split point the copy spans the width, so the scrim has to cover
     the whole frame rather than clearing the centre. */
  .hero::before {
    background: linear-gradient(
      90deg,
      rgba(14, 59, 59, 0.94) 0%,
      rgba(14, 59, 59, 0.88) 60%,
      rgba(14, 59, 59, 0.80) 100%
    );
  }
}

@media (max-width: 700px) {
  .hero { background-image: url("../../assets/img/factory-hero-narrow.webp"); }
}