/* Layout */

.hh-logos__container {
  max-width: 1500px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2vw;
  padding-right: 2vw;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
@media (max-width: 900px) {
  .hh-logos__container {
    flex-direction: column;
    gap: 34px;
    align-items: start;
  }
}

.hh-logos__header {
    flex: 0 0 35%;        /* ~40% column */
  min-width: 260px; 
}
/* Headline — matches the reference image */
.hh-logos__title {
  margin: 0;
  font-weight: bold;
  line-height: 1.05;
  font-size: clamp(24px, 3.2vw, 35px);
  color: #000;
}
.hh-logos__line1 { display: block; }
.hh-logos__line2 { display: block; margin-top: 6px; }
.hh-logos__accent {
  color: #ff6a00; /* vivid orange accent from image */
  font-weight: 900;
}

/* Scroller */
.hh-logos__scroller {
  position: relative;
  overflow: hidden;
  flex: 1 1 60%; 
  max-width: 100%;
  /* soft fading edges like in the screenshot */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #fff 40px, #fff calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #fff 40px, #fff calc(100% - 40px), transparent 100%);
  -webkit-mask-mode: luminance;
          mask-mode: luminance;
}

@supports not (mask-image: linear-gradient(black, white)) {
  .hh-logos__scroller { -webkit-mask-image: none; mask-image: none; }
}

/* Inner wrapper with the animation applied */
.hh-logos__inner {
  display: flex;
  align-items: center;
  width: auto; /* allow content to size itself */
  will-change: transform;
  animation-name: hh-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

/* Each track is a row of logos; duplicating two tracks gives a loop */
.hh-logos__track {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-inline: 30px;
}
.hh-logos__item { flex: 0 0 auto; list-style: none;  }
.hh-logos__img {
  max-width: 120px;
  height: auto;
  display: block;
  filter: grayscale(100%);
  opacity: 0.9;
  transition: opacity .2s ease;
}
.hh-logos__logoLink:hover .hh-logos__img,
.hh-logos__logoLink:focus .hh-logos__img { opacity: 1; }

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hh-logos__inner { animation-duration: 0.001s; animation-iteration-count: 1; }
}

/* Keyframes: translate by half of the combined width (two tracks) */
@keyframes hh-marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(var(--hh-shift, -50%),0,0); }
}