/* ==========================================================================
   Niek Vusonikos — websites voor dakdekkers
   Bouwplaats-oranje op bitumenzwart. Eén donkere wereld, geen light-variant:
   de bezoeker kijkt 's avonds op zijn telefoon in de bus.
   ========================================================================== */

@font-face{
  font-family:"Archivo"; src:url("fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow"; src:url("fonts/barlow-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow"; src:url("fonts/barlow-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow"; src:url("fonts/barlow-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  /* Bitumen, zink, krijt, hesje */
  --bitumen:#100d0b;
  --bitumen-op:#171310;
  --lood:#1e1a16;
  --zink:#2b2621;
  --lijn:#332c26;
  --krijt:#f6f2ec;
  --stof:#b0a79d;
  --stof-dim:#8b8279;
  --hesje:#ff6a15;
  --hesje-licht:#ff8a45;
  --hesje-diep:#c74d09;

  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --tekst:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;

  --marge:clamp(20px,5vw,40px);
  --breed:1180px;
  --smal:720px;
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bitumen);
  color:var(--krijt);
  font-family:var(--tekst);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Browser-oppervlakken meeontwerpen */
::selection{background:var(--hesje); color:#160f09}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bitumen)}
::-webkit-scrollbar-thumb{background:var(--zink); border-radius:6px; border:3px solid var(--bitumen)}
::-webkit-scrollbar-thumb:hover{background:#413a33}
:focus-visible{outline:2px solid var(--hesje); outline-offset:3px; border-radius:2px}
:root{scrollbar-color:var(--zink) var(--bitumen); caret-color:var(--hesje)}

img{max-width:100%; height:auto; display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-0.03em; line-height:1.02; margin:0; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

.omhulsel{width:100%; max-width:var(--breed); margin:0 auto; padding-inline:var(--marge)}
.smal{max-width:var(--smal)}

/* ---------- Knoppen ---------- */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 26px;
  font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-0.01em;
  text-decoration:none; border:1.5px solid transparent; border-radius:var(--radius);
  cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.knop--vol{background:var(--hesje); color:#170f08; border-color:var(--hesje)}
.knop--vol:hover{background:var(--hesje-licht); border-color:var(--hesje-licht)}
.knop--rand{background:transparent; color:var(--krijt); border-color:#4a423a}
.knop--rand:hover{border-color:var(--krijt); background:rgba(246,242,236,.06)}
.knop:active{transform:translateY(1px)}
.knop--zwart{background:#160f09; color:#ffece0; border-color:#160f09}
.knop--zwart:hover{background:#241a12; border-color:#241a12}

.icoon{width:20px; height:20px; flex:none; stroke-width:1.75; stroke:currentColor; fill:none;
  stroke-linecap:round; stroke-linejoin:round}

/* ---------- Kopbalk ---------- */
.kopbalk{
  position:sticky; top:0; z-index:50;
  background:rgba(16,13,11,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lijn);
}
.kopbalk .rij{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px}
.merk{font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-0.02em; text-decoration:none}
.merk span{color:var(--hesje)}
.kopbalk .bellen{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  min-height:48px; padding-left:8px;
  font-weight:600; font-size:16px; color:var(--krijt);
  font-variant-numeric:tabular-nums;
}
.kopbalk .bellen:hover{color:var(--hesje-licht)}
.kopbalk .bellen .icoon{color:var(--hesje)}

/* ---------- Hero ---------- */
.hero{position:relative; padding:clamp(56px,10vw,104px) 0 0; text-align:center}
.hero h1{font-size:clamp(40px,8.2vw,86px); font-weight:800; max-width:15ch; margin-inline:auto}
.hero h1 .tweede{display:block}
.streep{
  width:min(180px,42vw); height:3px; margin:26px auto 0; background:var(--hesje);
  border-radius:2px;
}
@media (prefers-reduced-motion:no-preference){
  /* Rust is de volle streep; de animatie opent alleen de laatste helft. Draait hij niet, dan staat hij er gewoon. */
  .streep{animation:openen .65s cubic-bezier(.16,1,.3,1)}
  @keyframes openen{from{clip-path:inset(0 52% 0 0)} to{clip-path:inset(0 0 0 0)}}
}
.hero .subkop{
  margin:26px auto 0; max-width:38ch; font-size:clamp(18px,2.4vw,21px);
  color:var(--stof); line-height:1.5;
}
.acties{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px}
.onderknop{margin-top:16px; font-size:15px; color:var(--stof-dim)}

.portret{position:relative; margin-top:clamp(40px,6vw,64px)}
.portret figure{margin:0; position:relative}
.portret img,.portret .plek{
  width:100%; aspect-ratio:16/7; object-fit:cover; border-radius:var(--radius) var(--radius) 0 0;
}
.portret::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(to bottom,rgba(16,13,11,0),var(--bitumen));
  pointer-events:none;
}
/* Fotoplaatshouder — verdwijnt zodra er een echte foto is */
.plek{
  display:grid; place-content:center; gap:8px; text-align:center;
  background:
    repeating-linear-gradient(135deg,var(--lood) 0 14px,var(--bitumen-op) 14px 28px);
  border:1px dashed #4a423a; border-bottom:none;
  color:var(--stof-dim); font-size:14px; padding:20px;
}
.plek strong{font-family:var(--display); font-weight:700; color:var(--stof); font-size:16px}

/* ---------- Secties ---------- */
section{padding:clamp(64px,9vw,104px) 0}
.sectiekop{font-size:clamp(28px,4.6vw,44px); max-width:20ch}
.inleiding{margin-top:20px; max-width:60ch; color:var(--stof); font-size:18px}

/* Sectie 2 — waar het misgaat */
.misgaat{border-top:1px solid var(--lijn)}
.misgaat ul{margin-top:36px; display:grid; gap:0}
.misgaat li{
  display:grid; grid-template-columns:24px 1fr; gap:16px; align-items:start;
  padding:18px 0; border-bottom:1px solid var(--lijn); font-size:17px;
}
.misgaat li:first-child{border-top:1px solid var(--lijn)}
.misgaat .icoon{color:var(--hesje-diep); margin-top:3px; width:22px; height:22px}
.verlies{
  margin-top:32px; font-family:var(--display); font-weight:700;
  font-size:clamp(20px,3vw,27px); line-height:1.25; max-width:22ch; letter-spacing:-0.02em;
}

/* Sectie 3 — wat je krijgt */
.krijgt{background:var(--bitumen-op); border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn)}
.krijgt ul{margin-top:38px; display:grid; gap:22px 48px; grid-template-columns:1fr}
.krijgt li{display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start}
.krijgt .icoon{color:var(--hesje); margin-top:3px; width:22px; height:22px}
.krijgt li b{font-weight:600; color:var(--krijt); display:block; font-size:17px}
.krijgt li > span{color:var(--stof); font-size:16.5px}
.erbij{
  margin-top:48px; padding:26px 28px; border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--bitumen); display:grid; gap:14px 44px; align-items:start;
}
.erbij h3{font-size:19px; font-weight:700}
.erbij p{margin-top:12px; color:var(--stof); font-size:16.5px; max-width:64ch}

/* Sectie 4 — de prijs. Hier gaat het oranje aan. */
.prijs{background:var(--hesje); color:#170f08; padding:clamp(56px,8vw,88px) 0}
.prijsraster{display:grid; gap:36px 56px; grid-template-columns:1fr; align-items:start}
.prijs .kolom > *:first-child{margin-top:0}
.prijs .bedrag{
  font-family:var(--display); font-weight:800; letter-spacing:-0.045em;
  font-size:clamp(52px,12vw,120px); line-height:.92;
}
.prijs .excl{font-size:clamp(18px,3vw,26px); font-weight:700; letter-spacing:-0.02em}
.prijs .onder{margin-top:20px; font-size:19px; font-weight:500; max-width:44ch; color:#28190d}
.vergelijk{
  margin-top:32px; padding:22px 24px; background:#170f08; color:#ffe9d9;
  border-radius:var(--radius); max-width:52ch; font-size:17px; line-height:1.5;
}
.vergelijk b{color:#fff}
.betaling{margin-top:32px; font-size:17px; color:#28190d; max-width:48ch}
.betaling b{font-weight:600}
.beloftes{margin-top:36px; display:grid; gap:18px; grid-template-columns:1fr}
.belofte{border-top:2px solid #170f08; padding-top:16px}
.belofte h3{font-size:19px; color:#170f08}
.belofte p{margin-top:8px; font-size:16.5px; color:#301d10; max-width:44ch}
.later{margin-top:36px; font-size:16px; color:#3a2413; max-width:52ch}

/* Sectie 5 — wie ik ben */
.overmij{border-bottom:1px solid var(--lijn)}
.overmij .raster{display:grid; gap:44px; grid-template-columns:1fr; align-items:start}
.overmij .raster > *{min-width:0}
.overmij p{margin-top:20px; color:var(--stof); font-size:17.5px; max-width:52ch}
.overmij .eerlijk{
  margin-top:28px; padding-left:18px; border-left:1px solid var(--hesje);
  color:var(--krijt); font-size:17.5px;
}
.stappen{margin-top:40px; counter-reset:stap; display:grid; gap:0; max-width:880px}
.stappen li{
  counter-increment:stap; display:grid; grid-template-columns:34px 1fr; gap:0 16px;
  padding:20px 0; border-top:1px solid var(--lijn); align-items:start;
}
.stappen li:last-child{border-bottom:1px solid var(--lijn)}
.stappen li::before{
  content:counter(stap);
  font-family:var(--display); font-weight:700; font-size:19px; color:var(--hesje);
  letter-spacing:0; padding-top:3px; font-variant-numeric:tabular-nums;
}
.stappen li::before{grid-column:1; grid-row:1}
.stappen b{grid-column:2; grid-row:1; font-weight:600; font-size:17px; line-height:1.4}
.stappen > li > span{grid-column:2; grid-row:2; display:block; margin-top:5px; color:var(--stof); font-size:16.5px}
.stappen b .todo{font-weight:600}
.mijnnummer{
  margin-top:36px; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:700; font-size:clamp(22px,4vw,30px);
  letter-spacing:-0.02em; text-decoration:none; color:var(--krijt);
  font-variant-numeric:tabular-nums;
}
.mijnnummer .icoon{width:26px; height:26px; color:var(--hesje)}
.mijnnummer:hover{color:var(--hesje-licht)}
.werkfoto{min-width:0}
.werkfoto .plek,.werkfoto img{width:100%; aspect-ratio:4/5;
  border-radius:var(--radius); border-bottom:1px dashed #4a423a}
.werkfoto img{object-fit:cover}

/* Sectie 6 — formulier */
.aanvraag{background:var(--bitumen-op)}
.aanvraag .raster{display:grid; gap:44px; grid-template-columns:1fr}
.aanvraag .raster > *{min-width:0}
form{margin-top:32px; display:grid; gap:18px}
label{display:block; font-size:15px; font-weight:600; color:var(--stof); margin-bottom:7px}
label .optioneel{font-weight:400; color:var(--stof-dim)}
input{
  width:100%; min-height:54px; padding:0 16px;
  background:var(--bitumen); color:var(--krijt);
  border:1px solid var(--lijn); border-radius:var(--radius);
  font-family:var(--tekst); font-size:17px;
  transition:border-color .16s ease, background .16s ease;
}
input::placeholder{color:var(--stof-dim)}  /* 5.07:1 op bitumen */
input:hover{border-color:#463e37}
input:focus{border-color:var(--hesje); background:var(--lood)}
input:focus:not(:focus-visible){outline:none}
input:user-invalid{border-color:#e0552b}
.fout{display:none; margin-top:7px; font-size:14.5px; color:#ff9068}
input:user-invalid ~ .fout{display:block}
form .knop{width:100%; margin-top:6px}
.naformulier{font-size:15px; color:var(--stof-dim)}
.liever{
  border:1px solid var(--lijn); border-radius:var(--radius); padding:26px 26px 28px;
  background:var(--bitumen); align-self:start;
}
.liever .werkgebied{margin-top:16px; font-size:15px; color:var(--stof-dim)}
.liever h3{font-size:19px}
.liever p{margin-top:10px; color:var(--stof); font-size:16.5px}
.liever .knop{margin-top:18px; width:100%}
.liever .knop + .knop{margin-top:12px}
.wa{background:#1f2c22; border-color:#2f4436; color:#dcf3e4}
.wa:hover{background:#26382b; border-color:#3d5a47}
.wa .icoon{color:#4ade80}

/* Footer */
footer{border-top:1px solid var(--lijn); padding:44px 0 calc(44px + env(safe-area-inset-bottom))}
.voet{display:grid; gap:26px}
.voet .naam{font-family:var(--display); font-weight:700; font-size:17px}
.voet p,.voet a{color:var(--stof); font-size:15.5px; text-decoration:none}
.voet a:hover{color:var(--krijt); text-decoration:underline; text-underline-offset:3px}
.voetlinks{display:flex; flex-wrap:wrap; gap:8px 20px}

/* Vaste balk op mobiel */
.balk{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; gap:10px; padding:10px var(--marge) calc(10px + env(safe-area-inset-bottom));
  background:rgba(16,13,11,.94); backdrop-filter:blur(10px); border-top:1px solid var(--lijn);
}
.balk .knop{flex:1; min-height:52px; font-size:16px; padding:0 14px}

/* Nog in te vullen — mag nooit ongemerkt live */
.todo{
  background:transparent; color:var(--hesje-licht); border:1px dashed var(--hesje-diep);
  border-radius:3px; padding:0 6px; font-size:.9em; font-weight:600; font-family:var(--tekst);
}
.prijs .todo{color:#3a2413; border-color:#8a5a2a}

/* ---------- Breekpunten ---------- */
@media (min-width:700px){
  .erbij{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .erbij p{max-width:none}
  .krijgt ul{grid-template-columns:1fr 1fr}
  .beloftes{grid-template-columns:1fr 1fr; gap:28px}
  .voet{grid-template-columns:1fr auto; align-items:end}
}
@media (min-width:900px){
  .prijsraster{grid-template-columns:1.08fr .92fr; gap:0 64px}
  .prijs .beloftes{grid-template-columns:1fr; gap:24px}
  .overmij .raster{grid-template-columns:1.25fr .75fr; gap:60px; align-items:start}
  .aanvraag .raster{grid-template-columns:1.15fr .85fr; gap:56px; align-items:start}
  form{grid-template-columns:1fr 1fr; gap:18px 20px}
  form .breed{grid-column:1 / -1}
  form .knop{width:auto; justify-self:start; padding-inline:34px}
}
@media (max-width:699px){
  body{padding-bottom:76px}
  .balk{display:flex}
  .kopbalk .bellen{font-size:15px}
  .merk{font-size:16px}
  .hero{padding-top:44px}
  .acties{flex-direction:column}
  .acties .knop{width:100%}
}

/* Waarschuwing zolang het formulier niet is aangesloten. Weghalen zodra het endpoint staat. */
.nietaangesloten{
  margin-top:4px; padding:14px 16px; border:1px dashed var(--hesje-diep);
  border-radius:var(--radius); color:var(--hesje-licht); font-size:15px; line-height:1.45;
}
.knop:disabled,.knop:disabled:hover{
  background:var(--zink); border-color:var(--lijn); color:var(--stof);
  cursor:not-allowed; transform:none;
}