/* =============================================================================
   Solutions Page Styles
   Covers all sections in the solutions_content_groups flexible content.
   Loaded only when the Solutions page template is active.
   ============================================================================= */

/* ── Foundation grid polyfill (scoped) ─────────────────────────────────────── */
/*
 * The theme loads FlexboxGrid (col-xs-*) but NOT Foundation.
 * These rules make grid-container / grid-x / cell work on solutions pages
 * using the same proportional 18-column logic Foundation uses.
 */
.sol-page .grid-container {
	width: 92vw;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left:  clamp(16px, 3vw, 40px);
	padding-right: clamp(16px, 3vw, 40px);
	box-sizing: border-box;
}

.sol-page .grid-x {
	display: flex;
	flex-wrap: wrap;
}

.sol-page .grid-margin-x {
	gap: clamp(16px, 2.5vw, 32px);
}

.sol-page .align-middle { align-items: center; }
.sol-page .align-top    { align-items: flex-start; }

/* Default: all cells full-width (mobile-first) */
.sol-page .cell,
.sol-page .small-18 {
	flex: 1 1 100%;
	min-width: 0;
}


/* Medium ≥ 640 px */
@media (min-width: 640px) {
	.sol-page .medium-7  { flex: 7  1 0; }
	.sol-page .medium-8  { flex: 8  1 0; }
	.sol-page .medium-9  { flex: 9  1 0; }
	.sol-page .medium-10 { flex: 10 1 0; }
	.sol-page .medium-11 { flex: 11 1 0; }
	.sol-page .medium-16 { flex: 16 1 0; }
	
}

/* Large ≥ 1024 px */
@media (min-width: 1024px) {
	.sol-page .large-7  { flex: 7  1 0; }
	.sol-page .large-8  { flex: 8  1 0; }
	.sol-page .large-9  { flex: 9  1 0; }
	.sol-page .large-10 { flex: 10 1 0; }
	.sol-page .large-11 { flex: 11 1 0; }
	.sol-page .large-14 { flex: 14 1 0; }
	.sol-page .large-16 { flex: 16 1 0; }
}

/* ── Shared tokens ─────────────────────────────────────────────────────────── */
.sol-page {
	--sol-navy:          #071927;
	--sol-dark:          #0d1e2c;
	--sol-slate:         #1e3448;
	--sol-orange:        #EF8B1D;
	--sol-orange-light:  #FFB547;
	--sol-blue:          #00446A;
	--sol-blue-mid:      #0077BE;
	--sol-blue-light:    #4FB3F0;
	--sol-white:         #ffffff;
	--sol-off-white:     #f5f7fa;
	--sol-light-gray:    #e8ecf0;
	--sol-text-body:     #444d58;
	--sol-text-light:    rgba(255,255,255,0.82);
	--sol-section-pad:   clamp(60px, 7vw, 100px);
	--sol-border-radius: 8px;
}

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.sol-hero {
	overflow: visible;
}

/* White zone: eyebrow + heading + body copy */
.sol-hero__copy {
	padding: clamp(80px, 10vw, 130px) clamp(20px, 4vw, 60px) clamp(40px, 5vw, 64px) 0;
	position: relative;
}

/* Dark zone: full-bleed navy background behind jump links */
.sol-hero__links-band {
	position: relative;
	isolation: isolate; /* own stacking context so pseudo-elements sit above hero white bg */
	flex: 1 1 auto; /* fill remaining left-column height so ::before aligns with right col */
	padding: clamp(40px, 5vw, 60px) 0 clamp(56px, 7vw, 90px);
}

/* Solid full-bleed navy fill. Starts exactly at the flex boundary with .sol-hero__copy,
   so it can never leave a gap regardless of viewport width. */
.sol-hero__links-band::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100vw;
	right: -100vw;
	background: var(--sol-navy);
	z-index: -1;
}

/* Angled orange divider. Deliberately oversized and centered on the navy seam (rather than
   trig-aligned to it), so it always overlaps both the white copy above and the navy below.
   A strip rotated about its own center drifts roughly x*tan(angle) from the seam at distance x
   from center, on BOTH sides (rotation can't pin one edge flat without the other drifting the
   opposite way) — at -1.4deg that's ~24px at a 1920px-wide screen, so the strip needs at least
   that much half-height on each side of the seam to avoid the light copy above / dark band
   below showing through past its rotated edges. .sol-hero__copy's bottom padding
   (clamp(40px, 5vw, 64px)) comfortably covers a 24px upward intrusion without reaching the CTA
   row above it, so the strip is centered on the seam (not offset) at a height sized for that. */
.sol-hero__links-band::after {
	content: '';
	position: absolute;
	top: -25px;
	height: 50px;
	left: -100vw;
	right: -100vw;
	background: var(--sol-orange);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
	transform: rotate(-1.4deg);
	z-index: -1;
	pointer-events: none;
}

.sol-hero__left {
	display: flex;
	flex-direction: column;
}

/* Eyebrow */
.sol-hero__eyebrow {
	font-family: 'Raleway', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sol-orange);
	margin: 0 0 16px;
}

/* H1 */
.sol-hero__title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(32px, 4.5vw, 58px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--sol-blue);
	margin: 0 0 24px;
	letter-spacing: -0.02em;
}

/* Support text */
.sol-hero__content {
	color: var(--sol-text-body);
	margin-bottom: 0;
	max-width: 540px;
}

/* CTA buttons — sit below the support text, above the dark jump-links band */
.sol-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(24px, 3vw, 36px);
}

.sol-hero__cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	padding: 13px 28px;
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.sol-hero__cta-btn--primary {
	background: var(--sol-orange);
	border: 2px solid var(--sol-orange);
	color: var(--sol-white);
}

.sol-hero__cta-btn--primary:hover {
	background: var(--sol-orange-light);
	border-color: var(--sol-orange-light);
	color: var(--sol-white);
}

.sol-hero__cta-btn--secondary {
	background: transparent;
	border: 2px solid var(--sol-blue);
	color: var(--sol-blue);
}

.sol-hero__cta-btn--secondary:hover {
	background: var(--sol-blue);
	color: var(--sol-white);
}

/* Jump links — vertical timeline with dot markers, description on hover/touch */
@keyframes sol-link-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.sol-hero__jump-intro {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-bottom: 20px;
}

.sol-hero__jump-eyebrow {
	font-family: 'Raleway', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sol-orange);
	margin: 0;
}

.sol-hero__jump-instructions {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
}

/* Matches the surrounding instructions text by default ("section"); only the
   hovered/focused link's title (swapped in via JS) gets the blue/bold treatment. */
.sol-hero__jump-target {
	color: inherit;
	font-weight: inherit;
}

.sol-hero__jump-target.is-active {
	color: var(--blue-light, #21a5d5);
	font-weight: 700;
}

.sol-hero__jump-links {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
	padding-left: 28px;
	/* Clips the cover strip below, which overshoots by design. */
	overflow: hidden;
}

/* Vertical connecting line — left aligns with dot centers.
   Dot box is 11px (9px + 1px border each side) at left:-26px within the link,
   and the nav's 28px left padding puts its center at 6.5px from the nav's edge;
   top:20px + 5.5px puts the center 25.5px down from each link's top. */
.sol-hero__jump-links::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 25.5px;
	bottom: 25.5px;
	width: 1px;
	background: #21a5d5;
}

/* The line above is sized from the nav, so expanding the last link's
   description on hover would lengthen it past the final dot. This strip sits
   over the line below that dot and hides exactly the amount the last link
   grows, keeping the visible line ending at the dot. */
.sol-hero__jump-link:last-child::after {
	content: '';
	position: absolute;
	/* Line sits 6px from the nav's padding box; the link starts 28px in, so
	   -23px puts this strip's left edge on the line, 3px wide to fully cover it.
	   Starts at the dot's centre so no line shows below the dot at any size —
	   the dot is lifted above this strip with z-index (below), so covering its
	   lower half here is harmless. */
	left: -23px;
	top: 25.5px;
	height: 100vh;
	width: 3px;
	background: var(--sol-navy);
	pointer-events: none;
	z-index: 0;
}

/* Lift the dot above the cover strip so the strip can start at the dot's
   centre without slicing it — including when it scales 1.3x on hover. */
.sol-hero__jump-link::before {
	z-index: 1;
}

/* `align-self: flex-start` keeps the anchor at its content width inside the
   column-flex nav — as a stretched flex item it would span the whole band and
   make the empty space to the right of the label hoverable. */
.sol-hero__jump-link {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	max-width: 100%;
	padding: 14px 0;
	position: relative;
	text-decoration: none;
	border-bottom: none !important;
	transition: color 0.2s ease;
	animation: sol-link-in 0.45s ease both;
}
.sol-hero__jump-link:nth-child(1) { animation-delay: 0.5s; }
.sol-hero__jump-link:nth-child(2) { animation-delay: 0.65s; }
.sol-hero__jump-link:nth-child(3) { animation-delay: 0.8s; }
.sol-hero__jump-link:nth-child(4) { animation-delay: 0.95s; }
.sol-hero__jump-link:nth-child(5) { animation-delay: 1.1s; }

/* Dot marker — replaces icon */
.sol-hero__jump-link::before {
	content: '';
	position: absolute;
	left: -26px;
	top: 20px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #21a5d5;
	border: 1px solid #21a5d5;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sol-hero__jump-link:hover::before,
.sol-hero__jump-link.is-open::before {
	background: var(--sol-orange);
	border-color: var(--sol-orange);
	transform: scale(1.3);
}

/* Hide icon and arrow (replaced by CSS dot) */
.sol-hero__jump-icon,
.sol-hero__jump-arrow {
	display: none;
}

.sol-hero__jump-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sol-hero__jump-num {
	display: block;
	font-size: 11px;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--sol-orange);
	opacity: 0.7;
	margin-bottom: 4px;
}

.sol-hero__jump-label {
	font-size: 15px;
	font-weight: 700;
	font-family: 'Raleway', sans-serif;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.55);
	transition: color 0.2s ease;
}

.sol-hero__jump-link:hover .sol-hero__jump-label,
.sol-hero__jump-link.is-open .sol-hero__jump-label {
	color: #fff;
}

/* Shown faint by default so the section content is visible at a glance;
   brightens to full opacity on hover/tap.
   `width: 0; min-width: 100%` keeps it from widening the shrink-to-fit anchor:
   it fills whatever the label establishes instead of contributing its own
   (much longer) intrinsic width, so the hover target stays the title's width. */
