/* Vernova — v2 redesign. Sitewide dark ink canvas, single-typeface editorial
   system, kinetic but purposeful motion. Brand tokens (Inkt/Zand/Nova-groen/
   Steen) per Huisstijlgids v2.1 — everything else is new. No external fonts/
   icons/JS libraries: self-hosted Poppins + hand-authored SVGs only. */

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Brand tokens (Huisstijlgids v2.1) ---- */
  --ink: #1C1C1E;
  --ink-90: #232326;
  --ink-80: #2B2B2E;
  --ink-deep: #131315;
  --sand: #F7F5F1;
  --green: #1D9E75;
  --green-light: #4AB191;
  --green-dark: #167658;
  --stone: #B4B2A9;
  --stone-light: #BFBEB6;
  --stone-dim: #8A887F;
  --white: #FFFFFF;

  --warning: #D98E2B;
  --error: #E0685A;
  --info: #4B9CE0;

  /* ---- Type ---- */
  --font: 'Poppins', 'Segoe UI', Arial, sans-serif;

  --text-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);          /* 16–18 */
  --text-lede: clamp(1.0625rem, 0.98rem + 0.5vw, 1.375rem);     /* 17–22 */
  --text-caption: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);   /* 13–14 */
  --text-eyebrow: 0.8125rem;                                     /* 13 */
  --text-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);         /* 18–20 */
  --text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);          /* 22–28 */
  --text-h2: clamp(2rem, 1.35rem + 2.6vw, 3.375rem);            /* 32–54 */
  --text-h1: clamp(2.75rem, 0.9rem + 7.6vw, 7.25rem);           /* 44–116 */
  --text-ghost: clamp(3.5rem, 1.2rem + 9vw, 9.5rem);            /* index numerals */
  --text-stat: clamp(2rem, 1.6rem + 2vw, 3.5rem);

  /* ---- Space ---- */
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px;
  --space-14: 128px; --space-16: 160px;

  --radius-lg: 28px; --radius-md: 16px; --radius-sm: 10px; --radius-pill: 999px;
  --container-w: 1240px;
  --border: 1px solid rgba(247, 245, 241, 0.1);

  --shadow-md: 0 16px 36px -16px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.65);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 450ms;
}

/* ---- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
ul { list-style: none; padding: 0; }
input, textarea, button { font-family: var(--font); }

body {
  background: var(--ink);
  color: var(--sand);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2000;
}

h1, h2, h3, h4 { font-family: var(--font); font-weight: 600; color: var(--sand); }
h1 { font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
h3 { font-size: var(--text-h3); letter-spacing: -0.01em; line-height: 1.2; }
h4 { font-size: var(--text-h4); letter-spacing: -0.005em; }
p { color: var(--stone-light); }
.lede { font-size: var(--text-lede); color: var(--stone-light); line-height: 1.5; }
.caption { font-size: var(--text-caption); color: var(--stone); }

.container { max-width: var(--container-w); margin-inline: auto; padding-inline: var(--space-3); }
@media (min-width: 700px) { .container { padding-inline: var(--space-6); } }

.skip-link {
  position: absolute; left: 0; top: 0;
  background: var(--green); color: var(--ink); font-weight: 600;
  padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0; z-index: 3000;
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 2px solid var(--green-light); outline-offset: 3px; }

section { padding-block: var(--space-14); position: relative; }
@media (max-width: 700px) { section { padding-block: var(--space-10); } }

/* ---- Eyebrow --------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green-light);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--green-light); }

.section__head { max-width: 680px; margin-bottom: var(--space-8); }
.section__head h2 { margin-top: var(--space-2); }
.section__head .lede { margin-top: var(--space-3); }
.section__head--wide { max-width: 900px; }
/* Section labels that are real H2s but keep the small eyebrow look. */
.section__head h2.eyebrow, .card h2.eyebrow { margin-top: 0; line-height: 1.5; }

/* ---- Custom cursor (desktop, fine-pointer only) — the Vernova V-mark --- */
.nova-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .nova-cursor {
    display: block; position: fixed; top: 0; left: 0;
    width: 22px; height: 22px;
    pointer-events: none; z-index: 4000;
    transform: translate(-50%, -50%);
    transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
    will-change: transform;
  }
  .nova-cursor svg {
    width: 100%; height: 100%; display: block; color: var(--green-light);
    filter: drop-shadow(0 0 6px rgba(29, 158, 117, 0.6));
    transition: color var(--dur-base) var(--ease-out);
  }
  .nova-cursor.is-active { width: 34px; height: 34px; }
  .nova-cursor.is-active svg { color: var(--sand); filter: drop-shadow(0 0 10px rgba(29, 158, 117, 0.85)); }
  body { cursor: none; }
  a, button, input, textarea { cursor: none; }
}
@media (prefers-reduced-motion: reduce) { .nova-cursor { display: none !important; } body, a, button { cursor: auto !important; } }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 30px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--text-body); letter-spacing: -0.005em;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn--primary {
  background: linear-gradient(135deg, var(--green-light), var(--green));
  color: var(--ink);
  box-shadow: 0 16px 32px -14px rgba(29, 158, 117, 0.55);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -14px rgba(29, 158, 117, 0.7); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  background: rgba(247, 245, 241, 0.05); color: var(--sand);
  border: 1px solid rgba(247, 245, 241, 0.22);
}
.btn--ghost:hover { border-color: var(--sand); background: rgba(247, 245, 241, 0.1); }
.btn--ghost svg, .btn--primary svg { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.btn--magnetic { display: inline-block; }

/* ---- Header -------------------------------------------------------------- */
/* Must sit above .menu-overlay (2000). The menu button carries z-index 2100,
   but a positioned header with its own z-index creates a stacking context, so
   that 2100 only ever competed with the header's own children: once the
   overlay opened it covered the button, leaving no way to close the menu on a
   phone. Raising the header itself is what actually lifts the button out. */
.l-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2100;
  padding-block: var(--space-3);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.l-header.is-scrolled {
  background: rgba(28, 28, 30, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(247, 245, 241, 0.08);
  padding-block: var(--space-2);
}
.l-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.scroll-progress {
  position: absolute; bottom: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--green), var(--green-light));
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) { .scroll-progress { transition: width 0.08s linear; } }
.brand img { height: 28px; width: auto; }
/* The logo is the way back to the homepage, so it needs a thumb-sized target:
   the mark stays 28px, the link around it grows to 44. */
.brand { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Desktop inline nav (≥900px) -------------------------------------- */
.nav-desktop { display: none; }
@media (min-width: 900px) {
  .nav-desktop { display: flex; align-items: center; gap: var(--space-6); }
}
.nav-desktop__links { display: flex; align-items: center; gap: var(--space-4); }
.nav-desktop__links a {
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; color: var(--stone-light);
  padding-block: 6px; border-bottom: 1px solid transparent;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.nav-desktop__links a:hover { color: var(--sand); }
.nav-desktop__links a[aria-current="page"] { color: var(--green-light); border-color: var(--green-light); }

.lang-dropdown { position: relative; }
.lang-dropdown__toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(247, 245, 241, 0.18); color: var(--sand);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
  transition: border-color var(--dur-base) var(--ease-out);
}
.lang-dropdown__toggle:hover { border-color: rgba(247, 245, 241, 0.4); }
.lang-dropdown__toggle svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.lang-dropdown.is-open .lang-dropdown__toggle svg { transform: rotate(180deg); }
.lang-dropdown__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 88px;
  background: var(--ink-90); border: var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.lang-dropdown.is-open .lang-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.lang-dropdown__menu a { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; color: var(--stone-light); }
.lang-dropdown__menu a:hover { background: rgba(247, 245, 241, 0.06); color: var(--sand); }
.lang-dropdown__menu a[aria-current="true"] { background: var(--green); color: var(--ink); font-weight: 600; }

.menu-trigger {
  position: relative; z-index: 2100;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 18px; border-radius: var(--radius-pill);
  border: 1px solid rgba(247, 245, 241, 0.18);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.menu-trigger:hover { border-color: rgba(247, 245, 241, 0.4); }
.menu-trigger__label { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; }
.menu-trigger__icon {
  width: 34px; height: 34px; border-radius: 50%; background: var(--sand);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.menu-trigger__icon span, .menu-trigger__icon span::before, .menu-trigger__icon span::after {
  content: ""; display: block; width: 14px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.menu-trigger__icon span { position: relative; }
.menu-trigger__icon span::before { position: absolute; top: -5px; left: 0; }
.menu-trigger__icon span::after { position: absolute; top: 5px; left: 0; }
.menu-trigger[aria-expanded="true"] .menu-trigger__icon span { background: transparent; }
.menu-trigger[aria-expanded="true"] .menu-trigger__icon span::before { transform: rotate(45deg) translate(3.5px, 3.5px); }
.menu-trigger[aria-expanded="true"] .menu-trigger__icon span::after { transform: rotate(-45deg) translate(3.5px, -3.5px); }
@media (min-width: 900px) { .menu-trigger { display: none; } }

/* ---- Full-screen nav overlay ------------------------------------------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--ink-deep);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--space-8) + 20px) var(--space-3) var(--space-6);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.menu-overlay.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
@media (min-width: 700px) { .menu-overlay { padding: calc(var(--space-10) + 16px) var(--space-6) var(--space-8); } }

.menu-overlay__list { display: flex; flex-direction: column; }
.menu-overlay__row {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-block: var(--space-2); border-bottom: 1px solid rgba(247, 245, 241, 0.1);
}
.menu-overlay__row:first-child { border-top: 1px solid rgba(247, 245, 241, 0.1); }
.menu-overlay__index { font-size: 0.9375rem; color: var(--stone-dim); font-variant-numeric: tabular-nums; }
.menu-overlay__link {
  font-size: clamp(2.25rem, 1.4rem + 5vw, 4.5rem); font-weight: 700; letter-spacing: -0.03em;
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  display: inline-block;
}
.menu-overlay__row:hover .menu-overlay__link, .menu-overlay__link[aria-current="page"] { color: var(--green-light); transform: translateX(10px); }
.menu-overlay__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); }
.menu-overlay__foot a { color: var(--stone-light); font-size: var(--text-body); }
.menu-overlay__foot a:hover { color: var(--sand); }
.menu-overlay__foot .lang-switch { display: flex; gap: 8px; }
/* The language buttons in the mobile menu measured 42x35: wide enough, a touch
   too short for a thumb, so only the height is topped up to 44. */
.menu-overlay__foot .lang-switch a { min-height: 44px; }
.menu-overlay__foot > a, .menu-overlay__foot > span { display: inline-flex; align-items: center; min-height: 44px; }
.menu-overlay__foot .lang-switch a {
  padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(247, 245, 241, 0.18);
  font-size: 0.8125rem; font-weight: 600;
}
.menu-overlay__foot .lang-switch a[aria-current="true"] { background: var(--green); border-color: var(--green); color: var(--ink); }

.no-scroll { overflow: hidden; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-top: calc(var(--space-16) + 20px); padding-bottom: var(--space-10); overflow: hidden; }
/* On phones the 180px top padding pushed the primary CTA past the fold once
   browser chrome is accounted for, so the first screen carried no action. */
@media (max-width: 700px) { .hero { padding-top: calc(var(--space-12) + 20px); } }
.hero__glow {
  position: absolute; top: -20%; right: -10%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, rgba(29, 158, 117, 0.32), rgba(29, 158, 117, 0) 70%);
  filter: blur(10px); pointer-events: none; z-index: 0;
}
.hero__mark {
  position: absolute; right: -60px; top: 40px; width: min(46vw, 520px); color: var(--sand);
  opacity: 0.05; z-index: 0; pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__title { margin-top: var(--space-3); max-width: 15ch; }
.hero__title-line { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.hero__title-line span { display: block; }
/* Homepage: the eyebrow lives inside the H1 (service + region in the main
   heading), so it must undo the H1's display type and take over the gap the
   H1's own top margin used to create. */
.hero__title--eyebrowed { margin-top: 0; }
.hero__eyebrow { display: flex; line-height: 1.5; letter-spacing: 0.16em; margin-bottom: var(--space-3); }
.hero__lede { margin-top: var(--space-4); max-width: 46ch; }
.hero__ctas { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
/* Answers "what happens after I click" right at the button, where the
   hesitation actually occurs, instead of leaving it to the contact page. */
.hero__note { margin-top: var(--space-3); max-width: 46ch; font-size: var(--text-caption); line-height: 1.5; color: var(--stone); }
.section-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--sand); padding: 16px 4px; border-bottom: 1px solid rgba(247, 245, 241, 0.3); }
.hero__link:hover { border-color: var(--sand); }
.hero__link svg { width: 16px; height: 16px; }

/* ---- 404 (Nova-verduistering) ------------------------------------------- */
.notfound {
  position: relative; min-height: 78vh; display: flex; align-items: center;
  padding-top: calc(var(--space-16) + 20px); padding-bottom: var(--space-14); overflow: hidden;
}
.notfound__glow {
  position: absolute; inset: -20%;
  background: radial-gradient(closest-side, rgba(29, 158, 117, 0.2), rgba(29, 158, 117, 0) 70%);
  pointer-events: none; z-index: 0;
}
.notfound__num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(9rem, 6vw + 8rem, 20rem); font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(247, 245, 241, 0.14);
  pointer-events: none; user-select: none; z-index: 0;
}
.notfound__inner { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; text-align: center; }
.notfound__inner h1 { margin-top: var(--space-3); }
.notfound__inner .lede { margin-top: var(--space-4); }
.notfound__ctas { margin-top: var(--space-6); display: flex; gap: var(--space-3); justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---- Marquee --------------------------------------------------------- */
.marquee { border-top: 1px solid rgba(247, 245, 241, 0.1); border-bottom: 1px solid rgba(247, 245, 241, 0.1); padding-block: var(--space-4); overflow: hidden; }
.marquee__track { display: flex; width: max-content; gap: var(--space-8); animation: marquee 32s linear infinite; }
.marquee__item { display: flex; align-items: center; gap: var(--space-8); font-size: clamp(1.125rem, 1rem + 1vw, 1.75rem); font-weight: 600; color: var(--stone-dim); white-space: nowrap; letter-spacing: -0.01em; }
.marquee__item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---- Reveal ------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--reveal-i, 0) * 70ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Services list ------------------------------------------------------ */
.services-list { display: flex; flex-direction: column; }
.service-row { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-6); padding-block: var(--space-8); border-top: 1px solid rgba(247, 245, 241, 0.1); }
.services-list .service-row:last-child { border-bottom: 1px solid rgba(247, 245, 241, 0.1); }
.service-row__index { font-size: var(--text-ghost); font-weight: 700; line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px rgba(247, 245, 241, 0.22); font-variant-numeric: tabular-nums; align-self: start; transition: -webkit-text-stroke-color var(--dur-slow) var(--ease-out); }
.service-row:hover .service-row__index { -webkit-text-stroke-color: rgba(74, 177, 145, 0.75); }
.service-row__body-wrap { padding-top: var(--space-1); }
.service-row__title { max-width: 18ch; }
.service-row__teaser { margin-top: var(--space-2); max-width: 56ch; }
.service-row__detail { margin-top: var(--space-4); display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 780px) { .service-row__detail { grid-template-columns: 1.1fr 0.9fr; } }
.service-row__text { max-width: 56ch; }
.service-paths { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.service-paths__item { padding-left: var(--space-2); border-left: 2px solid rgba(74, 177, 145, 0.45); }
.service-paths dt { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-light); }
.service-paths dd { margin: 6px 0 0; color: var(--stone-light); }
.checklist { display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: flex; align-items: flex-start; gap: 10px; color: var(--sand); font-size: var(--text-body); }
.checklist svg { width: 16px; height: 16px; margin-top: 4px; color: var(--green-light); flex-shrink: 0; }
/* Stacking the outline numeral above the text gave every row its own extra
   line plus the gap under it, which on a phone added up to about a screen and
   a half across the page for numbering alone. Keeping the two-column layout
   puts that numeral in space the text was never using, so the editorial
   numbering survives at a size that still reads as a display figure. */
@media (max-width: 640px) {
  .service-row { grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); padding-block: var(--space-6); }
  .service-row__index { font-size: clamp(1.75rem, 9vw, 2.75rem); -webkit-text-stroke-width: 1.2px; }
  .service-row__body-wrap { padding-top: 0; }
}

/* ---- Cascade scroll-reveal (Diensten: home teaser + full page) ----------
   A continuous, scroll-scrubbed reveal (not a one-shot IntersectionObserver
   fade) — index, title, teaser and checklist each light up in their own
   scroll-position window as the section passes through view, tied to a
   green "spine" that fills alongside. Driven by main.js; JS sets opacity/
   transform/stroke-color inline every frame, so no CSS transition here
   (a transition would fight the JS-side easing and feel laggy). */
.services-list--cascade { position: relative; }
@media (min-width: 640px) { .services-list--cascade { padding-left: 44px; } }
.services-list__spine {
  display: none; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px;
  background: rgba(247, 245, 241, 0.1);
}
@media (min-width: 640px) { .services-list__spine { display: block; } }
.services-list__spine-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--green-light), var(--green));
  box-shadow: 0 0 12px rgba(29, 158, 117, 0.5);
}
.services-list--cascade .service-row__index { transition: none; opacity: 0; }
.services-list--cascade .service-row:hover .service-row__index { -webkit-text-stroke-color: rgba(247, 245, 241, 0.22); }
.services-list--cascade .service-row__title,
.services-list--cascade .service-row__teaser,
.services-list--cascade .service-row__text,
.services-list--cascade .checklist li { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .services-list--cascade .service-row__index,
  .services-list--cascade .service-row__title,
  .services-list--cascade .service-row__teaser,
  .services-list--cascade .service-row__text,
  .services-list--cascade .checklist li { opacity: 1 !important; transform: none !important; }
  .services-list--cascade .service-row__index { color: var(--green-light) !important; -webkit-text-stroke-color: transparent !important; }
  .services-list__spine-fill { height: 100% !important; }
}

