/**
 * Stylesheet voor de hele site (15-8-2026).
 *
 * Vóór deze datum droeg elke pagina zijn eigen <style>-blok. Dat gaf zes kopieën
 * van dezelfde tokens, nav, knoppen en footer, en bij het toevoegen van het
 * contactformulier op /pallets-kopen/ en /pallets-verkopen/ zouden dat er acht
 * worden. Nu staat alles hier; de pagina's laden alleen nog
 * <link rel="stylesheet" href="/assets/site.css?v=…">.
 *
 * BELANGRIJK — paden. Dit bestand staat in /assets/, dus url() is relatief aan
 * /assets/ (fonts/…). De pagina's zelf gebruiken twee conventies naast elkaar
 * (index.html relatief, de submappen root-relatief); vanuit de CSS speelt dat
 * geen rol meer.
 *
 * BELANGRIJK — scoping. De vier paginasoorten hebben deels dezelfde classnamen
 * met andere waarden (.nav, .btn-dark, main, p). Daarom draagt elke <body> een
 * soort-class en is elke regel die niet letterlijk voor álle pagina's gold
 * daaraan opgehangen:
 *
 *   .p-site      homepage + de twee contentpagina's (sticky nav, knoppen, fades)
 *     .p-home      index.html
 *     .p-content   /pallets-kopen/ en /pallets-verkopen/
 *       .p-kopen / .p-verkopen   verschillen in de paginakop (spiegelbeeld)
 *   .p-tekst     privacystatement.html en leveringsvoorwaarden.html
 *   .p-fout      fout.html
 *
 * Voeg dus nooit een kale .nav- of main-regel toe: hang hem aan de soort.
 *
 * CACHE. Assets krijgen van de vhost max-age=604800 (7 dagen). Wijzig je dit
 * bestand, verhoog dan de ?v=-datum in de <link> van álle pagina's, anders
 * blijven terugkerende bezoekers een week op de oude stijl zitten.
 */

/* ==========================================================================
   1. Fonts — self-hosted variabel (latin + latin-ext)
   ========================================================================== */
@font-face{
  font-family:'League Gothic';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/league-gothic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'League Gothic';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/league-gothic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   2. Tokens — de huisstijl (kennisbank/huisstijl/huisstijl.md is leidend)
   ========================================================================== */
:root{
  --navy:#141a33;
  --navy-deep:#0d1226;
  --blue:#2e86d5;
  --blue-cta:#2779c2; /* AA-contrast (4.56:1) voor witte tekst op knopvlakken */
  --blue-dark:#1d6cb4;
  --blue-light:#7db8ec;
  --blue-bg:#eaf2fb;
  --ink:#141a33;
  --ink-soft:#525a6e;
  --paper:#f7f8fa;
  --white:#fff;
  --line:#d4dae6;
}

/* ==========================================================================
   3. Basis — geldt op elke pagina
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 'IBM Plex Sans',sans-serif}
img{display:block;max-width:100%}
a{color:inherit}
/* De juridische pagina's zetten hun linkkleur hier en niet in hun eigen blok:
   `.p-tekst a` en `.footer a` hebben gelijke specificiteit, dus de volgorde
   beslist — verderop zou deze regel de grijze footerlinks blauw maken. */
.p-tekst a{color:var(--blue-dark)}
h1,h2,h3{font-family:'League Gothic',sans-serif;font-weight:400;text-transform:uppercase;margin:0}

/* Footer — identiek op alle zes pagina's.
   Geen scheidingspunten: met vijf links breekt de rij op mobiel af en zou er
   altijd een losse punt aan het begin of eind van een regel achterblijven. */
.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 5vw;background:var(--navy-deep);color:#7b849e;font-size:12.5px}
.footer a{color:#aab4cf;text-decoration:none}
.footer a:hover{color:var(--white);text-decoration:underline}
.footer__links{display:flex;gap:24px;flex-wrap:wrap}

/* ==========================================================================
   4. .p-site — homepage + contentpagina's
   ========================================================================== */
.p-site section{scroll-margin-top:84px}

/* ---------- nav (sticky; op mobiel hamburger via checkbox-hack) ---------- */
.p-site .nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:28px;padding:0 5vw;height:74px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(20,26,51,.12)}
.p-site .nav__logo{height:68px;width:auto}
.p-site .nav__links{flex:1;display:flex;gap:28px;justify-content:center}
.p-site .nav__link{color:var(--ink);font-weight:500;font-size:14.5px;text-decoration:none;transition:color .2s}
.p-site .nav__link:hover{color:var(--blue)}
.p-site .nav__link[aria-current="page"]{color:var(--blue-dark);font-weight:600}
.p-site .nav__toggle{display:none}
.p-site .nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;cursor:pointer;flex:none}
.p-site .nav__burger span{display:block;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s,opacity .2s}
.p-site .nav__toggle:checked ~ .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.p-site .nav__toggle:checked ~ .nav__burger span:nth-child(2){opacity:0}
.p-site .nav__toggle:checked ~ .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.p-site .btn-phone{display:flex;align-items:center;gap:10px;background:var(--blue-cta);color:var(--white);text-decoration:none;font-weight:600;font-size:15px;padding:12px 20px;border-radius:999px;transition:background .2s;white-space:nowrap}
.p-site .btn-phone:hover{background:var(--blue-dark)}
.p-site .btn-phone svg{flex:none}

