/* ==========================================================================
   BARON INFRA & TUINEN - Designsysteem
   Merkkleuren overgenomen van baroninfra.nl
   ========================================================================== */

:root{
  --blue-900:#071A38;
  --blue-800:#0A2450;
  --blue-700:#083377;
  --blue-600:#0044AA;
  --blue-500:#1E73BE;
  --blue-300:#8FB6E8;
  --blue-100:#DDE7F5;
  /* De donkere waas over foto's (hero, projectkaartjes) als losse
     rgb-waarden, zodat een klantsite hem op zijn eigen merkkleur kan
     zetten. Dit is hetzelfde donkerblauw als --blue-900: onveranderd
     gedrag voor baroninfra.nl. */
  --overlay-rgb:7,26,56;
  --cream:#EFEDE7;
  --cream-2:#F7F6F2;
  --sand:#E0DACC;
  --ink:#12161D;
  --ink-2:#3E434D;
  --muted:#6C727C;
  --white:#fff;
  --gold:#E0A83B;
  --green:#1E7A4B;
  --red:#B4231F;

  --font-display:"Bona Nova",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px;

  --wrap:1240px;
  /* Zijmarge, schaalt mee met het venster maar nooit smaller dan 24px */
  --gutter:clamp(24px,6vw,72px);
  --r-sm:4px; --r-md:8px; --r-lg:16px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-sm:0 1px 2px rgba(var(--overlay-rgb),.06),0 2px 8px rgba(var(--overlay-rgb),.05);
  --shadow-md:0 4px 12px rgba(var(--overlay-rgb),.07),0 12px 32px rgba(var(--overlay-rgb),.08);
  --shadow-lg:0 8px 24px rgba(var(--overlay-rgb),.09),0 32px 64px rgba(var(--overlay-rgb),.12);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.12;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.7vw,2.95rem)}
h3{font-size:clamp(1.22rem,1.8vw,1.55rem)}
h4{font-size:1.1rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--sand);margin:var(--sp-5) 0}
::selection{background:var(--blue-600);color:#fff}

.wrap{width:min(calc(100% - 2 * var(--gutter)),var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(calc(100% - 2 * var(--gutter)),880px);margin-inline:auto}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--blue-600);margin:0 0 var(--sp-2);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.eyebrow.center{justify-content:center}
.eyebrow.light{color:var(--blue-300)}
.lead{font-size:1.12rem;color:var(--ink-2);max-width:64ch}
.muted{color:var(--muted)}
.center{text-align:center}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
/* Alleen tonen bij echte toetsenbordnavigatie. Next verplaatst na elke
   klik-navigatie de focus naar het eerste element (de skip-link), dus met
   :focus zou hij na elke muisklik in het menu even in beeld springen.
   :focus-visible matcht dat programmatische focussen na een muisklik niet. */
.skip:focus-visible{left:16px;top:16px;z-index:999;background:#fff;padding:12px 20px;border-radius:var(--r-md)}
/* Op aanraakschermen zonder toetsenbord (telefoon, tablet) heeft een
   skip-link geen functie. Sommige mobiele browsers tonen hem toch even
   nadat het systeem na een tik op een menu-item de focus verplaatst.
   Daarom daar helemaal uitschakelen. Op desktop met toetsenbord blijft
   hij gewoon werken. */
@media (hover: none) and (pointer: coarse){
  .skip{display:none}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* -------------------------------- Knoppen -------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-size:.82rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:17px 32px;border:1.5px solid transparent;
  border-radius:var(--r-sm);cursor:pointer;position:relative;text-align:center;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn svg{width:17px;height:17px;flex:none;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--blue-600);color:#fff;box-shadow:0 4px 14px rgba(0,68,170,.28)}
.btn-primary:hover{background:var(--blue-700);box-shadow:0 10px 26px rgba(0,68,170,.36)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:#fff;color:var(--blue-900);border-color:#fff}
.btn-dark{background:var(--blue-900);color:#fff}
.btn-dark:hover{background:var(--blue-700)}
.btn-outline{border-color:var(--blue-900);color:var(--blue-900);background:transparent}
.btn-outline:hover{background:var(--blue-900);color:#fff}
.btn-lg{padding:20px 40px;font-size:.86rem}
.btn-block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.65;pointer-events:none}
.link-arrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.86rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-600)}
.link-arrow svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}
.link-underline{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px}

/* -------------------------------- Topbalk -------------------------------- */
.topbar{background:var(--blue-900);color:rgba(255,255,255,.82);font-size:.79rem;position:relative;z-index:60}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:40px}
.topbar-left{display:flex;align-items:center;gap:26px}
.topbar a{display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.topbar a:hover{color:#fff}
.topbar svg{width:14px;height:14px;opacity:.75}
.rating{display:inline-flex;align-items:center;gap:8px;color:#fff}
.stars{display:inline-flex;gap:2px}
.stars svg{width:13px;height:13px;color:var(--gold);opacity:1}
@media(max-width:960px){.topbar{display:none}}

/* -------------------------------- Header --------------------------------- */
.header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.header .wrap{display:flex;align-items:center;gap:28px;height:84px;transition:height .35s var(--ease)}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo-mark{width:38px;height:38px;flex:none}
.logo-mark rect{transition:fill .35s var(--ease)}
/* Het eigen logo van een bedrijf (fase 3 en verder). De kop is bij een
   eigen logo altijd wit (zie Kop in Chrome.tsx), dus daar staat het
   logo kaal en op formaat. Alleen in de donkere voet krijgt het een
   wit vlakje, anders is een donker logo daar onzichtbaar. Baron
   gebruikt dit niet en houdt het vaste beeldmerk hierboven. */
.logo-beeld{height:var(--logo-hoogte,52px);width:auto;max-width:min(56vw,480px);object-fit:contain;flex:none}
.footer .logo-beeld{height:48px;max-width:300px;background:var(--logo-vlak,#fff);border-radius:8px;padding:5px 10px;box-sizing:border-box}
.logo-txt{line-height:1}
.logo-txt b{display:block;font-family:var(--font-display);font-size:1.32rem;font-weight:700;
  letter-spacing:.16em;color:#fff;transition:color .35s var(--ease)}
.logo-txt span{display:block;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin-top:3px;transition:color .35s var(--ease)}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px;list-style:none;margin-block:0;padding:0}
.nav>li{position:relative}
.nav a.navlink{display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:.87rem;
  font-weight:500;color:rgba(255,255,255,.92);border-radius:var(--r-sm);transition:color .25s}
.nav a.navlink::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:var(--blue-500);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav li:hover>a.navlink::after,.nav a.navlink[aria-current="page"]::after{transform:scaleX(1)}
.nav ul{list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:0;min-width:270px;
  background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;
  transform:translateY(10px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav li:hover>ul,.nav li:focus-within>ul{opacity:1;visibility:visible;transform:translateY(0)}
.nav ul a{display:block;padding:11px 14px;font-size:.9rem;color:var(--ink);border-radius:var(--r-sm);
  transition:background .2s,color .2s;font-weight:500}
.nav ul a:hover{background:var(--cream);color:var(--blue-600)}
.nav ul small{display:block;font-size:.74rem;color:var(--muted);font-weight:400;margin-top:1px}
.header .btn{padding:14px 22px;font-size:.75rem}
.chev{width:12px;height:12px;transition:transform .25s}
.nav li:hover .chev{transform:rotate(180deg)}
.header.solid{background:rgba(255,255,255,.93);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--sand);box-shadow:0 2px 20px rgba(var(--overlay-rgb),.06)}
.header.solid .wrap{height:72px}
.header.solid .logo-txt b{color:var(--blue-900)}
.header.solid .logo-txt span{color:var(--muted)}
.header.solid .logo-mark rect.lm-a{fill:var(--blue-600)}
.header.solid .logo-mark rect.lm-b{fill:var(--blue-500)}
.header.solid .nav a.navlink{color:var(--ink)}
.header.solid .nav a.navlink:hover{color:var(--blue-600)}
.header.solid .burger span{background:var(--blue-900)}
/* Pagina's zonder donkere hero starten meteen in de vaste staat */
/* De vaste balk. De kleur komt uit --balk-rgb: standaard wit, maar een
   klantsite waarvan het logo een eigen achtergrondkleur heeft, zet de
   balk in die kleur (zie Huisstijl.tsx). De tekst op de balk kleurt
   mee via --balk-tekst, zodat hij op elke balkkleur leesbaar blijft. */
.header.always-solid{background:rgba(var(--balk-rgb,255,255,255),.93);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--sand)}
.header.always-solid .logo-txt b{color:var(--balk-tekst,var(--blue-900))}
.header.always-solid .logo-txt span{color:var(--balk-tekst,var(--muted))}
.header.always-solid .logo-mark rect.lm-a{fill:var(--blue-600)}
.header.always-solid .logo-mark rect.lm-b{fill:var(--blue-500)}
.header.always-solid .nav a.navlink{color:var(--balk-tekst,var(--ink))}
.header.always-solid .burger span{background:var(--balk-tekst,var(--blue-900))}

.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;
  transition:transform .3s var(--ease),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1120px){.nav,.header>.wrap>.btn{display:none}.burger{display:block}}

/* Mobiel menu */
.mnav{position:fixed;inset:0;z-index:70;background:var(--blue-900);color:#fff;padding:24px;
  overflow-y:auto;transform:translateX(100%);transition:transform .4s var(--ease);visibility:hidden}
.mnav.open{transform:none;visibility:visible}
.mnav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.mnav-close{background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:6px 12px}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav>ul>li{border-bottom:1px solid rgba(255,255,255,.12)}
.mnav>ul>li>a{display:block;padding:17px 0;font-family:var(--font-display);font-size:1.4rem}
.mnav ul ul{padding:0 0 14px 14px}
.mnav ul ul a{display:block;padding:9px 0;font-size:.98rem;color:rgba(255,255,255,.72)}
.mnav .btn{margin-top:26px;width:100%}
.mnav-contact{margin-top:26px;font-size:.92rem;color:rgba(255,255,255,.7);line-height:2}
.mnav-contact a{display:block}

/* --------------------------------- Hero ---------------------------------- */
.hero{position:relative;min-height:min(92vh,860px);display:flex;flex-direction:column;
  margin-top:-84px;padding-top:84px;overflow:hidden;background:var(--blue-900)}
/* margin-top:auto duwt de inhoud naar beneden zolang er ruimte is, maar laat de
   tekst nooit omhoog onder de header schuiven wanneer de kop lang wordt */
.hero>.wrap{flex:none;margin-top:auto}
.hero>.hero-strip{flex:none;width:100%}
.hero-media{position:absolute;inset:-8% 0 0;z-index:0;will-change:transform}
.hero-media img{width:100%;height:116%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(var(--overlay-rgb),.90) 0%,rgba(var(--overlay-rgb),.72) 42%,rgba(var(--overlay-rgb),.28) 78%,rgba(var(--overlay-rgb),.45) 100%)}
.hero .wrap{position:relative;z-index:2;padding:var(--sp-6) 0 0}
.hero-inner{max-width:880px;color:#fff;padding-bottom:56px}
.hero h1{color:#fff;margin-bottom:var(--sp-3);font-size:clamp(2.15rem,4.5vw,3.55rem)}
.hero h1 em{font-style:normal;color:var(--blue-300)}
.hero p{font-size:1.1rem;color:rgba(255,255,255,.86);max-width:60ch;margin-bottom:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-strip{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16);
  background:rgba(var(--overlay-rgb),.42);backdrop-filter:blur(10px)}
.hero-strip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.hero-strip li{padding:22px 24px;color:#fff;border-left:1px solid rgba(255,255,255,.14)}
.hero-strip li:first-child{border-left:0;padding-left:0}
.hero-strip b{display:block;font-family:var(--font-display);font-size:1.85rem;line-height:1}
.hero-strip span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66)}
@media(max-width:860px){
  .hero-strip ul{grid-template-columns:repeat(2,1fr)}
  .hero-strip li:nth-child(3){border-left:0}
  .hero-strip li:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
}
.scroll-hint{position:absolute;right:32px;bottom:150px;z-index:3;writing-mode:vertical-rl;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);
  display:flex;align-items:center;gap:14px}
.scroll-hint::after{content:"";width:1px;height:56px;
  background:linear-gradient(rgba(255,255,255,.6),transparent);animation:sh 2.2s var(--ease) infinite}
@keyframes sh{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:1120px){.scroll-hint{display:none}}

/* Paginakop voor binnenpagina's */
.phero{position:relative;background:var(--blue-900);color:#fff;overflow:hidden;
  margin-top:-84px;padding:calc(84px + var(--sp-7)) 0 var(--sp-7)}
.phero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.42}
.phero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(var(--overlay-rgb),.94) 0%,rgba(var(--overlay-rgb),.78) 55%,rgba(var(--overlay-rgb),.55) 100%)}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:#fff;max-width:20ch}
.phero p{color:rgba(255,255,255,.82);max-width:62ch;margin-top:var(--sp-3);font-size:1.1rem}
.phero .hero-cta{margin-top:var(--sp-4)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 var(--sp-3);padding:0;
  font-size:.8rem;color:rgba(255,255,255,.6)}
.crumbs li::after{content:"/";margin-left:8px;opacity:.5}
.crumbs li:last-child::after{content:""}
.crumbs a:hover{color:#fff}

/* -------------------------------- Secties -------------------------------- */
section{padding:var(--sp-8) 0}
section.tight{padding:var(--sp-7) 0}
.sec-head{max-width:740px;margin-bottom:var(--sp-6)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head p{margin-top:var(--sp-2);color:var(--ink-2);font-size:1.08rem}
.sec-split{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-bottom:var(--sp-6);flex-wrap:wrap}
.sec-split .sec-head{margin-bottom:0}
.bg-white{background:#fff}
.bg-cream2{background:var(--cream-2);border-block:1px solid var(--sand)}
.bg-dark{background:var(--blue-900);color:#fff}
.bg-dark h2,.bg-dark h3{color:#fff}
.bg-dark p{color:rgba(255,255,255,.74)}

/* ---------------------------------- USP ---------------------------------- */
.usp{padding:var(--sp-6) 0;background:#fff;border-bottom:1px solid var(--sand)}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--sand);
  list-style:none;margin:0;padding:0}
.usp-grid li{background:#fff;padding:28px;display:flex;gap:16px;align-items:flex-start}
.usp-ico{width:42px;height:42px;flex:none;border-radius:var(--r-sm);background:var(--blue-100);
  display:grid;place-items:center;color:var(--blue-600)}
.usp-ico svg{width:21px;height:21px}
.usp-grid b{display:block;font-size:.98rem;margin-bottom:3px}
.usp-grid span span{font-size:.88rem;color:var(--muted);line-height:1.5;display:block}
@media(max-width:1000px){.usp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.usp-grid{grid-template-columns:1fr}}

/* ------------------------------- Diensten -------------------------------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.svc{position:relative;background:#fff;border:1px solid var(--sand);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--blue-900)}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.svc:hover .svc-img img{transform:scale(1.07)}
.svc-num{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--font-display);
  font-size:.85rem;letter-spacing:.14em;color:#fff;background:rgba(var(--overlay-rgb),.55);
  backdrop-filter:blur(6px);padding:6px 12px;border-radius:var(--r-sm)}
.svc-body{padding:var(--sp-4);display:flex;flex-direction:column;flex:1}
.svc-body h3{margin-bottom:10px}
.svc-body p{font-size:.95rem;color:var(--ink-2);flex:1}
.svc-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 var(--sp-3);padding:0;list-style:none}
.svc-tags li{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-700);
  background:var(--blue-100);padding:5px 10px;border-radius:100px;font-weight:600}
@media(max-width:980px){.svc-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ------------------------------- Werkwijze ------------------------------- */
.steps{background:var(--blue-900);color:#fff;position:relative;overflow:hidden}
.steps::before{content:"";position:absolute;inset:0;opacity:.28;
  background:radial-gradient(900px 420px at 12% -10%,rgba(30,115,190,.55),transparent 70%),
             radial-gradient(700px 380px at 95% 110%,rgba(0,68,170,.45),transparent 70%)}
.steps .wrap{position:relative;z-index:1}
.steps h2,.steps h3{color:#fff}
.steps .sec-head p{color:rgba(255,255,255,.72)}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);position:relative}
.step-grid::before{content:"";position:absolute;top:26px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 12%,rgba(255,255,255,.28) 88%,transparent)}
.step b.n{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;background:var(--blue-600);color:#fff;font-family:var(--font-display);
  font-size:1.15rem;margin-bottom:var(--sp-3);box-shadow:0 0 0 8px var(--blue-900)}
.step h3{font-size:1.18rem;margin-bottom:8px}
.step p{font-size:.93rem;color:rgba(255,255,255,.7)}
@media(max-width:900px){.step-grid{grid-template-columns:repeat(2,1fr)}.step-grid::before{display:none}}
@media(max-width:520px){.step-grid{grid-template-columns:1fr}}

/* ------------------------------- Projecten ------------------------------- */
.proj-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-2)}
.proj{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--blue-900);
  display:block;grid-column:span 4;aspect-ratio:4/3}
.proj.tall{grid-column:span 6;aspect-ratio:16/10}
.proj img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.proj::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--overlay-rgb),.86) 0%,rgba(var(--overlay-rgb),.25) 45%,transparent 70%);
  opacity:.85;transition:opacity .45s}
