/** MICROBA Knowledge Page — standalone canonical stylesheet. */

.mk-page {
	--mk-ink: #101713;
	--mk-dark: #07100b;
	--mk-dark-2: #0d1912;
	--mk-cream: #f2eee4;
	--mk-paper: #fbf8f1;
	--mk-gold: #c9a65a;
	--mk-line: rgba(16, 23, 19, .16);
	margin: 0;
	background: var(--mk-cream);
	color: var(--mk-ink);
	overflow: hidden;
}
.mk-page, .mk-page * { box-sizing: border-box; }
.mk-page h1, .mk-page h2, .mk-page h3, .mk-page p { margin-top: 0; }
.mk-page h1, .mk-page h2, .mk-page h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.035em; }
.mk-page p, .mk-page a { font-family: Arial, Helvetica, sans-serif; }
.mk-shell { width: min(1320px, calc(100% - 96px)); margin-inline: auto; }
.mk-eyebrow { margin-bottom: 24px; color: var(--mk-gold); font-size: .76rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.mk-eyebrow--dark { color: #7b622d; }

.mk-hero {
	position: relative;
	min-height: max(760px, 100svh);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	background: var(--mk-hero) center/cover no-repeat, var(--mk-dark);
	color: #fff;
}
.mk-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3,8,5,.92) 0%, rgba(3,8,5,.69) 43%, rgba(3,8,5,.14) 76%), linear-gradient(0deg, rgba(3,8,5,.80), transparent 50%); }
.mk-hero__content { padding-block: 210px 104px; }
.mk-hero h1 { max-width: 1080px; margin-bottom: 30px; font-size: clamp(4rem, 7.3vw, 8.2rem); line-height: .92; }
.mk-hero__lead { max-width: 670px; margin-bottom: 42px; color: rgba(255,255,255,.8); font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.75; }
.mk-scroll { display: inline-flex; gap: 14px; align-items: center; color: #fff; font-size: .78rem; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.mk-scroll span { color: var(--mk-gold); font-size: 1.1rem; }

.mk-section { padding-block: clamp(100px, 10vw, 170px); }
.mk-section--cream { background: var(--mk-cream); }
.mk-section--dark { background: var(--mk-dark); color: #f5f0e5; }
.mk-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 80px; align-items: end; }
.mk-intro .mk-eyebrow { grid-column: 1 / -1; margin-bottom: -36px; }
.mk-intro h2 { margin-bottom: 0; font-size: clamp(3.4rem, 6.2vw, 7rem); line-height: .98; }
.mk-lead { margin-bottom: 8px; font-size: clamp(1.08rem, 1.5vw, 1.35rem); line-height: 1.8; }

.mk-story { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(58px, 8vw, 130px); align-items: center; }
.mk-story__media { min-height: clamp(580px, 63vw, 850px); background: var(--mk-story) center/cover no-repeat, #172219; }
.mk-story__copy h2 { margin-bottom: 34px; font-size: clamp(3rem, 5vw, 5.8rem); line-height: 1; }
.mk-story__copy p:not(.mk-eyebrow) { max-width: 590px; color: rgba(245,240,229,.72); font-size: 1.06rem; line-height: 1.85; }

.mk-heading-row { display: grid; grid-template-columns: 1.15fr .55fr; gap: 80px; align-items: end; margin-bottom: 70px; }
.mk-heading-row h2 { max-width: 800px; margin-bottom: 0; font-size: clamp(3.2rem, 5.4vw, 6.2rem); line-height: 1; }
.mk-heading-row > p { margin-bottom: 5px; font-size: 1.03rem; line-height: 1.75; }
.mk-practices { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--mk-line); border-left: 1px solid var(--mk-line); }
.mk-card { min-height: 340px; padding: 34px 30px 38px; border-right: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }
.mk-card span { display: block; margin-bottom: 94px; color: #8a6b2d; font-size: .74rem; font-weight: 700; letter-spacing: .14em; }
.mk-card h3 { margin-bottom: 18px; font-size: clamp(2rem, 3vw, 3rem); }
.mk-card p { margin-bottom: 0; line-height: 1.72; }

.mk-reflection { position: relative; min-height: clamp(680px, 78vw, 980px); display: flex; align-items: flex-end; isolation: isolate; background: var(--mk-cta) center/cover no-repeat, var(--mk-dark); color: #fff; }
.mk-reflection::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(2,7,4,.9), rgba(2,7,4,.05) 70%); }
.mk-reflection__content { padding-bottom: 95px; }
.mk-reflection h2 { max-width: 1050px; margin-bottom: 0; font-size: clamp(3rem, 5.7vw, 6.5rem); line-height: .98; }

.mk-cta { padding-block: clamp(100px, 10vw, 155px); background: #0a140e; color: #f7f2e8; text-align: center; }
.mk-cta__content { max-width: 950px; }
.mk-cta h2 { margin-bottom: 28px; font-size: clamp(3.2rem, 5.8vw, 6.6rem); line-height: .98; }
.mk-cta p:not(.mk-eyebrow) { max-width: 680px; margin: 0 auto 38px; color: rgba(247,242,232,.72); font-size: 1.08rem; line-height: 1.8; }
.mk-actions { display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap; }
.mk-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; padding: 0 29px; border: 1px solid var(--mk-gold); background: var(--mk-gold); color: #10130f; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.mk-link { color: #f7f2e8; font-size: .78rem; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }
.mk-link span { margin-left: 9px; color: var(--mk-gold); }
.mk-button:hover, .mk-button:focus-visible { background: transparent; color: #fff; }
.mk-link:hover, .mk-link:focus-visible { color: var(--mk-gold); }

@media (max-width: 1050px) {
	.mk-shell { width: min(100% - 56px, 1320px); }
	.mk-intro, .mk-heading-row { grid-template-columns: 1fr; gap: 34px; }
	.mk-intro .mk-eyebrow { margin-bottom: 0; }
	.mk-story { grid-template-columns: 1fr; }
	.mk-story__media { min-height: 680px; }
	.mk-practices { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px) {
	.mk-shell { width: calc(100% - 36px); }
	.mk-hero { min-height: 760px; background-position: 58% center; }
	.mk-hero::before { background: linear-gradient(0deg, rgba(3,8,5,.95) 0%, rgba(3,8,5,.63) 59%, rgba(3,8,5,.24) 100%); }
	.mk-hero__content { padding-block: 175px 70px; }
	.mk-hero h1 { font-size: clamp(3.25rem, 15vw, 5.2rem); }
	.mk-section { padding-block: 88px; }
	.mk-intro h2, .mk-heading-row h2 { font-size: clamp(3rem, 13vw, 4.7rem); }
	.mk-story__media { min-height: 500px; }
	.mk-practices { grid-template-columns: 1fr; }
	.mk-card { min-height: 0; }
	.mk-card span { margin-bottom: 54px; }
	.mk-reflection { min-height: 650px; background-position: 58% center; }
	.mk-reflection__content { padding-bottom: 65px; }
	.mk-cta h2 { font-size: clamp(3rem, 13vw, 4.8rem); }
}