/* ---------- knoppenrij ---------- */
.p-site .btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- assortiment-chips ---------- */
.p-site .chip-row{display:flex;flex-wrap:wrap;gap:8px;padding:4px 2px}
/* scroll-rijen zijn tabbaar (toetsenbord); outline alleen bij toetsenbordfocus */
.p-site .chip-row:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.p-site .chip{background:var(--blue-bg);color:var(--blue-dark);font-weight:500;font-size:13px;padding:7px 14px;border-radius:999px;white-space:nowrap}


/* ---------- fade-ins bij scrollen ---------- */
.p-site .fade{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.p-site .fade.is-vis{opacity:1;transform:none}
.p-site .card.fade{transition-duration:.55s}

/* ==========================================================================
   5. .p-home — index.html
   ========================================================================== */
.p-home .waarom{scroll-margin-top:84px}

/* ---------- hero ---------- */
.p-home .hero{position:relative;background:var(--navy);overflow:hidden}
.p-home .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-home .hero__scrim{position:absolute;inset:0;background:radial-gradient(ellipse 82% 66% at 50% 38%,rgba(13,18,38,.68) 0%,rgba(13,18,38,.4) 58%,rgba(13,18,38,0) 82%),linear-gradient(180deg,rgba(20,26,51,.5) 0%,rgba(20,26,51,.58) 55%,rgba(20,26,51,.92) 96%)}
.p-home .hero__inner{position:relative;text-align:center;padding:110px 6vw 70px;max-width:1100px;margin:0 auto}
.p-home .hero__kicker{display:inline-flex;align-items:center;gap:10px;color:var(--blue-light);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:26px;text-shadow:0 1px 8px rgba(13,18,38,.6)}
.p-home .hero__kicker::before,.p-home .hero__kicker::after{content:"";width:26px;height:2px;background:var(--blue)}
.p-home .hero__title{font-size:clamp(56px,9vw,110px);line-height:.95;color:var(--white);letter-spacing:.015em;margin-bottom:22px;text-shadow:0 2px 18px rgba(13,18,38,.55)}
.p-home .hero__title em{font-style:normal;color:#4ea1e8}
.p-home .hero__sub{max-width:540px;margin:0 auto 38px;color:#dbe2f2;font-size:17px;text-shadow:0 1px 10px rgba(13,18,38,.7)}
.p-home .hero__cta{display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap}
.p-home .btn-hero{display:flex;align-items:center;gap:12px;background:var(--blue-cta);color:var(--white);text-decoration:none;font-weight:600;font-size:22px;padding:18px 32px;border-radius:999px;box-shadow:0 12px 32px rgba(46,134,213,.4);transition:background .2s,transform .2s}
.p-home .btn-hero:hover{background:#3d95e4;transform:translateY(-2px)}
.p-home .hero__mail{color:#e6ecfa;font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:3px;text-shadow:0 1px 8px rgba(13,18,38,.7)}
.p-home .hero__mail:hover{color:var(--white)}
.p-home .hero__reviews{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,340px));justify-content:center;gap:18px;max-width:1100px;margin:0 auto;padding:0 5vw 44px}
.p-home .hero__reviews:focus-visible,.p-home .cards:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.p-home .review{padding:20px 22px;display:flex;flex-direction:column;gap:6px;background:rgba(13,18,38,.58);border:1px solid rgba(255,255,255,.2);border-radius:12px;backdrop-filter:blur(6px)}
.p-home .review__head{display:flex;align-items:center;gap:10px}
.p-home .review__avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.p-home .review__stars{color:#fbbc04;font-size:14px;letter-spacing:2px}
.p-home .review__quote{color:var(--white);font-size:14.5px;line-height:1.55;margin:0;font-style:italic}
.p-home .review__name{color:#aab4cf;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}

/* ---------- secties ---------- */
.p-home .section{padding:84px 5vw;max-width:1280px;margin:0 auto}
.p-home .split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.p-home .split > *{min-width:0}
.p-home .kicker{font-family:'League Gothic';font-size:30px;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);margin-bottom:8px}
.p-home .title{font-size:clamp(42px,5vw,64px);line-height:.98;margin-bottom:16px}
.p-home .lead{color:var(--ink-soft);margin:0 0 24px}
.p-home .lead--spaced{margin-top:24px}
.p-home .title--center{text-align:center;margin:0 auto 64px;max-width:900px}
.p-home .title--center-tight{margin-bottom:12px}
.p-home .lead--center{text-align:center;max-width:640px;margin:0 auto 44px}
.p-home .photo{width:100%;height:400px;object-fit:cover;border-radius:14px;box-shadow:0 10px 30px rgba(20,26,51,.14)}

/* ---------- verkopen banner ---------- */
.p-home .banner{position:relative;overflow:hidden;min-height:620px;display:flex;align-items:center}
.p-home .banner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-home .banner__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,18,38,.88) 0%,rgba(13,18,38,.72) 42%,rgba(13,18,38,.28) 75%,rgba(13,18,38,.1) 100%)}
.p-home .banner__inner{position:relative;max-width:1280px;width:100%;margin:0 auto;padding:84px 5vw}
.p-home .banner__content{max-width:560px}
.p-home .banner .kicker{color:var(--blue-light)}
.p-home .banner .title{color:var(--white)}
.p-home .banner .lead{color:#dbe2f2}
.p-home .banner .btn-dark{background:var(--blue-cta)}
.p-home .banner .btn-dark:hover{background:var(--blue-dark)}
.p-home .banner .btn-outline{border-color:rgba(255,255,255,.7);color:var(--white)}
.p-home .banner .btn-outline:hover{background:var(--white);color:var(--navy)}

/* ---------- knoppen ---------- */
.p-home .btn-dark{display:inline-flex;align-items:center;background:var(--navy);color:var(--white);text-decoration:none;font-weight:600;font-size:16px;padding:14px 26px;border-radius:999px;transition:background .2s}
.p-home .btn-dark:hover{background:var(--blue)}
.p-home .btn-outline{display:inline-flex;align-items:center;border:1.5px solid var(--navy);color:var(--navy);text-decoration:none;font-weight:600;font-size:16px;padding:14px 26px;border-radius:999px;transition:background .2s,color .2s}
.p-home .btn-outline:hover{background:var(--navy);color:var(--white)}
/* tekstlink naar de verdiepende pagina, onder de knoppenrij */
.p-home .meer{display:inline-flex;align-items:center;gap:7px;margin-top:20px;color:var(--blue-dark);font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid rgba(29,108,180,.4);padding-bottom:2px;transition:color .2s,border-color .2s}
.p-home .meer:hover{color:var(--blue);border-color:var(--blue)}
.p-home .banner .meer{color:var(--blue-light);border-bottom-color:rgba(125,184,236,.5)}
.p-home .banner .meer:hover{color:var(--white);border-color:var(--white)}

/* ---------- waarom-kaarten ---------- */
.p-home .waarom{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--paper) 0%,#e3ecf7 50%,var(--paper) 100%)}
.p-home .waarom::before,.p-home .waarom::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.p-home .waarom::before{width:480px;height:480px;left:-140px;top:-80px;background:rgba(46,134,213,.18)}
.p-home .waarom::after{width:420px;height:420px;right:-120px;bottom:-140px;background:rgba(125,184,236,.22)}
.p-home .waarom .section{position:relative}
.p-home .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;perspective:1200px}
.p-home .card{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.55) 100%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:30px 26px 28px;box-shadow:0 24px 48px -20px rgba(20,26,51,.28),0 2px 6px rgba(20,26,51,.06),inset 0 1px 0 rgba(255,255,255,.95);transition:transform .35s cubic-bezier(.22,.68,.35,1.1),box-shadow .35s ease}
.p-home .card::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(160deg,rgba(46,134,213,.55),rgba(255,255,255,0) 45%,rgba(46,134,213,.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.p-home .card:hover{transform:translateY(-8px) rotateX(3deg);box-shadow:0 40px 70px -24px rgba(20,26,51,.4),0 4px 10px rgba(20,26,51,.08),inset 0 1px 0 rgba(255,255,255,.95)}
.p-home .card__title{font-size:28px;margin-bottom:8px}
.p-home .card p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.6}

/* ---------- faq ---------- */
.p-home .faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.p-home .faq{background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(20,26,51,.05)}
.p-home .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 20px;font-weight:600;font-size:15.5px}
.p-home .faq summary::-webkit-details-marker{display:none}
.p-home .faq summary::after{content:"+";font-family:'League Gothic';font-size:26px;color:var(--blue);line-height:1;flex:none;transition:transform .25s}
.p-home .faq[open] summary::after{transform:rotate(45deg)}
.p-home .faq p{margin:0;padding:0 20px 18px;color:var(--ink-soft);font-size:14.5px}
.p-home .faq-cta{text-align:center;margin:28px auto 0;max-width:760px;color:var(--ink-soft);font-size:15px}
.p-home .faq-cta a{color:var(--blue-dark);font-weight:600}
.p-home .waarom .faq-cta{margin-top:44px}

