/* ClearTech site styles. Based on the approved sketch D2 "Nachtploeg": dark, calm, Mona Sans throughout. */

/* Mona Sans, self-hosted (SIL Open Font License, see /assets/fonts/OFL.txt). Variable: weight 200-900, width 75-125%. */
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/assets/fonts/mona-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/assets/fonts/mona-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nacht: #0c1320;
  --nacht-2: #121c2c;
  --nacht-3: #18243a;
  --staal: #8794a5;
  --zacht: #c3ccd7;
  --wit: #f1f4f7;
  --vonk: #ff7a1a;
  --akkoord: #84d394;
  --rand: rgba(241,244,247,.1);
  --kop: "Mona Sans", system-ui, sans-serif;
  --tekst: "Mona Sans", system-ui, sans-serif;
  --kop-gewicht: 560;
  --kop-wdth: 108;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--nacht); color: var(--wit); font: 400 17px/1.65 var(--tekst); -webkit-font-smoothing: antialiased; }
/* fine film grain over everything for a less digital, more photographic feel */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--vonk); outline-offset: 4px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
h1, h2, h3 { font-family: var(--kop); font-weight: var(--kop-gewicht); font-variation-settings: "wdth" var(--kop-wdth); letter-spacing: -.02em; }
[id] { scroll-margin-top: 96px; }

/* skip link, visible only on keyboard focus */
.skip { position: absolute; left: 16px; top: -100px; z-index: 60; background: var(--vonk); color: #1d0e02; padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }

/* header */
.site-kop { position: fixed; inset: 0 0 auto; z-index: 20; transition: background .3s, box-shadow .3s; }
.site-kop .wrap { display: flex; justify-content: space-between; align-items: center; height: 80px; }
@supports (animation-timeline: scroll()) {
  .site-kop { animation: kop linear both; animation-timeline: scroll(); animation-range: 0 240px; }
  @keyframes kop { to { background: rgba(12,19,32,.82); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--rand); } }
}
/* fallback (set by site.js) for browsers without scroll-driven animations */
.site-kop.vast { background: rgba(12,19,32,.88); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--rand); }
.logo { font-family: var(--kop); font-weight: 600; font-size: 19px; letter-spacing: .14em; font-variation-settings: "wdth" 120; text-transform: uppercase; text-decoration: none; }
.site-kop nav a { text-decoration: none; margin-left: 34px; font-size: 14px; color: var(--zacht); transition: color .2s; }
.site-kop nav a:hover, .site-kop nav a[aria-current="page"] { color: var(--wit); }
.site-kop nav a.btn { color: var(--wit); border: 1px solid rgba(241,244,247,.35); padding: 9px 18px; border-radius: 99px; transition: border-color .25s; }
.site-kop nav a.btn:hover { border-color: var(--wit); }

/* hero: slow cross-fading photos from different trades, one colour grade over all of them */
.hero { position: relative; height: 100svh; min-height: 680px; overflow: clip; display: flex; align-items: flex-end; }
.slides { position: absolute; inset: 0; }
.slides div { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; filter: saturate(.75) contrast(1.05); animation: wissel 24s infinite; }
.slides div:nth-child(1) { background-position: 30% 60%; animation-delay: 0s;
  background-image: url(/assets/img/vonken-1920.jpg);
  background-image: image-set(url(/assets/img/vonken-1920.webp) type("image/webp"), url(/assets/img/vonken-1920.jpg) type("image/jpeg")); }
.slides div:nth-child(2) { animation-delay: 6s;
  background-image: url(/assets/img/cnc-1920.jpg);
  background-image: image-set(url(/assets/img/cnc-1920.webp) type("image/webp"), url(/assets/img/cnc-1920.jpg) type("image/jpeg")); }
.slides div:nth-child(3) { background-position: center 30%; animation-delay: 12s;
  background-image: url(/assets/img/robot-1920.jpg);
  background-image: image-set(url(/assets/img/robot-1920.webp) type("image/webp"), url(/assets/img/robot-1920.jpg) type("image/jpeg")); }
.slides div:nth-child(4) { animation-delay: 18s;
  background-image: url(/assets/img/plaat-1920.jpg);
  background-image: image-set(url(/assets/img/plaat-1920.webp) type("image/webp"), url(/assets/img/plaat-1920.jpg) type("image/jpeg")); }
