/* ============================================================
   VENNEXIS — MAIN STYLESHEET
   Aerospace precision aesthetic. Every element earns its place.
   Author: VenNexis / Agency Design Engine
   ============================================================ */

/* ─── CUSTOM PROPERTIES ─────────────────────────────────── */
:root {
  /* ============================================================
     VenNexis Design System v3 — SIGNAL (default theme)
     From Hero Banner/design-system/palette-alternatives.html, row 1,
     marked "Your proposal · exact logo mapping".
       Focus #2563EB · Mesh #00C2FF · Lines #7C3AED · BG #0F172A · Text #F8FAFC
     ONE THEME. Ink (Alt 05) removed 9 Aug 2026 — present in CSS but no visitor
     could reach it: every page ships data-theme="dark" and the toggle only
     switches dark/light. Archived at Website/_archive/v1.4.1-*.
     Orange is an ACCENT ONLY — highlight, hover, selection. Never a surface,
     never body text, never the default CTA. (Priority 3, 4 Aug 2026.)
     Every pairing verified >= WCAG AA; see 02-System/Design-System-v3.md.
     ============================================================ */

  /* Surfaces */
  --anthracite: #0F172A;
  --anthracite-90: rgba(15,23,42,0.9);
  --anthracite-80: rgba(15,23,42,0.8);
  --anthracite-60: rgba(15,23,42,0.6);
  --anthracite-20: rgba(15,23,42,0.12);

  /* Text — all >= AA on every surface */
  --aerospace-white: #F8FAFC;
  --aerospace-white-90: rgba(248,250,252,0.9);

  /* ACTION — the logo blue. FILL ONLY: 3.45:1 on base, so it can never be
     text or a small icon. White on it is 5.17:1. Cyan carries link text. */
  --action:    #2563EB;
  --action-lt: #3B82F6;
  --on-action: #FFFFFF;

  /* STRUCTURE — cyan. Eyebrows, links, focus ring, mesh rest state. */
  --cyan: #00C2FF;
  --cyan-dim: #38BDF8;

  /* ACCENT — copper. Highlight, hover, selection. Nothing else. */
  --accent: #E89B3C;
  --accent-lt: #F0B369;

  /* Decorative only — 2.49:1 on raised, fails even non-text. Glow/gradient. */
  --violet: #7C3AED;

  --deep-blue: #64789B;
  --deep-blue-light: #8193AC;

  /* Neutrals */
  --neutral-950: #0B1120;
  --neutral-900: #0F172A;
  --neutral-800: #16213B;
  --neutral-700: #1E2A47;
  --neutral-600: #2C3B55;
  --neutral-400: #8193AC;
  --neutral-300: #94A3B8;
  --neutral-200: #CBD5E1;
  --neutral-100: #E2E8F0;
  --neutral-50:  #F1F5F9;

  --success: #34D399;
  --warn:    #FBBF24;
  --danger:  #F87171;

  /* Typography */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --space-1: 0.5rem;   --space-2: 1rem;    --space-3: 1.5rem;
  --space-4: 2rem;     --space-5: 2.5rem;  --space-6: 3rem;
  --space-8: 4rem;     --space-10: 5rem;   --space-12: 6rem;
  --space-16: 8rem;    --space-20: 10rem;

  --max-width: 1280px;
  --nav-height: 80px;
  --radius-sm: 6px;  --radius-md: 9px;  --radius-lg: 14px;
  --radius-xl: 20px; --radius-full: 999px;
  --target-min: 44px;

  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 180ms var(--ease-out-expo);
  --transition-base: 320ms var(--ease-out-expo);
  --transition-slow: 600ms var(--ease-out-expo);

  --shadow-card: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 4px 20px rgba(0,0,0,0.45);
  --shadow-modal: 0 12px 48px rgba(0,0,0,0.55);
  --glow-accent: 0 2px 20px rgba(232,155,60,0.30);
  --glow-cyan:   0 2px 20px rgba(0,194,255,0.28);

  /* Semantic mode defaults */
  --bg-primary: var(--anthracite);
  --bg-secondary: var(--neutral-800);
  --bg-tertiary: var(--neutral-700);
  --text-primary: var(--aerospace-white);
  --text-secondary: var(--neutral-200);
  --text-muted: #94A3B8;
  --heading-color: var(--aerospace-white);
  --border-color: rgba(248,250,252,0.10);
  --border-strong: rgba(248,250,252,0.28);
  --card-bg: var(--neutral-800);
  --card-border: rgba(248,250,252,0.09);
  --input-bg: var(--neutral-700);
  --input-border: var(--deep-blue);
  --input-focus: var(--cyan);
  --nav-bg: rgba(15,23,42,0.95);
  --link-accent: var(--cyan);
}

/* ============================================================
   INK — palette-alternatives.html Alt 05.
   "Restrained and editorial. Colour carries no meaning, so type must."
   Action colour is light, so text on it must be dark (--on-action).
   ============================================================ */

/* ─── LIGHT MODE (warm bone) ─────────────────────────────── */
[data-theme="light"] {
  --bg-primary: #FAF7F2;
  --bg-secondary: #F1ECE3;
  --bg-tertiary: #E7E1D8;
  --text-primary: #1A2027;
  --text-secondary: #47515E;
  --text-muted: #5C6672;
  --heading-color: #14202E;
  --border-color: rgba(26,32,39,0.12);
  --border-strong: rgba(26,32,39,0.22);
  --card-bg: #FFFFFF;
  --card-border: rgba(26,32,39,0.08);
  --input-bg: #FFFFFF;
  --input-border: rgba(26,32,39,0.20);
  --input-focus: var(--action);
  --nav-bg: rgba(250,247,242,0.90);
  --link-accent: #0B6E8F;         /* cyan darkened for AA on light */
  --action: #A8631A;         /* copper darkened for AA on light */
  --input-border: #5D6E8D;
}

/* ─── RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
  cursor: none;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: none; border: none; background: none; }
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; }

::selection {
  background-color: var(--action);
  color: var(--anthracite);
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.display-md {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.50;
  letter-spacing: -0.025em;
}

.display-sm {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.heading-lg {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.3;
}

.body-lg {
  font-size: 1.125rem;
  line-height: 1.65;
}

.body-md {
  font-size: 1rem;
  line-height: 1.6;
}

.body-sm {
  font-size: 0.875rem;
  line-height: 1.55;
}

.caption {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action);
}

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* ─── LAYOUT ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: var(--space-20);
}

.section--sm {
  padding-block: var(--space-12);
}

.section--dark {
  background-color: var(--anthracite);
  color: var(--aerospace-white);
}

.section--gray {
  background-color: var(--bg-secondary);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }

/* ─── CUSTOM CURSOR ──────────────────────────────────────── */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: difference;
}

.cursor__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--aerospace-white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s;
}

.cursor__ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--aerospace-white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease-out-expo),
              height 0.4s var(--ease-out-expo),
              border-color 0.2s;
}

body.cursor--hover .cursor__ring {
  width: 64px;
  height: 64px;
  border-color: var(--action);
}

body.cursor--hover .cursor__dot {
  width: 4px;
  height: 4px;
}

body.cursor--click .cursor__dot {
  width: 12px;
  height: 12px;
}

/* ─── NAVIGATION ─────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: var(--nav-bg);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.nav.nav--scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav__logo svg,
.nav__logo img {
  height: 40px;
  width: auto;
  transition: filter 0.3s ease;
}

/* Logo on dark backgrounds = white */
.nav__logo .logo-svg { filter: brightness(0) invert(1); }

/* Logo on light theme = original colors */
[data-theme="light"] .nav__logo .logo-svg { filter: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--action);
  transition: width var(--transition-base);
}

.nav__link:hover { color: var(--text-primary); }
.nav__link:hover::after { width: 100%; }

/* Mega menu */
.nav__item {
  position: relative;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Theme Toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.theme-toggle:hover {
  background-color: var(--border-color);
  color: var(--text-primary);
}

.theme-toggle__icon { width: 18px; height: 18px; pointer-events: none; }
.theme-toggle__moon { display: none; }
[data-theme="light"] .theme-toggle__sun { display: none; }
[data-theme="light"] .theme-toggle__moon { display: block; }

/* Mobile hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  z-index: 1100;
}

.nav__hamburger span {
  display: block;
  height: 1.5px;
  background-color: var(--text-primary);
  border-radius: 1px;
  transition: transform 0.3s var(--ease-out-expo), opacity 0.3s ease, width 0.3s ease;
  transform-origin: left center;
}

.nav__hamburger span:nth-child(1) { width: 100%; }
.nav__hamburger span:nth-child(2) { width: 70%; }
.nav__hamburger span:nth-child(3) { width: 85%; }

.nav__hamburger.is-active span:nth-child(1) {
  transform: rotate(40deg);
}
.nav__hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-8px);
}
.nav__hamburger.is-active span:nth-child(3) {
  transform: rotate(-40deg);
  width: 100%;
}

/* Mobile Menu Panel */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: var(--anthracite);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-height) + var(--space-6)) var(--space-6) var(--space-8);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-out-expo);
  overflow-y: auto;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 700;
  color: var(--aerospace-white);
  padding-block: var(--space-2);
  border-bottom: 1px solid rgba(248,250,252,0.08);
  opacity: 0;
  transform: translateX(40px);
  transition: color var(--transition-fast);
}

.mobile-menu__link:hover { color: var(--action); }

.mobile-menu.is-open .mobile-menu__link {
  opacity: 1;
  transform: translateX(0);
}

.mobile-menu__cta {
  margin-top: var(--space-6);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
}

.mobile-menu.is-open .mobile-menu__cta {
  opacity: 1;
  transform: translateY(0);
}

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.btn:hover::after { opacity: 1; }

.btn--primary {
  background-color: var(--action);
  color: var(--anthracite);
  box-shadow: 0 2px 12px rgba(232,155,60,0.35);
}

.btn--primary:hover {
  background-color: var(--action-lt);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(232,155,60,0.45);
}

.btn--secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}

.btn--secondary:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.btn--ghost {
  background-color: transparent;
  color: var(--text-secondary);
  padding-inline: var(--space-2);
}

.btn--ghost:hover { color: var(--text-primary); }

.btn--lg {
  padding: 18px 36px;
  font-size: 1rem;
}

.btn--sm {
  padding: 10px 20px;
  font-size: 0.8125rem;
}

.btn-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  position: relative;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}

.hero__title {
  font-family: var(--font-display);
  /* Sized for the ~50%-width column in the two-column hero split (not full
     viewport width) so the longest rotating line ("businesses that scale.")
     fits without bleeding into .hero__visual. See .hero__rotating-lines /
     initHeroLineFit() in main.js for the per-line auto-fit safety net. */
  font-size: clamp(2.5rem, 4.4vw, 4.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--aerospace-white);
  margin-bottom: var(--space-6);
}

.hero__title .accent-line {
  position: relative;
  display: inline-block;
}

.hero__title .accent-line::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 0;
  height: 4px;
  background-color: var(--action);
  border-radius: 2px;
}

.hero__title .accent-line.animated::after {
  animation: sweep-underline 0.8s var(--ease-out-expo) forwards;
}

@keyframes sweep-underline {
  from { width: 0; }
  to { width: 100%; }
}

.hero__visual {
  position: relative;
}

/* ─── SECTION HEADERS ─────────────────────────────────────── */
.section-header {
  margin-bottom: var(--space-12);
}

.section-header--center { text-align: center; }

.section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: var(--space-2);
}

/* ─── CARDS ──────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--action), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-strong);
}

.card:hover::before { opacity: 1; }

.card--dark {
  background-color: var(--neutral-800);
  border-color: rgba(248,250,252,0.06);
}

.card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.card:hover .card__icon {
  color: var(--action);
  border-color: var(--action);
}

.card__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.card__body {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--link-accent);
  margin-top: var(--space-3);
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.card__link svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.card__link:hover { color: var(--action); gap: 10px; }
.card__link:hover svg { transform: translateX(2px); }

/* ─── SERVICE GRID ───────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--border-color);
}

.services-grid .card {
  border: none;
  border-radius: 0;
  background-color: var(--card-bg);
}

/* ─── PROOF STRIP ────────────────────────────────────────── */
.proof-strip {
  padding-block: var(--space-8);
  border-block: 1px solid var(--border-color);
}

.proof-strip__label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  text-align: center;
}

.proof-strip__track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.proof-strip__logos {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: max-content;
  gap: var(--space-8);
  animation: proof-marquee 40s linear infinite;
}

.proof-strip__track:hover .proof-strip__logos {
  animation-play-state: paused;
}

@keyframes proof-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .proof-strip__logos { animation: none; }
}

.proof-strip__name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.proof-strip__name:hover { color: var(--text-primary); }

/* ─── METRICS ────────────────────────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}

.metric {
  text-align: center;
  padding: var(--space-6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--card-bg);
}

.metric__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-1);
}

.metric__label {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ─── PROCESS STEPS ──────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  position: relative;
}

.steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.step {
  position: relative;
  text-align: center;
}

.step__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background-color: var(--bg-primary);
  margin: 0 auto var(--space-3);
  position: relative;
  z-index: 1;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.step:hover .step__num {
  background-color: var(--action);
  border-color: var(--action);
  color: white;
}

.step__title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}

.step__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ─── FAQ ACCORDION ──────────────────────────────────────── */
.faq {
  border-top: 1px solid var(--border-color);
}

.faq__item {
  border-bottom: 1px solid var(--border-color);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: none;
  transition: color var(--transition-fast);
  text-align: left;
  width: 100%;
}

.faq__question:hover { color: var(--link-accent); }

.faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-out-expo), background-color 0.3s ease, border-color 0.3s ease;
}

.faq__icon svg {
  width: 12px;
  height: 12px;
  stroke: var(--text-muted);
  transition: stroke 0.2s ease;
}

.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
  background-color: var(--action);
  border-color: var(--action);
}

.faq__item.is-open .faq__icon svg { stroke: white; }

.faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease-out-expo);
}

.faq__answer-inner {
  padding-bottom: var(--space-4);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ─── FORMS ──────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 14px 18px;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-family: var(--font-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(93,110,141,0.15);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

/* Custom Select */
.form-select-wrapper {
  position: relative;
}

.form-select-wrapper::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-color: var(--text-muted);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
  transition: background-color 0.2s;
}

.form-select-wrapper:hover::after { background-color: var(--text-primary); }

.form-select option {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* ─── CONTACT FORM SPECIFIC ──────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ─── MODAL ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background-color: rgba(7,12,22,0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  width: 100%;
  max-width: 580px;
  max-height: 90svh;
  overflow-y: auto;
  transform: translateY(30px) scale(0.98);
  transition: transform 0.35s var(--ease-out-expo);
  box-shadow: var(--shadow-modal);
  position: relative;
}

.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.modal__close:hover {
  background-color: var(--border-color);
  color: var(--text-primary);
}

.modal__header {
  margin-bottom: var(--space-6);
}

.modal__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}

.modal__sub {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ─── PRICING CALCULATOR ─────────────────────────────────── */
.calculator {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.calculator__body {
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.calculator__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.calc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.calc-chip {
  padding: 7px 14px;
  border: 1px solid var(--border-color);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  cursor: none;
}

.calc-chip:hover,
.calc-chip.is-active {
  background-color: var(--anthracite);
  border-color: var(--action);
  color: var(--aerospace-white);
}

[data-theme="light"] .calc-chip:hover,
[data-theme="light"] .calc-chip.is-active {
  background-color: var(--anthracite);
  color: var(--aerospace-white);
}

/* Range Slider */
.range-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-color);
  border-radius: 2px;
  outline: none;
  cursor: none;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--action);
  border: 2px solid var(--bg-primary);
  box-shadow: 0 2px 8px rgba(232,155,60,0.4);
  cursor: grab;
  transition: transform 0.15s ease;
}

.range-slider::-webkit-slider-thumb:active {
  transform: scale(1.3);
  cursor: grabbing;
}

.calc-result__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-1);
}

/* ─── MULTI-STEP FORM ─────────────────────────────────────── */
.multistep {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.multistep__progress {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-3);
}

.multistep__step-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.multistep__panel {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  animation: fadeInUp 0.4s var(--ease-out-expo);
}

.multistep__panel.is-active {
  display: flex;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── MAPS ───────────────────────────────────────────────── */
.map-container {
  height: 400px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.office-card {
  padding: var(--space-5);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--card-bg);
  transition: border-color var(--transition-base);
}

.office-card:hover { border-color: var(--border-strong); }

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer {
  background-color: var(--neutral-950);
  color: var(--aerospace-white);
  padding-top: var(--space-20);
  border-top: 1px solid rgba(248,250,252,0.06);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: 'VENNEXIS';
  position: absolute;
  bottom: -60px;
  right: -40px;
  font-family: var(--font-display);
  font-size: 200px;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: rgba(248,250,252,0.015);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.footer__logo {
  display: flex;
  align-items: center;
}

.footer__logo svg,
.footer__logo img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer__link {
  font-size: 0.9rem;
  color: var(--neutral-300);
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer__link:hover { color: var(--aerospace-white); }

.footer__office-country {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action);
}

.footer__office-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--neutral-300);
}

.footer__office-detail {
  font-size: 0.8125rem;
  color: var(--neutral-400);
}

/* ─── CHAT BUBBLE ─────────────────────────────────────────── */
.chat-bubble {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 8000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.chat-bubble__btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--action);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(232,155,60,0.45), 0 2px 8px rgba(0,0,0,0.2);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.chat-bubble__btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(232,155,60,0.55);
}

