/*
Theme Name: MeVaChi Core Engine
Theme URI: https://mevachi.com
Author: MeVaChi Solutions
Description: Bare-metal execution environment for Level 3 headless architecture.
Version: 1.0.0
Text Domain: mevachi-core
*/

/* =========================================
   GLOBAL AESTHETICS & FONTS
========================================= */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-color: #fbfbfd;
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   MEVACHI CORE - UNIFIED HEADER ENGINE
========================================= */
.mevachi-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    background-color: transparent; 
    transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, padding 0.4s ease;
    padding: 25px 50px;
    box-sizing: border-box;
}

.mevachi-sticky.is-scrolled {
    background-color: #ffffff; 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); 
    padding: 15px 50px;
}

.mevachi-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Logo Sizing */
.mvc-logo img {
    height: 35px;
    width: auto;
    display: block;
    transition: opacity 0.4s ease;
}

/* =========================================
   DESKTOP NAVIGATION (1025px and wider)
========================================= */
@media (min-width: 1025px) {
    .mvc-mobile-toggle, .mvc-overlay { display: none !important; }

    .mvc-desktop-menu {
        display: flex;
        gap: 40px;
        align-items: center;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mvc-desktop-menu > li {
        position: relative;
    }

    .mvc-desktop-menu a {
        color: #ffffff;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.5px;
        transition: color 0.3s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mevachi-sticky.is-scrolled .mvc-desktop-menu > li > a {
        color: #0F1115;
    }

    .mvc-desktop-menu a:hover {
        color: #019CB2;
    }

    /* Desktop Dropdown Panels */
    .mvc-desktop-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        background: #ffffff;
        list-style: none;
        padding: 10px 0;
        margin: 0;
        border-radius: 8px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        border: 1px solid rgba(0,0,0,0.05);
        min-width: 220px;
        
        /* THE FLUID MASK - Starts hidden, rolled to the top */
        opacity: 0;
        visibility: hidden;
        clip-path: inset(0 0 100% 0);
        transform: translateY(-5px);
        transition: opacity 0.3s ease, clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Show Dropdown on Hover (Unrolls downward) */
    .mvc-desktop-menu li.has-dropdown:hover > .mvc-desktop-submenu {
        opacity: 1;
        visibility: visible;
        clip-path: inset(-20% -20% -20% -20%); /* Expands mask to allow box-shadow to show */
        transform: translateY(0);
    }

    .mvc-desktop-submenu li a {
        color: #0a0a0a !important;
        font-size: 14px;
        padding: 12px 24px;
        transition: all 0.3s ease;
    }

    .mvc-desktop-submenu li a:hover {
        background-color: rgba(1, 156, 178, 0.05);
        color: #019CB2 !important;
    }

    /* Nested Desktop Dropdown (Horizontal Fluid Mask) */
    .mvc-desktop-submenu li.nested { position: relative; }
    
    .mvc-desktop-submenu .nested-menu {
        top: 0;
        left: 100%;
        /* Starts hidden, rolled to the left */
        clip-path: inset(0 100% 0 0);
        transform: translateX(-5px); 
    }

    .mvc-desktop-submenu li.nested:hover > .nested-menu {
        clip-path: inset(-20% -20% -20% -20%);
        transform: translateX(0);
    }

    /* MEGA MENU ARCHITECTURE */
    .mvc-mega-trigger {
        position: relative;
    }

    .mvc-mega-menu {
        position: absolute;
        top: 100%;
        right: -100px; 
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 12px;
        box-shadow: 0 24px 48px rgba(0,0,0,0.08);
        width: 750px; 
        padding: 35px;
        z-index: 99;
        
        /* THE FLUID MASK */
        opacity: 0;
        visibility: hidden;
        clip-path: inset(0 0 100% 0);
        transform: translateY(-5px);
        transition: opacity 0.3s ease, clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mvc-desktop-menu li.mvc-mega-trigger:hover > .mvc-mega-menu {
        opacity: 1;
        visibility: visible;
        clip-path: inset(-20% -20% -20% -20%);
        transform: translateY(0);
    }

    .mega-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1.3fr;
        gap: 40px;
    }

    .mega-heading {
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #888;
        margin-bottom: 20px;
        font-weight: 600;
    }

    .mega-column ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mega-column ul li a {
        color: #0a0a0a !important;
        font-size: 14px;
        padding: 0 !important;
        transition: color 0.3s ease;
        display: inline-block;
    }

    .mega-column ul li a:hover {
        color: #019CB2 !important;
        background: transparent !important;
    }

    /* Featured Data Card */
    .mega-featured {
        background: #f5f5f7;
        border-radius: 8px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 1px solid rgba(0,0,0,0.03);
    }

    .mega-card h4 {
        margin: 0 0 10px 0;
        font-size: 16px;
        color: #0F1115;
        font-weight: 600;
        letter-spacing: -0.3px;
    }

    .mega-card p {
        margin: 0 0 20px 0;
        font-size: 13px;
        color: #555;
        line-height: 1.6;
    }

    .mega-link {
        font-size: 13px !important;
        color: #019CB2 !important;
        font-weight: 600;
        padding: 0 !important;
    }
}

/* =========================================
   MOBILE NAVIGATION (1024px and smaller)
========================================= */
@media (max-width: 1024px) {
    .mvc-desktop-nav { display: none !important; }
    .mevachi-sticky { padding: 20px; }
    .mevachi-sticky.is-scrolled { padding: 15px 20px; }

    .mvc-overlay, .mvc-overlay * {
        -webkit-tap-highlight-color: transparent;
        outline: none;
        user-select: none; 
    }

    .mvc-mobile-toggle {
        background: transparent;
        border: none;
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 6px;
        padding: 0;
        z-index: 100000;
    }

    .mvc-bar {
        width: 28px;
        height: 2px;
        background-color: #ffffff; 
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
    }

    .mevachi-sticky.is-scrolled .mvc-bar { background-color: #0F1115; }
    .mvc-mobile-toggle.is-active .mvc-bar { background-color: #ffffff; }
    .mvc-mobile-toggle.is-active .top-bar { transform: translateY(4px) rotate(45deg); }
    .mvc-mobile-toggle.is-active .bottom-bar { transform: translateY(-4px) rotate(-45deg); }

    .mvc-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.85); 
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        z-index: 99998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        overflow-y: auto;
    }

    .mvc-overlay.is-active { opacity: 1; visibility: visible; }

    .mvc-nav-container {
        padding: 100px 40px 40px 40px; 
        max-width: 600px;
        margin: 0 auto;
    }

    .mvc-main-menu { list-style: none; padding: 0; margin: 0; }
    .mvc-nav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

    button.mvc-dropdown-trigger {
        background: none; border: none; width: 100%; text-align: left;
        cursor: pointer; font-family: inherit; padding: 0; margin: 0;
        color: #f5f5f7; font-size: 28px; font-weight: 600;
        display: flex; justify-content: space-between; align-items: center;
        padding: 24px 0; letter-spacing: -0.5px;
    }

    .mvc-nav-item > a {
        display: flex; justify-content: space-between; align-items: center;
        color: #f5f5f7; font-size: 28px; font-weight: 600;
        text-decoration: none; padding: 24px 0; letter-spacing: -0.5px;
    }

    .fade-in-link {
        opacity: 0; transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mvc-overlay.is-active .fade-in-link { opacity: 1; transform: translateY(0); }
    .mvc-overlay.is-active .fade-in-link:nth-child(1) { transition-delay: 0.1s; }
    .mvc-overlay.is-active .fade-in-link:nth-child(2) { transition-delay: 0.15s; }
    .mvc-overlay.is-active .fade-in-link:nth-child(3) { transition-delay: 0.2s; }
    .mvc-overlay.is-active .fade-in-link:nth-child(4) { transition-delay: 0.25s; }
    .mvc-overlay.is-active .fade-in-link:nth-child(5) { transition-delay: 0.3s; }

    /* =====================================
       HIERARCHY FIXES (Level 1 Submenu) 
    ===================================== */
    .mvc-submenu {
        list-style: none; padding: 0 0 0 15px; margin: 0;
        max-height: 0; overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .mvc-submenu > li > a, button.mvc-nested-trigger {
        display: flex; justify-content: space-between; align-items: center;
        color: #a1a1a6; font-size: 18px; font-weight: 500;
        text-decoration: none; padding: 16px 0;
        width: 100%; background: none; border: none; font-family: inherit; cursor: pointer;
    }

    /* =====================================
       HIERARCHY FIXES (Level 2 Nested Menu) 
    ===================================== */
    .mvc-nested-submenu {
        list-style: none; 
        padding: 0 0 0 20px; /* Indent the nested container */
        margin: 5px 0 10px 0;
        border-left: 1px solid rgba(255, 255, 255, 0.15); /* The visual folder line */
        max-height: 0; overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .mvc-nested-submenu > li > a {
        display: block; 
        color: #717176; 
        font-size: 16px; 
        padding: 12px 0 12px 15px; /* Space out the links from the vertical line */
        text-decoration: none;
    }

    /* Chevron Animations */
    .mvc-chevron { transition: transform 0.3s ease; opacity: 0.5; color: #fff; }
    .mvc-nav-item.is-open > a > .mvc-chevron, 
    .mvc-nav-item.is-open > button > .mvc-chevron, 
    .nested-dropdown.is-open > .mvc-nested-trigger > .mvc-chevron { 
        transform: rotate(180deg); 
    }
    
    body.mvc-scroll-lock { overflow: hidden !important; }
}

/* =========================================
   HEADER CORRECTION: SINGLE POSTS & ARTICLES
========================================= */
/* Keep the header completely transparent at the top, 
   but force the text and mobile bars to be dark so they are readable on the white page. */

body.single .mvc-desktop-menu > li > a {
    color: #0F1115;
}

body.single .mvc-bar { 
    background-color: #0F1115; 
}

/* Ensure the hover color remains brand teal */
body.single .mvc-desktop-menu > li > a:hover {
    color: #019CB2 !important;
}


/* =========================================
   FORMS & MODULES
========================================= */
.mevachi-lead-form { margin-top: 20px; }
.mevachi-lead-form label {
    display: block; font-size: 14px; font-weight: 600; color: #1d1d1f; margin-bottom: 8px; letter-spacing: -0.01em;
}
.mevachi-lead-form input[type="text"], .mevachi-lead-form input[type="email"],
.mevachi-lead-form select, .mevachi-lead-form textarea {
    width: 100%; padding: 14px 16px; margin-bottom: 24px; border: 1px solid #d2d2d7;
    border-radius: 12px; background-color: rgba(255, 255, 255, 0.8);
    font-size: 16px; color: #1d1d1f; transition: all 0.3s ease; box-sizing: border-box;
}
.mevachi-lead-form input:focus, .mevachi-lead-form select:focus, .mevachi-lead-form textarea:focus {
    outline: none; border-color: #000000; background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
}
.mevachi-lead-form button {
    width: 100%; padding: 16px; background-color: #000000; color: #ffffff;
    border: none; border-radius: 24px; font-size: 17px; font-weight: 600;
    letter-spacing: -0.02em; cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease;
}
.mevachi-lead-form button:hover { background-color: #333333; transform: scale(0.98); }

/* =========================================
   MEVACHI CORE - HERO SPATIAL ENGINE
========================================= */
.mevachi-iaq-wrapper {
    color: #0F1115; background-color: #ffffff; margin-top: -1px; 
}

.iaq-scroll-track { position: relative; width: 100%; height: 400vh; background: #050505; }

.iaq-sticky-viewport {
    position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(-45deg, #050505, #111a1c, #0a1112, #000000);
    background-size: 400% 400%; animation: gradientShift 15s ease infinite; z-index: 10; 
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
}

#iaqCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.iaq-hero-content {
    position: relative; z-index: 3; text-align: center; max-width: 900px; padding: 0 20px;
    will-change: opacity, transform; 
}
.iaq-hero-title {
    color: #ffffff; font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 300;
    letter-spacing: -0.04em; margin-bottom: 20px;
}
.iaq-hero-subtitle {
    color: rgba(255, 255, 255, 0.7); font-size: 1.2rem; font-weight: 400;
    letter-spacing: 0.02em; line-height: 1.6; max-width: 600px; margin: 0 auto; will-change: opacity;
}

/* FIXED */
.iaq-data-hud {
    position: absolute; top: 100px; right: 40px; z-index: 10;
    background: rgba(15, 17, 21, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08); padding: 20px 30px; border-radius: 12px;
    text-align: right; color: #fff; min-width: 220px;
}
.hud-metric + .hud-metric { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); }
.hud-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: #888; margin-bottom: 5px; }
.hud-value { font-size: 2.8rem; font-weight: 300; line-height: 1; display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; font-variant-numeric: tabular-nums; }
.hud-unit { font-size: 1rem; color: #888; }
.hud-status { font-size: 0.9rem; font-weight: 600; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.1); transition: color 0.5s ease; }

.iaq-micro-data {
    position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 10;
    text-align: center; opacity: 0; will-change: opacity, transform;
}
.micro-data-stat {
    font-size: 1.5rem; font-weight: 300; color: #16656F; background: rgba(22, 101, 111, 0.1);
    border: 1px solid rgba(22, 101, 111, 0.3); padding: 10px 24px; border-radius: 30px; letter-spacing: 0.02em;
}

@media (max-width: 992px) {
    .iaq-data-hud { top: 80px; right: 20px; transform: scale(0.8); transform-origin: top right; }
}

/* =========================================
   HUD TYPOGRAPHY FORCE OVERRIDE (UPDATED)
========================================= */
#mvc-pm-counter, 
#mvc-co2-counter {
    color: #ffffff !important;
    font-size: 2.8rem !important;
    font-weight: 300 !important; /* Forces the premium thin aesthetic */
    line-height: 1 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-variant-numeric: tabular-nums !important; /* Keeps numbers from jumping when they change */
}

.hud-value .hud-unit {
    font-size: 1rem !important;
    color: #888888 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}




/* =========================================
   MEVACHI CORE - SECTION 2: GLOBAL AUDIT
========================================= */
.mvc-threat-section {
    background-color: #ffffff;
    padding: 120px 0;
    position: relative;
    z-index: 20;
    overflow: hidden;
}

.mvc-threat-container {
    display: block;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
}

.mvc-threat-container::after {
    content: "";
    display: table;
    clear: both;
}

.mvc-globe-wrapper {
    position: relative;
    float: left;
    width: 50%;
    height: 650px;
    margin-right: 120px;
    shape-outside: circle(280px at 50% 50%);
    shape-margin: 100px;
}

#earth-3d {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(0.9);
    transform-origin: center center;
}

#data-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transform: scale(0.9);
    transform-origin: center center;
}

.mvc-threat-text-wrapper {
    color: #1d1d1f;
    font-family: 'Inter', -apple-system, sans-serif;
    padding-top: 100px;
    padding-right: 20px;
}

.mvc-threat-text-wrapper h2 {
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-top: 0;
    margin-bottom: 25px;
    color: #1d1d1f;
}

.mvc-threat-text-wrapper p {
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 400;
    color: #515154;
    margin-bottom: 25px;
    text-align: justify;
}

.mvc-threat-text-wrapper strong {
    color: #1d1d1f;
    font-weight: 600;
}

.mvc-highlight-text {
    font-weight: 500 !important;
    color: #1d1d1f !important;
    border-left: none;
    padding-left: 0;
    margin-top: 35px;
}

@media (max-width: 1024px) {
    .mvc-threat-container {
        padding: 0 30px;
    }

    .mvc-globe-wrapper {
        float: none;
        width: 100%;
        height: 50vh;
        min-height: 450px;
        margin-right: 0;
        shape-outside: none;
        margin-bottom: 20px;
    }

    .mvc-threat-text-wrapper {
        padding-top: 0;
        padding-right: 0;
    }

    .mvc-threat-text-wrapper h2 {
        text-align: center;
        margin-top: 20px;
    }

    .mvc-threat-text-wrapper p {
        text-align: left;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .mvc-threat-section {
        padding: 60px 0 80px;
    }
    .mvc-threat-container {
        padding: 0 20px;
    }
}




/* =========================================
   MEVACHI CORE - GLOBAL FOOTER
========================================= */
.mvc-global-footer {
    background-color: #0A0F12; 
    color: #a1a1a6;
    padding: 80px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Inter', -apple-system, sans-serif;
    position: relative;
    z-index: 20;
}

.mvc-footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
}

/* 3-Column Desktop Layout */
.mvc-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin-bottom: 60px;
}

.mvc-footer-heading {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

/* Link & List Formatting */
.mvc-footer-links, .mvc-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mvc-footer-links a, .mvc-footer-contact a {
    color: #a1a1a6;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.mvc-footer-links a:hover, .mvc-footer-contact a:hover {
    color: #019CB2; /* MeVaChi Cyan */
}

/* Contact Details & Premium SVGs */
.mvc-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.mvc-footer-contact svg {
    width: 18px;
    height: 18px;
    color: #019CB2;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Partner Logo Adjustment */
.mvc-partner-logo {
    max-width: 180px;
    height: auto;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    /* Uncomment the line below if you upload a dark/black logo and need to force it to be white */
    /* filter: brightness(0) invert(1); */
}

.mvc-partner-logo:hover {
    opacity: 1;
}

/* Bottom Legal Bar */
.mvc-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
}

.mvc-legal-links {
    display: flex;
    gap: 24px;
}

.mvc-legal-links a {
    color: #a1a1a6;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mvc-legal-links a:hover {
    color: #ffffff;
}

/* Mobile Responsive Engine */
@media (max-width: 1024px) {
    .mvc-footer-container { padding: 0 30px; }
    .mvc-footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .mvc-global-footer { padding: 60px 0 30px; }
    .mvc-footer-container { padding: 0 20px; }
    .mvc-footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .mvc-footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
    .mvc-legal-links { flex-wrap: wrap; justify-content: center; gap: 15px; }
}


/* =========================================
   MEVACHI CORE - SECTION 3: HARDWARE LOCK ENGINE
========================================= */
.mvc-hw-lock-section {
    background-color: #FFFFFF;
    width: 100%;
    position: relative;
    z-index: 10;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Flexbox architecture is required for 'sticky' to function */
.mvc-hw-container {
    display: flex;
    align-items: flex-start; /* CRITICAL: Allows the right column to stick while the left scrolls */
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: 140px 50px;
    gap: 80px;
}

/* --- Left Column: Narrative --- */
.mvc-hw-text-track {
    flex: 1;
    /* Massive bottom padding ensures the user can scroll the very last item all the way up to the center of the screen */
    padding-bottom: 50vh; 
}

/* The fading mechanics */
.mvc-hw-block {
    opacity: 0.15; /* Dimmed state */
    transform: translateX(-20px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mvc-hw-block.is-active {
    opacity: 1; /* Lit up state */
    transform: translateX(0);
}

.mvc-hw-headline-block {
    margin-bottom: 120px; /* Separates the headline from the list */
}

.mvc-hw-title {
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 600;
    color: #111111;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 20px 0;
}

.mvc-hw-intro {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #55555A;
    margin: 0;
}

.mvc-hw-feature-list {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Generous spacing so only one feature highlights at a time */
}

.mvc-hw-feature-item h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111111;
    margin: 0 0 10px 0;
}

.mvc-hw-feature-item p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

/* --- Right Column: Sticky Video --- */
.mvc-hw-visual-track {
    flex: 1.2;
    position: sticky;
    top: 15vh; /* Locks the video slightly below the top of the monitor */
    height: 70vh; /* Keeps the video large, but within the screen bounds */
    display: flex;
    align-items: center;
    justify-content: center;
}

.mvc-hw-video-wrapper {
    width: 100%;
    height: 100%;
    background: #000000;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    /* The subtle border gives it a physical 'hardware' look */
    border: 1px solid rgba(0,0,0,0.05); 
}

.mvc-hw-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Prevents ugly black bars on the sides of the video */
    display: block;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 1024px) {
    .mvc-hw-container {
        flex-direction: column; /* Stack video and text on mobile */
        padding: 80px 20px;
        gap: 50px;
    }
    
    .mvc-hw-visual-track {
        order: -1; /* Pushes the video above the text on mobile */
        position: relative; /* Turns off sticky so iOS doesn't glitch */
        top: 0;
        height: auto;
        width: 100%;
    }

    .mvc-hw-video-wrapper {
        aspect-ratio: 16 / 9; /* Enforces a clean video rectangle on phones */
    }

    .mvc-hw-text-track {
        padding-bottom: 0; /* Removes the desktop scroll gap */
    }

    /* On mobile, disable the fade-in effect since the user is scrolling normally */
    .mvc-hw-block {
        opacity: 1;
        transform: none;
    }

    .mvc-hw-headline-block {
        margin-bottom: 60px;
    }
}





/* =========================================
   MVC CARE+ PAGE: SECTION OVERVIEW
========================================= */
.mvc-care-section {
    width: 100%;
    background-color: #ffffff;
}

.mvc-care-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #fbfbfd;
}

.mvc-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* REMOVED: .mvc-mobile-video { display: none; } 
   Video routing is now handled by the dynamic JS engine in the PHP file. 
*/

.mvc-care-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}

.mvc-care-text-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px 80px 50px;
}

.mvc-care-title {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #3b424a;
    text-transform: uppercase;
    margin: 0;
}

.mvc-care-content {
    padding: 120px 20px;
    text-align: center;
    background-color: #ffffff;
}

.mvc-care-content-inner {
    max-width: 1050px;
    margin: 0 auto;
}

.mvc-care-content h3 {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    font-weight: 600;
    color: #3b424a;
    margin-top: 0;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.mvc-care-content p {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #515154;
    margin: 0;
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
    .mvc-care-text-wrapper {
        padding: 0 30px 60px 30px;
    }
}

@media (max-width: 768px) {
    /* REMOVED: The mobile/desktop display toggles. 
       The JS engine automatically loads the lightweight mobile video.
    */
    
    .mvc-care-text-wrapper {
        padding: 0 20px 50px 20px;
    }
    
    .mvc-care-title {
        font-size: 1.6rem;
        color: #1d1d1f;
    }
    
    .mvc-care-content {
        padding: 80px 20px;
    }
    
    .mvc-care-content h3 {
        font-size: 1.5rem;
    }
}




.mevachi-segments-section {
    background-color: #ffffff;
    width: 100%;
}

.mevachi-segments-container {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 120px 50px !important;
    box-sizing: border-box !important; 
}

.mevachi-segments-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    gap: 30px; 
    perspective: 1500px;
    width: 100%;
}

@media (max-width: 1024px) {
    .mevachi-segments-container { padding: 100px 30px !important; }
    .mevachi-segments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .mevachi-segments-container { padding: 80px 20px !important; }
    .mevachi-segments-grid { grid-template-columns: minmax(0, 1fr); }
}

.segment-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #111; 
    cursor: pointer;
    width: 100%; 
    will-change: transform, opacity, box-shadow;
    opacity: 0;
    transform: translateY(40px);
    animation: premiumFadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transition: all 0.7s cubic-bezier(0.15, 0.85, 0.35, 1);
}

.segment-card:nth-child(1) { animation-delay: 0.1s; }
.segment-card:nth-child(2) { animation-delay: 0.2s; }
.segment-card:nth-child(3) { animation-delay: 0.3s; }
.segment-card:nth-child(4) { animation-delay: 0.4s; }
.segment-card:nth-child(5) { animation-delay: 0.5s; }
.segment-card:nth-child(6) { animation-delay: 0.6s; }

.segment-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important; 
    object-fit: cover !important;
    filter: brightness(0.9); 
    transition: transform 1.5s cubic-bezier(0.15, 0.85, 0.35, 1), filter 0.5s ease;
    display: block;
}

.segment-overlay {
    position: absolute;
    inset: 0; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
    transition: all 0.6s cubic-bezier(0.15, 0.85, 0.35, 1);
    pointer-events: none; 
}

.segment-title {
    color: #ffffff;
    font-family: 'Inter', -apple-system, sans-serif; 
    font-weight: 500;
    font-size: 1.1rem;
    text-align: center;
    margin: 0;
    letter-spacing: 0.5px;
    transition: all 0.5s ease;
}

.segment-card:hover {
    transform: translateY(-15px) rotateX(4deg) !important;
    box-shadow: 0 40px 80px rgba(0,0,0,0.3) !important;
    z-index: 10;
}

.segment-card:hover img {
    transform: scale(1.12) !important;
    filter: brightness(1.1);
}

.segment-card:hover .segment-overlay {
    background: rgba(22, 101, 111, 0.85); 
    backdrop-filter: blur(10px); 
    justify-content: center; 
}

.segment-card:hover .segment-title {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 1px;
}

@keyframes premiumFadeIn {
    to { opacity: 1; transform: translateY(0); }
}





.mvc-solutions-section {
    background-color: #ffffff;
    padding: 120px 0;
    width: 100%;
}

.mvc-solutions-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
}

