/* Home page figures band (18 States / 10,00,000+ Test's done / 30 Patents).
   Uses the tokens and the Hanken Grotesk font defined in site-nav.css, which every page with the nav loads.
   Dark brand-navy field over the pebble photo, white figures and words, the crimson pebble as marker.
   Background: generated soft pebble surface (assets/images/bg/stats-pebbles-1456.webp, -900.webp). */
.ps-stats{position:relative;overflow:hidden;font-family:"Hanken Grotesk",system-ui,sans-serif;color:#fff;background:var(--ink);-webkit-font-smoothing:antialiased;isolation:isolate}
.ps-stats *,.ps-stats *::before,.ps-stats *::after{box-sizing:border-box}
.ps-stats .ps-stats-bg{position:absolute;inset:0;z-index:-1;margin:0}
.ps-stats .ps-stats-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* flat ink tint: a dark brand-navy field between the light sections; the soft pebbles still show through */
.ps-stats .ps-stats-bg::after{content:"";position:absolute;inset:0;background:rgba(18,23,53,.8)}
/* same frame as the nav bar and the About section */
.ps-stats ul{list-style:none;margin:0;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;column-gap:clamp(24px,4vw,48px);padding:clamp(80px,9vw,140px) var(--frame)}
.ps-stats li{margin:0}
.ps-stats .n{display:block;font-size:clamp(56px,6.4vw,96px);font-weight:500;letter-spacing:-.045em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.ps-stats .n [data-count]{display:inline-block;text-align:left}
.ps-stats .l{display:flex;align-items:center;gap:12px;margin:18px 0 0;font-size:20px;line-height:1.4;color:#fff}
/* the pebble of the anuPath nano as the marker */
.ps-stats .l::before{content:"";flex:none;width:14px;height:16px;background:var(--accent);border-radius:var(--pebble);transform:scale(var(--pb,1))}
.ps-stats .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* motion: GSAP ScrollTrigger in index.php (scrubbed count, rise, pebble, background drift) */
@media (min-width:1200px){
  .ps-stats .ps-stats-bg img{object-position:50% 8%}
}
@media (max-width:640px){
  .ps-stats ul{grid-template-columns:1fr;justify-content:stretch;row-gap:48px}
}
@media (max-width:767px){
  .ps-stats ul{padding-top:72px;padding-bottom:72px}
  .ps-stats .n{font-size:clamp(52px,15vw,64px)}
}