/* ==========================================================================
   YoureNX — landing
   Signature device: the horizon line. A luminous rule recurring as structure,
   with the NX gradient (#FF6A00 -> #FF4FA3 -> #6A1B9A) used as dawn light on
   it rather than as flat gradient fill.
   ========================================================================== */

:root{
  color-scheme: light;

  /* Ink — institutional base */
  --ink:        #080D17;
  --ink-2:      #0D1321;
  --ink-3:      #161E30;
  --ink-line:   #273148;

  /* Paper — cool, blue-tinted so it reads as kin to the navy */
  --paper:      #F1F4F9;
  --paper-2:    #E4E9F2;
  --paper-line: #C9D2E0;

  /* Gold — authority */
  --gold:       #FFB300;
  --gold-lite:  #FFC107;

  /* NX gradient — dawn light, used sparingly */
  --nx-orange:  #FF6A00;
  --nx-pink:    #FF4FA3;
  --nx-purple:  #6A1B9A;
  --nx: linear-gradient(90deg, var(--nx-orange), var(--nx-pink), var(--nx-purple));

  /* Text */
  --on-ink:     #F1F4F9;
  --on-ink-mid: #B7C0D1;
  --on-ink-dim: #67748C;
  --on-paper:      #0D1321;
  --on-paper-mid:  #4A5670;
  --on-paper-dim:  #6E7A93;

  /* Type */
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.32rem + .9vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --step-4:  clamp(2.6rem, 1.8rem + 4vw, 5rem);
  --step-5:  clamp(3.1rem, 1.7rem + 6.4vw, 7.2rem);

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --shell: 1440px;
  --section-y: clamp(4rem, 8vw, 8rem);
  --control-min: 2.75rem;

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Hash links land below the sticky 6.5rem masthead instead of underneath it. */
  scroll-padding-top:7.5rem;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--ink);
  color: var(--on-paper);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open{ overflow:hidden; }

img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}
p{ margin:0; text-wrap: pretty; }

/* Focus — visible, gold, never removed */
:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

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

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

.skip{
  position:absolute; left:var(--gutter); top:-4rem; z-index:200;
  background: var(--gold); color: var(--ink);
  padding:.7rem 1.1rem; font-weight:600; font-size:var(--step--1);
  transition: top .18s var(--ease);
}
.skip:focus{ top:.75rem; }

/* --- Shared atoms ------------------------------------------------------- */

/* Eyebrow: mono, because this is an intelligence product and mono reads as data */
.eyebrow{
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:""; width:1.6rem; height:1px;
  background: var(--gold); flex:none;
}
.eyebrow--paper{ color: var(--nx-purple); }
.eyebrow--paper::before{ background: var(--nx-purple); }

