/* Home hero. The banner photo is white blueprint paper with dense black line
   work, so the headline needs its own scrim to stay legible. The gradient is
   directional: opaque behind the left-aligned text, clearing towards the right
   so the hard hat and tools stay visible. */

.hero-home {
  position: relative;
}

.hero-home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(8, 20, 45, 0.92) 0%,
    rgba(8, 20, 45, 0.84) 36%,
    rgba(8, 20, 45, 0.42) 66%,
    rgba(8, 20, 45, 0.14) 100%
  );
}

.hero-home .absolute-middle-center {
  z-index: 2;
}

.hero-home-content {
  position: relative;
}

.hero-home-title {
  color: #fff;
  margin-bottom: 14px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.hero-home-sub {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

/* Mobile. A full-viewport-height hero forces the 3:2 photo to scale up until
   only its centre strip is visible, cropping out the hard hat and tools. A
   shorter hero keeps far more of the frame while still filling the width, so
   there are no empty bands. Height comes from the content instead of being
   pinned, so nothing can be clipped on short screens. */
@media (max-width: 767px) {
  .hero-home {
    height: auto;
    min-height: 58vh;
    display: flex;
    align-items: center;
    background-position: 62% center;
  }

  .hero-home .absolute-middle-center {
    position: static;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    padding: 70px 0;
  }

  /* Text spans the full width here, so the scrim has to as well. */
  .hero-home::before {
    background: linear-gradient(
      180deg,
      rgba(8, 20, 45, 0.74) 0%,
      rgba(8, 20, 45, 0.9) 100%
    );
  }
}