/* ==========================================================================
   About hero — Figma About Us 5257:155 (29 Sep file). A short band, no photo: eyebrow x101 y287 and
   "ABOUT US" (96px Blauer Nue Medium) x100 y346 on the left; in the right column (x973, the .grid-2 split)
   a 125px accent rule y337 then the intro (20px, white) y377. The next block's eyebrow sits at y714.
   An optional image still renders under the intro (the Figma has none; the field is left empty).
   ========================================================================== */
figure.card-img { margin: 0; }
.section--about-hero { padding-top: clamp(96px, 9.0625vw, 174px); padding-bottom: clamp(96px, 14.53vw, 279px); }   /* next eyebrow y714: 432 below this one */
.about-hero__title { margin: 29px 0 0; font-size: clamp(56px, 5vw, 96px); line-height: 1.01; white-space: nowrap; }   /* 96 at 1920 */
.about-hero__aside { padding-top: 50px; }                     /* rule y337 = eyebrow y287 + 50 */
.about-hero__rule { width: 125px; border-top-width: 2px; margin: 0 0 38px; }
.about-hero__intro { max-width: 696px; margin: 0; color: var(--fg); font-size: var(--fs-body); line-height: var(--lh-body); }
.about-hero__media { margin-top: 32px; }
.about-hero__media img { width: 100%; height: auto; display: block; }
/* With a photo — Figma About Us 5257:155 (1 Oct file): the team photo 653 × 480 at x1137 y613 (30 in from the
   container's right edge, 326 below the eyebrow), square corners, over a green block 351 × 516 at x1464 y558
   (55 above the photo, 25 past its right edge, ending 19 above its bottom). The rule (y984) and the intro (y1024)
   move to the bottom left, x104. Sizes scale with the 1920 frame; the next eyebrow (y1369) is 276 below the photo. */
.about-hero--photo { position: relative; display: block; min-height: calc(806 / 1920 * 100vw); }
.about-hero--photo .about-hero__aside { position: static; padding-top: 0; }
.about-hero--photo .about-hero__rule { position: absolute; left: calc(var(--gutter, 0px) + 4px); top: calc(697 / 1920 * 100vw); margin: 0; }
.about-hero--photo .about-hero__intro { position: absolute; left: calc(var(--gutter, 0px) + 4px); top: calc(737 / 1920 * 100vw); }
.about-hero--photo .about-hero__media {
  position: absolute; right: calc(var(--gutter, 0px) + 30 / 1920 * 100vw); top: calc(326 / 1920 * 100vw);
  width: calc(653 / 1920 * 100vw); margin: 0; border-radius: 0; overflow: visible; isolation: isolate;
}
.about-hero--photo .about-hero__media::before {
  content: ""; position: absolute; z-index: -1; background: var(--accent);
  left: 50.08%; top: -11.46%; width: 53.75%; height: 107.5%;
}
.about-hero--photo .about-hero__media img { aspect-ratio: 653 / 480; object-fit: cover; }
@media (max-width: 1024px) {
  .about-hero__aside { padding-top: 0; }
  /* stacked: title, rule, intro, then the photo with its green block */
  .about-hero--photo { min-height: 0; }
  .about-hero--photo .about-hero__rule, .about-hero--photo .about-hero__intro { position: static; }
  .about-hero--photo .about-hero__rule { margin: 32px 0 24px; }
  .about-hero--photo .about-hero__media { position: relative; right: auto; top: auto; width: auto; margin: 72px 4% 0 0; }
}
@media (max-width: 640px) {
  .section--about-hero { padding-top: 48px; }
  .about-hero__title { font-size: 56px; white-space: normal; }
}