/* ==========================================================================
   Hero: layers
   Figma 3294:88855: the photos and product cards around a centred H1, in a
   1440 x 690 frame under the navbar on white. Same stage and text block as
   hero-collage (64px H1, 771px wide, centred on y = 330; with a subline or
   buttons the block centres on y = 358), but every picture is its own
   layer, uploaded separately and placed with inline custom properties in
   Figma px of that frame:
     --x, --y   top-left corner      --w      width (height follows the image)
     --r        corner radius        --drift  parallax distance (see below)
   Later layers paint over earlier ones; the text paints over all of them.

   Careers hero (Figma 3321:91401): optional 20px/24px body paragraphs 36px
   under the headline (16px apart, 693px max; the newer Careers frame
   3321:91843 sets them smaller, see "Small text") and a row of 80px award
   badges 12px apart, 74px under the text. --content-y (the content_y field,
   inline) moves the block's centre to that y of the frame; that hero's
   block centres on y = 437.

   --u is one Figma pixel: 1px at 1440, scaling with the width (up to 1920,
   beyond which the stage stays 1920 wide and centred), so the layers keep
   their places around the headline. The root is full-bleed (see _dnd.css)
   and clips layers cut by the screen edges.

   Parallax: CSS scroll-driven, as in hero-split. While the hero scrolls
   out from under the header, each layer translates --drift Figma px down
   (positive: it lags behind the page and reads as further back) or up
   (negative: it outruns the page). Browsers without scroll timelines and
   visitors who prefer reduced motion get the still layout.

   Narrower layouts (Figma 3347:98120: a 1024, 768 and 390 frame per hero),
   each on only when the module's matching toggle is on, so pages saved
   before them keep the old behaviour. Each layer's box for a frame comes in
   as --x-<frame>, --y-, --w-, --h-, and --r- (else --r); --off-<frame>
   hides it there.
     1024-1279: the same absolute stage in px of the 1024 frame (--u up to
       1.25), with its own height, text position and text width, and the
       headline at 56.
     768-1023 and phones: the text in flow at fixed sizes (48 / 20, phones
       --headline-390 / 18 on 23), between a top band and a bottom band of
       layers. Top-band layers measure Y from the frame top, bottom-band ones
       (--bottom-<frame>) from the bottom of the text block, so longer or
       wrapped copy pushes them down instead of running into them. 768: --u
       is 1px at 768, up to 1.33. Phones: --u is 1px at 390 but stops at
       1.4px; X spreads with the full width (--ux) around each layer's centre.
   Off: 768-1279 shrink the 1440 layout; phones show the text only.
   The switches are media queries, so they agree with the rest of the site
   (container queries put a 768 window with a scrollbar on the phone layout);
   1279 is this module's own, where the 1024 frame would otherwise scale past
   1.25. Sizes inside each layout still scale with the root (cqw).
   ========================================================================== */

.hero-layers {
  container: hero-layers / inline-size;
  position: relative;
  width: 100%;
  overflow: clip;
}

.hero-layers__stage {
  --u: min(1.3333px, 100cqw / 1440);
  position: relative;
  width: calc(1440 * var(--u));
  height: calc(690 * var(--u));
  margin-inline: auto;
}

/* --h is the box height: the image's own, or a set one it is cropped to */
.hero-layers__layer {
  position: absolute;
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

.hero-layers__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--r) * var(--u));
}

.hero-layers__content {
  position: absolute;
  top: calc(var(--content-y, 330) * var(--u));
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--u));
  width: calc(771 * var(--u));
  transform: translate(-50%, -50%);
  text-align: center;
}

.hero-layers .hero-layers__headline {
  width: 100%;
  font-size: calc(64 * var(--u));
  letter-spacing: calc(-1.28 * var(--u));
}

