/* ===========================================
   AWARDS MARQUEE (shared)
   Slow, pausable logo marquee. Used below the homepage hero
   and in the About page Awards & Recognitions section.
   =========================================== */
.awards {
  position: relative;
  z-index: 2;
  margin-top: -56px;
}
.awards-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 36px 0;
  background: var(--off-white);
  overflow: hidden;
  position: relative;
}
.awards-inner::before,
.awards-inner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 1;
  pointer-events: none;
}
.awards-inner::before {
  left: 0;
  background: linear-gradient(to right, var(--off-white), transparent);
}
.awards-inner::after {
  right: 0;
  background: linear-gradient(to left, var(--off-white), transparent);
}
.awards-track {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.awards-track:hover {
  animation-play-state: paused;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.awards-list {
  display: flex;
  align-items: center;
  gap: 72px;
  list-style: none;
  flex-shrink: 0;
  padding: 0 32px;
}
.award-logo {
  max-height: 56px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 200ms ease;
}
.award-logo:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .awards { margin-top: -40px; }
  .awards-inner { padding: 28px 0; }
  .awards-list { gap: 40px; }
  .award-logo { max-height: 44px; max-width: 150px; }
  .awards-track { animation-duration: 35s; }
}