/* Solve: results ticker above the main navigation */

.solve-ticker {
	--solve-ticker-bg: #00253b;
	--solve-ticker-text: #ffffff;
	--solve-ticker-accent: #ff3a6f;
	--solve-ticker-height: 38px;

	position: relative;
	z-index: 2;
	display: flex;
	align-items: stretch;
	width: 100%;
	height: var(--solve-ticker-height);
	overflow: hidden;
	background: var(--solve-ticker-bg);
	color: var(--solve-ticker-text);
	font-family: 'Hanken Grotesk', sans-serif;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.01em;
}

.solve-ticker__label {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 18px 0 28px;
	background: var(--solve-ticker-accent);
	color: #ffffff;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

/* Angled edge on the label so the strip reads as one piece */
.solve-ticker__label::after {
	content: '';
	position: absolute;
	top: 0;
	right: -12px;
	width: 12px;
	height: 100%;
	background: var(--solve-ticker-accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.solve-ticker__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.solve-ticker__track {
	display: flex;
	width: max-content;
	height: 100%;
	animation: solve-ticker-scroll var(--solve-ticker-duration, 40s) linear infinite;
	will-change: transform;
}

.solve-ticker:hover .solve-ticker__track,
.solve-ticker:focus-within .solve-ticker__track {
	animation-play-state: paused;
}

.solve-ticker__list {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.solve-ticker__item {
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	white-space: nowrap;
	list-style: none !important;
}

/* Small pink diamond between results */
.solve-ticker__item::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 28px;
	background: var(--solve-ticker-accent);
	transform: rotate(45deg);
}

.solve-ticker__item a {
	display: inline-flex;
	align-items: center;
	color: inherit !important;
	text-decoration: none !important;
}

.solve-ticker__item a:hover .solve-ticker__result,
.solve-ticker__item a:focus-visible .solve-ticker__result {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.solve-ticker__item a:focus-visible {
	outline: 2px solid var(--solve-ticker-accent);
	outline-offset: 3px;
}

.solve-ticker__result {
	font-weight: 700;
	color: var(--solve-ticker-text);
}

/* Order: SECTOR · Service · Result */
.solve-ticker__sector {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.85em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.solve-ticker__client {
	color: var(--solve-ticker-accent);
	font-weight: 500;
}

.solve-ticker__sector::after,
.solve-ticker__client::after {
	content: '\00B7';
	margin: 0 8px;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 400;
}

/* Sit flush with the top of the window: drop the header's top padding when the ticker is inside it */
#header-outer:has(> .solve-ticker) {
	padding-top: 0 !important;
}

.solve-ticker {
	margin-top: 0 !important;
}

/* Salient pads the mobile header 12px top and bottom; keep that gap below the ticker instead */
@media only screen and (max-width: 999px) {
	#header-outer > .solve-ticker {
		margin-bottom: 12px;
	}
}

@keyframes solve-ticker-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Visitors who prefer reduced motion get a still strip they can swipe or scroll */
@media (prefers-reduced-motion: reduce) {
	.solve-ticker__track {
		animation: none;
	}
	.solve-ticker__viewport {
		overflow-x: auto;
		scrollbar-width: none;
	}
	.solve-ticker__viewport::-webkit-scrollbar {
		display: none;
	}
	.solve-ticker__list[aria-hidden='true'] {
		display: none;
	}
}

@media (max-width: 690px) {
	.solve-ticker {
		--solve-ticker-height: 34px;
		font-size: 13px;
	}
	.solve-ticker__label {
		padding: 0 12px 0 16px;
		font-size: 11px;
	}
	.solve-ticker__item::after {
		margin: 0 20px;
	}
}