/* ==========================================================================
   Elevio
   Kleuren en typografie volgen de merkgids. Wil je iets globaal wijzigen,
   pas het aan in :root hieronder. Alle beweging respecteert
   prefers-reduced-motion en gebruikt enkel transform en opacity.
   ========================================================================== */

:root {
  /* Merkkleuren */
  --mint: #83C9B7;
  --deep: #16705A;
  --glow: #5FEBC0;
  --ink: #0E1614;

  /* Neutralen */
  --mist: #F4F8F7;
  --white: #FFFFFF;
  --line: #D6E3DF;
  --line-strong: #B8CCC6;
  --line-soft: #E6EFEC;
  --grey: #5C6F69;
  --text: #16211E;

  /* Donkere secties */
  --ink-2: #16211E;
  --ink-3: #1B2825;
  --ink-line: #263531;
  --ink-text: #C3D3CE;
  --ink-dim: #8FA49E;
  --ink-faint: #6F847E;

  /* Typografie */
  --display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Maatvoering */
  --pad: clamp(20px, 5vw, 44px);
  --max: 1180px;
  --narrow: 720px;

  /* Beweging */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-swipe: cubic-bezier(0.76, 0, 0.24, 1);

  /* Lagen */
  --z-nav: 100;
  --z-menu: 110;
  --z-loader: 200;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: 72px;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--deep); text-underline-offset: 2px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-dark a:focus-visible,
.on-dark button:focus-visible { outline-color: var(--mint); }

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

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

.container { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.narrow { max-width: var(--narrow); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.55;
}
.on-dark .eyebrow { color: var(--mint); }

.lede { font-size: 19.5px; line-height: 1.55; color: var(--grey); }
.on-dark .lede { color: var(--ink-text); }

/* ==========================================================================
   Paginaovergangen
   Browsers met de View Transitions API krijgen een zachte overgang tussen
   pagina's. De rest merkt er niets van en navigeert gewoon.
   ========================================================================== */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 260ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) both; }
}

@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

.site-header { view-transition-name: site-header; }

/* ==========================================================================
   Openingsanimatie
   ========================================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--ink);
  display: grid;
  place-items: center;
  transform: translateY(0);
  transition: transform 900ms var(--ease-swipe);
}

.loader.is-done { transform: translateY(-101%); }
.loader[hidden] { display: none; }

.loader-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(12px);
  animation: loader-in 620ms var(--ease-soft) 80ms forwards;
}
.loader-mark img { width: 30px; }
.loader-mark span {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--white);
}

@keyframes loader-in { to { opacity: 1; transform: none; } }

.loader-bar {
  position: absolute;
  left: 50%;
  bottom: clamp(60px, 14vh, 130px);
  transform: translateX(-50%);
  width: min(200px, 40vw);
  height: 2px;
  background: var(--ink-line);
  overflow: hidden;
}
.loader-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left;
  animation: loader-fill 900ms var(--ease-out) forwards;
}
@keyframes loader-fill { to { transform: scaleX(1); } }

/* ==========================================================================
   Scroll-onthullingen
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 760ms var(--ease-out),
    transform 760ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 85ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Beeld dat vanachter een gordijn tevoorschijn komt. Het gordijn zit in een
   pseudo-element en niet in een clip-path op het element zelf: een volledig
   weggeknipt element wordt door de IntersectionObserver nooit als zichtbaar
   gezien, en dan komt de animatie nooit op gang. */
[data-reveal="clip"] {
  opacity: 1;
  transform: none;
  position: relative;
  overflow: hidden;
}
[data-reveal="clip"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--ink);
  z-index: 2;
  transform: translateY(0);
  transition: transform 1000ms var(--ease-soft);
}
[data-reveal="clip"].is-in::after { transform: translateY(-101%); }

[data-reveal="clip"] img {
  transform: scale(1.06);
  transition: transform 1500ms var(--ease-soft);
}
[data-reveal="clip"].is-in img { transform: none; }

