/* Self-hosted variable fonts — no external request, no FOUT dependency on a third party.
Archivo (wdth 62..125, wght 400..900) · Inter Tight (400..600) · Martian Mono (wdth 87.5..112.5, wght 400..700) */
/* vietnamese */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 900;
font-stretch: 62% 125%;
font-display: swap;
src: url(../fonts/archivo-k3kQo8UDI-1M0wlSfdboLnnA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 900;
font-stretch: 62% 125%;
font-display: swap;
src: url(../fonts/archivo-k3kQo8UDI-1M0wlSfdfoLnnA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 900;
font-stretch: 62% 125%;
font-display: swap;
src: url(../fonts/archivo-k3kQo8UDI-1M0wlSfdnoLg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsK8ah8QA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsD8ah8QA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsL8ah8QA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsE8ah8QA.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsI8ah8QA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsK8ah8QA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsD8ah8QA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsL8ah8QA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsE8ah8QA.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsI8ah8QA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsK8ah8QA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsD8ah8QA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsL8ah8QA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsE8ah8QA.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsI8ah8QA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/intertight-NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Martian Mono';
font-style: normal;
font-weight: 400 700;
font-stretch: 87.5% 112.5%;
font-display: swap;
src: url(../fonts/martianmono-2V0aKIcADoYhV6w87xrTKjsSCKnIV2U.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Martian Mono';
font-style: normal;
font-weight: 400 700;
font-stretch: 87.5% 112.5%;
font-display: swap;
src: url(../fonts/martianmono-2V0aKIcADoYhV6w87xrTKjsSAanIV2U.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Martian Mono';
font-style: normal;
font-weight: 400 700;
font-stretch: 87.5% 112.5%;
font-display: swap;
src: url(../fonts/martianmono-2V0aKIcADoYhV6w87xrTKjsSC6nIV2U.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Martian Mono';
font-style: normal;
font-weight: 400 700;
font-stretch: 87.5% 112.5%;
font-display: swap;
src: url(../fonts/martianmono-2V0aKIcADoYhV6w87xrTKjsSBanI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
CONNEXT — APPLIED AI SYSTEMS
Art direction: KINETIC MACHINE / "Connext Assembly Line"
Doc CX-WEB-001 · REV 4
THE RULES THIS FILE ENFORCES
- Zero border-radius, zero box-shadow, zero blur, zero backdrop-filter.
Depth is four tonal steps of graphite plus 1px rules. Anything else is a bug.
- One accent (--signal) rationed; --volt is live-status only, never type.
- Three durations only: 0.24s state / 0.6s lock / 1.1s assemble.
- CSS ships every element in its FINAL state. Animation start states live
ONLY under html.js-anim, which JS adds after confirming window.gsap.
Vendor scripts blocked => complete, readable page.
==========================================================================
PLATE MANIFEST — THE CLIENT ASSET BRIEF
Every .plate is a photo slot. Drop 
in as the plate's FIRST child and the placeholder art hides itself; the
registration marks, reticle, IMG tag and caption bar stay as furniture.
aspect-ratio is pre-reserved, so there is zero layout shift on handover.
ID SECTION ASPECT MIN PX SUBJECT
CX-IMG-0031 industries 16 / 10 1600 × 1000 financial services floor
CX-IMG-0032 industries 16 / 10 1600 × 1000 insurance operations team
CX-IMG-0033 industries 16 / 10 1600 × 1000 manufacturing line
CX-IMG-0034 industries 16 / 10 1600 × 1000 logistics yard / city grid
CX-IMG-0035 industries 16 / 10 1600 × 1000 data centre / server hall
CX-IMG-0036 industries 16 / 10 1600 × 1000 public sector control room
CX-IMG-0041 evidence 16 / 10 1600 × 1000 insurer — claims operations
CX-IMG-0042 evidence 4 / 5 1200 × 1500 manufacturer — plant floor
CX-IMG-0043 evidence 16 / 10 1600 × 1000 logistics — dispatch desk
CX-IMG-0051 contact 3 / 2 1500 × 1000 Sofia office exterior
========================================================================== */
/* ---------- 1. DESIGN TOKENS ---------- */
:root {
/* Ground — four tonal steps of graphite, nothing else */
--ink-900: #08090B;
--ink-800: #0E1014;
--ink-700: #14171D;
--ink-600: #1B1F27;
/* Structure */
--steel-500: #262B35;
--steel-400: #39404E;
--steel-350: #5C6675; /* DECORATIVE ONLY — never carries a character */
--steel-300: #7B8798; /* darkest tone permitted for text */
/* Type */
--bone-300: #9AA2AE;
--bone-200: #C7CBD2;
--bone-100: #F0EEE9;
--paper-100: #E9E6DF;
--paper-ink: #0B0C0F;
/* Accent — rationed */
--signal: #FC6E02;
--signal-600: #D35C01;
--signal-wash: rgba(252,110,2, 0.10);
--signal-rule: rgba(252,110,2, 0.38);
/* Live status only */
--volt: #C6F24A;
--volt-wash: rgba(198, 242, 74, 0.14);
/* Blueprint data lanes */
--lane-a: #4C7FB8;
--lane-b: #FC6E02;
--lane-c: #C6F24A;
/* Printed grid + atmosphere */
--grid-line: rgba(57, 64, 78, 0.55);
--grid-line-soft: rgba(57, 64, 78, 0.28);
--scan: rgba(252,110,2, 0.55);
--scan-edge: rgba(252,110,2, 0.30);
--lattice: rgba(57, 64, 78, 0.42);
--noise: rgba(240, 238, 233, 0.024);
--focus-ring: rgba(252,110,2, 0.55);
/* Hard geometry */
--radius: 0px;
--rule: 1px;
--shadow-none: none;
/* Families */
--font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
/* Scale */
--fs-hero: clamp(3.2rem, 9.2vw, 8.5rem);
--fs-title: clamp(2.1rem, 5vw, 4.4rem);
--fs-block: clamp(1.3rem, 2.2vw, 1.85rem);
--fs-figure: clamp(3.6rem, 8vw, 8rem);
--fs-body: 1.0125rem;
--fs-mono: 0.66rem;
--fs-mono-sm: 0.6rem;
/* Measure & rhythm */
--measure: 58ch;
--container-max: 1320px;
--container-wide: 1560px;
--container-pad: clamp(20px, 4.4vw, 56px);
--gutter: clamp(14px, 1.6vw, 26px);
--section-pad: clamp(88px, 11vw, 160px);
--bar-h: 64px;
/* Motion — CSS mirrors of the two registered CustomEases */
--ease-machine: cubic-bezier(0.12, 0.62, 0.16, 1);
--ease-servo: cubic-bezier(0.28, 1.02, 0.4, 0.99);
--t-state: 0.24s;
--t-lock: 0.6s;
--t-assemble: 1.1s;
/* The depth law */
--depth-grid: 0.15;
--depth-canvas: 0.35;
--depth-svg: 0.55;
--depth-panel: 0.7;
--depth-type: 1;
--parallax-pointer: 22px;
--parallax-scroll: 120px;
--plate-ar: 16 / 10;
--pin-budget: 400vh; /* platform 240vh + architecture 160vh */
}
/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--bar-h) + 24px);
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.62;
color: var(--bone-200);
background: var(--ink-900);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-variant-numeric: tabular-nums;
}
img, svg, canvas, video { display: block; max-width: 100%; }
svg { overflow: visible; }
p { max-width: var(--measure); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; border-radius: var(--radius); }
button { cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--signal); color: var(--paper-ink); }
:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius);
}
.skip-link {
position: fixed;
top: 8px; left: 8px;
z-index: 10000;
padding: 12px 20px;
background: var(--signal);
color: var(--paper-ink);
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: 0.14em;
text-transform: uppercase;
transform: translateY(-200%);
transition: transform var(--t-state) var(--ease-machine);
}
.skip-link:focus { transform: translateY(0); }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ---------- 3. LAYOUT ---------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.container--wide { max-width: var(--container-wide); }
.section {
position: relative;
padding-block: var(--section-pad);
background: var(--ink-900);
}
.section--alt { background: var(--ink-800); }
.section--flush { padding-block: 0; }
.section-header { margin-bottom: clamp(48px, 6vw, 88px); }
.section-header--center { text-align: center; margin-inline: auto; max-width: 760px; }
.section-header--center .section-desc { margin-inline: auto; }
.grid12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--gutter);
}
/* Column span utilities — the only way to place on the grid */
.c1-4 { grid-column: 1 / 5; }
.c1-5 { grid-column: 1 / 6; }
.c1-6 { grid-column: 1 / 7; }
.c1-7 { grid-column: 1 / 8; }
.c1-12 { grid-column: 1 / -1; }
.c2-9 { grid-column: 2 / 10; }
.c5-11 { grid-column: 5 / 12; }
.c6-12 { grid-column: 6 / -1; }
.c7-12 { grid-column: 7 / -1; }
.c8-12 { grid-column: 8 / -1; }
.c10-12 { grid-column: 10 / -1; }
/* The printed 12-column grid, used as a background layer */
.printed-grid {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px calc(100% / 12)),
repeating-linear-gradient(180deg, var(--grid-line-soft) 0 1px, transparent 1px 88px);
background-size: calc(100% / 1) 100%, 100% 88px;
opacity: 0.5;
}
/* ---------- 4. TYPOGRAPHY ---------- */
.section-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 700;
font-variation-settings: 'wdth' 112.5;
letter-spacing: 0.18em;
line-height: 1;
text-transform: uppercase;
color: var(--signal);
}
.section-label::before {
content: '';
width: 8px; height: 8px;
background: var(--signal);
flex: none;
}
.section-label--center { justify-content: center; }
.section-title {
font-family: var(--font-display);
font-size: var(--fs-title);
font-weight: 800;
font-variation-settings: 'wdth' 118;
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--bone-100);
margin-top: 24px;
text-wrap: balance;
}
.section-desc {
font-size: var(--fs-body);
line-height: 1.62;
color: var(--bone-200);
max-width: var(--measure);
margin-top: 24px;
}
.mono {
font-family: var(--font-mono);
font-size: var(--fs-mono-sm);
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--steel-300);
line-height: 1.4;
}
.mono--label {
font-size: var(--fs-mono);
font-weight: 700;
letter-spacing: 0.18em;
font-variation-settings: 'wdth' 112.5;
}
/* Emphasis is width: accent words are wider AND orange.
The relay state is read from two INHERITED custom properties, not written on the
word itself. SplitText's autoSplit destroys and recreates these spans when the
fonts land, and anything written on the node — a class, an inline style, a JS flag
— dies with it or gets baked into the snapshot. The properties live on the section,
which SplitText never touches, so a recreated word inherits whatever the relay has
reached. Their defaults are the FINAL values, so with no JS at all the word is
simply orange. */
.text-accent {
display: inline-block;
contain: layout;
color: var(--relay-color, var(--signal));
font-variation-settings: 'wdth' var(--relay-wdth, 125);
}
.ghost-num {
font-family: var(--font-display);
font-weight: 400;
font-variation-settings: 'wdth' 125;
line-height: 0.78;
color: transparent;
-webkit-text-stroke: 1px var(--steel-400);
user-select: none;
pointer-events: none;
transform: translateZ(0);
}
/* The oversized numeral primitive */
.figure {
display: inline-flex;
align-items: baseline;
gap: 0.12em;
font-family: var(--font-display);
font-size: var(--fs-figure);
font-weight: 900;
font-variation-settings: 'wdth' 125;
font-feature-settings: 'tnum' 1;
font-variant-numeric: tabular-nums;
line-height: 0.86;
letter-spacing: -0.03em;
color: var(--bone-100);
}
.figure__value { display: inline-flex; align-items: baseline; }
.figure__unit {
font-size: 0.4em;
font-weight: 700;
letter-spacing: 0;
color: var(--signal); /* final state; the relay starts it at --steel-400 */
}
/* Digit reel: one 1ch × 1lh window per digit, built by JS when GSAP is present */
.figure__digit {
display: inline-block;
overflow: hidden;
width: 0.62em;
height: 0.86em;
vertical-align: baseline;
}
.figure__strip { display: block; }
.figure__strip span { display: block; height: 0.86em; line-height: 0.86em; }
.figure__sep { display: inline-block; }
/* ---------- 5. BUTTONS ---------- */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 28px;
min-height: 44px;
border: 1px solid transparent;
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 700;
font-variation-settings: 'wdth' 100;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
overflow: hidden;
isolation: isolate;
transition: color var(--t-state) var(--ease-machine),
border-color var(--t-state) var(--ease-machine),
background-color var(--t-state) var(--ease-machine);
}
/* Hover is a clip wipe from the left — never a transform, never a shadow */
.btn::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
clip-path: inset(0 100% 0 0);
transition: clip-path var(--t-state) var(--ease-machine);
}
.btn:hover::before, .btn:focus-visible::before { clip-path: inset(0); }
.btn--accent { background: var(--signal); color: var(--paper-ink); border-color: var(--signal); }
.btn--accent::before { background: var(--paper-ink); }
.btn--accent:hover, .btn--accent:focus-visible { color: var(--signal); }
.btn--outline { color: var(--bone-100); border-color: var(--steel-500); }
.btn--outline::before { background: var(--signal); }
.btn--outline:hover, .btn--outline:focus-visible { color: var(--paper-ink); border-color: var(--signal); }
.btn--invert { background: var(--paper-ink); color: var(--signal); border-color: var(--paper-ink); }
.btn--invert::before { background: var(--signal); }
.btn--invert:hover, .btn--invert:focus-visible { color: var(--paper-ink); border-color: var(--paper-ink); }
.btn--lg { padding: 18px 36px; }
.btn--full { width: 100%; }
.btn__arrow { flex: none; }
/* ---------- 6. RULES, PANELS, CHIPS ---------- */
.rule {
display: block;
width: 100%;
height: 1px;
background: var(--steel-500);
transform-origin: left center;
border: 0;
}
.rule--signal { background: var(--signal); height: 2px; }
.rule--v { width: 1px; height: 100%; transform-origin: top center; }
.panel {
position: relative;
background: var(--ink-700);
border: 1px solid var(--steel-500);
border-radius: var(--radius);
transition: border-color var(--t-state) var(--ease-machine);
}
.panel--raised { background: var(--ink-600); }
.panel--flush { margin: -0.5px; } /* adjacent borders collapse to one hairline */
.panel:hover { border-color: var(--signal-rule); }
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--ink-600);
border: 1px solid var(--steel-500);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: var(--fs-mono-sm);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.2;
color: var(--steel-300);
transition: border-color var(--t-state) var(--ease-machine), color var(--t-state) var(--ease-machine);
}
.chip:hover { border-color: var(--signal-rule); }
.chip--status { background: var(--volt-wash); color: var(--bone-200); }
.chip__led { width: 6px; height: 6px; background: var(--volt); flex: none; animation: led 2s steps(1) infinite; }
.chip--week { color: var(--bone-100); }
.chip--accent { color: var(--signal); border-color: var(--signal-rule); }
@keyframes led { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }
/* ---------- 7. SPEC ROW — the universal dot leader ---------- */
.spec-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 0;
font-family: var(--font-mono);
font-size: var(--fs-mono-sm);
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.3;
}
.spec-row + .spec-row { border-top: 1px solid rgba(38, 43, 53, 0.6); }
.spec-row__label { color: var(--steel-300); flex: none; }
.spec-row__leader {
flex: 1 1 auto;
min-width: 20px;
height: 1px;
align-self: center;
transform-origin: left center;
color: var(--steel-350);
background-image: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 6px);
}
.spec-row__value { color: var(--bone-200); flex: none; text-align: right; }
.spec-row__value--accent { color: var(--signal); }
/* ---------- 8. PLATE — the universal photo placeholder ---------- */
.plate {
position: relative;
aspect-ratio: var(--plate-ar);
background: var(--ink-700);
border: 1px solid var(--steel-500);
border-radius: var(--radius);
overflow: hidden;
isolation: isolate;
}
.plate__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.plate__screen, .plate__grid, .plate__subject {
position: absolute;
inset: 0 0 28px 0;
pointer-events: none;
transition: opacity var(--t-state) var(--ease-machine);
}
.plate__screen {
background-image: repeating-linear-gradient(180deg, rgba(240,238,233,0.035) 0 1px, transparent 1px 6px);
}
.plate__grid {
background-image:
repeating-linear-gradient(90deg, rgba(57,64,78,0.22) 0 1px, transparent 1px 24px),
repeating-linear-gradient(180deg, rgba(57,64,78,0.22) 0 1px, transparent 1px 24px);
}
.plate__subject {
opacity: 0.10;
background-repeat: no-repeat;
background-position: center;
background-size: 76% auto;
transition: opacity var(--t-state) var(--ease-machine);
}
.plate:hover .plate__subject { opacity: 0.18; }
/* Six distinct orthogonal silhouettes — no tile ever repeats */
.plate[data-plate="server"] .plate__subject {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' fill='%239AA2AE'%3E%3Crect x='14' y='14' width='38' height='72'/%3E%3Crect x='60' y='14' width='38' height='72'/%3E%3Crect x='106' y='14' width='38' height='72'/%3E%3Crect x='20' y='22' width='26' height='4' fill='%2308090B'/%3E%3Crect x='20' y='34' width='26' height='4' fill='%2308090B'/%3E%3Crect x='66' y='22' width='26' height='4' fill='%2308090B'/%3E%3Crect x='66' y='46' width='26' height='4' fill='%2308090B'/%3E%3Crect x='112' y='34' width='26' height='4' fill='%2308090B'/%3E%3Crect x='112' y='58' width='26' height='4' fill='%2308090B'/%3E%3C/svg%3E");
}
.plate[data-plate="control-room"] .plate__subject {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' fill='%239AA2AE'%3E%3Crect x='12' y='10' width='40' height='26'/%3E%3Crect x='58' y='6' width='44' height='30'/%3E%3Crect x='108' y='10' width='40' height='26'/%3E%3Crect x='10' y='60' width='140' height='8'/%3E%3Crect x='26' y='68' width='10' height='22'/%3E%3Crect x='75' y='68' width='10' height='22'/%3E%3Crect x='124' y='68' width='10' height='22'/%3E%3Crect x='40' y='46' width='16' height='14'/%3E%3Crect x='104' y='46' width='16' height='14'/%3E%3C/svg%3E");
}
.plate[data-plate="city"] .plate__subject {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' fill='%239AA2AE'%3E%3Crect x='8' y='52' width='22' height='40'/%3E%3Crect x='34' y='30' width='18' height='62'/%3E%3Crect x='56' y='44' width='26' height='48'/%3E%3Crect x='86' y='18' width='20' height='74'/%3E%3Crect x='110' y='38' width='16' height='54'/%3E%3Crect x='130' y='58' width='22' height='34'/%3E%3Crect x='90' y='26' width='12' height='4' fill='%2308090B'/%3E%3Crect x='38' y='40' width='10' height='4' fill='%2308090B'/%3E%3C/svg%3E");
}
.plate[data-plate="team"] .plate__subject {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' fill='%239AA2AE'%3E%3Crect x='18' y='24' width='16' height='16'/%3E%3Crect x='12' y='46' width='28' height='38'/%3E%3Crect x='58' y='16' width='16' height='16'/%3E%3Crect x='52' y='38' width='28' height='46'/%3E%3Crect x='98' y='24' width='16' height='16'/%3E%3Crect x='92' y='46' width='28' height='38'/%3E%3Crect x='132' y='34' width='14' height='14'/%3E%3Crect x='128' y='54' width='22' height='30'/%3E%3C/svg%3E");
}
.plate[data-plate="warehouse"] .plate__subject {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' fill='%239AA2AE'%3E%3Crect x='10' y='16' width='4' height='72'/%3E%3Crect x='66' y='16' width='4' height='72'/%3E%3Crect x='122' y='16' width='4' height='72'/%3E%3Crect x='10' y='16' width='116' height='4'/%3E%3Crect x='10' y='44' width='116' height='4'/%3E%3Crect x='10' y='72' width='116' height='4'/%3E%3Crect x='20' y='24' width='18' height='18'/%3E%3Crect x='44' y='28' width='14' height='14'/%3E%3Crect x='76' y='24' width='20' height='18'/%3E%3Crect x='20' y='52' width='16' height='18'/%3E%3Crect x='84' y='52' width='24' height='18'/%3E%3Crect x='132' y='60' width='18' height='28'/%3E%3C/svg%3E");
}
.plate[data-plate="abstract"] .plate__subject {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' fill='none' stroke='%239AA2AE' stroke-width='6'%3E%3Crect x='12' y='10' width='136' height='80'/%3E%3Crect x='34' y='24' width='92' height='52'/%3E%3Crect x='56' y='38' width='48' height='24'/%3E%3Cpath d='M12 50h22M126 50h22M80 10v14M80 76v14'/%3E%3C/svg%3E");
}
/* THE SWAP CONTRACT — dropping in ![]()
is the whole handover */
.plate:has(.plate__img) .plate__screen,
.plate:has(.plate__img) .plate__grid,
.plate:has(.plate__img) .plate__subject,
.plate.has-img .plate__screen,
.plate.has-img .plate__grid,
.plate.has-img .plate__subject { opacity: 0; }
/* Permanent furniture — never hidden, image or not */
.plate__reg, .plate__reticle { position: absolute; inset: 0 0 28px 0; pointer-events: none; }
.plate__reg {
background-repeat: no-repeat;
background-image:
linear-gradient(var(--signal), var(--signal)), linear-gradient(var(--signal), var(--signal)),
linear-gradient(var(--signal), var(--signal)), linear-gradient(var(--signal), var(--signal)),
linear-gradient(var(--signal), var(--signal)), linear-gradient(var(--signal), var(--signal)),
linear-gradient(var(--signal), var(--signal)), linear-gradient(var(--signal), var(--signal));
background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
background-position:
10px 10px, 10px 10px,
calc(100% - 10px) 10px, calc(100% - 10px) 10px,
10px calc(100% - 10px), 10px calc(100% - 10px),
calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
}
.plate__reticle::before, .plate__reticle::after { content: ''; position: absolute; background: var(--steel-350); }
.plate__reticle::before {
left: 0; right: 0; top: 50%; height: 1px;
-webkit-mask-image: linear-gradient(90deg, #000 calc(50% - 22px), transparent calc(50% - 22px), transparent calc(50% + 22px), #000 calc(50% + 22px));
mask-image: linear-gradient(90deg, #000 calc(50% - 22px), transparent calc(50% - 22px), transparent calc(50% + 22px), #000 calc(50% + 22px));
}
.plate__reticle::after {
top: 0; bottom: 0; left: 50%; width: 1px;
-webkit-mask-image: linear-gradient(180deg, #000 calc(50% - 22px), transparent calc(50% - 22px), transparent calc(50% + 22px), #000 calc(50% + 22px));
mask-image: linear-gradient(180deg, #000 calc(50% - 22px), transparent calc(50% - 22px), transparent calc(50% + 22px), #000 calc(50% + 22px));
}
.plate__tag {
position: absolute;
top: 10px; right: 30px;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: var(--fs-mono-sm);
letter-spacing: 0.14em;
color: var(--steel-300);
}
.plate__tag::before { content: ''; width: 10px; height: 10px; background: var(--signal); }
.plate__caption {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-inline: 10px;
background: var(--ink-800);
border-top: 1px solid var(--steel-500);
font-family: var(--font-mono);
font-size: var(--fs-mono-sm);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--steel-300);
white-space: nowrap;
overflow: hidden;
}
.plate__dim { color: var(--steel-350); }
/* ---------- 9. MARQUEE ---------- */
.marquee {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__content { display: flex; align-items: center; flex: none; }
.marquee__chip { display: inline-flex; align-items: center; white-space: nowrap; }
/* ---------- 10. FORM VOCABULARY ---------- */
.form-field { position: relative; margin-bottom: 22px; }
.form-label {
display: block;
margin-bottom: 8px;
font-family: var(--font-mono);
font-size: var(--fs-mono-sm);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--steel-300);
transition: color var(--t-state) var(--ease-machine);
}
.form-input {
width: 100%;
padding: 14px 16px;
background: var(--ink-600);
border: 1px solid var(--steel-500);
border-radius: var(--radius);
color: var(--bone-100);
font-family: var(--font-body);
font-size: 0.95rem;
transition: border-color var(--t-state) var(--ease-machine), background-color var(--t-state) var(--ease-machine);
}
.form-input::placeholder { color: var(--steel-350); }
.form-input:focus { outline: none; border-color: var(--signal); background: var(--ink-700); }
.form-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
select.form-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--steel-300) 50%), linear-gradient(135deg, var(--steel-300) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.form-textarea { min-height: 132px; resize: vertical; }
.form-status {
margin-top: 16px;
min-height: 20px;
font-family: var(--font-mono);
font-size: var(--fs-mono-sm);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--steel-300);
}
.form-status--success { color: var(--volt); }
.form-status--error { color: var(--signal); }
/* ---------- 11. FIXED INSTRUMENTS ---------- */
/* Grain: a plain low-alpha texture. No mix-blend-mode — a full-viewport blended
layer forces the entire page into one composited group (measurable cost on
hardware, and it blanks headless captures outright). */
.noise {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: 1;
}
.cursor {
position: fixed;
top: 0; left: 0;
z-index: 9998;
width: 22px; height: 22px;
pointer-events: none;
opacity: 0;
will-change: transform;
}
.cursor__box { display: block; width: 100%; height: 100%; border: 1px solid var(--signal); }
@media (pointer: coarse) { .cursor { display: none; } }
/* ---------- 12. THE DEPTH LAW ---------- */
[data-depth] {
transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), 0);
}
html.js-anim [data-depth] { will-change: transform; }
/* ---------- 13. MASTHEAD — the console bar ---------- */
.masthead {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 900;
height: var(--bar-h);
background: rgba(8, 9, 11, 0.90);
border-bottom: 1px solid var(--steel-500);
transition: height var(--t-state) var(--ease-machine), border-color var(--t-state) var(--ease-machine);
}
.masthead.is-scrolled { height: 56px; border-bottom-color: var(--steel-400); }
.masthead__inner {
height: 100%;
max-width: var(--container-wide);
margin-inline: auto;
padding-inline: var(--container-pad);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.masthead__progress {
position: absolute;
left: 0; bottom: -2px;
width: 100%; height: 2px;
background: var(--signal);
transform: scaleX(0);
transform-origin: left center;
}
/* The wordmark is the supplied logo asset — a flat #FC6E02 lockup on transparent,
which is exactly --signal, so it sits in the accent system rather than beside it.
Height-driven so the bar controls it; width follows the intrinsic 453x61 ratio. */
.wordmark { display: inline-flex; align-items: center; flex: none; }
.wordmark__img {
height: 19px;
width: auto;
display: block;
}
.masthead.is-scrolled .wordmark__img { height: 17px; }
.wordmark--footer .wordmark__img { height: 24px; }
.masthead__nav {
position: relative;
display: flex;
align-items: stretch;
height: 100%;
border-left: 1px solid var(--steel-500);
}
.masthead__link {
position: relative;
display: inline-flex;
align-items: center;
padding: 0 22px;
border-right: 1px solid var(--steel-500);
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--steel-300);
transition: color var(--t-state) var(--ease-machine);
}
.masthead__link:hover, .masthead__link.is-active { color: var(--bone-100); }
.masthead__box {
position: absolute;
top: 0; left: 0;
width: 10px; height: 10px;
border: 1px solid var(--signal);
opacity: 0;
pointer-events: none;
}
.masthead__aside { display: flex; align-items: center; gap: 14px; flex: none; }
.masthead__cta { padding: 11px 20px; min-height: 40px; }
.masthead__toggle {
display: none;
width: 44px; height: 44px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
border: 1px solid var(--steel-500);
}
.masthead__toggle span {
display: block;
width: 20px; height: 2px;
background: var(--bone-100);
transition: transform var(--t-state) var(--ease-machine), opacity var(--t-state) var(--ease-machine);
}
.masthead__toggle.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
.masthead__toggle.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }
/* ---------- 14. MOBILE OVERLAY ---------- */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 890;
display: flex;
flex-direction: column;
justify-content: center;
gap: 40px;
padding: calc(var(--bar-h) + 40px) var(--container-pad) 40px;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-state) var(--ease-machine), visibility 0s linear var(--t-state);
}
.mobile-menu.is-open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transition: opacity var(--t-state) var(--ease-machine), visibility 0s;
}
.mobile-menu__shutters { position: absolute; inset: 0; display: flex; z-index: -1; }
.mobile-menu__shutter { flex: 1; background: var(--ink-900); border-right: 1px solid var(--steel-500); transform-origin: top center; }
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__link {
display: flex;
align-items: baseline;
gap: 18px;
padding: 14px 0;
border-bottom: 1px solid var(--steel-500);
font-family: var(--font-display);
font-size: clamp(2.2rem, 9vw, 3.6rem);
font-weight: 800;
font-variation-settings: 'wdth' 110;
line-height: 1;
text-transform: uppercase;
color: var(--bone-100);
overflow: hidden;
}
.mobile-menu__index {
font-family: var(--font-mono);
font-size: var(--fs-mono-sm);
font-weight: 400;
letter-spacing: 0.14em;
color: var(--signal);
}
.mobile-menu__foot { display: flex; flex-direction: column; gap: 18px; }
.mobile-menu__mail {
font-family: var(--font-mono);
font-size: var(--fs-mono-sm);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--steel-300);
text-align: center;
}
/* ---------- 15. FOOTER — title block ---------- */
.footer {
position: relative;
background: var(--ink-900);
border-top: 1px solid var(--steel-500);
padding-top: clamp(64px, 7vw, 104px);
overflow: hidden;
}
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.4fr;
gap: var(--gutter);
padding-bottom: 56px;
}
.footer__tagline { margin-top: 20px; color: var(--bone-300); max-width: 34ch; }
.footer__status {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 24px;
font-family: var(--font-mono);
font-size: var(--fs-mono-sm);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--steel-300);
}
.footer__led { width: 6px; height: 6px; background: var(--volt); flex: none; animation: led 2s steps(1) infinite; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer__col-title {
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 700;
letter-spacing: 0.18em;
color: var(--bone-100);
margin-bottom: 6px;
}
.footer__link {
font-family: var(--font-mono);
font-size: var(--fs-mono-sm);
letter-spacing: 0.12em;
color: var(--steel-300);
transition: color var(--t-state) var(--ease-machine);
min-height: 24px;
display: inline-flex;
align-items: center;
}
a.footer__link:hover { color: var(--signal); }
.footer__link--static { cursor: default; }
.footer__block {
display: grid;
/* Not three equal columns: the entity row carries the registered name, the city
and the UIC on one line and overruns an even third, colliding with the next
label. The middle column takes the room it actually needs. */
grid-template-columns: 0.85fr 1.7fr 0.95fr;
gap: var(--gutter);
padding: 22px 0 28px;
border-top: 1px solid var(--steel-500);
}
.footer__spec { padding: 0; }
.footer__wordmark {
font-family: var(--font-display);
font-size: 22vw;
font-weight: 900;
font-variation-settings: 'wdth' 125;
line-height: 0.72;
letter-spacing: -0.02em;
text-align: center;
color: transparent;
-webkit-text-stroke: 1px var(--steel-400);
margin-bottom: -0.28em;
user-select: none;
transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), 0);
}
/* ---------- 16. ENTRANCE HOOKS — final state ships in CSS ---------- */
.reveal { clip-path: none; opacity: 1; }
/* Start states exist ONLY once JS has confirmed GSAP is present. */
html.js-anim .reveal { clip-path: inset(0 0 100% 0); }
html.js-anim .rule { transform: scaleX(0); }
html.js-anim .rule--v { transform: scaleY(0); }
html.js-anim .spec-row__leader { transform: scaleX(0); }
/* .text-accent deliberately has NO start state here. SplitText's autoSplit
recreates these nodes when the fonts land, and a recreated node keeps none of the
JS bookkeeping — under a CSS start state it would stay dim forever (this is exactly
what happened in Firefox, where the re-split lands after the last ScrollTrigger
refresh). The dim state is applied by JS in boot() instead, so the worst case for a
recreated node is that it is already at its final colour. */
html.js-anim .masthead__progress { transform: scaleX(0); }
/* ---------- 17. FOUNDATION RESPONSIVE (sections may override; their CSS loads after) ---------- */
@media (max-width: 1024px) {
.masthead__nav, .chip--status { display: none; }
.masthead__toggle { display: flex; }
}
@media (max-width: 899.98px) {
/* Footer links are a 24px hit area on desktop, where there is a pointer. On a
phone they are the only navigation left once the overlay is closed, so the
row height carries the 44px minimum and the column gap stands down. */
.footer__link { min-height: 44px; }
.footer__col { gap: 0; }
.wordmark--footer { padding-block: 14px; }
.grid12 { grid-template-columns: 1fr; }
.c1-4, .c1-5, .c1-6, .c1-7, .c2-9, .c5-11, .c6-12, .c7-12, .c8-12, .c10-12 { grid-column: 1 / -1; }
.footer__grid { grid-template-columns: 1fr 1fr; row-gap: 44px; }
.footer__block { grid-template-columns: 1fr; gap: 0; }
.footer__spec { padding: 5px 0; }
.footer__wordmark { font-size: 34vw; transform: none; }
}
@media (max-width: 640px) {
:root { --fs-figure: clamp(3rem, 14vw, 4rem); }
.masthead__cta { display: none; }
.footer__grid { grid-template-columns: 1fr; }
.btn { width: 100%; }
.btn--auto { width: auto; }
}
@media print {
.noise, .cursor, .masthead, .mobile-menu { display: none !important; }
body { background: #fff; color: #000; }
}
/* ============================ HERO ============================ */
/* ==========================================================================
#hero — "THE ASSEMBLY"
Cols 1-7 lede / cols 8-12 axonometric assembly. Printed grid + lattice
canvas behind, ghost numeral bleeding off the left gutter, telemetry and
scroll rail on the bottom rule, page-load shutter over the lot.
Every element ships in its FINAL state; start states live under html.js-anim.
========================================================================== */
.hero {
position: relative;
min-height: 720px;
min-height: max(720px, 100svh);
display: flex;
flex-direction: column;
overflow: hidden;
isolation: isolate;
padding-block: calc(var(--bar-h) + clamp(28px, 4.4vh, 64px)) clamp(22px, 3.4vh, 44px);
background: var(--ink-900);
}
/* ---------- background stack ---------- */
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero__grid {
opacity: 0.72;
-webkit-mask-image: radial-gradient(120% 78% at 26% 44%, transparent 0%, transparent 26%, #000 74%);
mask-image: radial-gradient(120% 78% at 26% 44%, transparent 0%, transparent 26%, #000 74%);
}
/* A