/* --- DESIGN SYSTEM & RESET --- */
        :root {
            --primary: #000000;
            --secondary: #FFFFFF;
            --soft-bg: #F5F5F5;
            --accent: #D4AF37;
            --transition-smooth: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            --transition-fast: all 0.3s ease;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
        }

        body {
            background-color: var(--primary);
            color: var(--primary);
            font-family: 'Open Sans', sans-serif;
            overflow-x: hidden;
            width: 100%;
        }

        h1, h2, h3, h4, h5, h6, .artistic-font {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition-fast);
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-smooth);
        }

        /* --- GLOBAL EDITORIAL UTILITIES --- */
        .w-space { padding: 140px 0; }
        .container-fluid { width: 100%; padding: 0 5%; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
        .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
        .flex-between { display: flex; justify-content: space-between; align-items: flex-start; }
        
        .luxury-heading { font-size: 3.5rem; font-weight: 400; line-height: 1.1; margin-top: 10px; }
        .small-tag { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; color: var(--accent); }
        .muted-p { font-size: 0.95rem; line-height: 1.8; font-weight: 300; max-width: 450px; }
        
        .btn-luxury {
            display: inline-block;
            padding: 15px 40px;
            border: 1px solid var(--primary);
            background: transparent;
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 0.9rem;
            cursor: pointer;
            position: relative;
            z-index: 1;
            transition: var(--transition-smooth);
        }
        .btn-luxury::before {
            content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%;
            background: var(--primary); z-index: -1; transition: var(--transition-smooth);
        }
        .btn-luxury:hover { color: var(--secondary); }
        .btn-luxury:hover::before { width: 100%; }

        .btn-luxury.light { border-color: var(--secondary); color: var(--secondary); }
        .btn-luxury.light::before { background: var(--secondary); }
        .btn-luxury.light:hover { color: var(--primary); }

        /* Custom Premium Cursor */
        #custom-cursor {
            position: fixed; width: 10px; height: 10px; background: var(--accent);
            border-radius: 50%; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s; mix-blend-mode: difference;
        }

        /* --- MULTIPAGE APPLICATION STATES --- */
        .page-view { display: none; width: 100%; background: var(--secondary); }
        .page-view.active-state { display: block; }

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 20px 5%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.4s ease, background 0.4s ease;
}

header.hide-header{
    transform: translateY(-100%);
}    
    .nav-wrap { display: flex; justify-content: space-between; align-items: center; }
.brand-logo{
    display:flex;
    align-items:center;
}

.brand-logo img{
    height:150px;
    width:auto;
    display:block;
    object-fit:contain;
}        
        .nav-menu { display: flex; gap: 40px; list-style: none; }
        .nav-item { position: relative; }
        .nav-link { color: var(--secondary); font-family: 'Oswald', sans-serif; font-size: 1rem; cursor: pointer; text-transform: uppercase; padding: 10px 0; display: block; }
        
        /* Dropdown Architecture */
        .dropdown-menu {
            position: absolute; top: 100%; left: 0; width: 220px; background: rgba(0,0,0,0.9);
            backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); padding: 20px 0;
            list-style: none; opacity: 0; visibility: hidden; transform: translateY(15px);
            transition: var(--transition-smooth);
        }
        .nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
        .dropdown-menu li a { display: block; padding: 10px 25px; color: var(--secondary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
        .dropdown-menu li a:hover { background: rgba(255,255,255,0.1); color: var(--accent); }

        .right-actions { display: flex; align-items: center; gap: 25px; color: var(--secondary); }
        .cart-icon-btn { cursor: pointer; position: relative; font-size: 1.2rem; }
        .cart-count {
            position: absolute; top: -8px; right: -12px; background: var(--accent);
            color: var(--primary); font-size: 0.7rem; font-weight: 700; width: 18px;
            height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        }

        /* Responsive Mobile Hamburger Navigation */
        .hamburger-btn { display: none; cursor: pointer; background: transparent; border: none; color: var(--secondary); font-size: 1.5rem; }
        @media (max-width: 992px) {
            .nav-menu {
                position: fixed; top: 0; right: -100%; width: 80%; height: 100vh;
                background: var(--primary); flex-direction: column; padding: 120px 40px;
                transition: var(--transition-smooth); gap: 20px; box-shadow: -10px 0 30px rgba(0,0,0,0.5);
            }
            .nav-menu.active { right: 0; }
            .dropdown-menu { position: relative; top: 0; width: 100%; background: transparent; border: none; opacity: 1; visibility: visible; transform: none; padding-left: 20px; }
            .hamburger-btn { display: block; }
        }

        /* --- SHOPPING CART SLIDE PANEL --- */
        #cart-panel {
            position: fixed; top: 0; right: -450px; width: 450px; height: 100vh;
            background: var(--secondary); box-shadow: -10px 0 40px rgba(0,0,0,0.2);
            z-index: 10000; padding: 40px; display: flex; flex-direction: column;
            transition: var(--transition-smooth);
        }
        #cart-panel.open { right: 0; }
        .cart-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--soft-bg); padding-bottom: 20px; }
        .close-cart { cursor: pointer; font-size: 1.5rem; }
        .cart-items-container { flex: 1; overflow-y: auto; padding: 20px 0; }
        .cart-item-row { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; border-bottom: 1px solid var(--soft-bg); padding-bottom: 15px; }
        .cart-item-img { width: 70px; height: 70px; background: var(--soft-bg); }
        .cart-item-details h4 { font-size: 0.95rem; }
        .cart-item-details p { font-size: 0.85rem; color: var(--accent); font-weight: 600; margin-top: 5px; }
        .remove-item-btn { cursor: pointer; color: #cc0000; font-size: 0.8rem; margin-top: 5px; display: inline-block; }
        .cart-footer { border-top: 1px solid var(--soft-bg); padding-top: 20px; }
        .cart-total-box { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.2rem; margin-bottom: 20px; }

        /* ==========================================================================
           SECTION STYLE BLOCKS
           ========================================================================== */
        
        /* SECTION 01 — HERO */
        .hero-section {
            height: 100vh; width: 100%; position: relative;
            background: url('https://static.wixstatic.com/media/84770f_1a732a8943be400e8a266f19a3a03b46~mv2.jpg/v1/fill/w_634,h_300,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Couple%20in%20Sunglasses_edited_edited.jpg') center/cover no-repeat;
            display: flex; flex-direction: column; justify-content: space-between; padding: 120px 5% 40px 5%; color: var(--secondary);
        }
        .hero-top-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: flex-start; height: 100%; margin-top: 80px;}
        .hero-right-center { justify-self: end; align-self: center; text-align: right; max-width: 300px; }
        .hero-marquee-wrap { width: 100%; overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
        .hero-marquee-text {
            display: inline-block; font-size: 8rem; font-weight: 700; line-height: 0.8;
            font-family: 'Oswald', sans-serif; text-transform: uppercase; opacity: 0.15;
            animation: marquee 25s linear infinite;
        }
        @keyframes marquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }

        /* SECTION 02 — FEATURE HIGHLIGHTS */
        .sec-02-layout { display: grid; grid-template-columns: 40% 60%; background: var(--secondary); }
        .sec-02-img-container { height: 100%; min-height: 600px; }
        .sec-02-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
        .feature-card {
            background: var(--soft-bg); padding: 60px; display: flex; flex-direction: column;
            justify-content: center; gap: 20px; border: 1px solid #EAEAEA; transition: var(--transition-smooth);
        }
        .feature-card i { font-size: 2rem; color: var(--accent); }
        .feature-card h3 { font-size: 1.5rem; font-weight: 400; }
        .feature-card:hover { background: var(--primary); color: var(--secondary); transform: scale(1.02); z-index: 2; }

        /* PRODUCT CARDS GLOBAL TEMPLATE */
        .product-card { background: var(--secondary); transition: var(--transition-smooth); display: flex; flex-direction: column; gap: 15px; position: relative; overflow: hidden; }
        .product-img-box { width: 100%; aspect-ratio: 4/5; background: var(--soft-bg); overflow: hidden; position: relative; }
        .product-card:hover .product-img-box img { transform: scale(1.08); }
        .product-info-box { display: flex; justify-content: space-between; align-items: flex-start; }
        .product-info-box h4 { font-size: 1.1rem; font-weight: 400; color: inherit; }
        .product-price { font-family: 'Oswald', sans-serif; color: var(--accent); font-weight: 600; }
        .product-card p { font-size: 0.85rem; color: var(--text-muted); font-weight: 300; }
        .add-to-cart-overlay-btn {
            position: absolute; bottom: -60px; left: 0; width: 100%; padding: 15px;
            background: rgba(0,0,0,0.9); color: var(--secondary); font-family: 'Oswald', sans-serif;
            text-align: center; text-transform: uppercase; letter-spacing: 2px; cursor: pointer;
            transition: var(--transition-smooth);
        }
        .product-card:hover .add-to-cart-overlay-btn { bottom: 0; }

        /* SECTION 04 — DARK COMPOSITION */
        .dark-theme-section { background: var(--primary); color: var(--secondary); }
        .dark-theme-section .product-card { background: var(--primary); color: var(--secondary); }
        .dark-theme-section .add-to-cart-overlay-btn { background: rgba(255,255,255,0.9); color: var(--primary); }

        /* SECTION 05 — STICKY SCROLL STORY COMPONENT */
        .sticky-scroll-showcase {
            position: relative; height: 300vh; background: var(--primary);
        }
        .sticky-container-view {
            position: sticky; top: 0; left: 0; width: 100%; height: 100vh;
            overflow: hidden; display: flex; align-items: flex-end; padding: 80px 5%;
        }
        .sticky-bg-img {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 1; background-position: center; background-size: cover;
            transition: background-image 0.8s ease-in-out;
            filter: brightness(0.6);
        }
        .stacked-cards-wrapper {
            position: relative; z-index: 2; width: 360px; height: 420px;
            display: flex; flex-direction: column; justify-content: flex-end;
        }
        .stacked-product-card {
            background: var(--secondary); color: var(--primary); padding: 25px;
            border-radius: 0px; box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            display: flex; gap: 20px; align-items: center; position: absolute;
            width: 100%; bottom: 0; transform-origin: bottom center;
            transition: var(--transition-smooth); opacity: 0; transform: translateY(50px) scale(0.9);
        }
        .stacked-product-card.active-card {
            opacity: 1; transform: translateY(0) scale(1); z-index: 5;
        }
        .stacked-product-card.past-card {
            opacity: 0.4; transform: translateY(-30px) scale(0.95); z-index: 3;
        }

        /* SECTION 06 — INTERACTIVE CAROUSEL */
        .slider-window { width: 100%; overflow: hidden; margin-top: 40px; position: relative; }
        .slider-track { display: flex; gap: 30px; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); width: max-content; }
        .slider-slide { width: 550px; height: 600px; aspect-ratio: 16/10; overflow: hidden; background: var(--soft-bg); }
        .slider-controls { display: flex; gap: 15px; }
        .slide-arrow {
            width: 50px; height: 50px; border: 1px solid var(--primary);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: var(--transition-fast);
        }
        .slide-arrow:hover { background: var(--primary); color: var(--secondary); }
        .slide-arrow.light { border-color: var(--secondary); color: var(--secondary); }
        .slide-arrow.light:hover { background: var(--secondary); color: var(--primary); }

.marquee-overlap-section{
    background: var(--primary);
    color: var(--secondary);
    height: 100vh;
    position: relative;
    overflow: hidden;
    display:flex;
    align-items:center;
}

.marquee-wrapper{
    width:100%;
    overflow:hidden;
}

.oversized-outline-marquee{
    display:inline-block;
    white-space:nowrap;
    font-size:16vw;
    font-weight:700;
    font-family:'Oswald',sans-serif;
    color:transparent;
    -webkit-text-stroke:1px rgb(255, 255, 255);
    text-transform:uppercase;

    animation: marqueeMove 20s linear infinite;
}

@keyframes marqueeMove{
    from{
        transform:translateX(100%);
    }
    to{
        transform:translateX(-100%);
    }
}

.overlapping-image-card{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:400px;
    height:600px;
    background:var(--soft-bg);
    z-index:5;
    overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.5);
}
        /* SECTION 08 — GSAP PARALLAX FLOW CARDS */
.parallax-cards-row{
    display:flex;
    justify-content:center;
    gap:40px;
    padding:80px 0;
    overflow:hidden;
}

.floating-parallax-card{
    flex:0 0 320px;
    background:var(--soft-bg);
    padding:30px;
    transition:transform .1s linear;
    will-change:transform;
}

.floating-parallax-card img{
    width:100%;
    height:200px;
    object-fit:cover;
}

.floating-parallax-card:nth-child(even){
    margin-top:80px;
}        
        /* SECTION 10 — MASONRY COMPOSITION */
        .magazine-masonry-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 50px;
        }
        .masonry-item { background: var(--soft-bg); overflow: hidden; }
        .masonry-item.tall { grid-row: span 2; aspect-ratio: 2/3; }
        .masonry-item.wide { grid-column: span 2; aspect-ratio: 16/10; }
        .masonry-item.square { aspect-ratio: 1/1; }

        /* --- IMMERSIVE FOOTER DESIGN --- */
        footer { background: var(--primary); color: var(--secondary); padding: 100px 5% 40px 5%; position: relative; }
        .footer-huge-outline-text {
            font-size: 12vw; font-weight: 700; color: transparent;
            -webkit-text-stroke: 2px rgba(255,255,255,0.08); text-transform: uppercase;
            font-family: 'Oswald', sans-serif; line-height: 0.9; margin-bottom: 60px;
        }
        .footer-main-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) 2fr; gap: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 60px; }
        .footer-column h4 { font-size: 1.1rem; font-weight: 400; margin-bottom: 25px; color: var(--accent); }
        .footer-column ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
        .footer-column ul a { color: rgba(255,255,255,0.6); font-size: 0.9rem; font-weight: 300; }
        .footer-column ul a:hover { color: var(--secondary); padding-left: 5px; }
        
        .newsletter-box input {
            width: 100%; padding: 15px; background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1); color: var(--secondary);
            font-family: 'Open Sans', sans-serif; margin-bottom: 15px; outline: none;
        }
        .newsletter-box input:focus { border-color: var(--accent); }
        
        .footer-bottom-bar { display: flex; justify-content: space-between; align-items: center; padding-top: 40px; font-size: 0.85rem; color: rgba(255,255,255,0.4); }
        .social-row { display: flex; gap: 20px; font-size: 1.1rem; }
        .social-row a { color: rgba(255,255,255,0.6); }
        .social-row a:hover { color: var(--accent); }

        /* RESPONSIVE SYSTEM REFINEMENTS */
        @media (max-width: 1200px) {
            .grid-3 { grid-template-columns: repeat(2, 1fr); }
            .footer-main-grid { grid-template-columns: repeat(3, 1fr); }
            .luxury-heading { font-size: 2.8rem; }
        }
        @media (max-width: 768px) {
            .grid-3, .grid-2, .hero-top-grid, .sec-02-layout, .sec-02-grid, .magazine-masonry-grid { grid-template-columns: 1fr; }
            .footer-main-grid { grid-template-columns: 1fr; }
            .luxury-heading { font-size: 2.2rem; }
            .w-space { padding: 80px 0; }
            #cart-panel { width: 100%; right: -100%; }
        }