/* ============================================================
   FONTS: self-hosted (OFL), latin and latin-ext subsets only.
   Same-origin files remove the render-blocking cross-origin
   stylesheet that held first paint on mobile.
   ============================================================ */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-400-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500-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;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-tight-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-tight-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;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-tight-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-tight-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;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter-tight-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter-tight-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/newsreader-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/newsreader-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/newsreader-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/newsreader-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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/newsreader-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/newsreader-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;
}

/* ============================================================
   BIRDDOG VENTURES — mission-critical infrastructure platform
   Multi-page build · light theme · monochrome steel · one blue
   ============================================================ */

:root {
  --bg: #F2F2F0;
  --bg-raised: #F8F8F5;
  --surface: #FFFFFF;
  --surface-2: #F7F7F4;        /* hover tone for white cards on the grey ground */
  --ink: #0E1013;
  /* alphas measured against --bg #F2F2F0: .62 is the floor that clears WCAG AA
     4.5:1 for small text. --ink-40 is for words at that floor, nothing below. */
  --ink-70: rgba(14, 16, 19, .80);
  --ink-55: rgba(14, 16, 19, .70);
  --ink-40: rgba(14, 16, 19, .62);
  --line: rgba(14, 16, 19, .12);
  --line-soft: rgba(14, 16, 19, .07);
  --line-hard: rgba(14, 16, 19, .26);
  --steel: #5C636B;
  --accent: #1648D8;
  --accent-ink: #0F36A8;
  --accent-soft: #6E8DF0;
  --accent-dim: rgba(22, 72, 216, .10);
  --accent-glow: rgba(22, 72, 216, .28);
  --dark: #0C0E11;
  --dark-line: rgba(255, 255, 255, .14);
  --cream: #EDEBE6;

  --fs-body: 17px;

  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --serif: "Newsreader", Georgia, serif;
  --display: "Newsreader", Georgia, serif;   /* the seam line; the white build used Instrument Serif */

  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --ease-snap: cubic-bezier(.625, .05, 0, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --gutter: clamp(20px, 4.5vw, 72px);
  --nav-h: 88px;
  --nav-h-compact: 58px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h-compact) + 16px); overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, never hidden: hidden on one axis computes the other to auto, body
     becomes a scroll container and every position:sticky descendant dies. */
  overflow-x: clip;
}

::selection { background: var(--accent); color: #fff; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.investors :focus-visible, .contact :focus-visible { outline-color: var(--accent-soft); }

img, svg, video { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- film grain ---------- */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- page transition curtain ---------- */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* Opens in CSS on first paint: the page never waits on app.js to become
   visible. app.js closes it on the way out by adding .is-leaving, which
   swaps the animation name. A name swap starts a new animation in every
   engine; a transition out of a removed animation is not guaranteed to.
   The longhand keeps the per-bar delays below. */
.wipe i {
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  animation: wipe-reveal .7s var(--ease-snap) both;
}
.wipe i:nth-child(2) { animation-delay: .05s; }
.wipe i:nth-child(3) { animation-delay: .1s; }
.wipe i:nth-child(4) { animation-delay: .15s; }
@keyframes wipe-reveal { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes wipe-cover { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.wipe.is-leaving { pointer-events: all; }
.wipe.is-leaving i { animation-name: wipe-cover; }

/* ---------- page-wide column grid (faint) ---------- */
.page-grid {
  position: fixed;
  inset: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  pointer-events: none;
  z-index: 0;
}
.page-grid span { border-left: 1px solid var(--line-soft); }
.page-grid span:last-child { border-right: 1px solid var(--line-soft); }

/* ============================================================
   NAVIGATION — sticky, compacts on scroll
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  transition: height .45s var(--ease-out), background-color .45s var(--ease-out),
              border-color .45s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-compact {
  height: var(--nav-h-compact);
  border-bottom-color: var(--line);
}
/* The compact bar's blur lives on a pseudo-element, NEVER on .nav itself.
   A non-none backdrop-filter makes its element a containing block for
   position:fixed descendants — and .nav-links is a fixed full-screen overlay
   inside .nav. With the blur on .nav, the closed mobile menu resolved against
   the 58px bar instead of the viewport and its links bled onto the page. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(242, 242, 240, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  transition: opacity .45s var(--ease-out);
  pointer-events: none;
}
.nav.is-compact::before { opacity: 1; }
/* blur is the most expensive thing on the page during scroll; phones get half */
@media (pointer: coarse) {
  .nav::before { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;                   /* 30px mark -> 46px tap target */
  transition: transform .45s var(--ease-out);
}
.nav.is-compact .brand { transform: scale(.92); transform-origin: left center; }
.brand-mark { height: 30px; width: auto; flex: none; }
.brand-word { height: 13px; width: auto; display: block; }
@media (max-width: 480px) { .brand-word { height: 11px; } }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  list-style: none;
}
.nav-links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-70);
  padding: 6px 0;
  position: relative;
  transition: color .3s;
}
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-snap);
}
.nav-links a:hover::after, .nav-links a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-links a.nav-ext { color: var(--accent); }
.nav-links a.nav-ext::after { background: var(--accent); }
/* desktop only: the full-screen mobile menu (max-width 900px) keeps its plain rows */
@media (min-width: 901px) {
  .nav-links a.nav-cta { padding: 9px 16px; border: 1px solid var(--ink); background: var(--ink); color: #fff; transition: color .3s, background-color .3s, border-color .3s; }
  .nav-links a.nav-cta::after { display: none; }
  .nav-links a.nav-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  position: relative;
  z-index: 1002;
}
.nav-toggle span {
  position: absolute;
  left: 8px; right: 8px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .35s var(--ease-out), opacity .3s;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  /* the <nav> wrapper stays a zero-width flex item once .nav-links goes fixed,
     so space-between would park the toggle mid-bar. Anchor it right. */
  .nav { justify-content: flex-start; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    padding: max(24px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right))
             max(24px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    transform: translateY(-100%);
    transition: transform .5s var(--ease-out);
    z-index: 1001;
  }
  .nav-links.is-open { transform: translateY(0); }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 14px 0;              /* row-wide hit area, clears 44px */
    font-family: var(--sans);
    font-size: clamp(28px, 7vw, 40px);
    font-weight: 500;
    letter-spacing: -.02em;
    text-transform: none;
    color: var(--ink);
  }
}

/* Body scroll lock while the full-screen menu is open. overflow:hidden on body
   does not hold on iOS Safari (html is the scrolling element), so the body is
   pinned at its scroll offset and restored by app.js on close. */
html.is-menu-locked { overflow-y: hidden; }
body.is-menu-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */
.section {
  position: relative;
  z-index: 1;
  padding: clamp(96px, 14vh, 180px) var(--gutter);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.eyebrow::before {
  content: "";
  width: 42px; height: 1px;
  background: var(--ink-40);
}
.eyebrow .eyebrow-num { color: var(--accent); }

/* line-mask reveal */
.rv { display: block; overflow: clip; padding-bottom: .13em; margin-bottom: -.13em; }
.rv > span {
  display: block;
  transition: transform 1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
/* hidden initial states only exist once the inline head script has run, so a
   page whose scripts stall or fail is never left blank; .reveal-all is the
   4-second failsafe from that same script */
.js .rv > span { transform: translateY(112%); }
.js .rv.in > span { transform: translateY(0); }

.fade {
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .fade { opacity: 0; transform: translateY(18px); }
.js .fade.in { opacity: 1; transform: none; }
.reveal-all .rv > span { transform: none; }
.reveal-all .fade { opacity: 1; transform: none; }
.reveal-all .clip-img img, .reveal-all .clip-img video { transform: scale(1); }

/* The hero is in view on load, so its entrance runs in CSS from first paint
   instead of waiting for the scroll observer in app.js. Supporting lines
   settle by transform only: Chrome does not count an element held at
   opacity 0 as painted, which pushed the hero subheading (the mobile LCP)
   past the scripts and the fade delay. */
.hero .rv > span { transform: none; transition: none; animation: rise-line 1s var(--ease-out) var(--d, 0s) both; }
.hero .fade { opacity: 1; transform: none; transition: none; animation: settle .9s var(--ease-out) var(--d, 0s) both; }
@keyframes rise-line { from { transform: translateY(112%); } to { transform: none; } }
@keyframes settle { from { transform: translateY(18px); } to { transform: none; } }

/* clip-reveal image */
.clip-img {
  overflow: clip;
  position: relative;
  background: #DEDCD8;
}
.clip-img img, .clip-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.4s var(--ease-out);
}
.clip-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform-origin: top;
  transition: transform 1s var(--ease-snap);
  transition-delay: var(--d, 0s);
  z-index: 2;
}
.js .clip-img::after { transform: scaleY(1); }
.js .clip-img.in::after, .reveal-all .clip-img::after { transform: scaleY(0); }
.clip-img.in img, .clip-img.in video { transform: scale(1); }

/* duotone treatment for photography */
.duo { filter: grayscale(1) contrast(1.06) brightness(1.02); }
.duo-tint { position: relative; }
.duo-tint::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(22,72,216,.14), rgba(14,16,19,.18) 70%);
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

/* underline link with origin switch */
.u-link { position: relative; display: inline-block; }
.u-link::before {
  content: "";
  position: absolute;
  bottom: -.08em; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-snap);
}
.u-link:hover::before { transform: scaleX(1); transform-origin: left; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 16px 26px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  transition: background .35s var(--ease-out), color .35s, border-color .35s;
}
.btn svg { transition: transform .35s var(--ease-out); }
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn:hover svg { transform: translateX(4px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--light { background: transparent; color: var(--cream); border-color: rgba(237,235,230,.35); }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================
   HERO — video-led cinematic
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + 24px) var(--gutter) clamp(48px, 7vh, 88px);
  overflow: clip;
  background: var(--bg);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}
.hero-media video, .hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.85) contrast(1.05) brightness(1.06);
  opacity: .5;
  will-change: transform;
}
/* the loop fades in over the still once it is actually playing */
.hero-media video { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero-media video.is-playing { opacity: .5; }
/* the still steps out as the loop steps in: two .5 layers would stack to a
   heavier hero with the static frame ghosting through the footage */
.hero-media .hero-still { transition: opacity 1.2s var(--ease-out); }
.hero-media.is-live .hero-still { opacity: 0; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(242,242,240,.25) 0%, rgba(242,242,240,.55) 55%, var(--bg) 96%);
}

/* vertical energy grid */
.hero-grid {
  position: absolute;
  inset: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  pointer-events: none;
  z-index: 1;
}
.hero-grid .hg-line {
  position: relative;
  border-left: 1px solid rgba(14, 16, 19, .09);
  overflow: clip;
}
.hero-grid .hg-line:last-child { border-right: 1px solid rgba(14, 16, 19, .09); }
.hero-grid .hg-line::after {
  content: "";
  position: absolute;
  top: 0; left: -1px;
  width: 1px; height: 26vh;
  background: linear-gradient(180deg, transparent, var(--accent) 55%, transparent);
  opacity: 0;
  animation: trace var(--t, 9s) linear infinite;
  animation-delay: var(--dl, 0s);
}
@keyframes trace {
  0%   { transform: translateY(-30vh); opacity: 0; }
  10%  { opacity: .55; }
  80%  { opacity: .55; }
  100% { transform: translateY(130vh); opacity: 0; }
}

