:root {
            --brand-navy: #001529;
            --brand-sky: #7F5D3D;
                        /* Logo sizes for different breakpoints */
            --logo-size: 56px;
        }
        .bg-brand-navy { background-color: var(--brand-navy); }
        .bg-brand-sky { background-color: var(--brand-sky); }
        .text-brand-sky { color: var(--brand-sky); }
        .border-brand-sky { border-color: var(--brand-sky); }
        
        /* Custom scrollbar for gallery */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


        /* === REFINED PREMIUM CIRCULAR LOGO === */
        
        .logo-container {
            --size: var(--logo-size);
            position: relative;
            width: var(--size);
            height: var(--size);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        /* Responsive sizes */
        @media (min-width: 640px) {
            .logo-container { --size: 64px; }
        }
        @media (min-width: 768px) {
            .logo-container { --size: 80px; }
        }
        @media (min-width: 1024px) {
            .logo-container { --size: 96px; }
        }

        /* Main circular logo */
        .logo-main {
            position: relative;
            width: calc(var(--size) - 8px);
            height: calc(var(--size) - 8px);
            border-radius: 50%;
            overflow: hidden;
            background: #fff;
            box-shadow: 
                0 2px 8px rgba(0, 21, 41, 0.08),
                0 4px 20px rgba(0, 21, 41, 0.06);
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                        box-shadow 0.4s ease;
            z-index: 2;
        }

        .logo-main img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .logo-container:hover .logo-main {
            transform: scale(1.08);
            box-shadow: 
                0 6px 20px rgba(127, 93, 61, 0.25),
                0 12px 40px rgba(0, 21, 41, 0.15),
                0 0 20px rgba(127, 93, 61, 0.2);
        }

        /* Elegant rotating ring - MORE PRONOUNCED */
        .logo-ring {
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            border: 2.5px solid transparent;
            border-top-color: var(--brand-sky);
            border-right-color: var(--brand-sky);
            animation: elegantSpin 6s linear infinite;
            opacity: 0.9;
        }

        /* Secondary accent ring - MORE VISIBLE */
        .logo-ring-accent {
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 2px solid transparent;
            border-bottom-color: var(--brand-navy);
            border-left-color: var(--brand-navy);
            animation: elegantSpin 10s linear infinite reverse;
            opacity: 0.6;
        }

        @keyframes elegantSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Pulsing ambient glow - ANIMATED */
        .logo-glow {
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            background: radial-gradient(
                circle,
                rgba(127, 93, 61, 0.15) 0%,
                rgba(127, 93, 61, 0.08) 50%,
                transparent 70%
            );
            z-index: 1;
            animation: pulseGlow 2.5s ease-in-out infinite;
        }

        @keyframes pulseGlow {
            0%, 100% {
                transform: scale(1);
                opacity: 0.6;
            }
            50% {
                transform: scale(1.15);
                opacity: 1;
            }
        }

        .logo-container:hover .logo-glow {
            animation: pulseGlow 1.5s ease-in-out infinite;
            background: radial-gradient(
                circle,
                rgba(127, 93, 61, 0.25) 0%,
                rgba(127, 93, 61, 0.12) 50%,
                transparent 70%
            );
        }

        /* Premium golden arc highlight - BOLDER */
        .logo-arc {
            position: absolute;
            inset: -1px;
            border-radius: 50%;
            background: conic-gradient(
                from 200deg,
                transparent 0deg,
                var(--brand-sky) 20deg,
                rgba(161, 122, 84, 0.7) 50deg,
                transparent 80deg,
                transparent 180deg,
                var(--brand-navy) 200deg,
                rgba(0, 21, 41, 0.5) 230deg,
                transparent 260deg
            );
            animation: elegantSpin 8s linear infinite;
            -webkit-mask: radial-gradient(transparent 68%, black 70%);
            mask: radial-gradient(transparent 68%, black 70%);
        }

        /* Shine sweep effect */
        .logo-shine {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            overflow: hidden;
            z-index: 3;
            pointer-events: none;
        }

        .logo-shine::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 50%;
            height: 200%;
            background: linear-gradient(
                100deg,
                transparent 0%,
                rgba(255, 255, 255, 0) 40%,
                rgba(255, 255, 255, 0.6) 50%,
                rgba(255, 255, 255, 0) 60%,
                transparent 100%
            );
            transform: rotate(25deg) translateX(-150%);
            transition: transform 0.6s ease;
        }

        .logo-container:hover .logo-shine::before {
            transform: rotate(25deg) translateX(350%);
        }

        /* Hover state - speed UP animations for energy */
        .logo-container:hover .logo-ring {
            animation-duration: 3s;
            border-width: 3px;
        }
        .logo-container:hover .logo-ring-accent {
            animation-duration: 5s;
        }
        .logo-container:hover .logo-arc {
            animation-duration: 4s;
        }