/* ═══════════════════════════════════════════════════════════════
   BULIMBA BARRACKS — Lead Agent Proposal
   MSL Property Group
   styles.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MSL PROPERTY GROUP — BULIMBA BARRACKS PROPOSAL
   Design System & Global Styles
   ═══════════════════════════════════════════════════════════════ */

/* Brice Semi Expanded — MSL Logo Font (licensed) */
@font-face {
    font-family: 'Brice Semi Expanded';
    src: url(data:font/otf;base64,T1RUTwAMAIAAAwBAQ0ZGIPpMDSoAAAagAAA7GkdERUYBPwGaAABGIAAAADZHUE9T30EFygAARlgAACS0R1NVQnG4fC8AAGsMAAABTE9TLzKT6hRmAAABMAAAAGBjbWFwAoUOkgAAA8gAAALYaGVhZB0an1UAAADMAAAANmhoZWER9AgCAAABBAAAACRobXR4rnIqgQAAAZAAAAI4bWF4cACOUAAAAAEoAAAABm5hbWWVX0Z2AABBvAAABERwb3N0/dIAZgAARgAAAAAgAAEAAAABAABohtHSXw889QADCAAAAAAA2lHozAAAAADaeGzd/yv+LwoOBoUAAAADAAIAAAAAAAAAAQAACLj9hgAACiL/K//LCg4AAQAAAAAAAAAAAAAAAAAAAI4AAFAAAI4AAAAEBN4BkAAGAAQFMwTNAAAAmgUzBM0AAALNAGYCZgAAAAAAAAAAAAAAAIAAACMAACACAAAAAAAAAABVS1dOAMAAICX8BgD+AAAACLgCegAAAAAAAAAAAfQCvAAAACAAAwLsAEQAAAAAAqoAAAI/AAACNQBxAyQAcwZkAEQGiQBUB90ARgdeAJEBzABvAvMAWgLzAEIDSwAnBP0AVAIMAG0DuABYAgoAaAOFAB8HJABWBN8AOwZ6AFYGcABMBwAANQZ0AGQG0gBgBfMANwcCAGAG1ABeAgIAaAIMAG0EHgAxBQoAVAQMACUE3QBEB98ATwdN/+cHPwCmBtcAXAd+AKYG3QCmBo8ApgdeAFwHkwCmAtcApgUzABkHRwCmBlwApgk9AKYH9QCmB6UAXAcQAKYHpQBcB34AqAbEAEwGhwArB4MAmgdDAAAKIgAUBxwABgcWAAIGxgBQAmoAZANJABcCagA9BFEAPQTI//wCsP/fBhIATgaXAJYFdABYBpcAUgXvAFgEBAAjBpUAVAaNAJYCjQCHAqf/KwY/AJYCrgCYCfUAlgaNAJYGCgBWBpUAlgaVAFAEpwCWBVYASARFAB8GiQCLBeUABAhJABQFrgAMBqMAjwWRAFACWgAXAi8AtAJaACkEOwAzAj8AAAVDAFYFLwAlBxQAAgMiAQoHBABtBHoAPQO4AFgHCABvArAA1wIkACcEegCsA0sALQJNAC0DOwA7A0IAAAaFAAADQgAABoUAAAIsAAABoQAAARYAAAEWAAAA0AAAAU0AAABcAAADuABYA7gAWAO4AFgEzgBOBjMATgIKAGICCgB1AgoAbQO2AGIDtgBvA7YAbQYzAHEBTQAAAnwAPQJ8AD0BoQAAB2oAKQQAAAAAAAADAAAAAwAAAeAAAQAAAAAAHAADAAEAAAHgAAYBxAAAACAA3QADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGMAZAAAAAAAAAAAAGoAZwAAAGsAZgAAAAAAAAAAAAAAAAAAAGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaABtAIcAYgAAAAAAAAAAAAAAfwCAAIQAhQCBAIIAAAAAAAAAAAAAAIwAiQCKAAAAAAAAAAAAgwCGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG4AcAAAAAAAAABvAGwABAD2AAAAMAAgAAQAEAB+AKAAowClAKkAqwCuALQAuAC7AsYC2gLcIAogFCAaIB4gJiAvIDogXyCsJfz//wAAACAAoACiAKUAqACrAK0AtAC4ALsCxgLaAtwgACAQIBggHCAmIC8gOSBfIKwl/P///+P/wgAA/8AAAP+9AAD/t/+0/7L9qP2V/ZTgcQAAAAAAAOBh4FkAAOAs3+DakQABAAAAAAAsAAAALAAAACwAAAAAAAAAAAAAAAAAAAAgACgALAAAAAAALAAAAAAAAAAAAGMAZABmAGcAaQBqAHwAfQB+AH8AgACBAIIAgwCEAIUAhgCJAIoAAAEABAIAAQEBGkJyaWNlLVJlZ3VsYXJTZW1pRXhwYW5kZWQAAQEBQvgwAPgxDAD4MgL4MwP4GAT8+AwD8QwE+2n8ZRwKDhwGhQUeoABIgoH/i4seoABIgoH/i4sMB/gHD/huEbEcNmwSABkBAQcNFBsiKTA3PkVMU1phaG92fYSIj5TO6O1nbHlwaDFnbHlwaDJ1bmkwMEEwdW5pMDBBRHVuaTIwMDB1bmkyMDAxdW5pMjAwMnVuaTIwMDN1bmkyMDA0dW5pMjAwNXVuaTIwMDZ1bmkyMDA3dW5pMjAwOHVuaTIwMDl1bmkyMDBBdW5pMjAxMHVuaTIwMTF1bmkyMDJGdW5pMjA1RkV1cm91bmkyNUZDMS4wMDBDb3B5cmlnaHQgXChjXCkgMjAxOSBieSBDYWh5YSBTb2Z5YW4uIEFsbCByaWdodHMgcmVzZXJ2ZWQuQnJpY2UgUmVndWxhciBTZW1pRXhwYW5kZWRCcmljZQ==) format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── MSL BRAND PRIMARIES ── */
    --msl-navy:     #1D2F4E;
    --msl-gold:     #DBBA5C;
    --msl-rose:     #C4A0A8;
    --msl-stone:    #A69E94;
    --msl-ivory:    #F5F0E6;

    /* ── BULIMBA BARRACKS SITE PALETTE ── */
    --bb-river:     #1A3342;
    --bb-steel:     #3D4F5C;
    --bb-sandstone: #C4AB8A;
    --bb-amber:     #D4943A;
    --bb-copper:    #8B6F4E;
    --bb-jacaranda: #6B5B7B;
    --bb-canopy:    #4A6B52;
    --bb-mist:      #B8CDD6;
    --bb-timber:    #7A6857;
    --bb-white:     #F5F1EC;
    --bb-sawtooth:  #9BA5AB;
    --bb-loam:      #2C241E;

    /* ── DARK BACKGROUNDS (8-tier scale) ── */
    --bg-void:      #080C12;
    --bg-abyss:     #0A1019;
    --bg-midnight:  #0D1520;
    --bg-deep:      #111B2B;
    --bg-surface:   #162236;
    --bg-elevated:  #1D2F4E;
    --bg-hover:     #243B55;
    --bg-active:    #2D4565;

    /* ── LIGHT BACKGROUNDS ── */
    --bg-white:     #FFFFFF;
    --bg-warm:      #FAFAF8;
    --bg-cream:     #F8F8F6;
    --bg-bone:      #F5F1EC;
    --bg-sand:      #EDE8E0;

    /* ── TEXT — DARK MODE (SOLID HEX ONLY) ── */
    --text-white:     #FFFFFF;
    --text-heading:   #F5F1EC;
    --text-body:      #E0DCD6;
    --text-secondary: #D4CFC7;
    --text-tertiary:  #C8C3BB;
    --text-muted:     #B0ACA4;

    /* ── TEXT — LIGHT MODE ── */
    --text-l-heading: #1D2F4E;
    --text-l-body:    #374151;
    --text-l-secondary: #3D4F5C;
    --text-l-tertiary: #6B7280;
    --text-l-caption:  #9BA5AB;

    /* ── GOLD SCALE ── */
    --gold-hover:   #E5C97A;
    --gold-pale:    #F5E6C4;
    --gold-tint:    #FBF6EA;

    /* ── MSL OPACITY SCALES ── */
    --navy-100: rgba(29, 47, 78, 1);
    --navy-80:  rgba(29, 47, 78, 0.8);
    --navy-60:  rgba(29, 47, 78, 0.6);
    --navy-40:  rgba(29, 47, 78, 0.4);
    --navy-20:  rgba(29, 47, 78, 0.2);
    --navy-10:  rgba(29, 47, 78, 0.1);
    --gold-100: rgba(219, 186, 92, 1);
    --gold-80:  rgba(219, 186, 92, 0.8);
    --gold-60:  rgba(219, 186, 92, 0.6);
    --gold-40:  rgba(219, 186, 92, 0.4);
    --gold-20:  rgba(219, 186, 92, 0.2);
    --gold-10:  rgba(219, 186, 92, 0.1);
    --rose-100: rgba(196, 160, 168, 1);
    --rose-80:  rgba(196, 160, 168, 0.8);
    --rose-60:  rgba(196, 160, 168, 0.6);
    --rose-40:  rgba(196, 160, 168, 0.4);
    --rose-20:  rgba(196, 160, 168, 0.2);
    --rose-10:  rgba(196, 160, 168, 0.1);
    --stone-100: rgba(166, 158, 148, 1);
    --stone-80:  rgba(166, 158, 148, 0.8);
    --stone-60:  rgba(166, 158, 148, 0.6);
    --stone-40:  rgba(166, 158, 148, 0.4);
    --stone-20:  rgba(166, 158, 148, 0.2);
    --stone-10:  rgba(166, 158, 148, 0.1);
    --ivory-100: rgba(245, 240, 230, 1);
    --ivory-80:  rgba(245, 240, 230, 0.8);
    --ivory-60:  rgba(245, 240, 230, 0.6);
    --ivory-40:  rgba(245, 240, 230, 0.4);
    --ivory-20:  rgba(245, 240, 230, 0.2);
    --ivory-10:  rgba(245, 240, 230, 0.1);

    /* ── GLOW & GRADIENT EFFECTS ── */
    --glow-gold-subtle: 0 0 30px rgba(219, 186, 92, 0.1);
    --glow-gold-medium: 0 0 40px rgba(219, 186, 92, 0.15);
    --glow-rose-subtle: 0 0 30px rgba(196, 160, 168, 0.1);
    --glow-rose-medium: 0 0 40px rgba(196, 160, 168, 0.15);
    --glow-ivory: 0 0 60px rgba(245, 240, 230, 0.1);

    /* ── SEMANTIC (DASHBOARDS) ── */
    --semantic-positive: #6DBD8B;
    --semantic-warning:  #D4943A;
    --semantic-negative: #C47070;
    --semantic-info:     #7BA3C4;

    /* ── BORDERS (SOLID) ── */
    --border-subtle:  #1A2233;
    --border-light:   #1F2D42;
    --border-visible: #2A3D56;
    --border-gold:    #3D3524;
    --border-card:    #1E2A3C;
    --border-medium:  #2A3D56;
    --border-gold-strong: rgba(219, 186, 92, 0.6);

    /* ── SHADOWS ── */
    --shadow-card:   0 4px 24px rgba(0,0,0,0.35);
    --shadow-lifted: 0 8px 40px rgba(0,0,0,0.45);
    --shadow-deep:   0 16px 60px rgba(0,0,0,0.55);

    /* ── TYPOGRAPHY ── */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Montserrat', 'Helvetica Neue', sans-serif;
    --font-accent:  'Libre Baskerville', Georgia, serif;
    --font-logo: 'Brice Semi Expanded', 'Nunito Sans', 'Gilroy', sans-serif;
    --font-special-heading: 'Playfair Display', Georgia, serif;
    --font-special-body: 'Source Sans 3', 'Helvetica Neue', sans-serif;

    /* ── SPACING (8px base) ── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
    --sp-32: 128px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 60px;
    --space-2xl: 100px;
    --space-3xl: 60px;

    /* ── LAYOUT WIDTHS ── */
    --width-narrow:  600px;
    --width-reading: 720px;
    --width-content: 960px;
    --width-wide:    1100px;
    --width-max:     1280px;

    /* ── ANIMATION ── */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* ── DIMENSIONS ── */
    --nav-height: 60px;
    --anchor-height: 50px;

    /* ── LEGACY ALIASES (backward compat) ── */
    --color-gold: #DBBA5C;
    --color-gold-light: #E5C97A;
    --color-gold-dark: #C4A44D;
    --color-rose: #C4A0A8;
    --color-navy: #1D2F4E;
    --text-faint: #B0ACA4;
}

/* Reset & Base */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { 
    scroll-behavior: smooth; 
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body { 
    font-family: var(--font-body); 
    background: var(--bg-void); 
    color: var(--text-body); 
    line-height: 1.6;
    overflow-x: hidden;
}

/* Selection */
::selection {
    background: var(--msl-gold);
    color: var(--bg-void);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--msl-gold); }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS & KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */

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

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

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

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes borderGlow {
    0%, 100% { border-color: rgba(219, 186, 92, 0.3); }
    50% { border-color: rgba(219, 186, 92, 0.6); }
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Animation Classes */
.animate-fade { animation: fadeIn 1s var(--ease-out-expo) forwards; }
.animate-fade-up { animation: fadeInUp 1s var(--ease-out-expo) forwards; }
.animate-fade-down { animation: fadeInDown 0.8s var(--ease-out-expo) forwards; }
.animate-scale { animation: scaleIn 0.8s var(--ease-out-expo) forwards; }
.animate-slide-right { animation: slideInRight 0.8s var(--ease-out-expo) forwards; }

/* Scroll-triggered animations */
.reveal { 
    opacity: 0; 
    transform: translateY(40px); 
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); 
}
.reveal.visible { 
    opacity: 1; 
    transform: translateY(0); 
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ═══════════════════════════════════════════════════════════════
   LANDING SCREEN — CINEMATIC COVER
   ═══════════════════════════════════════════════════════════════ */

#landing {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: opacity 0.8s var(--ease-out-expo), visibility 0.8s;
}

#landing.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.landing-bg {
    position: absolute;
    inset: 0;
    background: var(--bb-river) url('https://buchan.au/wp-content/uploads/2025/08/Apollo-Road-Apartments_Bulimba-Barracks_Landing_0000s_0000_Bulimba_Barracks_Res_Elevation1_4K.jpg') center center / cover no-repeat;
    transform: scale(1.05);
    animation: landingZoom 20s var(--ease-out-quart) forwards;
}

@keyframes landingZoom {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
}

.landing-overlay {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(180deg, 
            rgba(8,12,18,0.3) 0%, 
            rgba(26,51,66,0.15) 30%,
            rgba(8,12,18,0.2) 60%,
            rgba(8,12,18,0.92) 100%
        ),
        radial-gradient(ellipse 80% 50% at 50% 40%, rgba(26,51,66,0.25) 0%, rgba(8,12,18,0.5) 100%);
}

.landing-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 60px 40px 100px;
    text-align: center;
}

.landing-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: rgba(212, 148, 58, 0.15);
    border: 1px solid rgba(212, 148, 58, 0.5);
    border-radius: 4px;
    margin-bottom: 30px;
    animation: fadeInDown 1s var(--ease-out-expo) 0.3s both;
}

.landing-badge-icon {
    width: 20px;
    height: 20px;
    stroke: var(--msl-gold);
    stroke-width: 1.5;
    fill: none;
}

.landing-badge-text {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--bb-amber);
}

.landing-title {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(48px, 10vw, 100px);
    color: var(--text-white);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    text-shadow: 0 4px 60px rgba(0,0,0,0.5);
    animation: fadeInUp 1.2s var(--ease-out-expo) 0.5s both;
}

.landing-subtitle {
    font-family: var(--font-accent);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(18px, 3vw, 28px);
    color: var(--bb-mist);
    margin-bottom: 15px;
    animation: fadeInUp 1s var(--ease-out-expo) 0.7s both;
}

.landing-title em {
    font-style: italic;
    color: var(--bb-sandstone);
}

.landing-meta {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 50px;
    animation: fadeInUp 1s var(--ease-out-expo) 0.9s both;
}

.landing-cta {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 16px 40px;
    background: var(--msl-gold);
    border: 1px solid var(--msl-gold);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--bg-void);
    cursor: pointer;
    transition: all 0.4s var(--ease-out-expo);
    animation: fadeInUp 1s var(--ease-out-expo) 1.1s both, borderGlow 3s ease-in-out infinite 2s;
}

.landing-cta:hover {
    background: var(--gold-hover);
    color: var(--bg-void);
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(219, 186, 92, 0.4);
}

.landing-cta svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s var(--ease-out-expo);
}

.landing-cta:hover svg {
    transform: translateX(5px);
}

.landing-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 40px;
    border-top: 1px solid var(--border-subtle);
    background: rgba(5,7,9,0.8);
    backdrop-filter: blur(10px);
    animation: fadeIn 1s var(--ease-out-expo) 1.5s both;
}

.landing-footer-left {
    display: flex;
    align-items: center;
}

.landing-logo-svg {
    height: 18px;
    width: auto;
}

.landing-footer-right {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-faint);
}

.landing-footer-center {
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.landing-scroll-line {
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg, var(--msl-gold) 0%, transparent 100%);
    animation: pulse 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN APPLICATION SHELL
   ═══════════════════════════════════════════════════════════════ */

#app {
    opacity: 0;
    transition: opacity 0.5s var(--ease-out-expo) 0.3s;
}

#app.visible {
    opacity: 1;
}

/* Top Navigation */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 14, 20, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease-out-expo);
}

.top-nav.visible {
    transform: translateY(0);
}

.nav-container {
    display: flex;
    align-items: center;
    height: var(--nav-height);
    padding: 0 30px;
}

.nav-logo {
    display: flex;
    align-items: center;
    margin-right: 50px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.nav-logo-svg {
    height: 22px;
    width: auto;
}

.nav-logo:hover {
    opacity: 0.8;
}

.nav-tabs {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1;
}

.nav-tab {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 22px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.3s ease;
}

.nav-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--msl-gold);
    transform: translateX(-50%);
    transition: width 0.3s var(--ease-out-expo);
}

.nav-tab:hover {
    color: var(--bb-mist);
}

.nav-tab.active {
    color: var(--msl-gold);
}

.nav-tab.active::after {
    width: 100%;
}

.nav-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--msl-gold) 0%, var(--gold-hover) 100%);
    width: 0%;
    transition: width 0.1s linear;
}

/* Progress Stepper */
.stepper-bar {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: 999;
    height: var(--anchor-height);
    background: rgba(10, 14, 20, 0.95);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    padding: 0 30px;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.4s var(--ease-out-expo), opacity 0.3s ease;
}
.stepper-bar.visible { transform: translateY(0); opacity: 1; }
.stepper-bar.visible.stepper-hidden { transform: translateY(-100%); opacity: 0; }
.stepper-steps { display: flex; align-items: center; width: 100%; }
.step-item { display: flex; align-items: center; gap: 7px; cursor: pointer; transition: opacity 0.3s ease; }
.step-item:hover { opacity: 0.85; }
.step-dot { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid var(--border-light); background: var(--border-subtle); transition: all 0.3s ease; }
.step-dot .check { display: none; font-size: 10px; color: var(--msl-gold); line-height: 1; }
.step-dot .inner-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--msl-gold); }
.step-item.active .step-dot { background: rgba(219,186,92,0.25); border-color: rgba(219,186,92,0.5); box-shadow: 0 0 12px rgba(219,186,92,0.15); }
.step-item.active .step-dot .inner-dot { display: block; }
.step-item.done .step-dot { background: rgba(219,186,92,0.1); border-color: rgba(219,186,92,0.3); }
.step-item.done .step-dot .check { display: block; }
.step-item.upcoming:hover .step-dot { border-color: var(--text-muted); background: rgba(255,255,255,0.04); }
.step-item.upcoming:hover .step-label { color: var(--text-secondary); }
.step-label { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: all 0.3s ease; }
.step-item.active .step-label { color: var(--text-heading); font-weight: 600; }
.step-item.done .step-label { color: var(--text-secondary); }
.step-item.upcoming .step-label { color: var(--text-faint); }
.step-line { flex: 1; height: 1.5px; margin: 0 10px; min-width: 14px; border-radius: 1px; background: rgba(255,255,255,0.06); transition: background 0.3s ease; }
.step-line.done { background: linear-gradient(90deg, rgba(219,186,92,0.35), rgba(219,186,92,0.2)); }

/* Main Content Area */
.main-content {
    padding-top: calc(var(--nav-height) + var(--anchor-height));
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION BASE STYLES
   ═══════════════════════════════════════════════════════════════ */

.section-page {
    display: none;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out-expo);
}

.section-page.active {
    display: block;
}

.section-page.visible {
    opacity: 1;
}

.section-block {
    padding: var(--space-3xl) var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
}

.section-block:last-child {
    border-bottom: none;
}

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.section-narrow {
    max-width: 800px;
}

/* Typography */
.kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--msl-gold);
    margin-bottom: var(--space-sm);
}

.headline-xl {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(36px, 6vw, 56px);
    color: var(--text-heading);
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.headline-lg {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(28px, 5vw, 42px);
    color: var(--text-heading);
    line-height: 1.15;
    margin-bottom: var(--space-md);
}

.headline-md {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(24px, 4vw, 32px);
    color: var(--text-heading);
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}

.intro-text {
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 300;
    color: var(--text-body);
    line-height: 1.8;
    max-width: 720px;
}

.body-text {
    font-size: 16px;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 1.8;
}

.gold-text { color: var(--msl-gold); }
.italic { font-style: italic; }
.light { font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 1: THE OPPORTUNITY
   ═══════════════════════════════════════════════════════════════ */

/* Hero Opening */
.opportunity-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 148, 58, 0.08) 0%, transparent 50%),
        linear-gradient(170deg, var(--bb-river) 0%, var(--bg-abyss) 100%);
    overflow: hidden;
}

.opportunity-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(219, 186, 92, 0.06) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.opportunity-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.opportunity-tagline {
    font-family: var(--font-accent);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(18px, 3vw, 24px);
    color: var(--bb-mist);
    margin-bottom: var(--space-lg);
    line-height: 1.7;
}

/* Stats Section */
.stats-showcase {
    padding: var(--space-3xl) var(--space-lg);
    background: linear-gradient(180deg, rgba(61, 79, 92, 0.25) 0%, var(--bg-midnight) 100%);
    position: relative;
}

.stats-showcase::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(219,186,92,0.2) 50%, transparent);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: var(--space-xl);
}

.stat-card {
    position: relative;
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 35px 20px;
    text-align: center;
    overflow: hidden;
    transition: all 0.4s var(--ease-out-expo);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--msl-gold), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-gold);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-value {
    color: var(--msl-gold) !important;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 48px);
    color: var(--msl-gold);
    line-height: 1;
    margin-bottom: 12px;
}

.stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stat-card.featured {
    background: linear-gradient(135deg, var(--bg-deep) 0%, rgba(219, 186, 92, 0.08) 100%);
    border-color: var(--border-gold);
}

.stat-card.featured .stat-value {
    font-size: clamp(32px, 4vw, 42px);
}

/* Location Section */
.location-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-abyss);
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: var(--space-xl);
}

.location-map {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--bg-deep);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

.location-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: 
        radial-gradient(circle at 30% 40%, rgba(219, 186, 92, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(29, 47, 78, 0.2) 0%, transparent 40%),
        var(--bg-deep);
}

.map-pin {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

.map-pin svg {
    width: 100%;
    height: 100%;
    fill: var(--msl-gold);
    filter: drop-shadow(0 10px 30px rgba(219, 186, 92, 0.3));
}

.map-label {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--text-heading);
}

.map-sublabel {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 5px;
}

.location-features {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.location-feature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background: var(--bg-deep);
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    transition: all 0.3s var(--ease-out-expo);
}

.location-feature:hover {
    border-color: var(--border-gold);
    transform: translateX(5px);
}

.feature-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(219, 186, 92, 0.1);
    border-radius: 12px;
}

.feature-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--msl-gold);
    stroke-width: 1.5;
    fill: none;
}

.feature-content h4 {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--text-heading);
    margin-bottom: 8px;
}

.feature-content p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Heritage Section */
.heritage-section {
    padding: var(--space-3xl) var(--space-lg);
    background: 
        linear-gradient(180deg, var(--bg-midnight) 0%, var(--bg-abyss) 100%);
}

.heritage-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-xl);
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--msl-gold) 0%, var(--border-gold) 50%, transparent 100%);
}

.timeline-item {
    position: relative;
    padding: 0 0 50px 50px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: 0;
    top: 5px;
    width: 30px;
    height: 30px;
    background: var(--bg-midnight);
    border: 2px solid var(--msl-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--msl-gold);
    border-radius: 50%;
}

.timeline-year {
    font-family: var(--font-heading);
    font-size: 32px;
    color: var(--msl-gold);
    margin-bottom: 10px;
}

.timeline-title {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.timeline-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Developer Section */
.developer-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-deep);
}

.developer-card {
    max-width: 900px;
    margin: var(--space-xl) auto 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: 50px;
    position: relative;
    overflow: hidden;
}

.developer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--msl-gold), var(--gold-hover), var(--msl-gold));
}

.developer-header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
}

.developer-logo {
    width: 80px;
    height: 80px;
    background: var(--bg-deep);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--msl-gold);
    border: 1px solid var(--border-gold);
}

.developer-info h3 {
    font-family: var(--font-heading);
    font-size: 32px;
    color: var(--text-heading);
    margin-bottom: 5px;
}

.developer-info p {
    font-size: 14px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.developer-description {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 35px;
}

.developer-portfolio {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-top: 30px;
    border-top: 1px solid var(--border-subtle);
}

.portfolio-stat {
    text-align: center;
}

.portfolio-stat-value {
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--msl-gold);
    margin-bottom: 5px;
}

.portfolio-stat-label {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Closing Quote */
.section-closing {
    padding: var(--space-2xl) var(--space-lg);
    background: var(--bg-abyss);
    text-align: center;
}

.closing-quote {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(24px, 4vw, 36px);
    color: var(--msl-gold);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.4;
}

.closing-quote::before,
.closing-quote::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: var(--border-gold);
    margin: 30px auto;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 2: THE CHALLENGE
   ═══════════════════════════════════════════════════════════════ */

/* Challenge Opening */
.challenge-opening {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: 
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(196, 160, 168, 0.08) 0%, transparent 60%),
        var(--bg-abyss);
}

.challenge-opening-content {
    max-width: 850px;
}

.challenge-stats-row {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-subtle);
}

.challenge-stat {
    text-align: center;
}

.challenge-stat-value {
    font-family: var(--font-heading);
    font-size: 42px;
    color: var(--msl-rose);
    line-height: 1;
    margin-bottom: 8px;
}

.challenge-stat-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Problems Section */
.problems-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-midnight);
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: var(--space-xl);
}

.problem-card {
    position: relative;
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 40px;
    transition: all 0.4s var(--ease-out-expo);
    overflow: hidden;
}

.problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--msl-rose);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.problem-card:hover {
    transform: translateY(-5px);
    border-color: rgba(196, 160, 168, 0.3);
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}

.problem-card:hover::before {
    opacity: 1;
}

.problem-number {
    font-family: var(--font-heading);
    font-size: 48px;
    color: #5C4A4F;
    line-height: 1;
    margin-bottom: 15px;
}

.problem-title {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--text-heading);
    margin-bottom: 15px;
}

.problem-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Risk Section */
.risk-section {
    padding: var(--space-3xl) var(--space-lg);
    background: 
        linear-gradient(180deg, var(--bg-abyss) 0%, rgba(196, 160, 168, 0.03) 50%, var(--bg-abyss) 100%);
}

.risk-visual {
    max-width: 800px;
    margin: var(--space-xl) auto 0;
}

.risk-cascade {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cascade-step {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 25px 30px;
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    transition: all 0.3s var(--ease-out-expo);
}

.cascade-step:hover {
    transform: translateX(10px);
    border-color: var(--msl-rose);
}

.cascade-number {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(196, 160, 168, 0.1);
    border: 1px solid rgba(196, 160, 168, 0.3);
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--msl-rose);
}

.cascade-content h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--text-heading);
    margin-bottom: 5px;
}

.cascade-content p {
    font-size: 13px;
    color: var(--text-muted);
}

.cascade-arrow {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.cascade-arrow svg {
    width: 24px;
    height: 24px;
    stroke: var(--msl-rose);
    stroke-width: 2;
    fill: none;
    opacity: 0.5;
}

/* Consequences Box */
.consequences-box {
    max-width: 800px;
    margin: var(--space-xl) auto 0;
    background: rgba(196, 160, 168, 0.05);
    border: 1px solid rgba(196, 160, 168, 0.2);
    border-radius: 12px;
    padding: 40px;
}

.consequences-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.consequences-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(196, 160, 168, 0.15);
    border-radius: 12px;
}

.consequences-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--msl-rose);
    stroke-width: 2;
    fill: none;
}

.consequences-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--msl-rose);
}

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

.consequence-item {
    text-align: center;
    padding: 20px;
}

.consequence-value {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--msl-rose);
    margin-bottom: 8px;
}

.consequence-label {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Transition Section */
.transition-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: 
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(219, 186, 92, 0.05) 0%, transparent 70%),
        var(--bg-midnight);
}

.transition-content {
    max-width: 700px;
}

.transition-question {
    font-family: var(--font-heading);
    font-size: clamp(24px, 4vw, 36px);
    color: var(--text-heading);
    line-height: 1.4;
    margin-bottom: var(--space-xl);
}

.transition-divider {
    width: 80px;
    height: 1px;
    background: var(--msl-gold);
    margin: 0 auto var(--space-xl);
}

.transition-answer {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(28px, 5vw, 42px);
    color: var(--msl-gold);
    line-height: 1.3;
    margin-bottom: var(--space-xl);
}

.transition-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 35px;
    background: transparent;
    border: 1px solid var(--msl-gold);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--msl-gold);
    cursor: pointer;
    transition: all 0.4s var(--ease-out-expo);
}

.transition-cta:hover {
    background: var(--msl-gold);
    color: var(--bg-void);
}

.transition-cta svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .stats-grid .stat-card:nth-child(4),
    .stats-grid .stat-card:nth-child(5) {
        grid-column: span 1;
    }
    .location-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .problems-grid {
        grid-template-columns: 1fr;
    }
    .developer-portfolio {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 55px;
        --anchor-height: 45px;
    }
    
    .nav-logo {
        margin-right: 20px;
    }
    
    .nav-logo-svg {
        height: 18px;
    }
    
    .nav-tab {
        padding: 0 12px;
        font-size: 9px;
    }
    
    .stepper-bar {
        padding: 0 15px;
        overflow-x: auto;
    }
    
    .stepper-steps {
        overflow-x: auto;
        padding-right: 20px;
    }
    
    .section-block {
        padding: var(--space-2xl) var(--space-md);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .challenge-stats-row {
        flex-wrap: wrap;
        gap: 30px;
    }
    
    .consequences-grid {
        grid-template-columns: 1fr;
    }
    
    .developer-header {
        flex-direction: column;
        text-align: center;
    }
    
    .developer-portfolio {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .landing-title {
        font-size: clamp(36px, 12vw, 60px);
    }
    
    .landing-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .developer-portfolio {
        grid-template-columns: 1fr;
    }
    
    .problem-card {
        padding: 30px 25px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   COMMAND CENTRE WRAPPER STYLES
   ═══════════════════════════════════════════════════════════════ */

.tech-command-centres {
padding: 60px 20px;
background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-abyss) 100%);
}

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

.cc-header .kicker {
color: var(--msl-gold);
font-size: 12px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 16px;
}

.cc-header h2 {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 400;
color: var(--text-heading);
margin-bottom: 16px;
}

.cc-header p {
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}

.command-centre-tabs {
display: flex;
gap: 12px;
justify-content: center;
margin-bottom: 32px;
}

.cc-tab {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-light);
color: var(--text-secondary);
padding: 14px 36px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-family: var(--font-body);
display: flex;
align-items: center;
gap: 10px;
}

.cc-tab:hover {
background: rgba(219, 186, 92, 0.08);
border-color: rgba(219, 186, 92, 0.3);
color: var(--text-body);
}

.cc-tab.active {
background: linear-gradient(135deg, rgba(219, 186, 92, 0.15) 0%, rgba(219, 186, 92, 0.05) 100%);
border-color: var(--msl-gold);
color: var(--msl-gold);
}

.cc-tab-icon {
font-size: 18px;
}

.cc-tab-value {
font-weight: 600;
color: var(--msl-gold);
}

.cc-panel {
display: none;
animation: ccFadeIn 0.3s ease;
}

.cc-panel.active {
display: block;
}

@keyframes ccFadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* Land Panel & Nav (mirrors cc-panel/cc-nav-item for land CC) */
.land-panel {
display: none;
animation: ccFadeIn 0.3s ease;
}

.land-panel.active {
display: block;
}

.land-nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
cursor: pointer;
transition: all 0.3s ease;
border-left: 3px solid transparent;
color: var(--text-muted);
}

.land-nav-item:hover {
background: rgba(219, 186, 92, 0.05);
color: var(--text-secondary);
}

.land-nav-item.active {
background: rgba(219, 186, 92, 0.08);
border-left-color: var(--msl-gold);
color: var(--msl-gold);
}

.land-nav-item svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 1.5;
fill: none;
flex-shrink: 0;
}


.cc-container {
max-width: 1400px;
margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   LAND COMMAND CENTRE STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   LAND SALES COMMAND CENTRE - CSS STYLES
   Phase 2 of 3
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   2.1 COMMAND CENTRE LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */

.command-centre-land {
background: linear-gradient(135deg, var(--bg-abyss) 0%, var(--bg-surface) 100%);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
margin: 3rem 0;
border: 1px solid rgba(219, 186, 92, 0.2);
}

.cc-topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
background: linear-gradient(90deg, var(--bg-midnight) 0%, var(--bg-surface) 100%);
border-bottom: 1px solid rgba(219, 186, 92, 0.3);
}

.cc-topbar-left {
display: flex;
align-items: center;
gap: 16px;
}

.cc-window-controls {
display: flex;
gap: 8px;
}

.cc-control {
width: 12px;
height: 12px;
border-radius: 50%;
}

.cc-control.red { background: #ff5f57; }
.cc-control.yellow { background: #ffbd2e; }
.cc-control.green { background: #28ca42; }

.cc-logo {
display: flex;
align-items: center;
gap: 8px;
color: var(--msl-gold);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.5px;
}

.cc-logo svg {
opacity: 1;
}

.cc-topbar-center {
flex: 1;
text-align: center;
}

.cc-project-name {
color: #ffffff;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.3px;
}

.cc-topbar-right {
display: flex;
align-items: center;
gap: 16px;
}

.cc-live-indicator {
display: flex;
align-items: center;
gap: 6px;
color: var(--semantic-positive);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.cc-live-dot {
width: 8px;
height: 8px;
background: var(--semantic-positive);
border-radius: 50%;
animation: pulse-live 2s infinite;
}

@keyframes pulse-live {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
}

.cc-user-avatar {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--msl-gold), #c9a84a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--bg-abyss);
font-size: 0.75rem;
font-weight: 700;
}

.cc-main {
display: flex;
min-height: 600px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.2 SIDEBAR STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.cc-sidebar {
width: 200px;
background: rgba(13, 27, 42, 0.8);
border-right: 1px solid rgba(219, 186, 92, 0.15);
display: flex;
flex-direction: column;
padding: 16px 0;
}

.cc-sidebar-section {
flex: 1;
}

.cc-sidebar-label {
color: var(--text-tertiary);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
padding: 0 16px;
margin-bottom: 8px;
}

.cc-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
color: var(--text-tertiary);
cursor: pointer;
transition: all 0.3s ease;
border-left: 3px solid transparent;
font-size: 0.85rem;
}

.cc-nav-item:hover {
background: rgba(219, 186, 92, 0.1);
color: #E6E6E6;
}

.cc-nav-item.active {
background: rgba(219, 186, 92, 0.15);
color: var(--msl-gold);
border-left-color: var(--msl-gold);
}

.cc-nav-item svg {
width: 18px;
height: 18px;
fill: currentColor;
stroke: currentColor;
stroke-width: 0;
}

.cc-nav-badge {
margin-left: auto;
background: rgba(255, 255, 255, 0.15);
color: var(--text-secondary);
font-size: 0.7rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 12px;
}

.cc-nav-badge.gold {
background: rgba(219, 186, 92, 0.3);
color: var(--msl-gold);
}

.cc-sidebar-stats {
padding: 16px;
border-top: 1px solid rgba(219, 186, 92, 0.15);
margin-top: auto;
}

.cc-stat-mini {
display: flex;
flex-direction: column;
margin-bottom: 12px;
}

.cc-stat-mini:last-child {
margin-bottom: 0;
}

.cc-stat-mini-value {
color: var(--msl-gold);
font-size: 1.1rem;
font-weight: 700;
}

.cc-stat-mini-label {
color: var(--text-tertiary);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.3 CONTENT & PANELS
   ───────────────────────────────────────────────────────────────────────────── */

.cc-content {
flex: 1;
padding: 20px 24px;
overflow-y: auto;
max-height: 700px;
}

.cc-panel {
display: none;
}

.cc-panel.active {
display: block;
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

.cc-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(219, 186, 92, 0.2);
}

.cc-panel-header h3 {
color: #ffffff;
font-size: 1.2rem;
font-weight: 600;
margin: 0;
}

.cc-panel-filters {
display: flex;
gap: 4px;
}

.cc-filter {
padding: 6px 12px;
font-size: 0.75rem;
color: var(--text-tertiary);
cursor: pointer;
border-radius: 4px;
transition: all 0.3s ease;
}

.cc-filter:hover {
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.05);
}

.cc-filter.active {
color: var(--msl-gold);
background: rgba(219, 186, 92, 0.15);
}

.cc-panel-actions {
display: flex;
gap: 8px;
}

.cc-btn {
padding: 8px 16px;
font-size: 0.8rem;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
background: linear-gradient(135deg, var(--msl-gold), #c9a84a);
color: var(--bg-abyss);
transition: all 0.3s ease;
}

.cc-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(219, 186, 92, 0.3);
}

.cc-btn.outline {
background: transparent;
border: 1px solid rgba(219, 186, 92, 0.5);
color: var(--msl-gold);
}

.cc-btn.outline:hover {
background: rgba(219, 186, 92, 0.1);
}

.cc-btn-link {
background: none;
border: none;
color: var(--msl-gold);
font-size: 0.8rem;
cursor: pointer;
padding: 8px 0;
text-align: left;
}

.cc-btn-link:hover {
text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.4 DASHBOARD STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.cc-kpi-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}

.cc-kpi-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 16px;
}

.cc-kpi-card.primary {
background: linear-gradient(135deg, rgba(219, 186, 92, 0.15), rgba(219, 186, 92, 0.05));
border-color: rgba(219, 186, 92, 0.3);
}

.cc-kpi-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}

.cc-kpi-title {
color: var(--text-tertiary);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.cc-kpi-trend {
font-size: 0.7rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
}

.cc-kpi-trend.up {
color: var(--semantic-positive);
background: rgba(74, 222, 128, 0.15);
}

.cc-kpi-trend.down {
color: var(--semantic-negative);
background: rgba(239, 68, 68, 0.15);
}

.cc-kpi-value {
color: #ffffff;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 4px;
}

.cc-kpi-card.primary .cc-kpi-value {
color: var(--msl-gold);
font-size: 1.8rem;
}

.cc-kpi-sub {
color: var(--text-tertiary);
font-size: 0.75rem;
}

.cc-kpi-progress {
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
margin-top: 12px;
overflow: hidden;
}

.cc-kpi-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--msl-gold), #f0d078);
border-radius: 2px;
}

.cc-dashboard-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}

.cc-dashboard-section {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 16px;
}

.cc-dashboard-section.full-width {
grid-column: 1 / -1;
}

.cc-dashboard-section h4 {
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 600;
margin: 0 0 16px 0;
}

/* Release Bars */
.cc-release-bars {
display: flex;
flex-direction: column;
gap: 12px;
}

.cc-release-bar {
display: grid;
grid-template-columns: 140px 1fr 50px;
align-items: center;
gap: 12px;
}

.cc-release-bar.featured .cc-release-name {
color: var(--msl-gold);
}

.cc-release-info {
display: flex;
flex-direction: column;
}

.cc-release-name {
color: var(--text-secondary);
font-size: 0.8rem;
font-weight: 500;
}

.cc-release-data {
color: var(--text-tertiary);
font-size: 0.7rem;
}

.cc-release-progress {
height: 8px;
background: rgba(255, 255, 255, 0.08);
border-radius: 4px;
overflow: hidden;
}

.cc-release-fill {
height: 100%;
background: linear-gradient(90deg, var(--msl-gold), #f0d078);
border-radius: 4px;
}

.cc-release-bar.featured .cc-release-fill {
background: linear-gradient(90deg, var(--msl-gold), #4ade80);
}

.cc-release-pct {
color: var(--text-tertiary);
font-size: 0.75rem;
text-align: right;
}

/* Grading List */
.cc-grading-list {
display: flex;
flex-direction: column;
gap: 10px;
}

.cc-grading-row {
display: grid;
grid-template-columns: 40px 1fr 120px;
align-items: center;
gap: 12px;
}

.cc-grade-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 24px;
font-size: 0.7rem;
font-weight: 700;
border-radius: 4px;
color: var(--bg-abyss);
}

.cc-grade-badge.aplus {
background: linear-gradient(135deg, var(--msl-gold), #f0d078);
}

.cc-grade-badge.a {
background: linear-gradient(135deg, #c9a84a, var(--msl-gold));
}

.cc-grade-badge.b {
background: var(--bb-sawtooth);
}

.cc-grade-badge.c {
background: var(--bb-sawtooth);
}

.cc-grade-badge.d {
background: var(--bb-steel);
}

.cc-grade-badge.e {
background: var(--bb-steel);
}

.cc-grade-badge.mixed {
background: linear-gradient(135deg, var(--bb-sawtooth), var(--bb-steel));
}

.cc-grading-bar-wrap {
height: 6px;
background: rgba(255, 255, 255, 0.08);
border-radius: 3px;
overflow: hidden;
}

.cc-grading-bar {
height: 100%;
background: linear-gradient(90deg, var(--msl-gold), #c9a84a);
border-radius: 3px;
}

.cc-grading-data {
color: var(--text-tertiary);
font-size: 0.75rem;
text-align: right;
}

/* Price Distribution */
.cc-price-dist {
display: flex;
flex-direction: column;
gap: 10px;
}

.cc-price-band {
display: grid;
grid-template-columns: 100px 1fr 80px;
align-items: center;
gap: 12px;
}

.cc-price-range {
color: var(--text-secondary);
font-size: 0.8rem;
}

.cc-price-bar-wrap {
height: 16px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
overflow: hidden;
}

.cc-price-bar {
height: 100%;
background: linear-gradient(90deg, rgba(219, 186, 92, 0.6), rgba(219, 186, 92, 0.9));
border-radius: 4px;
}

.cc-price-count {
color: var(--text-tertiary);
font-size: 0.8rem;
text-align: right;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.5 INVENTORY STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.cc-legend {
display: flex;
gap: 16px;
}

.cc-legend-item {
display: flex;
align-items: center;
gap: 6px;
color: var(--text-tertiary);
font-size: 0.75rem;
}

.cc-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}

.cc-dot.available { background: var(--semantic-positive); }
.cc-dot.hold { background: var(--semantic-warning); }
.cc-dot.sold { background: var(--semantic-negative); }

.cc-stage-section {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-light);
}

.cc-stage-section:last-of-type {
border-bottom: none;
}

.cc-stage-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}

.cc-stage-title {
display: flex;
align-items: center;
gap: 10px;
}

.cc-stage-title h4 {
color: #ffffff;
font-size: 0.95rem;
font-weight: 600;
margin: 0;
}

.cc-stage-badge {
font-size: 0.65rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
color: var(--bg-abyss);
}

.cc-stage-badge.aplus { background: linear-gradient(135deg, var(--msl-gold), #f0d078); }
.cc-stage-badge.a { background: #c9a84a; }
.cc-stage-badge.b { background: var(--bb-sawtooth); }
.cc-stage-badge.c { background: var(--bb-sawtooth); }
.cc-stage-badge.d { background: var(--bb-steel); }
.cc-stage-badge.e { background: var(--bb-steel); }
.cc-stage-badge.mixed { background: linear-gradient(90deg, var(--bb-sawtooth), var(--msl-gold)); }

.cc-stage-meta {
display: flex;
gap: 16px;
color: var(--text-tertiary);
font-size: 0.75rem;
}

.cc-release-tag {
padding: 2px 8px;
border-radius: 4px;
font-weight: 600;
font-size: 0.7rem;
}

.cc-release-tag.final { background: rgba(219, 186, 92, 0.2); color: var(--msl-gold); }
.cc-release-tag.first { background: rgba(74, 222, 128, 0.2); color: var(--semantic-positive); }
.cc-release-tag.second { background: rgba(96, 165, 250, 0.2); color: var(--semantic-info); }
.cc-release-tag.third { background: rgba(167, 139, 250, 0.2); color: #a78bfa; }
.cc-release-tag.fourth { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.cc-release-tag.mixed { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }

.cc-lot-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 8px;
}

.cc-lot {
background: rgba(74, 222, 128, 0.1);
border: 1px solid rgba(74, 222, 128, 0.3);
border-radius: 8px;
padding: 8px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}

.cc-lot:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(74, 222, 128, 0.2);
}

.cc-lot.available {
background: rgba(74, 222, 128, 0.1);
border-color: rgba(74, 222, 128, 0.3);
}

.cc-lot.hold {
background: rgba(245, 158, 11, 0.1);
border-color: rgba(245, 158, 11, 0.3);
}

.cc-lot.sold {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
}

.cc-lot.large {
grid-column: span 2;
}

/* Grade-specific lot styling */
.cc-lot.grade-a { border-left: 3px solid var(--msl-gold); }
.cc-lot.grade-b { border-left: 3px solid var(--bb-sawtooth); }
.cc-lot.grade-c { border-left: 3px solid var(--bb-sawtooth); }
.cc-lot.grade-d { border-left: 3px solid var(--bb-steel); }
.cc-lot.grade-e { border-left: 3px solid var(--bb-steel); }

.cc-lot-num {
display: block;
color: #ffffff;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 2px;
}

.cc-lot-size {
display: block;
color: var(--text-tertiary);
font-size: 0.65rem;
}

.cc-lot-price {
display: block;
color: var(--semantic-positive);
font-size: 0.75rem;
font-weight: 600;
}

.cc-lot.sold .cc-lot-price { color: var(--semantic-negative); }
.cc-lot.hold .cc-lot-price { color: var(--semantic-warning); }

/* Stage Summary */
.cc-stage-summary {
background: rgba(219, 186, 92, 0.05);
border: 1px solid rgba(219, 186, 92, 0.2);
border-radius: 12px;
padding: 16px;
margin-top: 24px;
}

.cc-stage-summary h4 {
color: var(--msl-gold);
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 12px 0;
}

.cc-summary-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}

.cc-summary-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
}

.cc-summary-stage {
color: var(--msl-gold);
font-size: 0.85rem;
font-weight: 700;
}

.cc-summary-lots {
color: var(--text-tertiary);
font-size: 0.7rem;
}

.cc-summary-grv {
color: var(--semantic-positive);
font-size: 0.75rem;
font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.6 PIPELINE STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.cc-funnel {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
padding: 20px;
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
}

.cc-funnel-stage {
flex: 1;
text-align: center;
padding: 16px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border: 1px solid var(--border-light);
}

.cc-funnel-stage.success {
background: rgba(74, 222, 128, 0.1);
border-color: rgba(74, 222, 128, 0.3);
}

.cc-funnel-header {
color: var(--text-tertiary);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}

.cc-funnel-value {
color: #ffffff;
font-size: 2rem;
font-weight: 700;
}

.cc-funnel-stage.success .cc-funnel-value {
color: var(--semantic-positive);
}

.cc-funnel-sub {
color: var(--text-tertiary);
font-size: 0.75rem;
}

.cc-funnel-arrow {
color: var(--text-heading)333;
font-size: 1.5rem;
padding: 0 8px;
}

.cc-leads-section {
margin-bottom: 24px;
}

.cc-leads-section h4 {
color: #ffffff;
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 12px 0;
}

.cc-lead-count {
color: var(--text-tertiary);
font-weight: 400;
}

.cc-leads-list {
display: flex;
flex-direction: column;
gap: 8px;
}

.cc-leads-list.compact .cc-lead-card {
padding: 10px 14px;
}

.cc-lead-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-light);
border-radius: 8px;
transition: all 0.3s ease;
}

.cc-lead-card:hover {
background: rgba(255, 255, 255, 0.05);
}

.cc-lead-status {
width: 10px;
height: 10px;
border-radius: 50%;
}

.cc-lead-card.hot .cc-lead-status { background: var(--semantic-negative); }
.cc-lead-card.warm .cc-lead-status { background: var(--semantic-warning); }
.cc-lead-card.cold .cc-lead-status { background: #60a5fa; }

.cc-lead-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}

.cc-lead-name {
color: #ffffff;
font-size: 0.9rem;
font-weight: 600;
}

.cc-lead-product {
color: var(--text-tertiary);
font-size: 0.8rem;
}

.cc-lead-notes {
color: var(--text-tertiary);
font-size: 0.75rem;
font-style: italic;
}

.cc-lead-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}

.cc-lead-agent {
color: var(--msl-gold);
font-size: 0.75rem;
font-weight: 500;
}

.cc-lead-time {
color: var(--text-tertiary);
font-size: 0.7rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.7 RELEASES STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.cc-release-timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 28px;
}

.cc-release-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 16px;
}

.cc-release-card.active {
background: rgba(74, 222, 128, 0.1);
border-color: rgba(74, 222, 128, 0.3);
}

.cc-release-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}

.cc-release-num {
color: #ffffff;
font-size: 0.9rem;
font-weight: 600;
}

.cc-release-status {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.5px;
}

.cc-release-status.active { color: var(--semantic-positive); }
.cc-release-status.upcoming { color: var(--text-tertiary); }

.cc-release-card-body {
display: flex;
gap: 20px;
margin-bottom: 12px;
}

.cc-release-stat {
display: flex;
flex-direction: column;
}

.cc-release-stat-value {
color: var(--msl-gold);
font-size: 1.2rem;
font-weight: 700;
}

.cc-release-stat-label {
color: var(--text-tertiary);
font-size: 0.65rem;
text-transform: uppercase;
}

.cc-release-card-stages {
color: var(--text-tertiary);
font-size: 0.7rem;
line-height: 1.4;
}

/* Final Release */
.cc-final-release {
background: linear-gradient(135deg, rgba(219, 186, 92, 0.1), rgba(219, 186, 92, 0.05));
border: 1px solid rgba(219, 186, 92, 0.3);
border-radius: 12px;
padding: 20px;
}

.cc-final-release-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}

.cc-final-release-header h4 {
color: var(--msl-gold);
font-size: 1.1rem;
font-weight: 700;
margin: 0;
}

.cc-final-release-badge {
background: var(--msl-gold);
color: var(--bg-abyss);
font-size: 0.7rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 4px;
}

.cc-final-release-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(219, 186, 92, 0.2);
}

.cc-final-stat {
display: flex;
flex-direction: column;
align-items: center;
}

.cc-final-stat-value {
color: #ffffff;
font-size: 1.4rem;
font-weight: 700;
}

.cc-final-stat-label {
color: var(--text-tertiary);
font-size: 0.7rem;
text-transform: uppercase;
}

.cc-final-release-detail {
margin-bottom: 12px;
}

.cc-final-release-detail p {
color: var(--text-secondary);
font-size: 0.8rem;
margin: 0 0 6px 0;
line-height: 1.4;
}

.cc-final-release-detail strong {
color: var(--msl-gold);
}

.cc-final-release-note {
color: var(--msl-gold);
font-size: 0.8rem;
font-style: italic;
text-align: center;
padding-top: 12px;
border-top: 1px solid rgba(219, 186, 92, 0.15);
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.8 PRICING STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.cc-pricing-table-wrap {
overflow-x: auto;
margin-bottom: 24px;
}

.cc-pricing-table {
width: 100%;
border-collapse: collapse;
}

.cc-pricing-table th,
.cc-pricing-table td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--border-light);
}

.cc-pricing-table th {
color: var(--text-tertiary);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
background: rgba(255, 255, 255, 0.02);
}

.cc-pricing-table td {
color: var(--text-secondary);
font-size: 0.85rem;
}

.cc-pricing-table tr:hover {
background: rgba(255, 255, 255, 0.03);
}

.cc-pricing-table tr.grade-aplus {
background: rgba(219, 186, 92, 0.08);
}

.cc-pricing-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 24px;
}

.cc-metric-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 16px;
text-align: center;
}

.cc-metric-label {
display: block;
color: var(--text-tertiary);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}

.cc-metric-value {
display: block;
color: var(--msl-gold);
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 4px;
}

.cc-metric-sub {
display: block;
color: var(--text-tertiary);
font-size: 0.7rem;
}

.cc-pricing-range {
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
padding: 16px;
}

.cc-pricing-range h4 {
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 600;
margin: 0 0 12px 0;
}

.cc-range-bar {
position: relative;
}

.cc-range-track {
height: 12px;
background: linear-gradient(90deg, rgba(219, 186, 92, 0.3), rgba(219, 186, 92, 1));
border-radius: 8px;
position: relative;
}

.cc-range-min,
.cc-range-max {
position: absolute;
top: 20px;
color: var(--text-tertiary);
font-size: 0.8rem;
}

.cc-range-min { left: 0; }
.cc-range-max { right: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   2.9 AGENTS STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.cc-agent-table-wrap {
overflow-x: auto;
margin-bottom: 24px;
}

.cc-agent-table {
width: 100%;
border-collapse: collapse;
}

.cc-agent-table th,
.cc-agent-table td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--border-light);
}

.cc-agent-table th {
color: var(--text-tertiary);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
background: rgba(255, 255, 255, 0.02);
}

.cc-agent-table td {
color: var(--text-secondary);
font-size: 0.85rem;
}

.cc-agent-table tr:hover {
background: rgba(255, 255, 255, 0.03);
}

.cc-agent-table tr.featured {
background: rgba(219, 186, 92, 0.08);
}

.cc-agent-table td.good {
color: var(--semantic-positive);
font-weight: 600;
}

.cc-type-badge {
display: inline-block;
font-size: 0.65rem;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
}

.cc-type-badge.inhouse {
background: rgba(219, 186, 92, 0.2);
color: var(--msl-gold);
}

.cc-type-badge.local {
background: rgba(74, 222, 128, 0.2);
color: var(--semantic-positive);
}

.cc-type-badge.network {
background: rgba(96, 165, 250, 0.2);
color: var(--semantic-info);
}

.cc-type-badge.intl {
background: rgba(167, 139, 250, 0.2);
color: #a78bfa;
}

.cc-agent-insights {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 24px;
}

.cc-insight-card {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 14px;
}

.cc-insight-icon {
font-size: 1.5rem;
}

.cc-insight-content {
display: flex;
flex-direction: column;
}

.cc-insight-title {
color: var(--text-tertiary);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.cc-insight-value {
color: #ffffff;
font-size: 0.85rem;
font-weight: 500;
}

/* Allocation Bars */
.cc-allocation h4 {
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 600;
margin: 0 0 12px 0;
}

.cc-allocation-bars {
display: flex;
flex-direction: column;
gap: 10px;
}

.cc-allocation-row {
display: grid;
grid-template-columns: 100px 1fr 120px;
align-items: center;
gap: 12px;
}

.cc-allocation-name {
color: var(--text-secondary);
font-size: 0.8rem;
}

.cc-allocation-bar-wrap {
height: 8px;
background: rgba(255, 255, 255, 0.08);
border-radius: 4px;
overflow: hidden;
}

.cc-allocation-bar {
height: 100%;
background: linear-gradient(90deg, var(--msl-gold), #c9a84a);
border-radius: 4px;
}

.cc-allocation-value {
color: var(--text-tertiary);
font-size: 0.75rem;
text-align: right;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.10 REPORTS STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.cc-report-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 28px;
}

.cc-report-tile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-light);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
}

.cc-report-tile:hover {
background: rgba(219, 186, 92, 0.1);
border-color: rgba(219, 186, 92, 0.3);
transform: translateY(-2px);
}

.cc-report-icon {
font-size: 1.8rem;
margin-bottom: 10px;
}

.cc-report-title {
color: #ffffff;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 4px;
}

.cc-report-desc {
color: var(--text-tertiary);
font-size: 0.75rem;
margin-bottom: 8px;
}

.cc-report-meta {
color: #4D4D4D;
font-size: 0.65rem;
}

/* Bar Chart */
.cc-chart-section {
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
padding: 20px;
}

.cc-chart-section h4 {
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 20px 0;
}

.cc-bar-chart {
display: flex;
gap: 20px;
height: 200px;
}

.cc-chart-y-axis {
display: flex;
flex-direction: column;
justify-content: space-between;
color: var(--text-tertiary);
font-size: 0.7rem;
padding: 0 8px 24px 0;
}

.cc-chart-bars {
flex: 1;
display: flex;
justify-content: space-around;
align-items: flex-end;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-visible);
}

.cc-chart-bar-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.cc-bar {
width: 40px;
height: calc(var(--height) * 1.5);
background: linear-gradient(180deg, var(--msl-gold), rgba(219, 186, 92, 0.5));
border-radius: 4px 4px 0 0;
transition: all 0.3s ease;
}

.cc-chart-bar-item:hover .cc-bar {
background: linear-gradient(180deg, #f0d078, var(--msl-gold));
}

.cc-chart-bar-item.current .cc-bar {
background: linear-gradient(180deg, var(--semantic-positive), rgba(109, 189, 139, 0.5));
}

.cc-bar-label {
color: var(--text-tertiary);
font-size: 0.75rem;
position: absolute;
bottom: 0;
transform: translateY(100%);
}

.cc-bar-value {
color: var(--text-tertiary);
font-size: 0.65rem;
}

.cc-chart-bar-item {
position: relative;
}

.cc-chart-summary {
display: flex;
justify-content: center;
gap: 32px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-light);
}

.cc-chart-summary span {
color: var(--text-tertiary);
font-size: 0.8rem;
}

.cc-chart-summary strong {
color: var(--msl-gold);
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.11 RESPONSIVE STYLES
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
.cc-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}

.cc-dashboard-row {
grid-template-columns: 1fr;
}

.cc-release-timeline {
grid-template-columns: repeat(2, 1fr);
}

.cc-final-release-stats {
grid-template-columns: repeat(2, 1fr);
}

.cc-pricing-metrics {
grid-template-columns: 1fr;
}

.cc-agent-insights {
grid-template-columns: 1fr;
}

.cc-report-grid {
grid-template-columns: repeat(2, 1fr);
}

.cc-summary-grid {
grid-template-columns: repeat(5, 1fr);
}
}

@media (max-width: 768px) {
.cc-main {
flex-direction: column;
}

.cc-sidebar {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
padding: 8px 12px;
border-right: none;
border-bottom: 1px solid rgba(219, 186, 92, 0.15);
}

.cc-sidebar-section {
display: flex;
flex-wrap: wrap;
gap: 4px;
flex: 1;
}

.cc-sidebar-label {
display: none;
}

.cc-nav-item {
padding: 8px 12px;
border-left: none;
border-radius: 8px;
}

.cc-nav-item span:not(.cc-nav-badge) {
display: none;
}

.cc-nav-item svg {
margin: 0;
}

.cc-sidebar-stats {
display: none;
}

.cc-content {
max-height: none;
padding: 16px;
}

.cc-topbar {
flex-wrap: wrap;
gap: 8px;
}

.cc-topbar-center {
order: 3;
flex-basis: 100%;
text-align: left;
margin-top: 4px;
}

.cc-kpi-grid {
grid-template-columns: 1fr;
}

.cc-release-timeline {
grid-template-columns: 1fr;
}

.cc-funnel {
flex-wrap: wrap;
gap: 12px;
}

.cc-funnel-arrow {
display: none;
}

.cc-funnel-stage {
min-width: calc(50% - 6px);
}

.cc-lot-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.cc-stage-header {
flex-direction: column;
gap: 8px;
}

.cc-stage-meta {
flex-wrap: wrap;
gap: 8px;
}

.cc-report-grid {
grid-template-columns: 1fr;
}

.cc-summary-grid {
grid-template-columns: repeat(2, 1fr);
}

.cc-allocation-row {
grid-template-columns: 80px 1fr 100px;
}

.cc-chart-summary {
flex-direction: column;
gap: 8px;
text-align: center;
}
}

@media (max-width: 480px) {
.cc-panel-header {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}

.cc-panel-actions {
width: 100%;
}

.cc-panel-actions .cc-btn {
flex: 1;
}

.cc-legend {
flex-wrap: wrap;
gap: 8px;
}

.cc-release-bar {
grid-template-columns: 1fr;
gap: 6px;
}

.cc-release-progress {
margin: 4px 0;
}

.cc-release-pct {
text-align: left;
}

.cc-grading-row {
grid-template-columns: 35px 1fr 90px;
}

.cc-price-band {
grid-template-columns: 1fr;
gap: 4px;
}

.cc-summary-grid {
grid-template-columns: 1fr 1fr;
}
}


/* ═══════════════════════════════════════════════════════════════
   APARTMENT COMMAND CENTRE STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ============================================== */
/* APARTMENT SALES COMMAND CENTRE - CSS STYLES   */
/* Phase 2: Complete styling for all components  */
/* ============================================== */

/* ============================================== */
/* 2.1 COMMAND CENTRE LAYOUT                     */
/* ============================================== */

.apt-command-centre {
background: linear-gradient(135deg, var(--msl-navy) 0%, #0f1a2e 100%);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 25px 80px rgba(0,0,0,0.5);
font-family: var(--font-body);
color: #E8E8E8;
max-width: 1400px;
margin: 0 auto;
}

/* Top Bar */
.apt-topbar {
background: linear-gradient(90deg, #0f1a2e 0%, var(--msl-navy) 50%, #0f1a2e 100%);
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(219, 186, 92, 0.2);
}

.apt-window-controls {
display: flex;
gap: 8px;
}

.apt-control {
width: 12px;
height: 12px;
border-radius: 50%;
}

.apt-control.red { background: #ff5f56; }
.apt-control.yellow { background: #ffbd2e; }
.apt-control.green { background: #27ca40; }

.apt-topbar-title {
display: flex;
align-items: center;
gap: 12px;
}

.apt-logo {
font-weight: 800;
font-size: 18px;
color: var(--msl-gold);
letter-spacing: 1px;
}

.apt-title {
font-weight: 600;
font-size: 14px;
color: var(--text-secondary);
letter-spacing: 2px;
}

.apt-divider {
color: #445566;
}

.apt-project {
font-weight: 500;
font-size: 14px;
color: var(--text-white);
}

.apt-type-badge {
background: linear-gradient(135deg, var(--bb-jacaranda) 0%, #7C3AED 100%);
color: var(--text-white);
font-size: 10px;
font-weight: 700;
padding: 4px 10px;
border-radius: 4px;
letter-spacing: 1px;
}

.apt-topbar-right {
display: flex;
align-items: center;
gap: 16px;
}

.apt-live-indicator {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--semantic-positive);
}

.apt-live-dot {
width: 8px;
height: 8px;
background: var(--semantic-positive);
border-radius: 50%;
animation: apt-pulse 2s infinite;
}

@keyframes apt-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
}

.apt-user-avatar {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--msl-gold) 0%, #B8941F 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: var(--msl-navy);
}

/* Main Container */
.apt-main-container {
display: flex;
min-height: 700px;
}

/* ============================================== */
/* 2.2 SIDEBAR STYLES                            */
/* ============================================== */

.apt-sidebar {
width: 200px;
background: rgba(15, 26, 46, 0.8);
border-right: 1px solid rgba(219, 186, 92, 0.1);
display: flex;
flex-direction: column;
padding: 20px 0;
}

.apt-nav-list {
list-style: none;
padding: 0;
margin: 0;
}

.apt-nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
cursor: pointer;
transition: all 0.3s ease;
border-left: 3px solid transparent;
position: relative;
}

.apt-nav-item:hover {
background: rgba(219, 186, 92, 0.1);
}

.apt-nav-item.active {
background: rgba(219, 186, 92, 0.15);
border-left-color: var(--msl-gold);
}

.apt-nav-icon {
font-size: 18px;
width: 24px;
text-align: center;
}

.apt-nav-label {
font-size: 14px;
font-weight: 500;
color: var(--bb-mist);
}

.apt-nav-item.active .apt-nav-label {
color: var(--text-white);
}

.apt-nav-badge {
margin-left: auto;
background: rgba(219, 186, 92, 0.2);
color: var(--msl-gold);
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 12px;
}

.apt-nav-badge.hot {
background: rgba(239, 68, 68, 0.2);
color: var(--semantic-negative);
}

/* Sidebar Stats */
.apt-sidebar-stats {
margin-top: auto;
padding: 20px;
border-top: 1px solid rgba(219, 186, 92, 0.1);
}

.apt-stat-mini {
display: flex;
flex-direction: column;
margin-bottom: 12px;
}

.apt-stat-mini:last-child {
margin-bottom: 0;
}

.apt-stat-mini-value {
font-size: 20px;
font-weight: 700;
color: var(--msl-gold);
}

.apt-stat-mini-label {
font-size: 11px;
color: var(--bb-sawtooth);
text-transform: uppercase;
letter-spacing: 0.5px;
}

/* ============================================== */
/* 2.3 CONTENT & PANELS                          */
/* ============================================== */

.apt-content {
flex: 1;
padding: 24px;
overflow-y: auto;
max-height: 700px;
}

.apt-panel {
display: none;
animation: apt-fadeIn 0.3s ease;
}

.apt-panel.active {
display: block;
}

@keyframes apt-fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

.apt-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}

.apt-panel-title {
font-size: 22px;
font-weight: 600;
color: var(--text-white);
margin: 0;
}

.apt-panel-filters {
display: flex;
gap: 8px;
}

.apt-filter-btn {
background: rgba(255,255,255,0.05);
border: 1px solid var(--border-visible);
color: var(--text-secondary);
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
}

.apt-filter-btn:hover {
background: rgba(255,255,255,0.1);
color: var(--text-white);
}

.apt-filter-btn.active {
background: rgba(219, 186, 92, 0.2);
border-color: var(--msl-gold);
color: var(--msl-gold);
}

.apt-panel-actions {
display: flex;
gap: 10px;
}

.apt-btn {
padding: 10px 18px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}

.apt-btn-primary {
background: linear-gradient(135deg, var(--msl-gold) 0%, #B8941F 100%);
color: var(--msl-navy);
}

.apt-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(219, 186, 92, 0.3);
}

.apt-btn-outline {
background: transparent;
border: 1px solid rgba(219, 186, 92, 0.5);
color: var(--msl-gold);
}

.apt-btn-outline:hover {
background: rgba(219, 186, 92, 0.1);
}

.apt-btn-link {
background: transparent;
border: none;
color: var(--msl-gold);
padding: 0;
}

.apt-btn-link:hover {
text-decoration: underline;
}

.apt-panel-legend {
display: flex;
gap: 16px;
}

.apt-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary);
}

.apt-status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}

.apt-status-dot.available { background: var(--semantic-positive); }
.apt-status-dot.hold { background: var(--semantic-warning); }
.apt-status-dot.sold { background: var(--semantic-negative); }

/* ============================================== */
/* 2.4 DASHBOARD STYLES                          */
/* ============================================== */

.apt-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}

.apt-kpi-card {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 20px;
}

.apt-kpi-card.apt-kpi-primary {
grid-column: span 1;
background: linear-gradient(135deg, rgba(219, 186, 92, 0.1) 0%, rgba(219, 186, 92, 0.05) 100%);
border-color: rgba(219, 186, 92, 0.3);
}

.apt-kpi-label {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}

.apt-kpi-value {
font-size: 28px;
font-weight: 700;
color: var(--text-white);
margin-bottom: 4px;
}