.hero-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(22, 72, 216, .5), transparent);
  animation: scan 11s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes scan {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .7; }
  55% { opacity: .7; }
  70%, 100% { transform: translateY(72vh); opacity: 0; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin-bottom: clamp(24px, 3.5vh, 44px);
}
.hero-kicker .dot {
  width: 7px; height: 7px;
  background: var(--accent);
  flex: none;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.hero h1 {
  font-size: clamp(46px, 8.2vw, 118px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: .98;
  max-width: 14ch;
}
.hero h1 .accent { color: var(--accent); }

.hero-sub {
  margin-top: clamp(24px, 3.5vh, 40px);
  max-width: 560px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-70);
}

.hero-ctas { margin-top: clamp(32px, 4.5vh, 52px); display: flex; flex-wrap: wrap; gap: 14px; }

.hero-meta {
  position: relative;
  z-index: 2;
  max-width: 1500px;
  width: 100%;
  margin: clamp(36px, 6vh, 72px) auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.hero-meta .scroll-cue { display: flex; align-items: center; gap: 10px; }
.hero-meta .scroll-cue::after {
  content: "";
  width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--ink-55), transparent);
  animation: cue 2.2s var(--ease-out) infinite;
}
/* background-loop pause control: styled to read as part of the meta strip */
.hero-meta { flex-wrap: wrap; row-gap: 12px; }
.loop-toggle {
  order: 1;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer; pointer-events: auto;
}
.hero-meta .scroll-cue { order: 2; }
@media (prefers-reduced-motion: reduce) { .loop-toggle { display: none; } }
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* subpage hero variant */
.hero--page { min-height: 72svh; }
.hero--page h1 { font-size: clamp(44px, 7.4vw, 108px); }
.hero--compact { min-height: 0; padding-bottom: clamp(28px, 4vh, 48px); }
.hero--compact .hero-inner { flex: none; }
.hero--compact .hero-meta { margin-top: 24px; }
@media (max-width: 900px) { .hero--compact .hero-meta .scroll-cue { display: none; } }

/* ============================================================
   APPROACH — node line + statement
   ============================================================ */
.approach { border-top: 1px solid var(--line); }
.approach-inner { max-width: 1500px; margin: 0 auto; }
.approach h2 { font-size: clamp(36px, 5.4vw, 80px); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; max-width: 16ch; }
.approach .cols { margin-top: clamp(40px, 6vh, 72px); display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(24px, 3vw, 56px); }
.approach .cols > div:first-child { grid-column: 1 / 6; }
.approach .cols p { color: var(--ink-70); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; }
.approach .cols p + p { margin-top: 1.1em; }
.approach .cols .partner-note { grid-column: 7 / 13; border-left: 1px solid var(--line); padding-left: clamp(24px, 3vw, 56px); align-self: start; }
.approach .cols .partner-note h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 400; margin-bottom: 18px; }
.approach .cols .partner-note p { font-size: 16.5px; color: var(--ink-70); }

.node-line { margin-top: clamp(56px, 9vh, 104px); display: flex; align-items: flex-start; border-top: 1px solid var(--line); position: relative; }
.node-line::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 34%; background: var(--accent); }
.node { flex: 1; padding: 22px 18px 0 0; position: relative; }
.node::before { content: ""; position: absolute; top: -4.5px; left: 0; width: 8px; height: 8px; background: var(--bg); border: 1px solid var(--ink-40); transform: rotate(45deg); transition: background .3s, border-color .3s; }
.node:hover::before { background: var(--accent); border-color: var(--accent); }
.node span { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-70); }
.node p { margin-top: 10px; font-size: 15px; color: var(--ink-55); line-height: 1.5; max-width: 22ch; }

@media (max-width: 900px) {
  .approach .cols > div:first-child { grid-column: 1 / 13; }
  .approach .cols .partner-note { grid-column: 1 / 13; border-left: 0; padding-left: 0; margin-top: 40px; border-top: 1px solid var(--line); padding-top: 32px; }
  .node-line { flex-wrap: wrap; }
  .node { flex: 1 1 45%; padding-bottom: 24px; }
}

/* ============================================================
   CAPABILITIES PAGE — sticky media / text sequences
   ============================================================ */
.cap-seq { border-top: 1px solid var(--line); }
.cap-block { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(24px, 3vw, 56px); padding: clamp(60px, 9vh, 120px) 0; border-bottom: 1px solid var(--line); }
.cap-block:last-child { border-bottom: 0; }
.cap-block .cap-media { grid-column: 1 / 7; position: sticky; top: calc(var(--nav-h-compact) + 24px); align-self: start; }
.cap-block .cap-media .clip-img { aspect-ratio: 4 / 3; }
.cap-block.flip .cap-media { grid-column: 7 / 13; order: 2; }
.cap-block .cap-text { grid-column: 8 / 13; align-self: center; }
.cap-block.flip .cap-text { grid-column: 1 / 6; order: 1; }
.cap-block .cap-text .pane-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.cap-block .cap-text h3, .cap-block .cap-text .cap-h { font-size: clamp(30px, 3.4vw, 50px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 22px; }
.cap-block .cap-text p { color: var(--ink-70); font-size: 16.5px; line-height: 1.65; }
.cap-block .cap-text p + p { margin-top: 1em; }
.cap-block .cap-text ul { list-style: none; margin-top: 26px; border-top: 1px solid var(--line); }
.cap-block .cap-text li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); color: var(--ink-70); display: flex; gap: 14px; }
.cap-block .cap-text li::before { content: "→"; color: var(--accent); flex: none; }

@media (max-width: 900px) {
  .cap-block .cap-media, .cap-block.flip .cap-media { grid-column: 1 / 13; order: 1; position: relative; top: 0; margin-bottom: 36px; }
  .cap-block .cap-text, .cap-block.flip .cap-text { grid-column: 1 / 13; order: 2; }
}

/* ============================================================
   ABOUT PAGE — principals, pull quote, timeline
   ============================================================ */
.about { border-top: 1px solid var(--line); }
.about-inner { max-width: 1500px; margin: 0 auto; }
.about .intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(24px, 3vw, 56px); margin-bottom: clamp(48px, 7vh, 88px); }
.about .intro .eyebrow { grid-column: 1 / 13; }
.about h2 { grid-column: 1 / 7; font-size: clamp(32px, 4.2vw, 62px); font-weight: 500; letter-spacing: -.03em; line-height: 1.06; }
.about .intro p.lead { grid-column: 8 / 13; align-self: end; color: var(--ink-70); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; }