.sol-hero__jump-desc {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.5;
	width: 0;
	min-width: 100%;
	opacity: 0.4;
	transition: opacity 0.25s ease;
	margin-top: 5px;
}

.sol-hero__jump-link:hover .sol-hero__jump-desc,
.sol-hero__jump-link.is-open .sol-hero__jump-desc {
	opacity: 1;
}

/* Jump link stagger-in entrance — triggered by JS adding .links-ready */
.sol-hero__jump-links.links-ready .sol-hero__jump-link:nth-child(1) { animation-delay: 0.1s; }
.sol-hero__jump-links.links-ready .sol-hero__jump-link:nth-child(2) { animation-delay: 0.25s; }
.sol-hero__jump-links.links-ready .sol-hero__jump-link:nth-child(3) { animation-delay: 0.4s; }
.sol-hero__jump-links.links-ready .sol-hero__jump-link:nth-child(4) { animation-delay: 0.55s; }
.sol-hero__jump-links.links-ready .sol-hero__jump-link:nth-child(5) { animation-delay: 0.7s; }

@media (prefers-reduced-motion: reduce) {
	.sol-hero__jump-link,
	.sol-hero__quote-card {
		animation: none;
		opacity: 1 !important;
		transform: none !important;
	}
	.sol-hero__jump-link {
		transition: color 0.2s ease;
	}
}

@media (hover: none) {
	.sol-framework__card-link {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Quote card — stretches to full hero height so dark zone shows behind its lower portion */
@keyframes sol-card-in {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}

.sol-hero__right {
	padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 5vw, 60px) clamp(20px, 3vw, 40px);
	align-self: stretch;
}

/* Right column fallback: bespoke HTML graphic shown when there's no quote/KPI content. */
.sol-hero__right--graphic {
	display: flex;
	align-items: center;
}

.sol-hero__graphic {
	width: 100%;
	animation: sol-card-in 0.75s ease both;
	animation-delay: 0.2s;
}

.sol-hero__quote-card {
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--sol-light-gray);
	border-radius: var(--sol-border-radius);
	padding: clamp(28px, 4vw, 40px);
	box-shadow: 0 8px 40px rgba(0, 68, 106, 0.12);
	position: relative;
	z-index: 4; /* sits above the orange stripe */
	animation: sol-card-in 0.75s ease both;
	animation-delay: 0.2s;
}

.sol-hero__quote-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--sol-orange);
	border-radius: var(--sol-border-radius) var(--sol-border-radius) 0 0;
}

/* ── Optional KPI band ───────────────────────────────────────────────────────
   Full-bleed orange band butting against the card's top/left/right edges. The
   card's own padding moves onto .sol-hero__quote-body so this can reach the
   edges; overflow clips the band to the card's rounded corners. */
.sol-hero__quote-card--has-kpi {
	padding: 0;
	overflow: hidden;
}

/* The card's own orange top accent now stays visible in every KPI position
   since the band itself no longer carries an opaque background. */

.sol-hero__quote-card--has-kpi .sol-hero__quote-body {
	padding: clamp(28px, 4vw, 40px);
}

.sol-hero__kpi {
	padding: clamp(20px, 2.6vw, 28px) clamp(28px, 4vw, 40px);
}

/* Default (KPI on bottom): the tick sits between the quote body above it and
   the KPI figures below it. Zeroing the touching-edge padding on both sides
   means the tick's own equal top/bottom margin is the only spacing, so it
   lands exactly halfway between the two. */
.sol-hero__quote-card--has-kpi:not(.sol-hero__quote-card--kpi-top) .sol-hero__quote-body {
	padding-bottom: 0;
}

.sol-hero__quote-card--has-kpi:not(.sol-hero__quote-card--kpi-top) .sol-hero__kpi {
	padding-top: 0;
}

.sol-hero__kpi::before {
	content: '';
	display: block;
	width: 40px;
	height: 4px;
	margin: 32px 0;
	background: var(--sol-orange);
	border-radius: 2px;
}

/* KPI band on top → quote body follows below it, so flip the tick to the
   bottom edge of the KPI block and mirror the same zero-padding treatment. */
.sol-hero__quote-card--kpi-top .sol-hero__kpi::before {
	display: none;
}

.sol-hero__quote-card--kpi-top .sol-hero__kpi {
	padding-bottom: 0;
}

.sol-hero__quote-card--kpi-top .sol-hero__quote-body {
	padding-top: 0;
}

.sol-hero__quote-card--kpi-top .sol-hero__kpi::after {
	content: '';
	display: block;
	width: 40px;
	height: 4px;
	margin: 32px 0;
	background: var(--sol-orange);
	border-radius: 2px;
}

.sol-hero__kpi-figure {
	display: flex;
	align-items: baseline;
	gap: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	line-height: 1;
	margin: 0;
	color: var(--sol-blue);
	font-variant-numeric: lining-nums tabular-nums;
}

.sol-hero__kpi-value {
	font-size: clamp(38px, 5vw, 58px);
	letter-spacing: -0.02em;
}

/* Matches the Prefix/Suffix size for KPIs where the value shouldn't dominate. */
.sol-hero__kpi-value--regular {
	font-size: clamp(22px, 2.8vw, 32px);
	letter-spacing: normal;
}

.sol-hero__kpi-affix {
	font-size: clamp(22px, 2.8vw, 32px);
	font-weight: 800;
}

.sol-hero__kpi-label {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(14px, 1.3vw, 16px);
	font-weight: 700;
	line-height: 1.3;
	margin: 10px 0 0;
	color: var(--sol-blue-light);
}

.sol-hero__kpi-desc {
	font-size: 13.5px;
	line-height: 1.55;
	margin: 6px 0 0;
	color: var(--sol-blue);
}

.sol-hero__quote-eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--sol-orange);
	margin: 0 0 20px;
}

.sol-hero__quote-text {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(15px, 1.8vw, 18px);
	font-style: italic;
	line-height: 1.65;
	color: var(--sol-blue);
	margin: 0 0 24px;
	border: none;
	padding: 0;
}

.sol-hero__quote-person {
	display: flex;
	align-items: center;
	gap: 14px;
}

.sol-hero__quote-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--sol-light-gray);
}

.sol-hero__quote-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sol-hero__quote-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--sol-blue);
	font-family: 'Raleway', sans-serif;
}

.sol-hero__quote-role {
	font-size: 13px;
	color: #6b7785;
}

/* ── Hero: Video Background ───────────────────────────────────────────────────
   Autoplaying video (or poster fallback) inside a rounded card styled after
   the homepage's Banner: Slider (.banner-slider__slide in
   lib/builder/banner-slider.php) — same min-height, border-radius and scrim.
   Unlike the homepage banner, this card does NOT re-center itself against the
   viewport with the --width-narrow-* tokens: it fills its .sol-page
   .grid-container directly, so its edges land on the same column as the H1,
   the header's fixed Login button (right edge calibrated to that same grid —
   see .header-login-btn in critical.css) and every section below it. Sits
   above the standard Solutions Hero's dark jump-links band + angled orange
   divider, which is left unchanged below it. */
.sol-hero--video {
	padding-top: clamp(56px, 7vw, 96px);
}

.sol-hero__video-card {
	position: relative;
	z-index: 1; /* sits above the orange bar (::after, z-index: -1 on the band) it overlaps */
	min-height: clamp(480px, 42vw, 620px);
	margin: 0 0 -32px;
	display: flex;
	align-items: center;
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--sol-navy);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	/* Spread reaches past the card's own edges — including the .grid-container
	   padding gap on either side — onto the angled orange bar peeking out
	   beside/below it, instead of just the sliver directly under the card that a
	   tight blur-only shadow would cover. Kept soft (low opacity) so it reads as
	   a lift rather than a heavy outline. */
	box-shadow: 0 20px 32px 32px rgba(4, 28, 44, 0.22);
}

.sol-hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	z-index: 0;
}

.sol-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(4, 28, 44, 0.93) 0%,
		rgba(4, 28, 44, 0.80) 38%,
		rgba(4, 28, 44, 0.38) 68%,
		rgba(4, 28, 44, 0.18) 100%
	);
	z-index: 1;
	pointer-events: none;
}

.sol-hero__video-inner {
	position: relative;
	z-index: 2;
	max-width: 46rem;
	padding: clamp(32px, 5vw, 72px);
}

/* Copy sits on the video/scrim instead of a white panel, so it's light-on-dark
   — same field content and CTA markup as the standard hero, different palette. */
.sol-hero__video-inner .sol-hero__eyebrow {
	color: var(--sol-orange);
}

.sol-hero__title--video {
	color: var(--sol-white);
}

.sol-hero__content--video {
	color: var(--sol-text-light);
	max-width: none;
}

.sol-hero__cta-btn--video.sol-hero__cta-btn--secondary {
	border-color: var(--sol-white);
	color: var(--sol-white);
}

.sol-hero__cta-btn--video.sol-hero__cta-btn--secondary:hover {
	background: var(--sol-white);
	color: var(--sol-blue);
}

/* Dark jump-links band + angled orange divider below the video card —
   identical markup/CSS to the standard Solutions Hero's .sol-hero__links-band,
   just placed after the card instead of after .sol-hero__copy. The card's
   negative bottom margin (above) pulls it down over the band's angled
   orange bar, so this needs no top spacing of its own. */
.sol-hero__links-band--video {
	position: relative;
	z-index: 0; /* sits below .sol-hero__video-card so the card overlaps its orange bar */
}

@media screen and (max-width: 768px) {
	.sol-hero__video-card {
		min-height: 380px;
	}

	.sol-hero__scrim {
		background: linear-gradient(
			90deg,
			rgba(4, 28, 44, 0.92) 0%,
			rgba(4, 28, 44, 0.86) 100%
		);
	}
}

@media screen and (prefers-reduced-motion: reduce) {
	.sol-hero__video {
		display: none;
	}
}

/* ── Overview ───────────────────────────────────────────────────────────────── */
.sol-overview {
	background: var(--sol-navy);
	padding: var(--sol-section-pad) 0;
    padding-top: 0; /* remove top padding to avoid double spacing with hero */
}

/* Card wrapper around the grid */
.sol-overview__card {
	background: #0e2235;
	border-radius: 14px;
	padding: clamp(32px, 4vw, 52px);
	border: 1px solid rgba(255, 255, 255, 0.07);
	box-shadow: 0 8px 48px rgba(0, 0, 0, 0.3);
	overflow: visible;
}

