/* ==========================================================================
   Section: Service / How We Engage. Ported verbatim from service-styles.css.
   ========================================================================== */

.engage-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.step {
	position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 32px 30px; display: flex; flex-direction: column; gap: 14px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step-num {
	font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1;
	background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step-phase {
	font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--cyan); background: var(--grad-soft); padding: 5px 11px; border-radius: 100px; width: fit-content;
}
.step h3 { font-size: 21px; }
.step p { font-size: 15px; color: var(--body); line-height: 1.6; }

@media (max-width: 820px) {
	.engage-steps { grid-template-columns: 1fr; }
}