:root{
  --terracotta:#B5633A;
  --brown:#2C1F14;
  --cream:#FAF6F0;
  --orange:#E8A87C;
  --midbrown:#7A5C44;
  --line:#E3D8C9;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:"DM Sans",sans-serif;
  background:var(--cream);
  color:var(--brown);
  font-size:1.05rem;
  line-height:1.65;
}

img{ display:block; max-width:100%; }
a{ color:var(--terracotta); }
a:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; }

h1,h2,h3{ font-family:"Playfair Display",serif; font-weight:700; line-height:1.15; }
h1{ font-size:clamp(2rem,5vw,3.1rem); letter-spacing:-0.02em; }
h2{ font-size:clamp(1.6rem,3.5vw,2.2rem); }
h3{ font-size:1.15rem; margin-bottom:.5rem; }

p{ margin-bottom:1rem; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-size:.75rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:700; color:var(--terracotta); display:block; margin-bottom:.6rem;
}
.dark .eyebrow{ color:var(--orange); }

.rule{ width:52px; height:3px; background:var(--terracotta); margin:1.1rem 0 1.4rem; }
.rule.light{ background:var(--orange); }

/* ── nav ── */
.nav{
  position:sticky; top:0; z-index:20;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  padding:.9rem 5vw;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.logo{ font-family:"Playfair Display",serif; font-weight:700; font-size:1.2rem; color:var(--brown); text-decoration:none; line-height:1.2; }
.logo{ display:flex; align-items:center; gap:.7rem; }
.logo-img{ width:42px; height:42px; border-radius:9px; display:block; flex-shrink:0; }
.logo .mark{ color:var(--terracotta); }
.logo .sub{
  display:block; font-family:"DM Sans",sans-serif; font-weight:500;
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--midbrown);
}
.nav-links{ display:flex; gap:1.6rem; }
.nav-links a{
  text-decoration:none; color:var(--brown); font-weight:500; font-size:.95rem;
  padding:.2rem 0; border-bottom:2px solid transparent;
}
.nav-links a:hover{ color:var(--terracotta); }
.nav-links a[aria-current="page"]{ color:var(--terracotta); border-bottom-color:var(--terracotta); }

/* ── sections ── */
.section{ padding:4.5rem 5vw; }
.section .inner{ max-width:1080px; margin:0 auto; }
.dark{ background:var(--brown); color:var(--cream); }
.dark h1,.dark h2,.dark h3{ color:var(--cream); }
.band{ border-top:1px solid var(--line); }

.row{ display:flex; gap:3rem; align-items:flex-start; }
.col{ flex:1; }
.col-60{ flex:1.5; }
.col-40{ flex:1; }
@media (max-width:760px){
  .row{ flex-direction:column; gap:2rem; }
  .section{ padding:3rem 6vw; }
}

.lead{ font-size:1.15rem; color:var(--midbrown); }
.dark .lead{ color:var(--orange); }

ul.dots{ list-style:none; }
ul.dots li{ position:relative; padding-left:1.6rem; margin-bottom:.7rem; }
ul.dots li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.55rem; height:.55rem; background:var(--terracotta); border-radius:50%;
}
.dark ul.dots li::before{ box-shadow:none; background:var(--orange); }

.pullquote{
  border-left:3px solid var(--terracotta);
  padding:.6rem 0 .6rem 1.2rem;
  font-family:"Playfair Display",serif;
  font-size:1.2rem; line-height:1.45;
  margin-top:1.6rem;
}

.photo{ border-radius:2px; overflow:hidden; }
.photo img{ width:100%; height:100%; object-fit:cover; }

/* ── cards ── */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.2rem; margin-top:1.5rem; }
.card{
  background:#fff; padding:1.6rem 1.4rem;
  border-top:3px solid var(--terracotta);
}
.card .num{
  font-family:"Playfair Display",serif; font-size:1.5rem; font-weight:700;
  color:var(--orange); display:block; margin-bottom:.6rem;
}
.card p{ font-size:.95rem; color:var(--midbrown); }

