/* Custom Colors & Typography Setup */
        :root {
            --color-cream: #FAF8F4;
            --color-beige: #D6CFC7;
            --color-sage: #9FAF9B;
            --color-charcoal: #2F2F2F;
        }
        
        /* Base styles */
        body {
            background-color: var(--color-cream);
            color: var(--color-charcoal);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Custom Scroll Reveal Classes */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .scroll-reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Hero Image cinematic effect */
        .hero-image-zoom {
            transition: transform 3s ease-in-out;
            transform: scale(1.05); /* Initial slight zoom */
        }
        .hero-image-zoom.loaded {
            transform: scale(1);
        }

        /* Header link hover underline effect */
        .nav-link {
            position: relative;
            padding-bottom: 4px;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: 0;
            left: 0;
            background-color: var(--color-charcoal);
            transition: width 0.3s ease-out;
        }
        .nav-link:hover::after {
            width: 100%;
        }

        /* Collection Card Hover Effect */
        .collection-card:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 10px 15px -3px rgba(47, 47, 47, 0.1), 0 4px 6px -2px rgba(47, 47, 47, 0.05);
        }

        /* Masonry Grid Simulation for Decor Ideas (using columns for simple responsiveness) */
        .masonry-grid {
            column-count: 1;
            column-gap: 1.5rem;
        }
        @media (min-width: 640px) {
            .masonry-grid {
                column-count: 2;
            }
        }
        @media (min-width: 1024px) {
            .masonry-grid {
                column-count: 3;
            }
        }
        .masonry-item {
            display: inline-block;
            width: 100%;
            margin-bottom: 1.5rem;
        }