#about-hero {
    min-height: clamp(560px, 92dvh, 880px);
    display: flex;
    align-items: center;
    padding-block: clamp(3rem, 8vw, 6rem);
    isolation: isolate; /* keeps blend modes/z-index contained to this section */
}

/* --- Background photo with subtle load-in scale --- */

.hero-bg-img {
    z-index: 0;
    animation: hero-photo-in 1.4s ease-out both;
}

@keyframes hero-photo-in {
    from {
        transform: scale(1.08);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Graduated scrim: transparent near top of photo, solid brand-dark
            behind the text zone. This is the main fix for the "flat/cheap"
            look — depth instead of a uniform tint. --- */

#about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(9, 10, 15, 0.25) 0%,
            rgba(9, 10, 15, 0.55) 40%,
            rgba(9, 10, 15, 0.92) 100%
        ),
        linear-gradient(
            90deg,
            rgba(9, 10, 15, 0.75) 0%,
            rgba(9, 10, 15, 0.35) 55%,
            rgba(9, 10, 15, 0.15) 100%
        );
}

/* --- Fine film grain for a photographic/premium feel over the flat scrim --- */

#about-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Responsive tuning --- */

@media (max-width: 991.98px) {
    #about-hero {
        min-height: clamp(480px, 86dvh, 720px);
        text-align: left;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-bg-img {
        animation: none;
    }
}