/* WIRED GLOBAL ARCHITECTURE */
    :root {
        --wired-black: #000000;
        --wired-gold: #fbbf24;
        --wired-border: #eeeeee;
        --wired-accent: #d0021b;
        --nav-height: 120px; 
    }

.syvix-wired-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    
    /* ~1/4 inch ≈ 24px, adjust to 16px for ~1/6 inch */
    padding: var(--nav-height) 24px 0 24px !important;

    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
}

    /* Section Styling */
    .wired-section {
        border-top: 4px solid var(--wired-black);
        margin-top: 40px;
        padding-top: 20px;
        margin-bottom: 60px;
    }

    .wired-header-flex {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 25px;
    }

    .wired-section-title {
        font-size: 26px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: -0.5px;
        margin: 0;
    }

    .kicker {
        color: var(--wired-accent);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 10px;
        display: block;
    }

    /* TYPOGRAPHY-FIRST HERO GRID */
   .hero-grid {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 10px;
    padding: 5px 40px 30px 40px; 
    border-bottom: 1px solid var(--wired-border);
    max-width: 100%; /* Allows the grid to expand fully */
    margin: 0 auto;
}

.hero-col-left { 
    border-right: 1px solid var(--wired-border); 
    padding-right: 20px; 
    margin-top: 100px; /* Adjust this number to move it exactly where you want it */
    align-self: start;  /* This is the secret—it stops the grid from forcing it to the top */
}