.line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line-mask > span {
  display: block;
  transform: translateY(115%);
  transition: transform 950ms var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.is-ready .line-mask > span { transform: none; }

/* ==========================================================================
   Header
   ========================================================================== */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 12px 18px;
  z-index: 300;
}
.skip:focus { left: 12px; top: 12px; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition:
    transform 480ms var(--ease-out),
    border-color 300ms ease;
}

.site-header.is-stuck { border-bottom-color: var(--line-soft); }
.site-header.is-hidden { transform: translateY(-100%); }

.progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--mint);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  opacity: 0;
  transition: opacity 300ms ease;
}
.site-header.is-stuck .progress { opacity: 1; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.brand img {
  width: 21px;
  transition: transform 500ms var(--ease-soft);
}
.brand:hover img { transform: translateY(-3px); }
.brand span {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 21px;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.nav-links { display: flex; align-items: center; gap: 30px; }

.nav-links a:not(.btn) {
  font-family: var(--display);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
  position: relative;
  padding: 4px 0;
}

.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 420ms var(--ease-soft);
}
.nav-links a:not(.btn):hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-links a[aria-current="page"] { color: var(--deep); font-weight: 600; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  padding: 10px 13px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  min-height: 44px;
  transition: border-color 250ms ease;
}
.nav-toggle:hover { border-color: var(--ink); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px var(--pad) 24px;
    z-index: var(--z-menu);
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) {
    padding: 15px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 17px;
    animation: menu-item 420ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links .btn { margin-top: 16px; justify-content: center; }
}

@keyframes menu-item { from { opacity: 0; transform: translateY(10px); } }

/* ==========================================================================
   Knoppen
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.012em;
  padding: 14px 24px;
  min-height: 46px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 320ms var(--ease-out), border-color 320ms var(--ease-out);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform 480ms var(--ease-soft);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }

.btn .arrow { display: inline-block; transition: transform 420ms var(--ease-soft); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary { background: var(--deep); color: var(--white); }
.btn-primary::before { background: var(--ink); }

.btn-mint, .on-dark .btn-mint { background: var(--mint); color: var(--ink); }
.btn-mint::before { background: var(--glow); }
.btn-mint:hover, .on-dark .btn-mint:hover { color: var(--ink); }

.btn-ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn-ghost::before { background: var(--mist); }
.btn-ghost:hover { border-color: var(--ink); }

.on-dark .btn-ghost { border-color: var(--ink-line); color: var(--white); }
.on-dark .btn-ghost::before { background: var(--ink-3); }
.on-dark .btn-ghost:hover { border-color: var(--mint); color: var(--white); }
.on-dark .btn-primary { color: var(--white); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--deep);
}
.link-arrow .arrow { transition: transform 420ms var(--ease-soft); }
.link-arrow:hover .arrow { transform: translateX(5px); }
.on-dark .link-arrow { color: var(--mint); }

/* ==========================================================================
   Secties
   ========================================================================== */

section { padding: clamp(64px, 9vw, 116px) 0; position: relative; }

.on-dark { background: var(--ink); color: var(--white); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark p { color: var(--ink-text); }
.on-dark a:not(.btn) { color: var(--mint); }

.on-mist { background: var(--mist); }

.section-head { max-width: 660px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(28px, 4.2vw, 42px); font-weight: 800; margin-bottom: 16px; }
.section-head p { margin-bottom: 0; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--ink);
  color: var(--white);
  padding: clamp(72px, 11vw, 130px) 0 clamp(64px, 9vw, 110px);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 780px;
  max-height: 780px;
  background: radial-gradient(circle, rgba(131, 201, 183, 0.13) 0%, rgba(131, 201, 183, 0) 68%);
  pointer-events: none;
  transform: translate3d(0, calc(var(--sy, 0) * 0.1px), 0);
}

.hero .container { position: relative; }

.hero h1 {
  font-size: clamp(32px, 7.2vw, 72px);
  font-weight: 800;
  letter-spacing: -0.046em;
  line-height: 1.02;
  max-width: 17ch;
  color: var(--white);
}
.hero h1 .accent { color: var(--mint); }

.hero .lede {
  max-width: 54ch;
  margin: 28px 0 34px;
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--ink-text);
}

.hero-note {
  margin-top: 34px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.page-hero {
  background: var(--ink);
  color: var(--white);
  padding: clamp(64px, 9vw, 100px) 0 clamp(52px, 7vw, 84px);
  overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(34px, 5.8vw, 56px);
  font-weight: 800;
  letter-spacing: -0.042em;
  max-width: 18ch;
  color: var(--white);
}
.page-hero .lede { max-width: 58ch; margin-top: 24px; color: var(--ink-text); }

/* ==========================================================================
   Loopband met vakgebieden
   ========================================================================== */

.marquee {
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  overflow: hidden;
  padding: 20px 0;
  background: var(--ink);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0 26px;
  display: flex;
  align-items: center;
  gap: 26px;
  white-space: nowrap;
}
.marquee-item::after {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--mint);
  opacity: 0.6;
  flex: none;
}

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

/* ==========================================================================
   Kaarten
   ========================================================================== */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 20px; }

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
  transition: border-color 400ms var(--ease-out), transform 500ms var(--ease-soft);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(131, 201, 183, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card:hover::before { opacity: 1; }

.card > * { position: relative; }

.card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.024em; }
.card p { font-size: 15.5px; color: var(--grey); margin: 0; }

.card-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--deep);
}
.on-dark .card { background: var(--ink-2); border-color: var(--ink-line); }
.on-dark .card:hover { border-color: var(--ink-line); }
.on-dark .card p { color: var(--ink-text); }
.on-dark .card-num { color: var(--mint); }

/* ==========================================================================
   Dienstlijnen
   ========================================================================== */

.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 22px; }

.lane {
  position: relative;
  border: 1px solid var(--line);
  padding: 38px 34px 40px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: var(--white);
  overflow: hidden;
  transition: border-color 400ms var(--ease-out);
}

.lane::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--mint);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 620ms var(--ease-soft);
}
.lane:hover { border-color: var(--line-strong); }
.lane:hover::after { transform: scaleY(1); }

.lane-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep);
}

.lane h3 { font-size: clamp(24px, 3vw, 31px); font-weight: 800; letter-spacing: -0.03em; }
.lane p { font-size: 16px; color: var(--grey); margin: 0; }

.lane ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lane li { font-size: 15.5px; color: var(--text); padding-left: 26px; position: relative; }
.lane li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 2px;
  background: var(--mint);
  transform-origin: left;
  transition: transform 420ms var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 40ms);
}
.lane:hover li::before { transform: scaleX(1.5); }

.lane .lane-cta { margin-top: auto; padding-top: 26px; }

/* ==========================================================================
   OpMaat-blok
   ========================================================================== */

.case {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
@media (max-width: 940px) { .case { grid-template-columns: 1fr; } }

.case-body h3 { font-size: clamp(28px, 3.8vw, 40px); font-weight: 800; margin-bottom: 10px; }
.case-kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.case-kicker::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: 0.55; }
.case-sub { font-size: 16.5px; color: var(--ink-text); margin-bottom: 22px; }

.case-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 30px; }
.case-stat {
  border: 1px solid var(--ink-line);
  padding: 16px 20px;
  flex: 1 1 132px;
  transition: border-color 400ms ease;
}
.case-stat:hover { border-color: var(--mint); }
.case-stat .v {
  font-family: var(--display);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.03em;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}
.case-stat .l {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 5px;
}

.case-visual { position: relative; }

.case-shot {
  border: 1px solid var(--ink-line);
  background: var(--ink-2);
  overflow: hidden;
  transform: translate3d(0, calc(var(--py, 0) * 1px), 0);
}
.case-shot img { width: 100%; }

.case-cap {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  margin-top: 16px;
  line-height: 1.6;
}

/* De schermafbeeldingen hebben sterk verschillende verhoudingen, dus staan ze
   onder elkaar in plaats van in een raster. Zo blijft elk scherm leesbaar. */
.gallery { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); max-width: 900px; margin: 0 auto; }
.gallery figure { margin: 0; }
.gallery .frame {
  border: 1px solid var(--line);
  background: var(--mist);
  overflow: hidden;
}
.gallery img { width: 100%; transition: transform 900ms var(--ease-soft); }
.gallery .frame:hover img { transform: scale(1.03); }
.gallery figcaption {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--grey);
  margin-top: 16px;
  line-height: 1.6;
  max-width: 60ch;
}

