.client-stories {
  padding: 140px 0 30px;
  background: var(--paper);
  color: var(--ink);
}
.client-stories-heading { text-align: center; padding: 0 22px; margin-bottom: 105px; }
.client-stories-heading h2 { font: 400 clamp(64px,8.2vw,140px)/.9 var(--serif); letter-spacing: -.055em; }
.client-stories-heading h2 em { display: block; }
.client-stories-heading p { margin-top: 32px; font: 14px/1.9 var(--korean); letter-spacing: -.035em; color: var(--muted); }

/* With reduced motion or no JavaScript the eight originals form a static grid. */
.review-wall {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: start;
  gap: 70px 3.5vw;
  width: min(1500px,90vw);
  margin: 0 auto;
}
.review-wall-row, .review-lane, .review-lane-track { display: contents; }
.review-tile { position: relative; min-width: 0; margin: 0; text-align: left; }
.review-photo { display: block; position: relative; width: 100%; padding: 0; cursor: zoom-in; }
.review-photo-window { display: block; width: 100%; aspect-ratio: 4/5; overflow: hidden; }
.review-photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
  user-select: none;
  -webkit-user-drag: none;
}
.review-tile figcaption { display: block; padding-top: 20px; }
.review-quote { margin: 0; font: 400 clamp(16px,1.15vw,20px)/1.85 var(--korean); letter-spacing: -.04em; word-break: keep-all; overflow-wrap: anywhere; }
.review-author { margin: 11px 0 0; font: 400 13px/1.65 var(--sans); color: var(--muted); overflow-wrap: anywhere; }

.review-flow-toggle {
  display: grid; place-items: center; width: 42px; height: 42px;
  margin: -65px max(20px, 5vw) 20px auto; padding: 0; border-radius: 50%;
  background: #e8e4de; color: var(--ink); font: 16px/1 var(--serif);
}
.review-flow-toggle:hover, .review-flow-toggle:focus-visible { background: #dfdad3; }
.review-flow-toggle[hidden] { display: none; }
.review-wall.review-loops {
  --review-gap: clamp(34px, 4.2vw, 84px);
  display: flex; flex-direction: column; gap: clamp(40px, 4.2vw, 78px);
  width: 100%; padding: 0;
}
.review-loops .review-lane { display: block; width: 100%; overflow: clip; }
.review-loops .review-lane-track { display: flex; width: max-content; align-items: flex-start; will-change: transform; }
.review-loops .review-wall-row {
  position: relative; display: flex; align-items: flex-start; gap: var(--review-gap);
  flex: none; width: max-content; padding-right: var(--review-gap);
}
.review-loops .review-tile { width: clamp(250px, 25vw, 420px); flex: none; }
.review-loops .review-photo:focus-visible { outline-offset: -3px; }

@media (max-width: 1000px) {
  .review-wall { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
  .client-stories { padding: 95px 0 20px; }
  .client-stories-heading { margin-bottom: 45px; padding: 0 17px; }
  .client-stories-heading h2 { font-size: 13vw; line-height: .97; letter-spacing: -.06em; }
  .client-stories-heading p { font-size: 12px; margin-top: 25px; }
  .review-wall { width: 90vw; gap: 44px 6vw; }
  .review-flow-toggle { display: none; }
  .review-wall.review-loops { --review-gap: clamp(18px, 5.5vw, 30px); gap: 32px; }
  .review-loops .review-tile { width: 46vw; }
  .review-tile figcaption { padding-top: 15px; }
  .review-quote { font-size: 13px; line-height: 1.75; }
  .review-author { font-size: 11px; margin-top: 9px; }
}