/* Versie 2 · Modern. Alles hangt onder .n of een eigen .n-blok: de kop, de voet en het menu van het ontwerp blijven buiten schot.
   De maten voor elk blok staan bij het blok; samen met scripts/blokken/v2.mjs wordt dit later één Astro-component per blok. */

/* ---------- gedeeld ---------- */
.n{
  --oranje:#ff671f;--oranje-hover:#e75c1c;--op-oranje:#1c1d20;--antraciet:#34353a;--grijs:#f4f5f7;--blauwgrijs:#c8d5dc;--leigrijs:#54595f;--wit:#fff;--lijn:#e3e5e8;--licht:#d9dde1;
  --sans:'Poppins','Poppins Fallback',system-ui,sans-serif;--mono:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,monospace;
  --in:clamp(22px,3.8vw,72px);--lijf:clamp(16px,1.18vw,19px);--h2:clamp(30px,3.6vw,52px);
  margin:0 12px 12px;font-family:var(--sans);font-size:var(--lijf);line-height:1.7;color:var(--leigrijs);hyphens:none;-webkit-hyphens:none;
}
.n h1,.n h2,.n h3,.n p,.n ul,.n ol,.n figure{margin:0;padding:0}
.n ul,.n ol{list-style:none}
.n h1,.n h2,.n h3{color:var(--antraciet);font-weight:600;line-height:1.04;letter-spacing:-.03em;text-wrap:balance;hyphens:none}
.n p{text-wrap:pretty}
.n img{display:block;max-width:100%}
.n .heel{white-space:nowrap}
.n strong{font-weight:600;color:var(--antraciet)}
.n.vlak,.n .vlak{border-radius:32px;background:var(--wit);overflow:hidden}
.n.vlak-donker,.n .vlak-donker{background:var(--antraciet);color:var(--licht)}
.n.vlak-donker h1,.n.vlak-donker h2,.n.vlak-donker h3,.n .vlak-donker h1,.n .vlak-donker h2,.n .vlak-donker h3,.n.vlak-donker strong,.n .vlak-donker strong{color:var(--wit)}
.n.vlak-oranje,.n .vlak-oranje{background:var(--oranje);color:var(--op-oranje)}
.n.vlak-oranje h1,.n.vlak-oranje h2,.n.vlak-oranje h3,.n.vlak-oranje strong{color:var(--op-oranje)}
.n.vlak-oranje a:focus-visible{outline-color:var(--op-oranje)}
.n .grijs{filter:grayscale(1) contrast(1.06)}

/* Een kop rekent zijn maat af op zijn langste woord: --w komt uit de functie. */
.n-pagina h1,.n-kennismaken h1,.n-tekst h2,.n-lijst h2,.n-band h2,.n-split h2,.n-sectoren h2,.n-maten h2,.n-apps h2,.n-formulier h2{font-size:min(var(--maat),calc((100vw - 68px)/(var(--w,1)*.63)))}

