/* ============================================================
   BEINC — Testimonials Section
   Two-column layout (text + media) with a media carousel,
   scroll-driven marquee, dashed guide lines, audio-reactive
   waveform, and a moving pagination bar.
   ============================================================ */


.testimonials-section {
    --ts-edge:             2vw;          /* viewport-relative twin of --pad-x, stays consistent inside any child container */
    --ts-pad-y:           10vh;
    --ts-row-title-h:    clamp(58px, 8vh, 88px);
    --ts-row-rated-h:    clamp(120px, 18vh, 190px);
    --ts-row-test-h:     328px;
    --ts-row-controls-h: clamp(56px, 8vh, 84px);
    --ts-text-col:       40vw;
    --ts-text-pad:       calc(var(--ts-edge) * 2);
    --ts-card-ratio:      0.75;          /* 3:4 portrait */
    --ts-active-h:       100%;
    --ts-inactive-h:      80%;

    position: relative;
    width: 100%;
    height: 100vh;
    background: var(--color-white);
    padding-top:    var(--ts-pad-y);
    padding-bottom: var(--ts-pad-y);
    padding-left:   var(--ts-edge);
    box-sizing: border-box;
    overflow: hidden;
    color: var(--color-black2);
}


.testimonials-section__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: var(--ts-text-col) 1fr;
    grid-template-rows: 1fr;
}


/* ============================================================
   TEXT COLUMN
   ============================================================ */
.testimonials-section__text {
    position: relative;
    display: grid;
    grid-template-rows:
        var(--ts-row-title-h)
        var(--ts-row-rated-h)
        1fr
        var(--ts-row-controls-h);
    height: 100%;
    min-height: 0;
}


/* ── TITLE ROW ── */
.testimonials-section__title-row {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 var(--ts-edge) 0 0;
    height: var(--ts-row-title-h);
}

.testimonials-section__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-lg);
    color: var(--color-black2);
    line-height: 1.1;
    margin: 0;
}


/* ── RATED ROW ── */
.testimonials-section__rated-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ts-edge);
    height: var(--ts-row-rated-h);
}

/* Scoped: shrink the shared R-Rated button inside this section only */
.testimonials-section .rr-btn__content { padding: clamp(6px, 0.8vw, 10px) clamp(10px, 1.4vw, 18px); gap: clamp(6px, 0.9vw, 12px); }
.testimonials-section .rr-btn__arrow   { padding: 0 clamp(8px, 1.1vw, 14px); }
.testimonials-section .rr-btn__badge   { width: clamp(26px, 3vw, 38px); height: clamp(26px, 3vw, 38px); font-size: clamp(14px, 1.7vw, 22px); }
.testimonials-section .rr-btn__rating,
.testimonials-section .rr-btn__label   { font-size: clamp(10px, 0.85vw, 14px); }
.testimonials-section .rr-btn__star    { width: clamp(9px, 0.9vw, 13px); height: clamp(9px, 0.9vw, 13px); }
.testimonials-section .rr-btn__icon    { width: clamp(7px, 0.8vw, 11px); }


.testimonials-section__asterisk {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    transform-origin: center center;
    will-change: transform;
}

.testimonials-section__asterisk svg {
    width: 100%;
    height: 100%;
    display: block;
}

.testimonials-section__asterisk svg path { fill: var(--color-black2); }


/* ── TESTIMONIALS ROW ── */
.testimonials-section__test-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: var(--ts-edge);
    min-height: 0;
}

.testimonials-section__test {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
}

.testimonials-section__test.is-active {
    opacity: 1;
    pointer-events: auto;
}

.testimonials-section__test-body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: 1.35;
    color: var(--color-black2);
    margin: 0 0 var(--space-3) 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.testimonials-section__test-attribution {
    margin-top: auto;
}

.testimonials-section__test-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: var(--tracking-body);
    color: var(--color-black2);
    line-height: 1.3;
    margin: 0;
}

.testimonials-section__test-role {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: 12px;
    letter-spacing: var(--tracking-body);
    color: var(--color-black2);
    line-height: 1.3;
    margin: 4px 0 0 0;
}


