@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #050608;
  --ink-2: #101114;
  --gold: #fdd23c;
  --gold-deep: #e3b51a;
  --paper: #ecebe6;
  --white: #fbfaf7;
  --mute: rgba(251, 250, 247, 0.66);
  --line: rgba(251, 250, 247, 0.16);
  --radius: 28px;
  --gutter: clamp(16px, 2.6vw, 40px);
  --pad: clamp(20px, 3.4vw, 48px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Figtree", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--gold) var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--gold); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* Vaste afgeronde kaart: de pagina scrolt eronderdoor, zoals in de referentie */
.frame {
  position: fixed; inset: var(--gutter); z-index: 60; pointer-events: none;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line), 0 0 0 calc(var(--gutter) + 40px) var(--ink);
}

.shell {
  margin: var(--gutter);
  overflow: clip;
  background: var(--ink);
}

/* ---------- knoppen ---------- */
.btn {
  --h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 22px;
  border: 0; border-radius: 999px;
  background: transparent; cursor: pointer;
  font: 600 16px/1 var(--font);
  white-space: nowrap;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.btn:active { transform: scale(0.97); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #ffe07a; }
.btn--line { border: 1px solid rgba(251, 250, 247, 0.4); color: var(--white); }
.btn--line:hover { border-color: var(--gold); color: var(--gold); }
.btn--lg { --h: 56px; padding: 0 28px; font-size: 16px; }

/* reactietijd onder de belknoppen */
.reply { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14px; color: var(--mute); }
.reply svg { width: 16px; height: 16px; flex: none; fill: var(--gold); }
.reply--ink { color: rgba(5, 6, 8, 0.7); }
.hero__intro .reply { margin-top: 16px; }
.reply--ink svg { fill: var(--ink); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: max(660px, calc(100svh - 2 * var(--gutter)));
  isolation: isolate;
  overflow: clip;
}
.hero__fg {
  position: relative; z-index: 2;
  min-height: inherit;
  padding: var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) 48px;
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(24px, 4vw, 64px);
  align-content: start;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--ink); overflow: clip; }
.hero__map, .hero__route { position: absolute; inset: 0; pointer-events: none; }
.hero__map img { width: 100%; height: 100%; object-fit: cover; }
.hero__map { inset: -8% 0; }
.hero__route { width: 100%; height: 100%; }
.route {
  fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(253, 210, 60, 0.55));
}
.route--faint { stroke-width: 1.2; opacity: 0.28; }
.route__dot { fill: var(--gold); }
.route__marker { fill: var(--gold); }

