.akme-clients {
  --clients-gold: #b49343;
  position: relative;
  min-height: max(500px, 80vh);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 45%, rgba(199, 175, 113, .12), transparent 30%),
    linear-gradient(135deg, #f8f7f2 0%, #f2f0e8 100%);
}

.akme-clients::before,
.akme-clients::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(180, 147, 67, .12);
  border-radius: 50%;
}

.akme-clients::before {
  top: -210px;
  left: -120px;
}

.akme-clients::after {
  right: -160px;
  bottom: -230px;
}

.akme-clients__heading {
  position: absolute;
  z-index: 5;
  top: 45%;
  left: 50%;
  width: min(520px, 70vw);
  text-align: center;
  transform: translate(-50%, -45%);
  pointer-events: none;
}

.akme-clients__eyebrow {
  margin: 0 0 .65rem;
  color: #8d7a4e;
  font: 800 .72rem/1.2;
  letter-spacing: .12em;
}

.akme-clients__heading h2 {
    margin: 0;
    color: #1e1d1b;
    font-size: var(--titlefontsize) !important;
    font-weight: var(--titlefontweight) !important;
    letter-spacing: -.035em;
}

    .akme-clients__heading h2 span {
        color: var(--clients-gold);
        font-weight: var(--titlefontweight) !important;
    }

.akme-clients__line {
  display: block;
  width: 150px;
  height: 2px;
  margin: 1rem auto 0;
  background: linear-gradient(90deg, transparent, #c7af71 20%, #8c6c25 80%, transparent);
}

.akme-clients__field {
  position: absolute;
  inset: 0;
}

.akme-client-logo {
  --float-x: 18px;
  --float-y: 12px;
  --float-time: 6s;
  position: absolute;
  z-index: 2;
  width: var(--logo-size, 92px);
  height: var(--logo-size, 92px);
  animation: akme-client-float var(--float-time) ease-in-out infinite alternate;
}

.akme-client-logo__inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(180, 147, 67, .2);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 14px 34px rgba(44, 38, 24, .12);
  transition: opacity .32s ease, transform .32s ease;
}

.akme-client-logo.is-changing .akme-client-logo__inner {
  opacity: 0;
  transform: scale(.84);
}

.akme-client-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.akme-client-logo:nth-child(1)  { top: 8%;  left: 4%;  --logo-size: 86px;  --float-x: 18px; --float-y: 12px; --float-time: 5.8s; }
.akme-client-logo:nth-child(2)  { top: 5%;  left: 18%; --logo-size: 112px; --float-x: -16px; --float-y: 18px; --float-time: 7.2s; }
.akme-client-logo:nth-child(3)  { top: 8%;  left: 38%; --logo-size: 78px;  --float-x: 14px; --float-y: 20px; --float-time: 6.4s; }
.akme-client-logo:nth-child(4)  { top: 6%;  right: 31%; --logo-size: 104px; --float-x: -18px; --float-y: 13px; --float-time: 7.6s; }
.akme-client-logo:nth-child(5)  { top: 10%; right: 14%; --logo-size: 82px;  --float-x: 17px; --float-y: -15px; --float-time: 6.1s; }
.akme-client-logo:nth-child(6)  { top: 24%; right: 3%; --logo-size: 126px; --float-x: -20px; --float-y: 12px; --float-time: 7.4s; }
.akme-client-logo:nth-child(7)  { top: 35%; left: 5%;  --logo-size: 118px; --float-x: 16px; --float-y: -18px; --float-time: 6.8s; }
.akme-client-logo:nth-child(8)  { top: 31%; left: 24%; --logo-size: 72px;  --float-x: -18px; --float-y: 14px; --float-time: 5.7s; }
.akme-client-logo:nth-child(9)  { top: 28%; right: 22%; --logo-size: 94px; --float-x: 20px; --float-y: 16px; --float-time: 7.1s; }
.akme-client-logo:nth-child(10) { top: 56%; right: 20%; --logo-size: 100px;  --float-x: -14px; --float-y: 20px; --float-time: 6.3s; }
.akme-client-logo:nth-child(11) { bottom: 22%; left: 33%; --logo-size: 90px; --float-x: 16px; --float-y: 15px; --float-time: 7.5s; }
.akme-client-logo:nth-child(12) { bottom: 23%; left: 18%; --logo-size: 104px; --float-x: -20px; --float-y: -12px; --float-time: 6.2s; }
.akme-client-logo:nth-child(13) { bottom: 8%; left: 5%; --logo-size: 120px; --float-x: 18px; --float-y: -16px; --float-time: 7s; }
.akme-client-logo:nth-child(14) { bottom: 6%; left: 29%; --logo-size: 76px; --float-x: -15px; --float-y: 20px; --float-time: 5.9s; }
.akme-client-logo:nth-child(15) { bottom: 9%; left: 47%; --logo-size: 112px; --float-x: 20px; --float-y: 13px; --float-time: 7.7s; }
.akme-client-logo:nth-child(16) { bottom: 7%; right: 32%; --logo-size: 88px; --float-x: -18px; --float-y: -18px; --float-time: 6.5s; }
.akme-client-logo:nth-child(17) { bottom: 20%; right: 8%; --logo-size: 116px; --float-x: 16px; --float-y: 20px; --float-time: 7.3s; }
.akme-client-logo:nth-child(18) { bottom: 5%; right: 17%; --logo-size: 82px; --float-x: -20px; --float-y: 14px; --float-time: 6s; }

