:root{
  --petrol-950:#062527;
  --petrol-900:#0a3436;
  --petrol-800:#0f4548;
  --petrol-700:#155a5e;
  --petrol-600:#1c7075;
  --blue-700:#173fae;
  --blue-600:#1d55d6;
  --blue-500:#3b74f0;
  --blue-100:#e6edfd;
  --ink:#0b1e20;
  --muted:#4d6668;
  --paper:#f5f9f9;
  --paper-line:#dde9e9;
  --card:#ffffff;
  --line:#d3e2e2;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Montserrat',Arial,sans-serif;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size:28px 28px;
  line-height:1.55;
}
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.mono{ font-family:'JetBrains Mono',monospace; }

.wordmark{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:none;
  color:var(--petrol-900);
  white-space:nowrap;
}
.wordmark span{ color:var(--blue-600); }

header.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(245,249,249,0.9);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--petrol-900);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.header-row .wordmark{ font-size:20px; }
nav.main-nav a{
  color:var(--petrol-800);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  margin-left:28px;
  letter-spacing:0.02em;
}
nav.main-nav a:hover{ color:var(--blue-600); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px; font-weight:700; letter-spacing:0.08em;
  color:var(--blue-700);
  background:var(--blue-100);
  border:1px solid var(--blue-500);
  border-radius:999px;
  padding:5px 12px 5px 10px;
  text-transform:uppercase;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue-600); }

.hero{ padding:64px 0 56px; }
.hero-single{ max-width:640px; }
.hero h1{
  font-size:40px; line-height:1.15; font-weight:800; letter-spacing:-0.01em;
  margin:18px 0 16px; color:var(--petrol-950);
}
.hero h1 em{ font-style:normal; color:var(--blue-600); }
.hero p.lead{ font-size:16.5px; color:var(--muted); max-width:46ch; margin:0 0 22px; }

.specs-strip{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  border:1px solid var(--line); background:var(--card);
  border-radius:8px; padding:12px 16px; margin-top:8px;
}
.specs-strip div{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--muted); }
.specs-strip span{ color:var(--petrol-900); font-weight:700; }

section{ padding:56px 0; border-top:1px solid var(--line); }
.section-head{ max-width:56ch; margin-bottom:36px; }
.section-head .eyebrow{ margin-bottom:12px; }
.section-head h2{ font-size:27px; font-weight:800; color:var(--petrol-950); margin:0 0 10px; letter-spacing:-0.01em; }
.section-head p{ color:var(--muted); margin:0; font-size:15px; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; }
.step{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:22px 20px; position:relative;
}
.step .num{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px;
  width:30px; height:30px; border-radius:50%;
  background:var(--petrol-900); color:#eaf6f6;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.step h3{ font-size:16px; margin:0 0 6px; color:var(--petrol-950); }
.step p{ font-size:14px; color:var(--muted); margin:0; }

.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.feature-card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:20px 20px;
}
.feature-card h3{ font-size:15px; margin:0 0 6px; color:var(--petrol-950); }
.feature-card p{ font-size:13.5px; color:var(--muted); margin:0; }

.deliver-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
.deliver-card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:22px 20px;
}
.deliver-card svg{ margin-bottom:14px; }
.deliver-card h3{ font-size:15.5px; margin:0 0 6px; color:var(--petrol-950); }
.deliver-card p{ font-size:13.5px; color:var(--muted); margin:0; }

.about-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:start; }
.about-grid p{ color:var(--muted); font-size:15px; margin:0 0 14px; max-width:58ch; }
.about-grid strong{ color:var(--petrol-950); }
.quote-box{
  background:var(--petrol-950); color:#eaf6f6; border-radius:10px;
  padding:22px 22px; font-family:'JetBrains Mono',monospace; font-size:13px;
  line-height:1.6;
}
.quote-box .qmark{ color:var(--blue-500); font-size:22px; line-height:0; }

