/* ==========================================================================
   MaxxedOut — Services grid
   ========================================================================== */

.mxo-scope.mxo-services {
	--svc-cols: 3;
	--svc-ratio: 0.68;
	--svc-card: var(--mx-white);
}
.mxo-scope.mxo-services.mxo-surface--white { --svc-card: var(--mx-mist); }
.mxo-scope.mxo-services.mxo-surface--navy { --svc-card: var(--mx-navy-2); }

.mxo-scope .mxo-services__grid {
	display: grid;
	grid-template-columns: repeat(var(--svc-cols), minmax(0, 1fr));
	gap: 28px;
}

.mxo-scope .mxo-svc {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--svc-card);
	border-radius: var(--mx-radius-lg);
	transition:
		opacity 0.95s var(--mx-ease-expo) var(--d, 0ms),
		transform 0.95s var(--mx-ease-expo) var(--d, 0ms),
		box-shadow 0.5s var(--mx-ease);
}
.mxo-scope .mxo-svc.is-in:hover {
	transform: translate3d(0, -8px, 0);
	transition-delay: 0ms;
	box-shadow: var(--mx-shadow);
}
/* brand bar that draws along the bottom on hover */
.mxo-scope .mxo-svc::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--mx-blue) 0 78%, var(--mx-grey) 78% 100%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s var(--mx-ease-expo);
}
.mxo-scope .mxo-svc:hover::after { transform: scaleX(1); }

.mxo-scope .mxo-svc__hit {
	position: absolute;
	inset: 0;
	z-index: 4;
}

.mxo-scope .mxo-svc__media {
	aspect-ratio: 1 / var(--svc-ratio);
	clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
}
.mxo-scope .mxo-svc__media img {
	transition: transform 1.8s var(--mx-ease-expo) calc(var(--d, 0ms) + 200ms), filter 0.6s var(--mx-ease);
}
.mxo-scope .mxo-svc:hover .mxo-svc__media img {
	transform: scale(1.07);
	transition: transform 1.2s var(--mx-ease-expo), filter 0.6s var(--mx-ease);
}
.mxo-scope .mxo-svc__media .mxo-media__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 15, 44, 0) 40%, rgba(10, 15, 44, 0.55) 100%);
	transition: background-color 0.5s var(--mx-ease);
}
.mxo-scope .mxo-svc:hover .mxo-svc__media .mxo-media__inner::after { background-color: rgba(40, 55, 146, 0.18); }

.mxo-scope .mxo-svc__num {
	position: absolute;
	top: 18px;
	right: 22px;
	z-index: 2;
	font-size: 46px;
	font-weight: 800;
	font-stretch: 125%;
	line-height: 1;
	letter-spacing: -0.02em;
	color: transparent;
	-webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.85);
	transition: color 0.4s var(--mx-ease);
}
.mxo-scope .mxo-svc:hover .mxo-svc__num { color: rgba(255, 255, 255, 0.95); }

.mxo-scope .mxo-svc__tag {
	position: absolute;
	top: 22px;
	left: 22px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 14px;
	font-size: 11.5px;
	font-weight: 700;
	font-stretch: 118%;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mx-white);
	background: rgba(10, 15, 44, 0.6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.mxo-scope .mxo-svc__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	flex: 1;
	padding: 0 30px 32px;
}
.mxo-scope .mxo-svc__icon {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin-top: -36px;
	margin-bottom: 6px;
	color: var(--mx-white);
	background: var(--mx-blue);
	clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
	transition: background-color 0.4s var(--mx-ease);
}
.mxo-scope .mxo-svc__icon .mxo-ico {
	width: 27px;
	height: 27px;
	stroke-width: 1.6;
}
.mxo-scope .mxo-svc__icon .mxo-ico--img { object-fit: contain; }
.mxo-scope .mxo-svc:hover .mxo-svc__icon { background: var(--mx-navy); }
.mxo-scope.mxo-surface--navy .mxo-svc:hover .mxo-svc__icon { background: var(--mx-blue-hi); }
.mxo-scope .mxo-svc:hover .mxo-svc__icon .mxo-ico { animation: mxo-svc-pop 0.6s var(--mx-ease-back); }
@keyframes mxo-svc-pop {
	0% { transform: scale(1) rotate(0); }
	40% { transform: scale(0.82) rotate(-8deg); }
	100% { transform: scale(1) rotate(0); }
}

.mxo-scope .mxo-svc__title {
	font-size: 23px;
	font-weight: 720;
	font-stretch: 104%;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--s-ink);
	transition: color 0.3s var(--mx-ease);
}
.mxo-scope .mxo-svc:hover .mxo-svc__title { color: var(--s-accent); }
.mxo-scope .mxo-svc__text {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--s-body);
}
.mxo-scope .mxo-svc__more { margin-top: auto; padding-top: 10px; }
.mxo-scope .mxo-svc:hover .mxo-svc__more .mxo-ico { transform: translateX(6px); }

/* Without photos: compact icon cards */
.mxo-scope .mxo-svc:not(:has(.mxo-svc__media)) .mxo-svc__body { padding-top: 34px; }
.mxo-scope .mxo-svc:not(:has(.mxo-svc__media)) .mxo-svc__icon { margin-top: 0; }

@media (max-width: 1024px) {
	.mxo-scope.mxo-services { --svc-cols: 2; }
	.mxo-scope .mxo-services__grid { gap: 22px; }
}
@media (max-width: 767px) {
	.mxo-scope.mxo-services { --svc-cols: 1; }
	.mxo-scope .mxo-svc__body { padding: 0 24px 28px; }
	.mxo-scope .mxo-svc__title { font-size: 22px; }
	.mxo-scope .mxo-svc__num { font-size: 38px; }
}