/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

/* ── Local Font Declarations ── */
@font-face {
    font-family: 'Joyride Alt';
    src: local('Joyride Alt');
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: local('Circular Std');
    font-display: swap;
}

@font-face {
    font-family: 'Basis Grotesque Pro';
    src: local('Basis Grotesque Pro');
    font-display: swap;
}

@font-face {
    font-family: 'Neue Machina';
    src: local('PPNeueMachina-InktrapRegular'), local('PP Neue Machina Inktrap Regular');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Machina';
    src: local('PPNeueMachina-InktrapUltrabold'), local('PP Neue Machina Inktrap Ultrabold'), local('PPNeueMachina-InktrapBlack');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'PP Valve Stencil';
    src: local('PPValve-StencilExtralight'), local('PP Valve Stencil Extralight');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'PP Valve Stencil';
    src: local('PPValve-StencilMedium'), local('PP Valve Stencil Medium');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'PP Valve Stencil';
    src: local('PPValve-StencilExtrabold'), local('PP Valve Stencil Extrabold');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'SupplyMono';
    src: local('SupplyMono-Regular'), local('SupplyMono Regular');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'SupplyMono';
    src: local('SupplyMono-Bold'), local('SupplyMono Bold');
    font-weight: 700;
    font-display: swap;
}

:root {
    /* Colors */
    --color-bg: #000;
    --color-text: #fff;
    --color-text-muted: rgba(255, 255, 255, 0.7);
    --color-border: rgba(255, 255, 255, 0.2);
    --color-overlay: rgba(0, 0, 0, 0.5);
    
    /* Typography */
    --font-body: 'Neue Machina', sans-serif;
    --font-header: 'Neue Machina', sans-serif;
    --font-menu: 'SupplyMono', monospace;
    --font-label: 'SupplyMono', monospace;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --nav-height: 90px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-slow: 0.6s ease;
}

/* ═══════════════════════════════════════════════
   PRELOADER
   ═══════════════════════════════════════════════ */

/* ── Wrapper: cream fill ensures zero flicker before bars animate ── */
#site-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #f2f0eb;   /* ← CRITICAL: kills flicker — bars start hidden but
                              the wrapper itself is already cream */
    pointer-events: all;
    overflow: hidden;
}

/* ── Inner flex column: bars + marquee strips stack vertically ── */
.preloader-loader {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Finder container: floats above bars, centered ── */
.preloader-finder {
    width: 80%;
    height: clamp(160px, 30vh, 500px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

/* ── Frame images: stacked, each starts collapsed ──
   Note: frame.png is a transparent black PNG, so no blending filters are needed. */
.preloader-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(0);
    transform-origin: center center;
    will-change: transform;
}

/* ── SVG Logo: centred over the frames ── */
.preloader-logo-img {
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform is fully managed by gsap.set() — do NOT set it in CSS */
    width: clamp(110px, 17vw, 210px);
    height: auto;
    /* SVG paths are white → invert to black for white background */
    filter: invert(1);
    z-index: 4;
    opacity: 0;
    will-change: transform, opacity;
}

/* Mobile: 17vw on a 390px screen = ~66px — too small. Override. */
@media (max-width: 767px) {
    .preloader-logo-img {
        width: clamp(140px, 38vw, 200px);
    }
}

.preloader-counter {
    position: absolute;
    top: calc(100% + 24px);
    left: 50%;
    transform: translate(-50%, 0);
    font-family: 'SupplyMono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding-left: 0.1em; /* perfectly offsets asymmetric letter-spacing */
    text-align: center;
    color: #000;
    z-index: 5;
    opacity: 0;
    will-change: opacity;
}

/* ── Horizontal bars: start fully hidden (collapsed to left edge) ── */
.preloader-bar {
    flex: 1;
    width: 100%;
    background: #f2f0eb;
    margin-top: -1px;       /* prevent sub-pixel seams */
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    will-change: clip-path;
}

/* ── Marquee strips: one between bar-1/bar-2, one between bar-4/bar-5 ── */
.preloader-marquee-strip {
    flex: 0 0 auto;
    background: #f2f0eb;
    padding: 1.4em 0;
    margin-top: -1px;
    overflow: hidden;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    will-change: clip-path;
}

/* ── Base marquee row ── */
.preloader-marquee {
    display: flex;
    align-items: center;
    gap: 4em;
    width: max-content; /* Allow width to be derived explicitly for exact stop thresholds */
    padding-right: 15vw; /* Trailing spacer to avoid abrupt clipping when stopped */
    white-space: nowrap;
    will-change: transform, opacity;
    font-family: 'SupplyMono', monospace;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000;
}

.marquee-flicker {
    animation: marqueePulseFlicker 1.8s steps(1, end) infinite;
}

@keyframes marqueePulseFlicker {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    8%   { opacity: 0; }
    12%  { opacity: 1; }
    100% { opacity: 1; }
}

/* Top marquee: starts off-screen right, GSAP scrolls it left */
.preloader-marquee-top {
    transform: translateX(100vw);
}

/* Bottom marquee: starts off-screen left, GSAP scrolls it right (opposing) */
.preloader-marquee-bottom {
    transform: translateX(-220vw);
}

.preloader-marquee p {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    flex-shrink: 0;
}

/* ■ BLACK SQUARE bullet — optically aligned with the SupplyMono baseline */
.preloader-marquee p span {
    font-size: 10px;      /* small, clean solid square */
    line-height: 1;
    position: relative;
    top: -0.02em;
}

/* ═══════════════════════════════════════════════
   PAGE TRANSITION — #pt-cover
   ═══════════════════════════════════════════════
   Cream panel (#f2f0eb) with centred Wooda logo.
   Wipes in from the bottom on DEPARTURE, wipes
   off the top on ARRIVAL — no flicker, no conflict.
   Single element, single color — identical on every page.
   ═══════════════════════════════════════════════ */

#pt-cover {
    position: fixed;
    inset: 0;
    z-index: 99999;
    /* Always cream — matches preloader and about page bg exactly */
    background: #f2f0eb;
    /* Centred logo */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Parked BELOW viewport by default — invisible, out of flow */
    clip-path: inset(100% 0% 0% 0%);
    pointer-events: none;
    will-change: clip-path;
}

/* Logo inside the cover: sized to match About splash proportions */
#pt-cover .pt-logo {
    width: clamp(160px, 22vw, 320px);
    height: auto;
    /* SVG paths are white by default → invert to render black on cream */
    filter: brightness(0);
    opacity: 1;
    pointer-events: none;
    user-select: none;
}

