/* Northlane — shared design system for northlanestudio.dev.

   Used by the studio home (index.html + css/studio.css) and the Solaris
   landing (solaris/index.html + css/solaris.css). Graphite, the faint
   engineering grid, the content rails with ticks where each section divider
   crosses them, numbered mono kickers, DM Sans + JetBrains Mono, and colour
   only in the marks and the status dots. Split section heads, hairline tables
   instead of loose cards, framed panels with crop marks.

   The legal pages still load css/style.css (the pre-2026-10 system). Same
   token values, so everything reads as one family. */


:root {
  --t1: #f2f2f2;
  --t2: #ababab;
  --t3: #6f6f6f;
  --accent: #ffffff;

  --bg: #131313;
  --bg-elev: #1c1c1c;
  --bg-deep: #0e0e0e;
  --tint: #ffffff;
  --border-soft: color-mix(in srgb, var(--tint) 6%, transparent);
  --border: color-mix(in srgb, var(--tint) 10%, transparent);
  --border-strong: color-mix(in srgb, var(--tint) 18%, transparent);

  /* the only colours on the page besides the logos: status dots */
  --live: #2dd4bf;
  --ok: #35d07f;

  --rail: color-mix(in srgb, var(--tint) 6%, transparent);
  --grid-line: color-mix(in srgb, var(--tint) 3.5%, transparent);
  --hairline: #5c5c64;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 14px;

  --font-main: 'DM Sans', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  --ease: cubic-bezier(0.22, 0.9, 0.24, 1);
  --ease-in-out: cubic-bezier(0.6, 0.02, 0.24, 1);
  --dur-1: 0.12s;
  --dur-2: 0.2s;
  --dur-3: 0.34s;
  --dur-4: 0.6s;

  --nav-h: 64px;
  --maxw: 1180px;
  --gutter: 28px;
  --sec-pad: 128px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- base ------------------------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

::selection { background: var(--accent); color: var(--bg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}

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

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--accent); color: var(--bg); font-size: 14px; font-weight: 600;
  transition: top var(--dur-2) var(--ease);
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.icon {
  width: 18px; height: 18px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* --- backdrop: engineering grid + rails ------------------------------------- */

.site-bg {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
  background: var(--bg);
}
.site-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(115% 80% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(115% 80% at 50% 0%, #000 30%, transparent 78%);
}
/* a whisper of noise so wide screens don't band */
.site-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.025;
}

/* vertical hairlines at the content column edge, the whole page down */
.site-rails {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  max-width: var(--maxw);
  margin: 0 auto;
  border-left: 1px solid var(--rail);
  border-right: 1px solid var(--rail);
}
@media (max-width: 1240px) { .site-rails { display: none; } }

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  height: 2px;
  transform: scaleX(0); transform-origin: left;
  background: var(--hairline);
  will-change: transform;
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.btn .icon { width: 16px; height: 16px; }
.btn .arrow { transition: transform var(--dur-2) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: scale(0.97); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }

.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn-ghost { border-color: var(--border-strong); color: var(--t1); }
.btn-ghost:hover { background: var(--bg-elev); border-color: color-mix(in srgb, var(--tint) 28%, transparent); }

.btn.is-disabled { opacity: 0.45; pointer-events: none; cursor: default; }

/* --- shared bits ----------------------------------------------------------- */

/* status: mono label with a dot; teal + breathing halo when live */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t3);
  white-space: nowrap;
}
.status i {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  border: 1px solid var(--t3);
}
.status.is-live { color: var(--t1); }
.status.is-live i {
  border: 0;
  background: var(--live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent);
  animation: halo 3.4s var(--ease-in-out) infinite;
}
@keyframes halo { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* small square icon holder */
.tile {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--tint) 4%, transparent);
  color: var(--t1);
  transition: border-color var(--dur-3) var(--ease);
}
.tile .icon { width: 17px; height: 17px; }

/* platform marker: filled dot = shipping, hollow = next */
.plat {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--t2);
  white-space: nowrap;
}
.plat::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%; flex: none;
}
.plat.is-on::before { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.plat.is-next { color: var(--t3); }
.plat.is-next::before { border: 1px dashed var(--t3); }

/* engineering crop marks around a framed element */
.frame { position: relative; }
.cm {
  position: absolute; z-index: 1;
  width: 12px; height: 12px;
  pointer-events: none;
  border: 0 solid var(--border-strong);
}
.cm-tl { top: -9px; left: -9px; border-top-width: 1px; border-left-width: 1px; }
.cm-tr { top: -9px; right: -9px; border-top-width: 1px; border-right-width: 1px; }
.cm-bl { bottom: -9px; left: -9px; border-bottom-width: 1px; border-left-width: 1px; }
.cm-br { bottom: -9px; right: -9px; border-bottom-width: 1px; border-right-width: 1px; }

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

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
}
.nav.scrolled, html.menu-open .nav {
  background: var(--bg);
  border-bottom-color: var(--border);
}
.nav-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  justify-self: start;
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand img { width: 28px; height: 28px; border-radius: 7px; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  position: relative;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
  color: var(--t3);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.nav-links a:hover { color: var(--t1); }
.nav-links a.is-active { color: var(--t1); background: color-mix(in srgb, var(--tint) 6%, transparent); }

.nav-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }

.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
}
.nav-toggle .icon-close { display: none; }
html.menu-open .nav-toggle .icon-open { display: none; }
html.menu-open .nav-toggle .icon-close { display: block; }

.mobile-panel {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 90;
  display: flex; flex-direction: column;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-12px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease), visibility var(--dur-3);
}
.mobile-panel a:not(.btn) {
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
}
.mobile-panel a span { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--t3); letter-spacing: 0.06em; }
.mobile-panel .btn { margin-top: 24px; }
html.menu-open .mobile-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
html.menu-open, html.menu-open body { overflow: hidden; }

/* --- sections ------------------------------------------------------------- */

section { position: relative; padding: var(--sec-pad) 0; }

/* every section after the first opens with a hairline that brightens toward
   the middle — the divider that keeps the scroll legible */
section + section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 28%, var(--border-strong) 72%, transparent);
}
/* a small square where that divider crosses each content rail */
@media (min-width: 1241px) {
  section > .wrap { position: relative; }
  section + section > .wrap::before,
  section + section > .wrap::after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--sec-pad) - 3.5px);
    width: 7px; height: 7px;
    border: 1px solid var(--border-strong);
    background: var(--bg);
  }
  section + section > .wrap::before { left: -3.5px; }
  section + section > .wrap::after { right: -3.5px; }
}

.sec-head { margin-bottom: 64px; }
.sec-label {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 30px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t3);
}
.sec-num {
  padding: 2px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg-elev) 60%, transparent);
  color: var(--t1); font-weight: 600; letter-spacing: 0.06em;
}
.sec-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }

.sec-title {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: end;
}
.sec-title h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.sec-title p {
  max-width: 52ch;
  font-size: 15.5px; line-height: 1.65;
  color: var(--t2);
}

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

.hero { padding: calc(var(--nav-h) + 104px) 0 var(--sec-pad); }

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 13px 6px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--t2);
}
.badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent);
  animation: halo 3.4s var(--ease-in-out) infinite;
}

