:root{
  /* KLEUREN */
  --ink:#1A1A1A;
  --paper:#FFFFFF;
  --muted:#64748B;         /* iets donkerder voor betere leesbaarheid */
  --primary:#8A5938;       /* FH bruin */
  --accent:#8A5938;
  --soft:#F4F1EE;

  /* UI */
  --radius:20px;
  --radius-sm:14px;
  --shadow:0 12px 28px rgba(0,0,0,.08);
  --shadow-sm:0 6px 16px rgba(0,0,0,.08);
  --maxw:1080px;
  --gap:18px;

  /* Typo */
  --h1: clamp(1.75rem, 2.6vw, 2.4rem);
  --h2: clamp(1.35rem, 2vw, 1.9rem);
  --h3: 1.1rem;
  --text: 1rem;
}

*{ box-sizing:border-box; }

html{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

img,svg{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:var(--primary);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }

.container{
  width:min(100% - 2rem, var(--maxw));
  margin-inline:auto;
}

.stack{
  display:grid;
  gap:var(--gap);
}

/* Typografie */
h1,h2,h3{
  line-height:1.2;
  letter-spacing:-0.01em;
  margin:0;
}
h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }

p{ margin:0; font-size:var(--text); color:inherit; }
small{ color:var(--muted); }

/* Focus (accessibility) */
:focus-visible{
  outline:3px solid rgba(138,89,56,.35);
  outline-offset:3px;
  border-radius:12px;
}

/* HEADER / NAV */
header.site{
  position:sticky;
  top:0;
  background:#fff;
  z-index:60;
  border-bottom:1px solid #e5e7eb;
  backdrop-filter:saturate(180%) blur(6px);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.7rem 0;
  gap:1rem;
}

.nav__brand img{
  height:72px;
  width:auto;
}

.nav__links{
  display:flex;
  align-items:center;
  gap:.25rem;
}

.nav__links a{
  padding:.45rem .7rem;
  border-radius:999px;
  color:var(--ink);
  font-weight:700;
  font-size:.95rem;
}
.nav__links a:hover{
  background:rgba(138,89,56,0.08);
  text-decoration:none;
}

@media (max-width:860px){
  .nav__links{ display:none; }
}

/* Hamburger */
.burger{
  background:transparent;
  border:none;
  font-size:1.7rem;
  display:none;
  color:var(--primary);
  cursor:pointer;
  padding:.35rem .5rem;
  border-radius:12px;
}
.burger:hover{ background:rgba(138,89,56,0.08); }

@media (max-width:860px){
  .burger{ display:block; }
}

/* MOBIEL MENU */
.drawer{
  position:fixed;
  inset:0 0 0 auto;
  width:min(85%,340px);
  background:var(--ink);
  color:#fff;
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:80;
  display:flex;
  flex-direction:column;
  box-shadow: -12px 0 30px rgba(0,0,0,.25);
}
.drawer.open{ transform:translateX(0); }

.drawer header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem;
  border-bottom:1px solid #2b2b2b;
}

.drawer a{
  color:#fff;
  padding:1rem 1.2rem;
  border-bottom:1px solid #2b2b2b;
  font-weight:700;
}
.drawer a:hover{
  background:#ffffff10;
  text-decoration:none;
}

.drawer .close{
  background:transparent;
  border:none;
  color:#fff;
  font-size:1.6rem;
  cursor:pointer;
  padding:.35rem .5rem;
  border-radius:12px;
}
.drawer .close:hover{ background:#ffffff10; }

/* HERO */
.hero-new{
  width:100%;
  overflow:hidden;
  background:var(--soft);
}
.hero-new picture,
.hero-new .hero-img{
  display:block;
  width:100%;
}
.hero-new .hero-img{
  height:auto;
  object-fit:contain;
}

/* METRICS */
.metrics{
  background:var(--soft);
  padding:1.6rem 0;
}
.kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
}
.kpi{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  padding:1rem .8rem;
  text-align:center;
  border:1px solid #eef2f7;
}
.kpi strong{
  font-size:1.15rem;
  color:var(--ink);
}
.kpi span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
}

/* SECTIES */
.section-dark{
  background:var(--ink);
  color:#fff;
  padding:2.2rem 0;
}
.section-light{
  background:#fff;
  color:var(--ink);
  padding:2.2rem 0;
}

/* ABOUT (premium) */
.about{
  padding:3.2rem 0;
  background:var(--soft);
}
.about-inner{
  display:grid;
  gap:1.2rem;
  padding-left:1.1rem;
  border-left:4px solid var(--primary);
}
.about p{
  font-size:1.06rem;
  line-height:1.75;
  color:#2e2e2e;
  max-width:72ch;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.95rem 1.1rem;
  border-radius:999px;
  border:2px solid transparent;
  font-weight:800;
  cursor:pointer;
  transition:transform .06s ease, background .18s ease, box-shadow .18s ease;
  user-select:none;
}
.btn:active{ transform:translateY(1px); }
.btn--accent{
  background:var(--primary);
  color:#fff;
  box-shadow:0 10px 20px rgba(138,89,56,.18);
}
.btn--accent:hover{
  background:#6E442A;
  text-decoration:none;
}
.btn--ghost{
  background:transparent;
  color:#fff;
  border-color:#ffffff40;
}
.btn--ghost:hover{
  background:#ffffff10;
  text-decoration:none;
}

.actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}

/* DIENSTEN GRID */
.services{
  display:grid;
  gap:.9rem;
}

/* Desktop: 2 kolommen services (veel rustiger) */
@media (min-width:860px){
  .services{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* Tablet: 2 kolommen vanaf 640px kan ook, als je wil */
@media (min-width:640px) and (max-width:859px){
  .services{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* Cards */
.service-card{
  background:#1F1F1F;
  color:#fff;
  padding:1.1rem 1.05rem;
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  border:1px solid #2b2b2b;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.service-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  border-color:#3a3a3a;
}
.service-card h3{
  margin:.2rem 0 .35rem;
  font-size:1.08rem;
}
.service-card p{
  margin:0;
  color:#E5E7EB;
  font-size:.96rem;
  line-height:1.6;
}
.service-card small{
  color:#cbd5e1;
}

/* ⭐ Primary card variant (voor Thuisbatterijen) */
.service-card--primary{
  background:linear-gradient(135deg, rgba(138,89,56,.28), rgba(31,31,31,1));
  border-color:rgba(138,89,56,.35);
  position:relative;
  overflow:hidden;
}
.service-card--primary::after{
  content:"Meest gekozen";
  position:absolute;
  top:12px;
  right:12px;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.02em;
  background:rgba(138,89,56,.9);
  color:#fff;
  padding:.35rem .55rem;
  border-radius:999px;
}

/* FORMS */
.form-dark{
  background:#1A1A1A;
  color:#fff;
  border-radius:20px 20px 0 0;
  box-shadow:var(--shadow);
  padding:1.6rem;
}

/* Labels */
label{
  font-size:.9rem;
  color:#E5E7EB;
}

/* Inputs */
input,
textarea,
select{
  width:100%;
  padding:.9rem 1rem;
  border-radius:var(--radius-sm);
  border:1px solid #D1D5DB;
  background:#fff;
  color:var(--ink);
  font:inherit;
}

/* Dark form fields */
.form-dark input,
.form-dark textarea,
.form-dark select{
  background:#111;
  border-color:#374151;
  color:#fff;
}
.form-dark input::placeholder,
.form-dark textarea::placeholder{ color:#94a3b8; }

/* Submit */
form button[type="submit"],
input[type="submit"]{
  display:block;
  width:100%;
  padding:1rem;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:999px;
  font-size:1rem;
  font-weight:800;
  cursor:pointer;
  transition:background .18s ease, transform .06s ease;
}
form button[type="submit"]:hover,
input[type="submit"]:hover{
  background:#6E442A;
}
form button[type="submit"]:active{ transform:translateY(1px); }

/* Helper tekst */
.field-help{
  display:block;
  margin-top:6px;
  font-size:12px;
  opacity:.8;
  color:#cbd5e1;
}

/* PROJECTEN (carousel) */
.proj-wrap{ position:relative; }

.proj-nav{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.proj-btn{
  pointer-events:auto;
  position:absolute;
  top:45%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.92);
  color:#111;
  font-weight:900;
  font-size:20px;
  display:grid;
  place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
  cursor:pointer;
}
.proj-btn.prev{ left:6px; }
.proj-btn.next{ right:6px; }
.proj-btn[disabled]{ opacity:.4; cursor:default; }

@media (min-width:1024px){
  .proj-nav{ display:none; }
}

/* Scroller */
.proj-scroller{
  --peek:18%;
  display:grid;
  gap:1rem;
  max-width:100%;
}

.proj-card{
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  border:1px solid #eef2f7;
}
.proj-card img{
  width:100%;
  height:300px;
  object-fit:cover;
  display:block;
}
.proj-card h3{
  margin:.8rem .9rem .2rem;
  font-size:1rem;
  color:var(--ink);
}
.proj-card p{
  margin:0 .9rem 1rem;
  color:var(--muted);
  font-size:.95rem;
}

/* Mobiel: swipe */
@media (max-width:599px){
  .proj-scroller{
    grid-auto-flow:column;
    grid-auto-columns:calc(100% - var(--peek));
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding-bottom:.25rem;
  }
  .proj-card{ scroll-snap-align:start; }
  .proj-scroller::-webkit-scrollbar{ display:none; }
}

/* Tablet: 2 cards swipe */
@media (min-width:600px) and (max-width:1023px){
  .proj-scroller{
    grid-auto-flow:column;
    grid-auto-columns:50%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding-bottom:.25rem;
  }
  .proj-card{ scroll-snap-align:start; }
  .proj-scroller::-webkit-scrollbar{ display:none; }
}

/* Desktop: 4 kolommen */
@media (min-width:1024px){
  .proj-scroller{ grid-template-columns:repeat(4, 1fr); }
}

/* Dots */
.proj-dots{
  display:none;
  justify-content:center;
  gap:.4rem;
  margin-top:.35rem;
}
.proj-dots button{
  width:6px;
  height:6px;
  border-radius:999px;
  border:0;
  background:#cbd5e1;
  opacity:.75;
}
.proj-dots button[aria-current="true"]{
  background:var(--primary);
  opacity:1;
}
@media (max-width:1023px){
  .proj-dots{ display:flex; }
}

/* Footer */
.footer-min{
  background:var(--ink);
  color:#e5e7eb;
  padding:2rem 0 1.5rem;
  font-size:.95rem;
}
.footer-min a{ color:#f9fafb; text-decoration:none; }
.footer-min a:hover{ color:var(--primary); text-decoration:none; }

.footer-min__inner{ display:grid; gap:1rem; }
.footer-min__brand{ text-align:center; line-height:1.5; }
.footer-min__brand strong{ color:#f8fafc; font-weight:900; }

.footer-min__links{ text-align:center; color:#cbd5e1; }
.footer-min__links nav{ display:inline-flex; gap:.5rem; }

.footer-min__copy{
  margin-top:.8rem;
  padding-top:.8rem;
  border-top:1px solid #2b2b2b;
  text-align:center;
  font-size:.85rem;
  color:#9ca3af;
}

@media (min-width:860px){
  .footer-min__inner{
    grid-template-columns:1fr 1fr;
    align-items:start;
    text-align:left;
  }
  .footer-min__brand{ text-align:left; }
  .footer-min__links{ text-align:right; }
  .footer-min__copy{ grid-column:1 / -1; text-align:center; }
}

/* KPI's in DIENSTEN-sectie: mobiel compacter */
@media (max-width:768px){
  #diensten .kpis{
    grid-template-columns:1fr 1fr;
    gap:.6rem;
  }
  #diensten .kpis .kpi:last-child{ grid-column:1 / -1; }
  #diensten .kpi{
    background:#ffffff;
    box-shadow:none;
    border:1px solid #e5e7eb;
    padding:.75rem .6rem;
    border-radius:14px;
  }
  #diensten .kpi strong{ font-size:1rem; line-height:1.2; }
  #diensten .kpi span{ font-size:.85rem; color:#6b7280; }
}

/* Trustindex widget */
.ti-widget{
  max-width:100% !important;
  overflow-x:hidden !important;
}

.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;
}
.drawer {
  transform: translateX(100%);
  transition: transform .25s ease;
  height: 100vh;
}

.drawer.open {
  transform: translateX(0);
}