/* Every mfooter hero uses this one overlay. No per-image coordinates or effects. */
.mfooter-hero {
    --hero-navy: 7, 26, 52;
    --hero-orange: 246, 90, 33;
    width: 100%;
    isolation: isolate;
    background: #071a34;
}

.mfooter-hero .hero__picture {
    z-index: 0;
    pointer-events: none;
}

.mfooter-hero .hero__picture img {
    object-position: center;
}

.mfooter-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(var(--hero-navy), .96) 0%,
        rgba(var(--hero-navy), .92) 24%,
        rgba(var(--hero-navy), .72) 44%,
        rgba(var(--hero-navy), .34) 63%,
        rgba(var(--hero-navy), 0) 80%);
}

.mfooter-hero__geometry,
.mfooter-hero__band {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
}

.mfooter-hero__geometry { z-index: 2; }

/* All points use percentages of the hero, never the source image dimensions. */
.mfooter-hero__band--navy {
    clip-path: polygon(22% 0, 32% 0, 50% 100%, 40% 100%);
    background: linear-gradient(180deg,
        rgba(var(--hero-navy), .70), rgba(var(--hero-navy), .48));
}

.mfooter-hero__band--orange {
    clip-path: polygon(32% 0, 35% 0, 53% 100%, 50% 100%);
    background: linear-gradient(180deg,
        rgba(var(--hero-orange), .88) 0%,
        rgba(255, 135, 44, .80) 38%,
        rgba(var(--hero-orange), .48) 65%,
        rgba(var(--hero-orange), .14) 84%,
        rgba(var(--hero-orange), 0) 100%);
}

.mfooter-hero__band--navy-light {
    clip-path: polygon(35.5% 0, 41% 0, 59% 100%, 53.5% 100%);
    background: linear-gradient(180deg,
        rgba(var(--hero-navy), .48), rgba(var(--hero-navy), .24));
}

/* A warm lower edge within the navy layer, matching the reference. */
.mfooter-hero__geometry::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    clip-path: polygon(22% 0, 25% 0, 43% 100%, 40% 100%);
    background: linear-gradient(180deg,
        rgba(var(--hero-orange), 0) 0%,
        rgba(var(--hero-orange), 0) 34%,
        rgba(var(--hero-orange), .24) 54%,
        rgba(255, 121, 30, .90) 80%,
        rgba(var(--hero-orange), .86) 100%);
}

.mfooter-hero .hero__shell { z-index: 3; }
.mfooter-hero h1 { text-shadow: 0 2px 14px rgba(7, 26, 52, .22); }

@media (max-width: 800px) {
    .mfooter-hero::before {
        background: linear-gradient(90deg,
            rgba(var(--hero-navy), .98) 0%,
            rgba(var(--hero-navy), .92) 32%,
            rgba(var(--hero-navy), .64) 62%,
            rgba(var(--hero-navy), 0) 100%);
    }
}