/* ==========================================================================
   page-remote-talent.css — Remote Talent (page-specific sections)
   Depends on: style.css → lp-base.css → page-service-landing.css
   Scope: only enqueued on page-remote-talent.php — safe to override
   .svc-* shared classes here without affecting Staffing Solutions /
   Back-Office Roles (they don't load this file).

   The hero lives in its own independent file:
   assets/css/page-remote-talent-hero-v2.css (rt2- prefix).
   ========================================================================== */

/* Align every section's left edge with the header logo — .lp-container's
   default padding-inline (32px) otherwise insets this page's content
   relative to .nw-header__inner, which has no side padding of its own.
   Below 1024px, .nw-header itself carries the real gutter (24px / 40px —
   see style.css), so .lp-container must match it instead of going to 0,
   otherwise content sits flush against the screen edge on mobile/tablet. */
#svc-main .lp-container {
	padding-inline: 0;
}

@media (max-width: 639px) {
	#svc-main .lp-container {
		padding-inline: 24px;
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
	#svc-main .lp-container {
		padding-inline: 40px;
	}
}

/* .nw-header's own padding-inline (64px, style.css) constrains its width
   below 1308px (1180 max-width + 64px×2). Above that, both the header and
   this container center freely at the same 1180px max-width, so 0 already
   matches. Without this rule, 1024–1307px renders flush against the
   viewport edge while the header still sits inset 64px. */
@media (min-width: 1024px) and (max-width: 1307px) {
	#svc-main .lp-container {
		padding-inline: 64px;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2 — TRUST BAR (5 icons + short copy, right below the hero)
   The 5 groups spread across the full layout width (space-between);
   inside each group, the icon sits left of its text, and the text
   (title + subtitle) is left-aligned. Divider borders between groups.
   ═══════════════════════════════════════════════════════════════════════════ */
.svc-stats--trust {
	background: #fff;
	border-top: 1px solid #eef0f2;
	border-bottom: 1px solid #eef0f2;
	padding-block: 28px;
}

/* Only meaningful in the mobile stacked-cards layout — the horizontal row
   on tablet/desktop is self-explanatory and doesn't need a heading. */
.svc-stats__mobile-title {
	display: none;
}

.svc-stats--trust .svc-stats__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.svc-stats__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 24px;
	border-right: 1px solid #eef0f2;
}

.svc-stats__item:last-child { border-right: none; padding-right: 0; }

.svc-stats__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--nw-navy);
	border-radius: 10px;
	flex-shrink: 0;
}

.svc-stats__icon svg {
	width: 20px;
	height: 20px;
	stroke: var(--nw-cyan);
	fill: none;
}

.svc-stats__text {
	margin: 0;
	text-align: left;
	white-space: nowrap;
}

.svc-stats__text strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
}

