/* ==========================================================================
   0. FONTS  (self-hosted)
   ==========================================================================

   These were served from fonts.googleapis.com, which sent every visitor's IP
   address to Google on page load. They are served from our own origin now, so
   no third party sees the traffic and there is one less DNS and TLS handshake
   before text can paint.

   Latin and latin-ext subsets only, which covers English plus accented Latin.
   Instrument Serif, Inter and JetBrains Mono are all SIL Open Font License,
   which expressly permits hosting them ourselves.

   Regenerate with scratchpad/selfhost-fonts.js if a weight is ever added.
   -------------------------------------------------------------------------- */

/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-400-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(fonts/instrument-serif-400-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(fonts/instrument-serif-400-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(fonts/instrument-serif-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/inter-300-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: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/inter-300-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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-500-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-500-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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-600-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-600-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;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-400-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-500-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-500-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;
}

/* ==========================================================================
   PHANTASM & BRAIN: Applied AI Product Lab
   Design system. Lab notebook meets terminal meets Swiss editorial.

   Motif: two hemispheres. Left = Phantasm (intuition, dissolve, taste).
          Right = Brain (logic, lattice, measurement).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces: near-black, warm-shifted so it never reads as blue-grey */
  --ink:        #08080A;
  --ink-2:      #0D0D11;
  --ink-3:      #131318;
  --ink-4:      #1A1A21;

  /* Paper: the inverted "specimen sheet" sections */
  --bone:       #EDE9E0;
  --bone-2:     #E2DDD1;
  --bone-3:     #D3CCBC;

  /* Type on dark */
  --fg:         #EDE9E0;
  --fg-dim:     #9C9CA6;   /*  7.4:1 on --ink  */
  --fg-faint:   #82828C;   /*  5.3:1 on --ink: mono labels, captions, meta */

  /* Type on paper */
  --fg-inv:     #14141A;
  --fg-inv-dim: #55555F;

  /* Hairlines. --line and --line-2 are decorative dividers and may sit below
     3:1 by design. --line-input is the boundary of interactive controls
     (inputs, buttons) and is held at 3.37:1 to satisfy WCAG 1.4.11. */
  --line:       #22222A;
  --line-2:     #2E2E38;
  --line-input: #63636D;
  --line-inv:   #C7C0AE;

  /* Two signature accents, and the split between them is the brand.
     PINK is Phantasm: intuition, the dissolving half, the seam.
     VOLT is Brain: logic, the resolved lattice, measurement.
     They meet in the hero canvas and in the mark itself. */
  --reagent:    #FF2E97;   /* neon pink: primary,  5.8:1 on --ink */
  --reagent-dk: #D6117A;
  --reagent-lt: #FF5CAF;   /* hover on filled buttons */
  --reagent-inv:#A80059;   /* 6.2:1 on --bone, for paper sections */

  --volt:       #C7F94E;   /* neon green: secondary, 14.6:1 on --ink */
  --volt-dk:    #A8DC28;
  --volt-inv:   #4F6B0C;   /* 4.1:1 on --bone */

  /* Venture colours: each product brings its own temperature.
     Both are used as TEXT on the ink ground (kickers, card numbers,
     breadcrumbs), so both must clear 4.5:1 there, not just look right
     in a gradient wash. */
  --delphi:     #E8AE33;   /* oracle amber: 10.0:1 on --ink */
  --delphi-dk:  #B8801A;
  --tim-plum:   #B563D0;   /* orchid: 5.4:1 on --ink (was #8B3BA0 at 3.0:1) */
  --tim-plum-dk:#8B3BA0;   /* the deeper plum, for fills only: never text */

  --danger:     #FF5C5C;

  /* Type */
  --f-display: 'Instrument Serif', 'Times New Roman', serif;
  --f-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale: 1.25 minor third, fluid */
  --t-xs:   0.6875rem;                              /* 11: mono labels    */
  --t-sm:   0.8125rem;                              /* 13                  */
  --t-base: 1rem;                                   /* 16                  */
  --t-md:   clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  --t-lg:   clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --t-xl:   clamp(1.875rem, 2.2vw + 1.3rem, 2.75rem);
  --t-2xl:  clamp(2.5rem, 4vw + 1.4rem, 4.5rem);
  --t-3xl:  clamp(3rem, 7.5vw + 1rem, 8.5rem);

  /* Space: 4/8 rhythm, spacious end (marketing, not dashboard) */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  24px;  --s-6:  32px;  --s-7:  48px;  --s-8:  64px;
  --s-9:  96px;  --s-10: 128px; --s-11: 176px;

  /* Section rhythm. Fluid so large screens breathe without mobile bloating. */
  --s-section: clamp(96px, 11vw, 184px);

  --gutter: clamp(20px, 5vw, 72px);
  --maxw:   1440px;
  --measure: 68ch;

  /* Motion */
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:   160ms;
  --d-base:   260ms;
  --d-slow:   520ms;

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 10px;

  --z-grid: 0;  --z-base: 1;  --z-sticky: 40;  --z-nav: 60;  --z-modal: 100;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: var(--ink);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, textarea, select { font: inherit; color: inherit; }

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

h1, h2, h3, h4 { font-weight: 400; line-height: 1.05; text-wrap: balance; }

p { text-wrap: pretty; }

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

:focus-visible {
  outline: 2px solid var(--reagent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: var(--s-section); }
.section--tight { padding-block: calc(var(--s-section) * 0.75); }
.section--flush { padding-block: 0; }

/* Paper inversion: the specimen sheet */
.section--paper {
  background: var(--bone);
  color: var(--fg-inv);
}
.section--paper .eyebrow__num,
.section--paper .mono-label { color: var(--fg-inv-dim); }
.section--paper .rule { background: var(--line-inv); }
.section--paper .lead { color: var(--fg-inv-dim); }

/* The persistent hairline grid: the lab notebook substrate */
.grid-substrate {
  position: fixed;
  inset: 0;
  z-index: var(--z-grid);
  pointer-events: none;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.grid-substrate span {
  border-left: 1px solid var(--line);
  opacity: 0.55;
}
.grid-substrate span:last-child { border-right: 1px solid var(--line); }

@media (min-width: 900px) {
  .grid-substrate { grid-template-columns: repeat(12, 1fr); }
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.94;
}

.display--hero { font-size: var(--t-3xl); }
.display--xl   { font-size: var(--t-2xl); }
.display--lg   { font-size: var(--t-xl); }

.display em {
  font-style: italic;
  /* the Phantasm voice: italics carry the intuitive half of the brand */
}

.lead {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: var(--measure);
}

.body { max-width: var(--measure); color: var(--fg-dim); }
.body + .body { margin-top: var(--s-4); }
.body strong { color: var(--fg); font-weight: 500; }

/* Mono is the machine voice: labels, coordinates, metadata, section numbers */
.mono-label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 500;
}

.eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.eyebrow__num {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--reagent);
  letter-spacing: 0.1em;
  flex: none;
}
.eyebrow__text {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.eyebrow__line {
  flex: 1;
  height: 1px;
  background: var(--line-2);
  transform: translateY(-3px);
}
.section--paper .eyebrow__line { background: var(--line-inv); }
.section--paper .eyebrow__text { color: var(--fg-inv-dim); }

.rule { height: 1px; background: var(--line); border: 0; }

/* --------------------------------------------------------------------------
   5. HEADER / NAV
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--ink) 94%, transparent);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand__name {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.brand__sub {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: 3px;
}

.nav { display: none; }
@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--s-2);
  }
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* meets the 44px target minimum */
  padding: 10px var(--s-3);
  font-size: var(--t-sm);
  color: var(--fg-dim);
  letter-spacing: 0.01em;
  border-radius: var(--r-sm);
  transition: color var(--d-fast) var(--e-out);
}
.nav__link:hover { color: var(--fg); }
.nav__link[aria-current="page"] { color: var(--fg); }
.nav__link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 2px;
  height: 1px;
  background: var(--reagent);
}

.header__actions { display: flex; align-items: center; gap: var(--s-3); }

/* Below ~620px the brand, CTA and burger cannot share the bar without the
   nowrap CTA pushing past the viewport. The CTA moves into the mobile menu. */
@media (max-width: 619px) {
  .header__actions > .btn { display: none; }
}

/* Mobile menu */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 900px) { .burger { display: none; } }
.burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--fg);
  transition: transform var(--d-base) var(--e-out),
              opacity var(--d-fast) var(--e-out);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding: var(--s-4) 0 var(--s-6);
}
.mobile-nav.is-open { display: block; }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }
.mobile-nav a {
  display: block;
  padding: 14px var(--gutter);
  font-size: var(--t-md);
  color: var(--fg-dim);
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav a[aria-current="page"] { color: var(--reagent); }

.mobile-nav__cta {
  margin: var(--s-4) var(--gutter) 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px var(--s-5) !important;
  background: var(--reagent);
  color: var(--ink) !important;
  border-radius: var(--r-md);
  font-size: var(--t-sm) !important;
  font-weight: 600;
  border-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--line-input);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 11px var(--s-5);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.btn:hover { border-color: var(--fg-faint); background: var(--ink-3); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  --btn-bg: var(--reagent);
  --btn-fg: var(--ink);
  --btn-bd: var(--reagent);
  font-weight: 600;
}
.btn--primary:hover {
  background: #FF8FC7;
  border-color: #FF8FC7;
}

.btn--ghost { --btn-bd: transparent; color: var(--fg-dim); }
.btn--ghost:hover { color: var(--fg); background: var(--ink-3); }

.btn--lg { min-height: 52px; padding: 14px var(--s-6); font-size: var(--t-base); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.btn__arrow { transition: transform var(--d-base) var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Text link with animated underline. The visual box is ~24px, so the hit
   area is extended with a pseudo-element rather than padding: padding would
   drag the animated underline away from the text. */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--fg);
  font-size: var(--t-sm);
  font-weight: 500;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--reagent), var(--reagent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--d-base) var(--e-out);
}
.tlink:hover { background-size: 100% 1px; }
.tlink::after {
  content: '';
  position: absolute;
  inset: -11px -6px;        /* lifts the target to ~46px tall */
}
.section--paper .tlink { color: var(--fg-inv); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(90dvh, 880px);
  display: flex;
  align-items: center;
  padding-block: var(--s-9) var(--s-8);
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.72;
}

/* Vignette so type always wins over the particle field. The first stop
   protects the headline; the second keeps the resolved lattice from
   shouting at the right edge; the third blends into the next section. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(115% 88% at 26% 46%, color-mix(in srgb, var(--ink) 92%, transparent) 0%, transparent 60%),
    linear-gradient(to right, transparent 62%, color-mix(in srgb, var(--ink) 55%, transparent) 100%),
    linear-gradient(to bottom, transparent 58%, var(--ink) 100%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: color-mix(in srgb, var(--ink-2) 70%, transparent);
  backdrop-filter: blur(8px);
}
.hero__tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--reagent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--reagent) 18%, transparent);
  animation: pulse 2.6s var(--e-inout) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.hero__title { max-width: 16ch; margin-bottom: var(--s-6); }
.hero__sub { font-size: var(--t-md); max-width: 56ch; color: var(--fg-dim); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

/* Hero footer strip: the "instrument readout" */
.hero__meta {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  padding-top: var(--s-7);
  margin-top: var(--s-9);
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .hero__meta { grid-template-columns: repeat(3, 1fr); } }
.hero__meta dt {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* --fg-dim, not --fg-faint: the hero dims to 0.85 on scroll, and faint
     grey lands at 4.06:1 once composited against the ink underneath. */
  color: var(--fg-dim);
  margin-bottom: var(--s-2);
}
.hero__meta dd { font-size: var(--t-sm); color: var(--fg-dim); max-width: 34ch; }

/* --------------------------------------------------------------------------
   8. TICKER
   -------------------------------------------------------------------------- */

/* Must be positioned. .grid-substrate is fixed at z-index 0, and a positioned
   element with z-index 0 paints ABOVE non-positioned block boxes: so a static
   ticker gets the grid's hairlines drawn straight across it. */
.ticker {
  position: relative;
  z-index: var(--z-base);
  border-block: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  padding-block: var(--s-4);
  /* The hero's own bottom padding alone left the band crowding the meta row
     above it, so give the ticker its own clearance. */
  margin-top: var(--s-7);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding-inline: var(--s-6);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
}
.ticker__item::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line-2);
}

/* --------------------------------------------------------------------------
   9. SPLIT: the two-hemisphere layout device
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .split--seam { position: relative; }
  .split--seam::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--line-2) 15%, var(--line-2) 85%, transparent);
  }
}
.split__side { position: relative; }
.split--seam .split__side:first-child { padding-right: 0; }
@media (min-width: 900px) {
  .split--seam .split__side:first-child { padding-right: var(--s-5); }
  .split--seam .split__side:last-child  { padding-left: var(--s-5); }
}

.split--sticky { align-items: start; }
@media (min-width: 900px) {
  .split--sticky .split__side:first-child {
    position: sticky;
    top: 120px;
  }
}

/* Asymmetric variant for text + figure */
@media (min-width: 900px) {
  .split--5-7 { grid-template-columns: 5fr 7fr; }
  .split--7-5 { grid-template-columns: 7fr 5fr; }
}

/* --------------------------------------------------------------------------
   10. VENTURE PANELS
   -------------------------------------------------------------------------- */

.venture {
  --v: var(--reagent);
  position: relative;
  display: block;
  padding: var(--s-7) var(--s-6) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--v) 7%, var(--ink-2)) 0%,
      var(--ink-2) 46%);
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
  height: 100%;
}
.venture:hover {
  border-color: color-mix(in srgb, var(--v) 45%, var(--line));
  transform: translateY(-3px);
}
.venture::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--v), transparent 70%);
}
.venture--delphi { --v: var(--delphi); }
.venture--tim    { --v: var(--tim-plum); }

.venture__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.venture__glyph {
  width: 44px; height: 44px;
  flex: none;
  color: var(--v);
}
.venture__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--v) 34%, transparent);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v);
  background: color-mix(in srgb, var(--v) 9%, transparent);
  white-space: nowrap;
}
.venture__status .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.venture__status--live .dot { animation: pulse 2.2s var(--e-inout) infinite; }

.venture__name {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  margin-bottom: var(--s-2);
}
.venture__kicker {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--v);
  margin-bottom: var(--s-4);
}
.venture__desc { color: var(--fg-dim); font-size: var(--t-sm); margin-bottom: var(--s-5); }

.venture__list { list-style: none; padding: 0; margin: 0 0 var(--s-6); }
.venture__list li {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--fg-dim);
}
.venture__list li svg { flex: none; margin-top: 3px; color: var(--v); }

.venture__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.venture__url {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--fg-faint);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   11. CARDS / CAPABILITY GRID
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--ink-2);
  padding: var(--s-6);
  transition: background var(--d-base) var(--e-out);
}
.card:hover { background: var(--ink-3); }
.card__num {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--reagent);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: var(--s-5);
}
.card__title {
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-3);
}
.card__body { font-size: var(--t-sm); color: var(--fg-dim); }

.section--paper .cards { background: var(--line-inv); border-color: var(--line-inv); }
.section--paper .card { background: var(--bone); }
.section--paper .card:hover { background: var(--bone-2); }
.section--paper .card__body { color: var(--fg-inv-dim); }
.section--paper .card__num { color: var(--fg-inv-dim); }

/* Stat block */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-7) var(--s-5);
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__val {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  line-height: 1;
  margin-bottom: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.section--paper .stat__label { color: var(--fg-inv-dim); }

/* --------------------------------------------------------------------------
   12. FORM
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }

.field label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.field label .req { color: var(--reagent); margin-left: 3px; }

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 13px var(--s-4);
  background: var(--ink-2);
  border: 1px solid var(--line-input);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--t-base);
  transition: border-color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--fg-faint); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--reagent);
  background: var(--ink-3);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%239C9CA6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-right: var(--s-8);
  cursor: pointer;
}
.field__help { font-size: var(--t-xs); color: var(--fg-faint); font-family: var(--f-sans); letter-spacing: 0; }

.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  color: var(--danger);
}
.field.is-invalid .field__error { display: flex; }
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select { border-color: var(--danger); }

.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  position: relative;      /* same reason as .ticker: stay above .grid-substrate */
  z-index: var(--z-base);
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding-block: var(--s-9) var(--s-6);
}
.footer__grid {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: 1fr;
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 2.2fr 1fr 1fr 1fr; } }

.footer__col h3 {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--s-5);
  font-weight: 500;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.footer__col a { font-size: var(--t-sm); color: var(--fg-dim); transition: color var(--d-fast) var(--e-out); }
.footer__col a:hover { color: var(--fg); }

.footer__blurb { font-size: var(--t-sm); color: var(--fg-dim); max-width: 40ch; margin-top: var(--s-5); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-6);
}
.footer__bar p, .footer__bar a {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}

/* --------------------------------------------------------------------------
   14. PAGE HEADER (inner pages)
   -------------------------------------------------------------------------- */

.pagehead {
  position: relative;
  padding-block: var(--s-10) var(--s-9);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.pagehead--delphi { background: linear-gradient(170deg, color-mix(in srgb, var(--delphi) 8%, var(--ink)) 0%, var(--ink) 58%); }
.pagehead--tim    { background: linear-gradient(170deg, color-mix(in srgb, var(--tim-plum) 12%, var(--ink)) 0%, var(--ink) 58%); }

.crumb {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--s-6);
}
.crumb a:hover { color: var(--fg); }
.crumb span { color: var(--fg-faint); }

/* --------------------------------------------------------------------------
   15. FIGURES / DIAGRAMS
   -------------------------------------------------------------------------- */

.figure {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-2);
  padding: var(--s-6);
}
.figure__cap {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--fg-faint);
  letter-spacing: 0.06em;
}
.figure__cap b { color: var(--reagent); font-weight: 500; flex: none; }

/* The hemisphere diagram: the identity, made argument.
   Left side is Phantasm (dissolving), right side is Brain (lattice),
   and the seam between them is the accent. Same idea as the logo. */
.hemi { position: relative; }

.hemi__head {
  display: flex;
  justify-content: center;
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.hemi__head .mono-label { color: var(--reagent); }

.hemi__body {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .hemi__body { grid-template-columns: 1fr 1fr; }
}

.hemi__side {
  position: relative;
  padding: var(--s-6);
}
.hemi__side--l {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 100% at 0% 50%, color-mix(in srgb, var(--tim-plum) 9%, transparent), transparent 62%);
}
.hemi__side--r {
  background:
    radial-gradient(120% 100% at 100% 50%, color-mix(in srgb, var(--delphi) 8%, transparent), transparent 62%);
}
@media (min-width: 820px) {
  .hemi__side--l {
    border-bottom: 0;
    border-right: 1px solid var(--reagent);
  }
}

.hemi__tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--reagent);
  margin-bottom: var(--s-4);
}
/* Each hemisphere wears its own accent: Phantasm pink, Brain volt */
.hemi__side--r .hemi__tag { color: var(--volt); }
.hemi__title {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  margin-bottom: var(--s-3);
}
.hemi__desc {
  font-size: var(--t-sm);
  color: var(--fg-dim);
  max-width: 42ch;
  margin-bottom: var(--s-5);
}
.hemi__list { list-style: none; padding: 0; margin: 0; }
.hemi__list li {
  position: relative;
  padding: 10px 0 10px var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--fg-dim);
}
.hemi__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fg-faint);
}
.hemi__list strong { color: var(--fg); font-weight: 500; }

/* Numbered process list */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li {
  position: relative;
  padding: var(--s-5) 0 var(--s-5) var(--s-8);
  border-top: 1px solid var(--line);
  counter-increment: step;
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--reagent);
  letter-spacing: 0.08em;
}
.steps h3 { font-size: var(--t-md); font-weight: 500; margin-bottom: var(--s-2); letter-spacing: -0.01em; }
.steps p { font-size: var(--t-sm); color: var(--fg-dim); max-width: 58ch; }
.section--paper .steps li { border-color: var(--line-inv); }
.section--paper .steps p { color: var(--fg-inv-dim); }
.section--paper .steps li::before { color: var(--fg-inv-dim); }

/* --------------------------------------------------------------------------
   16. SCROLL REVEAL
   -------------------------------------------------------------------------- */

/* Content is visible by default and only hidden once JS has confirmed it is
   running (the inline snippet in <head> adds .js). If the script fails to
   load, every section still renders: it just doesn't animate in. */
.reveal {
  transition: opacity 700ms var(--e-out), transform 700ms var(--e-out);
}
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Stagger children: 40ms apart, capped so lists never crawl */
.stagger > * { transition-delay: calc(var(--i, 0) * 45ms); }

/* --------------------------------------------------------------------------
   16b. MOTION SYSTEM
   Everything here is transform/opacity only: no layout properties are
   animated, so nothing in this block can cause reflow or CLS. All of it is
   gated behind .js and switched off entirely under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

/* ── Scroll progress rail ─────────────────────────────────────────────── */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
  background: transparent;
}
.progress span {
  display: block;
  height: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  /* Phantasm pink resolving into Brain volt, same as the hero field */
  background: linear-gradient(90deg, var(--reagent), var(--volt));
  box-shadow: 0 0 12px color-mix(in srgb, var(--reagent) 55%, transparent);
}

/* ── Masked word reveal for display headlines ─────────────────────────
   Each word gets its own overflow-hidden box so the glyphs rise from
   behind a hard edge. Padding + negative margin give descenders and
   italic overhang room to live without being clipped. */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.06em 0.07em 0.16em;
  margin: -0.06em -0.07em -0.16em;
}
.w__i {
  display: inline-block;
  will-change: transform;
}
.js .split-ready .w__i {
  transform: translateY(110%) rotate(2deg);
  opacity: 0;
  transition:
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--wi, 0) * 42ms);
}
.js .split-ready.is-in .w__i { transform: none; opacity: 1; }

/* ── Parallax ─────────────────────────────────────────────────────────── */
.js [data-parallax] { will-change: transform; }

/* ── Eyebrow rules draw themselves in ─────────────────────────────────── */
.js .eyebrow .eyebrow__line {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1100ms var(--e-out) 140ms;
}
.js .eyebrow.is-in .eyebrow__line { transform: scaleX(1); }

/* ── Venture list rows cascade in behind their panel ──────────────────── */
.js .venture .venture__list li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 620ms var(--e-out), transform 620ms var(--e-out);
}
.js .is-in .venture .venture__list li,
.js .venture.is-in .venture__list li { opacity: 1; transform: none; }
.js .venture .venture__list li:nth-child(1) { transition-delay: 180ms; }
.js .venture .venture__list li:nth-child(2) { transition-delay: 280ms; }
.js .venture .venture__list li:nth-child(3) { transition-delay: 380ms; }

/* ── Magnetic buttons ─────────────────────────────────────────────────── */
.js .btn[data-magnetic] {
  will-change: transform;
  transition: transform 380ms var(--e-out),
              background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}
.js .btn[data-magnetic].is-pulled { transition: transform 90ms linear; }

/* ── Cursor spotlight on panels ───────────────────────────────────────── */
.venture, .card, .figure { position: relative; }
.js .venture::after,
.js .card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--e-out);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--v, var(--reagent)) 13%, transparent),
    transparent 62%);
}
.js .venture:hover::after,
.js .card:hover::after { opacity: 1; }
.section--paper .card::after { display: none; }

/* ── Header shrink ────────────────────────────────────────────────────── */
.header__inner { transition: height 320ms var(--e-out); }
.header.is-stuck .header__inner { height: 60px; }
.brand__mark { transition: transform 320ms var(--e-out); }
.header.is-stuck .brand__mark { transform: scale(0.88); }
.brand__sub {
  transition: opacity 240ms var(--e-out), max-height 320ms var(--e-out);
  overflow: hidden;
  max-height: 1.2em;
}
.header.is-stuck .brand__sub { opacity: 0; max-height: 0; }

/* ── Hero entrance ────────────────────────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.js .hero__tag,
.js .hero__sub,
.js .hero__cta,
.js .hero__meta {
  animation: rise 1000ms var(--e-out) backwards;
}
.js .hero__tag  { animation-delay: 80ms; }
.js .hero__sub  { animation-delay: 420ms; }
.js .hero__cta  { animation-delay: 560ms; }
.js .hero__meta { animation-delay: 700ms; }

/* ── Ticker: JS takes over so scroll velocity can drive it ────────────── */
.js .ticker__track { animation: none; will-change: transform; }

/* ── Venture panel lift ───────────────────────────────────────────────── */
.venture { transition: border-color var(--d-base) var(--e-out),
                       transform 420ms var(--e-out),
                       box-shadow 420ms var(--e-out); }
.js .venture:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--v) 30%, transparent);
}

/* ── Count-up numerals hold their width so nothing jumps ──────────────── */
.stat__val { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */

/* Keep this ladder complete. u-mt-3 and u-mt-9 were used in markup but never
   defined here, which silently collapsed two CTA blocks onto the cards above
   them: a missing utility fails as margin:0, with no error anywhere. */
.u-mt-2  { margin-top: var(--s-2); }
.u-mt-3  { margin-top: var(--s-3); }
.u-mt-4  { margin-top: var(--s-4); }
.u-mt-5  { margin-top: var(--s-5); }
.u-mt-6  { margin-top: var(--s-6); }
.u-mt-7  { margin-top: var(--s-7); }
.u-mt-8  { margin-top: var(--s-8); }
.u-mt-9  { margin-top: var(--s-9); }
.u-mt-10 { margin-top: var(--s-10); }
.u-mt-sect { margin-top: var(--s-section); }
.u-mb-4  { margin-bottom: var(--s-4); }
.u-mb-5  { margin-bottom: var(--s-5); }
.u-mb-6  { margin-bottom: var(--s-6); }
.u-mb-7  { margin-bottom: var(--s-7); }
.u-mb-8  { margin-bottom: var(--s-8); }
.u-mb-9  { margin-bottom: var(--s-9); }
.u-center { text-align: center; margin-inline: auto; }
.u-reagent { color: var(--reagent); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: var(--z-modal);
  padding: 12px 20px;
  background: var(--reagent);
  color: var(--ink);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: top var(--d-base) var(--e-out);
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   18. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .reveal { opacity: 1; transform: none; }
  .ticker__track { animation: none; }

  /* Motion system off. Content must land in its final state, not mid-flight. */
  .js .split-ready .w__i,
  .js .split-ready.is-in .w__i { transform: none !important; opacity: 1 !important; }
  .w { overflow: visible; padding: 0; margin: 0; }
  .js [data-parallax] { transform: none !important; }
  .js .btn[data-magnetic] { transform: none !important; }
  .js .eyebrow .eyebrow__line { transform: scaleX(1) !important; }
  .js .venture .venture__list li { opacity: 1 !important; transform: none !important; }
  .js .hero__inner { transform: none !important; opacity: 1 !important; }
  .js .venture:hover { transform: none; box-shadow: none; }
  .js .venture::after, .js .card::after { display: none; }
  .progress { display: none; }
  .header.is-stuck .header__inner { height: 72px; }
  .header.is-stuck .brand__sub { opacity: 1; max-height: 1.2em; }
  .header.is-stuck .brand__mark { transform: none; }
}