/* ==========================================================================
   First Porter — visual system
   White · blue · silver, executed at institutional weight: the dark end is a
   near-black carrying a blue cast, the light end a warm white, and the brand
   blue is reserved as an accent rather than spent on large flat fills.
   ========================================================================== */

@font-face {
  font-family: 'Instrument Serif';
  src: url('https://firstporter.com/wp-content/uploads/2026/08/instrumentserif-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('https://firstporter.com/wp-content/uploads/2026/08/inter-latin.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('https://firstporter.com/wp-content/uploads/2026/08/plexmono-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('https://firstporter.com/wp-content/uploads/2026/08/plexmono-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Blue — from near-black through to the brand */
  --void:       #0a0a0c;   /* obsidian */
  --ink:        #0f0f13;
  --graphite:   #16161b;
  --slate:      #1e1e25;
  --titanium:   #26262b;   /* structural border */
  --blue:       #2c3196;   /* First Porter brand, on light surfaces */
  --blue-lift:  #3b82f6;   /* electric accent, legible on obsidian */
  --blue-glow:  rgba(59, 130, 246, .18);
  --cyan-glow:  rgba(0, 240, 255, .10);  /* glow only — never text */
  --blue-press: #2563eb;   /* solid fills: white on this is 5.17:1 */

  /* Blue is the intelligence colour: white informs, dark asserts, grey
     structures, blue signals "this is the insight".
     Split by role, because one blue cannot do both jobs on a near-black:
     --signal carries display type and diagram strokes (needs 3:1), while
     --signal-ink carries small labels and links (needs 4.5:1). */
  --signal:     var(--blue);
  --signal-ink: var(--blue);
  --blue-text:  #7ba9fb;   /* small blue label text on obsidian */

  /* Silver.
     --silver-dim is legible on white but only ~3:1 on the near-black, so dark
     surfaces get --silver-quiet for supporting copy (4.95:1 on --ink) and
     --edge for anything with an interactive boundary (3.34:1 on --void, above
     the 3:1 minimum for a UI component). --hair stays decorative-only. */
  --silver:       #a5abb8;
  --silver-hi:    #d2d6de;
  --silver-dim:   #55596a;
  /* Raised from #7a8296: this text sits over photography, where the effective
     contrast is lower than against a flat panel. */
  --silver-quiet: #9096a5;
  --edge:         #4d5261;
  --hair:         rgba(255, 255, 255, .08);   /* titanium hairline */
  --hair-dark:    rgba(10, 10, 12, .14);

  /* White — warm, never clinical */
  --paper:      #f4f4f6;
  --paper-2:    #eaeaee;
  --carbon:     #101014;

  /* Semantic, set per section by .band-* */
  --bg:   var(--paper);
  --fg:   var(--carbon);
  --fg-2: #565d72;
  --rule: var(--hair-dark);
  --focus: var(--blue);

  --shell: 1440px;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  /* Uniform section rhythm: 80px on a phone up to 160px on a desktop, so the
     dark/light transitions never butt against their content. */
  --band-y: clamp(5rem, 9vw, 10rem);

  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io:  cubic-bezier(.65, 0, .35, 1);

  --nav-h: 84px;

  /* Type. Editorial serif for display, grotesk for interface and body, mono
     for technical labels. */
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Accent face. Reserved for the blue emphasis word — never body, headings
     or interface. */
  --font-accent:  'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layering scale. Nothing in the codebase may invent a z-index outside it. */
  --z-base:     0;
  --z-raised:   2;
  --z-sticky:   10;
  --z-progress: 120;
  --z-masthead: 130;
  --z-menu:     140;
  --z-cursor:   150;
  --z-modal:    200;
  --z-loader:   300;
  --z-skip:     400;
}

body.fp-site *, body.fp-site *::before, body.fp-site *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 2rem);
}

body.fp-site {
  margin: 0;
  background: var(--paper);
  color: var(--carbon);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: 'ss03', 'cv05';
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
body.fp-site.is-locked { overflow: hidden; }

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

body.fp-site h1, body.fp-site h2, body.fp-site h3, body.fp-site h4 { margin: 0; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; }
body.fp-site p { margin: 0; }
body.fp-site ul, body.fp-site ol { margin: 0; padding: 0; list-style: none; }

body.fp-site a { color: inherit; text-decoration: none; }

body.fp-site :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 1px;
}

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

body.fp-site .skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: var(--z-skip);
  padding: .85rem 1.4rem;
  background: var(--carbon); color: var(--paper);
  font-size: .8125rem; font-weight: 500;
  transition: top .25s var(--e-out);
}
body.fp-site .skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   Bands — every section declares its own surface
   -------------------------------------------------------------------------- */

body.fp-site .band {
  position: relative;
  padding-block: var(--band-y);
  background: var(--bg);
  color: var(--fg);
}
body.fp-site .band--dark {
  --bg: var(--void); --fg: var(--paper); --fg-2: var(--silver);
  --rule: var(--hair); --focus: var(--silver-hi); --signal: var(--blue-lift); --signal-ink: var(--blue-text);
}
body.fp-site .band--ink   { --bg: var(--ink);    --fg: var(--paper); --fg-2: var(--silver); --rule: var(--hair); --focus: var(--silver-hi); --signal: var(--blue-lift); --signal-ink: var(--blue-text); }
body.fp-site .band--paper { --bg: var(--paper);  --fg: var(--carbon); --fg-2: var(--silver-dim); --rule: var(--hair-dark); }
body.fp-site .band--warm  { --bg: var(--paper-2); --fg: var(--carbon); --fg-2: var(--silver-dim); --rule: var(--hair-dark); }
body.fp-site .band--flush { padding-block: 0; }

body.fp-site .shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
body.fp-site .shell--tight { max-width: 1060px; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

body.fp-site .display, body.fp-site h1, body.fp-site h2, body.fp-site h3, body.fp-site h4 { font-family: var(--font); }

body.fp-site .display {
  font-size: clamp(2.75rem, 7.6vw, 8rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.045em;
  text-wrap: balance;
}
body.fp-site .display--md { font-size: clamp(2.4rem, 5.7vw, 5.5rem); line-height: .94; letter-spacing: -.042em; }
body.fp-site .display--sm { font-size: clamp(2rem, 3.8vw, 3.5rem); line-height: 1.0; letter-spacing: -.035em; }

/* The blue emphasis is the one place the accent face appears. Set slightly
   larger and with open tracking, because an italic serif sits optically
   smaller than the grotesk beside it. */
body.fp-site .sig {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  font-size: 1.06em;
  color: var(--signal);
}

/* Blue marks the word carrying the meaning. Used sparingly — never more than
   one span per headline. */

body.fp-site .lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.375rem);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 46ch;
  letter-spacing: -.011em;
}

body.fp-site .body-copy { font-size: 1.0625rem; line-height: 1.62; color: var(--fg-2); max-width: 62ch; }
body.fp-site .body-copy + .body-copy { margin-top: 1.1em; }
body.fp-site .body-copy strong { color: var(--fg); font-weight: 500; }

body.fp-site .mono, body.fp-site .label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.fp-site .label { display: block; color: var(--fg-2); }
body.fp-site .label--silver { color: var(--silver); }
body.fp-site .label--rule {
  display: flex; align-items: center; gap: .9rem;
  padding-bottom: 1.1rem; margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
}
body.fp-site .label--rule i { font-style: normal; color: var(--signal-ink); font-weight: 500; }
body.fp-site .label--rule::after { content: ''; flex: 1; }

body.fp-site .figure-hero {
  font-size: clamp(4.5rem, 17vw, 17rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

body.fp-site .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.05rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--e-out), border-color .45s var(--e-out);
}
body.fp-site .btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  transform: translateY(101%);
  transition: transform .5s var(--e-out);
}
body.fp-site .btn:hover::before { transform: translateY(0); }
body.fp-site .btn__arrow { transition: transform .5s var(--e-out); }
body.fp-site .btn:hover .btn__arrow { transform: translateX(5px); }
body.fp-site .btn--sm { padding: .72rem 1.05rem; gap: 1rem; font-size: .75rem; }

body.fp-site .btn--light { background: var(--paper); color: var(--carbon); border-color: var(--paper); }
body.fp-site .btn--light::before { background: var(--blue); }
body.fp-site .btn--light:hover { color: var(--paper); border-color: var(--blue); }

body.fp-site .btn--dark { background: var(--carbon); color: var(--paper); border-color: var(--carbon); }
body.fp-site .btn--dark::before { background: var(--blue); }
body.fp-site .btn--dark:hover { color: var(--paper); border-color: var(--blue); }

body.fp-site .btn--outline { color: var(--fg); border-color: var(--rule); }
body.fp-site .btn--outline::before { background: var(--fg); }
body.fp-site .btn--outline:hover { color: var(--bg); border-color: var(--fg); }

body.fp-site .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* Inline link with a rule that wipes on hover */
body.fp-site .tlink {
  position: relative;
  display: inline-flex; align-items: center; gap: .6rem;
  padding-bottom: .35rem;
  font-size: .8125rem; font-weight: 500; letter-spacing: .02em;
}
body.fp-site .tlink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; opacity: .3;
  transform-origin: right; transition: transform .5s var(--e-out), opacity .3s;
}
body.fp-site .tlink:hover::after { opacity: 1; transform: scaleX(1); }
body.fp-site .tlink span:last-child { transition: transform .5s var(--e-out); }
body.fp-site .tlink:hover span:last-child { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   MASTHEAD — a control system, not a navbar.

   Two states, interpolated rather than switched: --nav-t runs 0 (at rest, over
   the hero) to 1 (compact, docked) and every dimension reads from it, so the
   bar and the logo compress as one continuous motion instead of snapping
   between classes.
   -------------------------------------------------------------------------- */

body.fp-site .masthead {
  --nav-t: 0;
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-masthead);
  border-bottom: 1px solid transparent;
  transition: transform .65s var(--e-out), background-color .5s var(--e-out),
              border-color .5s var(--e-out);
}
body.fp-site .masthead__inner {
  display: flex; align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
  /* 104px at rest, 68px docked */
  height: calc(104px - (36px * var(--nav-t)));
}
body.fp-site .masthead.is-solid {
  background: rgba(10, 10, 12, .72);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-bottom-color: var(--titanium);
}
body.fp-site .masthead.is-hidden { transform: translateY(-100%); }
body.fp-site .masthead.is-docked { transform: translateY(-100%); pointer-events: none; }
body.fp-site .masthead.is-mega-open { background: rgba(10, 10, 12, .92); border-bottom-color: var(--titanium); }
body.fp-site .masthead.is-mega-open.is-hidden { transform: none; }

/* Scroll progress, welded into the bar's own edge */
body.fp-site .masthead__progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; overflow: hidden;
}
body.fp-site .masthead__progress i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-lift));
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Brand — the logo is the anchor of the whole system
   -------------------------------------------------------------------------- */

body.fp-site .brand {
  position: relative;
  flex: none;
  display: inline-flex; flex-direction: column; gap: .5rem;
  padding: .35rem 0;
}
body.fp-site .brand__frame { display: block; overflow: hidden; }
body.fp-site .brand__lockup {
  display: block;
  /* 168px at rest down to 118px docked. The asset is 270px wide, so it never
     renders above its native resolution — the composition carries the scale,
     not the pixels. */
  width: calc(168px - (50px * var(--nav-t)));
  height: auto;
  transform-origin: left center;
  transition: opacity .4s var(--e-out), transform .6s var(--e-out);
}
/* A blue rule that draws out from under the mark on hover */
body.fp-site .brand__rule {
  position: absolute; left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--blue-lift), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--e-out);
}
body.fp-site .brand:hover .brand__rule,
body.fp-site .brand:focus-visible .brand__rule { transform: scaleX(1); }
body.fp-site .brand:hover .brand__lockup { transform: translateY(-1px); }
body.fp-site .brand:active .brand__lockup { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Nav links
   -------------------------------------------------------------------------- */

body.fp-site .nav { margin-left: auto; }
body.fp-site .nav__list { display: flex; align-items: center; gap: clamp(.75rem, 1.8vw, 1.9rem); }
body.fp-site .nav__item { position: relative; }

body.fp-site .nav__link {
  position: relative;
  display: inline-flex; align-items: baseline; gap: .55rem;
  padding: .55rem 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .8125rem; font-weight: 400;
  letter-spacing: -.005em; color: rgba(244, 244, 246, .72);
  white-space: nowrap;
  transition: color .35s var(--e-out);
}
body.fp-site .nav__link i {
  font-family: 'Plex Mono', monospace; font-style: normal;
  font-size: .5625rem; letter-spacing: .1em;
  color: var(--silver-quiet);
  transition: color .35s var(--e-out), opacity .35s var(--e-out);
  /* The index numbers retract as the bar compacts */
  opacity: calc(1 - var(--nav-t));
}
body.fp-site .nav__link span { position: relative; display: inline-block; }
body.fp-site .nav__link span::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px; background: var(--blue-lift);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--e-out);
}
body.fp-site .nav__link:hover { color: var(--paper); }
body.fp-site .nav__link:hover i { color: var(--blue-text); }
body.fp-site .nav__link:hover span::after { transform: scaleX(1); transform-origin: left; }

/* Current page, and the section the reader is actually inside */
body.fp-site .nav__link[aria-current='page'],
body.fp-site .nav__link.is-active { color: var(--paper); }
body.fp-site .nav__link[aria-current='page'] span::after,
body.fp-site .nav__link.is-active span::after { transform: scaleX(1); }
body.fp-site .nav__link[aria-current='page'] i,
body.fp-site .nav__link.is-active i { color: var(--blue-text); opacity: 1; }
body.fp-site .nav__link[aria-expanded='true'] { color: var(--paper); }
body.fp-site .nav__link[aria-expanded='true'] span::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Primary CTA — set apart from navigation
   -------------------------------------------------------------------------- */

body.fp-site .nav-cta {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 1rem;
  padding: .72rem 1.1rem;
  border: 1px solid var(--titanium); border-radius: 3px;
  background: rgba(255, 255, 255, .03);
  font-size: .75rem; font-weight: 500; letter-spacing: .01em;
  color: var(--paper);
  overflow: hidden; isolation: isolate;
  transition: border-color .45s var(--e-out), transform .45s var(--e-out);
}
body.fp-site .nav-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--blue), var(--blue-lift));
  transform: translateY(101%);
  transition: transform .5s var(--e-out);
}
body.fp-site .nav-cta:hover { border-color: var(--blue-lift); transform: translateY(-1px); }
body.fp-site .nav-cta:hover::before { transform: translateY(0); }
body.fp-site .nav-cta__arrow { transition: transform .5s var(--e-out); }
body.fp-site .nav-cta:hover .nav-cta__arrow { transform: translateX(4px); }
body.fp-site .nav-cta__label { transition: opacity .3s; }

/* --------------------------------------------------------------------------
   Mega panels
   -------------------------------------------------------------------------- */

body.fp-site .mega {
  position: absolute; left: 0; right: 0; top: 100%;
  /* Dark surface: must declare the token set, not just a background, or shared
     components (.tlink, rules, focus rings) inherit the light-page defaults and
     render near-black on near-black. */
  --bg: var(--void); --fg: var(--paper); --fg-2: var(--silver);
  --rule: var(--titanium); --focus: var(--silver-hi);
  --signal: var(--blue-lift); --signal-ink: var(--blue-text);
  background: rgba(10, 10, 12, .96);
  backdrop-filter: saturate(150%) blur(20px);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  border-bottom: 1px solid var(--titanium);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .55s var(--e-out);
}
body.fp-site .mega[hidden] { display: none; }
body.fp-site .mega.is-open { clip-path: inset(0 0 0 0); }
body.fp-site .mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .52fr);
  gap: clamp(2rem, 4vw, 4rem);
  max-width: var(--shell); margin-inline: auto;
  padding: clamp(2rem, 3.5vw, 3.25rem) var(--gutter) clamp(1.5rem, 2.5vw, 2rem);
}
body.fp-site .mega__cols {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
body.fp-site .mega__label { margin-bottom: 1.1rem; color: var(--blue-text); }
body.fp-site .mega__links { display: grid; gap: .2rem; }
body.fp-site .mega__links a {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .2rem .7rem;
  align-items: baseline;
  padding: .6rem .7rem .6rem 0;
  border-radius: 3px;
  color: var(--silver);
  transition: color .35s var(--e-out), transform .45s var(--e-out);
}
body.fp-site .mega__links a i {
  font-family: 'Plex Mono', monospace; font-style: normal;
  font-size: .5625rem; letter-spacing: .1em; color: var(--silver-quiet);
  transition: color .35s var(--e-out);
}
body.fp-site .mega__links a span { font-size: .9375rem; color: var(--paper); letter-spacing: -.012em; }
body.fp-site .mega__links a span sup { font-size: .55em; vertical-align: super; color: var(--blue-text); }
body.fp-site .mega__links a em {
  grid-column: 2; font-style: normal; font-size: .75rem; color: var(--silver-quiet);
  transition: color .35s var(--e-out);
}
body.fp-site .mega__links a:hover { transform: translateX(5px); }
body.fp-site .mega__links a:hover i { color: var(--blue-text); }
body.fp-site .mega__links a:hover em { color: var(--silver); }
body.fp-site .mega__note { font-size: .8125rem; line-height: 1.6; color: var(--silver-quiet); max-width: 30ch; }

body.fp-site .mega__visual {
  position: relative; margin: 0;
  border: 1px solid var(--titanium); border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
body.fp-site .mega__visual img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.2) brightness(.5);
  transform: scale(1.06);
  transition: transform 1.4s var(--e-out);
}
body.fp-site .mega.is-open .mega__visual img { transform: scale(1); }
body.fp-site .mega__visual figcaption {
  position: absolute; left: .8rem; bottom: .7rem;
  color: var(--silver);
}
body.fp-site .mega__visual::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 20% 85%, var(--blue-glow), transparent 62%);
}

body.fp-site .mega__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--titanium);
}
body.fp-site .mega__meta { color: var(--silver-quiet); }

/* Staggered reveal of the panel's contents */
body.fp-site .js .mega__group, body.fp-site .js .mega__visual, body.fp-site .js .mega__foot {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--e-out), transform .5s var(--e-out);
}
body.fp-site .mega.is-open .mega__group,
body.fp-site .mega.is-open .mega__visual,
body.fp-site .mega.is-open .mega__foot { opacity: 1; transform: none; }
body.fp-site .mega.is-open .mega__group:nth-child(1) { transition-delay: .10s; }
body.fp-site .mega.is-open .mega__group:nth-child(2) { transition-delay: .16s; }
body.fp-site .mega.is-open .mega__group:nth-child(3) { transition-delay: .22s; }
body.fp-site .mega.is-open .mega__visual { transition-delay: .18s; }
body.fp-site .mega.is-open .mega__foot   { transition-delay: .28s; }

/* The page behind de-emphasises while a panel is open */
body.fp-site .mega-scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-masthead) - 1);
  background: rgba(10, 10, 12, .5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .5s var(--e-out);
}
body.fp-site .mega-scrim[hidden] { display: none; }
body.fp-site .mega-scrim.is-on { opacity: 1; }

@media (max-width: 1180px) {
  body.fp-site .mega__inner { grid-template-columns: 1fr; }
  body.fp-site .mega__visual { display: none; }
}

/* --------------------------------------------------------------------------
   Menu button — two rules that fold into a cross
   -------------------------------------------------------------------------- */

body.fp-site .menu-btn {
  display: none; flex: none;
  width: 46px; height: 46px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--titanium); border-radius: 3px;
  color: var(--paper); cursor: pointer;
  transition: border-color .4s var(--e-out);
}
body.fp-site .menu-btn:hover { border-color: var(--blue-lift); }
body.fp-site .menu-btn__glyph { position: relative; display: block; width: 18px; height: 10px; }
body.fp-site .menu-btn__glyph i {
  position: absolute; left: 0; display: block;
  width: 100%; height: 1px; background: currentColor;
  transition: transform .45s var(--e-out), width .45s var(--e-out);
}
body.fp-site .menu-btn__glyph i:first-child { top: 0; }
body.fp-site .menu-btn__glyph i:last-child  { bottom: 0; width: 62%; }
body.fp-site .menu-btn:hover .menu-btn__glyph i:last-child { width: 100%; }
body.fp-site .menu-btn[aria-expanded='true'] .menu-btn__glyph i:first-child { transform: translateY(4.5px) rotate(45deg); }
body.fp-site .menu-btn[aria-expanded='true'] .menu-btn__glyph i:last-child  { width: 100%; transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  body.fp-site .nav, body.fp-site .nav-cta { display: none; }
  body.fp-site .menu-btn { display: inline-flex; }
  body.fp-site .masthead__inner { justify-content: space-between; }
  body.fp-site .mega { display: none !important; }
}

/* --------------------------------------------------------------------------
   Full-screen mobile menu
   -------------------------------------------------------------------------- */

body.fp-site .menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  --bg: var(--void); --fg: var(--paper); --fg-2: var(--silver);
  --rule: var(--titanium); --focus: var(--silver-hi);
  --signal: var(--blue-lift); --signal-ink: var(--blue-text);
  display: flex; align-items: stretch;
  background: var(--void);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--e-out);
  overflow-y: auto;
}
body.fp-site .menu[hidden] { display: none; }
body.fp-site .menu.is-open { clip-path: inset(0 0 0 0); }
body.fp-site .menu__inner {
  display: flex; flex-direction: column;
  width: 100%;
  /* Clears the bar at its resting height; tightened elsewhere so the brand
     stats stay above the fold on a 812px phone rather than needing a scroll. */
  padding: calc(104px + .5rem) var(--gutter) 1.5rem;
}
/* Architectural grid behind the menu */
body.fp-site .menu__inner::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, var(--hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
  background-size: 90px 90px;
  -webkit-mask-image: radial-gradient(120% 80% at 70% 10%, #000 5%, transparent 70%);
          mask-image: radial-gradient(120% 80% at 70% 10%, #000 5%, transparent 70%);
}
body.fp-site .menu__head { margin-bottom: 1.4rem; }
body.fp-site .menu__mark { width: 132px; height: auto; margin-bottom: 1.15rem; }
body.fp-site .menu__label { color: var(--silver-quiet); }

body.fp-site .menu__list { border-top: 1px solid var(--titanium); }
body.fp-site .menu__list li { overflow: hidden; border-bottom: 1px solid var(--titanium); }
body.fp-site .menu__list a {
  position: relative;
  display: flex; align-items: baseline; gap: 1.1rem;
  padding: .85rem 0;
  color: var(--paper);
  transform: translateY(105%);
  transition: transform .65s var(--e-out);
}
body.fp-site .menu.is-open .menu__list a { transform: translateY(0); }
body.fp-site .menu.is-open .menu__list li:nth-child(1) a { transition-delay: .10s; }
body.fp-site .menu.is-open .menu__list li:nth-child(2) a { transition-delay: .16s; }
body.fp-site .menu.is-open .menu__list li:nth-child(3) a { transition-delay: .22s; }
body.fp-site .menu.is-open .menu__list li:nth-child(4) a { transition-delay: .28s; }
body.fp-site .menu.is-open .menu__list li:nth-child(5) a { transition-delay: .34s; }
body.fp-site .menu.is-open .menu__list li:nth-child(6) a { transition-delay: .40s; }
body.fp-site .menu__list i {
  font-family: 'Plex Mono', monospace; font-style: normal;
  font-size: .625rem; letter-spacing: .1em; color: var(--blue-text);
  flex: none;
}
body.fp-site .menu__list span {
  font-family: var(--font); font-size: clamp(1.6rem, 7.4vw, 2.6rem); font-weight: 600; letter-spacing: -.035em;
}
body.fp-site .menu__list a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--blue-lift);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--e-out);
}
body.fp-site .menu__list a:hover::after, body.fp-site .menu__list a:focus-visible::after { transform: scaleX(1); }

body.fp-site .menu__stats {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  margin-top: auto; padding-top: 1.6rem;
}
body.fp-site .menu__stats b {
  display: block;
  font-family: var(--font);
  font-size: 1.6rem; font-weight: 600; letter-spacing: -.035em; color: var(--paper);
}
body.fp-site .menu__stats sup { color: var(--blue-text); font-size: .5em; vertical-align: super; }
body.fp-site .menu__stats span { color: var(--silver-quiet); }

body.fp-site .menu__foot {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--titanium);
  font-size: .875rem; color: var(--silver);
}
body.fp-site .menu__foot a:hover { color: var(--paper); }
/* --------------------------------------------------------------------------
   Loader
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   ENTRANCE — the first five seconds

   Darkness, then a single architectural axis, then one blue point, then the
   grid, then the logo resolving out of soft focus. Total ~1.5s, and the page
   underneath is already interactive when the curtain lifts.
   -------------------------------------------------------------------------- */

body.fp-site .loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: grid; place-content: center;
  background: var(--void);
  transition: clip-path 1s var(--e-out);
  clip-path: inset(0 0 0 0);
  overflow: hidden;
}
body.fp-site .loader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }

/* 01 — a single vertical axis draws from the centre */
body.fp-site .loader__axis {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; margin-left: -.5px;
  background: linear-gradient(180deg, transparent, var(--titanium) 22%, var(--titanium) 78%, transparent);
  transform: scaleY(0);
  animation: axis-draw .7s var(--e-out) forwards;
}
@keyframes axis-draw { to { transform: scaleY(1); } }

/* 02 — one blue point activates on it */
body.fp-site .loader__pt {
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: var(--blue-lift);
  opacity: 0;
  animation: pt-on .5s var(--e-out) .34s forwards;
}
@keyframes pt-on {
  0%   { opacity: 0; transform: scale(.3); box-shadow: 0 0 0 0 var(--blue-glow); }
  60%  { opacity: 1; transform: scale(1);  box-shadow: 0 0 0 12px rgba(59,130,246,0); }
  100% { opacity: 1; transform: scale(1);  box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}

/* 03 — the architecture establishes behind it */
body.fp-site .loader__grid {
  position: absolute; inset: -60px;
  background-image:
    linear-gradient(to right, var(--hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
  background-size: 110px 110px;
  -webkit-mask-image: radial-gradient(80% 65% at 50% 50%, #000 5%, transparent 74%);
          mask-image: radial-gradient(80% 65% at 50% 50%, #000 5%, transparent 74%);
  opacity: 0;
  animation: loader-grid 1.2s var(--e-out) .42s forwards;
}
@keyframes loader-grid {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: .75; transform: scale(1); }
}

body.fp-site .loader__stage { position: relative; display: grid; justify-items: center; gap: 1.4rem; }

/* 04 — the logo resolves rather than fades */
body.fp-site .loader__logo {
  width: clamp(150px, 20vw, 230px); height: auto;
  opacity: 0;
  filter: blur(7px);
  transform: translateY(9px) scale(.985);
  animation: loader-logo 1.15s var(--e-out) .58s forwards;
}
@keyframes loader-logo {
  0%   { opacity: 0; filter: blur(7px); transform: translateY(9px) scale(.985); }
  55%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0);   transform: translateY(0) scale(1); }
}

/* 05 — a First Porter blue rule draws beneath the mark */
body.fp-site .loader__rule {
  display: block; width: clamp(150px, 20vw, 230px); height: 1px;
  background: var(--titanium); overflow: hidden;
}
body.fp-site .loader__rule i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-lift));
  transform: scaleX(0); transform-origin: left;
  animation: rule-fill .95s var(--e-io) .86s forwards;
}
@keyframes rule-fill { to { transform: scaleX(1); } }

body.fp-site .loader__meta {
  color: var(--silver-quiet);
  opacity: 0;
  animation: fade-up .8s var(--e-out) 1.02s forwards;
}

body.fp-site.is-loading { overflow: hidden; }

/* --------------------------------------------------------------------------
   Cursor
   -------------------------------------------------------------------------- */

body.fp-site .cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  body.fp-site .cursor {
    position: fixed; top: 0; left: 0; z-index: var(--z-cursor);
    display: grid; place-items: center;
    pointer-events: none;
    mix-blend-mode: difference;
    will-change: transform;
  }
  body.fp-site .cursor__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--paper);
    transition: width .4s var(--e-out), height .4s var(--e-out), opacity .3s;
  }
  body.fp-site .cursor__label {
    position: absolute;
    font-family: 'Plex Mono', monospace; font-size: .625rem;
    letter-spacing: .12em; text-transform: uppercase; color: var(--paper);
    opacity: 0; transform: scale(.7);
    transition: opacity .3s, transform .4s var(--e-out);
    white-space: nowrap;
  }
  body.fp-site .cursor.is-active .cursor__dot { width: 62px; height: 62px; opacity: .18; }
  body.fp-site .cursor.is-active .cursor__label { opacity: 1; transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

body.fp-site .hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
  background: var(--void);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  /* The hero is a dark surface and has to declare it, or shared components
     (outline buttons, rules, focus rings) inherit the light-page defaults. */
  --bg: var(--void); --fg: var(--paper); --fg-2: var(--silver);
  --rule: var(--edge); --focus: var(--silver-hi); --signal: var(--blue-lift); --signal-ink: var(--blue-text);
}
body.fp-site .hero__media { position: absolute; inset: 0; z-index: -3; }
body.fp-site .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12);
  will-change: transform;
  /* Graded rather than merely dimmed: strip the colour, hold the structure,
     and let the blue-black ground show through the midtones. */
  filter: grayscale(1) contrast(1.22) brightness(.46);
}
body.fp-site .hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(7,8,16,.92) 0%, rgba(7,8,16,.52) 38%, rgba(7,8,16,.97) 94%),
    linear-gradient(96deg, rgba(7,8,16,.9) 0%, rgba(7,8,16,.28) 58%, rgba(44,49,150,.16) 100%);
}
/* Technical grid + coordinate ticks over the architecture */
body.fp-site .hero__grid {
  position: absolute; inset: 0; z-index: -1;
  opacity: .5;
  background-image:
    linear-gradient(to right, var(--hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
  background-size: clamp(80px, 8vw, 140px) clamp(80px, 8vw, 140px);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 10%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 70% 30%, #000 10%, transparent 72%);
}
body.fp-site .hero__inner { position: relative; width: 100%; }

body.fp-site .hero__eyebrow {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: clamp(1.25rem, 3vh, 2.25rem);
  color: var(--silver);
}
body.fp-site .hero__eyebrow::before {
  content: ''; width: clamp(28px, 5vw, 64px); height: 1px; background: var(--silver);
  transform: scaleX(0); transform-origin: left;
  animation: rule-fill .9s var(--e-out) .1s forwards;
}
body.fp-site .hero h1 { max-width: 16ch; }
body.fp-site .hero h1 .ln { display: block; overflow: hidden; }
body.fp-site .hero h1 .ln > span { display: block; }
body.fp-site .hero__dim { color: var(--silver); }

body.fp-site .hero__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 2rem 3rem;
  /* The display headline runs to ~120px, so 45px beneath it read as a
     collision. Scaled off width, not viewport height, so it holds on short
     laptop screens where 5vh collapsed. */
  margin-top: clamp(2.75rem, 5.5vw, 6rem);
}
/* Wide enough that the two calls to action sit on one line at desktop. */
body.fp-site .hero__pitch { max-width: 46ch; min-width: min(100%, 33rem); }
body.fp-site .hero__foot .lede { color: rgba(244, 244, 246, .82); max-width: 42ch; }
body.fp-site .hero__foot .btn-row { margin-top: clamp(1.5rem, 3vh, 2.25rem); }

/* A running index of the page — states up front that this is a structured
   argument, not a scroll. */
body.fp-site .hero__index { display: grid; gap: .5rem; }
body.fp-site .hero__index a {
  display: flex; align-items: baseline; gap: .9rem;
  color: var(--silver-quiet);
  transition: color .35s var(--e-out);
}
body.fp-site .hero__index i { font-style: normal; }
body.fp-site .hero__index span { position: relative; }
body.fp-site .hero__index span::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--e-out);
}
body.fp-site .hero__index a:hover { color: var(--paper); }
body.fp-site .hero__index a:hover span::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 900px) { body.fp-site .hero__index { display: none; } }

body.fp-site .hero__ticker {
  /* Grid rather than flex so the three readouts reflow to two columns on a
     phone instead of crushing the third into two lines. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair);
  margin-top: clamp(2rem, 5vh, 3rem);
}
body.fp-site .hero__ticker div { display: flex; flex-direction: column; gap: .3rem; }
body.fp-site .hero__ticker b {
  font-size: clamp(1.1rem, 1.8vw, 1.6rem); font-weight: 500;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
body.fp-site .hero__ticker span { color: var(--silver-quiet); }

body.fp-site .scroll-cue {
  position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 6vh, 5rem);
  display: flex; align-items: center; gap: .7rem;
  color: var(--silver);
}
body.fp-site .scroll-cue i {
  display: block; width: 1px; height: 44px; background: var(--hair);
  position: relative; overflow: hidden;
}
body.fp-site .scroll-cue i::after {
  content: ''; position: absolute; inset: 0; background: var(--silver-hi);
  animation: cue 2.4s var(--e-io) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@media (max-width: 780px) { body.fp-site .scroll-cue { display: none; } }

/* --------------------------------------------------------------------------
   Statement — Act I
   -------------------------------------------------------------------------- */

body.fp-site .statement__lead {
  font-size: clamp(1.6rem, 3.4vw, 3.1rem);
  font-weight: 400; line-height: 1.16; letter-spacing: -.034em;
  max-width: 22ch;
}
body.fp-site .statement__lead em { font-style: normal; color: var(--fg-2); }
/* Ledger — the three concerns as ruled entries rather than boxed columns, so
   Act I reads as a document rather than a feature grid. */
body.fp-site .ledger {
  margin-top: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--rule);
}
body.fp-site .ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.05fr) 8rem;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.4vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
}
body.fp-site .ledger__row > i {
  font-family: 'Plex Mono', monospace; font-style: normal;
  font-size: .6875rem; color: var(--fg-2); padding-top: .55rem;
}
body.fp-site .ledger__row h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.85rem); font-weight: 500; letter-spacing: -.03em;
  transition: transform .55s var(--e-out);
}
body.fp-site .ledger__row p { font-size: .9375rem; line-height: 1.62; color: var(--fg-2); }
body.fp-site .ledger__tag { color: var(--fg-2); text-align: right; padding-top: .55rem; }
body.fp-site .ledger__row::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--carbon);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--e-out);
}
body.fp-site .ledger__row:hover h3 { transform: translateX(8px); }
body.fp-site .ledger__row:hover::after { transform: scaleX(1); }

@media (max-width: 900px) {
  body.fp-site .ledger__row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  body.fp-site .ledger__row p { grid-column: 2; }
  body.fp-site .ledger__tag { grid-column: 2; text-align: left; padding-top: 0; }
}

/* Full-bleed plate between acts */
body.fp-site .plate {
  position: relative;
  height: clamp(320px, 62vh, 620px);
  background: var(--void);
  overflow: hidden;
  isolation: isolate;
}
body.fp-site .plate__media { position: absolute; inset: -12% 0; z-index: -2; }
body.fp-site .plate__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.2) brightness(.5);
  will-change: transform;
}
body.fp-site .plate::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,8,16,.55), rgba(7,8,16,.88));
}
body.fp-site .plate__caption {
  position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 4vh, 3rem);
  color: var(--silver);
}
body.fp-site .statement__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
body.fp-site .statement__grid h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.02em; margin-bottom: .7rem; }
body.fp-site .statement__grid p { font-size: .9375rem; color: var(--fg-2); line-height: 1.6; }
body.fp-site .statement__grid .label { margin-bottom: 1.4rem; color: var(--silver-dim); }

/* --------------------------------------------------------------------------
   Proof — the $5B moment
   -------------------------------------------------------------------------- */

body.fp-site .proof { position: relative; overflow: hidden; }
body.fp-site .proof__figure { position: relative; }
body.fp-site .proof__figure .figure-hero { color: var(--paper); }
body.fp-site .proof__unit { color: var(--silver); }
body.fp-site .proof__caption {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair);
}
body.fp-site .proof__caption p { max-width: 44ch; color: var(--silver); font-size: .9375rem; }

body.fp-site .metrics {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--hair);
  border: 1px solid var(--hair);
}
body.fp-site .metric { background: var(--void); padding: clamp(1.5rem, 3vw, 2.4rem); }
body.fp-site .metric__val {
  display: block;
  font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 400;
  letter-spacing: -.045em; line-height: 1; color: var(--paper);
  font-variant-numeric: tabular-nums;
}
body.fp-site .metric__val sup { font-size: .42em; vertical-align: super; letter-spacing: 0; }
body.fp-site .metric__key { display: block; margin-top: .9rem; color: var(--silver); }
body.fp-site .metric p { margin-top: .8rem; font-size: .875rem; line-height: 1.55; color: var(--silver-quiet); }

/* --------------------------------------------------------------------------
   Approach — pinned narrative
   -------------------------------------------------------------------------- */

body.fp-site .approach { position: relative; }
body.fp-site .approach__stage {
  position: sticky; top: 0;
  min-height: 100svh;
  display: grid; align-content: center;
  padding-block: clamp(5rem, 12vh, 9rem);
  overflow: hidden;
}
body.fp-site .approach__track > .approach__step { min-height: 68svh; }

body.fp-site .step-head { display: flex; align-items: baseline; gap: clamp(1rem, 2.5vw, 2rem); }
body.fp-site .step-head i {
  font-family: 'Plex Mono', monospace; font-style: normal;
  font-size: clamp(.8rem, 1.1vw, 1rem); color: var(--silver-quiet);
}
body.fp-site .step-head h3 {
  font-size: clamp(2.2rem, 6vw, 5.4rem); font-weight: 500;
  letter-spacing: -.045em; line-height: .95;
}
body.fp-site .step-head h3 + .lede, body.fp-site .approach__text .lede { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

body.fp-site .step-terms { display: grid; gap: .5rem; align-content: start; }
body.fp-site .step-terms li {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1rem;
  border: 1px solid var(--hair);
  border-radius: 2px;
  font-family: 'Plex Mono', monospace; font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--silver);
  transition: opacity .6s var(--e-out), transform .6s var(--e-out), border-color .6s, color .6s;
}
body.fp-site .step-terms li::before {
  content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--silver-dim);
}
body.fp-site .step-terms li:last-child { color: var(--paper); border-color: rgba(154,161,180,.45); }
body.fp-site .step-terms li:last-child::before { background: var(--blue-lift); }

body.fp-site .js .step-terms li { opacity: 0; transform: translateY(12px); }
body.fp-site .js .approach__panel.is-live .step-terms li { opacity: 1; transform: none; }
body.fp-site .approach__panel.is-live .step-terms li:nth-child(1) { transition-delay: .10s; }
body.fp-site .approach__panel.is-live .step-terms li:nth-child(2) { transition-delay: .16s; }
body.fp-site .approach__panel.is-live .step-terms li:nth-child(3) { transition-delay: .22s; }
body.fp-site .approach__panel.is-live .step-terms li:nth-child(4) { transition-delay: .28s; }
body.fp-site .approach__panel.is-live .step-terms li:nth-child(5) { transition-delay: .34s; }
body.fp-site .approach__panel.is-live .step-terms li:nth-child(6) { transition-delay: .40s; }

body.fp-site .approach__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .75fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  transition: opacity .55s var(--e-out), visibility .55s;
}
body.fp-site .js .approach__panel { opacity: 0; visibility: hidden; }
body.fp-site .js .approach__panel.is-live { opacity: 1; visibility: visible; }
body.fp-site .approach__panels { display: grid; }
body.fp-site .approach__panels > * { grid-area: 1 / 1; }
@media (max-width: 860px) {
  body.fp-site .approach__panel { grid-template-columns: 1fr; gap: 2rem; }
  body.fp-site .step-terms { grid-template-columns: 1fr 1fr; }
}

body.fp-site .approach__progress {
  position: absolute; left: var(--gutter); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .75rem;
}
body.fp-site .approach__progress b {
  display: block; width: 1px; height: 42px;
  background: var(--hair); position: relative; overflow: hidden;
}
body.fp-site .approach__progress b::after {
  content: ''; position: absolute; inset: 0; background: var(--silver-hi);
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--e-out);
}
body.fp-site .approach__progress b.is-on::after { transform: scaleY(1); }
@media (max-width: 900px) { body.fp-site .approach__progress { display: none; } }

/* --------------------------------------------------------------------------
   Services — interactive index
   -------------------------------------------------------------------------- */

body.fp-site .svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 1000px) { body.fp-site .svc { grid-template-columns: 1fr; } }

body.fp-site .svc__list { border-top: 1px solid var(--rule); }
body.fp-site .svc__item { border-bottom: 1px solid var(--rule); }
body.fp-site .svc__btn {
  width: 100%; display: flex; align-items: center; gap: 1.5rem;
  padding: clamp(1.15rem, 2.2vw, 1.9rem) 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; color: var(--fg); text-align: left;
}
body.fp-site .svc__btn i {
  font-family: 'Plex Mono', monospace; font-style: normal;
  font-size: .6875rem; color: var(--silver-dim); flex: none;
}
body.fp-site .svc__btn h3 {
  flex: 1;
  font-size: clamp(1.25rem, 2.5vw, 2.1rem); font-weight: 500; letter-spacing: -.035em;
  transition: transform .55s var(--e-out), opacity .4s;
}
body.fp-site .svc__btn sup { font-size: .4em; vertical-align: super; letter-spacing: 0; }
body.fp-site .svc__btn .svc__mark {
  flex: none; width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%;
  font-size: .75rem; color: var(--fg-2);
  transition: background-color .45s var(--e-out), color .45s, border-color .45s, transform .55s var(--e-out);
}
body.fp-site .svc__item.is-on .svc__btn h3 { transform: translateX(10px); }
body.fp-site .svc__item.is-on .svc__btn .svc__mark { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: rotate(45deg); }
body.fp-site .svc__item:not(.is-on):hover .svc__btn h3 { transform: translateX(6px); }

body.fp-site .svc__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--e-out);
}
body.fp-site .svc__item.is-on .svc__body { grid-template-rows: 1fr; }
body.fp-site .svc__body > div { overflow: hidden; }
body.fp-site .svc__body p { padding-bottom: 1.5rem; font-size: .9375rem; color: var(--fg-2); max-width: 52ch; }
body.fp-site .svc__body .tlink { margin-bottom: 1.75rem; }

/* Visual half — an analytical flow diagram that swaps per service */
body.fp-site .svc__stage {
  --fg: var(--paper); --fg-2: var(--silver); --rule: var(--edge);
  --signal: var(--blue-lift); --signal-ink: var(--blue-text);
  position: sticky; top: calc(var(--nav-h) + 2rem);
  align-self: start;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  border: 1px solid var(--rule);
  background: var(--void);
  overflow: hidden;
  display: grid;
}
body.fp-site .svc__stage > * { grid-area: 1 / 1; }
body.fp-site .svc__scene {
  position: relative;
  transition: opacity .6s var(--e-out), visibility .6s;
}
body.fp-site .js .svc__scene { opacity: 0; visibility: hidden; }
body.fp-site .svc__scene.is-on { opacity: 1; visibility: visible; }
body.fp-site .svc__scene img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .32; filter: grayscale(1) contrast(1.15);
  transform: scale(1.06); transition: transform 1.4s var(--e-out);
}
body.fp-site .svc__scene.is-on img { transform: scale(1); }
body.fp-site .svc__flow {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: .55rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
body.fp-site .svc__flow li {
  display: flex; align-items: center; gap: .8rem;
  font-family: 'Plex Mono', monospace; font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--silver);
  transition: opacity .5s var(--e-out), transform .5s var(--e-out);
}
body.fp-site .js .svc__flow li { opacity: 0; transform: translateX(-8px); }
body.fp-site .svc__scene.is-on .svc__flow li { opacity: 1; transform: none; }
body.fp-site .svc__scene.is-on .svc__flow li:nth-child(1) { transition-delay: .12s; }
body.fp-site .svc__scene.is-on .svc__flow li:nth-child(2) { transition-delay: .19s; }
body.fp-site .svc__scene.is-on .svc__flow li:nth-child(3) { transition-delay: .26s; }
body.fp-site .svc__scene.is-on .svc__flow li:nth-child(4) { transition-delay: .33s; }
body.fp-site .svc__scene.is-on .svc__flow li:nth-child(5) { transition-delay: .40s; }
body.fp-site .svc__flow li b {
  flex: none; width: 22px; height: 1px; background: var(--silver-dim);
}
body.fp-site .svc__flow li:last-child { color: var(--paper); }
body.fp-site .svc__flow li:last-child b { background: var(--silver-hi); }

/* --------------------------------------------------------------------------
   Proprietary intelligence — DOME / ARCH
   -------------------------------------------------------------------------- */

body.fp-site .tools { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (min-width: 900px) { body.fp-site .tools { grid-template-columns: 1fr 1fr; } }

body.fp-site .tool {
  position: relative;
  background: var(--ink);
  padding: clamp(1.75rem, 3.4vw, 3rem);
  display: flex; flex-direction: column; gap: 1.5rem;
  overflow: hidden;
  transition: background-color .6s var(--e-out);
}
body.fp-site .tool:hover { background: var(--graphite); }
body.fp-site .tool__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
body.fp-site .tool__name { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 500; letter-spacing: -.04em; color: var(--paper); }
body.fp-site .tool__name sup { font-size: .34em; vertical-align: super; letter-spacing: 0; color: var(--silver); }
body.fp-site .tool__full { color: var(--silver); font-size: .875rem; letter-spacing: -.01em; }
body.fp-site .tool p { font-size: .9375rem; line-height: 1.6; color: var(--silver); max-width: 46ch; }
body.fp-site .tool__viz {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hair);
  background: var(--void);
  overflow: hidden;
}
body.fp-site .tool__viz svg { width: 100%; height: 100%; }
body.fp-site .tool__chain {
  display: flex; flex-wrap: wrap; gap: .45rem;
  padding-top: 1.25rem; border-top: 1px solid var(--hair);
  margin-top: auto;
}
body.fp-site .tool__chain li {
  font-family: 'Plex Mono', monospace; font-size: .625rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--silver-quiet);
}
body.fp-site .tool__chain li:not(:last-child)::after { content: ' →'; color: var(--silver-quiet); }
body.fp-site .tool__chain li:last-child { color: var(--silver-hi); }

/* Animated viz primitives */
body.fp-site .viz-line { fill: none; stroke: var(--silver-dim); stroke-width: 1; }
body.fp-site .viz-line--hi { stroke: var(--silver-hi); }
body.fp-site .viz-line--blue { stroke: var(--blue-lift); }
body.fp-site .viz-grid { stroke: var(--hair); stroke-width: 1; }
body.fp-site .viz-dot { fill: var(--silver-hi); }
body.fp-site .viz-bar { fill: var(--silver-dim); transition: fill .5s; }
body.fp-site .tool:hover .viz-bar { fill: var(--blue-lift); }

body.fp-site .is-drawn .viz-draw {
  stroke-dasharray: var(--len, 800);
  stroke-dashoffset: var(--len, 800);
  animation: draw 1.8s var(--e-out) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
body.fp-site .is-drawn .viz-rise { transform-origin: bottom; animation: rise .9s var(--e-out) backwards; }
@keyframes rise { from { transform: scaleY(0); } }

/* --------------------------------------------------------------------------
   Pillars — why First Porter
   -------------------------------------------------------------------------- */

body.fp-site .pillars { border-top: 1px solid var(--rule); }
body.fp-site .pillar {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.4vw, 2.9rem);
  border-bottom: 1px solid var(--rule);
  transition: background-color .5s var(--e-out);
}
body.fp-site .pillar i {
  font-family: 'Plex Mono', monospace; font-style: normal;
  font-size: .6875rem; color: var(--fg-2); padding-top: .5rem;
}
body.fp-site .pillar h3 {
  font-size: clamp(1.35rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -.035em;
  transition: transform .55s var(--e-out);
}
body.fp-site .pillar:hover h3 { transform: translateX(8px); }
body.fp-site .pillar p { font-size: .9375rem; color: var(--fg-2); line-height: 1.6; }
body.fp-site .pillar__fig { display: block; margin-top: .5rem; font-size: .8125rem; color: var(--fg-2); }
@media (max-width: 820px) {
  body.fp-site .pillar { grid-template-columns: 2.5rem minmax(0, 1fr); }
  body.fp-site .pillar p { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Editorial split
   -------------------------------------------------------------------------- */

body.fp-site .split {
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: center;
}
body.fp-site .split__media { position: relative; overflow: hidden; }
body.fp-site .split__media img { width: 100%; will-change: transform; }
body.fp-site .split__media figcaption {
  position: absolute; left: 1rem; bottom: 1rem;
  font-family: 'Plex Mono', monospace; font-size: .625rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper); mix-blend-mode: difference;
}

/* Frame that wipes open on reveal */
body.fp-site .wipe { position: relative; overflow: hidden; }
body.fp-site .wipe > * { transition: transform 1.4s var(--e-out); }
body.fp-site .js .wipe > * { transform: scale(1.14); }
body.fp-site .js .wipe::after {
  content: ''; position: absolute; inset: 0; background: var(--bg);
  transform-origin: bottom; transition: transform 1.1s var(--e-out);
}
body.fp-site .is-in .wipe > * { transform: scale(1); }
body.fp-site .is-in .wipe::after { transform: scaleY(0); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

body.fp-site .contact { display: grid; gap: clamp(2.5rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); }
@media (max-width: 940px) { body.fp-site .contact { grid-template-columns: 1fr; } }

body.fp-site .form { display: grid; gap: 1.6rem; }
body.fp-site .form__row { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
body.fp-site .field { position: relative; }
body.fp-site .field label {
  display: block; margin-bottom: .55rem;
  font-family: 'Plex Mono', monospace; font-size: .625rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2);
}
body.fp-site .field input, body.fp-site .field textarea {
  width: 100%; padding: .85rem 0;
  border: 0; border-bottom: 1px solid var(--silver-dim);
  border-radius: 0; background: transparent;
  font-family: inherit; font-size: 1.0625rem; color: var(--fg);
  transition: border-color .4s var(--e-out);
}
body.fp-site .field textarea { min-height: 120px; resize: vertical; }
body.fp-site .field input:focus, body.fp-site .field textarea:focus {
  outline: none; border-bottom-color: var(--fg);
}
body.fp-site .field input:focus-visible, body.fp-site .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
body.fp-site .field .req { color: var(--silver-dim); }
body.fp-site .field-error { display: block; margin-top: .5rem; font-size: .8125rem; color: #d05a4b; }
body.fp-site .field input[aria-invalid='true'], body.fp-site .field textarea[aria-invalid='true'] { border-bottom-color: #d05a4b; }

body.fp-site .form-status { padding: 1rem 1.25rem; font-size: .9375rem; }
body.fp-site .form-status[data-state='ok']  { background: rgba(88, 96, 232, .12); color: var(--fg); }
body.fp-site .form-status[data-state='err'] { background: rgba(208, 90, 75, .12); color: #b0402f; }
body.fp-site .form-status[hidden] { display: none; }

body.fp-site .contact-aside { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
body.fp-site .contact-aside dl { display: grid; gap: 1.6rem; margin: 1.5rem 0 0; }
body.fp-site .contact-aside dt { margin-bottom: .3rem; }
body.fp-site .contact-aside dd { margin: 0; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* The footer is a dark surface and must declare the dark token set, not just a
   background: shared components (.btn--outline, rules, focus rings) colour
   themselves from --fg/--rule and would otherwise inherit the light defaults. */
body.fp-site .footer {
  background: var(--void); color: var(--paper);
  --bg: var(--void); --fg: var(--paper); --fg-2: var(--silver);
  --rule: var(--edge); --focus: var(--silver-hi);
  --signal: var(--blue-lift); --signal-ink: var(--blue-text);
}
body.fp-site .footer__cta {
  padding-block: clamp(4.5rem, 11vw, 9rem);
  border-bottom: 1px solid var(--hair);
}
body.fp-site .footer__body { padding-block: clamp(3rem, 5vw, 4.5rem) 0; }
body.fp-site .footer__grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
body.fp-site .footer__brand img { width: 132px; margin-bottom: 1.4rem; }
body.fp-site .footer__brand p { font-size: .875rem; color: var(--silver-quiet); max-width: 34ch; line-height: 1.6; }
body.fp-site .footer__nav { margin-top: 1.4rem; display: grid; gap: .7rem; }
body.fp-site .footer__nav a, body.fp-site .footer__nav span { font-size: .875rem; color: var(--silver); transition: color .3s; }
body.fp-site .footer__nav a:hover { color: var(--paper); }
body.fp-site .footer__base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hair);
  font-size: .75rem; color: var(--silver-quiet);
}

/* --------------------------------------------------------------------------
   Interior page header
   -------------------------------------------------------------------------- */

body.fp-site .page-head {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(4.5rem, 11vh, 9rem));
  padding-bottom: clamp(3rem, 7vh, 6rem);
  background: var(--void); color: var(--paper);
  overflow: hidden; isolation: isolate;
  --bg: var(--void); --fg: var(--paper); --fg-2: var(--silver);
  --rule: var(--edge); --focus: var(--silver-hi); --signal: var(--blue-lift); --signal-ink: var(--blue-text);
}
body.fp-site .page-head__media { position: absolute; inset: 0; z-index: -2; }
body.fp-site .page-head__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.22) brightness(.44);
}
body.fp-site .page-head::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,8,16,.72), rgba(7,8,16,.96));
}
body.fp-site .page-head h1 { max-width: 18ch; }
body.fp-site .page-head .lede { margin-top: clamp(1.25rem, 2.5vw, 2rem); color: rgba(250,249,247,.74); }

body.fp-site .crumb { display: flex; gap: .6rem; margin-bottom: 2rem; color: var(--silver); }
body.fp-site .crumb a { color: var(--silver); }
body.fp-site .crumb a:hover { color: var(--paper); }

/* --------------------------------------------------------------------------
   Capability rows (services, DOME, ARCH detail)
   -------------------------------------------------------------------------- */

body.fp-site .cap { border-top: 1px solid var(--rule); }
body.fp-site .cap__row {
  display: grid; grid-template-columns: 5rem minmax(0, .95fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
body.fp-site .cap__row > i {
  font-family: 'Plex Mono', monospace; font-style: normal;
  font-size: .6875rem; color: var(--silver-dim); padding-top: .45rem;
}
body.fp-site .cap__row h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.035em; }
body.fp-site .cap__row h3 sup { font-size: .4em; vertical-align: super; letter-spacing: 0; }
body.fp-site .cap__row p { margin-top: 1rem; font-size: .9375rem; color: var(--fg-2); line-height: 1.62; }
body.fp-site .cap__list { margin-top: 1.5rem; display: grid; gap: .55rem; }
body.fp-site .cap__list li {
  display: flex; gap: .8rem; align-items: baseline;
  font-size: .875rem; color: var(--fg-2);
}
body.fp-site .cap__list li::before {
  content: ''; flex: none; width: 14px; height: 1px;
  background: var(--silver-dim); transform: translateY(-.35em);
}
body.fp-site .cap__shot { border: 1px solid var(--rule); background: var(--void); overflow: hidden; }
body.fp-site .cap__shot img { width: 100%; }
@media (max-width: 940px) {
  body.fp-site .cap__row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  body.fp-site .cap__shot { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Reveals
   -------------------------------------------------------------------------- */

/* Authored visible; hidden only when the script has confirmed it is running. */
body.fp-site .js [data-reveal] { opacity: 0; transform: translateY(22px); }
body.fp-site [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--e-out), transform .9s var(--e-out);
}
body.fp-site [data-reveal-delay='1'].is-in { transition-delay: .08s; }
body.fp-site [data-reveal-delay='2'].is-in { transition-delay: .16s; }
body.fp-site [data-reveal-delay='3'].is-in { transition-delay: .24s; }
body.fp-site [data-reveal-delay='4'].is-in { transition-delay: .32s; }

body.fp-site .reveal-lines .ln { display: block; overflow: hidden; }
body.fp-site .reveal-lines .ln > span { display: block; transition: transform 1s var(--e-out); }
body.fp-site .js .reveal-lines .ln > span { transform: translateY(105%); }
body.fp-site .reveal-lines.is-in .ln > span { transform: translateY(0); }
body.fp-site .reveal-lines.is-in .ln:nth-child(2) > span { transition-delay: .08s; }
body.fp-site .reveal-lines.is-in .ln:nth-child(3) > span { transition-delay: .16s; }

/* --------------------------------------------------------------------------
   Reduced motion — strip choreography, keep the design
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.fp-site *, body.fp-site *::before, body.fp-site *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  body.fp-site [data-reveal] { opacity: 1; transform: none; }
  body.fp-site .reveal-lines .ln > span { transform: none; }
  body.fp-site .loader { display: none; }
  body.fp-site .hero__media img { transform: scale(1); }
  body.fp-site .wipe > * { transform: none; }
  body.fp-site .wipe::after { display: none; }
  body.fp-site .approach__stage { position: relative; min-height: 0; }
  body.fp-site .approach__track > .approach__step { min-height: 0; }
  body.fp-site .approach__panel { opacity: 1; }
  body.fp-site .approach__panels { display: block; }
  body.fp-site .step-terms li { opacity: 1; transform: none; }
  body.fp-site .svc__scene { position: relative; }
  body.fp-site .cursor { display: none !important; }
}

/* ==========================================================================
   REFINEMENT PASS
   Ambient motion, the blue signal system, and the connective tissue between
   sections. Everything here is transform/opacity only, and every ambient
   animation is paused when its section is off-screen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll progress — a hairline that fills as the story advances
   -------------------------------------------------------------------------- */

body.fp-site .progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-progress);
  height: 2px; pointer-events: none;
  background: transparent;
}
body.fp-site .progress__bar {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-lift) 100%);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Ambient architectural grid — drifts slowly, pauses when out of view
   -------------------------------------------------------------------------- */

body.fp-site .ambient {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  z-index: 0;
}
body.fp-site .ambient__grid {
  position: absolute; inset: -60px;
  background-image:
    linear-gradient(to right, var(--hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: .45;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 40%, #000 5%, transparent 70%);
          mask-image: radial-gradient(130% 100% at 50% 40%, #000 5%, transparent 70%);
  animation: grid-drift 46s linear infinite;
  animation-play-state: paused;
}
body.fp-site .is-onscreen .ambient__grid { animation-play-state: running; }
@keyframes grid-drift { to { transform: translate3d(120px, 120px, 0); } }

/* Data points that surface and fade — the sense of a system observing */
body.fp-site .ambient__node {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--blue-lift);
  box-shadow: 0 0 0 3px var(--blue-glow);
  opacity: 0;
  animation: node-pulse 9s var(--e-io) infinite;
  animation-play-state: paused;
}
body.fp-site .is-onscreen .ambient__node { animation-play-state: running; }
@keyframes node-pulse {
  0%, 100% { opacity: 0; transform: scale(.5); }
  12%      { opacity: .95; transform: scale(1); }
  40%      { opacity: .5;  transform: scale(1); }
  62%      { opacity: 0;   transform: scale(.7); }
}

/* Hero grid inherits the drift too */
body.fp-site .hero__grid { animation: grid-drift 60s linear infinite; animation-play-state: paused; }
body.fp-site .hero.is-onscreen .hero__grid { animation-play-state: running; }

/* --------------------------------------------------------------------------
   Hero refinements
   -------------------------------------------------------------------------- */

/* Staggered entrance: rule, eyebrow, each headline line, then the pitch. */
body.fp-site .js .hero__eyebrow { opacity: 0; animation: fade-up .9s var(--e-out) .15s forwards; }
body.fp-site .js .hero__pitch   { opacity: 0; animation: fade-up 1s var(--e-out) .62s forwards; }
body.fp-site .js .hero__index   { opacity: 0; animation: fade-up 1s var(--e-out) .78s forwards; }
body.fp-site .js .hero__ticker  { opacity: 0; animation: fade-up 1s var(--e-out) .7s forwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

body.fp-site .hero h1 .ln > span { animation: line-up 1.1s var(--e-out) backwards; }
body.fp-site .js .hero h1 .ln:nth-child(1) > span { animation-delay: .26s; }
body.fp-site .js .hero h1 .ln:nth-child(2) > span { animation-delay: .38s; }
@keyframes line-up { from { transform: translateY(105%); } to { transform: translateY(0); } }

/* Technical annotations pinned to the hero frame */
body.fp-site .hero__annot {
  position: absolute; z-index: 1;
  display: flex; align-items: center; gap: .6rem;
  color: var(--silver-quiet);
  opacity: 0;
  animation: fade-up 1.2s var(--e-out) 1s forwards;
}
body.fp-site .hero__annot::before {
  content: ''; width: 26px; height: 1px; background: var(--edge);
}
body.fp-site .hero__annot--tr { top: calc(var(--nav-h) + 2.5rem); right: var(--gutter); }
body.fp-site .hero__annot--tr::before { order: 2; }
@media (max-width: 1080px) { body.fp-site .hero__annot { display: none; } }

body.fp-site .hero__ticker b { color: var(--paper); }
body.fp-site .hero__ticker b sup { color: var(--signal-ink); }

/* --------------------------------------------------------------------------
   Section continuity — bands overlap rather than butt together
   -------------------------------------------------------------------------- */

body.fp-site .band--dark + .band--dark { padding-top: 0; }

/* A seam that carries the eye across the join */
body.fp-site .seam {
  position: relative; height: 0;
  display: flex; justify-content: center;
  z-index: 2;
}
body.fp-site .seam::before {
  content: ''; position: absolute; top: -1px;
  width: 1px; height: clamp(3rem, 7vh, 6rem);
  background: linear-gradient(180deg, var(--signal), transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.1s var(--e-out);
}
body.fp-site .seam.is-in::before { transform: scaleY(1); }

/* --------------------------------------------------------------------------
   Blue signal — statistics, labels, indicators
   -------------------------------------------------------------------------- */

body.fp-site .figure-hero { color: var(--paper); }
body.fp-site .proof__unit { color: var(--signal); }
body.fp-site .metric__val sup { color: var(--signal-ink); }
body.fp-site .metric { position: relative; transition: background-color .5s var(--e-out); }
body.fp-site .metric::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--e-out);
}
body.fp-site .metric.is-in::before { transform: scaleX(1); }
body.fp-site .metric:hover { background: var(--graphite); }

body.fp-site .stat__figure, body.fp-site .ledger__row > i { color: var(--signal); }

/* Active navigation indicator */
body.fp-site .nav__link[aria-current='page'] span::after { background: var(--signal); height: 2px; }
body.fp-site .nav__link span::after { background: var(--signal); }

/* Links grow a blue rule */
body.fp-site .tlink { color: var(--fg); }
body.fp-site .tlink::after { background: var(--signal); opacity: .35; transform: scaleX(1); }
body.fp-site .tlink:hover { color: var(--signal-ink); }
body.fp-site .tlink:hover::after { opacity: 1; }

/* Buttons: blue intensifies rather than merely swapping */
body.fp-site .btn--light::before,
body.fp-site .btn--dark::before { background: linear-gradient(100deg, var(--blue) 0%, var(--blue-lift) 100%); }
body.fp-site .btn--outline::before { background: linear-gradient(100deg, var(--blue) 0%, var(--blue-lift) 100%); }
body.fp-site .btn--outline:hover { color: #fff; border-color: var(--blue-lift); }
body.fp-site .btn:hover { border-color: var(--blue-lift); }

/* --------------------------------------------------------------------------
   Services — the environment responds
   -------------------------------------------------------------------------- */

body.fp-site .svc__item.is-on .svc__btn i { color: var(--signal-ink); }
body.fp-site .svc__item.is-on .svc__btn .svc__mark { background: var(--signal); border-color: var(--signal); color: #fff; }
body.fp-site .svc__item { position: relative; }
body.fp-site .svc__item::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--e-out);
}
body.fp-site .svc__item.is-on::after { transform: scaleX(1); }

/* Flow diagram: nodes connected by a line that draws through them */
body.fp-site .svc__flow { counter-reset: node; }
body.fp-site .svc__flow li { position: relative; padding-left: 0; }
body.fp-site .svc__flow li b {
  position: relative; flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: transparent; border: 1px solid var(--edge);
  transition: background-color .5s var(--e-out), border-color .5s var(--e-out);
}
body.fp-site .svc__scene.is-on .svc__flow li b { background: var(--blue-lift); border-color: var(--blue-lift); }
body.fp-site .svc__flow li:not(:last-child) b::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  width: 1px; height: calc(.55rem + 4px);
  background: var(--edge); transform: translateX(-50%) scaleY(0); transform-origin: top;
  transition: transform .5s var(--e-out);
}
body.fp-site .svc__scene.is-on .svc__flow li:not(:last-child) b::after { transform: translateX(-50%) scaleY(1); }
body.fp-site .svc__scene.is-on .svc__flow li:last-child { color: var(--paper); }
body.fp-site .svc__scene.is-on .svc__flow li:last-child b { box-shadow: 0 0 0 4px var(--blue-glow); }

body.fp-site .svc__stage { position: sticky; }
body.fp-site .svc__scene::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 20% 80%, var(--blue-glow), transparent 60%);
  opacity: 0; transition: opacity .8s var(--e-out);
}
body.fp-site .svc__scene.is-on::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Tools — the intelligence surface
   -------------------------------------------------------------------------- */

body.fp-site .tool { position: relative; }
body.fp-site .tool::after {
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-lift));
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--e-out);
}
body.fp-site .tool:hover::after { transform: scaleX(1); }
body.fp-site .tool__name sup { color: var(--signal-ink); }
body.fp-site .tool__chain li:last-child { color: var(--signal-ink); }
body.fp-site .viz-line--blue { stroke: var(--blue-lift); stroke-width: 1.5; }
body.fp-site .viz-dot { fill: var(--blue-lift); }
body.fp-site .tool:hover .viz-bar { fill: var(--blue-lift); }

/* A sweep that reads as live computation */
body.fp-site .tool__viz::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--blue-glow), transparent);
  transform: translateX(-100%);
  animation: sweep 7s var(--e-io) infinite;
  animation-play-state: paused;
  pointer-events: none;
}
body.fp-site .is-onscreen .tool__viz::after { animation-play-state: running; }
@keyframes sweep { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* --------------------------------------------------------------------------
   Cards, rows, plates — restrained hover intelligence
   -------------------------------------------------------------------------- */

body.fp-site .ledger__row::after { background: var(--signal); }
body.fp-site .pillar { position: relative; }
body.fp-site .pillar::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--e-out);
}
body.fp-site .pillar:hover::after { transform: scaleX(1); }
body.fp-site .pillar:hover i { color: var(--signal-ink); }

body.fp-site .cap__row { transition: background-color .5s var(--e-out); }
body.fp-site .cap__row > i { transition: color .4s var(--e-out); }
body.fp-site .cap__row:hover > i { color: var(--signal-ink); }
body.fp-site .cap__shot { position: relative; overflow: hidden; }
body.fp-site .cap__shot img { transition: transform 1.2s var(--e-out); }
body.fp-site .cap__row:hover .cap__shot img { transform: scale(1.03); }

body.fp-site .plate__caption p { color: var(--silver); }
body.fp-site .plate__caption p::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 28px; height: 1px; margin-right: .9rem;
  background: var(--blue-lift);
}

/* --------------------------------------------------------------------------
   Page transition — content lifts out and settles in
   -------------------------------------------------------------------------- */

body.fp-site .js body { opacity: 1; }
body.fp-site .js.is-leaving main,
body.fp-site .js.is-leaving .footer { opacity: 0; transform: translateY(-8px); transition: opacity .28s var(--e-io), transform .28s var(--e-io); }

/* --------------------------------------------------------------------------
   Cursor refinement
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  body.fp-site .cursor__dot { background: var(--paper); }
  body.fp-site .cursor.is-active .cursor__dot { width: 68px; height: 68px; opacity: .16; }
  body.fp-site .cursor.is-pressed .cursor__dot { transform: scale(.8); }
}

/* --------------------------------------------------------------------------
   Reduced motion — every ambient system stands down
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.fp-site .ambient__grid, body.fp-site .ambient__node, body.fp-site .hero__grid, body.fp-site .tool__viz::after { animation: none !important; }
  body.fp-site .ambient__node { opacity: .5; }
  body.fp-site .seam::before { transform: scaleY(1); }
  body.fp-site .js .hero__eyebrow, body.fp-site .js .hero__pitch, body.fp-site .js .hero__index, body.fp-site .js .hero__ticker { opacity: 1; animation: none; }
  body.fp-site .hero h1 .ln > span { animation: none; }
  body.fp-site .hero__annot { opacity: 1; animation: none; }
  body.fp-site .metric::before { transform: scaleX(1); }
  body.fp-site .js.is-leaving main, body.fp-site .js.is-leaving .footer { opacity: 1; transform: none; }
}

/* Readout — a dense technical strip that replaces dead space under the figure */
body.fp-site .readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--hair);
  border: 1px solid var(--hair);
}
body.fp-site .readout li {
  display: flex; align-items: center; gap: .7rem;
  padding: .95rem 1.1rem;
  background: var(--void);
  color: var(--silver-quiet);
  transition: color .4s var(--e-out), background-color .4s var(--e-out);
}
body.fp-site .readout li::before {
  content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--edge); transition: background-color .4s var(--e-out);
}
body.fp-site .readout li i { font-style: normal; }
body.fp-site .readout li:hover { color: var(--paper); background: var(--graphite); }
body.fp-site .readout li:hover::before { background: var(--blue-lift); }

/* Trademark on a display headline: superscript, a third of the size, so it
   marks the name without competing with it. */
body.fp-site .display .tm { font-size: .26em; vertical-align: super; letter-spacing: 0; font-weight: 500; }

/* ==========================================================================
   BUG-FIX PASS
   ========================================================================== */

/* The masthead retires while the closing CTA is on screen, so its frosted
   panel can never clip the headline beneath it. */
body.fp-site .masthead.is-docked {
  transform: translateY(-100%);
  pointer-events: none;
}

/* Frosted titanium navigation */
body.fp-site .masthead.is-solid {
  background: rgba(10, 10, 12, .72);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom-color: var(--titanium);
}

/* Footer must own its own stacking context so nothing beneath bleeds through */
body.fp-site .footer { position: relative; z-index: var(--z-raised); isolation: isolate; }
body.fp-site .footer__cta { position: relative; }

/* --------------------------------------------------------------------------
   Product screenshots — framed, crisp, and openable
   -------------------------------------------------------------------------- */

body.fp-site .cap__shot {
  position: relative;
  border: 1px solid var(--titanium);
  border-radius: 6px;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}
/* A window chrome bar, so a wide spreadsheet screenshot reads as software
   rather than as a stray image. */
body.fp-site .cap__shot::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 30px;
  background: var(--graphite);
  border-bottom: 1px solid var(--titanium);
  z-index: 1;
}
body.fp-site .cap__shot::after {
  content: '';
  position: absolute; top: 12px; left: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--edge);
  box-shadow: 12px 0 0 var(--edge), 24px 0 0 var(--edge);
  z-index: 2;
}
body.fp-site .cap__shot img {
  margin-top: 30px;
  image-rendering: -webkit-optimize-contrast;
}
body.fp-site .cap__shot--zoom { cursor: zoom-in; }
body.fp-site .cap__shot--zoom:hover img { transform: scale(1.02); }
body.fp-site .cap__shot__open {
  position: absolute; right: 8px; top: 6px; z-index: 3;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .25rem .5rem;
  background: transparent; border: 1px solid transparent; border-radius: 3px;
  font-family: 'Plex Mono', monospace; font-size: .5625rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--silver); cursor: zoom-in;
  transition: color .3s var(--e-out), border-color .3s var(--e-out);
}
body.fp-site .cap__shot__open:hover { color: var(--paper); border-color: var(--titanium); }

/* Lightbox */
body.fp-site .lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 10, 12, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Hidden via the `hidden` attribute (display:none), not visibility: an
     element mid-visibility-transition cannot take focus, which would strand
     keyboard users outside an open dialog. display flips synchronously. */
  opacity: 0;
  transition: opacity .35s var(--e-out);
}
body.fp-site .lightbox[hidden] { display: none; }
body.fp-site .lightbox.is-open { opacity: 1; }
body.fp-site .lightbox__frame {
  max-width: min(1500px, 96vw);
  max-height: 88vh;
  border: 1px solid var(--titanium);
  border-radius: 6px;
  background: var(--ink);
  overflow: auto;
  transform: scale(.98);
  transition: transform .4s var(--e-out);
}
body.fp-site .lightbox.is-open .lightbox__frame { transform: scale(1); }
body.fp-site .lightbox__frame img { max-width: none; width: auto; }
body.fp-site .lightbox__bar {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem;
  background: var(--graphite);
  border-bottom: 1px solid var(--titanium);
}
body.fp-site .lightbox__title {
  font-family: 'Plex Mono', monospace; font-size: .625rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--silver);
}
body.fp-site .lightbox__close {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .6rem;
  background: transparent; border: 1px solid var(--titanium); border-radius: 3px;
  font-family: 'Plex Mono', monospace; font-size: .625rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper); cursor: pointer;
}
body.fp-site .lightbox__close:hover { border-color: var(--blue-lift); color: var(--blue-text); }

/* --------------------------------------------------------------------------
   Glass panels — used sparingly, on dark surfaces only
   -------------------------------------------------------------------------- */

body.fp-site .tool, body.fp-site .metric, body.fp-site .readout li {
  border-color: var(--titanium);
}
body.fp-site .tool {
  background: rgba(255, 255, 255, .02);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.fp-site .tool:hover { background: rgba(255, 255, 255, .045); }

/* Hero technical labels sit over photography, so they carry their own scrim */
body.fp-site .hero__annot, body.fp-site .hero__index a { text-shadow: 0 1px 12px rgba(10, 10, 12, .9); }

@media (prefers-reduced-motion: reduce) {
  body.fp-site .cap__shot--zoom:hover img { transform: none; }
  body.fp-site .lightbox, body.fp-site .lightbox__frame { transition: none; }
}

/* --------------------------------------------------------------------------
   SIGNATURE — the logo stamped into the architecture

   The asset is 270px wide, so it is never scaled past its native resolution.
   Presence comes from the composition around it: converging rules, a quiet
   grid, and technical metadata — not from blowing the artwork up.
   -------------------------------------------------------------------------- */

body.fp-site .signature {
  position: relative;
  padding-block: clamp(5.5rem, 12vw, 11rem);
  background: var(--void);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--titanium);
  border-bottom: 1px solid var(--titanium);
  --signal: var(--blue-lift); --signal-ink: var(--blue-text);
  --rule: var(--titanium); --fg: var(--paper); --fg-2: var(--silver);
}

/* Four architectural rules converging on the mark */
body.fp-site .signature__converge { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
body.fp-site .signature__converge span {
  position: absolute; left: 50%; top: 50%;
  width: 1px; height: 46vh;
  background: linear-gradient(180deg, transparent, var(--titanium));
  transform-origin: bottom center;
  opacity: .8;
}
body.fp-site .signature__converge span:nth-child(1) { transform: translate(-50%, -100%) rotate(28deg); }
body.fp-site .signature__converge span:nth-child(2) { transform: translate(-50%, -100%) rotate(-28deg); }
body.fp-site .signature__converge span:nth-child(3) { transform: translate(-50%, -100%) rotate(64deg); }
body.fp-site .signature__converge span:nth-child(4) { transform: translate(-50%, -100%) rotate(-64deg); }

body.fp-site .signature__inner {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
body.fp-site .signature__logo {
  width: clamp(190px, 22vw, 270px);
  height: auto;
}
body.fp-site .signature__rule {
  display: block; width: min(420px, 60vw); height: 1px;
  background: var(--titanium); overflow: hidden;
}
body.fp-site .signature__rule i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, transparent, var(--blue-lift), transparent);
  transform: scaleX(0);
  transition: transform 1.3s var(--e-out);
}
body.fp-site .signature.is-in .signature__rule i { transform: scaleX(1); }

body.fp-site .signature__meta {
  display: grid; gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  width: 100%;
  margin: 0; padding-top: clamp(1rem, 2vw, 2rem);
  text-align: left;
}
body.fp-site .signature__meta dt { color: var(--blue-text); margin-bottom: .45rem; }
body.fp-site .signature__meta dd {
  margin: 0;
  font-family: var(--font); font-size: .875rem;
  letter-spacing: -.01em; text-transform: none; color: var(--paper);
}
@media (max-width: 640px) { body.fp-site .signature__meta { text-align: center; } }

@media (prefers-reduced-motion: reduce) {
  body.fp-site .signature__rule i { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Reduced motion — the navigation system stands down with everything else
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Staggered reveals must not linger: zero the delays, not just the durations. */
  body.fp-site .mega__group, body.fp-site .mega__visual, body.fp-site .mega__foot, body.fp-site .menu__list a, body.fp-site .step-terms li, body.fp-site .svc__flow li, body.fp-site [data-reveal] { transition-delay: 0s !important; }

  body.fp-site .js .mega__group, body.fp-site .js .mega__visual, body.fp-site .js .mega__foot { opacity: 1; transform: none; }
  body.fp-site .mega__visual img { transform: none; }
  body.fp-site .loader__logo, body.fp-site .loader__grid, body.fp-site .loader__meta, body.fp-site .loader__rule i { animation: none; opacity: 1; filter: none; transform: none; }
  body.fp-site .loader__rule i { transform: scaleX(1); }
  body.fp-site .brand__lockup, body.fp-site .brand:hover .brand__lockup { transform: none; }

  /* The bar keeps its compact state without interpolating on every frame. */
  body.fp-site .masthead { --nav-t: 1; }
  body.fp-site .masthead__progress { display: none; }
}

/* ==========================================================================
   INTERACTION LANGUAGE
   Rest is quiet. Hover states blue, moves, and says what will happen. Active
   confirms. Every transition is 120–200ms for the first response, so nothing
   ever feels like it is waiting.
   ========================================================================== */

:root {
  --t-fast: .16s;   /* first feedback */
  --t-mid:  .32s;   /* movement */
  --t-slow: .55s;   /* environment */
}

/* --------------------------------------------------------------------------
   Buttons — one system, three roles
   -------------------------------------------------------------------------- */

body.fp-site .btn {
  gap: 1.1rem;
  padding: 1.15rem 1.75rem;          /* larger target */
  min-height: 52px;
  border-radius: 3px;
  font-size: .875rem;
  transition: background-color var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out),
              transform var(--t-mid) var(--e-out),
              box-shadow var(--t-mid) var(--e-out);
}
body.fp-site .btn:hover { transform: translateY(-2px); }
body.fp-site .btn:active { transform: translateY(0); transition-duration: .08s; }
body.fp-site .btn .btn__arrow { transition: transform var(--t-mid) var(--e-out); }
body.fp-site .btn:hover .btn__arrow { transform: translateX(6px); }

/* PRIMARY — First Porter blue, white type. The main action anywhere. */
body.fp-site .btn--primary {
  background: var(--blue-press);
  border-color: var(--blue-press);
  color: #fff;
}
body.fp-site .btn--primary::before { display: none; }
body.fp-site .btn--primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 8px 34px rgba(37, 99, 235, .34);
}

/* SECONDARY — inherits the surface, thin edge, blue on hover */
body.fp-site .btn--outline { color: var(--fg); border-color: var(--rule); }
body.fp-site .btn--outline::before { display: none; }
body.fp-site .btn--outline:hover {
  color: var(--fg);
  border-color: var(--blue-lift);
  background: rgba(59, 130, 246, .1);
  box-shadow: none;
}

/* PRODUCT — blue outline that fills on hover; used only for DOME and ARCH */
/* The product button appears on both surfaces, so it takes the surface-aware
   blue: --blue-text is legible on obsidian but only 1.96:1 on warm white. */
body.fp-site .btn--product {
  color: var(--signal-ink);
  border-color: rgba(59, 130, 246, .5);
  background: rgba(59, 130, 246, .07);
}
body.fp-site .btn--product::before { display: none; }
body.fp-site .btn--product:hover {
  color: #fff;
  background: var(--blue-press);
  border-color: var(--blue-press);
  box-shadow: 0 8px 34px rgba(37, 99, 235, .32);
}

/* .btn--light / .btn--dark keep their wipe but gain the faster first response */
body.fp-site .btn--light:hover, body.fp-site .btn--dark:hover { box-shadow: 0 6px 30px rgba(59, 130, 246, .22); }

/* --------------------------------------------------------------------------
   Text links — the arrow is the affordance
   -------------------------------------------------------------------------- */

body.fp-site .tlink {
  padding: .5rem 0;
  font-size: .875rem;
  transition: color var(--t-fast) var(--e-out);
}
body.fp-site .tlink span:last-child { transition: transform var(--t-mid) var(--e-out); }
body.fp-site .tlink:hover span:last-child { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   Cards and rows — hover states that say what happens next
   -------------------------------------------------------------------------- */

/* A reusable "next step" cue that surfaces on hover */
body.fp-site .cue {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Plex Mono', monospace; font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal-ink);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--t-fast) var(--e-out), transform var(--t-mid) var(--e-out);
}
body.fp-site .cue i { font-style: normal; transition: transform var(--t-mid) var(--e-out); }

/* Services rows become obviously actionable */
body.fp-site .svc__btn {
  padding-inline: 1rem;
  margin-inline: -1rem;
  border-radius: 3px;
  transition: background-color var(--t-fast) var(--e-out);
}
body.fp-site .svc__item:hover .svc__btn { background: rgba(59, 130, 246, .06); }
body.fp-site .svc__btn .cue { margin-left: auto; margin-right: .75rem; }
body.fp-site .svc__item:hover .cue,
body.fp-site .svc__item.is-on .cue { opacity: 1; transform: none; }
body.fp-site .svc__item:hover .cue i { transform: translateX(4px); }
body.fp-site .svc__btn .svc__mark { transition: background-color var(--t-fast) var(--e-out), color var(--t-fast), border-color var(--t-fast), transform var(--t-mid) var(--e-out); }
body.fp-site .svc__item:hover .svc__btn .svc__mark { border-color: var(--blue-lift); color: var(--blue-text); }

/* Capability rows */
body.fp-site .cap__row:hover { background: rgba(59, 130, 246, .035); }
body.fp-site .cap__row .cue { margin-top: 1rem; }
body.fp-site .cap__row:hover .cue { opacity: 1; transform: none; }

/* Pillars and ledger rows get the same treatment */
body.fp-site .pillar:hover, body.fp-site .ledger__row:hover { background: rgba(59, 130, 246, .035); }

/* Images: zoom plus an overlay cue */
body.fp-site .media-cue { position: relative; overflow: hidden; display: block; }
body.fp-site .media-cue img { transition: transform var(--t-slow) var(--e-out), filter var(--t-mid); }
body.fp-site .media-cue::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,10,12,.7), transparent 55%);
  opacity: 0; transition: opacity var(--t-fast) var(--e-out);
}
body.fp-site .media-cue:hover img { transform: scale(1.04); }
body.fp-site .media-cue:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Focus — always visible, never removed
   -------------------------------------------------------------------------- */

body.fp-site .btn:focus-visible, body.fp-site .tlink:focus-visible, body.fp-site .nav-cta:focus-visible, body.fp-site .svc__btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
body.fp-site .svc__item:focus-within .cue { opacity: 1; transform: none; }
body.fp-site .cap__row:focus-within .cue { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  body.fp-site .btn:hover, body.fp-site .btn:active { transform: none; }
  body.fp-site .cue { opacity: 1; transform: none; }
  body.fp-site .media-cue:hover img { transform: none; }
}

/* ==========================================================================
   PROPRIETARY INTELLIGENCE — DOME™ and ARCH™ as product moments

   Two visual languages, one family. DOME reads as evaluation: options fanning
   from a shared baseline, a distribution beneath them. ARCH reads as
   commitment: funding stacked across phases and years. Both are illustrative
   diagrams of the described method, and are labelled as such.
   ========================================================================== */

body.fp-site .product {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8rem);
  background: var(--void); color: var(--paper);
  overflow: hidden; isolation: isolate;
  --bg: var(--void); --fg: var(--paper); --fg-2: var(--silver);
  --rule: var(--titanium); --focus: var(--silver-hi);
  --signal: var(--blue-lift); --signal-ink: var(--blue-text);
}
body.fp-site .product--arch { background: var(--ink); }
body.fp-site .product__inner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 1000px) { body.fp-site .product__inner { grid-template-columns: 1fr; } }

body.fp-site .product__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: 1.5rem;
  color: var(--silver-quiet);
}
body.fp-site .product__eyebrow b {
  font-weight: 400; color: var(--blue-text);
}
body.fp-site .product__name {
  font-family: var(--font);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 400; line-height: .88; letter-spacing: -.05em;
  margin-bottom: .35em;
}
body.fp-site .product__name sup { font-size: .22em; vertical-align: super; color: var(--blue-text); letter-spacing: 0; }
body.fp-site .product__full {
  font-family: 'Plex Mono', monospace; font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--silver);
  margin-bottom: 1.75rem;
}

/* what / why / how */
body.fp-site .product__qa { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
body.fp-site .product__qa > div {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--titanium);
}
body.fp-site .product__qa dt {
  font-family: 'Plex Mono', monospace; font-size: .5625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-text);
  padding-top: .2rem;
}
body.fp-site .product__qa dd { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--silver); }
body.fp-site .product__qa dd strong { color: var(--paper); font-weight: 500; }
@media (max-width: 560px) {
  body.fp-site .product__qa > div { grid-template-columns: 1fr; gap: .4rem; }
}

body.fp-site .badge-pro {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .6rem;
  border: 1px solid rgba(59, 130, 246, .4); border-radius: 2px;
  background: rgba(59, 130, 246, .09);
  font-family: 'Plex Mono', monospace; font-size: .5625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-text);
}

/* --------------------------------------------------------------------------
   The visualisation frame
   -------------------------------------------------------------------------- */

body.fp-site .viz {
  position: relative;
  border: 1px solid var(--titanium); border-radius: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  overflow: hidden;
}
body.fp-site .viz__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--titanium);
  background: rgba(255, 255, 255, .02);
}
body.fp-site .viz__bar span { color: var(--silver-quiet); }
body.fp-site .viz__dot { display: inline-flex; gap: 5px; }
body.fp-site .viz__dot i { width: 5px; height: 5px; border-radius: 50%; background: var(--edge); }
body.fp-site .viz__stage { position: relative; padding: clamp(1rem, 2vw, 1.5rem); }
body.fp-site .viz svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Interactive nodes */
body.fp-site .viz__node { cursor: pointer; }
body.fp-site .viz__node circle { transition: r var(--t-fast) var(--e-out), fill var(--t-fast); }
body.fp-site .viz__hit { fill: transparent; }
body.fp-site .viz__node:hover circle.viz__pt,
body.fp-site .viz__node:focus-visible circle.viz__pt { r: 7; fill: #fff; }
body.fp-site .viz__node:focus-visible { outline: none; }
body.fp-site .viz__node:focus-visible circle.viz__ring { stroke: var(--silver-hi); stroke-opacity: 1; }
body.fp-site .viz__ring { fill: none; stroke: var(--blue-lift); stroke-opacity: 0; transition: stroke-opacity var(--t-fast); }
body.fp-site .viz__node:hover .viz__ring { stroke-opacity: .9; }

body.fp-site .viz__series { transition: opacity var(--t-fast) var(--e-out), stroke-width var(--t-fast); }
body.fp-site .viz.is-focusing .viz__series { opacity: .22; }
body.fp-site .viz.is-focusing .viz__series.is-lit { opacity: 1; stroke-width: 2.2; }

/* Readout panel driven by the hovered node */
body.fp-site .viz__readout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  padding: .75rem .9rem;
  border-top: 1px solid var(--titanium);
  background: rgba(255, 255, 255, .02);
  min-height: 46px;
}
body.fp-site .viz__readout b {
  font-family: var(--font); font-size: .9375rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--paper);
}
body.fp-site .viz__readout span { color: var(--silver-quiet); }
body.fp-site .viz__readout em {
  font-style: normal; font-family: 'Plex Mono', monospace;
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-text);
}
body.fp-site .viz__note {
  padding: .55rem .9rem;
  border-top: 1px solid var(--titanium);
  color: var(--silver-quiet);
}

/* ARCH bars */
body.fp-site .viz__col rect { transition: fill var(--t-fast) var(--e-out); }
body.fp-site .viz__col:hover rect.viz__fill, body.fp-site .viz__col:focus-visible rect.viz__fill { fill: var(--blue-lift); }
body.fp-site .viz__col:focus-visible { outline: none; }
body.fp-site .viz__col:focus-visible rect.viz__fill { stroke: #fff; stroke-width: 1; }

/* --------------------------------------------------------------------------
   Transition between the two products
   -------------------------------------------------------------------------- */

body.fp-site .product-bridge {
  position: relative;
  display: grid; place-items: center; gap: 1rem;
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--void);
  text-align: center;
  border-top: 1px solid var(--titanium);
}
body.fp-site .product-bridge__flow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .7rem 1rem;
}
body.fp-site .product-bridge__flow span {
  font-family: 'Plex Mono', monospace; font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--silver-quiet);
}
body.fp-site .product-bridge__flow b { color: var(--blue-text); font-weight: 400; }
body.fp-site .product-bridge p { max-width: 52ch; color: var(--silver); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   Homepage teaser — the products appear before the deep sections
   -------------------------------------------------------------------------- */

body.fp-site .intel-teaser { display: grid; gap: 1px; background: var(--titanium); border: 1px solid var(--titanium); }
@media (min-width: 860px) { body.fp-site .intel-teaser { grid-template-columns: 1fr 1fr; } }

body.fp-site .intel-card {
  position: relative;
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--void);
  overflow: hidden; isolation: isolate;
  transition: background-color var(--t-fast) var(--e-out), transform var(--t-mid) var(--e-out);
}
body.fp-site .intel-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 80% at 15% 90%, var(--blue-glow), transparent 62%);
  opacity: 0; transition: opacity var(--t-mid) var(--e-out);
}
body.fp-site .intel-card::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lift));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--e-out);
}
body.fp-site .intel-card:hover { background: var(--graphite); transform: translateY(-3px); }
body.fp-site .intel-card:hover::before { opacity: 1; }
body.fp-site .intel-card:hover::after { transform: scaleX(1); }
body.fp-site .intel-card__name {
  font-family: var(--font);
  font-size: clamp(2.1rem, 4.2vw, 3.2rem); font-weight: 400;
  letter-spacing: -.045em; line-height: 1; color: var(--paper);
}
body.fp-site .intel-card__name sup { font-size: .26em; vertical-align: super; color: var(--blue-text); }
body.fp-site .intel-card__full { color: var(--silver-quiet); }
body.fp-site .intel-card p { font-size: .9375rem; line-height: 1.6; color: var(--silver); }
body.fp-site .intel-card .btn { margin-top: auto; align-self: flex-start; }
/* The mini diagram wakes up on hover */
body.fp-site .intel-card__spark { height: 46px; margin-top: .25rem; }
body.fp-site .intel-card__spark path, body.fp-site .intel-card__spark rect { transition: stroke var(--t-mid), fill var(--t-mid), opacity var(--t-mid); }
body.fp-site .intel-card:hover .intel-card__spark path { stroke: var(--blue-lift); }
body.fp-site .intel-card:hover .intel-card__spark rect { fill: var(--blue-lift); }

/* --------------------------------------------------------------------------
   Conversion moment
   -------------------------------------------------------------------------- */

body.fp-site .convert {
  position: relative;
  padding-block: clamp(5rem, 11vw, 9.5rem);
  background: var(--void); color: var(--paper);
  text-align: center;
  overflow: hidden; isolation: isolate;
  --bg: var(--void); --fg: var(--paper); --fg-2: var(--silver);
  --rule: var(--titanium); --focus: var(--silver-hi);
  --signal: var(--blue-lift); --signal-ink: var(--blue-text);
}
body.fp-site .convert h2 {
  font-size: clamp(2.25rem, 6.4vw, 5.5rem);
  font-weight: 400; line-height: .92; letter-spacing: -.05em;
}
body.fp-site .convert p { max-width: 54ch; margin-inline: auto; color: var(--silver); }
body.fp-site .convert__pair {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  align-items: center; justify-content: center;
  margin-block: clamp(1.75rem, 3vw, 2.5rem);
}
body.fp-site .convert__pair a {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-family: var(--font);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 400; letter-spacing: -.02em;
  color: var(--paper);
  transition: color var(--t-fast) var(--e-out);
}
body.fp-site .convert__pair a sup { font-size: .3em; vertical-align: super; color: var(--blue-text); }
body.fp-site .convert__pair a:hover { color: var(--blue-text); }
body.fp-site .convert__pair i { font-style: normal; color: var(--silver-quiet); }

/* The whole product card is the link, so hovering anywhere in it must drive
   the button's state — otherwise the card lifts while its CTA stays asleep. */
body.fp-site .intel-card:hover .btn--product,
body.fp-site .intel-card:focus-visible .btn--product {
  color: #fff;
  background: var(--blue-press);
  border-color: var(--blue-press);
  box-shadow: 0 8px 34px rgba(37, 99, 235, .32);
}
body.fp-site .intel-card:hover .btn--product .btn__arrow { transform: translateX(6px); }
body.fp-site .intel-card:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Same for capability rows whose whole surface is actionable. */
body.fp-site .cap__row:hover .cue i { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  body.fp-site .intel-card:hover .btn--product .btn__arrow,
  body.fp-site .cap__row:hover .cue i { transform: none; }
  body.fp-site .intel-card:hover { transform: none; }
}

/* ==========================================================================
   COMPLEXITY → CLARITY
   Sixteen rules arrive scattered and resolve into an ordered stack as the
   section is read. The whole idea is expressed in transform and opacity only,
   so it stays on the compositor.
   ========================================================================== */

body.fp-site .clarity {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9rem);
  background: var(--void); color: var(--paper);
  overflow: hidden; isolation: isolate;
  --bg: var(--void); --fg: var(--paper); --fg-2: var(--silver);
  --rule: var(--titanium); --focus: var(--silver-hi);
  --signal: var(--blue-lift); --signal-ink: var(--blue-text);
}
body.fp-site .clarity__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 980px) { body.fp-site .clarity__inner { grid-template-columns: 1fr; } }

body.fp-site .clarity__statement {
  font-family: var(--font);
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  font-weight: 400; line-height: .96; letter-spacing: -.045em;
}

body.fp-site .clarity__viz { margin: 0; position: relative; }
body.fp-site .clarity__viz svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Scattered at rest */
body.fp-site .viz-thread {
  stroke: var(--edge);
  stroke-width: 1.25;
  opacity: var(--op, .5);
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 1.5s var(--e-out), opacity 1.1s var(--e-out), stroke .9s var(--e-out);
}
body.fp-site .viz-thread--lit { stroke: var(--blue-lift); stroke-width: 1.6; }

body.fp-site .viz-mote {
  fill: var(--silver-quiet);
  opacity: .55;
  transform: translate(var(--tx), var(--ty));
  transform-box: fill-box;
  transition: transform 1.5s var(--e-out), opacity 1.1s var(--e-out), fill .9s var(--e-out);
}

/* Resolved: everything aligns, the three lit rules stay blue */
body.fp-site .clarity.is-resolved .viz-thread {
  transform: none;
  opacity: .42;
}
body.fp-site .clarity.is-resolved .viz-thread--lit { opacity: 1; stroke: var(--blue-lift); }
body.fp-site .clarity.is-resolved .viz-mote { transform: none; opacity: .9; fill: var(--blue-lift); }

/* Stagger so the resolve reads as a sweep rather than a snap */
body.fp-site .viz-thread:nth-child(1)  { transition-delay: .02s }
body.fp-site .viz-thread:nth-child(2)  { transition-delay: .05s }
body.fp-site .viz-thread:nth-child(3)  { transition-delay: .08s }
body.fp-site .viz-thread:nth-child(4)  { transition-delay: .11s }
body.fp-site .viz-thread:nth-child(5)  { transition-delay: .14s }
body.fp-site .viz-thread:nth-child(6)  { transition-delay: .17s }
body.fp-site .viz-thread:nth-child(7)  { transition-delay: .20s }
body.fp-site .viz-thread:nth-child(8)  { transition-delay: .23s }
body.fp-site .viz-thread:nth-child(9)  { transition-delay: .26s }
body.fp-site .viz-thread:nth-child(10) { transition-delay: .29s }
body.fp-site .viz-thread:nth-child(11) { transition-delay: .32s }
body.fp-site .viz-thread:nth-child(12) { transition-delay: .35s }
body.fp-site .viz-thread:nth-child(13) { transition-delay: .38s }
body.fp-site .viz-thread:nth-child(14) { transition-delay: .41s }
body.fp-site .viz-thread:nth-child(15) { transition-delay: .44s }
body.fp-site .viz-thread:nth-child(16) { transition-delay: .47s }
body.fp-site .viz-mote:nth-child(odd)  { transition-delay: .5s }
body.fp-site .viz-mote:nth-child(even) { transition-delay: .58s }

body.fp-site .clarity__states {
  display: flex; align-items: center; gap: .8rem;
  margin-top: 1.25rem;
}
body.fp-site .clarity__state { color: var(--silver-quiet); transition: color .8s var(--e-out); }
body.fp-site .clarity__state.is-on { color: var(--silver); }
body.fp-site .clarity.is-resolved .clarity__state[data-state='scatter'] { color: var(--silver-quiet); opacity: .75; }
body.fp-site .clarity.is-resolved .clarity__state[data-state='order'] { color: var(--blue-text); }
body.fp-site .clarity__arrow { color: var(--silver-quiet); }

/* The blue spine — a thread that runs between acts */
body.fp-site .seam--spine::before {
  height: clamp(4rem, 9vh, 7rem);
  background: linear-gradient(180deg, var(--blue-lift), transparent);
}

@media (prefers-reduced-motion: reduce) {
  body.fp-site .viz-thread, body.fp-site .viz-mote { transform: none !important; transition-delay: 0s !important; }
  body.fp-site .clarity .viz-thread { opacity: .42; }
  body.fp-site .clarity .viz-mote { opacity: .9; fill: var(--blue-lift); }
}

/* --------------------------------------------------------------------------
   Closing CTA — the conclusion, given weight
   -------------------------------------------------------------------------- */

body.fp-site .footer__cta {
  position: relative;
  padding-block: clamp(5.5rem, 13vw, 11rem);
  border-bottom: 1px solid var(--titanium);
  overflow: hidden; isolation: isolate;
}
body.fp-site .footer__cta-media { position: absolute; inset: -10% 0; z-index: -2; }
body.fp-site .footer__cta-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.2) brightness(.34);
  will-change: transform;
}
body.fp-site .footer__cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,12,.9), rgba(10,10,12,.82)),
    radial-gradient(90% 70% at 12% 90%, var(--blue-glow), transparent 60%);
}
body.fp-site .footer__cta-head {
  font-family: var(--font);
  font-size: clamp(2.4rem, 6.6vw, 6rem);
  font-weight: 400; line-height: .92; letter-spacing: -.05em;
  max-width: 16ch;
}
body.fp-site .footer__cta-lede { margin-top: clamp(1.25rem, 2.5vw, 2rem); color: var(--silver); }

/* ==========================================================================
   SERVICES & APPROACH — capability blocks, stages, specification lists
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cycle / flowline — the overview strip, connected rather than listed
   -------------------------------------------------------------------------- */

body.fp-site .cycle, body.fp-site .flowline {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  background: var(--titanium);
  border: 1px solid var(--titanium);
}
body.fp-site .cycle__step, body.fp-site .flowline__step {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--void);
  transition: background-color var(--t-fast) var(--e-out);
}
body.fp-site .cycle__step::after, body.fp-site .flowline__step::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lift));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--e-out);
}
body.fp-site .cycle__step:hover, body.fp-site .flowline__step:hover { background: var(--graphite); }
body.fp-site .cycle__step:hover::after, body.fp-site .flowline__step:hover::after { transform: scaleX(1); }

body.fp-site .cycle__n, body.fp-site .flowline__n { display: block; margin-bottom: 1rem; color: var(--blue-text); }
body.fp-site .cycle__step h3, body.fp-site .flowline__step h3 {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--paper); margin-bottom: .6rem;
}
body.fp-site .cycle__step p, body.fp-site .flowline__step p { font-size: .875rem; line-height: 1.55; color: var(--silver); }
body.fp-site .cycle__step .tlink { margin-top: 1rem; }

/* The flowline reads as a sequence, so it carries an arrow between steps. */
body.fp-site .flowline__step:not(:last-child)::before {
  content: '\2192';
  position: absolute; right: -.62rem; top: 50%; z-index: 2;
  transform: translateY(-50%);
  font-family: var(--font-mono); font-size: .75rem; color: var(--silver-quiet);
  background: var(--void); padding: .2rem .1rem;
}
@media (max-width: 700px) { body.fp-site .flowline__step:not(:last-child)::before { display: none; } }

/* --------------------------------------------------------------------------
   Capability block / stage — alternating, image or chipset
   -------------------------------------------------------------------------- */

body.fp-site .svc-block__inner, body.fp-site .stage__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
body.fp-site .svc-block--flip .svc-block__text,
body.fp-site .stage--flip .stage__text { order: 2; }
@media (max-width: 940px) {
  body.fp-site .svc-block__inner, body.fp-site .stage__inner { grid-template-columns: 1fr; }
  body.fp-site .svc-block--flip .svc-block__text, body.fp-site .stage--flip .stage__text { order: 0; }
}

body.fp-site .svc-block__index, body.fp-site .stage__index {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1.25rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
  color: var(--fg-2);
}
body.fp-site .svc-block__index span, body.fp-site .stage__index span {
  color: var(--signal-ink);
  font-variant-numeric: tabular-nums;
}

body.fp-site .svc-block__media {
  margin: 0; position: relative;
  border: 1px solid var(--rule); border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
body.fp-site .svc-block__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.86); }
body.fp-site .svc-block__media figcaption {
  position: absolute; left: .9rem; bottom: .8rem; z-index: 1;
  color: var(--paper);
  text-shadow: 0 1px 10px rgba(10, 10, 12, .95);
}

/* --------------------------------------------------------------------------
   Specification list — the business substance, in a scannable form
   -------------------------------------------------------------------------- */

