/* ============================================================
   Visionary Design — Webfonts
   Heading: Inter Tight   Body: Inter

   NOTE: No font binaries were provided in the brand package, so
   these load from Google Fonts — the exact families named in the
   brand spec. If/when you receive licensed binaries, drop them in
   /assets/fonts and replace the @import with @font-face rules
   pointing at the local files (template left below).
   ============================================================ */

/* --- Self-host template (uncomment + supply binaries) ---------
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/Inter-Variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/InterTight-Variable.woff2') format('woff2-variations');
}
--------------------------------------------------------------- */

/* ============================================================
   Visionary Design — Color Tokens
   Calm, executive, trustworthy. Navy-led with a single
   action blue and emerald reserved for outcomes/metrics.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --navy-900: #0B1120; /* deepest, used sparingly for full-bleed */
  --navy-800: #0F172A; /* Deep Navy — primary brand color */
  --navy-700: #1E293B;
  --navy-600: #334155;

  /* ---- Slate neutral scale ---- */
  --slate-700: #334155;
  --slate-600: #475569; /* Slate — secondary UI + nav */
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0; /* Light Slate — borders */
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;

  /* ---- Action blue (CTAs, links, focus) ---- */
  --blue-700: #1D4ED8;
  --blue-600: #2563EB; /* Action Blue */
  --blue-500: #3B82F6;
  --blue-100: #DBEAFE;
  --blue-50:  #EFF6FF;

  /* ---- Emerald (outcomes, growth, success) ---- */
  --emerald-700: #047857;
  --emerald-600: #059669; /* Emerald */
  --emerald-500: #10B981;
  --emerald-100: #D1FAE5;
  --emerald-50:  #ECFDF5;

  /* ---- Amber (caution / pending — used rarely) ---- */
  --amber-600: #D97706;
  --amber-100: #FEF3C7;
  --amber-50:  #FFFBEB;

  /* ---- Red (errors / risk — used rarely) ---- */
  --red-600: #DC2626;
  --red-100: #FEE2E2;
  --red-50:  #FEF2F2;

  /* ---- Base neutrals ---- */
  --white:    #FFFFFF;
  --off-white:#FAFAF9; /* page background */
  --near-black:#111827;
  --gray-500: #6B7280;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Surfaces & backgrounds */
  --surface-page:    var(--off-white);
  --surface-card:    var(--white);
  --surface-sunken:  var(--slate-50);
  --surface-inverse: var(--navy-800);
  --surface-hover:   var(--slate-100);

  /* Text */
  --text-strong:    var(--near-black);
  --text-body:      var(--slate-700);
  --text-muted:     var(--gray-500);
  --text-subtle:    var(--slate-400);
  --text-on-dark:   #E6EBF2;
  --text-on-dark-muted: #9AA8BC;
  --text-link:      var(--blue-600);

  /* Borders & dividers */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-inverse: rgba(255, 255, 255, 0.12);

  /* Brand / action */
  --brand:          var(--navy-800);
  --action:         var(--blue-600);
  --action-hover:   var(--blue-700);
  --focus-ring:     rgba(37, 99, 235, 0.35);

  /* Status */
  --positive:       var(--emerald-600);
  --positive-soft:  var(--emerald-50);
  --caution:        var(--amber-600);
  --caution-soft:   var(--amber-50);
  --critical:       var(--red-600);
  --critical-soft:  var(--red-50);
}

/* ============================================================
   Visionary Design — Typography Tokens
   Inter Tight for headings, Inter for body. Tight, confident
   headlines; comfortable, legible body. Tabular figures for
   metrics (the brand is data-informed).
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-heading: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Type scale (px) — major-third-ish, restrained ---- */
  --text-display: 3.5rem;   /* 56 — hero */
  --text-h1:      2.5rem;   /* 40 */
  --text-h2:      2rem;     /* 32 */
  --text-h3:      1.5rem;   /* 24 */
  --text-h4:      1.25rem;  /* 20 */
  --text-lg:      1.125rem; /* 18 — lead paragraph */
  --text-base:    1rem;     /* 16 — body */
  --text-sm:      0.875rem; /* 14 — secondary */
  --text-xs:      0.75rem;  /* 12 — labels, meta */

  /* ---- Line heights ---- */
  --leading-tight:   1.1;   /* display / headlines */
  --leading-snug:    1.25;  /* sub-headings */
  --leading-normal:  1.5;   /* body */
  --leading-relaxed: 1.65;  /* long-form reading */

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em; /* large headings */
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;  /* eyebrows / overlines */
  --tracking-caps:   0.08em;  /* all-caps labels */
}

