:root {
            --olive: #3B3B1A;
            --off-white: #F5F5F0;
            --teal: #009990;
            --dark-accent: #2A2A12;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }

        body {
            font-family: 'Roboto Flex', sans-serif;
            background-color: #c1fffb;
            color: var(--olive);
            overflow-x: hidden;
            font-weight: 200;
            line-height: 1.4;
            -webkit-font-smoothing: antialiased;
        }

        /* --- Noise Grain Overlay --- */
        body::after {
            content: "";
            position: fixed;
            top: -100%; left: -100%;
            width: 300%; height: 300%;
            background: url('https://grainy-gradients.vercel.app/noise.svg');
            opacity: 0.04;
            pointer-events: none;
            z-index: 10000;
            animation: noise 2s steps(10) infinite;
        }

        @keyframes noise {
            0% { transform: translate(0,0); }
            10% { transform: translate(-5%,-5%); }
            20% { transform: translate(-10%,5%); }
            30% { transform: translate(5%,-10%); }
            40% { transform: translate(-5%,15%); }
            50% { transform: translate(-10%,5%); }
            60% { transform: translate(15%,0); }
            70% { transform: translate(0,10%); }
            80% { transform: translate(-15%,0); }
            90% { transform: translate(10%,5%); }
            100% { transform: translate(5%,0); }
        }

        /* --- Custom Cursor --- */
        #cursor-glow {
            position: fixed;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(0,153,144,0.08) 0%, rgba(59,59,26,0) 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }

        #cursor-dot {
            position: fixed;
            width: 4px;
            height: 4px;
            background: var(--teal);
            border-radius: 50%;
            pointer-events: none;
            z-index: 10000;
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s;
        }

        /* --- Typography Matrix --- */
        .text-monumental { font-size: clamp(4rem, 15vw, 18rem); font-weight: 900; letter-spacing: -0.06em; line-height: 0.75; }
        .text-thin-title { font-weight: 100; font-size: clamp(2rem, 8vw, 6rem); letter-spacing: -0.02em; }
        .text-caption { font-size: 9px; font-weight: 700; letter-spacing: 0.6em; text-transform: uppercase; opacity: 0.5; }
        .vertical-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 100; letter-spacing: 1em; opacity: 0.3; }

        /* --- Page Routing --- */
        .page-layer { display: none; opacity: 0; transform: translateY(20px); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }
        .page-layer.active { display: block; opacity: 1; transform: translateY(0); }

        /* --- Layout Compositions --- */
        .section-dark { background-color: var(--olive); color: var(--off-white); }
        .section-teal { background-color: var(--teal); color: var(--off-white); }
        .glass-nav { background: rgba(59, 59, 26, 0.02); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(59, 59, 26, 0.05); }
        
        .btn-arch {
            padding: 18px 40px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.5em;
            text-transform: uppercase;
            border: 0.5px solid currentColor;
            position: relative;
            transition: all 0.5s ease;
        }
        .btn-arch:hover { background: var(--teal); border-color: var(--teal); color: white; transform: translateY(-2px); }

        /* --- Animations --- */
        .reveal { opacity: 0; transform: translateY(50px); transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .image-mask { clip-path: inset(100% 0 0 0); transition: clip-path 1.8s cubic-bezier(0.19, 1, 0.22, 1); }
        .image-mask.active { clip-path: inset(0 0 0 0); }

        /* --- Deep View Overlay --- */
        #deep-view {
            position: fixed;
            inset: 0;
            background: var(--dark-accent);
            z-index: 2000;
            display: none;
            color: var(--off-white);
            padding: 5vw;
            overflow-y: auto;
        }

        .line-drawing { width: 0; height: 1px; background: var(--teal); transition: width 2s ease; }
        .active .line-drawing { width: 100%; }

        /* --- Horizontal Scroller --- */
        .h-scroll-wrap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
        .h-scroll-wrap::-webkit-scrollbar { display: none; }
        .h-slide { flex: 0 0 100vw; height: 100vh; scroll-snap-align: start; position: relative; }

        /* --- Mobile Navigation --- */
        #mobile-menu {
            position: fixed;
            inset: 0;
            background: var(--olive);
            z-index: 1500;
            transform: translateX(100%);
            transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            padding: 10vh 10vw;
        }
        #mobile-menu.open { transform: translateX(0); }