.chat-bubble__btn svg { width: 26px; height: 26px; pointer-events: none; }

.chat-bubble__tooltip {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  animation: popIn 0.3s var(--ease-out-expo);
  display: none;
}

.chat-bubble:hover .chat-bubble__tooltip { display: block; }

@keyframes popIn {
  from { opacity: 0; transform: scale(0.85) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── CTA BAND ───────────────────────────────────────────── */
.cta-band {
  padding-block: var(--space-16);
  background-color: var(--anthracite);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(93,110,141,0.12) 0%, transparent 65%);
}

.cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--aerospace-white);
  margin-bottom: var(--space-3);
  line-height: 1.15;
  position: relative;
}

.cta-band__sub {
  font-size: 1.0625rem;
  color: var(--neutral-300);
  max-width: 540px;
  margin: 0 auto var(--space-8);
  line-height: 1.65;
  position: relative;
}

.cta-band .btn-group { justify-content: center; position: relative; }

/* ─── QUICK ANSWER HERO (service pages) ──────────────────── */
.page-hero {
  padding-top: calc(var(--nav-height) + var(--space-16));
  padding-bottom: var(--space-12);
  background-color: var(--anthracite);
  border-bottom: 1px solid rgba(248,250,252,0.06);
  position: relative;
  overflow: hidden;
}

.page-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(248,250,252,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,250,252,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--aerospace-white);
  margin-bottom: var(--space-4);
}

/* ─── WORK / CASE STUDY ──────────────────────────────────── */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.case-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.case-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-strong);
}

.case-card__media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--neutral-800) 0%, var(--neutral-700) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.case-card__media-motif {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(93,110,141,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93,110,141,0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

.case-card__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background-color: rgba(7,12,22,0.8);
  border: 1px solid rgba(248,250,252,0.12);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-300);
}

.case-card__body {
  padding: var(--space-5);
}

.case-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.case-card__excerpt {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

/* ─── BADGES ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sr-only { @extend .visually-hidden; }
.relative { position: relative; }
.absolute { position: absolute; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* ─── ACCESSIBILITY ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--deep-blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cursor { display: none; }
  body { cursor: auto; }
  button { cursor: pointer; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero__split {
    grid-template-columns: 1fr;
    padding-top: var(--space-16);
  }

  .hero__visual { display: none; }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer__mid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps::before { display: none; }

  .landing-layout {
    grid-template-columns: 1fr;
  }

  .landing-content,
  .landing-form-panel {
    padding: var(--space-12) var(--space-6);
  }

  .landing-form-panel { border-left: none; border-top: 1px solid var(--border-color); }

  .calculator__body { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --nav-height: 64px; }

  .container { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-12); }
  .section--lg { padding-block: var(--space-12); }

  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .nav__cta-btn { display: none; }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .case-grid { grid-template-columns: 1fr; }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .form-row { grid-template-columns: 1fr; }

  .metrics-grid { grid-template-columns: 1fr; gap: var(--space-2); }

  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__mid { grid-template-columns: 1fr; }

  .offices-grid { grid-template-columns: 1fr; }

  .page-hero {
    padding-top: calc(var(--nav-height) + var(--space-10));
    padding-bottom: var(--space-8);
  }

  .steps { grid-template-columns: 1fr; }

  .proof-strip__logos { gap: var(--space-4); }

  .chat-bubble { bottom: 20px; right: 20px; }
}

@media (max-width: 480px) {
  .hero__title { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .btn-group { flex-direction: column; }
  .btn-group .btn { width: 100%; }
}

/* ─── LANDING SPLIT (book-a-call, start-with-an-audit) ──── */
.landing-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  padding: calc(var(--nav-height) + 3rem) 0 5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.landing-split__left {
  padding-top: 1rem;
}

.landing-split__right {}

/* ─── NAV MINIMAL (landing pages) ───────────────────────── */
.nav--minimal .nav__links {
  display: none;
}

/* ─── CONTACT FORM ───────────────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.form-input,
.form-select,
.form-textarea {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(232,155,60,0.12);
}

.form-select-wrapper {
  position: relative;
}

.form-select-wrapper::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  pointer-events: none;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* ─── CHECKLIST ──────────────────────────────────────────── */
.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.checklist__item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ─── OFFICE CARD ────────────────────────────────────────── */
.office-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ─── BREADCRUMB ─────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.breadcrumb a {
  color: inherit;
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--text-secondary);
}

.breadcrumb__sep {
  color: var(--border-strong);
}

/* ─── CHIP SELECTORS (multistep form deliverables) ────────── */
.chip-check {
  display: inline-flex;
  cursor: pointer;
}

.chip-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--border-color);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: transparent;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
  user-select: none;
}

.chip-check input:checked + .chip {
  border-color: var(--action);
  background-color: rgba(232,155,60,0.1);
  color: var(--action);
}

.chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ─── CALENDLY EMBED ─────────────────────────────────────── */
.calendly-embed {
  width: 100%;
}

/* ─── MAP CONTAINER ──────────────────────────────────────── */
.map-container {
  width: 100%;
  height: 420px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

/* ─── HERO PRICING NOTE ──────────────────────────────────── */
.hero__pricing {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--neutral-100, #E4E7EC);
  margin-top: var(--space-3);
  padding: 7px 16px;
  border: 1px solid rgba(232,155,60,0.45);
  background: rgba(232,155,60,0.08);
  border-radius: 50px;
}

.hero__pricing strong {
  color: var(--action);
}

/* ─── SECTION DARK / GRAY VARIANTS ───────────────────────── */
.section--dark {
  background-color: var(--anthracite);
}

.section--gray {
  background-color: var(--bg-secondary);
}

[data-theme="light"] .section--dark {
  background-color: var(--neutral-950);
}

[data-theme="light"] .section--dark * {
  color: var(--aerospace-white) !important;
}

[data-theme="light"] .section--gray {
  background-color: var(--neutral-50);
}

/* ─── BLOCK UTILITY ──────────────────────────────────────── */
.block { display: block; }
.flex-center { display: flex; align-items: center; justify-content: center; }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-bottom: 1px solid var(--border-color);
}

.faq__item:first-child {
  border-top: 1px solid var(--border-color);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  background: none;
  cursor: pointer;
  transition: color var(--transition-fast);
  gap: 1rem;
}

.faq__question:hover {
  color: var(--action);
}

.faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  transition: transform var(--transition-base), border-color var(--transition-fast);
}

.faq__icon svg {
  width: 10px;
  height: 10px;
  transition: transform var(--transition-base);
}

.faq__question[aria-expanded="true"] .faq__icon {
  border-color: var(--action);
  transform: rotate(45deg);
}

/* duplicate FAQ definition removed — max-height approach in primary block is correct */

/* ─── MULTISTEP FORM ─────────────────────────────────────── */
.multistep {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.multistep__progress {
  display: flex;
  gap: 8px;
  padding: var(--space-4) var(--space-6);
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.multistep__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--border-strong);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.multistep__dot--active {
  background-color: var(--action);
  transform: scale(1.3);
}

.multistep__dot--done {
  background-color: var(--deep-blue);
}

.multistep__panel {
  display: none;
  padding: var(--space-6);
  flex-direction: column;
  gap: var(--space-4);
}

.multistep__panel--active {
  display: flex;
}

.multistep__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.multistep__next,
.multistep__back {
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.multistep__next {
  background-color: var(--action);
  color: white;
  border: none;
}

.multistep__next:hover {
  background-color: var(--action-lt);
}

.multistep__back {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.multistep__back:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ─── CALCULATOR ─────────────────────────────────────────── */
.calculator {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.calculator__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.calculator__controls {
  padding: var(--space-6);
  border-right: 1px solid var(--border-color);
}

.calculator__result {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--bg-secondary);
}

.calculator__price {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--action);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.calc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-4);
}

.calc-chip {
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--border-color);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.calc-chip.active {
  border-color: var(--action);
  background-color: rgba(232,155,60,0.1);
  color: var(--action);
}

.calc-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ─── RESPONSIVE ADDITIONS ───────────────────────────────── */
@media (max-width: 1024px) {
  .landing-split {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .approach-step {
    grid-template-columns: 40px 1fr;
    gap: var(--space-3);
  }
}

@media (max-width: 768px) {
  .landing-split {
    padding-inline: var(--space-4);
    padding-top: calc(var(--nav-height) + 2rem);
  }

  .calculator__body {
    grid-template-columns: 1fr;
  }

  .calculator__controls {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .map-container {
    height: 280px;
  }

  .approach-step {
    grid-template-columns: 1fr;
  }

  .approach-step__num {
    font-size: 2rem;
  }
}

/* ─── BUG FIX ADDITIONS ──────────────────────────────────── */

/* C-05: heading-xl was used in HTML but never defined */
.heading-xl {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-family: var(--font-display);
}

/* H-04: Skip to content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 99999;
  padding: 0.75rem 1.25rem;
  background: var(--action);
  color: var(--aerospace-white);
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  transition: top 0.2s ease;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* H-06: Mobile menu close button */
.mobile-menu__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-primary);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.mobile-menu__close:hover {
  background: var(--action);
  color: var(--aerospace-white);
  transform: rotate(90deg);
}

/* H-08: Form error and success states */
.form-error {
  display: none;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--action);
  font-weight: 500;
}
.field--error {
  border-color: var(--action) !important;
  box-shadow: 0 0 0 3px rgba(232,155,60,0.15);
}
.form-success {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.25rem 1.5rem;
  background: rgba(93,110,141,0.08);
  border: 1px solid rgba(93,110,141,0.25);
  border-radius: var(--radius-md);
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.6;
}
.form-success svg { flex-shrink: 0; margin-top: 2px; }

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--action);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 1001;
}

/* ─── A11Y: VISIBLE KEYBOARD FOCUS ───────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.link-inline:focus-visible {
  outline: 2px solid var(--link-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── A11Y: RESTORE NATIVE CURSOR WHERE CUSTOM CURSOR IS UNSUITABLE ─── */
/* Custom cursor is a fine-pointer/motion enhancement only. On touch,
   coarse pointers, or reduced-motion, keep the OS cursor as a reliable fallback. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  html,
  body,
  a,
  button,
  input,
  textarea,
  select,
  [tabindex] {
    cursor: auto !important;
  }
  a,
  button,
  [role="button"],
  .btn,
  label {
    cursor: pointer !important;
  }
  input[type="text"],
  input[type="email"],
  textarea {
    cursor: text !important;
  }
  .cursor {
    display: none !important;
  }
}

/* ============================================================
   ICE & INK v2 — accessibility rules
   Added 2026-08-04 (rebuild v0.3.0). These encode audit findings
   A-18, A-24, A-25, A-26 and WCAG 2.1 AA / 2.2 SC 2.5.8.
   ============================================================ */

/* Focus is never removed. Cyan on the navy base = 9.47:1. (was #2563EB, 3.79:1 — failed) */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* WCAG 2.2 SC 2.5.8 — target size declared, not achieved by padding accident (A-26) */
.btn,
button:not(.multistep__dot):not(.theme-toggle),
[role="button"],
input[type="submit"] {
  min-height: var(--target-min);
}

/* WCAG 1.4.11 — control boundaries must be perceivable. --deep-blue = 3.39:1 (A-24) */
.form-input,
.form-select,
.form-textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
select, textarea {
  border-color: var(--deep-blue);
  font-size: 1rem;              /* 16px floor prevents iOS zoom-on-focus */
}

/* No text below 12px anywhere (A-24) */
.caption, .label, .body-xs, small { font-size: max(0.75rem, 1em); }

/* Motion respects the user everywhere — closes the animations.js gap (A-25) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mono voice for eyebrows and labels — Ice & Ink signature */
.section-label, .caption, .label, .mega-menu__col-label, .mega-menu__track-tag {
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── v0.3.1 · structural accent consistency ──
   Design-System-v2.md §2.3 assigns cyan to structure (eyebrows, labels, links)
   and copper to action (CTAs, active, selection). Section labels were rendering
   copper, which diluted copper's meaning and disagreed with the mesh hero, whose
   eyebrow is cyan. Align the site to the spec. */
.section-label,
.label,
[data-animate="section-label"]{color:var(--cyan)}
.label::before{background:var(--cyan)}
/* Copper stays the action colour */
.btn--primary{background:var(--action)}

/* Long hyphenated headings broke mid-word in Space Grotesk, which is wider than
   the retired Playfair. Balance the wrap instead of hard-coding breaks. */
h1,h2,.display-lg,.display-md,.display-sm{text-wrap:balance}

/* ══════════════════════════════════════════════════════════════
   v3 · ROLE ENFORCEMENT
   Priority 3: orange is an accent only — highlight, hover, selection.
   Primary action is the logo blue (--action) with --on-action text.
   ══════════════════════════════════════════════════════════════ */

/* Primary CTA: logo blue, never orange. White text = 5.17:1 on #2563EB. */
.btn--primary{background:var(--action);color:var(--on-action);border-color:var(--action)}
.btn--primary:hover,
.btn--primary:focus-visible{background:var(--action-lt);border-color:var(--action-lt);
  color:var(--on-action);box-shadow:var(--glow-accent)}

/* Orange keeps exactly three jobs */
::selection{background:var(--accent);color:#0F172A}
.cursor__ring{border-color:var(--accent)}
a:hover .card__link,
.card:hover .card__link,
.link-inline:hover{color:var(--accent)}

/* Structure is cyan: eyebrows, labels, inline links */
.section-label,.label,[data-animate="section-label"],
.card__link,.footer-min__link:hover,.nav__link:hover{color:var(--cyan)}

/* DEFECT 4 — the 24px dash before every .label pushed card eyebrows out of
   alignment with the heading beneath them. Keep it on section labels only. */
.label::before{display:none}
.section-label::before{display:inline-block;background:var(--cyan)}

/* Decorative violet must never touch a border or text (2.49:1 on raised) */
.card,.card__body,.form-input,.form-select,.form-textarea{border-color:var(--card-border)}

/* Expose the site's structural cyan to the mesh (which scopes its own tokens) */
:root{--cyan-site:#00C2FF}
/* ══════════════════════════════════════════════════════════════
   v0.5.0 · CTA STYLING — flat, matching the mesh
   The primary button carried a blue→copper gradient, a coloured glow
   and a sweeping shimmer. None of that is in the mesh's visual language,
   and the gradient mixed the action colour with the accent, which is
   exactly the role confusion Priority 3 removes.
   ══════════════════════════════════════════════════════════════ */
.btn--primary{
  background:var(--action) !important;
  background-image:none !important;
  color:var(--on-action) !important;
  border:1px solid var(--action) !important;
  box-shadow:none !important;
  filter:none !important;
}
.btn--primary::after{display:none !important;content:none !important}
.btn--primary:hover,.btn--primary:focus-visible{
  background:var(--action-lt) !important;
  border-color:var(--action-lt) !important;
  box-shadow:none !important;
  transform:translateY(-1px);
}
.btn--primary:active{transform:translateY(0)}

/* Chat bubble loses its copper glow and pulse too */
.chat-bubble__btn{box-shadow:none !important;animation:none !important;
  background:var(--action) !important;color:var(--on-action) !important}
.chat-bubble__btn:hover{transform:translateY(-2px) !important;box-shadow:none !important}

/* ══════════════════════════════════════════════════════════════
   v0.5.0 · UTILITY DOCK
   One container, one stacking context, right-aligned with margins.
   Collapsed by default so it never covers the mesh hints or Continue.
   ══════════════════════════════════════════════════════════════ */
#vx-dock{position:fixed;right:24px;bottom:24px;z-index:1200;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}
#vx-dock__panel,.vx-dock__panel{display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.97);
  transition:opacity .22s var(--ease-out-expo),transform .22s var(--ease-out-expo),visibility .22s;
  order:-1}
#vx-dock[data-open="true"] .vx-dock__panel{opacity:1;visibility:visible;transform:none}
.vx-dock__row{display:flex;justify-content:flex-end;position:relative}
.vx-dock__toggle{width:48px;height:48px;min-height:48px;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;border:1px solid var(--border-color);
  background:var(--bg-secondary);color:var(--text-secondary);
  transition:color .2s,border-color .2s,transform .2s}
.vx-dock__toggle:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.vx-dock__toggle svg{width:20px;height:20px}
.vx-dock__ico-close{display:none}
#vx-dock[data-open="true"] .vx-dock__ico-open{display:none}
#vx-dock[data-open="true"] .vx-dock__ico-close{display:block}

/* Children sit in flow inside the dock, not fixed to the corner */
#vx-dock #vx-currency,
#vx-dock #vx-fontsize,
#vx-dock .chat-bubble{position:static !important;right:auto !important;bottom:auto !important;
  left:auto !important;top:auto !important;z-index:auto !important;margin:0 !important}

/* Popups open inward and stay inside the viewport */
#vx-dock [role="listbox"],#vx-dock .vx-pop,#vx-dock #vx-currency ul{
  right:0 !important;left:auto !important;max-width:min(280px,calc(100vw - 48px));
  max-height:calc(100vh - 140px);overflow-y:auto}