/* ============================================================
   Visionary Design — Spacing, Radii, Shadows, Motion
   4px base grid. Restrained elevation — the brand is calm and
   mature, so shadows are soft and low, borders do most of the
   structural work.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-prose: 680px;
  --gutter: var(--space-6);

  /* ---- Radii — modest, never playful ---- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;   /* default for buttons, inputs, cards */
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-pill:999px;

  /* ---- Shadows — soft, low, cool-neutral ---- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.14);
  --ring-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Motion — quiet, functional, no bounce ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
}

/* ============================================================
   Visionary Design — Base element styles
   Light, unobtrusive resets + base typographic rhythm so any
   page that links styles.css inherits the brand voice.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-snug); }
h3 { font-size: var(--text-h3); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }
h4 { font-size: var(--text-h4); letter-spacing: var(--tracking-normal); line-height: var(--leading-snug); }

p { margin: 0 0 var(--space-4); }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

small { font-size: var(--text-sm); }

strong { font-weight: var(--weight-semibold); color: var(--text-strong); }

/* Eyebrow / overline label used across the brand */
.vd-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--action);
}

/* Tabular numerals for metrics */
.vd-tnum { font-variant-numeric: tabular-nums; }

::selection { background: var(--blue-100); color: var(--navy-800); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

/* ============================================================
   Visionary Design — Component styles
   Class-based styling for the React primitives so hover, focus,
   and disabled states are expressible. All values reference the
   token layer. Prefix: .vd-
   ============================================================ */

/* ---------------- Button ---------------- */
.vd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  height: 40px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.vd-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.vd-btn:active { transform: translateY(0.5px); }
.vd-btn[disabled], .vd-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
.vd-btn--sm { height: 32px; font-size: var(--text-xs); padding: 0 var(--space-3); border-radius: var(--radius-sm); }
.vd-btn--lg { height: 48px; font-size: var(--text-base); padding: 0 var(--space-6); }
.vd-btn--block { display: flex; width: 100%; }

.vd-btn--primary { background: var(--action); color: #fff; }
.vd-btn--primary:hover { background: var(--action-hover); }

.vd-btn--brand { background: var(--navy-800); color: #fff; }
.vd-btn--brand:hover { background: var(--navy-700); }

.vd-btn--secondary { background: var(--white); color: var(--text-strong); border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.vd-btn--secondary:hover { background: var(--slate-50); border-color: var(--border-strong); }

.vd-btn--ghost { background: transparent; color: var(--text-body); }
.vd-btn--ghost:hover { background: var(--surface-hover); color: var(--text-strong); }

.vd-btn--danger { background: var(--critical); color: #fff; }
.vd-btn--danger:hover { background: #B91C1C; }

.vd-btn__icon { display: inline-flex; width: 16px; height: 16px; flex: none; }
.vd-btn--lg .vd-btn__icon { width: 18px; height: 18px; }

/* ---------------- Field / Input ---------------- */
.vd-field { display: flex; flex-direction: column; gap: var(--space-2); }
.vd-field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-strong); }
.vd-field__req { color: var(--critical); margin-left: 2px; }
.vd-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.vd-field__error { font-size: var(--text-xs); color: var(--critical); }

.vd-input {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-strong);
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  height: 40px;
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.vd-input::placeholder { color: var(--text-subtle); }
.vd-input:hover { border-color: var(--border-strong); }
.vd-input:focus { outline: none; border-color: var(--action); box-shadow: var(--ring-focus); }
.vd-input[disabled] { background: var(--slate-50); color: var(--text-muted); cursor: not-allowed; }
.vd-input--invalid { border-color: var(--critical); }
.vd-input--invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.25); }
textarea.vd-input { height: auto; padding: var(--space-3); resize: vertical; line-height: var(--leading-normal); }
select.vd-input { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8);
}

/* ---------------- Checkbox ---------------- */
.vd-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm); color: var(--text-body); user-select: none; }
.vd-check__box {
  width: 18px; height: 18px; flex: none; border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-strong); background: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.vd-check__box svg { width: 12px; height: 12px; opacity: 0; color: #fff; }
.vd-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.vd-check input:checked + .vd-check__box { background: var(--action); border-color: var(--action); }
.vd-check input:checked + .vd-check__box svg { opacity: 1; }
.vd-check input:focus-visible + .vd-check__box { box-shadow: var(--ring-focus); }
.vd-check input:disabled ~ * { opacity: 0.5; }

/* ---------------- Switch ---------------- */
.vd-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; user-select: none; }
.vd-switch__track {
  width: 40px; height: 22px; border-radius: var(--radius-pill);
  background: var(--slate-300); position: relative; flex: none;
  transition: background var(--duration-base) var(--ease-standard);
}
.vd-switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out);
}
.vd-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vd-switch input:checked + .vd-switch__track { background: var(--action); }
.vd-switch input:checked + .vd-switch__track .vd-switch__thumb { transform: translateX(18px); }
.vd-switch input:focus-visible + .vd-switch__track { box-shadow: var(--ring-focus); }
.vd-switch__label { font-size: var(--text-sm); color: var(--text-body); }

