/**
 * MICROBA Human Microbiome
 * Version: 1.0.0
 * Revision: 2026-07-25
 */

.hm-page {
	--hm-ink: #07110d;
	--hm-forest: #0d2118;
	--hm-forest-soft: #163326;
	--hm-cream: #f0eadc;
	--hm-gold: #caa75d;
	--hm-text: #e9e4d8;
	--hm-dark-text: #16231b;
	background: var(--hm-ink);
	color: var(--hm-text);
	overflow: hidden;
}

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

.hm-shell {
	width: min(1220px, calc(100% - 48px));
	margin-inline: auto;
}

.hm-eyebrow {
	margin: 0 0 22px;
	color: var(--hm-gold);
	font-size: .76rem;
	font-weight: 750;
	letter-spacing: .24em;
	line-height: 1.5;
	text-transform: uppercase;
}

.hm-page h1,
.hm-page h2,
.hm-page h3 {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	text-wrap: balance;
}

.hm-page h2 {
	margin: 0;
	font-size: clamp(2.7rem, 5.6vw, 5.4rem);
	letter-spacing: -.045em;
	line-height: .98;
}

.hm-hero {
	position: relative;
	min-height: clamp(700px, 92vh, 980px);
	display: grid;
	align-items: end;
	background-image: var(--hm-image);
	background-position: center;
	background-size: cover;
}

.hm-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(3, 10, 7, .89) 0%, rgba(3, 10, 7, .55) 45%, rgba(3, 10, 7, .1) 78%),
		linear-gradient(0deg, rgba(3, 10, 7, .92), transparent 58%);
}

.hm-hero__content {
	position: relative;
	z-index: 1;
	padding-block: clamp(150px, 18vw, 245px) clamp(72px, 9vw, 118px);
}

.hm-hero h1 {
	max-width: 980px;
	margin: 0;
	font-size: clamp(3.8rem, 8.6vw, 8.4rem);
	letter-spacing: -.055em;
	line-height: .9;
}

.hm-hero__lead {
	max-width: 690px;
	margin: 30px 0 38px;
	color: rgba(255, 255, 255, .78);
	font-size: clamp(1.05rem, 1.5vw, 1.28rem);
	line-height: 1.75;
}

.hm-section { padding-block: clamp(96px, 11vw, 160px); }
.hm-section--cream { background: var(--hm-cream); color: var(--hm-dark-text); }
.hm-section--dark { background: var(--hm-ink); }

.hm-intro {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	gap: clamp(52px, 9vw, 140px);
	align-items: start;
}

.hm-prose { color: rgba(233, 228, 216, .76); font-size: 1.06rem; line-height: 1.82; }
.hm-prose p { margin: 0 0 22px; }
.hm-prose p:last-child { margin-bottom: 0; }
.hm-prose--large { color: #465249; font-size: clamp(1.1rem, 1.55vw, 1.35rem); }

.hm-feature { padding-block: clamp(90px, 10vw, 150px); }
.hm-feature--dark { background: var(--hm-ink); }
.hm-feature--forest { background: var(--hm-forest); }
.hm-feature--cream { background: var(--hm-cream); color: var(--hm-dark-text); }
.hm-feature--cream .hm-prose { color: #4b574f; }

.hm-feature__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
	gap: clamp(48px, 8vw, 118px);
	align-items: center;
}

.hm-feature--reverse .hm-feature__image { order: 2; }
.hm-feature--reverse .hm-feature__copy { order: 1; }

.hm-feature__image,
.hm-research__image,
.hm-lifestyle__image {
	background-image: var(--hm-image);
	background-position: center;
	background-size: cover;
	box-shadow: 0 30px 85px rgba(0, 0, 0, .28);
}

.hm-feature__image {
	min-height: clamp(500px, 58vw, 760px);
	border: 1px solid rgba(202, 167, 93, .38);
}

.hm-feature__copy h2 { max-width: 650px; }
.hm-feature__copy .hm-prose { margin-top: 30px; }

.hm-heading--center {
	max-width: 900px;
	margin: 0 auto clamp(46px, 7vw, 82px);
	text-align: center;
}

.hm-heading--center > p:last-child {
	max-width: 720px;
	margin: 28px auto 0;
	color: #4d594f;
	font-size: 1.1rem;
	line-height: 1.75;
}

.hm-lifestyle__image {
	min-height: clamp(480px, 62vw, 760px);
	border: 1px solid rgba(103, 79, 32, .24);
}

.hm-principles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 28px;
}

.hm-principles article {
	min-height: 255px;
	padding: 32px;
	border: 1px solid rgba(103, 79, 32, .22);
	background: rgba(255, 255, 255, .3);
}

.hm-principles span {
	display: block;
	margin-bottom: 46px;
	color: #8d6e31;
	font-family: Georgia, "Times New Roman", serif;
}

.hm-principles h3 { margin: 0 0 14px; font-size: 1.65rem; }
.hm-principles p { margin: 0; color: #4c574f; line-height: 1.68; }

.hm-research {
	background:
		radial-gradient(circle at 15% 10%, rgba(46, 86, 64, .3), transparent 36%),
		var(--hm-ink);
}

.hm-research__grid {
	display: grid;
	grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr);
	gap: clamp(52px, 8vw, 118px);
	align-items: center;
}

.hm-research__image {
	min-height: clamp(520px, 56vw, 720px);
	border: 1px solid rgba(202, 167, 93, .35);
}

.hm-research__copy .hm-prose { margin: 30px 0 38px; }

.hm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 15px 28px;
	border: 1px solid var(--hm-gold);
	color: var(--hm-text);
	font-size: .76rem;
	font-weight: 750;
	letter-spacing: .15em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.hm-button:hover,
.hm-button:focus-visible { background: var(--hm-gold); color: var(--hm-ink); transform: translateY(-2px); }
.hm-button--light { border-color: rgba(255,255,255,.68); color: #fff; }
.hm-button--light:hover,
.hm-button--light:focus-visible { background: #fff; color: var(--hm-ink); }

.hm-cta {
	position: relative;
	min-height: clamp(650px, 82vh, 900px);
	display: grid;
	align-items: center;
	background-image: var(--hm-image);
	background-position: center;
	background-size: cover;
	text-align: center;
}

.hm-cta__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(5, 13, 9, .28), rgba(5, 13, 9, .82));
}

.hm-cta__content { position: relative; z-index: 1; padding-block: 110px; }
.hm-cta h2 { max-width: 1020px; margin-inline: auto; font-size: clamp(3rem, 6.2vw, 6.4rem); }
.hm-cta__content > p:not(.hm-eyebrow) {
	max-width: 670px;
	margin: 28px auto 38px;
	color: rgba(255,255,255,.78);
	font-size: 1.12rem;
	line-height: 1.75;
}

@media (max-width: 900px) {
	.hm-intro,
	.hm-feature__grid,
	.hm-research__grid { grid-template-columns: 1fr; }
	.hm-feature--reverse .hm-feature__image,
	.hm-feature--reverse .hm-feature__copy { order: initial; }
	.hm-feature__image,
	.hm-research__image { min-height: 520px; }
	.hm-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.hm-shell { width: min(100% - 32px, 1220px); }
	.hm-hero { min-height: 720px; background-position: 58% center; }
	.hm-hero h1 { font-size: clamp(3.2rem, 15vw, 5.2rem); }
	.hm-feature__image,
	.hm-research__image,
	.hm-lifestyle__image { min-height: 390px; }
	.hm-principles { grid-template-columns: 1fr; }
	.hm-principles article { min-height: auto; }
	.hm-cta { min-height: 700px; }
}