/*
Theme Name: QuickRepairService
Description: Thema voor de site van QuickRepairService, schadeherstel voor kantoor en bedrijf. Overgezet vanuit de 10Web-opzet.
Version: 1.0.0
Author: QuickRepairService
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: quickrepairservice
*/

/* Alle stijl staat hier een keer. Op 10Web stond deze CSS negen keer,
   in elke pagina een eigen kopie. Kleuren aanpassen doe je in :root. */
/* QuickRepairService, gedeelde stijl voor alle previewpagina's */
:root{
  --ink:#1B2024;
  --ink-2:#2A3138;
  --graphite:#20262B;
  --orange:#EF7C00;
  --orange-600:#D96E00;
  --orange-300:#F6A94D;
  --steel:#6E8291;
  --steel-dark:#4E5D69;
  --paper:#F1F2F3;
  --paper-2:#FFFFFF;
  --line:#E1E3E5;
  --line-dark:#39424A;
  --radius:14px;
  --maxw:1200px;
  --shadow:0 18px 50px -24px rgba(20,28,34,.45);

  /* --- Leesbaarheid (WCAG AA) ---------------------------------------
     De huisstijloranje #EF7C00 is prachtig als vlak, maar te licht om
     tekst op te zetten of van te maken. Wit erop haalt 2,78:1, terwijl
     4,5:1 de eis is. Daarom drie extra tokens. De merkkleur zelf blijft
     onaangeroerd. */
  --on-orange:#1B2024;   /* tekst op een oranje vlak, 5,91:1 */
  --orange-text:#A35400; /* oranje als tekstkleur op licht, 4,90:1 op papier,
                            4,66:1 op de warme hero-gradient (#FBEAD6) */
  --steel-light:#94A7B4; /* bijtekst op donkere vlakken, 6,61:1 op inkt */
  --line-strong:#858D95; /* rand van velden en knoppen, 3,00:1 (WCAG 1.4.11) */

  /* --- Motion --------------------------------------------------------
     Een sterkere ease-out dan de ingebouwde. Begint snel, dus de knop
     voelt alsof hij meteen reageert. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --focus:#1B2024;       /* focusring op lichte achtergrond */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:"Archivo",sans-serif;letter-spacing:-.02em;line-height:1.04}
.mono{font-family:"IBM Plex Mono",monospace}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange-text);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow.light{color:var(--orange-300)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"IBM Plex Sans";font-weight:600;font-size:15px;
  padding:14px 22px;border-radius:10px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--orange);color:var(--on-orange)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost.light{border-color:rgba(255,255,255,.45);color:#fff}
.btn-white{background:#fff;color:var(--orange-text)}
.btn .arw{transition:transform .15s var(--ease-out)}

/* Hover alleen waar er echt een muis is. Op een telefoon blijft een
   hoverstaat anders 'plakken' na een tik. */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--orange-600);transform:translateY(-2px)}
  .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
  .btn-ghost.light:hover{border-color:#fff}
  .btn-white:hover{transform:translateY(-2px)}
  .btn:hover .arw{transform:translateX(3px)}
}

/* Indrukken moet je voelen. Zonder dit lijkt de knop niet te reageren. */
.btn:active{transform:scale(.97)}

/* Utility bar */
.util{background:var(--graphite);color:#C9D2D8;font-size:13px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:42px;gap:16px}
.util a{display:inline-flex;align-items:center;gap:7px;color:#C9D2D8}
.util a .ic{width:15px;height:15px;flex:0 0 auto}
.util a:hover{color:#fff}
.util .right{display:flex;gap:22px;align-items:center}
.util .dot{color:var(--orange)}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(241,242,243,.97);backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center}
/* Het logo is een svg met eigen kleuren erin, dus geen tekst die we nog
   opmaken. Hoogte sturen en de breedte laten volgen. */
.brandlogo{height:48px;width:auto;display:block}
.menu{display:flex;align-items:center}
/* De links zitten in .menu-inner zodat het mobiele uitklappaneel er als geheel
   omheen kan. De tussenruimte hoort dus HIER en niet op .menu, want daar staat
   nu maar een kind in. */
.menu-inner{display:flex;align-items:center;gap:30px}
.menu a{font-weight:500;font-size:15px;color:var(--ink-2);position:relative;padding:4px 0}
.menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--orange);transition:width .2s ease}
.menu a:hover::after,.menu a.active::after{width:100%}
.menu a.active{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:14px}
.hexmark{width:38px;height:43px;flex:0 0 auto}

/* Hero (home) */
.hero{position:relative;overflow:hidden;background:
   radial-gradient(120% 90% at 85% -10%, #FBEAD6 0%, rgba(251,234,214,0) 55%),
   var(--paper)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:74px 24px 84px}
.hero h1{font-size:clamp(38px,5vw,64px);font-weight:800;color:var(--ink)}
.hero h1 .hl{color:var(--orange);position:relative;white-space:nowrap}
.hero p.lead{font-size:19px;color:var(--steel-dark);max-width:34ch;margin:22px 0 30px}
.hero .cta-row,.hero3d .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero .trust{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap}
.hero .trust div{display:flex;flex-direction:column}
.hero .trust b{font-family:"Archivo";font-weight:800;font-size:26px;color:var(--ink);line-height:1}
.hero .trust span{font-size:13px;color:var(--steel-dark);margin-top:4px}

/* Before/After signature */
.ba{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.4;box-shadow:var(--shadow);border:1px solid var(--line);user-select:none;touch-action:none}
.ba .panel{position:absolute;inset:0}
.surface{position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 2px, rgba(255,255,255,.03) 2px 5px),
    linear-gradient(180deg,#B9855A 0%, #A9743F 45%, #955F2F 100%);
}
.surface::after{content:"";position:absolute;inset:0;background:
   radial-gradient(140% 120% at 20% 0%, rgba(255,255,255,.18), rgba(0,0,0,0) 45%),
   radial-gradient(120% 120% at 100% 100%, rgba(0,0,0,.28), rgba(0,0,0,0) 50%);
}
.after .tag,.before .tag{position:absolute;top:14px;font-family:"IBM Plex Mono";font-size:11px;font-weight:600;letter-spacing:.14em;
   padding:6px 11px;border-radius:6px;text-transform:uppercase}
.after .tag{right:14px;background:rgba(27,32,36,.72);color:#fff}
.before{clip-path:inset(0 50% 0 0)}
.before .tag{left:14px;background:var(--orange);color:var(--on-orange)}
.before .surface{filter:saturate(.85) brightness(.94)}
.damage{position:absolute;inset:0;pointer-events:none}

/* Echte klusfoto's in de schuifbalk. Staat de foto er niet, dan blijft het
   getekende oppervlak hierboven staan. Zie inc/fotos.php. */
.ba .panel picture,.ba .panel>img{position:absolute;inset:0;display:block}
.ba .panel img{width:100%;height:100%;object-fit:cover;display:block}
.handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);z-index:4}
.handle .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
   background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:ew-resize}
.handle .grip svg{width:20px;height:20px}
.ba .hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:5;background:rgba(27,32,36,.8);color:#fff;
   font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.1em;padding:7px 13px;border-radius:20px;pointer-events:none;transition:opacity .3s}
.photo-note{position:absolute;bottom:14px;right:14px;z-index:5;background:rgba(255,255,255,.9);color:var(--steel-dark);font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.06em;padding:5px 9px;border-radius:6px}

/* Value props */
.values{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.values .wrap{padding:70px 24px}
.values .head{max-width:60ch;margin-bottom:44px}
.values h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;margin:16px 0 0}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.vitem{background:var(--paper-2);padding:30px 26px;position:relative;transition:background .2s;
   border-left:1px solid var(--line)}
.vitem:nth-child(4n+1){border-left:0}
.vitem:hover{background:#FBFBFC}
.vitem .num{font-family:"IBM Plex Mono";font-size:12px;color:var(--orange-text);font-weight:600;letter-spacing:.1em}
.vitem h3{font-size:19px;font-weight:700;margin:16px 0 8px;font-family:"Archivo"}
.vitem p{font-size:14.5px;color:var(--steel-dark)}
.vitem .ic{width:40px;height:40px;color:var(--orange);margin-top:6px}

/* Diensten grid (home) */
.services{padding:80px 0}
.services .top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:42px;flex-wrap:wrap}
.services h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;margin-top:14px}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* Vijf kaarten in drie of twee kolommen laat een vak leeg. De laatste
   kaart is de brede vraag-om-hulp-kaart en vult die rest op. */
