@font-face{font-family:"Cabinet Grotesk";src:url(../assets/fonts/CabinetGrotesk-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url(../assets/fonts/CabinetGrotesk-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../assets/fonts/Satoshi-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../assets/fonts/Satoshi-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../assets/fonts/Satoshi-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#F3EEE5; --paper-2:#E9E1D3; --ink:#17130F; --muted:#5A5148;
  --blue:#0093D0; --blue-text:#00689A;
  --display:"Cabinet Grotesk","Arial Black",system-ui,sans-serif;
  --body:"Satoshi",system-ui,sans-serif;
  --gut:clamp(20px,4vw,56px);
  --r:3px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(1rem,.95rem + .25vw,1.125rem)/1.6 var(--body);text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--blue);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue-text);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:100;border-radius:var(--r)}
.skip:focus{top:12px}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:var(--r);font:700 1rem/1 var(--body);text-decoration:none;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:transform .2s,background-color .2s,color .2s}
.btn-blue{background:var(--blue);border-color:var(--blue);color:var(--ink)}
.btn-blue:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:28px;padding:14px var(--gut);background:rgba(243,238,229,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(23,19,15,.12)}
.brand img{height:42px;width:auto}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{text-decoration:none;font-weight:500;padding:6px 0;background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 3px no-repeat;transition:background-size .25s}
.nav a:hover{background-size:100% 3px}
.top-call{min-height:44px;padding:0 18px}
.menu-btn{display:none}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:clamp(24px,5vw,80px);padding:110px var(--gut) 56px;max-width:1440px;margin:0 auto}
.hero h1{font-size:clamp(2.7rem,5.3vw,5.6rem);margin-bottom:.4em}
.hero h1 .ln{display:block}
.lede{max-width:34em;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);color:var(--muted);margin-bottom:1.6em}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.mobile-line{display:none}
.frame{position:relative;margin:0;justify-self:end;width:min(100%,500px);align-self:end}
.frame-photo{aspect-ratio:460/560;clip-path:polygon(50% 0,100% 22%,100% 100%,0 100%,0 22%);background:var(--paper-2)}
.frame-photo img{width:100%;height:100%;object-fit:cover;object-position:46% 50%}
.frame-line{position:absolute;left:0;top:0;width:100%;aspect-ratio:460/560;height:auto;overflow:visible;pointer-events:none}
.frame-line path{fill:none;stroke:var(--blue);stroke-width:5;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:0}
.frame figcaption{margin-top:12px;font-size:.9rem;color:var(--muted)}
.rule{position:absolute;left:0;right:0;bottom:56px;height:0;pointer-events:none}

/* spantwerk */
.spant{background:var(--paper-2);border-block:1px solid rgba(23,19,15,.12)}
.spant-pin{max-width:1360px;margin:0 auto;padding:clamp(56px,8vw,110px) var(--gut);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center}
.spant-head h2{font-size:clamp(2.2rem,4.6vw,4.4rem);margin-bottom:.45em}
.spant-head p{max-width:32em;color:var(--muted)}
.legend{list-style:none;margin:1.4em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.legend li{padding:6px 14px;border:2px solid var(--ink);border-radius:var(--r);font-weight:700;font-size:.95rem;transition:background-color .3s,border-color .3s}
.legend li.on{background:var(--blue);border-color:var(--blue)}
.truss{width:100%;height:auto;max-height:70vh}
.truss path{fill:none;stroke:var(--ink);stroke-width:12;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:0}
.truss .t-tie{stroke:var(--blue)}
.truss .t-strut{stroke-width:9}
.t-nodes circle{fill:var(--paper-2);stroke:var(--ink);stroke-width:4}
.three{grid-column:1/-1;list-style:none;margin:clamp(16px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.three li{display:block}
.three img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)}
.three span{display:block;margin-top:8px;font-size:.95rem}
.three b{font-family:var(--display);font-weight:800;margin-right:.4em;color:var(--blue-text)}

/* sections */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(16px,4vw,64px);align-items:end;margin-bottom:clamp(32px,5vw,64px)}
.sec-head h2{font-size:clamp(2.2rem,4.8vw,4.6rem)}
.sec-head p{color:var(--muted);margin:0;max-width:30em}
.diensten,.projecten,.regio,.contact{padding:clamp(64px,9vw,128px) 0}
.more{display:inline-block;font-weight:700;color:var(--blue-text);text-decoration:none;border-bottom:3px solid var(--blue);padding-bottom:2px}
.more:hover{color:var(--ink)}