.apt-kpi-card.apt-kpi-primary .apt-kpi-value {
color: var(--msl-gold);
}

.apt-kpi-sub {
font-size: 12px;
color: var(--text-tertiary);
}

.apt-kpi-progress {
margin-top: 12px;
}

.apt-progress-bar {
height: 6px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
overflow: hidden;
margin-bottom: 6px;
}

.apt-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--msl-gold) 0%, #B8941F 100%);
border-radius: 3px;
}

.apt-progress-text {
font-size: 11px;
color: var(--bb-sawtooth);
}

/* Dashboard Charts Row */
.apt-dashboard-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}

.apt-chart-card {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 20px;
}

.apt-chart-card.apt-chart-full {
grid-column: span 2;
}

.apt-chart-title {
font-size: 14px;
font-weight: 600;
color: var(--bb-mist);
margin: 0 0 16px 0;
}

/* Bedroom Type Bars */
.apt-bedroom-bars {
display: flex;
flex-direction: column;
gap: 16px;
}

.apt-bedroom-item {
padding-bottom: 12px;
border-bottom: 1px solid var(--border-subtle);
}

.apt-bedroom-item:last-child {
border-bottom: none;
padding-bottom: 0;
}

.apt-bedroom-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}

.apt-bedroom-type {
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 4px;
}

.apt-bedroom-type.bed-1 {
background: rgba(96, 165, 250, 0.2);
color: var(--semantic-info);
}

.apt-bedroom-type.bed-2 {
background: rgba(45, 212, 191, 0.2);
color: #2DD4BF;
}

.apt-bedroom-type.bed-3 {
background: rgba(219, 186, 92, 0.2);
color: var(--msl-gold);
}

.apt-bedroom-count {
font-size: 13px;
color: var(--bb-mist);
}

.apt-bedroom-value {
margin-left: auto;
font-size: 14px;
font-weight: 600;
color: var(--text-white);
}

.apt-bedroom-bar-container {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 6px;
}

.apt-bedroom-bar {
height: 8px;
border-radius: 4px;
transition: width 0.3s ease;
}

.apt-bedroom-bar.bed-1 {
background: linear-gradient(90deg, var(--semantic-info) 0%, var(--bb-steel) 100%);
}

.apt-bedroom-bar.bed-2 {
background: linear-gradient(90deg, var(--bb-mist) 0%, var(--bb-canopy) 100%);
}

.apt-bedroom-bar.bed-3 {
background: linear-gradient(90deg, var(--msl-gold) 0%, #B8941F 100%);
}

.apt-bedroom-percent {
font-size: 12px;
font-weight: 600;
color: var(--text-tertiary);
min-width: 35px;
}

.apt-bedroom-detail {
font-size: 11px;
color: var(--text-tertiary);
}

/* Building Bars */
.apt-building-bars {
display: flex;
flex-direction: column;
gap: 20px;
}

.apt-building-item {
padding-bottom: 16px;
border-bottom: 1px solid var(--border-subtle);
}

.apt-building-item:last-child {
border-bottom: none;
padding-bottom: 0;
}

.apt-building-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}

.apt-building-name {
font-size: 14px;
font-weight: 600;
color: var(--text-white);
}

.apt-building-count {
font-size: 12px;
color: var(--text-secondary);
}

.apt-building-value {
font-size: 13px;
color: var(--msl-gold);
margin-bottom: 8px;
}

.apt-building-bar-container {
display: flex;
align-items: center;
gap: 12px;
}

.apt-building-bar {
height: 10px;
border-radius: 4px;
}

.apt-building-bar.building-1 {
background: linear-gradient(90deg, var(--msl-gold) 0%, #B8941F 100%);
}

.apt-building-bar.building-2 {
background: linear-gradient(90deg, var(--bb-jacaranda) 0%, #7C3AED 100%);
}

.apt-building-percent {
font-size: 12px;
font-weight: 600;
color: var(--text-tertiary);
}

/* Level Bars */
.apt-level-bars {
display: flex;
flex-direction: column;
gap: 16px;
}

.apt-level-item {
padding-bottom: 12px;
border-bottom: 1px solid var(--border-subtle);
}

.apt-level-item:last-child {
border-bottom: none;
padding-bottom: 0;
}

.apt-level-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 8px;
flex-wrap: wrap;
}

.apt-level-name {
font-size: 14px;
font-weight: 600;
color: var(--text-white);
min-width: 100px;
}

.apt-level-count {
font-size: 12px;
color: var(--text-secondary);
}

.apt-level-value {
font-size: 13px;
font-weight: 600;
color: var(--msl-gold);
}

.apt-level-avg {
font-size: 12px;
color: var(--text-tertiary);
}

.apt-level-feature {
font-size: 11px;
color: var(--bb-jacaranda);
font-style: italic;
}

.apt-level-bar-container {
display: flex;
align-items: center;
gap: 12px;
}

.apt-level-bar {
height: 8px;
border-radius: 4px;
}

.apt-level-bar.level-ground {
background: linear-gradient(90deg, var(--semantic-positive) 0%, var(--bb-canopy) 100%);
}

.apt-level-bar.level-1 {
background: linear-gradient(90deg, var(--semantic-info) 0%, var(--bb-steel) 100%);
}

.apt-level-bar.level-2 {
background: linear-gradient(90deg, var(--bb-jacaranda) 0%, #7C3AED 100%);
}

.apt-level-percent {
font-size: 12px;
font-weight: 600;
color: var(--text-tertiary);
min-width: 35px;
}

/* ============================================== */
/* 2.5 INVENTORY STYLES                          */
/* ============================================== */

.apt-building-section {
margin-bottom: 32px;
}

.apt-building-section.apt-building-premium {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.05) 0%, rgba(124, 58, 237, 0.02) 100%);
border: 1px solid rgba(167, 139, 250, 0.2);
border-radius: 12px;
padding: 20px;
}

.apt-building-header-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: rgba(219, 186, 92, 0.1);
border-radius: 8px;
margin-bottom: 16px;
}

.apt-building-premium .apt-building-header-bar {
background: linear-gradient(90deg, rgba(167, 139, 250, 0.2) 0%, rgba(124, 58, 237, 0.1) 100%);
}

.apt-building-title {
font-size: 16px;
font-weight: 600;
color: var(--text-white);
margin: 0;
}

.apt-building-summary {
font-size: 13px;
color: var(--msl-gold);
font-weight: 500;
}

.apt-building-premium .apt-building-summary {
color: var(--bb-jacaranda);
}

.apt-level-section {
margin-bottom: 24px;
}

.apt-level-header-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: rgba(255,255,255,0.03);
border-radius: 8px;
margin-bottom: 12px;
}

.apt-level-title {
font-size: 13px;
font-weight: 500;
color: var(--bb-mist);
margin: 0;
}

.apt-level-summary {
font-size: 12px;
color: var(--bb-sawtooth);
}

/* Apartment Grid */
.apt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}

.apt-card {
background: rgba(255,255,255,0.03);
border: 2px solid var(--border-light);
border-radius: 8px;
padding: 12px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}

.apt-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Bedroom Type Borders */
.apt-card.bed-1 {
border-color: rgba(96, 165, 250, 0.4);
}

.apt-card.bed-1:hover {
border-color: var(--semantic-info);
box-shadow: 0 8px 24px rgba(96, 165, 250, 0.2);
}

.apt-card.bed-2 {
border-color: rgba(45, 212, 191, 0.4);
}

.apt-card.bed-2:hover {
border-color: var(--bb-mist);
box-shadow: 0 8px 24px rgba(45, 212, 191, 0.2);
}

.apt-card.bed-3 {
border-color: rgba(219, 186, 92, 0.4);
}

.apt-card.bed-3:hover {
border-color: var(--msl-gold);
box-shadow: 0 8px 24px rgba(219, 186, 92, 0.2);
}

/* Penthouse Cards */
.apt-card.penthouse {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
}

.apt-card.penthouse.signature {
border-color: rgba(167, 139, 250, 0.5);
}

.apt-card.penthouse.signature:hover {
border-color: var(--bb-jacaranda);
box-shadow: 0 8px 24px rgba(167, 139, 250, 0.3);
}

.apt-card.penthouse.premium {
background: linear-gradient(135deg, rgba(219, 186, 92, 0.15) 0%, rgba(167, 139, 250, 0.1) 100%);
border-color: var(--msl-gold);
}

.apt-card.penthouse.premium:hover {
box-shadow: 0 12px 32px rgba(219, 186, 92, 0.4);
}

/* Status Colors */
.apt-card.status-available .apt-card-status {
background: var(--semantic-positive);
}

.apt-card.status-hold {
opacity: 0.8;
}

.apt-card.status-hold .apt-card-status {
background: var(--semantic-warning);
}

.apt-card.status-sold {
opacity: 0.5;
}

.apt-card.status-sold .apt-card-status {
background: var(--semantic-negative);
}

/* Card Content */
.apt-card-number {
font-size: 16px;
font-weight: 700;
color: var(--text-white);
margin-bottom: 4px;
}

.apt-card-beds {
font-size: 11px;
font-weight: 600;
margin-bottom: 6px;
}

.apt-card.bed-1 .apt-card-beds { color: var(--semantic-info); }
.apt-card.bed-2 .apt-card-beds { color: #2DD4BF; }
.apt-card.bed-3 .apt-card-beds { color: var(--msl-gold); }

.apt-card-size {
font-size: 11px;
color: var(--text-secondary);
margin-bottom: 4px;
}

.apt-card-price {
font-size: 13px;
font-weight: 600;
color: var(--text-white);
margin-bottom: 4px;
}

.apt-card-facing {
font-size: 10px;
color: var(--text-tertiary);
margin-bottom: 4px;
}

.apt-card-feature {
font-size: 10px;
font-weight: 600;
color: var(--bb-jacaranda);
background: rgba(167, 139, 250, 0.15);
padding: 2px 6px;
border-radius: 3px;
display: inline-block;
}

.apt-card-status {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
}

/* Inventory Summary */
.apt-inventory-summary {
margin-top: 24px;
padding: 16px;
background: rgba(219, 186, 92, 0.05);
border: 1px solid rgba(219, 186, 92, 0.2);
border-radius: 8px;
}

.apt-summary-grid {
display: flex;
justify-content: space-around;
align-items: center;
}

.apt-summary-item {
text-align: center;
}

.apt-summary-item.apt-summary-total {
padding-left: 24px;
border-left: 1px solid rgba(219, 186, 92, 0.3);
}

.apt-summary-label {
display: block;
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 4px;
}

.apt-summary-value {
display: block;
font-size: 18px;
font-weight: 700;
color: var(--text-white);
}

.apt-summary-total .apt-summary-value {
color: var(--msl-gold);
}

.apt-summary-grv {
display: block;
font-size: 13px;
color: var(--msl-gold);
}

/* ============================================== */
/* 2.6 PIPELINE STYLES                           */
/* ============================================== */

.apt-funnel {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 32px;
padding: 24px;
background: rgba(255,255,255,0.02);
border-radius: 12px;
}

.apt-funnel-stage {
background: rgba(255,255,255,0.05);
border: 1px solid var(--border-visible);
border-radius: 8px;
padding: 16px 24px;
text-align: center;
min-width: 120px;
}

.apt-funnel-stage.apt-funnel-success {
background: rgba(74, 222, 128, 0.1);
border-color: rgba(74, 222, 128, 0.3);
}

.apt-funnel-label {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 4px;
}

.apt-funnel-count {
font-size: 28px;
font-weight: 700;
color: var(--text-white);
}

.apt-funnel-success .apt-funnel-count {
color: var(--semantic-positive);
}

.apt-funnel-value {
font-size: 11px;
color: var(--text-tertiary);
}

.apt-funnel-arrow {
font-size: 20px;
color: #445566;
}

/* Leads Section */
.apt-leads-section {
margin-bottom: 24px;
}

.apt-leads-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}

.apt-leads-title {
font-size: 16px;
font-weight: 600;
color: var(--text-white);
margin: 0 0 16px 0;
}

.apt-leads-header .apt-leads-title {
margin: 0;
}

.apt-leads-list {
display: flex;
flex-direction: column;
gap: 12px;
}

.apt-leads-list.apt-leads-compact {
gap: 8px;
}

.apt-lead-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-light);
border-radius: 8px;
}

.apt-lead-card.apt-lead-compact {
padding: 12px;
align-items: center;
}

.apt-lead-status {
width: 10px;
height: 10px;
border-radius: 50%;
margin-top: 4px;
flex-shrink: 0;
}

.apt-lead-compact .apt-lead-status {
margin-top: 0;
}

.apt-lead-status.hot {
background: var(--semantic-negative);
box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.apt-lead-status.warm {
background: var(--semantic-warning);
}

.apt-lead-status.cold {
background: #6B7280;
}

.apt-lead-info {
flex: 1;
}

.apt-lead-compact .apt-lead-info {
display: flex;
gap: 12px;
align-items: center;
}

.apt-lead-name {
font-size: 14px;
font-weight: 600;
color: var(--text-white);
margin-bottom: 2px;
}

.apt-lead-compact .apt-lead-name {
margin-bottom: 0;
}

.apt-lead-detail {
font-size: 13px;
color: var(--msl-gold);
margin-bottom: 4px;
}

.apt-lead-compact .apt-lead-detail {
margin-bottom: 0;
color: var(--text-secondary);
}

.apt-lead-note {
font-size: 12px;
color: var(--bb-sawtooth);
}

.apt-lead-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}

.apt-lead-compact .apt-lead-meta {
flex-direction: row;
gap: 12px;
}

.apt-lead-agent {
font-size: 11px;
color: var(--bb-jacaranda);
background: rgba(167, 139, 250, 0.15);
padding: 2px 8px;
border-radius: 4px;
}

.apt-lead-time {
font-size: 11px;
color: var(--text-tertiary);
}

/* ============================================== */
/* 2.7 BUILDINGS STYLES                          */
/* ============================================== */

.apt-buildings-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 32px;
}

.apt-building-overview-card {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 24px;
}

.apt-building-overview-card.apt-building-premium-card {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
border-color: rgba(167, 139, 250, 0.3);
}

.apt-building-overview-title {
font-size: 16px;
font-weight: 600;
color: var(--text-white);
margin: 0 0 16px 0;
}

.apt-building-stats {
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-light);
}

.apt-building-stat-large {
font-size: 28px;
font-weight: 700;
color: var(--msl-gold);
margin-bottom: 4px;
}

.apt-building-premium-card .apt-building-stat-large {
color: var(--bb-jacaranda);
}

.apt-building-stat-value {
font-size: 16px;
color: var(--text-white);
margin-bottom: 2px;
}

.apt-building-stat-percent {
font-size: 13px;
color: var(--bb-sawtooth);
}

.apt-building-breakdown h4,
.apt-building-features h4 {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 8px 0;
}

.apt-building-list {
list-style: none;
padding: 0;
margin: 0 0 16px 0;
}

.apt-building-list li {
font-size: 13px;
color: var(--bb-mist);
padding: 4px 0;
padding-left: 16px;
position: relative;
}

.apt-building-list li::before {
content: "•";
position: absolute;
left: 0;
color: var(--msl-gold);
}

.apt-building-premium-card .apt-building-list li::before {
color: var(--bb-jacaranda);
}

/* Signature Penthouses */
.apt-signature-section {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.08) 0%, rgba(219, 186, 92, 0.05) 100%);
border: 1px solid rgba(167, 139, 250, 0.2);
border-radius: 12px;
padding: 24px;
}

.apt-signature-title {
font-size: 18px;
font-weight: 600;
color: var(--bb-jacaranda);
margin: 0 0 20px 0;
}

.apt-signature-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}

.apt-signature-card {
background: rgba(0,0,0,0.2);
border: 1px solid rgba(167, 139, 250, 0.3);
border-radius: 12px;
padding: 16px;
text-align: center;
}

.apt-signature-card:first-child {
border-color: var(--msl-gold);
background: linear-gradient(135deg, rgba(219, 186, 92, 0.1) 0%, rgba(0,0,0,0.2) 100%);
}

.apt-signature-number {
font-size: 14px;
font-weight: 700;
color: var(--bb-jacaranda);
margin-bottom: 8px;
}

.apt-signature-card:first-child .apt-signature-number {
color: var(--msl-gold);
}

.apt-signature-price {
font-size: 22px;
font-weight: 700;
color: var(--text-white);
margin-bottom: 4px;
}

.apt-signature-size {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 12px;
}

.apt-signature-features {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}

.apt-signature-features li {
font-size: 11px;
color: var(--bb-mist);
padding: 3px 0;
}

/* ============================================== */
/* 2.8 PRICING STYLES                            */
/* ============================================== */

.apt-pricing-section {
margin-bottom: 24px;
}

.apt-pricing-subtitle {
font-size: 14px;
font-weight: 600;
color: var(--bb-mist);
margin: 0 0 12px 0;
}

.apt-pricing-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 8px;
}

.apt-pricing-table th,
.apt-pricing-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--border-light);
}

.apt-pricing-table th {
font-size: 11px;
font-weight: 600;
color: var(--bb-sawtooth);
text-transform: uppercase;
letter-spacing: 0.5px;
background: rgba(255,255,255,0.03);
}

.apt-pricing-table td {
font-size: 13px;
color: var(--bb-mist);
}

.apt-pricing-table tbody tr:hover {
background: rgba(255,255,255,0.03);
}

.apt-bed-badge {
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 4px;
}

.apt-bed-badge.bed-1 {
background: rgba(96, 165, 250, 0.2);
color: var(--semantic-info);
}

.apt-bed-badge.bed-2 {
background: rgba(45, 212, 191, 0.2);
color: #2DD4BF;
}

.apt-bed-badge.bed-3 {
background: rgba(219, 186, 92, 0.2);
color: var(--msl-gold);
}

/* Pricing Metrics */
.apt-pricing-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 24px;
}

.apt-pricing-metric-card {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 20px;
text-align: center;
}

.apt-pricing-metric-card.apt-metric-highlight {
background: linear-gradient(135deg, rgba(219, 186, 92, 0.1) 0%, rgba(167, 139, 250, 0.05) 100%);
border-color: rgba(219, 186, 92, 0.3);
}

.apt-metric-label {
font-size: 11px;
color: var(--bb-sawtooth);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}

.apt-metric-value {
font-size: 24px;
font-weight: 700;
color: var(--text-white);
margin-bottom: 4px;
}

.apt-metric-highlight .apt-metric-value {
color: var(--msl-gold);
}

.apt-metric-detail {
font-size: 12px;
color: var(--bb-mist);
}

.apt-metric-sub {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 4px;
}

/* SQM Bars */
.apt-sqm-bars {
display: flex;
flex-direction: column;
gap: 16px;
}

.apt-sqm-row {
display: flex;
align-items: center;
gap: 16px;
}

.apt-sqm-label {
font-size: 13px;
color: var(--bb-mist);
width: 220px;
flex-shrink: 0;
}

.apt-sqm-bar-container {
flex: 1;
height: 12px;
background: rgba(255,255,255,0.05);
border-radius: 8px;
position: relative;
overflow: hidden;
}

.apt-sqm-bar {
position: absolute;
left: var(--bar-start);
width: calc(var(--bar-end) - var(--bar-start));
height: 100%;
background: linear-gradient(90deg, var(--msl-gold) 0%, #B8941F 100%);
border-radius: 8px;
}

.apt-sqm-bar.penthouse-bar {
background: linear-gradient(90deg, var(--bb-jacaranda) 0%, #7C3AED 100%);
}

.apt-sqm-range {
font-size: 12px;
color: var(--bb-sawtooth);
width: 120px;
text-align: right;
}

/* ============================================== */
/* 2.9 AGENTS STYLES                             */
/* ============================================== */

.apt-select {
background: rgba(255,255,255,0.05);
border: 1px solid var(--border-visible);
color: var(--bb-mist);
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
}

.apt-agents-table-container {
margin-bottom: 24px;
overflow-x: auto;
}

.apt-agents-table {
width: 100%;
border-collapse: collapse;
}

.apt-agents-table th,
.apt-agents-table td {
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid var(--border-light);
}

.apt-agents-table th {
font-size: 11px;
font-weight: 600;
color: var(--bb-sawtooth);
text-transform: uppercase;
letter-spacing: 0.5px;
background: rgba(255,255,255,0.03);
}

.apt-agents-table td {
font-size: 13px;
color: var(--bb-mist);
}

.apt-agents-table tbody tr:hover {
background: rgba(255,255,255,0.03);
}

.apt-agent-type {
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
}

.apt-agent-type.in-house {
background: rgba(219, 186, 92, 0.2);
color: var(--msl-gold);
}

.apt-agent-type.intl {
background: rgba(167, 139, 250, 0.2);
color: var(--bb-jacaranda);
}

.apt-agent-type.local {
background: rgba(74, 222, 128, 0.2);
color: var(--semantic-positive);
}

.apt-agent-type.network {
background: rgba(96, 165, 250, 0.2);
color: var(--semantic-info);
}

.apt-conv-star {
color: var(--semantic-positive);
font-weight: 600;
}

/* Agent Insights */
.apt-agents-insights {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 16px;
}

.apt-insight-card {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 16px;
text-align: center;
}

.apt-insight-icon {
font-size: 24px;
margin-bottom: 8px;
}

.apt-insight-title {
font-size: 11px;
color: var(--bb-sawtooth);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}

.apt-insight-value {
font-size: 16px;
font-weight: 600;
color: var(--text-white);
margin-bottom: 2px;
}

.apt-insight-detail {
font-size: 11px;
color: var(--text-secondary);
}

.apt-agents-note {
font-size: 12px;
color: var(--bb-sawtooth);
padding: 12px 16px;
background: rgba(167, 139, 250, 0.08);
border-radius: 8px;
border-left: 3px solid var(--bb-jacaranda);
}

/* ============================================== */
/* 2.10 REPORTS STYLES                           */
/* ============================================== */

.apt-reports-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 32px;
}

.apt-report-tile {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}

.apt-report-tile:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(219, 186, 92, 0.3);
transform: translateY(-2px);
}

.apt-report-icon {
font-size: 28px;
margin-bottom: 12px;
}

.apt-report-name {
font-size: 14px;
font-weight: 600;
color: var(--text-white);
margin-bottom: 4px;
}

.apt-report-desc {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 8px;
}

.apt-report-last {
font-size: 10px;
color: var(--text-tertiary);
}

/* Velocity Chart */
.apt-velocity-section {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 24px;
}

.apt-velocity-title {
font-size: 16px;
font-weight: 600;
color: var(--text-white);
margin: 0 0 20px 0;
}

.apt-velocity-chart {
display: flex;
gap: 16px;
height: 200px;
margin-bottom: 16px;
}

.apt-velocity-y-axis {
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 11px;
color: var(--text-tertiary);
padding-right: 8px;
border-right: 1px solid var(--border-visible);
}

.apt-velocity-bars {
flex: 1;
display: flex;
align-items: flex-end;
justify-content: space-around;
gap: 8px;
padding-bottom: 60px;
position: relative;
}

.apt-velocity-bar-group {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
max-width: 60px;
}

.apt-velocity-bar {
width: 100%;
height: var(--height);
background: linear-gradient(180deg, var(--msl-gold) 0%, #B8941F 100%);
border-radius: 4px 4px 0 0;
transition: height 0.3s ease;
}

.apt-velocity-bar-group.apt-velocity-current .apt-velocity-bar {
background: linear-gradient(180deg, var(--semantic-positive) 0%, var(--bb-canopy) 100%);
}

.apt-velocity-month {
font-size: 12px;
font-weight: 600;
color: var(--bb-mist);
margin-top: 8px;
}

.apt-velocity-sales {
font-size: 10px;
color: var(--bb-sawtooth);
}

.apt-velocity-value {
font-size: 11px;
font-weight: 600;
color: var(--msl-gold);
}

.apt-velocity-current .apt-velocity-value {
color: var(--semantic-positive);
}

.apt-velocity-summary {
display: flex;
justify-content: center;
gap: 32px;
padding-top: 16px;
border-top: 1px solid var(--border-light);
font-size: 13px;
color: var(--text-secondary);
}

.apt-velocity-summary strong {
color: var(--msl-gold);
}

/* ============================================== */
/* 2.11 RESPONSIVE                               */
/* ============================================== */

@media (max-width: 1200px) {
.apt-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}

.apt-signature-grid {
grid-template-columns: repeat(2, 1fr);
}

.apt-reports-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 1024px) {
.apt-main-container {
flex-direction: column;
}

.apt-sidebar {
width: 100%;
flex-direction: row;
padding: 0;
overflow-x: auto;
}

.apt-nav-list {
display: flex;
width: 100%;
}

.apt-nav-item {
flex-direction: column;
padding: 12px 16px;
border-left: none;
border-bottom: 3px solid transparent;
white-space: nowrap;
}

.apt-nav-item.active {
border-bottom-color: var(--msl-gold);
border-left: none;
}

.apt-nav-icon {
margin-bottom: 4px;
}

.apt-nav-badge {
position: absolute;
top: 4px;
right: 4px;
margin-left: 0;
}

.apt-sidebar-stats {
display: none;
}

.apt-content {
max-height: none;
}

.apt-dashboard-row,
.apt-buildings-row {
grid-template-columns: 1fr;
}

.apt-chart-card.apt-chart-full {
grid-column: span 1;
}

.apt-pricing-metrics,
.apt-agents-insights {
grid-template-columns: 1fr;
}

.apt-funnel {
flex-wrap: wrap;
}

.apt-funnel-arrow {
display: none;
}
}

@media (max-width: 768px) {
.apt-command-centre {
border-radius: 0;
}

.apt-topbar {
flex-wrap: wrap;
gap: 12px;
}

.apt-topbar-title {
flex-wrap: wrap;
justify-content: center;
}

.apt-kpi-grid {
grid-template-columns: 1fr;
}

.apt-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.apt-signature-grid {
grid-template-columns: 1fr;
}

.apt-reports-grid {
grid-template-columns: 1fr;
}

.apt-sqm-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}

.apt-sqm-label {
width: 100%;
}

.apt-sqm-bar-container {
width: 100%;
}

.apt-sqm-range {
width: 100%;
text-align: left;
}

.apt-velocity-summary {
flex-direction: column;
gap: 8px;
text-align: center;
}

.apt-level-header {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}

@media (max-width: 480px) {
.apt-topbar {
padding: 10px 12px;
}

.apt-content {
padding: 16px;
}

.apt-panel-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}

.apt-panel-title {
font-size: 18px;
}

.apt-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}

.apt-card {
padding: 10px;
}

.apt-card-number {
font-size: 14px;
}

.apt-card-price {
font-size: 12px;
}

.apt-funnel-stage {
min-width: 100px;
padding: 12px 16px;
}

.apt-funnel-count {
font-size: 22px;
}

.apt-lead-card {
flex-direction: column;
gap: 8px;
}

.apt-lead-meta {
flex-direction: row;
width: 100%;
justify-content: space-between;
}

.apt-pricing-table {
font-size: 11px;
}

.apt-pricing-table th,
.apt-pricing-table td {
padding: 8px;
}
}



/* ═══════════════════════════════════════════════════════════════
   SECTION 3: THE SOLUTION - STYLES
   ═══════════════════════════════════════════════════════════════ */
   SECTION 3: THE SOLUTION - STYLES
   ═══════════════════════════════════════════════════════════════ */

.solution-opening {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: 
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(219, 186, 92, 0.08) 0%, transparent 60%),
        var(--bg-abyss);
}

.solution-opening-content {
    max-width: 900px;
}

/* Model Section */
.model-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-midnight);
}

.model-definition {
    max-width: 800px;
    margin: 0 auto var(--space-xl);
    text-align: center;
    padding: 50px;
    background: var(--bg-deep);
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    position: relative;
}

.model-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--msl-gold);
    color: var(--bg-void);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 12px;
}

.model-title {
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--text-heading);
    margin-bottom: 20px;
}

.model-text {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Comparison Cards */
.model-comparison {
    display: flex;
    align-items: stretch;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.comparison-card {
    flex: 1;
    background: var(--bg-deep);
    border-radius: 12px;
    padding: 35px;
    border: 1px solid var(--border-subtle);
}

.comparison-card.bad {
    border-color: rgba(196, 160, 168, 0.3);
}

.comparison-card.good {
    border-color: var(--border-gold);
    background: linear-gradient(135deg, var(--bg-deep) 0%, rgba(219, 186, 92, 0.05) 100%);
}

.comparison-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.comparison-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
}

.comparison-card.bad .comparison-icon {
    background: rgba(196, 160, 168, 0.15);
    color: var(--msl-rose);
}

.comparison-card.good .comparison-icon {
    background: rgba(219, 186, 92, 0.15);
    color: var(--msl-gold);
}

.comparison-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
}

.comparison-list {
    list-style: none;
}

.comparison-list li {
    font-size: 14px;
    color: var(--text-secondary);
    padding: 10px 0;
    padding-left: 25px;
    position: relative;
    border-bottom: 1px solid var(--border-subtle);
}

.comparison-list li:last-child {
    border-bottom: none;
}

.comparison-card.bad .comparison-list li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: var(--msl-rose);
}

.comparison-card.good .comparison-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--msl-gold);
}

.comparison-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comparison-divider span {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-faint);
    letter-spacing: 2px;
}

/* Pillars Section */
.pillars-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-abyss);
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: var(--space-xl);
}

.pillar-card {
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 35px 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-out-expo);
}

.pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--msl-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-out-expo);
}

.pillar-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-gold);
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}

.pillar-card:hover::before {
    transform: scaleX(1);
}

.pillar-number {
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--msl-gold);
    margin-bottom: 20px;
}

.pillar-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

.pillar-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--msl-gold);
    stroke-width: 1.5;
    fill: none;
}

.pillar-title {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--text-heading);
    margin-bottom: 12px;
}

.pillar-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.pillar-features {
    list-style: none;
    padding-top: 15px;
    border-top: 1px solid var(--border-subtle);
}

.pillar-features li {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0;
    padding-left: 15px;
    position: relative;
}

.pillar-features li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--msl-gold);
}

/* How It Works */
.how-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-midnight);
}

.process-flow {
    margin-top: var(--space-xl);
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 30px;
    background: var(--bg-deep);
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    transition: all 0.3s var(--ease-out-expo);
}

.process-step:hover {
    border-color: var(--border-gold);
    transform: translateX(10px);
}

.process-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(219, 186, 92, 0.1);
    border-radius: 12px;
}

.process-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--msl-gold);
    stroke-width: 1.5;
    fill: none;
}

.process-content h4 {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--text-heading);
    margin-bottom: 8px;
}

.process-content p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.process-connector {
    width: 2px;
    height: 30px;
    background: var(--border-gold);
    margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 4: WHY MSL - STYLES
   ═══════════════════════════════════════════════════════════════ */

.msl-opening {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: 
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(219, 186, 92, 0.06) 0%, transparent 60%),
        var(--bg-abyss);
}

.msl-opening-content {
    max-width: 900px;
}

/* Track Record */
.track-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-midnight);
}

.track-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin: var(--space-xl) 0;
}

.track-stat {
    text-align: center;
    padding: 40px 20px;
    background: var(--bg-deep);
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
}

.track-stat-value {
    font-family: var(--font-heading);
    font-size: 42px;
    color: var(--msl-gold);
    line-height: 1;
    margin-bottom: 10px;
}

.track-stat-label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

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

.credential-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px;
    background: var(--bg-deep);
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
}

.credential-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(219, 186, 92, 0.1);
    border-radius: 12px;
}

.credential-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--msl-gold);
    stroke-width: 1.5;
    fill: none;
}

.credential-card h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.credential-card p {
    font-size: 12px;
    color: var(--text-muted);
}

/* Experience Section */
.experience-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-abyss);
}

.case-studies {
    margin-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.case-study {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.case-study.reverse {
    direction: rtl;
}

.case-study.reverse > * {
    direction: ltr;
}

.case-image {
    aspect-ratio: 16/10;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.case-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    font-size: 14px;
}

.case-content {
    padding: 20px 0;
}

.case-type {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--msl-gold);
    margin-bottom: 10px;
    display: block;
}

.case-title {
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--text-heading);
    margin-bottom: 15px;
}

.case-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 25px;
}

.case-stats {
    display: flex;
    gap: 30px;
}

.case-stat {
    display: flex;
    flex-direction: column;
}

.case-stat-value {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--msl-gold);
}

.case-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* Team Section */
.team-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-midnight);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: var(--space-xl);
}

.team-member {
    text-align: center;
    padding: 40px 30px;
    background: var(--bg-deep);
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    transition: all 0.3s var(--ease-out-expo);
}

.team-member:hover {
    border-color: var(--border-gold);
    transform: translateY(-5px);
}

.member-photo {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 2px solid var(--border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-photo-placeholder {
    font-size: 12px;
    color: var(--text-faint);
}

.member-name {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--text-heading);
    margin-bottom: 5px;
}

.member-role {
    font-size: 12px;
    color: var(--msl-gold);
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.member-bio {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 6: PARTNERSHIP - STYLES
   ═══════════════════════════════════════════════════════════════ */

.partnership-opening {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: 
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(219, 186, 92, 0.06) 0%, transparent 60%),
        var(--bg-abyss);
}

.partnership-opening-content {
    max-width: 800px;
}

/* Fees Section */
.fees-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-midnight);
}

.fees-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: var(--space-xl);
}

.fee-card {
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
}

.fee-header {
    padding: 20px 30px;
    background: var(--msl-gold);
}

.fee-type {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--bg-void);
}

.fee-body {
    padding: 30px;
}

.fee-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.fee-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.fee-value {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--msl-gold);
}

.fee-description {
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-subtle);
}

.fee-footer {
    padding: 25px 30px;
    background: rgba(219, 186, 92, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fee-total-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fee-total-value {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--msl-gold);
}

/* Scope Section */
.scope-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-abyss);
}

.scope-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: var(--space-xl);
}

.scope-item {
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s var(--ease-out-expo);
}

.scope-item:hover {
    border-color: var(--border-gold);
    transform: translateY(-3px);
}

.scope-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(219, 186, 92, 0.1);
    border-radius: 12px;
}

.scope-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--msl-gold);
    stroke-width: 1.5;
    fill: none;
}

.scope-item h4 {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.scope-item p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Terms Section */
.terms-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-midnight);
}

.terms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: var(--space-xl);
}

.term-card {
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
}

