/* Purpose: Voices · Testimonials. White section, glass cards in a dual-row marquee.
   Ported from the WV reference. */

.voices { background: #FFFFFF; position: relative; overflow: hidden; }
.voices-head { text-align: center; margin: 0 auto 48px; max-width: 800px; display: flex; flex-direction: column; align-items: center; }
.voices-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px 9px 14px; margin-bottom: 22px;
  background: var(--cream);
  border: 1px solid rgba(55, 96, 84, 0.10);
  border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
}
.voices-pill svg { width: 14px; height: 14px; fill: var(--emerald); }
.voices-head__title {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--sec-h2); line-height: 1.05; letter-spacing: -0.022em; color: var(--ink);
}
.voices-head__title em { color: var(--emerald); font-style: italic; }
.voices-head__lead { color: var(--ink-72); margin-top: 18px; max-width: 56ch; }

/* ── Dual-row marquee ── */
.voices-marquee {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 18px;
  padding: 8px 0 12px;
}
.voices-marquee__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.voices-marquee__track {
  display: inline-flex; gap: 22px; white-space: nowrap; padding-right: 22px; will-change: transform;
}
.voices-marquee__row--left .voices-marquee__track { animation: voices-marquee-l 60s linear infinite; }
.voices-marquee__row--right .voices-marquee__track { animation: voices-marquee-r 70s linear infinite; }
@keyframes voices-marquee-l { to   { transform: translateX(-50%); } }
@keyframes voices-marquee-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.voices-marquee:hover .voices-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .voices-marquee__track { animation: none !important; } }

/* ── Card ── */
.voices-card {
  flex: 0 0 360px; min-height: 320px;
  white-space: normal;
  background: rgba(245, 239, 224, 0.55);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 24px;
  padding: 40px 32px 32px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 14px 40px -18px rgba(55, 96, 84, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.50);
  transition: transform 400ms cubic-bezier(0.2,0.7,0.2,1), box-shadow 400ms ease;
}
.voices-card:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -22px rgba(55, 96, 84, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.voices-card::before {
  content: '\201D';
  position: absolute; top: 28px; right: 30px;
  font-family: var(--font-display); font-size: 96px; line-height: 0.5;
  color: var(--emerald); opacity: 0.5; pointer-events: none; user-select: none;
}
.voices-card__stars { display: inline-flex; gap: 4px; margin-bottom: 22px; position: relative; z-index: 1; }
.voices-card__stars svg { width: 16px; height: 16px; fill: var(--emerald); }
.voices-card__quote {
  font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular);
  font-size: 19px; line-height: 1.4; letter-spacing: -0.005em; color: var(--ink);
  margin: 0 0 28px; flex: 1; position: relative; z-index: 1;
}
.voices-card__author {
  display: flex; align-items: center; gap: 14px;
  padding-top: 22px; border-top: 1px solid rgba(55, 96, 84, 0.18);
  position: relative; z-index: 1;
}
.voices-card__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #FFFFFF; flex-shrink: 0; }
.voices-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.voices-card__name { font-family: var(--font-display); font-size: 17px; color: var(--ink); line-height: 1.1; }
.voices-card__role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ink-72); margin-top: 4px; }

@media (max-width: 760px) {
  .voices-marquee { gap: 14px; }
  .voices-card { flex-basis: 280px; min-height: 280px; }
}