@charset "utf-8";
/* ============================================================================
   TORQUE DESIGN SYSTEM
   02 · BASE — reset, typography, layout, utilities. Both themes.
   Requires: tq.fonts.css, tq.tokens.css (in that order).
   Everything here reads the ROLES (--tq-bg, --tq-text-body …), so the same
   file is right on the paper site and inside the steel dash (.tq-dark).
   ========================================================================= */

/* ── RESET ──────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* anchor targets must clear the sticky header */
  scroll-padding-top: 96px;
  tab-size: 2;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--tq-bg);
  color: var(--tq-text-body);
  font-family: var(--tq-font-sans);
  font-size: var(--tq-fs-md);
  line-height: var(--tq-lh-body);
  font-weight: var(--tq-fw-regular);
  letter-spacing: var(--tq-tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, select, textarea, optgroup {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }
button, [role="button"], label[for], summary { -webkit-tap-highlight-color: transparent; }

table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

a { color: var(--tq-accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection {
  background: rgb(var(--tq-accent-rgb) / .22);
  color: var(--tq-text-strong);
}

/* One focus ring, everywhere. Never remove it — only ever replace it. */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--tq-ring);
  border-radius: var(--tq-r-xs);
}

[hidden] { display: none !important; }
[inert] { pointer-events: none; user-select: none; }

/* Scrollbars: thin, the ground's own colour family. */
* { scrollbar-width: thin; scrollbar-color: var(--tq-line-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--tq-line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--tq-r-full);
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--tq-steel-rgb) / .34); background-clip: content-box; }
.tq-dark ::-webkit-scrollbar-thumb { background: var(--tq-ink-300); background-clip: content-box; }
.tq-dark ::-webkit-scrollbar-thumb:hover { background: var(--tq-ink-400); background-clip: content-box; }
.tq-dark * { scrollbar-color: var(--tq-ink-300) transparent; }
::-webkit-scrollbar-corner { background: transparent; }


/* ── TYPOGRAPHY ─────────────────────────────────────────────────────────────
   Display steps are Barlow Condensed in capitals — the voice of a road sign.
   Headings below them are Barlow, sentence case. Every step pairs size,
   leading and tracking; never set one without the others.                 */

.tq-display-0, .tq-display-1, .tq-display-2, .tq-display-3, .tq-display-4 {
  margin: 0;
  color: var(--tq-text-strong);
  font-family: var(--tq-font-display);
  font-weight: var(--tq-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tq-tr-display);
  line-height: var(--tq-lh-display);
  text-wrap: balance;
}
.tq-display-0 { font-size: var(--tq-fs-d0); line-height: .92; }
.tq-display-1 { font-size: var(--tq-fs-d1); line-height: .94; }
.tq-display-2 { font-size: var(--tq-fs-d2); }
.tq-display-3 { font-size: var(--tq-fs-d3); line-height: 1.02; font-weight: var(--tq-fw-semibold); }
.tq-display-4 { font-size: var(--tq-fs-d4); line-height: 1.06; font-weight: var(--tq-fw-semibold); }

.tq-h1, .tq-h2, .tq-h3, .tq-h4, .tq-h5, .tq-h6 {
  margin: 0;
  color: var(--tq-text-strong);
  font-weight: var(--tq-fw-semibold);
  text-wrap: balance;
}
.tq-h1 { font-size: var(--tq-fs-4xl); line-height: var(--tq-lh-head); letter-spacing: var(--tq-tr-head); font-weight: var(--tq-fw-bold); }
.tq-h2 { font-size: var(--tq-fs-3xl); line-height: var(--tq-lh-head); letter-spacing: var(--tq-tr-head); font-weight: var(--tq-fw-bold); }
.tq-h3 { font-size: var(--tq-fs-2xl); line-height: 1.2;  letter-spacing: var(--tq-tr-head); }
.tq-h4 { font-size: var(--tq-fs-xl);  line-height: 1.28; letter-spacing: var(--tq-tr-lead); }
.tq-h5 { font-size: var(--tq-fs-lg);  line-height: 1.36; letter-spacing: var(--tq-tr-lead); }
.tq-h6 { font-size: var(--tq-fs-md);  line-height: 1.45; letter-spacing: var(--tq-tr-body); }

.tq-lead {
  font-size: var(--tq-fs-lg);
  line-height: var(--tq-lh-lead);
  letter-spacing: var(--tq-tr-lead);
  color: var(--tq-text-muted);
  text-wrap: pretty;
}
.tq-body    { font-size: var(--tq-fs-md); line-height: var(--tq-lh-body); color: var(--tq-text-body); text-wrap: pretty; }
.tq-body-sm { font-size: var(--tq-fs-sm); line-height: 1.6; color: var(--tq-text-body); }
.tq-caption { font-size: var(--tq-fs-xs); line-height: var(--tq-lh-micro); letter-spacing: var(--tq-tr-micro); color: var(--tq-text-subtle); }

