/* #clients: "Teams we helped. What they decided." Client testimonials in an endless carousel.
 * Every card has the same layers: logo and type of work, the quote in the company's voice with its name under it,
 * "What Validator did" in one line, the result (a big number or a decision), and a small plate that shows it.
 * One spectrum colour per card; the first NUDA card is the main story (wider, gradient border, red glow).
 * With JS (.cl-loop) the track is full bleed, cards snap to the centre and section.js clones the set before and after
 * so it runs in both directions; without JS it is a plain horizontal scroll that starts at card 1.
 * Plate motion plays once per card when it is on screen (.is-play); the drawn end state is the default, so no JS,
 * no IntersectionObserver and reduced motion all show the final picture. */

/* ---------- Track ---------- */
#clients .cl-track{--off:max(var(--gutter),calc((100% - 1152px) / 2));--fade:clamp(14px,5vw,96px);position:relative;display:flex;align-items:stretch;gap:24px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--off);padding:12px var(--off) 32px;scrollbar-width:none}
#clients .cl-track::-webkit-scrollbar{display:none}
#clients .cl-track:focus-visible{outline:2px solid var(--blue-ink);outline-offset:-2px;border-radius:14px}
#clients.cl-loop .cl-track{padding-inline:0;scroll-padding-inline:0;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
#clients.cl-drag .cl-track{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}
#clients.cl-drag .cl{pointer-events:none}

