/* Satopia homepage testimonials — cinematic "film festival" lockup.
   Design handoff "Homepage Testimonials Redesign" (Emma, 2026-08-31),
   recreated to spec. Quotes come live from EVA's site-testimonials feed
   (homepage bucket) with a baked-in fallback; award copy lives in the JS.
   Markup ships via vc_raw_html; carousel behaviour in testimonials.js. */

@font-face{font-family:'Handstand';src:url('fonts/Handstand.ttf') format('truetype');font-display:swap}

.tst{position:relative;background:#f1efe8;color:#0A0A0A;padding:clamp(60px,7.5vw,110px) clamp(22px,5vw,68px) clamp(84px,10vw,148px);font-family:"Albert Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.tst__in{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.tst__hd{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(40px,5vw,60px)}
.tst__hd h2{font-weight:400;font-size:13px;letter-spacing:3px;text-transform:uppercase;line-height:1.4;margin:0;padding:0;color:#000}

.t-stage{overflow:hidden;min-height:clamp(180px,18vw,220px);width:100%;cursor:grab;touch-action:pan-y}
.t-track{display:flex;align-items:flex-start;transition:transform .95s cubic-bezier(.22,1,.36,1)}
.t-slide{flex:0 0 100%;min-width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 clamp(10px,4vw,80px)}

/* laurel award badge — classic film-festival lockup */
.t-laurel{display:flex;align-items:center;justify-content:center;gap:2px;margin-bottom:clamp(26px,3.2vw,40px)}
.t-laurel svg{width:clamp(34px,3.4vw,46px);height:auto;color:#2C3A39;flex:none}
.t-laurel svg.flip{transform:scaleX(-1)}
.t-award{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 2px;width:clamp(140px,14vw,168px);flex:none}
.t-award .a1{font-weight:600;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#2C3A39;white-space:nowrap;line-height:1.2}
.t-award .a2{font-weight:700;font-size:clamp(14px,1.5vw,19px);letter-spacing:.04em;text-transform:uppercase;color:#2C3A39;line-height:1.15;white-space:nowrap}
.t-award .a3{font-weight:500;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:#2C3A39;white-space:nowrap;line-height:1.2}

.tst p.t-q{font-weight:400;font-size:clamp(21px,2.3vw,30px);line-height:1.36;letter-spacing:-.02em;color:#2C3A39;margin:0;padding:0;max-width:36ch;text-wrap:pretty}
.t-q::before{content:"\201C"}
.t-q::after{content:"\201D"}
.t-meta{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:clamp(32px,3.8vw,46px);margin-bottom:18px}
.t-name{font-family:'Handstand',"Albert Sans",sans-serif;font-size:clamp(25px,2.3vw,34px);font-weight:400;letter-spacing:.02em;text-transform:none;color:#0A0A0A;line-height:1.1}

/* progress bars — the only visible controls */
.t-prog{display:flex;justify-content:center;gap:8px;margin-top:clamp(30px,3.6vw,44px)}
.t-dot{position:relative;width:34px;height:2px;background:#DDD7C9;border:0;padding:0;cursor:pointer;overflow:hidden}
.t-dot i{position:absolute;inset:0;background:#2C3A39;transform:scaleX(0);transform-origin:left}
.t-dot.on i{animation:tfill var(--dur,7000ms) linear forwards}
.t-dot.done i{transform:none}
@keyframes tfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tst.paused .t-dot.on i{animation-play-state:paused}

@media (max-width:700px){.tst__hd{align-items:flex-start;flex-direction:column}}
@media (prefers-reduced-motion: reduce){
  .t-track{transition:none}
  .t-dot.on i{animation:none;transform:none}
}