/* =====================================================
           DESIGN CSS
        ====================================================== */
		
		/* roboto-300 - latin */
		
		@font-face {
		  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
		  font-family: 'Roboto';
		  font-style: normal;
		  font-weight: 300;
		  src: url('../fonts/roboto-v51-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		}

		/* roboto-regular - latin */
		@font-face {
		  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
		  font-family: 'Roboto';
		  font-style: normal;
		  font-weight: 400;
		  src: url('../fonts/roboto-v51-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		}

		/* roboto-500 - latin */
		@font-face {
		  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
		  font-family: 'Roboto';
		  font-style: normal;
		  font-weight: 500;
		  src: url('../fonts/roboto-v51-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		}

		/* roboto-600 - latin */
		@font-face {
		  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
		  font-family: 'Roboto';
		  font-style: normal;
		  font-weight: 600;
		  src: url('../fonts/roboto-v51-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		}

		/* roboto-700 - latin */
		@font-face {
		  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
		  font-family: 'Roboto';
		  font-style: normal;
		  font-weight: 700;
		  src: url('../fonts/roboto-v51-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		}

		/* roboto-800 - latin */
		@font-face {
		  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
		  font-family: 'Roboto';
		  font-style: normal;
		  font-weight: 800;
		  src: url('../fonts/roboto-v51-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		}

		/* roboto-900 - latin */
		@font-face {
		  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
		  font-family: 'Roboto';
		  font-style: normal;
		  font-weight: 900;
		  src: url('../fonts/roboto-v51-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		}

        :root {
            --black:
                #080808;
            --black-2:
                #111111;
            --white:
                #f7f7f4;
            --paper:
                #efefec;
            --text:
                #080808;
            --surface:
                #efefec;
            --surface-2:
                #e7e7e3;
            --line:
                rgba(8,8,8,.14);
            --line-strong:
                rgba(8,8,8,.28);
            --muted:
                #6f6f6b;
            --red:
                #ff3030;
            --ease:
                cubic-bezier(.22,1,.36,1);
            --max:
                1680px;
        }
        /* =====================================================
           DARK MODE
        ====================================================== */
        html[data-theme="dark"] {
            --text:
                #f7f7f4;
            --surface:
                #080808;
            --surface-2:
                #111111;
            --line:
                rgba(255,255,255,.14);
            --line-strong:
                rgba(255,255,255,.28);
            --muted:
                #999994;
        }
        /* =====================================================
           RESET
        ====================================================== */
        * {
            box-sizing:
                border-box;
        }
        html {
            scroll-behavior:
                smooth;
            background:
                var(--surface);
        }
        body {
            margin:
                0;
            background:
                var(--surface);
            color:
                var(--text);
            font-family:
                "Roboto",
                Arial,
                sans-serif;
            -webkit-font-smoothing:
                antialiased;
            text-rendering:
                optimizeLegibility;
            overflow-x:
                hidden;
            transition:
                background .45s var(--ease),
                color .45s var(--ease);
        }
        body.menu-open {
            overflow:
                hidden;
        }
        a {
            color:
                inherit;
        }
        button {
            font:
                inherit;
        }
        .mono {
            font-family:
                "Roboto Mono",
                monospace;
        }
        /* =====================================================
           PAGE
        ====================================================== */
        .page {
            width:
                min(100%, var(--max));
            margin:
                0 auto;
            padding:
                0 32px;
        }
        .section {
            position:
                relative;
            border-bottom:
                1px solid var(--line);
        }
        .eyebrow {
            font-size:
                10px;
            font-weight:
                700;
            letter-spacing:
                .16em;
            text-transform:
                uppercase;
        }
        .red {
            color:
                var(--red);
        }
        .outline {
            color:
                transparent;
            -webkit-text-stroke:
                1px var(--line-strong);
        }
        /* =====================================================
           HEADER
        ====================================================== */
        .site-header {
            position:
                relative;
            min-height:
                92px;
            display:
                grid;
            grid-template-columns:
                1fr
                auto
                1fr;
            align-items:
                center;
            border-bottom:
                1px solid var(--line);
        }
        /* BRAND */
        .brand {
            display:
                inline-flex;
            align-items:
                center;
            gap:
                14px;
            width:
                max-content;
            color:
                var(--text);
            text-decoration:
                none;
            font-size:
                13px;
            font-weight:
                800;
            letter-spacing:
                -.035em;
        }
        .brand-mark {
            position:
                relative;
            width:
                33px;
            height:
                33px;
            display:
                grid;
            place-items:
                center;
            background:
                var(--text);
            color:
                var(--surface);
            font-size:
                17px;
            font-weight:
                900;
            transition:
                background .35s var(--ease),
                color .35s var(--ease),
                transform .45s var(--ease);
        }
        .brand-mark::after {
            content:
                "";
            position:
                absolute;
            inset:
                0;
            border:
                1px solid var(--red);
            opacity:
                0;
            transform:
                scale(.7);
            transition:
                opacity .35s ease,
                transform .35s var(--ease);
        }
        .brand:hover .brand-mark {
            background:
                var(--red);
            color:
                white;
            transform:
                rotate(90deg);
        }
        .brand:hover .brand-mark::after {
            opacity:
                1;
            transform:
                scale(1);
        }
        .brand-slash {
            color:
                var(--red);
            margin-left:
                3px;
        }
        /* HEADER NAV */
        .header-nav {
            display:
                flex;
            align-items:
                center;
            gap:
                42px;
            padding:
                0 40px;
        }
        .nav-link {
            position:
                relative;
            display:
                flex;
            align-items:
                center;
            gap:
                8px;
            height:
                50px;
            color:
                var(--muted);
            text-decoration:
                none;
            font-size:
                10px;
            font-weight:
                700;
            letter-spacing:
                .09em;
            text-transform:
                uppercase;
            white-space:
                nowrap;
            transition:
                color .3s ease;
        }
        .nav-index {
            color:
                var(--red);
            font-size:
                8px;
            font-weight:
                600;
            opacity:
                .55;
            transition:
                opacity .3s ease;
        }
        .nav-text {
            position:
                relative;
            padding:
                7px 0;
        }
        .nav-text::after {
            content:
                "";
            position:
                absolute;
            left:
                0;
            bottom:
                -5px;
            width:
                100%;
            height:
                1px;
            background:
                var(--red);
            transform:
                scaleX(0);
            transform-origin:
                left;
            transition:
                transform .4s var(--ease);
        }
        .nav-link:hover {
            color:
                var(--text);
        }
        .nav-link:hover .nav-index {
            opacity:
                1;
        }
        .nav-link:hover .nav-text::after {
            transform:
                scaleX(1);
        }
        .header-right {
            display:
                flex;
            justify-content:
                flex-end;
            align-items:
                center;
        }
        /* =====================================================
           THEME BUTTON
        ====================================================== */
        .theme-toggle {
            width:
                38px;
            height:
                38px;
            display:
                grid;
            place-items:
                center;
            border:
                1px solid var(--line-strong);
            background:
                transparent;
            color:
                var(--text);
            cursor:
                pointer;
            transition:
                background .25s ease,
                color .25s ease;
        }
        .theme-toggle:hover {
            background:
                var(--text);
            color:
                var(--surface);
        }
        .theme-icon {
            position:
                relative;
            width:
                15px;
            height:
                15px;
            border-radius:
                50%;
            background:
                currentColor;
        }
        .theme-icon::before {
            content:
                "";
            position:
                absolute;
            width:
                15px;
            height:
                15px;
            top:
                -3px;
            left:
                4px;
            border-radius:
                50%;
            background:
                var(--surface);
        }
        html[data-theme="dark"] .theme-icon {
            background:
                transparent;
            border:
                1px solid currentColor;
        }
        html[data-theme="dark"] .theme-icon::before {
            display:
                none;
        }
        /* =====================================================
           404 HERO
        ====================================================== */
        .error-hero {
            min-height:
                400px;
            display:
                grid;
            grid-template-columns:
                repeat(12,1fr);
            column-gap:
                24px;
            align-items:
                center;
            overflow:
                hidden;
        }
        .error-label {
            position:
                absolute;
            top:
                50px;
            left:
                0;
            writing-mode:
                vertical-rl;
            transform:
                rotate(180deg);
            font-size:
                9px;
            font-weight:
                700;
            letter-spacing:
                .16em;
            text-transform:
                uppercase;
        }
        .error-label::after {
            content:
                "";
            display:
                block;
            width:
                1px;
            height:
                60px;
            margin:
                15px auto 0;
            background:
                var(--red);
        }
        .error-content {
            grid-column:
                2 / 11;
            position:
                relative;
            z-index:
                3;
        }
        .kicker {
            display:
                flex;
            align-items:
                center;
            gap:
                12px;
            margin-bottom:
                28px;
            color:
                var(--red);
            font-size:
                10px;
            font-weight:
                700;
            letter-spacing:
                .15em;
            text-transform:
                uppercase;
        }
        .kicker::before {
            content:
                "";
            width:
                44px;
            height:
                2px;
            background:
                var(--red);
        }
        .error-code {
            margin:
                0;
            font-size:
                clamp(145px, 21vw, 340px);
            line-height:
                .7;
            letter-spacing:
                -.11em;
            font-weight:
                900;
            color:
                var(--text);
        }
        .error-code span {
            color:
                transparent;
            -webkit-text-stroke:
                1px var(--line-strong);
        }
        .error-message {
            max-width:
                700px;
            margin-top:
                55px;
            padding-top:
                23px;
            border-top:
                1px solid var(--line);
        }
        .error-message h1 {
            margin:
                0;
            font-size:
                clamp(38px, 5vw, 70px);
            line-height:
                .9;
            letter-spacing:
                -.065em;
            font-weight:
                800;
        }
        .error-message p {
            max-width:
                600px;
            margin:
                28px 0 0;
            color:
                var(--muted);
            font-size:
                16px;
            line-height:
                1.75;
        }
        .error-message strong {
            color:
                var(--text);
            font-weight:
                700;
        }
        .error-actions {
            display:
                flex;
            flex-wrap:
                wrap;
            gap:
                12px;
            margin-top:
                32px;
        }
        /* =====================================================
           BUTTON
        ====================================================== */
        .button {
            display:
                inline-flex;
            align-items:
                center;
            justify-content:
                space-between;
            min-width:
                220px;
            padding:
                17px 18px;
            background:
                var(--text);
            color:
                var(--surface);
            text-decoration:
                none;
            font-size:
                10px;
            font-weight:
                700;
            letter-spacing:
                .1em;
            text-transform:
                uppercase;
            transition:
                background .25s ease,
                color .25s ease,
                transform .25s ease;
        }
        .button span {
            color:
                var(--red);
            font-size:
                18px;
            transition:
                .25s ease;
        }
        .button:hover {
            background:
                var(--red);
            color:
                white;
            transform:
                translateY(-2px);
        }
        .button:hover span {
            color:
                white;
            transform:
                translate(4px,-4px);
        }
        .button.secondary {
            background:
                transparent;
            color:
                var(--text);
            border:
                1px solid var(--line-strong);
        }
        .button.secondary:hover {
            background:
                var(--text);
            color:
                var(--surface);
        }
        /* GIANT BACKGROUND NUMBER */
        .error-number {
            position:
                absolute;
            right:
                -35px;
            bottom:
                -115px;
            color:
                transparent;
            -webkit-text-stroke:
                1px var(--line);
            font-size:
                clamp(360px, 48vw, 760px);
            line-height:
                .65;
            letter-spacing:
                -.14em;
            font-weight:
                900;
            pointer-events:
                none;
            user-select:
                none;
            animation:
                slowFloat 8s ease-in-out infinite;
        }
        @keyframes slowFloat {
            0%,
            100% {
                transform:
                    translateX(0);
            }
            50% {
                transform:
                    translateX(-15px);
            }
        }
        /* =====================================================
           HUMOR STRIP
        ====================================================== */
        .status-strip {
            min-height:
                95px;
            display:
                grid;
            grid-template-columns:
                1fr
                auto
                1fr;
            align-items:
                center;
            border-bottom:
                1px solid var(--line);
        }
        .status-left {
            color:
                var(--muted);
            font-size:
                10px;
            letter-spacing:
                .08em;
            text-transform:
                uppercase;
        }
        .status-center {
            padding:
                0 50px;
            font-size:
                12px;
            font-weight:
                600;
            text-align:
                center;
        }
        .status-center .dot {
            display:
                inline-block;
            width:
                6px;
            height:
                6px;
            margin-right:
                8px;
            border-radius:
                50%;
            background:
                var(--red);
            box-shadow:
                0 0 0 5px rgba(255,48,48,.08);
        }
        .status-right {
            display:
                flex;
            justify-content:
                flex-end;
            color:
                var(--muted);
            font-size:
                9px;
        }
        /* =====================================================
           SERVICES
        ====================================================== */
        .services {
            padding:
                115px 0 120px;
        }
        .services-header {
            display:
                grid;
            grid-template-columns:
                repeat(12,1fr);
            column-gap:
                24px;
            margin-bottom:
                60px;
        }
        .services-label {
            grid-column:
                1 / 3;
        }
        .services-title {
            grid-column:
                4 / 11;
        }
        .services-title h2 {
            margin:
                0;
            font-size:
                clamp(58px,7vw,105px);
            line-height:
                .8;
            letter-spacing:
                -.08em;
            font-weight:
                900;
            text-transform:
                uppercase;
        }
        .services-title p {
            max-width:
                610px;
            margin:
                32px 0 0;
            color:
                var(--muted);
            font-size:
                15px;
            line-height:
                1.75;
        }
        .service-grid {
            display:
                grid;
            grid-template-columns:
                repeat(2,1fr);
            border-top:
                1px solid var(--line);
            border-left:
                1px solid var(--line);
        }
        .service {
            position:
                relative;
            min-height:
                280px;
            padding:
                27px;
            border-right:
                1px solid var(--line);
            border-bottom:
                1px solid var(--line);
            overflow:
                hidden;
            transition:
                background .3s ease,
                color .3s ease;
        }
        .service::after {
            content:
                "";
            position:
                absolute;
            left:
                0;
            bottom:
                0;
            width:
                100%;
            height:
                3px;
            background:
                var(--red);
            transform:
                scaleX(0);
            transform-origin:
                left;
            transition:
                transform .4s var(--ease);
        }
        .service:hover {
            background:
                var(--text);
            color:
                var(--surface);
        }
        .service:hover::after {
            transform:
                scaleX(1);
        }
        .service-number {
            color:
                var(--red);
            font-size:
                10px;
            font-weight:
                700;
        }
        .service-icon {
            position:
                absolute;
            top:
                20px;
            right:
                25px;
            color:
                var(--line-strong);
            font-size:
                34px;
            font-weight:
                300;
        }
        .service h3 {
            margin:
                72px 0 13px;
            font-size:
                27px;
            line-height:
                .95;
            letter-spacing:
                -.045em;
            font-weight:
                800;
        }
        .service p {
            max-width:
                460px;
            margin:
                0;
            color:
                var(--muted);
            font-size:
                13px;
            line-height:
                1.75;
        }
        .service:hover p {
            color:
                #aaa;
        }
        /* =====================================================
           DARK SERVICE STATEMENT
        ====================================================== */
        .dark-section {
            position:
                relative;
            min-height:
                600px;
            background:
                #080808;
            color:
                #f7f7f4;
            overflow:
                hidden;
        }
        .dark-inner {
            min-height:
                600px;
            display:
                grid;
            grid-template-columns:
                repeat(12,1fr);
            column-gap:
                24px;
            align-items:
                center;
        }
        .dark-label {
            grid-column:
                1 / 3;
            align-self:
                start;
            padding-top:
                45px;
            color:
                #777;
        }
        .dark-content {
            grid-column:
                3 / 10;
            position:
                relative;
            z-index:
                2;
        }
        .dark-content h2 {
            margin:
                0;
            font-size:
                clamp(55px,7vw,105px);
            line-height:
                .79;
            letter-spacing:
                -.085em;
            font-weight:
                900;
            text-transform:
                uppercase;
        }
        .dark-content h2 span {
            color:
                var(--red);
        }
        .dark-content p {
            max-width:
                600px;
            margin:
                35px 0 0;
            color:
                #aaa;
            font-size:
                15px;
            line-height:
                1.75;
        }
        .dark-meta {
            display:
                flex;
            flex-wrap:
                wrap;
            gap:
                35px;
            margin-top:
                42px;
            padding-top:
                18px;
            border-top:
                1px solid rgba(255,255,255,.14);
        }
        .dark-meta-item {
            display:
                flex;
            flex-direction:
                column;
            gap:
                5px;
        }
        .dark-meta-item span:first-child {
            color:
                #666;
            font-size:
                8px;
            letter-spacing:
                .13em;
            text-transform:
                uppercase;
        }
        .dark-meta-item span:last-child {
            color:
                #f7f7f4;
            font-size:
                12px;
            font-weight:
                600;
        }
        .dark-number {
            position:
                absolute;
            right:
                -20px;
            bottom:
                -110px;
            color:
                transparent;
            -webkit-text-stroke:
                1px rgba(255,255,255,.08);
            font-size:
                clamp(350px,45vw,700px);
            line-height:
                .65;
            font-weight:
                900;
        }
        /* =====================================================
           CTA
        ====================================================== */
        .final {
            min-height:
                520px;
            display:
                grid;
            grid-template-columns:
                repeat(12,1fr);
            column-gap:
                24px;
            align-items:
                center;
        }
        .final-label {
            grid-column:
                1 / 3;
            align-self:
                start;
            padding-top:
                45px;
        }
        .final-content {
            grid-column:
                3 / 10;
        }
        .final-content h2 {
            margin:
                0;
            font-size:
                clamp(60px,7vw,110px);
            line-height:
                .78;
            letter-spacing:
                -.09em;
            font-weight:
                900;
            text-transform:
                uppercase;
        }
        .final-content p {
            max-width:
                560px;
            margin:
                30px 0;
            color:
                var(--muted);
            font-size:
                15px;
            line-height:
                1.75;
        }
        /* =====================================================
           FOOTER
        ====================================================== */
        footer {
            min-height:
                90px;
            display:
                grid;
            grid-template-columns:
                repeat(12,1fr);
            column-gap:
                24px;
            align-items:
                center;
        }
        .footer-left {
            grid-column:
                1 / 5;
            color:
                var(--muted);
            font-size:
                9px;
            line-height:
                1.5;
        }
        .footer-center {
            grid-column:
                5 / 9;
            text-align:
                center;
            font-size:
                9px;
        }
        .footer-right {
            grid-column:
                10 / 13;
            display:
                flex;
            justify-content:
                flex-end;
            gap:
                20px;
            font-size:
                9px;
            font-weight:
                700;
            text-transform:
                uppercase;
        }
        .footer-right a {
            text-decoration:
                none;
            transition:
                color .2s ease;
        }
        .footer-right a:hover {
            color:
                var(--red);
        }
        /* =====================================================
           FLOATING NAVIGATION
        ====================================================== */
        .nav-trigger {
            position:
                fixed;
            right:
                24px;
            top:
                50%;
            transform:
                translateY(-50%);
            z-index:
                1001;
            width:
                52px;
            height:
                52px;
            border:
                1px solid rgba(255,255,255,.25);
            background:
                #080808;
            color:
                #f7f7f4;
            display:
                grid;
            place-items:
                center;
            cursor:
                pointer;
            box-shadow:
                0 15px 40px rgba(0,0,0,.16);
            transition:
                background .25s ease,
                transform .25s ease;
        }
        .nav-trigger:hover {
            background:
                var(--red);
            transform:
                translateY(-50%)
                scale(1.04);
        }
        .nav-trigger-inner {
            width:
                19px;
            display:
                flex;
            flex-direction:
                column;
            gap:
                5px;
        }
        .nav-trigger-inner span {
            display:
                block;
            width:
                100%;
            height:
                1px;
            background:
                currentColor;
            transition:
                .25s ease;
        }
        body.menu-open
        .nav-trigger-inner
        span:nth-child(1) {
            transform:
                translateY(6px)
                rotate(45deg);
        }
        body.menu-open
        .nav-trigger-inner
        span:nth-child(2) {
            opacity:
                0;
        }
        body.menu-open
        .nav-trigger-inner
        span:nth-child(3) {
            transform:
                translateY(-6px)
                rotate(-45deg);
        }
        /* =====================================================
           NAV PANEL
        ====================================================== */
        .nav-panel {
            position:
                fixed;
            top:
                50%;
            right:
                88px;
            transform:
                translate(25px,-50%)
                scale(.97);
            width:
                min(390px,calc(100vw - 32px));
            max-height:
                min(700px,calc(100vh - 32px));
            padding:
                28px;
            background:
                rgba(9,9,9,.97);
            color:
                #f7f7f4;
            border:
                1px solid rgba(255,255,255,.15);
            box-shadow:
                0 30px 90px rgba(0,0,0,.35);
            opacity:
                0;
            visibility:
                hidden;
            pointer-events:
                none;
            overflow-y:
                auto;
            z-index:
                1000;
            transition:
                opacity .25s ease,
                transform .25s ease,
                visibility .25s ease;
        }
        body.menu-open .nav-panel {
            opacity:
                1;
            visibility:
                visible;
            pointer-events:
                auto;
            transform:
                translate(0,-50%)
                scale(1);
        }
        .nav-panel-header {
            display:
                flex;
            justify-content:
                space-between;
            align-items:
                flex-start;
            padding-bottom:
                20px;
            margin-bottom:
                10px;
            border-bottom:
                1px solid rgba(255,255,255,.14);
        }
        .nav-panel-header span:first-child {
            font-size:
                10px;
            font-weight:
                700;
            letter-spacing:
                .15em;
            text-transform:
                uppercase;
        }
        .nav-panel-header span:last-child {
            color:
                var(--red);
            font-size:
                9px;
        }
        .nav-list {
            list-style:
                none;
            padding:
                0;
            margin:
                0;
        }
        .nav-list li {
            border-bottom:
                1px solid rgba(255,255,255,.14);
        }
        .nav-list a {
            position:
                relative;
            display:
                grid;
            grid-template-columns:
                35px
                1fr
                auto;
            align-items:
                center;
            gap:
                10px;
            padding:
                17px 0;
            text-decoration:
                none;
            transition:
                .2s ease;
        }
        .nav-list a::before {
            content:
                "";
            position:
                absolute;
            left:
                -28px;
            top:
                0;
            bottom:
                0;
            width:
                3px;
            background:
                var(--red);
            transform:
                scaleY(0);
            transform-origin:
                bottom;
            transition:
                .2s ease;
        }
        .nav-list a:hover {
            padding-left:
                8px;
        }
        .nav-list a:hover::before {
            transform:
                scaleY(1);
        }
        .nav-number {
            color:
                var(--red);
            font-size:
                9px;
            font-weight:
                700;
        }
        .nav-title {
            font-size:
                15px;
            font-weight:
                600;
            letter-spacing:
                -.02em;
        }
        .nav-arrow {
            color:
                #777;
            transition:
                .2s ease;
        }
        .nav-list a:hover .nav-arrow {
            color:
                var(--red);
            transform:
                translate(4px,-4px);
        }
        .nav-footer {
            padding-top:
                22px;
            color:
                #777;
            font-size:
                9px;
            line-height:
                1.6;
        }
        .nav-footer strong {
            color:
                white;
        }
        /* =====================================================
           OVERLAY
        ====================================================== */
        .nav-overlay {
            position:
                fixed;
            inset:
                0;
            background:
                rgba(0,0,0,.3);
            backdrop-filter:
                blur(3px);
            opacity:
                0;
            visibility:
                hidden;
            pointer-events:
                none;
            z-index:
                999;
            transition:
                .25s ease;
        }
        body.menu-open .nav-overlay {
            opacity:
                1;
            visibility:
                visible;
            pointer-events:
                auto;
        }
        /* =====================================================
           RESPONSIVE
        ====================================================== */
        @media (max-width:1100px) {
            .page {
                padding:
                    0 22px;
            }
            .header-nav {
                gap:
                    28px;
                padding:
                    0 24px;
            }
            .error-content {
                grid-column:
                    1 / 11;
            }
            .nav-trigger {
                right:
                    18px;
            }
            .nav-panel {
                right:
                    80px;
            }
        }
        @media (max-width:760px) {
            .page {
                padding:
                    0 16px;
            }
            /* HEADER */
            .site-header {
                min-height:
                    70px;
                grid-template-columns:
                    1fr auto;
            }
            .header-nav {
                display:
                    none;
            }
            .brand {
                font-size:
                    11px;
                gap:
                    11px;
            }
            .brand-mark {
                width:
                    29px;
                height:
                    29px;
            }
            /* HERO */
            .error-hero {
                display:
                    block;
                min-height:
                    auto;
                padding:
                    75px 0 100px;
            }
            .error-label {
                position:
                    static;
                writing-mode:
                    initial;
                transform:
                    none;
                margin-bottom:
                    38px;
            }
            .error-label::after {
                display:
                    inline-block;
                width:
                    30px;
                height:
                    1px;
                margin:
                    0 0 2px 10px;
            }
            .error-code {
                font-size:
                    39vw;
            }
            .error-message {
                margin-top:
                    50px;
            }
            .error-message h1 {
                font-size:
                    43px;
            }
            .error-message p {
                font-size:
                    14px;
                line-height:
                    1.75;
            }
            .error-actions {
                display:
                    block;
            }
            .button {
                width:
                    100%;
                min-width:
                    0;
                margin-bottom:
                    10px;
            }
            .error-number {
                right:
                    -20px;
                bottom:
                    -40px;
                font-size:
                    78vw;
            }
            /* STATUS */
            .status-strip {
                display:
                    block;
                padding:
                    25px 0;
            }
            .status-center {
                padding:
                    18px 0;
                text-align:
                    left;
            }
            .status-right {
                justify-content:
                    flex-start;
            }
            /* SERVICES */
            .services {
                padding:
                    75px 0 85px;
            }
            .services-header {
                display:
                    block;
                margin-bottom:
                    40px;
            }
            .services-label {
                margin-bottom:
                    28px;
            }
            .services-title h2 {
                font-size:
                    57px;
            }
            .services-title p {
                font-size:
                    14px;
            }
            .service-grid {
                display:
                    block;
            }
            .service {
                min-height:
                    255px;
            }
            /* DARK */
            .dark-section {
                min-height:
                    auto;
            }
            .dark-inner {
                display:
                    block;
                min-height:
                    auto;
                padding:
                    75px 0 95px;
            }
            .dark-label {
                padding:
                    0;
                margin-bottom:
                    35px;
            }
            .dark-content h2 {
                font-size:
                    56px;
            }
            .dark-content p {
                font-size:
                    14px;
            }
            .dark-number {
                right:
                    -20px;
                bottom:
                    -45px;
                font-size:
                    75vw;
            }
            /* CTA */
            .final {
                display:
                    block;
                min-height:
                    auto;
                padding:
                    75px 0 95px;
            }
            .final-label {
                padding:
                    0;
                margin-bottom:
                    35px;
            }
            .final-content h2 {
                font-size:
                    61px;
            }
            .final-content p {
                font-size:
                    14px;
            }
            /* FOOTER */
            footer {
                display:
                    block;
                padding:
                    28px 0;
            }
            .footer-center {
                margin:
                    22px 0;
                text-align:
                    left;
            }
            .footer-right {
                justify-content:
                    flex-start;
                flex-wrap:
                    wrap;
            }
            /* MOBILE NAV */
            .nav-trigger {
                right:
                    16px;
                top:
                    auto;
                bottom:
                    18px;
                transform:
                    none;
                width:
                    50px;
                height:
                    50px;
            }
            .nav-trigger:hover {
                transform:
                    scale(1.04);
            }
            .nav-panel {
                top:
                    auto;
                right:
                    10px;
                bottom:
                    78px;
                width:
                    calc(100vw - 20px);
                max-height:
                    calc(100vh - 105px);
                transform:
                    translateY(15px)
                    scale(.98);
            }
            body.menu-open .nav-panel {
                transform:
                    translateY(0)
                    scale(1);
            }
        }
        @media (max-width:430px) {
            .brand-name {
                max-width:
                    190px;
            }
            .error-message h1 {
                font-size:
                    38px;
            }
            .services-title h2 {
                font-size:
                    50px;
            }
            .dark-content h2 {
                font-size:
                    51px;
            }
            .final-content h2 {
                font-size:
                    54px;
            }
            .nav-panel {
                padding:
                    22px;
            }
        }
        /* =====================================================
           REDUCED MOTION
        ====================================================== */
        @media (prefers-reduced-motion:reduce) {
            html {
                scroll-behavior:
                    auto;
            }
            *,
            *::before,
            *::after {
                animation:
                    none !important;
                transition:
                    none !important;
            }
        }