
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');
        
        :root {
            --navy: #1a2b4a;
            --terracotta: #d2691e;
            --cream: #f5f1eb;
            --gold: #daa520;
            --dark-gray: #2d3436;
        }
        
        body {
            font-family: 'Inter', sans-serif;
        }
        
        .playfair {
            font-family: 'Playfair Display', serif;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, var(--navy) 0%, #2c3e50 100%);
        }
        
        .terracotta-gradient {
            background: linear-gradient(135deg, var(--terracotta) 0%, #ff6b35 100%);
        }
        
        .hover-scale {
            transition: transform 0.3s ease;
        }
        
        .hover-scale:hover {
            transform: scale(1.05);
        }
        
        .service-card {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .service-card:hover {
            border-color: var(--terracotta);
            box-shadow: 0 10px 30px rgba(210, 105, 30, 0.2);
        }
        
        .testimonial-card {
            background: linear-gradient(145deg, #ffffff 0%, var(--cream) 100%);
        }
        
        .form-input {
            transition: all 0.3s ease;
        }
        
        .form-input:focus {
            border-color: var(--terracotta);
            box-shadow: 0 0 0 3px rgba(210, 105, 30, 0.1);
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .modal-content {
            animation: slideIn 0.3s ease;
        }
        
        @keyframes slideIn {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1001;
            animation: slideInRight 0.5s ease;
        }
        
        @keyframes slideInRight {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }
    