.sol-overview__diagram-col {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.sol-overview__diagram-img {
	width: 100%;
	max-width: 380px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.sol-overview__content-col {
	padding-left: clamp(16px, 3vw, 48px);
}

.sol-overview__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sol-orange);
	margin: 0 0 16px;
}

.sol-overview__title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(22px, 2.8vw, 36px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--sol-white);
	margin: 0 0 24px;
}

.sol-overview__content {
	color: var(--sol-text-light);
}

.sol-overview__content p {
	margin-bottom: 16px;
}
.sol-overview__content h3{
	color: var(--sol-blue-light);
}

/* ── Donut chart ─────────────────────────────────────────────────────────────── */
.sol-dnt-wrap {
	/* Bleed past card padding on left, top, and bottom */
	width: calc(100% + clamp(32px, 4vw, 52px));
	max-width: none;
	margin: calc(-1 * clamp(32px, 4vw, 52px)) 0
	        calc(-1 * clamp(32px, 4vw, 52px)) calc(-1 * clamp(32px, 4vw, 52px));
	position: relative;
}

.sol-dnt {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* Segment paths */
.sol-dnt__path {
	cursor: pointer;
	stroke: #0e2235;
	stroke-width: 2;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.sol-dnt__path--gray {
	fill: #8fa8be;
}

.sol-dnt__path--orange {
	fill: var(--sol-orange);
}

.sol-dnt__seg:hover .sol-dnt__path,
.sol-dnt__seg:focus .sol-dnt__path,
.sol-dnt__seg.is-active .sol-dnt__path {
	filter: brightness(1.2);
}

/* Dim siblings when one is hovered */
.sol-dnt:has(.sol-dnt__seg:hover) .sol-dnt__seg:not(:hover) .sol-dnt__path,
.sol-dnt:has(.sol-dnt__seg.is-active) .sol-dnt__seg:not(.is-active) .sol-dnt__path {
	opacity: 0.55;
}

.sol-dnt__seg {
	outline: none;
}

/* Center circle */
.sol-dnt__center-bg {
	fill: #071927;
	pointer-events: none;
}

/* Center text */
.sol-dnt__center-line1,
.sol-dnt__center-line2 {
	fill: rgba(255, 255, 255, 0.75);
	font-family: 'Raleway', sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-anchor: middle;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.sol-dnt__center-line1--title,
.sol-dnt__center-line2--title {
	font-size: 12px;
}

/* Segment external labels — non-interactive overlay */
.sol-dnt__seg-label {
	fill: rgba(255, 255, 255, 0.6);
	font-family: 'Raleway', sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	transition: fill 0.2s ease;
	pointer-events: none;
}

.sol-dnt__seg-label--price   { fill: #8fa8be; }
.sol-dnt__seg-label--discount { fill: var(--sol-orange); }
.sol-dnt__seg-label--mix      { fill: var(--sol-orange); }
.sol-dnt__seg-label--cts      { fill: var(--sol-orange); }

.sol-dnt__tooltip {
	position: absolute;
	top: 0;
	left: 0;
	width: max-content;
	max-width: 220px;
	background: #071927;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	padding: 10px 14px;
	border-radius: 6px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: translate(-50%, -100%);
	transition: opacity 0.15s ease;
	pointer-events: none;
	z-index: 20;
}
.sol-dnt__tooltip.is-visible {
	opacity: 1;
}

/* ── Framework Cards ─────────────────────────────────────────────────────────── */
.sol-framework {
	background: linear-gradient(to bottom, #e8f2fa 0%, #e8f2fa 70%, #c8dcea 100%);
	padding: var(--sol-section-pad) 0; /* top kept — overview's own bottom padding alone read as too tight here */
}

/* The Impact Process section (.sol-process) normally continues this gradient
   the rest of the way down to the page's neutral background. When a page
   has no Impact Process section, finish that fade here instead so whatever
   follows (often the transparent Case Study section) doesn't cut in abruptly
   against the medium blue. */
.sol-framework--no-process {
	background: linear-gradient(to bottom, #e8f2fa 0%, #e8f2fa 55%, #c8dcea 75%, var(--gray-light) 100%);
}

.sol-framework__header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto clamp(32px, 5vw, 56px);
}

.sol-framework__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sol-orange);
	margin: 0 0 16px;
}

.sol-framework__title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(26px, 3.5vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--sol-dark);
	margin: 0 0 16px;
}

.sol-framework__intro {
	color: rgba(13,30,44,0.7);
	margin: 0;
}

/* Cards: 2-column staggered grid */
.sol-framework__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
	padding: 0 clamp(40px, 10%, 160px);
}

.sol-framework__cards-col {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 2vw, 20px);
}

/* Stagger layout: right column is offset down to create the stagger */
.sol-framework__cards--stagger .sol-framework__cards-col--right {
	padding-top: 80px;
}

.sol-framework__card {
	background: #ffffff;
	border-radius: var(--sol-border-radius);
	padding: clamp(24px, 3vw, 36px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.sol-framework__card--linked {
	cursor: pointer;
}

.sol-framework__card:hover {
	background: #f0f7fd;
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(13, 30, 44, 0.12);
}

.sol-framework__card--gradient_navy {
	background: linear-gradient(160deg, #0e2235 0%, var(--sol-navy) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.sol-framework__card--gradient_navy:hover {
	background: linear-gradient(160deg, #14324d 0%, #0a1b2a 100%);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24);
}

.sol-framework__card-icon {
	margin-bottom: 4px;
}

.sol-framework__card-title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(18px, 2vw, 26px);
	font-weight: 700;
	color: var(--sol-dark);
	margin: 0;
	line-height: 1.3;
}

.sol-framework__card-desc {
	color: rgba(13,30,44,0.75);
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
}

.sol-framework__card-support {
	color: rgba(13,30,44,0.5);
	font-size: 13.5px;
	line-height: 1.6;
	margin: 0;
}

.sol-framework__card--gradient_navy .sol-framework__card-title,
.sol-framework__card--gradient_navy .sol-framework__card-desc,
.sol-framework__card--gradient_navy .sol-framework__card-support {
	color: rgba(255, 255, 255, 0.9);
}

.sol-framework__card-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sol-orange);
	text-decoration: none;
	border-bottom: none !important;
	letter-spacing: 0.02em;
	margin-top: auto;
	padding-top: 4px;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.25s ease, transform 0.25s ease, gap 0.2s ease, color 0.2s ease;
}

.sol-framework__card--gradient_navy .sol-framework__card-link {
	color: #ffffff;
}

.sol-framework__card:hover .sol-framework__card-link {
	opacity: 1;
	transform: translateY(0);
}

.sol-framework__card-link:hover {
	color: var(--sol-orange-light);
	gap: 8px;
}

/* Align layout, odd card count: last card spans both columns, icon on the
   left, headline/content/link on the right — mirrors the 2-col grid above.
   Placed after the base .sol-framework__card rule so display:grid wins. */
.sol-framework__card--wide {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: clamp(24px, 4vw, 48px);
	padding: clamp(16px, 2vw, 24px) clamp(24px, 3vw, 36px);
}

.sol-framework__card-icon--wide {
	margin-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.sol-framework__card-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 520px;
}

/* ── Impact Process ──────────────────────────────────────────────────────────── */
.sol-process {
	background: linear-gradient(to top, var(--gray-light) 0%, #e8f2fa 70%, #c8dcea 100%);
	padding: var(--sol-section-pad) 0;
	padding-top: 0; /* previous section's own bottom padding already provides the gap */
}

/* Opt-in (Reverse Background Gradient field, off by default): flips which
   edge is light vs. dark. The default fades light-to-dark bottom-to-top,
   expecting a dark section (e.g. Framework Cards) directly above — see the
   hand-off note in solutions-framework-cards.php. Reversed, the light end
   faces up instead, so this section can sit next to a plain-background
   layout (e.g. the homepage's card grid) without a mismatched seam. */
.sol-process--bg-reversed {
	background: linear-gradient(to bottom, var(--gray-light) 0%, #e8f2fa 70%, #c8dcea 100%);
}

.sol-process__card {
	background: var(--sol-navy);
	border-radius: 10px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	padding: clamp(32px, 5vw, 64px);
	overflow: visible;
}

.sol-process__left {
	padding-right: clamp(20px, 4vw, 60px);
}

.sol-process__eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sol-orange);
	margin: 0 0 16px;
}

.sol-process__title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--sol-white);
	margin: 0 0 24px;
}

.sol-process__content {
	color: var(--sol-text-light);
	margin-bottom: 0;
}

.sol-process__content p {
	margin-bottom: 14px;
}

.sol-process__caption {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
}

.sol-process__caption-line {
	flex: 0 0 auto;
	width: 3px;
	height: 40px;
	background: var(--sol-orange);
	border-radius: 2px;
}

.sol-process__caption p {
	font-size: 15px;
	font-weight: 600;
	color: var(--sol-white);
	line-height: 1.4;
	margin: 0;
}

.sol-process__right {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	overflow: visible;
	/* stretch so the right cell matches the left column height, not the flower */
	align-self: stretch;
}

.sol-process__diagram-img {
	width: 100%;
	max-width: 420px;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Stacked v2 layout: headline + 4-up cards + 50/50 split with stacked levers. */
.sol-process--stacked-v2 .sol-process__card {
	padding: 0;
}

.sol-process-v2 {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sol-process-v2__top {
	padding: clamp(32px, 5vw, 64px);
	padding-bottom: clamp(38px, 5vw, 56px);
	--sol-proc-cards-gap: clamp(20px, 2vw, 50px);
}

.sol-process-v2__bottom {
	background: linear-gradient(to bottom, #00bbff14 0%, #00000000 100%);
    padding: clamp(36px, 4.5vw, 56px) clamp(32px, 5vw, 64px) clamp(32px, 5vw, 64px);
    border-radius: 0 0 7px 7px;
}

.sol-process-v2__divider {
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
}

.sol-process-v2__eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sol-orange);
	margin: 0 0 14px;
}

.sol-process-v2__title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(34px, 4.8vw, 62px);
	line-height: 1.07;
	font-weight: 800;
	color: #fff;
	margin: 0;
}

.sol-process-v2__intro {
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	margin: 16px 0 0;
}

.sol-process-v2__intro p:last-child {
	margin-bottom: 0;
}

/* Eyebrow/title/caption block spans only the first 3 of the 4 card columns
   below it, matching the cards grid's own 0.9fr/0.9fr/0.9fr/1.3fr column math. */
.sol-process-v2__header {
	max-width: calc((2.7 * 100% - 0.1 * var(--sol-proc-cards-gap)) / 4);
}

