/* PanelPrint — panelprint.css (tokens + componenten voor de Twig-frontend) */
:root{
--pp-navy:#001C36;--pp-navy-logo:#001C36;--pp-blue-50:#ECF5FF;--pp-blue-100:#D5E2F2;--pp-white:#FFFFFF; /* Figma: Donkerblauw, Lichtblauw, Zachtblauw */
--pp-gradient-from:#C24A00;--pp-gradient-to:#C81F87;--pp-gradient:linear-gradient(90deg,var(--pp-gradient-from),var(--pp-gradient-to));
--pp-ink:#001C36;--pp-body:#3A4658;--pp-muted:#6B7789;--pp-line:#DCE4EE;--pp-surface:#F7FAFD;
--pp-ok:#1E7A5A;--pp-warn:#A66A00;--pp-error:#B3261E;
--pp-font:"Branding","Mulish",system-ui,-apple-system,sans-serif;
--pp-weight-normal:400;--pp-weight-medium:500;--pp-weight-semibold:600;--pp-weight-bold:700;
/* Figma-styleguide: H1 52/56, H2 48/52, H3 44/48, body 22/30; mobiel H1 36, H2 32, H3 28 */
--pp-text-display:clamp(2.25rem,1.2rem + 2.6vw,3.25rem);--pp-text-h1:clamp(2.25rem,1.2rem + 2.6vw,3.25rem);--pp-text-h2:clamp(2rem,1.1rem + 2.4vw,3rem);--pp-text-h3:clamp(1.5rem,1.2rem + .8vw,1.875rem);--pp-text-h4:1.625rem;
--pp-text-lg:1.375rem;--pp-text-base:1.375rem;--pp-text-sm:1.125rem;--pp-text-xs:0.875rem;
--pp-leading-tight:1.08;--pp-leading-snug:1.2;--pp-leading-relaxed:1.4;
--pp-tracking-tight:-0.02em;--pp-tracking-wide:0.04em;
--pp-space-1:.25rem;--pp-space-2:.5rem;--pp-space-3:.75rem;--pp-space-4:1rem;--pp-space-6:1.5rem;--pp-space-8:2rem;
--pp-space-10:2.5rem;--pp-space-14:3.5rem;--pp-space-20:5rem;--pp-space-30:7.5rem;
--pp-container:1200px;--pp-container-wide:1440px;
--pp-radius-sm:.5rem;--pp-radius-md:1rem;--pp-radius-lg:1.5rem;--pp-radius-pill:999px;
--pp-shadow-card:0 2px 8px rgba(0,28,54,.06);--pp-shadow-float:0 8px 24px rgba(0,28,54,.10);
--pp-duration:200ms;--pp-ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%}
section[id],div[id]{scroll-margin-top:84px}
body{margin:0;font-family:var(--pp-font);color:var(--pp-body);background:var(--pp-white);font-size:var(--pp-text-base);line-height:var(--pp-leading-relaxed)}
a{color:var(--pp-navy)}
h1,h2,h3,h4{color:var(--pp-ink);font-weight:var(--pp-weight-semibold);line-height:var(--pp-leading-snug);margin:0}
:focus-visible{outline:2px solid var(--pp-navy);outline-offset:2px}

