/* ---------- Testimonials (compact carousel) ---------- */
.testimonials { position: relative; overflow: hidden; }
/* spans the full content width, so its edges line up with every other section */
.t-carousel { --per: 3; --tgap: 20px; position: relative; }

.t-track {
  display: flex; gap: var(--tgap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  /* room for the hover lift and shadow, which would otherwise be clipped */
  padding: 8px 6px 18px; margin: -8px -6px -18px; scroll-padding-inline: 6px;
}
.t-track::-webkit-scrollbar { display: none; }
.t-card { flex: 0 0 calc((100% - (var(--per) - 1) * var(--tgap)) / var(--per)); display: flex; scroll-snap-align: start; }

.t-card figure {
  position: relative; flex: 1; margin: 0; display: flex; flex-direction: column;
  padding: 1.25rem 1.3rem 1.2rem; border-radius: 18px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.t-card figure:hover { translate: 0 -4px; box-shadow: var(--shadow-md); border-color: #fbe0bd; }
/* thin orange rule along the top edge */
.t-card figure::before {
  content: ''; position: absolute; left: 1.3rem; top: -1px; width: 44px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--orange);
}

.t-mark {
  position: absolute; right: 1rem; top: 1rem; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; background: var(--orange-50); color: var(--orange-600);
  font-family: Georgia, 'Times New Roman', serif; font-size: 1.9rem; font-weight: 700; line-height: 1; padding-top: 0.7rem;
}

.t-person { display: flex; align-items: center; gap: 0.85rem; padding-right: 2.4rem; }
.t-avatar {
  width: 60px; height: 60px; flex: none; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--navy), #2c2d74);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #fbe0bd, 0 10px 18px -10px rgba(32, 33, 88, 0.6);
  transition: scale 0.45s cubic-bezier(0.3, 1.4, 0.4, 1), box-shadow 0.35s ease;
}
.t-avatar img { width: 100%; height: 100%; object-fit: cover; }
.t-avatar span { font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; color: #fff; }
.t-card figure:hover .t-avatar { scale: 1.05; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--orange), 0 12px 20px -10px rgba(32, 33, 88, 0.7); }

.t-card figcaption { min-width: 0; display: flex; flex-direction: column; }
.t-card figcaption b { font-family: var(--f-head); font-weight: 700; font-size: 1rem; color: var(--navy); line-height: 1.3; }
.t-project { margin-top: 0.1rem; font-size: 0.82rem; font-weight: 600; color: var(--orange-text); line-height: 1.35; }
.t-role { font-size: 0.78rem; color: var(--muted-2); line-height: 1.35; }

.t-card blockquote {
  margin: 0.95rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line-2); flex: 1;
  font-size: 0.875rem; line-height: 1.65; color: var(--muted);
  /* keeps every card compact and equal: at most five lines */
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}

.t-stars { display: inline-flex; gap: 0.15rem; margin-top: 0.9rem; }
.t-stars .i { width: 0.9rem; height: 0.9rem; stroke-width: 1.5; color: #d8d8e8; }
.t-stars .i.on { color: var(--orange); fill: var(--orange); }

/* arrows, vertically centred on the cards (matches the services slider) */
.t-nav {
  position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #fff; color: var(--navy); border: 1px solid var(--line); box-shadow: var(--shadow-md);
  transition: opacity 0.25s ease, scale 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.t-nav.prev { left: -64px; translate: 0 -50%; rotate: 180deg; }
.t-nav.next { right: -64px; translate: 0 -50%; }
.t-nav .i { width: 19px; height: 19px; }
.t-nav:hover:not(:disabled) { background: var(--orange); color: #fff; border-color: var(--orange); scale: 1.06; }
.t-nav:disabled { opacity: 0.35; cursor: default; box-shadow: none; }

.t-dots { display: flex; justify-content: center; gap: 0.45rem; margin-top: 1.6rem; }
.t-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: #d8d8e8; transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s ease;
}
.t-dots button.on { width: 24px; background: var(--orange); }

/* ---------- Responsive ---------- */
/* wide screens fit a fourth card rather than stretching three */
@media (min-width: 1600px) { .t-carousel { --per: 4; } }
/* arrows tuck in against the cards once there's no room beside them */
@media (max-width: 1400px) {
  .t-nav.prev { left: -22px; }
  .t-nav.next { right: -22px; }
}
@media (max-width: 1024px) { .t-carousel { --per: 2; } }
/* phones: one card, swipe edge to edge, arrows hidden (dots remain) */
@media (max-width: 760px) {
  .t-carousel { --tgap: 14px; }
  .t-track { margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); scroll-padding-inline: var(--pad-x); }
  .t-card { flex-basis: min(340px, calc(100vw - 2 * var(--pad-x) - 24px)); }
  .t-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .t-track { scroll-behavior: auto; }
}