/* =========================================================
   4. GOLDEN NAVIGATION BUTTONS & DROPDOWNS (UNIFIED & TIGHTENED)
   ========================================================= */
.cta-btn {
    background: linear-gradient(135deg, #EAD793 0%, #C5A028 100%) !important;
    color: #2A1A00 !important; 
    border: 3px solid #FFF0A5 !important;       /* 🎯 UNIFIED: Matches 3px gold frame across all buttons */
    padding: 6px 12px !important;
    border-radius: 8px !important;              /* 🎯 UNIFIED: Matches 8px corners across all buttons */
    font-family: 'Bookman Old Style', serif !important;
    font-weight: bold !important;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box !important;
}

.cta-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
    background: linear-gradient(135deg, #FFE07D 0%, #B8860B 100%) !important;
}

/* Updated Golden Dropdown Menus with Solid Outlines */
.dropdown-content {
    position: absolute !important;
    background: linear-gradient(180deg, #EAD793 0%, #D4AF37 100%) !important;
    padding: 2px 0 6px 0 !important;
    width: 130px !important;              /* 🎛️ Container width */
    min-width: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    border: 3px solid #FFF0A5 !important; /* 🎯 MATCHING BORDER: Clean gold frame for dropdown panel */
    margin-top: 4px !important;           /* 📍 TIGHTENED: Drops panel directly under the button edge */
    z-index: 9999 !important;             /* Brings dropdown above all other background layers */
}

/* Upward-Pointing Arrow Tip */
.dropdown-content::before {
    content: "" !important;
    position: absolute !important;
    top: -14px !important; 
    left: 2px !important;                /* Shifts arrow nicely inward from left corner */
    border-width: 0 10px 10px 10px !important;
    border-style: solid !important;
    border-color: transparent transparent #EAD793 transparent !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
}

/* Links Inside the Dropdown */
.dropdown-content a {
    color: #2A1A00 !important;
    padding: 4px 16px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    transition: background 0.2s ease !important;
    text-align: left !important;
    display: block !important;
}

.dropdown-content a:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* 5. MODAL SYSTEM OVERLAYS */
.modal {
    display: none;
    position: fixed;
    z-index: 2000; 
    left: 0; 
    top: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.dropdown-content {
    position: absolute;
    background: linear-gradient(180deg, #EAD793 0%, #D4AF37 100%);
    padding: 10px 0 15px 0;
    width: 180px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.dropdown-menu, .dropdown-lang {
    top: 110px;
    right: 5%;
    align-items: flex-start;
}

.close-menu {
    align-self: flex-end;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    margin-bottom: 10px;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.nav-list a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
}

.nav-list a:hover {
    color: #E63946;
}

/* 6. FLOATING TOP PAGE BUTTON (Restored completely) */
.top-page-floating-btn {
    display: flex; /* Controlled via JS for visibility, using flex for inner layout */
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #D4AF37 0%, #AA7C11 100%);
    color: #2A1A00;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    border: 1px solid #FFF0A5;
    z-index: 1000;
    transition: transform 0.2s ease;
}
.top-page-floating-btn:hover {
    transform: scale(1.05);
}
.top-page-floating-btn span {
    font-size: 18px;
    margin-bottom: 1px;
}

/* =========================================================
   1. RESET & BASE
   ========================================================= */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: visible !important; 
    scroll-behavior: smooth;
    font-family: 'Bookman Old Style', serif;
    background-color: #f9f9f9;
}

.main-site-wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    position: relative;
} 

/* =========================================================
   2. THE HERO (Preserves Flat Background Image Integrity)
   ========================================================= */
.hero{
    position: relative;

    width: 100%;

    aspect-ratio: 1644 / 957;

    height: auto;

    background-image: url('../assets/MainHero-Cityscape.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* NEW: The Inner Guardrail for Buttons & Knobs */
.hero-constrained-wrapper {
    width: 100%;
    max-width: 1440px;  /* Stops percentage calculation at 1440px */
    height: 100%;
    margin: 0 auto;     /* Keeps buttons centered on ultra-wide monitors */
    position: relative; /* Allows absolute buttons inside to calculate correctly */
}

/* =========================================================
   RESPONSIVE TOP NAV SYSTEM
   ========================================================= */

/* BASE GRID CTA STYLES */

.grid-cta-btn {
    padding: 0 15px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    width: 200px;
    height: 55px !important;

    box-sizing: border-box !important;
}

.grid-cta-btn.split-btn {
    padding: 0 !important;
    justify-content: space-between !important;
}

.btn-content-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    padding-left: 12px !important;

    flex-grow: 1 !important;
    height: 100% !important;
}

.blue-arrow-section {
    width: 45px !important;
    height: 55px !important;

    background: linear-gradient(
        135deg,
        #1E3A8A 0%,
        #0D9488 100%
    ) !important;

    border-left: 2px solid #FFF0A5 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #FFFFFF !important;

    font-size: 11px !important;
    font-weight: bold !important;

    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.grid-cta-btn:hover .blue-arrow-section {
    background: linear-gradient(
        135deg,
        #2563EB 0%,
        #06B6D4 100%
    ) !important;
}

.grid-main-icon {
    width: 22px !important;
    height: 22px !important;

    display: inline-block !important;
    flex-shrink: 0 !important;
}

.grid-dropdown-wrapper .grid-cta-btn::after {
    display: none !important;
    content: "" !important;
}

.dropdown-content {
    display: none !important;

    position: absolute !important;
    top: 100% !important;
    left: 0 !important;

    width: 180px !important;

    margin-top: 8px !important;

    box-sizing: border-box !important;
}

/* DESKTOP HOVER */

@media (hover: hover) and (pointer: fine) {

    #promoNavBtn:hover {
        border-color: #fff2cc;
    }

    .hero-dropdown-container button:first-of-type:hover {
        border-color: #fff2cc;
    }

    .hero-dropdown-container .sub-btn-pill-target:hover {
        background: #d4af37 !important;
        color: #000000 !important;
    }
}

/* TABLET

@media (max-width: 1024px) {

    .top-nav-container {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .nav-left-squares,
    .nav-right-grid {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .imposing-square-btn {
        width: 48% !important;
        max-width: 220px;
    }

    .hero-button-wrapper {
        position: relative !important;

        top: 0 !important;
        left: 0 !important;

        transform: none !important;

        margin: 10px auto;
        padding: 0 10px;
    }
}*/

/* MOBILE

@media (max-width: 768px) {

    .hero-button-wrapper {
        flex-direction: column !important;

        gap: 12px !important;

        width: 100% !important;
    }

    .hero-promo-container,
    .hero-dropdown-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .imposing-square-btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    .grid-cta-btn {
        width: 100% !important;
        justify-content: center;
    }

    .hero-button-wrapper > div[style*="flex: 1"] {
        display: none !important;
    }
}*/

/* =========================================================
   0. MASTER CONTROL KNOBS (GLOBAL DEFAULTS)
   ========================================================= */
:root {
    /* Global Navigation Top Spacing Knob */
    --nav-top-offset: 10px; /* Adjust this knob to push navigation down */

    /* Top Row Pills (Events & Other Activities) */
    --pill-w: 300px;
    --pill-h: 58px;
    --pill-font: 1rem;

    /* Square Buttons (Mindset & Values) */
    --sq-w: 125px;
    --sq-h: 54px;
    --sq-font: 0.9rem;

    /* Regular Grid CTA Buttons (Our Mission & Solutions) */
    --cta-w: 125px;
    --cta-h: 54px;
    --cta-font: 0.95rem;

    /* Split Dropdown Buttons (Language & Get Started) */
    --dropdown-w: 72px;
    --dropdown-h: 26px;
    --dropdown-font: 0.9rem;
}

/* =========================================================
   1. NAVIGATION CONTAINER & ROWS (FLEXBOX ENGINE)
   ========================================================= */
.unified-nav-container {
    width: 100% !important;
    max-width: 100% !important;
    /* Bulletproof offset using padding and transform so fixed/absolute positioning won't block it */
    padding-top: var(--nav-top-offset, 25px) !important;
    transform: translateY(var(--nav-top-offset, 25px)) !important;
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    z-index: 100;
}

.top-row,
.second-row {
    width: 100% !important;
    box-sizing: border-box !important;
}

.left-group,
.center-group,
.right-group {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
}

.nav-item-wrapper,
.imposing-square-btn,
.grid-cta-btn,
.mission-btn,
.solutions-btn,
.compact-pill-btn,
.grid-dropdown-wrapper {
    flex-shrink: 0 !important;
}

/* =========================================================
   2. TOP ROW PILL BUTTONS & DROPDOWNS (Events & Other Activities)
   ========================================================= */
#eventsDropdownMenu .dropdown-card,
#luxuryPillMenu .sub-btn-pill-target {

    border-radius: 20px !important;

    border: 2px solid #D4AF37 !important;

    background: #fffdf6 !important;

    transition: all 0.25s ease !important;
}

#luxuryPillMenu .sub-btn-pill-target img {
    filter:
        drop-shadow(0 3px 5px rgba(0,0,0,0.35))
        saturate(1.35)
        contrast(1.15);
}

#eventsDropdownMenu .dropdown-card:hover,
#luxuryPillMenu .sub-btn-pill-target:hover {

    background: #fff8dc !important;

    border-color: #D4AF37 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 4px 12px rgba(212,175,55,0.35) !important;
}

/* A. Force Top Row Layer above Second Row */
.top-row {
    position: relative !important;
    z-index: 500 !important; /* Ensures dropdowns float over row 2 */
}

.second-row {
    position: relative !important;
    z-index: 1 !important;
}

/* B. Lock Outer Wrapper to the Pill Knob (--pill-w) & Set Center Anchor */
.top-row .nav-item-wrapper,
.nav-item-wrapper:has(.compact-pill-btn) {
    width: var(--pill-w, 285px) !important;
    min-width: var(--pill-w, 285px) !important;
    max-width: var(--pill-w, 285px) !important;
    flex: 0 0 var(--pill-w, 285px) !important;
    position: relative !important;
    overflow: visible !important; /* Allows dropdown to float outside boundary */
}

/* C. Pill Button Base Visual Styling */
.compact-pill-btn {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: var(--pill-h, 55px) !important;
    min-height: var(--pill-h, 55px) !important;
    max-height: var(--pill-h, 55px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 16px !important;
    box-sizing: border-box !important;
    cursor: pointer;
    white-space: nowrap !important;
    background: linear-gradient(135deg, #EAD793 0%, #C5A028 100%) !important;
    color: #000000 !important;
    border: 3px solid #FFF0A5 !important;
    border-radius: 30px !important;
    font-family: 'Bookman Old Style', serif !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    overflow: visible !important;
    position: relative !important;
}

.compact-pill-btn,
.compact-pill-btn * {
    font-size: var(--pill-font, 1.1rem) !important;
}

.compact-pill-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    background: linear-gradient(135deg, #FFF0A5 0%, #D4AF37 100%) !important;
}

/* D. Top Row Dropdown Menus (Corrected Offset) */
.top-row .dropdown-content,
.top-row .dropdown-menu,
.top-row .sub-menu,
.nav-item-wrapper:has(.compact-pill-btn) .dropdown-content {
    display: none;
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 6px) !important; /* Fixes the vertical pull-up */
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 99999 !important;
    background: #fffdf6;
    border: 2px solid #D4AF37;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
    
    /* -----------------------------------------------------------
       YOUR MASTER CONTROL KNOB FOR VERTICAL DISTANCE:
       - Change '-6px' to '-12px' to pull higher (overlap button)
       - Change '-6px' to '0px' or '+4px' to push lower
       ----------------------------------------------------------- */
    top: calc(100% - 100px) !important; 
    
    right: auto !important;
    transform: translateX(-50%) !important; /* Dead-centers menu */
    margin: 0 !important;                    /* Prevents hidden browser margin conflicts */
    z-index: 99999 !important;
    background: #fffdf6;
    border: 2px solid #D4AF37;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

/* E. Display States for Hover / Click */
.top-row .dropdown-content.is-active,
.top-row .dropdown-menu.is-active,
.top-row .sub-menu.is-active,
.top-row .nav-item-wrapper:hover .dropdown-content,
.top-row .nav-item-wrapper:focus-within .dropdown-content {
    display: block !important;
}

/* =========================================================
   EVENTS BUTTON ICON SCALING (BELL & CALENDAR)
   ========================================================= */

/* 1. Keep icon wrapper containers centered */
#eventsNavBtn .pill-icon-left,
#eventsNavBtn .pill-icon-right {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Scale Bell Icon (Left) */
#eventsNavBtn .pill-icon-left span {
    display: inline-block !important;
    font-size: 28px !important;          /* Adjust pixel size for emoji */
    transform: scale(1.25) !important;    /* Scale multiplier (e.g., 1.3, 1.4) */
    transition: transform 0.2s ease !important;
}

/* 3. Scale Calendar Icon (Right) */
#eventsNavBtn .pill-icon-right span {
    display: inline-block !important;
    font-size: 28px !important;          /* Adjust pixel size for emoji */
    transform: scale(1.25) !important;    /* Scale multiplier (e.g., 1.3, 1.4) */
    transition: transform 0.2s ease !important;
}

/* =========================================================
   3. BASE VISUAL STYLES: SQUARE BUTTONS (Mindset & Values)
   ========================================================= */
.imposing-square-btn {
    flex: 0 0 var(--sq-w, 125px) !important;
    width: var(--sq-w, 105px) !important;
    min-width: var(--sq-w, 105px) !important;
    max-width: var(--sq-w, 135px) !important;
    height: var(--sq-h, 54.5px) !important;  
    min-height: var(--sq-h, 54.5px) !important;
    max-height: var(--sq-h, 60px) !important;
    background: linear-gradient(180deg, #EAD793 0%, #C5A028 100%) !important;
    border: 3px solid #FFF0A5 !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 8px !important; 
    box-sizing: border-box !important;
    text-decoration: none !important;
    color: #000000 !important; 
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 4px rgba(255, 255, 255, 0.4) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    overflow: hidden !important;
}

.imposing-square-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
    background: linear-gradient(180deg, #FFF0A5 0%, #D4AF37 100%) !important;
}

.imposing-square-btn,
.imposing-square-btn * {
    font-size: var(--sq-font, 0.9rem) !important;
}

.square-btn-title {
    font-family: 'Bookman Old Style', serif !important;
    font-weight: 900 !important; 
    text-align: center !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    white-space: nowrap !important;
}

.square-icon-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    overflow: hidden !important;
}

/* =========================================================
   4. BASE VISUAL STYLES: CTA, MISSION & SOLUTIONS BUTTONS
   (EXCLUDES SPLIT / DROPDOWN BUTTONS)
   ========================================================= */
.nav-item-wrapper:has(.grid-cta-btn:not(.split-btn)),
.nav-item-wrapper:has(.mission-btn),
.nav-item-wrapper:has(.solutions-btn),
.grid-cta-wrapper {
    width: var(--cta-w, 125px) !important;
    min-width: var(--cta-w, 105px) !important;
    max-width: var(--cta-w, 135px) !important;
    flex: 0 0 var(--cta-w, 105px) !important;
}

.grid-cta-btn:not(.split-btn),
.mission-btn,
.solutions-btn,
a.grid-cta-btn:not(.split-btn),
button.grid-cta-btn:not(.split-btn) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--cta-w, 105px) !important;
    width: var(--cta-w, 105px) !important;
    min-width: var(--cta-w, 105px) !important;
    max-width: var(--cta-w, 135px) !important;
    height: var(--cta-h, 54.5px) !important;
    min-height: var(--cta-h, 54.5px) !important;
    max-height: var(--cta-h, 54.5px) !important;
    background: linear-gradient(135deg, #EAD793 0%, #C5A028 100%) !important;
    color: #000000 !important; 
    border: 3px solid #FFF0A5 !important;
    border-radius: 16px !important;
    font-family: 'Bookman Old Style', serif !important;
    font-weight: 900 !important; 
    cursor: pointer;
    text-decoration: none;
    gap: 6px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.grid-cta-btn:not(.split-btn),
.grid-cta-btn:not(.split-btn) *,
.mission-btn,
.mission-btn *,
.solutions-btn,
.solutions-btn * {
    font-size: var(--cta-font, 0.95rem) !important;
}

.grid-cta-btn:not(.split-btn):hover,
.mission-btn:hover,
.solutions-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
    background: linear-gradient(135deg, #FFF0A5 0%, #D4AF37 100%) !important;
}

/* =========================================================
   5. DROPDOWN & SPLIT-BUTTON CONTROLS (Language & Get Started)
   ========================================================= */
.nav-item-wrapper:has(.grid-dropdown-wrapper),
.nav-item-wrapper:has(.split-btn) {
    width: var(--dropdown-w, 120px) !important;
    min-width: var(--dropdown-w, 120px) !important;
    max-width: var(--dropdown-w, 120px) !important;
    flex: 0 0 var(--dropdown-w, 120px) !important;
}

.grid-dropdown-wrapper {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 var(--dropdown-w, 120px) !important;
    width: var(--dropdown-w, 120px) !important;
    min-width: var(--dropdown-w, 120px) !important;
    max-width: var(--dropdown-w, 120px) !important;
    height: var(--dropdown-h, 54.5px) !important;       
    min-height: var(--dropdown-h, 54.5px) !important;       
    max-height: var(--dropdown-h, 54.5px) !important;       
    border-radius: var(--dropdown-radius, 16px) !important;
    box-sizing: border-box !important;
}

.grid-dropdown-wrapper .split-btn,
.grid-dropdown-wrapper .grid-cta-btn.split-btn,
.split-btn {       
    width: 100% !important;        
    min-width: 100% !important;        
    max-width: 100% !important;        
    flex: 0 0 100% !important;
    height: 100% !important;        
    min-height: 100% !important;        
    max-height: 100% !important;        
    padding: 0 !important;          
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #EAD793 0%, #C5A028 100%) !important;
    color: #000000 !important; 
    border: 3px solid #FFF0A5 !important;
    border-radius: var(--dropdown-radius, 8px) !important;
    font-family: 'Bookman Old Style', serif !important;
    font-weight: 900 !important; 
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}

.grid-dropdown-wrapper .split-btn:hover,
.split-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
    background: linear-gradient(135deg, #FFF0A5 0%, #D4AF37 100%) !important;
}

.grid-dropdown-wrapper .btn-content-left,
.split-btn .btn-content-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;        
    min-width: 0 !important; 
    height: 100% !important;        
    margin: 0 !important;
    padding: 0 4px !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.grid-dropdown-wrapper .blue-arrow-section,
.split-btn .blue-arrow-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; 
    text-align: center !important;
    width: 30px !important;        
    min-width: 25px !important;
    height: 100% !important;        
    background: linear-gradient(135deg, #1E3A8A 0%, #0D9488 100%) !important; 
    border-left: 2px solid #FFF0A5 !important; 
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.grid-dropdown-wrapper,
.grid-dropdown-wrapper *,
.split-btn,
.split-btn * {
    font-size: var(--dropdown-font, 0.85rem) !important;
}

.grid-dropdown-wrapper .blinking-status-text {
    color: #FF9F1C !important;
    font-size: 14px !important; 
    font-family: sans-serif !important;
    font-weight: bold !important;
    display: inline-block !important;
    animation: trueTextPulse 3s ease-in-out infinite !important;
}

.grid-dropdown-wrapper:hover .blue-arrow-section {
    background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%) !important;
}

@keyframes trueTextPulse {
    0%, 100% { opacity: 0.30; }
    50% { opacity: 1.0; }
}

/* Dropdown Menu Overlay Panels */
.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: #fffdf6;
    border: 2px solid #D4AF37;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 99999;
}