/* ==========================================================================
   Werkwijze met vastgezette kop
   ========================================================================== */

.process { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(30px, 5vw, 72px); align-items: start; }
@media (max-width: 940px) { .process { grid-template-columns: 1fr; } }

.process-aside { position: sticky; top: 108px; }
@media (max-width: 940px) { .process-aside { position: static; } }

.process-steps { display: flex; flex-direction: column; }

.process-step {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 4px 22px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.process-step:last-child { border-bottom: 1px solid var(--line); }

.process-step .n {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--line-strong);
  font-variant-numeric: tabular-nums;
  transition: color 420ms ease;
}
.process-step.is-in .n { color: var(--deep); }

.process-step h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.022em; }
.process-step p { grid-column: 2; font-size: 15.5px; color: var(--grey); margin: 8px 0 0; }
@media (max-width: 560px) { .process-step { grid-template-columns: 40px 1fr; } }

/* ==========================================================================
   Over
   ========================================================================== */

.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: start; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

.about-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.about-facts li {
  padding: 17px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 15.5px;
  border-top: 1px solid var(--line);
}
.about-facts li:last-child { border-bottom: 1px solid var(--line); }
.about-facts .k { color: var(--grey); }
.about-facts .v { font-family: var(--display); font-weight: 600; color: var(--text); text-align: right; }
.on-dark .about-facts li { border-color: var(--ink-line); }
.on-dark .about-facts .k { color: var(--ink-dim); }
.on-dark .about-facts .v { color: var(--white); }

/* ==========================================================================
   Oproepblok
   ========================================================================== */

.cta-band {
  background: var(--ink);
  color: var(--white);
  padding: clamp(64px, 9vw, 110px) 0;
  overflow: hidden;
  position: relative;
}
.cta-band::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -55%;
  width: 90vw;
  height: 90vw;
  max-width: 900px;
  max-height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(131, 201, 183, 0.1) 0%, rgba(131, 201, 183, 0) 66%);
  pointer-events: none;
}
.cta-band .container { position: relative; }
.cta-band h2 { font-size: clamp(29px, 4.6vw, 48px); font-weight: 800; letter-spacing: -0.042em; max-width: 20ch; color: var(--white); }
.cta-band p { color: var(--ink-text); max-width: 52ch; margin: 22px 0 32px; font-size: 18px; }

/* ==========================================================================
   Vragen
   ========================================================================== */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  padding: 22px 46px 22px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color 260ms ease;
}
.faq summary:hover { color: var(--deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  background: var(--deep);
  transition: transform 400ms var(--ease-soft), opacity 300ms ease;
}
.faq summary::before { width: 14px; height: 1.5px; transform: translateY(-50%); }
.faq summary::after { width: 1.5px; height: 14px; right: 14px; transform: translateY(-50%); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq .answer { padding: 0 0 24px; max-width: 68ch; color: var(--grey); font-size: 16px; }

/* ==========================================================================
   Formulier
   ========================================================================== */

.form { display: flex; flex-direction: column; gap: 22px; max-width: 640px; }
.field { display: flex; flex-direction: column; gap: 7px; }

.field label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}
.field .hint { font-size: 13.5px; color: var(--grey); font-family: var(--body); font-weight: 400; }

.field input, .field select, .field textarea {
  font-family: var(--body);
  font-size: 16px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 13px 15px;
  width: 100%;
  min-height: 46px;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--deep);
  box-shadow: 0 0 0 3px rgba(22, 112, 90, 0.12);
}
.field textarea { min-height: 140px; resize: vertical; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.form-note { font-size: 14px; color: var(--grey); }
.hp { position: absolute; left: -9999px; }

.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 68px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-aside { border: 1px solid var(--line); padding: 30px 28px; background: var(--mist); }
.contact-aside h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.contact-aside p { font-size: 15.5px; color: var(--grey); }
.contact-aside .direct { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15.5px; }
.contact-aside .direct a { font-family: var(--display); font-weight: 600; }

/* ==========================================================================
   Voettekst
   ========================================================================== */

.site-footer { background: var(--ink); color: var(--ink-text); padding: 72px 0 42px; font-size: 15px; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--ink-line);
}
@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}

.footer-brand .brand span { color: var(--white); }
.footer-brand p { margin-top: 18px; max-width: 34ch; color: var(--ink-dim); font-size: 15px; }

.footer-col h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  color: var(--ink-text);
  text-decoration: none;
  font-size: 15px;
  transition: color 260ms ease, transform 380ms var(--ease-soft);
  display: inline-block;
}
.footer-col a:hover { color: var(--mint); transform: translateX(4px); }

.footer-base {
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.footer-base a { color: var(--ink-faint); }
.footer-base a:hover { color: var(--mint); }

/* ==========================================================================
   Hulpklassen
   ========================================================================== */

.mt-lg { margin-top: 44px; }
.tabular { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Minder beweging
   Wie in zijn systeem aangeeft beweging te willen beperken, krijgt een
   volledig statische site. Alles blijft leesbaar en bruikbaar.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal="clip"]::after { display: none !important; }
  [data-reveal="clip"] img { transform: none !important; }
  .line-mask > span { transform: none !important; }
  .loader { display: none !important; }
  .marquee-track { animation: none !important; }
  .case-shot { transform: none !important; }
  .hero::before { transform: none !important; }
}

/* ==========================================================================
   ==========================================================================
   LAAG 2: het uitgesproken werk
   Alles hieronder komt bovenop de basis. Het staat apart zodat je het in
   één blok kunt lezen, aanpassen of weghalen zonder de rest te breken.
   Volgorde: korrel, cursor, opening, hero-veld, koppen, knoppen, kaarten,
   loopband, werkwijze, vragen, voettekst.
   ==========================================================================
   ========================================================================== */

:root {
  --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --z-grain: 90;
  --z-cursor: 400;
}

/* ==========================================================================
   Filmkorrel
   Een heel dun laagje ruis over de hele pagina. Je ziet het niet bewust,
   maar het haalt de vlakke digitale look uit de grote donkere vlakken.
   ========================================================================== */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ==========================================================================
   Eigen cursor
   Alleen op toestellen met een echte muis, en alleen als het script hem
   heeft kunnen opbouwen. Faalt het script, dan blijft de gewone cursor
   gewoon staan.
   ========================================================================== */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
}
.has-cursor .cursor.is-awake { opacity: 1; }

.cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid var(--deep);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate3d(var(--x, -200px), var(--y, -200px), 0) scale(var(--s, 1));
  transition:
    width 420ms var(--ease-back),
    height 420ms var(--ease-back),
    margin 420ms var(--ease-back),
    background-color 300ms ease,
    border-color 300ms ease;
}
.cursor-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--deep);
  transform: translate3d(var(--x, -200px), var(--y, -200px), 0);
  transition: opacity 220ms ease;
}
.cursor-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 240ms ease, transform 320ms var(--ease-back);
  white-space: nowrap;
}

/* Boven een donkere sectie draait het contrast om. */
.cursor.on-ink .cursor-ring { border-color: var(--mint); }
.cursor.on-ink .cursor-dot { background: var(--mint); }

/* Boven iets klikbaars wordt de ring groter en licht hij op. */
.cursor.is-link .cursor-ring {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background: rgba(131, 201, 183, 0.14);
}
.cursor.is-link .cursor-dot { opacity: 0; }

/* Boven een beeld met een label wordt hij een volle schijf met tekst. */
.cursor.is-label .cursor-ring {
  width: 86px;
  height: 86px;
  margin: -43px 0 0 -43px;
  background: var(--mint);
  border-color: var(--mint);
}
.cursor.is-label .cursor-dot { opacity: 0; }
.cursor.is-label .cursor-label { opacity: 1; transform: none; }

.cursor.is-down .cursor-ring { --s: 0.82; }

.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor summary,
.has-cursor label,
.has-cursor .card,
.has-cursor .lane { cursor: none; }

