.tfw-testimonials, .tfw-testimonials *{ box-sizing:border-box; }
.tfw-testimonials{ font-family:'Bricolage Grotesque','Inter',sans-serif; }
.tfw-testimonials .container{ max-width:1440px; margin:0 auto; padding:0 40px; }
.tfw-testimonials .section{ padding:78px 0; }
.tfw-testimonials .center-heading{ font-family:'Playfair Display',Georgia,serif; text-align:center; font-size:clamp(28px,3.4vw,36px); margin:0 0 46px; }
.tfw-testimonials .testimonial-wrap{ display:flex; align-items:center; gap:22px; }
.tfw-testimonials .arrow-btn{
  padding:10px; border-radius:50%; border:1px solid #E9E0D2; display:flex; align-items:center; justify-content:center;
  color:#0F0F0F; transition: all .2s ease; background:#fff; flex-shrink:0; cursor:pointer;
}
.tfw-testimonials .arrow-icon-img{ width:14px; height:14px; object-fit:contain; display:block; }
.tfw-testimonials .arrow-btn:hover{ background:#0F0F0F; color:#fff; border-color:#0F0F0F; }
.tfw-testimonials .testimonial-viewport{ flex:1; overflow:hidden; }
.tfw-testimonials .testimonial-track{ display:flex; will-change: transform; }
.tfw-testimonials .testimonial{ flex-shrink:0; text-align:center; display:flex; flex-direction:column; align-items:center; padding:0 20px; box-sizing:border-box; }
.tfw-testimonials .avatar{ width:125px; height:125px; border-radius:50%; object-fit:cover; margin:0 0 20px; }
.tfw-testimonials .testimonial h5{ font-family:'Playfair Display',Georgia,serif; font-size:20px; letter-spacing:.02em; margin:0 0 6px; font-weight:400; text-transform:uppercase; }
.tfw-testimonials .handle{ font-size:10px; color:#0F0F0F; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; font-weight:300; }
.tfw-testimonials .quote{ font-size:16px; font-weight:300; color:#0F0F0F; margin-bottom:14px; line-height:1.5; }
.tfw-testimonials .stars{ color:#C99E43; letter-spacing:2px; font-size:15px; filter: drop-shadow(0 8px 8px rgba(21,21,21,.15)); }

@media (max-width:980px){
  .tfw-testimonials .container{ padding:0 24px; }
  .tfw-testimonials .testimonial-track{ gap:0; }
  .tfw-testimonials .testimonial{ padding:0 12px; }
}
@media (max-width:720px){
  .tfw-testimonials .section{ padding:32px 0; } /* was 52px — matched to the tighter mobile section rhythm from Figma */
  /* Figma's mobile frame does NOT flank the whole card with the prev/next
     arrows (left edge / right edge) — it pins both arrows together at the
     top-right, level with the avatar+name row of the active testimonial.
     Take the arrow buttons out of the flex flow and pin them to the
     wrap's top-right corner instead, so the viewport can use the full
     width and the arrows sit immediately right of the client's name. */
  .tfw-testimonials .testimonial-wrap{ position:relative; align-items:flex-start; gap:0; }
  .tfw-testimonials .testimonial-viewport{ width:100%; }
  .tfw-testimonials .arrow-btn{ position:absolute; top:0; z-index:3; padding:8px; }
  .tfw-testimonials .js-testi-prev{ right:38px; }
  .tfw-testimonials .js-testi-next{ right:0; }
  .tfw-testimonials .testimonial{ flex-direction:row; flex-wrap:wrap; text-align:left; padding:0 6px; }
  .tfw-testimonials .avatar{ width:48px; height:48px; margin:0 12px 0 0; }
  /* .testi-meta groups the name + handle so they always stack as two
     lines (matching Figma) instead of running onto one line whenever
     there's enough width for both next to the avatar. Cap its width so
     a long name wraps within itself rather than growing under the
     absolutely-positioned arrows at the top-right. */
  .tfw-testimonials .testi-meta{ max-width:calc(100% - 90px); min-width:0; }
  .tfw-testimonials .testimonial h5{ font-size:16px; text-transform:none; margin-bottom:2px; }
  .tfw-testimonials .handle{ text-transform:none; letter-spacing:normal; font-size:11px; margin-bottom:0; }
  .tfw-testimonials .quote{ flex-basis:100%; text-align:left; font-size:14px; color:rgba(15,15,15,.6); margin-top:14px; }
  .tfw-testimonials .stars{ flex-basis:100%; text-align:left; font-size:12px; }
}