.pull-quote {
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 110px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pull-quote blockquote {
  font-size: clamp(28px, 3.8vw, 56px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.12;
  max-width: 24ch;
}
.pull-quote blockquote em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.pull-quote cite { display: block; margin-top: 26px; font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-55); }

.principals { border-bottom: 1px solid var(--line); }
.principal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px clamp(24px, 3vw, 56px); align-items: baseline; padding: clamp(28px, 4vh, 44px) 0; border-top: 1px solid var(--line); transition: background .35s, padding-left .45s var(--ease-out); }
.principal:hover { background: rgba(14,16,19,.025); padding-left: 16px; }
.principal .p-name { grid-column: 1 / 5; font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; }
.principal .p-role { grid-column: 5 / 8; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.principal .p-bio { grid-column: 8 / 13; color: var(--ink-70); font-size: var(--fs-body); line-height: 1.6; }
.p-contact { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.p-contact a { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink); }
.p-contact a:hover { color: var(--accent); }

.timeline { max-width: 1500px; margin: 0 auto; }
.tl-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px clamp(24px, 3vw, 56px); padding: 26px 0; border-top: 1px solid var(--line); align-items: baseline; }
.tl-row:last-child { border-bottom: 1px solid var(--line); }
.tl-row .tl-k { grid-column: 1 / 4; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.tl-row .tl-v { grid-column: 4 / 13; font-size: clamp(18px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); }
.tl-row .tl-v span { display: block; margin-top: 6px; font-size: var(--fs-body); font-weight: 400; color: var(--ink-70); letter-spacing: 0; }

@media (max-width: 900px) {
  .about h2, .about .intro p.lead { grid-column: 1 / 13; }
  .about .intro p.lead { margin-top: 28px; }
  .principal .p-name { grid-column: 1 / 13; }
  .principal .p-role { grid-column: 1 / 13; margin: 6px 0 10px; }
  .principal .p-bio { grid-column: 1 / 13; }
  .principal:hover { padding-left: 0; }
  .tl-row .tl-k { grid-column: 1 / 13; margin-bottom: 8px; }
  .tl-row .tl-v { grid-column: 1 / 13; }
}

/* ============================================================
   FULL-BLEED MEDIA BREAK
   ============================================================ */
.media-break { position: relative; height: clamp(340px, 70vh, 720px); overflow: clip; }
.media-break img, .media-break video { width: 100%; height: 130%; object-fit: cover; will-change: transform; }
.media-break .mb-label { position: absolute; left: var(--gutter); bottom: 24px; z-index: 2; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.85); display: flex; gap: 12px; align-items: center; }
.media-break .mb-label::before { content: ""; width: 30px; height: 1px; background: rgba(255,255,255,.6); }

/* ============================================================
   INVESTORS — discreet inverted block
   ============================================================ */
.investors { background: var(--dark); color: var(--cream); position: relative; overflow: clip; }
.investors .hero-grid-mini { position: absolute; inset: 0 var(--gutter); display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; }
.investors .hero-grid-mini span { border-left: 1px solid rgba(255,255,255,.05); }
.investors .hero-grid-mini span:last-child { border-right: 1px solid rgba(255,255,255,.05); }
.investors-inner { position: relative; max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(24px, 3vw, 56px); align-items: center; }
.investors .eyebrow { color: rgba(237,235,230,.5); grid-column: 1 / 13; }
.investors .eyebrow::before { background: rgba(237,235,230,.3); }
.investors .eyebrow .eyebrow-num { color: var(--accent-soft); }
.investors h2 { grid-column: 1 / 8; font-size: clamp(28px, 3.2vw, 46px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.investors .inv-right { grid-column: 9 / 13; }
.investors .inv-right p { color: rgba(237,235,230,.82); font-size: var(--fs-body); line-height: 1.65; margin-bottom: 28px; }
.investors .inv-note { margin-top: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(237,235,230,.66); }
.investors .inv-note a { color: rgba(237,235,230,.92); text-decoration: underline; text-underline-offset: 3px; }
.investors .inv-note a:hover { color: #fff; }
@media (max-width: 900px) {
  .investors h2 { grid-column: 1 / 13; margin-bottom: 32px; }
  .investors .inv-right { grid-column: 1 / 13; }
}

/* ============================================================
   TENANTS — direct-line form
   ============================================================ */
.tenants { border-top: 1px solid var(--line); }
.tenants-wrap { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(24px, 3vw, 56px); }
.tenants .t-copy { grid-column: 1 / 6; }
.tenants h2 { font-size: clamp(32px, 4vw, 58px); font-weight: 500; letter-spacing: -.03em; line-height: 1.06; margin-bottom: 26px; }
.tenants .t-copy > p { color: var(--ink-70); max-width: 44ch; font-size: 16.5px; line-height: 1.65; }
.tenants .t-assure { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); line-height: 2; }
.tenants .t-assure b { color: var(--accent); font-weight: 400; }
.tenants ul.t-assure { list-style: none; margin-bottom: 0; padding-left: 0; }

.t-form { grid-column: 7 / 13; }
.t-form form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-55); }
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 0 12px;
  border-radius: 0;
  transition: border-color .3s;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230E1013' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  cursor: pointer;
}
.field textarea { resize: vertical; min-height: 110px; }
.field ::placeholder { color: var(--ink-40); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.form-foot .hint { font-size: 15px; color: var(--ink-55); max-width: 34ch; line-height: 1.5; }
.t-form > noscript .hint { font-size: 15px; color: var(--ink-55); max-width: 34ch; line-height: 1.5; margin-bottom: 20px; }

.form-success { display: none; border: 1px solid var(--line); border-left: 2px solid var(--accent); padding: 32px; background: var(--surface); }
.form-success.is-visible { display: block; }
.form-success h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 10px; }
.form-success p { color: var(--ink-70); font-size: var(--fs-body); line-height: 1.6; }
.form-success .mono { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); }