.mvc-solutions-header .mvc-section-title {
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.03em;
    margin-bottom: 15px;
    margin-top: 0;
}

.mvc-solutions-header .mvc-section-subtitle {
    font-size: 1.1rem;
    color: #515154;
    font-family: 'Inter', -apple-system, sans-serif;
}

.mvc-solutions-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    
    /* Matched exactly to the Segments section gap */
    gap: 30px; 
    
    /* Hardware lock to prevent theme interference */
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 50px !important;
    box-sizing: border-box !important;
    
    font-family: 'Inter', -apple-system, sans-serif;
}

@media (max-width: 1024px) {
    .mvc-solutions-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 30px;
    }
}

@media (max-width: 768px) {
    .mvc-solutions-section { padding: 80px 0; }
    .mvc-solutions-container {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 20px;
    }
    .mvc-solutions-header { margin-bottom: 40px; }
}

.mvc-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border: 1px solid rgba(1, 156, 178, 0.1); 
    opacity: 0; 
    transform: translateY(40px);
    will-change: transform, opacity, box-shadow;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
}

.mvc-card.is-visible {
    animation: solutionsFadeIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.mvc-card:nth-child(1).is-visible { animation-delay: 0s; }
.mvc-card:nth-child(2).is-visible { animation-delay: 0.15s; }
.mvc-card:nth-child(3).is-visible { animation-delay: 0.3s; }

.mvc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(1, 156, 178, 0.15);
}

.mvc-img-wrapper {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #0a0a0a; 
}

.mvc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: block;
}

.mvc-card:hover .mvc-img {
    transform: scale(1.08);
}

.mvc-content {
    padding: 35px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1; 
}

.mvc-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
}

.mvc-desc {
    font-size: 0.95rem;
    color: #515154;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1; 
}

.mvc-btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #019CB2; 
    text-decoration: none;
    border: 1px solid #019CB2;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: auto; 
}

.mvc-card:hover .mvc-btn {
    background: #019CB2;
    color: #ffffff;
}

@keyframes solutionsFadeIn {
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}





.mvc-clients-section {
    background-color: #ffffff;
    padding: 120px 0 160px 0;
    width: 100%;
}

.mvc-clients-header {
    text-align: center;
    margin-bottom: 80px;
    padding: 0 20px;
}

.mvc-clients-header .mvc-section-title {
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.03em;
    margin: 0;
}

.mvc-clients-container {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 50px !important;
    box-sizing: border-box !important;
}

.mvc-clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px 60px; 
}

/* The Elite Reveal Tile */
.mvc-client-logo {
    flex: 0 0 auto;
    width: 150px; 
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: transparent;
    will-change: background-color;
    transition: background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mvc-client-logo img {
    max-width: 75%;
    max-height: 75%;
    object-fit: contain; 
    opacity: 0.75; 
    will-change: transform, opacity;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
}

/* Subtle, high-end branding tint activation on hover */
.mvc-client-logo:hover {
    background-color: rgba(1, 156, 178, 0.05); 
}

.mvc-client-logo:hover img {
    opacity: 1;
    transform: scale(1.06);
}

@media (max-width: 1024px) {
    .mvc-clients-container { padding: 0 30px !important; }
    .mvc-clients-grid { gap: 30px 40px; }
    .mvc-client-logo { width: 120px; height: 75px; }
}

@media (max-width: 768px) {
    .mvc-clients-section { padding: 80px 0 100px 0; }
    .mvc-clients-container { padding: 0 20px !important; }
    .mvc-clients-grid { gap: 20px 20px; }
    .mvc-client-logo { width: 95px; height: 60px; border-radius: 8px; }
}





/* =========================================
   IAQ PAGE: HERO SCROLL ENGINE
========================================= */
.mvc-iaq-engine {
    background-color: #050505;
    width: 100%;
}

.mvc-s1-wrapper {
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: #050505;
    color: #ffffff;
    margin: 0;
    padding: 0;
}

.mvc-s1-track {
    position: relative;
    width: 100%;
    height: 500vh !important; 
    min-height: 500vh !important;
}

.mvc-s1-viewport {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #050505;
    z-index: 10;
}

/* =========================================
   CINEMATIC VIDEO WRAPPER & DEVICE ROUTING
========================================= */
.mvc-s1-bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(1.2); 
    filter: blur(10px); 
    will-change: transform, filter; /* Forces the GPU to handle the heavy lifting */
}

.mvc-s1-bg-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Guarantees edge-to-edge fill without distortion */
}

/* Default State: Hide Mobile Video on Desktop */
.mvc-video-mobile {
    display: none;
}

/* Mobile State: Hide Desktop Video, Reveal Mobile Video */
@media (max-width: 768px) {
    .mvc-video-desktop { 
        display: none; 
    }
    .mvc-video-mobile { 
        display: block; 
    }
}

.mvc-s1-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 5, 0.9);
    z-index: 2;
}

