/* Reviews — Figma 10007:22253 (884px tall at 1728) */
.reviews {
  --rv-pad: clamp(56px, calc(100 / 1728 * 100vw), 100px);
  /* left edge of .inner content = scroll track start */
  --rv-edge: max(var(--gutter), calc((100% - 1440px) / 2));
  padding: var(--rv-pad) 0;
}
.reviews-glow { position: absolute; left: calc(26.1% - 808px); top: -393px; width: 1616px; height: 1613px; pointer-events: none; }
.reviews .inner { position: relative; }
.reviews-title {
  font-size: clamp(38px, calc(54.74 / 1728 * 100vw), 54.74px);
  line-height: 1.2057; /* 66px box at 54.74 */
  color: var(--text-primary);
  margin-left: -1px; /* Figma x=143 */
}
.reviews-nav { display: flex; gap: 10.353px; align-items: center; margin-top: var(--rv-pad); }
.reviews-nav-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 7.156px; cursor: pointer;
  background: rgba(255,255,255,0.4); border: 1.294px solid var(--border-default); border-radius: 123.7px;
  transition: opacity .2s;
}
.reviews-nav-btn img { width: 29.6879px; height: 29.6879px; }
.reviews-nav-btn:disabled { cursor: default; } /* no dimming: Figma shows both arrows equal */
.reviews-nav-btn:focus-visible { outline: 2px solid var(--brand-dark-green); outline-offset: 2px; }
.reviews-next img { transform: scaleX(-1); }

/* Horizontally scrollable track; first card aligned with the gutter */
.reviews-row {
  position: relative;
  display: flex; gap: 34px; align-items: center;
  margin-top: 28px;
  padding: 0 var(--rv-edge);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--rv-edge);
  scrollbar-width: none;
}
.reviews-row::-webkit-scrollbar { display: none; }
.reviews-row:focus-visible { outline: 2px solid var(--brand-dark-green); outline-offset: 4px; }
.reviews-card {
  flex: 0 0 450px; display: flex; flex-direction: column; gap: 96px; align-items: flex-start;
  height: 446px; padding: 40px; scroll-snap-align: start;
  background: rgba(255,255,255,0.3); border: 1px solid var(--border-default); border-radius: 10px;
  font-family: var(--font-body);
}
.reviews-card p { font-size: 22px; line-height: normal; color: var(--text-primary); }
.reviews-quote { width: 368px; max-width: 100%; height: var(--qh, auto); }
.reviews-meta { display: flex; flex-direction: column; width: 100%; }
.reviews-author { display: flex; flex-direction: column; gap: 4px; }
.reviews-name { font-weight: 700; }
.reviews-rating { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.reviews-stars { display: flex; gap: 2px; justify-content: flex-end; }
.reviews-stars img { width: 24px; height: 24px; }
.reviews-source { text-align: right; }

@media (max-width: 1199px) {
  .reviews-row { gap: 24px; }
}
/* Mobile — header 27.58px, cards per Figma 10108:4987: 292×359, 40px padding, 13.3px quote,
   15.96px name / salon / source, 15px stars (Shane feedback). */
@media (max-width: 899px) {
  .reviews-title { font-size: 27.58px; line-height: normal; }
  .reviews-nav { margin-top: 32px; }
  .reviews-row { gap: 16px; margin-top: 20px; align-items: stretch; }
  .reviews-card { flex-basis: 292px; min-width: 0; height: 359px; padding: 40px; gap: 24px; }
  .reviews-card p { font-size: 15.96px; }
  .reviews-card .reviews-quote { width: auto; height: auto; font-size: 13.3px; }
  .reviews-meta { margin-top: auto; }
  .reviews-stars { gap: 1.25px; }
  .reviews-stars img { width: 15px; height: 15px; }
}