/* Standalone dual-band component; rotation and scrolling stay on separate layers. */
.service-strips {
	--strip-height: max(4rem, 7.25vw);
	--strip-overlap: 2vw;
	/* Reserve the upper band's rotated rise; its visible left edge starts at ~1px. */
	--strip-clearance: calc(2.89vw + 1px);
	/* Bring the diagonal edge closer to the content at wider desktop widths. */
	margin-top: clamp(-1.5rem, calc((80rem - 100vw) * 0.15), 0rem);
	position: relative;
	isolation: isolate;
	height: calc(var(--strip-height) * 2 - var(--strip-overlap) + var(--strip-clearance) * 2);
	overflow: hidden;
	background: var(--sparrow-white);
}
.service-strips__band {
	position: absolute;
	inset-inline: -2rem;
	height: var(--strip-height);
	/* One shaped paint boundary, with the end caps kept outside the viewport. */
	overflow: visible;
	clip-path: inset(0 -4rem);
	backface-visibility: hidden;
	color: #fff;
}
.service-strips__band::before,
.service-strips__band::after {
	position: absolute;
	z-index: -1;
	inset-block: 0;
	width: 4rem;
	background: inherit;
	content: "";
	pointer-events: none;
}
.service-strips__band::before { right: 100%; }
.service-strips__band::after { left: 100%; }
.service-strips__band--upper {
	z-index: 2;
	top: var(--strip-clearance);
	transform: rotate(3.3deg);
	background: linear-gradient(100deg, #8b70fa, #795eff);
}
.service-strips__band--lower {
	z-index: 1;
	top: calc(var(--strip-clearance) + var(--strip-height) - var(--strip-overlap));
	transform: rotate(2.62deg);
	background: #080e2c;
}
.service-strips__track {
	display: flex;
	width: max-content;
	height: 100%;
	align-items: center;
	font-size: clamp(1.125rem, 2.45vw, 4rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.15;
	white-space: nowrap;
	animation: sparrow-strip-right 52s linear infinite;
}
.service-strips__band--lower .service-strips__track {
	font-size: clamp(1rem, 1.9vw, 3.125rem);
	animation-name: sparrow-strip-left;
	animation-duration: 58s;
}
.service-strips__group {
	display: flex;
	min-width: calc(100vw + 4rem);
	align-items: center;
	gap: 0.85em;
	justify-content: space-around;
	flex: 0 0 auto;
	padding-inline: 0.425em;
}
.service-strips__item { display: inline-flex; align-items: center; gap: 0.85em; }
.service-strips__dot { display: inline-block; width: 0.14em; height: 0.14em; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.service-strips:is(:hover, :focus-within) .service-strips__track { animation-play-state: paused; }
@keyframes sparrow-strip-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes sparrow-strip-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* The component meets the temporary footer without an unrelated horizontal rule. */
.home .site-footer { border-top-color: transparent; }
@media (prefers-reduced-motion: reduce) {
	.service-strips { height: auto; padding-block: var(--strip-clearance); }
	.service-strips__band { position: relative; inset: auto; width: calc(100% + 4rem); height: auto; margin-inline: -2rem; padding-block: calc(1rem + 3vw); }
	.service-strips__band--lower { margin-top: calc(0px - var(--strip-overlap)); }
	.service-strips__band .service-strips__track { position: static; width: 100%; height: auto; font-size: clamp(1rem, 2vw, 2rem); line-height: 1.4; white-space: normal; animation: none; transform: none; }
	.service-strips__group { width: 100%; min-width: 0; justify-content: center; gap: 0.5em 1em; flex-wrap: wrap; padding-inline: 3rem; }
	.service-strips__group--copy { display: none; }
	.service-strips__item { gap: 1em; white-space: nowrap; }
}