/**
 * Services section — Shopify Templates
 *
 * A dark, high-contrast band with a sticky rail and glass service cards.
 * Loaded only on the front page and only when the section is enabled.
 *
 * Animation contract with services.js:
 *   .mt-svc[data-mt-services]      section root
 *   .is-ready                      JS took over — hide-before-reveal is safe
 *   .mt-svc__item.is-in            card revealed
 *   .mt-svc__index a.is-active     rail entry matching the card in view
 *   --mt-thumb                     progress thumb offset, set by JS
 *   --mt-x / --mt-y                pointer position inside a card
 *
 * 1. Shell & background
 * 2. Sticky rail
 * 3. Index / progress
 * 4. Cards
 * 5. Reveal states
 * 6. Responsive
 */

/* ==========================================================================
   1. Shell & background
   ========================================================================== */

:is(.mt-main,:where(.mt-block)) .mt-svc {
	position: relative;
	isolation: isolate;
	border-radius: 28px;
	background:
		radial-gradient(120% 90% at 82% 0%, rgba(214, 255, 87, 0.09), rgba(214, 255, 87, 0) 55%),
		linear-gradient(180deg, #123726 0%, var(--mt-dark) 42%, #0f2f21 100%);
	color: #fff;
	overflow: clip;
}

/* Slow-drifting aura: one composited element, no layout work. */
.mt-svc__aura {
	position: absolute;
	left: 50%;
	top: -28%;
	z-index: -1;
	width: min(1100px, 120%);
	aspect-ratio: 1;
	translate: -50% 0;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(214, 255, 87, 0.16), rgba(214, 255, 87, 0) 62%);
	pointer-events: none;
	animation: mt-svc-drift 26s ease-in-out infinite alternate;
}

@keyframes mt-svc-drift {
	from { transform: translate3d(-4%, 0, 0) scale(1); }
	to { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

.mt-svc__grid {
	position: relative;
	display: grid;
	gap: clamp(32px, 4vw, 64px);
}

/* ==========================================================================
   2. Sticky rail
   ========================================================================== */

.mt-svc__rail-in {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

:is(.mt-main,:where(.mt-block)) .mt-svc .mt-h2 {
	margin: 18px 0 0;
	color: #fff;
	max-width: 14ch;
}

.mt-svc__note {
	margin: 0;
	max-width: 46ch;
	font-family: var(--mt-font-body);
	font-size: 15.5px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.72);
}

.mt-svc__cta {
	margin-top: 4px;
}

.mt-svc__cta-note {
	margin: 14px 0 0;
	font-family: var(--mt-font-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
	max-width: 34ch;
}

/* ==========================================================================
   3. Index / progress
   ========================================================================== */

.mt-svc__index {
	position: relative;
	padding-left: 22px;
}

.mt-svc__index ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mt-svc__index a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px 9px 0;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.52);
	font-family: var(--mt-font-body);
	font-size: 14.5px;
	text-decoration: none;
	transition: color 0.35s ease, transform 0.45s cubic-bezier(0.33, 0.8, 0.4, 1);
}

.mt-svc__index a:hover {
	color: #fff;
	transform: translateX(4px);
}

.mt-svc__index-num {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(214, 255, 87, 0.55);
	transition: color 0.35s ease;
}

.mt-svc__index a.is-active {
	color: #fff;
}

.mt-svc__index a.is-active .mt-svc__index-num {
	color: var(--mt-glow);
}

/* The rail line and its travelling thumb. */
.mt-svc__track {
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.mt-svc__thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: var(--mt-thumb-h, 25%);
	border-radius: 2px;
	background: linear-gradient(180deg, var(--mt-glow), var(--mt-lime));
	transform: translateY(var(--mt-thumb, 0%));
	transition: transform 0.55s cubic-bezier(0.33, 0.8, 0.4, 1), height 0.4s ease;
}

/* ==========================================================================
   4. Cards
   ========================================================================== */

.mt-svc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 18px;
	counter-reset: mt-svc;
}

.mt-svc__card {
	position: relative;
	display: block;
	height: 100%;
	padding: clamp(24px, 3vw, 34px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--mt-radius);
	background: rgba(255, 255, 255, 0.035);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	transition:
		transform 0.5s cubic-bezier(0.33, 0.8, 0.4, 1),
		border-color 0.4s ease,
		background 0.4s ease,
		box-shadow 0.5s cubic-bezier(0.33, 0.8, 0.4, 1);
}

