@charset "utf-8";

/* ==========================================================================
   Dialmetrics - design system
   1.  Tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Typography components
   5.  Buttons & links
   6.  Header / navigation
   7.  Hero
   8.  Cards & panels
   9.  Feature components
   10. Forms
   11. Footer
   12. Motion & utilities
   ========================================================================== */

/* ------------------------------------------------ 1. Tokens -------------- */

:root {
  /* Brand ramp - drawn from the Dialmetrics mark: azure body, teal highlight,
     lime swoosh. Used sparingly so the palette reads confident, not loud. */
  --brand-900: #0a2f6b;
  --brand-800: #0f4494;
  --brand-700: #1457bd;
  --brand-600: #1a68dd;
  --brand-500: #2a7cf0;
  --brand-400: #5b9bf7;
  --brand-300: #93bdfb;
  --brand-200: #c4dbfd;
  --brand-100: #e3edfe;
  --brand-50:  #f1f7ff;

  --teal-500: #10b6bd;
  --teal-400: #29cfd4;
  --teal-300: #6fe3e5;

  --lime-500: #86c221;
  --lime-400: #a3d94b;

  /* Neutral ramp */
  --ink-950: #050a14;
  --ink-900: #08101f;
  --ink-850: #0b1728;
  --ink-800: #101f35;
  --ink-700: #172c48;
  --ink-600: #21395a;
  --slate-600: #47597a;
  --slate-500: #64748b;
  --slate-400: #8f9db3;
  --slate-300: #b9c4d4;
  --slate-200: #dde3ec;
  --slate-150: #e8edf4;
  --slate-100: #f1f4f9;
  --slate-50:  #f8fafc;
  --white: #ffffff;

  /* Semantic - light theme */
  --bg: var(--white);
  --bg-subtle: var(--slate-50);
  --bg-sunken: var(--slate-100);
  --surface: var(--white);
  --surface-raised: var(--white);
  --border: var(--slate-200);
  --border-soft: var(--slate-150);
  --border-strong: var(--slate-300);
  --text: var(--ink-900);
  --text-strong: var(--ink-950);
  --text-muted: var(--slate-600);
  --text-soft: var(--slate-500);
  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-soft: var(--brand-50);
  --accent-border: var(--brand-200);
  --on-accent: var(--white);
  --focus-ring: var(--brand-500);

  --shadow-sm: 0 1px 2px rgb(8 16 31 / .05), 0 1px 3px rgb(8 16 31 / .04);
  --shadow-md: 0 4px 6px -2px rgb(8 16 31 / .05), 0 12px 24px -6px rgb(8 16 31 / .08);
  --shadow-lg: 0 8px 12px -4px rgb(8 16 31 / .06), 0 24px 48px -12px rgb(8 16 31 / .14);
  --shadow-accent: 0 8px 24px -8px rgb(26 104 221 / .5);

  /* Fixed dark tokens - used by "ink" sections in BOTH themes so the
     intentional dark bands survive a theme switch. */
  --ink-bg: var(--ink-950);
  --ink-surface: rgb(255 255 255 / .035);
  --ink-border: rgb(255 255 255 / .1);
  --ink-border-soft: rgb(255 255 255 / .06);
  --ink-text: #eef3fa;
  --ink-text-muted: #a8bbd4;
  --ink-text-soft: #7e93b0;

  /* Type */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1.0625rem, .25vw + 1rem, 1.1875rem);
  --fs-xl: clamp(1.1875rem, .5vw + 1.05rem, 1.375rem);
  --fs-2xl: clamp(1.375rem, .9vw + 1.15rem, 1.875rem);
  --fs-3xl: clamp(1.75rem, 1.9vw + 1.25rem, 2.625rem);
  --fs-4xl: clamp(1.9rem, 2.1vw + 1.4rem, 2.95rem);
  --fs-5xl: clamp(2.25rem, 2.6vw + 1.6rem, 3.6rem);

  /* Space & shape */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --container: 1216px;
  --container-wide: 1400px;
  --container-narrow: 780px;
  --section-y: clamp(3.5rem, 6vw, 6.25rem);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .38s;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: var(--ink-950);
  --bg-subtle: var(--ink-900);
  --bg-sunken: #04080f;
  --surface: rgb(255 255 255 / .035);
  --surface-raised: rgb(255 255 255 / .055);
  --border: rgb(255 255 255 / .1);
  --border-soft: rgb(255 255 255 / .06);
  --border-strong: rgb(255 255 255 / .18);
  --text: #eef3fa;
  --text-strong: #ffffff;
  --text-muted: #a8bbd4;
  --text-soft: #7e93b0;
  --accent: var(--brand-400);
  --accent-hover: var(--brand-300);
  --accent-soft: rgb(42 124 240 / .12);
  --accent-border: rgb(91 155 247 / .3);
  --on-accent: var(--ink-950);
  --focus-ring: var(--brand-300);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-md: 0 12px 28px -8px rgb(0 0 0 / .6);
  --shadow-lg: 0 24px 56px -16px rgb(0 0 0 / .75);
  --shadow-accent: 0 8px 28px -10px rgb(91 155 247 / .45);

  --ink-bg: #04080f;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink-950);
    --bg-subtle: var(--ink-900);
    --bg-sunken: #04080f;
    --surface: rgb(255 255 255 / .035);
    --surface-raised: rgb(255 255 255 / .055);
    --border: rgb(255 255 255 / .1);
    --border-soft: rgb(255 255 255 / .06);
    --border-strong: rgb(255 255 255 / .18);
    --text: #eef3fa;
    --text-strong: #ffffff;
    --text-muted: #a8bbd4;
    --text-soft: #7e93b0;
    --accent: var(--brand-400);
    --accent-hover: var(--brand-300);
    --accent-soft: rgb(42 124 240 / .12);
    --accent-border: rgb(91 155 247 / .3);
    --on-accent: var(--ink-950);
    --focus-ring: var(--brand-300);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-md: 0 12px 28px -8px rgb(0 0 0 / .6);
    --shadow-lg: 0 24px 56px -16px rgb(0 0 0 / .75);
    --shadow-accent: 0 8px 28px -10px rgb(91 155 247 / .45);

    --ink-bg: #04080f;

    color-scheme: dark;
  }
}

