.section-testimonial-stack {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: 7.5rem 0 8rem;
    background: var(--color-primary);
    color: var(--color-white);
    isolation: isolate;
}

.section-testimonial-stack .services-testimonials__grid {
    position: relative;
    z-index: 1;
}

.section-testimonial-stack > .container.grid > .services-testimonials__header,
.section-testimonial-stack > .container.grid > .services-testimonials__stage {
    grid-column: 1 / -1;
}

.section-testimonial-stack .services-testimonials__header {
    text-align: center;
}

.section-testimonial-stack .services-testimonials__title {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
}

.section-testimonial-stack .services-testimonials__title em {
    font-size: clamp(4.75rem, 6vw, 5.75rem);
    font-style: italic;
    line-height: var(--lh-display);
}

.section-testimonial-stack .services-testimonials__title span {
    font-size: clamp(3rem, 4.25vw, 4rem);
    line-height: 1.12;
}

.section-testimonial-stack .services-testimonials__stage {
    position: relative;
    width: 100%;
    min-height: 650px;
    margin: 5rem auto 0;
    --testimonial-col: calc((100% - (11 * var(--grid-gap))) / 12);
    --testimonial-stack-left: calc(3 * (var(--testimonial-col) + var(--grid-gap)));
    --testimonial-stack-width: calc((6 * var(--testimonial-col)) + (5 * var(--grid-gap)));
    --testimonial-showcase-left: calc(var(--testimonial-stack-left) - 280px);
}

.section-testimonial-stack .services-testimonials__stack {
    position: absolute;
    left: var(--testimonial-stack-left);
    top: 0;
    width: var(--testimonial-stack-width);
    max-width: none;
    height: 560px;
}

.section-testimonial-stack .services-testimonial-card {
    --card-x: 0px;
    --card-y: 0px;
    --card-rotate: 0deg;
    --card-scale: 1;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 560px;
    padding: 4rem 4rem 3.75rem;
    background: var(--color-white);
    color: var(--color-dark-purple);
    cursor: grab;
    box-shadow: 0 22px 52px rgba(31, 29, 111, 0.24);
    transform: translate3d(var(--card-x), var(--card-y), 0) rotate(var(--card-rotate)) scale(var(--card-scale));
    transition: transform 0.36s cubic-bezier(0.2, 0.72, 0.2, 1), box-shadow 0.24s ease, opacity 0.24s ease;
    user-select: none;
    /* The drag only claims sideways gestures (main.js lets a mostly vertical
       one go), so the browser keeps vertical panning: with none, a phone
       could not scroll the page past the deck by swiping over the cards. */
    touch-action: pan-y;
}

.section-testimonial-stack .services-testimonial-card.is-top {
    box-shadow: 0 28px 70px rgba(31, 29, 111, 0.32);
}

.section-testimonial-stack .services-testimonial-card.is-dragging {
    cursor: grabbing;
    transition: none;
}

.section-testimonial-stack .services-testimonial-card.is-swiping {
    pointer-events: none;
}

.section-testimonial-stack .services-testimonial-card--1 {
    --card-x: 0px;
    --card-y: 0px;
    --card-rotate: 0deg;
}

.section-testimonial-stack .services-testimonial-card--2 {
    --card-x: 12px;
    --card-y: -14px;
    --card-rotate: 1.4deg;
}

.section-testimonial-stack .services-testimonial-card--3 {
    --card-x: -10px;
    --card-y: -26px;
    --card-rotate: -1.2deg;
}

.section-testimonial-stack .services-testimonial-card__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.42fr);
    gap: 2.5rem;
}

.section-testimonial-stack .services-testimonial-card__meta span {
    display: block;
    margin-bottom: 0.625rem;
    color: var(--color-soft-purple);
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
}

.section-testimonial-stack .services-testimonial-card__meta strong {
    display: block;
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: var(--fw-bold);
    line-height: 1;
}

.section-testimonial-stack .services-testimonial-card__meta p {
    margin: 0.5rem 0 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
}

.section-testimonial-stack .services-testimonial-card__quote {
    margin: 2.25rem 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: var(--fw-regular);
    line-height: 1.5;
    letter-spacing: -0.03125em;
}

.section-testimonial-stack .services-testimonial-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin: 0;
    color: #10585d;
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: var(--fw-bold);
    line-height: 1;
}

.section-testimonial-stack .services-testimonial-card__brand::before {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 0 100% 100% 100%;
    background: currentColor;
    transform: rotate(45deg);
}

.section-testimonial-stack .services-testimonials__showcase {
    position: absolute;
    left: var(--testimonial-showcase-left);
    top: 5.5rem;
    z-index: 20;
    width: 330px;
    margin: 0;
    padding: 0.875rem;
    background: var(--color-white);
    box-shadow: 0 22px 44px rgba(31, 29, 111, 0.3);
    transform: rotate(-6deg);
    transition:
        opacity 0.24s ease,
        transform 0.32s cubic-bezier(0.2, 0.72, 0.2, 1),
        translate 0.32s cubic-bezier(0.2, 0.72, 0.2, 1),
        scale 0.32s cubic-bezier(0.2, 0.72, 0.2, 1);
    pointer-events: none;
}

/* The dip is written with the individual translate and scale properties so it
   rides on top of whatever pose the breakpoint gives the showcase. Written as
   a transform it had to restate that pose at every breakpoint, and the tablet
   one (centred with translateX(-50%)) was missed: each swap there threw the
   picture half its width sideways and back. main.js swaps the picture at the
   bottom of the dip, so the fade here and its DIP constant move together. */
.section-testimonial-stack .services-testimonials__showcase.is-changing {
    opacity: 0.45;
    translate: 0 8px;
    scale: 0.98;
}

.section-testimonial-stack .services-testimonials__showcase img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.74;
    object-fit: cover;
}

.section-testimonial-stack > .container.grid > .services-testimonials__mascot {
    grid-column: 1 / -1;
}

.section-testimonial-stack .services-testimonials__mascot {
    position: absolute;
    right: 4rem;
    bottom: 3.25rem;
    z-index: 2;
    width: 180px;
    margin: 0;
}

.section-testimonial-stack .services-testimonials__mascot img {
    display: block;
    width: 100%;
    height: auto;
}

.section-testimonial-stack .services-testimonials__spark {
    position: absolute;
    right: 14.5%;
    top: 8.5rem;
    z-index: 1;
    width: 72px;
    height: 72px;
    background: url("../../../../../uploads/meowgical/images/shared/spark.svg") center / contain no-repeat;
    transform: rotate(8deg);
}

.section-testimonial-stack .services-testimonials__pattern {
    position: absolute;
    left: max(0rem, calc((100vw - var(--container-max)) / 2 + 2rem));
    bottom: -1.25rem;
    z-index: 0;
    width: 560px;
    height: 345px;
    opacity: 0.38;
    pointer-events: none;
    background: url("../../../../../uploads/meowgical/images/shared/grid.svg") left bottom / contain no-repeat;
}

@media (max-width: 1024px) {
    .section-testimonial-stack .services-testimonials__stage {
        min-height: 720px;
    }

    /* Absolutely positioned cards in a fixed-height box means the longest
       quote runs straight out of the white once the measure narrows — the
       card's background stops, the text carries on. Put every card in the same
       grid cell instead: they still overlap, the swipe still drives them by
       --card-x/y/rotate, but the tallest one now sets the height and 500px
       becomes a floor rather than a lid. */
    .section-testimonial-stack .services-testimonials__stack {
        position: relative;
        left: auto;
        display: grid;
        width: min(100%, 520px);
        height: auto;
        margin-inline: auto;
        transform: none;
    }

    .section-testimonial-stack .services-testimonial-card {
        position: relative;
        grid-area: 1 / 1;
        inset: auto;
        min-height: 500px;
        padding: 2rem;
    }

    .section-testimonial-stack .services-testimonial-card__meta {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .section-testimonial-stack .services-testimonial-card__quote {
        margin: 1.5rem 0;
        font-size: 1.125rem;
        line-height: 1.55;
        letter-spacing: 0;
    }

    .section-testimonial-stack .services-testimonial-card__brand {
        font-size: 1.5rem;
    }

    /* Centred with its margins rather than translateX(-50%), so the tilt and
       the swap dip's scale both pivot on the middle of the print. Off the
       layout box's middle, the dip dragged the print sideways on every swap. */
    .section-testimonial-stack .services-testimonials__showcase {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        margin: 0 auto;
        transform: rotate(-6deg);
    }
}

@media (max-width: 768px) {
    .section-testimonial-stack {
        padding: 5rem 0 6rem;
    }

    /* The stage was only ever tall enough to park the showcase photo under the
       stack; with the stack sizing itself there is nothing to reserve, and a
       330px print rotated -6deg does not fit a 390px screen anyway. Both drop
       into flow, one under the other. */
    .section-testimonial-stack .services-testimonials__stage {
        min-height: 0;
        margin-top: 3rem;
    }

    .section-testimonial-stack .services-testimonial-card {
        min-height: 0;
    }

    .section-testimonial-stack .services-testimonials__showcase {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: min(100%, 300px);
        margin: 2.5rem auto 0;
        transform: rotate(-4deg);
    }

    .section-testimonial-stack .services-testimonials__title em {
        font-size: clamp(3.25rem, 15vw, 4.75rem);
    }

    .section-testimonial-stack .services-testimonials__title span {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .section-testimonial-stack .services-testimonial-card {
        padding: 1.5rem;
    }

    .section-testimonial-stack .services-testimonials__mascot,
    .section-testimonial-stack .services-testimonials__spark {
        display: none;
    }
}

/* Reduced motion: the showcase still cross-fades between pictures, without
   the dip. The cards keep their stylesheet transitions; main.js already drops
   the lift and the throw delay for these visitors. */
@media (prefers-reduced-motion: reduce) {
    .section-testimonial-stack .services-testimonials__showcase {
        transition: opacity 0.24s ease;
    }

    .section-testimonial-stack .services-testimonials__showcase.is-changing {
        translate: none;
        scale: none;
    }
}