.n .knop{display:inline-flex;align-items:center;gap:16px;height:56px;padding:0 8px 0 24px;border:0;border-radius:999px;background:var(--oranje);color:var(--op-oranje);font:600 14px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s}
.n .knop:hover{background:var(--oranje-hover);color:var(--op-oranje)}
.n .knop .rond{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--op-oranje);color:var(--oranje)}
.n .knop-donker{background:var(--antraciet);color:var(--wit)}
.n .knop-donker:hover{background:#26272b;color:var(--wit)}
.n .knop-donker .rond{background:var(--oranje);color:var(--op-oranje)}
.n .knop-tel{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 22px;border-radius:999px;border:1.5px solid currentColor;color:var(--wit);font:600 15px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.n .knop-tel:hover{background:var(--wit);color:var(--antraciet)}
.n .knop-tel.mono{font:600 14px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.n .meer{display:inline-flex;align-items:center;gap:12px;color:var(--antraciet);font:600 14px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.n .meer .rond{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--oranje);color:var(--op-oranje);transition:transform .15s}
.n .meer:hover{color:var(--antraciet)}
.n .meer:hover .rond{transform:translateX(3px)}
.n .vinken li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--blauwgrijs);color:var(--antraciet);line-height:1.45}
.n .vinken svg{flex:none;margin-top:3px;color:var(--oranje)}
@media (max-width:480px){
  .n .knop{white-space:normal;height:auto;min-height:56px;padding-top:8px;padding-bottom:8px;line-height:1.25;letter-spacing:.03em}
  .n p,.n li{overflow-wrap:break-word}
}
@media (prefers-reduced-motion:reduce){.n *,.n *::before,.n *::after{animation:none!important;transition:none!important}}

/* ---------- opening op de homepage: de kabel gaat in de knop ---------- */
/* --h = hoogte van de knop, --k = hoogte van het stekkerbeeld, --u = één pixel van het bronbeeld. Alles rekent hieruit, dus de aansluiting klopt op elke breedte. */
.n-held{--h:clamp(66px,6.5vw,112px);--k:var(--h);--u:calc(var(--k)/223);--doorsnede:linear-gradient(to bottom,rgba(67,55,56,0) 31.17%,rgba(72,54,47,.24) 31.61%,rgba(81,52,34,.64) 32.06%,rgba(131,86,54,.99) 32.51%,#cf8e59 32.96%,#e38d3c 33.41%,#f18822 34.30%,#f78b2a 35.65%,#f99438 37%,#f7a056 38.34%,#f9ad75 39.69%,#f8b68c 41.48%,#f7af82 43.27%,#f79e65 45.07%,#f78d43 46.86%,#f68123 48.65%,#f37911 50.45%,#f2710b 52.24%,#ed6c06 54.04%,#e76506 55.83%,#df5b06 57.62%,#d05106 59.42%,#c14709 61.21%,#ac3a05 63%,#942c09 64.8%,#7e1e06 66.59%,#661407 68.39%,#500d08 69.73%,rgba(71,10,10,.99) 70.18%,rgba(60,9,10,.96) 70.63%,rgba(43,6,6,.8) 71.08%,rgba(27,2,2,.44) 71.52%,rgba(42,23,25,.07) 71.97%,rgba(57,45,45,.01) 72.42%);position:relative;padding:clamp(28px,3.4vw,64px) var(--in) clamp(36px,4vw,72px)}
.n-held h1{font-size:clamp(40px,8.25vw,160px);line-height:1;letter-spacing:-.04em;text-wrap:initial}
.n-held .kop-rij{display:grid}
.n-held .kop-rij>*{grid-area:1/1}
.n-held .zij{justify-self:end;align-self:end;width:clamp(300px,27vw,440px);font-size:clamp(16px,1.25vw,20px);line-height:1.65;padding-bottom:calc(min(8.25vw,160px)*.145)}
.n-held .vraag{margin-top:1.1em;color:var(--wit);font-weight:600}
.n-held .knop-tel{margin-top:.9em}
.n-held .aansluiting{position:relative;display:inline-flex;margin-top:clamp(28px,3.4vw,64px)}
.n-held .knop{position:relative;z-index:2;height:var(--h);padding:0 calc((var(--h) - var(--h)*.74)/2) 0 calc(var(--h)*.46);gap:calc(var(--h)*.32);font-size:clamp(14px,1.45vw,23px);letter-spacing:.06em}
.n-held .knop .rond{width:calc(var(--h)*.74);height:calc(var(--h)*.74)}
.n-held .knop .rond svg{width:38%;height:38%}
.n-held .kabel{position:absolute;z-index:1;left:calc(100% - var(--h)*.27);top:50%;height:var(--k);width:calc(var(--u)*9000);translate:0 -50%;pointer-events:none;transition:transform .28s cubic-bezier(.3,1.5,.5,1);animation:n-insteken 1s cubic-bezier(.16,.9,.3,1) backwards .15s}
.n-held .kabel .strook{position:absolute;left:calc(var(--u)*900);top:0;bottom:0;right:0;background:var(--doorsnede)}
.n-held .stekker{position:absolute;left:0;top:0;width:calc(var(--u)*1425);height:var(--k);max-width:none;-webkit-mask-image:linear-gradient(to right,#000 70.18%,transparent 98.25%);mask-image:linear-gradient(to right,#000 70.18%,transparent 98.25%)}
.n-held .aansluiting:hover .kabel,.n-held .aansluiting:focus-within .kabel{transform:translateX(calc(var(--h)*-.07))}
@keyframes n-insteken{from{transform:translateX(38vw)}to{transform:none}}
.n-held .haak{display:none}
@media (max-width:1179px){
  .n-held h1{font-size:9vw}
  .n-held .kop-rij{display:block}
  .n-held .zij{width:auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 clamp(24px,5vw,56px);align-items:end;margin-top:clamp(24px,3.4vw,40px);padding:0;max-width:none}
  .n-held .vraag{margin:0;grid-column:2}
  .n-held .zij p:first-child{grid-row:1 / span 2}
  .n-held .knop-tel{margin-top:10px;grid-column:2;justify-self:start}
}
/* Telefoon: stekker van boven, met een bocht vanaf de rechterrand. */
@media (max-width:639px){
  .n-held{--h:64px;--k:46px;padding:26px 22px 26px}
  .n-held h1{font-size:min(8.85vw,52px);letter-spacing:-.035em;line-height:1.02}
  .n-held .zij{display:block;margin-top:20px;font-size:16px;line-height:1.65}
  /* De vraag en het telefoonnummer staan links naast de bocht, zodat die ruimte niet leeg is. */
  .n-held .vraag{margin-top:92px;max-width:calc(100% - 66px);line-height:1.35}
  .n-held .knop-tel{margin-top:14px;height:50px;padding:0 16px;font-size:14px;gap:8px}
  .n-held .aansluiting{display:flex;margin-top:24px}
  .n-held .knop{width:100%;justify-content:space-between;font-size:14px;padding:0 8px 0 24px;white-space:nowrap}
  .n-held .knop .rond{width:48px;height:48px}
  .n-held .kabel{display:none}
  .n-held .haak{display:block;position:absolute;z-index:1;bottom:calc(100% - 7px);left:calc(100% - var(--h)/2 - var(--k)/2);height:calc(var(--u)*926);width:calc(var(--u)*3000);pointer-events:none;transition:transform .28s cubic-bezier(.3,1.5,.5,1);animation:n-insteken-m 1s cubic-bezier(.16,.9,.3,1) backwards .15s}
  .n-held .bocht{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
  .n-held .stekker-omlaag{position:absolute;left:0;top:0;width:calc(var(--u)*1425);height:var(--k);max-width:none;transform-origin:0 0;transform:translateY(calc(var(--u)*926)) rotate(-90deg);-webkit-mask-image:linear-gradient(to right,#000 45.6%,transparent 50.8%);mask-image:linear-gradient(to right,#000 45.6%,transparent 50.8%)}
  .n-held .aansluiting:hover .haak,.n-held .aansluiting:focus-within .haak{transform:translateY(3px)}
  @keyframes n-insteken-m{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
}

/* ---------- opening op de andere pagina's ---------- */
.n-pagina .tekst{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,84px);align-items:end;padding:clamp(40px,4.4vw,84px) var(--in) clamp(36px,3.6vw,68px)}
.n-pagina h1{--maat:clamp(40px,5.9vw,116px);line-height:1.02;letter-spacing:-.035em}
.n-pagina .zij{font-size:clamp(16px,1.25vw,20px);line-height:1.6}
.n-pagina .eerste{color:var(--wit);font-weight:500;margin-bottom:.7em}
.n-pagina .knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.1em}
.n-pagina .beeld{display:block;width:100%;height:auto;aspect-ratio:2.2/1;object-fit:cover}
@media (max-width:999px){
  .n-pagina .tekst{display:block}
  .n-pagina h1{--maat:clamp(40px,8.6vw,84px)}
  .n-pagina .zij{margin-top:clamp(20px,3vw,32px);max-width:62ch}
}
@media (max-width:639px){
  .n-pagina .tekst{padding:30px 22px}
  .n-pagina .knoppen .knop-tel,.n-pagina .knoppen .knop{width:100%}
  .n-pagina .knoppen .knop{justify-content:space-between}
  .n-pagina .beeld{aspect-ratio:5/4}
}

/* ---------- onze diensten: het patchpaneel ---------- */
.n-diensten .kop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,72px);align-items:end;padding:clamp(28px,3.4vw,64px) var(--in) clamp(28px,3.4vw,56px)}
.n-diensten .kop h2{font-size:clamp(44px,6.4vw,124px);line-height:1;letter-spacing:-.04em}
.n-diensten .kop p{max-width:66ch;font-size:clamp(16px,1.25vw,20px);line-height:1.7}
.n-diensten .paneel{--pb:clamp(26px,2.6vw,44px);--jack:clamp(76px,6.9vw,112px);position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(10px,1.4vw,28px);padding:clamp(26px,2.6vw,44px) clamp(64px,6.6vw,110px) var(--pb);background:#26272b;border-bottom:1px solid #1c1d20}
.n-diensten .oor{position:absolute;top:0;bottom:0;width:clamp(38px,4vw,66px);border-color:#34353a;border-style:solid;border-width:0}
.n-diensten .oor.l{left:0;border-right-width:1px}
.n-diensten .oor.r{right:0;border-left-width:1px}
.n-diensten .oor i{position:absolute;left:50%;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:#34353a;box-shadow:inset 0 0 0 1px #54595f}
.n-diensten .oor i::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;margin-top:-.75px;background:#1c1d20;transform:rotate(38deg)}
.n-diensten .oor i:first-child{top:clamp(16px,1.6vw,26px)}
.n-diensten .oor i:last-child{bottom:clamp(16px,1.6vw,26px)}
.n-diensten .oor.r i::after{transform:rotate(-24deg)}
.n-diensten .poort{--led:#54595f;--st:0;position:relative;display:flex;align-items:center;gap:clamp(10px,1.1vw,20px);padding:0;border:0;background:none;color:var(--blauwgrijs);font:500 clamp(15px,1.3vw,22px)/1.2 var(--sans);letter-spacing:-.01em;text-align:left;cursor:pointer;border-radius:8px;transition:color .15s}
.n-diensten .poort:hover{--led:#c8d5dc;color:var(--wit)}
.n-diensten .poort[aria-pressed="true"]{--led:#ff671f;--st:1;color:var(--wit);font-weight:600}
.n-diensten .jack{position:relative;z-index:2;flex:none;display:block;width:var(--jack);height:auto;overflow:visible}
/* Via variabelen: een <use> laat zich niet van buitenaf selecteren. */
.poort-led{fill:var(--led)}
.poort-stekker{opacity:var(--st)}
/* De kabel valt uit de actieve poort recht omlaag de foto in. */
.n-diensten .snoer{--d:calc(var(--jack)*16/84);position:absolute;z-index:1;left:calc(var(--jack)/2);width:var(--d);margin-left:calc(var(--d)/-2);top:calc(var(--jack)*.42);bottom:calc(var(--pb)*-1 - 2px - (var(--snoer-extra,0px)));background:linear-gradient(90deg,#e75c1c,#ff671f 28%,#ff8a52 44%,#ff671f 62%,#c94e14);transform-origin:top;transform:scaleY(0);transition:transform .3s cubic-bezier(.3,.8,.3,1)}
.n-diensten .poort[aria-pressed="true"] .snoer{transform:none}
.n-diensten .wissel{display:grid}
.n-diensten .dienst{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .28s}
.n-diensten .dienst .knop{visibility:hidden}
.n-diensten .dienst.aan{opacity:1;pointer-events:auto}
.n-diensten .dienst.aan .knop{visibility:visible}
.n-diensten .foto{position:relative;z-index:3;display:block;width:100%;height:auto;aspect-ratio:2.28/1;object-fit:cover}
.n-diensten .uitleg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:clamp(20px,3vw,56px);align-items:start;padding:clamp(28px,3vw,56px) var(--in) clamp(32px,3.4vw,64px)}
.n-diensten .uitleg h3{font-size:clamp(32px,3.7vw,66px);line-height:1.02;letter-spacing:-.035em}
.n-diensten .uitleg p{font-size:clamp(16px,1.2vw,19px);line-height:1.65}
@media (max-width:999px){
  .n-diensten .uitleg{grid-template-columns:minmax(0,1fr)}
  .n-diensten .uitleg .knop{justify-self:start}
}
@media (max-width:859px){
  .n-diensten .kop{display:block}
  .n-diensten .kop p{margin-top:16px}
}
/* Op de telefoon twee bij twee. De kabel uit de bovenste rij loopt achter de poort eronder langs. */
@media (max-width:979px){
  .n-diensten .paneel{--jack:clamp(56px,14.4vw,76px);--rij:calc(var(--jack)*.857);--gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap) 10px;padding:24px clamp(16px,3vw,28px) var(--pb)}
  .n-diensten .oor{display:none}
  .n-diensten .poort{font-size:clamp(13px,3.55vw,18px);gap:9px;min-height:var(--rij)}
  .n-diensten .poort:nth-of-type(-n+2){--snoer-extra:calc(var(--rij) + var(--gap))}
}
@media (max-width:759px){
  .n-diensten .foto{aspect-ratio:4/3}
  .n-diensten .uitleg{padding:24px 22px 28px;gap:14px}
}

/* ---------- de grote zin: van rand tot rand ---------- */
/* Elke regel heeft zijn eigen maat in cqw, gerekend op de breedte van het vlak. Eén kop in de code; regeleinden per breedte. */
.n-poster{container-type:inline-size}
.n-poster .binnenste{position:relative;padding:3.6cqw 2.6cqw 3.2cqw}
.n-poster h2{font-size:1cqw;line-height:1;font-weight:300;color:var(--op-oranje);text-wrap:initial;white-space:nowrap;letter-spacing:0}
.n-poster .r{font-size:calc(var(--b)*1cqw);line-height:1;letter-spacing:-.04em;font-weight:300}
.n-poster .r.vet{font-weight:600}
.n-poster br.br-s{display:none}
.n-poster .knop{position:absolute;right:2.6cqw;bottom:5.25cqw;left:48.06cqw;justify-content:space-between;height:clamp(52px,8cqw,152px);padding:0 calc(clamp(52px,8cqw,152px)*.14) 0 calc(clamp(52px,8cqw,152px)*.46);font-size:clamp(14px,2.1cqw,40px);letter-spacing:.06em;white-space:nowrap}
.n-poster .knop .rond{width:calc(clamp(52px,8cqw,152px)*.72);height:calc(clamp(52px,8cqw,152px)*.72)}
.n-poster .knop .rond svg{width:36%;height:36%}
.n-poster.poster-partner .knop{left:42.45cqw;bottom:4.6cqw}
.n-poster .onderrij{display:flex;align-items:center;justify-content:space-between;gap:3cqw;margin-top:3cqw}
.n-poster .onderrij .knop{position:static;flex:none;height:clamp(56px,6cqw,112px);padding:0 calc(clamp(56px,6cqw,112px)*.14) 0 calc(clamp(56px,6cqw,112px)*.46);gap:calc(clamp(56px,6cqw,112px)*.32);font-size:clamp(14px,1.5cqw,28px)}
.n-poster .onderrij .knop .rond{width:calc(clamp(56px,6cqw,112px)*.72);height:calc(clamp(56px,6cqw,112px)*.72)}
.n-poster .onder{max-width:32em;font-size:clamp(17px,1.75cqw,32px);line-height:1.35}
.n-poster .onder a{color:var(--op-oranje);text-decoration:underline;text-decoration-color:var(--op-oranje);text-decoration-thickness:2px;text-underline-offset:.22em}
.n-poster .onder a:hover{color:var(--op-oranje);text-decoration-thickness:3px}
@container (max-width:620px){
  .n-poster .binnenste{padding:5.2cqw 5.4cqw max(5.9cqw,calc(42px - 6.17cqw))}
  .n-poster .r{font-size:calc(var(--s)*1cqw)}
  .n-poster br.br-s{display:inline}
  .n-poster br.br-b{display:none}
  .n-poster br.br-b.br-s,.n-poster br.br-s{display:inline}
  .n-poster .knop{left:50.1cqw;right:5.4cqw;bottom:5.4cqw;height:max(42px,12cqw);padding:0 1.5cqw 0 4.6cqw;font-size:max(12px,3.4cqw);line-height:1;min-height:0}
  .n-poster .knop .rond{width:9cqw;height:9cqw}
  .n-poster.poster-partner .knop{left:45.4cqw;bottom:5.6cqw}
  .n-poster .onderrij{display:block;margin-top:5cqw}
  .n-poster .onderrij .knop{margin-top:5cqw;width:100%;height:56px;padding:0 8px 0 24px;font-size:14px}
  .n-poster .onderrij .knop .rond{width:40px;height:40px}
}

/* ---------- de kabelroute ---------- */
.n-route .kop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,84px);align-items:end;padding:clamp(36px,4.2vw,80px) var(--in) clamp(36px,4vw,76px)}
.n-route .kop h2{font-size:clamp(32px,4vw,76px);line-height:1.05;letter-spacing:-.035em;text-wrap:initial}
.n-route .kop p{font-size:clamp(16px,1.2vw,19px);line-height:1.7}
.n-route .baan{container-type:inline-size;position:relative}
.n-route .spoorvlak{position:relative;aspect-ratio:1256/596}
.n-route .baan-d{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.n-route .spoor{fill:none;stroke:#54595f;stroke-linecap:butt}
.n-route .kern{fill:none;stroke:var(--oranje);stroke-linecap:butt}
.n-route .rand{fill:none;stroke:#c94e14;stroke-linecap:butt}
.n-route .glans{fill:none;stroke:#ff9a6b;stroke-linecap:butt;opacity:.42}
.n-route .baan-m{display:none}
.n-route ol{position:absolute;inset:0}
.n-route li{position:absolute;display:block;width:27cqw}
.n-route li:nth-child(1){left:12.74%;top:9.4%}
.n-route li:nth-child(2){left:42.2%;top:9.4%}
.n-route li:nth-child(3){left:71.66%;top:9.4%}
.n-route li:nth-child(4){left:71.66%;top:41.95%}
.n-route li:nth-child(5){left:42.2%;top:41.95%}
.n-route li:nth-child(6){left:12.74%;top:41.95%}
.n-route li:nth-child(7){left:12.74%;top:74.5%}
.n-route .bol{position:absolute;left:0;top:0;translate:0 -50%;display:grid;place-items:center;width:4.8cqw;height:4.8cqw;border-radius:50%;background:#1c1d20;box-shadow:0 0 0 .32cqw var(--blauwgrijs),0 0 0 .8cqw #1c1d20;color:var(--wit);font:600 max(13px,1.4cqw)/1 var(--mono)}
.n-route .naam{display:block;padding-top:calc(2.4cqw + 1.9cqw);color:var(--wit);font:600 max(16px,1.72cqw)/1.2 var(--sans);letter-spacing:-.015em}
.n-route .eind{position:absolute;right:6.6cqw;top:74.5%;translate:0 -50%;z-index:2}
@media (min-width:1500px){.n-route .eind{height:4.4cqw;padding:0 .6cqw 0 1.9cqw;gap:1.2cqw;font-size:1cqw}.n-route .eind .rond{width:3.2cqw;height:3.2cqw}}
@media (max-width:999px){
  .n-route .kop{display:block}
  .n-route .kop p{margin-top:16px;max-width:66ch}
  .n-route .kop h2{font-size:min(clamp(32px,6.4vw,62px),calc((100vw - 68px)/8.9))}
}
/* Telefoon en smalle tablet: de slinger staat rechtop. Poorten om en om links en rechts. */
@media (max-width:759px){
  .n-route .kop h2{text-wrap:balance}
  .n-route br.des{display:none}
  .n-route .spoorvlak{--rij:106px;aspect-ratio:auto;height:calc(7*var(--rij) + 144px)}
  .n-route .baan-d{display:none}
  .n-route .baan-m{display:block;position:absolute;left:0;top:0;width:100%;height:calc(7*var(--rij) + 78px);overflow:visible}
  .n-route .baan-m path{vector-effect:non-scaling-stroke}
  .n-route li{display:flex;align-items:center;gap:14px;width:auto;height:64px;left:calc(12% - 22px)!important;right:90px;top:calc(var(--i)*var(--rij) + 16px)!important}
  .n-route li:nth-child(1){--i:0}.n-route li:nth-child(2){--i:1}.n-route li:nth-child(3){--i:2}.n-route li:nth-child(4){--i:3}.n-route li:nth-child(5){--i:4}.n-route li:nth-child(6){--i:5}.n-route li:nth-child(7){--i:6}
  .n-route li:nth-child(even){left:90px!important;right:calc(12% - 22px);flex-direction:row-reverse;text-align:right}
  .n-route .bol{position:static;translate:none;flex:none;width:44px;height:44px;box-shadow:0 0 0 2.5px var(--blauwgrijs),0 0 0 6px #1c1d20;font-size:14px}
  .n-route .naam{padding:0;font-size:16px;letter-spacing:-.01em}
  .n-route .eind{right:22px;left:22px;top:auto;bottom:26px;translate:none;justify-content:space-between}
}

/* ---------- de stappen op de overstappagina ---------- */
.n-stappen{--dik:24px;--naad:linear-gradient(to bottom,#c94e14 0 2px,#ff671f 2px 9.5px,#ff7c3f 9.5px 14.5px,#ff671f 14.5px 22px,#c94e14 22px 24px);--bol:44px;padding:clamp(36px,4vw,64px) 0}
.n-stappen ol{position:relative}
.n-stappen li{position:relative}
.n-stappen .bol{position:absolute;left:0;top:0;z-index:2;display:grid;place-items:center;width:var(--bol);height:var(--bol);border-radius:50%;background:#1c1d20;box-shadow:0 0 0 3px var(--blauwgrijs),0 0 0 8px #1c1d20;color:var(--wit);font:600 16px/1 var(--mono)}
.n-stappen .lijn{position:absolute;z-index:1}
.n-stappen h2{color:var(--wit);font-size:clamp(20px,1.72vw,30px);line-height:1.2;letter-spacing:-.018em;text-wrap:balance;margin-bottom:.55em}
.n-stappen p{font-size:clamp(16px,1.14vw,18px);line-height:1.65}
.n-stappen .draai{display:none}
/* Breed: de slinger met de hele tekst, drie stappen per rij. Bochten rekken mee met de hoogte van de tekst. */
@media (min-width:1280px){
  .n-stappen{--bol:clamp(52px,4.2vw,80px);--gx:clamp(24px,2.6vw,48px);--gy:clamp(44px,3.8vw,72px);--r:clamp(72px,6.4vw,124px);--regel:calc(var(--bol)/2);--zij:calc(var(--r) + clamp(30px,2.6vw,50px));padding:clamp(52px,4.6vw,88px) 0 clamp(56px,5vw,96px)}
  .n-stappen ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gy) var(--gx);padding:0 var(--zij)}
  .n-stappen li{padding-top:calc(var(--bol) + clamp(16px,1.4vw,26px))}
  .n-stappen li:nth-child(1){grid-area:1/1}.n-stappen li:nth-child(2){grid-area:1/2}.n-stappen li:nth-child(3){grid-area:1/3}
  .n-stappen li:nth-child(4){grid-area:2/3}.n-stappen li:nth-child(5){grid-area:2/2}.n-stappen li:nth-child(6){grid-area:2/1}
  .n-stappen li:nth-child(7){grid-area:3/1/3/-1;display:grid;grid-template-columns:calc((100% - 2*var(--gx))/3) minmax(0,66ch);column-gap:var(--gx);align-items:start}
  .n-stappen .bol{font-size:clamp(15px,1.3vw,22px)}
  .n-stappen .lijn{top:calc(var(--regel) - 12px);height:24px;left:0;right:0;background:var(--naad)}
  .n-stappen li:nth-child(1) .lijn{left:-100vw;right:calc(var(--gx)*-1)}
  .n-stappen li:nth-child(2) .lijn{right:calc(var(--gx)*-1)}
  .n-stappen li:nth-child(4) .lijn,.n-stappen li:nth-child(5) .lijn{left:calc(var(--gx)*-1)}
  .n-stappen li:nth-child(7) .lijn{right:-100vw}
  .n-stappen h2{min-height:2.4em}
  .n-stappen li:nth-child(7) h2{min-height:0}
  .n-stappen .draai{display:block;position:absolute;z-index:1;top:calc(var(--regel) - 12px);height:calc(100% + var(--gy) + 24px);width:var(--r);border:24px solid #c94e14;box-sizing:border-box}
  .n-stappen .draai::before,.n-stappen .draai::after{content:"";position:absolute;box-sizing:border-box}
  .n-stappen li:nth-child(3) .draai{left:100%;border-left:0;border-radius:0 var(--r) var(--r) 0}
  .n-stappen li:nth-child(3) .draai::before{left:0;top:-22px;bottom:-22px;right:-22px;border:20px solid #ff671f;border-left:0;border-radius:0 calc(var(--r) - 2px) calc(var(--r) - 2px) 0}
  .n-stappen li:nth-child(3) .draai::after{left:0;top:-14.5px;bottom:-14.5px;right:-14.5px;border:5px solid #ff7c3f;border-left:0;border-radius:0 calc(var(--r) - 9.5px) calc(var(--r) - 9.5px) 0}
  .n-stappen li:nth-child(6) .draai{right:100%;border-right:0;border-radius:var(--r) 0 0 var(--r)}
  .n-stappen li:nth-child(6) .draai::before{right:0;top:-22px;bottom:-22px;left:-22px;border:20px solid #ff671f;border-right:0;border-radius:calc(var(--r) - 2px) 0 0 calc(var(--r) - 2px)}
  .n-stappen li:nth-child(6) .draai::after{right:0;top:-14.5px;bottom:-14.5px;left:-14.5px;border:5px solid #ff7c3f;border-right:0;border-radius:calc(var(--r) - 9.5px) 0 0 calc(var(--r) - 9.5px)}
}
/* Smal en middel: één kabel recht door het vlak, naam en tekst ernaast. */
@media (max-width:1279px){
  .n-stappen{--x:clamp(12px,4vw,56px);--d:clamp(14px,1.8vw,24px);--naad:linear-gradient(to right,#c94e14 0 8%,#ff671f 8% 39%,#ff7c3f 39% 61%,#ff671f 61% 92%,#c94e14 92% 100%);--bol:clamp(40px,5vw,60px)}
  .n-stappen li{padding:0 clamp(18px,4vw,56px) clamp(32px,4.4vw,56px) calc(var(--x) + var(--bol) + clamp(14px,2.4vw,32px))}
  .n-stappen li:last-child{padding-bottom:0}
  .n-stappen .bol{left:var(--x);font-size:clamp(15px,1.9vw,20px)}
  .n-stappen .lijn{left:calc(var(--x) + var(--bol)/2 - var(--d)/2);width:var(--d);top:0;bottom:0;background:var(--naad)}
  .n-stappen li:first-child .lijn{top:-200px}
  .n-stappen li:last-child .lijn{bottom:-200px}
  .n-stappen h2{min-height:var(--bol);display:flex;align-items:center;margin-bottom:.4em}
}
@media (min-width:760px) and (max-width:1279px){
  .n-stappen li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(24px,4vw,56px);align-items:start}
  .n-stappen h2{margin:0;font-size:clamp(22px,2.8vw,30px)}
}

/* ---------- de stapel brochurepagina's ---------- */
.n-stapel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
.n-stapel .tekst{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,3vw,56px);padding:clamp(32px,4vw,76px) var(--in)}
.n-stapel h2{font-size:clamp(36px,5vw,96px);line-height:1;letter-spacing:-.04em}
.n-stapel .tekst p{margin-top:.8em;color:var(--op-oranje);font-size:clamp(17px,1.4vw,23px);line-height:1.45}
.n-stapel .acties{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,1.5vw,24px)}
.n-stapel .tekstlink{color:var(--op-oranje);font:500 13px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--op-oranje);text-decoration-thickness:1.5px;text-underline-offset:6px}
.n-stapel .tekstlink:hover{color:var(--op-oranje)}
.n-stapel .stapel{position:relative;display:block;min-height:clamp(420px,44vw,840px);margin:clamp(14px,1.6vw,28px) clamp(14px,2vw,40px) clamp(14px,1.6vw,28px) 0;outline-offset:6px;border-radius:12px}
.n-stapel .vel{position:absolute;left:50%;top:50%;width:80%;aspect-ratio:1700/957;border-radius:3px;overflow:hidden;background:var(--wit);box-shadow:0 1px 2px rgba(28,29,32,.28),0 14px 28px -14px rgba(28,29,32,.5);transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r));transition:transform .55s cubic-bezier(.2,.85,.25,1)}
.n-stapel .vel img{width:100%;height:100%;object-fit:cover}
.n-stapel .vel-4{--x:5%;--y:-8%;--r:-6deg;--hx:19%;--hy:-27%;--hr:-9deg}
.n-stapel .vel-3{--x:-6%;--y:-6%;--r:4.5deg;--hx:-21%;--hy:-25%;--hr:7deg}
.n-stapel .vel-2{--x:6%;--y:2%;--r:2.5deg;--hx:20%;--hy:15%;--hr:5deg}
.n-stapel .vel-1{--x:-2%;--y:4%;--r:-1.5deg;--hx:-7%;--hy:17%;--hr:-3deg}
.n-stapel .stapel:hover .vel,.n-stapel .stapel:focus-visible .vel{transform:translate(-50%,-50%) translate(var(--hx),var(--hy)) rotate(var(--hr))}
@media (max-width:859px){
  .n-stapel{grid-template-columns:minmax(0,1fr)}
  .n-stapel .tekst{padding:30px 22px 8px}
  .n-stapel .stapel{min-height:0;aspect-ratio:1/.72;margin:4px 12px 12px}
  .n-stapel .acties .knop{width:100%;justify-content:space-between;padding-left:18px;font-size:12.5px;letter-spacing:.03em;gap:8px}
  .n-stapel .tekstlink{font-size:12px;letter-spacing:.03em}
}

/* ---------- Jeroen wijst, in de maten van het ontwerp van voor ronde 3 (11-11-2026) ---------- */
.n-jeroen{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,34vw,540px);align-items:end;min-height:clamp(420px,36vw,600px)}
.n-jeroen .tekst{position:relative;z-index:2;align-self:center;max-width:780px;padding:clamp(56px,7vw,104px) 0 clamp(56px,7vw,104px) clamp(20px,4vw,56px)}
.n-jeroen h2{margin-bottom:24px;font-size:clamp(30px,3.6vw,52px);line-height:1.04;letter-spacing:-.03em}
.n-jeroen .tekst p{max-width:60ch;margin-bottom:28px;font-size:17px;line-height:1.75}
.n-jeroen .persoon{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;height:100%}
.n-jeroen .persoon img{width:100%;height:auto;max-height:100%;object-fit:contain;object-position:right bottom}
.n-jeroen figcaption{position:absolute;right:calc(100% + clamp(10px,1.2vw,24px));bottom:clamp(36px,4vw,64px);white-space:nowrap;text-align:right;color:var(--blauwgrijs);font:500 12px/1.5 var(--mono);letter-spacing:.04em}
@media (max-width:859px){
  .n-jeroen{grid-template-columns:minmax(0,1fr);min-height:0}
  .n-jeroen .tekst{padding:40px 22px 8px}
  .n-jeroen h2{font-size:clamp(28px,7.5vw,34px)}
  .n-jeroen .persoon{height:auto;justify-content:center;padding-top:8px}
  .n-jeroen .persoon img{width:min(100%,420px);max-height:none}
  .n-jeroen figcaption{right:auto;left:22px;top:18px;bottom:auto;text-align:left;white-space:normal;width:9.4em}
}

/* ---------- contact: pand en formulier in één vlak, maten uit het ontwerp van voor ronde 3 (11-11-2026) ---------- */
.n-contact{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;padding:12px}
.n-contact .beeld{position:relative;flex:1 1 300px;min-height:320px;border-radius:22px;overflow:hidden;background:var(--blauwgrijs)}
.n-contact .beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:22% center}
.n-contact .rechts{display:flex;flex-direction:column;flex:1.3 1 440px;min-width:0;padding:clamp(28px,4.5vw,64px) clamp(14px,3.5vw,52px)}
.n-contact .rechts h2{font-size:clamp(30px,3.6vw,52px);margin-bottom:32px}
.n .tel{display:inline-block;color:var(--wit);font:600 clamp(26px,4vw,78px)/1.1 var(--mono);letter-spacing:-.05em;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--oranje);text-decoration-thickness:3px;text-underline-offset:.22em}
.n .tel:hover{color:var(--oranje);text-decoration-color:var(--oranje)}
.n .velden{display:flex;flex-direction:column;flex:1}
.n .veld{margin-bottom:clamp(16px,1.5vw,24px)}
.n .veld label,.n .veld .titel{display:block;margin-bottom:8px;color:var(--antraciet);font-weight:600;font-size:15px;line-height:1.3}
.n .veld input[type=text],.n .veld input[type=email],.n .veld input[type=tel],.n .veld textarea{display:block;width:100%;padding:16px 18px;border:0;border-radius:14px;background:var(--grijs);color:var(--antraciet);font:400 16px/1.4 var(--sans);transition:box-shadow .15s}
.n .veld input[type=text],.n .veld input[type=email],.n .veld input[type=tel]{height:56px}
.n .veld textarea{min-height:clamp(140px,12vw,220px);resize:vertical;flex:1}
.n .groei{flex:1;display:flex;flex-direction:column}
.n .veld input:focus,.n .veld textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--oranje)}
.n .akkoord{padding:16px 18px;border-radius:14px;background:var(--grijs)}
.n .akkoord .titel{margin-bottom:10px}
.n .akkoord label{display:flex;gap:12px;align-items:flex-start;margin:0;font-weight:400;font-size:15px;line-height:1.45;color:var(--leigrijs)}
.n .akkoord input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--oranje)}
.n .velden button.knop{align-self:flex-start}
.n .verzonden{display:none;align-items:center;gap:14px;padding:18px 22px 18px 18px;border-radius:14px;background:var(--grijs);color:var(--antraciet)}
.n .verzonden p{font-size:16px;line-height:1.6}
.n .verzonden .rond{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--oranje);color:var(--op-oranje)}
html.st-sent .n form.velden{display:none}
html.st-sent .n .verzonden{display:flex}
@media (max-width:859px){
  .n .tel{font-size:min(8vw,56px)}
}

/* ---------- formulier zonder contactkolom (op /contact/) ---------- */
.n-formulier{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);padding:clamp(36px,4.4vw,84px) var(--in);align-items:start}
.n-formulier h2{--maat:var(--h2)}
.n-formulier .kopkant p{margin-top:.8em}
.n .velden.twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.n .velden.twee .veld{grid-column:1/-1}
.n .velden.twee .veld.half{grid-column:span 1}
.n .velden.twee button{grid-column:1/-1;justify-self:start}
@media (max-width:999px){.n-formulier{display:block}.n-formulier .velden,.n-formulier .verzonden{margin-top:28px}}
@media (max-width:639px){.n .velden.twee .veld.half{grid-column:1/-1}}

/* ---------- band: donker vlak, kop groot ---------- */
.n-band .binnen{padding:clamp(40px,5.6vw,108px) var(--in) clamp(36px,4.6vw,88px)}
.n-band h2{--maat:clamp(34px,5.6vw,108px);line-height:1.02;letter-spacing:-.04em}
.n-band .rij{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,96px);align-items:end;margin-top:clamp(24px,3vw,56px)}
.n-band .alineas{max-width:68ch;font-size:clamp(16px,1.3vw,21px)}
.n-band .alineas p+p{margin-top:1em}
.n-band .logos{display:flex;justify-content:center;padding:clamp(12px,1.6vw,28px) clamp(12px,3vw,56px);background:var(--antraciet)}
.n-band .logos img{width:100%;max-width:1024px;height:auto}
@media (max-width:859px){
  .n-band .rij{grid-template-columns:minmax(0,1fr)}
  .n-band .rij .knop{justify-self:start}
}

/* ---------- tekst op het grijs ---------- */
.n-tekst{display:grid;grid-template-columns:minmax(min-content,5fr) minmax(0,7fr);gap:clamp(20px,4vw,72px);align-items:start;padding:clamp(32px,4vw,76px) var(--in)}
.n-tekst h2{--maat:var(--h2)}
.n-tekst .sub{margin-top:.7em;color:var(--antraciet);font-size:clamp(17px,1.4vw,23px);line-height:1.4}
.n-tekst .lijf{max-width:72ch}
.n-tekst .lijf p+p{margin-top:1.05em}
.n-tekst .lijf .vinken{margin-top:1em;border-bottom:1px solid var(--blauwgrijs)}
.n-tekst .lijf .vinken+p{margin-top:1.05em}
.n-tekst .lijf .knop,.n-tekst .lijf .meer{margin-top:1.5em}
.n-lead-tekst{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.n-lead-tekst .lood{color:var(--antraciet);font-size:clamp(20px,2vw,34px);font-weight:500;line-height:1.32;letter-spacing:-.018em}
@media (min-width:1000px){.n-tekst .kopkant{position:sticky;top:110px}}
@media (max-width:999px){.n-tekst,.n-lead-tekst{display:block}.n-tekst .lijf{margin-top:18px}.n-tekst .lijf:empty{display:none}}

/* ---------- lijst: kop links, rijen rechts ---------- */
.n-lijst{display:grid;grid-template-columns:minmax(min-content,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:start;padding:clamp(36px,4.4vw,84px) var(--in);overflow:visible}
.n.n-lijst{overflow:visible}
.n-lijst h2{--maat:var(--h2)}
.n-lijst .kopkant p{margin-top:1em}
.n-lijst .rij{padding:clamp(20px,1.9vw,32px) 0;border-top:1px solid var(--lijn)}
.n-lijst .rij:first-child{padding-top:0;border-top:0}
.n-lijst .rij:last-child{padding-bottom:0}
.n-lijst h3{font-size:clamp(20px,1.7vw,28px);line-height:1.2;letter-spacing:-.02em;margin-bottom:.45em}
.n-lijst .slot{margin-top:clamp(20px,1.9vw,32px);padding-top:clamp(20px,1.9vw,32px);border-top:1px solid var(--lijn)}
.n-lijst .rijen-knop{grid-column:2}
@media (min-width:1000px){.n-lijst .kopkant{position:sticky;top:110px}}
@media (max-width:999px){.n-lijst{display:block}.n-lijst .rijen{margin-top:24px}.n-lijst .rijen-knop{margin-top:24px}}

/* ---------- tegels: losse vlakken met een grote titel ---------- */
.n-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.n-tegels.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.n-tegels .tegel{display:flex;flex-direction:column;gap:clamp(12px,1.3vw,22px);padding:clamp(26px,2.8vw,52px) var(--in) clamp(28px,3vw,56px)}
.n-tegels h2{font-size:clamp(24px,2.3vw,38px);line-height:1.08;letter-spacing:-.025em}
.n-tegels p{font-size:clamp(15.5px,1.1vw,18px);line-height:1.65}
@media (max-width:1439px){.n-tegels.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:999px){.n-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.n-tegels,.n-tegels.vier{grid-template-columns:minmax(0,1fr)}}

/* ---------- kaarten: foto tot de rand van het vlak ---------- */
.n-kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.n-kaarten .kaart{display:flex;flex-direction:column;color:var(--leigrijs);text-decoration:none}
.n-kaarten a.kaart:hover{color:var(--leigrijs)}
.n-kaarten img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover}
.n-kaarten .lijf{flex:1;padding:clamp(24px,2.6vw,48px) var(--in) clamp(28px,3vw,56px)}
.n-kaarten h2,.n-kaarten h3{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:.6em;font-size:clamp(22px,2vw,32px);line-height:1.12;letter-spacing:-.025em;text-wrap:initial}
.n-kaarten p{font-size:clamp(15.5px,1.1vw,18px);line-height:1.65}
.n-kaarten .rond.klein{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--oranje);color:var(--op-oranje);transition:transform .15s}
.n-kaarten a.kaart:hover .rond.klein{transform:translateX(3px)}
@media (max-width:859px){.n-kaarten{grid-template-columns:minmax(0,1fr)}}

/* ---------- twee vlakken met tekst ---------- */
.n-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.n-twee .vlak{padding:clamp(28px,3.8vw,72px) var(--in)}
.n-twee h2{font-size:clamp(28px,3vw,54px);line-height:1.08;margin-bottom:.6em}
.n-twee p+p{margin-top:1em}
@media (max-width:859px){.n-twee{grid-template-columns:minmax(0,1fr)}}

/* ---------- rijen: titel links, tekst rechts (missie, visie, aanpak) ---------- */
.n-rijen{padding:clamp(12px,1.4vw,24px) var(--in)}
.n-rijen .rij{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,4vw,72px);padding:clamp(28px,3.2vw,60px) 0;border-top:1px solid var(--lijn)}
.n-rijen .rij:first-child{border-top:0}
.n-rijen h2{font-size:var(--h2)}
.n-rijen p{max-width:72ch}
@media (max-width:859px){.n-rijen .rij{display:block}.n-rijen h2{margin-bottom:.4em}}

/* ---------- sectoren en maten (NIS2) ---------- */
.n-sectoren{padding:clamp(36px,4.4vw,84px) var(--in)}
.n-sectoren h2{--maat:var(--h2)}
.n-sectoren .raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,72px);margin-top:clamp(24px,3vw,56px)}
.n-sectoren h3{font-size:clamp(20px,1.7vw,28px);line-height:1.2;letter-spacing:-.02em;margin-bottom:.8em}
.n-sectoren img{width:100%;height:auto;margin:-16% 0}
@media (max-width:759px){.n-sectoren .raster{grid-template-columns:minmax(0,1fr)}.n-sectoren img{width:calc(100% + 2*var(--in));max-width:none;margin:-16% calc(var(--in)*-1)}}
.n-maten>h2{--maat:var(--h2);padding:clamp(32px,4vw,76px) var(--in) clamp(24px,3vw,48px)}
.n-maten .raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.n-maten .maat{display:flex;flex-direction:column}
.n-maten .boven{flex:1;padding:clamp(26px,2.8vw,52px) var(--in)}
.n-maten h3{font-size:clamp(28px,2.8vw,48px);line-height:1.04;letter-spacing:-.03em;margin-bottom:.7em}
.n-maten li{padding:12px 0;border-top:1px solid var(--lijn);color:var(--antraciet);line-height:1.45}
.n-maten .uitkomst{padding:clamp(18px,1.6vw,26px) var(--in);background:var(--oranje);color:var(--op-oranje);font-weight:600;line-height:1.35}
@media (max-width:859px){.n-maten .raster{grid-template-columns:minmax(0,1fr)}}

/* ---------- applicaties ---------- */
.n-apps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(36px,4.4vw,84px) var(--in)}
.n-apps h2{--maat:var(--h2)}
.n-apps .logos{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,56px)}
.n-apps .logos img{width:auto;height:clamp(52px,4.4vw,68px)}
@media (max-width:999px){.n-apps{display:block}.n-apps .logos{margin-top:24px}}

/* ---------- tekst naast foto ---------- */
.n-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.n-split.beeld-links .beeld{order:-1}
.n-split .tekst{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(32px,4.4vw,84px) var(--in)}
.n-split h2{--maat:var(--h2);margin-bottom:.55em}
.n-split p+p{margin-top:1em}
.n-split .vinken{align-self:stretch;margin-top:1.2em;border-bottom:1px solid var(--lijn)}
.n-split .vinken li{border-top-color:var(--lijn)}
.n-split .knop{margin-top:1.6em}
.n-split .beeld{position:relative;min-height:clamp(320px,36vw,680px)}
.n-split.is-foto .beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.n-split.is-schema .beeld{display:flex;align-items:center;justify-content:center;padding:clamp(20px,3vw,56px);min-height:0}
.n-split.is-schema .beeld img{width:100%;max-width:720px;height:auto}
.n-split.is-persoon .beeld{overflow:hidden}
.n-split.is-persoon .beeld img{position:absolute;left:50%;top:clamp(24px,3vw,56px);translate:-50% 0;width:min(90%,441px);max-width:none;height:auto}
@media (max-width:859px){
  .n-split{grid-template-columns:minmax(0,1fr)}
  .n-split.beeld-links .beeld{order:0}
  .n-split .tekst{padding:32px 22px}
  .n-split.is-foto .beeld{min-height:0;aspect-ratio:4/3}
  .n-split.is-schema .beeld{padding:0 22px 28px}
  .n-split.is-schema .beeld img{max-width:520px}
  .n-split.is-persoon .beeld{height:440px;min-height:0}
}

/* ---------- video: het vlak vult altijd de hele breedte ---------- */
.n-video .vlak{position:relative;width:100%;aspect-ratio:16/9;max-height:86vh;background:var(--antraciet)}
.n-video iframe{display:none;position:absolute;inset:0;width:100%;height:100%;border:0}
.n-video button{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:var(--antraciet);cursor:pointer}
.n-video button img{width:100%;height:100%;object-fit:cover}
.n-video .speel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(68px,7vw,108px);height:clamp(68px,7vw,108px);border-radius:50%;background:var(--oranje);transition:background .15s}
.n-video .speel svg{width:34%;height:34%;margin-left:4%}
.n-video button:hover .speel{background:var(--oranje-hover)}
html.st-play .n-video iframe{display:block}
html.st-play .n-video button{display:none}

/* ---------- oprichter ---------- */
.n-founder{display:grid;grid-template-columns:clamp(340px,38vw,720px) minmax(0,1fr)}
.n-founder .persoon{display:flex;align-items:flex-end;justify-content:flex-start}
.n-founder .persoon img{width:100%;height:auto}
.n-founder .tekst{padding:clamp(36px,4.6vw,88px) var(--in) clamp(36px,4vw,76px) clamp(20px,3vw,56px)}
.n-founder h2{font-size:clamp(40px,5.6vw,108px);line-height:1;letter-spacing:-.04em}
.n-founder .rol{margin-top:.5em;color:var(--blauwgrijs);font:500 14px/1.5 var(--mono);letter-spacing:.02em}
.n-founder .verhaal{margin-top:clamp(20px,2.2vw,40px);max-width:68ch;font-size:clamp(16px,1.25vw,20px);line-height:1.7}
.n-founder .sociaal{display:flex;gap:8px;margin-top:clamp(22px,2.4vw,40px)}
.n-founder .sociaal a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--wit);box-shadow:inset 0 0 0 1px rgba(200,213,220,.35);transition:background .15s,color .15s}
.n-founder .sociaal a:hover{background:var(--oranje);color:var(--op-oranje)}
@media (max-width:859px){
  .n-founder{grid-template-columns:minmax(0,1fr)}
  .n-founder .persoon{order:2;justify-content:center;padding-top:8px}
  .n-founder .persoon img{width:min(100%,520px)}
  .n-founder .tekst{padding:32px 22px 16px}
}

/* ---------- blog ---------- */
.n-posts .raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.n-posts .post{display:flex;flex-direction:column}
.n-posts .foto{display:block;aspect-ratio:3/2;overflow:hidden}
.n-posts .foto img{width:100%;height:100%;object-fit:cover}
.n-posts .lijf{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(18px,2vw,32px);padding:clamp(22px,2.2vw,36px)}
.n-posts h2{font-size:clamp(20px,1.6vw,26px);line-height:1.22;letter-spacing:-.02em;text-wrap:pretty}
.n-posts h2 a{color:var(--antraciet);text-decoration:none}
.n-posts h2 a:hover{color:var(--antraciet);text-decoration:underline;text-decoration-color:var(--oranje);text-decoration-thickness:2px}
.n-posts .voet{display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 13px/1.4 var(--mono);letter-spacing:.02em}
.n-posts .voet a{color:var(--antraciet);font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.n-posts .pagina-nr{display:flex;justify-content:center;gap:8px;padding:clamp(20px,2.4vw,36px) 0}
.n-posts .pagina-nr a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--wit);color:var(--antraciet);font-weight:600;text-decoration:none;transition:box-shadow .15s}
.n-posts .pagina-nr a:hover{box-shadow:inset 0 0 0 1.5px var(--antraciet)}
.n-posts .pagina-nr a.nu{background:var(--antraciet);color:var(--wit)}
@media (max-width:999px){.n-posts .raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.n-posts .raster{grid-template-columns:minmax(0,1fr)}}

