/* ==========================================================
   Tech stack marquee (sk-stack), two rows of logo chips that scroll
   in opposite directions. Loaded on the AI service pages and the
   engineering service pages, after their kit stylesheets.
   ========================================================== */
.sk-stack {
	display: grid;
	gap: 14px;
	padding: 6px 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sk-stack-row {
	display: flex;
	width: max-content;
	animation: sk-marq 40s linear infinite;
}
.sk-stack-row.rev {
	animation-direction: reverse;
	animation-duration: 46s;
}
.sk-stack:hover .sk-stack-row {
	animation-play-state: paused;
}
@keyframes sk-marq {
	to {
		transform: translateX(-50%);
	}
}
.sk-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-right: 14px;
	height: 64px;
	padding: 0 22px 0 14px;
	border-radius: 18px;
	white-space: nowrap;
	font-size: 15px;
	color: var(--ink-2);
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
}
.sk-logo img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}
.sk-logo.txt {
	padding: 0 20px;
}
.sk-logo.txt::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--tone, var(--blue)), var(--tone-2, var(--cyan)));
}
@media (max-width: 640px) {
	.sk-stack {
		gap: 10px;
	}
	.sk-stack-row {
		animation-duration: 30s;
	}
	.sk-stack-row.rev {
		animation-duration: 34s;
	}
	.sk-logo {
		height: 52px;
		margin-right: 10px;
		padding: 0 18px 0 12px;
		gap: 10px;
		font-size: 14px;
		border-radius: 14px;
	}
	.sk-logo.txt {
		padding: 0 16px;
	}
	.sk-logo img {
		width: 26px;
		height: 26px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sk-stack-row {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}
}