/* Rijschool Hartewens — Hoofddorp. De schakel⇄automaat-keuze als werkende toggle: hun
   prijslijst bestaat dubbel en hun wagenpark (BMW = schakel, Audi = automaat) staat er op
   één eigen foto naast elkaar. De toggle op de duo-foto zet in de tarieven de gekozen
   kolom aan; zonder JS staan beide kolommen gewoon volledig zichtbaar. Denimblauw + zand,
   Bitter (slab) + Assistant. */

@font-face{font-family:'Kop';src:url('fonts/bitter-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Kop';src:url('fonts/bitter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Tekst';src:url('fonts/assistant-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Tekst';src:url('fonts/assistant-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --grond:#F6F2EA;
  --inkt:#232630;
  --grijs:#5A5D68;
  --denim:#4A6FA5;
  --denim-diep:#35517C;
  --denim-licht:#E4EBF5;
  --rood:#C8202F;
  --lijn:rgba(35,38,48,.14);
  --maat:min(1200px,92vw)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--grond);color:var(--inkt);
  font-family:'Tekst',system-ui,sans-serif;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
figure{margin:0}
.maat{width:var(--maat);margin-inline:auto}
h1,h2,h3{font-family:'Kop',Georgia,serif;font-weight:800;line-height:1.1;
  letter-spacing:-.015em;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--denim)}

/* het rood-witte naambord van hun daklichtbak */
.bord{display:inline-flex;align-items:center;gap:.45rem;background:#fff;
  border:1.5px solid var(--lijn);border-radius:6px;padding:.25rem .7rem;
  font-family:'Kop';font-weight:800;font-size:13px;color:var(--rood);flex:none}
.bord i{width:14px;height:17px;border-radius:3px;background:#2277CC;display:grid;
  place-items:center;color:#fff;font-size:10px;font-style:normal;font-weight:700}

/* ── kop ─────────────────────────────────────────────────────────── */
.kop{position:sticky;top:0;z-index:40;background:var(--grond);border-bottom:1px solid var(--lijn)}
.kop-rij{display:flex;align-items:center;gap:1.2rem;padding-block:.75rem}
.merk{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.merk-sub{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grijs)}
.nav{display:flex;gap:1.35rem;align-items:center}
.nav a{text-decoration:none;font-size:15px;color:var(--grijs);padding-block:.3rem;
  border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--inkt);border-bottom-color:var(--denim)}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  text-decoration:none;font-weight:700;font-size:15.5px;padding:.66rem 1.35rem;border-radius:12px;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease}
.knop:hover{transform:translateY(-2px)}
.knop-vol{background:var(--denim);color:#fff;box-shadow:0 8px 20px -10px rgba(74,111,165,.85)}
.knop-vol:hover{background:var(--denim-diep);box-shadow:0 12px 26px -10px rgba(74,111,165,.85)}
.knop-leeg{border:2px solid var(--inkt)}
.knop-leeg:hover{box-shadow:0 8px 18px -12px rgba(35,38,48,.55)}
.hamburger{display:none;width:42px;height:38px;border:2px solid var(--lijn);
  border-radius:10px;background:transparent;position:relative;cursor:pointer}
.hamburger i,.hamburger i::before,.hamburger i::after{position:absolute;height:2px;background:var(--inkt)}
.hamburger i{left:9px;right:9px;top:50%;margin-top:-1px}
.hamburger i::before,.hamburger i::after{content:'';left:0;right:0}
.hamburger i::before{top:-6px}
.hamburger i::after{top:6px}
.paneel{display:none;background:var(--grond);padding:.4rem 0 1.4rem;border-bottom:1px solid var(--lijn)}
.paneel.open{display:block}
.paneel a:not(.knop){display:block;text-decoration:none;padding:.9rem 0;font-size:18.5px;
  border-bottom:1px solid var(--lijn)}
.paneel-voet{margin:1.3rem 0 0;font-size:14.5px;color:var(--grijs);line-height:1.6}

/* ── HERO: kop + feiten, daaronder de duo-foto met de toggle-plaat ── */
.hero{position:relative;overflow:hidden;padding-top:3.4rem;
  background:
    linear-gradient(180deg, rgba(228,235,245,.85), rgba(228,235,245,.3) 60%, transparent),
    radial-gradient(42% 58% at 100% 0%, rgba(200,32,47,.05), transparent 70%)}
.zweef{position:absolute;left:-8%;top:-24%;width:42%;height:75%;display:block;
  border-radius:50%;background:radial-gradient(closest-side, rgba(74,111,165,.12), transparent 72%);
  animation:drijf 20s ease-in-out infinite;pointer-events:none}
@keyframes drijf{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(30%) scale(1.1)}}
.hero-kop{max-width:820px;position:relative}
.kicker{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);
  margin:0 0 1.1rem;display:flex;align-items:center;gap:.75rem;font-weight:700}
h1{font-size:clamp(33px,4vw,54px)}
.hero .uitleg{max-width:56ch;margin:1.2rem 0 0;font-size:clamp(16px,1.3vw,18px);color:var(--grijs)}
.hero .doen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem;position:relative}
.hero-feit{display:flex;flex-wrap:wrap;gap:.55rem 2rem;margin-top:1.9rem;font-size:15px;position:relative}
.hero-feit span{display:inline-flex;align-items:baseline;gap:.5rem}
.hero-feit b{font-family:'Kop';font-weight:800;font-size:16.5px}
/* de duo-foto met de toggle-plaat erop */
.duo-vlak{position:relative;margin-top:2.6rem}
.duo-vlak img{width:100%;max-height:440px;object-fit:cover;object-position:50% 62%;
  border-radius:24px 24px 0 0;display:block}
.toggle-plaat{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);
  background:#fff;border:1px solid var(--lijn);border-radius:99px;padding:.5rem;
  display:flex;gap:.3rem;box-shadow:0 20px 44px -18px rgba(35,38,48,.6);
  animation:plaat-op .7s ease both}
@keyframes plaat-op{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.toggle-plaat a{text-decoration:none;font-weight:700;font-size:15px;padding:.55rem 1.3rem;
  border-radius:99px;color:var(--grijs);transition:background .2s ease, color .2s ease}
.toggle-plaat a:hover{color:var(--inkt)}
.toggle-plaat a.aan{background:var(--denim);color:#fff}
.duo-labels{position:absolute;left:1.2rem;top:1.1rem;display:flex;gap:.5rem}
.duo-labels span{background:rgba(35,38,48,.8);color:#fff;font-size:12.5px;font-weight:700;
  padding:.35rem .85rem;border-radius:99px}

section{padding-block:4.2rem}
h2{font-size:clamp(28px,3.2vw,42px)}
.intro{max-width:64ch;color:var(--grijs);font-size:clamp(16px,1.3vw,18px);margin:1.1rem 0 0}
.sectiekop .bord{margin-bottom:1rem}

/* ── de methode: vier technieken ─────────────────────────────────── */
#methode{background:
  linear-gradient(200deg, rgba(200,32,47,.04), transparent 45%),
  radial-gradient(46% 60% at 0% 100%, rgba(228,235,245,.9), transparent 70%)}
.methode-rij{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;margin-top:2.4rem;align-items:start}
.technieken{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.techniek{background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:1.5rem;
  box-shadow:0 12px 32px -26px rgba(35,38,48,.6);position:relative;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease}
.techniek:hover{transform:translateY(-5px);box-shadow:0 24px 44px -26px rgba(74,111,165,.5)}
.techniek::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--denim),var(--denim-licht))}
.techniek .lt{font-family:'Kop';font-weight:800;font-size:24px;color:var(--denim);
  line-height:1;margin-bottom:.4rem}
.techniek h3{font-size:16.5px;margin:0 0 .3rem}
.techniek p{margin:0;font-size:13.5px;color:var(--grijs)}
.methode-tekst p{margin:0 0 1rem;color:var(--grijs)}
.methode-tekst .kaartje{background:#fff;border:1px solid var(--lijn);border-radius:16px;
  padding:1.3rem 1.5rem;box-shadow:0 10px 28px -24px rgba(35,38,48,.55);margin-top:1.2rem}
.methode-tekst .kaartje b{font-family:'Kop';font-weight:800;display:block;margin-bottom:.3rem}
.methode-tekst .kaartje span{font-size:14.5px;color:var(--grijs)}

/* ── tarieven: dubbelkolom met toggle ────────────────────────────── */
#tarieven{background:
  linear-gradient(160deg, var(--denim-licht), rgba(228,235,245,.4) 55%, transparent),
  radial-gradient(40% 56% at 100% 100%, rgba(200,32,47,.04), transparent 70%)}
.schakelaar{display:inline-flex;gap:.3rem;background:#fff;border:1px solid var(--lijn);
  border-radius:99px;padding:.4rem;margin-top:1.6rem;box-shadow:0 10px 26px -18px rgba(35,38,48,.5)}
.schakelaar button{font:inherit;font-weight:700;font-size:15px;padding:.55rem 1.4rem;
  border-radius:99px;border:0;background:transparent;color:var(--grijs);cursor:pointer;
  transition:background .2s ease, color .2s ease}
.schakelaar button.aan{background:var(--denim);color:#fff}
.prijs-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;margin-top:2rem}
.kolom{background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:1.8rem;
  box-shadow:0 14px 36px -26px rgba(35,38,48,.6);transition:opacity .3s ease, transform .25s ease}
.kolom:hover{transform:translateY(-4px)}
.prijs-kolommen.kies-schakel .kolom.automaat,
.prijs-kolommen.kies-automaat .kolom.schakel{opacity:.38}
.kolom .kolom-kop{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:2px solid var(--inkt);padding-bottom:.8rem;margin-bottom:.6rem}
.kolom h3{font-size:21px}
.kolom .auto-naam{font-size:13px;color:var(--grijs);font-weight:700}
.kolom table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.kolom td{padding:.62rem .1rem;border-bottom:1px solid var(--lijn);font-size:14.5px}
.kolom tr:last-child td{border-bottom:0}
.kolom td:last-child{text-align:right;font-family:'Kop';font-weight:800;white-space:nowrap;
  font-size:15.5px}
.kolom small{display:block;font-size:12.5px;color:var(--grijs)}
.prijs-voet{margin-top:1.4rem;font-size:14px;color:var(--grijs)}
.restitutie{margin-top:1.8rem;background:var(--inkt);color:#fff;border-radius:18px;
  padding:1.4rem 1.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;
  position:relative;overflow:hidden}
.restitutie::after{content:'';position:absolute;right:-10%;top:-70%;width:40%;height:240%;
  background:linear-gradient(165deg,rgba(74,111,165,.55),rgba(74,111,165,.15));
  transform:skewX(-12deg);pointer-events:none}
.restitutie b{font-family:'Kop';font-weight:800;font-size:clamp(17px,1.7vw,21px);position:relative}
.restitutie span{font-size:14.5px;color:rgba(255,255,255,.78);position:relative;flex:1;min-width:240px}

/* ── gratis proefles-band ────────────────────────────────────────── */
.proefles-band{background:linear-gradient(115deg,var(--denim-diep),var(--denim));color:#fff;
  padding-block:3.2rem;position:relative;overflow:hidden}
.proefles-band .glim{position:absolute;right:-6%;top:-40%;width:36%;height:180%;display:block;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 48%, transparent 66%);
  animation:glim-strijk 12s ease-in-out infinite alternate;pointer-events:none}
@keyframes glim-strijk{from{transform:translateX(-30%)}to{transform:translateX(25%)}}
.proefles-rij{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;position:relative}
.proefles-band h2{color:#fff;font-size:clamp(24px,2.7vw,34px);max-width:24ch}
.proefles-band p{margin:.5rem 0 0;color:rgba(255,255,255,.8);font-size:15px;max-width:52ch}
.proefles-band .doen{margin-left:auto;display:flex;gap:.7rem;flex-wrap:wrap}
.proefles-band .knop-wit{background:#fff;color:var(--denim-diep)}
.proefles-band .knop-rand{border:1.5px solid rgba(255,255,255,.6);color:#fff}

/* ── reviews ─────────────────────────────────────────────────────── */
#reviews{background:
  linear-gradient(20deg, rgba(228,235,245,.7), transparent 55%),
  radial-gradient(42% 58% at 100% 0%, rgba(200,32,47,.04), transparent 70%)}
.review-kop{display:flex;align-items:center;gap:1.6rem 2.4rem;flex-wrap:wrap}
.schild{background:#fff;border:1px solid var(--lijn);border-radius:14px;
  padding:1.1rem 1.6rem;display:flex;align-items:center;gap:1.1rem;
  box-shadow:0 14px 36px -26px rgba(74,111,165,.6);position:relative;overflow:hidden}
.schild::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--denim),var(--denim-licht))}
.schild b{font-family:'Kop';font-weight:800;font-size:21px;line-height:1.1}
.schild b small{display:block;font-size:11.5px;color:#8A6408;letter-spacing:.16em}
.schild span{font-size:14px;color:var(--grijs);max-width:22ch;line-height:1.45}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem}
.quote{background:#fff;border:1px solid var(--lijn);border-radius:16px;
  padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:.9rem;position:relative;
  box-shadow:0 14px 36px -24px rgba(35,38,48,.55);
  transition:transform .28s ease, box-shadow .28s ease}