/* ------------------------------------------------ 2. Reset & base -------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.65;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--text-strong);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--accent-hover); }

ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--brand-500); color: #fff; }

hr { border: 0; border-top: 1px solid var(--border); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: .75rem 1.5rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  font-size: var(--fs-base);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--on-accent); }

/* ------------------------------------------------ 3. Layout -------------- */

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

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 5.5vw, 5rem); }
.section--subtle { background: var(--bg-subtle); }
.section--sunken { background: var(--bg-sunken); }

.section--ink {
  background: var(--ink-bg);
  color: var(--ink-text);
  --text: var(--ink-text);
  --text-strong: #fff;
  --text-muted: var(--ink-text-muted);
  --text-soft: var(--ink-text-soft);
  --border: var(--ink-border);
  --border-soft: var(--ink-border-soft);
  --border-strong: rgb(255 255 255 / .2);
  --surface: var(--ink-surface);
  --surface-raised: rgb(255 255 255 / .06);
  --accent: var(--brand-400);
  --accent-hover: var(--brand-300);
  --accent-soft: rgb(42 124 240 / .14);
  --accent-border: rgb(91 155 247 / .28);
  --bg-subtle: rgb(255 255 255 / .025);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }

.section-divider { border-top: 1px solid var(--border); }

.grid { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--sticky > :first-child { position: sticky; top: 112px; }
  .split--lead { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .split--trail { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* Blueprint grid + aurora glow, the site's signature background treatment. */
.blueprint { position: relative; isolation: isolate; overflow: hidden; }
.blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / .045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 78%);
}
.blueprint::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -10% auto -10%;
  height: 90%;
  background:
    radial-gradient(46% 60% at 22% 30%, rgb(26 104 221 / .42), transparent 70%),
    radial-gradient(40% 52% at 78% 18%, rgb(16 182 189 / .26), transparent 70%),
    radial-gradient(30% 40% at 56% 62%, rgb(134 194 33 / .1), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

/* ------------------------------------------------ 4. Typography ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.125rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}
.eyebrow--center { justify-content: center; }

.display { font-size: var(--fs-5xl); font-weight: 700; letter-spacing: -.035em; }
.h1 { font-size: var(--fs-4xl); font-weight: 650; letter-spacing: -.03em; }
.h2 { font-size: var(--fs-3xl); }
.h3 { font-size: var(--fs-2xl); }
.h4 { font-size: var(--fs-xl); letter-spacing: -.015em; }
.h5 { font-size: var(--fs-lg); letter-spacing: -.01em; }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.68;
  color: var(--text-muted);
}
.lead--large { font-size: var(--fs-xl); line-height: 1.6; }

.prose p + p { margin-top: 1.15em; }
.prose p { color: var(--text-muted); }
.prose h3, .prose h4 { margin-top: 2.25em; margin-bottom: .6em; }
.prose h3:first-child, .prose h4:first-child { margin-top: 0; }
.prose ul { margin: 1.15em 0; display: grid; gap: .6rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.section-head { max-width: 68ch; margin-bottom: clamp(2rem, 3.2vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 1.125rem; }

.text-muted { color: var(--text-muted); }
.text-soft { color: var(--text-soft); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.highlight {
  background: linear-gradient(100deg, var(--brand-400), var(--teal-400) 58%, var(--lime-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------ 5. Buttons ------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .8125rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.0625rem; height: 1.0625rem; flex: none; }

.btn--primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover { background: var(--brand-700); color: #fff; box-shadow: 0 12px 30px -10px rgb(26 104 221 / .62); }
:root[data-theme="dark"] .btn--primary,
.section--ink .btn--primary { background: var(--brand-500); }
:root[data-theme="dark"] .btn--primary:hover,
.section--ink .btn--primary:hover { background: var(--brand-400); }

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.btn--solid {
  background: var(--text-strong);
  color: var(--bg);
}
.btn--solid:hover { background: var(--text); color: var(--bg); opacity: .92; }

.btn--light { background: #fff; color: var(--ink-900); }
.btn--light:hover { background: var(--slate-100); color: var(--ink-950); }

.btn--sm { padding: .5625rem 1.0625rem; font-size: var(--fs-sm); }
.btn--lg { padding: 1rem 1.875rem; font-size: var(--fs-md); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 2.25rem;
}
.btn-row--center { justify-content: center; }

/* Arrow link - the small "read more" affordance used across cards. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--accent);
}
.arrow-link svg { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ------------------------------------------------ 6. Header -------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 24px -12px rgb(8 16 31 / .25);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--text-strong); flex: none; }
.brand:hover { color: var(--text-strong); }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.brand-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 3px;
}

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: .25rem; }
.nav-link {
  display: block;
  position: relative;
  padding: .5rem .8125rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-muted);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-link:hover { color: var(--text-strong); background: var(--bg-subtle); }
.nav-link.is-active { color: var(--text-strong); font-weight: 600; }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: .8125rem;
  right: .8125rem;
  bottom: .1875rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.header-actions { display: flex; align-items: center; gap: .625rem; flex: none; }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.theme-toggle:hover { color: var(--text-strong); border-color: var(--border-strong); background: var(--bg-subtle); }
.theme-toggle svg { width: 1.0625rem; height: 1.0625rem; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1023px) {
  .nav-toggle { display: grid; }
  .header-actions .btn { display: none; }

  .nav {
    position: fixed;
    inset: 72px 0 auto;
    margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 1rem var(--gutter) 1.75rem;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    pointer-events: none;
    transition: clip-path .35s var(--ease), opacity .25s var(--ease);
  }
  .nav.is-open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link { padding: .875rem .25rem; font-size: var(--fs-lg); border-bottom: 1px solid var(--border-soft); border-radius: 0; }
  .nav-link.is-active::after { display: none; }
  .nav-link.is-active { color: var(--accent); }
  .nav-cta { margin-top: 1.25rem; }
  .nav-cta .btn { width: 100%; }
}
@media (min-width: 1024px) {
  .nav-cta { display: none; }
}

/* ------------------------------------------------ 7. Hero ---------------- */

.hero {
  background: var(--ink-950);
  color: var(--ink-text);
  padding-block: clamp(3.25rem, 6vw, 5.5rem) clamp(3.25rem, 5.5vw, 5.5rem);
  --text: var(--ink-text);
  --text-strong: #fff;
  --text-muted: var(--ink-text-muted);
  --text-soft: var(--ink-text-soft);
  --border: var(--ink-border);
  --border-strong: rgb(255 255 255 / .2);
  --surface: var(--ink-surface);
  --accent: var(--brand-400);
  --accent-hover: var(--brand-300);
  --accent-soft: rgb(42 124 240 / .14);
  --bg-subtle: rgb(255 255 255 / .04);
}
.hero h1, .hero h2 { color: #fff; }

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}

.hero-title { font-size: var(--fs-5xl); font-weight: 700; letter-spacing: -.038em; }
.hero-lead {
  margin-top: 1.5rem;
  font-size: var(--fs-xl);
  line-height: 1.62;
  color: var(--ink-text-muted);
  max-width: 58ch;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem .4375rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}
.badge strong { color: var(--text-strong); font-weight: 600; }
.badge .pip {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--brand-500), var(--teal-400));
  color: #fff;
  flex: none;
}
.badge .pip svg { width: .8125rem; height: .8125rem; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-base);
  color: var(--ink-text-soft);
}
.hero-proof li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-proof svg { width: 1rem; height: 1rem; color: var(--lime-400); flex: none; }

