/* ==========================================================================
   Spartan SEM — "Our Process" scroll timeline
   Markup lives in an Elementor HTML widget; behavior in process-timeline.js.

   States (set by JS on .sp-process):
     .is-ready      JS is running; without it everything shows in its final state
     .is-s1 … .is-s6  cumulative stage classes (one per step reached)
     .is-complete   line has filled to the bottom dot
   ========================================================================== */

.sp-process {
	--sp-ink: #101010;          /* Black */
	--sp-text: #31322B;         /* Dark Olive */
	--sp-accent: #BAFC9B;       /* Accent Green */
	--sp-blueprint: #D3D5C8;    /* Soft Neutral — faint cube outlines before they draw */
	--sp-font-display: "Archivo SemiExpanded", sans-serif; /* loaded on the site: 400, 500, 700 */
	--sp-font-body: "Instrument Sans", sans-serif;

	--sp-cube-col: clamp(240px, 28vw, 340px); /* width of the center column / cube graphic */
	--sp-line-w: 1.5px;
	--sp-dot: 14px;
	--sp-dim: 0.4;              /* opacity of steps not reached yet (desktop) */
	--sp-ease: cubic-bezier(0.65, 0, 0.35, 1);

	color: var(--sp-ink);
	font-family: var(--sp-font-body);
}

.sp-process *,
.sp-process *::before,
.sp-process *::after {
	box-sizing: border-box;
}

/* ---------- Layout (desktop / tablet) ---------- */

.sp-process__timeline {
	position: relative;
	padding: 80px 0 110px;
}

.sp-process .sp-process__steps {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sp-cube-col) minmax(0, 1fr);
	column-gap: clamp(24px, 4vw, 64px);
	row-gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-process .sp-process__step {
	grid-row: var(--i);
	grid-column: 1;
	max-width: 21rem;
	margin: 0;
	padding: 0;
}

.sp-process .sp-process__step:nth-child(even) {
	grid-column: 3;
}

/* ---------- Type ---------- */

.sp-process .sp-process__num {
	display: block;
	margin-bottom: 12px;
	font-family: var(--sp-font-display);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.sp-process .sp-process__title,
.sp-process .sp-process__result-title {
	margin: 0 0 8px;
	color: var(--sp-ink);
	font-family: var(--sp-font-display);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
}

.sp-process .sp-process__desc,
.sp-process .sp-process__result-desc {
	margin: 0;
	color: var(--sp-text);
	font-family: var(--sp-font-body);
	font-size: 16px;
	line-height: 1.5;
}

/* ---------- Center rail ---------- */

.sp-process__rail {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--sp-line-w);
	transform: translateX(-50%);
	pointer-events: none;
}

.sp-process__line,
.sp-process__fill {
	position: absolute;
	top: calc(var(--sp-dot) / 2);
	bottom: var(--sp-dot); /* stops at the end dot's edge so the dot's center can stay transparent */
	left: 0;
	width: 100%;
}

.sp-process__line {
	background: var(--sp-ink);
}

.sp-process__fill {
	background: var(--sp-accent);
	transform-origin: 50% 0;
	will-change: transform;
}

.sp-process.is-ready .sp-process__fill {
	transform: scaleY(0); /* JS overrides inline as you scroll */
}

.sp-process__dot {
	position: absolute;
	left: 50%;
	z-index: 1;
	width: var(--sp-dot);
	height: var(--sp-dot);
	border-radius: 50%;
	transform: translateX(-50%);
}

.sp-process__dot--start {
	top: 0;
	background: var(--sp-ink);
}

.sp-process__dot--end {
	bottom: 0;
	border: var(--sp-line-w) solid var(--sp-ink);
	background: var(--sp-accent);
	transition: background-color 0.4s ease;
}

/* Empty (see-through) until the line reaches it, so it works on any section background. */
.sp-process.is-ready:not(.is-complete) .sp-process__dot--end {
	background: transparent;
}

/* ---------- Cube graphic ---------- */

.sp-process__visual {
	position: absolute;
	top: 40px;
	bottom: 40px;
	left: 50%;
	z-index: 1;
	width: var(--sp-cube-col);
	transform: translateX(-50%);
	pointer-events: none;
}

/* Stays centered in the viewport while the steps scroll past (no scroll hijacking). */
.sp-process__cubes {
	position: sticky;
	top: calc(50vh - var(--sp-cube-col) * 0.485);
}

.sp-process__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.sp-blueprint path {
	fill: none;
	stroke: var(--sp-blueprint);
	stroke-width: 1;
	stroke-linejoin: round;
}

.sp-cube path {
	fill: none;
	stroke: var(--sp-ink);
	stroke-linejoin: round;
}

