/* Home hero rebuilt to the wearebouldergroup.com layout: full-bleed background
   media with the headline centered over it and the navbar overlaid at the top.
   The background is the .bh-bg-canvas halftone shader (inline script in
   index.html). Positioning note: .hero-section.home-hero is position:static, so
   absolutely positioned hero layers resolve to the initial containing block —
   the first viewport — which is also how .home-hero-details-wrapper spans the
   hero. .bh-bg copies the hero's own 100vh/1100px cap so both stay in sync. */

.bh-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  max-height: 1100px;
  overflow: hidden;
  background-color: #0A0A0A;
  pointer-events: none;
}

.bh-bg-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Headline: out of the flow and centered in the viewport (Boulder centers its
   heading over the media). Only the headline block leaves the flow — its parent
   .header-line-wrapper also holds the sticky-nav holder and must keep laying it
   out (and keep taking clicks). The wrapper is static, so inset:0 resolves to
   the details wrapper = the first viewport. Pointer-events off so the headline
   layer never shadows the navbar. */
.home-hero .home-hero-header-wrapper {
  position: absolute;
  inset: 0;
  justify-content: center;
  padding-top: 0;
  pointer-events: none;
}

/* With the headline out of flow, the sticky-nav holder becomes the wrapper's
   first laid-out child and the navbar lands at the top of the hero,
   Boulder-style. The separator that used to sit above the mid-page navbar goes. */
.home-hero .hero-separator {
  display: none;
}

/* Boulder's hero media is clean full-bleed — no column hairlines over it. */
.home-hero > .page-columns-wrapper {
  display: none;
}

/* Headline type: white over the media, both lines equal, Boulder's centered
   two-line scale (~52vw total measure) instead of the old edge-to-edge yellow. */
.home-hero .home-h1.large {
  color: #fff;
  font-size: clamp(2.1rem, 4.2vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.02em;
}

@media screen and (max-width: 479px) {
  .home-hero .home-h1.large {
    font-size: 8.6vw;
  }
}