.brand-marquee {
  overflow: hidden;
  margin-top: 36px;
  border-top: 1px solid #cfdbde;
  border-bottom: 1px solid #cfdbde;
  padding: 18px 0;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.brand-track {
  display: flex;
  width: max-content;
  animation: partner-slide 79s linear infinite;
}

.brand-marquee:hover .brand-track { animation-play-state: paused; }

.brand-set {
  display: flex;
  flex: none;
  gap: 14px;
  padding-right: 14px;
}

.brand-mark {
  --logo-width: 164px;
  --logo-height: 72px;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 218px;
  height: 116px;
  padding: 16px;
  border: 1px solid #dbe4e6;
  background: #fff;
}

.brand-mark img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--logo-width));
  max-height: var(--logo-height);
  object-fit: contain;
}

.brand-mark-axis { --logo-width: 178px; --logo-height: 73px; }
.brand-mark-digifort { --logo-width: 172px; --logo-height: 59px; }
.brand-mark-pelco { --logo-width: 175px; --logo-height: 58px; }
.brand-mark-briefcam { --logo-width: 174px; --logo-height: 49px; }
.brand-mark-ipx { --logo-width: 183px; --logo-height: 57px; background: #26303b; border-color: #26303b; }
.brand-mark-commbox { --logo-width: 178px; --logo-height: 57px; }
.brand-mark-invenzi { --logo-width: 167px; --logo-height: 59px; }
.brand-mark-dji { --logo-width: 108px; --logo-height: 70px; }
.brand-mark-optex { --logo-width: 164px; --logo-height: 67px; }
.brand-mark-muralha { --logo-width: 185px; --logo-height: 60px; }
.brand-mark-smart-sampa { --logo-width: 187px; --logo-height: 44px; }
.brand-mark-cisco { --logo-width: 115px; --logo-height: 76px; }
.brand-mark-dell { --logo-width: 164px; --logo-height: 60px; }
.brand-mark-hid { --logo-width: 142px; --logo-height: 64px; }
.brand-mark-wolpac { --logo-width: 148px; --logo-height: 82px; }
.brand-mark-safr { --logo-width: 156px; --logo-height: 76px; }
.brand-mark-kidde { --logo-width: 145px; --logo-height: 77px; }
.brand-mark-tyco { --logo-width: 158px; --logo-height: 60px; }
.brand-mark-dsc { --logo-width: 158px; --logo-height: 60px; }
.brand-mark-assa-abloy { --logo-width: 185px; --logo-height: 52px; }
.brand-mark-lightera { --logo-width: 182px; --logo-height: 52px; }
.brand-mark-motorola { --logo-width: 184px; --logo-height: 56px; }

@keyframes partner-slide {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee { overflow: visible; mask-image: none; }
  .brand-track { display: block; width: 100%; animation: none; }
  .brand-set:first-child { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
  .brand-set[aria-hidden] { display: none; }
  .brand-mark { width: 100%; }
}

@media (max-width: 760px) {
  .brand-mark { width: 170px; height: 96px; }
  .brand-mark img { max-width: min(100%, var(--logo-width)); max-height: min(64px, var(--logo-height)); }
  .brand-track { animation-duration: 62s; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .brand-set:first-child { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) and (prefers-reduced-motion: reduce) {
  .brand-set:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .brand-marquee { overflow: visible; mask-image: none; }
  .brand-track { display: block; width: 100%; animation: none; }
  .brand-set:first-child { display: flex; flex-wrap: wrap; }
  .brand-set[aria-hidden] { display: none; }
}