/* In een invulveld hoort de gewone tekstcursor thuis, anders weet je niet
   meer waar je typt. */
.has-cursor input,
.has-cursor textarea,
.has-cursor select { cursor: auto; }
.cursor.is-field { opacity: 0 !important; }

/* ==========================================================================
   Opening
   Het paneel schuift niet meer in één stuk weg, maar breekt in vijf latten
   die na elkaar omhoog gaan. Dat is de beweging van de naam: opheffen.
   ========================================================================== */

.loader { background: transparent; transform: none; transition: none; }
.loader.is-done { transform: none; }

.loader-slats {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
}
.loader-slat {
  flex: 1 1 20%;
  background: var(--ink);
  transform: translateY(0);
  transition: transform 820ms var(--ease-swipe);
  transition-delay: calc(var(--i, 0) * 62ms);
}
.loader.is-done .loader-slat { transform: translateY(-101%); }

/* De balk en het percentage staan al absoluut ten opzichte van het paneel.
   Zet daar geen position: relative op, want dan vallen ze terug in de
   rasterstroom en schuift de balk naar de rand. */
.loader-mark { position: relative; z-index: 1; }
.loader-bar,
.loader-pct { z-index: 1; }

.loader-mark {
  transition: opacity 380ms ease, transform 520ms var(--ease-soft);
}
.loader.is-done .loader-mark {
  opacity: 0;
  transform: translateY(-16px);
  transition-delay: 0ms;
}
.loader.is-done .loader-bar,
.loader.is-done .loader-pct { opacity: 0; transition: opacity 300ms ease; }

.loader-pct {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(60px, 14vh, 130px) + 18px);
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Het merkteken in de opening ademt licht. */
.loader-mark img { animation: mark-lift 1600ms var(--ease-soft) infinite alternate; }
@keyframes mark-lift { to { transform: translateY(-5px); } }

/* ==========================================================================
   Het veld achter de hero
   Een raster van korte streepjes dat naar je muis wijst. Zonder muis blijft
   het zichzelf traag rondsturen, zodat de pagina ook stil nog leeft.
   Het canvas is puur decoratief en staat achter alle tekst.
   ========================================================================== */

.hero-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1400ms ease 260ms;
  /* Het veld is het sterkst rechts, waar geen tekst staat, en dooft uit
     richting de kop en de randen. Zo blijft de titel het rustigste punt
     van het scherm terwijl de rest leeft. */
  -webkit-mask-image: radial-gradient(120% 105% at 76% 45%, #000 0%, rgba(0, 0, 0, 0.55) 46%, rgba(0, 0, 0, 0.12) 78%, transparent 100%);
  mask-image: radial-gradient(120% 105% at 76% 45%, #000 0%, rgba(0, 0, 0, 0.55) 46%, rgba(0, 0, 0, 0.12) 78%, transparent 100%);
}
.is-ready .hero-field { opacity: 1; }

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

/* De hero zakt en vervaagt licht terwijl je hem verlaat. */
.hero .container {
  transform: translate3d(0, calc(var(--sy, 0) * 0.075px), 0);
  opacity: var(--hero-fade, 1);
  will-change: transform;
}

/* Een dunne mintlijn die de hero afsluit en zich uitrolt zodra de pagina er is. */
.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--mint), transparent);
  opacity: 0.5;
  transform: scaleX(0);
  transition: transform 1600ms var(--ease-soft) 500ms;
}
.is-ready .hero::after,
.is-ready .page-hero::after { transform: scaleX(1); }

/* ==========================================================================
   Koppen die woord per woord opkomen
   Het script hakt de kop in woorden, elk in een eigen venstertje. Ze komen
   van onder in beeld, kort na elkaar. Lukt dat niet, dan staat de kop er
   gewoon meteen.
   ========================================================================== */

.split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.split .w > span {
  display: block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 52ms);
}
.split.is-in .w > span { transform: none; }

/* ==========================================================================
   Knoppen en links
   ========================================================================== */

