/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/geist-cyrillic-ext.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: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/geist-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/geist-vietnamese.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: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/geist-latin-ext.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: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/geist-latin.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: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-cyrillic-ext.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: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-vietnamese.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: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-latin-ext.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: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-latin.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-cyrillic-ext.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-vietnamese.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-latin-ext.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-latin.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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/geist-cyrillic-ext.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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/geist-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/geist-vietnamese.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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/geist-latin-ext.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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/geist-latin.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: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/geist-cyrillic-ext.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: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/geist-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/geist-vietnamese.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: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/geist-latin-ext.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: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/geist-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/instrument-serif-italic-latin-ext.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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/instrument-serif-italic-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/instrument-serif-normal-latin-ext.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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/instrument-serif-normal-latin.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jetbrains-cyrillic-ext.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jetbrains-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jetbrains-greek.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jetbrains-vietnamese.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jetbrains-latin-ext.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jetbrains-latin.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/jetbrains-cyrillic-ext.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/jetbrains-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/jetbrains-greek.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/jetbrains-vietnamese.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/jetbrains-latin-ext.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/jetbrains-latin.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;
}


/* ===========================================================
   TITAN COLLECTIVE — Portfolio
   Tokens + base + sections
   =========================================================== */

:root {
  --ivory: #FFFFFF;
  --ivory-2: #F2F2F2;
  --ivory-3: #E5E5E5;
  --ink: #0A0A0A;
  --ink-2: #2E2E2E;
  --grey: #5A5A5A;
  --line: #D9D9D9;
  --line-2: #D9D9D9;
  --orange: #FF8C3F;
  --orange-2: #E5762A;
  --orange-tint: rgba(255, 140, 63, 0.12);

  --font-sans: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1320px;
  --pad-x: clamp(20px, 4vw, 56px);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  background: transparent;
  color: var(--ink);
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--ivory); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }

/* type utilities */
.mono { font-family: var(--font-mono); font-feature-settings: "ss01", "ss02"; }
.serif { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.upper { text-transform: uppercase; letter-spacing: 0.14em; }
.tight { letter-spacing: -0.02em; }
.tighter { letter-spacing: -0.04em; }

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--grey);
}

.h-display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(48px, 8vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.h-display .ital {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.h-section {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(36px, 5.2vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.h-section .ital {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

.lead {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
}

/* dotted/dashed dividers */
.hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
.hr-dash {
  border: 0;
  border-top: 1px dashed var(--line-2);
  margin: 0;
}

/* nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: rgba(8, 6, 4, 0.82);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px; padding: 0 var(--pad-x);
  max-width: var(--maxw); margin: 0 auto;
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ivory); cursor: pointer; flex-shrink: 0; position: relative; }
.nav-mark {
  width: 38px; height: 38px; position: relative; margin: 0 10px 0 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.nav-mark-img { width: 100%; height: 100%; display: block; }
.nav-mark-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; }
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav-brand-text .name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--ivory);
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-brand-text .tagline {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--grey);
  text-transform: uppercase;
  margin-top: 3px;
}
.nav-brand:hover .nav-brand-text .name { color: var(--orange); }
.nav-links {
  display: flex; gap: 32px; align-items: center;
}
.nav-link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--ivory); }
.nav-link.is-active { color: var(--orange); }
.nav-link--cta {
  color: var(--orange);
  border: 1px solid var(--orange);
  padding: 6px 16px;
  font-size: 13px;
}
.nav-link--cta:hover { border-color: var(--orange); color: var(--orange); }
.nav-status {
  display: none;
}
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-tint); animation: pulse 2.4s infinite var(--ease); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143,199,196,0.45); }
  50% { box-shadow: 0 0 0 8px rgba(143,199,196,0); }
}
@media (max-width: 760px) {
  .nav-inner { grid-template-columns: 1fr auto; position: relative; }
  .nav .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: calc(100% + 10px); right: 0; left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border: 1px solid rgba(245,240,225,0.16);
    padding: 8px; z-index: 90;
    box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6);
  }
  .nav-inner.nav-open .nav-links { display: flex; }
  .nav-links a { padding: 12px 14px; font-size: 13px; letter-spacing: 0.12em; }
  .nav-link--cta { text-align: center; margin-top: 4px; }
}
.nav-toggle {
  display: none;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid rgba(245,240,225,0.3);
  cursor: pointer; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
}
.nav-toggle span {
  display: block; width: 18px; height: 1.5px; background: var(--ivory);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-inner.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-inner.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-inner.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* faint grid background utility */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(10,10,10,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,10,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ============================================================
   VIDEO SPLASH SECTION
   ============================================================ */
.vid-splash {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #000;
}

.vid-splash-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.vid-splash-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(6,4,2,0.82) 0%, rgba(6,4,2,0.55) 50%, rgba(6,4,2,0.35) 100%),
    radial-gradient(ellipse 80% 100% at 0% 50%, rgba(6,4,2,0.6) 0%, transparent 70%);
  z-index: 1;
}

.vid-splash-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 80px;
  transform: translateY(-180px);
}

/* stamp */
.vid-stamp {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.vid-dot { color: var(--orange); font-size: 14px; }
.vid-label { color: rgba(255,255,255,0.55); }
.vid-brand { color: rgba(255,255,255,0.9); font-weight: 600; }

/* headline */
.vid-headline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(44px, 6.5vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--ivory);
  margin: 0;
  max-width: 14ch;
}
.vid-line { display: block; }
.vid-ital {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.72);
}

/* pillars */
.vid-pillars {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.vid-pillars li { display: flex; align-items: center; gap: 8px; }
.vid-dot-sm { color: var(--orange); font-size: 8px; }

/* stats bar — pinned bottom of vid-splash */
.vid-stats-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.12);
  background: rgba(6,4,2,0.55);
  backdrop-filter: blur(8px);
  padding: 20px var(--pad-x);
  gap: 48px;
  flex-wrap: wrap;
}
.vid-cta--bar {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.vid-cta--bar:hover { color: var(--orange); border-color: var(--orange); }
.vid-stat { display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; }
.vid-stat-num {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ivory);
}
.vid-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* CTA */
.vid-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 6px;
  width: fit-content;
  transition: color 0.2s, border-color 0.2s;
}
.vid-cta:hover { color: var(--orange); border-color: var(--orange); }
.vid-cta svg { transition: transform 0.2s; }
.vid-cta:hover svg { transform: translateX(4px); }

/* scroll nudge */
.vid-scroll-nudge {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  animation: nudge-bob 2s ease-in-out infinite;
}
@keyframes nudge-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* mobile */
@media (max-width: 640px) {
  .vid-headline { font-size: clamp(36px, 10vw, 52px); }
  .vid-splash-content { gap: 24px; padding-top: 100px; }
  .vid-stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    padding: 16px var(--pad-x);
  }
  .vid-stats-bar .vid-stat:nth-child(2),
  .vid-stats-bar .vid-stat:nth-child(4) { transform: translateX(-16px); }
  .vid-cta--bar { grid-column: 1 / -1; margin-left: 0; justify-self: center; text-align: center; }
}

/* hero */
.hero {
  position: relative;
  padding: 140px 0 100px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-grid { display: none; }

.hero-particles {
  position: absolute; inset: 0; pointer-events: none;
}

/* global fixed-viewport particle layer — sits between html bg and content */
.page-particles {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}
.page-particles canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ensure every section can paint atop the fixed canvas */
.hero, .section, .manifesto, .closing, .dossier {
  position: relative;
  z-index: 1;
}

/* let particles bleed through dossier bands — keep alt rhythm via subtle tint */
.dossier:nth-child(odd) { background: transparent; }
.dossier:nth-child(even) { background: rgba(199, 191, 168, 0.18); }
.hero-content { position: relative; z-index: 2; }
.hero-meta {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 60px; gap: 32px; flex-wrap: wrap;
}
.hero-meta .stamp {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grey);
}
.hero-headline {
  margin: 0;
}
.hero-headline .l {
  display: block;
  opacity: 0; transform: translateY(20px);
  animation: rise 0.9s var(--ease) forwards;
}
.hero-headline .l:nth-child(2) { animation-delay: 0.12s; }
.hero-headline .l:nth-child(3) { animation-delay: 0.22s; }
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

.hero-sub {
  margin-top: 36px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: end;
}
@media (max-width: 880px) { .hero-sub { grid-template-columns: 1fr; gap: 28px; } }

.hero-sub p { margin: 0; }

.cta-row {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-top: 16px;
}
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--ivory);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--ivory); }
.btn .arrow { width: 14px; height: 1px; background: currentColor; position: relative; }
.btn .arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* metrics ticker under hero */
.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 80px;
}
.metrics > div {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}
.metrics > div:last-child { border-right: 0; }
.metrics .v {
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(36px, 4vw, 56px); line-height: 1;
  letter-spacing: -0.04em;
}
.metrics .v .ital { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.metrics .k {
  margin-top: 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--grey);
  text-transform: uppercase; letter-spacing: 0.18em;
}
@media (max-width: 760px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics > div:nth-child(2) { border-right: 0; }
  .metrics > div:nth-child(1), .metrics > div:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* section base */
.section {
  padding: 110px 0;
  position: relative;
  border-bottom: 1px solid var(--line);
}

/* Warp-drive hero: a self-contained dark block containing the WebGL
   shader canvas + the case-study section head. Sits inside .section
   so the rest of the section (filter bar, case index) keeps its
   ivory page background. */
.warp-hero {
  position: relative;
  background: var(--ink);
  /* full-bleed across the page even though the parent .section has
     horizontal padding via .wrap inside */
  margin: -110px calc(50% - 50vw) 80px;
  padding: 100px 0 120px;
  overflow: hidden;
  isolation: isolate;
}
.warp-hero #warp-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* soft vignette so the shader edges dissolve into the ink */
  -webkit-mask-image: radial-gradient(
    ellipse 95% 110% at 50% 50%,
    #000 55%,
    rgba(0,0,0,0.7) 80%,
    transparent 100%
  );
          mask-image: radial-gradient(
    ellipse 95% 110% at 50% 50%,
    #000 55%,
    rgba(0,0,0,0.7) 80%,
    transparent 100%
  );
}
.warp-hero > .wrap {
  position: relative;
  z-index: 1;
}
/* flip text to ivory inside the warp hero */
.warp-hero .section-head,
.warp-hero .section-tag,
.warp-hero .h-section,
.warp-hero .lead {
  color: var(--ivory);
}
.warp-hero .section-tag { color: var(--orange); }
.warp-hero .h-section { color: var(--ivory); text-shadow: 0 2px 20px rgba(0,0,0,0.4); }
.warp-hero .h-section .ital { color: var(--orange); }
.warp-hero .lead { color: rgba(255,255,255,0.78); }
@media (max-width: 760px) {
  .warp-hero { padding: 70px 0 90px; margin-top: -70px; margin-bottom: 60px; }
}
.section-head {
  display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 48px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 880px) { .section-head { grid-template-columns: 1fr; gap: 18px; } }

