/* Muted pre-CTA logo strip. Texture, not a second proof band: greyscale, low
   opacity, no words. Static by design - the page already carries one marquee
   (testimonials) and a second moving element would compete with it and add
   another reduced-motion surface for no gain. */
.home-logo-strip {
	padding-block: var(--section-y);
	background: hsl(var(--section-alt));
}

.home-logo-strip__viewport {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.home-logo-strip__track {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	/* The column gap is deliberately tighter than the row gap. With --space-8 the
	   fourteen marks needed about 1512px to sit on one line, so at 1440 two of them
	   wrapped to a second row and the beat read as a broken grid rather than a strip.
	   Wrapping stays enabled - it is what makes the strip work on a phone - but the
	   desktop case now fits. */
	gap: var(--space-6) var(--space-6);
	margin: 0;
	/* The fourteen marks need 1410px at this gap and the track had 1408px inside its
	   16px inline padding, so one logo wrapped alone onto a second row. Trimming the
	   padding to --space-3 buys the 8px that closes it. Wrapping stays enabled: it is
	   what makes the strip work on a phone, where it settles into five rows. */
	padding: 0 var(--space-3);
	list-style: none;
}

.home-logo-strip__track img {
	/* Explicit block-size, not auto: three of these assets are SVGs whose root has
	   no width/height, and under auto they collapsed to 0x0 and never rendered. */
	block-size: 2rem;
	inline-size: auto;
	max-inline-size: 7.5rem;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.45;
}

@media (min-width: 768px) {
	.home-logo-strip__track img {
		block-size: 2.25rem;
		max-inline-size: 9rem;
	}
}