/* ---- Sticky-index scroll reveal (Over ons: waarom Vernova) --------------
   Apple-style "meelopend cijfer" — each row's number sticks near the top of
   the viewport while its (taller) row scrolls past beside it, then hands
   off to the next once that row clears. Pure CSS position: sticky for the
   pinning itself (never blocks page scroll); main.js only handles the
   proximity-based brighten/scale and the body fade-in, both continuous and
   reversible. */
.services-list--sticky .service-row {
  /* auto (not a fixed px column) — the shared ghost-number font-size
     (--text-ghost) scales up to 9.5rem on wide screens, which is wider than
     a fixed 120px column; a fixed column let the number overflow into the
     title text at larger viewports. auto always sizes to the actual glyph
     width, so it can never overlap the next column regardless of viewport. */
  grid-template-columns: auto 1fr; min-height: 60vh; align-items: start; padding-block: var(--space-6);
}
.services-list--sticky .service-row__index {
  position: sticky; top: 110px; color: var(--sand); opacity: 0.55;
  -webkit-text-stroke: none; transition: none;
}
.services-list--sticky .service-row:hover .service-row__index { color: var(--sand); }
.services-list--sticky .service-row__body-wrap { opacity: 0; }
@media (max-width: 640px) {
  .services-list--sticky .service-row { grid-template-columns: 1fr; min-height: 0; }
  .services-list--sticky .service-row__index { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .services-list--sticky .service-row__index { opacity: 1 !important; color: var(--green-light) !important; }
  .services-list--sticky .service-row__body-wrap { opacity: 1 !important; transform: none !important; }
}

/* ---- Bento grid (trust / values) --------------------------------------- */
.bento { display: grid; gap: var(--space-3); grid-template-columns: repeat(6, 1fr); }
.bento__item {
  position: relative; overflow: hidden;
  grid-column: span 6; padding: var(--space-6); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(247, 245, 241, 0.06), rgba(247, 245, 241, 0) 55%), var(--ink-90);
  border: var(--border); display: flex; flex-direction: column; gap: var(--space-2);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.bento__item:hover { border-color: rgba(29, 158, 117, 0.4); transform: translateY(-4px); }
/* .tilt: cursor-tracked 3D tilt + glow (main.js sets transform + --mx/--my on
   mousemove, fine-pointer + !reducedMotion only; clears on mouseleave so this
   CSS transition eases back to rest). Kept as its own class, not baked into
   .bento__item, so other cards (e.g. plan-card) can opt in later. */
.tilt::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(29, 158, 117, 0.22), transparent 70%);
  transition: opacity var(--dur-base) var(--ease-out); pointer-events: none;
}
.tilt:hover::before { opacity: 1; }
.tilt > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .tilt::before { display: none; } }
.bento__item--lg { grid-column: span 6; display: flex; flex-direction: row; align-items: center; gap: var(--space-6); }
.bento__item--lg .bento__icon { flex-shrink: 0; }
@media (min-width: 820px) {
  .bento__item { grid-column: span 3; }
  .bento__item--lg { grid-column: span 6; }
}
/* Below 700px the three trust cards became three stacked boxes, each with its
   own border, padding and a full-width icon block above the text - the same
   "boxes under boxes" problem as the integrations list. Here they collapse
   into one bordered block of hairline-separated rows with the icon beside the
   heading, which matches .feature-grid so the two read as one system. The
   desktop bento (one wide card plus two) is left untouched. */
@media (max-width: 819px) and (min-width: 701px) {
  .bento__item--lg { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .bento { gap: 0; border: var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-90); }
  .bento__item,
  .bento__item--lg {
    grid-column: span 6; flex-direction: row; align-items: flex-start;
    gap: var(--space-2); padding: 18px; border: none; border-bottom: var(--border);
    border-radius: 0; background: none; transition: none;
  }
  .bento__item:last-child { border-bottom: none; }
  .bento__item:hover { transform: none; border-color: transparent; }
  .bento__icon { width: 38px; height: 38px; flex-shrink: 0; }
  .bento__icon svg { width: 19px; height: 19px; }
  .bento__item h3 { margin-top: 0; font-size: var(--text-body); }
  .bento__item p { margin-top: 4px; }
}
.bento__icon { width: 46px; height: 46px; border-radius: var(--radius-sm); background: rgba(29, 158, 117, 0.14); display: flex; align-items: center; justify-content: center; color: var(--green-light); }
.bento__icon svg { width: 22px; height: 22px; }
.bento__item h3 { margin-top: var(--space-1); }
.bento__item p { font-size: var(--text-body); }

/* ---- Depth-relay scroll reveal (Werkwijze: home teaser + full page) -----
   Continuous, scroll-scrubbed focus: the step nearest the viewport centre
   sits flat and sharp; a step already scrolled past recedes (shrinks,
   blurs, dims) into the background, and the next one waits ahead in soft
   focus — like moving through the steps one at a time. Driven by main.js;
   no CSS transition (JS eases the values itself every frame), and no
   pinning — the page always scrolls freely. */
.services-list--depth .service-row__index { transition: none; }
.services-list--depth .service-row:hover .service-row__index { -webkit-text-stroke-color: rgba(247, 245, 241, 0.22); }
@media (prefers-reduced-motion: reduce) {
  .services-list--depth .service-row { opacity: 1 !important; transform: none !important; filter: none !important; }
  .services-list--depth .service-row__index { color: var(--green-light) !important; -webkit-text-stroke-color: transparent !important; }
}

/* ---- Plans --------------------------------------------------------------- */
.plans { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan-card { position: relative; display: flex; flex-direction: column; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--ink-90); border: var(--border); }
.plan-card--featured { background: linear-gradient(160deg, rgba(29, 158, 117, 0.16), rgba(29, 158, 117, 0) 60%), var(--ink-90); border-color: rgba(29, 158, 117, 0.5); box-shadow: var(--shadow-lg); }
@media (min-width: 900px) { .plan-card--featured { transform: translateY(-14px); } }
.plan-card__badge { position: absolute; top: -14px; left: var(--space-6); background: var(--green); color: var(--ink); font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.04em; padding: 6px 14px; border-radius: var(--radius-pill); }
.plan-card__name { display: flex; align-items: baseline; gap: 10px; }
.plan-card__name strong { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; }
.plan-card__name span { color: var(--stone-dim); font-size: var(--text-body); }
.plan-card__desc { margin-top: var(--space-2); font-size: var(--text-body); min-height: 4.6em; }
.plan-card__features { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.plan-card__features li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--sand); }
.plan-card__features svg { width: 15px; height: 15px; margin-top: 3px; color: var(--green-light); flex-shrink: 0; }
.plan-card .btn { margin-top: var(--space-6); justify-content: center; width: 100%; }
/* Nova: one plan card in two halves. The left half reuses the featured
   plan-card surface; the right half lists what sets the scope as hairline
   rows, the same language as .feature-grid further down the page. */
.nova { display: grid; grid-template-columns: 1fr; border-radius: var(--radius-lg); border: 1px solid rgba(29, 158, 117, 0.5); background: linear-gradient(160deg, rgba(29, 158, 117, 0.16), rgba(29, 158, 117, 0) 60%), var(--ink-90); box-shadow: var(--shadow-lg); overflow: hidden; }
.nova__main, .nova__scope { padding: var(--space-6); }
.nova__main { display: flex; flex-direction: column; }
.nova__desc { margin-top: var(--space-2); max-width: 46ch; }
.nova__label { margin-top: var(--space-4); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-light); }
.nova__main .plan-card__features { margin-top: var(--space-2); flex-grow: 0; }
.nova__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-6); border-top: var(--border); }
.nova__foot .caption { flex: 1 1 32ch; max-width: 60ch; }
.nova__scope { border-top: var(--border); background: rgba(13, 13, 13, 0.25); }
.nova__scope .nova__label { margin-top: 0; }
.nova__scope dl { margin-top: var(--space-2); }
.nova__scope-item { padding-block: var(--space-3); border-bottom: var(--border); }
.nova__scope-item:last-child { border-bottom: none; padding-bottom: 0; }
.nova__scope dt { font-size: var(--text-h4); font-weight: 600; color: var(--sand); }
.nova__scope dd { margin: 6px 0 0; color: var(--stone-light); max-width: 46ch; }
@media (min-width: 900px) {
  .nova { grid-template-columns: 1.05fr 0.95fr; }
  .nova__foot { grid-column: 1 / -1; padding-inline: var(--space-8); }
  .nova__main, .nova__scope { padding: var(--space-8); }
  .nova__scope { border-top: none; border-left: var(--border); }
}
@media (max-width: 640px) {
  .nova__main, .nova__scope { padding: var(--space-4); }
  .nova__foot { padding: var(--space-4); }
  .nova__foot .btn { width: 100%; justify-content: center; }
}
.plans-note { margin-top: var(--space-6); max-width: 70ch; }
/* The referral line is a standing arrangement, not an offer, so it gets no box,
   no badge and no accent colour: same caption size and colour as the pricing
   note, only closer to it, so the two read as one footnote under the plans. */
.plans-referral { margin-top: var(--space-3); max-width: 70ch; }
.nova ~ .plans-referral { margin-top: var(--space-6); }

/* ---- FAQ (diensten) and place list (regio) -------------------------------
   Both reuse the hairline-row language of .feature-grid: one bordered block,
   rows separated by a rule, no cards within cards. */
.faq { border-top: var(--border); max-width: 900px; }
.faq__item { padding-block: var(--space-4); border-bottom: var(--border); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.faq__item h3 { font-size: var(--text-h4); }
.faq__item p { max-width: 70ch; font-size: var(--text-body); }
.faq__item .hero__link { padding-block: 10px; }

/* Homepage FAQ as a closed list. Only the questions show, so the section
   stays short and scannable; an answer opens in place. */
.faq--accordion .faq__item { padding-block: 0; gap: 0; display: block; }
.faq--accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-3); cursor: pointer; list-style: none;
}
.faq--accordion summary::-webkit-details-marker { display: none; }
.faq--accordion summary h3 { transition: color var(--dur-base) var(--ease-out); }
.faq--accordion summary:hover h3 { color: var(--green-light); }
.faq__toggle { position: relative; flex: none; width: 14px; height: 14px; color: var(--stone); }
.faq__toggle::before, .faq__toggle::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -0.75px;
  background: currentColor; transition: transform var(--dur-base) var(--ease-out);
}
.faq__toggle::after { transform: rotate(90deg); }
.faq--accordion details[open] .faq__toggle::after { transform: rotate(0deg); }
.faq__answer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-bottom: var(--space-3); }
.faq__answer p { max-width: 70ch; }
.faq__answer .hero__link { padding-block: 10px; }

/* Question field under the list: one line, no card. It reads as the last
   row of the FAQ rather than a second block competing with it. */
.ask { max-width: 900px; margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.ask[hidden] { display: none; }
.ask__label { display: block; font-weight: 600; color: var(--sand); margin-bottom: var(--space-1); }
.ask__row {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 20px;
  border: 1px solid rgba(247, 245, 241, 0.16); border-radius: var(--radius-pill); background: rgba(247, 245, 241, 0.04);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ask__row:focus-within { border-color: var(--green-light); box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.16); }
.ask__row input {
  flex: 1; min-width: 0; background: none; border: 0; padding-block: 10px;
  color: var(--sand); font-size: var(--text-body);
}
.ask__row input:focus { outline: none; }
.ask__row input::placeholder { color: var(--stone-dim); }
.ask__submit {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-light), var(--green)); color: var(--ink); cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.ask__submit:hover { transform: translateX(2px); }
.ask__submit:disabled { opacity: 0.5; cursor: default; transform: none; }
.ask__submit svg { width: 18px; height: 18px; }
.ask__status { color: var(--green-light); padding-left: 20px; }
.ask__answer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding-left: 20px; border-left: 1px solid var(--green-light); }
.ask__answer[hidden] { display: none; }
.ask__answer-text { color: var(--sand); max-width: 70ch; }
.ask__answer[data-state="error"] { border-left-color: var(--error); }
.ask__answer .hero__link { padding-block: 10px; }
.ask__note { font-size: var(--text-caption); color: var(--stone-dim); padding-left: 20px; }

/* Orb: state indicator for the question field (from the Factory kernel,
   _kernel/orb.css). It only appears while there is something to wait for;
   the label next to it carries the meaning, the orb only adds motion. */
.orb-status { display: inline-flex; align-items: center; gap: 12px; }
.orb-status[hidden] { display: none; }
.orb-status__label { font-size: 0.9375rem; }
.orb {
  --orb-size: 28px; --orb-dot: 2px; --orb-tilt: -18deg;
  position: relative; flex: none; width: var(--orb-size); height: var(--orb-size); color: inherit;
  perspective: calc(var(--orb-size) * 3); transform-style: preserve-3d; transform: rotateX(var(--orb-tilt));
}
@media (prefers-reduced-motion: no-preference) {
  .orb { animation: orb-spin var(--orb-dur, 26s) linear infinite; }
}
@keyframes orb-spin {
  from { transform: rotateX(var(--orb-tilt)) rotateY(0deg); }
  to   { transform: rotateX(var(--orb-tilt)) rotateY(360deg); }
}
.orb__dot {
  position: absolute; left: 50%; top: 50%; width: var(--orb-dot); height: var(--orb-dot);
  margin: calc(var(--orb-dot) / -2); border-radius: 50%; background: currentColor; opacity: 0.45;
  transition: opacity var(--dur-slow) var(--ease-out);
}
[data-orb-state="busy"] .orb { --orb-dur: 5.5s; }
[data-orb-state="busy"] .orb__dot { opacity: 0.92; }
@media print { .orb { display: none; } }
.places { display: grid; grid-template-columns: 1fr; border: var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-90); }
.places__item { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-bottom: var(--border); }
.places__item:last-child { border-bottom: none; }
.places__name { color: var(--sand); font-weight: 600; font-size: var(--text-body); }
.places__note { color: var(--stone); font-size: var(--text-caption); }
@media (min-width: 780px) {
  .places { grid-template-columns: repeat(3, 1fr); }
  .places__item { border-right: var(--border); }
  .places__item:nth-child(3n) { border-right: none; }
  .places__item:nth-last-child(-n+3) { border-bottom: none; }
}

/* ---- Cards / testimonials / cases --------------------------------------- */
.card { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--ink-90); border: var(--border); }
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 780px) { .grid--2 { grid-template-columns: 1fr 1fr; } }
/* Six integrations as full-width stacked cards cost roughly five phone screens
   of scrolling. On mobile these become hairline-separated rows with the icon
   beside the text instead of above it, which roughly halves that height; from
   780px they fan out into a three-column grid. One shared bordered block reads
   as a considered spec table rather than six repeated boxes, and nothing is
   hidden behind a carousel. */
.feature-grid { display: grid; grid-template-columns: 1fr; border: var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-90); }
.feature-grid__item { display: grid; grid-template-columns: 38px 1fr; gap: var(--space-2); align-items: start; padding: 18px; border-bottom: var(--border); }
.feature-grid__item:last-child { border-bottom: none; }
.feature-grid__icon { width: 38px; height: 38px; border-radius: var(--radius-sm); background: rgba(29, 158, 117, 0.14); display: flex; align-items: center; justify-content: center; color: var(--green-light); }
.feature-grid__icon svg { width: 19px; height: 19px; }
.feature-grid__item h3 { font-size: var(--text-body); }
.feature-grid__item p { margin-top: 4px; font-size: var(--text-body); color: var(--sand); }
.feature-grid__tools { display: block; margin-top: 6px; font-size: var(--text-caption); color: var(--stone); }
@media (min-width: 780px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid__item { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); border-right: var(--border); }
  .feature-grid__item:nth-child(3n) { border-right: none; }
  .feature-grid__item:nth-last-child(-n+3) { border-bottom: none; }
}
.included-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.included-card h3 { margin: 0; }
.included-card p { margin: 0; font-size: var(--text-body); color: var(--sand); }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 780px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card q { display: block; font-size: var(--text-h4); font-weight: 500; color: var(--sand); line-height: 1.4; }
.testimonial-card cite { display: block; margin-top: var(--space-3); font-style: normal; color: var(--stone); font-size: var(--text-caption); }

.case-card .caption { color: var(--green-light); }
.case-card h3 { margin-top: 10px; }
.case-card dl { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 10px; }
.case-card dt { font-size: var(--text-caption); color: var(--stone-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.case-card dd { color: var(--sand); font-size: 0.9375rem; margin-top: 2px; }

/* ---- Mission / values (over-ons) ---------------------------------------- */
.split { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

/* ---- Legal pages (privacy / voorwaarden / bedrijfsgegevens) --------------
   Dense, readable prose rather than a scroll-driven moment — kept plain and
   calm on purpose, matching the Contact page's restraint. */
.legal { max-width: 680px; }
.legal__updated { margin-bottom: var(--space-8); }
.legal__section { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid rgba(247, 245, 241, 0.1); }
.legal__section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal__section .lede { margin-top: var(--space-3); }
.legal__list { margin-top: var(--space-3); padding-left: 1.1em; display: flex; flex-direction: column; gap: 10px; }
.legal__list li { color: var(--sand); font-size: var(--text-lede); line-height: 1.5; list-style: disc; }

/* ---- CTA band -------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__glow { position: absolute; left: 50%; top: 0; width: 80vw; max-width: 1100px; height: 100%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(29, 158, 117, 0.28), rgba(29, 158, 117, 0) 70%); pointer-events: none; }
.cta-band__inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.cta-band h2 { margin-top: var(--space-2); }
.cta-band .lede { margin-top: var(--space-3); }
.cta-band .btn { margin-top: var(--space-6); }

/* ---- CTA band as a pinned reveal (home only) ---------------------------
   Same closing CTA, same finished design - only the way you arrive at it
   changes. .cta-band--pinned is a tall wrapper; .cta-band__sticky pins a
   full-viewport stage inside it (the same position: sticky primitive as
   .services-list--sticky), and main.js opens the card from a small glowing
   squircle to its full size by animating clip-path inset, so the copy
   inside is uncovered rather than scaled (stays crisp at every step) and
   the corner radius stays a constant 28px, which is what makes it read as
   growing instead of zooming. Fits the copy it carries: "je nova-moment"
   flaring open. NOTE: overflow must not be hidden/scroll/auto on the
   wrapper or the sticky child stops sticking - hence the override. */
/* The runway was 200vh, which meant a full empty screen of scrolling before
   the card had opened far enough to read - dead space directly in front of
   the page's main conversion point. 128vh keeps the reveal legible while
   cutting that void; the card also starts at 55% of its size rather than a
   120px seed, so no scroll position is ever blank. */
.cta-band--pinned { height: 128vh; padding-block: 0; overflow: visible; }
.cta-band--pinned .cta-band__sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
.cta-band--pinned .cta-band__card {
  position: relative; width: min(100%, var(--container-w)); height: min(78vh, 660px);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid rgba(29, 158, 117, 0.35);
  background: linear-gradient(160deg, rgba(29, 158, 117, 0.14), rgba(29, 158, 117, 0) 60%), var(--ink-90);
  clip-path: inset(0 round var(--radius-lg)); /* JS overwrites this per frame */
}
.cta-band--pinned .cta-band__glow {
  left: 0; top: 0; width: 100%; max-width: none; height: 100%; transform: none;
  background: radial-gradient(closest-side, rgba(29, 158, 117, 0.5), rgba(29, 158, 117, 0) 72%);
}
@media (prefers-reduced-motion: reduce) {
  .cta-band--pinned { height: auto; padding-block: var(--space-14); }
  .cta-band--pinned .cta-band__sticky { position: static; height: auto; padding: 0; }
  .cta-band--pinned .cta-band__card { height: auto; padding-block: var(--space-12); clip-path: none; }
  .cta-band--pinned .cta-band__inner { opacity: 1; transform: none; }
}

/* ---- Contact form -------------------------------------------------------- */
.form-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--stone); }
.form-field input, .form-field textarea {
  background: rgba(247, 245, 241, 0.04); border: 1px solid rgba(247, 245, 241, 0.16); border-radius: var(--radius-sm);
  padding: 14px 16px; color: var(--sand); font-size: var(--text-body); transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--green-light); background: rgba(247, 245, 241, 0.07); box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.16); }
.form-status { margin-top: var(--space-3); font-size: 0.9375rem; min-height: 1.4em; }
.form-status[data-state="success"] { color: var(--green-light); }
.form-status[data-state="error"] { color: var(--error); }
.form-note { margin-top: var(--space-2); font-size: var(--text-caption); }

/* ---- Footer -------------------------------------------------------------- */
.l-footer { padding-top: var(--space-14); padding-bottom: var(--space-6); border-top: 1px solid rgba(247, 245, 241, 0.1); background: var(--ink-deep); }
.l-footer__mega { display: block; }
/* A one-shot keyframe animation (triggered via JS on mouseenter) rather than
   a transition tied to :hover — a transition reverses the instant the
   cursor leaves, so a quick pass in one direction barely showed any sweep
   while a slower approach from another did. The keyframe always plays to
   completion once started, regardless of how briefly the cursor is over it
   or which direction it came from. */
/* "bouwen." renders 4.21x the font-size wide. Under about 390px the old clamp
   asked for more room than the container had (332px of text in 327px at
   375px), so word-break split the word and dropped the full stop onto a line
   of its own. The second term caps the size at what actually fits, with ~8%
   spare for a fallback font, and only takes effect on narrow screens - from
   roughly 480px up the clamp is still the smaller of the two, so the desktop
   scale is untouched. Paired with removing word-break below, which means no
   word can ever be split mid-way again. */
.l-footer__mega-word { font-size: min(clamp(3.5rem, 4vw + 4rem, 11rem), calc(21.87vw - 10.5px)); font-weight: 700; letter-spacing: -0.04em; line-height: 0.85; background: linear-gradient(100deg, var(--sand) 30%, var(--green-light) 60%, var(--sand) 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; background-position: 0 0; }
.l-footer__mega-word.is-sweeping { animation: mega-sweep 1.1s var(--ease-out); }
@keyframes mega-sweep {
  0% { background-position: 0 0; }
  55% { background-position: -120% 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .l-footer__mega-word.is-sweeping { animation: none; } }
.l-footer__row { margin-top: var(--space-10); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-8); }
.l-footer__col h3 { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-dim); font-weight: 600; }
.l-footer__col ul { margin-top: var(--space-2); display: flex; flex-direction: column; gap: 10px; }
.l-footer__col a { color: var(--stone-light); }
.l-footer__col a:hover { color: var(--sand); }
.footer-social-link { display: inline-flex; align-items: center; gap: 8px; }
.footer-social-link svg { width: 16px; height: 16px; }
.l-footer__legal { margin-top: var(--space-10); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.l-footer__legal a, .l-footer__legal button { color: var(--stone-dim); font-size: var(--text-caption); }
.l-footer__legal a:hover, .l-footer__legal button:hover { color: var(--stone-light); }
.l-footer__legal button { text-decoration: underline; text-underline-offset: 3px; }
/* On a phone every footer and legal link sat at 21-28px tall, well under the
   44px a fingertip needs, which made the footer navigation fiddly to hit on
   exactly the pages where it is the main way onward. The type stays the same
   size; only the tappable area grows, and the list gap shrinks to absorb it so
   the footer barely gets taller. */
@media (max-width: 700px) {
  .l-footer__col ul { gap: 0; }
  .l-footer__col li { display: flex; }
  .l-footer__col li > a,
  .l-footer__col li > span { display: inline-flex; align-items: center; min-height: 44px; }
  .l-footer__legal { gap: var(--space-2) var(--space-3); }
  .l-footer__legal a, .l-footer__legal button { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- Cookie consent banner ------------------------------------------- */
.cookie-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 2500;
  max-width: 620px; margin-inline: auto;
  background: var(--ink-90); border: 1px solid rgba(247, 245, 241, 0.14); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-4) var(--space-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  transform: translateY(140%); opacity: 0; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner p { flex: 1 1 260px; font-size: 0.9375rem; color: var(--stone-light); line-height: 1.5; margin: 0; }
/* This link sits mid-sentence, so it cannot become a 44px block without
   breaking the line. Vertical padding on an inline element overflows the line
   box instead of growing it, which enlarges the tap area to 44px while the
   paragraph keeps its exact layout. */
.cookie-banner p a { color: var(--sand); text-decoration: underline; text-underline-offset: 2px; padding-block: 11px; }
/* The contact card's e-mail address is a primary action on that page, and it
   already sits in a flex row, so it can simply be given the full height. */
.card .lede a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner .btn { padding: 11px 18px; font-size: 0.875rem; }
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: opacity var(--dur-base) linear; transform: none; } }
.l-footer__bottom { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(247, 245, 241, 0.08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); color: var(--stone-dim); font-size: var(--text-caption); }

/* ---- Utilities ------------------------------------------------------- */
.section--tight { padding-top: calc(var(--space-16) + 20px); padding-bottom: var(--space-8); }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
/* No word-break here on purpose: the font-size above is capped to fit, so
   breaking inside a word is never needed and would only ever produce an
   orphaned full stop. */