/* ============================================================
   CLIENT REVIEWS WALL (homepage, replaces the projects rail)
   Every quote is copied verbatim from Google. Excerpts end in an
   ellipsis exactly where the shortened text stops. No dates, by request.
   Stars are Google gold on purpose: it is the one colour a visitor
   reads as "Google review" before reading a word.
   ============================================================ */
@property --rv-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.reviews-section {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 7.5rem 2rem 6.5rem;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(59, 130, 246, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 85%, rgba(30, 64, 175, 0.18), transparent 70%),
    var(--bg-navy);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
/* Faint blueprint grid, fading out at the edges */
.reviews-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}

.reviews-inner { max-width: 1180px; margin: 0 auto; }

.reviews-head { text-align: center; margin-bottom: 3rem; }
.reviews-head .section-label { justify-content: center; }
.reviews-head .section-headline { margin: 0 auto; max-width: 40rem; }

/* ---------- Score panel ---------- */
.rv-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin: 0 auto 3.5rem;
  padding: 1.4rem 2rem;
  max-width: 44rem;
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(13, 23, 51, 0.75), rgba(7, 17, 42, 0.6));
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(2, 4, 16, 0.6) inset, 0 20px 60px -30px rgba(59, 130, 246, 0.45);
}
.rv-score-num {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3.25rem, 7vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #fff 20%, var(--brand-glow));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.rv-score-mid { display: flex; flex-direction: column; gap: 0.45rem; text-align: left; }
.rv-score-copy { font-size: 0.98rem; color: var(--text-secondary); }
.rv-score-copy strong { color: var(--text-primary); font-weight: 600; }
.rv-google-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line-bright);
  background: rgba(2, 4, 16, 0.5);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}
.rv-google-link:hover,
.rv-google-link:focus-visible {
  border-color: var(--brand-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px rgba(96, 165, 250, 0.6);
}
.rv-g { width: 18px; height: 18px; flex: none; }

/* ---------- Stars ---------- */
.rv-stars { display: inline-flex; gap: 3px; }
.rv-stars svg {
  width: 18px; height: 18px;
  fill: #fbbc04;
  filter: drop-shadow(0 0 6px rgba(251, 188, 4, 0.45));
}
.rv-score .rv-stars svg { width: 24px; height: 24px; }

/* ---------- Grid ---------- */
.rv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.rv-card--feature { grid-column: 1 / span 2; grid-row: 1 / span 2; }

.rv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.75rem 1.6rem 1.5rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(13, 23, 51, 0.92), rgba(7, 17, 42, 0.92));
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 350ms ease, box-shadow 350ms ease;
}
/* Light sweep that follows the card on hover */
.rv-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(147, 197, 253, 0.08) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 900ms ease;
  pointer-events: none;
}
.rv-card:hover { transform: translateY(-6px); border-color: rgba(96, 165, 250, 0.45); box-shadow: 0 30px 70px -35px rgba(59, 130, 246, 0.55); }
.rv-card:hover::after { transform: translateX(100%); }

.rv-quote-mark {
  position: absolute;
  top: 0.4rem; right: 1.2rem;
  font-family: var(--display);
  font-size: 6rem;
  line-height: 1;
  color: rgba(96, 165, 250, 0.12);
  pointer-events: none;
}

.rv-text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-primary);
  flex: 1;
}

.rv-person { display: flex; align-items: center; gap: 0.8rem; }
.rv-avatar {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-light), var(--brand-royal));
  box-shadow: 0 0 0 2px rgba(2, 4, 16, 0.9), 0 0 0 3px rgba(96, 165, 250, 0.35);
}
.rv-avatar--b { background: linear-gradient(135deg, #818cf8, #1e40af); }
.rv-avatar--c { background: linear-gradient(135deg, #38bdf8, #1d4ed8); }
.rv-name { font-weight: 600; font-size: 0.98rem; color: var(--text-primary); line-height: 1.25; }
.rv-source {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rv-source .rv-g { width: 12px; height: 12px; }

.rv-chip {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-glow);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(147, 197, 253, 0.28);
  background: rgba(30, 64, 175, 0.18);
}

/* ---------- Featured card: animated gradient border ---------- */
.rv-card--feature {
  padding: 2.75rem 2.6rem 2.25rem;
  border-color: transparent;
  background:
    linear-gradient(160deg, rgba(13, 23, 51, 0.97), rgba(4, 10, 28, 0.97)) padding-box,
    conic-gradient(from var(--rv-angle), rgba(96, 165, 250, 0.15), #60a5fa, rgba(147, 197, 253, 0.9), rgba(30, 64, 175, 0.2), rgba(96, 165, 250, 0.15)) border-box;
  border: 1px solid transparent;
  animation: rvSpin 7s linear infinite;
  box-shadow: 0 40px 90px -45px rgba(59, 130, 246, 0.7);
}
.rv-card--feature:hover { border-color: transparent; }
@keyframes rvSpin { to { --rv-angle: 360deg; } }
.rv-card--feature .rv-quote-mark { font-size: 10rem; top: 0.2rem; right: 2rem; color: rgba(96, 165, 250, 0.16); }
.rv-card--feature .rv-text {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
}
.rv-card--feature .rv-stars svg { width: 22px; height: 22px; }
.rv-card--feature .rv-avatar { width: 52px; height: 52px; font-size: 1.1rem; }
.rv-card--feature .rv-name { font-size: 1.08rem; }

/* ---------- Praise ticker ---------- */
.rv-ticker {
  margin-top: 3.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.rv-ticker-track {
  display: flex;
  width: max-content;
  animation: rvTicker 38s linear infinite;
}
.rv-ticker:hover .rv-ticker-track { animation-play-state: paused; }
.rv-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding-right: 1.1rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--text-secondary);
  white-space: nowrap;
}
.rv-ticker-item::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-light);
  box-shadow: 0 0 10px var(--brand-light);
}
@keyframes rvTicker { to { transform: translateX(-50%); } }

.rv-foot {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .reviews-section { padding: 5rem 1.25rem; }
  .rv-grid { grid-template-columns: 1fr 1fr; }
  .rv-card--feature { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  .rv-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .rv-score { gap: 1rem; padding: 1.25rem; text-align: center; }
  .rv-score-mid { align-items: center; text-align: center; }
  .rv-card--feature { padding: 2rem 1.5rem 1.75rem; }
  .rv-card--feature .rv-quote-mark { font-size: 7rem; right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-card--feature { animation: none; }
  .rv-ticker-track { animation: none; }
  .rv-card, .rv-card::after { transition: none; }
}