.v3-testimonials {
  --testimonial-stack-back: #d7d7df;
  --testimonial-stack-middle: #e7e7ec;
  --testimonial-progress: #a0a0ad;
  --testimonial-stack-angle: 6deg;
  margin-block: clamp(88px, 10vw, 152px) clamp(80px, 10vw, 152px);
}

/* The last desktop project column extends past its normal flow box. */
@media (min-width: 801px) {
  .v3-cases + .v3-testimonials {
    --testimonial-section-offset: 311px;
    margin-block-start: var(--testimonial-section-offset);
  }

  .v3-cases + .v3-testimonials h2 { translate: 0 calc(.1 * var(--testimonial-section-offset)); }
  .v3-testimonials__card { --testimonial-gap-scale: .7; }
}

.v3-testimonials + .v3-contact { margin-top: 0; }

.v3-testimonials > * { grid-column: 1 / -1; min-width: 0; }

.v3-testimonials h2 {
  margin: 0;
  font-size: clamp(40px, 6.2vw, 74px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.03em;
}

/* Give rotating cards room to paint without expanding the page's scroll range. */
.v3-testimonials__frame {
  /* Match the grid gutters and leave space for desktop scrollbars on wide screens. */
  --testimonial-bleed: max(48px, calc((100vw - 1248px) / 2));
  display: grid;
  overflow: clip;
  margin: -100px calc(-1 * var(--testimonial-bleed));
  padding: 100px var(--testimonial-bleed);
}

.v3-testimonials__stack {
  --testimonial-float: clamp(3px, .55vw, 8px);
  position: relative;
  isolation: isolate;
  display: grid;
  margin-block-start: clamp(58px, 11vw, 143px);
  touch-action: pan-y pinch-zoom;
}

.v3-testimonials__stack::before,
.v3-testimonials__stack::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: clamp(22px, 3vw, 32px);
  background: var(--testimonial-stack-back);
  transform: translate(calc(clamp(3px, .5vw, 7px) + .1 * var(--testimonial-pointer-x, 0px)), calc(.12 * var(--testimonial-pointer-y, 0px)))
    rotate(var(--testimonial-stack-angle));
  animation: v3-testimonial-float 7s ease-in-out -1s infinite alternate;
  pointer-events: none;
}

.v3-testimonials__stack::after {
  background: var(--testimonial-stack-middle);
  transform: translate(calc(clamp(-7px, -.5vw, -3px) - .16 * var(--testimonial-pointer-x, 0px)), calc(-.18 * var(--testimonial-pointer-y, 0px)))
    rotate(calc(-1 * var(--testimonial-stack-angle)));
  animation: v3-testimonial-float 8.5s ease-in-out -3s infinite alternate-reverse;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .v3-testimonials__card {
    translate: var(--testimonial-pointer-x, 0px) var(--testimonial-pointer-y, 0px);
  }
}

@keyframes v3-testimonial-float {
  from { translate: 0 calc(-1 * var(--testimonial-float)); }
  to { translate: 0 var(--testimonial-float); }
}

.v3-testimonials__card {
  --testimonial-card-padding: clamp(28px, 5vw, 60px);
  --testimonial-card-min-height: clamp(280px, 40vw, 470px);
  --testimonial-quote-offset: clamp(14px, 1.8vw, 22px);
  --testimonial-closing-space: clamp(8px, 1vw, 12px);
  --testimonial-attribution-space: calc(clamp(10px, 1.3vw, 16px) + var(--testimonial-closing-space));
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc((clamp(24px, 5.25vw, 63px) + var(--testimonial-attribution-space)) * var(--testimonial-gap-scale, 1));
  box-sizing: border-box;
  min-height: calc(var(--testimonial-card-min-height) + var(--testimonial-quote-offset) + var(--testimonial-attribution-space));
  margin: 0;
  padding: var(--testimonial-card-padding) clamp(24px, 9.5vw, 137px);
  padding-block-start: calc(var(--testimonial-card-padding) + var(--testimonial-quote-offset));
  border-radius: clamp(22px, 3vw, 32px);
  background: var(--v3-card-solid);
  overflow-wrap: anywhere;
}

.v3-testimonials__card[inert] { visibility: hidden; }

@media (hover: hover) and (pointer: fine) {
  .v3-testimonials__stack[data-click-navigation] { cursor: pointer; }
}

.v3-testimonials__card blockquote,
.v3-testimonials__card p { margin: 0; }

.v3-testimonials__card blockquote {
  position: relative;
  font-size: clamp(21px, calc(3.125vw - 2px), 38px);
  font-style: italic;
  line-height: 1.3;
}

