/* POLY — Client trust -----------------------------------------------------

   One full width light panel, modelled on the promo layout: a white ground
   with the brand blue blooming softly up from the bottom centre, a tinted
   badge pill, an oversized title with a single accent word, check marked plus
   points, one pill button, and a phone mock-up closing the panel with the
   customer reviews pinned around it. */

.poly-section.poly-testimonials {
    /* Panel palette — the section is light, so it borrows the shared ink and
       neutral tokens instead of the inverted set the night version used. */
    --tst-fg: var(--poly-body);
    --tst-fg-soft: var(--poly-muted);
    --tst-card: var(--poly-white);
    --tst-line: var(--poly-line);
    --tst-line-strong: var(--poly-line-strong);
    --tst-tint: #EEF4FC;
    /* White cards on a white ground carry no tonal contrast, so the edge has
       to do that work: a defined hairline plus a shadow with enough spread to
       read as lift rather than as a smudge. */
    --tst-card-shadow: 0 30px 66px -34px rgba(11, 17, 48, .3), 0 2px 6px -3px rgba(11, 17, 48, .07);
    /* Width the floating cards leave their anchors at, shared by the stage and
       its media query so the two can never drift apart. */
    --tst-stage-break: 980px;

    isolation: isolate;
    /* The reference lights the panel from the bottom centre. On white that
       reads as a pale wash rather than a bloom, so both stops stay low in
       alpha and fade out well before the copy. */
    background:
        radial-gradient(62% 44% at 50% 116%, rgba(47, 134, 201, .16), rgba(47, 134, 201, 0) 64%),
        radial-gradient(100% 72% at 50% 128%, rgba(57, 67, 155, .1), rgba(57, 67, 155, 0) 68%),
        var(--poly-white);
    color: var(--tst-fg);
    /* The phone runs into the bottom edge the way it does in the reference, so
       the panel hands its closing padding to the device. */
    padding-bottom: 0;
}

/* ---------------------------------------------------------- background

   An optional photo fills the whole block. It carries its own lightening
   overlay so any image keeps the copy readable; the overlay strength and the
   crop come from the widget as --tst-overlay / --tst-bg-pos. */

.poly-testimonials__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.poly-testimonials__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--tst-bg-pos, center bottom);
}

.poly-testimonials__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Layers paint top down: the brand wash, then a soft vignette that keeps
       the photo from crowding the edges, then the flat lightening. The top
       stop is the densest, because the badge and title sit there. */
    background:
        radial-gradient(72% 52% at 50% 120%, rgba(47, 134, 201, .14), rgba(47, 134, 201, 0) 62%),
        radial-gradient(116% 96% at 50% 46%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 100%),
        linear-gradient(180deg,
            rgba(255, 255, 255, calc(var(--tst-overlay, .8) + .12)) 0%,
            rgba(255, 255, 255, var(--tst-overlay, .8)) 54%,
            rgba(244, 247, 252, calc(var(--tst-overlay, .8) + .06)) 100%);
}

/* Extra bloom directly behind the phone, so the device sits in light instead
   of on flat white. Purely decorative. */
.poly-testimonials__glow {
    position: absolute;
    left: 50%;
    bottom: -18%;
    z-index: 1;
    width: min(980px, 112%);
    aspect-ratio: 1 / .58;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(60, 136, 246, .22) 0%,
        rgba(47, 90, 208, .1) 40%,
        rgba(244, 247, 252, 0) 70%);
    pointer-events: none;
}

/* Elementor resets `figure { margin: 0 }` from a 4-class selector, so the
   quote blocks are centred by the grid parent rather than by auto margins. */
.poly-testimonials .poly-shell {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    text-align: center;
}

/* ------------------------------------------------------------- promo head */

.poly-testimonials__head {
    width: 100%;
    max-width: 820px;
}

/* The eyebrow and the button are deliberately not restyled here: both are the
   shared variants the hero already uses, so the page opens and closes on the
   same two shapes. Only the spacing above the oversized title is local. */
.poly-testimonials__head .poly-eyebrow { margin-bottom: clamp(18px, 2.2vw, 28px); }

.poly-testimonials__title {
    margin: 0;
    font-family: var(--poly-font-display);
    font-size: clamp(2.05rem, 5.2vw, 3.6rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--poly-title);
    text-wrap: balance;
}

.poly-promo__line { display: block; }

/* Only the closing line carries the mark and the accent word, so it becomes a
   flex row that keeps the logo optically centred against the cap height. */
.poly-promo__line--mark {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .1em .28em;
}

.poly-promo__mark {
    width: 1.08em;
    height: 1.08em;
    flex: none;
    border-radius: .24em;
    object-fit: cover;
}

.poly-promo__accent { color: var(--poly-accent); }

.poly-promo__points {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem clamp(1.4rem, 2.6vw, 2.4rem);
    max-width: 760px;
    margin: clamp(26px, 3vw, 40px) auto 0;
}

