:root{
    --bg:#F1F3F4;
    --paper:rgba(255,255,255,.62);
    --ink:#0B0D0E;
    --muted:#4A5359;
    --hair:#CFD5D9;
    --green:#7DC51B;
    --orange:#FEA500;
    --blue:#56A7DC;
    --c:var(--ink);
    --disp:"IBM Plex Sans Condensed","Helvetica Neue Condensed",Arial Narrow,system-ui,sans-serif;
    --body:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --mark-green:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%2040'%3E%3Ccircle%20cx%3D'8'%20cy%3D'20'%20r%3D'7'%20fill%3D'%230B0D0E'%2F%3E%3Crect%20x%3D'13'%20y%3D'18.6'%20width%3D'15'%20height%3D'2.8'%20fill%3D'%230B0D0E'%2F%3E%3Crect%20x%3D'36.5'%20y%3D'6.5'%20width%3D'27'%20height%3D'27'%20rx%3D'5'%20transform%3D'rotate(45%2050%2020)'%20fill%3D'%230B0D0E'%2F%3E%3Crect%20x%3D'43.7'%20y%3D'13.7'%20width%3D'12.6'%20height%3D'12.6'%20rx%3D'1.6'%20transform%3D'rotate(45%2050%2020)'%20fill%3D'%237DC51B'%2F%3E%3Crect%20x%3D'72'%20y%3D'18.6'%20width%3D'15'%20height%3D'2.8'%20fill%3D'%230B0D0E'%2F%3E%3Ccircle%20cx%3D'92'%20cy%3D'20'%20r%3D'7'%20fill%3D'%230B0D0E'%2F%3E%3Ccircle%20cx%3D'92'%20cy%3D'20'%20r%3D'4.4'%20fill%3D'%237DC51B'%2F%3E%3C%2Fsvg%3E");
    --mark-orange:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%2040'%3E%3Ccircle%20cx%3D'8'%20cy%3D'20'%20r%3D'7'%20fill%3D'%230B0D0E'%2F%3E%3Crect%20x%3D'13'%20y%3D'18.6'%20width%3D'15'%20height%3D'2.8'%20fill%3D'%230B0D0E'%2F%3E%3Crect%20x%3D'36.5'%20y%3D'6.5'%20width%3D'27'%20height%3D'27'%20rx%3D'5'%20transform%3D'rotate(45%2050%2020)'%20fill%3D'%230B0D0E'%2F%3E%3Crect%20x%3D'43.7'%20y%3D'13.7'%20width%3D'12.6'%20height%3D'12.6'%20rx%3D'1.6'%20transform%3D'rotate(45%2050%2020)'%20fill%3D'%23FEA500'%2F%3E%3Crect%20x%3D'72'%20y%3D'18.6'%20width%3D'15'%20height%3D'2.8'%20fill%3D'%230B0D0E'%2F%3E%3Ccircle%20cx%3D'92'%20cy%3D'20'%20r%3D'7'%20fill%3D'%230B0D0E'%2F%3E%3Ccircle%20cx%3D'92'%20cy%3D'20'%20r%3D'4.4'%20fill%3D'%23FEA500'%2F%3E%3C%2Fsvg%3E");
    --mark-blue:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%2040'%3E%3Ccircle%20cx%3D'8'%20cy%3D'20'%20r%3D'7'%20fill%3D'%230B0D0E'%2F%3E%3Crect%20x%3D'13'%20y%3D'18.6'%20width%3D'15'%20height%3D'2.8'%20fill%3D'%230B0D0E'%2F%3E%3Crect%20x%3D'36.5'%20y%3D'6.5'%20width%3D'27'%20height%3D'27'%20rx%3D'5'%20transform%3D'rotate(45%2050%2020)'%20fill%3D'%230B0D0E'%2F%3E%3Crect%20x%3D'43.7'%20y%3D'13.7'%20width%3D'12.6'%20height%3D'12.6'%20rx%3D'1.6'%20transform%3D'rotate(45%2050%2020)'%20fill%3D'%2356A7DC'%2F%3E%3Crect%20x%3D'72'%20y%3D'18.6'%20width%3D'15'%20height%3D'2.8'%20fill%3D'%230B0D0E'%2F%3E%3Ccircle%20cx%3D'92'%20cy%3D'20'%20r%3D'7'%20fill%3D'%230B0D0E'%2F%3E%3Ccircle%20cx%3D'92'%20cy%3D'20'%20r%3D'4.4'%20fill%3D'%2356A7DC'%2F%3E%3C%2Fsvg%3E");
    --markbg:var(--mark-green);
    --dia-green:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2040'%3E%3Crect%20x%3D'6'%20y%3D'6'%20width%3D'28'%20height%3D'28'%20rx%3D'5'%20transform%3D'rotate(45%2020%2020)'%20fill%3D'%230B0D0E'%2F%3E%3Crect%20x%3D'13.2'%20y%3D'13.2'%20width%3D'13.6'%20height%3D'13.6'%20rx%3D'1.6'%20transform%3D'rotate(45%2020%2020)'%20fill%3D'%237DC51B'%2F%3E%3C%2Fsvg%3E");
    --dia-orange:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2040'%3E%3Crect%20x%3D'6'%20y%3D'6'%20width%3D'28'%20height%3D'28'%20rx%3D'5'%20transform%3D'rotate(45%2020%2020)'%20fill%3D'%230B0D0E'%2F%3E%3Crect%20x%3D'13.2'%20y%3D'13.2'%20width%3D'13.6'%20height%3D'13.6'%20rx%3D'1.6'%20transform%3D'rotate(45%2020%2020)'%20fill%3D'%23FEA500'%2F%3E%3C%2Fsvg%3E");
    --dia-blue:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2040'%3E%3Crect%20x%3D'6'%20y%3D'6'%20width%3D'28'%20height%3D'28'%20rx%3D'5'%20transform%3D'rotate(45%2020%2020)'%20fill%3D'%230B0D0E'%2F%3E%3Crect%20x%3D'13.2'%20y%3D'13.2'%20width%3D'13.6'%20height%3D'13.6'%20rx%3D'1.6'%20transform%3D'rotate(45%2020%2020)'%20fill%3D'%2356A7DC'%2F%3E%3C%2Fsvg%3E");
    --diabg:var(--dia-green);
    --geo:"Jost",-apple-system,Segoe UI,sans-serif;
  }
  :root{color-scheme:light only}
  html{background:#F1F3F4}
  *{box-sizing:border-box}
  body{margin:0;font-family:var(--body);color:var(--ink);background:transparent;-webkit-font-smoothing:antialiased}

  /* achtergrondlaag die met het scrollen meebeweegt */
  .bgfx{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
  html.nogrid .bgfx-grid{display:none}
  .bgfx-grid{position:absolute;left:0;right:0;top:-25%;height:150%;
    background-image:linear-gradient(rgba(11,13,14,.05) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(11,13,14,.05) 1px,transparent 1px);
    background-size:46px 46px;will-change:transform}
  .bgfx-d{position:absolute;border-style:solid;border-width:2px;transform:rotate(45deg);border-radius:14px;will-change:transform}
  .bgfx-d.d1{width:300px;height:300px;border-color:rgba(125,197,27,.30);top:0;right:-90px}
  .bgfx-d.d2{width:210px;height:210px;border-color:rgba(254,165,0,.28);top:0;left:-70px}
  .bgfx-d.d3{width:420px;height:420px;border-color:rgba(86,167,220,.24);top:0;right:22vw}
  .bgfx-d.d4{width:250px;height:250px;border-color:rgba(125,197,27,.22);top:0;left:16vw}
  .bgfx-d.d5{width:340px;height:340px;border-color:rgba(254,165,0,.20);top:0;right:-110px}
  /* de achtergrond neemt de kleur van de pagina over */
  html[data-p="engineering"] .bgfx-d{border-color:rgba(125,197,27,.26)}
  html[data-p="locking"] .bgfx-d{border-color:rgba(254,165,0,.26)}
  html[data-p="data"] .bgfx-d{border-color:rgba(86,167,220,.26)}
  @media (max-width:760px){
    .bgfx-d.d1{width:190px;height:190px;right:-70px}
    .bgfx-d.d2{width:140px;height:140px;left:-50px}
    .bgfx-d.d3{width:250px;height:250px;right:-60px}
    .bgfx-d.d4{width:150px;height:150px;left:-40px}
    .bgfx-d.d5{width:200px;height:200px;right:-70px}
  }
  /* altijd lichte weergave, ook als het toestel om donker vraagt */
  @media (prefers-color-scheme:dark){
    :root{color-scheme:light only}
    html{background:#F1F3F4 !important}
    body{background:transparent !important;color:#0B0D0E !important}
    header{background:rgba(241,243,244,.94) !important}
    .unit,.branch a,.gallery figure{background:rgba(255,255,255,.62) !important;color:#0B0D0E !important}
    .card,.portal,.story,.storybox,.plate,.tech span,.cgrid,.cout,.calcbox,.docdl,
    .shop,.bridge,.cta{background:transparent !important;color:#0B0D0E !important}
    .mpanel,.mbtn,.lang,.field input,.field select,.field textarea,.cfield input,
    .cfield select{background:#FFFFFF !important;color:#0B0D0E !important}
    .lang button[aria-pressed="true"]{background:#0B0D0E !important;color:#fff !important}
    footer{background:transparent !important;color:#0B0D0E !important}
    footer a{color:#0B0D0E !important}
  }

  /* landingspagina: het merkteken bij een kop wisselt van kleur bij hover */
  html[data-p="hub"] .eyebrow{cursor:default}
  html[data-p="hub"] .eyebrow.cyc::before{animation:markspring 1.15s steps(1,end)}
  @media (hover:hover) and (pointer:fine){
    html[data-p="hub"] .eyebrow:hover::before{animation:markspring 1.15s steps(1,end)}
  }
  @keyframes markspring{
    0%{background-image:var(--mark-green)}
    28%{background-image:var(--mark-orange)}
    58%{background-image:var(--mark-blue)}
    82%{background-image:var(--mark-orange)}
    100%{background-image:var(--mark-green)}
  }

  h1,h2,h3,.name,.h2{overflow-wrap:break-word}
  .wrap{max-width:1140px;margin:0 auto;padding:0 28px}
  img{max-width:100%;display:block}

  /* diamond motif */
  .dia{width:15px;height:15px;background:var(--diabg) center/contain no-repeat;border:0;transform:none;flex:none}

  /* ---------- header ---------- */
  header{border-bottom:1px solid var(--hair);background:rgba(241,243,244,.94);position:-webkit-sticky;position:sticky;top:0;z-index:40;backdrop-filter:blur(6px)}
  .bar{display:flex;align-items:center;gap:16px;height:70px}
  .hdr{display:block;text-decoration:none}
  .hdr img{height:30px;width:auto}
  .hdr .g,.hdr .o,.hdr .b,.hdr .n{display:none}
  html[data-p="hub"] .hdr .n{display:block}
  html[data-p="engineering"] .hdr .g{display:block}
  html[data-p="locking"] .hdr .o{display:block}
  html[data-p="data"] .hdr .b{display:block}
  .tag{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--hair);padding-left:14px}
  .tag:empty{display:none}
  nav{margin-left:auto;display:flex;gap:24px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
  nav a{color:var(--muted);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
  nav a:hover,nav a:focus-visible{color:var(--ink);border-color:var(--ink)}

  .page{display:none}
  .page.on{display:block}

  /* ---------- type ---------- */
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;margin:0}
  .eyebrow::before{content:"";width:30px;height:12px;background:var(--markbg) center/contain no-repeat;border:0;border-radius:0;transform:none;flex:none}
  h1{font-family:var(--disp);font-weight:700;font-size:clamp(30px,7.2vw,66px);line-height:1.04;letter-spacing:-.015em;margin:20px 0 0;text-transform:uppercase;overflow-wrap:break-word}
  h1 em{font-style:normal;color:var(--muted)}
  .lede{font-size:17px;line-height:1.6;color:var(--muted);margin:20px 0 0;max-width:52ch}

  /* ---------- hub ---------- */
  .block h3.h3{font-family:var(--disp);font-weight:600;font-size:19px;text-transform:uppercase;
      letter-spacing:.01em;margin:34px 0 12px;padding-top:20px;border-top:1px solid var(--hair)}
  .block h3.h3:first-of-type{margin-top:26px}
  .pijlerlink{display:flex;align-items:center;justify-content:space-between;gap:22px;
      flex-wrap:wrap;padding:24px 28px;background:var(--paper);border-left:3px solid var(--c)}
  .pijlerzin{margin:0;font-family:var(--disp);font-weight:600;font-size:18px;line-height:1.35;
      text-transform:uppercase;letter-spacing:.01em;max-width:60ch}
  .pijlerlink .btn{margin:0;flex:none}
  .shopknop{display:inline-flex;align-items:center;gap:9px;margin-left:auto;order:2;padding:6px 2px;
      border:0;background:none;color:var(--ink);
      font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
      text-decoration:none;white-space:nowrap}
  .shopknop:hover,.shopknop:focus-visible{color:var(--green)}
  .shopknop svg{width:20px;height:20px;flex:none}
  @media (max-width:860px){ .shopknop .shoptekst{display:none} }
  .hdricons{margin-left:auto;order:2;display:flex;align-items:center;gap:16px}
  .hdricons .shopknop{margin-left:0}
  .storingknop:hover,.storingknop:focus-visible{color:var(--orange)}
  .actbadge{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:5px 12px 5px 8px;
      border-radius:20px;border:1px solid var(--hair);color:var(--ink)}
  .actbadge .dot{width:9px;height:9px;flex:none;background:var(--dotkleur,var(--muted));
      clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
  .actkeuze{margin:10px 0 4px 26px;padding:12px 14px;background:var(--paper,#F7F7F5);
      border-left:3px solid var(--hair);font-size:13.5px}
  .actkeuze-tekst{margin:0 0 8px;color:var(--muted);font-size:13px}
  .actkeuze label.chk{display:flex;align-items:center;gap:8px;margin:6px 0;cursor:pointer;font-weight:400}
  .actkeuze label.chk input{width:16px;height:16px;flex:none}
  .bar .lang{order:3;margin-left:12px}
  .bar .menu{order:4}
  .uitnodiging{position:fixed;right:24px;bottom:24px;z-index:60;width:min(370px,calc(100vw - 40px));
      background:#fff;border:1px solid var(--hair);border-top:3px solid var(--green);
      box-shadow:0 12px 34px rgba(0,0,0,.14);padding:22px 24px 20px;
      opacity:0;transform:translateY(14px);transition:opacity .26s ease,transform .26s ease}
  .uitnodiging.op{opacity:1;transform:none}
  .uitnsluit{position:absolute;top:8px;right:10px;width:28px;height:28px;border:0;background:none;
      color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0}
  .uitnsluit:hover{color:var(--ink)}
  .uitnkop{font-family:var(--disp);font-weight:700;font-size:16px;text-transform:uppercase;
      letter-spacing:.01em;margin:0 22px 8px 0;color:var(--ink)}
  .uitntekst{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--ink)}
  .uitnkeuzes{display:flex;flex-direction:column;gap:7px}
  .uitnkeuzes .btn{margin:0;justify-content:flex-start;text-align:left;font-size:12.5px;padding:10px 14px}
  .uitndank{margin-top:4px}
  .uitnknoppen{display:flex;gap:10px;flex-wrap:wrap}
  .uitnknoppen .btn{margin:0;font-size:12px;padding:9px 15px}
  .btn.uitnja{background:var(--green);border-color:var(--green);color:#0B0D0E}
  @media (max-width:620px){ .uitnodiging{right:12px;left:12px;bottom:12px;width:auto} }
  @media (prefers-reduced-motion:reduce){ .uitnodiging{transition:none} }
  .snelknop{margin:2px 0 22px;display:inline-flex}
  .pijlers{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 34px;margin-top:18px}
  .pijler{background:transparent;padding:0;border-top:0;border-left:2px solid var(--hair);padding-left:20px}
  .pijler .pnr{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
      color:var(--green);margin-bottom:10px}
  .pijler .pkop{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.25;
      text-transform:uppercase;letter-spacing:.01em;margin:0 0 10px}
  .pijler p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink)}
  @media (max-width:1000px){ .pijlers{grid-template-columns:1fr 1fr} }
  @media (max-width:620px){ .pijlers{grid-template-columns:1fr} }
  .drieop{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 34px;margin:24px 0 0}
  .drieop .eyebrow{margin-bottom:10px}
  .drieop .bullets{margin:0}
  @media (max-width:900px){ .drieop{grid-template-columns:1fr 1fr} }
  @media (max-width:620px){ .drieop{grid-template-columns:1fr} }
  .eigenblok .two{margin-top:6px}
  .eigenblok figure{margin:0}
  .eigenblok figure img{width:100%;display:block}
  .eigenblok figcaption{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--muted)}
  .galerij{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px}
  .galerij figure{margin:0}
  .galerij img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--paper)}
  .galerij figcaption{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--muted)}
  @media (max-width:900px){ .galerij{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){ .galerij{grid-template-columns:1fr} }
  .filmvak{margin-top:18px;background:#0B0D0E;position:relative;aspect-ratio:16/9;overflow:hidden}
  .filmvak iframe,.filmvak video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
  .filmvak .filmgeen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      padding:24px;text-align:center;color:#DCDCD6;font-size:14.5px;line-height:1.6}
  @supports not (aspect-ratio: 16/9){ .filmvak{height:0;padding-bottom:56.25%} }
  .webwelkom{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
  .webwelkom > div{flex:1 1 420px}
  .webwelkom .welkomkop{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.4vw,26px);
      line-height:1.25;text-transform:uppercase;letter-spacing:.005em;margin:0 0 10px;color:var(--ink)}
  .webwelkom p{margin:0;font-size:15px;line-height:1.65;max-width:60ch}
  .webwelkom .btn{margin:0;flex:none}
  .zelfdoen{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
      margin:26px 0 0;padding:22px 26px;background:var(--paper);border-left:3px solid var(--orange)}
  .zelfdoen > div{flex:1 1 380px}
  .zelfdoen p{margin:0;font-size:14.5px;line-height:1.65;max-width:66ch}
  .zelfdoen .kaderkop{font-family:var(--disp);font-weight:700;font-size:16px;line-height:1.3;
      text-transform:uppercase;letter-spacing:.01em;margin:0 0 8px;color:var(--ink)}
  .zelfdoen .btn{margin:0;flex:none}
  .kader{margin:28px 0 0;padding:20px 24px;background:rgba(254,165,0,.12);
      border-left:4px solid var(--orange)}
  .kader .kaderkop{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.3;
      text-transform:uppercase;letter-spacing:.01em;margin:0 0 8px;color:var(--ink)}
  .kader p{margin:0;font-size:15px;line-height:1.65;max-width:74ch}
  .bullets.tweekolom{columns:2;column-gap:34px}
  .bullets.tweekolom li{break-inside:avoid}
  @media (max-width:820px){ .bullets.tweekolom{columns:1} }
  .hero{padding:76px 0 46px;max-width:760px}
  #hub .hero{max-width:880px}
  #hub .hero h1{font-size:clamp(23px,6.2vw,76px)}
  .heel{white-space:nowrap;overflow-wrap:normal;word-break:keep-all;hyphens:none}
  .divisions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:transparent;border:0;margin:52px 0 0}
  .unit{background:var(--paper);padding:34px 28px 26px;display:flex;flex-direction:column;min-height:340px;text-decoration:none;color:inherit;position:relative}
  .unit::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--u);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
  .unit:hover::before,.unit:focus-visible::before{transform:scaleX(1)}
  .unit:focus-visible{outline:2px solid var(--u);outline-offset:-2px}
  .lock img{width:100%;max-width:266px}
  .lock .sub{font-family:var(--geo);font-weight:300;font-size:14.5px;letter-spacing:.115em;color:var(--ink);margin:7px 0 0;max-width:266px;text-align:center;white-space:nowrap}
  .desc{font-size:14.5px;line-height:1.6;color:var(--muted);margin:26px 0 0}
  .go{margin-top:auto;padding-top:24px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:9px}
  .go i{display:block;width:16px;height:1px;background:currentColor;transition:width .3s ease}
  .unit:hover .go,.unit:focus-visible .go{color:var(--u)}
  .unit:hover .go i,.unit:focus-visible .go i{width:30px}

  /* ---------- division page ---------- */
  .back{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding-top:34px}
  .back i{width:22px;height:1px;background:currentColor;display:block;transition:width .3s ease}
  .back:hover{color:var(--ink)}
  .back:hover i{width:34px}
  .top{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;padding:30px 0 56px}
  .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
  .btn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:14px 22px;border:1px solid var(--c);background:var(--c);color:#0B0D0E;transition:opacity .2s ease}
  .btn:hover{opacity:.82}
  .btn.line{background:transparent;color:var(--ink);border-color:var(--hair)}
  .btn.line:hover{border-color:var(--ink);opacity:1}
  .plate{background:transparent;border:0;padding:24px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
  .plate img{width:100%;max-width:320px}
  .plate .sub{font-family:var(--geo);font-weight:300;font-size:17px;letter-spacing:.115em;margin:9px 0 0;white-space:nowrap}
  .plate .note{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:22px 0 0}

  .block{padding:56px 0;border-top:1px solid var(--hair)}
  .h2{font-family:var(--disp);font-weight:600;font-size:clamp(22px,3.6vw,32px);overflow-wrap:break-word;text-transform:uppercase;letter-spacing:.01em;margin:14px 0 0}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;background:transparent;border:0;margin-top:30px}
  .card{background:transparent;padding:0 0 6px}
  .card h3{font-family:var(--disp);font-weight:600;font-size:19px;text-transform:uppercase;margin:0 0 10px}
  .card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
  .card .dia{margin-bottom:18px;width:18px;height:18px}

  .steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}
  .step{border-top:2px solid var(--ink);padding-top:16px}
  .step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--c)}
  .step h3{font-family:var(--disp);font-weight:600;font-size:18px;text-transform:uppercase;margin:10px 0 8px}
  .step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}

  .cta{background:transparent;border:1px solid var(--hair);border-left:4px solid var(--c);padding:34px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin:56px 0 0}
  .cta p{margin:0;max-width:46ch;font-size:15.5px;line-height:1.6;color:var(--muted)}
  .cta .h2{margin:0 0 8px}
  .cta .btn{margin-left:auto}

  .sister{display:flex;flex-wrap:wrap;gap:2px;background:var(--hair);border:1px solid var(--hair);margin-top:2px}
  .sister a{flex:1;min-width:230px;background:var(--paper);padding:22px 24px;text-decoration:none;color:inherit;display:flex;align-items:center;gap:14px;font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:17px}
  .sister a:hover{background:#F8F9F9}

  .tech{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:transparent;border:0;margin-top:26px}
  .tech span{flex:0 0 auto;background:transparent;padding:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
  .tech span::before{content:"";width:15px;height:15px;background:var(--diabg) center/contain no-repeat;border:0;transform:none;flex:none;width:14px;height:14px}
  .two{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;margin-top:26px}
  .two p{margin:0 0 16px;font-size:15.5px;line-height:1.65;color:var(--muted);max-width:54ch}
  .bullets{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
  .bullets li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--hair);font-size:14.5px;line-height:1.55}
  .bullets li::before{content:"";margin-top:4px;width:15px;height:15px;background:var(--diabg) center/contain no-repeat;border:0;transform:none;flex:none}
  .bridge{background:transparent;border:1px solid var(--hair);border-left:4px solid var(--blue);padding:30px 34px;display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:30px}
  .bridge p{margin:0;max-width:48ch;font-size:15.5px;line-height:1.6;color:var(--muted)}
  .bridge .btn{margin-left:auto;background:var(--blue);border-color:var(--blue);color:#fff}
  .oudebrowser{display:none}
  .oudebrowser .wrap{max-width:640px;margin:0 auto;padding:60px 24px;font-family:Arial,Helvetica,sans-serif;color:#0B0D0E}
  .oudebrowser h1{font-size:24px;margin:0 0 14px}
  .oudebrowser p{font-size:16px;line-height:1.6;margin:0 0 16px}
  .melding{background:var(--ink);color:#fff;font-size:14px;line-height:1.5}
  .melding .wrap{display:flex;align-items:center;gap:16px;padding:11px 28px}
  .melding .mtekst{flex:1}
  .melding a{color:#fff}
  .melding.warn{background:#B4451F;color:#fff}
  .melding.info{background:var(--green);color:#0B0D0E}
  .msluit{background:none;border:0;color:inherit;cursor:pointer;padding:4px;opacity:.7}
  .msluit:hover{opacity:1}
  .msluit svg{width:12px;height:12px;display:block}

  .melding.loop .wrap{overflow:hidden}
  .melding.loop .mtrack{position:relative;flex:1;height:1.5em;overflow:hidden}
  .melding.loop .mtekst{position:absolute;top:0;left:0;white-space:nowrap;
    transform:translateX(var(--start,100%));animation:mscroll linear infinite}
  .melding.loop:hover .mtekst{animation-play-state:paused}
  @keyframes mscroll{from{transform:translateX(var(--start,100%))}to{transform:translateX(var(--end,-100%))}}
  @media (prefers-reduced-motion: reduce){
    .melding.loop .mtekst{animation:none;position:static;transform:none;white-space:normal}
  }

  /* Safari ouder dan 14.1 kent geen gap in flexbox; daar vangen we de belangrijkste op */
  @supports not (inset: 0) {
    .bar > * + *{margin-left:14px}
    .actions > * + *{margin-left:12px}
    .shop .btns > * + *{margin-left:12px}
    .legal > * + *{margin-left:22px}
    .fgrid > * + *{margin-left:40px}
    .tech > * + *{margin-top:12px}
  }
  .topline{height:4px;background:var(--green)}
  .lang{display:flex;border:1px solid var(--hair);border-radius:22px;overflow:hidden;background:var(--paper)}
  .lang button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:7px 13px;border:0;background:transparent;color:var(--muted);cursor:pointer}
  .lang button[aria-pressed="true"]{background:var(--ink);color:#fff}

  .contact{padding:56px 0 8px;border-top:1px solid var(--hair);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  .contact .h2{margin:14px 0 0}
  .contact .lede{margin-top:16px}
  .rows{border-top:1px solid var(--hair)}
  .row{display:flex;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hair)}
  .row dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);width:96px;flex:none;margin:0}
  .row dd{margin:0;font-size:16px}
  .row dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
  .row dd a:hover{border-color:var(--ink)}

  footer{margin-top:74px;background:transparent;color:var(--ink);border-top:1px solid var(--hair);padding:36px 0 48px}
  footer img{height:32px;width:auto}
  .fgrid{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;margin-top:20px}
  .fgrid p{margin:0;font-size:14px;color:var(--muted)}
  .fgrid a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
  .fgrid a:hover{border-color:var(--ink)}
  .legal{margin-top:24px;padding-top:18px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:11.5px;
        letter-spacing:.08em;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 22px}
  .legal .rechten{font-weight:600;color:var(--ink)}
  .legal .note-r{margin-left:auto}
  .legal .ver{opacity:.7}

  @media (prefers-reduced-motion:no-preference){
    .page.on .rise{opacity:0;transform:translateY(16px);animation:rise .55s cubic-bezier(.2,.7,.3,1) forwards}
    .d1{animation-delay:.04s}.d2{animation-delay:.11s}.d3{animation-delay:.18s}.d4{animation-delay:.25s}
    @keyframes rise{to{opacity:1;transform:none}}
  }
  @media (max-width:900px){
    .top{grid-template-columns:1fr;gap:28px;padding-bottom:36px}
    .plate{order:-1;padding:28px 20px}
    .unit{min-height:0}
    .cta .btn,.bridge .btn{margin-left:0}
    .contact{grid-template-columns:1fr;gap:26px;padding-top:44px}
    .legal .note-r{margin-left:0}
    .two{grid-template-columns:1fr;gap:26px}
    .lock .sub,.plate .sub{font-size:13px;letter-spacing:.09em}
    nav a:nth-child(-n+1){display:none}
  }

  .bar{gap:18px}
  .logostack{position:relative;display:inline-block;line-height:0}
  .hdr img{height:44px;width:auto;display:block}
  .mk{position:absolute;background:var(--green);pointer-events:none}
  .mk.d{left:26.74%;top:15.99%;width:8.05%;height:36.61%;
        clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
  .mk.o{left:40.42%;top:30.06%;width:1.82%;height:8.29%;border-radius:50%}
  .mk{transition:transform .65s cubic-bezier(.34,1.45,.55,1),background-color .35s linear}
  @media (prefers-reduced-motion:reduce){
    .mk.d{transform:none !important;transition:background-color .35s linear}
  }
  .menu{position:relative;margin-left:auto}
  .mbtn{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
        background:#fff;border:1px solid var(--hair);border-radius:22px;padding:9px 16px;color:var(--ink);cursor:pointer}
  .mbtn:hover{border-color:var(--ink)}
  .mbtn svg{width:11px;height:8px;transition:transform .25s ease}
  .menu.open .mbtn svg{transform:rotate(180deg)}
  .menu.open .mbtn{border-color:var(--ink)}
  .mpanel{position:absolute;right:0;top:calc(100% + 12px);width:330px;background:#fff;border:1px solid var(--hair);
          max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
          box-shadow:0 22px 44px -18px rgba(10,16,12,.35);opacity:0;visibility:hidden;transform:translateY(-6px);
          transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:60}
  .menu.open .mpanel{opacity:1;visibility:visible;transform:none}
  .mpanel a{display:flex;gap:14px;align-items:flex-start;padding:15px 18px;text-decoration:none;color:inherit;border-bottom:1px solid var(--hair)}
  .mpanel a:last-child{border-bottom:0}
  .mpanel a:hover,.mpanel a:focus-visible{background:#F5F7F5}
  .mzoek{padding:12px 18px;border-top:1px solid var(--hair);background:#FAFBFA}
  .mzoek label{display:block}
  .mzoek input{width:100%;font-family:var(--body);font-size:15px;padding:11px 12px;
      border:1px solid var(--hair);background:#fff;color:var(--ink);border-radius:0;
      text-overflow:ellipsis}
  .mzoek input::placeholder{color:#6B747A;opacity:1}
  .mzoek input:focus{outline:2px solid var(--green);outline-offset:1px}
  .zresult{margin-top:8px;max-height:46vh;overflow-y:auto}
  .zresult button{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
      padding:10px 0;border-bottom:1px solid var(--hair);font-family:var(--body)}
  .zresult button:hover{background:transparent}
  .zresult b{display:block;font-size:14.5px;color:var(--ink)}
  .zresult span{display:block;font-size:12.5px;color:#3F484D;margin-top:3px;line-height:1.5}
  .zresult em{background:rgba(125,197,27,.35);font-style:normal}
  .zresult .zpage{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .zgeen{font-size:13.5px;color:var(--muted);padding:10px 0}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .msection{display:none;border-top:1px solid var(--hair);background:#FAFBFA;padding:14px 18px 16px}
  html[data-p="hub"] .msection[data-for="hub"],
  html[data-p="engineering"] .msection[data-for="engineering"],
  html[data-p="locking"] .msection[data-for="locking"],
  html[data-p="data"] .msection[data-for="data"]{display:block}
  .mhead{margin:0 0 6px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .msection a{display:block;padding:9px 0;border:0;font-family:var(--body);font-size:14.5px;color:var(--ink);text-transform:none;letter-spacing:0}
  .msection a:hover,.msection a:focus-visible{background:transparent;color:var(--c);text-decoration:underline}
  .mpanel .dia{margin-top:4px;width:16px;height:16px}
  .mpanel b{display:block;font-family:var(--disp);font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.01em}
  .mpanel i{display:block;font-style:normal;font-size:13px;line-height:1.45;color:var(--muted);margin-top:3px}
  .lang button{font-size:11.5px;padding:8px 14px}
  @media (max-width:1000px){ .tag{display:none} }

  [data-go]{cursor:pointer}
  [data-go]:focus-visible{outline:2px solid var(--c);outline-offset:3px}

  /* formulieren */
  .fbtn{margin-top:26px;width:100%;background:var(--green);color:#0B0D0E;border:0;cursor:pointer;
       font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:17px 22px}
  .fbtn:hover{filter:brightness(.94)}
  .formpanel{display:none;margin-top:22px;border-top:1px solid var(--hair);padding-top:24px}
  .formpanel.on{display:block}
  .form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .field{display:flex;flex-direction:column;gap:8px}
  .field.full{grid-column:1 / -1}
  .field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:#3F484D}
  .field input,.field select,.field textarea{font-family:var(--body);font-size:15px;color:var(--ink);background:#fff;
      border:1px solid var(--hair);border-radius:0;padding:12px 14px;width:100%}
  .field textarea{resize:vertical;min-height:118px;line-height:1.5}
  .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
  .field.check label{display:flex;gap:12px;align-items:flex-start;font-family:var(--body);font-size:14.5px;line-height:1.5;
      letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer}
  .field.check input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--green)}
  .send{width:100%;margin-top:14px;background:var(--green);color:#0B0D0E;border:0;cursor:pointer;
      font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:17px 22px}
  .send:hover{filter:brightness(.94)}
  .onderwerpen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 26px;margin:4px 0 8px}
  .ogroep .eyebrow{font-size:10.5px;letter-spacing:.12em;margin:0 0 8px}
  .ogroep .eyebrow::before{width:20px;height:9px}
  .ogroep .chk{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.4;
      color:var(--ink);cursor:pointer;margin-bottom:8px}
  .ogroep .chk input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--c)}
  @media (max-width:820px){ .onderwerpen{grid-template-columns:1fr} }
  .kvkgekozen{display:flex;align-items:center;gap:10px;margin:8px 0 0;
      font-family:var(--body);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}
  .kvkrondje{width:30px;height:30px;flex:none;border-radius:50%;display:flex;
      align-items:center;justify-content:center;background:var(--green);color:#0B0D0E}
  .kvkrondje svg{width:16px;height:16px}
  .kvkrondje.metlogo{background:#fff;border:1px solid var(--hair);overflow:hidden}
  .kvkrondje img{width:100%;height:100%;object-fit:contain;padding:3px}
  .kvkveld{position:relative}
  .kvkveld .flabel{display:flex;align-items:baseline;gap:3px}
  .kvkveld .flabel .ster{color:#B4451F;font-weight:700;font-size:13px}
  .kvklijst{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;
      border:1px solid var(--hair);border-top:0;max-height:260px;overflow-y:auto}
  .kvklijst button{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
      padding:11px 13px;border-bottom:1px solid var(--hair);font-family:var(--body);font-size:14.5px}
  .kvklijst button:hover,.kvklijst button:focus{background:#F2F7EA}
  .kvklijst b{display:block;color:var(--ink)}
  .kvklijst span{display:block;font-size:12.5px;color:#3F484D;margin-top:2px}
  .kvklijst .leeg{padding:11px 13px;font-size:13.5px;color:var(--muted)}
  .kvkhelp{margin-top:7px}
  .kvkgekozen{margin-top:7px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
      text-transform:uppercase;color:#3F7A0C}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .fnote{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:#3F484D}
  [hidden]{display:none !important}
  .afsterug{margin-top:14px;display:inline-block}
  .naverzending{display:block;margin-top:16px;padding:13px 16px;
      background:rgba(125,197,27,.16);border-left:3px solid var(--green);
      font-family:var(--body);font-size:14.5px;line-height:1.55;color:var(--ink);letter-spacing:0}
  .misveld{outline:2px solid #B4451F;outline-offset:6px;border-radius:2px}
  .misveld input,.misveld textarea{border-color:#B4451F}
  .fmsg{display:none;margin:14px 0 12px;padding:14px 16px;border-left:3px solid var(--green);background:#F2F7EA;font-size:14.5px;line-height:1.5}
  .fmsg.on{display:block}
  .fmsg.bad{border-color:#C0392B;background:#FBEFEC}

  .scanbox{border:1px solid var(--hair);background:transparent;padding:22px 26px 26px;margin-top:28px}
  .scanbox .fbtn{margin-top:0;width:auto;display:inline-block}
  .srow{padding:16px 0;border-bottom:1px solid var(--hair)}
  .srow:last-child{border-bottom:0}
  .sq{margin:0 0 12px;font-size:15.5px;line-height:1.5}
  .sopt{display:flex;gap:8px;flex-wrap:wrap}
  .sopt button{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
      padding:10px 16px;border:1px solid var(--hair);background:transparent;color:var(--ink);cursor:pointer}
  .sopt button:hover{border-color:var(--ink)}
  .sopt button[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#0B0D0E}
  .scanout{margin-top:26px;border-top:3px solid var(--ink);padding-top:20px}
  .sscore{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
  .slabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .svalue{font-family:var(--disp);font-weight:700;font-size:30px;font-variant-numeric:tabular-nums}
  .sbar{height:8px;background:var(--hair);margin:14px 0 18px;overflow:hidden}
  .sbar i{display:block;height:100%;width:0;background:var(--c);transition:width .6s cubic-bezier(.2,.7,.3,1)}
  .sadvice{margin:0 0 8px;font-size:15.5px;line-height:1.65;color:var(--muted);max-width:62ch}
  .kagain{margin-left:12px}
  @media (max-width:560px){ .scanbox{padding:20px 18px 22px} .scanbox .fbtn,.ksend,.kagain{width:100%} .kagain{margin:10px 0 0} }
  .ctable{margin-top:26px;border-top:1px solid var(--hair)}
  .crow2{display:grid;grid-template-columns:1.1fr 1.2fr 1.2fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--hair);align-items:baseline}
  .crow2 .cwhat{font-weight:600;font-size:14.5px}
  .crow2 .cmech,.crow2 .csmart{font-size:14.5px;line-height:1.55;color:#3F484D}
  .crow2 .csmart{position:relative}
  .crow2 .csmart{padding-left:24px}
  .crow2 .csmart::before{content:"";position:absolute;left:0;top:.15em;width:15px;height:15px;
      background:var(--diabg) center/contain no-repeat}
  .chead{border-bottom:2px solid var(--ink);padding-bottom:10px}
  .chead span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
  .chead .csmart{padding-left:24px;color:var(--c)}
  .chead .csmart::before{display:none}
  @media (max-width:700px){
    .crow2{grid-template-columns:1fr;gap:6px;padding:16px 0}
    .chead{display:none}
    .crow2 .cmech::before{content:"✕ ";color:#B4451F}
  }
  .docdl{border:1px solid var(--hair);background:transparent;padding:24px 28px 26px;margin-top:30px}
  .docdl .h2{margin-top:10px;font-size:clamp(19px,3.1vw,26px);overflow-wrap:normal;word-break:keep-all}
  .docdl .lede{margin-bottom:6px;max-width:60ch}
  .docdl .form{margin-top:10px}
  .docdl .send{width:auto;display:inline-block;margin-top:8px}
  @media (max-width:560px){ .docdl{padding:20px 18px 22px} .docdl .send{width:100%} }
  .shop{background:transparent;border:1px solid var(--hair);border-left:4px solid var(--c);padding:26px 30px;
       display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:30px}
  .shop p{margin:0;max-width:48ch;font-size:15.5px;line-height:1.6;color:var(--muted)}
  .shop .sub{margin-top:10px;font-size:14.5px}
  .shop .btns{margin-left:auto;display:flex;flex-wrap:wrap;gap:12px}
  .shop .btn{color:#0B0D0E;display:inline-flex;align-items:center;justify-content:center;
      min-height:50px;min-width:210px;text-align:center}
  @media (max-width:620px){ .shop .btns{margin-left:0;width:100%} .shop .btn{width:100%} }
  .btn.org{background:var(--orange);border-color:var(--orange);color:#0B0D0E}
  .btn.org:hover{filter:brightness(.95);border-color:var(--orange)}
  .btn.grn{background:var(--green);border-color:var(--green);color:#0B0D0E}
  .btn.grn:hover{filter:brightness(.95);border-color:var(--green)}
  @media (max-width:760px){ .shop .btns{margin-left:0;width:100%} .shop .btn{flex:1;text-align:center} }

  .fmts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
  .fmt{border-top:3px solid var(--c);padding:14px 0 0}
  .fmt b{display:block;font-family:var(--disp);font-weight:600;font-size:20px;text-transform:uppercase;letter-spacing:.01em}
  .fmt span{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#3F484D}
  @media (max-width:620px){ .fmts{grid-template-columns:1fr} }
  .logos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:transparent;border:0;margin-top:26px}
  .logos .cslide{background:transparent;border:0;box-shadow:none;min-height:0;
      padding:26px 18px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
  .lgcell img{height:52px;width:auto;display:block;mix-blend-mode:multiply}
  .lgcell span{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  @media (max-width:620px){ .logos .cslide{flex:0 0 74%} }

  .divisions,.cards,.tech,.portals,.logos,.gallery,.calc,.branch,.upcoming,.rows{background:transparent;border-color:transparent}
  .unit,.gallery figure,.branch a{box-shadow:0 0 0 1px var(--hair)}
  .divisions,.cards,.portals,.logos,.gallery,.calc,.branch{gap:12px}
  .calcbox{border:1px solid var(--hair);background:transparent;padding:24px 28px 28px;margin-top:28px}
  .calcbox .fbtn{margin-top:0;width:auto;display:inline-block}
  .cfg .cgrid{grid-template-columns:1fr}
  .lcbox .cgrid{grid-template-columns:1fr;gap:0}
  .lcbox .calc,.lcbox .calc > *,.lcbox .cgrid > *,.lcbox .cout > *{min-width:0}
  .lcbox *{overflow-wrap:break-word}
  .agkal,.agdagen,.agweek{min-width:0}
  .agdagen button{min-width:0;aspect-ratio:auto;height:40px}
  .agenda .cfield input[type="tel"]{max-width:340px}
  .agenda .cfield label,.agenda .fnote{max-width:56ch}
  /* dezelfde maatvoering, waar de agenda ook staat */
  .agenda label,.agenda .cfield label,.agenda .field label{
      font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
      color:var(--muted);line-height:1.5;margin:0 0 7px;display:block}
  .agenda .eyebrow,.scanout .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
      text-transform:uppercase;color:#3F484D;margin:0 0 8px}
  .agenda .eyebrow::before,.scanout .eyebrow::before{width:24px;height:10px}
  .scanout .lchoe .chk,.scanout .lcopts .chk{font-size:14.5px}
  .scanout .field label{font-size:10.5px;letter-spacing:.1em}
  .agenda .fnote{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
      color:#3F484D;line-height:1.6}
  .agenda .lchoe .chk,.agenda .chk{font-size:14.5px;line-height:1.45}
  .agenda .agdatum{font-size:11px;letter-spacing:.12em}
  .agenda .agsloten button{font-size:12px}
  .agenda .agdagen button{font-size:14px}
  .agenda .agkop strong{font-size:16px}
  .agenda .agbekend{font-size:14.5px}
  .agenda .aggekozen{font-size:15px}
  .agenda input[type="tel"]{font-family:var(--body);font-size:15px}
  .afsbox .cfield input,.afsbox .cfield select,.afsbox .cfield textarea{
      font-family:var(--body);font-weight:400;font-size:15px;height:auto;padding:12px 13px;
      background:#fff;color:var(--ink);border:1px solid var(--hair);width:100%;max-width:340px}
  .afsbox .cfield textarea{max-width:none;line-height:1.6;resize:vertical}
  .afsbox .cfield select{max-width:340px}
  .lcbox .cgrid > .eyebrow{margin:26px 0 10px;padding-top:18px;border-top:1px solid var(--hair)}
  .lcbox .cgrid > .eyebrow:first-child{margin-top:0;padding-top:0;border-top:0}
  .lcrij{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;align-items:start;margin:12px 0}
  .lcrij .cfield{min-width:0}
  .lcbox .cfield input[type="number"],
  .lcbox .cfield select{max-width:190px}
  .ombox .cfield select{max-width:none}
  .lcbox .cfield input[type="email"],
  .lcbox .cfield input[type="tel"]{max-width:340px}
  .lcbox .cfield input,.lcbox .cfield select{background:#fff}
  .agenda label,.lcbox .cgrid label,.lcbox .cgrid .fnote,.lcbox .cgrid .chk span,
  .lcbox .cout .fnote,.lcbox .lcinstap{max-width:56ch}
  .lcbox .cgrid > .eyebrow{max-width:none}
  .lcgroep{padding:2px 0 6px 28px;margin:0 0 6px}
  .lcgroep.uit{display:none}
  .lcopts{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:12px 0}
  .lcopts.uit{opacity:.45}
  .lcopts.uit .chk{cursor:not-allowed}
  .lcopts .chk,.lcbox .chk,.lchoe .chk,.scanout .chk{display:flex;align-items:flex-start;gap:10px;
      font-family:var(--body);font-weight:400;font-size:14.5px;letter-spacing:0;text-transform:none;
      color:var(--ink);cursor:pointer;line-height:1.45}
  .chk span{font-family:var(--body);font-weight:400;font-size:14.5px;letter-spacing:0;
      text-transform:none;color:var(--ink);line-height:1.45}
  .lcopts .chk input,.lcbox .chk input,.lchoe .chk input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--c)}
  .lchoe{display:grid;gap:9px;margin-top:8px}
  .lchoe .chk.uit{opacity:.4}
  .lchoe .chk.uit input{cursor:not-allowed}
  .lcinstap{margin:16px 0 0;padding:13px 16px;background:rgba(125,197,27,.14);
      border-left:3px solid var(--green);font-size:14.5px;line-height:1.5}
  .lcinstap b{font-family:var(--disp);font-weight:700;white-space:nowrap}
  .lcbox .crow{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:14px 20px;padding:13px 0;align-items:baseline}
  .lcbox .crow span{font-size:14.5px;line-height:1.45;color:var(--ink);overflow-wrap:break-word}
  .lcbox .crow b{font-family:var(--body);font-weight:700;font-size:16px;white-space:normal;
      text-align:right;line-height:1.4;overflow-wrap:break-word}
  .lcbox .crow.total{border-top:2px solid var(--ink);border-bottom:0;margin-top:8px;padding-top:15px}
  .lcbox .crow.total span{font-weight:600}
  .lcbox .crow.total b{font-size:19px;letter-spacing:-.01em}
  @media (max-width:520px){
    .lcbox .crow{grid-template-columns:1fr;gap:4px}
    .lcbox .crow b{text-align:left}
  }
  .agenda{margin-top:22px;padding-top:20px;border-top:1px solid var(--hair)}
  .agkal{margin:14px 0 0;border:1px solid var(--hair);background:rgba(255,255,255,.55);padding:12px 14px 14px}
  .agkop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
  .agkop strong{font-family:var(--disp);font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.02em}
  .agkop button{border:1px solid var(--hair);background:#fff;color:var(--ink);cursor:pointer;
      width:34px;height:34px;font-size:19px;line-height:1;padding:0}
  .agkop button:hover:not(:disabled){border-color:var(--ink)}
  .agkop button:disabled{opacity:.3;cursor:default}
  .agweek,.agdagen{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
  .agweek span{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
      text-transform:uppercase;color:#3F484D;padding-bottom:4px}
  .agdagen button{aspect-ratio:1/1;min-height:38px;border:1px solid var(--hair);background:#fff;
      color:var(--ink);cursor:pointer;font-family:var(--body);font-size:14px;padding:0}
  .agdagen button:hover{border-color:var(--ink)}
  .agdagen button[aria-pressed="true"]{background:var(--c);border-color:var(--c);font-weight:700}
  .agdagen .leeg{border:0;background:none}
  .agdagen button:disabled{border-color:transparent;background:none;color:#B9C0C4;cursor:default}
  .agtijden{margin-top:14px}
  .agsloten{display:flex;flex-wrap:wrap;gap:8px}
  .agsloten button{font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:9px 13px;
      border:1px solid var(--hair);background:#fff;color:var(--ink);cursor:pointer}
  .agsloten button:hover{border-color:var(--ink)}
  .agsloten button[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#0B0D0E;font-weight:700}
  .agbekend{margin:10px 0 0;padding:11px 14px;background:rgba(125,197,27,.16);
      border-left:3px solid var(--green);font-size:14.5px;line-height:1.5}
  .agbekend b{display:block;font-weight:700;margin-bottom:2px}
  .agbknoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .agbknoppen button{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
      padding:9px 14px;border:1px solid var(--hair);background:#fff;color:var(--ink);cursor:pointer}
  .agbknoppen .agja{background:var(--green);border-color:var(--green);font-weight:700}
  .agbknoppen button:hover{filter:brightness(.96)}
  .agdagen button.albekend{outline:2px solid var(--green);outline-offset:-2px}
  .agenda{max-width:640px}
  .scanbox .agenda{margin-top:18px}
  .scanbox .lchoe{margin-bottom:4px}
  .aggekozen{margin:12px 0 0;font-size:15px}
  .aggekozen b{font-weight:700}
  .cfield.vaag label,.cfield.vaag .fnote{opacity:.6}
  .cfield .ster{color:#B4451F;font-weight:700;margin-left:3px;font-size:13px}
  .cfield label + .ster{margin-left:0;margin-right:0;position:relative;top:-6px}
  .lcknoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
  .lcbox .cout .btn{margin:0;min-width:0;flex:1 1 200px}
  @media (max-width:640px){
    .lcrij,.lcopts{grid-template-columns:1fr}
    .lcgroep{padding-left:0}
  }
  @media (max-width:420px){
    .agkal{padding:10px 8px 12px}
    .agdagen{gap:3px}
    .agweek{gap:3px}
    .agdagen button{height:34px;font-size:12.5px}
    .lcbox .calcbox,.calcbox{padding-left:14px;padding-right:14px}
    .agsloten button{width:100%}
  }
  .lkbox .cgrid{grid-template-columns:1fr 1fr}
  .lkopts{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-top:4px}
  .lkopts .chk{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink);cursor:pointer}
  .lkopts .chk input{width:18px;height:18px;flex:none;accent-color:var(--c)}
  @media (max-width:560px){ .lkbox .cgrid,.lkopts{grid-template-columns:1fr} }
  .cfgbox .cmailrow{margin-top:18px}
  .cfgbox .crow.total b{color:var(--muted);font-size:20px}
  .cfgbox.open .crow.total b{color:var(--ink);font-size:27px}
  .calcbox .formpanel{border-top:1px solid var(--hair)}
  .calcbox .calc{margin-top:0;border:0}
  .calc{display:grid;grid-template-columns:1.05fr .95fr;gap:0 34px;background:transparent;border:0;margin-top:26px}
  .cgrid{background:transparent;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;align-items:start}
  .cfield{display:flex;flex-direction:column;gap:8px}
  .cfield label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.4;min-height:2.8em;display:flex;align-items:end}
  .cfield input,.cfield select{height:48px;font-family:var(--disp);font-weight:600;font-size:19px;color:var(--ink);background:#fff;
      border:1px solid var(--hair);border-radius:0;padding:0 12px;width:100%}
  .cfield input:focus,.cfield select:focus{outline:2px solid var(--c);outline-offset:1px;border-color:var(--c)}
  .cout{background:transparent;padding:0 0 0 34px;border-left:1px solid var(--hair)}
  .crow{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--hair)}
  .crow:first-child{padding-top:0}
  .crow span{font-size:14px;line-height:1.4;color:var(--muted)}
  .crow b{font-family:var(--disp);font-weight:700;font-size:20px;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
  .crow.total{border-bottom:0;border-top:3px solid var(--ink);margin-top:6px;padding-top:16px}
  .crow.total span{color:var(--ink);font-size:14px}
  .crow.total b{font-size:27px;letter-spacing:-.01em}
  .crow.save b{color:var(--c)}
  .crow.small b{font-size:15px;font-family:var(--mono);font-weight:500}
  .cfield select{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--ink);background:var(--paper);
      border:1px solid var(--hair);border-radius:0;padding:10px 12px;width:100%}
  .cout .fnote{margin-top:14px;line-height:1.5}
  .cmailrow{margin-top:22px}
  .cmailrow input{height:44px;font-family:var(--body);font-weight:400;font-size:15px}
  .cout .btn{margin:14px 10px 0 0;min-width:210px;min-height:50px;padding:15px 20px;
      display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:12px}
  @media (max-width:560px){ .cout .btn{width:100%;margin-right:0} }
  .cmail{margin-top:14px;background:var(--green);border-color:var(--green);color:#0B0D0E;cursor:pointer;
        display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:14px 20px}
  .cmail:hover{filter:brightness(.95)}
  @media (max-width:900px){
    .calc{grid-template-columns:1fr;gap:26px}
    .cout{padding:24px 0 0;border-left:0;border-top:1px solid var(--hair)}
  }
  @media (max-width:560px){
    .cgrid{grid-template-columns:1fr;gap:16px}
    .calcbox{padding:20px 18px 22px}
    .calcbox .fbtn{width:100%}
  }

  /* fotogalerij */
  .gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:transparent;border:0;margin-top:34px}
  .gallery figure{margin:0;background:var(--paper);display:flex;flex-direction:column}
  .gallery .wide{grid-column:1 / -1}
  .gallery img{width:100%;height:240px;object-fit:cover;display:block}
  @supports (aspect-ratio: 4 / 3){
    .gallery img{height:100%;aspect-ratio:4 / 3}
    }
  .gallery .wide img{aspect-ratio:16 / 9}
  .gallery.prod figure{background:#fff}
  .gallery.prod img{object-fit:contain;background:#fff}
  .gallery figcaption{font-size:13.5px;line-height:1.5;color:var(--muted);padding:14px 18px 18px}

  /* portalen op de datapagina */
  .portals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:transparent;border:0;margin-top:30px}
  .portal{background:transparent;padding:26px 24px 20px}
  .portal h3{font-family:var(--disp);font-weight:600;font-size:21px;text-transform:uppercase;letter-spacing:.02em;margin:0;
             padding-bottom:14px;border-bottom:3px solid var(--c)}
  .portal .pintro{margin:16px 0 4px;font-size:14.5px;line-height:1.6;color:var(--muted)}
  .portal .bullets li{font-size:14px;padding:13px 0}
  #locking-protocols .bullets{margin-top:18px}

  /* twee onderdelen op de locking-pagina */
  .branch{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:transparent;border:0;margin:0 0 8px}
  .part{display:none}
  #locking[data-part="locks"] .part[data-part="locks"],
  #locking[data-part="lockers"] .part[data-part="lockers"]{display:block}
  .partback{margin-left:auto;background:none;border:0;cursor:pointer;font-family:var(--mono);
      font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
      padding:6px 0;border-bottom:1px solid var(--hair)}
  .partback:hover{color:var(--ink);border-color:var(--ink)}
  .parthead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
  .btab{font:inherit;text-align:left;cursor:pointer;border:0;background:transparent}
  .btab[aria-selected="true"]{background:rgba(255,255,255,.62)}
  .btab[aria-selected="true"]::before{transform:scaleX(1)}
  .btab[aria-selected="true"] .go{color:var(--c)}
  .branch a,.branch button{background:var(--paper);padding:26px 26px 22px;display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative}
  .branch a::before,.branch button::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
  .branch a:hover::before,.branch a:focus-visible::before,
  .branch button:hover::before,.branch button:focus-visible::before{transform:scaleX(1)}
  .branch .n{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--c)}
  .branch b{font-family:var(--disp);font-weight:600;font-size:24px;text-transform:uppercase;letter-spacing:.01em;margin:10px 0 8px}
  .branch i{font-style:normal;font-size:14.5px;line-height:1.55;color:var(--muted)}
  .branch .go{margin-top:18px;padding-top:0}
  .parthead{display:flex;align-items:baseline;gap:16px;border-top:3px solid var(--c);padding-top:18px;margin-bottom:18px}
  .parthead .n{font-family:var(--disp);font-weight:700;font-size:34px;line-height:1;color:var(--c)}
  .parthead .t{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

  /* nieuws, succesverhalen en upcoming */
  .news{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:transparent;border:0;margin-top:28px}
  .quotes .cslide{flex:0 0 100%;min-height:0}
  .story{background:transparent;margin:0;padding:32px 30px;display:flex;flex-direction:column}
  .story blockquote{margin:0;border-left:3px solid var(--c);padding-left:20px}
  .story blockquote p{margin:0;font-family:var(--disp);font-weight:600;font-size:21px;line-height:1.3}
  .story figcaption{margin-top:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .storybox{border:1px solid var(--hair);border-top:0;background:transparent;padding:24px 28px 28px}
  .storybox .fbtn{margin-top:0}
  .upcoming{border-top:1px solid var(--hair);margin-top:26px}
  .uprow{display:flex;gap:28px;padding:22px 0;border-bottom:1px solid var(--hair);align-items:baseline}
  .update{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);width:120px;flex:none}
  .privwrap{padding:44px 0 70px;max-width:760px}
  .privwrap .eyebrow{margin-top:34px}
  .privwrap p{font-size:15.5px;line-height:1.7;color:var(--muted);margin:0 0 12px;max-width:66ch}
  .privwrap .h2{margin:6px 0 16px}
  .plink{cursor:pointer;color:var(--ink);border-bottom:1px solid var(--hair);text-decoration:none}
  .plink:hover{border-color:var(--ink)}
  .rapportlaag{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(10,16,12,.55);z-index:60;overflow-y:auto;padding:24px}
  .rapportvel{background:#fff;max-width:820px;margin:0 auto;padding:0 0 36px}
  .rapportkop{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;position:-webkit-sticky;position:sticky;top:0;background:#fff;border-bottom:1px solid var(--hair)}
  .rsluit{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--muted);padding:0 6px}
  .rapportinhoud{padding:26px 34px 0}
  .rtitel{font-family:var(--disp);font-weight:700;font-size:clamp(19px,3.4vw,24px);text-transform:uppercase;margin:0 0 8px;overflow-wrap:break-word}
  .rslot{color:var(--muted);margin:0 0 24px;max-width:62ch;font-size:14.5px;line-height:1.6}
  .rtwee{display:block}
  .rtwee > div + div{margin-top:30px}
  .rtwee h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#3F484D;margin:0 0 6px}
  .rtabel{border-top:1px solid var(--hair)}
  .rrij{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
        padding:11px 0;border-bottom:1px solid var(--hair);font-size:14.5px;line-height:1.45}
  .rrij .rlabel{flex:1 1 58%;min-width:0;font-family:var(--body);font-size:14.5px;font-weight:400;
        color:var(--ink);letter-spacing:0;text-transform:none;display:block;overflow-wrap:break-word}
  .rrij .rwaarde{flex:1 1 auto;text-align:right;white-space:normal;font-variant-numeric:tabular-nums;
        font-family:var(--body);font-size:14.5px;font-weight:600;line-height:1.45;color:var(--ink);
        letter-spacing:0;text-transform:none;display:block;overflow-wrap:break-word}
  .rrij b{font-family:var(--body);font-size:15.5px;font-weight:700;display:inline;text-transform:none;
        letter-spacing:0;color:var(--ink);line-height:inherit}
  @media (max-width:700px){ .rapportinhoud{padding:22px 20px 0} .rtwee td:first-child{width:58%} }
  @media print{
    body > *:not(.rapportlaag){display:none !important}
    .rapportlaag{position:static;background:#fff;padding:0;overflow:visible}
    .rapportkop{display:none}
    .rapportvel{max-width:none}
  }
  .fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;--c:var(--green);
       display:flex;align-items:stretch;gap:1px;opacity:0;visibility:hidden;transform:translateY(70px);
       transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.3,1),visibility .45s}
  .fab.on{opacity:.94;visibility:visible;transform:none}
  .fab:hover{opacity:1}
  .fabmain{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
          border:0;background:var(--c);color:#0B0D0E;padding:14px 18px;box-shadow:0 8px 24px -10px rgba(10,16,12,.5)}
  .fabmain:hover{filter:brightness(.95)}
  .fabx{border:0;cursor:pointer;background:var(--c);color:#0B0D0E;width:34px;display:flex;align-items:center;justify-content:center;
       box-shadow:0 8px 24px -10px rgba(10,16,12,.5);opacity:.75}
  .fabx:hover{opacity:1}
  .fabx svg{width:11px;height:11px}
  @media (prefers-reduced-motion:reduce){ .fab{transition:opacity .3s ease,visibility .3s;transform:none} }
  @media (max-width:620px){
    .fab{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
    .fabmain{padding:13px 15px;font-size:11px}
    .fabx{width:30px}
  }

  .carousel{margin-top:28px;position:relative;overflow:hidden}
  .ctrack{display:flex;gap:16px;background:transparent;transition:transform .6s cubic-bezier(.2,.7,.3,1);will-change:transform}
  .cslide{flex:0 0 calc(33.333% - 11px);background:transparent;border:1px solid var(--hair);
         padding:26px 24px 22px;text-decoration:none;color:inherit;display:flex;flex-direction:column;min-height:250px;
         transition:border-color .2s ease,background .2s ease}
  .cslide:hover,.cslide:focus-visible{border-color:var(--c);background:rgba(255,255,255,.45)}
  .cdate{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--c);margin-bottom:12px}
  .cslide h3{font-family:var(--disp);font-weight:600;font-size:20px;line-height:1.15;text-transform:uppercase;margin:10px 0 10px}
  .cslide p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
  .cslide .go{margin-top:auto;padding-top:20px;color:var(--c)}
  .cnav{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
  .cbtn{width:44px;height:44px;border:1px solid var(--hair);background:rgba(255,255,255,.6);color:var(--ink);cursor:pointer;
       display:flex;align-items:center;justify-content:center;border-radius:50%}
  .cbtn:hover{border-color:var(--ink)}
  .cbtn svg{width:11px;height:18px}
  .cpause svg{width:11px;height:13px;fill:currentColor}
  .cpause[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  @media (max-width:900px){ .cslide{flex:0 0 calc(50% - 8px)} }
  @media (max-width:620px){ .cslide{flex:0 0 88%;min-height:0} }
  .uprow.link{text-decoration:none;color:inherit;transition:background .2s ease}
  .uprow.link:hover,.uprow.link:focus-visible{background:#F7F8F8}
  .utag{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
        text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  .utag .dia{width:13px;height:13px}
  .uprow h3{font-family:var(--disp);font-weight:600;font-size:19px;text-transform:uppercase;margin:0 0 6px}
  .uprow p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}

  @media (max-width:900px){
    .divisions,.cards,.steps,.news,.stories,.portals{grid-template-columns:1fr}
  }
  @media (max-width:620px){
    .form,.gallery,.branch{grid-template-columns:1fr}
    .uprow{flex-direction:column;gap:8px}
    .update{width:auto}
  }

  .num{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(46px,7vw,72px);line-height:.95;
       letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .slabel{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:16px}
  @media (max-width:900px){ .stats{grid-template-columns:1fr} }
  @media (max-width:1000px){ .tag{display:none} }
  @media (max-width:620px){
    .wrap{padding:0 16px}
    .bar{gap:6px;height:auto;min-height:62px;flex-wrap:wrap;padding:10px 0}
    .hdr img{height:40px !important;width:182px !important;max-width:60vw}
    .hdricons{gap:8px}
    .shopknop{padding:4px}
    .shopknop svg{width:19px;height:19px}
    .lang button{padding:6px 7px;font-size:10px;letter-spacing:.03em}
    .mbtn{padding:6px 9px;gap:0}
    .mbtn span{display:none}
    .mpanel{width:min(320px,calc(100vw - 28px));max-height:calc(100vh - 84px)}
    .mpanel a{padding:12px 16px}
    .mpanel i{display:none}
    .msection{padding:12px 16px 14px}
    .msection a{padding:8px 0}

    /* rij 1: logo (gecentreerd) — rij 2: taal (links) + iconen + menu-dropdown (rechts) */
    .hdr{order:2;margin-left:auto;margin-right:auto}
    .hdrbreek2{order:3;flex-basis:100%;height:0}
    .bar .lang{order:4;margin-left:0;margin-right:0;margin-top:4px}
    .hdricons{order:5;margin-left:auto;margin-top:4px}
    .bar .menu{order:5;margin-left:0;margin-top:4px}
  }
  @media (max-width:380px){
    .hdr img{height:34px !important;width:155px !important}
    .lang button{padding:6px 6px;font-size:9.5px}
    .hdricons{gap:6px}
    .bar{gap:5px}
  }