/* Rijschool Het Zicht — site-d (07-08). LAT 2 (licht & zakelijk) uit DE-LAT.md.
   Vormentaal uit HUN echte logo: appelgroen #A7CD3A + kobaltblauw #0C73B6 + een slab-serif
   woordmerk — precies het palet dat hun huidige site zélf niet gebruikt (neongroen + geel).
   Bewust ánders dan de twee branchegenoten in het register: Broekpolder = warm/handgemaakt
   met bordje-verhaal, Jongejan = lichte grond met foto-bleed hero + witte kaart. Hier: een
   harde verticale deling — kleurveld met de boodschap naast een staande foto. Dat past ook
   bij het materiaal (telefoonfoto's in portret) in plaats van ertegen te vechten. */

@font-face{font-family:'Zilla';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/zilla-700.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/manrope-600.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:800;font-style:normal;font-display:swap;src:url('fonts/manrope-800.woff2') format('woff2')}

:root{
  --blauw:#0C73B6;      /* kobalt uit het logo — merk */
  --blauw-diep:#095A8E;
  --groen:#A7CD3A;      /* appelgroen uit het logo — actie */
  --groen-diep:#8FB52C;
  --inkt:#141A1F;
  --zacht:#5A6672;
  --grond:#F6F8F5;
  --wit:#fff;
  --lijn:#E1E7DF;
  --kop:'Zilla',Georgia,serif;
  --body:'Manrope',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
html,body{overflow-x:hidden;overflow-x:clip}
body{font:400 16.5px/1.65 var(--body);color:var(--inkt);background:var(--grond)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blauw)}
.maat{max-width:1200px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.4rem)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.overslaan{position:absolute;left:-999px;top:0;background:var(--inkt);color:#fff;padding:.6rem 1rem;z-index:99}
.overslaan:focus{left:0}
html.js .op{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.js .op.in,html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .op{opacity:1;transform:none;transition:none}}

h1,h2,h3{font-family:var(--kop);font-weight:700;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(34px,4.4vw,54px)}
h2{font-size:clamp(26px,3.4vw,40px)}
.kicker{font:600 12px/1.5 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--blauw)}
.leid{font-size:clamp(16.5px,1.8vw,18px);color:var(--zacht);max-width:58ch}

.knop{display:inline-flex;align-items:center;gap:.5rem;font:600 15px/1 var(--body);text-decoration:none;
  padding:1rem 1.5rem;border-radius:6px;border:2px solid var(--inkt);color:var(--inkt);background:transparent;transition:.2s}
.knop:hover{background:rgba(255,255,255,.5)}
.knop-vol{background:var(--groen);border-color:var(--groen);color:var(--inkt)}
.knop-vol:hover{background:var(--groen-diep);border-color:var(--groen-diep)}

