/* ==========================================================================
   Kouwenberg Schilderwerken - design system
   Merk: zwart/wit vakmanschap met de lichtblauwe penseelstreek uit het logo.
   Volgorde: tokens -> reset -> typografie -> layout -> componenten -> utilities
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* merkkleuren, afgeleid uit het logo (#6ED0F5) */
  --brand-100:#EAF7FE;
  --brand-200:#C7EBFB;
  --brand-300:#6ED0F5;   /* penseelstreek uit het logo */
  --brand-500:#22A7DF;
  --brand-600:#1187BC;
  --brand-700:#0B6389;

  /* inkt = het zwart van het woordmerk */
  --ink:#0E1A22;
  --ink-800:#152632;
  --ink-700:#243845;
  --ink-500:#4A5C68;
  --ink-400:#6E7F8B;
  --ink-300:#9AA8B1;

  --paper:#FFFFFF;
  --sand:#F5F7F8;
  --sand-2:#EBEFF1;
  --line:#DFE5E9;
  --line-soft:#EDF1F3;

  --ok:#1E7D5A;

  /* typografie */
  --font-head:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fs-hero:clamp(2.5rem,1.4rem + 4.6vw,4.5rem);
  --fs-h1:clamp(2.1rem,1.4rem + 2.9vw,3.4rem);
  --fs-h2:clamp(1.7rem,1.2rem + 2vw,2.6rem);
  --fs-h3:clamp(1.2rem,1.05rem + .6vw,1.5rem);
  --fs-lead:clamp(1.05rem,1rem + .35vw,1.25rem);

  /* ruimte en vorm */
  --wrap:1220px;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --sec:clamp(4rem,7vw,7rem);
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;

  --sh-1:0 1px 2px rgba(14,26,34,.06), 0 2px 8px rgba(14,26,34,.05);
  --sh-2:0 12px 28px -12px rgba(14,26,34,.22), 0 2px 6px rgba(14,26,34,.05);
  --sh-3:0 28px 60px -24px rgba(14,26,34,.35);

  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:76px;
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  color:var(--ink-700);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand-700);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brand-600)}
ul,ol{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-head);color:var(--ink);line-height:1.1;font-weight:700;letter-spacing:-.015em}
p{margin:0}
:focus-visible{outline:3px solid var(--brand-500);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:.85rem 1.25rem;border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.skip:focus{left:0;color:#fff}

/* --- 3. Layout ----------------------------------------------------------- */
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--sand{background:var(--sand)}
.section--ink{background:var(--ink);color:#C3CED6}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.grid{display:grid;gap:clamp(1rem,2.2vw,1.75rem)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* --- 4. Typografie ------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  margin:0 0 1rem;font-family:var(--font-head);font-size:.8rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-700);
}
.eyebrow::before{content:"";width:28px;height:4px;border-radius:2px;background:var(--brand-300)}
.eyebrow--light{color:var(--brand-300)}

.h-hero{font-size:var(--fs-hero);font-weight:800;font-variation-settings:"wdth" 92;letter-spacing:-.03em}
h1,.h1{font-size:var(--fs-h1);font-weight:800;font-variation-settings:"wdth" 94;letter-spacing:-.025em}
h2,.h2{font-size:var(--fs-h2);font-weight:800;font-variation-settings:"wdth" 96;letter-spacing:-.02em}
h3,.h3{font-size:var(--fs-h3);font-weight:700}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-500)}
.section--ink .lead{color:#9FB0BB}
.mark{background:linear-gradient(transparent 62%,var(--brand-200) 62%);padding-inline:.08em}
.section-head{max-width:64ch;margin-bottom:clamp(2rem,4vw,3.25rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head p{margin-top:1rem}

.prose{max-width:70ch}
.prose h2{margin-top:2.6rem}
.prose h3{margin-top:2rem}
.prose p,.prose ul,.prose ol{margin-top:1rem}
.prose ul li,.prose ol li{position:relative;padding-left:1.75rem;margin-top:.55rem}
.prose ul li::before{
  content:"";position:absolute;left:.1rem;top:.62em;width:9px;height:9px;border-radius:2px;
  background:var(--brand-300);transform:rotate(45deg);
}
.prose ol{counter-reset:p}
.prose ol li{counter-increment:p}
.prose ol li::before{
  content:counter(p);position:absolute;left:0;top:.12em;width:1.4rem;height:1.4rem;
  display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;
  font-size:.72rem;font-weight:700;font-family:var(--font-head);line-height:1;
}

/* --- 5. Knoppen ---------------------------------------------------------- */
.btn{
  --btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.5rem;border:1.5px solid var(--btn-bd);border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-head);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:var(--btn-fg)}
.btn:active{transform:translateY(0)}
.btn--primary{--btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:var(--ink)}
.btn--accent{--btn-bg:var(--brand-300);--btn-fg:var(--ink);--btn-bd:var(--brand-300)}
.btn--accent:hover{--btn-bg:var(--brand-500)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn--ghost:hover{--btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:var(--ink)}
.btn--ghost-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.35)}
.btn--ghost-light:hover{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.btn--lg{padding:1rem 1.9rem;font-size:1.02rem}
.btn .ico{width:18px;height:18px;fill:currentColor}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-head);
  font-weight:700;text-decoration:none;color:var(--ink);
}
.link-arrow::after{content:"\2192";transition:transform .18s var(--ease)}
.link-arrow:hover{color:var(--brand-700)}
.link-arrow:hover::after{transform:translateX(4px)}

