/* =========================================================================
   HERO SECONDARY — Figma set 5139:4182 · 420 2113:18278 · 1024 6416:1080
   · 1440 2043:6567 · 1920 6416:1095
   A fixed-height frame (850 / 720 / 800 / 1000) with the copy at its foot
   over a photo of blue light. On the 420 frame a breadcrumb sits at the
   top; the other frames hide it. The header floats over the page, so, as
   on the homepage hero, the top padding and the height add room for it
   (--nav-clear) on top of Figma's.
   ========================================================================= */

.s-why-hero {
  --nav-clear: 80px;                       /* styles.css: 16 inset + 64 bar, ≤1180 */
  --frame-h: 850px;                        /* Figma: the frame's fixed height */
  min-height: calc(var(--nav-clear) + var(--frame-h));
  padding-top: calc(var(--nav-clear) + var(--spacing-section-padding));
  justify-content: space-between;          /* 420: breadcrumb at the top, copy at the foot */
  background: var(--color-gray);
  overflow: clip;
}
@media (min-width: 1181px) { .s-why-hero { --nav-clear: 84px; } }   /* 24 inset + 60 bar */

.s-why-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;                        /* Figma stretches the photo to the frame (a crop fill) */
                                           /* the file carries Figma's 60% opacity */
  pointer-events: none;
}
.s-why-hero > :not(.s-why-hero__bg) { position: relative; z-index: 1; }

.s-why-hero__crumbs { gap: var(--spacing-inline-s); }

.s-why-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-xl);            /* 420: stack-xl; wider: stack-l */
  width: 100%;
}
.s-why-hero__title,
.s-why-hero__lede { width: 100%; }
.s-why-hero__br { display: none; }        /* Figma breaks the lede by hand from 1024 */

@media (min-width: 1024px) {
  .s-why-hero { --frame-h: 720px; justify-content: flex-end; }
  .s-why-hero__crumbs { display: none; }
  .s-why-hero__copy { gap: var(--spacing-stack-l); }
  .s-why-hero__lede { max-width: 480px; } /* Figma: fixed 480 / 692 / 830 */
  .s-why-hero__br { display: inline; }
}
@media (min-width: 1392px) {
  .s-why-hero { --frame-h: 800px; }
  .s-why-hero__lede { max-width: 692px; }
}
@media (min-width: 1920px) {
  .s-why-hero { --frame-h: 1000px; }
  .s-why-hero__lede { max-width: 830px; }
}