/* Responsive laag over de website-pagina's uit reference/ (desktop-only prototype). Wordt door lib/reference.ts
   ingevoegd op elke website-pagina (niet op /mockup). Zie docs/afwijkingen.md. */
@media (max-width:1024px){
  .wrap{padding:0 20px !important}
  .wrap[style*="grid-template-columns"],.sec [style*="grid-template-columns"],.bento,.tl,.g2,.g3{grid-template-columns:1fr !important}
  .bento>*{grid-column:auto !important;grid-row:auto !important}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .d.xl,h1.d{font-size:44px !important;line-height:1.05 !important}
  h2.d{font-size:34px !important}
  .sec{padding:64px 0 !important}
  .stage{height:auto !important;min-height:0 !important;padding:16px}
  .stage .float,.show .float,.note{position:static !important;transform:none !important;margin:12px 0;max-width:100% !important;width:auto !important;animation:none !important;align-items:flex-start !important;text-align:left !important}
  .show .tilt,.show .tilt2,.show .flat{transform:none !important}
  .show .mask,.show .maskr{-webkit-mask-image:none !important;mask-image:none !important}
  .ui,.dk,.card{max-width:100% !important;width:auto !important}
  [style*="min-width"]{min-width:0 !important}
  [style*="width:5"],[style*="width:6"],[style*="width:7"],[style*="width:8"],[style*="width:9"]{width:auto !important;max-width:100%}
  table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  img,svg,video{max-width:100%;height:auto}
  .ui .side{display:none !important}
  .nav .wrap{gap:12px !important;justify-content:space-between}
  .nav .links{display:none !important}
  .nav.open .links{display:flex !important;flex-direction:column;align-items:stretch !important;position:absolute;left:0;right:0;top:68px;background:#07070B;border-bottom:1px solid rgba(255,255,255,.1);padding:16px 20px 20px;gap:4px !important;z-index:50;max-height:calc(100vh - 68px);overflow:auto}
  .nav.open .links a,.nav.open .links .menu>a{display:flex;padding:10px 0;font-size:16px}
  .nav.open .menu{padding:0 !important}
  .nav.open .menu .dd{display:grid !important;position:static !important;left:auto !important;top:auto !important;background:transparent !important;border:0 !important;padding:0 0 8px 12px !important;box-shadow:none !important;min-width:0 !important}
  .nav.open .menu .dd::before{display:none}
  .nav.open .links .btn{height:44px;justify-content:center;margin-top:6px}
  .nav.open .links [style*="margin-left:auto"]{margin-left:0 !important}
  .gr-menu-knop{display:inline-flex !important;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#F2F2F6;cursor:pointer;margin-left:auto}
  .gr-menu-knop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
  .foot .wrap[style*="grid"]{grid-template-columns:1fr 1fr !important}
}
@media (max-width:640px){
  .wrap{padding:0 16px !important}
  .g4,.foot .wrap[style*="grid"]{grid-template-columns:1fr !important}
  .d.xl,h1.d{font-size:34px !important}
  h2.d{font-size:28px !important}
  .lead{font-size:16px !important}
  .sec{padding:48px 0 !important}
  .btn{max-width:100%;white-space:normal;height:auto;min-height:44px;padding:10px 18px}
  [style*="display:flex"][style*="gap:4"],[style*="display:flex"][style*="gap:3"]{flex-wrap:wrap;gap:16px !important}
  [style*="font-size:80px"],[style*="font-size:72px"],[style*="font-size:64px"]{font-size:34px !important}
  [style*="font-size:56px"],[style*="font-size:48px"]{font-size:28px !important}
  [style*="padding:0 24px"],[style*="padding:32px"]{padding:16px !important}
}
.gr-menu-knop{display:none}
@media (max-width:1024px){
  .sec .wrap[style*="display:flex"]:not([style*="flex-direction:column"]){flex-direction:column !important;align-items:stretch !important}
  .nav.open .menu .dd{grid-template-columns:1fr !important}
  .stat{padding-left:12px !important;margin-left:0 !important}
}
@media (max-width:1024px){
  .sec div[style*="display:flex"][style*="gap:48px"],.sec div[style*="display:flex"][style*="gap:40px"],.sec div[style*="display:flex"][style*="gap:36px"],.sec div[style*="display:flex"][style*="gap:32px"]{flex-direction:column !important;align-items:stretch !important}
  .hd{max-width:100% !important}
  .sec *{min-width:0}
  h1,h2,h3{overflow-wrap:anywhere}
  .stage{display:flex;flex-direction:column;gap:16px}
  .stage>[style*="position:absolute"]{position:static !important;width:auto !important;max-width:100% !important;transform:none !important;animation:none !important}
}
@media (max-width:1024px){.pill,.chip{white-space:nowrap}}