/* MODUS — design tokens + base styles
   Per brief: Inter (sans) + JetBrains Mono. No serif. No gradients. Calm. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Light mode (default) — violet accent */
  --bg-base: #FAFAF7;
  --bg-raised: #FFFFFF;
  --bg-muted: #F1F0EC;
  --ink-primary: #141318;
  --ink-secondary: #46434E;
  --ink-muted: #87858E;
  --accent: #6B3FF7;
  --accent-ink: #FFFFFF;
  --accent-muted: #EFE9FE;
  --border: #E5E3DC;
  --border-strong: #D8D5CC;
  --shadow-sm: 0 1px 2px rgba(20, 19, 24, 0.04), 0 1px 3px rgba(20, 19, 24, 0.06);
  --shadow-card: 0 1px 2px rgba(20, 19, 24, 0.04), 0 8px 24px rgba(20, 19, 24, 0.06);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino', Georgia, serif;

  --radius-chip: 4px;
  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-hero: 20px;

  --max-width: 1280px;
  --gutter: 32px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Semantic aliases — lets components reference role, not specific token */
  --text-heading: var(--ink-primary);
  --text-body: var(--ink-primary);
  --text-secondary: var(--ink-secondary);
  --text-muted: var(--ink-muted);
  --text-link: var(--accent);
  --surface-base: var(--bg-base);
  --surface-raised: var(--bg-raised);
  --surface-sunken: var(--bg-muted);
  --interactive-primary: var(--accent);
  --interactive-primary-fg: var(--accent-ink);
  --interactive-muted: var(--accent-muted);
  --interactive-border: var(--border);

  /* Status colors for operational/data panels */
  --status-ok: #4ADE80;
  --status-warn: #F59E0B;
  --status-err: #EF4444;
}

/* Operational dark — for data panels, dashboards, hero motion backdrop */
[data-mode="operational"] {
  --bg: #030712;
  --bg-1: #070B16;
  --bg-2: #0B1220;
  --surface: #0F172A;
  --surface-2: #131C33;
  --line: rgba(148, 163, 184, 0.12);
  --line-strong: rgba(148, 163, 184, 0.22);

  --ink: #F1F5F9;
  --ink-dim: #CBD5E1;
  --ink-muted: #94A3B8;
  --ink-faint: #64748B;

  --accent: #3B82F6;
  --accent-hot: #60A5FA;
  --accent-deep: #1D4ED8;
  --accent-glow: rgba(59, 130, 246, 0.35);
  --accent-soft: rgba(59, 130, 246, 0.10);

  --ok: #4ADE80;
  --warn: #F59E0B;
  --err: #EF4444;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
}

/* Accent variants */
[data-accent="electric"] {
  --accent: #00C46A;
  --accent-muted: #DDF7E9;
}
[data-accent="blue"] {
  --accent: #1E5BFF;
  --accent-muted: #E1EAFF;
}
[data-accent="forest"] {
  --accent: #2A5B3F;
  --accent-muted: #E1ECE5;
}
[data-accent="orange"] {
  --accent: #FF5A1F;
  --accent-muted: #FFEDE2;
}

/* Dark mode */
[data-theme="dark"] {
  --bg-base: #0E0D11;
  --bg-raised: #18171C;
  --bg-muted: #1F1E23;
  --ink-primary: #F2F0F5;
  --ink-secondary: #B6B3BD;
  --ink-muted: #7A7782;
  --accent: #8B68FF;
  --accent-muted: #1F1830;
  --border: #2C2A32;
  --border-strong: #3A3742;
  --shadow-sm: none;
}

[data-theme="dark"][data-accent="electric"] {
  --accent: #2EE08B;
  --accent-muted: #0F2018;
}
[data-theme="dark"][data-accent="blue"] {
  --accent: #5C84FF;
  --accent-muted: #131A30;
}
[data-theme="dark"][data-accent="forest"] {
  --accent: #4A8B66;
  --accent-muted: #15241B;
}
[data-theme="dark"][data-accent="orange"] {
  --accent: #FF6A33;
  --accent-muted: #2A1810;
}

/* Reset + base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

/* Type scale */
.eyebrow,
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mono-num {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum';
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4rem); }
h2 { font-size: clamp(1.875rem, 2.5vw + 1rem, 2.5rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.5rem, 1vw + 1rem, 1.75rem); letter-spacing: -0.01em; line-height: 1.2; }

p { margin: 0; }

.lead {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  line-height: 1.5;
  color: var(--ink-secondary);
  text-wrap: pretty;
  max-width: 60ch;
}

a { color: inherit; text-decoration: none; }