/* --- 6. Topbar en header ------------------------------------------------- */
.topbar{background:var(--ink);color:#8FA1AD;font-size:.83rem}
.topbar__in{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;align-items:center;justify-content:space-between;padding-block:.55rem}
.topbar__claim{display:flex;align-items:center;gap:.55rem;margin:0;min-width:0}
.topbar .dot{width:7px;height:7px;border-radius:50%;background:var(--brand-300);box-shadow:0 0 0 3px rgba(110,208,245,.2);flex:0 0 auto}
.topbar__meta{display:flex;gap:1.25rem}
.topbar a{color:#C3CED6;text-decoration:none}
.topbar a:hover{color:var(--brand-300)}

.site-header{
  position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .25s var(--ease);
}
/* backdrop-filter maakt van dit element een containing block voor
   position:fixed-kinderen. Op mobiel hangt het menupaneel daaraan, dus daar
   mag het niet staan - anders wordt het paneel zo groot als de headerbalk. */
@media (min-width:901px){
  .site-header{background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px)}
}
.site-header.is-stuck{box-shadow:0 6px 24px -14px rgba(14,26,34,.45)}
.site-header__in{display:flex;align-items:center;gap:1.25rem;min-height:var(--header-h)}
.logo{flex:0 0 auto;display:block}
.logo img{height:42px;width:auto}

.nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem}
.nav__list{display:flex;align-items:center;gap:.1rem}
.nav__list > li{position:relative}
.nav__list > li > a{
  display:block;padding:.6rem .7rem;border-radius:var(--r-sm);
  font-family:var(--font-head);font-weight:600;font-size:.93rem;color:var(--ink-700);text-decoration:none;
  transition:color .15s var(--ease),background .15s var(--ease);
}
.nav__list > li > a:hover{color:var(--ink);background:var(--sand)}
.nav__cta{display:flex;align-items:center;gap:.6rem}
.nav__cta .btn{padding:.62rem 1.1rem;font-size:.88rem}

/* actieve pagina markeren via body[data-page] */
body[data-page="index"]        [data-nav="index"],
body[data-page="diensten"]     [data-nav="diensten"],
body[data-page="buitenschilderwerk"] [data-nav="diensten"],
body[data-page="binnenschilderwerk"] [data-nav="diensten"],
body[data-page="houtrot"]      [data-nav="diensten"],
body[data-page="nieuwbouw"]    [data-nav="diensten"],
body[data-page="particulieren"][data-nav="voor-wie"],
body[data-page="aannemers"]    [data-nav="voor-wie"],
body[data-page="vve"]          [data-nav="voor-wie"],
body[data-page="vastgoed"]     [data-nav="voor-wie"],
body[data-page="werkwijze"]    [data-nav="werkwijze"],
body[data-page="projecten"]    [data-nav="projecten"],
body[data-page="over-ons"]     [data-nav="over-ons"],
body[data-page="contact"]      [data-nav="contact"]{
  color:var(--ink);box-shadow:inset 0 -3px 0 var(--brand-300);
}

.sub{
  position:absolute;top:calc(100% + 10px);left:-.5rem;min-width:346px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);
  padding:.6rem;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.is-open .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{
  display:block;padding:.6rem .8rem;border-radius:var(--r-sm);text-decoration:none;color:var(--ink-700);
  transition:background .15s var(--ease);
}
.sub a:hover{background:var(--sand)}
.sub a strong{display:block;font-family:var(--font-head);color:var(--ink);font-size:.95rem;font-weight:700}
.sub a span{display:block;font-size:.82rem;color:var(--ink-400);line-height:1.45}
.sub__foot{margin:.4rem .8rem .5rem;padding-top:.7rem;border-top:1px solid var(--line-soft)}
.sub__foot a{padding:0;font-family:var(--font-head);font-weight:700;font-size:.88rem;color:var(--brand-700);text-decoration:none}
.sub-toggle{display:none}

.burger{
  display:none;align-items:center;gap:.6rem;margin-left:auto;background:none;border:0;
  padding:.5rem;cursor:pointer;font-family:var(--font-head);font-weight:700;color:var(--ink);
}
.burger__box{position:relative;width:26px;height:16px;display:block}
.burger__box span,.burger__box::before,.burger__box::after{
  content:"";position:absolute;left:0;width:100%;height:2.5px;border-radius:2px;background:var(--ink);
  transition:transform .25s var(--ease),opacity .2s var(--ease);
}
.burger__box::before{top:0}
.burger__box span{top:6.75px}
.burger__box::after{bottom:0}
.burger[aria-expanded="true"] .burger__box::before{transform:translateY(6.75px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box span{opacity:0}
.burger[aria-expanded="true"] .burger__box::after{transform:translateY(-6.75px) rotate(-45deg)}

/* --- 7. Hero ------------------------------------------------------------- */
.hero{position:relative;background:var(--ink);color:#C3CED6;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(80% 90% at 85% 5%,rgba(110,208,245,.24),transparent 62%),
    radial-gradient(60% 70% at 0% 100%,rgba(17,135,188,.20),transparent 60%);
}
.hero__brush{
  position:absolute;right:-6%;top:22%;width:min(760px,72%);opacity:.14;z-index:0;pointer-events:none;
  transform:rotate(-6deg);
}
.hero__in{position:relative;z-index:1;display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  padding-block:clamp(3.5rem,8vw,6.5rem);
}
.hero__title{color:#fff;margin-bottom:1.25rem}
.hero__title em{font-style:normal;color:var(--brand-300)}
.hero p.lead{max-width:52ch}
.hero__points{display:flex;flex-wrap:wrap;gap:.5rem .5rem;margin-top:1.6rem}
.hero__points li{
  display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);font-size:.85rem;color:#D5DEE4;background:rgba(255,255,255,.04);
}
.hero__points li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-300)}
/* Sterrenregel onder de knoppen: het cijfer staat zo al in het eerste scherm,
   en de regel springt naar de reviewsectie verderop de pagina. */