/* ── CONTROLS ROW ── */
.testimonials-section__controls-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--ts-edge);
    height: var(--ts-row-controls-h);
    background: var(--color-black2);
    z-index: 2;
}

.testimonials-section__arrow-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: var(--guide-width) var(--guide-style) var(--color-greyish);
    border-radius: var(--radius);
    padding: 4px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--color-black2);
    transition: background 0.3s ease, color 0.3s ease;
}

.testimonials-section__arrow-btn:hover {
    background: var(--color-greyish);
}

.testimonials-section__arrow-btn svg {
    width: 12px;
    height: auto;
    display: block;
    fill: currentColor;
}

.testimonials-section__arrow-btn--prev svg { transform: rotate(180deg); }


/* Pagination bar */
.testimonials-section__pagination {
    position: relative;
    flex: 1;
    height: 3px;
    border-radius: 1px;
    background: var(--color-grid);
    overflow: hidden;
}

.testimonials-section__pagination-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-white);
    border-radius: 1px;
    will-change: transform, width;
}


/* ============================================================
   GUIDE LINES (dashed)
   ============================================================ */
.testimonials-section__hguide {
    position: absolute;
    left: calc(-1 * var(--ts-edge));
    width: calc(var(--ts-text-col) + var(--ts-edge));
    border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
    pointer-events: none;
    z-index: 1;
}

.testimonials-section__hguide--title-top    { top: 0; }
.testimonials-section__hguide--title-bottom { top: var(--ts-row-title-h); }
.testimonials-section__hguide--rated-bottom {
    top: calc(var(--ts-row-title-h) + var(--ts-row-rated-h));
}
.testimonials-section__hguide--test-bottom {
    top: auto;
    bottom: var(--ts-row-controls-h);
}

.testimonials-section__vguide {
    position: absolute;
    top: var(--ts-row-title-h);
    bottom: var(--ts-row-controls-h);
    width: 0;
    border-left: var(--guide-width) var(--guide-style) var(--color-greyish);
    pointer-events: none;
    z-index: 1;
}

.testimonials-section__vguide--left  { left: 0; }
.testimonials-section__vguide--right { left: calc(var(--ts-text-col) - 2px); }


/* ============================================================
   MEDIA COLUMN
   ============================================================ */
.testimonials-section__media {
    position: relative;
    display: grid;
    grid-template-rows: var(--ts-row-title-h) 1fr;
    height: 100%;
    min-height: 0;
}


/* ── MARQUEE ── */
.testimonials-section__marquee {
    position: relative;
    background: var(--color-black2);
    overflow: hidden;
    height: var(--ts-row-title-h);
}

.testimonials-section__marquee-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.testimonials-section__marquee-track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    will-change: transform;
}

.testimonials-section__marquee-set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.testimonials-section__marquee-item {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    padding: 0 clamp(28px, 4vw, 60px);
    white-space: nowrap;
}

.testimonials-section__marquee-dash {
    display: inline-flex;
    width: 22px;
    height: 6px;
    flex-shrink: 0;
}
.testimonials-section__marquee-dash svg { width: 100%; height: 100%; display: block; }
.testimonials-section__marquee-dash svg path { fill: var(--color-white); }

.testimonials-section__marquee-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    z-index: 2;
}

.testimonials-section__marquee-fade--left  { left: 0;  background: linear-gradient(to right, var(--color-black2), transparent); }
.testimonials-section__marquee-fade--right { right: 0; background: linear-gradient(to left,  var(--color-black2), transparent); }


/* ── MEDIA ROW ── */
.testimonials-section__media-row {
    position: relative;
    padding: var(--ts-edge) 0 0 var(--ts-edge);
    overflow: hidden;
    min-height: 0;
}

.testimonials-section__cards {
    position: relative;
    height: 100%;
    width: 100%;
    cursor: grab;
    touch-action: pan-y;        /* keep native vertical scroll, capture horizontal swipe via JS */
    user-select: none;
}

.testimonials-section__cards:active { cursor: grabbing; }

.testimonials-section__card {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    will-change: transform, opacity;
    cursor: grab;
}

.testimonials-section__card:active { cursor: grabbing; }

.testimonials-section__card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    /* All four corners rounded — the audio control panel that previously
       owned the bottom-rounding is hidden site-wide (see .panel rule
       below). When restoring the panel, set this back to
       `var(--radius) var(--radius) 0 0`. */
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-black2);
    flex-shrink: 0;
}

.testimonials-section__card-media video,
.testimonials-section__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ── MEDIA CONTROL PANEL ──
   Currently hidden site-wide — testimonials have no sound for now.
   Full markup preserved in <template id="panel-stash"> in index.html.
   To restore: delete the `display: none` line and revert the
   `border-radius` on .testimonials-section__card-media (back to
   top-only) and the `PANEL_H` constant in testimonials-section.js
   (back to 46). */
.testimonials-section__panel {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 46px;
    flex-shrink: 0;
    padding: 12px 26px;
    background: var(--color-white);
    border: var(--guide-width) var(--guide-style) var(--color-greyish);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
}

.testimonials-section__panel-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 22px;
    height: 22px;
    color: var(--color-black2);
}

.testimonials-section__panel-btn svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
    transition: transform 0.4s var(--ease-primary), opacity 0.4s var(--ease-primary);
}

.testimonials-section__panel-icon-stack {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.testimonials-section__panel-icon-stack svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: currentColor;
    transition: opacity 0.35s var(--ease-primary), transform 0.35s var(--ease-primary);
}

.testimonials-section__panel-icon-stack svg.is-hidden {
    opacity: 0;
    transform: scale(0.6);
}


/* Waveform */
.testimonials-section__waveform {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    overflow: hidden;
}

.testimonials-section__waveform-bar {
    width: 2px;
    background: var(--color-black2);
    border-radius: 1px;
    transform-origin: center center;
    transform: scaleY(0.2);
    height: 60%;
    will-change: transform;
}


/* Volume icons (custom inline SVG via CSS-managed visibility) */
.testimonials-section__volume-on,
.testimonials-section__volume-off {
    fill: var(--color-black2);
}