/* Layout */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }
}

section {
  padding: 96px 0;
}

@media (max-width: 768px) {
  section { padding: 72px 0; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 120ms var(--ease);
  white-space: nowrap;
}

.btn:active { transform: scale(0.98); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { filter: brightness(0.95); }

.btn-secondary {
  background: transparent;
  color: var(--ink-primary);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  border-color: var(--ink-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-primary);
  padding: 8px 12px;
}
.btn-ghost:hover { color: var(--accent); }

/* NOTE: previously had `body:has(iframe[src*="cal.eu"]) { overflow: hidden }`
   rules here to lock body scroll while the Cal modal was open. Removed
   because Cal preloads its iframe into the DOM after the first open and
   keeps it there even when the modal is closed - so the :has() selector
   matched forever, leaving the body scroll permanently locked after the
   user closed the modal. Cal's own modal handles backdrop + scroll lock
   internally, so we don't need this. */

/* Nav CTA — distinct from the sitewide Quick Scan buttons.
   Violet-filled, smaller padding, white text. Hover keeps the violet but
   lifts brightness so it reads as a deliberate interaction. .modus-nav__cta
   wins over the generic [data-cal-link] outline rule below thanks to higher
   specificity (.btn.modus-nav__cta = 0,2,0). */
.btn.modus-nav__cta {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  padding: 7px 14px;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 180ms var(--ease), filter 180ms var(--ease), box-shadow 180ms var(--ease);
}
/* Tighter padding/letter-spacing on tablet so 'BOEK QUICK SCAN' doesn't
   crowd against the lang toggle. */
@media (max-width: 1024px) {
  .btn.modus-nav__cta {
    padding: 6px 10px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }
}
/* Mobile: keep CTA + lang toggle + burger all visible. Drop padding,
   font and letter-spacing further so the trio fits across 360-414px
   phones without wrapping or clipping. */
@media (max-width: 767px) {
  .btn.modus-nav__cta {
    padding: 5px 8px;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }
}
/* Tiny phones (<=380px): squeeze even further */
@media (max-width: 380px) {
  .btn.modus-nav__cta {
    padding: 5px 7px;
    font-size: 0.625rem;
    letter-spacing: 0.03em;
  }
}
.btn.modus-nav__cta:hover,
.btn.modus-nav__cta:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
  filter: brightness(1.1);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
  border-color: var(--accent);
}

/* Quick Scan booking buttons — violet outline on hover/focus.
   Applied to all sitewide "Boek Quick Scan" triggers EXCEPT the nav CTA
   (which has its own filled style above). Identified by
   [data-cal-link="modusops/quick-scan"] so styling stays consistent
   whether the button uses btn-ghost, btn-primary or btn-secondary. */
a.btn[data-cal-link="modusops/quick-scan"]:not(.modus-nav__cta),
button.btn[data-cal-link="modusops/quick-scan"]:not(.modus-nav__cta),
a.btn[href*="modusops/quick-scan"]:not(.modus-nav__cta),
button.btn[href*="modusops/quick-scan"]:not(.modus-nav__cta) {
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
}
/* Ghost/secondary Quick Scan CTAs get a violet-on-violet hover (text turns
   accent). Explicitly EXCLUDE .btn-primary because on mobile :hover sticks
   after tap and made the white text turn violet → invisible against the
   violet background. The primary CTA keeps its --accent-ink color on hover
   via the rule below. */
a.btn[data-cal-link="modusops/quick-scan"]:not(.modus-nav__cta):not(.btn-primary):hover,
button.btn[data-cal-link="modusops/quick-scan"]:not(.modus-nav__cta):not(.btn-primary):hover,
a.btn[href*="modusops/quick-scan"]:not(.modus-nav__cta):not(.btn-primary):hover,
button.btn[href*="modusops/quick-scan"]:not(.modus-nav__cta):not(.btn-primary):hover,
a.btn[data-cal-link="modusops/quick-scan"]:not(.modus-nav__cta):not(.btn-primary):focus-visible,
button.btn[data-cal-link="modusops/quick-scan"]:not(.modus-nav__cta):not(.btn-primary):focus-visible,
a.btn[href*="modusops/quick-scan"]:not(.modus-nav__cta):not(.btn-primary):focus-visible,
button.btn[href*="modusops/quick-scan"]:not(.modus-nav__cta):not(.btn-primary):focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
}
/* Primary CTA: keep white text on violet bg, even on hover/focus/sticky-tap */
a.btn-primary[data-cal-link="modusops/quick-scan"],
button.btn-primary[data-cal-link="modusops/quick-scan"],
a.btn-primary[href*="modusops/quick-scan"],
button.btn-primary[href*="modusops/quick-scan"],
a.btn-primary[data-cal-link="modusops/quick-scan"]:hover,
button.btn-primary[data-cal-link="modusops/quick-scan"]:hover,
a.btn-primary[href*="modusops/quick-scan"]:hover,
button.btn-primary[href*="modusops/quick-scan"]:hover,
a.btn-primary[data-cal-link="modusops/quick-scan"]:focus,
button.btn-primary[data-cal-link="modusops/quick-scan"]:focus,
a.btn-primary[href*="modusops/quick-scan"]:focus,
button.btn-primary[href*="modusops/quick-scan"]:focus,
a.btn-primary[data-cal-link="modusops/quick-scan"]:focus-visible,
button.btn-primary[data-cal-link="modusops/quick-scan"]:focus-visible,
a.btn-primary[href*="modusops/quick-scan"]:focus-visible,
button.btn-primary[href*="modusops/quick-scan"]:focus-visible {
  color: var(--accent-ink) !important;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn .price {
  font-family: var(--font-mono);
  font-weight: 500;
  opacity: 0.85;
  font-size: 0.875rem;
  padding-left: 4px;
  border-left: 1px solid currentColor;
  margin-left: 4px;
}

/* Cards */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
}

