/* ---- tokens/colors.css ---- */
/* Base palette — raw values only. Never reference these directly in components; use tokens/semantic.css aliases. */
:root{
  /* Brand — from Merch 3.0 guide: PANTONE 151 C / RGB 255 120 29 */
  --qst-orange: #FF781D;
  --qst-black: #1D1D1B;   /* wordmark ink */
  --qst-white: #FFFFFF;

  /* Orange ramp (brand at 500) */
  --orange-50:  #FFF4EC;
  --orange-100: #FFE3CE;
  --orange-200: #FFC79C;
  --orange-300: #FFA765;
  --orange-400: #FF8D3B;
  --orange-500: #FF781D;
  --orange-600: #E85F06;
  --orange-700: #BC4B03;
  --orange-800: #8C3803;
  --orange-900: #5A2402;
  /* Text-size use on LIGHT grounds: no step passes AA 4.5:1 on every text-bearing surface
     (600 = 2.92–3.46:1, 700 = 4.27:1 worst, on --surface-active). At text size use ink;
     orange text exists only in the dark theme (400 = 5.07:1 worst, on --surface-raised).
     Display type ≥24px may keep 500 as the accent word — a documented deviation (2.55:1). */
  /* Quiet orange — the tone used on large dark fields where 500 is too hot. */
  --orange-quiet: #C5751C;

  /* Neutrals — cool slate greys with a faint fjord blue, so light and dark share
     one temperature. Never warm, never a pure neutral, never navy. */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFBFC;
  --neutral-50:  #F3F5F8;
  --neutral-75:  #E9EEF4;   /* sunken bands — a fjord step below page */
  --neutral-100: #E8ECF1;
  --neutral-200: #D7DDE5;
  --neutral-300: #BEC7D1;
  --neutral-400: #98A3B0;
  --neutral-500: #75808D;
  --neutral-600: #59636E;
  --neutral-700: #414A54;
  --neutral-800: #2A323B;
  --neutral-900: #1A2129;
  --neutral-950: #0E141A;

  /* Ink fjord — the dark anchor. Deep Nordic blue-grey, deliberately lifted off
     black so page / card / raised separate at a glance and orange reads as an
     accent rather than a warning light. Replaces both pure black and navy. */
  --ink-950: #10171E;   /* sunken, underlays */
  --ink-900: #1A242E;   /* dark page */
  --ink-850: #222E3A;   /* dark card */
  --ink-800: #2B3A48;   /* raised, wells */
  --ink-700: #354654;   /* hover */
  --ink-600: #405264;   /* strong line */
  --ink-line:        rgba(160,183,203,.16);
  --ink-line-strong: rgba(160,183,203,.30);

  /* Pine — chart and signal green. The "up" family, chart series, illustration
     line work. NOT a general secondary accent: quiet emphasis is slate grey. */
  --pine-50:  #EDF4EF;
  --pine-100: #D6E7DC;
  --pine-200: #AECFBA;
  --pine-300: #7DB093;
  --pine-400: #4E8F6D;
  --pine-500: #2F7353;
  --pine-600: #245C43;
  --pine-700: #1B4633;
  --pine-800: #133224;

  /* Signals — market-data semantics. Cool so they never read as brand orange. */
  --signal-up:      #1E9B6E;
  --signal-up-dim:  #14664A;
  --signal-down:    #DC2F45;
  --signal-down-dim:#93132A;
  --signal-info:    #3E6FB8;
  --signal-warn:    #C98A00;
}


/* ---- tokens/semantic.css ---- */
/* Semantic aliases. Light is the default; [data-theme="dark"] flips the same names.
   Components read ONLY these. Use data-theme="light" to force a light island inside a dark context. */
