/* ============================================================
   Forwardline Capital — forwardlinecapital.com
   Momentum system: graphite + machined steel + a single sodium
   ember signal. Ruler-clean geometry, forward-leaning composition,
   perspective as the organising idea.
   Naming: BEM (block__element--modifier)
   ============================================================ */

:root {
  /* graphite surfaces — cold, industrial, no blue cast */
  --slate-0: #0a0c0f;
  --slate-1: #0f1216;
  --slate-2: #14181e;
  --slate-3: #1c222a;

  --edge: rgba(255, 255, 255, 0.075);
  --edge-hot: rgba(232, 144, 80, 0.34);

  /* the single accent: sodium-vapour ember. Used as LIGHT and as
     signal marks only — never as a large surface wash. */
  --sig: #e07a3c;
  --sig-hot: #f2a266;
  --sig-deep: #8f4318;

  /* structural metal — rails, icons, hairlines, secondary marks */
  --steel: #9caab8;
  --steel-dim: rgba(156, 170, 184, 0.45);

  --white: #eef1f4;
  --dim: rgba(203, 213, 223, 0.7);
  --dim-2: rgba(203, 213, 223, 0.46);

  --font-d: 'Sora', 'Avenir Next', sans-serif;
  --font-b: 'Inter', 'Helvetica Neue', sans-serif;
  --font-m: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --glow: 0 26px 64px -26px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(232, 144, 80, 0.14);
  --rail: 1140px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  background:
    radial-gradient(78% 52% at 74% -4%, rgba(120, 140, 162, 0.09), transparent 62%),
    linear-gradient(180deg, #070a0c 0%, var(--slate-0) 34%);
  background-color: var(--slate-0);
  color: var(--white);
  font-family: var(--font-b);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* film grain over everything — kills the flat-render look */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--sig); color: #10120f; }

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

a { color: var(--sig-hot); text-decoration: none; }
a:hover { color: var(--white); }

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

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--font-d); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }

/* instrument-panel label: mono, wide, small — the technical register
   that separates this site from the rest of the fleet */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-m);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sig-hot);
}
.kicker::before {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sig));
}

.lean { font-style: italic; color: var(--sig-hot); }

/* lucide inline icons — structural steel, not signal */
.lci { width: 1.4em; height: 1.4em; stroke-width: 1.75; display: inline-block; vertical-align: -0.32em; margin-right: 0.55em; flex: none; color: var(--steel); }

/* ---------- scroll progress ---------- */

.progress {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  z-index: 400;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--sig-deep), var(--sig) 55%, var(--sig-hot));
  box-shadow: 0 0 10px rgba(224, 122, 60, 0.7);
  transform-origin: left;
}

/* ---------- top bar ---------- */

.topbar {
  position: fixed;
  top: 2px;
  left: 0;
  right: 0;
  z-index: 300;
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.topbar--solid {
  background: rgba(10, 12, 15, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--edge);
}
.topbar__rail {
  max-width: var(--rail);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--white);
  min-height: 44px;
}
.brand:hover { color: var(--white); }
.brand__mark { width: 34px; height: 26px; flex: none; }
/* the mark re-lit for the graphite system: ignition → steel → light.
   Overrides the inline stroke attributes on every page. */
.brand__mark path:nth-of-type(1) { stroke: var(--sig); }
.brand__mark path:nth-of-type(2) { stroke: var(--steel); }
.brand__mark path:nth-of-type(3) { stroke: var(--white); }
.brand__word {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.15em;
  line-height: 1.05;
  display: flex;
  flex-direction: column;
}
.brand__word em {
  font-family: var(--font-m);
  font-style: normal;
  font-weight: 500;
  font-size: 0.55rem;
  letter-spacing: 0.44em;
  color: var(--sig-hot);
}

.topbar__nav { margin-left: auto; display: flex; align-items: center; gap: 1.7rem; }
.topbar__link {
  color: var(--dim);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.6rem 0.15rem;
  position: relative;
}
.topbar__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.28rem;
  width: 100%;
  height: 1px;
  background: var(--sig);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.topbar__link:hover { color: var(--white); }
.topbar__link:hover::after { transform: scaleX(1); }

.topbar__burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ---------- buttons ----------
   Machined plates, not pills. The primary is a bright steel plate with
   graphite type; a leading ember edge runs in on hover, and the label
   steps forward. Magnetic travel comes in through --mgx/--mgy. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.7rem;
  font-family: var(--font-d);
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transform: translate3d(var(--mgx, 0px), calc(var(--mgy, 0px) + var(--lift, 0px)), 0);
  transition: transform 0.35s var(--ease), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn > span { display: inline-block; transition: transform 0.35s var(--ease); }
.btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sig);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.35s var(--ease);
}
.btn:hover::before { transform: scaleY(1); }
.btn:hover > span { transform: translateX(3px); }

.btn--charge {
  background: linear-gradient(180deg, #f4f6f8, #cfd8e0);
  color: #0c0f13;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
}
.btn--charge:hover {
  --lift: -2px;
  color: #0c0f13;
  box-shadow: 0 24px 54px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(232, 144, 80, 0.4);
}
.btn--wire {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.16);
}
.btn--wire:hover {
  border-color: var(--edge-hot);
  background: rgba(224, 122, 60, 0.07);
  color: var(--white);
}
.btn--compact { min-height: 42px; padding: 0.45rem 1.2rem; font-size: 0.86rem; }