.proj:hover img{transform:scale(1.06)}
.proj:hover::after{opacity:1}
.proj-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px;color:#fff}
.proj-cap span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-300)}
.proj-cap b{display:block;font-family:var(--font-display);font-size:1.32rem;margin-top:4px}
.proj-cap i{display:inline-flex;align-items:center;gap:7px;font-style:normal;font-size:.83rem;
  color:rgba(255,255,255,.75);margin-top:6px;opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.proj:hover .proj-cap i{opacity:1;transform:translateY(0)}
.proj.hide{display:none}
@media(max-width:900px){.proj,.proj.tall{grid-column:span 6}}
@media(max-width:560px){.proj,.proj.tall{grid-column:span 12}}

.filters{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 var(--sp-4);padding:0}
.filters button{background:#fff;border:1px solid var(--sand);border-radius:100px;padding:10px 20px;
  font-family:var(--font-sans);font-size:.86rem;font-weight:500;cursor:pointer;color:var(--ink);
  transition:background .25s,border-color .25s,color .25s}
.filters button:hover{border-color:var(--blue-600);color:var(--blue-600)}
.filters button[aria-pressed="true"]{background:var(--blue-600);border-color:var(--blue-600);color:#fff}

/* -------------------------------- Reviews -------------------------------- */
.rev-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:var(--sp-5)}
.rev-badge{display:flex;align-items:center;gap:14px;background:var(--cream);border:1px solid var(--sand);
  border-radius:var(--r-md);padding:14px 20px}
.rev-badge .score{font-family:var(--font-display);font-size:2rem;line-height:1}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.rev{background:var(--cream-2);border:1px solid var(--sand);border-radius:var(--r-md);
  padding:var(--sp-4);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.rev:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.rev .stars{margin-bottom:14px}
.rev .stars svg{width:15px;height:15px;color:var(--gold)}
.rev q{quotes:none;font-size:.98rem;color:var(--ink-2);line-height:1.7;flex:1;display:block}
.rev q::before{content:"\201C"}.rev q::after{content:"\201D"}
.rev footer{display:flex;align-items:center;gap:12px;margin-top:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--sand)}
.rev-av{width:40px;height:40px;border-radius:50%;background:var(--blue-600);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:.85rem;flex:none}
.rev footer b{display:block;font-size:.92rem}
.rev footer span span{font-size:.8rem;color:var(--muted);display:block}
@media(max-width:980px){.rev-grid{grid-template-columns:1fr}}

/* -------------------------- Over ons en tijdlijn -------------------------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:center}
.about-media{position:relative}
.about-media>img{border-radius:var(--r-md);aspect-ratio:4/5;object-fit:cover;width:100%}
.about-media .float{position:absolute;right:-28px;bottom:-28px;width:56%;border:8px solid var(--cream);
  border-radius:var(--r-md);aspect-ratio:4/3;box-shadow:var(--shadow-md)}
.tl{list-style:none;margin:var(--sp-4) 0 var(--sp-5);padding:0;position:relative}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--sand)}
.tl li{position:relative;padding-left:34px;margin-bottom:var(--sp-3)}
.tl li::before{content:"";position:absolute;left:2px;top:8px;width:11px;height:11px;border-radius:50%;
  background:var(--cream);border:2px solid var(--blue-600)}
.tl li:last-child::before{background:var(--blue-600)}
.tl b{font-family:var(--font-display);font-size:1.05rem;color:var(--blue-700);margin-right:8px}
.tl span{font-size:.95rem;color:var(--ink-2)}
@media(max-width:980px){.about{grid-template-columns:1fr;gap:var(--sp-6)}
  .about-media .float{right:0;bottom:-24px;width:42%}}
/* Op smalle schermen werkt de overlappende foto niet: te klein en hij valt weg
   over de rand. Daarom onder elkaar, allebei op volle breedte. */
@media(max-width:820px){
  .about-media{display:grid;gap:12px}
  .about-media>img{aspect-ratio:16/10}
  .about-media .float{position:static;width:100%;border:0;box-shadow:none;
    aspect-ratio:16/10;border-radius:var(--r-md)}
}

/* ------------------------------ Werkgebied ------------------------------- */
.area-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:var(--sp-6);align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.chips li a,.chips li span{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--sand);border-radius:100px;padding:9px 17px;font-size:.9rem;font-weight:500;
  transition:border-color .25s,color .25s,transform .25s var(--ease),box-shadow .25s}