.svc-stats__text span {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: #6b7280;
	line-height: 1.2;
	margin-top: 2px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
/* Tablet: shrink everything just enough that all 5 items stay on one row
   instead of wrapping (desktop's sizing needs the full 1180px container). */
@media (min-width: 681px) and (max-width: 1024px) {
	.svc-stats--trust .svc-stats__inner {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.svc-stats__item {
		gap: 8px;
		padding-right: 12px;
	}

	.svc-stats__icon {
		width: 30px;
		height: 30px;
		border-radius: 8px;
	}

	.svc-stats__icon svg {
		width: 15px;
		height: 15px;
	}

	.svc-stats__text strong {
		font-size: 11px;
	}

	.svc-stats__text span {
		font-size: 9px;
	}
}

/* Mobile: each item becomes its own card — same structure/sizing as
   .careers-benefit-card (page-careers.css), just light instead of dark.
   Icon has no circle behind it (project-wide rule) — it's sized to fill
   the same 48px the circle would have occupied. */
@media (max-width: 680px) {
	.svc-stats--trust {
		padding-block: 24px;
	}

	/* Weight/color still come from .lp-section-title (lp-base.css) — the
	   universal section-title style used on Services, etc. Font-size is
	   overridden here to match this page's own h2 mobile convention
	   (1.9rem, same as .svc-savings__title / .svc-why-col__title / etc.). */
	.svc-stats__mobile-title {
		display: block;
		text-align: center;
		font-size: 1.9rem;
		margin: 0 0 20px;
	}

	.svc-stats--trust .svc-stats__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: 32px;
	}

	/* Stacking-cards scroll effect — pure CSS `position: sticky`, no JS.
	   Each card sticks at a slightly larger `top` than the one before, so
	   as the page scrolls each new card pins a bit lower than the last,
	   leaving a sliver of the previous cards peeking out behind it. The
	   padding-bottom above just gives the last card a bit of breathing
	   room before the section ends — keep it small, a big value here
	   shows up as dead empty space once the stack finishes. */
	.svc-stats__item {
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		min-height: 180px;
		padding: 36px 28px;
		border: 1px solid #e5e7eb;
		border-radius: 12px;
		background: #f8fafc;
		position: sticky;
		margin-bottom: 16px;
		box-shadow: 0 12px 24px -8px rgba(15, 23, 42, .12);
	}

	.svc-stats__item:nth-child(1) { top: calc(var(--nw-header-h, 68px) + 12px); z-index: 1; }
	.svc-stats__item:nth-child(2) { top: calc(var(--nw-header-h, 68px) + 26px); z-index: 2; }
	.svc-stats__item:nth-child(3) { top: calc(var(--nw-header-h, 68px) + 40px); z-index: 3; }
	.svc-stats__item:nth-child(4) { top: calc(var(--nw-header-h, 68px) + 54px); z-index: 4; }
	.svc-stats__item:nth-child(5) { top: calc(var(--nw-header-h, 68px) + 68px); z-index: 5; }

	.svc-stats__icon {
		width: 52px;
		height: 52px;
		margin-bottom: 20px;
		background: var(--nw-navy);
		border-radius: 12px;
	}

	.svc-stats__icon svg {
		width: 24px;
		height: 24px;
		stroke-width: 1.75;
		stroke: var(--nw-cyan);
	}

	.svc-stats__text {
		white-space: normal;
	}

	.svc-stats__text strong {
		font-size: 1.05rem;
		margin-bottom: 12px;
	}

	.svc-stats__text span {
		font-size: .92rem;
		line-height: 1.7;
		margin-top: 0;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3 — WHY COLOMBIA (text + 2x2 photo grid)
   ═══════════════════════════════════════════════════════════════════════════ */
.svc-why-col {
	background: #f8fafc;
	padding-block: 80px;
}

.svc-why-col__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.svc-why-col__eyebrow {
	font-size: .75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--nw-cyan-text);
	margin: 0 0 16px;
}

.svc-why-col__title {
	font-size: clamp(1.9rem, 2.8vw, 2.4rem);
	font-weight: 800;
	color: #0f172a;
	line-height: 1.15;
	letter-spacing: -.3px;
	margin: 0 0 18px;
}

.svc-why-col__desc {
	font-size: .9375rem;
	color: #6b7280;
	line-height: 1.7;
	max-width: 420px;
	margin: 0 0 22px;
}

.svc-why-col__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* ── Flip cards: hover → rotate on Y axis → reveal back face ────────────── */
.svc-why-col__flip {
	aspect-ratio: 1 / 1;
	perspective: 1200px;
}

.svc-why-col__flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .6s ease;
}

.svc-why-col__flip:hover .svc-why-col__flip-inner {
	transform: rotateY(180deg);
}

.svc-why-col__face {
	position: absolute;
	inset: 0;
	border-radius: 14px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.svc-why-col__face--front {
	background: #e2e8f0;
}

.svc-why-col__face--back {
	background: #cbd5e1;
	transform: rotateY(180deg);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.svc-why-col__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

@media (max-width: 680px) {
	.svc-why-col {
		padding-block: 32px;
	}

	.svc-why-col__content {
		text-align: center;
	}

	.svc-why-col__desc {
		margin-inline: auto;
	}

	.svc-why-col__content .lp-btn {
		justify-content: center;
	}

	.svc-why-col__grid {
		gap: 14px;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4 — TALENT FOR EVERY FUNCTION (3D drag ring)
   Placeholders (solid gradient) instead of photos for now — swap
   .svc-roles__img background once real images are ready.
   ═══════════════════════════════════════════════════════════════════════════ */
.svc-roles {
	background: #0b1420;
	padding-block: 80px;
}

.svc-roles__card {
	padding: 48px 48px 56px 0;
	overflow: hidden;
}

/* Desktop's left:0 exists to let the ring bleed past the card edge at that
   scale — from 681–1024px it just reads as off-center content, since
   nothing else compensates for the missing left padding at that width. */
@media (min-width: 681px) and (max-width: 1024px) {
	.svc-roles__card {
		padding: 48px 48px 56px;
	}

	/* Paired with the 430px rotation radius in page-remote-talent-roles.js
	   — see the comment there for the gap-vs-radius math. Keep these two
	   values in sync if either one changes. */
	.svc-roles__ring {
		width: 220px;
		height: 288px;
	}
}

.svc-roles__header {
	text-align: center;
}

.svc-roles__eyebrow {
	font-size: .75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--nw-cyan);
	margin: 0 0 14px;
}

.svc-roles__title {
	font-size: clamp(1.6rem, 2.4vw, 2rem);
	font-weight: 700;
	color: #fff !important;
	line-height: 1.3;
	max-width: 600px;
	margin: 0 auto;
}

.svc-roles__stage {
	position: relative;
	height: 420px;
	margin-top: 48px;
	perspective: 2000px;
}

.svc-roles__ring {
	position: absolute;
	width: 260px;
	height: 340px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
}

.svc-roles__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 14px;
	background: linear-gradient(160deg, #64748b 0%, #334155 100%);
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.svc-roles__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, transparent 70%);
}

.svc-roles__caption strong {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
	margin-bottom: 6px;
}

.svc-roles__caption span {
	display: block;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .75);
	line-height: 1.5;
}

.svc-roles__vignette {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(to left, #0b1420 2%, transparent 25%, transparent 75%, #0b1420 98%);
}

/* The vignette's % stops mask edge cards relative to the stage width. The
   ring's own geometry (260px card, 500px rotation radius) is fixed in px
   and doesn't shrink with the stage, so on a narrower tablet stage the
   same cards now sit outside that % fade zone and show a hard clipped
   edge — switch to px stops so the masked band stays a constant physical
   size regardless of stage width. */
@media (min-width: 681px) and (max-width: 1024px) {
	.svc-roles__vignette {
		position: static;
		background: linear-gradient(
			to left,
			#0b1420 0,
			#0b1420 90px,
			transparent 220px,
			transparent calc(100% - 220px),
			#0b1420 calc(100% - 90px),
			#0b1420 100%
		);
	}
}

.svc-roles__dragger {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: grab;
	touch-action: none;
}

.svc-roles__dragger:active {
	cursor: grabbing;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 680px) {
	/* Testing 32px as the universal mobile section spacing convention
	   (vs. desktop's 80px) — see the cross-page spacing audit. */
	.svc-roles {
		padding-block: 32px;
	}

	/* Match .svc-savings__title's mobile size — the reference size for
	   every section h2 on this page in mobile. */
	.svc-roles__title {
		font-size: 1.9rem;
	}

	.svc-roles__card {
		padding: 36px 24px 40px;
		border-radius: 18px;
		/* .roles-stack lives inside this card. The base rule's
		   overflow:hidden (needed to clip the desktop 3D ring) breaks
		   position:sticky on any descendant — must be visible here. */
		overflow: visible;
	}

	/* Mobile hides the 3D ring completely — the stack below is a fully
	   independent, standalone block, no shared CSS/state with it. */
	.svc-roles__stage {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-ONLY — "Talent for Every Function" stacked cards
   Independent from .svc-roles__ring (the 3D ring, tablet/desktop only).
   Deliberately its own class namespace so nothing from the ring's
   absolute-positioning / 3D-transform baggage can leak in and break
   position:sticky here.
   ═══════════════════════════════════════════════════════════════════════════ */
.roles-stack {
	display: none;
}

@media (max-width: 680px) {
	.roles-stack {
		display: block;
		margin-top: 32px;
		padding-bottom: 20px;
	}

	.roles-stack__card {
		position: sticky;
		top: calc(var(--nw-header-h, 68px) + 16px);
		width: 260px;
		height: 380px;
		margin: 0 auto 20px;
		border-radius: 14px;
		background: linear-gradient(160deg, #64748b 0%, #334155 100%);
		box-shadow: 0 16px 32px -8px rgba(0, 0, 0, .4);
		overflow: hidden;
	}

	/* Alternating tilt — the "tossed photos" look from the reference. */
	.roles-stack__card:nth-child(1) { transform: rotate(-3deg); z-index: 1; }
	.roles-stack__card:nth-child(2) { transform: rotate(3deg);  z-index: 2; }
	.roles-stack__card:nth-child(3) { transform: rotate(-3deg); z-index: 3; }
	.roles-stack__card:nth-child(4) { transform: rotate(3deg);  z-index: 4; }
	.roles-stack__card:nth-child(5) { transform: rotate(0deg);  z-index: 5; }

	.roles-stack__caption {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 22px 20px;
		background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, transparent 70%);
	}

	.roles-stack__caption strong {
		display: block;
		font-size: 1.0625rem;
		font-weight: 700;
		color: #fff;
		line-height: 1.3;
		margin-bottom: 6px;
	}

	.roles-stack__caption span {
		display: block;
		font-size: .8125rem;
		color: rgba(255, 255, 255, .75);
		line-height: 1.5;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7 — OUR PROCESS (4 steps, dark, alternates with the light
   sections around it — see Why Colombia above / Comparison Table below)
   ═══════════════════════════════════════════════════════════════════════════ */
.svc-process {
	background: #0b1420;
	padding-block: 80px;
}

.svc-process__inner {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 48px;
	align-items: center;
}

.svc-process__eyebrow {
	font-size: .75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--nw-cyan);
	margin: 0 0 14px;
}

.svc-process__title {
	font-size: clamp(1.4rem, 2vw, 1.75rem);
	font-weight: 700;
	color: #fff !important;
	line-height: 1.3;
	margin: 0 0 18px;
}

.svc-process__track {
	display: flex;
	align-items: stretch;
	gap: 32px;
	counter-reset: step-counter;
}

.svc-process__step {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: .75rem;
	counter-increment: step-counter;
}

.svc-process__step:not(:last-child)::after {
	content: '';
	position: absolute;
	z-index: 0;
	top: 28px;
	left: 66px;
	width: calc(100% - 44px);
	border-top: 2px dotted rgba(56, 214, 255, .55);
}

.svc-process__step-icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(56, 214, 255, .08);
	border: 1px solid rgba(56, 214, 255, .25);
	color: var(--nw-cyan);
}

.svc-process__step-icon::before {
	content: counter(step-counter);
	position: absolute;
	top: -6px;
	right: -6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--nw-cyan);
	color: #0b1420;
	font-size: .65rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.svc-process__step-title {
	font-size: 1rem !important;
	font-weight: 800 !important;
	color: #fff !important;
	line-height: 1.25 !important;
	margin: 0;
}

.svc-process__step-desc {
	font-size: .82rem;
	color: rgba(255, 255, 255, .6);
	line-height: 1.65;
	margin: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.svc-process__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.svc-process__track {
		flex-direction: column;
		gap: 28px;
	}

	.svc-process__step:not(:last-child)::after {
		display: none;
	}
}

@media (max-width: 680px) {
	.svc-process {
		padding-block: 32px;
	}

	/* Match .svc-savings__title's mobile size — the reference size for
	   every section h2 on this page in mobile. */
	.svc-process__title {
		font-size: 1.9rem;
	}

	.svc-process__intro {
		text-align: center;
	}

	/* Same pattern as Collections' .col-how mobile treatment: steps go
	   centered/stacked instead of left-aligned, with a clear connector
	   between them so it reads as one sequence instead of loose blocks. */
	.svc-process__track {
		flex-direction: column;
		gap: 0;
	}

	.svc-process__step {
		align-items: center;
		text-align: center;
		gap: .5rem;
		width: 100%;
		max-width: 320px;
		margin: 0 auto 16px;
		padding: 28px 20px;
		border: 1px solid transparent;
		border-radius: 12px;
		transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
	}

	.svc-process__step:last-child {
		margin-bottom: 0;
	}

	/* Card look — same idea as Collections' .col-step:hover on its
	   desktop — but on mobile there's no cursor, so instead of :hover
	   this class is toggled by JS (IntersectionObserver, see
	   page-remote-talent.js) on whichever step is crossing the
	   vertical center of the viewport as the page scrolls. */
	.svc-process__step--active {
		background: #0d1f35;
		border-color: rgba(56, 214, 255, .35);
		box-shadow: 0 16px 32px -8px rgba(0, 0, 0, .45);
		transform: translateY(-4px);
	}

	/* No connector between steps — already display:none via the shared
	   ≤900px block, kept that way here. */
	.svc-process__step:not(:last-child)::after {
		display: none;
	}

	.svc-process__step-icon {
		margin: 0 auto;
		background: transparent;
	}
}


/* ── Roles CTA — centered button inside the dark card, below the ring ──── */
.svc-roles__cta {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5 — COST COMPARISON / STAT BLOCK
   Top: intro copy + 3 cards (U.S. cost / Next Wave cost / % saved).
   Bottom: dark "Next Wave Advantage" panel (growth chart + T&M stats)
   + trust badges row.
   ═══════════════════════════════════════════════════════════════════════════ */
.svc-savings {
	background: #fff;
	padding-block: 80px;
}

/* ── Top: intro + 3 cards ────────────────────────────────────────────────── */
.svc-savings__top {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 48px;
	align-items: center;
	margin-bottom: 64px;
}

.svc-savings__eyebrow {
	font-size: .75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--nw-cyan-text);
	margin: 0 0 14px;
}

.svc-savings__title {
	font-size: clamp(1.9rem, 2.8vw, 2.4rem);
	font-weight: 800;
	color: #0f172a;
	line-height: 1.15;
	letter-spacing: -.3px;
	margin: 0 0 18px;
}

.svc-savings__desc {
	font-size: .9375rem;
	color: #6b7280;
	line-height: 1.7;
	max-width: 420px;
	margin: 0 0 22px;
}

.svc-savings__cards {
	display: flex;
	gap: 20px;
}

.svc-savings__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 22px 20px;
	box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
}

.svc-savings__card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.svc-savings__card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: #64748b;
	flex-shrink: 0;
}

.svc-savings__card-icon svg {
	width: 30px;
	height: 30px;
}

.svc-savings__card-label {
	font-size: .8125rem;
	font-weight: 700;
	color: #334155;
}

.svc-savings__card-amount {
	font-size: 1.6rem;
	font-weight: 800;
	color: #0f172a;
	line-height: 1;
	margin: 0 0 16px;
}

.svc-savings__card-amount span {
	font-size: .75rem;
	font-weight: 600;
	color: #4a5568;
	margin-left: 2px;
}

.svc-savings__chart-block {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 150px;
}

.svc-savings__barchart {
	position: relative;
	flex: 1;
	min-height: 110px;
}

.svc-savings__barchart-svg {
	width: 100%;
	height: 100%;
	display: block;
	font-variant-numeric: tabular-nums;
}

.svc-savings__caption-wrap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-top: 6px;
}

.svc-savings__card-caption {
	font-size: .75rem;
	color: #4a5568;
	margin: 0;
}

.svc-savings__card-caption--accent {
	color: var(--nw-cyan-text);
	font-weight: 600;
}

/* Card 3 — dark "% saved" variant */
.svc-savings__card--dark {
	background: #0b1420;
	border-color: transparent;
}

.svc-savings__card--dark .svc-savings__card-head {
	margin-bottom: 10px;
}

.svc-savings__card-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nw-green);
	flex-shrink: 0;
}

