/* Lettertypen, zelf geserveerd (4zzq). Alleen de latin-subset: daar zitten alle
   Nederlandse tekens in, inclusief é ë ü, het euroteken, ² en de typografische
   aanhalingstekens en streepjes. Voorheen via fonts.googleapis.com, waarbij het
   IP-adres van elke bezoeker naar Google ging. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../letters/archivo-258a93fe.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../letters/source-serif-4-4c4d14ec.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



:root{
  --paper:#f7f6f3; --surface:#ffffff; --surface-2:#efece6;
  --ink:#14161c; --ink-2:#454b57; --ink-3:#6a707d; --ster:#b54a08;
  --dark:#1c0d5a; --dark-2:#2a1878; --dark-3:#150941;
  --accent:#3d2b99; --spark:#7a68d6;
  --rule:#e4e0d8; --rule-2:#cec9be;
  --band-ink:#e9e6f5; --band-ink-2:#b3abd8;
  --maat:1560px; --kant:clamp(26px,2.6vw,56px);

  /* TYPESCHAAL - een echte schaal, elke stap exact 1,25x de vorige.
     De vorige poging had zeven stappen waarvan er zes onder 1,25 bleven en een op
     1,03: dat is geen rangorde maar een uitgesmeerde vlek, en het is de reden dat
     koppen niet als koppen lazen. Met een echte verhouding valt er niets meer te
     kiezen tussen twee maten in, en dat is precies de bedoeling.

     In rem, niet in pixels. Met pixels negeert de site de lettergrootte die iemand
     in zijn browser heeft ingesteld; dat is een toegankelijkheidsfout die anders op
     alle tweeendertig pagina's meeloopt.

     Alleen de twee kopmaten schalen met het scherm. Leestekst hoort vast te staan. */
  --t0:0.72rem;      /* 11,5 - micro-label in hoofdletters */
  --t1:0.9rem;       /* 14,4 - klein: voet, meta, knoppen */
  --t2:1.125rem;     /* 18   - lopende tekst */
  --t3:1.40625rem;   /* 22,5 - inleiding, subkop */
  --t4:1.7578rem;    /* 28,1 - blokkop */
  --t5:clamp(2.197rem,2.6vw,2.747rem);   /* 35,2-44   sectiekop */
  --t6:clamp(2.747rem,5.2vw,4.29rem);    /* 44-68,6   kop op het heldenbeeld */

  /* RUIMTESCHAAL - zeven stappen in plaats van zeventien losse waarden. */
  --r0:4px; --r1:8px; --r2:12px;
  --r3:clamp(14px,1.2vw,20px);
  --r4:clamp(22px,1.9vw,32px);
  --r5:clamp(30px,2.8vw,46px);
  --r6:clamp(40px,4vw,64px);

  /* PAARS OP EEN DONKERE ONDERGROND - vier tinten. Er stonden er negen los in de
     opmaak, waarvan een aantal met het blote oog niet te onderscheiden was. Dat zijn
     precies de verschillen die je pas ziet als pagina drie anders is dan pagina zeven. */
  --op-1:#e9e6f5;   /* helderst - koppen op paars */
  --op-2:#cfc8e8;   /* lopende tekst op paars */
  --op-3:#bdb5e0;   /* gedempt - lijstjes, bijschriften */
  --op-4:#9c93cc;   /* zwakst - de onderste voetregel */
  --op-licht:#b3a5f5; /* accent op een foto of op diep paars */

  /* KLEUREN DIE OP DE HELDENFOTO STAAN. Deze bewegen bewust NIET met het thema mee:
     de foto is in beide weergaven even licht, dus tekst die erop staat moet in beide
     weergaven donker blijven. Ze staan hier zodat ze niet als losse hexcodes door het
     bestand zwerven. */
  --foto-inkt:#1b1a17; --foto-kop:#1c0d5a; --foto-papier:#f2eee7; --foto-grond:#d8d0c4;

  /* BREEKPUNTEN - vier, en verder geen. Ze staan hier alleen als naslag; een
     @media-regel kan geen variabele lezen, dus de getallen staan in de regels zelf.
       560   telefoon
       940   tablet en kleine laptop
      1100   klein beeldscherm
      1280   breed beeldscherm */
  --logomaat:clamp(.72px,.058vw + .18px,1.22px);
  /* Eén breedte voor de hele pagina. Stond de navigatie op 1780 en de secties op
     1180, dan begon de kop op 37 pixels en elke sectiekop op 149 - een sprong van
     112 pixels halverwege de pagina. De leesbaarheid komt nu van maxima op de
     tekstkolommen zelf, niet van een smalle container. */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0e0e15; --surface:#15151f; --surface-2:#1c1c29;
    --ink:#ecebf1; --ink-2:#b2b6c2; --ink-3:#949aa8; --ster:#ff9a54;
    --dark:#0b0526; --dark-2:#170c46; --dark-3:#080319;
    --accent:#9d8cf0; --spark:#b3a5f5;
    --rule:#272733; --rule-2:#383847;
    --band-ink:#e9e6f5; --band-ink-2:#a79fd0;
  }
}
:root[data-theme="dark"]{
  --paper:#0e0e15; --surface:#15151f; --surface-2:#1c1c29;
  --ink:#ecebf1; --ink-2:#b2b6c2; --ink-3:#949aa8; --ster:#ff9a54;
  --dark:#0b0526; --dark-2:#170c46; --dark-3:#080319;
  --accent:#9d8cf0; --spark:#b3a5f5;
  --rule:#272733; --rule-2:#383847;
  --band-ink:#e9e6f5; --band-ink-2:#a79fd0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Source Serif 4","Iowan Old Style",Georgia,serif;font-size:var(--t2);line-height:1.68;
  -webkit-font-smoothing:antialiased;
  /* clip, niet hidden: overflow-x:hidden maakt van de body een scrollcontainer,
     waardoor position:sticky stukgaat (de inhoudsopgave van de juridische pagina's).
     clip knipt wel af maar maakt geen scroller, dus sticky blijft werken. */
  overflow-x:clip}
h1,h2,h3,h4{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;color:var(--ink);margin:0;
  line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
p{margin:0}
/* Op een smal scherm past niet elk woord in zijn kolom. Liever afbreken dan uitsteken. */
p,li,h1,h2,h3,h4,summary{overflow-wrap:break-word}
/* height:auto hoort bij de width- en height-attributen op de afbeeldingen. Die
   attributen voorkomen dat de pagina verspringt tijdens het laden, maar zonder deze
   regel gebruikt de browser de hoogte uit het bestand in plaats van de beeldverhouding
   uit de opmaak: een illustratie van 74 px breed werd dan 620 px hoog. */
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--maat);margin:0 auto;padding:0 var(--kant)}
.klein{font-size:var(--t1)}
/* Wel in de broncode en voor een schermlezer, niet in beeld. */
.verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.kop{max-width:20ch}


/* ================= kop ================= */
/* De navigatie scrolt mee weg (user 01-10, 4zzw): een meelopende balk van deze hoogte
   voelde op de computer benauwd. Op de telefoon blijft de offerteknop wel in beeld,
   via de balk onderin (.belbalk). Tot 01-10 stond hier position:sticky. */
