/* testimonials.css */
.slider { position: relative; }
.slider-track { display: flex; gap: clamp(1rem, 2vw, 1.6rem); transition: transform 0.7s var(--ease-out); will-change: transform; }
.quote-card { flex: 0 0 100%; background: var(--paper-2); border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 3rem); box-shadow: 0 1px 0 var(--line); position: relative; }
.quote-mark { position: absolute; top: 1.4rem; right: 1.6rem; color: color-mix(in srgb, var(--sage) 50%, transparent); }
.quote-mark svg { width: 46px; height: 46px; }
.quote-card blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); line-height: 1.28; letter-spacing: -0.02em; margin: 1rem 0 1.6rem; max-width: 32ch; }
.quote-card figcaption { display: flex; flex-direction: column; }
.quote-card figcaption b { font-size: 1.05rem; }
.quote-card figcaption span { color: color-mix(in srgb, var(--ink) 60%, transparent); font-size: 0.92rem; }
.stars { display: inline-flex; gap: 3px; color: var(--peach); }
.stars svg { width: 18px; height: 18px; }
.sec--peach .stars, .quote-card .stars { color: var(--red); }

@media (min-width: 760px) { .quote-card { flex-basis: calc(50% - 0.8rem); } }

.slider-ctrl { display: flex; align-items: center; gap: 1.2rem; margin-top: clamp(1.6rem, 4vw, 2.4rem); }
.slider-btn { width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--line); color: var(--ink); display: grid; place-items: center; transition: background 0.3s ease, color 0.3s ease; }
.slider-btn:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.slider-btn svg { width: 20px; height: 20px; }
.slider-btn[data-slider-prev] svg { transform: rotate(180deg); }
.slider-dots { display: flex; gap: 0.5rem; margin-inline: auto; }
.slider-dots button { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: width 0.4s var(--ease-out), background 0.3s ease; }
.slider-dots button.is-active { width: 26px; border-radius: 6px; background: var(--red); }
