:root{
  --bg: #ffffff;               /* lichte achtergrond */
  --text: #101828;             /* bijna-zwart tekst */
  --muted: #667085;            /* secundaire tekst */
  --brand: #d62828;            /* rood accent (pas aan naar wens) */
  --brand-dark:#b51f1f;
  --surface:#f8fafc;           /* lichte panel achtergrond */
  --border:#e5e7eb;
}

html,body{ background:var(--bg); color:var(--text); }
.section.light{ background:var(--bg); }
.section.surface{ background:var(--surface); }

.btn{ 
  background:var(--brand); color:#fff; border:0; border-radius:10px; 
  padding:14px 20px; font-weight:700; 
}
.btn:hover{ background:var(--brand-dark); }

:root{
  --bg:#0f1420;
  --card:#151b28;
  --muted:#0e0242;
  --brand:#0e0242;
  --brand-2:#ff7352;
  --text:#eef2fb;
  --accent:#1f8cff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0b1220;color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,sans-serif}

/* Layout helpers */
.container{width:min(1100px,92%);margin-inline:auto}
.container.narrow{width:min(900px,92%)}
.section{padding:64px 0}
.section.alt{background:#0e1626}
h1,h2,h3{margin:0 0 12px}
h1{font-size:clamp(28px,4.5vw,48px)}
h2{font-size:clamp(24px,3vw,34px)}
h3{font-size:20px}
p{color:#c9d1e1}

.btn{
  display:inline-block;background:var(--brand);color:#fff;
  padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none
}
.btn.lg{padding:14px 22px;font-size:18px}
.btn.ghost{background:transparent;border:1px solid #2b3550;color:#dbe4ff}

.badges{margin-top:18px;color:#d3defa}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:#0b1220cc;backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid #121b2e}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand img{height:38px}
.nav{display:flex;gap:12px;align-items:center}
.nav a{color:#dfe7ff;text-decoration:none;padding:8px 10px;border-radius:8px}
.nav a:hover{background:#111a2d}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:22px}

/* Hero */
.hero{padding:84px 0;background:
  radial-gradient(900px 400px at 80% -20%, #1a2850 0%, transparent 60%),
  linear-gradient(180deg,#0f1629 0%, #0b1220 100%)}
.hero .lead{margin:8px 0 20px;color:#cfe2ff}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap}

/* Cards grid */
.grid{display:grid;gap:16px}
.grid.services{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid #1c2540;padding:18px;border-radius:14px}
.card h3{margin-bottom:6px}

/* Gallery placeholders */
.grid.gallery{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ph{aspect-ratio:16/10;border-radius:12px;background:
  linear-gradient(135deg,#1b2542,#111a2f);border:1px dashed #223050}

/* Form */
.form{display:grid;gap:16px;background:#0f1629;border:1px solid #1c2540;padding:18px;border-radius:14px}
.form-row{display:grid;gap:12px;grid-template-columns:1fr; }
.form label{display:grid;gap:6px;font-weight:600}
input,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #223050;background:#0a1120;color:#eaf0ff}
textarea{resize:vertical}
.services-checks{display:grid;gap:10px;border:1px solid #1f2945;padding:12px;border-radius:12px}
.services-checks legend{font-weight:800;margin-bottom:4px}
.services-checks label{display:flex;gap:10px;align-items:center;font-weight:500;color:#dbe4ff}

/* Contact */
.two{display:grid;gap:24px}
.contact-list,.hours{list-style:none;margin:0;padding:0}
.contact-list li + li, .hours li + li{margin-top:6px}

/* Footer */
.site-footer{border-top:1px solid #121b2e;background:#0a101c;padding:16px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo-small{height:26px;margin-right:10px;vertical-align:middle}
.footer-left{display:flex;align-items:center;gap:12px;color:#9fb0cf}
.footer-right{display:flex;gap:10px}
.social{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#131b2f;color:#dbe4ff;text-decoration:none;border:1px solid #1d2642}
.social:hover{background:#192445}

/* Responsive */
@media (max-width:880px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:64px;right:4%;flex-direction:column;background:#0b1220;border:1px solid #15203a;border-radius:10px;padding:10px;width:min(260px,92%)}
  .nav-toggle{display:block}
  .form-row{grid-template-columns:1fr}

  .card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; }
.field{ margin:16px 0; }
.field label{ display:block; font-weight:600; margin-bottom:8px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%; border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; font:inherit; background:#fff; color:var(--text);
}

.option-grid{
  display:grid; gap:10px; 
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.option{
  position:relative; border:1px solid var(--border); border-radius:12px;
  background:#fff; padding:12px 14px; font-weight:600; color:var(--text);
  cursor:pointer; user-select:none; display:flex; align-items:center; gap:10px;
}
.option input{ appearance:none; width:18px; height:18px; border:2px solid var(--muted); border-radius:4px; }
.option input:checked{ border-color:var(--brand); background:var(--brand); box-shadow: inset 0 0 0 3px #fff; }
.option:hover{ border-color:var(--brand); }

/* ========= MODERNE (LICHTE) UI VOOR HET FORMULIER ========= */

/* 1) Nieuwe (lichte) themakleuren – alleen voor UI */
:root {
  --bg-ui: #f6f8fb;
  --surface-ui: #ffffff;
  --text-ui: #0f172a;
  --muted-ui: #64748b;
  --border-ui: #e5e7eb;
  --shadow-ui: 0 6px 20px rgba(2, 6, 23, 0.08);
  --ring-ui: 0 0 0 3px rgba(214, 40, 40, 0.18); /* focus ring in brand-kleur */
}

/* 2) Paneel / card van het formulier */
#offerte .card.surface,
#offerte form.card,
#offerte .form,
#offerte .surface {
  background: var(--surface-ui);
  border: 1px solid var(--border-ui);
  box-shadow: var(--shadow-ui);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 28px);
  color: var(--text-ui);
}

/* 3) Veld-opmaak (inputs, textarea, select) */
#offerte .field label {
  display: block;
  font-weight: 700;
  color: var(--text-ui);
  margin-bottom: 8px;
}

#offerte input[type="text"],
#offerte input[type="email"],
#offerte input[type="tel"],
#offerte select,
#offerte textarea {
  width: 100%;
  appearance: none;
  background: #fff;
  color: var(--text-ui);
  border: 1px solid var(--border-ui);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

#offerte textarea { min-height: 120px; resize: vertical; }

#offerte input:focus,
#offerte select:focus,
#offerte textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--ring-ui);
  background: #fff;
}

/* 4) Mooie custom "select" met pijl (pure CSS, geen JS nodig) */
#offerte select {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364708b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 42px; /* ruimte voor de pijl */
}

/* 5) Moderne “tegel”-checkboxen */
#offerte .option-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 6px;
}

#offerte .option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-ui);
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .04s ease;
}

#offerte .option:hover { border-color: #d0d7e2; }
#offerte .option:active { transform: translateY(1px); }

/* het echte checkbox-element */
#offerte .option input {
  appearance: none;
  width: 20px; height: 20px;
  border: 2px solid #c7cfdb;
  border-radius: 6px;
  display: grid;
  place-items: center;
  transition: all .2s ease;
}

/* tikje groter op mobile */
@media (max-width: 560px) {
  #offerte .option input { width: 22px; height: 22px; border-radius: 7px; }
}

/* checkmark met inline SVG als achtergrond (wit vinkje) */
#offerte .option input:checked {
  border-color: var(--brand);
  background:
    var(--brand)
    url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
    no-repeat center/14px;
  box-shadow: inset 0 0 0 0 #fff;
}

/* focus state voor checkbox via label (toetsenbord) */
#offerte .option:focus-within {
  box-shadow: var(--ring-ui);
  border-color: var(--brand);
}

/* 6) Knop moderniseren */
#offerte button.btn {
  background: var(--brand);
  border: 0;
  border-radius: 12px;
  padding: 14px 22px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 8px 22px rgba(214, 40, 40, .22);
}
#offerte button.btn:hover {
  background: var(--brand-dark);
  box-shadow: 0 10px 24px rgba(214, 40, 40, .26);
}

/* 7) Kleine typografie & spacing tweaks */
#offerte h2 { margin-bottom: 14px; }
#offerte .muted { color: var(--muted-ui); margin-top: 10px; }

/* 8) Optioneel: sectie zelf wat lichter maken t.o.v. de rest */
#offerte.section.alt { background: var(--bg-ui); }

/* ========= MODERNE DONKERBLAUWE UI VOOR FORMULIER ========= */

:root {
  --bg-ui: #0f1420;        /* donkerblauw-zwart */
  --surface-ui: #151b28;   /* panel */
  --text-ui: #eef2fb;      /* bijna wit */
  --muted-ui: #94a3b8;     /* grijsblauw */
  --border-ui: #1f2937;    /* donkere rand */
  --accent-ui: #3b82f6;    /* fris blauw accent */
  --accent-ui-dark: #2563eb;
  --shadow-ui: 0 6px 20px rgba(0,0,0,0.35);
  --ring-ui: 0 0 0 3px rgba(59,130,246,0.35); /* focus ring in blauw */
}

/* Offerte sectie */
#offerte .card.surface,
#offerte form.card {
  background: var(--surface-ui);
  border: 1px solid var(--border-ui);
  box-shadow: var(--shadow-ui);
  border-radius: 14px;
  padding: clamp(18px, 2.4vw, 28px);
  color: var(--text-ui);
}

#offerte h2,
#offerte h3,
#offerte label {
  color: var(--text-ui);
}

/* Inputs */
#offerte input[type="text"],
#offerte input[type="email"],
#offerte input[type="tel"],
#offerte select,
#offerte textarea {
  width: 100%;
  background: #0b1120;
  color: var(--text-ui);
  border: 1px solid var(--border-ui);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

#offerte input:focus,
#offerte select:focus,
#offerte textarea:focus {
  border-color: var(--accent-ui);
  box-shadow: var(--ring-ui);
}

#offerte textarea { resize: vertical; }

/* Select met custom pijl */
#offerte select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 42px;
}

/* Checkbox tegels */
#offerte .option-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#offerte .option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-ui);
  border-radius: 12px;
  background: #0b1120;
  color: var(--text-ui);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

#offerte .option:hover { border-color: var(--accent-ui); }

#offerte .option input {
  appearance: none;
  width: 18px; height: 18px;
  border: 2px solid var(--muted-ui);
  border-radius: 4px;
  background: transparent;
  display: grid;
  place-items: center;
}

#offerte .option input:checked {
  border-color: var(--accent-ui);
  background: var(--accent-ui)
    url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
    no-repeat center/14px;
}

/* Knop */
#offerte button.btn {
  background: var(--accent-ui);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 14px 22px;
  font-weight: 700;
  transition: background .2s ease, transform .1s ease;
}
#offerte button.btn:hover {
  background: var(--accent-ui-dark);
  transform: translateY(-1px);
}

/* ===== Moderne donkerblauwe UI – werkt met losse checkboxes ===== */

/* velden & select in donker thema */
#offerte input[type="text"],
#offerte input[type="email"],
#offerte input[type="tel"],
#offerte select,
#offerte textarea{
  width:100%;
  background:#0b1120;
  color:#eef2fb;
  border:1px solid #1f2937;
  border-radius:10px;
  padding:12px 14px;
  outline:0;
  transition:border-color .2s, box-shadow .2s;
}
#offerte input:focus,
#offerte select:focus,
#offerte textarea:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.35);
}

/* custom pijl voor <select> */
#offerte select{
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
  padding-right:42px;
}

/* *** BELANGRIJK: checkboxes modern, zonder speciale markup *** */
#offerte input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px;
  border:2px solid #5b6b83;
  border-radius:6px;
  background:#0b1120;
  display:inline-grid; place-items:center;
  vertical-align:middle;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
  cursor:pointer;
}
#offerte input[type="checkbox"]:hover{ border-color:#3b82f6; }

