/* ==========================================================================
   Digital ROI — Platforms / Services marquee ([droi_marquee])
   ========================================================================== */

.droi-marquee {
	overflow: hidden;
	margin-top: clamp(40px, 6vw, 88px); /* breathing room straight after the hero video */
}

.droi-marquee__row {
	overflow: hidden;
	white-space: nowrap;
	padding: 20px 0;
}

.droi-marquee__row--orange {
	background: #ed3d0e;
	color: #0d0d0d;
}

.droi-marquee__row--grey {
	background: #161616;
	color: #ffffff;
}

.droi-marquee__track {
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
	animation: droi-marquee-left 32s linear infinite;
	will-change: transform;
}

.droi-marquee__row--reverse .droi-marquee__track {
	animation-name: droi-marquee-right;
}

.droi-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
	font-family: inherit;
	font-weight: 700;
	font-size: clamp(18px, 2.6vw, 30px);
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.droi-marquee__sep {
	font-size: 0.5em;
	opacity: 0.5;
}
.droi-marquee__row--orange .droi-marquee__sep { color: #0d0d0d; }
.droi-marquee__row--grey  .droi-marquee__sep { color: rgba(255, 255, 255, 0.45); }

@keyframes droi-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes droi-marquee-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* Pause on hover — a nicety, not required, costs nothing */
.droi-marquee__row:hover .droi-marquee__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.droi-marquee__track {
		animation: none;
	}
}

@media (max-width: 640px) {
	.droi-marquee__row { padding: 14px 0; }
	.droi-marquee__track { gap: 1.6rem; animation-duration: 22s; }
	.droi-marquee__item { gap: 1.6rem; }
}