/* Flowscale tokens. Change a value here and the whole site moves at once. */
:root {
  /* canvas + ink */
  --canvas: #100a18;          /* oklch(0.16 0.03 305) */
  --ink: #f3f0f8;             /* oklch(0.96 0.012 305) */
  --accent: #8156c0;          /* oklch(0.55 0.16 300) ambient + UI accents only */
  --gold: #f4a437;            /* oklch(0.78 0.15 70) action only */
  --gold-hi: #ffb64f;
  --gold-lo: #c9852c;

  /* neutral ramp, hue 305 */
  --n-100: #171519;
  --n-200: #252328;
  --n-300: #151317;
  --n-400: #1e1c22;
  --n-500: #8e8a92;

  /* type */
  --font-display: 'Hanken Grotesk', sans-serif;
  --font-body: 'Zilla Slab', serif;
  --t-meta: 16px;
  --t-body: 18px;
  --t-nav: 20px;
  --t-lead: 24px;
  --t-3: 32px;
  --t-2: 43px;
  --t-1: 57px;
  --t-h1: clamp(26px, calc((100vw - 176px) / 26), 44px);
  --t-hero: clamp(38px, 11vw, 62px);
  --lh-tight: 0.94;
  --lh-head: 1.08;
  --lh-body: 1.55;

  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 20px;
  --s-5: 28px;
  --s-6: 40px;
  --s-7: 56px;
  --s-8: 80px;
  --s-9: 112px;
  --s-10: 160px;

  /* radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;

  /* motion */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --d-feedback: 120ms;
  --d-state: 250ms;
  --d-layout: 400ms;
  --d-in: 650ms;
  --d-out: 480ms;

  --texture: url('texture.svg');
  --edge: 1px solid rgba(129, 86, 192, 0.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--canvas); }
body { font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-sm); }

/* layout collapse: the only rules that cannot be inline */
.fs-page { padding-bottom: 96px; }
.fs-broadsheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.fs-narrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.fs-broadsheet-rev { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.fs-navcta { display: none; }
.fs-callbar { display: grid; grid-template-columns: 1fr 1fr; }
.fs-hero-pad { padding: var(--s-8) var(--s-4) var(--s-8); }
.fs-sec-pad { padding: var(--s-8) var(--s-4); }
.fs-pad-a { padding: var(--s-8) var(--s-4) var(--s-6); }
.fs-pad-b { padding: var(--s-6) var(--s-4) var(--s-9); }
.fs-pad-c { padding: var(--s-8) var(--s-4) var(--s-7); }
.fs-pad-d { padding: var(--s-6) var(--s-4) var(--s-8); }
.fs-pad-legal { padding: var(--s-9) var(--s-4) var(--s-8); }
.fs-pad-foot { padding: var(--s-7) var(--s-4); }
.fs-nav-pad { padding: var(--s-3) var(--s-4); }

/* 44px minimum hit boxes on inline links, underline stays tight to the text */
.fs-wordmark, .fs-flink, .fs-flink-quiet, .fs-flink-cur, .fs-ilink {
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color var(--d-feedback) var(--ease);
}
.fs-flink, .fs-flink-cur, .fs-ilink { color: var(--ink); }
.fs-flink-quiet { color: var(--n-500); }
.fs-flink > span, .fs-ilink > span {
  border-bottom: 1px solid var(--n-200);
  transition: border-color var(--d-state) var(--ease);
}
.fs-flink:hover, .fs-flink-cur:hover, .fs-ilink:hover { color: var(--gold); }
.fs-flink:hover > span, .fs-ilink:hover > span { border-bottom-color: var(--gold); }
.fs-flink-quiet:hover { color: var(--ink); }
.fs-hero { font-size: var(--t-hero); }
@media (min-width: 900px) {
  .fs-hero { font-size: min(calc((100vw - 176px) / 10.6), 132px); }
  .fs-hero span { white-space: nowrap; }
  .fs-page { padding-bottom: 0; }
  .fs-broadsheet { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-9); }
  .fs-narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); gap: var(--s-8); }
  .fs-broadsheet-rev { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: var(--s-8); }
  .fs-navcta { display: inline-flex; }
  .fs-callbar { display: none; }
  .fs-hero-pad { padding: var(--s-10) var(--s-8) var(--s-9); }
  .fs-sec-pad { padding: var(--s-9) var(--s-8); }
  .fs-pad-a { padding: var(--s-9) var(--s-8) var(--s-7); }
  .fs-pad-b { padding: var(--s-7) var(--s-8) var(--s-10); }
  .fs-pad-c { padding: var(--s-9) var(--s-8) var(--s-8); }
  .fs-pad-d { padding: var(--s-7) var(--s-8) var(--s-9); }
  .fs-pad-legal { padding: var(--s-10) var(--s-8) var(--s-9); }
  .fs-pad-foot { padding: var(--s-7) var(--s-8); }
  .fs-nav-pad { padding: var(--s-3) var(--s-8); }
}

/* signature 1: breathing aurora */
@keyframes fsBreathe {
  0%, 100% { opacity: 0.55; transform: scale(1) translate3d(0, 0, 0); }
  50% { opacity: 0.82; transform: scale(1.07) translate3d(0, -1.5%, 0); }
}
.fs-breathe { animation: fsBreathe 24s var(--ease) infinite; will-change: transform, opacity; }

/* signature 2: cursor glow trail */
.fs-cursor {
  position: fixed; top: 0; left: 0; width: 340px; height: 340px; margin: -170px 0 0 -170px;
  pointer-events: none; z-index: 5; opacity: 0;
  background: radial-gradient(closest-side, rgba(129,86,192,0.30), rgba(129,86,192,0.08) 55%, rgba(129,86,192,0) 76%);
  transition: opacity var(--d-out) var(--ease);
}

@keyframes fsRise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.fs-rise { animation: fsRise var(--d-in) var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .fs-breathe, .fs-rise { animation: none !important; }
  .fs-cursor { display: none !important; }
  * { transition-duration: 1ms !important; }
}

/* Home Lean: mobile decluttering */
.fs-page-flat { padding-bottom: 0; }
.fs-nav-tight { gap: var(--s-4); min-width: 0; }
.fs-lean-nav { flex-wrap: wrap; row-gap: var(--s-1); padding: var(--s-2) var(--s-4) var(--s-3); }
.fs-lean-nav > .fs-nav-tight { flex: 1 0 100%; }
.fs-lean-hero { padding: var(--s-7) var(--s-4) var(--s-6); }
.fs-lean-sec { padding: var(--s-7) var(--s-4); }
.fs-lean-foot { padding: var(--s-6) var(--s-4); display: grid; gap: var(--s-2); justify-items: start; }
.fs-lean-legal { display: flex; gap: var(--s-5); }
.fs-lean-cta { width: 100%; }
@media (min-width: 900px) {
  .fs-nav-tight { gap: var(--s-5); }
  .fs-lean-nav { flex-wrap: nowrap; padding: var(--s-3) var(--s-8); }
  .fs-lean-nav > .fs-nav-tight { flex: 0 1 auto; }
  .fs-lean-hero { padding: var(--s-10) var(--s-8) var(--s-9); }
  .fs-lean-sec { padding: var(--s-9) var(--s-8); }
  .fs-lean-foot { padding: var(--s-7) var(--s-8); grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--s-6); align-items: center; }
  .fs-lean-cta { width: auto; }
}

/* Home layout option: Ledger */
.fs-hero-rail { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-7); }
.fs-ledger-row { display: grid; grid-template-columns: 3.4ch minmax(0,1fr); gap: var(--s-4); padding: var(--s-5) 0; }
/* Home layout option: Overhang */
.fs-lean-1 { margin-left: 0; }
.fs-lean-2 { margin-left: 4%; }
.fs-lean-3 { margin-left: 9%; }
.fs-stair-1, .fs-stair-2, .fs-stair-3, .fs-stair-4 { margin-left: 0; }
/* Home layout option: Band */
.fs-band { display: grid; grid-template-columns: minmax(0,1fr); }
.fs-band-cell + .fs-band-cell { border-top: 1px solid var(--n-200); }
@media (min-width: 900px) {
  .fs-ledger-row { grid-template-columns: 4ch minmax(0,52ch); gap: var(--s-6); padding: var(--s-6) 0; }
  .fs-stair-2 { margin-left: 6%; }
  .fs-stair-3 { margin-left: 12%; }
  .fs-stair-4 { margin-left: 18%; }
  .fs-band { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .fs-band-cell + .fs-band-cell { border-top: 0; border-left: 1px solid var(--n-200); }
  .fs-band-cell { padding: var(--s-8) var(--s-5); }
}

/* Ledger option: the right rail needs room, so the hero is sized against the narrower measure */
@media (min-width: 1150px) {
  .fs-hero-rail { grid-template-columns: minmax(0,1fr) 300px; gap: var(--s-9); align-items: end; }
  .fs-rail { border-left: 1px solid var(--n-200); padding-left: var(--s-5); }
  .fs-hero-narrow { font-size: min(calc((100vw - 588px) / 10.6), 112px); }
}

/* export-transform.mjs: 44px minimum tap target on clickable form labels */
label[for] { min-height: 44px; display: inline-flex; align-items: center; }

/* export-transform.mjs: Leo chose flush-left over the inherited Home Lean headline stagger */
.fs-lean-1, .fs-lean-2, .fs-lean-3 { margin-left: 0 !important; }

/* export-transform.mjs: sticky footer, so a short page (Terms, Privacy) does not strand the footer mid-screen with dead space below it */
.fs-page { display: flex; flex-direction: column; }
.fs-page > main { flex: 1 0 auto; }

/* export-transform.mjs: nav links wrapped ("What We Do" broke onto two lines) below 480px with the exported 28px inline gap. First fix (6px) read as too cramped; 20px, calculated from a real emulated measurement of the available space, wrapped again at 360px in the actual screenshot regardless. Real-screenshot rendering has disagreed with every calculation and pre-render measurement tried so far, so this number came from bisecting purely against real screenshots at the narrowest tested width, nothing else. !important overrides the inline style, which nothing else can. */
@media (max-width: 480px) {
  nav.fs-nav-pad { padding-left: 8px !important; padding-right: 8px !important; }
  nav.fs-nav-pad > div { gap: 12px !important; }
}

/* export-transform.mjs: display type (hero, H1, lead paragraphs) sized down on mobile only, per Leo -- reads as too big to take in at a glance on a phone. Desktop (900px+) is untouched. */
@media (max-width: 899px) {
  :root {
    --t-hero: clamp(30px, 8.5vw, 44px);
    --t-h1: clamp(24px, 7vw, 32px);
    --t-3: 22px;
    --t-lead: 20px;
  }
}

/* export-transform.mjs: Home hero min-height cut on mobile only, per Leo -- 84vh centered a now-smaller headline inside a mostly empty phone screen. Desktop (900px+) is untouched. */
@media (max-width: 899px) {
  .fs-hero-pad { min-height: 58vh !important; }
}