/* ── CARD FADES on right and left edges ── */
.testimonials-section__media-row::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 22%;
    background: linear-gradient(to left, var(--color-white) 5%, rgba(255, 251, 240, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

.testimonials-section__media-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 8%;
    background: linear-gradient(to right, var(--color-white), rgba(255, 251, 240, 0));
    pointer-events: none;
    z-index: 3;
}


/* ============================================================
   MOBILE-ONLY HELPERS (hidden on desktop)
   ============================================================ */
.testimonials-section__mobile-arrow {
    display: none;
}


/* ============================================================
   TABLET (<= 1023px)
   ============================================================ */
@media (max-width: 1023px) {
    .testimonials-section {
        --ts-text-col: 50vw;
        --ts-edge: 4vw;
        --ts-row-title-h:    64px;
        --ts-row-rated-h:   140px;
        --ts-row-test-h:    320px;
        --ts-row-controls-h: 64px;
    }

    .testimonials-section__media-row::after { width: 0; }
    .testimonials-section__media-row { padding-right: var(--ts-edge); }
}


/* ============================================================
   MOBILE (<= 767px) — single stacked column
   ============================================================ */
@media (max-width: 767px) {
    .testimonials-section {
        height: auto;
        --ts-text-col: 100vw;
        padding-left: 0;
    }

    .testimonials-section__inner {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    /* Order: title, marquee, media+arrows, testimonial, rated */
    .testimonials-section__text { display: contents; }

    .testimonials-section__title-row {
        order: 1;
        height: auto;
        padding: calc(var(--ts-edge) * 2) var(--ts-edge);
        justify-content: center;
        text-align: center;
        position: relative;
    }
    .testimonials-section__title-row::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
        transform: scaleX(var(--line-x, 1));
        transform-origin: left center;
    }
    .testimonials-section__title { text-align: center; width: 100%; }

    .testimonials-section__media { order: 2; display: contents; }
    .testimonials-section__marquee {
        order: 2;
        height: 36px;
    }
    .testimonials-section__marquee-fade { width: 50px; }

    .testimonials-section__media-row {
        order: 3;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-5) 0;
        height: auto;
    }

    .testimonials-section__media-row::before,
    .testimonials-section__media-row::after { display: none; }

    .testimonials-section__cards {
        position: relative;
        width: 58vw;
        /* Hug the card: card-media is 3:4 (height = width × 4/3) + 46px panel beneath */
        height: calc(58vw * 4 / 3 + 46px);
        overflow: hidden;          /* clip the off-screen cards as they slide in/out */
    }

    .testimonials-section__card {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .testimonials-section__card-media {
        height: calc(100% - 46px);
        aspect-ratio: auto;
    }

    .testimonials-section__mobile-arrow {
        display: inline-flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        background: var(--color-white);
        border: var(--guide-width) var(--guide-style) var(--color-greyish);
        border-radius: var(--radius);
        padding: 6px;
        width: 36px;
        height: 36px;
        cursor: pointer;
        color: var(--color-black2);
    }
    .testimonials-section__mobile-arrow svg { width: 14px; height: auto; fill: currentColor; display: block; }
    .testimonials-section__mobile-arrow--prev { left: var(--ts-edge); }
    .testimonials-section__mobile-arrow--prev svg { transform: rotate(180deg); }
    .testimonials-section__mobile-arrow--next { right: var(--ts-edge); }

    .testimonials-section__test-row {
        order: 4;
        padding: var(--space-5) var(--ts-edge);
        height: auto;
        position: relative;
    }
    .testimonials-section__test-row::before,
    .testimonials-section__test-row::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
        transform: scaleX(var(--line-x, 1));
    }
    .testimonials-section__test-row::before { top: 0;    transform-origin: right center; }
    .testimonials-section__test-row::after  { bottom: 0; transform-origin: left center; }

    /* Mobile keeps the same grid-cell stacking as desktop, just override layout-only props */
    .testimonials-section__test { height: auto; }

    .testimonials-section__rated-row {
        order: 5;
        padding: var(--space-5) var(--ts-edge);
        height: auto;
        position: relative;
    }
    .testimonials-section__rated-row::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
        transform: scaleX(var(--line-x, 1));
        transform-origin: right center;
    }

    .testimonials-section__controls-row { display: none; }

    /* Hide guide lines (replaced by border-* on mobile rows) */
    .testimonials-section__hguide,
    .testimonials-section__vguide { display: none; }

    /* Restore the original (larger) R-Rated button sizing on mobile */
    .testimonials-section .rr-btn__content { padding: clamp(10px, 1.2vw, 16px) clamp(16px, 2vw, 28px); gap: clamp(10px, 1.2vw, 18px); }
    .testimonials-section .rr-btn__arrow   { padding: 0 clamp(12px, 1.5vw, 20px); }
    .testimonials-section .rr-btn__badge   { width: clamp(36px, 4.5vw, 52px); height: clamp(36px, 4.5vw, 52px); font-size: clamp(20px, 2.5vw, 32px); }
    .testimonials-section .rr-btn__rating,
    .testimonials-section .rr-btn__label   { font-size: clamp(13px, 1.1vw, 18px); }
    .testimonials-section .rr-btn__star    { width: clamp(12px, 1.2vw, 18px); height: clamp(12px, 1.2vw, 18px); }
    .testimonials-section .rr-btn__icon    { width: clamp(10px, 1.1vw, 16px); }
}


/* ============================================================
   CHAINED MODE — Bars + mask reveal during the awards → testimonials
   handoff (desktop/tablet only).

   Activated by adding `.testimonials-section--chained` to the section.
   This mode adds three nested wrappers (.testimonials-runway → .testimonials-sticky
   → .ts-content-wrap) and two new visual layers (.ts-bars-bg with 5 cream
   bars, and the inline #ts-bars-mask SVG that clips the inner content).

   The standalone testimonials preview keeps working unchanged because
   none of these rules apply without the --chained class.
   ============================================================ */
.testimonials-section--chained {
    /* Cancel the standalone defaults */
    height: auto;
    background: transparent;
    padding: 0;
    overflow: visible;

    /* Section-overlap pattern. Awards' physical runway is one viewport
       TALLER than its scroll distance (CSS-sticky physics — every sticky
       runway needs one extra vh at the end for the unpin to happen). So
       awards.runway.bottom = (awards' future-reserve start) + 2 viewports.
       To align testimonials' top with the START of awards' future-reserve
       (the 100vh where Phase 2 is held pinned and visible), we pull back
       by 2 viewports, not 1. */
    z-index: var(--z-elevated);     /* paints over awards (z-base = 1) */
    margin-top: -200vh;
    pointer-events: none;
}