/* ── service blocks ── */
.dienst{ padding-top:3.4rem; margin-top:3.4rem; border-top:1px solid var(--line); }
.dienst:first-of-type{ padding-top:0; margin-top:0; border-top:none; }
.detail-box{ background:#fff; padding:1.5rem; border-left:3px solid var(--terracotta); }
.detail-box ul.dots li{ font-size:.95rem; margin-bottom:.55rem; }
.result{ background:var(--brown); color:var(--cream); padding:1.3rem 1.5rem; margin-top:1.2rem; }
.result .eyebrow{ color:var(--orange); margin-bottom:.3rem; }
.result p{ font-size:.98rem; }

/* ── tables ── */
table{ width:100%; border-collapse:collapse; }
.kosten td{ padding:.7rem .5rem .7rem 0; border-bottom:1px solid var(--line); vertical-align:bottom; }
.kosten .amount{ text-align:right; white-space:nowrap; color:var(--midbrown); font-variant-numeric:tabular-nums; }
.kosten .total td{ font-weight:700; border-bottom:2px solid var(--terracotta); }
.sources{ font-size:.8rem; color:var(--midbrown); margin-top:1rem; }
.sources span{ display:block; margin-bottom:.35rem; }

.vergelijk{ display:grid; grid-template-columns:1fr auto 1fr; column-gap:1rem; row-gap:0; align-items:stretch; }
.vergelijk .head{ border-bottom:2px solid var(--terracotta); padding-bottom:.4rem; }
.vergelijk .nu{ color:var(--midbrown); }
.vergelijk .arrow{ color:var(--terracotta); font-weight:700; align-self:center; }
.vergelijk > div{ padding:.75rem 0; border-bottom:1px solid var(--line); }
.vergelijk .na{ font-weight:500; }
@media (max-width:640px){
  .vergelijk{ grid-template-columns:1fr; }
  .vergelijk .head.arrowhead, .vergelijk .arrow{ display:none; }
  .vergelijk .nu{ border-bottom:none; padding-bottom:.15rem; }
  .vergelijk .nu::before{ content:"Nu: "; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--terracotta); }
  .vergelijk .na{ padding-top:.15rem; }
  .vergelijk .na::before{ content:"Na: "; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--terracotta); }
}

/* ── resultaten & aanbevelingen ── */
.case{ border-left:3px solid var(--terracotta); padding-left:1.1rem; margin-bottom:1.4rem; }
.case p{ font-size:.97rem; }

.quote-label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta); font-weight:700; margin-bottom:.7rem; }
.quote-main{ font-family:"Playfair Display",serif; font-size:1.25rem; line-height:1.4; margin-bottom:1rem; }
.quote-body{ font-size:.92rem; color:var(--midbrown); }
.quote-sig{ margin-top:1rem; border-top:1px solid var(--line); padding-top:.8rem; }
.quote-sig .name{ font-family:"Playfair Display",serif; font-weight:700; }
.quote-sig .role{ font-size:.85rem; color:var(--terracotta); }
.quote-band{ background:var(--brown); color:var(--cream); padding:1.4rem 1.7rem; margin-top:2.4rem; font-style:italic; }
.quote-band .who{ font-style:normal; color:var(--orange); }

/* ── buttons ── */
.btn{
  display:inline-block; background:var(--terracotta); color:#fff;
  text-decoration:none; font-weight:700; font-size:1rem;
  padding:.85rem 1.7rem; border-radius:3px;
}
.btn:hover{ background:#9c5330; }
.btn.ghost{ background:transparent; color:var(--terracotta); border:2px solid var(--terracotta); }
.btn.ghost:hover{ background:var(--terracotta); color:#fff; }
.dark .btn.ghost{ color:var(--orange); border-color:var(--orange); }
.dark .btn.ghost:hover{ background:var(--orange); color:var(--brown); }

/* ── contact page ── */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-top:2rem; }
.contact-card{
  background:#fff; padding:1.7rem 1.5rem; border-top:3px solid var(--terracotta);
  text-decoration:none; color:var(--brown); display:block;
}
.contact-card:hover{ border-top-color:var(--brown); }
.contact-card .how{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--terracotta); display:block; margin-bottom:.5rem; }
.contact-card .what{ font-family:"Playfair Display",serif; font-size:1.25rem; font-weight:700; margin-bottom:.4rem; }
.contact-card p{ font-size:.93rem; color:var(--midbrown); }

/* ── downloads page ── */
.dl-list{ display:grid; gap:1.4rem; margin-top:2rem; }
.dl-card{
  background:#fff; border-left:3px solid var(--terracotta);
  padding:1.7rem 1.6rem;
  display:flex; gap:1.5rem; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
}
.dl-card .type{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--terracotta); display:block; margin-bottom:.4rem; }
.dl-card h3{ font-size:1.3rem; }
.dl-card p{ font-size:.95rem; color:var(--midbrown); max-width:52ch; }
.dl-card .btn{ flex-shrink:0; }

/* ── footer ── */
.footer{
  background:var(--brown); color:var(--cream);
  padding:2.2rem 5vw; font-size:.88rem;
}
.footer .inner{ max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; }
.footer a{ color:var(--orange); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }