@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(/assets/fonts/manrope-400.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(/assets/fonts/manrope-600.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(/assets/fonts/manrope-800.woff2) format("woff2")}
:root{--g:#0b6e4f;--gd:#075640;--gl:#e6f4ee;--a:#f5b73b;--ink:#10231c;--mut:#4b5f57;--bg:#fbfdfc;--line:#dbe8e2}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:400 17px/1.6 Manrope,system-ui,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--g)}img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:rgba(251,253,252,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:5}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.logo img{width:34px;height:34px;border-radius:9px}
nav a{margin-left:22px;text-decoration:none;color:var(--mut);font-weight:600;font-size:15px}
nav a:hover{color:var(--g)}
.knop{display:inline-block;background:var(--g);color:#fff;padding:13px 24px;border-radius:12px;font-weight:700;text-decoration:none}
.knop:hover{background:var(--gd)}
.knop.licht{background:#fff;color:var(--g);border:1px solid var(--line)}
.hero{padding:72px 0 56px;background:radial-gradient(900px 400px at 85% 0,var(--gl),transparent)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
h1{font-size:clamp(34px,5vw,56px);line-height:1.08;letter-spacing:-.03em;margin:0 0 18px;font-weight:800}
h1 em{font-style:normal;color:var(--g)}
.lead{font-size:20px;color:var(--mut);margin:0 0 28px;max-width:34em}
.acties{display:flex;gap:12px;flex-wrap:wrap}
.klein{font-size:14px;color:var(--mut);margin-top:14px}
.telefoon{width:280px;margin:0 auto;border:10px solid #14221c;border-radius:42px;background:#fff;box-shadow:0 30px 60px -20px rgba(7,86,64,.45);overflow:hidden}
.scherm{padding:18px 14px 22px}
.balk{display:flex;justify-content:space-between;font-weight:800;margin-bottom:10px}
.km{font-size:13px;color:var(--mut);margin-bottom:10px}
.rit{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.rit b{display:block;font-size:14px}
.rit span{color:var(--mut)}
.rit .n{font-weight:800;white-space:nowrap}
.chip{display:inline-block;font-size:11px;padding:1px 8px;border-radius:99px;background:var(--gl);color:var(--g);font-weight:700;margin-top:2px}
.chip.p{background:#fdf1d6;color:#8a5a00}
section{padding:64px 0}
section.band{background:var(--gl)}
h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em;margin:0 0 12px;font-weight:800}
.sub{color:var(--mut);max-width:40em;margin:0 0 36px}
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kaart{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.kaart h3{margin:0 0 6px;font-size:19px}.kaart p{margin:0;color:var(--mut);font-size:16px}
.ico{width:42px;height:42px;border-radius:12px;background:var(--gl);color:var(--g);display:grid;place-items:center;font-weight:800;font-size:20px;margin-bottom:14px}
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.stap{counter-increment:s}.stap:before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--g);color:#fff;font-weight:800;margin-bottom:12px}
.stap h3{margin:0 0 6px}.stap p{margin:0;color:var(--mut)}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lijst{list-style:none;padding:0;margin:0}.lijst li{padding:8px 0 8px 28px;position:relative}
.lijst li:before{content:"";position:absolute;left:0;top:15px;width:14px;height:8px;border-left:3px solid var(--g);border-bottom:3px solid var(--g);transform:rotate(-45deg)}
.soon{white-space:nowrap;font-size:12px;background:#fdf1d6;color:#8a5a00;padding:2px 8px;border-radius:99px;font-weight:700;margin-left:6px}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:10px}
summary{font-weight:700;cursor:pointer}details p{margin:10px 0 0;color:var(--mut)}
.cta{background:var(--g);color:#fff;border-radius:24px;padding:44px;text-align:center}
.cta h2{color:#fff}.cta p{color:#cfeade;margin:0 0 24px}.cta .knop{background:#fff;color:var(--g)}
footer{border-top:1px solid var(--line);padding:32px 0;color:var(--mut);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--mut);margin-left:16px}
.tekst{max-width:760px;padding:48px 20px 72px}.tekst h1{font-size:36px}.tekst h2{font-size:22px;margin-top:32px}
@media(max-width:820px){.hero .wrap,.twee{grid-template-columns:1fr}.kaarten,.stappen{grid-template-columns:1fr}nav a:not(.knop){display:none}.hero{padding:40px 0}}

/* ===== animaties (respecteren prefers-reduced-motion) ===== */
@keyframes op{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes zweef{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-12px) rotate(.4deg)}}
@keyframes inschuif{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(245,183,59,.55)}70%{box-shadow:0 0 0 14px rgba(245,183,59,0)}100%{box-shadow:0 0 0 0 rgba(245,183,59,0)}}
@keyframes teken{to{stroke-dashoffset:0}}
@keyframes rij{from{background-position:0 0}to{background-position:0 -48px}}
.hero h1{animation:op .8s cubic-bezier(.2,.7,.2,1) both}
.hero .lead{animation:op .8s .12s cubic-bezier(.2,.7,.2,1) both}
.hero .acties{animation:op .8s .24s cubic-bezier(.2,.7,.2,1) both}
.hero .klein{animation:op .8s .36s cubic-bezier(.2,.7,.2,1) both}
.telefoon{animation:op .9s .2s cubic-bezier(.2,.7,.2,1) both,zweef 7s 1.2s ease-in-out infinite}
.telefoon .rit{opacity:0;animation:inschuif .6s cubic-bezier(.2,.7,.2,1) forwards}
.telefoon .rit:nth-of-type(1){animation-delay:.9s}.telefoon .rit:nth-of-type(2){animation-delay:1.25s}
.telefoon .rit:nth-of-type(3){animation-delay:1.6s}.telefoon .rit:nth-of-type(4){animation-delay:1.95s}
.telefoon .rit:first-of-type .chip{animation:puls 2.4s 2.4s ease-out 2}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .kaart.klaar,.kaart{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.js .kaart.reveal:not(.klaar){transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.kaart:hover{transform:translateY(-6px);box-shadow:0 18px 36px -18px rgba(7,86,64,.35);border-color:#b9dccd}
.kaart:hover .ico{background:var(--g);color:#fff}
.ico{transition:background .25s ease,color .25s ease,transform .25s ease}.kaart:hover .ico{transform:rotate(-6deg) scale(1.08)}
.knop{transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.knop:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(7,86,64,.55)}
.stap:before{transition:transform .3s ease}.stap:hover:before{transform:scale(1.15)}
header{transition:box-shadow .25s ease}header.schaduw{box-shadow:0 8px 24px -16px rgba(7,86,64,.4)}
.logo img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}.logo:hover img{transform:rotate(14deg) scale(1.08)}
details{transition:border-color .2s ease,box-shadow .2s ease}details[open]{border-color:#b9dccd;box-shadow:0 10px 24px -18px rgba(7,86,64,.4)}
details[open] p{animation:op .35s ease both}
.cta{position:relative;overflow:hidden}
.cta svg{position:absolute;inset:0;width:100%;height:100%;opacity:.16;pointer-events:none}
.cta svg path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:6 14}
.cta svg .route{stroke:#f5b73b;stroke-width:4;stroke-dasharray:900;stroke-dashoffset:900;opacity:.9}
.cta.in svg .route{animation:teken 3.2s .2s ease-out forwards}
.cta>*:not(svg){position:relative}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .telefoon .rit{opacity:1}
}
.twee>.kaart{align-self:start}

/* ===== rit-scène (18 s lus) ===== */
#film{padding-top:24px}
.filmkader{margin:0;background:#fff;border:1px solid var(--line);border-radius:28px;padding:18px;box-shadow:0 30px 60px -40px rgba(7,86,64,.4)}
.filmkader figcaption{font-size:14px;color:var(--mut);text-align:center;margin-top:10px}
.film{display:block;width:100%;height:auto;font-family:Manrope,system-ui,sans-serif}
.film .kroon{fill:#9bd3bb}.film .stam{fill:#7a5a3a}.film .stad rect{fill:#b7dccb}
.film .bijschrift text{font-size:20px;font-weight:700;fill:#fff}
.film .t-merk{font-size:22px;font-weight:800;fill:#10231c}
.film .t-mid{font-size:24px;font-weight:800;fill:#10231c}
.film .t-groot{font-size:44px;font-weight:800;fill:#0b6e4f}
.film .t-klein{font-size:15px;fill:#4b5f57;font-weight:600}
.film .t-chip{font-size:14px;font-weight:700;fill:#0b6e4f}.film .chipbg{fill:#e6f4ee}
.film .stip{fill:rgba(245,183,59,.3)}.film .voortgang{fill:#0b6e4f;transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}
.film .draad{fill:none;stroke:#f5b73b;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 10}
.film .rem,.film .staat,.film .bijschrift,.film .c1,.film .c2,.film .c3,.film .c4,.film .c5{opacity:0}
.film .wiel .draai{transform-box:fill-box;transform-origin:center}
@keyframes f-weg{0%{transform:translateX(0);animation-timing-function:ease-in}12%{transform:translateX(-240px);animation-timing-function:linear}78%{transform:translateX(-2880px);animation-timing-function:ease-out}92%,100%{transform:translateX(-3200px)}}
@keyframes f-bomen{0%{transform:translateX(0);animation-timing-function:ease-in}12%{transform:translateX(-120px);animation-timing-function:linear}78%{transform:translateX(-1440px);animation-timing-function:ease-out}92%,100%{transform:translateX(-1600px)}}
@keyframes f-stad{0%{transform:translateX(0);animation-timing-function:ease-in}12%{transform:translateX(-48px);animation-timing-function:linear}78%{transform:translateX(-576px);animation-timing-function:ease-out}92%,100%{transform:translateX(-640px)}}
@keyframes f-wiel{0%{transform:rotate(0);animation-timing-function:ease-in}12%{transform:rotate(405deg);animation-timing-function:linear}78%{transform:rotate(4860deg);animation-timing-function:ease-out}92%,100%{transform:rotate(5400deg)}}
@keyframes f-start{0%{opacity:0}2%,12%{opacity:1}15%,100%{opacity:0}}
@keyframes f-rij{0%,14%{opacity:0}16%,77%{opacity:1}80%,100%{opacity:0}}
@keyframes f-eind{0%,81%{opacity:0}84%,96%{opacity:1}99%,100%{opacity:0}}
@keyframes f-b1{0%{opacity:0}2%,12%{opacity:1}15%,100%{opacity:0}}
@keyframes f-b2{0%,14%{opacity:0}17%,76%{opacity:1}79%,100%{opacity:0}}
@keyframes f-b3{0%,81%{opacity:0}84%,96%{opacity:1}99%,100%{opacity:0}}
@keyframes f-c1{0%,15%{opacity:0}16%,26%{opacity:1}27%,100%{opacity:0}}
@keyframes f-c2{0%,26%{opacity:0}27%,39%{opacity:1}40%,100%{opacity:0}}
@keyframes f-c3{0%,39%{opacity:0}40%,52%{opacity:1}53%,100%{opacity:0}}
@keyframes f-c4{0%,52%{opacity:0}53%,65%{opacity:1}66%,100%{opacity:0}}
@keyframes f-c5{0%,65%{opacity:0}66%,77%{opacity:1}78%,100%{opacity:0}}
@keyframes f-balk{0%,15%{transform:scaleX(0)}77%,100%{transform:scaleX(1)}}
@keyframes f-rem{0%,77%{opacity:0}79%,91%{opacity:1}93%,100%{opacity:0}}
@keyframes f-veer{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes f-draad{to{stroke-dashoffset:-48}}
@keyframes f-glans{0%,100%{opacity:.55}50%{opacity:1}}
.film .laag-weg{animation:f-weg 18s infinite}
.film .laag-bomen{animation:f-bomen 18s infinite}
.film .laag-stad{animation:f-stad 18s infinite}
.film .wiel .draai{animation:f-wiel 18s infinite}
.film .s-start{animation:f-start 18s infinite}.film .s-rij{animation:f-rij 18s infinite}.film .s-eind{animation:f-eind 18s infinite}
.film .b1{animation:f-b1 18s infinite}.film .b2{animation:f-b2 18s infinite}.film .b3{animation:f-b3 18s infinite}
.film .c1{animation:f-c1 18s infinite}.film .c2{animation:f-c2 18s infinite}.film .c3{animation:f-c3 18s infinite}.film .c4{animation:f-c4 18s infinite}.film .c5{animation:f-c5 18s infinite}
.film .voortgang{animation:f-balk 18s infinite linear}
.film .rem{animation:f-rem 18s infinite}
.film .veer{animation:f-veer .5s ease-in-out infinite alternate}
.film .draad{animation:f-draad 1.2s linear infinite}
.film .houder{animation:f-glans 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.film .s-eind,.film .b3{opacity:1!important}.film .rem{opacity:0}}