/* Vloeiende, natuurlijke laag: achtergrond loopt door in plaats van blokken; geen kaarten; serif-accent. Laadt als laatste. */
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
:root{--bg:#fff;--ink:#0B2447;--t2:#4a5b78;--t3:#6b7a94;--hair:#dbe3ee;--p:#2175D9;--btn:#2175D9;--btnfg:#fff;--surf:#F3F7FC;--serif:"Newsreader",Georgia,serif}
html,body{background:var(--bg)!important;color:var(--t2)}
main>section,.hero,.news,.close,.page-hero,main>section:has(.specs),main>section:has(.statement){background:none!important}
.paper{display:none!important}
/* nav en footer houden vaste kleuren */
.nav{--ink:#0B2447;--t2:#4a5b78;--p:#2175D9;--btn:#2175D9;--btnfg:#fff;background:rgba(255,255,255,.8)!important;-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid rgba(11,36,71,.06)}
footer{--ink:#fff;--t2:#c3d3ea;--t3:#9fb5d6;--hair:#26406b;--p:#8DBBF3;background:#0B2447!important;color:#c3d3ea}
footer h4{color:#fff}
/* typografie: serif-accent, lichter gewicht */
h1,h2,h3,.statement{color:var(--ink)}
h1{font-weight:600;letter-spacing:-.03em;line-height:1.08}
h2{font-weight:600;letter-spacing:-.025em}
h1 em,h2 em,.statement em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:var(--p)!important}
h1 em{position:relative;white-space:nowrap}
h1 em::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.22em;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C30 2 60 12 100 6 S170 2 198 7' fill='none' stroke='%232175D9' stroke-width='3' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;opacity:.55}
p,li,.lead{color:var(--t2)}
a{color:var(--p)}
.more,.plate .go{color:var(--p)!important}
.btn{background:var(--btn)!important;color:var(--btnfg)!important;border-radius:999px!important;box-shadow:none}
.btn:hover{filter:brightness(.94)}
.btn.line{background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--ink)}
.nav .btn{border-radius:999px!important}
.micro{display:none!important}
/* hero: zachte, bewegende kleurvlakken in plaats van een harde achtergrond */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);pointer-events:none;animation:drift 22s ease-in-out infinite alternate}
.hero::before{width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(circle,#cfe3fb,transparent 65%)}
.hero::after{width:40vw;height:40vw;right:-8vw;bottom:-16vw;background:radial-gradient(circle,#d9efe9,transparent 65%);animation-duration:28s;animation-direction:alternate-reverse}
@keyframes drift{to{transform:translate3d(6vw,4vw,0) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero::after{animation:none}}
.trust li{color:var(--t2)}
/* vakken: open, geen kaarten, organische vormen */
.convoy{align-items:start;gap:clamp(20px,3vw,48px)}
.plate,.convoy.go .plate:hover{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0!important;border-radius:0!important}
.plate:nth-child(even){margin-top:clamp(24px,5vw,72px)}
.plate .tag{order:3;margin-top:.3rem;opacity:.7}
.plate .glyph{flex:none;aspect-ratio:1/1;width:100%;padding:0;background:color-mix(in srgb,var(--a) 11%,transparent);border-radius:58% 42% 55% 45%/48% 56% 44% 52%;transition:border-radius 1.2s var(--ease),background .6s;margin-bottom:1.3rem}
.plate:hover .glyph{border-radius:44% 56% 42% 58%/55% 45% 56% 44%;background:color-mix(in srgb,var(--a) 18%,transparent)}
.plate:nth-child(2) .glyph{border-radius:46% 54% 60% 40%/52% 42% 58% 48%}
.plate:nth-child(3) .glyph{border-radius:55% 45% 40% 60%/44% 58% 42% 56%}
.plate .glyph svg{max-width:62%}
.plate h3{font-size:1.45rem;font-weight:600;margin:0 0 .3rem}
.plate p{color:var(--t2)}
.head h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
/* verwachtingen: redactionele lijst */
main>section:has(.specs){padding-block:clamp(64px,9vw,128px)}
.specs{grid-template-columns:repeat(2,1fr)!important;gap:0 clamp(32px,7vw,112px)!important;border:0!important}
.specs>*,.spec{background:none!important;border:0!important;border-top:1px solid var(--hair)!important;border-radius:0!important;color:inherit!important;box-shadow:none!important;padding:26px 0 30px!important;display:grid;grid-template-columns:2.4rem 1fr;column-gap:12px}
.spec .n{grid-row:span 2;font:500 .95rem var(--body);color:var(--p)!important;padding-top:.35rem}
.spec h3,main>section:has(.specs) h3,main>section:has(.specs) h2,main>section:has(.specs) strong{color:var(--ink)!important;font-size:1.2rem;font-weight:600;margin:0 0 .35rem}
main>section:has(.specs) h2{font-size:clamp(1.8rem,3.4vw,2.8rem)!important}
.spec p,main>section:has(.specs) p,main>section:has(.specs) li{color:var(--t2)!important}
main>section:has(.specs) a{color:var(--p)!important}
.quiet,main>section:has(.specs) .quiet{background:none!important;border:0!important;border-left:3px solid var(--p)!important;border-radius:0!important;padding:.2rem 0 .2rem 1.4rem!important;max-width:44em;color:var(--t2)!important;font-family:inherit;font-style:normal;font-size:1.1rem;line-height:1.65}
@media(max-width:760px){.specs{grid-template-columns:1fr!important}.plate:nth-child(even){margin-top:0}}
/* statement */
main>section:has(.statement){padding-block:clamp(72px,12vw,180px)}
.statement{font-weight:500!important;font-size:clamp(1.7rem,3.6vw,3rem)!important;line-height:1.2!important;letter-spacing:-.025em!important;max-width:20em!important}
.statement .w{opacity:.22}.statement .w.on{opacity:1}
.statement,.statement *{color:var(--ink)!important}
/* route, nieuwsbrief, afsluiter: geen banden meer */
.route-line{background:var(--hair)}.route-line i{background:var(--p)}
.rstep h3{color:var(--ink)}
.news,.close{padding-block:clamp(56px,8vw,112px)}
.news .band,.close .band{background:none!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
.close .band h2,.close h2{color:var(--ink)!important;font-size:clamp(2rem,4.6vw,3.8rem)!important;max-width:12em;font-weight:600}
.close .lead{color:var(--t2)!important;font-size:1.15rem}
.close .btn{background:var(--btn)!important;color:var(--btnfg)!important}
.close svg.deco{stroke:var(--p)!important;opacity:.35!important}
.news input[type=email],.news input[type=text],.news input{background:rgba(255,255,255,.85)}
.page-hero{padding-block:clamp(40px,6vw,88px)}
.crumbs,.crumbs a{color:var(--t3)}
/* animatie op vakpagina's: vloeit zonder rand uit in de achtergrond */
.stage-cap{color:var(--t3)}
.spec .n{grid-column:1;grid-row:1/span 2}
.spec h3,.spec p{grid-column:2}
.spec .n{display:block!important;margin:0!important}
.price.hot,.price.hot *{color:#dbe7f7}
.price.hot b,.price.hot strong,.price.hot .amt,.price.hot h3,.price.hot [class*=big]{color:#fff}
.price.hot a{color:#8DBBF3}
.price.hot li{border-color:#28436F}
.nav{background:rgba(255,255,255,.93)!important}
/* homepage: vakkenlijst, lopende tekst, prijsregel */
.hero .grid{grid-template-columns:1.15fr .85fr;align-items:center}
.hero h1{font-size:clamp(2rem,4.2vw,3.4rem);max-width:15em}
.vaklist{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.vl-h{font-size:.85rem;color:var(--t3);margin:0 0 .8rem}
.vaklist{border-top:0}
.vakrow{display:grid;grid-template-columns:5.2rem 1fr auto;align-items:center;gap:8px;padding:1.05rem 0;border-top:1px solid var(--hair);text-decoration:none;color:var(--ink);transition:padding .35s var(--ease),background .35s}
.vakrow:last-child{border-bottom:1px solid var(--hair)}
.vakrow i{font:600 1.45rem "DM Sans",system-ui,sans-serif;color:var(--a);font-style:normal}
.vakrow b{display:block;font-size:1.2rem;font-weight:600;color:var(--ink)}
.vakrow small{display:block;font-size:.9rem;color:var(--t2);margin-top:.15rem}
.vakrow em{font-style:normal;color:var(--p);transition:transform .35s var(--ease)}
.vakrow:hover{padding-left:.6rem;background:linear-gradient(90deg,color-mix(in srgb,var(--a) 8%,transparent),transparent)}
.vakrow:hover em{transform:translateX(6px)}
.vakrow.wis{--a:#3E5CC4}.vakrow.nat{--a:#1F8FB0}.vakrow.sch{--a:#7B5CC8}.vakrow.bio{--a:#2B9A74}
.narrow{max-width:46rem}
.prose-sec{padding-block:clamp(48px,8vw,112px)}
.prose-sec h2{margin-bottom:1.6rem}
.prose p{font-size:1.15rem;line-height:1.75;margin:0 0 1.2rem;color:var(--t2)}
.prose p b{color:var(--ink);font-weight:600}
.prose-sec .quiet{margin-top:2rem}
.prijsregel{padding-block:clamp(40px,6vw,80px)}
.prijsregel p{font-size:clamp(1.4rem,2.8vw,2.2rem);line-height:1.35;letter-spacing:-.02em;color:var(--ink);max-width:24em;margin:0 0 1.2rem}
.prijsregel p b{font-family:inherit;font-style:normal;font-weight:700;color:var(--p)}
@media(max-width:860px){.hero .grid{grid-template-columns:1fr}.vakrow{grid-template-columns:4rem 1fr auto}}
.hero{overflow-x:clip;overflow-y:visible}
.prose p.big{font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.4;letter-spacing:-.015em;color:var(--ink)}
.prose-sec.own{padding-top:clamp(24px,5vw,64px)}
/* kleiner en rustiger */
h1,.hero h1{font-size:clamp(1.7rem,3vw,2.4rem)!important;line-height:1.2;max-width:20em}
h2,.head h2,main>section:has(.specs) h2{font-size:clamp(1.3rem,2.1vw,1.7rem)!important}
.close h2,.close .band h2{font-size:clamp(1.4rem,2.3vw,1.9rem)!important;max-width:none}
.close .lead,.lead{font-size:1.05rem!important}
.prijsregel p{font-size:clamp(1.15rem,1.9vw,1.5rem)}
.prose p.big{font-size:clamp(1.15rem,1.7vw,1.4rem)}
.vakrow b{font-size:1.05rem}.vakrow i{font-size:1.3rem}
.statement{font-size:clamp(1.3rem,2.2vw,1.8rem)!important}
/* mobiel menu: backdrop-filter op .nav maakte het fixed menu klein; filter nu op een laag erachter */
.nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:transparent!important;position:sticky}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.93);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px)}
@media(max-width:860px){
  .menu{position:fixed!important;inset:68px 0 0 0!important;background:#fff!important;z-index:99;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.2rem!important;padding:24px 24px 40px!important;overflow-y:auto}
  .menu a{font:500 1.35rem var(--body)!important;letter-spacing:-.01em;color:#0B2447!important;padding:.7rem 0;width:100%;border-bottom:1px solid #e3e9f2;box-shadow:none!important}
  .menu a[aria-current="page"]{color:#2175D9!important}
  .menu .btn{width:auto;margin-top:1.4rem;border-bottom:0!important;padding:.85rem 1.6rem!important;font-size:1rem!important;color:#fff!important}
}