/* =============================================================
   VO CREATIVE CO. — What People Are Saying (carousels)
   ============================================================= */
.rev-head { margin-bottom: clamp(28px, 3.5vw, 48px); }

/* placeholder (until media is added) */
.rev-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; color: var(--ink-3);
  background: repeating-linear-gradient(45deg, var(--cream-200), var(--cream-200) 4px, transparent 4px, transparent 12px);
}
.band-soft .rev-ph { background: repeating-linear-gradient(45deg, var(--oat-300), var(--oat-300) 4px, transparent 4px, transparent 12px); }
.rev-ph .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--sand-400); display: grid; place-items: center; color: var(--taupe-600); }
.rev-ph .ic svg { width: 17px; height: 17px; }
.rev-ph .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---- Carousel ---- */
.carousel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(8px, 2vw, 22px);
  max-width: 640px; margin-inline: auto;
}
.car-viewport { overflow: hidden; }
.car-track { display: flex; transition: transform 0.45s var(--ease-out); }
.car-slide { flex: 0 0 100%; display: flex; justify-content: center; }

.car-arrow {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  cursor: pointer; display: grid; place-items: center; font-size: 24px; line-height: 1;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.car-arrow:hover { border-color: var(--primary); color: var(--primary); }
.band-soft .car-arrow { background: var(--cream-100); }

/* video testimonial (9:16) */
.vtestimonial {
  position: relative; width: min(330px, 74vw); aspect-ratio: 9 / 16;
  border-radius: var(--r-lg); overflow: hidden; background: #1a140d;
  box-shadow: var(--shadow-lg);
}
.vtestimonial video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* text-message screenshot */
.ttestimonial {
  position: relative; width: min(360px, 80vw);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line-strong); background: var(--surface);
}
.ttestimonial img { width: 100%; display: block; }
.ttestimonial .rev-ph { position: relative; height: 0; padding-bottom: 150%; }
.ttestimonial .rev-ph > * { position: relative; }

.car-count { text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3); margin: 20px 0 0; }

@media (max-width: 560px) {
  .car-arrow { width: 40px; height: 40px; flex-basis: 40px; font-size: 20px; }
  .carousel { gap: 8px; }
}