@charset "UTF-8";
/* HRC Rijbewijs - huisstijl. Kleuren uit het logo: oranje #E8822A, antraciet #23262B. */
/* ============================================================
   HRC RIJBEWIJS — site-mockup + merkkit
   Palet: oranje uit het logo (#E8822A), wit en lichtgrijs.
   Antraciet (#23262B, ook uit het logo) draagt de tekst.
   ============================================================ */

:root{
  color-scheme: light;

  --accent:       #E8822A;   /* logo-oranje — vlakken en knoppen */
  --accent-deep:  #CF6E19;   /* hover */
  --accent-text:  #A85510;   /* de enige oranje die als tekst op wit mag */
  --accent-wash:  #FCF1E6;
  --on-accent:    #23262B;   /* tekst ín een oranje vlak */

  --ink:          #23262B;   /* koppen — antraciet uit het logo */
  --ink-deep:     #14161A;
  --body:         #5A6067;
  --muted:        #868D95;

  --paper:        #FFFFFF;
  --surface:      #F7F8F8;
  --mist:         #EDEEEF;
  --line:         #DFE1E3;
  --line-soft:    #EFF0F1;

  --good:         #1A7A4F;
  --good-wash:    #EAF6F0;
  --error:        #C0392B;

  --radius:   10px;
  --radius-s: 7px;
  --shadow-s: 0 1px 2px rgba(35,38,43,.05), 0 2px 6px rgba(35,38,43,.05);
  --shadow-m: 0 2px 6px rgba(35,38,43,.06), 0 10px 26px rgba(35,38,43,.08);
  --maxw: 1120px;

  --f-head: "Archivo", "Segoe UI", Arial, sans-serif;
  --f-body: "Open Sans", "Segoe UI", Arial, sans-serif;
}

/* Deze site is bewust altijd licht — ook als de bezoeker zijn
   telefoon of browser op donker heeft staan. Er is dus geen
   donkere variant; `color-scheme: light` hierboven zorgt er ook
   voor dat invoervelden en scrollbars licht blijven. */

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--f-head);
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}

p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }
a{ color: var(--accent-text); }

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

/* height:auto is nodig: zonder dat houdt de browser het height-attribuut
   van de afbeelding aan terwijl de breedte krimpt — dan rekt de foto uit. */
img{ max-width:100%; height:auto; display:block; }

.wrap{
  width:100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---------- basisonderdelen ---------- */
.eyebrow{
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 10px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .97rem;
  padding: 13px 24px;
  border-radius: var(--radius-s);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Witte knoptekst op het logo-oranje: bewuste keuze van de opdrachtgever.
   Let op: wit op #E8822A haalt 2,7:1 en blijft daarmee onder de WCAG-norm
   van 4,5:1. Wordt de leesbaarheid buiten een probleem, dan is het oranje
   verdiepen naar #B35E13 de oplossing — dan haalt wit 4,6:1. */
.btn--primary{ background: var(--accent); color: #fff; }
.btn--primary:hover{ background: var(--accent-deep); }
.btn--dark{ background: var(--ink); color: var(--paper); }
.btn--dark:hover{ background: var(--ink-deep); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover{ border-color: var(--ink); }
.btn--block{ width:100%; }

.todo{
  display:inline-block;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-text);
  border: 1.5px dashed var(--accent);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
  white-space: nowrap;
}

/* foto's uit de huidige site */
.photo{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-m); }
.photo img{ width:100%; height:auto; }

/* ============================================================
   HEADER
   ============================================================ */
.topbar{
  background: var(--mist);
  border-bottom: 1px solid var(--line);
  color: var(--body);
  font-size: .81rem;
}
.topbar__in{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 24px; padding-block: 8px; }
.topbar a{ color: var(--ink); text-decoration:none; font-weight:700; }
.topbar a:hover{ color: var(--accent-text); }
.topbar__end{ margin-left:auto; }

.siteheader{
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.siteheader__in{ display:flex; align-items:center; gap:16px; padding-block: 13px; position:relative; }
.brandmark img{ height: 36px; width:auto; }

.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav a{
  font-weight:600; font-size:.93rem;
  color: var(--ink); text-decoration:none;
  padding: 8px 12px; border-radius: 6px;
}
.nav a:hover{ color: var(--accent-text); background: var(--surface); }
.nav a.is-active{ color: var(--accent-text); }
.siteheader .btn{ padding: 10px 18px; font-size:.9rem; }

.navtoggle{
  display:none; margin-left:auto;
  background: var(--surface); border:1px solid var(--line);
  border-radius: 7px; padding: 9px 13px; cursor:pointer;
  font-family: var(--f-head); font-weight:700; font-size:.85rem; color: var(--ink);
}

/* ============================================================
   HERO
   ============================================================ */
/* De bestaande herofoto blijft, maar onder een witte sluier zodat
   de pagina licht blijft en de tekst leesbaar is. */
.hero{
  background-image:
    linear-gradient(100deg,
      rgba(255,255,255,.975) 0%,
      rgba(255,255,255,.95) 36%,
      rgba(255,255,255,.74) 56%,
      rgba(255,255,255,.42) 100%),
    url("img/hero.jpg");
  background-size: cover;
  background-position: 72% 38%;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
}
.startgrid{ display:grid; grid-template-columns: 1fr 360px; gap: 48px; align-items:center; }
.hero__in{
  display:grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items:center;
  padding-block: 58px 62px;
}
.hero h1{
  font-size: clamp(2.05rem, 4.2vw, 3.1rem);
  font-weight: 800;
  margin-bottom: 18px;
}
.hero__lead{ font-size: 1.08rem; max-width: 50ch; margin-bottom: 26px; }
.hero__lead strong{ color: var(--ink); }
.hero__cta{ display:flex; flex-wrap:wrap; gap: 11px; }

.herocard{
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-m);
  padding: 26px;
}
.herocard h2{ font-size: 1.35rem; font-weight:800; color: var(--accent-text); margin-bottom: 6px; }
.herocard > p{ font-size:.92rem; margin-bottom: 18px; }
.facts{ display:grid; gap:1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-s); overflow:hidden; margin-bottom: 18px; }
.facts div{ background: var(--paper); padding: 13px 16px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.facts .k{ font-size:.8rem; color: var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.facts .v{ font-family: var(--f-head); font-weight:800; color: var(--ink); font-size:1.02rem; margin:0; }

/* ============================================================
   SECTIES
   ============================================================ */
.section{ padding-block: 64px; }
.section--tint{ background: var(--surface); border-block: 1px solid var(--line); }
.section--mist{ background: var(--mist); border-block: 1px solid var(--line); }

.section__head{ max-width: 60ch; margin-bottom: 36px; }
.section__head h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 12px; }
.section__head p{ font-size: 1.04rem; }

.prose{ max-width: 68ch; }
.prose p{ margin-bottom: 1.1em; }

.split{ display:grid; grid-template-columns: 1fr 340px; gap: 48px; align-items:start; }
.sidecard{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-s);
}
.sidecard .amount{
  font-family: var(--f-head); font-weight:800;
  font-size: 2.6rem; color: var(--ink); line-height:1;
  font-variant-numeric: tabular-nums;
}
.sidecard .amount small{ font-size:.34em; color: var(--muted); font-weight:700; }
.sidecard h3{ font-size:1.05rem; font-weight:800; margin-bottom: 8px; }
.sidecard p{ font-size:.92rem; }
.sidecard hr{ border:0; border-top:1px solid var(--line); margin: 18px 0; }

.pill{
  display:inline-block; background: var(--accent-wash); color: var(--accent-text);
  border-radius: 999px; padding: 4px 13px;
  font-size:.8rem; font-weight:700;
}

.reasons{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap: 4px 44px; }
.reasons li{
  display:grid; grid-template-columns: 24px 1fr; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.reasons li::before{
  content: "\2713 "; color: var(--accent-text); font-weight:700; font-size:1.05rem; line-height:1.5;
}
.reasons b{ display:block; font-family: var(--f-head); color: var(--ink); font-size:1rem; font-weight:700; }
.reasons p{ margin:2px 0 0; font-size:.94rem; }

.ctaband{
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 30px 32px;
  display:flex; flex-wrap:wrap; align-items:center; gap: 22px;
}
.ctaband h2{ font-size: 1.45rem; font-weight:800; margin-bottom: 6px; }
.ctaband div{ flex:1 1 320px; }
.ctaband p{ font-size:.97rem; }

/* formulier */
.formwrap{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start; }
.formcard{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-m);
}
.field{ margin-bottom: 14px; }
.field label{ display:block; font-size:.8rem; font-weight:700; color: var(--ink); margin-bottom: 5px; }
.field input, .field textarea, .field select{
  width:100%; font: inherit; font-size:.96rem;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  padding: 11px 13px;
}
.field input:hover, .field textarea:hover, .field select:hover{ border-color: var(--muted); }
.field input::placeholder, .field textarea::placeholder{ color: var(--muted); }
.checkrow{ display:flex; gap:11px; align-items:flex-start; margin: 4px 0 16px; }
.checkrow input{ width:19px; height:19px; accent-color: var(--accent); margin-top:3px; flex:none; }
.checkrow label{ font-size:.93rem; color: var(--ink); font-weight:600; }
.formnote{ font-size:.79rem; color: var(--muted); margin: 12px 0 0; }
.formdone{
  background: var(--good-wash); border:1.5px solid var(--good);
  border-radius: var(--radius-s); padding: 18px;
}
.formdone strong{ display:block; font-family: var(--f-head); color: var(--good); font-size:1.08rem; margin-bottom:4px; }
.formdone p{ margin:0; font-size:.9rem; }

/* instructeur */
.mich{ display:grid; grid-template-columns: 320px 1fr; gap: 48px; align-items:start; }
.mich__photo{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-m); }
.mich__photo img{ width:100%; height:auto; aspect-ratio: 480 / 478; object-fit: cover; }
.mich__quote{
  font-family: var(--f-head); font-weight:600;
  font-size: 1.22rem; color: var(--ink);
  border-left: 3px solid var(--accent); padding-left: 18px;
  margin: 0 0 26px; line-height:1.45;
}
.qa{ display:grid; gap: 22px; }
.qa h3{ font-size:1.02rem; font-weight:800; color: var(--accent-text); margin-bottom: 4px; }
.qa p{ font-size:.97rem; }

/* beoordelingen — sterren zijn SVG, zodat 4,4 ook echt als 4,4 vult */
.starsvg{ display:block; width: 78px; height: 15.6px; flex:none; }
.starsvg--lg{ width: 100px; height: 20px; }

.ratings{ display:flex; flex-wrap:wrap; gap: 16px 36px; margin-top: 28px; }
.rating{ text-decoration:none; display:block; }
.rating__top{ display:flex; align-items:center; gap: 10px; }
.rating__score{
  font-family: var(--f-head); font-weight:800; font-size: 1.4rem;
  color: var(--ink); line-height:1; font-variant-numeric: tabular-nums;
}
.rating__max{ font-size:.85rem; color: var(--muted); font-weight:700; }
.rating__meta{
  display:flex; align-items:center; gap: 6px; flex-wrap:wrap;
  font-size:.8rem; color: var(--body); margin-top: 7px;
}
.rating__meta b{ color: var(--ink); font-weight:700; }
.rating__meta svg{ width:14px; height:14px; }
.rating:hover .rating__score{ color: var(--accent-text); }
.rating:hover .rating__meta b{ color: var(--accent-text); }

.scores{ display:grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 24px; }
.scorecard{
  background: var(--paper); border:1px solid var(--line);
  border-top: 4px solid var(--accent); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-s);
}
.scorecard__top{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.scorecard__num{
  font-family: var(--f-head); font-weight:800; font-size: 2.5rem;
  color: var(--ink); line-height:1; font-variant-numeric: tabular-nums;
}
.scorecard__num small{ font-size:.34em; color: var(--muted); font-weight:700; }
.scorecard h3{ font-size:1.02rem; font-weight:800; margin-bottom: 2px; }
.scorecard__meta{ font-size:.86rem; color: var(--muted); margin: 8px 0 0; }
.scorecard a{ color: var(--accent-text); font-weight:700; text-decoration:none; font-size:.87rem; }
.scorecard a:hover{ text-decoration:underline; }
.subscores{ display:grid; gap: 9px; margin: 18px 0 0; }
.subscore{ display:grid; grid-template-columns: 124px 1fr 30px; gap: 12px; align-items:center; font-size:.85rem; }
.subscore .bar{ height: 6px; border-radius: 99px; background: var(--mist); }
.subscore .bar i{ display:block; height:100%; border-radius:99px; background: var(--accent); }
.subscore b{ text-align:right; color: var(--ink); font-variant-numeric: tabular-nums; }

.quotes{ display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.quote{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.quote p{ color: var(--ink); font-size:.95rem; }
.quote footer{ font-size:.78rem; color: var(--muted); margin-top: 12px; }

/* geslaagden — oneindige carrousel. De track bevat de kaarten twee keer;
   hij schuift precies één set op en springt dan naadloos terug. */
.marquee{ position: relative; overflow: hidden; --gap: 18px; }
.marquee::before, .marquee::after{
  content: ""; position:absolute; top:0; bottom:0; width: 80px; z-index: 2; pointer-events:none;
}
.marquee::before{ left:0;  background: linear-gradient(90deg,  var(--paper), rgba(255,255,255,0)); }
.marquee::after{  right:0; background: linear-gradient(270deg, var(--paper), rgba(255,255,255,0)); }
.marquee__track{
  display:flex; gap: var(--gap); width: max-content;
  animation: gradslide 48s linear infinite;
}
.marquee__group{ display:flex; gap: var(--gap); }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state: paused; }
@keyframes gradslide{
  from{ transform: translateX(0); }
  to{   transform: translateX(calc(-50% - var(--gap) / 2)); }
}
@media (prefers-reduced-motion: reduce){
  .marquee{ overflow-x: auto; }
}

.grad{ width: 228px; flex: none; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.grad__ph{
  aspect-ratio: 4 / 5; background: var(--mist);
  display:grid; place-items:center; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.grad__ph svg{ width: 44px; height: 44px; opacity:.5; }
.grad__ph span{ font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; margin-top:8px; }
.grad__body{ padding: 15px 17px 17px; }
.grad__name{ font-family: var(--f-head); font-weight:800; color: var(--ink); font-size:1rem; line-height:1.3; }
.grad__date{ font-size:.77rem; color: var(--muted); margin-bottom: 9px; }
.grad__quote{ font-size:.89rem; margin: 0; }

/* FAQ */
.faq{ max-width: 780px; }
.faq details{ border-bottom: 1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:16px;
  padding: 18px 0;
  font-family: var(--f-head); font-weight:700; font-size: 1.05rem; color: var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content: "+"; margin-left:auto; flex:none; font-size:1.4rem; color: var(--accent-text); line-height:1; }
.faq details[open] summary::after{ content: "\2013 "; }
.faq details > div{ padding: 0 0 20px; max-width: 66ch; }

/* contact */
.contactgrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start; }
.contactlist{ list-style:none; margin: 22px 0 0; padding:0; }
.contactlist li{
  display:grid; grid-template-columns: 104px 1fr; gap:16px;
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size:.97rem;
}
.contactlist .k{ color: var(--muted); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; padding-top:3px; }
.contactlist a{ color: var(--ink); text-decoration:none; font-weight:700; }
.contactlist a:hover{ color: var(--accent-text); }

/* werkgebied */
.places{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 4px; }
.places span{
  display:inline-block;
  background: var(--paper); border:1px solid var(--line); border-radius: 999px;
  padding: 7px 15px; color: var(--ink); font-size:.9rem; font-weight:600;
}
.places span.is-home{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* footer */
.sitefooter{ background: var(--mist); border-top: 1px solid var(--line); font-size:.92rem; }
.sitefooter__in{ display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-block: 44px 34px; }
.sitefooter h4{ font-family: var(--f-head); color: var(--ink); font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; font-weight:800; margin-bottom: 12px; }
.sitefooter ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.sitefooter a{ color: var(--body); text-decoration:none; }
.sitefooter a:hover{ color: var(--accent-text); }
.sitefooter img{ height: 34px; width:auto; margin-bottom: 14px; }
.footbottom{
  border-top: 1px solid var(--line); padding-block: 16px 22px;
  display:flex; flex-wrap:wrap; gap: 8px 24px; font-size:.82rem; color: var(--muted);
}

/* social — Facebook, Instagram, mail, telefoon.
   Staat bewust ná .topbar a en .sitefooter a: die zetten een eigen
   kleur op elke link en zouden anders de witte icoonkleur overschrijven
   (antraciet icoon op een antraciet rondje = onzichtbaar). */
.social{ display:flex; gap:7px; align-items:center; }
.topbar .social a,
.sitefooter .social a,
.social a{
  width: 30px; height: 30px; border-radius: 50%;
  display:grid; place-items:center;
  background: var(--ink); color: #fff;
  transition: background-color .15s ease, color .15s ease;
}
.topbar .social a:hover,
.sitefooter .social a:hover,
.social a:hover{ background: var(--accent); color: var(--on-accent); }
.social svg{ width: 15px; height: 15px; display:block; }
.social--lg a{ width: 36px; height: 36px; }
.social--lg svg{ width: 17px; height: 17px; }

/* mobiele actiebalk */
.mobilebar{
  display:none;
  position: fixed; left:0; right:0; bottom:0; z-index:70;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  gap: 9px; box-shadow: 0 -4px 18px rgba(35,38,43,.1);
}
.mobilebar .btn{ flex:1; padding: 12px 8px; font-size:.9rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px){
  .hero__in{ grid-template-columns: 1fr; gap: 34px; padding-block: 42px 48px; }
  /* smal scherm: de foto staat onder de tekst, dus sluier dichttrekken */
  .hero{
    background-image:
      linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.96)),
      url("img/hero.jpg");
    background-position: center 30%;
  }
  .split, .formwrap, .mich, .contactgrid, .startgrid{ grid-template-columns: 1fr; gap: 32px; }
  .scores, .quotes{ grid-template-columns: 1fr; }
  .mich__photo{ max-width: 300px; }
  .reasons{ grid-template-columns: 1fr; gap: 0; }
  .sitefooter__in{ grid-template-columns: 1fr 1fr; }
  .nav{ display:none; }
  .navtoggle{ display:block; }
  .nav.is-open{
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; left:0; right:0; top:100%;
    background: var(--paper); border-bottom:1px solid var(--line);
    padding: 8px 20px 16px; gap:2px; margin:0; box-shadow: var(--shadow-m);
  }
  .siteheader .btn{ display:none; }
  .mobilebar{ display:flex; }
  body{ padding-bottom: 70px; }
  .section{ padding-block: 48px; }
}

@media (max-width: 600px){
  body{ font-size: 16px; }
  .sitefooter__in{ grid-template-columns: 1fr; }
  .topbar__end{ margin-left:0; }
  .ctaband{ padding: 24px; }
  .formcard, .sidecard, .herocard{ padding: 20px; }
  .hero__cta .btn{ flex:1; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
html{ scroll-behavior: smooth; scroll-padding-top: 110px; }


/* ---------- tarievenlijst ---------- */
.pricelist{ border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--paper); }
.pricerow{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding: 13px 20px; border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.pricerow:last-child{ border-bottom:0; }
.pricerow span:first-child{ color: var(--ink); }
.pricerow b{ font-family: var(--f-head); font-weight:800; color: var(--ink); white-space:nowrap; }
.pricerow.is-highlighted{ background: var(--accent-wash); }
.pricerow.is-highlighted b{ color: var(--accent-text); }

/* ---------- diensten ---------- */
.services{ display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.service{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  border-top: 4px solid var(--accent); padding: 26px; display:flex; flex-direction:column;
}
.service h3{ font-size:1.2rem; font-weight:800; margin-bottom: 8px; }
.service__price{
  display:inline-block; background: var(--accent-wash); color: var(--accent-text);
  border-radius: 999px; padding: 4px 13px; font-size:.82rem; font-weight:700; margin-bottom: 12px;
  align-self: flex-start;
}
.service p{ font-size:.95rem; }
.service .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- stappenplan ---------- */
.steps{ list-style:none; counter-reset: step; margin:0; padding:0; display:grid; gap: 14px; }
.steps li{
  counter-increment: step; display:grid; grid-template-columns: 34px 1fr; gap:16px;
  align-items:center; font-size:.97rem;
}
.steps li::before{
  content: counter(step);
  width:34px; height:34px; border-radius:50%;
  background: var(--accent); color: var(--on-accent);
  display:grid; place-items:center;
  font-family: var(--f-head); font-weight:800; font-size:.95rem;
}

/* ---------- geslaagdenfoto's ---------- */
.grad__ph{ background: var(--mist) center/cover no-repeat; }

/* ---------- foutmeldingen ---------- */
.field-error{ color:#C0392B; font-size:.82rem; margin-top:5px; font-weight:600; }
.field input.is-invalid, .field textarea.is-invalid{ border-color:#C0392B; }

@media (max-width: 940px){
  .services{ grid-template-columns: 1fr; }
}

/* ---------- correcties ---------- */
/* De prijspil staat in een kolom-flexbox; zonder dit rekt hij over de
   volle breedte uit omdat align-items standaard op stretch staat. */
.service__price{ align-self: flex-start; }

/* ---------- hover op de hoofdknop ---------- */
/* De knop komt iets omhoog, krijgt een warme schaduw en er schuift een
   pijl uit. De pijl staat er standaard niet, zodat de knop in rust
   rustig blijft. */
.btn--primary{
  position: relative;
  transition: background-color .16s ease, transform .18s ease, box-shadow .18s ease;
}
.btn--primary::after{
  content: "\2192 ";
  display: inline-block;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  transform: translateX(-4px);
  transition: max-width .22s ease, opacity .18s ease, margin-left .22s ease, transform .22s ease;
}
.btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(232, 130, 42, .38);
}
.btn--primary:hover::after{
  max-width: 1.4em;
  opacity: 1;
  margin-left: 9px;
  transform: translateX(0);
}
.btn--primary:active{
  transform: translateY(0);
  box-shadow: none;
}
.btn--primary:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(232, 130, 42, .38);
}

/* In de vaste balk onderaan op mobiel geen lift, dat oogt onrustig. */
.mobilebar .btn--primary:hover{ transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce){
  .btn--primary:hover{ transform: none; box-shadow: none; }
  .btn--primary::after{ display: none; }
}

/* Witte tekst op alle oranje vlakken, gelijk aan de knoppen. */
.steps li::before{ color: #fff; }
.places span.is-home{ color: #fff; }

/* In het stappenblok was de rechterkaart twee keer zo hoog als de stappen
   ernaast, wat een gat linksonder opleverde. Gelijke kolommen laten de
   tekst breder lopen, waardoor de kaart korter wordt en de twee blokken
   elkaar in hoogte benaderen. */
#rijopleiding .split{ grid-template-columns: 1fr 1fr; align-items: start; }

@media (max-width: 940px){
  #rijopleiding .split{ grid-template-columns: 1fr; }
}

/* Het open/dicht-teken was een en-streepje, dat als los teken snel
   verkeerd gedecodeerd wordt. Nu blijft het een plus die 45 graden
   draait en daarmee een kruisje wordt. Scheelt een teken en het
   beweegt netjes mee. */
.faq summary::after{
  content: "+";
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), color .2s ease;
  transform-origin: 50% 50%;
  line-height: 1;
}
.faq details[open] summary::after{
  content: "+";
  transform: rotate(45deg);
}
.faq summary:hover::after{ color: var(--accent); }

@media (prefers-reduced-motion: reduce){
  .faq summary::after{ transition: none; }
}

/* ---------- hero: foto weer zichtbaar ---------- */
/* De oude sluier liep tot 42% dekking aan de rechterkant, precies waar het
   witte proefleskaartje staat. Daardoor was er van de foto niets te zien.
   Nu dekt de sluier alleen nog de linkerhelft af, waar de tekst staat, en
   blijft de foto rechts open. De hero is hoger zodat de foto ook boven en
   onder het kaartje zichtbaar is. */
.hero{
  background-image:
    linear-gradient(95deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.94) 26%,
      rgba(255,255,255,.62) 44%,
      rgba(255,255,255,.20) 62%,
      rgba(255,255,255,.06) 100%),
    url("/img/hero.jpg");
  background-size: cover;
  background-position: 72% 32%;
}
.hero__in{ min-height: 520px; align-items: center; }

@media (max-width: 940px){
  /* Smal scherm: tekst staat boven de foto, dus hier moet de sluier wel
     dicht. Net licht genoeg om de auto te herkennen. */
  .hero{
    background-image:
      linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.94)),
      url("/img/hero.jpg");
    background-position: center 28%;
  }
  .hero__in{ min-height: 0; }
}

/* De herofoto is opnieuw bijgesneden naar 1600x744 met het onderwerp
   rechts, zodat de tekst links vrij blijft. Daardoor kan de sluier
   lichter en komt de foto beter uit. */
.hero{ background-position: center 35%; }
@media (max-width: 940px){
  .hero{ background-position: 62% center; }
}

/* ---------- zwevende WhatsApp-knop ---------- */
/* Oranje cirkel met het witte WhatsApp-teken. Op desktop schuift er een
   label uit bij hover; op mobiel staat hij boven de vaste actiebalk. */
.wa{
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 20px rgba(35, 38, 43, .22);
  transition: transform .2s ease, box-shadow .2s ease, background-color .16s ease;
}
.wa:hover{
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(232, 130, 42, .42);
}
.wa__icon{
  flex: none;
  width: 58px; height: 58px;
  display: grid; place-items: center;
}
.wa__icon svg{ width: 32px; height: 32px; display: block; }
.wa__label{
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .26s cubic-bezier(.4,0,.2,1), opacity .2s ease, padding-left .26s ease;
}
.wa:hover .wa__label,
.wa:focus-visible .wa__label{
  max-width: 11rem;
  opacity: 1;
  padding-left: 20px;
}

@media (max-width: 940px){
  /* boven de vaste balk onderaan */
  .wa{ bottom: calc(86px + env(safe-area-inset-bottom, 0px)); right: 16px; }
  .wa__icon{ width: 52px; height: 52px; }
  .wa__icon svg{ width: 28px; height: 28px; }
  .wa__label{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .wa:hover{ transform: none; }
  .wa__label{ transition: none; }
}

/* De looptijd komt uit de template (vier seconden per kaart), zodat de
   snelheid gelijk blijft als er geslaagden bij komen. 60s is de terugval
   als de variabele om wat voor reden dan ook niet gezet is. */
.marquee__track{ animation-duration: var(--marquee-duration, 60s); }

/* ---------- beoordelingen ---------- */
.scorebar{
  display:flex; flex-wrap:wrap; align-items:center; gap: 16px 34px;
  background: var(--paper); border:1px solid var(--line);
  border-radius: var(--radius); padding: 18px 24px; margin-bottom: 26px;
}
.scorebar__main{ display:flex; align-items:baseline; gap: 10px; }
.scorebar__num{
  font-family: var(--f-head); font-weight:800; font-size: 2.1rem;
  color: var(--ink); line-height:1; font-variant-numeric: tabular-nums;
}
.scorebar__max{ font-size:.85rem; color: var(--muted); font-weight:600; }
.scorebar__links{ display:flex; flex-wrap:wrap; gap: 10px 28px; margin-left:auto; }
.scorebar__links a{ text-decoration:none; color: var(--body); font-size:.88rem; }
.scorebar__links a b{
  font-family: var(--f-head); font-weight:800; font-size:1.05rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.scorebar__links a span{ display:block; font-size:.75rem; color: var(--muted); margin-top:2px; }
.scorebar__links a:hover b{ color: var(--accent-text); }

/* De kaarten worden door het raster even hoog. Zonder dit zakt de tekst
   naar boven en blijft er een gat onder korte reviews staan: de naam
   hoort onderaan vast te zitten. */
.quote{ display:flex; flex-direction:column; margin:0; }
.quote blockquote{ margin:0; flex:1; color: var(--ink); font-size:.95rem; line-height:1.65; }
.quote figcaption{
  display:flex; align-items:center; gap: 11px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.quote__avatar{
  flex:none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-text);
  display:grid; place-items:center;
  font-family: var(--f-head); font-weight:800; font-size:.88rem;
  text-transform: uppercase;
}
.quote__who{ display:flex; flex-direction:column; line-height:1.35; }
.quote__name{ color: var(--ink); font-weight:700; font-size:.87rem; }
.quote__grade{ font-size:.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 940px){
  .scorebar__links{ margin-left:0; }
}

/* ---------- paginakop op de binnenpagina's ---------- */
.pagehead{
  background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
  padding-block: 48px 44px;
}
.pagehead h1{
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  margin-bottom: 14px;
}
.pagehead__lead{
  font-size: 1.08rem;
  max-width: 62ch;
  margin: 0;
}

/* ---------- logo's in de scorebalk ---------- */
.scorebar__head{ display:flex; align-items:center; gap: 8px; }
.pflogo{ width: 17px; height: 17px; flex: none; display:block; }
.scorebar__links a span:last-child{ padding-left: 25px; }
@media (max-width: 600px){
  .scorebar__links a span:last-child{ padding-left: 0; }
}

/* ---------- correctie scorebalk ---------- */
/* .scorebar__links a span stond al eerder in dit bestand en heeft een
   hogere specificiteit dan .scorebar__head, waardoor het logo boven de
   tekst belandde in plaats van ernaast. Vandaar deze preciezere regels. */
.scorebar__links a > .scorebar__head{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--body);
  margin-top: 0;
}
.scorebar__links a > .scorebar__head > span{
  display: inline;
  font-size: inherit;
  color: inherit;
  margin: 0;
}
.scorebar__links a > span:last-child{
  display: block;
  padding-left: 25px;
  font-size: .75rem;
  color: var(--muted);
  margin-top: 3px;
}
@media (max-width: 600px){
  .scorebar__links a > span:last-child{ padding-left: 0; }
}

/* ---------- pijl op de knop als echt icoon ---------- */
/* Het tekstteken is vervangen door de arrow-right van Heroicons, als
   masker zodat hij automatisch de tekstkleur van de knop overneemt. */
.btn--primary::after{
  content: "";
  display: inline-block;
  width: 0;
  height: 1.05em;
  max-width: none;
  opacity: 0;
  margin-left: 0;
  overflow: visible;
  transform: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: width .22s cubic-bezier(.4,0,.2,1), opacity .18s ease, margin-left .22s cubic-bezier(.4,0,.2,1);
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after{
  width: 1.05em;
  max-width: none;
  opacity: 1;
  margin-left: 10px;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .btn--primary::after{ display: none; }
}

/* ---------- scorebalk opnieuw: raster met gelijke cellen ---------- */
/* De vorige opzet waren twee losse flex-blokken die los van elkaar
   afbraken, wat rommelig oogde. Een raster met een lijn van 1px als
   gat geeft nette scheidingen, ook als de cellen naar een tweede rij
   wikkelen. */
.scorebar{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 26px;
  padding: 0;
}
.scoreitem{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--paper);
  text-decoration: none;
  transition: background-color .15s ease;
}
a.scoreitem:hover{ background: var(--surface); }
.scoreitem__top{
  display: flex; align-items: center; gap: 7px;
  font-size: .79rem; font-weight: 700; color: var(--body);
}
.scoreitem__value{
  font-family: var(--f-head); font-weight: 800; font-size: 1.65rem;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.scoreitem__value small{ font-size: .48em; color: var(--muted); font-weight: 700; }
.scoreitem__label{ font-size: .75rem; color: var(--muted); }
a.scoreitem:hover .scoreitem__value{ color: var(--accent-text); }

/* ---------- pijl: geen layoutverschuiving meer ---------- */
/* De breedte animeren herberekent de layout, waardoor de hele regel
   meebewoog. Het pijltje staat nu altijd in de knop en schuift alleen
   op met transform, wat de layout niet raakt. */
.btn--primary::after{
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  max-width: none;
  margin-left: 9px;
  opacity: .85;
  overflow: visible;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: translateX(0);
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after{
  width: 1.05em;
  margin-left: 9px;
  opacity: 1;
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce){
  .btn--primary::after{ display: inline-block; transition: none; }
  .btn--primary:hover::after{ transform: none; }
}