@charset "UTF-8";
/* @tokens:start: generated by scripts/tokens/build.mjs; edit tokens.mjs, not this block */
/* How modes work: the page alternates dark and light bands. Each band sets
   data-surface="dark" or "light", and every component reads the semantic
   tokens, so any component works on either band. See docs/DESIGN-SYSTEM.md. */
:root {
  /* Neutral ramp: one family. 25 and 975 are the brand anchors. Components
     use the semantic roles below, not these. */
  --n-0: #ffffff;
  --n-25: #f7f7fa;
  --n-50: #f0eff6;
  --n-75: #e9e8f2;
  --n-100: #dfdeea;
  --n-150: #d6d4e0;
  --n-300: #aba8bd;
  --n-400: #86829d;
  --n-500: #6c6882;
  --n-600: #5b576e;
  --n-700: #484558;
  --n-800: #2e2b3d;
  --n-850: #252235;
  --n-875: #1e1b2b;
  --n-900: #171521;
  --n-925: #13111b;
  --n-950: #0e0d14;
  --n-975: #0a0b10;
  --brand-lavender: #c3b2ff;

  /* Special surfaces (always dark bands) */
  --hero-glow: radial-gradient(ellipse at 90% 48%, #27203f77, transparent 65%);
  --hero-grid: #ffffff03;
  --contact-bg: #171524;
  --contact-glow: radial-gradient(ellipse at 50% 100%, #60407755, transparent 80%);

  --font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-caption: 0.875rem; --leading-caption: 1.6;
  --text-small: 1rem; --leading-small: 1.7;
  --text-body: 1.0625rem; --leading-body: 1.7;
  --text-lead: 1.1875rem; --leading-lead: 1.75;
  --text-title-3: 1.25rem; --leading-title-3: 1.4; --tracking-title-3: -.01em;
  --text-title-2: 1.5rem; --leading-title-2: 1.3; --tracking-title-2: -.015em;
  --text-title-1: 1.75rem; --leading-title-1: 1.25; --tracking-title-1: -.02em;
  --text-display-s: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); --leading-display-s: 1.25; --tracking-display-s: -.02em;
  --text-display-m: clamp(2rem, 1.3rem + 2.2vw, 3rem); --leading-display-m: 1.12; --tracking-display-m: -.025em;
  --text-display-l: clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem); --leading-display-l: 1.08; --tracking-display-l: -.03em;
  --tracking-caps: .07em;

  /* Space: the number is the size in px at the default 16px root. */
  --space-2: .125rem;
  --space-4: .25rem;
  --space-8: .5rem;
  --space-12: .75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-72: 4.5rem;
  --space-96: 6rem;
  --gutter: var(--space-48);
  --section-pad: var(--space-96);
  --container: 1360px;

  --radius-indicator: 2px;
  --radius-focus: 4px;
  --radius-chip: 8px;
  --radius-control: 10px;
  --radius-inner: 12px;
  --radius-tile: 14px;
  --radius-card: 16px;
  --radius-pill: 999px;

  --shadow-header: 0 10px 30px -12px #000000b8;
  --shadow-menu: 0 20px 40px #00000088;

  --duration-instant: 0ms;
  --duration-quick: 150ms;
  --duration-base: 200ms;
  --duration-moderate: 250ms;
  --duration-slow: 450ms;
  --ease-move: cubic-bezier(.2, .7, .2, 1);
  --ease-fade: ease;

  --target-min: 44px;
  --icon-inline: 1.25rem;
  --icon-tile: 1.75rem;
  --icon-feature: 2rem;
}
@media (max-width: 1200px) { :root { --gutter: var(--space-32); } }
@media (max-width: 800px) { :root { --gutter: var(--space-24); --section-pad: var(--space-72); } }
@media (max-width: 600px) { :root { --gutter: var(--space-20); --section-pad: var(--space-56); } }