.hero__rating{
  display:inline-flex;align-items:center;gap:.6rem;margin:-.35rem 0 1.2rem;
  font-size:.88rem;color:#C2D0D9;text-decoration:none;
  transition:color .18s var(--ease);
}
.hero__rating strong{font-family:var(--font-head);font-weight:800;color:#fff}
.hero__rating .review__stars svg{width:16px;height:16px;fill:var(--brand-300)}
.hero__rating .review__stars--44 svg:last-child{fill:rgba(255,255,255,.22)}
.hero__rating:hover{color:#fff}
.hero__rating:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
.hero__figure{position:relative}
.hero__card{
  position:absolute;left:-1.5rem;bottom:-1.5rem;background:#fff;color:var(--ink);
  border-radius:var(--r);padding:1.1rem 1.35rem;box-shadow:var(--sh-3);max-width:250px;
}
.hero__card strong{display:block;font-family:var(--font-head);font-size:1.9rem;line-height:1;color:var(--ink)}
.hero__card span{display:block;font-size:.85rem;color:var(--ink-500);margin-top:.3rem}
/* Linksonder in de hero ligt de witte kaart hierboven al over de foto heen.
   Het bijschrift uit data-label staat daar standaard ook, dus dat schuift in
   de hero naar de bovenkant; anders liggen de twee over elkaar. */
.hero__figure .ph::after{top:1rem;bottom:auto}

/* --- 8. Beeld-placeholders ---------------------------------------------- */
/* Vervang <div class="ph"> door <img class="ph-img"> zodra de fotografie er is. */
.ph{
  position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3;
  background:
    radial-gradient(120% 120% at 78% 12%,rgba(110,208,245,.55),transparent 58%),
    linear-gradient(158deg,#20323F 0%,#0E1A22 70%);
  box-shadow:var(--sh-3);
}
.ph::before{
  content:"";position:absolute;inset:-10%;
  background:url("../img/brush.svg") center/cover no-repeat;
  opacity:.3;mix-blend-mode:screen;
}
.ph::after{
  content:attr(data-label);position:absolute;left:1rem;bottom:1rem;
  padding:.42rem .8rem;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);
  font-family:var(--font-head);font-size:.76rem;font-weight:700;letter-spacing:.01em;
  max-width:calc(100% - 2rem);
}
.ph--tall{aspect-ratio:3/4}
.ph--wide{aspect-ratio:16/9}
.ph--square{aspect-ratio:1}
.ph--light{background:radial-gradient(120% 120% at 78% 12%,rgba(110,208,245,.9),transparent 60%),linear-gradient(158deg,#DCE6EC,#F2F5F7)}
.ph--light::after{background:var(--ink);color:#fff}
/* Zodra er een foto in het vlak zit: de decoratieve penseeltextuur eruit,
   de foto vult het vlak en behoudt de vaste beeldverhouding. Het labeltje
   uit data-label blijft staan als bijschrift. */
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph.has-photo::before{display:none}
.ph.has-photo{background:var(--sand-2)}
.ph-img{border-radius:var(--r-lg);box-shadow:var(--sh-3);width:100%;object-fit:cover}

/* --- 9. USP-balk --------------------------------------------------------- */
.usps{border-bottom:1px solid var(--line-soft);background:var(--paper)}
.usps__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line-soft)}
.usps__item{background:var(--paper);padding:1.6rem clamp(1rem,2vw,1.75rem)}
.usps__item h3{font-size:1rem;margin-bottom:.3rem}
.usps__item p{font-size:.88rem;color:var(--ink-400);line-height:1.5}
.usps__item svg{width:26px;height:26px;margin-bottom:.75rem;fill:none;stroke:var(--brand-500);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* --- 10. Kaarten --------------------------------------------------------- */
.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.4rem,2.4vw,1.9rem);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--brand-200)}
.card h3{
  margin-bottom:.6rem;font-size:clamp(1.15rem,1rem + .45vw,1.35rem);
  hyphens:auto;overflow-wrap:break-word;
}
.card p{color:var(--ink-500);font-size:.95rem}
.card__num{
  font-family:var(--font-head);font-size:.78rem;font-weight:700;letter-spacing:.12em;
  color:var(--brand-600);display:block;margin-bottom:.9rem;
}
.card__ico{
  width:46px;height:46px;border-radius:12px;background:var(--brand-100);display:grid;place-items:center;margin-bottom:1.1rem;
}
.card__ico svg{width:24px;height:24px;fill:none;stroke:var(--brand-700);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card__link{margin-top:1.1rem;display:inline-flex}
.card--link{display:flex;flex-direction:column}
.card--link .card__link{margin-top:auto;padding-top:1.1rem}
.card a.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}

.card--feature{background:var(--ink);border-color:var(--ink);color:#B9C6CE}
.card--feature h3{color:#fff}
.card--feature p{color:#9FB0BB}
.card--feature .card__ico{background:rgba(110,208,245,.14)}
.card--feature .card__ico svg{stroke:var(--brand-300)}
.card--feature .link-arrow{color:var(--brand-300)}

/* --- 11. Split-secties --------------------------------------------------- */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.split--media-first .split__media{order:-1}
.split__body h2{margin-bottom:1rem}
.checklist{margin-top:1.6rem;display:grid;gap:.7rem}
.checklist li{position:relative;padding-left:2rem;font-size:.97rem}
.checklist li::before{
  content:"";position:absolute;left:0;top:.28em;width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--brand-100);
}
.checklist li::after{
  content:"";position:absolute;left:.42rem;top:.55em;width:.42rem;height:.72rem;
  border:solid var(--brand-700);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.section--ink .checklist li::before{background:rgba(110,208,245,.16)}
.section--ink .checklist li::after{border-color:var(--brand-300)}

/* --- 12. Stappen --------------------------------------------------------- */
.steps{counter-reset:s;display:grid;gap:0}
.steps__item{
  counter-increment:s;position:relative;padding:1.75rem 0 1.75rem 4.5rem;border-top:1px solid var(--line);
}
.steps__item:last-child{border-bottom:1px solid var(--line)}
.steps__item::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.75rem;
  font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:var(--brand-300);
  font-variation-settings:"wdth" 88;
}
.steps__item h3{margin-bottom:.4rem}
.steps__item p{color:var(--ink-500)}
.section--ink .steps__item{border-color:rgba(255,255,255,.12)}
.section--ink .steps__item p{color:#9FB0BB}

/* --- 13. Cijfers --------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.stats__item strong{
  display:block;font-family:var(--font-head);font-size:clamp(2.25rem,1.4rem + 2.6vw,3.4rem);
  font-weight:800;line-height:1;color:var(--ink);font-variation-settings:"wdth" 88;letter-spacing:-.03em;
}
.section--ink .stats__item strong{color:#fff}
.stats__item span{display:block;margin-top:.55rem;font-size:.92rem;color:var(--ink-400)}
.section--ink .stats__item span{color:#8FA1AD}
.stats__item em{color:var(--brand-300);font-style:normal}

/* --- 14. Reviews --------------------------------------------------------- */
/* De kaarten staan op een zandkleurige sectie, zodat wit beeld geeft. Ze zijn
   even hoog en de naamregel hangt onderaan vast (margin-top:auto), zodat drie
   reviews van heel verschillende lengte toch op een lijn eindigen. */
.reviews{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.review{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.6rem,2.6vw,2.15rem);
  box-shadow:0 1px 2px rgba(14,26,34,.05);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.review:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
/* Aanhalingsteken als watermerk, half buiten de kaart en daardoor bijgesneden. */
.review::after{
  content:"\201D";position:absolute;top:-.34em;right:.12em;pointer-events:none;
  font-family:var(--font-head);font-weight:800;font-size:7.5rem;line-height:1;
  color:var(--brand-300);opacity:.22;
}
.review__head{display:flex;align-items:center;gap:.6rem;margin-bottom:1.05rem}
.review__stars{display:flex;gap:3px}
.review__stars svg{width:19px;height:19px;fill:var(--brand-500)}
.review__score{font-family:var(--font-head);font-weight:800;font-size:.92rem;color:var(--ink)}
.review__text{
  position:relative;z-index:1;margin:0;
  font-size:1.01rem;line-height:1.68;color:var(--ink-700);
}
.review__who{
  display:flex;align-items:center;gap:.9rem;
  margin-top:auto;padding-top:1.5rem;
  border-top:1px solid var(--line-soft);
}
.review__avatar{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:1.1rem;
}
.review:nth-child(2) .review__avatar{background:var(--brand-700)}
.review:nth-child(3) .review__avatar{background:var(--brand-300);color:var(--ink)}
.review__name{display:grid;gap:.15rem;min-width:0}
.review__name strong{
  font-family:var(--font-head);font-weight:700;font-size:.97rem;line-height:1.25;color:var(--ink);
}
.review__name span{font-size:.82rem;line-height:1.4;color:var(--ink-400)}

.rating-badge{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:1.4rem;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1.15rem;font-size:.92rem;color:var(--ink-500);
  box-shadow:0 1px 2px rgba(14,26,34,.05);
}
.rating-badge strong{font-family:var(--font-head);font-size:1.06rem;color:var(--ink)}
/* Het profiel staat op 4,4. De vijfde ster blijft daarom leeg: liever iets
   te bescheiden getoond dan te gunstig. Het cijfer ernaast is precies. */
.review__stars--44 svg:last-child{fill:var(--line)}

.review-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 1.75rem;margin-top:clamp(1.5rem,3vw,2.25rem);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.15rem,2vw,1.6rem) clamp(1.35rem,2.4vw,2rem);
}
.review-cta p{margin:0;max-width:58ch;color:var(--ink-500);font-size:.98rem}

/* Compacte reviewbalk, bedoeld om op vrijwel elke pagina mee te lopen. De kaart
   heeft een eigen lichte achtergrond in het blauw van de penseelstreek, zodat
   hij zowel op een witte als op een zandkleurige sectie opvalt zonder dat het
   een tweede reviewsectie wordt. Opbouw: cijfer, citaat, knop. */
.reviewbar{padding-block:clamp(1.5rem,3.2vw,2.5rem)}
.reviewbar__in{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1rem,2.6vw,2.1rem);
  background:linear-gradient(135deg,var(--brand-100),#fff 62%);
  border:1px solid var(--brand-200);border-radius:var(--r);
  padding:clamp(1.2rem,2.4vw,1.75rem) clamp(1.3rem,2.8vw,2.1rem);
}
.reviewbar__score{display:grid;justify-items:center;gap:.4rem;text-align:center}
.reviewbar__num{
  font-family:var(--font-head);font-weight:800;font-size:2.25rem;line-height:1;color:var(--ink);
}
.reviewbar .review__stars svg{width:17px;height:17px;fill:var(--brand-500)}
.reviewbar .review__stars--44 svg:last-child{fill:var(--brand-200)}
.reviewbar__meta{font-size:.78rem;line-height:1.35;color:var(--ink-400);max-width:9.5rem}
.reviewbar__quote{
  margin:0;min-width:0;display:grid;gap:.85rem;
  padding-left:clamp(1rem,2.4vw,2rem);border-left:1px solid var(--brand-200);
}
.reviewbar__quote p{
  margin:0;font-family:var(--font-head);font-weight:600;color:var(--ink);
  font-size:clamp(1rem,.94rem + .25vw,1.16rem);line-height:1.5;
}
.reviewbar__who{display:flex;align-items:center;gap:.7rem}
.reviewbar__who .review__avatar{width:38px;height:38px;font-size:.95rem}
.review__avatar--b{background:var(--brand-700)}
.review__avatar--c{background:var(--brand-300);color:var(--ink)}
.reviewbar__cta{white-space:nowrap}

/* Smaller dan dit past de balk niet meer naast elkaar. Alles onder elkaar, en
   de cijferregel als flexrij die mag afbreken: anders duwt hij de kaart breder
   dan het scherm. */
@media (max-width:780px){
  .reviewbar__in{grid-template-columns:minmax(0,1fr);justify-items:start}
  .reviewbar__score{
    display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;text-align:left;
  }
  .reviewbar__meta{max-width:none}
  .reviewbar__quote{
    min-width:0;width:100%;
    padding-left:0;padding-top:1.1rem;border-left:0;border-top:1px solid var(--brand-200);
  }
}

/* --- 15. Accordeon (FAQ) ------------------------------------------------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  background:none;border:0;padding:1.35rem 0;text-align:left;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--ink);
}
.acc__btn:hover{color:var(--brand-700)}
.acc__sign{position:relative;flex:0 0 auto;width:22px;height:22px;margin-top:.15rem}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--brand-600);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.acc__sign::before{width:14px;height:2px}
.acc__sign::after{width:2px;height:14px}
.acc__btn[aria-expanded="true"] .acc__sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc__panel{overflow:hidden;height:0;transition:height .28s var(--ease)}
.acc__panel > div{padding-bottom:1.4rem;color:var(--ink-500);max-width:74ch}
.acc__panel p + p{margin-top:.8rem}

/* --- 16. Voor/na-schuif -------------------------------------------------- */
.compare{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;
  box-shadow:var(--sh-3);cursor:ew-resize;user-select:none;
  /* pan-y en niet none: verticaal scrollen blijft werken als de vinger
     toevallig op de schuif landt. */
  touch-action:pan-y;
}
.compare__layer{position:absolute;inset:0}
.compare__layer.is-after{clip-path:inset(0 0 0 var(--pos,50%))}
.compare__tag{
  position:absolute;top:1rem;padding:.35rem .8rem;border-radius:999px;background:rgba(14,26,34,.78);
  color:#fff;font-family:var(--font-head);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.compare__tag--l{left:1rem}
.compare__tag--r{right:1rem}
.compare__handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-50%);
  box-shadow:0 0 0 1px rgba(14,26,34,.15);
}
.compare__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-2);display:grid;place-items:center;
}
.compare__grip::before{content:"\2194";font-size:1.1rem;color:var(--ink);font-weight:700}
.compare input[type="range"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* --- 17. Galerij --------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filters button{
  padding:.5rem 1.05rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--ink-700);cursor:pointer;
  transition:all .18s var(--ease);
}
.filters button:hover{border-color:var(--ink-300)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(1rem,2vw,1.5rem)}
.gallery__item{position:relative}
.gallery__item[hidden]{display:none}
.gallery__cap{margin-top:.85rem}
.gallery__cap h3{font-size:1.02rem}
.gallery__cap p{font-size:.87rem;color:var(--ink-400);margin-top:.2rem}
.pill{
  display:inline-block;font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-700);background:var(--brand-100);border-radius:999px;
  padding:.22rem .6rem;margin-bottom:.5rem;
}