/* ---------- hero ----------
   Perspective corridor. The WebGL scene paints the depth; the layers
   below guarantee structure and legibility even without it. */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(42% 46% at 72% 46%, rgba(224, 122, 60, 0.16), transparent 68%),
    radial-gradient(80% 70% at 70% 48%, rgba(120, 145, 172, 0.1), transparent 70%),
    linear-gradient(180deg, #080a0d 0%, #0b0e12 60%, var(--slate-0) 100%);
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.hero::before {
  /* converging rails, pure CSS — the name-bond survives with no WebGL,
     no JS, and no canvas. Sits BELOW the canvas so the two never stack. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg at 72% 46%,
      rgba(198, 214, 230, 0.11) 0deg 0.16deg,
      transparent 0.16deg 3.4deg);
  -webkit-mask-image: radial-gradient(52% 58% at 72% 46%, transparent 4%, #000 34%, #000 78%, transparent 100%);
  mask-image: radial-gradient(52% 58% at 72% 46%, transparent 4%, #000 34%, #000 78%, transparent 100%);
}
.hero::after {
  /* readability wash on the copy column + cinematic vignette. The art
     lives right of centre; this keeps the left column near-black. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* The scrim must still be doing work at the RIGHT EDGE OF THE GLYPHS, not
     at the edge of the copy column. On a 1440 fold the subcopy runs to ~51%
     of viewport, so the ramp holds ~0.64 alpha there and only lets go past
     66% — clear of the vanishing point at 72%, so the corridor and its ember
     are untouched. The old ramp was at 0.34 by 51% and 0.00 by 70%, which let
     a passing bright tick dip the subcopy to ~2.2:1. */
  background:
    linear-gradient(94deg, rgba(6, 8, 11, 0.95) 0%, rgba(6, 8, 11, 0.90) 30%, rgba(6, 8, 11, 0.74) 48%, rgba(6, 8, 11, 0.40) 58%, rgba(6, 8, 11, 0.12) 66%, rgba(6, 8, 11, 0) 74%),
    radial-gradient(130% 108% at 58% 46%, transparent 48%, rgba(4, 6, 9, 0.6) 100%),
    linear-gradient(0deg, var(--slate-0) 0%, transparent 18%);
}
.hero__rail {
  max-width: var(--rail);
  width: 100%;
  margin: 0 auto;
  padding: 8.5rem 1.5rem 6rem;
}
.hero__body {
  position: relative;
  max-width: 850px;
  padding-left: 2.1rem;
}
/* measurement rail — a ruler down the left edge of the copy */
.hero__body::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 1px;
  background: linear-gradient(180deg, var(--sig) 0%, rgba(156, 170, 184, 0.4) 26%, rgba(156, 170, 184, 0.06) 100%);
}
.hero__body::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 8px;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(198, 214, 230, 0.3) 0 1px, transparent 1px 36px);
}
/* Sized so the whole fold — headline, subcopy, both CTAs and the fact
   strip — clears a 860px-tall viewport. The corridor is the spectacle;
   the type does not need to shout over it.
   The shadow is deliberately tight: a wide blur applied per word (the
   reveal splits the heading into spans) stacks into visible rectangles
   over the lit part of the scene. Contrast comes from the scrim. */
.hero__title {
  font-size: clamp(2.7rem, 5.4vw, 4.9rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 1.2rem 0 1.5rem;
  text-shadow: 0 1px 2px rgba(4, 6, 9, 0.75), 0 2px 14px rgba(4, 6, 9, 0.6);
}
.hero__sub {
  font-size: 1.12rem;
  /* Same steel-white as --dim, but OPAQUE. Over a lit backdrop a 0.7-alpha
     text colour lets the art through the glyphs themselves, which no amount
     of scrim can recover. Identical hue, no palette change. */
  color: #cbd5df;
  max-width: 52ch;
  margin-bottom: 2.3rem;
  text-shadow: 0 1px 8px rgba(4, 6, 9, 0.85);
  text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.6rem; }
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.8rem;
  font-family: var(--font-m);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* opaque steel — same reason as .hero__sub, and this is small mono caps
     over the same lit scene. Stays visually secondary to the subcopy. */
  color: #9caab8;
  text-shadow: 0 1px 6px rgba(4, 6, 9, 0.85);
}
.hero__facts span { display: inline-flex; align-items: center; gap: 0.55rem; }
.hero__facts svg { width: 13px; height: 13px; color: var(--sig); }

/* ---------- section scaffolding ---------- */

.band {
  position: relative;
  padding: 6.5rem 0;
  background-image:
    radial-gradient(52% 42% at 92% 0%, rgba(126, 148, 172, 0.07), transparent 62%),
    radial-gradient(44% 40% at 0% 100%, rgba(126, 148, 172, 0.05), transparent 60%);
}
.band__rail { max-width: var(--rail); margin: 0 auto; padding: 0 1.5rem; }
.band__head { position: relative; max-width: 660px; margin-bottom: 3.4rem; }
.band__title { font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -0.028em; margin: 1.1rem 0 1rem; }
.band__lede { color: var(--dim); font-size: 1.06rem; text-wrap: pretty; }

/* perspective hairlines: rays converging on a vanishing point off the
   right edge — the hero's geometry, quieted down for reading sections */
.band--lines {
  background-image:
    repeating-conic-gradient(from 0deg at 104% 42%,
      rgba(198, 214, 230, 0.055) 0deg 0.14deg,
      transparent 0.14deg 2.6deg),
    radial-gradient(58% 50% at 86% -6%, rgba(126, 148, 172, 0.08), transparent 62%),
    radial-gradient(46% 42% at 4% 104%, rgba(224, 122, 60, 0.05), transparent 60%);
}
.band--raised {
  background-color: var(--slate-1);
  background-image:
    radial-gradient(64% 58% at 80% -8%, rgba(126, 148, 172, 0.09), transparent 60%),
    radial-gradient(46% 44% at 6% 108%, rgba(224, 122, 60, 0.06), transparent 58%),
    linear-gradient(165deg, #161b21 0%, var(--slate-1) 55%, #0c0f13 100%);
}
.band--slash { clip-path: polygon(0 3.2rem, 100% 0, 100% calc(100% - 3.2rem), 0 100%); padding: 9rem 0; }

/* ---------- products ----------
   Ruler-clean plates on a hard left axis. The rail on the left edge is
   the "line" in Forwardline — it lights on approach. */

.fleet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}
.fleet__card {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(158deg, var(--slate-2) 0%, var(--slate-1) 62%);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 1.9rem 1.7rem 1.7rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fleet__card::before {
  /* the leading rail */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--sig), rgba(224, 122, 60, 0));
  transform: scaleY(0.34);
  transform-origin: 50% 0;
  transition: transform 0.55s var(--ease);
  z-index: 2;
}
.fleet__card:hover::before { transform: scaleY(1); }
.fleet__card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: var(--glow);
}
.fleet__card--lead {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(224, 122, 60, 0.09), transparent 58%),
    linear-gradient(158deg, var(--slate-3) 0%, var(--slate-1) 66%);
  border-color: rgba(232, 144, 80, 0.22);
}
.fleet__flag {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--sig);
  color: #14100c;
  font-family: var(--font-m);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 0 5px 0 5px;
  z-index: 3;
}
.fleet__name { font-size: 1.14rem; letter-spacing: -0.015em; margin-bottom: 0.95rem; }
.fleet__stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.95rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid var(--edge);
}
.fleet__num {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
  color: var(--white);
  display: block;
}
.fleet__cap {
  display: block;
  font-family: var(--font-m);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin-top: 0.3rem;
}
.fleet__blurb { color: var(--dim); font-size: 0.94rem; flex: 1; }
.fleet__go {
  margin-top: 1.3rem;
  font-family: var(--font-d);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--sig-hot);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
}
.fleet__go svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.fleet__go:hover { color: var(--white); }
.fleet__go:hover svg { transform: translateX(6px); }

/* ---------- ticker ----------
   A machined steel strip running across the page on the lean. */

.tick {
  position: relative;
  background:
    repeating-linear-gradient(-18deg, transparent 0 22px, rgba(255, 255, 255, 0.045) 22px 23px),
    linear-gradient(178deg, #262c34 0%, #1b2028 52%, #23282f 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  transform: skewY(-1.8deg);
  margin: 2.5rem 0;
  overflow: hidden;
  padding: 1.15rem 0;
}
.tick__rail {
  display: flex;
  width: max-content;
  transform: skewY(1.8deg);
  animation: tick-run 55s linear infinite; /* one calm current, not a rush */
}
.tick:hover .tick__rail { animation-play-state: paused; }
.tick__set {
  display: flex;
  list-style: none;
  gap: 3.2rem;
  padding-right: 3.2rem;
}
.tick__set li {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: #eef1f4;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3.2rem;
}
.tick__set li::after { content: '/'; color: var(--sig); font-weight: 400; }
@keyframes tick-run { to { transform: skewY(1.8deg) translateX(-50%); } }

/* ---------- how it works ----------
   The rail draws itself downward as the section arrives. */

.path { list-style: none; counter-reset: leg; position: relative; max-width: 780px; }
.path::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, var(--sig) 0%, rgba(156, 170, 184, 0.35) 34%, rgba(156, 170, 184, 0.08) 100%);
}
.path__leg {
  counter-increment: leg;
  position: relative;
  padding: 0 0 2.6rem 5.4rem;
}
.path__leg:last-child { padding-bottom: 0; }
.path__leg::before {
  content: counter(leg, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.35rem;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--sig-hot);
  background: var(--slate-1);
  border: 1px solid var(--edge);
  border-left: 2px solid var(--sig);
  border-radius: 4px;
  box-shadow: 0 0 0 6px var(--slate-0);
}
.path__name { font-size: 1.16rem; letter-spacing: -0.015em; margin-bottom: 0.35rem; }
.path__note { color: var(--dim); font-size: 0.97rem; max-width: 52ch; }

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

.edge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-bottom: 2.6rem;
}
.edge-grid__cell {
  border: 1px solid var(--edge);
  border-left: 2px solid var(--sig);
  border-radius: 0 6px 6px 0;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.035), transparent 58%);
  padding: 1.7rem 1.6rem;
}
.edge-grid__stat {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: var(--white);
  display: block;
  margin-bottom: 0.5rem;
}
.edge-grid__text { color: var(--dim); font-size: 0.96rem; }

.straight {
  border: 1px solid var(--edge);
  border-top: 2px solid var(--sig);
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, rgba(224, 122, 60, 0.05), transparent 60%);
  padding: 1.5rem 1.7rem;
  color: var(--dim);
  font-size: 0.97rem;
  max-width: 760px;
}
.straight strong { color: var(--white); }

/* ---------- industries ---------- */

.lanes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.lanes__lane {
  padding: 1.4rem 1.3rem;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: linear-gradient(152deg, #151a20, #10141a);
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.35s var(--ease), background 0.25s ease;
}
.lanes__lane::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  background: repeating-linear-gradient(-24deg, transparent 0 9px, rgba(198, 214, 230, 0.05) 9px 10px);
  pointer-events: none;
}
.lanes__lane::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--sig), rgba(224, 122, 60, 0));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease);
}
.lanes__lane:hover::before { transform: scaleX(1); }
.lanes__lane:hover { border-color: rgba(255, 255, 255, 0.14); transform: translateY(-3px); }
.lanes__name { font-family: var(--font-d); font-weight: 600; font-size: 0.99rem; margin-bottom: 0.4rem; display: block; }
.lanes__use { color: var(--dim-2); font-size: 0.87rem; line-height: 1.5; }

