@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Montserrat:wght@200;300;400;500&display=swap');

        :root {
            --charcoal: #282B2C;
            --forest: #294B3B;
            --text-light: #FBFBFB;
            --text-muted: rgba(251, 251, 251, 0.6);
            --accent: #D4AF37; /* Subtle gold for high-end feel */
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body, html {
            height: 100%;
            font-family: 'Montserrat', sans-serif;
            background-color: var(--charcoal);
            color: var(--text-light);
            overflow-x: hidden;
        }

        /* --- SPLIT SCREEN ARCHITECTURE --- */
        .layout-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 100vh;
            width: 100vw;
        }

        /* --- LEFT SIDE: CONTENT --- */
        .content-panel {
            background-color: var(--charcoal);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 5vw 6vw;
            position: relative;
            z-index: 2;
        }

        .content-panel::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: radial-gradient(circle at 0% 0%, rgba(41, 75, 59, 0.2) 0%, transparent 60%);
            pointer-events: none;
            z-index: -1;
        }

        header {
            animation: fadeSlideDown 1.5s ease forwards;
            opacity: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }

        /* Minimalist geometric luxury mark */
        .brand-mark {
            width: 45px;
            height: 45px;
            display: none;
        }

        .logo {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.5rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            font-weight: 400;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
            display: none !important;
        }

        .logo::after {
            content: '';
            height: 1px;
            width: 40px;
            background-color: var(--accent);
            display: block;
        }

        .logoimg {
            width: 100%;
        }
        .logoimg img {
            display: block;
            width: 182px;
        }

        main {
            max-width: 600px;
        }

        .eyebrow {
            font-size: 0.7rem;
            letter-spacing: 0.4em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 1.5rem;
            animation: fadeSlideUp 1.5s ease 0.4s forwards;
            opacity: 0;
            display: none;
        }

        h1 {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(3rem, 5vw, 5.5rem);
            line-height: 1.1;
            font-weight: 300;
            margin-bottom: 2rem;
            animation: fadeSlideUp 1.5s ease 0.6s forwards;
            opacity: 0;
        }

        h1 span {
            font-style: italic;
            color: #A3B8AD; 
        }

        p.description {
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.8;
            color: var(--text-muted);
            margin-bottom: 3.5rem;
            max-width: 480px;
            animation: fadeSlideUp 1.5s ease 0.8s forwards;
            opacity: 0;
            
            /* Hidden via CSS. Remove 'display: none;' to restore this block */
            display: none; 
        }

        /* Countdown Section */
        .countdown-title {
            font-size: 0.75rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--text-light);
            margin-bottom: 1.5rem;
            animation: fadeSlideUp 1.5s ease 0.9s forwards;
            opacity: 0;
        }

        .countdown-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            border-top: 1px solid rgba(251, 251, 251, 0.1);
            padding-top: 2rem;
            animation: fadeSlideUp 1.5s ease 1s forwards;
            opacity: 0;
            max-width: 450px;
        }

        .time-unit {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .time-unit span {
            font-family: 'Cormorant Garamond', serif;
            font-size: 2.5rem;
            line-height: 1;
            font-weight: 400;
            color: var(--text-light);
        }

        .time-unit label {
            font-size: 0.6rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-top: 0.5rem;
        }

        /* Updated Footer Structure */
        footer {
            display: flex;
            flex-direction: column; /* Stacked horizontally now */
            align-items: flex-start;
            gap: 1.2rem;
            font-size: 0.65rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text-muted);
            animation: fadeIn 2s ease 1.5s forwards;
            opacity: 0;
        }

        .socials {
            display: flex;
            gap: 1.5rem;
        }

        .socials a {
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .socials a:hover {
            color: var(--accent);
        }

        /* --- RIGHT SIDE: 3-IMAGE MOSAIC --- */
        .image-mosaic {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 55% 45%; 
            gap: 0.5rem; 
            background-color: var(--charcoal); 
            height: 100vh;
            width: 100%;
        }

        .mosaic-item {
            position: relative;
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        .mosaic-item::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, rgba(40, 43, 44, 0.7) 0%, rgba(41, 75, 59, 0.6) 100%);
            z-index: 1;
            transition: background 0.5s ease;
        }

        .mosaic-item:hover::after {
            background: linear-gradient(135deg, rgba(40, 43, 44, 0.4) 0%, rgba(41, 75, 59, 0.3) 100%);
        }

        .img-main {
            grid-column: 1 / 3;
            background-image: url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?q=80&w=2075&auto=format&fit=crop');
        }

        .img-sub-1 {
            background-image: url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?q=80&w=2070&auto=format&fit=crop');
        }

        .img-sub-2 {
            background-image: url('https://images.unsplash.com/photo-1613490493576-7fde63acd811?q=80&w=2071&auto=format&fit=crop');
        }

        .mosaic-item div {
            width: 100%;
            height: 100%;
            background: inherit;
            animation: slowZoom 30s ease-in-out infinite alternate;
        }

        /* --- ANIMATIONS --- */
        @keyframes fadeSlideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeSlideDown {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slowZoom {
            0% { transform: scale(1); }
            100% { transform: scale(1.1); }
        }

        /* --- RESPONSIVE --- */
        @media (max-width: 992px) {
            .layout-grid {
                grid-template-columns: 1fr;
                grid-template-rows: auto 70vh;
                height: auto;
                min-height: 100vh;
            }
            .content-panel {
                padding: 10vw 8vw;
                min-height: 80vh;
            }
            footer {
                margin-top: 4rem;
            }
            .logoimg img  {
                max-width: 30%;
            }
            main  {
                padding: 50px 0px;
            }

























            
            
        }

        @media (max-width: 480px) {
            .countdown-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
            .image-mosaic {
                grid-template-columns: 1fr;
                grid-template-rows: 1fr 1fr 1fr;
            }
            .img-main {
                grid-column: 1 / 2;
            }
        }