.poly-promo__point {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: clamp(.9375rem, 1.2vw, 1.0625rem);
    line-height: 1.45;
    color: var(--poly-ink-800);
}

.poly-promo__point .poly-icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--poly-accent);
}

.poly-promo__actions { margin-top: clamp(28px, 3.6vw, 48px); }

.poly-testimonials__label {
    margin: clamp(40px, 4.6vw, 68px) 0 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tst-fg-soft);
}

/* ----------------------------------------------------------------- stage

   The reference closes on a tilted phone with badges hanging around it. Here
   the badges are the reviews themselves: three cards pinned to the corners the
   reference uses — high right, centre left, low right. */

.poly-testimonials__stage {
    position: relative;
    display: grid;
    justify-items: center;
    width: 100%;
    max-width: 1120px;
    margin-top: clamp(34px, 4.4vw, 64px);
}

.poly-testimonials__device {
    width: min(336px, 64%);
    /* Negative margin plus the section's own `overflow: clip` is what lets the
       device run past the bottom edge instead of sitting on a shelf. */
    margin-bottom: -6%;
}

/* The tilt lives on the SVG, never on the wrapper: the wrapper's transform
   belongs to the reveal animation. */
.poly-phone {
    display: block;
    width: 100%;
    height: auto;
    transform: perspective(1700px) rotateX(6deg) rotateZ(-6deg);
    filter: drop-shadow(0 46px 60px rgba(11, 17, 48, .26));
}

.poly-testimonials__visual-img {
    display: block;
    width: 100%;
}

.poly-testimonials__float {
    position: absolute;
    z-index: 3;
    width: min(292px, 31%);
    text-align: left;
}

.poly-testimonials__float--a { top: 1%; right: 0; }
.poly-testimonials__float--b { top: 38%; left: 0; }
.poly-testimonials__float--c { bottom: 16%; right: 4%; }

/* The reference's badges hang in the air; a slow drift says the same thing
   without asking for attention. It rides the card, because the wrapper's
   transform is the reveal's. */
@media (prefers-reduced-motion: no-preference) {
    .poly-testimonials__float .poly-review--float {
        animation: poly-testimonials-drift 7.2s var(--poly-ease) infinite;
    }

    .poly-testimonials__float--b .poly-review--float {
        animation-duration: 8.6s;
        animation-delay: -2.4s;
    }

    .poly-testimonials__float--c .poly-review--float {
        animation-duration: 7.9s;
        animation-delay: -4.6s;
    }
}

@keyframes poly-testimonials-drift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -10px, 0); }
}

/* ---------------------------------------------------------- review card

   One card shape, two settings: pinned around the phone, or centred in the
   slider that carries any review past the third. */

.poly-review,
.poly-statement {
    position: relative;
    width: 100%;
    max-width: 780px;
    padding: clamp(30px, 3.6vw, 52px) clamp(22px, 3.2vw, 56px);
    background: var(--tst-card);
    border: 1px solid var(--tst-line-strong);
    border-radius: var(--poly-radius-lg);
    box-shadow: var(--tst-card-shadow);
    text-align: center;
}

.poly-review[hidden] { display: none; }

.poly-review--float {
    max-width: none;
    padding: clamp(16px, 1.5vw, 20px) clamp(17px, 1.6vw, 22px);
    text-align: left;
}

.poly-statement__mark,
.poly-review__mark {
    display: block;
    margin-inline: auto;
    margin-bottom: 1.35rem;
    color: var(--poly-accent);
}

.poly-statement__mark .poly-icon,
.poly-review__mark .poly-icon { width: 40px; height: 40px; }

/* Star row — drawn in the panel accent so the review reads as part of the
   same blue family instead of borrowing a second colour. */
.poly-rating {
    display: flex;
    justify-content: center;
    gap: .3rem;
    margin-bottom: 1.15rem;
}

.poly-rating__star {
    width: 18px;
    height: 18px;
    color: var(--poly-accent);
}

.poly-rating__star.is-empty { color: var(--poly-line-strong); }

.poly-review--float .poly-rating {
    justify-content: flex-start;
    gap: .18rem;
    margin-bottom: .6rem;
}

.poly-review--float .poly-rating__star { width: 14px; height: 14px; }

.poly-statement__text p,
.poly-review__text p {
    font-family: var(--poly-font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -.02em;
    color: var(--poly-title);
    text-wrap: balance;
}

.poly-review--float .poly-review__text p {
    font-family: var(--poly-font-body);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -.005em;
    text-wrap: pretty;
}

.poly-review__author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    margin-top: clamp(22px, 2.6vw, 34px);
    padding-top: clamp(20px, 2.4vw, 30px);
    border-top: 1px solid var(--tst-line);
    text-align: left;
}

.poly-review--float .poly-review__author {
    justify-content: flex-start;
    gap: .6rem;
    margin-top: .9rem;
    padding-top: .85rem;
}

.poly-review__avatar {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--tst-line);
    object-fit: cover;
}

/* Without a photo the initial stands in, so the author row never collapses to
   a lone line of text. */
.poly-review__avatar--letter {
    display: grid;
    place-items: center;
    background: var(--tst-tint);
    border-color: rgba(47, 134, 201, .18);
    font-family: var(--poly-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--poly-brand);
}

.poly-review--float .poly-review__avatar {
    width: 34px;
    height: 34px;
    font-size: .875rem;
}

.poly-review__who { display: flex; flex-direction: column; gap: .15rem; }

.poly-review__name {
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--poly-title);
}

.poly-review__role {
    font-size: .875rem;
    line-height: 1.45;
    color: var(--tst-fg-soft);
}

.poly-review--float .poly-review__name { font-size: .8125rem; }

.poly-review--float .poly-review__role {
    font-size: .75rem;
    line-height: 1.4;
}

.poly-statement__source {
    margin-top: 1.75rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tst-fg-soft);
}

.poly-statement__note {
    max-width: 56ch;
    margin: clamp(24px, 3vw, 38px) auto 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--tst-fg-soft);
}

/* Over a photo the cards need more separation: they go opaque white, their
   edges pick up contrast and the copy lifts off the image, so every element
   keeps reading as one set instead of floating on top of the picture. */

.poly-testimonials--has-bg .poly-review,
.poly-testimonials--has-bg .poly-statement {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 34px 74px -40px rgba(11, 17, 48, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.poly-testimonials--has-bg .poly-testimonials__title,
.poly-testimonials--has-bg .poly-promo__points,
.poly-testimonials--has-bg .poly-testimonials__label,
.poly-testimonials--has-bg .poly-statement__note {
    text-shadow: 0 2px 20px rgba(255, 255, 255, .85);
}

.poly-testimonials--has-bg .poly-eyebrow {
    text-shadow: 0 2px 20px rgba(255, 255, 255, .85);
}

.poly-testimonials--has-bg .poly-testimonials__arrow {
    background: rgba(255, 255, 255, .92);
    border-color: var(--tst-line-strong);
}

.poly-testimonials--has-bg .poly-testimonials__dot { background: var(--poly-line-strong); }

/* ------------------------------------------------------------------- nav */

.poly-testimonials__reviews {
    width: 100%;
    max-width: 860px;
    margin-top: clamp(40px, 4.6vw, 72px);
    padding-bottom: var(--poly-section);
}

.poly-testimonials__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: clamp(24px, 2.8vw, 36px);
}

.poly-testimonials__arrow {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: var(--poly-white);
    border: 1px solid var(--tst-line);
    border-radius: 50%;
    color: var(--poly-brand);
    cursor: pointer;
    transition: border-color .3s var(--poly-ease), background-color .3s var(--poly-ease), color .3s var(--poly-ease);
}

.poly-testimonials__arrow:hover,
.poly-testimonials__arrow:focus-visible {
    background: var(--poly-accent);
    border-color: var(--poly-accent);
    color: var(--poly-white);
}

.poly-testimonials__arrow .poly-icon { width: 17px; height: 17px; }

.poly-testimonials__dots { display: flex; gap: .55rem; }

.poly-testimonials__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background: var(--poly-line-strong);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s var(--poly-ease), width .3s var(--poly-ease);
}

.poly-testimonials__dot.is-active {
    width: 24px;
    border-radius: 100px;
    background: var(--poly-accent);
}

/* --------------------------------------------------------------- narrow

   Below the stage width the cards can no longer hang beside the phone without
   covering it, so they leave their anchors and queue up underneath. The panel
   takes its closing padding back at the same time, because a bleeding device
   only reads as intentional when it is the widest thing on screen. */

@media (max-width: 980px) {
    .poly-section.poly-testimonials { padding-bottom: var(--poly-section); }

    .poly-testimonials__device {
        width: min(300px, 74%);
        margin-bottom: clamp(26px, 4vw, 40px);
    }

    .poly-testimonials__float {
        position: static;
        width: 100%;
        max-width: 440px;
        margin-top: .9rem;
    }

    .poly-testimonials__float .poly-review--float { animation: none; }

    .poly-testimonials__reviews { padding-bottom: 0; }
}

@media (max-width: 640px) {
    .poly-promo__points {
        flex-direction: column;
        align-items: center;
    }

    .poly-review__author {
        flex-direction: column;
        gap: .6rem;
        text-align: center;
    }

    .poly-review__who { align-items: center; }

    /* The floating cards keep their left aligned reading order even here —
       centring them would fight the star row and the author line. */
    .poly-review--float .poly-review__author {
        flex-direction: row;
        text-align: left;
    }

    .poly-review--float .poly-review__who { align-items: flex-start; }
}