/* Homepage sections (front-page.php / page-es.php). Loaded conditionally
   — see inc/enqueue-assets.php. */

/* Hero */
.sss-hero__body {
	max-width: 48ch;
}

.sss-hero__actions {
	display: flex;
	gap: var(--sss-space-3);
	flex-wrap: wrap;
	margin-block: var(--sss-space-4);
}

.sss-hero__supporting {
	margin-bottom: var(--sss-space-2);
}

.sss-hero__supporting a {
	color: var(--sss-blue);
	font-weight: 600;
	font-size: 1.0625rem;
}

.sss-hero__location {
	font-size: 0.9375rem;
	color: var(--sss-slate);
	margin-bottom: 0;
}

/* Hero background video — fills the section behind the text with a dark
   scrim layered on top for contrast, per client direction. Darkest at the
   left where the left-aligned message sits, easing off to the right. */
.sss-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.sss-hero__bg-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sss-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 100deg, rgba( 10, 20, 35, 0.86 ) 0%, rgba( 10, 20, 35, 0.68 ) 45%, rgba( 10, 20, 35, 0.48 ) 100% );
}

/* Pulsing camera hotspots — hovering/focusing one reveals a small card
   with a camera image, as if pointing out where a camera like that one
   would go. Originally on the homepage hero photo, now used on the
   "See more. Control more. Know sooner." diagram (connected.php)
   instead — class names kept as-is when the markup moved. */
.sss-hero__dot {
	position: absolute;
	z-index: 3;
	width: 18px;
	height: 18px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.sss-hero__dot-ping {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--sss-blue);
	opacity: 0.65;
	animation: sss-dot-pulse 2.2s ease-out infinite;
}

.sss-hero__dot-core {
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--sss-white);
	box-shadow: 0 0 0 2px var(--sss-blue);
}

@keyframes sss-dot-pulse {
	0% {
		transform: scale(1);
		opacity: 0.65;
	}
	100% {
		transform: scale(2.6);
		opacity: 0;
	}
}

.sss-hero__dot-card {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	padding: 12px;
	background: var(--sss-white);
	border-radius: var(--sss-radius-md);
	box-shadow: var(--sss-shadow-md);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.sss-hero__dot-card img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.sss-hero__dot:hover .sss-hero__dot-card,
.sss-hero__dot:focus-visible .sss-hero__dot-card {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.sss-hero__dot-ping {
		animation: none;
		opacity: 0.35;
	}
}

/* Floating features band — a contained, gradient card that overlaps the
   hero above and the solutions section below on the z-axis (not a
   full-width section of its own). */
.sss-floating-features {
	position: relative;
	z-index: 2;
}

.sss-floating-features__card {
	width: fit-content;
	max-width: calc(100% - 40px);
	margin: -56px auto -56px;
	background: linear-gradient(115deg, var(--sss-blue), var(--sss-cyan));
	border-radius: var(--sss-radius-lg);
	box-shadow: var(--sss-shadow-md);
	padding: var(--sss-space-4) var(--sss-space-7);
}

.sss-floating-features__list {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--sss-space-2) var(--sss-space-4);
}

.sss-floating-features__item {
	display: flex;
	align-items: center;
	gap: var(--sss-space-2);
	color: var(--sss-white);
	font-weight: 600;
	font-size: 0.9375rem;
}

.sss-floating-features__item .sss-icon {
	color: var(--sss-white);
}

@media (max-width: 1023px) {
	.sss-floating-features__card {
		margin-block: -40px;
		padding-inline: var(--sss-space-5);
	}

	.sss-floating-features__list {
		justify-content: flex-start;
	}
}

@media (max-width: 767px) {
	/* Hidden on mobile per client direction. */
	.sss-floating-features {
		display: none;
	}

	/* The "4 free cameras" promo numeral had no mobile reduction at all —
	   88px/44px fixed regardless of viewport. */
	.sss-solutions__promo-number {
		font-size: 3.5rem;
	}

	.sss-solutions__promo-label-top {
		font-size: 1rem;
	}

	.sss-solutions__promo-label-bottom {
		font-size: 1.875rem;
	}
}

/* Security solutions overview — dark navy section, sits below the
   floating-features band overlapping it from the hero above. */
.sss-solutions {
	position: relative;
	background: var(--sss-navy);
	padding-block: calc(var(--sss-section-major) + 40px) calc(var(--sss-section-compact) + 40px);
	scroll-margin-top: 60px;
}

.sss-solutions h2 {
	color: var(--sss-white);
}