:root,[data-theme="light"]{
  --surface-page:      var(--neutral-25);
  --surface-card:      var(--neutral-0);
  --surface-sunken:    var(--neutral-75);
  --surface-raised:    var(--neutral-0);
  --surface-inverse:   var(--ink-900);
  --surface-ink:       var(--ink-900);   /* full-bleed dark band on a light page */
  --surface-brand:     var(--orange-500);
  --surface-brand-soft:var(--orange-50);
  --surface-hover:     var(--neutral-50);
  --surface-active:    var(--neutral-100);
  --surface-selected:  var(--orange-50);
  --surface-overlay:   rgba(14,20,26,.45);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-tertiary:  var(--neutral-600);
  --text-inverse:   var(--neutral-100);
  --text-on-ink:    var(--neutral-100);
  /* Orange is not a text colour on light grounds: no ramp step reaches 4.5:1 on all six
     text-bearing surfaces (600 worst 2.92:1, 700 worst 4.27:1). Brand emphasis and links
     are ink here; orange text is a dark-theme affordance (orange-400, 5.07:1 worst). */
  --text-brand:     var(--neutral-700);   /* 7.59:1 worst case */
  --text-on-brand:  var(--neutral-950);
  --text-link:      var(--neutral-800);   /* links keep the underline for affordance */
  --text-link-hover:var(--neutral-950);

  --border-subtle: var(--neutral-100);
  --border-default:var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand:  var(--orange-500);
  --border-focus:  var(--orange-500);

  --accent: var(--orange-500);
  --accent-hover: var(--orange-600);
  --accent-press: var(--orange-700);

  --state-up:   var(--signal-up);
  --state-down: var(--signal-down);
  --state-info: var(--signal-info);
  --state-warn: var(--signal-warn);
  --state-up-soft:   #E6F5EE;
  --state-down-soft: #FDECEE;
  --state-info-soft: #EBF0F9;
  --state-warn-soft: #FBF3DF;

  /* Secondary accent — quiet emphasis and non-action highlights. Slate, not green:
     pine is reserved for charts and the up family. */
  --accent-2: var(--neutral-600);
  --accent-2-soft: var(--neutral-100);

  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--orange-500);
  color-scheme: light;
}

[data-theme="dark"]{
  --surface-page:      var(--ink-900);
  --surface-card:      var(--ink-850);
  --surface-sunken:    var(--ink-950);
  --surface-raised:    var(--ink-800);
  --surface-inverse:   var(--neutral-100);
  --surface-ink:       var(--ink-900);
  --surface-brand:     var(--orange-500);
  --surface-brand-soft:rgba(255,120,29,.12);
  --surface-hover:     rgba(160,183,203,.06);
  --surface-active:    rgba(160,183,203,.11);
  --surface-selected:  rgba(255,120,29,.14);
  --surface-overlay:   rgba(8,13,18,.72);

  --text-primary:   #EDF2F6;
  --text-secondary: #AFBECB;
  --text-tertiary:  #8F9EAC;   /* 5.0:1 on --surface-card */
  --text-inverse:   var(--ink-900);
  --text-on-ink:    #EDF2F6;
  --text-brand:     var(--orange-400);
  --text-on-brand:  var(--neutral-950);
  --text-link:      var(--orange-400);
  --text-link-hover:var(--orange-300);

  --border-subtle: rgba(160,183,203,.10);
  --border-default:var(--ink-line);
  --border-strong: var(--ink-line-strong);
  --border-brand:  var(--orange-500);
  --border-focus:  var(--orange-400);

  --accent: var(--orange-500);
  --accent-hover: var(--orange-400);
  --accent-press: var(--orange-600);

  --accent-2: #8F9EAC;
  --accent-2-soft: rgba(160,183,203,.12);
  --state-up:   #3FBF8B;
  --state-down: #FF5A6E;
  --state-info: #6D9BFF;
  --state-warn: #E8AE22;
  --state-up-soft:   rgba(47,196,147,.14);
  --state-down-soft: rgba(255,90,110,.14);
  --state-info-soft: rgba(109,155,255,.14);
  --state-warn-soft: rgba(232,174,34,.14);

  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--orange-400);
  color-scheme: dark;
}