.hero-layers .hero-layers__subline {
  max-width: calc(741 * var(--u));
  font-size: max(18px, 28 * var(--u));
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.hero-layers__content:has(.hero-layers__subline, .hero-layers__description, .hero-layers__ctas, .hero-layers__badges) {
  top: calc(var(--content-y, 358) * var(--u));
}

/* 36px under the headline: the block's 24px gap plus 12px */
.hero-layers .hero-layers__description {
  max-width: calc(693 * var(--u));
  margin-top: calc(12 * var(--u));
  font-size: max(16px, 20 * var(--u));
  line-height: 1.2;
}

.hero-layers .hero-layers__description :is(p, li):last-child {
  margin-bottom: 0;
}

.hero-layers .hero-layers__description p {
  margin-bottom: calc(16 * var(--u));
}

/* Small text (text_size field): the Careers frames (3321:91843 and its
   3329:* 1024 / 768 / 390 frames), 56px headline and 18px / 1.25 body,
   paragraphs 18px apart. The 1024 frame's headline is 56 either way; the
   768 description is set in its block below; phones keep their own sizes. */
.hero-layers--text-small .hero-layers__headline {
  font-size: calc(56 * var(--u));
  letter-spacing: calc(-1.12 * var(--u));
}

.hero-layers--text-small .hero-layers__description {
  font-size: max(16px, 18 * var(--u));
  line-height: 1.25;
}

.hero-layers--text-small .hero-layers__description p {
  margin-bottom: calc(18 * var(--u));
}

/* 48px under the text: the block's 24px gap plus 24px */
.hero-layers .hero-layers__ctas {
  justify-content: center;
  margin-top: calc(24 * var(--u));
}

/* 74px under the text: the block's 24px gap plus 50px */
.hero-layers .hero-layers__badges {
  --badge-height: calc(80 * var(--u));
  --badge-gap: calc(12 * var(--u));
  margin-top: calc(50 * var(--u));
}

/* Parallax
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-layers {
      view-timeline: --hero-layers block;
      view-timeline-inset: var(--header-height, 86px) 0px;
    }

    .hero-layers__layer {
      animation: hero-layers-drift linear both;
      animation-timeline: --hero-layers;
      animation-range: exit-crossing 0% exit-crossing 100%;
    }
  }
}

@keyframes hero-layers-drift {
  to {
    translate: 0 calc(var(--drift, 0) * var(--u));
  }
}

/* 1024-1279: the Figma 1024 frame
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-layers--f1024 .hero-layers__stage {
    --u: calc(100cqw / 1024);
    width: calc(1024 * var(--u));
    height: calc(var(--stage-h-1024) * var(--u));
  }

  .hero-layers--f1024 .hero-layers__layer {
    top: calc(var(--y-1024) * var(--u));
    left: calc(var(--x-1024) * var(--u));
    width: calc(var(--w-1024) * var(--u));
    height: calc(var(--h-1024) * var(--u));
  }

  .hero-layers--f1024 .hero-layers__layer--off-1024 {
    display: none;
  }

  .hero-layers--f1024 .hero-layers__image {
    border-radius: calc(var(--r-1024, var(--r)) * var(--u));
  }

  .hero-layers--f1024 .hero-layers__content {
    top: calc(var(--content-y-1024, var(--stage-h-1024) / 2) * var(--u));
    width: calc(var(--text-w-1024) * var(--u));
  }

  .hero-layers--f1024 .hero-layers__headline {
    font-size: calc(56 * var(--u));
    letter-spacing: calc(-1.12 * var(--u));
  }

  .hero-layers--f1024 .hero-layers__description {
    max-width: none;
  }
}

/* 768-1023: the Figma 768 frame
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-layers--f768 .hero-layers__stage {
    --u: calc(100cqw / 768);
    width: auto;
    height: auto;
    padding: calc(var(--band-top-768) * var(--u)) var(--section-padding-inline, 48px) calc(var(--band-bottom-768) * var(--u));
  }

  .hero-layers--f768 .hero-layers__layer {
    top: calc(var(--y-768) * var(--u));
    left: calc(var(--x-768) * var(--u));
    width: calc(var(--w-768) * var(--u));
    height: calc(var(--h-768) * var(--u));
  }

  /* 100% is the stage's full height, bands included */
  .hero-layers--f768 .hero-layers__layer--bottom-768 {
    top: calc(100% + (var(--y-768) - var(--band-bottom-768)) * var(--u));
  }

  .hero-layers--f768 .hero-layers__layer--off-768 {
    display: none;
  }

  .hero-layers--f768 .hero-layers__image {
    border-radius: calc(var(--r-768, var(--r)) * var(--u));
  }

  /* In flow, and positioned so it paints over the layers */
  .hero-layers--f768 .hero-layers__content {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: calc(var(--text-w-768) * 1px);
    margin-inline: auto;
    gap: 24px;
    transform: none;
  }

  .hero-layers--f768 .hero-layers__headline {
    font-size: 48px;
    letter-spacing: -0.96px;
  }

  .hero-layers--f768 .hero-layers__subline {
    max-width: none;
    font-size: 24px;
  }

  .hero-layers--f768 .hero-layers__description {
    max-width: none;
    margin-top: 0;
    font-size: 20px;
  }

  .hero-layers--f768 .hero-layers__description p {
    margin-bottom: 16px;
  }

  .hero-layers--f768.hero-layers--text-small .hero-layers__description {
    font-size: 18px;
    line-height: 1.25;
  }

  .hero-layers--f768.hero-layers--text-small .hero-layers__description p {
    margin-bottom: 18px;
  }

  .hero-layers--f768 .hero-layers__ctas {
    margin-top: 0;
  }

  /* 33px under the text: the 24px gap plus 9px */
  .hero-layers--f768 .hero-layers__badges {
    --badge-height: 80px;
    --badge-gap: 12px;
    margin-top: 9px;
  }
}

