.b2b-transfer {
	background: var(--color-navy);
	padding-block: var(--space-9);
}

.b2b-slider {
	display: flex;
	gap: var(--space-5);
	align-items: stretch;
}

/* Progress track — one segment per slide, stacked vertically. Each segment's
   fill exactly mirrors its slide's current opacity (set directly in JS), so
   the track can never drift out of sync with what's actually on screen:
   slide 1 starts fully opaque, so segment 1 starts fully filled too. */
.b2b-slider__track {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	width: 3px;
	flex-shrink: 0;
}

.b2b-slider__segment {
	position: relative;
	flex: 1;
	background: rgba(255, 255, 255, 0.15);
	overflow: hidden;
}

.b2b-slider__segment-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-teal);
	transform: scaleY(0);
	transform-origin: top;
}

.b2b-slider__segment-fill.is-full {
	transform: scaleY(1);
}

.b2b-slider__viewport {
	position: relative;
	flex: 1;
	min-width: 0;
}

.b2b-slider__stage {
	position: relative;
	min-height: 480px;
}

.b2b-slide {
	position: absolute;
	inset: 0;
	display: flex;
	overflow: hidden;
	opacity: 0;
	align-items: center;
}

.b2b-slide.is-active {
	opacity: 1;
}

/* The photo is now the full-bleed background of the whole slide (not a
   side-by-side column) — .b2b-slide__text sits on top of it as a flush,
   full-height card at the left edge (default flex align-items:stretch on
   .b2b-slide is what stretches it to the full height). */
.b2b-slide__text {
	position: relative;
	z-index: 1;
	background: var(--color-white);
	padding: var(--space-9);
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-height: 330px;
}

/* Second slide only — a dark card instead of the default white one. */
.b2b-slide:nth-child(2) .b2b-slide__text {
	background: #252525;
}

.b2b-slide:nth-child(2) .b2b-slide__text p {
	color: var(--color-white);
}

.b2b-slide__text h3 {
	color: var(--color-teal);
	margin-bottom: var(--space-2);
	font-size: 36px;
	line-height: 105%;
	letter-spacing: 0%;
}

.b2b-slide__text p {
	color: var(--color-text-dark);
	font-weight: 400;
	font-size: 16px;
	line-height: 105%;
	letter-spacing: 0%;

}

.b2b-slide__media,
.b2b-slide__media.aspegon-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 768px) {
	/* Track moves above the slider (was to its left, side by side with
	   .b2b-slider__viewport, on desktop) — it's already the first DOM
	   child, so stacking .b2b-slider itself into a column is enough to put
	   it on top with no markup change. */
	.b2b-slider {
		flex-direction: column;
		gap: var(--space-4);
	}

	/* ...and becomes a horizontal bar itself (fills left-to-right, scaleX —
	   see setSegments()'s axis-aware animations.js counterpart) instead of
	   desktop's vertical one (fills top-to-bottom, scaleY). */
	.b2b-slider__track {
		flex-direction: row;
		width: 100%;
		height: 3px;
	}

	.b2b-slider__viewport {
		overflow: hidden;
	}

	.b2b-slide__text {
		max-height: 128px;
		max-width: 90%;
		padding: var(--space-9) var(--space-4);
	}

	/* A real slide-track, side by side — every slide sits next to the
	   previous one (not stacked/absolute like desktop's crossfade) and JS
	   translates this row by -(index * viewport width) plus the live
	   finger-drag offset, so the current slide visually follows a
	   left/right swipe the same way any standard touch carousel does, then
	   snaps to the nearest slide on release. See setupB2BSlider()'s mobile
	   drag handlers in animations.js. */
	.b2b-slider__stage {
		display: flex;
		height: 420px;
		will-change: transform;
	}

	.b2b-slide {
		position: relative;
		inset: auto;
		flex: 0 0 100%;
		width: 100%;
		opacity: 1;
	}
}