.hero-title {
  margin: 28px 0 40px;
  font-size: clamp(2.35rem, 6.6vw, 5.4rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.042em;
}
.hero-title span { display: block; text-wrap: balance; }
.hero-title .dim {
  /* second line steps down to grey, the way the app greys secondary text */
  background: linear-gradient(90deg, var(--t2), var(--t3) 85%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}

.hero-sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
}
.hero-sub .lede {
  max-width: 54ch;
  font-size: 17px; line-height: 1.65;
  color: var(--t2);
}
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* metrics strip */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 72px;
  border-top: 1px solid var(--border);
}
.metric { padding: 26px 28px 0; border-left: 1px solid var(--border); }
.metric:first-child { padding-left: 0; border-left: 0; }
.metric dt {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t3);
}
.metric-n {
  margin: 14px 0 10px;
  font-size: clamp(2.2rem, 3.6vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.metric-plus { margin-left: 4px; font-size: 0.5em; letter-spacing: -0.01em; color: var(--t3); vertical-align: 0.65em; }
.metric-d { max-width: 28ch; font-size: 13.5px; line-height: 1.55; color: var(--t2); }

/* --- principle grid (shared-border cells) ------------------------------------- */

.principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-elev) 40%, transparent);
  overflow: hidden;
}
.principle {
  position: relative;
  padding: 26px 26px 34px;
  border-left: 1px solid var(--border);
  transition: background var(--dur-3) var(--ease);
}
.principle:first-child { border-left: 0; }
.principle::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--t1);
  opacity: 0; transform: scaleX(0.3); transform-origin: left;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-4) var(--ease);
}
.principle:hover { background: color-mix(in srgb, var(--bg-elev) 85%, transparent); }
.principle:hover::before { opacity: 0.45; transform: none; }
.principle:hover .tile { border-color: var(--border-strong); }
.pr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 44px; }
.pr-n { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--t3); }
.principle h3 { margin-bottom: 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.012em; }
.principle p { font-size: 13.5px; line-height: 1.65; color: var(--t2); }

/* --- timeline -------------------------------------------------------------------- */

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.timeline::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 6px;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), var(--border) 70%, transparent);
}
.tl { position: relative; padding: 38px 32px 0 0; }
.tl-node {
  position: absolute; left: 0; top: 0;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg);
}
.tl.is-now .tl-node {
  border-color: transparent;
  background: var(--live);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--live) 18%, transparent);
}
.tl-when {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t3);
}
.tl.is-now .tl-when { color: var(--t1); }
.tl-tag {
  display: table; /* own line, shrink-to-fit */
  margin-top: 8px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--live) 40%, transparent);
  border-radius: 4px;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em;
  color: var(--live);
}
.tl p { font-size: 14.5px; line-height: 1.65; color: var(--t2); }
.tl p b { color: var(--t1); font-weight: 600; }

/* --- row list ----------------------------------------------------------------- */

.craft { border-top: 1px solid var(--border); }
.craft-row {
  display: grid;
  grid-template-columns: 52px 36px minmax(0, 300px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 28px 12px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-3) var(--ease);
}
.craft-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 3%, transparent), transparent 80%); }
.craft-row:hover .tile { border-color: var(--border-strong); }
.craft-n { padding-top: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--t3); }
.craft-row h3 { padding-top: 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.craft-row p { max-width: 62ch; padding-top: 7px; font-size: 14.5px; line-height: 1.65; color: var(--t2); }

/* --- framed CTA panel ------------------------------------------------------------ */

.contact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
  padding: 56px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-elev) 72%, transparent);
  overflow: hidden;
}
.contact::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--hairline); opacity: 0.6;
}
.contact .sec-label { margin-bottom: 24px; }
.contact h2 {
  margin-bottom: 16px;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.03em;
  text-wrap: balance;
}
.contact-copy > p { max-width: 44ch; margin-bottom: 30px; font-size: 15.5px; line-height: 1.65; color: var(--t2); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.contact-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  overflow: hidden;
}
.contact-list > div { padding: 16px 18px; border-top: 1px solid var(--border); }
.contact-list > div:first-child { border-top: 0; }
.contact-list dt {
  margin-bottom: 5px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t3);
}
.contact-list dd { font-size: 14px; color: var(--t1); overflow-wrap: anywhere; }
.contact-list a { border-bottom: 1px solid var(--border-strong); transition: border-color var(--dur-2) var(--ease); }
.contact-list a:hover { border-color: var(--t1); }

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

/* solid and darker than the page; lifted clear of the fixed backdrop/rails */
.footer {
  position: relative; z-index: 1;
  padding: 72px 0 36px;
  background: var(--bg-deep);
  border-top: 1px solid var(--border-strong);
}
.footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 48px; flex-wrap: wrap;
  margin-bottom: 56px;
}
.footer-brand p { max-width: 36ch; margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--t3); }
.footer-cols { display: flex; gap: 72px; flex-wrap: wrap; }
.footer-col h4 {
  margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t3);
}
.footer-col a, .footer-col .is-soon { display: block; margin-bottom: 11px; font-size: 13.5px; color: var(--t2); }
.footer-col a { transition: color var(--dur-2) var(--ease); }
.footer-col a:hover { color: var(--t1); }
.footer-col .is-soon { font-family: var(--font-mono); font-size: 12px; color: var(--t3); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 24px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em;
  color: var(--t3);
}
.to-top { display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-2) var(--ease); }
.to-top .icon { width: 13px; height: 13px; }
.to-top:hover { color: var(--t1); }

/* --- reveal on scroll ----------------------------------------------------------- */

/* Hidden only once the inline <head> script has tagged <html class="js">, so
   the page still shows everything if scripts never run. */
.reveal, .reveal-item {
  transition: opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease);
}
.reveal-item { transition-duration: 0.5s; }
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal-item { opacity: 0; transform: translateY(12px); }
.js .reveal.in-view, .js .reveal-group.in-view .reveal-item { opacity: 1; transform: none; }
.reveal-item:nth-child(2) { transition-delay: 0.07s; }
.reveal-item:nth-child(3) { transition-delay: 0.14s; }
.reveal-item:nth-child(4) { transition-delay: 0.21s; }
.reveal-item:nth-child(5) { transition-delay: 0.28s; }

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

@media (max-width: 1080px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principle:nth-child(3) { border-left: 0; }
  .principle:nth-child(n+3) { border-top: 1px solid var(--border); }
}

@media (max-width: 920px) {
  :root { --sec-pad: 104px; }
  /* the mono links + the wordmark stop fitting on one line around here */
  .nav-row { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .sec-title { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero-sub { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { padding-bottom: 26px; }
  .metric:nth-child(3) { padding-left: 0; border-left: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--border); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .timeline::before { display: none; }
  .tl { border-top: 1px solid var(--border); padding-top: 34px; }
  .tl-node { top: -7px; }
  .contact { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 44px 36px; }
  .craft-row { grid-template-columns: 44px 36px minmax(0, 1fr); }
  .craft-row p { grid-column: 3; padding-top: 0; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; --sec-pad: 84px; }
  .nav-actions .btn { display: none; }
  .brand { font-size: 15px; }

  .hero { padding-top: calc(var(--nav-h) + 56px); }
  .hero-title { margin: 24px 0 26px; }
  .hero-sub .lede { font-size: 16px; }
  .hero-actions .btn { flex: 1 1 100%; }

  .cm { display: none; }

  .metrics { margin-top: 56px; }
  .metric { padding: 22px 0 22px 18px; }
  .metric:nth-child(odd) { padding-left: 0; }

  .sec-head { margin-bottom: 44px; }
  .sec-label { margin-bottom: 22px; }

  .principles { grid-template-columns: minmax(0, 1fr); }
  .principle { border-left: 0; }
  .principle:nth-child(n+2) { border-top: 1px solid var(--border); }
  .pr-top { margin-bottom: 26px; }

  .craft-row { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 16px; padding: 24px 0; }
  .craft-n { display: none; }
  .craft-row h3 { padding-top: 7px; }
  .craft-row p { grid-column: 1 / -1; }

  .timeline { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-left: 28px; }
  .timeline::before { display: block; left: 6px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; background: linear-gradient(180deg, var(--border-strong), var(--border) 70%, transparent); }
  .tl { border-top: 0; padding: 0 0 34px; }
  .tl:last-child { padding-bottom: 0; }
  .tl-node { left: -28px; top: 2px; }

  .contact { padding: 30px 20px; gap: 30px; }
  .contact-actions .btn { flex: 1 1 100%; }

  .footer { padding-top: 56px; }
  .footer-cols { gap: 32px 48px; }
}

@media (max-width: 400px) {
  .metric-d { font-size: 12.5px; }
}