/* ===========================================================
   TESTIMONIAL WALL styles
   Inherits the site design tokens (Roboto, --primary, --border,
   radii, shadows). Accent auto-adapts: royal blue under
   body.brand-invesp, Catalyst blue otherwise. Highlight uses the
   violet emphasis accent; closer tile reuses the dark-band fill.
   =========================================================== */

.tw-section {
  background: hsl(220 24% 97%);
  border-top: 1px solid hsl(220 16% 91%);
}
body.brand-invesp .tw-section { background: hsl(222 30% 96%); }

/* ----- Header ----- */
.tw-head {
  display: flex; flex-direction: column; gap: 14px;
  align-items: center; text-align: center;
  max-width: 700px; margin: 0 auto 56px;
}
.tw-h { margin: 0; }
.tw-sub { margin: 0; max-width: 580px; color: hsl(var(--muted-foreground)); }
.tw-sub strong { color: hsl(var(--foreground)); font-weight: 600; }

/* ----- Clutch verified badge ----- */
.tw-clutch {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 4px;
  padding: 9px 16px;
  background: #fff;
  border: 1px solid hsl(220 16% 88%);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px rgb(15 23 42 / .05);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.tw-clutch:hover {
  transform: translateY(-1px);
  border-color: hsl(220 16% 80%);
  box-shadow: 0 8px 20px -12px rgb(15 23 42 / .28);
}
.tw-clutch-name {
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  color: hsl(222 30% 14%);
}
.tw-clutch-score {
  font-size: 16px; font-weight: 700; color: hsl(222 30% 14%);
  display: inline-flex; align-items: baseline; gap: 1px;
}
.tw-clutch-of { font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); }
.tw-clutch .tw-stars { gap: 1px; }
.tw-clutch .tw-star { width: 19px; height: 19px; }
.tw-clutch .tw-star svg { width: 19px; height: 19px; }
.tw-clutch-meta {
  font-size: 12.5px; font-weight: 500; color: hsl(var(--muted-foreground));
  padding-left: 12px; margin-left: 2px;
  border-left: 1px solid hsl(220 16% 88%);
}
@media (max-width: 480px) {
  .tw-clutch { flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
  .tw-clutch-meta { border-left: none; padding-left: 0; }
}

/* ----- Masonry via JS columns ----- */
.tw-grid { display: flex; align-items: flex-start; gap: 20px; }
.tw-col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 20px;
}

/* ----- Card ----- */
.tw-card {
  background: #fff;
  border: 1px solid hsl(220 16% 90%);
  border-radius: var(--radius-lg);
  padding: 28px 28px 26px;
  margin: 0;
  box-shadow: 0 1px 0 hsl(220 16% 92%), 0 18px 36px -30px rgb(15 23 42 / .22);
  display: flex; flex-direction: column; gap: 16px;
  break-inside: avoid;
}

.tw-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}

/* ----- Stars (Clutch signature teal-green) ----- */
.tw-stars { display: inline-flex; gap: 2px; }
.tw-star { position: relative; display: inline-flex; width: 18px; height: 18px; }
.tw-star svg { width: 18px; height: 18px; display: block; }
.tw-star svg path { fill: currentColor; }
.tw-star-full { color: hsl(160 84% 39%); }
.tw-star-empty { color: hsl(160 24% 84%); }
.tw-star-half { color: hsl(160 24% 84%); }
.tw-star-half .tw-star-fill {
  position: absolute; inset: 0; width: 50%; overflow: hidden;
  color: hsl(160 84% 39%);
}
.tw-star-half .tw-star-fill svg { width: 18px; }

/* ----- Segment tag ----- */
.tw-seg {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  background: hsl(220 16% 95%);
  border: 1px solid hsl(220 16% 90%);
  padding: 3px 8px; border-radius: var(--radius-full);
}

/* ----- Quote ----- */
.tw-quote {
  margin: 0;
  font-size: 18px; line-height: 1.62;
  color: hsl(222 24% 17%);
  text-wrap: pretty;
}
/* Soft marker-swipe in the brand accent (violet under brand-invesp). */
.tw-mark {
  background: hsl(var(--primary) / .12);
  color: inherit;
  padding: 0.5px 2px; margin: 0 -1px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 500;
}
body.brand-invesp .tw-mark {
  background: hsl(var(--accent-warm) / .15);
  box-shadow: inset 0 -0.42em 0 hsl(var(--accent-warm) / .12);
}

/* ----- Attribution ----- */
.tw-attrib {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid hsl(220 16% 93%);
}
.tw-name { font-size: 16px; font-weight: 600; color: hsl(222 28% 14%); }
.tw-role { font-size: 14px; color: hsl(var(--muted-foreground)); }

/* ----- Closer tile (brand-colored, mirrors the page's dark bands) ----- */
.tw-closer {
  background: hsl(var(--primary));
  border: none;
  color: #fff;
  text-decoration: none;
  gap: 12px;
  padding: 28px 26px;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.brand-invesp .tw-closer {
  background: var(--inv-band-fill);
  background-color: hsl(var(--inv-band));
}
.tw-closer:hover { transform: translateY(-2px); box-shadow: 0 24px 44px -26px rgb(15 23 42 / .5); }
.tw-closer .tw-star-full { color: #fff; }
.tw-closer .tw-star-empty, .tw-closer .tw-star-half { color: hsl(0 0% 100% / .32); }
.tw-closer .tw-star-half .tw-star-fill { color: #fff; }
.tw-closer-rating { display: inline-flex; align-items: center; gap: 10px; }
.tw-closer-score { font-size: 13px; font-weight: 600; color: hsl(0 0% 100% / .85); }
.tw-closer-head { font-size: 23px; font-weight: 700; letter-spacing: -.01em; line-height: 1.22; }
.tw-closer-sub { font-size: 15px; line-height: 1.55; color: hsl(0 0% 100% / .8); }
.tw-closer-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-size: 14px; font-weight: 600; color: #fff;
}
.tw-closer-arrow { width: 18px; height: 18px; transition: transform .18s ease; }
.tw-closer:hover .tw-closer-arrow { transform: translateX(3px); }

/* ----- Show-more ----- */
.tw-more-wrap { display: flex; justify-content: center; margin-top: 36px; }

@media (max-width: 560px) {
  .tw-head { margin-bottom: 40px; }
  .tw-card { padding: 20px 20px 18px; }
}