.section-tag {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; color: var(--grey);
  text-transform: uppercase; letter-spacing: 0.22em;
}
.section-tag .num { color: var(--orange); }

/* manifesto bar */
.manifesto {
  background: linear-gradient(180deg, #9d9d9d 0%, #b4b4b3 60%, #c1c1c0 100%); color: var(--ink);
  padding: 32px 0;
  border-top: 1px solid #9d9d9d;
  border-bottom: 1px solid #c1c1c0;
  position: relative; overflow: hidden;
}
.manifesto .h-section { color: var(--ink); }
.manifesto .lead { color: rgba(10,10,10,0.7); }
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 520px);
  gap: 40px;
  align-items: center;
}
.manifesto-copy .h-section {
  text-wrap: balance;
}
.manifesto-copy .section-head {
  display: block;
  margin-bottom: 26px !important;
}
.manifesto-copy .section-head .section-tag {
  margin-bottom: 18px;
}
.manifesto-figure {
  margin: 0;
  position: relative;
  overflow: visible;
  background: transparent;
  transform: scale(1.12);
  transform-origin: center;
}
.manifesto-web {
  position: absolute;
  inset: -14% -10%;
  width: 120%;
  height: 128%;
  z-index: 0;
  pointer-events: none;
}
.manifesto-figure video { position: relative; z-index: 1; }
.manifesto-figure::before {
  content: "";
  position: absolute; inset: 0% 2%;
  background: radial-gradient(ellipse at 55% 50%, rgba(232,162,74,0.16), transparent 62%);
  filter: blur(30px);
  z-index: -1;
  animation: fig-glow 6s ease-in-out infinite;
}
.manifesto-figure img,
.manifesto-figure video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* video is 16:9 with a dark bg — show the whole frame, no crop */
  object-fit: contain;
  /* feather all edges to transparency so the rectangular box dissolves
     (the video's floor is dark-grey, not black, so blend alone leaves an edge) */
  -webkit-mask-image: none;
  mask-image: none;
  /* rectangular soft feather on all four edges (no circular vignette) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  mix-blend-mode: multiply;
  opacity: 0.42;
  animation: none;
}
@media (max-width: 860px) {
  .manifesto-grid { grid-template-columns: 1fr; gap: 32px; }
  .manifesto-figure { max-width: 460px; }
}
.marquee {
  margin-top: 56px;
  display: flex; gap: 48px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: marquee 18s linear infinite;
  color: rgba(255,255,255,0.55);
}
.marquee span { display: inline-flex; align-items: center; gap: 48px; }
.marquee span::after {
  content: "◆"; color: var(--orange); margin-left: 48px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* capability grid */
.cap-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.cap-cell {
  background: var(--ivory);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 240px;
  position: relative;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  will-change: transform;
}
.cap-cell:hover {
  background: var(--ivory-2);
  z-index: 2;
  animation: cap-float 3.2s ease-in-out infinite;
}
@keyframes cap-float {
  0%   { transform: translateY(-8px) rotate(-0.25deg); box-shadow: 0 16px 32px -18px rgba(0,0,0,0.30); }
  50%  { transform: translateY(-15px) rotate(0.25deg); box-shadow: 0 30px 50px -20px rgba(0,0,0,0.22); }
  100% { transform: translateY(-8px) rotate(-0.25deg); box-shadow: 0 16px 32px -18px rgba(0,0,0,0.30); }
}
@media (prefers-reduced-motion: reduce) {
  .cap-cell:hover { animation: none; transform: translateY(-6px); }
}
.cap-cell .head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.cap-cell .num {
  font-family: var(--font-mono); font-size: 11px; color: var(--orange);
  letter-spacing: 0.18em;
}
.cap-cell h3 {
  font-family: var(--font-sans);
  font-weight: 500; font-size: 24px;
  letter-spacing: -0.02em; margin: 0; line-height: 1.1;
}
.cap-cell .members {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
}
.cap-cell .chip {
  font-family: var(--font-mono); font-size: 10px;
  padding: 5px 9px; border: 1px solid var(--line-2);
  text-transform: uppercase; letter-spacing: 0.12em;
  background: rgba(255,255,255,0.4);
}
.cap-cell .keys {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-family: var(--font-mono); font-size: 11px; color: var(--grey);
}
@media (max-width: 980px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cap-grid { grid-template-columns: 1fr; } }

/* the collective — roster */
.roster {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 980px) { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .roster { grid-template-columns: 1fr; } }

.titan-card {
  background: var(--ivory);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 360px;
  position: relative;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
  cursor: pointer;
}
.titan-card:hover { background: var(--ivory-2); }
.titan-card .top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.sigil {
  width: 88px; height: 96px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sigil svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sigil .glyph {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 34px;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.titan-card .ident { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.titan-card .id {
  font-family: var(--font-mono); font-size: 10px; color: var(--grey);
  letter-spacing: 0.22em; text-transform: uppercase;
  display: flex; gap: 8px; align-items: center;
}
.titan-card .id .pill {
  background: var(--ink); color: var(--ivory);
  padding: 3px 7px;
  font-size: 9px;
}
.titan-card h3 {
  margin: 0; font-family: var(--font-sans); font-weight: 500;
  font-size: 24px; letter-spacing: -0.02em; line-height: 1.05;
}
.titan-card .role {
  font-family: var(--font-mono); font-size: 11px; color: var(--grey);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.titan-card .summary {
  font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0;
}
.titan-card .meta {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--line-2);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--grey); letter-spacing: 0.16em; text-transform: uppercase;
}
.titan-card .meta .arrow {
  color: var(--orange);
  transition: transform 0.15s var(--ease);
}
.titan-card:hover .meta .arrow { transform: translateX(4px); color: var(--ink); }

/* dossier */
.dossier {
  border-bottom: 1px solid var(--line);
  padding: 100px 0;
}
  position: relative;
}
.dossier:nth-child(odd) { background: transparent; }
.dossier:nth-child(even) { background: rgba(199, 191, 168, 0.18); }

.dossier-head {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 32px; align-items: end;
  margin-bottom: 56px;
}
.dossier-num {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(80px, 12vw, 180px); line-height: 0.85;
  letter-spacing: -0.06em; color: var(--orange);
}
.dossier-title h2 {
  margin: 0;
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(48px, 7.5vw, 96px); line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.dossier-title .role {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--grey); letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: 12px;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.dossier-title .role .o { color: var(--orange); }
.dossier-stamp {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--grey); letter-spacing: 0.18em; text-transform: uppercase;
}
@media (max-width: 880px) {
  .dossier-head { grid-template-columns: auto 1fr; }
  .dossier-stamp { grid-column: 1 / -1; align-items: flex-start; }
}

.dossier-body {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
}
@media (max-width: 980px) { .dossier-body { grid-template-columns: 1fr; gap: 32px; } }

.left-panel { display: flex; flex-direction: column; gap: 28px; }
.large-sigil {
  width: 100%; aspect-ratio: 4/5;
  position: relative;
  background: var(--ivory);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.large-sigil svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.large-sigil .glyph {
  position: relative; z-index: 2;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(80px, 12vw, 160px);
  color: var(--ink); letter-spacing: -0.04em;
}
.large-sigil .corner {
  position: absolute; font-family: var(--font-mono); font-size: 10px;
  color: var(--grey); letter-spacing: 0.16em; text-transform: uppercase;
  z-index: 2;
}
.large-sigil .c-tl { top: 14px; left: 14px; }
.large-sigil .c-tr { top: 14px; right: 14px; color: var(--orange); }
.large-sigil .c-bl { bottom: 14px; left: 14px; }
.large-sigil .c-br { bottom: 14px; right: 14px; }

.cap-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cap-list .item {
  background: var(--ivory);
  padding: 14px 16px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 8px;
}
.cap-list .item::before {
  content: ""; width: 6px; height: 6px; background: var(--orange);
  display: inline-block; flex-shrink: 0;
}
.dossier:nth-child(even) .cap-list .item { background: var(--ivory-2); }
.dossier:nth-child(even) .large-sigil { background: var(--ivory-2); }

.tag-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tag {
  font-family: var(--font-mono); font-size: 10px;
  padding: 6px 10px; border: 1px solid var(--ink);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.tag.solid { background: var(--ink); color: var(--ivory); }

.right-panel { display: flex; flex-direction: column; gap: 36px; }
.section-block .label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--grey); letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.section-block .label::before {
  content: ""; width: 18px; height: 1px; background: var(--orange);
}
.section-block p {
  margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2);
}
.section-block .summary-big {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.35;
  color: var(--ink);
  font-weight: 400;
}

.contributions {
  display: flex; flex-direction: column;
}
.contributions .item {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 16px; align-items: flex-start;
  padding: 18px 0;
  border-top: 1px dashed var(--line-2);
  font-size: 15px; line-height: 1.5; color: var(--ink);
}
.contributions .item:last-child { border-bottom: 1px dashed var(--line-2); }
.contributions .item .n {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--orange); letter-spacing: 0.14em;
  padding-top: 3px;
}

/* case study */
.case {
  margin-top: 24px;
  border: 1px solid var(--ink);
  background: var(--ivory);
  position: relative;
}
.dossier:nth-child(even) .case { background: var(--ivory); }
.case-head {
  background: var(--ink); color: var(--ivory);
  padding: 24px 28px;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 20px; align-items: center;
}
.case-head .case-tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--orange);
  display: flex; align-items: center; gap: 8px;
}
.case-head h4 {
  margin: 0; font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.02em;
  color: var(--ivory);
}
.case-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
@media (max-width: 760px) { .case-body { grid-template-columns: 1fr; } }
.case-body .cell {
  padding: 24px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-body .cell:nth-child(2n) { border-right: 0; }
@media (max-width: 760px) { .case-body .cell { border-right: 0; } }

.case-body h5 {
  margin: 0 0 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey);
}
.case-body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.case-body ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.case-body li {
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
  display: flex; align-items: flex-start; gap: 10px;
}
.case-body li::before {
  content: ""; width: 6px; height: 6px; background: var(--orange);
  margin-top: 8px; flex: 0 0 6px;
}

.kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
}
.kpi-row .kpi {
  padding: 24px 20px;
  border-right: 1px solid var(--line);
  background: var(--ivory-2);
}
.kpi-row .kpi:last-child { border-right: 0; }
.kpi-row .v {
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(22px, 2.6vw, 36px); line-height: 1;
  letter-spacing: -0.03em;
}
.kpi-row .v .ital { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.kpi-row .k {
  margin-top: 10px; font-family: var(--font-mono); font-size: 10px;
  color: var(--grey); text-transform: uppercase; letter-spacing: 0.18em;
}
@media (max-width: 760px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-row .kpi:nth-child(2) { border-right: 0; }
  .kpi-row .kpi:nth-child(1), .kpi-row .kpi:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* tech ecosystem */
.stack-intro {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 48px;
}
.stack-figure {
  margin: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  line-height: 0;
  position: relative;
}
.stack-figure::before {
  content: "";
  position: absolute; inset: 8% 8%;
  background: radial-gradient(ellipse at 50% 50%, rgba(143,199,196,0.22), transparent 66%);
  filter: blur(30px);
  z-index: -1;
  animation: fig-glow 6.5s ease-in-out infinite;
}
.stack-figure img,
.stack-figure video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* whole frame, no crop */
  object-fit: contain;
  /* even feather on ALL FOUR SIDES of the rectangle — two linear gradients
     composited with intersect, so each side fades by the same amount
     regardless of aspect ratio (a radial would over-feather corners). */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
  /* darken keeps only pixels darker than the ivory bg. push contrast +
     brightness hard so the peach spiral lifts above the threshold and
     drops out — what survives is the hands, AI sigil, and node network,
     with the residual rings reading as a soft halo. */
  mix-blend-mode: darken;
  filter: contrast(2.2) brightness(1.38) saturate(0.6);
  opacity: 0.85;
  animation: fig-float 7.6s ease-in-out infinite;
}
.stack-copy .section-tag { margin-bottom: 18px; }
.stack-copy .h-section { text-wrap: balance; }
@media (max-width: 860px) {
  .stack-intro { grid-template-columns: 1fr; gap: 28px; }
  .stack-figure { max-width: 420px; }
}
.tech {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tech .group {
  background: var(--ivory);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background 0.15s var(--ease);
}
.tech .group:hover { background: var(--ivory-2); }
.tech .group:hover h4 { color: var(--orange); }
.tech .group h4 { transition: color 0.15s var(--ease); }
.tech .group h4 {
  margin: 0;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--grey); letter-spacing: 0.22em; text-transform: uppercase;
}
.tech .pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tech .p {
  font-family: var(--font-mono); font-size: 12px;
  padding: 6px 10px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
  transition: background 0.15s var(--ease), color 0.15s var(--ease),
              border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.tech .p:hover {
  background: var(--ink); color: var(--ivory);
  border-color: var(--ink); transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .tech .p:hover { transform: none; }
}
@media (max-width: 880px) { .tech { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tech { grid-template-columns: 1fr; } }

/* industries marquee */
.ind-rail {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.ind-rail .ind {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 10px 16px; border: 1px solid var(--ink);
  font-family: var(--font-sans); font-weight: 500; font-size: 14px;
  letter-spacing: -0.01em;
  transition: color 0.15s var(--ease);
}
.ind-rail .ind::before {
  content: ""; position: absolute; z-index: -1;
  left: var(--mx, 50%); top: var(--my, 50%);
  width: 260%; aspect-ratio: 1; border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.ind-rail .ind:hover { color: var(--ivory); }
.ind-rail .ind:hover::before { transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .ind-rail .ind::before { transition: none; }
}

/* ============================================================
   INDUSTRY CASE STUDIES
   Editable per-industry cards. Each <article class="ic-case">
   is one industry; layout = number + meta + problem/solution + titans.
   ============================================================ */
.ind-cases {
  background: var(--ink);
  color: var(--ivory);
  border-bottom: 1px solid var(--ink);
}
.ind-cases .section-head {
  margin-bottom: 12px;
}
.ind-cases .section-tag { color: rgba(255,255,255,0.55); }
.ind-cases .section-tag .num { color: var(--orange); }
.ind-cases .h-section { color: var(--ivory); }
.ind-cases .h-section .ital { color: var(--orange); }
.ind-cases .lead { color: rgba(255,255,255,0.7); }

.ic-list-wrap { margin-top: 48px; }

.ic-closing {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 0;
  text-align: center;
}
.ic-closing-line {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin: 0;
  text-wrap: balance;
}
.ic-closing-line .ital {
  font-style: italic;
  color: var(--orange);
}

.ic-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}

.ic-case {
  display: grid;
  grid-template-columns: 1fr;
  background: transparent;
  padding: 56px 0 48px;
  scroll-margin-top: 96px;
  transition: background 0.15s var(--ease);
  position: relative;
}
.ic-case:target { background: rgba(143,199,196,0.06); }
.ic-case:target .ic-num { color: var(--orange); }

.ic-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: start;
  padding: 0 var(--pad-x);
  margin-bottom: 36px;
}
.ic-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.82;
  color: rgba(255,255,255,0.4);
  letter-spacing: -0.02em;
  font-weight: 400;
  transition: color 0.15s var(--ease);
}
.ic-meta { display: flex; flex-direction: column; gap: 10px; }
.ic-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.ic-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  color: var(--ivory);
}
.ic-tagline {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  max-width: 64ch;
  color: rgba(255,255,255,0.7);
}

/* sparkles band — beam + falling starfield, injected under each
   industry header. The beam is the visual anchor; the canvas below
   it carries the particle field. Mask feathers out the edges so the
   strip dissolves into the section instead of ending hard. */
.ic-sparkles {
  position: relative;
  height: 96px;
  pointer-events: none;
  width: 100%;
  margin: 18px 0 10px;
  pointer-events: none;
  overflow: hidden;
  /* radial mask: keep center fully visible, fade horizontally to nothing
     at the edges; also fade the bottom so the starfield dies into the
     section background */
  -webkit-mask-image: radial-gradient(
    ellipse 60% 100% at 50% 0%,
    #000 35%,
    rgba(0,0,0,0.6) 70%,
    transparent 100%
  );
          mask-image: radial-gradient(
    ellipse 60% 100% at 50% 0%,
    #000 35%,
    rgba(0,0,0,0.6) 70%,
    transparent 100%
  );
}
.ic-beam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
/* WIDE soft glow — the bloom under the line */
.ic-sparkles .ic-beam-wide {
  height: 2px;
  background: linear-gradient(to right,
    transparent, rgba(143,199,196,0.85), transparent);
  opacity: 0.85;
}
.ic-sparkles .ic-beam-wide-blur {
  height: 6px;
  background: linear-gradient(to right,
    transparent, rgba(143,199,196,0.55), transparent);
  filter: blur(4px);
}
/* TIGHT bright core — the line itself */
.ic-sparkles .ic-beam-tight {
  height: 1px;
  left: 25%;
  right: 25%;
  background: linear-gradient(to right,
    transparent, rgba(255,220,140,0.95), transparent);
}
.ic-sparkles .ic-beam-tight-blur {
  height: 4px;
  left: 25%;
  right: 25%;
  background: linear-gradient(to right,
    transparent, rgba(255,220,140,0.7), transparent);
  filter: blur(3px);
}
.ic-sparkles canvas.ic-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* case-study variant: the strip sits between a dark .case-head and a
   light .case-body, so it carries its own ink background and shifts the
   mask to fade the BOTTOM into the ivory body (top stays sharp under
   the case-head). Pulls up slightly to merge with the case-head. */
.ic-sparkles.is-cs {
  background: var(--ink);
  margin: 0;
  height: 110px;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    #000 0%, #000 55%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .ic-sparkles { opacity: 0.6; }
}

.ic-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px var(--pad-x);
  border-top: 0;
  border-bottom: 0;
}
.ic-block {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 0;
}
.ic-block:last-child { border-right: 0; }
.ic-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.ic-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  max-width: 60ch;
  text-wrap: pretty;
}
.ic-text:empty::before,
.ic-text:first-letter { /* keep placeholder visible */ }

.ic-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px var(--pad-x) 0;
}
.ic-titans {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ic-titan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.32);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.ic-titan:hover {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--orange);
}

/* anchor-jump landing offset so the fixed nav doesn't cover headings */
[id^="ind-"] { scroll-margin-top: 96px; }

@media (max-width: 880px) {
  .ic-head { grid-template-columns: 1fr; gap: 16px; }
  .ic-body { grid-template-columns: 1fr; }
  .ic-block { border-right: 0; border-bottom: 0; }
  .ic-block:last-child { border-bottom: 0; }
  .ic-foot { grid-template-columns: 1fr; gap: 12px; }
  .ic-case { padding: 40px 0 32px; }
}

/* footer / closing */
.closing {
  background: var(--ink);
  color: var(--ivory);
  padding: 140px 0 40px;
  position: relative;
  overflow: hidden;
}
/* interactive node web — sits behind the wrap content */
#closing-network {
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto;
}
.closing .wrap {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.closing .wrap a,
.closing .wrap button,
.closing .wrap .btn,
.closing .wrap h1, .closing .wrap h2, .closing .wrap h3, .closing .wrap p,
.closing .wrap .section-tag,
.closing-foot {
  pointer-events: auto;
}
.closing-grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 400px);
  gap: 64px;
  align-items: center;
}
.closing-figure {
  margin: 0;
  line-height: 0;
  position: relative;
}
.closing-figure::before {
  content: "";
  position: absolute; inset: 10% 12%;
  background: radial-gradient(ellipse at 50% 50%, rgba(143,199,196,0.45), transparent 64%);
  filter: blur(28px);
  z-index: -1;
  /* glow throbs in sync with the fingerprint heartbeat */
  animation: fp-heartbeat-glow 2.4s ease-out infinite;
}
.closing-figure img {
  display: block;
  width: 100%;
  height: auto;
  /* cutout PNG ships with a transparent navy background already removed,
     so it drops cleanly onto the section's black with no halo or mask.
     heartbeat pulse — short lub, brief pause, dub, then longer rest */
  animation: fp-heartbeat 2.4s ease-out infinite;
  transform-origin: 50% 50%;
  will-change: transform, filter;
}
@keyframes fp-heartbeat {
  0%   { transform: scale(1);    filter: brightness(1)    drop-shadow(0 0 0 rgba(255,160,70,0)); }
  10%  { transform: scale(1.06); filter: brightness(1.45) drop-shadow(0 0 24px rgba(255,170,80,0.7)); }
  18%  { transform: scale(1.0);  filter: brightness(1.05) drop-shadow(0 0 6px rgba(255,160,70,0.2)); }
  26%  { transform: scale(1.04); filter: brightness(1.3)  drop-shadow(0 0 18px rgba(255,170,80,0.55)); }
  34%  { transform: scale(1.0);  filter: brightness(1)    drop-shadow(0 0 0 rgba(255,160,70,0)); }
  100% { transform: scale(1);    filter: brightness(1)    drop-shadow(0 0 0 rgba(255,160,70,0)); }
}
@keyframes fp-heartbeat-glow {
  0%   { opacity: 0.55; transform: scale(1); }
  10%  { opacity: 1;    transform: scale(1.12); }
  18%  { opacity: 0.5;  transform: scale(1.0); }
  26%  { opacity: 0.9;  transform: scale(1.08); }
  34%  { opacity: 0.5;  transform: scale(1.0); }
  100% { opacity: 0.55; transform: scale(1); }
}
@keyframes fig-float {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-12px) scale(1.012); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes fig-glow {
  0%   { opacity: 0.5; transform: scale(0.96); }
  50%  { opacity: 1;   transform: scale(1.06); }
  100% { opacity: 0.5; transform: scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .manifesto-figure img, .manifesto-figure video,
  .stack-figure img, .stack-figure video,
  .closing-figure img, .closing-figure video { animation: none; }
  .manifesto-figure::before, .stack-figure::before, .closing-figure::before { animation: none; }
}
@media (max-width: 860px) {
  .closing-grid { grid-template-columns: 1fr; gap: 24px; }
  .closing-figure { max-width: 340px; margin: 0 auto; order: -1; }
  .closing-copy { padding-right: 24px; text-align: center; }
  .closing-copy .cta-row { justify-content: center; }
}
.closing .h-display { color: var(--ivory); }
.closing .h-display .ital { color: var(--orange); }
.closing .lead { color: rgba(255,255,255,0.65); margin-top: 28px; }
.closing-foot {
  margin-top: 100px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* reveal */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Focused split pages (Case Studies / Industry Use Cases) open directly on
   their section header — it sits above the fold, so never hide it behind the
   scroll-reveal animation (the IO initial callback can miss it). */
#case-studies .section-head,
#industries-cases .section-head { opacity: 1 !important; transform: none !important; }

/* small bits */
.kbd {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px; border: 1px solid var(--line-2);
  background: var(--ivory-2);
}

/* ============================================================
   DOSSIER FILTER — sticky dropdown above the 9 dossiers
   ============================================================ */
.dossier-filter {
  position: sticky; top: 64px; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  transition: z-index 0s linear 0.22s;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.df-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px var(--pad-x);
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 24px; align-items: center;
}
.df-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey);
  display: flex; align-items: center; gap: 10px;
}
.df-label .num { color: var(--orange); }