/* ---------------- Card ---------------- */
.vd-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.vd-card--flat { box-shadow: none; }
.vd-card--pad { padding: var(--space-6); }
.vd-card--interactive { transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); cursor: pointer; }
.vd-card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); transform: translateY(-2px); }

/* ---------------- Badge ---------------- */
.vd-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  line-height: 1; padding: 4px 9px; border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.vd-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vd-badge--neutral  { background: var(--slate-100); color: var(--slate-600); }
.vd-badge--brand    { background: var(--blue-50);  color: var(--blue-700); }
.vd-badge--positive { background: var(--emerald-50); color: var(--emerald-700); }
.vd-badge--caution  { background: var(--amber-50);  color: var(--amber-600); }
.vd-badge--critical { background: var(--red-50);    color: var(--red-600); }
.vd-badge--solid    { background: var(--navy-800);  color: #fff; }

/* ---------------- Tag (removable) ---------------- */
.vd-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--text-body); background: var(--white);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.vd-tag__close { cursor: pointer; color: var(--text-subtle); display: inline-flex; line-height: 0; }
.vd-tag__close:hover { color: var(--text-body); }

/* ---------------- Stat ---------------- */
.vd-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.vd-stat__eyebrow { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); }
.vd-stat__value { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-h1); color: var(--text-strong); letter-spacing: var(--tracking-tight); line-height: 1; font-variant-numeric: tabular-nums; }
.vd-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.vd-stat__delta--up { color: var(--positive); }
.vd-stat__delta--down { color: var(--critical); }

/* ---------------- Avatar ---------------- */
.vd-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--navy-700); color: #fff;
  font-family: var(--font-heading); font-weight: var(--weight-semibold);
  width: 40px; height: 40px; font-size: var(--text-sm); overflow: hidden; flex: none;
}
.vd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vd-avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.vd-avatar--lg { width: 56px; height: 56px; font-size: var(--text-h4); }

/* ---------------- Tabs ---------------- */
.vd-tabs { display: inline-flex; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle); }
.vd-tab {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-muted); background: none; border: none; cursor: pointer;
  padding: var(--space-3) var(--space-3); position: relative; transition: color var(--duration-fast);
}
.vd-tab:hover { color: var(--text-body); }
.vd-tab--active { color: var(--text-strong); font-weight: var(--weight-semibold); }
.vd-tab--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--action); border-radius: 2px 2px 0 0; }

/* Visionary Design — marketing site layout (kit-specific).
   Foundational tokens come from styles.css; this file only adds
   page composition on top of the design-system primitives. */

.vd-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.vd-section { padding: var(--space-24) 0; }
.vd-hide-sm { display: inline; }

