:root {
            --primary-bg: #FEFFD3;
            --secondary-bg: #F6F09F;
            --footer-bg: #254F22;
            --text-main: #000000;
            --accent-green: #254F22;
        }

        body {
            font-family: 'Noto Sans', sans-serif;
            background-color: var(--primary-bg);
            color: var(--text-main);
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        /* Typography Hierarchy */
        .h-xl { font-weight: 900; letter-spacing: -0.05em; line-height: 0.9; text-transform: uppercase; }
        .h-lg { font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
        .body-editorial { font-weight: 400; line-height: 1.8; font-size: 1.125rem; }

        /* Custom Components */
        .section-separator { border-top: 1px solid rgba(0,0,0,0.15); margin: 4rem 0; }
        .btn-primary { background: #000; color: #FEFFD3; padding: 1rem 2.5rem; font-weight: 700; transition: all 0.3s ease; letter-spacing: 0.1em; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
        
        /* Navigation Stying */
        .nav-item { position: relative; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; transition: opacity 0.3s; }
        .nav-item:hover { opacity: 0.6; }
        .nav-item.active::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 100%; height: 2px; background: #000; }

        /* Animations */
        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .hero-bg-anim {
            background: linear-gradient(-45deg, #FEFFD3, #F6F09F, #fffde6, #FEFFD3);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .card-lift { transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
        .card-lift:hover { transform: translateY(-15px); box-shadow: 0 40px 80px rgba(0,0,0,0.08); }

        /* Page Routing display */
        .page-content { display: none; }
        .page-content.active { display: block; animation: fadeIn 0.5s ease-out forwards; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Modal Overlay */
        .modal-blur { backdrop-filter: blur(20px); background: rgba(0,0,0,0.4); }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--primary-bg); }
        ::-webkit-scrollbar-thumb { background: #000; }
.modal {
    display: none; /* hidden by default */
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.modal[style*="display: flex"] {
    display: flex !important;
}