/*
Theme Name: Even Better
Theme URI: https://evenbetter.be/
Author: Even Better
Author URI: https://evenbetter.be/
Description: Het maatwerkthema van Even Better, digitaal bureau in regio Antwerpen. Een verfijnd, donker en redactioneel ontwerp met het herkenbare "uplift"-motief. Volledig vertaalbaar, toegankelijk en aanpasbaar via de Customizer.
Version: 3.2.8
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: even-better
Tags: business, portfolio, custom-colors, custom-menu, featured-images, full-width-template, translation-ready, theme-options, threaded-comments
*/
/* ============================================================
   EVEN BETTER — design system
   "Verfijnd donker" — warm charcoal, editorial Fraunces, the uplift motif.
   Built to feel hand-tuned, not templated.
   ============================================================ */

/* ============================================================ FONTS
   Self-hosted variable fonts (latin + latin-ext subsets), served
   first-party — no Google Fonts round-trip, no render-blocking CSS. */
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("assets/fonts/fraunces-latin.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:"Fraunces";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces";font-style:italic;font-weight:300 500;font-display:swap;
  src:url("assets/fonts/fraunces-italic-latin.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:"Fraunces";font-style:italic;font-weight:300 500;font-display:swap;
  src:url("assets/fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Geist";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("assets/fonts/geist-latin.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:"Geist";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("assets/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;
  src:url("assets/fonts/geist-mono-latin.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:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;
  src:url("assets/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* --- warm charcoal surfaces (faint green-warmth, never pure black) --- */
  --ink:        #0D0F0D;
  --ink-1:      #121512;
  --ink-2:      #181C18;
  --ink-3:      #1F241F;

  /* --- warm chalk inks --- */
  --paper:      #ECEAE0;
  --paper-2:    #DEDCD2;
  --muted:      #BFBFB4;
  --faint:      #A6A79C;

  /* --- hairlines --- */
  --hair:       rgba(236,234,224,.10);
  --hair-2:     rgba(236,234,224,.17);
  --field-line:rgba(236,234,224,.40);
  --hair-3:     rgba(236,234,224,.28);

  /* --- the signal: a refined spring-lime + a warm ember used sparingly --- */
  --lime:       #B8F09A;
  --lime-soft:  #CDEFB6;
  --lime-deep:  #5E7A4E;
  --glow:       rgba(184,240,154,.34);
  --ember:      #E9A45C;

  /* --- type --- */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- layout --- */
  --maxw: 1240px;
  --maxw-wide: 1400px;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --gutter: clamp(12px, 2.4vw, 38px);   /* left page gutter */

  /* --- spacing scale --- */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem; --s7:9rem;
  --sec: clamp(4.5rem, 9vw, 8.5rem);

  /* --- de leesmaat ---
     Eén gemiddeld teken is in Geist ongeveer .43em breed. De CSS-eenheid ch is
     dat niet: die meet het cijfer nul, .663em, dus anderhalf keer te ruim.
     Een regel van "66ch" liep daardoor tot 98 tekens uit. Reken de maat hier
     dus in tekens: calc(70 * var(--teken)) is een regel van zeventig tekens.
     Zeventig is de bovengrens voor lopende tekst op deze site.
     Koppen houden hun ch, want daar is het getal met het oog gezet. */
  --teken: .43em;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --radius: 18px;
  --radius-lg: 26px;
}

/* ============================================================ RESET / BASE */
*{box-sizing:border-box;}
*::before,*::after{box-sizing:border-box;}
html{scroll-padding-top:96px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,.95rem + .25vw,1.1rem);
  line-height:1.62;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
h1,h2,h3,h4,h5,p{margin:0;}
blockquote{margin:0;padding:0;}
::selection{background:var(--lime);color:#0b0d0b;}
.lime::selection,.it::selection,em.mk::selection,.stat .n::selection{background:var(--lime);color:#0b0d0b;}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px;}

/* (skip-link styling lives with the .skip,.skip-link rule after the HERO marker) */

/* film grain — tactile, premium, very subtle */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* keep real content above the grain */
header,main,footer{position:relative;z-index:2;}

/* ============================================================ LAYOUT HELPERS */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.wrap-wide{max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--pad);}
.section{padding-block:var(--sec);}
.bleed{padding-top:1px;} /* anchor offset helper */
[id]{scroll-margin-top:96px;}

.lime{color:var(--lime);}
.serif{font-family:var(--serif);}
.center{text-align:center;}


/* the uplift rule — a hairline that steps up once (signature divider) */
.steprule{display:flex;align-items:flex-end;height:14px;width:100%;opacity:.9;}
.steprule i{height:1px;background:var(--hair-2);flex:1;align-self:flex-end;}
.steprule b{display:block;width:54px;height:14px;border-left:1px solid var(--hair-2);
  border-top:1px solid var(--lime);flex:none;}

/* ============================================================ TYPOGRAPHY */
.display,.h-xl,.h-l,.h-m,.serif{font-optical-sizing:auto;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;font-kerning:normal;
  /* Een lang samengesteld woord (Noorderkempen) paste op 320px niet in de kop
     en werd door overflow-x:hidden stil afgekapt, zonder scrollbalk. */
  overflow-wrap:break-word;}
.display{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;
  line-height:.92;letter-spacing:-.035em;}
.h-xl{font-family:var(--serif);font-weight:400;font-size:clamp(3.1rem,8.5vw,8rem);line-height:.9;letter-spacing:-.038em;}
/* Een hele zin als kop, geen kop van drie woorden. Op 128px past er een stuk of
   tien tekens op een regel, dus een zin van veertig valt uiteen in vier regels
   met een weesje op de laatste. Deze maat houdt hem op drie volle regels, en
   text-wrap:balance verdeelt de woorden er gelijk over. */
.h-xl.is-sentence{font-size:clamp(2.6rem,5.6vw,5.9rem);letter-spacing:-.032em;text-wrap:balance;}
.h-l{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,1.4rem + 3.4vw,4.2rem);line-height:1;letter-spacing:-.032em;}
.h-m{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.04;letter-spacing:-.025em;}
.it{font-style:italic;color:var(--lime);}
.lead{color:var(--paper-2);font-size:clamp(1.08rem,1rem + .45vw,1.35rem);line-height:1.55;max-width:calc(71 * var(--teken));}
.muted{color:var(--muted);}
em.mk{font-style:italic;color:var(--lime);}

/* ============================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-weight:500;
  font-size:.96rem;letter-spacing:-.01em;padding:.78rem 1.3rem;border-radius:999px;
  border:1px solid var(--lime);background:var(--lime);color:#0b0d0b;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .35s var(--ease),background .25s var(--ease),color .25s var(--ease);
  will-change:transform;}
.btn .arrow{transition:transform .3s var(--ease);}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 36px -10px var(--glow);}
.btn:hover .arrow{transform:translate(3px,-3px);}
.btn:active{transform:translateY(0) scale(.98);}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--hair-2);}
.btn.ghost:hover{border-color:var(--lime);color:var(--lime);box-shadow:none;}
.btn.sm{padding:.6rem 1.05rem;font-size:.88rem;}
.btn.lg{padding:.95rem 1.6rem;font-size:1.05rem;}
.btn:not(.ghost):focus-visible{outline-color:var(--paper);}
/* Ronde knop met alleen een icoon. De maat is precies de hoogte van de tekstknop
   ernaast, opgebouwd uit dezelfde drie delen: twee keer de verticale padding van
   het formaat, één regelhoogte (1.62 is de line-height van .btn) en de rand. Zo
   staan ze altijd gelijk, ook als de basis-font-size verandert. */
.btn.icon{padding:0;gap:0;justify-content:center;flex:none;--btn-pad:1.56rem;
  width:calc(var(--btn-pad) + 1.62em + .1rem);height:calc(var(--btn-pad) + 1.62em + .1rem);}
.btn.sm.icon{--btn-pad:1.2rem;}
.btn.lg.icon{--btn-pad:1.9rem;}
.btn.icon svg{width:1.15em;height:1.15em;display:block;}

/* manifesto links carry the underline sweep — the thesis doubles as navigation */
.manifesto a{position:relative;}
.manifesto a::after{content:"";position:absolute;left:0;right:100%;bottom:.02em;height:1px;background:var(--lime);transition:right .32s var(--ease);}
.manifesto a:hover::after,.manifesto a:focus-visible::after{right:0;}

/* text link with animated underline */
.tlink{position:relative;color:var(--paper);font-weight:500;}
.tlink::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--lime);transition:right .32s var(--ease);}
.tlink:hover::after{right:0;}

/* ============================================================ HEADER */
.site-header{position:sticky;top:0;z-index:60;background:rgba(13,15,13,.66);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  transition:background .4s var(--ease);}
.site-header.scrolled{background:rgba(13,15,13,.9);}
/* De onderrand van de balk is één rustige haarlijn, verder niets. */
.site-header::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);}
/* WordPress: sit below the admin bar so the masthead and its line are never
   clipped. The .admin-bar class only exists on WP, so this is inert on the
   static site (its own #wpadminbar height responsive breakpoint is 782px). */
.admin-bar .site-header{top:32px;}
.admin-bar .skip,.admin-bar .skip-link{top:calc(32px + 14px);}
@media screen and (max-width:782px){
  .admin-bar .site-header{top:46px;}
  .admin-bar .skip,.admin-bar .skip-link{top:calc(46px + 14px);}
}
.nav-bar{display:flex;align-items:center;justify-content:space-between;height:74px;gap:1.5rem;}
.brand{display:inline-flex;align-items:center;gap:.6rem;}
.brand .mark{width:36px;height:23px;overflow:visible;flex:none;}
.brand .wordmark{font-family:var(--serif);font-weight:500;font-size:1.34rem;letter-spacing:-.025em;white-space:nowrap;}
.brand .wordmark b{color:var(--lime);font-weight:500;font-style:italic;}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,2.1vw,2.1rem);}
.nav-links a.nl{font-size:.95rem;color:var(--muted);position:relative;padding:.35rem 0;transition:color .25s var(--ease);}
/* the flat underline becomes the uplift motif: a hairline that steps up to a lime dot */
.nav-links a.nl::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--lime);transition:width .32s var(--ease);}
.nav-links a.nl::before{content:"";position:absolute;right:-1px;bottom:2px;width:5px;height:5px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 8px 1px var(--glow);opacity:0;transform:scale(.3);
  transition:opacity .25s var(--ease),transform .3s var(--ease);}
.nav-links a.nl:hover,.nav-links a.nl[aria-current="page"]{color:var(--paper);}
.nav-links a.nl:hover::after,.nav-links a.nl[aria-current="page"]::after{width:100%;}
.nav-links a.nl:hover::before,.nav-links a.nl[aria-current="page"]::before{opacity:1;transform:scale(1);}
.menu-toggle{display:none;background:none;border:1px solid var(--hair-2);color:var(--paper);
  width:46px;height:44px;border-radius:11px;cursor:pointer;align-items:center;justify-content:center;}
.menu-toggle:hover,.menu-toggle:focus-visible{border-color:var(--lime);color:var(--lime);}
/* The header CTA lives outside .nav-links on purpose, so it survives the
   hamburger on phones. The phone link is the other way round: only useful
   once the menu is open. */
.nav-cta{white-space:nowrap;}
/* Het nummer stond op geen enkele breedte in de balk: boven de vouw was het
   nergens te vinden, alleen in de footer. Vanaf 1200px is er plaats voor.
   Daaronder verstopt de hamburger het, en daarom draagt de plakkende balk
   onder 1000px het nummer nu voluit als tekst (zie .cb-tel).
   Nagemeten op 1024: mét het nummer breekt de navigatie naar twee regels
   (110px in een balk van 74px), dus 1200 blijft staan. Tussen 1000 en 1200
   staat het nummer alleen in de voettekst. */
.nav-tel{display:none;}
@media (min-width:1200px){
  .nav-links a.nl.nav-tel{display:inline-block;color:var(--lime);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .nav-links a.nl.nav-tel:hover{color:var(--lime-soft);}
}

/* ============================================================ HERO */
/* skip link — hidden until keyboard focus. Covers both the static (.skip)
   and the WordPress theme (.skip-link) markup; placed here so it mirrors. */
.skip,.skip-link{position:fixed;top:14px;left:14px;z-index:100;background:var(--lime);color:#0b0d0b;
  font-weight:500;font-size:.95rem;padding:.7rem 1.2rem;border-radius:999px;
  transform:translateY(-250%);transition:transform .2s var(--ease);}
.skip:focus,.skip-link:focus{transform:none;outline:2px solid var(--paper);outline-offset:3px;}
.hero{position:relative;padding-top:clamp(2.5rem,6vw,5.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);overflow:hidden;}
.hero::after{content:"";position:absolute;top:-20%;right:-10%;width:60vw;height:60vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle at center,var(--glow),transparent 62%);opacity:.5;filter:blur(20px);pointer-events:none;z-index:-1;}
.hero-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:end;}
.hero h1{margin-top:clamp(1.2rem,3vw,1.9rem);}
:is(.hero,.page-hero) .lead{margin-top:clamp(1.4rem,3vw,2.1rem);}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:clamp(1.6rem,3vw,2.2rem);}
/* de geruststelling naast de heroknoppen staat bewust op leesgrootte en niet in
   een kleine bleke voetnootstijl: dit is het argument dat de klik goedkoop maakt,
   en het stond hier op .86rem in --muted naast een knop van 52px */
.hero-cta .note{font-size:1rem;color:var(--paper-2);max-width:calc(40 * var(--teken));line-height:1.45;}


/* argument: een alinea die iets bewijst in plaats van iets inleidt. Groter dan
   bodytekst, kleiner dan een kop, en nooit breder dan wat prettig leest. */
.argument{margin-top:clamp(1.6rem,3vw,2.4rem);max-width:calc(70 * var(--teken));
  color:var(--paper-2);font-size:clamp(1.05rem,.98rem + .3vw,1.22rem);line-height:1.62;}

/* prijslijst op de homepage: vijf regels, naam en bedrag links, uitleg rechts.
   Bewust compacter dan de .price-list van /prijzen/, want hier is het een
   antwoord onderweg en geen pagina op zich. */
.pricelist{list-style:none;margin:clamp(2rem,4vw,2.8rem) 0 0;padding:0;border-top:1px solid var(--hair);}
.pricelist li{display:grid;grid-template-columns:minmax(13rem,26%) 1fr;gap:.35rem clamp(1.5rem,3vw,2.8rem);
  align-items:baseline;padding:clamp(1.05rem,2.1vw,1.5rem) 0;border-bottom:1px solid var(--hair);}
.pl-name{font-family:var(--serif);font-size:clamp(1.12rem,1rem + .5vw,1.42rem);line-height:1.2;color:var(--lime);}
.pl-desc{color:var(--muted);max-width:calc(70 * var(--teken));}
.pricenote{margin-top:clamp(1.5rem,3vw,2.2rem);max-width:calc(70 * var(--teken));color:var(--muted);font-size:.98rem;line-height:1.6;}
@media (max-width:760px){
  .pricelist li{grid-template-columns:1fr;gap:.45rem;}
}

@media (max-width:1000px){
  /* Op een telefoon moet de bedragenbalk vóór de schermafbeeldingen komen,
     anders ligt het enige echte onderscheid twee schermen laag. De hero-grid
     lost zich hier op zodat zijn kinderen in dezelfde flexvolgorde meedoen. */
  .hero>.wrap-wide{display:flex;flex-direction:column;gap:clamp(1.5rem,4vw,3.5rem);}
  .hero .hero-grid{display:contents;}
  .hero .hero-main{order:1;}
  .hero .hero-aside{order:3;}
}

/* ============================================================ SECTION HEAD */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.2rem,4.5vw,3.8rem);}
.sec-head .sh-title{max-width:16ch;}
.sec-head .sh-aside{color:var(--muted);max-width:calc(55 * var(--teken));font-size:1rem;}

/* ============================================================ SERVICES — open editorial rows, no box */
.svc-list{display:block;border-top:1px solid var(--hair);}
.svc{background:transparent;padding:clamp(1.9rem,3.6vw,3rem) 0;border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;gap:clamp(1rem,3vw,2.8rem);
  align-items:center;position:relative;transition:padding-left .45s var(--ease);}
.svc::before{content:"";position:absolute;left:-1.3rem;top:.9rem;bottom:.9rem;width:2px;background:var(--lime);
  transform:scaleY(0);transform-origin:center;transition:transform .5s var(--ease);}
.svc:hover{padding-left:1.3rem;}
.svc:hover::before{transform:scaleY(1);}
.svc .svc-name{display:flex;align-items:center;gap:.85rem;}
.svc .tick{width:42px;height:27px;flex:none;}
.svc h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,1.2rem + 1.5vw,2.3rem);letter-spacing:-.02em;line-height:1.02;transition:color .3s var(--ease);}
.svc:hover h3{color:var(--lime);}
.svc .svc-sub{font-size:.88rem;color:var(--muted);margin-top:.35rem;}
.svc .desc{color:var(--muted);font-size:1.02rem;line-height:1.6;}
.svc .desc b{color:var(--paper);font-weight:500;}
.svc .tags{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:1rem;}
.svc .tags span{font-size:.85rem;color:var(--muted);}
.svc .tags span:not(:last-child)::after{content:"·";margin-left:.9rem;color:var(--hair-3);}
.svc .go{width:50px;height:50px;border-radius:50%;border:1px solid var(--hair-2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--muted);transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);}
.svc:hover .go{background:var(--lime);border-color:var(--lime);color:#0b0d0b;}
.svc .go .arrow{transition:transform .35s var(--ease);}
.svc:hover .go .arrow{transform:translate(2px,-2px);}

/* ============================================================ WHY / VALUES — open, no cells */
.why{position:relative;overflow:hidden;}
.why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,6rem);align-items:center;}
.why .why-quote{margin-top:1.4rem;}
.why .why-note{color:var(--muted);max-width:calc(65 * var(--teken));margin-top:1.5rem;}
.vals{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,3.4vw,2.8rem) clamp(2rem,4vw,3.4rem);}
.val{background:transparent;padding:0;display:flex;gap:1rem;align-items:flex-start;}
.val .vmark{flex:none;color:var(--lime);margin-top:.15rem;}
.val :is(h3,h4){font-family:var(--sans);font-weight:500;font-size:1.12rem;margin-bottom:.35rem;}
.val p{color:var(--muted);font-size:.96rem;line-height:1.55;}

/* ============================================================ PROCESS (continuous uplift timeline) */
:root{
  /* Eén trede. Alles in de aanpak-sectie is er een veelvoud van: de vier
     koppen klimmen er elk één omhoog, de getekende lijn stijgt precies
     evenveel en de hoogte van de trap is er vijf. Uit elkaar trekken kan dus
     niet meer. Tot 28 augustus 2026 kon dat wel: de lijn steeg 16 pixels per
     trede en de koppen 31, waardoor de afstand tussen een knooppunt en zijn
     eigen kop over vier stappen van 127 naar 81 pixels kromp.
     --proc-gap is de tussenruimte van het raster. De trap leest hem mee, want
     zonder dat getal weet ze niet waar een kolom begint. */
  --trede: clamp(.9rem, 1.55vw, 1.65rem);
  --proc-gap: clamp(1.6rem, 3vw, 2.6rem);
}
.proc-rail{position:relative;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--proc-gap);}
.step{background:transparent;padding:0;position:relative;}
.step :is(h3,h4){font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);letter-spacing:-.02em;margin:.7rem 0 .5rem;}
/* De maat is er voor de verticale klim onder duizend pixels. In vier kolommen
   is een stap nooit breder dan 279 pixels en bindt deze regel niet; in één
   kolom liep dezelfde alinea op 900 pixels tot 122 tekens. Zelfde maat als de
   rest van de lopende tekst, dus zeventig tekens via --teken. */
.step p{color:var(--muted);font-size:.94rem;line-height:1.55;max-width:calc(70 * var(--teken));}

/* ============================================================ COMPARE — open columns, contrast by tone not boxes */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);}
.cmp{position:relative;padding-top:1.5rem;}
.cmp .cmp-head{padding:0 0 1.1rem 0;border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:.7rem;}
.cmp .cmp-head h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:-.02em;}
.cmp ul{list-style:none;margin:0;padding:.5rem 0 0;}
.cmp li{display:flex;gap:.85rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid var(--hair);font-size:1.02rem;}
.cmp li:last-child{border-bottom:0;}
.cmp.bad .cmp-head h3{color:var(--muted);}
.cmp.bad li{color:var(--faint);}
.cmp.bad .ic{color:var(--faint);}
.cmp.good li{color:var(--paper-2);}
.cmp.good .ic{color:var(--lime);flex:none;margin-top:.15rem;}
.cmp .ic{flex:none;margin-top:.15rem;}

/* ============================================================ REGION */
.region-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
.region-list{display:flex;flex-wrap:wrap;gap:.6rem;}
.region-list span{font-family:var(--serif);font-size:clamp(1.2rem,1rem + 1.2vw,1.9rem);color:var(--paper-2);
  padding:.15rem .2rem;transition:color .3s var(--ease);cursor:default;letter-spacing:-.02em;}
.region-list span:hover{color:var(--lime);}
.region-list span:not(:last-child)::after{content:"·";margin-left:.6rem;color:var(--hair-3);}

/* ============================================================ BIG CTA
   The warmest place on the page: a slow aurora of lime and ember rises
   behind the closing question. The goal action lives in the light. */
.bigcta{border-top:1px solid var(--hair);position:relative;overflow:hidden;}
.bigcta::before,.bigcta::after{content:"";position:absolute;inset:0;pointer-events:none;filter:blur(40px);}
.bigcta::before{background:radial-gradient(60% 80% at 28% 112%,rgba(184,240,154,.14),transparent 70%);
  animation:aurora-a 14s ease-in-out infinite alternate;}
.bigcta::after{background:radial-gradient(50% 70% at 76% 118%,rgba(233,164,92,.10),transparent 72%);
  animation:aurora-b 17s ease-in-out infinite alternate;}
@keyframes aurora-a{from{transform:translateX(-4%) scale(1);}to{transform:translateX(5%) scale(1.12);}}
@keyframes aurora-b{from{transform:translateX(3%) scale(1.08);}to{transform:translateX(-5%) scale(1);}}
.bigcta-inner{position:relative;z-index:1;}
/* De gemeentepagina's sluiten af met dezelfde band, maar met een gestapelde
   inhoud (kop, geruststelling, knoppen, kaartlink) in plaats van de tweekoloms
   mailrow. Ze droegen .bigcta op een div binnen .wrap-wide, waardoor de aurora
   en de bovenrand bij de tekstkolom ophielden in plaats van over de volle
   sectie te lopen: dezelfde klasse, ander bouwsel, zichtbaar ander slot op
   tien pagina's. Nu is de sectie de band en zorgt deze klasse voor de stapel
   boven de gloed. */
.bigcta-local{position:relative;z-index:1;}
.bigcta-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,4rem);align-items:end;}
.bigcta .mailrow{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;}
.bigcta a.mail{font-family:var(--serif);font-size:clamp(1.3rem,1rem + 1.4vw,2rem);border-bottom:1px solid var(--hair-2);padding-bottom:.35rem;transition:color .3s var(--ease),border-color .3s var(--ease);}
.bigcta a.mail:hover{color:var(--lime);border-color:var(--lime);}

/* De geruststellende slotband. Stond in het <style>-blok van contact.html,
   terwijl regio.html dezelfde klasse gebruikt: daar viel de zin terug op gewone
   lopende tekst midden in een lime band. Hoort dus hier. */
.reassure{border-top:1px solid var(--hair);padding-block:clamp(3rem,6vw,5rem);}
.reassure p{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,1rem + 1.8vw,2.4rem);
  letter-spacing:-.02em;line-height:1.2;color:var(--paper-2);max-width:calc(52 * var(--teken));}
.reassure p em{color:var(--lime);font-style:italic;}

/* ============================================================ FOOTER */
.site-footer{border-top:1px solid var(--hair);padding-block:var(--s5) var(--s4);}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;}
.foot-col :is(h5,.foot-h){font-size:.88rem;color:var(--muted);margin-bottom:1rem;font-weight:500;max-width:none;}
.foot-col p{color:var(--muted);font-size:.95rem;max-width:calc(49 * var(--teken));}
.foot-col a:not(.btn){color:var(--muted);font-size:.95rem;line-height:1.95;transition:color .25s var(--ease);}
.foot-col a:not(.btn):hover{color:var(--lime);}
.foot-col .btn{margin-top:1.4rem;color:#0b0d0b;}
.foot-region{margin-top:var(--s4);}
.foot-region :is(h5,.foot-h){font-size:.88rem;color:var(--muted);margin-bottom:.8rem;font-weight:500;}
.foot-region .rg{display:flex;flex-wrap:wrap;gap:.35rem .5rem;max-width:60ch;}
.foot-region .rg :is(span,a){font-size:.85rem;color:var(--muted);}
.foot-region .rg a{transition:color .25s var(--ease);}
.foot-region .rg a:hover{color:var(--lime);}
.foot-region .rg :is(span,a):not(:last-child)::after{content:"·";margin-left:.5rem;color:var(--hair-2);}
.foot-nap{font-style:normal;margin-top:1.15rem;color:var(--muted);font-size:.92rem;line-height:1.85;}
.foot-nap .fn-name{color:var(--paper-2);}
.foot-nap a{color:var(--muted);}
.foot-nap a:hover{color:var(--lime);}
.foot-nap .fn-btw{color:var(--faint);font-size:.84rem;}
.foot-region .foot-h a{color:inherit;transition:color .25s var(--ease);}
.foot-region .foot-h a:hover{color:var(--lime);}
.ci-map{display:inline-block;margin-top:.35rem;font-size:.88rem;color:var(--muted);border-bottom:1px solid var(--hair-2);transition:color .25s var(--ease),border-color .25s var(--ease);}
.ci-map:hover{color:var(--lime);border-color:var(--lime);}
.foot-brand{font-family:var(--serif);font-size:clamp(3rem,13vw,9.5rem);line-height:.82;letter-spacing:-.045em;
  margin-top:var(--s4);display:flex;align-items:baseline;gap:.25rem;color:var(--paper);}
.foot-brand b{color:var(--lime);font-style:italic;font-weight:400;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--hair);margin-top:var(--s4);padding-top:1.4rem;}
.foot-bottom p{font-size:.82rem;color:var(--faint);}
.foot-bottom a{color:var(--faint);}
.foot-bottom a:hover{color:var(--muted);}

/* ============================================================ SUB-PAGE BITS */
.page-hero{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(2rem,4vw,3rem);position:relative;}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.9rem,4vw,3.4rem);}
.feature{background:transparent;padding:0;}
.feature .ficon{color:var(--lime);margin-bottom:1.1rem;}
.feature :is(h3,h4){font-family:var(--serif);font-weight:400;font-size:1.4rem;letter-spacing:-.02em;margin-bottom:.55rem;}
.feature p{color:var(--muted);font-size:.96rem;line-height:1.6;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.checklist{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.85rem;}
/* Zonder maat liep dit item op /website-laten-vernieuwen/ over de volle 1256px,
   goed voor 167 tekens per regel, en op /websites/ over 685px voor 94. De maat
   staat op de li en niet op de tekst, want de helft van de items heeft geen
   span om de tekst heen. Een item mét vinkje houdt daardoor ongeveer 66 tekens
   over in plaats van 70: het icoon en de tussenruimte staan links van de tekst
   en tellen mee. Allebei ruim binnen de leesbare band. */
.checklist li{display:flex;gap:.8rem;align-items:flex-start;color:var(--paper-2);
  max-width:calc(70 * var(--teken));}
.checklist li .ic{color:var(--lime);flex:none;margin-top:.2rem;}
.faq{display:block;border-top:1px solid var(--hair);}
.faq details{background:transparent;border-bottom:1px solid var(--hair);padding:clamp(1.1rem,2vw,1.55rem) 0;}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(1.15rem,1rem + .6vw,1.5rem);letter-spacing:-.02em;transition:color .25s var(--ease);}
.faq details[open] summary,.faq summary:hover{color:var(--lime);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{flex:none;width:26px;height:26px;border:1px solid var(--hair-2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--lime);transition:transform .3s var(--ease),background .3s var(--ease);}
.faq details[open] summary .pm{transform:rotate(45deg);background:rgba(184,240,154,.1);}
.faq p{color:var(--muted);margin-top:.9rem;max-width:calc(70 * var(--teken));line-height:1.65;}

/* mini stat row — open, no dividing box */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,4vw,3.5rem);}
.stat .n{font-family:var(--serif);font-size:clamp(2.4rem,1.6rem + 2.6vw,3.6rem);line-height:1;color:var(--lime);letter-spacing:-.02em;}
.stat .l{color:var(--muted);font-size:.96rem;margin-top:.6rem;max-width:calc(37 * var(--teken));line-height:1.5;}

/* contact form */
.form-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);}
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem;}
/* Labels stonden in mono kapitaal op .72rem. Dat leest trager, breekt lelijk
   in het Nederlands en het is precies het sjabloonaccent dat de rest van de
   site vermijdt. Gewone zinsnede, gewone grootte, gewone leesbaarheid. */
.field label{font-size:.95rem;font-weight:500;color:var(--paper-2);letter-spacing:-.006em;}
.field label .req{color:var(--lime);}
/* De foutregel onder een veld: zegt wát er mis is, niet enkel dát er iets mis is. */
.field-error{font-size:.85rem;line-height:1.4;margin-top:.1rem;color:var(--ember);}
.field-error[hidden]{display:none;}
.field input,.field textarea,.field select{background:var(--ink-1);border:1px solid var(--field-line);border-radius:12px;
  color:var(--paper);padding:.85rem 1rem;font:inherit;transition:border-color .25s var(--ease),background .25s var(--ease);}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--lime);background:var(--ink-2);box-shadow:0 0 0 3px var(--glow);}
/* Het bericht is sinds 19 augustus 2026 optioneel. Een vak van 130px las als
   "hier wordt een verhaal verwacht"; 96px vraagt om een zin en groeit mee. */
.field textarea{resize:vertical;min-height:96px;}
/* Een veld moet je zien voor je erin klikt: --hair-2 haalde 1,5:1, dit haalt 3,3:1. */
.field [aria-invalid="true"]{border-color:#E9A45C;background:rgba(233,164,92,.06);}
.field [aria-invalid="true"]:focus{border-color:var(--lime);}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1;}
/* De regel boven het formulier die zegt hoe weinig er moet. Staat er omdat het
   formulier voor wie het snel bekijkt op vijf invulvelden lijkt, terwijl er maar
   twee verplicht zijn. Zelfde grootte als een label, dus het leest als de vorm
   en niet als kleine lettertjes. */
.form-lede{color:var(--paper-2);font-size:.98rem;line-height:1.55;margin-bottom:1.3rem;text-wrap:pretty;}
/* Keuzeknoppen in plaats van een keuzelijst. Een select kost openklappen,
   scrollen, kiezen en sluiten; dit is één tik en je ziet meteen wat er te
   kiezen valt. Radio's blijven eronder zitten, dus zonder JavaScript werkt het
   even goed en een schermlezer krijgt gewoon een groep keuzerondjes. */
.chips{border:0;padding:0;margin:0 0 1.1rem;min-inline-size:0;}
.chips legend{padding:0;font-size:.95rem;font-weight:500;color:var(--paper-2);letter-spacing:-.006em;margin-bottom:.6rem;}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;}
/* Het keuzerondje zelf wordt weggeknipt, niet weggedimd. Met opacity:0 bleef het
   wel focusbaar maar viel het uit de toegankelijkheidsboom, gemeten op 19 augustus
   2026: de vijf rondjes stonden er niet meer in terwijl de velden erboven en
   eronder wel verschenen. Dan hoort een schermlezer een groep zonder keuzes, en
   dat is slechter dan de keuzelijst die hier eerst stond. Wegknippen met clip
   houdt ze in de boom, in de toetsenbordvolgorde en in de labelkoppeling. */
.chip-row input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.chip-row label{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.05rem;
  border:1px solid var(--field-line);border-radius:999px;background:var(--ink-1);color:var(--paper-2);
  font-size:.95rem;line-height:1.25;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);}
.chip-row label:hover{border-color:var(--lime);color:var(--paper);}
.chip-row input:focus-visible+label{outline:2px solid var(--lime);outline-offset:2px;}
.chip-row input:checked+label{border-color:var(--lime);background:var(--lime);color:var(--ink);}
.contact-aside{border-left:1px solid var(--hair);padding-left:clamp(1.5rem,3vw,2.5rem);}
.contact-aside :is(h3,h4){font-family:var(--serif);font-weight:400;font-size:1.55rem;letter-spacing:-.02em;margin-bottom:1.1rem;}
.contact-aside .ci{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1rem;color:var(--paper-2);}
.contact-aside .ci .ic{color:var(--lime);flex:none;margin-top:.15rem;}

/* blog / search / archive fallback (WordPress index.php) + pagination */
.post-list{display:grid;gap:clamp(1.8rem,3.4vw,2.8rem);border-top:1px solid var(--hair);}
.post-card{padding:clamp(1.6rem,3vw,2.4rem) 0;border-bottom:1px solid var(--hair);}
.post-card-meta{margin-bottom:.7rem;}
.post-card h2{margin-bottom:.5rem;}
.post-card h2 a{transition:color .25s var(--ease);}
.post-card h2 a:hover{color:var(--lime);}
.post-card p{max-width:calc(70 * var(--teken));margin-bottom:.9rem;}
.pagination{margin-top:clamp(2.5rem,5vw,4rem);}
.pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 .55rem;
  border:1px solid var(--hair-2);border-radius:11px;color:var(--muted);font-family:var(--mono);font-size:.85rem;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);}
.page-numbers:hover,.page-numbers.current{border-color:var(--lime);color:var(--lime);}
.page-numbers.current{background:rgba(184,240,154,.08);}

/* ============================================================ MOTION SYSTEM
   "Only the line moves — and it always steps up."
   One motion language: things RISE (settle up), lines DRAW (stroke), the
   lime accent BLOOMS. Shared tokens keep it feeling like one organism.
   All gated behind html.js so content stays visible without JavaScript. */
:root{
  --ease-line:cubic-bezier(.65,0,.35,1);   /* the "confident pen" — stroke draws only */
  --t-fast:.28s; --t-base:.6s; --t-slow:.9s; --t-draw:1.3s; --t-epic:2s;
  --stag:70ms; --stag-line:90ms; --rise:22px; --rise-sm:14px;
}

/* ---- RISE: the default entrance ---- */
.js .reveal{opacity:0;transform:translateY(var(--rise-sm));
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);}
.js .reveal.in{opacity:1;transform:none;}
/* no-JS-executed fallback: if main.js never runs (blocked/failed), reveal
   everything after 2.5s. main.js adds .anim to <html>, which cancels this. */
@keyframes reveal-fallback{to{opacity:1;transform:none;}}
.js .reveal,.js .reveal>*{animation:reveal-fallback 0s 2.5s forwards;}
.js.anim .reveal,.js.anim .reveal>*{animation:none;}
.js .reveal[data-motion="settle"]{transform:translateY(var(--rise)) scale(.985);}
.reveal.d1{transition-delay:var(--stag);}
.reveal.d2{transition-delay:140ms;}
.reveal.d3{transition-delay:210ms;}

/* ---- DRAW: any hairline strokes itself with the confident pen ---- */
.js .draw-path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset var(--t-draw) var(--ease-line);}
.js .draw-path.in{stroke-dashoffset:0;}

/* ---- grouped reveals cascade child-by-child (lists, grids, rows) ---- */
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal{opacity:1;transform:none;transition:none;}
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal>*{
  opacity:0;transform:translateY(var(--rise-sm));transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);}
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal[data-motion="settle"]>*{transform:translateY(var(--rise)) scale(.985);}
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal.in>*{opacity:1;transform:none;}
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal.in>:nth-child(2){transition-delay:var(--stag);}
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal.in>:nth-child(3){transition-delay:140ms;}
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal.in>:nth-child(4){transition-delay:210ms;}
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal.in>:nth-child(5){transition-delay:280ms;}
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal.in>:nth-child(6){transition-delay:350ms;}
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal.in>:nth-child(7){transition-delay:420ms;}
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal.in>:nth-child(8){transition-delay:490ms;}
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal.in>:nth-child(9){transition-delay:560ms;}
.js :is(.vals,.faq,.feature-grid,.region-list,.checklist,.stat-row,.svc-list,.mailrow,.case-grid,.reviews,.pricelist,.deal).reveal.in>:nth-child(10){transition-delay:630ms;}

/* ---- hero headlines: lines rise one by one (spans built by main.js) ---- */
.js .reveal .hl{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);}
.js .reveal.in .hl{opacity:1;transform:none;}

/* ---- the accent BLOOM (reused: chart tip, nodes, "nét") ---- */
@keyframes eb-bloom{0%{transform:scale(1);}42%{transform:scale(1.85);}100%{transform:scale(1);}}
@keyframes eb-draw{from{stroke-dashoffset:90;}to{stroke-dashoffset:0;}}


/* ============================================================ STEPRULE seam
   The stepping-line divider now DRAWS in (a wipe from the left). */
.js .steprule{clip-path:inset(0 100% 0 0);transition:clip-path var(--t-draw) var(--ease-line);}
.js .steprule.in{clip-path:inset(0 0 0 0);}

/* ============================================================ HERO choreography */
/* glow follows the pointer (desktop); falls back to a fixed position */
.hero::after{background:radial-gradient(circle at var(--mx,72%) var(--my,26%),var(--glow),transparent 62%);}
/* "nét" blooms once the claim has settled */
@keyframes net-bloom{0%{text-shadow:0 0 0 transparent;}45%{text-shadow:0 0 26px var(--glow);}100%{text-shadow:0 0 0 transparent;}}
.js :is(.hero,.page-hero) h1 :is(.it,em.mk).lit{animation:net-bloom var(--t-slow) var(--ease) both;}
/* ============================================================ PROCESS staircase
   One continuous lime line climbs across the four steps and draws as it
   enters view; each node ignites as the pen reaches it. */
/* De trap is een halve rasterruimte breder dan de tekst, links en rechts.
   Daardoor vallen de drie opstapjes van de lijn (op 25, 50 en 75 procent van
   dit blok) precies in het midden van de drie tussenruimtes, en loopt elke
   trede over haar eigen kolom in plaats van over vier gelijke kwarten. */
.proc-stair{position:relative;height:calc(var(--trede) * 5);margin-bottom:.4rem;
  margin-inline:calc(var(--proc-gap) / -2);}
.step-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
/* De lijn wordt verticaal verder uitgerekt dan horizontaal, dus zonder dit
   zou een trede dikker uitvallen dan een opstapje. */
.step-line polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;}
.step-line-bg{stroke:var(--hair-2);stroke-width:1;}
.step-line-fg{stroke:var(--lime);stroke-width:2;}
.js .step-line-fg{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t-epic) var(--ease-line);}
.js .step-line-fg.in{stroke-dashoffset:0;}
.step-node{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--ink);
  border:1.4px solid var(--muted);transform:translate(-50%,-50%);z-index:1;}
/* Elk knooppunt staat op de linkerrand van zijn eigen kolom, dus recht boven
   de eerste letter van zijn eigen kop. Dezelfde afspraak als op de telefoon,
   waar de stip van .step::after ook naast het eerste woord staat. De halve
   rasterruimte erbij vangt de verbreding van het blok hierboven op. */
.step-node.n1{left:calc(var(--proc-gap) / 2);top:80%;}
.step-node.n2{left:calc(25% + var(--proc-gap) / 2);top:60%;}
.step-node.n3{left:calc(50% + var(--proc-gap) / 2);top:40%;}
.step-node.n4{left:calc(75% + var(--proc-gap) / 2);top:20%;}
.js .step-node{opacity:0;transform:translate(-50%,-50%) scale(.4);
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);}
.js .proc-stair.lit .step-node{opacity:1;transform:translate(-50%,-50%) scale(1);
  background:var(--lime);border-color:var(--lime);box-shadow:0 0 12px 1px var(--glow);}
.js .proc-stair.lit .step-node.n1{transition-delay:.45s;}
.js .proc-stair.lit .step-node.n2{transition-delay:.95s;}
.js .proc-stair.lit .step-node.n3{transition-delay:1.45s;}
.js .proc-stair.lit .step-node.n4{transition-delay:1.9s;}
@media (max-width:1000px){.proc-stair{display:none;}}

/* ============================================================ COMPARE draw-vs-decay
   The template card settles first and stays flat & lifeless; the "nét
   beter" card draws its seam and ticks itself alive. */
#maatwerk .cmp{position:relative;}
.js #maatwerk .cmp.bad{transition-delay:0s;}
.js #maatwerk .cmp.good{transition-delay:.18s;}
.cmp.is-dead{filter:saturate(.82) brightness(.99);}
.cmp-seam{position:absolute;left:0;top:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--lime),var(--lime-soft,#cdefb6));box-shadow:0 0 10px 0 var(--glow);}
.js .cmp.good.in .cmp-seam{transform:scaleX(1);transition:transform var(--t-draw) var(--ease-line) .26s;}
.cmp.good li .draw-path{transition-delay:.5s;}
.cmp.good li:nth-child(2) .draw-path{transition-delay:.62s;}
.cmp.good li:nth-child(3) .draw-path{transition-delay:.74s;}
.cmp.good li:nth-child(4) .draw-path{transition-delay:.86s;}

/* ============================================================ FOOTER resolution
   The wordmark rises in two beats and the uplift line signs the page. */
.js .foot-brand .fb-word{display:inline-block;opacity:0;transform:translateY(.32em);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);}
.js .foot-brand.in .fb-word{opacity:1;transform:none;}
.js .foot-brand.in .fb-lime{transition-delay:.16s;}
.foot-uplift-tip{transform-box:fill-box;transform-origin:center;}
.js .foot-uplift.in ~ .foot-uplift-tip{animation:eb-bloom var(--t-base) var(--ease) .9s both;}

/* ============================================================ MICRO-INTERACTIONS */
/* the uplift mark redraws on hover (logo) + each service tick draws on arrival */
.brand .mark polyline,.svc .tick polyline{stroke-dasharray:90;}
.brand:hover .mark polyline,.svc:hover .tick polyline{animation:eb-draw var(--t-slow) var(--ease-line) both;}
.js .svc-list.in .svc:nth-child(1) .tick polyline{animation:eb-draw var(--t-slow) var(--ease-line) both;}
.js .svc-list.in .svc:nth-child(2) .tick polyline{animation:eb-draw var(--t-slow) var(--ease-line) .12s both;}
.js .svc-list.in .svc:nth-child(3) .tick polyline{animation:eb-draw var(--t-slow) var(--ease-line) .24s both;}

/* primary buttons: a soft sheen sweeps across once + magnetic nudge (JS) */
.btn{position:relative;overflow:hidden;}
.btn:not(.ghost)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  transform:translateX(-130%);}
.btn:not(.ghost):hover::after{transform:translateX(130%);transition:transform .7s var(--ease);}

/* FAQ answers ease open */
@keyframes eb-faq{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}
.faq details[open] p{animation:eb-faq .4s var(--ease-out) both;}

/* header: stays put; its background just firms up once you have scrolled */
.js .site-header{transition:background .4s var(--ease);}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .reveal,.reveal>*,.hl,.fb-word{opacity:1 !important;transform:none !important;}
  .draw-path,.step-line-fg{stroke-dashoffset:0 !important;}
  .steprule{clip-path:none !important;}
  .cmp-seam{transform:scaleX(1) !important;}
  .step-node{opacity:1 !important;transform:translate(-50%,-50%) !important;
    background:var(--lime) !important;border-color:var(--lime) !important;}
  .step::after{opacity:1 !important;transform:none !important;}
}

/* ============================================================ EDITORIAL SPREADS
   Composition only — each section its own spread. No new colours, fonts,
   tone or content; only placement, scale, alignment and whitespace. */

/* 1 — HERO: the "nét" accent stays full size, matching every other
   lime-italic accent on the site (a shrunken raised version read as a
   rendering bug rather than a wink, especially on mobile). */

/* 2 — SERVICES: a typographic staircase. Names grow and step in; the
   descriptions hang back as narrow marginal notes. */
.svc{display:block;padding:clamp(2.4rem,4.6vw,4rem) 0;}
.svc .svc-name{align-items:flex-start;}
.svc .tick{margin-top:.55em;}
.svc h3{font-size:clamp(2.1rem,1.4rem + 3.4vw,4.1rem);line-height:.98;}
.svc .desc-wrap{margin-top:1.5rem;margin-left:auto;max-width:calc(68 * var(--teken));}
.svc .go{position:absolute;top:clamp(2.4rem,4.6vw,4rem);right:0;}

/* 3 — WHY: scale is the argument. "Klein bureau," small, "groot verschil." huge. */
.why-grid{display:block;}
/* Op 112px past er een stuk of dertig tekens op een regel. Zonder balance breekt
   de kop na het laatste woord dat nog net past, en dat geeft een lange regel met
   een restje eronder. Op een lichte band valt zo'n restje extra op: donkere letter
   op licht vlak weegt zwaarder dan omgekeerd. */
.why-head{font-size:clamp(2.8rem,1.8rem + 6vw,7rem);line-height:.9;max-width:none;text-wrap:balance;}
.why-head .kb{font-size:.34em;display:inline-block;letter-spacing:-.01em;}
.why .why-note{max-width:calc(71 * var(--teken));}
.why .vals{grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,2.6rem);margin-top:clamp(3rem,6vw,5rem);}

/* 4 — PROCESS: the reading path climbs — the four steps sit at rising heights.
   Scoped to the homepage process (the row that follows the staircase); the
   step rows on the subpages stay flat. */
.proc-stair + .steps{align-items:start;}
.proc-stair + .steps .step:nth-child(1){margin-top:calc(var(--trede) * 3);}
.proc-stair + .steps .step:nth-child(2){margin-top:calc(var(--trede) * 2);}
.proc-stair + .steps .step:nth-child(3){margin-top:var(--trede);}
.proc-stair + .steps .step:nth-child(4){margin-top:0;}

/* 5 — PROMISES: one figure dominates — €0 is the hook, the rest are notes.
   Scoped to the homepage promises row; other stat-rows stay even. */
.stat-row.promises{grid-template-columns:1.5fr .9fr .9fr;align-items:end;gap:clamp(2rem,5vw,4.5rem);}
.stat-row.promises .stat:nth-child(1) .n{font-size:clamp(4.5rem,2.4rem + 9vw,10rem);line-height:.82;}
.stat-row.promises .stat:nth-child(2),.stat-row.promises .stat:nth-child(3){align-self:start;padding-top:.5rem;}
.stat-row.promises .stat:nth-child(2) .n,.stat-row.promises .stat:nth-child(3) .n{font-size:clamp(2.4rem,1.6rem + 2.4vw,3.5rem);}

/* ============================================================ IMAGERY LAYER — "SHOTS"
   Miniature client sites, hand-built in pure CSS inside a browser frame.
   This is the portfolio imagery: no stock photos — the work itself, drawn
   by hand. Each shot sets its own micro palette via custom properties:
   --sa accent · --sb page bg · --st page text · --sc card tint
   --p0/--p1/--p2 colours of the gradient "photo" plate */
.shot{margin:0;position:relative;border-radius:12px;overflow:hidden;
  background:var(--sb,#F6EFE4);border:1px solid rgba(236,234,224,.13);
  box-shadow:0 24px 70px -28px rgba(0,0,0,.8);font-family:var(--sans);}
.shot-chrome{display:flex;align-items:center;gap:.4rem;padding:.5rem .75rem;
  background:rgba(13,15,13,.94);border-bottom:1px solid rgba(236,234,224,.07);}
.shot-chrome i{width:7px;height:7px;border-radius:50%;background:rgba(236,234,224,.16);flex:none;}
.shot-chrome .u{margin-left:.45rem;flex:1;max-width:190px;height:17px;border-radius:9px;
  background:rgba(236,234,224,.07);display:flex;align-items:center;padding:0 .6rem;
  /* Stond in Geist Mono. Dat was op de homepage het enige wat die font nog
     binnenhaalde: 23 KB, op VeryHigh, voor een adresbalkje van 8,5px. Op die
     grootte draagt de pilvorm met de drie stippen het browser-idee, niet het
     lettertype. Tabulaire cijfers houden de balk rustig. */
  font-family:var(--sans);font-variant-numeric:tabular-nums;
  font-size:8.5px;letter-spacing:.06em;color:rgba(236,234,224,.62);
  white-space:nowrap;overflow:hidden;}
.shot-page{color:var(--st,#241d16);}
.sp-nav{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;}
.sp-logo{font-family:var(--serif);font-weight:500;font-size:11px;letter-spacing:-.02em;}
.sp-links{display:flex;gap:6px;align-items:center;}
.sp-links i{width:16px;height:3px;border-radius:2px;background:currentColor;opacity:.25;}
.sp-btn{width:38px;height:12px;border-radius:6px;background:var(--sa,#B8F09A);}
.sp-hero{padding:14px 14px 12px;}
.sp-h1{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.02;letter-spacing:-.02em;max-width:14ch;}
.sp-h1 em{font-style:italic;color:var(--sa);}
.sp-lines{margin-top:7px;display:grid;gap:3px;}
.sp-lines i{height:3px;border-radius:2px;background:currentColor;opacity:.22;}
.sp-cta{margin-top:9px;display:flex;gap:5px;align-items:center;}
.sp-cta b{display:block;width:52px;height:14px;border-radius:7px;background:var(--sa);}
.sp-cta span{display:block;width:40px;height:14px;border-radius:7px;border:1px solid currentColor;opacity:.3;}
.sp-plate{position:relative;height:74px;margin:4px 14px 0;border-radius:6px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 80% 10%,var(--p1,transparent),transparent 60%),
    radial-gradient(100% 120% at 10% 90%,var(--p2,transparent),transparent 55%),
    var(--p0,#333);}
.sp-plate::after{content:"";position:absolute;inset:0;opacity:.25;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.sp-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;padding:8px 14px 14px;}
.sp-cards div{height:34px;border-radius:5px;background:var(--sc,rgba(0,0,0,.06));}
.sp-shop{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 14px 14px;}
/* .it here is the shop tile, not the global lime-italic accent — undo that rule */
.sp-shop .it{border-radius:6px;overflow:hidden;background:var(--sc,rgba(0,0,0,.06));padding-bottom:6px;color:inherit;font-style:normal;}
.sp-shop .it b{display:block;height:38px;background:var(--p0,#555);opacity:.85;}
.sp-shop .it i{display:block;height:3px;border-radius:2px;background:currentColor;opacity:.25;margin:5px 7px 0;width:60%;}

/* ---- hero composition: two shots, casually stacked ---- */
.hero-shots{position:relative;height:clamp(360px,30vw,470px);}
.hero-shots .shot{position:absolute;width:min(72%,330px);}
/* The two windows cascade instead of colliding: the front one starts below the
   headline of the one behind it, so nothing is ever cut through a word. */
.hero-shots .hs-1{right:30%;top:0;transform:rotate(-2.6deg);z-index:1;}
.hero-shots .hs-2{right:0;top:34%;z-index:2;transform:rotate(1.2deg);}
.js .hero-shots .shot{transition:transform .6s var(--ease);}
.hero-shots:hover .hs-1{transform:rotate(-3.4deg) translateY(-5px);}
.hero-shots:hover .hs-2{transform:rotate(1.6deg) translateY(-8px);}

/* ---- case grid: the work, shown ---- */
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,4.5vw,3.6rem) clamp(1.5rem,3.4vw,3rem);align-items:start;}
.case-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.case{display:block;color:inherit;position:relative;}
/* equal card heights: every mockup crops to the same frame so titles align */
.case .shot{height:clamp(220px,22vw,310px);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);}
.case-grid.cols-3 .case .shot{height:clamp(200px,19vw,260px);}
.case:hover .shot{transform:translateY(-8px);border-color:rgba(236,234,224,.28);box-shadow:0 40px 90px -30px rgba(0,0,0,.9);}
.case-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1.1rem;}
.case-meta h3,.case-meta h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem);letter-spacing:-.02em;line-height:1.05;transition:color .3s var(--ease);}
.case:hover .case-meta :is(h2,h3){color:var(--lime);}
/* Was een mono-uppercase labeltje in bleke grijstint ("SITE · B2B"), precies wat
   de merkregels verbieden. Draagt nu het domein: dat maakt van een plaatje een
   bewijsstuk dat de lezer zelf kan natrekken. */
.case-tag{font-size:.88rem;color:var(--muted);flex:none;}
.case>p{color:var(--muted);font-size:.97rem;line-height:1.55;max-width:calc(68 * var(--teken));margin-top:.45rem;}
/* editorial offset: the second column starts lower, like a pinboard */
@media (min-width:801px){
  .case-grid:not(.cols-3)>*:nth-child(2n){transform:translateY(clamp(1.5rem,4vw,3.5rem));}
  .case-grid:not(.cols-3){padding-bottom:clamp(1.5rem,4vw,3.5rem);}
}

/* ============================================================ PAPER BAND
   One inverted passage per page — the brand lime at full volume, ink text
   on top. The loud moment every dark page earns exactly once. Tokens flip
   so every child component adapts by itself. */
.paper{background:#B8F09A;color:#10140E;position:relative;
  --paper:#10140E;--paper-2:#18200F;--muted:#2C4224;--faint:#334C2A;
  --hair:rgba(16,20,14,.16);--hair-2:rgba(16,20,14,.28);--hair-3:rgba(16,20,14,.4);
  --lime:#1F3A17;--lime-soft:#2E4B24;--glow:rgba(31,58,23,.2);
  --ink:#ADE28F;--ink-1:#A5DC87;--ink-2:#9CD37E;--ink-3:#92C974;}
.paper .btn:not(.ghost){background:#10140E;border-color:#10140E;color:#B8F09A;}
.paper .btn:not(.ghost):hover{box-shadow:0 12px 36px -12px rgba(16,20,14,.55);}
.paper .btn.ghost{color:#10140E;}
.paper ::selection{background:#10140E;color:#B8F09A;}

/* ============================================================ BRAND BOARD
   The branding page's artifact: a merkbord — type specimen, palette,
   logo plate and stationery chip composed like a physical mood board. */
.bboard{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:10px;}
.bboard>*{border-radius:12px;border:1px solid var(--hair);overflow:hidden;}
.bb-type{grid-row:span 2;background:linear-gradient(165deg,var(--ink-1),var(--ink));padding:clamp(1.4rem,2.6vw,2.2rem);display:flex;flex-direction:column;justify-content:space-between;min-height:300px;}
.bb-type .aa{font-family:var(--serif);font-size:clamp(4.5rem,9vw,7.5rem);line-height:.9;letter-spacing:-.03em;color:var(--paper);}
.bb-type .aa i{color:var(--lime);}
.bb-type .bb-sub{font-size:.8rem;color:var(--muted);margin-top:1.4rem;}
.bb-pal{display:flex;min-height:96px;}
.bb-pal i{flex:1;position:relative;}
.bb-pal i::after{content:attr(data-c);position:absolute;left:8px;bottom:6px;font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;color:rgba(255,255,255,.55);}
.bb-pal i.lt::after{color:rgba(0,0,0,.45);}
.bb-logo{background:var(--ink-2);display:flex;align-items:center;justify-content:center;min-height:96px;padding:1.2rem;}
.bb-logo .sp-logo{font-size:clamp(1.2rem,2vw,1.6rem);color:var(--paper);}
/* small tilt on hover, like picking the board up */
.js .bboard{transition:transform .6s var(--ease);}
.bboard:hover{transform:rotate(-.4deg);}

/* ============================================================ SERP CARD
   The marketing page's artifact: the moment a local customer finds you
   first. Stylized search result — not a clone, a sketch of one. */
.serp{background:#F7F5EE;color:#1D201C;border-radius:14px;border:1px solid rgba(236,234,224,.14);
  box-shadow:0 24px 70px -28px rgba(0,0,0,.8);padding:clamp(1.1rem,2vw,1.5rem);max-width:520px;font-family:var(--sans);}
.serp-bar{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid rgba(29,32,28,.14);
  border-radius:999px;padding:.5rem .9rem;font-size:.85rem;color:#3A3E38;}
.serp-bar svg{flex:none;opacity:.55;}
.serp-hit{margin-top:1.5rem;padding:.9rem 1rem;border-radius:10px;background:#fff;border:1px solid rgba(29,32,28,.1);position:relative;}
.serp-hit .top{display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:#5F635B;}
.serp-hit .fav{width:18px;height:18px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;flex:none;}
.serp-hit .fav svg{width:10px;height:7px;}
.serp-hit :is(h3,h4){font-family:var(--sans);font-weight:500;font-size:1.02rem;color:#1A4B8F;margin-top:.45rem;}
.serp-hit p{font-size:.82rem;color:#4A4E47;line-height:1.5;margin-top:.25rem;}
.serp-hit .stars{color:#D98A2B;font-size:.8rem;letter-spacing:.1em;margin-top:.3rem;}
/* Onderschrift van het kaartje, geen badge: het zegt wat de mockup toont.
   Het hangt in de ruimte boven de kaart, daarom de ruimere marge hierboven. */
.serp-hit .pos{position:absolute;top:-1.35rem;right:2px;font-size:.74rem;color:#5F635B;}
.serp-ghost{margin-top:.6rem;padding:.75rem 1rem;border-radius:10px;background:rgba(255,255,255,.45);border:1px solid rgba(29,32,28,.07);}
.serp-ghost i{display:block;height:4px;border-radius:2px;background:rgba(29,32,28,.13);}
.serp-ghost i+i{margin-top:6px;width:70%;}

/* ============================================================ PLAKKENDE BALK
   Onder 1000px verdwijnt de navigatie achter de hamburger en staat er tussen
   de hero en de footer niets meer om op te drukken. De homepage is bijna
   7700px hoog: dat zijn tien schermen zonder één knop. Deze balk houdt bellen
   en het gesprek binnen duimbereik.

   Hij blijft weg zolang de heroknop in beeld staat (main.js zet dan
   .hero-cta-visible op de body), want dezelfde knop twee keer in één scherm
   leest als een fout. Zonder JavaScript staat de klasse er niet en is de balk
   dus meteen zichtbaar: dat is de veilige kant om op te falen. */
.callbar{display:none;}
@media (max-width:1000px){
  .callbar{
    display:flex;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:.6rem var(--pad);padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px));
    background:rgba(13,15,13,.94);
    backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
    border-top:1px solid var(--hair-2);
    transition:transform .3s var(--ease);
  }
  .callbar a{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:50px;padding:0 .9rem;border-radius:12px;font-size:1rem;font-weight:500;line-height:1.2;}
  /* De belknop draagt het nummer voluit in plaats van het woord "Bellen": op
     een telefoon was het nergens te lezen voor de voettekst, en wie het wil
     noteren, doorgeven of vanaf een vaste lijn bellen kwam er dus niet aan.
     Het hoorntje is eruit, want die 26 pixels zijn precies wat het nummer
     nodig heeft, en een nummer dat met +32 begint wijst zichzelf aan.
     Daarom ook flex 0 0 auto: de belknop neemt exact zijn eigen breedte en
     "Plan een gesprek" houdt de rest, zodat die de bredere van de twee blijft.
     Gemeten op de live pagina: 375px geeft 157 om 169, 360px geeft 157 om 154,
     allebei op één regel in een balk die 70px hoog blijft. */
  .callbar .cb-tel{flex:0 0 auto;padding:0 .75rem;font-variant-numeric:tabular-nums;
    border:1px solid var(--hair-3);color:var(--paper);}
  .callbar .cb-tel:hover,.callbar .cb-tel:focus-visible{border-color:var(--lime);color:var(--lime);}
  .callbar .cb-cta{background:var(--lime);color:#0b0d0b;}
  .callbar svg{width:18px;height:18px;flex:none;}
  /* heroknop nog in beeld, of het menu staat open: balk uit beeld schuiven */
  body.hero-cta-visible .callbar,
  body.nav-open .callbar{transform:translateY(110%);}
  /* Precies één "Plan een gesprek" per scherm. De balkknop in de koptekst en
     deze balk komen allebei op tegen het moment dat de heroknop wegscrolt, en
     dan stond dezelfde vraag twee keer tegelijk op een telefoonscherm. Onder
     1000px wint de balk: die ligt in duimbereik. Boven de vouw is de heroknop
     er nog, dus er valt niets weg. */
  body:not(.hero-cta-visible) .site-header .nav-cta{display:none;}
  /* de footer mag niet onder de balk verdwijnen */
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));}
  /* En wie met de tab-toets door de pagina gaat, mag niet op een knop landen
     die achter de balk zit (WCAG 2.4.11). Boven deed scroll-padding-top dat al
     voor de plakkende koptekst; dit is de tegenhanger onderaan. */
  html{scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom,0px));}
}
@media (prefers-reduced-motion:reduce){
  .callbar{transition:none;}
}

/* ============================================================ RESPONSIVE */
@media (max-width:1000px){
  .site-header .nav-links{display:none;}
  .site-header .nav-links.open{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;overflow-y:auto;overscroll-behavior:contain;
    /* Vult het scherm onder de balk. Als paneel-op-maat bleef de heroknop
       eronder zichtbaar, en dan stond "Plan een gesprek" er alsnog twee keer. */
    min-height:calc(100dvh - 74px);max-height:calc(100dvh - 74px);
    position:absolute;top:74px;left:0;right:0;background:var(--ink-1);border-bottom:1px solid var(--hair);
    padding:1.25rem var(--pad) 1.75rem;}
  .site-header .nav-links.open a.nl{font-size:1.15rem;padding:.5rem 0;}
  .site-header .nav-links.open .btn{margin-top:.75rem;}
  .site-header .nav-links.open .nav-tel{display:block;margin-top:.6rem;
    font-size:1.15rem;color:var(--lime);font-variant-numeric:tabular-nums;}
  .nav-bar{gap:.7rem;}
  .nav-cta{font-size:.82rem;padding:.62rem 1rem;}
  .menu-toggle{display:flex;}
  .hero-grid{grid-template-columns:1fr;align-items:start;}
  .hero-aside{max-width:520px;}
  .why-grid,.split,.form-grid,.region-grid,.bigcta-inner{grid-template-columns:1fr;}
  .bigcta-inner,.region-grid{align-items:start;}
  .proc-stair + .steps .step{margin-top:0 !important;}
  .feature-grid{grid-template-columns:1fr;}
  .compare-grid{grid-template-columns:1fr;}
  .svc .desc-wrap{margin-left:0;max-width:none;}
  .why .vals{grid-template-columns:repeat(2,1fr);}
  .why-head{font-size:clamp(2.6rem,9vw,4.4rem);}
  .foot-top{grid-template-columns:1fr 1fr;}
  .stat-row{grid-template-columns:1fr;gap:1.6rem;}
  .stat-row.promises .stat:nth-child(1) .n{font-size:clamp(3.6rem,16vw,5.5rem);}
  .contact-aside{border-left:0;padding-left:0;}
  .hero-aside .hero-shots{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding-bottom:2.6rem;}
  .hero-shots .shot{position:static;width:auto;transform:none !important;}
  .case-grid.cols-3{grid-template-columns:1fr 1fr;}
  .bboard{grid-template-columns:1fr 1fr;}
  .bb-type{grid-row:auto;grid-column:1/-1;min-height:220px;}
}
/* ---- De trap bestaat ook onder duizend pixels. De vier stappen worden daar
   een verticale klim: een haarlijn met limoenkleurige treden die één voor één
   ontsteken als ze in beeld komen. De bovengrens is 1000 en niet 640, want de
   liggende trap verdwijnt al bij 1000 (zie `.proc-stair` hierboven) en tussen
   641 en 1000 stond er anders alleen een raster met vier koppen, zonder één
   lijn die het merk draagt. Dat is precies tablet in portret. Eén kolom, want
   de rail loopt van stap naar stap en dat kan niet in twee kolommen. ---- */
@media (max-width:1000px){
  .steps{grid-template-columns:1fr;gap:1.9rem;}
  .step{padding-left:1.5rem;}
  .step::before{content:"";position:absolute;left:0;top:.35rem;bottom:-1.9rem;width:1px;background:var(--hair-2);}
  .step:last-child::before{content:none;}
  .step::after{content:"";position:absolute;left:-4px;top:.35rem;width:9px;height:9px;border-radius:50%;
    background:var(--lime);box-shadow:0 0 10px 1px var(--glow);}
  .js .step.reveal::after{opacity:0;transform:scale(.4);transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);}
  .js .step.reveal.in::after{opacity:1;transform:scale(1);}
}

@media (max-width:640px){
  .nav-cta{font-size:.76rem;padding:.55rem .85rem;}
  .brand .wordmark{font-size:1.18rem;}
  .vals,.why .vals{grid-template-columns:1fr;}
  .case-grid,.case-grid.cols-3{grid-template-columns:1fr;}
  .hero-aside .hero-shots{grid-template-columns:1fr;}
  /* `.shot.is-photo` verderop zet display:flex zonder media query en heeft
     evenveel gewicht als `.hero-shots .hs-2`, dus die won gewoon op volgorde
     en dit stond hier dood sinds de echte klantscreenshots erbij kwamen. Eén
     klasse erbij en de telefoon houdt weer één venster in plaats van twee. */
  .hero-shots .shot.hs-2{display:none;}
  .bb-pal i::after{content:none;}
  .compare-grid{gap:2.4rem;}
  .foot-top{grid-template-columns:1fr;gap:1.8rem;}
  .sec-head{flex-direction:column;align-items:flex-start;}
  .stat-row{grid-template-columns:1fr;}
}

/* ============================================================ TEXT POLISH
   Typographic finish: balanced headings so short titles never leave one
   word stranded, pretty body wraps so paragraphs avoid orphan last lines,
   and tabular figures so numbers and meta hold their column. Progressive
   enhancement — inert where unsupported, no layout risk. */
/* De koppenlijst stond op h4 terwijl de pagina's h3 gebruiken (.step, .feature
   en .contact-aside dragen allemaal een h3). Daardoor liep de helft van deze
   koppen zonder balance. Beide niveaus staan er nu in. */
.display,.h-xl,.h-l,.h-m,
.sec-head .sh-title,.svc h3,.why-head,.step :is(h3,h4),.feature :is(h3,h4),
.cmp .cmp-head h3,.contact-aside :is(h3,h4),.faq summary,
.val h3,.principle h3,.pl-name,
.case-meta h2,.case-meta h3,.work h2,.work h3,
.ua-phrase,.post-card h2{text-wrap:balance;}

.lead,.svc .desc,.step p,.feature p,.faq p,.val p,
.why .why-note,.sec-head .sh-aside,.hero-cta .note,
.foot-col p,.stat .l,.case>p,.work p,.cmp li,
.checklist li,.post-card p,.principle p,.pl-desc,
.pricenote,.argument,.form-note,.field-error{text-wrap:pretty;}

.mono,.stat .n,.delta,.page-numbers,.work-top{font-variant-numeric:tabular-nums;}

/* ============================================================ UTILITIES
   Repeating one-off spacing used to sit in style="" attributes on the pages.
   Class selectors are doubled so they keep the same weight the inline rule
   had, and this block stays last so it wins from the component defaults. */
.u-mt-1.u-mt-1{margin-top:1rem;}
.u-mt-11.u-mt-11{margin-top:1.1rem;}
.u-mt-12.u-mt-12{margin-top:1.2rem;}
.u-mt-13.u-mt-13{margin-top:1.3rem;}
.u-mt-16.u-mt-16{margin-top:1.6rem;}
.u-mt-18.u-mt-18{margin-top:1.8rem;}
.u-mb-24.u-mb-24{margin-bottom:2.4rem;}
.u-pt-0.u-pt-0{padding-top:0;}
.u-pt-band.u-pt-band{padding-top:clamp(3rem,6vw,5rem);}
.u-rule-top.u-rule-top{border-top:1px solid var(--hair);}
.u-nudge.u-nudge{margin-left:.4rem;align-self:center;}
.u-narrow.u-narrow{max-width:16ch;}
.u-inline-cta.u-inline-cta{display:inline-block;margin-top:1.6rem;}
.u-lead.u-lead{max-width:calc(70 * var(--teken));margin-top:1.4rem;color:var(--paper-2);font-size:1.05rem;line-height:1.7;}
.u-note.u-note{margin-top:1rem;max-width:calc(71 * var(--teken));color:var(--paper-2);}

/* ============================================================ CASE PHOTOS
   Real client screenshots inside the same browser frame the drawn mockups
   use. The chrome bar keeps its height, the image takes the rest. */
.shot.is-photo{display:flex;flex-direction:column;background:var(--ink-2);}
.shot.is-photo img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:top center;display:block;}

/* A row of client logos: the work we can show without a full case. */
.logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(2rem,5vw,4rem);
  margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:clamp(2rem,4vw,2.8rem);border-top:1px solid var(--hair);}
.logo-row img{height:38px;width:auto;opacity:.55;filter:grayscale(1);
  transition:opacity var(--t-base) var(--ease),filter var(--t-base) var(--ease);}
.logo-row a:hover img,.logo-row a:focus-visible img{opacity:1;filter:none;}
.logo-row .lr-label{font-size:.9rem;color:var(--muted);max-width:calc(34 * var(--teken));}
.u-mt-band.u-mt-band{margin-top:clamp(1.6rem,3vw,2.4rem);}

/* ============================================================ HEADER CTA
   De heroknop roept al "Plan een gesprek". Diezelfde woorden een tweede keer in
   de balk, in hetzelfde scherm, leest als een fout: het was eerst opgelost door
   de balkknop ingetogen te maken, maar een andere kleur haalt de herhaling er
   niet uit, want je leest twee keer hetzelfde. De balkknop blijft nu helemaal
   weg zolang de heroknop in beeld staat, en schuift binnen zodra die eronder
   verdwijnt en de balk de enige weg naar contact wordt.

   Zonder JavaScript, en op pagina's zonder heroknop (404, de juridische
   pagina's), staat hij er gewoon meteen: de klasse komt uit main.js. */
.js .site-header.cta-idle .nav-cta{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);}
/* Met het mobiele menu open moet hij er wél staan: in dat menu zit geen
   Contact-item, dus zonder deze regel heeft iemand die bovenaan het menu opent
   geen enkele weg naar contact. */
.js .site-header.cta-idle .nav-links.open ~ .nav-cta{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
.site-header:not(.scrolled) .nav-cta{background:transparent;color:var(--paper);border-color:var(--hair-2);}
.site-header:not(.scrolled) .nav-cta:hover{border-color:var(--lime);color:var(--lime);box-shadow:none;}
.js .nav-cta{transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),
  transform .25s var(--ease),box-shadow .35s var(--ease),opacity .3s var(--ease),visibility .3s var(--ease);}

/* ============================================================ TIKDOELEN
   Op een toestel zonder muis moet alles wat je aanraakt minstens 44 pixels hoog
   zijn, anders mis je hem met een duim. Deze regels gelden alleen daar, zodat
   het strakke ritme op een scherm met muis blijft zoals het is. Links midden in
   een lopende zin vallen buiten de regel en blijven dus met rust. */
@media (hover:none){
  .nav-cta,.faq summary,.nav-links .nl{min-height:44px;}
  .nav-links .nl{display:flex;align-items:center;}
  .brand,.mail,.u-inline-cta.u-inline-cta,
  .foot-region .rg :is(span,a),
  .foot-bottom .fb-legal a,
  .foot-col>a[href]{display:inline-flex;align-items:center;min-height:44px;}
}

/* ============================================================ LEGAL PROSE
   Privacyverklaring en cookiebeleid: lange lopende tekst die vooral leesbaar
   moet zijn. Smalle maat, rustige koppen, geen sierwerk. */
.legal{max-width:calc(70 * var(--teken));padding-bottom:clamp(3rem,7vw,6rem);}
.legal .lead{color:var(--paper);font-size:1.12rem;line-height:1.6;
  padding-bottom:1.6rem;border-bottom:1px solid var(--hair);margin-bottom:2.2rem;}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);
  letter-spacing:-.02em;line-height:1.15;margin:2.6rem 0 .8rem;}
.legal h3{font-family:var(--sans);font-weight:500;font-size:1.02rem;margin:1.6rem 0 .4rem;color:var(--paper);}
.legal p{color:var(--paper-2);font-size:1rem;line-height:1.7;margin-bottom:1rem;}
.legal ul{margin:0 0 1.2rem;padding-left:1.1rem;}
.legal li{color:var(--paper-2);font-size:1rem;line-height:1.7;margin-bottom:.5rem;}
.legal li::marker{color:var(--lime-deep);}
.legal a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--hair-3);transition:text-decoration-color .25s var(--ease),color .25s var(--ease);}
.legal a:hover{color:var(--lime);text-decoration-color:var(--lime);}
.legal>p:last-child{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--hair);
  color:var(--faint);font-size:.9rem;}

/* Diezelfde tekst staat in WordPress in de editor en komt door `page.php`
   naar buiten als `.entry-content` binnen `wrap-wide`, dus zonder de schil
   hierboven. Live liep een alinea daar over de volle 1256px: 163 tekens op de
   privacyverklaring, 161 op het cookiebeleid. De maat staat op de tekst zelf
   en niet op de omhulling, want `--teken` rekent in em en de kinderen hebben
   niet allemaal dezelfde tekengrootte. De inleiding houdt de 71 tekens die
   `.lead` overal op de site heeft. */
.entry-content :is(p,li,blockquote){max-width:calc(70 * var(--teken));}
.entry-content .lead{max-width:calc(71 * var(--teken));}

/* de juridische links onderaan de footer */
.foot-bottom .fb-legal{display:flex;gap:1.2rem;flex-wrap:wrap;}

/* Bijschrift dat alleen voor schermlezers en zoekmachines bestaat: het beeld
   spreekt visueel voor zich, maar een machine leest liever een zin. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.steps{list-style:none;margin:0;padding:0;}