/* diensten */
.svc-list-ul{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.svc{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(20px,5vw,80px);align-items:start;padding:clamp(24px,3.5vw,44px) 0;border-bottom:1px solid rgba(23,19,15,.25)}
.svc h3{font-size:clamp(1.9rem,3.4vw,3rem);margin-bottom:.4em}
.svc-text p{max-width:38em}
.svc-list{color:var(--muted);font-size:.98rem}
.svc-img img{width:340px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}

/* projecten */
.proj{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,80px);padding:clamp(28px,4vw,56px) 0;border-top:2px solid var(--ink);align-items:start}
.proj.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.proj.flip header{order:2}
.yr{font:800 clamp(3.4rem,8vw,7rem)/.9 var(--display);letter-spacing:-.04em;color:var(--blue-text);margin-bottom:.15em}
.proj h3{font-size:clamp(1.6rem,2.6vw,2.4rem);margin-bottom:.5em}
.proj header p:not(.yr){max-width:34em;color:var(--muted)}
.pics{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(12px,2vw,24px);align-items:start}
.pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.pic-b{margin-top:clamp(28px,6vw,90px)}

/* band */
.band{position:relative;overflow:hidden;min-height:260px;display:grid;place-items:center;background:var(--ink)}
.band picture,.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:rgba(23,19,15,.74)}
.band p{position:relative;z-index:2;margin:0;padding:32px var(--gut);color:var(--paper);font:800 clamp(1.4rem,3.4vw,3rem)/1.25 var(--display);text-align:center;max-width:1300px}
.band i{font-style:normal;color:#4CC1F2;margin:0 .35em}

/* regio */
.regio-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px)}
.regio .sec-head{display:block;margin:0}
.regio .sec-head p{margin-top:1.2em}
.towns{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 1.1em;font:800 clamp(1.5rem,2.8vw,2.5rem)/1.25 var(--display);letter-spacing:-.01em}
.towns li{white-space:nowrap}


/* contact */
.contact{background:var(--paper-2);border-top:1px solid rgba(23,19,15,.12)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
.contact h2{font-size:clamp(2.2rem,4.6vw,4.4rem);margin-bottom:.45em}
.contact-info>p{max-width:28em;color:var(--muted)}
.cinfo{list-style:none;margin:2em 0 0;padding:0;border-top:2px solid var(--ink)}
.cinfo li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid rgba(23,19,15,.25);font-size:1.1rem}
.cinfo span{color:var(--muted)}
.cinfo a{font-weight:700;overflow-wrap:anywhere}
address{font-style:normal}
.form{background:var(--paper);padding:clamp(20px,3vw,40px);border-radius:var(--r);border:1px solid rgba(23,19,15,.2)}
.form-title{font:800 1.5rem/1.1 var(--display);margin-bottom:1em}
.form label{display:block;font-weight:700;margin:1em 0 .35em}
.form input,.form textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:12px 14px;min-height:48px}
.form textarea{resize:vertical}
.form .btn{margin-top:1.4em}
.form-status{margin:1em 0 0;min-height:1.6em;font-weight:500;color:var(--blue-text)}
.form [aria-invalid="true"]{border-color:#B3261E}

.foot{padding:36px 0 48px;border-top:1px solid rgba(23,19,15,.25)}
.foot-grid{display:flex;flex-wrap:wrap;gap:20px 48px;align-items:center;justify-content:space-between}
.foot-logo{height:34px;width:auto}
.foot p{margin:0;color:var(--muted)}
.foot a{color:var(--ink)}

.callbar{display:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,24px);background:var(--ink);color:var(--paper);padding:14px 22px;border-radius:var(--r);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:90;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* tablet en mobiel */
@media (max-width:900px){
  .top{gap:12px}
  .top-call{display:none}
  .menu-btn{display:inline-flex;margin-left:auto;min-height:44px;align-items:center;padding:0 16px;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:var(--r);font:700 1rem var(--body)}
  .nav{position:fixed;inset:68px 0 auto 0;background:var(--paper);flex-direction:column;gap:0;padding:8px var(--gut) 20px;border-bottom:2px solid var(--ink);transform:translateY(-120%);visibility:hidden;transition:transform .3s,visibility .3s;margin:0}
  .nav.open{transform:none;visibility:visible}
  .nav a{padding:14px 0;font-size:1.2rem;border-bottom:1px solid rgba(23,19,15,.2);background:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:96px;padding-bottom:40px;gap:28px}
  .hero h1{font-size:clamp(2.5rem,11vw,3.6rem)}
  .frame{justify-self:start;width:min(100%,360px)}
  .mobile-line{display:block;margin:14px 0 0}
  .spant-pin,.proj,.proj.flip,.contact-grid,.regio-grid,.sec-head{grid-template-columns:1fr}
  .proj.flip header{order:0}
  .svc{grid-template-columns:1fr}
  .svc-img img{width:100%;max-width:340px}
  .three{grid-template-columns:1fr 1fr 1fr}
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:2px solid var(--ink);transform:translateY(110%);transition:transform .3s}
  .callbar.on{transform:none}
  body{padding-bottom:0}
  .foot{padding-bottom:96px}
}
@media (max-width:560px){
  .three{grid-template-columns:1fr}
  .three li{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
  .three img{aspect-ratio:4/3}
  .three span{margin:0}
  .pics{grid-template-columns:1fr 1fr}
  .cinfo li{grid-template-columns:1fr;gap:2px}
  .legend li{font-size:.9rem;padding:5px 11px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}