/*
Theme Name: SoniaTheme
Author: Antigravity
Description: Tema E-commerce liviano y minimalista para Sonia Busquets.
Version: 1.0.0
*/

:root {
    /* Colors */
    --color-primary: #DBBA76;
    --color-secondary: #B2C3B3;
    --color-accent: #FFCD62;
    --color-text-title: #000000;
    --color-text-body: #414141;
    --color-bg-base: #F5F5F1;
    --color-white: #ffffff;
    --color-black: #000000;

    /* Fonts */
    --font-title: 'Barlow Condensed', sans-serif;
    --font-body: 'Onest', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Layout */
    --container-width: 1200px;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
    color: var(--color-text-title);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
    width: 100%;
}

.btn,
.btn-gold-pill,
.btn-white-pill,
.btn-black {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn:hover,
.btn-gold-pill:hover,
.btn-white-pill:hover {
    transform: translateY(-3px);
    filter: brightness(0.95);
}

.btn-gold-pill {
    background-color: #DBBA76;
    color: #000000;
    border-color: #000000;
}

.btn-gold-pill:hover {
    background-color: #000000;
    color: #DBBA76;
    border-color: #000000;
    filter: none;
}

.btn-white-pill {
    background-color: #FFFFFF;
    color: #000000;
}

.btn-white-pill:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    filter: none;
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--color-text-title);
}

/* Standardize Typography for Home Sections */
.home section h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 53px;
    line-height: 50px;
    letter-spacing: 2.12px;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.home section p {
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 35px;
    letter-spacing: 0px;
    color: #000000;
    margin-bottom: var(--spacing-md);
}

/* Sections General */
section {
    padding: var(--spacing-xl) 0;
}

/* Hero Section */
.hero-section {
    position: relative;
    display: flex;
    /* Centering content vertically if needed */
    align-items: center;
    min-height: 60vh;
    /* Full viewport height */
    padding-top: 138px;
    /* 78px Topbar + 60px Header Spacing approximate or just enough to clear */
    overflow: hidden;
    color: var(--color-white);
    /* Assuming text needs to be light on overlay, but user screenshot shows white text? */
}

/* Ensure container allows text over image */
/* Ensure container allows text over image */
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Keep .container max-width (1200px) from the HTML class, 
       but override any specific hero-content max-width preventing full usage */
    max-width: var(--container-width);
    padding: var(--spacing-lg) var(--spacing-sm);
    /* Maintain horizontal padding from container (spacing-sm) */
    color: #ffffff;
}

.hero-content>* {
    max-width: 550px;
    /* Limit text width inside the container, adjusted for design */
}

.hero-content h1 {
    text-align: left;
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 42px;
    line-height: 47px;
    letter-spacing: -0.42px;
    margin-bottom: var(--spacing-sm);
    color: #ffffff;
}

.hero-content h1 strong {
    font-weight: 700;
}

.hero-content p {
    text-align: left;
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 35px;
    letter-spacing: -0.24px;
    color: #FFFFFF;
    margin-bottom: var(--spacing-md);
}

.hero-signature {
    text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 23px;
    line-height: 31px;
    letter-spacing: 3.82px;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

/* Full Width Image */
.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Adjust as needed, maybe top center */
}

/* Header Spacing Fix */
.site-header {
    /* Existing: top: 78px (desktop) */
    padding-top: 60px;
    /* Requested spacing */
}