/* ---------- contact: de opening ---------- */
.n-contactkop{padding:clamp(36px,4.4vw,84px) var(--in) clamp(36px,4.4vw,84px)}
.n-contactkop h1{font-size:clamp(48px,7.2vw,132px);line-height:1;letter-spacing:-.04em}
.n-contactkop .raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);margin-top:clamp(36px,5vw,96px)}
.n-contactkop h2{margin-bottom:1em;font-size:clamp(20px,1.5vw,24px);line-height:1.2;letter-spacing:-.015em}
.n-contactkop .mails{margin-top:clamp(18px,1.8vw,30px)}
.n-contactkop .mails li{display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline;padding:4px 0}
.n-contactkop .mails a{color:var(--wit);font:500 clamp(16px,1.4vw,24px)/1.4 var(--mono);text-decoration:none}
.n-contactkop .mails a:hover{color:var(--wit);text-decoration:underline;text-decoration-color:var(--oranje);text-underline-offset:5px}
.n-contactkop .mails span{font-size:14px;color:var(--blauwgrijs)}
.n-contactkop .uren li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 24px;padding:clamp(12px,1.1vw,18px) 0;border-top:1px solid rgba(255,255,255,.16);color:var(--wit)}
.n-contactkop .uren li span:first-child{font-weight:600}
.n-contactkop .uren li span+span{color:var(--licht)}
@media (max-width:859px){.n-contactkop .raster{grid-template-columns:minmax(0,1fr)}.n-contactkop h1{font-size:clamp(48px,14vw,90px)}}

