/*
  Vantora professional polish layer.
  Loaded after the inline page styles so light mode feels calmer and more boardroom-ready.
*/
:root {
  --vantora-ink: #15111c;
  --vantora-muted: #433b4d;
  --vantora-subtle: #6c6474;
  --vantora-purple: #6f00ba;
  --vantora-purple-deep: #3f0f6f;
  --vantora-line: rgba(34, 27, 44, 0.13);
  --vantora-panel: rgba(255, 255, 255, 0.78);
  --vantora-panel-strong: rgba(255, 255, 255, 0.91);
  --vantora-purple-wash: rgba(156, 0, 255, 0.045);
  --vantora-shadow: 0 24px 60px rgba(28, 22, 38, 0.12);
  --vantora-shadow-soft: 0 14px 34px rgba(28, 22, 38, 0.085);
}

html {
  background: #080b12;
}

body {
  letter-spacing: 0;
}

body,
p,
li,
a,
span,
strong,
div {
  text-wrap: pretty;
}

.hero-title,
.agency-hero-title,
h1,
h2 {
  text-wrap: balance;
}

.glass,
.service-card,
.brief-card {
  border-radius: 12px !important;
}

.section-border {
  scroll-margin-top: 120px;
}

.gradient-button {
  font-weight: 700;
  letter-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

nav .max-w-6xl,
nav .max-w-7xl {
  max-width: 1220px;
}

.nav-link {
  font-weight: 700;
  letter-spacing: 0;
}

.section-kicker,
.agency-eyebrow {
  letter-spacing: 0.16em;
}

.hero-gradient {
  min-height: auto !important;
}

.agency-hero-title {
  max-width: 760px;
}

.route-links .glass,
.answer-link,
.service-card,
#nis2-vragen .glass {
  height: 100%;
}

#nis2-vragen .glass,
.answer-link {
  display: block;
}

.answer-link strong,
#nis2-vragen strong,
.service-card h3 {
  text-wrap: balance;
}

.brief-card {
  margin-top: 10px;
}

.route-links .glass,
.answer-link,
#wat-is-nis2 .glass,
#nis2-vragen .glass,
.service-card,
.brief-card {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.route-links .glass:hover,
.answer-link:hover,
#wat-is-nis2 .glass:hover,
#nis2-vragen .glass:hover {
  transform: translateY(-1px);
}

.agency-trust-strip {
  backdrop-filter: blur(18px) saturate(118%);
}

.agency-trust-item {
  min-height: 98px;
}

@media (prefers-color-scheme: light) {
  html {
    background: #f5f1f8;
  }

  body {
    color: var(--vantora-ink);
    background:
      radial-gradient(circle at 13% -14%, rgba(156, 0, 255, 0.090), transparent 35rem),
      radial-gradient(circle at 92% 3%, rgba(156, 0, 255, 0.040), transparent 28rem),
      linear-gradient(180deg, #fbfafc 0%, #f5f1f8 44%, #eee8f4 100%) !important;
  }

  body::before {
    opacity: 0.18 !important;
    background-size: 72px 72px !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent 62%) !important;
  }

  .page-gradient,
  .hero-gradient,
  .editorial-hero {
    background:
      radial-gradient(circle at 12% -10%, rgba(156, 0, 255, 0.095), transparent 36rem),
      radial-gradient(circle at 76% 8%, rgba(156, 0, 255, 0.032), transparent 30rem),
      linear-gradient(180deg, #fbfafc 0%, #f5f1f8 52%, #eee8f4 100%) !important;
  }

  .hero-gradient {
    min-height: min(780px, 88vh) !important;
    box-shadow: inset 0 -1px 0 var(--vantora-line);
  }

  .law-banner {
    color: #2d2636 !important;
    background: rgba(249, 246, 252, 0.92) !important;
    border-bottom-color: rgba(37, 31, 48, 0.12) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
  }

  nav {
    background: rgba(250, 248, 252, 0.90) !important;
    border-bottom-color: rgba(37, 31, 48, 0.105) !important;
    box-shadow: 0 14px 36px rgba(28, 22, 38, 0.075) !important;
  }

  .nav-link {
    color: #3b3345 !important;
  }

  .nav-link:hover,
  .nav-link.is-active {
    color: #0f0b16 !important;
  }

  h1,
  h2,
  h3,
  .timeline-title,
  .brief-value,
  .agency-trust-item strong {
    color: var(--vantora-ink) !important;
  }

  p,
  li,
  .text-zinc-300,
  .text-zinc-400 {
    color: var(--vantora-muted) !important;
  }

  .text-zinc-500,
  footer {
    color: var(--vantora-subtle) !important;
  }

  .text-purple-400,
  .section-kicker,
  .agency-eyebrow {
    color: var(--vantora-purple) !important;
  }

  .glass,
  .brief-card,
  .service-card {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 245, 251, 0.76)),
      linear-gradient(180deg, var(--vantora-purple-wash), transparent 72%) !important;
    border-color: rgba(34, 27, 44, 0.14) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.90),
      var(--vantora-shadow-soft) !important;
    backdrop-filter: blur(16px) saturate(110%) !important;
  }

  .glass:hover,
  .service-card:hover {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 245, 251, 0.82)),
      linear-gradient(180deg, rgba(156, 0, 255, 0.055), transparent 72%) !important;
    border-color: rgba(111, 0, 186, 0.19) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      var(--vantora-shadow) !important;
  }

  .purple-glow {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 20px 52px rgba(61, 43, 80, 0.11) !important;
  }

  .liquid-panel::before {
    background:
      linear-gradient(126deg, rgba(255, 255, 255, 0.64), transparent 36%, rgba(156, 0, 255, 0.042) 74%, rgba(255, 255, 255, 0.30)) !important;
    opacity: 0.34 !important;
  }

  .agency-trust-strip {
    border-color: rgba(34, 27, 44, 0.15) !important;
    background: rgba(34, 27, 44, 0.10) !important;
    box-shadow: 0 16px 36px rgba(28, 22, 38, 0.075) !important;
  }

  .agency-trust-item {
    background: rgba(255, 255, 255, 0.72) !important;
  }

  .agency-trust-item span,
  .executive-note,
  .brief-label {
    color: #61566c !important;
  }

  .section-border,
  footer {
    border-color: var(--vantora-line) !important;
  }

  .section-border:nth-of-type(even) {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  .gradient-button {
    background: linear-gradient(135deg, #3d0f6d 0%, #6700ad 52%, #8e00e8 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.20),
      0 14px 30px rgba(111, 0, 186, 0.18) !important;
  }

  .mobile-dock {
    background: rgba(250, 247, 252, 0.90) !important;
    border-color: rgba(37, 31, 48, 0.14) !important;
    box-shadow: 0 16px 42px rgba(33, 25, 44, 0.16) !important;
  }

  .mobile-dock a {
    color: #362d40 !important;
    background: rgba(255, 255, 255, 0.70) !important;
    border-color: rgba(116, 0, 200, 0.11) !important;
  }

  .mobile-dock a[aria-current='true'] {
    color: #321466 !important;
    background: linear-gradient(135deg, rgba(156, 0, 255, 0.13), rgba(255, 255, 255, 0.48)) !important;
  }

  .timeline-step::before {
    background: var(--vantora-purple) !important;
    box-shadow: 0 0 0 6px rgba(116, 0, 200, 0.14) !important;
  }

  .timeline-step::after {
    background: rgba(40, 30, 52, 0.18) !important;
  }

  .bg-white,
  .bg-zinc-50,
  .bg-zinc-100 {
    background-color: rgba(255, 255, 255, 0.72) !important;
  }

  .border-white\/5,
  .border-white\/10,
  .border-zinc-200,
  .border-zinc-800 {
    border-color: var(--vantora-line) !important;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background:
      radial-gradient(circle at 12% -10%, rgba(156, 0, 255, 0.085), transparent 34rem),
      radial-gradient(circle at 84% 4%, rgba(156, 0, 255, 0.034), transparent 30rem),
      linear-gradient(180deg, #fbfafc 0%, #f5f1f8 46%, #eee8f4 100%) !important;
  }

  body::before {
    opacity: 0.12 !important;
  }

  .hero-gradient,
  .page-gradient {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.08) 28%, transparent 62%),
      radial-gradient(circle at 15% 0%, rgba(156, 0, 255, 0.092), transparent 34rem),
      radial-gradient(circle at 86% 10%, rgba(156, 0, 255, 0.034), transparent 30rem),
      linear-gradient(180deg, #fbfafc 0%, #f5f1f8 50%, #eee8f4 100%) !important;
  }

  .law-banner {
    background: rgba(249, 247, 251, 0.94) !important;
    color: #292232 !important;
    border-color: rgba(34, 27, 44, 0.11) !important;
  }

  nav {
    background: rgba(250, 248, 252, 0.88) !important;
    backdrop-filter: blur(20px) saturate(112%) !important;
  }

  h1,
  h2,
  h3 {
    color: #15111c !important;
  }

  p,
  li,
  .text-zinc-300,
  .text-zinc-400 {
    color: #433b4d !important;
  }

  .glass,
  .brief-card,
  .service-card,
  .answer-link,
  .route-links .glass {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.91), rgba(248, 245, 251, 0.75)),
      linear-gradient(180deg, rgba(156, 0, 255, 0.038), transparent 72%) !important;
    border-color: rgba(34, 27, 44, 0.14) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.90),
      0 14px 34px rgba(28, 22, 38, 0.085) !important;
  }

  .brief-card,
  #status .glass,
  #contact > div,
  #leveranciers .glass {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(246, 242, 250, 0.78)),
      radial-gradient(circle at 82% 8%, rgba(156, 0, 255, 0.052), transparent 18rem) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 24px 58px rgba(28, 22, 38, 0.105) !important;
  }

  .liquid-panel::before {
    background:
      linear-gradient(128deg, rgba(255, 255, 255, 0.58), transparent 38%, rgba(156, 0, 255, 0.035) 73%, rgba(255, 255, 255, 0.24)) !important;
    opacity: 0.26 !important;
  }

  .agency-trust-strip {
    background: rgba(34, 27, 44, 0.105) !important;
    border-color: rgba(34, 27, 44, 0.145) !important;
  }

  .agency-trust-item {
    background: rgba(255, 255, 255, 0.72) !important;
  }

  .agency-trust-item strong,
  .brief-value {
    color: #15111c !important;
  }

  .section-border:nth-of-type(even) {
    background: rgba(255, 255, 255, 0.11) !important;
  }

  .mobile-dock {
    background: rgba(250, 248, 252, 0.88) !important;
    border-color: rgba(34, 27, 44, 0.15) !important;
  }

  .mobile-dock a {
    background: rgba(255, 255, 255, 0.66) !important;
  }
}