/* Video Section */
.video-section {
    background-color: var(--color-secondary);
    /* #B2C3B3 */
    padding: var(--spacing-xl) 0;
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

/* Desktop: 2 Columns */
@media (min-width: 992px) {
    .video-grid {
        grid-template-columns: 1.2fr 0.8fr;
        /* Adjust ratio as per visual weight, video looks wider */
        gap: 80px;
        /* Increased gap */
    }
}

.video-wrapper {
    position: relative;
    width: 100%;
}

.video-facade {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #000;
    cursor: pointer;
    overflow: hidden;
    border-radius: 0;
    /* Design looks sharp or minimal radius */
}

.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.video-facade:hover img {
    opacity: 0.7;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: #FDFEF5;
    /* Light creamy white */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.video-facade:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Video Content Typography */
.video-content {
    text-align: left;
}

.video-content h2 {
    text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 53px;
    line-height: 50px;
    letter-spacing: 2.12px;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.video-content p {
    text-align: left;
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 35px;
    letter-spacing: 0px;
    color: #000000;
    margin-bottom: var(--spacing-sm);
}

/* Mobile Responsiveness for Video Typography */
@media (max-width: 768px) {
    .video-content h2 {
        font-size: 36px;
        line-height: 40px;
    }

    .video-content p {
        font-size: 18px;
        line-height: 28px;
    }
}

/* Philosophy Section */
.philosophy-section {
    background-color: #FFFFFF;
    position: relative;
    /* For transition text positioning */
    padding-bottom: 0;
    padding-top: 0;
    /* Let image hit bottom or overlap */
    overflow: hidden;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
}

@media (min-width: 992px) {
    .philosophy-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.philosophy-content {
    padding: var(--spacing-lg) 0;
    max-width: 500px;
    /* Limit text width */
}

.philosophy-content h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 50px;
    /* Adjusted based on design */
    line-height: 1.1;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.philosophy-content p {
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.6;
    color: #414141;
    margin-bottom: var(--spacing-md);
}

.philosophy-image img {
    width: 100%;
    height: auto;
    border-radius: 0;
    max-width: 150%;
    width: 150%;
}

.btn-gold-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #DBBA76;
    color: #000000;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 12px 30px;
    border-radius: 50px;
    border: 1px solid #000000;
    /* Subtle border depicted? Or maybe none. Let's assume solid. */
    transition: all 0.3s ease;
}

.btn-gold-pill:hover {
    background-color: #000000;
    color: #DBBA76;
    border-color: #000000;
}

/* Transition Text "SONIA BUSQUETS" */
.transition-text-container {
    position: absolute;
    bottom: -40px;
    /* Adjust relative to overlapping sections */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    /* Above both sections ideally, or sandwiched */
    pointer-events: none;
    overflow: hidden;
}

.transition-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 140px;
    /* Massive text */
    line-height: 1;
    color: #DBBA76;
    /* Gold color */
    text-transform: uppercase;
    letter-spacing: 10px;
    white-space: nowrap;
    opacity: 1;
    /* In design it bridges white and gold sections. 
       If it is in Philosophy (white) section, bottom part needs to overlap Program (gold) 
       or Program needs to be negative margin top? 
       Or text has mix-blend-mode?
       Let's try absolute positioning bridging the gap.
    */
}

@media (max-width: 991px) {
    .transition-text {
        font-size: 60px;
        /* Responsive size */
        bottom: -20px;
    }
}

/* Program Section */
.program-section {
    background-color: #DBBA76;
    /* Gold background */
    color: #000000;
    position: relative;
    padding: var(--spacing-xl) 0;
    text-align: center;
    overflow: hidden;
    margin-top: 0;
    /* Ensure no gap */
}

.program-watermark-cero {
    position: absolute;
    right: -5%;
    bottom: -10%;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 600px;
    /* Huge decorative O */
    line-height: 1;
    color: rgba(255, 255, 255, 0.15);
    /* Faint white */
    pointer-events: none;
    z-index: 0;
}

.program-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.program-label {
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 5px;
    display: block;
}

.program-section h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    /* Bold */
    font-size: 60px;
    line-height: 1;
    color: #000000;
    margin-bottom: var(--spacing-sm);
    letter-spacing: 2px;
}

.program-section p {
    font-family: 'Onest', sans-serif;
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto var(--spacing-md) auto;
}

.btn-white-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #FFFFFF;
    color: #000000;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 12px 40px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-white-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.arrow-icon {
    transition: transform 0.3s ease;
}

.btn-gold-pill:hover .arrow-icon,
.btn-white-pill:hover .arrow-icon {
    transform: translateX(3px);
}

/* Sessions Section */
.sessions-section {
    background-color: var(--color-white);
}

.sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    align-items: center;
}

/* Reverse Grid for Desktop */
@media (min-width: 768px) {
    .sessions-grid {
        direction: rtl;
        /* Image Left, Text Right visually if Image is 2nd in DOM */
    }

    .sessions-text {
        direction: ltr;
        /* Reset text direction */
    }
}

/* Testimonials Section */
.testimonials-section {
    background-color: var(--color-secondary);
}

.testimonials-slider {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.testimonials-slider::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

.testimonial-card {
    flex: 0 0 300px;
    scroll-snap-align: center;
    background: var(--color-white);
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Animations (.reveal-up) */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Header & Navigation */
.site-header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    /* User requested 60px air above menu. 
       If Topbar is 78px, and site-header top is adjusted in media query.
       So we add padding here.
    */
    padding: 60px 0 20px 0;
    background-color: transparent;
    /* Overlay style per screenshot */
}

/* Ensure header content is legible on light backgrounds if needed, 
   but user requested WHITE text, so assuming dark background behind header. 
   If Hero is 50/50, we might need a workaround, but strictly following font specs for now. */

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding a {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF;
    /* Assuming brand should also be white to match menu? Override if needed. */
}

/* Menu Principal */
.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 40px;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    font-family: 'Onest', sans-serif;
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    /* Medium */
    letter-spacing: 0.65px;
    color: #FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}

/* Menu Hover/Active */
.main-navigation a:hover,
.main-navigation .current-menu-item>a {
    font-weight: 700;
    /* Bold */
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Submenu Dropdown */
.main-navigation li {
    position: relative;
}

.main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: -10px;
    background: #FFFFFF;
    padding: 15px;
    display: none;
    flex-direction: column;
    gap: 12px;
    min-width: 180px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1100;
    margin-top: 0px;
}

.main-navigation li:hover .sub-menu {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.main-navigation .sub-menu a {
    font-size: 9px;
    line-height: 12px;
    font-weight: 600;
    letter-spacing: 0px;
    color: #000000;
    text-decoration: none;
}

.main-navigation .sub-menu a:hover {
    text-decoration: underline;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* WooCommerce Overrides (Minimal) */
.woocommerce button.button.alt {
    background-color: var(--color-primary);
    color: var(--color-black);
}

.woocommerce button.button.alt:hover {
    background-color: var(--color-primary);
    filter: brightness(0.9);
    transform: translateY(-3px);
}


/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #000000;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

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

.btn-whatsapp svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
}

.btn-hablemos {
    background-color: #DBBB76;
    /* User requested specific color */
    color: #ffffff;
    border-radius: 50px;
    /* Pill shape */
    padding: 10px 30px;
    font-family: var(--font-title);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
    border: 2px solid #ffffff;
    /* White border per screenshot look? Or maybe transparent border */
    /* Screenshot shows a white ring OUTSIDE or INSIDE? Looks like a pill with white text. 
       Let's stick to the color requested. If bordered, we can add it. 
       Actually, screenshot 2 shows a white border around the pill?
       "bg del hablemos #DBBB76" -> The user mentioned BG. 
       Let's add a white border just in case to match the "pill" look if it's an outline button filled.
    */
    border: 2px solid #ffffff;
}


/* Top Bar */
.top-bar {
    background-color: #CAC4B0;
    height: 78px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1001;
    /* Above header if needed, but header is overlaying */
}

.top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.top-bar-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-bar-text {
    text-align: left;
    font-family: 'Onest', sans-serif;
    font-weight: 500;
    /* Medium */
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0px;
    color: #414141;
    text-transform: uppercase;
}

.btn-topbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Onest', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 17px;
    letter-spacing: 1.3px;
    color: #414141;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 20px;
    border: 1px solid #414141;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-topbar:hover {
    background-color: #414141;
    color: #CAC4B0;
}

.btn-topbar svg {
    margin-bottom: 2px;
}

/* Default Menu Toggle (Hidden on Desktop) */
.menu-toggle {
    display: none;
}

/* Header Position Adjustment for Topbar */
@media (min-width: 992px) {
    .site-header {
        top: 78px;
        /* Push header down by topbar height on desktop */
    }
}

@media (max-width: 991px) {
    .top-bar {
        height: auto;
        padding: 15px 0;
    }

    .top-bar-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .top-bar-content {
        flex-direction: column;
        gap: 10px;
    }

    .top-bar-text {
        text-align: center;
        font-size: 13px;
    }

    /* Mobile Header Position - Assuming sticky or relative behavior changes */
    .site-header {
        position: relative;
        /* Or keep absolute if overlay wanted on mobile too */
        /* If absolute, we might need top: auto or calculation. 
           For now, let's keep it absolute but push it down if it's overlaying. 
           Actually, on mobile, often the topbar scrolls away. 
           Let's leave site-header absolute top: 0 relative to logical start?
           No, if Topbar is in flow, and Header is absolute to body, Header is at 0.
           We need Header to be below Topbar on mobile too if it's overlaying content.
           Let's use JS or just position relative for header on mobile? 
           If designs usually have transparent header on mobile hero too.
        */
        top: 0;
        position: relative;
        /* Change to relative on mobile to avoid overlap issues with topbar height variance */
        background-color: var(--color-black);
        /* Mobile header usually needs background if relative */
    }

    /* If we want transparent overlay on mobile too, we need JS to calculate topbar height.
       For simplicity and robustness, making it relative on mobile is safer unless requested otherwise.
       However, user said "Minimalist light weight".
       Let's try to keep it overlay if possible. 
       If Topbar is static, Header absolute. Header covers Topbar? No, Topbar pushes 'body' content? 
       Actually no, absolute elements are removed from flow.
       So Topbar is at top (block). Next element is Hero. Hero starts at Topbar bottom.
       Header (absolute) starts at TOP:0 of Body (so 0). 
       So Header overlaps Topbar.
       We need Header Top = Topbar Height.
       On mobile, Topbar Height varies.
       Let's stick to `position: relative` for Header on Mobile, giving it a background color or transparent provided Hero is below.
       If Hero is below Header (in valid HTML structure), then `position: relative` works fine.
       But original design was overlay. Hero is -header-height margin?
       Let's assume the previous code `hero-section { padding-top: 0; }` meant overlay.
       I'll use `position: relative` for mobile header for now to ensure usability.
    */
    .site-header {
        position: relative;
        background-color: #1a1a1a;
        /* Dark background for mobile header */
        padding: 10px 0;
    }

    .header-container {
        padding: 0 var(--spacing-sm);
    }

    /* Mobile Branding */
    .site-branding a {
        font-size: 1.2rem;
        /* Reduce size */
        white-space: nowrap;
    }

    /* Hamburger Toggle */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1100;
        padding: 0;
    }

    .menu-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: #FFFFFF;
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    /* Mobile Navigation */
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #1a1a1a;
        padding: 20px;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        /* Increased z-index */
        text-align: center;
    }

    .main-navigation.toggled {
        display: block;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0;
        /* Removing gap to control with padding */
    }

    .main-navigation li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-navigation li:last-child {
        border-bottom: none;
    }

    .main-navigation a {
        font-size: 16px;
        display: block;
        padding: 15px;
        color: #ffffff;
    }

    /* Mobile Submenu */
    .main-navigation .sub-menu {
        position: static;
        /* Stack naturally on mobile */
        display: none;
        /* Hidden strictly by default */
        background-color: #2a2a2a;
        /* Slightly lighter bg */
        box-shadow: none;
        width: 100%;
        padding: 0;
        min-width: unset;
        animation: none;
        /* Remove desktop animation */
    }

    /* Submenu Toggle Logic usually needs JS or :focus-within. 
       For simplicity without extra JS, let's allow it to be visible if parent active or hover? 
       Hover doesn't work well on touch. 
       Let's make them always visible for now on mobile or indent them?
       Better: just show them indented.
    */
    .main-navigation li:hover .sub-menu,
    .main-navigation li.focus>.sub-menu,
    .main-navigation li.menu-item-has-children:hover>.sub-menu {
        display: block;
        /* Fallback interaction */
    }

    /* Better approach for simple mobile menu: Show submenus indented always or on interaction */
    .main-navigation .sub-menu a {
        font-size: 14px;
        padding: 12px 15px 12px 30px;
        /* Indent */
        color: #cccccc;
    }

    /* Header Actions Mobile */
    .header-actions {
        display: none;
        /* Hide desktop actions on mobile if needed, or adjust */
    }

    /* Hero Typography Mobile Adjustments */
    .hero-content h1 {
        font-size: 32px !important;
        /* Force override */
        line-height: 38px !important;
    }

    .hero-content p {
        font-size: 18px !important;
        line-height: 26px !important;
    }

    .hero-signature {
        font-size: 18px !important;
        letter-spacing: 2px !important;
    }

    .btn-hero {
        width: 100% !important;
        /* Full width btn on mobile */
        max-width: 300px;
        /* But keep max */
    }
}

/* End Mobile Styles */

/* Hero Button Custom Style (Global previously added, ensure it stays) */
.btn-hero {
    background-color: #FFFFFF;
    color: #000000;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
    margin-top: var(--spacing-sm);
}

.btn-hero:hover {
    transform: translateY(-3px);
    background-color: #f0f0f0;
}

/* Hide toggle on desktop */
.menu-toggle {
    display: none;
}

@media (max-width: 991px) {

    /* Ensure toggle is visible on mobile/tablet */
    .menu-toggle {
        display: flex;
        /* Flex set in the rule above within media query block */
    }
}