/* 02 · Quotes carousel — artboards 1a (1440), 1b (375), 1c (slides 2–5) */
#quotes{
  background:var(--cream);
  color:#17202A;
  font-family:var(--font-body);
  padding:clamp(44px,calc(36.96px + 1.878vw),64px) clamp(24px,calc(-9.8px + 9.014vw),120px) clamp(40px,calc(34.37px + 1.502vw),56px);
  overflow:hidden;
}
#quotes *,#quotes *::before,#quotes *::after{box-sizing:border-box}
#quotes .q-wrap{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(24px,calc(21.18px + .751vw),32px);
  max-width:760px;margin:0 auto;
}
#quotes .q-track{
  display:grid;width:100%;
  justify-items:center;
}
#quotes .q-slide{
  grid-area:1/1;
  margin:0;width:100%;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(24px,calc(21.18px + .751vw),32px);
  opacity:0;visibility:hidden;
}
#quotes .q-slide.is-active{opacity:1;visibility:visible}
#quotes .q-slide[hidden]{display:flex}
#quotes .q-quote{margin:0;max-width:760px}
#quotes .q-quote p{
  margin:0;text-align:center;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(21px,calc(17.127px + 1.033vw),32px);
  line-height:1.32;letter-spacing:-0.02em;color:#17202A;text-wrap:pretty;
}
#quotes .q-mark{color:#8A94A0;font-size:1.15em;line-height:1;vertical-align:-0.05em;font-style:italic}
#quotes .q-open{margin-right:4px}
#quotes .q-close{margin-left:4px}
#quotes .q-hl{color:var(--hl);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:0.18em}
#quotes .q-who{display:flex;align-items:center;gap:clamp(11px,calc(10.3px + .188vw),13px)}
#quotes .q-avatar{
  flex:none;position:relative;overflow:hidden;border-radius:50%;
  width:clamp(44px,calc(41.18px + .751vw),52px);height:clamp(44px,calc(41.18px + .751vw),52px);
}
#quotes .q-avatar img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.75);transform-origin:54% 58%}
#quotes .q-meta{display:flex;flex-direction:column;gap:2px;text-align:left}
#quotes .q-name{font-size:clamp(14px,calc(13.65px + .094vw),15px);font-weight:600;color:#17202A}
#quotes .q-city{font-size:clamp(13px,calc(12.65px + .094vw),14px);color:#6B7280}
#quotes .q-dots{display:flex;gap:5px;align-items:center;justify-content:center}
#quotes .q-dot{
  appearance:none;border:0;padding:0;margin:0;cursor:pointer;
  width:6px;height:6px;border-radius:50%;background:#D5DAE0;
  transition:width .3s ease,background-color .3s ease;
  position:relative;
}
#quotes .q-dot::before{content:"";position:absolute;inset:-9px}
#quotes .q-dot.is-active{width:21.6px;border-radius:6px;background:var(--brand)}
#quotes .q-dot:focus-visible{outline:2px solid var(--brand);outline-offset:6px}
/* arrows: not in the artboard; kept quiet at the edges */
#quotes .q-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  appearance:none;cursor:pointer;
  width:40px;height:40px;border-radius:50%;padding:0;
  background:var(--white);border:1px solid rgba(20,40,60,.12);
  color:#5B6470;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(20,40,60,.06);
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
#quotes .q-arrow svg{width:16px;height:16px}
#quotes .q-arrow:hover{color:var(--brand);box-shadow:0 4px 12px rgba(20,40,60,.12)}
#quotes .q-arrow:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
#quotes .q-prev{left:-96px}
#quotes .q-next{right:-96px}
@media (max-width:1100px){
  /* arrows sit beside the dots row, centred on it, without adding height */
  #quotes .q-arrow{width:32px;height:32px;top:auto;bottom:-13px;transform:none}
  #quotes .q-arrow svg{width:14px;height:14px}
  #quotes .q-prev{left:calc(50% - 77px)}
  #quotes .q-next{right:calc(50% - 77px)}
}
@media (prefers-reduced-motion:reduce){
  #quotes .q-slide,#quotes .q-dot{transition:none}
}

/* ---- motion (ANIM-B) ---------------------------------------------------- */
/* Ghost paragraph: an invisible clone of the quote text that carries the visible
   underline so it can be drawn with clip-path; the real span's underline is made
   transparent while a ghost exists (JS adds .has-ghost). 1:1 at rest. */
#quotes .q-quote{position:relative}
#quotes .q-ghost{position:absolute;inset:0;margin:0;pointer-events:none;user-select:none;-webkit-user-select:none}
#quotes .q-ghost,#quotes .q-ghost *{color:transparent!important}
#quotes .q-ghost .q-hl{text-decoration-color:var(--hl)}
#quotes .q-slide.has-ghost .q-quote>p:not(.q-ghost) .q-hl{text-decoration-color:transparent}

@media (prefers-reduced-motion:no-preference){
  /* slide in / out, direction-aware (root[data-dir]) */
  #quotes .q-slide.is-out{visibility:visible;pointer-events:none;animation:q-out .45s cubic-bezier(.2,.7,.2,1) both}
  #quotes .q-slide.is-enter{animation:q-in .45s cubic-bezier(.2,.7,.2,1) both}
  #quotes[data-dir="prev"] .q-slide.is-out{animation-name:q-out-rev}
  #quotes[data-dir="prev"] .q-slide.is-enter{animation-name:q-in-rev}
  #quotes .q-slide.is-enter .q-avatar{animation:q-pop .45s cubic-bezier(.34,1.56,.64,1) .3s both}
  @keyframes q-in{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
  @keyframes q-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-48px)}}
  @keyframes q-in-rev{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
  @keyframes q-out-rev{from{opacity:1;transform:none}to{opacity:0;transform:translateX(48px)}}
  @keyframes q-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
  /* autoplay progress: the active dot fills over the 6 s interval (JS toggles .q-autoplay) */
  #quotes.q-autoplay .q-dot.is-active{background:rgba(14,107,132,.32)}
  #quotes.q-autoplay .q-dot.is-active::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--brand);transform-origin:left center;transform:scaleX(0);animation:q-fill 6s linear forwards}
  @keyframes q-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}