/* Let op: gericht op body > nav, niet op elke nav. Een pagina mag een eigen <nav>
   hebben (de inhoudsopgave op een juridische pagina, 4zzj); die kreeg anders de
   donkere balk en de sticky positie van de bovenbalk mee. */
body > nav{position:relative;z-index:50;background:var(--dark)}
/* Hij is bewust hoog en paars: een dunne lichte strook viel weg tegen het logo en de
   grote heldenfoto eronder. */
/* Alles in de balk schaalt met de schermbreedte mee. Met vaste maten oogt de balk op een
   breed scherm leeg en klein, terwijl dezelfde maten op een kleiner scherm juist kloppen. */
/* Alleen de bovenbalk zelf. Zonder het directe-kindteken raakte deze regel ook de
   .wrap binnen het uitklapmenu, want dat menu staat ook in <nav>. Het menu werd daardoor
   een flexrij met een vaste hoogte: de links stonden naast elkaar en liepen uit beeld.
   Het uitklapmenu heeft nooit gewerkt. */
nav > .wrap{max-width:var(--maat);padding:0 var(--kant);
  display:flex;align-items:center;gap:clamp(18px,1.9vw,38px);height:clamp(88px,7.2vw,146px)}

.logo{height:clamp(50px,4.7vw,96px);width:auto;display:block}
/* Geen wit vlak achter het logo. Het paarse logovlak heeft dezelfde kleur als de balk
   en valt dus weg; wat overblijft is de witte gestippelde rand met de witte letters.
   Daardoor staat het logo als lijnwerk op de balk in plaats van in een kadertje. */
.logo-huls{display:inline-flex;line-height:0;flex-shrink:0;opacity:1;transition:opacity .18s ease}
.logo-huls:hover{opacity:.82}
/* De SVG bevat zelf geen kleuren, alleen de klassen lg-vlak en lg-tekst. Zonder deze
   regels valt hij terug op zwart. */
