/* Homepage layout corrections for WordPress constrained-layout inheritance.
 * Keep homepage rails aligned to the 1280px page rail and restore the intended
 * process-card treatment without loading the full services stylesheet.
 */

/* WordPress constrains ordinary children of an is-layout-constrained block to
 * the global 780px content width. These homepage modules are intentionally wide. */
.mm-home-page .mm-home-work-grid,
.mm-home-page .mm-home-insights-grid,
.mm-home-page .mm-home-trust__facts,
.mm-home-page .mm-home-trust .mm-home-svg,
.mm-home-page .mm-home-process .mm-services-process__rail {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* PROOF / case-study cards: use the entire homepage rail instead of collapsing
 * to the global content width and leaving large empty gutters. */
.mm-home-page .mm-home-work .mm-home-work-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 1.15rem !important;
	align-items: stretch;
}

.mm-home-page .mm-home-work .mm-work-card {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	height: 100%;
	box-sizing: border-box;
}

/* Trust/proof strip below the hero: stretch all four proof items across the same
 * visual rail as the hero and subsequent homepage sections. */
.mm-home-page .mm-home-trust > .alignwide {
	width: min(1280px, calc(100% - 2rem)) !important;
	max-width: 1280px !important;
	margin-inline: auto !important;
}

.mm-home-page .mm-home-trust__facts {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 0 !important;
}

.mm-home-page .mm-home-trust__facts > .wp-block-column {
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}

/* HOW THE ENGAGEMENT MOVES: the homepage markup reuses service-process class
 * names, but services.css is intentionally not loaded on the homepage. Give the
 * homepage its own complete treatment so the steps do not render as plain text. */
.mm-home-page .mm-home-process .mm-home-section-heading {
	max-width: 1040px !important;
	margin-bottom: 2.25rem !important;
}

.mm-home-page .mm-home-process .mm-home-section-heading h2 {
	max-width: 980px !important;
	margin: .45rem 0 1rem !important;
	color: #fff !important;
	font-size: clamp(2.9rem, 4.6vw, 4.9rem) !important;
	line-height: .98 !important;
	letter-spacing: -.045em !important;
}

.mm-home-page .mm-home-process .mm-home-section-heading > p:not(.mm-eyebrow) {
	max-width: 960px !important;
	color: #c5d6ea !important;
	font-size: clamp(1rem, 1.2vw, 1.1rem) !important;
	line-height: 1.72 !important;
}

.mm-home-page .mm-home-process .mm-services-process__rail {
	position: relative;
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 1.1rem !important;
	margin-top: 0 !important;
}

.mm-home-page .mm-home-process .mm-services-process__rail::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 31px;
	left: 7%;
	right: 7%;
	height: 1px;
	background: linear-gradient(90deg, #00c8f4, #176df5, #5144f8);
	opacity: .34;
}

.mm-home-page .mm-home-process .mm-process-step {
	position: relative;
	z-index: 1;
	min-width: 0;
	min-height: 225px;
	padding: 1.45rem 1.4rem 1.5rem;
	border: 1px solid rgba(96, 157, 235, .28);
	border-radius: 22px;
	background:
		radial-gradient(circle at 92% 10%, rgba(0, 200, 244, .09), transparent 30%),
		linear-gradient(160deg, rgba(10, 42, 98, .78), rgba(6, 20, 46, .9));
	box-shadow: 0 18px 44px rgba(0, 7, 24, .22);
	box-sizing: border-box;
}

.mm-home-page .mm-home-process .mm-process-step > span {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0 0 1.15rem;
	border: 1px solid rgba(121, 233, 255, .55);
	border-radius: 50%;
	background: linear-gradient(145deg, #0b2a5f, #07152d);
	color: #7ce8ff;
	font-size: .76rem;
	font-weight: 900;
	letter-spacing: .07em;
	box-shadow: 0 0 0 6px rgba(7, 26, 56, .88), 0 0 26px rgba(0, 200, 244, .14);
}

.mm-home-page .mm-home-process .mm-process-step strong {
	display: block;
	margin: .15rem 0 .65rem;
	color: #fff !important;
	font-size: 1.22rem;
	line-height: 1.2;
}

.mm-home-page .mm-home-process .mm-process-step p {
	margin: 0;
	color: #bccde2 !important;
	font-size: .96rem;
	line-height: 1.62;
}

/* The old decorative SVG rail sat beneath the unstyled text steps. The card rail
 * above now carries the progression visually, so the duplicate rail is removed. */
.mm-home-page .mm-home-process .mm-home-svg--home-process-flow {
	display: none !important;
}

@media (max-width: 900px) {
	.mm-home-page .mm-home-work .mm-home-work-grid {
		grid-template-columns: 1fr !important;
	}

	.mm-home-page .mm-home-trust__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: .75rem !important;
	}

	.mm-home-page .mm-home-process .mm-services-process__rail {
		grid-template-columns: 1fr !important;
	}

	.mm-home-page .mm-home-process .mm-services-process__rail::before {
		display: none;
	}

	.mm-home-page .mm-home-process .mm-process-step {
		min-height: 0;
	}
}

@media (max-width: 620px) {
	.mm-home-page .mm-home-trust > .alignwide {
		width: 100% !important;
	}

	.mm-home-page .mm-home-trust__facts {
		grid-template-columns: 1fr !important;
	}

	.mm-home-page .mm-home-process .mm-home-section-heading h2 {
		font-size: clamp(2.5rem, 12vw, 3.6rem) !important;
	}
}