/* The horizon line — the page's recurring structural device */
.horizon{
  position:relative;
  height:1px;
  background: var(--ink-line);
  border:0;
  margin:0;
}
.horizon::after{
  content:"";
  position:absolute; inset:0;
  background: var(--nx);
  opacity:.9;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.horizon--paper{ background: var(--paper-line); }
.horizon--spaced{ margin-bottom: clamp(3rem, 6vw, 5rem); }

/* Buttons */
.btn{
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight:600; font-size:var(--step--1);
  letter-spacing:.01em;
  text-decoration:none;
  border:1px solid transparent;
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.btn,.burger,.mobile-nav a{ min-height:var(--control-min); }
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgb(255 179 0 / .9); }
.btn:active{ transform: none; }
.btn .arw{ transition: transform .2s var(--ease); }
.btn:hover .arw{ transform: translateX(3px); }

.btn--ghost{
  --btn-bg: transparent;
  --btn-fg: var(--on-ink);
  border-color: var(--ink-line);
}
.btn--ghost:hover{
  --btn-bg: rgb(241 244 249 / .05);
  border-color: var(--on-ink-dim);
  box-shadow:none;
}
.btn--ghost-paper{
  --btn-bg: transparent;
  --btn-fg: var(--on-paper);
  border-color: var(--paper-line);
}
.btn--ghost-paper:hover{ --btn-bg: #fff; box-shadow: 0 10px 24px -18px rgb(13 19 33 / .5); }

/* --- Header ------------------------------------------------------------- */

.masthead{
  position: sticky; top:0; z-index:100;
  background: rgb(8 13 23 / .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--ink-line);
}
.masthead__inner{
  min-height:6.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.brand{ display:flex; align-items:center; gap:.85rem; text-decoration:none; flex:none; }
.brand__mark{ width:2.4rem; height:2.4rem; flex:none; }
.brand__type{ display:flex; flex-direction:column; gap:.18rem; }
.wordmark{
  font-family: var(--display);
  font-size: 1.65rem; line-height:1;
  letter-spacing:-.02em;
  color: var(--on-ink);
}
.wordmark .nx{
  background: var(--nx);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  font-weight:400;
}
.brand__sub{
  font-family: var(--mono);
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--on-ink-dim);
}

.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{
  text-decoration:none;
  font-size: var(--step--1);
  font-weight:500;
  color: var(--on-ink-mid);
  position:relative;
  white-space:nowrap;
  padding:.35rem 0;
  transition: color .18s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background: var(--gold);
  transform: scaleX(0); transform-origin:left;
  transition: transform .24s var(--ease);
}
.nav a:hover{ color: var(--on-ink); }
.nav a:hover::after{ transform: scaleX(1); }

/* The page you are on. The gold rule is the same one hover draws, held open — so
   the state reads as "already here" rather than as a different kind of thing.
   Colour alone would not carry it for anyone who cannot distinguish the two greys,
   which is why the underline does the work. */
.nav a[aria-current="page"]{ color: var(--on-ink); }
.nav a[aria-current="page"]::after{ transform: scaleX(1); }

.masthead__actions{ display:flex; align-items:center; gap:1.25rem; }
.text-link{
  font-size:var(--step--1);
  color:var(--on-ink-mid);
  text-decoration:none;
  white-space:nowrap;
}
.text-link:hover{ color:var(--on-ink); }


.burger{
  display:none;
  width:2.75rem; height:2.75rem;
  background:none; border:1px solid var(--ink-line);
  color:var(--on-ink);
  place-items:center; cursor:pointer;
}
.burger span{
  display:block; width:1.1rem; height:1px; background:currentColor;
  position:relative; transition: background .2s var(--ease);
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:1.1rem; height:1px;
  background:currentColor; transition: transform .26s var(--ease);
}
.burger span::before{ top:-.34rem; }
.burger span::after{ top:.34rem; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform: translateY(.34rem) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform: translateY(-.34rem) rotate(-45deg); }

.mobile-nav{
  display:none;
  background: var(--ink-2);
  border-bottom:1px solid var(--ink-line);
}
.mobile-nav.is-open{ display:block; }
.mobile-nav ul{ list-style:none; margin:0; padding:1rem 0 2rem; }
.mobile-nav li + li{ border-top:1px solid var(--ink-line); }
.mobile-nav a{
  display:block; padding:1rem 0; text-decoration:none;
  color: var(--on-ink); font-size: var(--step-1); font-family:var(--display);
}
.mobile-nav .btn{ margin-top:1.25rem; width:100%; justify-content:center; }

/* --- Institutional horizon -------------------------------------------- */

.institutional-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--ink);
  color:var(--on-ink);
}
.horizon-media{
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 58%;
  opacity:.72;
}
.institutional-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgb(8 13 23/.34),rgb(8 13 23/.08) 48%,rgb(8 13 23/.38));
  pointer-events:none;
}

/* --- Hero --------------------------------------------------------------- */
/* Thesis: discovery happens before dawn. The hero IS the horizon — a dark
   field, a luminous line, and names surfacing out of it. */

.hero{
  position:relative;
  background: var(--ink);
  color: var(--on-ink);
  overflow:hidden;
  padding-block: clamp(4rem, 8vw, 7.5rem) 0;
}

.hero .shell{ position:relative; z-index:2; }