@media (max-width:640px){
  #vx-dock{right:14px;bottom:14px}
  #vx-dock [role="listbox"],#vx-dock .vx-pop{max-width:calc(100vw - 28px)}
}
@media print{#vx-dock{display:none}}

/* ══════════════════════════════════════════════════════════════
   v0.5.0 · MESH PANEL CTA — readable size and correct role colour
   ══════════════════════════════════════════════════════════════ */
.mesh-stage .btn-sm{background:var(--action) !important;color:var(--on-action) !important;
  font-size:12px !important;font-weight:600 !important;letter-spacing:.1em !important;
  padding:12px 18px !important;border-radius:9px !important}
.mesh-stage .btn-sm:hover{background:var(--action-lt) !important;filter:none !important}
.mesh-stage .link-sm{font-size:12px !important;font-weight:500 !important;
  color:var(--cyan-site,#00C2FF) !important;letter-spacing:.08em !important}
.mesh-stage .link-sm:hover{color:var(--accent) !important}
.mesh-stage .cta-mini h5{font-size:15px !important;font-weight:600 !important;line-height:1.35 !important}
.mesh-stage .cta-mini p{font-size:13px !important;line-height:1.5 !important}

/* Fallback for browsers without :has() — dock.js mirrors the state on <body> */
body.vx-dock-open .mesh-stage .keys,
body.vx-dock-open .mesh-scroll-btn{opacity:0;pointer-events:none}

/* ── v0.5.0 · dock popouts stay inside the viewport ──
   .vx-cur-menu is absolutely positioned and left-anchored to its trigger, so it
   ran 45px past the right edge and was clipped in half. Anchor it to the right. */
#vx-dock .vx-cur-menu,
#vx-dock .vx-fs-menu{
  right:0 !important;left:auto !important;
  max-width:min(260px,calc(100vw - 48px));
  max-height:calc(100vh - 160px);overflow-y:auto}

/* Text-size popout — same pattern as currency, with real labels */
.vx-fs{position:relative}
.vx-fs-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 14px;
  border:1px solid var(--border-color);border-radius:999px;background:var(--bg-secondary);
  color:var(--text-secondary);cursor:pointer;font-family:var(--font-body);font-size:.82rem;
  transition:color .2s,border-color .2s}
.vx-fs-btn:hover{color:var(--accent);border-color:var(--accent)}
.vx-fs-btn svg{width:15px;height:15px}
.vx-fs-menu{position:absolute;bottom:calc(100% + 10px);display:none;
  background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;
  padding:8px;box-shadow:var(--shadow-modal);min-width:190px}
.vx-fs[data-open="true"] .vx-fs-menu{display:block}
#vx-dock .vx-fs-menu #vx-fontsize{position:static !important;display:flex !important;
  flex-direction:column;gap:2px;background:none;border:0;box-shadow:none;padding:0;border-radius:0}
#vx-dock .vx-fs-menu #vx-fontsize button{display:flex;align-items:center;gap:12px;width:100%;
  justify-content:flex-start;padding:9px 12px;border-radius:8px;min-height:40px}
.vx-fs-lbl{font-family:var(--font-body);font-size:.85rem;font-weight:500;letter-spacing:0}

/* ══════════ R4b · EVIDENCE CHARTS ══════════
   Inline SVG, no charting library. Only sourced data is plotted — there is
   deliberately no chart for freelancer or agency figures, because those are
   the claims removed in R4 as unevidenced. */
.vx-evidence__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media (max-width:900px){.vx-evidence__grid{grid-template-columns:1fr}}
.vx-chart{margin:0;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius-lg);padding:1.25rem 1.35rem 1rem}
.vx-chart__cap{font-family:var(--font-display);font-size:1rem;font-weight:600;
  color:var(--text-primary);margin-bottom:.85rem;line-height:1.3}
.vx-chart__svg{width:100%;height:auto;display:block;overflow:visible}
.vx-chart__lbl{font-family:var(--font-mono);font-size:10.5px;fill:var(--text-secondary);
  letter-spacing:.04em}
.vx-chart__val{font-family:var(--font-mono);font-size:11px;fill:var(--text-primary);font-weight:500}
.vx-chart__note{font-family:var(--font-body);font-size:9.5px;fill:var(--text-muted)}
.vx-chart__fn{font-size:8px;fill:var(--cyan)}

/* ══════════ R9 · ICP tier framing on service pages ══════════ */
.vx-icp{margin-top:1.25rem;padding:1rem 1.2rem;border-left:2px solid var(--cyan);
  background:rgba(0,194,255,.045);border-radius:0 var(--radius-md) var(--radius-md) 0}
.vx-icp__tier{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 .45rem}
.vx-icp__pain{font-size:.95rem;line-height:1.6;color:var(--text-secondary);margin:0}

/* ══════════ R7 · accessibility capability block ══════════ */
.vx-a11y{margin-top:1.5rem;padding:1.15rem 1.3rem;background:var(--card-bg);
  border:1px solid var(--card-border);border-radius:var(--radius-lg)}
.vx-a11y__hd{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.vx-a11y__hd svg{width:17px;height:17px;color:var(--cyan);flex-shrink:0}
.vx-a11y__hd p{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);margin:0}
.vx-a11y p.vx-a11y__body{font-size:.92rem;line-height:1.6;color:var(--text-secondary);margin:0}

/* ══════════════════════════════════════════════════════════════
   R2 · HOMEPAGE HERO
   Replaces the mesh. Written against ICP Tier 2 (Seasoned CPO,
   Series A–C) which carries 55% of sales effort in ICP.md v2.0.0.
   ══════════════════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;
  padding:calc(var(--nav-height) + clamp(2rem,5vh,3.5rem)) 0 clamp(3rem,7vh,5rem)}
.hero__bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(110% 80% at 12% 0%, rgba(37,99,235,.20) 0%, transparent 58%),
    radial-gradient(90% 70% at 88% 6%, rgba(0,194,255,.11) 0%, transparent 60%),
    radial-gradient(70% 60% at 60% 100%, rgba(232,155,60,.06) 0%, transparent 62%)}
/* Renamed from .hero__grid: that name was already taken by the old hero's
   decorative grid-line overlay (opacity .6), which was dimming all the copy. */
.hero__layout{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}

.hero__eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 1.15rem}
.hero__h1{font-size:clamp(2.15rem,5.1vw,3.75rem);line-height:1.06;letter-spacing:-.022em;
  font-weight:700;margin:0 0 1.25rem;color:var(--text-primary);text-wrap:balance}
.hero__lede{font-size:clamp(1.03rem,1.55vw,1.2rem);line-height:1.62;color:var(--text-secondary);
  margin:0 0 2rem;max-width:44ch}

.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.25rem}

.hero__meta{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0 0 1.15rem;padding:0;
  border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border)}
.hero__meta li{flex:1 1 8rem;padding:.95rem 1.1rem .95rem 0;min-width:0}
.hero__meta li+li{padding-left:1.1rem;border-left:1px solid var(--card-border)}
.hero__meta strong{display:block;font-size:1.02rem;font-weight:650;color:var(--text-primary);
  letter-spacing:-.01em;margin-bottom:.18rem}
.hero__meta span{display:block;font-size:.78rem;line-height:1.4;color:var(--text-tertiary)}

.hero__note{font-size:.88rem;line-height:1.55;color:var(--text-tertiary);margin:0;max-width:46ch}

/* right column — the "how this starts" ladder + map entry point */
.hero__aside{background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius-xl);padding:clamp(1.4rem,2.2vw,1.85rem)}
.hero__aside-k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 1.25rem}
.hero__steps{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1.15rem}
.hero__steps li{display:grid;grid-template-columns:2rem 1fr;gap:.85rem;align-items:start}
.hero__step-n{font-family:var(--font-mono);font-size:.78rem;color:var(--action-lt);
  padding-top:.14rem;letter-spacing:.04em}
.hero__step-t{font-size:.95rem;font-weight:620;line-height:1.35;color:var(--text-primary);margin:0 0 .28rem}
.hero__step-b{font-size:.85rem;line-height:1.55;color:var(--text-secondary);margin:0}

.hero__map-link{display:flex;align-items:center;gap:.85rem;text-decoration:none;
  padding:.95rem 1rem;border-radius:var(--radius-lg);
  border:1px solid rgba(0,194,255,.28);background:rgba(0,194,255,.055);
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.hero__map-link:hover,.hero__map-link:focus-visible{border-color:var(--accent);
  background:rgba(232,155,60,.075);transform:translateY(-1px)}
.hero__map-ico{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:rgba(0,194,255,.1);color:var(--cyan)}
.hero__map-ico svg{width:19px;height:19px}
.hero__map-link:hover .hero__map-ico{color:var(--accent);background:rgba(232,155,60,.12)}
.hero__map-txt{min-width:0;flex:1}
.hero__map-txt strong{display:block;font-size:.9rem;font-weight:620;color:var(--text-primary);
  line-height:1.35;margin-bottom:.15rem}
.hero__map-txt em{display:block;font-style:normal;font-size:.78rem;line-height:1.4;color:var(--text-tertiary)}
.hero__map-go{flex-shrink:0;color:var(--cyan);font-size:1.05rem;transition:transform .18s ease,color .18s ease}
.hero__map-link:hover .hero__map-go{color:var(--accent);transform:translateX(3px)}

@media (max-width:960px){
  .hero__layout{grid-template-columns:1fr;gap:2.25rem}
  .hero__lede,.hero__note{max-width:none}
}
@media (max-width:560px){
  .hero__meta li{flex:1 1 100%;padding:.8rem 0}
  .hero__meta li+li{padding-left:0;border-left:0;border-top:1px solid var(--card-border)}
  .hero__cta .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .hero__map-link,.hero__map-go{transition:none}
  .hero__map-link:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════
   R1 · DESIGN SYSTEM MAP PAGE — intro above the map, routes below
   ══════════════════════════════════════════════════════════════ */
.dsm-intro{padding:calc(var(--nav-height) + clamp(2.5rem,6vh,4.25rem)) 0 clamp(1.75rem,4vh,2.75rem);text-align:center}
.dsm-intro__eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 1rem}
.dsm-intro__h1{font-size:clamp(2rem,4.6vw,3.35rem);line-height:1.08;letter-spacing:-.022em;
  font-weight:700;margin:0 0 1.15rem;color:var(--text-primary);text-wrap:balance}
.dsm-intro__lede{font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.62;color:var(--text-secondary);
  margin:0 auto 1rem;max-width:58ch}
.dsm-intro__how{font-size:.92rem;line-height:1.6;color:var(--text-tertiary);
  margin:0 auto 1.85rem;max-width:56ch}
.dsm-intro__jump{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:.88rem;font-weight:600;color:var(--cyan);padding:.6rem 1.05rem;
  border:1px solid rgba(0,194,255,.32);border-radius:999px;min-height:44px;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.dsm-intro__jump:hover,.dsm-intro__jump:focus-visible{color:var(--accent);
  border-color:var(--accent);background:rgba(232,155,60,.07)}

.dsm-next__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:1.15rem;margin-top:2.5rem}
.dsm-next__card{display:flex;flex-direction:column;text-decoration:none;
  padding:1.5rem 1.4rem;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius-xl);transition:border-color .18s ease,transform .18s ease}
.dsm-next__card:hover,.dsm-next__card:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.dsm-next__k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 .75rem}
.dsm-next__t{font-size:1.13rem;font-weight:650;line-height:1.3;color:var(--text-primary);margin:0 0 .6rem}
.dsm-next__b{font-size:.9rem;line-height:1.6;color:var(--text-secondary);margin:0 0 1.15rem;flex:1}
.dsm-next__go{font-size:.85rem;font-weight:600;color:var(--action-lt)}
.dsm-next__card:hover .dsm-next__go{color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .dsm-next__card{transition:none}.dsm-next__card:hover{transform:none}
}

/* The rail headline sits over the left edge of the stage. Removing it exposed
   back-face node labels that project past x=0 and clip. It stays — only the copy
   changes, so it no longer duplicates the page h1. */
.dsm-page .mesh-stage #labels{overflow:hidden}

/* ══════════ R3 · reciprocal link from a service back to its node on the map ══════════ */
.vx-mapback{display:flex;align-items:center;gap:.85rem;text-decoration:none;margin-top:1.25rem;
  padding:.9rem 1rem;border-radius:var(--radius-lg);
  border:1px solid rgba(0,194,255,.26);background:rgba(0,194,255,.05);
  transition:border-color .18s ease,background .18s ease}
.vx-mapback:hover,.vx-mapback:focus-visible{border-color:var(--accent);background:rgba(232,155,60,.07)}
.vx-mapback__ico{flex-shrink:0;width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;background:rgba(0,194,255,.1);color:var(--cyan)}
.vx-mapback__ico svg{width:17px;height:17px}
.vx-mapback:hover .vx-mapback__ico{color:var(--accent);background:rgba(232,155,60,.12)}
.vx-mapback__txt{flex:1;min-width:0}
.vx-mapback__txt strong{display:block;font-size:.88rem;font-weight:620;color:var(--text-primary);
  line-height:1.35;margin-bottom:.12rem}
.vx-mapback__txt em{display:block;font-style:normal;font-size:.78rem;line-height:1.4;color:var(--text-tertiary)}
.vx-mapback__go{flex-shrink:0;color:var(--cyan);font-size:1rem}
.vx-mapback:hover .vx-mapback__go{color:var(--accent)}

/* ══════════ R11 · case-study figure (diagram, not screenshot) ══════════ */
.cs-figure{margin:0;max-width:860px}
.cs-figure img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);
  border:1px solid var(--card-border);background:#0B1220}
.cs-figure__cap{margin-top:.85rem;font-size:.85rem;line-height:1.6;color:var(--text-tertiary);
  max-width:62ch}

/* ══════════════════════════════════════════════════════════════════════════
   R16 · design-upgrade.css merged in, 6 August 2026.

   It was a separate override layer loaded immediately after this file on all
   41 pages, in that order, with no @import and no @charset. Appending it here
   verbatim preserves the cascade exactly and removes one render-blocking
   request from every page. Nothing below has been rewritten or deduplicated —
   that is a separate job, and doing both at once would make a regression
   impossible to attribute.
   Verified by computed-style fingerprint over 730 elements, before and after.
   ══════════════════════════════════════════════════════════════════════════ */

/* ============================================================
   VENNEXIS — DESIGN UPGRADE LAYER
   Layered on top of main.css. More beautiful. More creative.
   Animated gradients, noise, 3D cards, editorial moments.
   ============================================================ */

/* ─── JS-FAILURE SAFE: If GSAP doesn't fire, content is visible ──── */
/* GSAP gsap.from/fromTo sets opacity via inline style on animation start.
   We don't set opacity:0 in CSS for most [data-animate] targets so they
   degrade gracefully if the JS bundle fails or is slow. */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── NOISE TEXTURE (SVG URI) ────────────────────────────── */
:root {
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  --gradient-mesh: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(93,110,141,0.22) 0%, transparent 60%),
                   radial-gradient(ellipse 60% 50% at 80% 70%, rgba(232,155,60,0.12) 0%, transparent 55%),
                   radial-gradient(ellipse 100% 80% at 50% 0%, rgba(7,12,22,0) 0%, transparent 70%);
  --glow-orange: 0 0 60px rgba(232,155,60,0.3), 0 0 120px rgba(232,155,60,0.15);
  --glow-blue: 0 0 60px rgba(93,110,141,0.3), 0 0 120px rgba(93,110,141,0.12);
}

/* ─── HERO: ANIMATED GRADIENT MESH BACKGROUND ───────────── */
.hero {
  position: relative;
  overflow: hidden;
  align-items: center;
  min-height: 100svh;
  /* padding-top offsets fixed nav; bottom handled by flex centering */
  padding-top: var(--nav-height, 80px);
  padding-bottom: 0;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
  animation: meshShift 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 200px 200px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

@keyframes meshShift {
  0%   { transform: scale(1) translate(0, 0); }
  33%  { transform: scale(1.06) translate(-2%, 1%); }
  66%  { transform: scale(1.04) translate(2%, -1.5%); }
  100% { transform: scale(1.08) translate(-1%, 2%); }
}

/* Scoped: only lift content containers, never hero__bg (position:absolute) */
.hero .container,
.hero__split,
.hero__content { position: relative; z-index: 1; }

/* ─── HERO: ANIMATED GRADIENT TITLE ACCENT ──────────────── */
.hero__title .accent-line,
.text-gradient {
  background: linear-gradient(
    110deg,
    var(--action) 0%,
    #00C2FF 30%,
    var(--deep-blue) 60%,
    var(--action) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientSlide 6s ease-in-out infinite;
}

@keyframes gradientSlide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -20px) scale(1.08); }
  100% { transform: translate(-20px, 30px) scale(0.95); }
}

/* ─── HERO VISUAL: 3D DASHBOARD CARD ─────────────────────── */
.hero__visual {
  transform-style: preserve-3d;
  perspective: 1200px;
}

/* ─── PROOF STRIP: FULL-WIDTH MARQUEE ────────────────────── */
/* Section spans the full viewport — no container constraint.
   Items scroll from right edge to left edge, seamlessly looped
   by duplicating the item set. -50% = exactly one set width. */
.proof-strip {
  overflow: hidden;
  position: relative;
  padding-block: var(--space-4);
  border-block: 1px solid var(--border-color);
}

/* Left/right edge fade for polished feel */
.proof-strip::before,
.proof-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.proof-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--anthracite, #070C16) 20%, transparent);
}
.proof-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--anthracite, #070C16) 20%, transparent);
}

/* Label centred above track */
.proof-strip__label {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  padding-inline: var(--space-6);
}

/* Marquee track — full width, clips overflow */
.proof-strip__track {
  overflow: hidden;
  width: 100%;
}

/* The scrolling row — contains two identical sets of names */
.proof-strip__logos {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  width: max-content;
  flex-wrap: nowrap;
  animation: marqueeScroll 28s linear infinite;
}

.proof-strip__logos:hover {
  animation-play-state: paused;
}