/* --- 18. Pagina-hero (subpagina's) --------------------------------------- */
.page-hero{background:var(--ink);color:#B9C6CE;position:relative;overflow:hidden}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 100% at 88% 0%,rgba(110,208,245,.22),transparent 60%);
}
.page-hero__in{position:relative;padding-block:clamp(2.5rem,6vw,4.5rem);max-width:70ch}
.page-hero h1{color:#fff;margin-bottom:1rem}
.page-hero .lead{color:#9FB0BB}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.82rem;margin-bottom:1.5rem;color:#7E919E}
.breadcrumbs a{color:#9FB0BB;text-decoration:none}
.breadcrumbs a:hover{color:var(--brand-300)}
.breadcrumbs li + li::before{content:"/";margin-right:.4rem;color:#4B5D69}
.breadcrumbs li{display:inline-flex;gap:.4rem}

/* --- 19. CTA-band -------------------------------------------------------- */
.band{background:var(--ink-800);color:#B9C6CE;position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 120% at 15% 0%,rgba(110,208,245,.18),transparent 60%);
}
.band__in{
  position:relative;display:grid;gap:2rem;align-items:center;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);padding-block:clamp(3rem,6vw,4.5rem);
}
.band__title{color:#fff;margin-bottom:.9rem}
.band__text{color:#9FB0BB;max-width:56ch}
.band__actions{display:flex;flex-direction:column;gap:.75rem;align-items:stretch}
.band__actions .btn{width:100%}

/* --- 20. Footer ---------------------------------------------------------- */
.site-footer{background:var(--ink);color:#8FA1AD;font-size:.92rem}
.footer__grid{
  display:grid;gap:clamp(2rem,4vw,3rem);padding-block:clamp(3rem,6vw,4.5rem);
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
}
.footer__brand img{height:46px;width:auto;margin-bottom:1.25rem}
.footer__brand p{max-width:44ch;line-height:1.6}
.footer__badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.25rem}
.footer__badges li{
  font-size:.78rem;padding:.3rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.15);color:#B9C6CE;
}
.footer__col h2{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
.footer__col h2.mt{margin-top:2rem}
.footer__col li{margin-bottom:.55rem}
.footer__col a{color:#8FA1AD;text-decoration:none}
.footer__col a:hover{color:var(--brand-300)}
.footer__contact address{font-style:normal;line-height:1.7;margin-bottom:1rem;color:#B9C6CE}
.footer__contact address strong{color:#fff;font-family:var(--font-head)}
.footer__contactlist{margin-bottom:1.1rem}
.footer__contactlist a{color:var(--brand-300)}
.footer__hours{color:#8FA1AD;line-height:1.7}
.footer__hours strong{color:#fff}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;
  padding-block:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;
}
.footer__bottom ul{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer__bottom a{color:#8FA1AD;text-decoration:none}
.footer__bottom a:hover{color:var(--brand-300)}

/* --- 21. Mobiele actiebalk ---------------------------------------------- */
.actionbar{display:none}

/* --- 22. Formulieren ----------------------------------------------------- */
.form{display:grid;gap:1.15rem}
.field{display:grid;gap:.4rem}
.field > label,.fieldset > legend{
  font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--ink);
}
.hint{font-size:.82rem;color:var(--ink-400)}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(110,208,245,.28);
}
.field textarea{min-height:140px;resize:vertical}
.field--row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.15rem}
.req{color:var(--brand-700)}
.fieldset{border:0;padding:0;margin:0;display:grid;gap:.65rem}
.fieldset legend{padding:0;margin-bottom:.25rem}
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem}
.choice label{
  display:flex;gap:.65rem;align-items:flex-start;padding:.8rem .95rem;border:1.5px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;font-size:.94rem;background:#fff;transition:all .15s var(--ease);
}
.choice label:hover{border-color:var(--ink-300)}
.choice input{margin-top:.25rem;accent-color:var(--brand-600);width:auto}
.choice input:checked ~ span{color:var(--ink);font-weight:600}
.choice label:has(input:checked){border-color:var(--brand-500);background:var(--brand-100)}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:var(--ink-500);cursor:pointer}
.consent input{flex:0 0 auto;width:auto;margin-top:.3rem;accent-color:var(--brand-600)}
.form__note{font-size:.85rem;color:var(--ink-400)}
.hp{position:absolute;left:-9999px}

.stepper{display:flex;gap:.5rem;margin-bottom:2rem;flex-wrap:wrap}
.stepper li{
  display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--ink-400);
  font-family:var(--font-head);font-weight:600;
}
.stepper li::before{
  content:attr(data-step);width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;
  background:var(--sand-2);color:var(--ink-400);font-size:.78rem;
}
.stepper li[aria-current="step"]{color:var(--ink)}
.stepper li[aria-current="step"]::before{background:var(--ink);color:#fff}
.stepper li.is-done::before{background:var(--brand-300);color:var(--ink)}
.stepper li + li{margin-left:.25rem}

.form-step[hidden]{display:none}
.form-nav{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem}

.form-status{
  padding:1rem 1.15rem;border-radius:var(--r-sm);background:var(--brand-100);
  border:1px solid var(--brand-200);color:var(--ink-700);font-size:.92rem;
}

/* --- 23. Contactblok ----------------------------------------------------- */
.contact-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
.info-card{background:var(--sand);border-radius:var(--r);padding:clamp(1.5rem,3vw,2rem)}
.info-card + .info-card{margin-top:1.25rem}
.info-card h3{margin-bottom:.9rem}
.info-list{display:grid;gap:.9rem}
.info-list li{display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem}
.info-list svg{
  width:20px;height:20px;flex:0 0 auto;margin-top:.2rem;fill:none;stroke:var(--brand-700);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.info-list strong{display:block;color:var(--ink);font-family:var(--font-head)}
.info-list a{text-decoration:none}

/* --- 24. Tabellen -------------------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
th,td{text-align:left;padding:.9rem 1.1rem;border-bottom:1px solid var(--line-soft)}
th{font-family:var(--font-head);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--sand)}
tbody tr:last-child td{border-bottom:0}

/* --- 25. Plaatsen-raster ------------------------------------------------- */
.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem}
.places li a{
  display:block;padding:.7rem .95rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;text-decoration:none;color:var(--ink-700);font-size:.92rem;
  transition:all .15s var(--ease);
}
.places li a:hover{border-color:var(--brand-300);background:var(--brand-100);color:var(--ink)}

/* --- 26. Notitieblok (voor de klant) ------------------------------------- */
.note{
  border-left:4px solid var(--brand-300);background:var(--brand-100);padding:1.1rem 1.35rem;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.93rem;color:var(--ink-700);
}
.note strong{color:var(--ink)}

/* --- 27. Reveal-animatie ------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(18px)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

/* --- 28. Utilities ------------------------------------------------------- */
/* Lange, onbreekbare tekst (e-mailadressen, URL's) mag nooit uit de kolom
   lopen en zo horizontaal scrollen veroorzaken op smalle schermen. */
.footer__contactlist a,.info-list a,.info-list span,.topbar a,.prose a,.acc__panel a{overflow-wrap:anywhere}
h1,h2,h3,.h1,.h2,.h3,.h-hero{overflow-wrap:break-word}

.center{text-align:center}
.mt-0{margin-top:0}
.mt-1{margin-top:.75rem}
.mt-2{margin-top:1.5rem}
.mt-3{margin-top:2.5rem}
.mb-2{margin-bottom:1.5rem}
.narrow{max-width:820px;margin-inline:auto}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- 29. Responsive ------------------------------------------------------ */
@media (max-width:1180px){
  .nav__cta .btn--ghost{display:none}
  .nav__list > li > a{padding:.6rem .55rem;font-size:.9rem}
}

@media (max-width:1040px){
  .hero__in{grid-template-columns:1fr}
  .hero__figure{max-width:560px}
  .band__in{grid-template-columns:1fr}
  .band__actions{flex-direction:row;flex-wrap:wrap}
  .band__actions .btn{width:auto;flex:1 1 220px}
  .contact-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .topbar__meta li:nth-child(2){display:none}
  .burger{display:inline-flex}
  /* Het paneel begint onder de header. --nav-top wordt door JS gezet op de
     werkelijke onderkant van de header, zodat het eerste menu-item nooit
     achter de balk verdwijnt - ook niet als de topbalk nog in beeld staat. */
  .nav{
    position:fixed;inset:0;margin:0;z-index:150;
    display:block;background:var(--paper);
    padding:calc(var(--nav-top,var(--header-h)) + 1.25rem) var(--gut) calc(2.5rem + env(safe-area-inset-bottom));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    visibility:hidden;opacity:0;transform:translateX(12%);
    transition:transform .28s var(--ease),opacity .22s var(--ease),visibility .28s;
  }
  .nav.is-open{visibility:visible;opacity:1;transform:none}
  /* logo en menuknop moeten boven het schuifpaneel blijven */
  .logo,.burger{position:relative;z-index:160}
  .logo img{height:36px}
  .nav__list{display:block}
  .nav__list > li{border-bottom:1px solid var(--line-soft)}
  /* Ruime raakvlakken: minimaal 48px hoog, en rechts ruimte vrij voor de
     submenuknop zodat die de link niet overlapt. */
  .nav__list > li > a{
    padding:1.05rem 3.75rem 1.05rem .25rem;font-size:1.08rem;border-radius:0;
    color:var(--ink);min-height:48px;
  }
  .nav__list > li:not(.has-sub) > a{padding-right:.25rem}
  .nav__list > li > a:active{background:var(--sand)}
  body[data-page] .nav__list > li > a{box-shadow:none;color:var(--ink)}
  /* actieve pagina krijgt op mobiel een streep links in plaats van eronder */
  body[data-page="index"]        [data-nav="index"],
  body[data-page="diensten"]     [data-nav="diensten"],
  body[data-page="buitenschilderwerk"] [data-nav="diensten"],
  body[data-page="binnenschilderwerk"] [data-nav="diensten"],
  body[data-page="houtrot"]      [data-nav="diensten"],
  body[data-page="nieuwbouw"]    [data-nav="diensten"],
  body[data-page="particulieren"][data-nav="voor-wie"],
  body[data-page="aannemers"]    [data-nav="voor-wie"],
  body[data-page="vve"]          [data-nav="voor-wie"],
  body[data-page="vastgoed"]     [data-nav="voor-wie"],
  body[data-page="werkwijze"]    [data-nav="werkwijze"],
  body[data-page="projecten"]    [data-nav="projecten"],
  body[data-page="over-ons"]     [data-nav="over-ons"],
  body[data-page="contact"]      [data-nav="contact"]{
    box-shadow:inset 3px 0 0 var(--brand-300);padding-left:.9rem;
  }

  .has-sub{position:relative}
  .sub-toggle{
    display:grid;place-items:center;position:absolute;right:0;top:.4rem;
    width:48px;height:48px;border-radius:50%;
    background:var(--sand);border:1px solid var(--line);cursor:pointer;
  }
  .sub-toggle::before{
    content:"";width:9px;height:9px;margin-top:-3px;
    border:solid var(--ink-500);border-width:0 2px 2px 0;
    transform:rotate(45deg);transition:transform .25s var(--ease),margin .25s var(--ease);
  }
  .has-sub.is-open .sub-toggle{background:var(--brand-100);border-color:var(--brand-200)}
  .has-sub.is-open .sub-toggle::before{transform:rotate(-135deg);margin-top:3px;border-color:var(--brand-700)}

  .sub{
    position:static;opacity:1;visibility:visible;transform:none;min-width:0;box-shadow:none;
    border:0;border-left:2px solid var(--brand-200);border-radius:0;
    margin:0 0 .9rem .35rem;padding:.25rem 0 .25rem .9rem;display:none;
  }
  .has-sub.is-open .sub{display:block}
  .sub a{padding:.7rem .5rem;min-height:48px}
  .sub a strong{font-size:1rem}
  .sub__foot{margin:.4rem .5rem .25rem}

  .nav__cta{margin-top:1.75rem;flex-direction:column;align-items:stretch}
  .nav__cta .btn{width:100%;padding:.95rem 1.2rem;font-size:1rem}
  .nav__cta .btn--ghost{display:inline-flex}

  html.nav-open,body.nav-open{overflow:hidden}

  .actionbar{
    display:grid;grid-template-columns:1fr 1.4fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:120;
    padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  }
  .actionbar a{
    display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem;border-radius:999px;
    border:1.5px solid var(--line);text-decoration:none;color:var(--ink);
    font-family:var(--font-head);font-weight:700;font-size:.92rem;
  }
  .actionbar a svg{width:18px;height:18px;fill:currentColor}
  /* Let op de selector: .actionbar a hierboven is specifieker dan een losse
     klasse, dus zonder het a-deel wint de donkere tekstkleur en staat er
     zwart op zwart. */
  .actionbar a.actionbar__primary{background:var(--ink);border-color:var(--ink);color:#fff}
  .actionbar a.actionbar__primary svg{fill:none;stroke:currentColor}
  body{padding-bottom:76px}
  .site-footer{padding-bottom:.5rem}
}

@media (max-width:680px){
  .topbar__claim{font-size:.78rem}
  .topbar__meta{display:none}
  .footer__grid{grid-template-columns:1fr}
  .hero__card{position:static;margin-top:1rem;max-width:none}
  .steps__item{padding-left:3.5rem}
  .split--media-first .split__media{order:0}
  .compare{aspect-ratio:4/3}
  /* keuzevelden over de volle breedte: grotere raakvlakken, geen krappe
     tweekolomsopstelling waarin de labels net niet passen */
  .choice{grid-template-columns:1fr}
  .field--row{grid-template-columns:1fr}
  .filters{
    /* filterknoppen horizontaal scrollbaar in plaats van vier regels hoog */
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    padding-bottom:.5rem;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
    scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:0 0 auto}
}

/* --- Zeer smalle telefoons (vanaf 320px) -------------------------------- */
@media (max-width:420px){
  :root{--fs-hero:clamp(1.95rem,1.1rem + 4.4vw,2.6rem)}
  .btn{white-space:normal;text-align:center}
  .btn--lg{padding:.9rem 1.3rem;font-size:.98rem}
  .btn-row .btn{flex:1 1 100%}
  .card{padding:1.3rem}
  .hero__points li{font-size:.8rem}
  .actionbar a{font-size:.86rem;padding:.85rem .4rem}
  .steps__item{padding-left:2.9rem}
  .steps__item::before{font-size:1.25rem}
}

/* --- 30. Print & voorkeuren --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}

@media print{
  .topbar,.site-header,.band,.actionbar,.site-footer{display:none}
  body{color:#000}
  .ph{display:none}
}