/* Video testimonials (2026-11-03 carousel): every client video in a scroll-snap row, the quote they say in it
   under each one. Looks like the Trustpilot row (tp-reviews.css): arrows beside the heading, swipe or scroll on
   touch, the next card peeking in. It loops endlessly (copies added by the script), so the arrows never grey out. 4 and a bit across on desktop, then 3 and a bit, 2 and a bit,
   and 1 and a bit on phones. Classes are prefixed vt-; behaviour lives in video-testimonials.js. Without JS every video is still
   reachable by scrolling the row, and plays from its own button. */
.vt{padding:clamp(72px,9vw,120px) 0;background:linear-gradient(180deg,var(--slate-50),#fff 60%)}

/* heading row: heading left, arrows right (as .tpr-head) */
.vt-head{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:32px}
.vt-head > div:first-child{max-width:720px}
.vt-head .lead{margin:16px 0 0}
.vt-eyebrow{display:inline-block;font:600 .8125rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-500)}
.vt-head h2{margin:14px 0 0}
.vt-nav{display:flex;gap:10px;flex:none}
.vt-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--slate-300);background:var(--white);color:var(--ink-800);cursor:pointer;
  display:grid;place-items:center;transition:background .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease)}
.vt-btn svg{width:20px;height:20px}
.vt-btn.prev svg{transform:scaleX(-1)}
.vt-btn:hover:not([aria-disabled="true"]){background:var(--slate-50);border-color:var(--ink-800)}
.vt-btn[aria-disabled="true"]{opacity:.35;cursor:default}

.vt-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.vt-filters button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--slate-200);background:var(--white);
  font:600 .9375rem/1 var(--body);color:var(--ink-700);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.vt-filters button:hover{border-color:var(--slate-300)}
.vt-filters button[aria-pressed="true"]{background:var(--ink-800);border-color:var(--ink-800);color:var(--white)}
.vt-filters button:focus-visible,.vt-btn:focus-visible,.vt-track:focus-visible{outline:2px solid var(--green-700);outline-offset:3px}

/* the row */
.vt-track{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:24px}
.vt-track::-webkit-scrollbar{display:none}
.vt-list{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 80px) / 4.25);gap:20px}
.vt-item{scroll-snap-align:start;min-width:0}
.vt.is-static .vt-nav{display:none}
.vt-item.is-clone .vt-play::after{animation:none}   /* copies don't need the ping */
.vt-item[hidden]{display:none}
.vt-item article{display:flex;flex-direction:column;height:100%;padding:10px 10px 20px;background:var(--white);border:1px solid var(--slate-200);border-radius:24px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.vt-item article:hover{border-color:var(--slate-300);box-shadow:0 22px 44px -28px rgba(20,26,34,.4)}

/* video frame: the edited testimonials are vertical 9:16 reels, shown whole (no crop) */
.vt-media{position:relative;aspect-ratio:9/16;width:100%;border-radius:16px;overflow:hidden;background:var(--ink-900);isolation:isolate}
.vt-media video,.vt-media .vt-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vt-poster{transition:opacity .35s var(--ease)}
.vt-media.is-playing .vt-poster,.vt-media.is-playing .vt-play,.vt-media.is-playing .vt-len{opacity:0;pointer-events:none}
.vt-media.is-playing .vt-play{visibility:hidden}   /* out of the tab order while its video plays */
.vt-play{position:absolute;left:50%;top:50%;z-index:2;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:0;cursor:pointer;
  background:var(--green-500);color:var(--ink-900);display:grid;place-items:center;box-shadow:0 0 0 8px rgba(116,209,66,.25),0 18px 40px -12px rgba(0,0,0,.5);
  transition:transform .3s var(--ease),opacity .3s}
.vt-play svg{width:24px;height:24px;margin-left:3px}
.vt-play:hover{transform:scale(1.07)}
.vt-play::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(116,209,66,.6);animation:vt-ping 2.4s var(--ease) infinite}
@keyframes vt-ping{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.45);opacity:0}}
/* the play button sits on the dark video poster: Hawk Green ring (>=7:1) instead of green-700 (2.96:1) */
.vt-play:focus-visible{outline:2px solid var(--green-500);outline-offset:3px}
.vt-len{position:absolute;right:12px;top:12px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(15,20,25,.72);color:var(--white);font:600 .8125rem/1 var(--body);transition:opacity .3s}
.vt-len svg{width:11px;height:11px;margin-right:6px;vertical-align:-1px;color:var(--green-500)}

/* the review, under its video */
.vt-copy{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:18px 8px 0}
.vt-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--green-50);color:var(--green-700);font:600 .8125rem/1.2 var(--body)}
.vt-tag svg{width:14px;height:14px}
.vt-copy .confirm{margin-top:8px}
.vt-copy blockquote{margin:12px 0 0;font:500 1rem/1.55 var(--body);color:var(--ink-800);text-wrap:pretty}
.vt-who{display:flex;align-items:center;gap:12px;margin-top:14px;width:100%}
.vt-who img{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--green-500)}
.vt-who b{display:block;font:600 .9375rem/1.3 var(--body);color:var(--ink-800)}
.vt-who small{display:block;font-size:.8125rem;line-height:1.35;color:var(--slate-500)}

@media (max-width:1180px){
  .vt-list{grid-auto-columns:calc((100% - 60px) / 3.25)}
}
@media (max-width:860px){
  .vt-list{grid-auto-columns:calc((100% - 40px) / 2.2)}
}
@media (max-width:600px){
  .vt-head{flex-direction:column;align-items:flex-start;gap:24px}
  .vt-list{grid-auto-columns:80%;gap:12px}
  .vt-filters button{padding:0 14px}
  .vt-play{width:60px;height:60px;margin:-30px 0 0 -30px}
}
@media (prefers-reduced-motion:reduce){
  .vt-play::after{animation:none;display:none}
  .vt-play,.vt-poster,.vt-item article,.vt-btn,.vt-filters button,.vt-len{transition:none}
}