.sol-process-v2__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sol-proc-cards-gap);
	align-items: stretch;
	position: relative;
	padding-top: 34px;
}

.sol-process-v2__cards::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 28px;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
}

.sol-process-v2-card {
	background: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0 18px 0 0;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	gap: 9px;
	min-height: 0;
}

.sol-process-v2-card__icon-wrap {
	display: none;
}

.sol-process-v2-card__icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: block;
}

.sol-process-v2-card__name {
	margin: 0;
	font-size: 11px;
	line-height: 1.3;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sol-blue-light);
	position: relative;
	padding-top: 20px;
}

.sol-process-v2-card__name::before {
	content: '';
	position: absolute;
	left: 0.12em;
	top: -10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #8fbdd4;
	box-shadow: 0 0 0 3px rgba(143, 189, 212, 0.2);
}

.sol-process-v2-card__headline {
	margin: 0;
	font-size: clamp(18px, 2vw, 20px);
	line-height: 1.2;
	font-weight: 800;
	color: #fff;
	padding-right: 12%;
}

.sol-process-v2-card__content {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #d5e3ed;
}

/* Featured (4th/"Optimize") card: same size as cards 1-3 (equal-width grid +
   align-items: stretch), with only a name/headline/content front face by
   default — clicking (or Enter/Space) flips it 180° to reveal its HTML
   graphic on the back. Glows by default; hover/focus lifts the card and
   brightens the glow. */
.sol-process-v2-card--featured {
	grid-column: 4;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	perspective: 1400px;
	cursor: pointer;
	transition: transform 280ms ease;
	/* Override the plain cards' inherited padding-right — the glow/face
	   handle their own spacing, and this padding was shrinking the flip's
	   width, insetting the card from the glow's right edge. */
	padding: 0;
}

.sol-process-v2-card--featured:hover,
.sol-process-v2-card--featured:focus-visible {
	transform: translateY(-6px);
	outline: none;
}

/* The card's border/tint/blur live on this glow element — a sibling BEFORE
   .sol-process-v2-card__flip, outside its preserve-3d/rotateY transform —
   rather than on the flip or its faces. backdrop-filter inside a preserve-3d
   subtree blurs the whole 3D scene (including the text on top of it), so
   keeping it out of that subtree is what keeps the name/headline crisp.
   Painted before (so behind) the flip in the same stacking context, and
   after (so above/in front of) the shared line, so the line shows through
   it, blurred, while the flip's text/graphic sit sharp on top of both.
   top: -26px clears the line by a visible margin — the card reads as
   sitting above the line rather than the line cutting through its top. */
.sol-process-v2-card__glow {
	position: absolute;
	top: -26px;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(239, 139, 29, 0.4);
	border-radius: 12px;
	box-shadow: 0 0 0 1px rgba(239, 139, 29, 0.14), 0 0 22px rgba(239, 139, 29, 0.24);
	transition: box-shadow 280ms ease;
	pointer-events: none;
}

.sol-process-v2-card--featured:hover .sol-process-v2-card__glow,
.sol-process-v2-card--featured:focus-visible .sol-process-v2-card__glow {
	box-shadow: 0 0 0 1px rgba(239, 139, 29, 0.3), 0 0 36px rgba(239, 139, 29, 0.42);
}

.sol-process-v2-card__flip {
	position: relative;
	flex: 1 1 auto;
	transform-style: preserve-3d;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sol-process-v2-card--featured.is-flipped .sol-process-v2-card__flip {
	transform: rotateY(180deg);
}

/* Front is normal flow (not abspos) so its real content height sets
   .sol-process-v2-card__flip's natural size — this is what the grid's
   align-items: stretch measures to equalize all four cards to the tallest,
   so long copy is never clipped. height: 100% then fills any extra
   stretched height once the row's final size is known. Back is abspos,
   inset 0 to exactly overlay the front at whatever size that resolves to.
   padding-top: 0 (same as cards 1-3) so the name/dot land at the exact
   same position as the other cards' dots on the shared line. */
.sol-process-v2-card__face {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 0 18px 18px;
	border-radius: 12px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.sol-process-v2-card__face--front {
	position: relative;
	height: 100%;
}

.sol-process-v2-card--featured .sol-process-v2-card__name::before {
	background: var(--sol-orange);
	box-shadow: 0 0 0 3px rgba(239, 139, 29, 0.2);
}

.sol-process-v2-card__face--back {
	position: absolute;
	/* Matches the glow's bounds (26px above the flip's own top), not the
	   flip's own (shorter) box, so the flipped card doesn't look inset from
	   the glow's top edge the way "inset: 0" left it. */
	top: -26px;
	right: 0;
	bottom: 0;
	left: 0;
	transform: rotateY(180deg);
	background: linear-gradient(160deg, #e4f0fa 0%, #f2f8fd 100%);
	border: 1px solid rgba(79, 179, 240, 0.35);
	align-items: center;
	justify-content: center;
	/* No padding (overriding the shared face padding) so the graphic has the
	   full box to grow into instead of being boxed in on all sides. */
	padding: 0;
}

.sol-process-v2-card__visualize {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sol-orange);
}

.sol-process-v2-card__visualize svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}

.sol-process-v2-card__graphic {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Larger now that the back face has no padding eating into its space —
   still comfortably centered within the box set by the front's content.
   Bumped up from the graphic's own viewBox growing (see the .php file) to
   make room for its labels — this keeps the loop itself about the same
   apparent size as before instead of shrinking within the wider canvas. */
.sol-process-v2-card__face--back .sol-imp-loop {
	max-width: 300px;
}

.sol-imp-loop {
	width: 100%;
	max-width: 260px;
}

.sol-imp-loop__svg {
	display: block;
	width: 100%;
	height: auto;
}

.sol-imp-loop__arc {
	fill: none;
	stroke: var(--sol-blue);
	stroke-width: 3;
	stroke-linecap: round;
}

.sol-imp-loop__arrowhead {
	fill: var(--sol-blue);
}

.sol-imp-loop__center-bg {
	fill: var(--sol-white);
	stroke: rgba(79, 179, 240, 0.35);
	stroke-width: 2;
}

.sol-imp-loop__center-line {
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
	font-weight: 800;
	font-style: italic;
	fill: var(--sol-navy);
}

.sol-imp-loop__node {
	fill: var(--sol-orange);
	stroke: var(--sol-white);
	stroke-width: 2;
}

/* Pulsing "beacon" ring behind each node — see the intro-animation section
   below for the actual keyframes/staggering. */
.sol-imp-loop__node-pulse {
	fill: var(--sol-orange);
	opacity: 0;
}

.sol-imp-loop__label {
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	fill: var(--sol-navy);
}

/* Continuous-loop diagram (Overview section): same arc/node/label language as
   .sol-imp-loop, recolored for the dark navy section background instead of
   the light featured-card panel. */
.sol-lrn-loop {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
}

.sol-lrn-loop__svg {
	display: block;
	width: 100%;
	height: auto;
}

.sol-lrn-loop__arc {
	fill: none;
	stroke: var(--sol-blue-light);
	stroke-width: 3;
	stroke-linecap: round;
}

.sol-lrn-loop__arrowhead {
	fill: var(--sol-blue-light);
}

.sol-lrn-loop__center-bg {
	fill: rgba(255, 255, 255, 0.06);
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1;
}

.sol-lrn-loop__center-line {
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	font-weight: 800;
	fill: #ffffff;
}

.sol-lrn-loop__node {
	fill: var(--sol-orange);
	stroke: var(--sol-navy);
	stroke-width: 2;
}

.sol-lrn-loop__label {
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	fill: rgba(255, 255, 255, 0.75);
}

/* ── Impact loop intro animation ──────────────────────────────────────────
   Arcs sweep in clockwise (Measure → Refine → Sustain), each node/label
   landing right as its incoming arc arrives. Inert until .is-animated is
   added by initImpactLoop() in solutions.js when the graphic scrolls into
   view; reuses the flower diagram's ipf-arrow-in/ipf-dot-in keyframes. */
.sol-imp-loop__arc,
.sol-imp-loop__node,
.sol-imp-loop__label {
	opacity: 0;
}

.sol-imp-loop.is-animated .sol-imp-loop__arc {
	animation: ipf-arrow-in 0.65s cubic-bezier(0.33, 0.9, 0.4, 1) forwards;
	transform-box: fill-box;
	transform-origin: center;
}

.sol-imp-loop.is-animated .sol-imp-loop__node,
.sol-imp-loop.is-animated .sol-imp-loop__label {
	animation: ipf-dot-in 0.4s ease-out forwards;
	transform-box: fill-box;
	transform-origin: center;
}

/* Measure starts the loop, so its node/label are already showing when the
   first arc (out of Measure) begins sweeping in. */
.sol-imp-loop.is-animated .sol-imp-loop__node--measure,
.sol-imp-loop.is-animated .sol-imp-loop__label--measure {
	animation-delay: 0s;
}

.sol-imp-loop.is-animated .sol-imp-loop__arc--measure {
	animation-delay: 0.2s;
}

.sol-imp-loop.is-animated .sol-imp-loop__node--refine,
.sol-imp-loop.is-animated .sol-imp-loop__label--refine {
	animation-delay: 0.85s;
}

.sol-imp-loop.is-animated .sol-imp-loop__arc--refine {
	animation-delay: 1s;
}

.sol-imp-loop.is-animated .sol-imp-loop__node--sustain,
.sol-imp-loop.is-animated .sol-imp-loop__label--sustain {
	animation-delay: 1.65s;
}

.sol-imp-loop.is-animated .sol-imp-loop__arc--sustain {
	animation-delay: 1.8s;
}

/* Beacon pulse: a ring expands from the node and fades, looping forever
   once .is-animated lands (unlike the one-shot intro above). Delays start
   each ring right as its node's own intro finishes arriving. */
.sol-imp-loop.is-animated .sol-imp-loop__node-pulse {
	animation: sol-imp-loop-beacon 2.2s cubic-bezier(0.33, 0.9, 0.4, 1) infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.sol-imp-loop.is-animated .sol-imp-loop__node-pulse--measure {
	animation-delay: 0.4s;
}

.sol-imp-loop.is-animated .sol-imp-loop__node-pulse--refine {
	animation-delay: 1.25s;
}

.sol-imp-loop.is-animated .sol-imp-loop__node-pulse--sustain {
	animation-delay: 2.05s;
}

@keyframes sol-imp-loop-beacon {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}
	100% {
		transform: scale(2.6);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sol-imp-loop__arc,
	.sol-imp-loop__node,
	.sol-imp-loop__label {
		opacity: 1;
		animation: none !important;
		transform: none !important;
	}

	.sol-imp-loop__node-pulse {
		opacity: 0 !important;
		animation: none !important;
	}
}

.sol-process-v2__caption {
	margin: 16px 0 24px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255, 255, 255, .8);
}

.sol-process-v2__split {
	margin-top: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 52px);
	align-items: start;
}

.sol-process-v2__split-left {
	padding-right:10%;
}

.sol-process-v2__split-right {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: 0;
}

.sol-process-v2__split-title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(25px, 2.3vw, 34px);
	line-height: 1.16;
	font-weight: 800;
	color: #21a5d5;
	margin: 0 0 14px;
}

