/* Reviews as a marquee, homepage (owner 2026-10-11; reference design/prototypes/reviews-motion.html, option C).
   One row of all 7 reviews (20 px apart; 7 cards are wider than any screen, so nobody shows twice), its set twice (the
   second aria-hidden + inert). js/reviews.js moves it: one position in requestAnimationFrame (translate3d), wrapped by one
   set's width, drives the drift (to the left; hover slows it to 15 %), mouse drag, touch swipe (touch-action: pan-y, so
   the page still scrolls vertically), sideways trackpad swipes, momentum after release, and the ← / → buttons. Pause,
   touch-and-hold, keyboard focus, off screen and a hidden tab stop the drift. Reduced motion: no drift and no momentum.
   The section heading is unchanged. Values: tokens.css (--rv-mq-*). */
.rv-mq { position: relative; width: 100vw; margin-left: calc(50% - 50vw); display: grid; gap: var(--rv-mq-gap); padding: var(--rv-mq-lift) 0 0; overflow: hidden;   /* top: room for the hover lift */
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--c-black) var(--rv-mq-fade), var(--c-black) calc(100% - var(--rv-mq-fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, var(--c-black) var(--rv-mq-fade), var(--c-black) calc(100% - var(--rv-mq-fade)), transparent); }
.rv-mq__row { --rv-dur: var(--rv-mq-dur-1); display: flex; width: max-content; will-change: transform; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.rv-mq.is-dragging .rv-mq__row { cursor: grabbing; }
.rv-mq__row img { -webkit-user-drag: none; }

.rv-mq__card { flex: none; display: flex; flex-direction: column; width: var(--rv-mq-w); margin: 0 var(--rv-mq-gap) 0 0; padding: var(--rv-mq-pad);
  border-radius: var(--rv-mq-r); background: var(--c-grey-1a1a1b); box-shadow: inset 0 0 0 var(--bw-1) var(--rv-mq-line);
  transition: transform var(--dur-btn) var(--pg-ease), box-shadow var(--dur-hover) var(--ease-out); outline: none; }
.rv-mq__text { flex: 1 0 auto; margin: var(--sp-16) 0 var(--sp-24); font-family: var(--font-figtree); font-weight: var(--fw-light); font-size: var(--rv-mq-fs);
  line-height: var(--rv-mq-lh); color: var(--rv-mq-text); }
.rv-mq__text mark { background: none; color: var(--c-brand); font-weight: var(--fw-medium); }
.rv-mq__card .rv-card__person { align-items: center; }
/* avatar in a ring: the track always, the yellow arc draws in on hover / focus */
.rv-mq__av { position: relative; flex: none; width: var(--rv-mq-av); height: var(--rv-mq-av); }
.rv-mq__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rv-mq__ring circle { fill: none; stroke-width: 2; }
.rv-mq__track { stroke: var(--c-grey-2c2c2d); }
.rv-mq__arc { stroke: var(--c-brand); stroke-dasharray: 189; stroke-dashoffset: 189; transition: stroke-dashoffset 0.8s var(--ease-mh-wipe); }
.rv-mq__face { position: absolute; inset: var(--rv-mq-face-inset); width: calc(100% - 2 * var(--rv-mq-face-inset)); height: calc(100% - 2 * var(--rv-mq-face-inset));
  border-radius: 50%; object-fit: cover; display: block; }
@media (hover: hover) and (pointer: fine) {
  .rv-mq__card:hover { transform: translateY(calc(var(--rv-mq-lift) * -1)); box-shadow: inset 0 0 0 var(--bw-1) var(--rv-mq-line-hover); }
  .rv-mq__card:hover .rv-mq__arc { stroke-dashoffset: 0; }
}
.rv-mq__card:focus-visible { transform: translateY(calc(var(--rv-mq-lift) * -1)); box-shadow: inset 0 0 0 var(--bw-1) var(--rv-mq-line-hover), 0 0 0 var(--bw-2) var(--c-brand); }
.rv-mq__card:focus-visible .rv-mq__arc { stroke-dashoffset: 0; }

@media (max-width: 767.98px) {
  .rv-mq__card { width: var(--rv-mq-w-phone); padding: var(--rv-mq-pad-phone); }
  .rv-mq__row { --rv-dur: var(--rv-mq-dur-phone); }
  .rv-mq__text { font-size: var(--rv-mq-fs-phone); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-mq__card, .rv-mq__arc { transition: none; }
}