/**
 * Services page — Process / How We Work section.
 * Figma: nodes 550:399-429 — label, heading left / steps right.
 */

:root {
	--sp-svc-process-pad-top: clamp(48px, calc(100 / var(--spaciefy-artboard) * 100vw), 100px);
	--sp-svc-process-pad-bottom: clamp(64px, calc(140 / var(--spaciefy-artboard) * 100vw), 140px);
	--sp-svc-process-eyebrow-size: clamp(11px, calc(17.543 / var(--spaciefy-artboard) * 100vw), 17.543px);
	--sp-svc-process-eyebrow-tracking: clamp(3px, calc(5.964 / var(--spaciefy-artboard) * 100vw), 5.964px);
	--sp-svc-process-label-content-gap: clamp(24px, calc(100 / var(--spaciefy-artboard) * 100vw), 100px);
	--sp-svc-process-heading-size: clamp(28px, calc(72 / var(--spaciefy-artboard) * 100vw), 72px);
	--sp-svc-process-heading-lh: 0.83;
	--sp-svc-process-heading-bottom: clamp(16px, calc(29 / var(--spaciefy-artboard) * 100vw), 29px);
	--sp-svc-process-subtext-size: clamp(15px, calc(22 / var(--spaciefy-artboard) * 100vw), 22px);
	--sp-svc-process-subtext-lh: 1.48562;
	--sp-svc-process-subtext-tracking: clamp(0.33px, calc(0.66 / var(--spaciefy-artboard) * 100vw), 0.66px);
	--sp-svc-process-subtext-max: min(100%, clamp(280px, calc(535 / var(--spaciefy-artboard) * 100vw), 535px));
	--sp-svc-process-subtext-bottom: clamp(40px, calc(100 / var(--spaciefy-artboard) * 100vw), 100px);
	--sp-svc-process-step-col-gap: clamp(24px, calc(90 / var(--spaciefy-artboard) * 100vw), 90px);
	--sp-svc-process-step-label-size: clamp(11px, calc(17.543 / var(--spaciefy-artboard) * 100vw), 17.543px);
	--sp-svc-process-step-label-tracking: clamp(3px, calc(5.964 / var(--spaciefy-artboard) * 100vw), 5.964px);
	--sp-svc-process-step-label-bottom: clamp(20px, calc(40 / var(--spaciefy-artboard) * 100vw), 40px);
	--sp-svc-process-step-title-size: clamp(20px, calc(44 / var(--spaciefy-artboard) * 100vw), 44px);
	--sp-svc-process-step-title-lh: 0.96;
	--sp-svc-process-step-title-bottom: clamp(14px, calc(29 / var(--spaciefy-artboard) * 100vw), 29px);
	--sp-svc-process-step-desc-size: clamp(15px, calc(22 / var(--spaciefy-artboard) * 100vw), 22px);
	--sp-svc-process-step-desc-lh: 1.48562;
	--sp-svc-process-step-desc-tracking: clamp(0.33px, calc(0.66 / var(--spaciefy-artboard) * 100vw), 0.66px);
	--sp-svc-process-step-desc-max: min(100%, clamp(260px, calc(431 / var(--spaciefy-artboard) * 100vw), 431px));
	--sp-svc-process-step-foot-top: clamp(32px, calc(70 / var(--spaciefy-artboard) * 100vw), 70px);
	--sp-svc-process-step-row-gap: clamp(32px, calc(48 / var(--spaciefy-artboard) * 100vw), 48px);
	--sp-svc-process-timeline-gap: clamp(20px, calc(32 / var(--spaciefy-artboard) * 100vw), 32px);
	--sp-svc-process-stacked-width: 100%;
	--sp-svc-process-stacked-step-gap: clamp(48px, calc(72 / var(--spaciefy-artboard) * 100vw), 72px);
	--sp-svc-process-stacked-content-max: min(100%, clamp(380px, calc(520 / var(--spaciefy-artboard) * 100vw), 520px));
	--sp-svc-process-dot-size: 6px;
	--sp-svc-process-dot-color: #f9cf0e;
	--sp-svc-process-line-color: #000;
	--sp-svc-process-line-opacity: 0.2;
}