.dropdown-content.is-active {
    display: block;
}

.dropdown-content a {
    display: block;
    padding: 8px 12px;
    color: #1e293b;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    transition: .15s ease;
}

.dropdown-content a:hover {
    background: #ea8a32;
    color: white;
}

#langDropdown.dropdown-content {
    min-width: 45px !important;     
    width: 50px !important;
    text-align: center !important;  
}

#langDropdown.dropdown-content a {
    text-align: center !important;  
    padding: 6px 0 !important;     
}

#startDropdown.dropdown-content {
    min-width: 150px !important;     
    width: 155px !important;        
}

/* =========================================================
   6. DROPDOWN & SPLIT-BLUE SECTION CONTROLS
   ========================================================= */
.custom-dropdown-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; 
    padding: 0 !important;
    overflow: hidden !important;
    width: 75px !important; 
    height: 35px !important;
}

.btn-content-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-left: 12px;
    flex-grow: 1;
}

.custom-dropdown-trigger .blue-arrow-section {
    width: 45px !important;
    height: 35px !important; 
    background: linear-gradient(135deg, #1E3A8A 0%, #0D9488 100%) !important; 
    border-right: 2px solid #FFF0A5 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.custom-dropdown-trigger .blinking-status-text {
    color: #FF9F1C !important;
    font-size: 18px !important; 
    font-family: sans-serif !important;
    font-weight: bold !important;
    display: inline-block !important;
    animation: trueTextPulse 3s ease-in-out infinite !important;
}

.custom-dropdown-trigger:hover .blue-arrow-section {
    background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%) !important;
}

@keyframes trueTextPulse {
    0%, 100% { opacity: 0.30; }
    50% { opacity: 1.0; }
}

/* =========================================================
   7. ULTRA-COMPACT DROPDOWN BUTTONS
   ========================================================= */
.grid-dropdown-wrapper {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    height: 40px !important;       
}

.grid-dropdown-wrapper .grid-cta-btn.split-btn,
.grid-cta-btn.split-btn {       
    width: 80px !important;        
    height: 40px !important;       
    padding: 0 !important;          
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
}

.grid-dropdown-wrapper .btn-content-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;        
    height: 40px !important;       
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.grid-dropdown-wrapper .grid-main-icon {
    width: 18px !important; 
    height: 18px !important;
}

.grid-dropdown-wrapper .blue-arrow-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; 
    text-align: center !important;
    width: 37px !important;        
    height: 40px !important;       
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.70rem !important;  
}

.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: #fffdf6;
    border: 2px solid #D4AF37;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 99999;
}

.dropdown-content.is-active {
    display: block;
}

.dropdown-content a {
    display: block;
    padding: 8px 12px;
    color: #1e293b;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    transition: .15s ease;
}

.dropdown-content a:hover {
    background: #ea8a32;
    color: white;
}

#langDropdown.dropdown-content {
    min-width: 45px !important;     
    width: 45px !important;
    text-align: center !important;  
}

#langDropdown.dropdown-content a {
    text-align: center !important;  
    padding: 4px 0 !important;     
}

#startDropdown.dropdown-content {
    min-width: 140px !important;     
    width: 140px !important;        
}

/* =========================================================
   8.3rd ROW: ICON-ONLY EXPANDABLE SEARCH TRIGGER
   ========================================================= */
/* =========================================================
   ENLARGED SEARCH TRIGGER ICON
   ========================================================= */

/* Icon-Only Button Trigger (No Background / No Border) */
.search-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    margin-top: 35px !important;
    box-shadow: none !important;
    padding: 8px !important; /* Increased hit area */
    cursor: pointer !important;
    transition: transform 0.25s ease, opacity 0.2s ease !important;
    z-index: 2;
}

.search-cta-btn:hover {
    transform: scale(1.4) !important; /* Hover enlargement */
    background: transparent !important;
    box-shadow: none !important;
}

/* Enlarged SVG Icon Dimensions */
.orange-search-icon {
    width: 40px !important;  /* Adjust size: 28px (medium), 32px (large), 36px (extra large) */
    height: 40px !important; /* Keep identical to width */
    stroke: #FF7F00 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
    transition: filter 0.25s ease !important;
}

