/* --- 1. RESET & BASE --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            cursor: none;
        }

        :root {
            --bg-color: #ffffff;
            --text-color: #000000;
            --meta-label-color: #919191;
            --hr-color: rgba(0, 0, 0, 0.08);
            --tagline-color: #707070;
            --top-fade: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
        }

        html,
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
            overflow-x: hidden;
            overflow-y: auto !important;
            height: auto !important;
            touch-action: auto !important;
            transition: background 0.5s ease, color 0.5s ease;
        }

        /* --- 2. NAVIGATION & TOP FADE --- */
        .top-nav-fade {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 120px;
            background: var(--top-fade);
            z-index: 1500;
            pointer-events: none;
        }

        .back-btn-center {
            position: fixed;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 18px;
            color: var(--text-color);
            text-decoration: none;
            z-index: 2100;
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
            transition: opacity 0.2s ease;
            pointer-events: auto;
        }

        .back-btn-center:hover {
            opacity: 0.5;
        }

        #work-list {
            position: fixed;
            top: 60px; /* Aligned to Work page sidebar */
            left: 16px; /* Match Navbar left padding */
            z-index: 2000;
        }

        .section-label {
            display: none;
        }

        #work-list ul {
            list-style: none;
        }

        #work-list li {
            font-size: 18px;
            font-weight: 500;
            line-height: 1.6;
        }

        #work-list a {
            text-decoration: none;
            color: var(--text-color);
            transition: opacity 0.2s ease;
        }

        #work-list a:hover {
            opacity: 0.5;
        }

        .active-link {
            text-decoration: underline !important;
            text-underline-offset: 4px;
        }

        /* --- 3. LAYOUT & CONTENT --- */
        #main-content {
            display: flex;
            justify-content: flex-start; /* Removed center-alignment */
            width: 100%;
        }

        .case-study-container {
            width: 55vw;
            max-width: 1000px;
            margin-left: 350px; /* Matched to Work page grid */
            padding-top: 60px; /* Align top with list items */
            padding-bottom: 20vh;
            display: flex;
            flex-direction: column;
        }

        .case-study-container a:hover {
            opacity: 0.5;
        }

        h1 {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 20px;
            letter-spacing: -0.01em;
            line-height: 1.1;
        }

        .body-text {
            font-size: 18px;
            line-height: 1.5;
            color: var(--text-color);
            margin-bottom: 24px;
        }

        .meta-grid {
            display: grid;
            grid-template-columns: 80px 1fr;
            gap: 10px 40px;
            margin: 40px 0 50px 0; /* Reduced bottom margin from 80px to 50px */
        }

        .meta-label {
            font-size: 18px;
            color: var(--meta-label-color);
        }

        .meta-value {
            font-size: 18px;
            color: var(--text-color);
            font-weight: 500;
        }

        h2 {
            font-size: 18px;
            font-weight: 600;
            text-transform: uppercase;
            margin: 50px 0 20px; /* Reduced from 80px */
            letter-spacing: 0.05em;
        }

        hr {
            border: none;
            height: 1px;
            background: var(--hr-color);
            margin: 50px 0; /* Reduced from 80px */
        }

        .media-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
            width: 100%;
            align-items: start;
        }

        .media-row > * {
            width: 100%;
            height: auto;
            margin-bottom: 0 !important;
        }

        /* --- LONG SCROLL (No gaps between images) --- */
        .long-scroll img,
        .long-scroll video,
        .long-scroll .media-row {
            margin-bottom: 0 !important;
            margin-top: 0 !important;
        }
        
        .long-scroll .media-row {
            gap: 0 20px; /* Horizontal gap only */
        }

        .tagline {
            font-size: 18px;
            font-style: italic;
            color: var(--tagline-color);
            margin-bottom: 24px;
        }

        .list-title {
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 15px;
            display: block;
        }

        .two-col-text {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin: 20px 0;
        }

        .quote-box {
            font-size: 24px;
            line-height: 1.4;
            font-weight: 400;
            margin: 80px 0;
            letter-spacing: -0.01em;
        }

        .list-section {
            margin-bottom: 40px;
            list-style: none;
        }

        .list-section li {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-color);
        }

        .list-section li::before {
            content: "• ";
            color: #919191;
            margin-right: 5px;
        }

        /* --- 4. MEDIA & GALLERY --- */
        .case-study-container img {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: 20px;
        }

        .full-img {
            width: 100%;
            height: auto;
            background: #f5f5f5;
            margin-bottom: 20px;
            display: block;
        }

        .img-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin: 20px 0;
        }

        .gallery-item {
            aspect-ratio: 16/10;
            background: #f5f5f5;
            width: 100%;
        }

        /* --- 5. CURSOR STYLES --- */
        #cursor-svg {
            mix-blend-mode: difference;
            pointer-events: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000000;
        }

        #cursor-square-loader {
            mix-blend-mode: difference;
            pointer-events: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            z-index: 1000001;
            display: flex;
            align-items: center;
            justify-content: center;
            will-change: transform;
        }

        #thread-path {
            fill: none;
            stroke: #fff;
            stroke-width: 1.2;
            stroke-linecap: round;
        }


        .loader-rect {
            width: 12px;
            height: 12px;
            border: 1.5px solid #fff;
            background: transparent;
            transition: background-color 0.8s ease;
        }

        body.loaded .loader-rect {
            background-color: #fff;
        }

        #open-project-label {
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 10001;
            display: none;
        }

        /* --- 6. MINI-MAP RAIL --- */
        .nav-rail {
            position: fixed;
            top: 50%;
            right: 45px;
            transform: translateY(-50%);
            width: 60px;
            background: rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.05);
            z-index: 500;
            overflow: hidden;
        }

        #mini-map-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            transform-origin: top left;
            opacity: 0.25;
        }

        #scroll-indicator {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            border: 1px solid #000;
            z-index: 501;
        }

        /* --- 7. GLOBAL DISSOLVE --- */
        @keyframes contentDissolve {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .page-content {
            animation: contentDissolve 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            will-change: opacity, transform;
        }

        /* --- 8. MOBILE & TABLET PORTFOLIO REFACTOR (≤ 1024px) --- */
        @media (max-width: 1024px) {
            #work-list {
                display: none !important;
            }

            .case-study-container {
                width: 100vw !important;
                max-width: 100vw !important;
                padding: 100px 20px 60px 20px !important;
                display: flex;
                flex-direction: column;
                margin: 0;
            }

            h1 {
                font-size: 14px !important;
                margin-bottom: 24px !important;
                font-weight: 600 !important;
                letter-spacing: -0.01em;
                text-transform: uppercase;
            }

            .body-text, 
            .list-section li {
                font-size: 14px !important;
                line-height: 1.5 !important;
                color: #707070 !important;
                margin-bottom: 16px !important;
            }

            .meta-grid {
                display: grid !important;
                grid-template-columns: 80px 1fr !important;
                gap: 10px 20px !important;
                margin: 40px 0 40px 0 !important; /* Reduced from 60px to 40px */
                align-items: baseline !important;
            }

            .meta-label {
                font-size: 13px !important;
                color: #000 !important;
                font-weight: 600 !important;
                text-transform: uppercase;
                letter-spacing: -0.01em;
            }

            .meta-value {
                font-size: 13px !important;
                color: #707070 !important;
                font-weight: 400 !important;
            }

            .case-study-container img,
            .case-study-container .full-img {
                width: 100% !important;
                height: auto !important;
                margin-bottom: 8px !important;
                border-radius: 0 !important;
            }

            .img-grid, .gallery-grid {
                display: flex !important;
                flex-direction: column !important;
                gap: 8px !important;
                margin: 0 0 8px 0 !important;
            }
            
            .img-grid > *, .gallery-grid > * {
                margin-bottom: 0 !important;
            }

            .media-row {
                flex-direction: column !important;
                gap: 8px !important;
            }

            hr {
                margin: 30px 0 !important; /* Reduced from 40px */
            }

            h2 {
                margin: 30px 0 16px !important; /* Reduced from 40px */
            }

            .two-col-text {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
            }

            .quote-box {
                font-size: 18px !important;
                margin: 40px 0 !important;
                line-height: 1.4 !important;
            }

            .tagline {
                font-size: 14px !important;
                margin-bottom: 20px !important;
            }

            /* Ensure all navigational overlays explicitly un-render on touch, but keep cursor potential */
            .nav-rail, .top-nav-fade, .back-btn-center {
                display: none !important;
            }

            * { cursor: auto !important; }

            a, button {
                min-height: 48px;
                min-width: 48px;
                display: inline-flex;
                align-items: center;
                transition: none !important;
            }
        }