/* =====================================================
   SCROLL BAND — PRICING + WHY CHOOSE OVER A FIXED PHOTO

   Both sections used to be flat #16150f, so they ran together as
   one long dark block. They now sit directly on a single parallax
   photo: the photo holds still while the content scrolls over it.
   ====================================================== */

.scroll-band {
    position: relative;
    isolation: isolate;
    /* Top and bottom reveals: the photo is visible before the first
       panel arrives and after the last one leaves. */
    padding:0 0;
    background: #16150f;
}

/* clip-path makes this element the containing block for its fixed
   child, so the photo parallaxes but stays inside the band. This is
   the reliable way to do it — background-attachment: fixed is ignored
   on iOS Safari. */
.scroll-band-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    clip-path: inset(0);
    pointer-events: none;
}

.scroll-band-media::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("../images/scroll-band2.png") center / cover no-repeat;
    /*
     * The photograph is editable from the CMS (Home page → Basics). With nothing set the custom
     * property is unresolved and this falls back to the line above, so the approved design renders
     * byte-for-byte as before; the picker sets `--scroll-band-image` on the element and only the
     * image changes. It has to be done this way round because the photo lives on a ::before that
     * an inline style cannot reach.
     */
    background-image: var(--scroll-band-image, url("../images/scroll-band2.png"));
}

/* The gap between the two panels — pure exposed photo. */
.scroll-band-reveal {
    height: 150px;
}

/* ---- Panels ---- */
/* Both sections ride directly on the photo — no tint, slab or shadow of
   their own. The image stays clean end to end. */
.scroll-band > .pricing
{
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.scroll-band > .why-choose{
    background:
        radial-gradient(circle at 12% 10%, rgba(254, 111, 1, .12), transparent 40%),
        #16150f;
    border-radius: 2;
    box-shadow: none;
}

/* =====================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 900px) {
    .scroll-band {
        padding: 78px 0;
    }
    .scroll-band-reveal {
        height: 110px;
    }
}

@media (max-width: 560px) {
    .scroll-band {
        padding: 56px 0;
    }
    .scroll-band-reveal {
        height: 84px;
    }
}

/* A fixed backdrop fights motion sensitivity — pin it to the band. */
@media (prefers-reduced-motion: reduce) {
    .scroll-band-media::before {
        position: absolute;
    }
}