/* Body Back Up — Client Logo Carousel
   ------------------------------------------------------------------
   Typography and link colour deliberately inherit from the theme so the
   section reads as part of the site rather than a bolted-on widget.
   Everything else is a CSS custom property you can override.
   ------------------------------------------------------------------ */
.splc {
	--splc-duration: 45s;
	--splc-gap: 28px;
	--splc-box-w: 210px;
	--splc-box-h: 125px;
	--splc-box-bg: #ffffff;
	--splc-radius: 10px;
	--splc-border: rgba(0, 0, 0, 0.06);
	--splc-shadow: 0 1px 3px rgba(16, 40, 48, 0.05), 0 6px 18px rgba(16, 40, 48, 0.05);
	--splc-shadow-hover: 0 2px 6px rgba(16, 40, 48, 0.07), 0 12px 28px rgba(16, 40, 48, 0.09);
	--splc-pad-y: 64px;
	--splc-edge-fade: 90px;
	--splc-max-w: 100%;
	position: relative;
	padding: var(--splc-pad-y) 0;
	background: var(--splc-bg, transparent);
	overflow: hidden;
}
.splc__inner {
	width: 100%;
	max-width: var(--splc-max-w);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
/* ---------- Header ---------- */
.splc__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	margin-bottom: 40px;
}
.splc__headings {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* Inherit the theme's h2 styling. Only spacing is set here. */
.splc__title {
	margin: 0;
	line-height: 1.2;
}
.splc__strapline {
	margin: 0;
	max-width: 60ch;
	opacity: 0.75;
	line-height: 1.6;
}
.splc__cta {
	display: inline-block;
	font-weight: 600;
	text-decoration: none;
	color: var(--splc-accent, inherit);
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
	margin-top: 6px;
	transition: opacity 0.2s ease;
}
.splc__cta:hover,
.splc__cta:focus-visible {
	opacity: 0.7;
	text-decoration: none;
}
/* Left aligned */
.splc--align-left .splc__header {
	align-items: flex-start;
	text-align: left;
}
.splc--align-left .splc__strapline {
	margin-left: 0;
}
/* Left heading, CTA pushed right */
.splc--align-split .splc__header {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	text-align: left;
	gap: 12px 32px;
}
.splc--align-split .splc__cta {
	margin-top: 0;
}
/* ---------- Marquee viewport ---------- */
.splc__viewport {
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
	/* Soft fade at both edges so logos slide in and out rather than clipping. */
	-webkit-mask-image: linear-gradient(to right,
			transparent 0,
			#000 var(--splc-edge-fade),
			#000 calc(100% - var(--splc-edge-fade)),
			transparent 100%);
	mask-image: linear-gradient(to right,
			transparent 0,
			#000 var(--splc-edge-fade),
			#000 calc(100% - var(--splc-edge-fade)),
			transparent 100%);
	/* Room for the hover lift and shadow so neither gets clipped. */
	padding: 10px 0 18px;
}
/* ---------- Track ---------- */
/* The two tracks MUST be byte-for-byte identical in width. Each animates by
   translateX(-100%) of its OWN width, so any difference between them makes the
   seam drift and the gap look uneven. That rules out putting the spacing on the
   flex container (`gap`) plus a one-sided padding on the second track, and it
   rules out `min-width: 100%` — both make one track wider than the other.
   Instead every item carries its own right margin, so the spacing between the
   last item of one track and the first of the next is identical to the spacing
   inside a track, and both tracks measure the same. */
.splc__track {
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: splc-scroll-left var(--splc-duration) linear infinite;
	will-change: transform;
}
.splc--right .splc__track {
	animation-name: splc-scroll-right;
}
@keyframes splc-scroll-left {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-100%, 0, 0);
	}
}
@keyframes splc-scroll-right {
	from {
		transform: translate3d(-100%, 0, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}
.splc--pause-on-hover .splc__viewport:hover .splc__track,
.splc--pause-on-hover .splc__viewport:focus-within .splc__track {
	animation-play-state: paused;
}
/* ---------- Items / white boxes ---------- */
.splc__item {
	flex: 0 0 auto;
	margin: 0 var(--splc-gap) 0 0;
	padding: 0;
	list-style: none;
}
/* Themes commonly style `li` inside content areas. Neutralise it. */
.splc__item::before,
.splc__item::marker {
	content: none;
}
.splc__link {
	display: block;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	outline-offset: 4px;
}
.splc__link:hover,
.splc__link:focus {
	text-decoration: none;
	border: 0;
}
.splc__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--splc-box-w);
	height: var(--splc-box-h);
	padding: 22px 26px;
	background: var(--splc-box-bg);
	border: 1px solid var(--splc-border);
	border-radius: var(--splc-radius);
	box-shadow: var(--splc-shadow);
	box-sizing: border-box;
	transition: box-shadow 0.28s ease, transform 0.28s ease;
}
.splc__box img {
	margin-bottom: 0 !important;
}
.splc__link:hover .splc__box,
.splc__link:focus-visible .splc__box {
	box-shadow: var(--splc-shadow-hover);
	transform: translateY(-4px);
}
.splc__logo {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	/* Themes frequently add a bottom margin to content images, which pushes the
	   logo off-centre inside the box. Zero it explicitly. */
	margin: 0;
	margin-bottom: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	vertical-align: middle;
	object-fit: contain;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
/* ---------- Greyscale until hover ---------- */
.splc--greyscale .splc__logo {
	filter: grayscale(100%);
	opacity: 0.68;
}
.splc--greyscale .splc__item:hover .splc__logo,
.splc--greyscale .splc__link:focus-visible .splc__logo {
	filter: grayscale(0);
	opacity: 1;
}
/* ---------- Responsive ---------- */
@media (max-width: 782px) {
	.splc {
		--splc-box-w: 165px;
		--splc-box-h: 100px;
		--splc-gap: 18px;
		--splc-pad-y: 44px;
		--splc-edge-fade: 44px;
	}
	.splc__header {
		margin-bottom: 28px;
	}
	.splc--align-split .splc__header {
		flex-direction: column;
		align-items: flex-start;
	}
}
@media (max-width: 480px) {
	.splc {
		--splc-box-w: 138px;
		--splc-box-h: 86px;
		--splc-gap: 14px;
		--splc-edge-fade: 28px;
	}
}
/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	.splc__track {
		animation: none;
	}
	.splc__viewport {
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}
	.splc__track[aria-hidden="true"] {
		display: none;
	}
	.splc__item {
		scroll-snap-align: start;
	}
	.splc__box,
	.splc__logo {
		transition: none;
	}
}
/* Set by JS when there are too few logos to fill the viewport. */
.splc.is-static .splc__track {
	animation: none;
}
.splc.is-static .splc__viewport {
	justify-content: center;
	-webkit-mask-image: none;
	mask-image: none;
}
.splc.is-static .splc__track[aria-hidden="true"] {
	display: none;
}
/* No following item to space away from, so drop the trailing margin or the
   centred row sits one gap off-centre. */
.splc.is-static .splc__item:last-child {
	margin-right: 0;
}