.testi {
  position: absolute;
  z-index: 3;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(1601 * var(--u));
  height: calc(822 * var(--u));
  pointer-events: none;
  font-family: "Figtree", system-ui, sans-serif;
  line-height: 1.3;
}
.testi-photo {
  position: absolute;
  left: 0;
  top: calc(var(--py) * var(--u));
  width: calc(376 * var(--u));
  height: calc(var(--ph) * var(--u));
  padding: 0;
  border: 0;
  border-radius: calc(30 * var(--u));
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testi-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.testi-photo:hover img { opacity: 0.85; }
.testi-photo[aria-pressed="true"] {
  box-shadow: 0 0 0 calc(4 * var(--u)) #ff9119;
}
.testi-photo[aria-pressed="true"] img {
  filter: none;
  opacity: 1;
}
.testi-photo:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

.testi-card {
  position: absolute;
  left: calc(409 * var(--u));
  top: calc(167 * var(--u));
  width: calc(1192 * var(--u));
  height: calc(655 * var(--u));
  margin: 0;
  border-radius: calc(30 * var(--u));
  background: linear-gradient(180deg, #dc5134 0%, #ff9119 100%);
  color: #fff;
  pointer-events: auto;
}
.testi-card > * {
  position: absolute;
  left: calc(104 * var(--u));
  margin: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.testi-card.is-changing > * {
  opacity: 0;
  transform: translateY(calc(10 * var(--u)));
}
.testi-quote {
  top: calc(99 * var(--u));
  width: calc(1002 * var(--u));
  font-size: calc(77 * var(--u));
  font-weight: 400;
  line-height: 1.3;
}
.testi-body {
  top: calc(341 * var(--u));
  width: calc(960 * var(--u));
  font-size: calc(25 * var(--u));
  font-weight: 400;
}
.testi-rule {
  top: calc(505 * var(--u));
  width: calc(984 * var(--u));
  border-top: calc(1.5 * var(--u)) dashed rgba(255, 255, 255, 0.7);
}
.testi-name {
  top: calc(528 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.testi-role {
  top: calc(570 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 300;
}
.testi-stars {
  left: auto;
  right: calc(78 * var(--u));
  top: calc(535 * var(--u));
  display: flex;
  gap: calc(9 * var(--u));
}
.testi-stars svg {
  width: calc(25 * var(--u));
  height: calc(25 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
  .testi-photo,
  .testi-photo img,
  .testi-card > * { transition: none; }
}