/* Homepage reviews section, mode "filter" (inc/home-reviews-filter.php; mock cs-work/home/homepage-reviews-filter-v2.html,
   rf.css). Loaded async (the section is far below the fold). Nothing is hidden waiting for JS; transitions <= 200 ms. */
.hrf{--navy:var(--ss-navy-section,var(--ss-navy-deep));--navy2:var(--ss-navy-card,var(--ss-navy));--line-d:var(--ss-navy-line);--gold:var(--ss-gold);--mist:var(--ss-mist);
  container-type:inline-size;background-color:var(--navy);background-image:var(--ss-glow-gold-soft);color:#fff;font-family:inherit;line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden}
.hrf *{box-sizing:border-box}
.hrf h2{margin:0;letter-spacing:-.02em;text-wrap:balance}
.hrf p,.hrf figure,.hrf blockquote{margin:0}
.hrf img{display:block;max-width:100%}
.hrf-in{max-width:1312px;margin:0 auto;padding:72px 64px 80px}
.hrf-top{text-align:center;display:grid;justify-items:center;gap:12px;margin-bottom:30px}
.hrf-eb{display:inline-block;background:var(--gold);color:var(--navy);font-size:13px;font-weight:700;line-height:1.55;padding:6px 15px;border-radius:999px}
.hrf-h2{font-size:clamp(30px,3.4vw,44px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:#fff}
.hrf-h2 span{padding-bottom:.14em;margin-bottom:-.14em;padding-right:.06em;margin-right:-.06em;color:var(--gold);background:var(--ss-gold-shine);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hrf-sub{color:var(--ss-on-navy);font-size:17px}
.hrf-sub b{color:#fff}
.hrf-pills{display:flex;justify-content:center;align-items:center;gap:10px 6px;flex-wrap:nowrap;padding:2px;margin:0 0 34px}
.hrf-grp{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.hrf-div{width:1px;height:28px;background:var(--line-d);flex:none}
.hrf-pills button{flex:none;border:1px solid var(--line-d);background:var(--navy2);color:#fff;border-radius:999px;padding:10px 15px;font-family:inherit;font-size:14px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;display:inline-flex;gap:7px;align-items:center;transition:background-color .15s,border-color .15s,color .15s;margin:0}
.hrf-pills button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.hrf-all:focus-visible,.hrf-track:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* pill row: the divider between the service and benefit groups sits at the normal 6px pill spacing (Mike 2026-09-27) */
/* slider: full-bleed track, cards snap to the centre. On load (and on every pill switch) the 3rd card is centred
   (2nd on phones) so cards peek in at BOTH viewport edges (Mike 2026-09-27): scroll-initial-target sets that before
   first paint where supported; home-reviews-filter.js sets the same offset elsewhere (a scroll offset, not a layout shift). */
.hrf-view{position:relative;margin-inline:calc(50% - 50cqw)}
.hrf-track{--cw:calc((min(100cqw,1312px) - 128px - 48px)/3);display:grid;grid-auto-flow:column;grid-auto-columns:var(--cw);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:calc(50cqw - var(--cw) / 2);padding-block:30px 8px;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-x:contain}
.hrf-track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.hrf-track{scroll-behavior:auto}}
.hrf-card{scroll-snap-align:center;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));color:#fff;border:1px solid var(--line-d);border-radius:20px;padding:24px 24px 26px;display:grid;grid-template-rows:auto auto 1fr;gap:14px;min-width:0;transition:border-color .15s}
.hrf-card:nth-child(3){scroll-initial-target:nearest}
.hrf-who{display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:center}
.hrf-av{position:relative;width:60px;height:60px}
.hrf-av>img{width:60px;height:60px;border-radius:50%;object-fit:cover;background:var(--ss-gold-soft);border:2px solid rgba(var(--ss-gold-rgb),.7)}
.hrf-src{position:absolute;right:-6px;bottom:-4px;width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.hrf-src img{width:16px;height:16px;border:0;border-radius:0;background:none;object-fit:contain}
.hrf-stars{color:var(--gold);letter-spacing:2px;font-size:14px;line-height:1}
.hrf-who b{display:block;font-size:16px;line-height:1.25;margin-top:6px;font-weight:700}
.hrf-who small{display:block;font-size:13px;color:var(--mist);line-height:1.3}
.hrf-hl{margin:0;font-size:20px;font-weight:700;line-height:1.25;color:var(--gold);letter-spacing:-.01em;min-height:2.6em}
.hrf-q{color:var(--ss-line-strong);font-size:15.5px;line-height:1.6;padding:0;border:0;font-style:normal}
.hrf-ctl{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.hrf-dots{display:flex;gap:6px}
.hrf-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);transition:background-color .2s}
.hrf-dots i.on{background:var(--gold)}
.hrf-arrs{display:flex;gap:10px;align-items:center}
.hrf-arr{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-d);background:var(--navy2);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .15s,color .15s}
.hrf-arr[aria-disabled="true"]{opacity:.45;cursor:default}
.hrf-arr svg{width:16px;height:16px}
.hrf a.hrf-all{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#fff;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px;margin-right:10px}
.hrf-all svg{width:14px;height:14px}
@container (max-width:1310px){ /* 9 pills need ~1170px of the 1184px row (1440 viewport); below that the benefit group wraps */
  .hrf-pills{flex-wrap:wrap}
  .hrf-div{display:none} /* two centred rows: the row break separates the groups (a divider would dangle at a row end) */
}
@container (max-width:760px){
  .hrf-in{padding:64px 16px 60px}
  .hrf-sub{font-size:15.5px}
  .hrf-top{text-align:left;justify-items:start}
  /* phones: all pills in one row that scrolls sideways (Mike 2026-10-01: "on mobile put these in 1 row scrollable"),
     edge to edge past the 16px gutter, benefit group | divider | service group, right-edge fade as the scroll hint */
  .hrf-pills{justify-content:flex-start;flex-wrap:nowrap;gap:6px;margin:0 -16px 30px;padding:2px 16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .hrf-pills::-webkit-scrollbar{display:none}
  .hrf-pills button{scroll-snap-align:start}
  .hrf-grp{flex-wrap:nowrap}
  .hrf-div{display:block;width:1px;height:28px;margin:0 4px}
  .hrf-track{--cw:calc(100cqw - 72px);gap:14px}
  .hrf-card:nth-child(3){scroll-initial-target:none}
  .hrf-card:nth-child(2){scroll-initial-target:nearest}
  .hrf-arrs .hrf-arr{display:none}
}

/* ---- hrf--light: white band with the navy cards kept (homepage, Mike 2026-09-28) ---- */
.hrf--light{background-color:#fff;background-image:none;color:var(--ss-ink)}
.hrf--light .hrf-h2{color:var(--ss-ink)}
.hrf--light .hrf-h2 span{padding-bottom:.14em;margin-bottom:-.14em;padding-right:.06em;margin-right:-.06em;color:var(--ss-navy);background:var(--ss-blue-shine);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hrf--light .hrf-sub{color:var(--ss-ink-2)}
.hrf--light .hrf-sub b{color:var(--ss-ink)}
.hrf--light .hrf-div{background:var(--ss-line)}
.hrf--light .hrf-pills button{background:#fff;border:1.5px solid var(--ss-on-navy);color:var(--ss-ink)}
.hrf--light .hrf-pills button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.hrf--light .hrf-card{background:var(--navy2);border-color:var(--navy2);color:#fff;box-shadow:0 10px 26px rgba(var(--ss-navy-deep-rgb),.12)}
.hrf--light .hrf-dots i{background:var(--ss-line-strong)}
.hrf--light .hrf-dots i.on{background:var(--gold)}
.hrf--light .hrf-arr{background:#fff;border-color:var(--ss-line);color:var(--ss-ink)}
.hrf--light a.hrf-all{color:var(--ss-ink)}