.sgrid>.scard:last-child{grid-column:span 2}
.scard{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);overflow:hidden;transition:transform .18s ease, box-shadow .18s ease, border-color .18s}
.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#D2D5D8}
.scard .ph{aspect-ratio:16/10;background:linear-gradient(135deg,#2A3138,#1B2024);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:16px}
.scard .ph .hex{position:absolute;right:-24px;top:-24px;width:150px;height:170px;opacity:.16}
.scard .ph .plabel{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.6);background:rgba(255,255,255,.08);padding:5px 9px;border-radius:6px}
.scard .ph.heeft-foto{display:block;padding:0;background:var(--ink)}
/* Voor en na naast elkaar, het alternatief voor de schuifbalk als de twee
   foto's niet vanaf dezelfde plek genomen zijn. Zie inc/fotos.php. */
.vn{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vn figure{margin:0}
.vn-label{font-family:"IBM Plex Mono";font-size:11px;font-weight:600;letter-spacing:.14em;
   text-transform:uppercase;margin-bottom:9px;color:var(--steel-dark)}
/* Twee labeltjes van hetzelfde soort naast elkaar, dus dezelfde kleur.
   Eerder was Voor oranje en Na bijna zwart. */
.vn-voor .vn-label,.vn-na .vn-label{color:var(--ink)}
.vn-beeld{position:relative;aspect-ratio:4/3.4;border-radius:var(--radius);overflow:hidden;
   box-shadow:var(--shadow);border:1px solid var(--line);background:var(--paper-2)}
.vn-beeld picture,.vn-beeld>img{position:absolute;inset:0;display:block}
.vn-beeld img{width:100%;height:100%;object-fit:cover;display:block}
/* Op een telefoon onder elkaar: naast elkaar worden ze allebei te smal om de
   schade nog te zien. */
@media (max-width:560px){.vn{grid-template-columns:1fr;gap:20px}}
.scard .ph picture,.scard .ph>img{position:absolute;inset:0;display:block}
.scard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.scard .body{padding:22px 22px 24px}
.scard h3{font-size:21px;font-weight:700;margin-bottom:8px}
.scard p{font-size:14.5px;color:var(--steel-dark);margin-bottom:16px}
.scard .materials{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.scard .materials span{font-family:"IBM Plex Mono";font-size:11px;color:var(--steel-dark);border:1px solid var(--line);padding:4px 9px;border-radius:20px}
.scard .more{font-weight:600;font-size:14px;color:var(--orange-text);display:inline-flex;gap:7px;align-items:center}
.scard:hover .more .arw{transform:translateX(3px)}
.scard .more .arw{transition:transform .15s}

/* Werkwijze / process band */
.process{background:var(--graphite);color:#E7ECEF;padding:84px 0;position:relative;overflow:hidden}
.process .bghex{position:absolute;right:-80px;bottom:-120px;width:520px;height:580px;opacity:.05}
.process h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;color:#fff;margin-top:14px;max-width:20ch}
.process .intro{max-width:50ch;color:#AEBAC2;margin:18px 0 52px;font-size:17px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{position:relative;padding-top:30px}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.16)}
.step .n{font-family:"Archivo";font-weight:800;font-size:15px;color:var(--orange);position:absolute;top:14px}
.step h3{font-family:"Archivo";font-size:20px;font-weight:700;color:#fff;margin:26px 0 10px}
.step p{font-size:14.5px;color:#AEBAC2}

/* CTA band */
.cta{padding:76px 0}
.cta .box{background:linear-gradient(120deg,var(--orange) 0%, var(--orange-600) 100%);border-radius:22px;padding:56px 48px;
   display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center;color:var(--on-orange);position:relative;overflow:hidden}
.cta .box .hex{position:absolute;left:-40px;bottom:-70px;width:280px;height:320px;opacity:.14}
.cta h2{font-size:clamp(26px,3vw,38px);font-weight:800;max-width:28ch}
.cta p{margin-top:14px;font-size:17px;color:var(--on-orange);max-width:44ch}
.cta .actions{display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}
.cta .actions .phone{font-family:"Archivo";font-weight:800;font-size:24px;color:var(--on-orange);text-align:center}
.cta .actions .phone small{display:block;font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.1em;color:var(--on-orange);font-weight:500;margin-bottom:4px}

/* Footer */
footer{background:var(--ink);color:#AEBAC2;padding:64px 0 30px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line-dark)}
footer .brandlogo{height:44px}
footer p.about{font-size:14.5px;margin-top:16px;max-width:34ch}
footer p.about.zusje{margin-top:10px;opacity:.85}
/* De kolomtitels zijn h2: ze zijn de bovenste koppen binnen het
   footer-landmark. Als h4 sloegen ze een niveau over, want de laatste
   kop van de inhoud erboven is een h2. De woord-voor-woord animatie
   pakt ze niet, die staat op ".section h2" en dergelijke. */
footer h2{color:#fff;font-size:13px;font-family:"IBM Plex Mono";letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;font-weight:600}
footer ul{list-style:none;display:flex;flex-direction:column;gap:11px}
footer ul a{font-size:14.5px;color:#AEBAC2}
footer ul a:hover{color:#fff}
.fbottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:13px;color:var(--steel-light);flex-wrap:wrap;gap:12px}

/* ---------- Subpagina-componenten ---------- */

/* Pagina-hero met breadcrumb (dienst/over/contact/werkwijze) */
.phero{position:relative;overflow:hidden;background:
   radial-gradient(120% 90% at 90% -20%, #FBEAD6 0%, rgba(251,234,214,0) 50%),
   var(--paper);border-bottom:1px solid var(--line)}
.crumb{font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.06em;color:var(--steel-dark);padding:26px 0 0;display:flex;gap:8px;align-items:center}
.crumb a:hover{color:var(--orange-text)}
.crumb span{color:var(--line-dark);opacity:.5}
.phero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:34px 0 64px}
.phero.solo .grid{grid-template-columns:1fr;max-width:64ch}
.phero h1{font-size:clamp(34px,4.6vw,58px);font-weight:800;color:var(--ink);margin-top:16px;
   text-wrap:balance}
.phero p.lead{font-size:19px;color:var(--steel-dark);max-width:46ch;margin:20px 0 30px}
.phero .cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* Sectie-basis */
.section{padding:76px 0}
.section.tight{padding:60px 0}
.section h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;margin-top:14px}
.section .lead{font-size:18px;color:var(--steel-dark);max-width:60ch;margin-top:16px}
.section.paper2{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}

/* Checklist "wat wij herstellen" */
.repairs{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;margin-top:12px}
.repairs li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink-2)}
.repairs li svg{flex:0 0 auto;width:22px;height:22px;color:var(--orange);margin-top:2px}

/* Materialen */
.matgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
/* Vloeren heeft vier materialen (tegel kwam er op 2026-09-10 bij). Op drie
   kolommen staat de vierde dan alleen op een rij. Alleen boven 900 px, zodat
   de regels voor tablet (twee kolommen) en telefoon (een) gewoon blijven gelden. */
@media (min-width:901px){.matgrid.vier{grid-template-columns:repeat(4,1fr)}}
.matcard{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);padding:26px 24px;transition:transform .18s,box-shadow .18s}
.matcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.matcard .k{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.12em;color:var(--orange-text);text-transform:uppercase}
.matcard h3{font-size:20px;font-weight:700;margin:12px 0 8px}
.matcard p{font-size:14.5px;color:var(--steel-dark)}

/* Related services strip */
/* 3 kolommen: elke dienstenpagina linkt naar de 3 andere diensten. Dit was
   4 toen sanitair er nog op stond. */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.rcard{border:1px solid var(--line);border-radius:12px;background:var(--paper-2);padding:20px;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:border-color .18s,transform .18s}
.rcard:hover{border-color:var(--ink);transform:translateY(-3px)}
.rcard b{font-family:"Archivo";font-weight:700;font-size:17px}
.rcard .arw{color:var(--orange-text);transition:transform .15s}
.rcard:hover .arw{transform:translateX(3px)}

/* Info-kaart (dienst-zijkant) */
.infocard{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);padding:28px;box-shadow:var(--shadow)}
/* Een witte kaart op een witte sectie leunt volledig op zijn schaduw.
   Met de sterkere randkleur staat hij er net zo duidelijk op als de
   kaart een sectie eerder, die op grijs staat. */
.section.paper2 .infocard,.section.paper2 .matcard,.section.paper2 .rcard{border-color:var(--line-strong)}
.infocard h3{font-size:18px;font-weight:700;margin-bottom:16px}
.infocard ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.infocard li{display:flex;gap:12px;font-size:15px;color:var(--ink-2);align-items:flex-start}
.infocard li svg{width:20px;height:20px;color:var(--orange);flex:0 0 auto;margin-top:2px}
.infocard .divide{height:1px;background:var(--line);margin:22px 0}
.infocard .callbtn{width:100%;justify-content:center;text-align:center}
/* Anders staat de pijl los tegen de rechterrand als de tekst afbreekt. */
.infocard .callbtn .arw{margin-left:2px}
/* Tarievenblok op /werkwijze/. Het bedrag in --orange-text en niet in de
   merkkleur: die is te licht voor tekst, zie bron/contrastcontrole.py. */
.tarieven{display:flex;flex-wrap:wrap;gap:28px}
.tarieven .t b{font-family:"Archivo";font-weight:800;font-size:clamp(26px,2.6vw,34px);
   color:var(--orange-text);display:block;line-height:1.05}
.tarieven .t span{font-size:14.5px;color:var(--steel-dark);margin-top:6px;display:block}
/* De voorwaarden onder de bedragen. Geen vinkjes ervoor zoals bij .infocard
   ul: dit is geen lijst met voordelen maar met afspraken, en een vinkje voor
   "kilometers rekenen wij heen en terug" leest gek. */
.tariefregels{list-style:none;display:flex;flex-direction:column;gap:9px}
.tariefregels li{display:block;font-size:14.5px;color:var(--ink-2);padding-left:14px;position:relative}
.tariefregels li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
   border-radius:50%;background:var(--orange)}
.tariefnoot{font-size:13.5px;color:var(--steel-dark);margin-top:18px;
   padding-top:14px;border-top:1px solid var(--line)}

/* Privacyverklaring: een leeskolom, geen kaarten. Regellengte rond 68 tekens,
   want dit is de enige pagina op de site met echt lange lopende tekst. */
.legal{max-width:68ch}
.legal h2{font-family:"Archivo";font-size:clamp(21px,2.1vw,26px);font-weight:800;
  letter-spacing:-.01em;margin:40px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p{font-size:16px;line-height:1.7;color:var(--steel-dark);margin:0 0 14px}
.legal ul{margin:0 0 18px;padding-left:22px}
.legal li{font-size:16px;line-height:1.7;color:var(--steel-dark);margin-bottom:6px}
/* Een nummer dat over twee regels breekt ("06 18" / "11 55 44") leest als
   twee losse getallen, met de onderstreping er dwars door. */
a[href^="tel:"]{white-space:nowrap}
.legal a{color:var(--orange-text);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}

/* De voet: adresregel en de wettelijke regels eronder. */
footer li.adres{color:var(--steel-light);margin-top:10px}
footer .legalline{margin:22px 0 0;padding-top:0;
  font-size:13px;line-height:1.7;color:var(--steel-light)}
footer .qrs-let-op{color:var(--orange-300)}

/* Over ons: verhaal + statband */
.statband{background:var(--graphite);color:#fff;padding:56px 0}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
/* Was een vaste 40px. Dat kon toen er alleen korte waarden stonden (5, 1 dag,
   NL). Nu er een woord in staat, moet het mee kunnen krimpen met de kolom. */
.statgrid .s b{font-family:"Archivo";font-weight:800;font-size:clamp(28px,3vw,40px);color:var(--orange-300);display:block;line-height:1.05}
.statgrid .s span{font-size:14.5px;color:#AEBAC2;margin-top:8px;display:block}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:12px}
.pillar{border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;background:var(--paper-2)}
.pillar .ic{width:38px;height:38px;color:var(--orange);margin-bottom:14px}
.pillar h3{font-size:19px;font-weight:700;margin-bottom:8px}
.pillar p{font-size:14.5px;color:var(--steel-dark)}

/* FAQ (werkwijze) */
.faq{max-width:820px;margin:0}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{font-family:"Archivo";font-weight:700;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
/* Dit plusje geeft aan of de vraag open of dicht staat, dus het valt onder de
   3:1 die WCAG voor bedieningselementen vraagt. Het felle --orange haalde op
   papier maar 2,48:1. */
.faq summary .pm{color:var(--orange-text);font-size:24px;transition:transform .2s;flex:0 0 auto}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq p{color:var(--steel-dark);margin-top:12px;font-size:15.5px;max-width:70ch}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
/* De formulierkaart ernaast heeft 34px binnenmarge. Zonder deze regel
   begint de kop van deze kolom 34px hoger dan die in de kaart. */
.contact-info{padding-top:34px}
.contact-info .row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-info .row:last-child{border-bottom:none}
.contact-info .row .ic{width:44px;height:44px;border-radius:10px;background:#FBEAD6;color:var(--orange-600);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.contact-info .row .ic svg{width:20px;height:20px}
.contact-info .row h3{font-size:13px;font-family:"IBM Plex Mono";letter-spacing:.1em;text-transform:uppercase;color:var(--steel-dark);margin-bottom:4px}
.contact-info .row a,.contact-info .row p{font-size:17px;color:var(--ink);font-weight:500}
.formcard{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.formcard h2{font-family:"Archivo";font-size:clamp(24px,2.4vw,30px);font-weight:800;letter-spacing:-.01em;margin:12px 0 10px}
.formcard .fintro{font-size:15px;color:var(--steel-dark);margin:0 0 26px;max-width:46ch}
.formcard .fnote{font-family:"IBM Plex Mono";font-size:11px;color:var(--steel-dark);background:var(--paper);border:1px dashed var(--line);padding:8px 12px;border-radius:8px;margin-bottom:22px;letter-spacing:.04em}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:10px;padding:12px 14px;transition:border-color .15s}
/* Stond eerst op outline:none met alleen een randkleur erbij. Dat is voor een
   toetsenbordgebruiker te zwak, en het leunt op kleur alleen. Nu een echte ring
   die je ook ziet als je geen kleur onderscheidt. */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-color:var(--orange)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--orange)}
.field textarea{min-height:120px;resize:vertical}
/* Een veld dat de controle niet haalt, met de uitleg er direct onder. Die
   regel zet js/main.js erbij, zie de functie foutRegel(). */
.field input.fout,.field textarea.fout,.field select.fout{border-color:#B4431F}
.field input.fout:focus,.field textarea.fout:focus,.field select.fout:focus{border-color:#B4431F}
.veldfout{color:#B4431F;font-size:13.5px;margin-top:7px;line-height:1.4}
.field.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dropzone{border:2px dashed var(--line-strong);border-radius:12px;padding:26px;text-align:center;color:var(--steel-dark);background:var(--paper);cursor:pointer;transition:border-color .15s}
.dropzone:hover{border-color:var(--orange)}
.dropzone svg{width:30px;height:30px;color:var(--orange);margin:0 auto 8px}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:40px;padding:52px 24px 60px}
  .phero .grid{grid-template-columns:1fr;gap:36px;padding:24px 0 48px}
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .vitem{border-left:1px solid var(--line)}
  .vitem:nth-child(2n+1){border-left:0}
  .vitem:nth-child(n+3){border-top:1px solid var(--line)}
  .sgrid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .cta .box{grid-template-columns:1fr;padding:40px 30px}
  .cta .actions{align-items:center}
  .cta .actions .btn{width:100%;justify-content:center}
  .fgrid{grid-template-columns:1fr 1fr}
  .two,.contact-grid{grid-template-columns:1fr;gap:36px}
  .matgrid,.pillars{grid-template-columns:1fr 1fr}
  .related,.statgrid{grid-template-columns:1fr 1fr}
  /* Een laatste kaart die als oneven nummer overblijft staat anders
     alleen op een halve rij. */
  .matgrid>:last-child:nth-child(odd),
  .pillars>:last-child:nth-child(odd),
  .related>:last-child:nth-child(odd),
  .statgrid>:last-child:nth-child(odd){grid-column:1/-1}
  .util{display:none}
}
@media (max-width:700px){
  .brandlogo{height:36px}
  /* Onder deze breedte is er in de kopbalk geen ruimte meer naast het
     logo en de hamburger. */
  .nav-cta .btn{display:none}
  /* Het uitklapmenu sneed dwars door de knoppen van de hero eronder.
     Een donker vlak eronder maakt duidelijk dat het menu voorligt.
     Het vangt de tik zelf op: anders gaat een tik om het menu te
     sluiten door naar de knop eronder en navigeer je per ongeluk.
     Het sluiten regelt js/nav.js. */
  header.menu-open::after{content:"";position:absolute;top:100%;left:0;right:0;
    height:100vh;background:rgba(27,32,36,.45);z-index:1}
  header .menu{z-index:2}
  /* Op een smal scherm dekt het watermerk de hele band in plaats van
     een hoek, en dan lees je de tekst door de diagonalen heen. */
  .process .bghex{width:300px;height:334px;right:-110px;bottom:-140px;opacity:.035}
  .cta .box .hex{width:180px;height:206px;left:-70px;bottom:-90px;opacity:.10}
}
@media (max-width:560px){
  .vgrid,.sgrid,.steps,.fgrid,.matgrid,.pillars,.related,.statgrid,.repairs,.field.two-col{grid-template-columns:1fr}
  /* Bij een kolom mag niets meer over twee kolommen spannen, anders
     maakt de grid er stilletjes een tweede kolom bij. */
  .sgrid>.scard:last-child,
  .matgrid>:last-child:nth-child(odd),
  .pillars>:last-child:nth-child(odd),
  .related>:last-child:nth-child(odd),
  .statgrid>:last-child:nth-child(odd){grid-column:auto}
  .vitem{border-left:0;border-top:1px solid var(--line)}
  .vitem:first-child{border-top:0}
  /* Deze regel stond op .hero, maar de home-hero heet .hero3d. Zelfde
     fout als bij .cta-row. */
  .hero .trust,.hero3d .trust{gap:18px}
  /* De voet is op telefoon bijna twee schermen hoog. De 44px raakmaat
     per link blijft, de lucht ertussen mag eruit. */
  footer ul{gap:2px}
  .fgrid{gap:28px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}

/* ============ Toetsenbord, focus en aanraken ============ */

/* Een zichtbare focusring op alles waar je heen kunt tabben. Alleen bij
   toetsenbordgebruik (:focus-visible), dus een muisklik geeft geen ring. */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* Op donkere vlakken moet de ring licht zijn, anders zie je hem niet. */
.util,.hero3d,footer{--focus:#FFFFFF}

/* Doorspringen naar de inhoud, voor wie met het toetsenbord navigeert.
   Onzichtbaar tot je hem focust. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:0 0 8px 0;font-weight:600;font-size:15px}
.skip:focus{left:0}

/* Kaarten reageren op indrukken, net als knoppen. */
.scard:active,.matcard:active,.rcard:active{transform:scale(.99)}

/* Hoverbewegingen op kaarten alleen met een echte muis. */
@media (hover:hover) and (pointer:fine){
  .util a:hover{color:#fff}
  .menu a:hover::after{width:100%}
}
@media not all and (hover:hover){
  .scard:hover,.matcard:hover,.rcard:hover{transform:none;box-shadow:none}
}

/* Tikdoelen. Een menu-item van 23px hoog is te klein om betrouwbaar te raken;
   44px is de ondergrens die zowel Apple als Google aanhouden. */
.menu a,.util a,footer a{min-height:44px;display:inline-flex;align-items:center}
.menu a{padding:4px 0}

/* Het logo in de kopbalk is ook een link naar de home. Op telefoon is het
   36px hoog en dus te klein om te raken. Het vak eromheen groeit naar 44px,
   het logo zelf blijft even groot. */
.brand{min-height:44px}

/* Telefoonnummer en mailadres op de contactpagina zijn de twee acties waar
   die pagina om draait. Ze waren 22px hoog. Het icoon ernaast is al 44px,
   dus ze staan er nu ook netter naast. */
.contact-info .row a{display:inline-flex;align-items:center;min-height:44px}

/* Het kruimelpad haalt de 44px niet zonder de kop van de pagina uit elkaar te
   trekken. 24px is de ondergrens uit WCAG 2.2 (SC 2.5.8, Target Size Minimum)
   en die haalt hij nu wel. */
.crumb a{display:inline-flex;align-items:center;min-height:24px}
/* Op een telefoon is 24px priegelig om te raken, ook al haalt het de
   WCAG-eis. Dit blok hoort NA de regel hierboven te staan: een
   mediaquery voegt geen gewicht toe, dus anders wint die 24px. De
   marge erboven gaat omlaag zodat het kruimelpad niet hoger wordt. */
@media (max-width:700px){
  .crumb{padding-top:14px}
  .crumb a{min-height:44px}
}

/* ============ Menu op telefoon ============
   De menubalk stond op mobiel volledig op display:none. Daardoor was geen
   enkele dienstenpagina bereikbaar op een telefoon. Nu een uitklapmenu. */
/* Telefoonlink en knop in het menupaneel horen alleen op mobiel. */
.menu .menu-tel,.menu .btn{display:none}
.navtoggle{display:none;background:transparent;border:1.5px solid var(--line-strong);
  border-radius:10px;width:46px;height:46px;cursor:pointer;
  align-items:center;justify-content:center;color:var(--ink);
  transition:transform .15s var(--ease-out),border-color .15s var(--ease-out)}
.navtoggle:active{transform:scale(.94)}
.navtoggle span{position:relative;display:block;width:20px;height:2px;background:currentColor;
  transition:transform .2s var(--ease-out),opacity .15s linear}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:currentColor;transition:transform .2s var(--ease-out)}
.navtoggle span::before{top:-6px}
.navtoggle span::after{top:6px}
.navtoggle[aria-expanded="true"] span{background:transparent}
.navtoggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  .navtoggle{display:inline-flex}
  /* De offerteknop bleef tot 700px staan: op een tablet is er ruimte
     en anders is de kopbalk daar leeg op logo en hamburger na. */
  .nav-cta .btn{padding:11px 16px;font-size:14px}

  /* Uitklappen met grid-template-rows, zodat de hoogte niet vastgezet
     hoeft te worden en de overgang toch soepel loopt. */
  .menu{
    display:grid;grid-template-rows:0fr;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper-2);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);overflow:hidden;
    transition:grid-template-rows .24s var(--ease-out);
  }
  header.menu-open .menu{grid-template-rows:1fr}
  .menu > *{min-height:0}
  .menu-inner{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;
    transition:padding .24s var(--ease-out)}
  /* Padding krimpt niet mee met grid-template-rows:0fr. Zonder deze regel
     blijft er van het dichte menu een strook van 28 px over (8 boven plus 20
     onder) waarin je de bovenkant van het eerste menu-item ziet staan. */
  header:not(.menu-open) .menu-inner{padding-top:0;padding-bottom:0}
  /* De kopbalk heeft zelf al een lijn onderaan. Die van het dichte menu komt
     daar precies onder en maakt er samen een dubbele lijn van. */
  header:not(.menu-open) .menu{border-bottom-color:transparent;box-shadow:none}
  .menu a{font-size:17px;padding:14px 0;border-bottom:1px solid var(--line);min-height:52px}
  .menu a:last-of-type{border-bottom:0}
  .menu a::after{display:none}
  .menu a.active{color:var(--orange-text);font-weight:600}
  .menu .menu-tel{display:inline-flex;font-weight:600;color:var(--orange-text)}
  .menu .btn{margin-top:14px;justify-content:center;display:inline-flex}
}

/* ============ 3D / Motion-laag (Claude 3D Stack) ============ */

/* Motion tokens */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.7s;
  --void:#0E1215;
  --void-2:#161B20;
}

/* Reveals: JS zet .rv op elementen, .in bij zichtbaarheid */
.rv{opacity:0;transform:translateY(28px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}

/* Tilt-kaarten krijgen transform via JS; zorg voor diepte */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt .body,.tilt h3{transform:translateZ(14px)}

/* Particle-canvas in subpagina-hero's */
.phero{position:relative}
.phero .fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.phero .wrap{position:relative;z-index:1}

/* ---------- Cinematische home-hero ---------- */
/* De kop was 190vh hoog met een plakkend scherm: je scrolde door een
   Three.js-scene met drie teksten ernaast. Scene en teksten zijn op
   2026-09-02 weg, dus de kop is nu gewoon een scherm hoog. Het plakkende
   scherm mag blijven staan: bij een even hoge ouder doet sticky niets, en zo
   blijft de opbouw zichtbaar als je ooit terug wilt. */
.hero3d{position:relative;background:
  radial-gradient(120% 100% at 50% -20%, #22303A 0%, var(--void) 55%, var(--void) 100%);
  color:#E7ECEF;min-height:100vh}
.hero3d .stage{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center}
/* Het hexagon in de kop. Heette fallback omdat er een Three.js-scene overheen
   kwam; die is op 2026-09-02 weg, dus dit is nu het beeld zelf.

   Het is bewust een watermerk en geen los object. In de kop vechten drie
   dingen om de breedte: de kop links, de scroll-tekst rechts en het hexagon.
   Boven 1250 px past dat naast elkaar, daaronder niet, en dan schuift het
   hexagon onder de kop of onder de scroll-tekst. Als watermerk achter alles
   speelt dat niet, en het is dezelfde behandeling als .bghex verderop op de
   site. */
.hero3d .fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.14;transition:opacity .8s var(--ease)}
/* aspect-ratio is hier nodig: dit <svg> heeft zelf geen viewBox, hij haalt
   het hexagon met <use> uit de sprite in header.php. Zonder verhouding valt
   height:auto terug op de standaard van 150 px en wordt het hexagon
   platgedrukt. Dat stond er al, maar viel niet op zolang de Three.js-scene
   eroverheen lag. De verhouding komt uit de viewBox van #hexmark. */
.hero3d .fallback svg{width:min(52vh,470px);height:auto;aspect-ratio:40.54/45.87}
.hero3d .overlay{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.hero3d .overlay .inner{max-width:560px}
.hero3d h1{font-size:clamp(40px,5.6vw,72px);font-weight:900;color:#fff;line-height:1.02}
.hero3d h1 .hl{color:var(--orange)}
.hero3d p.lead{font-size:19px;color:#AEBAC2;max-width:36ch;margin:22px 0 30px}
.hero3d .eyebrow{color:var(--orange-300)}
.hero3d .trust{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap}
.hero3d .trust b{font-family:"Archivo";font-weight:800;font-size:24px;color:#fff;display:block;line-height:1}
/* Hier hoort --steel-light, het token voor bijtekst op een donker vlak.
   Met de oude losse grijstint was het 4,53:1 op de plek waar de tekst
   staat, maar 3,73:1 op de lichtste stop van de hero-gradient. Rakelings
   dus, en het hing van de schermhoogte af waar die tekst uitkwam. */
.hero3d .trust span{font-size:13px;color:var(--steel-light);margin-top:4px;display:block}
.hero3d .scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.22em;color:var(--steel-light);text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.hero3d .scrollcue::after{content:"";width:1px;height:44px;background:linear-gradient(180deg,var(--orange),transparent);
  animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* overgang donker naar licht na de hero */
.lightbridge{height:120px;background:linear-gradient(180deg,var(--void) 0%,var(--paper) 100%)}

/* Voor/na-sectie op home (bewijs) */
.proof{padding:80px 24px;background:var(--paper)}
.proof .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;max-width:var(--maxw);margin:0 auto}
@media (max-width:900px){.proof .grid{grid-template-columns:1fr}}

/* performance-hints */
.scard,.matcard,.pillar,.vitem{will-change:transform}

/* Reduced motion: alles uit */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero3d .scrollcue::after{animation:none}
}

/* Formulier-respons + photohint */
/* Foto-uploadveld op /contact/. Het echte input-element ligt onzichtbaar
   over het vak heen. Zo blijven klikken, slepen, toetsenbordfocus en de
   koppeling met het label gewoon het werk van de browser. */
.uploader .uploadbox{position:relative;display:flex;align-items:center;gap:12px;
  min-height:76px;padding:16px 18px;border:1.5px dashed var(--line-strong);
  border-radius:12px;background:var(--paper);transition:border-color .18s,background .18s}
.uploader .uploadbox input[type=file]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer}
.uploader .upic{width:24px;height:24px;color:var(--orange-text);flex:none}
.uploader .uptext{font-size:14.5px;color:var(--steel-dark)}
.uploader .uptext b{color:var(--ink);font-weight:600}
/* De input is doorzichtig, dus zijn eigen focusring is onzichtbaar. Daarom
   tekenen we hem op het vak eronder. :has() en niet :focus-within, anders
   springt de ring ook aan bij een gewone muisklik. */
.uploader:has(input:focus-visible) .uploadbox{border-color:var(--orange-600);
  outline:3px solid var(--focus);outline-offset:2px}
.uploader .uploadbox.over{border-color:var(--orange-600);background:var(--paper-2)}
@media (hover:hover) and (pointer:fine){
  .uploader .uploadbox:hover{border-color:var(--orange-600);background:var(--paper-2)}
}
.filelist{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.filelist:empty{display:none}
.filelist li{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;
  background:var(--paper);border:1px solid var(--line);border-radius:9px;font-size:13.5px}
.filelist .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filelist .fsize{font-family:"IBM Plex Mono";font-size:11.5px;color:var(--steel-dark);flex:none}
.filelist .fdel{flex:none;width:44px;height:44px;margin:-8px -6px -8px 0;display:flex;
  align-items:center;justify-content:center;border:0;background:none;cursor:pointer;
  color:var(--steel-dark);border-radius:8px;font-size:18px;line-height:1}
.filelist .fdel:active{transform:scale(.9)}
@media (hover:hover) and (pointer:fine){
  .filelist .fdel:hover{color:var(--ink);background:var(--paper-2)}
}
.uploadnote{font-size:12.5px;color:var(--steel-dark);margin:10px 0 0;line-height:1.5}
.formcard .photohint{font-size:13.5px;color:var(--steel-dark);margin:2px 0 18px;padding-top:16px;border-top:1px solid var(--line)}
.formcard .photohint a{color:var(--orange-text);font-weight:600}
.formresp{margin-top:16px;padding:13px 15px;border-radius:10px;font-size:14.5px}
.formresp.ok{background:#E9F7EE;color:#1B7A3D;border:1px solid #BFE6CC}
.formresp.err{background:#FCEEE9;color:#B4431F;border:1px solid #F3CDBF}
.formcard button[disabled]{opacity:.6;cursor:default}
.formcard .privacyregel{font-size:12.5px;line-height:1.6;color:var(--steel-dark);margin:16px 0 0;text-align:center}
.formcard .privacyregel a{color:var(--orange-text);font-weight:600}

/* ============ v3: GSAP-laag (award-niveau) ============ */

/* Woord-maskers in koppen */
h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
h2 .w i{display:inline-block;font-style:normal;will-change:transform}

/* Laad-intro */
.loadveil{position:fixed;inset:0;z-index:9999;background:var(--void);display:flex;align-items:center;justify-content:center}
.loadveil .lv-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.loadveil .lv-logo{display:block;width:min(280px,68vw);aspect-ratio:278/56;
  background:url(img/logo.svg) center/contain no-repeat}

/* Magnetische knoppen */
.btn{will-change:transform}

/* Proceslijn tekent zich in */
.step::before{transform:scaleX(var(--linescale,1));transform-origin:left}

/* Marquee (home) */
.marquee{background:var(--paper);border-bottom:1px solid var(--line);overflow:hidden;padding:22px 0;white-space:nowrap}
.marquee .track{display:inline-flex;gap:0;will-change:transform}
.marquee span{font-family:"Archivo";font-weight:800;font-size:clamp(20px,2.6vw,32px);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.2px var(--steel);padding:0 28px}
.marquee span b{color:var(--orange);-webkit-text-stroke:0;font-weight:800;padding:0 6px}

@media (prefers-reduced-motion:reduce){
  .loadveil{display:none!important}
  .marquee .track{transform:none!important}
}