:root {
            --primary-red: #CF0F0F;
            --black: #000000;
            --white: #FFFFFF;
        }

        body {
            font-family: 'PT Sans', sans-serif;
            background-color: var(--white);
            color: var(--black);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4, .editorial-font {
            font-family: 'Roboto Condensed', sans-serif;
            text-transform: uppercase;
            line-height: 0.9;
        }

        /* STAGGERED VERTICAL HEADER */
        .vertical-header {
            position: fixed;
            right: 0;
            top: 0;
            height: 100vh;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            pointer-events: none;
        }

        .header-item {
            pointer-events: auto;
            background: var(--white);
            color: var(--black);
            border: 1px solid var(--black);
            padding: 15px 30px;
            font-family: 'Roboto Condensed', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 14px;
            transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            display: block;
            width: fit-content;
            margin-bottom: -1px; /* Overlap borders */
        }

        /* The staggered effect requested */
        .nav-home { margin-left: 120px; width: 200px; }
        .nav-services { margin-left: 80px; width: 180px; }
        .nav-case { margin-left: 40px; width: 160px; }
        .nav-contact { margin-left: 60px; width: 170px; }

        .header-item:hover {
            background: var(--primary-red);
            color: var(--white);
            padding-left: 50px;
        }

        .logo-box {
                        position: fixed;

            background: var(--black);
            color: var(--white);
            padding: 10px;
            width: 200px;
            font-weight: 900;
            font-size: 24px;
            margin-bottom: 10px;
            pointer-events: auto;
        }

        /* HERO SPLIT */
        .hero-container {
            display: flex;
            height: 100vh;
            width: 100%;
            margin-left: 0;
        }

        .hero-left {
            width: 70%;
            position: relative;
            background: #111;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .hero-right {
            width: 30%;
            background: var(--primary-red);
            display: flex;
            align-items: flex-end;
            padding: 40px;
            color: var(--white);
            border-left: 1px solid var(--black);
        }

        /* MARQUEE */
        .marquee {
            white-space: nowrap;
            overflow: hidden;
            background: transparent;
        }

        .marquee-inner {
            display: inline-block;
            animation: marquee 15s linear infinite;
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* COLOR CHANGE ANIMATION */
        .color-reveal span {
            transition: color 0.5s ease;
        }
        .color-reveal:hover span {
            color: var(--primary-red);
        }

        /* STRIP ROWS */
        .strip-row {
            border-top: 1px solid rgba(255,255,255,0.2);
            padding: 80px 0;
            display: grid;
            grid-template-cols: 1fr 1fr;
            gap: 40px;
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* MOBILE MENU */
        #mobile-nav {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: var(--primary-red);
            z-index: 2000;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .hamburger {
            display: none;
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 2100;
            background: var(--black);
            color: var(--white);
            padding: 10px;
            cursor: pointer;
        }

        @media (max-width: 1024px) {
            .vertical-header { display: none; }
            .hamburger { display: block; }
            .hero-container { flex-direction: column; height: auto; }
            .hero-left, .hero-right { width: 100%; height: auto; min-height: 500px; }
            .strip-row { grid-template-cols: 1fr; }
        }

        .page-view { display: none; }
        .page-view.active { display: block; }
        
        /* Smooth transition for pages */
        .fade-in { animation: fadeIn 0.5s ease-in forwards; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }