/* =============================================================================
   Diakonis — client logos strip ([diakonis_client_logos])
   An auto-scrolling "queue" of client logos, shown below the testimonials on the
   homepage. Design system: .claude/skills/diakonis-design-system.
   NB: the whole site renders inside #page-container{zoom:.8}.
   ============================================================================= */

.dkLogos {
	background: #FFFFFF;
	padding: 46px 0 150px; /* 150px bottom clears the overlapping global CTA band */
	overflow: hidden;
}

/* When the logos follow the testimonials, the testimonials no longer need their
   big 150px bottom padding (that was there to clear the CTA — the logos do it
   now), so tighten the gap between the two. */
.dkTestimonials:has(+ .dkLogos) { padding-bottom: 34px; }

.dkLogos__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 30px;
	text-align: center;
}

.dkLogos__eyebrow {
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 13px;
	font-weight: 600;
	color: #C434C9;
	font-family: switzer, Georgia, "Times New Roman", serif;
}
.dkLogos__title {
	margin: 0 auto 30px;
	max-width: 720px;
	color: #170B3A;
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	font-weight: 800;
	font-size: 30px;
	line-height: 1.3;
}

/* Fade the strip's left/right edges so logos scroll in/out softly. */
.dkLogos__viewport {
	position: relative;
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.dkLogos__track {
	display: flex;
	align-items: center;
	gap: 48px;
	width: max-content;
	animation-name: dkLogosScroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	/* animation-duration is set inline per logo count */
}
.dkLogos:hover .dkLogos__track { animation-play-state: paused; }

.dkLogos__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 170px;
	height: 72px;
	box-sizing: border-box;
	overflow: hidden;
}
.dkLogos__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: contain;
	filter: none;
	opacity: 1;
	transform: scale(var(--dk-logo-scale, 1));
	transform-origin: center;
}

@keyframes dkLogosScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); } /* one visual set; track holds two */
}

/* Accessibility: no motion → a centered static wrap instead of a marquee. */
@media (prefers-reduced-motion: reduce) {
	.dkLogos__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 30px; }
	.dkLogos__viewport { -webkit-mask: none; mask: none; }
}

@media (max-width: 980px) {
	.dkLogos { padding: 34px 0 120px; }
	.dkTestimonials:has(+ .dkLogos) { padding-bottom: 26px; }
	.dkLogos__track { gap: 36px; }
	.dkLogos__item { width: 145px; height: 60px; }
	.dkLogos__title { font-size: 26px; }
}