/* ---------- faq ---------- */

.faqs { max-width: 780px; }
.faqs__item {
  border-bottom: 1px solid var(--edge);
}
.faqs__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0.2rem;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 1.03rem;
  letter-spacing: -0.012em;
  min-height: 44px;
  transition: color 0.2s ease;
}
.faqs__q:hover { color: var(--sig-hot); }
.faqs__q::-webkit-details-marker { display: none; }
.faqs__q::after {
  content: '';
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 1.5px solid var(--sig);
  border-bottom: 1.5px solid var(--sig);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s var(--ease);
}
.faqs__item[open] .faqs__q::after { transform: rotate(-135deg) translateY(-2px); }
.faqs__a { padding: 0 0.2rem 1.5rem; color: var(--dim); max-width: 66ch; }

/* ---------- CTA band ----------
   The corridor returns: rays converging off the right edge, an ember
   horizon low in the frame. Graphite, not a colour block. */

.launch {
  position: relative;
  margin: 5rem 0 0;
  transform: skewY(-1.8deg);
  background:
    repeating-conic-gradient(from 0deg at 88% 62%,
      rgba(198, 214, 230, 0.075) 0deg 0.16deg,
      transparent 0.16deg 3deg),
    radial-gradient(38% 60% at 88% 62%, rgba(224, 122, 60, 0.26), transparent 70%),
    linear-gradient(120deg, #0d1116 0%, #151a21 58%, #1b222a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.launch__rail {
  position: relative;
  max-width: var(--rail);
  margin: 0 auto;
  padding: 5.4rem 1.5rem;
  transform: skewY(1.8deg);
}
.launch__title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.03em; color: #fff; max-width: 620px; }
.launch__sub { color: rgba(233, 238, 243, 0.76); margin: 1rem 0 2.2rem; max-width: 56ch; }
.launch__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

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

.footing {
  background:
    radial-gradient(50% 34% at 50% 0%, rgba(126, 148, 172, 0.06), transparent 70%),
    linear-gradient(180deg, #090b0e 0%, #070809 100%);
  border-top: 1px solid var(--edge);
  padding: 4.5rem 0 2.5rem;
  font-size: 0.92rem;
}
.footing__rail { max-width: var(--rail); margin: 0 auto; padding: 0 1.5rem; }
.footing__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footing__tag { color: var(--dim-2); margin-top: 0.9rem; max-width: 30ch; }
.footing__head {
  font-family: var(--font-m);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin-bottom: 1.1rem;
}
.footing__list { list-style: none; }
.footing__list li { margin-bottom: 0.55rem; }
.footing__list a { color: var(--dim); display: inline-block; padding: 0.1rem 0; }
.footing__list a:hover { color: var(--sig-hot); }
.footing__contact { color: var(--dim); font-style: normal; line-height: 1.9; }
.footing__contact a { color: var(--dim); }
.footing__contact a:hover { color: var(--sig-hot); }
.footing__legal {
  border-top: 1px solid var(--edge);
  padding-top: 1.8rem;
  color: var(--dim-2);
  font-size: 0.83rem;
  line-height: 1.7;
}
.footing__legal strong { color: var(--dim); }
.footing__copy { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; }

/* ---------- reveals ---------- */

.rv {
  opacity: 0;
  transform: translate3d(-14px, 22px, 0);
  transition: opacity 0.75s ease, transform 0.75s var(--ease);
}
.rv--go { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }
.rv-d4 { transition-delay: 0.32s; }

/* ---------- forms (apply / unsubscribe) ---------- */

.sheet {
  max-width: 720px;
  background: linear-gradient(160deg, var(--slate-2), var(--slate-1));
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 2.4rem 2.2rem;
}
.sheet__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.sheet__grid .field--wide { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field__label { font-weight: 600; font-size: 0.9rem; }
.field__label small { font-weight: 400; color: var(--dim-2); }
.field__input,
.field__select,
.field__area {
  width: 100%;
  background: var(--slate-0);
  border: 1px solid var(--edge);
  border-radius: 5px;
  color: var(--white);
  font: inherit;
  font-size: 0.98rem;
  padding: 0.78rem 0.95rem;
  min-height: 48px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field__area { min-height: 110px; resize: vertical; }
.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f2a266' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  padding-right: 2.4rem;
}
.field__input:focus,
.field__select:focus,
.field__area:focus {
  outline: none;
  border-color: var(--sig);
  box-shadow: 0 0 0 3px rgba(224, 122, 60, 0.2);
}
.field--bad .field__input,
.field--bad .field__select { border-color: #ff5d6c; }
.field__err {
  display: none;
  color: #ff8f9a;
  font-size: 0.84rem;
}
.field--bad .field__err { display: block; }

/* honeypot — never visible to humans */
.field--nectar {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sheet__send { margin-top: 1.8rem; }
.sheet__fine { margin-top: 1.1rem; font-size: 0.84rem; color: var(--dim-2); max-width: 58ch; }

.sheet__done {
  display: none;
  text-align: left;
  padding: 1.5rem 0 0.5rem;
}
.sheet__done--show { display: block; }
.sheet__done svg { width: 46px; height: 46px; color: var(--sig-hot); margin-bottom: 1.2rem; }
.sheet__done h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.sheet__done p { color: var(--dim); max-width: 50ch; }

.mini-steps { list-style: none; counter-reset: ms; display: grid; gap: 1.1rem; max-width: 420px; }
.mini-steps li { counter-increment: ms; position: relative; padding-left: 3rem; color: var(--dim); }
.mini-steps li strong { color: var(--white); display: block; font-family: var(--font-d); font-size: 0.98rem; }
.mini-steps li::before {
  content: counter(ms);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--edge);
  border-left: 2px solid var(--sig);
  border-radius: 4px;
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--sig-hot);
}

.duo { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3.5rem; align-items: start; }

/* ---------- legal prose ---------- */

.prose { max-width: 760px; }
.prose h2 { font-size: 1.3rem; margin: 2.4rem 0 0.8rem; }
.prose p, .prose ul { color: var(--dim); margin-bottom: 1rem; }
.prose ul { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.4rem; }
.prose .stamp { font-size: 0.86rem; color: var(--dim-2); }

/* ---------- interior page hero ---------- */

.subhero { padding: 9.5rem 0 3.5rem; position: relative; overflow: hidden; }
.subhero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(from 0deg at 102% 40%,
      rgba(198, 214, 230, 0.06) 0deg 0.16deg,
      transparent 0.16deg 2.8deg),
    radial-gradient(90% 120% at 88% -20%, rgba(224, 122, 60, 0.1), transparent 62%);
  pointer-events: none;
}
.subhero__rail { max-width: var(--rail); margin: 0 auto; padding: 0 1.5rem; position: relative; }
.subhero__title { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -0.03em; margin: 1rem 0; }
.subhero__sub { color: var(--dim); max-width: 58ch; font-size: 1.06rem; }

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

.lost {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.lost::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(from 0deg at 74% 46%,
      rgba(198, 214, 230, 0.07) 0deg 0.18deg,
      transparent 0.18deg 3.2deg),
    radial-gradient(60% 80% at 74% 46%, rgba(224, 122, 60, 0.14), transparent 66%);
}
.lost__rail { max-width: var(--rail); margin: 0 auto; padding: 0 1.5rem; position: relative; }
.lost__code {
  font-family: var(--font-d);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(5rem, 16vw, 11rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(115deg, var(--white) 24%, var(--sig-hot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lost__title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 1rem 0; }
.lost__sub { color: var(--dim); margin-bottom: 2.2rem; max-width: 48ch; }

/* ---------- photography — split-tone ---------- */

/* full-bleed tinted band between sections; photos are pre-graded to
   grayscale, and the split-tone (cool steel shadows, ember highlights)
   is applied here so the imagery sits inside the brand */
.photoband {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: skewY(-1.8deg);
  margin: 2.5rem 0;
}
.photoband__img {
  width: 100%;
  height: clamp(240px, 34vw, 440px);
  object-fit: cover;
  transform: translate3d(0, var(--par, 0px), 0) skewY(1.8deg) scale(1.16);
  filter: grayscale(1) contrast(1.1) brightness(0.86);
  will-change: transform;
}
.photoband::before {
  /* split-tone colour pass — cool metal into sodium light */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(104deg, #4a5a6b 0%, #6d7480 46%, #b4763c 100%);
  mix-blend-mode: color;
  opacity: 0.85;
  pointer-events: none;
}
.photoband::after {
  /* seat the image into the graphite world: edge fades + perspective rays */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 12, 15, 0.82) 0%, rgba(10, 12, 15, 0.12) 34%, rgba(10, 12, 15, 0.12) 66%, rgba(10, 12, 15, 0.82) 100%),
    radial-gradient(80% 90% at 84% 40%, rgba(224, 122, 60, 0.2), transparent 62%),
    repeating-linear-gradient(-18deg, transparent 0 28px, rgba(10, 12, 15, 0.16) 28px 29px);
}

/* section with a split-toned photo backdrop (industries) — heavy scrim
   keeps every card and heading at AA contrast */
.band--photo {
  isolation: isolate;
  overflow: hidden;
}
.band--photo .band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--par, 0px), 0) scale(1.12);
  filter: grayscale(1) contrast(1.05) brightness(0.58);
  will-change: transform;
}
.band--photo::before {
  /* split-tone colour pass */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, #4a5a6b, #6b7280 52%, #a86f3c);
  mix-blend-mode: color;
  pointer-events: none;
}
.band--photo::after {
  /* readability scrim */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 12, 15, 0.95) 0%, rgba(10, 12, 15, 0.84) 42%, rgba(10, 12, 15, 0.92) 100%);
}

/* ---------- Swiss asymmetric structures ----------
   The site's layout DNA: hard left axis, off-axis 1/3+2/3 splits,
   rows stepping off the rule like lane changes. */

.split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3.2rem;
  align-items: start;
}
.split__side {
  position: sticky;
  top: 6.5rem;
  border-left: 2px solid var(--sig);
  padding-left: 1.7rem;
}
.split__side .band__title { font-size: clamp(1.75rem, 2.9vw, 2.4rem); }
.split__side .band__lede { font-size: 1.01rem; }
.split__index {
  display: block;
  margin-top: 1.8rem;
  font-family: var(--font-m);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(156, 170, 184, 0.24);
}
.split .path { max-width: none; }

/* why-us ledger: full-width rows on the hard axis, alternate rows
   stepping right — the off-axis stagger is the silhouette */
.ledger { display: grid; gap: 1.1rem; }
.ledger__row {
  border: 1px solid var(--edge);
  border-left: 2px solid var(--sig);
  border-radius: 0 6px 6px 0;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.035), transparent 58%);
  padding: 1.6rem 1.7rem;
  display: grid;
  grid-template-columns: minmax(170px, 235px) 1fr;
  gap: 1.6rem;
  align-items: start;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.ledger__row:hover { border-color: rgba(255, 255, 255, 0.14); }