.v3-testimonials__card blockquote p {
  word-spacing: 1px;
  letter-spacing: -.01em;
}

.v3-testimonials__quote-mark {
  position: absolute;
  inline-size: 44px;
  color: var(--testimonial-progress);
  font-size: 60px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.v3-testimonials__quote-mark--open {
  inset-block-start: clamp(-73px, -6.1vw, -56px);
  inset-inline-start: clamp(-46px, -3.84vw, -12px);
}

.v3-testimonials__quote-mark--close {
  inset-block-start: calc(100% + 6px + var(--testimonial-closing-space));
  inset-inline-start: calc(100% + 1px);
}

.v3-testimonials__card figcaption {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 23px);
  font-size: clamp(18px, 1.85vw, 22px);
  line-height: 1.2;
}

.v3-testimonials__card figcaption img {
  flex: none;
  width: clamp(50px, 6.75vw, 80px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.v3-testimonials__card a {
  color: inherit;
  text-decoration: underline 1px #d7d7df;
  text-underline-offset: .28em;
}

.v3-testimonials__at { color: var(--v3-muted); }
.v3-testimonials__card a.v3-testimonials__name {
  display: inline-block;
  margin-block-end: .25em;
  font-weight: 600;
}

.v3-testimonials__controls {
  --track-active: 84px;
  --track-size: 12.6px;
  position: relative;
  display: flex;
  justify-self: center;
  max-width: 100%;
  margin-block-start: clamp(34px, 6vw, 71px);
  overflow-x: auto;
  scrollbar-width: none;
}

.v3-testimonials__controls[hidden] { display: none; }

.v3-testimonials__controls button {
  flex: none;
  display: grid;
  place-items: center;
  padding: 0 7px;
  min-width: 24px;
  min-height: 44px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  cursor: pointer;
}

.v3-testimonials__track {
  position: relative;
  display: block;
  width: var(--track-size);
  height: var(--track-size);
  border-radius: 99px;
  overflow: hidden;
  transition: width 240ms ease;
}

.v3-testimonials__track img {
  display: block;
  transform: scale(.7);
  transform-origin: top left;
}
.v3-testimonials__track > span {
  position: absolute;
  inset: 0;
  background: var(--testimonial-progress);
  transform: scaleX(0);
  transform-origin: left center;
}

.v3-testimonials__controls [aria-current] .v3-testimonials__track {
  width: var(--track-active);
  background: var(--testimonial-stack-back);
}

.v3-testimonials__controls [aria-current] img { visibility: hidden; }
.v3-testimonials :focus-visible { outline: 2px solid var(--v3-focus); outline-offset: 2px; }
.v3-testimonials__controls button:focus-visible { outline-offset: -3px; }

.v3-testimonials__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (max-width: 1100px) {
  .v3-testimonials__frame { --testimonial-bleed: 40px; }
}

@media (max-width: 480px) {
  .v3-testimonials__frame { --testimonial-bleed: 24px; }
}

@media (max-width: 600px) {
  .v3-testimonials { --testimonial-stack-angle: 4deg; }
  .v3-testimonials h2 { text-align: center; }
  .v3-testimonials__card {
    --testimonial-card-min-height: 392px;
    --testimonial-card-padding: 56px;
  }
  .v3-testimonials__card blockquote { font-size: clamp(20px, 5.4vw, 24px); }
  .v3-testimonials__quote-mark--close {
    inset-block-start: calc(100% - 14px + var(--testimonial-closing-space));
    inset-inline: auto -12px;
    /* Leave room on both sides for the italic glyph's overhang. */
    text-align: center;
  }
  .v3-testimonials__card figcaption { font-size: clamp(17px, 4.5vw, 20px); }
  .v3-testimonials__card figcaption img { width: 64px; }
  .v3-testimonials__stack::before,
  .v3-testimonials__stack::after { inset-inline: 3px; }
  .v3-testimonials__controls { --track-active: 47.6px; }
  .v3-testimonials__controls button { padding-inline: 3px; }
}

@media (prefers-color-scheme: dark) {
  .v3-testimonials {
    --testimonial-stack-back: #3b3b44;
    --testimonial-stack-middle: #2e2e35;
    --testimonial-progress: #9898a7;
  }

  .v3-testimonials__track img { opacity: .48; }
}

@media (prefers-reduced-motion: reduce) {
  .v3-testimonials__stack::before,
  .v3-testimonials__stack::after { animation: none; }
  .v3-testimonials__track { transition: none; }
}