.hero-col-right { 
    border-left: 1px solid var(--wired-border); 
    padding-left: 20px; 
    /* Keep this at 0 since you said the right side is fine */
}
    
  .hero-main-center h1 { 
    font-size: 58px; 
    font-weight: 900; /* Reverted to your standard heavy weight */
    line-height: 0.95; 
    letter-spacing: -2px; 
    margin: 20px 0; 
    color: var(--wired-black); 
    text-align: center;
} 
   
    .hero-main-center p {
        font-size: 18px;
        line-height: 1.5;
        color: #444;
        max-width: 500px;
        margin: 0 auto 25px;
    }
    
    /* CURATED EXCELLENCE CUBES - FIXED 5 COLUMN GRID */
    .cube-row-5 {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 15px !important;
        margin: 40px 0 60px !important;
        width: 100%;
    }

    .cube-item {
        position: relative;
        aspect-ratio: 1 / 1; 
        overflow: hidden;
        background: #000;
        border: 1px solid var(--wired-border);
        display: block;
        text-decoration: none;
    }

    .cube-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important; /* FIXED: Keeps heads visible */
        display: block;
    }

    .cube-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px;
        background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
        z-index: 5;
    }

   .cube-category {
        display: inline-block;
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: #FFD700 !important; /* Premium Gold */
        margin-bottom: 5px;
        /* FIXED: High contrast black outline for readability */
        text-shadow: 
            1px 1px 0 #000, 
            -1px -1px 0 #000, 
            1px -1px 0 #000, 
            -1px 1px 0 #000,
            2px 2px 5px rgba(0,0,0,0.8);
    }

    .cube-title {
        font-size: 14px;
        font-weight: 800;
        line-height: 1.2;
        margin: 0;
        color: #fff;
    }

    /* STACK ITEMS */
    .wired-stack-item { margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px solid var(--wired-border); }
    .wired-stack-item:last-child { border-bottom: 0; }
    .wired-stack-item h3 { font-size: 18px; font-weight: 800; line-height: 1.2; margin: 5px 0; color: #000; }
    .wired-stack-item img { width: 100%; height: 130px; object-fit: cover; margin-bottom: 12px; }

    /* IMPACT MODULE */
    .impact-module {
        display: grid;
        grid-template-columns: 1.8fr 1fr;
        background: #000;
        color: #fff;
    }
    .impact-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .impact-text { padding: 60px; display: flex; flex-direction: column; justify-content: center; }
    .impact-text h2 { font-size: 38px; font-weight: 900; line-height: 1.1; margin: 20px 0; color: #fff; }
    .impact-cta {
        background: var(--wired-gold);
        color: #000;
        padding: 15px 35px;
        font-weight: 900;
        text-transform: uppercase;
        text-decoration: none;
        width: fit-content;
        margin-top: 20px;
    }

    /* SECTION DIVIDERS */
    .section-divider {
        border-bottom: 2px solid var(--wired-black);
        margin: 60px 0 30px;
        display: flex;
        align-items: center;
    }
    .section-divider span {
        background: var(--wired-black);
        color: #fff;
        padding: 6px 15px;
        font-weight: 900;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 1px;
    }

    /* MIX-GRID & ROWS */
    .mix-grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 40px;
        margin-bottom: 60px;
    }
    .mix-grid.reverse { grid-template-columns: 1fr 1.6fr; }
    .mix-large img { width: 100%; height: 480px; object-fit: cover; border: 1px solid var(--wired-border); }
    .mix-small article { 
        display: grid; 
        grid-template-columns: 140px 1fr; 
        gap: 20px; 
        margin-bottom: 25px; 
        padding-bottom: 20px; 
        border-bottom: 1px solid var(--wired-border); 
    }
    .mix-small img { width: 100%; height: 90px; object-fit: cover; }

    .row-3, .objects-grid, .videos-grid, .latest-grid { 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); 
        gap: 30px; 
        margin-bottom: 60px; 
    }
    .row-3 img, .objects-grid img, .latest-grid img { width: 100%; height: 220px; object-fit: cover; margin-bottom: 15px; }

    /* VIDEO FIXES */
    .videos-grid article { border: 1px solid var(--wired-border); padding: 15px; background: #fff; }
    .videos-grid .thumb { overflow: visible !important; margin: 0 0 10px 0; }
    .videos-grid .thumb iframe, .videos-grid .thumb video { width: 100% !important; height: auto !important; display: block !important; }

    /* NAV DROPDOWN SCROLLBAR */
    .nav-menu li ul {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
        background: #000;
        border: 1px solid var(--wired-border);
    }
    .nav-menu li ul::-webkit-scrollbar { width: 4px; }
    .nav-menu li ul::-webkit-scrollbar-thumb { background: var(--wired-gold); border-radius: 10px; }
    
    /* ===== FIX NAV DROPDOWN ON MOBILE ===== */
@media (max-width: 768px) {

    .nav-menu li ul {
        max-height: none !important;
        overflow: visible !important;
        border: none !important;
    }

    /* Ensure submenu stacks properly */
    .main-navigation .sub-menu {
        display: none;
        position: static !important;
        width: 100%;
        background: #000;
    }

    /* Show when clicked */
    .main-navigation .menu-item-has-children.toggled > .sub-menu {
        display: block !important;
    }
}

    /* CONSOLIDATED RESPONSIVE RULES */
    @media (max-width: 1024px) {
        .hero-grid, .impact-module, .mix-grid, .mix-grid.reverse, .row-3, .objects-grid, .videos-grid, .latest-grid {
            grid-template-columns: 1fr !important;
        }
        .cube-row-5 { grid-template-columns: repeat(2, 1fr) !important; } /* Cubes go to 2-columns on tablet */
        .hero-col-left, .hero-col-right { border: 0; padding: 0; }
        .hero-main-center h1 { font-size: 38px; }
        .syvix-wired-container { padding-top: calc(var(--nav-height) + 20px); }
    }

    @media (max-width: 600px) {
        .cube-row-5 { grid-template-columns: 1fr !important; } /* Cubes stack ONLY on small mobile */
    }
    
    /* Ensure the Mix-Grid specifically handles the 1-on-left, 3-on-right layout */
.mix-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
    align-items: start;
}

.mix-large img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border: 1px solid var(--wired-border);
    margin-bottom: 15px;
}

.mix-large h2 {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
    margin: 10px 0;
    color: var(--wired-black);
}

.mix-small article {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--wired-border);
}

.mix-small article:last-child {
    border-bottom: none;
}

.mix-small img {
    width: 120px;
    height: 80px;
    object-fit: cover;
}

.mix-small h4 {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
}

/* Date/Meta Styling */
.meta {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--wired-accent);
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: block;
}