.sss-solutions .sss-lede {
	color: var(--sss-cloud);
}

.sss-solutions__top {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--sss-space-6);
	align-items: center;
	padding-bottom: var(--sss-space-6);
	margin-bottom: var(--sss-space-6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sss-solutions__intro {
	max-width: 720px;
}

.sss-solutions__cta {
	margin-top: var(--sss-space-4);
}

/* Promo card — a distinct offer callout, not another feature tile: a real
   product photo up top (the human touch a flat icon/gradient card was
   missing), a moving light sweep for polish, and the copy compressed into
   one compact footer row so the card stays short rather than tall. */
.sss-solutions__promo {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background:
		radial-gradient(circle at 85% 100%, rgba(71, 183, 200, 0.18), transparent 55%),
		linear-gradient(160deg, rgba(23, 107, 255, 0.18), rgba(10, 20, 35, 0.4));
	border: 1px solid rgba(71, 183, 200, 0.4);
	border-radius: var(--sss-radius-lg);
	box-shadow:
		0 0 1px rgba(71, 183, 200, 0.6),
		0 0 32px rgba(23, 107, 255, 0.28),
		0 0 64px rgba(71, 183, 200, 0.18);
	will-change: transform;
}

/* Diagonal light sweep, looping slowly and subtly — pure CSS, no JS. */
.sss-solutions__promo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
	background-size: 250% 250%;
	background-position: -100% -100%;
	animation: sss-promo-sweep 5s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

@keyframes sss-promo-sweep {
	0% {
		background-position: -60% -60%;
	}
	50% {
		background-position: 40% 40%;
	}
	100% {
		background-position: -60% -60%;
	}
}

.sss-solutions__promo-media {
	position: relative;
	line-height: 0;
	background: #000;
}

.sss-solutions__promo-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 536;
	object-fit: contain;
	display: block;
}

/* Fallback asset (solutions-promo-devices.webp) keeps its original ratio. */
.sss-solutions__promo-media--legacy img {
	aspect-ratio: 1200 / 406;
}

.sss-solutions__promo-badge {
	position: absolute;
	z-index: 2;
	top: var(--sss-space-3);
	right: var(--sss-space-3);
	padding: 5px 12px;
	font-family: var(--sss-font-mono);
	font-size: 0.6875rem;
	line-height: 1.4;
	white-space: nowrap;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sss-navy);
	background: var(--sss-cyan);
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(4, 10, 20, 0.25);
}

.sss-solutions__promo-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	row-gap: var(--sss-space-3);
	column-gap: var(--sss-space-4);
	padding: var(--sss-space-3) var(--sss-space-5);
}

.sss-solutions__promo-headline {
	display: flex;
	align-items: stretch;
	gap: var(--sss-space-3);
}

.sss-solutions__promo-number {
	font-family: var(--sss-font-heading);
	font-weight: 800;
	font-size: 5.5rem;
	line-height: 1;
	white-space: nowrap;
}

/* Two independently-sized lines instead of one wrapped string: "free"
   runs much bigger than "cameras" so its rendered width roughly matches
   the word above it. The pair stretches to the same overall height as
   the big number beside it, but stays anchored together at the bottom
   (flex-end + small gap) instead of spread apart across that height. */
.sss-solutions__promo-label {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	font-family: var(--sss-font-heading);
	color: var(--sss-white);
}

.sss-solutions__promo-label-top {
	font-weight: 600;
	font-size: 1.1875rem;
	line-height: 1;
}

.sss-solutions__promo-label-bottom {
	font-weight: 800;
	font-size: 2.75rem;
	line-height: 1;
}

.sss-solutions__promo-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--sss-space-2);
	text-align: right;
	margin-left: auto;
}

.sss-solutions__promo-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--sss-space-2);
	padding: 9px 18px;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--sss-cyan);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(71, 183, 200, 0.3);
	border-radius: 999px;
	white-space: nowrap;
}

.sss-solutions__promo-pill-icon {
	display: inline-flex;
}

.sss-solutions__promo-pill-icon .sss-icon {
	width: 18px;
	height: 18px;
}

.sss-solutions__promo-note {
	font-size: 0.9375rem;
	color: var(--sss-cloud);
	opacity: 0.9;
}

@media (max-width: 480px) {
	.sss-solutions__promo-body {
		flex-direction: column;
		align-items: flex-start;
	}

	.sss-solutions__promo-side {
		align-items: flex-start;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sss-solutions__promo::after {
		animation: none;
	}
}

@media (max-width: 1023px) {
	.sss-solutions__top {
		grid-template-columns: 1fr;
	}
}

/* Solution cards — icon + title front face; hovering/focusing lifts the
   front to reveal the smaller description card stacked behind it. */
.sss-solution-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sss-space-5) var(--sss-space-4);
}

.sss-solution-card {
	position: relative;
	min-height: 220px;
}

/* The back card's frame (background + stroke) is visible at rest — the
   small sliver below the front card hints there's more here. Only the
   description text stays hidden until hover/focus, so nothing feels
   broken or empty about that resting sliver. */
.sss-solution-card__back {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(160deg, var(--sss-ink), var(--sss-navy) 70%);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--sss-radius-lg);
	padding: var(--sss-space-4);
	z-index: 1;
}

.sss-solution-card__back p {
	margin: 0;
	color: var(--sss-cloud);
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.sss-solution-card__front {
	position: absolute;
	inset: 0 4px auto 4px;
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	height: 176px;
	background: var(--sss-cloud);
	border-radius: var(--sss-radius-lg);
	box-shadow: var(--sss-shadow-md);
	color: var(--sss-ink);
	overflow: hidden;
	transition: transform 0.25s ease;
}

.sss-solution-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--sss-space-3);
	padding: var(--sss-space-4);
	min-width: 0;
}

.sss-solution-card__front .sss-icon {
	width: 26px;
	height: 26px;
	color: var(--sss-blue);
}

.sss-solution-card__title {
	font-family: var(--sss-font-heading);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.25;
}

.sss-solution-card__image {
	display: block;
	flex-shrink: 0;
	width: 38%;
	position: relative;
	overflow: hidden;
}

.sss-solution-card__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sss-solution-card:hover .sss-solution-card__front,
.sss-solution-card:focus-within .sss-solution-card__front,
.sss-solution-card.is-lifted .sss-solution-card__front {
	transform: translateY(-28px);
}

.sss-solution-card:hover .sss-solution-card__back p,
.sss-solution-card:focus-within .sss-solution-card__back p,
.sss-solution-card.is-lifted .sss-solution-card__back p {
	opacity: 1;
}

@media (max-width: 767px) {
	.sss-solution-cards {
		grid-template-columns: 1fr;
	}

	/* The card markup puts __back before __front in the DOM (harmless on
	   desktop, where both are position:absolute and z-index controls what
	   shows on top). On mobile both switch to position:static and stack in
	   normal flow, so without this the DOM order — back, then front — put
	   __back on top and __front below, the opposite of what their
	   top-only/bottom-only border-radius values below assume: the visibly
	   top element only had bottom corners rounded and vice versa, reading
	   as inverted/notched corners. Making the card a flex column and
	   reordering the children keeps __front visually on top (matching its
	   top-rounded corners) without touching the template. */
	.sss-solution-card {
		position: static;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.sss-solution-card__back {
		position: static;
		order: 2;
		align-items: flex-start;
		margin-top: calc(var(--sss-space-2) * -1);
		border-radius: 0 0 var(--sss-radius-lg) var(--sss-radius-lg);
	}

	.sss-solution-card__back p {
		opacity: 1;
	}

	.sss-solution-card__front {
		position: static;
		order: 1;
		height: auto;
		border-radius: var(--sss-radius-lg) var(--sss-radius-lg) 0 0;
		transform: none !important;
	}

	/* Drop the card photo on mobile per client direction — the body then
	   takes the full row instead of sitting narrow at its own content
	   width now that it's the front card's only child. */
	.sss-solution-card__image {
		display: none;
	}

	.sss-solution-card__body {
		width: 100%;
	}
}

/* Floating recognition band — image-only, contained, overlaps the navy
   solutions section above and the grey configs section below on the
   z-axis, same pattern as .sss-floating-features. */
/* Same structural pattern as .sss-floating-features: the wrapper carries
   no padding or background of its own, so the card's negative margin
   translates directly into real overlap with both neighbors instead of
   being partly absorbed by the wrapper's box. */
.sss-floating-recognition {
	position: relative;
	z-index: 2;
}

.sss-floating-recognition__card {
	max-width: 760px;
	margin: -56px auto -56px;
	background: #F3F5F7;
	border-radius: var(--sss-radius-lg);
	box-shadow: var(--sss-shadow-md);
	padding: var(--sss-space-4) var(--sss-space-6);
}

.sss-floating-recognition__card img {
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.sss-floating-recognition__card {
		margin-block: 0 var(--sss-space-5);
		padding: var(--sss-space-4);
	}
}

/* Common configurations — grey section (distinct from the navy solutions
   section above it). */
.sss-configs {
	background: var(--sss-white);
	padding-block: calc(var(--sss-section-major) + 40px) var(--sss-section-major);
}

.sss-configs__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sss-space-6);
}

.sss-configs__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sss-space-2);
	padding: var(--sss-space-4);
	border-radius: var(--sss-radius-lg);
	box-shadow: 0 8px 28px rgba(10, 20, 35, 0.07);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sss-configs__item:hover,
.sss-configs__item:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(10, 20, 35, 0.11);
}

.sss-configs__media {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--sss-white);
	border: 1px solid var(--sss-line);
	border-radius: var(--sss-radius-md);
	overflow: hidden;
}

.sss-configs__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--sss-space-3);
}

.sss-configs__name {
	font-family: var(--sss-font-heading);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--sss-ink);
	margin-top: var(--sss-space-2);
}

.sss-configs__item:hover .sss-configs__name,
.sss-configs__item:focus-visible .sss-configs__name {
	color: var(--sss-blue);
}

.sss-configs__line {
	font-size: 0.9375rem;
	color: var(--sss-slate);
}

.sss-configs__link {
	margin-top: var(--sss-space-1);
	font-size: 0.9375rem;
}

@media (max-width: 1023px) {
	.sss-configs__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.sss-configs__grid {
		grid-template-columns: 1fr;
	}
}

/* Connected control feature */
.sss-connected {
	background: var(--sss-ink);
	color: var(--sss-white);
	padding-block: var(--sss-section-major);
	scroll-margin-top: 60px;
}

.sss-connected__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--sss-space-6);
	align-items: center;
}

.sss-connected__content {
	max-width: 560px;
}

.sss-connected h2 {
	color: var(--sss-white);
}

.sss-connected p {
	color: var(--sss-cloud);
}

.sss-connected__points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sss-space-3);
	margin-top: var(--sss-space-5);
}

.sss-connected__points li {
	display: inline-flex;
	align-items: center;
	gap: var(--sss-space-2);
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(71, 183, 200, 0.1);
	border: 1px solid rgba(71, 183, 200, 0.35);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sss-cyan);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sss-connected__points li:hover,
.sss-connected__points li:focus-visible {
	background: rgba(71, 183, 200, 0.22);
	border-color: var(--sss-cyan);
}

.sss-connected__points .sss-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--sss-cyan);
}

.sss-connected__diagram {
	position: relative;
	border-radius: var(--sss-radius-lg);
	overflow: hidden;
	min-height: 380px;
}

/* Before/after compare slider (assets/js/motion.js — initCompareSlider). */
.sss-compare {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	touch-action: pan-y;
}

.sss-compare__after,
.sss-compare__before img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "Before" side is the same color photo as "after", just darkened —
   no grayscale/desaturation, per CLAUDE.md photography guidance. */
.sss-compare__before img {
	filter: brightness(0.5) saturate(1.05);
}

.sss-compare__before {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	clip-path: inset(0 50% 0 0);
}

.sss-compare__handle {
	position: absolute;
	inset: 0 auto 0 50%;
	width: 0;
	transform: translateX(-50%);
	pointer-events: none;
}

.sss-compare__handle::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 -1px;
	width: 2px;
	background: var(--sss-white);
	box-shadow: 0 0 0 1px rgba(10, 20, 35, 0.25);
}

/* ADT sign badge, layered over the connected-diagram photo. Flush against
   the photo's bottom edge (the sign's own artwork already includes its
   ground stake reaching down to the bottom of the source PNG, so bottom:0
   here reads as the sign "planted" at the edge of the photo, not floating
   above it) and sized in percentages of `.sss-connected__diagram`, so it
   stays at the same relative position at every viewport width; the mobile
   rule below (max-width: 767px) additionally shrinks the percentage
   itself so the badge reads smaller — not just proportionally scaled —
   on small screens, while staying anchored inside the same photo. */
.sss-connected__badge {
	position: absolute;
	left: 5%;
	bottom: 0;
	width: 16%;
	height: auto;
	z-index: 4;
	filter: drop-shadow(0 6px 14px rgba(10, 20, 35, 0.45));
	pointer-events: none;
}

.sss-compare__grip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sss-white);
	box-shadow: var(--sss-shadow-md);
}

