/* ==========================================================================
   Video testimonials — featured stage + reel of portrait tiles
   ========================================================================== */
.vt{ background:var(--ink); color:var(--paper); padding:110px 0; position:relative; overflow:hidden; }
.vt-head{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; align-items:end; margin-bottom:48px; }
.vt-head h2{ font-family:var(--font-display); font-size:clamp(2.2rem,4.6vw,3.8rem); font-weight:600; letter-spacing:-.03em; line-height:1.02; margin:0; }
.vt-head h2 span{ color:var(--lime); }
.vt-head p{ color:var(--muted-lt); line-height:1.7; margin:0; max-width:30em; }

.vt-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:stretch; }

/* stage */
.vt-stage{ display:flex; flex-direction:column; gap:22px; min-width:0; }
.vt-screen{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; background:var(--vt-bg,var(--coral)); isolation:isolate; box-shadow:0 40px 80px -40px rgba(0,0,0,.7); }
.vt-poster{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(20px,4vw,44px); color:var(--vt-fg,var(--ink)); }
.vt-poster::before{ content:attr(data-initial); position:absolute; right:-2%; bottom:-14%; font-family:var(--font-display); font-weight:700; font-size:clamp(14rem,34vw,30rem); line-height:.8; letter-spacing:-.06em; opacity:.14; z-index:-1; pointer-events:none; }
.vt-poster::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.28),transparent 45%); z-index:-1; }
.vt-result{ position:absolute; top:clamp(16px,3vw,32px); left:clamp(20px,4vw,44px); display:inline-flex; gap:8px; align-items:center; background:var(--ink); color:var(--paper); border-radius:100px; padding:8px 16px; font-size:.85rem; font-weight:600; }
.vt-result i{ color:var(--lime); }
.vt-pull{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,3.4vw,2.9rem); line-height:1.08; letter-spacing:-.025em; max-width:15em; margin:0; }
.vt-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:96px; height:96px; border-radius:50%; border:0; background:var(--ink); color:var(--lime); font-size:2.2rem; display:grid; place-items:center; cursor:pointer; transition:transform .35s var(--ease), background .25s ease, color .25s ease; z-index:2; }
.vt-play i{ margin-left:5px; }
.vt-play::before{ content:""; position:absolute; inset:-12px; border-radius:50%; border:2px solid var(--ink); opacity:.35; animation:vtPulse 2.4s ease-out infinite; }
.vt-play:hover,.vt-play:focus-visible{ transform:translate(-50%,-50%) scale(1.08); background:var(--lime); color:var(--ink); }
.vt-screen video,.vt-screen iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; z-index:3; }
.vt-screen.is-playing .vt-poster,.vt-screen.is-playing .vt-play{ display:none; }
.vt-missing{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; text-align:center; padding:24px; background:rgba(18,20,15,.88); color:var(--paper); font-size:.95rem; line-height:1.6; }
.vt-missing code{ color:var(--lime); font-family:var(--font-mono); font-size:.85rem; }
@keyframes vtPulse{ 0%{ transform:scale(.9); opacity:.45; } 100%{ transform:scale(1.35); opacity:0; } }

.vt-cap{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.vt-who b{ display:block; font-family:var(--font-display); font-size:1.3rem; font-weight:600; }
.vt-who span{ color:var(--muted-lt); font-size:.92rem; }
.vt-nav{ display:flex; gap:10px; }
.vt-nav button{ width:48px; height:48px; border-radius:50%; border:1px solid var(--ink-line); background:transparent; color:var(--paper); font-size:1.1rem; cursor:pointer; transition:background .25s ease,color .25s ease,border-color .25s ease; }
.vt-nav button:hover,.vt-nav button:focus-visible{ background:var(--lime); color:var(--ink); border-color:var(--lime); }

/* reel */
.vt-reel{ list-style:none; margin:0; padding:0; display:grid; grid-template-rows:repeat(4,1fr); gap:12px; }
.vt-tile{ width:100%; height:100%; display:grid; grid-template-columns:68px minmax(0,1fr); gap:16px; align-items:center; text-align:left; padding:10px; border-radius:var(--radius-md); border:1px solid var(--ink-line); background:var(--ink-soft); color:var(--paper); cursor:pointer; position:relative; overflow:hidden; transition:border-color .25s ease, background .25s ease; }
.vt-tile:hover{ border-color:rgba(243,245,238,.35); }
.vt-tile[aria-current="true"]{ border-color:var(--lime); background:#20241A; }
.vt-thumb{ width:68px; aspect-ratio:9/14; border-radius:12px; background:var(--vt-bg,var(--coral)); color:var(--vt-fg,var(--ink)); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.6rem; position:relative; }
.vt-thumb i{ position:absolute; right:6px; bottom:6px; width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--lime); font-size:.7rem; display:grid; place-items:center; }
.vt-tile b{ display:block; font-family:var(--font-display); font-size:1.05rem; font-weight:600; }
.vt-tile small{ display:block; color:var(--muted-lt); font-size:.82rem; margin-top:2px; }
.vt-tile em{ font-style:normal; display:block; margin-top:8px; font-size:.8rem; color:var(--lime); font-weight:600; }
.vt-bar{ position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--lime); }

.vt-foot{ margin-top:36px; display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; color:var(--muted-lt); }
.vt-foot .btn{ background:var(--lime); color:var(--ink); }

@media(max-width:1000px){
  .vt-head{ grid-template-columns:1fr; align-items:start; }
  .vt-layout{ grid-template-columns:1fr; }
  .vt-reel{ display:flex; overflow-x:auto; gap:12px; scroll-snap-type:x mandatory; padding-bottom:8px; }
  .vt-reel li{ flex:0 0 270px; scroll-snap-align:start; }
}
@media(max-width:560px){ .vt{ padding:80px 0; } .vt-play{ width:72px; height:72px; font-size:1.7rem; } }
@media(prefers-reduced-motion:reduce){ .vt-play::before{ animation:none; } .vt-play,.vt-tile{ transition:none; } }