@media (max-width: 700px) {
  .slides div:nth-child(1) { background-image: url(/assets/img/vonken-1280.jpg);
    background-image: image-set(url(/assets/img/vonken-1280.webp) type("image/webp"), url(/assets/img/vonken-1280.jpg) type("image/jpeg")); }
  .slides div:nth-child(2) { background-image: url(/assets/img/cnc-1280.jpg);
    background-image: image-set(url(/assets/img/cnc-1280.webp) type("image/webp"), url(/assets/img/cnc-1280.jpg) type("image/jpeg")); }
  .slides div:nth-child(3) { background-image: url(/assets/img/robot-1280.jpg);
    background-image: image-set(url(/assets/img/robot-1280.webp) type("image/webp"), url(/assets/img/robot-1280.jpg) type("image/jpeg")); }
  .slides div:nth-child(4) { background-image: url(/assets/img/plaat-1280.jpg);
    background-image: image-set(url(/assets/img/plaat-1280.webp) type("image/webp"), url(/assets/img/plaat-1280.jpg) type("image/jpeg")); }
}
@keyframes wissel { 0% { opacity: 0; transform: scale(1.1); } 4% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
.hero::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(12,19,32,.7) 0%, rgba(12,19,32,.15) 30%, rgba(12,19,32,.94) 86%),
  linear-gradient(90deg, rgba(12,19,32,.55), transparent 60%); }
.hero .wrap { position: relative; z-index: 2; padding-bottom: 64px; width: 100%; }
.hero h1 { font-size: clamp(44px, 6.6vw, 104px); line-height: 1; letter-spacing: -.035em; max-width: 12em; }
.hero h1 .r { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .r span { display: block; animation: rise 1.1s cubic-bezier(.16,.8,.12,1) both; }
.hero h1 .r:nth-child(2) span { animation-delay: .14s; }
@keyframes rise { from { transform: translateY(108%); } }
.hero .onder { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; margin-top: 36px; }
.hero p { max-width: 34em; color: var(--zacht); font-size: 18px; animation: fade 1s .5s both; }
.hero p strong { color: var(--wit); font-weight: 500; }
@keyframes fade { from { opacity: 0; } }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-main { display: inline-block; background: var(--vonk); color: #1d0e02; padding: 16px 28px; text-decoration: none; font-weight: 600; border-radius: 99px; transition: background .25s; }
.btn-main:hover { background: #ff8d3a; }
.btn-alt { display: inline-block; border: 1px solid rgba(241,244,247,.35); padding: 15px 26px; text-decoration: none; font-weight: 500; border-radius: 99px; transition: border-color .25s; }
.btn-alt:hover { border-color: var(--wit); }
.sectoren { position: relative; z-index: 2; border-top: 1px solid var(--rand); margin-top: 44px; padding-top: 18px; display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; color: var(--staal); }
.sectoren b { font-weight: 500; color: var(--zacht); }
.voortgang { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.voortgang i { width: 26px; height: 2px; background: rgba(241,244,247,.2); position: relative; overflow: hidden; }
.voortgang i::after { content: ""; position: absolute; inset: 0; background: var(--wit); transform: scaleX(0); transform-origin: left; animation: balk 24s infinite linear; }
.voortgang i:nth-child(2)::after { animation-delay: 6s; } .voortgang i:nth-child(3)::after { animation-delay: 12s; } .voortgang i:nth-child(4)::after { animation-delay: 18s; }
@keyframes balk { 0% { transform: scaleX(0); } 25% { transform: scaleX(1); } 25.01%, 100% { transform: scaleX(0); } }

/* small text link with an arrow */
.pijl { color: var(--wit); text-decoration: none; border-bottom: 1px solid rgba(241,244,247,.35); padding-bottom: 1px; white-space: nowrap; transition: border-color .2s; }
.pijl::after { content: " →"; }
.pijl:hover { border-color: var(--wit); }

/* pinned live panel */
.live { padding: 160px 0 80px; }
h2 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.04; max-width: 14em; }
.live .intro { margin-top: 20px; max-width: 34em; color: var(--staal); }
.scrolly { display: grid; grid-template-columns: 1.05fr .95fr; gap: 96px; margin-top: 80px; }
.paneel { position: sticky; top: 128px; align-self: start; background: linear-gradient(180deg, var(--nacht-3), var(--nacht-2)); border: 1px solid var(--rand); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
.paneel .bar { display: flex; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--rand); font-size: 13px; color: var(--staal); }
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--wit); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--staal); transition: background .3s, box-shadow .3s; }
.paneel[data-stap="3"] .status i { background: var(--vonk); box-shadow: 0 0 0 4px rgba(255,122,26,.18); }
.paneel[data-stap="4"] .status i, .paneel[data-stap="5"] .status i { background: var(--akkoord); box-shadow: 0 0 0 4px rgba(132,211,148,.16); }
.velden { padding: 6px 22px 18px; }
.veld { display: grid; grid-template-columns: 120px 1fr; padding: 13px 0; border-bottom: 1px solid var(--rand); font-size: 14.5px; }
.veld b { font-weight: 400; color: var(--staal); }
.veld span { opacity: .1; filter: blur(3px); transition: opacity .5s, filter .5s, color .3s; }
.paneel:not([data-stap="1"]) .veld span, .no-js .veld span { opacity: 1; filter: none; }
.veld:nth-child(2) span { transition-delay: .08s } .veld:nth-child(3) span { transition-delay: .16s } .veld:nth-child(4) span { transition-delay: .24s } .veld:nth-child(5) span { transition-delay: .32s }
.paneel[data-stap="3"] .veld.twijfel span { color: var(--vonk); }
.mens { margin: 0 22px 20px; padding: 14px 16px; border-radius: 10px; border: 1px dashed var(--rand); font-size: 14.5px; color: var(--staal); transition: all .4s; }
.paneel[data-stap="4"] .mens, .paneel[data-stap="5"] .mens { border: 1px solid rgba(132,211,148,.6); color: var(--wit); background: rgba(132,211,148,.07); }
.erp { margin: -6px 22px 20px; font-size: 13px; color: var(--staal); opacity: 0; transition: opacity .4s; }
.paneel[data-stap="5"] .erp { opacity: 1; }
.stappen { list-style: none; padding: 0; }
.stappen li { min-height: 66vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .5s; }
.stappen li.aan, .no-js .stappen li { opacity: 1; }
.stappen .tijd { color: var(--vonk); font-variant-numeric: tabular-nums; font-size: 14px; }
.stappen h3 { margin-top: 10px; font-size: 30px; line-height: 1.15; }
.stappen p { margin-top: 12px; color: var(--zacht); max-width: 26em; }

