.brands-section{ padding:56px 0; max-width:1400px; margin:0 auto; }
  .brands-head{ padding:0 40px 28px; }
  .brands-head h2{ font-size:22px; color:#1C1C1C; margin-bottom:6px; }
  .brands-head p{ font-size:13.5px; color:#777; }
 
  /* ---------- Marquee ---------- */
  .marquee{
    position:relative;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .marquee-track{
    display:flex;
    align-items:center;
    gap:56px;
    width:max-content;
    /* Duration controls speed — bigger number = slower. Roughly 5-6s per logo works well for ~24 logos. */
    animation:marquee-scroll 90s linear infinite;
  }
  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track{
    animation-play-state:paused;
  }
  @keyframes marquee-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); } /* -50% because the list is duplicated once below */
  }
  .brand-logo{
    height:32px;
    width:auto;
    flex-shrink:0;
    filter:grayscale(100%);
    opacity:0.55;
    transition:filter 0.2s ease, opacity 0.2s ease;
  }
  .marquee-track a:hover .brand-logo{
    filter:grayscale(0%);
    opacity:1;
  }
 
  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; overflow-x:auto; }
  }
 
  @media (max-width:600px){
    .brand-logo{ height:24px; }
    .marquee-track{ gap:36px; animation-duration:70s; }
  }