/* ==========================================================================
   Safetech Case Studies – Built by Muhammad
   --------------------------------------------------------------------------
   Every rule is scoped under .stcs-scope and every class carries the `stcs-`
   prefix, so nothing here can touch Salient, WPBakery or another plugin — and
   nothing they do leaks in.

   Colours, sizes and spacing all come from CSS variables the plugin writes
   onto the section wrapper from the settings screen, so this file does not
   need editing to restyle anything.

   Salient styles headings, links, lists and images from selectors heavier
   than a single class, so the properties that decide how this looks are
   marked !important. Fonts are inherited on purpose unless one is set.
   ========================================================================== */

.stcs-scope {
	/* Fallbacks — the plugin overrides these inline from the settings. */
	--stcs-ff: inherit;
	--stcs-base-size: 16px;
	--stcs-max-w: 1240px;
	--stcs-side-pad: 28px;
	--stcs-sec-bg: #fff;
	--stcs-sec-pad: 78px;

	--stcs-eyebrow-bg: #e9f6f1;
	--stcs-eyebrow-col: #1f9c6b;
	--stcs-heading-size: 28px;
	--stcs-heading-col: #000;
	--stcs-intro-size: 16px;
	--stcs-intro-col: #5f5f5f;
	--stcs-head-gap: 34px;

	--stcs-card-w: 328px;
	--stcs-card-w-tab: 300px;
	--stcs-card-w-mob: 240px;
	--stcs-gap: 22px;
	--stcs-card-bg: #fff;
	--stcs-card-bd-col: #e7e5e0;
	--stcs-card-bd-w: 1px;
	--stcs-card-radius: 18px;
	--stcs-hover-lift: 6px;
	--stcs-hover-bd: #0a0a0a;
	--stcs-hover-shadow: 0 8px 26px rgba(18, 21, 26, .07);

	--stcs-logo-bg: #f6f5f2;
	--stcs-logo-bg-dark: #1b1b1b;
	--stcs-logo-h: 180px;
	--stcs-logo-pad: 28px;
	--stcs-img-max-h: 96px;
	--stcs-img-max-w: 100%;
	--stcs-img-fit: contain;
	--stcs-img-opacity: 1;

	--stcs-body-pad: 22px 24px 24px;
	--stcs-body-gap: 12px;
	--stcs-title-size: 19px;
	--stcs-title-weight: 700;
	--stcs-title-col: #000;
	--stcs-title-lh: 1.3;

	--stcs-chip-bg: #f6f5f2;
	--stcs-chip-col: #5f5f5f;
	--stcs-chip-size: 11px;
	--stcs-chip-pad: 5px 11px;
	--stcs-chip-radius: 999px;
	--stcs-chip-gap: 7px;

	--stcs-badge-bg: #1f9c6b;
	--stcs-badge-col: #fff;

	--stcs-btn-size: 13.5px;
	--stcs-btn-weight: 800;
	--stcs-btn-col: #0a0a0a;
	--stcs-btn-bg: #0a0a0a;
	--stcs-btn-hov-col: #1f9c6b;
	--stcs-btn-hov-bg: #1f9c6b;
	--stcs-btn-radius: 999px;
	--stcs-btn-pad: 9px 16px;
	--stcs-btn-gap: 10px;

	--stcs-arrow-size: 52px;
	--stcs-arrow-icon: 18px;
	--stcs-arrow-bg: #fff;
	--stcs-arrow-col: #0a0a0a;
	--stcs-arrow-bd: #e7e5e0;
	--stcs-arrow-hov-bg: #0a0a0a;
	--stcs-arrow-hov-col: #fff;
	--stcs-arrow-radius: 999px;
	--stcs-arrow-shadow: 0 14px 34px rgba(18, 21, 26, .16);
	--stcs-rail-pad: 68px;

	--stcs-bar-h: 3px;
	--stcs-bar-track: #e7e5e0;
	--stcs-bar-fill: #0a0a0a;
	--stcs-bar-radius: 999px;
	--stcs-bar-gap: 20px;

	--stcs-lg-card-w: 224px;
	--stcs-lg-card-h: 140px;
	--stcs-lg-card-pad: 24px;
	--stcs-lg-card-bg: #fff;
	--stcs-lg-card-bd-col: #e7e5e0;
	--stcs-lg-card-bd-w: 1px;
	--stcs-lg-card-radius: 14px;
	--stcs-lg-hover-lift: 6px;
	--stcs-lg-hover-bd: #0a0a0a;
	--stcs-lg-img-max-h: 80px;
	--stcs-lg-img-fit: contain;
	--stcs-lg-img-opacity: 1;
	--stcs-lg-name-bg: #0a0a0a;
	--stcs-lg-name-col: #fff;
	--stcs-lg-name-size: 11.5px;
	--stcs-lg-gap: 18px;
	--stcs-lg-row-gap: 18px;
	--stcs-lg-fade-w: 110px;
	--stcs-lg-fade-col: #f6f5f2;
	--stcs-lg-duration: 60s;

	box-sizing: border-box;
	display: block;
	/* Salient's per-column "Centered Text" option sets text-align on the
	   column, which would otherwise re-align this whole section. */
	text-align: left;
	font-family: var(--stcs-ff);
	font-size: var(--stcs-base-size);
	background: var(--stcs-sec-bg);
	padding: var(--stcs-sec-pad) 0;
}

.stcs-scope *,
.stcs-scope *::before,
.stcs-scope *::after { box-sizing: border-box; }

.stcs-container {
	width: 100%;
	max-width: var(--stcs-max-w);
	margin: 0 auto;
	padding: 0 var(--stcs-side-pad);
}

.stcs-scope .stcs-icon {
	width: 14px;
	height: 14px;
	flex: none;
	display: inline-block;
	vertical-align: middle;
	transition: transform .25s ease;
}

.stcs-empty {
	margin: 0;
	padding: 14px 18px;
	background: #fff8e5;
	border: 1px solid #f0d9a0;
	border-radius: 8px;
	color: #6b5314;
	font-size: 14px;
}

/* ---- section heading ---------------------------------------------------- */
.stcs-scope .stcs-head { margin: 0 0 var(--stcs-head-gap); }

.stcs-scope .stcs-eyebrow {
	display: inline-block;
	background: var(--stcs-eyebrow-bg);
	color: var(--stcs-eyebrow-col);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.4;
	padding: 6px 13px;
	border-radius: 999px;
	margin: 0 0 14px;
}

.stcs-scope .stcs-h2 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--stcs-heading-size) !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	color: var(--stcs-heading-col) !important;
	letter-spacing: normal;
	text-transform: none;
}

.stcs-scope .stcs-intro {
	margin: 10px 0 0 !important;
	padding: 0 !important;
	font-size: var(--stcs-intro-size) !important;
	line-height: 1.62 !important;
	color: var(--stcs-intro-col) !important;
	max-width: 72ch;
}

/* ==========================================================================
   1. CASE STUDY CAROUSEL
   ========================================================================== */

.stcs-cases .stcs-rail {
	position: relative;
	padding: 0 var(--stcs-rail-pad);
}
.stcs-cases.stcs-no-arrows .stcs-rail { padding: 0; }

