/* ============================================================
   JCS BPO — "Testimonials" page styles
   Builds on style.css + ourwork.css (shared tokens, header,
   footer, hero artistic background, reveal system, ind/trust grids).
   ============================================================ */

/* ---- Hero copy tuning ---- */
.ts-hero .hero-copy{max-width:560px}
.ts-hero .hero-copy h1{font-size:clamp(2.3rem,4.6vw,4rem)}
.ts-hero .hero-copy p.sub{max-width:540px}
/* give the image holder more room so more of the photo shows */
.ts-hero .hero-grid{grid-template-columns:.9fr 1.1fr}

/* ============ Hero figure — glassy image + lively animation ============ */
.ts-figure{position:relative}
.ts-figure::before{
  content:"";position:absolute;inset:-14%;z-index:-1;border-radius:44px;
  background:conic-gradient(from 0deg,
    color-mix(in srgb,var(--primary) 60%,transparent),
    color-mix(in srgb,var(--accent) 60%,transparent),
    color-mix(in srgb,var(--accent-2) 55%,transparent),
    color-mix(in srgb,var(--primary) 60%,transparent));
  filter:blur(50px);opacity:.5;animation:tsSpin 16s linear infinite;
}
@keyframes tsSpin{to{transform:rotate(360deg)}}

.ts-glass{
  position:relative;border-radius:28px;padding:14px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 38px 92px -34px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.28);
  animation:tsFloat 7s var(--ease) infinite;
}
@keyframes tsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.ts-glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.24) 48%,transparent 62%);
  background-size:260% 100%;animation:tsShine 6.5s ease-in-out infinite;
}
@keyframes tsShine{0%{background-position:150% 0}55%,100%{background-position:-50% 0}}
.ts-img{display:block;width:100%;height:clamp(340px,40vw,480px);border-radius:20px;overflow:hidden}

/* floating testimonial chips */
.ts-chip{
  position:absolute;z-index:3;display:flex;align-items:center;gap:.7rem;
  border-radius:15px;padding:.75rem 1rem;background:rgba(13,42,69,.82);
  border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 52px -22px rgba(0,0,0,.72);
}
.ts-chip .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--grad);color:var(--on-primary);flex:none}
.ts-chip .ic svg{width:19px;height:19px}
.ts-chip b{font-family:"Poppins",sans-serif;font-weight:600;font-size:.92rem;color:var(--heading);display:block;line-height:1.15}
.ts-chip span{font-size:.72rem;color:var(--muted)}
.ts-chip .stars{margin:0;gap:.12rem}
.ts-chip .stars svg{width:14px;height:14px}
.ts-chip-tl{top:-22px;left:-28px;animation:tsChipA 5.4s var(--ease) infinite}
.ts-chip-br{bottom:-20px;right:-26px;animation:tsChipB 6.6s var(--ease) infinite}
@keyframes tsChipA{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes tsChipB{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}

@media (prefers-reduced-motion:reduce){
  .ts-glass,.ts-figure::before,.ts-glass::after,.ts-chip-tl,.ts-chip-br{animation:none!important}
}

/* ============ Section 2 — Client testimonials ============ */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:.5rem}
.tcard2{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:2rem 1.9rem;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.tcard2:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.tcard2::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);opacity:.55}
.tcard2 .qm{position:absolute;top:1.1rem;right:1.5rem;font-family:"Poppins",sans-serif;font-weight:700;font-size:4rem;line-height:.5;color:var(--accent);opacity:.16;pointer-events:none}
.tcard2 .stars{margin-bottom:1.1rem}
.tcard2 h3{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.14rem;color:var(--heading);margin-bottom:.85rem;line-height:1.35}
.tcard2 blockquote{font-size:1rem;color:var(--text);line-height:1.62;margin:0 0 1.5rem;flex:1}
.tcard2 .tby{display:flex;align-items:center;gap:.85rem;margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--border)}
.tcard2 .tav{width:46px;height:46px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:var(--on-primary);font-family:"Poppins",sans-serif;font-weight:700;flex:none;font-size:.95rem;box-shadow:0 10px 22px -10px var(--halo)}
.tby b{font-family:"Poppins",sans-serif;font-weight:600;font-size:.96rem;color:var(--heading);display:block;line-height:1.25}
.tby span{font-size:.82rem;color:var(--muted)}

/* featured card spans two columns and reads larger */
.tcard2.is-featured{grid-column:span 2}
.tcard2.is-featured::before{height:4px;opacity:1}
.tcard2.is-featured h3{font-size:clamp(1.4rem,2.3vw,1.9rem)}
.tcard2.is-featured blockquote{font-size:clamp(1.05rem,1.5vw,1.2rem)}
.tcard2.is-featured .qm{font-size:6rem;top:1.4rem}

.trust-line{
  text-align:center;margin-top:3.2rem;font-family:"Poppins",sans-serif;font-weight:600;
  letter-spacing:.14em;color:var(--muted);text-transform:uppercase;font-size:.8rem;
}

/* ============ Logos grid ============ */
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem;margin-top:2.6rem}
.logo-tile{position:relative;aspect-ratio:16/8;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface-2)}
.logo-tile .ph,.logo-tile image-slot{position:absolute;inset:0;width:100%;height:100%}

/* ============ Final CTA tweaks ============ */
.ts-cta .hero-cta{justify-content:flex-start}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .tgrid{grid-template-columns:1fr 1fr}
  .tcard2.is-featured{grid-column:span 2}
  .logo-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:920px){
  .ts-hero .hero-grid{grid-template-columns:1fr}
  .ts-figure{display:none}
}
@media (max-width:680px){
  .tgrid{grid-template-columns:1fr}
  .tcard2.is-featured{grid-column:span 1}
  .logo-grid{grid-template-columns:repeat(2,1fr)}
}