/* Base styles and theme variables */
        :root {
            --bg-dark: #121212;      /* Premium Dark Charcoal */
            --bg-light: #FFFFFF;     /* White for Cards */
            --text-on-dark: #FFFFFF;   /* Pure White for text on dark backgrounds */
            --text-on-light: #1E1E1E;  /* Dark Charcoal for text on light backgrounds */
            --text-secondary-on-dark: #A9A9A9;    /* Light Grey for secondary text on dark */
            --text-secondary-on-light: #555555; /* Medium Grey for secondary text on light */
            --accent: #D4AF37;       /* Gold */
            --accent-dark: #B89B31;  /* Darker Gold for Hover */
            --border-on-dark: #333333; /* Subtle border for dark elements */
            --border-on-light: #e0e0e0; /* Light border for white cards */
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-on-dark);
        }

        .bg-pattern {
             /* A subtle geometric pattern for a premium feel */
             background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231E1E1E' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        
        .font-display {
            font-family: 'Playfair Display', serif;
        }

        /* --- LOGO STYLES --- */
        .logo-font {
            font-family: 'Cinzel', serif;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
        }

        .logo-gradient-text {
            /* Fallback for browsers that don't support gradient text */
            color: var(--accent);
            /* Gradient text effect */
            background: linear-gradient(45deg, var(--accent-dark), var(--accent), var(--text-on-dark), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            background-size: 200% auto;
            animation: logo-shine 8s linear infinite;
        }

        @keyframes logo-shine {
            to {
                background-position: 200% center;
            }
        }
        /* --- END LOGO STYLES --- */


        /* Animated Gradient Background for Hero */
        .hero-bg {
            background: linear-gradient(-45deg, var(--bg-dark), #1a1a1a, var(--bg-dark));
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Custom accent colors */
        .accent-text { color: var(--accent); }
        .accent-bg { background-color: var(--accent); }
        .accent-border { border-color: var(--accent); }
        .accent-shadow { box-shadow: 0 0 25px 0 rgba(212, 175, 55, 0.4); }

        /* Button styles */
        .btn-cta {
            transition: all 0.3s ease;
            background-color: var(--accent);
            color: var(--bg-dark);
            font-weight: 700;
        }
        .btn-cta:hover {
            background-color: var(--accent-dark);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        .btn-cta:disabled {
            background-color: #555;
            cursor: not-allowed;
            color: var(--text-secondary-on-dark);
        }


        /* Card styles */
        .service-card, .timeline-card, .testimonial-card, .faq-item {
            background-color: var(--bg-light);
            border: 1px solid var(--border-on-light);
            color: var(--text-on-light);
            transition: all 0.3s ease;
        }
        .service-card:hover {
            border-color: var(--accent);
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(212, 175, 55, 0.1);
        }
        .bg-light{
            background-color: var(--bg-light);
            color: var(--text-on-light);
        }

        /* FAQ Accordion styles */
        .faq-item .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out, padding 0.5s ease-out;
            padding: 0 1.25rem;
            color: var(--text-secondary-on-light);
        }
        .faq-item.open .faq-answer {
            max-height: 200px; /* Adjust as needed */
            padding: 1.25rem;
        }
        .faq-item .icon-plus { transform: rotate(0deg); transition: transform 0.3s ease; }
        .faq-item.open .icon-plus { transform: rotate(45deg); }
        
        /* Timeline styles */
        .timeline-line::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0;
            height: 100%;
            width: 2px;
            background-image: linear-gradient(to bottom, var(--accent), var(--accent-dark), var(--bg-dark));
        }
        .timeline-point {
            background-color: var(--bg-dark);
            border: 3px solid var(--accent);
        }
        
        /* --- UPDATED: MOBILE MENU OVERLAY STYLES --- */
        #mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-dark);
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            opacity: 0;
            visibility: hidden;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #mobile-menu.open {
            opacity: 1;
            visibility: visible;
        }
        #mobile-menu a {
            color: var(--text-on-dark);
            font-size: 1.5rem;
            margin: 1rem 0;
            font-weight: bold;
        }
        #mobile-menu-close-button {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            color: var(--text-on-dark);
        }
        /* --- END UPDATED STYLES --- */

        /* --- NEW: SPLIT SCREEN PRELOADER STYLES --- */
        #split-loader {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .split {
            position: absolute;
            width: 100%;
            height: 50%;
            background: var(--bg-dark);
            transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1); /* Smoother easing */
            z-index: 2;
        }

        .split.top {
            top: 0;
        }

        .split.bottom {
            bottom: 0;
        }

        .loader-text {
            position: absolute;
            font-family: 'Cinzel', serif;
            font-size: 2rem;
            font-weight: bold;
            color: var(--accent);
            z-index: 3;
            opacity: 1;
            transition: opacity 0.5s ease-out; /* Faster fade */
            letter-spacing: 3px;
        }
        /* --- END PRELOADER STYLES --- */


        /* --- UPDATED: SCROLLED HEADER STYLES --- */
        #header.header-scrolled {
            background-color: var(--bg-light);
            border-bottom-color: var(--border-on-light);
        }
        #header.header-scrolled .logo-gradient-text {
            background: none; /* Remove gradient on scroll */
            -webkit-text-fill-color: initial; /* Use the element's color */
            text-fill-color: initial;
            color: var(--text-on-light); /* Set to dark charcoal */
            animation: none; /* Disable animation on scroll */
        }
        #header.header-scrolled nav a:not(.btn-cta) {
            color: var(--text-on-light);
        }
        #header.header-scrolled nav a:hover:not(.btn-cta) {
            color: var(--accent);
        }
        #header.header-scrolled #mobile-menu-button {
            color: var(--text-on-light);
        }
        /* --- NEW: SCROLLED MOBILE MENU STYLES --- */
        #header.header-scrolled #mobile-menu {
            background-color: var(--bg-light);
        }
        #header.header-scrolled #mobile-menu a {
            color: var(--text-on-light);
        }
        #header.header-scrolled #mobile-menu a:hover {
            background-color: #f5f5f5;
            color: var(--accent);
        }
        /* --- END UPDATED STYLES --- */

        /* --- NEW: QUIZ STYLES --- */
        .quiz-option {
            border: 2px solid var(--border-on-dark);
            transition: all 0.3s ease;
        }
        .quiz-option:hover {
            border-color: var(--accent);
            background-color: #1a1a1a;
        }
        .quiz-option input:checked + label {
            border-color: var(--accent);
            background-color: var(--accent-dark);
            color: white;
        }
        .progress-bar-bg {
            background-color: var(--border-on-dark);
        }
        .progress-bar-fill {
            background-color: var(--accent);
            transition: width 0.5s ease-in-out;
        }
        /* --- END QUIZ STYLES --- */
    


/* Floating bounce for crown */
@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-bounce-slow {
  animation: bounce-slow 3s infinite;
}