.sol-process-v2__split-title em,
.sol-process-v2__split-title strong {
	color: var(--sol-orange);
	font-style: normal;
}

.sol-process-v2__split-copy {
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1.22;
	font-weight: 400;
	color: #d3e4ef;
	margin: 0;
}

.sol-process-v2-stack {
	position: relative;
	max-width: 490px;
	margin-left: auto;
	overflow: visible;
}

.sol-process-v2-stack-wrap {
	width: min(100%, 500px);
	margin-left: auto;
}

.sol-process-v2-stack__card {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	border-radius: 11px;
	padding: clamp(24px, 2.6vw, 34px);
	box-shadow: 0 10px 28px rgba(5, 14, 23, 0.38);
	transform: translateX(calc(var(--offset) * 18px)) translateY(calc(var(--abs-offset) * 10px));
	opacity: calc(1 - (var(--abs-offset) * 0.16));
	z-index: calc(30 - var(--abs-offset));
	max-width: calc(100% - 58px);
	cursor: pointer;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, box-shadow 220ms ease;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.sol-process-v2-stack__card.is-active {
	box-shadow: 0 14px 34px rgba(5, 14, 23, 0.28);
}

.sol-process-v2-stack__card:focus-visible {
	outline: 2px solid #0f2433;
	outline-offset: 2px;
}

.sol-process-v2-stack__icon {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
}

.sol-process-v2-stack__text {
	flex: 1 1 auto;
	min-width: 0;
}

.sol-process-v2-stack__title {
	margin: 0 0 10px;
	font-size: 23px;
	line-height: 1.1;
	font-weight: 800;
	color: #102535;
}

.sol-process-v2-stack__content {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: #2f4658;
}

/* Progressive enhancement: use fan/spread behavior on the lower stack. */
.sol-process-v2-stack-wrap.is-fan-ready {
	outline: none;
}

.sol-process-v2-stack-wrap.is-fan-ready .sol-process-v2-stack {
	min-height: clamp(248px, 22vw, 250px);
}

.sol-process-v2-stack-wrap.is-fan-ready .sol-process-v2-stack__card {
	max-width: calc(100% - 36px);
	transform-origin: bottom center;
	transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.2, 1), box-shadow 0.45s cubic-bezier(0.22, 0.8, 0.2, 1), opacity 220ms ease;
	will-change: transform;
}

.sol-process-v2-stack-wrap.is-fan-ready .sol-process-v2-stack__card.lifted {
	box-shadow: 0 30px 48px -16px rgba(0, 0, 0, 0.35);
}

.sol-process-v2-stack-wrap.is-fan-ready .sol-process-v2-stack__card:focus-visible {
	outline: 2px solid #0f2433;
	outline-offset: 4px;
}

.sol-process-v2-stack__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	padding-bottom: 2px;
}

.sol-process-v2-stack__dot {
	appearance: none;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.24);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
	cursor: pointer;
	transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.sol-process-v2-stack__dot:hover {
	background: rgba(255, 255, 255, 0.42);
}

.sol-process-v2-stack__dot.is-active {
	background: #21a5d5;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset, 0 0 10px rgba(33, 165, 213, 0.45);
	transform: scale(1.08);
}

.sol-process-v2-stack__dot:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.88);
	outline-offset: 2px;
}

@media (max-width: 1180px) {
	.sol-process-v2__top {
		/* Bigger than the desktop-tuned value (that one only had to clear a
		   single thin shared line) so wrapped rows/columns get real
		   breathing room between cards. */
		--sol-proc-cards-gap: clamp(28px, 4vw, 44px);
	}

	.sol-process-v2__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* Matches the row/column gap below so the top edge isn't a bigger
		   (or smaller) gap than the ones between cards. */
		padding-top: var(--sol-proc-cards-gap);
	}

	/* The shared line only makes sense as a single row of 4 on desktop —
	   once cards wrap to 2 or 1 per row it reads as a stray line cutting
	   through the middle of the grid, so it's hidden below desktop. */
	.sol-process-v2__cards::before {
		display: none;
	}

	/* Below 4 columns the featured card just flows like the other 3 — no
	   grid-column pin needed (the flip-card faces carry their own styling
	   regardless of column count). */
	.sol-process-v2-card--featured {
		grid-column: auto;
	}

	.sol-process-v2__header {
		max-width: 100%;
	}
}

@media (max-width: 900px) {
	.sol-process-v2__top {
		padding-bottom: clamp(30px, 6vw, 44px);
	}

	.sol-process-v2__bottom {
		padding-top: clamp(30px, 6vw, 44px);
	}

	.sol-process-v2__split {
		grid-template-columns: 1fr;
	}

	.sol-process-v2-stack {
		max-width: 100%;
		min-height: 320px;
		margin-left: 0;
	}

	.sol-process-v2-stack-wrap {
		margin-left: 0;
	}

	.sol-process-v2__split-right {
		justify-content: flex-start;
		min-height: 0;
	}

	.sol-process-v2-stack-wrap.is-fan-ready .sol-process-v2-stack {
		min-height: 286px;
	}
}

@media (max-width: 640px) {
	.sol-process-v2__title {
		max-width: 100%;
	}

	.sol-process-v2__cards {
		grid-template-columns: 1fr;
		/* Space away from the header text above, not flush against it. */
		padding-top: clamp(24px, 8vw, 36px);
		gap: 34px;
	}

	.sol-process-v2-card {
		min-height: 0;
		padding-right: 0;
	}

	/* The glow's own -26px top offset (see .sol-process-v2-card__glow)
	   otherwise eats into the grid gap above this card, making it look ~26px
	   closer to card 3 than the other cards are to each other. */
	.sol-process-v2-card--featured {
		margin-top: 26px;
	}

	/* The front's own text is short enough that the card would otherwise
	   size much smaller than the ~300px-wide loop graphic on the back,
	   leaving it cramped/shrunk (and its labels unreadable) once flipped. */
	.sol-process-v2-card--featured .sol-process-v2-card__flip {
		min-height: 340px;
	}

	.sol-process-v2-card__name {
		padding-top: 0;
	}

	.sol-process-v2-card__name::before {
		display: none;
	}

	/* Swap the hover/click fan for a native swipeable carousel so cards
	   never grow taller than the viewport and cover the dot nav below. */
	.sol-process-v2__split-right {
		min-width: 0;
	}

	.sol-process-v2-stack-wrap {
		width: 100%;
		min-width: 0;
	}

	.sol-process-v2-stack,
	.sol-process-v2-stack-wrap.is-fan-ready .sol-process-v2-stack {
		display: flex;
		min-height: 0;
		min-width: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.sol-process-v2-stack::-webkit-scrollbar {
		display: none;
	}

	.sol-process-v2-stack__card,
	.sol-process-v2-stack-wrap.is-fan-ready .sol-process-v2-stack__card {
		position: static;
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		scroll-snap-align: start;
		transform: none !important;
		opacity: 1 !important;
		padding: 18px;
		gap: 12px;
	}

	.sol-process-v2-stack__icon {
		flex-basis: 40px;
		width: 40px !important;
		height: 40px !important;
	}

	.sol-process-v2-stack__title {
		font-size: 19px;
		margin: 0 0 6px;
	}

	.sol-process-v2-stack__content {
		font-size: 14.5px;
	}

	.sol-process-v2-stack__dots {
		margin-top: 14px;
	}
}

.sol-process__right--stacked {
	align-items: flex-start;
	justify-content: flex-start;
}

.sol-process-cards {
	width: min(100%, 470px);
	margin: 0 auto;
	padding-top: 8px;
	--sol-card-x-step: 17%;
	--sol-card-y-step: 12px;
	--sol-card-scale-step: 0.06;
	--sol-card-opacity-step: 0.16;
}

.sol-process-cards__stack {
	position: relative;
	min-height: 350px;
	overflow: visible;
}

.sol-process-cards__card {
	appearance: none;
	border: 0;
	position: absolute;
	inset: 0;
	padding: clamp(22px, 3vw, 30px);
	border-radius: 14px;
	background: linear-gradient(160deg, #173244 0%, #0f2433 100%);
	box-shadow: 0 10px 30px rgba(5, 12, 19, 0.32);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 10px;
	cursor: pointer;
	transform: translateX(calc(var(--offset) * var(--sol-card-x-step))) translateY(calc(var(--abs-offset) * var(--sol-card-y-step))) scale(calc(1 - (var(--abs-offset) * var(--sol-card-scale-step))));
	opacity: calc(1 - (var(--abs-offset) * var(--sol-card-opacity-step)));
	z-index: calc(20 - var(--abs-offset));
	transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 250ms ease, box-shadow 250ms ease;
	pointer-events: auto;
	will-change: transform, opacity;
}

.sol-process-cards__card.is-active {
	box-shadow: 0 16px 38px rgba(5, 12, 19, 0.45);
}

.sol-process-cards__card:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.sol-process-cards__card .sol-process-cards__icon-wrap,
.sol-process-cards__card .sol-process-cards__name,
.sol-process-cards__card .sol-process-cards__headline,
.sol-process-cards__card .sol-process-cards__content {
	opacity: 1;
	transition: opacity 220ms ease;
}

.sol-process-cards__card:not(.is-active) .sol-process-cards__icon-wrap,
.sol-process-cards__card:not(.is-active) .sol-process-cards__name,
.sol-process-cards__card:not(.is-active) .sol-process-cards__headline,
.sol-process-cards__card:not(.is-active) .sol-process-cards__content {
	opacity: 0;
}

.sol-process-cards__icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
	flex: 0 0 auto;
}

.sol-process-cards__icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: block;
}

.sol-process-cards__name {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.25;
	font-weight: 600;
	color: #d9ecf8;
}

.sol-process-cards__headline {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(19px, 1.9vw, 26px);
	line-height: 1.2;
	font-weight: 800;
	color: #fff;
}

.sol-process-cards__content {
	font-size: 15px;
	line-height: 1.55;
	color: #d9e8f2;
	max-width: 36ch;
}

.sol-process-cards__dots {
	margin-top: 14px;
	display: flex;
	justify-content: center;
	gap: 10px;
	position: relative;
	z-index: 25;
}

.sol-process-cards__dot {
	appearance: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.38);
	cursor: pointer;
	transition: transform 220ms ease, background-color 220ms ease;
}

.sol-process-cards__dot.is-active {
	background: var(--sol-orange);
	transform: scale(1.18);
}

.sol-process-cards__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 860px) {
	.sol-process-cards {
		--sol-card-x-step: 14%;
	}

	.sol-process-cards__stack {
		min-height: 320px;
	}
}

@media (max-width: 640px) {
	.sol-process-cards {
		width: 100%;
		--sol-card-x-step: 11%;
		--sol-card-y-step: 10px;
	}

	.sol-process-cards__stack {
		min-height: 300px;
	}

	.sol-process-cards__card {
		padding: 20px;
	}
}

/* Four-petal flower diagram: an inline SVG background (exported from the mockup)
 * with text labels overlaid at fixed percentage positions matching its four petals. */
.sol-process__flower {
	/* Absolute so it doesn't affect row height; right cell uses align-self:stretch to match the left column. */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 760px;
	max-width: 95vw;
	aspect-ratio: 1 / 1;
	z-index: 2;
}

.sol-process__flower-bg {
	position: absolute;
	inset: 3.7% 3.4% 3.2% 3.3%;
}

.sol-process__flower-bg svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ── Flower diagram animation ────────────────────────────────────────────────
   Sequence, started by adding .is-animated when the diagram scrolls into view
   (initProcessFlower in solutions.js):
     1. each arrow + its head draws in, staggered clockwise
     2. the dots fade in after the arrows land
     3. the dots pulse gently, marking them as the tooltip hotspots
   Everything is inert until .is-animated so nothing moves off-screen, and the
   whole sequence is skipped under prefers-reduced-motion. */
.sol-process__flower .ipf-arrow,
.sol-process__flower .ipf-head,
.sol-process__flower .ipf-dot-ring,
.sol-process__flower .ipf-dot-core {
	opacity: 0;
}

/* Arrows are filled shapes rather than stroked lines, so they can't be drawn
   with stroke-dasharray — they sweep in from their own start point instead. */
.sol-process__flower.is-animated .ipf-arrow {
	animation: ipf-arrow-in 0.65s cubic-bezier(0.33, 0.9, 0.4, 1) forwards;
	transform-box: fill-box;
	transform-origin: center;
}

.sol-process__flower.is-animated .ipf-head {
	animation: ipf-head-in 0.3s ease-out forwards;
	transform-box: fill-box;
	transform-origin: center;
}

.sol-process__flower.is-animated .ipf-dot-ring,
.sol-process__flower.is-animated .ipf-dot-core {
	animation: ipf-dot-in 0.45s ease-out forwards;
	transform-box: fill-box;
	transform-origin: center;
}

/* Clockwise stagger from the top: strategize → build → enable → optimize. */
.sol-process__flower.is-animated .ipf-arrow--strategize { animation-delay: 0.05s; }
.sol-process__flower.is-animated .ipf-arrow--build      { animation-delay: 0.25s; }
.sol-process__flower.is-animated .ipf-arrow--enable     { animation-delay: 0.45s; }
.sol-process__flower.is-animated .ipf-arrow--optimize   { animation-delay: 0.65s; }

.sol-process__flower.is-animated .ipf-head--strategize { animation-delay: 0.60s; }
.sol-process__flower.is-animated .ipf-head--build      { animation-delay: 0.80s; }
.sol-process__flower.is-animated .ipf-head--enable     { animation-delay: 1.00s; }
.sol-process__flower.is-animated .ipf-head--optimize   { animation-delay: 1.20s; }

/* Dots land after the arrows, then pulse continuously. */
.sol-process__flower.is-animated .ipf-dot-ring--strategize,
.sol-process__flower.is-animated .ipf-dot-core--strategize { animation-delay: 1.35s; }
.sol-process__flower.is-animated .ipf-dot-ring--build,
.sol-process__flower.is-animated .ipf-dot-core--build      { animation-delay: 1.50s; }
.sol-process__flower.is-animated .ipf-dot-ring--enable,
.sol-process__flower.is-animated .ipf-dot-core--enable     { animation-delay: 1.65s; }
.sol-process__flower.is-animated .ipf-dot-ring--optimize,
.sol-process__flower.is-animated .ipf-dot-core--optimize   { animation-delay: 1.80s; }

/* Pulse is applied to the ring only (added by JS once the fade-in finishes) so
   it reads as a halo rather than the whole dot inflating. */
.sol-process__flower .ipf-dot-ring.is-pulsing {
	animation: ipf-dot-pulse 2.4s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes ipf-arrow-in {
	from { opacity: 0; transform: scale(0.82); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes ipf-head-in {
	from { opacity: 0; transform: scale(0.4); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes ipf-dot-in {
	from { opacity: 0; transform: scale(0.3); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes ipf-dot-pulse {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%      { transform: scale(1.35); opacity: 0.75; }
}

/* While a hotspot is active its dot holds enlarged rather than pulsing
   (.is-hot is toggled by initProcessFlower). */
.sol-process__flower .ipf-dot-ring.is-hot,
.sol-process__flower .ipf-dot-core.is-hot {
	animation: none;
	opacity: 1;
	transform: scale(1.35);
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.sol-process__flower .ipf-arrow,
	.sol-process__flower .ipf-head,
	.sol-process__flower .ipf-dot-ring,
	.sol-process__flower .ipf-dot-core {
		opacity: 1;
		animation: none !important;
		transform: none !important;
	}
}

/* Petal text — also acts as the primary tooltip hotspot when content exists. */
.sol-process__flower-petal-text {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	font-family: 'Raleway', sans-serif;
	line-height: 1.3;
	border-radius: 50%;
}

/* Dot hotspot — sits over the SVG dot and triggers the tooltip. Sized a little
   larger than the dot so it is comfortably clickable on touch. */
.sol-process__flower-label {
	position: absolute;
	width: 9%;
	height: 9%;
	min-width: 30px;
	min-height: 30px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	cursor: pointer;
}

.sol-process__flower-label:focus-visible {
	outline: 2px solid var(--sol-white);
	outline-offset: 2px;
}

.sol-process__flower-petal-text strong {
	display: block;
	font-size: clamp(16px, 2.2vw, 26px);
	font-weight: 800;
}

/* Mouse-following tooltip showing each step's description.
   left/top/transform are set dynamically in JS so it can flip to whichever
   side of the cursor keeps it inside the viewport. */
.sol-process__flower-tooltip {
	position: absolute;
	top: 0;
	left: 0;
	width: max-content;
	max-width: 220px;
	background: #071927;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	padding: 10px 14px;
	border-radius: 6px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: translate(-50%, -100%);
	transition: opacity 0.15s ease;
	pointer-events: none;
	z-index: 100;
}

.sol-process__flower-tooltip.is-visible {
	opacity: 1;
}

/* ── Process Application ─────────────────────────────────────────────────────── */
/*
 * Dark panel nested inside .sol-process__card, below the flower diagram.
 * The --embedded modifier is the design default; the bare .sol-process-app-section
 * wrapper is the standalone fallback for pages that use this layout without
 * the Impact Process section above it.
 */
.sol-process-app {
	background: #12222f;
	border-radius: 8px;
	padding: clamp(24px, 3.5vw, 44px);
}

.sol-process-app--embedded {
	margin-top: clamp(28px, 4vw, 48px);
	position: relative;
	z-index: 1;
}

/* Standalone fallback: supply the dark backdrop the card would have provided. */
.sol-process-app-section {
	background: #1e2f3f;
	padding: var(--sol-section-pad) 0;
	padding-top: 0; /* previous section's own bottom padding already provides the gap */
}

/* Header: title left, intro right. */
.sol-process-app__header {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
	margin-bottom: clamp(28px, 3.5vw, 44px);
}

.sol-process-app__eyebrow {
	grid-column: 1 / -1;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sol-orange);
	margin: 0 0 12px;
}

.sol-process-app__title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(22px, 2.5vw, 32px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--sol-white);
	margin: 0;
}

/* Editors can wrap words in the title to pick up the accent color. */
.sol-process-app__title em,
.sol-process-app__title strong {
	color: var(--sol-orange);
	font-style: normal;
}

.sol-process-app__intro {
	color: var(--sol-text-light);
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.6;
	margin: 0;
	padding-top: 6px;
}

.sol-process-app__columns {
	display: grid;
	grid-template-columns: repeat(var(--sol-col-count, 5), minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 20px);
}

.sol-process-app__col {
	background: #071927;
	border-radius: 6px;
	padding: clamp(16px, 1.6vw, 22px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	transform: translateY(0);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.sol-process-app__col:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.sol-process-app__col-title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(14px, 1.2vw, 16px);
	font-weight: 700;
	color: var(--sol-white);
	margin: 0 0 10px;
	line-height: 1.3;
}

.sol-process-app__col-content {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.38);
	line-height: 1.6;
	margin: 0;
	transition: color 0.22s ease;
}

.sol-process-app__col:hover .sol-process-app__col-content {
	color: rgba(255, 255, 255, 0.72);
}

.sol-process-app__graphic {
	width: 100%;
}

@media (max-width: 639px) {
	.sol-process__flower {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		width: 100%;
		max-width: 420px;
	}

	.sol-process__right {
		align-self: auto;
	}
}

/* ── Case Study Slider ───────────────────────────────────────────────────────── */
/*
 * Horizontal scroll-snap slider — no library needed. Each slide is a rounded
 * card using the case study's featured image as its background, with a
 * left-weighted scrim so the copy stays legible. Dots below drive it via
 * scrollTo (see initCaseSlider in solutions.js); with JS off it degrades to a
 * normal swipeable scroller.
 */
.sol-cases {
	padding: var(--sol-section-pad) 0;
	padding-top: 0; /* previous section's own bottom padding already provides the gap */
}

.sol-cases__header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto clamp(28px, 4vw, 48px);
}

.sol-cases__header-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sol-orange);
	margin: 0 0 16px;
}

.sol-cases__header-title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(26px, 3.5vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--sol-dark, #0d1e2c);
	margin: 0 0 16px;
}

.sol-cases__header-content {
	color: rgba(13,30,44,0.7);
	margin: 0;
}

.sol-cases__viewport {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	border-radius: 10px;
	/* Hide the native scrollbar; the dots are the affordance. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.sol-cases__viewport::-webkit-scrollbar {
	display: none;
}

/* `display: contents` removes the track from layout so each slide is a direct
   flex child of the scroll viewport and sizes against it. Wrapping the slides
   in a sized track instead made the flex basis circular — the track shrank to
   the viewport and the slides spilled out visibly rather than scrolling. */
.sol-cases__track {
	display: contents;
}

.sol-cases__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	scroll-snap-align: start;
	min-height: clamp(320px, 34vw, 470px);
	display: flex;
	align-items: center;
	border-radius: 10px;
	overflow: hidden;
	background-color: #12222f;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.sol-cases__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(4, 28, 44, 0.93) 0%,
		rgba(4, 28, 44, 0.80) 38%,
		rgba(4, 28, 44, 0.38) 68%,
		rgba(4, 28, 44, 0.18) 100%
	);
	pointer-events: none;
}

.sol-cases__slide-inner {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	padding: clamp(32px, 5vw, 72px);
}

.sol-cases__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sol-blue-light, #4FB3F0);
	margin: 0 0 14px;
}

.sol-cases__title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(26px, 3.6vw, 48px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--sol-white);
	margin: 0 0 16px;
}

/* Case study titles may contain .text-underline spans. The theme collapses
   that underline to `background-size: 0%` and only animates it open under an
   .isVisible ancestor (style.css:468), which the slider never gets — so draw
   it at full width here. */
.sol-cases__title .text-underline {
	background-size: 100% 90%;
	animation: none;
}

.sol-cases__subtitle {
	font-size: clamp(16px, 1.5vw, 22px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
}

/* Plain orange button — same treatment as the featured post card.
   Scoped under .sol-cases to outrank style.css's .btn rules, which load
   after solutions.css. */
.sol-cases .sol-cases__btn {
	display: inline-block;
	margin-top: 28px;
	background: var(--orange-dark, #E56910);
	border-radius: 4px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	transition: background 0.25s ease;
}

.sol-cases .sol-cases__btn:hover {
	background: var(--orange-light, #EF8B1D);
}

.sol-cases .sol-cases__btn > span,
.sol-cases .sol-cases__btn:hover > span {
	left: auto;
	position: static;
	transform: none;
	display: inline-block;
	border-bottom: 0 !important;
}

.sol-cases .sol-cases__btn:after,
.sol-cases .sol-cases__btn:hover:after {
	display: none;
	content: none;
}

/* Dots */
.sol-cases__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
}

.sol-cases__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c7d0d8;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.sol-cases__dot:hover {
	background: var(--sol-orange, #EF8B1D);
}

.sol-cases__dot.is-active {
	background: var(--sol-orange, #EF8B1D);
	transform: scale(1.15);
}

@media (max-width: 767px) {
	.sol-cases__slide {
		min-height: 380px;
	}

	/* Even scrim on narrow screens — the copy spans the full width. */
	.sol-cases__slide::before {
		background: linear-gradient(
			90deg,
			rgba(4, 28, 44, 0.92) 0%,
			rgba(4, 28, 44, 0.86) 100%
		);
	}
}

/*
 * Testimonials Slider — slick carousel (same library/behavior as the
 * site-wide "Testimonials Slider" layout), styled for the Solutions design
 * system. Slick builds its own track/slide wrappers inside .sol-testimonials__track,
 * so each .sol-testimonials__card only needs its own visual treatment.
 */
.sol-testimonials {
	padding: var(--sol-section-pad) 0;
	padding-top: 0; /* previous section's own bottom padding already provides the gap */
	background: var(--sol-off-white);
}

.sol-testimonials__header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto clamp(28px, 4vw, 48px);
}

.sol-testimonials__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sol-orange);
	margin: 0 0 16px;
}

.sol-testimonials__title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(26px, 3.5vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--sol-dark, #0d1e2c);
	margin: 0 0 16px;
}

.sol-testimonials__content {
	color: rgba(13, 30, 44, 0.7);
	margin: 0;
}

.sol-testimonials__track {
	margin: 0 -12px;
}

.sol-testimonials__card {
	margin: 0 12px;
	background: var(--sol-white);
	border: 1px solid var(--sol-light-gray);
	border-radius: var(--sol-border-radius);
	padding: clamp(28px, 3vw, 36px);
	position: relative;
	min-height: 220px;
}

.sol-testimonials__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--sol-orange);
	border-radius: var(--sol-border-radius) var(--sol-border-radius) 0 0;
}

.sol-testimonials__quote {
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	font-style: italic;
	line-height: 1.65;
	color: var(--sol-blue);
	margin: 0 0 20px;
}

.sol-testimonials__author-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--sol-blue);
	font-family: 'Raleway', sans-serif;
}

.sol-testimonials__author-company {
	font-size: 13px;
	color: #6b7785;
}

/* Slick renders its own <ul class="slick-dots">; restyle to match .sol-cases__dots. */
.sol-testimonials .slick-dots {
	position: static;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	padding: 0;
	list-style: none;
}

.sol-testimonials .slick-dots li {
	width: auto;
	height: auto;
	margin: 0;
}

.sol-testimonials .slick-dots li button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c7d0d8;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.sol-testimonials .slick-dots li button::before {
	display: none;
}

.sol-testimonials .slick-dots li:hover button {
	background: var(--sol-orange);
}

.sol-testimonials .slick-dots li.slick-active button {
	background: var(--sol-orange);
	transform: scale(1.15);
}

@media (max-width: 1060px) {
	.sol-testimonials__card {
		margin: 0 6px;
	}
}

/* ── Case Study (full-width content with background) ─────────────────────────── */
/*
 * Inset rounded card with the photo as its background and a dark scrim so the
 * copy stays legible over any image. Scoped to .sol-page so the shared partial
 * keeps its original full-bleed treatment on other templates.
 */
.sol-page .acf_full-width-content-with-background {
	background-color: #12222f;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	/* Inset from the page edges to match the card above it. */
	width: 92vw;
	max-width: 1400px;
	margin: var(--sol-section-pad) auto;
	margin-top: 0; /* previous section's own bottom padding already provides the gap */
	padding: clamp(40px, 6vw, 88px) 0;
}

/* Scrim: strongest on the left where the copy sits, clearing toward the image. */
.sol-page .acf_full-width-content-with-background::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(4, 28, 44, 0.92) 0%,
		rgba(4, 28, 44, 0.78) 38%,
		rgba(4, 28, 44, 0.35) 68%,
		rgba(4, 28, 44, 0.15) 100%
	);
	pointer-events: none;
}

.sol-page .acf_full-width-content-with-background > * {
	position: relative;
	z-index: 1;
}

.sol-page .acf_full-width-content-with-background__content {
	max-width: 46rem;
}

.acf_full-width-content-with-background__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sol-blue-mid, #0077BE);
	margin: 0 0 14px;
}

.sol-page .acf_full-width-content-with-background__title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(28px, 4vw, 52px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--sol-white);
	margin: 0 0 18px;
}

.sol-page .acf_full-width-content-with-background__body {
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(16px, 1.5vw, 22px);
	line-height: 1.5;
}

.sol-page .acf_full-width-content-with-background__body p:last-child {
	margin-bottom: 0;
}

.sol-page .acf_full-width-content-with-background__button {
	margin-top: 28px;
}

/* ── Post Listing (Insights) ─────────────────────────────────────────────────── */
/*
 * Mirrors the homepage resources block (lib/builder/related-posts-4.php):
 * centered header, then a featured image card on the left and arrow-bulleted
 * post links on the right.
 */
.sol-posts {
	padding: var(--sol-section-pad) 0;
	padding-top: 0; /* previous section's own bottom padding already provides the gap */
}

.sol-posts__header {
	text-align: center;
	max-width: 46rem;
	margin: 0 auto clamp(36px, 5vw, 64px);
}

.sol-posts__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sol-orange);
	margin: 0 0 14px;
}

.sol-posts__title {
	font-family: 'Raleway', sans-serif;
	font-size: clamp(26px, 3.2vw, 42px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--midnight, #041C2C);
	margin: 0 0 14px;
}

.sol-posts__intro {
	color: var(--sol-text-body);
	margin: 0;
}

.sol-posts__intro p:last-child {
	margin-bottom: 0;
}

.sol-posts__link {
	margin-top: 10px;
}

.sol-posts__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 56px);
	align-items: stretch;
}

/* Featured post: image card with a dark scrim and overlaid copy. */
.sol-posts__featured {
	position: relative;
	min-height: 370px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: var(--round-deep, 14px);
	overflow: hidden;
	box-shadow: var(--shadow-md, 5px 10px 45px 10px rgba(0, 0, 0, 0.2));
	background-color: #252f37;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: clamp(24px, 3vw, 40px);
}

.sol-posts__featured::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(37, 47, 55, 0.88),
		rgba(37, 47, 55, 0.78),
		rgba(37, 47, 55, 0.62),
		rgba(37, 47, 55, 0.42)
	);
	pointer-events: none;
}

/* Full-card click target. Must stay below the button (z-index 3) so the
   button receives its own clicks rather than the overlay swallowing them. */
.sol-posts__featured-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-bottom: 0 !important;
}

/* Screen-reader-only label for the full-card link. */
.sol-posts .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sol-posts__featured-body {
	position: relative;
	z-index: 1;
	color: var(--sol-white);
	max-width: 82%;
	margin-bottom: 56px;
}

.sol-posts__featured-title {
	font-family: 'Raleway', sans-serif;
	font-size: var(--text-xl, clamp(24px, 1.8vw, 36px));
	font-weight: 800;
	line-height: 1.25;
	color: var(--sol-white);
	margin: 0 0 10px;
}

.sol-posts__featured-excerpt {
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.sol-posts .sol-posts__featured-btn {
	position: absolute;
	right: clamp(24px, 3vw, 40px);
	bottom: clamp(24px, 3vw, 40px);
	z-index: 3;
	background: var(--orange-dark, #E56910);
	border-radius: 4px;
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	transition: background 0.25s ease;
}

.sol-posts .sol-posts__featured-btn:hover {
	background: var(--orange-light, #EF8B1D);
}

/* The theme's .btn slides its label left on hover to reveal a chevron
   (style.css .btn > span / .btn:after). The design has a plain centered
   label, so pin the span and suppress the arrow.
   solutions.css is enqueued before style.css, so these selectors are kept
   more specific than the .btn rules they override — a bare
   `.sol-posts__featured-btn > span` would tie and lose on source order. */
.sol-posts .sol-posts__featured-btn > span,
.sol-posts .sol-posts__featured-btn:hover > span {
	left: auto;
	position: static;
	transform: none;
	display: inline-block;
	border-bottom: 0 !important;
}

.sol-posts .sol-posts__featured-btn:after,
.sol-posts .sol-posts__featured-btn:hover:after {
	display: none;
	content: none;
}

/* Supporting posts */
.sol-posts__list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(18px, 2.2vw, 30px);
}

.sol-posts__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border-bottom: 0 !important;
	color: var(--midnight, #041C2C);
	transition: color 0.2s ease;
}

.sol-posts__item:hover {
	border-bottom: 0 !important;
	color: var(--blue-light, #21a5d5);
}

.sol-posts__arrow {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	fill: var(--blue-light, #21a5d5);
	transition: transform 0.2s ease;
	will-change: transform;
}

.sol-posts__item:hover .sol-posts__arrow {
	transform: translateX(6px);
}

.sol-posts__item-body {
	display: block;
}

.sol-posts__item-title {
	display: block;
	font-size: clamp(15px, 1.2vw, 17px);
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 4px;
}

.sol-posts__item-excerpt {
	display: block;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--sol-text-body);
	font-weight: 400;
}

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

	.sol-posts__featured {
		min-height: 400px;
	}
}

@media (max-width: 575px) {
	.sol-posts__featured {
		min-height: 460px;
	}

	.sol-posts__featured-title {
		font-size: 20px;
	}

	.sol-posts__featured-body {
		max-width: 100%;
	}

	/* Button drops to the left edge so it clears the copy. */
	.sol-posts__featured-btn {
		right: auto;
		left: clamp(24px, 3vw, 40px);
	}
}

/* ── CTA banner ──────────────────────────────────────────────────────────────── */
/*
 * Blue gradient bar: title left, button center, supporting line right.
 * .acf_cta--blue is set by partials/cta.php when Background = Blue.
 */
/* .layout__section carries no width of its own, so constrain the banner's
   wrapper the same way .grid-container constrains the sections above it. */
.sol-page .layout__section--cta-banner {
	width: 92vw;
	max-width: 1400px;
	margin: 0 auto var(--sol-section-pad);
	padding-left: clamp(16px, 3vw, 40px);
	padding-right: clamp(16px, 3vw, 40px);
	box-sizing: border-box;
}

/* Grid (not flex) so the title+content column and the button column can be
   placed independently of their DOM order (title, button, content). */
.acf_cta--blue {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	column-gap: clamp(24px, 4vw, 56px);
	row-gap: 8px;
	align-items: center;
	background: var(--blue-gradient);
	color: var(--white);
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	padding: clamp(22px, 3vw, 34px) clamp(24px, 4vw, 56px);
	text-align: left;
}

.acf_cta--blue .acf_cta__title {
	grid-column: 1;
	grid-row: 1;
	font-family: 'Raleway', sans-serif;
	font-size: clamp(19px, 2vw, 27px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--white);
	margin: 0;
}

.acf_cta--blue .acf_cta__content {
	grid-column: 1;
	grid-row: 2;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(15px, 1.3vw, 19px);
	line-height: 1.4;
	text-align: left;
	max-width: 640px;
	margin: 0;
}

.acf_cta--blue .acf_cta__content p:last-child {
	margin-bottom: 0;
}

/* Orange pill button, overriding the theme's default .btn treatment. Spans
   both rows of the left column so it sits vertically centered beside them. */
.acf_cta--blue .acf_cta__button {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	justify-self: end;
	background: var(--orange-dark, #E56910);
	color: var(--white) !important;
	border-radius: 4px;
	padding: 13px 26px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	transition: background 0.25s ease;
}

.acf_cta--blue .acf_cta__button:hover {
	background: var(--orange-light, #EF8B1D);
	color: var(--white) !important;
}

/* The theme's .btn slides its label to make room for an arrow; the banner
   button has no arrow, so keep the label centered. */
.acf_cta--blue .acf_cta__button > span,
.acf_cta--blue .acf_cta__button:hover > span {
	left: auto;
	position: static;
	transform: none;
	display: inline-block;
	border-bottom: 0 !important;
}

.acf_cta--blue .acf_cta__button:after,
.acf_cta--blue .acf_cta__button:hover:after {
	display: none;
	content: none;
}

@media (max-width: 767px) {
	.acf_cta--blue {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}

	.acf_cta--blue .acf_cta__button {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
	}
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.sol-process-app__columns {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}

	.sol-process-app__header {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.sol-process-app__intro {
		padding-top: 0;
	}

}

/* Jump links: horizontal row on desktop */
@media (min-width: 768px) {
	.sol-hero__jump-links {
		flex-direction: row;
		flex-wrap: wrap;
		padding-left: 0;
		overflow: visible;
	}

	/* Hide all vertical timeline chrome */
	.sol-hero__jump-links::before,
	.sol-hero__jump-link::before,
	.sol-hero__jump-link:last-child::after {
		display: none;
	}

	/* border-left separator pushes background-image 1px inside the nav boundary (fixes item-01 clip) */
	.sol-hero__jump-link {
		flex: 1 1 0;
		align-self: auto;
		padding: 8px 24px 20px 13px;
		border-left: 1px solid rgba(255, 255, 255, 0.1);
		border-right: none;
		background-image: linear-gradient(to bottom, var(--sol-orange), var(--sol-orange));
		background-size: 3px 30px;
		background-position: 0 0;
		background-repeat: no-repeat;
		transition: color 0.2s ease, background-size 0.35s ease;
	}

	.sol-hero__jump-link:hover,
	.sol-hero__jump-link.is-open {
		background-size: 3px 100%;
	}

	/* CSS-only chevron — Lucide is not loaded on the front-end */
	.sol-hero__jump-arrow {
		display: block;
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--sol-orange);
		border-bottom: 2px solid var(--sol-orange);
		transform: translateY(-4px) rotate(45deg);
		margin-top: 10px;
		opacity: 0;
		transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s;
	}

	.sol-hero__jump-link:hover .sol-hero__jump-arrow,
	.sol-hero__jump-link.is-open .sol-hero__jump-arrow {
		opacity: 1;
		transform: translateY(0) rotate(45deg);
	}
}

@media (max-width: 767px) {
	/* Hero: stack columns */
	.sol-hero__left {
		padding-right: 0;
	}

	.sol-hero__right {
		padding-left: 0;
		padding-top: 0;
	}

	/* Overview: stack and reduce card padding */
	.sol-overview__card {
		padding: clamp(24px, 5vw, 36px) clamp(20px, 4vw, 28px);
	}

	.sol-overview__content-col {
		padding-left: 0;
		padding-top: 32px;
	}

	.sol-dnt-wrap {
		width: 100%;
		max-width: 340px;
		margin: 0 auto;
	}

	/* Framework cards: single column on mobile, no stagger */
	.sol-framework__cards {
		grid-template-columns: 1fr;
		padding: 0;
	}

	.sol-framework__cards-col--right {
		padding-top: 0;
	}

	/* Wide (odd-count align) card: stack like every other card on mobile */
	.sol-framework__card--wide {
		grid-column: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: clamp(24px, 3vw, 36px);
	}

	.sol-framework__card--wide lord-icon {
		width: 56px !important;
		height: 56px !important;
	}

	.sol-framework__card--wide .sol-framework__card-icon--wide {
		margin-bottom: 4px;
	}

	.sol-framework__card--wide .sol-framework__card-content {
		max-width: none;
		gap: 12px;
	}

	/* Process section */
	.sol-process__left {
		padding-right: 0;
		margin-bottom: 40px;
	}

	.sol-process__flower {
		max-width: 300px;
	}

	.sol-process-app__columns {
		grid-template-columns: 1fr 1fr;
	}

	/* Jump links: vertical line shorter on mobile */
	.sol-hero__jump-links::before {
		left: 3px;
		top: 18px;
		bottom: 18px;
	}

	/* Keep the cover strip on the line, which shifts 3px left here. The dot
	   itself doesn't move, so it still starts below the dot's hover size. */
	.sol-hero__jump-link:last-child::after {
		left: -26px;
	}
}

@media (max-width: 479px) {
	.sol-process-app__columns {
		grid-template-columns: 1fr;
	}

	.sol-overview__card {
		border-radius: 8px;
	}

	/* Donut: slightly smaller labels at very small sizes */
	.sol-dnt__seg-label {
		font-size: 10px;
	}
}

/* Full-width background option within the standard Solutions Hero. */
.sol-hero--video-fullwidth { padding-top: 0; overflow: hidden; }
.sol-page .sol-hero--video-fullwidth > .grid-container { width: 100%; max-width: none; padding: 0; }
.sol-hero--video-fullwidth .sol-hero__video-card { border-radius: 0; margin: 0; box-shadow: none; }
.sol-hero--video-fullwidth .sol-hero__video-inner {
	width: 92vw; max-width: 1400px; margin: 0 auto; box-sizing: border-box;
	padding: clamp(80px, 10vw, 130px) clamp(16px, 3vw, 40px);
}
.sol-hero--video-fullwidth .sol-hero__title,
.sol-hero--video-fullwidth .sol-hero__content { max-width: 46rem; }
.sol-hero--video-fullwidth .sol-hero__links-band {
	width: 92vw; max-width: 1400px; margin: 0 auto; box-sizing: border-box;
	padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px);
	z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
	.sol-hero--video-fullwidth .sol-hero__video { display: block; }
}

/* Keep the full reversed navigation over video until the normal scroll state. */
body.sol-video-header:not(.scrolled) header,
body.sol-video-header:not(.scrolled) header::after {
	background: transparent;
	box-shadow: none;
}
body.sol-video-header:not(.scrolled)::after { background: transparent; }
body.sol-video-header:not(.scrolled) header #logo path.insight,
body.sol-video-header:not(.scrolled) header #logo path.profit,
body.sol-video-header:not(.scrolled) header #logo path.square.bottom-left { fill: #fff; }
body.sol-video-header:not(.scrolled) header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link { color: #fff; }
body.sol-video-header:not(.scrolled) header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link::before,
body.sol-video-header:not(.scrolled) header #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link::after { border-bottom-color: rgba(255,255,255,.1); }