/* Layout */
.container{max-width:var(--pp-container-wide);margin:0 auto;padding-left:clamp(24px,3vw,40px);padding-right:clamp(24px,3vw,40px)}
.container--narrow{max-width:1100px}
.section{padding:clamp(4rem,9vw,7.5rem) 0}
.section--flush-top{padding-top:0}
.section--blue{background:var(--pp-blue-50)}
.section--navy{background:var(--pp-navy)}
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}
.section--navy p{color:rgba(255,255,255,.85)}
.section--gradient{background:var(--pp-gradient)}
.section--gradient h1,.section--gradient h2{color:#fff}

/* Typo helpers */
.eyebrow{font-size:var(--pp-text-xs);letter-spacing:var(--pp-tracking-wide);text-transform:uppercase;color:var(--pp-muted)}
.h-display{font-size:var(--pp-text-display);line-height:var(--pp-leading-tight);letter-spacing:var(--pp-tracking-tight)}
.h-page{font-size:var(--pp-text-h1);line-height:1.08;letter-spacing:var(--pp-tracking-tight)}
.h-section{font-size:clamp(1.5rem,3vw,2rem);line-height:1.25;letter-spacing:var(--pp-tracking-tight)}
.h-feature{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.2;letter-spacing:var(--pp-tracking-tight)}
.intro{font-size:var(--pp-text-lg)}
.small{font-size:var(--pp-text-sm)}
.footnote{font-size:var(--pp-text-xs);color:var(--pp-muted)}

/* Knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 20px;border-radius:var(--pp-radius-pill);font-family:var(--pp-font);font-size:1.25rem;font-weight:var(--pp-weight-medium);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:filter var(--pp-duration) var(--pp-ease),background var(--pp-duration) var(--pp-ease)}
.btn--primary{background:var(--pp-gradient);color:#fff}
.btn--primary::after{content:"";width:16px;height:16px;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 12L12 4M6 4h6v6%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 12L12 4M6 4h6v6%27/%3E%3C/svg%3E") center/contain no-repeat} /* Figma: ↗ alleen op primair */
.header-pill .btn--primary{min-height:44px;padding:10px 22px;font-size:var(--pp-text-xs)} /* header houdt de compacte maat */
.btn--primary:hover{filter:saturate(1.15) brightness(.96)}
.btn--secondary{border-color:var(--pp-navy);color:var(--pp-navy);background:transparent}
.btn--secondary:hover{background:var(--pp-blue-50)}
.btn--onimage{border-color:#fff;color:#fff;background:transparent}
.btn--onimage:hover{background:rgba(255,255,255,.12)}
.btn--contrast{background:#fff;color:var(--pp-gradient-to)}
.btn--contrast:hover{filter:brightness(.97)}

/* Tags */
.tag{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border-radius:var(--pp-radius-sm);font-size:var(--pp-text-xs);background:rgba(0,28,54,.55);color:#fff}
.tag--light{background:var(--pp-blue-100);color:var(--pp-navy)}

/* Header */
.site-header{position:absolute;top:24px;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:0 clamp(12px,2vw,24px)}
.site-header__inner{position:relative;width:100%;max-width:1440px}
.header-pill{background:#fff;border-radius:var(--pp-radius-pill);box-shadow:var(--pp-shadow-float);display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 12px 10px 28px}
.header-burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:50%;border:0;background:var(--pp-blue-50);color:var(--pp-navy);align-items:center;justify-content:center;cursor:pointer}
.header-fabs{display:none}
.header-fab{position:fixed;top:12px;z-index:60;width:48px;height:48px;border-radius:50%;border:0;box-shadow:var(--pp-shadow-float);display:flex;align-items:center;justify-content:center;cursor:pointer;animation:pp-fab-in 240ms var(--pp-ease) both}
.header-fab--logo{left:12px;background:#fff}
.header-fab--logo img{height:24px;display:block}
.header-fab--menu{right:12px;background:var(--pp-gradient);color:#fff}
@keyframes pp-fab-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes pp-pill-in{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}
@media (min-width:761px){
  .js.is-scrolled .header-pill{position:fixed;top:12px;left:50%;transform:translate(-50%,0);width:min(1440px,calc(100% - 2*clamp(12px,2vw,24px)));z-index:60;animation:pp-pill-in 260ms var(--pp-ease) both}
  .js.is-scrolled .megamenu{position:fixed;top:76px;left:50%;right:auto;transform:translateX(-50%);width:min(1440px,calc(100% - 2*clamp(12px,2vw,24px)));padding-top:10px}
  .js.is-scrolled .subnav,.js.is-scrolled .filter-sticky,.subnav,.filter-sticky{top:76px} /* Raymon, 22 sep 2026: was 92 */
  .subnav,.filter-sticky{background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:0;pointer-events:none}
  /* Eigen afwijking op het CD-pakket (21 sep 2026, Raymon): de subnavigatie is
     ONDERGESCHIKT aan het hoofdmenu - smaller, lager, kleinere letter, een dun
     lijntje rondom en een lichte schaduw in plaats van de zwevende schaduw van
     de hoofdpil. Het pakket vervaagde de uiteinden met een `mask`: die maakte
     ook de ronde hoeken en de schaduw van de pil zelf doorzichtig. Nu een
     randschaduw als ACHTERGROND: de twee witte vlakken schuiven met de inhoud
     mee (local) en dekken de schaduw (scroll) af zodra je aan dat eind bent -
     je ziet hem dus alleen waar nog iets te scrollen valt. */
  .subnav__inner,.filter-sticky>.filter-bar{pointer-events:auto;width:fit-content;max-width:min(1080px,calc(100% - 2*clamp(32px,5vw,72px)));margin:0 auto;padding:10px 12px;min-height:0;border-radius:var(--pp-radius-pill);border:1px solid var(--pp-blue-100);box-shadow:0 6px 18px rgba(0,28,54,.10);gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask:none;mask:none;
    background:linear-gradient(90deg,#fff 45%,rgba(255,255,255,0)) left center/56px 100% no-repeat local,
      linear-gradient(270deg,#fff 45%,rgba(255,255,255,0)) right center/56px 100% no-repeat local,
      linear-gradient(90deg,rgba(0,28,54,.18),rgba(0,28,54,0)) left center/24px 100% no-repeat scroll,
      linear-gradient(270deg,rgba(0,28,54,.18),rgba(0,28,54,0)) right center/24px 100% no-repeat scroll,#fff}
  .subnav__inner::-webkit-scrollbar,.filter-sticky>.filter-bar::-webkit-scrollbar{display:none}
  .subnav__cta,.filter-sticky .filter-count{display:none}
  /* Een pil breekt niet af en krimpt niet: "Kunst en objecten" stond in drie
     regels. Langere pil, de balk scrollt. */
  .filter-sticky .filter-pill{min-height:30px;padding:4px 14px;font-size:var(--pp-text-xs);white-space:nowrap;flex:0 0 auto}
  section[id],div[id]{scroll-margin-top:160px}
}
/* Mobiel menu (sheet) */
.sheet{position:fixed;inset:0;z-index:100;background:#fff;display:none;flex-direction:column;animation:pp-sheet-in 260ms var(--pp-ease)}
.sheet.is-open{display:flex}
@keyframes pp-sheet-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.sheet__head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px 24px;border-bottom:1px solid var(--pp-line)}
.sheet__head img{height:32px;display:block}
.sheet__close{width:44px;height:44px;border-radius:50%;border:1px solid var(--pp-line);background:#fff;color:var(--pp-navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;line-height:1}
.sheet__nav{flex:1 1 auto;overflow-y:auto;padding:8px 24px 24px;display:flex;flex-direction:column}
.sheet__nav>a,.sheet__nav summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;color:var(--pp-ink);font-size:var(--pp-text-h4);font-weight:var(--pp-weight-semibold);text-decoration:none;border-bottom:1px solid var(--pp-line);cursor:pointer;list-style:none}
.sheet__nav summary::-webkit-details-marker{display:none}
.sheet__nav summary::after{content:"+";color:var(--pp-navy);font-size:1.4em;line-height:.8;transition:transform 200ms var(--pp-ease)}
.sheet__nav details[open] summary::after{transform:rotate(45deg)}
.sheet__sub{display:flex;flex-direction:column;padding:0 0 12px 16px}
.sheet__sub a{display:flex;align-items:center;min-height:44px;color:var(--pp-navy);text-decoration:none}
.sheet__nav>a.is-muted{color:var(--pp-muted);font-size:var(--pp-text-base);font-weight:var(--pp-weight-normal);border-bottom:0}
.sheet__foot{flex:0 0 auto;padding:16px 24px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--pp-line);background:#fff;display:flex;flex-direction:column;gap:10px}
.sheet__foot .btn{width:100%;box-sizing:border-box}
.sheet__row{display:flex;gap:10px}
.sheet__row .btn{flex:1 1 0;min-height:44px;padding:8px 12px;font-size:var(--pp-text-sm)}
body.menu-open{overflow:hidden}
body.menu-open .whatsapp-fab{display:none}
.header-pill__logo img{height:30px;display:block}
.header-nav{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(12px,1.8vw,30px);margin-left:auto}
.header-nav a{font-size:var(--pp-text-base);text-decoration:none;padding:10px 0;text-underline-offset:4px}
.header-nav a:hover{text-decoration:underline}
.header-nav a.is-muted{color:var(--pp-muted)}
/* Inloggen als ronde secundaire knop, direct links van "Vraag advies aan".
   Gebruikt de haken die het pakket al meelevert (.login-text/.login-icon);
   de tekst blijft als toegankelijke naam in de DOM staan. */
.header-nav a.header-login{position:relative;display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;border-radius:50%;border:1px solid var(--pp-line);color:var(--pp-navy);background:#fff;text-decoration:none;transition:background var(--pp-duration) var(--pp-ease),border-color var(--pp-duration) var(--pp-ease)}
.header-nav a.header-login:hover{background:var(--pp-blue-50);border-color:var(--pp-navy);text-decoration:none}
.header-nav a.header-login .login-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.header-nav a.header-login .login-icon{display:block}
/* taalwissel (22 sep 2026): dezelfde ronde pil als Inloggen, met de taalcode erin */
.header-nav a.header-lang{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;border-radius:50%;border:1px solid var(--pp-line);color:var(--pp-navy);background:#fff;text-decoration:none;font-size:var(--pp-text-xs);font-weight:var(--pp-weight-medium);letter-spacing:.04em;transition:background var(--pp-duration) var(--pp-ease),border-color var(--pp-duration) var(--pp-ease)}
.header-nav a.header-lang:hover{background:var(--pp-blue-50);border-color:var(--pp-navy);text-decoration:none}
.header-lang--mobiel{display:none;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--pp-line);color:var(--pp-navy);background:#fff;text-decoration:none;font-size:var(--pp-text-xs);font-weight:var(--pp-weight-medium);letter-spacing:.04em}
/* Taalhint (site.js, 22 sep 2026): een suggestie onderaan als de browser een andere taal
   spreekt dan de pagina - geen doorverwijzing. Boven de WhatsApp-knop, links ervan. */
.taalhint{position:fixed;left:16px;right:88px;bottom:16px;z-index:70;display:flex;align-items:center;gap:12px;max-width:520px;margin:0 auto;padding:12px 14px 12px 18px;border-radius:var(--pp-radius-md);background:#fff;color:var(--pp-navy);box-shadow:var(--pp-shadow-float);font-size:var(--pp-text-sm);animation:pp-fab-in 300ms var(--pp-ease) both}
.taalhint span{flex:1 1 auto;min-width:0;line-height:1.45}
.taalhint a{color:var(--pp-navy);font-weight:var(--pp-weight-semibold)}
.taalhint button{margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;background:var(--pp-blue-50);color:var(--pp-navy);font-size:18px;line-height:1;cursor:pointer;flex:0 0 auto}
@media (min-width:761px){.taalhint{left:auto;right:96px}}

/* Megamenu */
.megamenu{position:absolute;top:100%;left:0;right:0;padding-top:10px;z-index:40;display:none}
.megamenu.is-open{display:block}
.megamenu__panel{display:flex;align-items:stretch;background:#fff;border-radius:var(--pp-radius-lg);box-shadow:var(--pp-shadow-float);overflow:hidden}
.megamenu__info{flex:0 0 30%;min-width:0;position:relative;background:var(--pp-blue-50);min-height:400px}
.megamenu__info-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;color:var(--pp-muted);font-size:var(--pp-text-sm)}
/* Eigen afwijking (21 sep 2026): beginfoto van het uitklapmenu, zolang er nog over geen item bewogen is. */
.megamenu__info-empty--beeld{padding:0;gap:0;align-items:stretch;justify-content:flex-end;text-align:left;background:var(--pp-navy);overflow:hidden}
.megamenu__info-empty--beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.megamenu__info-empty--beeld .megamenu__info-body--begin{background:linear-gradient(180deg,rgba(0,28,54,0) 0%,rgba(0,28,54,.9) 70%);padding-top:64px}
.megamenu__info-card{position:absolute;inset:0;background:var(--pp-navy);display:none;flex-direction:column;justify-content:flex-end;animation:pp-slide 240ms var(--pp-ease)}
.megamenu__info-card.is-active{display:flex}
.megamenu__info-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.megamenu__info-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,28,54,.1) 30%,rgba(0,28,54,.9) 100%)}
.megamenu__info-body{position:relative;z-index:1;padding:28px;color:#fff}
.megamenu__info-body p{margin:8px 0 0;color:rgba(255,255,255,.88);font-size:var(--pp-text-sm)}
.megamenu__cols{flex:1 1 0;min-width:0;padding:clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,2.5vw,36px)}
.megamenu__col+.megamenu__col{border-left:1px solid var(--pp-line);padding-left:clamp(20px,2.5vw,36px)}
.megamenu__col a{display:block;color:var(--pp-navy);text-decoration:none;padding:5px 0}
.megamenu__col a:hover{text-decoration:underline}
.megamenu__col .eyebrow{margin-bottom:10px}
/* Eigen afwijking op het CD-pakket (21 sep 2026): het pakket had hier een
   raster van vast 2 x 6. Met twaalf items zat dat vol; een dertiende dwong een
   derde kolom af. Kolommen verdelen elk aantal, en een ingesprongen item
   (is-sub, valt onder het item erboven) breekt niet los van zijn ouder. */
.megamenu__twocol{columns:2;column-gap:clamp(20px,2.5vw,40px)}
.megamenu__twocol a{break-inside:avoid}
.megamenu__col a.is-sub{padding-left:14px;font-size:.92em;opacity:.82;break-before:avoid}
.megamenu__col a.is-sub::before{content:"\2013\00a0";opacity:.6}
.sheet__sub a.is-sub{padding-left:16px;min-height:38px;font-size:.94em;opacity:.85}
@keyframes pp-slide{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}

/* Breadcrumb */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--pp-text-sm);color:var(--pp-muted)}
.breadcrumb a{color:var(--pp-muted);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .is-current{color:var(--pp-navy)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--pp-space-6)}
.stat{border-left:1px solid var(--pp-line);padding-left:24px}
.stat__value{font-size:clamp(1.9rem,3vw,2.6rem);color:var(--pp-ink);font-weight:var(--pp-weight-semibold);letter-spacing:var(--pp-tracking-tight);line-height:1.1}
.stat__label{margin-top:8px;font-size:var(--pp-text-sm)}

/* Kaarten en tegels */
.card{background:#fff;border-radius:var(--pp-radius-md);box-shadow:var(--pp-shadow-card);padding:clamp(28px,3vw,44px)}
.card--line{box-shadow:none;border:1px solid var(--pp-line)}
.card--blue{background:var(--pp-blue-50);box-shadow:none}
.tile{display:block;position:relative;border-radius:var(--pp-radius-md);overflow:hidden;text-decoration:none}
.tile img{width:100%;object-fit:cover;display:block}
.tile__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:24px;background:linear-gradient(180deg,rgba(0,28,54,.38) 0%,rgba(0,28,54,.84) 100%);opacity:0;transition:opacity var(--pp-duration) var(--pp-ease);pointer-events:none}
.tile:hover .tile__overlay{opacity:1}
.tile__caption{color:#fff;font-weight:var(--pp-weight-semibold);font-size:var(--pp-text-h4);line-height:1.4}
.tile__tags{display:flex;flex-wrap:wrap;gap:6px}
.tile__bottom{position:absolute;left:0;right:0;bottom:0;padding:24px;background:linear-gradient(180deg,rgba(0,28,54,0) 0%,rgba(0,28,54,.8) 100%)}

/* Masonry (projecten) */
.masonry{display:flex;flex-wrap:wrap;gap:var(--pp-space-6);align-items:flex-start}
.masonry__col{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:var(--pp-space-6)}

/* Tabellen */
.data-table{background:#fff;border:1px solid var(--pp-line);border-radius:var(--pp-radius-md);overflow-x:auto}
.data-table__head,.data-table__row{display:flex;gap:16px;padding:16px clamp(20px,2.5vw,32px);min-width:640px}
.data-table__head{background:var(--pp-blue-50);border-bottom:1px solid var(--pp-line)}
.data-table__row{border-bottom:1px solid var(--pp-line);align-items:baseline;font-size:var(--pp-text-sm)}
.data-table__row strong{color:var(--pp-ink)}
.data-table .footnote{padding:14px clamp(20px,2.5vw,32px) 16px;margin:0}

/* Formulieren */
.field{display:flex;flex-direction:column;gap:6px;font-size:var(--pp-text-sm);color:var(--pp-ink);font-weight:var(--pp-weight-medium)}
.field input,.field textarea,.field select{border:1px solid var(--pp-blue-100);border-radius:var(--pp-radius-sm);padding:12px 14px;font-family:var(--pp-font);font-size:var(--pp-text-base);color:var(--pp-ink);width:100%}
.field textarea{resize:vertical}
/* de voorbeeldtekst in het contactformulier: lichter en kleiner dan wat je zelf typt */
.field textarea::placeholder,.field input::placeholder{color:var(--pp-muted);opacity:.75;font-size:var(--pp-text-sm)}

/* Expert-CTA band */
.expert-band{position:relative;overflow:hidden;padding:clamp(5rem,9vw,7.5rem) 0 clamp(2rem,4vw,3.5rem)}
.expert-band__bg{position:absolute;inset:0}
.expert-band__bg img{width:100%;height:100%;object-fit:cover}
.expert-band::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(194,74,0,.85),rgba(200,31,135,.85));z-index:1}
.expert-band>.container{position:relative;z-index:2}
/* Expert-band als witte kaart (CD-canvas; ontbrak in CD's template, 3-9-2026) */
.expert-card{background:var(--pp-white);border-radius:var(--pp-radius-lg);display:grid;grid-template-columns:280px 1fr;align-items:end;gap:var(--pp-space-10);padding:0 var(--pp-space-14) 0 var(--pp-space-8);max-width:975px;margin:0 auto}
.expert-card--zonder-portret{grid-template-columns:1fr;padding:0 var(--pp-space-14)}
.expert-card__portret{align-self:end}
.expert-card__portret img{width:100%;display:block;margin-top:-40px}
.expert-card__tekst{padding:var(--pp-space-10) 0}
/* Projecttegel: link binnenin, labels erbuiten als eigen links (eigen afwijking, zie ui.projectTile) */
.tile__link{display:block;color:inherit;text-decoration:none}
/* De labels zijn tot hover onzichtbaar (opacity .001, CD) en mogen dan ook geen tik
   onderscheppen - anders opent een tik linksboven op een tegel het filter i.p.v. het project. */
.tile__tags--links{position:absolute;left:24px;top:24px;z-index:2;pointer-events:none}
.tile:hover .tile__tags--links,.tile:focus-within .tile__tags--links{pointer-events:auto}
.tile__tags--links a.tag{text-decoration:none;transition:background var(--pp-duration) var(--pp-ease)}
.tile__tags--links a.tag:hover{background:rgba(0,28,54,.9)}
.tile:focus-within .tile__overlay,.tile:focus-within .tile__tags{opacity:1;transform:none}
.tile__link:focus-visible{outline:3px solid #fff;outline-offset:-6px;border-radius:var(--pp-radius-md)}
.tile__tags--links a.tag:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Materialentabel op een projectpagina (eigen blok projectMaterials, geen CD) */
.materials-table{display:flex;flex-direction:column;border-top:1px solid var(--pp-blue-100)}
.materials-table__row{display:grid;grid-template-columns:120px 1fr auto;gap:var(--pp-space-6);align-items:center;padding:var(--pp-space-5) 0;border-bottom:1px solid var(--pp-blue-100);color:inherit;text-decoration:none;transition:background 200ms var(--pp-ease)}
.materials-table__row:hover{background:rgba(0,28,54,.03)}
.materials-table__img{width:120px;height:80px;border-radius:var(--pp-radius-sm);overflow:hidden;background:var(--pp-blue-50)}
.materials-table__body strong{display:block;font-size:var(--pp-text-lg);color:var(--pp-navy)}
.materials-table__body p{margin:6px 0 0;color:var(--pp-muted);font-size:var(--pp-text-sm);max-width:60ch}
.materials-table__link{font-weight:var(--pp-weight-medium);color:var(--pp-navy);white-space:nowrap}
.materials-table__row:hover .materials-table__link{text-decoration:underline}
@media (max-width:640px){.materials-table__row{grid-template-columns:88px 1fr}.materials-table__img{width:88px;height:64px}.materials-table__link{grid-column:2}}
.btn--magenta{border-color:var(--pp-gradient-to);color:var(--pp-gradient-to);background:transparent}
.btn--magenta:hover{background:rgba(200,31,135,.06)}
@media (max-width:760px){.expert-card{grid-template-columns:1fr;gap:0;padding:0 var(--pp-space-6)}.expert-card__portret{max-width:200px;margin:0 auto}.expert-card__tekst{padding:var(--pp-space-6) 0 var(--pp-space-8)}}

/* Footer */
.site-footer{background:var(--pp-navy);color:rgba(255,255,255,.8);padding:clamp(4rem,8vw,6rem) 0 0}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(2rem,4vw,4rem)}
.site-footer__brand img{height:34px}
.site-footer__title{color:#fff;font-weight:var(--pp-weight-semibold);margin-bottom:14px}
.site-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-footer__bottom{margin-top:var(--pp-space-20);border-top:1px solid rgba(255,255,255,.2);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-size:var(--pp-text-sm);color:rgba(255,255,255,.6)}

/* WhatsApp */
.whatsapp-fab{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:var(--pp-shadow-float);z-index:60}

/* Projectenoverzicht */
.tile img{transition:transform 700ms var(--pp-ease)}
.tile:hover img{transform:scale(1.05)}
.tile:hover .tile__tags{transform:none;opacity:1}
.tile__tags{transform:translateY(-8px);opacity:.001;transition:transform 300ms var(--pp-ease) 60ms,opacity 300ms var(--pp-ease) 60ms}
.tile__caption::after{content:" \2192";opacity:0;transition:opacity var(--pp-duration) var(--pp-ease)}
.tile:hover .tile__caption::after{opacity:1}
/* CD dimde alle niet-gehoverde tegels naar .82 zodra de muis boven het raster stond
   (.masonry:hover .tile:not(:hover)); weggehaald op verzoek van Raymon (3 sep 2026):
   tegels blijven helder, alleen de gehoverde krijgt een donker filter (zie .tile__overlay). */
.tile-wrap{will-change:transform}
.tile-wrap.is-hidden{display:none}
.tile-wrap.is-entering{animation:pp-tile-in 500ms var(--pp-ease) both}
@keyframes pp-tile-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.filter-sticky{position:sticky;top:76px;z-index:30;padding:14px 0;transition:box-shadow var(--pp-duration) var(--pp-ease),background var(--pp-duration) var(--pp-ease)}
/* .filter-sticky.is-stuck had een volle-breedte blauwe band; die won op specificiteit van de pil-reset en kleurde op mobiel de witte pil blauw. */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.filter-pill{display:inline-flex;align-items:center;min-height:44px;padding:8px 20px;border-radius:var(--pp-radius-pill);border:1px solid var(--pp-blue-100);background:transparent;color:var(--pp-navy);font-size:var(--pp-text-sm);text-decoration:none;cursor:pointer;font-family:var(--pp-font);transition:background var(--pp-duration) var(--pp-ease)}
.filter-pill:hover{background:var(--pp-blue-50)}
.filter-pill.is-active{background:var(--pp-navy);border-color:var(--pp-navy);color:#fff}
.filter-count{margin-left:auto;font-size:var(--pp-text-sm);color:var(--pp-muted)}
.masonry--wide{max-width:1650px;margin:0 auto;padding:0 clamp(24px,3vw,40px)}
/* Masonry, eigen uitbreiding op het CD-pakket (21 sep 2026, Raymon).
   k4 = vier kolommen (Beheer -> Template van het blok). */
.masonry--k4 .masonry__col{flex-basis:250px}
.masonry--wide.masonry--k4{max-width:1840px}
/* Homepage: elke kolom drijft op eigen tempo zacht op en neer. site.js meet
   per kolom hoeveel er onder het venster uitsteekt (--drift) en geeft elke
   kolom een eigen duur; `alternate` keert om, dus het raakt nooit op. */
@keyframes pp-drift{from{transform:translateY(0)}to{transform:translateY(calc(-1*var(--drift,0px)))}}
.js [data-masonry-drift].is-actief .masonry__col{animation:pp-drift var(--duur,48s) ease-in-out infinite alternate;will-change:transform}
[data-masonry-drift]:hover .masonry__col,[data-masonry-drift]:focus-within .masonry__col{animation-play-state:paused}
/* De onderrand: een zware schaduw, alsof de tegels onder de volgende sectie
   doorschuiven; de knop staat erin, zodat het blok schoon aansluit. */
.masonry-window__edge--onder{position:absolute;left:0;right:0;bottom:0;height:170px;pointer-events:none;background:linear-gradient(0deg,rgba(7,27,52,.66) 0%,rgba(7,27,52,.3) 42%,rgba(7,27,52,0) 100%);box-shadow:inset 0 -16px 20px -12px rgba(0,0,0,.5)}
.masonry-window__knop{position:absolute;left:0;right:0;bottom:clamp(26px,4vw,46px);display:flex;justify-content:center;pointer-events:none;z-index:2}
.masonry-window__knop .btn{pointer-events:auto;box-shadow:0 12px 32px rgba(0,0,0,.38)}
/* Projectenpagina: tegels komen bij het scrollen binnen, per kolom iets later;
   de foto zoomt licht bij hover. */
.js .tile-wrap.tile-reveal{opacity:0;transform:translateY(46px) scale(.965)}
.js .tile-wrap.tile-reveal.is-in{opacity:1;transform:none;transition:opacity 700ms var(--pp-ease),transform 800ms cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--kol,0)*90ms)}
.tile img{transition:transform 900ms cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.045)}
/* Projectdetail */
.meta-card{background:var(--pp-blue-50);border-radius:var(--pp-radius-md);padding:clamp(28px,3vw,40px)}
.meta-card__row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--pp-blue-100);font-size:var(--pp-text-sm);align-items:baseline}
.meta-card__row a{font-weight:var(--pp-weight-medium);text-decoration:none}
.meta-card__row a:hover{text-decoration:underline}
.quote-band{text-align:center}
.quote-band p{max-width:36ch;margin:0 auto;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.45;letter-spacing:var(--pp-tracking-tight);font-weight:var(--pp-weight-medium)}

/* Reveal on scroll (alleen met JS; zonder JS blijft alles zichtbaar) */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--pp-ease),transform 700ms var(--pp-ease)}
.js [data-reveal].is-inview{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}.tile-wrap.is-entering{animation:none}html{scroll-behavior:auto}.js [data-masonry-drift] .masonry__col{animation:none!important}.page-hero__slide.is-active{animation:none}.js .tile-wrap.tile-reveal{opacity:1;transform:none}.tile img{transition:none}.tile:hover img{transform:none}}

/* Subnavigatie (ankers, sticky) */
.subnav{position:sticky;top:76px;z-index:30}/* geen eigen achtergrond: beide media-queries tekenen een zwevende pil (.subnav__inner). Stond hier eerder als volle-breedte balk en won van de reset op regel ~82, waardoor er een witte band naast de pil bleef staan. */
.subnav__inner{display:flex;align-items:center;gap:8px;min-height:0;overflow-x:auto;scrollbar-width:none}
.subnav__inner::-webkit-scrollbar{display:none}
.subnav__inner>a:not(.btn){white-space:nowrap;text-decoration:none;font-size:var(--pp-text-sm);color:var(--pp-muted);padding:20px 0 18px;border-bottom:2px solid transparent;transition:color var(--pp-duration) var(--pp-ease),border-color var(--pp-duration) var(--pp-ease)}
.subnav__inner>a:not(.btn):hover,.subnav__inner>a.is-active{color:var(--pp-navy);border-bottom-color:var(--pp-navy)}
/* Raymon, 22 sep 2026: de ankernavigatie in dezelfde pillen als het projectfilter.
   NA de regels hierboven: gelijke specificiteit, dus de laatste wint - een eerdere
   poging in de media-query bovenin werd hier stilzwijgend overschreven. */
.subnav__inner>a:not(.btn){display:inline-flex;align-items:center;min-height:30px;padding:4px 14px;border-radius:var(--pp-radius-pill);border:1px solid var(--pp-blue-100);font-size:var(--pp-text-xs);color:var(--pp-navy);white-space:nowrap;flex:0 0 auto;transition:background var(--pp-duration) var(--pp-ease),color var(--pp-duration) var(--pp-ease)}
.subnav__inner>a:not(.btn):hover{background:var(--pp-blue-50);color:var(--pp-navy)}
.subnav__inner>a.is-active{background:var(--pp-navy);border-color:var(--pp-navy);color:#fff}
.subnav__cta{margin-left:auto;min-height:38px;padding:6px 20px;font-size:var(--pp-text-sm)}

/* Verkoopmodus-badge */
.badge{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:4px 12px 4px 10px;border-radius:var(--pp-radius-sm);font-size:var(--pp-text-sm);font-weight:var(--pp-weight-medium);background:var(--pp-surface);border:1px solid var(--pp-line);color:var(--pp-body);white-space:nowrap}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pp-muted);flex-shrink:0}
.badge--direct::before{background:var(--pp-ok)}
.badge--offerte::before{background:var(--pp-warn)}
.badge--onimage{background:rgba(255,255,255,.94);border-color:transparent}

