/* Fit the hero, header, and lime ticker to one viewport so the catalog never peeks as a blank strip. */
@media (min-width: 1101px) {
  .hero {
    height: max(535px, calc(100svh - 186px));
    min-height: 0;
  }
}

/* The tablet header is 10px shorter than desktop. */
@media (min-width: 761px) and (max-width: 1100px) {
  .hero {
    height: max(535px, calc(100svh - 176px));
    min-height: 0;
  }
}

/* Keep the brand ribbon visibly moving without making its pace frantic. */
.ticker-track {
  animation: marquee 32s linear infinite;
}

@media (max-width: 760px) {
  .ticker-track { animation-duration: 38s; }
}

/* The OS preference still gets a slower ticker, rather than a frozen brand strip. */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-allowed) .ticker-track {
    animation: marquee 52s linear infinite !important;
  }
}