/**
 * SEER POWER Hero Design System 2.2.121
 * Single declaration source for Signature / Standard Industrial / Conversion.
 * Maps existing Widget BEM roots — does not change Widget IDs/slugs.
 */

:root {
	/* Layout */
	--seer-hero-container: 1440px;
	--seer-hero-gutter: var(--seer-gutter, clamp(40px, 4.45vw, 80px));
	--seer-hero-height: clamp(560px, 46vw, 680px);
	--seer-hero-standard-min-height: var(--seer-hero-height);
	--seer-hero-header-safe: 90px;
	--seer-hero-content-bottom-safe: 0px;
	--seer-hero-standard-pad-y: clamp(96px, 9vw, 128px);
	--seer-hero-standard-pad-bottom: clamp(72px, 7vw, 96px);

	/* Type */
	--seer-hero-display: "Iowan Old Style", Iowan, Baskerville, Georgia, "Times New Roman", serif;
	--seer-hero-body-face: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--seer-hero-title-size: clamp(52px, 4.86vw, 70px);
	--seer-hero-title-weight: 700;
	--seer-hero-title-stroke: 0;
	--seer-hero-title-lh: 1.05;
	--seer-hero-title-tracking: -0.02em;
	--seer-hero-title-max: 820px;
	--seer-hero-body-size: 18px;
	--seer-hero-body-weight: 400;
	--seer-hero-body-lh: 1.5;
	--seer-hero-body-max: 640px;
	--seer-hero-body-on-dark: rgba(255, 255, 255, 0.82);
	--seer-hero-title-on-dark: #ffffff;

	/* Eyebrow */
	--seer-hero-eyebrow-size: 13px;
	--seer-hero-eyebrow-weight: 700;
	--seer-hero-eyebrow-lh: 1.2;
	--seer-hero-eyebrow-tracking: 0.16em;

	/* Rhythm — Standard + Signature content stack */
	--seer-hero-gap-eyebrow-title: 28px;
	--seer-hero-gap-title-body: 34px;
	--seer-hero-gap-body-cta: 34px;

	/* Brand */
	--seer-hero-navy: var(--seer-navy, #082b3d);
	--seer-hero-navy-deep: var(--seer-navy-deep, #041c2b);
	--seer-hero-orange: var(--seer-orange, #f15a18);
	--seer-hero-orange-hover: var(--seer-orange-hover, #d94e10);

	/* CTA */
	--seer-hero-btn-height: 52px;
	--seer-hero-btn-size: 13px;
	--seer-hero-btn-weight: 700;
	--seer-hero-btn-tracking: 0.08em;
	--seer-hero-btn-radius: 6px;

	/* Info bar shell */
	--seer-hero-info-radius: 18px;
	--seer-hero-info-shadow: 0 16px 36px rgba(4, 28, 43, 0.1);
	--seer-hero-info-border: 1px solid var(--seer-border, #d9d8d2);
	--seer-hero-info-height: 112px;
	--seer-hero-info-half: 56px;

	/* Shared industrial media treatment (one source only) */
	--seer-hero-tone: rgba(4, 28, 43, 0.1);
	--seer-hero-gradient-industrial:
		linear-gradient(
			90deg,
			rgba(4, 28, 43, 1) 0%,
			rgba(4, 28, 43, 0.9) 35%,
			rgba(4, 28, 43, 0.7) 50%,
			rgba(4, 28, 43, 0.3) 65%,
			rgba(4, 28, 43, 0.04) 80%,
			rgba(4, 28, 43, 0) 100%
		),
		linear-gradient(0deg, var(--seer-hero-tone), var(--seer-hero-tone));
}

@media (min-width: 1025px) {
	:root {
		/* Match the approved Home power-range H2 role at Hero scale. */
		--seer-hero-title-size: 70px;
		--seer-hero-title-weight: 600;
		--seer-hero-title-stroke: 0;
		--seer-hero-title-lh: 1.05;
		--seer-hero-title-tracking: -0.015em;
	}
}

@media (max-width: 1024px) {
	:root {
		--seer-hero-title-size: clamp(44px, 5.1vw, 52px);
		--seer-hero-header-safe: 72px;
		--seer-hero-standard-pad-y: clamp(80px, 10vw, 104px);
		--seer-hero-body-size: 17px;
	}
}

@media (max-width: 767px) {
	:root {
		/* The compact 76px Header releases 14px to the Hero, then the approved
		 * mobile composition adds another 10px of first-screen depth. */
		--seer-hero-height: 584px;
		--seer-hero-title-size: 40px;
		--seer-hero-body-size: 16px;
		--seer-hero-body-lh: 1.6;
		--seer-hero-header-safe: 64px;
		--seer-hero-standard-pad-y: 56px;
		--seer-hero-standard-pad-bottom: 48px;
		--seer-hero-gap-eyebrow-title: 22px;
		--seer-hero-gap-title-body: 24px;
		--seer-hero-gap-body-cta: 24px;
		--seer-hero-btn-height: 50px;
		--seer-hero-title-max: none;
		--seer-hero-body-max: none;
	}
}

@media (min-width: 480px) and (max-width: 767px) {
	:root {
		--seer-hero-title-size: clamp(40px, 6vw, 44px);
	}
}

@media (max-width: 900px) {
	:root {
		--seer-hero-info-height: 208px;
		--seer-hero-info-half: 104px;
	}
}

/* ==========================================================================
   Shared rail
   ========================================================================== */

.seer-hero-shell,
.sp-products-hub .sp-ph__hero .sp-ph__shell,
.seer-home-hero__copy,
.seer-dc__shell,
.sp-guides-shell,
.sc-shell {
	width: min(100% - (2 * var(--seer-hero-gutter)), var(--seer-hero-container));
	max-width: var(--seer-hero-container);
	margin-inline: auto;
	box-sizing: border-box;
}

/* ==========================================================================
   Orange final period (all page heroes)
   ========================================================================== */

.seer-hero-end-period,
.sp-about-hero__title em,
.seer-home-hero__title .seer-hero-end-period,
.sp-ph__hero h1 .seer-hero-end-period,
.seer-solutions-hero-copy h1 .seer-hero-end-period,
.seer-qa-hero h1 .seer-hero-end-period,
.sc-hero__copy h1 .seer-hero-end-period,
.sp-guides-hero__title .seer-hero-end-period,
.sp-about-hero__title .seer-hero-end-period {
	color: var(--seer-hero-orange) !important;
	font-style: normal !important;
	font-weight: inherit !important;
}

/* ==========================================================================
   STANDARD INDUSTRIAL — stage + media (shared)
   Products / Solutions / QA / Service / Resources / About
   ========================================================================== */

.seer-home-hero__stage,
.sp-products-hub .sp-ph__hero,
.seer-solutions-hero-section .seer-solutions-hero-stage,
.seer-qa-hero__stage,
.seer-sc__stage .sc-hero,
.sp-guides-hero,
.sp-about-hero__stage,
.seer-dc__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	height: var(--seer-hero-height) !important;
	min-height: var(--seer-hero-height) !important;
	max-height: var(--seer-hero-height) !important;
	box-sizing: border-box !important;
	background: var(--seer-hero-navy-deep) !important;
	color: var(--seer-hero-title-on-dark);
}

/* Shared gradient overlay layer targets */
.sp-products-hub .sp-ph__hero-media:after,
.seer-solutions-hero-media::after,
.seer-qa-hero__media::after,
.seer-sc__stage .sc-hero__shade,
.sp-guides-hero__visual::after,
.sp-about-hero__media::after {
	background: var(--seer-hero-gradient-industrial) !important;
	opacity: 1 !important;
}

/* The visible content group is centered inside the real usable canvas:
 * fixed Hero height minus the transparent Header-safe area and, where used,
 * the upper half of the boundary Info Bar. */
.seer-home-hero__copy,
.sp-products-hub .sp-ph__hero-copy,
.seer-solutions-hero-copy,
.seer-qa-hero__copy,
.sc-hero__copy,
.sp-guides-hero__copy,
.sp-about-hero__copy {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	position: relative !important;
	z-index: 2 !important;
	box-sizing: border-box !important;
	height: var(--seer-hero-height) !important;
	min-height: 0 !important;
	max-height: var(--seer-hero-height) !important;
	padding-top: var(--seer-hero-header-safe) !important;
	padding-bottom: var(--seer-hero-content-bottom-safe) !important;
	margin-top: 0 !important;
	transform: none !important;
	top: auto !important;
}

.seer-solutions-hero-stage,
.seer-qa-hero__stage,
.seer-sc__stage .sc-hero {
	--seer-hero-content-bottom-safe: var(--seer-hero-info-half);
}

/* Service copy remains an absolute rail over its image, but uses the same
 * usable-canvas bounds as every other first-level Hero. */
.seer-sc__stage .sc-hero__copy {
	position: absolute !important;
	inset-block: 0 !important;
	height: var(--seer-hero-height) !important;
	max-height: var(--seer-hero-height) !important;
	margin-top: 0 !important;
}

.sp-guides-hero__shell {
	height: 100% !important;
	min-height: 0 !important;
}

/* Left rail alignment (1440) */
.sp-products-hub .sp-ph__hero .sp-ph__shell {
	width: min(100% - (2 * var(--seer-hero-gutter)), var(--seer-hero-container)) !important;
	margin-inline: auto !important;
}

.seer-solutions-hero-copy,
.seer-qa-hero__copy {
	margin-left: max(var(--seer-hero-gutter), calc((100% - var(--seer-hero-container)) / 2)) !important;
	margin-right: 0 !important;
}

/* About hero copy joins the shared first-level rail (2.2.103). */
.sp-about-hero__copy {
	margin-left: max(var(--seer-hero-gutter), calc((100% - var(--seer-hero-container)) / 2)) !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.sp-about-hero__copy {
		margin-left: 32px !important;
	}
}

@media (max-width: 767px) {
	/* Home and QA use an overlaid Header. Their outer stage grows only 10px;
	 * the 14px shorter Header exposes the remaining Hero area without adding
	 * it to the document height a second time. */
	.seer-home-hero__stage,
	.seer-qa-hero__stage {
		--seer-hero-height: 570px;
	}

	.sp-about-hero__copy {
		margin-left: 20px !important;
	}
}

/* ---------- Standard Eyebrow ---------- */
.sp-products-hub .sp-ph__hero .sp-ph__eyebrow,
.seer-solutions-hero-eyebrow,
.seer-qa-hero .seer-qa-eyebrow,
.sc-hero__copy .sc-eyebrow,
.seer-dc__hero .seer-dc__eyebrow,
.sp-about-widget .sp-about-hero__eyebrow {
	margin: 0 0 var(--seer-hero-gap-eyebrow-title) !important;
	color: var(--seer-hero-orange) !important;
	font-family: var(--seer-hero-body-face) !important;
	font-size: var(--seer-hero-eyebrow-size) !important;
	font-weight: var(--seer-hero-eyebrow-weight) !important;
	line-height: var(--seer-hero-eyebrow-lh) !important;
	letter-spacing: var(--seer-hero-eyebrow-tracking) !important;
	text-transform: uppercase !important;
}

.seer-solutions-hero-eyebrow::before {
	display: none !important;
	content: none !important;
	width: 0 !important;
}

/* Context eyebrow: Resources only (Guides breadcrumb keeps its white context role) */
.sp-guides-hero .sp-guides-breadcrumb {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 0 var(--seer-hero-gap-eyebrow-title) !important;
	font-family: var(--seer-hero-body-face) !important;
	font-size: var(--seer-hero-eyebrow-size) !important;
	font-weight: var(--seer-hero-eyebrow-weight) !important;
	line-height: var(--seer-hero-eyebrow-lh) !important;
	letter-spacing: var(--seer-hero-eyebrow-tracking) !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.78) !important;
}

.sp-guides-hero .sp-guides-breadcrumb__link {
	color: var(--seer-hero-orange) !important;
	font: inherit !important;
	text-decoration: none !important;
}

.sp-guides-hero .sp-guides-breadcrumb > span[aria-hidden="true"] {
	color: rgba(255, 255, 255, 0.42) !important;
	font: inherit !important;
	font-style: normal !important;
}

/* ---------- Standard H1 ---------- */
.elementor-widget-seerpower_home_hero .seer-home-hero__title,
.elementor-widget-seerpower_products_hub .sp-ph__hero h1,
.elementor-widget-seerpower_solutions_hero .seer-solutions-hero-copy h1,
.seer-qa-hero h1,
.sp-qa .seer-qa-hero h1,
.elementor-widget-seerpower_service_commitment .sc-hero__copy h1,
.elementor-widget-seerpower_dealer_center .seer-dc__hero h1,
.elementor-widget-seerpower_resources_guides .sp-guides-hero h1,
.sp-about-widget .sp-about-hero__title,
.sp-guides-hero__title,
.sp-guides-hero h1 {
	max-width: var(--seer-hero-title-max) !important;
	margin: 0 0 var(--seer-hero-gap-title-body) !important;
	color: var(--seer-hero-title-on-dark) !important;
	font-family: var(--seer-hero-display) !important;
	font-size: var(--seer-hero-title-size) !important;
	font-weight: var(--seer-hero-title-weight) !important;
	-webkit-text-stroke: var(--seer-hero-title-stroke) currentColor;
	paint-order: stroke fill;
	line-height: var(--seer-hero-title-lh) !important;
	letter-spacing: var(--seer-hero-title-tracking) !important;
	white-space: normal !important;
	text-wrap: balance;
}

/* Home Hero title stays dark on the cream Signature canvas (restores the
 * pre-2.2.103 live colour #1e293b; the shared rule above forces white only
 * for dark industrial Heroes). */
.elementor-widget-seerpower_home_hero .seer-home-hero__title,
.seer-home-hero .seer-home-hero__title {
	color: #1e293b !important;
}

/* Line wrappers only — never force block on .seer-hero-end-period */
.sp-products-hub .sp-ph__hero h1 .sp-ph__title-line,
.sp-products-hub .sp-ph__hero h1 .seer-hero-title-line,
.seer-solutions-hero-copy h1 .seer-solutions-hero-title-line,
.seer-solutions-hero-copy h1 .seer-hero-title-line,
.seer-qa-hero h1 .seer-qa-hero__title-line,
.seer-qa-hero h1 .seer-hero-title-line,
.sc-hero__copy h1 .sc-hero__title-line,
.sc-hero__copy h1 .seer-hero-title-line,
.sp-guides-hero__title-line,
.sp-about-hero__title > .sp-about-hero__title-line,
.sp-about-hero__title > .seer-hero-title-line,
.seer-home-hero__title-line {
	display: block;
	color: inherit;
}

/* Orange end period must stay on the same line as the last word */
.seer-hero-end-period,
.sp-products-hub .sp-ph__hero h1 .seer-hero-end-period,
.seer-solutions-hero-copy h1 .seer-hero-end-period,
.seer-qa-hero h1 .seer-hero-end-period,
.sc-hero__copy h1 .seer-hero-end-period,
.sp-guides-hero__title .seer-hero-end-period,
.sp-about-hero__title .seer-hero-end-period,
.seer-home-hero__title .seer-hero-end-period {
	display: inline !important;
	width: auto !important;
	white-space: nowrap !important;
}

/* ---------- Standard Body ---------- */
.sp-products-hub .sp-ph__hero-intro,
.seer-solutions-hero-intro,
.seer-solutions-hero-intro p,
.seer-qa-hero__description,
.sp-qa .seer-qa-hero__description,
.sc-hero__summary,
.sp-guides-hero__copy > p,
.sp-about-hero__body,
.sp-about-hero__lead {
	max-width: var(--seer-hero-body-max) !important;
	margin: 0 !important;
	color: var(--seer-hero-body-on-dark) !important;
	font-family: var(--seer-hero-body-face) !important;
	font-size: var(--seer-hero-body-size) !important;
	font-weight: var(--seer-hero-body-weight) !important;
	line-height: var(--seer-hero-body-lh) !important;
	opacity: 1 !important;
	border: 0 !important;
	padding-left: 0 !important;
	white-space: normal !important;
}

/* ---------- CTAs ---------- */
.sp-products-hub .sp-ph__hero .sp-ph__actions,
.seer-solutions-hero-actions,
.sp-about-hero__actions,
.seer-home-hero__actions {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 22px !important;
	margin-top: var(--seer-hero-gap-body-cta) !important;
}

.sp-products-hub .sp-ph__hero .sp-ph__button,
.seer-solutions-hero-button,
.elementor-widget-seerpower_solutions_hero .seer-solutions-hero-button--primary,
.elementor-widget-seerpower_solutions_hero .seer-solutions-hero-button--secondary,
.sp-about-hero__actions .sp-about-action,
.seer-home-hero__action,
.sc-hero__cta,
.seer-qa-hero .seer-qa-button--primary,
.seer-dc__form button[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: var(--seer-hero-btn-height) !important;
	padding: 0 26px !important;
	border-radius: var(--seer-hero-btn-radius) !important;
	font-family: var(--seer-hero-body-face) !important;
	font-size: var(--seer-hero-btn-size) !important;
	font-weight: var(--seer-hero-btn-weight) !important;
	letter-spacing: var(--seer-hero-btn-tracking) !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.sc-hero__cta,
.seer-qa-hero .seer-qa-button--primary {
	margin-top: var(--seer-hero-gap-body-cta) !important;
	width: fit-content !important;
	min-width: 230px !important;
}

/* Primary */
.sp-products-hub .sp-ph__hero .sp-ph__button--primary,
.seer-solutions-hero-button--primary,
.seer-solutions-hero-button--secondary,
.sp-about-hero__actions .sp-about-action--primary,
.seer-home-hero__action--primary,
.sc-hero__cta--primary,
.sp-guides-hero .sp-guides-text-link,
.seer-qa-hero .seer-qa-button--primary,
.seer-dc__form button[type="submit"] {
	background: var(--seer-hero-orange) !important;
	border: 1px solid var(--seer-hero-orange) !important;
	color: #fff !important;
}

/* Secondary white outline */
.sp-products-hub .sp-ph__hero .sp-ph__button--secondary,
.sp-about-hero__actions .sp-about-action--secondary {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.72) !important;
	color: #fff !important;
}

/* Tertiary */
.seer-home-hero__action--secondary {
	position: relative !important;
	min-height: var(--seer-hero-btn-height) !important;
	padding: 0 2px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--seer-hero-orange) !important;
	font-family: var(--seer-hero-body-face) !important;
	font-size: var(--seer-hero-btn-size) !important;
	font-weight: var(--seer-hero-btn-weight) !important;
	letter-spacing: var(--seer-hero-btn-tracking) !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	align-self: center !important;
	margin: 0 !important;
}

.seer-solutions-hero-button--secondary:hover {
	background: var(--seer-hero-orange-hover) !important;
	border-color: var(--seer-hero-orange-hover) !important;
	color: #fff !important;
}

.sp-guides-hero .sp-guides-text-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: var(--seer-hero-btn-height) !important;
	padding: 0 26px !important;
	border-radius: var(--seer-hero-btn-radius) !important;
	font-family: var(--seer-hero-body-face) !important;
	font-size: var(--seer-hero-btn-size) !important;
	font-weight: var(--seer-hero-btn-weight) !important;
	letter-spacing: var(--seer-hero-btn-tracking) !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	width: fit-content !important;
	min-width: 230px !important;
	margin-top: var(--seer-hero-gap-body-cta) !important;
}

.sp-guides-hero .sp-guides-text-link::after {
	content: none !important;
}

.sp-guides-hero .sp-guides-text-link:hover {
	background: var(--seer-hero-orange-hover) !important;
	border-color: var(--seer-hero-orange-hover) !important;
	color: #fff !important;
}

.seer-home-hero__action--secondary::after,
.seer-solutions-hero-button--secondary::after {
	content: "\2192" !important;
	margin-left: 8px !important;
	border: 0 !important;
	width: auto !important;
}

.seer-solutions-hero-button--secondary::after {
	content: none !important;
}

/* ---------- Products specs (dark hero, not Info Bar) ---------- */
.sp-products-hub .sp-ph__facts {
	display: flex !important;
	max-width: 760px !important;
	margin-top: 36px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.sp-products-hub .sp-ph__facts > div {
	flex: 1 1 0 !important;
	padding: 0 16px !important;
	border-left: 1px solid rgba(255, 255, 255, 0.55) !important;
	background: transparent !important;
}

.sp-products-hub .sp-ph__facts > div:first-child {
	padding-left: 0 !important;
	border-left: 0 !important;
}

/* ---------- Shared Info Bar shell ---------- */
.seer-solutions-hero-support-strip,
.seer-qa-hero__trust,
.seer-sc__stage .sc-metrics {
	position: absolute !important;
	z-index: 4 !important;
	top: 100% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	width: min(calc(100% - (2 * var(--seer-hero-gutter))), var(--seer-hero-container)) !important;
	max-width: var(--seer-hero-container) !important;
	height: var(--seer-hero-info-height) !important;
	min-height: var(--seer-hero-info-height) !important;
	max-height: var(--seer-hero-info-height) !important;
	margin: 0 !important;
	transform: translate(-50%, -50%) !important;
	overflow: hidden !important;
	border: var(--seer-hero-info-border) !important;
	border-radius: var(--seer-hero-info-radius) !important;
	background: #fff !important;
	box-shadow: var(--seer-hero-info-shadow) !important;
}

/* The Info Bar's positioning context is the fixed-height Hero itself. */
.seer-solutions-hero-stage,
.seer-qa-hero__stage,
.seer-sc__stage .sc-hero {
	overflow: visible !important;
}

.seer-solutions-hero-section {
	position: relative !important;
	padding-bottom: var(--seer-hero-info-half) !important;
	background: var(--seer-white, #fff) !important;
}

.seer-qa-hero {
	position: relative !important;
	margin-bottom: var(--seer-hero-info-half) !important;
	background: transparent !important;
}

.seer-sc__stage .sc-hero {
	margin-bottom: var(--seer-hero-info-half) !important;
}

.seer-solutions-hero-support-item,
.seer-qa-hero__trust li,
.seer-sc__stage .sc-metrics article {
	min-height: calc(var(--seer-hero-info-height) / var(--seer-hero-info-rows, 1)) !important;
	box-sizing: border-box !important;
}

/* QA stage becomes industrial dark */
.seer-qa-hero__stage,
.sp-qa .seer-qa-hero__stage {
	background: var(--seer-hero-navy-deep) !important;
	grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
	margin-bottom: 0 !important;
}

.sp-qa .seer-qa-hero h1 {
	color: var(--seer-hero-title-on-dark) !important;
}

.sp-qa .seer-qa-hero__description {
	color: var(--seer-hero-body-on-dark) !important;
}

.seer-qa-hero__stage.has-blueprint::before {
	opacity: 0.12 !important;
	inset: 0 45% 0 0 !important;
}

.seer-qa-hero__media {
	height: 100% !important;
	margin: 0 !important;
	width: 100% !important;
	min-height: 0 !important;
}

/* About: kill orange accent bar under H1 */
.sp-about-hero__accent {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

/* About full-bleed is page-level in about-us.css — do not force a 58/42 split here. */
.sp-about-hero__stage {
	/* layout handled by about-us Hero modifier */
}

/* ==========================================================================
   SIGNATURE — Home only (keep cream + cutout; inherit type/CTA/period)
   ========================================================================== */

.seer-home-hero__stage {
	background: var(--seer-home-paper, #f7f4ed) !important;
	color: var(--seer-hero-navy-deep) !important;
}

.seer-home-hero .seer-home-eyebrow {
	margin: 0 0 var(--seer-hero-gap-eyebrow-title) !important;
	color: var(--seer-hero-orange) !important;
	font-family: var(--seer-hero-body-face) !important;
	font-size: var(--seer-hero-eyebrow-size) !important;
	font-weight: var(--seer-hero-eyebrow-weight) !important;
	line-height: var(--seer-hero-eyebrow-lh) !important;
	letter-spacing: var(--seer-hero-eyebrow-tracking) !important;
	text-transform: uppercase !important;
}

.seer-home-hero__title {
	max-width: min(860px, 74vw) !important;
	margin: 0 0 var(--seer-hero-gap-title-body) !important;
	font-family: var(--seer-hero-display) !important;
	font-size: var(--seer-hero-title-size) !important;
	font-weight: var(--seer-hero-title-weight) !important;
	-webkit-text-stroke: var(--seer-hero-title-stroke) currentColor;
	paint-order: stroke fill;
	line-height: var(--seer-hero-title-lh) !important;
	letter-spacing: var(--seer-hero-title-tracking) !important;
}

.seer-home-hero__description {
	max-width: var(--seer-hero-body-max) !important;
	margin: 0 !important;
	font-family: var(--seer-hero-body-face) !important;
	font-size: var(--seer-hero-body-size) !important;
	font-weight: var(--seer-hero-body-weight) !important;
	line-height: var(--seer-hero-body-lh) !important;
}

.seer-home-hero__copy {
	width: min(100% - (2 * var(--seer-hero-gutter)), var(--seer-hero-container)) !important;
	margin-inline: auto !important;
}

/* ==========================================================================
   CONVERSION — Dealer only
   ========================================================================== */

.seer-dc__hero-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px) !important;
	column-gap: clamp(48px, 6vw, 88px) !important;
	align-items: center !important;
	height: 100% !important;
	min-height: 0 !important;
	padding: var(--seer-hero-header-safe) 0 0 !important;
	box-sizing: border-box !important;
}

.seer-dc__hero-copy {
	max-width: var(--seer-hero-title-max) !important;
	min-width: 0 !important;
	grid-column: 1 !important;
	padding: 0 !important;
}

.seer-dc__form {
	grid-column: 2 !important;
	justify-self: end !important;
	align-self: center !important;
	min-width: 0 !important;
}

.seer-dc__hero h1 {
	max-width: var(--seer-hero-title-max) !important;
	margin: var(--seer-hero-gap-eyebrow-title) 0 var(--seer-hero-gap-title-body) !important;
	color: #fff !important;
	font-family: var(--seer-hero-display) !important;
	font-size: var(--seer-hero-title-size) !important;
	font-weight: var(--seer-hero-title-weight) !important;
	-webkit-text-stroke: var(--seer-hero-title-stroke) currentColor;
	paint-order: stroke fill;
	line-height: var(--seer-hero-title-lh) !important;
	letter-spacing: var(--seer-hero-title-tracking) !important;
}

.seer-dc__hero h1 .seer-dc__hero-title-line {
	color: #fff !important;
}

.seer-dc__hero h1 .seer-dc__hero-title-period {
	color: var(--seer-hero-orange) !important;
}

.seer-dc__lead {
	max-width: var(--seer-hero-body-max) !important;
	color: var(--seer-hero-body-on-dark) !important;
	font-family: var(--seer-hero-body-face) !important;
	font-size: var(--seer-hero-body-size) !important;
	font-weight: var(--seer-hero-body-weight) !important;
	line-height: var(--seer-hero-body-lh) !important;
}

/* Dealer copy must beat Astra `.entry-content` list/p rules so the visible
 * content group exactly fills the copy block. Without this, Astra adds a
 * 16px bottom margin to the `<ol>` and the group renders ~8px above the
 * usable-canvas centre. */
.seer-dc__hero-copy .seer-dc__lead {
	margin: 0 !important;
}

.seer-dc__hero-copy .seer-dc__process {
	padding: 0 !important;
	list-style: none !important;
}

.seer-dc__hero-copy .seer-dc__process:last-child {
	margin-bottom: 0 !important;
}

@media (min-width: 768px) {
	.seer-dc__hero-copy .seer-dc__process {
		margin: 52px 0 0 !important;
	}
}

/* Form + steps: sans only */
.seer-dc__control input,
.seer-dc__control select,
.seer-dc__form header h2,
.seer-dc__form header p,
.seer-dc__confidential,
.seer-dc__form-status,
.seer-dc__process-step b,
.seer-dc__process-step > span:last-child,
.seer-dc__form button[type="submit"] {
	font-family: var(--seer-hero-body-face) !important;
}

.seer-dc__control input,
.seer-dc__control select {
	height: 48px !important;
	min-height: 48px !important;
	border-radius: 8px !important;
	font-size: 15px !important;
}

.seer-dc__process-step b,
.seer-dc__process-step > span:last-child {
	font-weight: 600 !important;
	letter-spacing: 0 !important;
}

/* Between 901px and 1100px the fixed Hero canvas is 560px tall. Tighten the
 * Dealer copy rhythm so the two-column grid (copy + form) fits without the
 * H1 falling to a third line and pushing the form past the Hero bottom. */
@media (min-width: 901px) and (max-width: 1100px) {
	.seer-dc__hero {
		--seer-hero-title-size: clamp(44px, 5.1vw, 52px);
		--seer-hero-gap-eyebrow-title: 20px;
		--seer-hero-gap-title-body: 24px;
	}

	.seer-dc__hero-copy .seer-dc__process {
		margin-top: 36px !important;
	}
}

/* The application form is the Hero's right-hand conversion column on
 * desktop and stacks below the copy when the two-column rail no longer fits.
 * In the stacked state the Hero must grow with the form content. */
@media (max-width: 900px) {
	.seer-dc__hero {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	.seer-dc__hero-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 36px !important;
		height: auto !important;
		padding: var(--seer-hero-header-safe) 0 56px !important;
	}

	.seer-dc__hero-copy,
	.seer-dc__form {
		grid-column: 1 !important;
	}

	.seer-dc__form {
		justify-self: start !important;
	}
}

/* ==========================================================================
   Responsive Info Bar + CTAs
   ========================================================================== */

@media (max-width: 900px) {
	.seer-solutions-hero-support-strip,
	.seer-qa-hero__trust,
	.seer-sc__stage .sc-metrics {
		--seer-hero-info-rows: 2;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.seer-solutions-hero-support-item:nth-child(n + 3),
	.seer-qa-hero__trust li:nth-child(n + 3),
	.seer-sc__stage .sc-metrics article:nth-child(n + 3) {
		border-top: 1px solid var(--seer-border, #d9d8d2) !important;
	}

	.seer-solutions-hero-support-item:nth-child(3),
	.seer-qa-hero__trust li:nth-child(3),
	.seer-sc__stage .sc-metrics article:nth-child(3) {
		border-left: 0 !important;
	}
}

@media (min-width: 768px) and (max-width: 900px) {
	.seer-solutions-hero-copy {
		width: min(calc(100% - (2 * var(--seer-hero-gutter))), 720px) !important;
	}
}

@media (max-width: 767px) {
	:root {
		--seer-hero-gap-eyebrow-title: 18px;
		--seer-hero-gap-title-body: 20px;
		--seer-hero-gap-body-cta: 18px;
	}

	.sp-products-hub .sp-ph__hero .sp-ph__actions,
	.seer-solutions-hero-actions,
	.sp-about-hero__actions,
	.seer-home-hero__actions {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.sp-products-hub .sp-ph__hero .sp-ph__button,
	.seer-solutions-hero-button--primary,
	.seer-solutions-hero-button--secondary,
	.sp-about-hero__actions .sp-about-action,
	.seer-home-hero__action--primary,
	.sc-hero__cta--primary,
	.sp-guides-hero .sp-guides-text-link,
	.seer-qa-hero .seer-qa-button--primary {
		width: 100% !important;
		min-width: 0 !important;
	}

	.seer-home-hero__title-line,
	.sp-guides-hero__title-line {
		white-space: normal !important;
	}

	.seer-solutions-hero-stage,
	.seer-qa-hero__stage,
	.sp-guides-hero {
		display: block !important;
	}

	.seer-solutions-hero-media,
	.seer-qa-hero__media,
	.sp-guides-hero__visual {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
	}

	.seer-dc__process {
		gap: 10px !important;
		margin-top: 24px !important;
	}

	.seer-dc__process-step {
		grid-template-columns: 58px minmax(0, 1fr) !important;
	}

	.seer-dc__process-icon {
		width: 52px !important;
		height: 52px !important;
	}

	.seer-dc__process-icon img {
		width: 32px !important;
		height: 32px !important;
	}

	.sp-products-hub .sp-ph__hero .sp-ph__actions {
		flex-direction: row !important;
		gap: 10px !important;
	}

	.sp-products-hub .sp-ph__hero .sp-ph__button {
		flex: 1 1 0 !important;
		width: auto !important;
		padding-inline: 12px !important;
	}

	.seer-solutions-hero-actions {
		gap: 8px !important;
	}
}

.seer-sc__stage .service-commitment-page {
	overflow: visible !important;
}

/* ==========================================================================
   2.2.116-2.2.118 mobile Hero corrections
   Keep these overrides phone-only and after the shared cascade so page-level
   legacy rules cannot reintroduce the reported crop, overlap or edge issues.
   ========================================================================== */

@media (max-width: 767px) {
	/* Final typography guards: beat retained high-specificity legacy rules
	 * without changing non-Hero H2 or section-label roles. */
	.elementor-widget-seerpower_service_commitment .seer-sc__stage main.service-commitment-page .sc-hero__copy h1 {
		font-size: var(--seer-hero-title-size) !important;
		line-height: var(--seer-hero-title-lh) !important;
	}

	.sp-qa .seer-qa-hero .seer-qa-button--primary {
		font-family: var(--seer-hero-body-face) !important;
	}

	.sp-about-widget .sp-about-hero__body,
	.sp-about-widget .sp-about-hero__lead {
		font-family: var(--seer-hero-body-face) !important;
	}

	/* Home: let the existing editorial image and dark reading treatment cover
	 * the transparent Header zone instead of creating a separate light cap. */
	.seer-home-hero__stage {
		background: var(--seer-hero-navy-deep) !important;
		color: #fff !important;
	}

	.seer-home-hero__image {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover !important;
		object-position: 62% center !important;
	}

	.seer-home-hero__media::after {
		background:
			linear-gradient(180deg, rgba(4, 28, 43, .88) 0%, rgba(4, 28, 43, .68) 46%, rgba(4, 28, 43, .72) 100%),
			linear-gradient(90deg, rgba(4, 28, 43, .94) 0%, rgba(4, 28, 43, .78) 58%, rgba(4, 28, 43, .48) 100%) !important;
	}

	/* The published Home Header darkens its white Logo for the former light
	 * cap. Restore white Header controls over the image-led treatment. */
	body:is(#seer-home-mobile-header-contrast, body):has(.elementor-widget-seerpower_home_hero) header img {
		filter: brightness(0) invert(1) !important;
	}

	body:has(.elementor-widget-seerpower_home_hero) .xpro-theme-builder-header .xpro-elementor-horizontal-menu-toggler,
	body:has(.elementor-widget-seerpower_home_hero) .xpro-theme-builder-header .xpro-elementor-horizontal-menu-toggler * {
		color: #fff !important;
		fill: currentColor !important;
		stroke: currentColor !important;
	}

	.elementor-widget-seerpower_home_hero .seer-home-hero__title,
	.seer-home-hero .seer-home-hero__title {
		max-width: 100% !important;
		color: #fff !important;
	}

	.seer-home-hero__description {
		color: rgba(255, 255, 255, .82) !important;
	}

	/* Products: replace the cramped four-column phone rail with a legible 2 x 2
	 * specification grid. Values remain stacked above their labels. */
	.sp-products-hub .sp-ph__facts {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		width: 100% !important;
		max-width: none !important;
		margin-top: 24px !important;
		gap: 0 !important;
	}

	.sp-products-hub .sp-ph__facts > div {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		min-width: 0 !important;
		padding: 0 14px 12px !important;
		border-top: 0 !important;
		border-left: 0 !important;
	}

	.sp-products-hub .sp-ph__facts > div:nth-child(even) {
		padding-right: 0 !important;
		padding-left: 14px !important;
		border-left: 1px solid rgba(255, 255, 255, .55) !important;
	}

	.sp-products-hub .sp-ph__facts > div:nth-child(odd) {
		padding-left: 0 !important;
	}

	.sp-products-hub .sp-ph__facts > div:nth-child(n + 3) {
		padding-top: 12px !important;
		padding-bottom: 0 !important;
		border-top: 1px solid rgba(255, 255, 255, .55) !important;
	}

	.sp-products-hub .sp-ph__facts strong,
	.sp-products-hub .sp-ph__facts span {
		white-space: normal !important;
	}

	.sp-products-hub .sp-ph__hero .sp-ph__actions {
		display: block !important;
		margin-top: 12px !important;
	}

	.sp-products-hub .sp-ph__hero .sp-ph__button--primary {
		width: 100% !important;
	}

	/* QA: use the full stage for the image and retain the shared Header-safe
	 * area. The trust strip now starts after the fixed-height Hero. */
	.sp-qa .seer-qa-hero__media {
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
	}

	.sp-qa .seer-qa-hero__image {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover !important;
		object-position: 62% center !important;
	}

	.sp-qa .seer-qa-hero__copy {
		width: calc(100% - 40px) !important;
		max-width: none !important;
		margin-inline: auto !important;
		padding: var(--seer-hero-header-safe) 0 0 !important;
	}

	.sp-qa .seer-qa-hero__trust {
		margin: 0 !important;
		margin-top: 0 !important;
	}

	/* Give Solutions, QA and Service the same complete 560px image/copy canvas
	 * as About and Guides. Their full-width 2 x 2 bars begin after the Hero and
	 * reserve their complete 208px height in normal page flow. */
	.seer-solutions-hero-stage,
	.seer-qa-hero__stage,
	.seer-sc__stage .sc-hero {
		--seer-hero-content-bottom-safe: 0px;
	}

	.seer-solutions-hero-support-strip,
	.seer-qa-hero__trust,
	.seer-sc__stage .sc-metrics {
		width: 100% !important;
		max-width: none !important;
		transform: translate(-50%, 0) !important;
		border-right: 0 !important;
		border-left: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	.seer-solutions-hero-section {
		padding-bottom: var(--seer-hero-info-height) !important;
	}

	.seer-qa-hero,
	.seer-sc__stage .sc-hero {
		margin-bottom: var(--seer-hero-info-height) !important;
	}

	/* Service metrics cannot fit vertically inside the shared 104px rows.
	 * Place the icon beside the number/label and preserve the 208px shell. */
	.seer-sc__stage .sc-metrics article {
		grid-template-columns: 40px minmax(0, 1fr) !important;
		gap: 10px !important;
		align-items: center !important;
		justify-items: start !important;
		min-height: calc(var(--seer-hero-info-height) / 2) !important;
		padding: 12px 10px !important;
		text-align: left !important;
	}

	.seer-sc__stage .sc-metrics .sc-metric__icon {
		width: 40px !important;
		height: 40px !important;
	}

	.seer-sc__stage .sc-metrics strong {
		font-size: 32px !important;
		line-height: .95 !important;
	}

	.seer-sc__stage .sc-metrics small,
	.seer-sc__stage main.service-commitment-page .sc-metrics small {
		max-width: none !important;
		margin-top: 3px !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		line-height: 1.18 !important;
		white-space: normal !important;
		text-wrap: pretty;
	}

	/* Dealer is content-height because its form stacks inside the Hero. Keep
	 * the same 22px clearance below the compact 76px Header, then transfer the
	 * released 14px plus the approved extra 10px to the bottom canvas. */
	.elementor-widget-seerpower_dealer_center .seer-dc__hero {
		--seer-hero-header-safe: 98px;
	}

	.elementor-widget-seerpower_dealer_center .seer-dc__hero-grid {
		padding-bottom: 80px !important;
	}

	/* About: constrain the copy rail before the 100%-wide CTAs are calculated,
	 * producing the same 20px inset on both sides. */
	.sp-about-widget .sp-about-hero__copy {
		width: calc(100% - 40px) !important;
		margin-inline: auto !important;
		padding-inline: 0 !important;
	}
}

/* Solutions desktop title: preserve the first authored line and allow the
 * second and third saved Elementor lines to share one wider visual row. */
@media (min-width: 1200px) {
	.elementor-widget-seerpower_solutions_hero .seer-solutions-hero-copy {
		width: min(calc(64% - 40px), 900px) !important;
	}

	.elementor-widget-seerpower_solutions_hero .seer-solutions-hero-copy h1 {
		max-width: 900px !important;
	}

	.elementor-widget-seerpower_solutions_hero .seer-solutions-hero-copy h1 .seer-solutions-hero-title-line {
		display: inline;
	}

	.elementor-widget-seerpower_solutions_hero .seer-solutions-hero-copy h1 .seer-solutions-hero-title-line:first-child {
		display: block;
	}
}

/* Unified eyebrow role. This copies the approved QA `QUALITY SYSTEM`
 * typography across the namespaced Elementor plugin without changing each
 * section's authored spacing or content. */
body [class*="elementor-widget-seerpower_"] :is(
	[class*="eyebrow"],
	.seer-dc__foundation-head > div > p,
	.seer-dc__section-head > div > p,
	.seer-dc__confidence-header > div > p,
	.seer-dc__faq-header > div > p,
	.seer-dc__faq header > p,
	.sc-results header > p,
	.sc-faq__heading > p
) {
	color: var(--seer-orange, #f15a18) !important;
	font-family: "Helvetica Neue", "Segoe UI", "Noto Sans", system-ui, sans-serif !important;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 600 !important;
	line-height: 1.65 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
}