/* ---- tokens/typography.css ---- */
:root{
  --font-display: "TT Firs Neue", "Helvetica Neue", Helvetica, sans-serif;
  --font-sans: "TT Norms Pro", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "TT Norms Pro Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --weight-thin: 250;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-demibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Display — TT Firs Neue, tight tracking, tight leading */
  --text-display-1: 700 clamp(52px, 7.2vw, 104px)/0.94 var(--font-display);
  --text-display-2: 700 clamp(40px, 5vw, 72px)/0.98 var(--font-display);
  --text-display-3: 700 clamp(30px, 3.4vw, 48px)/1.04 var(--font-display);
  --tracking-display: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;

  /* Headings — TT Norms Pro */
  --text-h1: 600 34px/1.15 var(--font-sans);
  --text-h2: 600 26px/1.2 var(--font-sans);
  --text-h3: 600 20px/1.3 var(--font-sans);
  --text-h4: 600 16px/1.35 var(--font-sans);

  /* Body */
  --text-body-lg: 400 18px/1.55 var(--font-sans);
  --text-body: 400 15px/1.6 var(--font-sans);
  --text-body-sm: 400 13px/1.55 var(--font-sans);
  --text-caption: 400 12px/1.4 var(--font-sans);

  /* Utility */
  --text-label: 500 14px/1.2 var(--font-sans);
  --text-eyebrow: 600 11px/1.2 var(--font-sans);   /* pair with --tracking-caps + uppercase */
  --text-button: 500 14px/1 var(--font-sans);

  /* Numeric / data */
  --text-mono: 400 13px/1.45 var(--font-mono);
  --text-mono-sm: 400 11px/1.4 var(--font-mono);
  --text-metric: 500 30px/1.05 var(--font-mono);
  --text-metric-lg: 500 48px/1 var(--font-mono);
}


/* ---- tokens/spacing.css ---- */
/* 4px base grid. Layout rhythm is generous — nordic whitespace, few dividers. */
:root{
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Layout */
  --container-max: 1240px;
  --container-narrow: 720px;
  --gutter: var(--space-6);
  --gutter-lg: var(--space-10);
  --section-y: var(--space-24);
  --section-y-sm: var(--space-16);
  --header-h: 68px;
  --sidebar-w: 244px;
  --sidebar-w-collapsed: 64px;
  --row-h: 36px;
  --control-h-sm: 30px;
  --control-h: 38px;
  --control-h-lg: 46px;
}


/* ---- tokens/shape.css ---- */
/* Radii, borders, elevation. Corners are small and deliberate — the only true circle is the logo mark. */
:root{
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-sm);

  --border-width: 1px;
  --border-width-strong: 2px;
  --border-card: var(--border-width) solid var(--border-subtle);
  --border-control: var(--border-width) solid var(--border-default);

  /* Elevation is used sparingly: flat cards with a hairline border are the default.
     Shadows appear only on floating layers (menus, dialogs, toasts). */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(11,18,15,.06);
  --shadow-md: 0 4px 12px -2px rgba(11,18,15,.08), 0 1px 3px rgba(11,18,15,.05);
  --shadow-lg: 0 16px 40px -8px rgba(11,18,15,.18), 0 2px 6px rgba(11,18,15,.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-glow-brand: 0 0 0 1px var(--orange-500), 0 8px 24px -6px rgba(255,120,29,.4);

  --blur-panel: saturate(140%) blur(14px); /* @kind other */
}
[data-theme="dark"]{
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 14px -2px rgba(0,0,0,.6);
  --shadow-lg: 0 20px 48px -10px rgba(0,0,0,.75);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.05);
}


/* ---- tokens/motion.css ---- */
/* Motion: fast, linear-ish, no bounce. Latency is the brand — nothing should feel springy. */
:root{
  --ease-out: cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out: cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-snap: cubic-bezier(.2,0,0,1); /* @kind other */
  --dur-instant: 80ms; /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 400ms; /* @kind other */
  --transition-control: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}


/* ---- fonts ---- */
/* Licensed TypeType webfonts (TT Firs Neue web licence; TT Norms Pro web + desktop).
   TT Firs Neue = display / headlines, ONE static Bold — the design system uses no other
   weight and no italic (emphasis is colour, see the Orange Half Rule).
   TT Norms Pro = UI + body. TT Norms Pro Mono = numerics, tickers, code.

   Generated by tools/font-subset/build.py from the licensed originals in src/.
   Do not hand-edit the files or these rules independently — re-run the tool.

   These rules DELIBERATELY DIVERGE from the Design System's tokens/fonts.css,
   which keeps the full unsubsetted faces on purpose: it is an authoring tool, and
   designers there need the wdth axis and Cyrillic previews that are pinned and
   split out here. Optimisation is for the public site only. Do not "fix" the drift
   by syncing one onto the other.

   Each family is declared twice with unicode-range, so the cyrillic file is only
   fetched when a page actually contains Cyrillic. An English page loads three
   files totalling ~220 KB, against 944 KB before subsetting. Greek lives in the
   latin file deliberately (sigma/mu/alpha are plausible here, and it is cheap).

   The wght spans mirror the --weight-* tokens above (250 thin - 800 black), not
   the 400-700 the site uses today: narrowing further saves ~17 KB and would make
   --weight-thin and --weight-black render wrong if they were ever used. The
   wdth and slnt axes are pinned out — nothing sets font-stretch or
   font-variation-settings, and those deltas were two thirds of the payload. */
