/* ===== DESIGN TOKENS ===== */
        :root {
            --gold: #dfa667;
            --gold-light: #e0c26e;
            --gold-dark: #9c7c32;
            --ink: #0d0d0d;
            --ink-mid: #1a1a1a;
            --ash: #2a2a2a;
            --stone: #f5f2ed;
            --stone-mid: #ede9e2;
            --parchment: #faf8f4;
            --muted: #888078;
            --muted-light: #b0a898;
            --font-display: 'Poppins', sans-serif;
            --font-alt: 'Aldrich', sans-serif;
            --transition: 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            color: #333;
            background: #fff;
            margin: 0;
        }

        /* ===== HEADER (match projects.html) ===== */
        .header {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1000;
            width: auto;
            max-width: calc(100% - 40px);
        }

        .header__menu {
            background: rgba(13, 13, 13, 0.85);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 50px;
            padding: 8px 24px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(201, 168, 76, 0.3);
        }

            .header__menu ul {
                list-style: none;
                display: flex;
                align-items: center;
                gap: 8px;
                margin: 0;
                padding: 0;
            }

                .header__menu ul li {
                    position: relative;
                }

                    .header__menu ul li a {
                        color: #fff;
                        text-decoration: none;
                        font-weight: 500;
                        font-size: 14px;
                        padding: 8px 16px;
                        border-radius: 30px;
                        transition: all 0.3s ease;
                        display: block;
                        white-space: nowrap;
                        font-family: 'Poppins', sans-serif;
                    }

                        .header__menu ul li a:hover {
                            background: rgba(201, 168, 76, 0.15);
                            color: var(--gold);
                        }

                    .header__menu ul li.active a {
                        background: rgba(201, 168, 76, 0.2);
                        color: aliceblue;
                    }

                    .header__menu ul li.dropdown > ul {
                        position: absolute;
                        top: 100%;
                        left: 50%;
                        transform: translateX(-50%) translateY(10px);
                        background: rgba(13, 13, 13, 0.95);
                        backdrop-filter: blur(10px);
                        -webkit-backdrop-filter: blur(10px);
                        min-width: 180px;
                        border-radius: 16px;
                        padding: 8px 0;
                        opacity: 0;
                        visibility: hidden;
                        transition: all 0.3s ease;
                        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
                        border: 1px solid rgba(201, 168, 76, 0.3);
                        display: flex;
                        flex-direction: column;
                        gap: 4px;
                    }

                    .header__menu ul li.dropdown:hover > ul {
                        opacity: 1;
                        visibility: visible;
                        transform: translateX(-50%) translateY(5px);
                    }

                    .header__menu ul li.dropdown > ul li a {
                        padding: 8px 20px;
                        border-radius: 0;
                        text-align: center;
                        font-size: 13px;
                        white-space: nowrap;
                    }

                        .header__menu ul li.dropdown > ul li a:hover {
                            background: rgba(201, 168, 76, 0.2);
                        }

                    .header__menu ul li.dropdown > a::after {
                        content: '▾';
                        margin-left: 6px;
                        font-size: 14px;
                        color: var(--gold);
                        opacity: 0.7;
                        transition: transform 0.3s ease;
                        display: inline-block;
                    }

                    .header__menu ul li.dropdown:hover > a::after {
                        transform: rotate(180deg);
                    }

        .canvas__open {
            display: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
        }

        @media (max-width: 991px) {
            .header {
                top: 10px;
                left: 10px;
                right: 10px;
                max-width: calc(100% - 20px);
            }

            .header__menu {
                display: none !important;
            }

            .mobile-menu {
                display: none !important;
            }

            .canvas__open {
                display: flex;
                align-items: center;
                justify-content: center;
                position: fixed;
                top: 15px;
                right: 15px;
                z-index: 1001;
                background: rgba(13, 13, 13, 0.9);
                backdrop-filter: blur(10px);
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border: 1px solid rgba(201, 168, 76, 0.3);
                color: #fff;
                font-size: 22px;
                cursor: pointer;
            }

                .canvas__open i, .canvas__open .fa {
                    color: inherit;
                    display: inline-block;
                }

            .hamburger-bars {
                display: block;
                width: 24px;
                height: 14px;
                background: repeating-linear-gradient(to bottom, currentColor 0, currentColor 2px, transparent 2px, transparent 6px);
                border-radius: 1px;
            }
        }

        @media (min-width: 992px) {
            .canvas__open {
                display: none !important;
            }
        }

        /* === LOGO PRELOADER === */
        #preloder {
            position: fixed;
            width: 100%;
            height: 100%;
            background: #0a0a0a;
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 0;
            left: 0;
        }

        .loader-logo-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }

        .loader-logo {
            width: 200px;
            max-width: 80vw;
            opacity: 0;
            transform: scale(0.85);
            animation: logoReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
        }

        @keyframes logoReveal {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .loader-bar {
            width: 200px;
            max-width: 80vw;
            height: 3px;
            background: rgba(255,255,255,0.12);
            border-radius: 2px;
            overflow: hidden;
            opacity: 0;
            animation: barFadeIn 0.4s ease 0.7s forwards;
        }

        @keyframes barFadeIn {
            to {
                opacity: 1;
            }
        }

        .loader-bar-inner {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #d4af37, #f0d060, #d4af37);
            border-radius: 2px;
            animation: barFill 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards;
        }

        @keyframes barFill {
            0% {
                width: 0%;
            }

            60% {
                width: 85%;
            }

            100% {
                width: 100%;
            }
        }
        /* === END LOGO PRELOADER === */

        /* ===================================================
           PAGE STYLES (Hero, Cards, Values, etc.)
        =================================================== */

        .hero .hero__items,
        .hero__slider .hero__items {
            height: 50vh !important;
            min-height: 400px !important;
            background-position: center 30% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            position: relative;
        }

        .hero__text {
            position: relative;
            z-index: 2;
            text-align: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

            .hero__text h2 {
                opacity: 1 !important;
                top: 0 !important;
                color: #fff !important;
                text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 0, 0, 0.6);
            }

        .photo-card-section {
            padding: 80px 0;
            background: #f8f9fa;
        }

        .unified-card {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

            .unified-card:hover {
                transform: translateY(-10px);
                box-shadow: 0 25px 50px rgba(0,0,0,0.15);
            }

        .unified-card-img {
            height: 400px;
            width: 100%;
            object-fit: cover;
        }

        .unified-card-text {
            padding: 40px;
        }

            .unified-card-text h3 {
                font-size: 24px;
                margin-bottom: 20px;
                color: var(--primary-color, #dfa667);
            }

            .unified-card-text p {
                font-size: 16px;
                line-height: 1.75;
                margin-bottom: 20px;
                text-align: justify;
            }

            .unified-card-text ul {
                margin-bottom: 20px;
                padding-left: 1.25rem;
                text-align: left;
            }

            .unified-card-text li {
                font-size: 16px;
                line-height: 1.75;
                margin-bottom: 8px;
            }

        .qhse-card .qhse-card-title {
            padding: 40px 40px 24px;
            text-align: center;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }

            .qhse-card .qhse-card-title h3 {
                margin-bottom: 0;
                font-size: 22px;
                line-height: 1.35;
                letter-spacing: 0.02em;
                color: var(--primary-color, #dfa667);
            }

        .qhse-card .qhse-card-img {
            width: 100%;
            height: auto;
            max-height: 420px;
            object-fit: cover;
            display: block;
        }

        .qhse-card .unified-card-text {
            padding: 32px 40px 40px;
        }

        .core-values-section {
            padding: 100px 0;
            background: #fff;
        }

        .values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .value-card {
            background: #fff;
            padding: 40px 30px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            text-align: center;
            transition: all 0.3s ease;
            border-top: 4px solid var(--primary-color, #dfa667);
        }

            .value-card:hover {
                transform: translateY(-10px);
                box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            }

        .value-icon {
            font-size: 48px;
            color: var(--primary-color, #dfa667);
            margin-bottom: 20px;
        }

        .value-card h4 {
            font-size: 20px;
            margin-bottom: 15px;
        }

        .value-card p {
            font-size: 14px;
            line-height: 1.75;
        }

        /* Footer styles are defined globally in style.css */