/* Dark surface mode: the page default. */
:root, [data-surface="dark"] {
  color-scheme: dark;
  --bg: #0a0b10;
  --bg-alt: #0e0d14;
  --surface: #171521;
  --surface-2: #1e1b2b;
  --surface-3: #252235;
  --field: #0a0b10;
  --line: #2e2b3d;
  --line-2: #86829d;
  --ink: #f7f7fa;
  --ink-2: #d1c6e4;
  --muted: #aa9ebf;
  --accent: #c3b2ff;
  --on-accent: #171524;
  --accent-ink: #c9b8ff;
  --accent-bg: #27223b;
  --primary: #f3edff;
  --on-primary: #1a1525;
  --primary-hover: #d9caff;
  --focus: #c3b2ff;
  --ok: #a6e3c4;
  --ok-bg: #2b3238;
  --ok-ink: #a6e3c4;
  --warn: #f0c46a;
  --warn-bg: #352e2b;
  --warn-ink: #f0c46a;
  --error: #ff9d8a;
  --error-bg: #372830;
  --error-ink: #ff9d8a;
  --info: #9fb8ff;
  --info-bg: #2a2c40;
  --info-ink: #9fb8ff;
  --cat-automation: #b4d3bd;
  --cat-automation-tile: #1e1b2b;
  --cat-automation-bg: #182c1f;
  --cat-automation-ink: #b4d3bd;
  --cat-integrations: #a5ccdf;
  --cat-integrations-tile: #1e1b2b;
  --cat-integrations-bg: #122a34;
  --cat-integrations-ink: #a5ccdf;
  --cat-network: #d6b59e;
  --cat-network-tile: #1e1b2b;
  --cat-network-bg: #342215;
  --cat-network-ink: #d6b59e;
}
/* Light surface mode. */
[data-surface="light"] {
  color-scheme: light;
  --bg: #f7f7fa;
  --bg-alt: #f0eff6;
  --surface: #ffffff;
  --surface-2: #e9e8f2;
  --surface-3: #dfdeea;
  --field: #ffffff;
  --line: #d6d4e0;
  --line-2: #77738e;
  --ink: #15151d;
  --ink-2: #555268;
  --muted: #625e75;
  --accent: #6b4c9a;
  --on-accent: #ffffff;
  --accent-ink: #5f4290;
  --accent-bg: #eeedf9;
  --primary: #201c31;
  --on-primary: #f7f7fa;
  --primary-hover: #342d4f;
  --focus: #5f4290;
  --ok: #1f8a55;
  --ok-bg: #ebf4f0;
  --ok-ink: #1e7e4f;
  --warn: #a86b00;
  --warn-bg: #f7f2e8;
  --warn-ink: #9b6303;
  --error: #c4321f;
  --error-bg: #faedeb;
  --error-ink: #c4321f;
  --info: #3559c7;
  --info-bg: #edf0fa;
  --info-ink: #3559c7;
  --cat-automation: #518161;
  --cat-automation-tile: #eef2ef;
  --cat-automation-bg: #eef2ef;
  --cat-automation-ink: #386748;
  --cat-integrations: #3d7d99;
  --cat-integrations-tile: #ecf2f5;
  --cat-integrations-bg: #ecf2f5;
  --cat-integrations-ink: #20637e;
  --cat-network: #986845;
  --cat-network-tile: #f5f0ec;
  --cat-network-bg: #f5f0ec;
  --cat-network-ink: #7c4e2b;
}
/* Decision 1: a device in dark mode gets the light bands in their dark values. */
@media (prefers-color-scheme: dark) {
  [data-surface="light"] {
    color-scheme: dark;
    --bg: #0a0b10;
    --bg-alt: #0e0d14;
    --surface: #171521;
    --surface-2: #1e1b2b;
    --surface-3: #252235;
    --field: #0a0b10;
    --line: #2e2b3d;
    --line-2: #86829d;
    --ink: #f7f7fa;
    --ink-2: #d1c6e4;
    --muted: #aa9ebf;
    --accent: #c3b2ff;
    --on-accent: #171524;
    --accent-ink: #c9b8ff;
    --accent-bg: #27223b;
    --primary: #f3edff;
    --on-primary: #1a1525;
    --primary-hover: #d9caff;
    --focus: #c3b2ff;
    --ok: #a6e3c4;
    --ok-bg: #2b3238;
    --ok-ink: #a6e3c4;
    --warn: #f0c46a;
    --warn-bg: #352e2b;
    --warn-ink: #f0c46a;
    --error: #ff9d8a;
    --error-bg: #372830;
    --error-ink: #ff9d8a;
    --info: #9fb8ff;
    --info-bg: #2a2c40;
    --info-ink: #9fb8ff;
    --cat-automation: #b4d3bd;
    --cat-automation-tile: #1e1b2b;
    --cat-automation-bg: #182c1f;
    --cat-automation-ink: #b4d3bd;
    --cat-integrations: #a5ccdf;
    --cat-integrations-tile: #1e1b2b;
    --cat-integrations-bg: #122a34;
    --cat-integrations-ink: #a5ccdf;
    --cat-network: #d6b59e;
    --cat-network-tile: #1e1b2b;
    --cat-network-bg: #342215;
    --cat-network-ink: #d6b59e;
  }
}
@media (prefers-contrast: more) {
  :root, [data-surface="dark"] { --ink-2: var(--n-25); --muted: #d1c6e4; --line: var(--n-400); }
  [data-surface="light"] { --ink-2: var(--n-975); --muted: #555268; --line: var(--n-500); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  [data-surface="light"] { --ink-2: var(--n-25); --muted: #d1c6e4; --line: var(--n-400); }
}
/* @tokens:end */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: var(--text-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
/* Each band re-resolves its text color from its own surface tokens. */
[data-surface] { color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, figure { margin: 0; }
/* Inter Tight, self-hosted (OFL, assets/fonts/OFL.txt): headings only. */
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/inter-tight-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
svg use { pointer-events: none; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: min(var(--container), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: var(--space-4); border-radius: var(--radius-focus); }
#main:focus { outline: none; }
.skip-link { position: fixed; top: -10rem; left: var(--space-16); padding: var(--space-12) var(--space-20); background: var(--ink); color: var(--bg); border-radius: var(--radius-control); z-index: 100; }
.skip-link:focus { top: var(--space-16); }
/* Small uppercase label, used only where it helps (hero, contact). */
.eyebrow { display: flex; align-items: center; gap: var(--space-16); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-caps); line-height: var(--leading-caption); text-transform: uppercase; color: var(--muted); }

/* ── Header and navigation ─────────────────────────────────────────────── */
.site-header { display: flex; align-items: center; gap: var(--space-32); padding: var(--space-20) var(--gutter); border-bottom: 1px solid var(--line); z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: .8rem; flex-shrink: 0; min-height: var(--target-min); }
.brand-mark { stroke: none; }
.brand-wordmark { display: inline-grid; }
.brand-name { font-weight: 650; line-height: 1; letter-spacing: .07em; }
.brand-sub { display: flex; justify-content: space-between; width: 100%; font-weight: 500; line-height: 1; letter-spacing: 0; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-32); margin-inline: auto; font-size: var(--text-small); color: var(--ink-2); }
.desktop-nav > a { min-height: var(--target-min); min-width: var(--target-min); display: inline-flex; align-items: center; justify-content: center; position: relative; transition: color var(--duration-quick) var(--ease-fade); }
.desktop-nav > a:hover, .desktop-nav > a[aria-current="page"] { color: var(--ink); }
/* The underline grows from the centre on hover and stays on the current page. */
.desktop-nav > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--space-8); height: 2px; background: var(--accent); border-radius: var(--radius-indicator); transform: scaleX(0); transition: transform var(--duration-moderate) var(--ease-move); }
.desktop-nav > a:hover::after, .desktop-nav > a:focus-visible::after, .desktop-nav > a[aria-current="page"]::after { transform: scaleX(1); }
/* Services: a native disclosure, so it opens without JavaScript; script.js
   only closes it on Escape, outside clicks and when another opens. */
.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--target-min); cursor: pointer; transition: color var(--duration-quick) var(--ease-fade); }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover, .nav-menu[open] > summary, .nav-menu > summary.is-current { color: var(--ink); }
.nav-menu-chevron { width: var(--space-16); height: var(--space-16); transition: transform var(--duration-base) var(--ease-move); }
.nav-menu[open] .nav-menu-chevron { transform: rotate(180deg); }
.nav-menu-list { position: absolute; top: calc(100% + var(--space-8)); left: 50%; transform: translateX(-50%); min-width: 18rem; list-style: none; margin: 0; padding: var(--space-8); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-card); box-shadow: var(--shadow-menu); z-index: 30; }
.nav-menu-list a { display: flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-12); border-radius: var(--radius-control); color: var(--ink); transition: background var(--duration-quick) var(--ease-fade); }
.nav-menu-list a:hover, .nav-menu-list a[aria-current="page"] { background: var(--surface-3); }
/* Outline control. Exactly 48px tall: the logo lockup is sized to match it. */
.header-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-16); min-height: var(--space-48); padding: 0 var(--space-16); border: 1px solid var(--line-2); border-radius: var(--radius-control); font-size: var(--text-small); line-height: 1; transition: background var(--duration-quick) var(--ease-fade), border-color var(--duration-quick) var(--ease-fade); }
.header-cta:hover { background: var(--surface-3); border-color: var(--accent); }
.header-cta svg { width: var(--icon-inline); height: var(--icon-inline); transition: transform var(--duration-base) var(--ease-move); }
.header-cta:hover svg { transform: translate(2px, -2px); }
.menu-toggle, .mobile-nav { display: none; }

