/* ============================================================
   customer reviews
   ============================================================ */
/* this one closes with its own bottom: the benefits strip below opens on a
   rule, and with no padding here that rule landed on the closing link's own
   underline — two lines in the same place reading as one heavy one */
.rev{padding-block:var(--space-lg)}
/* the score sits inside the reviews block: it is social proof, not a service promise */
.rev__sum{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(20px,3vw,48px);flex-wrap:wrap;
  margin-top:clamp(22px,2.4vw,34px);
}
.rev__i{display:grid;gap:7px}
.rev__i b{font-family:var(--display);font-weight:300;font-size:clamp(2.4rem,3.4vw,3rem);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rev__i span{font-size:var(--t-meta);color:var(--ink-45);display:inline-flex;align-items:center;gap:9px}
.rev__stars{font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--ink)}
.rev__i--end{text-align:right;justify-items:end}

/* The divider system. One colour, one weight, one declaration — the frame on
   top, the rule under every row and the rules between the columns all come
   from here, so they cannot drift apart.
   The weight is measured, not guessed: over the page's #FCFAF7 this renders
   at about #C9C7C3, roughly 50 units of luminance below the background. The
   site's own --line (16% ink) sat at 37 and still read as almost nothing at
   1px once a screenshot was scaled down. */
.rev__grid{
  --rv-line-c:rgba(20,16,12,.22);
  --rv-line:1px solid var(--rv-line-c);
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:var(--rv-line);
}
/* the row's own bottom rule carries the foot of the grid, so there is never a
   second line doubled under the last row */
.rv{
  padding:clamp(28px,2.6vw,44px) clamp(28px,2.5vw,44px);
  border-bottom:var(--rv-line);
  display:grid;gap:18px;align-content:start;
}
/* on the card box, not on its content, so the rule runs the full height of the
   row however short the quote beside it is */
.rv + .rv{border-left:var(--rv-line)}
/* the outer cards drop only their outer padding, where the page gutter already
   gives the text its air — the text never touches a rule */
.rv:first-child{padding-left:0}
.rv:last-child{padding-right:0}
.rv__stars{color:var(--ink);font-size:11px;letter-spacing:.22em}
.rv__q{font-family:var(--display);font-weight:300;font-size:clamp(1.125rem,1.55vw,1.5rem);line-height:1.3;letter-spacing:-.01em}
.rv__who{display:flex;align-items:center;gap:13px;margin-top:4px}
.rv__who img{width:52px;height:64px;object-fit:cover;flex:none;background:var(--ivory)}
.rv__who b{display:block;font-weight:500;font-size:var(--t-meta)}
.rv__who span{display:block;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);margin-top:3px}

@media (max-width:860px){
  .rev__sum{margin-top:clamp(20px,3.4vw,28px);gap:20px}
  .rev__i b{font-size:clamp(2rem,7vw,2.5rem)}
  /* stacked on a phone, so both halves read from the same left edge */
  .rev__i--end{text-align:left;justify-items:start}
  /* one column: the vertical rules go, the frame keeps its top, and every
     card keeps the rule under it — same colour, same weight */
  .rev__grid{grid-template-columns:1fr}
  .rv{padding-inline:0}
  .rv + .rv{border-left:0}
}