.cta-band {
    position: relative;
    /* The photograph is oversized for the parallax and the badge hangs past the
       card's corner, so the band clips rather than pushing the page sideways.
       `clip`, not `hidden`: hidden would make the band a scroll container, and
       the sticker below is sticky against the page — it would never engage. */
    overflow: clip;
    display: flex;
    min-height: 100vh;
    padding: 0;
    color: var(--color-dark-purple);
    isolation: isolate;
}

.cta-band--primary {
    background: var(--color-primary);
}

.cta-band--light {
    background: var(--color-light-purple);
}

/* ── Photograph ──────────────────────────────────────────────
   Its own layer, not a section background, so the scroll parallax in main.js
   has an element to translate. The height is what buys the travel and it has to
   beat the travel to stay covering: main.js moves the layer ±15% of its own
   height, which at 150% is ±22.5% of the band, inside the 25% of slack hanging
   off each edge. Shrink this and the parallax drags an edge into view. */
.cta-band__media {
    position: absolute;
    left: 0;
    right: 0;
    top: -25%;
    height: 150%;
    z-index: -2;
    pointer-events: none;
}

.cta-band__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The design reads the photograph warm and open, so the band carries only the
   faintest wash — enough to keep the grid and the card's shadow legible. */
.cta-band--image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(rgba(6, 5, 48, 0.12), rgba(6, 5, 48, 0.22));
    pointer-events: none;
}

/* ── Grid decor ──────────────────────────────────────────────
   Sits low and left in the new design, behind the card, reading as a watermark
   on the photograph rather than a centred motif. */
.cta-band__pattern {
    position: absolute;
    left: -6%;
    bottom: -12%;
    z-index: -1;
    display: block;
    width: min(560px, 52vw);
    height: auto;
    aspect-ratio: 1;
    opacity: 0.35;
    pointer-events: none;
    object-fit: contain;
}

.cta-band__grid {
    position: relative;
    z-index: 1;
    align-items: center;
    min-height: inherit;
}

.cta-band__inner {
    grid-column: 3 / 11;
    min-width: 0;
    width: 100%;
    margin: 0 auto;
}

/* ── Card ────────────────────────────────────────────────────
   The rotation is the animation's resting pose, not decoration: main.js scrubs
   it from -8deg to -2deg about the bottom-right corner as the band crosses the
   screen. The value here is the mid-point so the card still sits on a believable
   tilt when the script never runs (reduced motion, no ScrollTrigger, no JS). */
.cta-band__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(1.75rem, 0.5rem + 4vw, 4rem);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 24px 60px rgba(6, 5, 48, 0.18);
    color: var(--color-dark-purple);
    text-align: center;
    transform: rotate(-5deg);
    transform-origin: bottom right;
    will-change: transform;
}

.cta-band__heading {
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);
    letter-spacing: 0;
}

.cta-band__heading-mobile {
    display: none;
}

.cta-band__body {
    margin: 0;
    max-width: 54ch;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: var(--fw-regular);
    line-height: 1.3333;
    letter-spacing: 0;
}

/* The accent pill every other call to action on the site wears — same fill,
   border and radius as .site-header__cta and .services-hero__button. */
.cta-band__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--color-accent-01);
    border-radius: 999px;
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    box-shadow: 0 1px 2px rgba(198, 228, 246, 0.05);
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: var(--fw-semibold);
    line-height: 1.6;
    letter-spacing: 0;
    text-decoration: none;
}

/* ── Badge ───────────────────────────────────────────────────
   The rough purple blob hanging off the card's bottom-right corner. union.svg
   is a filled shape, so it goes on as a mask and takes the brand fill — that
   keeps it on the palette instead of the flat lilac baked into the file. It
   rides the card's rotation, then adds its own counter-tilt on top. */
.cta-band__badge {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(7rem, 5rem + 6vw, 10.5rem);
    aspect-ratio: 119 / 121;
    background: var(--color-primary);
    -webkit-mask: url("../../../../../uploads/meowgical/images/shared/union.svg") center / contain no-repeat;
    mask: url("../../../../../uploads/meowgical/images/shared/union.svg") center / contain no-repeat;
    transform: translate(28%, 42%) rotate(-8deg);
    pointer-events: none;
}

.cta-band__badge-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* The blob's ears eat the top third, so the label sits in the body of it. */
    margin-top: 18%;
    gap: 0.15em;
    color: #fff;
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 0.6rem + 0.45vw, 1rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

