/* =========================================================
   Sunspire home page helpers (Figma "Home" desktop 1920 / mobile 375).
   Classes are set on Elementor containers/widgets (Advanced > CSS Classes).
   ========================================================= */

:root {
	--ss-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Stroke icons (Figma line icons) must never be filled by Elementor's icon colour rules */
.ss-icon-svg[stroke] {
	fill: none !important;
}

/* ---------- Eyebrow: orange square + mono uppercase label ---------- */
/* inline-flex titles: drop the parent line box so the widget is exactly the label's height */
.ss-eyebrow,
.ss-hero-tag {
	line-height: 0;
}

.ss-eyebrow .elementor-heading-title,
.ss-hero-tag .elementor-heading-title {
	vertical-align: top;
}

.ss-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.ss-eyebrow .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	background: var(--e-global-color-ss_orange, #F07625);
}

.ss-eyebrow--sm .elementor-heading-title {
	gap: 8px;
}

.ss-eyebrow--sm .elementor-heading-title::before {
	width: 8px;
	height: 8px;
}

/* ---------- Hero ---------- */
.ss-hero,
.ss-cta {
	position: relative;
}

/* Review carousel takes the space left of the rating card and never pushes past it
   (Elementor's container width/flex otherwise win, and a long row of cards widened the page) */
.e-con.ss-carousel-wrap {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100%;
}

/* Elementor wraps row containers on mobile; Figma keeps these on one line */
@media (max-width: 767px) {
	.ss-feature-card,
	.ss-rating-card > .e-con:first-child {
		--flex-wrap: nowrap;
		flex-wrap: nowrap !important;
	}

	.ss-feature-card > .e-con {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Figma mobile: 48px icon tile (30px icon + 9px padding) */
	.ss-feature-card .elementor-icon {
		padding: 9px !important;
	}
}

/* Tablet: reviews heading + intro stack (like mobile) so the heading keeps its 2 lines */
@media (min-width: 768px) and (max-width: 1024px) {
	.ss-reviews .ss-grow {
		flex-direction: column !important;
		gap: 16px !important;
	}

	.ss-reviews .ss-grow > .elementor-element {
		width: 100% !important;
		margin-top: 0 !important;
	}
}

/* Tablet/mobile: each feature card hugs its own content (Figma), instead of equal fr rows */
@media (max-width: 1024px) {
	.e-grid:has(> .ss-feature-card) {
		grid-template-rows: none !important;
		grid-auto-rows: auto;
	}
}

.ss-feature-card .elementor-widget-icon {
	line-height: 0;
}

.ss-feature-card .elementor-icon-wrapper {
	line-height: 0;
}

/* Rating card top row: "4.9/5" left, Google + stars right, both at their natural width */
.ss-rating-card > .e-con:first-child > .elementor-element {
	flex: 0 0 auto !important;
	width: auto !important;
}

.ss-rating,
.ss-rating .elementor-heading-title {
	white-space: nowrap;
}

.ss-rating-card,
.elementor-widget-sunspire-carousel-nav {
	flex-shrink: 0 !important;
}

@media (min-width: 1025px) {
	.ss-solution-card {
		min-height: 620px;
	}
}

@media (max-width: 767px) {
	.ss-carousel-wrap {
		width: calc(100% + 20px) !important;
		margin-right: -20px;
	}
}

.ss-hero {
	overflow: hidden;
	isolation: isolate;
}

/* Figma: photo + linear gradient #0D0D0C 20% at 35% -> 100% at the bottom (desktop and mobile) */
.ss-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(13, 13, 12, .2) 35%, rgba(13, 13, 12, 1) 100%);
}

.ss-hero > .elementor-element {
	position: relative;
	z-index: 2;
}

.ss-hero > .elementor-element.ss-hero-lettering {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -11.82vw;
	z-index: 1;
	width: 100%;
	max-width: none;
	pointer-events: none;
}

.ss-hero-lettering img {
	display: block;
	width: 100%;
	height: auto;
}

.ss-hero-tag .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 11px;
	border-radius: 10px;
	background: rgba(47, 44, 41, .3);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
}

.ss-hero-tag .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--e-global-color-ss_orange, #F07625);
}

.ss-gradient-text .elementor-heading-title {
	background: linear-gradient(180deg, #FF9752 0%, #E4DCD1 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

@media (max-width: 767px) {
	.ss-hero > .elementor-element.ss-hero-lettering {
		bottom: -2.67vw;
	}

	.ss-hero-tag .elementor-heading-title {
		padding: 10px 11px;
	}
}

/* ---------- About ---------- */
.ss-statement strong {
	font-weight: 700;
}

.ss-stat .elementor-counter {
	align-items: flex-start;
}

.ss-stat .elementor-counter-number-wrapper {
	justify-content: flex-start;
}

.ss-stat .elementor-counter-number-prefix,
.ss-stat .elementor-counter-number-suffix {
	flex-grow: 0;
	text-align: left;
}

.ss-stat .elementor-counter-title {
	display: none;
}

/* ---------- Image widgets used as covers ---------- */
.ss-cover img {
	display: block;
	width: 100%;
	object-fit: cover;
}

/* ---------- Solutions: cards stack while scrolling (desktop) ---------- */
@media (min-width: 1025px) {
	.ss-solution-card {
		position: sticky;
		top: 120px;
	}
}

/* Text link with the orange arrow ("Explore residential solar") */
.ss-link-arrow .elementor-heading-title a,
.ss-link-arrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.ss-link-arrow .elementor-heading-title a::after {
	content: "";
	flex: none;
	width: 18px;
	height: 12px;
	background: var(--e-global-color-ss_orange, #F07625);
	-webkit-mask: url(../icons/arrow-right.svg) center / contain no-repeat;
	mask: url(../icons/arrow-right.svg) center / contain no-repeat;
	transition: transform .2s ease;
}

.ss-link-arrow .elementor-heading-title a:hover::after {
	transform: translateX(4px);
}

/* "Keep Scrolling to Explore" — label + 24px double chevron */
.ss-scroll-hint .elementor-heading-title a,
.ss-scroll-hint .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 17px;
}

.ss-scroll-hint .elementor-heading-title::after {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background: var(--e-global-color-ss_beige, #E4DCD1);
	-webkit-mask: url(../icons/arrow-double-right-24.svg) center / contain no-repeat;
	mask: url(../icons/arrow-double-right-24.svg) center / contain no-repeat;
}

/* ---------- How it works: horizontal scroll pinned to vertical scroll (desktop) ---------- */
.ss-hscroll {
	overflow-x: clip;
}

@media (min-width: 1025px) {
	.ss-hscroll__sticky {
		position: sticky;
		top: 0;
	}

	.ss-hscroll__track {
		flex-wrap: nowrap !important;
		will-change: transform;
		/* Elementor containers animate transform over .4s: the track must follow the scroll 1:1,
		   otherwise it lags behind and catches up in steps (and keeps moving after you stop). */
		transition: none !important;
	}

	.ss-hscroll__track > .e-con {
		flex-shrink: 0 !important;
	}
}

/* ---------- How it works: active step card ----------
   All cards are dark. The active card (.is-active, set by sunspire-home.js while scrolling)
   gets a light layer that slides up from the bottom; leaving, it slides back down.
   Text and tags change colour together with it; the highlighted tag turns primary orange. */
.ss-step-card {
	--ss-step-ease: cubic-bezier(.65, 0, .35, 1);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ss-step-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--e-global-color-ss_beige, #E4DCD1);
	transform: translateY(101%);
	transition: transform .8s var(--ss-step-ease);
	pointer-events: none;
}

.ss-step-card.is-active::after {
	transform: translateY(0);
}

.ss-step-card .ss-step-num .elementor-heading-title,
.ss-step-card .ss-step-title .elementor-heading-title,
.ss-step-card .ss-step-desc .elementor-heading-title {
	transition: color .6s var(--ss-step-ease);
}

.ss-step-card.is-active .ss-step-num .elementor-heading-title {
	color: var(--e-global-color-ss_ink, #35302B) !important;
}

.ss-step-card.is-active .ss-step-title .elementor-heading-title {
	color: var(--e-global-color-ss_dark, #25211D) !important;
}

.ss-step-card.is-active .ss-step-desc .elementor-heading-title {
	color: var(--e-global-color-ss_muted, #6D6761) !important;
}

.ss-step-card .ss-tag {
	transition: color .6s var(--ss-step-ease), border-color .6s var(--ss-step-ease), background-color .6s var(--ss-step-ease);
}

.ss-step-card.is-active .ss-tag {
	color: var(--e-global-color-ss_dark, #25211D);
	border-color: var(--e-global-color-ss_dark, #25211D);
}

.ss-step-card.is-active .ss-tag.is-highlight {
	background-color: var(--e-global-color-ss_orange, #F07625);
	border-color: var(--e-global-color-ss_orange, #F07625);
	color: var(--e-global-color-ss_cream, #ECE7E0);
}

@media (prefers-reduced-motion: reduce) {
	.ss-step-card::after,
	.ss-step-card .ss-tag,
	.ss-step-card .elementor-heading-title {
		transition: none !important;
	}
}

/* ---------- Tags (pills) ---------- */
.ss-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ss-tag {
	padding: 14px 18px;
	border: .5px solid currentColor;
	border-radius: 100px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -0.04em;
	white-space: nowrap;
}

.ss-tags--dark .ss-tag {
	color: var(--e-global-color-ss_cream, #ECE7E0);
	border-color: var(--e-global-color-ss_cream, #ECE7E0);
}

.ss-tags--dark .ss-tag.is-highlight {
	background: var(--e-global-color-ss_ink, #35302B);
}

.ss-tags--light .ss-tag {
	color: var(--e-global-color-ss_dark, #25211D);
	border-color: var(--e-global-color-ss_dark, #25211D);
}

.ss-tags--light .ss-tag.is-highlight {
	background: var(--e-global-color-ss_orange, #F07625);
	border-color: var(--e-global-color-ss_orange, #F07625);
	color: var(--e-global-color-ss_cream, #ECE7E0);
}

@media (max-width: 767px) {
	.ss-tags {
		gap: 8px;
	}

	.ss-tag {
		padding: 10px 16px;
		font-size: 15px;
	}

	/* Figma mobile: the highlighted pill is a size up */
	.ss-tag.is-highlight {
		font-size: 16px;
	}
}

/* ---------- Stars / avatars ---------- */
.ss-stars {
	--ss-star: 20px;
	display: flex;
	color: #FBBC05;
}

.ss-stars .ss-icon-svg {
	width: var(--ss-star);
	height: var(--ss-star);
}

.ss-avatars {
	--ss-avatar: 42px;
	display: flex;
}

.ss-avatars img {
	width: var(--ss-avatar) !important;
	height: var(--ss-avatar) !important;
	border-radius: 50%;
	border: 0 solid var(--e-global-color-ss_ink, #35302B); /* exported avatars already carry the 2px ring */
	object-fit: cover;
	margin-left: -14px;
	max-width: none;
}

.ss-avatars img:first-child {
	margin-left: 0;
}

.ss-rating .elementor-heading-title span {
	font-size: 16px;
	line-height: 18px;
	color: var(--e-global-color-ss_beige, #E4DCD1);
	letter-spacing: -0.02em;
}

.ss-rating-text strong {
	font-weight: 500;
	color: var(--e-global-color-ss_cream, #ECE7E0);
}

/* ---------- Review carousel ---------- */
.ss-carousel__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	outline: 0;
}

.ss-carousel__track::-webkit-scrollbar {
	display: none;
}

.ss-review-card {
	flex: 0 0 calc((100% - 40px) / 3);
	box-sizing: border-box;
	min-height: 460px;
	margin: 0;
	padding: 37px 31px 24px;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	background: var(--e-global-color-ss_card, #F6F0E6);
	scroll-snap-align: start;
}

.ss-review-card .ss-stars {
	--ss-star: 24px;
}

.ss-review-card__mark {
	display: block;
	margin-top: 49px;
	color: var(--e-global-color-ss_ink, #35302B);
}

.ss-review-card__mark .ss-icon-svg {
	width: 33px;
	height: 19px;
}

.ss-review-card__text {
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	font-family: "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 24px;
	line-height: 31px;
	letter-spacing: -0.02em;
	color: var(--e-global-color-ss_ink, #35302B);
}

.ss-review-card__text,
.ss-review-card__author,
.ss-review-card__author span {
	font-style: normal;
}

.ss-grow {
	flex: 1 1 0 !important;
	min-width: 0;
}

.ss-review-card__author {
	margin-top: auto;
	padding-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: "Poppins", sans-serif;
	letter-spacing: -0.04em;
}

.ss-review-card__name {
	font-weight: 500;
	font-size: 20px;
	line-height: 20px;
	color: var(--e-global-color-ss_ink, #35302B);
}

.ss-review-card__role {
	font-size: 16px;
	line-height: 20px;
	color: var(--e-global-color-ss_muted, #6D6761);
}

/* Long reviews are cut to the same number of lines, so every card keeps the design size */
.ss-review-card__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ss-lines, 6);
	line-clamp: var(--ss-lines, 6);
	overflow: hidden;
}

a.ss-review-card__name {
	text-decoration: none;
	transition: color .3s;
}

a.ss-review-card__name:hover {
	color: var(--e-global-color-ss_orange, #F07625);
}

@media (max-width: 1024px) {
	.ss-review-card {
		flex-basis: calc((100% - 20px) / 2);
	}
}

@media (max-width: 767px) {
	.ss-carousel__track {
		gap: 12px;
		padding-right: 20px;
		scroll-padding-left: 0;
	}

	.ss-review-card {
		flex: 0 0 277px;
		min-height: 440px;
		padding: 24px 20px;
	}

	.ss-review-card__mark {
		margin-top: 16px;
	}

	.ss-review-card__text {
		font-size: 20px;
		line-height: 28px;
	}
}

/* Carousel arrows */
.ss-carousel-nav {
	--ss-nav: 60px;
	display: flex;
	gap: 24px;
}

.ss-carousel-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ss-nav);
	height: var(--ss-nav);
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.ss-carousel-nav__btn .ss-icon-svg {
	width: calc(var(--ss-nav) * .4);
	height: calc(var(--ss-nav) * .4);
}

.ss-carousel-nav__btn--prev {
	background: var(--e-global-color-ss_beige, #E4DCD1);
	color: var(--e-global-color-ss_dark, #25211D);
}

.ss-carousel-nav__btn--next {
	background: var(--e-global-color-ss_ink, #35302B);
	color: var(--e-global-color-ss_cream, #ECE7E0);
}

/* The Hello theme paints every focused/hovered <button> pink (#c36) with "button:focus",
   which beats a single class. After a click the button keeps focus, so the pink stayed
   after the mouse left. These selectors are stronger and keep our own colours. */
.ss-carousel-nav .ss-carousel-nav__btn--prev:focus,
.ss-carousel-nav .ss-carousel-nav__btn--prev:active {
	background: var(--e-global-color-ss_beige, #E4DCD1);
	color: var(--e-global-color-ss_dark, #25211D);
}

.ss-carousel-nav .ss-carousel-nav__btn--next:focus,
.ss-carousel-nav .ss-carousel-nav__btn--next:active {
	background: var(--e-global-color-ss_ink, #35302B);
	color: var(--e-global-color-ss_cream, #ECE7E0);
}

.ss-carousel-nav .ss-carousel-nav__btn:hover,
.ss-carousel-nav .ss-carousel-nav__btn:focus-visible {
	background: var(--e-global-color-ss_orange, #F07625);
	color: #FFFFFF;
}

.ss-carousel-nav .ss-carousel-nav__btn:focus-visible {
	outline: 2px solid var(--e-global-color-ss_orange, #F07625);
	outline-offset: 3px;
	box-shadow: none;
}

.ss-carousel-nav .ss-carousel-nav__btn[disabled],
.ss-carousel-nav .ss-carousel-nav__btn[disabled]:hover,
.ss-carousel-nav .ss-carousel-nav__btn[disabled]:focus {
	opacity: .45;
	cursor: default;
	background: var(--e-global-color-ss_beige, #E4DCD1);
	color: var(--e-global-color-ss_dark, #25211D);
}

@media (max-width: 767px) {
	.ss-carousel-nav {
		gap: 18px;
	}
}

/* ---------- Sunspire Button: light variant ---------- */
.ss-btn--light {
	background-color: var(--e-global-color-ss_beige, #E4DCD1);
	color: var(--e-global-color-ss_ink, #35302B);
}

.ss-btn--light:hover {
	background-color: var(--e-global-color-ss_cream, #ECE7E0);
	color: var(--e-global-color-ss_ink, #35302B);
}

.ss-btn--light .ss-btn__icon {
	color: var(--e-global-color-ss_cream, #ECE7E0);
}

.ss-btn__icon svg[width="14"] {
	width: 14px;
}

/* ---------- CTA illustrations ---------- */
.ss-cta {
	overflow: hidden;
}

.ss-cta > .elementor-element.ss-cta-illus {
	position: absolute;
	bottom: 0;
	width: 566px;
	max-width: 30%;
	pointer-events: none;
	z-index: 0;
}

.ss-cta > .elementor-element.ss-cta-illus--left {
	left: 0;
}

.ss-cta > .elementor-element.ss-cta-illus--right {
	right: 0;
}

.ss-cta-illus img {
	display: block;
	width: 100%;
	height: auto;
}

.ss-cta-illus--left img {
	transform: scaleX(-1);
}

.ss-cta > .elementor-element:not(.ss-cta-illus) {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.ss-cta > .elementor-element.ss-cta-illus {
		width: 175px;
		max-width: 47%;
	}
}

/* ---------- Pixel fixes vs Figma ---------- */
/* Fixed-width intro paragraphs next to section headings must not be squeezed by the flex row */
.ss-noshrink {
	flex-shrink: 0 !important;
}

/* inline-flex link/label titles: no extra parent line box */
.ss-link-arrow,
.ss-scroll-hint,
.ss-rating-card .elementor-widget-icon {
	line-height: 0;
}

.ss-link-arrow .elementor-heading-title,
.ss-scroll-hint .elementor-heading-title {
	vertical-align: top;
}

.ss-rating-card .elementor-icon-wrapper {
	line-height: 0;
}

/* ---------- Hero fills the screen ----------
   Content is anchored to the bottom, 11.93vw above it (= 229px at 1920, Figma), so the gap to the
   "Sunspire" lettering (which also scales with vw) keeps the Figma proportions. On a 1920x1000 screen
   this is exactly the Figma frame; shorter screens show the whole hero, taller ones grow it.
   padding-top keeps the text clear of the floating header when the screen is short. */
@media (min-width: 768px) {
	.ss-hero {
		min-height: 100vh !important;
		min-height: 100svh !important;
		justify-content: flex-end !important;
		padding-top: 170px !important;
		padding-bottom: 11.93vw !important;
	}
}

@media (max-width: 767px) {
	.ss-hero {
		min-height: max(640px, 100vh) !important;
		min-height: max(640px, 100svh) !important;
	}
}

/* SVG artwork keeps its box before it loads (lazy images otherwise start at 0px tall) */
.ss-hero-lettering img {
	aspect-ratio: 1920 / 487;
}

.ss-cta-illus img {
	aspect-ratio: 566 / 343.812;
}

/* Short laptop screens (e.g. 1366x768): trim top space so the hero still fits */
@media (min-width: 768px) and (max-height: 800px) { .ss-hero { padding-top:160px !important; } }

/* Hero background video: sits under the dark gradient overlay and the content */
.ss-hero > .elementor-background-video-container {
	z-index: 0;
	background: #25211D url("/wp-content/uploads/2026/11/sunspire-hero-poster.jpg") center / cover no-repeat;
}

.ss-hero .elementor-background-video-hosted {
	object-fit: cover;
	width: 100% !important;
	height: 100% !important;
	top: 0 !important;
	left: 0 !important;
	transform: none !important;
	max-width: none;
}

/* Mobile: hero top padding always clears the floating header nav (84px) by 40px */
@media (max-width: 767px) {
	.ss-hero { padding-top: 124px !important; }
}

/* ---------- Solutions: fixed background, only the cards move (scroll stack) ---------- */
/* Not background-attachment: fixed (it repaints the whole section on every scroll frame
   and makes scrolling hitch; mobile browsers ignore it). A viewport-pinned layer clipped
   to the section looks the same on every screen size and is moved by the GPU. */
#services {
	background-attachment: scroll !important;
	clip-path: inset(0);
}

#services::after {
	content: "";
	position: fixed;
	inset: 0;
	height: 100lvh;
	z-index: -1;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

@media (min-width: 1025px) {
	#services {
		background-attachment: scroll !important;
		clip-path: inset(0);
	}

	#services::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background-image: inherit;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		pointer-events: none;
	}

	/* Each card sticks a little lower than the one before, so earlier cards peek out on top */
	.ss-solution-card {
		transform-origin: center top;
		box-shadow: 0 -8px 24px rgba(20, 14, 9, .14);
		will-change: transform;
	}

	/* Every card stacks at the same spot */
	.ss-solution-card { top: 120px; }
}

/* ---------- Solutions on mobile/tablet: heading sticks, cards stack under it ----------
   --ss-head-h is the heading's real height, set by sunspire-home.js */
@media (max-width: 1024px) {
	.ss-sol-head {
		position: sticky;
		top: 24px;
		z-index: 0;
	}

	.ss-solution-card {
		position: sticky;
		top: calc(24px + var(--ss-head-h, 134px) + 24px);
		min-height: 520px;
		justify-content: flex-start !important; /* equal-height cards keep their content at the top */
		transform-origin: center top;
		box-shadow: 0 -12px 32px rgba(20, 14, 9, .3);
		will-change: transform;
	}
}

/* ---------- 404 page: big number in an orange → ink gradient ---------- */
.ss-404-num .elementor-heading-title {
	background-image: linear-gradient(180deg, var(--e-global-color-ss_orange, #F07625) 0%, var(--e-global-color-ss_ink, #35302B) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ---------- How it works on mobile/tablet: heading sticks, cards stack under it ----------
   Same pattern as Solutions. The card on top gets the light active look, as on desktop.
   --ss-head-h is the heading's real height, set by sunspire-home.js */
@media (max-width: 1024px) {
	.ss-hscroll__sticky > .e-con:first-child,
	.ss-hscroll__sticky > .e-con-inner > .e-con:first-child {
		position: sticky;
		top: 24px;
		z-index: 0;
	}

	.ss-step-card {
		position: sticky;
		top: calc(24px + var(--ss-head-h, 220px) + 24px);
		z-index: 1;
		transform-origin: center top;
		box-shadow: none !important;
		will-change: transform;
	}

	/* Space before each card (not after), so each card is read fully before the next one
	   slides over it. It must be margin-top: a sticky card is pushed up once its own bottom
	   margin reaches the end of the stack, so space after the cards would either push earlier
	   cards over the heading or leave an empty gap below the last card. */
	.ss-step-card { margin-bottom: 0 !important; }
	.ss-step-card:not(:first-child) { margin-top: 40vh !important; }
}