/* 11 — What people say: the reassurance block mirrored (Figma 976:113698) — the photo on the left stays put,
   the content panel on the right overlaps it by 280px and carries the title and the deck of review cards.
   The deck is the in-flow one: settled cards sit in the panel, the next card slides out from under the last
   as you scroll, the waiting ones peek 24px each below it. */
.testimonials {
  background: var(--surface-card);
  font-family: var(--font);
  color: var(--text-ink);
}
.testimonials__inner {
  position: relative;
  max-width: var(--container-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Figma 1069:71026: two equal columns, the panel overlapping the photo by 280 */
  align-items: stretch;
  isolation: isolate;
  --overlap: clamp(120px, 14.6vw, 280px);
}
/* the photo: fills its column plus the overlap, stays on screen while the panel scrolls past */
.testimonials__media-col { position: relative; z-index: 1; margin-right: calc(var(--overlap) * -1); }
.testimonials__media {
  position: sticky;
  top: 0; /* pins to the very top of the screen, under the header */
  height: 100vh;
  min-height: 520px;
  background: var(--surface-accent);
  border-radius: var(--radius-8);
  overflow: hidden;
}
.testimonials__media picture { display: block; width: 100%; height: 100%; }
.testimonials__media-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Column / Content: padding 48, everything centred, rounded on the left */
.testimonials__content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  background: var(--surface-section);
  border-radius: 32px 0 0 32px;
}
.testimonials__head { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.testimonials__stars { display: flex; gap: 4px; }
.testimonials__stars img { width: 24px; height: 24px; display: block; }
.testimonials__title { margin: 0; width: 100%; text-align: center; font: 500 38px/42px var(--font); letter-spacing: -1.14px; color: var(--brand-primary); }

/* the deck */
.testimonials__viewport { position: relative; width: 100%; max-width: 720px; height: var(--deck-h, auto); } /* 1.5× the 480 deck */
.testimonials__deck { position: relative; width: 100%; }
.testimonials__card {
  position: absolute; left: 0; top: 0;
  box-sizing: border-box; width: 100%; height: var(--card-h, auto);
  padding: 32px;
  display: flex; flex-direction: column; gap: 40px;
  border-radius: var(--radius-16);
  background: var(--surface-white);
  color: var(--text-ink);
  box-shadow: 0 -4px 16px rgba(8, 42, 28, .03), 0 8px 24px rgba(8, 42, 28, .05);
  z-index: var(--card-z, 1);
  transform: translate3d(0, var(--card-y, 0px), 0);
  will-change: transform;
}
.testimonials__person { display: flex; align-items: center; gap: 12px; }
.testimonials__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: var(--brand-accent); color: var(--brand-primary);
  font: 600 14px/1 var(--font); letter-spacing: 0;
}
.testimonials__who { display: flex; flex-direction: column; gap: 2px; }
.testimonials__name { margin: 0; color: var(--text-ink); }
.testimonials__role { margin: 0; color: var(--text-muted); }
.testimonials__text { margin: 0; color: var(--text-ink); }

@media (max-width: 1100px) {
  .testimonials__content { padding: 40px 32px; }
}
/* phone: the photo on top, the panel slides out from under it; the deck runs full width */
@media (max-width: 767px) {
  .testimonials__inner { display: flex; flex-direction: column; }
  .testimonials__media { position: relative; top: auto; height: auto; aspect-ratio: 16 / 10; border-radius: 0 0 var(--radius-12) var(--radius-12); }
  .testimonials__media-col { margin: 0; }
  .testimonials__media { min-height: 0; }
  .testimonials__content { margin: 0; padding: 48px var(--page-pad) 64px; gap: 32px; border-radius: 0; }
  .testimonials__title { font: 500 32px/36px var(--font); letter-spacing: -0.96px; }
  .testimonials__title .br-desktop { display: none; }
  /* the phone deck: the stack waits 24px above the bottom of the screen — the current card in front, only the
     next card peeking 64px beneath it, the rest hidden exactly behind that one; as the front card scrolls away
     the next one slides up into its place (positions come from js, same as the desktop deck) */
  .testimonials__viewport { max-width: none; }
  .testimonials__card { padding: 24px; gap: 24px; border-radius: var(--radius-12); box-shadow: 0 -4px 14px rgba(8, 42, 28, .04), 0 8px 20px rgba(8, 42, 28, .05); }
  .testimonials__text { font-size: 18px; line-height: 24px; letter-spacing: -0.03em; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials__card { transform: translate3d(0, var(--card-y, 0px), 0); }
}