/* ===== Testimonials "reel": centred card deck that cycles, background follows the active card ===== */
.tm{position:relative;background:var(--tm-bg,var(--card));color:#111;transition:background-color .5s cubic-bezier(.65,0,.25,1);overflow:hidden}
.tm-inner{position:relative;height:100vh;min-height:620px;display:flex;flex-direction:column}
.tm-label{position:absolute;left:48px;top:32px;font-size:13px;color:var(--tm-ink,#111);transition:color .8s;z-index:3}
.tm-stage{position:relative;flex:1;display:grid;place-items:center;cursor:none;perspective:1400px}
.tm-card,.tm-slab{position:absolute;left:50%;top:50%;width:var(--tm-w,min(560px,42vw));aspect-ratio:5/4;margin:0;border-radius:2px;overflow:hidden;
  transform:translate(-50%,-50%) translateX(var(--x,0px)) scale(var(--s,1));z-index:var(--z,1);
  transition:transform .5s cubic-bezier(.65,0,.25,1),filter .5s cubic-bezier(.65,0,.25,1);will-change:transform}
.tm-card{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2.4vw,34px);box-sizing:border-box}
.tm-card blockquote{margin:0;font-weight:800;letter-spacing:-.035em;line-height:.98;font-size:clamp(26px,3.5vw,56px)}
.tm-card .who{margin-top:14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.tm-card.off{filter:brightness(.82)}
/* card styles (type-led, as in the reference's white and black title cards) */
.tm-card.t-white{background:var(--card);color:#0a0a0a}
.tm-card.t-black{background:#0b0b0b;color:#fff}
.tm-card.t-photo{background:#222 center/cover no-repeat;color:#fff}
.tm-card.t-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.6))}
.tm-card.t-photo > *{position:relative}
.tm-card.t-accent{background:var(--card);color:#0a0a0a;justify-content:center;align-items:center}
.tm-card.t-accent .inner{background:#111111;color:#fff;padding:clamp(18px,2vw,28px);transform:rotate(-6deg);box-shadow:0 18px 40px rgba(0,0,0,.25);max-width:62%}
.tm-card.t-accent blockquote{font-size:clamp(22px,2.6vw,40px)}
.tm-card.t-grey{background:#2b2b2d;color:#eaeaea}
.tm-slab{background:var(--slab,var(--card))}
/* caption row (reference: "(Keynote Speaking)" · description · "Book Sunny to speak") */
.tm-cap{position:relative;z-index:3;display:grid;grid-template-columns:270px 1fr auto;gap:28px;align-items:start;padding:22px calc(var(--rail,64px) + 24px) 30px 48px;font-size:14px;color:var(--tm-ink,#111);transition:color .8s}
.tm-cap p{margin:0;max-width:560px;line-height:1.55;min-height:3.1em}
.tm-cap a{color:inherit;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.tm-cap .fade{transition:opacity .2s}
.tm-cap .fade.out{opacity:0}
.tm-count{font-variant-numeric:tabular-nums;opacity:.7;margin-top:6px}
/* cursor bubble (reference: round "Watch Reel" badge that follows the pointer) */
.tm-bubble{position:fixed;left:0;top:0;z-index:90;width:76px;height:76px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;text-align:center;font-size:11.5px;font-weight:600;line-height:1.15;pointer-events:none;transform:translate(-50%,-50%) scale(0);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.tm-bubble.on{transform:translate(-50%,-50%) scale(1)}
.tm-next{position:absolute;right:calc(var(--rail,64px) + 24px);top:28px;z-index:3;background:none;border:1px solid currentColor;color:var(--tm-ink,#111);border-radius:999px;padding:8px 14px;font:600 12px/1 Inter,sans-serif;cursor:pointer;transition:color .8s}
@media (hover:none){ .tm-stage{cursor:pointer} .tm-bubble{display:none} }
@media (max-width:760px){
  .tm-inner{min-height:560px;height:88vh}
  .tm-label{left:20px;top:22px}
  .tm-next{right:20px;top:16px}
  .tm{--tm-w:76vw}
  .tm-cap{grid-template-columns:1fr;gap:10px;padding:16px 20px 26px}
}
@media (prefers-reduced-motion:reduce){ .tm,.tm-card,.tm-slab{transition:none} }

/* previous / next buttons on either side of the deck */
.tm-arrow{position:absolute;top:50%;z-index:30;width:54px;height:54px;margin-top:-27px;border-radius:50%;border:0;background:#111;color:#fff;font:600 22px/1 Inter,sans-serif;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.22);transition:transform .2s}
.tm-arrow:hover{transform:scale(1.08)}
.tm-arrow.prev{left:max(24px,calc(50% - var(--tm-w,min(560px,42vw)) / 2 - 190px))}
.tm-arrow.next{right:max(24px,calc(50% - var(--tm-w,min(560px,42vw)) / 2 - 190px))}
@media (max-width:760px){ .tm-arrow{width:44px;height:44px;margin-top:-22px;font-size:18px} .tm-arrow.prev{left:8px} .tm-arrow.next{right:8px} }