:root {
            --bg: #000000;
            --text: #F5F7FA;
            --muted: #A6ADB8;
            --hairline: rgba(208,222,244,0.18);
            --radius: 0.6rem;
            --transition: 0.3s cubic-bezier(.4,0,.2,1);
            --maxw: 1280px;
        }
        * { box-sizing: border-box; }
        .icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
        html { scroll-behavior: smooth; }
        ::selection { color: #FFFFFF; background: #204D92; }
        :focus-visible { outline: 2px solid #97BEF7; outline-offset: 6px; }
        html { scrollbar-color: #48515F #080A0E; scrollbar-width: thin; }
        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            font-weight: 400;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        /* ---------- HEADER ---------- */
        header {
            position: fixed;
            width: 100%;
            top: 0; left: 0;
            z-index: 1000;
            background: transparent;
            border-bottom: 1px solid transparent;
            transition: background-color var(--transition), border-color var(--transition);
        }
        header.scrolled {
            background: rgba(0, 0, 0, 0.88);
            border-bottom-color: var(--hairline);
        }
        .navbar {
            max-width: var(--maxw);
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            padding: 1.55rem 2.5rem;
        }

        .wordmark {
            font-weight: 800;
            font-size: 1.15rem;
            letter-spacing: 0.32em;
            color: var(--text);
            text-decoration: none;
            text-transform: uppercase;
        }
        .nav-right { justify-self: end; }
        nav ul {
            list-style: none;
            display: flex;
            gap: 2.8rem;
            margin: 0; padding: 0;
        }
        nav ul li a {
            color: var(--muted);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.82rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            position: relative;
            padding-bottom: 4px;
            transition: color var(--transition);
        }
        nav ul li a::after {
            content: '';
            position: absolute;
            left: 0; bottom: 0;
            width: 100%; height: 1px;
            background: var(--text);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--transition);
        }
        nav ul li a:hover,
        nav ul li a.active { color: var(--text); }
        nav ul li a:hover::after,
        nav ul li a.active::after { transform: scaleX(1); }

        .nav-toggle {
            display: none;
            background: none; border: none;
            color: var(--text);
            cursor: pointer;
            font-size: 1.4rem;
            min-width: 44px;
            min-height: 44px;
        }

        /* ---------- HERO ---------- */
        .hero {
            position: relative;
            width: 100%;
            min-height: 100vh;
            min-height: 100svh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: transparent;
            z-index: 10;
        }
        #shaderCanvas {
            position: fixed;
            inset: 0;
            width: 100%; height: 100%;
            display: block;
            z-index: 0;
            pointer-events: none;
            touch-action: none;
        }
        .hero-content {
            position: relative;
            z-index: 3;
            padding: 0 1.5rem;
        }
        /* Frame the original artwork, excluding its transparent export padding. */
        .brand-frame {
            position: relative;
            overflow: hidden;
            aspect-ratio: 477 / 246;
            display: block;
        }
        .brand-frame img {
            position: absolute;
            width: 207.966457%;
            max-width: none;
            height: auto;
            left: -54.507338%;
            top: -163.821138%;
        }
        .hero-logo {
            width: clamp(122px, 12vw, 158px);
            margin: 0 auto;
        }

        /* ---------- SECTIONS ---------- */
        .section {
            max-width: var(--maxw);
            margin: 0 auto 6rem;
            padding: 2rem 2.5rem;
            scroll-margin-top: 5.5rem;
            background: transparent;
            position: relative;
            z-index: 10;
        }
        .eyebrow {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: var(--muted);
            margin: 0 0 0.6rem 0;
        }
        .section-title {
            font-size: clamp(1.7rem, 3.8vw, 2.3rem);
            font-weight: 600;
            letter-spacing: -0.02em;
            margin: 0 0 4.5rem 0;
            color: var(--text);
            text-align: center;
            text-wrap: balance;
        }

        /* Editorial offering rows (centered, stacked) */
        .offerings { border-top: 1px solid var(--hairline); }
        .offering {
            text-align: center;
            padding: 2.4rem 0.5rem;
            border-bottom: 1px solid var(--hairline);
        }
        .offering-index {
            display: block;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--muted);
            letter-spacing: 0.05em;
            margin: 0 0 0.6rem 0;
        }
        /* Card dropdown (Innovation) */
        .offering-heading { margin: 0; }
        .offering-toggle {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.7rem;
            padding: 0;
            background: none;
            border: 0;
            cursor: pointer;
            font-family: inherit;
            font-size: 1.5rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--muted);
            min-height: 44px;
        }
        .offering-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; border-radius: 2px; }
        .offering.offering--static { cursor: default; }
        .offering--static .offering-reveal { transition: none; }
        .offering--static .offering-toggle { cursor: default; }
        .offering--open.offering--static .offering-toggle,
        .offering--open.offering--static:hover .offering-toggle { color: var(--text); }
        /* Word and chevron centre together as one unit, nudged a touch right of the axis. */
        .offering-chevron {
            margin-left: 0.7rem;
            vertical-align: middle;
            font-size: 0.8rem;
            color: var(--muted);
            transition: transform var(--transition), color 0.4s ease;
        }
        .offering--open .offering-chevron { transform: rotate(180deg); }
        .offering--open .offering-toggle,
        .offering--open .offering-chevron { color: var(--text); }
        .offering-reveal {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.5s cubic-bezier(.4,0,.2,1);
        }
        .offering--open .offering-reveal { grid-template-rows: 1fr; }
        .offering-reveal-inner { overflow: hidden; min-height: 0; }
        .offering-reveal-content { padding-top: 1.3rem; }
        .offering-note {
            margin: 0 auto;
            max-width: 560px;
            color: var(--muted);
            font-size: 0.92rem;
            line-height: 1.6;
            transition: color 0.4s ease;
        }
        .offering-desc + .offering-note { margin-top: 0.85rem; color: var(--muted); }
        .offering-note--wide { max-width: 640px; }
        @media (max-width: 760px) { .offering-note--wide br { display: none; } }
        .phase + .phase {
            position: relative;
            margin-top: 2.4rem;
            padding-top: 2.2rem;
        }
        /* A short centred rule instead of a full-width hairline. */
        .phase + .phase::before {
            content: '';
            position: absolute;
            top: 0; left: 50%;
            width: 3rem; height: 1px;
            background: var(--hairline);
            transform: translateX(-50%);
        }
        .phase--pair {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1.5rem 2rem;
            max-width: 780px;
            margin-left: auto;
            margin-right: auto;
        }
        .phase-label {
            margin: 0 0 0.7rem;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: var(--text);
        }
        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem 2rem;
            max-width: 780px;
            margin: 1.8rem auto 0;
        }
        .steps dt {
            margin: 0 0 0.25rem;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text);
        }
        .steps dd {
            margin: 0;
            color: var(--muted);
            font-size: 0.92rem;
            line-height: 1.6;
        }
        .offering-label {
            margin: 1.6rem 0 0;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: var(--muted);
            transition: color 0.4s ease;
        }
        @media (prefers-reduced-motion: reduce) {
            .offering-reveal { transition: none; }
        }
        .offering-desc {
            font-size: 1rem;
            font-weight: 400;
            color: var(--muted);
            line-height: 1.7;
            margin: 0 auto;
            max-width: 620px;
            transition: color var(--transition);
        }
        .offering:hover .offering-toggle,
        .offering:hover .offering-chevron,
        .offering:hover .offering-desc,
        .offering:hover .offering-note,
        .offering:hover .offering-label { color: var(--text); }
        /* Static rows: header is white, body copy stays muted, nothing changes on hover. */
        .offering--static .offering-toggle,
        .offering--static:hover .offering-toggle { color: var(--text); }
        .offering--static .offering-note,
        .offering--static:hover .offering-note,
        .offering--static:hover .offering-desc,
        .offering--static:hover .offering-label { color: var(--muted); }

        .product-disclosure {
            max-width: 470px;
            margin: 1.4rem auto 0;
            text-align: center;
        }
        .product-disclosure + .product-disclosure { margin-top: 1.1rem; }
        .product-disclosure--static .product-summary { cursor: default; }
        .product-summary {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            padding: 0.2rem 0;
            background: none;
            border: 0;
            cursor: pointer;
            font-family: inherit;
        }
        .product-summary:focus-visible {
            outline: 2px solid var(--text);
            outline-offset: 4px;
        }
        .product-reveal {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.5s cubic-bezier(.4,0,.2,1);
        }
        .product-disclosure.open .product-reveal { grid-template-rows: 1fr; }
        .product-reveal-inner { overflow: hidden; min-height: 0; }
        @media (prefers-reduced-motion: reduce) {
            .product-reveal { transition: none; }
        }
        .product-name {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text);
        }
        .product-beta {
            padding: 0.15rem 0.4rem;
            border: 1px solid var(--hairline);
            border-radius: 4px;
            color: var(--muted);
            font-size: 0.64rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .product-chevron {
            color: var(--muted);
            font-size: 0.78rem;
            transition: transform var(--transition), color var(--transition);
        }
        .product-disclosure.open .product-chevron {
            transform: rotate(180deg);
            color: var(--text);
        }
        .product-panel {
            padding: 0.7rem 0 0.4rem;
            text-align: center;
        }
        .product-copy {
            margin: 0;
            color: var(--muted);
            font-size: 0.92rem;
            line-height: 1.6;
        }
        .product-sub { font-size: 0.82em; }
        .product-meta,
        .product-notice {
            margin: 0.55rem 0 0;
            color: var(--muted);
            font-size: 0.72rem;
            line-height: 1.5;
        }
        .product-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.65rem;
            margin-top: 1rem;
        }
        .product-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            min-height: 38px;
            padding: 0.55rem 0.85rem;
            border: 1px solid var(--hairline);
            border-radius: 4px;
            color: var(--text);
            font-size: 0.78rem;
            font-weight: 600;
            text-decoration: none;
            transition: background var(--transition), border-color var(--transition), color var(--transition);
        }
        .product-link:hover { border-color: var(--text); }
        .product-link--primary {
            background: var(--text);
            border-color: var(--text);
            color: var(--bg);
        }
        .product-link--primary:hover { background: #D8D8D8; }
        .product-link--disabled,
        .product-link--primary.product-link--disabled {
            pointer-events: none;
            cursor: not-allowed;
            opacity: 1;
            background: transparent;
            border-color: var(--hairline);
            color: #858D99;
        }

        /* Continuous background: service surfaces never blur the ribbon. */
        .section--group { padding: 2rem 2.5rem 0; }
        .card {
            background: transparent;
            padding: 1.5rem 1.8rem 2rem;
            margin-bottom: 1.25rem;
            border-bottom: none;
            position: relative;
            z-index: 10;
        }
        .card:last-child { margin-bottom: 0; }
        .projects { text-align: center; }
        .projects-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            max-width: 380px;
            margin: 1.6rem auto 0;
        }
        .project-card {
            border: 1px solid var(--hairline);
            border-radius: 6px;
            padding: 0.9rem 1.4rem;
            transition: border-color var(--transition);
        }
        .project-card:hover { border-color: rgba(208,222,244,0.42); }
        .projects-grid .product-disclosure { max-width: none; margin: 0; }
        /* Client references form a separate group without an extra divider. */
        .projects .phase + .phase { padding-top: 0; }
        .projects .phase + .phase::before { display: none; }

        /* ---------- CLIENTS ---------- */
        .clients { padding: 0.6rem 0 0; }
        .clients-label {
            margin: 2.8rem 0 0.2rem;
            color: var(--muted);
            font-size: 0.66rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
        }
        .clients-viewport {
            overflow: hidden;
            padding: 1.7rem 0;
            -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
        }
        .clients-track {
            width: max-content;
            display: flex;
            will-change: transform;
            animation: clients-scroll 36s linear infinite;
        }
        .client-list {
            display: flex;
            flex: none;
            align-items: center;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .client-logo {
            --logo-y: 0px;
            width: 230px;
            height: 96px;
            flex: 0 0 230px;
            display: grid;
            place-items: center;
            padding: 0 1.7rem;
        }
        .client-link {
            width: 100%;
            height: 100%;
            display: grid;
            place-items: center;
            border-radius: 2px;
        }
        .client-link:focus-visible { outline: 2px solid var(--text); outline-offset: 5px; }
        .client-logo img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 76px;
            object-fit: contain;
            opacity: 0.94;
            transform: translateY(var(--logo-y));
            transition: opacity var(--transition), transform var(--transition);
        }
        .client-logo:hover img, .client-link:focus-visible img { opacity: 1; transform: translateY(var(--logo-y)) scale(1.015); }
        .client-logo--advanced-aerial { --logo-y: -2px; }
        .client-logo--land-command { --logo-y: -2px; }
        .client-logo--innovatio { --logo-y: -2px; }
        .client-logo--eos { --logo-y: 2px; }
        .client-logo--optical { --logo-y: -12.8px; }
        .client-logo--innovatio img { max-height: 92px; }
        .client-logo--eos img { max-height: 80px; }
        .client-logo--land-command img { max-height: 66px; }
        .client-logo--optical img { max-height: 130.61px; }
        @keyframes clients-scroll {
            from { transform: translate3d(0, 0, 0); }
            to { transform: translate3d(-50%, 0, 0); }
        }

        /* ---------- ABOUT ---------- */
        .about { max-width: var(--maxw); margin: 0 auto; padding: 8rem 2.5rem 8rem; scroll-margin-top: 5.5rem; background: transparent; position: relative; z-index: 10; text-align: center; }
        .about-statement {
            max-width: 720px;
            font-size: clamp(1.5rem, 3.2vw, 2.2rem);
            font-weight: 300;
            line-height: 1.5;
            letter-spacing: -0.025em;
            color: var(--text);
            margin: 1.5rem auto 0;
            text-wrap: pretty;
        }
        .about-statement em {
            font-style: italic;
            font-size: 0.85em;
            color: var(--muted);
        }

        /* Shared approach typography */
        .studio-title {
            margin: 0 0 1rem;
            font-size: 1.5rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--text);
            text-wrap: balance;
        }
        .studio-copy {
            margin: 0 auto;
            max-width: 620px;
            color: var(--muted);
            font-size: 0.92rem;
            line-height: 1.6;
        }
        .studio-origin {
            margin: 2.5rem auto 0;
            max-width: 620px;
            color: var(--muted);
            font-size: 0.92rem;
            line-height: 1.6;
        }
        .studio-origin em { font-style: italic; color: var(--text); }
        .studio-quote em { color: var(--muted); }

        /* ---------- CONTACT ---------- */
        .contact {
            max-width: var(--maxw);
            margin: 0 auto;
            padding: 2rem 2.5rem 7rem;
            text-align: center;
            scroll-margin-top: 5.5rem;
            position: relative;
            z-index: 10;
        }
        .contact-line {
            margin: 0.8rem 0 0;
            font-size: 0.92rem;
            font-weight: 400;
            letter-spacing: 0.04em;
            color: var(--muted);
        }

        /* ---------- FOOTER ---------- */
        footer {
            border-top: 1px solid var(--hairline);
            max-width: var(--maxw);
            margin: 0 auto;
            padding: 2.6rem 2.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
            background: transparent;
            position: relative;
            z-index: 10;
        }
        .footer-logo { width: 29px; }
        .footer-copy { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.04em; }

        /* ---------- BACK TO TOP ---------- */
        #backToTop {
            position: fixed;
            bottom: 1.8rem; right: 1.8rem;
            z-index: 900;
            display: none;
            background: transparent;
            color: var(--text);
            border: 1px solid var(--hairline);
            border-radius: 50%;
            width: 46px; height: 46px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: background var(--transition), border-color var(--transition);
        }
        #backToTop:hover { border-color: var(--text); }

        /* ---------- RESPONSIVE ---------- */
        @media (max-width: 760px) {
            .nav-toggle { display: inline-block; }
            .nav-right { gap: 1.4rem; }
            header:has(#navMenu.open) { background: rgba(2, 4, 8, 0.70); border-bottom-color: var(--hairline); }
            nav ul {
                position: absolute;
                top: calc(100% + 0.6rem); right: 1.2rem;
                background: rgba(2, 4, 8, 0.70);
                border: 1px solid var(--hairline);
                flex-direction: column;
                align-items: flex-start;
                width: auto;
                min-width: 150px;
                padding: 1.1rem 1.4rem;
                gap: 1rem;
                border-radius: 0;
                display: none;
            }
            nav ul.open { display: flex; animation: menu-drop 0.28s cubic-bezier(.16,1,.3,1) both; }
            @keyframes menu-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
            .offering {
                grid-template-columns: 3rem 1fr;
                gap: 0.6rem 1.4rem;
                row-gap: 0.8rem;
            }
            .offering-desc { grid-column: 1 / -1; }
            .client-logo {
                width: 178px;
                height: 82px;
                flex-basis: 178px;
                padding: 0 1.2rem;
            }
            .client-logo img { max-height: 64px; }
            .client-logo--innovatio img { max-height: 78px; }
            .client-logo--eos img { max-height: 67px; }
            .client-logo--land-command img { max-height: 54px; }
            .client-logo--optical img { max-height: 111.41px; }
        }
        @media (max-width: 520px) {
            .hero-logo { width: clamp(110px, 29vw, 128px); }
            .section--group { padding: 2rem 1.5rem 0; margin-bottom: 3rem; }
            .section-title { margin-bottom: 2rem; }
            .card { padding: 1rem 0 1.5rem; margin-bottom: 1rem; }
            .about { padding: 1rem 1.4rem 1.8rem; }
            .about-statement { font-size: clamp(1.5rem, 6.3vw, 2rem); }
            .navbar { padding: 0.8rem 1.2rem; }
            footer { padding: 2rem 1.5rem; gap: 1.5rem; }
            .footer-copy { font-size: 0.7rem; letter-spacing: 0; }
            .product-actions { flex-direction: column; }
            .projects-grid { grid-template-columns: 1fr; }
            .steps { grid-template-columns: 1fr; gap: 1.1rem; }
            .phase--pair { grid-template-columns: 1fr; }
            .contact { padding: 1rem 1.5rem 5rem; }
            .product-link { width: 100%; }
        }

        /* ---------- ANIMATIONS ---------- */
        @keyframes brand-arrive { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: no-preference) {
            .hero-logo { animation: brand-arrive 1.2s cubic-bezier(.34,1.56,.64,1) both; }
            .offering { transition: transform 0.3s ease; }
            .offering:not(.offering--static):hover { transform: translateY(-6px); }
            /* Scroll reveals: rise and sharpen on entry, reset only when scrolled back above. */
            .reveal-ready .reveal {
                --ry: 36px; --rb: 8px; --rt: 1.15s;
                opacity: 0;
                transform: translateY(var(--ry));
                filter: blur(var(--rb));
                transition: opacity var(--rt), transform var(--rt), filter var(--rt);
                transition-timing-function: cubic-bezier(.215,.61,.355,1);
            }
            .reveal-ready .reveal.in { opacity: 1; transform: none; filter: none; transition-delay: var(--rd, 0s); }
            .reveal-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
            .reveal-char {
                display: inline-block;
                transform: translateY(120%);
                opacity: 0;
                filter: blur(6px);
                transition: transform 0.9s, opacity 0.9s, filter 0.9s;
                transition-timing-function: cubic-bezier(.215,.61,.355,1);
                transition-delay: calc(var(--i) * 45ms);
            }
            .in .reveal-char { transform: none; opacity: 1; filter: none; }
        }
        @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
            /* Stacked items enter separately, so they do not need the desktop row delay. */
            .reveal-ready .reveal.in { transition-delay: 0s; }
        }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            nav ul.open { animation: none; }
            .clients-viewport {
                overflow: visible;
                -webkit-mask-image: none;
                mask-image: none;
            }
            .clients-track {
                width: 100%;
                animation: none;
                will-change: auto;
            }
            .client-list:first-child {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                justify-items: center;
            }
            .client-list[aria-hidden="true"] { display: none; }
            .client-logo {
                width: 100%;
                max-width: 220px;
            }
            .client-logo img { transition: none; }
        }

        /* Lenis smooth scroll */
        html.lenis, html.lenis body { height: auto; }
        .lenis.lenis-smooth { scroll-behavior: auto !important; }
        .lenis.lenis-stopped { overflow: hidden; }

        /* Smooth transitions for interactive elements */
        .offering { cursor: pointer; }
        .offering-toggle, .offering-desc { transition: color 0.4s ease; }
        nav ul li a { transition: color 0.4s ease; }
        #backToTop { transition: background var(--transition), border-color var(--transition); }