/* ─── TOKENS ──────────────────────────────────────────── */
        :root {
            --ink:     #0d0d0d;
            --paper:   #f5f0e8;
            --warm:    #ede7d9;
            --copper:  #b87333;
            --copper2: #d4956a;
            --dust:    #7a7167;
            --white:   #ffffff;
            --ease:    cubic-bezier(0.76, 0, 0.24, 1);
            --slow:    0.9s var(--ease);
        }

        /* ─── RESET ───────────────────────────────────────────── */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; font-size: 16px; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--paper);
            color: var(--ink);
            overflow-x: hidden;
            cursor: none;
        }

        a { text-decoration: none; color: inherit; }
        img { display: block; max-width: 100%; }
        h1,h2,h3,h4 { font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.1; }

        /* ─── CUSTOM CURSOR ────────────────────────────────────── */
        .cursor-dot {
            position: fixed;
            width: 8px; height: 8px;
            background: var(--copper);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transition: transform 0.1s;
            transform: translate(-50%, -50%);
            will-change: transform;
        }
        .cursor-ring {
            position: fixed;
            width: 36px; height: 36px;
            border: 1px solid var(--copper);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            transition: transform 0.25s var(--ease), width 0.3s, height 0.3s, border-color 0.3s;
            transform: translate(-50%, -50%);
            will-change: transform, width, height;
        }
        body:has(a:hover) .cursor-ring,
        body:has(button:hover) .cursor-ring {
            width: 60px; height: 60px;
            border-color: var(--copper2);
        }

        /* Disable custom cursor on touch devices */
        @media (hover: none) and (pointer: coarse) {
            .cursor-dot, .cursor-ring {
                display: none !important;
            }
            body, a, button, .p-card, .gallery-item, .contact-modal-close, .lightbox-close, .lightbox-prev, .lightbox-next, .form-btn {
                cursor: auto !important;
            }
        }

        /* ─── TOP NAVIGATION ──────────────────────────────────── */
        .expo-item-icon {
            flex-shrink: 0;
            width: 44px; height: 44px;
            background: var(--ink);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--copper);
            font-size: 1rem;
            overflow: hidden;
            border-radius: 50%;
        }

        .expo-item-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.8rem 4rem;
            transition: padding 0.4s var(--ease), background 0.4s var(--ease), border-bottom 0.4s var(--ease);
        }

        .nav.nav-scrolled {
            padding: 1.2rem 4rem;
            background: rgba(245, 240, 232, 0.95); /* Slightly more opaque for better performance */
            backdrop-filter: blur(8px); /* Reduced blur for performance */
            -webkit-backdrop-filter: blur(8px);
            border-bottom: 1px solid rgba(13, 13, 13, 0.05);
            mix-blend-mode: normal !important;
        }

        .nav.nav-scrolled.nav-light {
            background: rgba(13, 13, 13, 0.95);
            border-bottom: 1px solid rgba(245, 240, 232, 0.1);
        }

        .nav.nav-scrolled .nav-logo,
        .nav.nav-scrolled .nav-links a,
        .nav.nav-scrolled .nav-cta {
            mix-blend-mode: normal !important;
            text-shadow: none;
        }

        .nav.nav-scrolled .nav-links a {
            color: var(--dust);
        }

        .nav.nav-scrolled.nav-light .nav-links a {
            color: rgba(245, 240, 232, 0.7);
        }

        .nav.nav-scrolled .nav-logo,
        .nav.nav-scrolled .nav-cta {
            color: var(--ink);
        }

        .nav.nav-scrolled.nav-light .nav-logo,
        .nav.nav-scrolled.nav-light .nav-cta {
            color: var(--paper);
        }

        .nav-logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.1rem;
            letter-spacing: 0.12em;
            font-weight: 400;
            color: #fff;
            mix-blend-mode: difference;
            text-shadow: 0 1px 1px rgba(0,0,0,0.1);
        }

        .nav-links {
            display: flex;
            gap: 3rem;
            list-style: none;
        }

        .nav-links a {
            font-size: 0.75rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #fff;
            position: relative;
            padding-bottom: 2px;
            mix-blend-mode: difference;
            text-shadow: 0 1px 1px rgba(0,0,0,0.1);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0;
            height: 1px;
            width: 0;
            background: var(--copper);
            transition: width 0.4s var(--ease);
        }

        .nav-links a:hover { color: var(--copper); }
        .nav-links a:hover::after { width: 100%; }

        .nav-cta {
            font-size: 0.75rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #fff;
            border-bottom: 1px solid var(--copper);
            padding-bottom: 2px;
            transition: color 0.3s, border-color 0.3s;
            mix-blend-mode: difference;
            text-shadow: 0 1px 1px rgba(0,0,0,0.1);
        }
        .nav-cta:hover { color: var(--copper); }

        /* ─── LIGHT NAVIGATION (For dark headers) ── */
        .nav.nav-light { mix-blend-mode: normal !important; }
        .nav.nav-light .nav-logo { color: var(--paper); }
        .nav.nav-light .nav-links a { color: rgba(245,240,232,0.6); }
        .nav.nav-light .nav-links a:hover, .nav.nav-light .nav-links a.active { color: var(--paper); }
        .nav.nav-light .nav-links a::after { background: var(--paper); }
        .nav.nav-light .nav-cta { color: var(--paper); border-color: rgba(245,240,232,0.4); }
        .nav.nav-light .nav-cta:hover { color: var(--copper); border-color: var(--copper); }

        /* ─── HERO ────────────────────────────────────────────── */
        .hero {
            position: relative;
            min-height: 100vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .hero-text {
            display: flex;
            flex-direction: column;
            justify-content: center; /* Changed from flex-end to handle long text and margins better */
            padding: 8rem 4rem 12rem 4rem !important; /* Increased padding */
            position: relative;
            z-index: 2;
            background: var(--paper);
        }

        .hero-eyebrow {
            font-size: 0.7rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--copper);
            margin-bottom: 2rem;
            opacity: 0;
            animation: fadeUp 1s var(--ease) 0.3s forwards;
        }

        .hero-title {
            font-size: clamp(3.5rem, 7vw, 6.5rem);
            line-height: 1.0;
            color: var(--ink);
            opacity: 0;
            animation: fadeUp 1s var(--ease) 0.5s forwards;
        }

        .hero-title em {
            font-style: italic;
            color: var(--copper);
        }

        .hero-sub {
            margin-top: 2.5rem;
            margin-bottom: 3rem;
            font-size: 1rem;
            color: var(--dust);
            max-width: 380px;
            line-height: 1.7;
            font-weight: 300;
            opacity: 0;
            animation: fadeUp 1s var(--ease) 0.7s forwards;
        }

        .hero-actions {
            display: flex;
            gap: 2rem;
            align-items: center;
            margin-top: 3rem;
            opacity: 0;
            animation: fadeUp 1s var(--ease) 0.9s forwards;
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--ink);
            color: var(--paper);
            font-size: 0.75rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            padding: 1rem 2rem;
            border: none;
            cursor: none;
            transition: background 0.4s, color 0.4s;
        }
        .btn-primary:hover { background: var(--copper); }

        .btn-ghost {
            font-size: 0.75rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--dust);
            border-bottom: 1px solid currentColor;
            padding-bottom: 2px;
            transition: color 0.3s;
        }
        .btn-ghost:hover { color: var(--copper); }

        .hero-image {
            position: relative;
            overflow: hidden;
        }

        .hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(15%) contrast(1.05);
            transform: scale(1.03);
            background: #1a1a1a; /* Placeholder */
            animation: slowZoom 8s var(--ease) forwards;
        }

        .hero-scroll {
            position: absolute;
            bottom: 3rem;
            right: 4rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            z-index: 3;
        }

        .hero-scroll span {
            font-size: 0.65rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--dust);
            writing-mode: vertical-rl;
        }

        .hero-scroll-line {
            width: 1px;
            height: 60px;
            background: linear-gradient(to bottom, var(--copper), transparent);
            animation: scrollPulse 2s ease infinite;
        }

        /* ─── MARQUEE STRIP ───────────────────────────────────── */
        .marquee-strip {
            background: var(--ink);
            color: var(--paper);
            padding: 1rem 0;
            overflow: hidden;
            white-space: nowrap;
        }

        .marquee-inner {
            display: inline-flex;
            animation: marquee 20s linear infinite;
        }

        .marquee-item {
            display: inline-flex;
            align-items: center;
            gap: 2rem;
            padding: 0 2rem;
            font-size: 0.7rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--dust);
        }

        .marquee-item span { color: var(--copper); font-size: 1rem; }

        /* ─── ABOUT ───────────────────────────────────────────── */
        .about {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 85vh;
        }

        .about-image {
            position: relative;
            overflow: hidden;
        }

        .about-image img {
            width: 100%; height: 100%;
            object-fit: cover;
            filter: grayscale(20%);
            transition: transform 0.8s var(--ease);
        }

        .about-image:hover img { transform: scale(1.04); }

        .about-year {
            position: absolute;
            bottom: 3rem; right: -2rem;
            font-family: 'Playfair Display', serif;
            font-size: 8rem;
            font-weight: 900;
            color: transparent;
            -webkit-text-stroke: 1px rgba(0,0,0,0.08);
            line-height: 1;
            pointer-events: none;
        }

        .about-content {
            background: var(--warm);
            padding: 7rem 5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .section-label {
            font-size: 0.65rem;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            color: var(--copper);
            margin-bottom: 2rem;
        }

        .about-headline {
            font-size: clamp(2rem, 4vw, 3.5rem);
            line-height: 1.1;
            margin-bottom: 2.5rem;
        }

        .about-headline em { color: var(--copper); font-style: italic; }

        .about-body {
            font-size: 1rem;
            color: var(--dust);
            line-height: 1.85;
            font-weight: 300;
            max-width: 480px;
        }

        .about-body p + p { margin-top: 1.25rem; }

        .about-stats {
            display: flex;
            gap: 4rem;
            margin-top: 4rem;
            padding-top: 3rem;
            border-top: 1px solid rgba(0,0,0,0.1);
        }

        /* Removed empty ruleset for .stat-item */

        .stat-num {
            font-family: 'Playfair Display', serif;
            font-size: 3rem;
            font-weight: 700;
            color: var(--copper);
            line-height: 1;
        }

        .stat-desc {
            font-size: 0.7rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--dust);
            margin-top: 0.5rem;
        }

        /* ─── PORTFOLIO SECTION ───────────────────────────────── */
        .portfolio {
            padding: 8rem 4rem;
            background: var(--paper);
        }

        .portfolio-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-bottom: 5rem;
        }

        .portfolio-title { font-size: clamp(2.5rem, 5vw, 4.5rem); }

        .portfolio-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 2rem;
            width: 100%;
        }

        .portfolio-filter-btn {
            background: none;
            border: 1px solid rgba(0,0,0,0.12);
            font-family: 'DM Sans', sans-serif;
            font-size: 0.65rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--dust);
            padding: 0.6rem 1.5rem;
            cursor: none;
            transition: all 0.3s;
        }

        .portfolio-filter-btn:hover,
        .portfolio-filter-btn.active {
            background: var(--ink);
            color: var(--paper);
            border-color: var(--ink);
        }

        .portfolio-intro {
            max-width: 340px;
            font-size: 0.9rem;
            color: var(--dust);
            line-height: 1.7;
            font-weight: 300;
            padding-bottom: 0.5rem;
        }

        /* Asymmetric masonry grid */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: auto;
            gap: 1.5rem;
        }

        .p-card {
            position: relative;
            overflow: hidden;
            cursor: none;
        }

        .p-card:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 3; min-height: 560px; }
        .p-card:nth-child(2) { grid-column: 7 / 10; grid-row: 1; min-height: 260px; }
        .p-card:nth-child(3) { grid-column: 10 / 13; grid-row: 1; min-height: 260px; }
        .p-card:nth-child(4) { grid-column: 7 / 10; grid-row: 2; min-height: 280px; }
        .p-card:nth-child(5) { grid-column: 10 / 13; grid-row: 2; min-height: 280px; }
        
        /* Render all subsequent cards uniformly large */
        .p-card:nth-child(n+6) {
            grid-column: span 4;
            min-height: 380px;
        }

        .p-card img {
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.9s var(--ease), filter 0.6s;
            filter: grayscale(10%);
        }

        .p-card:hover img {
            transform: scale(1.07);
            filter: grayscale(0%) brightness(0.7);
        }

        .p-card-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 2.5rem;
            background: linear-gradient(to top, rgba(13,13,13,0.75) 0%, transparent 55%);
            opacity: 0;
            transition: opacity 0.5s;
        }

        .p-card:hover .p-card-overlay { opacity: 1; }

        .p-card-cat {
            font-size: 0.65rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--copper2);
            margin-bottom: 0.5rem;
        }

        .p-card-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            color: var(--white);
            line-height: 1.1;
        }

        .p-card-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
            font-size: 0.7rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--copper2);
            border-bottom: 1px solid var(--copper2);
            padding-bottom: 2px;
            width: fit-content;
        }

        /* ─── PHILOSOPHY / QUOTE ──────────────────────────────── */
        .philosophy {
            background: var(--ink);
            padding: 10rem 8rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8rem;
            align-items: center;
        }

        .philosophy-quote {
            font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 3.5vw, 3rem);
            font-style: italic;
            color: var(--paper);
            line-height: 1.4;
            position: relative;
        }

        .philosophy-quote::before {
            content: '\201C';
            font-size: 10rem;
            color: var(--copper);
            position: absolute;
            top: -4rem; left: -2rem;
            line-height: 1;
            opacity: 0.3;
            font-style: normal;
        }

        /* Removed empty ruleset for .philosophy-text */

        .philosophy-text .section-label { margin-bottom: 2.5rem; }

        .philosophy-text p {
            font-size: 1rem;
            color: rgba(245,240,232,0.55);
            line-height: 1.85;
            font-weight: 300;
        }

        .philosophy-text p + p { margin-top: 1.5rem; }

        .philosophy-sig {
            margin-top: 3rem;
            font-family: 'DM Serif Display', serif;
            font-size: 1.5rem;
            color: var(--copper);
            font-style: italic;
        }

        /* ─── CONTACT ─────────────────────────────────────────── */
        .contact {
            padding: 8rem 4rem;
            background: var(--warm);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6rem;
            align-items: start;
        }

        /* Removed empty ruleset for .contact-left */

        .contact-headline {
            font-size: clamp(3rem, 5.5vw, 5rem);
            line-height: 1.05;
            margin-top: 1.5rem;
        }

        .contact-headline em { font-style: italic; color: var(--copper); }

        .contact-desc {
            margin-top: 2rem;
            font-size: 1rem;
            color: var(--dust);
            line-height: 1.85;
            max-width: 420px;
        }

        .contact-links {
            margin-top: 3rem;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .contact-link-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            padding-bottom: 1.25rem;
            font-size: 0.85rem;
        }

        .contact-link-label { color: var(--dust); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.65rem; }
        .contact-link-value { color: var(--ink); font-size: 0.95rem; }
        .contact-link-row i { color: var(--copper); }

        /* Removed empty ruleset for .contact-right */

        /* ─── FORM ────────────────────────────────────────────── */
        .contact-form-inline {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .form-field {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .form-field label {
            font-size: 0.65rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--dust);
        }

        .form-field input,
        .form-field textarea,
        .form-field select {
            background: transparent;
            border: none;
            border-bottom: 1px solid rgba(0,0,0,0.2);
            color: var(--ink);
            font-family: 'DM Sans', sans-serif;
            font-size: 1rem;
            padding: 0.75rem 0;
            outline: none;
            transition: border-color 0.3s;
            resize: none;
        }

        .form-field select option { background: var(--warm); }
        .form-field input:focus,
        .form-field textarea:focus,
        .form-field select:focus { border-bottom-color: var(--copper); }

        .form-field input::placeholder,
        .form-field textarea::placeholder { color: rgba(13,13,13,0.25); }

        .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

        .form-btn {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            background: var(--ink);
            color: var(--paper);
            border: none;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.75rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            padding: 1.1rem 2.5rem;
            cursor: none;
            transition: background 0.4s;
        }
        .form-btn:hover { background: var(--copper); }

        /* ─── FOOTER ──────────────────────────────────────────── */
        footer {
            background: var(--ink);
            color: var(--paper);
            padding: 4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .footer-logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.1rem;
            letter-spacing: 0.1em;
        }

        .footer-center {
            text-align: center;
            font-size: 0.7rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(245,240,232,0.35);
        }

        .footer-social {
            display: flex;
            gap: 1.5rem;
        }

        .footer-social a {
            color: rgba(245,240,232,0.4);
            font-size: 1rem;
            transition: color 0.3s;
        }
        .footer-social a:hover { color: var(--copper); }

        /* ─── CONTACT MODAL (kept from main) ─────────────────── */
        .contact-modal {
            position: fixed; inset: 0;
            z-index: 3000;
            display: flex; align-items: center; justify-content: center;
            background: rgba(13,13,13,0.88);
            backdrop-filter: blur(10px);
            opacity: 0; visibility: hidden;
            transition: opacity 0.5s var(--ease), visibility 0.5s;
        }
        .contact-modal.active { opacity: 1; visibility: visible; }

        .contact-modal-inner {
            position: relative;
            background: var(--paper);
            padding: 4rem;
            width: min(680px, 92vw);
            max-height: 92vh;
            overflow-y: auto;
        }

        .contact-modal-close {
            position: absolute; top: 1.5rem; right: 2rem;
            background: none; border: none;
            font-size: 1.5rem; color: var(--dust); cursor: none;
            transition: color 0.3s;
        }
        .contact-modal-close:hover { color: var(--copper); }

        /* ─── ANIMATIONS ──────────────────────────────────────── */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(30px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes slowZoom {
            from { transform: scale(1.05); }
            to   { transform: scale(1); }
        }

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

        @keyframes scrollPulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; }
        }

        /* ─── REVEAL ON SCROLL ────────────────────────────────── */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
        }
        .reveal.visible { opacity: 1; transform: translateY(0); }

        /* ─── HORIZONTAL RULE ─────────────────────────────────── */
        .sep {
            display: block;
            width: 40px; height: 2px;
            background: var(--copper);
            margin: 2rem 0;
        }

        /* ─── RESPONSIVE ──────────────────────────────────────── */
        @media (max-width: 1024px) {
            .hero { grid-template-columns: 1fr; }
            .hero-image { display: none; }
            .hero-text { padding: 10rem 2rem 5rem; }
            .about { grid-template-columns: 1fr; }
            .about-image { height: 400px; }
            .about-content { padding: 4rem 2rem; }
            .philosophy { grid-template-columns: 1fr; padding: 6rem 2rem; gap: 4rem; }
            .portfolio { padding: 5rem 2rem; }
            .portfolio-grid { grid-template-columns: 1fr 1fr; }
            .p-card:nth-child(1) { grid-column: 1 / 3; grid-row: auto; }
            .p-card:nth-child(2),
            .p-card:nth-child(3),
            .p-card:nth-child(4),
            .p-card:nth-child(5),
            .p-card:nth-child(n+6) { grid-column: auto; grid-row: auto; min-height: 300px; }
            .contact { grid-template-columns: 1fr; padding: 5rem 2rem; gap: 4rem; }
            .portfolio-header { flex-direction: column; align-items: flex-start; gap: 2rem; }
            .nav { padding: 1.5rem 2rem; }
            .nav-links { display: none; }
            footer { flex-direction: column; gap: 2rem; text-align: center; }
        }

        /* ─── PROJECT PAGES ───────────────────────────────────── */
        .project-hero {
            padding: 12rem 4rem 6rem;
            background: var(--paper);
            text-align: center;
            position: relative;
        }

        .project-hero.hero-dark-mode {
            color: var(--white);
            background: var(--ink); /* Fallback if no image */
        }

        .project-hero.hero-dark-mode .project-hero-title {
            color: var(--white);
            text-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }

        .project-hero.hero-dark-mode .project-hero-label {
            color: var(--copper);
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .project-hero.hero-dark-mode .project-hero-desc {
            color: rgba(255,255,255,0.8);
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .project-hero-label {
            font-size: 0.65rem;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            color: var(--copper);
            margin-bottom: 2rem;
            display: block;
        }

        .project-hero-title {
            font-size: clamp(3.5rem, 8vw, 7rem);
            margin-bottom: 1.5rem;
            color: var(--ink);
            line-height: 1;
        }

        .project-hero-desc {
            max-width: 600px;
            margin: 0 auto;
            color: var(--dust);
            font-size: 1.1rem;
            line-height: 1.8;
            font-weight: 300;
        }

        .gallery-masonry {
            column-count: 3;
            column-gap: 2rem;
            padding: 0 4rem 8rem;
            background: var(--paper);
        }

        @media (max-width: 1024px) {
            .gallery-masonry { column-count: 2; padding: 0 2rem 5rem; }
            .project-hero { padding: 9rem 2rem 4rem; }
        }
        @media (max-width: 600px) {
            .gallery-masonry { column-count: 1; }
        }

        .gallery-item {
            break-inside: avoid;
            margin-bottom: 2rem;
            cursor: none;
        }

        .gallery-item img {
            width: 100%;
            height: auto;
            display: block;
            background: #1a1a1a; /* Placeholder for CLS */
            transition: filter 0.4s;
        }
        .gallery-item:hover img {
            filter: grayscale(100%);
        }

        /* ─── LIGHTBOX ────────────────────────────────────────── */
        .lightbox {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(13,13,13,0.98);
            z-index: 4000;
        }

        .lightbox.active { display: flex; align-items: center; justify-content: center; }

        .lightbox-img {
            display: block;
            max-width: calc(100vw - 8rem);
            max-height: calc(100vh - 8rem);
            width: auto;
            height: auto;
            object-fit: contain;
            user-select: none;
        }

        .lightbox-close, .lightbox-prev, .lightbox-next {
            position: absolute;
            background: none;
            border: none;
            color: rgba(245,240,232,0.5);
            cursor: pointer;
            transition: color 0.3s;
            padding: 1.5rem;
            z-index: 4001;
        }
        .lightbox-close { top: 0.5rem; right: 0.5rem; font-size: 2.5rem; }
        .lightbox-prev { left: 0; top: 50%; transform: translateY(-50%); font-size: 2rem; }
        .lightbox-next { right: 0; top: 50%; transform: translateY(-50%); font-size: 2rem; }

        .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { color: var(--copper); }
        
        .lightbox-counter { display: none; }
        
        @media (max-width: 600px) {
            .lightbox-img {
                max-width: calc(100vw - 5rem);
                max-height: calc(100vh - 5rem);
            }
        }