/* Define Brand Colors with fallbacks */
        :root {
            --brand-color: #a17c50; /* A warm, rich brown/gold */
            --brand-color-light: #d4c0a6; /* Lighter shade */
            --brand-color-dark: #7e5f3d; /* Darker shade */
            --brand-accent: #e0b47e; /* More vibrant accent - Used for highlights */
            --text-dark: #2c3e50; /* Dark charcoal */
            --text-medium: #5a6a7a; /* Muted gray */
            --bg-light: #f3f4f6; /* Slightly more distinct light grey background */
            --bg-white: #ffffff; /* Pure white */
            --border-color: #e5e7eb; /* Default border color */
            --header-height: 80px; /* Approximate header height for scroll padding */
        }

        /* Apply scroll padding globally to account for fixed header */
        html {
             scroll-padding-top: var(--header-height);
        }

        body {
            font-family: 'Montserrat', sans-serif;
            /* scroll-behavior: smooth; /* Moved to html class */
            color: var(--text-dark);
            background-color: var(--bg-light);
            overflow-x: hidden;
        }

        /* Custom Scrollbar Styles */
        body::-webkit-scrollbar { width: 10px; }
        body::-webkit-scrollbar-track { background: var(--bg-light); }
        body::-webkit-scrollbar-thumb { background: var(--brand-color-light); border-radius: 5px; }
        body::-webkit-scrollbar-thumb:hover { background: var(--brand-color); }
        body { scrollbar-width: thin; scrollbar-color: var(--brand-color-light) var(--bg-light); }


        /* Apply brand colors via classes */
        .brand-text { color: var(--brand-color) !important; }
        .brand-bg { background-color: var(--brand-color) !important; }
        .brand-border { border-color: var(--brand-color) !important; }
        .brand-accent-text { color: var(--brand-accent) !important; }
        .brand-accent-bg { background-color: var(--brand-accent) !important; }

        /* Define common text colors using variables */
        .text-gray-600 { color: var(--text-medium) !important; }
        .text-gray-700 { color: var(--text-medium) !important; }
        .text-gray-800 { color: var(--text-dark) !important; }
        .text-white { color: var(--bg-white) !important; }
        .bg-white { background-color: var(--bg-white) !important; }
        .bg-gray-50 { background-color: var(--bg-light) !important; }
        .bg-gray-800 { background-color: var(--text-dark) !important; }


        /* Custom Navigation Link Hover Effect */
        .nav-link {
            position: relative;
            transition: color 0.3s ease;
            font-weight: 500;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--brand-accent);
            transition: width 0.3s ease, background-color 0.3s ease;
        }
        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }
        .nav-link:hover,
        .nav-link.active {
             color: var(--brand-color) !important;
        }

        /* Section Scroll Animation */
        .section {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Logo Styling */
        .logo-text {
            font-family: 'Montserrat', sans-serif;
            letter-spacing: 1px;
            font-weight: 700;
        }
        .logo-subtitle {
            font-size: 0.8rem;
            font-weight: 400;
            margin-left: 0.75rem;
            padding-top: 0.2rem;
            color: var(--text-medium);
        }


        /* Button Styling */
        .btn { /* Base button class */
             display: inline-flex;
             align-items: center;
             justify-content: center;
             padding: 0.75rem 1.5rem; /* Standard padding */
             border-radius: 9999px; /* pill shape */
             font-weight: 600; /* slightly bolder */
             text-align: center;
             transition: all 0.3s ease;
             cursor: pointer;
             text-decoration: none; /* remove underline */
             border: 2px solid transparent; /* For consistent sizing */
        }
        .btn-primary {
            background-color: var(--brand-color) !important;
            color: var(--bg-white) !important;
            box-shadow: 0 5px 15px rgba(161, 124, 80, 0.2);
        }
        .btn-primary:hover {
            background-color: var(--brand-color-dark) !important;
            box-shadow: 0 8px 20px rgba(161, 124, 80, 0.3);
            transform: translateY(-2px);
        }

        .btn-outline {
            border-color: var(--brand-color) !important; /* Use variable */
            color: var(--brand-color) !important;
            background-color: transparent !important;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        .btn-outline:hover {
            background-color: var(--brand-color) !important;
            color: var(--bg-white) !important;
            box-shadow: 0 8px 20px rgba(161, 124, 80, 0.3);
             transform: translateY(-2px);
        }

        /* Card Styling - Improved Elegant Design */
        .service-card, .loyalty-card, .pricing-card { /* Added pricing-card */
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            background-color: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            position: relative;
            display: flex; /* Make cards flex column */
            flex-direction: column; /* Stack content vertically */
        }

        .service-card {
            height: 100%;
            padding: 2.5rem 1.5rem;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(161,124,80,0.1) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: -1;
            border-radius: 12px;
        }

        .service-card:hover::before {
            opacity: 1;
        }

        .service-card:hover, .loyalty-card:hover, .pricing-card:hover { /* Added pricing-card */
            transform: translateY(-10px);
            box-shadow: 0 20px 35px rgba(0,0,0,0.07);
        }

        .service-card .icon-container {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-color-dark) 100%);
            box-shadow: 0 10px 20px rgba(161,124,80,0.3);
            position: relative;
            transition: all 0.3s ease;
        }

        .service-card:hover .icon-container {
            transform: scale(1.1);
        }

        .service-card .icon-container::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px dashed rgba(255,255,255,0.5);
            animation: spin 12s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .service-card .icon {
            font-size: 2rem;
            color: white;
            z-index: 2;
        }

        .service-card .title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--text-dark);
        }

        .service-card .description {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--text-medium);
            flex-grow: 1; /* Allow description to take space */
        }

        /* Map Styling */
        .map-container {
            height: 450px; /* CHANGED: Reduced height */
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0,0,0,0.12);
            filter: grayscale(1); /* Changed to full greyscale */
            transition: all 0.5s ease;
            border: 1px solid var(--border-color);
        }
        .map-container:hover {
            filter: grayscale(0); /* Remove filter on hover */
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        .map-container iframe {
             width: 100%;
             height: 100%;
             border: 0;
        }

        /* Contact Info Box Styling */
        .contact-info-box {
            background-color: var(--bg-white);
            border-radius: 12px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            padding: 2rem;
            height: 100%;
            border: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .contact-info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .contact-info-item .icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-color-dark) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            box-shadow: 0 5px 15px rgba(161,124,80,0.2);
            flex-shrink: 0;
        }

        .contact-info-item .icon i {
            color: white;
            font-size: 1.25rem;
        }

        .contact-info-item .content {
            flex-grow: 1;
        }

        .contact-info-item .label {
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.25rem;
        }

        .contact-info-item .value {
            color: var(--text-medium);
        }
        .contact-info-item .value a { /* Style links in contact info */
             color: var(--text-medium);
             text-decoration: none;
             transition: color 0.3s ease;
        }
        .contact-info-item .value a:hover {
             color: var(--brand-color);
        }

        /* Sticky Header Enhancement */
        #header {
            position: fixed; /* Ensure it's fixed */
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000; /* High z-index */
            background-color: rgba(255, 255, 255, 0.9);
            padding-top: 1rem; /* Initial padding */
            padding-bottom: 1rem;
            /* Smoother transition only on specific properties */
            transition: padding 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
        }

        #header.sticky {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            background-color: rgba(255, 255, 255, 0.98);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            border-bottom: 2px solid var(--brand-color-light);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        #header .logo-container {
            display: flex;
            align-items: center;
            transition: transform 0.3s ease-in-out; /* Transition logo size */
        }

        #header.sticky .logo-container img {
            transform: scale(0.9); /* Slightly shrink logo when sticky */
        }
        #header .logo-container img {
             transition: transform 0.3s ease-in-out; /* Ensure transition applies both ways */
        }


        /* Hero Section Enhancement */
        .hero-section {
            position: relative;
            background-color: var(--bg-white);
            overflow: hidden;
            padding-top: calc(var(--header-height) + 2rem); /* Adjust top padding to account for fixed header */
        }

        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;
        }

        .hero-content {
            position: relative;
            z-index: 1;
        }

        .hero-image-container {
            position: relative;
            padding: 1rem;
            z-index: 1;
        }

        .hero-image-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            transform: translate(15px, 15px);
            z-index: -1;
            background: linear-gradient(135deg, rgba(212, 192, 166, 0.3), rgba(224, 180, 126, 0.1)); /* Subtle background glow */
        }

        .hero-image {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 12px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            position: relative;
            z-index: 1;
            transition: all 0.5s ease;
        }

        .hero-image:hover {
            transform: scale(1.02) rotate(-1deg); /* Slight rotation on hover */
            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
        }

        /* Section Separator Enhancement */
        .section-separator {
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, var(--brand-color), var(--brand-accent));
            margin: 0 auto 1.75rem;
            border-radius: 4px;
            position: relative;
        }

        .section-separator::before, .section-separator::after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 2px;
            background-color: var(--brand-color-light);
            border-radius: 2px;
        }

        .section-separator::before { left: -30px; width: 20px; }
        .section-separator::after { right: -30px; width: 20px; }

        /* --- Back to Top Button Styling (Restored & Improved) --- */
        #back-to-top {
            position: fixed;
            bottom: 25px;
            right: 25px;
            width: 50px;
            height: 50px;
            background-color: var(--brand-color);
            color: white;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease-in-out, background-color 0.3s ease;
            z-index: 1000;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        #back-to-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        #back-to-top:hover {
            background-color: var(--brand-color-dark);
            transform: scale(1.1);
        }

        /* Pricing Section Styling */
        .pricing-category-box {
            background-color: var(--bg-white, #fff);
            border: 1px solid var(--border-color, #e5e7eb);
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.03);
        }
        .pricing-category-title {
            font-size: 1.75rem;
            font-weight: 600;
            color: var(--brand-color, #a17c50);
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid var(--brand-color-light, #e5d3b3);
            display: inline-block;
        }
        .pricing-subcategory-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-dark, #222);
            margin-top: 2rem;
            margin-bottom: 1rem;
        }
        .pricing-list { list-style: none; padding-left: 0; margin-top: 1rem; }
        .pricing-list li {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 1rem 0;
            border-bottom: 1px dashed var(--border-color, #e5e7eb);
            transition: background-color 0.2s ease;
        }
        .pricing-list li:last-child { border-bottom: none; }
        .pricing-list li:hover { background-color: rgba(161, 124, 80, 0.03); }
        .pricing-list .item-name {
            color: var(--text-dark, #222);
            padding-right: 1rem;
            flex-grow: 1;
            line-height: 1.5;
        }
        .pricing-list .item-price {
            font-weight: 600;
            color: var(--brand-color, #a17c50);
            white-space: nowrap;
            padding-left: 1rem;
            line-height: 1.5;
        }
        .pricing-note {
            font-size: 0.95rem;
            font-style: italic;
            color: var(--text-medium, #666);
            margin-top: 1.5rem;
            line-height: 1.6;
        }
        .coming-soon-badge {
            display: inline-block;
            background-color: var(--brand-accent, #e0b47e);
            color: white;
            font-size: 0.75rem;
            font-weight: 500;
            padding: 0.2rem 0.6rem;
            border-radius: 1rem;
            margin-left: 0.5rem;
            vertical-align: middle;
        }
        /* Footer Styling */
        .footer-info-text {
            color: #e5e7eb;
            font-size: 1rem;
            line-height: 1.6;
        }
        .footer-info-text a {
            color: #e5e7eb;
            text-decoration: underline;
        }
        .footer-info-text a:hover {
            color: var(--brand-accent, #e0b47e);
        }
        .social-links a {
            color: #e5e7eb;
            margin-right: 1rem;
            font-size: 1.3rem;
            transition: color 0.2s;
        }
        .social-links a:hover {
            color: var(--brand-accent, #e0b47e);
        }

        .footer-title {
            color: var(--brand-accent, #e0b47e);
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            margin-bottom: 1rem;
            display: inline-block;
            border-bottom: 2px solid var(--brand-accent, #e0b47e);
            padding-bottom: 0.25rem;
        }

        /* Mobile Menu Fixes */
        #mobile-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: #fff;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            z-index: 1001;
            transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }
        #mobile-menu.open {
            display: block;
            max-height: 500px;
            opacity: 1;
        }
        @media (min-width: 768px) {
            #mobile-menu {
                display: none !important;
            }
            nav {
                display: flex !important;
            }
        }
        @media (max-width: 767px) {
            nav {
                display: none !important;
            }
        }
        .mobile-nav-link {
            display: block;
            padding: 1rem 1.5rem;
            color: var(--text-dark);
            text-decoration: none;
            border-bottom: 1px solid var(--border-color);
            font-weight: 500;
            transition: background 0.2s, color 0.2s;
        }
        .mobile-nav-link:last-child {
            border-bottom: none;
        }
        .mobile-nav-link:hover {
            background: var(--brand-color-light, #f3f4f6);
            color: var(--brand-color);
        }