/* horizontal case strip */
.cases { position: relative; }
.cases .pin { padding: 100px 0; }
.cases .kop { display: flex; justify-content: space-between; align-items: end; gap: 24px; width: 100%; }
.cases .kop p { color: var(--staal); max-width: 22em; }
.cases .kop .pijl { font-size: 15px; }
/* default (no scroll-driven animations, e.g. older Safari): a normal swipeable row */
.strook { display: flex; gap: 28px; margin-top: 48px; padding-left: max(40px, calc((100vw - 1280px) / 2 + 40px)); padding-right: 40px; padding-bottom: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(40px, calc((100vw - 1280px) / 2 + 40px)); scrollbar-width: thin; scrollbar-color: var(--nacht-3) transparent; }
.strook .kaart { scroll-snap-align: start; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cases { height: 300vh; view-timeline: --cases block; }
    /* top padding keeps the heading clear of the fixed site header */
    .cases .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 80px 0 0; }
    .strook { width: max-content; overflow: visible; padding-bottom: 0; animation: schuif linear both; animation-timeline: --cases; animation-range: contain 0% contain 100%; }
    @keyframes schuif { to { transform: translateX(calc(-100% + 100vw)); } }
  }
}

/* explicit width as well as flex-basis: WebKit otherwise sizes the max-content strip from the unwrapped text */
.kaart { flex: 0 0 min(540px, 84vw); width: min(540px, 84vw); height: min(560px, 62svh); position: relative; isolation: isolate; border-radius: 14px; overflow: hidden; background: var(--nacht-2); display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; border: 1px solid var(--rand); }
.kaart.foto { filter: saturate(.8); }
.kaart.foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,19,32,.1) 20%, rgba(12,19,32,.96) 88%); }
.kaart > * { position: relative; }
.kaart > picture { position: absolute; inset: 0; z-index: -1; }
.kaart > picture img { width: 100%; height: 100%; object-fit: cover; }
.kaart.pos-fiets img { object-position: 62% 40%; }
.kaart.pos-werkplaats img { object-position: center 62%; }
.kaart .wie { font-size: 13px; color: var(--zacht); }
.kaart h3, .kaart h2 { margin-top: 10px; font-size: 28px; line-height: 1.12; max-width: none; }
.kaart p { margin-top: 10px; color: var(--zacht); font-size: 15.5px; max-width: 30em; }
.kaart .chip { margin-top: 18px; align-self: flex-start; font-size: 13px; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(132,211,148,.45); color: var(--akkoord); }

/* steps */
.aanpak { padding: 160px 0; }
.trap { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; }
.trap div { padding: 28px 28px 0 0; border-top: 1px solid var(--rand); display: flex; flex-direction: column; }
.trap .nr { font-family: var(--kop); font-weight: 300; font-size: 15px; color: var(--vonk); }
.trap h3 { margin-top: 14px; font-size: 24px; }
.trap p { margin-top: 10px; font-size: 15.5px; color: var(--zacht); }
.trap p .pijl { display: inline-block; margin-top: 8px; }
.trap .prijs { margin-top: auto; padding-top: 18px; color: var(--wit); font-weight: 500; }
@supports (animation-timeline: view()) {
  .trap div { animation: op linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  .trap div:nth-child(2) { animation-range: entry 15% cover 33%; } .trap div:nth-child(3) { animation-range: entry 20% cover 36%; } .trap div:nth-child(4) { animation-range: entry 25% cover 39%; }
  @keyframes op { from { opacity: 0; transform: translateY(24px); } }
}

.over { padding: 160px 0; border-top: 1px solid var(--rand); }
.over-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 96px; margin-top: 48px; }
.over-tekst p { color: var(--zacht); max-width: 34em; font-size: 18px; }
.over-tekst p + p { margin-top: 20px; }
.feiten div { padding: 20px 0; border-top: 1px solid var(--rand); display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: baseline; }
.feiten div:last-child { border-bottom: 1px solid var(--rand); }
.feiten dt { font-family: var(--kop); font-weight: 560; font-size: 22px; letter-spacing: -.01em; }
.feiten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--zacht); font-size: 15.5px; }
.feiten a { color: var(--wit); }

/* footer */
footer { padding: 180px 0 48px; }
footer h2 { font-size: clamp(42px, 6.4vw, 96px); max-width: 11em; letter-spacing: -.035em; }
footer .ctas { margin-top: 44px; }
.voet { margin-top: 120px; display: grid; gap: 10px; }
.voet-cta + .voet { margin-top: 120px; }
footer:not(:has(.voet-cta)) { margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--rand); }
footer:not(:has(.voet-cta)) .voet { margin-top: 0; }
.voet nav { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 14px; font-size: 14px; }
.voet nav a { color: var(--zacht); text-decoration: none; }
.voet nav a:hover { color: var(--wit); text-decoration: underline; }
.voet small { display: block; color: var(--staal); font-size: 12.5px; max-width: 70em; }
.voet small a { color: var(--zacht); }

/* subpages */
.pagina-kop { padding: 200px 0 40px; }
.label { color: var(--vonk); font-size: 14px; }
.pagina-titel { margin-top: 14px; font-size: clamp(42px, 6vw, 88px); line-height: 1.02; letter-spacing: -.035em; max-width: 13em; }
.pagina-kop .intro { margin-top: 28px; max-width: 34em; color: var(--zacht); font-size: 18px; }
.pagina-kop .ctas { margin-top: 36px; }
.blok { padding: 120px 0; }
.blok.kort { padding: 72px 0 120px; }
.rand-boven { border-top: 1px solid var(--rand); }
.blok .trap { margin-top: 48px; }
.twee-kol { display: grid; grid-template-columns: .85fr 1.15fr; gap: 96px; align-items: start; }
.twee-kol h2 { font-size: clamp(30px, 3.4vw, 48px); }

/* cases page */
.case-lijst { padding: 40px 0 40px; }
.case { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; padding: 56px 0; border-top: 1px solid var(--rand); }
.case:first-child { border-top: 0; }
.case .kaart { width: auto; height: 520px; position: sticky; top: 110px; }
.case-feiten div { padding: 22px 0; border-top: 1px solid var(--rand); }
.case-feiten div:first-child { border-top: 0; padding-top: 6px; }
.case-feiten dt { color: var(--vonk); font-size: 14px; }
.case-feiten dd { margin: 8px 0 0; color: var(--zacht); font-size: 17px; max-width: 34em; }