.testimonials-section--chained .testimonials-runway {
    position: relative;
    /* Runway height set by JS: vh (so sticky has somewhere to start)
       + 100vh (the bar-growth scroll distance) = 200vh.
       JS recomputes on resize. */
}

.testimonials-section--chained .testimonials-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    pointer-events: auto;
}

/* ── Layer 1 — five cream bars filling the viewport, growing from bottom.
      Each bar is a grid cell (20% of width). Outline rather than border so
      the 2px line never pushes layout, and adjacent bars' outlines overlap
      slightly — guarantees no sub-pixel gap between them. */
.testimonials-section--chained .ts-bars-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    pointer-events: none;
}
.testimonials-section--chained .ts-bar {
    background: var(--color-white);
    outline: 2px solid var(--color-white);
    transform: scaleY(0);
    transform-origin: center bottom;
    will-change: transform;
}

/* ── Layer 2 — invisible SVG that hosts the bar-shaped mask definition.
      Rect attributes (y, height) are animated by GSAP in lockstep with
      the visual bars in layer 1, so the mask shape always matches. */
.testimonials-section--chained .ts-mask-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Layer 3 — the testimonials content itself, masked to only show
      where the bars currently exist. Padding here matches what the
      standalone .testimonials-section provided (it's reset to 0 above
      so the bars can fill 100vw). pointer-events flipped to auto by JS
      once the bar growth completes. */
.testimonials-section--chained .ts-content-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding-top:    var(--ts-pad-y);
    padding-bottom: var(--ts-pad-y);
    padding-left:   var(--ts-edge);
    box-sizing: border-box;
    pointer-events: none;
    /* Cream background so the nav-theme sampler (elementFromPoint walk-up
       → first non-transparent background-color) finds a luminous bg here
       and flips the cube/B to its dark variant. The mask still clips this
       layer to the bar shapes during entry, so the bg is invisible until
       bars grow — same final visual as before. The cube only samples this
       element once JS flips its pointer-events to auto at FADE_END (post
       bar growth), so the theme switch coincides with the section being
       fully visually cream. */
    background-color: var(--color-white);
    -webkit-mask-image: url(#ts-bars-mask);
            mask-image: url(#ts-bars-mask);
    -webkit-mask-mode: luminance;
            mask-mode: luminance;
}
.testimonials-section--chained .ts-content-wrap > .testimonials-section__inner {
    width: 100%;
    height: 100%;
}


/* ── Mobile reset: drop the chain pattern entirely. The section flows
      normally below awards, no bars, no mask, no sticky. The content's
      internal reveals (handled by testimonials-section.js's standalone
      path) fire on viewport entry as usual. */
@media (max-width: 767px) {
    /* On mobile the chained variant collapses to a normal-flow block.
       Match the standalone mobile rules at the top of this file:
         - height: auto so the rated-row at the end of the inner grid
           isn't clipped by a 100vh box (was bug #2),
         - padding-left: 0 so there's no left gap (was bug #1 — the
           inner mobile column padding is handled per-row inside),
         - overflow: visible so the section grows to its content. */
    .testimonials-section--chained {
        margin-top: 0;
        z-index: auto;
        pointer-events: auto;
        height: auto;
        background: var(--color-white);
        padding-top:    var(--ts-pad-y);
        padding-bottom: var(--ts-pad-y);
        padding-left:   0;
        box-sizing: border-box;
        overflow: visible;
    }
    .testimonials-section--chained .testimonials-runway {
        height: auto !important;
    }
    .testimonials-section--chained .testimonials-sticky {
        position: relative;
        height: auto;
        overflow: visible;
    }
    .testimonials-section--chained .ts-bars-bg,
    .testimonials-section--chained .ts-mask-svg {
        display: none;
    }
    .testimonials-section--chained .ts-content-wrap {
        position: relative;
        inset: auto;
        padding: 0;
        -webkit-mask-image: none;
                mask-image: none;
        pointer-events: auto;
    }
}