.chips li a:hover{border-color:var(--blue-600);color:var(--blue-600);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.chips svg{width:13px;height:13px;color:var(--blue-500)}
@media(max-width:900px){.area-grid{grid-template-columns:1fr}}

/* ----------------------------- Calculatieband ---------------------------- */
.calc{position:relative;overflow:hidden;background:var(--blue-800);color:#fff;padding:0}
.calc-in{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr 1fr;gap:var(--sp-6);
  align-items:center;padding:var(--sp-7) 0}
.calc::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--blue-800) 34%,rgba(10,36,80,.72) 62%,rgba(10,36,80,.35) 100%)}
.calc img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.85}
.calc h2{color:#fff}
.calc p{color:rgba(255,255,255,.78);margin-top:var(--sp-2)}
.calc-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-md);padding:var(--sp-4);backdrop-filter:blur(10px)}
.calc-card ul{list-style:none;margin:0 0 var(--sp-3);padding:0}
.calc-card li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;
  color:rgba(255,255,255,.85);margin-bottom:11px}
.calc-card svg{width:18px;height:18px;color:var(--blue-300);flex:none;margin-top:2px}
@media(max-width:900px){.calc-in{grid-template-columns:1fr}.calc::before{background:rgba(10,36,80,.9)}}

/* ---------------------------------- FAQ ---------------------------------- */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-6);align-items:start}
.faq-list{border-top:1px solid var(--sand)}
.faq-item{border-bottom:1px solid var(--sand)}
.faq-q{width:100%;background:none;border:0;padding:24px 44px 24px 0;text-align:left;cursor:pointer;
  font-family:var(--font-display);font-size:1.14rem;font-weight:700;color:var(--ink);
  position:relative;transition:color .25s;line-height:1.35}
