/* ============================================================
   testimonials.css
============================================================ */
#testimonials {
  background: var(--off-white);
  overflow: hidden;
}
#testimonials .section-title { max-width: 600px; }

.t-carousel-outer {
  margin-top: 48px;
  overflow: hidden;
}
.t-carousel {
  display: flex;
  gap: 20px;
  transition: transform .7s var(--ease-expo);
  will-change: transform;
}

/* ── CARD ── */
.t-card {
  flex: 0 0 calc(33.33% - 14px);
  background: var(--white);
  border: 1px solid var(--grey-200);
  padding: 36px;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: all var(--trans-med);
}
.t-card:hover {
  border-color: rgba(30,64,175,.28);
  box-shadow: var(--shadow-hover);
}

/* Royal blue top bar accent */
.t-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.t-stars { color: var(--accent); font-size: .78rem; letter-spacing: 3px; }
.t-royal-bar {
  width: 36px; height: 3px;
  background: linear-gradient(90deg, var(--royal), var(--royal-light));
}

.t-quote-mark {
  font-size: 3.8rem;
  color: rgba(30,64,175,.14);
  font-family: Georgia, serif;
  line-height: .72;
  margin-bottom: 12px;
}
.t-text {
  color: var(--grey-600);
  font-size: .88rem;
  line-height: 1.9;
  font-style: italic;
  margin-bottom: 26px;
}
.t-author { display: flex; align-items: center; gap: 14px; }
.t-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(30,64,175,.25);
  background: var(--sky);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: .85rem;
  color: var(--royal);
  flex-shrink: 0;
}
.t-name { font-weight: 600; font-size: .9rem; color: var(--navy); letter-spacing: -.01em; }
.t-role { font-size: .74rem; color: var(--grey-400); }

/* ── CONTROLS ── */
.t-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  flex-wrap: wrap;
  gap: 16px;
}
.t-dots-row { display: flex; gap: 6px; }
.t-dot {
  width: 22px; height: 3px;
  background: var(--grey-200);
  transition: all var(--trans-med);
  cursor: pointer;
}
.t-dot.active { background: var(--royal); width: 40px; }
.t-arrows-row { display: flex; gap: 8px; }
.t-arrow {
  width: 42px; height: 42px;
  background: var(--grey-100);
  border: 1px solid var(--grey-200);
  color: var(--navy);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--trans-fast);
  cursor: pointer;
}
.t-arrow:hover {
  background: var(--royal);
  border-color: var(--royal);
  color: var(--white);
}