/* ── Buttons and links ─────────────────────────────────────────────────── */
/* Primary: one per view. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-24); min-height: var(--space-56); padding: var(--space-12) var(--space-20); border-radius: var(--radius-control); font-size: var(--text-small); font-weight: 600; transition: background var(--duration-quick) var(--ease-fade), transform var(--duration-base) var(--ease-move); }
.button-light { color: var(--on-primary); background: var(--primary); border: 1px solid var(--primary); }
.button-light:hover { background: var(--primary-hover); transform: translateY(-2px); }
.button svg { width: var(--icon-inline); height: var(--icon-inline); flex-shrink: 0; }
.text-link { display: inline-flex; align-items: center; gap: var(--space-12); min-height: var(--target-min); padding-block: var(--space-8); font-size: var(--text-small); border-bottom: 1px solid transparent; }
.text-link svg { width: var(--icon-inline); height: var(--icon-inline); flex-shrink: 0; transition: transform var(--duration-base) var(--ease-move); }
.text-link:hover { color: var(--accent-ink); border-color: currentColor; }
.text-link:hover svg { transform: translateX(2px); }
[data-surface="light"] .text-link, .accent-link { color: var(--accent-ink); font-weight: 600; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--target-min); padding: var(--space-8) var(--space-12); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-2); font-size: var(--text-caption); flex-shrink: 0; transition: background var(--duration-quick) var(--ease-fade); }
.motion-toggle:hover { background: var(--surface-3); }
.motion-symbol { width: var(--space-16); height: var(--space-16); flex-shrink: 0; }

/* ── Home hero ─────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; background: var(--hero-glow), var(--bg); overflow: hidden; }
.hero-grid { position: absolute; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px); background-size: var(--space-96) var(--space-96);
  mask-image: linear-gradient(90deg, transparent, #000); } /* token-lint: allow (a mask, not a color) */
.hero-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-48); align-items: center; padding-block: var(--space-72); }
.hero-content { min-width: 0; }
.hero-eyebrow { margin-bottom: var(--space-24); }
/* The largest type on the page. "your infrastructure running." is about
   13.5em wide and stays on one line wherever the hero has two columns, so the
   size is also capped at 1/13.5 of the text column: --hero-fit. Section
   headings share the cap, so none of them outgrow the hero. Once the hero
   stacks (≤1050px) the cap lifts. */
:root { --hero-fit: calc(4.2vw - .4rem); }
@media (max-width: 1050px) { :root { --hero-fit: 100vw; } }
.hero h1 { font-size: min(var(--text-display-l), var(--hero-fit)); line-height: var(--leading-display-l); letter-spacing: var(--tracking-display-l); font-weight: 650; } /* token-lint: allow (capped by --hero-fit) */
/* Only the hero uses the two-color headline. */
.hero h1 span { color: var(--brand-lavender); }
.hero-copy { color: var(--ink-2); font-size: var(--text-lead); line-height: var(--leading-lead); margin-top: var(--space-24); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16) var(--space-32); margin-top: var(--space-32); }
.hero-visual { position: relative; min-width: 0; display: grid; justify-items: end; gap: var(--space-12); }