[data-theme="light"] .card,
:root:not([data-theme="dark"]) .card {
  box-shadow: var(--shadow-sm);
}

/* Services cards lift more so the section reads as a block */
#diensten .card {
  box-shadow: 0 1px 2px rgba(20,19,24,0.04), 0 8px 24px rgba(20,19,24,0.06);
}
[data-theme="dark"] #diensten .card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.08);
}

@media (max-width: 640px) {
  .card { padding: 24px; }
}

/* Mono chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--accent-muted);
  color: var(--accent);
  border-radius: var(--radius-chip);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

[data-theme="dark"] .chip {
  color: var(--accent);
}

.chip-neutral {
  background: var(--bg-muted);
  color: var(--ink-secondary);
}

/* Section header pattern */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 56px;
  max-width: 640px;
}

.section-head .eyebrow {
  color: var(--ink-muted);
}

.section-head h2 + p {
  color: var(--ink-secondary);
  font-size: 1.125rem;
  text-wrap: pretty;
  max-width: 60ch;
}

/* Grids */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

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

/* Asymmetric services grid: 8/4 + 8/4 */
.grid-services {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

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

/* Utility */
.muted { color: var(--ink-muted); }
.secondary { color: var(--ink-secondary); }
.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

/* Focus + selection */
::selection {
  background: var(--accent-muted);
  color: var(--ink-primary);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Scroll reveal — used sparingly */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Hide-on-mobile utility — !important overrides inline display styles set by JSX */
@media (max-width: 767px) {
  .hide-mobile,
  .inline-nav,
  .nav-links,
  .desktop-nav { display: none !important; }
}

/* Mobile nav grid: force 'auto 1fr auto' so the right-stack
   (CTA + lang + burger) sits in a content-sized column and never
   overflows into the logo. Inline style on .modus-nav__grid is
   '1fr auto 1fr' which on narrow phones split col 3 to 50% and
   pushed the lang chip back over the logo. */
@media (max-width: 767px) {
  .modus-nav__grid {
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
  }
}

/* Hamburger only on mobile */
.nav-burger,
.hamburger,
.mobile-menu-toggle { display: none; }
@media (max-width: 767px) {
  .nav-burger,
  .hamburger,
  .mobile-menu-toggle { display: inline-flex !important; }
}
@media (min-width: 768px) {
  .nav-burger,
  .hamburger,
  .mobile-menu-toggle { display: none !important; }
}

/* Prevent any nav child from overflowing the viewport on small screens */
@media (max-width: 767px) {
  header > .container { overflow: visible; }
  header > .container > * { min-width: 0; }
}

/* Aanpak — clean hierarchy layout
   Eyebrow + H2 + lede (section-head) → signature line → 3 step columns
   → pull-quote closer → 3 product cards. Each block has its own air,
   no more wall-of-paragraphs. */
.aanpak-signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 1.8vw + 0.5rem, 2rem);
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--ink-primary);
  max-width: 760px;
  margin: 56px 0 32px;
}
.aanpak-signature strong {
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 600;
}

.aanpak-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: stretch;
  margin: 0 0 24px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.aanpak-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}
.aanpak-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}
.aanpak-step__body { flex: 1; }
.aanpak-step__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.14em;
}
.aanpak-step__title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 4px 0 4px;
  color: var(--ink-primary);
  line-height: 1.2;
}
.aanpak-step__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-secondary);
  margin: 0;
}