/* Hairline that lights up along the top edge on hover. */
.mt-svc__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--mt-glow), transparent);
	opacity: 0;
	transition: opacity 0.45s ease;
}

/* Pointer-tracked spotlight. Only opacity animates, so it stays cheap. */
.mt-svc__spot {
	position: absolute;
	inset: 0;
	background: radial-gradient(320px circle at var(--mt-x, 50%) var(--mt-y, 0%), rgba(214, 255, 87, 0.14), transparent 62%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.mt-svc__card:hover,
.mt-svc__card:focus-visible {
	transform: translate3d(0, -6px, 0);
	border-color: rgba(214, 255, 87, 0.34);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 42px 70px -46px rgba(0, 0, 0, 0.95);
}

.mt-svc__card:hover::before,
.mt-svc__card:focus-visible::before {
	opacity: 1;
}

.mt-svc__card:hover .mt-svc__spot {
	opacity: 1;
}

/* Head row: icon, number, timeline */
.mt-svc__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
}

.mt-svc__badge {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 15px;
	background: rgba(214, 255, 87, 0.14);
	border: 1px solid rgba(214, 255, 87, 0.28);
	color: var(--mt-glow);
	transition: transform 0.5s cubic-bezier(0.33, 0.8, 0.4, 1), background 0.4s ease, color 0.4s ease;
}

.mt-svc__badge svg {
	width: 22px;
	height: 22px;
}

.mt-svc__card:hover .mt-svc__badge {
	transform: scale(1.06);
	background: var(--mt-glow);
	color: var(--mt-dark);
}

.mt-svc__num {
	font-family: var(--mt-font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.4);
}

.mt-svc__meta {
	margin-left: auto;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	font-family: var(--mt-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.72);
	white-space: nowrap;
}

.mt-svc__title {
	position: relative;
	margin: 26px 0 0;
	font-size: clamp(21px, 2.1vw, 26px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.7px;
	color: #fff;
	max-width: 18ch;
}

.mt-svc__text {
	position: relative;
	margin: 14px 0 0;
	max-width: 54ch;
	font-family: var(--mt-font-body);
	font-size: 15px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.7);
}

/* Deliverables */
.mt-svc__deliverables {
	position: relative;
	display: grid;
	gap: 10px 22px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.mt-svc__deliverables li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--mt-font-body);
	font-size: 14px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.78);
}

.mt-svc__tick {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	flex: none;
	border-radius: 50%;
	background: rgba(214, 255, 87, 0.16);
	color: var(--mt-glow);
}

.mt-svc__tick svg {
	width: 10px;
	height: 10px;
}

/* Link */
.mt-svc__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	font-family: var(--mt-font-body);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.mt-svc__link-label {
	position: relative;
}

.mt-svc__link-label::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s cubic-bezier(0.33, 0.8, 0.4, 1);
}

.mt-svc__card:hover .mt-svc__link-label::after {
	transform: scaleX(1);
	transform-origin: left;
}

