/* Design services page styles */
.process-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	margin-top: 24px;
}

/* Gutenberg is-layout-flow adds margin-block-start to grid children except the first. */
.process-grid > .process-step {
	margin-block-start: 0;
}

.process-step.is-layout-flow > * {
	margin-block-start: 0;
}

.process-step {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 16px;
	padding: 24px;
	text-align: center;
}

.process-step-number,
.process-step p.process-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--cta);
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	border-radius: 50%;
	margin-bottom: 16px;
}

.process-step::before {
	display: inline-flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--cta);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}

.process-step-1::before { content: "1"; }
.process-step-2::before { content: "2"; }
.process-step-3::before { content: "3"; }
.process-step-4::before { content: "4"; }

.process-step h4 { margin: 0 0 8px 0; font-size: 16px; color: var(--text); }
.process-step p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

.design-contact-email {
	margin-top: 0.5em !important;
}