/* style.css */
:root {
    --bg-primary: #fcfcfc;
    --bg-secondary: #f3f4f6;
    --text-main: #1a1a1a;
    --text-muted: #666666;
    --accent: #92400e; 
}

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

/* ... Paste the rest of your CSS classes here (serif, mono, hero-img, etc.) ... */


        .serif { font-family: 'Playfair Display', serif; }
        .mono { font-family: 'JetBrains Mono', monospace; }

        /* Noise Texture Overlay for Premium Feel */
        body::before {
            content: "";
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: url('https://grainy-gradients.vercel.app/noise.svg');
            opacity: 0.03;
            pointer-events: none;
            z-index: 9999;
        }

        /* Progress Bar */
        #progress-bar {
            position: fixed;
            top: 0; left: 0; height: 3px;
            background: var(--accent);
            width: 0%;
            z-index: 100;
            transition: width 0.1s ease-out;
        }

        /* Hero Image Layout */
        .hero-img {
            background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            height: 80vh;
            clip-path: polygon(10% 0, 100% 0, 100% 85%, 0% 100%);
            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
            background-color: #eee;
        }

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

        /* Improved Card UI */
        .service-card {
            background: white;
            border: 1px solid #eeeeee;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .service-card:hover {
            border-color: var(--accent);
            transform: translateY(-8px);
            box-shadow: 0 40px 80px -20px rgba(0,0,0,0.06);
        }

        /* Fixed Section Backgrounds */
        .bridge-section {
            background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), 
                              url('https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?q=80&w=2070&auto=format&fit=crop');
            background-size: cover;
            background-attachment: fixed;
            background-position: center;
            background-color: #f0f0f0;
        }

        /* Mobile Menu */
        #mobileOverlay {
            clip-path: circle(0% at 100% 0%);
            transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        }
        #mobileOverlay.active {
            clip-path: circle(150% at 100% 0%);
        }

        .nav-blur {
            background: rgba(252, 252, 252, 0.85);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(0,0,0,0.04);
        }

        /* Scroll Mouse Animation */
        .mouse {
            width: 22px; height: 38px;
            border: 2px solid var(--text-main);
            border-radius: 12px;
            position: relative;
        }
        .mouse::after {
            content: "";
            width: 2px; height: 6px;
            background: var(--text-main);
            position: absolute;
            left: 50%; transform: translateX(-50%);
            top: 6px;
            animation: mouseScroll 1.5s infinite;
        }
        @keyframes mouseScroll {
            0% { opacity: 0; top: 6px; }
            50% { opacity: 1; }
            100% { opacity: 0; top: 20px; }
        }

        /* Blueprint grid pattern for hero */
        .blueprint-pattern {
            background-image: radial-gradient(circle, #000 0.5px, transparent 0.5px);
            background-size: 30px 30px;
            opacity: 0.05;
        }