<div class="article-template__content mm-spotlight-wrapper">
  <style>
    /* 1. RESET & BREAKOUT */
    .mm-spotlight-wrapper {
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Forced Cinematic Background Override */
    .mm-full-bleed-ombre {
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        transform: translateX(-50%);
        
        /* The Middle Ombre Logic */
        background: linear-gradient(180deg, #162421 0%, #0a0a0a 45%, #23190e 100%) !important;
        color: #fafafa !important;
        padding: 80px 5%;
        box-sizing: border-box;
    }

    /* 2. THE BRAND ELEMENTS */
    .mm-brand-header {
        max-width: 960px; /* Aligned to your article-header width */
        margin: 0 auto 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mm-dots { display: flex; gap: 6px; align-items: center; }
    .mm-dot { width: 8px; height: 8px; border-radius: 50%; }
    .mm-dot.mint { background: #4ade80; box-shadow: 0 0 15px #4ade80; }
    .mm-dot.mango { background: #ff9d00; box-shadow: 0 0 15px #ff9d00; }

    .mm-kicker {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4em;
        color: #ff9d00;
        font-weight: 800;
        margin-bottom: 20px;
        display: block;
    }

    .mm-headline {
        max-width: 960px;
        margin: 0 auto 40px;
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.04em;
    }

    .mm-strategic-grid {
        max-width: 960px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 60px;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 40px;
    }

    .mm-lead-text {
        font-size: 1.25rem;
        line-height: 1.6;
        color: #fafafa;
    }

    /* 3. ARTIFACTS ROW (SPOTLIGHT STYLE) */
    .mm-artifact-container {
        max-width: 960px;
        margin: 80px auto 0;
    }

    .mm-artifact-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        text-decoration: none !important;
        color: inherit !important;
        transition: all 0.4s ease;
    }

    .mm-artifact-row:hover {
        background: rgba(255,255,255,0.03);
        padding-left: 15px;
    }

    .mm-artifact-title { font-size: 1.4rem; font-weight: 700; }
    .mm-artifact-meta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.5; }

    @media screen and (max-width: 750px) {
        .mm-strategic-grid { grid-template-columns: 1fr; gap: 30px; }
        .mm-brand-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    }
  </style>

  <div class="mm-full-bleed-ombre">
    <header class="mm-brand-header">
        <div class="mm-dots">
            <div class="mm-dot mint"></div>
            <div class="mm-dot mango"></div>
            <span style="letter-spacing: 0.3em; font-size: 10px; font-weight: 700;">MINT & MANGO CO.</span>
        </div>
        <div class="caption-with-letter-spacing" style="color: rgba(255,255,255,0.4)">ADS PLATFORM OPS // 2025</div>
    </header>

    <span class="mm-kicker">Strategy with Soul</span>
    <h1 class="mm-headline">Leading Scale. <br><span style="opacity: 0.4;">Operationalizing Soul.</span></h1>

    <div class="mm-strategic-grid">
        <div class="mm-lead-text">
            I bridge the gap between <strong>complex data architecture</strong> and cinematic user experience. With $3.3B in enterprise transitions led, I build the "Intelligent Infrastructure" that honors the human at the center of the machine.
        </div>
        <div class="caption-with-letter-spacing" style="color: rgba(255,255,255,0.5); line-height: 2;">
            D. BAEZ<br>
            SAFe RTE • 2x SaaS Founder<br>
            Rare Disease Advocate
        </div>
    </div>

    <div class="mm-artifact-container">
        <a href="#" class="mm-artifact-row">
            <span class="mm-artifact-title">$3.3B Medicare Divestiture</span>
            <span class="mm-artifact-meta">Infrastructure</span>
        </a>
        <a href="#" class="mm-artifact-row">
            <span class="mm-artifact-title">Nutricia Patient Advocacy</span>
            <span class="mm-artifact-meta">Strategic Soul</span>
        </a>
        <a href="#" class="mm-artifact-row">
            <span class="mm-artifact-title">Operational Leakage Tooling</span>
            <span class="mm-artifact-meta">Efficiency Logic</span>
        </a>
    </div>

    <footer style="margin-top: 80px; text-align: center;">
        <a href="mailto:danielle@mintandmango.co" style="display: inline-block; border: 1px solid #fff; padding: 18px 45px; color: #fff; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;">Begin Partnership</a>
    </footer>
  </div>
</div>