/* ==========================================================================
   IP VENTURE STUDIO
   Design system - "Signal"
   -------------------------------------------------------------------------
   Graphite grounds, white reading surfaces, one hot accent. The site
   alternates dark and light in deliberate blocks so the page has weight
   and rhythm without needing decoration.

   Rules that hold it together:
     1. --signal is the ONLY accent. Numerals, rules, one button, the
        active state of a diagram. Never a heading, never a background
        for body text.
     2. Display type is Archivo at 125% width. Expanded and heavy. Never
        set headlines at normal width - the expansion IS the identity.
     3. Information before prose. If a paragraph can be a diagram, it is
        a diagram. Every section is capped at roughly 60 words.
     4. Motion is weight. Everything eases out and settles. Nothing bounces.
   ========================================================================== */

:root {
  /* ---- Ground (dark blocks) ---------------------------------------- */
  --ground:     #101418;
  --ground-2:   #191F25;   /* raised card on ground */
  --ground-3:   #232B33;   /* rule / inactive segment on ground */
  --onground:   #FFFFFF;
  --onground-2: #9AA4AE;   /* muted on ground        7.2:1 */

  /* ---- Surface (light blocks) -------------------------------------- */
  --surface:    #FFFFFF;
  --surface-2:  #F4F6F7;
  --surface-3:  #E7EBEE;

  /* ---- Ink --------------------------------------------------------- */
  --ink:        #101418;
  --ink-2:      #4A525B;   /* body prose             7.9:1 on white */
  --ink-3:      #636C76;   /* meta, labels           5.3:1 white, 4.9:1 surface-2 */

  /* ---- Accent ------------------------------------------------------ */
  --signal:     #FF4D17;   /* fills, rules, large numerals, dark grounds */
  --signal-ink: #C2350A;   /* text-size orange on white     5.5:1 */
  --signal-dim: rgba(255, 77, 23, 0.16);

  /* ---- Structure --------------------------------------------------- */
  --line:       #DDE2E6;
  --line-soft:  #EDF0F2;
  --line-dark:  rgba(255, 255, 255, 0.13);

  /* ---- Type -------------------------------------------------------- */
  --display: "Archivo", system-ui, -apple-system, sans-serif;
  --body:    "Inter Tight", system-ui, -apple-system, sans-serif;
  --mono:    "Azeret Mono", ui-monospace, "SF Mono", monospace;

  --step--2: clamp(0.68rem, 0.66rem + 0.08vw, 0.73rem);
  --step--1: clamp(0.79rem, 0.77rem + 0.10vw, 0.85rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.34vw, 1.34rem);
  --step-2:  clamp(1.35rem, 1.24rem + 0.55vw, 1.65rem);
  --step-3:  clamp(1.70rem, 1.45rem + 1.20vw, 2.50rem);
  --step-4:  clamp(2.20rem, 1.75rem + 2.20vw, 3.60rem);
  --step-5:  clamp(2.70rem, 1.95rem + 3.70vw, 5.40rem);

  /* ---- Layout ------------------------------------------------------ */
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --max:     1280px;

  /* ---- Motion ------------------------------------------------------ */
  --ease:    cubic-bezier(0.16, 1, 0.30, 1);
}

@view-transition { navigation: auto; }

/* ------------------------------------------------------------- reset -- */

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden - hidden makes body a scroll container and breaks
     the sticky header. */
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-stretch: 125%;          /* expanded. This is the identity. */
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--signal-ink); }

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--signal); color: var(--ink);
  padding: 0.8rem 1.3rem;
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- utilities -- */

.wrap {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* Dark block. Carries a hairline technical grid so large fields of
   near-black don't read as flat. */
.dark {
  position: relative;
  background: var(--ground);
  color: var(--onground);
}
.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(to right, var(--line-dark) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(to bottom, var(--line-dark) 0 1px, transparent 1px 100px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.dark > .wrap { z-index: 1; }
.dark p { color: var(--onground-2); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--onground); }

.label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.3rem;
}
.label::before {
  content: "";
  width: 20px; height: 2px;
  background: var(--signal);
  flex: none;
}
.dark .label { color: var(--onground-2); }

.lead {
  font-size: var(--step-1);
  line-height: 1.46;
  color: var(--ink);
  max-width: 46ch;
}
.dark .lead { color: var(--onground); }

.section-title { font-size: var(--step-3); margin-bottom: 1.1rem; }
.section-title em { font-style: normal; color: var(--signal-ink); }
.dark .section-title em { color: var(--signal); }

.head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

.tlink {
  color: var(--signal-ink);
  text-decoration: none;
  font-weight: 500;
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 320ms var(--ease);
  padding-bottom: 2px;
}
.tlink:hover, .tlink:focus-visible { background-size: 100% 2px; }
.dark .tlink { color: var(--signal); }

/* ----------------------------------------------------------- buttons -- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
  translate: var(--mx, 0) var(--my, 0);
  transition: color 240ms var(--ease), border-color 240ms var(--ease);
}
/* The fill wipes up from the floor rather than cross-fading. */
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  transform: translateY(101%);
  transition: transform 420ms var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: none; }

/* Orange takes ink text, not white - white on this orange is only 3.3:1. */
.btn--primary { background: var(--signal); color: var(--ink); }
.btn--primary::after { background: var(--ink); }
.btn--primary:hover, .btn--primary:focus-visible { color: var(--signal); }

.btn--ghost { color: var(--ink); border-color: var(--line); }
.btn--ghost::after { background: var(--surface-2); }
.btn--ghost:hover { border-color: var(--ink); }

.dark .btn--ghost { color: var(--onground); border-color: var(--line-dark); }
.dark .btn--ghost::after { background: var(--onground); }
.dark .btn--ghost:hover,
.dark .btn--ghost:focus-visible { color: var(--ground); border-color: var(--onground); }

.btn .arrow { transition: transform 320ms var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ------------------------------------------------------------ header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.site-header__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px; width: 100%;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root block); }
}
@keyframes progress { to { transform: scaleX(1); } }

/* --- PLACEHOLDER WORDMARK ------------------------------------------
   Typographic stand-in only. Replace .mark and this block with the
   supplied artwork once the identity is delivered. See LOGO-BRIEF.md.
   ------------------------------------------------------------------ */
.wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  color: var(--onground);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .mark {
  width: 14px; height: 14px;
  flex: none;
  background: var(--signal);
  transition: transform 500ms var(--ease);
}
.wordmark:hover .mark { transform: rotate(90deg) scale(0.82); }

/* --------------------------------------------------------------- nav -- */

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.8rem; }
.nav a {
  position: relative;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--onground-2);
  text-decoration: none;
  transition: color 220ms var(--ease);
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 340ms var(--ease);
}
.nav a:not(.btn):hover { color: var(--onground); }
.nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav .btn { margin-left: 0.3rem; }

.nav-toggle {
  margin-left: auto;
  display: none;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  padding: 0.6rem 0.9rem;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--onground);
  cursor: pointer;
}

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  /* The overlay is a child of the header, so its z-index resolves inside
     the header's stacking context - it paints OVER the toggle that opened
     it. Lift the bar back above it or there is no way to close the menu. */
  .wordmark, .nav-toggle { position: relative; z-index: 80; }
  .nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: var(--ground);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    padding: var(--gutter);
    margin: 0;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a:not(.btn) {
    font-family: var(--display);
    font-stretch: 125%;
    font-weight: 700;
    font-size: var(--step-3);
    text-transform: none;
    letter-spacing: -0.02em;
    color: var(--onground);
  }
  .nav .btn { margin: 1rem 0 0; }
}

/* -------------------------------------------------------------- hero -- */

.hero { padding-block: clamp(3rem, 7vw, 5.5rem) 0; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

.hero h1 {
  font-size: var(--step-5);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin-bottom: 1.5rem;
  max-width: 13ch;
}
.hero h1 em { font-style: normal; color: var(--signal); }

.hero .lead { margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ------------------------------------------------- image placeholder -- */
/* Every .shot is a slot waiting for a real photograph. The label states
   what goes in it and at what ratio. See DEV-NOTES.md section H.        */

.shot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ar, 4 / 3);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 9px, var(--line-soft) 9px 10px);
}
.dark .shot,
.shot--dark {
  background-color: var(--ground-2);
  border-color: var(--line-dark);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 9px, rgba(255, 255, 255, 0.05) 9px 10px);
}
.shot img { width: 100%; height: 100%; object-fit: cover; grid-area: 1 / 1; }
.shot__note {
  grid-area: 1 / 1;
  margin: 0;
  padding: 1.5rem;
  max-width: 32ch;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--step--2);
  line-height: 1.9;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dark .shot__note, .shot--dark .shot__note { color: var(--onground-2); }
.shot__note b {
  display: block;
  color: var(--signal);
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.shot__note span { display: block; opacity: 0.7; letter-spacing: 0.06em; }

/* -------------------------------------------------------- stat strip -- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat { padding: clamp(1.4rem, 3vw, 2.2rem) 1.2rem clamp(1.4rem, 3vw, 2.2rem) 0; }
.stat + .stat { border-left: 1px solid var(--line-dark); padding-left: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 720px) {
  .stat:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-dark); }
  .stat:nth-child(4) { border-top: 1px solid var(--line-dark); }
}
.stat__n {
  margin: 0;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--onground);
}
.stat__n sup { font-size: 0.42em; vertical-align: super; color: var(--signal); font-weight: 700; }
.stat__l {
  margin: 0.7rem 0 0;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--onground-2);
  max-width: 22ch;
}

/* ------------------------------------------------------------ ticker -- */

.ticker {
  overflow: hidden;
  background: var(--signal);
  color: var(--ink);
  padding-block: 0.7rem;
}
.ticker__track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; flex: none; }
.ticker__item {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-inline: 1rem;
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__item::after {
  content: ""; width: 5px; height: 5px; background: var(--ink); flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- why -- */

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 820px) { .trio { grid-template-columns: minmax(0, 1fr); } }

.tile { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.2rem); }
.tile__n {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--signal-ink);
  display: block;
  margin-bottom: 1.4rem;
}
.tile h3 { font-size: var(--step-2); margin-bottom: 0.6rem; }
.tile p { color: var(--ink-2); font-size: 0.95rem; margin: 0; }

/* ------------------------------------------------- pipeline diagram -- */

.pipe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line);
}
@media (max-width: 900px) { .pipe { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

.pipe__stage {
  position: relative;
  padding: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1rem, 2vw, 1.4rem) clamp(1.6rem, 3vw, 2.2rem);
  background: var(--surface);
}
.pipe__stage + .pipe__stage { border-left: 1px solid var(--line); }
@media (max-width: 900px) {
  .pipe__stage + .pipe__stage { border-left: 0; border-top: 1px solid var(--line); }
}
/* The review gate. Sits on the join between two stages. */
.pipe__stage + .pipe__stage::before {
  content: "";
  position: absolute;
  left: -6px; top: clamp(1.3rem, 2.6vw, 1.9rem);
  width: 11px; height: 11px;
  background: var(--surface);
  border: 2px solid var(--signal);
  transform: rotate(45deg);
}
@media (max-width: 900px) {
  .pipe__stage + .pipe__stage::before { left: clamp(1rem, 2vw, 1.4rem); top: -6px; }
}
.pipe__n {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.pipe__name {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0.7rem 0 0.6rem;
}
.pipe__stage p { font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); margin: 0; }

.pipe__key {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0;
  max-width: none;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pipe__key i {
  width: 9px; height: 9px; flex: none;
  border: 2px solid var(--signal);
  transform: rotate(45deg);
}

/* --------------------------------------------------- portfolio matrix -- */

.matrix {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-dark);
}
.matrix__head, .matrix__row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr) 8.5rem;
  gap: clamp(0.8rem, 2vw, 2rem);
  align-items: center;
}
.matrix__head {
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--onground-2);
}
.matrix__row {
  padding-block: clamp(0.9rem, 2vw, 1.15rem);
  border-bottom: 1px solid var(--line-dark);
  transition: background-color 320ms var(--ease);
}
.matrix__row:hover { background: var(--ground-2); }

.matrix__name {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  min-width: 0;
}
.matrix__name b {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--signal);
  flex: none;
}
.matrix__name span {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.012em;
  color: var(--onground);
  line-height: 1.25;
}

