/* STS Testimonials — grid + revolver. Uses site tokens when present, with
   fallbacks so it also works standalone. */
.sts-ts-grid, .sts-ts-rotator{
  --_accent:var(--accent,#2f7d4f); --_deep:var(--accent-deep,#1b5233);
  --_surface:var(--surface,#fff); --_surface2:var(--surface-2,#e9efe6);
  --_ink:var(--ink,#161d18); --_soft:var(--ink-soft,#4e5a51); --_faint:var(--ink-faint,#84918a);
  --_line:var(--line,#dce4d9);
  --_sans:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,Arial,system-ui,sans-serif;
  --_serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  color:var(--_ink);font-family:var(--_sans)}
.sts-ts-grid *,.sts-ts-rotator *{box-sizing:border-box}

/* ---------- card ---------- */
.sts-ts-card{display:flex;flex-direction:column;gap:14px;margin:0;background:var(--_surface);border:1px solid var(--_line);border-radius:16px;padding:26px 24px 22px;box-shadow:0 1px 2px rgba(22,29,24,.04),0 16px 36px -26px rgba(27,82,51,.28)}
.sts-ts-quote{position:relative;margin:0;padding-top:18px;color:var(--_ink);font-size:16.5px;line-height:1.6}
.sts-ts-quote::before{content:"\201C";position:absolute;top:-8px;left:-4px;font-family:var(--_serif);font-size:56px;line-height:1;color:var(--_accent);opacity:.28}
.sts-ts-quote p{margin:0 0 .8em}
.sts-ts-quote p:last-child{margin-bottom:0}
.sts-ts-by{display:flex;flex-direction:column;gap:1px;margin-top:auto}
.sts-ts-name{font-weight:800;color:var(--_ink);font-size:15.5px}
.sts-ts-role{color:var(--_soft);font-size:14px}
.sts-ts-src{color:var(--_faint);font-size:12.5px;font-style:italic;margin-top:2px}
.sts-ts-about{margin:0;padding-top:12px;border-top:1px solid var(--_line);font-size:13px;color:var(--_faint)}
.sts-ts-about a{color:var(--_deep);text-decoration:none;font-weight:700}
.sts-ts-about a:hover{text-decoration:underline}

/* ---------- grid (masonry via columns; keeps varied lengths tidy) ---------- */
.sts-ts-grid{columns:1;column-gap:22px;margin:1.4em 0}
@media (min-width:620px){.sts-ts-grid{columns:2}}
@media (min-width:980px){.sts-ts-grid{columns:3}}
.sts-ts-grid .sts-ts-card{break-inside:avoid;margin-bottom:22px}

/* ---------- rotator ---------- */
.sts-ts-rotator{margin:1.4em 0}
.sts-ts-heading{font-size:clamp(22px,3vw,28px);font-weight:800;letter-spacing:-.01em;text-align:center;margin:0 0 22px;color:var(--_ink)}
.sts-ts-track{position:relative}
.sts-ts-slide{display:grid;gap:22px;grid-template-columns:1fr}
.sts-ts-slide[hidden]{display:none}
@media (min-width:720px){
  .sts-ts-per-2 .sts-ts-slide{grid-template-columns:1fr 1fr}
  .sts-ts-per-3 .sts-ts-slide{grid-template-columns:1fr 1fr 1fr}
}
/* fade-in when JS swaps slides */
.sts-ts-slide{animation:sts-ts-fade .45s ease}
@keyframes sts-ts-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sts-ts-slide{animation:none}}

/* Shortening the quote (words="…") stops the tallest card setting the slide height, but a very
   short quote still leaves its card shorter than its neighbours, and the next slide along can
   differ again — so the page still shuffles as the rotator advances. A floor under the quote
   block holds every slide to the same height.
   Only from 720px, where a slide is actually multi-column: on a phone each card sits alone on
   its row, nothing is being lined up against anything, and a floor would only add empty space. */
@media (min-width:720px){
  .sts-ts-rotator .sts-ts-quote{min-height:9.6em}
}

.sts-ts-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.sts-ts-arrow{width:42px;height:42px;flex:0 0 auto;border-radius:50%;border:1px solid var(--_line);background:var(--_surface);color:var(--_deep);font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s,border-color .15s,color .15s}
.sts-ts-arrow:hover{transform:translateY(-1px);border-color:var(--_accent);color:var(--_accent)}
.sts-ts-dots{display:flex;gap:9px}
.sts-ts-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--_line);cursor:pointer;transition:background .2s,transform .2s}
.sts-ts-dot:hover{background:var(--_faint)}
.sts-ts-dot.is-on{background:var(--_accent);transform:scale(1.25)}
.sts-ts-arrow:focus-visible,.sts-ts-dot:focus-visible{outline:2.5px solid var(--_accent);outline-offset:3px}