.quote:nth-child(2){transform:translateY(1.1rem)}
.quote:hover{transform:translateY(-5px)}
.quote:nth-child(2):hover{transform:translateY(calc(1.1rem - 5px))}
.quote .sterren{color:#8A6408;font-size:14px;letter-spacing:.2em}
.quote p{margin:0;font-size:15px;line-height:1.6}
.quote footer{margin-top:auto;display:flex;align-items:center;gap:.7rem}
.quote .avatar{width:36px;height:36px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--denim-licht);border:1px solid var(--denim);
  font-family:'Kop';font-weight:800;font-size:13px;color:var(--denim-diep)}
.quote .naam{font-size:14.5px;color:var(--grijs);font-weight:700}

/* ── werkgebied + contact ────────────────────────────────────────── */
#contact{background:
  linear-gradient(160deg, rgba(228,235,245,.7), transparent 50%),
  radial-gradient(40% 58% at 100% 100%, rgba(200,32,47,.05), transparent 72%)}
.contact-vlak{display:grid;grid-template-columns:1.05fr .95fr;gap:3.2rem;align-items:start}
.plaatsen{margin:1.4rem 0 0;font-family:'Kop';font-weight:600;font-size:clamp(17px,1.8vw,22px);
  line-height:1.6;letter-spacing:-.01em;color:var(--inkt)}
.plaatsen i{display:inline-grid;width:9px;height:9px;border-radius:50%;background:var(--denim);
  margin:0 .55rem;vertical-align:middle}
.contact-kaarten{display:grid;gap:1.1rem}
.ck{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:1.25rem 1.5rem;
  display:flex;align-items:center;gap:1.2rem;box-shadow:0 14px 32px -22px rgba(35,38,48,.55);
  text-decoration:none;transition:transform .24s ease, box-shadow .24s ease}
a.ck:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(74,111,165,.55)}
.ck .ikoon{width:44px;height:44px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--denim-licht);border:1px solid rgba(74,111,165,.35)}
.ck .ikoon svg{width:21px;height:21px;stroke:var(--denim-diep);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ck b{display:block;font-family:'Kop';font-weight:800;font-size:16.5px;letter-spacing:-.005em}
.ck span{display:block;font-size:14px;color:var(--grijs);overflow-wrap:anywhere}
.ck-hoofd{background:linear-gradient(115deg,var(--denim-diep),var(--denim));border:0}
.ck-hoofd b,.ck-hoofd span{color:#fff}
.ck-hoofd span{color:rgba(255,255,255,.85)}
.ck-hoofd .ikoon{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
.ck-hoofd .ikoon svg{stroke:#fff}
.registratie{margin-top:1.6rem;font-size:14px;color:var(--grijs)}

.voet{border-top:1px solid var(--lijn);padding-block:1.5rem;font-size:14px;color:var(--grijs)}
.voet-rij{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center}
.voet .rechts{margin-left:auto}

.op{opacity:0;transform:translateY(16px);transition:opacity .55s ease-out,transform .55s ease-out}
.op.in{opacity:1;transform:translateY(0)}
html:not(.js) .op{opacity:1;transform:none}

@media (max-width:1020px){
  .quotes{grid-template-columns:1fr 1fr}
  .quotes .quote:last-child{display:none}
}
@media (max-width:760px){
  .nav,.kop .knop{display:none}
  .hamburger{display:block}
  .paneel.open{display:flex;flex-direction:column;min-height:calc(100dvh - 58px)}
  .paneel-voet{margin-top:auto}
  .hero{padding-top:2.6rem}
  .duo-vlak img{max-height:260px;border-radius:18px 18px 0 0}
  .toggle-plaat{bottom:1rem}
  .toggle-plaat a{font-size:13.5px;padding:.5rem 1rem}
  .duo-labels{display:none}
  .methode-rij,.prijs-kolommen,.contact-vlak{grid-template-columns:1fr}
  .methode-rij{gap:1.8rem}
  .technieken{grid-template-columns:1fr 1fr;gap:.8rem}
  .quotes{grid-template-columns:1fr;gap:1.3rem}
  .quotes .quote:last-child{display:flex}
  .quote:nth-child(2){transform:none}
  .quote:nth-child(2):hover{transform:translateY(-5px)}
  .review-kop{flex-direction:column;align-items:flex-start}
  .proefles-band .doen{margin-left:0}
  section{padding-block:3rem}
  .contact-vlak{gap:1.8rem}
  .voet .rechts{margin-left:0}
}