:root{
    --paper:#EEF0EC;
    --paper-raised:#E4E7E1;
    --ink:#14232B;
    --ink-soft:#3C4E55;
    --petrol:#2B6E74;
    --petrol-deep:#1D4E53;
    --ochre:#B8752A;
    --reed:#7C8C82;
    --line:#C9D0C7;

    --font-display:'Space Grotesk', sans-serif;
    --font-body:'IBM Plex Sans', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;

    --wrap: min(1120px, 92vw);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{
    font-family:var(--font-display);
    color:var(--ink);
    margin:0;
    letter-spacing:-0.01em;
  }

  a{color:inherit;}

  .wrap{
    width:var(--wrap);
    margin:0 auto;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--petrol-deep);
    display:flex;
    align-items:center;
    gap:0.6em;
  }
  .eyebrow::before{
    content:"";
    width:1.4em;
    height:1px;
    background:var(--ochre);
    display:inline-block;
  }

  /* ---------- Header ---------- */
  .site-header{
    position:sticky;
    top:0;
    z-index:40;
    background:rgba(238,240,236,0.88);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .site-header .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.1rem 0;
  }
  .logo{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.1rem;
    letter-spacing:0.01em;
    text-decoration:none;
    display:flex;
    align-items:baseline;
    gap:0.35em;
  }
  .logo span{
    font-family:var(--font-mono);
    font-weight:400;
    font-size:0.68rem;
    color:var(--reed);
    letter-spacing:0.05em;
  }
  nav.primary-nav ul{
    list-style:none;
    display:flex;
    gap:2rem;
    margin:0;
    padding:0;
  }
  nav.primary-nav a{
    text-decoration:none;
    font-size:0.92rem;
    color:var(--ink-soft);
    position:relative;
    padding-bottom:3px;
  }
  nav.primary-nav a:hover{color:var(--petrol-deep);}
  nav.primary-nav a::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:1px;
    background:var(--ochre);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
  }
  nav.primary-nav a:hover::after{transform:scaleX(1);}

  .nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--line);
    border-radius:6px;
    width:40px;
    height:36px;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:"";
    display:block;
    width:18px;
    height:1.5px;
    background:var(--ink);
    position:relative;
  }
  .nav-toggle span::before{position:absolute; top:-6px;}
  .nav-toggle span::after{position:absolute; top:6px;}

  /* ---------- Hero ---------- */
  .hero{
    padding:5.5rem 0 4.5rem;
    position:relative;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1.15fr 0.5fr;
    gap:3rem;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(2.1rem, 4vw, 3.15rem);
    line-height:1.08;
    margin:0.9rem 0 1.3rem;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--petrol-deep);
    border-bottom:2px solid var(--ochre);
  }
  .hero p.lede{
    font-size:1.08rem;
    color:var(--ink-soft);
    max-width:46ch;
    margin:0 0 2rem;
  }
  .cta-row{display:flex; gap:1rem; flex-wrap:wrap;}
  .btn{
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.92rem;
    padding:0.85rem 1.5rem;
    border-radius:2px;
    text-decoration:none;
    display:inline-block;
    border:1px solid transparent;
  }
  .btn-primary{
    background:var(--ink);
    color:var(--paper);
  }
  .btn-primary:hover{background:var(--petrol-deep);}
  .btn-ghost{
    border-color:var(--ink);
    color:var(--ink);
  }
  .btn-ghost:hover{border-color:var(--petrol-deep); color:var(--petrol-deep);}

  /* Conditiescore-gauge (NEN 2767) — signature element */
  .gauge{
    justify-self:center;
    font-family:var(--font-mono);
  }
  .gauge svg{width:100%; height:auto; max-width:150px; display:block; margin:0 auto;}
  .gauge-caption{
    text-align:center;
    font-size:0.68rem;
    color:var(--reed);
    letter-spacing:0.06em;
    text-transform:uppercase;
    margin-top:0.6rem;
  }

  /* ---------- Stofkam divider (signature motif) ---------- */
  .comb{
    width:100%;
    line-height:0;
    margin:0;
  }
  .comb svg{width:100%; height:48px; display:block;}

  /* ---------- Sections ---------- */
  section{padding:4.5rem 0;}
  .section-head{
    max-width:60ch;
    margin-bottom:2.75rem;
  }
  .section-head h2{
    font-size:clamp(1.6rem, 2.6vw, 2.1rem);
    margin-top:0.6rem;
  }

  /* Diensten */
  #diensten{background:var(--paper-raised);}
  .card-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .card{
    background:var(--paper-raised);
    padding:2.1rem;
  }
  .card h3{
    font-size:1.05rem;
    margin-bottom:0.6rem;
  }
  .card p{
    color:var(--ink-soft);
    font-size:0.94rem;
    margin:0;
  }
  .card .mark{
    font-family:var(--font-mono);
    font-size:0.75rem;
    color:var(--ochre);
    display:block;
    margin-bottom:0.9rem;
  }

  /* Werkwijze */
  .steps{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.75rem;
  }
  .step{
    border-top:2px solid var(--ink);
    padding-top:1rem;
  }
  .step .num{
    font-family:var(--font-mono);
    color:var(--ochre);
    font-size:0.85rem;
    display:block;
    margin-bottom:0.5rem;
  }
  .step h3{font-size:1rem; margin-bottom:0.4rem;}
  .step p{color:var(--ink-soft); font-size:0.9rem; margin:0;}

  /* Over */
  #over{background:var(--paper-raised);}
  .over-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:3rem;
    align-items:start;
  }
  .over-grid p{
    color:var(--ink-soft);
    font-size:1.02rem;
    max-width:52ch;
  }
  .fact-list{
    font-family:var(--font-mono);
    font-size:0.85rem;
    border-top:1px solid var(--line);
  }
  .fact-list div{
    display:flex;
    justify-content:space-between;
    padding:0.75rem 0;
    border-bottom:1px solid var(--line);
    gap:1rem;
  }
  .fact-list dt{color:var(--reed);}
  .fact-list dd{margin:0; text-align:right;}

  /* Contact */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
  }
  .contact-grid p{color:var(--ink-soft); max-width:42ch;}
  .contact-block{
    font-family:var(--font-mono);
    font-size:0.92rem;
    margin:2rem 0 0;
  }
  .contact-block dt{
    color:var(--reed);
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    margin-top:1.4rem;
  }
  .contact-block dt:first-child{margin-top:0;}
  .contact-block dd{margin:0.25rem 0 0; color:var(--ink);}
  .contact-block a{text-decoration:none; border-bottom:1px solid var(--ochre);}

  .placeholder{
    background:rgba(184,117,42,0.14);
    padding:0.05em 0.4em;
    border-radius:2px;
  }

  /* ---------- Footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:2rem 0;
  }
  footer .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:0.75rem;
    font-family:var(--font-mono);
    font-size:0.76rem;
    color:var(--reed);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 860px){
    .hero .wrap{grid-template-columns:1fr; gap:2rem;}
    .gauge{justify-self:start; max-width:180px;}
    .card-grid{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr 1fr;}
    .over-grid, .contact-grid{grid-template-columns:1fr;}
  }
  @media (max-width: 620px){
    nav.primary-nav{
      display:none;
      position:absolute;
      top:100%; left:0; right:0;
      background:var(--paper);
      border-bottom:1px solid var(--line);
      padding:1.25rem 0;
    }
    nav.primary-nav.open{display:block;}
    nav.primary-nav ul{flex-direction:column; gap:0; padding:0 6vw;}
    nav.primary-nav li{padding:0.7rem 0; border-bottom:1px solid var(--line);}
    .nav-toggle{display:flex;}
    .steps{grid-template-columns:1fr 1fr;}
  }

  /* subtle load-in for hero only */
  .hero .eyebrow, .hero h1, .hero p.lede, .hero .cta-row{
    animation:rise .6s ease both;
  }
  .hero h1{animation-delay:.05s;}
  .hero p.lede{animation-delay:.1s;}
  .hero .cta-row{animation-delay:.15s;}
  @keyframes rise{
    from{opacity:0; transform:translateY(8px);}
    to{opacity:1; transform:translateY(0);}
  }

  :focus-visible{
    outline:2px solid var(--ochre);
    outline-offset:2px;
  }

/* ---------- Contact form ---------- */
.contact-form{
  border-top:1px solid var(--line);
  padding-top:0.25rem;
}
.form-row{margin-bottom:1.15rem;}
.contact-form label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--reed);
  display:block;
  margin-bottom:0.4rem;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:0.95rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:2px;
  padding:0.7rem 0.85rem;
}
.contact-form textarea{min-height:130px; resize:vertical;}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:2px solid var(--ochre);
  outline-offset:1px;
  border-color:var(--petrol);
}
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-note{
  font-size:0.8rem;
  color:var(--reed);
  margin-top:0.9rem;
}

/* ---------- Bedankt / confirmation page ---------- */
.confirm{
  padding:7rem 0;
  text-align:left;
}
.confirm .eyebrow{margin-bottom:0.9rem;}
.confirm h1{
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  margin-bottom:1rem;
  max-width:20ch;
}
.confirm p{
  color:var(--ink-soft);
  max-width:48ch;
  font-size:1.02rem;
  margin-bottom:2rem;
}
.error-list{
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--ochre);
  border:1px solid var(--ochre);
  background:rgba(184,117,42,0.08);
  padding:1rem 1.2rem;
  margin-bottom:1.5rem;
  max-width:48ch;
}