/* ============================================================================
   Rene's Autoservice — handgeschreven stylesheet
   Palet: koel werkplaats-wit + antraciet + één rode "redline".
   Type:  Archivo (display/body) + JetBrains Mono (instrument/data).
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrainsmono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --wit: #ffffff;
  --staal: #f3f5f7;
  --staal-2: #e6eaee;
  --lijn: #d6dbe1;
  --inkt: #22262b;
  --antraciet: #26292e;
  --antraciet-diep: #191b1f;
  --grijs: #667180;
  --grijs-licht: #9aa4b0;
  --rood: #d0111b;
  --rood-diep: #a70d15;
  --rood-zacht: rgba(208, 17, 27, 0.12);

  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

  --maxw: 1200px;
  --pad: clamp(1.15rem, 4vw, 2.75rem);
  --sectie-y: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 4px;
}

/* --- reset-achtig ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--inkt);
  background: var(--staal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.02em; }
ul { list-style: none; padding: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--rood); color: #fff; padding: .6rem 1rem; font-weight: 700;
}
.skip:focus { left: .5rem; top: .5rem; }

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

/* --- gedeelde bouwstenen ---------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rood);
  margin-bottom: 1.1rem;
}
.eyebrow span { color: var(--grijs-licht); margin: 0 .35em; }
.eyebrow--donker { color: var(--rood); }
.eyebrow--licht { color: #ff5964; }

.knoppen { display: flex; flex-wrap: wrap; gap: .8rem; }
.knop {
  --k-bg: var(--rood); --k-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .95rem 1.5rem; border-radius: var(--radius);
  background: var(--k-bg); color: var(--k-fg);
  border: 2px solid var(--k-bg);
  transition: transform .12s ease, background .18s ease, border-color .18s ease, color .18s ease;
  will-change: transform;
}
.knop:hover { transform: translateY(-2px); }
.knop--rood { --k-bg: var(--rood); --k-fg: #fff; }
.knop--rood:hover { background: var(--rood-diep); border-color: var(--rood-diep); }
.knop--lijn { --k-bg: transparent; --k-fg: var(--inkt); border-color: var(--inkt); }
.knop--lijn:hover { background: var(--inkt); color: #fff; }
.knop--spook { --k-bg: transparent; --k-fg: #fff; border-color: rgba(255,255,255,.4); }
.knop--spook:hover { border-color: #fff; }

.sectie__kop { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.sectie__kop h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; }

.volgt { color: var(--grijs-licht); font-style: italic; }

/* --- header ---------------------------------------------------------------- */
.kop {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kop.is-scrolled { border-bottom-color: var(--lijn); box-shadow: 0 6px 24px -18px rgba(0,0,0,.5); }
.kop__in {
  max-width: var(--maxw); margin: 0 auto; padding: .55rem var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.kop__logo img { height: 42px; width: auto; }
.kop__nav { display: flex; align-items: center; gap: 1.6rem; }
.kop__nav > a:not(.kop__cta) {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--inkt);
  padding: .3rem 0; position: relative;
}
.kop__nav > a:not(.kop__cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--rood); transition: right .22s ease;
}
.kop__nav > a:not(.kop__cta):hover::after,
.kop__nav > a[aria-current="page"]::after { right: 0; }
.kop__cta {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--rood); color: #fff; padding: .6rem 1.05rem; border-radius: var(--radius);
  transition: background .18s ease;
}
.kop__cta:hover { background: var(--rood-diep); }
.kop__toggle, .kop__burger { display: none; }

/* --- toerenteller-signatuur ------------------------------------------------ */
.tacho {
  max-width: var(--maxw); margin: 0 auto; padding: 1.2rem var(--pad) 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.tacho__track {
  position: relative; display: flex; align-items: flex-end; gap: 0;
  flex: 1; height: 30px;
  border-bottom: 2px solid var(--inkt);
}
.tacho__tick { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.tacho__tick b { display: block; width: 2px; height: 12px; background: var(--inkt); }
.tacho__tick i {
  font-family: var(--font-mono); font-style: normal; font-size: .62rem;
  color: var(--grijs); transform: translateX(-50%);
}
.tacho__tick.is-red b { height: 18px; background: var(--rood); }
.tacho__tick.is-red i { color: var(--rood); }
.tacho__track::before { /* redline-zone */
  content: ""; position: absolute; right: 0; bottom: -2px; width: 25%; height: 2px;
  background: var(--rood);
}
.tacho__track::after { /* naald */
  content: ""; position: absolute; left: 0; bottom: -2px; width: 3px; height: 26px;
  background: var(--rood); transform-origin: bottom center;
  transform: translateX(2px);
  animation: sweep 1.5s cubic-bezier(.5,.05,.2,1) .2s both;
}
.tacho__label {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grijs-licht); white-space: nowrap; padding-bottom: 2px;
}
@keyframes sweep {
  0%   { left: 0; opacity: 0; }
  15%  { opacity: 1; }
  60%  { left: 100%; }
  100% { left: 62.5%; opacity: 1; } /* rust net onder de redline (5 van de 8) */
}

/* --- hero ------------------------------------------------------------------ */
.hero { background: var(--wit); padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: 1.5rem; overflow: hidden; }
.hero__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.hero__kop {
  font-size: clamp(2.5rem, 6.4vw, 5rem); font-weight: 900; line-height: .96;
  letter-spacing: -0.03em; margin-bottom: 1.3rem;
}
.hero__kop span { display: block; }
.hero__kop em { font-style: normal; color: var(--rood); }
.hero__sub { max-width: 46ch; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--grijs); margin-bottom: 1.9rem; }
.hero__beeld {
  margin: 2.4rem calc(var(--pad) * -1) 0;
  padding: 0 var(--pad);
}
.hero__beeld img { width: 100%; height: auto; }

/* --- disciplines ----------------------------------------------------------- */
.disc { padding: var(--sectie-y) 0; background: var(--staal); }
.disc .sectie__kop { margin-bottom: 2.6rem; }
.disc .disc__meer { margin-top: 2.4rem; margin-bottom: 0; }
.disc__grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--lijn); border: 1px solid var(--lijn);
}
.disc__kaart { background: var(--wit); padding: 1.8rem 1.5rem 2rem; position: relative; }
.disc__code {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  color: var(--rood); display: inline-block; margin-bottom: 1.4rem;
  border: 1px solid var(--rood-zacht); background: var(--rood-zacht);
  padding: .2rem .5rem; border-radius: 3px;
}
.disc__kaart h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: .55rem; }
.disc__kaart p { font-size: .95rem; color: var(--grijs); line-height: 1.6; }
.disc__kaart::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--rood);
  transition: width .28s ease;
}
.disc__kaart:hover::after { width: 100%; }

/* --- merken ---------------------------------------------------------------- */
.merken { padding: var(--sectie-y) 0; background: var(--wit); }
.merken__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); text-align: center; }
.merken__in h2 { font-size: clamp(1.7rem, 3.6vw, 2.8rem); font-weight: 800; margin-bottom: 2rem; }
.merken__lijst { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.merken__lijst li {
  font-family: var(--font-mono); font-size: .82rem; font-weight: 500; letter-spacing: .04em;
  padding: .6rem 1.1rem; border: 1px solid var(--lijn); border-radius: 999px; color: var(--inkt);
}
.merken__lijst li.is-spec { border-color: var(--rood); color: var(--rood); font-weight: 700; }
.merken__lijst li.is-meer { color: var(--grijs-licht); border-style: dashed; }

/* --- performance (donker) -------------------------------------------------- */
.perf { padding: var(--sectie-y) 0; background: var(--antraciet-diep); color: #eef1f4; }
.perf__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.perf__kop h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; color: #fff; margin-bottom: 1.1rem; }
.perf__lead { color: var(--grijs-licht); margin-bottom: 1.8rem; }
.perf__stages { display: grid; gap: 1rem; }
.stage {
  background: var(--antraciet); border: 1px solid #34383f; border-left: 3px solid var(--rood);
  padding: 1.4rem 1.5rem; border-radius: var(--radius);
}
.stage__naam {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rood); display: block; margin-bottom: .4rem;
}
.stage h3 { color: #fff; font-size: 1.2rem; font-weight: 800; margin-bottom: .5rem; }
.stage p { color: var(--grijs-licht); font-size: .95rem; }
.stage__meting {
  margin-top: .8rem; font-family: var(--font-mono); font-size: .78rem; color: #c3ccd6;
  border-top: 1px dashed #3a3f46; padding-top: .7rem;
}

/* --- waarden --------------------------------------------------------------- */
.waarden { padding: var(--sectie-y) 0; background: var(--staal); }
.waarden__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.waarden__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.6rem; }
.waarde { border-top: 3px solid var(--inkt); padding-top: 1.2rem; }
.waarde h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: .4rem; }
.waarde p { color: var(--grijs); }

