:root{
  /* Paginakleur. Donkerder dan de content, maar bewust geen bijna-zwart:
     --void-rgb staat los zodat gradients en blur-lagen dezelfde kleur pakken. */
  --void-rgb:11,18,25;
  --void:#0B1219;
  --panel:#0F1B26;

  /* Tekst, van licht naar stil */
  --white:#EFF4F8;    /* koppen */
  --silver:#CFD9E2;   /* bodytekst */
  --ink:#A8B7C4;      /* secundaire tekst en lede */
  --steel:#93A3B3;    /* mono-labels */
  --faint:#6C7C8A;    /* kleine labels, footer, scrollhint */

  /* Accent. Afgeleid van het marineblauw uit de MHI-brochure (#1D4670):
     zelfde tint, lichter gemaakt zodat het op donker leesbaar blijft. Rustiger
     dan het oude #009DFF, waardoor het 3D-logo het enige felle element is. */
  --blue:#5E94C9;
  --blue-lit:#7FAEDC;
  --cyan:#9DC4E4;     /* focusring */
  --on-blue:#08131C;  /* tekst op een accentvlak */
  --tint:rgba(94,148,201,.09);

  --hair:rgba(147,163,179,.16); --hair2:rgba(147,163,179,.30);
  --ff-d:'Saira',system-ui,'Segoe UI',sans-serif;
  --ff-m:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(30px,6.5vw,112px);
  --maxw:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;overscroll-behavior-x:none}
body{background:var(--void);color:var(--silver);font-family:var(--ff-d);font-weight:300;
  font-size:clamp(15px,1.05vw,17px);line-height:1.65;overflow-x:clip;max-width:100vw;overscroll-behavior-x:none;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
::selection{background:var(--blue);color:var(--on-blue)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

h1,h2,h3{font-weight:800;letter-spacing:-.025em;line-height:.96;color:var(--white);text-transform:uppercase}
.h-xl{font-size:clamp(40px,8vw,116px)}  /* 'installatiebedrijf' is te lang voor één regel op een
   telefoon. De ­ in de kop breekt het woord daar netjes af; de ondergrens van 40px zorgt dat
   ook 'installatie-' op 320px binnen de viewport blijft (248 van de 260px die er is). */
.h-lg{font-size:clamp(32px,4.6vw,62px)}
.lede{font-weight:300;font-size:clamp(16px,1.3vw,20px);line-height:1.6;max-width:44ch;color:var(--ink)}
.mono{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel);font-weight:500}

/* max() met de safe-area: op een toestel met notch of afgeronde hoeken valt de
   tekst in landschap anders onder de rand. viewport-fit=cover staat aan. */
.wrap{max-width:var(--maxw);margin:0 auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right))}
section{position:relative}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#bg canvas{display:block;width:100%;height:100%}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(115% 75% at 50% 42%,transparent 40%,rgba(var(--void-rgb),.72) 100%)}
.content{position:relative;z-index:2}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:border-color .4s}
.nav::before{content:'';position:absolute;inset:0;z-index:-2;opacity:0;transition:opacity .4s;
  background:rgba(var(--void-rgb),.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav.stuck::before{opacity:1}
.nav.stuck{border-bottom-color:var(--hair)}
.nav-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:26px;
  padding:15px max(var(--pad),env(safe-area-inset-right)) 15px max(var(--pad),env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand svg{width:64px;height:19px;flex:none}
.brand b{font-weight:800;letter-spacing:.06em;font-size:16px;color:var(--white);line-height:1;display:block}
.brand i{font-style:normal;display:block;font-family:var(--ff-m);font-size:8px;letter-spacing:.4em;color:var(--blue);margin-top:3px}
.nav-links{display:flex;gap:28px}
.nav-links a{font-family:var(--ff-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding:6px 0;
  position:relative;transition:color .3s;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--blue);transition:right .4s cubic-bezier(.2,.8,.2,1)}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{right:0}
/* 44px is het kleinste tikvlak dat op touch betrouwbaar raak is. De streepjes
   blijven optisch 22px breed, dus de balk oogt niet zwaarder dan eerst. */
.burger{display:none;width:44px;height:44px;position:relative;margin-right:-4px}
.burger i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--silver);transition:.3s}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:25px}
.burger.on i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.on i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.btn{display:inline-flex;align-items:center;gap:11px;padding:13px 24px;font-family:var(--ff-m);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--hair2);color:var(--white);
  transition:border-color .35s,background .35s}
.btn:hover{border-color:var(--blue);background:var(--tint)}
.btn.solid{background:var(--blue);border-color:var(--blue);color:var(--on-blue);font-weight:500}
.btn.solid:hover{background:var(--blue-lit);border-color:var(--blue-lit)}
.btn u{width:14px;height:1px;background:currentColor;text-decoration:none;transition:width .3s}
.btn:hover u{width:22px}

/* hero */
.hero .wrap{position:relative}
.hero .wrap::before{content:'';position:absolute;top:-8%;bottom:-8%;left:calc(var(--pad)*-1);right:calc(var(--pad)*-1);z-index:-1;
  background:radial-gradient(60% 55% at 30% 50%,rgba(var(--void-rgb),.86),transparent 75%)}
.hero{min-height:100svh;display:flex;align-items:center;padding-bottom:clamp(72px,12vh,110px);padding-top:clamp(96px,14vh,150px)}
.hero h1{margin:20px 0 24px}
.hero h1 span{display:block}
.disc{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:32px;list-style:none}
.disc li{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;gap:9px}
.disc li::before{content:'';width:5px;height:5px;background:var(--blue);transform:rotate(45deg);box-shadow:0 0 10px var(--blue)}
.cta{display:flex;flex-wrap:wrap;gap:13px}
.hint{position:absolute;left:max(var(--pad),env(safe-area-inset-left));
  bottom:calc(20px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;
  font-family:var(--ff-m);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.hint .bar{width:50px;height:1px;background:var(--hair2);position:relative;overflow:hidden}
.hint .bar::after{content:'';position:absolute;inset:0;background:var(--blue);transform:translateX(-100%);
  animation:sweep 2.8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* sections */
.sec{padding:clamp(104px,17vh,210px) 0}
.sec-head{max-width:52ch;margin-bottom:clamp(52px,8vh,92px)}
.sec-head h2{margin:16px 0 22px}

/* disciplines */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hair)}
.four > div{border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);padding:34px 30px 38px}
.four > div:last-child{border-right:0}
.four svg{width:30px;height:30px;color:var(--blue);margin-bottom:26px}
.four h3{font-size:19px;letter-spacing:.02em;margin-bottom:12px}
.four p{font-size:14px;color:var(--ink);max-width:30ch}

/* capaciteitscalculator */
.calc-head{margin-bottom:clamp(20px,3vh,30px)}
/* De rekenhulp staat middenin de Modellen-sectie, dus het menu springt er niet
   naartoe met de sectiemarge als buffer. Zonder scroll-margin valt de kop van
   het blok onder de vaste balk. */
#rekenhulp{scroll-margin-top:clamp(84px,11vh,120px)}
.calc-head h3{font-size:clamp(22px,2.6vw,34px);margin-top:14px}

/* Vier velden naast elkaar wordt te smal voor labels als 'Kantoor of werkkamer
   +15%'. Daarom twee rijen van twee, met de uitkomst als eigen kolom ernaast:
   even hoog als de rest en toch een stuk compacter dan vijf kolommen. */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:clamp(18px,2.4vw,30px) clamp(20px,2.6vw,40px);align-items:end;
  padding:clamp(26px,4vh,40px) 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.calc-out{grid-column:3;grid-row:1/3}
.calc label{display:block;font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.calc .field{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--hair2);
  transition:border-color .3s}
.calc .field:focus-within{border-bottom-color:var(--blue)}
.calc input,.calc select{width:100%;background:none;border:0;color:var(--white);font-weight:300;
  font-family:var(--ff-d);font-size:clamp(16px,1.5vw,20px);padding:6px 0}
.calc input:focus,.calc select:focus{outline:0}
.calc input::placeholder{color:var(--faint)}
.calc input::-webkit-outer-spin-button,
.calc input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc input[type=number]{-moz-appearance:textfield}
.calc .field>span{font-family:var(--ff-m);font-size:12px;color:var(--steel);flex:none}
.calc select{appearance:none;-webkit-appearance:none;cursor:pointer}
.calc select option{background:var(--panel);color:var(--white)}
.calc .sel::after{content:'';flex:none;width:7px;height:7px;margin-bottom:6px;
  border-right:1px solid var(--steel);border-bottom:1px solid var(--steel);transform:rotate(45deg)}
