.testimonials {
  position: relative;
  isolation: isolate;
  padding: 108px 0 124px;
}

.testimonials::before {
  position: absolute;
  z-index: -1;
  inset: 0 -8vw;
  content: "";
  background:
    radial-gradient(ellipse at 51% 52%, #e2f6ff 0%, #f0faff 30%, transparent 69%),
    linear-gradient(180deg, #fff 0%, #f9fcff 48%, #fff 100%);
  pointer-events: none;
}

.testimonials .section-label { color: #68869a; }
.testimonials .section-label > span { color: #168bb8; }

.testimonials-layout {
  display: grid;
  grid-template-columns: minmax(345px, .86fr) minmax(0, 1.14fr);
  align-items: start;
  gap: clamp(36px, 6vw, 88px);
  margin-top: 49px;
}

.testimonials-intro h2 {
  margin: 0;
  color: #172936;
  font: 400 clamp(42px, 4vw, 52px)/1.04 var(--serif);
  letter-spacing: -.05em;
}

.testimonials-intro h2 em { color: #178db9; font-weight: 400; }

.testimonial-carousel { min-width: 0; }

.testimonial-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 238px;
  height: 360px;
  overflow: hidden;
  border: 1px solid #c7e8f4;
  border-radius: 5px 32px 5px 32px;
  background: #fff;
  box-shadow: 16px 16px 0 #dff4fc, 17px 17px 0 1px #c2e5f2, 0 26px 65px #245a740e;
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.testimonial-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(180deg, #2db3e2, #a7e3f5 78%, #d7f2fb);
  content: "";
}

.testimonial-card-quote {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(30px, 4vw, 58px) 44px;
}

.testimonial-quote-mark {
  position: absolute;
  top: 15px;
  left: 33px;
  color: #78cde8;
  font: 400 92px/.9 var(--serif);
  opacity: .72;
}

.testimonial-card blockquote {
  position: relative;
  margin: 0;
  color: #2a4d61;
  font: 400 clamp(19px, 1.8vw, 24px)/1.52 var(--sans);
  letter-spacing: -.025em;
}

.testimonial-card-meta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 25px;
  padding: 34px 28px 33px;
  border-left: 1px solid #d5edf6;
  background:
    radial-gradient(circle at 100% 0%, #c9effb 0%, transparent 48%),
    linear-gradient(155deg, #f1faff, #e6f6fc);
}

.testimonial-client,
.testimonial-delivered { display: grid; gap: 8px; }

.testimonial-client span,
.testimonial-delivered span {
  color: #6790a3;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .13em;
}

.testimonial-client strong {
  color: #173b50;
  font: 400 32px/1.1 var(--serif);
  letter-spacing: -.025em;
}

.testimonial-delivered strong {
  color: #315c70;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 30px;
}

.testimonial-buttons { display: flex; align-items: center; gap: 14px; }
.testimonial-buttons button {
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 1px solid #9fd4e7;
  border-radius: 50%;
  background: #ffffffd9;
  color: #236985;
  cursor: pointer;
  box-shadow: 0 8px 20px #245a740e;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.testimonial-buttons button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.testimonial-buttons button:hover { transform: translateY(-2px); border-color: #49afd3; background: #eefaff; color: #125a79; }
.testimonial-buttons button:focus-visible { outline: 3px solid #70c9e8; outline-offset: 3px; }
.testimonial-buttons button:disabled { cursor: default; opacity: .55; transform: none; }

@media (max-width: 900px) {
  .testimonials-layout { grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); gap: 30px; }
  .testimonial-card { grid-template-columns: minmax(0, 1fr) 190px; }
  .testimonial-card-meta { padding-right: 22px; padding-left: 22px; }
  .testimonial-card-quote { padding-right: 30px; padding-left: 37px; }
}

@media (max-width: 760px) {
  .testimonials { padding: 80px 0 96px; }
  .testimonials-layout { grid-template-columns: 1fr; gap: 30px; margin-top: 34px; }
  .testimonials-intro h2 { font-size: clamp(38px, 9.5vw, 58px); }
  .testimonial-card { grid-template-columns: minmax(0, 1fr) 180px; }
  .testimonial-card-quote { padding: 49px 25px 35px 32px; }
  .testimonial-card blockquote { font-size: 18px; line-height: 1.55; }
  .testimonial-quote-mark { left: 27px; font-size: 79px; }
  .testimonial-card-meta { gap: 22px; padding: 30px 17px 25px; }
  .testimonial-client strong { font-size: 28px; }
  .testimonial-delivered strong { font-size: 14px; }
  .testimonial-controls { gap: 18px; }
}

@media (max-width: 480px) {
  .testimonial-card { grid-template-columns: 1fr; }
  .testimonial-card-quote { min-height: 256px; padding: 53px 25px 31px 31px; }
  .testimonial-card blockquote { font-size: 18px; }
  .testimonial-card-meta { display: grid; grid-template-columns: .72fr 1.28fr; gap: 16px; padding: 19px 20px 20px; border-top: 1px solid #d5edf6; border-left: 0; }
  .testimonial-client strong { font-size: 26px; }
  .testimonial-delivered strong { font-size: 13px; }
  .testimonial-controls { justify-content: center; gap: 14px; margin-top: 26px; }
  .testimonial-buttons { gap: 12px; }
  .testimonial-buttons button { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-card { will-change: auto; }
  .testimonial-buttons button { transition: none; }
}