.sss-site-header {
	position: sticky;
	top: 0;
	z-index: 20;
}

.sss-site-header.is-scrolled .sss-primary-row {
	box-shadow: var(--sss-shadow-sm);
}

/* Primary row — the top band. Carries the ADT dealer branding and primary
   nav. White, not navy — only the promo strip above it (.sss-nav-promo)
   keeps the dark background and the light-sweep effect. */
.sss-primary-row {
	position: relative;
	background: var(--sss-white);
	border-bottom: 1px solid var(--sss-line);
}

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

.sss-primary-row__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sss-space-5);
	min-height: 108px;
}

.sss-logo-text {
	font-family: var(--sss-font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--sss-ink);
}

.sss-branding__link {
	display: inline-flex;
	align-items: center;
}

/* The ADT dealer lockup is set in ADT blue on a light background — on the
   navy row it needs a light plate behind it to stay legible and to avoid
   recoloring the supplied asset. */
.sss-branding__plate {
	display: inline-flex;
	align-items: center;
	background: var(--sss-white);
	border-radius: var(--sss-radius-sm);
	padding: 14px 16px;
}

.sss-branding__logo {
	height: 54px;
	width: auto;
	max-width: 300px;
	display: block;
}

/* Promo strip — the only dark band left in the navbar now that the row
   below it is white. Single message, not a rotating carousel: a periodic
   entrance/exit pulse draws attention to the current ADT equipment offer
   without moving constantly. See assets/css/effects.css note on
   prefers-reduced-motion. Also carries the phone number and language
   switch (formerly the separate white utility bar below the nav — merged
   up here so the strip does double duty instead of stacking two bands). */
.sss-nav-promo {
	position: relative;
	background: var(--sss-ink);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.sss-nav-promo__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sss-space-4);
	min-height: 40px;
	padding-block: 8px;
}

.sss-nav-promo__link {
	display: block;
	min-width: 0;
	flex: 1 1 auto;
}

.sss-nav-promo__actions {
	display: flex;
	align-items: center;
	gap: var(--sss-space-3);
	flex-shrink: 0;
}

.sss-nav-promo__phone {
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--sss-white);
	white-space: nowrap;
}

.sss-nav-promo__phone:hover,
.sss-nav-promo__phone:focus-visible {
	color: var(--sss-cyan);
}

.sss-nav-promo__lang {
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--sss-radius-sm);
	padding: 3px 9px;
	font-size: 0.75rem;
	color: var(--sss-white);
	white-space: nowrap;
}

.sss-nav-promo__lang:hover,
.sss-nav-promo__lang:focus-visible {
	border-color: var(--sss-cyan);
	color: var(--sss-cyan);
}

/* Diagonal light sweep — the same effect as the homepage's
   .sss-solutions__promo card (home.css), duplicated here (identical
   keyframe) because the navbar needs it on every page, not just the
   homepage. Confined to this strip only, not the white row below it. */
.sss-nav-promo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 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;
}

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

.sss-nav-promo__track {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
}

.sss-nav-promo__content {
	display: inline-flex;
	align-items: center;
	gap: var(--sss-space-2);
	color: var(--sss-cloud);
	font-size: 0.8125rem;
	white-space: nowrap;
	animation: sss-nav-promo-cycle 10s ease-in-out infinite;
}

.sss-nav-promo .sss-icon {
	color: var(--sss-cyan);
}

.sss-nav-promo__text {
	font-weight: 500;
}

.sss-nav-promo__cta {
	font-weight: 600;
	color: var(--sss-cyan);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sss-nav-promo__link:hover .sss-nav-promo__content,
.sss-nav-promo__link:focus-visible .sss-nav-promo__content {
	animation-play-state: paused;
	opacity: 1;
	transform: none;
}

@keyframes sss-nav-promo-cycle {
	0% {
		opacity: 0;
		transform: translateY(8px);
	}
	8%, 88% {
		opacity: 1;
		transform: translateY(0);
	}
	96%, 100% {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sss-nav-promo__content {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

.sss-primary-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.sss-nav-menu {
	display: flex;
	align-items: center;
	gap: var(--sss-space-5);
}

.sss-nav-menu a {
	font-weight: 500;
	font-size: 1rem;
	color: var(--sss-ink);
}

.sss-nav-menu a:hover,
.sss-nav-menu a:focus-visible {
	color: var(--sss-blue);
}

/* Desktop navigation preview cards — revealed on hover/focus of a primary
   nav item (see assets/js/navigation-previews.js), not a mega-menu plugin.
   Each card is moved into its matching <li> at runtime once JS locates it
   by comparing the link's href to the card's data-match-url. */
.sss-nav-menu li.has-nav-preview {
	position: relative;
}

.sss-nav-preview {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 14px;
	width: 660px;
	max-width: calc(100vw - 40px);
	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-md);
	z-index: 30;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.sss-nav-preview:not([hidden]) {
	opacity: 1;
	transform: translateY(0);
}

.sss-nav-preview[hidden] {
	display: none;
}

.sss-nav-preview--align-right {
	left: auto;
	right: 0;
}

.sss-nav-preview__grid {
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	gap: var(--sss-space-4);
	align-items: center;
}

.sss-nav-preview__title {
	font-family: var(--sss-font-heading);
	font-weight: 600;
	font-size: 1.1875rem;
	color: var(--sss-ink);
	margin: 0 0 var(--sss-space-3);
}

.sss-nav-preview__links {
	display: grid;
	gap: 2px;
}

.sss-nav-preview__links a {
	display: block;
	font-family: var(--sss-font-body);
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--sss-slate);
	padding: 7px 8px;
	margin-inline: -8px;
	border-radius: var(--sss-radius-sm);
}

.sss-nav-preview__links a:hover,
.sss-nav-preview__links a:focus-visible {
	color: var(--sss-blue);
	background: var(--sss-cloud);
}

.sss-nav-preview__media {
	border-radius: var(--sss-radius-sm);
	overflow: hidden;
}

.sss-nav-preview__media--cover img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.sss-nav-preview__media--contain {
	background: var(--sss-cloud);
	padding: var(--sss-space-2);
}

.sss-nav-preview__media--contain img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	display: block;
}

.sss-nav-preview__media--logo {
	background: var(--sss-navy);
	padding: var(--sss-space-5);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sss-nav-preview__media--logo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.sss-nav-preview {
		transition: opacity 0.01ms;
		transform: none;
	}
}

@media (max-width: 1023px) {
	.sss-nav-preview {
		display: none !important;
	}
}

.sss-primary-row__cta {
	display: flex;
	align-items: center;
	gap: var(--sss-space-4);
}

.sss-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 10px;
}

.sss-nav-toggle__bar {
	width: 24px;
	height: 2px;
	background: var(--sss-ink);
	display: block;
}

/* Mobile nav panel. */
.sss-mobile-nav {
	display: none;
}

.sss-mobile-nav.is-open {
	--animate-duration: 0.25s;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: fixed;
	inset: 0;
	background: var(--sss-white);
	z-index: 999;
	padding: var(--sss-space-6) var(--sss-space-4) var(--sss-space-4);
	overflow-y: auto;
}

/* The hamburger toggle sits in the header, underneath this panel
   (z-index: 999) once open — it still works as a close trigger via JS,
   but visually disappears, leaving no visible way to exit. This button is
   the visible close control, positioned to match where the toggle sits in
   the header so it reads as "the same button" despite being a second
   element. */
.sss-mobile-nav__close {
	position: absolute;
	top: var(--sss-space-4);
	right: var(--sss-gutter-mobile);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--sss-ink);
}

.sss-mobile-nav__close .sss-icon {
	width: 26px;
	height: 26px;
}

.sss-mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--sss-space-4);
	font-size: 1.25rem;
}

/* Nested Services links, moved under the mobile "Services" item by
   assets/js/navigation-previews.js. Plain indented sub-list, not a second
   accordion level. */
.sss-mobile-nav__sublist {
	display: flex;
	flex-direction: column;
	gap: var(--sss-space-2);
	margin-top: var(--sss-space-2);
	padding-left: var(--sss-space-4);
	border-left: 2px solid var(--sss-line);
}

.sss-mobile-nav__sublist a {
	font-size: 1rem;
	font-weight: 400;
	color: var(--sss-slate);
}

.sss-mobile-nav__cta {
	margin-top: var(--sss-space-5);
	width: 100%;
}

/* Footer. */
.sss-site-footer {
	background: var(--sss-navy);
	color: var(--sss-cloud);
	font-size: 0.9375rem;
	border-top: 3px solid transparent;
	border-image: linear-gradient(90deg, var(--sss-blue), var(--sss-cyan)) 1;
}

.sss-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: var(--sss-space-4);
	padding-block: var(--sss-space-4);
}

.sss-footer__inner p {
	font-size: 0.9375rem;
}

.sss-footer__inner a {
	color: var(--sss-cloud);
}

.sss-footer__inner a:hover,
.sss-footer__inner a:focus-visible {
	color: var(--sss-cyan);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sss-footer__logo {
	height: 72px;
	width: auto;
	max-width: 280px;
	margin-bottom: var(--sss-space-3);
}

.sss-footer__description {
	color: var(--sss-cloud);
	opacity: 0.9;
}

.sss-footer__license {
	margin-top: var(--sss-space-2);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--sss-cloud);
}

.sss-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--sss-space-2);
}

.sss-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--sss-space-2);
	font-weight: 600;
}

.sss-footer__address {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--sss-space-2);
	line-height: 1.4;
}

.sss-footer__address .sss-icon {
	margin-top: 2px;
	color: var(--sss-cyan);
}

.sss-footer__social {
	display: flex;
	gap: var(--sss-space-2);
	margin-top: var(--sss-space-2);
}

.sss-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--sss-radius-sm);
}

.sss-footer__social .sss-icon {
	width: 20px;
	height: 20px;
}

.sss-footer__social a:hover,
.sss-footer__social a:focus-visible {
	border-color: var(--sss-cyan);
	color: var(--sss-cyan);
}

.sss-footer__office,
.sss-footer__hours {
	display: flex;
	flex-direction: column;
}

.sss-footer__hours-title {
	font-family: var(--sss-font-heading);
	color: var(--sss-white);
	margin-bottom: var(--sss-space-2);
	font-size: 1rem;
}

/* Address/hours lines are short fragments, not full paragraphs — the
   global paragraph margin makes them look loosely spaced. */
.sss-footer__office p,
.sss-footer__hours p {
	margin: 0 0 3px;
}

.sss-footer__office p:last-child,
.sss-footer__hours p:last-child {
	margin-bottom: 0;
}

.sss-footer__legal {
	grid-column: 1 / -1;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: var(--sss-space-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sss-space-4);
	align-items: center;
	font-size: 0.875rem;
	opacity: 0.9;
}

.sss-footer__copyright,
.sss-footer__tx-license {
	margin: 0;
}

.sss-footer__credit {
	margin: 0;
	font-size: 0.8125rem;
	opacity: 0.75;
}

.sss-footer__credit a {
	text-decoration: underline;
	text-underline-offset: 2px;
}