/* =========================================================================
   Momentum Condition / Service page template
   ========================================================================= */

.msh-page {
	/* Local aliases so the theme's values win, with a fallback if it defines none. */
	--p: var(--pColor, #13284a);
	--a: var(--aColor, #b9873c);
	--s: var(--sColor, #2f7c96);

	/* Derived tones — all color-mix of the three above. */
	--msh-ink:     color-mix(in srgb, var(--p) 82%, #fff);
	--msh-soft:    color-mix(in srgb, var(--s) 7%, #fff);
	--msh-disc:    color-mix(in srgb, var(--s) 13%, #fff);
	--msh-line:    color-mix(in srgb, var(--s) 22%, #fff);
	--msh-link:    color-mix(in srgb, var(--s) 68%, #fff);
	--msh-a-dark:  color-mix(in srgb, var(--a) 86%, #000);

	--msh-font-display: Georgia, "Times New Roman", "Noto Serif", serif;.msh-intro
	
	--msh-shell:        1200px;

	color: var(--msh-ink);
	overflow-x: clip;
}

/* Fallback for engines without color-mix(): the three colours still apply,
   the derived tones degrade to neutral greys rather than breaking. */
@supports not (color: color-mix(in srgb, red 50%, #fff)) {
	.msh-page {
		--msh-ink:    #3f5570;
		--msh-soft:   #f5f8f9;
		--msh-disc:   #eef4f7;
		--msh-line:   #dde5ec;
		--msh-link:   #7ea8c4;
		--msh-a-dark: #a3742f;
	}
}

.msh-page *,
.msh-page *::before,
.msh-page *::after { box-sizing: border-box; }

.msh-shell {
	width: 100%;
	max-width: var(--msh-shell);
	margin-inline: auto;
	padding-inline: 24px;
}

/* Icons: sized by the parent's font-size, coloured by currentColor. */
.msh-icon {
	width: 1em;
	height: 1em;
	display: block;
	flex: none;
}

/* -------------------------------------------------------------------------
   Hero — 50 / 50 split
   ---------------------------------------------------------------------- */
.msh-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}

.msh-hero__media {
	position: relative;
	min-height: 420px;
}

.msh-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.msh-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px);
}

.msh-hero--no-media {
	grid-template-columns: 1fr;
}

.msh-hero--no-media .msh-hero__body {
	max-width: var(--msh-shell);
	margin-inline: auto;
	width: 100%;
}

.msh-eyebrow {
	position: relative;
	margin: 0 0 12px;
	padding-left: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--s);
}

.msh-eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 14px;
	background: var(--s);
}

.msh-title {
	margin: 0;
	font-family: var(--msh-font-display);
	font-size: clamp(2.2rem, 3.6vw, 3.1rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--p);
}

.msh-rule {
	display: block;
	width: 52px;
	height: 3px;
	margin: 16px 0 22px;
	background: var(--a);
}

.msh-intro {
	max-width: 34em;
	font-size: 1rem;
	line-height: 1.72;
	color: #000;
}

.msh-intro p { margin: 0 0 1em; }
.msh-intro p:last-child { margin-bottom: 0; }

/* --- Benefit icon row --------------------------------------------------- */
.msh-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 26px 34px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.msh-benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 108px;
	text-align: center;
}

.msh-benefit__disc {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--msh-disc);
	color: var(--s);
	font-size: 30px; /* drives .msh-icon size */
}

.msh-benefit__label {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--p);
}

/* --- CTA row ------------------------------------------------------------ */
.msh-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
	margin-top: 32px;
}

.msh-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	border: 0;
	border-radius: 2px;
	background: var(--a);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .18s ease, transform .18s ease;
}

.msh-btn:hover,
.msh-btn:focus-visible {
	background: var(--msh-a-dark);
	color: #fff;
	transform: translateY(-1px);
}

.msh-btn__icon { font-size: 16px; }

.msh-callout {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--p);
}

.msh-callout a {
	color: var(--msh-link);
	text-decoration: none;
}

.msh-callout a:hover,
.msh-callout a:focus-visible { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Causes strip
   ---------------------------------------------------------------------- */
.msh-causes {
	background: var(--msh-soft);
	padding: 34px 0 30px;
}

.msh-causes__title {
	margin: 0 0 22px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: center;
	color: var(--s);
}

.msh-causes__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.msh-cause {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 26px;
	color: var(--s);
}

.msh-cause + .msh-cause {
	border-left: 1px solid var(--msh-line);
}

.msh-cause__icon { font-size: 32px; }

.msh-cause__label {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--p);
}

/* -------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------- */
.msh-cards { padding: 40px 0 48px; }

.msh-cards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 26px;
	align-items: stretch;
}

.msh-card {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 28px 30px;
	border-radius: 4px;
}

.msh-card--icon-right { flex-direction: row-reverse; }

.msh-card--dark {
	background: var(--p);
	color: #fff;
}

.msh-card--light {
	background: #fff;
	border: 1px solid var(--msh-line);
}

.msh-card__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 74px;
	height: 74px;
	font-size: 40px;
	color: var(--s);
}

.msh-card--dark .msh-card__icon { color: color-mix(in srgb, var(--s) 25%, #fff); }

.msh-card__icon.is-ring {
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 34px;
}

.msh-card--dark .msh-card__icon.is-ring { border-color: color-mix(in srgb, var(--s) 45%, transparent); }

.msh-card__body { min-width: 0; }

.msh-card__title {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--p);
}

.msh-card--dark .msh-card__title { color: #fff; }

.msh-card__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--msh-ink);
}

.msh-card--dark .msh-card__text { color: color-mix(in srgb, var(--p) 16%, #fff); }

/* -------------------------------------------------------------------------
   Editor content below the designed sections
   ---------------------------------------------------------------------- */
.msh-content { padding: 8px 0 56px; }

.msh-prose {
	max-width: 820px;
	font-size: 1rem;
	line-height: 1.75;
}

.msh-prose h2,
.msh-prose h3 {
	font-family: var(--msh-font-display);
	color: var(--p);
	line-height: 1.25;
}

.msh-prose h2 { font-size: 1.65rem; margin: 1.8em 0 .6em; }
.msh-prose h3 { font-size: 1.25rem; margin: 1.5em 0 .5em; }
.msh-prose a  { color: var(--s); }

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 980px) {
	.msh-hero { grid-template-columns: 1fr; }
	.msh-hero__media { min-height: 300px; max-height: 380px; }
	.msh-hero__body {
		max-width: var(--msh-shell);
		margin-inline: auto;
		width: 100%;
	}
	.msh-cause { padding-inline: 18px; }
}

@media (max-width: 760px) {
	.msh-causes__list { justify-content: flex-start; }
	.msh-cause {
		flex: 1 1 46%;
		padding: 10px 12px;
		border-left: 0 !important;
	}
	.msh-cause__icon { font-size: 28px; }
	.msh-card {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	.msh-card--icon-right { flex-direction: column; }
}

@media (max-width: 480px) {
	.msh-benefits { gap: 22px; }
	.msh-benefit { width: calc(50% - 11px); }
	.msh-cta { gap: 12px; }
	.msh-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.msh-btn { transition: none; }
	.msh-btn:hover { transform: none; }
}