.mvc-s1-title-container {
    position: absolute;
    z-index: 5;
    text-align: center;
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.mvc-title-line {
    font-size: clamp(2.5rem, 5vw, 5.5rem);
    font-weight: 300;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 0;
    white-space: nowrap;
    will-change: transform, opacity;
}

.mvc-line-1 { color: #ffffff; }
.mvc-line-2 { color: #019CB2; font-weight: 400; }

.mvc-s1-glass-card {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 10;
    width: 90%;
    max-width: 800px;
    background: rgba(15, 17, 21, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px 50px;
    opacity: 0;
    will-change: transform, opacity;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}

.mvc-s1-glass-card p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 20px 0;
}

.mvc-s1-glass-card p:last-child {
    margin: 0;
    color: #ffffff;
    font-weight: 500;
}

.mvc-pollutants-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    z-index: 15;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 50px 20px 10px 20px; 
    opacity: 0; transform: translateY(100px);
    will-change: transform, opacity;
    pointer-events: none; 
}

.mvc-pollutants-header { 
    text-align: center; 
    max-width: 800px; 
    margin-bottom: 15px; 
}

.mvc-pollutants-title { 
    font-size: clamp(1.8rem, 3vw, 2.5rem); 
    font-weight: 300; 
    letter-spacing: -1px; 
    margin-bottom: 5px; 
    color: #ffffff; 
}

.mvc-pollutants-subtitle { 
    font-size: 0.9rem; 
    color: rgba(255, 255, 255, 0.6); 
    line-height: 1.4; 
}

.mvc-grid-scroll-area {
    width: 100%;
    max-width: 1000px; 
}

.mvc-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; 
}

.mvc-pollutant-card {
    background: rgba(15, 17, 21, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 15px 12px; 
    text-align: center;
    transition: transform 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}

.mvc-pollutant-card:hover { 
    background: rgba(22, 101, 111, 0.2); 
    border-color: rgba(1, 156, 178, 0.4); 
    transform: translateY(-4px); 
}

.mvc-card-icon { 
    width: 32px; 
    height: 32px; 
    margin: 0 auto 8px auto; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    background: rgba(1, 156, 178, 0.1); 
    color: #019CB2; 
}

.mvc-card-icon svg { width: 16px; height: 16px; fill: currentColor; } 

.mvc-card-title { font-size: 0.95rem; font-weight: 500; margin-bottom: 6px; color: #ffffff; }
.mvc-card-desc { font-size: 0.75rem; color: rgba(255,255,255,0.5); line-height: 1.3; margin-bottom: 10px; min-height: 34px; }

.mvc-card-metric-box { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 8px; }
.mvc-metric-number { font-size: 1.6rem; font-weight: 300; color: #019CB2; display: flex; align-items: baseline; justify-content: center; gap: 3px; }
.mvc-metric-unit { font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); }
.mvc-metric-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1.2px; color: #888; margin-top: 2px; }

@media (max-width: 1024px) {
    .mvc-pollutants-wrapper { padding-top: 100px; }
    .mvc-grid-container { grid-template-columns: repeat(2, 1fr); }
    .mvc-title-line { font-size: 2.2rem; white-space: normal; }
}

@media (max-width: 768px) {
    .mvc-pollutants-wrapper { padding: 60px 0 20px 0; }
    .mvc-pollutants-header { padding: 0 20px; margin-bottom: 20px; }
    .mvc-pollutants-title { font-size: 1.8rem; }
    
    .mvc-grid-scroll-area {
        overflow-x: auto;
        overflow-y: hidden; 
        scroll-snap-type: x mandatory; 
        padding-bottom: 20px;
        scrollbar-width: none; 
        -ms-overflow-style: none; 
    }
    
    .mvc-grid-scroll-area::-webkit-scrollbar { display: none; }
    
    .mvc-grid-container {
        display: grid;
        grid-template-columns:none;
        grid-auto-flow: column;
        grid-auto-columns: 85%; 
        gap: 15px;
        padding: 0 20px; 
    }
    
    .mvc-pollutant-card { scroll-snap-align: center; }
    .mvc-card-desc { min-height: auto; }
}





/* =========================================
   IAQ PAGE: SECTION 2 - ARCHITECTURE
========================================= */
.mvc-s2-wrapper {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff; 
    color: #0F1115; 
    margin: 0;
    padding: 0;
}

.mvc-s2-track {
    position: relative;
    width: 100%;
    height: 400vh !important; 
    min-height: 400vh !important;
}

.mvc-s2-viewport {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    z-index: 10;
    background-image: radial-gradient(circle at 70% 50%, rgba(1, 156, 178, 0.05) 0%, #ffffff 50%);
}

.mvc-s2-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    gap: 40px;
}

/* Left Side: Typography */
.mvc-s2-text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 500px;
}

.mvc-s2-header { margin-bottom: 25px; }

.mvc-s2-title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 300;
    letter-spacing: -1px;
    margin-bottom: 10px;
    color: #0F1115; 
    line-height: 1.1;
}

.mvc-s2-subtitle {
    font-size: 1rem;
    color: rgba(15, 17, 21, 0.65); 
    line-height: 1.5;
}

.mvc-stage-item {
    margin-bottom: 15px;
    padding-left: 15px;
    border-left: 2px solid rgba(0,0,0,0.08); 
    opacity: 0.3; 
    transform: translateX(-10px);
    transition: all 0.5s ease;
}

.mvc-stage-item h4 { font-size: 1.15rem; font-weight: 500; margin: 0 0 5px 0; color: #0F1115; }
.mvc-stage-item p { font-size: 0.9rem; color: rgba(15, 17, 21, 0.7); margin: 0; line-height: 1.5; }

.mvc-stage-item.is-active {
    opacity: 1;
    transform: translateX(0);
    border-left-color: #019CB2; 
}
.mvc-stage-item.is-active h4 { color: #019CB2; }

.mvc-advantage-card {
    margin-top: 20px;
    background: rgba(1, 156, 178, 0.04); 
    border: 1px solid rgba(1, 156, 178, 0.2);
    padding: 20px;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}
.mvc-advantage-card h4 { color: #019CB2; margin: 0 0 8px 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.mvc-advantage-card p { margin: 0; font-size: 0.85rem; color: rgba(15, 17, 21, 0.8); line-height: 1.6; }

/* Right Side: 3D Isometric Filters */
.mvc-s2-visual-column {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.mvc-iso-stack {
    position: relative;
    width: 320px;
    height: 320px;
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(-45deg);
}

.mvc-iso-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.1s linear, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mvcLayer1 {
    background: rgba(240, 240, 240, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px);
    background-size: 10px 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

#mvcLayer2 {
    background: rgba(1, 156, 178, 0.05);
    border: 1px solid rgba(1, 156, 178, 0.3);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(1, 156, 178, 0.08) 10px, rgba(1, 156, 178, 0.08) 20px);
}

#mvcLayer3 {
    background: rgba(40, 40, 40, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-image: radial-gradient(rgba(0, 0, 0, 0.8) 2px, transparent 2px);
    background-size: 6px 6px;
}

.is-glowing-1 { border-color: #0F1115 !important; box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important; }
.is-glowing-2 { border-color: #019CB2 !important; box-shadow: 0 15px 40px rgba(1, 156, 178, 0.2) !important; }
.is-glowing-3 { border-color: #019CB2 !important; box-shadow: 0 15px 40px rgba(1, 156, 178, 0.3) !important; }

/* Responsive / Mobile Fixes */
@media (max-height: 800px) {
    .mvc-s2-title { font-size: 1.8rem; margin-bottom: 5px; }
    .mvc-s2-header { margin-bottom: 15px; }
    .mvc-stage-item { margin-bottom: 10px; padding-left: 10px; }
    .mvc-stage-item h4 { font-size: 1rem; }
    .mvc-stage-item p { font-size: 0.8rem; line-height: 1.4; }
    .mvc-advantage-card { margin-top: 10px; padding: 15px; }
    .mvc-advantage-card h4 { font-size: 0.9rem; margin-bottom: 5px; }
    .mvc-advantage-card p { font-size: 0.8rem; }
    .mvc-iso-stack { transform: rotateX(60deg) rotateZ(-45deg) scale(0.8); }
}

@media (max-width: 1024px) {
    .mvc-s2-container { 
        flex-direction: column; 
        padding: 80px 20px 20px 20px; 
        gap: 30px; 
    }
    .mvc-s2-text-column { max-width: 100%; }
    .mvc-iso-stack { 
        width: 250px; 
        height: 250px; 
        transform: rotateX(60deg) rotateZ(-45deg) scale(0.7); 
        margin-top: 0; 
    }
}

@media (max-width: 768px) {
    .mvc-s2-container { padding-top: 70px; gap: 20px; }
    .mvc-iso-stack { transform: rotateX(60deg) rotateZ(-45deg) scale(0.6); }
}





/* =========================================
   IAQ PAGE: SECTION 3 - WORKFLOW
========================================= */
.mvc-s3-wrapper {
    background-color: #ffffff; 
    font-family: 'Inter', sans-serif;
    color: #0F1115; 
    margin: 0;
    padding: 0;
    position: relative;
}

.mvc-s3-track {
    position: relative;
    width: 100%;
    height: 400vh !important; 
    min-height: 400vh !important;
}

.mvc-s3-viewport {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    z-index: 10;
    padding: 0 20px;
}

.mvc-s3-viewport::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1000px;
    height: 1px;
    background: radial-gradient(circle, rgba(1, 156, 178, 0.2) 0%, transparent 70%);
    box-shadow: 0 0 60px 15px rgba(1, 156, 178, 0.08);
}

.mvc-s3-header {
    text-align: center;
    max-width: 800px;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
}

.mvc-s3-title {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 300;
    letter-spacing: -1px;
    margin-bottom: 15px;
    color: #0F1115;
    line-height: 1.1;
}

.mvc-s3-subtitle {
    font-size: 1.1rem;
    color: rgba(15, 17, 21, 0.65);
    line-height: 1.6;
}

.mvc-workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1300px;
    width: 100%;
    position: relative;
}

.mvc-workflow-thread {
    position: absolute;
    top: 40px; 
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    z-index: 1;
}

.mvc-thread-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #019CB2;
    width: 0%; 
    box-shadow: 0 0 10px rgba(1, 156, 178, 0.5);
}

.mvc-step-card {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    opacity: 0;
    transform: translateY(50px);
}

.mvc-step-card.is-active {
    border-color: rgba(1, 156, 178, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); 
}

.mvc-step-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.08);
    color: #0F1115;
    transition: all 0.4s ease;
    position: relative;
}

.mvc-step-number {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #019CB2;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.mvc-step-icon svg { width: 35px; height: 35px; fill: currentColor; transition: fill 0.4s ease; }

.mvc-step-card.is-active .mvc-step-icon { border-color: #019CB2; color: #019CB2; background: rgba(1, 156, 178, 0.03); }

.mvc-step-title { font-size: 1.25rem; font-weight: 500; margin-bottom: 15px; color: #0F1115; line-height: 1.3; }
.mvc-step-desc { font-size: 0.9rem; color: rgba(15, 17, 21, 0.7); line-height: 1.6; margin: 0; }

@media (max-width: 1200px) {
    .mvc-workflow-grid { gap: 20px; }
    .mvc-step-card { padding: 30px 20px; }
    .mvc-step-title { font-size: 1.1rem; }
}

@media (max-height: 800px) {
    .mvc-s3-title { font-size: 2rem; margin-bottom: 5px;}
    .mvc-s3-header { margin-bottom: 30px; }
    .mvc-step-card { padding: 25px 20px; }
    .mvc-step-icon { width: 60px; height: 60px; margin-bottom: 15px; }
    .mvc-step-icon svg { width: 25px; height: 25px; }
    .mvc-step-desc { font-size: 0.8rem; }
    .mvc-workflow-thread { top: 30px; }
}

@media (max-width: 1024px) {
    .mvc-s3-viewport { height: auto; position: relative !important; padding: 100px 20px; }
    .mvc-s3-track { height: auto !important; min-height: auto !important; }
    .mvc-workflow-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .mvc-workflow-thread { display: none; }
}

@media (max-width: 768px) {
    .mvc-workflow-grid { grid-template-columns: 1fr; }
    .mvc-step-card { text-align: center; }
    .mvc-step-icon { margin: 0 auto 20px auto; }
}





/* =========================================
   GLOBAL MOBILE STABILITY FIXES
========================================= */
/* 1. Prevent horizontal screen bleed universally */
html, body {
    overflow-x: clip !important;
    width: 100%;
    position: relative;
}

/* 2. Force all elements to respect padding boundaries */
*, *::before, *::after {
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    /* 3. Allow Hero text to wrap naturally so it stops breaking the screen width */
    .mvc-title-line {
        white-space: normal !important; 
        font-size: clamp(2rem, 6vw, 3rem) !important;
        padding: 0 10px;
    }
    
    /* 4. Ensure viewports strictly adhere to device width */
    .mvc-s1-viewport, 
    .mvc-s2-viewport,
    .mvc-s3-viewport {
        width: 100vw !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}


/* =========================================
   MOBILE VIEWPORT: THE WHITE BREATHER
========================================= */
@media (max-width: 768px) {
    /* 1. Remove the dead black margin and let sections touch safely */
    .mvc-s1-wrapper {
        margin-bottom: 0 !important; 
    }

    /* 2. Prevent Section 1 (Hero) from bleeding off the bottom edge */
    .mvc-s1-viewport {
        padding-bottom: 40px !important;
    }
    .mvc-pollutants-wrapper {
        padding-top: 80px !important; 
    }

    /* 3. The White Breather: Massive white top-padding before text begins */
    .mvc-s2-viewport {
        align-items: flex-start !important; 
        padding-top: 15vh !important; /* This creates the clean, white scroll-gap */
        overflow-y: auto !important; 
    }
    
    .mvc-s2-container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}




/* =========================================
   IAQ PAGE: SECTION 4 - BROCHURE
========================================= */
.mvc-s4-wrapper {
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
    padding: 120px 20px;
    position: relative;
    overflow: hidden;
}

.mvc-s4-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 40px;
}

/* Typography */
.mvc-s4-text h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 600;
    color: #4A4A4A; /* Matches the soft dark gray from your screenshot */
    margin-bottom: 8px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.mvc-s4-text p {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: #7A7A7A;
    margin: 0;
    font-weight: 400;
}

/* Image */
.mvc-s4-image {
    text-align: center;
}

.mvc-s4-image img {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.08));
}

/* Download CTA */
.mvc-s4-cta {
    display: flex;
    justify-content: flex-end;
}

.mvc-magnetic-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: #0F1115; /* Deep architectural black */
    color: #ffffff !important;
    padding: 18px 40px;
    border-radius: 50px; /* Perfect pill shape */
    text-decoration: none !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.9);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

/* Glass Sweep Reflection */
.mvc-magnetic-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-150%) skewX(-20deg);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.mvc-btn-text {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: transform 0.4s ease;
}

.mvc-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mvc-btn-icon svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Hover Physics --- */
.mvc-magnetic-btn:hover {
    background: #019CB2; /* Snaps to brand color */
    border-color: #019CB2;
    box-shadow: 0 15px 40px rgba(1, 156, 178, 0.4);
    transform: translateY(-4px); /* Lifts off the page */
}

.mvc-magnetic-btn:hover::before {
    transform: translateX(150%) skewX(-20deg); /* Triggers the glass sweep */
}

.mvc-magnetic-btn:hover .mvc-btn-icon svg {
    transform: translateY(3px); /* Arrow drops to indicate download */
}

/* --- MOBILE RESPONSIVENESS FIX --- */
@media (max-width: 1024px) {
    .mvc-s4-container {
        /* This kills the 3-column layout and stacks them vertically */
        grid-template-columns: 1fr; 
        text-align: center;
        gap: 50px;
    }
    
    .mvc-s4-text h2, 
    .mvc-s4-text p {
        text-align: center;
    }
    
    .mvc-s4-cta {
        justify-content: center;
    }
    
    .mvc-s4-image img {
        max-width: 70%; /* Keeps the image nicely proportioned on tablets */
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .mvc-s4-wrapper {
        padding: 80px 20px;
    }
    
    .mvc-s4-image img {
        max-width: 100%; /* Allows the image to fill the phone screen */
    }
    
    .mvc-magnetic-btn {
        /* Slightly tighter padding so it fits perfectly on narrow devices like the iPhone SE */
        padding: 16px 30px; 
    }
    
    .mvc-btn-text {
        font-size: 1rem;
    }
}



/* =========================================
   IAQ PAGE: SECTION 5 - TELEMETRY DASHBOARD
========================================= */
.mvc-s5-wrapper {
    background-color: #050505; 
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    margin: 0;
    padding: 0;
    position: relative;
}

.mvc-s5-track {
    position: relative;
    width: 100%;
    height: 500vh !important; 
    min-height: 500vh !important;
}

.mvc-s5-viewport {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    background-color: #050505;
    z-index: 10;
    padding: 0 20px;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px; 
}

/* The Camera Rig */
.mvc-camera-rig {
    position: absolute;
    top: 15vh; 
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform;
}

.mvc-s5-header {
    text-align: center;
    max-width: 800px;
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
}
.mvc-s5-title { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 300; letter-spacing: -1px; margin-bottom: 15px; }
.mvc-s5-subtitle { font-size: 1.1rem; color: rgba(255, 255, 255, 0.6); line-height: 1.6; }

/* Dashboard Master Grid */
.mvc-dash-master {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.mvc-dash-row {
    display: flex;
    gap: 30px;
    width: 100%;
    opacity: 0;
    transform: translateY(40px);
}

.mvc-panel {
    background: rgba(15, 17, 21, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}

/* Row 1 */
.mvc-panel-graph { flex: 2; }
.mvc-panel-report { flex: 1; background: linear-gradient(145deg, rgba(22, 101, 111, 0.1) 0%, rgba(15, 17, 21, 0.9) 100%); border-color: rgba(1, 156, 178, 0.3); }

.mvc-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 15px; }
.mvc-panel-title { font-size: 1.1rem; font-weight: 500; color: #ffffff; display: flex; align-items: center; gap: 10px; }
.mvc-live-dot { width: 8px; height: 8px; background: #019CB2; border-radius: 50%; box-shadow: 0 0 10px #019CB2; animation: blink 1.5s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.mvc-svg-wrapper { width: 100%; height: 220px; position: relative; }
.mvc-live-graph { width: 100%; height: 100%; overflow: visible; }

.mvc-report-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: #019CB2; margin-bottom: 15px; font-weight: 600; }
.mvc-report-date { font-size: 1.8rem; font-weight: 300; margin-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
.mvc-report-stat { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 0.9rem; color: rgba(255,255,255,0.7); }
.mvc-stat-val { font-size: 1.1rem; font-weight: 500; color: #ffffff; }
.mvc-stat-good { color: #019CB2; }

/* Row 2 */
.mvc-panel-zones { flex: 2; }
.mvc-panel-network { flex: 1; align-items: center; justify-content: center; text-align: center; }

.mvc-zone-list { display: flex; flex-direction: column; gap: 15px; }
.mvc-zone-item { display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.mvc-zone-name { width: 30%; }
.mvc-zone-occ { width: 15%; color: rgba(255,255,255,0.5); }
.mvc-zone-status { width: 20%; color: #019CB2; font-weight: 500; }

.mvc-zone-bar-track { width: 35%; height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
.mvc-zone-bar-fill { height: 100%; background: #019CB2; width: 0%; box-shadow: 0 0 10px rgba(1, 156, 178, 0.5); }

.mvc-donut-container { position: relative; width: 140px; height: 140px; margin-bottom: 20px; }
.mvc-donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mvc-donut-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mvc-donut-percent { font-size: 2rem; font-weight: 300; color: #019CB2; line-height: 1; }
.mvc-donut-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-top: 5px; }

/* CTA BUTTON */
.mvc-cta-btn {
    margin-top: 50px;
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    color: #0F1115;
    text-align: center;
    padding: 18px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}
.mvc-cta-btn:hover { background: #019CB2; color: #ffffff; box-shadow: 0 10px 20px rgba(1, 156, 178, 0.3); }

/* Glassmorphic Modal Form */
.mvc-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.mvc-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.mvc-modal-box {
    background: #0A0D14;
    border: 1px solid rgba(1, 156, 178, 0.3);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(1, 156, 178, 0.15);
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}

.mvc-modal-overlay.is-open .mvc-modal-box {
    transform: translateY(0) scale(1);
}

.mvc-modal-close {
    position: absolute;
    top: 20px; right: 20px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

.mvc-modal-close:hover { color: #fff; }

.mvc-modal-title {
    font-size: 1.8rem;
    font-weight: 300;
    margin: 0 0 10px 0;
    color: #fff;
    letter-spacing: -0.5px;
}

.mvc-modal-desc {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 30px;
    line-height: 1.6;
}

.mvc-form-group { margin-bottom: 20px; }
.mvc-form-group label {
    display: block;
    font-size: 0.85rem;
    color: #019CB2;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

.mvc-form-control {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 14px 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.mvc-form-control:focus {
    outline: none;
    border-color: #019CB2;
    background: rgba(1, 156, 178, 0.05);
    box-shadow: 0 0 15px rgba(1, 156, 178, 0.2);
}

.mvc-form-submit {
    width: 100%;
    background: #019CB2;
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 10px;
    font-family: inherit;
}

.mvc-form-submit:hover { background: #01b4cd; }

.mvc-form-msg {
    margin-top: 20px;
    font-size: 0.95rem;
    text-align: center;
    display: none;
}
.mvc-form-msg.success { color: #4CAF50; display: block; }
.mvc-form-msg.error { color: #FF5722; display: block; }

/* Responsive Dashboard Logic */
@media (max-width: 1024px) {
    .mvc-dash-row { flex-direction: column; }
    .mvc-svg-wrapper { height: 200px; }
    .mvc-zone-name { width: 40%; }
    .mvc-zone-occ { display: none; } 
    .mvc-zone-status { width: 25%; }
    .mvc-zone-bar-track { width: 35%; }
}

@media (max-width: 768px) {
    .mvc-s5-viewport { height: auto; position: relative !important; padding: 100px 20px; }
    .mvc-s5-track { height: auto !important; min-height: auto !important; }
    .mvc-camera-rig { position: relative; top: 0; transform: none !important; }
    .mvc-modal-box { padding: 30px 20px; margin: 20px; }
}





/* =========================================
   MOLECULAR PAGE: SECTION 1 - HERO
========================================= */
.mvc-mf-wrapper {
    background-color: #050505; 
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    margin: 0;
    padding: 0;
    position: relative;
}

.mvc-mf-track {
    position: relative;
    width: 100%;
    height: 400vh !important; 
    min-height: 400vh !important;
}

.mvc-mf-viewport {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #050505;
    z-index: 10;
    background-image: radial-gradient(circle at 50% 50%, rgba(1, 156, 178, 0.03) 0%, #050505 70%);
}

.mvc-core-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mvc-core-ring-1, .mvc-core-ring-2 {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(1, 156, 178, 0.3);
}

.mvc-core-ring-1 {
    width: 250px;
    height: 250px;
    animation: spinRight 20s linear infinite;
}

.mvc-core-ring-2 {
    width: 180px;
    height: 180px;
    border: 2px solid rgba(1, 156, 178, 0.1);
    border-top: 2px solid #019CB2;
    animation: spinLeft 15s linear infinite;
}

.mvc-core-center {
    width: 100px;
    height: 100px;
    background: #050505;
    border: 2px solid #019CB2;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(1, 156, 178, 0.2), inset 0 0 20px rgba(1, 156, 178, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.5s ease;
}

.mvc-core-active {
    box-shadow: 0 0 80px rgba(1, 156, 178, 0.6), inset 0 0 40px rgba(1, 156, 178, 0.8) !important;
    background: rgba(1, 156, 178, 0.1);
}

@keyframes spinRight { 100% { transform: rotate(360deg); } }
@keyframes spinLeft { 100% { transform: rotate(-360deg); } }

.mvc-particle {
    position: absolute;
    top: 0; left: 0; /* Reset base coordinates */
    width: 6px;
    height: 6px;
    background: #FFCC00; 
    border-radius: 50%;
    box-shadow: 0 0 10px #FFCC00;
    z-index: 6;
    pointer-events: none; /* Prevents invisible particles from blocking clicks */
    will-change: transform, opacity; /* Tells the GPU to handle this */
}

.mvc-text-panel {
    position: absolute;
    width: 100%;
    max-width: 800px;
    padding: 0 20px;
    text-align: center;
    z-index: 20;
    will-change: transform, opacity;
}

#textPanel1 {
    opacity: 1;
    transform: translateY(0);
}

#textPanel2 {
    opacity: 0;
    transform: translateY(50px);
    background: rgba(5, 5, 5, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid rgba(1, 156, 178, 0.2);
}

.mvc-mf-title {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 300;
    letter-spacing: -1.5px;
    margin-bottom: 10px;
    line-height: 1.1;
}

.mvc-mf-subtitle {
    font-size: 1.2rem;
    color: #019CB2;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.mvc-mf-desc {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}

.mvc-mf-desc strong {
    color: #ffffff;
    font-weight: 500;
}

/* RESPONSIVE MOBILE UN-WRAPPER */
/* RESPONSIVE MOBILE UN-WRAPPER */
@media (max-width: 1024px) {
    /* Notice we removed the track and viewport overrides here so it stays 400vh and sticky! */
    
    .mvc-core-ring-1 { width: 200px; height: 200px; }
    .mvc-core-ring-2 { width: 140px; height: 140px; }
    
    .mvc-text-panel { padding: 0 15px; }
    #textPanel2 { padding: 25px 20px; }
    
    .mvc-mf-desc { font-size: 0.95rem; }
}




/* =========================================
   MOLECULAR PAGE: SECTION 2 - BENTO GRID
========================================= */
.mvc-s2-bento-wrapper {
    background-color: #FBFBFD; 
    font-family: 'Inter', sans-serif;
    color: #1D1D1F; 
    margin: 0;
    padding: 120px 20px;
    position: relative;
    overflow: hidden;
}

.mvc-s2-bento-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

.mvc-ambient-glow {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(1, 156, 178, 0.05) 0%, transparent 70%);
    filter: blur(50px);
    z-index: 1;
    pointer-events: none;
}

.mvc-bento-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
}

.mvc-bento-tag {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #019CB2;
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
}

.mvc-bento-maintitle {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1.1;
    color: #1D1D1F;
    margin: 0;
}

.mvc-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.mvc-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(40px);
}

.mvc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(1, 156, 178, 0.08);
    border-color: rgba(1, 156, 178, 0.2);
}

.mvc-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    color: #019CB2;
}

.mvc-card-icon svg { width: 100%; height: 100%; fill: currentColor; }

.mvc-card h3 {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0 0 12px 0;
    color: #1D1D1F;
}

.mvc-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #55555A;
    margin: 0;
}

/* =========================================
   GLOBAL LIST STYLES (Fixes the mobile text issue)
========================================= */
.mvc-app-list { 
    display: flex; 
    width: 100%; 
}
.mvc-app-item { 
    font-size: 0.9rem; 
    font-weight: 500; 
    color: #888; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    display: flex; 
    align-items: center; 
    gap: 12px;
}
.mvc-app-item::before { 
    content: ''; 
    display: block; 
    width: 6px; 
    height: 6px; 
    background: #019CB2; 
    border-radius: 50%; 
}

/* =========================================
   SPECIFIC CARD LAYOUTS (DESKTOP)
========================================= */
@media (min-width: 1025px) {
    .mvc-c-arch { grid-column: span 2; }
    .mvc-c-ads { grid-column: span 1; }
    .mvc-c-chem { grid-column: span 1; }
    .mvc-c-mevachi { 
        grid-column: span 2; 
        grid-row: span 2; 
        background: #0F1115; 
        color: #ffffff;
        border: 1px solid rgba(255,255,255,0.05);
        justify-content: center;
    }
    .mvc-c-mevachi h3 { color: #ffffff; font-size: 2rem; }
    .mvc-c-mevachi p { color: rgba(255,255,255,0.7); font-size: 1.05rem; }
    .mvc-c-mevachi .mvc-card-icon { color: #ffffff; width: 60px; height: 60px; margin-bottom: 30px;}
    .mvc-c-mevachi:hover { border-color: rgba(1, 156, 178, 0.5); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }

    .mvc-c-apps { 
        grid-column: span 4; 
        display: flex; 
        flex-direction: row; 
        align-items: center; 
        justify-content: space-between;
        padding: 30px 40px;
    }
    .mvc-c-apps h3 { margin: 0; font-size: 1.2rem; white-space: nowrap; margin-right: 40px; }
    .mvc-app-list { justify-content: flex-end; gap: 30px;}
}

/* =========================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
========================================= */
@media (max-width: 1024px) {
    .mvc-bento-grid { grid-template-columns: repeat(2, 1fr); }
    .mvc-c-arch { grid-column: span 2; }
    .mvc-c-mevachi { grid-column: span 2; background: #0F1115; }
    .mvc-c-mevachi h3 { color: #ffffff; }
    .mvc-c-mevachi p { color: rgba(255,255,255,0.7); }
    .mvc-c-ads { grid-column: span 1; }
    .mvc-c-chem { grid-column: span 1; }
    .mvc-c-apps { grid-column: span 2; }
    .mvc-app-list { flex-wrap: wrap; gap: 20px; margin-top: 20px; }
}

@media (max-width: 768px) {
    .mvc-s2-bento-wrapper { padding: 80px 20px; }
    .mvc-bento-grid { grid-template-columns: 1fr; gap: 16px; }
    .mvc-card { grid-column: span 1 !important; padding: 30px 24px; }
    .mvc-c-apps { flex-direction: column; align-items: flex-start; }
    .mvc-c-apps h3 { margin-bottom: 20px; }
    .mvc-app-list { flex-direction: column; align-items: flex-start; gap: 15px; }
}




/* =========================================
   MOLECULAR PAGE: SECTION 3 - COMPLIANCE
========================================= */
.compliance-section {
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
    color: #1D1D1F;
    padding: 100px 20px;
    position: relative;
    border-top: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
}

.compliance-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr; 
    gap: 80px;
    align-items: flex-start;
    position: relative;
    z-index: 5;
}

.context-col { position: relative; }

.context-col h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 24px;
    color: #111;
}

.context-col p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #55555A;
    margin-bottom: 20px;
}

.authority-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #F8F8FA;
    border: 1px solid #EAEAEA;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #019CB2;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 40px;
}

.compliance-visual {
    margin-top: 40px;
    width: 120px;
    height: 120px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comp-ring-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(1, 156, 178, 0.4);
    border-radius: 50%;
    animation: compSpin 15s linear infinite;
}

.comp-ring-2 {
    position: absolute;
    width: 70%;
    height: 70%;
    border: 2px solid rgba(1, 156, 178, 0.1);
    border-top: 2px solid #019CB2;
    border-radius: 50%;
    animation: compSpinReverse 10s linear infinite;
}

.comp-center {
    width: 40%;
    height: 40%;
    background: rgba(1, 156, 178, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #019CB2;
}

.comp-center svg { width: 20px; height: 20px; stroke-width: 3; }

@keyframes compSpin { 100% { transform: rotate(360deg); } }
@keyframes compSpinReverse { 100% { transform: rotate(-360deg); } }

.data-col {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.stat-box {
    background: #FBFBFD;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-box:hover {
    transform: translateY(-4px);
    border-color: rgba(1, 156, 178, 0.3);
}

.stat-box::after {
    content: '';
    position: absolute;
    top: -50%; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to bottom, transparent, rgba(1, 156, 178, 0.05));
    transition: top 0.4s ease;
    pointer-events: none;
}
.stat-box:hover::after { top: 100%; }

.stat-val {
    font-size: 2.2rem;
    font-weight: 300;
    color: #019CB2;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.stat-unit { font-size: 1rem; color: #888; }
.stat-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: #1D1D1F; font-weight: 500; }

.faq-wrap {
    border-top: 1px solid #EAEAEA;
    padding-top: 20px;
}

.faq-wrap h3 {
    font-size: 1.2rem;
    margin-bottom: 25px;
    color: #111;
}

.accordion-item { border-bottom: 1px solid #EAEAEA; }

.accordion-header {
    width: 100%;
    text-align: left;
    background: transparent !important; 
    border: none;
    padding: 24px 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: #1D1D1F;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px; 
    line-height: 1.4; 
    transition: color 0.2s ease;
    font-family: inherit;
    outline: none !important; 
    -webkit-tap-highlight-color: transparent !important; 
    white-space: normal !important; 
    word-wrap: break-word !important; 
    height: auto !important; 
    min-height: min-content !important; 
}

.accordion-header:focus, .accordion-header:active {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.accordion-header:hover { color: #019CB2; }

.acc-icon { 
    width: 20px; 
    height: 20px; 
    position: relative; 
    flex-shrink: 0; 
}
.acc-icon::before, .acc-icon::after {
    content: '';
    position: absolute;
    background: #1D1D1F;
    transition: transform 0.3s ease;
}
.acc-icon::before { top: 0; left: 9px; width: 2px; height: 100%; }
.acc-icon::after { top: 9px; left: 0; width: 100%; height: 2px; }

.accordion-header.active .acc-icon::before { transform: rotate(90deg); opacity: 0; }
.accordion-header.active .acc-icon::after { background: #019CB2; }
.accordion-header.active { color: #019CB2; }

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.accordion-content {
    padding-bottom: 24px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #55555A;
}

@media (max-width: 1024px) {
    .compliance-container { grid-template-columns: 1fr; gap: 60px; }
    .compliance-visual { display: none; }
}
@media (max-width: 768px) {
    .compliance-section { padding: 60px 20px; }
    .stat-grid { grid-template-columns: 1fr; }
    .context-col h2 { font-size: 2.2rem; }
}




/* =========================================
   MOLECULAR PAGE: SECTION 4 - CARTRIDGE 3D (LIGHT THEME)
========================================= */
.mvc-blueprint-section {
    background-color: #FBFBFD; 
    font-family: 'Inter', sans-serif;
    color: #1D1D1F;
    padding: 120px 20px;
    position: relative;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.mvc-blueprint-container {
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center; 
}

/* Text Formatting */
.bp-intro { margin-bottom: 50px; }
.bp-tag { color: #019CB2; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 15px;}
.bp-intro h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 300; line-height: 1.1; margin: 0; letter-spacing: -1px; color: #111; }

.bp-nav {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 20px;
}

.bp-tab {
    background: transparent;
    border: none;
    color: #888;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
    font-family: inherit;
}

.bp-tab:hover { color: #111; background: rgba(0,0,0,0.04); }
.bp-tab.active { color: #019CB2; background: rgba(1, 156, 178, 0.1); }

.bp-content-area {
    position: relative;
    height: 180px; 
}

.bp-pane {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.bp-pane.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.bp-pane h3 { font-size: 1.8rem; font-weight: 500; margin: 0 0 15px 0; color: #111; }
.bp-pane p { font-size: 1.05rem; line-height: 1.7; color: #55555A; margin: 0; }

/* 3D Static Explosion Layout */
.bp-visual-col {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px;
    height: 600px; 
}

.bp-stack {
    position: relative;
    width: 320px;
    height: 320px;
    transform: rotateX(60deg) rotateZ(-45deg);
    transform-style: preserve-3d;
    margin-top: 120px; 
}

/* Light Mode 3D Layers */
.bp-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 12px;
    border: 2px solid rgba(0,0,0,0.08);
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s ease, border-color 0.6s ease;
}

.bp-lay-1 { transform: translateZ(0px); }
.bp-lay-2 { transform: translateZ(80px); }
.bp-lay-3 { transform: translateZ(160px); }
.bp-lay-4 { transform: translateZ(240px); }

/* Inverted Textures for Light Background */
.bp-layer::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: inherit; pointer-events: none;}
.bp-lay-1::after { background-image: radial-gradient(#000 1.5px, transparent 2px); background-size: 15px 15px; opacity: 0.05; }
.bp-lay-2::after { background-image: radial-gradient(#000 2px, transparent 3px); background-size: 8px 8px; opacity: 0.1; }
.bp-lay-3::after { background-image: repeating-linear-gradient(45deg, rgba(147, 51, 234, 0.15) 0, rgba(147, 51, 234, 0.15) 2px, transparent 2px, transparent 10px); }
.bp-lay-4::after { background-image: linear-gradient(rgba(1, 156, 178, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(1, 156, 178, 0.15) 1px, transparent 1px); background-size: 15px 15px; }

/* Active States (Colored Drop Shadows instead of White Glows) */
.bp-stack[data-active="1"] .bp-lay-1 { 
    transform: translateZ(15px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
    border-color: rgba(0,0,0,0.2); 
}
.bp-stack[data-active="2"] .bp-lay-2 { 
    transform: translateZ(95px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.12); 
    border-color: rgba(0,0,0,0.3); 
}
.bp-stack[data-active="3"] .bp-lay-3 { 
    transform: translateZ(175px); 
    box-shadow: 0 20px 50px rgba(147, 51, 234, 0.25); 
    border-color: rgba(147, 51, 234, 0.8); 
}
.bp-stack[data-active="4"] .bp-lay-4 { 
    transform: translateZ(255px); 
    box-shadow: 0 20px 50px rgba(1, 156, 178, 0.25); 
    border-color: rgba(1, 156, 178, 0.8); 
}

/* Dim non-active layers less aggressively on light bg */
.bp-stack[data-active] .bp-layer { opacity: 0.45; }
.bp-stack[data-active="1"] .bp-lay-1 { opacity: 1; }
.bp-stack[data-active="2"] .bp-lay-2 { opacity: 1; }
.bp-stack[data-active="3"] .bp-lay-3 { opacity: 1; }
.bp-stack[data-active="4"] .bp-lay-4 { opacity: 1; }

/* Responsive Containment */
@media (max-width: 1024px) {
    .mvc-blueprint-section { padding: 80px 20px; } /* Shrinks the massive desktop padding */
    .mvc-blueprint-container { grid-template-columns: 1fr; gap: 20px; } /* Pulls text closer to graphic */
    .bp-visual-col { height: 350px; order: -1; } /* Moves graphic above text and tightens container */
    .bp-stack { transform: rotateX(60deg) rotateZ(-45deg) scale(0.65); margin-top: 50px; }
    .bp-nav { overflow-x: auto; white-space: nowrap; padding-bottom: 15px; }
    .bp-content-area { height: 220px; text-align: center; }
}

@media (max-width: 768px) {
    .mvc-blueprint-section { padding: 50px 20px !important; } /* Tightens padding for mobile frames */
    
    .mvc-blueprint-section, 
    .mvc-blueprint-container, 
    .bp-text-col {
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .bp-intro h2 { font-size: 1.9rem !important; line-height: 1.2 !important; word-wrap: break-word !important; }

    .bp-nav {
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 15px;
        box-sizing: border-box !important;
    }

    .bp-content-area, 
    .bp-pane {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .bp-pane p { font-size: 0.95rem; padding-right: 15px; }

    /* THE FIX FOR THE 3D SPACING */
    .bp-visual-col { 
        height: 380px !important; /* A taller bounding box to capture the full explosion */
    } 
    .bp-stack { 
        transform: rotateX(60deg) rotateZ(-45deg) scale(0.45) !important; /* Shrunk by 5% to keep the orbit tighter */
        margin-top: 160px !important; /* Pushes the base aggressively down so the top layers have plenty of headroom */
    }
}








/* =========================================
   MOLECULAR PAGE: SECTION 5 - TELEMETRY (LIGHT THEME)
========================================= */
.mvc-telemetry-sec {
    background-color: #ffffff; 
    font-family: 'Inter', sans-serif;
    color: #1D1D1F;
    padding: 100px 20px 200px 20px; 
    position: relative;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.mvc-telemetry-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* Left Column Narrative */
.mvc-tel-copy {
    flex: 1;
    padding-top: 5vh;
    padding-bottom: 20vh; 
}

.tel-tag {
    color: #019CB2;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
}

.mvc-tel-copy h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 300;
    line-height: 1.1;
    margin: 0 0 30px 0;
    letter-spacing: -1px;
    color: #111;
}

.tel-text-block {
    margin-bottom: 50px;
}

.tel-text-block h3 {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0 0 15px 0;
    color: #111;
}

.tel-text-block p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #55555A;
    margin: 0;
}

/* Right Column Visual (Desktop Architecture) */
.mvc-tel-visual {
    flex: 1;
    position: sticky;
    top: 10vh; 
    height: 80vh; 
    
    /* Pure viewport centering - Adapts to any monitor instantly */
    display: flex;
    align-items: center; /* Locks dead-center vertically */
    justify-content: center; /* Locks dead-center horizontally */
}

.tel-graphic-wrapper {
    position: relative;
    width: 140px; 
    height: 400px; 
    
    /* Zero margin hacks. The Flexbox parent handles the alignment naturally. */
    margin: 0; 
    transform: none; 
}

/* Light Theme Frosted Cylinder */
.tel-cylinder {
    width: 100%;
    height: 100%;
    border-radius: 70px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.03), 0 20px 40px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.tel-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%; 
    background: linear-gradient(to top, rgba(147, 51, 234, 0.6), rgba(1, 156, 178, 0.9));
    transition: height 0.1s ease-out;
}

/* Light glare reflection */
.tel-cylinder::after {
    content: '';
    position: absolute;
    top: 2%; left: 10%;
    width: 30%; height: 96%;
    background: linear-gradient(to right, rgba(255,255,255,0.7), transparent);
    border-radius: 40px;
    pointer-events: none;
}

/* Darker Indicator Marks */
.tel-marks {
    position: absolute;
    top: 0; right: -50px; 
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 0;
    color: rgba(0,0,0,0.4);
    font-size: 0.75rem;
    font-weight: 600;
}
.tel-mark { position: relative; }
.tel-mark::before {
    content: ''; position: absolute;
    top: 50%; right: 35px;
    width: 10px; height: 1px;
    background: rgba(0,0,0,0.2);
}

/* Light Theme Alert Card */
.tel-alert-card {
    position: absolute;
    right: -100px; 
    top: 20%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(1, 156, 178, 0.3);
    border-radius: 12px;
    padding: 20px;
    width: 280px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 0 30px rgba(1, 156, 178, 0.08);
    z-index: 10;
    
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

.tel-alert-card.is-triggered {
    opacity: 1;
    transform: translateX(0);
}

.alert-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; }
.alert-dot { width: 8px; height: 8px; background: #019CB2; border-radius: 50%; box-shadow: 0 0 10px rgba(1, 156, 178, 0.4); animation: pulse 1.5s infinite; }
.alert-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: #019CB2; font-weight: 600; }
.alert-body { font-size: 0.9rem; line-height: 1.5; color: #55555A; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Responsive Updates */
@media (max-width: 1024px) {
    .mvc-telemetry-container { flex-direction: column; gap: 40px; }
    .mvc-tel-visual { position: relative; top: 0; height: auto; width: 100%; padding-top: 0; }
    .tel-graphic-wrapper { margin-top: 20px; margin-bottom: 60px; }
    .mvc-tel-copy { padding-bottom: 0; }
    .tel-alert-card { right: 50%; transform: translateX(50%) translateY(20px); top: auto; bottom: -80px; }
    .tel-alert-card.is-triggered { transform: translateX(50%) translateY(0); }
}
@media (max-width: 768px) {
    .mvc-telemetry-sec { padding: 80px 20px 140px 20px; }
}




/* =========================================
   MOLECULAR PAGE: SECTION 6 - FINAL CTA (LIGHT THEME)
========================================= */
.mvc-cta-section {
    background-color: #FBFBFD; /* Studio Light Background */
    font-family: 'Inter', sans-serif;
    color: #1D1D1F;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 100px 20px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* Subtle dark grid mapping */
.mvc-cta-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 2;
    pointer-events: none;
}

.cta-glow-orb {
    position: absolute;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(1, 156, 178, 0.08) 0%, transparent 60%);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(80px);
    z-index: 1;
    pointer-events: none;
    transition: top 0.8s cubic-bezier(0.25, 1, 0.5, 1), left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.cta-content-wrapper {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 900px;
}

.cta-tag {
    color: #019CB2;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 24px;
    display: block;
}

.cta-headline {
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -2px;
    margin: 0 0 30px 0;
    color: #111;
}

.cta-subtext {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #55555A;
    max-width: 600px;
    margin: 0 auto 50px auto;
}

.cta-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #019CB2;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 20px 40px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(1, 156, 178, 0.3);
    position: relative;
    font-family: inherit;
}

.cta-btn-primary:hover {
    background: #017a8c;
    box-shadow: 0 15px 40px rgba(1, 156, 178, 0.4);
    transform: translateY(-2px);
}

.cta-btn-primary svg {
    width: 20px; height: 20px;
    transition: transform 0.3s ease;
}

.cta-btn-primary:hover svg {
    transform: translateX(4px);
}

/* Light Modal Overlay */
.mvc-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 17, 21, 0.7); /* Dark backdrop to focus the light modal */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.mvc-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.mvc-modal-box {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}

.mvc-modal-overlay.is-open .mvc-modal-box {
    transform: translateY(0) scale(1);
}

.mvc-modal-close {
    position: absolute;
    top: 20px; right: 20px;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

.mvc-modal-close:hover { color: #111; }

.mvc-modal-title {
    font-size: 1.8rem;
    font-weight: 300;
    margin: 0 0 10px 0;
    color: #111;
    letter-spacing: -0.5px;
}

.mvc-modal-desc {
    font-size: 0.95rem;
    color: #55555A;
    margin-bottom: 30px;
    line-height: 1.6;
}

.mvc-form-group { margin-bottom: 20px; }
.mvc-form-group label {
    display: block;
    font-size: 0.85rem;
    color: #019CB2;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

.mvc-form-control {
    width: 100%;
    background: #F8F8FA;
    border: 1px solid #EAEAEA;
    color: #111;
    padding: 14px 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.mvc-form-control:focus {
    outline: none;
    background: #ffffff;
    border-color: #019CB2;
    box-shadow: 0 0 0 4px rgba(1, 156, 178, 0.1);
}

.mvc-form-submit {
    width: 100%;
    background: #019CB2;
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 10px;
    font-family: inherit;
}

.mvc-form-submit:hover { background: #017a8c; }

.mvc-form-msg {
    margin-top: 20px;
    font-size: 0.95rem;
    text-align: center;
    display: none;
}
.mvc-form-msg.success { color: #4CAF50; display: block; }
.mvc-form-msg.error { color: #FF5722; display: block; }

@media (max-width: 768px) {
    .mvc-modal-box { padding: 30px 20px; margin: 20px; }
}







/* =========================================
   MVC CARE+ PAGE: SECTION 1 - CFD HERO
========================================= */
.mvc-care-hero {
    position: relative;
    background: radial-gradient(circle at center, #0a0e11 0%, #050505 100%);
    padding: 200px 5% 140px 5%;
    font-family: 'Inter', -apple-system, sans-serif;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}

/* Isolate the canvas to the background */
#mvc-cfd-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none; 
    
    /* Adds a subtle blur to the mesh to make it look like fluid smoke */
    filter: blur(1px); 
    opacity: 0.8;
}

/* Elevate the typography above the canvas */
.mvc-care-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.mvc-care-hero-content .mvc-hero-kicker {
    color: #019CB2;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 25px;
}

.mvc-care-hero-content .mvc-hero-title {
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0 0 25px 0;
}

.mvc-care-hero-content .mvc-hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: #A0A0A5;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 400;
}




/* =========================================
   Section 2 : MASTER DESIGN ENGINE
========================================= */
:root {
    --mvc-cyan: #019CB2;
    --mvc-dark: #0F1115;
    --mvc-gray: #64748b;
    --mvc-canvas: #05070A; /* Premium Dark Box */
}

.mvc-scroll-track {
    position: relative;
    width: 100%;
    height: 400vh;
    background-color: #ffffff;
    font-family: 'Inter', -apple-system, sans-serif;
    margin: 0; padding: 0;
}

.mvc-fixed-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 10;
}

/* THE HEADLINE */
.mvc-pinned-header {
    position: absolute;
    top: 8vh;
    width: 100%;
    text-align: center;
    z-index: 20;
    padding: 0 20px;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.mvc-pinned-header h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 300;
    color: var(--mvc-dark);
    letter-spacing: -1.5px;
    margin: 0;
}

/* =========================================
   SLIDE & CONTENT LAYOUT (WIDE GAP)
========================================= */
.mvc-slide-container {
    position: relative;
    width: 100%;
    max-width: 1200px; 
    height: 50vh; 
    margin-top: 5vh;
}

.mvc-care-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    gap: 150px; 
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 1, 0.3, 1);
    pointer-events: none;
    padding: 0 5%;
}

.mvc-care-slide.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 15;
}

.slide-text-col { flex: 1.1; display: flex; flex-direction: column; }

/* THE RESIZED DARK BOX */
.slide-visual-col { 
    flex: 0.9; 
    height: 100%; 
    min-height: 380px; 
    border-radius: 16px; 
    overflow: hidden; 
    background: var(--mvc-canvas); 
    border: 1px solid rgba(0,0,0,0.1); 
    position: relative; 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); 
}

/* Force Canvas to always fill the box */
.slide-visual-col canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.slide-standard { font-family: monospace; font-size: 0.85rem; color: var(--mvc-cyan); letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.slide-title { font-size: 2.2rem; font-weight: 400; color: var(--mvc-dark); margin: 0 0 20px 0; line-height: 1.1; letter-spacing: -1px; }
.slide-desc { font-size: 1rem; line-height: 1.7; color: var(--mvc-gray); margin: 0; max-width: 450px; }

@media (max-width: 900px) {
    .mvc-care-slide { flex-direction: column; gap: 40px; text-align: center; }
    .slide-visual-col { width: 100%; min-height: 300px; }
    .slide-desc { max-width: 100%; }
    .mvc-slide-container { height: auto; }
}
/* =========================================
   MOBILE OVERRIDES: REORDERED VERTICAL FLOW
========================================= */
@media (max-width: 768px) {
    .mvc-scroll-track { height: auto !important; min-height: auto !important; }
    .mvc-fixed-frame { position: relative !important; height: auto !important; top: auto !important; left: auto !important; width: 100% !important; overflow: visible !important; padding: 60px 0 80px 0 !important; }

    .mvc-pinned-header { position: relative !important; top: auto !important; opacity: 1 !important; transform: none !important; padding: 0 20px 50px 20px !important; }
    .mvc-pinned-header h2 { font-size: 2.2rem !important; font-weight: 300 !important; line-height: 1.2 !important; letter-spacing: -1px !important; }

    .mvc-slide-container { height: auto !important; margin-top: 0 !important; display: flex !important; flex-direction: column !important; gap: 80px !important; }
    .mvc-care-slide { position: relative !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; display: flex !important; flex-direction: column !important; height: auto !important; padding: 0 20px !important; margin-bottom: 0 !important; }

    .slide-text-col { display: contents !important; }
    .slide-standard { order: 1 !important; text-align: center !important; font-size: 0.75rem !important; margin-bottom: 8px !important; }
    .slide-title { order: 2 !important; text-align: center !important; font-size: 1.6rem !important; font-weight: 500 !important; margin-bottom: 20px !important; color: #111111 !important; }
    .slide-visual-col { order: 3 !important; position: relative !important; top: auto !important; width: 100% !important; height: 260px !important; min-height: 260px !important; flex: none !important; box-shadow: 0 15px 35px rgba(0,0,0,0.1); margin-bottom: 25px !important; }
    .slide-desc { order: 4 !important; text-align: center !important; font-size: 0.95rem !important; color: #55555A !important; line-height: 1.6 !important; max-width: 100% !important; margin: 0 !important; }
}






/* =========================================
   MVC CARE+ PAGE: SECTION 3 - DIAGNOSTIC ENGINE
========================================= */
:root {
    --accent: #019CB2;
    --dark: #0F1115;
    --grey: #64748b;
    --border: #e2e8f0;
}

.mvc-diag-section {
    position: relative;
    width: 100%;
    min-height: 90vh;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 60px 5%;
    box-sizing: border-box;
    overflow: hidden;
}

.mvc-diag-container {
    width: 100%;
    max-width: 1300px;
    display: flex;
    gap: 80px;
    align-items: center;
}

/* --- TEXT & MENU (DESKTOP) --- */
.mvc-diag-text-col { flex: 1; z-index: 100; }
.diag-standard { font-family: monospace; font-size: 0.75rem; color: var(--accent); letter-spacing: 3px; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; display: block; }
.diag-title { font-size: clamp(2.2rem, 3.2vw, 2.8rem); font-weight: 400; color: var(--dark); margin: 0 0 30px 0; line-height: 1.1; letter-spacing: -1.5px; }

.diag-item {
    padding: 20px 0 20px 25px;
    border-left: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.2; 
}

.diag-item h4 { margin: 0 0 6px 0; font-size: 1.2rem; font-weight: 500; color: var(--dark); }
.diag-item p { margin: 0; font-size: 0.9rem; color: var(--grey); line-height: 1.6; max-width: 380px; }

.diag-item.is-active, .diag-item:hover {
    opacity: 1;
    border-left: 3px solid var(--accent);
    padding-left: 35px;
}

.diag-item.is-active h4 { color: var(--accent); }

/* --- VISUAL ENGINE --- */
.mvc-diag-visual-col {
    flex: 1.3;
    height: 600px;
    position: relative;
    perspective: 3000px;
    cursor: pointer; 
}

.exploded-view-container {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.ahu-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    transition: all 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.shell-layer  { z-index: 100; opacity: 1; }
.body-layer   { z-index: 10; opacity: 1; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.05)); }

/* THE FIX: Hard-locked opacity and visibility */
.part-layer { 
    z-index: 50; 
    opacity: 0 !important; 
    visibility: hidden !important; 
    transform: translate(-50%, -50%) translateY(20px); 
    transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
}

/* --- INTERACTION PHYSICS --- */
.exploded-view-container.has-target .shell-layer {
    opacity: 0.05;
    transform: translate(-50%, -50%) translateY(-180px) rotateX(15deg);
}

.exploded-view-container.has-target .part-layer { opacity: 0.2; }

/* THE FIX: Forces targeted layer to become fully visible */
.part-layer.is-targeted {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -95%) scale(1.15) rotateZ(-2deg) !important;
    filter: drop-shadow(0 40px 80px rgba(1, 156, 178, 0.4)) !important;
    z-index: 200;
}

.exploded-view-container.has-target .ahu-layer:not(.is-targeted):not(.shell-layer) {
    filter: blur(6px) grayscale(1);
    opacity: 0.03;
}

/* --- HUD GLASS PILL --- */
.hud-glass-pill {
    position: absolute;
    bottom: 40px;
    left: 10%;
    width: 80%;
    height: 75px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.4);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    z-index: 500;
}

.exploded-view-container.has-target + .hud-glass-pill { opacity: 1; transform: translateY(0); }

.hud-group { display: flex; flex-direction: column; }
.hud-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 2px; color: #94a3b8; margin-bottom: 4px; }
.hud-value { font-size: 1rem; font-weight: 600; color: var(--dark); font-family: monospace; }
.hud-value.cyan { color: var(--accent); }

/* =========================================
   MOBILE OVERRIDES (APP-STYLE OVERLAY MODAL)
========================================= */
@media (max-width: 768px) {
    .mvc-diag-section { padding: 40px 20px 80px 20px; min-height: auto; }

    .mvc-diag-container { 
        display: grid !important; 
        grid-template-columns: 100% !important; 
        align-items: start !important;
        gap: 0 !important; 
    }
    
    .mvc-diag-text-col { display: contents !important; } 

    .diag-standard { grid-row: 1 !important; text-align: center; margin-bottom: 10px !important; display: block !important; width: 100%; }
    .diag-title { grid-row: 2 !important; text-align: center; font-size: 2rem !important; margin-bottom: 0 !important; display: block !important; width: 100%; }

    .mvc-diag-visual-col {
        grid-row: 3 !important;
        height: 300px !important; 
        width: 100% !important; 
        margin-top: 30px !important; 
        margin-bottom: 30px !important; 
        pointer-events: none; 
        position: relative !important;
        z-index: 10;
    }

    .diag-menu { grid-row: 4 !important; display: flex; flex-direction: column; gap: 15px; width: 100%; }
    .diag-item { padding: 20px; border-left: 4px solid var(--border); opacity: 1; background: #f8fafc; border-radius: 12px; display: block; }
    .diag-item p { display: block !important; font-size: 0.95rem; color: var(--grey); margin-top: 8px; line-height: 1.5; } 
    .diag-item h4 { font-size: 1.15rem; margin: 0; }
    .diag-item.is-active { background: #ffffff; border-left: 4px solid var(--accent); box-shadow: 0 10px 20px rgba(0,0,0,0.05); padding-left: 20px; }

    .exploded-view-container { height: 100% !important; width: 100% !important; position: relative !important; }
    .ahu-layer { 
        width: 100% !important; 
        max-width: 280px !important; 
        height: auto !important; 
        top: 50% !important; 
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    } 

    .mvc-diag-visual-col::before {
        content: "✕ TAP ANYWHERE TO CLOSE";
        position: absolute; top: -10px; left: 0; width: 100%; text-align: center; font-size: 0.75rem; font-weight: 700; color: #64748b; letter-spacing: 2px; opacity: 0; transition: opacity 0.5s ease; z-index: 10000;
    }

    .mobile-modal-active .mvc-diag-visual-col {
        position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;
        background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
        z-index: 999999 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; margin: 0 !important;
        pointer-events: auto; cursor: pointer;
    }
    .mobile-modal-active .mvc-diag-visual-col::before { opacity: 1; top: 60px; }
    .mobile-modal-active .exploded-view-container { height: 60vh !important; margin-top: -10vh !important; }
    .mobile-modal-active .exploded-view-container.has-target .shell-layer { transform: translate(-50%, -50%) translateY(-100px) scale(0.85) !important; }
    .mobile-modal-active .part-layer.is-targeted { transform: translate(-50%, -45%) scale(1.3) !important; }

    .mobile-modal-active .hud-glass-pill {
        position: absolute !important; bottom: 50px !important; left: 5% !important; width: 90% !important; height: auto !important; padding: 15px !important; border-radius: 16px !important;
        flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-around !important; gap: 10px !important; background: #ffffff !important; box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
        opacity: 1 !important; transform: translateY(0) !important;
    }
    .hud-group { align-items: center; text-align: center; }
    .hud-label { font-size: 0.6rem; }
    .hud-value { font-size: 0.95rem; }
    .hud-badge { display: none; } 
}





/* =========================================
   SECTION 4: THE LiDAR SCANNER (LIGHT THEME)
========================================= */
:root {
    --mvc-lidar-bg: #FBFBFD; /* Studio light background */
    --mvc-cyan: #019CB2;
    --mvc-dark-text: #111111;
    --mvc-grey-text: #55555A;
}

.mvc-lidar-track {
    position: relative;
    width: 100%;
    height: 200vh; 
    background-color: var(--mvc-lidar-bg);
    font-family: 'Inter', -apple-system, sans-serif;
    margin: 0; padding: 0;
    border-top: 1px solid rgba(0,0,0,0.05); /* Soft separation line */
}

.mvc-lidar-frame {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 5%;
    box-sizing: border-box;
    z-index: 10;
}

/* --- THE BACKGROUND GRID (Subtle Dark Ink) --- */
.lidar-grid-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

/* --- HEADER TEXT (High Contrast) --- */
.lidar-header {
    text-align: center;
    z-index: 10;
    max-width: 800px;
    margin-bottom: 50px;
}

.lidar-super {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--mvc-cyan);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-bottom: 15px;
}

.lidar-header h2 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 300;
    color: var(--mvc-dark-text);
    margin: 0 0 20px 0;
    line-height: 1.1;
    letter-spacing: -1px;
}

.lidar-header p {
    font-size: 1.05rem;
    color: var(--mvc-grey-text);
    line-height: 1.6;
    margin: 0;
}

/* --- CARDS CONTAINER --- */
.lidar-cards-wrapper {
    display: flex;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    z-index: 10;
    position: relative;
}

/* --- THE LASER BEAM (Intense Cyan for Light Mode) --- */
.laser-beam {
    position: absolute;
    top: -10%; left: 0%;
    width: 2px; height: 120%;
    background: var(--mvc-cyan);
    box-shadow: 0 0 15px 2px rgba(1, 156, 178, 0.5), 0 0 30px 8px rgba(1, 156, 178, 0.15);
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* --- THE CARDS (Resting Light State) --- */
.lidar-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 35px 25px;
    border-radius: 16px;
    
    /* Faded waiting state */
    opacity: 0.4;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.lidar-card-num {
    font-family: monospace;
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 15px;
    display: block;
    transition: color 0.4s ease;
}

.lidar-card h3 {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--mvc-grey-text);
    margin: 0 0 12px 0;
    transition: color 0.4s ease;
}

.lidar-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #888888;
    margin: 0;
    transition: color 0.4s ease;
}

/* --- THE "SCANNED" STATE (Activated Light Mode) --- */
.lidar-card.is-scanned {
    opacity: 1;
    transform: translateY(0);
    background: #ffffff;
    border-color: rgba(1, 156, 178, 0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06), 0 0 0 1px rgba(1, 156, 178, 0.05);
}

.lidar-card.is-scanned .lidar-card-num { color: var(--mvc-cyan); }
.lidar-card.is-scanned h3 { color: var(--mvc-dark-text); }
.lidar-card.is-scanned p { color: var(--mvc-grey-text); }


/* =========================================
   MOBILE OPTIMIZATION (NATIVE SCROLL OVERRIDE)
========================================= */
@media (max-width: 900px) {
    /* 1. Remove the massive scrolling spacer */
    .mvc-lidar-track { 
        height: auto !important; 
    }
    
    /* 2. OVERRIDE THE JAVASCRIPT: Release the lock and let it scroll natively */
    .mvc-lidar-frame { 
        position: relative !important; 
        top: auto !important; 
        left: auto !important;
        height: auto !important; /* Expands to fit all content perfectly */
        padding: 100px 20px !important; 
        overflow: visible !important;
    }
    
    .lidar-header { 
        margin-bottom: 50px; 
        width: 100% !important; 
        max-width: 100% !important; 
    }   
    
    .lidar-header h2 { font-size: 2rem; }
    .lidar-header p { font-size: 1rem; line-height: 1.6; }
    
    /* 3. Restore comfortable spacing for the phases */
    .lidar-cards-wrapper { 
        flex-direction: column; 
        gap: 25px; 
        width: 100% !important; 
    }
    
    /* 4. Force cards to be fully illuminated on mobile for native scrolling */
    .lidar-card { 
        padding: 30px 20px; 
        opacity: 1 !important;
        transform: none !important;
        border-color: rgba(1, 156, 178, 0.3) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    }
    
    .lidar-card-num { color: var(--mvc-cyan) !important; }
    .lidar-card h3 { color: var(--mvc-dark-text) !important; }
    .lidar-card p { color: var(--mvc-grey-text) !important; }

    /* 5. Hide the desktop laser line on mobile */
    .laser-beam {
        display: none !important;
    }
}





/* =========================================
   SECTION 5: THE SLA COMMAND TERMINAL (LIGHT THEME)
========================================= */
:root {
    --mvc-cyan: #019CB2;
    --mvc-studio-bg: #FBFBFD;
    --mvc-dark-text: #111111;
    --mvc-grey-text: #55555A;
    --mvc-input-bg: #F4F4F7; /* Soft enclosed box background */
    --mvc-input-border: #EAEAEA;
}

.mvc-sla-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: var(--mvc-studio-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 5%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* Subtle light ambient glow */
.mvc-sla-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 60vw; height: 60vw;
    background: radial-gradient(circle, rgba(1, 156, 178, 0.04) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.mvc-sla-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- THE HEADER --- */
.sla-header {
    text-align: center;
    margin-bottom: 50px;
}

.sla-eyebrow {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--mvc-cyan);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
}

.sla-header h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 300;
    color: var(--mvc-dark-text);
    margin: 0 0 15px 0;
    line-height: 1.1;
    letter-spacing: -1px;
}

.sla-header p {
    font-size: 1.05rem;
    color: var(--mvc-grey-text);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* --- THE PRISTINE FORM CARD --- */
.sla-glass-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    padding: 60px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.04);
}

.sla-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.sla-form-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.sla-form-group.full-width {
    grid-column: 1 / -1;
}

/* --- ENCLOSED PREMIUM INPUT FIELDS (Fixes the gap issue) --- */
.sla-input, .sla-select, .sla-textarea {
    width: 100%;
    background: var(--mvc-input-bg);
    border: 1px solid var(--mvc-input-border);
    border-radius: 12px;
    color: var(--mvc-dark-text);
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    /* Deep padding forces a physical gap between text and boundaries */
    padding: 28px 20px 12px 20px; 
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.sla-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Select Box Adjustments */
.sla-select {
    padding: 20px; /* Standard padding for select */
    color: var(--mvc-dark-text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 16px;
}

.sla-input:focus, .sla-select:focus, .sla-textarea:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--mvc-cyan);
    box-shadow: 0 0 0 4px rgba(1, 156, 178, 0.1);
}

/* Floating Labels (Inside the enclosed box) */
.sla-label {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 1.05rem;
    color: #888888;
    pointer-events: none;
    transition: 0.3s ease all;
}

/* Animate label to top of the enclosed box */
.sla-input:focus ~ .sla-label,
.sla-input:not(:placeholder-shown) ~ .sla-label,
.sla-textarea:focus ~ .sla-label,
.sla-textarea:not(:placeholder-shown) ~ .sla-label {
    top: 8px;
    font-size: 0.75rem;
    color: var(--mvc-cyan);
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Static Label for Select */
.sla-select-label {
    position: absolute;
    top: -24px;
    left: 0;
    font-size: 0.8rem;
    color: var(--mvc-grey-text);
    letter-spacing: 1px;
    font-weight: 600;
}

/* --- THE INITIATE BUTTON --- */
.sla-submit-wrapper {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sla-security-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #888888;
    font-size: 0.85rem;
    font-family: monospace;
}

.sla-btn {
    background: var(--mvc-cyan);
    color: #ffffff;
    border: none;
    padding: 18px 40px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(1, 156, 178, 0.2);
}

.sla-btn:hover {
    background: #018a9d;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(1, 156, 178, 0.3);
}

.sla-btn svg { transition: transform 0.3s ease; }
.sla-btn:hover svg { transform: translateX(5px); }

@keyframes blink { 0%, 100% {opacity: 1;} 50% {opacity: 0;} }

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */
@media (max-width: 768px) {
    .mvc-sla-section { padding: 60px 20px; }
    .sla-glass-card { padding: 40px 25px; border-radius: 16px; }
    .sla-form-grid { grid-template-columns: 1fr; gap: 30px; }
    
    /* Extra margin to prevent select label clipping on mobile */
    .sla-form-group:nth-child(5) { margin-top: 15px; }
    
    .sla-submit-wrapper { flex-direction: column; gap: 25px; align-items: stretch; margin-top: 40px; }
    .sla-btn { justify-content: center; width: 100%; }
    .sla-security-badge { justify-content: center; }
}





/* =========================================
   ABOUT US PAGE: SECTION 1 - HERO
========================================= */
.mvc-about-hero-wrapper {
    position: relative;
    width: 100%;
    height: 100vh; 
    min-height: 600px;
    background-color: #050505;
    background: radial-gradient(circle at center, #111111 0%, #050505 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

#mvc-mesh-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: all; 
}

.mvc-about-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    font-family: 'Inter', -apple-system, sans-serif;
    color: #ffffff;
    pointer-events: none; 
    
    /* Cinematic Fade Up */
    opacity: 0;
    transform: translateY(30px);
    animation: aboutHeroReveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

@keyframes aboutHeroReveal {
    100% { opacity: 1; transform: translateY(0); }
}

.mvc-about-badge {
    color: #019CB2;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}

.mvc-about-hero-content h1 {
    font-size: clamp(3.5rem, 6vw, 5rem);
    font-weight: 300; /* Pulled back from 700 for a more sophisticated, premium feel */
    margin: 0;
    letter-spacing: -2px;
    line-height: 1;
}

@media (max-width: 768px) {
    .mvc-about-hero-wrapper { height: 60vh; min-height: 400px; }
}






/* =========================================
   ABOUT US PAGE: SECTION 2 - STACKING NARRATIVE
========================================= */
.mvc-about-narrative-section {
    position: relative;
    width: 100%;
    background-color: #FBFBFD;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* THE CARDS (Native Sticky Stacking) */
.mvc-narrative-card {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    background-color: #FBFBFD;
    display: flex;
    align-items: center;
    /* Soft shadow creates the illusion of paper sliding over paper */
    box-shadow: 0 -20px 50px rgba(0,0,0,0.04);
}

/* The first card sits perfectly flat with no top shadow */
.mvc-narrative-card:nth-child(1) {
    box-shadow: none;
}

.mvc-narrative-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    gap: 80px;
    width: 100%;
}

/* --- Left Nav Architecture --- */
.mvc-narrative-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    border-left: 2px solid rgba(0,0,0,0.08);
    padding-left: 40px;
}

.mvc-nav-item {
    font-size: 1rem;
    font-weight: 600;
    color: #A0A0A5;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    transition: color 0.3s ease;
}

/* Active State Anchor */
.mvc-nav-item.active {
    color: #111111;
}

.mvc-nav-item.active::before {
    content: '';
    position: absolute;
    left: -42px; 
    top: -10px;
    width: 4px;
    height: 40px;
    background: #019CB2;
    border-radius: 4px;
}

/* --- Right Text Architecture --- */
.mvc-narrative-text {
    flex: 2.2;
}

.mvc-narrative-text h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    color: #111111;
    line-height: 1.1;
    margin: 0 0 30px 0;
    letter-spacing: -1px;
}

.mvc-narrative-text h2 span { 
    color: #019CB2; 
    font-weight: 400;
}

.mvc-narrative-text p {
    font-size: 1.15rem;
    color: #55555A;
    line-height: 1.8;
    font-weight: 400;
    max-width: 90%;
    margin: 0;
}

/* --- Mobile Overrides --- */
@media (max-width: 900px) {
    .mvc-narrative-content { 
        flex-direction: column; 
        gap: 50px; 
        padding: 0 20px; 
        justify-content: center; 
    }
    
    .mvc-narrative-nav { 
        flex: none;
        flex-direction: row; 
        border-left: none; 
        border-top: 2px solid rgba(0,0,0,0.08); 
        padding: 30px 0 0 0; 
        gap: 20px; 
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }
    
    .mvc-narrative-nav::-webkit-scrollbar { display: none; }
    
    .mvc-nav-item { font-size: 0.85rem; }
    
    .mvc-nav-item.active::before { 
        top: -32px; 
        left: 0; 
        width: 40px; 
        height: 4px; 
    }
    
    .mvc-narrative-text { flex: none; }
    .mvc-narrative-text h2 { margin-bottom: 20px; }
    .mvc-narrative-text p { max-width: 100%; font-size: 1rem; }
}





/* =========================================
   ABOUT US PAGE: SECTION 3 - MISSION & VISION
========================================= */
.mvc-statement-section {
    background-color: #FBFBFD; 
    padding: 160px 20px;
    font-family: 'Inter', -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 160px; 
    overflow: hidden; 
}

.mvc-statement-block {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    
    /* Hardware-Accelerated Starting State */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.mvc-statement-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* The Massive Background Watermark */
.mvc-watermark {
    position: absolute;
    top: -12%;
    left: -2%;
    /* Replaced pixel breakpoints with fluid clamp math */
    font-size: clamp(5rem, 14vw, 12.5rem);
    font-weight: 900;
    color: rgba(0, 0, 0, 0.03); 
    line-height: 1;
    letter-spacing: -0.05em;
    z-index: 0;
    pointer-events: none; 
    user-select: none;
}

/* The Foreground Content */
.mvc-statement-content {
    position: relative;
    z-index: 1;
    padding-left: 40px;
    border-left: 4px solid #019CB2; 
}

.mvc-statement-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #019CB2;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 25px;
    display: block;
}

.mvc-statement-text {
    /* Replaced !important tags with fluid typography */
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 300; 
    color: #111111; 
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 0;
    max-width: 95%;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .mvc-statement-section { padding: 100px 20px; gap: 120px; }
    .mvc-watermark { top: -8%; left: 0; }
    .mvc-statement-content { padding-left: 20px; border-left-width: 3px; }
    .mvc-statement-title { margin-bottom: 15px; }
}





/* =========================================
   ABOUT US PAGE: SECTION 4 - OUR VALUES (FLIP GRID)
========================================= */
.mvc-values-section {
    background-color: #FBFBFD;
    padding: 140px 5%;
    font-family: 'Inter', -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mvc-values-header {
    text-align: center;
    margin-bottom: 80px;
}

.mvc-values-header h2 {
    font-size: clamp(3rem, 5vw, 4rem);
    font-weight: 800; /* Matching your robust header style */
    color: #111111;
    letter-spacing: -1px;
    margin: 0;
}

/* CSS Grid for the 4 Columns */
.mvc-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1300px;
}

/* --- THE 3D FLIP ARCHITECTURE --- */
.mvc-flip-card {
    background-color: transparent;
    width: 100%;
    height: 380px;
    perspective: 1500px; /* Deep perspective for a premium rotation */
    cursor: pointer;
}

.mvc-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Apple-style easing */
    transform-style: preserve-3d;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border-radius: 16px;
}

/* 1. DESKTOP ONLY: Apply hover effect strictly to devices with a physical mouse */
@media (hover: hover) and (pointer: fine) {
    .mvc-flip-card:hover .mvc-flip-inner {
        transform: rotateY(180deg);
        box-shadow: 0 25px 50px rgba(1, 156, 178, 0.1); 
    }
}

/* 2. MOBILE ONLY: Apply flip purely based on the JavaScript class */
.mvc-flip-card.is-flipped .mvc-flip-inner {
    transform: rotateY(180deg);
    box-shadow: 0 25px 50px rgba(1, 156, 178, 0.1); 
}

/* Prevents the ugly grey flashing box when tapping on iOS */
.mvc-flip-card {
    -webkit-tap-highlight-color: transparent;
}

/* iOS Safari Fix: Removes the ugly grey flash when tapping */
.mvc-flip-card {
    -webkit-tap-highlight-color: transparent;
}

/* Shared properties for both front and back faces */
.mvc-flip-front, 
.mvc-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background-color: #FFFFFF;
    box-sizing: border-box;
}

/* --- FRONT FACE STYLING --- */
.mvc-flip-front {
    border: 1px solid rgba(0,0,0,0.03);
}

.mvc-icon-wrapper {
    width: 64px;
    height: 64px;
    margin-bottom: 25px;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mvc-icon-wrapper svg {
    width: 100%;
    height: 100%;
}

.mvc-flip-front h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: #111111;
    margin: 0;
    line-height: 1.3;
}

/* --- BACK FACE STYLING --- */
.mvc-flip-back {
    background-color: #FFFFFF;
    border: 2px solid #019CB2; /* Crisp brand accent on the reverse */
    transform: rotateY(180deg);
}

.mvc-flip-back p {
    font-size: 1rem;
    line-height: 1.7;
    color: #444444;
    margin: 0;
    font-weight: 400;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 1024px) {
    .mvc-values-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .mvc-flip-card { height: 350px; }
}

@media (max-width: 768px) {
    .mvc-values-section { padding: 80px 20px; }
    .mvc-values-grid { grid-template-columns: 1fr; gap: 30px; }
    .mvc-flip-card { height: 320px; }
    /* Touch devices maintain the hover state when tapped */
}



/* =========================================
   ABOUT US PAGE: SECTION 5 - ARCHITECTURAL ACCORDION
========================================= */
.mvc-accordion-section {
    background-color: #FBFBFD; 
    padding: 140px 5%;
    font-family: 'Inter', -apple-system, sans-serif;
}

.mvc-accordion-header {
    max-width: 1200px;
    margin: 0 auto 60px auto;
    text-align: left;
}

.mvc-accordion-header span {
    color: #019CB2;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-accordion-header h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    color: #111111;
    letter-spacing: -1.5px;
    margin: 0 0 20px 0;
    line-height: 1.1;
}

/* --- The Fluid Accordion Architecture --- */
.mvc-accordion-wrapper {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    height: 600px; 
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.03);
    border-radius: 16px;
    overflow: hidden; 
}

.mvc-accordion-panel {
    flex: 1; 
    position: relative;
    overflow: hidden;
    background-color: #FFFFFF;
    border-right: 1px solid rgba(0,0,0,0.05);
    transition: all 0.7s cubic-bezier(0.25, 1, 0.2, 1); 
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 50px 40px;
    /* Removes the ugly grey flash when tapping on iOS */
    -webkit-tap-highlight-color: transparent;
}

.mvc-accordion-panel:last-child {
    border-right: none;
}

/* --- Panel Typography (With Text Wrap & Crush Fixes) --- */
.mvc-panel-number {
    position: absolute;
    top: 30px;
    left: 40px;
    font-size: clamp(4rem, 6vw, 5rem);
    font-weight: 900;
    color: #F0F0F0;
    line-height: 1;
    transition: all 0.7s ease;
}

.mvc-panel-title {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 700;
    color: #111111;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
    transition: all 0.5s ease;
    /* Allows the title to wrap naturally and respect <br> tags */
    white-space: normal; 
}

.mvc-panel-content {
    font-size: 1.05rem;
    /* Forces the text to be light grey, overriding global theme styles */
    color: #A0A0A5 !important; 
    line-height: 1.7;
    margin: 0;
    
    /* Physically crushes the paragraph so it takes up ZERO space by default */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.2, 1);
}

/* The Cyan Accent Line */
.mvc-panel-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: transparent;
    transition: background-color 0.4s ease;
}

/* --- Desktop Hover Physics (Mouse Only) --- */
@media (hover: hover) and (pointer: fine) {
    .mvc-accordion-panel:hover {
        flex: 2.5; 
        background-color: #050505; 
    }
    .mvc-accordion-panel:hover .mvc-panel-number { color: rgba(255, 255, 255, 0.05); }
    .mvc-accordion-panel:hover .mvc-panel-title { color: #FAFAFA; margin-bottom: 15px; }
    .mvc-accordion-panel:hover .mvc-panel-content { 
        /* Expands the height back open */
        max-height: 300px; 
        opacity: 1; 
        transform: translateY(0); 
        transition-delay: 0.2s; 
    }
    .mvc-accordion-panel:hover .mvc-panel-accent { background-color: #019CB2; }
}

/* --- Mobile Tap Physics (Touch Controlled via JS) --- */
.mvc-accordion-panel.is-expanded {
    background-color: #050505; 
}
.mvc-accordion-panel.is-expanded .mvc-panel-number { color: rgba(255, 255, 255, 0.05); }
.mvc-accordion-panel.is-expanded .mvc-panel-title { color: #FAFAFA; margin-bottom: 15px; }
.mvc-accordion-panel.is-expanded .mvc-panel-content { 
    max-height: 400px; 
    opacity: 1; 
    transform: translateY(0); 
    transition-delay: 0.2s; 
}
.mvc-accordion-panel.is-expanded .mvc-panel-accent { background-color: #019CB2; }

/* --- Mobile Adjustments --- */
@media (max-width: 992px) {
    .mvc-accordion-wrapper { height: 500px; }
}

@media (max-width: 768px) {
    .mvc-accordion-section { padding: 100px 20px; }
    .mvc-accordion-wrapper { flex-direction: column; height: auto; border-radius: 12px; }
    
    /* Slightly adjusted padding and height for better mobile proportions */
    .mvc-accordion-panel { 
        border-right: none; 
        border-bottom: 1px solid rgba(0,0,0,0.05); 
        padding: 35px 25px; 
        height: 160px; 
    }
    .mvc-accordion-panel:last-child { border-bottom: none; }
    
    .mvc-accordion-panel.is-expanded { flex: auto; height: 480px; }
    
    /* THE OVERLAP FIX: Move the watermark number to the top right and scale it down */
    .mvc-panel-number { 
        top: 25px; /* Pushed down slightly so it aligns nicely with the first line of the title */
        left: auto; 
        right: 20px; 
        font-size: 2.8rem; /* Scaled down significantly from 3.8rem */
    }
    
    /* Constrain the title width to ensure a perfect gap between text and number */
    .mvc-panel-title { 
        max-width: 75%; 
    }
}




/* =========================================
   ABOUT US PAGE: SECTION 6 - OPERATIONAL BLUEPRINT
========================================= */
.mvc-blueprint-section {
    background-color: #FFFFFF; /* White background to contrast the previous #FBFBFD section */
    padding: 140px 5%;
    font-family: 'Inter', -apple-system, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.mvc-blueprint-header {
    max-width: 1200px;
    margin: 0 auto 60px auto;
    text-align: left;
}

.mvc-blueprint-header span {
    color: #019CB2;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-blueprint-header h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    color: #111111;
    letter-spacing: -1px;
    margin: 0;
    line-height: 1.1;
}

/* --- The Grid Matrix --- */
.mvc-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid rgba(0,0,0,0.06); 
    background-color: rgba(0,0,0,0.06); /* Creates the 1px inner lines perfectly */
    gap: 1px; 
}

.mvc-matrix-cell {
    background-color: #FFFFFF;
    padding: 60px 40px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.4s ease;
}

/* The Cyan "Laser" Indicator */
.mvc-matrix-cell::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background-color: #019CB2;
    transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mvc-matrix-cell:hover::before {
    height: 100%;
}

.mvc-matrix-cell:hover {
    background-color: #FAFAFC; /* Extremely subtle shift on hover */
}

/* Cell Typography */
.mvc-cell-num {
    font-size: 0.75rem;
    font-weight: 700;
    color: #019CB2;
    margin-bottom: 25px;
    display: block;
    letter-spacing: 2px;
}

.mvc-matrix-cell h3 {
    font-size: clamp(1.3rem, 2vw, 1.5rem);
    font-weight: 700;
    color: #111111;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mvc-matrix-cell p {
    font-size: 1rem;
    color: #55555A;
    line-height: 1.7;
    margin: 0;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Fluid shift on hover */
.mvc-matrix-cell:hover h3, 
.mvc-matrix-cell:hover p {
    transform: translateX(8px);
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
    .mvc-matrix { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .mvc-blueprint-section { padding: 80px 20px; }
    .mvc-matrix { grid-template-columns: 1fr; }
    .mvc-matrix-cell { padding: 40px 30px; }
}




/* =========================================
   ABOUT US PAGE: SECTION 7 - THE MEVACHI ADVANTAGE
========================================= */
.mvc-delta-section {
    background-color: #FBFBFD; /* Seamless flow from previous sections */
    padding: 140px 5%;
    font-family: 'Inter', -apple-system, sans-serif;
    color: #111111;
}

.mvc-delta-header {
    max-width: 1200px;
    margin: 0 auto 80px auto;
    text-align: left;
}

.mvc-delta-header span {
    color: #019CB2;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-delta-header h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    color: #111111;
    letter-spacing: -1.5px;
    margin: 0 0 20px 0;
    line-height: 1.1;
}

.mvc-delta-header p {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    color: #55555A;
    max-width: 650px;
    margin: 0;
    line-height: 1.6;
}

/* --- The 2x2 Minimalist Grid --- */
.mvc-delta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 60px; /* Large gaps for premium negative space */
    max-width: 1200px;
    margin: 0 auto;
}

.mvc-delta-card {
    background-color: #FFFFFF; /* Pure white cards pop off the off-white background */
    padding: 50px 40px;
    border-top: 3px solid rgba(0,0,0,0.06); /* Subtle architectural line */
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    border-radius: 0 0 12px 12px;
}

/* The Hover Physics */
.mvc-delta-card:hover {
    border-top-color: #019CB2; /* Line snaps to Cyan */
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

.mvc-delta-card h3 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 800;
    color: #111111;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.mvc-delta-card h3 span {
    color: #019CB2;
    margin-right: 10px;
}

.mvc-delta-card p {
    font-size: 1.05rem;
    color: #55555A;
    line-height: 1.7;
    margin: 0;
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .mvc-delta-grid { gap: 40px; }
}

@media (max-width: 768px) {
    .mvc-delta-section { padding: 100px 20px; }
    .mvc-delta-grid { grid-template-columns: 1fr; gap: 30px; }
    .mvc-delta-card { padding: 40px 30px; } 
}






/* =========================================
   NEWS PAGE: SECTION 1 - HERO
========================================= */
.mvc-news-hero {
    position: relative; /* Anchors the 3D canvas */
    background-color: #050505; 
    padding: 220px 5% 160px 5%; /* Taller padding to show off the 3D structure */
    font-family: 'Inter', -apple-system, sans-serif;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow: hidden; /* Prevents the canvas from breaking the page width */
}

/* Position the 3D Engine behind the text */
#mvc-molecular-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none; /* Allows the user's mouse to click/highlight text right through it */
}

/* Ensure typography stays on top of the canvas */
.mvc-hero-content {
    position: relative;
    z-index: 1; 
    max-width: 900px;
    margin: 0 auto;
}

.mvc-hero-kicker {
    color: #019CB2;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 25px;
}

.mvc-hero-title {
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0 0 25px 0;
}

.mvc-hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: #A0A0A5;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 400;
}





/* =========================================
   NEWS PAGE: INFINITE GRID & SINGLE ARTICLE
========================================= */
.mvc-infinite-newsroom {
    background-color: #FFFFFF;
    padding: 120px 5%;
    font-family: 'Inter', -apple-system, sans-serif;
}

#mvc-flagship { max-width: 1200px; margin: 0 auto 100px auto; border-bottom: 1px solid #EAEAEA; padding-bottom: 80px; }

.mvc-flagship-card { display: flex; align-items: center; gap: 60px; text-decoration: none; }

.mvc-flagship-image-wrapper { flex: 0 0 60%; aspect-ratio: 16/9; overflow: hidden; background-color: #f5f5f5; border-radius: 8px; }
.mvc-flagship-image-inner { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mvc-flagship-card:hover .mvc-flagship-image-inner { transform: scale(1.04); }

.mvc-flagship-content { flex: 1; display: flex; flex-direction: column; }
.mvc-flagship-meta { font-size: 0.8rem; font-weight: 700; color: #019CB2; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
.mvc-flagship-title { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 800; color: #111111; line-height: 1.15; letter-spacing: -1px; margin: 0 0 20px 0; }
.mvc-flagship-excerpt { font-size: 1.1rem; line-height: 1.6; color: #55555A; margin-bottom: 30px; }
.mvc-flagship-read-more { font-size: 0.9rem; font-weight: 800; color: #111111; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease; }
.mvc-flagship-card:hover .mvc-flagship-read-more { color: #019CB2; }

/* The Grid */
.mvc-news-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 40px; }
.mvc-archive-card { display: flex; flex-direction: column; text-decoration: none; }
.mvc-archive-image-wrapper { width: 100%; aspect-ratio: 4/3; overflow: hidden; margin-bottom: 20px; background-color: #f5f5f5; border-radius: 6px; }
.mvc-archive-image-inner { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mvc-archive-card:hover .mvc-archive-image-inner { transform: scale(1.06); }
.mvc-archive-meta { font-size: 0.75rem; font-weight: 700; color: #019CB2; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }
.mvc-archive-title { font-size: 1.25rem; font-weight: 800; color: #111111; line-height: 1.3; margin: 0; transition: color 0.3s; }
.mvc-archive-card:hover .mvc-archive-title { color: #019CB2; }

/* Load Button */
.mvc-load-container { text-align: center; margin-top: 80px; }
.mvc-btn-outline { background: transparent; border: 1px solid #111111; color: #111111; padding: 16px 40px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease; }
.mvc-btn-outline:hover { background: #111111; color: #ffffff; }

/* Single Article Reader Layout */
.mvc-article-engine { background-color: #FAFAFA; padding: 160px 5% 100px 5%; font-family: 'Inter', -apple-system, sans-serif; }
.mvc-article-body { max-width: 800px; margin: 0 auto; background: #ffffff; padding: 60px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); }
.mvc-article-header { text-align: center; margin-bottom: 40px; }
.mvc-article-header .mvc-article-meta { font-size: 0.85rem; color: #019CB2; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; }
.mvc-article-header .mvc-article-title { font-size: clamp(2.5rem, 4vw, 3.5rem); color: #111111; font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; margin: 0; }
.mvc-article-hero-image img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 40px; }
.mvc-article-content { font-size: 1.15rem; line-height: 1.8; color: #333333; }
.mvc-article-content p { margin-bottom: 25px; }

/* Continue Reading Section */
.mvc-continue-reading { max-width: 1200px; margin: 100px auto 0 auto; border-top: 1px solid #EAEAEA; padding-top: 80px; }
.mvc-continue-header h2 { font-size: 2rem; font-weight: 800; color: #111111; margin-bottom: 40px; text-align: left; }

@media (max-width: 992px) {
    .mvc-flagship-card { flex-direction: column; gap: 30px; }
    .mvc-flagship-image-wrapper { width: 100%; }
    .mvc-news-grid { grid-template-columns: repeat(2, 1fr); }
    .mvc-article-body { padding: 40px 20px; }
}
@media (max-width: 768px) {
    .mvc-news-grid { grid-template-columns: 1fr; }
}






/* =========================================
   ARTICLES PAGE: TECHNICAL HERO
========================================= */
.mvc-articles-hero {
    position: relative; /* Anchors the absolute canvas */
    background: radial-gradient(circle at top center, #0a0e11 0%, #050505 100%); /* Adds deep vignetting */
    padding: 200px 5% 120px 5%;
    font-family: 'Inter', -apple-system, sans-serif;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow: hidden; /* Prevents the math grid from breaking the layout */
}

/* Position the hardware-accelerated grid behind the text */
#mvc-vector-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none; /* Allows users to highlight the text through the canvas */
}

.mvc-articles-hero .mvc-hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Forces the text above the canvas */
}

/* Keep your existing .mvc-hero-kicker, .mvc-hero-title, and .mvc-hero-subtitle CSS below this */

.mvc-articles-hero .mvc-hero-kicker {
    color: #019CB2;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 25px;
}

.mvc-articles-hero .mvc-hero-title {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0 0 25px 0;
}

.mvc-articles-hero .mvc-hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: #A0A0A5;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 400;
}







/* =========================================
   MEVACHI CORE: CONTACT PORTAL
========================================= */
.mevachi-portal {
    font-family: 'Inter', -apple-system, sans-serif;
    color: #0a0a0a;
    background-color: #FAFAFA;
    width: 100%;
}

.mevachi-hero {
    background-color: #0a0a0a;
    color: #ffffff;
    padding: 180px 20px 220px 20px; 
    text-align: center;
}

.mevachi-hero h1 {
    font-size: clamp(2.5rem, 5vw, 42px);
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.mevachi-hero p {
    font-size: 18px;
    color: #cccccc;
    max-width: 600px;
    margin: 0 auto;
    font-weight: 300;
}

.mevachi-split-container {
    max-width: 1200px;
    margin: 0 auto 80px auto; 
    display: flex;
    gap: 60px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.mevachi-col-left {
    flex: 0 0 35%;
    padding-top: 40px; 
}

.mevachi-trust-badge {
    color: #019CB2;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 40px;
    display: block;
}

.mevachi-contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.mevachi-contact-icon {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    fill: #019CB2;
    flex-shrink: 0;
}

.mevachi-contact-text h4 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mevachi-contact-text p {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}

.mevachi-col-right {
    flex: 1;
    margin-top: -140px; 
    background: #ffffff;
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
}

.mevachi-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.mevachi-form-group {
    display: flex;
    flex-direction: column;
}

.mevachi-form-group.full-width {
    grid-column: 1 / -1;
}

.mevachi-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #555555;
    margin-bottom: 8px;
}

.mevachi-form-group input, 
.mevachi-form-group select, 
.mevachi-form-group textarea {
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    background-color: #fafafa;
    transition: all 0.3s ease;
}

.mevachi-form-group input:focus, 
.mevachi-form-group select:focus, 
.mevachi-form-group textarea:focus {
    outline: none;
    border-color: #019CB2;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(1, 156, 178, 0.1);
}

.mevachi-form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.mevachi-submit-btn {
    grid-column: 1 / -1;
    background-color: #019CB2;
    color: #ffffff;
    padding: 18px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.mevachi-submit-btn:hover {
    background-color: #017A8C;
}

.mevachi-map-section {
    position: relative;
    width: 100%;
    height: 500px;
    background: #e0e0e0;
}

.mevachi-map-iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(1) contrast(1.1) brightness(0.9);
    transition: all 0.5s ease;
}

.mevachi-map-section:hover .mevachi-map-iframe {
    filter: grayscale(0.5) contrast(1);
}

.mevachi-map-card {
    position: absolute;
    bottom: 40px;
    left: 40px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(1, 156, 178, 0.3);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    max-width: 320px;
}

.mevachi-map-card h3 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #019CB2;
    letter-spacing: 1px;
}

.mevachi-map-card p {
    margin: 0 0 20px 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

.mevachi-map-card a {
    display: inline-block;
    color: #0a0a0a;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid #019CB2;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

.mevachi-map-card a:hover {
    color: #019CB2;
}

@media (max-width: 900px) {
    .mevachi-split-container {
        flex-direction: column;
        gap: 40px;
    }
    .mevachi-col-right {
        margin-top: 0; 
    }
    .mevachi-form-grid {
        grid-template-columns: 1fr;
    }
    .mevachi-col-right {
        padding: 30px 20px;
    }
    .mevachi-map-card {
        bottom: 20px;
        left: 20px;
        right: 20px;
        max-width: none;
    }
}









/* =========================================
   CASE STUDIES: SHARED ARCHITECTURE
========================================= */
.mvc-case-study-engine {
    width: 100%;
    background-color: #FFFFFF;
}

/* 1. Full Viewport Hero (Desktop) */
.mvc-case-hero {
    position: relative;
    width: 100%;
    height: 100vh; 
    min-height: 600px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Subtle Parallax Effect */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5%;
}

.mvc-case-hero-content {
    max-width: 1100px;
    position: relative;
    z-index: 2;
}

.mvc-case-title {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem); 
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.15;
    letter-spacing: -1px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.4); 
    margin: 0;
}

/* 2. Full Viewport Hero (iOS / Mobile Override) */
@media (max-width: 768px) {
    .mvc-case-hero {
        /* Kills the parallax bug so the image instantly renders on iPhones */
        background-attachment: scroll !important; 
        
        /* Uses "Small Viewport Height" to ignore the disappearing Safari URL bar */
        height: 100svh !important; 
        min-height: 400px; 
        
        /* Forces Safari to recalculate the image to fit the phone screen */
        background-size: cover !important; 
        background-position: center center !important;
    }
}







/* =========================================
   CASE STUDIES: 2. DATA LEDGER (media)
========================================= */
.mvc-ledger-container {
    width: 100%;
    background-color: #FFFFFF;
    position: relative;
    z-index: 10; /* Ensures it sits above the parallax hero image */
}

.mevachi-project-ledger {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 5%;
    border-bottom: 1px solid #EAEAEA;
}

.ledger-item {
    display: flex;
    flex-direction: column;
    padding-right: 40px;
    border-right: 1px solid #EAEAEA;
}

.ledger-item:last-child {
    border-right: none;
    padding-right: 0;
}

.ledger-label {
    font-size: 11px;
    font-weight: 700;
    color: #019CB2; /* Brand Teal */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.ledger-value {
    font-size: 16px;
    font-weight: 800;
    color: #1D1D1F;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .mevachi-project-ledger {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 0;
    }
    .ledger-item:nth-child(2) { border-right: none; padding-right: 0; }
}

/* =========================================
   CASE STUDIES: STICKY COLUMN ENGINE
========================================= */
/* A highly optimized, native sticky class without Elementor bloat */
.mvc-sticky-col {
    position: -webkit-sticky;
    position: sticky;
    top: 140px; /* Adjusts clearance from the transparent site header */
    height: max-content; /* Native fix to prevent column stretching */
    z-index: 5;
}






/* =========================================
   CASE STUDIES: 3. NARRATIVE SCROLL ENGINE (media)
========================================= */
.mvc-focus-scroll {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 5%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* CRITICAL for sticky to work */
}

/* Left Column constraints */
.mvc-lens-container {
    width: 44%;
    height: 540px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Right Column constraints */
.mvc-narrative-track {
    width: 48%;
    padding-bottom: 35vh; 
}

/* The Layers inside the sticky container */
.mvc-lens-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0.94);
    filter: blur(12px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mvc-lens-layer.active-lens {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
    z-index: 2;
}

.integrated-graphic-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-canvas-centered {
    width: 100%;
    max-width: 420px; 
    aspect-ratio: 1 / 1; 
    margin-bottom: 25px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06); 
}

.cinematic-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
}

.integrated-meta {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.meta-number {
    font-family: monospace;
    font-size: 10px;
    font-weight: 700;
    color: #019CB2;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.meta-number.alt-num { color: #DB537D; }
.meta-number.alt-num2 { color: #B29401; }

.meta-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #999999;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.meta-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #111111;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.3;
}
.meta-title .thin { font-weight: 400; color: #777777; }

.story-node {
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.15;
    transform: translateX(10px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-node.node-active {
    opacity: 1;
    transform: translateX(0);
}

.node-title {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #111111;
    margin-bottom: 20px;
    line-height: 1.2;
}

.story-node p {
    font-size: 17px;
    line-height: 1.85;
    color: #444444;
    margin: 0 0 20px 0;
}
.story-node p:last-child { margin-bottom: 0; }

@media (max-width: 992px) {
    .mvc-focus-scroll { flex-direction: column; padding: 60px 5%; }
    /* Disables sticky behavior on mobile so layout stacks normally */
    .mvc-lens-container { position: relative !important; width: 100%; top: 0 !important; margin-bottom: 60px; }
    .mvc-narrative-track { width: 100%; padding-bottom: 0; }
    .story-node { min-height: auto; margin-bottom: 50px; opacity: 1; transform: none; }
}






/* =========================================
   CASE STUDIES: 4. ENGINEERING SOLUTION GRID (MEDIA HOUSE SPECIFIC)
========================================= */
.mvc-media-solution-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 5%;
    background: transparent;
}

.mvc-media-solution-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 70px auto;
}

.mvc-media-solution-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #019CB2; 
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-media-solution-title {
    font-size: clamp(2rem, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #111111;
    margin-bottom: 20px;
    line-height: 1.1;
}

.mvc-media-solution-subtitle {
    font-size: 19px;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

.mvc-media-solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.mvc-media-solution-card {
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); 
    border: 1px solid #F0F0F0;
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.mvc-media-solution-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.mvc-media-card-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    background: #FFFFFF; 
    border-bottom: 1px solid #F8F9FA; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.mvc-media-card-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    transition: transform 0.6s ease;
}

.mvc-media-solution-card:hover .mvc-media-card-image {
    transform: scale(1.03); 
}

.mvc-media-card-content {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mvc-media-card-step {
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    color: #DB537D; 
    margin-bottom: 15px;
    display: block;
}

.mvc-media-card-title {
    font-size: 22px;
    font-weight: 800;
    color: #111111;
    margin-bottom: 15px;
    line-height: 1.3;
}

.mvc-media-card-text {
    font-size: 16px;
    line-height: 1.7;
    color: #55555A;
    margin: 0;
}

@media (max-width: 992px) {
    .mvc-media-solution-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .mvc-media-solution-header { text-align: left; }
    .mvc-media-solution-grid { grid-template-columns: 1fr; }
}





/* =========================================
   CASE STUDIES: 5. METRICS & VALIDATION (media)
========================================= */
.mvc-metrics-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 5%;
    background: #FFFFFF;
}

.mvc-metrics-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
}

.mvc-metrics-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #019CB2; 
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-metrics-title {
    font-size: clamp(2rem, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #111111;
    margin-bottom: 20px;
    line-height: 1.1;
}

.mvc-metrics-subtitle {
    font-size: 19px;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

.mvc-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin-bottom: 100px;
}

.mvc-metric-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mvc-metric-giant {
    font-size: 80px;
    font-weight: 900;
    letter-spacing: -3px;
    color: #111111;
    line-height: 1;
    margin-bottom: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.mvc-metric-symbol {
    font-size: 50px;
    font-weight: 700;
    color: #019CB2; 
    vertical-align: super;
}

.mvc-metric-heading {
    font-size: 20px;
    font-weight: 800;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #F0F0F0;
    width: 100%;
}

.mvc-metric-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
    margin: 0;
}

.mvc-metrics-conclusion {
    background: #F4FAFB; 
    border: 1px solid rgba(1, 156, 178, 0.1);
    border-radius: 20px;
    padding: 60px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.mvc-conclusion-title {
    font-size: 28px;
    font-weight: 800;
    color: #111111;
    margin-bottom: 20px;
}

.mvc-conclusion-text {
    font-size: 18px;
    line-height: 1.8;
    color: #444444;
    margin: 0;
}

/* Elegant CSS Fade-Up Animations */
.mvc-reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mvc-reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mvc-delay-1 { transition-delay: 0.15s; }
.mvc-delay-2 { transition-delay: 0.3s; }
.mvc-delay-3 { transition-delay: 0.45s; }

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .mvc-metrics-grid { grid-template-columns: 1fr; gap: 80px; }
    .mvc-metric-heading { width: 60%; }
    .mvc-metrics-conclusion { padding: 40px 20px; }
}

@media (max-width: 768px) {
    .mvc-metrics-header { text-align: left; }
    .mvc-metric-card { align-items: flex-start; text-align: left; }
    .mvc-metric-heading { width: 100%; }
    .mvc-metrics-conclusion { text-align: left; }
    .mvc-metric-giant { font-size: 65px; }
}




/* =========================================
   CASE STUDIES: 6. VALIDATION OVERLAY (ink)
========================================= */
.mvc-validation-overlay {
    position: relative;
    width: 100%;
    min-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 5%;
    overflow: hidden;
}

.mvc-validation-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.mvc-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mvc-bg-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.4); 
}

.mvc-validation-glass-panel {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(24px); 
    -webkit-backdrop-filter: blur(24px); 
    border-radius: 24px;
    padding: 80px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
}

.mvc-glass-header {
    text-align: center;
    margin-bottom: 40px;
}

.mvc-glass-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #019CB2; 
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-glass-title {
    font-size: clamp(2rem, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #111111;
    line-height: 1.15;
    margin: 0;
}

.mvc-glass-content {
    margin-bottom: 50px;
}

.mvc-glass-content p {
    font-size: 18px;
    line-height: 1.8;
    color: #333333; 
    margin: 0 0 20px 0;
    text-align: center;
}

.mvc-glass-content p:last-child {
    margin-bottom: 0;
}

.mvc-glass-metrics {
    display: flex;
    justify-content: center;
    gap: 80px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 40px;
}

.mvc-g-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mvc-g-metric-value {
    font-size: 36px;
    font-weight: 900;
    color: #111111;
    margin-bottom: 5px;
    letter-spacing: -1px;
}

.mvc-g-metric-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666666;
}

@media (max-width: 768px) {
    .mvc-validation-overlay { padding: 60px 5%; }
    .mvc-validation-glass-panel { padding: 40px 20px; }
    .mvc-glass-content p { font-size: 16px; text-align: left; }
    .mvc-glass-metrics { flex-direction: column; gap: 30px; }
}





/* =========================================
   CASE STUDIES: DATA DISCOVERY GRAPHS (ink)
========================================= */
.mvc-data-discovery {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 5%;
    background: transparent;
}

.mvc-data-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
}

.mvc-data-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #019CB2; 
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-data-title {
    font-size: clamp(2rem, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #111111;
    margin-bottom: 20px;
    line-height: 1.1;
}

.mvc-data-subtitle {
    font-size: 19px;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

.mvc-data-container {
    display: flex;
    flex-direction: column;
    gap: 100px; 
}

.mvc-data-row {
    display: flex;
    align-items: center;
    gap: 60px;
}

.mvc-data-row.reverse-row {
    flex-direction: row-reverse;
}

.mvc-data-content {
    flex: 1;
    padding: 20px;
}

.mvc-data-step {
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    color: #DB537D; 
    margin-bottom: 15px;
    display: block;
}

.mvc-data-heading {
    font-size: 32px;
    font-weight: 800;
    color: #111111;
    margin-bottom: 20px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.mvc-data-text {
    font-size: 18px;
    line-height: 1.8;
    color: #555555;
    margin: 0;
}

.mvc-data-visual {
    flex: 1.2; 
}

.mvc-graph-wrapper {
    width: 100%;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05); 
    border: 1px solid #EAEAEA;
    padding: 30px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.mvc-coded-graph {
    width: 100%;
    height: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* CSS Drawing Animations for the Graphs */
.mvc-graph-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.mvc-data-point {
    opacity: 0;
}

/* When the parent row gets the .mvc-is-visible class, animate the SVG children */
.mvc-is-visible .mvc-graph-line {
    animation: drawLine 2s ease-out forwards;
    animation-delay: 0.3s;
}

.mvc-is-visible .mvc-data-point.delay-pm { animation: fadeIn 0.5s ease-out forwards 0.5s; }
.mvc-is-visible .mvc-data-point.delay-tvoc { animation: fadeIn 0.5s ease-out forwards 1.2s; }
.mvc-is-visible .mvc-data-point.delay-co2 { animation: fadeIn 0.5s ease-out forwards 1.8s; }

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Structural Row Animations */
.mvc-reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mvc-reveal-up.mvc-is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 992px) {
    .mvc-data-row, .mvc-data-row.reverse-row { flex-direction: column; gap: 40px; }
    .mvc-data-content { padding: 0; }
    .mvc-data-heading { font-size: 28px; }
    .mvc-graph-wrapper { padding: 15px; }
}







/* =========================================
   CASE STUDIES: ENGINEERING ARCHITECTURE (ink)
========================================= */
.mvc-arch-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 5%;
    background: transparent;
}

.mvc-arch-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 100px auto;
}

.mvc-arch-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #019CB2; 
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-arch-title {
    font-size: clamp(2rem, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #111111;
    margin-bottom: 20px;
    line-height: 1.1;
}

.mvc-arch-subtitle {
    font-size: 19px;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

.mvc-arch-container {
    display: flex;
    flex-direction: column;
    gap: 120px; 
}

.mvc-arch-row {
    display: flex;
    align-items: center;
    gap: 80px;
}

.mvc-arch-row.mvc-reverse-row {
    flex-direction: row-reverse;
}

.mvc-arch-visual {
    flex: 1.2;
}

.mvc-arch-image-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3; 
    background: #F8F9FA;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08); 
    border: 1px solid #EAEAEA;
    transition: transform 0.6s ease;
    will-change: transform;
}

.mvc-arch-image-wrapper:hover {
    transform: translateY(-10px); 
}

.mvc-arch-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    transition: transform 0.8s ease;
}

.mvc-arch-image-wrapper:hover .mvc-arch-image {
    transform: scale(1.05); 
}

.mvc-arch-content {
    flex: 1;
}

.mvc-arch-step {
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    color: #DB537D; 
    margin-bottom: 15px;
    display: block;
}

.mvc-arch-heading {
    font-size: 36px;
    font-weight: 800;
    color: #111111;
    margin-bottom: 25px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.mvc-arch-text {
    font-size: 18px;
    line-height: 1.85;
    color: #555555;
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .mvc-arch-row, .mvc-arch-row.mvc-reverse-row { flex-direction: column; gap: 50px; }
    .mvc-arch-heading { font-size: 32px; }
}







/* =========================================
   CASE STUDIES: VALIDATION FINALE (INK)
========================================= */
.mvc-validation-finale {
    width: 100%;
    background: #FFFFFF;
}

/* PART A: METRICS GRID */
.mvc-finale-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 5% 80px 5%;
}

.mvc-finale-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
}

.mvc-finale-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #019CB2; 
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-finale-title {
    font-size: clamp(2rem, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #111111;
    margin-bottom: 20px;
    line-height: 1.1;
}

.mvc-finale-subtitle {
    font-size: 19px;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

.mvc-finale-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin-bottom: 60px;
}

.mvc-finale-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mvc-finale-giant {
    font-size: clamp(50px, 6vw, 70px);
    font-weight: 900;
    letter-spacing: -2px;
    color: #111111;
    line-height: 1;
    margin-bottom: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.mvc-finale-symbol {
    font-size: clamp(24px, 3vw, 30px); 
    font-weight: 700;
    color: #019CB2; 
    vertical-align: super;
    margin-left: 5px;
}

.mvc-finale-heading {
    font-size: 20px;
    font-weight: 800;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #F0F0F0;
    width: 100%;
}

.mvc-finale-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
    margin: 0;
}

/* PART B: FROSTED GLASS FINALE */
.mvc-finale-bg-wrapper {
    position: relative;
    width: 100%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 5%;
    overflow: hidden;
}

.mvc-finale-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.mvc-finale-bg-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.5); 
    z-index: 2;
}

.mvc-finale-glass {
    position: relative;
    z-index: 3;
    max-width: 900px;
    width: 100%;
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(24px); 
    -webkit-backdrop-filter: blur(24px); 
    border-radius: 24px;
    padding: 80px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
}

.mvc-finale-glass-header {
    text-align: center;
    margin-bottom: 40px;
}

.mvc-finale-glass-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #019CB2; 
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-finale-glass-title {
    font-size: clamp(2rem, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #111111;
    line-height: 1.15;
    margin: 0;
}

.mvc-finale-glass-content {
    margin-bottom: 50px;
}

.mvc-finale-glass-content p {
    font-size: 18px;
    line-height: 1.8;
    color: #333333; 
    margin: 0 0 20px 0;
    text-align: center;
}

.mvc-finale-glass-content p:last-child {
    margin-bottom: 0;
}

.mvc-finale-glass-metrics {
    display: flex;
    justify-content: center;
    gap: 100px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 40px;
}

.mvc-finale-g-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mvc-finale-g-metric-value {
    font-size: 38px;
    font-weight: 900;
    color: #111111;
    margin-bottom: 5px;
    letter-spacing: -1px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.mvc-finale-g-metric-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666666;
}

/* Animations */
.mvc-reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.mvc-reveal-up.mvc-is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mvc-delay-1 { transition-delay: 0.15s; }
.mvc-delay-2 { transition-delay: 0.3s; }

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .mvc-finale-grid { grid-template-columns: 1fr; gap: 80px; }
    .mvc-finale-heading { width: 60%; }
    .mvc-finale-glass { padding: 50px 30px; }
    .mvc-finale-glass-metrics { gap: 50px; }
}

@media (max-width: 768px) {
    .mvc-finale-header { text-align: left; }
    .mvc-finale-card { align-items: flex-start; text-align: left; }
    .mvc-finale-heading { width: 100%; }
    .mvc-finale-glass-content p { text-align: left; }
    .mvc-finale-glass-metrics { flex-direction: column; gap: 30px; }
}






/* =========================================
   CASE STUDIES: THREAT DIAGNOSTIC (ICT SPECIFIC)
========================================= */
.mvc-ict-threat-section {
    width: 100%;
    background: #0A0C10; 
    padding: 120px 5%;
}

.mvc-ict-threat-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
}

.mvc-ict-threat-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #666666; 
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-ict-threat-title {
    font-size: clamp(2.2rem, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #FFFFFF; 
    margin-bottom: 25px;
    line-height: 1.15;
}

.mvc-ict-threat-subtitle {
    font-size: 19px;
    line-height: 1.7;
    color: #A0AAB2; 
    margin: 0;
}

.mvc-ict-threat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.mvc-ict-threat-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03); 
    border-radius: 16px;
    padding: 50px 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease, background 0.4s ease;
    overflow: hidden;
    will-change: transform;
}

.mvc-ict-threat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05); 
}

.mvc-ict-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.mvc-ict-accent-teal { background: #019CB2; box-shadow: 0 0 15px rgba(1, 156, 178, 0.5); }
.mvc-ict-accent-pink { background: #DB537D; box-shadow: 0 0 15px rgba(219, 83, 125, 0.5); }

.mvc-ict-card-number {
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    color: #444444; 
    letter-spacing: 2px;
    display: block;
    margin-bottom: 20px;
}

.mvc-ict-card-heading {
    font-size: 26px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.mvc-ict-card-text {
    font-size: 17px;
    line-height: 1.8;
    color: #A0AAB2;
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .mvc-ict-threat-grid { grid-template-columns: 1fr; gap: 30px; }
    .mvc-ict-threat-card { padding: 40px 30px; }
}







/* =========================================
   CASE STUDIES: STICKY CURTAIN REVEAL (ICT SPECIFIC)
========================================= */
.mvc-ict-curtain-wrapper { position: relative; width: 100%; background: #0A0C10; }
.mvc-ict-curtain-media { position: sticky; top: 0; width: 100%; height: 100vh; z-index: 1; overflow: hidden; }
.mvc-ict-curtain-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mvc-ict-curtain-tint { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(10, 14, 17, 0.1) 0%, rgba(10, 14, 17, 0.7) 100%); }
.mvc-ict-curtain-panel { position: relative; z-index: 2; padding-top: 80vh; padding-bottom: 120px; display: flex; justify-content: center; }
.mvc-ict-curtain-grid { max-width: 1200px; width: 100%; padding: 0 5%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* Premium Solid Cards */
.mvc-ict-solid-card { background: #1C1C1E; border-radius: 24px; padding: 50px 40px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; justify-content: flex-start; transition: transform 0.4s ease; }
.mvc-ict-solid-card:hover { transform: translateY(-5px); }

/* Namespaced Typography */
.mvc-ict-card-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 3px; color: #019CB2; text-transform: uppercase; margin-bottom: 15px; display: block; }
.mvc-ict-card-title { font-size: clamp(28px, 3vw, 34px); font-weight: 800; letter-spacing: -1px; color: #FFFFFF; margin: 0 0 20px 0; line-height: 1.2; }
.mvc-ict-card-subtitle { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: #FFFFFF; margin: 0 0 15px 0; }
.mvc-ict-card-desc { font-size: 16px; line-height: 1.7; color: #A0A0A5; margin: 0; }
.mvc-ict-card-stat { font-size: clamp(60px, 6vw, 72px); font-weight: 800; line-height: 0.9; letter-spacing: -3px; margin-bottom: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.mvc-ict-stat-teal { color: #019CB2; }
.mvc-ict-stat-white { color: #FFFFFF; }
.mvc-ict-card-percent { font-size: 28px; font-weight: 700; vertical-align: super; letter-spacing: 0; margin-left: 2px; }

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .mvc-ict-curtain-media { position: relative; height: 60vh; }
    .mvc-ict-curtain-panel { padding-top: 60px; background: #0A0C10; }
    .mvc-ict-curtain-grid { grid-template-columns: 1fr; gap: 20px; }
    .mvc-ict-solid-card { padding: 40px 30px; }
}






/* =========================================
   CASE STUDIES: AESTHETIC INTEGRATION (ict)
========================================= */
.mvc-integration-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 5%;
    background: #FFFFFF;
}

.mvc-integration-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Content Area */
.mvc-integration-content {
    flex: 1;
}

.mvc-integration-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #019CB2; 
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.mvc-integration-title {
    font-size: clamp(2.2rem, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -1.5px; 
    color: #1d1d1f; 
    margin: 0 0 30px 0;
    line-height: 1.15;
}

.mvc-integration-desc {
    font-size: 17px;
    line-height: 1.65;
    color: #515154; 
    margin: 0 0 20px 0;
}

.mvc-tech-specs {
    list-style: none;
    padding: 0;
    margin: 35px 0 0 0;
    border-top: 1px solid #EAEAEA;
    padding-top: 25px;
}

.mvc-tech-specs li {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    letter-spacing: -0.2px;
}

.mvc-spec-dot {
    width: 6px;
    height: 6px;
    background: #019CB2;
    border-radius: 50%;
    margin-right: 12px;
    display: inline-block;
}

/* Visuals Frame */
.mvc-integration-visuals {
    flex: 1.3; 
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.mvc-main-image-wrapper {
    width: 100%;
    background: #FFFFFF;
}

.mvc-collage-img-main {
    width: 100%;
    height: auto;
    object-fit: contain; 
    display: block;
}

/* Secondary Image Floating Overlap */
.mvc-secondary-detail-wrapper {
    position: absolute;
    bottom: -15px; 
    right: 10px;   
    width: 38%;    
    background: #FFFFFF;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0,0,0,0.12); 
    border: 6px solid #FFFFFF; 
    z-index: 2;
}

.mvc-collage-img-secondary {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3; 
    object-fit: cover;
    display: block;
}

/* Mobile Adjustments */
@media (max-width: 992px) {
    .mvc-integration-container { flex-direction: column; gap: 40px; }
    .mvc-integration-visuals { 
        width: 100%; 
        order: -1; 
        padding-bottom: 30px; 
    }
    .mvc-secondary-detail-wrapper { 
        width: 45%; 
        bottom: -10px; 
        right: 0; 
    }
}





/* =========================================
   CASE STUDIES: ROI METRICS (ICT)
========================================= */
.mvc-roi-section {
    width: 100%;
    background: #F5F5F7; 
    padding: 120px 5%;
}

.mvc-roi-container {
    max-width: 1200px;
    margin: 0 auto;
}

.mvc-roi-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
}

.mvc-roi-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #019CB2; 
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-roi-title {
    font-size: clamp(2.2rem, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #1d1d1f;
    margin: 0 0 20px 0;
    line-height: 1.1;
}

.mvc-roi-subtitle {
    font-size: 19px;
    line-height: 1.6;
    color: #515154;
    margin: 0;
}

.mvc-roi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.mvc-roi-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 60px 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    will-change: transform;
}

.mvc-roi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.mvc-roi-giant {
    font-size: clamp(55px, 5vw, 72px);
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.mvc-color-blue { color: #019CB2; }
.mvc-color-dark { color: #1d1d1f; }
.mvc-color-gray { color: #86868b; }

.mvc-roi-symbol {
    font-size: clamp(18px, 2vw, 24px); 
    font-weight: 700;
    letter-spacing: 0;
    margin-left: 4px;
    margin-top: 8px; 
}

.mvc-roi-heading {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
    margin: 0 0 15px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #EAEAEA;
    width: 100%;
}

.mvc-roi-text {
    font-size: 16px;
    line-height: 1.7;
    color: #515154;
    margin: 0;
}

/* Animations */
.mvc-reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mvc-reveal-up.mvc-is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mvc-delay-1 { transition-delay: 0.1s; }
.mvc-delay-2 { transition-delay: 0.2s; }
.mvc-delay-3 { transition-delay: 0.3s; }

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .mvc-roi-grid { grid-template-columns: 1fr; gap: 30px; }
    .mvc-roi-card { padding: 50px 30px; }
}/* =========================================
   CASE STUDIES: ROI METRICS (ICT)
========================================= */
.mvc-roi-section {
    width: 100%;
    background: #F5F5F7; 
    padding: 120px 5%;
}

.mvc-roi-container {
    max-width: 1200px;
    margin: 0 auto;
}

.mvc-roi-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
}

.mvc-roi-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #019CB2; 
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.mvc-roi-title {
    font-size: clamp(2.2rem, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #1d1d1f;
    margin: 0 0 20px 0;
    line-height: 1.1;
}

.mvc-roi-subtitle {
    font-size: 19px;
    line-height: 1.6;
    color: #515154;
    margin: 0;
}

.mvc-roi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.mvc-roi-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 60px 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    will-change: transform;
}

.mvc-roi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.mvc-roi-giant {
    font-size: clamp(55px, 5vw, 72px);
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.mvc-color-blue { color: #019CB2; }
.mvc-color-dark { color: #1d1d1f; }
.mvc-color-gray { color: #86868b; }

.mvc-roi-symbol {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    letter-spacing: 0;
    margin-left: 4px;
    margin-top: 8px; 
}

.mvc-roi-heading {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
    margin: 0 0 15px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #EAEAEA;
    width: 100%;
}

.mvc-roi-text {
    font-size: 16px;
    line-height: 1.7;
    color: #515154;
    margin: 0;
}

/* Animations */
.mvc-reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mvc-reveal-up.mvc-is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mvc-delay-1 { transition-delay: 0.1s; }
.mvc-delay-2 { transition-delay: 0.2s; }
.mvc-delay-3 { transition-delay: 0.3s; }

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .mvc-roi-grid { grid-template-columns: 1fr; gap: 30px; }
    .mvc-roi-card { padding: 50px 30px; }
}