/* The hero's right-hand "system diagram" panel. */
.stack-panel {
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02));
  box-shadow: 0 32px 70px -28px rgb(0 0 0 / .85);
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.stack-panel__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--ink-border-soft);
  background: rgb(255 255 255 / .03);
}
.stack-panel__dots { display: flex; gap: .3125rem; }
.stack-panel__dots span { width: 9px; height: 9px; border-radius: 999px; background: rgb(255 255 255 / .16); }
.stack-panel__dots span:first-child { background: rgb(255 106 106 / .55); }
.stack-panel__dots span:nth-child(2) { background: rgb(255 200 90 / .55); }
.stack-panel__dots span:nth-child(3) { background: rgb(134 194 33 / .55); }
.stack-panel__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-text-soft);
  margin-left: .375rem;
}
.stack-panel__body { padding: 1.25rem; display: grid; gap: .5rem; }

.stack-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: .875rem;
  padding: .8125rem .9375rem;
  border: 1px solid var(--ink-border-soft);
  border-radius: var(--radius);
  background: rgb(255 255 255 / .028);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.stack-row:hover { border-color: rgb(91 155 247 / .45); background: rgb(42 124 240 / .1); transform: translateX(3px); }
.stack-row__icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgb(255 255 255 / .06);
  color: var(--brand-300);
}
.stack-row__icon svg { width: 1.125rem; height: 1.125rem; }
.stack-row__label { font-weight: 600; font-size: var(--fs-base); color: #fff; letter-spacing: -.01em; }
.stack-row__meta {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--ink-text-soft);
  margin-top: 2px;
}