/* THE MINI-5: CATEGORY NAV STRIP (FIXED 5-COLUMN GRID) */
    .mini-5 {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 15px !important;
        margin: 50px 0 !important;
        width: 100% !important;
    }

    .mini-box {
        background: #bfa12f !important; /* Your signature gold */
        color: #000 !important;
        padding: 30px 10px;
        font-weight: 900;
        text-transform: uppercase;
        text-align: center;
        border: 2px solid #000;
        font-size: 13px;
        letter-spacing: 1px;
        text-decoration: none;
        display: block !important;
        transition: transform 0.2s ease, background 0.2s ease;
    }

    .mini-box:hover { 
        transform: translateY(-3px); 
        background: #fbbf24 !important; /* Brighter gold on hover */
    }

    /* MOBILE: Drop to 2 columns so they don't squish on phones */
    @media (max-width: 768px) {
        .mini-5 { grid-template-columns: repeat(2, 1fr) !important; }
    }
    
/* 1. THE FOUNDATION - STOPS THE JUMPING */
article, 
.box-article, 
.latest-grid article, 
.hero-wired-grid a, 
.videos-grid article {
    display: block !important;
    position: relative !important;
    background: #ffffff;
    /* Slow, weighted transition for a "bespoke" feel */
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), 
                box-shadow 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
    transform: translateZ(0);
    will-change: transform;
}


/* 3. THE "SOFT PUSH" PHOTO (Luxury Depth) */
article img, 
.box-article img, 
.hero-wired-grid img, 
.videos-grid img,
.thumb img {
    transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1), 
                filter 0.7s ease !important;
    transform: scale(1) translateZ(0);
}

article:hover img, 
.box-article:hover img, 
.hero-wired-grid a:hover img, 
.videos-grid article:hover img {
    transform: scale(0.985) translateZ(0) !important; /* Very slight push */
    filter: brightness(0.94); /* Elegant dimming */
}

/* 4. THE DARK GOLD TITLE (Bespoke Stationery Feel) */
article:hover h1, 
article:hover h3, 
article:hover h4,
article:hover a, 
.box-article:hover h3, 
.box-article:hover a h3,
.videos-grid article:hover h4,
.hero-wired-grid a:hover h1 {
    color: #B8860B !important; /* Dark Gold Shade */
    letter-spacing: 0.02em !important; /* Subtle expansion for luxury feel */
    transition: color 0.5s ease, letter-spacing 0.5s ease !important;
    text-decoration: none !important;
}

/* 5. THE CLICK (Silent Response) */
article:active {
    transform: translateY(-1px) scale(0.998) !important;
    transition: transform 0.2s ease !important;
}

/* 1. THE LARGE FEATURE BOX (Main Item in 1+3 Grid) */
.section-feature-large, 
.curated-excellence .large-item,
.hero-wired-grid .main-feature,
[class*="large"] a,
[class*="feature"] article {
    display: block !important;
    position: relative !important;
    background: #fff;
    /* Luxury Timing (0.8s) */
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), 
                box-shadow 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
    transform: translateZ(0);
}

/* THE DISCREET LIFT FOR THE LARGE ITEM */
.section-feature-large:hover, 
[class*="large"]:hover,
.curated-excellence .large-item:hover {
    transform: translateY(-4px) translateZ(0) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
    z-index: 60 !important;
}

/* 2. THE LARGE PHOTO "SOFT PUSH" */
/* Forces the big photo to push inward like the small ones */
.section-feature-large img,
.curated-excellence .large-item img,
[class*="large"] img {
    transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1), 
                filter 0.7s ease !important;
}

.section-feature-large:hover img, 
.curated-excellence .large-item:hover img,
[class*="large"]:hover img {
    transform: scale(0.985) translateZ(0) !important;
    filter: brightness(0.94); /* Elegant luxury dimming */
}

/* 3. THE LARGE TITLE (DARK GOLD) */
/* Targets the big H1/H2 titles that the smaller rules were missing */
.section-feature-large:hover h1,
.section-feature-large:hover h2,
.section-feature-large:hover h3,
.curated-excellence .large-item:hover h2,
.curated-excellence .large-item:hover h3,
.curated-excellence .large-item:hover a {
    color: #B8860B !important; /* Dark Gold Shade */
    letter-spacing: 0.02em !important;
    transition: color 0.5s ease, letter-spacing 0.5s ease !important;
    text-decoration: none !important;
}

/* 1. FORCE DARK GOLD ON LARGE HEADLINES */
/* This targets H1, H2, and H3 inside any large or curated section */
.hero-wired-center h1,
.hero-wired-center a h1,
.curated-excellence h2,
.curated-excellence h2 a,
.curated-excellence h3,
.curated-excellence h3 a,
[class*="large"] h1,
[class*="large"] h1 a,
[class*="large"] h2,
[class*="large"] h2 a,
.section-feature-large h2,
.section-feature-large h2 a {
    transition: color 0.5s ease, letter-spacing 0.5s ease !important;
}

/* 2. THE HOVER & CLICK STATE */
/* This triggers when the mouse is over the box OR the title itself */
.hero-wired-center:hover h1,
.hero-wired-center a:hover h1,
.curated-excellence article:hover h2,
.curated-excellence article:hover h2 a,
.curated-excellence article:hover h3,
.curated-excellence article:hover h3 a,
[class*="large"]:hover h1,
[class*="large"]:hover h2,
[class*="large"]:hover a,
.section-feature-large:hover h2,
.section-feature-large:hover h2 a,
/* Pressed/Active state */
.curated-excellence article:active h2,
.curated-excellence article:active h3 {
    color: #B8860B !important; /* Dark Gold Shade */
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
}

/* 1. STABILIZE THE CURATED BOXES (Prevents Jumping) */
.curated-excellence article, 
.curated-excellence .wp-block-post, 
[class*="curated"] article {
    display: block !important;
    position: relative !important;
    /* Smooth, weighted landing */
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), 
                box-shadow 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
    transform: perspective(1px) translateZ(0); /* Anchors the box to the GPU */
    will-change: transform;
    background: #ffffff;
}

/* THE LIFT */
.curated-excellence article:hover, 
[class*="curated"] article:hover {
    transform: translateY(-5px) translateZ(0) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.05) !important;
    z-index: 10;
}

/* 2. THE SOFT PUSH PHOTO (Curated Excellence) */
.curated-excellence img, 
.curated-excellence .wp-block-post-featured-image img {
    /* Slower transition for the photo for a "luxury" feel */
    transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1), 
                filter 0.7s ease !important;
    transform: scale(1) translateZ(0);
}

/* When the box is hovered, the photo pushes back slightly */
.curated-excellence article:hover img, 
[class*="curated"] article:hover img {
    transform: scale(0.98) translateZ(0) !important; /* The Soft Push */
    filter: brightness(0.93); /* Deepens the image focus */
}

/* 3. DEEP DARK GOLD TITLES (Curated Section) */
/* Targeting H2, H3, H4 and the <a> links inside them */
.curated-excellence article:hover h2, 
.curated-excellence article:hover h3, 
.curated-excellence article:hover h4,
.curated-excellence article:hover a,
.curated-excellence article:hover h3 a {
    color: #B8860B !important; /* Your Deep Dark Gold */
    letter-spacing: 0.02em !important;
    transition: color 0.5s ease !important;
    text-decoration: none !important;
}

/* 4. ACTIVE/PRESSED STATE */
.curated-excellence article:active {
    transform: translateY(-2px) scale(0.99) !important;
    transition: transform 0.2s ease !important;
}

/* OPTIONAL: Subtle clarity shift for excerpts */
article .entry-excerpt, 
article p, 
.curated-excellence article p {
    transition: opacity 0.5s ease !important;
    opacity: 0.7; /* Slightly dimmed by default */
}

article:hover .entry-excerpt, 
article:hover p, 
.curated-excellence article:hover p {
    opacity: 1; /* Becomes fully clear on hover */
}

/* --- 1. THE PHOTO: Slide it left and lock it --- */
.hero-col-right img, 
.mix-small img, 
.feed-list img,
.thumbnail,
.ast-article-inner img {
    float: left !important;
    width: 100px !important;
    height: 100px !important;
    margin-right: 18px !important; 
    margin-bottom: 5px !important;
    object-fit: cover !important;
    display: inline-block !important;
}

/* --- 2. THE TEXT AREA: Force everything to the right --- */
/* This targets the title, date, and excerpt containers simultaneously */
.hero-col-right .post-content, 
.mix-small .post-content, 
.feed-list .post-content,
.hero-col-right .ast-article-inner,
.ast-post-format-content,
.hero-col-right .entry-header, /* Astra specific header wrapper */
.hero-col-right .entry-content  /* Astra specific content wrapper */ {
    overflow: hidden !important; 
    display: block !important;
    width: auto !important;
    clear: none !important; /* Forces it to stay next to the photo */
}

