/* ── m3 02 Hero — maarch-3/sections/02-hero/brief.md ──
   Figma 1:1358/1:1359 photo (x −281 → 2401, top 77) over #434343 · visible 103 → 1207 + 15px #d4cdcd rule ·
   1:1499 logo 702×235 @ (95,201) drops in · 1:1376 kicker 42px · 1:1399 intro 26/26 #dbdbdb w624 ·
   1:1434 cloud 412×232 @ (567,738), opacity .74, drifts 20.9s (Figma motion) */

.m3-hero {
    --skin-wrapper-padding-block: 0;
    height: calc(1104 * var(--u) + max(6px, calc(15 * var(--u))));   /* + the rule (box-sizing: border-box) */
    overflow: hidden;
    background: #434343;
    border-bottom: max(6px, calc(15 * var(--u))) solid #d4cdcd;
}
.m3-hero__content {
    position: absolute;
    z-index: 2;
    left: calc(95 * var(--u));
    top: calc(98 * var(--u));
}
.m3-hero__logo { margin: 0; line-height: 0; }
.m3-hero__logo img {
    width: calc(702 * var(--u));
    height: auto;
    animation: m3-logo-drop 1.04s cubic-bezier(.526, .009, .552, .991) both;
}

img.m3-hero__bg {
	max-width: none;
} 
@keyframes m3-logo-drop {
    from { opacity: 0; translate: 0 calc(-164 * var(--u)); }
    to   { opacity: 1; translate: 0 0; }
}
.m3-hero__kicker {
    margin: calc(40 * var(--u)) 0 0 calc(41 * var(--u));
    font-size: var(--fs-sub);
    line-height: 1;
    color: var(--skin-white);
}
.m3-hero__intro {
    width: calc(624 * var(--u));
    margin: calc(42 * var(--u)) 0 0 calc(41 * var(--u));
    font-size: var(--fs-body);
    line-height: 1;
    color: #dbdbdb;
}
.m3-hero__intro b { font-weight: 700; }

.m3-hero__cloud {
    position: absolute;
    z-index: 1;
    left: calc(567 * var(--u));
    top: calc(635 * var(--u));
    width: calc(412 * var(--u));
    opacity: .74;
    pointer-events: none;
    animation: m3-cloud-drift 20.904s linear infinite;
}
@keyframes m3-cloud-drift {
    from { translate: calc(-372 * var(--u)) calc(46 * var(--u)); }
    to   { translate: calc(356 * var(--u)) calc(9 * var(--u)); }
}

@media (max-width: 991.98px) {
    .m3-hero { height: auto; min-height: 640px; }
    /* Legibility: on narrow screens the white copy crosses the bright glazing */
    .m3-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20, 40, 80, .55) 0%, rgba(20, 40, 80, .15) 100%); }
    .m3-hero__content { position: relative; left: 0; top: 0; padding: 72px var(--skin-gutter) 120px; }
    .m3-hero__logo img { width: min(60vw, 420px); }
    .m3-hero__kicker { margin: 24px 0 0 6px; font-size: 28px; }
    .m3-hero__intro { width: auto; max-width: 560px; margin: 24px 0 0 6px; font-size: 17px; line-height: 1.35; }
    .m3-hero__cloud { width: 240px; top: auto; bottom: 60px; left: 30%; }
}
@media (max-width: 575.98px) {
    .m3-hero__kicker { font-size: 22px; }
    .m3-hero__intro { font-size: 16px; }
}