/* Homepage. The search bar and its panels are NOT here — they're a Listings
   component (filters.css). */

.mf-home {
	--mf-h-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	--mf-home-maxw: 1320px;
	--mf-home-gutter: 24px;

	font-family: var(--mf-font);
	color: var(--mf-ink);
	-webkit-font-smoothing: antialiased;
}

/* Flush to header/footer is handled by .mf-flush in brand.css. */

.mf-home *,
.mf-home *::before,
.mf-home *::after {
	box-sizing: border-box;
}

.mf-home button {
	font-family: inherit;
	cursor: pointer;
}

/* Hero */

.mf-hero {
	position: relative;
	/* High stacking context so the search panels overlay the next section. */
	z-index: 10;
	/* 40px of clearance below the search bar before the next section. */
	padding: clamp(88px, 9vw, 120px) 0 40px;
	background: var(--mf-light-blue);
}

.mf-hero__top {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	max-width: var(--mf-home-maxw);
	margin: 0 auto clamp(32px, 4vw, 48px);
	padding: 0 var(--mf-home-gutter);
}

.mf-hero__copy {
	flex: 0 0 40%;
	text-align: right;
}

.mf-hero__title {
	margin: 0 0 18px;
	font-size: clamp(2rem, 3.4vw, 2.7rem);
	line-height: 1.22;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--mf-navy);
	text-wrap: balance;
}

/* Soft sky marker-highlight under the key words. */
.mf-hero__title em {
	font-style: normal;
	background-image: linear-gradient(0deg, var(--mf-sky-3) 0 0);
	background-repeat: no-repeat;
	background-size: 100% 0.24em;
	background-position: 0 92%;
}

.mf-hero__lead {
	margin: 0;
	font-size: clamp(1.05rem, 2vw, 1.4rem);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--mf-ink);
}

/* collage */

.mf-hero__collage {
	flex: 1 1 60%;
	display: flex;
	gap: 15px;
	align-items: stretch;
}

.mf-hero__tile {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 12px;
}

/* Left large tile: 34% wide, its own 10px radius + heavier shadow, offset 20px. */
.mf-hero__tile--lg {
	flex: 0 0 34%;
	min-height: 201px;
	margin-left: 20px;
	border-radius: 10px;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.23);
}

.mf-hero__tile-col {
	flex: 0 0 66%;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Top image of the column: sits left-aligned at 78% width, fixed 215px tall. */
.mf-hero__tile-col > .mf-hero__tile {
	max-width: 78%;
	height: 215px;
	margin-top: 30px;
}

.mf-hero__tile-row {
	display: flex;
	gap: 15px;
	align-items: flex-start;
}

/* communication — 52.644% wide, 150px tall. */
.mf-hero__tile-row > .mf-hero__tile:first-child {
	flex: 0 0 52.644%;
	height: 150px;
}

/* breathwork — fills remaining width, 130px tall. */
.mf-hero__tile-row > .mf-hero__tile:last-child {
	flex: 1 1 auto;
	height: 130px;
}

/* Bands — full-bleed background zones, each wrapping a centred .mf-section. */

/* Don't use calc(50% - 50vw): % excludes the scrollbar, vw includes it → permanent
   horizontal scroll. 100vw + translateX(-50%) instead; overflow-x: clip absorbs the sliver. */
.mf-band,
.mf-hero,
.mf-news {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	transform: translateX(-50%);
	margin-left: 0;
	margin-right: 0;
}

/* clip, NOT hidden: overflow-x: hidden makes the document a scroll container and
   breaks position: sticky everywhere. */
html:has(.mf-home),
body:has(.mf-home) {
	overflow-x: clip;
}

.mf-band {
	position: relative;
	z-index: 1;
}

.mf-band--white {
	background: var(--mf-white);
}

.mf-band--tint {
	background: var(--mf-page-bg);
}

/* Immersive dusk-blue band — a dark, calming break in the page. */
.mf-band--dark {
	background: var(--mf-hero-sky);
}

.mf-band--dark .mf-section__title {
	color: var(--mf-white);
}

.mf-band--dark .mf-section__sub {
	color: var(--mf-sky-2);
}

.mf-band--dark .mf-eyebrow {
	background: rgba(255, 255, 255, 0.14);
	color: var(--mf-white);
}

/* Sections (shared) */

.mf-section {
	max-width: var(--mf-home-maxw);
	margin: 0 auto;
	padding: clamp(56px, 8vw, 92px) var(--mf-home-gutter);
}


/* Small uppercase label above a section title. */
.mf-eyebrow {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 12px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mf-dark-blue);
	background: var(--mf-sky-2);
	border-radius: 999px;
}

.mf-section__head {
	margin-bottom: clamp(28px, 4vw, 44px);
}

.mf-section__head--center {
	text-align: center;
}

.mf-section__head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.mf-section__title {
	margin: 0 0 8px;
	font-size: clamp(1.7rem, 3.5vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--mf-navy);
}

.mf-section__sub {
	margin: 0;
	font-size: 1.02rem;
	color: var(--mf-muted);
}

.mf-section__head--center .mf-section__sub {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.mf-section__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	font-size: 0.94rem;
	font-weight: 700;
	color: var(--mf-dark-blue);
	background: var(--mf-white);
	border: 1.5px solid var(--mf-line);
	border-radius: 999px;
	text-decoration: none;
	transition: gap 0.18s var(--mf-h-ease), border-color 0.18s, background 0.18s;
}

.mf-section__link:hover {
	border-color: var(--mf-blue);
	background: var(--mf-light-blue);
	gap: 10px;
}

/* categories */

.mf-cats__row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 14px;
}

.mf-cat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 5px;
	padding: 26px 16px 24px;
	background: var(--mf-card-bg);
	border: 1px solid transparent;
	border-radius: 18px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(2, 7, 13, 0.06);
	transition: transform 0.22s var(--mf-h-ease), box-shadow 0.22s, border-color 0.22s;
}

.mf-cat-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--mf-shadow-hover);
	border-color: var(--mf-blue);
}

.mf-cat-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 8px;
	font-size: 1.5rem;
	background: var(--mf-tint);
	border-radius: 50%;
	transition: background 0.22s, transform 0.22s var(--mf-h-ease);
}

.mf-cat-card:hover .mf-cat-card__icon {
	background: var(--mf-sky-2);
	transform: scale(1.08);
}

.mf-cat-card__name {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--mf-navy);
}

.mf-cat-card__blurb {
	font-size: 0.83rem;
	line-height: 1.4;
	color: var(--mf-muted);
}

@media (max-width: 900px) {
	/* No horizontal scroll — a compact 2-up grid so every theme is visible. */
	.mf-cats__row {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-columns: unset;
		gap: 10px;
	}

	.mf-cat-card {
		gap: 3px;
		padding: 16px 10px 14px;
		border-radius: 14px;
	}

	.mf-cat-card__icon {
		width: 40px;
		height: 40px;
		margin-bottom: 4px;
		font-size: 1.1rem;
	}

	.mf-cat-card__name {
		font-size: 0.92rem;
	}

	.mf-cat-card__blurb {
		font-size: 0.74rem;
		line-height: 1.35;
	}

	/* An odd final card spans both columns so the grid ends balanced. */
	.mf-cat-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* How it works */

.mf-how__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.mf-how__card {
	position: relative;
	overflow: hidden;
	padding: 36px 32px 34px;
	background: var(--mf-card-bg);
	border: 1px solid transparent;
	border-radius: var(--mf-radius-lg);
	box-shadow: 0 8px 24px rgba(2, 7, 13, 0.06);
	transition: transform 0.22s var(--mf-h-ease), box-shadow 0.22s, border-color 0.22s;
}

.mf-how__card:hover {
	transform: translateY(-5px);
	box-shadow: var(--mf-shadow-hover);
	border-color: var(--mf-mid-blue);
}

/* Big faded number, top-right corner. */
.mf-how__num {
	position: absolute;
	top: 20px;
	right: 26px;
	font-size: 3.4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--mf-mid-blue);
	opacity: 0.45;
	transition: opacity 0.22s, color 0.22s;
}

.mf-how__card:hover .mf-how__num {
	opacity: 0.8;
}

/* Scroll-driven swell: home.js writes only --mf-how-p/-s/-z. No transition on the
   transform — the scroll position IS the timeline. */
.is-mf-how-scroll .mf-how__card {
	--mf-how-p: 0;
	--mf-how-s: 1;
	transform: scale(var(--mf-how-s));
	transform-origin: 50% 60%;
	/* Release the clip while scaled, or overflow:hidden swallows the scaled edges. */
	overflow: visible;
	position: relative;
	/* Integer, written by the script — z-index rejects a fractional calc(). */
	z-index: var(--mf-how-z, 1);
	box-shadow:
		0 8px 24px rgba(2, 7, 13, 0.06),
		0 calc(14px * var(--mf-how-p)) calc(36px * var(--mf-how-p))
			rgba(2, 7, 13, calc(0.16 * var(--mf-how-p)));
	transition: box-shadow 0.22s, border-color 0.22s;
	will-change: transform;
}

/* Hover keeps its lift, on top of whatever scale the scroll is holding. */
.is-mf-how-scroll .mf-how__card:hover {
	transform: scale(var(--mf-how-s)) translateY(-5px);
}

.mf-how__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 22px;
	color: var(--mf-blue);
	background: var(--mf-tint);
	border-radius: 50%;
	transition: background 0.22s, color 0.22s;
}

.mf-how__card:hover .mf-how__icon {
	background: var(--mf-sky-2);
	color: var(--mf-dark-blue);
}

.mf-how__title {
	margin: 0 0 10px;
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--mf-navy);
}

.mf-how__body {
	margin: 0;
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--mf-muted);
}

@media (max-width: 860px) {
	.mf-how__grid {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin: 0 auto;
	}
}

/* Newsletter */

.mf-news {
	position: relative;
	z-index: 1;
	padding: clamp(36px, 5vw, 64px) 20px;
	background: var(--mf-hero-sky);
	text-align: center;
}

.mf-news__inner {
	max-width: 980px;
	margin: 0 auto;
	padding: clamp(28px, 3.5vw, 40px) clamp(28px, 5vw, 64px);
	background: var(--mf-white);
	border: 1px solid var(--mf-mid-blue);
	border-radius: 28px;
	box-shadow: var(--mf-shadow-float);
}

.mf-eyebrow--on-warm {
	color: var(--mf-white);
	background: var(--mf-dark-blue);
}

.mf-news__title {
	margin: 0 0 12px;
	font-size: clamp(1.8rem, 3.6vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--mf-navy);
}

.mf-news__lead {
	margin: 0 auto 28px;
	max-width: 520px;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--mf-ink);
}

.mf-news__form {
	display: flex;
	gap: 10px;
	margin: 0 auto;
}

.mf-news__field {
	flex: 1;
	display: block;
}

.mf-news__field input {
	width: 100%;
	height: 56px;
	padding: 0 20px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--mf-navy);
	background: var(--mf-white);
	border: 1.5px solid var(--mf-line);
	border-radius: 999px;
	transition: border-color 0.18s, box-shadow 0.18s;
}

.mf-news__field input::placeholder {
	color: var(--mf-muted);
}

.mf-news__field input:focus {
	outline: none;
	border-color: var(--mf-blue);
	box-shadow: 0 0 0 4px rgba(40, 136, 255, 0.15);
}

.mf-news__fine {
	margin: 14px 0 0;
	font-size: 0.82rem;
	color: var(--mf-muted);
}

/* buttons */

.mf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 30px;
	height: 56px;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.16s var(--mf-h-ease), box-shadow 0.2s, background 0.2s;
}

.mf-btn--warm {
	color: var(--mf-white);
	background: var(--mf-dark-blue);
}

.mf-btn--warm:hover {
	transform: translateY(-2px);
	background: var(--mf-black);
	box-shadow: 0 10px 26px rgba(10, 43, 84, 0.3);
}

/* Keyboard focus: one clear, consistent ring everywhere. */
.mf-home a:focus-visible,
.mf-home button:focus-visible,
.mf-home input:focus-visible {
	outline: 3px solid var(--mf-blue);
	outline-offset: 2px;
}

/* Accessible visually-hidden label */
.mf-home .screen-reader-text,
.mf-news .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Responsive */

@media (max-width: 860px) {
	/* Hero stacks: headings centred above the collage. */
	.mf-hero__top {
		flex-direction: column;
	}

	.mf-hero__copy {
		flex-basis: auto;
		text-align: center;
	}

	/* Original was `elementor-hidden-mobile` — the collage is desktop-only. */
	.mf-hero__collage {
		display: none;
	}
}

@media (max-width: 760px) {
	.mf-news__form {
		flex-direction: column;
	}

	.mf-news__form .mf-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mf-home * {
		animation: none !important;
		transition: none !important;
	}
}