@font-face{font-family:"TT Firs Neue";src:url("../fonts/TTFirsNeue-Bold-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F,U+0370-03FF,U+2000-206F,U+20A0-20BF,U+2190-21FF,U+2200-22FF,U+2316,U+25CF,U+2022}
@font-face{font-family:"TT Firs Neue";src:url("../fonts/TTFirsNeue-Bold-cyrillic.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0460-052F,U+2DE0-2DFF,U+A640-A69F,U+1C80-1C88}
@font-face{font-family:"TT Norms Pro";src:url("../fonts/TTNormsPro-latin.woff2") format("woff2");font-weight:250 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F,U+0370-03FF,U+2000-206F,U+20A0-20BF,U+2190-21FF,U+2200-22FF,U+2316,U+25CF,U+2022}
@font-face{font-family:"TT Norms Pro";src:url("../fonts/TTNormsPro-cyrillic.woff2") format("woff2");font-weight:250 800;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0460-052F,U+2DE0-2DFF,U+A640-A69F,U+1C80-1C88}
@font-face{font-family:"TT Norms Pro Mono";src:url("../fonts/TTNormsProMono-latin.woff2") format("woff2");font-weight:250 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F,U+0370-03FF,U+2000-206F,U+20A0-20BF,U+2190-21FF,U+2200-22FF,U+2316,U+25CF,U+2022}
@font-face{font-family:"TT Norms Pro Mono";src:url("../fonts/TTNormsProMono-cyrillic.woff2") format("woff2");font-weight:250 700;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0460-052F,U+2DE0-2DFF,U+A640-A69F,U+1C80-1C88}



/* ==========================================================================
   QST Financial — site styles
   Built from the QST Financial design system. Tokens above are copied
   verbatim from the system; everything below is page-level composition.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--text-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-family:var(--font-sans);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
img,svg{display:block}
a{color:var(--text-link);text-decoration:none;border-bottom:none;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
p a,li a,span a{border-bottom:1px solid color-mix(in oklch,var(--text-link) 35%,transparent)}
p a:hover,li a:hover,span a:hover{border-bottom-color:currentColor}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
::selection{background:var(--orange-200);color:var(--ink-950)}
[data-theme="dark"] ::selection{background:rgba(255,120,29,.35);color:#fff}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.only-light{display:block}
.only-dark{display:none}
[data-theme="dark"] .only-light{display:none}
[data-theme="dark"] .only-dark{display:block}

/* ---- header ---------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:30;height:92px;pointer-events:none}
.hdr__bar{height:92px;background:color-mix(in oklch,var(--surface-page) 86%,transparent);backdrop-filter:var(--blur-panel);-webkit-backdrop-filter:var(--blur-panel);border-bottom:1px solid var(--border-subtle);transition:height var(--dur-base) var(--ease-out);pointer-events:auto}
.hdr__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-lg);height:100%;display:flex;align-items:center;gap:var(--space-10)}
.brand{position:relative;display:block;flex:0 0 auto;width:136px;height:46px}
.brand__full,.brand__short{position:absolute;inset:0;display:flex;align-items:center;transition:opacity var(--dur-base) var(--ease-out)}
.brand__full{opacity:1}
.brand__short{opacity:0}
.brand__full img{height:46px}
.brand__short img{height:24px}
.nav{display:flex;gap:var(--space-6);flex:1;align-items:center;justify-content:center}
.nav a{display:inline-flex;align-items:baseline;gap:6px;font:var(--text-label);color:var(--text-secondary)}
.nav a:hover{color:var(--text-primary)}
.nav i{font:var(--text-mono-sm);color:var(--text-tertiary);font-style:normal}
.hdr__right{flex:0 0 auto;width:136px;display:flex;justify-content:flex-end}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--border-strong);border-radius:var(--radius-control);background:transparent;color:var(--text-secondary);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.iconbtn:hover{background:var(--surface-hover);color:var(--text-primary)}

/* ---- hero ------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;min-height:calc(100svh - 92px);display:flex;flex-direction:column;justify-content:center;padding:var(--space-16) 0 var(--space-12)}
.hero__fan{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 58% 44% at 50% 47%,rgba(0,0,0,.10) 0%,rgba(0,0,0,.20) 46%,rgba(0,0,0,.72) 78%,#000 100%);mask-image:radial-gradient(ellipse 58% 44% at 50% 47%,rgba(0,0,0,.10) 0%,rgba(0,0,0,.20) 46%,rgba(0,0,0,.72) 78%,#000 100%)}
.hero__fan canvas{width:100%;height:100%;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 93%,transparent 100%)}
.hero__inner{position:relative;max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-lg)}
.hero__center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-6)}
.hero h1{font:700 clamp(30px,5.2vw,80px)/1 var(--font-display);letter-spacing:var(--tracking-display)}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__lede{font:var(--text-body-lg);color:var(--text-secondary);max-width:620px}
.hero__cue{position:absolute;left:50%;bottom:var(--space-6);transform:translateX(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);opacity:.38;transition:opacity 220ms var(--ease-out)}
.hero__cue:hover{opacity:.7;color:var(--text-tertiary)}

/* ---- sections -------------------------------------------------------- */
.sec{max-width:var(--container-max);margin:0 auto;padding:var(--space-16) var(--gutter-lg) var(--space-12)}
section[id]{scroll-margin-top:76px}
.sechead{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--border-default);margin-bottom:var(--space-8)}
.sechead b{font:var(--text-mono-sm);color:var(--text-brand);letter-spacing:.08em;font-weight:400}
.sechead span{font:var(--text-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-secondary)}
.split{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-4);row-gap:var(--space-10)}
.split h2{font:var(--text-display-3);font-family:var(--font-display);letter-spacing:var(--tracking-display);padding-right:var(--space-10)}
.split h2 em{font-style:normal;color:var(--accent)}
.split__body{display:flex;flex-direction:column;gap:var(--space-5)}
.split__body--tight{gap:var(--space-4)}
.split__body p{color:var(--text-secondary)}
.split__body .lede{font:var(--text-body-lg)}
.dashes{display:flex;flex-direction:column;gap:var(--space-2)}
.dashes li{display:flex;gap:var(--space-3);color:var(--text-secondary)}
.dashes li::before{content:"—";font-family:var(--font-mono);color:var(--accent)}
.note{color:var(--text-secondary)}

/* ---- pipeline -------------------------------------------------------- */
.pipe{margin-top:var(--space-12);border:1px solid var(--border-default);border-radius:var(--radius-card);overflow:hidden}
.pipe__cap{padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border-subtle);font:var(--text-mono-sm);color:var(--text-tertiary);letter-spacing:.08em;text-transform:uppercase}
.pipe__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stage{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6) var(--space-5);transition:background-color var(--dur-fast) var(--ease-out)}
.stage+.stage{border-left:1px solid var(--border-subtle)}
.stage:hover{background:var(--surface-hover)}
.stage b{font:var(--text-mono-sm);color:var(--text-tertiary);letter-spacing:.08em;font-weight:400}
.stage strong{font:var(--text-h4);font-weight:600}
.stage span{color:var(--text-secondary)}