.request-form{
  display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:26px 24px;
}
.request-form .field{ display:flex; flex-direction:column; gap:6px; }
.request-form .field-full{ grid-column:1 / -1; }
.request-form label{ font-size:12.5px; font-weight:600; color:var(--petrol-800); }
.request-form input, .request-form textarea{
  font-family:'Montserrat',sans-serif; font-size:14px; padding:9px 11px;
  border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink);
}
.request-form input:focus, .request-form textarea:focus{ outline:none; border-color:var(--blue-500); }
.request-form textarea{ resize:vertical; min-height:80px; }
.request-form .submit-row{ grid-column:1 / -1; display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px; }
.request-form button{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; letter-spacing:0.02em;
  background:var(--petrol-900); color:#eaf6f6; border:none; border-radius:999px;
  padding:11px 26px; cursor:pointer;
}
.request-form button:hover{ background:var(--blue-700); }
.form-note{ font-size:12px; color:var(--muted); margin:0; }
.form-msg{ grid-column:1 / -1; font-size:13px; padding:10px 14px; border-radius:6px; display:none; }
.form-msg:not(:empty){ display:block; }
.form-msg-success{ background:#e7f5ee; border:1px solid var(--petrol-600); color:var(--petrol-950); }
.form-msg-error{ background:#fdecec; border:1px solid #c0392b; color:#8a2b22; }
.request-form .group-title{
  grid-column:1 / -1;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--blue-700);
  margin:14px 0 -4px; padding-top:14px; border-top:1px solid var(--line);
}
.request-form .group-title:first-child{ margin-top:0; padding-top:0; border-top:none; }
.request-form .hint{ font-size:11.5px; color:var(--muted); margin:2px 0 0; }
.form-alert{
  background:var(--blue-100); border:1px solid var(--blue-500); border-radius:8px;
  padding:12px 14px; font-size:13px; color:var(--petrol-950); line-height:1.5;
}

.faq-list{ display:flex; flex-direction:column; gap:14px; max-width:72ch; }
.faq-item{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px; }
.faq-item h3{ font-size:15px; margin:0 0 6px; color:var(--petrol-950); }
.faq-item p{ font-size:14px; color:var(--muted); margin:0; }

.photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.photo-grid figure{ margin:0; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.photo-grid picture{ display:block; }
.photo-grid img{ display:block; width:100%; height:220px; object-fit:cover; background:var(--paper-line); }
.photo-grid figcaption{ font-size:11.5px; color:var(--muted); padding:8px 10px; font-family:'JetBrains Mono',monospace; }

.helper-drawing{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:14px; margin-bottom:26px;
}
.helper-drawing svg{ display:block; width:100%; height:auto; }
.helper-drawing figcaption{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); margin-top:8px;
}

/* onzichtbaar op het scherm, wel voorleesbaar door schermlezers */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.legal-content{ max-width:72ch; }
.legal-content h2{ font-size:20px; font-weight:800; color:var(--petrol-950); margin:32px 0 10px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ font-size:14.5px; color:var(--muted); margin:0 0 12px; }
.legal-content ul{ font-size:14.5px; color:var(--muted); margin:0 0 12px; padding-left:20px; }
.legal-content li{ margin:0 0 6px; }
.legal-content strong{ color:var(--petrol-950); }
.legal-updated{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); margin-bottom:8px; }
.back-link{ display:inline-block; margin-bottom:18px; font-size:13.5px; color:var(--blue-700); text-decoration:none; font-weight:600; }
.back-link:hover{ color:var(--blue-600); }

footer{
  border-top:2px solid var(--petrol-900);
  padding:30px 0; margin-top:0;
}
.footer-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.footer-row .wordmark{ font-size:15px; }
footer .meta{ font-size:12.5px; color:var(--muted); font-family:'JetBrains Mono',monospace; }
footer .meta a{ color:var(--blue-700); text-decoration:none; }
footer .legal-links{ display:flex; gap:14px; font-size:12px; }
footer .legal-links a{ color:var(--muted); text-decoration:none; }
footer .legal-links a:hover{ color:var(--blue-700); }

@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .request-form{ grid-template-columns:1fr; }
  .photo-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px; }
  nav.main-nav a{ margin-left:16px; font-size:13px; }
}


/* --- aanvraagformulier en prijsblok, gedeeld door index.html en freesmal-op-maat.html --- */
.prijs-blok {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 28px;
      align-items: start;
      background: var(--card);
      border: 1px solid var(--line);
      border-left: 4px solid var(--blue-600);
      border-radius: 10px;
      padding: 24px 26px;
      margin-bottom: 24px;
      max-width: 72ch;
    }
.prijs-bedrag {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
.prijs-euro {
      font-size: 40px;
      font-weight: 800;
      color: var(--petrol-950);
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
.prijs-per {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--blue-700);
      margin-top: 4px;
    }
.prijs-uitleg p {
      font-size: 13.5px;
      color: var(--muted);
      margin: 0 0 10px;
    }
.prijs-uitleg p:last-child {
      margin-bottom: 0;
    }
.prijs-uitzondering {
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }
@media (max-width:620px) {
      .prijs-blok {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }
[hidden] {
      display: none !important;
    }
.request-form .akkoord {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }
.request-form .akkoord label {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13.5px;
      font-weight: 500;
      color: var(--petrol-950);
      line-height: 1.5;
      cursor: pointer;
    }
.request-form .akkoord input {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      margin: 1px 0 0;
      accent-color: var(--blue-600);
      cursor: pointer;
    }
.request-form .akkoord a {
      color: var(--blue-700);
      font-weight: 600;
    }
.request-form .mm-melding {
      font-size: 11.5px;
      font-weight: 600;
      color: #8a2b22;
      margin: 2px 0 0;
    }
.begrippen {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 20px 22px;
      max-width: 72ch;
      margin-bottom: 26px;
    }
.begrippen h3 {
      font-size: 15px;
      margin: 0 0 8px;
      color: var(--petrol-950);
    }
.begrippen p {
      font-size: 13.5px;
      color: var(--muted);
      margin: 0 0 12px;
    }
.begrippen dl {
      margin: 0;
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 6px 18px;
    }
.begrippen dt {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--blue-700);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding-top: 2px;
    }
.begrippen dd {
      margin: 0;
      font-size: 13.5px;
      color: var(--muted);
    }
@media (max-width:620px) {
      .begrippen dl {
        grid-template-columns: 1fr;
        gap: 2px;
      }

      .begrippen dd {
        margin-bottom: 10px;
      }
    }

.aanvraag-knop{
  display:inline-block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px;
  background:var(--petrol-900); color:#eaf6f6; border-radius:999px;
  padding:11px 26px; text-decoration:none;
}
.aanvraag-knop:hover{ background:var(--blue-700); }


/* --- maatentabel en merkloos-blok, verhuisd van freesmal-op-maat naar de homepage --- */
table.bereik {
      border-collapse: collapse;
      width: 100%;
      max-width: 680px;
      font-size: 14px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
    }
table.bereik th,
    table.bereik td {
      text-align: left;
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
    }
table.bereik th {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--blue-700);
      background: var(--paper);
    }
table.bereik td:first-child {
      font-weight: 600;
      color: var(--petrol-950);
      white-space: nowrap;
    }
table.bereik tr:last-child td {
      border-bottom: none;
    }
.bereik-noot {
      font-size: 13px;
      color: var(--muted);
      margin: 14px 0 0;
      max-width: 68ch;
    }
.merkloos {
      background: var(--petrol-950);
      color: #eaf6f6;
      border-radius: 10px;
      padding: 26px 28px;
      max-width: 72ch;
    }
.merkloos h2 {
      font-size: 22px;
      font-weight: 800;
      margin: 0 0 12px;
      color: #ffffff;
    }
.merkloos p {
      font-size: 15px;
      margin: 0 0 12px;
      color: #cfe3e3;
    }
.merkloos p:last-child {
      margin-bottom: 0;
    }
.fm-cta {
      display: inline-block;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
      background: var(--petrol-900);
      color: #eaf6f6;
      border-radius: 999px;
      padding: 11px 26px;
      text-decoration: none;
    }
.fm-cta:hover {
      background: var(--blue-700);
    }