/* hero-banner — full-bleed photo with the header sitting over it.
 *
 * The mockup has no scrim: white type sits directly on the photograph. It
 * passes on the two supplied images but only just, and it will fail the
 * moment anyone swaps in a lighter one. The scrim below is deliberate and
 * is recorded in handoff/design-decisions.md.
 */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  color: var(--color-text-inv);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-scrim);
}
/* Separate top scrim so the header band has ground of its own. The
 * horizontal scrim has all but run out by the time it reaches the nav on
 * the right, where the photography is brightest. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(10rem, 7.8125rem + 7.292vw, 14.375rem);
  z-index: -1;
  background: var(--color-scrim-top);
  pointer-events: none;
}

.hero__inner {
  /* Clears the absolutely-positioned header: the utility bar, the logo row,
   * and breathing room under it. All three scale, so this does too. */
  padding-top: calc(var(--space-2xl) + var(--space-2xl));
  padding-bottom: var(--space-xl);
}

/* Fluid, full size at 1440. The artboard's 1197 is a blueprint value; locking
 * it means the hero eats an entire laptop viewport and then some. */
/* Rob 2026-08-21: 75vh, with content centred so the next section can ride
 * up over the bottom edge again. The floor stops it collapsing on a short
 * laptop window; the cap stops it running away on a tall monitor, and is set
 * so 75vh is actually reachable up to roughly a 1110px-tall viewport rather
 * than being capped short of the target. */
.hero--tall  { min-height: clamp(30rem, 75vh, 82rem); }
/* Interior banner up 50% — 230->345 floor, 340->510 cap. */
.hero--short { min-height: clamp(21.5625rem, 17.75rem + 15.885vw, 31.875rem); }

.hero__heading { max-width: 18ch; }

.hero__rule {
  display: block;
  width: clamp(12.5rem, 6.875rem + 18.750vw, 23.75rem);
  max-width: 100%;
  height: 3px;
  margin-block: var(--space-sm);
  background: var(--color-primary);
}
.hero__rule--wide { width: clamp(16.25rem, 6.875rem + 31.250vw, 35rem); }

/* Constrained so the list box matches its text. It spanned the full 1640
 * container, which made it read as a much wider block than it is. */
.hero__bullets {
  max-width: 46ch;
  display: grid;
  gap: var(--space-3xs);
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
}
.hero__bullets li {
  position: relative;
  padding-left: var(--space-xs);
}
.hero__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.hero__cta { margin-top: var(--space-md); }

@media (max-width: 1200px) {
  .hero--tall { min-height: 0; }
  .hero__inner { padding-block: calc(53px + 98px + var(--space-lg)) var(--space-2xl); }
}

@media (max-width: 768px) {
  .hero__inner { padding-top: calc(53px + 68px + var(--space-lg)); }
  .hero__heading { max-width: none; }
  .hero__rule { width: 240px; margin-block: var(--space-xs); }
  .hero--short { min-height: 260px; }
  /* The scrim is a left-to-right gradient at desktop; on a narrow screen the
   * text spans the full width, so it has to darken the whole frame. */
  .hero::before { background: rgb(0 0 0 / 0.5); }
}

/* -- Enclosure + island-nav adjustments ---------------------------------
 * The nav no longer sits on the photograph, so the top scrim that existed
 * to give it contrast is redundant. The horizontal scrim stays: the
 * headline and bullets still sit on the image.
 * ---------------------------------------------------------------------- */
/* Top scrim restored: the eyebrow bar sits on the photograph again, and it
 * is the lightest text on the page. Softer than before, because the primary
 * nav now has the pill's own ground and no longer needs it. */
.hero::after {
  height: clamp(9rem, 7rem + 6.667vw, 13rem);
  background: linear-gradient(180deg,
      rgb(0 0 0 / 0.55) 0%,
      rgb(0 0 0 / 0.22) 55%,
      transparent 100%);
}

.hero { border-radius: 0 0 var(--radius-shell) var(--radius-shell); }

.hero__inner {
  /* The header is out of flow, so "centred" means centred in the space
   * BELOW it — hence asymmetric padding rather than a symmetric block.
   * The top clears --header-h, which is derived from the logo size, so this
   * stays correct if the pill is ever resized again. */
  padding-top: calc(var(--header-h) + var(--space-sm));
  padding-bottom: calc(var(--hero-overlap) + var(--space-sm));
}

/* Rob's change 2026-08-21: constrain by viewport, not by character count.
 * 14ch broke "Scientific Management Techniques" across three ragged lines
 * at some widths; 60vw holds it to two and stays proportional. */
.hero__heading {
  max-width: min(60vw, 48rem);
  margin-bottom: var(--space-sm);
}

.hero__rule { display: none; }

.hero__bullets {
  gap: var(--space-xs);
  font-size: 15px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.01em;
}
.hero__bullets li::before {
  top: 0.55em;
  width: 5px; height: 5px;
  background: var(--color-text-inv);
  opacity: 0.55;
}