/* ============================================================
   PLUS & MINUS — TESTIMONIALS
   Google-style review components, built on the design system.
   • .greview      — shared Google-review card (marquee, about, support)
   • .tmq          — home auto-scrolling marquee (pause on hover)
   • .tfeature     — service-page featured review
   • .tsupport     — service-page 3-up supporting grid
   • .tabout       — about-page editorial grid
   Rendered by assets/testimonials.js into [data-testimonials].
   ============================================================ */

/* ---- Shared Google-style review card ---- */
.greview {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-sm);
  padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 14px;
  text-align: left;
}
.greview-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.greview-stars { display: inline-flex; gap: 2px; color: #F5A623; }
.greview-stars svg { width: 16px; height: 16px; display: block; }
.g-logo { width: 22px; height: 22px; flex: none; display: block; }
.greview-q { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); letter-spacing: -.006em; flex: 1; text-wrap: pretty; font-weight: 450; margin: 0; }
.greview-who { display: flex; align-items: center; gap: 12px; }
.greview-av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff; letter-spacing: -.01em; }
.greview-id { min-width: 0; }
.greview-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink); letter-spacing: -.008em; }
.greview-src { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.greview-src svg { width: 13px; height: 13px; display: block; }

/* ---- HOME marquee — two-row wall (top scrolls left, bottom scrolls right) ---- */
.tmq { position: relative; margin-top: 44px; width: 100vw; left: 50%; transform: translateX(-50%); }
.tmq-mask {
  overflow: hidden;
  display: flex; flex-direction: column; gap: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tmq-row { overflow: hidden; }
.tmq-track { display: flex; width: max-content; will-change: transform; animation: tmq-scroll 64s linear infinite; }
.tmq-track.tmq-right { animation-direction: reverse; }
.tmq-track > .greview { flex: 0 0 358px; width: 358px; margin-right: 20px; }
.tmq:hover .tmq-track, .tmq:focus-within .tmq-track { animation-play-state: paused; }
@keyframes tmq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px){
  .tmq-mask { gap: 14px; }
  .tmq-track > .greview { flex-basis: 80vw; width: 80vw; margin-right: 14px; }
}
@media (prefers-reduced-motion: reduce){
  .tmq-track { animation: none; }
  .tmq-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- SERVICE PAGE: featured review (two-column: quote + author panel) ---- */
.tfeature {
  position: relative; overflow: hidden; margin-top: 40px;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-md), inset 0 0 0 1px var(--line);
  padding: clamp(30px, 4vw, 54px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(244px, 320px);
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
}
.tfeature::before {
  content: "\201C"; position: absolute; top: -.28em; left: .02em;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(140px, 17vw, 230px);
  color: color-mix(in oklab, var(--brand) 9%, transparent); pointer-events: none;
}
.tfeature > * { position: relative; }
.tfeature-q {
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2.2vw, 30px); line-height: 1.34; letter-spacing: -.018em;
  color: var(--ink); text-wrap: pretty;
}
/* Author panel — fills the right side, divided from the quote */
.tfeature-aside {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding-left: clamp(28px, 3vw, 44px);
  border-left: 1px solid var(--line);
}
.tfeature-stars { display: inline-flex; gap: 3px; color: #F5A623; }
.tfeature-stars svg { width: 20px; height: 20px; display: block; }
.tfeature-av { width: 60px; height: 60px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; }
.tfeature-id { display: flex; flex-direction: column; gap: 3px; }
.tfeature-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -.01em; }
.tfeature-role { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.tfeature-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tfeature-badge .g-logo { width: 18px; height: 18px; }
@media (max-width: 820px){
  .tfeature { grid-template-columns: 1fr; gap: 26px; align-items: stretch; }
  .tfeature-aside {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px;
    padding-left: 0; padding-top: 24px;
    border-left: 0; border-top: 1px solid var(--line);
  }
  .tfeature-aside .tfeature-stars { order: -1; flex-basis: 100%; }
  .tfeature-badge { margin-left: auto; }
}

/* ---- SERVICE PAGE: 3-up supporting ---- */
.tsupport { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
@media (max-width: 860px){ .tsupport { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .tsupport { grid-template-columns: 1fr; } }

/* ---- ABOUT: editorial grid ---- */
.tabout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; align-items: stretch; }
@media (max-width: 980px){ .tabout { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .tabout { grid-template-columns: 1fr; } }