/* ACS Process Section — pinned scroll layout.
   Colours/offsets come from CSS variables set inline on .acs-process:
   --acs-accent, --acs-inactive, --acs-sticky-top
   The outer .acs-process__pin-space is given a tall height by process.js;
   the inner .acs-process__pin sticks while scroll progress plays the steps. */

.acs-process {
	--acs-dot-size: 14px;
	--acs-track-x: 19px; /* dot centre = track x position; ≥12px so the dot + active glow clear the viewport's left clip edge */
	--acs-fade-top: 80px; /* top exit-fade depth; steps start below it so step 1 is never pre-faded */
	--acs-fade-bottom: 36px; /* bottom entry-fade depth; steps end above it so the last step reads in full */
	position: relative;
}

.acs-process__pin-space {
	position: relative;
}

.acs-process__pin {
	position: sticky;
	top: var(--acs-sticky-top, 90px);
	/* Equal breathing room: set the pin offset to header height + bottom gap
	   so the visible gap above matches --acs-bottom-gap below. */
	height: calc(100vh - var(--acs-sticky-top, 90px) - var(--acs-bottom-gap, 50px));
	min-height: 0;
}

/* Left column: heading + steps. Keeping the heading here means its underline
   spans only this column, stopping before the image. */
.acs-process__left {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.acs-process__header {
	flex: 0 0 auto;
	margin-bottom: 32px;
}

/* Selectors carry an ancestor class + tag so they outrank Elementor kit
   rules like `.elementor-kit-8 h2 { font-size: 35px; }`. */
.acs-process h2.acs-process__heading {
	color: var(--acs-accent);
	font-family: "Figtree Bold", "Figtree", sans-serif;
	font-size: 55px;
	font-style: normal;
	font-weight: 700;
	line-height: 110%; /* 60.5px */
	text-transform: uppercase;
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--acs-inactive);
}

.acs-process__layout {
	height: 100%;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 60px;
	align-items: stretch;
}

/* ---- Steps column ---- */

/* Deep top fade so text visibly fades out as it leaves; shallow at the bottom
   where upcoming steps enter. */
.acs-process__steps-viewport {
	flex: 1 1 auto;
	overflow: hidden;
	min-height: 0;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--acs-fade-top), #000 calc(100% - var(--acs-fade-bottom)), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--acs-fade-top), #000 calc(100% - var(--acs-fade-bottom)), transparent 100%);
}

.acs-process__steps {
	position: relative;
	/* Vertical padding = fade depths: at rest, step 1 sits fully below the top
	   fade zone; at the end, the last step sits fully above the bottom one. */
	padding: var(--acs-fade-top) 0 var(--acs-fade-bottom) 52px;
	will-change: transform;
}

.acs-process__track {
	position: absolute;
	left: var(--acs-track-x);
	top: calc(var(--acs-fade-top) + 10px);
	bottom: 22px;
	width: 2px;
	background: var(--acs-inactive);
	transform: translateX(-50%);
}

.acs-process__track-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--acs-accent);
}

.acs-process__step {
	position: relative;
	padding-bottom: 110px;
}

.acs-process__step:last-child {
	padding-bottom: 10px;
}

.acs-process__dot {
	position: absolute;
	left: calc(-52px + var(--acs-track-x));
	top: 6px;
	width: var(--acs-dot-size);
	height: var(--acs-dot-size);
	border-radius: 50%;
	background: var(--acs-inactive);
	transform: translateX(-50%);
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.acs-process__step.is-active .acs-process__dot {
	background: var(--acs-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--acs-accent) 18%, transparent);
}

.acs-process h3.acs-process__step-title {
	color: var(--acs-accent);
	font-family: "Figtree Bold", "Figtree", sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 110%; /* 39.6px */
	text-transform: uppercase;
	margin: 0 0 14px;
}

.acs-process .acs-process__step-text {
	color: var(--acs-accent);
	font-family: "Figtree", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	max-width: 46ch;
}

.acs-process .acs-process__step-text p {
	color: var(--acs-accent);
	font-family: "Figtree", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	margin: 0 0 1em;
}

.acs-process .acs-process__step-text p:last-child {
	margin-bottom: 0;
}

/* Inline (mobile-only) image inside each step */
.acs-process__step-media {
	display: none;
}

/* ---- Image column ---- */

.acs-process__media {
	min-height: 0;
}

.acs-process__media-stack {
	display: grid;
	grid-template-areas: "stack";
	height: 100%;
}

.acs-process__image {
	grid-area: stack;
	margin: 0;
	min-height: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.acs-process__image.is-active {
	opacity: 1;
}

.acs-process__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}

/* ---- Compact mode: the whole process fits on screen ----
   Set by process.js when the steps fit within the viewport (e.g. a short 2-step
   process). The section flows in place instead of pinning, and the block hugs
   the content height (JS sets an explicit px height on the pin) so the image
   matches the text column rather than running the full viewport height. */

.acs-process.is-compact .acs-process__pin {
	position: static;
	height: auto; /* JS sets an explicit px height inline; this is the fallback */
}

.acs-process.is-compact .acs-process__steps-viewport {
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}

.acs-process.is-compact .acs-process__steps {
	padding-top: 6px;
	padding-bottom: 6px;
}

/* ---- Mobile: no pinning, simple stacked flow ---- */

@media (max-width: 900px) {
	.acs-process h2.acs-process__heading {
		font-size: 35px;
	}

	/* No exit mask on mobile, so no need to start the steps below it. */
	.acs-process__steps {
		padding-top: 12px;
	}

	.acs-process__track {
		top: 22px;
	}

	.acs-process__pin {
		position: static;
		height: auto;
		display: block;
	}

	.acs-process__pin-space {
		height: auto !important; /* overrides the JS-set pin height */
	}

	.acs-process__steps-viewport {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.acs-process__steps {
		transform: none !important;
	}

	.acs-process__layout {
		display: block;
	}

	/* Hide the pinned image column; show each step's image inline instead */
	.acs-process__media {
		display: none;
	}

	.acs-process__step-media {
		display: block;
		margin-top: 24px;
	}

	.acs-process__step-media img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		border-radius: 12px;
	}

	.acs-process__step {
		padding-bottom: 60px;
	}
}