.term-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.term-value {
    font-family: var(--font-heading);
    font-size: 42px;
    color: var(--msl-gold);
    margin-bottom: 15px;
}

.term-note {
    font-size: 13px;
    color: var(--text-secondary);
}

.alignment-box {
    margin-top: var(--space-xl);
    padding: 40px;
    background: rgba(219, 186, 92, 0.05);
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    text-align: center;
}

.alignment-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--msl-gold);
    margin-bottom: 20px;
}

.alignment-text {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 7: NEXT STEPS - STYLES
   ═══════════════════════════════════════════════════════════════ */

.next-opening {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: 
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(29, 47, 78, 0.3) 0%, transparent 60%),
        var(--bg-abyss);
}

.next-opening-content {
    max-width: 900px;
}

/* Process Section */
.process-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-midnight);
}

.steps-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    margin-top: var(--space-xl);
}

.step-card {
    flex: 1;
    max-width: 280px;
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s var(--ease-out-expo);
}

.step-card:hover {
    border-color: var(--border-gold);
    transform: translateY(-5px);
}

.step-number {
    width: 60px;
    height: 60px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-midnight);
    border: 2px solid var(--msl-gold);
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--msl-gold);
}

.step-title {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--text-heading);
    margin-bottom: 15px;
}

.step-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.step-timing {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--msl-gold);
    padding: 8px 18px;
    background: rgba(219, 186, 92, 0.1);
    border-radius: 12px;
}

.step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: 60px;
}

.step-connector svg {
    width: 20px;
    height: 20px;
    stroke: var(--msl-gold);
    stroke-width: 2;
    fill: none;
    opacity: 0.5;
}

/* Contact Section */
.contact-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-abyss);
}

.contact-card {
    background: var(--bg-deep);
    border: 1px solid var(--border-gold);
    border-radius: 24px;
    padding: 60px 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 100% 80% at 50% -20%, rgba(219, 186, 92, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.contact-kicker {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--msl-gold);
    margin-bottom: 20px;
    position: relative;
}

.contact-headline {
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--text-heading);
    line-height: 1.3;
    margin-bottom: 35px;
    position: relative;
}

.contact-person {
    margin-bottom: 30px;
    position: relative;
}

.contact-name {
    font-family: var(--font-heading);
    font-size: 26px;
    color: var(--text-heading);
    margin-bottom: 5px;
}

.contact-role {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.contact-details {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-bottom: 40px;
    position: relative;
}

.contact-item {
    text-align: center;
}

.contact-label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.contact-value {
    font-size: 15px;
    color: var(--msl-gold);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-value:hover {
    color: var(--text-heading);
}

.contact-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 45px;
    background: var(--msl-gold);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--bg-void);
    text-decoration: none;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
}

.contact-cta:hover {
    background: var(--gold-hover);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(219, 186, 92, 0.3);
}

.contact-cta svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Final Closing */
.final-closing {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-midnight);
    text-align: center;
}

.final-content {
    max-width: 600px;
    margin: 0 auto;
}

.final-logo {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 5px;
    color: var(--msl-gold);
    margin-bottom: 35px;
}

.final-tagline {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: 26px;
    color: var(--text-heading);
    line-height: 1.4;
    margin-bottom: 40px;
}

.final-divider {
    width: 60px;
    height: 1px;
    background: var(--msl-gold);
    margin: 0 auto 35px;
}

.final-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.final-meta span:first-child {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.final-meta span:last-child {
    font-size: 14px;
    color: var(--text-secondary);
}



/* ═══════════════════════════════════════
   RESPONSIVE: SECTIONS 3,4,6,7
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .track-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .case-study {
        grid-template-columns: 1fr;
    }
    .case-study.reverse {
        direction: ltr;
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fees-grid {
        grid-template-columns: 1fr;
    }
    .scope-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .steps-grid {
        flex-direction: column;
        align-items: center;
    }
    .step-connector {
        transform: rotate(90deg);
        margin: 0;
    }
}

@media (max-width: 768px) {
    .model-comparison {
        flex-direction: column;
    }
    .comparison-divider {
        transform: rotate(90deg);
    }
    .pillars-grid {
        grid-template-columns: 1fr;
    }
    .credentials-grid {
        grid-template-columns: 1fr;
    }
    .team-grid {
        grid-template-columns: 1fr;
    }
    .scope-grid {
        grid-template-columns: 1fr;
    }
    .terms-grid {
        grid-template-columns: 1fr;
    }
    .contact-details {
        flex-direction: column;
        gap: 20px;
    }
}



/* ═══════════════════════════════════════════════════════════════
   CHALLENGE SECTION — Updated Styles
   ═══════════════════════════════════════════════════════════════ */

/* ===============================================================
   1. OVERVIEW
   =============================================================== */

.challenge-opening {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: 
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(61, 79, 92, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(122, 104, 87, 0.15) 0%, transparent 45%),
        linear-gradient(180deg, var(--bg-abyss) 0%, rgba(26, 51, 66, 0.15) 100%);
}

.challenge-opening-content {
    max-width: 750px;
}

.challenge-opening .intro-text {
    margin: 0 auto;
    max-width: 640px;
}

.challenge-stats-row {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-subtle);
}

.challenge-stat { text-align: center; }

.challenge-stat-value {
    font-family: var(--font-heading);
    font-size: 42px;
    color: var(--msl-rose);
    line-height: 1;
    margin-bottom: 8px;
}

.challenge-stat-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ===============================================================
   2. THE CONSIDERATION
   =============================================================== */

.consideration-section {
    padding: var(--space-3xl) var(--space-lg);
    background: linear-gradient(90deg, rgba(61, 79, 92, 0.12) 0%, var(--bg-midnight) 40%);
    border-left: 3px solid var(--bb-steel);
}

.consideration-inner {
    max-width: 660px;
    margin: 0 auto;
}

.consideration-inner .kicker {
    margin-bottom: var(--space-lg);
}

.consideration-inner .headline-lg {
    margin-bottom: var(--space-xl);
}

.editorial-prose {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.editorial-prose p {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.85;
    font-weight: 300;
}

.editorial-rule {
    width: 50px;
    height: 1px;
    background: rgba(212, 148, 58, 0.4);
    margin-bottom: var(--space-lg);
}

/* Pull Quote */
.pull-quote {
    font-family: var(--font-accent);
    font-weight: 400;
    font-style: italic;
    font-size: 20px;
    line-height: 1.7;
    color: var(--bb-sandstone);
    padding-left: 28px;
    border-left: 2px solid rgba(196, 160, 168, 0.3);
    margin: var(--space-lg) 0;
}

/* ===============================================================
   3. BRAND INTEGRITY
   =============================================================== */

.integrity-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-abyss);
}

.integrity-inner {
    max-width: 760px;
    margin: 0 auto;
}

.integrity-intro {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(18px, 2.5vw, 22px);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    max-width: 620px;
}

.observations {
    display: flex;
    flex-direction: column;
}

.observation {
    padding: 40px 0 40px 32px;
    border-bottom: 1px solid var(--border-subtle);
    border-left: 2px solid rgba(219, 186, 92, 0.15);
    transition: border-left-color 0.3s ease;
}

.observation:first-child {
    border-top: 1px solid var(--border-subtle);
}

.observation:hover {
    border-left-color: rgba(219, 186, 92, 0.4);
}

.observation-title {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--text-heading);
    margin-bottom: 16px;
    font-weight: 400;
}

.observation-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
    font-weight: 400;
}

/* ===============================================================
   4. A UNIFIED VOICE
   =============================================================== */

.unified-section {
    padding: var(--space-3xl) var(--space-lg);
    background: 
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(219, 186, 92, 0.03) 0%, transparent 70%),
        var(--bg-midnight);
}

.unified-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.unified-prose {
    text-align: left;
    max-width: 620px;
    margin: 0 auto var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.unified-prose p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.85;
    font-weight: 400;
}

/* Vertical Flow Diagram */
.source-flow-simple {
    max-width: 280px;
    margin: var(--space-xl) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.source-origin {
    padding: 22px 40px;
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    background: rgba(219, 186, 92, 0.04);
    text-align: center;
    width: 100%;
}

.source-origin-label {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--msl-gold);
    line-height: 1.3;
}

.source-origin-sub {
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 6px;
}

.flow-stem {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, var(--msl-gold), rgba(219, 186, 92, 0.15));
}

.flow-line {
    width: 1px;
    height: 20px;
    background: rgba(219, 186, 92, 0.12);
}

.flow-node {
    padding: 12px 32px;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    text-align: center;
    width: 100%;
    transition: border-color 0.3s ease;
}

.flow-node:hover {
    border-color: rgba(219, 186, 92, 0.25);
}

/* Unified quote */
.unified-quote {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(20px, 3vw, 26px);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: var(--space-xl);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ===============================================================
   5. STRUCTURED COLLABORATION
   =============================================================== */

.collaboration-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--bg-abyss);
}

.collaboration-inner {
    max-width: 760px;
    margin: 0 auto;
}

.collaboration-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.collaboration-intro {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.85;
    font-weight: 400;
    max-width: 640px;
    margin: var(--space-md) auto 0;
    text-align: center;
}

/* Single framework panel */
.framework-panel {
    max-width: 600px;
    margin: var(--space-xl) auto 0;
    padding: 50px 45px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--bg-deep) 0%, rgba(219, 186, 92, 0.04) 100%);
    border: 1px solid rgba(219, 186, 92, 0.15);
}

.framework-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--msl-gold);
    margin-bottom: var(--space-md);
}

.framework-title {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--text-heading);
    margin-bottom: var(--space-lg);
}

.framework-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.framework-list li {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    font-weight: 400;
    padding-left: 24px;
    position: relative;
}

.framework-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 1px;
    background: rgba(219, 186, 92, 0.35);
}

.framework-result {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
    color: var(--msl-gold);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
}

.collaboration-closing {
    text-align: center;
    margin-top: var(--space-xl);
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.8;
    font-weight: 400;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* ===============================================================
   6. THE QUESTION
   =============================================================== */

.transition-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: 
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(219, 186, 92, 0.04) 0%, transparent 70%),
        var(--bg-midnight);
}

.transition-content {
    max-width: 680px;
}

.transition-question {
    font-family: var(--font-heading);
    font-size: clamp(24px, 4vw, 34px);
    color: var(--text-heading);
    line-height: 1.45;
    margin-bottom: var(--space-xl);
    font-weight: 400;
}

.transition-divider {
    width: 60px;
    height: 1px;
    background: var(--msl-gold);
    margin: 0 auto var(--space-xl);
}

.transition-answer {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(28px, 5vw, 40px);
    color: var(--msl-gold);
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}

.transition-answer-second {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(18px, 3vw, 24px);
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: var(--space-xl);
}

.transition-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 35px;
    background: transparent;
    border: 1px solid var(--msl-gold);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--msl-gold);
    cursor: pointer;
    transition: all 0.4s var(--ease-out-expo);
}

.transition-cta:hover {
    background: var(--msl-gold);
    color: var(--bg-void);
}

.transition-cta svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* ===============================================================
   RESPONSIVE
   =============================================================== */

@media (max-width: 768px) {
    .challenge-stats-row {
        flex-wrap: wrap;
        gap: 30px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SOLUTION SECTION — Updated Styles
   ═══════════════════════════════════════════════════════════════ */

/* ===============================================================
   1. OPENING
   =============================================================== */
.solution-opening {
    min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(29, 47, 78, 0.2) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 50% 0%, rgba(219, 186, 92, 0.04) 0%, transparent 50%), var(--bg-abyss);
}
.solution-opening-content { max-width: 750px; }
.solution-opening .intro-text { margin: 0 auto; max-width: 640px; }

/* ===============================================================
   2. THE DEFINITION
   =============================================================== */
.definition-section { padding: var(--space-3xl) var(--space-lg); background: linear-gradient(135deg, var(--bg-midnight) 0%, rgba(29, 47, 78, 0.2) 100%); position: relative; }
.definition-section::after { content: ""; position: absolute; top: 20%; right: 5%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(245,240,230,0.04) 0%, transparent 70%); pointer-events: none; border-radius: 50%; }
.definition-inner { max-width: 680px; margin: 0 auto; }
.editorial-rule { width: 50px; height: 1px; background: rgba(219, 186, 92, 0.25); margin-bottom: var(--space-lg); }
.definition-inner .headline-lg { margin-bottom: var(--space-xl); }

.definition-card {
    background: linear-gradient(135deg, var(--bg-deep) 0%, rgba(219, 186, 92, 0.03) 100%);
    border: 1px solid rgba(219, 186, 92, 0.12); border-radius: 12px; padding: 50px 45px; margin-bottom: var(--space-xl);
}
.definition-badge { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--msl-gold); padding: 6px 16px; border: 1px solid rgba(219, 186, 92, 0.25); border-radius: 12px; margin-bottom: var(--space-md); }
.definition-text { font-family: var(--font-heading); font-size: clamp(20px, 3vw, 26px); color: var(--text-heading); line-height: 1.5; font-weight: 400; }
.definition-prose { display: flex; flex-direction: column; gap: 24px; }
.definition-prose p { font-size: 15px; color: var(--text-secondary); line-height: 1.85; font-weight: 400; }

/* ===============================================================
   3. THE FRAMEWORK
   =============================================================== */
.framework-section { padding: var(--space-3xl) var(--space-lg); background: var(--bg-abyss); position: relative; }
.framework-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(219,186,92,0.15) 50%, transparent); }
.framework-inner { max-width: 820px; margin: 0 auto; }
.framework-header { text-align: center; margin-bottom: var(--space-xl); }
.framework-intro { font-size: 15px; color: var(--text-secondary); line-height: 1.85; font-weight: 400; max-width: 620px; margin: var(--space-md) auto 0; text-align: center; }

.responsibilities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: var(--space-xl); }
.responsibility-card { padding: 30px 24px; background: var(--bg-deep); border: 1px solid var(--border-subtle); border-radius: 12px; transition: border-color 0.3s ease; }
.responsibility-card:hover { border-color: rgba(219, 186, 92, 0.2); }
.responsibility-number { font-family: var(--font-heading); font-size: 36px; color: #3D3525; line-height: 1; margin-bottom: 16px; }
.responsibility-title { font-family: var(--font-heading); font-size: 20px; color: var(--text-heading); margin-bottom: 12px; font-weight: 400; }
.responsibility-text { font-size: 13px; color: var(--text-secondary); line-height: 1.8; font-weight: 400; margin-bottom: 20px; }
.responsibility-details { list-style: none; display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.responsibility-details li { font-size: 12px; color: var(--text-muted); letter-spacing: 0.3px; padding-left: 20px; position: relative; }
.responsibility-details li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: rgba(219, 186, 92, 0.3); }

/* ===============================================================
   4. THE STRUCTURE (Hierarchy Chart)
   =============================================================== */
.structure-section {
    padding: var(--space-3xl) var(--space-lg);
    background: radial-gradient(ellipse 50% 40% at 50% 40%, rgba(219, 186, 92, 0.03) 0%, transparent 70%), var(--bg-midnight);
}
.structure-inner { max-width: 800px; margin: 0 auto; }
.structure-header { text-align: center; margin-bottom: var(--space-md); }
.structure-intro {
    font-size: 15px; color: var(--text-secondary); line-height: 1.85; font-weight: 400;
    max-width: 620px; margin: var(--space-md) auto 0; text-align: center;
}

/* Hierarchy Chart */
.hierarchy {
    margin-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Tier shared */
.hierarchy-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hierarchy-connector {
    width: 1px;
    height: 32px;
    background: rgba(219, 186, 92, 0.2);
}

.hierarchy-branch-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hierarchy-branch-stem {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.08);
}

.hierarchy-branch-bar {
    width: 70%;
    max-width: 520px;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    position: relative;
}

.hierarchy-branch-drops {
    display: flex;
    justify-content: space-between;
    width: 70%;
    max-width: 520px;
}

.hierarchy-drop {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.08);
}

/* Node styles */
.node-developer {
    padding: 28px 48px;
    border: 1px solid var(--border-gold-strong);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(219, 186, 92, 0.08) 0%, rgba(219, 186, 92, 0.02) 100%);
    text-align: center;
    max-width: 380px;
}

.node-developer-title {
    font-family: var(--font-heading);
    font-size: 26px;
    color: var(--msl-gold);
    line-height: 1.2;
    margin-bottom: 6px;
}

.node-developer-sub {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--msl-gold);
}

.node-developer-detail {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 12px;
    line-height: 1.6;
    font-weight: 400;
}

.node-lead-agent {
    padding: 24px 40px;
    border: 1px solid rgba(219, 186, 92, 0.3);
    border-radius: 12px;
    background: var(--bg-deep);
    text-align: center;
    max-width: 340px;
}

.node-lead-title {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.node-lead-name {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--msl-gold);
}

.node-lead-detail {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 12px;
    line-height: 1.6;
    font-weight: 400;
}

.node-sub-agents {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 70%;
    max-width: 520px;
}

.node-sub {
    flex: 1;
    padding: 18px 16px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-deep);
    text-align: center;
}

.node-sub-title {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.node-sub-detail {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.5;
    font-weight: 400;
}

/* Tier labels */
.tier-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 16px;
}

/* Annotation below chart */
.hierarchy-annotation {
    max-width: 580px;
    margin: var(--space-xl) auto 0;
    text-align: center;
}

.hierarchy-annotation p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
    font-weight: 400;
}

.hierarchy-annotation .annotation-emphasis {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 18px;
    color: var(--text-secondary);
    margin-top: var(--space-md);
}

/* Flow arrows */
.flow-label-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
}

.flow-label-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow-label-line {
    width: 24px;
    height: 1px;
}

.flow-label-line.gold { background: rgba(219, 186, 92, 0.4); }
.flow-label-line.subtle { background: rgba(255, 255, 255, 0.1); }

.flow-label-text {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* ===============================================================
   5. THE PROCESS
   =============================================================== */
.process-section { padding: var(--space-3xl) var(--space-lg); background: var(--bg-abyss); }
.process-inner { max-width: 680px; margin: 0 auto; }
.process-header { text-align: center; margin-bottom: var(--space-xl); }
.process-intro { font-size: 15px; color: var(--text-secondary); line-height: 1.85; font-weight: 400; max-width: 580px; margin: var(--space-md) auto 0; text-align: center; }

.process-timeline { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-xl); }
.process-phase { display: flex; gap: 30px; padding: 35px 0; border-bottom: 1px solid var(--border-subtle); }
.process-phase:first-child { border-top: 1px solid var(--border-subtle); }
.phase-indicator { flex-shrink: 0; width: 50px; display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.phase-number { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(219, 186, 92, 0.25); background: rgba(219, 186, 92, 0.05); font-family: var(--font-heading); font-size: 16px; color: var(--msl-gold); }
.phase-line { width: 1px; flex: 1; margin-top: 12px; background: rgba(219, 186, 92, 0.1); }
.phase-content { flex: 1; }
.phase-title { font-family: var(--font-heading); font-size: 22px; color: var(--text-heading); margin-bottom: 10px; font-weight: 400; }
.phase-description { font-size: 14px; color: var(--text-secondary); line-height: 1.8; font-weight: 400; }
.phase-timing { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 500; letter-spacing: 1px; color: var(--text-muted); padding: 5px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle); border-radius: 12px; }

/* ===============================================================
   6. REPORTING & VISIBILITY
   =============================================================== */
.reporting-section {
    padding: var(--space-3xl) var(--space-lg);
    background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(219, 186, 92, 0.03) 0%, transparent 70%), var(--bg-midnight);
}
.reporting-inner { max-width: 760px; margin: 0 auto; }
.reporting-header { text-align: center; margin-bottom: var(--space-xl); }
.reporting-intro {
    font-size: 15px; color: var(--text-secondary); line-height: 1.85; font-weight: 400;
    max-width: 620px; margin: var(--space-md) auto 0; text-align: center;
}

/* Reporting editorial prose */
.reporting-prose {
    max-width: 660px;
    margin: 0 auto var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.reporting-prose p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.85;
    font-weight: 400;
}

/* Reporting benefits */
.reporting-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto var(--space-xl);
}

.reporting-benefit {
    padding: 30px 28px;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid rgba(219, 186, 92, 0.2);
    border-radius: 0 8px 8px 0;
    background: var(--bg-deep);
    transition: border-left-color 0.3s ease;
}

.reporting-benefit:first-child { }
.reporting-benefit:hover { border-left-color: rgba(219, 186, 92, 0.4); }

.benefit-title {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--text-heading);
    margin-bottom: 12px;
    font-weight: 400;
}

.benefit-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
    font-weight: 400;
}

/* Command Centre Preview */
.command-centre-preview {
    max-width: 700px;
    margin: 0 auto;
    padding: 50px 45px;
    background: linear-gradient(135deg, var(--bg-deep) 0%, rgba(29, 47, 78, 0.2) 100%);
    border: 1px solid rgba(219, 186, 92, 0.15);
    border-radius: 12px;
}

.cc-preview-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--msl-gold);
    padding: 6px 16px;
    border: 1px solid rgba(219, 186, 92, 0.25);
    border-radius: 12px;
    margin-bottom: var(--space-md);
}

.cc-preview-title {
    font-family: var(--font-heading);
    font-size: clamp(24px, 4vw, 30px);
    color: var(--text-heading);
    line-height: 1.3;
    margin-bottom: var(--space-md);
}

.cc-preview-text {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.85;
    font-weight: 400;
    margin-bottom: var(--space-lg);
}

.cc-feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    list-style: none;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
}

.cc-feature-list li {
    font-size: 13px;
    color: var(--text-muted);
    padding-left: 20px;
    position: relative;
    line-height: 1.6;
}

.cc-feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 1px;
    background: rgba(219, 186, 92, 0.35);
}

.cc-preview-note {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 16px;
    color: var(--text-secondary);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
}

/* ===============================================================
   7. WHAT CHANGES
   =============================================================== */
.outcomes-section { padding: var(--space-3xl) var(--space-lg); background: var(--bg-abyss); }
.outcomes-inner { max-width: 760px; margin: 0 auto; }
.outcomes-header { text-align: center; margin-bottom: var(--space-xl); }
.outcomes-intro { font-size: 15px; color: var(--text-secondary); line-height: 1.85; font-weight: 400; max-width: 600px; margin: var(--space-md) auto 0; text-align: center; }

.outcomes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: var(--space-xl); }
.outcome-card { text-align: center; padding: 40px 25px; background: var(--bg-deep); border: 1px solid var(--border-subtle); border-radius: 12px; transition: border-color 0.3s ease; }
.outcome-card:hover { border-color: rgba(219, 186, 92, 0.2); }
.outcome-label { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.outcome-statement { font-family: var(--font-heading); font-size: 20px; color: var(--text-heading); line-height: 1.35; font-weight: 400; margin-bottom: 16px; }
.outcome-detail { font-size: 13px; color: var(--text-muted); line-height: 1.6; font-weight: 400; }

/* ===============================================================
   CLOSING & TRANSITION
   =============================================================== */
.solution-close { padding: var(--space-2xl) var(--space-lg) var(--space-xl); background: var(--bg-abyss); text-align: center; }
.closing-quote { font-family: var(--font-heading); font-weight: 400; font-style: italic; font-size: clamp(22px, 4vw, 32px); color: var(--text-secondary); line-height: 1.45; max-width: 600px; margin: 0 auto var(--space-lg); }
.closing-rule { width: 60px; height: 1px; background: var(--msl-gold); margin: 0 auto var(--space-xl); }

.transition-section { min-height: 50vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-3xl) var(--space-lg); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(219, 186, 92, 0.04) 0%, transparent 70%), var(--bg-midnight); }
.transition-content { max-width: 640px; }
.transition-question { font-family: var(--font-heading); font-size: clamp(24px, 4vw, 34px); color: var(--text-heading); line-height: 1.45; margin-bottom: var(--space-xl); font-weight: 400; }
.transition-divider { width: 60px; height: 1px; background: var(--msl-gold); margin: 0 auto var(--space-xl); }
.transition-answer { font-family: var(--font-heading); font-weight: 400; font-style: italic; font-size: clamp(22px, 4vw, 32px); color: var(--msl-gold); line-height: 1.4; margin-bottom: var(--space-xl); }
.transition-cta { display: inline-flex; align-items: center; gap: 12px; padding: 18px 35px; background: transparent; border: 1px solid var(--msl-gold); border-radius: 4px; font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--msl-gold); cursor: pointer; transition: all 0.4s var(--ease-out-expo); }
.transition-cta:hover { background: var(--msl-gold); color: var(--bg-void); }
.transition-cta svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media (max-width: 1024px) {
    .responsibilities { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .outcomes-grid { grid-template-columns: 1fr; }
    .responsibilities { grid-template-columns: 1fr; }
    .node-sub-agents { flex-direction: column; width: 90%; }
    .hierarchy-branch-bar, .hierarchy-branch-drops { width: 90%; }
    .cc-feature-list { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   MSL BRAND REFERENCE — Coastal Fresh + Navy Luxe (Refined)
   Light & Dark Theme Variables — Available for future use
   ═══════════════════════════════════════════════════════════════ */

/* 
 * LIGHT THEME REFERENCE
 * [data-theme="light"] {
    --bg-page: #FFFFFF;
    --bg-surface: #F7F9FC;
    --bg-card: #FFFFFF;
    --bg-section-alt: #EDF2F7;
    --bg-hero: #0F1C2E;
    --bg-footer: #0F1C2E;

    /* Navy accent blocks */
    --bg-navy-block: #0F1C2E;
    --bg-navy-surface: #162636;
    --bg-navy-elevated: #1D3248;
    --bg-navy-subtle: rgba(15, 28, 46, 0.025);

    /* Rose lifestyle tint */
    --bg-rose-tint: rgba(196, 160, 168, 0.04);
    --bg-rose-surface: rgba(196, 160, 168, 0.06);

    /* Text */
    --text-heading: #0F1C2E;
    --text-body: #4A5568;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --text-muted: #B8C5D1;

    /* Accents */
    --accent-gold: #DBBA5C;
    --accent-gold-hover: #C9A84E;
    --accent-navy: #0F1C2E;
    --accent-navy-mid: #3A5570;
    --accent-navy-light: #6888A5;
    --accent-rose: #C4A0A8;
    --accent-rose-deep: #8B6B75;
    --accent-stone: #A69E94;

    /* Borders */
    --border-subtle: var(--border-visible);
    --border-light: var(--border-light);
    --border-navy: rgba(15, 28, 46, 0.1);
    --border-rose: rgba(196, 160, 168, 0.2);

    /* Buttons */
    --btn-primary-bg: #0F1C2E;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover: #1D3248;
    --btn-cta-bg: #DBBA5C;
    --btn-cta-text: #0F1C2E;
    --btn-cta-hover: #C9A84E;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(15, 28, 46, 0.04);
    --shadow-md: 0 4px 20px rgba(15, 28, 46, 0.06);
    --shadow-lg: 0 12px 40px rgba(15, 28, 46, 0.1);
    --shadow-navy: 0 8px 30px rgba(15, 28, 46, 0.18);

    /* Inputs */
    --input-bg: #FFFFFF;
    --input-border: var(--border-visible);
    --input-focus: #0F1C2E;
    --input-focus-ring: rgba(15, 28, 46, 0.08);

    /* Nav — NAVY */
    --nav-bg: #0F1C2E;
    --nav-text: #999999;
    --nav-text-hover: #FFFFFF;
    --nav-text-active: #FFFFFF;
    --nav-active-accent: #DBBA5C;
    --nav-border: var(--border-light);

    /* Tags */
    --tag-available-bg: rgba(16, 185, 129, 0.08);
    --tag-available-text: #059669;
    --tag-available-border: rgba(16, 185, 129, 0.2);
    --tag-sold-bg: rgba(239, 68, 68, 0.06);
    --tag-sold-text: #DC2626;
    --tag-sold-border: rgba(239, 68, 68, 0.15);
    --tag-hold-bg: rgba(15, 28, 46, 0.05);
    --tag-hold-text: #3A5570;
    --tag-hold-border: rgba(15, 28, 46, 0.12);
    --tag-apt-bg: rgba(196, 160, 168, 0.08);
    --tag-apt-text: #8B6B75;
    --tag-apt-border: rgba(196, 160, 168, 0.2);
}
 *
 * DARK THEME REFERENCE  
 * [data-theme="dark"] {
    --bg-page: #0C1724;
    --bg-surface: #132030;
    --bg-card: #162636;
    --bg-section-alt: #0A1320;
    --bg-hero: #070E18;
    --bg-footer: #070E18;

    --bg-navy-block: transparent;
    --bg-navy-surface: #1D3248;
    --bg-navy-elevated: #24405A;
    --bg-navy-subtle: rgba(255, 255, 255, 0.015);

    --bg-rose-tint: rgba(196, 160, 168, 0.03);
    --bg-rose-surface: rgba(196, 160, 168, 0.05);

    --text-heading: #E8E4DC;
    --text-body: #8FA4BC;
    --text-secondary: #6888A5;
    --text-tertiary: #4A6A85;
    --text-muted: #2D4A65;

    --accent-gold: #DBBA5C;
    --accent-gold-hover: #E5C97A;
    --accent-navy: #DBBA5C;
    --accent-navy-mid: #6888A5;
    --accent-navy-light: #4A6A85;
    --accent-rose: #C4A0A8;
    --accent-rose-deep: #9A7B85;
    --accent-stone: #A69E94;

    --border-subtle: rgba(100, 140, 180, 0.08);
    --border-light: rgba(100, 140, 180, 0.05);
    --border-navy: rgba(219, 186, 92, 0.1);
    --border-rose: rgba(196, 160, 168, 0.1);

    --btn-primary-bg: #DBBA5C;
    --btn-primary-text: #0C1724;
    --btn-primary-hover: #E5C97A;
    --btn-cta-bg: #DBBA5C;
    --btn-cta-text: #0C1724;
    --btn-cta-hover: #E5C97A;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.3);
    --shadow-navy: 0 8px 30px rgba(0, 0, 0, 0.35);

    --input-bg: #132030;
    --input-border: rgba(100, 140, 180, 0.12);
    --input-focus: #DBBA5C;
    --input-focus-ring: rgba(219, 186, 92, 0.1);

    --nav-bg: #070E18;
    --nav-text: rgba(255, 255, 255, 0.45);
    --nav-text-hover: #CCCCCC;
    --nav-text-active: #DBBA5C;
    --nav-active-accent: #DBBA5C;
    --nav-border: rgba(100, 140, 180, 0.06);

    --tag-available-bg: rgba(16, 185, 129, 0.08);
    --tag-available-text: #34D399;
    --tag-available-border: rgba(16, 185, 129, 0.15);
    --tag-sold-bg: rgba(239, 68, 68, 0.08);
    --tag-sold-text: #F87171;
    --tag-sold-border: rgba(239, 68, 68, 0.15);
    --tag-hold-bg: rgba(219, 186, 92, 0.06);
    --tag-hold-text: #DBBA5C;
    --tag-hold-border: rgba(219, 186, 92, 0.12);
    --tag-apt-bg: rgba(196, 160, 168, 0.08);
    --tag-apt-text: #C4A0A8;
    --tag-apt-border: rgba(196, 160, 168, 0.15);
}
 */


/* ═══════════════════════════════════════════════════════════════
   WHY MSL SECTION — Styles from Why_MSL_Section_Visual
   ═══════════════════════════════════════════════════════════════ */

/* Why MSL section-specific variables */
.why-msl-visual {
    --color-ivory: #FFFFFF;
    --color-stone: #A69E94;
}
/* ═══════════════════════════════════════════════════════════════
   SECTION BLOCKS
   ═══════════════════════════════════════════════════════════════ */

.section {
    padding: 120px 50px;
    position: relative;
}

.section-container {
    max-width: 1100px;
    margin: 0 auto;
}

.section-narrow {
    max-width: 780px;
    margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION A: OPENING — WHY MSL
   ═══════════════════════════════════════════════════════════════ */

.why-msl-opening {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: 
        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(29, 47, 78, 0.5) 0%, transparent 55%),
        linear-gradient(180deg, var(--bg-void) 0%, rgba(26, 51, 66, 0.12) 100%);
    position: relative;
    overflow: hidden;
}

.why-msl-opening::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(219, 186, 92, 0.18) 0%, transparent 50%);
    pointer-events: none;
}

.opening-content {
    position: relative;
    z-index: 1;
}

.opening-content .headline-xl {
    margin-bottom: 35px;
}

.opening-content .body-text {
    margin: 0 auto;
    max-width: 720px;
    font-size: 16px;
    line-height: 1.85;
    color: #FFFFFF;
    text-align: left;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION B: PARTNERSHIP PROVEN
   ═══════════════════════════════════════════════════════════════ */

.partnership-section {
    background: var(--bg-abyss);
    border-top: 1px solid var(--border-subtle);
}

.partnership-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.partnership-left .headline-lg {
    font-style: italic;
    font-weight: 400;
    color: var(--color-ivory);
}

.partnership-left .headline-lg em {
    color: var(--msl-gold);
    font-style: italic;
}

.partnership-body p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--text-body);
    margin-bottom: 22px;
}

.partnership-body p:last-child {
    margin-bottom: 0;
}

.partnership-accent {
    margin-top: 40px;
    padding: 30px 35px;
    border-left: 2px solid var(--msl-gold);
    background: rgba(219, 186, 92, 0.04);
}

.partnership-accent p {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-ivory);
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION C: THE PRICING CATALYST
   ═══════════════════════════════════════════════════════════════ */

.pricing-section {
    background: var(--bg-midnight);
    border-top: 1px solid var(--border-subtle);
}

.pricing-intro {
    text-align: center;
    margin-bottom: 80px;
}

.pricing-intro .headline-xl {
    margin-bottom: 30px;
}

.pricing-intro .body-text {
    margin: 0 auto;
    text-align: center;
    color: #FFFFFF;
    font-size: 16px;
}

/* The Hamilton Hero Stat */
.hamilton-hero {
    position: relative;
    padding: 80px 60px;
    text-align: center;
    background: linear-gradient(135deg, rgba(219, 186, 92, 0.06) 0%, rgba(29, 47, 78, 0.3) 50%, rgba(219, 186, 92, 0.04) 100%);
    border: 1px solid var(--border-gold);
    border-radius: 4px;
    margin-bottom: 70px;
    overflow: hidden;
}