/* ---- roles ----------------------------------------------------------- */
.groups{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-4);row-gap:var(--space-3)}
.grouphead{display:flex;align-items:baseline;gap:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--border-default)}
.grouphead b{font:var(--text-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-secondary);font-weight:600}
.grouphead span{font:var(--text-mono-sm);color:var(--text-tertiary)}
.role{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--space-8)}
.role--live{background:var(--surface-raised);border-top:2px solid var(--orange-500);border-left:2px solid var(--orange-500)}
.role__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}
.role__code{font:var(--text-mono-sm);color:var(--text-brand);letter-spacing:.1em}
.role__meta{font:var(--text-mono-sm);color:var(--text-secondary);text-align:right}
.role h3{font:var(--text-h2);margin:var(--space-4) 0 0}
.role--quiet h3{color:var(--text-secondary)}
.role__desc{font:var(--text-body-sm);color:var(--text-secondary);margin:var(--space-3) 0 0}
.role__specs{display:flex;flex-direction:column;gap:6px;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border-subtle);font:var(--text-body-sm);color:var(--text-secondary)}
.role__specs b{font:var(--text-mono-sm);color:var(--text-primary);letter-spacing:.08em}
.role__actions{display:flex;gap:var(--space-3);margin-top:auto;padding-top:var(--space-6)}
.opendoor{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-4);padding:var(--space-6);border:1px solid var(--border-subtle);border-radius:var(--radius-card)}
.opendoor__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);font:var(--text-body-sm);color:var(--text-secondary)}
.opendoor__row b{color:var(--text-primary);font-weight:500}
.opendoor__row span:last-child{white-space:nowrap}
.opendoor__note{font:var(--text-body-sm);color:var(--text-secondary);padding-top:var(--space-4);border-top:1px solid var(--border-subtle)}

