/* Responsive Design Breakpoints */

@media (max-width: 1024px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.hero-title { font-size: 2.5rem; }
}

@media (max-width: 768px) {
.top-bar { display: none; }
.site-header { top: 0; background: rgba(17,17,17,0.95); padding: 1rem 0; }
.main-nav { display: none; }
.mobile-toggle { display: flex; }

/* Mobile Drawer */
.mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: #111;
    z-index: 2000;
    padding: 2rem;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-menu-drawer.open { right: 0; }
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1999;
    display: none;
}
.mobile-menu-overlay.open { display: block; }

.mobile-nav-list li { margin-bottom: 1.2rem; }
.mobile-nav-list a { font-size: 1.1rem; font-weight: 700; color: #fff; }

.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.hero-title { font-size: 2rem; }
.sub-img { display: none; }
.experience-badge { right: 0; }


}