/* Kernfeiten (definitielijst) */
.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--pp-space-6);margin:0}
.keyfacts__item{border-left:1px solid var(--pp-line);padding-left:24px}
.keyfacts dt{font-size:var(--pp-text-sm);color:var(--pp-muted);order:2}
.keyfacts dd{margin:0 0 8px;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--pp-ink);font-weight:var(--pp-weight-semibold);letter-spacing:var(--pp-tracking-tight);line-height:1.1}
.keyfacts__item{display:flex;flex-direction:column}

/* Veelgestelde vragen */
.faq{border-top:1px solid var(--pp-line)}
.faq details{border-bottom:1px solid var(--pp-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:20px 0;color:var(--pp-ink);font-weight:var(--pp-weight-medium);font-size:var(--pp-text-lg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;font-size:1.5em;line-height:.8;color:var(--pp-navy);transition:transform var(--pp-duration) var(--pp-ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__body{padding:0 0 24px;max-width:70ch;animation:pp-fade 300ms var(--pp-ease)}
@keyframes pp-fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Richtext */
.richtext>*:first-child{margin-top:0}
.richtext>*:last-child{margin-bottom:0}
.richtext p,.richtext ul,.richtext ol{margin:0 0 1.2em}
.richtext h2{font-size:var(--pp-text-h3);margin:2em 0 .6em}
.richtext h3{font-size:var(--pp-text-h4);margin:1.6em 0 .5em}
.richtext strong{color:var(--pp-ink)}
.richtext a{text-underline-offset:3px}
.richtext--cols{columns:2;column-gap:clamp(2rem,4vw,4rem)}
.richtext--cols p{break-inside:avoid}

/* Varianten met uitklapbare specs */
.variant{border-top:1px solid var(--pp-line)}
.variant summary{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:12px 0;font-size:var(--pp-text-sm);cursor:pointer}
.variant summary::-webkit-details-marker{display:none}
.variant summary>span:first-child{color:var(--pp-ink);font-weight:var(--pp-weight-medium)}
.variant summary>span:last-child{color:var(--pp-muted);display:inline-flex;gap:10px;align-items:center;white-space:nowrap}
.variant summary>span:last-child::after{content:"+";color:var(--pp-navy);font-size:1.1rem;transition:transform var(--pp-duration) var(--pp-ease)}
.variant[open] summary>span:last-child::after{transform:rotate(45deg)}
.variant__specs{margin:0 0 14px;padding:12px 16px;background:var(--pp-blue-50);border-radius:var(--pp-radius-sm);font-size:var(--pp-text-sm);display:grid;grid-template-columns:auto 1fr;gap:6px 18px}
.variant__specs dt{color:var(--pp-muted)}
.variant__specs dd{margin:0;color:var(--pp-ink);font-weight:var(--pp-weight-medium)}

/* Page-hero v2 (alle pagina's): foto, navy fade, oranjeroze zweem onderin, inhoud onderaan */
.page-hero{position:relative;min-height:min(820px,90vh);display:flex;flex-direction:column;overflow:hidden;background:var(--pp-navy)}
.page-hero--short{min-height:min(640px,74vh)}
.page-hero--tall{min-height:min(920px,100vh)}
.page-hero>img,.page-hero__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Uitlijning van de hero-foto (Beheer, naast de foto; 22 sep 2026): standaard het midden */
.page-hero>img.is-focus-boven,.page-hero__slide.is-focus-boven,img.is-focus-boven{object-position:50% 0}
.page-hero>img.is-focus-onder,.page-hero__slide.is-focus-onder,img.is-focus-onder{object-position:50% 100%}
.page-hero__navy{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,28,54,.42) 0%,rgba(0,28,54,.08) 38%,rgba(0,28,54,.86) 100%);pointer-events:none}
.page-hero__grad{position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(35deg,rgba(194,74,0,.7) 0%,rgba(200,31,135,.5) 30%,rgba(200,31,135,0) 62%);-webkit-mask:linear-gradient(180deg,transparent,#000 40%);mask:linear-gradient(180deg,transparent,#000 40%);pointer-events:none}
.page-hero__content{position:relative;z-index:2;margin-top:auto;width:100%;padding-top:clamp(9rem,18vh,12rem);padding-bottom:clamp(40px,6vh,80px)}
.page-hero__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--pp-space-8) var(--pp-space-14)}
.page-hero__main{flex:1 1 520px;min-width:0;max-width:800px;animation:pp-hero-in 900ms var(--pp-ease) both}
.page-hero__meta{flex:0 1 360px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;animation:pp-hero-in 900ms var(--pp-ease) 300ms both}
.page-hero .breadcrumb,.page-hero .breadcrumb a{color:rgba(255,255,255,.75)}
.page-hero .breadcrumb .is-current{color:#fff}
.page-hero .eyebrow{margin-top:var(--pp-space-6);color:rgba(255,255,255,.75)}
.page-hero__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.page-hero h1{margin:12px 0 0;color:#fff;font-size:clamp(2.25rem,4.6vw,3.5rem);line-height:1.12;letter-spacing:var(--pp-tracking-tight);max-width:18ch}
.page-hero .intro{margin:var(--pp-space-6) 0 0;max-width:54ch;color:rgba(255,255,255,.88)}
.page-hero__btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:var(--pp-space-8)}
.page-hero__note{margin:var(--pp-space-4) 0 0;font-size:var(--pp-text-sm);color:rgba(255,255,255,.72)}
.page-hero__meta .eyebrow{margin:0;color:rgba(255,255,255,.6)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--pp-radius-sm);border:1px solid rgba(255,255,255,.35);background:rgba(0,28,54,.35);color:#fff;font-size:var(--pp-text-sm);font-weight:var(--pp-weight-medium);white-space:nowrap}
@keyframes pp-hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Hero-slideshow (home): beelden vloeien in elkaar over, bijschrift wisselt mee */
/* De inzoom was een TRANSITION, en die loopt niet voor de foto die bij het laden
   al actief is: op de homepage zoomden alleen de volgende slides, en een hero met
   één foto (sinds 22 sep 2026 hetzelfde mechanisme) zou stilstaan. Nu een animatie
   die start zodra een foto actief wordt, ook de eerste. De rustand is de EINDstand
   (1.06): een foto die uitvloeit blijft zo staan waar hij was, zonder terugsprong. */
@keyframes pp-hero-zoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.page-hero__slide{opacity:0;transform:scale(1.06);transition:opacity 1600ms var(--pp-ease)}
.page-hero__slide.is-active{opacity:1;animation:pp-hero-zoom 6500ms linear both}
.hero-caps{position:relative;width:100%;height:48px}
.hero-cap{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(6px);transition:opacity 600ms var(--pp-ease),transform 600ms var(--pp-ease)}
.hero-cap.is-active{opacity:1;transform:none}
.hero-cap strong{color:#fff;font-size:var(--pp-text-sm);font-weight:var(--pp-weight-medium)}
.hero-cap span{color:rgba(255,255,255,.7);font-size:var(--pp-text-sm)}
.hero-dots{display:flex;gap:8px;align-items:center}
.hero-dot{width:28px;height:3px;border-radius:2px;background:rgba(255,255,255,.35);border:0;padding:0;cursor:pointer;transition:background 300ms var(--pp-ease),width 300ms var(--pp-ease)}
.hero-dot.is-active{background:#fff;width:44px}

/* Kaarten als link */
.link-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:box-shadow var(--pp-duration) var(--pp-ease),transform var(--pp-duration) var(--pp-ease)}
.link-card:hover{box-shadow:var(--pp-shadow-float);transform:translateY(-2px)}
.link-card__arrow{margin-top:auto;padding-top:6px;color:var(--pp-navy);font-weight:var(--pp-weight-medium);font-size:var(--pp-text-sm)}
.link-card:hover .link-card__arrow{text-decoration:underline}
.section--navy .link-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:none}
.section--navy .link-card:hover{background:rgba(255,255,255,.1);box-shadow:none}
.section--navy .link-card h3,.section--navy .link-card .link-card__arrow{color:#fff}
.section--navy .link-card p{color:rgba(255,255,255,.75)}

/* Producttegel (overzicht) */
.product-tile{position:relative;display:flex;flex-direction:column;border-radius:var(--pp-radius-md);overflow:hidden;background:#fff;box-shadow:var(--pp-shadow-card);text-decoration:none;transition:box-shadow var(--pp-duration) var(--pp-ease)}
.product-tile:hover{box-shadow:var(--pp-shadow-float)}
.product-tile__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--pp-blue-50)}
.product-tile__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 700ms var(--pp-ease)}
.product-tile:hover .product-tile__img img{transform:scale(1.04)}
.product-tile__img .badge{position:absolute;left:16px;top:16px}
.product-tile__body{padding:clamp(20px,2.5vw,28px);display:flex;flex-direction:column;gap:8px;flex:1}
.product-tile__body p{margin:0;font-size:var(--pp-text-sm)}

/* Tijdlijn (over) */
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--pp-space-6);counter-reset:none}
.timeline__item{border-top:2px solid var(--pp-navy);padding-top:16px}
.timeline__year{font-size:var(--pp-text-h3);color:var(--pp-ink);font-weight:var(--pp-weight-semibold);letter-spacing:var(--pp-tracking-tight)}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--pp-space-6)}
.team-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--pp-radius-md);display:block}

/* Downloads */
.dl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--pp-line)}
.dl-list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--pp-line);text-decoration:none}
.dl-list a:hover strong{text-decoration:underline}
.dl-list span{font-size:var(--pp-text-sm);color:var(--pp-muted);white-space:nowrap}

/* Formulieren */
.form-row{display:flex;flex-wrap:wrap;gap:16px}
.form-row>*{flex:1 1 180px}
.form-status{border-radius:var(--pp-radius-sm);padding:14px 18px;font-size:var(--pp-text-sm);margin-top:1.5rem}
.form-status--ok{background:rgba(30,122,90,.1);color:var(--pp-ok)}
.form-status--error{background:rgba(179,38,30,.08);color:var(--pp-error)}

/* Sorteerbare tabel */
.data-table[data-sortable] .data-table__head [data-sort]{cursor:pointer;user-select:none}
.data-table[data-sortable] .data-table__head [data-sort]:hover{color:var(--pp-navy)}
.data-table__head .is-sorted{color:var(--pp-navy)}
.data-table__head .is-sorted::after{content:" \2193"}
.data-table__head .is-sorted.is-desc::after{content:" \2191"}

/* Mobiel */
.header-pill__logo .logo-mark{display:none;height:30px}
.login-icon{display:none}
.megamenu__close{display:none;position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:1px solid var(--pp-line);background:#fff;color:var(--pp-navy);font-size:22px;line-height:1;cursor:pointer;z-index:2}
@media (max-width: 960px){
  .megamenu__info{display:none}
  .megamenu__cols{grid-template-columns:1fr}
  .megamenu__col+.megamenu__col{border-left:none;padding-left:0;border-top:1px solid var(--pp-line);padding-top:16px}
  .megamenu__panel{max-height:70vh;overflow-y:auto}
  .reviews-mask{display:none}
  .reviews-left{width:100% !important;padding-left:0 !important;flex:1 1 100% !important}
  .reviews-left h2{color:var(--pp-ink) !important;max-width:none !important}
  .masonry-window{height:560px !important}
}
@media (max-width: 760px){
  .header-pill>.btn,.header-nav,.megamenu{display:none !important}
  .header-burger{display:inline-flex}
  .header-pill{position:relative;justify-content:flex-end;padding:8px;min-height:60px}
  /* links in de pil, spiegelbeeld van het menuknopje; het logo staat gecentreerd en houdt zo vrij baan */
  .header-lang--mobiel{display:grid;order:-1;margin-right:auto}
  .header-pill__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .header-pill__logo .logo-full{display:block;height:26px}
  .js.is-scrolled .header-fabs{display:block}
  .page-hero,.page-hero--short,.page-hero--tall{height:auto;min-height:100vh;min-height:100svh}
  .page-hero--short{min-height:82svh}
  .page-hero__meta{display:none}
  .page-hero__content{padding-bottom:28px}
  .page-hero__navy{background:linear-gradient(180deg,rgba(0,28,54,.5) 0%,rgba(0,28,54,.15) 30%,rgba(0,28,54,.9) 100%)}
  .page-hero__grad{background:linear-gradient(15deg,rgba(194,74,0,.8) 0%,rgba(200,31,135,.6) 40%,rgba(200,31,135,0) 92%)}
  .subnav,.filter-sticky{top:8px;margin:0 68px;padding:0;border:1px solid var(--pp-blue-100);border-radius:var(--pp-radius-pill);background:#fff;box-shadow:var(--pp-shadow-float),inset 14px 0 12px -12px rgba(0,28,54,.12),inset -14px 0 12px -12px rgba(0,28,54,.12);backdrop-filter:none;overflow:hidden}
  .subnav__inner,.filter-sticky>.filter-bar{margin:0;padding:10px 12px;min-height:0;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
  .subnav__inner::-webkit-scrollbar,.filter-sticky>.filter-bar::-webkit-scrollbar{display:none}
  .filter-sticky .filter-pill{min-height:34px;padding:5px 14px;white-space:nowrap;flex:0 0 auto}
  .filter-sticky .filter-count{display:none}
  .expert-band .expert-band__portrait{width:150px}
  .site-footer__grid{grid-template-columns:1fr}
  .site-footer,.site-footer *{min-width:0;overflow-wrap:anywhere}
  .masonry__col{flex-basis:100%}
  .masonry .tile img{height:auto !important;aspect-ratio:4/3}
  .masonry-window{height:auto !important;overflow:visible}
  .masonry-window__edge{display:none}
  .masonry--peek .masonry__col+.masonry__col{display:none}
  .subnav__cta{display:none}
  .richtext--cols{columns:1}
}
@media (max-width: 640px){
  .data-table{overflow:visible}
  .data-table__head{display:none}
  .data-table__row{flex-direction:column;gap:10px;min-width:0;align-items:stretch}
  .data-table__row>*{flex:none !important}
  .data-table__row>[data-label]::before{content:attr(data-label);display:block;font-size:var(--pp-text-xs);letter-spacing:var(--pp-tracking-wide);text-transform:uppercase;color:var(--pp-muted);font-weight:var(--pp-weight-normal);margin-bottom:2px}
}
@media (max-width: 480px){
  .form-row{flex-direction:column}
  .form-row>*{flex-basis:auto}
}

/* CMS-beheer (admin) */
.adm-body{background:var(--pp-surface);min-height:100vh}
.adm-topbar{background:var(--pp-navy);color:#fff;display:flex;align-items:center;gap:clamp(16px,2.5vw,40px);padding:0 clamp(16px,2vw,32px);height:56px;flex-wrap:wrap}
.adm-topbar img{height:22px}
.adm-topbar nav{display:flex;align-items:center;gap:clamp(10px,1.5vw,26px);font-size:var(--pp-text-sm)}
.adm-topbar nav a{color:rgba(255,255,255,.75);text-decoration:none;padding:18px 0}
.adm-topbar nav a:hover{color:#fff}
.adm-topbar nav a.is-active{color:#fff;border-bottom:2px solid #fff;padding:16px 0 14px}
.adm-topbar .adm-user{margin-left:auto;display:flex;gap:18px;font-size:var(--pp-text-sm)}
.adm-pagehead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:24px clamp(16px,2.5vw,40px) 20px;background:#fff;border-bottom:1px solid var(--pp-line)}
.adm-live{display:inline-flex;align-items:center;gap:7px;font-size:var(--pp-text-xs);color:var(--pp-ok);background:rgba(30,122,90,.08);border-radius:var(--pp-radius-pill);padding:6px 14px}
.adm-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pp-ok)}
.adm-layout{display:flex;align-items:flex-start;gap:24px;padding:24px clamp(16px,2.5vw,40px) 40px;flex-wrap:wrap}
.adm-side{flex:0 1 300px;min-width:min(100%,260px);background:#fff;border:1px solid var(--pp-line);border-radius:var(--pp-radius-md);overflow:hidden;position:sticky;top:16px;max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.adm-side__top{padding:16px 16px 12px;border-bottom:1px solid var(--pp-line);display:flex;flex-direction:column;gap:10px}
.adm-side__scroll{overflow-y:auto;padding:8px 8px 16px}
.adm-input{width:100%;box-sizing:border-box;border:1px solid var(--pp-blue-100);border-radius:var(--pp-radius-sm);padding:10px 14px;font-family:var(--pp-font);font-size:var(--pp-text-sm);color:var(--pp-ink)}
.adm-input:focus{outline:2px solid var(--pp-navy);outline-offset:1px}
.adm-new{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border-radius:var(--pp-radius-pill);background:var(--pp-gradient);color:#fff;font-size:var(--pp-text-sm);font-weight:var(--pp-weight-medium);text-decoration:none}
.adm-group{display:flex;align-items:center;gap:8px;padding:12px 10px 6px}
.adm-group a{text-decoration:none}
.adm-group__plus{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--pp-line);color:var(--pp-navy);font-size:15px;line-height:1}
.adm-group__plus:hover{background:var(--pp-blue-50);border-color:var(--pp-navy)}
.adm-item{display:block;padding:9px 10px;border-radius:var(--pp-radius-sm);text-decoration:none}
.adm-item:hover{background:var(--pp-blue-50)}
.adm-item.is-active{background:var(--pp-blue-50)}
.adm-item strong{display:block;font-size:var(--pp-text-sm);color:var(--pp-ink);font-weight:var(--pp-weight-normal)}
.adm-item.is-active strong{font-weight:var(--pp-weight-semibold)}
.adm-item span{display:block;font-size:var(--pp-text-xs);color:var(--pp-muted)}
.adm-main{flex:1 1 560px;min-width:min(100%,420px)}
.adm-card{background:#fff;border:1px solid var(--pp-line);border-radius:var(--pp-radius-md);overflow:hidden}
.adm-card__accent{height:4px;background:var(--pp-gradient)}
.adm-card__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px clamp(16px,2.5vw,32px)}
.adm-tabs{margin-left:auto;display:inline-flex;background:var(--pp-blue-50);border-radius:var(--pp-radius-pill);padding:4px}
.adm-tabs a{padding:8px 20px;border-radius:var(--pp-radius-pill);font-size:var(--pp-text-sm);text-decoration:none;color:var(--pp-navy);font-weight:var(--pp-weight-medium)}
.adm-tabs a.is-active{background:var(--pp-navy);color:#fff}
.adm-sections{padding:0 clamp(16px,2.5vw,32px) 8px;display:flex;flex-direction:column;gap:24px}
.adm-section{border:1px solid var(--pp-line);border-radius:var(--pp-radius-sm);overflow:hidden}
.adm-section__head{display:flex;align-items:baseline;gap:10px;padding:14px 20px;background:var(--pp-blue-50)}
.adm-section__grid{padding:18px 20px 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px 24px}
.adm-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.adm-field--wide{grid-column:1 / -1}
.adm-field>span{display:flex;justify-content:space-between;gap:10px;font-size:var(--pp-text-xs);letter-spacing:var(--pp-tracking-wide);text-transform:uppercase;color:var(--pp-muted);font-weight:var(--pp-weight-semibold)}
.adm-field input[type=text],.adm-field textarea{width:100%;box-sizing:border-box;border:1px solid var(--pp-blue-100);border-radius:var(--pp-radius-sm);padding:11px 14px;font-family:var(--pp-font);font-size:var(--pp-text-base);color:var(--pp-ink)}
.adm-imgfield{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px dashed var(--pp-blue-100);border-radius:var(--pp-radius-sm);padding:10px 12px}
.adm-imgfield img{width:64px;height:44px;object-fit:cover;border-radius:6px}
.adm-chipbtn{font-size:var(--pp-text-sm);color:var(--pp-navy);text-decoration:none;border:1px solid var(--pp-line);border-radius:var(--pp-radius-pill);padding:7px 16px}
.adm-chipbtn:hover{background:var(--pp-blue-50)}
.adm-repeater{display:flex;flex-direction:column;gap:10px}
.adm-rep-item{border:1px solid var(--pp-line);border-radius:var(--pp-radius-sm);overflow:hidden}
.adm-rep-item__head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--pp-surface);border-bottom:1px solid var(--pp-line)}
.adm-rep-item__head strong{font-size:var(--pp-text-sm);color:var(--pp-ink)}
.adm-rep-item__tools{margin-left:auto;display:inline-flex;gap:2px}
.adm-rep-item__tools a{color:var(--pp-muted);text-decoration:none;padding:4px 8px;border-radius:6px}
.adm-rep-item__tools a:hover{background:var(--pp-blue-50);color:var(--pp-navy)}
.adm-rep-item__grid{padding:14px 14px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px 16px}
.adm-relation{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px dashed var(--pp-blue-100);border-radius:var(--pp-radius-sm);padding:8px 12px;font-size:var(--pp-text-sm)}
.adm-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px clamp(16px,2.5vw,32px);border-top:1px solid var(--pp-line);margin-top:24px;background:var(--pp-surface)}

/* Home v2: voordelen met sticky beeld */
.benefits{display:flex;flex-wrap:wrap;gap:clamp(2rem,5vw,6rem);align-items:flex-start}
.benefits__visual{flex:1 1 420px;min-width:0;position:sticky;top:12vh;height:76vh;max-height:720px;border-radius:var(--pp-radius-lg);overflow:hidden;background:var(--pp-navy)}
.benefits__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 700ms var(--pp-ease)}
.benefits__visual img.is-active{opacity:1}
.benefits__visual .tile__tags{position:absolute;left:24px;bottom:24px}
.benefits__list{flex:1 1 380px;min-width:0;max-width:560px}
.benefit{min-height:60vh;display:flex;flex-direction:column;justify-content:center;padding:var(--pp-space-8) 0;transition:opacity 500ms var(--pp-ease)}
.js .benefit:not(.is-active){opacity:.32}
.benefit__nr{color:var(--pp-navy);font-size:var(--pp-text-sm);letter-spacing:var(--pp-tracking-wide)}
.benefit h3{margin:12px 0 0;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:var(--pp-tracking-tight);line-height:1.25}
.benefit p{margin:var(--pp-space-4) 0 0;font-size:var(--pp-text-lg)}
.benefit a{display:inline-block;margin-top:var(--pp-space-6);font-weight:var(--pp-weight-medium);text-decoration:none}
.benefit a:hover{text-decoration:underline}
.benefit__img{display:none}
/* Home v2: eigenschaptegels (hoog, beeldvullend) */
.app-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pp-space-6)}
.app-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:clamp(420px,40vw,560px);border-radius:var(--pp-radius-md);overflow:hidden;text-decoration:none;background:var(--pp-navy)}
.app-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--pp-ease)}
.app-tile:hover img{transform:scale(1.06)}
.app-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,28,54,0) 40%,rgba(0,28,54,.86) 100%);pointer-events:none}
.app-tile__body{position:relative;z-index:1;padding:clamp(20px,2.2vw,28px)}
.app-tile__nr{color:rgba(255,255,255,.7);font-size:var(--pp-text-sm);letter-spacing:var(--pp-tracking-wide)}
.app-tile h3{margin:8px 0 0;color:#fff;font-size:var(--pp-text-h4)}
.app-tile__more{max-height:0;opacity:0;overflow:hidden;transition:max-height 400ms var(--pp-ease),opacity 400ms var(--pp-ease)}
.app-tile:hover .app-tile__more,.app-tile:focus-visible .app-tile__more{max-height:120px;opacity:1}
.app-tile__more p{margin:8px 0 0;color:rgba(255,255,255,.85);font-size:var(--pp-text-sm)}
.app-tile__more span{display:inline-block;margin-top:12px;color:#fff;font-size:var(--pp-text-sm);font-weight:var(--pp-weight-medium)}
@media (hover:none){.app-tile__more{max-height:none;opacity:1}}
@media (max-width:1000px){.app-tiles{grid-template-columns:repeat(2,1fr)}}
/* Home v2: eigenschapkaarten met bewijschip op navy */
.prop-card{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.6vw,36px);border-radius:var(--pp-radius-md);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);text-decoration:none;transition:background 300ms var(--pp-ease),transform 300ms var(--pp-ease)}
.prop-card:hover{background:rgba(255,255,255,.11);transform:translateY(-3px)}
.prop-card h3{margin:0;color:#fff;font-size:var(--pp-text-h3);letter-spacing:var(--pp-tracking-tight)}
.prop-card p{margin:0;color:rgba(255,255,255,.75);font-size:var(--pp-text-sm)}
.prop-card__foot{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.prop-card__proof{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--pp-radius-sm);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:var(--pp-text-sm);font-weight:var(--pp-weight-medium);white-space:nowrap}
.prop-card__arrow{color:#fff;font-size:var(--pp-text-sm);font-weight:var(--pp-weight-medium)}
.prop-card:hover .prop-card__arrow{text-decoration:underline}
/* Home v2: meelopende logostrip */
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:pp-marquee 70s linear infinite}
.marquee--vlot .marquee__track{animation-duration:30s}
.marquee--stil .marquee__track,.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track{align-items:center}
.marquee__track img{height:clamp(36px,3.4vw,60px);width:auto;margin-right:clamp(48px,6vw,110px);display:block}
/* Eigen afwijking (21 september 2026): losse logo's zijn OPTISCH even groot, niet even hoog - met één hoogte
   werd een breed, zwaar woordmerk (Damen) reusachtig en een compact beeldmerk (WWF) een stipje. --b en --h komen
   uit logoStrip.twig (of site.js) in eenheden; --u maakt er pixels van en schaalt mee met het scherm. Zonder --b
   is de breedte-regel ongeldig en geldt width:auto: dan is het gewoon een logo van 44 eenheden hoog. */
.marquee__track{--u:clamp(.9px,.08vw,1.35px)}
.marquee__track img.marquee__logo{height:calc(var(--h,44)*var(--u));width:calc(var(--b)*var(--u));padding-right:0;flex:none}
@keyframes pp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Expert-band: portret */
.expert-band__portrait{flex:0 0 auto;width:clamp(180px,20vw,240px);border-radius:var(--pp-radius-md);overflow:hidden}
@media (max-width:760px){
  .benefits__visual{display:none}
  .benefit{min-height:0;padding:0 0 var(--pp-space-14);opacity:1 !important}
  .benefit__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--pp-radius-md);margin-bottom:var(--pp-space-6)}
  .app-tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*clamp(24px,3vw,40px));padding:0 clamp(24px,3vw,40px)}
  .app-tiles::-webkit-scrollbar{display:none}
  .app-tile{flex:0 0 76vw;scroll-snap-align:start;height:440px}
  .app-tile__more{max-height:none;opacity:1}
  .marquee__track img{height:80px;padding-right:48px}
  .hero-caps,.hero-dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .page-hero__slide.is-active{transform:none}
  .marquee__track,.page-hero__main,.page-hero__meta{animation:none}
}

