/* reviews: a sticky rating summary beside a masonry wall of client cards */
.reviews2{ padding-block-end:clamp(72px,10vw,140px); }
.reviews2__head{ display:grid; gap:12px; margin-block-end:clamp(32px,5vw,56px); }
.reviews2__title{ font-size:clamp(2rem,4.2vw,3.5rem); max-inline-size:20ch; }
.rgrid{ display:grid; gap:24px; align-items:start; }
@media (min-width:1000px){ .rgrid{ grid-template-columns:minmax(300px,380px) 1fr; gap:32px; } }

/* summary */
.rsum{ position:relative; overflow:hidden; display:grid; gap:18px; padding:clamp(24px,3vw,36px); border-radius:var(--r-card); background:var(--blue); color:#fff; }
@media (min-width:1000px){ .rsum{ position:sticky; inset-block-start:calc(var(--header-h) + 16px); } }
.rsum::before{ content:""; position:absolute; inset-inline-end:-80px; inset-block-start:-80px; inline-size:240px; block-size:240px; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent); pointer-events:none; }
.rsum__score{ font-family:var(--f-display); font-weight:var(--w-d); font-size:clamp(4.5rem,9vw,6.5rem); line-height:.9; letter-spacing:-.04em; }
.rsum__score small{ font-size:.28em; font-weight:500; letter-spacing:0; opacity:.7; margin-inline-start:6px; }
.rsum__stars{ font-size:1.5rem; letter-spacing:.12em; color:#fff; }
:root[dir=rtl] .rsum__stars{ letter-spacing:0; }
.rsum__sub{ font-weight:500; color:rgba(255,255,255,.88); }
.rsum__bars{ display:grid; gap:12px; padding-block:18px 0; border-block-start:1px solid rgba(255,255,255,.22); }
.rsum__bars li{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; font-size:.875rem; color:rgba(255,255,255,.88); }
.rsum__bars b{ font-weight:700; color:#fff; }
.rsum__bar{ grid-column:1/-1; block-size:6px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden; }
.rsum__bar i{ display:block; block-size:100%; border-radius:99px; background:#fff; transform:scaleX(var(--v)); transform-origin:0 50%; }
:root[dir=rtl] .rsum__bar i{ transform-origin:100% 50%; }
.btn--white{ background:#fff; color:#181A1C; } .btn--white:hover{ background:#181A1C; color:#fff; }

/* wall */
.rcols{ columns:2 340px; column-gap:20px; }
.rc{ break-inside:avoid; margin-block-end:20px; padding:24px; display:grid; gap:14px; background:var(--card); border:1px solid var(--rule); border-radius:var(--r-card); transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .35s; }
@media (hover:hover) and (pointer:fine){ .rc:hover{ transform:translateY(-5px); border-color:var(--fg); box-shadow:0 22px 40px -26px rgba(24,26,28,.45); } }
.rc__top{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
.rc__av{ display:grid; place-items:center; inline-size:44px; block-size:44px; border-radius:50%; font-family:var(--f-display); font-weight:700; font-size:1.0625rem; }
.rc__av[data-c=b]{ background:color-mix(in srgb, var(--blue) 14%, transparent); color:var(--accent); }
.rc__av[data-c=g]{ background:color-mix(in srgb, #16A34A 16%, transparent); color:#16A34A; }
.rc__av[data-c=k]{ background:color-mix(in srgb, var(--fg) 10%, transparent); color:var(--fg); }
.rc__who{ display:grid; line-height:1.3; min-inline-size:0; }
.rc__who b{ font-weight:600; }
.rc__who small{ color:var(--muted); font-size:.8125rem; }
.rc__top time{ color:var(--muted); font-size:.8125rem; align-self:start; }
.rc__stars{ color:var(--accent); letter-spacing:.14em; font-size:1rem; }
:root[dir=rtl] .rc__stars{ letter-spacing:0; }
.rc__text{ font-size:1rem; line-height:1.7; }
.rc--accent{ background:var(--blue); border-color:var(--blue); color:#fff; }
.rc--accent .rc__who small,.rc--accent .rc__top time{ color:rgba(255,255,255,.78); }
.rc--accent .rc__stars{ color:#fff; }
.rc--accent .rc__av{ background:rgba(255,255,255,.2); color:#fff; }
.rc--accent .rc__text{ font-size:1.125rem; }
.rc--more{ display:none; }
.rwall.is-all .rc--more{ display:grid; }
.rmore{ display:flex; margin:12px auto 0; align-items:center; justify-content:center; min-block-size:50px; padding-inline:28px; border-radius:var(--r-btn); border:1.5px solid currentColor; font-weight:600; transition:background-color .2s, color .2s; }
.rmore:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.rmore__b,.rwall.is-all .rmore__a{ display:none; } .rwall.is-all .rmore__b{ display:inline; }
@media (prefers-reduced-motion:reduce){ .rc{ transition:none; } }