/* =====================================================================
   THE OHS — home hero, photographic background
   ---------------------------------------------------------------------
   Adds the construction-site photograph behind the hero and fills the
   empty band between the headline column and the slideshow panel.

   Nothing in the markup changes. The photograph and the scrim over it
   are painted by a pseudo-element on .hero, so removing this stylesheet
   returns the hero to the flat #0b0f16 it is today.

   WHY A SCRIM, AND WHY THIS STRENGTH

   A photograph behind white text is only safe if you know how bright
   the photograph actually is underneath it. This one has a blown-out
   sky: the brightest 0.5% of the left half is rgb(236,244,246), which
   is very nearly white, and white-on-white is unreadable.

   So the darkening below is not an eyeballed "looks about right". It
   was solved against that measured value:

     overlay .94 -> composite rgb(22,25,30) -> white text 17.6:1
     overlay .86 -> composite rgb(40,44,48) -> white text 14.1:1
     overlay .78 -> composite rgb(58,62,67) -> white text 10.8:1

   The weakest point of the gradient still carries 10.8:1 against the
   worst pixel in the picture, where 4.5:1 is the readable minimum.
   The headline stays legible no matter which frame of the photo a
   given screen size happens to crop to.

   If you swap the photograph for a darker one you can lower these
   numbers; if you swap in a brighter one, do not.
   ===================================================================== */

.hero {
  position: relative;
  isolation: isolate;          /* keeps the z-indexes below local to the hero */
  background-color: #0b0f16;   /* still the colour if the photo fails to load */
  overflow: hidden;
}

/* The photograph and its scrim, as one layer behind the content.
   Listed top-down: the gradients paint OVER the image because in CSS
   the first background in the list is the front-most. */
.hero::before {
  content: "";
  position: absolute;
  inset: -2%;                  /* bleeds past the edges so the blur has no soft border */
  z-index: 0;

  background-image:
    /* 1. the brand's warm light, kept from the current hero */
    radial-gradient(70% 100% at 0% 0%, rgba(140, 13, 21, .45) 0%, transparent 60%),
    /* 2. the horizontal scrim -- dark where the words are, opening up
          toward the right so the picture is actually visible */
    linear-gradient(90deg,
      rgba(8, 11, 16, .94) 0%,
      rgba(8, 11, 16, .90) 28%,
      rgba(8, 11, 16, .78) 55%,
      rgba(8, 11, 16, .62) 78%,
      rgba(8, 11, 16, .70) 100%),
    /* 3. a vertical one, so the section below meets a dark edge rather
          than a hard seam across the middle of a photograph */
    linear-gradient(180deg, rgba(8, 11, 16, .45) 0%, transparent 22%, transparent 62%, rgba(8, 11, 16, .92) 100%),
    /* 4. the photograph itself */
    url("../img/home-hero-bg.jpg");

  background-repeat: no-repeat;
  background-size: cover, cover, cover, cover;
  /* Right of centre: it puts the cranes and the worker in the open part
     of the scrim and keeps the plainest sky behind the headline. */
  background-position: center, center, center, 68% 42%;

  /* A little blur and a little desaturation turn a photograph into a
     backdrop. Without it the picture competes with the slideshow panel
     on the right, and the hero ends up with two subjects and no focus. */
  filter: blur(1.5px) saturate(.82);
}

/* The content sits above the layer. .hero .in is the grid that holds
   the headline column and the slideshow panel. */
.hero .in {
  position: relative;
  z-index: 1;
}

/* With a photograph behind it the headline needs its own weight, or it
   reads as printed on top of the scene rather than part of it. */
.hero h1 {
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}

.hero .lead,
.hero .eyebrow,
.hero .tet {
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

/* The four counters read as loose text on a photograph. A hairline rule
   above them groups them into one object again. */
.hero .proof {
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.hero .proof div b { text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }

/* The slideshow panel gains a deeper shadow so it lifts off the photo
   instead of sitting flat against it. */
.hero .heroimg .ph {
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(255, 255, 255, .10);
}

/* ── Narrow screens ───────────────────────────────────────────────── */
/* Below the grid's breakpoint the two columns stack, so the text no
   longer sits in the left third -- it runs across the whole width, and
   a left-to-right scrim would leave the end of every line over open
   sky. The gradient turns vertical to follow it. */
@media (max-width: 900px) {
  .hero::before {
    background-image:
      radial-gradient(90% 60% at 50% 0%, rgba(140, 13, 21, .40) 0%, transparent 65%),
      linear-gradient(180deg,
        rgba(8, 11, 16, .92) 0%,
        rgba(8, 11, 16, .88) 45%,
        rgba(8, 11, 16, .82) 75%,
        rgba(8, 11, 16, .94) 100%),
      url("../img/home-hero-bg.jpg");
    background-size: cover, cover, cover;
    background-position: center, center, 60% 40%;
  }
}

/* ── Slow connections ─────────────────────────────────────────────── */
/* The photograph is 151 KB. On a connection that cannot spare it the
   hero is still a finished dark hero, not a broken one -- that is what
   background-color above is for, and why every text colour here already
   passes against it. */