body { 
    font-family: 'Work Sans', sans-serif; 
    scroll-behavior: smooth; 
}

.asymmetric-grid { 
    grid-template-columns: 1.2fr 0.8fr; 
}

/* Mobile Menu Transitions */
#mobile-menu {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

#mobile-menu.open {
    max-height: 400px;
    opacity: 1;
    pointer-events: auto;
}

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

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Add slight delay options for cascading animations */
.reveal.delay-100 { transition-delay: 100ms; }
.reveal.delay-200 { transition-delay: 200ms; }
.reveal.delay-300 { transition-delay: 300ms; }