/* Orange Glow Effect on Hover */
.search-cta-btn:hover .orange-search-icon {
    filter: drop-shadow(0 0 8px rgba(255, 127, 0, 0.8)) !important;
}

/* Expanded Input Bar (Unchanged) */
.nav-search-input-wrapper {
    display: flex;
    align-items: center;
    width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(
    180deg,
    #F4F4F5 0%,
    #D4D4D8 100%
) !important;;
    backdrop-filter: blur(10px);
    border: 2px solid #C5A028;
    border-radius: 25px;
    padding: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* Active State (Expanded Bar) */
.nav-search-container.active .nav-search-input-wrapper {
    width: 320px;
    opacity: 1;
    pointer-events: auto;
    padding: 4px 6px 4px 16px;
}

.nav-search-container.active .search-cta-btn {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
}

/* Input Text Style */
#navSearchInput {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
}

#navSearchInput::placeholder {
    color: #757575;
    opacity: 1;
}

/* Action Buttons inside Input Bar */
.search-submit-btn,
.search-close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.2s ease;
}

.search-submit-btn {
    background: #FF7F00;
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin-right: 4px;
}

.search-submit-btn:hover {
    background: #E06F00;
    transform: scale(1.05);
}

.search-close-btn {
    color: #ff6600;
    font-size: 13px;
    font-weight: bold;
    width: 26px;
    height: 26px;
    min-width: 26px;
}

.search-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #FF7F00;
}

/* Highlighting matching words */
.search-matched-item {
    outline: 2px solid #FF7F00 !important;
    box-shadow: 0 0 12px rgba(255, 127, 0, 0.6) !important;
    transition: all 0.3s ease !important;
}

/* Brighten HT Gold on hover */
.search-cta-btn:hover .orange-search-icon circle {
    fill: #FFF0A5 !important;
}

/* 3. INSIDE LENS COLOR (RESTING STATE) */
.orange-search-icon circle,
.orange-search-icon path {
    fill: #FFFDF7 !important; /* <--- Change this to whatever preferred color you want! */
}

/* FORCE SEARCH MATCHES TO STAY VISIBLE OVER HOVER EVENTS */
#eventsDropdownMenu.force-search-open,
#luxuryPillMenu.force-search-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* =========================================================
   SEARCH NO MATCH BADGE & DEEP GALLERY REVEAL
   ========================================================= */

/* 1. Floating "No Match Found" Badge (Bypasses overflow:hidden) */
#navSearchNoResults {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(180deg, #1C1C1E 0%, #0A0A0C 100%) !important;
    color: #FF7F00 !important;                 /* HT Signature Orange */
    border: 1.5px solid #C5A028 !important;      /* HT Gold Border */
    border-radius: 20px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    opacity: 0 !important;
    visibility: hidden !hidden;
    pointer-events: none !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    z-index: 99999 !important;
}

/* Show State when no items match */
#navSearchNoResults.show-no-results {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 2. Glow Highlight for Matched Sub-items & Galleries */
.search-matched-item {
    outline: 3px solid #FF7F00 !important;
    box-shadow: 0 0 18px rgba(255, 127, 0, 0.85) !important;
    transition: all 0.3s ease !important;
}

/* 3. Force parent containers/tabs to display matching items */
.search-reveal-parent {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
}

/* =========================================================
   4th ROW: SLOGAN ("Illuminating the Path Forward")
   ========================================================= */
.brand-slogan-script {
    font-family: 'Great Vibe', 'Monotype Corsiva', 'Apple Chancery', 'Playball', cursive !important;
    font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
    font-weight: 400 !important;
    font-style: Python Script !important;
    color: #FFE57F !important;
    margin: 0 !important;
    padding: 0 10px !important;
    text-align: center !important;
    line-height: 1.8 !important;
    
    /* Soft Amber Glow & Sharp Dark Shadow */
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(255, 193, 7, 0.6),
        0 0 25px rgba(255, 152, 0, 0.4) !important;
}

/* =========================================================
   5th ROW: RESPONSIVE BRAND CONTAINER & INDEPENDENT BULB
   ========================================================= */

/* 1. The 5th Row Container */
.fifth-row {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    z-index: 10 !important;

    /* -----------------------------------------------------------
       VERTICAL CONTROL FOR TEXT:
       Change this margin-top (e.g., 10px, 25px, -10px) to move
       HORIZON & TRACKERS up or down vertically on the page.
       ----------------------------------------------------------- */
    margin-top: -10px !important; 
}

/* 2. Text Wrapper & Word Gap */
.brand-title-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;

    /* -----------------------------------------------------------
       HORIZONTAL WORD GAP CONTROL:
       Adjust 160px / 400px to push words wider or pull them closer.
       ----------------------------------------------------------- */
    gap: clamp(160px, 24vw, 400px) !important; 
}

.brand-word {
    display: inline-flex !important;
    align-items: center !important;
    font-family: 'Bookman Old Style', 'Georgia', serif !important;
    font-weight: 900 !important;
    font-size: clamp(1.8rem, 4.8vw, 4.2rem) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    line-height: 0.8 !important;
    white-space: nowrap !important;

    background: linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F4F4F4 20%,
        #D9D9D9 45%,
        #B8B8B8 70%,
        #7F7F7F 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    filter:
        drop-shadow(0px 1px 0px #FFFFFF)
        drop-shadow(0px 2px 0px #C0C0C0)
        drop-shadow(0px 3px 0px #7A7A7A)
        drop-shadow(0px 4px 10px rgba(0,0,0,0.75))
    !important;
}

/* 4. Center Lightbulb Asset (Enlarged & Anti-Blur Patch) */
.nav-center-lightbulb {
    position: absolute !important;
    top: 0 !important; /* Locks cable to top edge */
    left: 50% !important;
    
    /* ADDED translateZ(0): Forces hardware rendering to prevent tablet blur */
    transform: translateX(-50%) translateZ(0) !important; 
    z-index: 100 !important;

    /* -----------------------------------------------------------
       TUNED ENLARGEMENT COORDINATES:
       - 340px MIN: Keeps the bulb large & heroic on tablets.
       - 42vw PREFERRED: Scales dynamically with screen width.
       - 600px MAX: Gives desktop screens a larger footprint.
       ----------------------------------------------------------- */
    height: clamp(340px, 42vw, 500px) !important; 
    
    width: auto !important;
    object-fit: contain !important;
    pointer-events: none !important;

    /* -----------------------------------------------------------
       PIXEL STABILITY & ANTI-BLUR FIXES FOR TABLETS
       ----------------------------------------------------------- */
    image-rendering: -webkit-optimize-contrast !important; /* Sharpens image edges */
    backface-visibility: hidden !important;               /* Prevents sub-pixel blurring */
    -webkit-backface-visibility: hidden !important;

    /* Glow & Drop Shadow */
    filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.45)) 
            drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75)) !important;
    transition: transform 0.3s ease !important;
}

/* 5. Red Map Pin Positioning */
.pin-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin: 0 -1px !important;
}

.red-map-pin {
    width: clamp(24px, 4vw, 48px) !important;
    height: clamp(30px, 5vw, 56px) !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)) !important;
    transform: translateY(-2px) !important;
}

.hero-lightbulb {
    opacity: 0.98;
    filter: drop-shadow(0 0 8px rgba(255, 220, 120, 0.25));
}

/* =========================================================
   BOTTOM-RIGHT CORNER STATEMENT POSITIONING
   ========================================================= */

/* 1. Ensure the parent hero/header is relative so absolute items anchor inside it */
header,
.hero-header {
    position: relative !important;
}

/* 2. Anchor the statement to the bottom right */
.corner-statements {
    position: absolute !important;
    bottom: 20px !important;    /* Distance from the bottom of the hero cityscape */
    right: 25px !important;     /* Distance from the right edge */
    z-index: 250 !important;    /* Keeps it above the city skyline, under dropdowns */
    text-align: right !important;
    max-width: 420px !important; /* Prevents text from stretching too wide */
    pointer-events: none;       /* Prevents blocking clicks on items beneath it */
}

.corner-statements p {
    margin: 0 !important;
    font-family: 'Great Vibes', 'Monotype Corsiva', 'Apple Chancery', 'Playball', cursive !important;
    font-size: 1.1rem !important;
    font-style: italic !important;
    color: #FFFDF7 !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7) !important;
}

/* =========================================================
   9. CONTENT SECTIONS
   ========================================================= */
.page-section {
    padding: 100px 10%;
    min-height: unset;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.page-logo {
    max-height: 280px !important; 
    width: auto !important;       
    margin: 0 auto 15px auto !important;
    display: block !important;
}

.section-subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-top: -20px;
    margin-bottom: 40px;
}

/* =========================================================
   10. CONTACT INQUIRIES & LANDSCAPE TITLE
   ========================================================= */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    width: 100%;
    text-align: left;
}

.phone-block {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.inquiry-form input, .inquiry-form textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
}

.submit-btn {
    background: linear-gradient(135deg, #D4AF37 0%, #E63946 100%);
    color: white;
    padding: 15px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
}

.mid-landscape-title {
    font-family: 'Bookman Old Style', serif;
    font-size: 48px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.5);
    margin: 0;
}

/* =========================================================
   MOBILE PORTRAIT: CONTACT SECTION CENTERED STACK
   ========================================================= */
@media screen and (max-width: 768px) and (orientation: portrait) {

    /* 1. Collapse 2-column desktop grid into a single vertical column */
    .contact-container {
        grid-template-columns: 1fr !important;
        gap: 35px !important;                     /* Reduced from 50px for mobile spacing */
        text-align: center !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* 2. Center phone/email icon blocks & detail text */
    .phone-block {
        justify-content: center !important;       /* Centers icon and text horizontally */
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 3. Center align all contact text elements */
    .contact-container h3,
    .contact-container p,
    .contact-container a,
    .contact-container div {
        text-align: center !important;
    }

    /* 4. Center the inquiry form & stretch fields full width */
    .inquiry-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        align-items: center !important;
    }

    .inquiry-form input, 
    .inquiry-form textarea,
    .submit-btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   11. RESPONSIVE BREAKPOINTS (TABLET & MOBILE STABILITY)
   ========================================================= */
@media screen and (max-width: 1024px) {
    .top-nav-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .nav-left-squares,
    .nav-right-grid {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

/* =========================================================
   12. DYNAMIC DROPDOWN & INTERACTION STATE CONTROLS
   ========================================================= */

.grid-dropdown-wrapper {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: #fffdf6;
    border: 2px solid #D4AF37;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 99999;
}

.dropdown-content.is-active {
    display: block;
}

.dropdown-content a {
    display: block;
    padding: 8px 12px;
    color: #1e293b;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    transition: .15s ease;
}

.dropdown-content a:hover {
    background: #ea8a32;
    color: white;
}

/* =========================================================
   13. FOUNDER PORTAL DESIGN SCHEMATICS (CALIBRATED)
   ========================================================= */
.founder-section {
    background-color: #fdfbf7 !important;
    border-top: 2px solid #EAD793;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px !important;
}

.founder-section h2.mid-landscape-title {
    color: #2A1A00 !important; 
    text-shadow: none !important; 
    font-size: 32px !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.founder-section .section-subtitle { 
    margin-top: 0 !important; 
    margin-bottom: 25px !important; 
    color: #262525; 
    font-size: 1rem; 
    text-align: center !important;
}

/* MAIN CONTAINER CARD */
.founder-card-container {
    display: flex;
    flex-direction: row; /* Default Desktop Side-by-Side */
    align-items: center;
    justify-content: center;
    gap: 30px;
    background: #d4af37;
    border: 2px solid #EAD793;
    border-radius: 12px;
    padding: 25px;
    max-width: 650px;
    width: 100%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

/* PHOTO BOOTH & PREVIEW SLOT FIX */
.founder-photo-booth { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    flex-shrink: 0;
}

.photo-preview-slot {
    width: 220px !important;    /* Explicit width fixes collapsed viewports */
    height: 280px !important;   /* Explicit height prevents 0px mobile bug */
    overflow: hidden;
    border-radius: 6px;
    background-color: #f8f8f8;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.photo-preview-slot img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;       
    object-position: center top !important;  
    display: block !important;
}

/* FORM FIELDS */
.founder-details-form {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-input-group label {
    font-family: 'Bookman Old Style', serif;
    font-weight: bold;
    color: #2A1A00;
    font-size: 0.95rem;
}

.profile-input-group input {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    font-size: 0.95rem !important;
    cursor: not-allowed !important;
}

.founders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 20px;
    width: 100%;
}

.founder-card-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}


/* =========================================================
   📱 MOBILE PORTRAIT RESPONSIVE FIX (UNDER 600PX)
   ========================================================= */
@media screen and (max-width: 600px) {
    .founder-card-container {
        flex-direction: column !important; /* Stacks Photo ON TOP of Form */
        padding: 20px 15px !important;
        gap: 20px !important;
        max-width: 340px !important;
    }

    .photo-preview-slot {
        width: 180px !important;  /* Perfectly proportioned for phone screen */
        height: 230px !important;
    }

    .profile-input-group label {
        text-align: center !important;
    }

    .profile-input-group input {
        text-align: center !important;
    }
}


/* =========================================================
   📱 MOBILE LANDSCAPE RESPONSIVE FIX (HORIZONTAL PHONES)
   ========================================================= */
@media screen and (min-width: 601px) and (max-width: 960px) and (orientation: landscape) {
    .founder-card-container {
        flex-direction: row !important;
        padding: 15px 20px !important;
        gap: 20px !important;
        max-width: 580px !important;
    }

    .photo-preview-slot {
        width: 150px !important;  /* Compact height for low-height landscape screens */
        height: 190px !important;
    }

    .profile-input-group input {
        padding: 5px 8px !important;
        font-size: 0.85rem !important;
    }
}

/* --- THE BLUE FAR-RIGHT SECTION FOR DOWN ARROWS --- */
.blue-arrow-section {
    width: 42px;
    height: 100%;
    background: linear-gradient(135deg, #1E3A8A 0%, #0D9488 100%); /* Deep luxurious premium blue matrix */
    border-left: 2px solid #FFF0A5; /* Clean gold separation accent line */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 11px;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

/* Light up the blue sector subtly when hovering the parent button */
.grid-cta-btn:hover .blue-arrow-section {
    background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
}

/* --- SCALED ICON STANDARD GRID ENGINE --- */
.grid-main-icon {
    width: 22px !important;
    height: 22px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Clear out CSS pseudo elements to prevent double-arrow rendering */
.grid-dropdown-wrapper .grid-cta-btn::after {
    display: none !important;
    content: "" !important;
}

/* Ensure the dropdown positions perfectly under our new button style layout */
.dropdown-content {
    display: none; /* Changed to hidden by default, JavaScript will handle visibility toggle safely */
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    z-index: 500;
}

/* Core Layout */
.services-section {
    padding: 80px 20px;
    background-color: #fcfcfc;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header & Logo Centering Mechanics */
.services-header {
    display: flex;
    flex-direction: column;
    align-items: center;    /* Forces everything onto the vertical center line */
    text-align: center;      /* Centers inline text elements */
    margin-bottom: 50px;
}

.services-brand-logo {
    max-height: 280px;       /* Increased from 75px to make text/details visible */
    width: auto;             /* Keeps the aspect ratio perfectly intact */
    margin: 0 auto 25px auto; /* Keeps it centered with a nice gap before the title */
    display: block;
    
    /* Optional: If the image looks a bit blurry when scaled up, add this line for crispness if it's a PNG/JPG */
    image-rendering: -webkit-optimize-contrast; 
}

.services-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.services-title-underline {
    width: 60px;
    height: 4px;
    background-color: #B21E29; /* Red corporate accent */
    margin: 15px auto 0 auto;
    border-radius: 2px;
}

/* Introduction Bridge */
.services-mission-bridge {
    max-width: 800px;
    margin: 0 auto 60px auto;
    text-align: center;
    background-color: #ffffff;
    border-left: 4px solid #60b45a; /* Green accent tabs */
    border-right: 4px solid #60b45a;
    padding: 25px 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.bridge-subtitle {
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #B21E29;
    margin: 0 0 10px 0;
}

.bridge-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444444;
}

/* Grids and Cards */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 40px;
}

.service-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 40px;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.service-icon-holder {
    width: 50px;
    height: 50px;
    color: #B21E29;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.75rem;
    margin: 0 0 10px 0;
    color: #111111;
}

.service-lead {
    color: #666666;
    line-height: 1.5;
    margin-bottom: 25px;
}

.service-features-list, .trade-sub-list {
    list-style: none;
    padding: 10 !important;
}

.service-features-list li, .trade-sub-list li {
    position: relative;
    padding-left: 20px !important;
    margin-bottom: 12px;
    color: #333333;
}

.service-features-list li::before, .trade-sub-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: #60b45a;
    border-radius: 1px;
}

.trade-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.trade-col h4 {
    font-size: 1.15rem;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

/* ======================================================================
   14.SAFETY CONTAINER & BRAND PILLAR CARDS LAYOUT
   ====================================================================== */
.pillar-section-override {
    padding: 60px 20px;
    background-color: #ffffff;
}

.pillar-single-container {
    max-width: 850px; 
    margin: 0 auto;
}

/* Card Main Container Structure */
.pillar-card {
    background: #fdfdfd;
    border: 1px solid #eaeaea;
    padding: 40px;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.015);
    margin-top: 20px;
}

/* Paragraph Controls Inside Pillar Cards */
.pillar-card p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 20px;
}

/* Typography & Layout Elements Inside Cards */
.pillar-header-zone {
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.pillar-tag {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #60b45a; /* Green identity accent */
    font-weight: 600;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}

.section-title {
    font-size: 2.2rem;
    color: #111111;
    margin: 0;
    font-weight: 700;
}

.pillar-motto {
    font-size: 1.25rem;
    font-style: italic;
    color: #B21E29; /* Red accent */
    margin: 0 0 25px 0;
    font-weight: 600;
}

.mission-lead {
    font-size: 1.2rem !important;
    font-weight: 500;
    color: #111111 !important;
    line-height: 1.6;
}

/* Philosophy Blockquote Structures */
.philosophy-quote {
    border-left: 4px solid #B21E29;
    margin: 30px 0;
    padding: 15px 20px;
    font-style: italic;
    color: #222222;
    background-color: #f9f9f9;
}

.philosophy-quote cite {
    display: block;
    font-size: 0.9rem;
    color: #777777;
    margin-top: 8px;
    font-style: normal;
    font-weight: 500;
}

/* Core Values Itemized Lists */
.values-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.value-item h5 {
    font-size: 1.25rem;
    color: #111111;
    margin: 0 0 10px 0;
    font-weight: 600;
    position: relative;
    padding-left: 18px;
}

.value-item h5::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: #B21E29;
    border-radius: 50%;
}

.value-subtext {
    font-size: 1rem !important;
    font-style: italic;
    color: #666666 !important;
    margin-top: 15px !important;
    border-top: 1px dashed #e5e5e5;
    padding-top: 15px;
    line-height: 1.6;
}

/* ========================================== */
/* 15.SOLUTIONS SECTION OVERLAP CLEANUP     */
/* ========================================== */

/* Targets the specific text layout in your Practical Infrastructure zone */
#work-in-progress .section-title,
#practical-infrastructure .section-title,
.page-section h2 {
    position: relative !important;
    display: block !important;
    margin-bottom: 10px !important; /* Forces a safety gap beneath the title */
    line-height: 1.3 !important;    /* Prevents font heights from crashing into each other */
    padding-bottom: 0 !important;
}

/* Fixes the "Smart Railway Crossing System Protocol" subtitle position */
#work-in-progress p,
#work-in-progress span,
.page-section h2 + p,
.page-section h2 + span {
    position: relative !important;
    display: block !important;
    margin-top: 10px !important;    /* Pushes the subtitle down safely */
    line-height: 1.5 !important;
    clear: both !important;         /* Breaks free from any floating elements */
}
 
/* =========================================================
   FORCED PORTRAIT LOCK (BLOCKS ONLY MOBILE LANDSCAPE, NOT TABLETS)
   ========================================================= */

/* Hidden by default everywhere */
#orientation-lock-screen {
    display: none;
}

/* ACTIVATES ONLY ON MOBILE PHONES IN LANDSCAPE (MAX-HEIGHT: 500PX EXCLUDES TABLETS) */
@media screen and (orientation: landscape) and (max-height: 500px) {
    #orientation-lock-screen {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(255, 255, 255, 0.95) !important; /* High-opacity mask */
        z-index: 9999999 !important; /* Floats over all elements */
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        padding: 20px !important;
    }

    .rotation-message-box {
        text-align: center !important;
        color: #FF6600 !important; /* Horizon Orange */
        font-family: 'Bookman Old Style', serif !important;
    }

    .phone-rotate-icon {
        font-size: 50px !important;
        margin-bottom: 15px !important;
        display: inline-block !important;
        /* Animates turning from sideways back upright */
        animation: smoothPortraitTiltLoop 3s infinite ease-in-out !important;
        color: #FF6600 !important;
    }

    .rotation-message-box h2 {
        font-size: 24px !important;
        margin: 0 0 10px 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

    .rotation-message-box p {
        font-family: sans-serif !important;
        font-size: 16px !important;
        color: #000080 !important; /* Navy Blue */
        margin: 0 !important;
    }
}

/* Animates icon turning phone back to vertical */
@keyframes smoothPortraitTiltLoop {
    0%, 100% { transform: rotate(90deg); }
    50% { transform: rotate(0deg); }
}

/* =========================================================
   17.STABLE SITUATION PRESERVATION RULES (Keep these untouched!)
   ========================================================= */
.solutions-divider {
    width: 280px;
    height: 4px;
    background: #D4AF37;
    margin: 25px auto 35px auto;
    opacity: 0.8;
}

/* Prevent localized text from breaking out of containers */
[data-key] {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Force the container to handle overflowing content flexibly */
.your-frame-class {
    width: 100% !important;       /* Allow it to scale naturally */
    max-width: 100% !important;   /* Keep it bound within its parent */
    min-width: 0 !important;      /* Prevents flex-children blowout */
    box-sizing: border-box !important;
    overflow: hidden;             /* Safety valve: cuts off anything that absolutely won't fit */
}

/* Force the text inside to wrap, no matter what */
.your-frame-class h2, 
.your-frame-class h3, 
.your-frame-class p,
.your-frame-class [data-key] {
    white-space: normal !important; /* Overrides any 'nowrap' hiding in your styles */
    word-break: break-word !important; 
    overflow-wrap: anywhere !important;
}

/* 1. Target the elements handling the text directly to force breaking */
[data-key="serviceImportExportTitle"],
[data-key="serviceImportExportLead"],
[data-key^="serviceImport"],
[data-key^="serviceExport"] {
    white-space: normal !important;      /* Forces text to wrap instead of staying on one long line */
    word-break: break-word !important;    /* Breaks words if they are too long for the container */
    overflow-wrap: anywhere !important;   /* Ensures long strings won't blowout boundaries */
    display: inline-block;                /* Allows proper structural wrapping context */
}

/* 2. Target the specific layout grid/flex item to ensure it shrinks dynamically */
div:has(> [data-key^="serviceImport"]), 
div:has(> [data-key="serviceImportExportTitle"]),
.service-card, .frame-box { 
    min-width: 0 !important;             /* Crucial for flex/grid items to shrink below content size */
    width: 100% !important; 
    box-sizing: border-box !important;
}

/* Styling for the Floating Top Translation Banner */
#yourBottomPopupId { 
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important; /* Forces it to stay on top of headers, images, or backgrounds */
    box-sizing: border-box !important;
    
    display: none; /* Controlled via JavaScript */
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    background-color: #1a1a1a; /* Dark sleek professional contrast background */
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Keep the upload controls completely invisible to the general public */
.founder-upload-controls {
    display: none !important;
}

/* Hide it completely on desktop and vertical mobile views by default */
#orientation-lock-screen {
    display: none;
}

/* =========================================================
   18.CLEANED DESKTOP ONLY LAYOUT & ALIGNMENT (769px+)
   =========================================================
@media screen and (min-width: 769px) {
    /* Left Side Cluster Force Move */
    .nav-left-squares {
        top: 60px !important;    
        left: 2.9% !important;     
        gap: 2px !important;
    }

    /* Right Side Cluster Force Move */
    .nav-right-grid {
        top: 25px !important;    
        right: 1% !important;    
        grid-template-columns: repeat(2, 190px) !important; 
        gap: 2px !important;     
    }

    /* Button Width Overrides */
    .custom-dropdown-trigger,
    .grid-cta-btn {
        width: 190px !important;
        min-width: 190px !important;
        font-size: 0.85rem !important;
    }

    .imposing-square-btn {
        width: 200px !important;
    }

    /* Absolute Dimension Lock for Square Elements / Bowing Character Frames */
    .nav-left-squares button, 
    .nav-left-squares a {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        width: 126px !important;   
        height: 54.5px !important;  
        min-height: 45px !important; 
        max-height: 150px !important; 
        
        align-self: center !important; 
        line-height: 1 !important; 
        padding: 0 !important; 
        overflow: hidden !important;
    }
}*/

/* =========================================================
   19.CUSTOM ORANGE SCROLLBAR WITH DIRECTIONAL BRACKETS
   ========================================================= */

/* 1. Target the scrollable inner white box container */
#facadeModal > div {
    scrollbar-width: auto;                  /* Firefox support */
    scrollbar-color: #FF6600 #f1f1f1;       /* Firefox support */
}

/* 2. Set width of the scrollbar track for WebKit browsers */
#facadeModal > div::-webkit-scrollbar {
    width: 16px !important;                 /* Wider track to hold the brackets cleanly */
    display: block !important;
}

/* 3. Style the background track and add the white double brackets layout */
#facadeModal > div::-webkit-scrollbar-track {
    background-color: #edf2f7 !important;
    border-radius: 0 8px 8px 0;             /* Smooth match for the modal's corner radius */
    
    /* Using background SVG masks to cleanly render the white double angle brackets inside the track */
    background-image: 
        /* Top half pointing DOWN (using encoded '»' rotated to point down) */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='7 13 12 18 17 13'></polyline><polyline points='7 6 12 11 17 6'></polyline></svg>"),
        
        /* Bottom half pointing UP (using encoded '«' rotated to point up) */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='17 11 12 6 7 11'></polyline><polyline points='17 18 12 13 7 18'></polyline></svg>");
        
    background-repeat: no-repeat;
    background-position: 
        center 25%,                 /* Points down from the top upper quarter zone */
        center 75%;                 /* Points up from the bottom lower quarter zone */
    background-size: 14px 14px;
}

/* 4. Restore the striking crisp Horizon Orange color to the moving thumb slider */
#facadeModal > div::-webkit-scrollbar-thumb {
    background: #FF6600 !important;
    border: 3px solid #edf2f7 !important;   /* Creates a clean border gap framing the thumb */
    border-radius: 10px !important;
}

