/*
 * Trusted by. Figma 2899:68818 desktop: header 513 wide (header/L + body/M grey,
 * centred), 42 gap, two logo rows 1033 wide 42 apart, logos 34 high 24 apart.
 * Mobile 2899:70374: header/L + body/XS, rows 350 wide, 42 apart.
 */

.trusted-by__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 42px;
}

.trusted-by__head { max-width: 513px; }
.trusted-by__head .section-head__title { font: var(--f-header-l); }
.trusted-by__head .section-head__text { font: var(--f-body-m); }

.trusted-by__marquee {
	width: 100%;
	max-width: 1033px;
	overflow: hidden;
}

.trusted-by__belt {
	display: flex;
	width: max-content;
	animation: trusted-by-marquee 45s linear infinite;
}

.trusted-by__marquee--reverse .trusted-by__belt { animation-direction: reverse; }
.trusted-by__marquee:hover .trusted-by__belt { animation-play-state: paused; }

.trusted-by__logos {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-right: 24px;              /* same as the gap: seamless loop */
}

.trusted-by__logo { width: auto; max-width: 402px; height: 34px; object-fit: contain; }

@keyframes trusted-by-marquee {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.trusted-by__belt { animation: none; }
	.trusted-by__marquee { overflow-x: auto; scrollbar-width: none; }
	.trusted-by__logos[aria-hidden="true"] { display: none; }
}

@media (max-width: 767px) {
	.trusted-by__head .section-head__text { font: var(--f-body-xs); }
}