/* ============================================================
   Client logos (include/client-logos.php) — shown above the
   footer on every page. Two auto-scrolling rows in opposite
   directions; colours and alignment are explicit because some
   pages ship bare h2/p/img rules.
   ============================================================ */

.cl-wrap{
  --cl-ink:#0a1633; --cl-muted:#5b6a86; --cl-line:#e3ebf6;
  position:relative; padding:84px 0 76px; overflow:hidden; text-align:center;
  align-self:stretch; width:100%; box-sizing:border-box; /* some pages make <body> a centred flex column */
  background:radial-gradient(800px 340px at 50% 0%, #eef5ff 0%, transparent 70%), #ffffff;
  border-top:1px solid var(--cl-line);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}
.cl-head{ max-width:820px; margin:0 auto 44px; padding:0 24px; }
.cl-wrap h2{
  margin:0; padding:0; color:var(--cl-ink); font-size:clamp(26px,3.2vw,40px); font-weight:800; line-height:1.2; letter-spacing:-.5px; text-align:center;
}
.cl-wrap h2 span{ background:linear-gradient(120deg,#0b6fe0 0%,#00a9c4 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cl-wrap h2::after{ content:''; display:block; width:72px; height:4px; margin:18px auto 0; border-radius:4px; background:linear-gradient(120deg,#002357,#0b8cff); }
.cl-head p{ margin:18px auto 0; max-width:700px; color:var(--cl-muted); font-size:16.5px; line-height:1.75; text-align:center; }

/* rows: fade at both edges */
.cl-row{
  overflow:hidden; padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.cl-row + .cl-row{ margin-top:14px; }
.cl-track{ display:flex; gap:22px; width:max-content; margin:0; padding:0 11px; list-style:none; }
.cl-row-rtl .cl-track{ animation:clScrollRtl 60s linear infinite; }
.cl-row-ltr .cl-track{ animation:clScrollLtr 60s linear infinite; }
.cl-row:hover .cl-track, .cl-row:focus-within .cl-track{ animation-play-state:paused; }

.cl-tile{
  flex:0 0 auto; width:190px; height:122px; display:grid; place-items:center; margin:0; padding:14px 22px;
  background:#fff; border:1px solid var(--cl-line); border-radius:16px; box-shadow:0 6px 18px rgba(10,22,51,.05);
  transition:border-color .25s, box-shadow .25s, translate .25s cubic-bezier(.2,.7,.2,1);
}
.cl-tile:hover{ border-color:rgba(11,140,255,.4); box-shadow:0 16px 34px rgba(10,22,51,.12); translate:0 -4px; }
.cl-tile img{ display:block; width:auto; height:auto; max-width:100%; max-height:92px; object-fit:contain; margin:0; border-radius:8px; }

@keyframes clScrollRtl{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes clScrollLtr{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

@media (max-width:767px){
  .cl-wrap{ padding:60px 0 54px; }
  .cl-head{ margin-bottom:32px; padding:0 16px; }
  .cl-head p{ font-size:15.5px; }
  .cl-track{ gap:14px; }
  .cl-tile{ width:140px; height:92px; padding:10px 14px; border-radius:14px; }
  .cl-tile img{ max-height:68px; }
  .cl-row-rtl .cl-track, .cl-row-ltr .cl-track{ animation-duration:45s; }
}
/* No motion: show the logos as a wrapped grid instead of scrolling rows */
@media (prefers-reduced-motion:reduce){
  .cl-row{ -webkit-mask-image:none; mask-image:none; }
  .cl-track{ animation:none !important; width:auto; flex-wrap:wrap; justify-content:center; padding:0 16px; }
  .cl-tile[aria-hidden="true"]{ display:none; }
  .cl-tile:hover{ translate:none; }
}