/* Fixed frames keep all twelve original screenshots visually aligned. */
.testimonial-carousel-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  border-top: 1px solid #cfd3c2;
  padding-top: 23px;
  margin-bottom: 22px;
}
.testimonial-carousel-controls { display: flex; gap: 9px; }
.testimonial-carousel-controls button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #bcc4ad;
  background: transparent;
  color: #253019;
  transition: background .2s, color .2s, border-color .2s;
}
.testimonial-carousel-controls button:first-child .icon { transform: rotate(180deg); }
.testimonial-carousel-controls button:not(:disabled):hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.testimonial-carousel-controls button:disabled { opacity: .32; cursor: default; }
.testimonial-carousel {
  --cards-visible: 3;
  --carousel-gap: 20px;
  --carousel-frame-height: 370px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--carousel-gap)) / 3);
  gap: var(--carousel-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 5px 12px;
}
.testimonial-carousel::-webkit-scrollbar { display: none; }
.testimonial-carousel .testimonial-card {
  display: grid;
  grid-template-rows: var(--carousel-frame-height) 54px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-self: stretch;
  background: #10150e;
  border: 1px solid #414b34;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
.testimonial-carousel .testimonial-card:focus-visible { outline-offset: -4px; }
.testimonial-carousel .testimonial-card:hover { transform: translateY(-2px); box-shadow: none; }
.testimonial-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: var(--carousel-frame-height);
  padding: 16px;
  background: #080c08;
  overflow: hidden;
}
.testimonial-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.testimonial-carousel .testimonial-card-footer {
  height: 54px;
  padding: 15px 17px;
  border-top: 1px solid #414b34;
  font-size: 10px;
  letter-spacing: .3px;
}
.testimonial-carousel .testimonial-card-footer > span:first-child { font-size: 9px; }
.testimonial-carousel .testimonial-card-footer > span:last-child { gap: 12px; }
.testimonial-carousel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 25px;
  padding-top: 7px;
  padding-bottom: 20px;
}
.testimonial-carousel-footer p { font-size: 10px; color: #727c62; margin: 0; }
.testimonial-carousel-pagination { display: flex; align-items: center; gap: 22px; }
.testimonial-carousel-progress { width: 130px; height: 3px; background: #d5d9cb; position: relative; overflow: hidden; }
.testimonial-carousel-progress > span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 25%;
  background: #b4512c;
}
#testimonial-range { font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #59664a; min-width: 66px; text-align: right; }
.testimonials .testimonials-bottom { margin-top: 5px; justify-content: flex-end; }
@media (max-width: 1000px) {
  .testimonial-carousel {
    --cards-visible: 2;
    --carousel-frame-height: 360px;
    grid-auto-columns: calc((100% - var(--carousel-gap)) / 2);
  }
}
@media (max-width: 640px) {
  .testimonial-carousel { --cards-visible: 1; --carousel-gap: 16px; --carousel-frame-height: 360px; grid-auto-columns: 100%; }
  .testimonial-carousel-toolbar { padding-top: 19px; margin-bottom: 17px; gap: 20px; }
  .testimonial-carousel-controls button { width: 44px; height: 44px; }
  .testimonial-carousel .testimonial-card { grid-template-rows: var(--carousel-frame-height) 52px; }
  .testimonial-carousel .testimonial-card-footer { height: 52px; font-size: 11px; padding-inline: 17px; }
  .testimonial-carousel .testimonial-card-footer > span:first-child { font-size: 9px; }
  .testimonial-media { padding: 14px; }
  .testimonial-carousel-footer { flex-direction: column; align-items: stretch; gap: 15px; padding-top: 4px; }
  .testimonial-carousel-footer p { font-size: 10px; line-height: 1.8; }
  .testimonial-carousel-pagination { width: 100%; gap: 20px; }
  .testimonial-carousel-progress { flex: 1; width: auto; }
}
@media (max-width: 370px) {
  .testimonial-carousel { --carousel-frame-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-carousel .testimonial-card { transition: none; }
}