/* Block: Logo's. Client logos in one muted green tone: each logo is a mask over a filled box, so
 * coloured, white and black logos (PNG or SVG, transparent background) come out the same. Sizes come from the partial
 * (--lw, --lh in em, equal visual area); the row's font size scales them down on small screens. */
.logos { padding-block: var(--sp-block); }
.logos-title { font-size: var(--fs-h3); line-height: 1.1; margin-bottom: 32px; }
.logos-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(28px, 3vw, 48px) clamp(24px, 2.4vw, 40px);
	font-size: clamp(12px, 1.15vw, 17px);
}
.logo { display: flex; align-items: center; justify-content: center; }
.logo-link { display: block; border-radius: 4px; }
.logo-mark {
	display: block;
	width: var(--lw, 8em);
	height: var(--lh, 3em);
	background-color: var(--ink-soft);
	-webkit-mask: var(--logo) center / contain no-repeat;
	mask: var(--logo) center / contain no-repeat;
}

@media (max-width: 900px) {
	.logos-row { justify-content: center; font-size: 11px; gap: 28px 36px; }
}