/* ===============================================================
   ALOISE — Hero rendering stability
   Keeps the current visual, but removes the server/browser timing
   ambiguity around the main image and the brush transition.
   =============================================================== */

.banner-five {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-color: #111111;
    isolation: isolate;
}

/* brushbg.png is 1920 x 253. On desktop the old rule used a
   280px pseudo-element with bottom:-48px, which placed the actual
   253px image at the same top coordinate but left an unused strip.
   These values preserve that visible position while making sizing
   and repetition deterministic. */
@media (min-width: 576px) {
    .banner-five::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -21px !important;
        width: 100%;
        height: 253px !important;
        background-image: url("../../media/background/brushbg.png?v=20260910") !important;
        background-repeat: no-repeat !important;
        background-position: center bottom !important;
        background-size: 100% 253px !important;
        pointer-events: none;
        z-index: 1;
    }

    .banner-five .baneer-five-content {
        z-index: 2 !important;
    }
}

/* Keep the template's compact mobile brush behavior, but make the
   rendering explicit so it cannot repeat or tile. */
@media (max-width: 575px) {
    .banner-five::after {
        background-image: url("../../media/background/brushbg.png?v=20260910") !important;
        background-repeat: no-repeat !important;
        background-position: center bottom !important;
        background-size: contain !important;
        pointer-events: none;
    }
}