/* ---------- Card skeleton ---------- */
#clients .cl{--tint:color-mix(in srgb,var(--c) 13%,transparent);flex:0 0 min(448px,calc(100% - 56px));display:flex;flex-direction:column;padding:24px 26px 24px;scroll-snap-align:start}
#clients.cl-loop .cl{scroll-snap-align:center}
#clients .cl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
#clients .cl-name{display:flex;align-items:center;gap:11px;min-width:0;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
#clients .cl-logo{flex:none;-webkit-user-drag:none}
#clients .cl-logo.is-wide{width:auto;height:28px}
#clients .cl-logo.is-sq{width:34px;height:34px;border-radius:9px;box-shadow:0 0 0 1px rgba(12,21,41,.06),0 6px 14px -8px rgba(12,21,41,.35)}
#clients .cl-logo.is-mark{width:32px;height:32px}
#clients .cl-tag{flex:none;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:#fff;
  border:1px solid color-mix(in srgb,var(--c) 40%,#e2e8f0);font-size:14px;font-weight:500;line-height:1;color:var(--body);white-space:nowrap}
#clients .cl-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}

/* Quote: the company's voice, the biggest text on the card */
#clients .cl-quote{margin:22px 0 22px}
#clients .cl-quote blockquote{margin:0}
#clients .cl-quote p{font-size:19px;font-weight:500;line-height:1.5;letter-spacing:-.014em;color:var(--ink);text-wrap:pretty}
#clients .cl-quote.is-short p{font-size:26px;font-weight:600;line-height:1.25;letter-spacing:-.026em;text-wrap:balance}
#clients .cl-quote figcaption{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;font-weight:600;line-height:1.4;color:var(--ink)}
#clients .cl-quote figcaption::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--c)}

/* What Validator did: one line, pinned so the evidence part lines up across cards */
#clients .cl-did{margin-top:auto;padding-top:18px;border-top:1px solid var(--line-soft);font-size:15px;line-height:1.55;color:var(--body)}
#clients .cl-did b,#clients .cl-k{display:block;margin-bottom:4px;font-size:14px;font-weight:600;line-height:1.4;color:var(--muted)}

/* Result: a big number with its meaning, then the decision */
#clients .cl-res{margin-top:18px}
#clients .cl-big{font-size:48px;font-weight:600;line-height:1;letter-spacing:-.045em;color:var(--ci);white-space:nowrap}
#clients .cl-num{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:4px}
#clients .cl-num span{flex:1 1 15ch;font-size:15px;line-height:1.5;color:var(--body)}
#clients .cl-dec{position:relative;margin-top:14px;padding-left:30px;font-size:15px;font-weight:500;line-height:1.5;color:var(--ink)}
#clients .cl-dec::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--c) 22%,#fff)}
#clients .cl-dec::after{content:"";position:absolute;left:7.5px;top:4.5px;width:4.5px;height:9px;border-right:2px solid var(--ci);border-bottom:2px solid var(--ci);transform:rotate(45deg)}
#clients .cl-dec.is-lead{margin-top:6px;font-size:17px;font-weight:600;line-height:1.45;letter-spacing:-.012em}
#clients .cl-dec.is-lead::before{top:3px}
#clients .cl-dec.is-lead::after{top:6.5px}
#clients .cl-dec a{white-space:nowrap;text-decoration:underline;text-decoration-color:#cfd6df;text-underline-offset:4px;transition:text-decoration-color .2s}
#clients .cl-dec a:hover{text-decoration-color:var(--ink)}

/* Main story: wider, gradient border at rest, a soft red glow, three numbers */
#clients .cl-hero{flex-basis:min(528px,calc(100% - 56px))}
#clients .cl-hero .cl-quote p{font-size:20.5px}
#clients .cl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:6px}
#clients .cl-stat .cl-big{font-size:36px}
#clients .cl-stat small{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:var(--body)}
#clients .cl-stat + .cl-stat{padding-left:16px;border-left:1px solid var(--line-soft)}
#clients .cl-stat.is-up .cl-big{color:var(--green-ink)}

/* ---------- Plate: the visual that supports the result ---------- */
#clients .cl-plate{margin-top:20px;padding:14px 18px;border-radius:14px;border:1px solid var(--line-soft);
  background:radial-gradient(110% 120% at 0% 0%,var(--tint),transparent 62%),linear-gradient(180deg,#fff,#fbfcfd)}
#clients .cl-viz{position:relative;height:96px}
#clients .cl-viz em{font-size:14px;font-style:normal;font-weight:500;line-height:1.4;color:var(--body);white-space:nowrap}

/* Plate 1: 33 runs pile up at the decline step, none reach the finish */
#clients .v-wall{display:flex;align-items:center;padding-bottom:26px}
#clients .vw-dots{display:flex;gap:5px;flex:none}
#clients .vw-dots b{display:grid;gap:5px;opacity:calc(.42 + var(--k) * .058)}
#clients .vw-dots i{width:8px;height:8px;border-radius:50%;background:var(--red)}
#clients .vw-gate{position:relative;flex:none;width:2px;height:56px;margin-left:10px}
#clients .vw-gate::before{content:"";position:absolute;inset:0;border-radius:2px;background:repeating-linear-gradient(180deg,var(--red) 0 5px,transparent 5px 9px);transform-origin:50% 50%}
#clients .vw-gate em,#clients .vw-end em{position:absolute;left:50%;transform:translateX(-50%)}
#clients .vw-gate em{top:calc(100% + 4px)}
#clients .vw-lane{flex:1 1 auto;min-width:18px;height:2px;margin:0 8px;background:repeating-linear-gradient(90deg,#d5dce5 0 6px,transparent 6px 11px)}
#clients .vw-end{position:relative;flex:none;width:42px;height:42px}
#clients .vw-end b{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:1.5px dashed #c5cdd8;background:#fff;font-size:16px;font-weight:600;color:var(--body)}
#clients .vw-end em{top:calc(100% + 11px)}

/* Plate 2: personas answer, an offer takes shape */
#clients .v-offer{display:flex;align-items:flex-start;gap:12px}
#clients .vo-col{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
#clients .vo-ppl{height:66px;display:grid;grid-template-columns:repeat(3,22px);gap:6px;align-content:center}
#clients .vo-ppl i{width:22px;height:22px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--green) 60%,#fff);
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--green) 75%,#fff) 0 4px,transparent 4.6px),color-mix(in srgb,var(--green) 14%,#fff)}
#clients .vo-arr{position:relative;flex:1 1 auto;min-width:28px;height:2px;margin-top:32px;background:repeating-linear-gradient(90deg,var(--green) 0 5px,transparent 5px 10px)}
#clients .vo-arr::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:2px solid var(--green);border-right:2px solid var(--green);transform:rotate(45deg)}
#clients .vo-doc{position:relative;width:58px;height:66px;padding:11px 10px;border-radius:10px;background:#fff;border:1px solid #dfe5ec;box-shadow:var(--sh);display:grid;gap:7px;align-content:start}
#clients .vo-doc i{display:block;height:6px;border-radius:3px;background:color-mix(in srgb,var(--green) 40%,#fff);transform-origin:0 50%}
#clients .vo-doc i:nth-child(2){width:78%}
#clients .vo-doc i:nth-child(3){width:58%}
#clients .vo-doc b{position:absolute;right:-9px;bottom:-9px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px #fff}
#clients .vo-doc svg,#clients .vn-ok svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Plate 3: a name is struck out for a reason, the new one holds */
#clients .v-name{display:flex;align-items:center;gap:10px;padding-top:32px}
#clients .vn-bad,#clients .vn-ok{position:relative;flex:none;display:inline-flex;align-items:center;height:48px;border-radius:12px;background:#fff;font-size:19px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
#clients .vn-bad{padding:0 14px;border:1.5px dashed color-mix(in srgb,var(--red) 45%,#fff);color:var(--muted)}
#clients .vn-bad s{position:absolute;left:9px;right:9px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--red);transform-origin:0 50%}
#clients .vn-bad em{position:absolute;left:0;bottom:calc(100% + 8px);display:inline-flex;align-items:center;gap:6px;color:var(--red-ink)}
#clients .vn-bad em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
#clients .vn-arr{position:relative;flex:none;width:24px;height:2px;background:#c5cdd8}
#clients .vn-arr::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:2px solid #c5cdd8;border-right:2px solid #c5cdd8;transform:rotate(45deg)}
#clients .vn-ok{gap:9px;padding:0 10px 0 14px;border:1.5px solid #e8cf5a;color:var(--ink);box-shadow:0 12px 26px -16px rgba(224,185,42,.7)}
#clients .vn-ok b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--yellow)}
#clients .vn-ok svg{stroke:var(--yellow-ink)}

/* Plate 4: 101 problems, 59 of them hit 3 or more simulated customers */
#clients .v-bar{display:grid;align-content:center;gap:8px}
#clients .vb-key{display:inline-flex;align-items:center;gap:8px}
#clients .vb-key::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--orange)}
#clients .vb-bar{position:relative;display:block;height:28px;border-radius:6px;background:#e3e9f0;overflow:hidden;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(100% / 101 - 1px),transparent calc(100% / 101 - 1px) calc(100% / 101));
  mask-image:repeating-linear-gradient(90deg,#000 0 calc(100% / 101 - 1px),transparent calc(100% / 101 - 1px) calc(100% / 101))}
#clients .vb-bar i{position:absolute;left:0;top:0;bottom:0;width:58.42%;background:var(--orange);transform-origin:0 50%}
#clients .vb-scale{position:relative;display:block;height:20px}
#clients .vb-scale em{position:absolute;top:0;right:0}
#clients .vb-scale .vb-59{right:auto;left:58.42%;transform:translateX(-50%);color:var(--orange-ink);font-weight:600}

/* Plate 5: "Premium" reads as paid, Patron Extra wins every group */
#clients .v-grp{display:grid;align-content:center;gap:12px}
#clients .vg-row{display:flex;align-items:center;gap:10px}
#clients .vg-chip{flex:none;display:inline-flex;align-items:center;height:38px;padding:0 13px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
#clients .vg-chip.is-no{color:var(--muted);border:1.5px dashed #c5cdd8}
#clients .vg-chip.is-yes{color:var(--ink);border:1.5px solid color-mix(in srgb,var(--blue) 60%,#fff);box-shadow:0 10px 22px -14px rgba(82,168,212,.75)}
#clients .vg-says{display:inline-flex;align-items:center;gap:8px;color:var(--red-ink)}
#clients .vg-says::before{content:"";width:14px;height:1.5px;background:#c5cdd8}
#clients .vg-checks{display:flex;gap:5px}
#clients .vg-checks i{position:relative;width:20px;height:20px;border-radius:50%;background:var(--blue)}
#clients .vg-checks i::after{content:"";position:absolute;left:7px;top:4.5px;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}

/* Plate 6: a busy page becomes a simple one */
#clients .v-pages{display:flex;align-items:flex-start;gap:14px}
#clients .vp-col{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
#clients .vp-pg{width:72px;height:66px;padding:8px 9px;border-radius:9px;background:#fff;border:1px solid #dfe5ec;box-shadow:var(--sh);display:grid;gap:4px;align-content:start}
#clients .vp-pg i{display:block;height:5px;border-radius:3px;background:#e3e9f0;transform-origin:0 50%}
#clients .is-before i:nth-child(1){width:70%}#clients .is-before i:nth-child(3){width:86%}#clients .is-before i:nth-child(5){width:62%}#clients .is-before i:nth-child(6){width:92%}
#clients .is-after{gap:6px}
#clients .is-after i:nth-child(1){height:8px;width:74%;background:#cfd6df}
#clients .is-after i:nth-child(3){width:70%}
#clients .is-after b{display:block;width:58%;height:12px;margin-top:4px;border-radius:6px;background:var(--grad);transform-origin:0 50%}
#clients .vp-arr{position:relative;flex:none;width:34px;height:2px;margin-top:32px;background:var(--grad)}
#clients .vp-arr::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg)}

/* ---------- Controls and CTA ---------- */
#clients .cl-foot{margin-top:4px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 32px}
#clients:not(.cl-js) .cl-nav{display:none}
#clients .cl-nav{display:flex;align-items:center;gap:14px}
#clients .cl-btn{appearance:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh);transition:background-color .25s,color .25s}
#clients .cl-btn:hover{background:var(--ink);color:#fff}
#clients .cl-btn:focus-visible{border-radius:50%}
#clients .cl-dots{display:flex;align-items:center}
#clients .cl-dots button{appearance:none;display:grid;place-items:center;width:18px;height:28px;padding:0;border:0;background:none;cursor:pointer;transition:width .3s var(--ease)}
#clients .cl-dots button::before{content:"";width:8px;height:8px;border-radius:4px;background:#d5dbe4;transition:width .3s var(--ease),background-color .3s}
#clients .cl-dots button:hover::before{background:#b9c2ce}
#clients .cl-dots button[aria-current="true"]{width:36px}
#clients .cl-dots button[aria-current="true"]::before{width:26px;background:var(--grad)}
#clients .cl-cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-left:auto}
#clients .cl-alt{font-size:15px;font-weight:500;color:var(--ink)}

/* ---------- Process motion (armed by section.js, played per card with .is-play) ---------- */
#clients .vw-gate::before{transition:transform .5s var(--ease) .2s}
#clients .vw-dots b{transition:opacity .45s ease calc(.6s + (10 - var(--k)) * 55ms),transform .75s var(--ease) calc(.6s + (10 - var(--k)) * 55ms)}
#clients .vw-end b{transition:opacity .4s ease 1.7s,transform .5s var(--spring) 1.7s}
#clients .vo-ppl i{transition:opacity .35s ease calc(.2s + var(--k) * 80ms),transform .45s var(--spring) calc(.2s + var(--k) * 80ms)}
#clients .vo-doc i{transition:transform .55s var(--ease) calc(.9s + var(--k) * .2s)}
#clients .vo-doc b{transition:opacity .3s ease 1.7s,transform .45s var(--spring) 1.7s}
#clients .vn-bad s{transition:transform .6s cubic-bezier(.45,.05,.25,1) .5s}
#clients .vn-bad em{transition:opacity .4s ease 1s}
#clients .vn-arr,#clients .vn-ok{transition:opacity .45s ease 1.35s,transform .6s var(--ease) 1.35s}
#clients .vn-ok b{transition:opacity .3s ease 1.8s,transform .45s var(--spring) 1.8s}
#clients .vb-bar i{transition:transform 1.2s var(--ease) .4s}
#clients .vg-says{transition:opacity .4s ease .4s,transform .5s var(--ease) .4s}
#clients .vg-checks i{transition:opacity .3s ease calc(.9s + var(--k) * .16s),transform .45s var(--spring) calc(.9s + var(--k) * .16s)}
#clients .is-after i{transition:transform .5s var(--ease) calc(.5s + var(--k) * .18s)}
#clients .is-after b{transition:opacity .35s ease 1.2s,transform .5s var(--spring) 1.2s}

#clients.cl-armed .cl:not(.is-play) .vw-gate::before{transform:scaleY(0)}
#clients.cl-armed .cl:not(.is-play) .vw-dots b{opacity:0;transform:translateX(-30px)}
#clients.cl-armed .cl:not(.is-play) .vw-end b{opacity:.3;transform:scale(.8)}
#clients.cl-armed .cl:not(.is-play) .vo-ppl i{opacity:0;transform:scale(.5)}
#clients.cl-armed .cl:not(.is-play) .vo-doc i{transform:scaleX(0)}
#clients.cl-armed .cl:not(.is-play) .vo-doc b{opacity:0;transform:scale(.4)}
#clients.cl-armed .cl:not(.is-play) .vn-bad s{transform:scaleX(0)}
#clients.cl-armed .cl:not(.is-play) .vn-bad em{opacity:0}
#clients.cl-armed .cl:not(.is-play) :is(.vn-arr,.vn-ok){opacity:0;transform:translateX(-8px)}
#clients.cl-armed .cl:not(.is-play) .vn-ok b{opacity:0;transform:scale(.4)}
#clients.cl-armed .cl:not(.is-play) .vb-bar i{transform:scaleX(0)}
#clients.cl-armed .cl:not(.is-play) .vg-says{opacity:0;transform:translateX(-6px)}
#clients.cl-armed .cl:not(.is-play) .vg-checks i{opacity:0;transform:scale(.4)}
#clients.cl-armed .cl:not(.is-play) .is-after i{transform:scaleX(0)}
#clients.cl-armed .cl:not(.is-play) .is-after b{opacity:0;transform:scale(.6)}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  #clients .cl-track{gap:14px;padding-bottom:26px}
  #clients.cl-loop .cl-track{--fade:8px}
  #clients .cl{padding:20px 20px 22px}
  #clients .cl-quote{margin:18px 0 20px}
  #clients .cl-quote p,#clients .cl-hero .cl-quote p{font-size:17px;line-height:1.5}
  #clients .cl-quote.is-short p{font-size:22px}
  #clients .cl-big{font-size:42px}
  #clients .cl-dec.is-lead{font-size:16px}
  #clients .cl-stats{grid-template-columns:1fr;gap:10px}
  #clients .cl-stat{display:flex;align-items:center;gap:14px}
  #clients .cl-stat .cl-big{flex:none;min-width:118px;font-size:30px}
  #clients .cl-stat small{margin-top:0}
  #clients .cl-stat + .cl-stat{padding:10px 0 0;border-left:0;border-top:1px solid var(--line-soft)}
  #clients .cl-plate{padding:12px 14px}
  #clients .cl-foot{flex-direction:column;align-items:stretch;gap:22px}
  #clients .cl-nav{justify-content:center}
  #clients .cl-cta{margin-left:0;flex-direction:column-reverse;align-items:stretch;gap:14px}
  #clients .cl-cta .pill{justify-content:center}
  #clients .cl-alt{align-self:center}
}
@media (max-width:380px){
  #clients .cl,#clients .cl-hero{flex-basis:calc(100% - 36px)}
  #clients .cl{padding:18px 16px 20px}
  #clients .cl-tag{padding:0 10px 0 9px}
  #clients .cl-stat .cl-big{min-width:104px;font-size:27px}
  #clients .v-name{gap:8px}
  #clients .vn-bad,#clients .vn-ok{font-size:17px}
  #clients .vn-bad{padding:0 11px}
  #clients .vn-ok{padding:0 9px 0 11px}
  #clients .vn-arr{width:18px}
  #clients .vg-chip{font-size:14px;padding:0 11px}
  #clients .vg-checks{gap:4px}
  #clients .vg-checks i{width:16px;height:16px}
  #clients .vg-checks i::after{left:5.5px;top:3px;width:3.5px;height:7px}
}
/* Reduced motion: section.js never arms the plates and scrolls without smoothing; base.css removes transitions. */

/* the card in the middle of the view is the highlighted one, the others only on hover */
#clients .cl.is-current::after{opacity:1}
#clients .cl.is-current{box-shadow:var(--sh),0 34px 64px -44px color-mix(in srgb,var(--c) 60%,transparent)}

/* ---------- Phones (21 Oct 2026): same cards and plates, tighter type and spacing so the row is shorter ---------- */
@media (max-width:640px){
  #clients .cl-track{padding-top:8px;padding-bottom:20px}
  #clients .cl{padding:18px 18px 20px}
  #clients .cl-quote{margin:14px 0 16px}
  #clients .cl-quote p,#clients .cl-hero .cl-quote p{font-size:16px;line-height:1.5}
  #clients .cl-quote.is-short p{font-size:21px}
  #clients .cl-quote figcaption{margin-top:10px}
  #clients .cl-did{padding-top:14px;font-size:14.5px;line-height:1.5}
  #clients .cl-did b,#clients .cl-k{margin-bottom:2px;font-size:13.5px}
  #clients .cl-res{margin-top:14px}
  #clients .cl-big{font-size:36px}
  #clients .cl-num span{font-size:14.5px}
  #clients .cl-dec{margin-top:10px;font-size:14.5px}
  #clients .cl-stats{gap:8px}
  #clients .cl-stat .cl-big{font-size:28px}
  #clients .cl-stat + .cl-stat{padding-top:8px}
  #clients .cl-plate{margin-top:14px;padding:10px 12px}
  #clients .cl-foot{gap:16px}
  #clients .cl-cta{gap:10px}
}
@media (max-width:380px){
  #clients .cl{padding:18px 16px 20px}
  #clients .cl-stat .cl-big{font-size:26px}
}