/* contact page */
.keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.keuze { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 36px; border: 1px solid var(--rand); border-radius: 14px; background: linear-gradient(180deg, var(--nacht-3), var(--nacht-2)); }
.keuze .nr { color: var(--vonk); font-size: 14px; }
.keuze h2 { font-size: clamp(28px, 2.8vw, 40px); }
.keuze p { color: var(--zacht); max-width: 28em; }
.keuze .btn-main, .keuze .btn-alt { margin-top: 8px; }
.keuze .pijl { font-size: 15px; }

/* privacy page and other running text */
.tekst { max-width: 760px; }
.tekst h2 { font-size: 26px; margin-top: 44px; }
.tekst h2:first-child { margin-top: 0; }
.tekst p { margin-top: 12px; color: var(--zacht); }
.tekst a, .bronnen a { color: var(--wit); }
.bijgewerkt { margin-top: 44px !important; font-size: 14px; color: var(--staal) !important; }
.bronnen div { grid-template-columns: 200px 1fr; }
.bronnen dt { font-size: 19px; }
.niet-gevonden { min-height: 70svh; }

@media (max-width: 900px) {
  .site-kop nav a:not(.btn) { display: none; }
  .wrap { padding: 0 20px; }
  .hero .onder { grid-template-columns: 1fr; gap: 28px; }
  .voortgang { display: none; }
  .sectoren { gap: 6px 16px; }
  .live { padding-top: 110px; }
  .scrolly { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  /* compact sticky panel on phones; steps scroll underneath into the lower half of the screen */
  .paneel { top: 76px; z-index: 2; border-radius: 12px; }
  .paneel .veld.mob-weg { display: none; }
  .veld { grid-template-columns: 96px 1fr; padding: 9px 0; font-size: 13.5px; }
  .mens { margin: 0 16px 14px; padding: 10px 12px; font-size: 13.5px; }
  .velden { padding: 4px 16px 12px; }
  .stappen li { min-height: 78vh; justify-content: flex-end; padding-bottom: 8vh; }
  .stappen h3 { font-size: 24px; }
  .strook { padding-left: 20px; padding-right: 20px; scroll-padding-left: 20px; }
  .kaart { padding: 24px; }
  .trap { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .over { padding: 100px 0; }
  .over-grid { grid-template-columns: 1fr; gap: 40px; }
  .feiten div { grid-template-columns: 120px 1fr; }
  .pagina-kop { padding-top: 140px; }
  .blok { padding: 80px 0; }
  .blok.kort { padding: 48px 0 80px; }
  .twee-kol { grid-template-columns: 1fr; gap: 32px; }
  .case { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .case .kaart { position: relative; top: auto; height: min(480px, 70svh); }
  .keuzes { grid-template-columns: 1fr; }
  .keuze { padding: 28px 24px; }
  .bronnen div { grid-template-columns: 1fr; gap: 6px; }
  footer { padding-top: 120px; }
  footer:not(:has(.voet-cta)) { margin-top: 40px; padding-top: 40px; }
  .voet, .voet-cta + .voet { margin-top: 80px; }
}
/* subpage step rows have longer text, so one column on phones (the homepage keeps two, as in the sketch) */
@media (max-width: 600px) {
  .blok .trap { grid-template-columns: 1fr; }
  .blok .trap div { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .slides div:first-child { opacity: 1; }
}

/* Cookie banner: both choices equally prominent, as the Dutch DPA asks. */
.cookie { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; background: var(--nacht-3); border: 1px solid var(--rand); border-radius: 14px; padding: 18px 20px; display: grid; gap: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.45); font-size: 15px; line-height: 1.5; color: var(--zacht); }
.cookie a { color: var(--wit); }
.cookie div { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie button { flex: 1 1 140px; font: inherit; font-weight: 600; padding: 12px 18px; border-radius: 99px; cursor: pointer; border: 1px solid rgba(241,244,247,.35); background: transparent; color: var(--wit); }
.cookie button:hover { border-color: var(--wit); }
.voet button.link { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }