.trust-strip {
    position: relative;
    overflow: hidden;
    background-color: #f8f3ec;
    border-radius: 1rem;
    height: 84px;
    margin: var(--wp--preset--spacing--50) 0;
}

/* Desktop: each panel holds three items and fills the strip; panels crossfade as a group. */
.trust-strip__panel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 1.25rem;
    opacity: 0;
    animation: trust-panel-carousel 10s infinite;
    animation-fill-mode: backwards;
}

/* Negative delay starts panel 1 at the fully-visible point in its keyframe immediately. */
.trust-strip__panel:nth-child(1) { animation-delay: -1s; }
.trust-strip__panel:nth-child(2) { animation-delay: 4s; }

.trust-strip__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 0 0 auto;
}

.trust-strip__item {
    flex: 0 0 auto;
    font-family: 'Source Sans 3', source-sans-3, sans-serif;
    font-weight: 900;
    justify-content: center;
    font-size: 1.33333rem;
    color: #1e103d;
    opacity: 0.75;
    text-transform: uppercase;
    white-space: normal;
    max-width: 30rem;
    line-height: 1.2;
    text-align: center;
}

.trust-strip__logo {
    flex: 0 0 auto;
    filter: grayscale(100%) brightness(80%);
    height: 41px;
    width: auto;
}

/* Panel keyframe: fade in, hold, fade out — the 1s fade windows of the two panels
   overlap (their delays are 5s apart but each is "on" for 6s) so one dissolves
   into the other instead of both going blank in between. */
@keyframes trust-panel-carousel {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    50%  { opacity: 1; }
    60%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Mobile keyframe: slide in from right, stay, slide out to left. The "on" window is
   slightly longer than the 5s spacing between slides so consecutive items crossfade
   rather than leaving a blank gap. */
@keyframes trust-carousel {
    0%     { opacity: 0; transform: translateX(16px); }
    2%     { opacity: 1; transform: translateX(0); }
    16%    { opacity: 1; transform: translateX(0); }
    18%    { opacity: 0; transform: translateX(-16px); }
    100%   { opacity: 0; transform: translateX(-16px); }
}

@media (max-width: 1023px) {
    .trust-strip {
        height: 108px;
        justify-content: flex-start;
    }

    /* Panels are just a grouping for desktop; on mobile every slide cycles individually. */
    .trust-strip__panel {
        position: static;
        opacity: 1;
        animation: none;
    }

    .trust-strip__slide {
        position: absolute;
        inset: 0;
        padding: 0 1.2rem;
        opacity: 0;
        animation: trust-carousel 30s infinite;
        animation-fill-mode: backwards;
        display: flex;
        align-items: center;
        gap: 2rem;
        justify-content: center;
    }

    .trust-strip__panel:nth-child(1) .trust-strip__slide:nth-child(1) { animation-delay: -0.6s; }
    .trust-strip__panel:nth-child(1) .trust-strip__slide:nth-child(2) { animation-delay: 4.4s; }
    .trust-strip__panel:nth-child(1) .trust-strip__slide:nth-child(3) { animation-delay: 9.4s; }
    .trust-strip__panel:nth-child(2) .trust-strip__slide:nth-child(1) { animation-delay: 14.4s; }
    .trust-strip__panel:nth-child(2) .trust-strip__slide:nth-child(2) { animation-delay: 19.4s; }
    .trust-strip__panel:nth-child(2) .trust-strip__slide:nth-child(3) { animation-delay: 24.4s; }

    .trust-strip__item {
        font-size: 1.25rem;
        white-space: normal;
        line-height: 1.2;
        max-width: 20rem;
        text-align: center;
    }

    .trust-strip__logo {
        height: auto;
        max-width: 75px;
        max-height: 40px;
        flex-shrink: 0;
    }
}