.stack-panel__foot {
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--ink-border-soft);
  background: rgb(255 255 255 / .02);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--ink-text-soft);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pulse {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--lime-400);
  box-shadow: 0 0 0 0 rgb(163 217 75 / .6);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgb(163 217 75 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(163 217 75 / 0); }
}

/* Page hero used on interior pages. */
.page-hero {
  background: var(--ink-950);
  color: var(--ink-text);
  padding-block: clamp(3rem, 5.5vw, 5rem) clamp(2.75rem, 4.5vw, 4.25rem);
  --text-muted: var(--ink-text-muted);
  --text-soft: var(--ink-text-soft);
  --border: var(--ink-border);
  --accent: var(--brand-400);
}
.page-hero h1 { color: #fff; }
.page-hero .lead { color: var(--ink-text-muted); max-width: 62ch; margin-top: 1.375rem; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  color: var(--ink-text-soft);
  margin-bottom: 1.5rem;
}
.breadcrumbs a { color: var(--ink-text-soft); }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: rgb(255 255 255 / .22); }
.breadcrumbs [aria-current] { color: var(--brand-300); }

/* ------------------------------------------------ 8. Cards --------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card--hover:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card__icon {
  width: 2.875rem;
  height: 2.875rem;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  margin-bottom: 1.375rem;
  flex: none;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.card__icon svg { width: 1.375rem; height: 1.375rem; }
.card--hover:hover .card__icon { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.card__title { font-size: var(--fs-xl); margin-bottom: .75rem; }
.card__text { color: var(--text-muted); font-size: var(--fs-base); line-height: 1.68; }
.card__foot { margin-top: auto; padding-top: 1.5rem; }
.card__index {
  position: absolute;
  top: clamp(1.5rem, 2.2vw, 2rem);
  right: clamp(1.5rem, 2.2vw, 2rem);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--text-soft);
  opacity: .7;
}

.card--flat { background: transparent; border-color: transparent; padding-inline: 0; }

/* Check list used inside service and domain cards. */
.check-list { display: grid; gap: .625rem; }
.check-list li {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: .6875rem;
  align-items: start;
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: 1.6;
}
.check-list svg { width: 1.125rem; height: 1.125rem; color: var(--accent); margin-top: .15rem; flex: none; }
.check-list--tight li { font-size: var(--fs-sm); }

