/* CLIENTS — .db-clients   (about, corporate-events, equipment-rental, event-service = 4)
   Pure-CSS marquee. The logo row must be duplicated in the markup so the
   -50% translate loops seamlessly. */
.db-clients { background: var(--sand); border-bottom: 1px solid var(--line); }
/* Section padding lives on __inner only [368:5914 mobile 40px, 368:1462 desktop
   80px]. The marquee used to add another 40/80 of its own, which is why the
   section measured 478px against the design's 428. */
.db-clients .db-clients__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; padding-block: 40px; }
.db-clients__title { font-size: clamp(1.75rem, 9vw, 4.5rem); text-align: center; line-height: 1.05; }
.db-clients__marquee {
	width: 100%; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* Figma lays each logo in a fixed square inside a wider cell — 132 in 232 on
   desktop [368:1465], 80 in 141 on mobile [368:5917] — so the visible gap between
   two logo squares is the frame gap plus both side margins: 16 + 50 + 50 = 116,
   and 16 + 30.5 + 30.5 = 77. Expressed here as a square logo box plus that gap,
   which is the same result with one element instead of two.

   `object-fit: contain` matters even though the current logos happen to match
   their box: a fixed height with `fill` would squash the first logo that does
   not. */
.db-clients .db-clients__row {
	display: flex; align-items: center; width: max-content; gap: 77px;
	animation: db-clients-scroll 40s linear infinite;
}
.db-clients__row img { flex: 0 0 80px; width: 80px; height: 80px; object-fit: contain; }
@keyframes db-clients-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 861px) {
	.db-clients .db-clients__inner { padding-block: 80px; gap: 60px; }
	.db-clients__title { font-size: 4.5rem; }
	.db-clients .db-clients__row { gap: 116px; }
	.db-clients__row img { flex: 0 0 132px; width: 132px; height: 132px; }
}
@media (prefers-reduced-motion: reduce) { .db-clients .db-clients__row { animation: none; } }