/* Phones: text only, or the Figma 390 frame
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-layers__stage {
    width: auto;
    height: auto;
    padding: var(--space-xl, 48px) var(--section-padding-inline, 24px);
  }

  .hero-layers__layer {
    display: none;
  }

  .hero-layers__content {
    position: static;
    gap: var(--space-s, 16px);
    width: auto;
    transform: none;
  }

  .hero-layers .hero-layers__headline {
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  .hero-layers .hero-layers__subline {
    max-width: none;
    font-size: 20px;
  }

  .hero-layers .hero-layers__description {
    max-width: none;
    margin-top: 0;
  }

  .hero-layers .hero-layers__description p {
    margin-bottom: 12px;
  }

  .hero-layers .hero-layers__ctas {
    margin-top: var(--space-s, 16px);
  }

  .hero-layers .hero-layers__badges {
    --badge-height: 56px;
    --badge-height-mobile: 56px;
    --badge-gap: 12px;
    margin-top: var(--space-s, 16px);
  }

  /* The 390 frame */
  .hero-layers--f390 .hero-layers__stage {
    --ux: calc(100cqw / 390);
    --u: min(var(--ux), 1.4px);
    padding-top: calc(var(--band-top-390) * var(--u));
    padding-bottom: calc(var(--band-bottom-390) * var(--u));
  }

  /* X spreads with the width around the layer's centre; size and Y stop at 1.4 */
  .hero-layers--f390 .hero-layers__layer {
    display: block;
    top: calc(var(--y-390) * var(--u));
    left: calc(50% + (var(--x-390) + var(--w-390) / 2 - 195) * var(--ux) - var(--w-390) * var(--u) / 2);
    width: calc(var(--w-390) * var(--u));
    height: calc(var(--h-390) * var(--u));
  }

  .hero-layers--f390 .hero-layers__layer--bottom-390 {
    top: calc(100% + (var(--y-390) - var(--band-bottom-390)) * var(--u));
  }

  .hero-layers--f390 .hero-layers__layer--off-390 {
    display: none;
  }

  .hero-layers--f390 .hero-layers__image {
    border-radius: calc(var(--r-390, var(--r)) * var(--u));
  }

  .hero-layers--f390 .hero-layers__content {
    position: relative;
    top: auto;
    left: auto;
    gap: 22px;
  }

  .hero-layers--f390 .hero-layers__headline {
    font-size: calc(var(--headline-390) * 1px);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .hero-layers--f390 .hero-layers__description {
    font-size: 18px;
    line-height: 23px;
  }

  .hero-layers--f390 .hero-layers__description p {
    margin-bottom: 16px;
  }

  /* 46px under the text: the 22px gap plus 24px */
  .hero-layers--f390 .hero-layers__badges {
    --badge-height: 80px;
    --badge-height-mobile: 80px;
    margin-top: 24px;
  }
}