/* ---- Header ---- */
.vd-site-header { position: sticky; top: 0; z-index: 20; background: rgba(250,250,249,0.85); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border-subtle); }
.vd-header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.vd-logo { height: 26px; width: auto; } .vd-logo svg { height: 26px; width: auto; display: block; }
.vd-nav { display: flex; gap: var(--space-6); }
.vd-nav-link { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); }
.vd-nav-link:hover { color: var(--text-strong); text-decoration: none; }
.vd-header-cta { display: flex; align-items: center; gap: var(--space-4); }

/* ---- Hero (full-bleed navy with conceptual backdrop) ---- */
.vd-hero { position: relative; background: var(--navy-900); overflow: hidden; padding-top: var(--space-32); padding-bottom: var(--space-32); }
.vd-hero-inner { position: relative; z-index: 2; }
.vd-hero-copy { max-width: 38rem; }
.vd-hero-copy .vd-eyebrow { display: block; margin-bottom: var(--space-4); }
.vd-eyebrow--onDark { color: #7FA9FB; }
.vd-hero-title { font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.03em; color: #fff; margin: 0 0 var(--space-5); max-width: 16ch; }
.vd-hero .vd-lead { font-size: var(--text-lg); line-height: 1.55; color: var(--text-on-dark); max-width: 48ch; margin: 0 0 var(--space-8); }
.vd-hero-actions { display: flex; gap: var(--space-3); margin-bottom: var(--space-8); flex-wrap: wrap; }
.vd-trustline { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); flex-wrap: wrap; }
.vd-trustline strong { color: var(--text-body); }
.vd-trustline--onDark { color: var(--slate-400); }
.vd-trustline--onDark strong { color: var(--text-on-dark); }
.vd-dot { color: var(--slate-600); }

/* On-dark secondary button */
.vd-hero .vd-btn--onDark { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.22); box-shadow: none; }
.vd-hero .vd-btn--onDark:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); }

/* Conceptual backdrop */
.vd-hero-visual { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vd-hv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vd-hv-in path  { fill: none; stroke: rgba(148,163,184,0.30); stroke-width: 1.4; }
.vd-hv-out path { fill: none; stroke: #60A5FA; stroke-width: 2.5; stroke-opacity: 0.95; stroke-linecap: round; }
/* Left-to-right scrim keeps the copy legible over the lines */
.vd-hero-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, var(--navy-900) 0%, rgba(11,17,32,0.92) 30%, rgba(11,17,32,0.55) 55%, rgba(11,17,32,0.15) 78%, rgba(11,17,32,0) 100%); }

@media (prefers-reduced-motion: no-preference) {
  .vd-hv-in path, .vd-hv-out path {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: vd-hv-draw 1.15s var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 0.06s);
  }
  .vd-hv-out path { animation-delay: calc(0.7s + var(--i, 0) * 0.07s); }
  .vd-hv-node { opacity: 0; animation: vd-hv-fade 0.6s var(--ease-out) 0.6s forwards; }
}
@keyframes vd-hv-draw { to { stroke-dashoffset: 0; } }
@keyframes vd-hv-fade { to { opacity: 1; } }

/* ---- Outcomes band ---- */
.vd-band { background: var(--navy-800); color: var(--text-on-dark); padding: var(--space-20) 0; }
.vd-band-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--slate-400); margin: 0 0 var(--space-8); }
.vd-outcomes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-12); }
.vd-outcome { display: flex; gap: var(--space-4); }
.vd-outcome-check { flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); background: rgba(37,99,235,0.18); color: #93B4FB; display: inline-flex; align-items: center; justify-content: center; }
.vd-outcome-title { font-size: var(--text-h4); color: #fff; margin: 0 0 var(--space-2); }
.vd-outcome-desc { font-size: var(--text-base); color: var(--text-on-dark-muted); margin: 0; line-height: 1.55; max-width: 42ch; }

/* ---- Section heads ---- */
.vd-section--alt { background: var(--slate-50); }
.vd-section-head { max-width: 60ch; margin-bottom: var(--space-12); }
.vd-section-head .vd-eyebrow { display: block; margin-bottom: var(--space-3); }
.vd-section-title { font-size: var(--text-h1); letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 var(--space-4); }
.vd-section-intro { font-size: var(--text-lg); color: var(--text-body); margin: 0; line-height: 1.55; }

/* ---- Services ---- */
.vd-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.vd-service { display: flex; flex-direction: column; }
.vd-service-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--blue-50); color: var(--blue-600); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); }
.vd-service-kicker { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--action); margin-bottom: var(--space-2); }
.vd-service-title { font-size: var(--text-h4); color: var(--text-strong); margin: 0 0 var(--space-3); }
.vd-service-desc { font-size: var(--text-base); color: var(--text-body); margin: 0; line-height: 1.6; }