.svc-savings__card--dark .svc-savings__card-label {
	font-size: .8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .6);
}

.svc-savings__card-percent {
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
	background: linear-gradient(90deg, #7af0b0, var(--nw-green));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	margin: 4px 0 8px;
}

.svc-savings__card--dark .svc-savings__card-caption {
	color: rgba(255, 255, 255, .55);
	margin-bottom: 16px;
}

.svc-savings__linechart {
	width: 100%;
	height: auto;
	margin-bottom: 12px;
}

.svc-savings__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.svc-savings__legend span {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .6875rem;
	color: rgba(255, 255, 255, .7);
}

.svc-savings__legend-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	flex-shrink: 0;
}

.svc-savings__legend-dot--cyan  { background: var(--nw-cyan); }
.svc-savings__legend-dot--green { background: var(--nw-green); }

/* ── Bottom: dark "Next Wave Advantage" panel ───────────────────────────── */
.svc-savings__panel {
	display: grid;
	grid-template-columns: 240px .8fr 1.5fr;
	gap: 36px;
	align-items: center;
	background: #0b1420;
	border-radius: 24px;
	padding: 44px 40px;
}

.svc-savings__panel-title {
	font-size: clamp(1.5rem, 2vw, 1.8rem);
	font-weight: 800;
	color: #fff !important;
	line-height: 1.25;
	margin: 0 0 12px;
}

