.home-brands {
	padding-block: var(--section-y);
	border-top: 1px solid var(--mega-media-border);
	border-bottom: 1px solid var(--mega-media-border);
	overflow: hidden;
}

.home-brands__heading-wrap {
	margin-block-end: var(--s-8);
}

.home-brands__eyebrow {
	margin: 0 0 var(--s-3);
	font-size: var(--fs-micro);
	font-weight: var(--fw-ui);
	letter-spacing: var(--tracking-micro);
	text-transform: uppercase;
}

.home-brands__heading {
	margin: 0;
}

.home-brands__viewport {
	width: 100%;
	overflow: hidden;
	border-top: 1px solid var(--mega-media-border);
	border-bottom: 1px solid var(--mega-media-border);
}

.home-brands__track {
	display: flex;
	width: max-content;
	animation: pinnacle-brand-scroll 28s linear infinite;
}

.home-brands__viewport:hover .home-brands__track,
.home-brands__viewport:focus-within .home-brands__track {
	animation-play-state: paused;
}

.home-brands__set {
	display: flex;
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-brands__item {
	display: grid;
	place-items: center;
	min-width: 10rem;
	min-height: 6.5rem;
	padding: var(--s-7) var(--s-6);
	border-right: 1px solid var(--mega-media-border);
}

.home-brands__logo {
	display: block;
	width: auto;
	max-width: 11rem;
	height: auto;
	max-height: 3.5rem;
	object-fit: contain;
	filter: grayscale(1);
}

.home-brands__wordmark {
	/* `--font-heading` is not a token this theme defines (the display face is
	   `--font-display`), so this always fell through to the `inherit` fallback.
	   Stated explicitly to keep the rendering it has actually had, rather than
	   silently switching these wordmarks to the display face. */
	font-family: inherit;
	font-size: var(--fs-h2);
	font-weight: var(--fw-display);
	letter-spacing: -.02em;
	white-space: nowrap;
}

@keyframes pinnacle-brand-scroll {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-brands__track {
		width: 100%;
		animation: none;
	}

	.home-brands__set {
		width: 100%;
		flex-wrap: wrap;
	}

	.home-brands__set[aria-hidden="true"] {
		display: none;
	}

	.home-brands__item {
		flex: 1 1 50%;
	}
}

/* The compact sizing above IS the mobile case, and this restores the roomier
 * one from --bp-md up. It was written the other way round — a
 * `max-width: 47.99rem` block shrinking a desktop-sized base — which §8.13
 * rules out twice over: max-width queries at all, and a breakpoint that is not
 * one of 480/768/1024/1280. It survived review because spec-lint only matched
 * `min-width: <digits>px`, so a rem-valued query was invisible to it; the check
 * now reads any unit. 47.99rem was 767.84px, i.e. this exact boundary.
 *
 * The section padding that used to be re-stated here is gone: it read
 * `var(--section-space, 5rem)`, and --section-space is not a token this theme
 * defines, so it always resolved to the 5rem fallback — the same silent
 * fall-through documented for --font-heading above. --section-y on the base
 * rule now carries every breakpoint step, so no override is needed. */
@media (min-width: 768px) {
	.home-brands__item {
		min-width: clamp(11rem, 18vw, 17rem);
		min-height: clamp(7rem, 10vw, 9rem);
		padding-inline: var(--s-8);
	}
}