/*!
 * Monal Group — monal-lead-hero
 *
 * Converted from design/pages.css (the approved HTML prototype).
 * Desktop values come straight from Figma 329:3493: every length is
 * Figma px / 10 expressed in --monal-u.
 */

/* ==========================================================================
   LEADERSHIP — hero   329:3493 / 329:3495 / 329:3496
   Type on white; no hero image in the design.
   ========================================================================== */
.monal-lead-hero { position: relative; padding-top: calc(var(--monal-u) * 11); text-align: center; }
.monal-lead-hero__title {
  margin-top: calc(var(--monal-u) * 1.4);
  font-weight: 500; font-size: max(calc(var(--monal-u) * 3.4), 28px); line-height: 1.08;
  letter-spacing: -.04em; color: var(--monal-c-black);
}
.monal-lead-hero__lead { margin: calc(var(--monal-u) * 1.6) auto 0; max-width: calc(var(--monal-u) * 36); }

@media (min-width: 1200px) {
  /* Figma band 0 - 690. */
  .monal-lead-hero { padding-top: calc(var(--monal-u) * 24.5); min-height: calc(var(--monal-u) * 69); }
  .monal-lead-hero__title {
    margin-top: calc(var(--monal-u) * 2);
    width: calc(var(--monal-u) * 74.57); margin-inline: auto;
    font-size: calc(var(--monal-u) * 7.2); line-height: calc(var(--monal-u) * 7.8);
    letter-spacing: calc(var(--monal-u) * -.288);
  }
  .monal-lead-hero__lead { margin-top: calc(var(--monal-u) * 3); width: calc(var(--monal-u) * 84.82); max-width: none; }
}

/* Figma 329:3514 — the blurred orange ellipse off the left edge, beside the
   hero: 225.357 at x -112.68, y 426.32, so centred on frame (0, 539). The
   653.357 SVG is the circle plus its blur, centred on the node, so its box
   starts at (-326.68, 212.32). Desktop only, as drawn; behind everything
   (z-index -1), and the hero's overflow-x: clip trims the left bleed. */
.monal-lead-hero__glow { display: none; }
@media (min-width: 1200px) {
  .monal-lead-hero > .monal-lead-hero__glow {
    display: block; z-index: -1;
    left: calc(50% - var(--monal-u) * 128.668); top: calc(var(--monal-u) * 21.232);
    width: calc(var(--monal-u) * 65.336); height: calc(var(--monal-u) * 65.336);
    background-image: url(../../assets/monal/img/pages/lead-ellipse.svg);
  }
}

/* The corner flourish, placed as in Figma 329:3468. */
.monal-lead-hero > .monal-page__deco--corner {
  right: calc(var(--monal-u) * -17.5); top: calc(var(--monal-u) * -4);
}

/* ==========================================================================
   BRANDS layout (layout = brands)   Figma 1:2471 / 1:2475 - 1:2479
   The same eyebrow / title / lead as Leadership, plus one emphasised word in
   Libertinus Serif SemiBold Italic at 81 against the title's 72 ("Lifelong
   <em>Memories</em>"), a 696 lead, no left glow, and the corner flourish
   (1:2472, the same art) further off the right edge at (1752.36, -40.54).
   The first brand photo starts at 730.43: 144.28 below this section's end.
   ========================================================================== */
.monal-lead-hero__title em {
  font-family: var(--monal-f-serif); font-style: italic; font-weight: 600;
  font-size: 1.125em; line-height: 0;
}
@media (min-width: 1200px) {
  .monal-lead-hero--brands { min-height: calc(var(--monal-u) * 58.615); }
  .monal-lead-hero--brands .monal-lead-hero__lead { width: calc(var(--monal-u) * 69.6); }
  .monal-lead-hero--brands > .monal-page__deco--corner { right: calc(var(--monal-u) * -34.344); top: calc(var(--monal-u) * -4.054); }
}