/* ---- Case studies ---- */
.vd-case-tabs { margin-bottom: var(--space-6); }
.vd-case-card { overflow: hidden; }
.vd-case-grid { display: grid; grid-template-columns: 1.4fr 1fr; }
.vd-case-quote { padding: var(--space-10); }
.vd-quote { font-family: var(--font-heading); font-size: var(--text-h3); line-height: 1.4; letter-spacing: -0.01em; color: var(--text-strong); margin: 0 0 var(--space-8); font-weight: 500; }
.vd-case-person { display: flex; align-items: center; gap: var(--space-3); }
.vd-person-name { font-weight: 600; color: var(--text-strong); font-size: var(--text-sm); }
.vd-person-role { font-size: var(--text-sm); color: var(--text-muted); }
.vd-case-stats { background: var(--navy-800); padding: var(--space-8) var(--space-10); display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); }
.vd-case-stat-val { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-h1); color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.vd-case-stat-lab { font-size: var(--text-sm); color: var(--text-on-dark-muted); margin-top: var(--space-1); }

/* ---- CTA / contact ---- */
.vd-cta { background: var(--navy-900); color: var(--text-on-dark); }
.vd-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.vd-cta-title { font-size: var(--text-h1); letter-spacing: -0.02em; color: #fff; margin: 0 0 var(--space-4); max-width: 16ch; }
.vd-cta-lead { font-size: var(--text-lg); color: var(--text-on-dark-muted); margin: 0 0 var(--space-8); line-height: 1.55; max-width: 44ch; }
.vd-cta-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.vd-cta-list li { display: flex; align-items: center; gap: var(--space-3); color: var(--text-on-dark); font-size: var(--text-base); }
.vd-cta-list li svg { color: var(--emerald-500); flex: none; }
.vd-cta-card { box-shadow: var(--shadow-xl); }
.vd-form { display: flex; flex-direction: column; gap: var(--space-4); }
.vd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.vd-sent { text-align: center; padding: var(--space-8) var(--space-4); }
.vd-sent-check { width: 48px; height: 48px; border-radius: 50%; background: var(--emerald-50); color: var(--emerald-600); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.vd-sent-check svg { width: 26px; height: 26px; }
.vd-sent-title { margin: 0 0 var(--space-2); color: var(--text-strong); }
.vd-sent-sub { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

/* ---- Footer ---- */
.vd-footer { background: var(--navy-900); color: var(--text-on-dark-muted); padding: var(--space-16) 0 var(--space-8); border-top: 1px solid var(--border-inverse); }
.vd-footer-inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid var(--border-inverse); }
.vd-footer-brand p { font-size: var(--text-sm); margin: var(--space-4) 0 0; max-width: 36ch; line-height: 1.55; }
.vd-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.vd-footer-cols .vd-footer-h { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--slate-400); margin-bottom: var(--space-3); }
.vd-footer-cols a { display: block; font-size: var(--text-sm); color: var(--text-on-dark-muted); margin-bottom: var(--space-2); }
.vd-footer-cols a:hover { color: #fff; text-decoration: none; }
.vd-footer-base { display: flex; justify-content: space-between; padding-top: var(--space-6); font-size: var(--text-sm); color: var(--slate-500); }

@media (max-width: 920px) {
  .vd-cta-grid, .vd-case-grid, .vd-footer-inner { grid-template-columns: 1fr; }
  .vd-outcomes-grid, .vd-services-grid, .vd-form-row { grid-template-columns: 1fr; }
  .vd-footer-cols { grid-template-columns: repeat(2, 1fr); }
  .vd-footer-cols > div:nth-child(3) { order: 4; }
  .vd-footer-cols > div:nth-child(4) { order: 3; }
  .vd-nav, .vd-hide-sm { display: none; }
  .vd-hero { padding-top: var(--space-20); padding-bottom: var(--space-20); }
  .vd-hero-title { font-size: var(--text-h1); }
  .vd-hero-scrim { background: linear-gradient(180deg, rgba(11,17,32,0.7) 0%, rgba(11,17,32,0.88) 100%); }
}

/* Visionary Design — interior page layouts.
   Builds on styles.css tokens, site.css chrome, and the
   design-system primitives. Page composition only. */

/* ---- Subpage hero (compact navy band) ---- */
.vd-subhero { position: relative; background: var(--navy-900); color: var(--text-on-dark); padding: var(--space-20) 0 var(--space-16); overflow: hidden; }
.vd-subhero::after { content: ""; position: absolute; top: -30%; right: -8%; width: 46rem; height: 46rem; background: radial-gradient(circle, rgba(37,99,235,0.16) 0%, rgba(37,99,235,0) 62%); pointer-events: none; }
.vd-subhero-inner { position: relative; z-index: 2; max-width: 56rem; }
.vd-subhero .vd-eyebrow { display: block; color: #7FA9FB; margin-bottom: var(--space-4); }
.vd-subhero-title { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin: 0 0 var(--space-5); max-width: 18ch; }
.vd-subhero-lead { font-size: var(--text-lg); line-height: 1.55; color: var(--text-on-dark-muted); margin: 0; max-width: 54ch; }

/* ---- Breadcrumb ---- */
.vd-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--slate-400); margin-bottom: var(--space-6); }
.vd-breadcrumb a { color: var(--slate-400); }
.vd-breadcrumb a:hover { color: #fff; text-decoration: none; }
.vd-breadcrumb .vd-crumb-sep { color: var(--slate-600); }
.vd-breadcrumb .vd-crumb-current { color: var(--text-on-dark); }

/* ---- Long-form prose ---- */
.vd-prose { max-width: var(--container-prose); }
.vd-prose > p { font-size: var(--text-lg); line-height: 1.65; color: var(--text-body); margin: 0 0 var(--space-5); }
.vd-prose > p:last-child { margin-bottom: 0; }
.vd-prose strong { color: var(--text-strong); font-weight: 600; }
.vd-prose .vd-lede { font-size: var(--text-h4); line-height: 1.5; font-weight: 500; color: var(--text-strong); margin-bottom: var(--space-6); }

/* ---- Split: problem / what changes ---- */
.vd-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.vd-split-col h3 { font-size: var(--text-h3); letter-spacing: -0.01em; color: var(--text-strong); margin: 0 0 var(--space-4); }
.vd-split-col p { font-size: var(--text-base); line-height: 1.65; color: var(--text-body); margin: 0 0 var(--space-3); max-width: 46ch; }
.vd-split-col p:last-child { margin-bottom: 0; }
.vd-split-col--accent h3 { color: var(--action); }

/* ---- Numbered steps / process ---- */
.vd-steps { display: flex; flex-direction: column; gap: var(--space-8); border-left: 2px solid var(--border-subtle); padding-left: 0; }
.vd-step { position: relative; padding-left: var(--space-10); }
.vd-step-num { position: absolute; left: -15px; top: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--action); color: #fff; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--surface-page); }
.vd-step h3 { font-size: var(--text-h4); color: var(--text-strong); margin: 0 0 var(--space-2); }
.vd-step p { font-size: var(--text-base); line-height: 1.6; color: var(--text-body); margin: 0; max-width: 58ch; }
.vd-step--alt .vd-step-num { box-shadow: 0 0 0 4px var(--surface-sunken); }

/* ---- Principles grid (cards) ---- */
.vd-principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.vd-principle-n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--action); margin-bottom: var(--space-3); }
.vd-principle-title { font-size: var(--text-h4); color: var(--text-strong); margin: 0 0 var(--space-2); }
.vd-principle-desc { font-size: var(--text-base); line-height: 1.6; color: var(--text-body); margin: 0; }

