/* ==========================================================================
   Natuursteen Slab — shared site chrome (header, mobile menu, footer)
   Identical to the homepage header/footer, loaded on every non-home page.
   Generated from the homepage styles; edit the homepage design here too.
   ========================================================================== */
body.nslab-chrome :is(#bar,#hd,#mm,.wab,footer){
  --prim:#3D4385;--ind:#4756A3;--deep:#333D65;--soft:#6E78B8;--tint:#C8CEF0;--tint2:#8992D3;
  --text:#202331;--muted:#596074;--paper:#fff;--mist:#F1F3F8;--mist2:#E6E9F2;
  --line:rgba(51,61,101,.15);--line-strong:rgba(51,61,101,.28);
  --ease:cubic-bezier(.16,.84,.44,1);
  --pad:clamp(20px,5vw,72px);--maxw:1296px;--hdh:76px;
}
body.nslab-chrome :is(#hd,#mm,footer,.wab){font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.65;color:var(--text);-webkit-font-smoothing:antialiased}
body.nslab-chrome :where(#hd,#mm,footer,.wab),
body.nslab-chrome :where(#hd,#mm,footer,.wab) *,
body.nslab-chrome :where(#hd,#mm,footer,.wab) *::before,
body.nslab-chrome :where(#hd,#mm,footer,.wab) *::after{box-sizing:border-box}
body.nslab-chrome :where(#hd,#mm,footer,.wab) a{color:inherit;text-decoration:none}
body.nslab-chrome :where(#hd,#mm,footer) :where(ul,ol){list-style:none;margin:0;padding:0}
body.nslab-chrome :where(#hd,#mm,footer) :where(p,h5){margin:0}
body.nslab-chrome :where(#hd,#mm,footer) img{max-width:100%;display:block}
body.nslab-chrome :where(#hd,#mm) button{font:inherit}
body.nslab-chrome.nslab-fallback .nslab-fallback-main{padding-top:calc(76px + 48px)}
/* footer reveal (same as homepage) */
body.nslab-chrome footer .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
body.nslab-chrome footer .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  body.nslab-chrome *,body.nslab-chrome *::before,body.nslab-chrome *::after{scroll-behavior:auto!important}
  body.nslab-chrome footer .rv{opacity:1;transform:none;transition:none}
  body.nslab-chrome .wab::before{animation:none}
}

body.nslab-chrome .btn{position:relative;z-index:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 28px;border:1px solid var(--prim);border-radius:100px;font:600 14px/1 "Archivo",sans-serif;letter-spacing:.03em;color:var(--prim);background:transparent;cursor:pointer;will-change:transform;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .5s var(--ease)}
body.nslab-chrome .btn svg{width:16px;height:16px;flex:none;transition:transform .35s var(--ease)}
body.nslab-chrome .btn:hover svg{transform:translateX(4px)}
body.nslab-chrome .btn.p{background:var(--prim);color:#fff}
body.nslab-chrome .btn.p::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,var(--prim),var(--ind) 55%,var(--soft));transform:translateY(101%);transition:transform .6s var(--ease)}
body.nslab-chrome .btn.p:hover::before{transform:none}
body.nslab-chrome .btn.p:hover{border-color:var(--ind);color:#fff}
body.nslab-chrome .btn.g:hover{background:var(--prim);color:#fff}
body.nslab-chrome #bar{position:fixed;inset:0 0 auto;height:3px;transform:scaleX(0);transform-origin:0;background:linear-gradient(90deg,var(--prim),var(--soft));z-index:200}
body.nslab-chrome #hd{position:fixed;inset:0 0 auto;z-index:150;height:var(--hdh);padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:28px;background:rgba(255,255,255,.95);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid transparent;color:var(--text);transition:height .4s var(--ease),border-color .4s,box-shadow .4s}
body.nslab-chrome #hd.s{height:64px;border-bottom-color:var(--line);box-shadow:0 10px 30px -22px rgba(51,61,101,.45)}
body.nslab-chrome .logo{display:block;flex:none;position:relative;z-index:2;will-change:transform;transition:transform .45s var(--ease)}
body.nslab-chrome .logo img{height:44px;width:auto;transition:height .4s var(--ease),filter .4s var(--ease)}
body.nslab-chrome .logo:hover img{filter:drop-shadow(0 6px 14px rgba(61,67,133,.28))}
body.nslab-chrome #hd.s .logo img{height:38px}
body.nslab-chrome #hd nav ul{display:flex;gap:clamp(24px,3vw,44px)}
body.nslab-chrome #hd nav a{position:relative;display:block;padding:8px 0;font-size:15px;font-weight:500;color:var(--text);transition:color .25s}
body.nslab-chrome #hd nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--prim);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
body.nslab-chrome #hd nav a:hover{color:var(--prim)}
body.nslab-chrome #hd nav a:hover::after{transform:scaleX(1);transform-origin:left}
body.nslab-chrome #hd .hcta{min-height:44px;padding:0 24px;font-size:13.5px}
body.nslab-chrome .burger{display:none;width:46px;height:46px;border:0;border-radius:2px;background:var(--prim);color:#fff;box-shadow:0 6px 18px -6px rgba(51,61,101,.55);cursor:pointer;position:relative;z-index:160;flex:none;will-change:transform;transition:transform .45s var(--ease),background .3s}
body.nslab-chrome .burger i{position:absolute;left:13px;right:13px;height:2px;background:#fff;transition:transform .5s var(--ease),top .5s var(--ease),left .4s var(--ease),right .4s var(--ease)}
body.nslab-chrome .burger i:nth-child(1){top:18px}
body.nslab-chrome .burger i:nth-child(2){top:26px;left:19px}
body.nslab-chrome.menu-open .burger i:nth-child(1){top:22px;transform:rotate(45deg)}
body.nslab-chrome.menu-open .burger i:nth-child(2){top:22px;left:13px;transform:rotate(-45deg)}
body.nslab-chrome .burger:hover,body.nslab-chrome.menu-open .burger{background:var(--deep)}
body.nslab-chrome .burger:active{transform:scale(.94)}
body.nslab-chrome #mm{position:fixed;inset:0;z-index:140;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:calc(var(--hdh) + 28px) var(--pad) 36px;overflow-y:auto;background:var(--mist);clip-path:circle(0 at calc(100% - 44px) 38px);visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s}
body.nslab-chrome.menu-open #mm{clip-path:circle(150% at calc(100% - 44px) 38px);visibility:visible;transition:clip-path .8s var(--ease),visibility 0s}
body.nslab-chrome.menu-open{overflow:hidden}
body.nslab-chrome #mm .mmbg{display:none}
body.nslab-chrome #mm .mi{display:flex;flex-direction:column}
body.nslab-chrome #mm a.big{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);font-size:clamp(30px,8.5vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--text);opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .8s var(--ease),color .25s}
body.nslab-chrome #mm a.big i{font-style:normal;font-size:14px;font-weight:600;letter-spacing:0;color:var(--prim);min-width:22px}
body.nslab-chrome #mm a.big:hover,body.nslab-chrome #mm a.big:active{color:var(--prim)}
body.nslab-chrome.menu-open #mm a.big{opacity:1;transform:none}
body.nslab-chrome.menu-open #mm a.big:nth-child(1){transition-delay:.2s}
body.nslab-chrome.menu-open #mm a.big:nth-child(2){transition-delay:.26s}
body.nslab-chrome.menu-open #mm a.big:nth-child(3){transition-delay:.32s}
body.nslab-chrome #mm .mf{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:24px;border-top:1px solid var(--line-strong);font-size:15px;color:var(--prim);font-weight:600;opacity:0;transition:opacity .6s var(--ease) .45s}
body.nslab-chrome.menu-open #mm .mf{opacity:1}
body.nslab-chrome #mm .mfrow{display:flex;flex-wrap:wrap;gap:8px 24px;width:100%}
body.nslab-chrome #mm .mf span{width:100%;color:var(--muted);font-weight:400}
body.nslab-chrome #mm .mf span b{color:var(--deep);font-weight:600;margin-right:6px}
body.nslab-chrome #mm .msoc{display:flex;gap:10px;width:100%;margin-top:6px}
body.nslab-chrome #mm .msoc a{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line-strong);border-radius:50%;color:var(--prim);transition:background .25s,color .25s,border-color .25s}
body.nslab-chrome #mm .msoc a:hover{background:var(--prim);border-color:var(--prim);color:#fff}
body.nslab-chrome #mm .msoc svg{width:17px;height:17px}
body.nslab-chrome.menu-open #hd{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.nslab-chrome .wab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:130;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--prim);color:#fff;box-shadow:0 12px 30px -10px rgba(51,61,101,.7);transition:transform .4s var(--ease),background .3s}
body.nslab-chrome .wab::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--prim);animation:pl 2.4s infinite}
body.nslab-chrome .wab:hover{background:var(--deep);transform:scale(1.1) rotate(-8deg)}
@keyframes pl{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
body.nslab-chrome .wab svg{width:25px}
body.nslab-chrome>footer{position:relative;isolation:isolate;overflow:hidden;background:var(--mist2);color:var(--text)}
body.nslab-chrome>footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.72;transition:opacity .5s ease,filter .5s ease;background:
  linear-gradient(128deg,transparent 0 66.6%,rgba(61,67,133,.12) 66.72% 66.82%,transparent 66.94% 67.08%,rgba(110,120,184,.1) 67.2% 67.3%,transparent 67.42%),
  linear-gradient(118deg,transparent 0 80.5%,rgba(61,67,133,.1) 80.62% 80.72%,transparent 80.84% 80.98%,rgba(110,120,184,.09) 81.1% 81.2%,transparent 81.32%),
  radial-gradient(70% 80% at 92% 6%,rgba(71,86,163,.08),transparent 66%)}
body.nslab-chrome>footer:hover::before{opacity:1;filter:saturate(1.18)}
body.nslab-chrome .fg{display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(130px,.7fr));gap:clamp(28px,4vw,72px);padding:clamp(52px,6vw,84px) var(--pad) 0;max-width:calc(var(--maxw) + 2*var(--pad));margin-inline:auto}
body.nslab-chrome .footer-logo{display:inline-block;width:fit-content}
body.nslab-chrome .footer-logo img{height:52px;width:auto;transition:transform .45s var(--ease),opacity .35s}
body.nslab-chrome .footer-logo:hover img{transform:translateY(-2px)}
body.nslab-chrome .fcol0 p{max-width:36ch;margin-top:18px;font-size:15px;line-height:1.75}
body.nslab-chrome .fsoc{display:flex;gap:10px;margin-top:24px}
body.nslab-chrome .fsoc a{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line-strong);border-radius:50%;color:var(--prim);transition:background .25s,color .25s,border-color .25s,transform .35s var(--ease)}
body.nslab-chrome .fsoc a:hover{background:var(--prim);border-color:var(--prim);color:#fff;transform:translateY(-3px)}
body.nslab-chrome .fsoc svg{width:17px;height:17px}
body.nslab-chrome .fg h5{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px;font-size:14px;font-weight:600;color:var(--prim);letter-spacing:.01em}
body.nslab-chrome .fg h5::after{content:"";width:24px;height:1px;background:var(--soft)}
body.nslab-chrome .fg>div:not(.fcol0) a{display:block;width:fit-content;padding:6px 0;font-size:15.5px;color:#41485F;background:linear-gradient(var(--prim),var(--prim)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease),color .25s,transform .35s var(--ease)}
body.nslab-chrome .fg>div:not(.fcol0) a:hover{background-size:100% 1px;color:var(--prim);transform:translateX(2px)}
body.nslab-chrome .fb{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;max-width:calc(var(--maxw) + 2*var(--pad));margin:clamp(40px,5vw,64px) auto 0;padding:22px max(var(--pad),84px) 28px var(--pad);border-top:1px solid var(--line-strong);font-size:14px;color:var(--muted)}
body.nslab-chrome .fb a{color:var(--text);transition:color .25s}
body.nslab-chrome .fb a:hover{color:var(--prim)}
body.nslab-chrome .fb-meta{color:var(--muted)}
@media(max-width:900px){
  body.nslab-chrome #hd{padding:0 var(--pad);gap:10px}
  body.nslab-chrome #hd.s{height:60px}
  body.nslab-chrome #hd nav,body.nslab-chrome #hd .hcta{display:none}
  body.nslab-chrome .burger{display:block}
  body.nslab-chrome .logo img{height:36px}
  body.nslab-chrome #hd.s .logo img{height:33px}
  body.nslab-chrome .fg{grid-template-columns:1fr 1fr;gap:34px 24px}
  body.nslab-chrome .fcol0{grid-column:1/-1}
  body.nslab-chrome .wab{width:48px;height:48px;right:12px}
  body.nslab-chrome #mm .mcta{width:100%;margin-bottom:6px}
}
@media(max-width:380px){
  body.nslab-chrome #hd{gap:6px}
  body.nslab-chrome .logo img,body.nslab-chrome #hd.s .logo img{height:30px}
  body.nslab-chrome .burger{width:42px;height:42px}
  body.nslab-chrome .burger i{left:11px;right:11px}
  body.nslab-chrome .burger i:nth-child(2){left:17px}
  body.nslab-chrome.menu-open .burger i:nth-child(2){left:11px}
}
@media(max-width:560px){
  body.nslab-chrome .fg{grid-template-columns:1fr 1fr}
}

/* v1.18.1 — keep the desktop nav (links + dropdown caret) vertically centred on every inner page.
   site-chrome.css loads after nav-menu.css and its generic "nav a" rules (display:block; padding:8px 0)
   were overriding the nav-menu.css alignment, so the caret dropped and the text rode up. */
body.nslab-chrome #hd nav.nsl-nav{align-self:stretch;display:flex;align-items:center}
body.nslab-chrome #hd nav.nsl-nav ul{display:flex;align-items:center;height:100%;margin:0;padding:0}
body.nslab-chrome #hd nav.nsl-nav li{display:flex;align-items:center;height:100%;margin:0;padding:0}
body.nslab-chrome #hd nav.nsl-nav li>a{display:flex;align-items:center;height:100%;padding:0;line-height:1.2;white-space:nowrap}
body.nslab-chrome #hd nav.nsl-nav li>a::after{bottom:calc(50% - 20px)}
body.nslab-chrome #hd nav.nsl-nav .nsl-caret{display:grid;place-items:center;align-self:center;flex:none;width:24px;height:32px;margin:0 0 0 2px;padding:0;line-height:1}
body.nslab-chrome #hd nav.nsl-nav .nsl-caret svg{display:block;width:11px;height:11px}
@media(max-width:900px){body.nslab-chrome #hd nav.nsl-nav{display:none}}
