/* Koeriersdienst Apeldoorn — huisstijl
   Kleuren uit het logo: oranje #FF9700, wit, grijs #626262. */

@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --oranje: #ff9700;
  --oranje-donker: #a85a00;      /* oranje als tekst op licht: 4,9:1 */
  --oranje-zacht: #fff3e3;
  --antraciet: #1f2023;
  --antraciet-2: #2a2b2f;
  --logo-grijs: #626262;
  --grijs-tekst: #55575c;
  --lijn: #e3e1dc;
  --papier: #f7f6f3;
  --wit: #fff;
  --tekst: #1f2023;

  --maxw: 1180px;
  --radius: 14px;
  --schaduw: 0 1px 2px rgba(20, 20, 24, .06), 0 8px 24px rgba(20, 20, 24, .07);
  --font: "Jost", "Century Gothic", "Avenir Next", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--wit);
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--oranje-donker); text-underline-offset: .18em; }
a:hover { color: var(--antraciet); }
:focus-visible { outline: 3px solid var(--antraciet); outline-offset: 2px; box-shadow: 0 0 0 5px var(--oranje); border-radius: 4px; }  /* werkt op licht én donker */

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.wrap.smal > * { max-width: 46rem; }   /* leeskolom, links uitgelijnd met de rest */
.visueel-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skiplink { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--oranje); color: var(--antraciet); padding: .6rem 1rem; border-radius: 8px; font-weight: 600; }
.skiplink:focus { top: 1rem; }

.bovenkop {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oranje-donker); margin-bottom: .9rem;
}
.bovenkop::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; }
.sectie-kop p.bovenkop, .tekst p.bovenkop, .paginakop p.bovenkop { font-size: .82rem; margin-bottom: .9rem; color: var(--oranje-donker); }
.held .bovenkop, .paginakop p.bovenkop, .donker .bovenkop, .donker .sectie-kop p.bovenkop, .cta .bovenkop, .zijkaart .bovenkop { color: var(--oranje); }  /* #a85a00 op antraciet haalt maar 3,2:1 */

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.1rem; padding: .7rem 1.4rem;
  border-radius: 999px; border: 2px solid transparent;
  font: 600 1.02rem/1.1 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.knop svg { width: 1.15em; height: 1.15em; flex: none; }
.knop-oranje { background: var(--oranje); color: var(--antraciet); }
.knop-oranje:hover { background: #ffad3d; color: var(--antraciet); transform: translateY(-1px); }
.knop-rand { border-color: currentColor; color: var(--wit); background: transparent; }
.knop-rand:hover { background: var(--wit); color: var(--antraciet); border-color: var(--wit); }
.licht .knop-rand, .knop-rand.op-licht { color: var(--antraciet); }
.licht .knop-rand:hover, .knop-rand.op-licht:hover { background: var(--antraciet); color: var(--wit); border-color: var(--antraciet); }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Topbalk + kop ---------- */
.topbalk { background: var(--antraciet); color: #c9cacd; font-size: .9rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.topbalk .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.4rem; }
.topbalk a { color: var(--wit); text-decoration: none; font-weight: 500; }
.topbalk a:hover { color: var(--oranje); }
.topbalk .live { display: inline-flex; align-items: center; gap: .5rem; }
.topbalk .live::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61,220,132,.2); }
.topbalk-rechts { display: flex; gap: 1.4rem; }
.alleen-smal { display: none; }
@media (max-width: 640px) { .topbalk .alleen-breed { display: none; } .topbalk .alleen-smal { display: inline; } }