/* De pijl vliegt er langs de ene kant uit en komt langs de andere terug. */
.btn:hover .arrow,
.link-arrow:hover .arrow { animation: arrow-loop 560ms var(--ease-out); }
@keyframes arrow-loop {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(15px); opacity: 0; }
  46% { transform: translateX(-15px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* De vulling start onder de muis in plaats van altijd onderaan. */
.btn::before {
  transform-origin: var(--bx, 50%) 100%;
}

/* Knoppen die zich lichtjes naar je muis toe bewegen. */
[data-magnetic] {
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform 620ms var(--ease-soft);
}
[data-magnetic].is-pulled { transition: transform 180ms ease-out; }

/* Tekst die doorrolt bij het zweven, in de navigatie en de voettekst. */
.roll {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.roll > span {
  display: block;
  transition: transform 520ms var(--ease-soft);
}
.roll > span + span {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(105%);
}
a:hover .roll > span { transform: translateY(-105%); }
a:hover .roll > span + span { transform: translateY(0); }

/* ==========================================================================
   Kaarten en lijnen met diepte
   Ze kantelen een paar graden mee met je muis. Genoeg om te voelen,
   te weinig om af te leiden.
   ========================================================================== */

.card,
.lane,
.case-shot,
.gallery .frame {
  transform-style: preserve-3d;
  will-change: transform;
}

.card {
  transition:
    border-color 400ms var(--ease-out),
    transform 600ms var(--ease-soft),
    box-shadow 600ms var(--ease-soft);
}
.card:hover,
.lane:hover,
.gallery .frame:hover {
  transform:
    perspective(1000px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, -5px, 0);
}
.card:hover { box-shadow: 0 24px 50px -32px rgba(14, 22, 20, 0.45); }
.on-dark .card:hover { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7); }

.lane {
  transition:
    border-color 400ms var(--ease-out),
    transform 600ms var(--ease-soft);
}

/* De lijn links op een dienstlijn krijgt een gloed mee. */
.lane::after { box-shadow: 0 0 22px rgba(95, 235, 192, 0); transition: transform 620ms var(--ease-soft), box-shadow 620ms ease; }
.lane:hover::after { box-shadow: 0 0 22px rgba(95, 235, 192, 0.55); }

/* Een mintstip die in de hoek van een kaart openbloeit. */
.card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--mint);
  transition: width 520ms var(--ease-soft);
}
.card:hover::after { width: 46px; }

.case-shot {
  transition: transform 600ms var(--ease-soft), box-shadow 600ms var(--ease-soft);
  box-shadow: 0 30px 70px -50px rgba(0, 0, 0, 0.9);
}
.case-shot.is-tilting {
  transform:
    perspective(1000px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, calc(var(--py, 0) * 1px - 5px), 0);
  box-shadow: 0 40px 90px -46px rgba(95, 235, 192, 0.35);
}

/* ==========================================================================
   Loopband die met je scrollt
   Het script neemt de animatie over: scrol je naar beneden, dan versnelt
   ze; scrol je terug, dan draait ze om. Zonder script blijft de gewone
   CSS-animatie draaien.
   ========================================================================== */

.js-marquee .marquee-track {
  animation: none;
  will-change: transform;
}
.marquee { cursor: default; }

/* ==========================================================================
   Werkwijze met een rail die zich vult
   ========================================================================== */

.process-steps { position: relative; padding-left: 0; }
.process-steps::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.process-steps::after {
  content: "";
  position: absolute;
  left: -14px;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--mint), var(--deep));
  transform: scaleY(var(--fill, 0));
  transform-origin: top;
  transition: transform 180ms linear;
}
@media (max-width: 560px) {
  .process-steps::before,
  .process-steps::after { display: none; }
}

.process-step .n {
  position: relative;
  display: inline-block;
  transition: color 420ms ease, transform 520ms var(--ease-back);
}
.process-step.is-active .n {
  color: var(--deep);
  transform: translateX(3px) scale(1.18);
  transform-origin: left center;
}
.process-step h3 { transition: transform 520ms var(--ease-soft); }
.process-step.is-active h3 { transform: translateX(4px); }

/* ==========================================================================
   Vragen die soepel opengaan
   ========================================================================== */

.faq details { overflow: hidden; }
.faq .answer { will-change: height; }
.faq summary { transition: color 260ms ease, padding-left 420ms var(--ease-soft); }
.faq summary:hover { padding-left: 6px; }
.faq details[open] summary { color: var(--deep); }

/* ==========================================================================
   Beeldband onder de foutmelding
   Een rustig raster met één cluster dat uit de pas loopt. Het beeld is
   decoratief, dus het krijgt een lege alt en wordt pas geladen als het
   in beeld komt.
   ========================================================================== */

.error-band {
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
  overflow: hidden;
  line-height: 0;
}
.error-band img {
  width: 100%;
  height: clamp(180px, 30vw, 320px);
  object-fit: cover;
  object-position: center;
  opacity: 0.9;
}

/* ==========================================================================
   Voettekst met het merk op ware grootte
   ========================================================================== */

.footer-mark {
  margin: 54px 0 -14px;
  overflow: hidden;
  line-height: 0.82;
  user-select: none;
}
.footer-mark span {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(72px, 19vw, 268px);
  letter-spacing: -0.055em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-line);
  transform: translateY(102%);
  transition: transform 1200ms var(--ease-soft), -webkit-text-stroke-color 700ms ease;
}
.footer-mark.is-in span { transform: none; }
.site-footer:hover .footer-mark span { -webkit-text-stroke-color: var(--mint); }

/* Ondersteunt de browser geen tekstlijn, dan wordt het gewoon een heel
   donkere letter in plaats van niets. */
@supports not (-webkit-text-stroke: 1px black) {
  .footer-mark span { color: var(--ink-3); }
}

/* ==========================================================================
   Losse verfijningen
   ========================================================================== */

/* Het label van een dienstlijn krijgt een knipperend stipje. */
.lane-tag::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 9px;
  vertical-align: middle;
  background: var(--mint);
  animation: pulse-dot 2600ms ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}

/* Cijfers in de case springen even op als ze geteld zijn. */
.case-stat { transition: border-color 400ms ease, transform 520ms var(--ease-soft); }
.case-stat:hover { transform: translateY(-4px); }
.case-stat .v span { display: inline-block; }
.case-stat.is-counted .v span { animation: pop 520ms var(--ease-back); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Feiten in de lijst schuiven één voor één binnen. */
.about-facts li {
  transition: background-color 300ms ease, padding-left 420ms var(--ease-soft);
}
.about-facts li:hover { padding-left: 8px; }
.on-dark .about-facts li:hover { background: rgba(131, 201, 183, 0.05); }

/* Invulvelden lichten op als je erin staat. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow: 0 0 0 3px rgba(22, 112, 90, 0.12), 0 8px 24px -18px rgba(14, 22, 20, 0.6);
}
.field { position: relative; }
.field label { transition: color 260ms ease; }
.field:focus-within label { color: var(--deep); }

/* De voortgangsbalk in de kop krijgt een gloed aan de kop van de lijn. */
.progress { box-shadow: 0 0 12px rgba(95, 235, 192, 0.6); }

/* Paginaovergang: het nieuwe scherm komt met een mintveeg binnen. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-new(root) { animation: vt-in 480ms var(--ease-soft) both; }
}

/* ==========================================================================
   Minder beweging, deel 2
   Alles wat hierboven bijkwam, gaat hier weer uit.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body::after { display: none !important; }
  .cursor { display: none !important; }
  .has-cursor, .has-cursor * { cursor: auto !important; }
  .hero-field { display: none !important; }
  .hero .container { transform: none !important; opacity: 1 !important; }
  .hero::after, .page-hero::after { transform: scaleX(1) !important; }
  .split .w > span { transform: none !important; }
  .footer-mark span { transform: none !important; }
  .loader-slat { transform: translateY(-101%) !important; }
  .lane-tag::after { animation: none !important; opacity: 0.8 !important; }
  .loader-mark img { animation: none !important; }
  [data-magnetic] { transform: none !important; }
  .card:hover, .lane:hover, .case-shot, .gallery .frame:hover { transform: none !important; }
  .process-steps::after { display: none !important; }
}