.svc-savings__panel-title em {
	color: var(--nw-cyan);
	font-style: normal;
}

.svc-savings__panel-desc {
	font-size: .875rem;
	color: rgba(255, 255, 255, .6);
	line-height: 1.7;
	margin: 0;
}

.svc-savings__chart-label {
	font-size: .8125rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 14px;
}

.svc-savings__areachart {
	display: block;
	width: 100%;
	height: 120px;
}

.svc-savings__chart-axis {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
}

.svc-savings__chart-axis span {
	font-size: .6875rem;
	color: rgba(255, 255, 255, .65);
}

.svc-savings__panel-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.svc-savings__stat {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-left: 20px;
	border-left: 1px solid rgba(255, 255, 255, .1);
}

.svc-savings__stat:first-child {
	padding-left: 0;
	border-left: none;
}

.svc-savings__stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: var(--nw-cyan);
}

.svc-savings__stat-icon svg {
	width: 46px;
	height: 46px;
}

.svc-savings__stat-num {
	font-size: 1.75rem;
	font-weight: 800;
	color: #fff;
	line-height: 1;
	margin: 0;
}

.svc-savings__stat-title {
	font-size: .8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	line-height: 1.35;
	min-height: calc(1.35em * 2);
	margin: 0;
}

.svc-savings__stat-desc {
	font-size: .75rem;
	color: rgba(255, 255, 255, .5);
	line-height: 1.5;
	margin: 0;
}

