/* Four open scenes: a comic lineup, then one voice at a time. */
#testimonials { --ms-test-ink: #10264d; margin-top: clamp(2.5rem, 5vw, 4rem); color: var(--ms-test-ink); scroll-margin-top: 8rem; }
#testimonials *, #testimonials *::before, #testimonials *::after { box-sizing: border-box; }
#testimonials .ms-test-stage { position: relative; }
#testimonials .ms-test-scene { --ms-test-play: paused; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(1rem, 3.5vw, 3.5rem); min-height: 32rem; }
#testimonials .ms-test-scene[hidden] { display: none; }
#testimonials .ms-test-scene.is-active { animation: ms-test-fade var(--ms-test-duration, 8000ms) ease-in-out both; animation-play-state: paused; }
#testimonials .ms-test-scene--intro.is-active { animation-name: ms-test-intro-fade; }
#testimonials[data-test-motion='running'] .ms-test-scene.is-active { --ms-test-play: running; animation-play-state: running; }
#testimonials[data-test-motion='paused'] .ms-test-scene.is-active { opacity: 1 !important; }
#testimonials[data-test-motion='paused'] .ms-test-scene.is-active .ms-test-lineup-person { opacity: 1 !important; transform: none !important; }
#testimonials:not(.is-enhanced) .ms-test-scene + .ms-test-scene, #testimonials.is-static .ms-test-scene + .ms-test-scene { margin-top: 2.5rem; }
#testimonials .ms-test-scene--intro { grid-template-columns: 1fr; }
#testimonials .ms-test-lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 4vw, 4rem); align-items: end; width: min(100%, 66rem); margin: 0 auto; }
#testimonials .ms-test-lineup-person { min-width: 0; text-align: center; }
#testimonials .ms-test-lineup-avatar { display: block; width: 100%; max-height: 22rem; margin: 0 auto; overflow: visible; }
#testimonials .ms-test-lineup-person:nth-child(2) .ms-test-lineup-avatar { transform: translateY(-.8rem); }
#testimonials .ms-test-lineup-name { margin: .8rem 0 .3rem; color: #163456; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.3rem; line-height: 1.3; letter-spacing: -.04em; font-weight: 800; }
#testimonials .ms-test-lineup-role { margin: 0; color: #526581; font-size: .75rem; line-height: 1.5; }
#testimonials .ms-test-scene.is-active .ms-test-lineup-person { animation: ms-test-introduce 800ms cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--ms-test-delay, 0ms); animation-play-state: var(--ms-test-play); }
#testimonials .ms-test-copy { min-width: 0; padding: 1.5rem 0; grid-column: 2; grid-row: 1; }
#testimonials .ms-test-role { display: flex; align-items: center; gap: .65rem; margin: 0 0 .65rem; color: #526581; font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
#testimonials .ms-test-role::before { content: ''; width: .4rem; height: .4rem; flex: none; border-radius: 50%; background: var(--ms-test-accent, #0f63ff); }
#testimonials .ms-test-name { margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.1rem; line-height: 1.4; font-weight: 800; letter-spacing: -.03em; color: #244667; }
#testimonials .ms-test-quote { position: relative; margin: 2rem 0 0; padding: 0; border: 0; }
#testimonials .ms-test-quote::before { content: '\201C'; display: block; height: 2.7rem; margin-bottom: .6rem; color: var(--ms-test-accent, #0f63ff); font-family: Georgia, serif; font-size: 5.8rem; line-height: 1; opacity: .65; }
#testimonials .ms-test-quote p { margin: 0; color: #142e52; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: clamp(1.4rem, 2.15vw, 2rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.55; text-wrap: pretty; }
#testimonials .ms-test-illustration { position: relative; min-width: 0; margin: 0; grid-column: 1; grid-row: 1; }
#testimonials .ms-test-art { display: block; width: 100%; max-height: 31rem; height: auto; overflow: visible; }
#testimonials .ms-test-art .ms-test-float { animation: ms-test-float 8s ease-in-out infinite; animation-play-state: var(--ms-test-play); }
#testimonials .ms-test-art .ms-test-float-late { animation: ms-test-float 8s -4s ease-in-out infinite; animation-play-state: var(--ms-test-play); }
#testimonials .ms-test-trace { stroke-dasharray: 1; animation: ms-test-trace 8s ease-in-out infinite; animation-play-state: var(--ms-test-play); }
#testimonials .ms-test-tick { stroke-dasharray: 1; animation: ms-test-tick 8s ease-in-out infinite; animation-delay: var(--ms-test-delay, 0s); animation-play-state: var(--ms-test-play); }
#testimonials .ms-test-spark { transform-box: fill-box; transform-origin: center; animation: ms-test-spark 8s ease-in-out infinite; animation-delay: var(--ms-test-delay, 0s); animation-play-state: var(--ms-test-play); }
#testimonials .ms-test-step { animation: ms-test-step 8s ease-in-out infinite; animation-delay: var(--ms-test-delay, 0s); animation-play-state: var(--ms-test-play); }
#testimonials .ms-test-scan { animation: ms-test-scan 8s ease-in-out infinite; animation-play-state: var(--ms-test-play); }
#testimonials .ms-test-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
@keyframes ms-test-fade { 0%, 100% { opacity: 0; } 7.5%, 92.5% { opacity: 1; } }
@keyframes ms-test-intro-fade { 0%, 100% { opacity: 0; } 12%, 88% { opacity: 1; } }
@keyframes ms-test-introduce { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ms-test-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ms-test-trace { 0%, 8% { stroke-dashoffset: 1; } 65%, 100% { stroke-dashoffset: 0; } }
@keyframes ms-test-tick { 0%, 20% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes ms-test-spark { 0%, 100% { transform: scale(.85); opacity: .5; } 45%, 70% { transform: scale(1); opacity: 1; } }
@keyframes ms-test-step { 0%, 100% { opacity: .5; } 35%, 75% { opacity: 1; } }
@keyframes ms-test-scan { 0%, 100% { transform: translateY(0); opacity: 0; } 12% { opacity: .7; } 70% { transform: translateY(55px); opacity: .7; } 85% { transform: translateY(55px); opacity: 0; } }
@media (min-width: 1600px) { #testimonials { max-width: 1440px; margin-left: auto; margin-right: auto; } }
@media (max-width: 1000px) {
  #testimonials .ms-test-scene { gap: 1.5rem; }
  #testimonials .ms-test-quote p { font-size: 1.45rem; }
}
@media (max-width: 760px) {
  #testimonials .ms-test-scene { grid-template-columns: 1fr; gap: .5rem; min-height: 39rem; }
  #testimonials .ms-test-scene--intro { display: flex; align-items: center; }
  #testimonials .ms-test-lineup { gap: .25rem; align-items: start; }
  #testimonials .ms-test-lineup-avatar { max-height: 17rem; }
  #testimonials .ms-test-lineup-name { font-size: clamp(.8rem, 3.4vw, 1.05rem); margin-top: .7rem; }
  #testimonials .ms-test-lineup-role { max-width: 8rem; margin: 0 auto; font-size: .62rem; }
  #testimonials .ms-test-illustration { order: -1; align-self: end; grid-column: 1; grid-row: 1; }
  #testimonials .ms-test-art { height: 17rem; }
  #testimonials .ms-test-copy { align-self: start; padding: .5rem 0 1rem; grid-column: 1; grid-row: 2; }
  #testimonials .ms-test-role { font-size: .62rem; margin-bottom: .45rem; }
  #testimonials .ms-test-name { font-size: .98rem; }
  #testimonials .ms-test-quote { margin-top: .8rem; }
  #testimonials .ms-test-quote::before { position: absolute; top: -2.6rem; right: .4rem; height: auto; font-size: 3.5rem; opacity: .25; }
  #testimonials .ms-test-quote p { font-size: clamp(1.16rem, 4.8vw, 1.5rem); line-height: 1.6; }
}
@media (max-width: 380px) {
  #testimonials .ms-test-scene { min-height: 39rem; }
  #testimonials .ms-test-art { height: 15.5rem; }
  #testimonials .ms-test-lineup-role { font-size: .59rem; }
}
@media (prefers-reduced-motion: reduce) {
  #testimonials *, #testimonials *::before, #testimonials *::after { animation: none !important; transition: none !important; }
  #testimonials .ms-test-lineup-person, #testimonials .ms-test-scene { opacity: 1 !important; transform: none !important; }
  #testimonials .ms-test-scan { display: none; }
}