.sp-cube__outline,
.sp-cube__front {
	stroke-width: 1.5;
	stroke-dasharray: 1 2;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.9s var(--sp-ease);
}

.sp-cube__front {
	transition-delay: 0.3s;
}

.sp-cube__back {
	stroke-width: 0.75;
	transition: opacity 0.5s ease 0.6s;
}

.sp-cube--ghost path {
	stroke-width: 0.75;
}

.sp-cube--d {
	opacity: 0.45;
	transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.5, 0, 0.5, 1);
}

.sp-cube--e {
	opacity: 0.2;
	transition: opacity 0.6s ease;
}

.sp-face {
	fill: var(--sp-accent);
	transition: opacity 0.6s ease;
}

/* ---------- Stages (hidden until the matching step is reached) ----------
   01 Strategy Call    → bottom cube draws in
   02 SEO Audit        → faint "opportunity" cubes appear
   03 Onboarding       → middle cube draws in
   04 Website Project  → top cube draws in
   05 Attribution      → grey cube rises into place
   06 Expand           → top cube's face fills green            */

.sp-process.is-ready:not(.is-s1) .sp-cube--a :is(.sp-cube__outline, .sp-cube__front),
.sp-process.is-ready:not(.is-s3) .sp-cube--b :is(.sp-cube__outline, .sp-cube__front),
.sp-process.is-ready:not(.is-s4) .sp-cube--c :is(.sp-cube__outline, .sp-cube__front) {
	stroke-dashoffset: 1;
}

.sp-process.is-ready:not(.is-s1) .sp-cube--a .sp-cube__back,
.sp-process.is-ready:not(.is-s3) .sp-cube--b .sp-cube__back,
.sp-process.is-ready:not(.is-s4) .sp-cube--c .sp-cube__back,
.sp-process.is-ready:not(.is-s2) :is(.sp-cube--d, .sp-cube--e),
.sp-process.is-ready:not(.is-s6) .sp-face {
	opacity: 0;
}

.sp-process.is-ready:not(.is-s5) .sp-cube--d {
	transform: translateY(63.5px);
}

/* ---------- See Results + CTA ---------- */

.sp-process__result {
	max-width: 22rem;
	margin: 28px auto 0;
	text-align: center;
}

.sp-process .sp-process__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
	padding: 16px 32px;
	border-radius: 999px;
	background: var(--sp-ink);
	color: #FFFFFF;
	font-family: var(--sp-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.sp-process .sp-process__cta:hover {
	background: var(--sp-text);
	color: #FFFFFF;
}

.sp-process .sp-process__cta:focus-visible {
	outline: 2px solid var(--sp-ink);
	outline-offset: 3px;
}

/* ---------- Step dimming (desktop only; remove sp-process--dim-steps in the markup to turn off) ---------- */

@media (min-width: 768px) {
	.sp-process--dim-steps.is-ready :is(.sp-process__step, .sp-process__result) {
		opacity: var(--sp-dim);
		transition: opacity 0.5s ease;
	}

	.sp-process--dim-steps.is-ready .sp-process__step.is-active,
	.sp-process--dim-steps.is-ready.is-complete .sp-process__result {
		opacity: 1;
	}
}

/* ---------- Mobile: cubes on top, two-column staircase, no rail ---------- */

@media (max-width: 767px) {
	.sp-process__timeline {
		padding: 0;
	}

	.sp-process__rail {
		display: none;
	}

	.sp-process__visual {
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		width: min(200px, 60%);
		margin: 0 auto 48px;
		transform: none;
	}

	.sp-process__cubes {
		position: static;
	}

	.sp-process .sp-process__steps {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 0;
	}

	.sp-process .sp-process__step {
		grid-row: var(--i) / span 2;
		padding-bottom: 20px;
	}

	.sp-process .sp-process__step:nth-child(even) {
		grid-column: 2;
	}

	.sp-process .sp-process__num {
		margin-bottom: 10px;
		font-size: 13px;
		font-weight: 500;
	}

	.sp-process .sp-process__title,
	.sp-process .sp-process__result-title {
		font-size: 20px;
	}

	.sp-process .sp-process__desc,
	.sp-process .sp-process__result-desc {
		font-size: 14px;
	}

	.sp-process__result {
		max-width: 13.5rem;
		margin-top: 40px;
		text-align: left;
	}
}

/* ---------- Housekeeping ---------- */

.sp-process.is-init *,
.sp-process.is-init *::before,
.sp-process.is-init *::after {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.sp-process *,
	.sp-process *::before,
	.sp-process *::after {
		transition: none !important;
	}
}