.nl-rl {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Desktop: flex row with dot separators */
.nl-rl.nl-rl--desktop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.nl-rl.nl-rl--desktop li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  opacity: 1 !important;
  transform: none !important;
  position: static !important;
}

.nl-rl.nl-rl--desktop li + li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  margin: 0 0.75em;
  flex-shrink: 0;
}

/* Mobile: one item at a time, JS controls visibility */
.nl-rl.nl-rl--mobile {
  display: block;
  position: relative;
  overflow: hidden;
}

.nl-rl.nl-rl--mobile li {
  display: block;
  width: 100%;
}

/* Before JS runs: show as a plain row so there is no layout jump */
.nl-rl:not(.nl-rl--desktop):not(.nl-rl--mobile) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2em;
}

@media (prefers-reduced-motion: reduce) {
  .nl-rl.nl-rl--mobile li { transition: none !important; }
}