:root{
      --bg:#efefef;
      --muted:#bdbdbd;
      --accent:#111;
      --dot-size:12px;
    }
    html,body{height:100%;margin:0;font-family: "vonca;", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
    body{background:var(--bg); color:var(--accent); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; padding:0px 0vw;}
 
    /* layout */
    .testimonial-section{
  display:grid;
  grid-template-columns: 1fr minmax(360px, 480px);
  gap:28px;
  align-items:center;
}
 
 /* ELEMENTOR FIXES */
.tcs-elementor-root {
  width: 100%;
}

.elementor-widget-html,
.elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
}

.elementor-section,
.elementor-container {
  max-width: 100% !important;
}

.testimonial-section {
  max-width: 1200px;
  margin: 0 auto;
}

body {
  overflow-x: hidden;
}


     .collage{
  overflow: visible;
  padding-right: 40px;
}

 
    /* Left: typography & controls */
    .hero{
      padding-right:20px !important;
    }
 
    .eyebrow{
      font-size:12px;
      letter-spacing:1px;
      color:var(--muted);
      text-transform:uppercase;
      margin-bottom:18px;
      font-weight:600;
      font-family: "vonca;", sans-serif;
    }
 
    .quote{
      font-family: "vonca;", serif;
      font-weight:300;
      font-size:48px;
      line-height:1.05;
      color:var(--accent);
      margin:0 0 18px 0;
      max-width:820px;
      letter-spacing:0.4px;
    }
 
    .quote .highlight{
      font-weight:700;
      color: #0b0b0b;
    }
    /* slight muted words */
    .quote .muted{
      color: #cfcfcf;
      font-weight:400;
    }
 
    /* controller row */
    .controls{
      display:flex;
      align-items:center;
      margin-top:6px;
      gap:18px;
    }
    .nav-btn{
      width:44px;height:44px;border:none;background:#eee;display:inline-grid;place-items:center;border-radius:4px;cursor:pointer;
      box-shadow: 0 1px 0 rgba(0,0,0,0.02);
    }
    .nav-btn:active{transform:translateY(1px)}
    .person{
      display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;
    }
    .person .name{font-weight:700}
    .person .title{font-size:12px;color:var(--muted)}
 
    /* progress / dots */
    .progress{
      margin-top:18px; display:flex;align-items:center;gap:12px;
    }
    .dot-wrap{display:flex;gap:12px;align-items:center}
    .dot{
      width:var(--dot-size);height:var(--dot-size);border-radius:50%;background:#ddd;cursor:pointer;
      transition: transform .25s, background .25s;
      box-shadow:inset 0 -2px 0 rgba(0,0,0,0.03);
    }
    .dot.active{background:#111; transform: scale(1.05)}
    .progress-line{
      height:4px;width:220px;background:#ddd;border-radius:2px;overflow:hidden;
    }
    .progress-line > .bar{height:100%;width:0%;background:#111;transition:width 600ms linear}
 
    /* Right: collage */
    .collage{
      position:relative;
      height:520px;
      display:flex;align-items:center;justify-content:center;
      pointer-events:none;
    }
    .stack{
      position:relative;
      width:420px;height:420px;
      transform-origin:center;
    }
 
    .photo{
      position:absolute;
      width:360px;height:260px;object-fit:cover;
      border-radius:6px;
      box-shadow: 0 18px 30px rgba(10,10,10,0.12);
      transition: transform .6s cubic-bezier(.22,.9,.24,1), opacity .5s;
      background:#ddd;
      left: 50%;
       transform: translateX(-50%);
      transform-origin: center;
      pointer-events:auto;
    }
 
    /* two photos with offsets to mimic design */
    .photo.top{
      top:0;
      transform: translate(-5%, -6%) rotate(-14deg);
      z-index:3;
      width:320px;height:240px;
    }
    .photo.bottom{
      bottom:0;
      transform: translate(-45%, 8%) rotate(6deg);
      z-index:2;
      width:380px;height:300px;
      left: 50%;
    }
 
    /* small middle photo (crop collage) */
    .photo.mid{
      width:150px;height:110px;right:14%;top:40%;transform: translate(0,0) rotate(-4deg);z-index:4;border-radius:4px;
      box-shadow: 0 14px 24px rgba(0,0,0,.12);
    }
 
    /* Hide while switching */
    .photo.hidden{opacity:0;transform:scale(.98) translateY(10px);pointer-events:none}
 
    /* responsive */
    @media (max-width:1100px){
      .testimonial-section{grid-template-columns:1fr 420px}
      .quote{font-size:40px}
      .collage{height:440px}
    }
    @media (max-width:860px){
      .testimonial-section{grid-template-columns:1fr;gap:28px}
      .collage{order:-1;height:380px}
      .quote{font-size:30px}
      .stack{margin:0 auto}
      .photo{left:50%}
    }
    
    
    /* ELEMENTOR FIXES */
.tcs-elementor-root {
  width: 100%;
}

.elementor-widget-html,
.elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
}

.elementor-section,
.elementor-container {
  max-width: 100% !important;
}

.testimonial-section {
  max-width: 1200px;
  margin: 0 auto;
}

body {
  overflow-x: hidden;
}

/* FIX ELEMENTOR FLOW */
.testimonial-section .hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}


.testimonial-section .controls {
  width: 100% !important;
  margin-top: 24px !important;
  justify-content: flex-start !important;
}

.testimonial-section .person {
  align-items: flex-start !important;
  text-align: left !important;
}
.testimonial-section .controls {
  gap: 22px !important;
}

.testimonial-section .progress {
  margin-top: 16px !important;
}


/* ==============================
   TESTIMONIAL TYPOGRAPHY POLISH
   ============================== */

/* Section heading */
.tcs-heading {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #9a9a9a !important;
  margin-bottom: 14px !important;
}

/* Testimonial text */
.tcs-content {
  font-size: 16px !important;            /* ↓ reduced from large */
  line-height: 1.65 !important;          /* readable but compact */
  max-width: 460px !important;           /* prevents long lines */
  color: #1a1a1a !important;
  margin-bottom: 20px !important;
}

/* Quote styling (optional but classy) */
.tcs-content::before {
  content: "“" !important;
  font-size: 42px !important;
  line-height: 0 !important;
  vertical-align: -10px !important;
  color: #e5e5e5 !important;
  margin-right: 6px !important;
}

/* Customer name */
.tcs-author {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111 !important;
  margin-bottom: 2px !important;
}

/* Customer role / meta */
.tcs-meta {
  font-size: 12px !important;
  color: #8b8b8b !important;
  letter-spacing: 0.04em !important;
}

/* Navigation arrows spacing */
.tcs-nav {
  margin-top: 18px !important;
}

/* Reduce vertical gaps */
.tcs-text-wrap {
  padding: 0 !important;
  margin: 0 !important;
}

/* ==============================
   MOBILE ADJUSTMENTS
   ============================== */
@media (max-width: 768px) {
  .tcs-content {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .tcs-heading {
    font-size: 10px !;
  }
}