/* --- 3. THE TITLE: Stop the "Drop" --- */
.hero-col-right h2, .hero-col-right h3, .hero-col-right h4,
.mix-small h2, .mix-small h3, .mix-small h4,
.feed-list h2, .feed-list h3, .feed-list h4,
.ast-archive-post h2 {
    display: block !important;
    clear: none !important; /* Critical: stops it from jumping under the photo */
    margin: 0 0 5px 0 !important;
    width: auto !important;
    line-height: 1.2 !important;
}

/* --- 4. THE EXCERPT: Force visibility --- */
.hero-col-right p, 
.mix-small p, 
.feed-list p,
.ast-article-inner p,
.entry-content p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #666 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-top: 5px !important;
    clear: none !important;
}


/* --- 1. THE ROW: Vertical Stack & Even Spacing --- */
.hero-col-right article, 
.mix-small, 
.feed-list article,
.ast-archive-post {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    /* This margin creates the '3-stack' height to match the large photo */
    margin-bottom: 28px !important; 
    padding-bottom: 15px !important;
    border-bottom: 1px solid #eee !important;
    min-height: 120px; /* Ensures the row stays tall enough for the photo */
}

/* --- 2. THE PHOTO: Increased to 120px & Locked Left --- */
.hero-col-right img, 
.mix-small img, 
.thumbnail,
.ast-article-inner img {
    float: left !important;
    width: 120px !important;  /* Bolder size */
    height: 120px !important; 
    margin-right: 20px !important; /* The 1/4 inch gap */
    margin-bottom: 10px !important;
    object-fit: cover !important;
    display: block !important;
}

/* --- 3. THE TEXT AREA: Title & Excerpt (No Dropping) --- */
.hero-col-right .post-content, 
.mix-small .post-content, 
.feed-list .post-content,
.hero-col-right .ast-article-inner,
.ast-post-format-content {
    overflow: hidden !important; /* Forces text to stay to the right of the photo */
    display: block !important;
    text-align: left !important;
}

/* --- 4. TYPOGRAPHY: Match the Luxury Section --- */
.hero-col-right h4, .mix-small h4, .feed-list h4, .ast-archive-post h2 {
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
    color: #000 !important;
}

.hero-col-right p, .mix-small p, .feed-list p, .ast-article-inner p {
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-top: 5px !important;
    display: block !important;
}

/* --- 5. LAST ITEM CLEANUP: Remove bottom border on the 3rd item --- */
.hero-col-right article:last-child, 
.mix-small:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* --- 1. FORCE THE EXCERPT TO SHOW (The "Nuclear" Option) --- */
.hero-col-right article p, 
.mix-small p, 
.feed-list article p,
.ast-article-inner p,
.entry-content p,
.ast-archive-description,
.ast-post-format-content p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    
    /* STYLING TO MATCH LUXURY SECTION */
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

/* --- 2. PREVENT WRAPPERS FROM HIDING CONTENT --- */
/* Sometimes the 'div' around the paragraph is set to height:0 */
.hero-col-right .post-content, 
.mix-small .post-content, 
.feed-list .post-content,
.ast-article-inner,
.ast-post-format-content {
    display: block !important;
    height: auto !important;
    min-height: 1px !important;
    overflow: hidden !important; /* Keeps text to the right of photo */
}

/* --- 3. ALIGNMENT: Lock the 3-stack to the Large Photo height --- */
.hero-col-right article, 
.mix-small, 
.feed-list article {
    margin-bottom: 35px !important; /* Adjusted to stretch the stack */
    padding-bottom: 15px !important;
    border-bottom: 1px solid #eee !important;
    min-height: 130px !important; /* Matches the 120px photo + some text */
}

/* --- 4. PHOTO: 120px Square --- */
.hero-col-right img, 
.mix-small img, 
.thumbnail {
    float: left !important;
    width: 120px !important;
    height: 120px !important;
    margin-right: 20px !important;
    object-fit: cover !important;
}

/* --- 1. REMOVE BLOCKING LAYERS FOR ADS --- */
html, body, #page, .ast-separate-container, .site-content, .site-main, .syvix-wired-container {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: visible !important; /* Critical for side ads */
}