/* The system visual: decoration only. Slow by design: drifting dots, a
   pulse along the bright path, a wave easing sideways. Every animation here
   stops with reduced motion, the pause control, or no JavaScript. */
.system-visual { display: block; width: 100%; max-width: 34rem; height: auto; }
.sv-wave path { stroke: var(--accent); stroke-width: 1; opacity: .14; }
.sv-wave { animation: sv-drift 28s ease-in-out infinite alternate; }
.sv-links path { stroke: var(--line-2); stroke-width: 1; opacity: .5; }
.sv-hot { stroke: var(--accent); stroke-width: 1.6; opacity: .85; }
.sv-pulse { stroke: var(--brand-lavender); stroke-width: 3.2; stroke-dasharray: 4 96; animation: sv-pulse 6s linear infinite; }
.sv-nodes circle { fill: var(--surface-2); stroke: var(--muted); stroke-width: 1.2; }
.sv-nodes circle.is-hot { fill: var(--accent); stroke: none; }
.sv-dots circle { fill: var(--accent); stroke: none; opacity: .6; animation: sv-float 16s ease-in-out infinite alternate; }
.sv-dots circle:nth-child(2n) { animation-duration: 21s; animation-delay: -6s; }
.sv-dots circle:nth-child(3n) { animation-duration: 25s; animation-delay: -11s; }
@keyframes sv-pulse { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes sv-drift { to { transform: translateX(-28px); } }
@keyframes sv-float { to { transform: translate(8px, -12px); } }

/* ── Bands: the dark and light rhythm ──────────────────────────────────── */
.band { padding-block: var(--section-pad); background: var(--bg); }
.band-alt { background: var(--bg-alt); }
.band-tight { padding-top: 0; }
h2 { font-size: min(var(--text-display-m), var(--hero-fit)); line-height: var(--leading-display-m); letter-spacing: var(--tracking-display-m); max-width: 42rem; } /* token-lint: allow (capped by --hero-fit) */
.lede { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--ink-2); max-width: 44rem; margin-top: var(--space-16); }

/* What we do: three tall cards with bullets. */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); margin-top: var(--space-48); }
.pillar { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-32); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.pillar h3 { font-size: var(--text-title-1); line-height: var(--leading-title-1); letter-spacing: var(--tracking-title-1); }
.pillar p { font-size: var(--text-small); line-height: 1.7; color: var(--ink-2); }
.pillar-link { margin-top: auto; }
.pillars-note { margin-top: var(--space-24); font-size: var(--text-caption); color: var(--muted); }
/* Icon tile in a category hue. A category hue never means status. */
.icon-tile { width: 3.25rem; height: 3.25rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--tile-line); border-radius: var(--radius-tile); background: var(--tile-bg); color: var(--tile-ink); flex-shrink: 0; }
.icon-tile svg { width: var(--icon-tile); height: var(--icon-tile); }
.cat-automation { --tile-line: var(--cat-automation); --tile-bg: var(--cat-automation-tile); --tile-ink: var(--cat-automation-ink); }
.cat-integrations { --tile-line: var(--cat-integrations); --tile-bg: var(--cat-integrations-tile); --tile-ink: var(--cat-integrations-ink); }
.cat-network { --tile-line: var(--cat-network); --tile-bg: var(--cat-network-tile); --tile-ink: var(--cat-network-ink); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-8); font-size: var(--text-small); line-height: 1.6; }
.ticks li { position: relative; padding-left: var(--space-24); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: var(--space-8); height: var(--space-8); border-radius: 50%; border: 1.5px solid var(--accent); }

/* How we work: a horizontal four-step line, vertical on phones. */
.steps { list-style: none; padding: 0; margin: var(--space-48) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-32); position: relative; }
.steps::before { content: ""; position: absolute; top: 20px; left: 20px; right: 20px; height: 1px; background: var(--line-2); }
.step { position: relative; padding-top: var(--space-64); }
.step-num { position: absolute; top: 0; left: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--accent); background: var(--bg-alt); color: var(--accent-ink); font-family: var(--font-display); font-size: var(--text-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--text-title-3); line-height: var(--leading-title-3); letter-spacing: var(--tracking-title-3); }
.step p { margin-top: var(--space-8); font-size: var(--text-small); line-height: 1.7; color: var(--ink-2); }

