/* ============================================================
   Interactive Hero Container – replaces .home-hero
   ============================================================ */
.interactive-hero-container {
    position: relative;
    width: 100%;
    min-height: 100vh;          /* Full viewport height */
    overflow: hidden;
    display: flex;              /* Vertically centers the content */
    align-items: center;
}

/* ============================================================
   Layers – absolute, full‑size, stacked behind content
   ============================================================ */
.hero-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Images inside layers – behave exactly like background-size: cover */
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;       /* Prevents interfering with mouse tracking */
}

/* Top layer – carries the circular mask spotlight */
.top-layer {
    /*-webkit-mask-image: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        transparent 150px,
        black 151px
    );
    mask-image: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        transparent 150px,
        black 151px
    );
    transition: -webkit-mask-image 0.1s ease-out,
                mask-image 0.1s ease-out;
    */            
}

/* ============================================================
   Hero Content – remains on the left, above the layers
   ============================================================ */
.hero-content {
    position: relative;
    z-index: 2;                 /* Renders on top of the two layers */
    max-width: 35%;             /* Reduced from 50% to prevent overlap */
    text-align: left;
    margin-left: 5%;            /* Adjust to move closer/farther from left edge */
    margin-right: auto;         /* Prevents centering */
}

/* Kicker (small uppercase label) */
.hero-kicker {
    display: block;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
    margin-bottom: 0.5rem;
}

/* Main heading – solid black, no reflection */
.hero-content h1 {
    font-size: var(--font-h1);
    margin-bottom: 0.5rem;
    color: #000;
}

/* Subtext – smaller, solid black */
.hero-content .hero-subtext {
    font-size: 1rem;
    color: #000;
    margin-bottom: 2rem;
    margin-top: 0;
}

/* ============================================================
   Primary Button – pill shape with outline
   ============================================================ */
.btn-primary {
    display: inline-block;
    background-color: transparent;
    color: #000;
    border: 2px solid #000;
    padding: 0.75rem 2rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: #000;
    color: #fff;
}

/* ============================================================
   Utility – deep red text highlight
   ============================================================ */
.text-deep-red {
    color: #8B0000;
    font-weight: 700;
}

/* Tablet and smaller laptop screens (e.g., 14-inch) */
@media (max-width: 1024px) {
    .hero-content {
        max-width: 55%; 
        
        /* Pushes the text block further right to clear the logo's width */
        margin-left: 12%; 
        
        /* Forces the text block down to prevent the vertical centering from pushing it into the logo */
        margin-top: 240px; 
    }
}

/* ============================================================
   MOBILE RESPONSIVE (Hero Page) - FIXED
   ============================================================ */
@media (max-width: 768px) {
    /* --- 0. Global Mobile Reset (Prevents all bleeding) --- */
    * {
        box-sizing: border-box !important;
    }

    /* --- 1. Mobile Nav Layout --- */
    .main-nav .nav-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
        padding: 1rem 1.5rem !important;
    }

    /* Hide the Logo */
    .main-nav .nav-brand {
        display: none !important;
    }

    /* Burger Menu Left (Stays Dark) */
    .main-nav .mobile-toggle {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        order: 1;
        display: flex !important;
    }

    /* Force Quote Button to Show on Right */
    .main-nav .nav-actions {
        position: relative !important;
        display: block !important;
        order: 2;
    }

    /* Scale the button slightly for small screens */
    .main-nav .nav-quote-pill {
        padding: 0.6rem 1.2rem !important;
        font-size: 0.85rem !important;
    }

    /* --- 2. Hero Text Centering & Container Fix --- */
    .hero-content {
        max-width: 95% !important; /* Keeps it contained */
        margin: 120px auto 0 auto !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Forces the button and text into the absolute center */
    }

    /* Override the desktop/tablet rules that forced these to the left */
    .hero-content .editorial-divider {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Ensure the button doesn't stretch or bleed */
    .hero-content .btn-primary {
        width: auto !important;
        max-width: 100% !important;
        align-self: center !important; 
    }

    .interactive-hero-container .hero-content .editorial-divider {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .interactive-hero-container .hero-content {
        /* Overrides the 120px/340px desktop margins and pulls the block up by 20% of the screen height */
        margin-top: -5vh !important; 
        
        /* Ensures the block stays centered horizontally */
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* --- 3. Fix Expanded Mobile Menu Clipping --- */
    .main-nav .nav-links {
        position: absolute !important; 
        top: 100% !important; 
        left: 0 !important;
        width: 100vw !important; /* Breaks out of the container to span the full screen */
        max-width: 100vw !important;
        background-color: #f8f8f8 !important; /* Solid background to prevent overlapping text */
        padding: 2rem 0 !important;
        margin: 0 !important;
        z-index: 999 !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
    }

    .main-nav .nav-links li {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        margin-bottom: 1.5rem !important; /* Adds breathing room between links */
    }

    .main-nav .nav-links a {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        white-space: nowrap !important; 
    }

    /* --- Bypass JS Fade Out on Mobile --- */
    .hero-content.morph-text-out {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

/* Standard Laptops (13-inch to 15-inch screens) */
@media (max-width: 1440px) and (min-width: 1025px) {
    /* Target the hero content explicitly to override base container margins */
    .interactive-hero-container .hero-content {
        /* Pushes the text block down from its vertically centered position */
        margin-top: 15vh; 
    }

    /* Forces the horizontal lines to align flush left with the text */
    .interactive-hero-container .hero-content .editorial-divider {
        margin-left: 0 !important;
        margin-right: auto;
    }
    
    /* Slightly scale down the main heading to prevent awkward wrapping */
    .interactive-hero-container .hero-content h1 {
        font-size: calc(var(--font-h1) * 0.9);
    }
}

/* Tablet and smaller laptop screens (e.g., 14-inch) */
@media (max-width: 1024px) {
    .hero-content {
        max-width: 55%; 
        /* Pushes the text block further right to clear the logo's width */
        margin-left: 12%; 
        /* Increased from 240px to push the text further down */
        margin-top: 340px; 
    }

    /* Forces the horizontal lines to align flush left with the text */
    .hero-content .editorial-divider {
        margin-left: 0 !important;
        margin-right: auto;
    }

    /* Slightly scale down the text to maintain consistency */
    .hero-content h1 {
        font-size: calc(var(--font-h1) * 0.85); /* Scales down the main heading by 15% */
    }

    .hero-content .hero-subtext {
        font-size: 0.9rem; /* Slightly smaller subtext */
    }
    
    .hero-kicker {
        font-size: 0.75rem; /* Slightly smaller kicker */
    }
}