body.fp-site .spec { display: grid; gap: 0; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
body.fp-site .spec > div {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
body.fp-site .spec > div:last-child { border-bottom: 1px solid var(--rule); }
body.fp-site .spec dt {
  font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal-ink);
  padding-top: .22rem;
}
body.fp-site .spec dd { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--fg-2); }
@media (max-width: 620px) {
  body.fp-site .spec > div { grid-template-columns: 1fr; gap: .45rem; }
}

/* --------------------------------------------------------------------------
   Chipset — the stage inputs and their outcome
   -------------------------------------------------------------------------- */

body.fp-site .stage__aside { align-self: center; }
body.fp-site .chipset { display: flex; flex-wrap: wrap; gap: .5rem; }
body.fp-site .chipset li {
  padding: .7rem 1rem;
  border: 1px solid var(--rule); border-radius: 3px;
  font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-2);
  transition: border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
body.fp-site .chipset li:hover { border-color: var(--signal); color: var(--fg); }
/* The outcome of the stage, set apart from its inputs */
body.fp-site .chipset li.is-key {
  flex-basis: 100%;
  margin-top: .5rem;
  border-color: rgba(59, 130, 246, .45);
  background: rgba(59, 130, 246, .08);
  color: var(--signal-ink);
}

/* Stage input/output panel — frames the chipset so it reads as a module */
body.fp-site .panel {
  border: 1px solid var(--rule); border-radius: 4px;
  background: rgba(59, 130, 246, .025);
  overflow: hidden;
}
body.fp-site .panel__head {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: rgba(10, 10, 12, .03);
  color: var(--fg-2);
}
body.fp-site .panel__head i { font-style: normal; color: var(--signal-ink); }
body.fp-site .panel .chipset { padding: 1rem; }
body.fp-site .band--dark .panel__head, body.fp-site .band--ink .panel__head { background: rgba(255, 255, 255, .03); }

/* --------------------------------------------------------------------------
   Hero composition — brand, then what the firm is, then what it delivers

   The lockup is a 270px raster, so it is never scaled past native. It reads as
   a hero element by sitting well above the 118–168px navigation mark and by
   having the composition built around it, not by being stretched.
   -------------------------------------------------------------------------- */

body.fp-site .hero__logo {
  width: clamp(190px, 21vw, 270px);
  height: auto;
  margin-bottom: clamp(1.5rem, 3.4vh, 2.75rem);
}
body.fp-site .js .hero__logo {
  opacity: 0;
  animation: fade-up 1s var(--e-out) .12s forwards;
}

body.fp-site .hero__title {
  font-family: var(--font);
  font-size: clamp(2.15rem, 5.2vw, 4.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.042em;
  max-width: 18ch;
  text-wrap: balance;
}

body.fp-site .hero__tagline {
  margin-top: clamp(.85rem, 1.8vh, 1.4rem);
  font-size: clamp(1.75rem, 3.6vw, 3.1rem);
  line-height: 1.05;
}
body.fp-site .js .hero__tagline {
  opacity: 0;
  animation: fade-up 1s var(--e-out) .5s forwards;
}

/* The old eyebrow slot is gone; the ticker now carries the technical read. */
body.fp-site .hero__eyebrow { display: none; }

@media (prefers-reduced-motion: reduce) {
  body.fp-site .js .hero__logo, body.fp-site .js .hero__tagline { opacity: 1; animation: none; }
}

/* --------------------------------------------------------------------------
   Brand hand-off on the landing page

   At rest the hero carries the mark, so the navigation does not repeat it —
   two First Porter lockups stacked reads as a mistake. The moment the page
   scrolls, the hero mark leaves and the navigation mark takes over.
   -------------------------------------------------------------------------- */

body.fp-site .page-home .masthead:not(.is-solid) .brand {
  opacity: 0;
  visibility: hidden;      /* also removes it from the tab order while hidden */
  pointer-events: none;
}
body.fp-site .masthead .brand {
  transition: opacity .45s var(--e-out), visibility .45s;
}

/* The hero content must clear the fixed bar now that it starts at the top. */
body.fp-site .hero {
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vh, 3.5rem));
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
}

@media (prefers-reduced-motion: reduce) {
  body.fp-site .masthead .brand { transition: none; }
}

/* Hero density: the composition now carries a mark, a descriptor, a tagline,
   a lede, two actions and a readout. Tighten the joints so it holds inside one
   viewport without shrinking the type. */
body.fp-site .hero__logo { margin-bottom: clamp(1rem, 2.4vh, 1.9rem); }
body.fp-site .hero__foot { margin-top: clamp(1.75rem, 4vh, 3rem); }
body.fp-site .hero__foot .lede { max-width: 40ch; }
body.fp-site .hero__foot .btn-row { margin-top: clamp(1.25rem, 2.4vh, 1.75rem); }
body.fp-site .hero__ticker { margin-top: clamp(1.5rem, 3.4vh, 2.5rem); padding-top: 1.1rem; }

@media (min-height: 900px) {
  body.fp-site .hero__logo { margin-bottom: clamp(1.5rem, 3vh, 2.5rem); }
}

/* Short viewports: a 13-inch laptop is ~720–820px tall, where the composition
   would push the proof readout below the fold. Scale the mark and the
   descriptor to the height available rather than letting the hero spill. */
@media (max-height: 880px) and (min-width: 1000px) {
  body.fp-site .hero__logo { width: clamp(160px, 15vw, 210px); margin-bottom: .9rem; }
  body.fp-site .hero__title { font-size: clamp(2rem, 4.1vw, 3.5rem); }
  body.fp-site .hero__tagline { font-size: clamp(1.5rem, 2.8vw, 2.3rem); margin-top: .6rem; }
  body.fp-site .hero__foot { margin-top: 1.5rem; }
  body.fp-site .hero__foot .btn-row { margin-top: 1.1rem; }
  body.fp-site .hero__ticker { margin-top: 1.4rem; padding-top: .9rem; }
  body.fp-site .hero { padding-top: calc(var(--nav-h) + 1.25rem); padding-bottom: 2rem; }
}

/* Short phones: drop the wayfinding index before the proof readout. */
@media (max-height: 870px) and (max-width: 999px) {
  body.fp-site .hero__logo { width: 158px; margin-bottom: .7rem; }
  body.fp-site .hero__title { font-size: clamp(1.8rem, 7.2vw, 2.3rem); }
  body.fp-site .hero__tagline { font-size: clamp(1.35rem, 5.4vw, 1.8rem); margin-top: .5rem; }
  body.fp-site .hero__foot { margin-top: 1.1rem; }
  body.fp-site .hero__foot .btn-row { margin-top: 1rem; }
  body.fp-site .hero__ticker { margin-top: 1rem; padding-top: .8rem; }
  body.fp-site .hero { padding-top: calc(var(--nav-h) + .9rem); padding-bottom: 1.5rem; }
}

/* Very short phones (SE-class, ~667px): the descriptor and tagline already
   carry the message, so the supporting line yields rather than shrinking the
   whole composition. The actions and the proof readout both stay in view. */
@media (max-height: 700px) and (max-width: 999px) {
  body.fp-site .hero__foot .lede { display: none; }
  body.fp-site .hero__foot { margin-top: 1rem; }
}

/* --------------------------------------------------------------------------
   Hero headline — the descriptor carries the page

   With the tagline removed the headline takes the room it frees: three short
   lines, the last one the blue accent, filling the left of the frame.
   -------------------------------------------------------------------------- */

body.fp-site .hero__title {
  font-size: clamp(2.6rem, 7.4vw, 7rem);
  line-height: .98;
  letter-spacing: -.045em;
  max-width: none;
}
/* The accent line is set on its own row, so it can breathe a little wider
   than the inline emphasis used elsewhere. */
body.fp-site .hero__title .sig { font-size: 1.08em; letter-spacing: -.015em; }

body.fp-site .hero__tagline { display: none; }

/* Height-aware: keep the whole composition inside one viewport. The scale
   steps down in two stages — a 900px-tall screen sat between the full size and
   the laptop size and overflowed by 15px. */
@media (max-height: 960px) and (min-width: 1000px) {
  body.fp-site .hero__title { font-size: clamp(2.5rem, 6.2vw, 5.9rem); }
}
@media (max-height: 880px) and (min-width: 1000px) {
  body.fp-site .hero__title { font-size: clamp(2.4rem, 5.6vw, 5rem); }
}
@media (max-height: 870px) and (max-width: 999px) {
  body.fp-site .hero__title { font-size: clamp(2.1rem, 8.4vw, 2.9rem); }
}
@media (max-height: 700px) and (max-width: 999px) {
  body.fp-site .hero__title { font-size: clamp(1.95rem, 7.8vw, 2.5rem); }
}

/* The services row bleeds its hover tint 1rem past the text column. On a 320px
   screen the gutter is smaller than that bleed, so the row pushed the document
   wider than the viewport. Drop the bleed where there is no room for it. */
@media (max-width: 480px) {
  body.fp-site .svc__btn { padding-inline: 0; margin-inline: 0; }
  body.fp-site .svc__item:hover .svc__btn { background: transparent; }
  body.fp-site .svc__item.is-on .svc__btn { background: transparent; }
}

/* Grid children default to min-width:auto, so a flex row whose intrinsic width
   exceeds the track pushes the whole document wider. Let them shrink. */
body.fp-site .svc__list, body.fp-site .svc__stage, body.fp-site .svc__btn h3 { min-width: 0; }
body.fp-site .svc__btn h3 { overflow-wrap: break-word; }

@media (max-width: 480px) {
  /* The cue is a pointer affordance; on touch the whole row is the target. */
  body.fp-site .svc__btn .cue { display: none; }
}

/* ==========================================================================
   LIGHT SURFACES — give them structure, texture and a reason to look at them

   The paper bands were flat fills carrying full-width text rows. At 1440px+
   that stretched a three-column row until its meta tag floated alone at the
   far right, disconnected from the sentence it belonged to.
   ========================================================================== */

/* A faint architectural grid so a light band is a surface, not a void. */
body.fp-site .band--paper, body.fp-site .band--warm, body.fp-site .svc-block, body.fp-site .stage {
  position: relative;
  isolation: isolate;
}
body.fp-site .band--paper::before, body.fp-site .band--warm::before, body.fp-site .svc-block::before, body.fp-site .stage::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(16, 16, 20, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 16, 20, .045) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(115% 85% at 82% 12%, #000 5%, transparent 68%);
          mask-image: radial-gradient(115% 85% at 82% 12%, #000 5%, transparent 68%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Meta labels become pill tags
   -------------------------------------------------------------------------- */

body.fp-site .tag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .34rem .7rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: rgba(16, 16, 20, .045);
  font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-2);
  transition: background-color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out);
}
body.fp-site .tag::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--silver-dim);
  transition: background-color var(--t-fast) var(--e-out);
}
body.fp-site .band--dark .tag, body.fp-site .product .tag, body.fp-site .clarity .tag {
  background: rgba(255, 255, 255, .05);
}

/* --------------------------------------------------------------------------
   Ledger — full-width rows become a card set
   -------------------------------------------------------------------------- */

body.fp-site .ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 1.6vw, 1.4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 0;
}

body.fp-site .ledger__row {
  position: relative;
  display: flex; flex-direction: column;
  gap: .9rem;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  transition: background-color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out),
              transform var(--t-mid) var(--e-out),
              box-shadow var(--t-mid) var(--e-out);
}
/* Ambient wash that surfaces on hover */
body.fp-site .ledger__row::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 80% at 8% 100%, rgba(59, 130, 246, .1), transparent 62%);
  opacity: 0; transition: opacity var(--t-mid) var(--e-out);
}
body.fp-site .ledger__row:hover {
  background: #fff;
  border-color: var(--rule);
  border-left-color: var(--blue-press);
  transform: translateY(-3px);
  box-shadow: 0 10px 34px rgba(16, 16, 20, .07);
}
body.fp-site .ledger__row:hover::before { opacity: 1; }
/* The old full-width rule and hover underline no longer apply. */
body.fp-site .ledger__row::after { display: none; }

body.fp-site .ledger__row > i {
  font-family: var(--font-mono); font-style: normal;
  font-size: .6875rem; letter-spacing: .12em;
  color: var(--signal-ink);
  padding-top: 0;
}
body.fp-site .ledger__row h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.15;
  color: var(--fg);
  transition: transform var(--t-mid) var(--e-out);
}
body.fp-site .ledger__row:hover h3 { transform: none; }
body.fp-site .ledger__row p { font-size: .9375rem; line-height: 1.6; color: var(--fg-2); }
body.fp-site .ledger__tag { margin-top: auto; align-self: flex-start; }
body.fp-site .ledger__row:hover .tag { background: rgba(59, 130, 246, .09); border-color: rgba(59, 130, 246, .38); color: var(--signal-ink); }
body.fp-site .ledger__row:hover .tag::before { background: var(--blue-press); }

/* The statement above it no longer needs to reserve full-bleed room. */
body.fp-site .statement__lead { max-width: 24ch; }

/* --------------------------------------------------------------------------
   Metric cards — raw numbers in prose become key figures
   -------------------------------------------------------------------------- */

body.fp-site .figures {
  display: grid; gap: clamp(.75rem, 1.4vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
body.fp-site .figure-card {
  position: relative;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  transition: background-color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out),
              transform var(--t-mid) var(--e-out);
}
body.fp-site .figure-card::after {
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-lift));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--e-out);
}
body.fp-site .figure-card:hover { background: #fff; transform: translateY(-3px); border-color: rgba(59,130,246,.35); }
body.fp-site .figure-card:hover::after { transform: scaleX(1); }
body.fp-site .figure-card b {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600; line-height: 1; letter-spacing: -.045em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
body.fp-site .figure-card b sup { font-size: .4em; vertical-align: super; color: var(--signal-ink); letter-spacing: 0; }
/* Direct child only: the animated counter inside <b> is also a <span>, and
   would otherwise inherit the label's block display and 10px mono size,
   pushing the figure onto two lines. */
body.fp-site .figure-card > span {
  display: block; margin-top: .7rem;
  font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fg-2);
}
body.fp-site .figure-card p { margin-top: .6rem; font-size: .8125rem; line-height: 1.55; color: var(--fg-2); }

/* --------------------------------------------------------------------------
   Editorial split for prose-heavy sections
   -------------------------------------------------------------------------- */

body.fp-site .prose-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 940px) { body.fp-site .prose-split { grid-template-columns: 1fr; } }

body.fp-site .prose-lead {
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  font-weight: 500; line-height: 1.28; letter-spacing: -.028em;
  color: var(--fg);
  max-width: 26ch;
}
body.fp-site .prose-lead + .body-copy { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }

/* A pull-figure inside running text, so a number stops being a word */
body.fp-site .pull {
  display: inline-flex; align-items: baseline; gap: .12em;
  font-weight: 600; color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
  body.fp-site .ledger__row:hover, body.fp-site .figure-card:hover { transform: none; }
}