/* blauw vinkje */
#offerte input[type="checkbox"]:checked{
  background:#3b82f6;
  border-color:#3b82f6;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px;
  box-shadow:inset 0 0 0 2px #0b1120;

}

/* ===== MODERNE CHECKBOX & SELECT, DONKER BLAUW THEMA ===== */

/* <select> */
select{
  -webkit-appearance:none; appearance:none;
  width:100% !important;
  background:#0b1120 !important;
  color:#eef2fb !important;
  border:1px solid #1f2937 !important;
  border-radius:10px !important;
  padding:12px 42px 12px 14px !important;
  outline:0 !important;
  transition:border-color .2s, box-shadow .2s;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
}
select:focus{ border-color:#3b82f6 !important; box-shadow:0 0 0 3px rgba(59,130,246,.35) }

/* CHECKBOX – werkt met losse <input type="checkbox"> */
input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  width:20px !important; height:20px !important;
  border:2px solid #5b6b83 !important;
  border-radius:6px !important;
  background:#0b1120 !important;
  display:inline-grid; place-items:center;
  vertical-align:middle; cursor:pointer;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
input[type="checkbox"]:hover{ border-color:#3b82f6 !important; }

/* wit vinkje */
input[type="checkbox"]::before{
  content:""; width:10px; height:6px;
  border:3px solid #fff; border-top:0; border-left:0;
  transform:rotate(45deg) scale(0);
  transition:transform .12s ease-in-out;
}
input[type="checkbox"]:checked{
  background:#3b82f6 !important; border-color:#3b82f6 !important;
  box-shadow:inset 0 0 0 2px #0b1120;
}
input[type="checkbox"]:checked::before{ transform:rotate(45deg) scale(1); }

/* === Moderne opties als 'chips' =================================== */
.options-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top:10px;
}

label.chip{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border:1px solid #253149;
  background:#0b1120;
  color:#e6edff;
  border-radius:12px;
  cursor:pointer; user-select:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}

label.chip:hover{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.18); }

/* verberg native checkbox, we stylen zelf */
label.chip input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:0; height:0; position:absolute; inset:0; margin:0; opacity:0;
}

/* custom box + checkmark */
label.chip .box{
  width:20px; height:20px; border-radius:6px;
  background:#0b1120; border:2px solid #5b6b83;
  display:grid; place-items:center; flex:0 0 20px;
  transition:border-color .2s, background-color .2s;
}
label.chip .box::after{
  content:""; width:10px; height:6px;
  border:3px solid #fff; border-top:0; border-left:0;
  transform:rotate(45deg) scale(0);
  transition:transform .12s ease-in-out;
}

/* checked state */
label.chip:has(input:checked){
  background:#0f1a30; border-color:#3b82f6;
}
label.chip:has(input:checked) .box{
  background:#3b82f6; border-color:#3b82f6;
}
label.chip:has(input:checked) .box::after{
  transform:rotate(45deg) scale(1);
}

/* tekst */
label.chip .txt{ font-weight:600; letter-spacing:.2px; }

/* --- Recent werk grid --- */
.grid.gallery.gallery-8{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.work{
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg,#141c2e,#0f1729);
  border: 1px solid #1c2540;
  box-shadow: 0 10px 30px rgba(2,8,23,0.35);
}

.work img{
  width: 100%;
  height: 200px;            /* uniforme hoogte */
  object-fit: cover;        /* netjes croppen */
  display: block;
  transform: scale(1.0);
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.05) contrast(1.02);
}

.work:hover img{
  transform: scale(1.06);
  filter: saturate(1.15) contrast(1.06);
}

@media (min-width: 900px){
  .work img{ height: 220px; }
}
@media (min-width: 1200px){
  .work img{ height: 240px; }
}

.social {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:#131b2f;
  color:#dbe4ff;
  text-decoration:none;
  border:1px solid #1d2642;
}
.social:hover {
  background:#192445;
}




/* === Lightbox stijl === */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999;
}

.lightbox.active {
  visibility: visible;
  opacity: 1;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

.lightbox img:hover {
  transform: scale(1.02);
  cursor: zoom-out;
}

/* Zorg dat muisaanwijzer op de kleine foto's een 'vergrootglas' wordt */
#projecten .work img {
  cursor: zoom-in;
}
}