.faq-q:hover{color:var(--blue-600)}
.faq-q::after,.faq-q::before{content:"";position:absolute;right:6px;top:50%;background:var(--blue-600);
  transition:transform .35s var(--ease),opacity .35s}
.faq-q::before{width:15px;height:2px;margin-top:-1px}
.faq-q::after{width:2px;height:15px;margin-top:-7.5px;right:12.5px}
.faq-item.open .faq-q::after{transform:rotate(90deg);opacity:0}
.faq-a{overflow:hidden;height:0;transition:height .4s var(--ease)}
.faq-a>div{padding:0 40px 26px 0;color:var(--ink-2);font-size:.98rem}
.faq-a strong{color:var(--ink)}
.faq-a ul{margin:.6em 0;padding-left:1.2em}
.faq-a li{margin-bottom:.35em}
.faq-aside{background:#fff;border:1px solid var(--sand);border-radius:var(--r-md);padding:var(--sp-4);
  position:sticky;top:100px}
.faq-aside .btn{margin-top:10px}
@media(max-width:980px){.faq-grid{grid-template-columns:1fr}.faq-aside{position:static;order:-1}}

/* ------------------------------- Artikeltekst ---------------------------- */
.prose{max-width:70ch}
.prose h2{margin:var(--sp-6) 0 var(--sp-3)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:var(--sp-5) 0 var(--sp-2)}
.prose p{color:var(--ink-2)}
.prose ul,.prose ol{color:var(--ink-2);padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin-bottom:.55em}
.prose li::marker{color:var(--blue-600)}
.prose a{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:center}
.split.reverse .split-media{order:2}
.split-media img{border-radius:var(--r-md);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow-md)}
@media(max-width:980px){.split{grid-template-columns:1fr;gap:var(--sp-5)}.split.reverse .split-media{order:0}}