.hero__inner{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items:start;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.hero h1{
  font-size: var(--step-5);
  margin:0 0 1.75rem;
  max-width: 14ch;
}
.hero h1 .line{ display:block; }
/* Gradient reserved for the single most important word on the page */
.hero h1 .horizon-word{
  background: var(--nx);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  font-style: italic;
}

.hero__lede{
  font-size: var(--step-1);
  color: var(--on-ink-mid);
  max-width: 46ch;
  margin-bottom: 2.5rem;
  line-height:1.55;
}
.hero__lede strong{ color: var(--on-ink); font-weight:500; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }

/* Ticker panel — names surfacing out of the dark */
.surfacing{
  border:1px solid var(--ink-line);
  background: linear-gradient(180deg, rgb(22 30 48 / .7), rgb(13 19 33 / .5));
  padding: 1.6rem;
  align-self:stretch;
}
.surfacing__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--ink-line);
}
.surfacing__title{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-ink-mid); margin:0;
}
.pulse{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold);
}
.pulse::before{
  content:""; width:.4rem; height:.4rem; border-radius:50%;
  background: var(--gold);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgb(255 179 0 / .5); }
  50%{ opacity:.55; box-shadow:0 0 0 .32rem rgb(255 179 0 / 0); }
}

.surfacing__list{ list-style:none; margin:0; padding:0; }
.surfacing__list li{
  display:grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap:.9rem; align-items:baseline;
  padding:.95rem 0;
  border-bottom:1px solid rgb(34 44 66 / .6);
}
.surfacing__list li:last-child{ border-bottom:0; padding-bottom:0; }
.surfacing__idx{
  font-family:var(--mono); font-size:.68rem;
  color:var(--on-ink-dim); letter-spacing:.06em;
}
.surfacing__name{ font-size:.95rem; font-weight:500; color:var(--on-ink); }
.surfacing__meta{
  display:block; font-size:.76rem; color:var(--on-ink-dim);
  font-weight:400; margin-top:.1rem;
}
.surfacing__field{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-ink-mid);
  border:1px solid var(--ink-line); padding:.2rem .45rem;
  white-space:nowrap;
}
.surfacing__foot{
  margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--ink-line);
  font-size:.76rem; color:var(--on-ink-dim);
}
.surfacing__foot a{ color:var(--gold); text-decoration:none; font-weight:500; }
.surfacing__foot a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Hero footer strip: the horizon line itself, with proof beneath */
.hero__horizon{ position:relative; z-index:2; }

.proof{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top:0;
}
.proof__item{
  padding: clamp(1.5rem,2.6vw,2.25rem) clamp(1rem,2vw,1.75rem);
  border-right:1px solid var(--ink-line);
}
.proof__item:first-child{ padding-left:0; }
.proof__item:last-child{ border-right:0; }
.proof__k{
  font-family:var(--display);
  font-size: var(--step-2);
  color: var(--on-ink);
  line-height:1;
  display:block; margin-bottom:.5rem;
}
.proof__v{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color: var(--on-ink-dim);
}

/* --- The promise: the statement the company rests on -------------------- */

/* Given its own plate rather than crowded into the hero, because two competing
   headlines weaken both. The first sentence lands word by word; the second
   arrives whole, since it is the payoff rather than a continuation. */

.manifesto{
  position:relative;
  background: var(--ink-2);
  color: var(--on-ink);
  overflow:hidden;
  border-block:1px solid var(--ink-line);
  padding-block: clamp(4rem, 8vw, 7rem);
}

/* The hero's dawn glow, turned down and moved behind the type. */
.manifesto__glow{
  position:absolute; left:50%; top:50%;
  width:min(120%, 1200px); aspect-ratio: 2.2 / 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at 42% 50%, rgb(255 106 0 / .15) 0%, transparent 60%),
    radial-gradient(ellipse at 26% 56%, rgb(255 79 163 / .11) 0%, transparent 58%),
    radial-gradient(ellipse at 68% 44%, rgb(106 27 154 / .17) 0%, transparent 62%);
  filter: blur(44px);
  pointer-events:none;
}
.manifesto .shell{ position:relative; z-index:2; }

.mf{
  font-family: var(--display);
  font-weight:400;
  font-size: var(--step-4);
  line-height:1.14;
  letter-spacing:-.005em;
  margin:1.25rem 0 0;
}
.mf__s, .mf__b{ display:block; max-width:24ch; text-wrap:balance; }
.mf__b{ margin-top:.28em; }

/* Each word rides in behind a clipping box. The box needs to be taller and wider
   than the glyphs or descenders and the italic overhang get sheared off; the
   matching negative margin puts the layout back where it was. */
.mf__w, .mf__b{
  overflow:hidden;
  padding:.06em .08em .22em;
  margin-inline:-.08em;
}
.mf__w{ display:inline-block; vertical-align:bottom; margin-block:-.06em -.22em; }
.mf__b{ margin-bottom:-.22em; }
.mf__w > span{ display:inline-block; }
.mf__b > span{ display:block; }

/* Armed by the script, never by the stylesheet: if JS fails the words have
   simply always been visible.
   The offset is its own height plus the box padding (.06 top + .22 bottom), not a
   round 100% — otherwise a sliver of the tallest ascender sits in the padding and
   the word looks like it is peeking rather than hidden. */
.manifesto.is-armed .mf__w > span,
.manifesto.is-armed .mf__b > span{
  transform: translateY(calc(100% + .32em));
  opacity:0;
}

.manifesto.is-in .mf__w > span,
.manifesto.is-in .mf__b > span{
  transform:none; opacity:1;
  transition: transform .68s var(--ease) var(--mf-d, 0ms),
              opacity .5s linear var(--mf-d, 0ms);
}
/* A beat of silence before the payoff line. */
.manifesto.is-in .mf__b > span{ transition-delay: calc(var(--mf-d, 0ms) + 220ms); }

/* Gold rule drawn under the last word of the first sentence, once that word has
   landed. A background rather than a pseudo-element, so the clipping box can't
   crop it. The delay is the word's own beat plus its travel time, so re-wording
   the sentence keeps the rule in step instead of drawing it early. */
.mf__w--mark > span{
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat:no-repeat;
  background-position: 0 100%;
  background-size: 0 .07em;
}
.manifesto.is-in .mf__w--mark > span{
  background-size: 100% .07em;
  transition: transform .68s var(--ease) var(--mf-d, 0ms),
              opacity .5s linear var(--mf-d, 0ms),
              background-size .75s var(--ease) calc(var(--mf-d, 0ms) + 680ms);
}

/* Deliberately NOT var(--nx): that ramp ends on --nx-purple, which sits at 1.98:1
   on this background. Gold, pink and orange measure 10.3, 6.1 and 6.5:1. First and
   last stop match so the tile loops without a seam. */
.mf__glow{
  font-style:italic;
  background: linear-gradient(90deg, var(--gold), var(--nx-pink), var(--nx-orange), var(--gold));
  background-size: 200% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation: mf-shimmer 7s linear infinite;
}
@keyframes mf-shimmer{ from{ background-position:0 50%; } to{ background-position:200% 50%; } }

/* --- Section frames ----------------------------------------------------- */

.band{ padding-block: var(--section-y); }
.band--ink{ background: var(--ink); color: var(--on-ink); }
.band--ink-2{ background: var(--ink-2); color: var(--on-ink); }
.band--paper{ background: var(--paper); color: var(--on-paper); }
/* Continues the band above it — must follow .band so padding-block loses */
.band--joined{ padding-top:0; }

.band__head{ max-width: 62ch; margin-bottom: clamp(2.5rem,5vw,4rem); }
.band__head h2{ font-size: var(--step-3); margin:0 0 1.1rem; }
.band__head p{ font-size: var(--step-1); line-height:1.55; }
.band--ink .band__head p,
.band--ink-2 .band__head p{ color: var(--on-ink-mid); }
.band--paper .band__head p{ color: var(--on-paper-mid); }

.band__head--split{
  max-width:none;
  display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(2rem,5vw,4.5rem); align-items:end;
}
.band__head--split h2{ margin-bottom:0; }

