/* thuis2.css — homepage lammers2 (07-10). Ligt alleen over de gedeelde kop, voet en de V4-hero (thuis.css).
   Gronden: hero nacht · strook wit · showroom nacht · route zand · motor oceaan · Jordi papier · rekenhulp nacht ·
   prijzen wit · reviews nacht · volgen papier · vragen zeeglas · afsluiter zand. Animaties starten één keer (.in) en eindigen af. */
:root{--u-nacht:#06141F;--u-nacht-2:#0B2232;--u-oceaan:#0A6A95;--u-oceaan-2:#064F74;--u-gloed:#36C2F0;--u-zon:#F2B63C;--u-zon-l:#FFD27A;--u-papier:#FBF8F3;--u-zand:#F4EEE3;--u-zeeglas:#DCEBEF;--u-inkt:#11252D;--u-grijs:#55666C}

/* ── gedeelde bouwstenen ── */
.u2-kop{max-width:860px;margin:0 auto clamp(30px,3.4vw,48px)}
.u2-kop-midden{text-align:center}
.u2-kop h2,.u2-motor h2,.u2-over h2,.u2-rv-kop h2,.u2-slot h2,.u2-reken .kopblok h2{font-size:clamp(36px,3.9vw,56px);line-height:1.02;letter-spacing:-.035em}
.u2-kop h2 em,.u2-over h2 em,.u2-slot h2 em{font-style:normal;color:var(--petrol)}
.u2-aanbod .u2-kop h2 em,.u2-motor h2 em,.u2-rv-kop h2 em,.u2-reken h2 em{color:var(--u-zon)}
.u2-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font:800 .8rem/1 var(--l-tekst);letter-spacing:.18em;text-transform:uppercase;color:var(--petrol)}
.u2-kicker::before,.u2-kop-midden .u2-kicker::after{content:"";width:26px;height:3px;border-radius:2px;background:currentColor;transform:skewX(var(--schuin))}
.u2-kicker-licht{color:var(--u-zon)}
.u2-lead{margin-top:16px;font-size:1.12rem;line-height:1.6;color:var(--u-grijs);text-wrap:pretty}
.u2-kop-midden .u2-lead{max-width:36em;margin-inline:auto}
.u2-knop{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.4em;border:0;border-radius:10px;font:700 1rem/1.15 var(--l-tekst);text-decoration:none;cursor:pointer;transition:transform .18s ease,background .2s,box-shadow .2s,color .2s}
.u2-knop svg{width:18px;height:18px;flex:none}
.u2-knop:hover{transform:translateY(-2px)}
.u2-knop-zon{background:var(--u-zon);color:var(--u-inkt);box-shadow:0 16px 30px -16px rgba(242,182,60,.95),inset 0 -3px 0 rgba(0,0,0,.14)}
.u2-knop-zon:hover{background:var(--u-zon-l)}
.u2-knop-lijn{background:#fff;color:var(--u-inkt);box-shadow:inset 0 0 0 2px rgba(17,37,45,.85)}
.u2-knop-lijn:hover{background:var(--u-inkt);color:#fff}
.u2-knop-glas{color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.u2-knop-glas:hover{background:rgba(255,255,255,.18)}
.u2-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.u2-aanbod,.u2-route,.u2-motor,.u2-over,.u2-reken,.u2-prijs,.u2-reviews,.u2-volg,.u2-vragen,.u2-slot{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(70px,7.4vw,108px)}
/* het L uit het logo als groot schuin watermerk aan de rand */
.u2-l{position:absolute;z-index:-1;width:clamp(220px,24vw,340px);height:auto;pointer-events:none}
.u2-l path{fill:none;stroke-width:3}

/* ── geslaagdenstrook: zonder kop of tekst ── */
.u2-strook{padding:22px 0;background:linear-gradient(180deg,#fff,#F3F6F8)}
.u2-baan{gap:12px;padding-inline:12px}
.u2-baan .rij-foto{height:280px;border-radius:14px;box-shadow:0 20px 36px -26px rgba(6,20,31,.75)}

/* ── showroom: drie studiofoto's onder een spotlicht ── */
.u2-aanbod{background:radial-gradient(60% 55% at 50% 0%,rgba(54,194,240,.22),rgba(54,194,240,0) 70%),linear-gradient(180deg,#0A1C29,#05111A 70%,#081925);color:#fff}
.u2-aanbod::before{content:"";position:absolute;inset:auto 0 0;height:38%;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(120,160,190,.08));border-top:1px solid rgba(255,255,255,.06)}
.u2-aanbod .u2-lead{color:rgba(255,255,255,.76)}
.u2-l-aanbod{right:-70px;top:40px;transform:skewX(var(--schuin))}
.u2-l-aanbod path{stroke:rgba(242,182,60,.22)}
.u2-kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);perspective:1200px}
.u2-kaart{--rx:0deg;--ry:0deg;position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;color:#fff;text-decoration:none;background:#11222E;box-shadow:0 50px 90px -46px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08);transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .25s ease,box-shadow .35s ease}
.u2-kaart::before{content:"";position:absolute;left:10%;right:10%;top:-30px;height:160px;z-index:1;background:radial-gradient(closest-side,rgba(54,194,240,.32),rgba(54,194,240,0));pointer-events:none;mix-blend-mode:screen;opacity:.8}
.u2-kaart:hover{box-shadow:0 60px 100px -46px rgba(0,0,0,1),0 0 0 1.5px rgba(242,182,60,.65)}
.u2-kaart-foto{position:relative;margin:0;aspect-ratio:1122/1180;overflow:hidden}
.u2-kaart-foto img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.u2-kaart:hover .u2-kaart-foto img{transform:scale(1.045)}
.u2-kaart-foto::after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(180deg,rgba(17,34,46,0),#11222E)}
.u2-nieuw{position:absolute;top:18px;right:18px;z-index:2;padding:7px 14px;font:800 .76rem/1 var(--l-tekst);letter-spacing:.12em;text-transform:uppercase;color:var(--u-inkt);isolation:isolate}
.u2-nieuw::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--u-zon);border-radius:4px;transform:skewX(var(--schuin))}
/* rijbewijspasje: blauwe EU-strook met NL, de categorie en het pictogram */
.u2-pas{position:absolute;left:18px;top:18px;z-index:2;display:flex;align-items:center;height:42px;border-radius:8px;overflow:hidden;background:#F5F7F2;color:#18324A;box-shadow:0 12px 24px -12px rgba(0,0,0,.8)}
.u2-pas-nl{display:grid;place-items:center;align-self:stretch;width:22px;background:#1E4FB5;color:#fff;font:800 .62rem/1 var(--l-tekst)}
.u2-pas-cat{padding:0 10px;font:900 1.15rem/1 var(--l-kop)}
.u2-pas-picto{display:grid;place-items:center;padding:0 10px 0 0}
.u2-pas-picto svg{width:42px;height:26px}
.u2-kaart-tekst{position:relative;z-index:1;display:grid;gap:6px;margin-top:-56px;padding:0 24px}
.u2-kaart-tekst b{font:900 clamp(30px,2.6vw,38px)/1 var(--l-kop);letter-spacing:-.03em}
.u2-kaart-tekst > span{font-size:.95rem;line-height:1.45;color:rgba(255,255,255,.76)}
.u2-kaart-voet{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:18px 24px 22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.u2-tarief{display:grid;font:900 1.8rem/1 var(--l-kop);letter-spacing:-.02em}
.u2-tarief small,.u2-tarief i{font:600 .76rem/1.2 var(--l-tekst);font-style:normal;color:rgba(255,255,255,.66);letter-spacing:0}
.u2-tarief small{margin-bottom:6px}.u2-tarief i{margin-top:6px}
.u2-rond{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--u-zon);color:var(--u-inkt);flex:none;transition:transform .3s ease}
.u2-kaart:hover .u2-rond{transform:rotate(-35deg)}
.js .u2-kaarten.reveal{opacity:1;transform:none}
.js .u2-kaarten .u2-kaart{opacity:0;translate:0 40px;transition:opacity .7s ease calc(var(--i) * .14s),translate .8s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .14s),transform .25s ease,box-shadow .35s ease}
.js .u2-kaarten.in .u2-kaart{opacity:1;translate:0 0}

/* ── de weg naar je rijbewijs ── */
.u2-route{background:radial-gradient(50% 60% at 0% 0%,rgba(10,106,149,.12),rgba(10,106,149,0) 70%),radial-gradient(40% 50% at 100% 100%,rgba(242,182,60,.14),rgba(242,182,60,0) 70%),var(--u-zand)}
.u2-weg{position:relative;margin-top:6px}
.u2-weg-svg{display:block;width:100%;height:auto;overflow:visible}
.u2-weg-berm{fill:none;stroke:rgba(17,37,45,.12);stroke-width:64;stroke-linecap:round}
.u2-weg-asfalt{fill:none;stroke:#26323B;stroke-width:52;stroke-linecap:round}
.u2-weg-streep{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:16 14;stroke-linecap:round;opacity:.9}
.u2-weg-pad{fill:none;stroke:none}
.u2-haltes{list-style:none;margin:0;padding:0}
.u2-haltes li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.u2-haltes button{position:relative;display:grid;justify-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;font:inherit}
.u2-halte-nr{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--petrol);font:900 1.1rem/1 var(--l-kop);color:var(--petrol);box-shadow:0 10px 20px -10px rgba(6,20,31,.7);transition:background .25s,color .25s,transform .25s}
.u2-halte-naam{position:absolute;top:54px;white-space:nowrap;padding:5px 12px;border-radius:999px;background:#fff;font-weight:800;font-size:.86rem;color:var(--u-inkt);box-shadow:0 8px 18px -12px rgba(6,20,31,.6)}
.u2-haltes li:nth-child(even) .u2-halte-naam{top:auto;bottom:54px}
.u2-haltes button:hover .u2-halte-nr{transform:scale(1.08)}
.u2-haltes button[aria-selected="true"] .u2-halte-nr{background:var(--u-zon);border-color:var(--u-zon);color:var(--u-inkt);box-shadow:0 0 0 7px rgba(242,182,60,.3)}
.u2-haltes button[aria-selected="true"] .u2-halte-naam{background:var(--u-inkt);color:#fff}
.u2-paneel{margin-top:clamp(40px,4vw,56px)}
.u2-stap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,3.4vw,48px);align-items:center;max-width:980px;margin-inline:auto;padding:clamp(18px,2vw,26px);border-radius:22px;background:#fff;box-shadow:0 40px 80px -50px rgba(6,20,31,.6);animation:u2-in .5s ease both}
@keyframes u2-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.u2-stap-foto{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3}
.u2-stap-foto img{width:100%;height:100%;object-fit:cover}
.u2-stap-tekst{display:grid;gap:10px;padding-right:clamp(0px,1.4vw,16px)}
.u2-stap-nr{font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol)}
.u2-stap h3{font-size:clamp(26px,2.4vw,34px)}
.u2-stap-tekst > p:not([class]){color:var(--u-grijs)}
.u2-stap-feit{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:7px 14px;border-radius:999px;background:rgba(28,93,116,.1);font-weight:700;font-size:.9rem;color:var(--petrol)}
.u2-stap-feit svg{width:16px;height:16px}
.u2-stap-knoppen{margin-top:6px}
.u2-volgende{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:0;border-radius:10px;background:var(--u-inkt);color:#fff;font:700 .95rem/1 var(--l-tekst);cursor:pointer}
.u2-volgende svg{width:16px;height:16px}

/* ── motor: oceaan, foto's en het oefenterrein ── */
.u2-motor{background:radial-gradient(50% 70% at 100% 0%,rgba(54,194,240,.35),rgba(54,194,240,0) 70%),linear-gradient(135deg,var(--u-oceaan-2),var(--u-oceaan) 60%,#0B7BAA);color:#fff}
.u2-l-motor{left:-90px;bottom:-60px;transform:skewX(var(--schuin))}
.u2-l-motor path{stroke:rgba(255,255,255,.16)}
.u2-motor .u2-lead{color:rgba(255,255,255,.84)}
.u2-motor-boven{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.u2-motor-plus{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px}
.u2-motor-plus li{display:grid;gap:8px;align-content:start;padding:14px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-size:.84rem;color:rgba(255,255,255,.8);line-height:1.35}
.u2-motor-plus svg{width:26px;height:26px;color:var(--u-zon)}
.u2-motor-plus b{display:block;color:#fff;font-size:.96rem;margin-bottom:2px}
.u2-motor-fotos{position:relative;padding:0 0 54px 70px}
.u2-mf-groot{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:1/1.05;box-shadow:0 50px 80px -40px rgba(0,0,0,.8)}
.u2-mf-groot img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.u2-mf-klein{position:absolute;left:0;bottom:0;width:46%;margin:0;border-radius:16px;overflow:hidden;border:6px solid #fff;box-shadow:0 30px 50px -24px rgba(0,0,0,.8);rotate:-4deg}
.u2-mf-klein img{width:100%;aspect-ratio:4/3;object-fit:cover}
.u2-terrein{margin-top:clamp(40px,4vw,56px);padding:clamp(16px,2vw,24px);border-radius:24px;background:rgba(4,20,31,.35);border:1px solid rgba(255,255,255,.12)}
.u2-terrein svg{display:block;width:100%;height:auto}
.u2-t-vlak{fill:#2A3640}
.u2-t-lijn{fill:none;stroke:rgba(255,255,255,.75);stroke-width:4}
.u2-t-vak{fill:none;stroke:var(--u-zon);stroke-width:4;stroke-dasharray:14 10}
.u2-t-tekst{font:900 26px var(--l-kop);fill:rgba(255,255,255,.85);text-anchor:middle;letter-spacing:.06em}
.u2-t-spoor{fill:none;stroke:var(--u-gloed);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 12;opacity:.7}
.u2-t-pad{fill:none;stroke:none}
.u2-pion path:first-child{fill:#FF7A1A}
.u2-pion-band{fill:#fff}
.u2-pion rect{fill:#E2601A}
.u2-terrein-stappen{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0 0;padding:0}
.u2-terrein-stappen li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.08);font-size:.84rem;color:rgba(255,255,255,.75)}
.u2-terrein-stappen span{grid-row:1 / 3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--u-oceaan-2);font:900 1rem/1 var(--l-kop)}
.u2-terrein-stappen li:last-child span{background:var(--u-zon);color:var(--u-inkt)}
.u2-terrein-stappen b{color:#fff;font-size:.98rem}

/* ── Jordi ── */
.u2-over{background:radial-gradient(45% 60% at 0% 50%,rgba(10,106,149,.12),rgba(10,106,149,0) 70%),radial-gradient(40% 50% at 100% 0%,rgba(242,182,60,.12),rgba(242,182,60,0) 70%),var(--u-papier)}
.u2-over-raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,90px);align-items:center}
.u2-over-foto{position:relative;margin:0 0 30px 24px}
.u2-over-foto::before{content:"";position:absolute;inset:-20px 26px 26px -24px;z-index:-1;border-radius:18px;background:linear-gradient(135deg,var(--petrol),#0A6A95);transform:skewX(var(--schuin))}
.u2-over-foto > img{width:100%;aspect-ratio:1/1.06;object-fit:cover;object-position:62% 40%;border-radius:18px;box-shadow:0 40px 70px -40px rgba(6,20,31,.8)}
.u2-bord{position:absolute;right:-18px;bottom:-26px;width:min(64%,250px);filter:drop-shadow(0 16px 24px rgba(6,20,31,.45));animation:u2-wieg 5s ease-in-out infinite}
@keyframes u2-wieg{50%{transform:translateY(-6px) rotate(-1.5deg)}}
.u2-bord svg{width:100%;height:auto;font-family:Georgia,"Times New Roman",serif}
.u2-punten{list-style:none;display:grid;gap:10px;margin-top:22px}
.u2-punten li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid rgba(17,37,45,.07);font-size:.94rem;color:var(--u-grijs);transition:transform .25s,border-color .25s}
.u2-punten li:hover{transform:translateX(5px);border-color:rgba(28,93,116,.35)}
.u2-punten svg{flex:none;width:44px;height:44px;padding:10px;border-radius:12px;background:var(--petrol);color:#fff}
.u2-punten b{display:block;color:var(--u-inkt);font-size:1rem}
.u2-citaat{margin:22px 0 0;padding:18px 20px;border-radius:16px;background:var(--u-nacht);color:#fff}
.u2-citaat p{font-size:1.02rem;line-height:1.55}
.u2-citaat cite{display:flex;align-items:center;gap:10px;margin-top:10px;font-style:normal;font-size:.86rem;color:rgba(255,255,255,.7)}
.u2-citaat .sterren svg{width:13px;height:13px}

/* ── rekenhulp met snelheidsmeter ── */
.u2-reken{background:radial-gradient(50% 70% at 50% 0%,rgba(10,106,149,.55),rgba(10,106,149,0) 70%),var(--u-nacht) !important;color:#fff}
.u2-reken::before{background:radial-gradient(40% 60% at 0% 100%,rgba(242,182,60,.12),rgba(242,182,60,0) 70%) !important}
.u2-reken .kopblok{margin-bottom:clamp(30px,3.4vw,48px)}
.u2-reken .kopblok .lead,.u2-reken .br-onder{color:rgba(255,255,255,.76)}
.u2-reken .br-blok{position:relative;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr) !important;align-items:stretch;color:var(--u-inkt);border-radius:22px;overflow:hidden;box-shadow:0 60px 100px -50px rgba(0,0,0,.95)}
.u2-meter-vak{display:grid;place-items:center;padding:24px 10px;background:linear-gradient(180deg,#0E2636,#081A26)}
.u2-meter{width:100%;max-width:300px;height:auto}
.u2-m-baan{fill:none;stroke:rgba(255,255,255,.1);stroke-width:14;stroke-linecap:round}
.u2-m-boog{fill:none;stroke:url(#u2-m-verloop);stroke:var(--u-zon);stroke-width:14;stroke-linecap:round;stroke-dasharray:var(--boog,50) 100;transition:stroke-dasharray .7s cubic-bezier(.3,1.3,.5,1)}
.u2-m-klein{stroke:rgba(255,255,255,.35);stroke-width:2}
.u2-m-groot{stroke:#fff;stroke-width:3}
.u2-meter text{fill:rgba(255,255,255,.7);font:700 14px var(--l-tekst);text-anchor:middle}
.u2-m-naald{transform-origin:150px 150px;transform:rotate(var(--hoek));transition:transform .8s cubic-bezier(.3,1.4,.5,1)}
.u2-m-naald path{fill:#FF5A3C}
.u2-m-naald circle{fill:#fff;stroke:#FF5A3C;stroke-width:4}
.u2-meter .u2-m-getal{fill:#fff;font:900 40px var(--l-kop)}
.u2-meter .u2-m-eenheid{fill:rgba(255,255,255,.7);font:700 13px var(--l-tekst)}
.js .u2-reken .br-blok:not(.in) .u2-m-naald{transform:rotate(-120deg)}

/* ── prijzen ── */
.u2-prijs{background:radial-gradient(40% 50% at 100% 0%,rgba(242,182,60,.12),rgba(242,182,60,0) 70%),radial-gradient(45% 60% at 0% 100%,rgba(10,106,149,.1),rgba(10,106,149,0) 70%),#fff}
.u2-tabs{display:inline-flex;gap:4px;margin-top:22px;padding:5px;border-radius:12px;background:var(--u-zand);border:0}
.u2-tabs .pr-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border:0;border-radius:9px;background:transparent;font-weight:800;color:var(--u-grijs);cursor:pointer}
.u2-tabs .pr-tab::after{display:none}
.u2-tabs .pr-tab svg{width:18px;height:18px}
.u2-tabs .pr-tab[aria-selected="true"]{background:var(--u-nacht);color:#fff}
.u2-pk-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch;padding-top:12px}
.u2-pk-drie{grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px;margin-inline:auto}
.u2-pk{position:relative;display:flex;flex-direction:column;padding:28px 22px 22px;border-radius:18px;background:#fff;border:1px solid rgba(17,37,45,.1);box-shadow:0 26px 50px -42px rgba(6,20,31,.6);transition:transform .3s,box-shadow .3s}
.u2-pk:hover{transform:translateY(-6px);box-shadow:0 36px 60px -40px rgba(6,20,31,.7)}
.u2-pk-lint{position:absolute;top:-13px;left:20px;padding:6px 12px;font:800 .72rem/1 var(--l-tekst);letter-spacing:.1em;text-transform:uppercase;color:var(--u-inkt);isolation:isolate}
.u2-pk-lint::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--u-zeeglas);border-radius:4px;transform:skewX(var(--schuin))}
.u2-pk h3{font-size:1.4rem;letter-spacing:-.02em}
.u2-pk-inhoud{margin-top:6px;font-size:.9rem;color:var(--u-grijs);min-height:2.6em}
.u2-pk-bedrag{margin:14px 0 18px;font:900 2.4rem/1 var(--l-kop);letter-spacing:-.035em}
.u2-pk .vinklijst{margin-bottom:22px}
.u2-pk .vinklijst li{font-size:.9rem}
.u2-pk .u2-knop{margin-top:auto;width:100%;min-height:48px}
.u2-pk-uit{background:linear-gradient(160deg,#0E2A3B,var(--u-nacht));color:#fff;border-color:transparent;box-shadow:0 44px 70px -36px rgba(6,20,31,.95),0 0 0 2px var(--u-zon);transform:translateY(-10px)}
.u2-pk-uit:hover{transform:translateY(-14px)}
.u2-pk-uit .u2-pk-lint::before{background:var(--u-zon)}
.u2-pk-uit .u2-pk-inhoud{color:rgba(255,255,255,.72)}
.u2-pk-uit .vinklijst li::before{background:rgba(242,182,60,.18)}
.u2-pk-uit .vinklijst li::after{border-color:var(--u-zon)}
.u2-ring{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:62px;height:62px}
.u2-ring svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.u2-ring-baan{fill:none;stroke:rgba(255,255,255,.14);stroke-width:5}
.u2-ring-vol{fill:none;stroke:var(--u-zon);stroke-width:5;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease .4s}
.js .u2-pk-rij:not(.in) .u2-ring-vol{stroke-dashoffset:100}
.u2-ring b{font:900 1.3rem/1 var(--l-kop);margin-top:-6px}
.u2-ring small{position:absolute;bottom:13px;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.u2-los{max-width:980px;margin:24px auto 0;border-radius:14px;background:var(--u-papier);border:1px solid rgba(17,37,45,.08)}
.u2-los summary{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;list-style:none;font-weight:800}
.u2-los summary::-webkit-details-marker{display:none}
.u2-los summary span{font-weight:600;font-size:.9rem;color:var(--u-grijs)}
.u2-los summary i{margin-left:auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--u-nacht);color:#fff;font-style:normal;font-weight:700;transition:transform .25s}
.u2-los[open] summary i{transform:rotate(45deg)}
.u2-los ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding:0 20px 16px}
.u2-los li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(17,37,45,.08);font-size:.94rem}
.u2-los li small{color:var(--u-grijs)}

/* ── reviews ── */
.u2-reviews{background:radial-gradient(45% 70% at 0% 0%,rgba(10,106,149,.5),rgba(10,106,149,0) 70%),radial-gradient(40% 60% at 100% 100%,rgba(54,194,240,.14),rgba(54,194,240,0) 70%),var(--u-nacht);color:#fff}
.u2-rv-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,40px)}
.u2-score{display:flex;align-items:center;gap:16px;padding:14px 20px;border-radius:18px;background:#fff;color:var(--u-inkt);text-decoration:none;box-shadow:0 30px 50px -30px rgba(0,0,0,.9);transition:transform .25s}
.u2-score:hover{transform:translateY(-3px)}
.u2-score > b{font:900 3rem/1 var(--l-kop);letter-spacing:-.04em}
.u2-score > span{display:grid;gap:5px}
.u2-score small{font-size:.85rem;color:var(--u-grijs)}
.u2-sterren{position:relative;display:block;width:112px;height:20px;background:no-repeat left/112px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 20'%3E%3Cg fill='%23DCE3E7'%3E%3Cpath id='s' d='M10 1l2.7 5.6 6.1.9-4.4 4.3 1 6.1L10 15l-5.4 2.9 1-6.1L1.2 7.5l6.1-.9z'/%3E%3Cuse href='%23s' x='23'/%3E%3Cuse href='%23s' x='46'/%3E%3Cuse href='%23s' x='69'/%3E%3Cuse href='%23s' x='92'/%3E%3C/g%3E%3C/svg%3E")}
.u2-sterren i{position:absolute;inset:0;width:96%;background:no-repeat left/112px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 20'%3E%3Cg fill='%23FFB21C'%3E%3Cpath id='s' d='M10 1l2.7 5.6 6.1.9-4.4 4.3 1 6.1L10 15l-5.4 2.9 1-6.1L1.2 7.5l6.1-.9z'/%3E%3Cuse href='%23s' x='23'/%3E%3Cuse href='%23s' x='46'/%3E%3Cuse href='%23s' x='69'/%3E%3Cuse href='%23s' x='92'/%3E%3C/g%3E%3C/svg%3E");transition:width 1.4s ease .3s}
.js .u2-rv-kop:not(.in) .u2-sterren i{width:0}
.u2-score .gg{width:26px;height:26px}
.u2-rv-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,.8fr);grid-template-rows:auto auto;gap:14px}
.u2-rv-foto{grid-column:3;grid-row:1 / 3;margin:0;border-radius:18px;overflow:hidden;box-shadow:0 40px 60px -30px rgba(0,0,0,.9)}
.u2-rv-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.u2-rk{position:relative;display:flex;flex-direction:column;gap:16px;padding:24px 22px 18px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.u2-rk-q{position:absolute;right:18px;top:2px;font:900 4.6rem/1 var(--l-kop);color:rgba(54,194,240,.3)}
.u2-rk blockquote{margin:0;font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.88)}
.u2-rk mark{background:none;color:#fff;font-weight:700;box-shadow:inset 0 -.45em 0 rgba(242,182,60,.4)}
.u2-rk-wie{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.u2-rk-letter{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--u-oceaan);font-weight:900}
.u2-rk-wie span:nth-child(2){display:grid;line-height:1.25}
.u2-rk-wie small{font-size:.8rem;color:rgba(255,255,255,.62)}
.u2-rk-uit{background:var(--u-zon);border-color:transparent;color:var(--u-inkt)}
.u2-rk-uit blockquote{color:var(--u-inkt);font-size:1.04rem}
.u2-rk-uit mark{color:var(--u-inkt);box-shadow:inset 0 -.45em 0 rgba(255,255,255,.55)}
.u2-rk-uit .u2-rk-q{color:rgba(6,20,31,.16)}
.u2-rk-uit .u2-rk-wie{border-color:rgba(6,20,31,.15)}
.u2-rk-uit .u2-rk-wie small{color:rgba(6,20,31,.6)}
.u2-rk-uit .u2-rk-letter{background:var(--u-nacht);color:#fff}

/* ── volgen ── */
.u2-volg{background:radial-gradient(45% 60% at 100% 0%,rgba(10,106,149,.12),rgba(10,106,149,0) 70%),radial-gradient(40% 50% at 0% 100%,rgba(242,182,60,.12),rgba(242,182,60,0) 70%),var(--u-papier)}
.u2-vg-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.u2-vg{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:20px;background:var(--u-nacht);color:#fff;box-shadow:0 34px 60px -40px rgba(6,20,31,.85);transition:transform .3s}
.u2-vg:hover{transform:translateY(-5px)}
.u2-vg-kop{display:flex;align-items:center;gap:12px}
.u2-vg-kop > span:last-child{display:grid;line-height:1.25}
.u2-vg-kop small{font-size:.8rem;color:rgba(255,255,255,.62)}
.u2-vg-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:none}
.u2-vg-ico svg{width:22px;height:22px}
.u2-vg-ico.tt{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.u2-vg-ico.ig{background:linear-gradient(135deg,#FEDA75,#FA7E1E 30%,#D62976 60%,#962FBF 85%)}
.u2-vg-ico.wa{background:#25D366}
.u2-vg-regel{font-size:.92rem;color:rgba(255,255,255,.74)}
.u2-vg-moz{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:1}
.u2-vg-moz img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}
.u2-vg .u2-knop{width:100%;min-height:46px;background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.u2-vg .u2-knop:hover{background:#fff;color:var(--u-inkt)}
.u2-app{flex:1;display:flex;flex-direction:column;gap:8px;padding:16px 14px;border-radius:14px;background:#0B1B14 radial-gradient(60% 60% at 50% 0%,rgba(37,211,102,.12),rgba(37,211,102,0) 70%)}
.u2-bel{max-width:84%;padding:10px 13px;border-radius:14px;font-size:.88rem;line-height:1.4}
.u2-bel-ik{align-self:flex-end;background:#1D5B3A;border-bottom-right-radius:4px}
.u2-bel-hij{align-self:flex-start;background:#26323B;border-bottom-left-radius:4px}
.u2-bel-typt{align-self:flex-start;display:flex;gap:4px;background:#26323B;border-bottom-left-radius:4px}
.u2-bel-typt i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);animation:u2-typ 1.2s ease-in-out infinite}
.u2-bel-typt i:nth-child(2){animation-delay:.15s}.u2-bel-typt i:nth-child(3){animation-delay:.3s}
@keyframes u2-typ{50%{transform:translateY(-4px);opacity:.4}}
.js .u2-vg-rij .u2-bel{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.js .u2-vg-rij.in .u2-bel-ik{opacity:1;transform:none;transition-delay:.3s}
.js .u2-vg-rij.in .u2-bel-typt{opacity:1;transform:none;transition-delay:.9s}
.js .u2-vg-rij.in .u2-bel-hij{opacity:1;transform:none;transition-delay:2.2s}

/* ── vragen ── */
.u2-vragen{background:radial-gradient(50% 60% at 0% 0%,rgba(10,106,149,.16),rgba(10,106,149,0) 72%),var(--u-zeeglas)}
.u2-l-vragen{right:-60px;bottom:-40px;transform:skewX(var(--schuin))}
.u2-l-vragen path{stroke:rgba(28,93,116,.22)}
.u2-vragen .vr-lijst{max-width:1060px;margin-inline:auto}
.u2-vragen .vr-meer{text-align:center;margin-top:24px}

/* ── afsluiter: licht, formulier in een witte kaart, contactkaart met Jordi ── */
.u2-slot{background:radial-gradient(50% 60% at 100% 50%,rgba(10,106,149,.14),rgba(10,106,149,0) 72%),radial-gradient(40% 50% at 0% 0%,rgba(242,182,60,.16),rgba(242,182,60,0) 70%),var(--u-zand)}
.u2-slot-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:stretch}
.u2-slot-links{display:flex;flex-direction:column}
.u2-slot .t-slot-kaart{margin-top:24px;max-width:none;box-shadow:0 40px 70px -46px rgba(6,20,31,.7),0 0 0 1px rgba(17,37,45,.08)}
.u2-contact{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 40px 70px -46px rgba(6,20,31,.7),0 0 0 1px rgba(17,37,45,.06)}
.u2-contact-foto{margin:0;flex:1;min-height:200px;position:relative}
.u2-contact-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 35%}
.u2-contact-tekst{padding:20px 22px 22px}
.u2-contact-naam{display:grid;line-height:1.25}
.u2-contact-naam b{font:900 1.35rem/1.2 var(--l-kop)}
.u2-contact-naam small{color:var(--u-grijs);font-size:.88rem}
.u2-contact-regels{list-style:none;display:grid;gap:8px;margin-top:14px}
.u2-contact-regels li{display:flex;align-items:center;gap:10px;font-size:.95rem}
.u2-contact-regels svg{width:20px;height:20px;color:var(--petrol);flex:none}
.u2-contact-regels a{font-weight:700;color:var(--u-inkt);text-decoration:none}
.u2-contact-regels small{color:var(--u-grijs)}
.u2-plaatsen-kop{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--petrol)}
.u2-plaatsen-kop svg{width:16px;height:16px}
.u2-plaatsen{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.u2-plaatsen a{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--u-zand);font-size:.84rem;font-weight:700;color:var(--u-inkt);text-decoration:none;transition:background .2s,color .2s}
.u2-plaatsen a:hover{background:var(--u-nacht);color:#fff}

@media (prefers-reduced-motion:reduce){.u2-bord,.u2-bel-typt i{animation:none}.u2-kaart{transform:none !important}}

/* ── tussenmaten ── */
@media (max-width:1100px){
  .u2-pk-rij{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .u2-pk-uit{transform:none}
  .u2-rv-raster{grid-template-columns:1fr 1fr}
  .u2-rv-foto{display:none}
  .u2-reken .br-blok{grid-template-columns:1fr 1fr !important}
  .u2-meter-vak{grid-column:1 / -1;grid-row:1}
}
@media (max-width:920px){
  .u2-kaarten{grid-template-columns:1fr 1fr}
  .u2-kaarten .u2-kaart:last-child{grid-column:1 / -1;max-width:calc(50% - 10px);justify-self:center;width:100%}
  .u2-motor-boven,.u2-over-raster,.u2-slot-raster{grid-template-columns:1fr}
  .u2-motor-fotos{max-width:560px;margin-inline:auto}
  .u2-over-foto{max-width:500px}
  .u2-terrein-stappen{grid-template-columns:1fr 1fr}
  .u2-vg-rij{grid-template-columns:1fr 1fr}
  .u2-vg-app{display:none}
  .u2-stap{grid-template-columns:1fr}
  .u2-los ul{grid-template-columns:1fr}
}
/* ── telefoon: eigen compositie, alles gecentreerd, korter ── */
@media (max-width:699px){
  .u2-aanbod,.u2-route,.u2-motor,.u2-over,.u2-reken,.u2-prijs,.u2-reviews,.u2-volg,.u2-vragen,.u2-slot{padding-block:50px !important}
  .u2-kop h2,.u2-motor h2,.u2-over h2,.u2-rv-kop h2,.u2-slot h2,.u2-reken .kopblok h2{font-size:clamp(30px,9vw,36px)}
  .u2-motor-tekst,.u2-over-tekst,.u2-rv-kop > div,.u2-slot-links > .u2-kicker,.u2-slot-links > h2,.u2-slot-links > .u2-lead{text-align:center}
  .u2-motor-tekst .u2-kicker::after,.u2-over-tekst .u2-kicker::after,.u2-rv-kop .u2-kicker::after,.u2-slot-links .u2-kicker::after{content:"";width:26px;height:3px;border-radius:2px;background:currentColor;transform:skewX(var(--schuin))}
  .u2-slot-links > .u2-kicker{align-self:center}
  .u2-baan .rij-foto{height:200px}
  .u2-strook{padding:14px 0}
  .u2-kaarten{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:6px 4px 14px;margin-inline:-4px;scrollbar-width:none}
  .u2-kaarten::-webkit-scrollbar{display:none}
  .u2-kaarten .u2-kaart,.u2-kaarten .u2-kaart:last-child{scroll-snap-align:center;max-width:none;grid-column:auto}
  .u2-kaart-tekst b{font-size:30px}
  .u2-weg{margin-inline:-8px}
  .u2-weg-svg{display:none}
  .u2-haltes{display:flex;gap:6px;justify-content:space-between;position:relative;padding:8px 6px}
  .u2-haltes::before{content:"";position:absolute;left:28px;right:28px;top:31px;height:12px;border-radius:6px;background:#26323B}
  .u2-haltes li{position:relative;left:auto;top:auto;transform:none}
  .u2-halte-nr{width:44px;height:44px}
  .u2-halte-naam,.u2-haltes li:nth-child(even) .u2-halte-naam{position:static;padding:3px 8px;font-size:.72rem}
  .u2-paneel{margin-top:18px}
  .u2-stap{padding:14px;gap:16px}
  .u2-stap-foto{aspect-ratio:16/10}
  .u2-motor-plus{grid-template-columns:1fr}
  .u2-motor-plus li{grid-template-columns:auto 1fr;align-items:center;text-align:left}
  .u2-motor-tekst .u2-knoppen{justify-content:center}
  .u2-motor-fotos{padding:0 0 40px 40px}
  .u2-terrein{padding:12px}
  .u2-terrein-stappen{grid-template-columns:1fr 1fr;gap:8px}
  .u2-terrein-stappen li{padding:10px}
  .u2-over-foto{margin:0 10px 30px 14px}
  .u2-reken .br-blok{grid-template-columns:1fr !important}
  .u2-meter{max-width:230px}
  .u2-pk-rij,.u2-pk-drie{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 4px 10px;margin-inline:-4px;scrollbar-width:none}
  .u2-pk{scroll-snap-align:start}
  .u2-pk-uit{transform:none}
  .u2-los summary span{display:none}
  .u2-rv-kop{flex-direction:column;align-items:center}
  .u2-rv-raster{grid-template-columns:1fr}
  .u2-rk:nth-child(n+3){display:none}
  .u2-vg-rij{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 12px;margin-inline:-4px;scrollbar-width:none}
  .u2-vg{scroll-snap-align:center}
  .u2-vragen .vr:nth-child(n+7){display:none}
  .u2-contact-foto{min-height:220px}
  .u2-l{display:none}
}
/* telefoon, ronde 2: niets boven de titel (Jordi-foto onder de tekst), korter (≤ 11.000 px) */
@media (max-width:920px){ .u2-over-foto{order:2} .u2-over-tekst{order:1} }
@media (max-width:699px){ .u2-over-foto{margin-top:6px} }

/* ── "Zo werkt het", ronde 2 (Sean: niet iedereen snapt dat je moet klikken; je zag alleen de eerste kaart) ──
   Alle vijf stappen staan tegelijk in beeld, elk onder zijn halte. De auto rijdt één keer de hele weg; elke halte die hij
   passeert licht op. Muis op een kaart = de auto rijdt naar die halte. */
.u2-haltes li{display:grid;justify-items:center}
.u2-haltes .u2-halte-nr{transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .3s}
.u2-haltes li.bereikt .u2-halte-nr{background:var(--u-zon);border-color:var(--u-zon);color:var(--u-inkt)}
.u2-haltes li.aan .u2-halte-nr{transform:scale(1.15);box-shadow:0 0 0 8px rgba(242,182,60,.3)}
.u2-haltes li.aan .u2-halte-naam{background:var(--u-inkt);color:#fff}
.u2-stappen{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:clamp(46px,4.4vw,62px) 0 0;padding:0}
.u2-stappen .u2-stap{display:flex;flex-direction:column;gap:0;max-width:none;margin:0;padding:0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -44px rgba(6,20,31,.6);border-top:4px solid transparent;animation:none;transition:transform .3s,border-color .4s,box-shadow .3s}
.u2-stappen .u2-stap.bereikt{border-top-color:var(--u-zon)}
.u2-stappen .u2-stap.aan{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(6,20,31,.7)}
.u2-stappen .u2-stap-foto{position:relative;aspect-ratio:4/3;border-radius:0}
.u2-stappen .u2-stap-nr{position:absolute;left:12px;bottom:-18px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--u-inkt);color:#fff;font:900 1rem/1 var(--l-kop);letter-spacing:0;text-transform:none;border:3px solid #fff;transition:background .3s,color .3s}
.u2-stappen .u2-stap.bereikt .u2-stap-nr{background:var(--u-zon);color:var(--u-inkt)}
.u2-stappen .u2-stap-tekst{display:grid;gap:8px;padding:28px 16px 18px}
.u2-stappen h3{font-size:1.18rem;letter-spacing:-.02em}
.u2-stappen .u2-stap-tekst > p:not([class]){font-size:.9rem;line-height:1.5;color:var(--u-grijs)}
.u2-stappen .u2-stap-feit{font-size:.8rem;padding:6px 11px}
.u2-route-knop{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
@media (max-width:1100px){ .u2-stappen{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:699px){
  .u2-haltes li{display:grid}
  .u2-stappen{grid-template-columns:1fr;gap:10px;margin-top:18px}
  .u2-stappen .u2-stap{flex-direction:row;align-items:stretch;border-top:0;border-left:4px solid transparent}
  .u2-stappen .u2-stap.bereikt{border-left-color:var(--u-zon)}
  .u2-stappen .u2-stap-foto{flex:none;width:96px;aspect-ratio:auto}
  .u2-stappen .u2-stap-nr{left:auto;right:-14px;bottom:auto;top:10px;width:30px;height:30px;font-size:.85rem}
  .u2-stappen .u2-stap-tekst{padding:12px 14px 12px 22px;gap:4px}
  .u2-stappen h3{font-size:1.05rem}
  .u2-stappen .u2-stap-tekst > p:not([class]){font-size:.86rem}
  .u2-stappen .u2-stap-feit{display:none}
  .u2-route-knop .u2-knop{width:100%}
}

/* ── pakketten, ronde 2: uitgelichte kaart + brede rijen, lessen als blokjes ── */
.u2-pak{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:stretch}
.u2-feat{position:relative;display:flex;flex-direction:column;padding:28px 28px 26px;border-radius:24px;color:#fff;background:radial-gradient(70% 60% at 100% 0%,rgba(54,194,240,.3),rgba(54,194,240,0) 70%),linear-gradient(160deg,#0E2A3B,var(--u-nacht));box-shadow:0 50px 90px -46px rgba(6,20,31,.95),0 0 0 2px var(--u-zon);overflow:hidden;isolation:isolate}
.u2-feat::after{content:"";position:absolute;right:-60px;bottom:-70px;z-index:-1;width:260px;height:200px;border:2px solid rgba(242,182,60,.25);border-radius:14px;transform:skewX(var(--schuin))}
.u2-feat-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:62px}
.u2-feat .u2-pk-lint{position:relative;top:auto;left:auto;align-self:flex-start;margin-top:4px}
.u2-feat .u2-pk-lint::before{background:var(--u-zon)}
.u2-feat .u2-ring{position:relative;right:auto;top:auto;flex:none}
.u2-feat h3{margin-top:6px;font-size:clamp(28px,2.5vw,36px);line-height:1.05;letter-spacing:-.03em}
.u2-feat-inhoud{margin-top:8px;color:rgba(255,255,255,.74);font-size:.96rem}
.u2-feat-bedrag{margin-top:18px;font:900 3.4rem/1 var(--l-kop);letter-spacing:-.04em;color:var(--u-zon)}
.u2-feat .vinklijst{margin-top:18px}
.u2-feat .vinklijst li::before{background:rgba(242,182,60,.18)}
.u2-feat .vinklijst li::after{border-color:var(--u-zon)}
.u2-feat-knoppen{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:auto;padding-top:24px}
.u2-feat-meer{color:#fff;font-weight:700;font-size:.95rem}
.u2-pakrijen{display:grid;gap:14px;align-content:stretch}
.u2-pakrij{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 22px;border-radius:20px;background:#fff;border:1px solid rgba(17,37,45,.1);box-shadow:0 26px 50px -42px rgba(6,20,31,.6);transition:transform .3s,box-shadow .3s,border-color .3s}
.u2-pakrij:hover{transform:translateX(6px);border-color:rgba(28,93,116,.35);box-shadow:0 34px 60px -40px rgba(6,20,31,.7)}
.u2-pakrij .u2-pk-lint{top:-12px;left:22px}
.u2-pakrij-naam h3{font-size:1.35rem;letter-spacing:-.02em}
.u2-pakrij-naam p{margin-top:2px;font-size:.88rem;color:var(--u-grijs)}
.u2-pakrij-punten{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.u2-pakrij-punten li{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600}
.u2-pakrij-punten svg{width:16px;height:16px;flex:none;padding:3px;border-radius:50%;background:rgba(28,93,116,.12);color:var(--petrol)}
.u2-pakrij-prijs{display:grid;justify-items:end;gap:10px}
.u2-pakrij-prijs b{font:900 2.1rem/1 var(--l-kop);letter-spacing:-.035em}
.u2-pakrij-prijs .u2-knop{min-height:42px;padding:0 1.1em;font-size:.92rem}
/* lessen als blokjes: elk blokje = één les; ze lopen vol als de sectie in beeld komt */
.u2-blokjes{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:10px}
.u2-blokjes i{width:14px;height:14px;border-radius:4px;background:var(--petrol);transform:skewX(var(--schuin));transition:opacity .3s ease calc(var(--b) * 45ms),transform .3s ease calc(var(--b) * 45ms)}
.u2-blokjes-groot{gap:5px;margin-top:18px;max-width:340px}
.u2-blokjes-groot i{width:20px;height:20px;background:var(--u-gloed)}
.u2-blok-ex{display:grid;place-items:center;width:24px;height:24px;margin-left:4px;border-radius:50%;background:var(--u-zon);color:var(--u-inkt)}
.u2-blokjes-groot .u2-blok-ex{width:28px;height:28px}
.u2-blok-ex svg{width:14px;height:14px}
.js .u2-pak:not(.in) .u2-blokjes i{opacity:.15;transform:skewX(var(--schuin)) scale(.6)}
.js .u2-pak:not(.in) .u2-ring-vol{stroke-dashoffset:100}
@media (max-width:1100px){ .u2-pak{grid-template-columns:1fr} .u2-pakrij{grid-template-columns:minmax(0,1fr) auto} .u2-pakrij-punten{display:none} }
@media (max-width:699px){
  .u2-feat{padding:22px 20px}
  .u2-feat-bedrag{font-size:2.8rem}
  .u2-blokjes-groot i{width:16px;height:16px}
  .u2-pakrij{grid-template-columns:1fr;gap:12px;padding:20px 18px}
  .u2-pakrij-prijs{grid-auto-flow:column;justify-content:space-between;align-items:center}
  .u2-pakrij:hover{transform:none}
}
.u2-pakinfo{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:20px 22px;border-radius:20px;background:var(--u-zand);border:1px dashed rgba(28,93,116,.35)}
.u2-pakinfo h3{font-size:1.1rem}
.u2-pakinfo ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0}
.u2-pakinfo li{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--u-grijs);line-height:1.3}
.u2-pakinfo svg{width:34px;height:34px;flex:none;padding:7px;border-radius:10px;background:#fff;color:var(--petrol)}
.u2-pakinfo b{display:block;color:var(--u-inkt);font-size:.95rem}
@media (max-width:699px){ .u2-pakinfo{grid-template-columns:1fr} .u2-pakinfo ul{grid-template-columns:1fr} }

/* ── stap-illustraties (vector, geen foto's) ── */
.u2-illu-vak{display:grid;place-items:center;background:radial-gradient(70% 80% at 50% 0%,rgba(54,194,240,.35),rgba(54,194,240,0) 70%),linear-gradient(160deg,#0F3044,var(--u-nacht))}
.u2-stap:nth-child(2) .u2-illu-vak{background:radial-gradient(70% 80% at 50% 0%,rgba(242,182,60,.28),rgba(242,182,60,0) 70%),linear-gradient(160deg,#103246,#071724)}
.u2-stap:nth-child(4) .u2-illu-vak{background:radial-gradient(70% 80% at 50% 0%,rgba(54,194,240,.3),rgba(54,194,240,0) 70%),linear-gradient(160deg,#0B4D6E,#062A3E)}
.u2-illu{width:100%;height:100%;display:block}
.u2-illu .i-gloed{fill:rgba(54,194,240,.1)}
.u2-illu .i-wit{fill:#fff}
.u2-illu .i-donker{fill:#0A1C29}
.u2-illu .i-kop{fill:var(--petrol)}
.u2-illu .i-geel,.u2-illu .i-geel-v{fill:var(--u-zon)}
.u2-illu .i-lijn{fill:none;stroke:var(--petrol);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.u2-illu .i-stip{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.5;stroke-dasharray:2 6;stroke-linecap:round}
.u2-illu .i-tekst{font:900 15px var(--l-kop);fill:var(--u-inkt);text-anchor:middle}
.u2-illu .i-klein{font:800 7px var(--l-tekst);fill:#fff;text-anchor:middle;letter-spacing:.04em}
/* 1 stopwatch */
.i-ring-baan{fill:none;stroke:#E6EEF2;stroke-width:7}
.i-ring{fill:none;stroke:var(--u-zon);stroke-width:7;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s ease .2s}
.i-tik{stroke:#9DB0BA;stroke-width:2;stroke-linecap:round}
.i-wijzer{transform-origin:120px 82px;transform:rotate(360deg);transition:transform 1.8s ease .2s}
.i-wijzer-lijn{stroke:#FF5A3C;stroke-width:3.5;stroke-linecap:round}
.js .u2-stappen:not(.in) .i-ring{stroke-dashoffset:100}
.js .u2-stappen:not(.in) .i-wijzer{transform:rotate(0deg)}
/* 2 app */
.i-cel{fill:#E6EEF2;transition:fill .3s ease calc(.3s + var(--d) * 70ms),transform .3s ease calc(.3s + var(--d) * 70ms);transform-box:fill-box;transform-origin:center}
.i-les{fill:var(--u-zon)}
.js .u2-stappen:not(.in) .i-les{fill:#E6EEF2;transform:scale(.6)}
.i-huis-g{transition:transform .6s cubic-bezier(.3,1.5,.5,1) .9s;transform-box:fill-box;transform-origin:center}
.js .u2-stappen:not(.in) .i-huis-g{transform:scale(0)}
/* 3 klembord */
.i-vak{fill:none;stroke:#9DB0BA;stroke-width:2}
.i-vink{fill:none;stroke:#1BA35C;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .4s ease calc(.4s + var(--d) * .35s)}
.js .u2-stappen:not(.in) .i-vink{stroke-dashoffset:1}
.i-regel{fill:#C9D6DD}.i-regel-l{fill:#E1E9ED}
.i-pen{transition:transform 1.4s ease .3s}
.js .u2-stappen:not(.in) .i-pen{transform:translate(-14px,-30px)}
/* 4 verkeerslicht: eindigt op groen */
.i-l{transition:fill .3s ease}
.i-rood,.i-oranje{fill:#2A3A45}
.i-groen{fill:#2BD46F;filter:drop-shadow(0 0 8px rgba(43,212,111,.9))}
.u2-stappen.in .i-rood{animation:i-rood 1.6s ease .2s}
.u2-stappen.in .i-oranje{animation:i-oranje 1.6s ease .2s}
.u2-stappen.in .i-groen{animation:i-groen 1.6s ease .2s}
@keyframes i-rood{0%,40%{fill:#FF4B3A}41%,100%{fill:#2A3A45}}
@keyframes i-oranje{0%,40%{fill:#2A3A45}41%,75%{fill:#FFAE1F}76%,100%{fill:#2A3A45}}
@keyframes i-groen{0%,75%{fill:#2A3A45;filter:none}76%,100%{fill:#2BD46F}}
.i-paal{stroke:#fff;stroke-width:4;stroke-linecap:round}
.i-vlag{transform-box:fill-box;transform-origin:0 100%;animation:none}
.u2-stappen.in .i-vlag{animation:i-wapper 1.2s ease-in-out 1.6s 2}
@keyframes i-wapper{50%{transform:skewY(-6deg)}}
/* 5 rijbewijs */
.i-roze{fill:#F7D7E3}.i-eu{fill:#1E4FB5}.i-foto{fill:#fff}.i-persoon{fill:#9DB0BA}.i-regel-d{fill:#C9A3B4}
.i-nl{font:800 9px var(--l-tekst);fill:#fff;text-anchor:middle}
.i-cat{font:900 30px var(--l-kop);fill:var(--u-inkt);text-anchor:middle}
.i-pas{transition:transform .8s cubic-bezier(.3,1.4,.5,1) .2s;transform-box:fill-box;transform-origin:center}
.js .u2-stappen:not(.in) .i-pas{transform:translateY(24px) rotate(-8deg) scale(.85)}
.i-confetti rect{transition:transform 1s cubic-bezier(.2,.8,.3,1) calc(.6s + var(--d) * 40ms),opacity .6s ease calc(.6s + var(--d) * 40ms);transform-box:fill-box;transform-origin:center}
.js .u2-stappen:not(.in) .i-confetti rect{opacity:0;transform:translate(0,30px) scale(.3)}
.u2-stappen .u2-stap-foto.u2-illu-vak{aspect-ratio:16/10}
@media (prefers-reduced-motion:reduce){.u2-stappen.in .i-rood,.u2-stappen.in .i-oranje,.u2-stappen.in .i-groen,.u2-stappen.in .i-vlag{animation:none}}
@media (max-width:699px){ .u2-stappen .u2-stap-foto.u2-illu-vak{aspect-ratio:auto;width:104px} }
.u2-stappen .u2-stap-nr{left:12px;top:12px;bottom:auto;width:34px;height:34px;border:2px solid rgba(255,255,255,.85)}
.u2-stappen .u2-stap-tekst{padding-top:18px}
@media (max-width:699px){ .u2-stappen .u2-stap-nr{left:8px;top:8px;right:auto;width:26px;height:26px;font-size:.8rem} }

/* ── afsluiter zoals Sean aanwees (07-10): donker, tekst + contactkaart links, formulier rechts, geen kaart van het werkgebied ── */
.u2-slot-donker{background:radial-gradient(50% 70% at 100% 50%,rgba(10,106,149,.45),rgba(10,106,149,0) 70%),radial-gradient(40% 60% at 0% 0%,rgba(242,182,60,.1),rgba(242,182,60,0) 70%),var(--u-nacht);color:#fff}
.u2-slot-donker .u2-slot-raster{align-items:center}
.u2-slot-donker h2 em{color:var(--u-zon)}
.u2-slot-donker .u2-lead{color:rgba(255,255,255,.78)}
.u2-slot-wie{display:flex;align-items:center;gap:18px;margin-top:28px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.u2-slot-wie > img{width:76px;height:76px;border-radius:50%;flex:none;border:3px solid var(--u-zon)}
.u2-slot-wie ul{list-style:none;display:grid;gap:6px;margin:0;padding:0;min-width:0}
.u2-slot-wie li{display:grid;grid-template-columns:20px auto 1fr;align-items:center;gap:10px;font-size:.95rem}
.u2-slot-wie li svg{width:18px;height:18px;color:var(--u-gloed)}
.u2-slot-wie a,.u2-slot-wie b{color:#fff;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.u2-slot-wie small{color:rgba(255,255,255,.6);font-size:.8rem}
.u2-slot-donker .t-slot-kaart{margin-top:0;box-shadow:0 50px 90px -46px rgba(0,0,0,.95)}
@media (max-width:699px){
  .u2-slot-wie{flex-direction:column;align-items:center;text-align:left}
  .u2-slot-wie li{grid-template-columns:20px 1fr}
  .u2-slot-wie li small{grid-column:2}
  .u2-slot-donker .u2-slot-links h2,.u2-slot-donker .u2-lead{text-align:center}
}