/* ---------- fade-in-volgorde van de kaarten ---------- */
.p-home .cards.is-vis .card:nth-child(1){transition-delay:0s}
.p-home .cards.is-vis .card:nth-child(2){transition-delay:.09s}
.p-home .cards.is-vis .card:nth-child(3){transition-delay:.18s}
.p-home .cards.is-vis .card:nth-child(4){transition-delay:.27s}
.p-home .cards.is-vis .card{opacity:1;transform:none}

/* ==========================================================================
   6. .p-content — /pallets-kopen/ en /pallets-verkopen/
   ========================================================================== */

/* ---------- pagina-hero ---------- */
.p-content .phero{position:relative;overflow:hidden;display:flex;align-items:flex-end}
.p-content .phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-content .phero__scrim{position:absolute;inset:0}
.p-content .phero__inner{position:relative;max-width:1280px;width:100%;margin:0 auto;padding:66px 5vw 54px}
.p-content .phero__content{max-width:620px}
.p-content .kruimels{font-size:13px;color:#aab4cf;margin-bottom:14px}
.p-content .kruimels a{color:#dbe2f2;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.p-content .kruimels a:hover{color:var(--white)}
.p-content .phero h1{font-size:clamp(46px,7vw,84px);line-height:.96;color:var(--white);letter-spacing:.015em;margin-bottom:16px;text-shadow:0 2px 18px rgba(13,18,38,.5)}
.p-content .phero__lead{color:#dbe2f2;font-size:17.5px;margin:0 0 28px}

/* /pallets-kopen/ — hoog uitsnijden: de gouden lucht boven de loods is de sfeer
   van dit beeld. Twee lagen in plaats van één brede wash: links donker genoeg
   voor witte tekst, onderin een verloop voor de knoppen, en de rechterhelft
   blijft open zodat het avondlicht op het hout zichtbaar blijft. */
.p-kopen .phero{min-height:540px}
.p-kopen .phero__img{object-position:center 14%}
.p-kopen .phero__scrim{background:linear-gradient(90deg,rgba(13,18,38,.86) 0%,rgba(13,18,38,.66) 30%,rgba(13,18,38,.26) 60%,rgba(13,18,38,.02) 88%,rgba(13,18,38,0) 100%),linear-gradient(0deg,rgba(13,18,38,.45) 0%,rgba(13,18,38,.12) 42%,rgba(13,18,38,0) 68%)}

/* /pallets-verkopen/ — spiegelbeeld: de man staat links in het beeld, dus de
   tekst en de donkere scrim staan hier rechts. */
.p-verkopen .phero{min-height:520px}
.p-verkopen .phero__img{object-position:50% 26%}
.p-verkopen .phero__scrim{background:linear-gradient(270deg,rgba(13,18,38,.92) 0%,rgba(13,18,38,.78) 40%,rgba(13,18,38,.34) 72%,rgba(13,18,38,.14) 100%)}
.p-verkopen .phero__content{margin-left:auto}

/* ---------- knoppen ---------- */
.p-content .btn-dark{display:inline-flex;align-items:center;background:var(--blue-cta);color:var(--white);text-decoration:none;font-weight:600;font-size:16px;padding:14px 26px;border-radius:999px;transition:background .2s}
.p-content .btn-dark:hover{background:var(--blue-dark)}
.p-content .btn-outline{display:inline-flex;align-items:center;border:1.5px solid rgba(255,255,255,.7);color:var(--white);text-decoration:none;font-weight:600;font-size:16px;padding:14px 26px;border-radius:999px;transition:background .2s,color .2s}
.p-content .btn-outline:hover{background:var(--white);color:var(--navy)}
.p-content .btn-hero{display:flex;align-items:center;gap:12px;background:var(--blue-cta);color:var(--white);text-decoration:none;font-weight:600;font-size:21px;padding:16px 28px;border-radius:999px;box-shadow:0 12px 32px rgba(46,134,213,.4);transition:background .2s,transform .2s}
.p-content .btn-hero:hover{background:#3d95e4;transform:translateY(-2px)}

/* ---------- tekstkolom ---------- */
.p-content .prose{max-width:820px;margin:0 auto;padding:76px 5vw 32px}
.p-content .prose h2{font-size:34px;margin:44px 0 10px}
.p-content .prose p{margin:0 0 16px;color:var(--ink-soft)}
.p-content .prose a{color:var(--blue-dark);font-weight:600}
.p-content .prose .intro{font-size:18px;color:var(--ink)}
.p-content .prose__foto{width:100%;height:340px;object-fit:cover;border-radius:14px;box-shadow:0 10px 30px rgba(20,26,51,.14);margin:40px 0 8px}
.p-content .prose .na-chips{margin-top:24px}
.p-verkopen .prose h2:first-of-type{margin-top:0}
/* chip-rij staat hier in de tekstkolom en heeft daar wat meer lucht boven nodig */
.p-content .chip-row{padding:8px 2px 4px}


/* ==========================================================================
   6b. Contact + formulier — homepage en contentpagina's
   Staat bewust ná de .p-home/.p-content-blokken: .btn-hero--contact moet de
   .btn-hero van die blokken kunnen overschrijven (gelijke specificiteit, dus
   de volgorde beslist), precies zoals in de oude inline CSS.
   ========================================================================== */
.p-site .contact{background:var(--navy);color:var(--white)}
.p-site .contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:1280px;margin:0 auto;padding:84px 5vw}
.p-site .contact__title{font-size:clamp(42px,5vw,64px);line-height:.98;color:var(--white);margin-bottom:22px}
/* afsluitende alinea op de contentpagina's (stond daar in het oude .slot-blok) */
.p-site .contact__lead{color:#c4cce0;max-width:52ch;margin:0 0 28px}
.p-site .contact__lead a{color:var(--blue-light);font-weight:600}
.p-site .btn-hero--contact{display:inline-flex;font-size:21px;padding:16px 28px;margin-bottom:32px}
.p-site .deflist{display:grid;grid-template-columns:110px 1fr;gap:10px 18px;color:#c4cce0;font-size:15px}
.p-site .deflist dt{color:var(--blue-light);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.12em;padding-top:3px;margin:0}
.p-site .deflist dd{margin:0}
.p-site .deflist a{color:var(--white);text-underline-offset:3px}
.p-site .form{position:relative;display:flex;flex-direction:column;gap:16px;background:linear-gradient(165deg,#ffffff 0%,#f2f7fd 100%);border-radius:18px;padding:36px 34px;color:var(--ink);box-shadow:0 30px 60px -24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.9);overflow:hidden}
.p-site .form__title{font-size:32px}
.p-site .form__hint{margin:-8px 0 4px;color:var(--ink-soft);font-size:13.5px}
.p-site .form .field{position:relative}
.p-site .form .field input,.p-site .form .field textarea{background:#f6f8fc;border:1.5px solid var(--line);color:var(--ink);font:400 15px 'IBM Plex Sans';padding:22px 14px 10px;border-radius:10px;width:100%;transition:border-color .2s,background .2s,box-shadow .2s}
/* Labelkleur #676f84 en niet het oorspronkelijke #8b93a8: dat gaf 2,89:1 op de
   veldachtergrond #f6f8fc en dus een AA-fout (axe, serious). De melding bleef
   eerder onopgemerkt doordat het formulier bij het meten nog in de fade-in stond
   en axe onzichtbare tekst overslaat — met reducedMotion komt hij wél boven.
   #676f84 is de lichtste tint in dezelfde blauwgrijze familie die 4,5:1 haalt
   (4,72:1). Geldt voor alle drie de formulieren. Zie werklog 15-8-2026. */
.p-site .form .field label{position:absolute;left:15px;top:16px;color:#676f84;font-size:15px;pointer-events:none;transition:top .18s ease,font-size .18s ease,color .18s ease}
.p-site .form .field input:focus,.p-site .form .field textarea:focus{outline:none;border-color:var(--blue);background:var(--white);box-shadow:0 0 0 4px rgba(46,134,213,.14)}
.p-site .form .field input:focus + label,.p-site .form .field textarea:focus + label,.p-site .form .field input:not(:placeholder-shown) + label,.p-site .form .field textarea:not(:placeholder-shown) + label{top:7px;font-size:11.5px;color:var(--blue-dark);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.p-site .form .field textarea{resize:vertical;min-height:120px}
.p-site .form__file{border:1.5px dashed var(--blue);background:var(--blue-bg);border-radius:12px;padding:18px 16px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:background .2s,border-color .2s}
.p-site .form__file:hover{background:#ddebfa;border-color:var(--blue-dark)}
.p-site .form__file strong{color:var(--blue-dark);font-size:14px}
.p-site .form__file span{color:var(--ink-soft);font-size:12.5px}
.p-site .form__file input{padding:0;border:none;background:none;font-size:13px}
.p-site .form button{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(150deg,var(--blue-cta),var(--blue-dark));border:none;color:var(--white);font:600 16px 'IBM Plex Sans';padding:16px;border-radius:999px;cursor:pointer;box-shadow:0 12px 24px -8px rgba(46,134,213,.6);transition:transform .2s,box-shadow .2s,filter .2s}
.p-site .form button:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 18px 32px -10px rgba(46,134,213,.7)}
.p-site .form button:disabled{filter:grayscale(.3) brightness(.95);transform:none;cursor:wait}
/* formulier-states: honeypot off-screen, statusregel en in-page bedankt-blok */
.p-site .hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.p-site .form__status{margin:-4px 0 0;color:#b3372b;font-size:13.5px;font-weight:600}
.p-site .form__status[hidden]{display:none}
.p-site .form__done{display:none;flex-direction:column;gap:8px;background:var(--blue-bg);border:1.5px solid var(--blue);border-radius:12px;padding:22px 20px;outline:none}
.p-site .form__done strong{font-family:'League Gothic',sans-serif;font-weight:400;text-transform:uppercase;font-size:28px;color:var(--blue-dark);letter-spacing:.02em}
.p-site .form__done span{color:var(--ink-soft);font-size:14.5px}
.p-site .form__done a{color:var(--blue-dark);font-weight:600}
.p-site .form--done .field,.p-site .form--done .form__file,.p-site .form--done button,.p-site .form--done .form__hint,.p-site .form--done .form__status{display:none}
.p-site .form--done .form__done{display:flex}

/* ==========================================================================
   7. .p-tekst — privacystatement.html en leveringsvoorwaarden.html
   ========================================================================== */
.p-tekst .nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 5vw;height:74px;background:var(--white);box-shadow:0 1px 0 rgba(20,26,51,.12)}
.p-tekst .nav img{height:56px;width:auto;display:block}
.p-tekst .nav a.terug{color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none}
.p-tekst .nav a.terug:hover{color:var(--blue)}
.p-tekst main{max-width:760px;margin:0 auto;padding:64px 5vw 84px}
.p-tekst h1{font-size:clamp(42px,6vw,64px);line-height:.98;margin-bottom:8px}
.p-tekst .intro{color:var(--ink-soft);margin:0 0 36px}
.p-tekst h2{font-size:30px;margin:36px 0 10px}
.p-tekst p{margin:0 0 16px}
.p-tekst ul{margin:0 0 16px;padding-left:22px}
.p-tekst li{margin:0 0 10px}
.p-tekst code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;background:#eef1f6;padding:1px 5px;border-radius:4px}
.p-tekst .bijgewerkt{margin-top:36px;color:var(--ink-soft);font-size:14.5px}

/* ==========================================================================
   8. .p-fout — fout.html (404)
   ========================================================================== */
.p-fout{display:flex;flex-direction:column;min-height:100vh}
.p-fout .nav{display:flex;align-items:center;gap:28px;padding:0 5vw;height:74px;background:var(--white);box-shadow:0 1px 0 rgba(20,26,51,.12)}
.p-fout .nav__logo{height:68px;width:auto}
.p-fout .nav__spacer{flex:1}
.p-fout .btn-phone{display:flex;align-items:center;gap:10px;background:var(--blue-cta);color:var(--white);text-decoration:none;font-weight:600;font-size:15px;padding:12px 20px;border-radius:999px;white-space:nowrap}
.p-fout .btn-phone:hover{background:var(--blue-dark)}
.p-fout main{flex:1;display:flex;align-items:center;justify-content:center;padding:80px 5vw}
.p-fout .kaart{max-width:660px;text-align:center}
.p-fout .kicker{display:inline-flex;align-items:center;gap:10px;color:var(--blue-dark);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:22px}
.p-fout .kicker::before,.p-fout .kicker::after{content:"";width:22px;height:2px;background:var(--blue)}
.p-fout h1{font-size:clamp(42px,7vw,72px);line-height:.98;letter-spacing:.015em;margin-bottom:18px}
.p-fout .lead{font-size:18px;color:var(--ink-soft);margin:0 0 14px}
.p-fout .btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.p-fout .btn-dark{display:inline-flex;align-items:center;background:var(--blue-cta);color:var(--white);text-decoration:none;font-weight:600;font-size:16px;padding:14px 26px;border-radius:999px}
.p-fout .btn-dark:hover{background:var(--blue-dark)}
.p-fout .btn-outline{display:inline-flex;align-items:center;border:1.5px solid var(--blue-cta);color:var(--blue-dark);text-decoration:none;font-weight:600;font-size:16px;padding:14px 26px;border-radius:999px}
.p-fout .btn-outline:hover{background:var(--blue-cta);color:var(--white)}

/* ==========================================================================
   9. Beweging uit — respecteert de systeeminstelling
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .p-site .fade,.p-site .card.fade{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   10. Responsief
   ========================================================================== */
@media (max-width:960px){
  /* nav klapt om naar hamburger + uitklapmenu (CSS-only, checkbox-hack) */
  .p-site .nav__burger{display:flex}
  .p-site .nav .btn-phone{margin-left:auto}
  .p-site .nav__links{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);box-shadow:0 12px 24px rgba(20,26,51,.15);padding:6px 0 10px}
  .p-site .nav__toggle:checked ~ .nav__links{display:flex}
  .p-site .nav__links .nav__link{padding:13px 5vw;font-size:16px}

  /* horizontaal scrollende chip-rij i.p.v. afbreken */
  .p-site .chip-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
  .p-site .chip-row::-webkit-scrollbar{display:none}
  .p-site .chip{flex:none;scroll-snap-align:start}

  .p-site .contact__grid{grid-template-columns:1fr}

  .p-home .split{grid-template-columns:1fr}
  .p-home .cards{grid-template-columns:repeat(2,1fr)}
  .p-home .hero__reviews{display:flex;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;padding-bottom:24px;scrollbar-width:none}
  .p-home .hero__reviews::-webkit-scrollbar{display:none}
  .p-home .review{flex:none;width:min(78vw,320px);scroll-snap-align:center;scroll-snap-stop:always}

  .p-content .prose__foto{height:260px}
  .p-kopen .phero{min-height:430px}
  .p-kopen .phero__img{object-position:62% 42%}
  .p-kopen .phero__scrim{background:linear-gradient(180deg,rgba(13,18,38,.34) 0%,rgba(13,18,38,.62) 48%,rgba(13,18,38,.9) 100%)}
  .p-verkopen .phero{min-height:440px}
  .p-verkopen .phero__img{object-position:38% 22%}
  .p-verkopen .phero__scrim{background:linear-gradient(180deg,rgba(13,18,38,.5) 0%,rgba(13,18,38,.72) 52%,rgba(13,18,38,.92) 100%)}
  .p-verkopen .phero__content{margin-left:0}
}

@media (max-width:700px){
  .p-fout .nav__logo{height:52px}
  .p-fout main{padding:56px 5vw}
  .p-fout .btn-row .btn-dark,.p-fout .btn-row .btn-outline{width:100%;justify-content:center}
}

@media (max-width:560px){
  .p-site .nav{gap:12px;justify-content:space-between;padding:0 4vw}
  .p-site .nav__logo{height:44px}
  .p-site .btn-phone{font-size:13.5px;padding:10px 14px;gap:7px}

  .p-home .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 18px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);mask-image:linear-gradient(90deg,#000 94%,transparent)}
  .p-home .cards::-webkit-scrollbar{display:none}
  .p-home .card{flex:none;width:min(76vw,300px);scroll-snap-align:start;scroll-snap-stop:always}
  .p-home .btn-hero{font-size:18px;padding:15px 24px}
  /* vaste stapeling: Chromium en Firefox braken de regel elk anders af */
  .p-home .hero__cta{flex-direction:column;gap:16px}

  .p-content .phero__inner{padding:48px 5vw 44px}
  .p-content .prose{padding-top:56px}
  .p-content .prose h2{font-size:29px}
  .p-content .btn-hero{font-size:18px;padding:15px 24px}
}