/* --------------------------------- Tabel --------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--sand);border-radius:var(--r-md);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--sand);vertical-align:top}
thead th{background:var(--blue-900);color:#fff;font-family:var(--font-sans);font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--cream-2)}
td b{color:var(--ink)}

/* -------------------------------- Formulier ------------------------------ */
.form-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--sp-6);align-items:start}
@media(max-width:1000px){.form-layout{grid-template-columns:1fr}}
.form-card{background:#fff;border:1px solid var(--sand);border-radius:var(--r-md);padding:var(--sp-5)}
.form-aside{background:var(--blue-900);color:#fff;border-radius:var(--r-md);padding:var(--sp-5);
  position:sticky;top:100px}
.form-aside h3{color:#fff;font-size:1.3rem;margin-bottom:var(--sp-2)}
.form-aside p{color:rgba(255,255,255,.74);font-size:.95rem}
.form-aside ul{list-style:none;margin:var(--sp-3) 0;padding:0}
.form-aside li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;
  color:rgba(255,255,255,.85);margin-bottom:12px}
.form-aside li svg{width:18px;height:18px;color:var(--blue-300);flex:none;margin-top:3px}
.form-aside a{color:var(--blue-300);text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){.form-aside{position:static}}

fieldset{border:0;padding:0;margin:0 0 var(--sp-5)}
legend{font-family:var(--font-display);font-size:1.3rem;font-weight:700;margin-bottom:var(--sp-1);padding:0}
.fs-hint{font-size:.9rem;color:var(--muted);margin-bottom:var(--sp-3)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-3)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2) var(--sp-3)}
@media(max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}
.field{margin-bottom:var(--sp-3)}
.field label,.field .lbl{display:block;font-size:.88rem;font-weight:600;margin-bottom:7px;color:var(--ink)}
.field .req{color:var(--blue-600)}
.field small{display:block;font-size:.82rem;color:var(--muted);margin-top:6px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;font-family:var(--font-sans);font-size:1rem;color:var(--ink);background:var(--cream-2);
  border:1.5px solid var(--sand);border-radius:var(--r-sm);padding:14px 16px;
  transition:border-color .25s,background .25s,box-shadow .25s}
textarea{min-height:150px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C727C' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:44px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue-600);background:#fff;
  box-shadow:0 0 0 4px rgba(0,68,170,.12)}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--red)}
.err{display:none;font-size:.84rem;color:var(--red);margin-top:6px;font-weight:500}
.field.has-err .err{display:block}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:var(--red)}

.choices{display:grid;gap:10px}
.choices.cols-2{grid-template-columns:1fr 1fr}
.choices.cols-3{grid-template-columns:repeat(3,1fr)}
.choices.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:640px){.choices.cols-2,.choices.cols-3,.choices.cols-4{grid-template-columns:1fr}}
.choice{position:relative;display:flex;align-items:flex-start;gap:12px;background:var(--cream-2);
  border:1.5px solid var(--sand);border-radius:var(--r-sm);padding:15px 17px;cursor:pointer;
  transition:border-color .25s,background .25s,transform .2s var(--ease)}
.choice:hover{border-color:var(--blue-500);transform:translateY(-1px)}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice .box{width:20px;height:20px;flex:none;border:2px solid var(--sand);background:#fff;
  border-radius:var(--r-sm);display:grid;place-items:center;margin-top:1px;transition:border-color .2s,background .2s}
.choice input[type=radio]~.box{border-radius:50%}
.choice .box svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity .2s}
.choice input:checked~.box{background:var(--blue-600);border-color:var(--blue-600)}
.choice input:checked~.box svg{opacity:1}
.choice:has(input:checked){border-color:var(--blue-600);background:var(--blue-100)}
.choice input:focus-visible~.box{outline:3px solid var(--blue-500);outline-offset:3px}
.choice .txt{font-size:.94rem;font-weight:500;line-height:1.4}
.choice .txt small{display:block;font-weight:400;color:var(--muted);font-size:.83rem;margin-top:2px}
.hp{position:absolute!important;left:-9999px!important;opacity:0}