.df-dropdown { position: relative; }
.df-trigger {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: var(--ivory); color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  min-width: 280px; justify-content: space-between;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.df-trigger:hover { background: var(--ink); color: var(--ivory); }
.df-trigger[aria-expanded="true"] { background: var(--ink); color: var(--ivory); }
.df-trigger .arr {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s var(--ease);
}
.df-trigger[aria-expanded="true"] .arr { transform: rotate(-135deg) translateY(-2px); }
.df-trigger .glyph-dot { color: var(--orange); }

.df-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: auto;
  min-width: 100%; width: max-content; max-width: 460px;
  background: var(--ivory);
  border: 1px solid var(--ink);
  list-style: none; margin: 0; padding: 6px;
  max-height: 60vh; overflow-y: auto;
  z-index: 80;
  box-shadow: 0 24px 48px -12px rgba(10, 10, 10, 0.18);
  opacity: 0; transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.df-menu.open {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.df-menu.open-up {
  top: auto; bottom: calc(100% + 8px);
}
.df-menu li {
  display: grid; grid-template-columns: 1fr auto;
  gap: 20px; align-items: center;
  padding: 12px 14px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.18s var(--ease);
  border-bottom: 1px dashed var(--line-2);
}
.df-menu li:last-child { border-bottom: 0; }
.df-menu li:hover { background: var(--ivory-2); }
.df-menu li[aria-selected="true"] { background: var(--ink); color: var(--ivory); }
.df-menu li[aria-selected="true"] .role { color: rgba(255,255,255,0.6); }
.df-menu li[aria-selected="true"] .num { color: var(--orange); }
.df-menu li .num { display: none; }
.df-menu li .name { font-family: var(--font-sans); font-weight: 500; font-size: 14px; letter-spacing: -0.01em; text-transform: none; white-space: nowrap; }
.df-menu li .role { font-family: var(--font-mono); font-size: 10px; color: var(--grey); letter-spacing: 0.12em; text-transform: uppercase; text-align: right; }

/* Industry Use Cases dropdown — industry names in solid black */
#if-menu li:not([aria-selected="true"]) .name { color: #000; }

.df-quickjump {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.df-quickjump button {
  width: 30px; height: 30px;
  background: transparent; border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: 10px; color: var(--grey);
  letter-spacing: 0; cursor: pointer;
  transition: all 0.2s var(--ease);
}
.df-quickjump button:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.df-quickjump button[aria-current="true"] {
  background: var(--orange); color: var(--ink); border-color: var(--orange);
}

/* filter state — hidden dossiers */
.dossier { transition: opacity 0.15s var(--ease); }
.dossier.df-hidden { display: none; }
.dossier.df-fade { opacity: 0.15; pointer-events: none; }

@media (max-width: 880px) {
  .df-inner { grid-template-columns: 1fr; gap: 12px; }
  .df-label { order: -1; }
  .df-trigger { min-width: 0; width: 100%; }
  .df-quickjump { justify-content: flex-start; }
}

/* ============================================================
   STAGGER REVEALS — set --i index on children, delay multiplied
   ============================================================ */
.stagger > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.stagger.in > * {
  opacity: 1; transform: translateY(0);
}

/* dossier-num — sweep in from the side */
.dossier-num {
  display: inline-block;
  opacity: 0; transform: translateX(-30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.dossier-head.in .dossier-num {
  opacity: 1; transform: translateX(0);
}

/* sigil — gentle continuous breathing ring + hover spin */
.sigil svg, .large-sigil svg {
  transition: transform 0.8s var(--ease);
  transform-origin: center;
}
.titan-card:hover .sigil svg { transform: rotate(30deg); }
.large-sigil:hover svg { transform: rotate(60deg) scale(1.04); }

/* manifesto headline — orange word slide */
.manifesto h2 .ital, .manifesto h2 [style*="orange"] {
  display: inline-block;
}

/* metric value pop on intersect */
.metrics .v {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.metrics.in .v { opacity: 1; transform: translateY(0); }
.metrics.in > div:nth-child(1) .v { transition-delay: 0.05s; }
.metrics.in > div:nth-child(2) .v { transition-delay: 0.15s; }
.metrics.in > div:nth-child(3) .v { transition-delay: 0.25s; }
.metrics.in > div:nth-child(4) .v { transition-delay: 0.35s; }

/* KPI counters slide up */
.kpi-row .kpi {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.kpi-row.in .kpi { opacity: 1; transform: translateY(0); }
.kpi-row.in .kpi:nth-child(1) { transition-delay: 0.05s; }
.kpi-row.in .kpi:nth-child(2) { transition-delay: 0.15s; }
.kpi-row.in .kpi:nth-child(3) { transition-delay: 0.25s; }
.kpi-row.in .kpi:nth-child(4) { transition-delay: 0.35s; }

/* soft float for industry pills cascade */
@keyframes pillFloat {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ind-rail.in .ind {
  animation: pillFloat 0.5s var(--ease) backwards;
}
.ind-rail.in .ind:nth-child(n) { animation-delay: calc(var(--i, 0) * 35ms); }

/* tech pills cascade */
.tech .group .p {
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  transition-delay: calc(var(--i, 0) * 25ms);
}
.tech .group.in .p { opacity: 1; transform: translateY(0); }

/* soft hover lift on case studies */
.case { transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.case:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 48px -28px rgba(10,10,10,0.22);
}

/* contributions row underline-flow on hover */
.contributions .item {
  transition: background 0.15s var(--ease), padding-left 0.15s var(--ease);
}
.contributions .item:hover { background: rgba(143,199,196,0.05); padding-left: 8px; }

.case-pointers { display: grid; gap: 16px; }
.cf-hidden { display: none !important; }
/* CASE STUDY INDEX section */
.case-index {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  margin-top: 8px;
}
.ci-case { scroll-margin-top: 140px; }

/* Collapsible case studies — each .ci-case is a <details> element with
   a <summary> wrapping its case-head. The case-body + kpi-row sit
   directly inside the details and are auto-hidden when closed.
   ------------------------------------------------------------ */
details.ci-case { background: transparent; }
/* Hide body + KPIs when collapsed — overrides the existing
   `.case-body { display: grid }` author rule that wins against the
   UA's implicit display:none on non-summary children of <details>. */
.ci-case:not([open]) > .case-body,
.ci-case:not([open]) > .kpi-row { display: none !important; }
.ci-case > .case-summary {
  list-style: none;
  cursor: pointer;
  display: block;
  /* preserve the existing rounded look across the whole card */
}
.ci-case > .case-summary::-webkit-details-marker { display: none; }
.ci-case > .case-summary::marker { content: ""; }
.ci-case > .case-summary > .case-head {
  /* extend the grid template to include the chevron column */
  grid-template-columns: auto 1fr auto auto;
}
.case-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin-left: 4px;
  color: var(--ivory);
  opacity: 0.7;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  transition: transform 0.15s var(--ease), opacity 0.15s var(--ease),
              background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.ci-case[open] > .case-summary .case-chevron {
  transform: rotate(180deg);
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
  opacity: 1;
}
.ci-case > .case-summary:hover .case-chevron {
  opacity: 1;
  border-color: var(--orange);
  color: var(--orange);
}
.ci-case[open] > .case-summary:hover .case-chevron {
  color: var(--ink);
}
/* When closed, the bottom of the head is the bottom of the card —
   round its corners and drop the sparkles strip's bottom-feather. */
.ci-case:not([open]) > .case-summary > .case-head { border-radius: inherit; }
/* Subtle reveal of the body on open. <details> doesn't animate
   height for free; a small fade on the children is plenty without
   layout thrash. */
.ci-case[open] > .case-body,
.ci-case[open] > .kpi-row {
  animation: case-reveal 0.32s var(--ease) both;
}
@keyframes case-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ci-case[open] > .case-body,
  .ci-case[open] > .kpi-row { animation: none; }
  .case-chevron { transition: none; }
}
.ci-case .case-head .case-link { transition: color 0.15s var(--ease); }
.ci-case .case-head .case-link:hover { color: var(--orange) !important; }
.case-pointer { display: block; transition: transform 0.15s var(--ease), background 0.15s var(--ease); }
.case-pointer .case-head { cursor: pointer; }
.case-pointer:hover .case-head { background: var(--ink); }
@media (max-width: 760px) {
  #consult-modal { justify-content: flex-start !important; padding: 16px !important; }
  #consult-modal > div { width: calc(100vw - 46px) !important; margin-right: auto !important; }
}
@media (max-width: 760px) {
  .case-index { gap: 20px; }
  #case-studies .wrap { padding-left: 14px; padding-right: 32px; }
  #case-filter .df-trigger { width: auto; align-self: flex-start; min-width: 78%; }
  #case-filter .df-inner { padding-right: 24px; }
  .df-menu { max-width: calc(100vw - 32px); width: auto; left: 0; right: auto; }
  .df-menu li { white-space: normal; }
  #industries-cases .ic-list-wrap { padding-left: 14px; padding-right: 32px; }
  #industry-filter .df-trigger { width: auto; align-self: flex-start; min-width: 78%; }
  #industry-filter .df-inner { padding-right: 24px; }
  #dossiers { padding-left: 14px; padding-right: 32px; }
  #dossier-filter .df-trigger { width: auto; align-self: flex-start; min-width: 78%; }
  #dossier-filter .df-inner { padding-right: 24px; }
  #partners-services .ic-list-wrap { padding-left: 14px; padding-right: 32px; }
}
.tick-corners { position: relative; }
.tick-corners::before, .tick-corners::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--ink);
}
.tick-corners::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.tick-corners::after { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }

/* ============================================================
   MOBILE — tightened spacing, single-col layouts, smaller type
   ============================================================ */
@media (max-width: 760px) {
  :root { --pad-x: 18px; }

  .nav-inner { height: 56px; gap: 12px; }
  .nav-status { font-size: 10px; letter-spacing: 0.14em; }
  .nav-brand .name { font-size: 11px; letter-spacing: 0.18em; }

  .hero { padding: 110px 0 60px; }
  .hero-meta { margin-bottom: 36px; gap: 14px; flex-direction: column; }
  .hero-meta .stamp { font-size: 10px; letter-spacing: 0.14em; flex-wrap: wrap; }
  .hero-headline .l:nth-child(3) { font-size: 0.55em; margin-top: 18px; }
  .hero-sub { margin-top: 24px; }
  .lead { font-size: 16px; }
  .metrics { margin-top: 48px; }
  .metrics > div { padding: 20px 16px; }

  .manifesto { padding: 60px 0; }
  .manifesto .marquee { margin-top: 36px; gap: 28px; font-size: 11px; animation-duration: 12s; }
  .manifesto .marquee span::after { margin-left: 28px; }

  .section { padding: 70px 0; }
  .section-head { margin-bottom: 36px; gap: 14px; }
  .section-tag { font-size: 10px; letter-spacing: 0.18em; }

  #capabilities .wrap { padding-left: 14px; padding-right: 32px; }
  .cap-cell { padding: 24px 18px; min-height: 200px; gap: 14px; justify-items: start; text-align: left; }
  #capabilities .cap-cell { min-height: 0; }
  .cap-cell .head { justify-content: space-between; width: 100%; }
  .cap-cell .members { justify-content: flex-start; }
  .cap-cell h3 { font-size: 20px; }
  .cap-cell .keys { font-size: 10px; }
  .cap-cell .chip { font-size: 9px; }

  .titan-card { padding: 24px 20px; min-height: 0; gap: 14px; }
  .titan-card h3 { font-size: 20px; }
  .titan-card .summary { font-size: 13px; }
  .titan-card .meta { padding-top: 14px; font-size: 9px; letter-spacing: 0.14em; flex-wrap: wrap; }
  .sigil { width: 64px; height: 72px; }
  .sigil .glyph { font-size: 26px; }

  .dossier { padding: 64px 0; }
  .dossier-head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 36px;
  }
  .dossier-num { font-size: 88px; line-height: 0.85; }
  .dossier-title h2 { font-size: 36px; }
  .dossier-title .role { font-size: 10px; letter-spacing: 0.14em; gap: 10px; }
  .dossier-stamp { align-items: flex-start; gap: 6px; font-size: 10px; }
  .dossier-body { gap: 28px; }

  .large-sigil { aspect-ratio: 1 / 1; }
  .large-sigil .glyph { font-size: 80px; }
  .large-sigil .corner { font-size: 9px; letter-spacing: 0.12em; }

  .cap-list { grid-template-columns: 1fr; }
  .cap-list .item { padding: 12px 14px; font-size: 11px; }

  .section-block .label { font-size: 10px; letter-spacing: 0.18em; }
  .section-block p { font-size: 14px; }
  .section-block .summary-big { font-size: 19px; line-height: 1.4; }
  .contributions .item { font-size: 14px; padding: 14px 0; gap: 12px; grid-template-columns: 24px 1fr; }
  .contributions .item .n { font-size: 10px; }

  .case-head { padding: 18px 18px; grid-template-columns: 1fr; gap: 8px; }
  .case-head h4 { font-size: 16px; }
  .case-head .case-tag { font-size: 9px; }
  .case-body .cell { padding: 18px 18px; }
  .case-body h5 { font-size: 10px; letter-spacing: 0.18em; }
  .case-body p, .case-body li { font-size: 13px; }
  .kpi-row .kpi { padding: 18px 14px; }
  .kpi-row .v { font-size: 22px; }
  .kpi-row .k { font-size: 9px; letter-spacing: 0.14em; }

  .tech .group { padding: 22px 18px; }
  #stack .wrap { padding-left: 14px; padding-right: 32px; }
  .tech .p { font-size: 11px; padding: 5px 9px; }

  .ind-rail .ind { padding: 8px 12px; font-size: 13px; }

  .closing { padding: 80px 0 32px; }
  .closing-foot { margin-top: 56px; gap: 12px; font-size: 10px; flex-direction: column; align-items: center; text-align: center; }
  .closing-foot .closing-foot-tag { align-self: stretch; text-align: left; padding-left: 4px; padding-right: 36px; }

  .tag { font-size: 9px; padding: 5px 8px; letter-spacing: 0.12em; }
}

@media (max-width: 420px) {
  .nav-status .upper, .nav-status span:not(.dot-live):not(#clock) { display: none; }
  .hero-headline { word-break: break-word; }
  .dossier-num { font-size: 72px; }
  .dossier-title h2 { font-size: 30px; }
  .case-body .cell { padding: 16px 14px; }
}

/* ============================================================
   TABLET RANGE — between phone and small desktop
   ============================================================ */
@media (min-width: 761px) and (max-width: 1024px) {
  :root { --pad-x: 32px; }
  .section { padding: 90px 0; }
  .hero { padding: 130px 0 80px; }
  .section-head { gap: 32px; margin-bottom: 48px; }

  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .roster { grid-template-columns: repeat(2, 1fr); }
  .tech { grid-template-columns: repeat(2, 1fr); }

  .dossier { padding: 80px 0; }
  .dossier-body { grid-template-columns: 1fr; gap: 36px; }
  .left-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .left-panel > .large-sigil { grid-column: 1 / -1; aspect-ratio: 16/9; }
  .left-panel > div:not(.large-sigil) { display: flex; flex-direction: column; gap: 14px; }
  .case-body { grid-template-columns: 1fr 1fr; }

  .metrics { grid-template-columns: repeat(4, 1fr); }
  .metrics > div { padding: 22px 18px; }
  .metrics .v { font-size: 36px; }

  .nav-links { gap: 20px; }
  .nav-links a { font-size: 10px; letter-spacing: 0.14em; }
}

/* ============================================================
   LANDSCAPE PHONES — short height, wide aspect
   ============================================================ */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding: 96px 0 56px; }
  .hero-headline { font-size: clamp(36px, 6vw, 64px); }
  .hero-headline .l:nth-child(3) { font-size: 0.5em; margin-top: 14px; }
  .hero-sub { margin-top: 20px; gap: 24px; }
  .metrics { margin-top: 36px; }
  .metrics > div { padding: 16px 14px; }
  .metrics .v { font-size: 28px; }

  .section { padding: 60px 0; }
  .section-head { margin-bottom: 32px; }

  .dossier { padding: 56px 0; }
  .dossier-num { font-size: 72px; }
  .dossier-title h2 { font-size: clamp(28px, 4.5vw, 44px); }
  .large-sigil { aspect-ratio: 16/10; }
  .large-sigil .glyph { font-size: 64px; }

  .closing { padding: 80px 0 32px; }
  .closing .h-display { font-size: clamp(40px, 6.5vw, 72px); }

  .manifesto { padding: 56px 0; }
}

/* ============================================================
   ULTRA-WIDE — cap line lengths on huge displays
   ============================================================ */
@media (min-width: 1600px) {
  :root { --maxw: 1440px; }
}
@media (min-width: 1920px) {
  :root { --maxw: 1560px; }
  .h-display { font-size: clamp(48px, 7.5vw, 156px); }
}

/* ============================================================
   FINE-POINTER vs TOUCH — disable hover transforms on touch
   ============================================================ */
@media (hover: none) {
  .titan-card:hover { background: var(--ivory); transform: none; }
  .cap-cell:hover { background: var(--ivory); }
  .btn:hover { transform: none; }
  .ind-rail .ind:hover { color: inherit; }
  .ind-rail .ind:hover::before { transform: translate(-50%, -50%) scale(0); }
}

/* ============================================================
   REDUCED MOTION — kill marquee + headline rise + particles
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-headline .l { animation: none; opacity: 1; transform: none; }
  .marquee { animation: none; }
  .dot-live { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   SECTION SLIDER — sticky title-level nav, pins under the nav
   ============================================================ */
/* sec-slider hidden — tabs merged into main nav */
.sec-slider { display: none; }
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.sec-slider-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad-x);
  height: 50px;
  display: flex; align-items: center; gap: 22px;
}
.sec-slider-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--grey);
  flex: 0 0 auto;
  padding-right: 22px;
  align-self: stretch; display: flex; align-items: center;
}
.sec-slider-track {
  display: flex; align-items: stretch; gap: 4px;
  justify-content: center;
  padding-left: 40px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  flex: 1 1 auto; min-width: 0;
}
.sec-slider-track::-webkit-scrollbar { display: none; }
.sec-tab {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  padding: 0 14px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--grey);
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.sec-tab .n {
  font-size: 10px; letter-spacing: 0.16em; color: var(--line-2);
  transition: color 0.2s var(--ease);
}
.sec-tab .t {
  font-size: 11px; letter-spacing: 0.14em;
}
.sec-tab:hover { color: var(--ink); }
.sec-tab:hover .n { color: var(--grey); }
.sec-tab.is-active { color: var(--ink); border-bottom-color: var(--orange); }
.sec-tab.is-active .n { color: var(--orange); }

