.sss-carousel-controls { display: none; }
.sss-carousel-shell { position: relative; }
/* Let the Selected work introduction span the viewport with readable gutters. */
.sss-site.sss-page-home .sss-work-stack__heading {
	width: 100%;
	max-width: none;
	padding-inline: clamp(20px, 4vw, 64px);
}
@media (max-width: 900px) {
	.sss-site .sss-launch-art { display: none !important; }
	.sss-site .sss-launch-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.sss-site .sss-launch-hero__copy { max-width: 760px; }
}
@media (max-width: 1050px) {
	/* Inset the review rail and keep the first card clear of the edge fade. */
	.sss-site.sss-page-home .sss-client-reviews .sss-quote-list {
		padding-inline: 20px;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.sss-site.sss-page-home .sss-client-reviews .sss-quote {
		flex-basis: min(clamp(340px, 34vw, 470px), 100%);
		width: auto;
		min-width: 0;
	}
	.sss-site [data-card-carousel] .sss-carousel-controls {
		display: flex;
		position: relative;
		z-index: 6;
		inset: auto;
		width: max-content;
		gap: 5px;
		margin: 0 4px 12px auto;
		padding: 4px;
		border: 1px solid rgba(215, 200, 167, .8);
		border-radius: 14px;
		background: rgba(255, 255, 255, .86);
		box-shadow: 0 8px 22px rgba(76, 60, 25, .09);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		pointer-events: auto;
	}
	.sss-site [data-card-carousel] .sss-carousel-controls button {
		display: grid;
		place-items: center;
		width: 38px;
		height: 36px;
		padding: 0;
		border: 0;
		border-radius: 10px;
		background: #f9f2e3;
		color: #7a6027;
		box-shadow: none;
		cursor: pointer;
		pointer-events: auto;
		transition: background .2s, color .2s, transform .2s, box-shadow .2s;
	}
	.sss-site [data-card-carousel] .sss-carousel-controls [data-carousel-next] {
		background: #7a6027;
		color: #fff;
		box-shadow: 0 5px 12px rgba(122, 96, 39, .22);
	}
	.sss-site [data-card-carousel] .sss-carousel-controls button:hover {
		transform: translateY(-1px);
		background: #574419;
		color: #fff;
		box-shadow: 0 6px 14px rgba(122, 96, 39, .2);
	}
	.sss-site [data-card-carousel] .sss-carousel-controls button:focus-visible {
		outline: 3px solid #d4a337;
		outline-offset: 2px;
	}
	.sss-site [data-card-carousel] .sss-carousel-controls svg { width: 16px; height: 16px; }
	.sss-site [data-card-carousel] [data-carousel-prev] svg { transform: rotate(180deg); }
	.sss-site .sss-service-grid,
	.sss-site .sss-capabilities__grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 17px;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		overflow-anchor: none;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.sss-site .sss-service-grid::-webkit-scrollbar,
	.sss-site .sss-capabilities__grid::-webkit-scrollbar { display: none; }
	.sss-site .sss-service-grid,
	.sss-site .sss-capabilities__grid { padding: 6px 20px 24px; border: 0; }
	.sss-site .sss-service-grid > .sss-service-card,
	.sss-site .sss-capabilities__grid > .sss-capability-card {
		flex: 0 0 calc((100% - 17px) / 2);
		min-width: 0;
		margin: 0;
	}
	.sss-site .sss-capabilities .sss-carousel-controls button { background: #f7eedb; color: #7b6535; }
	.sss-site .sss-capabilities .sss-carousel-controls [data-carousel-next] { background: #7b6535; color: #fff; box-shadow: 0 5px 12px rgba(123, 101, 53, .22); }
	.sss-site .sss-capabilities .sss-carousel-controls button:hover { background: #7b6535; color: #fff; }
	.sss-site .sss-capabilities__grid > .sss-capability-card { min-height: 360px; }
}
@media (max-width: 700px) {
	.sss-site.sss-page-home .sss-client-reviews .sss-quote {
		flex-basis: min(82vw, 100%);
	}
}
@media (max-width: 680px) {
	.sss-site .sss-service-grid > .sss-service-card,
	.sss-site .sss-capabilities__grid > .sss-capability-card { flex-basis: min(84vw, 100%, 340px); }
	.sss-site .sss-capabilities__grid > .sss-capability-card { min-height: 350px; }
	.sss-site [data-card-carousel] .sss-carousel-controls { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sss-site [data-card-carousel] .sss-carousel-controls button { transition: none; }
}
/* Project cards also switch to the rail on short desktop viewports when the image/copy fit test fails. */
.sss-site .sss-work-stack.is-card-carousel .sss-carousel-controls {
	display: flex;
	position: relative;
	z-index: 6;
	inset: auto;
	width: max-content;
	gap: 5px;
	margin: 0 max(20px, calc((100vw - var(--container)) / 2)) 12px auto;
	padding: 4px;
	border: 1px solid rgba(221, 212, 192, .9);
	border-radius: 14px;
	background: rgba(255, 255, 255, .88);
	box-shadow: 0 8px 22px rgba(76, 60, 25, .1);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	pointer-events: auto;
}
.sss-site .sss-work-stack:not(.is-card-carousel) .sss-carousel-controls { display: none; }
.sss-site .sss-work-stack.is-card-carousel .sss-carousel-controls button {
	display: grid;
	place-items: center;
	width: 38px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: #f7f4ed;
	color: #a17c2e;
	box-shadow: none;
	cursor: pointer;
	pointer-events: auto;
	transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.sss-site .sss-work-stack.is-card-carousel .sss-carousel-controls [data-carousel-next] { background: #a17c2e; color: #fff; box-shadow: 0 5px 12px rgba(161, 124, 46, .22); }
.sss-site .sss-work-stack.is-card-carousel .sss-carousel-controls button:hover { background: #836422; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(161, 124, 46, .2); }
.sss-site .sss-work-stack.is-card-carousel [data-carousel-prev] svg { transform: rotate(180deg); }
.sss-site .sss-work-stack.is-card-carousel .sss-carousel-controls svg { width: 16px; height: 16px; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-stack__scroll { height: auto !important; overflow: hidden; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-stack__stage {
	display: flex;
	position: relative;
	flex-wrap: nowrap;
	gap: 17px;
	padding: 4px max(70px, calc((100vw - var(--container)) / 2)) 26px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	overflow-anchor: none;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.sss-site .sss-work-stack.is-card-carousel .sss-work-stack__stage::-webkit-scrollbar { display: none; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-stack__stage > .sss-work-panel,
.sss-site .sss-work-stack.is-card-carousel .sss-work-stack__stage > .sss-work-panel:nth-child(even) {
	position: relative;
	inset: auto;
	flex: 0 0 min(58vw, 640px);
	height: auto !important;
	min-width: 0;
	overflow: hidden;
	clip-path: none !important;
	border: 1px solid #eae3d2;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 14px 36px rgba(56, 44, 18, .08);
}
.sss-site .sss-work-stack.is-card-carousel .sss-work-panel__inner { display: block; min-height: 0; height: auto; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-panel__visual { display: block; min-height: 0; aspect-ratio: 16 / 9; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-panel__content { display: block; min-height: 0; padding: 48px 24px 25px; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-panel__meta { top: 17px; left: 24px; right: 24px; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-panel__content > div:last-child { max-width: none; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-panel h3 { margin: 7px 0 10px; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.14; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-panel__description { margin-bottom: 10px; font-size: .9rem; line-height: 1.5; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-panel__result { grid-template-columns: 66px 1fr; gap: 8px; margin: 14px 0; padding: 11px 0; font-size: .82rem; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-panel .sss-tags { gap: 5px; margin-bottom: 15px; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-panel .sss-tags li { padding: 4px 8px; font-size: .65rem; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-panel .sss-btn { min-height: 42px; padding: 10px 15px; font-size: .85rem; }
.sss-site .sss-work-stack.is-card-carousel .sss-work-stack__footer { padding-block: 18px 36px; }
@media (max-width: 680px) {
	.sss-site [data-card-carousel] .sss-carousel-controls { margin-bottom: 10px; }
	.sss-site .sss-work-stack.is-card-carousel .sss-carousel-controls { margin-right: 16px; }
	.sss-site .sss-work-stack.is-card-carousel .sss-work-stack__stage > .sss-work-panel,
	.sss-site .sss-work-stack.is-card-carousel .sss-work-stack__stage > .sss-work-panel:nth-child(even) { flex-basis: min(88vw, 100%, 390px); }
	.sss-site .sss-work-stack.is-card-carousel .sss-work-stack__stage { padding-inline: 20px; }
	.sss-site .sss-work-stack.is-card-carousel .sss-work-panel__visual { aspect-ratio: 16 / 10; }
	.sss-site .sss-work-stack.is-card-carousel .sss-work-panel__content { padding: 44px 18px 20px; }
	.sss-site .sss-work-stack.is-card-carousel .sss-work-panel__meta { left: 18px; right: 18px; }
}