.calc-out{text-align:right;align-self:end}
.calc-out output{display:block;font-weight:800;letter-spacing:-.025em;color:var(--white);
  font-size:clamp(30px,4.2vw,54px);line-height:1;margin-top:8px;white-space:nowrap}
.calc-out p{font-size:12px;color:var(--faint);margin:10px 0 0 auto;max-width:32ch;line-height:1.6}
.calc-sum{font-family:var(--ff-m);font-size:10px;letter-spacing:.16em;color:var(--steel);
  margin-top:12px!important}
.calc-sum:empty{display:none}
.calc-note{margin-top:clamp(20px,3vh,30px);margin-bottom:clamp(44px,6vh,76px)}

/* modellen */
.sec.panel{background:var(--panel)}
.units{border-top:1px solid var(--hair)}
.unit{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(26px,4vw,60px);
  align-items:center;padding:clamp(28px,4vh,44px) 0;border-bottom:1px solid var(--hair)}
/* Zonder min-width:0 krijgt de 1fr-kolom de min-content van .spec als
   ondergrens (drie tracks van 150px = 502px) en schuift de hele kaart de
   viewport uit. Op 390px was dat de afgesneden tekst. */
.unit>*{min-width:0}
.unit img{display:block;width:100%;height:auto}
.unit h3{font-size:clamp(20px,2.1vw,28px);margin:13px 0 11px}
.unit h3+p{font-size:14px;color:var(--ink);max-width:54ch}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 26px;
  margin-top:20px;max-width:52ch}
.spec div{display:flex;flex-direction:column;gap:4px}
.spec dt{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.spec dd{font-family:var(--ff-m);font-size:11.5px;letter-spacing:.05em;color:var(--white);line-height:1.45}
.note{font-size:13px;color:var(--faint);max-width:64ch;line-height:1.7;
  margin-top:clamp(30px,4vh,48px)}

/* work */
.work{border-top:1px solid var(--hair)}
.job{display:grid;grid-template-columns:150px 1fr 220px;gap:30px;align-items:baseline;
  padding:30px 20px 30px 20px;border-bottom:1px solid var(--hair);position:relative;transition:padding-left .45s cubic-bezier(.2,.8,.2,1)}
.job::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--blue);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 10px var(--blue)}
@media(hover:hover){
  .job:hover{padding-left:22px}
  .job:hover::before{transform:scaleY(1)}
}
.job h3{font-size:clamp(19px,2vw,27px)}
.job p{font-size:14px;color:var(--ink);max-width:58ch}
.job .mono{padding-top:6px}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:start}
.about p{margin-bottom:18px;color:var(--ink);max-width:50ch}
.about .first{font-size:clamp(18px,1.7vw,25px);color:var(--white);line-height:1.45;font-weight:300}
.facts{border-top:1px solid var(--hair)}
.facts div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--hair);
  font-family:var(--ff-m);font-size:11px;letter-spacing:.1em}
.facts dt{color:var(--faint);text-transform:uppercase;letter-spacing:.18em}
.facts dd{color:var(--white)}

/* contact */
.contact{min-height:92svh;display:flex;align-items:center;text-align:center}
.contact .wrap{width:100%}
.contact h2{margin:20px auto 30px}
.contact .cta{justify-content:center;margin-bottom:clamp(52px,9vh,96px)}
.details{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)}
.details > *{padding:24px 18px;text-align:left;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  transition:background .35s}
.details > *:last-child{border-right:0}
.details > a:hover{background:var(--tint)}
.details b{display:block;font-size:15px;font-weight:400;color:var(--white);margin-top:7px}
/* De telefooncel is zelf geen link meer — er zitten twee acties in, bellen en
   appen — dus de tint hangt aan de losse links erbinnen. */
.det-tel b{transition:color .3s}
.det-tel a:hover b{color:var(--blue-lit)}
.wa{display:inline-flex;align-items:center;gap:8px;margin-top:13px;font-family:var(--ff-m);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);transition:color .3s}
.wa svg{width:14px;height:14px;flex:none}
.wa:hover{color:var(--white)}

