.process--grid {
	background-image: url('../images/process-placeholder.svg');
	background-position: center;
	background-size: cover;
	border-block: 1px solid var(--line);
}

.process--grid .process__inner {
	padding-block: var(--section-y-compact);
}

.process--grid .process__grid {
	border: var(--s-1) solid var(--mega-media-border);
	background: var(--bg);
}

.process--grid .process__lead {
	display: grid;
	align-content: start;
	gap: var(--s-4);
	padding: var(--s-5);
	border-block-end: 1px solid var(--line);
}

.process--grid .process__eyebrow {
	margin: 0;
	font-size: var(--fs-micro);
	font-weight: var(--fw-ui);
	letter-spacing: var(--tracking-micro);
	text-transform: uppercase;
	color: var(--accent);
}

.process--grid .process__heading {
	margin: 0;
	max-inline-size: var(--w-prose);
}

.process--grid .process__intro {
	margin: 0;
	max-inline-size: var(--w-prose);
	color: var(--ink-500);
}

.process--grid .process__count {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--s-4);
	margin-block-start: var(--s-4);
	padding-block-start: var(--s-4);
	border-block-start: 1px solid var(--line);
	color: var(--ink-500);
}

.process--grid .process__count span {
	font-size: var(--fs-small);
	font-weight: var(--fw-ui);
}

.process--grid .process__count strong {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: var(--fw-display);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--ink-900);
}

.process--grid .process__steps {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

.process--grid .process__step {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: var(--s-4);
	min-inline-size: 0;
	padding: var(--s-5);
	border-block-end: 1px solid var(--line);
}

html.has-motion-reveal .process--grid .process__step[data-motion-reveal="process-left"] {
	opacity: 0;
	transform: translate3d(-28%, 0, 0) scale(0.94);
	transition: opacity var(--motion-slow) var(--motion-ease), transform var(--motion-long) var(--motion-soft-ease);
	transition-delay: var(--motion-delay, 0ms);
	will-change: opacity, transform;
}

html.has-motion-reveal .process--grid .process__step[data-motion-reveal="process-left"].is-motion-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	will-change: auto;
}

.process--grid .process__step:last-child {
	border-block-end: 0;
}

.process--grid .process__step-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
}

.process--grid .process__step-number {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: var(--fw-display);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--ink-900);
}

.process--grid .process__step-icon {
	display: grid;
	place-items: center;
	inline-size: var(--s-8);
	block-size: var(--s-8);
	border: 1px solid var(--line);
	color: var(--accent);
}

.process--grid .process__step-copy {
	display: grid;
	align-content: start;
	gap: var(--s-3);
}

.process--grid .process__label,
.process--grid .process__body,
.process--grid .process__note {
	margin: 0;
}

.process--grid .process__label {
	font-size: var(--fs-h3);
	color: var(--ink-900);
}

.process--grid .process__body {
	max-inline-size: var(--w-prose);
	color: var(--ink-700);
}

.process--grid .process__note {
	padding-block-start: var(--s-4);
	border-block-start: 1px solid var(--line);
	font-size: var(--fs-small);
	font-weight: var(--fw-ui);
	color: var(--ink-500);
}

@media (min-width: 768px) {
	.process--grid .process__inner {
		padding-block: var(--section-y-compact-md);
	}

	.process--grid .process__grid {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.process--grid .process__lead {
		border-block-end: 0;
		border-inline-end: 1px solid var(--line);
	}

	.process--grid .process__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.process--grid .process__step {
		border-block-end: 0;
		border-inline-end: 1px solid var(--line);
	}

	.process--grid .process__step:last-child {
		border-inline-end: 0;
	}
}

@media (min-width: 1024px) {
	.process--grid .process__inner {
		padding-block: var(--section-y-compact-lg);
	}

	.process--grid .process__lead,
	.process--grid .process__step {
		padding: var(--s-6);
	}
}

@media (min-width: 1280px) {
	.process--grid .process__inner {
		padding-block: var(--section-y-compact-xl);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.has-motion-reveal .process--grid .process__step[data-motion-reveal="process-left"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}