/* ---------- adres en kaart ---------- */
.n-adres{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.n-adres .tekst{padding:clamp(36px,4.4vw,84px) var(--in)}
.n-adres h2{font-size:var(--h2);margin-bottom:.7em}
.n-adres .plek{padding:clamp(14px,1.3vw,22px) 0;border-top:1px solid var(--lijn)}
.n-adres h3{font-size:clamp(18px,1.4vw,22px);line-height:1.3;letter-spacing:-.015em;margin-bottom:.2em}
.n-adres .kaart{position:relative;min-height:clamp(320px,34vw,620px);background:var(--blauwgrijs)}
.n-adres iframe{display:none;position:absolute;inset:0;width:100%;height:100%;border:0}
.n-adres .kaart-uit{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px;text-align:center;color:var(--antraciet)}
.n-adres .kaart-uit p{max-width:30em;font-size:15px;line-height:1.6}
html.st-map .n-adres iframe{display:block}
html.st-map .n-adres .kaart-uit{display:none}
@media (max-width:859px){.n-adres{grid-template-columns:minmax(0,1fr)}.n-adres .tekst{padding:32px 22px}}

/* ---------- kennismaken: de opening ---------- */
.n-kennismaken{display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,41vw,800px)}
.n-kennismaken .tekst{position:relative;z-index:2;padding:clamp(40px,4.6vw,88px) 0 clamp(36px,4vw,76px) var(--in)}
.n-kennismaken h1{--maat:clamp(38px,4.8vw,96px);line-height:1.02;letter-spacing:-.035em}
.n-kennismaken .tweede{display:block;margin-top:.15em;color:var(--oranje)}
.n-kennismaken .alineas{margin-top:clamp(24px,2.6vw,48px);max-width:60ch;font-size:clamp(16px,1.18vw,19px);line-height:1.6}
.n-kennismaken .alineas p+p{margin-top:.6em}
.n-kennismaken .alineas .vet{color:var(--wit);font-weight:600}
.n-kennismaken .knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,2.4vw,40px)}
.n-kennismaken .persoon{display:flex;align-items:flex-end;justify-content:flex-end}
.n-kennismaken .persoon img{width:100%;height:auto}
@media (max-width:859px){
  .n-kennismaken{grid-template-columns:minmax(0,1fr)}
  .n-kennismaken .tekst{padding:32px 22px 16px}
  .n-kennismaken .persoon{justify-content:center}
  .n-kennismaken .persoon img{width:min(100%,520px)}
}

/* ---------- agenda ---------- */
.n-agenda iframe{display:none;width:100%;height:760px;border:0}
.n-agenda .agenda-uit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:clamp(340px,30vw,520px);padding:40px 22px;text-align:center;color:var(--antraciet)}
.n-agenda p{max-width:32em;color:var(--leigrijs)}
.n-agenda .rond.groot{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--oranje);color:var(--op-oranje)}
html.st-cal .n-agenda iframe{display:block}
html.st-cal .n-agenda .agenda-uit{display:none}