/* The divider dot between names */
.proof-strip__sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--action);
  opacity: 0.5;
  flex-shrink: 0;
}

.proof-strip__name {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.5vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.proof-strip__name:hover { color: var(--aerospace-white); }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .proof-strip__logos { animation: none; }
}

/* ─── SECTION SPACING OVERRIDE ──────────────────────────────
   main.css uses --space-20 (160px) as default section padding.
   That value is editorial for hero-scale layouts but causes
   massive dead space on every interior page. We tighten it here.
   ─────────────────────────────────────────────────────────── */
.section {
  padding-block: clamp(3.5rem, 7vh, 5rem);        /* was 160px — now 56–80px */
}
.section--sm {
  padding-block: clamp(2rem, 4vh, 3rem);           /* was 96px  — now 32–48px */
}
.section-header {
  margin-bottom: clamp(2rem, 4vh, 3.5rem);         /* was 96px  — now 32–56px */
}
.cta-band {
  padding-block: clamp(3.5rem, 7vh, 5rem);         /* was 128px — now 56–80px */
}

/* ─── CARDS: 3D TILT + GLOW ──────────────────────────────── */
.card,
.service-card,
.case-card {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out-expo),
              box-shadow 0.5s var(--ease-out-expo),
              border-color 0.3s ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

.card::before,
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(232,155,60,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.card:hover::before,
.service-card:hover::before { opacity: 1; }

.card > *,
.service-card > * { position: relative; z-index: 1; }

/* ─── BUTTONS: ENHANCED WITH SHIMMER ─────────────────────── */
.btn--primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--action) 0%, #C77F26 100%);
  border: none;
  box-shadow: 0 4px 24px rgba(232,155,60,0.35), 0 1px 4px rgba(232,155,60,0.2);
  transition: transform 0.3s var(--ease-out-expo),
              box-shadow 0.3s var(--ease-out-expo),
              filter 0.2s ease;
}

.btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  skewX(-20deg);
  transition: left 0.5s ease;
}

.btn--primary:hover::after { left: 140%; }

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(232,155,60,0.5), 0 2px 8px rgba(232,155,60,0.3);
  filter: brightness(1.08);
}

.btn--primary:active { transform: translateY(0); }

.btn--secondary {
  border: 1.5px solid var(--border-strong);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
}

.btn--secondary:hover {
  border-color: var(--action);
  background: rgba(232,155,60,0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232,155,60,0.15);
}

/* ─── SECTION LABELS: ANIMATED UNDERSCORE ────────────────── */
.label, [data-animate="section-label"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--action);
  flex-shrink: 0;
  border-radius: 1px;
}

/* ─── METRICS SECTION ────────────────────────────────────── */
.metric {
  position: relative;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  transition: border-color 0.3s ease, transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
  overflow: hidden;
}

.metric::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--action), var(--deep-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
}

.metric:hover::after { transform: scaleX(1); }
.metric:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.metric__number {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-family: var(--font-display);
  background: linear-gradient(135deg, var(--action), #00C2FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── FAQ: POLISHED LOOK ─────────────────────────────────── */
.faq__item {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s ease;
}

.faq__item:last-child { border-bottom: none; }

.faq__question {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.0625rem;
}

.faq__item.is-open {
  background: rgba(232,155,60,0.03);
}

.faq__item.is-open .faq__question {
  color: var(--text-primary);
}

/* ─── FOOTER: GRADIENT TOP BORDER ───────────────────────── */
.footer {
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--action) 30%, var(--deep-blue) 70%, transparent 100%);
}

/* ─── CONTACT MODAL: GLASS EFFECT ───────────────────────── */
.modal {
  backdrop-filter: blur(2px);
  box-shadow: 0 32px 100px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  border: 1px solid var(--border-color);
}

/* ─── SCROLLBAR ──────────────────────────────────────────── */
/* No custom scrollbar — styling ::-webkit-scrollbar forces Chrome to show a
   permanent classic scrollbar instead of the macOS auto-hiding overlay.
   Left native so it hides itself when not scrolling. */

/* ─── SELECTION ──────────────────────────────────────────── */
::selection {
  background: var(--action);
  color: white;
}

/* ─── PAGE HERO (service/work pages) ────────────────────── */
.page-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 42vh, 480px);
  display: flex;
  align-items: center;
  /* nav is fixed; extra top padding gives hero content breathing room below the nav bar */
  padding-top: 140px;
  padding-bottom: 80px;
  background: var(--anthracite, #070C16);
}

/* Background mesh grid */
.page-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.page-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 120% 100% at 50% 0%, black 30%, transparent 100%);
}

.page-hero__glow {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,155,60,0.12) 0%, rgba(93,110,141,0.08) 40%, transparent 70%);
  top: -200px;
  right: -100px;
  filter: blur(40px);
}

.page-hero__glow-2 {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93,110,141,0.1) 0%, transparent 70%);
  bottom: -200px;
  left: -80px;
  filter: blur(60px);
}

/* Bottom fade-out to next section */
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg-primary, #060A12));
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
	margin-top:2em;
	margin-bottom:2em;
}

.page-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.page-hero__content {
  max-width: 680px;
}

/* Eye-brow / section label already handled by .section-label */

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--aerospace-white, #F8FAFC);
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
  /* Always visible regardless of JS/GSAP state */
  opacity: 1;
  transform: none;
}

.page-hero__sub {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 520px;
}

/* Stat badge on right side */
.page-hero__badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(232,155,60,0.2);
  border-radius: var(--radius-xl, 16px);
  background: rgba(232,155,60,0.05);
  backdrop-filter: blur(8px);
  min-width: 160px;
  text-align: center;
  gap: 0.375rem;
}

.page-hero__badge-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--action);
  line-height: 1;
}

.page-hero__badge-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}

.page-hero__badge-sub {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.3);
  margin-top: 0.125rem;
}

/* Breadcrumb inside page-hero */
.page-hero .breadcrumb {
  margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
  .page-hero__inner {
    grid-template-columns: 1fr;
  }
  .page-hero__badge {
    display: none; /* hide badge on mobile for space */
  }
  .page-hero {
    min-height: 0;
  }
}

/* ─── PAGE-HERO COLOUR VARIANTS ─────────────────────────────── */
.page-hero--blue .page-hero__glow {
  background: radial-gradient(circle, rgba(93,110,141,0.18) 0%, rgba(232,155,60,0.06) 40%, transparent 70%);
}
.page-hero--blue .page-hero__badge {
  border-color: rgba(93,110,141,0.35);
  background: rgba(93,110,141,0.07);
}
.page-hero--blue .page-hero__badge-num {
  color: #38BDF8;
}

.page-hero--teal .page-hero__glow {
  background: radial-gradient(circle, rgba(52,211,153,0.12) 0%, rgba(93,110,141,0.06) 40%, transparent 70%);
}
.page-hero--teal .page-hero__badge {
  border-color: rgba(52,211,153,0.25);
  background: rgba(52,211,153,0.05);
}
.page-hero--teal .page-hero__badge-num {
  color: #34d399;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 100%, rgba(93,110,141,0.2) 0%, transparent 60%),
              radial-gradient(ellipse 40% 60% at 100% 0%, rgba(232,155,60,0.12) 0%, transparent 60%);
  animation: meshShift 10s ease-in-out infinite alternate;
}

.page-hero .container,
.page-hero__content { position: relative; z-index: 1; }

/* ─── WORK/CASE CARDS: ELEVATED ──────────────────────────── */
.case-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease;
}

.case-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 24px 60px rgba(0,0,0,0.25), 0 8px 24px rgba(93,110,141,0.15);
}

.case-card__media {
  position: relative;
  overflow: hidden;
}

.case-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(232,155,60,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.case-card:hover .case-card__media::after { opacity: 1; }

/* ─── INPUT FOCUS GLOW ────────────────────────────────────── */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(232,155,60,0.15);
  background: var(--input-bg);
}

/* ─── NAV LOGO: SMOOTH GLOW ON HOVER ─────────────────────── */
.nav__logo:hover .logo-svg {
  filter: drop-shadow(0 0 12px rgba(232,155,60,0.4)) brightness(0) invert(1);
}

[data-theme="light"] .nav__logo:hover .logo-svg {
  filter: drop-shadow(0 0 8px rgba(232,155,60,0.3));
}

/* ─── CURSOR UPGRADE ─────────────────────────────────────── */
.cursor__ring {
  mix-blend-mode: normal;
  border-color: rgba(232,155,60,0.7);
}

body.cursor--hover .cursor__ring {
  background: rgba(232,155,60,0.06);
}

/* ─── CHAT BUBBLE ────────────────────────────────────────── */
.chat-bubble__btn {
  box-shadow: 0 8px 32px rgba(232,155,60,0.4), 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
  animation: chatPulse 3s ease-in-out infinite;
}

.chat-bubble__btn:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 12px 40px rgba(232,155,60,0.55), 0 4px 12px rgba(0,0,0,0.2);
}

@keyframes chatPulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(232,155,60,0.4), 0 2px 8px rgba(0,0,0,0.2), 0 0 0 0 rgba(232,155,60,0.4); }
  50%       { box-shadow: 0 8px 32px rgba(232,155,60,0.4), 0 2px 8px rgba(0,0,0,0.2), 0 0 0 12px rgba(232,155,60,0); }
}

/* ─── SCROLL PROGRESS BAR UPGRADE ───────────────────────── */
.scroll-progress {
  background: linear-gradient(90deg, var(--action), var(--deep-blue));
  height: 3px;
  box-shadow: 0 0 8px rgba(232,155,60,0.5);
}

/* ─── MOBILE MENU: GLASSMORPHISM ─────────────────────────── */
.mobile-menu {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(7,12,22,0.92);
  border-left: 1px solid var(--border-color);
}

[data-theme="light"] .mobile-menu {
  background: rgba(248,250,252,0.95);
}

/* ─── DARK SECTION: NOISE OVERLAY ───────────────────────── */
.section--dark {
  position: relative;
  overflow: hidden;
}

.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 200px 200px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.section--dark > * { position: relative; z-index: 1; }

/* ─── SERVICE PAGE BREADCRUMB STYLE FIX ──────────────────── */
.breadcrumb__current {
  color: var(--text-muted);
  font-weight: 500;
}

.breadcrumb__link {
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.breadcrumb__link:hover { color: var(--action); }

/* ─── SERVICE HEADER ICON ────────────────────────────────── */
.service-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.service-header__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232,155,60,0.1);
  border: 1px solid rgba(232,155,60,0.2);
  border-radius: var(--radius-md);
  color: var(--action);
  flex-shrink: 0;
}

/* ─── PAGE HERO SUBTITLE FIX ─────────────────────────────── */
.page-hero__sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 56ch;
  margin-top: var(--space-5);
	margin-bottom: var(--space-3);
}

/* ─── STAGGER CHILD REVEAL STATE ─────────────────────────── */
/* opacity is set/animated entirely by GSAP JS, not CSS.
   Keeping transform only so CSS can provide a base. GSAP overrides. */
[data-animate="stagger"].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ─── REDUCED MOTION OVERRIDES ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .orb,
  .proof-strip__track,
  .hero__title .accent-line,
  .text-gradient,
  .chat-bubble__btn {
    animation: none !important;
  }
  .card,
  .service-card,
  .case-card,
  .path-card,
  .btn--primary {
    transition: none !important;
  }
}

/* ─── LIGHT THEME OVERRIDES ───────────────────────────────── */
[data-theme="light"] .metric__number {
  background: linear-gradient(135deg, #E89B3C, var(--action));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .hero::before {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(93,110,141,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(232,155,60,0.07) 0%, transparent 55%);
}

[data-theme="light"] .section--dark::before {
  opacity: 0.3;
}

/* ─── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .orb { display: none; }
  .hero::before { animation-duration: 20s; }

  .card:hover,
  .service-card:hover,
  .case-card:hover,
  .path-card:hover {
    transform: none;
  }

  .metric:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   MEGA MENUS — Elite editorial navigation panels
   ══════════════════════════════════════════════════════════════ */

/* ─── TRIGGER BUTTON ───────────────────────────────────────── */
/* nav__item--mega must stretch to full nav height so :hover chain is continuous */
.nav__item--mega {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.nav__mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0 4px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  text-decoration: none;
  height: 100%;
}

.nav__chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
  flex-shrink: 0;
  /* Always fully visible — signals mega menu to user */
  opacity: 1;
  color: var(--orange, #E89B3C);
}

.nav__item--mega.is-open .nav__chevron {
  transform: rotate(180deg);
}

/* ─── MEGA PANEL ────────────────────────────────────────────── */
.mega-menu {
  position: fixed;
  top: var(--nav-height, 80px);
  left: 0;
  right: 0;
  /* Above nav z-index:1000, fixed so escapes nav stacking context */
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  /* 150ms delay before hiding — allows mouse to travel to mega panel */
  transition:
    opacity 0.28s 0.15s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.28s 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Mega panel shown exclusively via JS-controlled .is-open class.
   CSS :hover is NOT used — JS hover-intent (mouseenter/mouseleave + delay timer)
   is the reliable cross-browser mechanism for position:fixed menus. */
.nav__item--mega.is-open .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 0.22s 0s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s 0s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-menu__panel {
  background: rgba(7,12,22, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 2px solid rgba(232,155,60, 0.25);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  padding: 40px 0 48px;
}

[data-theme="light"] .mega-menu__panel {
  background: rgba(248, 248, 252, 0.98);
  border-top-color: rgba(232,155,60, 0.3);
  border-bottom-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15);
}

.mega-menu__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  gap: 0 48px;
}

.mega-menu--services .mega-menu__inner { grid-template-columns: 1fr 1fr 260px; }
.mega-menu--who .mega-menu__inner      { grid-template-columns: 1fr 1fr 220px; }

/* ─── COLUMN LABEL ─────────────────────────────────────────── */
.mega-menu__col-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--action);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(232,155,60, 0.18);
}

[data-theme="light"] .mega-menu__col-label { color: #C77F26; }

/* ─── SERVICE LINKS ────────────────────────────────────────── */
.mega-menu__link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  margin: 0 -12px 2px;
  transition: background 0.16s ease, transform 0.16s ease;
  position: relative;
}

.mega-menu__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px;
  height: 55%;
  background: var(--action);
  border-radius: 2px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mega-menu__link:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(6px);
}

.mega-menu__link:hover::before { transform: translateY(-50%) scaleY(1); }

[data-theme="light"] .mega-menu__link:hover { background: rgba(0, 0, 0, 0.04); }

.mega-menu__link-title {
  font-size: 0.855rem;
  font-weight: 600;
  color: var(--neutral-100, #F8FAFC);
  line-height: 1.3;
}

[data-theme="light"] .mega-menu__link-title { color: #070C16; }

.mega-menu__link:hover .mega-menu__link-title { color: #fff; }
[data-theme="light"] .mega-menu__link:hover .mega-menu__link-title { color: var(--action); }

.mega-menu__link-desc {
  font-size: 0.71rem;
  color: rgba(248, 250, 252, 0.4);
  line-height: 1.45;
}

[data-theme="light"] .mega-menu__link-desc { color: rgba(7,12,22, 0.48); }

/* ─── VIEW ALL LINK ────────────────────────────────────────── */
.mega-menu__view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--action);
  text-decoration: none;
  margin-top: 14px;
  transition: gap 0.18s ease;
}

.mega-menu__view-all svg { width: 14px; height: 14px; flex-shrink: 0; }
.mega-menu__view-all:hover { gap: 10px; }

/* ─── FEATURED PANEL ───────────────────────────────────────── */
.mega-menu__featured {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-theme="light"] .mega-menu__featured { border-left-color: rgba(0, 0, 0, 0.07); }

.mega-menu__featured-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.32);
  margin-bottom: 6px;
}

[data-theme="light"] .mega-menu__featured-label { color: rgba(7,12,22, 0.38); }

.mega-menu__cta-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px;
  border-radius: 10px;
  text-decoration: none;
  background: rgba(232,155,60, 0.07);
  border: 1px solid rgba(232,155,60, 0.16);
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  color: inherit;
}

.mega-menu__cta-card:hover {
  background: rgba(232,155,60, 0.14);
  border-color: rgba(232,155,60, 0.32);
  transform: translateY(-2px);
}

[data-theme="light"] .mega-menu__cta-card {
  background: rgba(232,155,60, 0.04);
  border-color: rgba(232,155,60, 0.18);
}

.mega-menu__cta-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #E89B3C;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mega-menu__cta-title svg { width: 13px; height: 13px; flex-shrink: 0; }

.mega-menu__cta-desc {
  font-size: 0.75rem;
  color: rgba(248, 250, 252, 0.45);
  line-height: 1.4;
}

[data-theme="light"] .mega-menu__cta-desc { color: rgba(7,12,22, 0.48); }

.mega-menu__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 2px 0;
}

[data-theme="light"] .mega-menu__divider { background: rgba(0, 0, 0, 0.07); }

.mega-menu__plain-link {
  font-size: 0.73rem;
  color: rgba(248, 250, 252, 0.45);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 4px;
  transition: color 0.16s;
}

.mega-menu__plain-link svg { width: 13px; height: 13px; flex-shrink: 0; }
.mega-menu__plain-link:hover { color: rgba(248, 250, 252, 0.9); }
[data-theme="light"] .mega-menu__plain-link { color: rgba(7,12,22, 0.46); }
[data-theme="light"] .mega-menu__plain-link:hover { color: var(--action); }

/* ─── WHO WE HELP: TRACK CARDS ─────────────────────────────── */
.mega-menu__track-card {
  display: block;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
  margin-bottom: 10px;
}

.mega-menu__track-card:hover {
  border-color: rgba(232,155,60, 0.28);
  background: rgba(232,155,60, 0.05);
  transform: translateY(-2px);
}

[data-theme="light"] .mega-menu__track-card { border-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .mega-menu__track-card:hover { border-color: rgba(232,155,60, 0.28); }

.mega-menu__track-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 5px;
}

.mega-menu__track-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--neutral-100, #F8FAFC);
  margin-bottom: 5px;
  line-height: 1.25;
}

[data-theme="light"] .mega-menu__track-title { color: #070C16; }

.mega-menu__track-desc {
  font-size: 0.71rem;
  color: rgba(248, 250, 252, 0.42);
  line-height: 1.5;
  margin-bottom: 10px;
}

[data-theme="light"] .mega-menu__track-desc { color: rgba(7,12,22, 0.48); }

.mega-menu__track-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mega-menu__track-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(93,110,141, 0.14);
  color: rgba(248, 250, 252, 0.52);
  border: 1px solid rgba(93,110,141, 0.18);
}

[data-theme="light"] .mega-menu__track-tag {
  background: rgba(93,110,141, 0.07);
  color: rgba(7,12,22, 0.52);
}

[data-theme="light"] .mega-backdrop.is-active { background: rgba(0, 0, 0, 0.18); }

/* ─── MOBILE: hide mega panels ─────────────────────────────── */
@media (max-width: 1024px) {
  .mega-menu { display: none !important; }
  .nav__chevron { display: none; }
  .mega-backdrop { display: none; }
}

/* ─── CALCULATOR WIDGET ENHANCEMENT ───────────────────────── */
.calculator {
  background: var(--bg-card, var(--bg-secondary));
  border-radius: var(--radius-xl, 16px);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.calculator__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

@media (max-width: 768px) {
  .calculator__body {
    grid-template-columns: 1fr;
  }
  .calculator__controls {
    border-right: none !important;
    border-bottom: 1px solid var(--border-color);
  }
}

.calculator__controls {
  padding: var(--space-8);
  border-right: 1px solid var(--border-color);
}

.calculator__result {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(232,155,60,0.04);
}

.calculator__price {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--action);
  line-height: 1;
  margin: var(--space-3) 0;
}

.calc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-4);
}

.calc-chip {
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--border-color);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1.4;
}

.calc-chip:hover {
  border-color: rgba(232,155,60,0.5);
  color: var(--text-primary);
  background: rgba(232,155,60,0.06);
}

.calc-chip.is-active,
.calc-chip--active {
  border-color: var(--action);
  background: rgba(232,155,60,0.12);
  color: var(--action);
  font-weight: 600;
}

.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: var(--border-color);
  outline: none;
  cursor: pointer;
  margin: var(--space-3) 0;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--action);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(232,155,60,0.2);
  transition: box-shadow var(--transition-fast);
}

.range-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 6px rgba(232,155,60,0.3);
}

.range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--action);
  cursor: pointer;
  border: none;
}

/* ─── APPROACH STEPS VISUAL LAYOUT ─────────────────────────── */
.approach-steps-visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.approach-step-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 6vh, 5rem) 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.approach-step-visual:last-child {
  border-bottom: none;
}

.approach-step-visual--flip .approach-step-visual__content {
  order: 2;
}
.approach-step-visual--flip .approach-step-visual__img {
  order: 1;
}

.approach-step-visual__num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: var(--action);
  opacity: 0.25;
  margin-bottom: var(--space-4);
}

.approach-step-visual__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--aerospace-white);
  margin-bottom: var(--space-4);
  line-height: 1.1;
}

.approach-step-visual__body {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-6);
}

.approach-step-visual__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.approach-step-visual__list li {
  font-size: 0.9375rem;
  color: var(--text-muted);
  padding-left: 1.25rem;
  position: relative;
}

.approach-step-visual__list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--action);
  font-weight: 700;
}

.approach-step-visual__img {
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

.approach-step-visual__img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.approach-step-visual__img:hover img {
  transform: scale(1.02);
}

@media (max-width: 900px) {
  .approach-step-visual {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .approach-step-visual--flip .approach-step-visual__content,
  .approach-step-visual--flip .approach-step-visual__img {
    order: unset;
  }
}

/* ─── CASE CARD MEDIA IMAGE ─────────────────────────────────── */
.case-card__media {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
}

.case-card__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.case-card:hover .case-card__media-img {
  transform: scale(1.04);
}

/* ════════════════════════════════════════════════════════════════
   HERO ROTATING LINES (F1)
   ════════════════════════════════════════════════════════════════ */
.hero__rotating-lines {
  display: block;
  position: relative;
  min-height: 1.25em; /* holds space for one line */
  /* overflow must be left fully visible. The hero is now a single full-width
     column (the old right-hand .hero__visual is gone), so the horizontal
     "safety net" clip is no longer needed. Critically: setting overflow-x
     to hidden while overflow-y is visible makes the browser force
     overflow-y to compute as `auto` — and because the inactive rotating
     lines are absolutely positioned and translated down 28px, they overflow
     the box, which then paints a real vertical scrollbar inside this span
     (the "gray bar" in the hero). Keeping both axes visible avoids it. */
  overflow: visible;
}

.hero__line {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  will-change: opacity, transform;
  /* Default (no-JS / pre-init) state: hidden. The line marked
     .hero__line--active in the HTML is the one shown on first paint,
     so the headline is correct even if JS/GSAP never runs. JS
     (initHeroRotation) takes over the crossfade from there.
     No `transition` here on purpose: when GSAP is loaded it tweens
     opacity/transform on this element itself every animation frame, and a
     CSS transition on the same properties fights that (each GSAP frame
     restarts the CSS transition), which visibly stalls the rotation. The
     transition is added only in the no-GSAP fallback, scoped below. */
  opacity: 0;
  transform: translateY(28px);
}

.hero__line--active {
  opacity: 1;
  transform: translateY(0);
}

/* Only used when GSAP failed to load — see initHeroRotation() in main.js,
   which adds this class to the container instead of using GSAP tweens. */
.hero__rotating-lines--css-fallback .hero__line {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

@media (max-width: 900px) {
  .service-split {
    grid-template-columns: 1fr;
  }
  .service-split--reverse {
    direction: ltr;
  }
  .service-split__visual {
    aspect-ratio: 16/9;
    max-height: 240px;
  }
}

/* ════════════════════════════════════════════════════════════════
   EDITORIAL CASE CARDS (F3)
   ════════════════════════════════════════════════════════════════ */
.case-grid--editorial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.case-card--editorial {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.case-card--editorial:hover {
  border-color: var(--action);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(232,155,60,0.12);
}

.case-card--editorial .case-card__media {
  aspect-ratio: 16/9;
  position: relative;
  background: var(--neutral-900);
  overflow: hidden;
}

.case-card--editorial .case-card__media-motif {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--neutral-800), var(--neutral-900));
}

.case-card__category {
  display: inline-flex;
  padding: 0.25em 0.75em;
  background: rgba(232,155,60,0.15);
  border: 1px solid rgba(232,155,60,0.25);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 0.75rem;
}

.case-card--editorial .case-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.case-card--editorial .case-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.case-card--editorial .case-card__excerpt {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1.25rem;
}

.case-card__outcome {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(232,155,60,0.06);
  border-radius: var(--radius-sm, 6px);
}

.case-card__outcome-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--action);
  line-height: 1;
  font-family: var(--font-display);
}

.case-card__outcome-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.case-card__read-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--action);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

@media (max-width: 900px) {
  .case-grid--editorial {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════
   MORE FROM USMAN — Bento grid (F4)
   ════════════════════════════════════════════════════════════════ */
.usman-section {
  padding-block: clamp(4rem, 8vh, 6rem);
  border-top: 1px solid var(--border-color);
}

.usman-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.usman-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  padding: 1.75rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.22s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}

.usman-card:hover {
  border-color: rgba(232,155,60,0.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(232,155,60,0.1);
}

.usman-card--featured {
  grid-column: span 5;
  grid-row: span 2;
  background: linear-gradient(145deg, var(--neutral-800), var(--neutral-900));
}

.usman-card--medium {
  grid-column: span 4;
}

.usman-card--small {
  grid-column: span 3;
}

.usman-card--wide {
  grid-column: span 7;
}

.usman-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 0.75rem;
}

.usman-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.35;
  margin-bottom: 0.6rem;
}

.usman-card--featured .usman-card__title {
  font-size: 1.3rem;
}

.usman-card__body {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
}

.usman-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--action);
}

.usman-card__glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(232,155,60,0.1) 0%, transparent 70%);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .usman-bento {
    grid-template-columns: repeat(6, 1fr);
  }
  .usman-card--featured { grid-column: span 6; grid-row: span 1; }
  .usman-card--medium { grid-column: span 3; }
  .usman-card--small { grid-column: span 3; }
  .usman-card--wide { grid-column: span 6; }
}

@media (max-width: 640px) {
  .usman-bento {
    grid-template-columns: 1fr;
  }
  .usman-card--featured,
  .usman-card--medium,
  .usman-card--small,
  .usman-card--wide {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ════════════════════════════════════════════════════════════════
   WHY VENNEXIS — 3 differentiator cards
   ════════════════════════════════════════════════════════════════ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.why-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.22s;
}

.why-card:hover {
  border-color: rgba(232,155,60,0.35);
  transform: translateY(-3px);
}

.why-card__num {
  font-size: 3.5rem;
  font-weight: 800;
  color: rgba(232,155,60,0.1);
  line-height: 1;
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-display);
  user-select: none;
}

.why-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(232,155,60,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--action);
  flex-shrink: 0;
}

.why-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.why-card__body {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

@media (max-width: 768px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════
   CTA BAND — raised variant
   Was ".cta-band--orange", a full-bleed slab of --action with
   --anthracite text. That pairing measured 3.45:1: it fails WCAG AA
   for the sub-paragraph (needs 4.5:1) and only scraped the 3:1 large
   text threshold for the title. It also read as a wall of primary
   blue, against the rule that accent colour stays in accents.
   Now: a raised ground with a copper top rule and normal light text.
   Measured — title 16.22:1, sub 11.43:1, rule 7.42:1, button 5.17:1.
   Class name kept so the 12 pages using it need no markup change.
   ════════════════════════════════════════════════════════════════ */
.cta-band--orange {
  background: #111C33 !important;
  border-color: transparent !important;
  border-top: 2px solid var(--accent) !important;
}

.cta-band--orange::before {
  background: radial-gradient(circle at 50% 0%, rgba(232,155,60,0.10) 0%, transparent 60%);
}

.cta-band--orange .cta-band__title { color: var(--aerospace-white) !important; }
.cta-band--orange .cta-band__sub   { color: #CBD5E1 !important; }

.cta-band--orange .btn--primary {
  background: var(--action) !important;
  color: #fff !important;
  border-color: var(--action) !important;
}
.cta-band--orange .btn--primary:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--anthracite) !important;
}

.cta-band--orange .btn--secondary {
  background: transparent !important;
  color: var(--aerospace-white) !important;
  border-color: rgba(248,250,252,0.34) !important;
}
.cta-band--orange .btn--secondary:hover {
  background: rgba(232,155,60,0.10) !important;
  border-color: var(--accent) !important;
  color: var(--aerospace-white) !important;
}

.cta-band__email-link {
  font-size: 0.85rem;
  color: rgba(7,12,22,0.8);
  margin-top: 1rem;
  display: block;
  text-align: center;
}

.cta-band__email-link a {
  color: var(--anthracite);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── LANDING SPLIT inside section (contact.html) ─────────── */
.landing-split--contact {
  padding-top: 0;
  padding-bottom: 0;
  padding-inline: 0;
}

/* ═══════════════════════════════════════════════════════════════
   BLOG & POST — missing component styles
   ═══════════════════════════════════════════════════════════════ */

/* ─── Category / tag chip ─────────────────────────────────── */
.blog-card__cat,
.blog-featured__cat,
.post-meta__cat {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(232,155,60, 0.12);
  color: var(--action);
  white-space: nowrap;
  border: 1px solid rgba(232,155,60, 0.25);
}

/* ─── Post meta bar ───────────────────────────────────────── */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.post-meta__author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.post-meta__date,
.post-meta__read {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ─── Newsletter band ─────────────────────────────────────── */
.newsletter-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
}

.newsletter-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.newsletter-band__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--aerospace-white);
  margin-bottom: 0.5rem;
}

.newsletter-band__sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.newsletter-band__right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.newsletter-field {
  display: flex;
  gap: 0.5rem;
}

.newsletter-field .form-input {
  flex: 1;
}

/* ─── Stats bar ───────────────────────────────────────────── */
.stats-bar {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 2.5rem 0 3.5rem;
}

.stats-bar__item {
  background: var(--card-bg);
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.2s ease;
}

.stats-bar__item:hover {
  background: color-mix(in srgb, var(--card-bg) 80%, var(--action) 8%);
}

.stats-bar__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--action);
  line-height: 1;
  display: block;
}

.stats-bar__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ─── Related posts ───────────────────────────────────────── */
.post-related {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-color);
}

.post-related h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--aerospace-white);
  margin-bottom: 1.5rem;
}

.post-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.post-related__card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
  display: block;
}

.post-related__card:hover {
  border-color: rgba(232,155,60, 0.35);
  transform: translateY(-2px);
}

.post-related__card .blog-card__cat {
  margin-bottom: 0.6rem;
}

.post-related__card h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--aerospace-white);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.post-related__card p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ─── Page hero badge (testimonials, blog hub) ────────────── */
.page-hero__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(100px, 14vw, 140px);
  height: clamp(100px, 14vw, 140px);
  /*border-radius: 50%;*/
  border: 1px solid rgba(232,155,60, 0.3);
  background: rgba(232,155,60, 0.07);
  flex-shrink: 0;
  text-align: center;
  gap: 0.1rem;
}

.page-hero__badge-num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--action);
  line-height: 1;
}

.page-hero__badge-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
  opacity: 0.7;
}

.page-hero__badge-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 0.2rem;
  padding: 0 0.5rem;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .newsletter-band {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Filter Pills (Case Studies / Blog) ─────────────────── */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
	margin-bottom: var(--space-5);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 250, 252, 0.3);
  background: rgba(248, 250, 252, 0.06);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  font-family: var(--font-body);
}

.filter-btn:hover {
  border-color: var(--action);
  color: var(--action);
  background: rgba(232,155,60, 0.08);
}

.filter-btn--active {
  background: var(--action);
  border-color: var(--action);
  color: var(--anthracite);
}

.filter-btn--active:hover {
  background: color-mix(in srgb, var(--action) 88%, #000 12%);
  color: var(--anthracite);
}

/* Light mode overrides for filter pills */
[data-theme="light"] .filter-btn {
  border-color: rgba(7,12,22, 0.2);
  background: rgba(7,12,22, 0.04);
  color: var(--text-secondary);
}

[data-theme="light"] .filter-btn:hover {
  border-color: var(--action);
  color: var(--action);
  background: rgba(232,155,60, 0.06);
}

/* Responsive */
@media (max-width: 900px) {
  .proof-numbers__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .proof-num-item:nth-child(2) {
    border-right: none;
  }
  .proof-num-item:nth-child(3),
  .proof-num-item:nth-child(4) {
    border-top: 1px solid var(--border-color);
  }
  .proof-num-item:nth-child(4) {
    border-right: none;
  }
}

@media (max-width: 560px) {
  .proof-numbers__inner {
    grid-template-columns: 1fr 1fr;
  }
  .proof-num-item {
    padding: 2rem 1.5rem;
  }
  .proof-num-item__num {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }
}
.stats-bar__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--action);
  margin-bottom: 0.25rem;
}

.stats-bar__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--aerospace-white);
}

/* ─── CASE UNIFIED GRID (hub) ─────────────────────────────────── */
.case-unified-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
}

/* override the smaller case-card style for hub (already has case-card base) */
.case-unified-grid .case-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.case-card__index {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 0.5rem;
}

.case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.case-card__tags span {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(232,155,60,0.08);
  border: 1px solid rgba(232,155,60,0.15);
  color: var(--text-muted);
}

/* ─── NAV ACTIVE LINK ──────────────────────────────────────────── */
.nav__link--active {
  color: var(--action) !important;
}

/* ─── MOBILE RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 900px) {
  .blog-featured {
    grid-template-columns: 1fr;
  }
  .blog-featured__img { min-height: 200px; }
  .blog-featured__body { padding: 1.5rem; }

  .newsletter-band { grid-template-columns: 1fr; gap: 2rem; }

  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stats-bar__item:nth-child(2) { border-right: none; }
  .stats-bar__item:nth-child(3) { border-right: 1px solid var(--border-color); }

  .case-unified-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .post-related__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hero__split {
    grid-template-columns: 1fr;
  }
  .hero__visual {
    display: none;
  }
}

/* ─── CHECK ITEM (icon-left, text-right list rows) ──────────── */
/* Used on book-a-call, start-with-an-audit, and service pages. */
.check-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.check-item:last-child {
  margin-bottom: 0;
}

.check-item__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(232,155,60, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-item__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════
   BLOG — VISUAL MAGAZINE REDESIGN
   ═══════════════════════════════════════════════════════════════ */
:root { --radius-lg: 12px; --radius-xl: 18px; }

/* ---- Article grid ---- */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; margin-top:2rem; }
@media (max-width:1024px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-card { display:flex; flex-direction:column; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; transition:transform .4s var(--ease-out-expo), border-color .4s ease, box-shadow .4s ease; }
.blog-card:hover { transform:translateY(-6px); border-color:var(--border-strong); box-shadow:var(--shadow-card-hover); }
.blog-card__img { position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#123A52,#070C16); }
.blog-card__img svg { position:absolute; inset:0; width:100%; height:100%; display:block; transition:transform .6s var(--ease-out-expo); }
.blog-card:hover .blog-card__img svg { transform:scale(1.06); }
.blog-card__img::before { content:""; position:absolute; inset:0; background:radial-gradient(120% 85% at 80% 12%, rgba(232,155,60,.28), transparent 60%); }
.blog-card__img::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 52%, rgba(11,18,34,.6)); }
.blog-card__body { padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.65rem; flex:1; }
.blog-card__title { font-family:var(--font-display); font-size:1.32rem; line-height:1.2; font-weight:600; color:var(--text-primary); transition:color .25s ease; }
.blog-card:hover .blog-card__title { color:var(--action); }
.blog-card__excerpt { color:var(--text-secondary); font-size:.9rem; line-height:1.55; }
.blog-card__meta { margin-top:auto; padding-top:.65rem; display:flex; justify-content:space-between; align-items:center; font-size:.8rem; color:var(--text-muted); gap:1rem; }
.blog-card__read { color:var(--action); font-weight:600; white-space:nowrap; }