/* When arriving via transition, lock cover fully visible before first paint */
html.pt-incoming #pt-cover {
    clip-path: inset(0% 0% 0% 0%);
}



/* ── Reset ── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    caret-color: var(--color-text); /* Global adaptive caret */
}

/* ── Adaptive Highlighter ── */
::selection {
    background-color: var(--color-text); /* White */
    color: var(--color-bg);              /* Black */
    text-shadow: none;
}

::-moz-selection {
    background-color: var(--color-text); /* Firefox support */
    color: var(--color-bg);
    text-shadow: none;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    /* Browser uses <html> background as the canvas colour between navigations.
       Cream matches the cream page cover — the navigation gap is seamless. */
    background: #f2f0eb;

}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    background: var(--color-bg); /* #000 — the actual page background */
    cursor: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ── CSS Text Reveal (replaces per-element GSAP ScrollTrigger) ── */
.text-reveal--init {
    opacity: 0;
    transform: translateY(28px);
    /* Promote to its own compositor layer for GPU-accelerated animation */
    will-change: opacity, transform;
}

.text-reveal--visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: auto; /* Release the GPU layer once animation is done */
}

/* Stagger siblings for a cascading feel */
.text-reveal--init:nth-child(2) { transition-delay: 0.1s; }
.text-reveal--init:nth-child(3) { transition-delay: 0.2s; }

.split-parent {
    overflow: hidden;
    padding-top: 0.1em;
    margin-top: -0.1em;
}

html.work-page-html,
body.work-page {
    --color-bg: #000;
    height: auto;
    overflow: visible;
    overflow-x: hidden;
    cursor: none !important;
    background: var(--color-bg);
}

/* html element must always be cream — browser uses it as the canvas
   between navigations. This must override html.work-page-html above. */
html,
html.work-page-html {
    background: #f2f0eb !important;
}


#grained-container {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Background override removed for pitch black cards */
.sticky-card > * {
    position: relative;
    z-index: 10;
}

    body.work-page #custom-cursor {
        display: none !important;
    }


    a {
        text-decoration: none;
        color: inherit;
        cursor: none;
    }

    button {
        cursor: none;
    }

    /* ── Video Canvas ── */
    #video-canvas {
        position: fixed;
        inset: 0;
        z-index: 0;
    }

    #bg-video-1,
    #bg-video-2 {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
        transition: none; /* Disabling CSS transition for GSAP control */
    }

    #bg-video-2 {
        z-index: 2;
        clip-path: inset(0 0 0 100%); /* Initially hidden for forward wipe */
    }

    #bg-video-1 {
        z-index: 1;
    }

    /* ── Global Dot Cursor ── */
    /* Hide all custom cursors on touch/mobile devices */
    @media (pointer: coarse) {
        .cursor-dot,
        #custom-cursor {
            display: none !important;
        }

        body, html, a, button {
        }
    }

    .cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        width: 24px;
        height: 24px;
        pointer-events: none;
        z-index: 9999;
        mix-blend-mode: difference;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: var(--font-label);
        font-size: 16px;
        font-weight: 500;
        color: var(--color-text);
        transition: width 0.3s cubic-bezier(0.2, 0, 0, 1), height 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s ease;
    }

    .cursor-dot.is-snapped {
        /* Removes width/height transition duration temporarily if we want pure GSAP control, but leaving for CSS fallback */
    }

    .cursor-bracket-left, .cursor-bracket-right {
        line-height: 1;
        transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
    }
    
    /* Slightly expand brackets on hover for that 'ease-in' separation feel */
    .cursor-dot.is-active .cursor-bracket-left { transform: translateX(-4px); }
    .cursor-dot.is-active .cursor-bracket-right { transform: translateX(4px); }

    .cursor-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -46%); /* visual center compensation */
        font-size: 10px;
        letter-spacing: 0.1em;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.2s ease;
        text-transform: uppercase;
        font-weight: 500;
    }

    .cursor-dot.show-text .cursor-text { opacity: 1; }

    body.show-dot .cursor-dot {
        opacity: 1 !important;
        width: 60px;
        height: 60px;
    }

    #custom-cursor {
        position: fixed;
        width: auto;
        height: auto;
        border: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        pointer-events: none;
        z-index: 9999;
        mix-blend-mode: difference;
        transform: translate(-50%, -50%);
    }

    /* Tooltip */
    .cursor-tooltip {
        position: absolute;
        bottom: -30px; 
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--font-menu);
        font-size: clamp(0.5rem, 0.8vw, 0.65rem);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.3s ease;
        font-weight: 700;
        pointer-events: none;
    }

    #custom-cursor.is-center .cursor-tooltip,
    #custom-cursor.show-tooltip .cursor-tooltip {
        opacity: 1;
    }

    .cursor-counter {
        display: none; /* Hidden by default on home, shown via .show-counter class */
        flex-direction: row;
        align-items: center;
        gap: 12px;
        font-family: var(--font-body);
        font-weight: 400;
        font-size: clamp(0.75rem, 1.2vw, 1rem);
        color: var(--color-text);
        transition: opacity 0.3s ease;
        line-height: 1;
        user-select: none;
    }

    #custom-cursor.show-counter .cursor-counter {
        display: flex;
    }

    #cursor-current {
        font-weight: 400;
    }

    #cursor-total {
        font-weight: 400;
        opacity: 1;
    }

    .cursor-divider {
        width: 1px;
        height: 32px;
        background-color: rgba(255, 255, 255, 0.4);
    }
    /* ── Navbar ── */
    #navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transition: transform var(--transition-base);
        width: 100%;
        z-index: 900;
        display: flex;
        align-items: center;
        padding: 28px 40px;
        mix-blend-mode: difference;
        color: #fff;
        pointer-events: none;
    }

    #navbar > :not(.nav-menu) {
        pointer-events: auto;
    }

    /* Logo: far left */
    .nav-logo {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        z-index: 11;
        margin-left: -8px;
    }

    .nav-logo img {
        width: 140px;
        height: 14px;
        object-fit: contain;
    }

    /* Nav menu: Spanning exactly 100vw to allow precise midpoint calculations */
    .nav-menu {
        list-style: none;
        display: grid;
        grid-template-columns: 220px 1fr 50vw;
        grid-template-rows: auto auto;
        column-gap: 0;
        row-gap: 0;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100vw;
        pointer-events: none;
    }

    /* Slot assignments aligning to precise columns */
    .nav-item:nth-child(1) { grid-column: 2; grid-row: 1; justify-self: center; width: 140px; }
    .nav-item:nth-child(2) { grid-column: 2; grid-row: 2; justify-self: center; width: 140px; }
    .nav-item:nth-child(3) { grid-column: 3; grid-row: 1; justify-self: start; width: 150px; }
    .nav-item:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: start; width: 150px; }

    .nav-item {
        overflow: hidden;
        position: relative;
        pointer-events: auto;
    }

    .nav-link {
        display: flex;
        align-items: center;
        font-family: var(--font-label);
        font-size: clamp(0.65rem, 0.7vw + 0.25rem, 0.75rem);
        font-weight: 400;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
        padding: 2px 0 2px 18px;
        position: relative;
        overflow: hidden;
        height: 1.6em;
        line-height: 1.6;
        width: max-content;
    }

    /* Square indicator animation */
    .nav-item .nav-link::before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        background-color: var(--color-text);
        opacity: 0;
        transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scaleX(0);
        transform-origin: right center;
    }

    .nav-item.is-active .nav-link::before,
    .nav-item:hover .nav-link::before {
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
    }

    /* Static label (shown by default) */
    .nav-label {
        display: block;
        transition: opacity 0.25s ease;
    }

    /* Nav tagline: removed */

    /* Marquee wrapper (hidden by default) */
    .marquee-wrap {
        position: absolute;
        top: 50%;
        left: 18px; /* Align with nav-label padding */
        transform: translateY(-50%);
        display: flex;
        width: max-content;
        opacity: 0;
        transition: opacity var(--transition-fast);
        clip-path: inset(-20px -200px -20px 0); /* Prevent sliding text from overlapping the square area on the left */
    }

    /* On hover: show marquee, hide static label */
    .nav-item:hover .nav-label,
    .nav-item.is-animating .nav-label {
        opacity: 0;
    }

    .nav-item:hover .marquee-wrap,
    .nav-item.is-animating .marquee-wrap {
        opacity: 1;
    }

    .marquee-text {
        display: inline-block;
        white-space: nowrap;
        will-change: transform;
    }



    /* ── Custom Cursor ── */
    body:hover #custom-cursor,
    #custom-cursor.is-visible {
        opacity: 1;
    }

    /* Counter row: number | divider | number */
    /* .cursor-counter is now defined within the new #custom-cursor block */

    .cursor-divider {
        width: 1px;
        height: 32px;
        background: rgba(255, 255, 255, 0.6);
    }

    #cursor-current,
    #cursor-total {
        min-width: 20px;
        text-align: center;
    }

    /* Arrow */
    .cursor-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cursor-arrow svg {
        display: block;
        width: 64px;
        height: 64px;
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
    }

    /* ── Cursor Marquee ── */
    .cursor-marquee-wrap {
        display: flex;
        width: 34px;
        overflow: hidden;
    }
    
    .cursor-marquee-text {
        display: flex;
        width: 102px; /* 3x 34px */
        flex-shrink: 0;
        will-change: transform;
        justify-content: center;
    }
    
    .cursor-marquee-text svg {
        flex-shrink: 0;
        margin-left: -7px; /* Centering the 48px SVG inside the 34px container */
    }

    .cursor-marquee-right {
        animation: cursor-slide-right 0.7s linear infinite;
    }

    .cursor-marquee-left {
        animation: cursor-slide-left 0.7s linear infinite;
    }

    @keyframes cursor-slide-right {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(0); }
    }

    @keyframes cursor-slide-left {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }

    /* ── Project Title (Scorched-Earth Restored Styling) ── */
    #work-title-display {
        position: fixed;
        bottom: 5vh;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        color: #fff;
        mix-blend-mode: difference;
        pointer-events: auto;
        width: fit-content;
    }

    /* Base size for the centre-bottom home marquee (~30px) */
    .title-marquee-text {
        font-size: clamp(1.5rem, 2vw, 1.875rem);
        letter-spacing: 0.08em;
    }

    /* ── Video Controls ── */
    #video-controls {
        display: none;
    }

    #video-controls button {
        background: none;
        border: none;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.75;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    #video-controls button:hover {
        opacity: 1;
        transform: scale(1.1);
    }

    /* ── Subtle vignette overlay for cinematic feel ── */
    #video-canvas::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center,
                transparent 55%,
                rgba(0, 0, 0, 0.25) 100%);
        pointer-events: none;
        z-index: 1;
    }

    /* ── Responsive tweaks ── */
    .mobile-waffle {
        display: none;
        font-family: var(--font-menu);
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        pointer-events: auto;
        z-index: 101;
    }

    body.about-editorial .mobile-waffle {
        color: #0a0a0a !important; /* Force black on light themed about page */
    }

    /* Hidden on desktop; activated via body.menu-open inside the mobile query */
    .menu-meta {
        display: none;
    }

    @media (max-width: 768px) {
        #navbar {
            padding: 20px 24px;
            flex-wrap: nowrap;
            gap: 12px;
            justify-content: space-between;
        }

        .mobile-waffle {
            display: block;
            margin-top: 2px;
        }

        /* ── Mobile full-screen menu overlay ── */
        .nav-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: #f2f0eb;
            z-index: 100;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
            transform: none !important;
        }

        body.menu-open .nav-menu {
            opacity: 1;
            pointer-events: auto;
        }

        /* ── CRITICAL FIX: nav-menu pointer-events on mobile ──
           Fix: use #navbar > .nav-menu — specificity (1,1,0) — to override
           the #navbar > :not(.nav-menu) rule. */
        #navbar > .nav-menu {
            pointer-events: none !important;
        }

        body.menu-open #navbar > .nav-menu {
            pointer-events: auto !important;
        }

        /* Nav items: also ensure none when closed, auto when open */
        .nav-menu .nav-item,
        .nav-menu .nav-link {
            pointer-events: none;
        }

        body.menu-open .nav-menu .nav-item,
        body.menu-open .nav-menu .nav-link {
            pointer-events: auto;
        }

        body.menu-open {
            overflow: hidden;
        }

        /* When menu is open, navbar reverts to normal blend so logo is visible */
        body.menu-open #navbar {
            mix-blend-mode: normal;
        }

        /* Logo: make black on the cream menu background */
        body.menu-open .nav-logo img {
            filter: invert(1);
        }

        /* Logo must show on top of the white overlay */
        body.menu-open .nav-logo {
            position: relative;
            z-index: 101;
        }

        body.menu-open .mobile-waffle {
            color: #000 !important;
            /* Push CLOSE text above the logo row */
            position: relative;
            z-index: 101;
        }

        .nav-item:nth-child(n) {
            grid-column: auto;
            grid-row: auto;
            justify-self: center;
            width: auto;
            margin: 10px 0;
        }

        .nav-link {
            font-family: var(--font-body) !important;
            font-size: 60px !important;
            color: #000;
            text-transform: none;
            padding: 0;
            height: auto;
            line-height: 1.1;
            white-space: normal;
            text-align: center;
        }

        .nav-link::before {
            display: none !important;
        }

        .nav-logo img {
            width: 85px;
            height: 8px;
            object-fit: contain;
        }

        .nav-tagline {
            display: none;
        }

        #video-controls {
            right: 24px;
            bottom: 20px;
        }

        #custom-cursor {
            display: none !important;
        }

        /* ── Menu meta footer block (mirrors footer info) ── */
        /* Hidden by default; shown as a fixed overlay when the menu is open */
        .menu-meta {
            position: fixed;
            bottom: 32px;
            left: 24px;
            right: 24px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            font-family: var(--font-label);
            font-size: 0.65rem;
            letter-spacing: 0.08em;
            color: #000;
            opacity: 0;
            pointer-events: none;
            z-index: 102;
            transition: opacity 0.4s ease 0.15s;
        }

        body.menu-open .menu-meta {
            display: flex;
            opacity: 0.55;
            pointer-events: auto;
        }

        .menu-meta a {
            color: inherit;
            text-decoration: none;
        }

        .menu-meta-left {
            display: flex;
            flex-direction: column;
            gap: 2px;
            text-align: left;
        }

        .menu-meta-right {
            display: flex;
            flex-direction: column;
            gap: 2px;
            text-align: right;
        }
    }


    /* ── Work Page Specific Styles ── */
    .home_bts_section {
        position: relative;
        width: 100%;
        min-height: 100vh;
        padding-top: var(--nav-height);
        /* offset for navbar */
        color: var(--color-text);
        z-index: 5;
    }

    .home_bts_contain {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-xl);
        position: relative;
        z-index: 100;
    }

    .home_bts_header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 60px;
    }

    .home_header_icon_wrap {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .home_header_line {
        flex-grow: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
    }

    .home_work_heading_text {
        font-size: 4rem;
        font-weight: 700;
        line-height: 1.1;
        text-transform: uppercase;
        max-width: 800px;
        margin-bottom: 40px;
    }

    .home_bts_content_btn_wrap {
        margin-top: 40px;
    }

    .primary_btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 12px 24px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 40px;
        position: relative;
        overflow: hidden;
        transition: background 0.3s ease;
    }

    .primary_btn:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .primary_btn_text {
        font-weight: 500;
        letter-spacing: 0.1em;
    }

    .primary_btn_icon {
        width: 12px;
        height: 12px;
    }

    .clickable_wrap {
        position: absolute;
        inset: 0;
    }

    .clickable_link {
        display: block;
        width: 100%;
        height: 100%;
    }

    .home_bts_img_list_wrap {
        pointer-events: none;
        z-index: 100;
    }

    .home_bts_img_list_item {
        width: 200px;
        height: 140px;
        border-radius: 8px;
        overflow: hidden;
        position: fixed;
        /* absolute to viewport for cursor tracking */
        opacity: 0;
        pointer-events: none;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        /* center on cursor initially */
        z-index: 100;
    }

    .home_bts_img_list_item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ── Work Page Layout ── */
    .work-page-content {
        width: 100%;
        min-height: 100vh;
        padding-top: var(--nav-height);
        color: var(--color-text);
        padding-bottom: 100px;
        position: relative;
        z-index: 100;
    }
    
    /* ── About Hero ── */
    .about-hero {
        position: relative;
        z-index: 10;
        width: 100%;
        padding: 0 var(--spacing-xl) 30vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        min-height: 100vh;
        height: 100vh;
        box-sizing: border-box;
    }

    /* ── Work Hero: top ~38vh splash ── */
    .work-hero {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 38vh;
        min-height: 38vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0 40px;
        overflow: hidden;
    }

    .work-hero-inner {
        width: 100%;
        position: relative;
        padding: 0;
    }

    .work-hero-title-wrap {
        position: relative;
        display: flex;
        align-items: flex-start;
        width: 100%;
        line-height: 0.85;
    }

    .work-hero-title {
        font-family: 'Neue Machina', 'PPNeueMachina-InktrapRegular', sans-serif;
        font-size: clamp(120px, 18vw, 260px);
        font-weight: 400;
        line-height: 0.85;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
        letter-spacing: -0.03em;
        color: var(--color-text);
        display: block;
        white-space: nowrap;
        max-width: 808px;
    }

    .work-hero-count {
        font-family: var(--font-label);
        font-size: 40px;
        font-weight: 400;
        color: var(--color-text);
        position: relative;
        top: 0.15em;
        margin-left: 8px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .hero-text-stacked {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 0;
    }
    
    .hero-subtitle {
        margin-top: var(--spacing-lg);
        font-family: var(--font-body);
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--color-text-muted);
        max-width: 600px;
        line-height: 1.4;
    }
    
    .hero-text-stacked h1 {
        font-family: var(--font-header);
        font-size: clamp(3rem, 6vw, 6rem);
        font-weight: 700;
        line-height: 1.1;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
        letter-spacing: -0.01em;
        color: var(--color-text);
        text-align: left;
    }
    
    .work-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 60px;
        column-gap: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 20;
    }
    
    .work-item {
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: hidden; /* Mask the reveal animation */
    }
    
    .work-item-inner {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .work-image {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        overflow: hidden;
        background: #111;
    }
    
    .work-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease, filter 0.6s ease;
    }
    
    .hover-video-player {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        width: 60%;
        height: auto;
        aspect-ratio: 16/9;
        object-fit: cover;
        opacity: 1;
        pointer-events: none;
        transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1); /* Slower, high-end gradual expansion */
        z-index: 10;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    }

    
    .work-item a {
        display: block;
    }

    /* ── Image Skeleton / Load Shimmer ── */
    .work-image {
        position: relative;
        overflow: hidden;
        background: #111;
    }

    .work-image::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.05) 50%,
            rgba(255,255,255,0) 100%
        );
        background-size: 200% 100%;
        animation: shimmer 1.8s infinite linear;
        z-index: 1;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }

    .work-image.img-loaded::before {
        opacity: 0;
    }

    @keyframes shimmer {
        0%   { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }

    .work-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: 0;
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
    }

    .work-image.img-loaded img {
        opacity: 1;
    }

    /* Desktop hover state */
    @media (hover: hover) {
        .work-item:hover .work-image img {
            transform: scale(1.03);
            filter: grayscale(100%);
        }
        
        .work-item:hover .hover-video-player {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    /* Mobile two-tap state — mirrors desktop :hover appearance.
       Class is only added by JS on real touch devices. */
    .work-item.mobile-playing .work-image img {
        transform: scale(1.03);
        filter: grayscale(100%);
    }
    .work-item.mobile-playing .hover-video-player {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    
    /* ── Work Meta — labels ABOVE the image ── */
    .work-meta {
        padding: 38px 20px 27px 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-top: none;
    }
    
    .work-meta-col {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    
    .work-meta-col.right {
        text-align: right;
    }

    .work-meta-label {
        font-family: var(--font-label);
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 1);
        line-height: 1.4;
    }

    .work-meta-title {
        font-family: var(--font-label);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-text);
        line-height: 1.2;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-header);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: -0.01em;
    }

    /* ── Text Reveal Helpers ── */
    .split-parent {
        overflow: hidden;
        display: block;
    }

    .split-child {
        display: block;
        will-change: transform;
    }
    
    .text-reveal {
        opacity: 1; /* GSAP will handle the initial state */
    }

    .work-meta h3 {
        font-family: var(--font-header);
        font-size: 1.25rem;
        margin-bottom: 4px;
    }
    
    .work-meta p {
        font-family: var(--font-body);
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 400;
    }
    
    @media (max-width: 768px) {
        .work-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
            padding: 1.5rem;
        }
        .work-hero {
            padding: 0 24px;
        }
        .work-hero h1, 
        .hero-text-stacked h1 {
            font-size: 2.75rem;
        }
        .work-hero-title-wrap {
            flex-wrap: wrap;
            line-height: 1;
        }
        .work-hero-title {
            font-size: clamp(3rem, 15vw, 120px) !important;
            white-space: normal;
        }
        .work-hero-count {
            font-size: clamp(1.5rem, 8vw, 40px) !important;
            top: 0;
            margin-left: 4px;
        }

        
        /* Navbar: pin to full screen width on mobile */
        #navbar {
            left: 0 !important;
            right: 0 !important;
            transform: none !important;
            max-width: 100vw !important;
            width: 100% !important;
            padding: var(--spacing-md) !important;
            transition: none !important;
            flex-wrap: wrap;
            gap: 12px;
        }

        .nav-logo {
            flex-shrink: 0;
        }

        .nav-logo img {
            width: 105px;
            height: 10px;
            object-fit: contain;
        }

        .nav-menu {
            margin-left: 0;
            column-gap: 20px;
        }

        .nav-tagline {
            display: none;
        }

        .nav-link {
            font-size: clamp(0.6rem, 2.5vw, 0.75rem);
        }

        /* Home page: ensure video fills properly */
        #video-canvas,
        #bg-video {
            position: fixed;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Title marquee on mobile */
        #work-title-display {
            bottom: 1.5rem;
        }
        .title-marquee-text {
            font-size: clamp(1.1rem, 3.5vw, 1.5rem);
            letter-spacing: 0.08em;
        }
    }

    /* ── Sticky Cards ── */
    .sticky-cards {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: var(--color-bg);
    }

    .sticky-card {
        position: relative;
        width: 100%;
        height: 100svh;
        background-color: var(--color-bg);
        color: var(--color-text);
        padding: 4rem;
        padding-top: var(--nav-height);
        display: flex;
        gap: 3rem;
        will-change: transform;
    }

    .sticky-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: var(--after-opacity, 0);
        transition: opacity 0.1s ease;
        pointer-events: none;
        z-index: 2;
    }

    .sticky-card-index {
        flex: 2;
    }

    .sticky-card-index h1 {
        font-family: var(--font-header);
        font-weight: 700;
        font-size: 5rem;
    }

    .sticky-card-content {
        flex: 4;
        padding-top: 1.5rem;
    }

    .sticky-card-content-wrapper {
        width: 75%;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .sticky-card-header {
        width: 75%;
        font-family: var(--font-header);
        font-weight: 700;
        font-size: 3rem;
        text-transform: uppercase;
    }

    .sticky-card-img img {
        aspect-ratio: 5/3;
        width: 100%;
        object-fit: cover;
    }

    .sticky-card-copy {
        display: flex;
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .sticky-card-copy-title {
        flex: 2;
    }

    .sticky-card-copy-description {
        flex: 4;
    }

    .sticky-card-copy-title p {
        text-transform: uppercase;
        font-weight: 700;
        font-family: var(--font-header);
    }

    .sticky-card-copy-description p {
        font-family: var(--font-body);
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1.5;
    }

    /* ── What We Do Hero ── */
    /* (Unified with .work-hero above) */

    .hero-separator {
        border: none;
        height: 1px;
        background: transparent;
        margin: 0 auto 60px auto;
        width: calc(100% - 48px);
        position: relative;
        z-index: 10;
        overflow: visible;
    }

    /* The actual line lives in a pseudo-element so transform-origin:center
       operates on a box that is already 100% wide — guaranteeing a true
       centre-outward draw. */
    .hero-separator::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: rgba(255, 255, 255, 0.5);
        transform-origin: center;
        transform: scaleX(0);
        animation: scale-line 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
    }

    @keyframes scale-line {
        0%   { transform: scaleX(0); }
        100% { transform: scaleX(1); }
    }

    @media (max-width: 768px) {
        .sticky-card {
            flex-direction: column;
            height: auto;
            padding: 1.5rem;
            padding-top: var(--nav-height);
            gap: 1.5rem;
        }
        
        .sticky-card-index h1 {
            font-size: 3rem;
        }

        .sticky-card-content,
        .sticky-card-content-wrapper,
        .sticky-card-header {
            width: 100%;
            flex: none;
        }

        .sticky-card-header {
            font-size: 2.25rem;
        }

        .sticky-card-copy {
            flex-direction: column;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .sticky-card-copy-title,
        .sticky-card-copy-description {
            flex: none;
        }
        
        #navbar {
            padding: var(--spacing-md) var(--spacing-lg);
        }
        
        .nav-logo img {
            width: 105px;
            height: 10px;
            object-fit: contain;
        }
        
        .title-marquee-text {
            font-size: clamp(1.4rem, 4vw, 1.875rem);
        }
    }

/* ── VIEW PROJECT POPUP ── */
.view-video-popup {
    position: fixed;
    bottom: 30px;
    left: 40px;
    /* Keep below the mobile menu (z-index: 100) but above other page content */
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 135px;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.view-video-popup:hover {
    transform: scale(1.05);
}

/* Hide popup whenever the mobile menu is open */
body.menu-open .view-video-popup {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease;
}

.popup-mirror-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.popup-overlay {
    position: relative;
    font-family: var(--font-label);
    font-size: clamp(0.6rem, 1vw, 0.8rem);
    letter-spacing: 0.1em;
    z-index: 2;
    /* No background here — scrim lives in ::before so it doesn't
       interfere with mix-blend-mode on the content layer */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Semi-transparent scrim — rendered below the blended layer */
.popup-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 0;
    pointer-events: none;
}

/* Content row: icon + text — sits above the scrim and blends adaptively */
.popup-overlay-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* mix-blend-mode: difference makes the content read on any bg colour */
    mix-blend-mode: difference;
    color: #fff;
}

/* The icon participates in the same difference blend — no extra filter needed */
.view-video-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.popup-label {
    font-family: var(--font-label);
    font-size: clamp(0.55rem, 0.6vw + 0.2rem, 0.75rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

/* ═══════════════════════════════════════════════
   SITE FOOTER
   ═══════════════════════════════════════════════ */

.site-footer {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: 100vh; /* Enforce rigid viewport height on desktop */
    background: #000;
    color: #fff;
    overflow: hidden;
    z-index: 20;
    display: flex;
    flex-direction: column;
}

/* ── Upper Block ──────────────────────────────── */
.footer-upper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
    min-height: 0; /* Let flex: 1 scale to fit exactly the remaining space */
}

.footer-upper-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* ── Editorial wordmark block — centered ── */
.footer-left-inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
    /* Optically centers the SVG in the free-space by counter-balancing the massive vertical height of the tagline below it */
    margin-bottom: clamp(100px, 14vh, 200px);
}

.footer-left-label {
    font-family: var(--font-label);
    font-size: 0.55rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin: 0;
}

.footer-left-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 0.85;
}

.footer-left-wordmark span {
    font-family: 'Neue Machina', sans-serif;
    font-size: clamp(3.5rem, 8vw, 9rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #fff;
    display: block;
}

/* ── Footer SVG Logo ── */
.footer-left-logo {
    display: flex;
    align-items: flex-end;
}

.footer-logo-svg {
    /* SVG already has white fills — no filter needed on dark footer */
    width: clamp(160px, 28vw, 420px);
    height: auto;
    display: block;
}

.footer-upper-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 48px 48px 48px;
}

/* CTA */
.footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-label);
    font-size: clamp(0.6rem, 0.65vw + 0.3rem, 0.75rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    padding-bottom: 2px;
    transition: border-color 0.25s ease, letter-spacing 0.25s ease;
    align-self: flex-end;
}

.footer-cta:hover {
    border-color: #fff;
    letter-spacing: 0.14em;
}

.footer-cta-arrow {
    font-size: 1em;
    line-height: 1;
    transition: transform 0.25s ease;
}

.footer-cta:hover .footer-cta-arrow {
    transform: translateX(3px) translateY(-2px);
}

/* Tagline — infinite animation layout */
.footer-tagline {
    font-family: 'Neue Machina', sans-serif;
    font-size: clamp(2rem, 4.5vw, 5.2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0px;
    align-self: flex-end;
}

@keyframes tagline-highlight {
    0%, 100% {
        opacity: 0.4;
        transform: translateX(0);
    }
    15% {
        opacity: 1;
        transform: translateX(-36px);
    }
    30% {
        opacity: 0.4;
        transform: translateX(0);
    }
}

.footer-tagline-word {
    display: block;
    line-height: 0.95;
    opacity: 0.4;
    will-change: transform, opacity;
    animation: tagline-highlight 6s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

.footer-tagline-word:nth-child(1) { animation-delay: 0s; }
.footer-tagline-word:nth-child(2) { animation-delay: 2s; }
.footer-tagline-word:nth-child(3) { animation-delay: 4s; }

/* ── Bottom Bar ───────────────────────────────── */
.footer-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex-shrink: 0;
}

.footer-col {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-col:first-child {
    padding-left: 40px;
}

.footer-col:last-child {
    padding-right: 40px;
}

/* Label (e.g., REACH OUT, LEGAL) */
.footer-col-label {
    font-family: var(--font-label);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

/* Regular text lines */
.footer-col-line {
    font-family: var(--font-label);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
}

/* Ensure a row of space separates headings from content */
.footer-col > :first-child {
    margin-bottom: 20px;
}

/* Links inside footer */
.footer-col-line a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-col-line a:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}

/* Live clock */
#footer-clock {
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
}

/* ── Status LED ── */
.footer-status-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.footer-status-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.8);
    animation: led-pulse 2.4s ease-in-out infinite;
}

.footer-status-led.unavailable {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239,68,68,0.8);
    animation: led-pulse-red 2.4s ease-in-out infinite;
}

@keyframes led-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(34,197,94,0.6); }
    50%       { opacity: 0.6; box-shadow: 0 0 10px rgba(34,197,94,1); }
}

@keyframes led-pulse-red {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(239,68,68,0.6); }
    50%       { opacity: 0.6; box-shadow: 0 0 10px rgba(239,68,68,1); }
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 900px) {
    .site-footer {
        min-height: 100svh;
        height: auto; /* Allow natural expansion without cropping on mobile */
    }

    .footer-upper {
        grid-template-columns: 1fr;
        min-height: auto;
        flex: unset;
    }

    .footer-upper-left {
        min-height: 50vw;
    }
    
    .footer-left-inner {
        margin-bottom: 0;
    }

    .footer-tagline {
        font-size: clamp(2.2rem, 10vw, 4.5rem);
        align-items: flex-start;
        text-align: left;
        align-self: flex-start;
        gap: 0;
    }

    .footer-tagline-word {
        animation-name: tagline-highlight-mobile;
    }

    .footer-upper-right {
        padding: 36px 24px;
        gap: 40px;
    }

    .footer-cta {
        align-self: flex-start;
    }
}

@keyframes tagline-highlight-mobile {
    0%, 100% {
        opacity: 0.4;
        transform: translateX(0);
    }
    15% {
        opacity: 1;
        transform: translateX(24px); /* Pushes right for left-aligned text on mobile */
    }
    30% {
        opacity: 0.4;
        transform: translateX(0);
    }

    .footer-bottom {
        grid-template-columns: 1fr 1fr;
    }

    .footer-col:nth-child(3) {
        margin-top: 0;
    }

    .footer-col:first-child {
        padding-left: 24px;
    }

    .footer-col:last-child {
        padding-right: 24px;
    }
}

@media (max-width: 600px) {
    .footer-upper-left {
        min-height: 60vw;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
    }

    .footer-col:last-child {
        /* last child already has no special border */
    }
}

/* ═══════════════════════════════════════════════
   ABOUT PAGE — EDITORIAL OVERRIDES (light mode)
   Scoped to body.about-editorial
   ═══════════════════════════════════════════════ */

/* ── Cursor: visible on cream background ──
   Keep color white (#fff) — mix-blend-mode: difference against cream (#f2f0eb)
   produces |#fff - #f2f0eb| ≈ #0d0f14, a near-black. No colour override needed.
   Against dark footer/overlays it reverts to white. Both cases handled. */
body.about-editorial .cursor-dot {
    mix-blend-mode: difference;
    /* color inherits var(--color-text) = #fff — intentional */
}

/* Guarantee cursor is shown once mouse enters */
body.about-editorial .show-dot .cursor-dot {
    opacity: 1 !important;
}

/* ── Nav square indicator: dark on cream ── */
body.about-editorial #navbar {
    /* Override global mix-blend-mode: difference so nav reads cleanly on cream */
    mix-blend-mode: normal;
    color: #0a0a0a;
}

body.about-editorial .nav-logo img {
    /* Logo SVG paths are white — invert to black for cream background */
    filter: invert(1);
}

/* Square indicator — use dark ink instead of --color-text (which is #fff) */
body.about-editorial .nav-item .nav-link::before {
    background-color: #0a0a0a;
}

/* Nav link text colour on the about page */
body.about-editorial .nav-link {
    color: #0a0a0a;
}