/* ── m3 14 Who leads — maarch-3/sections/14-who-leads/brief.md ──
   Figma 1:1474 photo 1929×1249 from y12645 (36px canvas above) · 1:1475 gradient (re-based onto the photo:
   transparent 1.08% → black .71 62.13%) · 1:1476 "who / leads" 700/80/.766 @ (142,+519) · 1:1547 logo 377×103 ·
   1:1478 bio 26/33 justify w788 · 1:1516–1:1518 name + credentials right-aligned to x1798 (+1035)
   NOTE: source photo is 800×533 (upscaled 2.4×) — replace with a high-res original. */

.m3-leader { background: var(--skin-canvas); padding-top: calc(36 * var(--u)); }
.m3-leader__media {
    position: relative;
    min-height: calc(1249 * var(--u));
    overflow: hidden;
    background: #3a332d;
}
.m3-leader__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 1.08%, rgba(0, 0, 0, .71) 62.13%);
}
.m3-leader__content {
    z-index: 2;
    padding: calc(519 * var(--u)) 0 calc(70.5 * var(--u));
    color: var(--skin-white);
}
.m3-leader__title { font-size: var(--fs-display); font-weight: 700; line-height: .766; }
.m3-leader__title img {
    display: block;
    width: calc(377 * var(--u));
    height: calc(103 * var(--u));   /* Figma stretches the 1024×343 logo to fill 377×103 (no cover/contain) */
    object-fit: fill;
    margin: calc(6.5 * var(--u)) 0 0 calc(-19 * var(--u));
}
.m3-leader__text { max-width: calc(788 * var(--u)); margin-top: calc(64.5 * var(--u)); }
.m3-leader__text p { font-size: var(--fs-body); line-height: calc(33 / 26); text-align: justify; }
.m3-leader__text p + p { margin-top: calc(33 * var(--u)); }
.m3-leader__name {
    position: absolute;
    right: 0;
    top: calc(1035 * var(--u));
    text-align: right;
}
.m3-leader__name strong { display: block; font-size: var(--fs-sub); font-weight: 400; line-height: 1; }
.m3-leader__name span { display: block; margin-top: calc(9 * var(--u)); font-size: var(--fs-body); line-height: 1; }

@media (max-width: 991.98px) {
    .m3-leader { padding-top: 24px; }
    .m3-leader__media { min-height: 0; }
    .m3-leader__media::after { background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .75) 40%); }
    .m3-leader__content { padding: 260px 0 48px; }
    .m3-leader__title { font-size: 44px; }
    .m3-leader__title img { width: 220px; height: 60px; margin: 6px 0 0 -10px; }
    .m3-leader__text { max-width: 640px; margin-top: 28px; }
    .m3-leader__text p { font-size: 16px; line-height: 1.55; text-align: left; }
    .m3-leader__text p + p { margin-top: 14px; }
    .m3-leader__name { position: static; margin-top: 32px; text-align: left; }
    .m3-leader__name strong { font-size: 26px; }
    .m3-leader__name span { margin-top: 8px; font-size: 15px; line-height: 1.4; }
}