/* ========================================================================
   Elatrik v15 — diensten-hero overgang lager geplaatst
   ======================================================================== */

/*
   De zachte fade onderaan de diensten-hero blijft aanwezig, maar start lager.
   Daardoor blijft meer van de foto zichtbaar en wordt de overgang pas echt
   onderaan naar de lichte content getrokken.
*/
.service-cover-hero::after {
    height: clamp(115px, 14vw, 230px) !important;
    bottom: -54px !important;
    background:
        radial-gradient(ellipse at 50% 115%, rgba(251,248,242,.96) 0%, rgba(251,248,242,.64) 32%, rgba(251,248,242,.20) 58%, rgba(251,248,242,0) 82%),
        linear-gradient(180deg, rgba(251,248,242,0) 0%, rgba(251,248,242,.16) 42%, rgba(251,248,242,.68) 78%, var(--cream) 100%) !important;
}

.service-cover-hero__shade {
    background:
        radial-gradient(circle at 70% 45%, rgba(217,150,46,.10), transparent 40%),
        linear-gradient(0deg, rgba(251,248,242,.30) 0%, rgba(251,248,242,.12) 9%, rgba(251,248,242,0) 23%, rgba(18,17,15,.12) 46%, rgba(18,17,15,.22) 100%),
        linear-gradient(90deg, rgba(18,17,15,.90) 0%, rgba(18,17,15,.68) 42%, rgba(18,17,15,.24) 72%, rgba(18,17,15,.10) 100%) !important;
}

@media (max-width: 767.98px) {
    .service-cover-hero::after {
        height: 130px !important;
        bottom: -38px !important;
    }
}