/* Principles: a plain list with large numerals. */
.principles { list-style: none; padding: 0; margin: var(--space-48) 0 0; max-width: 56rem; }
.principles li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-24); padding-block: var(--space-24); border-top: 1px solid var(--line); }
.principles li:last-child { border-bottom: 1px solid var(--line); }
.numeral { font-family: var(--font-display); font-size: var(--text-display-m); line-height: 1; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.principles h3 { font-size: var(--text-title-2); line-height: var(--leading-title-2); letter-spacing: var(--tracking-title-2); }
.principles p { margin-top: var(--space-8); font-size: var(--text-body); line-height: 1.7; color: var(--ink-2); }

/* Own tools: one wide dark card. Later it becomes the product section. */
.tools-card { position: relative; overflow: hidden; isolation: isolate; padding: var(--space-56) var(--space-48); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-card); }
.tools-card h2 { font-size: var(--text-display-s); line-height: var(--leading-display-s); letter-spacing: var(--tracking-display-s); max-width: 32rem; }
.tools-card p { margin-top: var(--space-16); max-width: 38rem; font-size: var(--text-body); line-height: 1.7; color: var(--ink-2); }
.tools-card .text-link { margin-top: var(--space-16); color: var(--accent-ink); font-weight: 600; }
.tools-pattern { position: absolute; z-index: -1; right: 0; top: 0; width: 55%; height: 100%; opacity: .55; pointer-events: none; }
.tools-pattern path { stroke: var(--line-2); stroke-width: 1; }
.tools-pattern circle { fill: var(--muted); stroke: none; }
.tools-pattern circle.is-hot { fill: var(--accent); }

/* Ways to work: a 2×2 grid. */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); margin-top: var(--space-48); }
.way { padding: var(--space-32); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.way h3 { font-size: var(--text-title-2); line-height: var(--leading-title-2); letter-spacing: var(--tracking-title-2); }
.way p { margin-top: var(--space-8); font-size: var(--text-small); line-height: 1.7; color: var(--ink-2); }
.about-teaser { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-16) var(--space-32); margin-top: var(--space-56); padding-top: var(--space-40); border-top: 1px solid var(--line); }
.about-teaser h2 { font-size: var(--text-title-1); line-height: var(--leading-title-1); letter-spacing: var(--tracking-title-1); }
.about-teaser p { font-size: var(--text-body); color: var(--ink-2); }

/* ── Contact band (home) ───────────────────────────────────────────────── */
.contact { background: var(--contact-bg); position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section-pad); }
.contact-glow { position: absolute; inset: 0; z-index: -1; background: var(--contact-glow); }
.contact-inner { text-align: center; }
.contact-inner .eyebrow { justify-content: center; }
.contact-inner h2 { margin: var(--space-16) auto 0; font-size: min(var(--text-display-l), var(--hero-fit)); line-height: var(--leading-display-l); letter-spacing: var(--tracking-display-l); } /* token-lint: allow (capped by --hero-fit) */
.contact-inner > p:not(.eyebrow) { font-size: var(--text-lead); line-height: 1.8; color: var(--ink-2); margin-top: var(--space-16); }

/* ── Inner pages ───────────────────────────────────────────────────────── */
.page-hero { position: relative; isolation: isolate; background: var(--hero-glow), var(--bg); padding-block: var(--space-56) var(--space-64); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-8); list-style: none; padding: 0; margin: 0 0 var(--space-16); font-size: var(--text-caption); color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-8); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); color: var(--ink-2); }
.breadcrumb a:hover { color: var(--ink); }
.page-hero h1 { font-size: var(--text-display-m); line-height: var(--leading-display-m); letter-spacing: var(--tracking-display-m); max-width: 44rem; }
.page-hero .eyebrow + h1 { margin-top: var(--space-16); }
.page-hero .icon-tile { margin-bottom: var(--space-24); }
.page-hero .lede { margin-top: var(--space-24); }
.service-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); margin-top: var(--space-48); }
.service-item { display: flex; gap: var(--space-20); padding: var(--space-32); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.service-items > .service-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.service-item h3 { font-size: var(--text-title-2); line-height: var(--leading-title-2); letter-spacing: var(--tracking-title-2); }
.service-item p { margin-top: var(--space-8); font-size: var(--text-small); line-height: 1.7; color: var(--ink-2); }
.projects li::first-letter { text-transform: uppercase; }
.projects { margin-top: var(--space-32); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-48); max-width: 56rem; font-size: var(--text-body); }
.faq { margin-top: var(--space-40); max-width: 52rem; }
.faq-item { padding-block: var(--space-24); border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 { font-size: var(--text-title-3); line-height: var(--leading-title-3); letter-spacing: var(--tracking-title-3); }
.faq-item p { margin-top: var(--space-8); font-size: var(--text-body); line-height: 1.7; color: var(--ink-2); }
.also { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); margin-top: var(--space-32); }
.also a { display: flex; align-items: center; gap: var(--space-20); padding: var(--space-24) var(--space-32); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); font-family: var(--font-display); font-size: var(--text-title-3); font-weight: 600; transition: border-color var(--duration-quick) var(--ease-fade); }
.also a:hover { border-color: var(--accent); }
.also a > svg:last-child { width: var(--icon-inline); height: var(--icon-inline); margin-left: auto; color: var(--accent-ink); }
.contact-strip { position: relative; isolation: isolate; overflow: hidden; background: var(--contact-bg); padding-block: var(--space-64); }
.contact-strip .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-24) var(--space-48); }
.contact-strip p { font-family: var(--font-display); font-size: var(--text-title-1); line-height: var(--leading-title-1); letter-spacing: var(--tracking-title-1); font-weight: 600; max-width: 40rem; }
.prose { max-width: 44rem; }
.prose > * + * { margin-top: var(--space-16); }
.prose p, .prose li { font-size: var(--text-body); line-height: 1.75; color: var(--ink-2); }
.prose h2 { font-size: var(--text-title-2); line-height: var(--leading-title-2); letter-spacing: var(--tracking-title-2); margin-top: var(--space-40); }
.prose ul { padding-left: var(--space-24); }
.prose a:not(.text-link) { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose .is-lead { font-size: var(--text-lead); }
.link-list { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-32); margin-top: var(--space-32); }
.contact-page { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-48); align-items: start; }
.contact-page .contact-form, .contact-page .form-success { margin: 0; max-width: none; }
.contact-aside { display: grid; gap: var(--space-24); padding-top: var(--space-8); }
.contact-aside h2 { font-size: var(--text-caption); font-family: var(--font-ui); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); }
.contact-aside p { margin-top: var(--space-4); font-size: var(--text-body); color: var(--ink); }
.contact-aside a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
footer { background: var(--bg); padding: var(--space-48) 0 var(--space-16); border-top: 1px solid var(--line); }
.footer-main { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-24) var(--space-32); }
.footer-tagline { color: var(--muted); font-size: var(--text-small); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: var(--space-32); padding-top: var(--space-8); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-8) var(--space-32); font-size: var(--text-caption); color: var(--muted); }
.footer-bottom #year { font-variant-numeric: tabular-nums; }
.footer-links { display: flex; align-items: center; gap: var(--space-16); }
.footer-links a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); min-width: var(--target-min); color: var(--ink-2); transition: color var(--duration-quick) var(--ease-fade); }
.footer-links a:hover { color: var(--ink); }
.footer-icon svg { width: var(--icon-inline); height: var(--icon-inline); }

/* ── Motion ────────────────────────────────────────────────────────────── */
.motion-paused *, .motion-paused *:before, .motion-paused *:after { animation-play-state: paused !important; }
html.motion-paused { scroll-behavior: auto; }
/* Motion off until script.js confirms it is wanted (no JS, no motion). */
html:not(.motion-enabled) *, html:not(.motion-enabled) *:before, html:not(.motion-enabled) *:after { animation: none !important; }

/* ── Breakpoints (docs/DESIGN-SYSTEM.md §12) ──────────────────────────────
   Page-level layout changes live here, one block per width. Components with
   their own block below (menu, form, lockup, header) keep their breakpoints
   beside them. */
@media (min-width: 1600px) { .site-header { padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); } }
@media (max-width: 1200px) {
  .desktop-nav { gap: var(--space-24); }
  .hero-layout { gap: var(--space-32); }
}
@media (max-width: 1050px) {
  .hero-layout { grid-template-columns: 1fr; padding-block: var(--space-56) var(--space-48); gap: var(--space-24); }
  .hero-content { max-width: 45rem; }
  .hero-visual { justify-items: center; }
  .system-visual { max-width: 30rem; }
  .contact-page { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .site-header { padding-block: var(--space-16); gap: var(--space-24); }
  .pillars, .ways, .service-items, .also { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: var(--space-24); }
  .steps::before { top: 20px; bottom: 20px; left: 20px; right: auto; width: 1px; height: auto; }
  .step { padding: 0 0 0 var(--space-64); }
  .projects { grid-template-columns: 1fr; }
  .about-teaser { grid-template-columns: 1fr; gap: var(--space-8); }
  .tools-card { padding: var(--space-40) var(--space-24); }
  .tools-pattern { width: 100%; opacity: .3; }
}
@media (max-width: 600px) {
  .site-header { gap: var(--space-16); }
  .header-cta { display: none; }
  .menu-toggle { margin-left: auto; }
  .hero-layout { padding-block: var(--space-48) var(--space-40); }
  .hero-eyebrow { letter-spacing: .035em; }
  .hero-actions { gap: var(--space-12); flex-direction: column; align-items: flex-start; }
  .pillar, .way, .service-item { padding: var(--space-24); }
  .system-visual { max-height: 16rem; }
  .service-item { flex-direction: column; gap: var(--space-16); }
  .principles li { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-16); }
  .contact-strip p { font-size: var(--text-title-2); }
  .footer-main { gap: var(--space-16); }
}
@media (max-width: 25em) { .site-header { flex-wrap: wrap; } .button { max-width: 100%; } .button svg { display: none; } h1,h2,h3 { overflow-wrap: anywhere; } .brand { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
}
@media (prefers-contrast: more) {
  .sv-links path { opacity: .9; }
  .icon-tile { border-width: 2px; }
}
@media (forced-colors: active) {
  .pillar, .way, .service-item, .tools-card, .nav-menu-list, .also a, button, .button, .header-cta { border: 1px solid CanvasText; }
  .steps::before { background: CanvasText; }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid Highlight; }
}

/* ── Mobile menu (≤1050px, the breakpoint script.js uses to close it) ──────
   A simple sheet under the header. A disclosure, not a modal. `hidden`
   removes it from the accessibility tree; .is-open only drives the
   transition, and the script delays `hidden` on close until the fade ends.
   Reduced motion switches every transition off and the script then opens
   and closes instantly. */
@media (max-width: 1050px) {
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; }
  /* Icon button: three bars that fold into a cross. 9px is the bar pitch. */
  .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: var(--target-min); height: var(--target-min); padding: 0; background: none; border: 1px solid var(--line-2); border-radius: var(--radius-control); flex-shrink: 0; transition: border-color var(--duration-quick) var(--ease-fade); } /* token-lint: allow (bar geometry) */
  .menu-toggle:hover, .menu-toggle[aria-expanded="true"] { border-color: var(--accent); }
  .menu-toggle span { width: 22px; height: 2px; background: var(--ink); transform-origin: center; transition: transform var(--duration-moderate) var(--ease-move), opacity var(--duration-base) var(--ease-fade); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(9px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-9px) rotate(-45deg); }
  .mobile-nav:not([hidden]) { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: var(--space-8) var(--gutter) var(--space-24); background: var(--surface); border-bottom: 1px solid var(--line-2); box-shadow: var(--shadow-menu); opacity: 0; transform: translateY(calc(-1 * var(--space-8))); transition: opacity var(--duration-moderate) var(--ease-fade), transform var(--duration-moderate) var(--ease-move); }
  .mobile-nav.is-open { opacity: 1; transform: none; }
  .mobile-nav-label { padding: var(--space-16) var(--space-8) var(--space-4); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); }
  .mobile-nav a { position: relative; display: flex; align-items: center; min-height: var(--space-48); padding: var(--space-12) var(--space-8); border-bottom: 1px solid var(--line); color: var(--ink); opacity: 0; transform: translateX(calc(-1 * var(--space-8))); transition: opacity var(--duration-moderate) var(--ease-fade), transform var(--duration-moderate) var(--ease-move), padding-left var(--duration-base) var(--ease-move); }
  .mobile-nav.is-open a { opacity: 1; transform: none; }
  /* Each link arrives a beat after the one above it. */
  .mobile-nav.is-open a:nth-of-type(2) { transition-delay: 40ms; }
  .mobile-nav.is-open a:nth-of-type(3) { transition-delay: 80ms; }
  .mobile-nav.is-open a:nth-of-type(4) { transition-delay: 120ms; }
  .mobile-nav.is-open a:nth-of-type(5) { transition-delay: 160ms; }
  .mobile-nav.is-open a:nth-of-type(6) { transition-delay: 200ms; }
  /* Hover and the current page get an accent rail on the left. */
  .mobile-nav a::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; border-radius: var(--radius-indicator); background: var(--accent); transform: scaleY(0); transition: transform var(--duration-base) var(--ease-move); }
  .mobile-nav a:hover, .mobile-nav a:focus-visible, .mobile-nav a[aria-current="page"] { padding-left: var(--space-16); }
  .mobile-nav a:hover::before, .mobile-nav a:focus-visible::before, .mobile-nav a[aria-current="page"]::before { transform: scaleY(1); }
  .mobile-nav .mobile-nav-cta { margin-top: var(--space-24); padding: var(--space-12) var(--space-20); border: 1px solid var(--primary); color: var(--on-primary); justify-content: center; }
  .mobile-nav .mobile-nav-cta::before { display: none; }
  .mobile-nav .mobile-nav-cta:hover { padding-left: var(--space-20); }
  /* No JavaScript: the menu button can't open, so show the plain nav instead. */
  html:not(.js) .site-header { flex-wrap: wrap; }
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .desktop-nav { display: flex; order: 3; width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 0 var(--space-24); margin: 0; }
}

/* ── Contact form ─────────────────────────────────────────────────────────
   A surface panel. The home band centres its heading; the form itself is
   left-aligned, because a centred form is harder to scan and fill.
   States: hover, focus (accent border and ring), invalid (error border plus a
   message under the field), busy (the button keeps its label). */
.contact-form { max-width: 40rem; margin: var(--space-48) auto 0; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-40); }
/* Rows of fields are spaced by gaps, not by each field's margin: a
   :last-of-type rule used to zero the second field in every row, so an error
   under it ran into the label below, and stacked fields on phones touched. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); margin-bottom: var(--space-24); }
.contact-form label { display: block; font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--space-8); }
.contact-form .req { color: var(--accent); margin-left: 2px; }
.contact-form .opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.contact-form input, .contact-form textarea {
  display: block; width: 100%; min-height: 3.25rem; padding: var(--space-12) var(--space-16);
  background: var(--field); border: 1px solid var(--line-2); border-radius: var(--radius-control);
  color: var(--ink); font-family: inherit; font-size: var(--text-body); line-height: 1.6;
  transition: border-color var(--duration-quick) var(--ease-fade); }
.contact-form textarea { resize: vertical; min-height: 9rem; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted); }
.contact-form input:hover, .contact-form textarea:hover { border-color: var(--muted); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.contact-form [aria-invalid="true"] { border-color: var(--error); }
.field-error { margin: var(--space-8) 0 0; font-size: var(--text-caption); line-height: 1.5; color: var(--error-ink); }
.field-error:empty { display: none; }

/* Off-screen rather than display:none: some submitters skip fields that are
   not rendered at all, which would defeat the trap. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; margin-top: var(--space-32); padding-top: var(--space-32); border-top: 1px solid var(--line); }
.form-note { margin: 0; flex: 1; min-width: 13rem; font-size: var(--text-caption); line-height: 1.65; color: var(--muted); }
.form-status { margin: var(--space-20) 0 0; font-size: var(--text-small); line-height: 1.7; color: var(--ink-2); }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--ok-ink); }
.form-status.is-error { color: var(--error-ink); }
.contact-form button[aria-busy="true"] { opacity: .7; cursor: progress; }

/* Success: replaces the form on the same surface, so the band does not jump
   and nobody mistakes an emptied form for "nothing happened". */