.aanpak-closer {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: clamp(1.375rem, 1.6vw + 0.5rem, 1.875rem) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.005em !important;
  color: var(--accent) !important;
  margin: 0 !important;
  max-width: 12ch;
  align-self: end;
  text-align: right;
  padding-bottom: 4px;
}

@media (max-width: 1024px) {
  .aanpak-row { grid-template-columns: 1fr; gap: 20px; }
  .aanpak-closer { align-self: start; text-align: left; max-width: none; margin: 8px 0 0 !important; }
}
@media (max-width: 768px) {
  .aanpak-signature { margin: 32px 0 20px; }
  .aanpak-steps { grid-template-columns: 1fr; gap: 24px; }
  .aanpak-row { padding-top: 20px; }
  .aanpak-closer { margin: 8px 0 0 !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .aanpak-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Italic display text — slightly wider letter-spacing for readability.
   Instrument Serif italic was rendering tighter than the upright weight.
   Targets the strap/display classes used across pages + inline italic. */
.strap,
.cat-strap,
.ty-strap,
.contact-wrap .strap,
.section-head h2 + .strap,
[style*="font-style: italic"] {
  letter-spacing: 0.012em !important;
}

/* ============================================================
   Mobile pass — narrow-screen overrides for layouts that were
   set up for desktop only (static pages + hero strip).
   ============================================================ */
@media (max-width: 768px) {
  :root { --gutter: 18px; }

  /* Hero h1 — keep dramatic but not overflowing. Min bumped to 2rem (32px)
     so the line reads bold on every phone width, not feebly small. */
  #top h1 { font-size: clamp(2rem, 8vw + 0.25rem, 3rem) !important; line-height: 1.1 !important; }

  /* Hero buttons — full-width stack */
  #top .btn { width: 100%; justify-content: center; }
  #top .btn .price { font-size: 0.8125rem; }

  /* Services static page (.svc grid) */
  .svc { grid-template-columns: 1fr !important; gap: 16px !important; padding: 32px 20px !important; }

  /* Pricing strip & approach grids */
  .pricing,
  .principles,
  .vs,
  .loop-vis { grid-template-columns: 1fr !important; }

  /* Timeline rows on /approach */
  .tl-row { grid-template-columns: 1fr !important; gap: 6px !important; padding: 18px 0 !important; }
  .tl-tag { text-align: left !important; }

  /* About page grids */
  .about-grid,
  .contact { grid-template-columns: 1fr !important; gap: 32px !important; }
  .stats { grid-template-columns: 1fr 1fr !important; }
  .field-row { grid-template-columns: 1fr !important; }

  /* Section heads breathe */
  .section-hd { display: block !important; }
  .section-hd .meta { display: none !important; }
}

@media (max-width: 480px) {
  :root { --gutter: 14px; }

  /* Stats 1-up on tiny phones so numbers don't crash */
  .stats { grid-template-columns: 1fr !important; }

  /* Tiny phones: still keep h1 above 30px so the headline lands. */
  #top h1 { font-size: clamp(1.875rem, 9vw, 2.5rem) !important; }
}

/* Nav CTA copy: show "Quick" word on desktop, collapse to "Boek Scan" on
   mobile so the button stays compact alongside the lang chip + burger.
   Applies to both the React nav (.nav-cta-q) and static-page nav
   (.qs-nav__cta-q). */
.qs-nav__cta-q, .nav-cta-q { display: inline; }
@media (max-width: 767px) {
  .qs-nav__cta-q, .nav-cta-q { display: none; }
}

/* Static-page CTA spacing fix: every static page declares
   .qs-nav__cta as `display: inline-flex` with no gap, which strips
   whitespace between flex items. Result on pages with the
   <span class="qs-nav__cta-q">Quick </span> wrapping:
   "BoekQuickScan" without spaces. Force inline-block so the literal
   spaces between text nodes render normally. */
.qs-nav .qs-nav__cta { display: inline-block !important; }

/* Shared NL/EN language toggle for static pages. Matches the React
   LangToggle visual in chrome.jsx so nav + footer feel identical across
   the site. Click handler wired up in static-nav-mobile.js based on the
   <html data-lang="..." data-lang-en="..."> attributes on each page. */
.modus-lang {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  background: var(--bg-raised);
}
.modus-lang button {
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--ink-secondary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.modus-lang button[aria-pressed="true"] {
  background: var(--ink-primary);
  color: var(--bg-base);
}
.modus-lang button:hover:not([aria-pressed="true"]) {
  color: var(--accent);
}