/* ETIB Cok, Alphen aan den Rijn. Ontwerp-DNA: het besturingsschema. Schema-raster met signaallijn, Jost + IBM Plex Mono, draden met stippen, het signaal loopt. */
:root{--mag:#E1007A;--mag-d:#C4006A;--mag-t:#B8005F;--ink:#141416;--kast:#F1F2F4;--antr:#1B1C21;--antr-l:#26272D;--hair:#C9CBD1;--mute:#4F525A;--licht:#D5D6DB;--wit:#fff;--ease:cubic-bezier(.22,.61,.36,1);--gut:clamp(20px,5vw,64px);--goot:clamp(28px,4vw,56px);--wrap:1200px;--nav-h:84px;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font:400 17px/1.6 Jost,system-ui,"Segoe UI",sans-serif;color:var(--ink);background:var(--wit);overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:Jost,system-ui,sans-serif;font-weight:500;line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,5vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
h3{font-size:clamp(1.25rem,1.8vw,1.5rem);letter-spacing:-.01em;line-height:1.2}
p+p{margin-top:1em}
.lead{font-size:1.18rem;line-height:1.55;max-width:58ch}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-weight:500}
.tabular{font-variant-numeric:tabular-nums}
strong,b{font-weight:500}

/* schema: verticale signaallijn op de linkerkantlijn, secties sluiten er als knooppunt op aan */
.sec{padding:0}
.schema{padding:clamp(3.25rem,7vw,5.5rem) 0;border-left:1px solid var(--hair);padding-left:var(--goot)}
.sec.kast{background:var(--kast)}
.sec.antr{background:var(--antr);color:#fff}
.sec.antr .schema{border-color:rgba(255,255,255,.28)}
.sec.antr p,.sec.antr li,.sec.antr .lead,.sec.antr dd{color:var(--licht)}
.sec.antr h2,.sec.antr h3,.sec.antr b,.sec.antr dt{color:#fff}
.ref{font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mag-t);display:inline-block}
.sec.antr .ref{color:#fff}
.knoop{position:relative}
.knoop h1,.knoop h2{margin-top:14px;max-width:22ch}
.knoop .lead{margin-top:16px}
.knoop::before{content:"";position:absolute;left:calc(-1 * var(--goot) - 5px);top:.05em;width:9px;height:9px;border-radius:50%;background:var(--mag);opacity:0;transition:opacity .3s var(--ease) .55s}
.knoop::after{content:"";position:absolute;left:calc(-1 * var(--goot));top:calc(.05em + 4px);width:calc(var(--goot) - 14px);height:1px;background:var(--mag);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease) .1s}
.knoop.is-in::before,.no-js .knoop::before{opacity:1}
.knoop.is-in::after,.no-js .knoop::after{transform:none}
@media (max-width:900px){.schema{border-left:0;padding-left:0}.knoop::before,.knoop::after{display:none}}
@media (prefers-reduced-motion:reduce){.knoop::before{opacity:1;transition:none}.knoop::after{transform:none;transition:none}}

/* lijsten als klemmenstrook */
ol.klem{list-style:none;margin-top:26px;border-top:1px solid var(--hair)}
ol.klem li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 18px;border-bottom:1px solid var(--hair);padding:14px 0}
ol.klem .k{font:500 .78rem/1.7 var(--mono);letter-spacing:.06em;color:var(--mute);border-right:1px solid var(--hair);padding-right:10px}
ol.klem b{display:block}
ol.klem p{color:var(--mute);font-size:.98rem;margin-top:2px}
.sec.antr ol.klem,.sec.antr ol.klem li{border-color:rgba(255,255,255,.28)}
.sec.antr ol.klem .k{color:var(--licht);border-color:rgba(255,255,255,.28)}
.sec.antr ol.klem p{color:var(--licht)}
ol.klem.strak li{padding:10px 0}
ol.klem.strak .k{line-height:1.6}

/* I/O-kolom (8/4-split) */
.io{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:36px}
.io>*{min-width:0}
.io-kolom{background:var(--kast);border-top:2px solid var(--mag);padding:22px 24px 26px}
.sec.kast .io-kolom{background:#fff}
.sec.antr .io-kolom{background:var(--antr-l)}
.io-kolom .ref{color:var(--mute)}
.sec.antr .io-kolom .ref{color:var(--licht)}
.io-kolom dl{margin-top:14px}
.io-kolom dl div{padding:10px 0;border-bottom:1px solid var(--hair)}
.io-kolom dl div:last-child{border-bottom:0}
.sec.antr .io-kolom dl div{border-color:rgba(255,255,255,.22)}
.io-kolom dt{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.io-kolom dd{margin-top:5px;font-size:1rem;line-height:1.4}
.io-kolom ul{list-style:none;margin-top:14px}
.io-kolom ul li{position:relative;padding:8px 0 8px 20px;border-bottom:1px solid var(--hair);font-size:1rem}
.io-kolom ul li:last-child{border-bottom:0}
.io-kolom ul li::before{content:"";position:absolute;left:0;top:17px;width:8px;height:8px;border-radius:50%;background:var(--mag)}
.sec.antr .io-kolom ul li{border-color:rgba(255,255,255,.22)}
.io-kolom .btn{margin-top:18px}
@media (max-width:900px){.io{grid-template-columns:minmax(0,1fr)}}

/* beeld als documentatie: kader met titelblok */
.fig{margin:0;border:1px solid var(--hair);background:var(--kast)}
.fig .beeld{aspect-ratio:3/2;overflow:hidden;background:var(--kast)}
.fig.staand .beeld{aspect-ratio:4/5}
.fig.breed .beeld{aspect-ratio:16/9}
.fig img{width:100%;height:100%;object-fit:cover}
.fig figcaption{display:flex;gap:14px;align-items:baseline;padding:10px 14px;border-top:1px solid var(--hair);font:500 .74rem/1.5 var(--mono);letter-spacing:.06em;color:var(--mute);background:#fff}
.fig figcaption b{color:var(--mag-t);font-weight:500;flex:none}
.sec.antr .fig{border-color:rgba(255,255,255,.28);background:var(--antr-l)}
.sec.antr .fig figcaption{background:var(--antr-l);border-color:rgba(255,255,255,.28);color:var(--licht)}
.sec.antr .fig figcaption b{color:#fff}

/* knoppen */
.btn{display:inline-block;font:500 1rem/1 Jost,sans-serif;letter-spacing:.01em;text-decoration:none;padding:16px 26px;background:var(--mag-d);color:#fff;border:1px solid var(--mag-d);cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
.btn:hover{background:#A80059;border-color:#A80059}
.btn.lijn{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.lijn:hover{background:var(--ink);color:#fff}
.btn.lijn.wit{color:#fff;border-color:#fff}
.btn.lijn.wit:hover{background:#fff;color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:30px}
.tekstlink{font:500 .95rem Jost,sans-serif;text-decoration:none;border-bottom:1px solid var(--mag);padding-bottom:2px;position:relative;padding-right:16px}
.tekstlink::after{content:"";position:absolute;right:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--mag)}
.tekstlink:hover{border-color:var(--ink)}

/* navigatie: witte balk (logo met witte matte), hoofdactie rechts */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;gap:28px;min-height:var(--nav-h)}
.logo{display:block;flex:none;background:#fff}
.logo img{height:56px;width:auto}
.nav nav{margin-left:auto}
.menu{list-style:none;display:flex;align-items:center;gap:26px}
.menu a{font:500 .98rem/1 Jost,sans-serif;text-decoration:none;padding:10px 0;border-bottom:2px solid transparent;display:inline-block}
.menu a:hover,.menu a[aria-current="page"]{border-color:var(--mag)}
.menu .cta{margin-left:6px}
.menu .cta a{border:1px solid var(--mag-d);background:var(--mag-d);color:#fff;padding:13px 18px;font-family:var(--mono);font-size:.82rem;letter-spacing:.04em}
.menu .cta a:hover{background:#A80059;border-color:#A80059}
.hamb{display:none;margin-left:auto;width:48px;height:48px;border:1px solid var(--ink);background:#fff;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.hamb span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
body.nav-open .hamb span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.nav-open .hamb span:nth-child(2){opacity:0}
body.nav-open .hamb span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:1100px){.menu{gap:18px}.menu a{font-size:.92rem}.menu .cta a{font-size:.76rem;padding:12px 14px}}
@media (max-width:900px){
  .hamb{display:flex}
  .logo img{height:48px}
  .nav nav{position:fixed;left:0;right:0;top:var(--nav-b,84px);bottom:0;visibility:hidden;pointer-events:none;transition:visibility 0s .3s;margin:0}
  body.nav-open .nav nav{visibility:visible;pointer-events:auto;transition-delay:0s}
  .menu{position:absolute;inset:0;background:#fff;flex-direction:column;align-items:stretch;padding:16px var(--gut) calc(48px + env(safe-area-inset-bottom));gap:0;opacity:0;transform:translateY(-10px);transition:opacity .25s var(--ease),transform .3s var(--ease);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  .menu li{border-bottom:1px solid var(--hair)}
  .menu a{display:block;padding:18px 0;font-size:1.25rem;border-bottom:0}
  .menu a[aria-current="page"]{border-left:3px solid var(--mag);padding-left:16px}
  .menu .cta{margin:18px 0 0;border:0}
  .menu .cta a{display:inline-block;font-size:.95rem;padding:16px 22px}
  body.nav-open .menu{opacity:1;transform:none}
  html.nav-open{overflow:hidden}
}

/* hero: editoriale split 7/5 op wit met de signaallijn */
.hero .schema{padding-top:clamp(2.5rem,5vw,3.75rem);padding-bottom:clamp(2.5rem,5vw,3.75rem)}
.hero .split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero .split>*{min-width:0}
.hero h1{max-width:16ch}
.hero .lead{margin-top:18px;max-width:52ch}
.hero .btns{margin-top:26px}
.hero .fig{margin:0}
.hero.sub .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.hero.sub h1{font-size:clamp(2.2rem,4.4vw,3.5rem)}
@media (max-width:900px){.hero .split,.hero.sub .split{grid-template-columns:minmax(0,1fr)}.hero .fig{max-width:560px}}

/* feitenstrook: vier klemmen */
.feiten{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--kast)}
.feiten .schema{padding:0 0 0 var(--goot)}
.feiten ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.feiten li{padding:20px 22px 22px 0;border-left:1px solid var(--hair);padding-left:22px;position:relative}
.feiten li:first-child{border-left:0;padding-left:0}
.feiten .k{display:block;font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.feiten b{display:block;margin-top:8px;font-size:1.12rem;line-height:1.3;font-weight:500}
@media (max-width:760px){.feiten ul{grid-template-columns:repeat(2,minmax(0,1fr))}.feiten li{border-top:1px solid var(--hair)}.feiten li:nth-child(-n+2){border-top:0}.feiten li:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:420px){.feiten ul{grid-template-columns:minmax(0,1fr)}.feiten li{border-left:0;padding-left:0}.feiten li:nth-child(2){border-top:1px solid var(--hair)}}

/* diensten: genummerde rijen met beeld */
.diensten{list-style:none;margin-top:36px;border-top:1px solid var(--hair)}
.diensten li{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,300px);gap:0 clamp(20px,3vw,40px);align-items:center;padding:28px 0;border-bottom:1px solid var(--hair)}
.diensten li>*{min-width:0}
.diensten .k{font:500 .82rem/1.7 var(--mono);letter-spacing:.08em;color:var(--mute);border-right:1px solid var(--hair);align-self:stretch;padding-top:4px}
.diensten p{margin-top:10px;color:var(--mute);max-width:58ch}
.diensten .tekstlink{display:inline-block;margin-top:16px}
.diensten .fig{margin:0}
@media (max-width:860px){.diensten li{grid-template-columns:56px minmax(0,1fr)}.diensten .fig{grid-column:2;margin-top:18px;max-width:420px}}

/* platformtabel */
.tabel{width:100%;border-collapse:collapse;margin-top:26px;font-size:1rem}
.tabel th{text-align:left;font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:0 16px 12px 0;border-bottom:1px solid var(--ink)}
.tabel td{padding:14px 16px 14px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.tabel td:first-child{font-weight:500;white-space:nowrap}
.tabel td:last-child,.tabel th:last-child{padding-right:0}
@media (max-width:640px){
  .tabel thead{display:none}
  .tabel tr{display:block;padding:14px 0;border-bottom:1px solid var(--hair)}
  .tabel td{display:block;padding:3px 0;border:0;white-space:normal}
  .tabel td:first-child{font-size:1.1rem;padding-bottom:6px}
  .tabel td[data-k]::before{content:attr(data-k) ": ";font:500 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
}

/* beeldband met parallax en solide paneel */
.band{position:relative;overflow:hidden;background:var(--antr);min-height:420px;display:flex;align-items:center}
.band img.parallax{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;will-change:transform}
.band .wrap{position:relative;z-index:1;width:100%;padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(3rem,7vw,5rem)}
.band .paneel{background:var(--antr);color:#fff;padding:clamp(24px,4vw,44px);max-width:640px;border-top:2px solid var(--mag)}
.band .paneel p{font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.4;font-weight:400;color:#fff;letter-spacing:-.01em}
.band .paneel .ref{color:#fff;margin-bottom:12px}
@media (prefers-reduced-motion:reduce){.parallax{transform:none!important}}
@media (max-width:640px){.parallax{transform:none!important}.band img.parallax{top:0;height:100%}}

/* voor en na */
.voorna{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:36px}
.voorna>div{border-top:2px solid var(--hair);padding-top:18px}
.voorna>div.na{border-top-color:var(--mag)}
.voorna h3{margin-top:8px}
.voorna ol.klem{margin-top:16px}
@media (max-width:760px){.voorna{grid-template-columns:minmax(0,1fr)}}

/* ladderdiagram: de werkwijze als sporten tussen twee rails (signatuur) */
.ladderwrap{position:relative;margin-top:44px}
.ladder{list-style:none;position:relative;padding:8px 0}
.ladder::before,.ladder::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.4)}
.ladder::before{left:22px}
.ladder::after{right:22px}
.ladderwrap .railkop{position:absolute;top:-22px;font:500 .7rem/1 var(--mono);letter-spacing:.12em;color:var(--licht)}
.ladderwrap .railkop.l{left:14px}
.ladderwrap .railkop.r{right:14px}
.ladder li{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;align-items:center;gap:0 22px;padding:22px 0;position:relative}
.ladder li+li{border-top:1px solid rgba(255,255,255,.12)}
.ladder .contact{position:relative;height:24px}
.ladder .contact::before,.ladder .contact::after{content:"";position:absolute;top:12px;height:1px;background:rgba(255,255,255,.55)}
.ladder .contact::before{left:22px;width:calc(50% - 22px - 14px)}
.ladder .contact::after{right:0;width:calc(50% - 14px)}
.ladder .contact i{position:absolute;left:calc(50% - 14px);top:12px;width:28px;height:1px;background:#fff;transform-origin:left center;transform:rotate(-38deg);transition:transform .45s var(--ease)}
.ladder .contact .pool{position:absolute;top:9px;width:7px;height:7px;border-radius:50%;background:#fff}
.ladder .contact .pool.a{left:calc(50% - 17px)}
.ladder .contact .pool.b{left:calc(50% + 11px)}
.ladder .spoel{position:relative;height:24px}
.ladder .spoel::before{content:"";position:absolute;top:12px;left:0;right:calc(50% + 14px);height:1px;background:rgba(255,255,255,.55)}
.ladder .spoel::after{content:"";position:absolute;top:12px;left:calc(50% + 14px);right:22px;height:1px;background:rgba(255,255,255,.55)}
.ladder .spoel i{position:absolute;left:calc(50% - 14px);top:-2px;width:28px;height:28px;border:1px solid #fff;border-radius:50%;background:transparent;transition:background .35s var(--ease),border-color .35s var(--ease)}
.ladder .stap .n{font:500 .74rem/1 var(--mono);letter-spacing:.14em;color:var(--licht)}
.ladder .stap h3{margin-top:6px;color:#fff}
.ladder .stap p{margin-top:6px;max-width:60ch;font-size:1rem}
.ladder.is-in li i,.no-js .ladder li i{transition-delay:var(--d,0s)}
.ladder.is-in .contact i,.no-js .ladder .contact i{transform:rotate(0)}
.ladder.is-in .spoel i,.no-js .ladder .spoel i{background:var(--mag);border-color:var(--mag)}
.ladder li:nth-child(1) i{--d:.1s}.ladder li:nth-child(2) i{--d:.5s}.ladder li:nth-child(3) i{--d:.9s}.ladder li:nth-child(4) i{--d:1.3s}.ladder li:nth-child(5) i{--d:1.7s}
.ladder li .spoel i{--d:calc(var(--d) + .25s)}
@media (max-width:760px){.ladder li{grid-template-columns:76px minmax(0,1fr) 76px;gap:0 12px}.ladder::before{left:8px}.ladder::after{right:8px}.ladder .contact::before{left:8px;width:calc(50% - 8px - 14px)}.ladder .spoel::after{right:8px}.ladderwrap .railkop{display:none}}
@media (prefers-reduced-motion:reduce){.ladder .contact i{transform:rotate(0);transition:none}.ladder .spoel i{background:var(--mag);border-color:var(--mag);transition:none}}

/* rail: toepassingen */
[data-rail]{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:6px;max-width:100%}
[data-rail].is-drag{cursor:grabbing}
.no-js [data-rail]{overflow-x:auto}
[data-rail-track]{display:flex;gap:24px;width:max-content;will-change:transform}
[data-rail-track]>*{flex:none;width:clamp(250px,26vw,360px)}
[data-rail-track] img{-webkit-user-drag:none;pointer-events:none}
.rail{margin-top:36px}
.kaart{display:block;text-decoration:none;color:inherit;border:1px solid var(--hair);background:#fff}
.kaart .beeld{aspect-ratio:3/2;overflow:hidden;background:var(--kast)}
.kaart img{width:100%;height:100%;object-fit:cover}
.kaart .tekst{padding:16px 18px 20px;border-top:1px solid var(--hair)}
.kaart .k{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.kaart h3{margin-top:8px;font-size:1.15rem}
.kaart p{margin-top:6px;color:var(--mute);font-size:.95rem}
.rail-voet{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;font:500 .78rem var(--mono);letter-spacing:.06em;color:var(--mute)}
.rail-pijlen{display:flex;gap:8px}
.rail-pijlen button{width:44px;height:44px;border:1px solid var(--ink);background:#fff;cursor:pointer;font:500 1rem var(--mono);color:var(--ink)}
.rail-pijlen button:hover{background:var(--ink);color:#fff}
.rail-pijlen button:disabled{opacity:.35;cursor:default}

/* veelgestelde vragen */
.vragen{margin-top:30px;border-top:1px solid var(--hair);max-width:820px}
.vragen details{border-bottom:1px solid var(--hair)}
.vragen summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:76px minmax(0,1fr) 28px;gap:0 18px;align-items:baseline;padding:18px 0;font-size:1.15rem;font-weight:500}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary .k{font:500 .78rem/1.6 var(--mono);letter-spacing:.06em;color:var(--mute)}
.vragen summary .t{position:relative;width:14px;height:14px;justify-self:end;align-self:center}
.vragen summary .t::before,.vragen summary .t::after{content:"";position:absolute;background:var(--mag);left:0;top:6px;width:14px;height:2px}
.vragen summary .t::after{transform:rotate(90deg);transition:transform .25s var(--ease)}
.vragen details[open] summary .t::after{transform:rotate(0)}
.vragen .a{padding:0 0 20px 94px;color:var(--mute);max-width:64ch}
@media (max-width:640px){.vragen summary{grid-template-columns:52px minmax(0,1fr) 24px;font-size:1.05rem}.vragen .a{padding-left:0}}

/* conversieband: storing melden */
.storing .schema{padding-top:clamp(2.75rem,6vw,4.5rem);padding-bottom:clamp(2.75rem,6vw,4.5rem)}
.storing .kolommen{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:start}
.storing .kolommen>*{min-width:0}
.tels{list-style:none;margin-top:8px;border-top:1px solid rgba(255,255,255,.28)}
.tels li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:0 16px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.28)}
.tels .k{font:500 .74rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--licht)}
.tels a{font:500 clamp(1.3rem,2.4vw,1.8rem)/1.2 Jost,sans-serif;text-decoration:none;color:#fff;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tels a:hover{color:var(--mag)}
.sec.kast .tels,.sec.kast .tels li{border-color:var(--hair)}
.sec.kast .tels .k{color:var(--mute)}
.sec.kast .tels a{color:var(--ink)}
.sec.kast .tels a:hover{color:var(--mag-t)}
@media (max-width:860px){.storing .kolommen{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.tels li{grid-template-columns:minmax(0,1fr)}}

/* tekstpagina's */
.twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:36px;align-items:start}
.twee>*{min-width:0}
@media (max-width:760px){.twee{grid-template-columns:minmax(0,1fr)}}
.tekst{max-width:66ch}
.tekst h3{margin-top:28px}
.tekst p{margin-top:12px}
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}
.figs .fig{margin:0}
@media (max-width:640px){.figs{grid-template-columns:minmax(0,1fr)}}

/* contactpersonen */
.personen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:30px}
.personen li{border:1px solid var(--hair);border-top:2px solid var(--mag);padding:22px 24px 26px;background:#fff}
.personen .k{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.personen b{display:block;margin-top:8px;font-size:1.3rem;font-weight:500}
.personen a{display:block;margin-top:10px;text-decoration:none;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--mag);width:max-content;max-width:100%}
.personen a:hover{border-color:var(--ink)}
@media (max-width:760px){.personen{grid-template-columns:minmax(0,1fr)}}

/* formulier */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin-top:24px}
.form label{display:block;font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.form input,.form textarea,.form select{width:100%;font:400 1rem/1.4 Jost,sans-serif;color:var(--ink);background:#fff;border:1px solid var(--ink);padding:13px 14px;border-radius:0}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--mag);outline-offset:1px}
.form .vol{grid-column:1/-1}
.form .status{font-size:.95rem;color:var(--mute);grid-column:1/-1}
@media (max-width:640px){.form{grid-template-columns:minmax(0,1fr)}}
.adres{list-style:none;margin-top:18px}
.adres li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:0 16px;padding:12px 0;border-bottom:1px solid var(--hair)}
.adres .k{font:500 .72rem/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.adres a{text-decoration:none;border-bottom:1px solid var(--mag)}
.adres a:hover{border-color:var(--ink)}
@media (max-width:420px){.adres li{grid-template-columns:minmax(0,1fr)}}

/* footer: wit kolommenblok */
.footer{border-top:1px solid var(--hair);background:#fff;padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.footer .kol{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.footer .kol>*{min-width:0}
.footer .logo img{height:64px}
.footer .tag{margin-top:16px;color:var(--mute);max-width:36ch;font-size:.98rem}
.footer h4{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.footer ul{list-style:none}
.footer li{padding:5px 0}
.footer li a{text-decoration:none}
.footer li a:hover{color:var(--mag-t)}
.footer address{font-style:normal}
.footer .onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:40px;padding-top:18px;border-top:1px solid var(--hair);font:500 .74rem/1.6 var(--mono);letter-spacing:.06em;color:var(--mute)}
.footer .onder a{text-decoration:none}
.footer .onder a:hover{color:var(--mag-t)}
@media (max-width:860px){.footer .kol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.footer .kol{grid-template-columns:minmax(0,1fr)}}

/* reveal (vaste basis) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv.st1{transition-delay:.1s}.rv.st2{transition-delay:.2s}.rv.st3{transition-delay:.3s}
.rv-clip>*{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease)}
.rv-clip.is-in>*{clip-path:inset(0 0 0 0)}
.no-js .rv,.no-js .rv-clip>*{opacity:1;transform:none;clip-path:none}
@media (prefers-reduced-motion:reduce){.rv,.rv-clip>*{opacity:1;transform:none;clip-path:none;transition:none}}
:focus-visible{outline:2px solid var(--mag);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}