.ledger__row:nth-child(even) { margin-left: clamp(0px, 5vw, 3.4rem); }
.ledger__stat {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 1.24rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--white);
}
.ledger__text { color: var(--dim); font-size: 0.95rem; }

/* qualification: 2/3 bars + 1/3 rail — the published FICO bars carry
   oversized numerals hanging off the axis */
.quals {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.4rem;
  align-items: start;
}
.quals__main { display: grid; gap: 1.4rem; }
.quals__bar {
  border: 1px solid var(--edge);
  border-left: 2px solid var(--sig);
  border-radius: 0 6px 6px 0;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.04), transparent 60%);
  padding: 1.9rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.9rem;
  align-items: center;
}
.quals__bar:nth-child(2) { margin-left: clamp(0px, 4vw, 3rem); }
.quals__fico {
  font-family: var(--font-d);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(112deg, var(--white) 22%, var(--sig-hot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quals__fico small {
  display: block;
  font-family: var(--font-m);
  font-style: normal;
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  -webkit-text-fill-color: var(--dim-2);
  margin-top: 0.55rem;
}
.quals__name { font-family: var(--font-d); font-weight: 700; font-size: 1.06rem; display: block; margin-bottom: 0.35rem; }
.quals__text { color: var(--dim); font-size: 0.94rem; }
.quals__side { display: grid; gap: 1.4rem; align-content: start; }

/* ---------- application desk (5-step) ---------- */

.app { max-width: 880px; margin: 0 auto; padding: 8.5rem 1.5rem 5.5rem; }
.app__title { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -0.03em; margin: 1rem 0; }
.app__sub { color: var(--dim); max-width: 58ch; font-size: 1.06rem; text-wrap: pretty; }

.steps { margin: 2.6rem 0 1.3rem; }
.steps__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-m);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-bottom: 0.55rem;
}
.steps__meta strong { color: var(--white); font-weight: 600; }
.steps__track {
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}
.steps__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sig-deep), var(--sig) 60%, var(--sig-hot));
  box-shadow: 0 0 10px rgba(224, 122, 60, 0.7);
  transition: width 0.5s var(--ease);
}

.desk {
  background: linear-gradient(160deg, var(--slate-2), var(--slate-1));
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 2.4rem 2.2rem;
}
.desk__step { display: none; border: 0; min-inline-size: 0; }
.desk__step--on { display: block; }
.desk__eyebrow {
  font-family: var(--font-m);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sig-hot);
  padding: 0;
}
.desk__title { font-size: 1.48rem; letter-spacing: -0.02em; margin: 0.5rem 0; outline: none; }
.desk__note { color: var(--dim); font-size: 0.94rem; margin-bottom: 1.7rem; max-width: 60ch; }
.desk__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.desk__grid .field--wide { grid-column: 1 / -1; }

.field__hint { font-size: 0.8rem; color: var(--dim-2); }

.check {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.55rem;
  font-size: 0.88rem;
  color: var(--dim);
  cursor: pointer;
  min-height: 24px;
}
.check input { width: 17px; height: 17px; accent-color: var(--sig); }

.seg { display: flex; gap: 0.6rem; }
.seg label { flex: 1; cursor: pointer; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--edge);
  border-radius: 5px;
  background: var(--slate-0);
  color: var(--dim);
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 0.91rem;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.seg span > i { font-style: normal; display: inline-block; }
.seg input:checked + span {
  border-color: var(--sig);
  background: rgba(224, 122, 60, 0.14);
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--sig);
}
.seg input:focus-visible + span { outline: 2px solid var(--sig-hot); outline-offset: 2px; }
.field--bad .seg span { border-color: #ff5d6c; }

.drop {
  border: 1.5px dashed var(--edge-hot);
  border-radius: 6px;
  background: rgba(224, 122, 60, 0.045);
  padding: 1.9rem 1.4rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.drop:hover, .drop--over { border-color: var(--sig-hot); background: rgba(224, 122, 60, 0.1); }
.drop__label { display: block; font-family: var(--font-d); font-weight: 600; }
.drop__hint { display: block; font-size: 0.84rem; color: var(--dim-2); margin-top: 0.3rem; }
.drop__hint u { color: var(--sig-hot); }

.chips { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.7rem; }
.chips li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--slate-0);
  border: 1px solid var(--edge);
  border-radius: 5px;
  padding: 0.45rem 0.5rem 0.45rem 0.85rem;
  font-size: 0.88rem;
}
.chips__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips__size { color: var(--dim-2); flex: none; }
.chips__x {
  background: none;
  border: 0;
  color: var(--dim);
  font-size: 1.15rem;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  flex: none;
}
.chips__x:hover { color: #ff8f9a; background: rgba(255, 93, 108, 0.1); }

.recap {
  border: 1px solid var(--edge);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.recap__row {
  display: grid;
  grid-template-columns: minmax(150px, 230px) 1fr;
  gap: 1rem;
  padding: 0.68rem 1.05rem;
  font-size: 0.9rem;
}
.recap__row:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.recap__row dt { color: var(--dim-2); }
.recap__row dd { color: var(--white); overflow-wrap: anywhere; }

.consent {
  color: var(--dim);
  font-size: 0.91rem;
  border-left: 2px solid var(--sig);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
  max-width: 62ch;
}

.sig__canvas-wrap {
  position: relative;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--slate-0);
  overflow: hidden;
}
.sig__canvas { width: 100%; height: 170px; touch-action: none; cursor: crosshair; }
.sig__base {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 2.2rem;
  height: 1px;
  background: var(--edge-hot);
  pointer-events: none;
}
.sig__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 0.55rem; gap: 1rem; }
.sig__hint { font-size: 0.84rem; color: var(--dim-2); }
.sig__clear {
  background: none;
  border: 1px solid var(--edge);
  color: var(--dim);
  border-radius: 5px;
  min-height: 40px;
  padding: 0 1.1rem;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.sig__clear:hover { border-color: var(--edge-hot); color: var(--white); }
.field--bad .sig__canvas-wrap { border-color: #ff5d6c; }

.desk__err {
  display: none;
  margin-top: 1.4rem;
  color: #ff8f9a;
  background: rgba(255, 93, 108, 0.08);
  border: 1px solid rgba(255, 93, 108, 0.35);
  border-radius: 6px;
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
}
.desk__err--show { display: block; }

.desk__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }

.appdone {
  display: none;
  background: linear-gradient(160deg, var(--slate-2), var(--slate-1));
  border: 1px solid var(--edge-hot);
  border-radius: 8px;
  padding: 3rem 2.4rem;
  box-shadow: var(--glow);
}
.appdone--show { display: block; }
.appdone__mark { width: 54px; height: 54px; color: var(--sig-hot); margin-bottom: 1.3rem; }
.appdone__title { font-size: 1.68rem; letter-spacing: -0.02em; margin-bottom: 0.7rem; }
.appdone__sub { color: var(--dim); max-width: 52ch; }

/* ---------- responsive ---------- */

/* BLOCKER FIX — hero copy legibility wherever the copy column outgrows the
   scrim.
   The base 94deg scrim lets go at 74% of the gradient line, which is safe
   only while the copy column is inset. The copy's right edge as a FRACTION
   of viewport is not constant: the rail caps at var(--rail) = 1140px, so
   above 1140 the edge sits at a stable ~54-57% (measured 53.7% at 1440,
   worst contrast 5.42:1 — fine). BELOW 1140 the rail is viewport-bound and
   the copy walks outward — 63% at 1024, 76% at 820, 89% at 390 — straight
   into the lit vanishing point at 72%, where the scrim has already reached
   alpha 0.00. Measured worst case before this rule: 1.35:1 at 390px and
   1.45:1 at 820px.
   So the breakpoint is --rail, not a device size: below it the ramp is
   replaced by a near-flat wash that is still ~0.77 under the furthest
   glyph. With the opaque .hero__sub colour and the matching uDim hold in
   lanes.js, measured worst case becomes 10.7:1 at 390 and 8.9:1 at 820. */
@media (max-width: 1139.98px) {
  .hero::after {
    background:
      linear-gradient(94deg, rgba(6, 8, 11, 0.95) 0%, rgba(6, 8, 11, 0.90) 40%, rgba(6, 8, 11, 0.82) 72%, rgba(6, 8, 11, 0.74) 88%, rgba(6, 8, 11, 0.66) 100%),
      radial-gradient(130% 108% at 58% 46%, transparent 48%, rgba(4, 6, 9, 0.6) 100%),
      linear-gradient(0deg, var(--slate-0) 0%, transparent 18%);
  }
}

@media (max-width: 1024px) {
  .fleet { grid-template-columns: repeat(2, 1fr); }
  .lanes { grid-template-columns: repeat(2, 1fr); }
  .footing__grid { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr; gap: 2.5rem; }
  .split { grid-template-columns: 1fr; gap: 2.4rem; }
  .split__side { position: static; }
  .split__index { display: none; }
  .quals { grid-template-columns: 1fr; }
  .quals__bar:nth-child(2) { margin-left: 0; }
  .ledger__row:nth-child(even) { margin-left: 0; }
}

@media (max-width: 768px) {
  body { font-size: 1rem; }
  .topbar__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(9, 11, 14, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--edge);
    padding: 0.8rem 1.5rem 1.4rem;
  }
  .topbar__nav--open { display: flex; }
  .topbar__link { padding: 0.9rem 0.15rem; font-size: 1.05rem; min-height: 44px; display: flex; align-items: center; }
  .topbar__nav .btn { margin-top: 0.9rem; }
  .topbar__burger { display: inline-flex; }
  .hero__rail { padding-top: 7rem; padding-bottom: 4rem; }
  .hero__body { padding-left: 1.4rem; }
  .hero__body::after { width: 6px; }
  /* hold the fold on a phone: headline, subcopy and both CTAs */
  .hero__title { font-size: clamp(2.25rem, 8.6vw, 3rem); margin: 0.9rem 0 1.1rem; }
  .hero__sub { font-size: 1.02rem; margin-bottom: 1.8rem; }
  .hero__cta { margin-bottom: 1.8rem; }
  .kicker { font-size: 0.64rem; letter-spacing: 0.2em; gap: 0.55rem; }
  .kicker::before { width: 20px; }
  .band { padding: 4.5rem 0; }
  .band--slash { clip-path: polygon(0 1.8rem, 100% 0, 100% calc(100% - 1.8rem), 0 100%); padding: 6.5rem 0; }
  .fleet { grid-template-columns: 1fr; }
  .edge-grid { grid-template-columns: 1fr; }
  .lanes { grid-template-columns: 1fr; }
  .sheet { padding: 1.8rem 1.3rem; }
  .sheet__grid { grid-template-columns: 1fr; }
  .app { padding-top: 7rem; }
  .desk { padding: 1.8rem 1.2rem; }
  .desk__grid { grid-template-columns: 1fr; }
  .ledger__row { grid-template-columns: 1fr; gap: 0.5rem; }
  .quals__bar { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 1.4rem; }
  .recap__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .footing__grid { grid-template-columns: 1fr; gap: 2rem; }
  .path::before { left: 21px; }
  .path__leg { padding-left: 4.2rem; }
  .path__leg::before { width: 44px; height: 44px; }
}

/* ============================================================
   motion layer — scroll choreography
   Every hidden start state is opt-in behind .mo-on, which motion.js
   sets only after it has installed its observers and failsafes. With
   JS off, JS broken, or reduced motion, the page renders composed and
   fully visible. Nothing can be trapped invisible.
   ============================================================ */

/* word-mask type reveal — lines rise out of their own measure */
.mo-on .moWord { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.mo-on .moWordIn {
  display: inline-block;
  transform: translate3d(0, 112%, 0);
  transition: transform 1s var(--ease);
}
.mo-on .moIn .moWordIn { transform: none; }

/* clip-path wipe for media bands — the frame opens left to right,
   the same direction the corridor travels */
.mo-on .moWipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease);
}
.mo-on .moWipe.moIn { clip-path: inset(0 0 0 0); }

/* rise + fade for grid children */
.mo-on .moRise {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.8s ease, transform 0.8s var(--ease);
}
.mo-on .moRise.moIn { opacity: 1; transform: none; }

/* the signature scroll moment: the process rail draws forward */
.mo-on .moDraw::before {
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 1.5s var(--ease);
}
.mo-on .moDraw.moIn::before { transform: scaleY(1); }

/* section hairline that measures itself out under each heading */
.mo-on .moRule::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 1.7rem;
  background: linear-gradient(90deg, var(--sig), rgba(156, 170, 184, 0.28) 34%, transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease);
}
.mo-on .moRule.moIn::after { transform: scaleX(1); }

/* Static variant for nodes that site.js's own .rv observer already manages.
   Same hairline, drawn immediately, never animated and never observed — so
   those nodes are owned by exactly one reveal system. */
.mo-on .moRuleStatic::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 1.7rem;
  background: linear-gradient(90deg, var(--sig), rgba(156, 170, 184, 0.28) 34%, transparent);
}

/* magnetic controls + card tilt */
.mo-on .moMag { will-change: transform; }
.mo-on .moTilt {
  /* the eased transition is for the settle-back on mouseleave only */
  transition: transform 0.45s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
}
/* While the pointer is being tracked the transform must be effectively
   immediate. A 0.45s ease restarted on every mousemove is what makes a
   tilt rubber-band behind the cursor. */
.mo-on .moTilt.moTrack {
  transition: transform 0.1s linear, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* pointer-tracked sheen — the plate knows where the cursor is */
.mo-on .moTilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 154, 96, 0.1), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.mo-on .moTilt:hover::after { opacity: 1; }

/* ---------- reduced motion ----------
   A composed, fully visible static page. No animation anywhere. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .tick__rail { animation: none; }
  .rv { opacity: 1; transform: none; }
  .photoband__img { transform: skewY(1.8deg) scale(1.16); }
  .band--photo .band__bg { transform: scale(1.12); }
  .fleet__card::before, .lanes__lane::before { transform: none; }
  .mo-on .moWordIn, .mo-on .moRise { transform: none; opacity: 1; }
  .mo-on .moWipe { clip-path: none; }
  .mo-on .moDraw::before, .mo-on .moRule::after { transform: none; }
}

/* ============================================================
   Secure Application Link — additive layer.
   Trust panel, resume notice, contact-consent block.
   Uses existing tokens only. No new fonts, no new colours,
   no changes to any rule above this line.
   ============================================================ */

.trust {
  margin-top: 2.4rem;
  padding: 1.2rem 1.35rem;
  background: linear-gradient(160deg, var(--slate-2), var(--slate-1));
  border: 1px solid var(--edge);
  border-left: 2px solid var(--sig);
  border-radius: 8px;
}
.trust__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-d);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 0.7rem;
}
.trust__mark { width: 22px; height: 17px; flex: none; }
.trust__list { list-style: none; display: grid; gap: 0.42rem; margin: 0; padding: 0; }
.trust__list li {
  position: relative;
  padding-left: 1.05rem;
  color: var(--dim);
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: 74ch;
  text-wrap: pretty;
}
.trust__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--steel-dim);
}

/* ---------- resume notice (JS-created, dismissible) ---------- */
.resume {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding: 0.85rem 1.05rem;
  background: rgba(224, 122, 60, 0.07);
  border: 1px solid var(--edge-hot);
  border-radius: 6px;
}
.resume__text { color: var(--dim); font-size: 0.87rem; line-height: 1.55; margin: 0; }
.resume__x {
  background: none;
  border: 1px solid var(--edge);
  color: var(--dim);
  border-radius: 5px;
  min-height: 34px;
  padding: 0 0.85rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  flex: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.resume__x:hover { border-color: var(--edge-hot); color: var(--white); }

/* ---------- contact consent ---------- */
.consentbox { margin-bottom: 1.7rem; }
.check--consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0;
  font-size: 0.88rem;
  line-height: 1.55;
}
.check--consent input { margin-top: 0.22rem; flex: none; }
.check--consent strong { color: var(--white); font-weight: 600; }
.consentbox__link { margin-top: 0.55rem; font-size: 0.83rem; color: var(--dim-2); }
.field--bad .check--consent input { outline: 2px solid #ff5d6c; outline-offset: 2px; }

@media (max-width: 640px) {
  .trust { padding: 1.05rem 1.1rem; }
  .resume { flex-direction: column; gap: 0.7rem; align-items: stretch; }
}