/* ==========================================================================

           1. RESETS & LENIS

           ========================================================================== */

        html.lenis, html.lenis body { height: auto; }

        .lenis.lenis-smooth { scroll-behavior: auto !important; }

        .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

        .lenis.lenis-stopped { overflow: hidden; }

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

        

        body {

            background-color: #050505;

            color: #ffffff;

            font-family: 'Avenir', 'Avenir Next', sans-serif;

            overflow-x: hidden; cursor: none;

        }



        /* ==========================================================================

           2. GLOBAL CREATIVE EFFECTS

           ========================================================================== */

        /* Animated Film Grain Overlay */

        .film-grain {

            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;

            pointer-events: none; z-index: 9998; opacity: 0.05;

            background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');

        }



        /* Magnetic Custom Cursor */

        .custom-cursor {

            position: fixed; top: 0; left: 0; width: 12px; height: 12px;

            background: #fff; border-radius: 50%; pointer-events: none; z-index: 9999;

            transform: translate(-50%, -50%);

            transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;

            mix-blend-mode: difference;

        }

        .custom-cursor.hover-active {

            width: 90px; height: 90px; background: transparent;

            border: 1px solid rgba(255, 255, 255, 1);

            backdrop-filter: blur(2px); mix-blend-mode: normal;

        }



        /* ==========================================================================

           3. HERO SPLASH

           ========================================================================== */

        .splash-hero {

            position: relative; width: 100vw; height: 100vh;

            display: flex; flex-direction: column; justify-content: center; align-items: center;

            overflow: hidden;

        }

        .video-wrapper {

            position: absolute; top: 0; left: 0; width: 100%; height: 100%;

            z-index: -1; transform-origin: center; will-change: transform;

        }

        .video-wrapper iframe {

            width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh;

            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

        }

        .video-overlay {

            position: absolute; top: 0; left: 0; width: 100%; height: 100%;

            background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8));

        }

        .splash-nav { position: relative; z-index: 2; text-align: center; }

        .brand-title {

            font-size: clamp(3rem, 7vw, 5rem); font-weight: 800;

            letter-spacing: 0.15em; margin-bottom: 2rem; text-transform: uppercase;

        }

        .main-menu ul { list-style: none; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;}

        .main-menu a {

            color: #fff; text-decoration: none; font-size: 0.85rem;

            letter-spacing: 0.2em; text-transform: uppercase; padding: 10px;

        }



        /* ==========================================================================

           4. IMMERSIVE GRIDS (Edge-to-Edge)

           ========================================================================== */

        .content-wrapper { position: relative; z-index: 10; background: #050505; }

        

        .section-header { padding: 8rem 5% 4rem; text-align: center; }

        .section-title {

            font-size: clamp(1rem, 2vw, 1.2rem); letter-spacing: 0.4em;

            text-transform: uppercase; color: #888; font-weight: 400;

        }



        .portfolio-grid { display: grid; width: 100vw; gap: 2px; background: #111; }

        .grid-3x2 { grid-template-columns: repeat(3, 1fr); }

        .grid-2x2 { grid-template-columns: repeat(2, 1fr); }



        .portfolio-item {

            position: relative; aspect-ratio: 16/9; overflow: hidden;

            display: flex; justify-content: center; align-items: center;

            background: #000; text-decoration: none;

        }



        .parallax-inner {

            position: absolute; top: -10%; left: 0; width: 100%; height: 120%; 

            will-change: transform;

        }



        .item-img, .item-video {

            position: absolute; top: 0; left: 0; width: 100%; height: 100%;

            object-fit: cover; transition: opacity 0.6s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);

        }

        .item-img { opacity: 0.5; filter: grayscale(80%); z-index: 1; }

        .item-video { opacity: 0; z-index: 2; transform: scale(1.05); }



        .portfolio-item:hover .item-img { opacity: 0; transform: scale(1.05); }

        .portfolio-item:hover .item-video { opacity: 0.8; transform: scale(1); }



        .overlay-title {

            position: relative; z-index: 10;

            font-size: clamp(2rem, 3.5vw, 4rem); font-weight: 800; text-transform: uppercase;

            color: #ffffff; text-align: center; line-height: 1; margin: 0; padding: 0 20px;

            mix-blend-mode: difference; pointer-events: none;

            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 0.6s;

        }

        .portfolio-item:hover .overlay-title { transform: scale(1.1); letter-spacing: 0.05em; }



        /* ==========================================================================

           5. BRAND STRATEGY (Inherits Theme Fonts)

           ========================================================================== */

        .brand-strategy-box { padding: 10rem 5%; font-family: inherit; text-align: center; border-bottom: 1px solid #111;}

        .brand-strategy-box p { max-width: 800px; margin: 0 auto; color: #aaa; font-size: 1.2rem;}



        /* ==========================================================================

           6. AWARDS MARQUEE

           ========================================================================== */

        .awards-section { padding: 8rem 0; background: #050505; overflow: hidden; border-bottom: 1px solid #111;}

        .marquee-wrapper { width: 100vw; display: flex; overflow: hidden; }

        .marquee-track {

            display: flex; white-space: nowrap; gap: 100px; padding: 0 50px;

            align-items: center; will-change: transform;

        }

        .laurel-item {

            font-size: 2rem; font-weight: 800; letter-spacing: 0.1em; color: transparent;

            -webkit-text-stroke: 1px #fff; text-transform: uppercase; display: flex; align-items: center; gap: 20px;

        }

        .laurel-icon { font-size: 3rem; font-style: normal; -webkit-text-stroke: 0; color: #fff; }



        /* ==========================================================================

           7. POEMS HORIZONTAL SCROLL

           ========================================================================== */

        .poems-pin { width: 100vw; height: 100vh; display: flex; align-items: center; background: #0a0a0a; overflow: hidden;}

        .poems-container { display: flex; height: 60vh; padding: 0 10vw; gap: 5vw; align-items: center;}

        .poem-card {

            min-width: 400px; height: 100%; background: #111; padding: 4rem;

            display: flex; flex-direction: column; justify-content: center;

            border: 1px solid rgba(255,255,255,0.05);

        }

        .poem-card h3 { font-size: 2rem; margin-bottom: 1rem; letter-spacing: 0.1em; text-transform: uppercase;}

        .poem-card p { color: #888; line-height: 1.8; font-size: 1rem; }



        /* ==========================================================================

           8. ABOUT & CONTACT

           ========================================================================== */

        .about-section { padding: 10rem 5%; background: #050505; }

        .about-grid {

            max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 4rem;

        }

        .about-title { font-size: 4rem; text-transform: uppercase; line-height: 1; position: sticky; top: 100px;}

        .about-content p { font-size: 1.2rem; line-height: 1.8; color: #ccc; margin-bottom: 2rem; font-weight: 300;}

        

        .contact-section { padding: 15rem 5%; text-align: center; background: #000; }

        .contact-title { font-size: clamp(3rem, 10vw, 8rem); font-weight: 800; text-transform: uppercase; margin-bottom: 2rem;}

        .contact-email { font-size: 1.5rem; color: #fff; text-decoration: none; letter-spacing: 0.2em; border-bottom: 1px solid #fff; padding-bottom: 5px;}



        @media (max-width: 1024px) {

            .grid-3x2 { grid-template-columns: repeat(2, 1fr); }

            .about-grid { grid-template-columns: 1fr; }

            .about-title { position: relative; top: 0; margin-bottom: 2rem; }

        }

        @media (max-width: 768px) {

            .grid-3x2, .grid-2x2 { grid-template-columns: 1fr; }

            .poem-card { min-width: 80vw; }

        }

/* ==========================================================================
   UPDATED NAVIGATION PLACEMENT
   ========================================================================== */
.standalone-nav-wrapper {
    position: relative;
    z-index: 10;
    background-color: #050505; /* Matches the content-wrapper background */
    padding: 6rem 5% 2rem; /* Creates the breathing room above the grid */
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Optional: subtle separator */
}

/* Ensure the title scales properly without the hero context */
.brand-title {
    font-size: clamp(3rem, 7vw, 5rem); 
    font-weight: 800;
    letter-spacing: 0.15em; 
    margin-bottom: 2rem; 
    text-transform: uppercase;
}

/* Keep the menu formatting */
.main-menu ul { 
    list-style: none; 
    display: flex; 
    gap: 20px; 
    justify-content: center; 
    flex-wrap: wrap;
}
.main-menu a {
    color: #fff; 
    text-decoration: none; 
    font-size: 0.85rem;
    letter-spacing: 0.2em; 
    text-transform: uppercase; 
    padding: 10px;
}