@layer sections {
  /* Hero (PAGE-02, D2-09). Literal Figma values (L-0052): «HERO SECTION» 1428:3588 at 375 and
     «NEW HERO SECTION» 1295:912 at 1280. Mobile-first: below 1024 px the copy is left-aligned over
     the white zone of the portrait raster, which hangs from the hero's top edge (Figma «image 66»:
     x 0, y −23, 385 wide) and runs on under About — Figma draws About over the hero with a
     transparent top (about.css). From 1024 px the copy is centred over the landscape raster.
     The Display role for .hero__title and the .btn come from components.css. */

  /* --- Mobile and tablet (<1024 px) --- */
  .hero {
    /* The portrait raster is 385 px wide (770 px source), scaled down below 375 px. */
    --hero-m-w: min(102.67vw, 385px);
    position: relative;
    /* Sideways only: the raster hangs 10 px past the right edge, and below the box it runs on
       under About (about.css draws About over it, its top transparent for 61.68 px and opaque
       from 264.68 px). */
    overflow-x: clip;
    /* White above the raster's baked floor line, the floor grey below it (the band left of the
       raster on tablets). The floor line meets the raster's left edge 581 px down a 385 px
       raster (1.5091 x its width). */
    background: linear-gradient(
      180deg,
      var(--c-white) calc(var(--hero-m-w) * 1.5091),
      var(--c-grey-200) 0
    );
  }

  /* The floor grey under About's transparent top, below the raster's bottom edge (it comes before
     the raster in the tree, so the raster paints over it). */
  .hero::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 265px;
    background: var(--c-grey-200);
  }

  .hero__media img {
    position: absolute;
    /* Figma: y −23 and x 0..385 on the 375 frame (10 px past the right edge). */
    top: calc(var(--hero-m-w) * -0.0597);
    right: calc(var(--hero-m-w) * -0.026);
    width: var(--hero-m-w);
    max-width: none;
    height: auto;
    /* The 1780 px seed runs 266 px into About, past the point where About turns opaque
       (264.68 px), as Figma's does. A shorter upload (the 770 x 1400 of the admin help text ends
       76 px into About) fades its last 24 px into the floor grey instead of a hard edge. */
    mask-image: linear-gradient(
      to bottom,
      #000 calc(100% - var(--hero-m-w) * 0.0623),
      transparent
    );
  }

  /* Only the desktop raster was uploaded: it is art-directed, so hide it below 1024 px. */
  .hero__media--art-only {
    display: none;
  }

  /* Figma CONTENT: headline at y 76, title/lead/subtitle 32 apart, BTN at y 429, hero 601 tall.
     Wider than about 670 px the raster keeps its 385 px at the right edge, so the 276 px copy
     column moves to the middle of the white left of the art (which starts 30 px into the
     raster) instead of staying on the gutter; up to there (375 included) the padding is 0. */
  .hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-block: 76px 126px;
    padding-inline-start: max(0px, (100% - var(--hero-m-w) * 0.922 - 276px) / 2 - var(--gutter));
  }

  /* Figma 1428:3615: Montserrat 400 28/30.8 (laid out on a 31 px pitch), no tracking, 276 box.
     Weight 300 and the tracking of the Display rule come back from 1024 px. */
  .hero__title {
    position: relative;
    /* Figma puts the baseline 26 px into the 31 px line, Chrome 25. */
    top: 1px;
    width: 276px;
    max-width: 100%;
    font-size: 28px;
    line-height: 31px;
    letter-spacing: 0;
    text-wrap: wrap;
  }

  @media (max-width: 1023.98px) {
    .hero__title {
      font-weight: 400;
    }
  }

  /* Figma 1428:3617 / 1428:3618: 13/15.6 (16 px pitch), boxes 228 and 218 wide. */
  .hero__lead,
  .hero__sub {
    max-width: 100%;
    margin-top: 32px;
    font-size: 13px;
    line-height: 16px;
  }

  /* 02-UI-SPEC: the lead is 700 for the whole paragraph, whatever markup the editor saved
     (D5-15 carry c). */
  .hero__lead {
    width: 228px;
    font-weight: 700;
  }

  .hero__lead :is(strong, b) {
    font-weight: 700;
  }

  .hero__lead p {
    margin: 0;
  }

  /* IN-07: an editor's second paragraph (or a list) must not read as a bare line break. */
  .hero__lead :is(p, ul, ol) + :is(p, ul, ol) {
    margin-top: var(--space-3);
  }

  .hero__sub {
    width: 218px;
    font-weight: 400;
  }

  /* Figma BTN 1428:3591: x 22, y 429, 46 tall, padding 10/18/10/23. The label is the only
     Title Case text in the mockup (case=TITLE, L-0054). */
  .hero__cta {
    height: 46px;
    margin: 67px 0 0 2px;
    padding: 0 18px 0 23px;
  }

  /* Figma hugs the label in a 143 px box (153 from 1024 px), which places the arrow. */
  .hero__cta .btn__label {
    min-width: 143px;
    text-transform: capitalize;
  }

  /* Below 375 px the art shrinks with the screen and its splash climbs into the copy (D5-15 b,
     05-12 gate), so the art leaves the copy's box: it follows the CTA in the flow at full width,
     cropped to its lower 70 % (bars, splash, baked floor) with the drips faded in over the top
     30 %. The grey strip under About (.hero::before) follows it. >=375 px is unchanged. */
  @media (max-width: 374.98px) {
    .hero {
      display: flex;
      flex-direction: column;
      background: var(--c-grey-200);
    }

    .hero__content {
      order: 1;
      width: 100%;
      padding-inline: var(--gutter);
      padding-bottom: var(--space-7);
      background: var(--c-white);
    }

    /* The copy boxes keep their 375 px widths (276 / 228 / 218 px), so the «|» breaks that
       base.css drops below 375 px still fit here: bring them back. */
    .hero .br-m {
      display: inline;
    }

    /* The faded top of the crop shows white, not the floor grey behind it. The crop is
       measured in the raster's width (cqw), so any raster height shows the same rows. */
    .hero__media {
      order: 2;
      container-type: inline-size;
      background: var(--c-white);
    }

    .hero__media img {
      position: static;
      display: block;
      width: 100%;
      aspect-ratio: 770 / 980;
      object-fit: cover;
      /* Rows 420..1400 of the 770 px wide raster (its lower 70 % down to the 1400 px mark). */
      object-position: 50% calc(-420 / 770 * 100cqw);
      mask-image: linear-gradient(
        to bottom,
        transparent,
        #000 30%,
        #000 calc(100% - var(--hero-m-w) * 0.0623),
        transparent
      );
    }
  }

  @media (min-width: 768px) {
    .hero__media img {
      right: 0;
    }
  }

  /* --- Desktop and wide (>=1024 px) --- */
  @media (min-width: 1024px) {
    .hero {
      /* Figma «image 57»: 1280 x 964 from y −158; the hero shows 682 px of it and About (drawn
         over the next 124 px in Figma) starts below. The raster scales with the width from
         1280 px up (the hero keeps the 1280 x 682 proportion) and keeps its 1280 px size below,
         cropped at the sides, so the copy never shrinks into the side art at 1024. The height is
         a minimum: long admin copy grows the box (02-08 long-text check), and the raster's
         flat floor continues as the grey background. */
      container-type: inline-size;
      min-height: max(682px, 53.2813vw);
      overflow: clip;
      background: var(--c-grey-200);
    }

    /* About is opaque from here on: its top is the raster's flat floor anyway. */
    .hero::before {
      display: none;
    }

    .hero__media img {
      top: calc(max(100cqw, 1280px) * -0.12344);
      left: 50%;
      right: auto;
      width: max(100cqw, 1280px);
      height: auto;
      translate: -50% 0;
      mask-image: none;
    }

    .hero__media--art-only {
      display: block;
    }

    /* Only the mobile raster was uploaded: show the grey background instead of a stretched crop. */
    .hero__media--base-only {
      display: none;
    }

    /* Figma: title at y 98; title → lead 52, lead → subtitle 36, subtitle → BTN 51 (BTN bottom
       at 490 of 682). The 40 px bottom padding only matters when long copy grows the box. */
    .hero__content {
      align-items: center;
      text-align: center;
      padding-block: 98px 40px;
      padding-inline-start: 0;
    }

    /* Figma 1295:918: 300 45/49.5 (50 px pitch), tracking 4.5, a 625 box at x 329 (centre
       641.5). Chrome also tracks after a line's last letter and centres that, Figma does not:
       the box sits a further 2.25 px right for the last line, and the first line (whose
       tracking runs into the wrapped space, as in Figma) is pulled back by the indent. */
    .hero__title {
      top: 0;
      width: 625px;
      margin-left: 7.5px;
      font-size: 45px;
      line-height: 50px;
      letter-spacing: 4.5px;
      text-indent: -4.5px;
    }

    .hero__lead,
    .hero__sub {
      position: relative;
      /* Figma's baseline sits 1 px lower in the 22 px line than Chrome's. */
      top: 1px;
      font-size: 16px;
      line-height: 22px;
    }

    /* Figma centres a line together with the space typed before its ⏎ (lead line 2, subtitle
       line 1); break-spaces keeps that space in the line instead of letting it hang. It sits on
       the lead's blocks, not on its box, so a raw newline between two paragraphs (pasted or
       imported HTML) does not render as an empty line; bare text keeps it on the box. */
    .hero__sub,
    .hero__lead :is(p, li),
    .hero__lead:not(:has(> :is(p, ul, ol))) {
      white-space: break-spaces;
    }

    /* Figma 1295:924 / 1327:691: 16/22 in 768 and 734 boxes. */
    .hero__lead {
      width: 768px;
      margin-top: 52px;
    }

    .hero__sub {
      width: 734px;
      margin-top: 36px;
    }

    /* Figma BTN 1295:928: the shared 43 px button, 51 below the subtitle, at x 527 (centre
       640.5). */
    .hero__cta {
      height: 43px;
      margin: 51px 0 0 1px;
      padding: 0 20px 0 25px;
    }

    .hero__cta .btn__label {
      min-width: 153px;
    }
  }
}