/*
 * testimonials: one scroll region per quote, the quote sticky inside it.
 * Word Light (scrubbed) brightens the words in reading order; without JS or
 * with reduced motion the quote is simply at full strength.
 */

.testimonials.section { padding-bottom: calc(var(--section-y) * .35); }
.testimonials__eyebrow { display: block; margin-bottom: clamp(8px, 2vh, 24px); }

.tm { position: relative; min-height: 100svh; padding-bottom: 22svh; }
.tm__sticky { position: sticky; top: 30svh; }
.tm + .tm { margin-top: 0; }

.tm__card {
  position: relative;
  grid-column: 1 / -1;
}
@media (min-width: 1024px) {
  .tm__card { grid-column: 2 / span 10; }
}

.tm__count { margin-bottom: clamp(18px, 2.4vw, 28px); color: var(--fg-soft); }

.tm__quote p {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: var(--fs-quote);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-indent: -.42em;
  max-width: 24em;
  text-wrap: pretty;
}

/* SplitText words are inline-blocks: keep the hanging quote on the paragraph only. */
.tm-word { text-indent: 0; }

.tm__cite {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(26px, 3.4vw, 44px);
}
.tm__who { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.tm__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 88%;
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.tm__meta { margin-right: 0; }
.tm__source { color: var(--fg-soft); }
.tm__source a { display: inline-flex; align-items: center; min-height: 48px; color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
.tm__source:has(a) { margin-block: -10px -14px; }
.tm__source a:hover { text-decoration-thickness: 2px; }

.tm-stars { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; }
.tm-stars__row { display: inline-flex; gap: 2px; }
.tm-stars__star { width: 15px; height: 15px; fill: var(--rule-c); }
.tm-stars__star.is-on { fill: var(--ink); }

/* 96px thumbnail of the client's site, as a tiny browser window. */
.tm-thumb {
  flex: none;
  display: block;
  width: 96px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-hi);
  box-shadow: var(--shadow-print);
  text-decoration: none;
  transition: transform .25s var(--ease-soft);
}
a.tm-thumb:hover { transform: translateY(-2px); }
.tm-thumb__bar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 10px;
  padding: 0 5px;
  background: var(--bone);
  border-bottom: 1px solid var(--ink);
}
.tm-thumb__bar i { width: 3px; height: 3px; border-radius: 50%; border: 1px solid var(--ink-soft); }
.tm-thumb__img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

.tm-photo { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--bone); }
.tm-photo__img { width: 100%; height: 100%; object-fit: cover; }

/* Samples: the stamp sits on the card's top-right corner. */
.tm__card.is-sample { outline-offset: 14px; }
.tm__card .sample-stamp { top: -4px; right: 0; }

@media (max-width: 767px) {
  .tm { min-height: 80svh; padding-bottom: 14svh; }
  .tm__sticky { top: 14svh; }
  .tm__quote p { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.75rem); line-height: 1.16; }
  .tm__cite { gap: 14px; align-items: flex-start; }
  .tm__card.is-sample { outline-offset: 8px; }
}