/* ── Sticker ─────────────────────────────────────────────────
   The same badge, taken off the card corner so it rides the band as the visitor
   scrolls through it: it sits high on the right as the band comes up, pins just
   under the header while the card passes, then leaves with the band's bottom
   edge. Ported from the address card on restaurant-amici.com, which is the same
   idea. The travel is `position: sticky` and nothing else — main.js only adds
   the tilt that swings with the scroll, so it still rides without the script.

   The rail is the track. It spans the band, which is what bounds the ride: the
   sticker belongs to this section and never appears outside it. */
.cta-band__sticker {
    --sticker-size: clamp(6rem, 4.5rem + 4vw, 8.5rem);

    /* Clears the header pill, which is sticky at the top of every page. */
    --sticker-top: 8rem;

    /* Where it sits before the scroll picks it up: just inside the band's top
       edge, so it reads as part of the band rather than pasted over the seam. */
    --sticker-start: 2.5rem;

    /* The right edge of the content column, at every width — the same box the
       card's grid occupies. */
    --sticker-inset: max(var(--container-pad), calc((100% - var(--container-max)) / 2));

    position: absolute;
    top: 0;
    /* Parked clear of the bottom edge: the blob is tilted, and `overflow: clip`
       would shave its corners off if it came to rest flush. */
    bottom: 1.5rem;
    right: var(--sticker-inset);
    width: var(--sticker-size);
    z-index: 3;
    pointer-events: none;
}

/* Accent fill rather than the corner badge's brand purple: the band ships on a
   primary tone as well, and purple on purple would disappear. */
.cta-band__sticker-badge {
    position: sticky;
    top: var(--sticker-top);
    /* Margin, not `top`, sets the resting spot: it is the flow position sticky
       measures from, and the rail has no other content to place it. */
    margin-top: var(--sticker-start);
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 119 / 121;
    background: var(--color-accent-01);
    -webkit-mask: url("../../../../../uploads/meowgical/images/shared/union.svg") center / contain no-repeat;
    mask: url("../../../../../uploads/meowgical/images/shared/union.svg") center / contain no-repeat;
    /* main.js scrubs the tilt as the page moves; this is the resting pose it
       returns to, and the whole of it when the script never runs. */
    transform: rotate(var(--sticker-tilt, -6deg));
    will-change: transform;
}

.cta-band__sticker-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* The blob's ears eat the top third, so the label sits in the body of it. */
    margin-top: 18%;
    gap: 0.15em;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: clamp(0.7rem, 0.6rem + 0.35vw, 0.9rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

/* Both are the same label, so only one shows: the sticker takes the wide
   screens it has a margin to ride in, the corner badge keeps the narrow ones. */
@media (min-width: 1025px) {
    .cta-band .cta-band__badge {
        display: none;
    }
}

@media (max-width: 1024px) {
    .cta-band .cta-band__sticker {
        display: none;
    }
}

/* The band ships on a light tone too, where a white card on a white page has no
   edge of its own. The wash gives it one without touching the image tone. */
.cta-band--light .cta-band__card {
    box-shadow: 0 24px 60px rgba(6, 5, 48, 0.1);
}

@media (max-width: 1024px) {
    .cta-band__inner {
        grid-column: 2 / 12;
    }

    .cta-band__pattern {
        width: min(460px, 62vw);
    }
}

@media (max-width: 768px) {
    .cta-band {
        min-height: 34rem;
    }

    .cta-band__inner {
        grid-column: 1 / -1;
    }

    .cta-band__card {
        gap: 1.5rem;
        /* Phones get the one-shot entrance rather than the scrub, and it lands
           the card at -2deg. Anything that stops the script still reads tilted. */
        transform: rotate(-2deg);
    }

    .cta-band__pattern {
        width: min(430px, 96vw);
        left: -14%;
        bottom: -8%;
    }

    .cta-band__heading {
        font-size: clamp(2rem, 9vw, var(--text-h2));
    }

    .cta-band__heading:has(.cta-band__heading-mobile) .cta-band__heading-desktop {
        display: none;
    }

    .cta-band__heading-mobile {
        display: inline;
    }

    .cta-band__body {
        font-size: 1.125rem;
        line-height: var(--lh-copy);
    }

    /* The card is much narrower here, so the blob has to hang further clear of
       the corner or it lands on the button. */
    .cta-band__badge {
        width: clamp(5.5rem, 22vw, 8rem);
        transform: translate(34%, 54%) rotate(-8deg);
    }
}

/* Visitors who asked for less motion keep the card's pose but never the travel;
   main.js bails before it sets anything, so this only has to undo the hint. */
@media (prefers-reduced-motion: reduce) {
    .cta-band__card,
    .cta-band__sticker-badge {
        will-change: auto;
    }
}