.stcs-cases .stcs-track {
	display: flex;
	gap: var(--stcs-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	/* Room for the hover lift and its shadow, which would otherwise be clipped
	   by the scroll container. Follows the setting rather than a literal. */
	padding: calc(var(--stcs-hover-lift) + 14px) 2px calc(var(--stcs-hover-lift) + 14px);
	margin: calc((var(--stcs-hover-lift) + 14px) * -1) 0;
	touch-action: pan-y;
	list-style: none;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.stcs-cases .stcs-track::-webkit-scrollbar { display: none; }
.stcs-cases .stcs-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

/* ---- card --------------------------------------------------------------- */
.stcs-scope .stcs-card {
	flex: 0 0 var(--stcs-card-w);
	max-width: var(--stcs-card-w);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--stcs-card-bg);
	border: var(--stcs-card-bd-w) solid var(--stcs-card-bd-col);
	border-radius: var(--stcs-card-radius);
	overflow: hidden;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.stcs-scope .stcs-card:hover {
	transform: translateY(calc(var(--stcs-hover-lift) * -1));
	box-shadow: var(--stcs-hover-shadow);
	border-color: var(--stcs-hover-bd);
}

.stcs-scope .stcs-card__logo {
	position: relative;
	height: var(--stcs-logo-h);
	padding: var(--stcs-logo-pad);
	display: grid;
	place-items: center;
	background: var(--stcs-logo-bg);
	border-bottom: var(--stcs-card-bd-w) solid var(--stcs-card-bd-col);
}
.stcs-scope .stcs-card--dark .stcs-card__logo {
	background: var(--stcs-logo-bg-dark);
	border-bottom-color: var(--stcs-logo-bg-dark);
}

/* Salient ships `.row .col img{margin-bottom:15px;max-width:100%}` at a
   higher specificity, and every WPBakery column is a `.col` inside `.row`,
   so the layout-critical properties have to be marked. */
.stcs-scope .stcs-card__img {
	display: block;
	/* A real box, so the image is not 0x0 before it loads — a zero-sized
	   lazy image is never fetched — and so object-fit has something to work
	   against. scale-down never enlarges small artwork. */
	width: 100% !important;
	height: var(--stcs-img-max-h);
	max-width: var(--stcs-img-max-w) !important;
	max-height: var(--stcs-img-max-h) !important;
	object-fit: var(--stcs-img-fit);
	opacity: var(--stcs-img-opacity);
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: filter .3s ease, opacity .3s ease;
}

.stcs-scope .stcs-card__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	background: var(--stcs-badge-bg);
	color: var(--stcs-badge-col);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .1em;
	line-height: 1.4;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 999px;
}

.stcs-scope .stcs-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--stcs-body-gap);
	flex: 1;
	padding: var(--stcs-body-pad);
}

.stcs-scope .stcs-card__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--stcs-title-size) !important;
	font-weight: var(--stcs-title-weight) !important;
	line-height: var(--stcs-title-lh) !important;
	color: var(--stcs-title-col) !important;
	letter-spacing: normal;
	text-transform: none;
}

/* `ul.` qualified and !important: Salient ships
   `.wpb_column.centered-text ul{display:block!important}` under 1000px, which
   would otherwise stack these into a column. */
.stcs-scope ul.stcs-card__chips {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--stcs-chip-gap);
	text-align: left !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.stcs-scope .stcs-card__chips li {
	margin: 0 !important;
	padding: var(--stcs-chip-pad) !important;
	list-style: none !important;
	background: var(--stcs-chip-bg);
	color: var(--stcs-chip-col);
	font-size: var(--stcs-chip-size);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.5;
	border-radius: var(--stcs-chip-radius);
}
.stcs-scope .stcs-card__chips li::before,
.stcs-scope .stcs-card__chips li::marker { content: none !important; }

/* ---- buttons ------------------------------------------------------------ */
.stcs-scope .stcs-card__actions {
	margin-top: auto;
	padding-top: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--stcs-btn-gap);
	align-items: center;
}

.stcs-scope .stcs-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--stcs-btn-size);
	font-weight: var(--stcs-btn-weight);
	letter-spacing: .03em;
	line-height: 1.2;
	color: var(--stcs-btn-col);
	text-decoration: none !important;
	border: 1px solid transparent;
	background: none;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.stcs-scope .stcs-btn:hover,
.stcs-scope .stcs-btn:focus-visible { color: var(--stcs-btn-hov-col); }
.stcs-scope .stcs-btn:hover .stcs-icon { transform: translateX(4px); }

