:root {

    --color-primary: #fdd303;
    --color-secondary: #1c1c1c;
    --color-white: #ffffff;
    --color-light-grey: #f4f5f7;
    --color-muted-specs-text: #595f6a;

    /* ----------------------------------------------------------------------
       Fluid Typography Scale (Calculated base viewports: 360px to 1280px)
       ---------------------------------------------------------------------- */
    
    --font-size-display: clamp(2.6rem, 1.857rem + 3.304vw, 4.5rem);
    --font-size-h1: clamp(2.2rem, 1.652rem + 2.435vw, 3.6rem);
    --font-size-h2: clamp(1.8rem, 1.487rem + 1.391vw, 2.6rem);
    --font-size-h3: clamp(1.5rem, 1.304rem + 0.87vw, 2.0rem);
    --font-size-h4: clamp(1.3rem, 1.183rem + 0.522vw, 1.6rem);
    --font-size-h5: clamp(1.15rem, 1.091rem + 0.261vw, 1.3rem);
    --font-size-h6: clamp(1.0rem, 0.961rem + 0.174vw, 1.1rem);
    --font-size-p: clamp(0.938rem, 0.914rem + 0.109vw, 1.0rem);
}

/* ==========================================================================
   1. Mobile & Tablet Base Styles (Default Layout)
   ========================================================================== */
.main-hero-section {
    position: relative;
    display: flex;
    flex-direction: column; 
    
    background: 
        radial-gradient(
            circle, 
            rgba(0, 0, 0, 0.1) 0%,      
            rgba(0, 0, 0, 0.4) 60%,     
            rgba(15, 23, 42, 0.85) 100% 
        ),
        url('/wp-content/uploads/2026/06/Main-Hero-Mobile-BG.jpg');
    background-size: cover;
    background-position: center center;
    
    aspect-ratio: 3 / 4; 
    max-height: 80vh; 
}

/* Aligns WPBakery's inner row container to the bottom */
.main-hero-section .l-section-h {
    width: 100%;
    margin-top: auto; 
    padding-bottom: 4rem; 
}

/* 
   Your inner content wrapper:
   Stretches to full width on mobile and tablet views by default.
*/
.main-hero-inner-wrapper {
    width: 100%;
    box-sizing: border-box; /* Ensures padding stays within the 100% boundary */
}


/* ==========================================================================
   2. Desktop & Laptop Screens (1025px and up)
   ========================================================================== */
@media (min-width: 1025px) {
    .main-hero-section {
        display: flex;
        flex-direction: row; 
        align-items: center; /* True vertical middle alignment on desktop */
        
        background: 
            radial-gradient(
                circle, 
                rgba(0, 0, 0, 0.05) 0%,   
                rgba(0, 0, 0, 0.45) 55%, 
                rgba(15, 23, 42, 0.85) 100% 
            ),
            url('/wp-content/uploads/2026/06/Main-Hero-BG.jpg');
        background-size: cover;
        background-position: center center;
        
        aspect-ratio: 2560 / 1440; 
        max-height: none; 
    }
    
    /* Resets the inner container back to true vertical center for desktop */
    .main-hero-section .l-section-h {
        margin-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center; 
    }

    /* 
       Your inner content wrapper on Desktop:
       Locks to exactly 60% wide to prevent text line lengths from breaking 
       the right-side scene layout.
    */
    .main-hero-inner-wrapper {
        width: 60%;
    }
}

.eyebrow-headline {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-size-h4);
    line-height: 1.1;
}

.main-headline {
    color: var(--color-white);
    font-weight: 800;
    line-height: 1.2;
    font-size: var(--font-size-display);
}

.sub-headline {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-size-h3);
    line-height: 1.1;
}

.inner-btn-wrapper {
    margin-top: 2.6rem;
}