.ticker {
  overflow: hidden;
  background-color: var(--color-black);
  position: relative;
  z-index: 1;        /* behind the portrait (z-index: 2) */
  padding-top: 40vw; /* pushes text band down to shoulder level of the portrait */
  padding-bottom: 0;
}

/* Match ticker background to hero colourway */
body[data-hero-theme="orange"] .ticker {
  background-color: var(--color-orange);
}
body[data-hero-theme="light"] .ticker {
  background-color: var(--color-off-white);
}

.ticker-separator {
  height: 1px;
  background-color: #333;
  margin: 0 var(--pad-h);
  width: var(--content-width);
}

body[data-hero-theme="orange"] .ticker-separator,
body[data-hero-theme="light"] .ticker-separator {
  background-color: rgba(0, 0, 0, 0.15);
}

/* Only show the bottom separator — top is merged with the dark hero */
.ticker-separator:first-child {
  display: none;
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: ticker-scroll 20s linear infinite;
  padding: 3vw 0;
}

.ticker-content {
  display: flex;
  align-items: baseline;
}

.ticker-text {
  font-family: var(--font-display);
  font-size: 11vw;
  font-weight: 800;
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
  padding-right: 4vw;
}

body[data-hero-theme="orange"] .ticker-text,
body[data-hero-theme="light"] .ticker-text {
  color: var(--color-black);
}

.ticker-dash {
  color: var(--color-orange);
  padding: 0 2vw;
}

body[data-hero-theme="orange"] .ticker-dash {
  color: var(--color-white);
}

body[data-hero-theme="light"] .ticker-dash {
  color: var(--color-orange);
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (min-width: 768px) {
  .ticker-text {
    font-size: 8.5vw;
  }

  .ticker-track {
    padding: 2.5vw 0;
  }
}