.dot-list { display: grid; gap: .5rem; }
.dot-list li {
  display: grid;
  grid-template-columns: .4375rem minmax(0, 1fr);
  gap: .75rem;
  align-items: baseline;
  font-size: var(--fs-base);
  color: var(--text-muted);
}
.dot-list li::before {
  content: "";
  width: .4375rem; height: .4375rem;
  border-radius: 999px;
  background: var(--accent);
  opacity: .55;
  transform: translateY(-2px);
}

/* ------------------------------------------------ 9. Features ------------ */

/* Stat strip */
.stats {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.stat { background: var(--bg); padding: clamp(1.5rem, 2.4vw, 2.125rem); }
.section--ink .stat, :root[data-theme="dark"] .stat { background: var(--ink-bg); }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text-strong);
  line-height: 1.1;
}
.stat__label { margin-top: .5rem; font-size: var(--fs-base); color: var(--text-muted); }

/* Technology marquee */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.125rem;
  border-block: 1px solid var(--border);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text-soft);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
.marquee__item::after { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--accent); opacity: .45; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Tech stack groups */
.tech-group + .tech-group { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-soft); }
.tech-group__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: .9375rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .4375rem .8125rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-subtle);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.chip:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-soft); }

/* Modernization ladder */
.ladder { position: relative; display: grid; gap: 0; }
.ladder::before {
  content: "";
  position: absolute;
  left: 1.3125rem;
  top: 1.5rem;
  bottom: 3rem;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-500), var(--teal-400) 45%, var(--lime-400));
  opacity: .35;
  border-radius: 2px;
}
.ladder__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-block: clamp(1.125rem, 2vw, 1.625rem);
}
.ladder__item + .ladder__item { border-top: 1px solid var(--border-soft); }
.ladder__marker {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  z-index: 1;
  flex: none;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.section--ink .ladder__marker { background: var(--ink-bg); }
.ladder__item:hover .ladder__marker { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.ladder__title { font-size: var(--fs-lg); font-weight: 650; margin-bottom: .4375rem; }
.ladder__text { color: var(--text-muted); font-size: var(--fs-base); line-height: 1.68; max-width: 72ch; }

/* Numbered "reason" rows */
.reasons { display: grid; gap: 0; }
.reason {
  display: grid;
  gap: .75rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--border);
  align-items: start;
}
.reason:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 780px) {
  .reason { grid-template-columns: 3.5rem minmax(0, 17rem) minmax(0, 1fr); }
}
.reason__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .06em;
  padding-top: .25rem;
}
.reason__title { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.015em; }
.reason__text { color: var(--text-muted); font-size: var(--fs-base); line-height: 1.7; }

/* Accordion (FAQ) */
.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.375rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text-strong);
  transition: color .2s var(--ease);
}
.accordion__trigger:hover { color: var(--accent); }
.accordion__sign {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: .3125rem;
  color: var(--accent);
}
.accordion__sign::before,
.accordion__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.accordion__sign::after { transform: translateY(-50%) rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__sign::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p {
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.72;
  max-width: 76ch;
  padding-bottom: 1.5rem;
}

/* Case highlight card */
.case {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.case:hover { border-color: var(--accent-border); box-shadow: var(--shadow-md); }
@media (min-width: 860px) { .case { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(2rem, 4vw, 3.5rem); } }
.case__sector {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
  display: block;
}
.case__title { font-size: var(--fs-2xl); margin-bottom: .875rem; }
.case__aside { border-left: 1px solid var(--border); padding-left: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 859px) { .case__aside { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: 1.5rem; } }

/* Contact detail tiles */
.contact-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.contact-tile {
  display: flex;
  gap: 1rem;
  padding: 1.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .3s var(--ease);
}
.contact-tile:hover { border-color: var(--accent-border); }
.contact-tile__icon {
  width: 2.375rem; height: 2.375rem;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}
.contact-tile__icon svg { width: 1.1875rem; height: 1.1875rem; }
.contact-tile__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: .3125rem;
}
.contact-tile__value { font-weight: 600; color: var(--text-strong); font-size: var(--fs-base); line-height: 1.5; }
.contact-tile__value a { color: inherit; }
.contact-tile__value a:hover { color: var(--accent); }
.contact-tile__note { font-size: var(--fs-sm); color: var(--text-soft); margin-top: .25rem; }

/* Map */
.map-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-subtle);
  line-height: 0;
}
.map-frame iframe { width: 100%; height: clamp(280px, 40vw, 420px); border: 0; }

/* Call to action band */
.cta-band {
  position: relative;
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  background:
    radial-gradient(75% 120% at 12% 0%, rgb(26 104 221 / .55), transparent 62%),
    radial-gradient(60% 100% at 90% 10%, rgb(16 182 189 / .3), transparent 60%),
    var(--ink-950);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 100% at 80% 100%, #000, transparent 72%);
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { color: var(--ink-text-muted); max-width: 56ch; margin-top: 1.125rem; font-size: var(--fs-lg); }
.cta-band .eyebrow { color: var(--brand-300); }

/* ------------------------------------------------ 10. Forms -------------- */

.form-card {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.field-grid { display: grid; gap: 1.125rem; }
@media (min-width: 640px) { .field-grid--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .4375rem; }
.field > label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
}
.field .optional { font-weight: 400; color: var(--text-soft); }

.input, .textarea, .select {
  width: 100%;
  padding: .75rem .9375rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.5;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-soft); opacity: .8; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--slate-400); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { min-height: 8.5rem; resize: vertical; }
.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  background-size: 1.125rem;
}
.input.input-validation-error,
.textarea.input-validation-error,
.select.input-validation-error { border-color: #dc2626; }
.input.input-validation-error:focus,
.textarea.input-validation-error:focus { box-shadow: 0 0 0 3px rgb(220 38 38 / .12); }

.field-error, .field-validation-error {
  display: block;
  font-size: var(--fs-sm);
  color: #dc2626;
  font-weight: 500;
}
:root[data-theme="dark"] .field-error,
:root[data-theme="dark"] .field-validation-error { color: #fca5a5; }

.form-alert {
  display: flex;
  gap: .875rem;
  padding: 1rem 1.125rem;
  border: 1px solid rgb(220 38 38 / .3);
  background: rgb(220 38 38 / .06);
  border-radius: var(--radius);
  color: #b91c1c;
  font-size: var(--fs-base);
  margin-bottom: 1.5rem;
}
.form-alert svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .2rem; }
.form-alert ul { display: grid; gap: .25rem; }
:root[data-theme="dark"] .form-alert { color: #fca5a5; border-color: rgb(248 113 113 / .35); background: rgb(220 38 38 / .1); }

.form-note { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.6; }

.honeypot {
  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;
}

.validation-summary-valid { display: none; }

/* Success panel */
.success-mark {
  width: 4.5rem; height: 4.5rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--brand-500), var(--teal-400));
  color: #fff;
  margin-inline: auto;
  margin-bottom: 2rem;
  box-shadow: 0 16px 40px -14px rgb(26 104 221 / .6);
}
.success-mark svg { width: 2rem; height: 2rem; }

/* ------------------------------------------------ 11. Footer ------------- */

.site-footer {
  background: var(--ink-950);
  color: var(--ink-text-muted);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 0;
  font-size: var(--fs-base);
}
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer a { color: var(--ink-text-muted); }
.site-footer a:hover { color: #fff; }

.footer-grid {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
@media (min-width: 980px) {
  .footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
}
.footer-brand { display: inline-flex; align-items: center; gap: .75rem; color: #fff; margin-bottom: 1.25rem; }
.footer-brand:hover { color: #fff; }
.footer-brand img { width: 36px; height: 36px; }
.footer-brand .brand-name { color: #fff; }
.footer-about { max-width: 44ch; color: var(--ink-text-soft); line-height: 1.72; }

.footer-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.125rem;
}
.footer-links { display: grid; gap: .6875rem; }
.footer-links a { font-size: var(--fs-base); }

.footer-contact { display: grid; gap: 1rem; }
.footer-contact li { display: grid; grid-template-columns: 1.0625rem minmax(0, 1fr); gap: .75rem; align-items: start; line-height: 1.6; }
.footer-contact svg { width: 1.0625rem; height: 1.0625rem; color: var(--brand-400); margin-top: .2rem; }

.socials { display: flex; gap: .5rem; margin-top: 1.75rem; }
.social-link {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-sm);
  color: var(--ink-text-muted);
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.social-link:hover { color: #fff; border-color: rgb(255 255 255 / .3); background: rgb(255 255 255 / .06); }
.social-link svg { width: 1.0625rem; height: 1.0625rem; }

.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--ink-border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--ink-text-soft);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ------------------------------------------------ 12. Motion & utils ----- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

.visually-hidden {
  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;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

@media print {
  .site-header, .site-footer, .cta-band, .marquee, .theme-toggle, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}

/* ------------------------------------------------ 13. Refinements -------- */

/* Hero proof strip spans the full hero width beneath the grid. */
.hero-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: .75rem 2rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
.hero-proof li { align-items: flex-start; }
.hero-proof svg { margin-top: .2rem; }

/* Keep the headline from outrunning its column on wide screens. */
.hero-title { max-width: 18ch; }
@media (min-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
}

/* Marquee sits behind the content hierarchy - a texture band, not a headline. */
.marquee { padding-block: .875rem; }
.marquee__track { gap: 2.25rem; }
.marquee__item {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  gap: 2.25rem;
}
.marquee__item::after { width: 4px; height: 4px; }

/* Map facade - shown until the visitor explicitly loads the Google embed. */
.map-facade {
  display: grid;
  place-items: center;
  min-height: clamp(280px, 34vw, 400px);
  padding: clamp(1.75rem, 4vw, 3rem) var(--gutter);
  line-height: 1.65;
  background:
    linear-gradient(to right, var(--border-soft) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--bg-subtle);
}
.map-facade__body { text-align: center; max-width: 34rem; }
.map-facade__icon {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  margin: 0 auto 1.125rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
}
.map-facade__icon svg { width: 1.25rem; height: 1.25rem; }
.map-facade__label {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--text-strong);
}
.map-facade__address { color: var(--text-muted); font-size: var(--fs-base); margin-top: .375rem; }
.map-facade__note { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 1.125rem; }
.map-facade .btn-row { margin-top: 1.5rem; }
.map-frame.is-loaded { display: block; padding: 0; min-height: 0; background: var(--bg-subtle); }

/* ------------------------------------------------ 14. Paint cost --------- */

/*
  The aurora glow originally used filter: blur() across a very large box, which forces an
  expensive full-area repaint on every scroll frame. Radial gradients are already soft, so
  the blur bought almost nothing; dropping it removes the jank on modest hardware.
*/
.blueprint::after {
  filter: none;
  background:
    radial-gradient(48% 62% at 22% 28%, rgb(26 104 221 / .38), transparent 72%),
    radial-gradient(42% 55% at 78% 16%, rgb(16 182 189 / .22), transparent 72%),
    radial-gradient(34% 44% at 56% 60%, rgb(134 194 33 / .09), transparent 74%);
}

/* Promote the marquee to its own layer so it animates without repainting the band. */
.marquee__track {
  will-change: transform;
  backface-visibility: hidden;
}

/* ------------------------------------------------ 15. Narrow header ------ */

/*
  On phones the brand lock-up plus both header buttons overflowed the viewport, because
  .brand was flex:none and the tagline is wide. Let the brand shrink, and drop the tagline
  on the narrowest screens where the wordmark alone is enough.
*/
.brand { flex: 0 1 auto; min-width: 0; }
.brand > span { min-width: 0; }
.brand-name { display: block; overflow-wrap: anywhere; }

@media (max-width: 479px) {
  .header-inner { gap: .75rem; min-height: 64px; }
  .brand img { width: 32px; height: 32px; }
  .brand-name { font-size: 1.0625rem; }
  .brand-tag { display: none; }
  .theme-toggle, .nav-toggle { width: 36px; height: 36px; }
  .header-actions { gap: .5rem; }
  .nav { inset-block-start: 64px; max-height: calc(100dvh - 64px); }
}

/* ------------------------------------------------ 16. Accordion ---------- */

/*
  The grid-template-rows: 0fr -> 1fr trick collapsed the panel to zero height in testing,
  so the panel height is driven explicitly instead. Collapsing is scoped to .js: without
  scripting every answer stays open and readable rather than being permanently hidden.
*/
.accordion__panel {
  display: block;
  overflow: hidden;
  grid-template-rows: none;
  transition: none;
}
.js .accordion__panel {
  height: 0;
  transition: height .35s var(--ease);
}
.accordion__panel > div { overflow: visible; }

/* ------------------------------------------------ 17. Insights ----------- */

.chip--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.post-year + .post-year { margin-top: clamp(2.5rem, 5vw, 4rem); }
.post-year__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--text-soft);
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--border);
}

.post-row {
  display: grid;
  gap: .5rem clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--border-soft);
  align-items: start;
}
@media (min-width: 760px) {
  .post-row { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
}
.post-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--text-soft);
  padding-top: .3rem;
}
@media (min-width: 760px) {
  .post-row__meta { flex-direction: column; gap: .3rem; }
}
.post-row__title {
  font-size: var(--fs-xl);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.post-row__title a { color: var(--text-strong); }
.post-row__title a:hover { color: var(--accent); }
.post-row__summary { margin-top: .5rem; color: var(--text-muted); font-size: var(--fs-base); line-height: 1.65; max-width: 70ch; }

/* Article */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1.5rem;
  margin-top: 1.375rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-text-soft);
}

.post-standfirst {
  font-size: var(--fs-xl);
  line-height: 1.6;
  color: var(--text-muted);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--border);
}

.post-body { font-size: var(--fs-lg); line-height: 1.75; color: var(--text-muted); }
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 {
  font-size: var(--fs-2xl);
  margin-top: 2em;
  margin-bottom: .1em;
  scroll-margin-top: 6rem;
}
.post-body h3 {
  font-size: var(--fs-xl);
  margin-top: 1.75em;
  margin-bottom: .1em;
  scroll-margin-top: 6rem;
}
.post-body strong { color: var(--text-strong); font-weight: 600; }
.post-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.post-body ul, .post-body ol { padding-left: 1.35rem; display: grid; gap: .5rem; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li::marker { color: var(--accent); }

.post-body blockquote {
  border-left: 3px solid var(--accent);
  padding: .25rem 0 .25rem 1.25rem;
  color: var(--text);
  font-style: italic;
}

.post-body code {
  font-family: var(--font-mono);
  font-size: .82em;
  padding: .15em .4em;
  border-radius: 5px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  color: var(--text-strong);
}
.post-body pre {
  padding: 1.125rem 1.25rem;
  border-radius: var(--radius);
  background: var(--ink-950);
  border: 1px solid var(--ink-border);
  overflow-x: auto;
  line-height: 1.6;
}
.post-body pre code {
  padding: 0;
  border: 0;
  background: none;
  color: #dbe6f5;
  font-size: .8125rem;
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  display: block;
  overflow-x: auto;
}
.post-body th, .post-body td {
  padding: .6875rem .875rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.post-body th { color: var(--text-strong); font-weight: 600; white-space: nowrap; }

.post-body hr { margin-block: 2.25em; }
.post-body img { border-radius: var(--radius); border: 1px solid var(--border); }

.post-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
.post-foot .arrow-link:first-child svg { transform: rotate(180deg); }
.post-foot .arrow-link:first-child:hover svg { transform: rotate(180deg) translateX(4px); }

/* ------------------------------------------------ 18. Page hero ---------- */

/*
  The dark band is a locator, not a billboard. Full-height heroes were taking roughly half the
  viewport on every interior page and pushing the actual content below the fold, so the band is
  compact everywhere: less padding, a smaller headline, and a lead at body size.

  Keep hero leads to about 140 characters so they never run past two lines on desktop.
*/
.page-hero {
  padding-block: clamp(1.375rem, 2.2vw, 2.125rem) clamp(1.25rem, 1.9vw, 1.75rem);
}
.page-hero .breadcrumbs { margin-bottom: .625rem; }

.page-hero h1 {
  font-size: clamp(1.4375rem, 1.25vw + 1.05rem, 2.125rem);
  letter-spacing: -.022em;
  line-height: 1.18;
}

.page-hero .lead {
  margin-top: .6875rem;
  font-size: var(--fs-base);
  line-height: 1.6;
  max-width: 74ch;
}

.page-hero .post-meta { margin-top: .75rem; }

/* The section beneath a hero starts almost immediately. */
.section--flush-top { padding-top: clamp(1.75rem, 2.6vw, 2.5rem); }

.filter-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .375rem .875rem;
  margin-bottom: 1.75rem;
  font-size: var(--fs-base);
  color: var(--text-soft);
}
.filter-note strong { color: var(--text-strong); font-weight: 600; }


/* ------------------------------------------------ 20. Reading measure ---- */

/*
  Long-form pages use the standard container so their left edge and bar width match every
  other page, then cap the text column inside it. Narrowing the container itself made the
  article hero visibly narrower than the rest of the site, which read as a mistake.
*/
.measure { max-width: 46rem; }

/* Headline is three verbs now; widen its measure and trim a size step so it still sits on three lines. */
.hero-title { max-width: 26ch; font-size: clamp(2.125rem, 2.3vw + 1.5rem, 3.25rem); }