.akme-client-logo:nth-child(3n) {
  animation-delay: -1.8s;
}

.akme-client-logo:nth-child(3n + 1) {
  animation-delay: -3.2s;
}

@keyframes akme-client-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--float-x), var(--float-y), 0); }
}

@media (max-width: 991px) {
  .akme-clients {
    min-height: max(500px, 70svh);
  }

  .akme-clients__heading {
    width: min(430px, 74vw);
  }

  .akme-client-logo {
    --logo-size: 88px !important;
  }

  .akme-client-logo:nth-child(n + 13) {
    display: none;
  }

  .akme-client-logo:nth-child(1) { top: 8%; left: 5%; }
  .akme-client-logo:nth-child(2) { top: 5%; left: 28%; }
  .akme-client-logo:nth-child(3) { top: 8%; left: auto; right: 28%; }
  .akme-client-logo:nth-child(4) { top: 7%; right: 5%; }
  .akme-client-logo:nth-child(5) { top: 31%; left: 5%; right: auto; }
  .akme-client-logo:nth-child(6) { top: 28%; right: 5%; }
  .akme-client-logo:nth-child(7) { top: auto; bottom: 28%; left: 5%; }
  .akme-client-logo:nth-child(8) { top: auto; bottom: 31%; left: auto; right: 5%; }
  .akme-client-logo:nth-child(9) { top: auto; bottom: 6%; left: 7%; right: auto; }
  .akme-client-logo:nth-child(10) { top: auto; bottom: 7%; right: 31%; }
  .akme-client-logo:nth-child(11) { top: auto; bottom: 5%; left: 32%; }
  .akme-client-logo:nth-child(12) { top: auto; bottom: 8%; left: auto; right: 6%; }
}

@media (max-width: 575px) {
  .akme-clients {
    min-height: 500px;
  }

  .akme-clients__heading {
    top: 49%;
    width: 76vw;
  }

  .akme-clients__eyebrow {
    font-size: .62rem;
  }

  .akme-clients__heading h2 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .akme-client-logo {
    --logo-size: 62px !important;
  }

  .akme-client-logo:nth-child(n + 13) {
    display: none;
  }

  .akme-client-logo:nth-child(1) { top: 7%; left: 5%; }
  .akme-client-logo:nth-child(2) { top: 4%; left: 39%; }
  .akme-client-logo:nth-child(3) { top: 8%; right: 5%; left: auto; }
  .akme-client-logo:nth-child(4) { top: 25%; left: 8%; right: auto; }
  .akme-client-logo:nth-child(5) { top: 20%; right: 30%; left: auto; }
  .akme-client-logo:nth-child(6) { top: auto; bottom: 26%; left: 7%; right: auto; }
  .akme-client-logo:nth-child(7) { top: auto; bottom: 25%; right: 7%; left: auto; }
  .akme-client-logo:nth-child(8) { top: auto; bottom: 6%; left: 10%; right: auto; }
  .akme-client-logo:nth-child(9) { top: auto; bottom: 5%; right: 10%; left: auto; }
  .akme-client-logo:nth-child(10) { top: auto; bottom: 23%; right: 48%; }
  .akme-client-logo:nth-child(11) { top: auto; bottom: 5%; left: 32%; }
  .akme-client-logo:nth-child(12) { top: auto; bottom: 8%; left: auto; right: 27%; }
}

@media (prefers-reduced-motion: reduce) {
  .akme-client-logo {
    animation: none;
  }
}