/* --- afsluitende CTA ------------------------------------------------------- */
.cta { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--antraciet); color: #fff; }
.cta__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.8rem;
}
.cta__tekst h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 800; margin-bottom: .5rem; max-width: 22ch; }
.cta__tekst p { color: var(--grijs-licht); max-width: 44ch; }
.cta__actie { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- paginakoppen (subpagina's) -------------------------------------------- */
.paginakop { background: var(--wit); padding-top: clamp(2rem, 5vw, 3.2rem); padding-bottom: 1.4rem; }
.paginakop--donker { background: var(--antraciet-diep); color: #fff; }
.paginakop__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.paginakop h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -0.03em; margin-bottom: 1rem; }
.paginakop--donker h1 { color: #fff; }
.paginakop__sub { max-width: 60ch; font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--grijs); }
.paginakop--donker .paginakop__sub { color: var(--grijs-licht); }

/* --- werkplaats: diensten -------------------------------------------------- */
.diensten { padding: var(--sectie-y) 0; }
.diensten__grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--lijn); border: 1px solid var(--lijn);
}
.dienst { background: var(--wit); padding: 1.6rem 1.4rem; }
.dienst h2 { font-size: 1.18rem; font-weight: 800; margin-bottom: .5rem; }
.dienst p { font-size: .93rem; color: var(--grijs); line-height: 1.55; }
.diensten__noot {
  max-width: var(--maxw); margin: 1.6rem auto 0; padding: 0 var(--pad);
  font-family: var(--font-mono); font-size: .84rem; color: var(--grijs);
}

/* --- tuning: stages + proces ----------------------------------------------- */
.stages-vol { padding: var(--sectie-y) 0; background: var(--staal); }
.stages-vol__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
}
.stage-vol { background: var(--wit); border: 1px solid var(--lijn); border-top: 4px solid var(--rood); padding: 2rem 1.8rem; }
.stage-vol__kop { margin-bottom: 1rem; }
.stage-vol__kop h2 { font-size: 1.6rem; font-weight: 800; margin-top: .3rem; }
.stage-vol p { color: var(--grijs); }
.stage-vol .stage__meting { color: var(--inkt); border-top-color: var(--lijn); }

.proces { padding: var(--sectie-y) 0; }
.proces__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.proces__stappen { counter-reset: stap; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 1.6rem; }
.proces__stappen li { counter-increment: stap; position: relative; padding-top: 3rem; color: var(--grijs); font-size: .95rem; }
.proces__stappen li::before {
  content: counter(stap, decimal-leading-zero); position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--rood);
}
.proces__stappen li span { display: block; font-family: var(--font-display); font-weight: 800; color: var(--inkt); font-size: 1.1rem; margin-bottom: .35rem; }

/* --- contact --------------------------------------------------------------- */
.contact { padding: var(--sectie-y) 0; }
.contact__grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 1.5rem;
}
.contact__blok { background: var(--wit); border: 1px solid var(--lijn); padding: 1.8rem; border-radius: var(--radius); }
.contact__blok--cta { border-top: 4px solid var(--rood); }
.contact__blok h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 1rem; }
.contact__adres { font-style: normal; line-height: 1.7; margin-bottom: 1.3rem; }
.contact__adres strong { font-weight: 800; }
.tijden { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tijden th { text-align: left; font-weight: 600; padding: .5rem 0; color: var(--inkt); }
.tijden td { text-align: right; padding: .5rem 0; font-family: var(--font-mono); font-size: .86rem; color: var(--grijs); }
.tijden tr { border-bottom: 1px solid var(--staal-2); }
.tijden tr.is-dicht td { color: var(--grijs-licht); }
.contact__lijn { margin: 1.2rem 0; }
.contact__lijn li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--staal-2); }
.contact__lbl { font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); }
.contact__lijn a { color: var(--rood); font-weight: 600; }
.contact__noot { font-family: var(--font-mono); font-size: .8rem; color: var(--grijs-licht); }

/* --- juridisch ------------------------------------------------------------- */
.juridisch { padding: var(--sectie-y) 0; }
.juridisch__in { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); }
.jur-sectie { margin-bottom: 2.2rem; }
.jur-sectie h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: .7rem; }
.jur-sectie p { color: var(--inkt); margin-bottom: .8rem; max-width: 68ch; }
.juridisch__datum { font-family: var(--font-mono); font-size: .8rem; color: var(--grijs-licht); border-top: 1px solid var(--lijn); padding-top: 1rem; }

/* --- footer ---------------------------------------------------------------- */
.voet { background: var(--antraciet-diep); color: #c3ccd6; padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.voet__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
}
.voet__naam { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; color: #fff; letter-spacing: -0.02em; }
.voet__naam span { color: var(--rood); }
.voet__tag { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--grijs-licht); margin: .7rem 0 .3rem; }
.voet__usp { font-size: .9rem; color: var(--grijs-licht); max-width: 32ch; }
.voet__kolom h2 { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--rood); margin-bottom: .9rem; font-weight: 600; }
.voet__kolom p, .voet__kolom nav { font-size: .92rem; line-height: 1.9; }
.voet__kolom a:hover { color: #fff; }
.voet__kolom nav { display: flex; flex-direction: column; }
.voet__onder {
  max-width: var(--maxw); margin: 2.5rem auto 0; padding: 1.5rem var(--pad) 0;
  border-top: 1px solid #2f333a; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem;
  font-size: .82rem; color: var(--grijs-licht);
}
.voet__jur a:hover { color: #fff; }

/* --- cookiemelding --------------------------------------------------------- */
.cookiebar {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60;
  background: var(--antraciet); color: #eef1f4;
  border: 1px solid #34383f; border-left: 4px solid var(--rood); border-radius: var(--radius);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.7);
}
.cookiebar[hidden] { display: none; }
.cookiebar__in {
  max-width: var(--maxw); margin: 0 auto; padding: 1rem 1.2rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.cookiebar__tekst { font-size: .9rem; color: var(--grijs-licht); max-width: 62ch; margin: 0; }
.cookiebar__tekst a { color: #fff; text-decoration: underline; }
.cookiebar__acties { display: flex; gap: .6rem; flex-shrink: 0; }
.cookiebar__acties .knop { padding: .7rem 1.25rem; }
.cookiebar__acties .knop--lijn { color: #fff; border-color: rgba(255,255,255,.45); }
.cookiebar__acties .knop--lijn:hover { background: #fff; color: var(--antraciet); border-color: #fff; }

.voet__cookielink {
  font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer;
}
.voet__cookielink:hover { color: #fff; }

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .perf__in { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .disc__grid, .diensten__grid { grid-template-columns: repeat(2, 1fr); }
  .waarden__grid { grid-template-columns: 1fr; gap: 0; }
  .waarde { border-top: none; border-left: 3px solid var(--inkt); padding: .4rem 0 .4rem 1.2rem; margin-bottom: 1.2rem; }
  .stages-vol__in { grid-template-columns: 1fr; }
  .proces__stappen { grid-template-columns: repeat(2, 1fr); }
  .voet__in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  /* Mobiel menu: volle-breedte dropdown onder de header — kan nooit breder
     dan het scherm zijn, dus geen horizontale overflow / uitzoombaarheid. */
  .kop__burger { display: inline-flex; flex-direction: column; gap: 5px; cursor: pointer; padding: .5rem; }
  .kop__burger span { width: 26px; height: 2px; background: var(--inkt); transition: transform .2s, opacity .2s; }
  .kop__nav {
    position: absolute; top: 100%; left: 0; right: 0; width: 100%;
    background: var(--wit); flex-direction: column; align-items: stretch; gap: 0;
    padding: .25rem var(--pad) 1.25rem;
    border-bottom: 3px solid var(--rood);
    box-shadow: 0 26px 40px -26px rgba(0,0,0,.55);
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .kop__toggle:checked ~ .kop__nav {
    transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .2s ease, transform .2s ease;
  }
  .kop__toggle:checked ~ .kop__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .kop__toggle:checked ~ .kop__burger span:nth-child(2) { opacity: 0; }
  .kop__toggle:checked ~ .kop__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .kop__nav > a { padding: .9rem .2rem; border-bottom: 1px solid var(--staal-2); }
  .kop__nav > a:not(.kop__cta) { font-size: 1.05rem; }
  .kop__nav > a:not(.kop__cta)::after { display: none; }
  .kop__cta { align-self: flex-start; margin-top: .9rem; border-bottom: none; }
}

@media (max-width: 560px) {
  .disc__grid, .diensten__grid, .proces__stappen { grid-template-columns: 1fr; }
  .voet__in { grid-template-columns: 1fr; }
  .tacho__label { display: none; }
}

/* --- toegankelijkheid: minder beweging ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .tacho__track::after { left: 62.5%; opacity: 1; animation: none; }
}