/* Contact link pinned to the right edge of the slider bar */
.sec-contact {
  flex: 0 0 auto;
  margin-left: 16px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
  color: var(--orange);
}
.sec-contact .t { letter-spacing: 0.16em; }
.sec-contact:hover { color: var(--orange-2); }

/* sec-slider is hidden site-wide; dossier-filter sticks directly under the fixed nav */
.dossier-filter { top: 64px; }

/* land anchor jumps below the fixed nav + sticky slider */
#capabilities, #case-studies, #industries-cases, #dossiers, #stack {
  scroll-margin-top: 124px;
}

@media (max-width: 760px) {
  .sec-slider { top: 56px; }
  .sec-slider-inner { height: 46px; gap: 14px; }
  .sec-slider-label { display: none; }
  .sec-tab .t { display: none; }
  .sec-tab .n { font-size: 12px; }
  .sec-tab { padding: 0 12px; }
  .dossier-filter { top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-tab { transition: none; }
}

/* ============================================================
   DATA-GRID BACKDROP — beige port of the 21st.dev DataGridHero.
   A grid of small ink-tinted cells pulse on a per-cell delay,
   with a soft orange mouse-follow glow. Sits behind the
   .capabilities section content via a stacking context and
   pointer-events:none. Cells are coloured with --cell-color and
   their opacity oscillates between --opacity-min and --opacity-max.
   ============================================================ */
.section--data-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section--data-grid > .wrap {
  position: relative;
  z-index: 1;
}

.data-grid-bg {
  position: absolute;
  inset: 0;
  display: grid;
  /* JS sets grid-template-columns / rows + gap. Defaults below
     keep something visible even if JS doesn't run yet. */
  grid-template-columns: repeat(32, 1fr);
  grid-template-rows: repeat(18, 1fr);
  gap: 4px;
  padding: 32px;
  z-index: 0;
  pointer-events: none;
  /* --mouse-x / --mouse-y are written by JS as pixel offsets from the
     grid's top-left corner; the radial-gradient mask paints a soft
     ivory/orange glow that follows the cursor. */
  --mouse-x: 50%;
  --mouse-y: 50%;
  --mouse-glow-opacity: 1;
}

/* the grid cells — generated and inserted by render.js */
.data-grid-bg .dg-cell {
  background-color: var(--cell-color, rgba(10, 10, 10, 0.4));
  border-radius: 1px;
  opacity: var(--opacity-min, 0.05);
  will-change: opacity;
}

@keyframes dg-cell-pulse {
  from { opacity: var(--opacity-min, 0.05); }
  to   { opacity: var(--opacity-max, 0.45); }
}

/* mouse-follow glow — a radial gradient over the grid that
   highlights cells near the cursor with the brand orange */
.data-grid-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    220px circle at var(--mouse-x) var(--mouse-y),
    rgba(143, 199, 196, 0.22),
    rgba(143, 199, 196, 0.06) 40%,
    transparent 70%
  );
  opacity: var(--mouse-glow-opacity, 1);
  mix-blend-mode: multiply;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .data-grid-bg .dg-cell { animation: none !important; opacity: var(--opacity-min, 0.05); }
}

/* tighter cell density on small screens — fewer cols for legibility */
@media (max-width: 720px) {
  .data-grid-bg { padding: 16px; gap: 3px; }
}

/* ============================================================
   CAPABILITIES — green/ink theme (DataGridHero palette)
   Section flips to a near-black backdrop so the green data-grid
   pulses read clearly. Cards become dark "glass" tiles with
   ivory type and green-edged chips. All cards share an identical
   layout grid (head / title / keys / chips) so the chip row
   always lands on the same baseline regardless of keys wrap.
   ============================================================ */
#capabilities.section--data-grid-unused {
  background: #0A0A0A; /* ink with a faint green undertone */
  color: var(--ivory);
}

/* SECTION HEAD — stack eyebrow + title in a single left-aligned column
   inside a soft dark scrim so the type never merges with the green
   pulse behind it. */
#capabilities .cap-head {
  display: block;
  margin: 0 auto 56px;
  max-width: 980px;
  position: relative;
  text-align: center;
}
#capabilities .cap-head .section-tag {
  margin-bottom: 18px;
  justify-content: center;
}
#capabilities .cap-head .h-section {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.05;
  text-wrap: balance;
  color: var(--ink);
}
#capabilities.section--data-grid .section-tag,
#capabilities.section--data-grid .section-tag span {
  color: rgba(255, 255, 255, 0.85);
}
#capabilities.section--data-grid .section-tag .num {
  color: var(--orange);
}
#capabilities.section--data-grid .h-section {
  color: var(--ivory);
}
#capabilities.section--data-grid .h-section .ital,
#capabilities.section--data-grid .h-section em {
  color: var(--orange);
}

/* card layout — explicit grid so chip rows align across all cards */
#capabilities .cap-cell {
  background: #000;
  color: var(--ivory);
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* head / title / keys / chips */
  gap: 16px;
  padding: 32px 28px;
  min-height: 280px;
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  border: 1px solid transparent;
  transition:
    background 0.15s var(--ease),
    border-color 0.15s var(--ease),
    transform 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}
#capabilities .cap-cell:hover {
  background: #111;
  border-color: rgba(143, 199, 196, 0.22);
  animation: none; /* override the ivory-section float */
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -28px rgba(143, 199, 196, 0.28);
  z-index: 2;
}

#capabilities .cap-cell .head {
  align-items: center;
}
#capabilities .cap-cell .num {
  color: var(--orange);
  font-weight: 500;
}
#capabilities .cap-cell .head span:last-child {
  /* "N TITANS" indicator */
  color: rgba(255, 255, 255, 0.5);
}
#capabilities .cap-cell h3 {
  color: var(--ivory);
  font-size: 22px;
  text-wrap: balance;
}
#capabilities .cap-cell .keys {
  color: rgba(255, 255, 255, 0.62);
  align-self: start;
  line-height: 1.75;
}
#capabilities .cap-cell .members {
  /* aligns to the bottom row automatically via grid-template-rows */
  margin-top: 0;
  align-self: end;
}
#capabilities .cap-cell .chip {
  background: rgba(143, 199, 196, 0.04);
  border-color: rgba(143, 199, 196, 0.22);
  color: rgba(255, 255, 255, 0.9);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
#capabilities .cap-cell .chip:hover {
  background: rgba(143, 199, 196, 0.12);
  border-color: #A9D9D6;
  color: var(--ivory);
}

/* glow tweak — let the orange brand glow stay so the brand orange
   still touches this section briefly when the cursor moves through */
#capabilities .data-grid-bg::after {
  background: radial-gradient(
    260px circle at var(--mouse-x) var(--mouse-y),
    rgba(143, 199, 196, 0.18),
    rgba(143, 199, 196, 0.05) 40%,
    transparent 72%
  );
  mix-blend-mode: screen;
}

/* ============================================================
   INDUSTRY HERO — Aether Flow-inspired mouse-reactive particle
   web. Ink background, ivory particles, orange highlight near
   the cursor. Canvas is driven by render.js (looks for
   #ic-aether-canvas). The section-head reads ivory on ink.
   ============================================================ */
.ic-hero {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--ivory);
  padding: 48px 0 48px;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  /* swallow the page-particles bleed-through — this hero has its own */
  isolation: isolate;
}
.ic-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.ic-hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(80% 70% at 50% 50%,
      transparent 0%,
      rgba(10,10,10,0.55) 75%,
      rgba(10,10,10,0.9) 100%),
    linear-gradient(to bottom,
      rgba(10,10,10,0.1) 0%,
      transparent 30%,
      transparent 70%,
      rgba(10,10,10,0.25) 100%);
}
.ic-hero-content {
  position: relative;
  z-index: 2;
}
.ic-hero .section-head {
  display: block;
  margin: 0;
  max-width: 980px;
}
.ic-hero .h-section {
  color: var(--ivory);
  margin-top: 20px;
}
.ic-hero .h-section .ital { color: var(--orange); }
.ic-hero-lead {
  color: rgba(255, 255, 255, 0.68);
  margin-top: 24px;
  max-width: 62ch;
}
.ic-hero .section-tag .num { color: var(--orange); }

@media (max-width: 720px) {
  .ic-hero { padding: 96px 0 80px; }
}

/* ============================================================
   HERO TWO-COLUMN SPLIT + DATA ORB
   Spline-inspired focal layout — text left, "3D" data-orb right —
   built entirely from CSS 3D + SVG, no React / Spline / GSAP. Keeps
   the existing ivory palette, headline rise animation, and metric
   count-up. The orb is a layered SVG: 3 concentric rings rotating
   at different rates + a static node mesh + an orange signal pulse.
   ============================================================ */

/* Ambient spotlight — soft warm-white gradient anchored top-right
   of the hero, gives the section a focal light without changing
   the ivory bg. Sits between the grid and the content. */
.hero-spotlight {
  position: absolute;
  inset: -10% -10% auto auto;
  width: 75%;
  height: 90%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 78% 30%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.18) 35%,
      rgba(255, 255, 255, 0) 70%),
    radial-gradient(40% 35% at 82% 28%,
      rgba(143, 199, 196, 0.10) 0%,
      rgba(143, 199, 196, 0) 60%);
  filter: blur(2px);
}