/* category-coded covers + chips */
.blog-card[data-cat="AI & Design"] .blog-card__img { background:linear-gradient(135deg,#123A52,#070C16); }
.blog-card[data-cat="Design Systems"] .blog-card__img { background:linear-gradient(135deg,#0E4038,#070C16); }
.blog-card[data-cat="Strategy"] .blog-card__img { background:linear-gradient(135deg,#2A2350,#070C16); }
.blog-card[data-cat="Research"] .blog-card__img,
.blog-card[data-cat="Product Design"] .blog-card__img { background:linear-gradient(135deg,#4A2A14,#070C16); }
.blog-card[data-cat="AI & Design"] .blog-card__cat { background:rgba(107,164,222,.15); color:#38BDF8; border-color:rgba(107,164,222,.34); }
.blog-card[data-cat="Design Systems"] .blog-card__cat { background:rgba(61,220,151,.14); color:#34D399; border-color:rgba(61,220,151,.32); }
.blog-card[data-cat="Strategy"] .blog-card__cat { background:rgba(150,130,255,.15); color:#A78BFA; border-color:rgba(150,130,255,.34); }

/* ---- Featured article ---- */
.blog-featured { display:grid; grid-template-columns:1.1fr 1fr; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-xl); overflow:hidden; text-decoration:none; margin-top:1.5rem; transition:transform .4s var(--ease-out-expo), border-color .4s ease, box-shadow .4s ease; }
.blog-featured:hover { transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--shadow-card-hover); }
.blog-featured__img { position:relative; min-height:360px; overflow:hidden; background:linear-gradient(135deg,#4A2A14,#070C16); }
.blog-featured__img svg { position:absolute; inset:0; width:100%; height:100%; transition:transform .6s var(--ease-out-expo); }
.blog-featured:hover .blog-featured__img svg { transform:scale(1.05); }
.blog-featured__img::before { content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 75% 18%, rgba(232,155,60,.34), transparent 62%); }
.blog-featured__body { padding:2.5rem clamp(1.5rem,3vw,3rem); display:flex; flex-direction:column; justify-content:center; gap:1rem; }
.blog-featured__title { font-family:var(--font-display); font-size:clamp(1.7rem,2.6vw,2.15rem); line-height:1.12; font-weight:700; color:var(--text-primary); transition:color .25s ease; }
.blog-featured:hover .blog-featured__title { color:var(--action); }
.blog-featured__excerpt { color:var(--text-secondary); font-size:1rem; line-height:1.62; max-width:54ch; }
.blog-featured__meta { display:flex; gap:1rem; align-items:center; font-size:.85rem; color:var(--text-muted); margin-top:.4rem; }
.blog-featured__read { color:var(--action); font-weight:600; }
@media (max-width:860px){ .blog-featured{ grid-template-columns:1fr; } .blog-featured__img{ min-height:220px; } .blog-featured__body{ padding:1.75rem; } }

/* ---- Blog post reading experience ---- */
.page-hero--post { position:relative; background:radial-gradient(90% 120% at 85% -10%, rgba(232,155,60,.16), transparent 55%), linear-gradient(180deg,#0D131F 0%,var(--anthracite) 72%); border-bottom:1px solid var(--border-color); }
.post-body { max-width:44rem; margin-inline:auto; }
.post-body p { font-size:1.08rem; line-height:1.8; color:var(--text-secondary); margin-bottom:1.5rem; }
.post-body h2 { font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:700; color:var(--text-primary); margin:2.6rem 0 1rem; letter-spacing:-.02em; }
.post-body h3 { font-size:1.18rem; font-weight:700; color:var(--text-primary); margin:2rem 0 .6rem; }
.post-body strong { color:var(--text-primary); font-weight:600; }
.post-body > p:first-of-type::first-letter { font-family:var(--font-display); font-size:3.4rem; line-height:.82; font-weight:700; float:left; margin:.4rem .7rem 0 0; color:var(--action); }
.post-body blockquote { margin:2.5rem 0; padding:1.5rem 1.9rem; border-left:3px solid var(--action); background:rgba(232,155,60,.06); border-radius:0 var(--radius-md) var(--radius-md) 0; font-family:var(--font-display); font-size:1.3rem; line-height:1.45; color:var(--text-primary); font-style:italic; }
.post-body ul, .post-body ol { margin:0 0 1.5rem 1.25rem; color:var(--text-secondary); line-height:1.75; }
.post-body li { margin-bottom:.5rem; }

/* ---- CTA button + orange-band legibility ---- */
.btn--white { background:#ffffff; color:var(--anthracite); }
.btn--white:hover { background:var(--aerospace-white); transform:translateY(-2px); }
.cta-band--orange .section-label { color:var(--accent) !important; opacity:1; }

/* ═══════════════════════════════════════════════════════════════
   SHARED COMPONENT UTILITIES  (extracted from inline styles → SEO/maintainability)
   ═══════════════════════════════════════════════════════════════ */
.btn--block { width:100%; justify-content:center; }

.req { color:var(--action); }
.text-accent-strong { color:var(--action); font-weight:600; }

.section-header--split { display:flex; align-items:flex-start; gap:3rem; }
.section-header--split .section-header__label { flex-shrink:0; padding-top:.5rem; }
.problem-body { padding-left:calc(110px + 3rem); }
.problem-body p:not(:last-child) { margin-bottom:1rem; }
@media (max-width:768px){
  .section-header--split { flex-direction:column; gap:1rem; }
  .problem-body { padding-left:0; }
}

.grid-2--split { align-items:center; gap:5rem; }
.grid-2--split-tight { align-items:center; gap:4rem; }
@media (max-width:900px){ .grid-2--split, .grid-2--split-tight { gap:2.5rem; } }

.text-white { color:var(--aerospace-white); }
.text-n300 { color:var(--neutral-300); }
.text-n400 { color:var(--neutral-400); }

.portrait-ph { aspect-ratio:3/4; background:var(--neutral-800); border:1px solid var(--border-color); border-radius:var(--radius-md,4px); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.portrait-ph__img { width:100%; height:100%; object-fit:cover; object-position:50% 32%; display:block; }
.founder-portrait { position:relative; }
.founder-portrait::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(7,12,22,.35)); pointer-events:none; }

/* broadly-reused utilities (extracted from inline styles) */
.text-accent { color:var(--action); }
.mw-480 { max-width:480px; }
@media (max-width:900px){ .grid-2--top, .grid-2--top-tight { gap:2.5rem; } }

/* ============================================================
   MINIMAL CENTERED FOOTER  (footer--minimal)
   Compact, centered, brand-forward. Replaces the tall
   multi-column footer site-wide.
   ============================================================ */
.footer.footer--minimal {
  padding: 2.75rem 0 2.35rem;
  border-top: 1px solid var(--border-color);
  background: var(--neutral-950, #060A12);
  margin: 0;
}
.footer--minimal .footer-min {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.35rem;
}
.footer--minimal .footer__logo {
  display: inline-flex;
  line-height: 0;
  opacity: .95;
  transition: opacity .2s ease;
}
.footer--minimal .footer__logo:hover { opacity: 1; }
.footer-min__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 2rem;
}
.footer-min__nav .footer-min__link {
  color: var(--text-primary, #F8FAFC);
  font-size: 0.95rem;
  font-weight: 500;
}
.footer-min__link {
  color: var(--text-muted, #7789A3);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-min__link:hover { color: var(--action, #E89B3C); }
.footer-min__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.85rem;
  width: min(640px, 100%);
  padding-top: 1.3rem;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted, #7789A3);
  font-size: 0.85rem;
}
.footer-min__sep { color: var(--border-strong, rgba(248,250,252,.22)); }
@media (max-width: 560px){
  .footer.footer--minimal { padding: 2.25rem 0 2rem; }
  .footer-min__nav { gap: 0.7rem 1.35rem; }
  .footer-min__nav .footer-min__link { font-size: 0.9rem; }
  .footer-min__base { font-size: 0.8rem; gap: 0.3rem 0.7rem; }
}
@media (max-width: 640px) { .section-figure { margin-top: var(--space-6); border-radius: 8px; } }

/* FIXES UPDATED BY-USMAN - Jul082026 */
.section-title{margin-top:var(--space-5);margin-bottom:var(--space-5)!important;}
/* ============================================================
   CLEAN REVEAL SYSTEM  (replaces GSAP / visual-fx)
   Gated on html.vx-js so content is fully visible if JS is off.
   ============================================================ */
.vx-js [data-animate] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .42s cubic-bezier(.16,1,.3,1),
              transform .42s cubic-bezier(.16,1,.3,1);
}
.vx-js [data-animate].is-revealed { opacity: 1; transform: none; }

/* Stagger containers reveal their children in sequence */
.vx-js [data-animate="stagger"] { opacity: 1; transform: none; }
.vx-js [data-animate="stagger"] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .42s cubic-bezier(.16,1,.3,1),
              transform .42s cubic-bezier(.16,1,.3,1);
}
.vx-js [data-animate="stagger"].is-revealed > * { opacity: 1; transform: none; }
.vx-js [data-animate="stagger"].is-revealed > *:nth-child(1){transition-delay:0s}
.vx-js [data-animate="stagger"].is-revealed > *:nth-child(2){transition-delay:.06s}
.vx-js [data-animate="stagger"].is-revealed > *:nth-child(3){transition-delay:.12s}
.vx-js [data-animate="stagger"].is-revealed > *:nth-child(4){transition-delay:.18s}
.vx-js [data-animate="stagger"].is-revealed > *:nth-child(5){transition-delay:.24s}
.vx-js [data-animate="stagger"].is-revealed > *:nth-child(6){transition-delay:.30s}
.vx-js [data-animate="stagger"].is-revealed > *:nth-child(7){transition-delay:.36s}
.vx-js [data-animate="stagger"].is-revealed > *:nth-child(8){transition-delay:.42s}
.vx-js [data-animate="stagger"].is-revealed > *:nth-child(n+9){transition-delay:.48s}

/* Tasteful hero entrance stagger (elements are in view, reveal on load) */
.vx-js [data-animate="hero-sub"]    { transition-delay: .08s; }
.vx-js [data-animate="hero-visual"] { transition-delay: .12s; }
.vx-js [data-animate="hero-cta"]    { transition-delay: .16s; }

/* Reduced motion — no movement, always visible */
@media (prefers-reduced-motion: reduce) {
  .vx-js [data-animate],
  .vx-js [data-animate="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Custom cursor removed — restore the native pointer everywhere */
.cursor { display: none !important; }
html, body, a, button, .btn, input, textarea, select, label,
.card, .case-card, .faq__question, .nav__link, .mobile-menu__link {
  cursor: auto !important;
}
a, button, .btn, .nav__link, .mobile-menu__link, .faq__question,
[role="button"], summary, label[for] { cursor: pointer !important; }
input, textarea, select { cursor: auto !important; }
input[type="text"], input[type="email"], input[type="url"], textarea { cursor: text !important; }

/* ============================================================
   MODAL FORMS — single column + quote review step
   ============================================================ */
/* Stack all fields in one column inside modals */
#contact-modal .form-row,
#quote-modal .form-row { grid-template-columns: 1fr; }
.quote-tos {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  color: var(--neutral-200, #CBD5E1);
  line-height: 1.4;
  margin-bottom: 1.1rem;
  cursor: pointer;
}
.quote-tos input { margin-top: .18rem; width: 16px; height: 16px; accent-color: var(--action, #E89B3C); cursor: pointer; }
.quote-tos a { color: var(--action, #E89B3C); text-decoration: underline; }

/* ============================================================
   ESTIMATOR DRAWER + PRICING TEASER  (service pages)
   ============================================================ */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(6,13,20,.62);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(540px, 100%);
  background: var(--neutral-900, #070C16);
  border-left: 1px solid var(--border-color, #1F2937);
  box-shadow: -24px 0 60px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.drawer-overlay.is-open .drawer { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border-color, #1F2937); flex: none;
}
.drawer__title { font-size: 1.15rem; margin: 0; color: var(--aerospace-white, #F8FAFC); }
.drawer__close {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  border: 1px solid var(--border-color, #1F2937); background: transparent;
  color: var(--neutral-200, #CBD5E1); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
.drawer__close:hover { border-color: var(--action, #E89B3C); color: #fff; }
/* Drawer body is a flex column: intro (fixed) → controls (scroll) → result (pinned) */
.drawer__body {
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.drawer__body > p {           /* the "Adjust the parameters…" helper text */
  margin: 0; flex: none;
  padding: .9rem 1.5rem 0;
  font-size: .88rem; line-height: 1.5;
  color: var(--neutral-300, #94A3B8);
}
/* Flatten the calculator card and let it fill the drawer */
.drawer .calculator {
  background: transparent; border: 0; border-radius: 0; overflow: visible;
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.drawer .calculator__body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Only the controls scroll */
.drawer .calculator__controls {
  padding: 1.1rem 1.5rem; border-right: 0; margin: 0;
  overflow-y: auto; flex: 1; min-height: 0;
}
.drawer .calculator__controls .form-group { margin-bottom: 1.15rem; }
.drawer .calculator__controls .form-group:last-child { margin-bottom: 0; }
.drawer .calc-chips { gap: 6px; margin-bottom: 0; }
.drawer .calc-chip { padding: 5px 12px; font-size: .8rem; }
/* Result pinned to the bottom — number + CTA always visible, no scroll needed */
.drawer .calculator__result {
  flex: none; padding: 1rem 1.5rem 1.3rem; margin: 0;
  background: var(--neutral-950, #060A12);
  text-align: left; align-items: stretch;
  border-top: 1px solid var(--border-color, #1F2937);
}
.drawer .calculator__result .btn { width: 100%; margin-top: .8rem; }
.drawer .calculator__price { font-size: 2.1rem; line-height: 1.05; margin: .1rem 0 .2rem; }
.drawer .calculator__result .body-sm { margin: 0; font-size: .8rem; }

/* Phones + portrait tablets: full-width bottom sheet. Landscape tablets and
   desktops (> 820px) keep the focused side drawer. */
@media (max-width: 820px) {
  .drawer {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: auto; max-height: 92vh;
    border-left: 0; border-top: 1px solid var(--border-color, #1F2937);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .drawer-overlay.is-open .drawer { transform: none; }
}

.estimate-teaser {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem; margin-top: 1rem; padding: 1.75rem 2rem;
  border: 1px solid var(--border-color, #1F2937); border-radius: 16px;
  background: var(--card-bg, rgba(255,255,255,.02));
}
.estimate-teaser__price { font-size: 1.5rem; font-weight: 700; color: var(--aerospace-white, #F8FAFC); margin: 0 0 .35rem; }
.estimate-teaser__price .estimate-teaser__meta { color: var(--neutral-400, #7789A3); font-weight: 500; font-size: 1rem; }
.estimate-teaser__sub { color: var(--neutral-300, #94A3B8); font-size: .95rem; margin: 0; max-width: 44ch; }
.estimate-teaser__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 560px) {
  .estimate-teaser { flex-direction: column; align-items: flex-start; }
  .estimate-teaser__actions { width: 100%; }
  .estimate-teaser__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   CUSTOM QUOTE (multistep) — 3-step funnel controls
   ============================================================ */
/* Two-column step layout → single column on small screens */
.multistep__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; }
@media (max-width: 720px) { .multistep__cols { grid-template-columns: 1fr; } }

/* Required / optional label hints */
.form-label .req, .quote-tos .req { color: var(--action, #E89B3C); }
.form-label .opt, .quote-tos .opt, label .opt {
  color: var(--neutral-400, #7789A3); font-weight: 400;
  text-transform: none; letter-spacing: 0;
}

/* Deliverable chips */
.chip-set { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.chip-check input:checked + .chip {
  border-color: var(--action, #E89B3C);
  background: rgba(232,155,60,.12);
  color: var(--aerospace-white, #F8FAFC);
}
.chip-check input:focus-visible + .chip,
.segmented__opt input:focus-visible + span {
  outline: 2px solid var(--action, #E89B3C); outline-offset: 2px;
}

/* Segmented radio controls (timeline / budget) */
.segmented-group { border: 0; margin: 0 0 1.5rem; padding: 0; min-inline-size: 0; }
.segmented-group legend { margin-bottom: .55rem; padding: 0; }
.segmented { display: flex; flex-wrap: wrap; gap: .5rem; }
.segmented__opt { position: relative; }
.segmented__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
/* direct child only — so the nested .vx-price (currency) span isn't boxed */
.segmented__opt > span {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .55rem 1rem; border-radius: 10px;
  border: 1px solid var(--border-color, #1F2937);
  color: var(--neutral-200, #CBD5E1); font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.segmented__opt > span:hover { border-color: var(--neutral-400, #7789A3); }
.segmented__opt .vx-price { border: 0; padding: 0; background: none; }
.segmented__opt input:checked + span {
  border-color: var(--action, #E89B3C);
  background: rgba(232,155,60,.12);
  color: var(--aerospace-white, #F8FAFC);
}

/* Validation error styling (used across all forms) */
.field--error,
.form-input.field--error, .form-select.field--error, .form-textarea.field--error {
  border-color: #e0564f !important;
}
.form-error {
  display: block; color: #f08a84; font-size: .8rem;
  margin-top: .35rem; line-height: 1.3;
}

/* ============================================================
   CUSTOM QUOTE — field spacing (match the Audit form) + error summary
   ============================================================ */
.multistep__col { display: flex; flex-direction: column; gap: 1.15rem; }
.multistep__panel > .form-group,
.multistep__cols { margin-bottom: 1.35rem; }
.multistep__panel > .form-group:last-of-type { margin-bottom: 1.35rem; }
.multistep__panel .form-group { margin-bottom: 0; }   /* spacing handled by col gap */
.multistep__panel > .form-group { margin-bottom: 1.35rem; }

/* Error summary box — always at the TOP of the form/step, red, announced */
.form-error-summary {
  display: flex; gap: .6rem; align-items: flex-start;
  background: rgba(224,86,79,0.12);
  border: 1px solid rgba(224,86,79,0.55);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin: 0 0 1.5rem;
  color: #f3b0ab;
  font-size: .9rem; line-height: 1.5;
}
.form-error-summary strong { color: #f6c8c4; display: block; margin-bottom: .15rem; }
.form-error-summary a { color: #f6c8c4; text-decoration: underline; cursor: pointer; }
.form-error-summary::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: #e0564f; color: #0D131F; font-weight: 800; font-size: .8rem;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }

/* ── Deliverables grouped by Included / Optional (Custom Quote) ── */
.chip-set { display: block; }
.chip-group { margin-bottom: .85rem; }
.chip-group__label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--neutral-400, #7789A3); margin-bottom: .45rem;
}
.chip-set__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-set__row + .chip-set__row { margin-top: .5rem; }

/* ============================================================
   LAUNCH POLISH — flat & clean, gold accent, single theme, a11y
   ============================================================ */
:root { --noise: none; --gradient-mesh: none; --glow-orange: none; --glow-blue: none; }

/* Remove dated decorative effects → flat, premium */
.hero::before { background: none !important; animation: none !important; }
.hero::after  { display: none !important; }
.hero__title .accent-line, .text-gradient {
  animation: none !important; background: none !important;
  -webkit-text-fill-color: var(--action) !important; color: var(--action) !important;
}
.chat-bubble__btn { animation: none !important; box-shadow: 0 6px 20px rgba(0,0,0,.28) !important; }
.scroll-progress  { background: var(--action) !important; box-shadow: none !important; }
.nav__logo:hover .logo-svg { filter: brightness(0) invert(1) !important; }

/* Single theme for launch — hide the light/dark toggle */
.theme-toggle { display: none !important; }

/* Readability */
body { line-height: 1.65; }

/* Accessibility — visible skip link */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 4000;
  background: var(--action); color: var(--anthracite); font-weight: 700;
  padding: 10px 16px; border-radius: 8px; text-decoration: none;
  font-family: var(--font-body); transition: top .2s ease;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--anthracite); outline-offset: 2px; }

/* ============================================================
   REFINEMENT PASS — buttons, nav, section sizes, proof,
   method layout, animated hero bg, S/M/L font-size control
   ============================================================ */

/* 1) Buttons larger (per request) — but NOT nav or small variant */
.btn, .btn--lg { font-size: 1.3rem; }
.nav .btn, .nav__cta-btn, .btn--sm { font-size: 0.95rem !important; }

/* 2) Navigation text up */
.nav__link { font-size: 1rem; }
.mega-menu__link { font-size: 1rem; }
.mega-menu__link-desc, .mega-menu__track-desc, .mega-menu__cta-desc { font-size: 0.8rem; }

/* 3) Section body/description sizes up */
.body-sm { font-size: 0.98rem; }
.body-md { font-size: 1.08rem; }
.body-lg { font-size: 1.25rem; }
.step__desc, .why-card__body, .service-split__body, .svc__desc, .case-card__excerpt { font-size: 1.03rem; }
.section-label { font-size: 0.82rem; }

/* 3.1) Proof stats — more prominent */
.metric__number { font-size: clamp(2.6rem, 4vw, 3.4rem); color: var(--action); line-height: 1; }
.metric__label { font-size: 0.98rem; }

/* 4) METHOD — heading left, intro right, steps full-width below */
.method-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 4rem; align-items: end; margin-bottom: 3.5rem; }
@media (max-width: 860px) { .method-head { grid-template-columns: 1fr; gap: 1.4rem; } }
.steps--row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 860px) { .steps--row { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }
@media (max-width: 520px) { .steps--row { grid-template-columns: 1fr; } }
.hero__visual { display: none !important; }
.principal-note { font-size: 1.18rem; color: var(--text-secondary); max-width: 62ch; margin-top: .6rem; line-height: 1.6; }
@keyframes flowRise { 0% { transform: translateY(20%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(-60%); opacity: 0; } }
@keyframes sheenDrift { 0% { transform: translate(0,0); } 100% { transform: translate(-6%, 4%); } }
@media (prefers-reduced-motion: reduce) { .hero__flow-line, .hero__sheen { animation: none; } }

/* ── Font-size control (Small / Medium / Large) ── */
#vx-fontsize { position: fixed; right: 16px; bottom: 16px; z-index: 1000;
  display: flex; gap: 2px; background: #0D131F; border: 1px solid #1F2937;
  border-radius: 999px; padding: 3px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
#vx-fontsize button { border: 0; background: none; color: #94A3B8; font-family: var(--font-body);
  font-weight: 700; cursor: pointer; border-radius: 999px; line-height: 1; padding: 6px 11px;
  transition: background .2s, color .2s; }
#vx-fontsize button:hover { color: #E2E8F0; }
#vx-fontsize button[aria-pressed="true"] { background: var(--action); color: var(--on-action); }
#vx-fontsize button.s { font-size: 12px; } #vx-fontsize button.m { font-size: 14px; } #vx-fontsize button.l { font-size: 16px; }
@media print { #vx-fontsize { display: none; } }

/* #3 & #4 Currency + font-size controls: stacked bottom-right, above the chat
   bubble (which sits at bottom:28px right:28px). Currency is positioned by its
   own JS-injected style (bottom:150px) so it can't fight this rule; font-size
   sits just below it. Both right-aligned; nothing stretches across the page. */
#vx-fontsize { top: auto; left: auto; right: 28px; bottom: 100px; }
@media (max-width: 640px) {
  #vx-fontsize { right: 20px; bottom: 100px; }
}

/* HOW WE WORK — top-align heading & intro; CTA below the process */
.method-head { align-items: start; }
.method-cta { margin-top: 3rem; }

/* Proof / Our Work — editorial case images */
.case-card__media { position: relative; overflow: hidden; }
.case-card__media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.case-card__media-motif { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(7,12,22,0) 40%, rgba(7,12,22,0.55) 100%); }

/* FAQ — inner padding so text doesn't touch the box */
.faq__question { padding-left: 1.5rem; padding-right: 1.5rem; }
.faq__answer { padding-left: 1.5rem; padding-right: 1.5rem; }
.faq__answer > *:last-child { padding-bottom: 1.4rem; }

/* CTA buttons — equal height (primary lacked the border the secondary has) */
.btn { border: 1px solid transparent; }
.btn--primary { border: 1px solid transparent !important; }

/* Case-study cover without a banner image (used until project imagery is supplied) */
.cs-banner--flat { min-height: auto; padding: 8rem 0 4rem; background:
  radial-gradient(ellipse 70% 60% at 20% 0%, rgba(232,155,60,0.10), transparent 60%),
  linear-gradient(180deg, #0D131F 0%, var(--anthracite) 100%); }
.cs-banner--flat .cs-banner__overlay { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   R17 · AA CONTRAST SWEEP — the "--action used to be orange" bug class

   Before the 0.4.0 retheme, --action was Ink & Ember orange, and pairing it
   with --anthracite text was correct. --action is now Signal blue #2563EB, so
   every one of those pairings silently became 3.45:1 and fails SC 1.4.3.
   Found by measuring rendered text on all 41 pages, not by reading the CSS.

   --on-action exists precisely for this. Anything sitting on --action uses it.
   Measured after: 5.17:1 on every control below.
   ══════════════════════════════════════════════════════════════════════════ */
.skip-link{color:var(--on-action) !important}
.filter-btn,.filter-btn--active,.filter-btn--active:hover{color:var(--on-action) !important}
.calc-chip:hover,.calc-chip.is-active{color:var(--on-action) !important}

/* The CTA band email link kept anthracite from the orange-band era. Against
   the new #111C33 ground that measured 1.05:1 — effectively invisible. */
.cta-band__email-link,
.cta-band__email-link a{color:var(--aerospace-white) !important}
.cta-band__email-link a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(232,155,60,.6)}
.cta-band__email-link a:hover{color:var(--accent) !important}

/* ══════════════════════════════════════════════════════════════════════════
   R17 · AA CONTRAST SWEEP, part 2

   Measured rendered text on 18 pages with proper alpha compositing. Two root
   causes, ~180 failing instances:

   1. --action (#2563EB) used as TEXT. The token comment already says
      "FILL ONLY — 3.45:1, never text", but label styles predating the 0.4.0
      retheme still paint with it. Worst case across the site's grounds: 2.83:1.
      Small blue-on-dark labels move to --cyan (#00C2FF), worst case 7.07:1.
      Where the label is genuinely primary-action-coloured, --action-lt would
      still only reach 3.97:1, so cyan it is.

   2. Dim greys in the mega-menu and footer (#676B72, #7C7D7F, #545860,
      #6C7077, #4D525E) at 2.41–4.36:1. All lift to #94A3B8, worst case 5.70:1.
   ══════════════════════════════════════════════════════════════════════════ */

/* — 1. blue labels → cyan — */
.mega-menu__col-label,
.mega-menu__track-eyebrow,
.case-card__category,
.case-card__outcome-num,
.service-split__label,
.page-hero__badge-label,
.usman-card__eyebrow,
.blog-featured__label,
.hero__step-n{color:var(--cyan) !important}

/* — 2. dim greys → readable — */
.mega-menu__link-desc,
.mega-menu__cta-desc,
.mega-menu__track-desc,
.mega-menu__featured-label,
.footer-min__sep,
.breadcrumb__sep,
.footer__office-country,
.caption,
.req{color:#94A3B8 !important}

/* ══════════ R17 · AA sweep, part 3 ══════════ */

/* Descendants of the CTA band inherited --anthracite from the era when the band
   was painted in --action (then orange). Against the new #111C33 ground that is
   1.05:1 — the text is there and cannot be seen. Anything unstyled in the band
   takes the band's own foreground. */
.cta-band--orange h2:not([class]),
.cta-band--orange p:not([class]),
.cta-band--orange .btn:not(.btn--primary):not(.btn--secondary){
  color:var(--aerospace-white) !important}
.cta-band--orange .btn:not(.btn--primary):not(.btn--secondary){
  border-color:rgba(248,250,252,.34) !important;background:transparent !important}

/* Step dots rendered black on a dark card. */
.multistep__dot{color:var(--text-secondary) !important}
.multistep__dot[aria-current="step"],.multistep__dot.is-active{
  background:var(--action) !important;color:var(--on-action) !important}

/* ══════════ R17 · AA sweep, part 4 — last 13 instances ══════════ */
.blog-featured__read,.blog-card__read,.post-meta__cat,
.nav__link.is-current,.nav__link[aria-current],
.dsm-next__go,.hero__map-go{color:var(--cyan) !important}
.label,.section-label{color:var(--cyan) !important}

/* The active nav item used --action as text (3.45:1). Same class of bug; this
   was the last instance on the site. */
.nav__link--active,.nav__link--active:hover{color:var(--cyan) !important}

/* ══════════════════════════════════════════════════════════════════════════
   BRAND LOGO — 8 August 2026

   The logo used to be an inline <svg> repeated 80 times across 41 pages, with
   the wordmark set as a live <text> element in Lato (so it silently fell back
   to another font if Lato failed to load) and a mark that was an approximation
   of the real thing, not the real thing.

   It is now the supplied "VenNexis - Ice Logo" artwork, referenced as two
   files: white for dark grounds, colour for light. Both are byte-identical to
   the brand pack. Nothing is recoloured here.

   The old rule was  .nav__logo .logo-svg { filter: brightness(0) invert(1); }
   which crushed the logo to a white silhouette and destroyed the gradient.
   It is gone. The white lockup carries its own gradient.

   A future logo change is a file swap in assets/images/brand/ — not 80 edits.
   ══════════════════════════════════════════════════════════════════════════ */
.logo-svg{display:block;height:auto;width:auto}
.logo-svg--light{display:none}
[data-theme="light"] .logo-svg--dark{display:none}
[data-theme="light"] .logo-svg--light{display:block}

/* Kill every legacy filter that was flattening the mark. */
.nav__logo .logo-svg,
.nav__logo:hover .logo-svg,
[data-theme="light"] .nav__logo .logo-svg,
[data-theme="light"] .nav__logo:hover .logo-svg,
.footer__logo .logo-svg,
.footer__logo:hover .logo-svg{filter:none !important}

.nav__logo,.footer__logo{display:inline-flex;align-items:center;
  transition:opacity .18s ease}
.nav__logo:hover,.footer__logo:hover{opacity:.82}
@media (prefers-reduced-motion:reduce){
  .nav__logo,.footer__logo{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   TEAM — about.html · 8 August 2026
   Named people, because D-01 promises the lead is stated before you sign.
   No photographs: none were supplied, and a stock headshot on a design
   studio's own team page is worse than no headshot. Monogram instead.
   ══════════════════════════════════════════════════════════════════════════ */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.25rem;margin-top:.5rem}

.team-card{display:flex;flex-direction:column;padding:1.6rem 1.5rem;
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius-xl);transition:border-color .18s ease,transform .18s ease}
.team-card:hover{border-color:var(--accent);transform:translateY(-2px)}

/* Titles are different lengths and one wraps to two lines. Align to the top so
   the monograms line up across the row regardless of title length. */
.team-card__hd{display:flex;align-items:flex-start;gap:.95rem;margin-bottom:1.05rem;
  min-height:48px}
.team-card__hd > div{padding-top:.15rem}
.team-card__mono{flex-shrink:0;width:48px;height:48px;display:grid;place-items:center;
  border-radius:50%;background:rgba(0,194,255,.10);border:1px solid rgba(0,194,255,.28);
  font-family:var(--font-mono);font-size:.9rem;letter-spacing:.04em;color:var(--cyan)}
.team-card__name{font-size:1.1rem;font-weight:650;line-height:1.25;
  color:var(--text-primary);margin:0 0 .2rem}
.team-card__role{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cyan);margin:0;line-height:1.4}

.team-card__bio{font-size:.92rem;line-height:1.62;color:var(--text-secondary);
  margin:0 0 1.15rem}

.team-card__facts{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.6rem;
  border-top:1px solid var(--card-border);padding-top:1.05rem;flex:1}
.team-card__facts li{font-size:.83rem;line-height:1.55;color:var(--text-tertiary)}
.team-card__facts strong{display:block;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);
  font-weight:500;margin-bottom:.15rem}

.team-card__link{align-self:flex-start;font-size:.83rem;font-weight:600;
  color:var(--cyan);text-decoration:none;padding:.45rem 0;min-height:24px;
  display:inline-flex;align-items:center;gap:.35rem}
.team-card__link:hover,.team-card__link:focus-visible{color:var(--accent)}

.team-note{margin-top:1.75rem;font-size:.9rem;line-height:1.65;color:var(--text-tertiary);
  max-width:64ch}
.mw-720{max-width:720px}

@media (prefers-reduced-motion:reduce){
  .team-card{transition:none}.team-card:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION HEADERS — one pattern · 8 August 2026

   The homepage was mixing three treatments across twelve sections: --split
   (label left, heading right), --center, and the default left. Same page,
   three reading rhythms, so the eye had to re-orient at every section.

   One pattern now, everywhere: cyan eyebrow, then heading, then supporting
   copy — stacked vertically, left aligned. The variants are neutralised
   rather than deleted so no markup has to change on 41 pages, and so a
   stale class in a future paste cannot silently re-introduce a third rhythm.
   ══════════════════════════════════════════════════════════════════════════ */
.section-header,
.section-header--center,
.section-header--split{
  display:block !important;
  text-align:left !important;
  gap:0 !important;
  max-width:none}

.section-header--split .section-header__label{padding-top:0 !important}

/* Eyebrow · heading · copy, in that order, with consistent rhythm. */
.section-header .section-label,
.section-header .section-eyebrow{display:block;margin:0 0 .85rem}
.section-header .section-title,
.section-header h2{margin:0 0 1rem;text-wrap:balance}
.section-header .section-sub,
.section-header > p{margin:0;max-width:62ch}

/* Centred children inside a now-left-aligned header would fight it. */
.section-header--center .btn-group,
.section-header--center .section-sub{margin-left:0;margin-right:0}

/* The copper rule above "Two Ways In" read as a stray line rather than a
   branch marker. Removed at Usman's call; the section is plain like the rest. */

/* ══════════════════════════════════════════════════════════════════════════
   SCROLL STACK — homepage · 8 August 2026 (JS-assisted)

   Sections stack: each slides up over the last, and the one behind recedes
   to give parallax depth. Pinning is CSS sticky; the recede is JS reading
   scroll position and writing a transform. The wheel is never intercepted,
   so native scrolling, keyboard paging and find-in-page all still work.

   .is-pinned is applied by JS only to panels that actually fit the viewport.
   A 2,500px section pinned at the top would have its bottom clipped, so tall
   panels scroll normally and only the depth effect carries across them.

   Everything here is scoped to .vx-stack--on, which JS adds. No JS, reduced
   motion, or a narrow viewport all leave a plain stacked page.
   ══════════════════════════════════════════════════════════════════════════ */
.vx-stack{position:relative}
.vx-stack__panel{background-color:var(--anthracite)}
.vx-stack__panel.section--gray{background-color:#16213B}
.vx-stack__panel > .container{width:100%}

.vx-stack--on .vx-stack__panel.is-pinned{
  position:sticky;
  /* JS sets --stick-top per panel: nav height for panels that fit, a negative
     offset for taller ones so they pin at their bottom edge instead. */
  top:var(--stick-top, var(--nav-height));
  min-height:calc(100svh - var(--nav-height));
  display:flex;
  align-items:center;
}

/* Later panels paint over earlier ones. Stated explicitly so an unrelated
   z-index cannot invert the order. */
.vx-stack--on .vx-stack__panel:nth-of-type(1){z-index:1}
.vx-stack--on .vx-stack__panel:nth-of-type(2){z-index:2}
.vx-stack--on .vx-stack__panel:nth-of-type(3){z-index:3}
.vx-stack--on .vx-stack__panel:nth-of-type(4){z-index:4}
.vx-stack--on .vx-stack__panel:nth-of-type(5){z-index:5}
.vx-stack--on .vx-stack__panel:not(.is-pinned){position:relative}

/* The receding transform is written to the panel's inner container. */
.vx-stack--on .vx-stack__panel > .container{
  transform-origin:50% 30%;
  will-change:transform,opacity;
}

/* Sticky dies silently inside a clipping ancestor. */
.vx-stack,.vx-stack__panel{overflow:visible}

@media (max-width:900px){
  .vx-stack__panel{position:static !important;min-height:0 !important;display:block !important}
  .vx-stack__panel > .container{transform:none !important;opacity:1 !important}
}
@media (prefers-reduced-motion:reduce){
  .vx-stack__panel{position:static !important;min-height:0 !important;display:block !important}
  .vx-stack__panel > .container{transform:none !important;opacity:1 !important;will-change:auto}
}

/* The Problem body was indented by the width of the old --split label column
   (110px + 3rem). With the header stacked and left aligned, that indent left
   the copy floating in the middle of nowhere. */
.problem-body{padding-left:0 !important;max-width:68ch}

/* ══════════════════════════════════════════════════════════════════════════
   WHAT WE DO — three tiers · 8 August 2026

   Was three service showcases (Product Design, Design Systems, AI Design)
   with large visuals, running to 2,505px. Two problems: the heading promised
   "Ten services. Three tiers" and the section delivered three arbitrary
   services, and at 2.5 viewports it could not join the scroll stack.

   Now the three tiers themselves, sized to fit one viewport so it pins with
   the rest. Prices carry data-sku so the currency converter still reaches them.
   ══════════════════════════════════════════════════════════════════════════ */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:.25rem}

.tier-card{display:flex;flex-direction:column;text-decoration:none;
  padding:1.35rem 1.3rem;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius-xl);transition:border-color .18s ease,transform .18s ease}
.tier-card:hover,.tier-card:focus-visible{border-color:var(--accent);transform:translateY(-2px)}

.tier-card__k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 .7rem}
.tier-card__t{font-size:1.02rem;font-weight:650;line-height:1.32;
  color:var(--text-primary);margin:0 0 .5rem;text-wrap:balance}
.tier-card__b{font-size:.85rem;line-height:1.55;color:var(--text-tertiary);margin:0 0 .95rem}

.tier-card__list{list-style:none;margin:0 0 1rem;padding:.95rem 0 0;display:grid;gap:.5rem;
  border-top:1px solid var(--card-border);flex:1}
.tier-card__list li{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.tier-card__list span{font-size:.86rem;line-height:1.4;color:var(--text-secondary)}
.tier-card__list em{font-style:normal;font-size:.8rem;font-weight:650;color:var(--cyan);
  white-space:nowrap}

.tier-card__go{font-size:.82rem;font-weight:600;color:var(--action-lt)}
.tier-card:hover .tier-card__go{color:var(--accent)}

.tier-note{margin-top:1.4rem;font-size:.88rem;line-height:1.6;color:var(--text-tertiary);
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:baseline}
.tier-note a{color:var(--cyan);text-decoration:none}
.tier-note a:hover{color:var(--accent)}
.tier-note__all{font-weight:600;margin-left:auto}

@media (max-width:1000px){
  .tier-grid{grid-template-columns:1fr;gap:.9rem}
  .tier-note__all{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .tier-card{transition:none}.tier-card:hover{transform:none}
}

/* Why VenNexis sat 28px over the viewport, which kept it out of the stack.
   Tightened the CTA gap and the card padding rather than cutting more copy. */
.vx-stack--on .vx-stack__panel[aria-labelledby="why-heading"] .mt-8{margin-top:1.5rem}
.vx-stack--on .vx-stack__panel[aria-labelledby="why-heading"] .why-card{padding-block:1.15rem}

/* ══════════════════════════════════════════════════════════════════════════
   STICKY FIX · 8 August 2026

   `html` and `body` both carried `overflow-x: hidden`. That is the classic
   position:sticky killer: setting overflow on one axis makes the browser
   compute the other axis as `auto`, which turns the element into a scroll
   container — and sticky descendants then resolve against THAT container
   instead of the viewport, so they never pin.

   `overflow-x: clip` prevents the same horizontal overflow without creating
   a scroll container, so sticky works. `hidden` stays above as the fallback
   for anything that does not support clip.
   ══════════════════════════════════════════════════════════════════════════ */
html{overflow-x:clip}
body{overflow-x:clip}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION GROUNDS — 8 August 2026

   The page ran on two tones and several sections carried no ground at all, so
   everything after "How We Work" read as one undifferentiated slab.

   Three grounds now, rotating. All three keep headings above 15:1 and body
   above 10:1, so the ladder costs nothing in contrast. Adjacent pairs sit at
   1.05–1.17:1 against each other — enough to register as a change of surface,
   not enough to look like stripes.

   Sections that already declare a ground (--gray, --dark, cta-band, hero) are
   excluded so nothing already designed gets overridden.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --ground-base:   #0F172A;
  --ground-raised: #16213B;
  --ground-deep:   #0B1220;
}

.section--ground-base   { background-color: var(--ground-base) }
.section--ground-deep   { background-color: var(--ground-deep) }

/* Automatic rotation for any main-level section that has not been given a
   ground of its own. :not() keeps hand-placed grounds authoritative. */
main > section:not([class*="ground"]):not(.section--gray):not(.section--dark):not(.cta-band):not(.hero):not(.proof-strip):nth-of-type(3n+1){
  background-color: var(--ground-base);
}
main > section:not([class*="ground"]):not(.section--gray):not(.section--dark):not(.cta-band):not(.hero):not(.proof-strip):nth-of-type(3n+2){
  background-color: var(--ground-deep);
}
main > section:not([class*="ground"]):not(.section--gray):not(.section--dark):not(.cta-band):not(.hero):not(.proof-strip):nth-of-type(3n){
  background-color: var(--ground-raised);
}

/* A hairline where two grounds meet, so the change reads as intentional
   rather than as a rendering seam. */
main > section + section{border-top:1px solid rgba(248,250,252,.045)}
main > section.cta-band + section,
main > .vx-stack + section{border-top:0}

/* ══════════════════════════════════════════════════════════════════════════
   ON-PAGE SECTION RAIL — 8 August 2026

   Lists the stacked sections and marks the one you are in. Built by JS from
   the headings already in the markup, so it cannot drift out of sync with them.
   Real anchors underneath, so keyboard and screen readers get a proper list of
   links, not a decoration.

   Sits inside .vx-stack and is position:fixed, appearing only while the stack
   is on screen. Hidden entirely below 1200px, where there is no room beside
   the content and the page is not pinned anyway.
   ══════════════════════════════════════════════════════════════════════════ */
.vx-rail{
  position:fixed;
  left:max(1.25rem, calc((100vw - var(--container-max, 1280px)) / 2 - 3.5rem));
  top:50%;
  transform:translateY(-50%);
  z-index:40;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  pointer-events:none;
}
.vx-rail.is-visible{opacity:1;visibility:visible;pointer-events:auto}

.vx-rail__list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}

.vx-rail__link{
  display:flex;align-items:center;gap:.7rem;
  padding:.5rem .4rem;min-height:32px;
  text-decoration:none;border-radius:var(--radius-md);
  transition:color .18s ease;
}
.vx-rail__dot{
  flex-shrink:0;width:7px;height:7px;border-radius:50%;
  background:transparent;border:1.5px solid #64789B;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.vx-rail__txt{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:#94A3B8;white-space:nowrap;
  transition:color .18s ease;
}

.vx-rail__link:hover .vx-rail__dot,
.vx-rail__link:focus-visible .vx-rail__dot{border-color:var(--cyan)}
.vx-rail__link:hover .vx-rail__txt,
.vx-rail__link:focus-visible .vx-rail__txt{color:var(--aerospace-white)}

.vx-rail__link.is-active .vx-rail__dot{
  background:var(--cyan);border-color:var(--cyan);transform:scale(1.25);
}
.vx-rail__link.is-active .vx-rail__txt{color:var(--aerospace-white)}

/* No room for a rail beside the content, and below 900px nothing pins. */
@media (max-width:1200px){ .vx-rail{display:none} }
@media (prefers-reduced-motion:reduce){
  .vx-rail,.vx-rail__dot,.vx-rail__txt,.vx-rail__link{transition:none}
  .vx-rail__link.is-active .vx-rail__dot{transform:none}
}

/* "How We Work" kept its own two-column header (heading left, intro right),
   which was the last section still breaking the one-pattern rule: cyan
   eyebrow, heading, copy, stacked and left aligned. */
.method-head{display:block !important;margin-bottom:2.25rem !important}
.method-head__title{margin-bottom:1rem}
.method-head__intro{max-width:68ch}
.method-head__intro p:last-child{margin-bottom:0}

/* The rail sits beside the content column; give it clearance so a long
   label can never run under the text. */
@media (max-width:1450px){
  .vx-rail__txt{display:none}
  .vx-rail__link{justify-content:center;padding:.45rem}
}

/* ── Rail placement, corrected ──
   The first attempt positioned the rail from the viewport edge and let labels
   show whenever the window was wide. At 1533px the container leaves only
   ~126px of margin, so the labels ran under the section content.

   Now the rail is anchored to the container edge and sized to what the margin
   can actually hold: dots only by default, tucked into the gutter, with the
   label revealed on hover or keyboard focus. Full labels appear only when
   there is genuinely room for them. */
.vx-rail{
  left:calc(50% - (var(--max-width) / 2) - 2.75rem);
}
.vx-rail__txt{
  position:absolute;left:1.9rem;
  padding:.3rem .55rem;border-radius:var(--radius-md);
  background:var(--card-bg);border:1px solid var(--card-border);
  opacity:0;pointer-events:none;transform:translateX(-4px);
  transition:opacity .16s ease,transform .16s ease;
}
.vx-rail__link{position:relative}
.vx-rail__link:hover .vx-rail__txt,
.vx-rail__link:focus-visible .vx-rail__txt{opacity:1;transform:translateX(0)}

/* Enough gutter for permanent labels: container + rail + breathing room. */
@media (min-width:1680px){
  .vx-rail{left:calc(50% - (var(--max-width) / 2) - 11rem)}
  .vx-rail__txt{position:static;opacity:1;transform:none;
    background:transparent;border:0;padding:0}
}
@media (max-width:1200px){ .vx-rail{display:none} }

/* The container maxes at 1280px, so a 1280px viewport has no gutter at all and
   the rail was positioned off-screen. It needs ~44px each side plus clearance,
   which means the viewport must exceed roughly 1384px before a rail is honest.
   Hidden below 1400px; the page reads fine without it. */
@media (max-width:1400px){ .vx-rail{display:none !important} }

/* ══════════════════════════════════════════════════════════════════════════
   OUR WORK — the landing after the stack · 8 August 2026

   Five sections stack on navy grounds, then the page releases. "Our Work"
   is the first thing after that release, so it should read as arrival rather
   than as a sixth panel.

   Ground is --neutral-700 #1E2A47: the lightest step in the scale that still
   holds AA. Measured against the panel above (#0F172A) it separates at
   1.26:1, more than double the 1.12:1 the old raised tone gave.

   --neutral-600 #2C3B55 separates harder at 1.58:1 and was the obvious pick
   visually, but it drops tertiary text (#94A3B8) to 4.39:1 — under the 4.5:1
   floor. Rejected on that basis.

   Measured on #1E2A47: heading 13.59:1 · body 9.57:1 · tertiary 5.54:1 ·
   cyan eyebrow 6.88:1.
   ══════════════════════════════════════════════════════════════════════════ */
:root{ --ground-slate: #1E2A47 }
.section--ground-slate{ background-color: var(--ground-slate) }

/* The arrival edge. A copper hairline plus a short lift as the section enters,
   so the release from the stack registers instead of just changing colour. */
/* No box-shadow here. A 60px blur painting over five pinned sticky panels
   recomposites the whole stack every frame and froze the renderer in testing.
   The ground change and the copper edge carry the separation on their own,
   and cost nothing. */
.section--after-stack{
  position:relative;
  border-top:1px solid rgba(232,155,60,.34);
}
.section--after-stack::before{
  content:"";position:absolute;top:-1px;left:0;width:clamp(80px,14vw,180px);height:1px;
  background:var(--accent);
}

/* Raise it above the pinned panels so its shadow falls on them rather than
   the other way round. */
main > .vx-stack{position:relative;z-index:0}
.section--after-stack{z-index:1}

/* `main > .vx-stack + section{border-top:0}` was added earlier to stop a seam
   appearing right after the stack. This section now wants that edge on
   purpose, and that rule outranks a single class. Match its specificity. */
main > .vx-stack + section.section--after-stack{
  border-top:1px solid rgba(232,155,60,.34);
}

/* ══════════════════════════════════════════════════════════════════════════
   STACK · fit on real screens · 9 August 2026

   The panels were tuned against a 941px viewport and only pin when they fit.
   On an 816px window just two of five pinned; the tallest needed 921px of
   viewport, which almost no laptop gives after browser chrome. The effect was
   only working on the screen it happened to be built on.

   Pinned panels now compress: section padding tightens and the internal rhythm
   shrinks, so content fits a ~700px usable viewport instead of demanding 841px.
   Unpinned panels are untouched, so nothing changes on mobile or reduced motion.
   ══════════════════════════════════════════════════════════════════════════ */
.vx-stack--on .vx-stack__panel{
  padding-block: clamp(2rem, 4.5vh, 3.25rem);
}
.vx-stack--on .vx-stack__panel .section-header{
  margin-bottom: clamp(1rem, 2.2vh, 1.75rem);
}
.vx-stack--on .vx-stack__panel .section-header .section-title,
.vx-stack--on .vx-stack__panel .section-header h2{
  margin-bottom: .7rem;
}

/* The two tallest panels carry the most vertical furniture. */
.vx-stack--on .vx-stack__panel[aria-labelledby="paths-heading"] .path-card,
.vx-stack--on .vx-stack__panel[aria-labelledby="why-heading"] .why-card{
  padding-block: 1rem;
}
.vx-stack--on .vx-stack__panel[aria-labelledby="paths-heading"] .why-grid,
.vx-stack--on .vx-stack__panel[aria-labelledby="why-heading"] .why-grid{
  gap: .85rem;
}
.vx-stack--on .vx-stack__panel[aria-labelledby="method-heading"] .steps{
  margin-top: 1.25rem;
}
.vx-stack--on .vx-stack__panel[aria-labelledby="method-heading"] .method-head{
  margin-bottom: 1.25rem !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   STACK · no per-element reveal inside a pinned panel · 9 August 2026

   The scroll-reveal and the stack were fighting. reveal.js sets an inline
   opacity:1 / translateY(0) on each [data-animate] element, but inside a
   pinned panel — whose container carries will-change and gets a transform
   and opacity written every scroll frame — the transition never progressed.
   Computed style stayed at the start value indefinitely: opacity 0,
   translateY(24px). Disabling transitions resolved it to 1 immediately,
   which is how it was diagnosed.

   Effect for a visitor: panels in the stack read as blank. Every screenshot
   taken during development showed it and it was mistaken for mid-scroll
   timing each time.

   The stack already provides the motion. Inside it, content is simply
   present. Outside it, reveal behaves exactly as before.
   ══════════════════════════════════════════════════════════════════════════ */
.vx-stack--on .vx-stack__panel [data-animate],
.vx-stack--on .vx-stack__panel [data-animate="stagger"] > *{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}