/**
 * MICROBA ORIGIN — Life in the Bee's Gut
 * File: /header-menu-pages/origin/life-in-bees-gut.css
 * Version: 2.0.58
 * Date: 2026-08-18
 */

.microba-bee-origin {
    --mbo-gold: var(--microba-gold, #d3aa35);
    --mbo-gold-soft: #b78e2d;
    --mbo-ivory: #f3efe5;
    --mbo-muted: #c9c3b5;
    --mbo-black: #050605;
    --mbo-panel: #0b0d0c;
    --mbo-line: rgba(211, 170, 53, 0.28);
    --mbo-display: var(--microba-font-display, Georgia, "Times New Roman", serif);
    --mbo-interface: var(--microba-font-interface, Arial, Helvetica, sans-serif);
    background: var(--mbo-black);
    color: var(--mbo-ivory);
    overflow: hidden;
}

.microba-bee-origin *,
.microba-bee-origin *::before,
.microba-bee-origin *::after { box-sizing: border-box; }

.microba-bee-origin a { color: inherit; }
.microba-bee-origin img { display: block; width: 100%; height: auto; }

.mbo-container {
    width: min(100% - 48px, 1440px);
    margin-inline: auto;
}

.mbo-hero {
    position: relative;
    min-height: clamp(620px, 69vw, 790px);
    isolation: isolate;
    background: #050505 var(--mbo-hero-image) center right / cover no-repeat;
    border-bottom: 1px solid var(--mbo-line);
}

.mbo-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 72% 46%, rgba(215, 152, 30, .10), transparent 38%),
        linear-gradient(90deg, #050505 0%, #050505 23%, rgba(5,5,5,.94) 34%, rgba(5,5,5,.56) 52%, rgba(5,5,5,.06) 76%);
}

.mbo-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.06) 60%, rgba(0,0,0,.32));
}

.mbo-hero__inner {
    min-height: inherit;
    display: flex;
    align-items: center;
    padding-block: clamp(70px, 8vw, 108px);
}

.mbo-hero__copy { width: min(100%, 550px); }

.mbo-breadcrumb {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 26px;
    font: 600 .75rem/1.4 var(--mbo-interface);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mbo-gold);
}

.mbo-breadcrumb a { text-decoration: none; }
.mbo-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }

.mbo-hero h1,
.mbo-essential h2,
.mbo-journey h2 {
    margin: 0;
    font-family: var(--mbo-display);
    font-weight: 400;
    letter-spacing: -.025em;
}

.mbo-hero h1 {
    font-size: clamp(3.6rem, 6.2vw, 6rem);
    line-height: .96;
    text-wrap: balance;
}

.mbo-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 210px;
    margin: 24px 0 24px;
    color: var(--mbo-gold);
}
.mbo-divider span { height: 1px; flex: 1; background: currentColor; opacity: .58; }
.mbo-divider i { font: normal 15px/1 var(--mbo-display); }
.mbo-divider--left { width: 170px; margin-block: 18px 25px; }

.mbo-hero__statement {
    margin: 0 0 20px;
    font: 400 clamp(1.65rem, 2.6vw, 2.35rem)/1.22 var(--mbo-display);
    color: var(--mbo-gold);
}

.mbo-hero__lead {
    max-width: 500px;
    margin: 0;
    font: 400 clamp(1rem, 1.15vw, 1.13rem)/1.72 var(--mbo-interface);
    color: rgba(243,239,229,.88);
}

.mbo-button {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    min-height: 50px;
    margin-top: 34px;
    padding: 0 20px;
    border: 1px solid rgba(211,170,53,.76);
    border-radius: 5px;
    background: rgba(5,5,5,.4);
    color: var(--mbo-gold);
    text-decoration: none;
    font: 600 .78rem/1 var(--mbo-interface);
    letter-spacing: .09em;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.mbo-button:hover { background: var(--mbo-gold); color: #090909; transform: translateY(-1px); }
.mbo-button:focus-visible { outline: 2px solid var(--mbo-ivory); outline-offset: 4px; }

.mbo-principles {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,.015), transparent),
        #080a09;
    border-bottom: 1px solid rgba(211,170,53,.16);
}

.mbo-principles__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-block: 34px;
}

.mbo-principle {
    position: relative;
    min-height: 190px;
    padding: 20px clamp(22px, 2.8vw, 42px) 22px;
    text-align: center;
    overflow: hidden;
}
.mbo-principle + .mbo-principle { border-left: 1px solid rgba(211,170,53,.20); }
.mbo-principle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(8,10,9,.94), rgba(8,10,9,.94)), var(--mbo-card-image, none) center / cover;
    z-index: 0;
}
.mbo-principle > * { position: relative; z-index: 1; }

.mbo-principle__icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    color: var(--mbo-gold);
}
.mbo-principle__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.mbo-principle h2 {
    margin: 0 0 10px;
    font: 400 clamp(1.08rem, 1.4vw, 1.28rem)/1.25 var(--mbo-display);
    color: var(--mbo-gold);
}
.mbo-principle p {
    max-width: 230px;
    margin: 0 auto;
    font: 400 .9rem/1.62 var(--mbo-interface);
    color: rgba(243,239,229,.77);
}

.mbo-essential { padding: clamp(54px, 6.4vw, 88px) 0 20px; background: #070807; }

.mbo-essential__panel {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(211,170,53,.34);
    border-radius: 10px;
    background: linear-gradient(135deg, #0b0d0c, #090a09);
    box-shadow: 0 28px 80px rgba(0,0,0,.22);
}

.mbo-essential__media { margin: 0; min-height: 100%; }
.mbo-essential__media img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; object-position: center; }

.mbo-essential__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 5vw, 82px);
}

.mbo-eyebrow {
    margin: 0 0 12px;
    font: 600 .73rem/1.4 var(--mbo-interface);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mbo-gold);
}

.mbo-essential h2 { font-size: clamp(2.5rem, 4.2vw, 4rem); line-height: 1.02; }
.mbo-essential__copy > p:not(.mbo-eyebrow) {
    margin: 0 0 14px;
    font: 400 clamp(.98rem, 1.05vw, 1.08rem)/1.7 var(--mbo-interface);
    color: rgba(243,239,229,.82);
}
.mbo-essential__copy > p:last-child { margin-bottom: 0; }

.mbo-journey { padding: 24px 0 clamp(64px, 7vw, 96px); background: #070807; }

.mbo-journey__panel {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 44px;
    align-items: center;
    padding: clamp(30px, 4.2vw, 54px);
    border: 1px solid rgba(211,170,53,.29);
    border-radius: 10px;
    background:
        radial-gradient(circle at 23% 0%, rgba(211,170,53,.05), transparent 28%),
        #0a0c0b;
}

.mbo-journey__title h2 { font-size: clamp(2rem, 3.1vw, 3rem); line-height: 1.07; }
.mbo-journey__steps { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr; align-items: center; gap: 10px; }

.mbo-journey__step {
    min-width: 0;
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, color .2s ease;
}
.mbo-journey__step:hover { transform: translateY(-3px); }
.mbo-journey__step:focus-visible { outline: 2px solid var(--mbo-gold); outline-offset: 6px; border-radius: 6px; }
.mbo-journey__hex {
    display: grid;
    place-items: center;
    width: 76px;
    height: 70px;
    margin: 0 auto 12px;
    color: #aca99f;
    border: 1px solid rgba(243,239,229,.34);
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
    background: #080908;
}
.mbo-journey__hex svg { width: 43px; height: 43px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mbo-journey__step.is-current .mbo-journey__hex { color: var(--mbo-gold); border-color: var(--mbo-gold); box-shadow: 0 0 26px rgba(211,170,53,.18); }
.mbo-journey__type { display: block; font: 500 .78rem/1.3 var(--mbo-interface); letter-spacing: .04em; color: rgba(243,239,229,.78); }
.mbo-journey__step strong { display: block; margin-top: 4px; font: 400 .83rem/1.35 var(--mbo-interface); color: rgba(243,239,229,.66); }
.mbo-journey__step.is-current strong { color: var(--mbo-gold); }
.mbo-journey__arrow { text-align: center; color: var(--mbo-gold); font: 300 2rem/1 var(--mbo-display); opacity: .8; }

[data-mbo-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
[data-mbo-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-mbo-reveal] { opacity: 1; transform: none; transition: none; }
    .mbo-button, .mbo-journey__step { transition: none; }
}

@media (max-width: 1100px) {
    .mbo-container { width: min(100% - 40px, 1180px); }
    .mbo-principles__grid { grid-template-columns: repeat(2, 1fr); }
    .mbo-principle:nth-child(3) { border-left: 0; border-top: 1px solid rgba(211,170,53,.20); }
    .mbo-principle:nth-child(4) { border-top: 1px solid rgba(211,170,53,.20); }
    .mbo-journey__panel { grid-template-columns: 1fr; }
    .mbo-journey__title { text-align: center; }
    .mbo-journey__title h2 br { display: none; }
}

@media (max-width: 860px) {
    .mbo-hero {
        min-height: 760px;
        background-position: 66% center;
    }
    .mbo-hero::before {
        background: linear-gradient(90deg, rgba(5,5,5,.98) 0%, rgba(5,5,5,.92) 46%, rgba(5,5,5,.42) 72%, rgba(5,5,5,.15) 100%);
    }
    .mbo-hero__copy { width: min(100%, 480px); }
    .mbo-essential__panel { grid-template-columns: 1fr; }
    .mbo-essential__media img { min-height: 340px; max-height: 460px; }
    .mbo-essential__copy { padding: 42px; }
    .mbo-journey__steps { grid-template-columns: repeat(4, 1fr); gap: 22px; }
    .mbo-journey__arrow { display: none; }
}

@media (max-width: 640px) {
    .mbo-container { width: min(100% - 28px, 620px); }
    .mbo-hero { min-height: 710px; background-position: 70% center; }
    .mbo-hero::before {
        background:
            linear-gradient(180deg, rgba(5,5,5,.18), rgba(5,5,5,.58) 46%, #050505 83%),
            linear-gradient(90deg, rgba(5,5,5,.87), rgba(5,5,5,.20));
    }
    .mbo-hero__inner { align-items: flex-end; padding-block: 58px; }
    .mbo-hero h1 { font-size: clamp(3rem, 15vw, 4.4rem); }
    .mbo-hero__lead { font-size: 1rem; line-height: 1.62; }
    .mbo-principles__grid { grid-template-columns: 1fr; padding-block: 0; }
    .mbo-principle { padding: 30px 24px; }
    .mbo-principle + .mbo-principle { border-left: 0; border-top: 1px solid rgba(211,170,53,.20); }
    .mbo-essential { padding-top: 42px; }
    .mbo-essential__media img { min-height: 280px; }
    .mbo-essential__copy { padding: 32px 25px 36px; }
    .mbo-journey__panel { padding: 34px 20px; }
    .mbo-journey__steps { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
}