.sss-compare__grip::before,
.sss-compare__grip::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	transform: translateY(-50%);
}

.sss-compare__grip::before {
	left: 9px;
	border-right: 6px solid var(--sss-ink);
}

.sss-compare__grip::after {
	right: 9px;
	border-left: 6px solid var(--sss-ink);
}

.sss-compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	appearance: none;
	-webkit-appearance: none;
}

.sss-compare__range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 40px;
	height: 100%;
}

.sss-compare__range::-moz-range-thumb {
	width: 40px;
	height: 100%;
	border: 0;
	background: transparent;
}

.sss-compare__range:focus-visible ~ .sss-compare__handle .sss-compare__grip {
	outline: 2px solid var(--sss-blue);
	outline-offset: 2px;
}

/* Residential / commercial */
.sss-rescom {
	padding-block: var(--sss-section-major);
	scroll-margin-top: 60px;
}

.sss-rescom__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sss-space-6);
	margin-top: var(--sss-space-6);
	align-items: stretch;
}

.sss-rescom__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--sss-white);
	border: 1px solid var(--sss-line);
	border-radius: var(--sss-radius-lg);
	padding: var(--sss-space-4);
	box-shadow: var(--sss-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
}

.sss-rescom__text {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.sss-rescom__text .sss-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* Ink → navy on hover, not blue → cyan — cyan reads too light for white
   text on top of it (fails AA at body-copy size), so the hover state
   reuses the same dark gradient already proven elsewhere on the page
   (.sss-solution-card__back). */
.sss-rescom__panel:hover,
.sss-rescom__panel:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--sss-shadow-md);
	background: linear-gradient(160deg, var(--sss-ink), var(--sss-navy) 70%);
}

.sss-rescom__panel:hover .sss-rescom__text h3,
.sss-rescom__panel:focus-within .sss-rescom__text h3 {
	color: var(--sss-white);
}

.sss-rescom__panel:hover .sss-rescom__text p,
.sss-rescom__panel:focus-within .sss-rescom__text p {
	color: var(--sss-cloud);
}

.sss-rescom__panel:hover .sss-btn--secondary,
.sss-rescom__panel:focus-within .sss-btn--secondary {
	color: var(--sss-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.sss-rescom__panel:hover .sss-btn--secondary:hover,
.sss-rescom__panel:focus-within .sss-btn--secondary:hover {
	color: var(--sss-cyan);
	border-color: var(--sss-cyan);
}

.sss-rescom__media {
	position: relative;
	border-radius: var(--sss-radius-md);
	overflow: hidden;
	margin-bottom: var(--sss-space-4);
}

.sss-rescom__panel--residential .sss-rescom__media img {
	aspect-ratio: 4 / 3;
	width: 100%;
	object-fit: cover;
}

.sss-rescom__panel--commercial .sss-rescom__media img {
	aspect-ratio: 4 / 3;
	width: 100%;
	object-fit: cover;
}

.sss-rescom__text h3 {
	margin-bottom: var(--sss-space-2);
}

.sss-rescom__text p {
	font-size: 1.0625rem;
}

/* Process */
.sss-process {
	padding-block: var(--sss-section-major);
	background: var(--sss-cloud);
	scroll-margin-top: 60px;
}

.sss-process__inner {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--sss-space-6);
	align-items: start;
}

.sss-process__media {
	position: sticky;
	top: var(--sss-space-4);
	border-radius: var(--sss-radius-lg);
	overflow: hidden;
	box-shadow: var(--sss-shadow-md);
}

.sss-process__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.sss-process__timeline {
	display: flex;
	flex-direction: column;
	gap: var(--sss-space-5);
	margin-block: var(--sss-space-6);
	position: relative;
}

.sss-process__step {
	position: relative;
	padding-top: var(--sss-space-5);
	border-top: 3px solid var(--sss-line);
}

.sss-process__step::before {
	content: "";
	position: absolute;
	top: -3px;
	left: 0;
	width: 44px;
	height: 3px;
	background: var(--sss-blue);
}

.sss-process__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--sss-blue);
	margin-bottom: var(--sss-space-2);
}

.sss-process__icon .sss-icon {
	width: 28px;
	height: 28px;
}

.sss-process__step h3 {
	font-size: 1.25rem;
}

.sss-process__step p {
	font-size: 1rem;
}

/* Local experience / service areas */
.sss-local {
	padding-block: var(--sss-section-major);
}

.sss-local__intro {
	display: block;
}

