/**
 * File: /main/microbiome/microbiome.css
 * MICROBA Microbiome Page
 */

.mbm-page,
.mbm-page * { box-sizing: border-box; }
.mbm-page { overflow: hidden; background: #0a1510; color: #eee7d8; }
.mbm-shell { width: min(1320px, calc(100% - 64px)); margin-inline: auto; }
.mbm-kicker { margin: 0 0 22px; color: #d3b66f; font-size: .75rem; font-weight: 600; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; }
.mbm-kicker--dark { color: #8b6d32; }

.mbm-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; isolation: isolate; background: #07100b var(--mbm-bg) center/cover no-repeat; }
.mbm-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2,9,5,.88) 0%, rgba(2,9,5,.46) 52%, rgba(2,9,5,.12) 100%), linear-gradient(0deg, rgba(2,9,5,.92), transparent 55%); }
.mbm-hero__content { padding: clamp(180px, 22vh, 290px) 0 clamp(72px, 10vh, 120px); }
.mbm-hero h1 { max-width: 960px; margin: 0; color: #f1eadb; font-family: Georgia, "Times New Roman", serif; font-size: clamp(5rem, 13vw, 12rem); font-weight: 400; line-height: .78; letter-spacing: -.065em; }
.mbm-hero__lead { max-width: 700px; margin: 42px 0 0; color: rgba(241,234,219,.82); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.75; }
.mbm-scroll { display: inline-flex; gap: 16px; align-items: center; margin-top: 48px; color: #f1eadb; font-size: .78rem; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }

.mbm-section { padding: clamp(100px, 13vw, 190px) 0; }
.mbm-section--cream { background: #eee8dc; color: #122018; }
.mbm-intro h2 { max-width: 1120px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.4rem, 7vw, 7.7rem); font-weight: 400; line-height: .95; letter-spacing: -.05em; }
.mbm-intro__text { width: min(760px, 100%); margin: 64px 0 0 auto; }
.mbm-intro__text p { margin: 0 0 22px; color: #465148; font-size: 1.08rem; line-height: 1.85; }

.mbm-story { padding: clamp(95px, 12vw, 170px) 0; }
.mbm-story--dark { background: #0a1710; color: #eee7d8; }
.mbm-story--sand { background: #d6ccb8; color: #132017; }
.mbm-story--cream { background: #eee8dc; color: #132017; }
.mbm-story__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: clamp(48px, 8vw, 120px); align-items: center; }
.mbm-story__grid--reverse .mbm-story__media { order: 2; }
.mbm-story__media { min-height: clamp(520px, 60vw, 790px); background: #17251d var(--mbm-image) center/cover no-repeat; box-shadow: 0 35px 90px rgba(0,0,0,.25); }
.mbm-story__media--contain { background-size: contain; background-color: #d8ceba; box-shadow: none; }
.mbm-story__copy h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 5.6vw, 6.2rem); font-weight: 400; line-height: .96; letter-spacing: -.045em; }
.mbm-story__copy p:not(.mbm-kicker) { margin: 30px 0 0; color: rgba(238,231,216,.76); font-size: 1.08rem; line-height: 1.82; }
.mbm-story--sand .mbm-story__copy p:not(.mbm-kicker), .mbm-story--cream .mbm-story__copy p:not(.mbm-kicker) { color: #4b554d; }

.mbm-principles { padding: clamp(100px, 13vw, 180px) 0; background: #102117; color: #eee7d8; }
.mbm-principles h2 { max-width: 900px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.3rem, 6.2vw, 7rem); font-weight: 400; line-height: .95; letter-spacing: -.05em; }
.mbm-principles__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 80px; border-top: 1px solid rgba(211,182,111,.35); }
.mbm-principles article { min-height: 330px; padding: 38px 38px 46px 0; border-right: 1px solid rgba(211,182,111,.25); }
.mbm-principles article + article { padding-left: 38px; }
.mbm-principles article:last-child { border-right: 0; }
.mbm-principles span { color: #d3b66f; font-size: .78rem; letter-spacing: .16em; }
.mbm-principles h3 { margin: 72px 0 22px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.1rem, 3vw, 3.4rem); font-weight: 400; }
.mbm-principles article p { margin: 0; color: rgba(238,231,216,.7); line-height: 1.75; }

.mbm-research, .mbm-cta { position: relative; isolation: isolate; min-height: 760px; display: flex; align-items: center; background: #08110c var(--mbm-bg) center/cover no-repeat; }
.mbm-research__shade, .mbm-cta__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3,10,6,.9), rgba(3,10,6,.4) 65%, rgba(3,10,6,.12)); }
.mbm-research__content, .mbm-cta__content { padding-block: 120px; }
.mbm-research__content { max-width: 780px; margin-left: max(0px, calc((100vw - 1320px)/2)); }
.mbm-research h2, .mbm-cta h2 { max-width: 920px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.5rem, 6.5vw, 7.5rem); font-weight: 400; line-height: .92; letter-spacing: -.05em; }
.mbm-research p:not(.mbm-kicker), .mbm-cta p:not(.mbm-kicker) { max-width: 660px; margin: 34px 0 0; color: rgba(241,234,219,.78); font-size: 1.1rem; line-height: 1.8; }
.mbm-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; margin-top: 42px; padding: 0 28px; border: 1px solid #d3b66f; background: #d3b66f; color: #101a13; font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; transition: .25s ease; }
.mbm-button:hover { background: transparent; color: #f1eadb; }
.mbm-button--ghost { background: transparent; color: #f1eadb; }
.mbm-button--ghost:hover { background: #d3b66f; color: #101a13; }
.mbm-actions { display: flex; flex-wrap: wrap; gap: 16px; }

.mbm-quote { padding: clamp(110px, 15vw, 220px) 0; background: #cfc3ab; color: #132017; }
.mbm-quote blockquote { max-width: 1200px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.3rem, 7vw, 8rem); font-weight: 400; line-height: .95; letter-spacing: -.055em; }

@media (max-width: 900px) {
	.mbm-shell { width: min(100% - 36px, 1320px); }
	.mbm-story__grid { grid-template-columns: 1fr; }
	.mbm-story__grid--reverse .mbm-story__media { order: 0; }
	.mbm-story__media { min-height: 70vw; }
	.mbm-principles__grid { grid-template-columns: 1fr; }
	.mbm-principles article, .mbm-principles article + article { min-height: auto; padding: 34px 0 44px; border-right: 0; border-bottom: 1px solid rgba(211,182,111,.25); }
	.mbm-principles article:last-child { border-bottom: 0; }
	.mbm-principles h3 { margin-top: 32px; }
}

@media (max-width: 600px) {
	.mbm-hero { min-height: 840px; }
	.mbm-hero h1 { font-size: clamp(4rem, 25vw, 7rem); }
	.mbm-hero__content { padding-top: 190px; }
	.mbm-intro h2, .mbm-story__copy h2, .mbm-principles h2, .mbm-research h2, .mbm-cta h2, .mbm-quote blockquote { letter-spacing: -.04em; }
	.mbm-story__media { min-height: 110vw; }
	.mbm-research, .mbm-cta { min-height: 700px; align-items: flex-end; }
	.mbm-actions { display: grid; }
	.mbm-button { width: 100%; }
}