@media (max-width: 900px) {
  .tenants .t-copy, .t-form { grid-column: 1 / 13; }
  .t-form { order: -1; margin-top: 0; }
  .tenants .t-copy { margin-top: 48px; }
  .t-form form { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact { background: var(--ink); color: #F4F4F2; position: relative; overflow: clip; }
.contact-inner { max-width: 1500px; margin: 0 auto; position: relative; }
.contact .eyebrow { color: rgba(244,244,242,.5); }
.contact .eyebrow::before { background: rgba(244,244,242,.3); }
.contact .eyebrow .eyebrow-num { color: var(--accent-soft); }
.contact h2 { font-size: clamp(44px, 7.4vw, 108px); font-weight: 500; letter-spacing: -.04em; line-height: .98; max-width: 12ch; }
.contact h2 .accent { color: var(--accent-soft); }
.contact .c-sub { margin-top: 30px; color: rgba(244,244,242,.65); max-width: 52ch; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; }
.contact .c-cols { margin-top: clamp(48px, 8vh, 96px); display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px clamp(24px, 3vw, 56px); border-top: 1px solid var(--dark-line); padding-top: 36px; }
.c-block { grid-column: span 4; }
.c-block h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,244,242,.66); margin-bottom: 16px; font-weight: 400; }
.c-block p, .c-block a { font-size: 17px; line-height: 1.7; color: rgba(244,244,242,.88); }
.c-block a.u-link:hover { color: #fff; }

.footer { margin-top: clamp(64px, 10vh, 120px); border-top: 1px solid var(--dark-line); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,244,242,.66); }
.footer .f-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer a:hover { color: #F4F4F2; }

@media (max-width: 900px) {
  .c-block { grid-column: 1 / 13; }
}

/* ============================================================
   SIGNATURE ANIMATION PORTS (21st.dev / Magic UI patterns,
   vanilla CSS/JS implementations)
   ============================================================ */

/* --- Border Beam — traveling pulse around a button border --- */
@property --beam-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.btn--beam { position: relative; }
.btn--beam::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  background: conic-gradient(from var(--beam-angle),
    transparent 0deg, transparent 290deg,
    var(--accent) 320deg, var(--accent-soft) 335deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: beam-spin 4.2s linear infinite;
  pointer-events: none;
}
@keyframes beam-spin { to { --beam-angle: 360deg; } }
.btn--beam:hover::after { animation-duration: 1.6s; }

/* --- Animated Shiny Text — light sweep across key copy --- */
.shine {
  background: linear-gradient(110deg, var(--ink-70) 40%, var(--accent) 50%, var(--ink-70) 60%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: shine-sweep 5s ease-in-out infinite;
}
@keyframes shine-sweep {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

/* --- Animated Beams — power pulses along the node line --- */
.node-line::before { display: none; }
.beam-track { position: absolute; top: -1px; left: 0; right: 0; height: 1px; overflow: visible; }
.beam-track i {
  position: absolute;
  top: 0; left: -12%;
  width: 12%; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent) 60%, var(--accent-soft));
  opacity: 0;
  animation: beam-run var(--bt, 6s) linear infinite;
  animation-delay: var(--bd, 0s);
}
@keyframes beam-run {
  0%   { left: -12%; opacity: 0; }
  6%   { opacity: .95; }
  88%  { opacity: .95; }
  100% { left: 108%; opacity: 0; }
}

/* --- Dot Pattern with radial mask — texture on dark CTA sections --- */
.has-dots { position: relative; }
.has-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(244,244,242,.14) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 38%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 38%, #000 25%, transparent 78%);
  pointer-events: none;
}

/* --- Scroll progress hairline --- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1100;
  pointer-events: none;
}
.scroll-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv > span, .js .rv > span { transform: none; }
  .fade, .js .fade { opacity: 1; transform: none; }
  .clip-img::after { display: none; }
  .clip-img img, .clip-img video { transform: none; }
  .hero-grid .hg-line::after, .hero-scan, .hero-meta .scroll-cue::after { animation: none; opacity: 0; }
  .wipe { display: none; }
  .btn--beam::after, .beam-track i { animation: none; opacity: 0; }
  .shine { animation: none; background: none; -webkit-text-fill-color: currentColor; color: inherit; }
  .scroll-progress { display: none; }

  /* ported scene components: every one must stay fully readable */
  .cursor, .cursor-ring { display: none; }
}

/* ============================================================
   PORTED FROM THE DARK PREVIEW BUILD — isometric survey scene,
   pinned stage narrative, custom cursor, magnetic CTAs.
   Palette adapted to the light grid theme (242,242,240 ground).
   ============================================================ */

/* ---- custom cursor: desktop fine-pointer only ---- */
.cursor, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 3500;
  pointer-events: none; border-radius: 50%;
  opacity: 0; transition: opacity .25s var(--ease-out);
}
.cursor.is-live, .cursor-ring.is-live { opacity: 1; }
.cursor { width: 6px; height: 6px; background: var(--accent-ink); margin: -3px 0 0 -3px; }
.cursor-ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--line-hard);
  transition: width .3s var(--ease-out), height .3s var(--ease-out),
              margin .3s var(--ease-out), border-color .3s, background-color .3s;
}
.cursor-ring.is-hot {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-color: var(--accent);
  background: var(--accent-dim);
}
.cursor-ring.is-hot::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-ring { display: none; }
}

/* legibility floor: the text column always sits on enough ground.
   left-weighted so the photo stays visible on the right. */
.hero-inner::before {
  content: "";
  position: absolute;
  inset: -20% -10% -40% -30%;
  background:
    linear-gradient(100deg, rgba(242,242,240,.95) 0%, rgba(242,242,240,.88) 38%, rgba(242,242,240,.32) 62%, transparent 78%);
  z-index: -1;
  pointer-events: none;
}

