:root {
            --soft-green: #28DF99;
            --soft-white: #EDFFF0;
            --card-bg: #F4F0E4;
            --text-dark: #1a1a1a;
        }

        body {
            font-family: 'Cormorant Garamond', serif;
            background-color: white;
            color: var(--text-dark);
            scroll-behavior: smooth;
        }

        /* Tilted Logo */
        .logo-container {
            transform: rotate(-3deg);
            transition: transform 0.3s ease;
        }
        .logo-container:hover {
            transform: rotate(0deg);
        }

        /* Dual Box Header Cards */
        .header-card {
            background-color: var(--card-bg);
            border-radius: 4px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        /* Hero Background Animation */
        .hero-section {
            background: linear-gradient(45deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1)), 
                        url('https://static.wixstatic.com/media/c837a6_c7f6de6cccef4918a152c37b8a57e175~mv2.jpg/v1/fill/w_1883,h_1004,fp_0.50_0.50,q_85,usm_0.66_1.00_0.01,enc_auto/Copy%20of%20Consistent%20Image%20Series_Topaz%20Image%20Upscale_2026-02-11_11-05-27%201.jpg');
            background-size: cover;
            background-position: center;
            height: 150vh;
        }

        @keyframes bgZoom {
            from { background-size: 100%; }
            to { background-size: 110%; }
        }

        /* Hero Lifestyle Card */
        .lifestyle-grid-card {
            background-color: var(--soft-white);
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            transition: transform 0.3s ease;
        }
        .lifestyle-grid-card:hover {
            transform: translateY(-5px);
        }

        .hero-img-item {
            transition: transform 0.4s ease, filter 0.4s ease;
            filter: brightness(0.9);
        }
        .hero-img-item:hover {
            transform: scale(1.05);
            filter: brightness(1.1);
        }

        /* Content Pages */
        .page { display: none; animation: fadeIn 0.8s ease forwards; }
        .page.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        /* Typography */
        h1, h2, h3, h4 { font-weight: 600; font-style: italic; }
        .dropcap::first-letter {
            font-size: 4rem;
            float: left;
            margin-right: 8px;
            color: var(--soft-green);
            line-height: 1;
        }

        /* Hover Effects */
        .lift-card {
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            border: 1px solid transparent;
        }
        .lift-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.06);
            border-color: var(--soft-green);
        }

        /* Mobile Menu */
        #mobile-menu {
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        }
        #mobile-menu.open { transform: translateX(0); }

        /* Scroll Progress Bar */
        #progress-bar {
            position: fixed;
            top: 0; left: 0; height: 3px;
            background: var(--soft-green);
            z-index: 9999;
            width: 0%;
        }

        /* Initial header styles */
header {
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Hidden header */
header.hide {
    transform: translateY(-120px); /* move it above viewport */
    opacity: 0;
}