/* ══════════════════════════════════════════════════════
   HP Homes — Partner Logo Marquee
   Injected below the "Our Difference" section.
   ══════════════════════════════════════════════════════ */

@keyframes pm-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-100% / 6)); }
  /*
   * 6 copies of the logo set are rendered in the JS.
   * Shifting by 1/6 of the total track width = exactly one set's width.
   * 6 copies ≈ 9 000–10 000 px, covering monitors up to ~4K wide.
   */
}

.pm-strip {
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 5rem 0 3rem 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.pm-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: pm-scroll 30s linear infinite;
  /* margin-right on imgs (not gap here) keeps spacing uniform at every
     seam between sets so translateX(calc(-100%/6)) lands exactly. */
}

.pm-track img {
  height: 34px;
  width: auto;
  flex-shrink: 0;
  margin-right: clamp(3rem, 6vw, 6rem);
  filter: grayscale(1) brightness(1.1);
  opacity: 0.65;
  transition: filter .25s ease, opacity .25s ease;
}

.pm-track img:hover {
  filter: grayscale(0) brightness(1);
  opacity: 1;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .pm-track { animation: none; }
}