/* --- Thesis: the argument, set as editorial ----------------------------- */

.thesis{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2.5rem,6vw,6rem); }
.thesis__claim{
  font-family: var(--display);
  font-size: var(--step-3);
  line-height:1.08; letter-spacing:-.018em;
  color: var(--on-paper);
  margin:0;
}
.thesis__claim em{
  font-style:italic;
  background: var(--nx);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.thesis__body{ display:grid; gap:1.4rem; align-content:start; }
.thesis__body p{ color: var(--on-paper-mid); font-size: var(--step-0); }

.tenets{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:0; }
.tenets li{
  display:grid; grid-template-columns: auto 1fr; gap:1rem;
  padding:1.05rem 0; border-top:1px solid var(--paper-line);
  align-items:baseline;
}
.tenets li:last-child{ border-bottom:1px solid var(--paper-line); }
.tenets dfn{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--nx-purple); font-style:normal;
  padding-top:.2rem;
}
.tenets b{ font-weight:500; color:var(--on-paper); }
.tenets span{ color: var(--on-paper-mid); font-size:.92rem; display:block; }

/* --- Lifecycle: a real sequence, so numbering earns its place ----------- */

.cycle{ position:relative; }
.cycle__track{
  display:grid;
  grid-template-columns: repeat(9, minmax(0,1fr));
  gap:0;
  position:relative;
  /* we number these explicitly, so suppress the ol markers */
  list-style:none;
  margin:0; padding:0;
}
/* The rising line: discovery at dusk, legacy at dawn */
.cycle__track::before{
  content:"";
  position:absolute; left:0; right:0; top:2.15rem;
  height:1px;
  background: linear-gradient(90deg, var(--ink-line) 0%, var(--nx-orange) 38%, var(--nx-pink) 62%, var(--nx-purple) 88%, var(--nx-purple) 100%);
  opacity:.85;
}
.cycle__stage{
  position:relative;
  padding: 0 .6rem;
  text-align:left;
}
.cycle__no{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  color: var(--on-ink-dim); display:block; margin-bottom:1.15rem;
  line-height:1; /* fixed so the dot centres exactly on the track line */
}
.cycle__dot{
  display:block; /* span is inline by default — width/height would be ignored */
  position:relative; z-index:2;
  width:.7rem; height:.7rem; border-radius:50%;
  background: var(--ink-2);
  border:1px solid var(--on-ink-dim);
  margin-bottom:1.15rem;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.cycle__stage:hover .cycle__dot{ transform: scale(1.5); }
.cycle__stage[data-lit="1"] .cycle__dot{
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 .28rem rgb(255 179 0 / .16);
}
.cycle__name{
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--on-ink);
  display:block; margin-bottom:.4rem;
}
.cycle__note{ font-size:.78rem; color: var(--on-ink-dim); line-height:1.45; }

.cycle__caption{
  margin-top: clamp(2.5rem,5vw,3.5rem);
  padding-top:1.5rem;
  border-top:1px solid var(--ink-line);
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--on-ink-mid);
  max-width: 56ch;
}
.cycle__caption em{ font-style:italic; color: var(--on-ink); }

/* --- Infrastructure grid ------------------------------------------------ */

.stack{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  border-top:1px solid var(--ink-line);
  border-left:1px solid var(--ink-line);
}
.stack__cell{
  padding: clamp(1.5rem,2.4vw,2rem);
  border-right:1px solid var(--ink-line);
  border-bottom:1px solid var(--ink-line);
  position:relative;
  transition: background .28s var(--ease);
}
.stack__cell::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: var(--nx);
  transform: scaleX(0); transform-origin:left;
  transition: transform .34s var(--ease);
}
.stack__cell:hover{ background: rgb(22 30 48 / .55); }
.stack__cell:hover::before{ transform: scaleX(1); }
.stack__ref{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  color: var(--on-ink-dim); display:block; margin-bottom:1.6rem;
}
.stack__cell h3{ font-size: var(--step-1); color: var(--on-ink); margin:0 0 .6rem; }
.stack__cell p{ font-size:.86rem; color: var(--on-ink-mid); line-height:1.55; }
.stack__cell sup{ color: var(--gold); font-size:.6em; }

/* --- Bankable Data: the commercial engine ------------------------------- */

.bank{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(2.5rem,5vw,5rem); align-items:start; }

.bank h2{ font-size: var(--step-3); margin:0 0 1.1rem; }
.bank__lede{
  color: var(--on-paper-mid);
  font-size: var(--step-1);
  line-height:1.55;
  margin-bottom:2rem;
}

.asks{ list-style:none; margin:0; padding:0; }
.asks li{
  border-top:1px solid var(--paper-line);
  padding:1.15rem 0 1.15rem 0;
  display:grid; grid-template-columns:auto 1fr; gap:1rem;
  align-items:baseline;
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--on-paper);
}
.asks li:last-child{ border-bottom:1px solid var(--paper-line); }
.asks li::before{
  content:"?";
  font-family:var(--mono); font-size:.8rem; color: var(--nx-pink);
  font-weight:500;
}

.indices{
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(1.6rem,2.6vw,2.25rem);
}
.indices__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-bottom:.35rem;
}
.indices h3{ font-size: var(--step-2); color:var(--on-ink); margin:0; }
.indices__tag{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
}
.indices__note{ font-size:.82rem; color:var(--on-ink-dim); margin-bottom:1.5rem; }

.index-row{
  display:grid; grid-template-columns: 1fr auto;
  gap:1rem; align-items:center;
  padding:.85rem 0;
  border-top:1px solid var(--ink-line);
}
.index-row__name{ font-size:.9rem; color:var(--on-ink); }
.index-row__bar{
  grid-column:1 / -1;
  height:2px; background: var(--ink-line);
  position:relative; overflow:hidden;
}
.index-row__fill{
  position:absolute; inset:0 auto 0 0;
  width:var(--w,50%);
  background: var(--nx);
  transform: scaleX(0); transform-origin:left;
  transition: transform 1s var(--ease);
}
.is-charted .index-row__fill{ transform: scaleX(1); }
.index-row__val{
  font-family:var(--mono); font-size:.78rem; color:var(--gold);
  letter-spacing:.04em;
}

/* --- Trailblazer cards -------------------------------------------------- */

.people{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1px; background: var(--ink-line); }

.person{
  background: var(--ink-2);
  padding: clamp(1.5rem,2.4vw,2rem);
  display:flex; flex-direction:column; gap:1.15rem;
  transition: background .28s var(--ease);
}
.person:hover{ background: var(--ink-3); }

.person__top{ display:flex; align-items:center; gap:1rem; }
/* Monogram, not a stock photo — these are signals resolving into people */
.person__sigil{
  width:3.4rem; height:3.4rem; flex:none;
  display:grid; place-items:center;
  font-family: var(--display); font-size:1.3rem;
  color: var(--ink);
  background: var(--nx);
  letter-spacing:-.02em;
}
.person__id{ min-width:0; }
.person__name{ font-family:var(--display); font-size:var(--step-1); color:var(--on-ink); display:block; }
.person__role{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--on-ink-dim); margin-top:.25rem; display:block;
}
.person__quote{
  font-family: var(--display); font-size:1.02rem; line-height:1.42;
  color: var(--on-ink); font-style:italic; margin:0;
  padding-left:1rem; border-left:1px solid var(--gold);
}
.person__foot{
  margin-top:auto; padding-top:1.15rem; border-top:1px solid var(--ink-line);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
}
.person__score{ display:flex; align-items:baseline; gap:.35rem; }
.person__score b{
  font-family:var(--display); font-size:1.75rem; color:var(--gold);
  line-height:1; font-weight:400;
}
.person__score span{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-ink-dim);
}
.verified{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--on-ink-mid);
  border:1px solid var(--ink-line); padding:.3rem .5rem;
}
.verified svg{ color: var(--gold); flex:none; }
.verified--pending{ color:var(--on-ink-dim); }
.verified--pending svg{ color: var(--nx-pink); }

/* --- Audience columns --------------------------------------------------- */

.serve{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.75rem,3.5vw,3rem); }
.serve__col h3{
  font-size: var(--step-1); margin:0 0 1rem;
  padding-bottom:.85rem; border-bottom:1px solid var(--paper-line);
}
.serve__col ul{ list-style:none; margin:0; padding:0; }
.serve__col li{
  font-size:.9rem; color: var(--on-paper-mid);
  padding:.42rem 0 .42rem 1.1rem; position:relative;
}
.serve__col li::before{
  content:""; position:absolute; left:0; top:.95rem;
  width:.35rem; height:1px; background: var(--nx-purple);
}

/* --- Journal ------------------------------------------------------------ */

.journal{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1px; background: var(--ink-line); }
.jcard{
  background: var(--ink);
  padding: clamp(1.4rem,2.2vw,1.9rem);
  display:flex; flex-direction:column; gap:.85rem;
  text-decoration:none;
  min-height: 15rem;
  transition: background .28s var(--ease);
}
.jcard:hover{ background: var(--ink-2); }
.jcard__kicker{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--gold);
}
.jcard h3{ font-size: var(--step-1); color: var(--on-ink); margin:0; }
.jcard p{ font-size:.84rem; color: var(--on-ink-mid); line-height:1.5; }
.jcard__more{
  margin-top:auto;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color: var(--on-ink-dim);
  display:flex; align-items:center; gap:.45rem;
  transition: color .2s var(--ease), gap .2s var(--ease);
}
.jcard:hover .jcard__more{ color: var(--gold); gap:.75rem; }

/* --- Two-door CTA ------------------------------------------------------- */

.doors{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1px; background: var(--ink-line); }
.door{
  background: var(--ink-2);
  padding: clamp(2rem,4vw,3.25rem);
  display:flex; flex-direction:column; gap:1.1rem;
  position:relative; overflow:hidden;
}
.door::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--nx);
  transform: scaleX(0); transform-origin:left;
  transition: transform .5s var(--ease);
}
.door:hover::after{ transform: scaleX(1); }
.door h3{ font-size: var(--step-2); color: var(--on-ink); margin:0; }
.door p{ color: var(--on-ink-mid); font-size:.95rem; max-width:42ch; }
.door .btn{ align-self:flex-start; margin-top:.5rem; }
.door__list{ list-style:none; margin:0; padding:0; }
.door__list li{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  color: var(--on-ink-dim); padding:.32rem 0;
}

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

.foot{ background: var(--ink); color: var(--on-ink); padding-block: clamp(3rem,6vw,5rem) 0; }

/* Brand block plus four link columns. The brand column is widest because it carries the
   blurb and contact list; the rest divide what is left evenly. minmax(0,…) throughout so
   a long link cannot force the grid wider than the shell. */
.foot__top{
  display:grid; grid-template-columns: minmax(0,1.5fr) repeat(4, minmax(0,.85fr));
  gap: clamp(2rem,4vw,3.5rem);
  padding-bottom: clamp(2.5rem,5vw,4rem);
}
.foot__blurb{ font-size:.9rem; color: var(--on-ink-mid); max-width:34ch; margin:1.25rem 0 1.5rem; }
.foot__contact{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.foot__contact li{ display:flex; align-items:center; gap:.6rem; font-size:.85rem; color: var(--on-ink-mid); }
.foot__contact svg{ color: var(--gold); flex:none; }
.foot__contact a{ text-decoration:none; }
.foot__contact a:hover{ color: var(--gold); }

.foot__col h2{
  font-family:var(--mono); font-weight:500;
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color: var(--on-ink); margin:0 0 1.1rem;
}
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; }
.foot__col a{ font-size:.86rem; color: var(--on-ink-mid); text-decoration:none; }
.foot__col a:hover{ color: var(--gold); }