/* ---- Stat row ---- */
.vd-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

/* ---- Topic / engagement bullet list ---- */
.vd-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.vd-checklist li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-base); color: var(--text-body); line-height: 1.55; }
.vd-checklist li svg { flex: none; color: var(--emerald-600); margin-top: 2px; }
.vd-checklist li strong { color: var(--text-strong); font-weight: 600; }

/* ---- Deliverables / definition list ---- */
.vd-defs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-12); }
.vd-def dt { font-size: var(--text-base); font-weight: 600; color: var(--text-strong); margin-bottom: var(--space-1); }
.vd-def dd { font-size: var(--text-sm); line-height: 1.6; color: var(--text-body); margin: 0; }

/* ---- Related topics ---- */
.vd-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.vd-related-card { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; }
.vd-related-card:hover { text-decoration: none; }
.vd-related-kicker { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--action); }
.vd-related-title { font-size: var(--text-h4); color: var(--text-strong); margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.vd-related-title svg { width: 18px; height: 18px; color: var(--text-subtle); transition: transform var(--duration-base) var(--ease-out), color var(--duration-base); }
.vd-related-card:hover .vd-related-title svg { transform: translateX(4px); color: var(--action); }
.vd-related-desc { font-size: var(--text-sm); line-height: 1.55; color: var(--text-body); margin: 0; }

/* ---- Case list ---- */
.vd-cases-list { display: flex; flex-direction: column; gap: var(--space-8); }
.vd-case-row { display: grid; grid-template-columns: 1.4fr 1fr; }
.vd-case-row .vd-case-quote { padding: var(--space-10); }
.vd-case-tag { margin-bottom: var(--space-5); }

/* ---- Portrait / image placeholder ---- */
.vd-ph { position: relative; border-radius: var(--radius-lg); background-color: var(--slate-100); background-image: repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(15,23,42,0.045) 9px, rgba(15,23,42,0.045) 10px); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; min-height: 320px; }
.vd-ph span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--text-subtle); }

