/* ===== TESTIMONIALS — Google summary (static, right) + reviews slider (3-up, loop) ===== */
.tst { background: transparent; }   /* inherit global body grey (#F6F6F6) */
.tst__title { color: #000; }

/* RTL row: first child = right side. Summary card is static; slider takes the rest. */
.tst__row { display: flex; align-items: stretch; gap: 24px; }
.tst__row > .tsum { flex: 0 0 calc((100% - 72px) / 4); width: auto; }
.tst__row > .tst__splide { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative; }
/* The summary card occupies the space an outside arrow would use, so THIS slider keeps
   the arrows in an inset gutter (the other .yd-splsec sliders put them in the page margin). */
.tst__row > .tst__splide { padding: 0 clamp(40px, 2.9vw, 54px); }
.tst__row > .tst__splide .splide__arrow { width: clamp(34px, 2.6vw, 50px); height: clamp(34px, 2.6vw, 50px); }
.tst__row > .tst__splide .splide__arrow--prev { right: 0; left: auto; }
.tst__row > .tst__splide .splide__arrow--next { left: 0; right: auto; }
/* slider fills the row height so the review cards line up with the summary card */
.tst__row > .tst__splide .splide__track { flex: 1 1 auto; }
.tst__row > .tst__splide .splide__list { height: 100%; }

.tst__splide .splide__slide { display: flex; height: auto; }
.rev, .tsum { width: 100%; background: #fff; }

/* review card */
.rev { position: relative; padding: 24px; display: flex; flex-direction: column; text-align: right; min-height: 340px; }
.rev__quote { position: absolute; top: 20px; left: 24px; width: 23px; height: 23px; opacity: .5; }
.rev__g { position: absolute; top: 18px; right: 24px; width: 28px; height: 28px; }
.rev__stars { display: flex; gap: 3px; margin-top: 42px; }
.rev__stars img { width: 21px; height: 21px; }
.rev__text { margin-top: 18px; font-size: 20px; line-height: 28px; color: #161616; flex: 1 0 auto; }
.rev__name { margin-top: 16px; font-weight: 700; font-size: 20px; color: #161616; }

/* google summary card */
.tsum { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 20px 26px; }
.tsum__h { font-size: 30px; color: #071c37; }
.tsum__logo { width: 123px; height: auto; margin-top: 14px; }
.tsum__score { font-size: 50px; font-weight: 700; color: #00132c; line-height: 1; margin-top: 18px; }
.tsum__stars { display: flex; gap: 5px; margin-top: 16px; }
.tsum__stars img { width: 28px; height: 28px; }
.tsum__based { font-size: 17px; color: #071c37; margin-top: 14px; }
.tsum__btn {
  margin-top: 16px; width: 184px; height: 48px; display: flex; direction: ltr; align-items: center;
  border: 1px solid var(--gold-btn); border-radius: 0; color: var(--green-900);
}
.tsum__btn .circ { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 0; border: 0; border-right: 1px solid var(--gold-btn); display: flex; align-items: center; justify-content: center; }
.tsum__btn .circ img { width: 24px; height: 24px; }
.tsum__btn .lbl { flex: 1; text-align: center; font-weight: 700; font-size: 20px; padding-left: 6px; }

@media (max-width: 1024px) {
  .tst__row { flex-direction: column; gap: 20px; }
  .tst__row > .tsum { flex: 0 0 auto; width: 100%; max-width: 340px; margin: 0 auto; box-shadow: 0 4px 30px rgba(7,28,55,.1); }
  .tsum__h { font-size: 26px; }
  .tsum__score { font-size: 40px; }
  .rev { box-shadow: 0 4px 30px rgba(7,28,55,.1); }
  .rev__text { font-size: 18px; line-height: 27px; }
  .rev__name { font-size: 19px; }
}