.foot__base{
  border-top:1px solid var(--ink-line);
  padding-block:1.6rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.foot__base p{ font-size:.78rem; color: var(--on-ink-dim); }
.foot__legal{ text-decoration:none; }
.foot__legal:hover{ color: var(--gold); text-decoration:underline; text-underline-offset:3px; }
.foot__sig{
  font-family: var(--display); font-size: var(--step-1);
  color: var(--on-ink-mid); font-style:italic;
}
.foot__sig b{ font-weight:400; font-style:normal; color: var(--gold); }

/* --- Scroll reveal ------------------------------------------------------ */

.rise{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1; transform:none; transition:none; }
  .pulse::before{ animation:none; }
  .index-row__fill{ transition:none; transform: scaleX(1); }
  .btn:hover{ transform:none; }

  /* The statement keeps its emphasis and loses its movement. The clipping boxes
     have to be released too, or the words stay parked out of frame — the script
     also skips arming, so this is belt and braces. */
  .manifesto .mf__w,
  .manifesto .mf__b{ overflow:visible; }
  .manifesto.is-armed .mf__w > span,
  .manifesto.is-armed .mf__b > span{ transform:none; opacity:1; }
  .manifesto .mf__w > span,
  .manifesto .mf__b > span{ transition:none; }
  .mf__w--mark > span{ background-size: 100% .07em; }
  .mf__glow{ animation:none; background-position:0 50%; }
}

/* --- Responsive --------------------------------------------------------- */

/* The complete masthead needs slightly more room than the page grids. Keep the compact navigation
   through the narrow-laptop range so labels and the nomination action never wrap into a crowded
   two-line header. Interior layouts continue to use their established 1080px breakpoint below. */
@media (max-width: 1159px){
  .nav, .masthead__actions .btn, .masthead__actions .text-link{ display:none; }
  .burger{ display:grid; }
  .mobile-nav{
    position:fixed;
    z-index:99;
    inset:6.5rem 0 auto;
    max-height:calc(100vh - 6.5rem);
    max-height:calc(100dvh - 6.5rem);
    overflow-y:auto;
  }
}

@media (max-width: 1080px){
  .hero__inner{ grid-template-columns: minmax(0,1fr); }
  .hero h1{ max-width: 18ch; }
  .stack{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .journal{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cycle__track{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:2rem 0; }
  .cycle__track::before{ display:none; }
  .cycle__stage{ padding-left:0; }

  /* The brand block takes a full row so the four link columns pair off 2×2. Left in
     the normal flow, an odd number of children strands the last column on its own. */
  .foot__top{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot__brand{ grid-column: 1 / -1; }
}

@media (max-width: 860px){
  .band__head--split{ grid-template-columns: minmax(0,1fr); align-items:start; }
  .thesis{ grid-template-columns: minmax(0,1fr); }
  .bank{ grid-template-columns: minmax(0,1fr); }
  .people{ grid-template-columns: minmax(0,1fr); }
  .serve{ grid-template-columns: minmax(0,1fr); }
  .doors{ grid-template-columns: minmax(0,1fr); }
  .proof{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .proof__item{ border-bottom:1px solid var(--ink-line); }
  .proof__item:nth-child(2n){ border-right:0; }
  .proof__item:nth-child(2n+1){ padding-left:0; }
}

@media (max-width: 560px){
  .cycle__track{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stack{ grid-template-columns: minmax(0,1fr); }
  .journal{ grid-template-columns: minmax(0,1fr); }
  .surfacing__list li{ grid-template-columns: 1.8rem 1fr; }
  .surfacing__field{ display:none; }

  /* From here down the shell is narrower than the 24ch cap (about 512px against
     614px at this size), so the cap stops doing anything and only risks stranding
     a word. The container is the measure now. */
  .mf__s, .mf__b{ max-width:none; }
  .mf{ font-size: var(--step-3); }
}

/* The full descriptor is useful while the masthead has room for it. On compact phones the
   fixed-width lockup and the 44px menu control cannot share the shell, which pushes the menu out
   of view and makes the whole document horizontally scrollable. Keep the mark and wordmark, and
   let the descriptor yield at the only width where it cannot fit. */
@media (max-width: 420px){
  .masthead .brand__sub{ display:none; }
}

@media print{
  .masthead, .burger, .mobile-nav{ display:none; }
  body{ background:#fff; color:#000; }
}