/* ─── what we do: rotating pull-quote(s) ──────────────────────────
   1 quote: static display.
   2+ quotes: crossfade cycle at the configured speed.
   prefers-reduced-motion: all quotes stacked, no motion. */

.what-we-do-quote-cycle {
  margin: 48px 0 0;
  padding: 24px 0 0 40px;
  position: relative;
  display: grid;
}

.what-we-do-quote-cycle::before {
  content: "\201C";              /* left double quote */
  position: absolute;
  left: -8px;
  top: -32px;
  font-family: var(--display);
  font-size: 128px;
  font-weight: 300;
  color: var(--rule);
  line-height: 1;
  pointer-events: none;
}

.what-we-do-quote-cycle > blockquote {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  opacity: 0;
  transition: opacity 800ms ease-in-out;
}

.what-we-do-quote-cycle > blockquote.active {
  opacity: 1;
}

.what-we-do-quote-cycle .quote-text {
  font-family: var(--display);
  font-weight: 350;
  font-variation-settings: "opsz" 60, "SOFT" 30;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: var(--ink);
}

.what-we-do-quote-cycle cite {
  font-family: var(--body);
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  color: var(--muted);
  margin-left: 8px;
  vertical-align: baseline;
  white-space: nowrap;
}

/* Respect reduced-motion preference: stack all quotes, no fading */
@media (prefers-reduced-motion: reduce) {
  .what-we-do-quote-cycle {
    display: block;
  }
  .what-we-do-quote-cycle > blockquote {
    opacity: 1;
    margin-bottom: 24px;
  }
  .what-we-do-quote-cycle > blockquote:last-child {
    margin-bottom: 0;
  }
}

/* Mobile: quieten the decorative glyph */
@media (max-width: 640px) {
  .what-we-do-quote-cycle {
    padding-left: 32px;
    padding-top: 32px;
  }
  .what-we-do-quote-cycle::before {
    font-size: 96px;
    top: -20px;
  }
}