.hamilton-hero::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: var(--msl-gold);
}

.hamilton-hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: var(--msl-gold);
}

.hamilton-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.hamilton-project {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 400;
    color: var(--color-ivory);
    margin-bottom: 40px;
}

.hamilton-stat {
    margin-bottom: 15px;
}

.hamilton-number {
    font-family: var(--font-heading);
    font-size: clamp(72px, 10vw, 120px);
    font-weight: 400;
    color: var(--msl-gold);
    line-height: 1;
    letter-spacing: -2px;
}

.hamilton-unit {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 10px;
}

.hamilton-description {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 25px auto 0;
}

/* Hamilton Narrative */
.hamilton-narrative {
    max-width: 780px;
    margin: 0 auto;
}

.hamilton-narrative p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--text-body);
    margin-bottom: 22px;
}

.hamilton-narrative p:last-child {
    margin-bottom: 0;
}

.pricing-closing {
    text-align: center;
    margin-top: 70px;
    padding-top: 50px;
    border-top: 1px solid var(--border-subtle);
}

.pricing-closing-quote {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 400;
    font-style: italic;
    color: var(--msl-gold);
    line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION D: EXCLUSIVE COMMITMENT — MELINDA
   ═══════════════════════════════════════════════════════════════ */

.melinda-section {
    background: var(--bg-void);
    border-top: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
}

.melinda-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(270deg, rgba(196, 160, 168, 0.03) 0%, transparent 100%);
    pointer-events: none;
}

.melinda-intro {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

.melinda-intro .headline-xl {
    margin-bottom: 30px;
}

.melinda-intro .body-text {
    margin: 0 auto;
    font-size: 16px;
    text-align: center;
    color: #FFFFFF;
}

.melinda-offer {
    max-width: 780px;
    margin: 0 auto 70px;
    position: relative;
    z-index: 1;
}

.melinda-offer p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--text-body);
    margin-bottom: 22px;
}

/* Commitment Cards */
.commitment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.commitment-card {
    padding: 40px 35px;
    background: var(--bg-abyss);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.commitment-card:hover {
    border-color: var(--border-gold);
    transform: translateY(-3px);
}

.commitment-card-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    color: var(--msl-gold);
    margin-bottom: 15px;
}

.commitment-card-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-secondary);
}

.melinda-closing {
    text-align: center;
    margin-top: 70px;
    position: relative;
    z-index: 1;
}

.melinda-closing-text {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION E: FIVE REASONS
   ═══════════════════════════════════════════════════════════════ */

.reasons-section {
    background: var(--bg-abyss);
    border-top: 1px solid var(--border-subtle);
}

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

.reasons-list {
    max-width: 900px;
    margin: 0 auto;
}

.reason-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 40px;
    padding: 50px 0;
    border-bottom: 1px solid var(--border-subtle);
    align-items: start;
}

.reason-item:first-child {
    padding-top: 0;
}

.reason-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.reason-number {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 400;
    color: var(--msl-gold);
    line-height: 1;
    padding-top: 5px;
}

.reason-content h3 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 400;
    color: var(--text-heading);
    margin-bottom: 15px;
}

.reason-content p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 680px;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION F: CLOSING STATEMENT
   ═══════════════════════════════════════════════════════════════ */

.closing-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bg-void);
    border-top: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
}

.closing-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(219, 186, 92, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.closing-content {
    position: relative;
    z-index: 1;
}

.closing-quote {
    font-family: var(--font-heading);
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;
    color: var(--msl-gold);
    max-width: 700px;
    margin: 0 auto 40px;
}

.closing-divider {
    width: 60px;
    height: 1px;
    background: var(--msl-gold);
    margin: 0 auto 30px;
    opacity: 0.5;
}

.closing-name {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    color: var(--text-heading);
    margin-bottom: 8px;
}

.closing-title {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

.why-msl-visual .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1), transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.why-msl-visual .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.why-msl-visual .reveal-delay-1 { transition-delay: 0.15s; }
.why-msl-visual .reveal-delay-2 { transition-delay: 0.3s; }
.why-msl-visual .reveal-delay-3 { transition-delay: 0.45s; }
.why-msl-visual .reveal-delay-4 { transition-delay: 0.6s; }
.why-msl-visual .reveal-delay-5 { transition-delay: 0.75s; }
.why-msl-visual .reveal-delay-6 { transition-delay: 0.9s; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .partnership-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .commitment-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 80px 25px;
    }
    
    .reason-item {
        grid-template-columns: 50px 1fr;
        gap: 25px;
        padding: 35px 0;
    }
    
    .reason-number {
        font-size: 36px;
    }
    
    .hamilton-hero {
        padding: 50px 30px;
    }
    
    .hamilton-number {
        font-size: 72px;
    }
}

@media (max-width: 480px) {
    .reason-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .reason-number {
        font-size: 28px;
    }
}


/* =============================================
   SECTION 6: PARTNERSHIP TAB — REFINED STYLES
   Scoped under #section-partnership where needed
   ============================================= */

/* ── HERO OPENING ── */
.partnership-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bg-void);
    position: relative;
    padding-top: 60px;
}
.partnership-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(219, 186, 92, 0.03) 0%, transparent 70%);
    pointer-events: none;
}
#section-partnership .hero-content {
    position: relative;
    z-index: 2;
}
.hero-rule-top {
    width: 60px;
    height: 1px;
    background: var(--msl-gold);
    margin: 0 auto 40px;
}
.hero-preamble {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 42px);
    color: var(--text-heading);
    line-height: 1.3;
    margin-bottom: 12px;
}
.hero-closing {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.hero-closing-text {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(20px, 2.5vw, 26px);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ── WHAT WE ALREADY KNOW (SHAYHER) ── */
.shayher-section {
    background: var(--bg-void);
    padding: 140px 40px;
}
.shayher-statement {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(26px, 3.5vw, 38px);
    color: var(--text-heading);
    line-height: 1.3;
    margin-bottom: 12px;
    text-align: center;
}
.shayher-closing {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(22px, 3vw, 30px);
    color: var(--msl-gold);
    line-height: 1.4;
    margin-bottom: 8px;
    text-align: center;
}
.shayher-body {
    text-align: left;
}

/* ── COMMERCIAL LOGIC ── */
.commercial-section {
    background: var(--bg-midnight);
}

/* ── TWO PATHWAYS ── */
#section-partnership .pathways-section {
    background: var(--bg-abyss);
    padding-bottom: 80px;
}
.pathways-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 50px 0 40px;
}
.pathway-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 45px 35px;
    position: relative;
    transition: all 0.3s ease;
}
.pathway-card:hover {
    border-color: var(--border-gold);
    transform: translateY(-4px);
}
.pathway-card.highlighted {
    border-color: var(--border-gold);
    background: rgba(219, 186, 92, 0.03);
}
.pathway-number {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--msl-gold);
    margin-bottom: 16px;
}
.pathway-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 28px;
    color: var(--text-heading);
    margin-bottom: 16px;
    line-height: 1.2;
}
.pathway-rule {
    width: 30px;
    height: 1px;
    background: rgba(219, 186, 92, 0.25);
    margin-bottom: 20px;
}
.pathway-body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: 30px;
}
#section-partnership .fee-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 24px;
}
#section-partnership .fee-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}
#section-partnership .fee-value {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 20px;
    color: var(--msl-gold);
    font-style: italic;
}
#section-partnership .fee-panel + .fee-panel {
    margin-top: 12px;
}

/* Shared Constants Bar */
.constants-bar {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 28px 35px;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}
.constant-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.constant-diamond {
    width: 6px;
    height: 6px;
    background: var(--msl-gold);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.pathways-footer {
    text-align: center;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ── AGENT PORTAL PREVIEW ── */
.portal-section {
    background: var(--bg-deep);
    padding: 80px 40px;
}
.portal-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.portal-intro {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 550px;
    margin: 0 auto 40px;
    line-height: 1.7;
}
.portal-mockup {
    background: var(--bg-midnight);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
}
.portal-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-subtle);
}
.portal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}
.portal-dot:first-child { background: rgba(212, 100, 74, 0.5); }
.portal-dot:nth-child(2) { background: rgba(219, 186, 92, 0.5); }
.portal-dot:nth-child(3) { background: rgba(106, 168, 121, 0.5); }
.portal-url {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-faint, #5C5955);
    letter-spacing: 0.5px;
    margin-left: 10px;
}
.portal-body {
    padding: 35px;
}
.portal-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.portal-logo {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--text-heading);
}
.portal-logo-sub {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--msl-gold);
}
.portal-status {
    display: flex;
    align-items: center;
    gap: 8px;
}
.portal-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6AA879;
}
.portal-status-text {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.portal-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 25px;
}
.portal-field {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 14px 16px;
    text-align: left;
}
.portal-field-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-faint, #5C5955);
    margin-bottom: 6px;
}
.portal-field-value {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
}
.portal-field-placeholder {
    color: var(--text-faint, #5C5955);
}
.portal-btn-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.portal-btn {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: 8px;
    border: none;
    cursor: default;
}
.portal-btn-outline {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
}
.portal-btn-gold {
    background: var(--msl-gold);
    color: var(--bg-void);
}
.portal-caption {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 11px;
    color: var(--text-faint, #5C5955);
    margin-top: 20px;
    letter-spacing: 0.5px;
}

/* ── NETWORK ADVANTAGE ── */
.network-section {
    background: var(--bg-midnight);
}
.network-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 50px;
}
.network-diagram {
    position: relative;
}
.network-node {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    position: relative;
}
.network-node-primary {
    background: rgba(219, 186, 92, 0.06);
    border: 1px solid var(--border-gold);
    margin-bottom: 30px;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}
.network-node-label {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 22px;
    color: var(--text-heading);
}
.network-node-sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--msl-gold);
    margin-top: 4px;
}
.network-connector {
    width: 1px;
    height: 30px;
    background: rgba(219, 186, 92, 0.2);
    margin: 0 auto;
}
.network-branches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 30px;
}
.network-branch {
    text-align: center;
    padding: 16px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}
.network-branch-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    color: var(--text-secondary);
}
.network-branch-sub {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}
.network-result {
    margin-top: 30px;
    text-align: center;
}
.network-connector-split {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0 auto;
    position: relative;
    height: 30px;
}
.network-connector-split::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background: rgba(219, 186, 92, 0.15);
}
.network-result-box {
    display: inline-block;
    padding: 16px 28px;
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    background: rgba(219, 186, 92, 0.04);
}
.network-result-text {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--msl-gold);
}
.network-copy .body-text:last-of-type {
    margin-bottom: 40px;
}
.network-quote {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: 24px;
    color: var(--msl-gold);
    line-height: 1.4;
}

/* ── SCOPE OF SERVICE (PARTNERSHIP) ── */
#section-partnership .scope-section {
    background: var(--bg-abyss);
}
#section-partnership .scope-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
}
.scope-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 35px 28px;
    transition: all 0.3s ease;
}
.scope-card:hover {
    border-color: var(--border-gold);
    transform: translateY(-4px);
}
#section-partnership .scope-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(219, 186, 92, 0.06);
    border: 1px solid rgba(219, 186, 92, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}
#section-partnership .scope-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--msl-gold);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.scope-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 20px;
    color: var(--text-heading);
    margin-bottom: 12px;
}
.scope-text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.65;
}

/* ── ALIGNMENT STATEMENT ── */
.alignment-section {
    background: var(--bg-deep);
    padding: 100px 40px;
}
.alignment-panel {
    max-width: 800px;
    margin: 0 auto;
    border-top: 2px solid var(--msl-gold);
    background: rgba(219, 186, 92, 0.03);
    border-radius: 0 0 16px 16px;
    padding: 55px 50px;
    text-align: center;
}
.alignment-body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.75;
    margin-bottom: 30px;
}
.alignment-bold {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(20px, 2.5vw, 28px);
    color: var(--text-heading);
    line-height: 1.3;
    margin-bottom: 10px;
}

/* ── PARTNERSHIP TRANSITION ── */
#section-partnership .transition-bridge {
    max-width: 800px;
    margin: 0 auto;
    padding: 120px 40px;
    text-align: center;
    background: var(--bg-void);
}
#section-partnership .transition-text {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 42px);
    color: var(--text-heading);
    line-height: 1.3;
    margin-bottom: 12px;
}
#section-partnership .transition-text em {
    color: var(--msl-gold);
    font-style: italic;
}
#section-partnership .closing-rule {
    width: 60px;
    height: 1px;
    background: var(--msl-gold);
    margin: 0 auto 50px;
}

/* ── PARTNERSHIP RESPONSIVE ── */
@media (max-width: 900px) {
    .pathways-grid { grid-template-columns: 1fr; }
    .network-layout { grid-template-columns: 1fr; gap: 40px; }
    .network-branches { grid-template-columns: repeat(2, 1fr) !important; }
    #section-partnership .scope-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    .constants-bar { gap: 20px; }
    .alignment-panel { padding: 40px 30px; }
    .shayher-section { padding: 100px 25px; }
    .portal-fields { grid-template-columns: 1fr; }
    .portal-section { padding: 60px 25px; }
    .portal-body { padding: 20px; }
    .portal-btn-row { flex-direction: column; }
    .portal-btn { width: 100%; text-align: center; }
    #section-partnership .transition-bridge { padding: 60px 25px 80px; }
}

/* =============================================
   SECTION 7: NEXT STEPS TAB — REFINED
   All classes prefixed ns- to avoid conflicts
   ============================================= */

/* ── HERO OPENING ── */
.ns-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        radial-gradient(ellipse 60% 40% at 50% 30%, rgba(26, 51, 66, 0.4) 0%, transparent 55%),
        radial-gradient(ellipse 40% 30% at 70% 70%, rgba(212, 148, 58, 0.1) 0%, transparent 45%), var(--bg-void);
    position: relative;
    padding-top: 60px;
}
.ns-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(219, 186, 92, 0.03) 0%, transparent 70%);
    pointer-events: none;
}
.ns-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.ns-hero-rule {
    width: 60px;
    height: 1px;
    background: var(--msl-gold);
    margin: 0 auto 40px;
}
.ns-hero-statement {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 42px);
    color: var(--text-heading);
    line-height: 1.3;
    margin-bottom: 12px;
    text-align: center;
}
.ns-hero-body {
    max-width: 560px;
    margin: 0 auto;
}
.ns-hero-body .body-text {
    text-align: center;
    color: var(--text-secondary);
}

/* ── TIMELINE ── */
.ns-timeline {
    background: var(--bg-midnight);
    padding: 120px 40px;
}
.ns-timeline-container {
    max-width: 1000px;
    margin: 0 auto;
}
.ns-timeline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 60px;
    position: relative;
}
.ns-timeline-grid::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(to right, var(--msl-gold), rgba(219, 186, 92, 0.15));
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1, 0.3s ease;
}
.ns-timeline-grid.visible::before {
    transform: scaleX(1);
}
.ns-timeline-step {
    text-align: center;
    padding: 0 15px;
    position: relative;
}
.ns-step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--msl-gold);
    background: var(--bg-midnight);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 22px;
    color: var(--msl-gold);
    position: relative;
    z-index: 2;
}
.ns-step-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-heading);
    margin-bottom: 12px;
}
.ns-step-body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 200px;
    margin: 0 auto 18px;
}
.ns-step-timing {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    color: var(--msl-gold);
    letter-spacing: 1px;
}
.ns-timeline-step:last-child .ns-step-number {
    background: rgba(219, 186, 92, 0.08);
}

