.clients{
.salks{ font-family:'Salks',sans-serif; font-weight:400; }
.clients{ position:relative; overflow:hidden; padding:96px 0 110px; }
/* ---------- heading ---------- */
  .head{ max-width:1280px; margin:0 auto; padding:0 56px; position:relative; }
.kicker{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-weight:800; font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); background:var(--amber); border:3px solid var(--ink); border-radius:100px; padding:9px 18px; box-shadow:4px 4px 0 var(--ink); transform:rotate(-2deg); }
h2.title{ margin:24px 0 0; font-family:'Salks',sans-serif; font-weight:400; line-height:.9; letter-spacing:-.01em; font-size:clamp(52px,8.5vw,140px); color:var(--ink); max-width:14ch; }
h2.title .pop{ color:var(--orange); }
/* inline logo chip in the headline */
  .chip{ display:inline-grid; place-items:center; vertical-align:-.12em; width:.92em; height:.92em; border-radius:.18em; background:var(--paper); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); transform:rotate(-7deg); margin:0 .06em; }
.chip img{ width:78%; height:78%; object-fit:contain; }
.lede{ margin:28px 0 0; max-width:640px; font-size:clamp(17px,1.5vw,21px); line-height:1.5; color:var(--ink-soft); }
.lede b{ color:var(--ink); }
.doodle{ position:absolute; pointer-events:none; color:var(--orange); }
/* mascot accent */
  .cl-mascot{ position:absolute; top:84px; right:3.5%; width:184px; height:auto; pointer-events:none; z-index:3; transform:rotate(-5deg); filter:drop-shadow(0 14px 16px rgba(28,24,19,.16)); animation:qw-bob 5.5s ease-in-out infinite; }
@media (max-width:768px){ .cl-mascot{ display:none; } }
/* ---------- stat odometers ---------- */
  .stats{ max-width:1280px; margin:60px auto 0; padding:0 56px; }
.stats-inner{ background:var(--orange); border:4px solid var(--ink); border-radius:28px; box-shadow:10px 10px 0 var(--ink); display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; }
.stat{ padding:38px 26px 30px; text-align:center; position:relative; }
.stat + .stat{ border-left:3px dashed rgba(253,243,227,.55); }
.odo{ font-family:'Salks',sans-serif; font-weight:400; font-size:clamp(56px,6.5vw,104px); line-height:1; color:var(--cream); display:inline-flex; align-items:flex-start; }
.odo-window{ height:1em; overflow:hidden; display:inline-block; vertical-align:top; }
.odo-reel{ display:flex; flex-direction:column; transform:translateY(0); will-change:transform; }
.odo-cell{ height:1em; line-height:1; display:block; text-align:center; }
.odo-static{ display:inline-block; }
.odo .suffix{ color:var(--amber); }
.stat .label{ margin-top:12px; font-family:'Roboto'; font-weight:800; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:rgba(253,243,227,.92); }
/* ---------- logo wall ---------- */
  .wall-head{ max-width:1280px; margin:84px auto 0; padding:0 56px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.wall-head h3{ margin:0; font-family:'Salks',sans-serif; font-weight:400; font-size:clamp(30px,3.4vw,52px); line-height:.95; }
.wall-head p{ margin:0; max-width:360px; font-size:16px; line-height:1.45; color:var(--ink-soft); }
.wall{ max-width:1280px; margin:34px auto 0; padding:0 56px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.logo{ --r:0deg; background:var(--paper); border:3px solid var(--ink); border-radius:22px; box-shadow:6px 6px 0 var(--ink); height:148px; display:grid; place-items:center; padding:24px; transform:rotate(var(--r)); transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s, background .2s; }
.wall.in .logo{ animation:pop .55s cubic-bezier(.34,1.56,.64,1) both; }
/* transform-only entrance: a stalled/disabled animation leaves cards visible (just slightly offset), never hidden */
  @keyframes pop{ from{ transform:translateY(26px) rotate(var(--r)) scale(.94);} to{ transform:rotate(var(--r));} }
.logo:hover{ transform:rotate(0deg) translateY(-8px) !important; box-shadow:12px 14px 0 var(--ink); background:var(--amber); }
.logo img{ max-width:100%; max-height:80px; object-fit:contain; }
.logo.qult{ background:#f50808; }
.logo.qult:hover{ background:#d40606; }
/* ---------- marquee of names ---------- */
  @keyframes qw-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.strip{ background:var(--ink); border-top:4px solid var(--ink); border-bottom:4px solid var(--ink); padding:16px 0; overflow:hidden; display:flex; transform:rotate(-1.3deg) scale(1.04); margin:84px 0 0; }
.strip .track{ display:flex; width:max-content; animation:qw-scroll 30s linear infinite; }
.strip .item{ display:flex; align-items:center; gap:26px; padding-right:26px; flex:0 0 auto; }
.strip .item span{ font-family:'Salks',sans-serif; font-size:30px; color:var(--cream); white-space:nowrap; }
.strip .item b{ width:13px; height:13px; border-radius:99px; background:var(--amber); display:block; flex:0 0 auto; }
/* ---------- closing CTA ---------- */
  .foot{ max-width:1280px; margin:64px auto 0; padding:0 56px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.foot .cta{ display:inline-flex; align-items:center; gap:12px; background:var(--ink); color:var(--cream); font-family:'Salks',sans-serif; font-size:26px; padding:18px 34px; border:3px solid var(--ink); border-radius:100px; box-shadow:6px 6px 0 var(--amber); text-decoration:none; transition:transform .2s, box-shadow .2s; }
.foot .cta:hover{ transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--amber); }
.foot .note{ font-size:17px; color:var(--ink-soft); max-width:340px; line-height:1.45; }
@media (max-width:900px){
    .stats-inner{ grid-template-columns:repeat(2,1fr); }
    .stat:nth-child(3){ border-left:none; }
    .stat:nth-child(odd){ border-left:none; }
    .stat:nth-child(even){ border-left:3px dashed rgba(253,243,227,.55); }
    .stat:nth-child(3), .stat:nth-child(4){ border-top:3px dashed rgba(253,243,227,.55); }
    .wall{ grid-template-columns:repeat(2,1fr); }
  }
@media (max-width:560px){
    .head,.stats,.wall-head,.wall,.foot{ padding-left:26px; padding-right:26px; }
    .wall{ grid-template-columns:1fr; }
  }
@media (prefers-reduced-motion:reduce){
    .strip .track{ animation:none; }
    .wall.in .logo{ animation:none; opacity:1; }
    .logo{ opacity:1; }
    .odo-reel{ transition:none !important; }
    .cl-mascot{ animation:none; }
  }
}

.clients{ background:var(--cream); }