:root {
            --bg:         #050505;
            --fg:         #ffffff;
            --muted:      rgba(255,255,255,0.4);
            --accent:     #FF5C8D;
            --ease:       cubic-bezier(0.16, 1, 0.3, 1);
            --font-serif: 'Cormorant Garamond', Georgia, serif;
            --font-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;
        }

        /* ============================================
           SIDE MENU OVERLAY (matches main site)
        ============================================ */
        .nav-menu-btn {
            font-family: var(--font-sans);
            font-size: 0.8rem; letter-spacing: 4px;
            color: var(--muted); cursor: pointer;
            transition: color 0.3s; white-space: nowrap;
            background: none; border: none; padding: 0;
        }
        .nav-menu-btn:hover { color: var(--fg); }

        .menu-backdrop {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
            z-index: 9998; opacity: 0; pointer-events: none; transition: opacity 0.6s;
        }
        .menu-backdrop.active { opacity: 1; pointer-events: auto; }

        .side-menu {
            position: fixed; top: 0; left: -450px; width: 450px; max-width: 100vw; height: 100vh;
            background: rgba(10,10,10,0.98); border-right: 1px solid rgba(255,255,255,0.05);
            box-shadow: 20px 0 50px rgba(0,0,0,0.5); z-index: 9999;
            display: flex; flex-direction: column; justify-content: center;
            padding: 100px 40px; transition: transform 0.6s cubic-bezier(0.25,1,0.5,1);
        }
        .side-menu.active { transform: translateX(450px); }

        .menu-nav-list { display: flex; flex-direction: column; gap: 20px; list-style: none; padding: 0; margin: 0; }
        .menu-item { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s, transform 0.6s; }
        .side-menu.active .menu-item { opacity: 1; transform: translateX(0); }
        .side-menu.active .menu-item:nth-child(1){ transition-delay: 0.1s; }
        .side-menu.active .menu-item:nth-child(2){ transition-delay: 0.2s; }
        .side-menu.active .menu-item:nth-child(3){ transition-delay: 0.3s; }
        .side-menu.active .menu-item:nth-child(4){ transition-delay: 0.4s; }
        .side-menu.active .menu-item:nth-child(5){ transition-delay: 0.5s; }

        .menu-link {
            font-family: var(--font-serif); font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 300;
            color: #fff; display: inline-flex; align-items: center; text-decoration: none;
            transition: color 0.3s, padding-left 0.3s;
        }
        .menu-link:hover { color: #888; padding-left: 15px; font-style: italic; }
        .toggle-icon {
            font-family: var(--font-sans); font-size: clamp(1.2rem,2vw,1.8rem);
            font-style: normal; margin-left: 20px; color: #666; transition: transform 0.3s;
        }
        .submenu {
            max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.25,1,0.5,1);
            display: flex; flex-direction: column; gap: 15px; padding-left: 20px;
        }
        .submenu.open { max-height: 200px; margin-top: 15px; }
        .submenu a {
            font-family: var(--font-sans); font-size: 0.9rem; color: #888;
            text-transform: uppercase; letter-spacing: 3px;
            text-decoration: none; transition: color 0.3s;
        }
        .submenu a:hover { color: #fff; }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body {
            background: var(--bg);
            color: var(--fg);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* ============================================
           FIX: custom.css styles .nav-logo as a coloured square placeholder.
           Override it here so catalog.html just shows plain text.
        ============================================ */
        .nav-logo {
            width: auto !important;
            height: auto !important;
            background: none !important;
            display: inline !important;
        }

        /* ============================================
           TOP NAV
        ============================================ */
        .top-nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 10001;
            pointer-events: none;
            /* Reset menu.css header defaults that bleed in via styles.css */
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
            height: auto !important;
        }
        /* Override: restore pointer events for interactive children */
        .top-nav button, .top-nav a { pointer-events: auto; }

        /* Override custom.css .nav-menu-btn fixed position — catalog uses top-nav */
        .nav-menu-btn {
            position: fixed !important;
            top: 36px !important; left: 36px !important;
            font-family: var(--font-sans);
            font-size: 0.78rem; letter-spacing: 4px;
            color: rgba(255,255,255,0.55); cursor: pointer;
            transition: color 0.3s; white-space: nowrap;
            background: none; border: none; padding: 0;
            pointer-events: auto !important;
            z-index: 10001 !important;
        }
        .nav-menu-btn:hover { color: #fff; }

        /* ============================================
           BOTTOM NAV
        ============================================ */
        .bottom-nav {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            z-index: 90;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            padding: 1.5rem 5% 2.25rem;
            background: linear-gradient(to top, rgba(5,5,5,1) 0%, rgba(5,5,5,0) 100%);
            pointer-events: none;
        }
        .bnav-left  { display: flex; align-items: center; pointer-events: auto; }
        .bnav-center{ display: flex; align-items: center; justify-content: center; pointer-events: auto; }
        .bnav-right { display: flex; align-items: center; justify-content: flex-end; pointer-events: auto; }

        .bnav-btn {
            background: none; border: none; cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-size: 0.65rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.18em;
            color: var(--muted);
            padding: 0.4rem 0.9rem;
            text-decoration: none; display: inline-block;
            position: relative; transition: color 0.3s;
        }
        .bnav-btn::after {
            content: ''; position: absolute;
            bottom: 0; left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 60%; height: 1px;
            background: var(--fg);
            transition: transform 0.4s var(--ease);
        }
        .bnav-btn:hover { color: var(--fg); }
        .bnav-btn.active { color: var(--fg); }
        .bnav-btn.active::after { transform: translateX(-50%) scaleX(1); }
        .bnav-sep { color: rgba(255,255,255,0.15); font-size: 0.55rem; padding: 0 0.15rem; }
        .bnav-exp {
            background: none;
            border: 1px solid rgba(255,255,255,0.16);
            color: var(--muted);
            font-size: 0.58rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.18em;
            cursor: pointer; padding: 0.45rem 1rem;
            font-family: 'Inter', sans-serif; transition: all 0.3s;
        }
        .bnav-exp:hover { border-color: rgba(255,255,255,0.4); color: var(--fg); }

        /* ============================================
           HERO
        ============================================ */
        .hero-section {
            position: relative; width: 100%; height: 100vh;
            display: flex; align-items: flex-end; overflow: hidden;
        }
        .hero-bg {
            position: absolute; inset: 0; z-index: 0;
        }
        .hero-bg video { width: 100%; height: 100%; object-fit: cover; }
        .hero-bg::after {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(to top,
                rgba(5,5,5,1) 0%,
                rgba(5,5,5,0.35) 48%,
                rgba(5,5,5,0.05) 100%);
        }
        .hero-content {
            position: relative; z-index: 10;
            padding: 0 5% 8rem;
        }
        .hero-eyebrow {
            font-size: 0.65rem; font-weight: 600;
            letter-spacing: 0.35em; text-transform: uppercase;
            color: var(--accent); display: block; margin-bottom: 1.25rem;
        }
        .hero-title {
            font-size: clamp(3.5rem, 12vw, 10rem);
            font-weight: 700; letter-spacing: -0.03em;
            text-transform: uppercase; line-height: 0.88;
        }
        .hero-sub {
            margin-top: 1.5rem; font-size: 0.9rem;
            color: rgba(255,255,255,0.5); max-width: 420px; line-height: 1.7;
        }
        .hero-scroll {
            position: absolute; bottom: 2.25rem; right: 5%; z-index: 10;
            font-size: 0.6rem; font-weight: 600; letter-spacing: 0.25em;
            text-transform: uppercase; color: var(--muted);
            display: flex; align-items: center; gap: 0.75rem;
        }
        .hero-scroll::after { content: ''; display: block; width: 36px; height: 1px; background: var(--muted); }

        /* ============================================
           SHARED SECTION WRAPPER
        ============================================ */
        .section-wrap {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 5%;
        }

        /* ============================================
           PROTOTYPE: SPLIT (model + text)
        ============================================ */
        .proto-split-section {
            min-height: 90vh;
            display: flex;
            align-items: center;
            padding: 8rem 5% 6rem;
            position: relative;
        }
        .proto-split-section::before {
            content: ''; position: absolute;
            top: 0; left: 5%; right: 5%;
            height: 1px; background: rgba(255,255,255,0.06);
        }
        .proto-split-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
            width: 100%; max-width: 1400px; margin: 0 auto;
        }
        .proto-split-section.reversed .proto-split-inner {
            direction: rtl;
        }
        .proto-split-section.reversed .proto-split-inner > * {
            direction: ltr;
        }

        /* Text side */
        .proto-caption {
            font-size: 0.6rem; font-weight: 600;
            letter-spacing: 0.32em; text-transform: uppercase;
            color: var(--muted); display: block; margin-bottom: 1.5rem;
        }
        .proto-heading {
            font-size: clamp(3rem, 5.5vw, 5.5rem);
            font-weight: 700; letter-spacing: -0.04em; line-height: 0.9;
            margin-bottom: 2.5rem;
        }
        .proto-body { display: none; } /* superseded by .proto-notes */

        /* Labelled note blocks — replaces bold: pattern */
        .proto-notes {
            display: flex; flex-direction: column;
        }
        .proto-note {
            padding: 1.1rem 0;
            border-top: 1px solid rgba(255,255,255,0.07);
        }
        .proto-note:last-child {
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }
        .proto-note-label {
            display: block;
            font-size: 0.57rem; font-weight: 600;
            letter-spacing: 0.28em; text-transform: uppercase;
            color: var(--accent); margin-bottom: 0.5rem;
        }
        .proto-note p {
            font-size: 0.92rem; line-height: 1.78;
            color: rgba(255,255,255,0.58); margin: 0;
        }
        .proto-meta {
            display: flex; gap: 2.5rem;
            margin-top: 2.5rem; padding-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.07);
        }
        .proto-meta-label {
            font-size: 0.6rem; font-weight: 600;
            letter-spacing: 0.22em; text-transform: uppercase;
            color: var(--muted); display: block; margin-bottom: 0.4rem;
        }
        .proto-meta-value {
            font-size: 1.7rem; font-weight: 700;
            color: var(--accent); letter-spacing: -0.03em; line-height: 1;
        }
        .proto-meta-value.sm { font-size: 1rem; padding-top: 0.4rem; }
        .proto-page-link {
            display: inline-flex; align-items: center; gap: 0.5rem;
            margin-top: 2.5rem;
            font-size: 0.7rem; font-weight: 600;
            letter-spacing: 0.12em; text-transform: uppercase;
            color: var(--fg); text-decoration: none;
            border: 1px solid rgba(255,255,255,0.18); padding: 0.8rem 1.5rem;
            transition: all 0.3s;
        }
        .proto-page-link:hover { border-color: var(--accent); color: var(--accent); }

        /* Model side */
        .proto-model-wrap { height: 60vh; }
        model-viewer {
            width: 100%; height: 100%;
            background-color: transparent !important;
            --poster-color: transparent; outline: none;
        }
        .carousel-controls {
            display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem;
        }
        .carr-btn {
            background: none; border: 1px solid rgba(255,255,255,0.18);
            color: var(--fg); width: 2.2rem; height: 2.2rem;
            border-radius: 50%; display: flex; align-items: center;
            justify-content: center; cursor: pointer; font-size: 0.9rem;
            transition: all 0.25s;
        }
        .carr-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.45); }
        .carr-btn:disabled { opacity: 0.18; cursor: default; }
        .carr-count { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; color: var(--muted); text-transform: uppercase; }
        .carr-label { font-size: 0.7rem; color: rgba(255,255,255,0.3); margin-left: auto; font-style: italic; }

        /* ============================================
           THREE TEXT BOXES
        ============================================ */
        .info-boxes-section {
            padding: 4rem 5%;
        }
        .info-boxes-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            border: 1px solid rgba(255,255,255,0.08);
            max-width: 1400px; margin: 0 auto;
        }
        .info-box {
            padding: 2.5rem 2rem;
            border-right: 1px solid rgba(255,255,255,0.08);
        }
        .info-box:last-child { border-right: none; }
        .info-box-num {
            font-size: 0.6rem; font-weight: 600;
            letter-spacing: 0.25em; text-transform: uppercase;
            color: var(--accent); display: block; margin-bottom: 1.25rem;
        }
        .info-box-title {
            font-size: 1.1rem; font-weight: 700;
            letter-spacing: -0.02em; margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .info-box p {
            font-size: 0.85rem; line-height: 1.75;
            color: rgba(255,255,255,0.5);
        }

        /* ============================================
           VIDEO SECTION
        ============================================ */
        .video-section {
            padding: 6rem 5%;
        }
        .section-label {
            font-size: 0.62rem; font-weight: 600;
            letter-spacing: 0.3em; text-transform: uppercase;
            color: var(--muted); display: block; margin-bottom: 1.5rem;
        }
        .section-heading {
            font-size: clamp(2rem, 4vw, 3.5rem);
            font-weight: 700; letter-spacing: -0.03em; line-height: 1;
            margin-bottom: 1rem;
        }
        .section-sub {
            font-size: 1rem; color: rgba(255,255,255,0.45);
            max-width: 560px; line-height: 1.65; margin-bottom: 2.5rem;
        }
        .video-wrapper {
            position: relative; width: 100%; max-width: 1400px;
            aspect-ratio: 16 / 9;
            background: #111; overflow: hidden;
            border: 1px solid rgba(255,255,255,0.08);
        }
        /* YouTube IFrame API creates an iframe inside the player div */
        .vid-player-div {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
        }
        .vid-player-div iframe {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%; border: none;
            transform: scale(1.22); /* push title bar, bottom bar, & watermarks off all edges */
            pointer-events: none;
        }
        /* Transparent overlay blocks ALL YouTube hover UI (pause button, end cards, etc.) */
        .vid-block-overlay {
            position: absolute; inset: 0; z-index: 10;
            background: transparent;
        }
        /* Sound toggle button — bottom-right corner */
        .vid-sound-btn {
            position: absolute; bottom: 1rem; right: 1rem; z-index: 20;
            background: rgba(5,5,5,0.72);
            border: 1px solid rgba(255,255,255,0.18);
            color: #fff; width: 2.6rem; height: 2.6rem;
            border-radius: 50%; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem; transition: all 0.25s;
            backdrop-filter: blur(10px);
        }
        .vid-sound-btn:hover { border-color: rgba(255,255,255,0.5); background: rgba(5,5,5,0.92); }
        .vid-sound-btn.unmuted { border-color: var(--accent); color: var(--accent); }

        /* ============================================
           P5.JS INTERACTIVE SECTION
        ============================================ */
        .p5-section {
            padding: 6rem 5% 10rem;
        }
        .key-hint {
            display: flex; align-items: center; flex-wrap: wrap;
            gap: 0.5rem; margin-top: 1rem;
            font-size: 0.8rem; color: var(--muted);
        }
        .key-circle {
            display: inline-flex; align-items: center; justify-content: center;
            width: 24px; height: 24px;
            border: 1px solid var(--muted); border-radius: 50%;
            font-size: 0.7rem; color: var(--fg); margin: 0 2px;
        }
        .sketch-wrap {
            position: relative; width: 100%; max-width: 1400px;
            height: 75vh;
            background: #060606;
            border: 1px solid rgba(255,255,255,0.08);
            overflow: hidden; margin-top: 2rem;
        }
        .sketch-overlay {
            position: absolute; inset: 0;
            background: #060606; z-index: 10;
            display: flex; justify-content: center; align-items: center;
            cursor: pointer; transition: opacity 0.5s;
        }
        .sketch-overlay span {
            font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase;
            border: 1px solid var(--fg); padding: 14px 32px;
            transition: all 0.3s;
        }
        .sketch-overlay:hover span { background: var(--fg); color: var(--bg); }
        .sketch-overlay.hidden { opacity: 0; pointer-events: none; }
        .sketch-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

        /* ============================================
           ENTRANCE ANIMATIONS
        ============================================ */
        .anim {
            opacity: 0; transform: translateY(28px);
            transition: opacity 1s var(--ease), transform 1s var(--ease);
        }
        .anim.in { opacity: 1; transform: translateY(0); }
        .anim-right {
            opacity: 0; transform: translateX(60px);
            transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
        }
        .anim-right.in { opacity: 1; transform: translateX(0); }

        /* ============================================
           PAST EXPERIMENTS MODAL
        ============================================ */
        .exp-modal {
            position: fixed; inset: 0; z-index: 200;
            background: rgba(5,5,5,0.97);
            display: flex; flex-direction: column;
            opacity: 0; pointer-events: none;
            transition: opacity 0.4s var(--ease);
        }
        .exp-modal.open { opacity: 1; pointer-events: auto; }

        .exp-modal-header {
            display: flex; justify-content: space-between;
            align-items: center; padding: 1.5rem 3rem;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            flex-shrink: 0; gap: 1.5rem;
        }
        .exp-modal-header-left { display: flex; align-items: center; gap: 2rem; }
        .exp-modal-title {
            font-size: 0.68rem; font-weight: 600;
            letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
        }
        .view-toggle { display: flex; align-items: center; gap: 0.5rem; }
        .view-toggle-label {
            font-size: 0.6rem; font-weight: 500; letter-spacing: 0.1em;
            text-transform: uppercase; color: rgba(255,255,255,0.22); margin-right: 0.25rem;
        }
        .vtoggle-btn {
            width: 2.1rem; height: 2.1rem;
            background: transparent; border: 1px solid rgba(255,255,255,0.14);
            cursor: pointer; display: flex; align-items: center;
            justify-content: center; transition: all 0.25s;
        }
        .vtoggle-btn:hover { background: rgba(255,255,255,0.06); }
        .vtoggle-btn.active { background: var(--fg); }
        .vtoggle-btn svg { width: 1rem; height: 1rem; stroke: rgba(255,255,255,0.55); stroke-width: 2; fill: none; transition: stroke 0.2s; }
        .vtoggle-btn.active svg { stroke: #000; }
        .exp-modal-close {
            background: none; border: 1px solid rgba(255,255,255,0.14);
            color: var(--fg); width: 2.1rem; height: 2.1rem;
            cursor: pointer; font-size: 1rem;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s; font-family: 'Inter', sans-serif; flex-shrink: 0;
        }
        .exp-modal-close:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.4); }

        .exp-modal-body { flex: 1; overflow-y: auto; padding: 2.5rem 3rem 5rem; }

        /* Grid view */
        .exp-grid-view { display: none; }
        .exp-grid-view.active { display: block; }
        .exp-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem;
        }
        .exp-card {
            position: relative; aspect-ratio: 1 / 1;
            overflow: hidden; border: 1px solid rgba(255,255,255,0.08);
            text-decoration: none; display: block; transition: border-color 0.3s;
        }
        .exp-card:hover { border-color: rgba(255,255,255,0.3); }
        .exp-card img {
            width: 100%; height: 100%; object-fit: cover;
            filter: grayscale(100%);
            transition: filter 0.5s, transform 0.5s;
        }
        .exp-card:hover img { filter: grayscale(0%); transform: scale(1.04); }
        .exp-card-label {
            position: absolute; bottom: 0.65rem; left: 0.65rem;
            font-size: 0.7rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.04em;
            color: var(--fg); text-shadow: 0 2px 8px rgba(0,0,0,0.9);
        }

        /* List view */
        .exp-list-view { display: none; }
        .exp-list-view.active { display: grid; grid-template-columns: 1fr 1fr; min-height: 50vh; }
        .exp-list-items {
            display: flex; flex-direction: column;
            padding-right: 2rem; border-right: 1px solid rgba(255,255,255,0.06);
        }
        .exp-list-item {
            display: block; padding: 0.9rem 1rem;
            font-size: 1.15rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.02em;
            text-decoration: none; color: var(--fg);
            border: 1px solid transparent; transition: all 0.3s; opacity: 0.4;
        }
        .exp-list-item:hover, .exp-list-item.active {
            border: 1px solid rgba(255,255,255,0.15); opacity: 1;
        }
        .exp-list-preview { position: sticky; top: 0; padding-left: 2rem; height: fit-content; }
        .exp-list-preview img {
            width: 100%; max-height: 65vh; object-fit: cover;
            border: 1px solid rgba(255,255,255,0.08); transition: opacity 0.3s;
        }

        /* ============================================
           SIDE NAV (vertical, fixed right)
        ============================================ */
        .side-nav {
            position: fixed;
            right: 2.5rem;
            top: 50%;
            transform: translateY(-50%);
            z-index: 88;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 1.6rem;
            pointer-events: none;
        }
        .side-nav-item {
            pointer-events: auto;
            display: flex;
            align-items: center;
            gap: 0.7rem;
            text-decoration: none;
            cursor: pointer;
        }
        .side-nav-label {
            font-size: 0.58rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--muted);
            opacity: 0;
            transform: translateX(6px);
            transition: opacity 0.3s, transform 0.3s, color 0.3s;
            white-space: nowrap;
        }
        .side-nav-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: rgba(255,255,255,0.25);
            flex-shrink: 0;
            transition: background 0.35s, transform 0.35s;
        }
        /* Active state */
        .side-nav-item.active .side-nav-dot {
            background: var(--fg);
            transform: scale(1.5);
        }
        .side-nav-item.active .side-nav-label {
            color: var(--fg);
        }
        /* Hover: show label */
        .side-nav-item:hover .side-nav-label {
            opacity: 1;
            transform: translateX(0);
        }
        .side-nav-item:hover .side-nav-dot {
            background: rgba(255,255,255,0.7);
        }
        @media (max-width: 960px) { .side-nav { display: none; } }

        /* ============================================
           RESPONSIVE
        ============================================ */
        @media (max-width: 960px) {
            .proto-split-inner { grid-template-columns: 1fr; gap: 3rem; }
            .proto-split-section.reversed .proto-split-inner { direction: ltr; }
            .proto-model-wrap { height: 50vh; }
            .info-boxes-grid { grid-template-columns: 1fr; }
            .info-box { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
            .info-box:last-child { border-bottom: none; }
            .nav-links { display: none; }
            .exp-grid { grid-template-columns: repeat(3, 1fr); }
            .sketch-wrap { height: 55vh; }
        }
        @media (max-width: 640px) {
            .exp-grid { grid-template-columns: repeat(2, 1fr); }
            .exp-list-view.active { grid-template-columns: 1fr; }
            .exp-list-preview { display: none; }
        }