:root {
    --bg: #0b0c0f;
    --card: #111318;
    --card-2: #0e1014;
    --text: #e8ebf0;
    --muted: #a7b0c0;
    --brand: #FDB827;
    --brand-2: #FDB827;
    --ring: 36 100% 66%;
    --radius: 18px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04) inset;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f6f7fb;
        --card: #ffffff;
        --card-2: #f9f9ff;
        --text: #111318;
        --muted: #4b5565;
        --brand: #3b82f6;
        --brand-2: #8b5cf6;
        --shadow: 0 10px 30px rgba(0, 0, 0, .08), 0 1px 0 rgba(0, 0, 0, .04) inset;
    }
}

/* Global sizing */
*, *::before, *::after {
    box-sizing: border-box
}

/* Page scaffolding for demo */
/*body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color:var(--text);
    background:
            radial-gradient(1200px 600px at 100% 0, rgba(122,162,255,.12), transparent 60%),
            radial-gradient(900px 500px at 0 100%, rgba(158,122,255,.12), transparent 55%),
            var(--bg);
    min-height:100svh;
    display:grid; place-items:center;
    padding:40px 16px;
}*/

.wrap {
    width: min(1100px, 100%);
    max-width: 100%;
    overflow: hidden;
}

.header {
    margin: 0 0 18px 6px;
}

.header h1 {
    font-size: clamp(22px, 3.2vw, 34px);
    margin: 0 0 6px;
    letter-spacing: .3px
}

/* Slider */
.ts {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: #95CB89;
    border-radius: var(--radius);
    /*box-shadow: var(--shadow);*/
    padding: 18px 18px 58px; /* bottom room for dots on mobile */
    overflow: hidden;
    isolation: isolate;
}

.ts-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: calc(var(--radius) - 6px);
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .0));
}

/* prevent tiny overflows on small screens */
.ts, .ts-viewport, .ts-track, .ts-slide, .card, .quote {
    min-width: 0
}

.quote {
    overflow-wrap: anywhere
}


.ts-track {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform 540ms cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
    touch-action: pan-y;
}

.ts-slide {
    flex: 0 0 100%; /* one per view */
    padding: clamp(5px, 3vw, 15px);
    display: grid;
    align-content: center;
}

/* Testimonial card */
.card {
    display: grid;
    grid-template-columns: 115px 1fr;
    grid-template-areas: "avatar quote" "meta quote";
    gap: 14px 18px;
    align-items: center;
}

/* layout when no avatar */
.card.no-avatar {
    grid-template-columns:1fr;
    grid-template-areas:"quote" "meta"
}

.avatar {
    grid-area: avatar;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.quote {
    grid-area: quote;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    padding: clamp(14px, 2.4vw, 22px);
    position: relative;
}

.quote::before {
    content: "\201C";
    position: absolute;
    top: -34px;
    left: -18px;
    font-size: 8rem;
    line-height: 1;
    color: black;
    opacity: .25;
    pointer-events: none;
    z-index: 1;
}
.quote::after {
    content: "\201D";
    position: absolute;
    right: -18px;
    font-size: 8rem;
    line-height: 1;
    color: black;
    opacity: .25;
    pointer-events: none;
    z-index: 1;
}

.quote p {
    margin: 0;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.2;
}

.meta {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0.1rem;
}

.name {
    color: #002D74;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.5rem;
    font-size: 1.4rem !important;
    margin: 0 0 .3rem 0;
}

.meta img {
    align-self: flex-end;
}

.role {
    color: black;
    font-size: .8rem !important;
    font-style: italic;
    line-height: 1rem;
}

.stars {
    display: flex;
    gap: 2px;
    font-size: 0
}

.star {
    width: 18px;
    height: 18px;
    display: inline-block;
}

.star svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Arrows */
.ts-arrow {
    position: absolute;
    inset: auto 12px 12px auto;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, opacity .25s ease;
}

.ts-arrow.prev {
    right: 64px
}

.ts-arrow:hover {
    transform: scale(1.04)
}

.ts-arrow:active {
    transform: scale(0.98)
}

.ts-arrow svg {
    width: 22px;
    height: 22px
}

/* Dots */
.ts-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    gap: 8px;
    justify-content: center;
    z-index: 2;
}

.ts-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    background: transparent;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.ts-dot[aria-current="true"] {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    transform: scale(1.1)
}

/* Adaptive height wrapper */
.ts-viewport {
    height: auto
}

@media (max-width: 1024px) {
    .card.no-avatar{
        grid-template-columns: 1fr;
        grid-template-areas:
      "meta"
      "quote";
        gap: 10px;
    }

    .card {
        grid-template-columns: 1fr;
        grid-template-areas:
      "avatar"
      "meta"
      "quote";
        gap: 10px;
    }
    .quote p {
        font-size: .8rem;
        line-height: .9rem;
    }

    .ts {
        padding: 0 18px 100px;
    }

    .quote:before {
        top: -15px;
        left: -13px;
    }
    .quote:after {
        bottom: -50px;
        right: -13px;
    }

    .quote:before, .quote:after {
        font-size: 4.2rem;
    }
}

/* Responsive tweaks */
@media (min-width: 860px) {
    .ts {
        padding: 22px 22px 22px
    }

    .ts-dots {
        bottom: 18px
    }

    .ts-arrow {
        inset: 50% 14px auto auto;
        transform: translateY(-50%)
    }

    .ts-arrow.prev {
        right: auto;
        left: 14px
    }

    .ts-arrow:hover {
        transform: translateY(-50%) scale(1.04)
    }

    .ts-arrow:active {
        transform: translateY(-50%) scale(0.98)
    }
}

/* show arrows on hover-capable devices only when hovered/focused */
@media (hover: hover) and (pointer: fine) {
    .ts-arrow {
        opacity: 0;
        pointer-events: none
    }

    .ts:hover .ts-arrow, .ts:focus-within .ts-arrow {
        opacity: 1;
        pointer-events: auto
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ts-track {
        transition: none
    }
}