/* survey readout chip under the hero CTAs */
.survey-readout {
  display: inline-flex;
  align-self: flex-start;      /* hero-inner is a flex column — do not stretch */
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 10px;
  margin-top: 22px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.survey-readout b { color: var(--accent-ink); font-weight: 400; }

/* ============================================================
   STAGE — pinned scroll narrative. 6 stages, one continuous system.
   ============================================================ */
.stage { position: relative; height: 620vh; }
.stage-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  display: grid;
  align-items: center;
  background: var(--bg);
}
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.stage-hud {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 3;
}
.stage-tick {
  width: 1px; height: 26px;
  background: var(--line-hard);
  position: relative;
  transition: background .5s var(--ease-out);
}
.stage-tick.is-on { background: var(--accent); }
.stage-tick::after {
  content: attr(data-n);
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink-40);
  transition: color .5s var(--ease-out);
  white-space: nowrap;
}
.stage-tick.is-on::after { color: var(--accent-ink); }

.stage-copy {
  position: relative;
  z-index: 3;
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--gutter) 0 calc(var(--gutter) + 92px);
}
/* No CSS transition: opacity/transform/filter are written every frame from
   scroll progress, so a transition here would fight the scroll and lag it. */
.stage-panel {
  grid-area: 1 / 1;
  max-width: 40ch;
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  pointer-events: none;
  will-change: opacity, transform, filter;
}
.stage-panels { display: grid; }
.stage-panel.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.stage-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 18px;
}
.stage-panel h3 {
  font-size: clamp(27px, 3.3vw, 46px);
  font-weight: 500;
  letter-spacing: -.032em;
  line-height: 1.08;
  margin-bottom: 20px;
  text-wrap: balance;
}
.stage-panel p {
  color: var(--ink-70);
  font-size: var(--fs-body);
  line-height: 1.68;
  max-width: 44ch;
}
.stage-panel .who {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-40);
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}

@media (max-width: 860px) {
  /* Same choreography on a shorter runway: still pinned, still crossfading.
     Reduced motion unpins it into a plain readable stack (see the
     prefers-reduced-motion block above). */
  .stage { height: 240vh; }
  .stage-hud { display: none; }
  .stage-copy { padding: 0 var(--gutter); }
  .stage-panel { max-width: none; }
}

/* text for assistive tech only: section headings the design shows as eyebrows */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- skip link (subpages carry the markup; keyboard/AT users only) ---- */
.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 4000;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 13px 22px;
  transition: transform .25s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); outline: none; }
main:focus { outline: none; }
#contact-form:focus { outline: none; }

/* ============================================================
   THE STACK — interactive layer model.
   Birddog's layers render solid. Tenant layers render as wireframe
   and are labelled. This boundary is the whole point of the section.
   ============================================================ */
.stack {
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
  padding-top: clamp(72px, 10vh, 120px);
  padding-bottom: clamp(72px, 10vh, 120px);
}
.stack-head { max-width: 1500px; margin: 0 auto clamp(22px, 3vh, 38px); }
.stack-head h2 {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.04;
}
.stack-wrap {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.stack-viz {
  position: relative;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  padding: clamp(6px, 1.5vw, 18px) 0;
}
.stack-layers {
  transform: rotateX(58deg) rotateZ(-40deg);
  transform-style: preserve-3d;
  display: grid;
  justify-content: center;
}
.layer {
  grid-area: 1 / 1;
  width: min(250px, 44vw);
  height: min(250px, 44vw);
  border: 1px solid var(--line-hard);
  background: rgba(255, 255, 255, .82);
  transform: translateZ(var(--z));
  transition: transform .5s var(--ease-out), background-color .4s, border-color .4s, box-shadow .4s;
  display: block;
  pointer-events: none;            /* the index list is the control */
}
/* tenant layers: ghosted wireframe — not ours, and it should look it */
.layer[data-own="tenant"] {
  background: rgba(14, 16, 19, .02);
  border-style: dashed;
  border-color: var(--line);
}
.layer.is-active {
  transform: translateZ(calc(var(--z) + 30px));
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-dim);
  box-shadow: 0 0 52px -8px var(--accent-glow);
}

/* ---- the index list: upright, legible, keyboard-first ---- */
.stack-index { list-style: none; margin: 0 0 clamp(30px, 4vh, 44px); padding: 0; }
.sx {
  width: 100%;
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background-color .3s, padding-left .3s var(--ease-out);
}
.sx:hover, .sx.is-active { background: var(--accent-dim); padding-left: 18px; }
.sx-dot {
  width: 8px; height: 8px;
  border: 1px solid var(--line-hard);
  transition: background-color .3s, border-color .3s;
}
.sx[data-own="bdv"] .sx-dot { border-color: var(--accent); }
.sx.is-active .sx-dot { background: var(--accent); border-color: var(--accent); }
.sx-name { font-size: 16px; letter-spacing: -.01em; color: var(--ink-70); transition: color .3s; }
.sx:hover .sx-name, .sx.is-active .sx-name { color: var(--ink); }
.sx-own {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.sx[data-own="bdv"] .sx-own { color: var(--accent-ink); }

/* the handoff line — the whole point of the section */
.sx-split {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.sx-split::before, .sx-split::after {
  content: ""; flex: 1; height: 1px; background: var(--line-hard);
}

.stack-detail { min-height: 210px; border-top: 1px solid var(--line); padding-top: clamp(22px, 3vh, 30px); }
.stack-own {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--line);
  margin-bottom: 20px;
}
.stack-own[data-own="bdv"] { color: var(--accent-ink); border-color: var(--accent-dim); background: var(--accent-dim); }
.stack-own[data-own="tenant"] { color: var(--ink-40); }
.stack-detail h3 {
  font-size: clamp(26px, 3.1vw, 42px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin-bottom: 18px;
}
.stack-detail > p { color: var(--ink-70); font-size: var(--fs-body); line-height: 1.68; max-width: 46ch; }
.stack-points { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.stack-points span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-55);
  border: 1px solid var(--line);
  padding: 6px 11px;
}
@media (max-width: 900px) {
  .stack-wrap { grid-template-columns: 1fr; }
  /* the rotated slab's bounding box is wider than the slab itself, so this is
     sized off the rotated footprint, not the element width */
  .stack-viz { order: -1; overflow-x: clip; }
  .layer { width: min(200px, 46vw); height: min(200px, 46vw); }
  .stack-detail { min-height: 0; }
}

/* ============================================================
   MOBILE + A11Y FIXES (2026-09-21 audit round)
   ============================================================ */

/* 320px: "mission-critical" at the 46px floor measured ~380px wide and
   clipped silently. Step the floor down on the narrowest phones; the
   overflow-wrap is the backstop so a long word can never clip again. */
.hero h1 .rv > span { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(32px, 11.5vw, 46px); }
}

/* footer links: tap targets + contrast (was ~15px tall at ~3.8:1) */
.footer .f-links a {
  display: inline-block;
  padding: 15px 0;
  color: rgba(244, 244, 242, .62);
}
.footer .f-links a:hover { color: #F4F4F2; }

/* mobile stage: ground the copy so the scene never fights the words */
@media (max-width: 860px) {
  .stage-panel {
    background: rgba(242, 242, 240, .96);
    padding: 20px 18px;
    border: 1px solid var(--line-soft);
  }
}

/* ---- principal headshots: photo sits on the slate plate from the logo.
       A tile with no <img> shows the monogram instead, which reads as a
       designed avatar, never a fake photo. ---- */
.p-photo {
  grid-column: 1 / 13;
  width: 96px;
  aspect-ratio: 4 / 5;
  display: block;
  position: relative;
  overflow: clip;
  background: #36475E;              /* the slate plate from the BD mark */
  margin-bottom: 10px;
}
.p-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter .45s var(--ease-out);
}
.principal:hover .p-photo img { filter: grayscale(0); }
.p-photo:not(:has(img))::after {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: .12em;
  color: #A4BEDB;                   /* the light blue inside the BD mark */
}

/* ============================================================
   SEAMS — section-to-section continuity.

   Sections used to meet at a 1px border and a background change, which
   reads as a stack of boxes. A seam instead carries the page's own
   language across the join: a feeder line with current running down it,
   the same device the survey uses to bring power into a site.
   ============================================================ */

.seam {
  position: relative;
  z-index: 1;
  padding: clamp(46px, 8vh, 96px) var(--gutter) 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-raised) 100%);
  text-align: center;
}
.seam-line {
  max-width: 44ch;
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.35;
  letter-spacing: -.012em;
  color: var(--ink-70);
  text-wrap: balance;
}
.seam-em { color: var(--ink); font-style: italic; }

/* the feeder: a hairline with a pulse of current travelling down it */
.seam-drop {
  display: block;
  width: 1px;
  height: clamp(56px, 9vh, 104px);
  margin: clamp(26px, 4vh, 46px) auto 0;
  background: linear-gradient(180deg, var(--line-hard), transparent);
  position: relative;
  overflow: hidden;
}
.seam-drop i {
  position: absolute;
  left: 0; top: -30%;
  width: 1px; height: 30%;
  background: linear-gradient(180deg, transparent, var(--accent));
  animation: seam-run 3.4s var(--ease-io) infinite;
}
@keyframes seam-run {
  0%   { transform: translateY(0);    opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(430%); opacity: 0; }
}

/* the sections a seam leads into pick up its ground, so the join is
   a continuation rather than an edge */
.seam--lead + .stage .stage-sticky { background: var(--bg-raised); }



/* ============================================================
   CAPABILITIES TRACK — horizontal moment inside a pinned section
   ============================================================ */
.htrack { position: relative; height: 320vh; border-top: 1px solid var(--line); }
.htrack-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; display: flex; flex-direction: column; justify-content: center; }
/* laid flat by app.js when the cards fit the viewport side by side */
.htrack.is-flat { height: auto; }
.htrack.is-flat .htrack-sticky { position: static; height: auto; padding: clamp(72px, 11vh, 130px) 0; }
.htrack.is-flat .htrack-rail { transform: none; }
/* flat means fit: the cards share the row instead of overflowing the clip */
.htrack-rail.is-fit .hcard { flex-shrink: 1; min-width: 0; }
.htrack-head { padding: 0 var(--gutter); margin-bottom: clamp(28px, 5vh, 56px); }
.htrack-rail { display: flex; gap: clamp(20px, 3vw, 44px); padding: 0 var(--gutter); will-change: transform; }
.hcard {
  flex: 0 0 min(420px, 78vw);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  min-height: min(52vh, 440px);
  transition: border-color .4s, background-color .4s;
}
.hcard:hover { border-color: var(--accent-dim); background: var(--surface-2); }
.hcard-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--accent-ink);
}
/* titles align across cards; imagery pins to the bottom edge */
.hcard h3 {
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 26px 0 14px;
  min-height: 2.24em;
}
.hcard p { color: var(--ink-70); font-size: var(--fs-body); line-height: 1.65; }
.hcard-media { margin-top: auto; padding-top: 24px; aspect-ratio: 16 / 9; overflow: clip; }
.hcard-media img { transition: transform 1.1s var(--ease-out); }
.hcard:hover .hcard-media img { transform: scale(1.05); }
.hcard-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  /* Mirrors the desktop horizontal pan at a compressed budget. The old
     `transform: none !important` here was hard-blocking the translate3d that
     app.js writes to the rail, so no other change could ever have made the
     track pan on a phone. Narrower cards keep the pan distance controllable. */
  .htrack { height: 180vh; }
  .htrack-rail { gap: clamp(12px, 3vw, 20px); }
  .hcard { flex: 0 0 min(240px, 66vw); min-height: min(46vh, 380px); }
}

/* the track continues the ground of the section above it instead of meeting
   it at a border; this override must stay after the base .htrack rule */
.htrack { border-top: 0; }
.htrack::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  background: linear-gradient(180deg, var(--bg-raised), transparent);
  pointer-events: none;
}



/* the track title sits with the other section heads, not the seam serif */
.htrack-title { font-size: clamp(28px, 3.4vw, 46px); font-weight: 500; letter-spacing: -.035em; line-height: 1.04; }
/* ============================================================
   PROOF — four substantiated cells, two per row. Nothing fabricated.
   ============================================================ */
.proof { border-top: 1px solid var(--line); }
.proof-grid {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.proof-cell { background: var(--bg); padding: clamp(26px, 3vw, 40px); min-height: 210px; display: flex; flex-direction: column; }
.proof-cell h3 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 400;
  margin-bottom: 16px;
}
.proof-cell p { color: var(--ink-70); font-size: var(--fs-body); line-height: 1.62; }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT — direct routes (from the white build), adapted to this
   section's dark ground: light rgba text, light rules, light ghost button.
   ============================================================ */
.cta-grid { margin-top: clamp(34px, 5vh, 52px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(30px, 6vw, 90px); align-items: end; }
.cta-direct { margin-top: clamp(34px, 5vh, 54px); max-width: 320px; }
.cta-direct-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,244,242,.66); margin-bottom: 12px; }
.cta-direct-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--dark-line); font-size: var(--fs-body); color: rgba(244,244,242,.9); transition: color .3s, padding-left .35s var(--ease-out); }
.cta-direct-row:last-of-type { border-bottom: 1px solid var(--dark-line); }
.cta-direct-row:hover { color: var(--accent-soft); padding-left: 8px; }
.cta-direct-row svg { flex: none; opacity: .6; }
.cta-direct-note { margin-top: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,244,242,.66); }
.cta-mark { justify-self: end; opacity: .6; }
.cta-mark img { width: clamp(72px, 8vw, 110px); height: auto; }
.btn--ghost-dark { color: #F4F4F2; border-color: rgba(244,244,242,.32); }
.btn--ghost-dark:hover { color: var(--ink); background: #F4F4F2; border-color: #F4F4F2; }
@media (max-width: 860px) {
  .cta-grid { grid-template-columns: 1fr; align-items: start; }
  .cta-mark { display: none; }
}

/* mobile rhythm: section padding was tuned for a 900px-tall desktop viewport;
   on a phone the same 14vh is dead space and makes the page feel endless. */
@media (max-width: 860px) {
  .section:not(.stack) { padding: clamp(44px, 7vh, 88px) var(--gutter); }
  .node p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  /* seams stay as structure; only the travelling current stops */
  .seam-drop i { animation: none; opacity: 0; }
  /* horizontal track becomes vertical */
  .htrack { height: auto; }
  .htrack-sticky { position: static; height: auto; padding: clamp(64px, 10vh, 110px) 0; }
  .htrack-rail { flex-direction: column; transform: none !important; }
  /* flex-direction:column moves the main axis to vertical, so the rail's
     `flex: 0 0 <basis>` would pin each card's HEIGHT to a width value and, with
     the content floor removed by min-height:0, let copy spill over the card
     below. Size these to their content instead. */
  .hcard { flex: 0 0 auto; min-height: 0; }

  /* The pinned narrative unpins into a plain readable sequence. These rules
     must sit after the base .stage rules: an earlier block loses to them on
     source order at equal specificity, which left five beats invisible. */
  .stage { height: auto; }
  .stage-sticky { position: static; height: auto; display: block; overflow: visible; padding: clamp(64px, 10vh, 110px) 0; }
  .stage-canvas, .stage-hud { display: none; }
  .stage-panels { display: block; }
  .stage-panel {
    opacity: 1; transform: none; filter: none; pointer-events: auto;
    max-width: none; padding: 30px 0; background: none;
    border: 0; border-top: 1px solid var(--line);
  }

  /* the slab diagram is decorative; the index list carries the stack */
  .stack-viz { display: none; }
  .stack-wrap { grid-template-columns: 1fr; }
  .sx:hover, .sx.is-active { padding-left: 12px; }

  /* hero entrance: no delayed offsets, no motion */
  .hero .rv > span, .hero .fade { animation: none; }
}

/* ---- print: reveal states, pinned runways and fixed chrome would otherwise print hidden or repeated ---- */

/* Legal page */
.legal { border-top: 1px solid var(--line); }
.legal-wrap { max-width: 1500px; margin: 0 auto; }
.legal-copy { max-width: 72ch; }
.legal-copy p { color: var(--ink-70); font-size: 15.5px; line-height: 1.75; margin: 0 0 1.25em; }
.legal .footer { margin-top: 72px; }

@media print {
  .grain, .page-grid, .wipe, .nav, .skip-link, .scroll-progress, .cursor, .cursor-ring,
  .hero-grid, .hero-scan, .hero-media video, .stage-canvas, .stage-hud, .stack-viz, .media-break { display: none !important; }
  .rv > span, .fade { transform: none !important; opacity: 1 !important; animation: none !important; }
  .clip-img::after { display: none !important; }
  .clip-img img, .clip-img video { transform: none !important; }
  .hero { min-height: 0; padding-top: 24px; }
  .stage, .htrack { height: auto !important; }
  .stage-sticky, .htrack-sticky { position: static !important; display: block !important; height: auto !important; overflow: visible !important; padding: 24px 0 !important; }
  .stage-panels { display: block !important; }
  .stage-panel { opacity: 1 !important; transform: none !important; filter: none !important; max-width: none !important; padding: 12px 0 !important; break-inside: avoid; }
  .stack-wrap { grid-template-columns: 1fr !important; }
  .htrack-rail { display: block !important; transform: none !important; }
  .hcard { margin-bottom: 16px; min-height: 0 !important; break-inside: avoid; }
  .investors, .contact, .btn { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}