.form-status{display:none;padding:16px 20px;border-radius:var(--r-sm);margin-bottom:var(--sp-3);font-size:.95rem}
.form-status.show{display:block}
.form-status.ok{background:#E8F4EC;border:1px solid #B8DBC6;color:var(--green)}
.form-status.bad{background:#FBEAEA;border:1px solid #F0C4C3;color:var(--red)}

/* Prijsindicatie */
.est{background:var(--blue-900);color:#fff;border-radius:var(--r-md);padding:var(--sp-4);
  margin-bottom:var(--sp-4);position:sticky;top:100px}
.est h3{color:#fff;font-size:1.15rem;margin-bottom:var(--sp-2)}
.est .amount{font-family:var(--font-display);font-size:2.4rem;line-height:1.1;color:#fff;margin:6px 0}
.est .amount small{font-size:.9rem;font-family:var(--font-sans);color:rgba(255,255,255,.6);display:block;
  font-weight:400;letter-spacing:.02em}
.est ul{list-style:none;margin:var(--sp-3) 0 0;padding:var(--sp-3) 0 0;
  border-top:1px solid rgba(255,255,255,.16);font-size:.9rem}
.est li{display:flex;justify-content:space-between;gap:16px;color:rgba(255,255,255,.78);margin-bottom:9px}
.est li b{color:#fff;font-weight:600}
.est .disclaimer{font-size:.8rem;color:rgba(255,255,255,.55);margin-top:var(--sp-3);line-height:1.5}

/* ------------------------------- Slot-CTA -------------------------------- */
.cta-final{background:var(--blue-900);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 380px at 50% 0%,rgba(30,115,190,.42),transparent 70%)}
.cta-final .wrap{position:relative;z-index:1}
.cta-final h2{color:#fff;margin-bottom:var(--sp-2)}
.cta-final p{color:rgba(255,255,255,.76);max-width:58ch;margin-inline:auto;margin-bottom:var(--sp-4)}
.cta-final .hero-cta{justify-content:center}

/* --------------------------------- Footer -------------------------------- */
/* De voet. Net als de kopbalk kleurt hij mee met de achtergrondkleur
   van het logo (--voet en de tekstvarianten, gezet in Huisstijl.tsx);
   zonder logo-achtergrond gelden de vaste donkere waarden hieronder. */
.footer{background:var(--voet,#050F22);color:var(--voet-zacht,rgba(255,255,255,.66));padding:var(--sp-7) 0 0;font-size:.92rem}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--sp-5);padding-bottom:var(--sp-6)}
.footer h2{color:var(--voet-tekst,#fff);font-family:var(--font-sans);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:var(--sp-3);font-weight:600}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:11px}
.footer a{transition:color .2s}
.footer a:hover{color:var(--voet-tekst,#fff)}
.f-brand .logo-txt b{font-size:1.4rem;color:var(--voet-tekst,#fff)}
.f-brand .logo-txt span{color:var(--voet-zacht,rgba(255,255,255,.75))}
.f-brand p{margin-top:var(--sp-3);max-width:36ch;font-size:.92rem}
.socials{display:flex;gap:10px;margin-top:var(--sp-3)}
.socials a{width:38px;height:38px;border:1px solid var(--voet-lijn,rgba(255,255,255,.18));border-radius:var(--r-sm);
  display:grid;place-items:center;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.socials a:hover{background:var(--blue-600);border-color:var(--blue-600);transform:translateY(-2px)}
.socials svg{width:16px;height:16px}
.f-contact li{display:flex;gap:11px;align-items:flex-start}
.f-contact svg{width:15px;height:15px;color:var(--blue-500);flex:none;margin-top:5px}
.f-bottom{border-top:1px solid var(--voet-lijn2,rgba(255,255,255,.1));padding:22px 0;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.83rem;color:var(--voet-stil,rgba(255,255,255,.45))}
.f-bottom ul{display:flex;gap:20px;flex-wrap:wrap}
@media(max-width:980px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.f-grid{grid-template-columns:1fr}}

/* --------------------------- Mobiele actiebalk --------------------------- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--sand);
  padding:10px 14px;gap:10px}
.mobile-bar .btn{flex:1;padding:14px 8px;font-size:.72rem;letter-spacing:.08em}
@media(max-width:760px){.mobile-bar{display:flex}body{padding-bottom:72px}}

/* ----------------------------- Cookiemelding ----------------------------- */
.cookiebar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:560px;
  background:#fff;border:1px solid var(--sand);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:22px 24px;
  transform:translateY(140%);transition:transform .5s var(--ease);
}
.cookiebar.show{transform:none}
.cookiebar h2{
  font-family:var(--font-display);font-size:1.15rem;font-weight:700;
  letter-spacing:normal;text-transform:none;color:var(--ink);margin:0 0 6px;
}
.cookiebar p{font-size:.9rem;color:var(--ink-2);line-height:1.55;margin:0 0 var(--sp-3)}
.cookiebar a{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px}
.cookiebar-acties{display:flex;flex-wrap:wrap;gap:10px}
.cookiebar .btn{padding:13px 22px;font-size:.74rem;flex:1 1 auto}
@media(max-width:760px){
  .cookiebar{bottom:88px;left:12px;right:12px;padding:20px}
  .cookiebar .btn{flex:1 1 100%}
}

/* ----------------------------- Scroll-animaties -------------------------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

@media print{
  .header,.topbar,.mobile-bar,.footer,.cta-final,.mnav{display:none}
  body{background:#fff;font-size:12pt}
  .reveal{opacity:1;transform:none}
}

/* ------------------------- Werkgebied-radarkaart -------------------------
   Het werkgebied als tekening (fase 3 van de websitereis): het bedrijf in
   het midden, ringen met de kilometers en de plaatsen als speldjes. Wordt
   alleen getekend als het blok erom vraagt (kaart: true); bestaande
   pagina's veranderen niet. De kleuren volgen de merkkleur van de site. */
.wg-kaart{position:relative;aspect-ratio:1/1;max-width:520px;width:100%;margin-inline:auto}
.wg-kaart svg{width:100%;height:100%;display:block}
.wg-vlak{fill:var(--blue-600);opacity:.05}
.wg-ring{fill:none;stroke:var(--blue-600);stroke-width:1.5}
.wg-rand{stroke-width:2;stroke-opacity:.3;stroke-dasharray:3 7}
.wg-as{stroke:var(--blue-600);stroke-opacity:.08}
.wg-bundel{position:absolute;inset:11%;border-radius:50%;overflow:hidden;pointer-events:none}
.wg-bundel::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(var(--overlay-rgb),.16) 0deg, rgba(var(--overlay-rgb),.04) 55deg, transparent 70deg);
  animation:wg-draai 9s linear infinite}
@keyframes wg-draai{to{transform:rotate(360deg)}}
.wg-km{position:absolute;left:50%;transform:translate(-50%,-50%);font-size:.7rem;font-weight:600;
  color:var(--muted);background:var(--cream-2);padding:0 7px;z-index:2}
.wg-plaats{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;z-index:2}
.wg-plaats i{width:11px;height:11px;border-radius:50%;background:var(--blue-600);border:2.5px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25)}
.wg-plaats b{font-size:.8rem;font-weight:600;color:var(--ink);background:rgba(255,255,255,.92);
  padding:3px 10px;border-radius:999px;border:1px solid var(--sand);white-space:nowrap}
.wg-thuis{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:3}
.wg-stip{width:20px;height:20px;border-radius:50%;background:var(--blue-900);border:4px solid #fff;
  box-shadow:0 0 0 3px var(--blue-900), 0 4px 10px rgba(0,0,0,.25);position:relative}
.wg-stip::after{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:2px solid var(--blue-600);opacity:0;animation:wg-puls 2.6s ease-out infinite}
@keyframes wg-puls{0%{transform:scale(.4);opacity:.8}80%{transform:scale(1.15);opacity:0}100%{opacity:0}}
.wg-thuis b{font-size:.86rem;font-weight:700;color:#fff;background:var(--blue-900);
  padding:5px 13px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.2);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.wg-bundel::before,.wg-stip::after{animation:none}}

/* ------------------------- Branchebouwstenen -------------------------
   De blokken uit BRANCHEONDERZOEK.md: de spoedstrook voor
   storingsberoepen, de keurmerkenkaartjes en de tarievenkaartjes.
   Alles volgt de merkkleur van de site via de bestaande variabelen. */
.sp-strook{background:#fff;border-bottom:1px solid var(--sand)}
.sp-binnen{display:flex;align-items:center;gap:28px;padding:20px 0;flex-wrap:wrap}
.sp-kern{display:flex;align-items:center;gap:18px;flex:1;min-width:280px}
.sp-puls{width:14px;height:14px;border-radius:50%;background:#C2610C;flex:none;position:relative}
.sp-puls::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid #C2610C;
  opacity:0;animation:sp-puls 2s ease-out infinite}
@keyframes sp-puls{0%{transform:scale(.4);opacity:.9}80%{transform:scale(1.1);opacity:0}100%{opacity:0}}
.sp-kern b{font-family:var(--font-display);font-size:1.3rem;color:var(--blue-900);display:block}
.sp-tekst{display:block;font-size:.9rem;color:var(--ink-2);margin-top:2px}
.sp-feiten{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap;font-size:.86rem;color:var(--ink-2)}
.sp-feiten li{display:flex;align-items:center;gap:8px}
.sp-feiten svg{width:15px;height:15px;stroke:var(--blue-600);fill:none;stroke-width:2.2;flex:none}
@media (prefers-reduced-motion: reduce){.sp-puls::after{animation:none}}

.km-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:var(--sp-4)}
.km-kaart{background:#fff;border:1px solid var(--sand);border-radius:var(--r-md);padding:22px;display:flex;gap:14px;align-items:flex-start}
.km-teken{flex:none;margin-top:2px}
.km-teken svg{width:32px;height:32px;stroke:var(--blue-600);fill:none;stroke-width:1.8}
.km-kaart b{display:block;margin-bottom:4px}
.km-kaart>span:last-child>span{font-size:.9rem;color:var(--ink-2);display:block}

.tr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:var(--sp-4)}
.tr-kaart{border:1px solid var(--sand);border-radius:var(--r-md);padding:24px;background:var(--cream-2)}
.tr-kaart>b{display:block;font-family:var(--font-display);font-size:1.12rem;color:var(--blue-900)}
.tr-prijs{display:block;font-family:var(--font-display);font-size:1.8rem;color:var(--blue-600);margin:10px 0 2px;font-weight:700}
.tr-prijs small{font-size:.85rem;font-family:var(--font-sans);color:var(--muted);font-weight:500}
.tr-tekst{font-size:.9rem;color:var(--ink-2);display:block}
.tr-noot{margin-top:var(--sp-3);font-size:.9rem;color:var(--muted);display:flex;gap:10px;align-items:center}
.tr-noot svg{width:16px;height:16px;stroke:var(--blue-600);fill:none;stroke-width:2;flex:none}