/* ---- About: lede + portrait split ---- */
.vd-about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-12); align-items: start; }
.vd-portrait { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); }
.vd-portrait img { display: block; width: 100%; height: auto; }

/* ---- Mid-page CTA band ---- */
.vd-cta-band { background: var(--navy-900); color: var(--text-on-dark); }
.vd-cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); flex-wrap: wrap; }
.vd-cta-band-copy { max-width: 34ch; }
.vd-cta-band h2 { font-size: var(--text-h2); letter-spacing: -0.02em; color: #fff; margin: 0; }
.vd-cta-band p { font-size: var(--text-base); color: var(--text-on-dark-muted); margin: var(--space-3) 0 0; line-height: 1.55; }

/* ---- Section variants reused on interior pages ---- */
.vd-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Book a call: benefits + form split ---- */
.vd-book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.vd-book-form { position: sticky; top: var(--space-20); }
.vd-form-note { font-size: var(--text-sm); color: var(--text-muted); text-align: center; margin: var(--space-1) 0 0; }
.vd-form-note a { color: var(--action); }

@media (max-width: 920px) {
  .vd-split, .vd-about-grid, .vd-defs { grid-template-columns: 1fr; gap: var(--space-8); }
  .vd-principles, .vd-stat-row, .vd-related-grid { grid-template-columns: 1fr; }
  .vd-case-row { grid-template-columns: 1fr; }
  .vd-subhero { padding-top: var(--space-16); }
  .vd-cta-band-inner { flex-direction: column; align-items: flex-start; }
  .vd-book-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .vd-book-form { position: static; }
}


/* ---- Dropdown nav ---- */
.vd-nav { display: flex; gap: var(--space-1); align-items: center; }
.vd-nav-item { position: relative; }
.vd-nav-link {
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-body); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); display: flex; align-items: center;
  gap: 4px; cursor: pointer; background: none; border: none;
  font-family: var(--font-body); white-space: nowrap;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.vd-nav-link:hover { color: var(--text-strong); background: var(--surface-hover); text-decoration: none; }