.sp-svc-process {
	background-color: var(--spaciefy-white);
	color: var(--spaciefy-black);
	padding: var(--sp-svc-process-pad-top) 0 var(--sp-svc-process-pad-bottom);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.sp-svc-tech + .sp-svc-process {
	border-top: none;
	padding-top: 0;
}

.sp-svc-process__inner {
	width: var(--spaciefy-container-width);
	max-width: var(--spaciefy-container);
	margin-left: auto;
	margin-right: auto;
}

/* Two-column layout — label left / heading + steps right */
.sp-svc-process__layout {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: var(--sp-svc-process-label-content-gap);
	align-items: start;
}

.sp-svc-process__aside {
	padding: 0;
}

.sp-svc-process__eyebrow {
	display: block;
	margin: 0;
	color: #000;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-svc-process-eyebrow-size);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: var(--sp-svc-process-eyebrow-tracking);
	text-transform: uppercase;
	opacity: 0.4;
}

.sp-svc-process__content {
	min-width: 0;
	padding: 0;
}

.sp-svc-process__intro {
	margin-bottom: var(--sp-svc-process-subtext-bottom);
}

.sp-svc-process__heading {
	margin: 0 0 var(--sp-svc-process-heading-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-svc-process-heading-size);
	font-weight: 500;
	line-height: var(--sp-svc-process-heading-lh);
	color: #000;
}

.sp-svc-process__subtext {
	margin: 0;
	width: var(--sp-svc-process-subtext-max);
	max-width: 100%;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-svc-process-subtext-size);
	font-weight: 300;
	line-height: var(--sp-svc-process-subtext-lh);
	letter-spacing: var(--sp-svc-process-subtext-tracking);
	color: #000;
	opacity: 0.8;
}

/* Steps grid — 3 equal columns, shared timeline line */
.sp-svc-process__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--sp-svc-process-step-col-gap);
	position: relative;
}

.sp-svc-process__steps::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--sp-svc-process-dot-size) / 2);
	height: 1px;
	background-color: var(--sp-svc-process-line-color);
	opacity: var(--sp-svc-process-line-opacity);
	pointer-events: none;
}

.sp-svc-process__step {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sp-svc-process__step-top {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.sp-svc-process__step-label {
	display: block;
	margin-bottom: var(--sp-svc-process-step-label-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-svc-process-step-label-size);
	font-weight: 400;
	line-height: normal;
	letter-spacing: var(--sp-svc-process-step-label-tracking);
	text-transform: uppercase;
	color: #000;
}

.sp-svc-process__step-title {
	margin: 0 0 var(--sp-svc-process-step-title-bottom);
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-svc-process-step-title-size);
	font-weight: 400;
	line-height: var(--sp-svc-process-step-title-lh);
	color: #000;
}

.sp-svc-process__step-description {
	margin: 0;
	width: var(--sp-svc-process-step-desc-max);
	max-width: 100%;
	font-family: var(--spaciefy-font-helvetica);
	font-size: var(--sp-svc-process-step-desc-size);
	font-weight: 300;
	line-height: var(--sp-svc-process-step-desc-lh);
	letter-spacing: var(--sp-svc-process-step-desc-tracking);
	color: #000;
	opacity: 0.8;
}

/* Step foot: yellow dot on shared timeline */
.sp-svc-process__step-foot {
	display: flex;
	align-items: center;
	padding-top: var(--sp-svc-process-step-foot-top);
	position: relative;
	z-index: 1;
}

.sp-svc-process__step-dot {
	display: inline-block;
	width: var(--sp-svc-process-dot-size);
	height: var(--sp-svc-process-dot-size);
	border-radius: 50%;
	background-color: var(--sp-svc-process-dot-color);
	flex-shrink: 0;
}