/* ── Service Marquee Widget (svcm) ─────────────────────────────────────────── */
.svcm {
	--svcm-gap: 48px;
	--svcm-speed: 40s;
	overflow: hidden;
	white-space: nowrap;
	padding: 14px 0;
	background-color: #131211;
}

.svcm-track {
	display: inline-flex;
	align-items: center;
	gap: var(--svcm-gap, 48px);
	/* Must stay equal to the gap. It pads the track out to exactly twice
	   (group + gap), which is what makes translateX(-50%) land the second copy
	   on the first copy's starting position with identical spacing at the seam. */
	padding-right: var(--svcm-gap, 48px);
	animation: svcm-scroll var(--svcm-speed, 40s) linear infinite;
}

.svcm-track > .svcm-group {
	display: inline-flex;
	align-items: center;
	gap: var(--svcm-gap, 48px);
}

.svcm-item {
	/* Overridden by the Typography control when it is customised. */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 12px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #b3aca4;
	transition: color 0.2s ease;
}

/* A dot follows every item, including each group's last one, so the junction at
   the loop seam looks the same as every other junction. */
.svcm-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	flex: none;
	background-color: #d19a4c;
}

/* Seamless loop, and why it must stay this way:
   render() prints the service list TWICE inside .svcm-track as two sibling
   .svcm-group elements. -50% of the track is therefore exactly one full copy
   (one group plus one gap), so at the end of the cycle copy 2 sits precisely
   where copy 1 started and the snap back to 0% cannot be seen.
   Do not drop the duplicate group, do not change -50% to another value, and do
   not reposition items from JS or animate margin/left — a transform is what
   keeps this compositor-driven rather than triggering layout every frame. */
@keyframes svcm-scroll {
	to { transform: translateX(-50%); }
}

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