/* Changes to a deeper orange accent state when grabbed or hovered */
#facadeModal > div::-webkit-scrollbar-thumb:hover {
    background: #cc5200 !important;
}

/* Force Bold Weight for Chinese Button Text */
.nav-right-grid button,
.grid-cta-btn,
.custom-dropdown-trigger {
    font-weight: 700 !important; /* Forces heavy bolding */
    -webkit-font-smoothing: antialiased; /* Keeps bold kanji/hanzi crisp and legible */
}

/* Container to force vertical stacking */
.status-indicator-stack {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0.9 !important; /* Pulls the letters tightly together vertically */
    margin-left: 5px;            /* Gives spacing between the main icon and text */
    font-family: sans-serif !important;
    font-weight: bold !important;
    font-size: 11px !important;  /* Keeps it precise and subtle */
}

/* The slow orange pulse animation */
.status-indicator-stack .status-letter {
    color: #FF9F1C !important;   /* Vivid premium orange */
    animation: slowOrangeBlink 3s ease-in-out infinite;
}

/* Smooth breathing pulse keyframes */
@keyframes slowOrangeBlink {
    0%, 100% {
        opacity: 0.2;            /* Dim state */
    }
    50% {
        opacity: 1.0;            /* Full glow intensity */
    }
}

/* =========================================================
   20.UNIFIED SINGLE-ROW NAVIGATION CONTAINER (1024px)
   ========================================================= */
.unified-nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 1024px !important;
    max-width: 100% !important;
    margin: 12px auto 0 auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 9999 !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

.nav-item-wrapper {
    position: relative !important;
    flex-shrink: 0 !important;
}

/* Compact pill button style for Events & Other Activities */
.compact-pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-transform: uppercase !important;
    font-family: 'Bookman Old Style', serif !important;
    font-weight: bold !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 50px !important;
    background: linear-gradient(
    180deg,
    #F4F4F5 0%,
    #D4D4D8 100%
) !important;
    border: 2px solid #aa8443 !important;
    color: #ff6600 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    white-space: nowrap !important;
}

.pill-icon-left, .pill-icon-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pill-label {
    letter-spacing: 0.5px !important;
    padding: 0 6px !important;
}

/* Shared Dropdown Panel alignment */
.dropdown-panel {
    display: none;
    position: absolute !important;
    top: 100% !important;
    margin-top: 8px !important;
    left: 0 !important;
    width: 260px !important;
    background: #fffdf6 !important;
    border: 2px solid #D4AF37 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    padding: 12px !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Align rightmost dropdown to open inwards so it doesn't clip off-screen */
.hero-dropdown-container .dropdown-panel {
    left: auto !important;
    right: 0 !important;
}

/* =========================================================
   21.CENTERED DROPDOWN CARDS (EVENTS MENU)
   ========================================================= */

.dropdown-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;        /* Centers items horizontally */
    justify-content: center !important;     /* Centers content vertically */
    text-align: center !important;          /* Ensures inline text centers */
    gap: 4px !important;
    padding: 8px 12px !important;
    border-radius: 40px !important;
    border: 1px solid rgba(170, 132, 67, 0.4) !important;
    background: #fdfdf9 !important;
}

.card-title {
    font-family: sans-serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #1e293b !important;
    text-transform: uppercase !important;
    text-align: center !important;          /* Centers title text */
    width: 100% !important;
}

.badge-status {
    display: inline-block !important;
    align-self: center !important;          /* CHANGED: Centers badge horizontally */
    padding: 2px 8px !important;
    font-size: 9.5px !important;
    font-family: sans-serif !important;
    font-weight: 600 !important;
    color: #8b0000 !important;
    background-color: #dcfce7 !important;
    border: 1px solid #86efac !important;
    border-radius: 20px !important;
    text-align: center !important;
}

.badge-status:hover {
    background: #dff7e5 !important;
    border-color: #7bd89a !important;

    box-shadow:
        0 0 10px rgba(123,216,154,0.4) !important;
}

/* 1. ELEVATE NAV CONTAINER ABOVE ALL HERO GRAPHICS & FIX CLICKABILITY */
.unified-nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1024px !important;
    margin: 10px auto 0 auto !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    gap: 3px !important; /* Tightened gap to prevent horizontal overflow */
    
    /* CRITICAL FIX FOR CLICKABILITY: Forces nav above lightbulb & text overlays */
    position: relative !important;
    z-index: 999999 !important; 
    pointer-events: auto !important;
}

/* 2. ENSURE ALL BUTTON WRAPPERS ALLOW FLEX-SHRINKING */
.nav-item-wrapper {
    position: relative !important;
    flex: 0 1 auto !important; /* Allows items to shrink if 1024px is tight */
    z-index: 100000 !important;
}

/* 3. TIGHTEN BUTTON PADDING TO FIT ALL 8 ITEMS IN 1024px */
.imposing-square-btn, 
.grid-cta-btn, 
.compact-pill-btn {
    padding: 6px 10px !important; /* Reduced horizontal padding slightly */
    font-size: 11px !important;    /* Slightly tighter font size */
    white-space: nowrap !important;
}

/* 4. PASS CLICK EVENTS THROUGH BACKGROUND LIGHTBULB / HERO OVERLAYS */
.hero-bg-graphic,
.hero-title-wrapper,
.lightbulb-container {
    z-index: 1 !important; /* Keeps art below nav */
}

/* Force the navigation container to take up the full screen width */
.unified-nav-container {
    width: 100% !important;
    max-width: 100% !important; /* Overrides any 1200px caps */
    margin: 0 !important;
    padding: 0 20px !important; /* Gives a clean 20px breathing room from the screen edge */
    box-sizing: border-box;
}

/* =========================================================
   22.FIX: SUBMENU STACKING & LAYER ELEVATION (Z-INDEX)
   ========================================================= */

/* 1. Force the Top Row to sit higher than the Second Row */
.top-row {
    position: relative !important;
    z-index: 50 !important; /* Higher layer than lower rows */
}

.second-row {
    position: relative !important;
    z-index: 10 !important;
}

/* 2. Allow submenus to break out of the Pill button container */
.top-row .compact-pill-btn {
    overflow: visible !important; /* Prevents dropdown from being cut off */
    position: relative !important;
}

/* 3. Dynamically boost whichever top-row item is being hovered/opened */
.top-row .nav-item-wrapper,
.top-row .compact-pill-btn,
.top-row .grid-dropdown-wrapper {
    position: relative !important;
}

.top-row .nav-item-wrapper:hover,
.top-row .nav-item-wrapper:focus-within,
.top-row .compact-pill-btn:hover,
.top-row .compact-pill-btn:focus-within {
    z-index: 9999 !important; /* Ensures active menu stays on top of everything */
}

/* =========================================================
   FIX: ELIMINATE VERTICAL GAP UNDER TOP-ROW BUTTONS
   ========================================================= */

/* 1. Reset default browser margins & paddings on ALL top-row dropdown lists */
.top-row .dropdown-content,
.top-row .dropdown-menu,
.top-row .sub-menu,
.top-row ul {
    margin: 0 !important;               /* Clears hidden browser user-agent margins */
    padding: 0 !important;              /* Resets default list padding */
    top: 100% !important;               /* Hangs directly at the bottom edge */
    left: 50% !important;               /* Midpoint anchor */
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important; /* Perfect center alignment */
    box-sizing: border-box !important;
}

/* 2. Lock the menu right up against the 3px gold border */
.top-row .dropdown-content,
.top-row .dropdown-menu,
.top-row .sub-menu {
    margin-top: -3px !important;        /* Pulls menu up to touch/hug the button border */
}

/* 3. Restore padding inside list items so text isn't squished */
.top-row .dropdown-content a,
.top-row .dropdown-menu a,
.top-row .sub-menu a,
.top-row .dropdown-content li,
.top-row .dropdown-menu li {
    padding: 8px 14px !important;       /* Clean spacing for text inside the menu */
}

/* =========================================================
   UNIVERSAL DROPDOWN CENTERING & STACKING FIX (REVISED)
   ========================================================= */

/* 1. Ensure top row stays above second row, but prevent it from being the center anchor */
.top-row {
    position: static !important; /* Prevents dropdowns from centering to whole screen */
    z-index: 999 !important;
}

.top-row .left-group {
    position: static !important; /* Forces dropdowns to look for individual button wrappers */
}

.second-row {
    z-index: 1 !important;
}

/* 2. Lock ALL individual button wrappers so left:50% hits each button's true midpoint */
.top-row .nav-item-wrapper,
.top-row .left-group *,
.top-row li {
    position: relative !important; /* Establishes center point per button */
    display: inline-block !important;
    width: var(--pill-w, 285px) !important;
    max-width: var(--pill-w, 285px) !important;
    overflow: visible !important;
}