/* ── SIGNATURE BLOCK ── */
.ns-signature {
    background: var(--bg-void);
    padding: 140px 40px;
    text-align: center;
}
.ns-signature-inner {
    max-width: 900px;
    margin: 0 auto;
}
.ns-signature-block {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 50px;
    border: 1px solid var(--border-gold);
}
.ns-signature-image {
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}
.ns-signature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}
.ns-signature-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to top, var(--bg-void) 0%, rgba(8, 12, 18, 0.85) 40%, transparent 100%);
    pointer-events: none;
}
.ns-signature-details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 50px;
    text-align: left;
}
.ns-sig-name {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(26px, 3vw, 34px);
    color: var(--text-heading);
    margin-bottom: 4px;
}
.ns-sig-title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14px;
    color: var(--msl-gold);
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.ns-sig-company {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.ns-sig-divider {
    color: var(--text-faint, #5C5955);
    margin: 0 8px;
}
.ns-sig-rule {
    width: 30px;
    height: 1px;
    background: rgba(219, 186, 92, 0.3);
    margin-bottom: 20px;
}
.ns-sig-contact {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.ns-sig-contact a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}
.ns-sig-contact a:hover {
    color: var(--msl-gold);
}

/* ── CLOSING ── */
.ns-closing {
    background: var(--bg-void);
    padding: 0 40px 120px;
    text-align: center;
}
.ns-closing-inner {
    max-width: 600px;
    margin: 0 auto;
}
.ns-closing-tagline {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(22px, 3vw, 30px);
    color: var(--msl-gold);
    line-height: 1.4;
    margin-bottom: 40px;
}
.ns-closing-wordmark {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-faint, #5C5955);
}
.ns-closing-rule {
    width: 60px;
    height: 1px;
    background: var(--msl-gold);
    margin: 0 auto 60px;
}

/* ── NEXT STEPS RESPONSIVE ── */
@media (max-width: 900px) {
    .ns-timeline-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .ns-timeline-grid::before { display: none; }
    .ns-timeline-step {
        padding-left: 70px;
        text-align: left;
    }
    .ns-step-number {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
    }
    .ns-step-body {
        margin: 0 0 18px 0;
        max-width: none;
    }
    .ns-timeline { padding: 80px 25px; }
    .ns-signature { padding: 100px 25px; }
    .ns-signature-details { padding: 30px 25px; }
    .ns-signature-image { aspect-ratio: 16 / 9; }
}


/* =============================================
   MARKETING COMMAND CENTRE — INTEGRATED STYLES
   ============================================= */
.tech-marketing-cc { background: var(--bg-void, #080C12); }
.mkt-command-centre{height:85vh;position:relative;display:flex;flex-direction:column;border:1px solid var(--border-light);border-radius:12px;overflow:hidden;margin:0 20px}
.mkt-cc-inner{display:flex;flex:1;overflow:hidden}

/* Sidebar */
.mkt-sidebar{width:200px;background:var(--bg-void,#0A0E14);border-right:1px solid var(--border-subtle);padding:14px 0;flex-shrink:0;overflow-y:auto}
.mkt-nav-item{display:flex;align-items:center;gap:9px;padding:10px 16px;font-size:.68rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all 0.25s;border-left:3px solid transparent}
.mkt-nav-item:hover{color:var(--msl-stone);background:rgba(255,255,255,0.02)}
.mkt-nav-item.active{color:var(--msl-gold);background:rgba(219,186,92,0.04);border-left-color:var(--msl-gold);font-weight:600}
.mkt-nav-item svg{width:15px;height:15px;opacity:.6;flex-shrink:0}
.mkt-nav-item.active svg{opacity:1}
.mkt-nav-badge{margin-left:auto;padding:2px 6px;border-radius:8px;font-size:.52rem;font-weight:700;background:var(--bg-elevated);color:var(--text-muted)}
.mkt-nav-item.active .mkt-nav-badge{background:rgba(219,186,92,0.15);color:var(--msl-gold)}
.mkt-nav-divider{height:1px;background:rgba(255,255,255,0.04);margin:8px 16px}

/* Main */
.mkt-main{flex:1;overflow-y:auto;padding:0;height:100%}
.mkt-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg-void,#0A0E14);border-bottom:1px solid var(--border-subtle)}
.mkt-topbar-left{display:flex;align-items:center;gap:12px}
.mkt-topbar-title{font-family:var(--font-heading);font-size:1rem;color:var(--text-heading)}
.mkt-topbar-badge{padding:2px 8px;border-radius:12px;font-size:.55rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;background:rgba(219,186,92,0.1);color:var(--msl-gold);border:1px solid rgba(219,186,92,0.3)}
.mkt-topbar-right{display:flex;align-items:center;gap:14px}
.mkt-topbar-stat{text-align:right}
.mkt-topbar-stat-val{font-size:.82rem;font-weight:600;color:var(--text-heading)}
.mkt-topbar-stat-label{font-size:.5rem;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase}
.mkt-green{color:var(--semantic-positive)!important}
.mkt-gold{color:var(--msl-gold)!important}

/* Panels */
.mkt-panel{display:none;padding:24px;animation:mktFadeIn 0.3s ease}
.mkt-panel.active{display:block}
@keyframes mktFadeIn{from{opacity:0}to{opacity:1}}
.mkt-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.mkt-panel-title{font-family:var(--font-heading);font-size:1.4rem;font-weight:400;color:var(--text-heading)}
.mkt-panel-sub{font-size:.65rem;color:var(--text-muted);margin-top:3px}
.mkt-section-title{font-size:.56rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin:20px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border-subtle)}

/* KPI Grid */
.mkt-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:22px}
.mkt-kpi{background:var(--bg-deep);border:1px solid var(--border-light);border-radius:8px;padding:14px;position:relative;overflow:hidden;transition:all 0.3s}
.mkt-kpi:hover{border-color:rgba(219,186,92,0.3);transform:translateY(-1px)}
.mkt-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.mkt-kpi.k-gold::before{background:var(--msl-gold)}.mkt-kpi.k-green::before{background:var(--semantic-positive)}.mkt-kpi.k-blue::before{background:#42A5F5}.mkt-kpi.k-rose::before{background:var(--msl-rose)}.mkt-kpi.k-amber::before{background:#FFA726}.mkt-kpi.k-purple::before{background:#AB47BC}.mkt-kpi.k-teal::before{background:#26A69A}.mkt-kpi.k-red::before{background:#ef5350}
.mkt-kpi-val{font-family:var(--font-heading);font-size:1.45rem;font-weight:500;color:var(--text-heading);line-height:1.2}
.mkt-kpi.k-gold .mkt-kpi-val{color:var(--msl-gold)}.mkt-kpi.k-green .mkt-kpi-val{color:var(--semantic-positive)}.mkt-kpi.k-blue .mkt-kpi-val{color:var(--semantic-info)}.mkt-kpi.k-rose .mkt-kpi-val{color:var(--msl-rose)}.mkt-kpi.k-amber .mkt-kpi-val{color:var(--bb-amber)}
.mkt-kpi-label{font-size:.54rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-top:4px}
.mkt-kpi-trend{display:inline-flex;align-items:center;gap:2px;font-size:.56rem;font-weight:600;margin-top:3px;padding:1px 5px;border-radius:3px}
.mkt-kpi-trend.up{color:var(--semantic-positive);background:rgba(76,175,80,0.08)}.mkt-kpi-trend.down{color:var(--semantic-negative);background:rgba(239,83,80,0.08)}.mkt-kpi-trend.flat{color:var(--text-muted);background:rgba(255,255,255,0.03)}

/* Funnel */
.mkt-funnel-bars{display:flex;flex-direction:column;gap:5px;margin-bottom:22px}
.mkt-funnel-row{display:flex;align-items:center;gap:10px}
.mkt-funnel-label{width:90px;text-align:right;font-size:.64rem;color:var(--msl-stone);font-weight:500;flex-shrink:0}
.mkt-funnel-bar-wrap{flex:1;height:30px;background:var(--bg-surface);border-radius:5px;overflow:hidden}
.mkt-funnel-bar{height:100%;border-radius:5px;display:flex;align-items:center;padding:0 10px;font-size:.65rem;font-weight:600;color:#050709;transition:width 0.8s cubic-bezier(0.16,1,0.3,1);min-width:50px}
.mkt-fb1{background:linear-gradient(90deg,var(--msl-gold),#E5C97A)}.mkt-fb2{background:linear-gradient(90deg,#42A5F5,#64B5F6)}.mkt-fb3{background:linear-gradient(90deg,#26A69A,#4DB6AC)}.mkt-fb4{background:linear-gradient(90deg,#AB47BC,#CE93D8)}.mkt-fb5{background:linear-gradient(90deg,#4CAF50,#81C784)}.mkt-fb6{background:linear-gradient(90deg,#C4A44D,var(--msl-gold))}
.mkt-funnel-pct{font-size:.58rem;color:var(--msl-stone);width:45px;text-align:right;flex-shrink:0}
.mkt-funnel-drop{font-size:.52rem;color:var(--text-muted);width:55px;text-align:center;flex-shrink:0}

/* Charts */
.mkt-chart-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.mkt-chart-card{background:var(--bg-deep);border:1px solid var(--border-light);border-radius:8px;padding:18px}
.mkt-chart-card-title{font-size:.56rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.mkt-donut-wrap{display:flex;align-items:center;gap:18px}
.mkt-donut-legend{display:flex;flex-direction:column;gap:5px}
.mkt-donut-legend-item{display:flex;align-items:center;gap:6px;font-size:.65rem}
.mkt-donut-legend-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.mkt-donut-legend-val{color:var(--text-heading);font-weight:600;margin-left:auto;min-width:45px;text-align:right}

/* Campaign rows */
.mkt-camp-list{display:flex;flex-direction:column;gap:6px}
.mkt-camp-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:7px;transition:all 0.2s}
.mkt-camp-row:hover{border-color:rgba(219,186,92,0.3)}
.mkt-camp-rank{font-family:var(--font-heading);font-size:1rem;font-weight:500;color:var(--msl-gold);width:20px;text-align:center}
.mkt-camp-info{flex:1}
.mkt-camp-name{font-size:.72rem;font-weight:600;color:var(--text-heading)}
.mkt-camp-ch{font-size:.55rem;color:var(--text-muted);margin-top:1px}
.mkt-camp-metrics{display:flex;gap:16px;text-align:center}
.mkt-camp-mv{font-size:.75rem;font-weight:600;color:var(--text-heading)}
.mkt-camp-ml{font-size:.48rem;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase}

/* Insights */
.mkt-insight{background:var(--bg-deep);border:1px solid rgba(219,186,92,0.3);border-radius:8px;padding:14px 16px;margin-bottom:8px;display:flex;gap:10px;align-items:flex-start}
.mkt-insight-icon{font-size:.9rem;flex-shrink:0;margin-top:1px}
.mkt-insight-text{font-size:.7rem;color:var(--text-heading);line-height:1.55}
.mkt-insight-text strong{color:var(--msl-gold)}

/* Filter bar */
.mkt-filter-bar{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.mkt-filter-label{font-size:.54rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-right:4px}
.mkt-filter-btn{padding:4px 10px;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:14px;color:var(--msl-stone);font-family:var(--font-body);font-size:.62rem;font-weight:500;cursor:pointer;transition:all 0.25s}
.mkt-filter-btn:hover{border-color:var(--msl-gold);color:var(--text-heading)}
.mkt-filter-btn.active{background:rgba(219,186,92,0.12);border-color:var(--msl-gold);color:var(--msl-gold);font-weight:600}

/* Channel table */
.mkt-table-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--border-light);background:var(--bg-deep)}
.mkt-table{width:100%;border-collapse:collapse;font-size:.7rem}
.mkt-table thead th{background:var(--bg-surface);color:var(--msl-stone);font-size:.56rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:10px 8px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--border-visible)}
.mkt-gh{background:var(--bg-elevated)!important;color:var(--msl-gold)!important;font-size:.52rem!important;letter-spacing:1.5px;padding:6px 8px!important;border-bottom:1px solid rgba(219,186,92,0.3)!important}
.mkt-table tbody tr{border-bottom:1px solid var(--border-subtle);transition:all 0.2s}
.mkt-table tbody tr:hover{background:rgba(219,186,92,0.03)}
.mkt-table td{padding:9px 8px;text-align:center;color:var(--text-heading);white-space:nowrap}
.mkt-table td.mkt-ch-name{text-align:left;font-weight:600;color:var(--text-heading)}
.mkt-table td .mkt-ch-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
.mkt-table td.mkt-curr{font-weight:500;color:var(--text-heading)}
.mkt-table td.mkt-good{color:var(--semantic-positive)}.mkt-table td.mkt-warn{color:var(--bb-amber)}.mkt-table td.mkt-bad{color:#e57373}
.mkt-table tfoot td{padding:12px 8px;font-weight:700;color:var(--text-heading);background:var(--bg-surface);border-top:2px solid var(--msl-gold)}
.mkt-phase-badge{padding:2px 6px;border-radius:3px;font-size:.54rem;font-weight:600}
.mkt-phase-badge.pb-land{background:rgba(219,186,92,0.1);color:var(--msl-gold)}
.mkt-phase-badge.pb-apt{background:rgba(196,160,168,0.1);color:var(--msl-rose)}
.mkt-phase-badge.pb-both{background:rgba(66,165,245,0.1);color:var(--semantic-info)}

/* Campaign cards & Gantt */
.mkt-camp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:22px}
.mkt-camp-card{background:var(--bg-deep);border:1px solid var(--border-light);border-radius:8px;padding:16px;position:relative;transition:all 0.3s}
.mkt-camp-card:hover{border-color:rgba(219,186,92,0.3);transform:translateY(-1px)}
.mkt-camp-status{position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:12px;font-size:.5rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.mkt-camp-status.cs-active{background:rgba(76,175,80,0.12);color:var(--semantic-positive)}
.mkt-camp-status.cs-planned{background:rgba(66,165,245,0.12);color:var(--semantic-info)}
.mkt-camp-status.cs-completed{background:rgba(122,118,112,0.12);color:var(--text-muted)}
.mkt-camp-status.cs-paused{background:rgba(255,167,38,0.12);color:var(--bb-amber)}
.mkt-camp-card-name{font-family:var(--font-heading);font-size:1rem;color:var(--text-heading);margin-bottom:3px;padding-right:70px}
.mkt-camp-card-ch{font-size:.56rem;color:var(--text-muted);letter-spacing:.3px;text-transform:uppercase;margin-bottom:12px}
.mkt-camp-card-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.mkt-camp-card-mv{font-size:.82rem;font-weight:600;color:var(--text-heading);text-align:center}
.mkt-camp-card-ml{font-size:.46rem;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase;text-align:center}
.mkt-camp-bar{margin-top:12px;height:3px;background:var(--bg-surface);border-radius:2px;overflow:hidden}
.mkt-camp-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#C4A44D,var(--msl-gold))}
.mkt-gantt-wrap{overflow-x:auto;margin-bottom:22px}
.mkt-gantt{width:100%;border-collapse:collapse;min-width:800px}
.mkt-gantt th{font-size:.5rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);padding:6px 3px;text-align:center;border-bottom:1px solid var(--border-light)}
.mkt-gantt th.mkt-gantt-name{text-align:left;width:180px;padding-left:10px}
.mkt-gantt td{padding:4px 3px;border-bottom:1px solid var(--border-subtle)}
.mkt-gantt td.mkt-gantt-nm{text-align:left;font-size:.65rem;font-weight:500;color:var(--text-heading);padding-left:10px;white-space:nowrap}
.mkt-gantt-cell{height:18px;position:relative}
.mkt-gantt-bar{position:absolute;top:2px;height:14px;border-radius:3px;opacity:.85}
.mkt-gantt-bar:hover{opacity:1}
.mkt-gantt-bar.gb-a{background:linear-gradient(90deg,#C4A44D,var(--msl-gold))}.mkt-gantt-bar.gb-p{background:linear-gradient(90deg,#42A5F5,#64B5F6);opacity:.5}.mkt-gantt-bar.gb-c{background:var(--bg-elevated)}

/* Budget */
.mkt-budget-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.mkt-budget-card{background:var(--bg-deep);border:1px solid var(--border-light);border-radius:8px;padding:18px}
.mkt-budget-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-subtle)}
.mkt-budget-row:last-child{border-bottom:none}
.mkt-bcat-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.mkt-bcat-name{font-size:.7rem;font-weight:500;color:var(--text-heading);flex:1}
.mkt-bcat-plan{font-size:.66rem;color:var(--text-muted);width:70px;text-align:right}
.mkt-bcat-actual{font-size:.66rem;font-weight:600;color:var(--text-heading);width:70px;text-align:right}
.mkt-bcat-bar-wrap{width:80px;height:5px;background:var(--bg-surface);border-radius:3px;overflow:hidden}
.mkt-bcat-bar{height:100%;border-radius:3px}
.mkt-monthly-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.mkt-month{text-align:center}
.mkt-month-label{font-size:.42rem;color:var(--text-muted);letter-spacing:.3px;text-transform:uppercase}
.mkt-month-bars{height:55px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:1px}
.mkt-month-bar{width:55%;border-radius:2px 2px 0 0}
.mkt-month-bar.mb-plan{background:var(--bg-elevated);width:70%}
.mkt-month-bar.mb-actual{background:var(--msl-gold)}
.mkt-month-val{font-size:.42rem;color:var(--text-muted)}
.mkt-vendor-table{width:100%;border-collapse:collapse;font-size:.7rem}
.mkt-vendor-table thead th{background:var(--bg-surface);color:var(--msl-stone);font-size:.54rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:8px;text-align:left;border-bottom:1px solid var(--border-visible)}
.mkt-vendor-table tbody tr{border-bottom:1px solid var(--border-subtle)}
.mkt-vendor-table tbody tr:hover{background:rgba(219,186,92,0.02)}
.mkt-vendor-table td{padding:8px;color:var(--text-heading)}
.mkt-vendor-table td.mkt-vn{font-weight:600;color:var(--text-heading)}
.mkt-vstar{display:inline-block;width:9px;height:9px;vertical-align:middle}

/* Leads */
.mkt-funnel-detail{display:flex;flex-direction:column;align-items:center;gap:0}
.mkt-funnel-stage{text-align:center;padding:10px 16px;border-radius:8px;border:1px solid var(--border-light);background:var(--bg-deep);transition:all 0.3s}
.mkt-funnel-stage:hover{border-color:rgba(219,186,92,0.3)}
.mkt-fs-count{font-family:var(--font-heading);font-size:1.15rem;font-weight:500;color:var(--text-heading)}
.mkt-fs-name{font-size:.54rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);margin-top:1px}
.mkt-fs-rate{font-size:.5rem;color:var(--msl-gold);margin-top:2px}
.mkt-funnel-arrow{color:#4A4844;font-size:.6rem;padding:2px 0}
.mkt-funnel-arrow-rate{font-size:.5rem;color:var(--semantic-positive);margin-left:3px}
.mkt-heatmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:6px;margin-bottom:22px}
.mkt-heat-cell{padding:10px;background:var(--bg-deep);border:1px solid var(--border-subtle);border-radius:8px;text-align:center;transition:all 0.3s}
.mkt-heat-cell:hover{transform:translateY(-1px);border-color:rgba(219,186,92,0.3)}
.mkt-heat-suburb{font-size:.64rem;font-weight:600;color:var(--text-heading);margin-bottom:2px}
.mkt-heat-count{font-family:var(--font-heading);font-size:1rem;font-weight:500;color:var(--msl-gold)}
.mkt-heat-pct{font-size:.5rem;color:var(--text-muted)}
.mkt-db-row{display:flex;gap:18px;margin-bottom:22px}
.mkt-db-card{flex:1;background:var(--bg-deep);border:1px solid var(--border-light);border-radius:8px;padding:16px}

/* Content */
.mkt-content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:22px}
.mkt-content-card{background:var(--bg-deep);border:1px solid var(--border-light);border-radius:8px;padding:14px;transition:all 0.3s}
.mkt-content-card:hover{border-color:rgba(219,186,92,0.3)}
.mkt-cc-type{font-size:.5rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.mkt-cc-type.cct-photo{color:var(--semantic-info)}.mkt-cc-type.cct-video{color:#AB47BC}.mkt-cc-type.cct-render{color:var(--msl-gold)}.mkt-cc-type.cct-social{color:var(--semantic-positive)}.mkt-cc-type.cct-print{color:var(--msl-rose)}.mkt-cc-type.cct-collateral{color:#26A69A}.mkt-cc-type.cct-comp{color:var(--bb-amber)}
.mkt-stat-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border-subtle);font-size:.65rem}
.mkt-stat-row:last-child{border-bottom:none}
.mkt-stat-l{color:var(--text-muted)}.mkt-stat-v{color:var(--text-heading);font-weight:600}
.mkt-social-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:22px}
.mkt-scal-hdr{font-size:.48rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);text-align:center;padding:4px}
.mkt-scal-day{min-height:60px;background:var(--bg-deep);border:1px solid var(--border-subtle);border-radius:5px;padding:5px;font-size:.55rem}
.mkt-scal-day.mkt-today{border-color:var(--msl-gold)}
.mkt-scal-date{font-size:.48rem;color:var(--text-muted);margin-bottom:3px}
.mkt-scal-post{padding:2px 5px;border-radius:3px;font-size:.48rem;font-weight:600;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-scal-post.sp-ig{background:rgba(236,64,122,0.12);color:#EC407A}
.mkt-scal-post.sp-fb{background:rgba(66,165,245,0.12);color:var(--semantic-info)}
.mkt-scal-post.sp-li{background:rgba(92,107,192,0.12);color:#5C6BC0}
.mkt-scal-post.sp-tt{background:rgba(0,188,212,0.12);color:#00BCD4}

/* Scorecards */
.mkt-scorecard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:22px}
.mkt-scorecard{background:var(--bg-deep);border:1px solid var(--border-light);border-radius:8px;padding:14px;display:flex;align-items:center;gap:10px}
.mkt-sc-light{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.mkt-sc-light.sc-green{background:var(--semantic-positive);box-shadow:0 0 6px rgba(76,175,80,0.4)}
.mkt-sc-light.sc-amber{background:#FFA726;box-shadow:0 0 6px rgba(255,167,38,0.4)}
.mkt-sc-light.sc-red{background:#ef5350;box-shadow:0 0 6px rgba(239,83,80,0.4)}
.mkt-sc-info{flex:1}
.mkt-sc-metric{font-size:.68rem;font-weight:600;color:var(--text-heading)}
.mkt-sc-detail{font-size:.55rem;color:var(--text-muted);margin-top:1px}
.mkt-sc-val{font-family:var(--font-heading);font-size:1rem;font-weight:500;color:var(--text-heading)}

@media(max-width:1024px){
    .mkt-sidebar{width:50px;overflow:hidden}
    .mkt-nav-item span,.mkt-nav-badge{display:none}
    .mkt-nav-item{justify-content:center;padding:10px 6px}
    .mkt-chart-row,.mkt-budget-grid{grid-template-columns:1fr}
    .mkt-topbar{flex-direction:column;gap:8px}
}

/* =============================================
   TECHNOLOGY OVERVIEW — TAB SYSTEM
   ============================================= */
.tech-overview-section {
    background: var(--bg-void, #080C12);
    padding: var(--space-2xl, 80px) var(--space-xl, 60px) 0;
}

.tech-overview-intro-centred {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: 48px;
}

.tech-overview-intro-centred .headline-xl {
    margin-bottom: 28px;
}

.tech-overview-intro-centred .intro-text {
    color: var(--text-secondary);
    margin: 0 auto;
    max-width: 560px;
}

.tech-tabbar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 48px;
}

.tech-tabbar-hint {
    text-align: center;
    font-size: 13px;
    color: var(--msl-gold);
    letter-spacing: 4px;
    margin-bottom: 20px;
}

.tech-tab {
    padding: 13px 26px;
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--msl-gold);
    background: transparent;
    border: 1.5px solid rgba(219,186,92,0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tech-tab:hover:not(.active) {
    background: rgba(219,186,92,0.08);
    border-color: var(--msl-gold);
    box-shadow: 0 0 20px rgba(219,186,92,0.15);
}

.tech-tab.active {
    color: #0A0C10;
    background: var(--msl-gold);
    border-color: var(--msl-gold);
    box-shadow: 0 0 24px rgba(219,186,92,0.25);
}

.tech-tab-panel {
    display: none;
}

.tech-tab-panel.active {
    display: block;
}

/* Technology Thumbnail Gallery */
.tech-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 32px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.tech-thumb {
    cursor: pointer;
    border: 1px solid var(--border-card);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: var(--bg-deep);
}
.tech-thumb:hover {
    border-color: rgba(219,186,92,0.3);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lifted);
}
.tech-thumb.active {
    border-color: var(--msl-gold);
    box-shadow: 0 0 20px rgba(219,186,92,0.1);
}
.tech-thumb-preview {
    height: 120px;
    padding: 6px;
    overflow: hidden;
}
.tech-thumb-info {
    padding: 10px 12px;
    border-top: 1px solid var(--border-subtle);
}
.tech-thumb-info h4 {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-heading);
    margin-bottom: 2px;
}
.tech-thumb-info p {
    font-size: 8px;
    font-weight: 400;
    color: var(--text-tertiary);
    letter-spacing: 0.3px;
}

/* ── Mini Masterplan ── */
.mini-masterplan {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-void);
    border: 1px solid rgba(219,186,92,0.1);
}
.mini-mp-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    background: var(--bg-midnight);
    border-bottom: 1px solid rgba(219,186,92,0.1);
}
.mini-mp-search { flex:1; height:4px; background:var(--bg-deep); border-radius:2px; }
.mini-mp-btn { width:16px; height:4px; background:var(--bg-deep); border-radius:2px; }
.mini-mp-btn.gold { background: rgba(219,186,92,0.4); }
.mini-mp-body {
    flex:1;
    display: flex;
    gap: 2px;
    padding: 3px;
    min-height: 0;
}
.mini-mp-sidebar {
    width: 28px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2px;
    background: var(--bg-midnight);
    border-radius: 2px;
}
.mini-mp-filter { height:4px; background:var(--bg-deep); border-radius:1px; }
.mini-mp-count { font-size:6px; color:var(--msl-gold); text-align:center; font-weight:700; }
.mini-mp-count.gold { color: var(--msl-gold); }
.mini-mp-rows { display:flex; flex-direction:column; gap:1px; }
.mini-mp-rows span { height:2px; background:var(--bg-deep); border-radius:1px; }
.mini-mp-map {
    flex:1;
    background: var(--bg-deep);
    border-radius: 2px;
    position: relative;
    padding: 4px;
}
.mini-mp-zone {
    position: absolute;
    border-radius: 1px;
}
.mini-mp-zone.apt { top:8px; left:8px; width:16px; height:28px; background:var(--color-navy); border:1px solid rgba(219,186,92,0.2); }
.mini-mp-zone.retail { top:8px; left:26px; width:12px; height:20px; background:rgba(196,171,138,0.4); }
.mini-mp-zone.future { top:8px; right:8px; width:20px; height:16px; background:var(--bg-midnight); }
.mini-mp-zone.future.lg { top:32px; left:8px; width:40px; height:12px; }
.mini-mp-lots {
    position: absolute;
    bottom: 18px;
    right: 4px;
    display: flex;
    gap: 1px;
}
.mini-mp-lots span {
    width: 4px;
    height: 4px;
    background: rgba(76,175,80,0.5);
    border-radius: 0.5px;
}
.mini-mp-lots.row2 {
    bottom: 12px;
}
.mini-mp-info {
    width: 32px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2px;
}
.mini-mp-info-title { height:4px; background:var(--bg-midnight); border-radius:1px; }
.mini-mp-info-stat { height:8px; background:var(--bg-midnight); border-radius:2px; border:1px solid rgba(219,186,92,0.08); }
.mini-mp-footer {
    display: flex;
    gap: 6px;
    padding: 3px 5px;
    background: var(--bg-midnight);
    border-top: 1px solid rgba(219,186,92,0.1);
    justify-content: center;
}
.mini-mp-footer span { width:14px; height:3px; background:var(--bg-deep); border-radius:1px; }
.mini-mp-footer span.gold { background: rgba(219,186,92,0.4); }

/* ── Mini Command Centre (shared) ── */
.mini-cc {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-void);
    border: 1px solid rgba(219,186,92,0.1);
}
.mini-cc-titlebar {
    display: flex;
    align-items: center;
    padding: 3px 5px;
    background: var(--bg-midnight);
    border-bottom: 1px solid rgba(219,186,92,0.1);
    gap: 4px;
}
.mini-cc-dots { display:flex; gap:2px; }
.mini-cc-dots i { width:3px; height:3px; border-radius:50%; }
.mini-cc-dots i:nth-child(1) { background:#e74c3c; }
.mini-cc-dots i:nth-child(2) { background:#f39c12; }
.mini-cc-dots i:nth-child(3) { background:#2ecc71; }
.mini-cc-title { flex:1; height:3px; background:var(--bg-deep); border-radius:1px; }
.mini-cc-live { width:4px; height:4px; border-radius:50%; background:#2ecc71; }
.mini-cc-live.rose { background: var(--msl-rose); }
.mini-cc-body {
    flex:1;
    display: flex;
    min-height: 0;
}
.mini-cc-sidebar {
    width: 22px;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--bg-midnight);
    border-right: 1px solid rgba(219,186,92,0.06);
}
.mini-cc-nav { height:3px; border-radius:1px; background:var(--bg-deep); }
.mini-cc-nav.active { background:rgba(219,186,92,0.3); border-left:1px solid var(--msl-gold); }
.mini-cc-content {
    flex:1;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mini-cc-table-head { height:3px; background:var(--bg-deep); border-radius:1px; margin-bottom:1px; }
.mini-cc-table-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 1px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.mini-cc-table-row .name { width:24px; height:2px; background:rgba(255,255,255,0.15); border-radius:1px; }
.mini-cc-table-row .badge { width:10px; height:3px; border-radius:1px; }
.mini-cc-table-row .badge.green { background:rgba(46,204,113,0.4); }
.mini-cc-table-row .badge.blue { background:rgba(52,152,219,0.4); }
.mini-cc-table-row .badge.purple { background:rgba(155,89,182,0.4); }
.mini-cc-table-row .val { flex:1; height:2px; background:rgba(255,255,255,0.08); border-radius:1px; }
.mini-cc-table-row .val.gold { background:rgba(219,186,92,0.4); }
.mini-cc-kpis {
    display: flex;
    gap: 3px;
    margin-top: auto;
}
.mini-cc-kpis span {
    flex:1;
    height: 10px;
    background: var(--bg-deep);
    border-radius: 2px;
    border: 1px solid rgba(219,186,92,0.06);
}
.mini-cc-kpis.four span { height:8px; }

/* ── Mini Marketing Chart ── */
.mini-cc-chart-area {
    flex: 1;
    position: relative;
    padding: 2px;
}
.mini-chart-line {
    position: absolute;
    top: 10px;
    left: 4px;
    right: 4px;
    height: 1px;
    background: linear-gradient(90deg, rgba(219,186,92,0.1), rgba(219,186,92,0.4), rgba(219,186,92,0.2));
    border-radius: 1px;
}
.mini-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100%;
    padding-top: 14px;
}
.mini-chart-bars span {
    flex: 1;
    background: rgba(219,186,92,0.25);
    border-radius: 1px 1px 0 0;
    min-height: 2px;
}

/* ── Mini Buyer Intelligence ── */
.mini-bi-kpis {
    display: flex;
    gap: 2px;
    margin-bottom: 3px;
}
.mini-bi-kpis span {
    flex:1;
    height:8px;
    background: var(--bg-deep);
    border-radius: 2px;
    border: 1px solid rgba(219,186,92,0.06);
}
.mini-bi-panels {
    flex:1;
    display: flex;
    gap: 2px;
}
.mini-bi-panel {
    flex:1;
    background: var(--bg-midnight);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
}
.mini-bi-donut {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(219,186,92,0.3);
    border-top-color: rgba(52,152,219,0.4);
    border-right-color: rgba(46,204,113,0.4);
}
.mini-bi-bars {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mini-bi-bars span {
    height: 3px;
    background: rgba(219,186,92,0.3);
    border-radius: 1px;
}
.mini-bi-map {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 60% 50%, rgba(219,186,92,0.15) 0%, rgba(52,152,219,0.08) 40%, transparent 70%);
    border-radius: 2px;
}

/* ── Mini Pricing Intelligence ── */
.mini-pi-header {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
}
.mini-pi-total { flex:1; height:6px; background:var(--bg-deep); border-radius:2px; }
.mini-pi-total.gold { border:1px solid rgba(219,186,92,0.2); }
.mini-pi-btn { width:12px; height:5px; background:var(--bg-deep); border-radius:2px; }
.mini-pi-table { flex:1; display:flex; flex-direction:column; gap:1px; }
.mini-pi-row { display:flex; gap:2px; align-items:center; }
.mini-pi-row.head { height:3px; background:var(--bg-deep); border-radius:1px; margin-bottom:1px; }
.mini-pi-row span { flex:1; height:2px; background:rgba(255,255,255,0.08); border-radius:1px; }
.mini-pi-row span.gold { background:rgba(219,186,92,0.35); }

@media (max-width: 768px) {
    .tech-thumbnails {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Remove old sub-nav styles */
.tech-subnav,
.tech-subnav-item,
.subnav-number,
.subnav-divider,
.subnav-label,
.tech-overview-layout,
.tech-overview-intro {
    display: none !important;
}

/* =============================================
   INTERACTIVE MASTERPLAN — INTEGRATED STYLES
   ============================================= */
.tech-masterplan-section { background: var(--bg-void, #080C12); }
.mp-container {
    position: relative;
    height: 95vh;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    margin: 0 20px;
    background: var(--bg-void, #080C12);
}
.mp-container * { box-sizing: border-box; }
        /* ═══════════════════════════════════════════════════════════════════
           MSL DARK THEME — DESIGN & STYLING
           Navy + Gold + Rose + Stone + Ivory
           ═══════════════════════════════════════════════════════════════════ */
        
        /* :root removed - uses base variables */
        
        /* ═══════════════════════════════════════════════════════════════════
           BASE STYLES
           ═══════════════════════════════════════════════════════════════════ */
        
        /* reset removed - uses base */
        
        /* body styles removed - uses base */
        
        /* ═══════════════════════════════════════════════════════════════════
           2.1 BRANDED HEADER
           ═══════════════════════════════════════════════════════════════════ */
        
        .masterplan-header {
            background: linear-gradient(180deg, var(--bg-void) 0%, var(--bg-abyss) 100%);
            padding: 20px 30px 16px;
            border-bottom: 1px solid var(--gold-20);
        }
        
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }
        
        .brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        
        .brand-logo {
            width: 44px;
            height: 44px;
            background: var(--msl-gold);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-heading);
            font-size: 20px;
            font-weight: 600;
            color: var(--msl-navy);
        }
        
        .brand-text {
            display: flex;
            flex-direction: column;
        }
        
        .brand-name {
            font-family: var(--font-heading);
            font-size: 11px;
            font-weight: 500;
            color: var(--msl-gold);
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        
        .brand-project {
            font-family: var(--font-heading);
            font-size: 22px;
            font-weight: 400;
            color: var(--text-heading);
            letter-spacing: 1px;
        }
        
        .header-meta {
            text-align: right;
            font-size: 10px;
            color: var(--text-secondary);
        }
        
        .header-meta span {
            display: block;
            margin-bottom: 3px;
        }
        
        .header-meta .status {
            display: inline-block;
            color: var(--msl-gold);
            font-weight: 600;
            background: var(--gold-10);
            padding: 3px 10px;
            border-radius: 12px;
            margin-top: 4px;
        }
        
        .header-title {
            text-align: center;
        }
        
        .header-title h1 {
            font-family: var(--font-heading);
            font-size: 28px;
            font-weight: 400;
            color: var(--text-heading);
            letter-spacing: 3px;
            margin-bottom: 4px;
        }
        
        .header-title p {
            font-size: 12px;
            color: var(--text-secondary);
            letter-spacing: 1px;
        }
        
        /* ═══════════════════════════════════════════════════════════════════
           2.2 THREE-PANEL LAYOUT CONTAINER
           ═══════════════════════════════════════════════════════════════════ */
        
        .masterplan-container {
            display: flex;
            gap: 0;
            height: calc(100vh - 100px);
        }
        
        /* ═══════════════════════════════════════════════════════════════════
           2.3 LEGEND SIDEBAR (LEFT)
           ═══════════════════════════════════════════════════════════════════ */
        
        .legend-sidebar {
            width: 260px;
            background: var(--bg-midnight);
            border-right: 1px solid var(--gold-10);
            padding: 20px;
            flex-shrink: 0;
            overflow-y: auto;
        }
        
        .legend-section {
            margin-bottom: 24px;
        }
        
        .legend-section:last-child {
            margin-bottom: 0;
        }
        
        .legend-title {
            font-family: var(--font-heading);
            font-size: 13px;
            font-weight: 500;
            color: var(--msl-gold);
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 12px;
            padding-bottom: 6px;
            border-bottom: 1px solid var(--gold-20);
        }
        
        .legend-items {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .legend-item:hover {
            background: var(--gold-10);
        }
        
        .legend-item.active {
            background: var(--gold-20);
        }
        
        .legend-swatch {
            width: 18px;
            height: 18px;
            border-radius: 3px;
            flex-shrink: 0;
            border: 1px solid var(--border-visible);
        }
        
        .legend-label {
            flex: 1;
        }
        
        .legend-label-name {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-heading);
            margin-bottom: 1px;
        }
        
        .legend-label-meta {
            font-size: 10px;
            color: var(--text-secondary);
        }
        
        /* Lot Status Legend */
        .status-legend {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--gold-10);
        }
        
        .status-legend-title {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        
        .status-items {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .status-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 10px;
            color: var(--text-secondary);
        }
        
        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 2px;
        }
        
        .status-dot.available { 
            background: var(--lot-available); 
            border: 1px solid var(--lot-available-stroke); 
        }
        .status-dot.sold { 
            background: var(--lot-sold); 
            border: 1px solid var(--msl-rose); 
        }
        .status-dot.held { 
            background: var(--lot-held); 
            border: 1px solid var(--color-stone); 
        }
        
        /* ═══════════════════════════════════════════════════════════════════
           2.4 MAP AREA (CENTER)
           ═══════════════════════════════════════════════════════════════════ */
        
        .map-area {
            flex: 1;
            background: var(--bg-deep);
            position: relative;
            overflow: hidden;
        }
        
        .map-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .map-container {
            position: relative;
            width: 100%;
            max-width: 900px;
            aspect-ratio: 750 / 525;
            background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-surface) 50%, var(--bg-elevated) 100%);
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--gold-20);
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
        }
        
        /* Zone Styles */
        .zone {
            position: absolute; 
            cursor: pointer; 
            transition: all 0.3s ease;
            display: flex; 
            align-items: center; 
            justify-content: center;
            font-family: var(--font-body);
            font-size: 8px; 
            font-weight: 600; 
            color: var(--text-heading);
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
            border: 1px solid var(--lot-available-stroke);
        }
        
        .zone:hover {
            transform: scale(1.05); 
            z-index: 100;
            box-shadow: 0 0 20px var(--gold-40); 
            border-color: var(--lot-hover-stroke);
            background: var(--lot-hover) !important;
        }
        
        .zone.selected {
            box-shadow: 0 0 0 3px var(--msl-gold), 0 0 20px var(--gold-60); 
            z-index: 101;
            border-color: var(--lot-selected-stroke);
        }
        
        /* Zone Type Colors */
        .apartment { background: var(--stage-current); }
        .apartment.msl-navy { background: var(--msl-navy) !important; }
        .shopping { background: var(--stage-retail); }
        .land { background: var(--stage-land); }
        .townhome { background: var(--stage-future); border: none; }
        .future { background: var(--stage-future) !important; }
        
        /* ═══════════════════════════════════════════════════════════════════
           2.5 INFO PANEL (RIGHT SIDEBAR)
           ═══════════════════════════════════════════════════════════════════ */
        
        .info-panel {
            width: 300px;
            background: var(--bg-midnight);
            border-left: 1px solid var(--gold-10);
            padding: 20px;
            flex-shrink: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        
        .info-header {
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--gold-20);
        }
        
        .info-title {
            font-family: var(--font-heading);
            font-size: 20px;
            font-weight: 400;
            color: var(--text-heading);
            margin-bottom: 4px;
        }
        
        .info-subtitle {
            font-size: 11px;
            color: var(--msl-gold);
            letter-spacing: 1px;
        }
        
        /* Stats Grid */
        .info-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 16px;
        }
        
        .stat-card {
            background: var(--gold-05);
            border: 1px solid var(--gold-10);
            border-radius: 8px;
            padding: 12px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .stat-card:hover {
            border-color: var(--gold-20);
            background: var(--gold-10);
        }
        
        .stat-value {
            font-family: var(--font-heading);
            font-size: 24px;
            font-weight: 500;
            color: var(--msl-gold);
            margin-bottom: 2px;
        }
        
        .stat-label {
            font-size: 9px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Lot Detail Card */
        .lot-detail-card {
            background: var(--gold-10);
            border: 1px solid var(--gold-20);
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 16px;
            display: none;
        }
        
        .lot-detail-card.visible {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .lot-detail-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }
        
        .lot-detail-name {
            font-family: var(--font-heading);
            font-size: 22px;
            font-weight: 500;
            color: var(--msl-gold);
        }
        
        .lot-detail-type {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-secondary);
            background: rgba(255, 255, 255, 0.1);
            padding: 4px 10px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .lot-detail-specs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        
        .lot-spec {
            background: rgba(0, 0, 0, 0.2);
            padding: 10px;
            border-radius: 4px;
        }
        
        .lot-spec-label {
            font-size: 9px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 4px;
        }
        
        .lot-spec-value {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-heading);
        }
        
        /* Collapsible Section */
        .collapsible-section {
            border-top: 1px solid var(--gold-10);
            padding-top: 16px;
            margin-top: 16px;
        }
        
        .collapsible-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 8px 0;
        }
        
        .collapsible-header:hover .collapsible-title {
            color: var(--msl-gold);
        }
        
        .collapsible-title {
            font-family: var(--font-heading);
            font-size: 13px;
            font-weight: 500;
            color: var(--text-heading);
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: color 0.3s ease;
        }
        
        .collapsible-toggle {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            transition: transform 0.3s ease;
            font-size: 12px;
        }
        
        .collapsible-toggle.collapsed {
            transform: rotate(-90deg);
        }
        
        .collapsible-content {
            padding-top: 12px;
            overflow: hidden;
            max-height: 500px;
            transition: max-height 0.3s ease, opacity 0.3s ease;
        }
        
        .collapsible-content.collapsed {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
        }
        
        /* Default Message */
        .info-default {
            text-align: center;
            padding: 30px 20px;
            color: var(--text-secondary);
        }
        
        .info-default-icon {
            font-size: 40px;
            margin-bottom: 12px;
            opacity: 0.5;
        }
        
        .info-default-text {
            font-size: 13px;
            line-height: 1.6;
        }

        /* === V4 INTERACTIVE FEATURES === */
        #lotTooltip { position: absolute; z-index: 9999; pointer-events: none; opacity: 0; background: var(--bg-deep); border: 1px solid var(--msl-gold); border-radius: 8px; padding: 12px; color: var(--text-heading); font-size: 12px; min-width: 160px; }
        #lotTooltip.visible { opacity: 1; }
        .tt-header { font-size: 16px; color: var(--msl-gold); margin-bottom: 8px; border-bottom: 1px solid var(--border-light); padding-bottom: 6px; }
        .tt-row { display: flex; justify-content: space-between; margin: 4px 0; }
        .tt-label { color: var(--text-tertiary); }
        .tt-val { color: var(--text-heading); }
        .tt-price { color: var(--msl-gold); }
        #multiPanel { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--bg-deep); border: 1px solid var(--msl-gold); border-radius: 8px; padding: 12px 20px; color: var(--text-heading); display: none; gap: 20px; align-items: center; z-index: 998; }
        #multiPanel.visible { display: flex; }
        .mp-stat { text-align: center; padding: 0 15px; border-right: 1px solid var(--border-light); }
        .mp-stat:last-of-type { border-right: none; }
        .mp-val { font-size: 20px; color: var(--msl-gold); }
        .mp-label { font-size: 10px; color: var(--text-tertiary); }
        .mp-btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; margin-left: 10px; }
        .mp-export { background: var(--msl-gold); color: var(--bg-deep); }
        .mp-clear { background: var(--bg-surface); color: var(--text-heading); }
        .v4-multi-selected { box-shadow: 0 0 0 2px #d4af37 !important; }
        .v4-status-dot { position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; }
        .v4-dot-sold { background: var(--semantic-negative); }
        .v4-dot-held { background: #F97316; }


        /* Search Box */
        #searchBox { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 997; display: flex; gap: 8px; }
        #lotSearchInput { padding: 10px 16px; width: 200px; background: var(--bg-deep); border: 1px solid var(--msl-gold); border-radius: 8px; color: var(--text-heading); font-size: 14px; outline: none; }
        #lotSearchInput::placeholder { color: #666; }
        #lotSearchInput:focus { box-shadow: 0 0 0 2px rgba(212,175,55,0.3); }
        #searchBtn { padding: 10px 16px; background: var(--msl-gold); color: var(--bg-deep); border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
        .v4-search-highlight { animation: searchPulse 0.3s ease 3; box-shadow: 0 0 0 3px #4CAF50, 0 0 20px rgba(76,175,80,0.6) !important; }
        @keyframes searchPulse { 0%, 100% { box-shadow: 0 0 0 3px #4CAF50, 0 0 20px rgba(76,175,80,0.6); } 50% { box-shadow: 0 0 0 5px #4CAF50, 0 0 30px rgba(76,175,80,0.8); } }


        /* Filter Panel */
        #filterPanel { position: absolute; top: 80px; left: 20px; z-index: 996; background: var(--bg-deep); border: 1px solid var(--msl-gold); border-radius: 8px; padding: 16px; width: 220px; }
        .fp-title { font-size: 14px; color: var(--msl-gold); margin-bottom: 12px; font-weight: 600; }
        .fp-group { margin-bottom: 14px; }
        .fp-label { font-size: 11px; color: var(--text-tertiary); margin-bottom: 6px; display: block; }
        .fp-row { display: flex; gap: 8px; align-items: center; }
        .fp-input { flex: 1; padding: 8px; background: var(--bg-abyss); border: 1px solid var(--border-light); border-radius: 4px; color: var(--text-heading); font-size: 12px; width: 70px; }
        .fp-sep { color: #666; font-size: 11px; }
        .fp-checks { display: flex; flex-wrap: wrap; gap: 6px; }
        .fp-check { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--bg-abyss); border: 1px solid var(--border-light); border-radius: 4px; cursor: pointer; font-size: 11px; color: #ccc; }
        .fp-check.active { background: rgba(212,175,55,0.2); border-color: var(--msl-gold); color: var(--msl-gold); }
        .fp-actions { display: flex; gap: 8px; margin-top: 14px; }
        .fp-btn { flex: 1; padding: 10px; border: none; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; }
        .fp-apply { background: var(--msl-gold); color: var(--bg-deep); }
        .fp-reset { background: var(--bg-surface); color: var(--text-heading); }
        .fp-results { margin-top: 12px; text-align: center; padding: 10px; background: rgba(212,175,55,0.1); border-radius: 4px; }
        .fp-results-count { font-size: 24px; color: var(--msl-gold); font-weight: 600; }
        .fp-results-label { font-size: 10px; color: var(--text-tertiary); }
        .v6-filtered-out { opacity: 0.15 !important; }


        /* Zoom Controls */
        #zoomControls { position: absolute; bottom: 20px; left: 20px; z-index: 996; display: flex; flex-direction: column; gap: 6px; }
        .zoom-btn { width: 40px; height: 40px; background: var(--bg-deep); border: 1px solid var(--msl-gold); border-radius: 8px; color: var(--msl-gold); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .zoom-btn:hover { background: rgba(212,175,55,0.2); }
        #zoomLevel { text-align: center; font-size: 11px; color: var(--text-tertiary); background: var(--bg-deep); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border-light); }
        .map-container { transform-origin: center center; transition: transform 0.3s ease; }


        /* Keyboard Navigation */
        .v8-keyboard-focus { box-shadow: 0 0 0 3px #42A5F5, 0 0 15px rgba(66,165,245,0.5) !important; z-index: 101; }
        #keyboardHint { position: absolute; bottom: 80px; right: 20px; z-index: 996; background: var(--bg-deep); border: 1px solid var(--border-light); border-radius: 8px; padding: 12px 16px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
        #keyboardHint.visible { opacity: 1; }
        .kh-title { font-size: 10px; color: var(--msl-gold); margin-bottom: 8px; font-weight: 600; }
        .kh-row { font-size: 11px; color: var(--text-tertiary); margin: 4px 0; }
        .kh-row kbd { background: rgba(212,175,55,0.2); color: var(--msl-gold); padding: 2px 6px; border-radius: 3px; font-size: 10px; margin-right: 6px; }


        /* Price Editing */
        #priceEditPanel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; background: var(--bg-deep); border: 2px solid var(--msl-gold); border-radius: 12px; padding: 24px; width: 280px; display: none; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
        #priceEditPanel.visible { display: block; }
        .pe-title { font-size: 18px; color: var(--msl-gold); margin-bottom: 16px; font-weight: 600; }
        .pe-current { font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; }
        .pe-current span { color: var(--text-heading); }
        .pe-input { width: 100%; padding: 12px; background: var(--bg-abyss); border: 1px solid var(--msl-gold); border-radius: 8px; color: var(--msl-gold); font-size: 18px; font-weight: 600; outline: none; margin-bottom: 16px; box-sizing: border-box; }
        .pe-actions { display: flex; gap: 10px; }
        .pe-btn { flex: 1; padding: 12px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
        .pe-save { background: var(--msl-gold); color: var(--bg-deep); }
        .pe-cancel { background: var(--bg-surface); color: var(--text-heading); }
        #priceOverlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 999; display: none; }
        #priceOverlay.visible { display: block; }
        .v9-price-modified { position: relative; }
        .v9-price-modified::before { content: '✎'; position: absolute; bottom: 1px; left: 1px; font-size: 8px; color: var(--msl-gold); }
        #toast { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); background: var(--bg-deep); border: 1px solid var(--semantic-positive); border-radius: 8px; padding: 12px 24px; color: var(--semantic-positive); font-size: 13px; z-index: 1001; display: none; }
        #toast.visible { display: block; }


        /* V10 Enhancements */
        #totalValueBar { position: absolute; top: 20px; right: 20px; z-index: 996; background: var(--bg-deep); border: 1px solid var(--msl-gold); border-radius: 8px; padding: 12px 20px; display: flex; gap: 20px; align-items: center; }
        .tv-stat { text-align: center; }
        .tv-val { font-size: 20px; color: var(--msl-gold); font-weight: 600; }
        .tv-label { font-size: 10px; color: var(--text-tertiary); }
        #exportAllBtn { padding: 8px 16px; background: var(--msl-gold); color: var(--bg-deep); border: none; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; }
        #resetPricesBtn { padding: 8px 16px; background: var(--bg-surface); color: var(--text-heading); border: none; border-radius: 4px; font-size: 12px; cursor: pointer; }


        /* === V12: Apartment Modal === */
        .apt-modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; display: none; align-items: center; justify-content: center; }
        .apt-modal-overlay.visible { display: flex; }
        .apt-modal { background: var(--bg-deep); border: 1px solid var(--gold-40); border-radius: 12px; width: 90%; max-width: 1000px; max-height: 95vh; overflow: hidden; display: flex; flex-direction: column; }
        .apt-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--gold-20); background: var(--bg-surface); }
        .apt-modal-title { font-family: var(--font-heading); font-size: 24px; color: var(--msl-gold); }
        .apt-modal-subtitle { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
        .apt-modal-close { width: 36px; height: 36px; background: none; border: 1px solid var(--gold-20); border-radius: 8px; color: var(--text-secondary); font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .apt-modal-close:hover { background: var(--gold-10); color: var(--msl-gold); border-color: var(--msl-gold); }
        .apt-modal-body { display: flex; flex: 1; overflow: hidden; }
        .apt-level-selector { width: 180px; background: var(--bg-midnight); border-right: 1px solid var(--gold-10); padding: 16px; flex-shrink: 0; }
        .apt-level-title { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
        .apt-level-btn { width: 100%; padding: 12px; margin-bottom: 8px; background: var(--bg-surface); border: 1px solid var(--gold-10); border-radius: 8px; color: var(--text-body); font-size: 12px; text-align: left; cursor: pointer; }
        .apt-level-btn:hover { background: var(--bg-hover); border-color: var(--gold-20); }
        .apt-level-btn.active { background: var(--gold-10); border-color: var(--msl-gold); color: var(--msl-gold); }
        .apt-level-btn span { display: block; font-size: 10px; color: var(--text-secondary); margin-top: 4px; }
        .apt-units-container { flex: 1; padding: 20px; overflow-y: auto; }
        .apt-units-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
        .apt-unit-card { background: var(--bg-surface); border: 1px solid var(--gold-10); border-radius: 8px; padding: 14px; cursor: pointer; transition: all 0.3s ease; }
        .apt-unit-card:hover { background: var(--bg-hover); border-color: var(--gold-40); transform: translateY(-2px); }
        .apt-unit-card.selected { background: var(--gold-10); border-color: var(--msl-gold); }
        .apt-unit-number { font-family: var(--font-heading); font-size: 18px; color: var(--text-heading); margin-bottom: 4px; }
        .apt-unit-type { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
        .apt-unit-price { font-size: 14px; font-weight: 600; color: var(--msl-gold); }
        .apt-detail-panel { width: 280px; background: var(--bg-midnight); border-left: 1px solid var(--gold-10); padding: 20px; flex-shrink: 0; overflow-y: auto; }
        .apt-detail-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--gold-20); }
        .apt-detail-name { font-family: var(--font-heading); font-size: 28px; color: var(--msl-gold); }
        .apt-detail-type { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
        .apt-detail-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
        .apt-spec { background: rgba(0,0,0,0.2); padding: 10px; border-radius: 4px; }
        .apt-spec-label { font-size: 9px; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 4px; }
        .apt-spec-value { font-size: 14px; font-weight: 600; color: var(--text-heading); }
        .apt-price-section { background: var(--gold-10); border: 1px solid var(--gold-20); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
        .apt-price-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 6px; }
        .apt-price-value { font-family: var(--font-heading); font-size: 28px; color: var(--msl-gold); }
        .apt-price-sqm { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
        .apt-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--text-secondary); font-size: 13px; }
        .apt-empty-state svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: 0.5; stroke: currentColor; fill: none; }


        /* === V14: Apartment Tooltip === */
        #aptTooltip { position: absolute; z-index: 3000; background: var(--bg-surface); border: 1px solid var(--msl-gold); border-radius: 8px; padding: 14px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
        #aptTooltip.visible { opacity: 1; }
        .apt-tt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--gold-20); }
        .apt-tt-number { font-family: var(--font-heading); font-size: 18px; color: var(--msl-gold); }
        .apt-tt-type { font-size: 10px; color: var(--text-secondary); background: rgba(255,255,255,0.1); padding: 3px 8px; border-radius: 4px; }
        .apt-tt-row { display: flex; justify-content: space-between; font-size: 12px; margin: 6px 0; }
        .apt-tt-label { color: var(--text-secondary); }
        .apt-tt-value { color: var(--text-heading); font-weight: 500; }
        .apt-tt-price { color: var(--msl-gold); font-weight: 600; }


        /* === V15: Apartment Multi-Select === */
        .apt-unit-card.multi-selected { background: rgba(66,165,245,0.15); border-color: var(--semantic-info); box-shadow: 0 0 12px rgba(66,165,245,0.3); }
        .apt-unit-card.multi-selected .apt-unit-number { color: var(--semantic-info); }
        .apt-multi-panel { background: rgba(66,165,245,0.1); border: 1px solid rgba(66,165,245,0.3); border-radius: 8px; padding: 16px; margin-bottom: 16px; display: none; }
        .apt-multi-panel.visible { display: block; }
        .apt-multi-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .apt-multi-title { font-size: 12px; font-weight: 600; color: var(--semantic-info); text-transform: uppercase; letter-spacing: 0.5px; }
        .apt-multi-clear { font-size: 10px; color: var(--msl-rose); background: none; border: none; cursor: pointer; text-decoration: underline; }
        .apt-multi-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .apt-multi-stat { text-align: center; padding: 8px; background: rgba(0,0,0,0.2); border-radius: 4px; }
        .apt-multi-stat-value { font-family: var(--font-heading); font-size: 18px; color: var(--semantic-info); }
        .apt-multi-stat-label { font-size: 9px; color: var(--text-secondary); text-transform: uppercase; margin-top: 4px; }
        .apt-multi-hint { font-size: 10px; color: var(--text-secondary); margin-top: 10px; text-align: center; }
        .apt-multi-hint kbd { background: rgba(66,165,245,0.2); color: var(--semantic-info); padding: 2px 6px; border-radius: 3px; font-size: 9px; }


        /* === V16: Apartment Price Editing === */
        .apt-price-edit-row { display: flex; gap: 8px; margin-top: 12px; }
        .apt-edit-btn, .apt-save-btn, .apt-cancel-btn { flex: 1; padding: 10px; border: none; border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer; text-transform: uppercase; }
        .apt-edit-btn { background: rgba(219,186,92,0.15); color: var(--msl-gold); border: 1px solid rgba(219,186,92,0.3); }
        .apt-edit-btn:hover { background: rgba(219,186,92,0.25); }
        .apt-save-btn { background: var(--msl-gold); color: var(--msl-navy); display: none; }
        .apt-cancel-btn { background: rgba(196,160,168,0.15); color: var(--msl-rose); border: 1px solid rgba(196,160,168,0.3); display: none; }
        .apt-price-input { width: 100%; padding: 10px; background: var(--bg-surface); border: 2px solid var(--msl-gold); border-radius: 8px; font-size: 18px; font-weight: 600; color: var(--msl-gold); outline: none; display: none; margin-top: 8px; }
        .apt-unit-price.modified::after { content: ' ●'; color: var(--msl-gold); font-size: 8px; }
        
        /* === V16: Apartment Filters === */
        .apt-filters-bar { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 20px; background: var(--bg-midnight); border-bottom: 1px solid var(--gold-10); align-items: center; }
        .apt-filter-group { display: flex; align-items: center; gap: 6px; }
        .apt-filter-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; }
        .apt-filter-input { width: 80px; padding: 6px 8px; background: var(--bg-surface); border: 1px solid var(--gold-10); border-radius: 4px; color: var(--text-body); font-size: 11px; }
        .apt-filter-sep { color: var(--text-muted); font-size: 10px; }
        .apt-filter-checks { display: flex; gap: 4px; }
        .apt-filter-check { padding: 6px 10px; background: var(--bg-surface); border: 1px solid var(--gold-10); border-radius: 4px; color: var(--text-secondary); font-size: 11px; cursor: pointer; }
        .apt-filter-check.active { background: var(--gold-10); border-color: var(--msl-gold); color: var(--msl-gold); }
        .apt-filter-actions { display: flex; gap: 6px; margin-left: auto; }
        .apt-filter-btn { padding: 6px 12px; border: none; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; }
        .apt-filter-apply { background: var(--msl-gold); color: var(--msl-navy); }
        .apt-filter-reset { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--gold-10); }
        .apt-filter-count { font-size: 11px; color: var(--text-secondary); }
        .apt-unit-card.filtered-out { display: none; }
        
        /* === V16: Apartment Summary in Sidebar === */
        .apt-summary { background: var(--gold-05); border: 1px solid var(--gold-10); border-radius: 8px; padding: 16px; margin-top: 16px; }
        .apt-summary-title { font-size: 12px; font-weight: 600; color: var(--msl-gold); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
        .apt-summary-toggle { font-size: 10px; color: var(--text-secondary); }
        .apt-summary-content { display: block; }
        .apt-summary-content.collapsed { display: none; }
        .apt-summary-section { margin-bottom: 12px; }
        .apt-summary-section-title { font-size: 10px; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; }
        .apt-summary-row { display: flex; justify-content: space-between; font-size: 11px; padding: 4px 0; border-bottom: 1px solid var(--gold-05); }
        .apt-summary-row-label { color: var(--text-body); }
        .apt-summary-row-value { color: var(--msl-gold); font-weight: 500; }
        .apt-summary-total { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gold-20); display: flex; justify-content: space-between; }
        .apt-summary-total-label { font-size: 11px; color: var(--text-secondary); }
        .apt-summary-total-value { font-size: 16px; color: var(--msl-gold); font-weight: 600; }


        /* === V17: Totals Bar === */
        #totalsBar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 997; background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-void) 100%); border-top: 1px solid var(--gold-40); padding: 12px 30px; display: flex; justify-content: center; gap: 40px; align-items: center; }
        .totals-section { display: flex; align-items: center; gap: 20px; }
        .totals-section-title { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); }
        .totals-stats { display: flex; gap: 20px; }
        .totals-stat { text-align: center; min-width: 80px; }
        .totals-stat-value { font-family: var(--font-heading); font-size: 18px; color: var(--text-heading); font-weight: 500; }
        .totals-stat-value.gold { color: var(--msl-gold); }
        .totals-stat-label { font-size: 9px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
        .totals-divider { width: 1px; height: 40px; background: var(--gold-20); }
        .totals-grand { text-align: center; padding: 8px 24px; background: var(--gold-10); border: 1px solid var(--gold-40); border-radius: 8px; }
        .totals-grand-value { font-family: var(--font-heading); font-size: 26px; color: var(--msl-gold); font-weight: 500; }
        .totals-grand-label { font-size: 9px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }


        /* === V18: Stage Features === */
        /* Stage Breakdown Table */
        .stage-breakdown { margin-top: 16px; background: var(--gold-05); border: 1px solid var(--gold-10); border-radius: 8px; padding: 12px; }
        .stage-breakdown-title { font-size: 11px; font-weight: 600; color: var(--msl-gold); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; cursor: pointer; display: flex; justify-content: space-between; }
        .stage-breakdown-toggle { font-size: 10px; color: var(--text-secondary); }
        .stage-breakdown-content { display: block; }
        .stage-breakdown-content.collapsed { display: none; }
        .stage-table { width: 100%; font-size: 10px; border-collapse: collapse; }
        .stage-table th { text-align: left; color: var(--text-secondary); font-weight: 500; padding: 4px 6px; border-bottom: 1px solid var(--gold-10); }
        .stage-table td { padding: 5px 6px; color: var(--text-body); border-bottom: 1px solid var(--gold-05); }
        .stage-table tr:last-child td { border-bottom: none; }
        .stage-table .val { color: var(--msl-gold); font-weight: 500; }
        .stage-table tfoot td { border-top: 1px solid var(--gold-20); font-weight: 600; color: var(--msl-gold); }
        
        /* Stage Filter Checkboxes */
        .stage-filters { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gold-10); }
        .stage-filters-title { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 8px; }
        .stage-filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
        .stage-filter-cb { display: flex; align-items: center; justify-content: center; padding: 6px; background: var(--bg-surface); border: 1px solid var(--gold-10); border-radius: 4px; font-size: 10px; color: var(--text-secondary); cursor: pointer; transition: all 0.3s ease; }
        .stage-filter-cb.active { background: var(--gold-10); border-color: var(--msl-gold); color: var(--msl-gold); }
        .stage-filter-cb:hover { border-color: var(--gold-40); }
        
        /* Legend Hover Highlight */
        .legend-item { cursor: pointer; }
        .zone.land.stage-highlight { filter: brightness(1.4) !important; box-shadow: 0 0 8px rgba(0,191,99,0.5); z-index: 50; }
        .zone.land.stage-dimmed { opacity: 0.3; }


        /* === V20: Loading Overlay === */
        #loadingOverlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: var(--bg-void); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.3s ease, visibility 0.3s ease; }
        #loadingOverlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
        .loading-logo { width: 80px; height: 80px; background: var(--msl-gold); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 36px; font-weight: 600; color: var(--msl-navy); margin-bottom: 24px; animation: loadingPulse 1.5s ease-in-out infinite; }
        @keyframes loadingPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(219,186,92,0.4); } 50% { transform: scale(1.05); box-shadow: 0 0 30px 10px rgba(219,186,92,0.2); } }
        .loading-title { font-family: var(--font-heading); font-size: 28px; color: var(--text-heading); letter-spacing: 2px; margin-bottom: 8px; }
        .loading-subtitle { font-size: 12px; color: var(--text-secondary); letter-spacing: 1px; margin-bottom: 32px; }
        .loading-spinner { display: flex; gap: 8px; }
        .loading-dot { width: 10px; height: 10px; background: var(--msl-gold); border-radius: 50%; animation: loadingBounce 1, 0.3s ease-in-out infinite; }
        .loading-dot:nth-child(1) { animation-delay: 0s; }
        .loading-dot:nth-child(2) { animation-delay: 0.2s; }
        .loading-dot:nth-child(3) { animation-delay: 0.4s; }
        @keyframes loadingBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
        .loading-status { margin-top: 24px; font-size: 11px; color: var(--text-muted); }


        /* === V21: Welcome Overlay === */
        #welcomeOverlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9998; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
        #welcomeOverlay.visible { opacity: 1; visibility: visible; }
        .welcome-modal { background: var(--bg-deep); border: 1px solid var(--gold-40); border-radius: 12px; padding: 40px; max-width: 500px; text-align: center; }
        .welcome-logo { width: 70px; height: 70px; background: var(--msl-gold); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 32px; font-weight: 600; color: var(--msl-navy); margin: 0 auto 20px; }
        .welcome-title { font-family: var(--font-heading); font-size: 28px; color: var(--text-heading); margin-bottom: 8px; }
        .welcome-subtitle { font-size: 14px; color: var(--msl-gold); margin-bottom: 24px; }
        .welcome-features { text-align: left; margin-bottom: 28px; }
        .welcome-feature { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-size: 13px; color: var(--text-body); }
        .welcome-feature-icon { width: 24px; height: 24px; background: var(--gold-10); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--msl-gold); font-size: 12px; flex-shrink: 0; }
        .welcome-actions { display: flex; gap: 12px; justify-content: center; }
        .welcome-btn { padding: 12px 28px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
        .welcome-btn-start { background: var(--msl-gold); color: var(--msl-navy); }
        .welcome-btn-start:hover { background: #E5C97A; }
        .welcome-btn-skip { background: transparent; color: var(--text-secondary); border: 1px solid var(--gold-20); }
        .welcome-btn-skip:hover { border-color: var(--gold-40); color: var(--text-body); }
        
        /* === V21: Help Modal === */
        #helpOverlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9997; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
        #helpOverlay.visible { opacity: 1; visibility: visible; }
        .help-modal { background: var(--bg-deep); border: 1px solid var(--gold-40); border-radius: 12px; padding: 28px; max-width: 420px; width: 90%; }
        .help-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--gold-20); }
        .help-title { font-family: var(--font-heading); font-size: 22px; color: var(--msl-gold); }
        .help-close { width: 32px; height: 32px; background: none; border: 1px solid var(--gold-20); border-radius: 8px; color: var(--text-secondary); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .help-close:hover { background: var(--gold-10); color: var(--msl-gold); border-color: var(--msl-gold); }
        .help-section { margin-bottom: 20px; }
        .help-section-title { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
        .help-item { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 12px; color: var(--text-body); }
        .help-item kbd { background: var(--gold-10); color: var(--msl-gold); padding: 4px 8px; border-radius: 4px; font-size: 11px; font-family: var(--font-body); min-width: 28px; text-align: center; }
        .help-item-keys { display: flex; gap: 4px; min-width: 100px; }
        
        /* === V21: Help Button === */
        #helpBtn { position: absolute; bottom: 70px; right: 20px; z-index: 996; width: 40px; height: 40px; background: var(--bg-surface); border: 1px solid var(--gold-20); border-radius: 50%; color: var(--msl-gold); font-size: 18px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
        #helpBtn:hover { background: var(--gold-10); border-color: var(--msl-gold); transform: scale(1.1); }


        /* === V22: Button Feedback Animations === */
        .btn-feedback { transition: transform 0.1s ease, box-shadow 0.1s ease; }
        .btn-feedback:active { transform: scale(0.95); }
        .btn-click-effect { animation: btnPulse 0.3s ease; }
        @keyframes btnPulse { 0% { box-shadow: 0 0 0 0 rgba(219,186,92,0.4); } 100% { box-shadow: 0 0 0 12px rgba(219,186,92,0); } }
        
        /* === V22: Selection Animation (just-selected bounce) === */
        .zone.land.just-selected { animation: selectBounce 0.3s ease; }
        @keyframes selectBounce { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
        .apt-unit-card.just-selected { animation: selectBounce 0.3s ease; }
        
        /* === V22: Success Flash on Save === */
        .success-flash { animation: successFlash 0.6s ease; }
        @keyframes successFlash { 0% { box-shadow: 0 0 0 0 rgba(76,175,80,0.6); } 50% { box-shadow: 0 0 20px 8px rgba(76,175,80,0.4); background: rgba(76,175,80,0.15); } 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); } }
        
        /* Toast success variant */
        #toast.success { border-color: var(--semantic-positive); color: var(--semantic-positive); }


        /* === V24: Apartment Export Button === */
        #exportAptsBtn { padding: 6px 12px; background: var(--bg-surface); color: var(--msl-gold); border: 1px solid var(--gold-20); border-radius: 4px; font-size: 10px; font-weight: 600; cursor: pointer; margin-top: 12px; width: 100%; }
        #exportAptsBtn:hover { background: var(--gold-10); border-color: var(--msl-gold); }

/* =============================================
   BUYER INTELLIGENCE — INTEGRATED STYLES
   ============================================= */
.tech-buyer-intel-section { background: var(--bg-void, #080C12); }
.bi-container {
    position: relative;
    height: 95vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    margin: 0 20px;
    background: #0B1829;
    font-family: 'Montserrat', sans-serif;
    color: #E8ECF0;
    -webkit-font-smoothing: antialiased;
}
.bi-container * { margin: 0; padding: 0; box-sizing: border-box; }
/* ══════════════════════════════════════════════════════════════
   BULIMBA BARRACKS — BUYER INTELLIGENCE & CAMPAIGN PERFORMANCE
   MSL Property Group Command Centre
   ══════════════════════════════════════════════════════════════ */







/* ── TOPBAR ── */
.bi-container .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: var(--cc-surface);
    border-bottom: 1px solid var(--cc-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.bi-container .topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bi-container .msl-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bi-container .msl-logo img {
    width: 32px;
    height: 32px;
}

.bi-container .msl-logo-text {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    color: var(--msl-gold);
}

.bi-container .topbar-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bi-container .topbar-title h1 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-white);
    letter-spacing: 0.5px;
}

.bi-container .topbar-title span {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--msl-gold);
}

.bi-container .topbar-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.bi-container .topbar-right .address {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.bi-container .topbar-right .data-date {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* ── TAB NAVIGATION ── */
.bi-container .tab-nav {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--cc-surface);
    border-bottom: 1px solid var(--cc-border);
    padding: 0 32px;
    overflow-x: auto;
}

.bi-container .tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.bi-container .tab-item:hover {
    color: var(--text-secondary);
}

.bi-container .tab-item.active {
    color: var(--text-white);
    border-bottom-color: var(--msl-gold);
}

.bi-container .tab-badge {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    letter-spacing: 1px;
}

.bi-container .tab-badge.gold {
    background: var(--msl-gold-dim);
    color: var(--msl-gold);
}

.bi-container .tab-badge.green {
    background: rgba(91, 185, 140, 0.15);
    color: var(--chart-green);
}

.bi-container .tab-badge.blue {
    background: rgba(74, 144, 217, 0.15);
    color: var(--chart-blue);
}

/* ── BACK LINK ── */
.bi-container .back-link {
    padding: 12px 32px;
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.2s;
}

.bi-container .back-link:hover {
    color: var(--msl-gold);
}

/* ── MAIN CONTENT ── */
.bi-container .content {
    padding: 24px 32px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── SECTION WRAPPER ── */
.bi-container .section {
    margin-bottom: 28px;
}

.bi-container .section-header {
    margin-bottom: 16px;
}

.bi-container .section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-white);
    margin-bottom: 4px;
}

.bi-container .section-subtitle {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* ── KPI CARDS (Section 1) ── */
.bi-container .kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.bi-container .kpi-card {
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    padding: 20px 22px;
    transition: border-color 0.3s ease;
}

.bi-container .kpi-card:hover {
    border-color: var(--cc-border-light);
}

.bi-container .kpi-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.4;
}

.bi-container .kpi-value {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--text-white);
    line-height: 1;
    margin-bottom: 6px;
}

.bi-container .kpi-value.gold {
    color: var(--msl-gold);
}

.bi-container .kpi-detail {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.bi-container .kpi-detail .highlight {
    color: var(--msl-gold);
    font-weight: 600;
}

/* ── CHART CONTAINERS ── */
.bi-container .chart-panel {
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
}

.bi-container .chart-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.bi-container .chart-panel-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-white);
    margin-bottom: 4px;
}

.bi-container .chart-panel-subtitle {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.bi-container .chart-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    overflow: hidden;
}

.bi-container .chart-toggle button {
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.bi-container .chart-toggle button.active {
    background: var(--msl-gold-dim);
    color: var(--msl-gold);
}

.bi-container .chart-toggle button:hover:not(.active) {
    color: var(--text-secondary);
}

/* ── CHART LEGEND ── */
.bi-container .chart-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bi-container .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.bi-container .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ── CANVAS CHARTS ── */
.bi-container .chart-canvas-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
}

.bi-container canvas {
    display: block;
}

/* ── DUAL PANEL LAYOUT ── */
.bi-container .dual-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 900px) {
.bi-container .dual-panel {
        grid-template-columns: 1fr;
    }
}

/* ── TABLE STYLES ── */
.bi-container .data-table {
    width: 100%;
    border-collapse: collapse;
}

.bi-container .data-table thead th {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--cc-border);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.bi-container .data-table thead th:hover {
    color: var(--msl-gold);
}

.bi-container .data-table tbody td {
    font-size: 0.75rem;
    color: var(--text-primary);
    padding: 10px 14px;
    border-bottom: 1px solid var(--cc-border);
}

.bi-container .data-table tbody tr:hover {
    background: var(--cc-surface-hover);
}

.bi-container .data-table .price {
    color: var(--msl-gold);
    font-weight: 600;
}

.bi-container .data-table .lot-link {
    color: var(--chart-blue);
    font-weight: 600;
    cursor: pointer;
}

/* ── STATUS BADGES ── */
.bi-container .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 12px;
}

.bi-container .status-badge.green {
    background: rgba(91, 185, 140, 0.15);
    color: var(--status-green);
}

.bi-container .status-badge.amber {
    background: rgba(245, 166, 35, 0.15);
    color: var(--status-amber);
}

.bi-container .status-badge.red {
    background: rgba(232, 132, 107, 0.15);
    color: var(--status-red);
}

/* ── PROGRESS BARS ── */
.bi-container .progress-bar-wrap {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}

.bi-container .progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
}

/* ── FUNNEL ── */
.bi-container .funnel-stage {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.bi-container .funnel-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    min-width: 160px;
    text-align: right;
}

.bi-container .funnel-bar-wrap {
    flex: 1;
    height: 28px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.bi-container .funnel-bar {
    height: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-left: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-white);
    transition: width 0.8s ease;
}

.bi-container .funnel-pct {
    font-size: 0.6rem;
    color: var(--text-muted);
    min-width: 50px;
    text-align: right;
}

/* ── METRIC CARDS (small inline) ── */
.bi-container .metric-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.bi-container .metric-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    padding: 12px 14px;
}

.bi-container .metric-card-label {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.bi-container .metric-card-value {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-white);
}

/* ── HEATMAP ── */
.bi-container .heatmap-grid {
    display: grid;
    gap: 3px;
}

.bi-container .heatmap-cell {
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--text-white);
    min-height: 28px;
    transition: transform 0.15s;
}

.bi-container .heatmap-cell:hover {
    transform: scale(1.1);
    z-index: 2;
}

/* ── INSIGHTS PANEL ── */
.bi-container .insights-panel {
    background: var(--cc-surface);
    border: 1px solid var(--msl-gold-dim);
    border-left: 3px solid var(--msl-gold);
    border-radius: 0 8px 8px 0;
    padding: 24px 28px;
}

.bi-container .insight-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.75rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.bi-container .insight-item:last-child {
    margin-bottom: 0;
}

.bi-container .insight-bullet {
    width: 6px;
    height: 6px;
    min-width: 6px;
    background: var(--msl-gold);
    border-radius: 50%;
    margin-top: 6px;
}

.bi-container .insight-item strong {
    color: var(--msl-gold);
}

/* ── EXPORT BUTTON ── */
.bi-container .export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--msl-gold);
    background: var(--msl-gold-dim);
    border: 1px solid rgba(219, 186, 92, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.bi-container .export-btn:hover {
    background: rgba(219, 186, 92, 0.25);
}

/* ── SCROLL FADE ── */
.bi-container .section {
    opacity: 0;
    transform: translateY(15px);
    animation: fadeInUp 0.3s ease forwards;
}

@keyframes fadeInUp {
.bi-container to { opacity: 1; transform: translateY(0); }
}

.bi-container .section:nth-child(1) { animation-delay: 0.05s; }
.bi-container .section:nth-child(2) { animation-delay: 0.1s; }
.bi-container .section:nth-child(3) { animation-delay: 0.15s; }
.bi-container .section:nth-child(4) { animation-delay: 0.2s; }
.bi-container .section:nth-child(5) { animation-delay: 0.25s; }

/* =============================================
   MASTER PRICE LISTS — INTEGRATED STYLES
   ============================================= */
.tech-price-intel-section { background: var(--bg-void, #080C12); }
.pi-container {
    position: relative;
    height: 95vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    margin: 0 20px;
    background: var(--bg-void);
    font-family: 'Montserrat', sans-serif;
    color: var(--text-heading);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}
/








/* ═══ HEADER ═══ */
.pi-container .price-header { padding:60px 40px 30px; background:linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-void) 100%); border-bottom:1px solid var(--border-subtle); position:relative; }
.pi-container .price-header::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, var(--msl-gold), transparent); }
.pi-container .price-header-inner { max-width:1600px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-end; }
.pi-container .price-header-left { flex:1; }
.pi-container .price-kicker { font-family:var(--font-body); font-size:0.7rem; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:var(--msl-gold); margin-bottom:12px; opacity:0; animation:fadeInUp 0.8s var(--ease-out-expo) .1s forwards; }
.pi-container .price-title { font-family:var(--font-heading); font-size:2.8rem; font-weight:300; color:var(--text-heading); line-height:1.15; margin-bottom:12px; opacity:0; animation:fadeInUp 0.8s var(--ease-out-expo) 0.2s forwards; }
.pi-container .price-subtitle { font-size:0.85rem; color:var(--text-secondary); max-width:700px; opacity:0; animation:fadeInUp 0.8s var(--ease-out-expo) 0.3s forwards; }
.pi-container .header-actions { display:flex; gap:10px; align-items:center; opacity:0; animation:fadeIn 0.8s var(--ease-out-expo) 0.4s forwards; }
.pi-container .pres-toggle { padding:9px 18px; background:var(--bg-surface); border:1px solid var(--border-light); border-radius:8px; color:var(--text-secondary); font-family:var(--font-body); font-size:.7rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; gap:8px; }
.pi-container .pres-toggle:hover { border-color:var(--msl-gold); color:var(--msl-gold); }
.pi-container .pres-toggle.active { background:rgba(219,186,92,0.1); border-color:var(--msl-gold); color:var(--msl-gold); }
.pi-container .pres-toggle svg { width:14px; height:14px; }

/* ═══ TABS ═══ */
.pi-container .price-tabs { display:flex; gap:0; background:var(--bg-abyss); border-bottom:1px solid var(--border-subtle); position:sticky; top:0; z-index:100; }
.pi-container .price-tab { flex:1; padding:16px 24px; font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); background:transparent; border:none; cursor:pointer; position:relative; transition:all 0.4s; display:flex; align-items:center; justify-content:center; gap:12px; }
.pi-container .price-tab:hover { color:var(--text-secondary); background:var(--bg-deep); }
.pi-container .price-tab.active { color:var(--msl-gold); background:var(--bg-deep); }
.pi-container .price-tab.active::after { content:''; position:absolute; bottom:0; left:20%; right:20%; height:2px; background:var(--msl-gold); }
.pi-container .price-tab-badge { font-size:.62rem; padding:2px 8px; border-radius:12px; background:var(--bg-elevated); color:var(--text-secondary); }
.pi-container .price-tab.active .price-tab-badge { background:rgba(219,186,92,0.15); color:var(--msl-gold); }

/* ═══ PANELS ═══ */
.pi-container .price-panel { display:none; }
.pi-container .price-panel.active { display:block; }

/* ═══ CONTROL PANEL ═══ */
.pi-container .control-section { padding:40px; max-width:1600px; margin:0 auto; }
.pi-container .control-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-bottom:30px; }
.pi-container .control-card { background:var(--bg-deep); border:1px solid var(--border-light); border-radius:12px; padding:28px; position:relative; overflow:hidden; }
.pi-container .control-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--msl-gold), transparent); }
.pi-container .control-card.rose::before { background:linear-gradient(90deg, var(--msl-rose), transparent); }
.pi-container .control-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.pi-container .control-card-title { font-family:var(--font-heading); font-size:1.4rem; font-weight:400; color:var(--text-heading); }
.pi-container .control-card-sub { font-size:.68rem; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; margin-top:4px; }
.pi-container .reset-btn { padding:6px 14px; background:rgba(239,83,80,0.08); border:1px solid rgba(239,83,80,0.2); border-radius:8px; color:var(--color-red-light); font-family:var(--font-body); font-size:.65rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; cursor:pointer; transition:all 0.3s; }
.pi-container .reset-btn:hover { background:rgba(239,83,80,0.15); border-color:rgba(239,83,80,0.4); }

/* FIX #3: Straightened control rows with consistent alignment */
.pi-container .control-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border-subtle); gap:16px; }
.pi-container .control-row:last-child { border-bottom:none; }
.pi-container .control-row-left { flex:1; min-width:0; }
.pi-container .control-label { font-size:.82rem; color:var(--text-body); }
.pi-container .control-note { font-size:.66rem; color:var(--text-muted); margin-top:2px; }
.pi-container .control-row-right { display:flex; align-items:center; gap:6px; flex-shrink:0; width:130px; justify-content:flex-end; }
.pi-container .control-row-right .unit-label { color:var(--text-muted); font-size:.8rem; font-weight:500; width:14px; text-align:center; flex-shrink:0; }
.pi-container .control-input { width:90px; padding:8px 12px; background:rgba(219,186,92,0.06); border:1px solid var(--border-gold); border-radius:8px; color:var(--msl-gold); font-family:var(--font-body); font-size:.85rem; font-weight:600; text-align:center; outline:none; transition:all 0.3s; flex-shrink:0; }
.pi-container .control-input:focus { border-color:var(--msl-gold); box-shadow:0 0 0 3px rgba(219,186,92,0.1); background:rgba(219,186,92,0.1); }
.pi-container .control-input.rose-input { background:rgba(196,160,168,0.06); border-color:rgba(196,160,168,0.3); color:var(--msl-rose); }
.pi-container .control-input.rose-input:focus { border-color:var(--msl-rose); box-shadow:0 0 0 3px rgba(196,160,168,0.1); }

/* ═══ SCENARIOS ═══ */
.pi-container .scenario-bar { display:flex; gap:10px; align-items:center; margin-bottom:30px; padding:16px 20px; background:var(--bg-surface); border:1px solid var(--border-light); border-radius:12px; flex-wrap:wrap; }
.pi-container .scenario-label { font-size:.65rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-right:8px; white-space:nowrap; }
.pi-container .scenario-btn { padding:8px 16px; background:var(--bg-deep); border:1px solid var(--border-light); border-radius:8px; color:var(--text-secondary); font-family:var(--font-body); font-size:.72rem; font-weight:500; cursor:pointer; transition:all 0.3s; }
.pi-container .scenario-btn:hover { border-color:var(--msl-gold); color:var(--text-heading); }
.pi-container .scenario-btn.active { background:rgba(219,186,92,0.1); border-color:var(--msl-gold); color:var(--msl-gold); font-weight:600; }
.pi-container .scenario-btn.save { background:rgba(76,175,80,0.08); border-color:rgba(76,175,80,0.3); color:var(--color-green-light); }
.pi-container .scenario-btn.save:hover { background:rgba(76,175,80,0.15); }
.pi-container .scenario-name-input { width:140px; padding:7px 12px; background:var(--bg-deep); border:1px solid var(--border-light); border-radius:8px; color:var(--text-heading); font-family:var(--font-body); font-size:.75rem; outline:none; }
.pi-container .scenario-name-input:focus { border-color:var(--msl-gold); }
/* Scenario saved flash */
.pi-container .scenario-btn.save.saved { background:rgba(76,175,80,0.25); border-color:var(--color-green); color:var(--color-green-light); }

/* ═══ BENCHMARK STRIP ═══ */
.pi-container .benchmark-strip { display:flex; gap:16px; align-items:center; margin-bottom:20px; padding:12px 20px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:8px; flex-wrap:wrap; }
.pi-container .benchmark-label { font-size:.6rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); }
.pi-container .benchmark-item { display:flex; align-items:center; gap:6px; font-size:.75rem; }
.pi-container .benchmark-dot { width:8px; height:8px; border-radius:50%; }
.pi-container .benchmark-val { color:var(--text-heading); font-weight:600; }
.pi-container .benchmark-name { color:var(--text-muted); font-size:.68rem; }

/* ═══ SUMMARY ═══ */
.pi-container .summary-strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px; margin-bottom:24px; }
.pi-container .summary-card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:12px; padding:18px 14px; text-align:center; transition:all 0.3s; }
.pi-container .summary-card:hover { border-color:var(--border-gold); transform:translateY(-2px); }
.pi-container .summary-card.gold { border-color:var(--border-gold); background:rgba(219,186,92,0.04); }
.pi-container .summary-card.rose { border-color:rgba(196,160,168,0.3); background:rgba(196,160,168,0.04); }
.pi-container .summary-card.variance { border-color:rgba(76,175,80,0.3); background:rgba(76,175,80,0.04); }
.pi-container .summary-card.neg-variance { border-color:rgba(239,83,80,0.3); background:rgba(239,83,80,0.04); }
.pi-container .summary-value { font-family:var(--font-heading); font-size:1.5rem; font-weight:500; color:var(--text-heading); line-height:1.2; }
.pi-container .summary-card.gold .summary-value { color:var(--msl-gold); }
.pi-container .summary-card.rose .summary-value { color:var(--msl-rose); }
.pi-container .summary-card.variance .summary-value { color:var(--color-green); }
.pi-container .summary-card.neg-variance .summary-value { color:var(--color-red); }
.pi-container .summary-label { font-size:.6rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-top:6px; }

/* ═══ STAGE BREAKDOWN CHART ═══ */
.pi-container .breakdown-section { margin-bottom:30px; }
.pi-container .breakdown-title { font-size:.65rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }
.pi-container .breakdown-bars { display:flex; gap:8px; align-items:flex-end; height:100px; padding:12px 0; }
.pi-container .breakdown-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.pi-container .breakdown-bar { width:100%; min-height:4px; border-radius:4px 4px 0 0; background:linear-gradient(180deg, var(--msl-gold), var(--msl-gold)); transition:all 0.4s var(--ease-out-expo); position:relative; }
.pi-container .breakdown-bar.rose-bar { background:linear-gradient(180deg, var(--msl-rose), #a08088); }
.pi-container .breakdown-bar-label { font-size:.58rem; color:var(--text-muted); font-weight:600; }
.pi-container .breakdown-bar-val { font-size:.62rem; color:var(--text-secondary); font-weight:600; }

/* ═══ FILTER BUTTONS ═══ */
.pi-container .filter-bar { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.pi-container .filter-label { font-size:.6rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-right:6px; }
.pi-container .filter-btn { padding:5px 12px; background:var(--bg-surface); border:1px solid var(--border-light); border-radius:16px; color:var(--text-secondary); font-family:var(--font-body); font-size:.68rem; font-weight:500; cursor:pointer; transition:all 0.25s; }
.pi-container .filter-btn:hover { border-color:var(--msl-gold); color:var(--text-heading); }
.pi-container .filter-btn.active { background:rgba(219,186,92,0.12); border-color:var(--msl-gold); color:var(--msl-gold); font-weight:600; }
.pi-container .filter-btn.rose-filter.active { background:rgba(196,160,168,0.12); border-color:var(--msl-rose); color:var(--msl-rose); }

/* ═══ TABLE ═══ */
.pi-container .table-section { padding:0 40px 60px; max-width:1600px; margin:0 auto; }
.pi-container .table-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; flex-wrap:wrap; }
.pi-container .table-search { flex:1; max-width:280px; padding:10px 16px; background:var(--bg-surface); border:1px solid var(--border-light); border-radius:8px; color:var(--text-body); font-family:var(--font-body); font-size:.8rem; outline:none; transition:border-color 0.3s; }
.pi-container .table-search:focus { border-color:var(--msl-gold); }
.pi-container .table-search::placeholder { color:var(--text-muted); }
.pi-container .toolbar-right { display:flex; gap:8px; align-items:center; }
.pi-container .export-btn { padding:10px 18px; background:linear-gradient(135deg, var(--msl-gold), var(--msl-gold)); border:none; border-radius:8px; color:var(--bg-void); font-family:var(--font-body); font-size:.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; gap:8px; }
.pi-container .export-btn:hover { transform:translateY(-1px); box-shadow:0 4px 20px rgba(219,186,92,0.3); }
.pi-container .export-btn svg { width:14px; height:14px; }
.pi-container .export-btn.combined { background:linear-gradient(135deg, var(--msl-navy), #2a4570); color:var(--text-heading); }
.pi-container .export-btn.combined:hover { box-shadow:0 4px 20px rgba(29,47,78,0.5); }

.pi-container .data-table-wrap { overflow-x:auto; border-radius:12px; border:1px solid var(--border-light); background:var(--bg-deep); position:relative; }
.pi-container .data-table { width:100%; border-collapse:collapse; font-size:.76rem; }
.pi-container .data-table thead th { position:sticky; top:0; z-index:10; background:var(--bg-surface); color:var(--text-secondary); font-size:.62rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:12px 10px; text-align:center; white-space:nowrap; border-bottom:1px solid var(--border-medium); cursor:pointer; user-select:none; transition:color 0.2s; }
.pi-container .data-table thead th:hover { color:var(--msl-gold); }
.pi-container .data-table thead th .sort-arrow { font-size:.5rem; margin-left:3px; opacity:.4; }
.pi-container .data-table thead th.sorted .sort-arrow { opacity:1; color:var(--msl-gold); }
.pi-container .data-table thead th.group-header { background:var(--bg-elevated); color:var(--msl-gold); font-size:.58rem; letter-spacing:2px; padding:7px 10px; border-bottom:1px solid var(--border-gold); cursor:default; }
.pi-container .data-table thead th.group-header:hover { color:var(--msl-gold); }
.pi-container .data-table tbody tr { border-bottom:1px solid var(--border-subtle); transition:all 0.2s; }
.pi-container .data-table tbody tr:hover { background:rgba(219,186,92,0.03); }
.pi-container .data-table tbody tr:nth-child(even) { background:rgba(255,255,255,0.008); }
.pi-container .data-table tbody tr:nth-child(even):hover { background:rgba(219,186,92,0.04); }
.pi-container .data-table td { padding:10px 10px; text-align:center; color:var(--text-body); white-space:nowrap; }
.pi-container .data-table td.text-left { text-align:left; white-space:normal; max-width:180px; font-size:.7rem; }
.pi-container .data-table td.stage { font-weight:600; color:var(--msl-gold); font-size:.7rem; }
.pi-container .data-table td.grading { font-weight:700; }
.pi-container .data-table td.grading.premium { color:var(--msl-gold); }
.pi-container .data-table td.price { font-weight:500; color:var(--text-heading); }
.pi-container .data-table td.adjusted { color:var(--color-green-light); font-weight:600; }
.pi-container .data-table td.variance-pos { color:var(--color-green); font-size:.72rem; }
.pi-container .data-table td.variance-neg { color:var(--color-red-light); font-size:.72rem; }
.pi-container .data-table td.variance-zero { color:var(--text-muted); font-size:.72rem; }
.pi-container .data-table td.has-warning { position:relative; }
.pi-container .data-table td.has-warning::after { content:'⚠'; position:absolute; top:2px; right:2px; font-size:.55rem; color:var(--color-amber); }

/* Sparkline bar */
.pi-container .spark-wrap { display:inline-flex; align-items:center; gap:5px; }
.pi-container .spark-bar { height:4px; border-radius:2px; min-width:1px; max-width:50px; transition:width 0.4s var(--ease-out-expo); }
.pi-container .spark-bar.pos { background:var(--color-green); }
.pi-container .spark-bar.neg { background:var(--color-red); }

/* Override input */
.pi-container .override-input { width:65px; padding:5px 6px; background:rgba(219,186,92,0.05); border:1px solid var(--border-gold); border-radius:4px; color:var(--msl-gold); font-family:var(--font-body); font-size:.76rem; font-weight:600; text-align:center; outline:none; transition:all 0.3s; }
.pi-container .override-input:focus { border-color:var(--msl-gold); box-shadow:0 0 0 2px rgba(219,186,92,0.15); background:rgba(219,186,92,0.1); }
.pi-container .override-input::placeholder { color:var(--text-faint); font-weight:400; }
.pi-container .override-input.warning { border-color:var(--color-amber); box-shadow:0 0 0 2px rgba(255,167,38,0.15); }

/* Totals row */
.pi-container .data-table tfoot td { padding:14px 10px; font-weight:700; color:var(--text-heading); background:var(--bg-surface); border-top:2px solid var(--msl-gold); text-align:center; font-size:.8rem; }
.pi-container .data-table tfoot td.adjusted { color:var(--color-green-light); }
.pi-container .data-table tfoot td.variance-pos { color:var(--color-green); }
.pi-container .data-table tfoot td.variance-neg { color:var(--color-red-light); }

/* ═══ TOOLTIP ═══ */
.pi-container .tooltip-trigger { cursor:help; position:relative; border-bottom:1px dotted var(--text-faint); }
.pi-container .tooltip-pop { display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--bg-elevated); border:1px solid var(--border-medium); border-radius:8px; padding:12px 16px; min-width:250px; max-width:350px; z-index:50; box-shadow:0 8px 30px rgba(0,0,0,0.4); font-size:.72rem; line-height:1.5; color:var(--text-body); white-space:normal; text-align:left; }
.pi-container .tooltip-pop::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--bg-elevated); }
.pi-container .tooltip-trigger:hover .tooltip-pop, .pi-container .tooltip-trigger:focus .tooltip-pop { display:block; animation:fadeIn 0.3s ease; }

/* ═══ BUILDING BADGE ═══ */
.pi-container .building-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.62rem; font-weight:600; letter-spacing:.5px; }
.pi-container .building-badge.north { background:rgba(219,186,92,0.12); color:var(--msl-gold); }
.pi-container .building-badge.south { background:rgba(196,160,168,0.12); color:var(--msl-rose); }

/* ═══ TIMESTAMP ═══ */
.pi-container .timestamp-footer { padding:20px 40px; max-width:1600px; margin:0 auto; display:flex; justify-content:space-between; border-top:1px solid var(--border-subtle); }
.pi-container .timestamp-footer span { font-size:.65rem; color:var(--text-muted); }

/* ═══ PRESENTATION MODE ═══ */
.pi-container.presentation-mode .override-input, .pi-container.presentation-mode .control-input,
.pi-container.presentation-mode .filter-bar, .pi-container.presentation-mode .table-search,
.pi-container.presentation-mode .scenario-bar, .pi-container.presentation-mode .reset-btn,
.pi-container.presentation-mode th.group-header[data-adj], .pi-container.presentation-mode td[data-adj],
.pi-container.presentation-mode .control-note { display:none !important; }
.pi-container.presentation-mode .control-card { pointer-events:none; opacity:.7; }
.pi-container.presentation-mode .pres-toggle { background:rgba(219,186,92,0.15); }

/* ═══ ANIMATIONS ═══ */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ═══ RESPONSIVE ═══ */
@media (max-width:1024px) {
.pi-container .control-grid { grid-template-columns:1fr; }
.pi-container .price-title { font-size:2rem; }
.pi-container .price-header { padding:40px 24px 20px; }
.pi-container .price-header-inner { flex-direction:column; gap:16px; align-items:flex-start; }
.pi-container .table-section { padding:0 20px 40px; }
.pi-container .control-section { padding:24px 20px; }
.pi-container .summary-strip { grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
}



/* ═══════════════════════════════════════════════════════════════
   BRAND UNIFICATION SYSTEM
   MSL × Bulimba Barracks — Comprehensive Visual Consistency
   
   This block overrides ALL fragmented styles from separate build
   phases to create one cohesive visual system.
   ═══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────
   A. BODY & PAGE FOUNDATION
   Background: Void. All colour comes from layers above.
   ────────────────────────────────────────── */

body {
    background: var(--bg-void) !important;
    color: var(--text-body);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}


/* ──────────────────────────────────────────
   B. SECTION PAGES — Consistent base
   Each tab section uses Abyss as its base.
   ────────────────────────────────────────── */

.section-page {
    background: var(--bg-abyss);
}


/* ──────────────────────────────────────────
   C. SECTION BLOCKS — Unified spacing & rhythm
   Every sub-section within a tab.
   ────────────────────────────────────────── */

.section-block {
    padding: 60px 60px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    position: relative;
}

.section-block:last-child {
    border-bottom: none !important;
}

.section-inner,
.section-narrow {
    max-width: 1100px;
    margin: 0 auto;
}


/* ──────────────────────────────────────────
   D. SECTION HEROES — River Deep atmosphere
   Every opening/hero block gets River Deep treatment.
   ────────────────────────────────────────── */

.opportunity-hero,
.challenge-opening,
.solution-opening,
.why-msl-opening,
.tech-intro,
.shayher-hero,
.ns-hero {
    background:
        radial-gradient(ellipse at 70% 25%, rgba(212,148,58,0.06) 0%, transparent 50%),
        linear-gradient(170deg, var(--bb-river) 0%, var(--bg-abyss) 70%) !important;
    position: relative;
    overflow: hidden;
}

/* Heritage sawtooth pattern removed */

/* Content above pattern */
.opportunity-hero > *,
.challenge-opening > *,
.solution-opening > *,
.why-msl-opening > *,
.shayher-hero > *,
.ns-hero > * {
    position: relative;
    z-index: 2;
}


/* ──────────────────────────────────────────
   E. SECTION DIVIDERS — Gold gradient fade
   Between all sub-sections.
   ────────────────────────────────────────── */

.section-block + .section-block::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(219,186,92,0.12) 50%, transparent);
    pointer-events: none;
}


/* ──────────────────────────────────────────
   F. UNIFIED TYPOGRAPHY
   One scale. One rhythm. No exceptions.
   ────────────────────────────────────────── */

/* Display headlines — Cormorant Garamond 300 */
.headline-xl,
.opening-content .headline-xl,
.landing-title,
h1.headline-xl {
    font-family: var(--font-display) !important;
    font-weight: 300 !important;
    color: var(--text-white);
    line-height: 1.08;
    letter-spacing: -0.5px;
}

/* Section headlines — Cormorant 400 */
.headline-lg,
h2.headline-lg {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    color: var(--text-white);
    line-height: 1.15;
}

/* Sandstone italic highlights in headlines */
.headline-xl em,
.headline-lg em,
.landing-title em {
    font-style: italic;
    color: var(--bb-sandstone) !important;
}

/* Kickers — unified overline */
.kicker {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    color: var(--msl-gold) !important;
    margin-bottom: 16px;
}

/* Body text — Montserrat 300 */
.editorial-prose p,
.body-text,
.intro-text,
.section-desc,
p {
    font-weight: 300;
    line-height: 1.8;
}

/* Accent quotes — Libre Baskerville italic */
.pull-quote,
.accent-quote,
blockquote {
    font-family: var(--font-accent) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: var(--text-body);
    line-height: 1.7;
}

/* Stat values — Cormorant 300, Gold */
.stat-value,
.stat-number,
.stat-lg,
.metric-value,
.cc-kpi-value,
.apt-kpi-value,
.percentage-value,
.proof-stat {
    font-family: var(--font-display) !important;
    font-weight: 300 !important;
    color: var(--msl-gold) !important;
}

/* Stat labels — tiny uppercase */
.stat-label,
.stat-suffix,
.metric-label,
.cc-kpi-label,
.apt-kpi-label {
    font-family: var(--font-body);
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--text-tertiary) !important;
}

/* Taglines / subtitles — Libre Baskerville in Mist */
.opportunity-tagline,
.landing-subtitle {
    font-family: var(--font-accent) !important;
    font-weight: 400 !important;
    font-style: italic;
    color: var(--bb-mist) !important;
}


/* ──────────────────────────────────────────
   G. UNIFIED CARD SYSTEM
   One card. One treatment. Everywhere.
   bg-deep / border-card / 12px radius / shadow-card
   ────────────────────────────────────────── */

.stat-card,
.heritage-card,
.feature-card,
.content-card,
.framework-card,
.process-card,
.pillar-card,
.commitment-card,
.responsibility-card,
.credential-card,
.outcome-card,
.issue-card,
.info-card,
.developer-card,
.step-card,
.problem-card,
.pathway-card,
.contact-card,
.dashboard-card,
.scope-card,
.comparison-card,
.metric-card,
.cc-kpi-card,
.apt-kpi-card,
.summary-card,
.control-card,
.kpi-card,
.definition-card,
.fee-card,
.term-card {
    background: var(--bg-deep) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-card) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden;
}

.stat-card:hover,
.heritage-card:hover,
.feature-card:hover,
.content-card:hover,
.framework-card:hover,
.process-card:hover,
.pillar-card:hover,
.commitment-card:hover,
.responsibility-card:hover,
.credential-card:hover,
.outcome-card:hover,
.issue-card:hover,
.info-card:hover,
.developer-card:hover,
.step-card:hover,
.problem-card:hover,
.pathway-card:hover,
.dashboard-card:hover,
.scope-card:hover,
.comparison-card:hover,
.metric-card:hover,
.cc-kpi-card:hover,
.apt-kpi-card:hover,
.summary-card:hover,
.control-card:hover,
.kpi-card:hover,
.definition-card:hover,
.fee-card:hover,
.term-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lifted) !important;
}

/* Apartment lot cards — interactive selector variant */
.apt-card {
    background: var(--bg-deep) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}
.apt-card:hover {
    border-color: var(--border-visible) !important;
    background: var(--bg-surface) !important;
}
.apt-card.selected,
.apt-card.active {
    border-color: var(--msl-gold) !important;
    background: rgba(219,186,92,0.06) !important;
}

/* Card section headers / kickers inside cards */
.stat-card .kicker,
.framework-card .kicker,
.process-card .kicker {
    font-size: 9px !important;
    letter-spacing: 2.5px !important;
}

/* Card titles */
.stat-card h3,
.framework-card h3,
.process-card h3,
.pillar-card h3,
.commitment-card h3,
.credential-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--text-white);
    font-size: 20px;
    line-height: 1.25;
}

/* Card body text */
.stat-card p,
.framework-card p,
.process-card p,
.pillar-card p,
.commitment-card p,
.credential-card p {
    font-size: 13px;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.75;
}

/* Card CTAs / links */
.stat-card .cta,
.framework-card .cta,
.card-link {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--msl-gold);
}


/* ──────────────────────────────────────────
   H. UNIFIED BUTTON SYSTEM
   Four styles: primary, secondary, ghost, text.
   4px radius. 600 weight. 11px. 2px spacing.
   ────────────────────────────────────────── */

/* Base button reset */
.transition-cta,
.cc-btn,
.apt-btn,
.portal-btn,
.filter-btn,
.apt-filter-btn,
.mkt-filter-btn,
.export-btn,
.reset-btn,
.scenario-btn,
.welcome-btn,
.contact-cta,
.cta-button,
.landing-cta,
.pe-btn,
.mp-btn,
.fp-btn,
.zoom-btn,
button[class*="-btn"],
button[class*="-cta"] {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}

/* PRIMARY — Gold fill (main CTAs) */
.transition-cta,
.landing-cta,
.cc-btn:not(.outline),
.apt-btn-primary,
.portal-btn-gold,
.welcome-btn,
.contact-cta {
    background: var(--msl-gold) !important;
    color: var(--bg-void) !important;
    border: 1px solid var(--msl-gold) !important;
    padding: 14px 32px !important;
}

.transition-cta:hover,
.landing-cta:hover,
.cc-btn:not(.outline):hover,
.apt-btn-primary:hover,
.portal-btn-gold:hover,
.welcome-btn:hover,
.contact-cta:hover {
    background: var(--gold-hover) !important;
    border-color: var(--gold-hover) !important;
    box-shadow: var(--glow-gold-medium) !important;
    transform: translateY(-2px);
}

/* SECONDARY — Gold outline */
.cc-btn.outline,
.apt-btn-outline,
.portal-btn-outline {
    background: transparent !important;
    color: var(--msl-gold) !important;
    border: 1px solid var(--msl-gold) !important;
    padding: 14px 32px !important;
}

.cc-btn.outline:hover,
.apt-btn-outline:hover,
.portal-btn-outline:hover {
    background: rgba(219,186,92,0.08) !important;
}

/* GHOST — Subtle border (filters, toggles) */
.filter-btn,
.apt-filter-btn,
.mkt-filter-btn,
.scenario-btn,
.export-btn,
.reset-btn {
    background: var(--bg-deep) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-light) !important;
    padding: 8px 18px !important;
}

.filter-btn:hover,
.apt-filter-btn:hover,
.mkt-filter-btn:hover,
.scenario-btn:hover,
.export-btn:hover,
.reset-btn:hover {
    background: var(--bg-surface) !important;
    color: var(--text-heading) !important;
    border-color: var(--border-visible) !important;
}

/* GHOST ACTIVE STATE — Gold accent */
.filter-btn.active,
.apt-filter-btn.active,
.mkt-filter-btn.active,
.scenario-btn.active {
    background: rgba(219,186,92,0.08) !important;
    color: var(--msl-gold) !important;
    border-color: var(--msl-gold) !important;
}

/* TEXT LINK — Gold, no border */
.cc-btn-link,
.apt-btn-link {
    background: none !important;
    border: none !important;
    color: var(--msl-gold) !important;
    padding: 0 !important;
    letter-spacing: 1.5px !important;
}

.cc-btn-link:hover,
.apt-btn-link:hover {
    color: var(--gold-hover) !important;
}

/* Transition CTA SVGs */
.transition-cta svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}


/* ──────────────────────────────────────────
   I. NAVIGATION — Unified
   ────────────────────────────────────────── */

.nav-bar {
    background: rgba(10, 16, 25, 0.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle) !important;
}

.nav-tab {
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    color: var(--text-muted) !important;
}

.nav-tab:hover {
    color: var(--text-secondary) !important;
}

.nav-tab.active {
    color: var(--msl-gold) !important;
}

.nav-tab.active::after {
    background: var(--msl-gold) !important;
}

/* Stepper / anchor bar */
.stepper-bar {
    background: rgba(13, 21, 32, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle) !important;
}


/* ──────────────────────────────────────────
   J. SECTION-SPECIFIC ATMOSPHERES
   Subtle colour hints per section, using the
   brand combination pairings.
   ────────────────────────────────────────── */

/* Opportunity — Heritage Meets River */
#section-opportunity .opportunity-hero {
    background:
        radial-gradient(ellipse at 70% 25%, rgba(212,148,58,0.06) 0%, transparent 50%),
        linear-gradient(170deg, var(--bb-river) 0%, var(--bg-abyss) 70%) !important;
}
#section-opportunity .kicker {
    color: var(--bb-amber) !important;
}

/* Challenge — Steel & Timber */
#section-challenge .challenge-opening {
    background:
        radial-gradient(ellipse at 30% 70%, rgba(122,104,87,0.08) 0%, transparent 50%),
        linear-gradient(170deg, rgba(61,79,92,0.25) 0%, var(--bg-abyss) 70%) !important;
}
#section-challenge .kicker {
    color: var(--bb-amber) !important;
}
#section-challenge .consideration-section {
    border-left: 3px solid rgba(61,79,92,0.4) !important;
}

/* Solution — Navy + Ivory */
#section-solution .kicker {
    color: var(--msl-gold) !important;
}

/* Why MSL — Navy + Gold Classic */
#section-why-msl .why-msl-opening::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(219,186,92,0.1) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* Partnership — Rose VIP */
#section-partnership .kicker {
    color: var(--msl-rose) !important;
}
#section-partnership .shayher-hero {
    background:
        radial-gradient(ellipse at 40% 30%, rgba(196,160,168,0.06) 0%, transparent 50%),
        linear-gradient(170deg, var(--bb-river) 0%, var(--bg-abyss) 70%) !important;
}

/* Next Steps — Heritage Return */
#section-next-steps .kicker {
    color: var(--bb-amber) !important;
}


/* ──────────────────────────────────────────
   K. DASHBOARD UNIFICATION
   Command Centres, Buyer Intelligence, Pricing
   — all inherit the same card/button/text system
   ────────────────────────────────────────── */

/* Dashboard containers — Abyss base */
.cc-container,
.apt-container,
.bi-container,
.pi-container,
[class*="-dashboard"] {
    background: var(--bg-abyss) !important;
}

/* Dashboard headers — River Deep gradient */
.cc-header,
.apt-header,
.mkt-header,
[class*="-header"]:not(.nav-bar):not(.stepper-bar) {
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Dashboard section titles */
.cc-section-title,
.apt-section-title,
.bi-section-title {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    color: var(--text-white) !important;
}

/* Dashboard panels/sections */
.cc-panel,
.apt-panel,
.bi-panel,
.mkt-panel {
    background: var(--bg-midnight) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: 12px !important;
}

/* Chart containers */
.chart-container,
.chart-area,
[class*="chart-wrap"] {
    background: var(--bg-deep) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: 12px !important;
}


/* ──────────────────────────────────────────
   L. LANDING PAGE — Premium entrance
   ────────────────────────────────────────── */

.landing-badge {
    background: rgba(212, 148, 58, 0.12) !important;
    border: 1px solid rgba(212, 148, 58, 0.4) !important;
    border-radius: 4px !important;
}

.landing-badge-text {
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 4px !important;
    color: var(--bb-amber) !important;
}

.landing-meta {
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    color: var(--text-tertiary) !important;
}

.landing-footer-line {
    background: linear-gradient(90deg, transparent, rgba(219,186,92,0.15), transparent) !important;
}


/* ──────────────────────────────────────────
   M. LINKS & GLOBAL ACCENTS
   ────────────────────────────────────────── */

a {
    color: var(--msl-gold);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--gold-hover);
}


/* ──────────────────────────────────────────
   N. EDITORIAL RULES & DIVIDERS
   ────────────────────────────────────────── */

/* WHY MSL: Pricing two-column layout */
.pricing-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 60px;
}
.pricing-narrative p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* WHY MSL: Melinda banner */
.melinda-banner {
    text-align: center;
    padding: 60px 40px;
    margin-bottom: 60px;
    background: linear-gradient(135deg, rgba(219,186,92,0.06) 0%, rgba(29,47,78,0.2) 50%, rgba(219,186,92,0.04) 100%);
    border: 1px solid var(--border-gold);
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

/* WHY MSL: Melinda two-column */
.melinda-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.melinda-bio p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* WHY MSL: Five Reasons two-column */
.reasons-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
}
.reasons-col-left,
.reasons-col-right {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (max-width: 768px) {
    .pricing-two-col,
    .melinda-two-col,
    .reasons-two-col {
        grid-template-columns: 1fr;
    }
}

/* Partnership: Trust two-column */
.partnership-trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}
.partnership-trust-prose .body-text {
    text-align: left;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.85;
    color: #FFFFFF;
}
.partnership-trust-quote {
    display: flex;
    align-items: flex-start;
    padding-top: 20px;
}
.trust-quote-box {
    padding: 40px 36px;
    border: 1px solid var(--border-gold);
    border-radius: 4px;
    background: rgba(219,186,92,0.04);
}
.trust-quote-text {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.7;
    color: var(--msl-gold);
    text-align: center;
    margin-bottom: 4px;
}
.trust-quote-text:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
    .partnership-trust-grid {
        grid-template-columns: 1fr;
    }
}

.editorial-rule,
.closing-rule,
.section-rule {
    background: rgba(219, 186, 92, 0.2) !important;
    height: 1px !important;
    border: none !important;
}


/* ──────────────────────────────────────────
   O. EMBEDDED TOOL BACKGROUNDS
   The command centres and tools use consistent bg tiers.
   ────────────────────────────────────────── */

/* Tab/filter bars inside tools */
.cc-tabs,
.apt-tabs,
.price-tabs,
.bi-tabs {
    background: var(--bg-midnight) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Table headers */
.cc-table thead th,
.apt-table thead th,
.data-table thead th,
[class*="table"] thead th {
    background: var(--bg-deep) !important;
    color: var(--text-secondary) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--border-light) !important;
}

/* Table rows */
.cc-table tbody td,
.apt-table tbody td,
.data-table tbody td {
    border-bottom: 1px solid var(--border-subtle) !important;
    font-size: 13px !important;
    font-weight: 300 !important;
}

/* Table row hover */
.cc-table tbody tr:hover,
.apt-table tbody tr:hover,
.data-table tbody tr:hover {
    background: rgba(29, 47, 78, 0.15) !important;
}

/* Status badges in tools */
.status-badge,
.cc-stage-badge,
[class*="badge"] {
    border-radius: 2px !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}


/* ──────────────────────────────────────────
   P. MODALS & OVERLAYS
   ────────────────────────────────────────── */

.modal-overlay,
[class*="modal-bg"] {
    background: rgba(8, 12, 18, 0.85) !important;
    backdrop-filter: blur(8px);
}

.modal-content,
[class*="modal-body"],
[class*="modal-container"] {
    background: var(--bg-midnight) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
}


@media print {
.pi-container body { background:#fff !important; color:#1a1a1a !important; }
.pi-container .price-header { background:#fff !important; border-bottom:2px solid var(--msl-navy); }
.pi-container .price-header::before { display:none; }
.pi-container .price-kicker, .pi-container .price-title, .pi-container .price-subtitle { opacity:1 !important; animation:none !important; }
.pi-container .price-title { color:var(--msl-navy) !important; font-size:1.8rem; }
.pi-container .price-kicker { color:var(--bb-copper) !important; }
.pi-container .price-subtitle { color:var(--text-muted) !important; }
.pi-container .price-tabs, .pi-container .header-actions, .pi-container .scenario-bar, .pi-container .filter-bar, .pi-container .table-toolbar, .pi-container .override-input, .pi-container .control-section { display:none !important; }
.pi-container .price-panel { display:block !important; }
.pi-container .data-table-wrap { border:1px solid var(--border-visible); }
.pi-container .data-table thead th { background:#f5f0e6 !important; color:var(--msl-navy) !important; font-size:.6rem; }
.pi-container .data-table thead th.group-header { background:var(--bg-elevated) !important; color:var(--msl-gold) !important; }
.pi-container .data-table tbody tr { border-bottom:1px solid var(--border-light); }
.pi-container .data-table td { color:var(--text-heading) !important; font-size:.68rem; padding:6px 8px; }
.pi-container .data-table td.stage { color:var(--bb-copper) !important; }
.pi-container .data-table td.adjusted { color:#2E7D32 !important; }
.pi-container .data-table td.variance-pos { color:#2E7D32 !important; }
.pi-container .data-table td.variance-neg { color:#C62828 !important; }
.pi-container .data-table tfoot td { background:#f5f0e6 !important; color:var(--msl-navy) !important; border-top:2px solid var(--msl-navy); }
.pi-container .summary-card { background:#f9f9f7 !important; border:1px solid var(--border-visible) !important; page-break-inside:avoid; }
.pi-container .summary-value { color:var(--msl-navy) !important; }
.pi-container .summary-card.gold .summary-value { color:var(--bb-copper) !important; }
.pi-container .summary-card.variance .summary-value { color:#2E7D32 !important; }
.pi-container .building-badge { border:1px solid var(--border-visible); }
.pi-container .building-badge.north { background:#f5f0e6 !important; color:var(--bb-copper) !important; }
.pi-container .building-badge.south { background:#f0e0e4 !important; color:#9a7a82 !important; }
.pi-container .timestamp-footer { border-top:1px solid var(--border-visible); }
.pi-container .timestamp-footer span { color:#999 !important; }
.pi-container .spark-wrap .spark-bar { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
    @page { margin:1cm; size:landscape; }
}


/* Brand: Challenge stat numbers in Amber */
.challenge-stat .stat-number,
.challenge-stat .value,
#section-challenge .stat-value {
    color: var(--bb-amber) !important;
}

/* Brand: Solution section card borders */
#section-solution .card,
.framework-card,
.process-card,
.responsibility-card {
    border-left: 2px solid rgba(219, 186, 92, 0.15) !important;
}

/* Brand: Why MSL percentage/proof stats */
#section-why-msl .proof-stat,
#section-why-msl .stat-value,
.pricing-intro .stat-value,
.percentage-value {
    color: var(--msl-gold) !important;
    font-family: var(--font-display) !important;
    font-weight: 300 !important;
}

/* Brand: Partnership fee values — Rose accent */
#section-partnership .fee-value {
    color: var(--msl-rose) !important;
}

/* Brand: Partnership scope cards — rose border top */
#section-partnership .scope-card {
    border-top: 2px solid rgba(196, 160, 168, 0.2);
}

/* Brand: Next Steps timeline dots — amber */
.ns-timeline-dot,
.ns-step-number {
    border-color: var(--bb-amber) !important;
    color: var(--bb-amber) !important;
}

/* Brand: All section divider rules → gold gradient */
.section-block + .section-block {
    border-top: 1px solid transparent;
    background-clip: padding-box;
    position: relative;
}
.section-block + .section-block::before {
    content: "";
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(219,186,92,0.15) 50%, transparent);
    pointer-events: none;
}

/* ──────────────────────────────────────────
   OPPORTUNITY: Waveform + Shimmer Button
   ────────────────────────────────────────── */
.opp-prose-wrapper {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
}
.opp-waveform {
    position: absolute;
    left: -60px;
    top: 0;
    width: 50px;
    height: 100%;
    opacity: 0.5;
    pointer-events: none;
}
.opp-shimmer-btn {
    position: relative;
    overflow: hidden;
    background: var(--msl-gold) !important;
    color: var(--bg-void) !important;
    border-color: var(--msl-gold) !important;
    padding: 18px 48px !important;
    display: inline-flex !important;
}
.opp-shimmer-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmerSweep 3s ease-in-out infinite;
}
@keyframes shimmerSweep {
    0% { left: -100%; }
    40% { left: 150%; }
    100% { left: 150%; }
}
.opp-shimmer-btn:hover {
    background: #c9a84e !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(219,186,92,0.3);
}

/* ──────────────────────────────────────────
   CHALLENGE: Two-Column Layouts
   ────────────────────────────────────────── */

/* The Consideration: prose left, pull quote right */
.consideration-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-top: 40px;
}
.consideration-prose p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-secondary);
    margin-bottom: 20px;
}
.consideration-quote-col {
    display: flex;
    align-items: flex-start;
    padding-top: 10px;
}
.consideration-pullquote {
    padding: 32px 28px;
    border-left: 3px solid var(--msl-gold);
    background: rgba(219,186,92,0.04);
    border-radius: 0 4px 4px 0;
}
.consideration-pullquote p {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-heading);
}

/* Brand Integrity: two-column observations */
.integrity-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 40px;
}
.integrity-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Working Together: two-column */
.collaboration-two-col {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: start;
    margin-top: 40px;
}
.collaboration-closing-col {
    display: flex;
    align-items: center;
    height: 100%;
}
.collaboration-closing-col .collaboration-closing {
    text-align: left;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-heading);
}

@media (max-width: 768px) {
    .consideration-two-col,
    .integrity-two-col,
    .collaboration-two-col {
        grid-template-columns: 1fr;
    }
}

/* ──────────────────────────────────────────
   SOLUTION: Layout Adjustments
   ────────────────────────────────────────── */

/* Process: Two-column layout */
.process-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}
.process-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media (max-width: 900px) {
    .responsibilities { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
    .responsibilities { grid-template-columns: 1fr !important; }
    .process-two-col { grid-template-columns: 1fr; }
    .reporting-benefits { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────
   PARTNERSHIP: Closing Full-Width Block
   ────────────────────────────────────────── */
.partnership-closing-fullwidth {
    background: var(--bg-void) !important;
    margin-left: -60px !important;
    margin-right: -60px !important;
    margin-bottom: -60px !important;
    padding: 80px 60px !important;
    text-align: center;
    max-width: none !important;
    width: calc(100% + 120px) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}