footer{border-top:1px solid var(--hair);padding:30px 0 calc(30px + env(safe-area-inset-bottom));
  position:relative;z-index:2}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--ff-m);font-size:10px;letter-spacing:.14em;color:var(--faint)}
/* Merklogo's houden hun eigen vorm: Instagram is van zichzelf lijnwerk, LinkedIn
   en WhatsApp zijn vlakken. Op 15px is een uitgeklede lijnversie van die twee
   niet meer te herkennen. De iconen die we zelf tekenen blijven wel lijnwerk. */
.social{display:flex;gap:10px;list-style:none}
.social a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--hair);
  color:var(--ink);transition:color .3s,border-color .3s,background .3s}
.social svg{width:15px;height:15px}
.social a:hover{color:var(--white);border-color:var(--blue);background:var(--tint)}

/* Zes links plus de knop passen pas vanaf ongeveer 1060px naast het merk. Zat
   het krapper, dan brak 'Over ons' over twee regels en werd de balk 94px hoog.
   Onder die grens vervalt de knop; Contact staat er als link nog. */
@media(max-width:1060px){ .nav .btn{display:none} }
@media(max-width:1000px){
  .four{grid-template-columns:repeat(2,1fr)}
  .four > div:nth-child(2n){border-right:0}
  .about{grid-template-columns:1fr;gap:44px}
  .details{grid-template-columns:repeat(2,1fr)}
  .details > *:nth-child(2n){border-right:0}
  .calc{grid-template-columns:1fr 1fr;gap:24px 22px}
  .calc-out{grid-column:1/-1;grid-row:auto;text-align:left;
    border-top:1px solid var(--hair);padding-top:22px}
  .calc-out p{margin-left:0;max-width:44ch}
  .unit{grid-template-columns:1fr;gap:20px}
  /* De bronfoto's zijn 640px breed. Op 420px vertoon je ze op een 2x-scherm
     op 840 device-pixels: een derde opgeblazen, en dat zie je terug als
     zachte, ruizige randen. 360px blijft binnen wat de bron aankan. */
  .unit img{max-width:360px}
  .job{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .job .mono{padding-top:0}
  .job h3{margin-bottom:12px}
  .job p{max-width:none}
}
@media(max-width:820px){
  .hero{min-height:88svh;padding-top:92px;padding-bottom:76px}
  .nav-links{position:fixed;inset:0;background:rgba(var(--void-rgb),.97);backdrop-filter:blur(20px);flex-direction:column;
    justify-content:center;align-items:flex-start;gap:4px;transform:translateY(-100%);height:100svh;
    padding:0 max(var(--pad),env(safe-area-inset-right)) 0 max(var(--pad),env(safe-area-inset-left));
    transition:transform .55s cubic-bezier(.76,0,.24,1);z-index:-1}
  .nav-links.on{transform:none}
  .nav-links a{font-family:var(--ff-d);font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--white);padding:11px 0}
  .nav-links a::after{display:none}
  .burger{display:block}
  /* Onder elkaar hoeft er geen ruimte meer tussen de kolommen te zitten: de
     binnenpadding weg, zodat alles op dezelfde linkerlijn ligt als de kop. */
  .four{grid-template-columns:1fr}
  .four > div{border-right:0;padding:30px 0 34px}
  .four svg{margin-bottom:18px}
  .details{grid-template-columns:1fr}
  .details > *{border-right:0;padding:20px 0}
}
/* Telefoon. De sectiemarges gaan omlaag: 17vh boven en onder betekent op een
   telefoon bijna een half scherm leegte per sectie. De hero houdt zijn eigen
   ruimte en blijft ongemoeid. */
@media(max-width:560px){
  .sec{padding:clamp(80px,12vh,140px) 0}
  /* Oppervlakte en hoogte blijven naast elkaar — die zijn kort. De twee
     keuzelijsten krijgen de volle breedte, anders valt het label weg. */
  .calc>div:nth-child(3),.calc>div:nth-child(4){grid-column:1/-1}
  .contact{min-height:auto}
  .contact .cta{margin-bottom:clamp(44px,7vh,72px)}
  .spec{gap:12px 20px}
  .foot{flex-direction:column;gap:9px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1!important;transform:none!important}
}