/* ── Trust badges row ────────────────────────────────────────────────────── */
.svc-savings__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	margin-top: 36px;
}

.svc-savings__badges span {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .8125rem;
	font-weight: 600;
	color: #334155;
}

.svc-savings__badges svg {
	color: var(--nw-cyan-text);
	flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.svc-savings__top {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.svc-savings__intro {
		text-align: center;
	}

	.lp-link-arrow {
		justify-content: center;
	}

	.svc-savings__cards {
		flex-direction: column;
	}

	.svc-savings__panel {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.svc-savings__panel-intro {
		text-align: center;
	}

	.svc-savings__panel-stats {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.svc-savings__stat {
		padding-left: 0;
		padding-top: 16px;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}

	.svc-savings__stat:first-child {
		padding-top: 0;
		border-top: none;
	}
}

@media (max-width: 680px) {
	.svc-savings {
		padding-block: 32px;
	}

	.svc-savings__panel {
		padding: 32px 24px;
		border-radius: 18px;
	}

	/* Double the gap between the divider line and the icon below it, so
	   each stat reads as its own independent group instead of the icon
	   feeling glued to the previous group's divider. */
	.svc-savings__stat {
		padding-top: 32px;
	}

	.svc-savings__stat:first-child {
		padding-top: 0;
	}

	/* Reserves room for a 2-line title (tablet/desktop's 3-column grid,
	   where columns are narrow enough to wrap) — titles fit on one line
	   once stacked full-width in mobile, so this just leaves a gap of
	   blank space between the title and its description below it. */
	.svc-savings__stat-title {
		min-height: 0;
	}

	.svc-savings__badges {
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		row-gap: 10px;
		column-gap: 20px;
	}

	/* "Verified Talent" alone on its own row; the other 2 wrap together
	   onto the next row. */
	.svc-savings__badges span:first-child {
		flex-basis: 100%;
		justify-content: center;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — h2 size consistency across shared components used on this page
   (Testimonials, FAQ and Comparison Table all render the same universal
   .lp-section-title class — overriding it here only affects it on THIS
   page, since page-remote-talent.css only loads here). Final CTA's own
   title is technically an <h3> (cta-form__right-title) but is sized to
   match visually since it reads as this page's next section title too.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
	.lp-section-title,
	.fcta__title,
	.cta-form__right-title {
		font-size: 1.9rem;
	}

	/* Center the Final CTA's text column (title/desc/button) to match
	   the rest of this page's mobile sections. */
	.cta-form__right {
		text-align: center;
	}

	.cta-form__actions {
		justify-content: center;
	}
}