.vd-nav-link svg { transition: transform var(--duration-base) var(--ease-out); flex: none; }
.vd-nav-item:hover .vd-nav-link svg,
.vd-nav-item:focus-within .vd-nav-link svg { transform: rotate(180deg); }
.vd-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-2); min-width: 200px; z-index: 100;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility var(--duration-base);
}
.vd-nav-item:hover .vd-dropdown,
.vd-nav-item:focus-within .vd-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.vd-dropdown a {
  display: block; font-size: var(--text-sm); color: var(--text-body);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.vd-dropdown a:hover { background: var(--surface-hover); color: var(--text-strong); text-decoration: none; }
.vd-dropdown-divider { height: 1px; background: var(--border-subtle); margin: var(--space-2) 0; }

/* ---- Logos / trusted-by band ---- */
.vd-logos { padding: var(--space-20) 0; background: #fff; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.vd-logos-body { font-size: var(--text-sm); color: var(--text-body); text-align: center; margin: var(--space-4) 0 var(--space-4); line-height: 1.6; }
.vd-logos-industries { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-6); list-style: none; padding: 0; margin: 0 0 var(--space-20); }
.vd-logos-industries li { font-size: var(--text-sm); color: var(--text-body); display: flex; align-items: center; gap: var(--space-2); }
.vd-logos-industries li::before { content: '✓'; color: var(--emerald-500); font-size: var(--text-xs); }
.vd-logos-industries li + li { margin-left: var(--space-2); }
.vd-logos-row { display: flex; align-items: center; justify-content: center; gap: var(--space-16); flex-wrap: wrap; }
.vd-logo-img { max-height: 44px; max-width: 180px; width: auto; height: auto; object-fit: contain; opacity: 0.72; display: block; transition: opacity var(--duration-fast); }
.vd-logo-img:hover { opacity: 1; }
.vd-logo-img--sm { max-height: 32px; }
.vd-logo-img--lg { max-height: 56px; max-width: 220px; }
.vd-logos-sub { font-size: var(--text-xs); color: var(--text-subtle); text-align: center; font-style: italic; margin: var(--space-8) 0 0; line-height: 1.5; }

/* ---- Mobile nav ---- */
.vd-mobile-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text-body); padding: var(--space-2); border-radius: var(--radius-sm); transition: background var(--duration-fast); }
.vd-mobile-toggle:hover { background: var(--surface-hover); }
.vd-mobile-menu { display: none; position: fixed; inset: 0; z-index: 200; background: var(--surface-page); flex-direction: column; overflow-y: auto; }
.vd-mobile-menu.vd-mobile-menu--open { display: flex; }
.vd-mobile-menu-header { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 var(--space-6); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.vd-mobile-menu-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.vd-mobile-section-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); padding: var(--space-3) var(--space-3) var(--space-2); }
.vd-mobile-link { display: block; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-body); padding: var(--space-3); border-radius: var(--radius-sm); transition: background var(--duration-fast), color var(--duration-fast); }
.vd-mobile-link:hover { background: var(--surface-hover); color: var(--text-strong); text-decoration: none; }
.vd-mobile-divider { height: 1px; background: var(--border-subtle); margin: var(--space-3) 0; }
.vd-mobile-cta { padding: var(--space-6); flex-shrink: 0; border-top: 1px solid var(--border-subtle); }
.vd-mobile-cta a { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; background: var(--action); color: #fff; font-size: var(--text-base); font-weight: var(--weight-semibold); border-radius: var(--radius-md); text-decoration: none; transition: background var(--duration-fast); }
.vd-mobile-cta a:hover { background: var(--action-hover); text-decoration: none; }
@media (max-width: 920px) {
  .vd-mobile-toggle { display: flex; align-items: center; justify-content: center; }
  .vd-header-cta { display: none; }
  .vd-nav { display: none !important; }
}

/* ---- 404 page ---- */
.vd-404 { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-24) var(--space-6); }
.vd-404-code { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--action); margin-bottom: var(--space-4); }
.vd-404-title { font-size: var(--text-h1); letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 var(--space-4); }
.vd-404-desc { font-size: var(--text-lg); color: var(--text-body); margin: 0 0 var(--space-8); max-width: 44ch; line-height: 1.55; }
.vd-404-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }