/* Primitive → semantic → component. Only this file owns raw design values. */
:root {
  --font-display: "Alliance No. 1", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ink: #161616; --white: #ffffff; --gray-50: #ffffff; --gray-100: #f4f4f4; --gray-200: #e0e0e0;
  --gray-300: #c6c6c6; --gray-400: #a8a8a8; --gray-500: #8d8d8d;
  --gray-600: #6f6f6f; --gray-700: #525252; --gray-800: #393939;
  --gray-900: #262626; --gray-950: #161616;
  --blue-50: #edf5ff; --blue-100: #d0e2ff; --blue-200: #a6c8ff;
  --blue-300: #78a9ff; --blue-400: #4589ff; --blue-500: #0f62fe;
  --blue-600: #0043ce; --blue-700: #002d9c; --blue-800: #001d6c;
  --blue-900: #001141; --blue-950: #000c2c;
  --coral-50: #fff3ef; --coral-100: #ffe1d9; --coral-200: #ffc2b4;
  --coral-300: #ff9b87; --coral-400: #ff7b64; --coral-500: #f55d47;
  --coral-600: #d74330; --coral-700: #af3022; --coral-800: #8e2b20;
  --coral-900: #75281f; --coral-950: #40110b;
  --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px;
  --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px;
  --dimension-64: 64px; --dimension-80: 80px; --dimension-96: 96px;
  --dimension-128: 128px; --dimension-240: 240px; --dimension-320: 320px;
  --dimension-480: 480px; --dimension-720: 720px; --dimension-1440: 1440px;
  --dimension-full: 100%; --dimension-screen: 100svh; --line-1: 1px; --line-2: 2px; --line-4: 4px; --line-6: 6px;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-full: 999px;
  --font-sans: "Alliance No. 1", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-xs: var(--text-base); --text-sm: var(--text-base); --text-base: 18px; --text-lg: var(--text-section); --text-xl: var(--text-section);
  --text-display: 72px; --text-title: 56px; --text-section: 32px;
  --text-menu: var(--text-section);
  --leading-tight: 1.02; --leading-normal: 1.5; --leading-label: 1.2;
  --font-normal: 400; --font-medium: var(--font-normal); --font-semibold: var(--font-normal);
  --tracking-tight: -0.045em; --tracking-normal: -0.015em;
  --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 500ms;
  --duration-reveal: 650ms; --duration-stagger: 40ms; --duration-none: 0ms;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-in-out: ease-in-out;
  --alpha-zero: 0; --alpha-full: 1; --alpha-muted: .62; --alpha-faint: .18;

  --background: var(--gray-50); --foreground: var(--gray-950);
  --card: var(--gray-100); --card-foreground: var(--gray-950);
  --popover: var(--gray-50); --popover-foreground: var(--gray-950);
  --muted: var(--gray-100); --muted-foreground: var(--gray-600);
  --border: var(--gray-300); --input: var(--gray-300); --ring: var(--coral-500);
  --primary: var(--gray-950); --primary-foreground: var(--gray-50);
  --secondary: var(--gray-100); --secondary-foreground: var(--gray-950);
  --accent: var(--coral-500); --accent-strong: var(--coral-700); --accent-foreground: var(--white);
  --type-body: var(--font-sans); --type-base: var(--text-base); --type-note: var(--text-sm);
  --type-heading: var(--text-title); --type-display: var(--text-display); --type-menu: var(--text-menu);
  --type-weight: var(--font-normal); --type-emphasis: var(--font-medium);
  --type-leading: var(--leading-normal); --type-leading-label: var(--leading-label); --type-leading-heading: var(--leading-tight);
  --type-tracking: var(--tracking-normal); --type-tracking-heading: var(--tracking-tight);
  --gap: var(--space-6); --gap-tight: var(--space-2); --gap-control: var(--space-4);
  --inset: var(--space-8); --section-space: var(--dimension-96); --hero-space: var(--dimension-128);
  --page-width: var(--dimension-1440); --copy-width: var(--dimension-480);
  --control-height: var(--space-12); --radius: var(--radius-sm); --stroke: var(--line-1);
  --focus-width: var(--line-2); --focus-offset: var(--space-1);
  --fill: var(--dimension-full); --screen: var(--dimension-screen); --zero: var(--space-0);
  --content-min: var(--dimension-240); --media-height: var(--dimension-320);
  --motion-fast: var(--duration-fast); --motion-normal: var(--duration-normal);
  --motion-slow: var(--duration-slow); --motion-reveal: var(--duration-reveal);
  --motion-stagger: var(--duration-stagger); --motion-none: var(--duration-none);
  --motion-ease: var(--ease-out); --motion-ease-ui: var(--ease-in-out);
  --motion-distance: var(--space-4); --motion-nudge: var(--space-1);
  --motion-hidden: var(--alpha-zero); --motion-shown: var(--alpha-full); --motion-muted: var(--alpha-muted); --motion-faint: var(--alpha-faint);
  --blur: var(--space-2);

  --button-height: var(--control-height); --nav-padding: var(--inset);
  --menu-background: var(--popover); --menu-foreground: var(--popover-foreground);
}
/* Any element may carry the dark ground; the alias rebind below picks up these primitives. */
:root[data-theme="dark"], [data-theme="dark"] {
  --gray-50: #161616; --gray-100: #262626; --gray-200: #393939;
  --gray-300: #525252; --gray-400: #6f6f6f; --gray-500: #8d8d8d;
  --gray-600: #a8a8a8; --gray-700: #c6c6c6; --gray-800: #e0e0e0;
  --gray-900: #f4f4f4; --gray-950: #ffffff;
  --blue-50: #edf5ff; --blue-100: #d0e2ff; --blue-200: #a6c8ff;
  --blue-300: #78a9ff; --blue-400: #4589ff; --blue-500: #0f62fe;
  --blue-600: #0043ce; --blue-700: #002d9c; --blue-800: #001d6c;
  --blue-900: #001141; --blue-950: #000c2c;
}
@media (max-width: 700px) {
  :root { --inset: var(--space-5); --section-space: var(--dimension-64); --hero-space: var(--dimension-80); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-reveal: 0ms; --duration-stagger: 0ms; }
}

/* Extended foundations for the composed website. */
:root {
 --dimension-2: 2px; --dimension-56: 56px; --dimension-72: 72px; --dimension-120: 120px; --dimension-160: 160px;
 --dimension-200: 200px; --dimension-360: 360px; --dimension-560: 560px; --dimension-880: 880px;
 --dimension-1040: 1040px; --dimension-1800: 1800px; --dimension-540: 540px;
 --ratio-film: 2.45; --ratio-story: 1.5;
  --ratio-screen: 1.684; --ratio-square: 1; --ratio-banner: 2;
  --window-brand-height: var(--space-3);
 --dimension-vw: 1vw; --text-wordmark: var(--text-display);
 --text-brand: var(--text-section); --text-article: var(--text-base); --text-feature: var(--text-section);
 --alpha-image: 0.82; --scale-hover: 1.025; --z-nav: 20; --z-skip: 30;
 --type-display-family: var(--font-display); --type-brand: var(--text-brand);
 --type-wordmark: var(--text-wordmark); --type-feature: var(--text-feature); --type-article: var(--text-article);
 --wide-copy: var(--dimension-880); --article-width: var(--dimension-720);
 --body-max: var(--dimension-1800); --read-width: var(--dimension-560);
 --nav-height: var(--dimension-96); --film-ratio: var(--ratio-film); --story-ratio: var(--ratio-story);
 --logo-height: var(--dimension-64); --logo-width: var(--dimension-200); --logo-strip-height: var(--dimension-160);
 /* Per-mark optical width; each client record overrides it inline. */
 --mark-width: var(--logo-width);
 --hero-min: var(--dimension-480); --diagram-height: var(--dimension-480); --diagram-mark: var(--dimension-120);
 --illustration-invert: invert(1); --media-hover-scale: var(--scale-hover); --media-hover-opacity: var(--alpha-image);
 --layer-navigation: var(--z-nav); --layer-skip: var(--z-skip); --link-hover: var(--foreground);
 --solid-white: var(--white); --accent-hover: var(--coral-400);
 --space-section-gap: var(--dimension-64); --border-emphasis: var(--dimension-2);
}
@font-face {font-family:'Alliance No. 1';src:url('/assets/fonts/AllianceNo1-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face {font-family:'Helvetica Now Text';src:url('/assets/fonts/HelveticaNowText-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face {font-family:'Helvetica Now Text';src:url('/assets/fonts/HelveticaNowText-RegIta.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face {font-family:'Helvetica Now Text';src:url('/assets/fonts/HelveticaNowText-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face {font-family:'Helvetica Now Text';src:url('/assets/fonts/HelveticaNowText-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;}
@font-face {font-family:'Helvetica Now Text';src:url('/assets/fonts/HelveticaNowText-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face {font-family:'Helvetica Now Text';src:url('/assets/fonts/HelveticaNowText-BoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap;}
@media(max-width:700px){:root{--film-ratio:var(--ratio-square);--hero-min:var(--dimension-360);--logo-strip-height:var(--dimension-120);--logo-height:var(--dimension-56);--nav-height:var(--dimension-80);--space-section-gap:var(--space-12);}}

:root {
 --angle-45: 45deg; --icon-rotation: var(--angle-45);
 --layout-1040: var(--dimension-1040);
 --layout-160: var(--dimension-160);
 --layout-320: var(--dimension-320);
 --layout-360: var(--dimension-360);
 --layout-80: var(--dimension-80);
}

/* Rebind aliases at a theme boundary; only primitives differ between themes. */
:root, [data-theme] {
 --background: var(--gray-50);
 --foreground: var(--gray-950);
 --card: var(--gray-100);
 --card-foreground: var(--gray-950);
 --popover: var(--gray-50);
 --popover-foreground: var(--gray-950);
 --muted: var(--gray-100);
 --muted-foreground: var(--gray-600);
 --border: var(--gray-300);
 --input: var(--gray-300);
 --ring: var(--coral-500);
 --primary: var(--gray-950);
 --primary-foreground: var(--gray-50);
 --secondary: var(--gray-100);
 --secondary-foreground: var(--gray-950);
 --accent: var(--coral-500);
 --accent-strong: var(--coral-700);
 --accent-foreground: var(--white);
 --type-body: var(--font-sans);
 --type-base: var(--text-base);
 --type-note: var(--text-sm);
 --type-heading: var(--text-title);
 --type-display: var(--text-display);
 --type-menu: var(--text-menu);
 --type-weight: var(--font-normal);
 --type-emphasis: var(--font-medium);
 --type-leading: var(--leading-normal); --type-leading-label: var(--leading-label);
 --type-leading-heading: var(--leading-tight);
 --type-tracking: var(--tracking-normal);
 --type-tracking-heading: var(--tracking-tight);
 --gap: var(--space-6);
 --gap-tight: var(--space-2);
 --gap-control: var(--space-4);
 --page-width: var(--dimension-1440);
 --copy-width: var(--dimension-480);
 --control-height: var(--space-12);
 --radius: var(--radius-sm);
 --stroke: var(--line-1);
 --focus-width: var(--line-2);
 --focus-offset: var(--space-1);
 --fill: var(--dimension-full);
 --screen: var(--dimension-screen);
 --zero: var(--space-0);
 --content-min: var(--dimension-240);
 --media-height: var(--dimension-320);
 --motion-fast: var(--duration-fast);
 --motion-normal: var(--duration-normal);
 --motion-slow: var(--duration-slow);
 --motion-reveal: var(--duration-reveal);
 --motion-stagger: var(--duration-stagger);
 --motion-none: var(--duration-none);
 --motion-ease: var(--ease-out);
 --motion-ease-ui: var(--ease-in-out);
 --motion-distance: var(--space-4);
 --motion-nudge: var(--space-1);
 --motion-hidden: var(--alpha-zero);
 --motion-shown: var(--alpha-full);
 --motion-muted: var(--alpha-muted); --motion-faint: var(--alpha-faint);
 --blur: var(--space-2);
 --button-height: var(--control-height);
 --nav-padding: var(--inset);
 --menu-background: var(--popover);
 --menu-foreground: var(--popover-foreground);
 --type-display-family: var(--font-display);
 --type-brand: var(--text-brand);
 --type-wordmark: var(--text-wordmark);
 --type-feature: var(--text-feature);
 --type-article: var(--text-article);
 --wide-copy: var(--dimension-880);
 --article-width: var(--dimension-720);
 --body-max: var(--dimension-1800);
 --read-width: var(--dimension-560);
 --story-ratio: var(--ratio-story);
 --logo-width: var(--dimension-200);
 --diagram-height: var(--dimension-480);
 --diagram-mark: var(--dimension-120);
 --media-hover-scale: var(--scale-hover);
 --media-hover-opacity: var(--alpha-image);
 --layer-navigation: var(--z-nav);
 --layer-skip: var(--z-skip);
 --link-hover: var(--foreground);
 --solid-white: var(--white);
 --accent-hover: var(--coral-400);
 --border-emphasis: var(--dimension-2);
 --icon-rotation: var(--angle-45);
 --layout-1040: var(--dimension-1040);
 --layout-160: var(--dimension-160);
 --layout-320: var(--dimension-320);
 --layout-360: var(--dimension-360);
 --layout-80: var(--dimension-80);
}

/* Cinematic media, editorial splits, and the linework family. */
:root {
 --dimension-600: 600px; --text-story: var(--text-display); --unit-one: 1; --unit-two: 2; --unit-minus-one: -1;
 --story-hero-height: var(--dimension-600); --type-story-display: var(--text-story);
 --brand-mark-width: var(--space-12); --brand-mark-height: var(--space-9);
 --linework-height: var(--dimension-320); --linework-detail-height: var(--dimension-240);
 --trace-length: var(--unit-one);
 /* The rider on the portal route: one lap; the head, its trail, and the wall it leaves, as fractions of it. */
 --fraction-3: .03; --fraction-8: .08; --fraction-35: .35; --fraction-65: .65;
 --rider-lap: var(--duration-lap); --rider-head: var(--fraction-3); --rider-trail: var(--fraction-8); --rider-wall: var(--fraction-35); --rider-wall-far: var(--fraction-65);
 --rider-width: var(--line-6); --rider-trail-width: var(--line-4); --linework-scale: 1.2;
 /* One cycle of the dash pattern is two routes long: the crossing, then as long again of quiet
    while the wall derezzes, so nothing is ever drawn ahead of the head and a run can restart
    on any route without a seam. The offset starts a whole route back, off the entry end. */
 --rider-cycle: var(--unit-two); --rider-start: var(--unit-minus-one);
}

:root {
 --dimension-112: 112px; --dimension-104: 104px; --dimension-176: 176px;
 --duration-marquee: 44s; --duration-lap: 5s; --percentage-negative-half: -50%;
 --black-alpha-70: rgba(0,0,0,.70); --black-alpha-25: rgba(0,0,0,.25); --black-alpha-10: rgba(0,0,0,.10);
 --gradient-film: linear-gradient(to bottom, var(--black-alpha-25),var(--black-alpha-10) 35%,var(--black-alpha-70));
 --hero-shade: var(--gradient-film); --trust-height: var(--dimension-128);
 /* The client band: marks need far more air than an equal-cell row did. */
 --logo-gap: var(--dimension-72); --logo-band-space: var(--space-10);
 /* The statement's readouts: the compliance check, the space between them, and how long each word holds. */
 --check-size: var(--space-4); --check-stroke: var(--line-2); --readout-gap: var(--dimension-72); --rotate-hold: 2800ms;
 /* The one step below the 18px floor. Used by the statement's readouts and by film captions,
    so anything that annotates rather than speaks is set at a single size. */
 --text-caption: 14px; --type-caption: var(--text-caption);
 /* Caps need air that lowercase does not; the row's own tracking, not the page's. */
 --tracking-caps: 0.08em;
 /* SQL is the only code on the site and a proportional font makes it unreadable. */
 --font-code: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; --text-code: 13px; --type-code: var(--font-code); --code-size: var(--text-code);
  --signal-size: 7px; --signal-radius: 50%; --run-label: 52px; --caret-width: 1px;
 /* The work band: how long each film holds before the next takes over. */
 --film-hold: 6000ms;
 --marquee-width: var(--dimension-176); --marquee-height: var(--space-12);
 --marquee-duration: var(--duration-marquee); --marquee-shift: var(--percentage-negative-half);
 --logo-ink-filter: brightness(0); --build-width: var(--dimension-360); --build-height: var(--dimension-360);
}
@media(max-width:700px){:root{--trust-height:var(--dimension-104);--logo-gap:var(--dimension-56);--logo-band-space:var(--space-7);--readout-gap:var(--space-8);--build-width:var(--dimension-240)}}

:root{--dimension-viewport-inline:100vw;--viewport-inline:var(--dimension-viewport-inline)}

:root,[data-theme]{--dimension-72:72px;--nav-height:var(--dimension-72);--nav-block-inset:var(--space-3)}

/* Compact scale: body, card heading, section title, display. */
@media(max-width:700px){:root,[data-theme]{--text-section:24px;--text-title:36px;--text-display:48px}}

:root,[data-theme]{--nav-contact-background:var(--ink);--nav-contact-foreground:var(--white)}

:root{--product-wordmark-width:var(--dimension-1040);--product-hero-space:var(--dimension-128)}

/* One site-wide palette; sections inherit the selected appearance. */
:root{color-scheme:light;--filter-mark-light:invert(0);--filter-mark-dark:invert(1);--filter-logo-light:grayscale(1) brightness(0);--filter-logo-dark:grayscale(1) brightness(0) invert(1);--brand-filter:var(--filter-mark-light);--client-logo-filter:var(--filter-logo-light)}
:root[data-theme="dark"],[data-theme="dark"]{color-scheme:dark;--brand-filter:var(--filter-mark-dark);--client-logo-filter:var(--filter-logo-dark)}

:root{--blend-light:normal;--blend-dark:normal;--client-logo-blend:var(--blend-light);--pale-logo-filter:var(--logo-ink-filter)}
:root[data-theme="dark"],[data-theme="dark"]{--client-logo-blend:var(--blend-dark);--pale-logo-filter:var(--filter-logo-light);--accent-strong:var(--coral-200)}

:root{--dimension-640:640px;--blueprint-stage-height:var(--dimension-640);--blueprint-width:var(--dimension-1040);--blueprint-side:var(--dimension-200);--blueprint-agent:var(--dimension-320);--blueprint-art-width:var(--dimension-120);--blueprint-art-height:var(--dimension-80)}