/* The client perspective keeps the same local chapter anchor. */
.client-chapter { position: relative; z-index: 2; padding: 0 14px 14px; background: #fff; outline: none; scroll-margin-top: 0; }
.client-chapter[data-client-hold] { min-height: calc(var(--client-surface-height) + var(--client-hold-distance) + var(--client-bottom-inset)); }
.client-chapter[data-client-hold] .testimonial-surface { position: sticky; top: 0; }
.testimonial-surface {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  min-height: calc(var(--scene-height, 100svh) - 14px);
  padding: clamp(30px, 3.5vw, 56px) clamp(30px, 5vw, 80px);
  overflow: hidden; border-radius: 30px; color: #fafaf7; background: #183740;
  opacity: calc(1 - var(--testimonial-outro, 0));
  transform: scale(calc(1 - var(--testimonial-outro, 0) * .012)); transform-origin: center bottom;
}
.testimonial-surface::before {
  content: ''; position: absolute; z-index: -3; inset: -28%; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 12% 18%, #456f60 0%, transparent 75%), radial-gradient(ellipse 65% 65% at 88% 80%, #703855 0%, transparent 78%), linear-gradient(130deg, #284f53, #193747 48%, #4c3b58);
  transform-origin: center;
  translate: calc(var(--client-hold-progress, 0) * -3%) 0;
  animation: testimonial-color-flow 12s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.testimonial-color-wash {
  position: absolute; z-index: -2; inset: -28%; pointer-events: none;
  background: radial-gradient(ellipse 62% 80% at 18% 72%, #733956 0%, transparent 76%), radial-gradient(ellipse 70% 64% at 90% 16%, #416e62 0%, transparent 78%), linear-gradient(230deg, #22515b, #473b58 48%, #234e4d);
  transform-origin: center;
  translate: calc(var(--client-hold-progress, 0) * 3%) 0;
  animation: testimonial-color-crossflow 14s ease-in-out -5s infinite alternate;
  animation-play-state: paused;
}
.client-chapter[data-client-motion] .testimonial-surface::before,
.client-chapter[data-client-motion] .testimonial-color-wash { animation-play-state: running; }
@keyframes testimonial-color-flow {
  0% { transform: translate3d(-12%, 8%, 0) scale(1.04); }
  50% { transform: translate3d(6%, -10%, 0) scale(1.1); }
  100% { transform: translate3d(13%, 7%, 0) scale(1.05); }
}
@keyframes testimonial-color-crossflow {
  0% { transform: translate3d(12%, -9%, 0) scale(1.05); opacity: .12; }
  50% { transform: translate3d(-10%, 9%, 0) scale(1.08); opacity: .92; }
  100% { transform: translate3d(6%, -6%, 0) scale(1.03); opacity: .25; }
}
.testimonial-surface::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .075; background: url('/assets/grain.svg'); }
.testimonial-eyebrow { display: flex; align-items: center; gap: 17px; margin: 0; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .14em; }
.testimonial-mark { display: block; width: 29px; height: 29px; background: currentColor; mask: url('/assets/wellist-mark.svg') center / contain no-repeat; -webkit-mask: url('/assets/wellist-mark.svg') center / contain no-repeat; }
.testimonial-figure { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: clamp(32px, 4.5vh, 58px); width: 100%; max-width: 1120px; margin: 0 auto; padding: 64px 0; text-align: center; }
.testimonial-quote-mark { width: 49px; height: 38px; color: #c4d9d0; fill: currentColor; transform: rotate(calc(var(--client-hold-progress, 0) * 360deg)); transform-origin: center; }
.testimonial-quote { margin: 0; font: 400 clamp(31px, 3.4vw, 54px)/1.24 Sora, Arial, sans-serif; letter-spacing: -.05em; text-wrap: balance; }
.testimonial-credit { display: flex; flex-direction: column; align-items: center; max-width: 100%; gap: 8px; padding-top: 4px; font-style: normal; line-height: 1.55; }
.testimonial-credit strong { font-size: 17px; font-weight: 500; }
.testimonial-credit span { color: #bfd0ce; font-size: 13px; }
.testimonial-credit .testimonial-organization { color: #f4f4ee; font-size: 14px; }
.testimonial-client-logo { display: block; width: 260px; max-width: 100%; height: auto; margin-top: 18px; }
.testimonial-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid #e2f0e020; color: #d0dcd4; font-size: 11px; line-height: 1.5; }
.testimonial-caption p { margin: 0; }
.testimonial-caption span:last-child { width: 40px; height: 2px; border-radius: 2px; background: #d0dcd4; }
@media (max-width: 900px) {
  .client-chapter { padding: 0 10px 10px; }
  .testimonial-surface { min-height: calc(var(--scene-height, 100svh) - 10px); border-radius: 28px; padding: 28px; }
  .testimonial-figure { max-width: 680px; padding-block: 62px; gap: 32px; }
  .testimonial-quote { font-size: clamp(28px, 4.5vw, 42px); }
}
@media (max-width: 540px) {
  .client-chapter { padding: 0 8px 8px; }
  .testimonial-surface { min-height: calc(var(--scene-height, 100svh) - 8px); padding: 25px 22px; border-radius: 25px; }
  .testimonial-eyebrow { font-size: 9px; gap: 12px; }
  .testimonial-mark { width: 25px; height: 25px; }
  .testimonial-figure { padding-block: 40px; gap: 28px; }
  .testimonial-quote { font-size: clamp(26px, 6.7vw, 33px); line-height: 1.25; }
  .testimonial-credit { gap: 5px; }
  .testimonial-credit strong { font-size: 15px; }
  .testimonial-credit span { max-width: 240px; font-size: 12px; }
  .testimonial-credit .testimonial-organization { font-size: 12px; }
  .testimonial-client-logo { width: 210px; margin-top: 16px; }
  .testimonial-caption { padding-top: 18px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-chapter[data-client-hold] { min-height: 0; }
  .client-chapter[data-client-hold] .testimonial-surface { position: relative; top: auto; }
  .testimonial-surface { opacity: 1; transform: none; }
  .testimonial-quote-mark { transform: none; }
  .testimonial-surface::before { animation: none; transform: none; translate: none; opacity: 1; }
  .testimonial-color-wash { animation: none; transform: none; translate: none; opacity: .35; }
}