.form-success { max-width: 40rem; margin: var(--space-48) auto 0; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-48) var(--space-40); }
.form-success:focus { outline: none; }
.form-success:focus-visible { outline: 3px solid var(--focus); outline-offset: var(--space-4); }
.success-mark { display: block; width: 4rem; height: 4rem; margin: 0 auto var(--space-24); color: var(--accent); }
.success-mark svg { width: 100%; height: 100%; display: block; }
.form-success h2, .form-success h3 { margin: 0 0 var(--space-12); font-size: var(--text-title-1); line-height: var(--leading-title-1); letter-spacing: var(--tracking-title-1); color: var(--ink); }
.form-success p { margin: 0 auto; max-width: 30rem; font-size: var(--text-body); line-height: 1.75; color: var(--ink-2); }
.success-again { margin-top: var(--space-32); background: none; border: 1px solid var(--line-2); border-radius: var(--radius-control); color: var(--ink-2); font: inherit; font-size: var(--text-small); min-height: var(--space-48); padding: var(--space-12) var(--space-20); cursor: pointer;
  transition: border-color var(--duration-quick) var(--ease-fade), color var(--duration-quick) var(--ease-fade), background var(--duration-quick) var(--ease-fade); }
.success-again:hover { border-color: var(--accent); color: var(--ink); background: var(--surface-3); }
/* The mark draws itself in once, when the panel appears. Off with reduced motion. */
.form-success:not([hidden]) .success-mark svg { animation: success-in var(--duration-slow) ease-out both; }
@keyframes success-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

@media (max-width: 800px) {
  .contact-form { padding: var(--space-24) var(--space-20); margin-top: var(--space-40); }
  .field-row { grid-template-columns: 1fr; }
  .form-foot { align-items: flex-start; margin-top: var(--space-24); padding-top: var(--space-24); gap: var(--space-20); }
  .form-foot .button { width: 100%; }
  .form-note { min-width: 0; }
  .form-success { padding: var(--space-40) var(--space-24); margin-top: var(--space-40); }
  .form-success h2, .form-success h3 { font-size: var(--text-title-2); }
  .success-mark { width: 3.25rem; height: 3.25rem; }
}

/* ── Server pages ─────────────────────────────────────────────────────────
   The result a form post without JavaScript receives, and the 404. Both are
   built by runtime/server.mjs and link this stylesheet. */
.page-message { min-height: 100vh; min-height: 100dvh; max-width: 36rem; margin-inline: auto; padding: var(--space-48) var(--gutter); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-24); }
.page-message .brand { margin-bottom: var(--space-24); }
.page-message h1 { font-size: var(--text-display-m); line-height: var(--leading-display-m); letter-spacing: var(--tracking-display-m); }
.page-message p { font-size: var(--text-lead); line-height: 1.7; color: var(--ink-2); }

/* ── Brand lockup (docs/DESIGN-SYSTEM.md §3) ─────────────────────────────
   Sized from one target, --lockup-h: the height of the control opposite it in
   the header (the 48px "Let's talk" on desktop, the 44px menu button at
   ≤1050px). The ratios share that height between ALBANDI, the gap and
   NETWORKS so their visible ink, not their line boxes, comes to exactly
   --lockup-h. They are the original 1.625 / .45 / .875 proportions divided by
   .907, the measured share of a line box that capitals actually fill. The
   mark's viewBox is cropped to its ink (4 7 33 25), so its box is the artwork.

   The whole lockup scales as one when the header compacts. NETWORKS is a
   logotype, but it still never drops below 12px: 0.8 on desktop, 0.84 where
   the lockup is already 44px. ALBANDI's negative right margin removes the
   letter-space after its final I, so the two lines end on the same edge.    */
.brand { --brand-scale: 1; --lockup-h: 48px; --mark-size: calc(var(--lockup-h) * var(--brand-scale)); }
.brand-mark { height: var(--mark-size); width: auto; }
.brand-name { font-size: calc(var(--lockup-h) * .6073 * var(--brand-scale)); margin-right: -.07em; } /* token-lint: allow (logo geometry) */
.brand-wordmark { gap: calc(var(--lockup-h) * .1682 * var(--brand-scale)); }
.brand-sub { font-size: calc(var(--lockup-h) * .3270 * var(--brand-scale)); } /* token-lint: allow (logo geometry) */
.brand-mark, .brand-name, .brand-sub, .brand-wordmark {
  transition: height var(--duration-moderate) var(--ease-move), width var(--duration-moderate) var(--ease-move),
              font-size var(--duration-moderate) var(--ease-move), gap var(--duration-moderate) var(--ease-move); }
@media (max-width: 1050px) { .brand { --lockup-h: 44px; } }

/* ── Sticky header ────────────────────────────────────────────────────────
   Follows the page and compacts once it scrolls. One property, --header-h,
   drives both its height and the scroll padding, so an anchor can never land
   underneath it. Reduced motion keeps the behavior and drops the animation. */
:root { --header-h: 6.5rem; }
html { scroll-padding-top: calc(var(--header-h) + var(--space-24)); }
.site-header {
  position: sticky; top: 0; min-height: var(--header-h);
  background: var(--bg); /* opaque: content passes beneath it */
  transition: min-height var(--duration-moderate) var(--ease-move), padding var(--duration-moderate) var(--ease-move),
              box-shadow var(--duration-moderate) var(--ease-fade); }
.site-header.is-compact { --header-h: 4.9rem; padding-block: var(--space-8); box-shadow: var(--shadow-header); }
.site-header.is-compact .brand { --brand-scale: .8; }
@media (max-width: 1050px) {
  :root { --header-h: 6rem; }
  .site-header.is-compact { --header-h: 4.6rem; }
  .site-header.is-compact .brand { --brand-scale: .84; }
}
@media (max-width: 600px) {
  :root { --header-h: 5.5rem; }
  .site-header.is-compact { --header-h: 4.4rem; }
}