/* --- 2. FIX CENTER DROP & ALIGNMENT --- */
.hero-grid {
    display: grid !important;
    grid-template-columns: 280px 1fr 280px !important;
    align-items: start !important; /* Level with side columns */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.ast-separate-container .site-content {
    padding-top: 0 !important; /* Removes Astra's default 4em gap */
}


/* FORCE ALL AD CONTAINERS TO DISPLAY ABOVE CONTENT */
.ads-side-left,
.ads-side-right,
.ads-top,
.ads-bottom {
    position: fixed !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
}


/* HARD OVERRIDE: HERO GRID */
/* HERO GRID WITH THIN SIDE PADDING */
/* 1) Global page padding: ~1/4 inch on each side */
body {
    padding-left: 12px;
    padding-right: 12px;
}

/* 2) Hero grid: full width inside that padding, no extra gutters */
.hero-grid {
    display: grid !important;

    /* proportions: side boxes + center hero */
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 760px) minmax(260px, 1fr) !important;

    column-gap: 10px !important;
    row-gap: 0 !important;

    padding-top: 5px !important;
    padding-bottom: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    border-bottom: 1px solid var(--wired-border) !important;

    /* this controls how close hero gets to page edges */
    max-width: 1450px !important;  /* lower = bigger side gaps, higher = smaller gaps */
    margin: 0 auto !important;
}


/* TITLE – no jump, color-only hover */
.hero-main-center h1 {
    font-size: 58px !important;
    font-weight: 900 !important;
    line-height: 0.95 !important;
    letter-spacing: -2px !important;
    margin: 20px 0 !important;
    color: var(--wired-black) !important;
    text-align: center !important;
    transform: none !important;
    border: none !important;
    transition: color 0.25s ease !important;
}

.hero-main-center h1:hover {
    color: #f6b800 !important; /* deep bright gold */
}

/* IMAGE – freeze layout, soft highlight only */
.hero-main-center img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
    transition: filter 0.25s ease, opacity 0.25s ease !important;
}

.hero-main-center img:hover {
    filter: brightness(1.05);
    opacity: 0.98;
}

/* ===== HARD MOBILE RESET (FIX WHITE SPACE + BROKEN GRID) ===== */
@media (max-width: 768px) {

    html, body {
        overflow-x: hidden !important;
    }

    .syvix-wired-container {
        width: 100% !important;
        left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero-grid,
    .mix-grid,
    .row-3,
    .objects-grid,
    .videos-grid,
    .latest-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .mix-small article {
        display: flex !important;
        gap: 12px !important;
    }

    .mix-small img {
        float: none !important;
        width: 90px !important;
        height: 90px !important;
    }
}

/* ===== MOBILE MENU FIX ===== */
@media (max-width: 768px) {

    /* Ensure menu is hidden by default */
    .main-navigation ul,
    .ast-nav-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    /* When menu is opened */
    .main-navigation.toggled ul,
    .ast-main-header-nav-open .ast-nav-menu {
        max-height: 80vh; /* allows scroll inside menu */
        overflow-y: auto;
    }

    /* Prevent menu from covering whole screen */
    .main-header-bar,
    .site-header {
        position: relative !important;
    }

    /* Fix overlay behavior */
    .ast-mobile-popup-drawer,
    .ast-header-break-point .main-navigation {
        position: absolute !important;
        top: 100%;
        left: 0;
        width: 100%;
        height: auto !important;
        max-height: 80vh;
        overflow-y: auto;
        background: #000;
        z-index: 9999;
    }
}

/* ===== MOBILE DROPDOWN FIX ===== */
@media (max-width: 768px) {

    /* Hide submenu by default */
    .main-navigation .sub-menu {
        display: none !important;
        opacity: 0;
        visibility: hidden;
    }

    /* Show when parent is toggled (clicked) */
    .main-navigation .menu-item-has-children.toggled > .sub-menu,
    .main-navigation .menu-item-has-children > .sub-menu.toggled {
        display: block !important;
        opacity: 1;
        visibility: visible;
    }

    /* Fix arrow click area */
    .main-navigation .menu-item-has-children > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* ===== FIX DROPDOWN BEHIND MENU ===== */
@media (max-width: 768px) {

    .main-navigation,
    .ast-mobile-popup-drawer,
    .ast-header-break-point .main-header-bar {
        position: relative !important;
        z-index: 9999 !important;
    }

    .main-navigation ul ul,
    .main-navigation .sub-menu {
        position: relative !important; /* prevents it from going behind */
        z-index: 10000 !important;
        background: #000 !important;
    }

    /* Ensure parent allows overflow */
    .main-navigation ul {
        overflow: visible !important;
    }
}

/* ===== ASTRA MOBILE MENU FINAL FIX ===== */
@media (max-width: 768px) {

    /* Allow full dropdown visibility inside drawer */
    .ast-mobile-popup-drawer,
    .ast-mobile-popup-content,
    .ast-header-break-point .main-navigation {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    /* Remove clipping from UL */
    .ast-header-break-point .main-navigation ul,
    .ast-header-break-point .main-navigation li {
        overflow: visible !important;
    }

    /* Submenu behavior */
    .ast-header-break-point .main-navigation .sub-menu {
        display: none;
        position: static !important;
        width: 100%;
        background: #000;
    }

    /* Astra uses this class when opened */
    .ast-header-break-point .main-navigation .menu-item-has-children.ast-submenu-expanded > .sub-menu {
        display: block !important;
    }
}


/* --- THE FLOATING EFFECT --- */

.hero-side-feature {
    background: #ffffff !important;
    padding: 15px !important;
    margin-bottom: 30px !important;
    /* This creates the 'floating' depth */
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important; 
    border: 1px solid #eee !important;
    border-bottom: 4px solid var(--wired-black) !important;
    position: relative !important;
    z-index: 10 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.hero-side-feature:hover {
    transform: translateY(-8px) !important; /* Lifts higher on hover */
    box-shadow: 0 30px 60px rgba(0,0,0,0.12) !important;
}

/* Ensure the image inside stays crisp */
.hero-side-feature img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    margin-bottom: 12px !important;
}

/* FIX: Prevents the floating box from messing up the list below it */
.hero-side-feature {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Adds a gap so the 'Latest News' title isn't touching the box */
.hero-side-feature + .kicker, 
.hero-side-feature + .wired-header-flex {
    margin-top: 30px !important;
    clear: both !important;
    display: block !important;
}

.hero-side-feature {
    margin-top: -60px;
}

@media (max-width: 768px) {
    .hero-side-feature {
        margin-top: 0;
    }
}

/* --- SPECIAL EDITION --- */

.special-edition-container {
    max-width: 1400px;
    margin: 60px auto 100px;
    padding: 0 20px;
}

.special-main-grid {
    display: grid !important;
    grid-template-columns: 1.6fr 1.1fr !important;
    gap: 40px;
    align-items: center;
}

.video-row-block {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px;
}

.v-box {
    position: relative;
    padding-bottom: 140%;
    height: 0;
    background: #000;
    overflow: hidden;
}

.v-box iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    transform: scale(1.6);
}

.special-text-block {
    border-left: 6px solid #000;
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 350px;
}

.special-main-title {
    font-family: inherit;   /* matches the site's heading font */
    font-size: 2.6rem;      /* keeps the size */
    font-weight: 900;       /* keeps boldness */
    line-height: 1.05;
    color: #000;
    margin: 15px 0;
    text-transform: none;   /* ensures letters are displayed normally */
}

.special-btn {
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    color: #000;
    border-bottom: 3px solid #000;
    padding-bottom: 3px;
    display: inline-block;
}

.special-eyebrow {
    font-weight: 900;   /* bold */
    color: #000;        /* black */
    font-size: 1rem;    /* adjust size if needed */
    text-transform: none; /* keep original capitalization */
}



.lifestyle-offset-container {
    max-width: 1400px;
    margin: 80px auto 120px;
    padding: 0 20px;
}

.lifestyle-main-grid {
    display: grid !important;
    grid-template-columns: 0.8fr 2.2fr !important; /* Pushes weight to the right */
    gap: 50px;
    align-items: start;
}

/* 4 VIDEOS TIGHTLY PACKED ON RIGHT */
.reels-right-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px;
}

.reel-box {
    position: relative;
    padding-bottom: 177%; /* 9:16 Vertical Ratio */
    height: 0;
    background: #000;
    overflow: hidden;
}

.reel-box iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    transform: scale(1.8); /* Center-crop for vertical */
}

/* TYPOGRAPHY SYNC */
.lifestyle-subheadline {
    font-family: 'Lato', sans-serif !important;
    font-weight: 900;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.lifestyle-description {
    font-family: 'Georgia', serif !important;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #555;
    max-width: 240px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .lifestyle-main-grid { grid-template-columns: 1fr !important; }
    .reels-right-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/*LIFESTYLE REELS */

/* THE LAYOUT WRAPPER */
.lifestyle-offset-container {
    max-width: 1400px;
    margin: 60px auto;
    padding: 0 20px;
}

/* THE 0.8fr / 2.2fr SPLIT (TEXT LEFT / VIDEOS RIGHT) */
.lifestyle-main-grid {
    display: grid !important;
    grid-template-columns: 0.8fr 2.2fr !important;
    gap: 40px;
    align-items: start;
}

/* THE 4-COLUMN VIDEO ROW */
.reels-right-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px;
}

/* THE MAGIC: PADDING-BOTTOM CREATES THE HEIGHT */
.reel-box {
    position: relative;
    padding-bottom: 177%; /* This forces the box into a 9:16 vertical ratio */
    height: 0;
    background: #000;
    overflow: hidden;
}

.reel-box iframe {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    transform: scale(1.8); /* Crops horizontal video to vertical */
}

/* FONT SYNC */
.lifestyle-subheadline {
    font-family: 'Lato', sans-serif !important;
    font-weight: 900;
    font-size: 1.4rem;
}


/* FORCE MOBILE NAVIGATION TO THE ABSOLUTE FRONT */
header, 
.site-header, 
.nav-container, 
.mobile-menu-wrapper {
    position: relative;
    z-index: 999999 !important; /* Forces menu to the top layer */
}

/* ENSURE ARTICLE TITLES STAY BEHIND THE MENU LAYER */
.single-post .entry-header, 
.single-post .post-title, 
.single-post h1 {
    position: relative;
    z-index: 1 !important; /* Keeps titles on a lower layer */
}

/* FIX FOR ANY OVERLAPPING FEATURED IMAGES */
.single-post .featured-image, 
.single-post .post-thumbnail {
    z-index: 1 !important;
}

/* 1. FOUNDATION STABILIZATION (PREVENTS JUMPING) */
:root {
    --nav-height: 120px;
    --mobile-nav-height: 80px;
}

html, body {
    overflow-x: hidden !important;
    position: relative;
    margin: 0;
    padding: 0;
}

/* 2. PRE-RESERVE HEADER SPACE */
/* This stops the page from "snapping" down once the sticky nav loads */
body {
    padding-top: var(--nav-height) !important;
}

@media (max-width: 1024px) {
    body {
        padding-top: var(--mobile-nav-height) !important;
    }
}

/* 3. LOCK CONTAINER DIMENSIONS */
/* Prevents the 'syvix-wired-container' from shifting left/right during load */
.syvix-wired-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}

/* 4. PRE-SET VIDEO SLIDER VOLUME */
/* This tells the browser to keep a 250px tall gap open for the videos */
/* so the footer doesn't jump when the videos appear */
.videos-wrapper {
    min-height: 250px;
    background: transparent;
}


/* ============================================================
   SEARCH BAR VISIBILITY & DEPTH LOCK
   ============================================================ */

/* 1. RESTORE MOBILE MENU INTERACTION */
.menu-toggle, 
.ast-mobile-menu-trigger,
#ast-mobile-header {
    z-index: 1000002 !important; 
    position: relative !important;
    pointer-events: auto !important; /* Forces the button to be clickable */
}

/* 2. FORCE SOLID SEARCH BOX - NO TRANSPARENCY */
/* We target the exact Astra search IDs to override the Global Wired Transparency */
#ast-search-form,
.ast-search-menu-icon .search-form,
.ast-search-menu-icon .search-field,
input[type="search"].search-field {
    background-color: #ffffff !important;
    background: #ffffff !important;
    opacity: 1 !important;
    color: #000000 !important; /* Solid black text for typing */
    
    /* Layer it above the page content but below the mobile menu toggle */
    z-index: 1000001 !important;
    position: relative !important;
    
    /* This stops the 'ghost' effect from your ad-layer transparency */
    isolation: isolate !important;
}

/* 3. ENSURE SEARCH ICON IS CLICKABLE */
.ast-search-menu-icon {
    pointer-events: auto !important;
    display: inline-block !important;
}