/* /testimonials/ — loaded only by page-testimonials.hbs (via the "head" block
   in home-layout.hbs) on top of home.css, so the tokens below (--paper,
   --white, --line, --green, --ink, --serif, --mono) come from there.

   Salvaged from the 2025 Squarespace page: big photo, a bold colored band of
   featured quotes with faces, one oversized pull quote, a grid of shorter
   quotes, and a moving strip of client app icons. The band keeps its
   red-orange (darkened from #E24A39 to #D4402F so white text passes 4.5:1);
   the old yellow sticky notes become white cards. */

/* Hero: heading over a wide framed photo. */
.tm-hero{padding-bottom:56px}
.tm-hero h1{max-width:16ch;font-size:clamp(2.3rem,5.6vw,3.8rem)}
.tm-hero .lede{max-width:52ch;margin-bottom:36px}
.tm-photo{margin:0;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:10px}
.tm-photo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:30% 30%;border-radius:14px;background:#e6e6e6}

.tm-intro{padding-top:8px}
.tm-intro .prose strong{color:var(--ink)}

/* Featured: the red-orange band. All text is solid white; anything dimmer
   drops below 4.5:1 on this background. */
.tm-featured{background:#d4402f;color:#fff;padding:84px 0}
.tm-featured .sec-label{color:#fff}
.tm-pair{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.tm-pair+.tm-pair{margin-top:56px}
.tm-quote{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.tm-quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.45;letter-spacing:-.01em;color:#fff}
.tm-quote figcaption{display:flex;align-items:center;gap:16px}
.tm-quote img{width:72px;height:72px;flex:0 0 72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.tm-quote figcaption span,.tm-pull figcaption{font-size:.95rem;color:#fff;line-height:1.4}
.tm-quote figcaption b,.tm-pull figcaption b{display:block;color:#fff;font-weight:700}

.tm-pull{margin:84px auto;max-width:900px;text-align:center;padding:0 8px}
.tm-pull blockquote{margin:0 0 24px;font-family:var(--serif);font-style:italic;font-size:clamp(1.9rem,4.6vw,3.3rem);line-height:1.22;letter-spacing:-.02em;color:#fff}

/* More: compact cards. */
.tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0;list-style:none}
.tm-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:28px 26px 24px}
.tm-card blockquote{margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.6;color:var(--ink)}
.tm-card p{margin:0;font-size:.9rem;color:var(--muted)}
.tm-card b{color:var(--ink)}
.tm-card a{color:var(--green);text-underline-offset:3px}

/* Clients: an endless strip of app icons. Two identical lists sit in one
   track; sliding the track left by half its width loops seamlessly. */
.tm-clients-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px}
.tm-clients-head .sec-label{margin:0}
.tm-pause{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}
.tm-pause:hover,.tm-pause:focus-visible{color:var(--ink);border-color:var(--ink)}
/* Capped narrower than one list (~1240px at desktop sizes) so the second copy
   always covers the viewport; wider and a gap opens before the loop resets. */
.tm-marquee{max-width:1180px;margin:0 auto;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tm-track{display:flex;width:max-content;animation:tm-scroll 40s linear infinite}
.tm-marquee:hover .tm-track,.tm-marquee.is-paused .tm-track{animation-play-state:paused}
.tm-logos{display:flex;gap:44px;margin:0;padding:0 22px;list-style:none}
.tm-logos li{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:.92rem;font-weight:600;white-space:nowrap}
.tm-logos img{width:80px;height:80px;border-radius:19px;box-shadow:0 1px 2px rgba(21,23,26,.08),0 0 0 1px rgba(21,23,26,.06)}
@keyframes tm-scroll{to{transform:translateX(-50%)}}

/* No motion: one wrapped, centered grid instead of a moving strip. */
@media (prefers-reduced-motion:reduce){
  .tm-marquee{-webkit-mask-image:none;mask-image:none}
  .tm-track{animation:none;width:auto;justify-content:center}
  .tm-logos{flex-wrap:wrap;justify-content:center;gap:28px 36px}
  .tm-logos[aria-hidden],.tm-pause{display:none}
}

@media (max-width:900px){
  .tm-pair{grid-template-columns:1fr;gap:48px}
  .tm-pair+.tm-pair{margin-top:48px}
  .tm-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .tm-hero{padding-bottom:40px}
  .tm-photo{padding:6px;border-radius:16px}
  .tm-photo img{aspect-ratio:4/3;border-radius:11px}
  .tm-featured{padding:56px 0}
  .tm-pull{margin:56px auto}
  .tm-grid{grid-template-columns:1fr;gap:12px}
  .tm-card{padding:22px 20px 20px}
  .tm-logos{gap:28px;padding:0 14px}
  .tm-logos img{width:64px;height:64px;border-radius:15px}
}

/* Closing CTA: button sits at the card's right edge and is larger than the
   shared home.css .cta-card button. Mobile keeps home.css's full-width stretch. */
.tm-cta .cta-actions{align-items:flex-end}
.tm-cta .btn{font-size:1.08rem;padding:18px 34px}
@media (max-width:900px){.tm-cta .cta-actions{align-items:flex-start}}
@media (max-width:640px){.tm-cta .cta-actions{align-items:stretch}.tm-cta .btn{padding:16px 24px}}

/* A pull quote that runs a full sentence or more needs a smaller size than the
   short one-liner (John Wang) the base .tm-pull is set for. */
.tm-pull--long blockquote{font-size:clamp(1.5rem,3.3vw,2.4rem);line-height:1.3}