@media (prefers-color-scheme: light) and (min-width: 1024px) {
  nav .max-w-6xl,
  nav .max-w-7xl {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .hero-gradient {
    padding-top: 164px !important;
    padding-bottom: 88px !important;
  }

  .section-border {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .agency-hero-title {
    font-size: clamp(52px, 4.35vw, 66px) !important;
    line-height: 1.06 !important;
  }

  .brief-card {
    max-width: 410px !important;
    padding: 30px !important;
  }

  #wat-is-nis2 {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }

  #wat-is-nis2 > div {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    align-items: start !important;
  }

  #wat-is-nis2 > div > div:first-child {
    max-width: 620px !important;
  }

  #wat-is-nis2 h2 {
    font-size: clamp(32px, 2.8vw, 42px) !important;
    line-height: 1.08 !important;
    overflow-wrap: break-word !important;
  }

  #nis2-vragen .glass {
    padding: 24px !important;
  }

  #diensten .service-card {
    padding: 34px !important;
  }
}

@media (max-width: 767px) {
  .hero-gradient,
  .editorial-hero {
    padding-top: calc(122px + env(safe-area-inset-top)) !important;
    padding-bottom: 64px !important;
  }

  h1,
  .hero-title,
  .agency-hero-title {
    font-size: clamp(31px, 8.2vw, 36px) !important;
    line-height: 1.08 !important;
  }

  h2 {
    font-size: clamp(26px, 7.2vw, 32px) !important;
    line-height: 1.12 !important;
  }

  p {
    line-height: 1.62;
  }

  .glass,
  .service-card,
  .brief-card {
    border-radius: 12px !important;
  }

  .section-border {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .mobile-dock {
    border-radius: 24px !important;
  }

  .mobile-dock a {
    min-height: 56px;
    border-radius: 14px !important;
  }

  .agency-eyebrow,
  .section-kicker {
    letter-spacing: 0.14em !important;
  }

  .route-links {
    display: none !important;
  }

  .service-card {
    padding-bottom: 68px !important;
  }
}

/*
  Executive light-mode overhaul.
  Keep the glass language, but move the site away from bright AI lavender into a calmer
  security-agency palette with firmer surfaces, cleaner rhythm and stronger hierarchy.
*/
:root {
  --executive-ink: #17121f;
  --executive-heading: #100b18;
  --executive-muted: #3f3749;
  --executive-soft: #655d70;
  --executive-bg: #eee8f4;
  --executive-bg-deep: #e4dceb;
  --executive-panel: rgba(255, 255, 255, 0.68);
  --executive-panel-strong: rgba(255, 255, 255, 0.82);
  --executive-line: rgba(32, 24, 44, 0.14);
  --executive-line-strong: rgba(32, 24, 44, 0.20);
  --executive-purple: #6500a8;
  --executive-purple-deep: #39105f;
  --executive-shadow: 0 20px 48px rgba(29, 22, 41, 0.12);
  --executive-shadow-strong: 0 30px 76px rgba(29, 22, 41, 0.16);
}

.gradient-button,
.law-banner a,
.service-card-cta::after,
.answer-link::after {
  transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease, background 170ms ease;
}

.gradient-button:hover,
.law-banner a:hover {
  transform: translateY(-1px);
}

@media (prefers-color-scheme: light) {
  html {
    background: var(--executive-bg-deep) !important;
  }

  body {
    color: var(--executive-ink) !important;
    background:
      radial-gradient(circle at 15% -12%, rgba(156, 0, 255, 0.105), transparent 34rem),
      radial-gradient(circle at 84% 8%, rgba(57, 16, 95, 0.072), transparent 31rem),
      linear-gradient(180deg, #f3eef8 0%, var(--executive-bg) 42%, var(--executive-bg-deep) 100%) !important;
  }

  body::before {
    opacity: 0.10 !important;
    background:
      linear-gradient(rgba(32, 24, 44, 0.052) 1px, transparent 1px),
      linear-gradient(90deg, rgba(32, 24, 44, 0.044) 1px, transparent 1px) !important;
    background-size: 72px 72px !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.16), transparent 58%) !important;
  }

  .page-gradient,
  .hero-gradient,
  .editorial-hero {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.06) 34%, transparent 72%),
      radial-gradient(circle at 14% -6%, rgba(156, 0, 255, 0.112), transparent 34rem),
      radial-gradient(circle at 82% 12%, rgba(45, 17, 72, 0.078), transparent 31rem),
      linear-gradient(180deg, #f3eef8 0%, var(--executive-bg) 48%, var(--executive-bg-deep) 100%) !important;
  }

  .hero-gradient {
    box-shadow:
      inset 0 -1px 0 var(--executive-line),
      inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
  }

  .law-banner {
    background: rgba(236, 229, 244, 0.92) !important;
    color: #241d2e !important;
    border-bottom-color: var(--executive-line) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  }

  .law-banner a {
    background: linear-gradient(135deg, #39105f 0%, #6500a8 58%, #8a00de 100%) !important;
    box-shadow: 0 10px 24px rgba(101, 0, 168, 0.18) !important;
  }

  .law-banner > a:only-child {
    display: inline !important;
    padding: 0 !important;
    color: #241d2e !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  nav {
    background:
      linear-gradient(180deg, rgba(248, 244, 251, 0.92), rgba(238, 231, 246, 0.82)) !important;
    border-bottom-color: var(--executive-line) !important;
    box-shadow:
      0 18px 48px rgba(29, 22, 41, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(22px) saturate(116%) !important;
  }

  .nav-link {
    color: #30283c !important;
    font-weight: 760 !important;
  }

  .nav-link:hover,
  .nav-link.is-active {
    color: var(--executive-heading) !important;
  }

  h1,
  h2,
  h3,
  .timeline-title,
  .agency-trust-item strong,
  .brief-value {
    color: var(--executive-heading) !important;
  }

  p,
  li,
  .text-zinc-300,
  .text-zinc-400 {
    color: var(--executive-muted) !important;
  }

  .text-zinc-500,
  .agency-trust-item span,
  .executive-note,
  .brief-label,
  footer {
    color: var(--executive-soft) !important;
  }

  .text-purple-400,
  .section-kicker,
  .agency-eyebrow,
  .answer-link::after,
  .service-card-cta {
    color: var(--executive-purple) !important;
  }

  .agency-eyebrow::before {
    background: rgba(101, 0, 168, 0.42) !important;
  }

  .glass,
  .brief-card,
  .service-card,
  .answer-link,
  .route-links .glass {
    background:
      linear-gradient(145deg, var(--executive-panel-strong), rgba(244, 239, 249, 0.58)),
      radial-gradient(circle at 88% 10%, rgba(156, 0, 255, 0.045), transparent 18rem) !important;
    border-color: var(--executive-line) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(32, 24, 44, 0.025),
      var(--executive-shadow) !important;
    backdrop-filter: blur(18px) saturate(112%) !important;
  }

  .brief-card,
  .purple-glow,
  #status .glass,
  #contact > div,
  #leveranciers .glass,
  aside.glass,
  .toc {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(242, 236, 248, 0.62)),
      radial-gradient(circle at 84% 8%, rgba(156, 0, 255, 0.060), transparent 20rem) !important;
    border-color: var(--executive-line-strong) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      var(--executive-shadow-strong) !important;
  }

  .glass:hover,
  .service-card:hover,
  .answer-link:hover,
  .route-links .glass:hover {
    border-color: rgba(101, 0, 168, 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 30px 78px rgba(29, 22, 41, 0.17) !important;
  }

  .liquid-panel::before {
    background:
      linear-gradient(128deg, rgba(255, 255, 255, 0.55), transparent 36%, rgba(156, 0, 255, 0.050) 72%, rgba(255, 255, 255, 0.22)) !important;
    opacity: 0.24 !important;
  }

  .gradient-button {
    background: linear-gradient(135deg, var(--executive-purple-deep) 0%, var(--executive-purple) 56%, #8a00de 100%) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.20),
      0 16px 34px rgba(101, 0, 168, 0.20) !important;
  }

  .agency-trust-strip {
    background: rgba(32, 24, 44, 0.12) !important;
    border-color: var(--executive-line-strong) !important;
    box-shadow: var(--executive-shadow) !important;
  }

  .agency-trust-item {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.70), rgba(244, 239, 249, 0.48)) !important;
  }

  .section-border,
  footer {
    border-color: var(--executive-line) !important;
  }

  .section-border:nth-of-type(even) {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)) !important;
  }

  .mobile-dock {
    background:
      linear-gradient(145deg, rgba(247, 242, 251, 0.86), rgba(232, 224, 242, 0.76)) !important;
    border-color: var(--executive-line-strong) !important;
    box-shadow:
      0 18px 52px rgba(29, 22, 41, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(24px) saturate(118%) !important;
  }

  .mobile-dock a {
    color: #30283c !important;
    background: rgba(255, 255, 255, 0.58) !important;
    border-color: rgba(101, 0, 168, 0.12) !important;
  }

  .mobile-dock a[aria-current='true'] {
    color: #2d104f !important;
    background:
      linear-gradient(135deg, rgba(156, 0, 255, 0.14), rgba(255, 255, 255, 0.50)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(101, 0, 168, 0.16),
      0 8px 22px rgba(29, 22, 41, 0.10) !important;
  }

  .mobile-dock a[aria-current='true']::before,
  .timeline-step::before {
    background: var(--executive-purple) !important;
  }

  .timeline-step::before {
    box-shadow: 0 0 0 6px rgba(101, 0, 168, 0.15) !important;
  }

  .timeline-step::after {
    background: rgba(32, 24, 44, 0.18) !important;
  }
}

@media (prefers-color-scheme: light) and (min-width: 1024px) {
  nav .max-w-6xl,
  nav .max-w-7xl {
    max-width: 1260px !important;
  }

  .hero-gradient {
    padding-top: 172px !important;
    padding-bottom: 104px !important;
  }

  .hero-gradient > div,
  .editorial-hero > div,
  .section-border > div {
    max-width: 1180px;
  }

  .agency-hero-title,
  .hero-title,
  h1 {
    letter-spacing: 0 !important;
  }

  .brief-card {
    margin-top: 18px !important;
  }

  .editorial-hero .law-hero-title {
    max-width: 600px !important;
    font-size: clamp(44px, 4.05vw, 60px) !important;
    line-height: 1.055 !important;
  }

  .editorial-hero .law-hero-copy {
    max-width: 50ch !important;
  }
}

@media (max-width: 767px) {
  .hero-gradient,
  .editorial-hero {
    padding-top: calc(166px + env(safe-area-inset-top)) !important;
    padding-bottom: 56px !important;
  }

  .section-border {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .hero-gradient .agency-eyebrow {
    display: flex !important;
    margin-top: 18px !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  .hero-gradient .agency-eyebrow::before {
    display: none !important;
  }

  .law-banner > a:only-child {
    display: inline !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: normal !important;
  }

  .glass,
  .brief-card,
  .service-card {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 14px 34px rgba(0, 0, 0, 0.14) !important;
  }
}

/*
  Premium agency pass.
  This final layer deliberately tones down the bright lavender wash and makes the
  site feel like a serious security advisory firm: calmer light mode, stronger
  hierarchy, cleaner alignment, and less visual clutter.
*/
:root {
  --premium-ink: #17131e;
  --premium-heading: #100c18;
  --premium-muted: #403849;
  --premium-soft: #6a6172;
  --premium-paper: #f1edf5;
  --premium-paper-deep: #e8e1ed;
  --premium-panel: rgba(255, 255, 255, 0.74);
  --premium-panel-strong: rgba(255, 255, 255, 0.88);
  --premium-line: rgba(31, 25, 42, 0.15);
  --premium-line-soft: rgba(31, 25, 42, 0.10);
  --premium-purple: #6900ad;
  --premium-purple-deep: #351052;
  --premium-shadow: 0 18px 42px rgba(31, 25, 42, 0.11);
  --premium-shadow-strong: 0 28px 68px rgba(31, 25, 42, 0.15);
}

nav a,
.gradient-button,
.glass,
.service-card,
.answer-link,
.mobile-dock a {
  -webkit-tap-highlight-color: transparent;
}

.agency-hero-title,
.law-hero-title {
  font-weight: 440 !important;
  letter-spacing: 0 !important;
}

.law-hero-copy,
.hero-gradient p,
.editorial-hero p {
  max-width: 58ch;
}

.section-kicker,
.agency-eyebrow,
.status-label,
.brief-label {
  font-weight: 820 !important;
}

.service-card,
.answer-link,
#nis2-vragen .glass {
  min-height: 100%;
}

@media (prefers-color-scheme: dark) {
  .page-gradient,
  .hero-gradient,
  .editorial-hero {
    background:
      radial-gradient(circle at 16% -8%, rgba(156, 0, 255, 0.13), transparent 34rem),
      radial-gradient(circle at 86% 12%, rgba(45, 212, 191, 0.035), transparent 28rem),
      linear-gradient(180deg, #070a0f 0%, #0b1018 48%, #070b11 100%) !important;
  }

  .glass,
  .brief-card,
  .service-card,
  .answer-link {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.026)),
      radial-gradient(circle at 92% 0%, rgba(156, 0, 255, 0.045), transparent 18rem) !important;
    border-color: rgba(255, 255, 255, 0.105) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.11),
      0 18px 46px rgba(0, 0, 0, 0.20) !important;
  }

  nav {
    background: rgba(7, 10, 15, 0.84) !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.20) !important;
  }
}

@media (prefers-color-scheme: light) {
  html {
    background: var(--premium-paper-deep) !important;
  }

  body {
    color: var(--premium-ink) !important;
    background:
      radial-gradient(circle at 18% -10%, rgba(156, 0, 255, 0.085), transparent 35rem),
      radial-gradient(circle at 88% 6%, rgba(53, 16, 82, 0.050), transparent 31rem),
      linear-gradient(180deg, #f6f3f8 0%, var(--premium-paper) 46%, var(--premium-paper-deep) 100%) !important;
  }

  body::before {
    opacity: 0.065 !important;
    background:
      linear-gradient(rgba(31, 25, 42, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31, 25, 42, 0.045) 1px, transparent 1px) !important;
    background-size: 84px 84px !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.14), transparent 54%) !important;
  }

  .page-gradient,
  .hero-gradient,
  .editorial-hero {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.08) 34%, transparent 74%),
      radial-gradient(circle at 16% -8%, rgba(156, 0, 255, 0.090), transparent 34rem),
      radial-gradient(circle at 86% 10%, rgba(53, 16, 82, 0.048), transparent 31rem),
      linear-gradient(180deg, #f6f3f8 0%, var(--premium-paper) 48%, var(--premium-paper-deep) 100%) !important;
  }

  .hero-gradient,
  .editorial-hero {
    box-shadow:
      inset 0 -1px 0 var(--premium-line-soft),
      inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  }

  .law-banner {
    background: rgba(242, 237, 247, 0.94) !important;
    color: #241d2d !important;
    border-bottom-color: var(--premium-line-soft) !important;
    box-shadow: none !important;
  }

  .law-banner a {
    background: linear-gradient(135deg, var(--premium-purple-deep), var(--premium-purple) 62%, #8a00de) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    box-shadow: 0 10px 22px rgba(105, 0, 173, 0.16) !important;
  }

  .law-banner > a:only-child {
    color: #241d2d !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  nav {
    background:
      linear-gradient(180deg, rgba(248, 245, 251, 0.94), rgba(238, 232, 245, 0.86)) !important;
    border-bottom-color: var(--premium-line-soft) !important;
    box-shadow:
      0 16px 42px rgba(31, 25, 42, 0.09),
      inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
    backdrop-filter: blur(24px) saturate(112%) !important;
  }

  .nav-link {
    color: #332b3e !important;
  }

  .nav-link:hover,
  .nav-link.is-active {
    color: var(--premium-heading) !important;
  }

  h1,
  h2,
  h3,
  .timeline-title,
  .status-value,
  .brief-value,
  .agency-trust-item strong {
    color: var(--premium-heading) !important;
  }

  p,
  li,
  .text-zinc-300,
  .text-zinc-400 {
    color: var(--premium-muted) !important;
  }

  .text-zinc-500,
  .agency-trust-item span,
  .executive-note,
  .brief-label,
  .status-label,
  footer {
    color: var(--premium-soft) !important;
  }

  .text-purple-400,
  .section-kicker,
  .agency-eyebrow,
  .answer-link::after,
  .service-card-cta {
    color: var(--premium-purple) !important;
  }

  .glass,
  .brief-card,
  .service-card,
  .answer-link,
  .route-links .glass,
  .status-ledger {
    background:
      linear-gradient(145deg, var(--premium-panel-strong), rgba(244, 240, 249, 0.66)),
      radial-gradient(circle at 92% 8%, rgba(156, 0, 255, 0.040), transparent 18rem) !important;
    border-color: var(--premium-line) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.84),
      inset 0 -1px 0 rgba(31, 25, 42, 0.028),
      var(--premium-shadow) !important;
    backdrop-filter: blur(18px) saturate(108%) !important;
  }

  .brief-card,
  .purple-glow,
  #status .glass,
  #contact > div,
  #leveranciers .glass,
  aside.glass,
  .toc,
  .status-ledger {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.91), rgba(242, 237, 248, 0.70)),
      radial-gradient(circle at 86% 4%, rgba(156, 0, 255, 0.052), transparent 20rem) !important;
    border-color: rgba(31, 25, 42, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      var(--premium-shadow-strong) !important;
  }

  .glass:hover,
  .service-card:hover,
  .answer-link:hover,
  .route-links .glass:hover {
    border-color: rgba(105, 0, 173, 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 28px 66px rgba(31, 25, 42, 0.145) !important;
  }

  .liquid-panel::before {
    background:
      linear-gradient(128deg, rgba(255, 255, 255, 0.50), transparent 39%, rgba(156, 0, 255, 0.038) 73%, rgba(255, 255, 255, 0.20)) !important;
    opacity: 0.21 !important;
  }

  .gradient-button {
    background: linear-gradient(135deg, var(--premium-purple-deep) 0%, var(--premium-purple) 58%, #8b00df 100%) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 14px 30px rgba(105, 0, 173, 0.18) !important;
  }

  .agency-trust-strip {
    background: rgba(31, 25, 42, 0.115) !important;
    border-color: rgba(31, 25, 42, 0.17) !important;
    box-shadow: var(--premium-shadow) !important;
  }

  .agency-trust-item {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(244, 240, 249, 0.52)) !important;
  }

  .section-border,
  footer {
    border-color: var(--premium-line-soft) !important;
  }

  .section-border:nth-of-type(even) {
    background: rgba(255, 255, 255, 0.075) !important;
  }

  .status-chip {
    color: #4d0d78 !important;
    background: rgba(156, 0, 255, 0.070) !important;
    border-color: rgba(105, 0, 173, 0.18) !important;
  }

  .status-line,
  .brief-row,
  .impact-row {
    border-color: var(--premium-line-soft) !important;
  }

  .mobile-dock {
    background:
      linear-gradient(145deg, rgba(248, 244, 251, 0.90), rgba(233, 226, 242, 0.80)) !important;
    border-color: rgba(31, 25, 42, 0.18) !important;
    box-shadow:
      0 18px 50px rgba(31, 25, 42, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(24px) saturate(116%) !important;
  }

  .mobile-dock a {
    color: #332b3e !important;
    background: rgba(255, 255, 255, 0.64) !important;
    border-color: rgba(105, 0, 173, 0.12) !important;
  }

  .mobile-dock a[aria-current='true'] {
    color: #2d104f !important;
    background:
      linear-gradient(135deg, rgba(156, 0, 255, 0.15), rgba(255, 255, 255, 0.52)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(105, 0, 173, 0.16),
      0 8px 22px rgba(31, 25, 42, 0.10) !important;
  }

  .mobile-dock a[aria-current='true']::before,
  .timeline-step::before {
    background: var(--premium-purple) !important;
  }

  .timeline-step::before {
    box-shadow: 0 0 0 6px rgba(105, 0, 173, 0.14) !important;
  }

  .timeline-step::after {
    background: rgba(31, 25, 42, 0.17) !important;
  }
}

@media (min-width: 1024px) {
  nav .max-w-6xl,
  nav .max-w-7xl {
    max-width: 1240px !important;
  }

  nav .hidden.lg\:flex {
    gap: 46px !important;
  }

  .hero-gradient {
    padding-top: 178px !important;
    padding-bottom: 108px !important;
  }

  .editorial-hero {
    padding-top: 166px !important;
    padding-bottom: 92px !important;
  }

  .hero-gradient > div,
  .editorial-hero > div,
  .section-border > div {
    max-width: 1180px !important;
  }

  .agency-hero-title {
    max-width: 790px !important;
    font-size: clamp(50px, 4.2vw, 64px) !important;
    line-height: 1.06 !important;
  }

  .law-hero-title {
    max-width: 680px !important;
    font-size: clamp(46px, 4.15vw, 62px) !important;
    line-height: 1.055 !important;
  }

  .brief-card {
    margin-top: 26px !important;
  }

  #wat-is-nis2 > div,
  #nis2-vragen > div > .grid,
  #leveranciers .grid,
  #over-vantora > div,
  #faq > div {
    column-gap: 64px !important;
  }

  #wat-is-nis2 h2 {
    max-width: 560px !important;
  }
}

@media (max-width: 767px) {
  .law-banner {
    min-height: 52px !important;
  }

  .hero-gradient,
  .editorial-hero {
    padding-top: calc(142px + env(safe-area-inset-top)) !important;
    padding-bottom: 48px !important;
  }

  .agency-hero-title,
  .hero-title,
  .law-hero-title,
  h1 {
    font-size: clamp(30px, 8.3vw, 36px) !important;
    line-height: 1.08 !important;
  }

  h2 {
    font-size: clamp(25px, 7vw, 31px) !important;
    line-height: 1.12 !important;
  }

  p {
    line-height: 1.60 !important;
  }

  .section-border {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .glass,
  .brief-card,
  .service-card,
  .answer-link,
  .status-ledger {
    border-radius: 14px !important;
  }

  .mobile-dock {
    padding: 6px !important;
    border-radius: 24px !important;
  }

  .mobile-dock a {
    min-height: 56px !important;
    border-radius: 15px !important;
  }

  .mobile-dock a span {
    font-size: 10.5px !important;
    line-height: 1 !important;
  }

  .agency-trust-strip {
    display: none !important;
  }
}

/*
  Boardroom finish.
  Final override layer for a calmer, more expensive-feeling agency presence.
  Light mode moves from bright lavender to warm off-white with controlled purple.
*/
:root {
  --board-ink: #15111b;
  --board-heading: #0f0b16;
  --board-muted: #453d4e;
  --board-soft: #706779;
  --board-purple: #6200a5;
  --board-purple-dark: #2b1042;
  --board-paper: #f7f3fa;
  --board-paper-2: #eee7f4;
  --board-line: rgba(28, 21, 38, 0.13);
  --board-line-strong: rgba(28, 21, 38, 0.19);
  --board-shadow: 0 22px 54px rgba(30, 22, 42, 0.10);
  --board-shadow-strong: 0 32px 78px rgba(30, 22, 42, 0.14);
}

.hero-gradient,
.editorial-hero,
.section-border {
  position: relative;
}

.hero-gradient > div,
.section-border > div,
footer > div {
  position: relative;
  z-index: 1;
}

.agency-eyebrow,
.section-kicker {
  letter-spacing: 0.16em !important;
}

.agency-hero-title,
.hero-title,
.law-hero-title {
  text-wrap: balance;
}

.gradient-button {
  min-height: 52px;
  letter-spacing: 0 !important;
}

.route-links .glass,
#wat-is-nis2 .glass,
#snel-antwoord .glass,
#nis2-vragen .glass {
  text-decoration: none;
}

#nis2-vragen .grid.sm\:grid-cols-2 {
  align-items: stretch;
}

@media (prefers-color-scheme: light) {
  html {
    background: var(--board-paper-2) !important;
  }

  body {
    color: var(--board-ink) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.16) 38%, transparent 68%),
      radial-gradient(circle at 18% -14%, rgba(156, 0, 255, 0.075), transparent 34rem),
      radial-gradient(circle at 88% 4%, rgba(98, 0, 165, 0.040), transparent 31rem),
      linear-gradient(180deg, var(--board-paper) 0%, #f1ebf6 50%, var(--board-paper-2) 100%) !important;
  }

  body::before {
    opacity: 0.040 !important;
    background:
      linear-gradient(rgba(24, 18, 32, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(24, 18, 32, 0.07) 1px, transparent 1px) !important;
    background-size: 96px 96px !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.16), transparent 52%) !important;
  }

  .page-gradient,
  .hero-gradient,
  .editorial-hero {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.18) 44%, transparent 78%),
      radial-gradient(circle at 18% -10%, rgba(156, 0, 255, 0.080), transparent 34rem),
      radial-gradient(circle at 88% 8%, rgba(43, 16, 66, 0.045), transparent 30rem),
      linear-gradient(180deg, var(--board-paper) 0%, #f2edf7 52%, var(--board-paper-2) 100%) !important;
  }

  .hero-gradient::after,
  .editorial-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(98, 0, 165, 0.16), transparent);
    pointer-events: none;
  }

  .law-banner {
    background: rgba(248, 245, 250, 0.96) !important;
    color: #241d2d !important;
    border-bottom: 1px solid rgba(28, 21, 38, 0.10) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  nav {
    background:
      linear-gradient(180deg, rgba(250, 247, 252, 0.96), rgba(242, 237, 247, 0.90)) !important;
    border-bottom-color: rgba(28, 21, 38, 0.11) !important;
    box-shadow:
      0 18px 46px rgba(30, 22, 42, 0.09),
      inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  .nav-link {
    color: #332a3e !important;
    font-weight: 690 !important;
  }

  h1,
  h2,
  h3,
  strong,
  .brief-value,
  .status-value {
    color: var(--board-heading) !important;
  }

  p,
  li,
  .text-zinc-300,
  .text-zinc-400 {
    color: var(--board-muted) !important;
  }

  .text-zinc-500,
  footer,
  .agency-trust-item span,
  .executive-note,
  .brief-label {
    color: var(--board-soft) !important;
  }

  .text-purple-400,
  .section-kicker,
  .agency-eyebrow,
  .service-card-cta,
  .answer-link::after {
    color: var(--board-purple) !important;
  }

  .glass,
  .brief-card,
  .service-card,
  .answer-link,
  .route-links .glass {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(247, 243, 250, 0.70)),
      radial-gradient(circle at 96% 4%, rgba(156, 0, 255, 0.032), transparent 18rem) !important;
    border: 1px solid var(--board-line) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(24, 18, 32, 0.025),
      var(--board-shadow) !important;
    backdrop-filter: blur(16px) saturate(106%) !important;
  }

  .brief-card,
  .purple-glow,
  #status .glass,
  #leveranciers .glass,
  #contact > div,
  #over-vantora .glass,
  aside.glass,
  .toc {
    border-color: var(--board-line-strong) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      var(--board-shadow-strong) !important;
  }

  .glass:hover,
  .service-card:hover,
  .answer-link:hover,
  .route-links .glass:hover {
    border-color: rgba(98, 0, 165, 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 30px 72px rgba(30, 22, 42, 0.13) !important;
  }

  .gradient-button,
  .law-banner a {
    background: linear-gradient(135deg, var(--board-purple-dark), var(--board-purple) 62%, #8d00e5) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 16px 34px rgba(98, 0, 165, 0.18) !important;
  }

  .agency-trust-strip {
    background: rgba(28, 21, 38, 0.11) !important;
    border-color: rgba(28, 21, 38, 0.15) !important;
  }

  .agency-trust-item {
    background: rgba(255, 255, 255, 0.72) !important;
  }

  .brief-row,
  .section-border,
  footer {
    border-color: var(--board-line) !important;
  }

  .service-card-cta::after {
    background: rgba(98, 0, 165, 0.07) !important;
    border-color: rgba(98, 0, 165, 0.17) !important;
  }

  .mobile-dock {
    background:
      linear-gradient(145deg, rgba(250, 247, 252, 0.94), rgba(239, 232, 246, 0.86)) !important;
    border-color: rgba(28, 21, 38, 0.17) !important;
    box-shadow:
      0 20px 56px rgba(30, 22, 42, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  }
}

@media (prefers-color-scheme: light) and (min-width: 1024px) {
  .hero-gradient {
    min-height: auto !important;
    padding-top: 190px !important;
    padding-bottom: 96px !important;
  }

  .hero-gradient > div {
    grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.54fr) !important;
    gap: 72px !important;
  }

  .agency-hero-title {
    max-width: 760px !important;
    font-size: clamp(48px, 4vw, 60px) !important;
    line-height: 1.055 !important;
  }

  .hero-gradient p {
    font-size: 19px !important;
    line-height: 1.68 !important;
  }

  .brief-card {
    max-width: 390px !important;
    padding: 30px !important;
    margin-top: 18px !important;
  }

  .brief-row {
    grid-template-columns: 96px 1fr !important;
    gap: 16px !important;
    padding: 15px 0 !important;
  }

  .brief-value {
    font-size: 16px !important;
    line-height: 1.42 !important;
  }

  #snel-antwoord,
  #status,
  #wat-is-nis2,
  #nis2-vragen,
  #leveranciers,
  #diensten,
  #over-vantora,
  #faq,
  #contact {
    scroll-margin-top: 140px;
  }

  #nis2-vragen > div > .grid {
    display: block !important;
  }

  #nis2-vragen > div > .grid > div:first-child {
    max-width: 720px !important;
    margin-bottom: 34px !important;
  }

  #nis2-vragen .grid.sm\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #nis2-vragen .glass {
    padding: 22px !important;
    border-radius: 12px !important;
  }

  #nis2-vragen .glass strong {
    font-size: 16px !important;
    line-height: 1.32 !important;
  }

  #nis2-vragen .glass span:last-child {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  #diensten .service-card {
    border-radius: 14px !important;
  }
}

@media (max-width: 767px) {
  .hero-gradient,
  .editorial-hero {
    padding-bottom: 118px !important;
  }

  .route-links {
    display: none !important;
  }

  .hero-gradient .mt-10 {
    margin-top: 30px !important;
  }

  .hero-gradient .mt-10 > a.glass {
    display: none !important;
  }

  #nis2-vragen .grid.sm\:grid-cols-2 {
    gap: 12px !important;
  }

  #nis2-vragen .glass,
  #snel-antwoord .glass {
    padding: 20px !important;
  }

  #leveranciers .flex.flex-col.sm\:flex-row {
    gap: 10px !important;
  }
}

/*
  Studio-grade calm pass.
  A final restrained layer for a more mature security-agency feel, especially in
  light mode: less glare, more confidence, clearer rhythm, fewer crowded grids.
*/
:root {
  --studio-ink: #16121d;
  --studio-heading: #0e0a15;
  --studio-muted: #3f3748;
  --studio-soft: #746b7b;
  --studio-paper: #f4f0f7;
  --studio-paper-deep: #e8e1ed;
  --studio-line: rgba(24, 18, 34, 0.14);
  --studio-line-strong: rgba(24, 18, 34, 0.22);
  --studio-purple: #6b00b3;
  --studio-purple-deep: #2d123f;
  --studio-shadow: 0 18px 44px rgba(27, 21, 38, 0.10);
  --studio-shadow-strong: 0 28px 70px rgba(27, 21, 38, 0.14);
}

.glass,
.service-card,
.answer-link,
.brief-card {
  border-radius: 14px !important;
}

.section-border {
  overflow: clip;
}

.service-card,
.answer-link,
#nis2-vragen .glass {
  isolation: isolate;
}

@media (prefers-color-scheme: light) {
  html {
    background: var(--studio-paper-deep) !important;
  }

  body {
    color: var(--studio-ink) !important;
    background:
      radial-gradient(circle at 18% -12%, rgba(156, 0, 255, 0.065), transparent 34rem),
      radial-gradient(circle at 88% 6%, rgba(45, 18, 63, 0.045), transparent 30rem),
      linear-gradient(180deg, #faf8fc 0%, var(--studio-paper) 48%, var(--studio-paper-deep) 100%) !important;
  }

  body::before {
    opacity: 0.030 !important;
    background-size: 112px 112px !important;
  }

  .page-gradient,
  .hero-gradient,
  .editorial-hero {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.12) 42%, transparent 76%),
      radial-gradient(circle at 16% -10%, rgba(156, 0, 255, 0.070), transparent 34rem),
      radial-gradient(circle at 88% 10%, rgba(45, 18, 63, 0.042), transparent 30rem),
      linear-gradient(180deg, #faf8fc 0%, var(--studio-paper) 50%, var(--studio-paper-deep) 100%) !important;
  }

  .law-banner,
  nav {
    background: rgba(249, 247, 252, 0.94) !important;
    border-color: var(--studio-line) !important;
    box-shadow: 0 14px 38px rgba(27, 21, 38, 0.075) !important;
  }

  .law-banner {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  h1,
  h2,
  h3,
  strong,
  .brief-value,
  .status-value {
    color: var(--studio-heading) !important;
  }

  p,
  li,
  .text-zinc-300,
  .text-zinc-400 {
    color: var(--studio-muted) !important;
  }

  .text-zinc-500,
  .agency-trust-item span,
  .executive-note,
  .brief-label,
  footer {
    color: var(--studio-soft) !important;
  }

  .text-purple-400,
  .section-kicker,
  .agency-eyebrow,
  .service-card-cta,
  .answer-link::after {
    color: var(--studio-purple) !important;
  }

  .glass,
  .brief-card,
  .service-card,
  .answer-link,
  .route-links .glass,
  .status-ledger {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(246, 242, 249, 0.68)),
      radial-gradient(circle at 92% 2%, rgba(156, 0, 255, 0.026), transparent 18rem) !important;
    border-color: var(--studio-line) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      inset 0 -1px 0 rgba(24, 18, 34, 0.028),
      var(--studio-shadow) !important;
    backdrop-filter: blur(14px) saturate(104%) !important;
  }

  .brief-card,
  .purple-glow,
  #status .glass,
  #leveranciers .glass,
  #contact > div,
  #over-vantora .glass,
  aside.glass,
  .toc,
  .status-ledger {
    border-color: var(--studio-line-strong) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      var(--studio-shadow-strong) !important;
  }

  .glass:hover,
  .service-card:hover,
  .answer-link:hover,
  .route-links .glass:hover {
    border-color: rgba(107, 0, 179, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 26px 62px rgba(27, 21, 38, 0.13) !important;
  }

  .gradient-button,
  .law-banner a {
    background: linear-gradient(135deg, var(--studio-purple-deep), var(--studio-purple) 62%, #9200ec) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 14px 30px rgba(107, 0, 179, 0.16) !important;
  }

  .agency-trust-strip {
    background: rgba(24, 18, 34, 0.10) !important;
    border-color: rgba(24, 18, 34, 0.16) !important;
  }

  .agency-trust-item {
    background: rgba(255, 255, 255, 0.68) !important;
  }

  .brief-row,
  .section-border,
  footer {
    border-color: var(--studio-line) !important;
  }

  .mobile-dock {
    background:
      linear-gradient(145deg, rgba(250, 248, 252, 0.94), rgba(237, 231, 244, 0.86)) !important;
    border-color: var(--studio-line-strong) !important;
  }

  .mobile-dock a {
    background: rgba(255, 255, 255, 0.62) !important;
    color: #332a3f !important;
  }
}

@media (min-width: 1024px) {
  .hero-gradient > div,
  .editorial-hero > div,
  .section-border > div {
    max-width: 1160px !important;
  }

  nav .max-w-6xl,
  nav .max-w-7xl {
    max-width: 1220px !important;
  }

  .agency-hero-title {
    max-width: 740px !important;
    font-size: clamp(48px, 3.85vw, 58px) !important;
    line-height: 1.07 !important;
  }

  .hero-gradient {
    padding-top: 166px !important;
    padding-bottom: 88px !important;
  }

  .agency-trust-strip {
    max-width: 720px !important;
  }

  .route-links {
    max-width: 720px !important;
  }

  .hero-gradient .mt-7 {
    margin-top: 22px !important;
  }

  .hero-gradient .mt-10 {
    margin-top: 32px !important;
  }

  #nis2-vragen .grid.sm\:grid-cols-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #nis2-vragen .glass {
    padding: 24px !important;
  }

  #diensten .mt-12 {
    margin-top: 44px !important;
  }
}

@media (max-width: 767px) {
  .hero-gradient,
  .editorial-hero {
    padding-top: calc(136px + env(safe-area-inset-top)) !important;
    padding-bottom: 108px !important;
  }

  .section-border {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .gradient-button {
    min-height: 50px;
  }
}

/*
  Institutional agency finish.
  This is the visible final layer: calmer light mode, more boardroom rhythm,
  firmer surfaces and cleaner alignment across the static Vantora pages.
*/
:root {
  --institution-ink: #15111b;
  --institution-heading: #0d0914;
  --institution-body: #3d3546;
  --institution-muted: #746b7d;
  --institution-purple: #6f00b8;
  --institution-purple-dark: #2f123f;
  --institution-paper: #f8f6fa;
  --institution-paper-2: #f0ebf5;
  --institution-paper-3: #e7e0ed;
  --institution-line: rgba(23, 17, 32, 0.13);
  --institution-line-strong: rgba(23, 17, 32, 0.20);
  --institution-panel: rgba(255, 255, 255, 0.82);
  --institution-panel-strong: rgba(255, 255, 255, 0.94);
  --institution-shadow: 0 18px 44px rgba(25, 18, 36, 0.09);
  --institution-shadow-strong: 0 30px 76px rgba(25, 18, 36, 0.13);
}

body {
  font-kerning: normal;
}

h1,
h2,
h3,
.agency-hero-title,
.law-hero-title {
  font-weight: 430 !important;
}

p,
li {
  max-width: 72ch;
}

.section-kicker,
.agency-eyebrow,
.brief-label {
  letter-spacing: 0.145em !important;
}

.gradient-button {
  border-radius: 12px !important;
}

.glass,
.brief-card,
.service-card,
.answer-link {
  border-radius: 16px !important;
}

.service-card:hover,
.answer-link:hover,
.route-links .glass:hover {
  transform: translateY(-2px);
}

@media (prefers-color-scheme: light) {
  html {
    background: var(--institution-paper-3) !important;
  }

  body {
    color: var(--institution-ink) !important;
    background:
      radial-gradient(circle at 18% -12%, rgba(156, 0, 255, 0.060), transparent 34rem),
      radial-gradient(circle at 88% 2%, rgba(47, 18, 63, 0.040), transparent 32rem),
      linear-gradient(180deg, var(--institution-paper) 0%, var(--institution-paper-2) 50%, var(--institution-paper-3) 100%) !important;
  }

  body::before {
    opacity: 0.022 !important;
    background:
      linear-gradient(rgba(23, 17, 32, 0.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(23, 17, 32, 0.08) 1px, transparent 1px) !important;
    background-size: 120px 120px !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent 52%) !important;
  }

  .page-gradient,
  .hero-gradient,
  .editorial-hero {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.16) 42%, transparent 76%),
      radial-gradient(circle at 17% -10%, rgba(156, 0, 255, 0.065), transparent 34rem),
      radial-gradient(circle at 88% 8%, rgba(47, 18, 63, 0.040), transparent 30rem),
      linear-gradient(180deg, var(--institution-paper) 0%, var(--institution-paper-2) 52%, var(--institution-paper-3) 100%) !important;
  }

  .law-banner {
    background: rgba(249, 247, 251, 0.97) !important;
    color: #282133 !important;
    border-bottom: 1px solid rgba(23, 17, 32, 0.10) !important;
    box-shadow: none !important;
  }

  nav {
    background:
      linear-gradient(180deg, rgba(252, 250, 253, 0.97), rgba(244, 239, 248, 0.92)) !important;
    border-bottom-color: rgba(23, 17, 32, 0.10) !important;
    box-shadow:
      0 16px 40px rgba(25, 18, 36, 0.075),
      inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  .nav-link {
    color: #30283b !important;
    font-weight: 700 !important;
  }

  .nav-link:hover,
  .nav-link.is-active {
    color: var(--institution-heading) !important;
  }

  h1,
  h2,
  h3,
  strong,
  .brief-value,
  .status-value,
  .timeline-title {
    color: var(--institution-heading) !important;
  }

  p,
  li,
  .text-zinc-300,
  .text-zinc-400 {
    color: var(--institution-body) !important;
  }

  .text-zinc-500,
  .agency-trust-item span,
  .executive-note,
  .brief-label,
  .status-label,
  footer {
    color: var(--institution-muted) !important;
  }

  .text-purple-400,
  .section-kicker,
  .agency-eyebrow,
  .service-card-cta,
  .answer-link::after {
    color: var(--institution-purple) !important;
  }

  .glass,
  .brief-card,
  .service-card,
  .answer-link,
  .route-links .glass,
  .status-ledger,
  aside.glass,
  .toc {
    background:
      linear-gradient(145deg, var(--institution-panel-strong), rgba(246, 242, 249, 0.74)),
      radial-gradient(circle at 96% 0%, rgba(156, 0, 255, 0.024), transparent 18rem) !important;
    border-color: var(--institution-line) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(23, 17, 32, 0.026),
      var(--institution-shadow) !important;
    backdrop-filter: blur(13px) saturate(104%) !important;
  }

  .brief-card,
  .purple-glow,
  #status .glass,
  #leveranciers .glass,
  #contact > div,
  #over-vantora .glass,
  .status-ledger {
    border-color: var(--institution-line-strong) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      var(--institution-shadow-strong) !important;
  }

  .glass:hover,
  .service-card:hover,
  .answer-link:hover,
  .route-links .glass:hover {
    border-color: rgba(111, 0, 184, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 28px 68px rgba(25, 18, 36, 0.12) !important;
  }

  .liquid-panel::before {
    opacity: 0.16 !important;
  }

  .gradient-button,
  .law-banner a {
    background: linear-gradient(135deg, var(--institution-purple-dark), var(--institution-purple) 62%, #9200ed) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 14px 30px rgba(111, 0, 184, 0.16) !important;
  }

  .agency-trust-strip {
    background: rgba(23, 17, 32, 0.095) !important;
    border-color: rgba(23, 17, 32, 0.145) !important;
    box-shadow: var(--institution-shadow) !important;
  }

  .agency-trust-item {
    background: rgba(255, 255, 255, 0.72) !important;
  }

  .brief-row,
  .status-line,
  .impact-row,
  .section-border,
  footer {
    border-color: var(--institution-line) !important;
  }

  .section-border:nth-of-type(even) {
    background: rgba(255, 255, 255, 0.050) !important;
  }

  .mobile-dock {
    background:
      linear-gradient(145deg, rgba(252, 250, 253, 0.94), rgba(240, 234, 246, 0.88)) !important;
    border-color: var(--institution-line-strong) !important;
    box-shadow:
      0 20px 56px rgba(25, 18, 36, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  .mobile-dock a {
    color: #30283b !important;
    background: rgba(255, 255, 255, 0.64) !important;
    border-color: rgba(111, 0, 184, 0.11) !important;
  }

  .mobile-dock a[aria-current='true'] {
    color: #2c0f4a !important;
    background:
      linear-gradient(135deg, rgba(156, 0, 255, 0.14), rgba(255, 255, 255, 0.56)) !important;
  }
}

@media (prefers-color-scheme: dark) {
  .glass,
  .brief-card,
  .service-card,
  .answer-link {
    border-color: rgba(255, 255, 255, 0.11) !important;
  }

  .service-card:hover,
  .answer-link:hover,
  .route-links .glass:hover {
    border-color: rgba(196, 181, 253, 0.22) !important;
  }
}

@media (min-width: 1024px) {
  nav .max-w-6xl,
  nav .max-w-7xl {
    max-width: 1260px !important;
  }

  nav .hidden.lg\:flex {
    gap: clamp(42px, 4vw, 58px) !important;
  }

  .hero-gradient > div {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.48fr) !important;
    gap: clamp(72px, 7vw, 112px) !important;
  }

  .hero-gradient,
  .editorial-hero {
    padding-top: 178px !important;
    padding-bottom: 104px !important;
  }

  .hero-gradient > div,
  .editorial-hero > div,
  .section-border > div,
  footer > div {
    max-width: 1180px !important;
  }

  .agency-hero-title {
    max-width: 760px !important;
    font-size: clamp(48px, 3.7vw, 58px) !important;
    line-height: 1.075 !important;
  }

  .law-hero-title {
    max-width: 700px !important;
    font-size: clamp(44px, 3.8vw, 60px) !important;
    line-height: 1.07 !important;
  }

  .hero-gradient p,
  .editorial-hero p {
    font-size: 18px !important;
    line-height: 1.72 !important;
  }

  .brief-card {
    max-width: 392px !important;
    padding: 32px !important;
    margin-top: 34px !important;
  }

  .section-border {
    padding-top: 82px !important;
    padding-bottom: 82px !important;
  }

  #snel-antwoord {
    padding-top: 70px !important;
  }

  #wat-is-nis2 > div,
  #leveranciers .grid,
  #over-vantora > div,
  #faq > div {
    column-gap: clamp(56px, 6vw, 84px) !important;
  }

  #nis2-vragen > div > .grid {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.34fr) minmax(0, 1fr) !important;
    gap: 58px !important;
  }

  #nis2-vragen > div > .grid > div:first-child {
    max-width: 360px !important;
    position: sticky;
    top: 150px;
    margin-bottom: 0 !important;
  }

  #nis2-vragen .grid.sm\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #nis2-vragen .glass {
    padding: 22px !important;
  }

  #nis2-vragen .glass strong {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  #nis2-vragen .glass span:last-child {
    display: block;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  #diensten .service-card {
    padding: 36px !important;
  }
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .law-banner {
    min-height: 54px !important;
    padding: 7px 14px !important;
  }

  .hero-gradient,
  .editorial-hero {
    padding-top: calc(138px + env(safe-area-inset-top)) !important;
    padding-bottom: 96px !important;
  }

  .section-border {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .agency-hero-title,
  .hero-title,
  .law-hero-title,
  h1 {
    font-size: clamp(31px, 8.15vw, 36px) !important;
    line-height: 1.09 !important;
  }

  h2 {
    font-size: clamp(25px, 6.9vw, 31px) !important;
  }

  .mobile-dock {
    width: 100%;
  }

  .impact-row,
  .status-line,
  .brief-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .impact-row > *,
  .status-line > *,
  .brief-row > *,
  .measure {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
/* The compiled Tailwind stylesheet loads before page-specific button rules. */
@media (max-width: 1023px) {
  nav a.hidden.gradient-button {
    display: none !important;
  }
}