.logo .lg-vlak{fill:var(--dark)}
.logo .lg-tekst{fill:#fff}
/* In de voet staat hij op paars, dus daar omgekeerd. */
.logo-voet .lg-vlak{fill:#fff}
.logo-voet .lg-tekst{fill:var(--dark)}

.menu{display:flex;gap:clamp(18px,1.6vw,32px);margin-left:auto;font-family:Archivo,sans-serif;
  font-size:var(--t1);
  font-variation-settings:"wght" 500}
.menu a{text-decoration:none;color:var(--op-2);padding:8px 0;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:#fff;transition:right .28s cubic-bezier(.2,.7,.3,1)}
.menu a:hover{color:#fff}
.menu a:hover::after{right:0}
/* Het onderdeel waar de bezoeker in zit (4zzw): wit en onderstreept, zoals bij aanwijzen. */
.menu a[aria-current]{color:#fff}
.menu a[aria-current]::after{right:0}
@media (max-width:940px){.menu{display:none}}

nav .telefoon{font-family:Archivo,sans-serif;font-size:var(--t2);
  font-variation-settings:"wght" 640;color:#fff;text-decoration:none;white-space:nowrap;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.25;text-align:right}
nav .telefoon span{color:var(--op-3);font-variation-settings:"wght" 500;font-size:var(--t1);
  white-space:nowrap;
  letter-spacing:.02em}
/* DE KOPBALK HEEFT DRIE STANDEN.

   tot 560    telefoon: logo en hamburger. Onderin een vaste balk met de offerteknop
   561-700    logo, offerteknop, hamburger
   701-940    daar komt het telefoonnummer bij
   vanaf 941  het volledige menu in plaats van de hamburger

   De openingstijden staan altijd onder het nummer: ze staan in dezelfde kolom en
   kosten dus geen extra breedte.

   De offerteknop houdt het langer vol dan het nummer: aanvragen is de handeling waar de
   pagina om vraagt, en bellen kan altijd nog via het menu of de balk onderin. */
@media (max-width:700px){nav .telefoon{display:none}}
/* Zodra er ruimte voor is, verhuizen de tijden en het nummer naar de uiterste rechterkant
   en schuift de offerteknop ervoor. Ze staan dan kleiner: het is naslag, geen actie. */
@media (min-width:941px){
  nav > .wrap > .knop{order:2}
  nav .telefoon{order:3;margin-left:clamp(18px,1.6vw,30px)}
  nav .telefoon{font-size:var(--t1)}
  nav .telefoon span{font-size:var(--t0)}
}

.knop{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:Archivo,sans-serif;font-size:var(--t1);font-variation-settings:"wght" 600;
  text-decoration:none;padding:13px 24px;border-radius:2px;
  background:var(--dark);color:#fff;border:1.5px solid var(--dark);white-space:nowrap;
  transition:background .18s ease,color .18s ease,transform .18s ease}
.knop:hover{background:var(--dark-2);border-color:var(--dark-2);transform:translateY(-1px)}
.knop.licht{background:transparent;color:var(--ink)}
.knop.licht:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .knop{background:var(--accent);border-color:var(--accent);color:var(--paper)}
:root:not([data-theme="light"]) .knop:hover{background:var(--op-licht);border-color:var(--op-licht)}}
:root[data-theme="dark"] .knop{background:var(--accent);border-color:var(--accent);color:var(--paper)}
:root[data-theme="dark"] .knop:hover{background:var(--op-licht);border-color:var(--op-licht)}

nav .knop{background:#fff;color:var(--dark);border-color:#fff;
  font-size:var(--t1);padding:clamp(13px,1vw,18px) clamp(20px,1.65vw,32px)}
nav .knop:hover{background:var(--band-ink);border-color:var(--band-ink);color:var(--dark)}
@media (max-width:940px){nav .knop{font-size:var(--t1);padding:13px 20px}}

.hamb{display:none;margin-left:auto;background:none;border:1.5px solid rgba(255,255,255,.45);
  border-radius:2px;padding:11px 13px;cursor:pointer;line-height:0}
.hamb span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:1px;
  transition:transform .28s,opacity .2s}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(6.3px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.3px) rotate(-45deg)}
.mmenu{display:none;border-top:1px solid rgba(255,255,255,.16);background:var(--dark)}
.mmenu > .wrap{display:block;padding-top:6px;padding-bottom:22px}
.mmenu a{display:block;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.14);text-decoration:none;
  color:var(--op-3);font-family:Archivo,sans-serif;font-size:var(--t2);font-variation-settings:"wght" 550}
.mmenu a:hover,.mmenu a[aria-current]{color:#fff}
.mmenu .mtel{font-family:Archivo,sans-serif;font-size:var(--t3);
  font-variation-settings:"wght" 680;color:#fff;display:flex;flex-direction:column;gap:2px}
.mmenu .mtel span{font-size:var(--t1);font-variation-settings:"wght" 500;color:var(--op-3)}
.mmenu.open{display:block}
/* Het nummer staat alleen in het menu zolang het niet in de balk staat, dus onder
   701 px. Anders staat hetzelfde nummer twee keer op hetzelfde scherm. */
@media (min-width:701px){.mmenu .mtel{display:none}}
@media (max-width:940px){
  .hamb{display:block;order:4}
  /* De lege tabletbalk vullen met de twee dingen die ertoe doen. */
  nav .telefoon{order:2;margin-left:auto}
  nav > .wrap > .knop{order:3}
}
@media (max-width:560px){
  /* Op telefoonformaat staat de offerteknop in de vaste balk onderin. */
  nav > .wrap > .knop{display:none}
}

/* ================= hero =================
   De achtergrond van de opname is naar links doorgetrokken tot echt leeg doek, zodat
   de kop op de foto kan staan zonder dat er een sluier overheen hoeft. Een sluier over
   een groepsportret maakt van de mensen aan de rand halve geesten. */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;
  background:var(--foto-grond);
  /* De verhouding van de foto aanhouden in plaats van een vaste hoogte. Dan snijdt de
     browser er nooit horizontaal iets af, en blijft de lege linkerhelft altijd 45% breed
     - ook in een smal venster. Met een vaste hoogte werd die ruimte kleiner en paste de
     tekst er niet meer naast. */
  width:100%;aspect-ratio:2100/766;border-bottom:14px solid var(--dark)}
/* De hoogte volgt de breedte, zonder maximum. Twee metingen dwingen dat af:
   1) Er zit maar 2,2% ruimte boven de hoofden en 4,8% onder de voeten. Elke verticale
      bijsnede raakt dus meteen mensen.
   2) Een hoogtegrens SAMEN met een beeldverhouding laat de breedte meekrimpen - dat gaf
      op een breed scherm een strook papier rechts naast de hero.
   Gevolg: op een heel breed scherm wordt de hero hoog. Dat is de prijs voor een foto die
   nooit door mensen heen snijdt en altijd tot de rand doorloopt. */
.hero .achtergrond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:70% 50%;z-index:-1}
/* Zelfde marges als de navigatie: de kop lijnt links uit met het logo. En meeschalen,
   want anders groeit de foto op een breed scherm wel en de tekst niet - dan komt er een
   groot gat boven de kicker te staan. */
.hero .tekst{max-width:var(--maat);margin:0 auto;padding:0 var(--kant);
  width:100%;position:relative}
.hero .binnen{max-width:min(44rem,44vw)}
.hero h1,.hero .sub{color:var(--foto-inkt)}
.hero .kicker{color:var(--foto-kop)}
.hero .kicker::after{background:rgba(27,26,23,.28)}
.hero h1{margin-top:clamp(14px,1.2vw,22px);font-size:var(--t6);line-height:1.05}
.hero .sub{margin-top:clamp(14px,1.2vw,22px);font-size:clamp(14px,1.34vw,22px);max-width:34ch;line-height:1.52}
.hero .kicker{font-size:clamp(10.5px,.55vw + 5px,17px);gap:clamp(12px,1.1vw,22px);
  white-space:nowrap}
.hero .kicker::after{width:clamp(52px,5.4vw,112px);height:clamp(1px,.12vw,2px)}
.hero .acties{margin-top:clamp(16px,2vw,32px)}
.hero .knop{font-size:var(--t1);padding:clamp(9px,1vw,16px) clamp(14px,1.7vw,30px)}
@media (max-width:940px){
  .hero{aspect-ratio:auto;display:block;background:var(--paper);border-bottom:none}
  .hero .achtergrond{border-bottom:10px solid var(--dark)}
  .hero .achtergrond{position:relative;inset:auto;z-index:0;width:100%;height:auto;
    aspect-ratio:4/3;object-position:100% 50%;border-top:1px solid var(--rule)}
  .hero .tekst{padding:44px var(--kant) 34px}
  .hero .binnen{max-width:none}
  .hero h1{margin-top:22px;font-size:clamp(34px,7vw,44px)}
  .hero .sub{font-size:var(--t2);max-width:44ch}
  /* Op een smal scherm mag de kicker wel afbreken. Met nowrap stak hij op een
     telefoon van 360 px twaalf pixels buiten beeld - onzichtbaar, want de body
     knipt af, maar de regel liep wel dood tegen de rand. */
  .hero .kicker{font-size:var(--t0);color:var(--accent);flex-wrap:wrap;white-space:normal}
  /* streepje weglaten zodra de kicker afbreekt, anders zweeft het los rechts */
  .hero .kicker::after{display:none}
  .hero h1,.hero .sub{color:inherit}
  .hero .knop{font-size:var(--t1);padding:13px 24px}
}
h1{font-variation-settings:"wdth" 90,"wght" 780;letter-spacing:-.035em}
.acties{display:flex;gap:12px;flex-wrap:wrap}
.kicker{font-family:Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  font-variation-settings:"wdth" 84,"wght" 640;display:flex;align-items:center;gap:12px}
.kicker::after{content:"";height:1px;width:52px}
.hero .knop.licht{color:var(--foto-inkt);border-color:rgba(27,26,23,.45)}
.hero .knop.licht:hover{background:var(--foto-inkt);color:var(--foto-papier);border-color:var(--foto-inkt)}
@media (max-width:940px){
  .hero .knop.licht{color:var(--ink);border-color:var(--dark)}
  .hero .knop.licht:hover{background:var(--ink);color:var(--paper)}
}

/* ================= feitenbalk ================= */
/* Ritme: elke sectie wisselt van achtergrond, en die wissel valt precies op het
   stiksel bovenaan de sectie. Zonder die afwisseling liepen drie witte secties
   achter elkaar door - bijna vierduizend pixels onafgebroken wit. */
.feiten{background:var(--surface)}
.feiten .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media (max-width:940px){.feiten .wrap{grid-template-columns:1fr}}
/* De kolommen zijn even hoog omdat de scheidingslijnen anders ongelijk aflopen. De inhoud
   wordt daarom verticaal gecentreerd; anders plakt de korte kolom bovenaan en blijft er
   onderin een gat staan. */
.feit{padding:40px 34px 40px 0;border-right:1px solid var(--rule);
  display:flex;flex-direction:column;justify-content:center}
.feit:first-child{padding-left:0}
.feit:not(:first-child){padding-left:34px}
.feit:last-child{border-right:none;padding-right:0}
@media (max-width:940px){
  .feit{border-right:none;border-bottom:1px solid var(--rule);padding:26px 0 !important}
  .feit:last-child{border-bottom:none}
}
.feit h3{font-size:var(--t3);font-variation-settings:"wght" 700;margin-bottom:var(--r1)}
.feit p{font-size:var(--t2);color:var(--ink-2);line-height:1.62;max-width:42ch}

/* ================= secties ================= */
/* De sectieruimte groeit mee: op een breed scherm mag er meer lucht omheen dan op
   een telefoon, anders oogt het bovenin leeg en onderin gedrongen. */
section{padding:clamp(58px,6.4vw,132px) 0}
.wit{background:var(--surface)}
.sectiekop{margin-bottom:var(--r1)}
/* Kop en inleiding blijven onder elkaar. */
.sectiekop .kop{max-width:24ch}
/* Als pseudo-element en niet als border: de secties zetten hun eigen achtergrond met de
   verkorte schrijfwijze, en die zou een achtergrondafbeelding wegvagen. */
section{position:relative}
/* Scheiding tussen de secties: een stiksel met echte insteekgaatjes. Verwijst naar het
   borduren en naar de gestippelde rand in het logo.

   Twee lagen die precies op elkaar vallen:
     ::before  de gaatjes - zwarte plekjes waar de naald door de stof gaat
     ::after   de draad in de merkkleur, met op diezelfde punten een gat eruit geknipt

   Het gat wordt met mask-composite geknipt en niet met een <mask> binnen de SVG: die
   laatste maskeerde bij een vrijwel horizontale vorm het hele groepje weg. Laag 1 is de
   draad, laag 2 zijn de gaten, en 'exclude' laat het verschil over.

   In de donkere weergave zijn de zwarte gaatjes bijna niet te zien; dat is aanvaardbaar,
   want tegen een donkere achtergrond bestaat er geen kleur die als gat leest. */
section::before,section::after{content:"";position:absolute;top:0;left:0;right:0;
  height:11px;z-index:1;pointer-events:none}
section::before{background:#000;opacity:.85;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='11'%3E%3Ccircle cx='2.8' cy='5.5' r='1.71' fill='%23fff'/%3E%3Ccircle cx='21.2' cy='5.5' r='1.71' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='11'%3E%3Ccircle cx='2.8' cy='5.5' r='1.71' fill='%23fff'/%3E%3Ccircle cx='21.2' cy='5.5' r='1.71' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size:38px 11px;mask-size:38px 11px;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}
section::after{background:var(--accent);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='11'%3E%3Cpath d='M2.8 5.5 L21.2 5.5' stroke='%23fff' stroke-width='2.9' stroke-linecap='round' opacity='1' fill='none'/%3E%3Cpath d='M22.4 5.5 L39.6 5.5' stroke='%23fff' stroke-width='0.9' stroke-linecap='round' opacity='0.32' fill='none'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='11'%3E%3Ccircle cx='2.8' cy='5.5' r='0.95' fill='%23fff'/%3E%3Ccircle cx='21.2' cy='5.5' r='0.95' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='11'%3E%3Cpath d='M2.8 5.5 L21.2 5.5' stroke='%23fff' stroke-width='2.9' stroke-linecap='round' opacity='1' fill='none'/%3E%3Cpath d='M22.4 5.5 L39.6 5.5' stroke='%23fff' stroke-width='0.9' stroke-linecap='round' opacity='0.32' fill='none'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='11'%3E%3Ccircle cx='2.8' cy='5.5' r='0.95' fill='%23fff'/%3E%3Ccircle cx='21.2' cy='5.5' r='0.95' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size:38px 11px,38px 11px;mask-size:38px 11px,38px 11px;
  -webkit-mask-repeat:repeat-x,repeat-x;mask-repeat:repeat-x,repeat-x;
  -webkit-mask-composite:xor;mask-composite:exclude}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) section::before{opacity:.55}}
:root[data-theme="dark"] section::before{opacity:.55}
/* Boven het offerteblok geen stiksel: daar zit de paarse band al direct boven, en twee
   scheidingen op elkaar leest als een fout. */
.offerte::before,.offerte::after{display:none}

.kop{font-size:var(--t5);font-variation-settings:"wdth" 94,"wght" 740;letter-spacing:-.028em}
.inleiding{margin-top:var(--r3);color:var(--ink-2);max-width:54ch;font-size:var(--t3);line-height:1.62}

/* ================= tegels ================= */
/* De tegels lopen van rand tot rand. Daarvoor staan ze buiten .wrap in de opbouw.
   Dit is het moment waarop de pagina uit zijn kader stapt: hiervoor stond alles in
   dezelfde kolom, met tweederde leegte ernaast op een breed scherm. Een band die de
   schermranden raakt leest als architectuur in plaats van als een raster in een doos. */
.tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  margin-top:clamp(32px,3.4vw,58px)}
.tegels .tegel{border-radius:0}
/* Vier kolommen vanaf 941: bij twee kolommen wordt een tegel op een laptop 500 breed
   en 190 hoog, en dat leest als een brievenbus in plaats van als een foto. */