/* ---- buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:30px;padding:0 var(--space-3);border:1px solid transparent;border-radius:var(--radius-control);background:var(--orange-500);color:var(--text-on-brand);font:500 13px/1 var(--font-sans);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--orange-600);color:var(--text-on-brand)}
.btn:active{transform:translateY(1px);background:var(--orange-700)}
.btn--secondary{background:transparent;border-color:var(--border-strong);color:var(--text-primary)}
.btn--secondary:hover{background:var(--surface-hover);color:var(--text-primary)}
.btn--lg{height:46px;padding:0 var(--space-5);font:500 15px/1 var(--font-sans)}
.btn svg{width:15px;height:15px}

/* ---- contact --------------------------------------------------------- */
.contact__left{display:flex;flex-direction:column;gap:var(--space-8);padding-right:var(--space-10)}
.contact__left h2{font:var(--text-display-3);font-family:var(--font-display);letter-spacing:var(--tracking-display)}
.contact__left h2 em{font-style:normal;color:var(--accent)}
.clines{display:flex;flex-direction:column}
.cline{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--border-default);color:var(--text-primary)}
.cline:hover{color:var(--text-brand)}
.cline b{font:var(--text-mono-sm);color:var(--text-tertiary);letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.cline strong{font:var(--text-h4);font-weight:600}
.contact__fine{font:var(--text-body-sm);color:var(--text-tertiary);max-width:560px}
.offices{display:flex;flex-direction:column;gap:var(--space-4)}
.office{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--space-6)}
.office__top{display:flex;justify-content:space-between;font:var(--text-mono-sm);color:var(--text-tertiary);letter-spacing:.06em;text-transform:uppercase}
.office__top em{font-style:normal;color:var(--text-brand)}
.office__addr{color:var(--text-secondary);margin-top:var(--space-3)}
.office__addr span{display:block}
.office__tz{font:var(--text-mono-sm);color:var(--text-tertiary);margin-top:var(--space-3)}

/* ---- footer ---------------------------------------------------------- */
.footer{position:relative;background:var(--ink-900);color:var(--neutral-400);padding-top:var(--space-16)}
.footer__inner{position:relative;max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-lg) var(--space-8)}
.footer__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding-bottom:var(--space-8);border-bottom:1px solid var(--ink-line)}
.footer__top img{height:32px}
.footer__nav{display:flex;gap:var(--space-6);flex-wrap:wrap;font:var(--text-body-sm)}
/* Nav sits a tier above the legal line — it's the interactive row. */
.footer__nav a{color:var(--neutral-300)}
.footer__nav a:hover{color:var(--neutral-0)}
/* Sentence case, and neutral-400 rather than -600: the footer field is always
   --ink-900, so the theme-following greys land at 2.6:1 here — below AA. */
.footer__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);padding-top:var(--space-5);font:var(--text-mono-sm);color:var(--neutral-400);letter-spacing:.02em}
.footer__meta a{color:var(--neutral-400)}
.footer__meta a:hover{color:var(--neutral-100)}
.footer__meta span:last-child{white-space:nowrap}

/* ---- document pages (role, privacy) ---------------------------------- */
.doc{max-width:920px;margin:0 auto;padding:var(--space-12) var(--gutter-lg) var(--space-20)}
.doc--narrow{max-width:880px}
.doc__back{display:flex;width:fit-content;align-items:center;gap:10px;font:var(--text-mono-sm);text-transform:uppercase;letter-spacing:.16em;color:var(--text-tertiary);margin-bottom:var(--space-8)}
.doc__back:hover{color:var(--text-primary)}
.doc__eyebrow{display:flex;width:fit-content;align-items:center;gap:10px;font:var(--text-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-brand)}
.doc__eyebrow i{font:var(--text-mono-sm);letter-spacing:0;font-style:normal}
.doc h1{font:var(--text-display-2);font-family:var(--font-display);letter-spacing:var(--tracking-display);margin:var(--space-4) 0 var(--space-6)}
.doc__meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-8);font:var(--text-mono);color:var(--text-tertiary);padding-bottom:var(--space-6);border-bottom:1px solid var(--border-default);margin-bottom:var(--space-10)}
.doc__meta span{white-space:nowrap}
.doc__meta b{color:var(--text-brand);font-weight:500;margin-right:8px}
.doc__lede{font:var(--text-body-lg);color:var(--text-secondary);margin:0 0 var(--space-6);max-width:760px}
.doc h2{font:var(--text-h1);font-family:var(--font-display);font-weight:700;letter-spacing:var(--tracking-tight);margin:var(--space-10) 0 var(--space-4)}
.doc p{color:var(--text-secondary);max-width:760px}
.doc p+p{margin-top:var(--space-3)}
.doc .dashes{max-width:760px}
.doc__hint{font:var(--text-body-sm);color:var(--text-tertiary);margin:0 0 var(--space-4)}
.doc h2.tight{margin-bottom:var(--space-2)}
.apply{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6);margin-top:var(--space-16);padding:var(--space-8);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card)}
.apply b{display:block;font:var(--text-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-brand);margin-bottom:8px}
.apply p{font:var(--text-h3);color:var(--text-primary)}
.doc__fine{font:var(--text-mono-sm);color:var(--text-tertiary);line-height:1.7;margin:var(--space-8) 0 0;max-width:720px}

/* privacy specifics */
.legal h2{display:flex;align-items:baseline;gap:14px;font:var(--text-h2);font-family:var(--font-sans);font-weight:600;letter-spacing:var(--tracking-tight);margin:var(--space-10) 0 var(--space-3)}
.legal h2 i{font:var(--text-mono-sm);color:var(--text-brand);min-width:28px;font-style:normal}
.legal .dashes{gap:6px}
.legal .dashes strong{color:var(--text-primary);font-weight:500}
.legal .dashes+p{margin-top:var(--space-4)}
.rettable{width:100%;border-collapse:collapse;border-top:1px solid var(--border-default);font:var(--text-body-sm);margin-top:var(--space-4)}
.rettable th{text-align:left;font:var(--text-mono-sm);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-tertiary);border-bottom:1px solid var(--border-default);padding:12px 14px 12px 0}
.rettable td{color:var(--text-secondary);border-bottom:1px solid var(--border-default);padding:12px 14px 12px 0;vertical-align:top;line-height:1.55}
.legal__sig{margin-top:var(--space-16);padding-top:var(--space-6);border-top:1px solid var(--border-default);font:var(--text-mono-sm);letter-spacing:.06em;color:var(--text-tertiary)}

/* ---- responsive ------------------------------------------------------ */
@media (max-width:900px){
  .split,.groups{grid-template-columns:1fr}
  .split h2,.contact__left{padding-right:0}
  .pipe__grid{grid-template-columns:1fr 1fr}
  .stage+.stage{border-left:none}
  .stage:nth-child(even){border-left:1px solid var(--border-subtle)}
  .stage:nth-child(n+3){border-top:1px solid var(--border-subtle)}
  .hero h1 span{white-space:normal}
  }
@media (max-width:720px){
  .hdr,.hdr__bar{height:72px}
  .hero{min-height:calc(100svh - 72px)}
  .nav{display:none}
  .brand__full img{height:38px}
  .pipe__grid{grid-template-columns:1fr}
  .stage:nth-child(even){border-left:none}
  .stage:nth-child(n+2){border-top:1px solid var(--border-subtle)}
  .footer__top{flex-direction:column;align-items:flex-start;gap:var(--space-5)}
  .footer__meta{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .opendoor__row{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
  .cline{grid-template-columns:1fr auto}
  .cline b{display:none}
  .doc__meta{gap:var(--space-2) var(--space-5)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html{scroll-behavior:auto}
}