/* ══ (03) Kind words — homepage testimonials ══
   Headed like Visual feed (numbered label + serif heading). One quote at a
   time in a centred column that advances on its own; round outline buttons
   and dots sit underneath (buttons come from style.css).

   Colour: black type; the quote mark and the active dot are brown fills; the
   line that matters is italic on a moss-tint wash.

   Namespaced kw-. Without JS every quote renders stacked and the controls
   stay hidden. Under reduced motion nothing advances on its own. */

.kw {
  --kw-dur: 9s;                        /* how long each quote stays up */
  --kw-col: calc(60vw * 0.6);          /* 60% of the 60% centre column */

  padding: var(--space-section) 0;
  background: var(--bg);
  color: var(--text);
}

/* ── Head — same as Visual feed ── */
.kw-head { padding: 0 var(--gutter); }
.kw-head .section-label { margin-bottom: var(--sp-3); }
.kw-head .vfeed-heading { max-width: 30ch; }

/* ── Stage — one centred column ── */
.kw-stage {
  width: min(100% - 2 * var(--gutter), max(var(--kw-col), 460px));
  margin: var(--sp-16) auto 0;
}
.kw-mark { display: block; width: 36px; height: auto; color: var(--accent); margin-bottom: var(--sp-6); }

/* All quotes share one grid cell, so switching never nudges the page. */
html.js .kw-quotes { display: grid; }
html.js .kw-quote { grid-area: 1 / 1; }
html:not(.js) .kw-quote + .kw-quote { margin-top: var(--sp-12); }

.kw-quote { margin: 0; }
html.js .kw-quote {
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease), visibility 0s linear var(--dur-ui);
}
html.js .kw-quote.is-active {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur-ui) var(--ease), visibility 0s;
}

.kw-quote blockquote { margin: 0; }
.kw-quote blockquote p {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text);
  text-wrap: pretty;
}
/* The line that matters: italic on a moss-tint wash */
.kw-quote blockquote em {
  font-style: italic;
  color: var(--text);
  background: linear-gradient(transparent 50%, var(--accent-tint) 50%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Words rise in one after another when a quote comes up (JS wraps them) */
.kw-w { display: inline-block; }
html.js .kw-quote .kw-w { opacity: 0; transform: translateY(0.35em); filter: blur(4px); }
html.js .kw-quote.is-active .kw-w {
  opacity: 1; transform: none; filter: none;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease), filter var(--dur-reveal) var(--ease);
  transition-delay: calc(var(--i) * 8ms);
}

/* Attribution, under a hairline */
.kw-by {
  display: flex; flex-direction: column; gap: var(--sp-1);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-strong);
}
.kw-name {
  font-family: var(--f-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-heading-sans);
  line-height: var(--lh-snug);
}
.kw-role { font-size: var(--fs-sm); color: var(--muted); }

/* ── Arrows + dots ── */
.kw-controls {
  display: none;
  align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-7);
}
html.js .kw-controls { display: flex; }

.kw-dots { display: flex; align-items: center; gap: var(--sp-1); }
.kw-dot {
  position: relative;
  width: 24px; height: var(--tap);
  padding: 0; border: 0; background: none;
  cursor: pointer;
}
.kw-dot::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; border-radius: var(--r-pill);
  transform: translate(-50%, -50%);
  background: var(--line-strong);
  transition: background-color var(--dur-ui) var(--ease), width var(--dur-ui) var(--ease);
}
.kw-dot:hover::before { background: var(--muted); }
/* Active dot stretches into a short brown pill */
.kw-dot[aria-current="true"]::before { width: 20px; background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html.js .kw-quote .kw-w { opacity: 1; transform: none; filter: none; }
}