/**
 * Who We Work With Module
 *
 * Styles for template-parts/modules/who_we_work_with_module.php
 */

.who-we-work-with-module {
	padding: 80px 0;
	background-color: var(--cream);
}

.who-we-work-with-module__heading {
	font-family: var(--header);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	color: var(--black);
	margin-bottom: 20px;
	font-size: 3.5rem;
	line-height: 1.14;
}

.who-we-work-with-module__content {
	font-family: var(--content);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--black);
	margin-bottom: 48px;
	max-width: 660px;
}

.who-we-work-with-module__content p:last-child { margin-bottom: 0; }

/* ============================
   Logo Marquee
============================ */

.who-we-work-with-module__logos-slider {
	overflow: hidden;
	margin-top: 40px;
}

@-webkit-keyframes logo-marquee {
	0%   { -webkit-transform: translate3d( 0, 0, 0 ); transform: translate3d( 0, 0, 0 ); }
	100% { -webkit-transform: translate3d( -50%, 0, 0 ); transform: translate3d( -50%, 0, 0 ); }
}

@keyframes logo-marquee {
	0%   { transform: translate3d( 0, 0, 0 ); }
	100% { transform: translate3d( -50%, 0, 0 ); }
}

.who-we-work-with-module__logos-track {
	display: flex;
	align-items: center;
	width: max-content;
	-webkit-animation: logo-marquee 40s linear infinite;
	animation: logo-marquee 40s linear infinite;
	/* Force GPU compositing — prevents iOS Safari dropping the render layer during scroll */
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	/* Promote to own compositing layer on iOS */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.who-we-work-with-module__logos-track.is-paused {
	animation-play-state: paused;
}

.who-we-work-with-module__logo-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 40px;
	flex-shrink: 0;
	/* Prevents iOS Safari blurring/flickering images on animated parents */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.who-we-work-with-module__logo-link {
	display: block;
}

.who-we-work-with-module__logo-image {
	max-height: 100px;
	width: auto;
			max-width: 220px;
	object-fit: contain;
}

@media (max-width: 992px) {
	.who-we-work-with-module { padding: 60px 0; }
	.who-we-work-with-module__content { margin-bottom: 32px; }
}

@media (max-width: 768px) {
	.who-we-work-with-module { padding: 40px 0; }
	.who-we-work-with-module__logo-slide { padding: 0 24px; }
  .who-we-work-with-module__heading {font-size: 2.25rem; font-weight: 500; line-height: 1.17;}
	
}