/* outlined and filled variants */
.stcs-btns--outline .stcs-btn,
.stcs-btns--solid .stcs-btn {
	padding: var(--stcs-btn-pad);
	border-radius: var(--stcs-btn-radius);
}
.stcs-btns--outline .stcs-btn { border-color: var(--stcs-btn-bg); }
.stcs-btns--outline .stcs-btn:hover,
.stcs-btns--outline .stcs-btn:focus-visible {
	background: var(--stcs-btn-hov-bg);
	border-color: var(--stcs-btn-hov-bg);
	color: var(--stcs-btn-on-bg, #fff);
}
.stcs-btns--solid .stcs-btn {
	background: var(--stcs-btn-bg);
	border-color: var(--stcs-btn-bg);
	color: var(--stcs-btn-on-bg, #fff);
}
.stcs-btns--solid .stcs-btn:hover,
.stcs-btns--solid .stcs-btn:focus-visible {
	background: var(--stcs-btn-hov-bg);
	border-color: var(--stcs-btn-hov-bg);
	color: var(--stcs-btn-on-bg, #fff);
}
.stcs-btns--solid .stcs-btn--site,
.stcs-btns--outline .stcs-btn--site { opacity: .92; }

/* ---- image colour filters ---------------------------------------------- */
.stcs-filter--grayscale .stcs-card__img,
.stcs-filter--grayscale .stcs-logo__img { filter: grayscale(1); }

.stcs-filter--gray-hover .stcs-card__img,
.stcs-filter--gray-hover .stcs-logo__img { filter: grayscale(1); }
.stcs-filter--gray-hover .stcs-card:hover .stcs-card__img,
.stcs-filter--gray-hover .stcs-logo:hover .stcs-logo__img { filter: grayscale(0); }

.stcs-filter--dim .stcs-card__img,
.stcs-filter--dim .stcs-logo__img { opacity: .55; }
.stcs-filter--dim .stcs-card:hover .stcs-card__img,
.stcs-filter--dim .stcs-logo:hover .stcs-logo__img { opacity: 1; }

/* ---- arrows ------------------------------------------------------------- */
.stcs-scope .stcs-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: var(--stcs-arrow-size);
	height: var(--stcs-arrow-size);
	padding: 0;
	display: grid;
	place-items: center;
	/* Salient styles every <button> with !important — including
	   `body[data-button-style*="slightly_rounded"] button{border-radius:4px}` —
	   so the arrow's own shape has to be marked to survive. */
	border: 1px solid var(--stcs-arrow-bd) !important;
	border-radius: var(--stcs-arrow-radius) !important;
	background: var(--stcs-arrow-bg) !important;
	color: var(--stcs-arrow-col) !important;
	box-shadow: var(--stcs-arrow-shadow) !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.stcs-scope .stcs-nav .stcs-icon {
	width: var(--stcs-arrow-icon);
	height: var(--stcs-arrow-icon);
}
.stcs-scope .stcs-nav:hover:not(:disabled),
.stcs-scope .stcs-nav:focus-visible:not(:disabled) {
	background: var(--stcs-arrow-hov-bg) !important;
	border-color: var(--stcs-arrow-hov-bg) !important;
	color: var(--stcs-arrow-hov-col) !important;
}
.stcs-scope .stcs-nav:hover .stcs-icon { transform: none; }
.stcs-scope .stcs-nav:disabled {
	opacity: .32;
	pointer-events: none;
	box-shadow: none;
}
.stcs-nav--prev { left: 0; }
.stcs-nav--next { right: 0; }

/* ---- progress bar ------------------------------------------------------- */
.stcs-cases .stcs-bar {
	position: relative;
	height: var(--stcs-bar-h);
	margin: var(--stcs-bar-gap) var(--stcs-rail-pad) 0;
	background: var(--stcs-bar-track);
	border-radius: var(--stcs-bar-radius);
	overflow: hidden;
}
.stcs-cases.stcs-no-arrows .stcs-bar { margin-left: 0; margin-right: 0; }
.stcs-cases .stcs-bar i {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 20%;
	background: var(--stcs-bar-fill);
	border-radius: var(--stcs-bar-radius);
}

/* ==========================================================================
   2. LOGO MARQUEE
   ========================================================================== */

.stcs-logos .stcs-marquee {
	position: relative;
	overflow: hidden;
	padding: 6px 0;
}
.stcs-logos .stcs-marquee + .stcs-marquee { margin-top: var(--stcs-lg-row-gap); }

.stcs-logos .stcs-marquee::before,
.stcs-logos .stcs-marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--stcs-lg-fade-w);
	z-index: 2;
	pointer-events: none;
}
.stcs-logos .stcs-marquee::before {
	left: 0;
	background: linear-gradient(90deg, var(--stcs-lg-fade-col), rgba(255, 255, 255, 0));
}
.stcs-logos .stcs-marquee::after {
	right: 0;
	background: linear-gradient(270deg, var(--stcs-lg-fade-col), rgba(255, 255, 255, 0));
}
.stcs-logos.stcs-no-fade .stcs-marquee::before,
.stcs-logos.stcs-no-fade .stcs-marquee::after { content: none; }

/* The spacing lives on the items, not as a flex `gap`. The keyframes shift
   the strip by exactly -50%, so the track has to be two identical halves —
   a flex gap makes the total N*(W+G) minus one G, leaving every loop half a
   gap short and visibly jumping. As an item margin the maths is exact.
   `ul.` and !important defend against Salient's centered-text rules. */
.stcs-logos ul.stcs-mtrack {
	display: flex !important;
	width: max-content !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	text-align: left !important;
	will-change: transform;
}
.stcs-logos .stcs-mtrack > li {
	margin: 0 var(--stcs-lg-gap) 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.stcs-logos .stcs-mtrack > li::before,
.stcs-logos .stcs-mtrack > li::marker { content: none !important; }

.stcs-logos .stcs-mtrack--left { animation: stcs-slide-left var(--stcs-lg-duration) linear infinite; }
.stcs-logos .stcs-mtrack--right { animation: stcs-slide-right var(--stcs-lg-duration) linear infinite; }

@keyframes stcs-slide-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes stcs-slide-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

.stcs-logos.stcs-pause-hover .stcs-marquee:hover .stcs-mtrack,
.stcs-logos.stcs-pause-hover .stcs-marquee:focus-within .stcs-mtrack { animation-play-state: paused; }
.stcs-logos .stcs-marquee.is-paused .stcs-mtrack { animation-play-state: paused; }

.stcs-scope .stcs-logo {
	flex: 0 0 auto;
	position: relative;
	display: grid;
	place-items: center;
	width: var(--stcs-lg-card-w);
	height: var(--stcs-lg-card-h);
	padding: var(--stcs-lg-card-pad);
	background: var(--stcs-lg-card-bg);
	border: var(--stcs-lg-card-bd-w) solid var(--stcs-lg-card-bd-col);
	border-radius: var(--stcs-lg-card-radius);
	overflow: hidden;
	text-decoration: none !important;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.stcs-scope .stcs-logo__img {
	display: block;
	width: 100% !important;
	height: var(--stcs-lg-img-max-h);
	max-width: 100% !important;
	max-height: var(--stcs-lg-img-max-h) !important;
	object-fit: var(--stcs-lg-img-fit);
	opacity: var(--stcs-lg-img-opacity);
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: filter .3s ease, opacity .3s ease;
}

/* Applies to plain tiles too — the lift and border are settings, and the
   shipped logos have no links, so gating on --link hid them entirely. */
.stcs-scope .stcs-logo:hover,
.stcs-scope .stcs-logo--link:focus-visible {
	transform: translateY(calc(var(--stcs-lg-hover-lift) * -1));
	box-shadow: var(--stcs-hover-shadow);
	border-color: var(--stcs-lg-hover-bd);
}

.stcs-scope .stcs-logo__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 9px 12px;
	background: var(--stcs-lg-name-bg);
	color: var(--stcs-lg-name-col);
	font-size: var(--stcs-lg-name-size);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity .28s ease, transform .28s ease;
}
.stcs-scope .stcs-logo--link:hover .stcs-logo__name,
.stcs-scope .stcs-logo--link:focus-visible .stcs-logo__name {
	opacity: 1;
	transform: none;
}
.stcs-logos.stcs-no-names .stcs-logo__name { display: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	.stcs-scope { padding: calc(var(--stcs-sec-pad) * .8) 0; }
	.stcs-scope .stcs-card {
		flex-basis: var(--stcs-card-w-tab);
		max-width: var(--stcs-card-w-tab);
	}
}

@media (max-width: 720px) {
	.stcs-scope { padding: calc(var(--stcs-sec-pad) * .66) 0; }
	.stcs-container { padding: 0 20px; }
	.stcs-scope .stcs-card {
		flex-basis: var(--stcs-card-w-mob);
		max-width: var(--stcs-card-w-mob);
	}
	/* On a phone there is no room for arrow gutters either side: they left a
	   202px window for a 240px card, so the card was cut off. The rail becomes
	   a two-row flex — full-width track, arrows centred underneath — which
	   gives the card the whole width and puts the arrows clear of it. */
	.stcs-cases .stcs-rail {
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
	}
	.stcs-cases .stcs-track { order: 1; flex: 1 1 100%; }
	.stcs-scope .stcs-nav {
		order: 2;
		position: static;
		transform: none;
		width: calc(var(--stcs-arrow-size) * .82);
		height: calc(var(--stcs-arrow-size) * .82);
	}
	.stcs-scope .stcs-nav:hover:not(:disabled) { transform: none; }
	.stcs-cases .stcs-bar { margin-left: 0; margin-right: 0; }

	/* A little smaller so a two-word client name still sits on one line. */
	.stcs-scope .stcs-card__title { font-size: calc(var(--stcs-title-size) * .89) !important; }
	.stcs-scope .stcs-card__chips li { font-size: calc(var(--stcs-chip-size) * .95); padding: 4px 9px !important; }
	.stcs-scope .stcs-btn { font-size: calc(var(--stcs-btn-size) * .92); }
	.stcs-scope .stcs-card__body { padding: 18px 18px 20px; }
	.stcs-scope .stcs-card__logo { height: calc(var(--stcs-logo-h) * .83); }
	/* Tiles scale with their settings rather than being pinned, so a bigger
	   card set on desktop still shrinks proportionally here. */
	.stcs-scope .stcs-logo {
		width: calc(var(--stcs-lg-card-w) * .76);
		height: calc(var(--stcs-lg-card-h) * .8);
		padding: calc(var(--stcs-lg-card-pad) * .75);
	}
	.stcs-scope .stcs-logo__img { max-height: calc(var(--stcs-lg-img-max-h) * .78); }
	.stcs-logos .stcs-marquee::before,
	.stcs-logos .stcs-marquee::after { width: 48px; }
}

/* Only when the site owner has left "respect reduce motion" switched on. */
@media (prefers-reduced-motion: reduce) {
	.stcs-respect-motion .stcs-mtrack {
		animation: none !important;
		width: auto;
	}
	.stcs-respect-motion.stcs-logos .stcs-marquee { overflow-x: auto; }
	.stcs-respect-motion .stcs-card,
	.stcs-respect-motion .stcs-logo,
	.stcs-respect-motion .stcs-nav,
	.stcs-respect-motion .stcs-icon { transition: none; }
	.stcs-respect-motion .stcs-card:hover { transform: none; }
}