.clients {
  max-width: 1800px;
  margin: 0 auto;
  padding: 38px 4.4% 18px;
  overflow: hidden;
  background: #1b1e21;
  color: #e9eef1;
  font-family: 'Golos Text', Arial, sans-serif;
}
.clients-inner { width: 100%; }
.clients-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}
.clients-kicker {
  margin: 0 0 12px;
  color: #c7ac78;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
}
.clients h2 {
  margin: 0;
  font: 400 clamp(38px, 3.5vw, 58px)/1.08 Impact, 'Arial Narrow', sans-serif;
  letter-spacing: .012em;
}
.clients h2 em { color: #cfb47e; font-style: normal; }
.clients-controls { display: flex; align-items: center; gap: 12px; padding-bottom: 3px; }
.clients-controls button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  border: 1px solid #c7ac7870;
  border-radius: 50%;
  background: transparent;
  color: #d9c494;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.clients-controls button:hover:not(:disabled) { background: #d2bc9020; border-color: #d9c494; }
.clients-controls button:disabled { opacity: .35; cursor: default; }
.clients-controls button:focus-visible,
.clients-viewport:focus-visible { outline: 2px solid #ddc38e; outline-offset: 4px; }
.clients-controls svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.clients-progress { position: relative; width: 76px; height: 2px; background: #d5c5a638; overflow: hidden; }
.clients-progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 24%; background: #d7bc83; transition: left .2s linear; }
.clients-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.clients-viewport::-webkit-scrollbar { display: none; }
.clients-track { display: flex; gap: 12px; width: max-content; margin: 0; padding: 0; list-style: none; }
.clients-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 clamp(180px, calc(18.24vw - 9.6px), 242px);
  width: clamp(180px, calc(18.24vw - 9.6px), 242px);
  height: 124px;
  padding: 18px;
  box-sizing: border-box;
  border: 1px solid #ffffffa6;
  border-radius: 8px;
  background: #eeece7;
  scroll-snap-align: start;
  transition: background .25s ease, transform .25s ease;
}
.clients-card:hover { background: #f7f5ef; transform: translateY(-2px); }
.clients-card img { display: block; max-width: 100%; max-height: 85px; width: auto; height: auto; object-fit: contain; }
.clients-card--wordmark img { width: 185px; }
.clients-card--wide img { max-height: 68px; }
@media (max-width: 767px) {
  .clients { padding: 28px 24px 14px; }
  .clients-heading { align-items: center; flex-wrap: wrap; row-gap: 12px; margin-bottom: 16px; }
  .clients-heading > div:first-child { flex-basis: 100%; }
  .clients-kicker { margin-bottom: 8px; }
  .clients h2 { font-size: clamp(36px, 9vw, 54px); }
  .clients-controls { margin-left: auto; padding-bottom: 0; }
  .clients-controls button { width: 34px; height: 34px; }
  .clients-progress { width: 56px; }
  .clients-track { gap: 10px; }
  .clients-card { flex-basis: 176px; width: 176px; height: 104px; padding: 14px; }
  .clients-card img { max-height: 74px; }
  .clients-card--wide img { max-height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .clients-card, .clients-controls button, .clients-progress span { transition: none; }
}