/* Hero text column — single column, full-width within .wrap.
   The data-orb is absolutely positioned over the hero (below) and
   drifts around the whole section instead of sitting in a column. */
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 32px;
  /* leave headroom on the right so the headline never collides with
     the orb at its closest pass */
  max-width: 100%;
  position: relative;
  z-index: 2;
}
.hero-text .hero-headline { margin: 0; }
.hero-lead { margin: 0; max-width: 56ch; }

/* four-pillar chip row */
.hero-pillars {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin: 0; padding: 0;
  list-style: none;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-2);
}
.hero-pillars li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.35);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.hero-pillars li:hover {
  border-color: var(--ink);
  background: rgba(255,255,255,0.7);
}
.hero-pillars .dot { color: var(--orange); font-size: 8px; line-height: 1; }

.hero-cta { margin-top: 4px; }

/* ====== DATA ORB — static on the right of the hero, no frame ======
   The orb composition (rings + mesh + signal pulse) is anchored to
   the top-right of the hero and stays in place. Its internal
   elements (ring rotations, signal pulse, pointer-tilt) keep
   animating — only the orb's position is static. */
.hero { position: relative; overflow: hidden; }
.hero-visual {
  position: absolute;
  top: 260px;
  right: max(40px, 6vw);
  left: auto;
  width: 380px;
  height: 380px;
  margin: 0;
  pointer-events: none;
  z-index: 0;
  perspective: 1200px;
  opacity: 0.92;
  will-change: transform;
}
@media (max-width: 1200px) {
  .hero-visual { width: 320px; height: 320px; top: 210px; opacity: 0.7; }
}
@media (max-width: 1040px) {
  /* below the split breakpoint, drop opacity so the headline stays
     legible when it overlaps */
  .hero-visual { width: 280px; height: 280px; opacity: 0.45; right: 24px; top: 180px; }
}
@media (max-width: 640px) {
  .hero-visual { width: 200px; height: 200px; opacity: 0.32; right: 12px; top: 160px; }
}

/* stage carries the 3D tilt — gentle isometric default, mouse-tilt
   added via JS by toggling --tx / --ty custom props */
.orb-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(8deg + var(--ty, 0deg)))
    rotateY(calc(-8deg + var(--tx, 0deg)));
  transition: transform 0.45s var(--ease);
}

.orb-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ring rotations — different durations + directions for depth feel */
@keyframes orb-spin-cw  { to { transform: rotate(360deg); } }
@keyframes orb-spin-ccw { to { transform: rotate(-360deg); } }
.orb-ring { transform-origin: 0px 0px; transform-box: fill-box; }
.orb-ring--outer { animation: orb-spin-cw  48s linear infinite; transform-box: view-box; transform-origin: center; }
.orb-ring--mid   { animation: orb-spin-ccw 32s linear infinite; transform-box: view-box; transform-origin: center; }
.orb-ring--inner { animation: orb-spin-cw  18s linear infinite; transform-box: view-box; transform-origin: center; }

/* mesh — subtle pulse on the central orange node */
@keyframes orb-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.85; }
}
.orb-mesh-nodes-inner circle {
  transform-origin: 0 0; transform-box: fill-box;
  animation: orb-pulse 2.6s ease-in-out infinite;
}

/* signal pulse — traces the inner hexagon perimeter, leaving a fading
   trail via SVG dash + a quick orbital animation */
@keyframes orb-signal {
  0%   { transform: translate( 0px, -34px); opacity: 0; }
  10%  { opacity: 1; }
  25%  { transform: translate( 29px, -17px); }
  50%  { transform: translate( 29px,  17px); }
  60%  { transform: translate(  0px, 34px); }
  75%  { transform: translate(-29px, 17px); }
  90%  { transform: translate(-29px,-17px); }
  100% { transform: translate(  0px,-34px); opacity: 0; }
}
.orb-signal {
  transform-box: fill-box;
  transform-origin: center;
  animation: orb-signal 5.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .orb-ring--outer,
  .orb-ring--mid,
  .orb-ring--inner,
  .orb-signal,
  .orb-mesh-nodes-inner circle { animation: none; }
}

@media (max-width: 640px) {
  .hero-pillars li { padding: 6px 10px; font-size: 9px; }
}

/* ============================================================
   OUTCOME PROOF STRIP — four-cell numeric assertion between the
   manifesto and capabilities. Reuses [data-count] for count-up,
   .mono / .upper / .section-tag for the eyebrow, and pulls
   display-type proportions (Geist 500, ultra-tight tracking)
   from the existing h-display scale.
   ============================================================ */
.proof-strip {
  position: relative;
  z-index: 1;
  padding: 120px 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.proof-head { margin-bottom: 56px; }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

.proof-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  padding: 56px 32px;
  border-right: 1px solid rgba(10, 10, 10, 0.08);
  min-height: 280px;
}
.proof-cell:last-child { border-right: 0; }

/* Numeric face — Geist sans 500, ultra-tight tracking, generous size.
   Prefix ($) and unit (M / WEEKS / %) sit baseline-aligned but in a
   smaller display size with the orange accent — keeps the eye on the
   numeral. Built as inline-flex so the unit/prefix stay aligned even
   while the count-up rewrites text inside the animated span. */
.proof-num {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(64px, 8vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--ink);
}

/* Inline-text unit sibling — used by "9 weeks" where the unit is a word,
   not a glyph. Smaller, orange, italic display type for personality. */
.proof-unit {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.42em;
  letter-spacing: -0.02em;
  color: var(--orange);
  margin-left: 0.05em;
  align-self: baseline;
}

/* The 3-line mono caption beneath each number */
.proof-cap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.22em;
  line-height: 1.55;
  color: var(--grey);
}
.proof-cap span:last-child { color: var(--ink-2); }

/* Responsive — 4 > 2x2 > 1 */
@media (max-width: 1080px) {
  .proof-strip { padding: 96px 0; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-cell:nth-child(2) { border-right: 0; }
  .proof-cell:nth-child(1),
  .proof-cell:nth-child(2) { border-bottom: 1px solid rgba(10, 10, 10, 0.08); }
  .proof-cell { min-height: 240px; padding: 48px 28px; }
}
@media (max-width: 600px) {
  .proof-strip { padding: 72px 0; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-cell {
    border-right: 0;
    border-bottom: 1px solid rgba(10, 10, 10, 0.08);
    min-height: 0;
    padding: 40px 20px;
  }
  .proof-cell:last-child { border-bottom: 0; }
  .proof-num { font-size: clamp(56px, 14vw, 84px); }
}

/* ============================================================
   LOGO BAR — operator row directly below the hero
   - sits on the ivory bg (no color change), matches the editorial
     hairline-rule language of the rest of the site
   - inline-SVG wordmarks render at ~40% opacity in ink and lift on
     hover; fill: currentColor means swapping in a real logo SVG
     inherits the monochrome treatment for free
   - 6-cell grid > 3 cols (tablet) > 2 cols (mobile); never a marquee
   ============================================================ */
.logo-bar {
  position: relative;
  z-index: 1;
  padding: 72px 0 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.logo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
}
.logo-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--grey);
}
.logo-eyebrow .num { color: var(--orange); }
.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink);
  transition: color 0.2s var(--ease), gap 0.15s var(--ease);
}
.logo-link:hover { color: var(--orange); gap: 14px; }
.logo-link .arrow {
  width: 14px; height: 1px; background: currentColor; position: relative;
}
.logo-link .arrow::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* logo row — 7 cells, hairline dividers between each (matches the
   .metrics frame above so the two strips share visual cadence) */
.logo-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
  min-height: 96px;
  border-right: 1px solid var(--line);
  /* the monochrome wash — logos sit at 40% in ink, lift to 90% on hover */
  color: var(--ink);
  opacity: 0.42;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.logo-cell:last-child { border-right: 0; }
.logo-cell:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.logo-mark {
  display: block;
  width: 100%;
  max-width: 130px;
  height: auto;
  /* consistent cap-height across cells regardless of source viewBox */
  max-height: 28px;
}

/* Responsive — 7 > 4+3 > 2x4 (last cell hides on the smallest breakpoint
   so the grid stays clean rather than orphaning one logo on its own row) */
@media (max-width: 1080px) {
  .logo-row { grid-template-columns: repeat(4, 1fr); }
  .logo-cell:nth-child(4) { border-right: 0; }
  .logo-cell:nth-child(1),
  .logo-cell:nth-child(2),
  .logo-cell:nth-child(3),
  .logo-cell:nth-child(4) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .logo-bar { padding-top: 56px; }
  .logo-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .logo-row { grid-template-columns: repeat(2, 1fr); }
  .logo-cell { padding: 26px 12px; min-height: 80px; }
  .logo-cell:nth-child(2n) { border-right: 0; }
  .logo-cell:nth-child(odd) { border-right: 1px solid var(--line); }
  .logo-cell:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--line); }
  /* hide the 7th cell on mobile to keep a tidy 3x2 grid */
  .logo-cell:nth-child(7) { display: none; }
}
   Reuses ivory bg, ink, orange accent, mono/upper type, and the
   existing .metrics grid (the count-up animation is preserved).
   Three-row architecture: eyebrow + deep-link, operator row,
   metrics row.
   ============================================================ */
.trust-bar {
  position: relative;
  z-index: 1;
  padding: 64px 0 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.trust-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
}
.trust-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--grey);
}
.trust-eyebrow .num { color: var(--orange); }
.trust-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink);
  transition: color 0.2s var(--ease), gap 0.15s var(--ease);
}
.trust-link:hover { color: var(--orange); gap: 14px; }
.trust-link .arrow {
  width: 14px; height: 1px; background: currentColor; position: relative;
}
.trust-link .arrow::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* Operator row — text-only credibly-described entities in the same visual
   weight as a logo wall. Sits on ivory with hairline cell dividers, matching
   the .metrics frame underneath so the two rows read as one strip. */
.trust-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
  border-right: 1px solid var(--line);
  text-align: center;
}
.trust-cell:last-child { border-right: 0; }
.trust-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.55;
  transition: opacity 0.15s var(--ease), color 0.15s var(--ease);
}
.trust-cell:hover .trust-name { opacity: 0.95; color: var(--ink); }

/* metrics row inside .trust-bar — reuse .metrics base styles but drop the
   top border so it stacks flush against the operator row above */
.metrics.metrics-trust {
  margin-top: 0;
  border-top: 0;
}

/* hero CTA microline — small reassurance row directly under the CTAs */
.hero-microline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--grey);
  flex-wrap: wrap;
}
.hero-microline-sep {
  color: var(--line-2);
  font-family: var(--font-mono);
}

/* lead emphasis used in the new hero copy */
.hero-sub .lead strong { font-weight: 500; }

/* Responsive — operator row collapses to 3x2, then 2x3 on narrower viewports */
@media (max-width: 980px) {
  .trust-row { grid-template-columns: repeat(3, 1fr); }
  .trust-cell:nth-child(3) { border-right: 0; }
  .trust-cell:nth-child(1),
  .trust-cell:nth-child(2),
  .trust-cell:nth-child(3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .trust-bar { padding-top: 48px; }
  .trust-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .trust-row { grid-template-columns: repeat(2, 1fr); }
  .trust-cell { padding: 22px 12px; }
  .trust-cell:nth-child(2n) { border-right: 0; }
  .trust-cell:nth-child(3) { border-right: 1px solid var(--line); }
  .trust-cell:nth-child(1),
  .trust-cell:nth-child(2),
  .trust-cell:nth-child(3),
  .trust-cell:nth-child(4) { border-bottom: 1px solid var(--line); }
}

/* ============================================================
   PARTICLE TEXT EFFECT — Industries banner
   Canvas blends with the ivory section bg (no border, no
   gradient frame). Motion-blur fill in render.js is also ivory,
   so the canvas reads as part of the section rather than a
   contained box.
   ============================================================ */
.industry-particles-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 380;
  max-height: 360px;
  margin: 32px 0 40px;
  background: transparent;
  border: 0;
  overflow: hidden;
}
.industry-particles {
  display: block;
  width: 100%;
  height: 100%;
}

/* Center-aligned section-head ONLY for the industries section.
   Uses :has() to target the section that contains the particle
   canvas, so the rule doesn't leak to other sections. */
section:has(> .wrap > .industry-particles-wrap) .section-head,
section:has(.industry-particles-wrap) .section-head {
  display: block;
  text-align: center;
  margin-inline: auto;
}
section:has(.industry-particles-wrap) .section-head .section-tag {
  justify-content: center;
}
section:has(.industry-particles-wrap) .section-head .h-section {
  margin: 12px auto 0;
  text-wrap: balance;
  max-width: 28ch;
}

@media (max-width: 720px) {
  .industry-particles-wrap {
    aspect-ratio: 1000 / 460;
    margin: 24px 0 32px;
  }
}





/* ============================================================
   FULL-SCREEN SECTIONS — each section auto-fits the viewport
   ============================================================ */
.manifesto, .section, .closing {
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}
@media (max-width: 760px) {
  .manifesto, .section, .closing { height: auto; }
  .manifesto { overflow: hidden; }
  .section, .closing { overflow-x: clip; }
  .intro-split { grid-template-columns: 1fr !important; gap: 24px !important; }
  .intro-split img { width: 220px !important; max-width: 60vw !important; }
  .h-section[style*="nowrap"], .h-display[style*="nowrap"] { white-space: normal !important; }
}


/* Industry filter: keep in normal document flow — do not stick over
   subsequent industry cards while scrolling */
#industry-filter {
  position: static !important;
}


/* Industry Use Cases: long naturally-flowing case list — exempt from
   the one-screen-per-section clamp used on the Services page */
#industries-cases {
  height: auto;
  overflow: visible;
}

/* Partners page: hero + long service/why/industry lists — same exemption */
.partners-hero, #partners-services, .partners-philosophy, .partners-why, .partners-industries {
  height: auto;
  min-height: 0;
  overflow: visible;
  display: block;
}

/* Case Study page: filter bar + full 9-card index — same exemption */
#case-studies {
  height: auto;
  min-height: 0;
  overflow: visible;
  display: block;
}


/* Industry Use Cases hero — match the one-screen-per-section fit used elsewhere */
.ic-hero {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ============== PARTNERS-PAGE LOCAL STYLES ============== */
.partners-parent {
  position: relative;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 40px;
  align-items: stretch;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--ivory);
  padding: 28px 40px;
  overflow: hidden;
  isolation: isolate;
}
.pp-tunnel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
}
.pp-mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.pp-monogram {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 120px;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--orange);
}
.pp-bar {
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,0.18);
}
.pp-meta { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.pp-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
}
.pp-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ivory);
}
.pp-tag {
  margin: 16px 0 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--orange);
}
.pp-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
}
.svc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svc-list li {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  position: relative;
  padding-left: 18px;
}
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--orange);
}
.partners-philosophy { background: var(--ink); color: var(--ivory); }
.partners-philosophy .section-tag { color: rgba(255,255,255,0.55); }
.partners-philosophy .section-tag .num { color: var(--orange); }
.philo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  align-items: baseline;
  padding: 28px 0 36px;
  border-top: 1px solid rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.philo-word {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 88px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ivory);
}
.philo-word:nth-child(2) { color: var(--orange); }
.philo-word:nth-child(4) { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.philo-note {
  margin: 28px 0 0;
  max-width: 70ch;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.7);
}
.partners-why {
  background: var(--ink);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}
.why-radial {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%,
    rgba(70,150,148,0.12) 0%,
    rgba(40,110,108,0.06) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.why-grid {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.why-card {
  position: relative;
  padding: 40px 36px 36px;
  background: rgba(10,8,6,0.92);
  overflow: hidden;
  transition: background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.why-card:hover { background: rgba(22,16,8,0.97); }
.why-card:hover::before { opacity: 1; }
.why-bg-num {
  position: absolute;
  right: -8px;
  bottom: -20px;
  font-family: var(--font-mono);
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(143,199,196,0.05);
  pointer-events: none;
  user-select: none;
  transition: color 0.15s ease;
}
.why-card:hover .why-bg-num { color: rgba(143,199,196,0.1); }
.why-icon {
  width: 32px;
  height: 32px;
  color: var(--orange);
  flex-shrink: 0;
}
.why-icon svg { width: 100%; height: 100%; }
.why-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  margin: 0;
}
.why-h {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ivory);
  line-height: 1.3;
}
.why-p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.62);
}
.industry-chips {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.industry-chips li {
  padding: 14px 22px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--ivory);
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
  cursor: default;
}
.industry-chips li:hover {
  background: var(--ink);
  color: var(--orange);
  border-color: var(--ink);
}
@media (max-width: 880px) {
  .partners-parent { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; }
  .pp-monogram { font-size: 88px; }
  .why-grid { grid-template-columns: 1fr; }
  .philo-row { gap: 12px 28px; padding: 20px 0 24px; }
}


/* ============================================================
   LIGHT BACKGROUND PASS — every section below the intro splash
   moves from dark ink to the new F0FFFF surface; splash (#splash)
   is intentionally untouched.
   ============================================================ */
.manifesto { background: #d0d0d0; color: var(--ink); height: auto; min-height: 0; padding: 28px 0; }
.manifesto .h-section { color: var(--ink); }
.manifesto .lead { color: rgba(10,10,10,0.7); }
.marquee { color: rgba(10,10,10,0.5); }

#capabilities.section--data-grid-unused2 { background: var(--ivory); color: var(--ink); }
#capabilities.section--data-grid .section-tag,
#capabilities.section--data-grid .section-tag span { color: rgba(10,10,10,0.7); }
#capabilities.section--data-grid .h-section { color: var(--ink); }
#capabilities .cap-cell { background: #FFFFFF; color: var(--ink); border-color: rgba(10,10,10,0.08); }
#capabilities .cap-cell h3 { color: var(--ink); }
#capabilities .cap-cell .head span:last-child { color: rgba(10,10,10,0.5); }
#capabilities .cap-cell:hover { background: var(--ivory-2); border-color: rgba(143,199,196,0.4); }
#capabilities .cap-cell .head span:last-child { color: rgba(10,10,10,0.5); }
#capabilities .cap-cell .keys { color: rgba(10,10,10,0.62); }
#capabilities .cap-cell .chip { color: rgba(10,10,10,0.75); background: rgba(143,199,196,0.12); border-color: rgba(143,199,196,0.35); }
#capabilities .cap-cell .chip:hover { background: rgba(143,199,196,0.25); border-color: #5FA6A2; color: var(--ink); }

.ind-cases { background: var(--ivory); color: var(--ink); }
.ind-cases .section-tag { color: rgba(10,10,10,0.55); }
.ind-cases .h-section { color: var(--ink); }
.ind-cases .lead { color: rgba(10,10,10,0.7); }
.ic-num { color: rgba(10,10,10,0.35); }
.ic-title { color: var(--ink); }
.ic-tagline { color: rgba(10,10,10,0.65); }
.ic-label { color: rgba(10,10,10,0.55); }
.ic-text { color: rgba(10,10,10,0.75); }
.ic-titan { border-color: rgba(10,10,10,0.25); color: var(--ink); }

.closing { background: var(--ivory); color: var(--ink); }
.closing .h-display { color: var(--ink); }
.closing .lead { color: rgba(10,10,10,0.65); }
.closing-foot { color: rgba(10,10,10,0.55); border-top-color: rgba(10,10,10,0.15); }
.closing-foot .closing-foot-tag { flex: 1 1 auto; }
.closing-headline { color: var(--ink); }

/* compact utility — section hugs its content instead of full 100vh */
.section--compact { height: auto; min-height: 0; padding: 40px 0; }

/* compact closing section */
.closing { height: auto; min-height: 0; padding: 40px 0 28px; }
.closing .h-display, .closing-headline { font-size: clamp(34px, 4.2vw, 58px); }
.closing-figure { max-width: 200px; }

.partners-parent { background: transparent; color: var(--ink); border-color: transparent; border: none; padding: 0; }
.pp-eyebrow { color: rgba(10,10,10,0.55); }
.pp-name { color: var(--ink); }
.pp-body { color: rgba(10,10,10,0.75); }
.svc-list li { color: rgba(10,10,10,0.8); }
.pp-bar { background: rgba(10,10,10,0.15); }

.partners-philosophy { background: var(--ivory); color: var(--ink); }
.partners-philosophy .section-tag { color: rgba(10,10,10,0.55); }
.philo-word { color: var(--ink); }
.philo-note { color: rgba(10,10,10,0.7); }
.philo-row { border-top-color: rgba(10,10,10,0.15); border-bottom-color: rgba(10,10,10,0.15); }

.partners-why { background: var(--ivory); color: var(--ink); }
.why-grid { background: rgba(10,10,10,0.06); border-color: rgba(10,10,10,0.08); }
.why-card { background: #FFFFFF; }
.why-card:hover { background: var(--ivory-2); }
.why-h { color: var(--ink); }
.why-p { color: rgba(10,10,10,0.62); }