.mt-svc__arrow {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	overflow: hidden;
	transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

.mt-svc__arrow svg {
	width: 16px;
	height: 16px;
	transition: transform 0.45s cubic-bezier(0.33, 0.8, 0.4, 1);
}

.mt-svc__card:hover .mt-svc__arrow {
	background: var(--mt-glow);
	border-color: var(--mt-glow);
	color: var(--mt-dark);
}

.mt-svc__card:hover .mt-svc__arrow svg {
	transform: translateX(3px);
}

/* Featured card — the service you want quoted most */
.mt-svc__card.is-featured {
	background: linear-gradient(160deg, var(--mt-lime) 0%, #8ab53f 100%);
	border-color: rgba(255, 255, 255, 0.2);
	color: var(--mt-dark);
}

.mt-svc__card.is-featured .mt-svc__title,
.mt-svc__card.is-featured .mt-svc__link {
	color: var(--mt-dark);
}

.mt-svc__card.is-featured .mt-svc__text,
.mt-svc__card.is-featured .mt-svc__deliverables li {
	color: rgba(18, 55, 42, 0.84);
}

.mt-svc__card.is-featured .mt-svc__num {
	color: rgba(18, 55, 42, 0.55);
}

.mt-svc__card.is-featured .mt-svc__meta {
	border-color: rgba(18, 55, 42, 0.28);
	color: rgba(18, 55, 42, 0.8);
}

.mt-svc__card.is-featured .mt-svc__badge {
	background: var(--mt-dark);
	border-color: var(--mt-dark);
	color: var(--mt-glow);
}

.mt-svc__card.is-featured:hover .mt-svc__badge {
	background: var(--mt-dark-deep);
	color: #fff;
}

.mt-svc__card.is-featured .mt-svc__tick {
	background: rgba(18, 55, 42, 0.16);
	color: var(--mt-dark);
}

.mt-svc__card.is-featured .mt-svc__arrow {
	background: var(--mt-dark);
	border-color: var(--mt-dark);
	color: #fff;
}

.mt-svc__card.is-featured:hover {
	border-color: rgba(18, 55, 42, 0.3);
}

.mt-svc__card.is-featured .mt-svc__spot {
	background: radial-gradient(320px circle at var(--mt-x, 50%) var(--mt-y, 0%), rgba(255, 255, 255, 0.24), transparent 62%);
}

.mt-svc__card.is-featured::before {
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
}

/* ==========================================================================
   5. Reveal states
   --------------------------------------------------------------------------
   Cards are only hidden once JS confirms it can animate them (`.is-ready`),
   so a failed script or a blocked CDN can never leave the section blank.
   ========================================================================== */

.mt-svc.is-ready .mt-svc__item {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
	will-change: transform, opacity;
}

.mt-svc.is-ready .mt-svc__item.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

.mt-no-anim .mt-svc.is-ready .mt-svc__item,
.mt-no-anim .mt-svc__item {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mt-svc.is-ready .mt-svc__item {
		opacity: 1;
		transform: none;
	}

	.mt-svc__aura {
		animation: none;
	}

	.mt-svc__card:hover {
		transform: none;
	}
}

/* ==========================================================================
   6. Responsive
   ========================================================================== */

@media (min-width: 760px) {
	.mt-svc__deliverables {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1100px) {
	:is(.mt-main,:where(.mt-block)) .mt-svc {
		border-radius: 40px;
	}

	.mt-svc__grid {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		align-items: start;
	}

	.mt-svc__rail-in {
		position: sticky;
		top: calc(var(--mt-nav-h, 78px) + 24px);
	}

	.mt-svc__list {
		gap: 22px;
	}

	/* Cards overlap slightly as they stack, which reads as depth while you
	   scroll and keeps four services inside one screen height. */
	.mt-svc__item:not(:first-child) .mt-svc__card {
		margin-top: -2px;
	}
}

/* ==========================================================================
   7. Rail alignment & rhythm fixes
   --------------------------------------------------------------------------
   The rail is a flex column, so its children stretched to full width — the
   eyebrow pill and the CTA button both need to hug their content.
   ========================================================================== */

.mt-svc__rail-in {
	align-items: flex-start;
}

.mt-svc__rail-in > .mt-eyebrow {
	align-self: flex-start;
	flex: none;
}

.mt-svc__index {
	align-self: stretch;
}

.mt-svc__cta .mt-btn {
	align-self: flex-start;
}

/* A little more air between the description and the deliverables list. */
.mt-svc__deliverables {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.mt-svc__card.is-featured .mt-svc__deliverables {
	border-top-color: rgba(18, 55, 42, 0.16);
}

/* ==========================================================================
   8. Sticky stack
   --------------------------------------------------------------------------
   The rail pins while the cards ride up and stack on top of each other, each
   one settling 14px lower than the last so the covered cards keep a visible
   edge. Pure CSS `position: sticky` does the stacking, so the effect survives
   with JavaScript disabled; GSAP only adds the depth (a covered card shrinks
   very slightly, which is what makes the pile read as physical).

   Cards must be opaque for this to work — a translucent card would show the
   one underneath through its own body.
   ========================================================================== */

:root {
	--mt-svc-top: calc(var(--mt-nav-h, 78px) + 26px);
	--mt-svc-step: 14px;
}

@media (min-width: 900px) {
	.mt-svc__list {
		display: block;
		padding-bottom: 6vh;
	}

	.mt-svc__item {
		position: sticky;
		top: calc(var(--mt-svc-top) + (var(--mt-i, 0) * var(--mt-svc-step)));
		margin-bottom: 22px;
	}

	.mt-svc__item:last-child {
		margin-bottom: 0;
	}

	/* Opaque surfaces + a lifted top edge sell the stack. */
	.mt-svc__card {
		background: linear-gradient(180deg, #17402d 0%, #123626 100%);
		box-shadow:
			0 -1px 0 0 rgba(255, 255, 255, 0.06) inset,
			0 -26px 60px -34px rgba(0, 0, 0, 0.9);
		transform-origin: 50% 0;
	}

	.mt-svc__card.is-featured {
		background: linear-gradient(165deg, #a8cf55 0%, var(--mt-lime) 45%, #82ad39 100%);
	}

	.mt-svc__card:hover,
	.mt-svc__card:focus-visible {
		background: linear-gradient(180deg, #1a4732 0%, #143b29 100%);
	}

	.mt-svc__card.is-featured:hover {
		background: linear-gradient(165deg, #b3d962 0%, var(--mt-lime-bright) 45%, #8ab53f 100%);
	}

	/* The rail sits at the same height as the first card. */
	.mt-svc__rail-in {
		top: var(--mt-svc-top);
	}
}

/* Reduced motion: no stacking, just a plain readable list. */
@media (prefers-reduced-motion: reduce) {
	.mt-svc__item {
		position: static;
	}
}

/* The rail column must span the full row height, otherwise its sticky child
   has no track to travel along and scrolls away with the first card. */
@media (min-width: 1100px) {
	.mt-svc__grid {
		align-items: stretch;
	}

	.mt-svc__rail {
		align-self: stretch;
		height: 100%;
	}

	.mt-svc__rail-in {
		position: sticky;
		top: var(--mt-svc-top);
	}
}

/* ==========================================================================
   9. Card tones
   --------------------------------------------------------------------------
   One recoloured card in a row of dark ones read as an odd one out. Instead
   each card now carries its own soft surface, so when the stack slides the
   change of layer is obvious — that is the whole point of the effect — while
   the row still reads as one family.

   Every tone is a low-saturation tint of the brand palette, and all of them
   use the same dark ink for text, so contrast stays consistent (all pairs are
   well above 4.5:1).

   The card the agency most wants quoted is now flagged with a small pill
   rather than a different colour.
   ========================================================================== */

.mt-svc__card {
	--mt-card-bg: linear-gradient(180deg, #17402d 0%, #123626 100%);
	--mt-card-bg-hover: linear-gradient(180deg, #1a4732 0%, #143b29 100%);
	--mt-card-ink: #ffffff;
	--mt-card-muted: rgba(255, 255, 255, 0.72);
	--mt-card-line: rgba(255, 255, 255, 0.14);
	--mt-card-chip: rgba(255, 255, 255, 0.1);
	--mt-card-accent: var(--mt-dark);
	--mt-card-accent-ink: var(--mt-glow);
	--mt-card-spot: rgba(214, 255, 87, 0.16);
}

.mt-svc__card--lime {
	--mt-card-bg: linear-gradient(168deg, #f0f6cf 0%, #e3efb9 100%);
	--mt-card-bg-hover: linear-gradient(168deg, #f5f9dc 0%, #e9f3c6 100%);
}

.mt-svc__card--sage {
	--mt-card-bg: linear-gradient(168deg, #d8ebe2 0%, #c7e0d6 100%);
	--mt-card-bg-hover: linear-gradient(168deg, #e1f1e9 0%, #d1e7de 100%);
}

.mt-svc__card--sand {
	--mt-card-bg: linear-gradient(168deg, #f4e9d5 0%, #ebdcbe 100%);
	--mt-card-bg-hover: linear-gradient(168deg, #f8efdf 0%, #f0e4ca 100%);
}

.mt-svc__card--mist {
	--mt-card-bg: linear-gradient(168deg, #dde7f0 0%, #cbd9e6 100%);
	--mt-card-bg-hover: linear-gradient(168deg, #e6eef5 0%, #d5e1ec 100%);
}

/* Shared ink for every light tone. */
.mt-svc__card--lime,
.mt-svc__card--sage,
.mt-svc__card--sand,
.mt-svc__card--mist {
	--mt-card-ink: var(--mt-dark);
	--mt-card-muted: rgba(18, 55, 42, 0.76);
	--mt-card-line: rgba(18, 55, 42, 0.14);
	--mt-card-chip: rgba(18, 55, 42, 0.06);
	--mt-card-accent: var(--mt-dark);
	--mt-card-accent-ink: #ffffff;
	--mt-card-spot: rgba(255, 255, 255, 0.5);
}

.mt-svc__card--forest {
	--mt-card-bg: linear-gradient(180deg, #17402d 0%, #123626 100%);
}

/* Apply the tokens ------------------------------------------------------- */

:is(.mt-main,:where(.mt-block)) .mt-svc__card,
:is(.mt-main,:where(.mt-block)) .mt-svc__card.is-featured {
	background: var(--mt-card-bg);
	color: var(--mt-card-ink);
	border-color: var(--mt-card-line);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__card:hover,
:is(.mt-main,:where(.mt-block)) .mt-svc__card:focus-visible,
:is(.mt-main,:where(.mt-block)) .mt-svc__card.is-featured:hover {
	background: var(--mt-card-bg-hover);
	border-color: var(--mt-card-line);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__title,
:is(.mt-main,:where(.mt-block)) .mt-svc__link {
	color: var(--mt-card-ink);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__text,
:is(.mt-main,:where(.mt-block)) .mt-svc__deliverables li {
	color: var(--mt-card-muted);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__num {
	color: var(--mt-card-muted);
	opacity: 0.7;
}

:is(.mt-main,:where(.mt-block)) .mt-svc__meta {
	border-color: var(--mt-card-line);
	color: var(--mt-card-muted);
	background: var(--mt-card-chip);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__deliverables {
	border-top-color: var(--mt-card-line);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__badge {
	background: var(--mt-card-accent);
	border-color: var(--mt-card-accent);
	color: var(--mt-card-accent-ink);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__card:hover .mt-svc__badge {
	background: var(--mt-dark-deep);
	color: var(--mt-card-accent-ink);
	transform: scale(1.06);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__tick {
	background: var(--mt-card-chip);
	color: var(--mt-card-accent);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__card--forest .mt-svc__tick,
:is(.mt-main,:where(.mt-block)) .mt-svc__card:not([class*="mt-svc__card--"]) .mt-svc__tick {
	color: var(--mt-glow);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__arrow {
	border-color: var(--mt-card-line);
	color: var(--mt-card-ink);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__card:hover .mt-svc__arrow {
	background: var(--mt-card-accent);
	border-color: var(--mt-card-accent);
	color: var(--mt-card-accent-ink);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__spot {
	background: radial-gradient(320px circle at var(--mt-x, 50%) var(--mt-y, 0%), var(--mt-card-spot), transparent 62%);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__card::before {
	background: linear-gradient(90deg, transparent, var(--mt-card-accent), transparent);
	opacity: 0;
}

/* "Most requested" flag — emphasis without breaking the colour rhythm. */
.mt-svc__flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--mt-card-accent);
	color: var(--mt-card-accent-ink);
	font-family: var(--mt-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mt-svc__flag::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.mt-svc__card.is-featured {
	box-shadow: 0 0 0 1px var(--mt-card-accent) inset;
}

/* On desktop the stack needs the opaque surfaces the tokens already provide. */
@media (min-width: 900px) {
	:is(.mt-main,:where(.mt-block)) .mt-svc__card {
		background: var(--mt-card-bg);
	}

	:is(.mt-main,:where(.mt-block)) .mt-svc__card:hover {
		background: var(--mt-card-bg-hover);
	}
}

@media (max-width: 640px) {
	.mt-svc__flag {
		order: 3;
		margin-left: auto;
	}

	.mt-svc__meta {
		order: 4;
		margin-left: 0;
	}

	.mt-svc__head {
		flex-wrap: wrap;
		gap: 10px;
	}
}

/* ==========================================================================
   10. Clickable card + cursor glow
   --------------------------------------------------------------------------
   The whole card is the link (one anchor, no nested links — the label and
   arrow inside are spans styled to look like a link, which keeps the markup
   valid and gives the card a single focus stop).

   The cursor glow was still in the CSS but had become invisible: on the new
   pastel tones it was painting white-on-white. Each tone now carries its own
   glow colour, and the JS eases the position instead of snapping to it.
   ========================================================================== */

.mt-svc__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	cursor: pointer;
}

/* Everything above the link stays in flow; the link is pushed to the bottom
   so a row of cards with different text lengths still lines up. */
.mt-svc__link {
	margin-top: auto;
	padding-top: 26px;
	align-self: flex-start;
}

.mt-svc__deliverables {
	margin-bottom: 0;
}

/* Glow colour per tone — a lime wash on the light surfaces, the brighter
   accent on the dark one. */
.mt-svc__card--lime { --mt-card-spot: rgba(115, 158, 32, 0.38); }
.mt-svc__card--sage { --mt-card-spot: rgba(46, 133, 97, 0.32); }
.mt-svc__card--sand { --mt-card-spot: rgba(168, 124, 44, 0.3); }
.mt-svc__card--mist { --mt-card-spot: rgba(58, 108, 162, 0.3); }
.mt-svc__card--forest { --mt-card-spot: rgba(214, 255, 87, 0.2); }

:is(.mt-main,:where(.mt-block)) .mt-svc__spot {
	background: radial-gradient(
		460px circle at var(--mt-x, 50%) var(--mt-y, 0%),
		var(--mt-card-spot),
		transparent 60%
	);
	opacity: 0;
	transition: opacity 0.45s ease;
	z-index: 0;
}

:is(.mt-main,:where(.mt-block)) .mt-svc__card:hover .mt-svc__spot,
:is(.mt-main,:where(.mt-block)) .mt-svc__card:focus-visible .mt-svc__spot,
:is(.mt-main,:where(.mt-block)) .mt-svc__card.is-hot .mt-svc__spot {
	opacity: 1;
}

/* Content sits above the glow. */
.mt-svc__head,
.mt-svc__title,
.mt-svc__text,
.mt-svc__deliverables,
.mt-svc__link {
	position: relative;
	z-index: 1;
}

/* A card without a URL is not a link, so it should not pretend to be one. */
.mt-svc__card:not(a) {
	cursor: default;
}

.mt-svc__card:not(a) .mt-svc__link {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	:is(.mt-main,:where(.mt-block)) .mt-svc__spot {
		display: none;
	}
}

/* ==========================================================================
   11. Card outline
   --------------------------------------------------------------------------
   All four cards now carry the crisp outline that previously only sat on the
   "most requested" card, so the stack reads as one set of framed panels. The
   featured card keeps its emphasis through the pill and a slightly heavier
   ring instead of being the only outlined one.

   The outline is a token, so the dark "forest" tone flips it to a light
   hairline rather than drawing dark-on-dark.
   ========================================================================== */

.mt-svc__card {
	--mt-card-border: rgba(255, 255, 255, 0.16);
	--mt-card-border-hover: rgba(214, 255, 87, 0.55);
}

.mt-svc__card--lime,
.mt-svc__card--sage,
.mt-svc__card--sand,
.mt-svc__card--mist {
	--mt-card-border: rgba(18, 55, 42, 0.55);
	--mt-card-border-hover: var(--mt-dark);
}

:is(.mt-main,:where(.mt-block)) .mt-svc__card,
:is(.mt-main,:where(.mt-block)) .mt-svc__card.is-featured {
	border: 1px solid var(--mt-card-border);
	box-shadow: none;
}

:is(.mt-main,:where(.mt-block)) .mt-svc__card:hover,
:is(.mt-main,:where(.mt-block)) .mt-svc__card:focus-visible,
:is(.mt-main,:where(.mt-block)) .mt-svc__card.is-featured:hover {
	border-color: var(--mt-card-border-hover);
}

/* The featured card: same frame, one shade heavier. */
:is(.mt-main,:where(.mt-block)) .mt-svc__card.is-featured {
	box-shadow: 0 0 0 1px var(--mt-card-border) inset;
}

/* Keep the stack's lifted top edge and drop shadow on desktop. */
@media (min-width: 900px) {
	:is(.mt-main,:where(.mt-block)) .mt-svc__card {
		box-shadow: 0 -26px 60px -34px rgba(0, 0, 0, 0.9);
	}

	:is(.mt-main,:where(.mt-block)) .mt-svc__card.is-featured {
		box-shadow:
			0 0 0 1px var(--mt-card-border) inset,
			0 -26px 60px -34px rgba(0, 0, 0, 0.9);
	}

	:is(.mt-main,:where(.mt-block)) .mt-svc__card:hover {
		box-shadow: 0 42px 70px -46px rgba(0, 0, 0, 0.95);
	}
}