/* =========================================================
   SPOT REACTION — RESPONSIVE STYLES
   ========================================================= */

/* =========================================================
   STRICT DESKTOP KILL-SWITCH 
   ========================================================= */
   .mobile-menu {
    display: none !important; /* Completely hides mobile menu on desktop */
}

/* =========================================================
   TABLET & MOBILE NAVIGATION (Max-width: 850px)
   ========================================================= */
@media (max-width: 850px) {
    :root {
        --space-xl: 5rem;
        --space-xxl: 6rem;
        --container-padding: 1.5rem;
    }

    /* Prevent horizontal scroll on mobile */
    html, body { overflow-x: hidden; }

    /* Header */
    .site-header { background: var(--color-black); } /* Solid dark header for mobile */
    .nav-menu { display: none; }
    
    /* SHOW THE HAMBURGER MENU */
    .menu-toggle { 
        display: flex !important; 
        align-items: center;
        justify-content: center;
    }

    /* Mobile Menu Dropdown */
    .mobile-menu {
        display: flex !important; /* Only active inside this media query */
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100svh;
        flex-direction: column; align-items: flex-start; justify-content: center;
        padding: 6rem var(--container-padding) 3rem;
        background: var(--color-black);
        opacity: 0; visibility: hidden;
        transform: translateY(-15px);
        transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1), visibility 400ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 1000; overflow-y: auto;
        pointer-events: none;
    }
    
    .mobile-menu.is-open { 
        opacity: 1; 
        visibility: visible; 
        transform: translateY(0); 
        pointer-events: auto;
    }
    
    .mobile-menu a {
        display: block; width: 100%; padding: 1rem 0;
        color: var(--color-white); font-size: clamp(1.5rem, 6vw, 2.25rem);
        font-weight: 500; line-height: 1.1; text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        transition: color 250ms ease, padding-left 300ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .mobile-menu a:first-child { border-top: 1px solid rgba(255, 255, 255, 0.12); }
    .mobile-menu a:hover { color: var(--color-red); padding-left: 0.5rem; }
    body.menu-open { overflow: hidden; }

    /* Hero */
    .hero-content { padding-bottom: 4rem; }
    .hero-description { font-size: 1rem; max-width: 100%; }

    /* Intro */
    .intro-grid { grid-template-columns: 1fr; gap: var(--space-lg); }

    /* Services (2 Columns on Tablets, 1 on mobile via next breakpoint) */
    .services-grid {
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
        background: transparent;
    }
    .service-card {
        display: block; background: var(--color-white);
        border-radius: var(--radius-md); overflow: hidden;
        border: 1px solid var(--border-light);
    }
    .service-image { aspect-ratio: 16 / 9; height: auto; }
    .service-content { padding: 1.5rem; }

    /* Training */
    .training-grid { grid-template-columns: 1fr; gap: var(--space-xl); }

    /* Values */
    .values-grid {
        display: grid; grid-template-columns: repeat(2, 1fr);
        border-top: 1px solid var(--border-light);
    }
    .value-item {
        padding: var(--space-lg);
        border-right: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
    }
    .value-item:nth-child(2n) { border-right: none; }
    .value-item:nth-last-child(-n+2) { border-bottom: none; }

    /* Footer */
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .footer-brand { grid-column: 1 / -1; }
}

/* =========================================================
   MOBILE (Max-width: 600px)
   ========================================================= */
@media (max-width: 600px) {
    :root {
        --container-padding: 1.25rem;
        --space-md: 1.5rem;
        --space-lg: 3rem;
        --space-xl: 4.5rem;
        --space-xxl: 5rem;
    }

    body { font-size: 0.95rem; }
    .section { padding-block: var(--space-xxl); }

    /* Typography */
    h1 { font-size: clamp(2.75rem, 12vw, 4.25rem); line-height: 0.98; }
    h2 { font-size: clamp(2.15rem, 9vw, 3.25rem); line-height: 1; }
    h3 { font-size: 1.35rem; }

    /* Header - SLIMMER FOR MOBILE */
    .navbar { 
        min-height: 56px; 
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .brand img { width: 110px; max-width: 40vw; }

    /* Hero */
    .hero-overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.9) 100%); }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .hero-actions .btn { width: 100%; justify-content: center; }

    /* Services (1 Column on Mobile) */
    .services-grid { grid-template-columns: 1fr; gap: 1rem; }
    .service-image { aspect-ratio: 4 / 3; }

    /* Values (1 Column on Mobile) */
    .values-grid { grid-template-columns: 1fr; }
    .value-item { border-right: none; border-bottom: 1px solid var(--border-light); padding: 1.5rem 0; }
    .value-item:last-child { border-bottom: none; }

    /* Training items */
    .training-item { grid-template-columns: 32px 1fr auto; gap: 0.75rem; padding-block: 1.15rem; }
    .training-item strong { font-size: 0.95rem; }
    .training-item-featured { padding-inline: 0.75rem; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .footer-brand { grid-column: auto; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; display: flex; }
}