/* ── kop ── */
.kop-balk{position:sticky;top:0;z-index:50;background:rgba(246,248,245,.96);border-bottom:1px solid var(--lijn)}
.kop-in{display:flex;align-items:center;gap:1.4rem;padding:.7rem clamp(1.1rem,4vw,2.4rem);max-width:1200px;margin:0 auto}
.merk{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--inkt);white-space:nowrap}
.merk-logo{height:40px;width:auto}
.merk-sub{font:600 10px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--zacht);border-left:1px solid var(--lijn);padding-left:.65rem}
@media (max-width:640px){.merk-sub{display:none}}
.nav{display:flex;gap:1.4rem;margin-left:auto}
.nav a{font:600 14.5px/1 var(--body);text-decoration:none;color:var(--inkt);padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--groen);color:var(--blauw)}
.kop-doen{padding:.8rem 1.15rem;font-size:14px}
.hamburger{display:none;margin-left:auto;width:44px;height:44px;border:0;border-radius:8px;background:var(--blauw);cursor:pointer;position:relative}
.hamburger i{position:absolute;left:12px;right:12px;top:21px;height:2px;background:#fff}
.hamburger i::before,.hamburger i::after{content:'';position:absolute;left:0;right:0;height:2px;background:#fff}
.hamburger i::before{top:-6px}.hamburger i::after{top:6px}

/* ── hero: gelaagd kleurveld met de boodschap + wit aanmeldformulier ernaast ──
   Sean 07-08: het platte blauwe vlak oogde "goedkoop, in 5 minuten gemaakt", en een
   rijschool hoort bovenaan een inschrijfformulier te hebben (dat heeft hun eigen site ook).
   Daarom: diepteverloop + het weg-motief uit hún logo als grote zachte laag + een echte
   beoordelings-badge, en het formulier neemt de plaats van de foto in. */
.hero{display:grid;grid-template-columns:1fr .98fr;gap:clamp(1.2rem,2.2vw,2.2rem);align-items:center;
  padding:clamp(2rem,4.5vw,3.6rem) clamp(1.2rem,4vw,3rem) clamp(2.4rem,5vw,4rem);position:relative;overflow:hidden;
  background:linear-gradient(155deg,#1183CC 0%,var(--blauw) 42%,var(--blauw-diep) 100%);color:#fff}
.hero::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.09) 1.4px,transparent 1.5px);background-size:24px 24px;pointer-events:none}
.hero::after{content:'';position:absolute;left:-8%;top:-30%;width:52%;height:160%;
  background:radial-gradient(closest-side,rgba(167,205,58,.20),transparent 70%);pointer-events:none}
.hero-weg .streep{animation:rijden 5.5s linear infinite}
@keyframes rijden{to{stroke-dashoffset:-96}}
@media (prefers-reduced-motion:reduce){.hero-weg .streep{animation:none}}
.paneel{position:fixed;inset:0;background:var(--blauw-diep);color:#fff;z-index:100;padding:1.2rem 1.6rem;display:none;flex-direction:column}
.paneel.open{display:flex}
.paneel-sluit{margin-left:auto;background:none;border:1.5px solid rgba(255,255,255,.45);border-radius:8px;color:#fff;font-size:26px;width:46px;height:46px;cursor:pointer}
.paneel nav{display:flex;flex-direction:column;gap:.2rem;margin-top:1.5rem}
.paneel nav a{color:#fff;text-decoration:none;font-family:var(--kop);font-weight:700;font-size:26px;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.16)}
.paneel-voet{margin-top:auto;display:flex;flex-direction:column;gap:.7rem;padding-bottom:1.2rem}
.paneel-voet .knop{justify-content:center;border-color:#fff;color:#fff}
.paneel-voet .knop-vol{background:var(--groen);border-color:var(--groen);color:var(--inkt)}
.hero-weg{position:absolute;right:34%;top:0;bottom:0;height:100%;width:min(560px,46%);pointer-events:none}
.hero-tekst{position:relative;z-index:2;max-width:620px;margin-left:auto;padding-right:clamp(0rem,1.5vw,1.5rem)}
.hero .kicker{color:#C6E77A}
.hero h1{color:#fff;margin-top:.7rem;text-shadow:0 2px 20px rgba(0,0,0,.18)}
.hero h1 em{font-style:normal;color:var(--groen)}
.hero-lead{color:#DCEAF5;font-size:clamp(16.5px,1.85vw,18.5px);margin-top:1.1rem;max-width:47ch}
.beoordeling{display:inline-flex;align-items:center;gap:.8rem;margin-top:1.6rem;padding:.7rem 1.1rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:999px;backdrop-filter:blur(2px)}
.beoordeling .sterren{color:var(--groen);letter-spacing:.12em;font-size:15px}
.beoordeling b{font-family:var(--kop);font-size:18px}
.beoordeling small{display:block;font-size:11.5px;color:#BCD6EA;letter-spacing:.04em}
.hero-feit{list-style:none;display:grid;gap:.55rem;margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.22);font-size:14px;color:#D5E6F2}
.hero-feit li{position:relative;padding-left:1.5rem}
.hero-feit li::before{content:'';position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:2px;background:var(--groen);transform:rotate(45deg)}
.hero-feit b{color:#fff}

/* het aanmeldformulier — de plek waar vroeger de foto stond */
.hero-kaart{position:relative;z-index:2;background:var(--wit);color:var(--inkt);border-radius:14px;
  padding:clamp(1.3rem,2.4vw,1.9rem);box-shadow:0 34px 70px -30px rgba(4,40,66,.75);max-width:520px;width:100%;justify-self:end}
.kaart-kop{border-bottom:1px solid var(--lijn);padding-bottom:.9rem;margin-bottom:1.1rem}
.kaart-titel{font-family:var(--kop);font-weight:700;font-size:clamp(20px,2.3vw,24px);line-height:1.15}
.kaart-sub{font-size:14px;color:var(--zacht);margin-top:.35rem}
.aanmeld{display:grid;gap:.85rem}
.aanmeld label{display:grid;gap:.32rem;font:600 12.5px/1.3 var(--body);letter-spacing:.02em;color:var(--inkt)}
.aanmeld input,.aanmeld select{font:400 15px/1.3 var(--body);color:var(--inkt);background:#FBFCFA;
  border:1.5px solid var(--lijn);border-radius:8px;padding:.72rem .8rem;width:100%}
.aanmeld input:focus,.aanmeld select:focus{outline:2px solid var(--blauw);outline-offset:1px;border-color:var(--blauw)}
.twee-vak{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.aanmeld button{margin-top:.3rem;justify-content:center;font-size:15.5px;cursor:pointer}
.kaart-voet{font-size:12.5px;color:var(--zacht);text-align:center}
.kaart-melding{font-size:13px;background:#F2F8E6;border:1px solid #D6E8AC;border-radius:8px;padding:.7rem .8rem;color:#3D5216}
/* ── sectie 1: de belofte in drie punten ── */
.sectie{padding:clamp(3rem,6vw,5rem) 0}
.vlak{background:var(--wit)}
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem);margin-top:2.2rem}
.punt{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:1.5rem 1.5rem 1.6rem;
  box-shadow:0 16px 34px -26px rgba(20,26,31,.5);position:relative;overflow:hidden}
.punt::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--groen)}
.punt:nth-child(2)::before{background:var(--blauw)}
.punt h3{font-size:clamp(18px,2vw,21px);margin-bottom:.5rem}
.punt p{font-size:15px;color:var(--zacht)}
.punt .cijf{font-family:var(--kop);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--blauw);display:block;margin-bottom:.7rem}

@media (max-width:960px){
  .nav,.kop-doen{display:none}
  .hamburger{display:block}
  .hero{grid-template-columns:1fr;gap:1.6rem;padding-bottom:2.2rem}
  .hero-weg{right:-10%;width:70%;opacity:.8}
  .hero-tekst{margin-left:0;padding-right:0}
  .hero-kaart{justify-self:stretch;max-width:none}
  .drie{grid-template-columns:1fr}
}

/* ── geslaagden-baan (schuift vanzelf én veegbaar; JS stuurt scrollLeft) ── */
.geslaagd-blok{background:linear-gradient(180deg,var(--grond),#EDF2E9);padding-top:clamp(2rem,4vw,3rem)}
.baan-onder{margin-top:1.4rem;max-width:640px}
.erv-kop .erv-cijfer{order:-1}
.baan{margin-top:1.8rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.baan::-webkit-scrollbar{display:none}
.baan-rij{display:flex;gap:14px;width:max-content;padding:.4rem clamp(1.1rem,4vw,2.4rem) .9rem}
.held{position:relative;flex:none;width:clamp(160px,22vw,230px);border-radius:12px;overflow:hidden;background:var(--wit);
  box-shadow:0 16px 34px -22px rgba(20,26,31,.55);transition:transform .25s ease}
.held:hover{transform:translateY(-5px)}
.held img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.held figcaption{position:absolute;left:8px;bottom:8px;background:var(--groen);color:var(--inkt);border-radius:6px;
  padding:.3rem .55rem;font:800 10.5px/1.3 var(--body);letter-spacing:.09em;text-transform:uppercase}

/* ── tarieven ── */
.tarief-twee{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.2rem,2.4vw,2rem);align-items:start;margin-top:2.2rem}
.kaartje{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:1.4rem 1.5rem 1.5rem;box-shadow:0 18px 40px -30px rgba(20,26,31,.5)}
.kaartje-kop{font-family:var(--kop);font-weight:700;font-size:19px;margin-bottom:.9rem;display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.kaartje-kop span{font:600 11.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--zacht)}
.tarief{width:100%;border-collapse:collapse;font-size:14.5px}
.tarief th{font-weight:600;text-align:left;padding:.6rem 0;border-bottom:1px solid var(--lijn);vertical-align:top}
.tarief th small{display:block;font:400 12px/1.5 var(--body);color:var(--zacht)}
.tarief td{text-align:right;padding:.6rem 0 .6rem 1rem;border-bottom:1px solid var(--lijn);white-space:nowrap;vertical-align:top;font-weight:700}
.tarief td span{display:block;font-weight:600;font-size:13px;color:var(--zacht)}
.tarief tr:last-child th,.tarief tr:last-child td{border-bottom:0}
.tarief tr.uit th,.tarief tr.uit td{background:#F2F8E6;border-bottom-color:#E3EFCF}
.tarief tr.uit th{padding-left:.6rem;border-radius:6px 0 0 6px}
.tarief tr.uit td{padding-right:.6rem;border-radius:0 6px 6px 0}
.klein{font-size:12.5px;color:var(--zacht);margin-top:.8rem}

/* ── ervaringen ── */
.erv-kop{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:end}
.erv-cijfer{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:1.2rem 1.4rem;box-shadow:0 18px 40px -30px rgba(20,26,31,.5);display:grid;gap:.2rem;justify-items:start}
.erv-cijfer strong{font-family:var(--kop);font-size:44px;line-height:1}
.erv-cijfer .sterren{color:var(--groen);letter-spacing:.12em}
.erv-cijfer span{font-size:13.5px;color:var(--zacht)}
.stemmen{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:2rem}
.stem{background:var(--wit);border:1px solid var(--lijn);border-left:4px solid var(--blauw);border-radius:10px;padding:1.2rem 1.3rem;box-shadow:0 14px 32px -26px rgba(20,26,31,.5)}
.stem:nth-child(2n){border-left-color:var(--groen)}
.stem q{quotes:'\201E' '\201D';font-size:15px}
.stem footer{margin-top:.7rem;font:600 13px/1 var(--body);color:var(--zacht)}
.stem footer b{color:var(--inkt)}

/* ── contact ── */
.twee-kol{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
.doen{display:grid;gap:.8rem;margin-top:1.6rem}
.doen-kaart{display:flex;gap:.9rem;align-items:center;text-decoration:none;color:var(--inkt);background:var(--wit);
  border:1px solid var(--lijn);border-radius:10px;padding:1rem 1.1rem;box-shadow:0 14px 30px -26px rgba(20,26,31,.5);transition:transform .2s}
.doen-kaart:hover{transform:translateY(-2px)}
.doen-kaart svg{width:24px;height:24px;flex:none;color:var(--blauw)}
.doen-kaart>span{display:flex;flex-direction:column;gap:.1rem}
.doen-kaart b{font-family:var(--kop);font-weight:700;font-size:16px}
.doen-kaart span span{font-size:12.5px;color:var(--zacht)}
.praktisch .feiten{display:grid;gap:.7rem}
.praktisch .feiten div{display:grid;grid-template-columns:106px 1fr;gap:.6rem;font-size:14px;padding-bottom:.7rem;border-bottom:1px solid var(--lijn)}
.praktisch .feiten div:last-child{border-bottom:0;padding-bottom:0}
.praktisch dt{font-weight:600;color:var(--zacht)}

/* ── voet ── */
.voet{background:#0E1B24;color:#B9C6CF;padding:3rem 0 2.4rem;border-top:5px solid var(--groen)}
.voet-in{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:2rem}
.voet-logo{height:52px;width:auto;background:#fff;border-radius:8px;padding:.45rem .6rem;margin-bottom:.9rem}
.voet b{color:#fff;font-family:var(--kop);font-weight:700;display:block;margin-bottom:.5rem}
.voet small{display:block;font-size:13px;line-height:1.8}
.voet a{color:#DCE8F0}
.voet nav{display:flex;flex-direction:column;gap:.35rem}
.voet nav a{text-decoration:none;font:600 14px/1.6 var(--body)}
.voet nav a:hover{color:var(--groen)}

@media (max-width:960px){
  .tarief-twee,.erv-kop,.stemmen,.twee-kol,.voet-in{grid-template-columns:1fr}
  .erv-cijfer{justify-self:start}
  .held{width:clamp(150px,44vw,200px)}
}
.tar-kop{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,2.6vw,2.2rem);align-items:center}
.tar-vanaf{background:var(--blauw);color:#fff;border-radius:12px;padding:1.1rem 1.4rem;text-align:center;box-shadow:0 18px 40px -26px rgba(12,115,182,.9)}
.tar-vanaf span{display:block;font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#BEE36A}
.tar-vanaf b{display:block;font-family:var(--kop);font-weight:700;font-size:clamp(30px,3.4vw,40px);line-height:1.1;margin:.25rem 0}
.tar-vanaf small{display:block;font-size:11.5px;color:#CFE2F0}
@media (max-width:700px){.tar-kop{grid-template-columns:1fr}.tar-vanaf{justify-self:start}}