.track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.track i {
  display: block;
  height: 9px;
  background: var(--ground-3);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 620ms var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.matrix.is-in .track i { transform: none; }
.track i[data-s="done"]   { background: var(--signal); }
.track i[data-s="active"] { background: var(--signal-dim); box-shadow: inset 0 0 0 1.5px var(--signal); }
.track i[data-s="na"]     { background: transparent; box-shadow: inset 0 0 0 1px var(--ground-3); }

.matrix__stage {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--onground-2);
  text-align: right;
}

.matrix__key {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 1.4rem 0 0;
  max-width: none;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--onground-2);
}
.matrix__key span { display: flex; align-items: center; gap: 0.55rem; }
.matrix__key i { width: 16px; height: 9px; flex: none; background: var(--ground-3); }
.matrix__key i[data-s="done"]   { background: var(--signal); }
.matrix__key i[data-s="active"] { background: var(--signal-dim); box-shadow: inset 0 0 0 1.5px var(--signal); }
.matrix__key i[data-s="na"]     { background: transparent; box-shadow: inset 0 0 0 1px var(--ground-3); }

@media (max-width: 860px) {
  .matrix__head { display: none; }
  .matrix__row { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .matrix__stage { text-align: left; }
}

/* ------------------------------------------------------ asset cards -- */

.assets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.asset {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--ground);
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  transition: background-color 420ms var(--ease);
}
.asset::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 560ms var(--ease);
}
.assets .asset:hover, .assets .asset:focus-within { background: var(--ground-2); }
.asset:hover::before, .asset:focus-within::before { transform: scaleX(1); }

.asset__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.asset__fig {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--signal);
}
.asset__name { font-size: var(--step-2); letter-spacing: -0.024em; line-height: 1.1; }
.asset p { color: var(--onground-2); margin: 0; font-size: 0.92rem; line-height: 1.55; }
.asset__path {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--onground-2);
}

.tag {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--onground-2);
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  padding: 0.28rem 0.65rem;
  white-space: nowrap;
}
.tag--hot { color: var(--signal); border-color: rgba(255, 77, 23, 0.45); }

/* Used exactly once, on the confidential asset. Don't add a second. */
.redaction {
  display: inline-block;
  background: var(--onground-2);
  color: transparent;
  user-select: none;
  padding: 0.04em 0.45em;
  vertical-align: baseline;
}

/* --------------------------------------------------------------- band -- */

.band { padding: 0; }
.band .shot { border-left: 0; border-right: 0; }

/* ----------------------------------------------------------- partners -- */

.rows { margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(0.8rem, 2.5vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 360ms var(--ease);
}
.row:hover { background: var(--surface-2); }
@media (max-width: 780px) {
  .row { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.3rem 0.9rem; }
  .row p { grid-column: 2; }
}
.row__ref {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--signal-ink);
}
.row h3 { font-size: var(--step-2); letter-spacing: -0.024em; }
.row p { color: var(--ink-2); font-size: 0.94rem; max-width: 52ch; margin: 0; }

/* ----------------------------------------------------------- founder -- */

.founder__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .founder__grid { grid-template-columns: minmax(0, 1fr); } }
.founder__grid p { color: var(--ink-2); }
.founder__grid p.lead { color: var(--ink); }

.sig { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; }
.sig svg { width: 104px; height: auto; flex: none; }
.sig path {
  fill: none; stroke: var(--ink); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}
.sig__who {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.8;
  border-left: 1px solid var(--line);
  padding-left: 1rem;
  margin: 0;
}

.docket { border: 1px solid var(--line); background: var(--surface-2); padding: clamp(1.2rem, 2.5vw, 1.7rem); }
.docket__cap {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.9rem;
  margin: 0 0 0.3rem;
  border-bottom: 1px solid var(--line);
}
.docket table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.docket th, .docket td {
  text-align: left; padding: 0.65rem 0;
  border-bottom: 1px dotted var(--line); vertical-align: top;
}
.docket tr:last-child th, .docket tr:last-child td { border-bottom: 0; }
.docket th {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 46%;
  padding-right: 1rem;
}
.docket td { color: var(--ink); font-weight: 500; }

/* ----------------------------------------------------------- notices -- */

.notice { border-left: 2px solid var(--signal); padding: 0.1rem 0 0.1rem 1.3rem; margin-top: clamp(1.8rem, 3.5vw, 2.5rem); }
.notice p { font-size: 0.86rem; line-height: 1.6; color: var(--ink-3); max-width: 80ch; }
.dark .notice p { color: var(--onground-2); }
.notice strong { color: var(--ink-2); font-weight: 600; }
.dark .notice strong { color: var(--onground); }

/* ----------------------------------------------------------- contact -- */

.contact__title { font-size: var(--step-4); letter-spacing: -0.032em; line-height: 0.98; margin-bottom: 1.3rem; max-width: 13ch; }
.contact__title em { font-style: normal; color: var(--signal); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.contact__meta {
  margin-top: 2.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 1.4rem;
  font-family: var(--mono);
  font-size: var(--step--2);
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.contact__meta dt { color: var(--onground-2); text-transform: uppercase; letter-spacing: 0.16em; }
.contact__meta dd { margin: 0.35rem 0 0; color: var(--onground); }
.contact__meta a { color: var(--signal); text-decoration: none; }
.contact__meta a:hover { text-decoration: underline; }

.fineprint { margin-top: 2.2rem; font-size: 0.84rem; line-height: 1.6; max-width: 68ch; color: var(--onground-2); }

/* ------------------------------------------------------------ footer -- */

.site-footer {
  background: var(--ground);
  color: var(--onground-2);
  padding-block: clamp(2.8rem, 5vw, 4rem);
  font-size: 0.9rem;
  border-top: 1px solid var(--line-dark);
}
.site-footer a { color: var(--onground); text-decoration: none; }
.site-footer a:hover { color: var(--signal); }
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 2.2rem;
}
.footer__grid h4 {
  font-family: var(--mono);
  font-stretch: normal;
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--onground-2);
  margin-bottom: 0.9rem;
}
.footer__grid p { color: var(--onground-2); }
.footer__grid ul { list-style: none; margin: 0; padding: 0; }
.footer__grid li { margin-bottom: 0.5rem; }
.footer__legal {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.8;
  color: var(--onground-2);
}
.footer__legal p { max-width: 94ch; }

/* ------------------------------------------------------------ motion -- */

.rvl { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.rvl > span {
  display: block;
  transform: translateY(112%);
  transition: transform 950ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-in .rvl > span, .is-in.rvl > span, .is-ready .rvl > span { transform: none; }

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 680ms var(--ease), transform 680ms var(--ease);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: 65ms; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: 130ms; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: 195ms; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: 260ms; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: 325ms; }

/* Counters roll from 0. JS writes --v; the property is registered so it
   can be animated at all. */
@property --v { syntax: "<integer>"; inherits: false; initial-value: 0; }
.count { counter-reset: v var(--v); }
.count::after { content: counter(v); }
.count.is-in { transition: --v 1400ms cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .rvl > span { transform: none; }
  [data-reveal], [data-stagger] > * { opacity: 1; transform: none; }
  .track i { transform: none; }
  .ticker__track { animation: none; }
  .btn { translate: none !important; }
  /* Scroll-linked animation ignores duration, so it needs switching off. */
  .progress { display: none; }
}

/* -------------------------------------------------------- legal pages -- */

.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.2rem, 3vw, 2rem); }
.page-head h1 { font-size: var(--step-4); margin-bottom: 1rem; }

.prose { max-width: 70ch; padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem); }
.prose h2 { font-size: var(--step-2); margin: 2.6rem 0 0.8rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); }
.prose ul { padding-left: 1.15rem; color: var(--ink-2); }
.prose li { margin-bottom: 0.5rem; max-width: 62ch; }
.prose .stamp {
  margin-top: 2.8rem;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Legal-page nav stays inline on small screens - no overlay needed. */
@media (max-width: 940px) {
  .nav--simple {
    display: flex; position: static; inset: auto; z-index: auto;
    background: none; flex-direction: row; align-items: center;
    justify-content: flex-end; gap: 1rem; padding: 0;
  }
  .nav--simple a:not(.btn) {
    font-family: var(--mono);
    font-stretch: normal;
    font-size: var(--step--2);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--onground-2);
  }
  .nav--simple .btn { margin: 0; }
}

/* --------------------------------------------------------------- 404 -- */

.notfound { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; padding-block: 4rem; }
.notfound h1 { font-size: var(--step-4); margin-bottom: 1rem; }
.notfound h1 em { font-style: normal; color: var(--signal-ink); }