:root {
            --primary: #a99176;
            --secondary: #2f2f2e;
            --bg: #f6f4f0;
            --white: #ffffff;
            --accent: #dfdacf;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Arial', sans-serif; color: var(--secondary); background: var(--white); line-height: 1.6; }
        
        header { background: var(--bg); padding: 2rem 0; text-align: center; }
        .logo { max-width: 300px; margin: 0 auto; display: block; }
        
        nav { display: flex; justify-content: center; gap: 20px; padding: 1rem; background: var(--bg); flex-wrap: wrap; }
        nav a { color: var(--primary); text-decoration: none; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; }
        
        .hero { position: relative; width: 100%; height: 60vh; background-image: url('/assets/IMG_0469-scaled.jpeg'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
        .hero-overlay { background: rgba(255,255,255,0.7); padding: 2rem; text-align: center; }
        
        .container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        
        .card img { width: 100%; height: 400px; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        .card h2 { margin: 1.5rem 0; color: var(--primary); font-family: serif; }
        
        footer { padding: 4rem 2rem; text-align: center; background: var(--secondary); color: var(--white); }
        
        @media (max-width: 768px) {
            .container { grid-template-columns: 1fr; }
            .hero { height: 40vh; }
        }