/* Header en beheer houden de DS-maten (Figma-typografie geldt voor de pagina-inhoud) */
.site-header,.header-fabs,.sheet,.megamenu,.adm-scope{--pp-text-base:1rem;--pp-text-lg:1.125rem;--pp-text-sm:.875rem;--pp-text-xs:.8125rem;--pp-text-h4:1.25rem;--pp-text-h3:1.5rem;--pp-leading-relaxed:1.7;font-size:1rem;line-height:1.5}

/* Blob-vlak (Figma "Gradient-vorm"/"Foto-vorm"): rechthoek met één organische hoek en schuine onderrand.
   clipPath-defs staan in _partials/blob-defs.twig (één keer per pagina, via base.twig). */
.blob{position:absolute;top:0;bottom:0;width:clamp(320px,36.3vw,700px);overflow:hidden;pointer-events:none}
.blob--links{left:0;clip-path:url(#pp-blob-links)}
.blob--rechts{right:0;clip-path:url(#pp-blob-rechts)}
.blob>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blob--gradient::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(194,74,0,.75),rgba(200,31,135,.75));backdrop-filter:blur(20px)}
.blob--lichtblauw{background:var(--pp-blue-100)}
.blob--lichtblauw>img{display:none}
/* Blob-sectie (tekst + blob) */
.blob-section{position:relative;overflow:hidden;background:var(--pp-blue-50);min-height:clamp(520px,41.6vw,800px);display:flex;align-items:center;padding:clamp(3rem,6vw,5rem) 0}
.blob-section__inner{position:relative;display:flex}
.blob-section--rechts .blob-section__inner{justify-content:flex-start}
.blob-section--links .blob-section__inner{justify-content:flex-end}
.blob-section__text{max-width:560px;min-width:0}
.blob-section__text h2{font-size:var(--pp-text-h2);line-height:1.08;letter-spacing:var(--pp-tracking-tight)}
.blob-section__text p{margin:var(--pp-space-8) 0 0;color:var(--pp-ink)}
.blob-section__mob{display:none;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:25px;margin-top:var(--pp-space-8)}
/* Eigen uitbreiding op het CD-pakket (21 sep 2026): het contentblok kent ook een donkerblauwe vorm,
   een variant zonder vorm (foto als kaart) en een eigen sectie-achtergrond. Bij een nieuw pakket opnieuw aanbrengen. */
.blob--navy{background:var(--pp-navy)}
.blob--navy::after{content:"";position:absolute;inset:0;background:rgba(0,28,54,.78)}
.blob-section--bg-wit{background:#fff}
.blob-section--bg-navy{background:var(--pp-navy)}
.blob-section--bg-navy .blob-section__text h2{color:#fff}
.blob-section--bg-navy .blob-section__text p{color:rgba(255,255,255,.85)}
.blob-section--bg-navy .blob-section__text .eyebrow{color:rgba(255,255,255,.7)}
.blob-section--bg-navy .blob--navy{background:#0B2D50}
.blob-section--bg-navy .blob--navy::after{background:rgba(11,45,80,.78)}
.blob-section--geen{min-height:0}
.blob-section--geen .blob-section__inner{justify-content:space-between;align-items:center;flex-wrap:wrap;gap:clamp(2rem,5vw,5rem)}
.blob-section--geen.blob-section--links .blob-section__inner{flex-direction:row-reverse}
.blob-section--geen .blob-section__text{flex:1 1 360px}
.blob-section__foto{flex:1 1 380px;min-width:0;width:100%;max-width:660px;aspect-ratio:4/3;object-fit:cover;border-radius:25px;display:block}
/* Achtergrondkeuze per blok (render.twig zet het omhulsel). Alleen voor lichte blokken; een blok dat in het
   ontwerp donkerblauw is houdt zijn eigen kleur omdat zijn tekst daar wit op staat. */
.blok-bg--wit>section{background:#fff}
.blok-bg--blue>section{background:var(--pp-blue-50)}
/* Reviews met carrousel */
.reviews{position:relative;overflow:hidden;background:var(--pp-blue-50);min-height:clamp(520px,38vw,730px);display:flex;align-items:center;padding:clamp(3rem,6vw,5rem) 0}
.reviews--navy{background:var(--pp-navy)}
.reviews>.container,.blob-section>.container{width:100%;min-width:0} /* eigen afwijking op CD ronde 5 (6-9-2026): de sectie is display:flex, dus zonder breedte krimpt de container niet onder zijn min-content en liep de reviewkaart op mobiel (375px) buiten beeld */
.reviews__inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--pp-space-8) 32px}
.reviews--rechts .reviews__inner{flex-direction:row-reverse}
.reviews__intro{flex:0 1 363px;min-width:240px}
.reviews__intro h2{font-size:var(--pp-text-h2);line-height:1.08;letter-spacing:var(--pp-tracking-tight)}
.reviews--gradient .reviews__intro h2,.reviews--navy .reviews__intro h2{color:#fff}
.reviews__body{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:20px}
.rev-track{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.rev-track::-webkit-scrollbar{display:none}
.rev-card{flex:0 0 min(100%,760px);scroll-snap-align:start;background:#fff;border-radius:25px;padding:clamp(28px,4vw,60px);display:flex;flex-direction:column;gap:20px;box-sizing:border-box}
.rev-card__stars{display:flex;gap:3px;color:#F0A929}
.rev-card__stars svg{width:16px;height:16px;fill:currentColor}
.rev-card p{margin:0;color:var(--pp-ink);font-weight:var(--pp-weight-medium)}
.rev-card__name{font-size:1.25rem;color:var(--pp-ink);font-weight:var(--pp-weight-medium)}
.rev-nav{display:inline-flex;align-items:center;gap:8px;padding:7px 8px;border-radius:999px;min-height:50px;background:var(--pp-navy);color:#fff;margin-left:auto}
.reviews--lichtblauw .rev-nav,.reviews--navy .rev-nav{background:var(--pp-blue-100);color:var(--pp-navy)}
.rev-nav button{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background 200ms var(--pp-ease)}
.rev-nav button:hover{background:rgba(255,255,255,.12)}
.reviews--lichtblauw .rev-nav button:hover{background:rgba(0,28,54,.08)}
.rev-nav span{font-size:1.25rem;font-weight:var(--pp-weight-medium);min-width:3ch;text-align:center}
@media (max-width:760px){
  .blob{width:100%}
  .blob-section .blob{display:none}
  .blob-section--gradient .blob-section__mob{display:block}
  .blob-section--navy .blob-section__mob{display:block}
  .rev-card{flex-basis:100%}
}

/* ── Videoblok ────────────────────────────────────────────────────────
   Eigen afwijking op het CD-pakket (10 september 2026): een YouTube-
   video op een productpagina, die pas laadt als iemand hem start.
   Bij een nieuw pakket opnieuw aanbrengen. */
.video-embed{position:relative;margin-top:var(--pp-space-8);
  border-radius:var(--pp-radius-lg,16px);overflow:hidden;
  background:var(--pp-ink);aspect-ratio:16/9;}
.video-embed--staand{aspect-ratio:9/16;max-width:420px;margin-inline:auto;}
.video-embed iframe,.video-embed__start{position:absolute;inset:0;
  width:100%;height:100%;border:0;}
.video-embed__start{padding:0;cursor:pointer;background:none;display:block;}
.video-embed__start img{width:100%;height:100%;object-fit:cover;display:block;}
.video-embed__knop{position:absolute;left:50%;top:50%;
  translate:-50% -50%;width:76px;height:76px;border-radius:50%;
  background:rgba(0,28,54,.72);
  transition:background .2s ease,scale .2s ease;}
.video-embed__knop::after{content:"";position:absolute;left:56%;top:50%;
  translate:-50% -50%;border-style:solid;border-width:14px 0 14px 22px;
  border-color:transparent transparent transparent #fff;}
.video-embed__start:hover .video-embed__knop,
.video-embed__start:focus-visible .video-embed__knop{
  background:var(--pp-ink);scale:1.06;}
.video-embed__start:focus-visible{outline:3px solid var(--pp-accent,#C24A00);
  outline-offset:-3px;}