@media (max-width:940px){.tegels{grid-template-columns:repeat(2,1fr)}}
/* Twee kolommen betekent brede tegels, dus daar mag de hoogte mee omhoog. */
@media (min-width:561px) and (max-width:940px){.tegel{height:clamp(200px,27vw,265px)}}
.tegelhint{display:none;align-items:center;gap:9px;margin:var(--r3) var(--kant) 0;
  font-family:Archivo,sans-serif;font-size:var(--t1);font-variation-settings:"wght" 560;
  color:var(--ink-3)}
.tegelhint::after{content:"";flex:1;height:1px;background:var(--rule-2)}
.tegels.eind + .tegelhint{opacity:.5}

/* Op een telefoon werden acht tegels onder elkaar 2.036 px hoog: tweeenhalf scherm
   beeld voordat je weer tekst zag. Als schuifrij is het een half scherm.

   Dat het een schuifrij is moet je wel kunnen zien. Drie dingen samen doen dat: de
   volgende tegel steekt duidelijk in beeld, de rechterrand loopt uit in een verloop, en
   eronder staat het in woorden met een teller erbij. */
@media (max-width:560px){
  .tegels{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68%;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    /* Geen zijmarge: met scroll-snap sprong de rij precies die marge op, en van rand
       tot rand sluit ook aan bij hoe de tegelband op een groot scherm staat. */
    gap:8px;padding:0 0 6px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 46px),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 46px),transparent 100%)}
  .tegels.eind{-webkit-mask-image:none;mask-image:none}
  .tegels::-webkit-scrollbar{display:none}
  .tegels .tegel{scroll-snap-align:start;height:auto;aspect-ratio:3/4}
  .tegelhint{display:flex}
}
/* Een vaste hoogte in plaats van een beeldverhouding met een hoogtegrens erbij. Die
   combinatie laat namelijk de breedte meekrimpen: de tegel werd 253 px breed in een vak
   van 511 en er bleven gaten in de band staan. Nu komt de breedte van het raster en
   staat alleen de hoogte vast; de foto vult de rest. */
.tegel{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:2px;
  background:var(--dark-3);height:clamp(190px,17vw,290px);isolation:isolate}
.tegel img{width:100%;height:100%;object-fit:cover;
  transition:transform .62s cubic-bezier(.16,.7,.28,1)}
.tegel:hover img{transform:scale(1.05)}
.tegel::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(11,5,38,.9) 0%,rgba(11,5,38,.42) 38%,rgba(11,5,38,.02) 68%);
  transition:opacity .4s}
.tegel:hover::after{opacity:.88}
.tegel .lbl{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff}
.tegel .lbl b{display:block;font-family:Archivo,sans-serif;font-size:var(--t2);
  font-variation-settings:"wdth" 92,"wght" 640;letter-spacing:-.012em;line-height:1.18}
.tegel .lbl i{display:block;font-style:normal;font-family:Archivo,sans-serif;font-size:var(--t0);
  letter-spacing:.17em;text-transform:uppercase;font-variation-settings:"wdth" 80,"wght" 600;
  color:rgba(255,255,255,.62);margin-bottom:var(--r1)}
/* Op de donkere tegels moet het accent lichter zijn dan het diepe merkpaars,
   anders valt het weg tegen de foto. */
.tegel .lbl b::after{content:"";display:block;width:24px;height:2px;background:var(--op-licht);
  margin-top:var(--r2);transition:width .42s cubic-bezier(.16,.7,.28,1)}
.tegel:hover .lbl b::after{width:56px}

/* ================= drieluik: de drie technieken =================
   Bewust geen kaartraster. De pagina had er vijf (feiten, tegels, technieken, stappen,
   recensies) en daardoor kwam vijf keer hetzelfde meubelstuk voorbij. Dit is nu een
   aaneengesloten beeldband met daaronder drie tekstkolommen op dezelfde rasterlijnen:
   een paneel in plaats van drie losse dingen. */
.drieluik{margin-top:clamp(34px,3.6vw,60px)}
.dbeeld,.dtekst{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.dbeeld figure{margin:0;overflow:hidden;background:var(--surface-2);
  height:clamp(180px,17vw,280px)}
.dbeeld img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,.7,.28,1)}
.dbeeld figure:hover img{transform:scale(1.04)}
.dtekst article{background:var(--paper);padding:clamp(20px,2vw,30px) clamp(20px,2.2vw,34px)
  clamp(24px,2.4vw,36px)}
.wit .dtekst article{background:var(--surface-2)}
.dtekst h3{font-size:var(--t3);font-variation-settings:"wght" 720;letter-spacing:-.018em}
.dtekst p{margin-top:var(--r2);color:var(--ink-2);font-size:var(--t2);line-height:1.64}
.dtekst b{color:var(--ink);font-variation-settings:"wght" 640}
@media (max-width:940px){
  /* Onder elkaar hoort elke foto direct boven zijn eigen tekst te staan. In de opbouw
     staan eerst de drie foto's en dan de drie teksten, dus die worden hier om en om
     gezet met order: foto 1, tekst 1, foto 2, tekst 2, foto 3, tekst 3. */
  .drieluik{display:grid;gap:2px}
  .dbeeld,.dtekst{display:contents}
  .dbeeld figure{height:clamp(200px,38vw,300px)}
  .dbeeld figure:nth-child(1){order:1}  .dtekst article:nth-child(1){order:2}
  .dbeeld figure:nth-child(2){order:3}  .dtekst article:nth-child(2){order:4}
  .dbeeld figure:nth-child(3){order:5}  .dtekst article:nth-child(3){order:6}
}

/* ================= drie kaarten ================= */
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.4vw,42px);
  margin-top:clamp(34px,3.6vw,60px)}
@media (max-width:940px){.drie{grid-template-columns:1fr;gap:var(--r6)}}
/* Op een telefoon staan de drie kaarten onder elkaar; een vierkantere uitsnede maakt
   er dan drie keer een volledig scherm van. Breder gesneden blijft het leesbaar en
   scheelt bijna vierhonderd pixels scrollen. */
@media (max-width:560px){.kaart img{aspect-ratio:16/9}}
.kaart figure{margin:0;overflow:hidden;border-radius:2px}
.kaart img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.16,.7,.28,1)}
.kaart .uitleg b{color:var(--ink);font-variation-settings:"wght" 640}
/* De logokosten staan in een paars blok: het is een prijsafspraak en geen productkenmerk,
   dus het hoort niet in dezelfde witte kaartvorm als de drie technieken erboven. */
.notitie{margin-top:var(--r6);background:var(--dark);color:var(--op-2);border-radius:2px;
  padding:34px 38px;max-width:76ch}
@media (max-width:560px){.notitie{padding:26px 24px}}
.notitie h3{margin-top:var(--r1);font-size:var(--t3);font-variation-settings:"wght" 720;
  letter-spacing:-.018em;color:#fff}
.notitie p{margin-top:13px;color:var(--op-2);font-size:var(--t2);line-height:1.64}
.notitie a{color:#fff;text-decoration-thickness:1px;text-underline-offset:3px}
/* Geen hoofdletterlabel meer boven dit blok: de kop zegt het al. */
.kaart:hover img{transform:scale(1.03)}
.kaart h3{margin-top:var(--r3);font-size:var(--t3);font-variation-settings:"wght" 720;
  letter-spacing:-.018em}
.kaart p{margin-top:var(--r2);color:var(--ink-2);font-size:var(--t2);line-height:1.64;max-width:46ch}

/* ================= de wasproef =================
   Het enige moment op de pagina dat groter is dan de rest. Twee panelen uit een
   opname, zodat belichting en uitsnede identiek zijn en de vergelijking iets zegt.
   Volle breedte, donker, en met de vraag erboven die volgens de eigenaar in elk
   eerste gesprek gesteld wordt. */
.was{background:var(--dark-3);color:var(--band-ink);
  padding:clamp(56px,7vw,120px) 0 clamp(46px,5.4vw,96px)}
.was .kop{color:#fff;max-width:16ch}
.was .inleiding{color:var(--op-2)}
/* De vijf symbolen van het wasetiket (4zzz2). Hier stond een fotopaar "nieuw / na 200
   wasbeurten"; dat getal stond niet vast. Een rij van vijf vakken tussen dunne lijnen, de
   symbolen als licht lijnwerk op het donker, de naam eronder. Vijf naast elkaar tot op de
   kleinste telefoon: de vormen zijn eenvoudig genoeg om klein te blijven werken. */
.wassymbolen{list-style:none;margin:clamp(40px,4.6vw,80px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16)}
.wassymbolen li{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.2vw,18px);
  padding:clamp(22px,3vw,48px) 4px;border-left:1px solid rgba(255,255,255,.16)}
.wassymbolen li:first-child{border-left:0}
.wassymbolen svg{width:clamp(34px,4.6vw,72px);height:auto;display:block;color:#fff;opacity:.82;
  transition:opacity .25s ease,transform .35s cubic-bezier(.2,.7,.3,1)}
.wassymbolen li:hover svg{opacity:1;transform:translateY(-3px)}
.wassymbolen span{font-family:Archivo,sans-serif;font-size:var(--t0);letter-spacing:.12em;
  text-transform:uppercase;color:var(--op-3);font-variation-settings:"wdth" 86,"wght" 620}
@media (max-width:560px){
  .wassymbolen span{letter-spacing:.04em;font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){.wassymbolen svg{transition:none}}
.waslink{margin-top:clamp(20px,2.2vw,32px)}
.waslink a{font-family:Archivo,sans-serif;font-size:var(--t1);font-variation-settings:"wght" 640;
  color:#fff;text-decoration:none;display:inline-flex;gap:8px;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px}
.waslink a span{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.waslink a:hover span{transform:translateX(5px)}
/* Het antwoord staat naast de vraag, niet eronder: op een breed scherm leest een
   vraag met het antwoord ernaast als een gesprek. */
.wasgrid{display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,34px)}
@media (min-width:1101px){
  .wasgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;
    gap:clamp(40px,5vw,96px)}
}
.wasantwoord p{color:var(--op-2);font-size:var(--t2);line-height:1.66;max-width:52ch}
.wasantwoord p + p{margin-top:.9em}
.wasantwoord b{color:#fff}

/* ================= bewijsband ================= */
.band{background:var(--dark);color:var(--band-ink);padding:56px 0}
.band .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:24px clamp(40px,5vw,90px)}
@media (max-width:940px){.band{padding:44px 0}.band .wrap{display:block}
  .band .bij{display:block;margin-top:var(--r3);max-width:none}}
.band .groot{font-family:Archivo,sans-serif;font-size:var(--t6);max-width:11ch;
  font-variation-settings:"wdth" 90,"wght" 760;letter-spacing:-.03em;color:#fff;line-height:1}
.band .bij{color:var(--op-2);font-size:var(--t3);line-height:1.6;max-width:54ch;
  text-align:left}
.sterren{color:var(--accent);letter-spacing:.18em;font-size:var(--t1);display:block;margin-bottom:var(--r1)}

/* ================= werkwijze ================= */
.stappen{margin-top:clamp(34px,3.6vw,60px);display:grid;gap:clamp(14px,1.5vw,26px)}
.stap{background:var(--paper);border:1px solid var(--rule);border-radius:2px;
  padding:clamp(22px,2vw,34px) clamp(24px,2.4vw,40px);max-width:clamp(560px,68vw,1010px);
  display:grid;grid-template-columns:clamp(78px,8.4vw,150px) 1fr;gap:clamp(18px,2vw,32px);
  align-items:start;opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,.7,.28,1)}
.wit .stap{background:var(--surface)}
.stap.in{opacity:1;transform:none}
.stap:nth-child(even){margin-left:auto}
.stap figure{margin:0;border-radius:2px;overflow:hidden;background:var(--surface-2)}
.stap img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.stap .n{font-family:Archivo,sans-serif;font-size:var(--t0);
  font-variation-settings:"wdth" 80,"wght" 700;letter-spacing:.18em;color:var(--accent)}
.stap h3{margin-top:var(--r1);font-size:var(--t3);font-variation-settings:"wght" 700;letter-spacing:-.018em}
.stap p{margin-top:var(--r2);color:var(--ink-2);font-size:var(--t2);line-height:1.62}
@media (max-width:940px){
  /* minmax(0,1fr) en niet 1fr: een gewone 1fr-kolom mag niet smaller worden dan het
     langste woord erin, en daardoor stak het stapblok op een scherm van 320 px zes
     pixels buiten beeld. */
  .stap{max-width:none;grid-template-columns:74px minmax(0,1fr);gap:16px;padding:20px}
  .stap:nth-child(even){margin-left:0}
}
@media (prefers-reduced-motion:reduce){.stap{opacity:1;transform:none;transition:none}}

/* ================= afspraakband ================= */
.afspraak{background:var(--dark);color:var(--band-ink);border-radius:2px;
  margin-top:clamp(44px,4.6vw,78px);max-width:min(100%,1120px);
  display:grid;grid-template-columns:1fr clamp(200px,22vw,330px);gap:clamp(28px,3vw,56px);
  align-items:center;padding:clamp(30px,3.2vw,54px)}
.afspraaktekst .acties{margin-top:clamp(18px,1.9vw,28px)}
/* De offerte is overal de eerste keuze; bellen staat ernaast met de tijden eronder,
   zodat niemand op een dinsdagavond voor niets belt. */
.bijtijd{margin-top:var(--r2);color:var(--op-3);font-size:var(--t1)}
.afspraak .knop{background:#fff;color:var(--dark);border-color:#fff}
.afspraak .knop:hover{background:var(--band-ink);border-color:var(--band-ink)}
.afspraak .knop.licht{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.afspraak .knop.licht:hover{background:#fff;color:var(--dark);border-color:#fff}
@media (max-width:940px){
  .afspraak{grid-template-columns:1fr;gap:26px;padding:30px 26px}
}
.afspraak h3{color:#fff;font-size:var(--t4);font-variation-settings:"wdth" 94,"wght" 720;
  letter-spacing:-.02em}
.afspraak p{margin-top:var(--r2);color:var(--op-2);font-size:var(--t2);line-height:1.6;max-width:52ch}
/* De gevelfoto (4zzu): een 4:3-uitsnede rond het eigen pand, 470x352 echte pixels. Hij krijgt
   overal zijn eigen verhouding en wordt nooit breder dan de foto zelf. Gestapeld staat hij
   dus links onder de tekst in plaats van als een uitgerekte strook over de hele breedte;
   een vaste hoogte sneed hem voorheen bij tot er alleen de roldeur overbleef. */
.afspraak img{width:100%;max-width:470px;border-radius:2px;display:block;aspect-ratio:4/3;object-fit:cover}
/* Zonder foto wordt het blok een kolom. */
.afspraak:not(:has(img)){grid-template-columns:minmax(0,1fr);max-width:780px}
.afspraak p a{color:#fff;text-decoration-thickness:1px;text-underline-offset:3px}

/* ================= merken ================= */
.merkblok{margin-top:clamp(44px,4.6vw,78px);padding-top:clamp(28px,2.8vw,46px);border-top:1px solid var(--rule)}
.merkkop{font-size:var(--t1);font-variation-settings:"wdth" 98,"wght" 620;color:var(--ink-3);
  letter-spacing:0}
/* Vijf kolommen: de vijftien logo's vullen dan precies drie rijen, zonder een
   eenzaam logo op de laatste regel. */
.merken{display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(22px,2.4vw,40px) clamp(16px,1.8vw,32px);margin-top:clamp(22px,2.2vw,36px);
  align-items:center;justify-items:center}
@media (max-width:940px){.merken{grid-template-columns:repeat(3,1fr);gap:26px 18px}}
@media (max-width:560px){.merken{grid-template-columns:repeat(2,1fr)}}
/* De onderlinge verhouding zit in het beeld zelf (zie maak_merklogos.py) en mag hier
   niet overschreven worden: een vaste hoogte in CSS maakt de weging op oppervlak
   ongedaan en blaast lange woordmerken op tot bannerformaat.
   Wel schaalt de hele rij mee: elk logo draagt zijn eigen maat als getal mee, en die
   wordt vermenigvuldigd met een factor die van de schermbreedte afhangt. */
.merken img{width:calc(var(--lb) * var(--logomaat));height:calc(var(--lh) * var(--logomaat));
  max-width:100%;opacity:.72;filter:saturate(0);
  transition:opacity .22s ease,filter .22s ease}
.merken img:hover{opacity:1;filter:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .merken img{filter:saturate(0) invert(1);opacity:.55}
:root:not([data-theme="light"]) .merken img:hover{opacity:.9;filter:invert(1)}}
:root[data-theme="dark"] .merken img{filter:saturate(0) invert(1);opacity:.55}
:root[data-theme="dark"] .merken img:hover{opacity:.9;filter:invert(1)}
@media (max-width:560px){.merken img{transform:scale(.86)}}

/* ================= recensies ================= */
.recensies{background:var(--paper)}
.rkop{display:flex;gap:26px 44px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.gscore{display:flex;flex-direction:column;gap:5px;align-items:flex-start;flex-shrink:0}
.gscore .cijfer{font-family:Archivo,sans-serif;font-size:var(--t3);font-variation-settings:"wdth" 92,"wght" 720;
  color:var(--ink);letter-spacing:-.02em}
.gscore .sterren{color:var(--ster);letter-spacing:.18em;font-size:var(--t1)}
.glink{font-family:Archivo,sans-serif;font-size:var(--t1);font-variation-settings:"wght" 600;
  color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;margin-top:var(--r0)}

.rbaan{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,340px);gap:16px;
  margin-top:var(--r5);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding-bottom:14px;
  scrollbar-width:thin;scrollbar-color:var(--rule-2) transparent}
.rbaan::-webkit-scrollbar{height:7px}
.rbaan::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:4px}
.rbaan::-webkit-scrollbar-track{background:transparent}
.rbaan:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.rkaart{scroll-snap-align:start;background:var(--paper);border:1px solid var(--rule);border-radius:2px;
  padding:24px 26px;display:flex;flex-direction:column;gap:13px}
.rkaart .sterren{color:var(--ster);letter-spacing:.18em;font-size:var(--t1)}
.rtekst{font-size:var(--t2);color:var(--ink-2);line-height:1.64;flex:1}
.rwie{margin-top:var(--r0);padding-top:var(--r3);border-top:1px solid var(--rule);display:flex;
  flex-direction:column;gap:3px}
.rwie b{font-family:Archivo,sans-serif;font-size:var(--t1);font-variation-settings:"wght" 660;color:var(--ink)}
.rwie span{font-family:Archivo,sans-serif;font-size:var(--t1);
  font-variation-settings:"wght" 500;color:var(--ink-3)}
.rhint{margin-top:var(--r3);font-family:Archivo,sans-serif;font-size:var(--t1);
  font-variation-settings:"wght" 500;color:var(--ink-3)}
.rbaan{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 90px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 90px),transparent 100%)}
.rbaan.eind{-webkit-mask-image:none;mask-image:none}
.rhint{display:flex;align-items:center;gap:9px;color:var(--ink-3)}
.rhint::after{content:"";width:26px;height:1px;background:var(--rule-2);
  transition:width .3s ease}
.rbaan.eind + .rhint{display:none}
@media (max-width:560px){.rbaan{grid-auto-columns:minmax(260px,84vw)}}

/* ================= wat er gebeurt ================= */
.watgebeurt{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.watgebeurt li{position:relative;padding-left:30px;color:var(--ink-2);font-size:var(--t2);line-height:1.6}
.watgebeurt li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;
  background:var(--dark);border-radius:1px}
.watgebeurt b{color:var(--ink)}

/* ================= veelgestelde vragen =================
   Uitklapbaar met details/summary: geen script nodig, werkt met het toetsenbord en
   met een schermlezer, en de antwoorden staan gewoon in de broncode voor Google. */
#vragen{background:var(--surface)}
.vragen{margin-top:clamp(30px,3.4vw,52px);border-top:1px solid var(--rule-2);max-width:92ch}
.vraag{border-bottom:1px solid var(--rule)}
.vraag summary{cursor:pointer;list-style:none;padding:clamp(18px,1.9vw,26px) 44px clamp(18px,1.9vw,26px) 0;
  position:relative;font-family:Archivo,sans-serif;font-size:var(--t3);
  font-variation-settings:"wdth" 98,"wght" 680;letter-spacing:-.018em;color:var(--ink)}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.vraag[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.vraag summary:hover{color:var(--accent)}
.vraag summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vraag .antwoord{padding:0 0 clamp(20px,2.2vw,30px);color:var(--ink-2);max-width:68ch}
.vraag .antwoord p + p{margin-top:.8em}

/* ================= offerte ================= */
.offerte{background:var(--paper)}
.ogrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--r6);align-items:start;margin-top:var(--r6)}
.opaneel{background:var(--surface);border:1px solid var(--rule);border-radius:2px;padding:30px 32px;
  display:grid;gap:26px}
@media (max-width:560px){.opaneel{padding:24px 22px}}
.ocitaat{font-size:var(--t2);line-height:1.6;color:var(--ink-2);font-style:italic;
  border-left:2.5px solid var(--spark);padding-left:20px}
.ocitaat .wie{margin-top:var(--r2);font-style:normal;font-family:Archivo,sans-serif;font-size:var(--t1);
  font-variation-settings:"wght" 600;color:var(--ink-3)}
.opaneel .scheid{height:1px;background:var(--rule)}

/* Het telefoonnummer onder "Liever direct bellen?". Stond eerder als losse stijlen in de
   opmaak van drie pagina's, met var(--dark) als kleur. Dat is in de donkere weergave
   bijna dezelfde kleur als het paneel eronder: de verhouding was 1,09, oftewel het nummer
   was daar onzichtbaar. Nu een klasse met een kleur die met de weergave meegaat. */
.belregel{color:var(--ink-2)}
.belregel .klein{color:var(--ink-3)}
.beltel{font-family:Archivo,sans-serif;font-variation-settings:"wght" 640;white-space:nowrap;
  color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.beltel:hover{border-bottom-color:currentColor}

/* Merknaam op de plek van een logo, zolang we van dat merk geen logobestand hebben.
   Bewust in de huisletter en niet als namaaklogo: een merkbeeld verzin je niet. */
.mnaam{font-family:Archivo,sans-serif;font-size:var(--t3);
  font-variation-settings:"wdth" 88,"wght" 740;letter-spacing:-.02em;color:var(--ink-2)}


@media (max-width:940px){.ogrid{grid-template-columns:1fr;gap:var(--r6)}}
form{display:grid;gap:16px;background:var(--surface);border:1px solid var(--rule);
  border-radius:2px;padding:32px}
@media (max-width:560px){form{padding:22px}}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.rij{grid-template-columns:1fr}}
label{display:block;font-family:Archivo,sans-serif;font-size:var(--t1);
  font-variation-settings:"wght" 640;color:var(--ink-2);margin-bottom:var(--r1)}
input,textarea,select{width:100%;font:inherit;font-size:var(--t2);padding:12px 14px;border-radius:2px;
  border:1.5px solid var(--rule-2);background:var(--paper);color:var(--ink);transition:border-color .18s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
/* Het vraagvak moet de hele voorbeeldtekst laten zien (user 04-10). Gemeten (4zzz4): tot
   480 px loopt die over 4 tot 6 regels, daarboven 3. Hoogte daarom in regels (lh), met de
   pixelwaarde ervoor voor browsers zonder lh. field-sizing laat het vak meegroeien met wat
   iemand typt, waar de browser dat kent. */
textarea{min-height:126px;min-height:calc(3lh + 36px);resize:vertical;field-sizing:content;max-height:70vh}
@media (max-width:479px){textarea{min-height:156px;min-height:calc(4lh + 30px)}}
@media (max-width:429px){textarea{min-height:186px;min-height:calc(5lh + 30px)}}
@media (max-width:374px){textarea{min-height:216px;min-height:calc(6lh + 30px)}}
.citaat{border-left:2.5px solid var(--spark);padding:6px 0 6px 24px;font-size:var(--t2);color:var(--ink-2);
  font-style:italic}
.citaat .wie{margin-top:var(--r3);font-family:Archivo,sans-serif;font-size:var(--t1);color:var(--ink-3);
  font-variation-settings:"wght" 600;font-style:normal}
.na{margin-top:var(--r4);font-size:var(--t1);color:var(--ink-3)}

/* ================= belbalk op de telefoon =================
   Het telefoonnummer stond onder 1100 px op display:none en het uitklapmenu had er
   geen. De eerste belbare link stond daardoor op 83% van de paginahoogte, in de voet.
   Bij een bedrijf waar vrijwel alles via de telefoon en een bezoek loopt is dat het
   ene apparaat waarop het nummer altijd binnen bereik hoort te zijn.

   Alleen op telefoonformaat: vanaf 561 px staat het nummer in de kopbalk zelf en zou
   deze balk het scherm dubbelop bezetten. */
.belbalk{display:none}
@media (max-width:560px){
  .belbalk{display:grid;grid-template-columns:1fr;position:fixed;left:0;right:0;bottom:0;
    z-index:60;background:var(--dark);border-top:1px solid rgba(255,255,255,.2);
    padding:6px 8px max(6px,env(safe-area-inset-bottom));gap:6px;
    /* Standaard staat hij er. Bovenaan de pagina schuift het script hem weg, want daar
       staat de offerteknop al twee keer in beeld. Bewust deze kant op: als het script
       niet draait blijft de balk gewoon staan, in plaats van nooit te verschijnen. */
    transition:transform .28s cubic-bezier(.2,.7,.3,1)}
  .belbalk.rust{transform:translateY(105%)}
  .belbalk a{display:flex;align-items:center;justify-content:center;gap:7px;
    font-family:Archivo,sans-serif;font-size:var(--t1);font-variation-settings:"wght" 640;
    text-decoration:none;padding:0 10px;border-radius:2px;min-height:44px;line-height:1.1}
  .belbalk .bel{background:#fff;color:var(--dark)}
  .belbalk .offerte{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
  /* Ruimte onder de pagina, zodat de balk nooit de laatste regels van de voet bedekt. */
  body{padding-bottom:62px}
}
@media (prefers-reduced-motion:reduce){.belbalk{transition:none}}

/* ================= voet =================
   Alles paars, met het logo in wit. Compact gehouden: vier kolommen, korte lijstjes,
   en onderin een dunne regel met de zakelijke gegevens. */
/* De voet was 463 pixels hoog met tekst op 15,5 pixels. Alle verwijzingen blijven
   staan - ze zijn nuttig om bezoekers door te sturen - maar op kleinere maat. */
body > footer{background:var(--dark);color:var(--op-3);font-size:var(--t1);line-height:1.55;
  padding:44px 0 22px}
.fg{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:26px 40px}
@media (max-width:940px){.fg{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:560px){.fg{grid-template-columns:1fr;gap:30px}}
.fg .logo-voet{height:40px;margin-bottom:var(--r3)}
.fg h4{color:#fff;font-size:var(--t1);
  font-variation-settings:"wdth" 96,"wght" 680;margin-bottom:var(--r2)}
.fg ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.fg a{color:var(--op-3);text-decoration:none;font-size:var(--t1);transition:color .18s}
.fg a:hover{color:#fff}
.fg .adres{color:var(--op-3);font-size:var(--t1)}
.fg .adres b{color:#fff;font-family:Archivo,sans-serif;font-variation-settings:"wght" 620;font-size:var(--t1)}
.fvoet{margin-top:var(--r5);padding-top:var(--r3);border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--t0);color:var(--op-4);display:flex;gap:8px 22px;flex-wrap:wrap;
  font-family:Archivo,sans-serif;letter-spacing:.02em}
.fvoet a{color:var(--op-4);text-decoration:none}
.fvoet a:hover{color:#fff}
/* De cookie-instellingen staan tussen de voetlinks en moeten er ook zo uitzien, ook al is
   het een knop: hij opent de melding, hij gaat nergens heen. */
.cookielink{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--op-4);
  cursor:pointer;text-align:left}
.cookielink:hover{color:#fff}
.cookielink:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ================= cookiemelding (4zzq) =================
   Een balk onderin, niet een venster dat de pagina blokkeert: de site blijft te lezen
   zolang er niet gekozen is, en er laadt dan niets. Boven de belbalk op telefoon.
   De twee knoppen zijn met opzet identiek: geen van beide is de "goede" keuze. */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;margin:0 auto;
  max-width:640px;background:var(--dark);color:var(--op-2);border-radius:2px;
  padding:clamp(18px,2vw,24px) clamp(18px,2.2vw,26px);
  box-shadow:0 14px 44px rgba(12,6,40,.3)}
.cookie[hidden]{display:none}
.cookiekop{color:#fff;font-family:Archivo,sans-serif;font-size:var(--t2);
  font-variation-settings:"wght" 600;line-height:1.45}
.cookiekop a{font-variation-settings:"wght" 500;white-space:nowrap}
.cookie p{font-size:var(--t1);line-height:1.55}
.cookie p + p{margin-top:6px}
.cookie a{color:#fff;text-decoration-thickness:1px;text-underline-offset:3px}
.cookieknoppen{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.cookieknoppen button{font-family:Archivo,sans-serif;font-size:var(--t1);
  font-variation-settings:"wght" 640;padding:12px 14px;border-radius:2px;cursor:pointer;
  border:1px solid #fff;background:#fff;color:var(--dark)}
.cookieknoppen button:hover{background:var(--band-ink);border-color:var(--band-ink)}
.cookieknoppen button:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:420px){.cookieknoppen{grid-template-columns:1fr}}
@media print{.cookie{display:none}}

.let{background:var(--surface);border:1px solid var(--rule-2);border-left:3px solid var(--accent);
  color:var(--ink-2);border-radius:2px;
  padding:15px 19px;font-size:var(--t1);margin-top:var(--r5)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .watgebeurt li::before{background:var(--accent)}}
:root[data-theme="dark"] .watgebeurt li::before{background:var(--accent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .let{background:#2a1e10;border-color:#7a5220;color:#e9b877}}
:root[data-theme="dark"] .let{background:#2a1e10;border-color:#7a5220;color:#e9b877}

/* Formulier op WordPress (4zzv). */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmelding{padding:clamp(18px,2vw,26px);border:1px solid var(--rule-2);border-radius:2px;background:var(--surface)}
.formmelding h3{font-size:var(--t3)}
.formmelding p{margin-top:var(--r2)}

/* Altijd de lichte weergave (4zzz). */
:root{color-scheme:only light}

/* <picture> rond het heldenbeeld (4zzz3) telt niet mee in de opmaak. */
.heldbeeld{display:contents}