/* nav */
.nav {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 48px);
}
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo__img { display: block; width: auto; height: 46px; }
.nav__area { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mute); }
.nav__area svg { width: 16px; height: 16px; fill: var(--gold); }
.nav__links { display: flex; gap: 8px; margin-inline: auto; }
.nav__links a {
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.nav__links a:hover { border-color: var(--gold); color: var(--gold); }

/* titel */
.hero__title {
  grid-column: 1; grid-row: 2;
  margin: clamp(40px, 8vh, 88px) 0 0;
  font-weight: 800;
  font-size: clamp(3.1rem, 7vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.line { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line > span { display: block; }
.hero__title i { font-style: normal; color: var(--gold); }

/* intro rechts */
.hero__intro {
  grid-column: 2; grid-row: 2;
  position: relative;
  align-self: start;
  margin-top: clamp(88px, 17vh, 190px);
  font-size: 16px;
}
.hero__intro h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.hero__intro p { margin: 0; color: var(--mute); }
.plus { position: absolute; left: -36px; top: 2px; width: 17px; height: 17px; }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--gold); }
.plus::before { left: 8px; top: 0; width: 1.5px; height: 100%; }
.plus::after { top: 8px; left: 0; height: 1.5px; width: 100%; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* contact-rail */
.hero__rail {
  grid-column: 3; grid-row: 2;
  list-style: none; margin: clamp(48px, 9vh, 96px) 0 0; padding: 0;
  display: grid; gap: 10px; justify-items: end; align-self: start;
}
.hero__rail a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.hero__rail a:hover { background: var(--gold); color: var(--ink); }
.hero__rail svg { width: 20px; height: 20px; fill: currentColor; }

/* auto */
.hero__car {
  position: absolute; z-index: 1;
  left: -1%; bottom: -4%;
  width: min(78%, 1150px);
  pointer-events: none;
}
.hero__car-tilt { position: relative; transform-origin: 50% 80%; }
.hero__car-tilt::before {
  content: ""; position: absolute; left: 4%; right: 6%; bottom: 2%; height: 14%;
  background: radial-gradient(closest-side, rgba(5, 6, 8, 0.55), transparent);
  filter: blur(6px);
}
.hero__car img { position: relative; width: 100%; height: auto; }
.hero__down {
  position: absolute; z-index: 2; right: var(--pad); bottom: var(--pad);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(251, 250, 247, 0.5);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.hero__down:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.hero__down svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- over ons + cijfers ---------- */
.about {
  --fg: var(--ink);
  position: relative;
  min-height: max(660px, calc(100svh - 2 * var(--gutter)));
  padding: var(--pad);
  background-color: var(--paper);
  color: var(--fg);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: center;
}
.about__body { grid-column: 2; padding-block: 72px; }
.about__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.5rem, 4.9vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.about__title mark {
  position: relative; color: inherit; background: none; padding: 0 0.12em; margin: 0 -0.06em;
  z-index: 0;
}
.about__title mark::before {
  content: ""; position: absolute; inset: 0.12em 0 0.02em; z-index: -1;
  background: var(--gold); border-radius: 0.12em;
  transform-origin: left center;
  transform: scaleX(var(--mark, 1));
}
.about__text { max-width: 560px; margin-top: clamp(28px, 5vh, 48px); }
.about__text h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.about__text p { margin: 0; color: rgba(5, 6, 8, 0.7); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: clamp(40px, 8vh, 80px) 0 0; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat dd { order: -1; margin: 0; display: flex; align-items: flex-start; font-size: clamp(2.6rem, 4.4vw, 4rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat__pre { margin-right: 0.04em; }
.stat__mark { width: 0.32em; height: 0.32em; margin: 0.08em 0 0 0.12em; fill: var(--gold); flex: none; }
.stat dt { font-size: 14px; line-height: 1.4; color: rgba(5, 6, 8, 0.66); max-width: 22ch; }
.about__down {
  position: absolute; left: var(--pad); bottom: var(--pad);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(5, 6, 8, 0.5);
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.about__down:hover { background: var(--gold); border-color: var(--gold); }
.about__down svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- diensten ---------- */
.services {
  position: relative;
  padding: clamp(56px, 8vh, 96px) var(--pad) clamp(72px, 12vh, 140px);
  background-color: var(--paper);
  color: var(--ink);
  overflow: clip;
}
.services__deco {
  position: absolute; right: -4%; top: -6%; width: min(30vw, 420px); height: auto; aspect-ratio: 1;
  fill: none; stroke: rgba(5, 6, 8, 0.07); stroke-width: 0.08;
  pointer-events: none;
}
.services__title {
  position: relative;
  max-width: 22ch;
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 6rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.services__title .w { display: inline-block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; vertical-align: top; }
.services__title .w > span { display: inline-block; }
.services__intro { position: relative; max-width: 340px; margin: clamp(24px, 4vh, 40px) 0 0 clamp(0px, 13vw, 200px); }
.services__intro h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.services__intro p { margin: 0; color: rgba(5, 6, 8, 0.7); }

.bento {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.75fr 1fr;
  grid-template-areas: "a b b c" "a d e e";
  grid-auto-rows: minmax(270px, auto);
  gap: 18px;
  margin-top: clamp(48px, 8vh, 88px);
}
.card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 260px;
  padding: clamp(22px, 2vw, 30px);
  border-radius: 24px;
  overflow: clip;
  isolation: isolate;
}
.card--dark { background: var(--ink-2); color: var(--white); }
.card--tall { min-height: 560px; }
.card--a { grid-area: a; } .card--b { grid-area: b; } .card--c { grid-area: c; }
.card--d { grid-area: d; } .card--e { grid-area: e; }
.card--light { background: var(--white); color: var(--ink); }
.card--light .card__text, .card--light .card__more { color: rgba(5, 6, 8, 0.7); }
.card__text, .card__more { order: 1; }
.card--a .card__text { order: 0; }
.card__foot { order: 2; margin-top: auto; padding-top: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.card__foot .card__go { margin-top: 0; flex: none; }
.card__foot .card__title { margin: 0; }
.card__more { max-width: 34ch; margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: rgba(251, 250, 247, 0.72); }
.card__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transform: scale(1.6) rotate(-8deg); }
.card__glyph {
  position: absolute; z-index: -1; right: -0.04em; top: -0.2em;
  font-size: 10rem; font-weight: 800; line-height: 1; color: transparent;
  -webkit-text-stroke: 1.5px rgba(253, 210, 60, 0.22);
  transition: transform .8s var(--ease-out);
}
.card--d:hover .card__glyph { transform: translateY(-10px) rotate(-6deg); }
.card--b { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; }
.card__col { display: flex; flex-direction: column; }
.ride {
  align-self: center;
  width: 230px; padding: 18px;
  border-radius: 18px;
  background: var(--ink); color: var(--white);
  box-shadow: 0 24px 40px -12px rgba(5, 6, 8, 0.45);
  transform: rotate(4deg) translateX(8px);
  transition: transform .6s var(--ease-out);
  font-size: 14px;
}
.card--b:hover .ride { transform: rotate(0deg) translateX(0) translateY(-4px); }
.ride__head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ride__logo { width: 16px; height: 16px; fill: var(--gold); }
.ride__stops { list-style: none; margin: 16px 0; padding: 0 0 0 18px; position: relative; display: grid; gap: 14px; }
.ride__stops::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 26px; border-left: 1.5px dashed rgba(253, 210, 60, 0.6); }
.ride__stops li { position: relative; font-weight: 600; }
.ride__stops li::before { content: ""; position: absolute; left: -18px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.ride__stops span { display: block; font-size: 12px; font-weight: 500; color: rgba(251, 250, 247, 0.6); }
.ride__status { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: rgba(251, 250, 247, 0.8); }
.ride__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.card__btns { display: flex; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: #24262b; }
.btn--line-ink { border: 1px solid rgba(5, 6, 8, 0.35); color: var(--ink); }
.btn--line-ink:hover { border-color: var(--ink); background: rgba(5, 6, 8, 0.05); }
.card__map { position: absolute; inset: 0; z-index: -1; }
.card__map svg { width: 100%; height: 100%; }
.card__streets { fill: none; stroke: rgba(251, 250, 247, 0.05); stroke-width: 8; }
.card__route { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out); }
.card__dot { fill: var(--gold); opacity: 0; transition: opacity .3s 1.3s; }
.card.is-in .card__route { stroke-dashoffset: 0; }
.card.is-in .card__dot { opacity: 1; }
.card__num { font-size: 14px; font-weight: 500; }
.card__text { max-width: 30ch; margin: 14px 0 0; font-size: 16px; line-height: 1.45; }
.card--dark .card__text { color: rgba(251, 250, 247, 0.78); }
.card__go {
  display: grid; place-items: center; width: 48px; height: 48px; margin-top: auto; border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.card__go svg { width: 20px; height: 20px; fill: currentColor; transition: transform .4s var(--ease-out); }
.card:hover .card__go, .card__go:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.card:hover .card__go svg { transform: rotate(-45deg); }
.card__title { margin: 18px 0 0; font-size: clamp(1.6rem, 2.1vw, 2.2rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }

/* ---------- tarieven ---------- */
.rates {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(80px, 14vh, 160px) var(--pad);
  background: var(--ink);
  color: var(--white);
}
.rates__side { align-self: start; position: sticky; top: calc(var(--gutter) + 56px); }
.rates__title { margin: 0; font-weight: 800; font-size: clamp(2.4rem, 4.3vw, 4.5rem); line-height: 0.98; letter-spacing: -0.04em; }
.rates__title em { font-style: normal; color: var(--gold); }
.rates__intro { max-width: 36ch; margin: 24px 0 0; color: var(--mute); font-size: 18px; }
.fixed {
  margin-top: clamp(40px, 7vh, 72px);
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 24px;
  background: var(--gold);
  color: var(--ink);
}
.fixed h3 { margin: 0; font-size: clamp(1.4rem, 1.9vw, 1.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; max-width: 18ch; }
.fixed p { margin: 12px 0 0; max-width: 42ch; color: rgba(5, 6, 8, 0.78); }
.fixed__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.fixed .btn--line-ink { border-color: rgba(5, 6, 8, 0.45); }
.fixed .btn--line-ink:hover { background: rgba(5, 6, 8, 0.08); }

.meter { margin: 0; align-self: start; }
.meter__row {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: clamp(26px, 4.4vh, 44px) 0;
}
.meter__row::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--line); transform-origin: left center;
  transform: scaleX(var(--rule, 1));
}
.meter__row:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.meter dt { font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 600; }
.meter dt small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--mute); }
.meter dd {
  margin: 0; display: flex; align-items: flex-start;
  font-size: clamp(3.2rem, 6.4vw, 6rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.meter__eur { font-size: 0.42em; margin: 0.08em 0.12em 0 0; color: var(--gold); letter-spacing: 0; }
.meter__val { display: inline-flex; }
.odo { display: inline-block; height: 1em; overflow: clip; }
.odo__col { display: flex; flex-direction: column; }
.odo__col span { height: 1em; line-height: 1; }

/* ---------- verwachtingen / reviews ---------- */
.voices {
  position: relative;
  padding: clamp(40px, 6vh, 72px) var(--pad) clamp(80px, 12vh, 140px);
  background: var(--ink);
  color: var(--white);
  overflow: clip;
}
.voices__title {
  margin: 0 0 0 auto;
  width: fit-content; max-width: 100%;
  font-weight: 800; font-size: clamp(2.5rem, 5.6vw, 5.8rem); line-height: 1; letter-spacing: -0.04em;
}
.voices__title span { display: block; white-space: nowrap; }
.voices__title em { font-style: normal; color: var(--gold); }
.voices__body {
  display: grid;
  grid-template-columns: minmax(200px, 0.75fr) minmax(0, 2fr);
  gap: 0;
  margin-top: clamp(48px, 9vh, 96px);
  align-items: center;
}
.voices__tabs { display: grid; align-self: center; }
.voices__tab {
  all: unset; box-sizing: border-box; cursor: pointer;
  padding: 22px 24px 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 500; letter-spacing: -0.02em;
  color: rgba(251, 250, 247, 0.45);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.voices__tab:hover { color: rgba(251, 250, 247, 0.8); }
.voices__tab[aria-selected="true"] { color: var(--white); border-color: var(--white); }
.voices__tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.voices__stage { position: relative; }
.voice { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.voice[hidden] { display: none; }
.voice__photo { position: relative; margin: 0; }
.voice__photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 20px; background: var(--ink-2);
}
.voice__text { display: flex; flex-direction: column; justify-content: center; padding-block: 48px; }
.voice__title { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.voice__lead { margin: 8px 0 0; font-size: 17px; color: rgba(251, 250, 247, 0.82); }
.voice__label { margin: 28px 0 8px; font-size: 14px; font-weight: 700; color: var(--gold); }
.voice__text p:not([class]) { margin: 0; max-width: 40ch; color: var(--mute); }
.voices__ask {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: clamp(56px, 9vh, 96px); padding-top: 32px; border-top: 1px solid var(--line);
}
.voices__ask p { margin: 0; max-width: 52ch; color: var(--mute); font-size: 18px; }
.voices__ask b { color: var(--white); font-weight: 600; }

/* ---------- veelgestelde vragen ---------- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(80px, 13vh, 150px) var(--pad) clamp(40px, 6vh, 72px);
  background: var(--paper);
  color: var(--ink);
}
.faq__side { align-self: start; position: sticky; top: calc(var(--gutter) + 48px); }
.faq__title { margin: 0; font-weight: 800; font-size: clamp(2.6rem, 5.2vw, 5.2rem); line-height: 0.98; letter-spacing: -0.04em; }
.faq__side p { max-width: 32ch; margin: 22px 0 0; color: rgba(5, 6, 8, 0.7); }
.faq a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.faq a:hover { text-decoration-color: var(--ink); }
.faq__list { border-top: 1px solid rgba(5, 6, 8, 0.16); interpolate-size: allow-keywords; }
.faq__item { border-bottom: 1px solid rgba(5, 6, 8, 0.16); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
.faq__item summary i {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(5, 6, 8, 0.3);
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), transform .4s var(--ease-out);
}
.faq__item summary i::before, .faq__item summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%);
}
.faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item summary:hover i { border-color: var(--ink); }
.faq__item[open] summary i { background: var(--gold); border-color: var(--gold); transform: rotate(45deg); }
.faq__item::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
.faq__a p { max-width: 62ch; margin: 0; padding: 0 64px 28px 0; font-size: 17px; line-height: 1.6; color: rgba(5, 6, 8, 0.78); }

/* ---------- sticky belbalk (mobiel) ---------- */
.dock { display: none; }
@media (max-width: 760px) {
  .dock {
    position: fixed; z-index: 70;
    left: calc(var(--gutter) + 10px); right: calc(var(--gutter) + 10px);
    bottom: calc(var(--gutter) + 10px + env(safe-area-inset-bottom));
    display: flex; gap: 8px; padding: 8px;
    border-radius: 999px;
    background: var(--ink);
    box-shadow: 0 0 0 1px var(--line), 0 16px 32px -8px rgba(0, 0, 0, 0.6);
    transform: translateY(calc(100% + 40px));
    transition: transform .5s var(--ease-out);
  }
  .dock.is-on { transform: none; }
  .dock .btn { flex: 1; }
}

/* ---------- contact ---------- */
.contact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(80px, 13vh, 150px) 0 clamp(80px, 13vh, 150px) var(--pad);
  background-color: var(--paper);
  color: var(--ink);
  overflow: clip;
}
.contact__main { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.contact__ring {
  position: absolute; z-index: 0; left: 18%; top: 42%;
  width: clamp(260px, 30vw, 440px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(5, 6, 8, 0.12);
  pointer-events: none;
}
.contact__ring::after {
  content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 1px dashed rgba(5, 6, 8, 0.1);
}
.contact__title {
  position: relative; grid-column: 1 / -1; margin: 0;
  font-weight: 800; font-size: clamp(2.8rem, 6vw, 6rem); line-height: 0.96; letter-spacing: -0.04em;
}
.contact__mark { display: inline-block; width: 0.36em; height: 0.36em; margin-left: 0.08em; fill: var(--gold); vertical-align: baseline; }
.contact__info { position: relative; grid-column: 2; max-width: 420px; margin-top: 8px; }
.contact__item + .contact__item { margin-top: 22px; }
.contact__item h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.contact__item p { margin: 0; color: rgba(5, 6, 8, 0.7); }
.contact__number {
  display: inline-block; margin-top: 28px; padding-block: 6px;
  font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 0.18em no-repeat;
  transition: background-size .5s var(--ease-out);
}
.contact__number:hover, .contact__number:focus-visible { background-size: 100% 0.18em; }
.contact__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.contact__mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 15px; color: rgba(5, 6, 8, 0.7); }
.contact__mail:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.contact__mail svg { width: 18px; height: 18px; fill: currentColor; }

.contact__panel {
  position: relative; align-self: center;
  min-height: clamp(540px, 74vh, 700px);
  border-radius: 28px 0 0 28px;
  background: var(--ink);
  overflow: clip;
  display: grid; place-items: center;
}
.contact__map { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; opacity: 0.9; }
.phone {
  position: relative;
  width: clamp(250px, 21vw, 300px); aspect-ratio: 300 / 610;
  padding: 10px; border-radius: 46px;
  background: #1a1b1f;
  box-shadow: inset 0 0 0 1.5px #3a3c42, 0 40px 60px -20px rgba(0, 0, 0, 0.8);
}
.phone__screen {
  position: relative; height: 100%; border-radius: 37px; overflow: clip;
  background: #0d0e10; color: var(--white);
  display: flex; flex-direction: column;
  font-size: 13px;
}
.phone__status { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 6px; font-size: 12px; font-weight: 600; }
.phone__island { width: 82px; height: 22px; border-radius: 12px; background: #000; }
.phone__bars { width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid rgba(251, 250, 247, 0.8); }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 12px; border-bottom: 1px solid var(--line); }
.chat__head b { display: block; font-size: 14px; }
.chat__head small { color: var(--mute); font-size: 11px; }
.chat__avatar { width: 34px; height: 34px; border-radius: 50%; }
.chat { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 12px; overflow: clip; }
.msg { max-width: 82%; margin: 0; padding: 9px 12px; border-radius: 16px; line-height: 1.35; }
.msg--me { align-self: flex-end; background: var(--gold); color: var(--ink); border-bottom-right-radius: 5px; }
.msg--them { align-self: flex-start; background: #202227; border-bottom-left-radius: 5px; }
.msg--loc { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.msg--loc svg { width: 14px; height: 14px; fill: currentColor; }
.msg--typing { display: none; align-self: flex-start; background: #202227; gap: 4px; padding: 12px 14px; }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(251, 250, 247, 0.6); }
.chat__input { display: flex; align-items: center; justify-content: space-between; margin: 0 12px 16px; padding: 10px 14px; border-radius: 999px; background: #202227; color: var(--mute); }
.chat__input svg { width: 16px; height: 16px; fill: var(--gold); }

/* ---------- footer ---------- */
.foot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  padding: clamp(64px, 10vh, 112px) var(--pad) 32px;
  background: var(--ink);
  color: var(--white);
}
.foot__badge { display: inline-block; border-radius: 50%; transition: transform .6s var(--ease-out); }
.foot__badge:hover { transform: rotate(-6deg) scale(1.03); }
.foot__badge img { width: clamp(112px, 10vw, 148px); height: auto; }
.foot__brand p { max-width: 30ch; margin: 18px 0 0; color: var(--mute); }
.foot__social { display: flex; gap: 6px; list-style: none; margin: 40px 0 0; padding: 0; }
.foot__social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.foot__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.foot__social svg { width: 19px; height: 19px; fill: currentColor; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot h2 { margin: 0 0 22px; font-size: 16px; font-weight: 700; }
.foot__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; color: rgba(251, 250, 247, 0.82); }
.foot__cols a { transition: color .2s var(--ease-out); }
.foot__cols a:hover { color: var(--gold); }
.foot__book p { margin: -10px 0 20px; color: var(--mute); }
.foot__book input {
  width: 100%; padding: 12px 0; margin-bottom: 18px;
  border: 0; border-bottom: 1px solid rgba(251, 250, 247, 0.4); border-radius: 0;
  background: none; color: var(--white); font: inherit; caret-color: var(--gold);
}
.foot__book input::placeholder { color: rgba(251, 250, 247, 0.62); }
.foot__book input:focus { outline: none; border-bottom-color: var(--gold); }
.foot__base {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(32px, 6vh, 64px); padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--mute);
}
.foot__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.foot__legal a { transition: color .2s var(--ease-out); }
.foot__legal a:hover { color: var(--gold); }

/* ---------- juridische pagina's ---------- */
.legal-top {
  display: flex; align-items: center; gap: 24px;
  padding: 28px var(--pad);
  background: var(--ink);
}
.legal-top__back { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 15px; color: var(--mute); transition: color .2s var(--ease-out); }
.legal-top__back svg { width: 16px; height: 16px; fill: currentColor; transform: scaleX(-1); }
.legal-top__back:hover { color: var(--white); }
.legal { background: var(--paper); color: var(--ink); padding: clamp(56px, 10vh, 112px) var(--pad) clamp(72px, 12vh, 140px); }
.legal__head h1 { margin: 0; font-weight: 800; font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 0.98; letter-spacing: -0.04em; }
.legal__head p { margin: 16px 0 0; color: rgba(5, 6, 8, 0.66); font-size: 15px; }
.legal__body { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 68ch); gap: clamp(40px, 7vw, 120px); margin-top: clamp(48px, 8vh, 88px); }
.legal__toc { position: sticky; top: calc(var(--gutter) + 32px); align-self: start; }
.legal__toc h2 { margin: 0 0 14px; font-size: 14px; font-weight: 700; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.legal__toc a {
  display: block; padding: 7px 0 7px 14px; border-left: 1px solid rgba(5, 6, 8, 0.15);
  font-size: 15px; color: rgba(5, 6, 8, 0.7);
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.legal__toc a:hover { color: var(--ink); border-color: var(--ink); }
.legal__toc a.is-active { color: var(--ink); border-color: var(--gold-deep); font-weight: 600; }
.crumbs { margin-bottom: clamp(28px, 5vh, 48px); font-size: 14px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; color: rgba(5, 6, 8, 0.66); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(5, 6, 8, 0.35); }
.crumbs a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(5, 6, 8, 0.3); text-underline-offset: 3px; }
.crumbs a:hover { text-decoration-color: var(--gold-deep); }

/* eenvoudige pagina's: bedankt en 404 */
.page { background: var(--paper); color: var(--ink); padding: clamp(56px, 10vh, 112px) var(--pad) clamp(72px, 12vh, 140px); }
.page__code { margin: 0 0 0.04em; font-size: clamp(7rem, 22vw, 18rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.page__title { margin: 0; max-width: 16ch; font-weight: 800; font-size: clamp(2.8rem, 6.4vw, 6rem); line-height: 0.98; letter-spacing: -0.04em; }
.page__body { max-width: 640px; margin-top: clamp(24px, 4vh, 40px); }
.page__lead { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; }
.page__note { margin: 36px 0 14px; font-weight: 700; }
.page__steps { list-style: none; margin: 36px 0 0; padding: 0; counter-reset: step; border-top: 1px solid rgba(5, 6, 8, 0.16); }
.page__steps li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; padding: 18px 0; border-bottom: 1px solid rgba(5, 6, 8, 0.16); color: rgba(5, 6, 8, 0.75); }
.page__steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--ink); font-weight: 800; }
.page__steps b { color: var(--ink); }
.page__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.page__more { margin: 36px 0 0; color: rgba(5, 6, 8, 0.75); }
.page__more a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.page__links { list-style: none; margin: 0; padding: 0; }
.page__links li:first-child a { border-top: 1px solid rgba(5, 6, 8, 0.16); }
.page__links a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(5, 6, 8, 0.16); font-size: 1.15rem; font-weight: 600; }
.page__links svg { width: 20px; height: 20px; fill: currentColor; transition: transform .3s var(--ease-out); }
.page__links a:hover svg { transform: translateX(6px); }
.page__links a:hover span { text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 4px; }

.legal__text section { scroll-margin-top: calc(var(--gutter) + 24px); }
.legal__text section + section { margin-top: clamp(40px, 6vh, 56px); }
.legal__text h2 { margin: 0 0 14px; font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.legal__text p, .legal__text li { font-size: 17px; line-height: 1.65; color: rgba(5, 6, 8, 0.82); }
.legal__text p { margin: 0 0 14px; }
.legal__text ul { margin: 0 0 14px; padding-left: 1.2em; }
.legal__text li + li { margin-top: 6px; }
.legal__text li::marker { color: var(--gold-deep); }
.legal__text b { color: var(--ink); font-weight: 600; }
.legal__text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal__text a:hover { text-decoration-color: var(--ink); }
.legal__rates { list-style: none; padding: 0 !important; border-top: 1px solid rgba(5, 6, 8, 0.14); }
.legal__rates li { display: flex; justify-content: space-between; gap: 16px; margin: 0 !important; padding: 12px 0; border-bottom: 1px solid rgba(5, 6, 8, 0.14); }
.legal__rates b { font-variant-numeric: tabular-nums; }

.foot__credit {
  grid-column: 1 / -1; justify-self: center;
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 4px; padding: 8px 4px;
  font-size: 12px; text-align: center; color: rgba(251, 250, 247, 0.62);
  opacity: 0.85; transition: opacity .25s var(--ease-out);
}
.foot__credit:hover { opacity: 1; }
.foot__credit img { width: auto; height: 11px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- geënsceneerde overgang (desktop, alleen met beweging) ---------- */
.intro.is-staged { height: 280vh; }
.is-staged .intro__stage {
  position: sticky; top: var(--gutter);
  height: max(660px, calc(100svh - 2 * var(--gutter)));
  overflow: clip;
}
.is-staged .hero, .is-staged .about { position: absolute; inset: 0; min-height: 0; }
.is-staged .hero { z-index: 2; }
.is-staged .hero__fg { height: 100%; }
.is-staged .about { z-index: 1; }


/* ---------- intro-beweging: alleen met JS en zonder reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title .line > span { transform: translateY(105%); }
  .js .hero__intro, .js .hero__rail li, .js .nav { opacity: 0; }
  .js .hero__car { opacity: 0; }
  .js .route { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .route__pin { opacity: 0; }
}

/* ---------- tablet & mobiel ---------- */
@media (max-width: 1080px) {
  .nav__links, .nav__area { display: none; }
  .nav { justify-content: space-between; }
  .hero__fg { grid-template-columns: minmax(0, 1fr) 48px; }
  .hero__intro { grid-column: 1; grid-row: 3; margin-top: 28px; max-width: 420px; padding-left: 0; }
  .plus { display: none; }
  .hero__rail { grid-column: 2; grid-row: 2 / 4; }
  .hero__car { width: 108%; left: -12%; }
  .about { grid-template-columns: 1fr; align-items: start; }
  .about__body { grid-column: 1; padding-block: 64px 96px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "a c" "d e"; }
  .rates { grid-template-columns: 1fr; }
  .voices__body { grid-template-columns: 1fr; gap: 32px; }
  .voices__tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; gap: 20px; }
  .voices__tab { padding-right: 0; white-space: nowrap; }
  .contact { grid-template-columns: 1fr; padding-right: var(--pad); }
  .faq { grid-template-columns: 1fr; }
  .faq__side { position: static; }
  .contact__panel { border-radius: 28px; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot__cols { grid-column: 1 / -1; grid-row: 2; }
  .rates__side { position: static; }
}
@media (max-width: 640px) {
  :root { --radius: 20px; }
  .hero { min-height: max(720px, calc(100svh - 2 * var(--gutter))); }
  .hero__fg { grid-template-columns: minmax(0, 1fr); padding-bottom: 46vw; }
  .hero__rail, .hero__down { display: none; }
  .logo__img { height: 36px; }
  .nav__cta { --h: 40px; padding: 0 14px; font-size: 14px; }
  .nav__cta svg { display: none; }
  .hero__title { font-size: clamp(2.9rem, 14vw, 4.2rem); margin-top: 36px; }
  .hero__ctas .btn { flex: 1 1 140px; }
  .hero__car { width: 138%; left: -40%; bottom: -1%; }
  .about__body { padding-block: 48px 88px; }
  .stats { grid-template-columns: 1fr; gap: 24px; }
  .stat { flex-direction: row; align-items: center; gap: 20px; }
  .stat dd { min-width: 4.2em; }
  .about__down { display: none; }
  .services__intro { margin-left: 0; }
  .bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e"; }
  .card--tall { min-height: 440px; }
  .card--b { grid-template-columns: 1fr; }
  .ride { transform: rotate(2deg); justify-self: start; }
  .card__foot { flex-wrap: wrap; }
  .card__btns { flex-wrap: wrap; justify-content: flex-start; }
  .meter__row { align-items: center; }
  .voices__title span { white-space: normal; }
  .voice { grid-template-columns: 1fr; gap: 8px; }
  .voice__text { padding-block: 16px 0; }
  .contact__main { grid-template-columns: 1fr; }
  .contact__info { grid-column: 1; }
  .contact__ring { left: 30%; top: 10%; }
  .contact__btns .btn { flex: 1 1 140px; }
  .faq__a p { padding-right: 0; }
  .foot { grid-template-columns: 1fr; }
  .foot__cols { grid-row: auto; grid-template-columns: 1fr 1fr; }
  .foot__cols > div:last-child { grid-column: 1 / -1; }
  .legal-top { flex-wrap: wrap; gap: 16px; }
  .legal-top .btn { display: none; }
  .legal__body { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
  .meter dd { font-size: clamp(2.6rem, 13vw, 3.4rem); }
}
.magnet { transition-property: background-color, color, border-color; }