/* 3. Ensure the pill button itself allows dropdowns to show and spans wrapper width */
.compact-pill-btn {
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* 4. Target ALL potential dropdown selectors & FORCE exact midpoint + vertical spacing */
.top-row .dropdown-content,
.top-row .dropdown-menu,
.top-row .sub-menu,
.top-row ul.dropdown,
.compact-pill-btn + *,
.compact-pill-btn > .dropdown-content {
    position: absolute !important;
    
    /* -------------------------------------------------------------------
       VERTICAL CONTROL KNOB: 
       - Adjust '2px' to '0px' or '-4px' to pull higher towards button
       - Adjust '2px' to '6px' to push lower away from button
       ------------------------------------------------------------------- */
    top: calc(100% + 2px) !important; 
    
    left: 100% !important;
    right: auto !important;
    bottom: auto !important;
    
    transform: translateX(-50%) !important; /* Perfect midpoint shift */
    
    margin-left: 0 !important;              /* Clears leftover offset tweaks */
    margin-right: 0 !important;
    margin-top: -3px !important;
    
    z-index: 99999 !important;
    white-space: normal !important;          /* Prevents text from forcing huge widths */
    box-sizing: border-box !important;
}

/* 5. Force menu visibility on active/hover */
.top-row .dropdown-content.is-active,
.top-row .dropdown-menu.is-active,
.top-row .sub-menu.is-active,
.top-row .nav-item-wrapper:hover > .dropdown-content,
.top-row .nav-item-wrapper:hover > .dropdown-menu,
.top-row .nav-item-wrapper:hover > .sub-menu,
.top-row .nav-item-wrapper:hover > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =========================================================
   UNIVERSAL 20PX PILL-CARD FOR ALL DROPDOWN ITEMS
   ========================================================= */

/* RESET: Force the button wrapper to stay completely transparent */
.top-row .nav-item-wrapper,
.top-row :has(> .compact-pill-btn) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 1. Outer Menu Popups (Both Left & Right) */
.top-row .dropdown-content,
.top-row .dropdown-menu,
.top-row .sub-menu,
.top-row [class*="dropdown"]:not(:has(.compact-pill-btn)):not(.compact-pill-btn),
.right-group [class*="dropdown"]:not(:has(.compact-pill-btn)):not(.compact-pill-btn) {
    border-radius: 20px !important;
    padding: 12px !important;
    background: #fffdf6 !important;
    border: 2px solid #D4AF37 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.18) !important;
    overflow: visible !important;
}

/* 2. Strip standard list lines/dividers that create the flat stacked look */
.top-row [class*="dropdown"] ul,
.top-row [class*="dropdown"] li,
.right-group [class*="dropdown"] ul,
.right-group [class*="dropdown"] li {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Catch ALL items (a, div, li, button, span) EXCEPT main pill button */
.top-row [class*="dropdown"] a,
.top-row [class*="dropdown"] div[class*="item"],
.top-row [class*="dropdown"] button:not(.compact-pill-btn),
.top-row [class*="dropdown"] li > *:not(.compact-pill-btn),
.right-group [class*="dropdown"] a,
.right-group [class*="dropdown"] div[class*="item"],
.right-group [class*="dropdown"] button:not(.compact-pill-btn),
.right-group [class*="dropdown"] li > *:not(.compact-pill-btn) {
    display: flex !important;
    align-items: center !important;
    border-radius: 20px !important;         /* FORCES 20PX ROUNDED CORNERS */
    border: 1.5px solid #D4AF37 !important;
background: #fffdf6 !important;        /* Clean card background */
    margin-bottom: 2px !important;          /* Card separation gap */
    padding: 10px 16px !important;
    text-decoration: none !important;
    color: #1e293b !important;
    font-weight: bold !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.top-row [class*="dropdown"] a:hover,
.top-row [class*="dropdown"] div[class*="item"]:hover,
.right-group [class*="dropdown"] a:hover,
.right-group [class*="dropdown"] div[class*="item"]:hover {

    background: #fff8dc !important;
    border-color: #D4AF37 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 4px 12px rgba(212,175,55,0.35) !important;
}

/* Independent scaling for the letter 'A' */
.lang-text .char-a {
    display: inline-block;
    font-size: 1.7em;             /* Increases size of '𝔸' relative to '文' */
    font-weight: 800;              /* Adds weight so '𝔸' matches the density of '文' */
    transform: translateY(-0.5px); /* Fine-tunes vertical alignment */
    margin-right: 1px;             /* Slight spacing between the two */
}

.compact-pill-btn .pill-label {
    display: inline-block !important; /* Required for scaleY to work */
    transform: scaleY(1.75) !important; /* Stretches vertical height by 25% */
    transform-origin: center !important;
}

/* For the letter 'A' in the language button */
.char-a {
    display: inline-block !important;
    transform: scaleY(1.29) translateY(-1px) !important; /* Stretches 'A' taller */
}

/* =========================================================
   1. AUTOMATIC "COMING SOON" BADGE ON ALL MAIN IMAGES
   ========================================================= */
/* Target the left image wrapper of your existing cards */
#autoInventoryGrid > div > div:first-child,
#machineryInventoryGrid > div > div:first-child,
.inventory-card > div:first-child {
    position: relative !important;
}

/* Stays on top-left of the main image automatically */
#autoInventoryGrid > div > div:first-child::before,
#machineryInventoryGrid > div > div:first-child::before,
.inventory-card > div:first-child::before {
    content: "COMING SOON" !important;
    position: absolute !important;
    top: 82px !important;
    left: 52px !important;
    z-index: 90 !important;               /* Sits above image, below magnify button */
    background: rgba(255, 255, 255, 0.88) !important;
    color: #ff2800 !important;           /* Gold text */
    border: 1.5px solid #ff0800 !important;/* Gold border */
    font-family: 'Bookman Old Style', serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    pointer-events: none !important;      /* Allows clicks through to open gallery */
}

/* =========================================================
   1. GLOBAL BASICS & RESET (SAFE AREA & SCROLL OVERFLOW)
   ========================================================= */

html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    top: 0 !important;
}

/* Hard-Pin Hero Section to absolute top glass edge */
header,
.hero-section,
.unified-nav-container {
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 100dvh !important; 
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Keeps rows anchored to top */
    align-items: center !important;
    position: relative !important;
    overflow: visible !important;
}

.top-row {
    margin-top: 4px !important;
}

.top-row,
.second-row {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================================================
   2. GLOBAL BASE STYLES FOR LIGHTBULB & WIRE
   (Base fallbacks - Overridden cleanly inside Media Queries)
   ========================================================= */

/* Electric Wire Cable (COMMENTED OUT - USING INTEGRATED IMAGE CABLE)
.fifth-row::before {
    content: '' !important;
    position: absolute !important;
    top: auto !important; 
    bottom: 20px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important;            
    height: 300px !important;          
    background: #111111 !important;    
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) !important;
    z-index: 95 !important;
}
*/

/* Lightbulb Base Hardware Acceleration & Filters */
.nav-center-lightbulb {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) translateZ(0) !important;
    z-index: 100 !important;
    top: -115px !important;
    height: 420px !important;
    width: auto !important;
    object-fit: contain !important;
    mix-blend-mode: screen !important;
    filter: brightness(0.9) contrast(1.1) drop-shadow(0 0 15px rgba(255, 170, 0, 0.6)) !important;
    image-rendering: -webkit-optimize-contrast !important;
    backface-visibility: hidden !important;
    pointer-events: none !important;
}

/* =========================================================
   3. MASTER ROW STACKING HIERARCHY
   ========================================================= */

.first-row, 
.top-row {
    position: relative !important;
    z-index: 500 !important;
}

.second-row {
    position: relative !important;
    z-index: 400 !important;
}

.third-row {
    position: relative !important;
    z-index: 300 !important;
    overflow: visible !important;
}

.nav-search-container {
    position: absolute !important;
    left: 70.8% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 0px !important;
    z-index: 300 !important;
}

.fourth-row {
    position: relative !important;
    z-index: 200 !important;
}

.fifth-row {
    position: relative !important;
    z-index: 100 !important;
}

.language-dropdown-menu,
.get-started-dropdown-menu,
.dropdown-menu,
[class*="dropdown"] {
    z-index: 9999 !important;
}

.hero-slogan-container,
.hero-title,
.hero-slogan {
    margin-top: 24px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* =========================================================
   1. DESKTOP & TABLET VIEWPORTS (Width > 768px)
   ========================================================= */
@media (min-width: 769px) {
    
    /* FIX: Restores desktop physics by resetting the structural container bounds 
       overriding any zeroed heights leaked from mobile setups */
    .fifth-row {
        position: relative !important;
        height: auto !important; 
        width: 100% !important;
        overflow: visible !important;
    }

    /* Restores absolute canvas physics for the wire block overlay on desktop layouts */
    .fifth-row::before {
        content: '' !important;
        position: absolute !important;
        top: auto !important; 
        bottom: 20px !important; /* Maps perfectly back to bulb socket */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 6px !important;            
        
        /* YOUR TUNED FLUID SIZE FORMULA */
        height: clamp(280px, 35vw, 380px) !important; 
        
        background: #111111 !important;    
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) !important;
        z-index: 95 !important;
    }

    .nav-center-lightbulb {
        top: -575px !important;

        /* YOUR TUNED FLUID SIZE FORMULA */
        height: clamp(380px, 75vw, 880px) !important; 
    }
}

/* =========================================================
   5. MOBILE PORTRAIT VIEWPORTS ONLY (max-width: 768px & portrait)
   ========================================================= */
@media screen and (max-width: 768px) and (orientation: portrait) {

    /* Lock hero canvas height */
    .hero {
        height: 100dvh !important;
        min-height: 100dvh !important;
        aspect-ratio: auto !important;
        background-size: cover !important;
        background-position: center bottom !important;
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* Pin Navigation Container */
    header,
    .unified-nav-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin: 0 !important;
        gap: 2px !important;
        z-index: 500 !important;
    }

    .top-row, 
    .second-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }

    .top-row {
        gap: 2px !important;
        transform: scale(0.58) !important;
        transform-origin: center top !important;
        margin-bottom: -18px !important;
    }

    .second-row {
        gap: 4px !important;
        transform: scale(0.50) !important;
        transform-origin: center top !important;
        margin-bottom: -26px !important;
    }

    .fifth-row {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        margin-top: 10px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        pointer-events: none !important;
    }

    .brand-title-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(55px, 14vw, 85px) !important;
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-top: 0 !important;
        position: relative !important;
        z-index: 120 !important;
    }

    .brand-word {
        font-size: clamp(1.0rem, 3.8vw, 1.5rem) !important;
        white-space: nowrap !important;
    }

    /* ISOLATED MOBILE PORTRAIT LIGHTBULB POSITIONING */
    .nav-center-lightbulb {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* ADJUST YOUR MOBILE PORTRAIT LIGHTBULB HEIGHT HERE */
        top: -320px !important;
        height: clamp(230px, 160vw, 690px) !important;
        
        z-index: 100 !important;
        pointer-events: none !important;
    }

    .fifth-row::before {
        height: 225px !important;
    }

    .fourth-row,
    .brand-slogan-script {
        white-space: nowrap !important;
        font-size: clamp(1.2rem, 3.5vw, 1.5rem) !important;
        text-align: center !important;
        width: 100% !important;
        margin-top: 10px !important;
        margin-bottom: 5px !important;
    }

    #corner-statements,
    .corner-statements,
    .bottom-slogan,
    .hero-bottom-text,
    .sixth-row {
        position: absolute !important;
        bottom: 6px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        white-space: normal !important; 
        font-size: clamp(0.55rem, 2.2vw, 0.75rem) !important; 
        text-align: center !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
    }

    /* Mobile Search Input Wrapper */
    .nav-search-input-wrapper {
        position: fixed !important;
        left: -48% !important;
        top: 75px !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 9999 !important;
    }

    .nav-search-container.active .nav-search-input-wrapper {
        width: clamp(280px, 88vw, 340px) !important;
        max-width: 90vw !important;
        padding: 6px 8px 6px 16px !important;
    }

   /* UNIFORM SIZE FOR ALL SECTION LOGOS (FLUID & SCALABLE) */
.page-logo,
.services-section .page-logo,
.content-section img.page-logo,
.modal-logo {
    display: block !important;
    
    /* 1. Sets a uniform width baseline that scales smoothly */
    width: 90% !important;              /* Increase to 80% or 85% to scale all logos UP */
    height: auto !important;             /* Lets height scale naturally with width */
    
    /* 2. Caps vertical height so ultra-tall/square logos don't get huge */
    max-height: 150px !important;        
    
    /* 3. Ensures image doesn't overflow screen */
    max-width: 100% !important;
    object-fit: contain !important;
    
    /* 4. Alignment & Spacing */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

    /* 2. GENERAL SECTION IMAGES (EXCLUDING LOGOS) */
    .section-icon,
    .content-section img:not(.page-logo) {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 90% !important;
        height: auto !important;
    }

    /* 3. SECTION & CONTAINER CENTERING WITH SAFE PADDING */
    .page-container,
    .modal-content,
    .content-section,
    .page-body {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* 4. TYPOGRAPHY CENTERING */
    .page-container h1, 
    .page-container h2, 
    .page-container h3, 
    .page-container h4,
    .page-container p,
    .modal-content h1,
    .modal-content p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    /* 5. LIST ALIGNMENT */
    .page-container ul,
    .modal-content ul {
        display: inline-block !important;
        text-align: left !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 20px !important;
    }
}

/* Extra small portrait adjustments (phones <= 600px) */
@media screen and (max-width: 600px) and (orientation: portrait) {
    .brand-title-container {
        gap: clamp(45px, 13vw, 75px) !important;
        margin-top: 5px !important;
    }

    .brand-word {
        font-size: clamp(1.7rem, 4.5vw, 2.2rem) !important;
        text-shadow: none !important;
        filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.95)) 
                drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.8)) !important;
    }

    .brand-word img,
    .brand-word svg,
    .red-pin,
    .location-pin,
    .map-pin {
        height: 0.85em !important;
        width: auto !important;
        vertical-align: -0.05em !important;
        display: inline-block !important;
        position: relative !important;
        top: 0 !important;
        margin: 0 -1px !important;
    }
}

/* =========================================================
   SERVICES SECTION MOBILE PORTRAIT CENTERING & OVERFLOW FIX
   ========================================================= */

/* 1. Force main section container to constrained full-width */
.services-section,
#services-portal,
.services-container {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* 2. Convert multi-column service grids into a clean 1-column stack */
.services-grid,
.services-cards-wrapper,
.services-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

/* 3. Constrain individual service cards to viewport width */
.service-card,
.service-box,
.service-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* Critical to allow flex items to shrink properly */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 20px 15px !important;
}

/* 4. Prevent text overflow and edge cut-off */
.service-card h3,
.service-card h4,
.service-card p,
.services-section p {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================================
   6. MOBILE LANDSCAPE VIEWPORTS ONLY (orientation: landscape)
   ========================================================= */
@media screen and (orientation: landscape) and (max-height: 500px) {

    html, body {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background-color: #000 !important;
    }

    .hero,
    header,
    .hero-section,
    .unified-nav-container,
    .fifth-row {
        overflow: visible !important;
    }

    .hero {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        position: relative !important;
    }

    header,
    .unified-nav-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        transform-origin: top center !important;
        margin: 0 auto !important;
        padding-top: 2px !important;
        z-index: 500 !important;
    }

    .top-row,
    .second-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    .top-row {
        margin-top: 6px !important;
        margin-bottom: 2px !important;
    }

    .second-row {
        margin-bottom: 2px !important;
    }

    /* ZERO-HEIGHT ANCHOR FOR LIGHTBULB & CABLE */
    .fifth-row {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 0 !important;
        pointer-events: none !important;
    }

    /* CABLE: ANCHORED FROM TOP SO HEIGHT STRETCHES DOWNWARD */
    .fifth-row::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;           /* Anchors cable to top glass roof */
        bottom: auto !important;      /* Unlocks bottom constraint */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 4px !important;
        
        /* ADJUST CABLE LENGTH DOWNWARD HERE: */
        height: 140px !important;     
        
        background: #111111 !important;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) !important;
        z-index: 95 !important;
    }

    /* LIGHTBULB POSITIONING */
    .nav-center-lightbulb {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* ADJUST LIGHTBULB VERTICAL POSITION HERE: */
        top: -265px !important; 
        height: 385px !important; 
        
        z-index: 100 !important;
        pointer-events: none !important;
    }

    /* BRAND TITLE CONTAINER (NO LONGER OVERRIDDEN) */
    .brand-title-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 120px !important;
        width: 100% !important;
        
        /* ADJUST BRAND TITLE DOWNWARD OFFSET HERE: */
        margin-top: 430px !important; /* Starts taking effect immediately! */
        
        position: relative !important;
        z-index: 120 !important;
    }

    .brand-word {
        font-size: clamp(1.8rem, 4.5vw, 2.5rem) !important;
        white-space: nowrap !important;
        filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.9)) !important;
    }

    .fourth-row,
    .slogan-text,
    .hero-slogan {
        white-space: nowrap !important;
        font-size: clamp(0.65rem, 2.0vw, 0.9rem) !important;
        margin: 2px 0 !important;
    }

    /* Clear vertical clearance for page content below the nav elements */
    .page-container,
    .content-section,
    .page-body,
    .modal-content {
        padding-top: 110px !important;
        box-sizing: border-box !important;
    }

    .page-logo,
    .modal-logo,
    .section-icon {
        max-height: 280px !important;
        width: auto !important;
        margin-top: 5px !important;
        margin-bottom: 10px !important;
    }

    #corner-statements,
    .corner-statements,
    .bottom-slogan,
    .hero-bottom-text,
    .sixth-row {
        white-space: nowrap !important;
        font-size: clamp(0.3rem, 1vw, 0.5rem) !important;
        position: absolute !important;
        bottom: 4px !important;
        left: 0 !important;
        right: 0 !important;
        text-align: center !important;
        z-index: 10 !important;
    }
}

/* =========================================================
   3. MOBILE LANDSCAPE VIEWPORT BLOCKER (Horizontal Only)
   ========================================================= */
@media screen and (max-width: 900px) and (orientation: landscape) {
    
    /* HARD BLOCKER: Erases the extension cable completely in landscape view 
       without leaking or touching portrait/desktop states */
    .fifth-row::before {
        display: none !important;
        height: 0px !important;
        content: none !important;
    }

    /* Tweak landscape bulb sizing so it fits short wide screens cleanly */
    .nav-center-lightbulb {
        top: -335px !important;
        height: 465px !important; 
    }
}

/* =========================================================
   ADMIN VISIBILITY CONTROL SYSTEM
   ========================================================= */

/* 1. Hide ALL admin controls by default */
.admin-only {
    display: none !important;
}

/* 2. Show admin controls when body has admin class */
body.is-admin .admin-only,
body.admin-logged-in .admin-only {
    display: block !important;
}

/* 3. File inputs are inline — don't force them to block */
body.is-admin input[type="file"].admin-only,
body.admin-logged-in input[type="file"].admin-only {
    display: inline-block !important;
}

/* 4. Flex containers inside cards keep their layout */
body.is-admin div.admin-only,
body.admin-logged-in div.admin-only {
    display: flex !important;
}

/* 5. Top panel is block, not flex */
body.is-admin #adminImageLoaderSection.admin-only,
body.admin-logged-in #adminImageLoaderSection.admin-only {
    display: block !important;
}

/* 6. Hidden admin toggle (bottom-right corner, nearly invisible) */
#adminToggleBtn {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    opacity: 0.04;
    background: #333;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 999999;
    transition: opacity 0.3s;
}
#adminToggleBtn:hover {
    opacity: 1;
    background: #D4AF37;
}

/* Show admin panels when body has .is-admin */
body:not(.is-admin) .admin-only {
    display: none !important;
}
body.is-admin .admin-only {
    display: block !important;
}

/* ======================================================================
   ✨ ROW 4 SLOGAN: GREAT VIBES (REGULAR)
   ====================================================================== */

@media screen and (max-width: 960px), screen and (max-device-width: 960px) and (orientation: landscape) {
  
  .hero-slogan,
  [class*="slogan"] {
    /* 1. Reset font style */
    font-style: normal !important;
    
    /* 2. Great Vibes Regular font family */
    font-family: 'Great Vibes', cursive !important;
    font-weight: 400 !important; /* Regular Weight */
    
    /* 3. Typography & Sizing adjustment for script fonts */
    font-size: 1.4rem !important; /* Script fonts usually need a slightly larger size to be readable */
    letter-spacing: 0.02em !important;
    
    /* 4. Yellow hue & backdrop glow */
    color: #fce38a !important; 
    text-shadow:0 2px 4px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(255, 193, 7, 0.6),
        0 0 25px rgba(255, 152, 0, 0.4) !important;
  }

}

/* 1. MOBILE PORTRAIT (Narrow screens under 600px)
   Forces 1 card per row */
@media screen and (max-width: 599px) and (orientation: portrait) {
    #autoInventoryGrid,
    #machineryInventoryGrid,
    #inventory-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 2. MOBILE LANDSCAPE (Phones turned horizontally)
   Forces exactly 2 card slots per row without clipping side edges */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #autoInventoryGrid,
    #machineryInventoryGrid,
    #inventory-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Slightly reduces image frame height in landscape so 2 cards fit nicely */
    .inventory-card .main-image-container,
    .vehicle-card .main-image-container {
        height: 150px !important;
    }
}

/* 3. TABLETS & DESKTOPS (Screens 768px and wider) */
@media screen and (min-width: 768px) {
    #autoInventoryGrid,
    #machineryInventoryGrid,
    #inventory-container {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 15px !important;
    }
}

/* 4. BASE IMAGE CONTAINER STYLES */
.inventory-card .main-image-container,
.vehicle-card .main-image-container {
    width: calc(100% + 30px) !important;
    height: 200px;
    margin: -15px -15px 12px -15px !important;
    overflow: hidden !important;
    position: relative !important;
}

.inventory-card .main-image-container img,
.vehicle-card .main-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Hide floating dual-clock display on the Ventures button across all mobile viewports */
@media screen and (max-width: 768px) {
    .hero-dropdown-container .jstClockDisplay,
    .hero-dropdown-container .catClockDisplay,
    .hero-dropdown-container .ventures-clock-container {
        display: none !important;
    }
}

/* Container wrapper setup */
.hero-landscape-container {
  position: relative;
  width: 100%;
  display: block;
}

/* Base style for pop-up banners */
.hero-car-banner {
  position: absolute;
  z-index: 900;
  padding: 5px 10px;
  background-color: #ff9900;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.hero-car-banner.visible {
  opacity: 3;
  visibility: visible;
}

@keyframes fingerBounce {
  0% { transform: rotate(30deg) translate(0, 0); }
  100% { transform: rotate(30deg) translate(3px, -5px); }
}

/* ================================================================ */
/* FLAME BADGE BASE STYLING                                         */
/* ================================================================ */
.hero-car-banner.hero-flame-callout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;

  /* Default variable fallback */
  --flame-scale: 1;

  transform-origin: center center !important;
}

.hero-flame-callout .flame-icon,
.hero-flame-callout .flame-finger {
  display: inline-block !important;
}

.hero-flame-callout .bouncing-finger {
  animation: flameFingerBounce 0.7s infinite alternate ease-in-out !important;
}

@keyframes flameFingerBounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

/* ================================================================ */
/* POINTING HAND POSITIONING KNOBS (TRANSFORM-BASED)                 */
/* ================================================================ */
.hero-flame-callout .flame-finger,
.hero-flame-callout .bouncing-finger {
  display: inline-block !important;
  
  /* ⚙️ ADJUST POSITION KNOBS:
     First value (X): positive moves RIGHT, negative moves LEFT
     Second value (Y): negative moves UP, positive moves DOWN */
  transform: translate(4px, -35px) !important;
}

/* Updated finger bounce animation to preserve your position offsets */
@keyframes flameFingerBounce {
  0% { 
    transform: translate(4px, -8px) !important; 
  }
  100% { 
    transform: translate(4px, -11px) !important; /* Bounces 3px higher */
  }
}

/* ================================================================ */
/* COMBINED BOUNCY-WAVY ANIMATION (BOUNCE + TILT WAVE)               */
/* ================================================================ */
@keyframes bannerBouncyWave {
  0% {
    transform: scale(var(--flame-scale, 1)) translateY(0px) rotate(-2deg);
  }
  50% {
    transform: scale(var(--flame-scale, 1)) translateY(-8px) rotate(2deg); /* Vertical Bounce + Wavy Tilt */
  }
  100% {
    transform: scale(var(--flame-scale, 1)) translateY(0px) rotate(-2deg);
  }
}

/* Apply bouncy-wave animation whenever banners are active */
.hero-car-banner.visible {
  animation: bannerBouncyWave 1.2s ease-in-out infinite !important;
}

/* Stagger sequence delay (Left -> Center -> Right) */
#landscape-banner-1.visible {
  animation-delay: 0s !important;
}

#landscape-banner-2.visible {
  animation-delay: 0.2s !important;
}

#landscape-banner-3.visible {
  animation-delay: 0.4s !important;
}

/* ================================================================ */
/* 1. DESKTOP VIEWPORT COORDINATES (> 768px)                          */
/* ================================================================ */
@media screen and (min-width: 769px) {

  /* Force override all default position locks when visible */
  .hero-car-banner.visible {
    bottom: auto !important;
    position: absolute !important;
  }

  /* BANNER 1 (Left Lane Cars) */
  #landscape-banner-1 {
    top: 50% !important;
    margin-top: 210px !important;
    left: 29% !important;
  }

  /* BANNER 2 (Center Lane Cars) */
  #landscape-banner-2 {
    top: 50% !important;
    margin-top: 210px !important;
    left: 42% !important;
  }

  /* BANNER 3 (Right Lane Cars) */
  #landscape-banner-3 {
    top: 50% !important;
    margin-top: 220px !important;
    left: 55% !important;
  }
}

/* ================================================================ */
/* 2. MOBILE PORTRAIT COORDINATES & SCALE KNOB (<= 768px)             */
/* ================================================================ */
@media screen and (max-width: 768px) and (orientation: portrait) {
  
  /* ⚙️ MOBILE PORTRAIT FLAME SIZE KNOB */
  .hero-car-banner.hero-flame-callout {
    --flame-scale: 0.75 !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  .hero-car-banner.hero-flame-callout.visible {
    bottom: auto !important;
    position: absolute !important;
  }

  /* BANNER 1 (Left Lane Cars) */
  #landscape-banner-1.hero-car-banner,
  #landscape-banner-1.hero-flame-callout {
    top: 50% !important;
    margin-top: 300px !important;
    left: 0% !important;
    right: auto !important;
  }

  /* BANNER 2 (Center Lane Cars) */
  #landscape-banner-2.hero-car-banner,
  #landscape-banner-2.hero-flame-callout {
    top: 50% !important;
    margin-top: 238px !important;
    left: 31% !important;
    right: auto !important;
  }

  /* BANNER 3 (Right Lane Cars) */
  #landscape-banner-3.hero-car-banner,
  #landscape-banner-3.hero-flame-callout {
    top: 50% !important;
    margin-top: 314px !important;
    left: 61% !important;
    right: auto !important;
  }
}

/* ================================================================ */
/* 3. MOBILE LANDSCAPE ONLY (<= 932px, Landscape)                   */
/* ================================================================ */
@media screen and (max-width: 932px) and (orientation: landscape) {

  /* Ensure parent has explicit height reference for percentage positioning */
  .hero-landscape-container,
  .hero-section,
  .hero-container,
  .hero-car-banner-wrapper {
    position: relative !important;
    overflow: visible !important;
    max-height: none !important;
    min-height: 100vh !important; /* Forces full viewport height */
  }
  
  .hero-car-banner {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }

  /* Force absolute position anchored from top edge */
  .hero-car-banner.visible {
    position: absolute !important;
    bottom: auto !important;
    display: inline-flex !important;
    z-index: 120 !important;
  }

  /* BANNER 1 (Left Lane) */
  #landscape-banner-1 {
    top: 5% !important; /* Adjust percentage to move further down */
    left: 22% !important;
    margin-top: 0 !important;
  }

  /* BANNER 2 (Center Lane) */
  #landscape-banner-2 {
    top: 30% !important; /* Adjust percentage to move further down */
    left: 42% !important;
    margin-top: 0 !important;
  }

  /* BANNER 3 (Right Lane) */
  #landscape-banner-3 {
    top: 5% !important; /* Adjust percentage to move further down */
    left: 62% !important;
    margin-top: 0 !important;
  }
} 

/* ================================================================ */
/* VENTURES CURSOR HAND BASE & ACTIVE STATE                         */
/* ================================================================ */
#venturesCursorHand {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#venturesCursorHand.active {
  opacity: 1 !important;
  visibility: visible !important;
  margin-left: -55px !important; 
  animation: venturesHandBounce 0.6s infinite alternate ease-in-out !important;
}

@keyframes venturesHandBounce {
  0% {
    transform: translateY(-50%) rotate(-45deg) translate(0, 0);
  }
  100% {
    transform: translateY(-50%) rotate(-45deg) translate(-4px, -4px);
  }
}

/* ================================================================ */
/* 2. HAND POINTER VISIBILITY & BOUNCE CONTROL                     */
/* ================================================================ */
/* Ensure parent container allows overlay visibility */
.hero-dropdown-container {
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible !important;
}

/* Default hidden state for hand pointer */
#venturesCursorHand {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  z-index: 99999 !important;
  top: 50% !important;
  left: -12px !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
  pointer-events: none !important;
}

/* Active state toggled by JavaScript during the 7s cycle */
#venturesCursorHand.active {
  opacity: 1 !important;
  visibility: visible !important;
  animation: venturesHandBounce 0.6s infinite alternate ease-in-out !important;
}

@keyframes venturesHandBounce {
  0% {
    transform: translateY(-50%) rotate(-45deg) translate(0, 0);
  }
  100% {
    transform: translateY(-50%) rotate(-45deg) translate(-4px, -4px);
  }
}

/* ===================================================== */
/* ENLARGED FLAME CALLOUTS & VISIBILITY/ANIMATION CONTROL */
/* ===================================================== */

/* Strip orange background, borders, and shadows from original banner class */
.hero-car-banner {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Base hidden state for timed cycle */
.hero-flame-callout {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 140px;
    height: 140px;

    pointer-events: none;
    z-index: 120;

    /* Initial Hidden State for JS Fade Cycle */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Active State toggled by JS (.visible) */
.hero-car-banner.visible,
.hero-flame-callout.visible {
    opacity: 1 !important;
    visibility: visible !important;
    animation: bannerWave 0.6s ease-in-out infinite alternate !important;
}

/* Stagger animation delay for wavy bounce (Left -> Center -> Right) */
#landscape-banner-1.visible {
    animation-delay: 0s !important;
}

#landscape-banner-2.visible {
    animation-delay: 0.2s !important;
}

#landscape-banner-3.visible {
    animation-delay: 0.4s !important;
}

/* Main flame */
.flame-icon {
    position: absolute;
    font-size: 95px;
    line-height: 1;
    filter:
        drop-shadow(0 0 8px rgba(255,120,0,.9))
        drop-shadow(0 0 18px rgba(255,180,0,.7));

    animation: flamePulse 1.6s ease-in-out infinite;
}

/* Text INSIDE flame */
.flame-text {
    position: absolute;

    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: #ffffff;
    font-family: "Bookman Old Style", serif;
    font-weight: 900;
    font-size: 20px;

    white-space: nowrap;

    text-shadow:
        0 0 4px #000,
        0 0 8px #000,
        0 0 12px #000;

    z-index: 2;
}

/* Pointing hand placed to the RIGHT */
.flame-finger {
    position: absolute;

    left: 102px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 30px;

    z-index: 3;
}

/* Flame breathing effect */
@keyframes flamePulse {
    0% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(0.95);
    }
}

/* Wavy bounce baseline animation */
@keyframes bannerWave {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-8px); /* Height of the wavy bounce */
    }
}

/* Ensure row 4 centers slogan while keeping absolute children aligned relative to it */
.fourth-row {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Position wrapper on the far right along the horizontal line */
.hamburger-menu-wrapper {
    position: absolute !important;
    right: 45px !important;
    top: 42% !important;
    transform: translateY(-50%) !important;
    z-index: 130;
}

/* Transparent Hamburger Button Container */
.hamburger-btn {
    width: 32px;
    height: 32px;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform 0.2s ease;
}

.hamburger-btn:hover {
    transform: scale(1.1);
}

/* Golden Lines with High Contrast for Light Backgrounds */
.hamburger-bar {
    width: 26px;
    height: 3.5px;
    background: linear-gradient(135deg, #FFE55C 0%, #FFB700 50%, #FF6600 100%) !important;
    border-radius: 2px;
    border: 1px solid #500000 !important; /* Dark crimson outline for contrast */
    box-shadow: 
        0 2px 5px rgba(0, 0, 0, 0.95), 
        0 0 4px rgba(128, 0, 0, 0.8) !important; /* Multi-layer dark shadow glow */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Perfect "X" Cross Animation */
.hamburger-btn.is-active .hamburger-bar {
    position: absolute;
    top: 50%;
    left: 50%;
}

.hamburger-btn.is-active .hamburger-bar:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.hamburger-btn.is-active .hamburger-bar:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.is-active .hamburger-bar:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* High-Contrast Hand Click Icon & Pulsing Dashes */
#venturesCursorHand {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)) 
            drop-shadow(0 0 4px rgba(80, 0, 0, 0.8)) !important;
}

/* Ensure the red hand element has a crisp dark outline */
#venturesCursorHand svg path,
#venturesCursorHand .hand-icon {
    stroke: #500000 !important;
    stroke-width: 1px !important;
}

/* Make yellow click/pulse dashes high-contrast */
#venturesCursorHand .click-dash,
#venturesCursorHand .pulse-line {
    stroke: #FFD700 !important;
    stroke-width: 2.5px !important;
    /* Multi-layered dark shadow ensures bright yellow stands out over light clouds */
    filter: drop-shadow(0 0 2px #000000) 
            drop-shadow(0 0 4px #500000) !important;
}

/* ================================================================ */
/* HAND CLICK FRONT STACKING & FADE-OUT FIX                         */
/* ================================================================ */

/* 1. Ensure the parent top row allows free floating elements */
.top-row {
  position: relative !important;
  z-index: 500 !important;
  overflow: visible !important;
}

/* 2. Target individual wrappers in Row 1: Left (Events) lower, Right (Ventures) higher */
.top-row .left-group,
.top-row .nav-item-wrapper:first-child {
  position: relative !important;
  z-index: 10 !important;
}

.top-row .right-group,
.top-row .nav-item-wrapper:last-child,
.top-row .nav-item-wrapper:has(#venturesBtn),
.top-row .nav-item-wrapper:has(#venturesCursorHand) {
  position: relative !important;
  z-index: 900 !important;
  overflow: visible !important;
}

/* 3. Mobile Portrait specific override (<= 768px) */
@media screen and (max-width: 768px) and (orientation: portrait) {
  
  /* Elevate cursor hand while preserving JS fade-out control */
  #venturesCursorHand.active {
    position: absolute !important;
    z-index: 999999 !important;
    margin-left: -40px !important; /* Pulls hand in front of Events button */
    pointer-events: none !important;
  }
}