/* No photo in this section (client direction) — content is centered as a
   single column instead of the old photo/text two-column layout. Widened
   per client direction (was 640px, then 960px — still read as compressed,
   so the per-paragraph ch caps below are dropped too and the section now
   simply fills its container width). */
.sss-local--centered .sss-local__content {
	max-width: 1100px;
	margin-inline: auto;
	text-align: center;
}

.sss-local__content h2 {
	max-width: 16ch;
}

.sss-local--centered .sss-local__content h2 {
	max-width: none;
	margin-inline: auto;
}

.sss-local__content p {
	font-size: 1.0625rem;
}

.sss-local--centered .sss-local__content p {
	max-width: none;
	margin-inline: auto;
}

.sss-local__disclaimer {
	font-size: 0.875rem;
	font-style: italic;
}

.sss-local__actions {
	display: flex;
	gap: var(--sss-space-3);
	flex-wrap: wrap;
}

.sss-local--centered .sss-local__actions {
	justify-content: center;
}

/* Free-quote variant: same text block, left-aligned, with the Contact page
   form in a card on the right (stacked below the text under 1024px). */
.sss-local--with-form {
	scroll-margin-top: 160px;
}

.sss-local--with-form .sss-local__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sss-space-6);
	align-items: center;
}

.sss-local--with-form .sss-local__content {
	max-width: none;
	text-align: left;
}

.sss-local__form-card {
	min-width: 0;
	background: var(--sss-cloud);
	border: 1px solid var(--sss-line);
	border-radius: var(--sss-radius-lg);
	box-shadow: var(--sss-shadow-md);
	padding: var(--sss-space-5);
}

.sss-local__form-title {
	margin-bottom: var(--sss-space-4);
}

/* The Contact form carries its own card chrome (.sss-contact-form); inside
   this card it only contributes the fields. */
.sss-local__form-card .sss-contact-form {
	background: none;
	backdrop-filter: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	max-width: none;
}

@media (max-width: 1023px) {
	.sss-local--with-form .sss-local__intro {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.sss-local__form-card {
		padding: var(--sss-space-4);
	}
}

/* Final CTA */
.sss-final-cta {
	position: relative;
	color: var(--sss-white);
	padding-block: var(--sss-section-standard);
	overflow: hidden;
}

.sss-final-cta__bg {
	position: absolute;
	inset: -24px 0;
	z-index: 0;
}

.sss-final-cta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sss-final-cta__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 20, 35, 0.94) 0%, rgba(18, 38, 63, 0.88) 55%, rgba(18, 38, 63, 0.75) 100%);
}

.sss-final-cta__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.sss-final-cta h2 {
	color: var(--sss-white);
	max-width: 20ch;
	margin-inline: auto;
}

.sss-final-cta p {
	color: var(--sss-cloud);
	max-width: 60ch;
	font-size: 1.0625rem;
	margin-inline: auto;
}

.sss-final-cta__actions {
	display: flex;
	justify-content: center;
	gap: var(--sss-space-3);
	flex-wrap: wrap;
	margin-top: var(--sss-space-4);
}

/* Responsive */
@media (max-width: 1023px) {
	.sss-solution-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.sss-connected__inner {
		grid-template-columns: 1fr;
	}

	.sss-rescom__grid {
		grid-template-columns: 1fr;
	}

	.sss-process__inner {
		grid-template-columns: 1fr;
	}

	.sss-process__media {
		position: static;
		order: -1;
		max-width: 360px;
	}
}

@media (max-width: 767px) {
	/* Center on mobile (client direction). The step accent bar is
	   left-anchored (left: 0) to match left-aligned text on desktop; once
	   the text is centered it has to re-center too or it reads as
	   floating off to one side of the now-centered title. */
	.sss-connected__content {
		text-align: center;
		margin-inline: auto;
	}

	.sss-connected__points {
		justify-content: center;
	}

	.sss-process__content {
		text-align: center;
	}

	.sss-process__step {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.sss-process__step::before {
		left: 50%;
		transform: translateX(-50%);
	}

	/* Section heading only — the residential/commercial panels below stay
	   as they are (self-contained cards, not part of this pass). */
	.sss-rescom > .sss-container > h2 {
		text-align: center;
	}

	/* The before/after diagram (photo, compare slider, hotspots, ADT sign
	   badge) is dropped entirely on mobile rather than shrunk — at this
	   width the slider becomes fiddly to drag and the layered hotspots/
	   badge get too small to read. Text content takes the full width. */
	.sss-connected__diagram {
		display: none;
	}
}