.kop { position: sticky; top: 0; z-index: 50; background: var(--antraciet); color: var(--wit); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5rem; }
.kop-logo { display: block; flex: none; }
.kop-logo img { width: 18rem; height: auto; }
.hoofdmenu ul { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.hoofdmenu a {
  display: block; padding: .55rem .8rem; border-radius: 8px; white-space: nowrap;
  color: #e6e6e8; text-decoration: none; font-weight: 500;
}
.hoofdmenu a:hover { color: var(--wit); background: rgba(255,255,255,.07); }
.hoofdmenu a[aria-current="page"] { color: var(--oranje); }
.hoofdmenu a.knop { display: inline-flex; white-space: nowrap; margin-left: .6rem; min-height: 2.7rem; padding: .5rem 1.15rem; color: var(--antraciet); }
.hoofdmenu a.knop:hover { background: #ffad3d; color: var(--antraciet); }
.hoofdmenu a.knop-rand { color: var(--wit); border-color: rgba(255,255,255,.45); background: transparent; }
.hoofdmenu a.knop-rand:hover { color: var(--antraciet); background: var(--wit); border-color: var(--wit); }
.hoofdmenu li + li > a.knop { margin-left: .35rem; }
.hoofdmenu .login { color: #e6e6e8; display: inline-flex; gap: .4rem; align-items: center; }
.hoofdmenu .login svg { width: 1.05em; height: 1.05em; }
.menuknop { display: none; }


@media (max-width: 1240px) and (min-width: 1141px) { .kop-logo img { width: 15rem; } .hoofdmenu a { padding-inline: .6rem; } }
@media (max-width: 1140px) {

  .topbalk-rechts .alleen-breed { display: none; }
  .kop .wrap { min-height: 4.2rem; }
  .kop-logo img { width: 14rem; }
  .menuknop {
    display: inline-flex; align-items: center; gap: .5rem;
    background: none; border: 1px solid rgba(255,255,255,.25); color: var(--wit);
    border-radius: 999px; padding: .5rem .95rem; font: 500 1rem var(--font); cursor: pointer;
  }
  .menuknop svg { width: 1.2rem; height: 1.2rem; }
  .hoofdmenu { max-height: calc(100dvh - 4.2rem); overflow-y: auto; }
  .hoofdmenu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--antraciet); border-top: 1px solid rgba(255,255,255,.08); padding: .75rem 1.25rem 1.5rem; box-shadow: 0 20px 30px rgba(0,0,0,.25); }
  .kop.open .hoofdmenu { display: block; }
  .hoofdmenu ul { flex-direction: column; align-items: stretch; gap: .1rem; }
  .hoofdmenu a { padding: .85rem .5rem; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; }
  .hoofdmenu a.knop { display: flex; margin: 1rem 0 0; border-radius: 999px; border-bottom: 0; }
}
@media (max-width: 560px) { .topbalk .adres { display: none; } }

/* ---------- Hero ---------- */
.held { position: relative; overflow: hidden; background: var(--antraciet); color: var(--wit); isolation: isolate; }
.held::before {   /* zacht oranje licht linksboven */
  content: ""; position: absolute; inset: -30% auto auto -15%; width: 60rem; height: 60rem; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,151,0,.13), transparent 70%);
}
.held .wrap { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3rem; padding-block: clamp(3rem, 7vw, 6rem); }
.held h1 { margin-bottom: .45em; }
.held h1 em { font-style: normal; color: var(--oranje); }
.held .intro { font-size: 1.2rem; color: #d6d7da; max-width: 34rem; margin-bottom: 1.8rem; }
.held-feiten { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 2rem 0 0; padding: 0; list-style: none; color: #c9cacd; font-size: .95rem; }
.held-feiten li { display: inline-flex; align-items: center; gap: .45rem; }
.held-feiten svg { width: 1.1rem; height: 1.1rem; color: var(--oranje); flex: none; }
.held-kaart { position: relative; }
.held-kaart svg { width: 100%; height: auto; overflow: visible; }

@media (max-width: 900px) {
  .held .wrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .held-kaart { max-width: 30rem; margin-inline: auto; order: 2; }
}

/* Paginakop (subpagina's) */
.paginakop { background: var(--antraciet); color: var(--wit); position: relative; overflow: hidden; isolation: isolate; }
.paginakop::after {
  content: ""; position: absolute; right: -6rem; top: 50%; width: 26rem; height: 26rem; translate: 0 -50%; z-index: -1; opacity: .07;
  background: url("/img/kompas.svg") center / contain no-repeat;
}
.paginakop .wrap { padding-block: clamp(2.5rem, 5vw, 4rem); }
.paginakop h1 { font-size: clamp(2rem, 4vw, 3rem); max-width: 22ch; }
.paginakop p { color: #d6d7da; font-size: 1.15rem; max-width: 40rem; margin: 0; }
.kruimel { font-size: .9rem; margin-bottom: 1rem; color: #a9abb0; }
.kruimel ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.kruimel li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.kruimel a { color: #d6d7da; text-decoration: none; }
.kruimel a:hover { color: var(--oranje); }

/* ---------- Secties ---------- */
.sectie { padding-block: clamp(3.5rem, 7vw, 6rem); }
.sectie.papier { background: var(--papier); }
.sectie.donker { background: var(--antraciet); color: var(--wit); }
.sectie.donker p { color: #d6d7da; }
.sectie-kop { max-width: 44rem; margin-bottom: 2.5rem; }
.sectie-kop p { color: var(--grijs-tekst); font-size: 1.1rem; }
.donker .sectie-kop p { color: #c9cacd; }

/* Vertrouwensstrook */
.strook { background: var(--oranje); color: var(--antraciet); }
.strook ul { list-style: none; margin: 0; padding: 1.1rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.strook li { display: flex; align-items: center; gap: .65rem; font-weight: 600; line-height: 1.25; }
.strook svg { width: 1.6rem; height: 1.6rem; flex: none; }
@media (max-width: 860px) { .strook ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .strook ul { grid-template-columns: 1fr; gap: .6rem; } }

/* Dienstkaarten */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.kaart {
  position: relative; display: flex; flex-direction: column;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.4rem; box-shadow: var(--schaduw);
  transition: border-color .15s, transform .15s;
}
.kaart:hover { border-color: var(--oranje); transform: translateY(-2px); }
.kaart-icoon { width: 3rem; height: 3rem; border-radius: 12px; display: grid; place-items: center; background: var(--antraciet); color: var(--oranje); margin-bottom: 1.1rem; }
.kaart-icoon svg { width: 1.6rem; height: 1.6rem; }
.kaart h3 { margin-bottom: .4rem; }
.kaart h3 a { color: inherit; text-decoration: none; }
.kaart h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.kaart p { color: var(--grijs-tekst); margin-bottom: 1rem; }
.kaart .meer { margin-top: auto; font-weight: 600; color: var(--oranje-donker); display: inline-flex; align-items: center; gap: .35rem; }
.kaart .meer svg { width: 1rem; height: 1rem; transition: translate .15s; }
.kaart:hover .meer svg { translate: 3px 0; }
@media (max-width: 960px) { .kaarten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .kaarten { grid-template-columns: 1fr; } }

/* Twee kolommen */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.duo.midden { align-items: center; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

/* Stappen */
.stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: stap; }
.stappen li { counter-increment: stap; position: relative; padding: 1.5rem; border-radius: var(--radius); background: var(--antraciet-2); border: 1px solid rgba(255,255,255,.07); }
.stappen li::before { content: counter(stap); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--oranje); color: var(--antraciet); font-weight: 700; margin-bottom: 1rem; }
.stappen h3 { color: var(--wit); }
.stappen p { margin: 0; }
@media (max-width: 860px) { .stappen { grid-template-columns: 1fr; } }

/* Vinklijst */
.vinken { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .7rem; }
.vinken li { position: relative; padding-left: 2rem; }
.vinken li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--oranje) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2023' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / .8rem no-repeat;
}

/* Keurmerken */
.keurmerken { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.keurmerk { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.5rem; background: var(--wit); }
.keurmerk .label { display: inline-block; font-weight: 700; font-size: .85rem; letter-spacing: .12em; color: var(--antraciet); background: var(--oranje-zacht); border: 1px solid #ffd9a6; padding: .2rem .6rem; border-radius: 6px; margin-bottom: .8rem; }
.keurmerk p { color: var(--grijs-tekst); margin: 0; }
@media (max-width: 700px) { .keurmerken { grid-template-columns: 1fr; } }

/* Gebied / plaatsen */
.plaatsen { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.plaatsen li { border: 1px solid var(--lijn); background: var(--wit); border-radius: 999px; padding: .3rem .85rem; font-size: .95rem; }
.plaatsen a { text-decoration: none; color: var(--tekst); }
.plaatsen li:has(a):hover { border-color: var(--oranje); }

/* FAQ */
.faq { display: grid; gap: .75rem; }
.faq details { border: 1px solid var(--lijn); border-radius: 12px; background: var(--wit); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.25rem; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; translate: 0 -50%; font-size: 1.5rem; font-weight: 400; color: var(--oranje-donker); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 1.25rem 1.1rem; color: var(--grijs-tekst); }
.faq details > div p:last-child { margin: 0; }

/* Dienstblokken (dienstenpagina) */
.dienst { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.5rem; padding-block: 2.2rem; border-top: 1px solid var(--lijn); scroll-margin-top: 6rem; }
.dienst:first-child { border-top: 0; padding-top: 0; }
.dienst .kaart-icoon { width: 4.5rem; height: 4.5rem; border-radius: 16px; margin: 0; }
.dienst .kaart-icoon svg { width: 2.2rem; height: 2.2rem; }
.dienst h2 { font-size: 1.75rem; margin-bottom: .3rem; }
.dienst .sub { color: var(--oranje-donker); font-weight: 600; margin-bottom: .8rem; }
.dienst p { color: var(--grijs-tekst); max-width: 44rem; }
@media (max-width: 560px) { .dienst { grid-template-columns: 1fr; gap: 1rem; } .dienst .kaart-icoon { width: 3.5rem; height: 3.5rem; } }

/* Inhoudsopgave diensten */
.inhoud { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 2.5rem; }
.inhoud a { display: block; padding: .45rem 1rem; border: 1px solid var(--lijn); border-radius: 999px; text-decoration: none; color: var(--tekst); font-weight: 500; }
.inhoud a:hover { border-color: var(--oranje); color: var(--oranje-donker); }

/* Lopende tekst */
.tekst h2 { margin-top: 2rem; font-size: 1.7rem; }
.tekst h2:first-child { margin-top: 0; }
.tekst h3 { margin-top: 1.5rem; }
.tekst p, .tekst li { color: #3a3c41; }

/* Zijblok / contactkaart */
.zijkaart { background: var(--antraciet); color: var(--wit); border-radius: var(--radius); padding: 1.75rem; }
.zijkaart h2, .zijkaart h3 { color: var(--wit); }
.zijkaart p, .zijkaart dd { color: #d6d7da; }
.zijkaart a:not(.knop) { color: var(--oranje); }
.zijkaart dl { margin: 0 0 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; }
.zijkaart dt { color: #a9abb0; }
.zijkaart dd { margin: 0; }
.groot-nummer { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 600; color: var(--wit) !important; text-decoration: none; letter-spacing: .01em; }
.groot-nummer:hover { color: var(--oranje) !important; }

/* CTA-blok */
.cta { background: var(--antraciet); color: var(--wit); border-radius: 20px; padding: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.cta::after { content: ""; position: absolute; right: -4rem; bottom: -6rem; width: 20rem; height: 20rem; opacity: .08; z-index: -1; background: url("/img/kompas.svg") center / contain no-repeat; }
.cta h2 { margin-bottom: .3em; }
.cta p { color: #d6d7da; margin: 0; max-width: 36rem; }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* ---------- Formulieren ---------- */
.formulier { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.formulier .heel { grid-column: 1 / -1; }
.veld label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.veld .opt { font-weight: 400; color: var(--grijs-tekst); }
.veld input, .veld textarea, .veld select {
  width: 100%; font: 400 1rem/1.4 var(--font); color: var(--tekst);
  padding: .8rem .9rem; border: 1.5px solid #8a8780; border-radius: 10px; background: var(--wit);   /* rand 3,6:1 */
}
.veld textarea { min-height: 8rem; resize: vertical; }
.veld input:focus, .veld textarea:focus, .veld select:focus { outline: none; border-color: var(--antraciet); box-shadow: 0 0 0 3px var(--oranje); }
.veld input:user-invalid, .veld textarea:user-invalid { border-color: #b3261e; }
.fout { display: none; color: #b3261e; font-size: .9rem; margin-top: .3rem; }
.veld:has(:user-invalid) .fout { display: block; }
.formulier .kleine-print { font-size: .9rem; color: var(--grijs-tekst); margin: 0; }
.honing { position: absolute; left: -9999px; }
.formkaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--schaduw); }
#rit { scroll-margin-top: 1rem; }   /* html reserveert al ruimte voor de vaste kop */
@media (max-width: 600px) { .formulier { grid-template-columns: 1fr; } }

/* ---------- Voet ---------- */
.voet { background: #17181a; color: #b5b7bc; font-size: .97rem; padding-top: 3.5rem; }
.voet a { color: #e6e6e8; text-decoration: none; }
.voet a:hover { color: var(--oranje); }
.voet-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 2rem; padding-bottom: 2.5rem; }
.voet h2 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wit); margin-bottom: 1rem; }
.voet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.voet address { font-style: normal; line-height: 1.7; }
.voet-logo img { width: 14rem; margin-bottom: 1rem; }
.voet-onder { border-top: 1px solid rgba(255,255,255,.08); padding-block: 1.2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-size: .88rem; color: #8d9096; }
.voet-onder a { color: #b5b7bc; }
@media (max-width: 900px) { .voet-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .voet-raster { grid-template-columns: 1fr; } }

/* Mobiele belbalk */
.belbalk { display: none; }
@media (max-width: 760px) {
  html { scroll-padding-bottom: 6rem; }
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  body:has(.formulier :focus) .belbalk { display: none; }   /* niet over velden heen als het toetsenbord open is */
  .belbalk {
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(31,32,35,.97); box-shadow: 0 -6px 20px rgba(0,0,0,.25);
  }
  .belbalk .knop { min-height: 3.2rem; padding-inline: .8rem; }
}

/* Kaart-animatie in de held */
.route { stroke-dasharray: 4 7; animation: rijden 2.4s linear infinite; }
@keyframes rijden { to { stroke-dashoffset: -22; } }
.puls { transform-origin: center; transform-box: fill-box; animation: puls 2.6s ease-out infinite; }
@keyframes puls { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .route, .puls { animation: none; } }

/* Tabel (routes) */
.tabel-wrap { overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--wit); }
.tabel { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabel th, .tabel td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel thead th { background: var(--antraciet); color: var(--wit); font-weight: 600; font-size: .92rem; letter-spacing: .02em; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:nth-child(even) td { background: var(--papier); }
.tabel td:first-child { font-weight: 600; }

/* Tekstlinks op donker */
.donker a:not(.knop), .cta a:not(.knop), .paginakop a:not(.knop), .held a:not(.knop) { color: var(--oranje); }
.donker a:not(.knop):hover, .cta a:not(.knop):hover, .paginakop a:not(.knop):hover { color: var(--wit); }
[id] { scroll-margin-top: 6.5rem; }

.tekst > .bovenkop:first-child + h2 { margin-top: 0; }
@media (min-width: 861px) { .duo > .zijkaart, .duo > .formkaart:last-child { position: sticky; top: 7rem; } }
.tabel-wrap + p { margin-top: .9rem; font-size: .95rem; color: var(--grijs-tekst); }
.regiokaart { margin: 0 0 1.75rem; } .regiokaart svg { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--schaduw); }

.topbalk a, .tabel td:nth-child(2) { white-space: nowrap; }
.afstanden dd { text-align: right; font-variant-numeric: tabular-nums; }
.zijkaart .afstanden { margin-bottom: 1rem; }
.zijkaart .afstand-toelichting { font-size: .9rem; line-height: 1.5; margin: 0 0 1rem; }
a[href^="tel:"] { white-space: nowrap; }
.voet .slogan { color: var(--oranje); font-weight: 600; font-size: 1.1rem; margin-bottom: .4rem; }

/* Klant login: herkenbaar in het menu, op mobiel een eigen knop naast Menu */
.hoofdmenu .login-item { margin-left: .35rem; padding-left: .55rem; border-left: 1px solid rgba(255,255,255,.16); }
.hoofdmenu a.login { display: inline-flex; align-items: center; gap: .5rem; color: var(--wit); }
.login-icoon { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(255,151,0,.15); color: var(--oranje); }
.login-icoon svg { width: 1.05rem; height: 1.05rem; }
.hoofdmenu a.login:hover .login-icoon { background: var(--oranje); color: var(--antraciet); }
.kop-acties { display: none; }
@media (max-width: 1140px) {
  .kop-acties { display: flex; align-items: center; gap: .5rem; }
  .loginknop {
    display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
    border: 1px solid rgba(255,151,0,.6); color: var(--oranje); border-radius: 999px; padding: .5rem .95rem; font-weight: 500;
    white-space: nowrap;
  }
  .menuknop { white-space: nowrap; }
  .loginknop svg { width: 1.1rem; height: 1.1rem; }
  .loginknop:hover { background: var(--oranje); color: var(--antraciet); }
  .hoofdmenu .login-item { margin: 0; padding: 0; border: 0; }
  .hoofdmenu a.login { display: flex; }
}
@media (max-width: 600px) {
  .kop .wrap { gap: .6rem; }
  .kop-logo img { width: 11.5rem; }
  .loginknop, .menuknop { padding: .5rem .75rem; font-size: .95rem; }
}
.loginknop .kort { display: none; }
.loginknop svg, .menuknop svg { flex: none; }
@media (max-width: 600px) { .loginknop .lang { display: none; } .loginknop .kort { display: inline; } }
@media (max-width: 370px) { .kop-logo img { width: 10.5rem; } .loginknop svg { display: none; } }
@media (max-width: 600px) {
  .menuknop { padding: .55rem; }
  .menuknop .menu-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menuknop svg { width: 1.35rem; height: 1.35rem; }
}
@media (max-width: 340px) { .kop-logo img { width: 9.75rem; } .kop .wrap { gap: .4rem; } }

/* Held: bedrijfsnaam op één regel, slogan eronder */
.held h1.held-naam { white-space: nowrap; font-size: min(3.4rem, 7.2vw); margin-bottom: .15em; }
.held-slogan { color: var(--oranje); font-size: min(2rem, 5.6vw); font-weight: 500; line-height: 1.2; margin: 0 0 1.4rem; }
@media (min-width: 901px) { .held .wrap { grid-template-columns: 1.15fr .85fr; } }

/* FAQ met belkaart ernaast */
.wrap.smal > .faq-duo { max-width: none; }
.faq-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 23rem); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .faq-duo { grid-template-columns: 1fr; } }
@media (min-width: 901px) { .faq-bel { position: sticky; top: 7rem; } }

/* Vinklijst in twee kolommen */
.vinken.twee { grid-template-columns: 1fr 1fr; gap: 1rem 3rem; }
@media (max-width: 760px) { .vinken.twee { grid-template-columns: 1fr; } }

/* Eigen huisstijl: dennegroen, limoen en warm ivoor. */
:root{--oranje:#d6ed73;--oranje-donker:#345128;--oranje-zacht:#eff6d6;--antraciet:#153b3d;--antraciet-2:#204749;--tekst:#153b3d;--grijs-tekst:#596563;--lijn:#d9ded5;--papier:#f2f3eb;--wit:#fffef9;--maxw:1240px;--radius:4px;--schaduw:none}
body{background:#fffef9;font-size:1.0625rem;line-height:1.65}h1,h2,h3{letter-spacing:-.035em}h2{font-size:clamp(2.1rem,3.5vw,3.15rem);font-weight:500;line-height:1.1}h3{font-weight:600}.wrap{width:min(100% - 5rem,var(--maxw))}.knop{border-radius:4px;min-height:3.25rem;padding:.85rem 1.3rem;font-size:1rem}.knop-oranje:hover{background:#c5df5b;color:#153b3d}.knop-rand{border-width:1px}.topbalk{background:#153b3d;color:#e2eadb;font-size:.8rem}.topbalk .wrap{min-height:2.15rem}.topbalk .live::before{background:#d6ed73;box-shadow:none;width:.4rem;height:.4rem}.topbalk a{letter-spacing:.04em}
.kop{background:#fffef9;color:#153b3d;box-shadow:0 1px 0 #d9ded5}.kop .wrap{min-height:6.1rem;gap:1rem}.brand{display:flex;gap:.65rem;align-items:center;color:inherit;text-decoration:none}.brand-mark{width:48px;height:48px;flex:none}.brand-type{display:grid;line-height:1.05}.brand-type small{font-size:.71rem;letter-spacing:.13em;text-transform:uppercase}.brand-type strong{font-size:1.85rem;font-weight:600;letter-spacing:-.035em;margin-top:.1rem}.hoofdmenu a{color:#153b3d;padding:.6rem .85rem;font-size:.95rem}.hoofdmenu a:hover{background:#eff2e5;color:#153b3d}.hoofdmenu a[aria-current=page]{color:#153b3d;text-decoration:underline;text-underline-offset:.45em}.hoofdmenu .login-item{border-color:#d9ded5}.hoofdmenu a.login{color:#153b3d}.hoofdmenu a.knop-rand{background:#153b3d;color:#fffef9;border-color:#153b3d;padding:.85rem 1.2rem;border-radius:4px}.hoofdmenu a.knop-rand:hover{background:#285456;color:#fffef9}.loginknop{color:#153b3d!important}.login-icoon{background:transparent!important;color:#153b3d!important}
.deventer-hero{background:#f2f3eb;border-bottom:1px solid #d9ded5}.hero-grid{display:grid;grid-template-columns:1.14fr 1fr;gap:5rem;align-items:center;padding-block:4.8rem 4rem}.eyebrow{font-size:.82rem;font-weight:500;display:flex;align-items:center;gap:.5rem;margin-bottom:1.7rem}.eyebrow span{width:7px;height:7px;background:#426a37;border-radius:50%}.hero-slogan{font-size:1.5rem;font-weight:500;letter-spacing:-.02em;margin-bottom:1rem}.hero-copy .intro{color:#56625f;max-width:35rem;font-size:1.06rem;line-height:1.7;margin-bottom:1.7rem}.hero-copy .knoppen{gap:1.45rem;align-items:center}.hero-phone{display:inline-flex;gap:.55rem;align-items:center;color:#153b3d;font-weight:500;text-decoration:none}.hero-phone svg{width:19px;height:19px}.hero-footnote{margin:1rem 0 0;font-size:.81rem;color:#596563}.route-visual{background:#153b3d;color:#fffef9;padding:1.65rem 1.8rem 1.8rem;transform:rotate(1.5deg);position:relative}.route-visual:after{content:"";position:absolute;inset:12px -12px -12px 12px;border:1px solid #bac5b2;z-index:-1}.route-visual-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.64rem;letter-spacing:.13em;border-bottom:1px solid #ffffff25;padding-bottom:1.25rem}.route-visual-top svg{width:24px;height:24px;color:#d6ed73}.route-art{margin:.7rem -1rem 0}.route-art svg{width:100%}.route-visual-bottom{display:flex;justify-content:space-between;align-items:end;gap:1rem;border-top:1px solid #ffffff25;padding-top:1.4rem}.route-visual-bottom div>span{font-size:.62rem;letter-spacing:.16em;color:#c6d2ca;display:block;margin-bottom:.55rem}.route-visual-bottom strong{font-size:1.85rem;line-height:1.06;letter-spacing:-.035em;font-weight:500}.route-stamp{font-size:.8rem;line-height:1.4;border:1px solid #718d80;padding:.5rem .8rem;transform:rotate(-6deg);color:#d6ed73}.trust-strip{background:#fffef9;border-bottom:1px solid #d9ded5}.trust-strip .wrap{display:flex;justify-content:space-between;gap:1.3rem;padding-block:1.4rem}.trust-strip span{display:flex;align-items:center;gap:.7rem;font-size:.87rem;font-weight:500}.trust-strip svg{width:21px;height:21px;color:#426a37}
.sectie{padding-block:6rem}.bovenkop{font-size:.7rem!important;letter-spacing:.14em;color:#506743!important;font-weight:600}.bovenkop:before{width:1.2rem;height:1px}.service-heading h2{margin-bottom:1.25rem}.service-heading p:not(.bovenkop){max-width:25rem;color:#596563}.services-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:6rem}.service-heading{position:sticky;top:8rem;align-self:start}.service-list{border-top:1px solid #cbd3c6}.service-row{display:grid;grid-template-columns:2rem 1fr 2rem;gap:1.1rem;align-items:start;border-bottom:1px solid #cbd3c6;padding:1.6rem 0;color:#153b3d;text-decoration:none}.service-row:hover{background:#f2f3eb}.service-no{color:#6f7c68;font-size:.75rem;padding-top:.35rem}.service-row h3{font-size:1.45rem;line-height:1.2;margin:0 0 .5rem}.service-row p{margin:0;color:#596563;font-size:.98rem;line-height:1.6}.service-row>svg{width:20px;height:20px;margin-top:.35rem;transition:transform .2s}.service-row:hover>svg{transform:translateX(4px)}.text-link{display:inline-flex;align-items:center;gap:1.2rem;text-decoration:none;border-bottom:1px solid #91a57f;padding-block:.4rem;font-weight:500;margin-top:1.2rem;color:#153b3d}.text-link svg{width:20px;height:20px}.process-home .bovenkop,.donker .bovenkop,.cta .bovenkop{color:#d6ed73!important}.process-heading{display:flex;justify-content:space-between;align-items:end;gap:3rem;margin-bottom:3rem}.process-heading>p{max-width:18rem}.process-heading h2{margin:0}.stappen{gap:3rem}.stappen li{background:none;border:0;border-top:1px solid #ffffff40;padding:1.7rem 0 0;border-radius:0}.stappen li:before{border-radius:0;background:none;color:#d6ed73;width:auto;display:block;text-align:left;height:auto;font-size:2.5rem;font-weight:400;margin:0 0 1.3rem;content:"0" counter(stap)}.stappen h3{font-size:1.4rem}.stappen p{font-size:1rem;color:#cbd6d0!important}.reach-art{background:#edf0e4;padding:1.8rem 2rem;border:1px solid #d9ded5}.reach-label{font-size:.63rem;letter-spacing:.12em;max-width:20rem}.reach-art svg{width:100%;max-height:26rem}.reach-home .tekst h2{font-size:clamp(2rem,3.5vw,3.15rem);margin-top:0}.reach-home .plaatsen{margin-top:1.7rem}.plaatsen li{border-radius:2px;background:transparent;border-color:#bcc8b1;font-size:.85rem}.why-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:5rem}.why-layout>div>p{max-width:25rem}.why-layout .vinken{margin-top:1rem;gap:1.6rem}.why-layout .vinken.twee{grid-template-columns:1fr}.vinken li:before{border-radius:0;background-color:#d6ed73}.vinken strong{display:block;font-weight:600}.vinken li{font-size:1rem}.faq-duo{grid-template-columns:1.5fr .8fr;gap:4rem}.wrap.smal>.sectie-kop{max-width:none}.faq{gap:0;border-top:1px solid #cbd3c6}.faq details{border:0;border-bottom:1px solid #cbd3c6;border-radius:0;background:transparent}.faq summary{padding:1.35rem 2.5rem 1.35rem 0;font-size:1.06rem}.faq details>div{padding:0 1rem 1.3rem 0}.faq summary:after{right:.2rem;color:#153b3d}.faq-bel{border-radius:3px;background:#eff2e5;color:#153b3d}.faq-bel h3,.faq-bel p,.faq-bel .groot-nummer{color:#153b3d!important}.faq-bel .knop-rand{color:#153b3d}.faq-bel .groot-nummer{font-size:1.8rem}.cta-section{padding-top:0}.cta{padding:3.5rem;border-radius:4px;grid-template-columns:1fr .65fr}.cta:after{background:none}.cta h2{font-size:clamp(2.6rem,4.8vw,4rem)}.cta .knoppen{flex-direction:column;align-items:stretch}.cta p{max-width:32rem}.region-note{font-size:.75rem;color:#596563;margin:1rem 0 0}.paginakop{background:#f2f3eb;color:#153b3d;border-bottom:1px solid #d9ded5}.paginakop:after{display:none}.paginakop .wrap{padding-block:3.5rem}.paginakop h1{font-size:clamp(2.5rem,4vw,3.8rem);max-width:23ch}.paginakop p{color:#596563}.paginakop a:not(.knop),.kruimel{color:#506743}.kruimel a{color:#596563}.kaart{border-radius:3px;box-shadow:none}.kaart:hover{box-shadow:none;border-color:#8c9f7a}.kaart-icoon{border-radius:2px}.zijkaart{border-radius:3px}.formkaart{border-radius:3px;box-shadow:none}.veld input,.veld textarea{border-radius:3px;background:#fffef9}.keurmerk{border-radius:3px}.keurmerk .label{border-color:#c5d49e}.tabel-wrap{border-radius:3px}.voet{background:#102f31;color:#c9d5ca;padding-top:4rem}.voet .brand{color:#fffef9;margin-bottom:1.4rem}.voet .brand-type small{font-size:.6rem}.voet .brand-type strong{font-size:1.65rem}.voet .brand-mark{width:42px;height:42px}.voet .slogan{color:#d6ed73}.voet h2{font-size:.75rem;color:#d6ed73;letter-spacing:.1em}.voet-raster{grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:3rem;padding-bottom:3.5rem}.voet-onder{font-size:.75rem;color:#abc0b2}.concept-note{font-size:.83rem;border-left:3px solid #9fb54d;background:#eff2e5;padding:.75rem 1rem;margin:0 0 1rem}.concept-note[role=status]{margin-top:1rem}.preview-only-form button{opacity:.75}.regiokaart svg{border-radius:3px;box-shadow:none}
@media(min-width:1141px){.kop-acties{display:none}.kop-logo{flex:1}.hoofdmenu{flex:none}}
@media(max-width:1140px){.kop .wrap{min-height:5rem}.brand-mark{width:40px;height:40px}.brand-type strong{font-size:1.55rem}.brand-type small{font-size:.6rem}.menuknop{border-color:#b6c2ad;color:#153b3d;border-radius:3px}.hoofdmenu{background:#fffef9;border-color:#d9ded5;box-shadow:0 12px 20px #153b3d12}.hoofdmenu a{color:#153b3d}.hoofdmenu a.knop{border-radius:3px}.hoofdmenu .login-item{border-left:0;padding-left:0}.hero-grid{gap:3rem}.services-layout{gap:3rem}.wrap{width:min(100% - 3rem,var(--maxw))}.loginknop{border-color:#b6c2ad!important;background:none!important}}
@media(max-width:900px){.hero-grid{grid-template-columns:1.1fr 1fr;gap:2rem;padding-block:3rem}.hero-slogan{font-size:1.25rem}.hero-copy .intro{font-size:1rem}.route-visual{padding:1rem}.route-visual-bottom strong{font-size:1.5rem}.route-stamp{font-size:.65rem}.services-layout,.why-layout{gap:3rem}.faq-duo{gap:2rem}.trust-strip .wrap{gap:1rem}.trust-strip span{font-size:.78rem}.voet-raster{grid-template-columns:1fr 1fr}.hero-copy .knoppen{gap:1rem}}
@media(max-width:760px){.wrap{width:calc(100% - 2.5rem)}.sectie{padding-block:3.7rem}.hero-grid{grid-template-columns:1fr;gap:2.5rem;padding-block:2.3rem 3rem}.eyebrow{font-size:.75rem;margin-bottom:1.5rem}.hero-copy .intro{max-width:37rem}.route-visual{width:100%;max-width:32rem;justify-self:center;padding:1.2rem 1.5rem;transform:none}.route-visual:after{display:none}.route-art{max-width:27rem;margin-inline:auto}.route-visual-bottom strong{font-size:1.6rem}.route-visual-bottom{padding-top:1rem}.route-stamp{font-size:.75rem}.trust-strip .wrap{flex-direction:column;gap:.65rem;padding-block:1.1rem}.trust-strip span{font-size:.85rem}.services-layout,.why-layout{grid-template-columns:1fr;gap:2rem}.service-heading{position:static}.service-heading p:not(.bovenkop){max-width:37rem}.service-row{padding:1.35rem 0;gap:.7rem}.service-row h3{font-size:1.3rem}.process-heading{display:block;margin-bottom:2rem}.process-heading>p{margin-top:1.2rem;max-width:30rem}.stappen{gap:2rem}.stappen li{padding-top:1rem}.stappen li:before{font-size:2rem;margin-bottom:.8rem}.reach-art{padding:1.3rem}.why-layout .vinken{margin-top:0;gap:1.4rem}.faq-duo{grid-template-columns:1fr;gap:2rem}.cta{grid-template-columns:1fr;padding:2rem 1.4rem;gap:1.6rem}.cta-section{padding-top:0}.cta .knoppen{flex-direction:row}.cta .knop{flex-grow:1}.paginakop .wrap{padding-block:2.5rem}.paginakop h1{font-size:2.5rem}.voet-raster{gap:2.2rem}.belbalk{background:#153b3d;box-shadow:none;border-top:1px solid #426365}.belbalk .knop{border-radius:3px;font-size:.95rem}.topbalk .wrap{font-size:.73rem}.brand-mark{width:36px;height:36px}.brand-type strong{font-size:1.45rem}.brand-type small{font-size:.56rem}.menuknop{padding:.5rem .7rem}.kop-acties{gap:.5rem!important}.kop .wrap{gap:.4rem}.loginknop{display:none!important}.kop-logo{flex-shrink:1}.region-note{font-size:.73rem}}
@media(max-width:480px){.voet-raster{grid-template-columns:1fr}.hero-copy .knoppen{gap:.85rem}.hero-phone{font-size:.95rem}.route-art svg{max-height:17rem}.route-visual-top{font-size:.57rem}.brand{gap:.45rem}.brand-type strong{font-size:1.4rem}.knop{padding:.85rem 1rem}.service-row{grid-template-columns:1.5rem 1fr 1.4rem}.hero-footnote{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.duo>*{min-width:0}.zijkaart dd{min-width:0;overflow-wrap:anywhere}.zijkaart dl{grid-template-columns:auto minmax(0,1fr)}
.keurmerk{min-width:0;overflow-wrap:anywhere}.voet a{overflow-wrap:anywhere}
@media(max-width:480px){.zijkaart dl{grid-template-columns:1fr;gap:.25rem}.zijkaart dd{margin-bottom:.75rem}.zijkaart dt{font-size:.8rem}}

/* Krachtiger openingsblok: één witte titel en een heldere slogan op donker. */
.deventer-hero{background:#123033;color:#fffef9;border-bottom-color:#315252}
.hero-copy h1{font-size:clamp(2rem,3.5vw,3.5rem);font-weight:650;line-height:1.12;letter-spacing:-.02em;margin:0 0 .6rem;text-wrap:balance;color:#fffef9}
.hero-copy .hero-slogan{font-size:clamp(1.4rem,2.1vw,2rem);font-weight:600;line-height:1.25;color:#d6ed73;margin-bottom:1.35rem}
.hero-copy .intro{font-size:1.18rem;line-height:1.7;color:#e0e7e2;max-width:36rem}
.hero-copy .hero-phone{color:#fffef9}.hero-copy .hero-phone:hover{color:#d6ed73}
.hero-copy .hero-footnote{color:#bdcec5}
.deventer-hero .route-visual{border:1px solid #446263}
.deventer-hero .route-visual:after{border-color:#49665b}
@media(max-width:760px){.hero-copy .intro{font-size:1.05rem}.hero-copy h1{line-height:1.15}.hero-copy .hero-slogan{margin-bottom:1.1rem}}

/* Compactere homepage: inhoud blijft leesbaar, ruimte wordt beter benut. */
.home .sectie{padding-block:3.5rem}
.home .hero-grid{padding-block:3rem;gap:3.5rem}
.home .route-visual{padding:1.2rem 1.5rem;transform:none}
.home .route-visual:after{display:none}
.home .route-art svg{max-height:15rem}
.home .route-visual-top{padding-bottom:.9rem}
.home .route-visual-bottom{padding-top:1rem}
.home .trust-strip .wrap{padding-block:1rem}
.home .services-layout{grid-template-columns:minmax(0,1fr);gap:1.5rem}
.home .service-heading{position:static;display:grid;grid-template-columns:1fr 1.3fr auto;gap:.65rem 2rem;align-items:center}
.home .service-heading .bovenkop{grid-column:1/-1;margin:0}
.home .service-heading h2{margin:0;font-size:clamp(2rem,3vw,2.65rem)}
.home .service-heading p:not(.bovenkop){max-width:none;margin:0}
.home .service-heading .text-link{margin:0;align-self:end;white-space:nowrap}
.home .service-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem;border-top:0}
.home .service-row{padding:1.15rem 0;grid-template-columns:1.75rem minmax(0,1fr) 1.5rem;gap:.75rem;border-top:1px solid var(--lijn);border-bottom:0}
.home .service-row:last-child{grid-column:1/-1;border-bottom:1px solid var(--lijn)}
.home .service-row h3{margin-bottom:.35rem}
.home .process-heading{margin-bottom:1.75rem;gap:2rem}
.home .stappen{gap:2rem}
.home .stappen li{padding-top:1.1rem}
.home .stappen li:before{font-size:2.1rem;margin-bottom:.65rem}
.home .reach-art{padding:1.2rem 1.5rem}
.home .reach-art svg{max-height:20rem}
.home .reach-home .duo{gap:3rem}
.home .reach-home .plaatsen{margin-top:1rem}
.home .text-link{margin-top:.65rem}
.home .why-layout{grid-template-columns:.8fr 1.5fr;gap:3rem}
.home .why-layout .vinken.twee{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem 1.7rem;margin:0}
.home .why-layout>div>p{max-width:none}
.home .sectie-kop{margin-bottom:1.5rem}
.home .faq-duo{gap:2.5rem}
.home .faq summary{padding-block:1rem}
.home .cta-section{padding-top:0;padding-bottom:3rem}
.home .cta{padding:2.25rem 2.5rem;gap:2rem}
.home .region-note{margin-top:.7rem}
@media(max-width:1100px){
 .home .service-heading{grid-template-columns:1fr 1.4fr;gap:.65rem 2rem}
 .home .service-heading h2{grid-column:1;grid-row:2/4}
 .home .service-heading p:not(.bovenkop){grid-column:2}
 .home .service-heading .text-link{grid-column:2;justify-self:start}
 .home .why-layout{grid-template-columns:1fr;gap:1.5rem}
 .home .why-layout>div{max-width:42rem}
}
@media(max-width:860px){.home .reach-home .duo{grid-template-columns:1fr;gap:1.75rem}.home .reach-art{max-width:36rem;width:100%;margin-inline:auto}}
@media(max-width:760px){
 .home .sectie{padding-block:2.5rem}
 .home .hero-grid{padding-block:2rem;gap:1.75rem}
 .home .route-visual{max-width:28rem;padding:1rem 1.2rem}
 .home .route-art svg{max-height:12rem}
 .home .route-visual-bottom strong{font-size:1.45rem}
 .home .service-heading{display:block}
 .home .service-heading .bovenkop{margin-bottom:.65rem}
 .home .service-heading h2{margin-bottom:.9rem}
 .home .service-heading p:not(.bovenkop){margin-bottom:.7rem}
 .home .service-list{column-gap:1.5rem}
 .home .service-row{grid-template-columns:1.4rem minmax(0,1fr) 1.2rem;gap:.5rem}
 .home .process-heading{margin-bottom:1.5rem}
 .home .process-heading>p{margin:1rem 0 0}
 .home .stappen{gap:1.4rem}
 .home .reach-art svg{max-height:18rem}
 .home .faq-duo{grid-template-columns:1fr;gap:1.5rem}
 .home .cta-section{padding-top:0;padding-bottom:2.25rem}
 .home .cta{padding:1.75rem 1.4rem;gap:1.4rem}
}
@media(max-width:600px){
 .home .service-list{grid-template-columns:minmax(0,1fr)}
 .home .service-row:last-child{grid-column:auto}
 .home .why-layout .vinken.twee{grid-template-columns:minmax(0,1fr);gap:1rem}
}

/* Tweede logorichting: compact woordmerk en twee zelfstandige richtingstekens. */
.brand{gap:.8rem;width:max-content;max-width:100%}
.brand-mark{width:49px;height:52px;flex-shrink:0;color:#153b3d}
.brand-type{gap:.34rem;line-height:1;display:flex;flex-direction:column}
.brand-type strong{font-size:1.69rem;font-weight:650;letter-spacing:.065em;line-height:1;margin:0;text-transform:uppercase}
.brand-type small{font-size:.63rem;font-weight:500;letter-spacing:.25em;line-height:1;margin-left:.12rem;text-transform:uppercase}
.voet .brand{gap:.7rem}
.voet .brand-mark{width:44px;height:47px;color:#fffef9}
.voet .brand-mark path+path{fill:#d6ed73}
.voet .brand-type strong{font-size:1.44rem;letter-spacing:.065em}
.voet .brand-type small{font-size:.54rem;letter-spacing:.25em}
@media(max-width:1140px){.brand-mark{width:44px;height:47px}.brand-type strong{font-size:1.5rem}.brand-type small{font-size:.56rem}}
@media(max-width:760px){.brand{gap:.6rem}.brand-mark{width:40px;height:43px}.brand-type strong{font-size:1.41rem;letter-spacing:.055em}.brand-type small{font-size:.53rem;letter-spacing:.23em}}
@media(max-width:360px){.brand{gap:.5rem}.brand-mark{width:35px;height:40px}.brand-type strong{font-size:1.28rem}.brand-type small{font-size:.49rem}}