@charset "utf-8";

/* CSS Document */

 :root{

    --cream:#faf8f2;

    --ink:#17182b;

    --ink-soft:#4a4b5c;

    --blue:#b0bfca;

    --yellow:#f8f5f2;

    --pink:#f5b9a4;

    --white:#ffffff;

    --black:#2E3F4C;

    --radius:6px;

    --gap:24px;

    --serif:  'Cormorant Garamond', ui-serif, Georgia, serif;

    --sans:  'Outfit', ui-sans-serif, system-ui, sans-serif;

  }





  .testimonials{

    padding: 88px 24px 72px;

	  background: #FFFFFF;

  }



  .carousel-wrap{

    max-width:1520px;

    margin:0 auto;

    position:relative;

  }



  /* ---------- Arrows ---------- */

  .nav-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    background:var(--black);

    border:none;

    border-radius:4px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:5;

    transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease;

  }

  .nav-btn:hover{

    background:#2a2a30;

    transform:translateY(-50%) scale(1.06);

  }

  .nav-btn:active{ transform:translateY(-50%) scale(.95); }

  .nav-btn:focus-visible{

    outline:2px solid var(--ink);

    outline-offset:3px;

  }

  .nav-btn svg{ width:22px; height:22px; }

  .nav-btn.prev{ left:-2px; }

  .nav-btn.next{ right:-2px; }



  /* ---------- Track ---------- */

  .viewport{

    overflow:hidden;

    margin:0 78px;

  }

  .track{

    display:flex;

    gap:var(--gap);

    transition: transform .55s cubic-bezier(.65,0,.35,1);

    will-change: transform;

  }

  .track.no-transition{ transition:none; }



  .card{

    flex:0 0 auto;

    border-radius:var(--radius);

    padding:44px 40px 36px;

    display:flex;

    flex-direction:column;

    min-height:400px;

    opacity:0;

    transform: translateY(18px);

    transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease;

  }

  .card.in-view{ opacity:1; transform:translateY(0); }

  .card:hover{

    box-shadow: 0 14px 30px -12px rgba(20,20,30,.28);

    transform: translateY(-4px);

  }

  .card.in-view:hover{ transform: translateY(-4px); }



  .card[data-bg="blue"]{ background:var(--blue); }

  .card[data-bg="yellow"]{ background:var(--yellow); }

  .card[data-bg="pink"]{ background:var(--pink); }



  .brand-row{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:26px;

  }

  .brand-row svg{ flex-shrink:0; }

  .brand-name{

    font-family:var(--serif);

    font-weight:700;

    font-size:17px;

    line-height:1.22;

    color:var(--ink);

  }

  .brand-script{

    font-family:'Segoe Script','Brush Script MT',cursive;

    font-size:20px;

    line-height:1.1;

    color:var(--ink);

  }

  .brand-script small{

    display:block;

    font-family:var(--sans);

    font-size:9px;

    letter-spacing:.14em;

    font-weight:600;

    margin-top:2px;

  }

  .brand-caps{

    font-family:var(--sans);

    font-weight:800;

    font-size:14px;

    letter-spacing:.02em;

    line-height:1.25;

  }



  .quote{

    font-size:15.5px;

    line-height:1.6;

    color:var(--ink);

    flex-grow:1;

  }



  .stars{

    display:flex;

    gap:4px;

    margin:22px 0 18px;

  }

  .stars svg{ width:17px; height:17px; }



  .person{

    display:flex;

    align-items:center;

    gap:14px;

  }

  .avatar-box{

    width:56px;

    height:56px;

    background:var(--white);

    border-radius:4px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:4px;

    box-shadow: 0 2px 6px rgba(0,0,0,.08);

  }

  .avatar-box svg{

    width:100%;

    height:100%;

    image-rendering: pixelated;

  }

  .person-name{

    font-weight:700;

    font-size:14.5px;

    color:var(--ink);

  }

  .person-role{

    font-size:13px;

    color:var(--ink-soft);

    margin-top:1px;

  }



  /* ---------- Dots ---------- */

  .dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:44px;

  }

  .dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:var(--black);

    opacity:.28;

    border:none;

    cursor:pointer;

    padding:0;

    transition: opacity .25s ease, transform .25s ease;

  }

  .dot:hover{ opacity:.55; }

  .dot.active{ opacity:1; transform:scale(1.15); }

  .dot:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }



  /* ---------- Responsive ---------- */

  @media (max-width: 980px){

    .viewport{ margin:0 62px; }

    .nav-btn{ width:44px; height:44px; }

    .card{ padding:36px 30px 30px; min-height:360px; }

  }



  @media (max-width: 680px){

    .testimonials{ padding:56px 16px 90px; }

    .viewport{ margin:0 0 0 0; }

    .nav-btn{

      width:40px; height:40px;

      top:auto;

      bottom:-64px;

      transform:none;

    }

    .nav-btn:hover{ transform: scale(1.06); }

    .nav-btn:active{ transform: scale(.95); }

    .nav-btn.prev{ left:calc(50% - 54px); }

    .nav-btn.next{ right:calc(50% - 54px); }

    .carousel-wrap{ padding-bottom:4px; }

    .card{ padding:32px 26px 28px; min-height:auto; }

    .quote{ font-size:15px; }

    .dots{ margin-top:20px; }

  }



  @media (prefers-reduced-motion: reduce){

    .track{ transition:none; }

    .card{ transition:none; }

    .nav-btn, .dot{ transition:none; }

  }