.nairobi-reference-strip {
	--nairobi-reference-ink: var(--global-palette3, #102f55);
	--nairobi-reference-muted: var(--global-palette5, #586b80);
	--nairobi-reference-line: var(--global-palette6, #cbd8e6);
	--nairobi-reference-paper: var(--global-palette9, #fff);
	--nairobi-reference-accent: var(--global-palette2, #d7193f);
	position: relative;
	width: 100%;
	border-top: 1px solid var(--nairobi-reference-line);
	border-bottom: 1px solid var(--nairobi-reference-line);
	background: var(--global-palette8, #f5f8fb);
	color: var(--nairobi-reference-ink);
	font-family: inherit;
}

.nairobi-reference-strip__inner {
	box-sizing: border-box;
	width: min(calc(100% - 40px), var(--global-content-width, 1200px));
	margin-inline: auto;
	padding-block: 22px 16px;
}

.nairobi-reference-strip__heading-row {
	margin-bottom: 13px;
}

.nairobi-reference-strip__heading-row h2 {
	position: relative;
	width: fit-content;
	margin: 0;
	padding-bottom: 9px;
	color: var(--nairobi-reference-ink);
	font-size: clamp(17px, 1.5vw, 20px);
	font-weight: 700;
	line-height: 1.35;
}

.nairobi-reference-strip__heading-row h2::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 38px;
	height: 2px;
	border-radius: 2px;
	background: var(--nairobi-reference-accent);
	content: "";
}

.nairobi-reference-strip__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-block: 2px 5px;
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.nairobi-reference-strip__track {
	display: flex;
	width: 100%;
	align-items: stretch;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nairobi-reference-strip.is-ready .nairobi-reference-strip__track {
	width: max-content;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 14px;
	animation: nairobi-reference-marquee 42s linear infinite;
	will-change: transform;
}

.nairobi-reference-strip__item {
	flex: 0 0 clamp(200px, 22vw, 250px);
	min-width: 0;
	margin: 0;
	padding: 0;
}

.nairobi-reference-strip__item[aria-hidden="true"] {
	display: none;
}

.nairobi-reference-strip.is-ready .nairobi-reference-strip__item[aria-hidden="true"] {
	display: list-item;
}

.nairobi-reference-strip:not(.is-ready) .nairobi-reference-strip__item {
	flex: 1 1 200px;
	max-width: 250px;
}

.nairobi-reference-strip__card {
	box-sizing: border-box;
	display: flex;
	min-height: 78px;
	align-items: center;
	justify-content: center;
	gap: 13px;
	padding: 10px 15px;
	border: 1px solid var(--nairobi-reference-line);
	border-radius: 10px;
	background: var(--nairobi-reference-paper);
	box-shadow: 0 3px 12px rgba(16, 47, 85, .045);
}

.nairobi-reference-strip__card img {
	display: block;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	object-fit: contain;
}

.nairobi-reference-strip__card img.nairobi-reference-strip__logo--wide {
	flex: 0 1 96px;
	width: 96px;
	max-width: 96px;
	height: 42px;
}

.nairobi-reference-strip__viewport:hover .nairobi-reference-strip__track,
.nairobi-reference-strip__viewport:focus-within .nairobi-reference-strip__track {
	animation-play-state: paused;
}

@keyframes nairobi-reference-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (max-width: 767px) {
	.nairobi-reference-strip__inner {
		width: min(calc(100% - 32px), var(--global-content-width, 1200px));
		padding-block: 18px 14px;
	}

	.nairobi-reference-strip__track {
		justify-content: flex-start;
	}

	.nairobi-reference-strip.is-ready .nairobi-reference-strip__track {
		gap: 11px;
		animation-duration: 34s;
	}

	.nairobi-reference-strip__item,
	.nairobi-reference-strip:not(.is-ready) .nairobi-reference-strip__item {
		flex-basis: min(72vw, 230px);
	}

	.nairobi-reference-strip__card {
		min-height: 72px;
		justify-content: flex-start;
		gap: 11px;
		padding-inline: 12px;
	}

	.nairobi-reference-strip__card img:not(.nairobi-reference-strip__logo--wide) {
		flex-basis: 42px;
		width: 42px;
		height: 42px;
	}

	.nairobi-reference-strip__card img.nairobi-reference-strip__logo--wide {
		flex-basis: 84px;
		width: 84px;
		max-width: 84px;
		height: 38px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.nairobi-reference-strip__viewport {
		overflow: visible;
		mask-image: none;
	}

	.nairobi-reference-strip__track,
	.nairobi-reference-strip.is-ready .nairobi-reference-strip__track {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		animation: none;
		transform: none;
		will-change: auto;
	}

	.nairobi-reference-strip__item,
	.nairobi-reference-strip:not(.is-ready) .nairobi-reference-strip__item {
		flex: 1 1 200px;
		max-width: 250px;
	}

	.nairobi-reference-strip__item[aria-hidden="true"],
	.nairobi-reference-strip.is-ready .nairobi-reference-strip__item[aria-hidden="true"] {
		display: none;
	}
}
