/* Natuursteen Slab — main navigation: desktop mega dropdown + mobile accordion (v1.16) */
:root{--nsl-ease:cubic-bezier(.16,.84,.44,1)}

/* ---------- desktop bar ---------- */
#hd nav.nsl-nav{align-self:stretch;display:flex}
@media(max-width:900px){#hd nav.nsl-nav{display:none}}
#hd nav.nsl-nav ul{align-items:stretch}
#hd nav.nsl-nav li{display:flex;align-items:center}
#hd nav.nsl-nav li>a{display:flex;align-items:center;height:100%;padding-block:0;white-space:nowrap}
#hd nav.nsl-nav li>a::after{bottom:calc(50% - 20px)}
.nsl-caret{display:grid;place-items:center;width:24px;height:32px;margin-left:2px;padding:0;border:0;background:none;color:#202331;cursor:pointer;transition:color .25s}
.nsl-caret svg{width:11px;height:11px;transition:transform .5s var(--nsl-ease)}
.nsl-caret:hover,.nsl-has-mega.is-open .nsl-caret{color:#3D4385}
.nsl-has-mega.is-open .nsl-caret svg{transform:rotate(180deg)}
.nsl-caret:focus-visible{outline:2px solid #4756A3;outline-offset:2px;border-radius:2px}
#hd nav.nsl-nav li.is-open>a{color:#3D4385}
#hd nav.nsl-nav li.is-open>a::after{transform:scaleX(1);transform-origin:left}

/* ---------- scrim ---------- */
.nsl-scrim{position:fixed;inset:0;z-index:120;background:rgba(8,9,14,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s var(--nsl-ease),visibility 0s .45s}
.nsl-scrim.on{opacity:1;visibility:visible;transition:opacity .45s var(--nsl-ease),visibility 0s}

/* ---------- mega panel ---------- */
.nsl-mega{position:absolute;top:100%;left:0;right:0;z-index:5;color:#F3EFE8;overflow:hidden;
  background:radial-gradient(55% 140% at 92% -10%,rgba(71,86,163,.5),transparent 62%),radial-gradient(40% 90% at 0% 110%,rgba(110,120,184,.16),transparent 65%),linear-gradient(180deg,#0B0C10,#0E0F14 60%,#12141B);
  border-top:1px solid rgba(137,146,211,.28);box-shadow:0 50px 90px -30px rgba(8,9,14,.75);
  clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden;transition:clip-path .7s var(--nsl-ease),opacity .35s,visibility 0s .7s}
.nsl-mega.is-open{clip-path:inset(0 0 -90px 0);opacity:1;visibility:visible;transition:clip-path .75s var(--nsl-ease),opacity .3s,visibility 0s}
.nsl-mega-in{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.7fr) minmax(0,.86fr);gap:clamp(32px,4.4vw,80px);align-items:stretch;padding:clamp(34px,5.2vh,56px) var(--pad,clamp(20px,5vw,72px)) clamp(38px,5.8vh,64px)}
.nsl-mega-in>*{opacity:0;transform:translateY(18px);transition:opacity .5s var(--nsl-ease),transform .8s var(--nsl-ease)}
.nsl-mega.is-open .nsl-mega-in>*{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0)*.07s)}

.nsl-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0;font-size:14px;font-weight:600;letter-spacing:.01em;color:#C8CEF0}
.nsl-eyebrow::before{content:"";width:9px;height:9px;background:#6E78B8;transform:rotate(45deg);flex:none}
.nsl-title{margin:18px 0 0;font-size:clamp(30px,2.9vw,46px);line-height:1.04;font-weight:700;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.nsl-title em{font-style:normal;background:linear-gradient(100deg,#6E78B8 15%,#F3EFE8 45%,#6E78B8 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nsl-sm 6s linear infinite}
@keyframes nsl-sm{to{background-position:-220% 0}}
.nsl-sub{max-width:30ch;margin:18px 0 0;font-size:15.5px;line-height:1.7;color:rgba(243,239,232,.7)}

.nsl-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,56px);align-content:start}
.nsl-group h3{display:flex;align-items:center;gap:14px;margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8992D3}
.nsl-group h3::after{content:"";height:1px;flex:1;background:rgba(137,146,211,.32)}
.nsl-group ul{list-style:none;margin:0;padding:0}
#hd .nsl-mega a{text-decoration:none;color:#F3EFE8}
.nsl-group li a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;font-size:clamp(17px,1.35vw,21px);font-weight:500;letter-spacing:-.015em;line-height:1.25;border-bottom:1px solid rgba(243,239,232,.09);transition:color .3s,padding .5s var(--nsl-ease),border-color .3s}
.nsl-group li a svg,.nsl-wide svg{flex:none;width:16px;height:16px;color:#8992D3;opacity:0;transform:translateX(-10px);transition:opacity .35s,transform .5s var(--nsl-ease)}
.nsl-group li a:hover,.nsl-group li a:focus-visible{color:#fff;padding-left:10px;border-color:rgba(137,146,211,.6)}
.nsl-group li a:hover svg,.nsl-group li a:focus-visible svg,.nsl-wide:hover svg,.nsl-wide:focus-visible svg{opacity:1;transform:none}
.nsl-wide{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;padding:20px 24px;border:1px solid rgba(137,146,211,.34);font-size:clamp(19px,1.6vw,25px);font-weight:600;letter-spacing:-.02em;transition:background .45s var(--nsl-ease),border-color .3s,padding .5s var(--nsl-ease)}
.nsl-wide:hover,.nsl-wide:focus-visible{background:rgba(71,86,163,.34);border-color:#8992D3;padding-left:30px}
.nsl-mega a:focus-visible{outline:2px solid #C8CEF0;outline-offset:3px}

.nsl-feature{--cut:polygon(0 0,100% 0,100% 100%,18% 100%,0 calc(100% - 18%));position:relative;display:block;min-height:clamp(250px,32vh,340px);overflow:hidden;isolation:isolate;background:#333D65;clip-path:var(--cut)}
.nsl-feature picture,.nsl-feature img{position:absolute;inset:0;display:block;width:100%;height:100%}
.nsl-feature img{object-fit:cover;transition:transform 1.4s var(--nsl-ease),filter .4s}
.nsl-feature::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,15,20,0) 38%,rgba(14,15,20,.88) 100%)}
.nsl-feature:hover img{transform:scale(1.07);filter:brightness(1.08)}
.nsl-feature-cap{position:absolute;z-index:2;left:clamp(18px,1.8vw,26px);right:clamp(18px,1.8vw,26px);bottom:clamp(16px,1.6vw,22px);display:flex;align-items:flex-end;justify-content:space-between;gap:12px;color:#fff}
.nsl-feature-cap small{display:block;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#C8CEF0}
.nsl-feature-cap b{display:block;margin-top:4px;font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:-.02em}
.nsl-feature-cap i{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:2px;background:#3D4385;transition:background .3s,transform .5s var(--nsl-ease)}
.nsl-feature-cap i svg{width:16px;height:16px}
.nsl-feature:hover .nsl-feature-cap i{background:#fff;color:#3D4385;transform:translateX(4px)}

/* ---------- mobile menu (v1.17) ---------- */
#mm#mm{justify-content:flex-start;gap:22px}
#mm#mm .nsl-m{display:flex;flex-direction:column}
#mm#mm .nsl-m>*{opacity:0;transform:translateY(22px);transition:opacity .6s var(--nsl-ease),transform .8s var(--nsl-ease)}
.menu-open #mm#mm .nsl-m>*{opacity:1;transform:none;transition-delay:calc(.18s + var(--i,0)*.06s)}
.nsl-m-label{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#3D4385}
.nsl-m-label::before{content:"";width:8px;height:8px;background:#3D4385;transform:rotate(45deg);flex:none}
.nsl-m-label::after{content:"";height:1px;flex:1;background:rgba(51,61,101,.2)}

#mm#mm .nsl-m a.big,#mm#mm .nsl-m .nsl-m-row a.big{display:flex;align-items:center;gap:14px;min-height:72px;padding:10px 0;border-bottom:1px solid rgba(51,61,101,.16);font-family:inherit;font-size:clamp(23px,6.6vw,29px);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:#202331;text-decoration:none;opacity:1;transform:none;transition:color .25s,padding .5s var(--nsl-ease);transition-delay:0s!important}
#mm#mm .nsl-m a.big i{min-width:26px;font-family:inherit;font-size:12px;font-weight:600;line-height:1;font-style:normal;letter-spacing:.1em;color:#3D4385}
#mm#mm .nsl-m a.big span{flex:1;min-width:0}
#mm#mm .nsl-m .nsl-m-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(51,61,101,.16)}
#mm#mm .nsl-m .nsl-m-row a.big{flex:1;min-width:0;border-bottom:0}
.nsl-m-go,.nsl-m-toggle{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid rgba(51,61,101,.28);border-radius:2px;background:transparent;color:#3D4385;font-style:normal;transition:background .3s,border-color .3s,color .3s}
.nsl-m-go svg{width:16px;height:16px;transition:transform .5s var(--nsl-ease)}
#mm#mm .nsl-m a.big:active .nsl-m-go,#mm#mm .nsl-m a.big:hover .nsl-m-go{background:#3D4385;border-color:#3D4385;color:#fff}
#mm#mm .nsl-m a.big:active .nsl-m-go svg,#mm#mm .nsl-m a.big:hover .nsl-m-go svg{transform:translateX(2px)}
#mm#mm .nsl-m a.big:active,#mm#mm .nsl-m a.big:hover{color:#3D4385}
.nsl-m-toggle{position:relative;padding:0;cursor:pointer}
.nsl-m-toggle span{position:absolute;top:50%;left:13px;right:13px;height:2px;margin-top:-1px;background:currentColor;transition:transform .5s var(--nsl-ease)}
.nsl-m-toggle span:last-child{transform:rotate(90deg)}
.nsl-m-item.is-open .nsl-m-toggle{background:#3D4385;border-color:#3D4385;color:#fff}
.nsl-m-item.is-open .nsl-m-toggle span:last-child{transform:rotate(0)}
.nsl-m-toggle:focus-visible,#mm .nsl-m a:focus-visible{outline:2px solid #4756A3;outline-offset:3px}

.nsl-m-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--nsl-ease)}
.nsl-m-item.is-open .nsl-m-sub{grid-template-rows:1fr}
.nsl-m-sub-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;margin:0;padding:0 18px;background:#fff;border:0 solid rgba(51,61,101,.16);border-left:3px solid #3D4385;transition:padding .6s var(--nsl-ease),margin .6s var(--nsl-ease)}
.nsl-m-item.is-open .nsl-m-sub-in{margin:14px 0 6px;padding:6px 18px 18px;border-width:1px 1px 1px 3px}
.nsl-m-sub-in>*{opacity:0;transform:translateY(10px);transition:opacity .4s var(--nsl-ease),transform .6s var(--nsl-ease)}
.nsl-m-item.is-open .nsl-m-sub-in>*{opacity:1;transform:none}
.nsl-m-item.is-open .nsl-m-sub-in>*:nth-child(1){transition-delay:.12s}.nsl-m-item.is-open .nsl-m-sub-in>*:nth-child(2){transition-delay:.16s}.nsl-m-item.is-open .nsl-m-sub-in>*:nth-child(3){transition-delay:.2s}.nsl-m-item.is-open .nsl-m-sub-in>*:nth-child(4){transition-delay:.24s}.nsl-m-item.is-open .nsl-m-sub-in>*:nth-child(5){transition-delay:.28s}.nsl-m-item.is-open .nsl-m-sub-in>*:nth-child(6){transition-delay:.32s}.nsl-m-item.is-open .nsl-m-sub-in>*:nth-child(7){transition-delay:.36s}.nsl-m-item.is-open .nsl-m-sub-in>*:nth-child(8){transition-delay:.4s}.nsl-m-item.is-open .nsl-m-sub-in>*:nth-child(9){transition-delay:.44s}
.nsl-m-h{display:flex;align-items:center;gap:12px;margin:16px 0 2px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#3D4385}
.nsl-m-h::after{content:"";height:1px;flex:1;background:rgba(51,61,101,.2)}
#mm#mm .nsl-m-sub a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(51,61,101,.09);font-size:clamp(17px,4.7vw,19px);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:#202331;text-decoration:none;transition:color .25s,padding .4s var(--nsl-ease)}
#mm#mm .nsl-m-sub a::after{content:"\2192";font-size:15px;font-weight:500;color:#3D4385;opacity:.55;transition:transform .4s var(--nsl-ease),opacity .25s}
#mm#mm .nsl-m-sub a:active,#mm#mm .nsl-m-sub a:hover{color:#3D4385;padding-left:6px}
#mm#mm .nsl-m-sub a:active::after,#mm#mm .nsl-m-sub a:hover::after{opacity:1;transform:translateX(3px)}
#mm#mm .nsl-m-sub a.nsl-m-wide{margin-top:16px;padding:15px 16px;border:0;background:#3D4385;color:#fff;font-size:clamp(17px,4.7vw,19px)}
#mm#mm .nsl-m-sub a.nsl-m-wide::after{color:#fff;opacity:.85}
#mm#mm .nsl-m-sub a.nsl-m-wide:active,#mm#mm .nsl-m-sub a.nsl-m-wide:hover{background:#333D65;color:#fff;padding-left:16px}

/* footer block */
#mm#mm .mf{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;margin-top:auto;padding-top:20px;border-top:1px solid rgba(51,61,101,.2);font-size:13.5px;font-weight:500;color:#202331}
#mm#mm .mf .mcta{grid-column:1/-1;width:100%;min-height:54px;margin:0;border-radius:2px;font-size:14px;letter-spacing:.04em}
#mm#mm .mfrow{display:contents}
#mm#mm .mfrow a{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 12px;border:1px solid rgba(51,61,101,.22);border-radius:2px;background:#fff;font-size:clamp(13px,3.7vw,15px);white-space:nowrap;font-weight:700;letter-spacing:-.01em;color:#3D4385;text-decoration:none;transition:background .25s,color .25s,border-color .25s}
#mm#mm .mfrow a::before{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5d6479}
#mm#mm .mfrow a:first-child::before{content:"Bel ons"}
#mm#mm .mfrow a:last-child::before{content:"Chat met ons"}
#mm#mm .mfrow a:active,#mm#mm .mfrow a:hover{background:#3D4385;border-color:#3D4385;color:#fff}
#mm#mm .mfrow a:active::before,#mm#mm .mfrow a:hover::before{color:#C8CEF0}
#mm#mm .mf>span{display:block;grid-column:1/-1;width:auto;font-size:13.5px;font-weight:500;line-height:1.5;letter-spacing:0;color:#202331}
#mm#mm .mf>span::before{display:inline-block;width:62px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5d6479}
#mm#mm .mf>span:nth-of-type(1)::before{content:"Adres"}
#mm#mm .mf>span:nth-of-type(2)::before{content:"Tijden"}
#mm#mm .mf>span b{margin:0 5px 0 0;font-weight:700;color:#202331}
#mm#mm .msoc{grid-column:1/-1;display:flex;gap:8px;width:auto;margin:4px 0 0}
#mm#mm .msoc a{width:42px;height:42px;border:1px solid rgba(51,61,101,.28);border-radius:2px;background:transparent;color:#3D4385}
#mm#mm .msoc a:active,#mm#mm .msoc a:hover{background:#3D4385;border-color:#3D4385;color:#fff}
@media(max-height:700px){#mm#mm .nsl-m a.big,#mm#mm .nsl-m .nsl-m-row a.big{min-height:60px}#mm#mm .mf{padding-top:14px}}

/* ---------- breakpoints ---------- */
@media(max-width:900px){.nsl-mega,.nsl-scrim{display:none}}
@media(min-width:901px) and (max-width:1180px){#hd .hcta{display:none!important}.nsl-mega-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);}.nsl-feature{display:none}}
@media(min-width:901px) and (max-height:700px){.nsl-sub{display:none}.nsl-feature{min-height:220px}}
@media(prefers-reduced-motion:reduce){.nsl-mega,.nsl-mega-in>*,.nsl-scrim,.nsl-m-sub,.nsl-m-sub-in>*{transition-duration:.01ms!important;transition-delay:0s!important}.nsl-title em{animation:none}}
@media(max-width:340px){#mm#mm .mfrow a{font-size:12px;padding:12px 9px}#mm#mm .mfrow a::before{letter-spacing:.1em}}

/* Group headings are links now */
.nsl-group h3 a,.nsl-m-h a{color:inherit;text-decoration:none;transition:color .2s}
.nsl-group h3 a:hover,.nsl-group h3 a:focus-visible{color:#fff}
.nsl-m-h a:hover,.nsl-m-h a:focus-visible{color:#8992D3}