/* The eyebrow: condensed capitals behind a short signal-coloured rule. */
.tq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tq-sp-4);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-2xs);
  font-weight: var(--tq-fw-semibold);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tq-text-muted);
}
.tq-eyebrow::before {
  content: "";
  inline-size: 18px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--tq-brand);
  flex: none;
}
.tq-eyebrow--bare::before { display: none; }

.tq-num  { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.tq-cond { font-family: var(--tq-font-display); font-feature-settings: "tnum" 1; }
.tq-caps { text-transform: uppercase; letter-spacing: var(--tq-tr-caps); }
.tq-accent-text { color: var(--tq-accent-text); }
.tq-strong { color: var(--tq-text-strong); font-weight: var(--tq-fw-semibold); }
.tq-muted  { color: var(--tq-text-muted); }


/* ── LAYOUT ─────────────────────────────────────────────────────────────── */

.tq-container {
  width: 100%;
  max-width: calc(var(--tq-container) + var(--tq-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--tq-gutter);
}
.tq-container--wide   { max-width: calc(var(--tq-container-wide) + var(--tq-gutter) * 2); }
.tq-container--narrow { max-width: calc(860px + var(--tq-gutter) * 2); }

.tq-section        { padding-block: var(--tq-section); position: relative; }
.tq-section--tight { padding-block: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem); }
.tq-section--sunken { background: var(--tq-bg-sunken); }
.tq-section--paper  { background: var(--tq-surface); }

.tq-stack   { display: flex; flex-direction: column; gap: var(--tq-sp-6); }
.tq-stack-2 { display: flex; flex-direction: column; gap: var(--tq-sp-4); }
.tq-stack-3 { display: flex; flex-direction: column; gap: var(--tq-sp-8); }
.tq-stack-4 { display: flex; flex-direction: column; gap: var(--tq-sp-11); }

.tq-row { display: flex; align-items: center; gap: var(--tq-sp-5); flex-wrap: wrap; }
.tq-row--tight   { gap: var(--tq-sp-3); }
.tq-row--between { justify-content: space-between; }
.tq-row--end     { justify-content: flex-end; }
.tq-row--center  { justify-content: center; }
.tq-row--top     { align-items: flex-start; }
.tq-row--nowrap  { flex-wrap: nowrap; }

.tq-grid { display: grid; gap: var(--tq-sp-8); }
.tq-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tq-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tq-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tq-grid--auto    { grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr)); }
.tq-grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.tq-grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
/* three and four columns step down to two before they step down to one */
@media (max-width: 1023px) {
  .tq-grid--3, .tq-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) { .tq-grid--2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559px) {
  .tq-grid--3, .tq-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.tq-spacer { flex: 1 1 auto; }


/* ── UTILITIES ──────────────────────────────────────────────────────────── */

.tq-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.tq-skip-link {
  position: absolute;
  inset-inline-start: var(--tq-sp-6);
  inset-block-start: -100px;
  z-index: var(--tq-z-toast);
  padding: var(--tq-sp-4) var(--tq-sp-7);
  background: var(--tq-text-strong);
  color: var(--tq-bg);
  border-radius: var(--tq-r-full);
  font-weight: var(--tq-fw-semibold);
  text-decoration: none;
  transition: inset-block-start var(--tq-d-base) var(--tq-ease-out);
}
.tq-skip-link:focus { inset-block-start: var(--tq-sp-6); }

.tq-text-center { text-align: center; }
.tq-text-end    { text-align: end; }
.tq-mx-auto     { margin-inline: auto; }
.tq-w-full      { inline-size: 100%; }
.tq-relative    { position: relative; }
.tq-nowrap      { white-space: nowrap; }
.tq-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tq-clamp-2     { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tq-clamp-3     { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.tq-fx-success { color: var(--tq-success); }
.tq-fx-warning { color: var(--tq-warning); }
.tq-fx-danger  { color: var(--tq-danger); }

@media (max-width: 767px)  { .tq-hide-sm { display: none !important; } }
@media (min-width: 768px)  { .tq-only-sm { display: none !important; } }
@media (max-width: 1023px) { .tq-hide-md { display: none !important; } }
@media (min-width: 1024px) { .tq-only-md { display: none !important; } }


/* ── SCROLL REVEAL ──────────────────────────────────────────────────────────
   [data-tq-reveal] starts displaced and is released by tq.site.js as it
   enters the view. Stagger with style="--tq-reveal-delay: 80ms". If script
   never runs, the html:not(.tq-js) rule shows everything — content is never
   left invisible.                                                         */

.tq-js [data-tq-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--tq-d-slower) var(--tq-ease-out),
              transform var(--tq-d-slower) var(--tq-ease-out);
  transition-delay: var(--tq-reveal-delay, 0ms);
}
.tq-js [data-tq-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tq-js [data-tq-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ── PRINT ──────────────────────────────────────────────────────────────── */
@media print {
  .tq-header, .tq-footer, .tq-toasts, .tq-sheet, .tq-cookie { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ── FORCED COLORS (Windows high-contrast) ──────────────────────────────── */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}