/* ===========================================================
   BrickMix Verhuur — shared design system
   Clean & friendly · cobalt-blue accent · warm-yellow "stud"
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  /* neutrals — clean white base, cool light alternates */
  --bg:        #FFFFFF;
  --surface:   #ffffff;
  --surface-2: #F8FAFC;   /* zeer lichte koele tint voor afwisseling */
  --surface-3: #EEF2F7;
  --ink:       oklch(0.25 0.022 264);
  --ink-2:     oklch(0.44 0.020 264);
  --ink-3:     oklch(0.585 0.016 264);
  --line:      oklch(0.91 0.006 255);
  --line-2:    oklch(0.85 0.010 255);

  /* merkbasis — donkerblauw #1E3A5F */
  --brand:        #1E3A5F;
  --brand-ink:    #182F4D;
  --brand-strong: #13263D;
  --brand-soft:   #E9EEF4;
  --brand-soft-2: #C7D3E0;

  /* actiekleur — warm oranje #F47C48 (CTA's, active states, highlights) */
  --action:        #F47C48;
  --action-ink:    #DD6634;
  --action-soft:   #FDECE2;
  --action-soft-2: #F8CFB7;

  /* stud-highlight is nu terracotta — geen geel meer */
  --stud:      var(--action);
  --stud-ink:  #ffffff;

  --ok:   var(--brand);
  --ok-soft: var(--brand-soft);

  --radius-sm: 8px;
  --radius:    11px;
  --radius-lg: 13px;
  --radius-xl: 16px;

  --shadow-sm: 0 1px 2px oklch(0.35 0.03 260 / 0.10), 0 1px 1px oklch(0.35 0.03 260 / 0.07);
  --shadow:    0 1px 2px oklch(0.35 0.03 260 / 0.08), 0 4px 12px oklch(0.35 0.03 260 / 0.12), 0 2px 4px oklch(0.35 0.03 260 / 0.06);
  --shadow-lg: 0 2px 4px oklch(0.35 0.03 260 / 0.08), 0 12px 28px oklch(0.35 0.03 260 / 0.16), 0 4px 8px oklch(0.35 0.03 260 / 0.08);

  --container: 1200px;
  --nav-h: 72px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*{ box-sizing:border-box; }
[data-ic]{ display:inline-flex; }
[data-ic] svg{ display:block; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ line-height:1.12; letter-spacing:-0.02em; margin:0; font-weight:800; text-wrap:balance; }
h1{ font-size:clamp(2.1rem, 4.6vw, 3.6rem); }
h2{ font-size:clamp(1.7rem, 3.2vw, 2.6rem); }
h3{ font-size:clamp(1.18rem, 1.8vw, 1.5rem); font-weight:700; }
p{ margin:0; text-wrap:pretty; }

/* ---------- layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.section{ padding-block:clamp(56px, 8vw, 104px); }
.section--tight{ padding-block:clamp(40px,5vw,64px); }
.section--soft{ background:var(--surface-2); }
.section--brand{ background:var(--brand-soft); }
.stack{ display:flex; flex-direction:column; }
.center{ text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.82rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--brand-ink);
}
.eyebrow::before{ content:""; width:18px; height:18px; border-radius:5px; background:var(--stud);
  box-shadow: inset 0 0 0 3px var(--brand-soft); }
.lede{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--ink-2); max-width:62ch; }
.muted{ color:var(--ink-2); }
.section-head{ max-width:64ch; margin-bottom:clamp(28px,4vw,48px); }
.section-head.center{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  --pad-y:13px; --pad-x:22px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-weight:700; font-size:1rem; line-height:1;
  padding:var(--pad-y) var(--pad-x);
  border-radius:10px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--action); color:#fff; box-shadow:0 1px 2px oklch(0.50 0.13 45 / 0.34), var(--shadow-sm); }
.btn-primary:hover{ background:var(--action-ink); box-shadow:0 2px 6px oklch(0.50 0.13 45 / 0.40), var(--shadow); }
.btn-ghost{ background:var(--surface); color:var(--brand); border-color:var(--brand); }
.btn-ghost:hover{ border-color:var(--brand-ink); color:var(--brand-ink); background:var(--brand-soft); }
/* homepage: equalise the standalone section CTAs */
body[data-page="home"] .route .btn,
body[data-page="home"] .split .hero-cta .btn{ min-width:248px; }
@media (max-width:560px){
  body[data-page="home"] .route .btn,
  body[data-page="home"] .split .hero-cta .btn{ min-width:0; }
}
.btn-brand{ background:var(--brand); color:#fff; box-shadow:0 1px 2px oklch(0.30 0.06 264 / 0.30), var(--shadow-sm); }
.btn-brand:hover{ background:var(--brand-ink); box-shadow:0 2px 6px oklch(0.30 0.06 264 / 0.34), var(--shadow); }
.btn-stud{ background:var(--stud); color:var(--stud-ink); }
.btn-stud:hover{ filter:brightness(1.04); box-shadow:var(--shadow); }
.btn-lg{ --pad-y:16px; --pad-x:30px; font-size:1.06rem; }
.btn-block{ width:100%; }
.btn-arrow::after{ content:"\2192"; font-weight:600; transition:transform .15s var(--ease); }
.btn:hover .btn-arrow::after, .btn-arrow:hover::after{ transform:translateX(3px); }
.textlink{ color:var(--brand-ink); font-weight:700; text-decoration:none; display:inline-flex; gap:6px; align-items:center; }
.textlink:hover{ text-decoration:underline; }
.textlink::after{ content:"\2192"; transition:transform .15s var(--ease); }
.textlink:hover::after{ transform:translateX(3px); }

/* ---------- cards & grids ---------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card--link{ cursor:pointer; }
.card--link:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand-soft-2); }
.card h3{ margin-bottom:8px; }
.card .card-ic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); margin-bottom:16px; }
.card .card-ic svg{ width:24px; height:24px; }

/* brick mark / icon helpers */
.brick-ic{ display:inline-grid; grid-template-columns:repeat(2,1fr); gap:3px; padding:5px;
  width:30px; height:30px; border-radius:7px; background:currentColor; }
.brick-ic span{ background:var(--surface); border-radius:50%; opacity:.9; }

/* ---------- pills / tags ---------- */
.pill{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  font-size:0.84rem; font-weight:700; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line); }
.pill-brand{ background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand-soft-2); }
.pill-stud{ background:var(--action-soft); color:var(--action-ink); border-color:var(--action-soft-2); }

/* ---------- image placeholders / slots ---------- */
image-slot{ display:block; background:
    repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 11px, var(--surface-3) 11px, var(--surface-3) 22px);
  border:1px dashed var(--line-2); border-radius:var(--radius-lg); }
.ph{
  display:grid; place-items:center; text-align:center;
  background:repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 11px, var(--surface-3) 11px, var(--surface-3) 22px);
  border:1px dashed var(--line-2); border-radius:var(--radius-lg);
  color:var(--ink-3); font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:0.8rem; padding:20px;
}

/* Skip-link — visueel verborgen tot keyboard-focus (a11y), zodat hij
   niet als losse balk bovenaan de pagina blijft staan. */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200;
  padding:10px 16px; background:var(--brand); color:#fff; border-radius:0 0 8px 0;
  font-weight:600; text-decoration:none; }
.skip-link:focus{ left:0; }

/* ===========================================================
   HEADER / NAV  (injected by site.js)
   =========================================================== */
.site-header{ position:sticky; top:0; z-index:50; background:oklch(1 0 0 / 0.88);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line); transition:background .2s var(--ease), box-shadow .2s var(--ease); }
.site-header.scrolled{ background:oklch(1 0 0 / 0.96); box-shadow:var(--shadow); }
.nav{ height:var(--nav-h); display:flex; align-items:center; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font-weight:800;
  font-size:1.2rem; letter-spacing:-0.02em; margin-right:20px; }
.brand .logo{ width:36px; height:36px; flex:0 0 auto; }
.brand b{ color:var(--brand); }
.brand small{ display:block; font-size:0.62rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3); margin-top:1px; }
.nav-links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0 auto; padding:0; }
.nav-links a{ text-decoration:none; color:var(--ink-2); font-weight:600; font-size:0.95rem;
  padding:9px 13px; border-radius:10px; transition:color .12s, background .12s; }
.nav-links a:hover{ color:var(--ink); background:var(--surface-2); }
.nav-links a.is-active{ color:var(--brand-ink); background:var(--brand-soft); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:var(--surface); border:1px solid var(--line-2); border-radius:10px;
  width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle svg{ width:22px; height:22px; }

/* two-level header — lighter secondary nav below the primary bar */
.subnav{ border-top:1px solid var(--line); background:oklch(1 0 0 / 0.45); }
.subnav-inner{ display:flex; align-items:center; justify-content:center; gap:2px; min-height:32px; }
.subnav-inner a{ text-decoration:none; color:var(--ink-3); font-weight:500; font-size:0.8rem;
  padding:4px 9px; border-radius:7px; transition:color .12s, background .12s; }
.subnav-inner a:hover{ color:var(--ink); background:var(--surface-2); }
.subnav-inner a.is-active{ color:var(--brand-ink); }
.nav-links a.nav-strong{ color:var(--ink); font-weight:800; }
@media (max-width:1180px){ .subnav{ display:none; } }
.mobile-menu .mm-divider{ display:block; height:1px; background:var(--line); margin:10px 8px; }

.mobile-menu{ display:none; position:fixed; inset:var(--nav-h) 0 0 0; z-index:49; background:var(--surface);
  padding:24px; overflow-y:auto; transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease); }
@media (max-width: 1180px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .mobile-menu{ display:block; }
}
.mobile-menu.open{ opacity:1; transform:none; pointer-events:auto; }
.mobile-menu a{ display:block; text-decoration:none; color:var(--ink); font-weight:700; font-size:1.15rem;
  padding:16px 8px; border-bottom:1px solid var(--line); }
.mobile-menu a.is-active{ color:var(--brand-ink); }
.mobile-menu .btn{ margin-top:24px; }
body.menu-open{ overflow:hidden; }

/* ===========================================================
   HERO
   =========================================================== */
.hero{ background:
    radial-gradient(120% 120% at 85% -10%, var(--brand-soft) 0%, transparent 55%),
    var(--bg); }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px,5vw,64px); align-items:center;
  padding-block:clamp(48px,7vw,88px); }
.hero h1{ margin-bottom:18px; }
.hero .lede{ margin-bottom:28px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-media{ position:relative; }
.hero-media image-slot, .hero-media .ph{ width:100%; aspect-ratio:4/3.2; }
.hero-badge{ position:absolute; bottom:-18px; left:-18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 18px; display:flex; gap:12px; align-items:center; }
.hero-badge .brick-ic{ color:var(--brand); }

/* trust strip */
.trust{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; color:var(--ink-3);
  font-weight:600; font-size:0.92rem; }
.trust .pill{ background:var(--surface); }

/* ---------- steps ---------- */
.steps{ counter-reset:step; }
.step{ position:relative; padding-left:0; }
.step .step-n{ width:42px; height:42px; border-radius:12px; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:800; margin-bottom:14px; }

/* ---------- package cards ---------- */
.pkg{ display:flex; flex-direction:column; position:relative; }
.pkg.is-rec{ border-color:var(--brand); box-shadow:var(--shadow); }
.pkg .pkg-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.pkg .pkg-vol{ font-size:2.2rem; font-weight:800; letter-spacing:-0.03em; }
.pkg .pkg-vol small{ font-size:1rem; font-weight:700; color:var(--ink-3); }
.pkg .pkg-grp{ color:var(--brand-ink); font-weight:700; margin:6px 0 18px; }
.pkg .pkg-grp-lead{ font-size:1.5rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink);
  line-height:1.05; margin:0 0 4px; }
.pkg.is-rec .pkg-grp-lead{ color:var(--brand-strong); }
.pkg .pkg-meta{ margin:0 0 14px; }
.pkg .pkg-meta .pkg-vol{ font-size:0.95rem; font-weight:700; color:var(--brand-ink); letter-spacing:0; }
.pkg ul{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:11px; }
.pkg ul li{ display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); font-size:0.96rem; }
.pkg ul li svg{ width:20px; height:20px; flex:0 0 auto; color:var(--ok); margin-top:1px; }
.pkg .btn{ margin-top:auto; }
.rec-flag{ position:absolute; top:-13px; left:28px; background:var(--brand); color:#fff;
  font-size:0.78rem; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:0.02em; }

/* ---------- recommender ---------- */
.recommender{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,36px); box-shadow:var(--shadow); }
.rec-controls{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.rec-out{ margin-top:22px; padding:20px; border-radius:var(--radius); background:var(--brand-soft);
  border:1px solid var(--brand-soft-2); display:none; }
.rec-out.show{ display:block; }
.rec-out strong{ color:var(--brand-strong); }

/* ---------- bouwersfeestje standout ---------- */
.party{ background:linear-gradient(120deg, var(--brand) 0%, var(--brand-strong) 100%); color:#fff;
  border-radius:var(--radius-xl); padding:clamp(32px,5vw,56px); position:relative; overflow:hidden; }
.party::after{ content:""; position:absolute; right:-40px; top:-40px; width:240px; height:240px; border-radius:24px;
  background:var(--stud); opacity:.16; transform:rotate(18deg); }
.party .eyebrow{ color:oklch(0.84 0.08 45); }
.party .eyebrow::before{ box-shadow:inset 0 0 0 3px var(--brand); }
.party h2{ color:#fff; max-width:20ch; }
.party p{ color:oklch(0.92 0.02 256); max-width:54ch; }
.party-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:center; position:relative; z-index:1; }
.party .btn-stud{ box-shadow:var(--shadow); }

/* ---------- reviews slot ---------- */
.reviews-slot{ border:1px dashed var(--line-2); border-radius:var(--radius-lg); background:var(--surface);
  padding:clamp(32px,5vw,56px); text-align:center; color:var(--ink-2); }
.reviews-slot .stars{ color:var(--stud); font-size:1.4rem; letter-spacing:3px; margin-bottom:10px; }

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:0; max-width:820px; margin-inline:auto; }
.faq-cat{ font-size:0.82rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--brand-ink);
  margin:32px 0 8px; }
.faq-cat:first-child{ margin-top:0; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; background:none; border:0; text-align:left; font:inherit; font-weight:700; font-size:1.08rem;
  color:var(--ink); padding:20px 44px 20px 0; cursor:pointer; position:relative; display:block; }
.faq-q::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.5rem;
  font-weight:600; color:var(--brand); transition:transform .2s var(--ease); }
.faq-item.open .faq-q::after{ transform:translateY(-50%) rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .28s var(--ease); }
.faq-a > div{ padding:0 44px 22px 0; color:var(--ink-2); }
.faq-a > div p{ margin:0; }
.faq-a > div p + p{ margin-top:10px; }
.faq-item.open .faq-a{ max-height:520px; }

/* ---------- two-path (kinderfeestje) ---------- */
.paths{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.path{ display:flex; flex-direction:column; }
.path.path--alt{ background:var(--brand-soft); border-color:var(--brand-soft-2); }
.path .path-tag{ margin-bottom:14px; }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--ink); color:#fff; border-radius:var(--radius-xl); padding:clamp(36px,5vw,64px);
  text-align:center; position:relative; overflow:hidden; }
.cta-band h2{ color:#fff; max-width:22ch; margin-inline:auto; }
.cta-band p{ color:oklch(0.82 0.01 260); max-width:52ch; margin:16px auto 28px; }
.cta-band .hero-cta{ justify-content:center; }
.cta-band .btn-ghost{ background:transparent; color:#fff; border-color:oklch(1 0 0 / 0.3); }
.cta-band .btn-ghost:hover{ background:oklch(1 0 0 / 0.08); border-color:#fff; color:#fff; }

/* ---------- page hero (interior pages) ---------- */
.page-hero{ background:var(--brand-soft); border-bottom:1px solid var(--line); }
.page-hero .container{ padding-block:clamp(40px,6vw,72px); }
.page-hero .lede{ margin-top:14px; }
.breadcrumb{ font-size:0.86rem; color:var(--ink-3); margin-bottom:14px; display:flex; gap:8px; flex-wrap:wrap; }
.breadcrumb a{ text-decoration:none; color:var(--ink-2); font-weight:600; }
.breadcrumb a:hover{ color:var(--brand-ink); }
.breadcrumb span{ color:var(--line-2); }

/* ---------- prose / feature lists ---------- */
.feature-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.feature-list li{ display:flex; gap:13px; align-items:flex-start; }
.feature-list .fl-ic{ width:32px; height:32px; border-radius:9px; background:var(--brand-soft); color:var(--brand-ink);
  display:grid; place-items:center; flex:0 0 auto; }
.feature-list .fl-ic svg{ width:18px; height:18px; }
.feature-list b{ display:block; margin-bottom:2px; }
.feature-list span.muted{ font-size:0.95rem; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }
.split .ph, .split image-slot{ width:100%; aspect-ratio:4/3; }

/* ---------- form ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-weight:700; font-size:0.92rem; }
.field label .req{ color:var(--brand); }
.field input, .field select, .field textarea{
  font:inherit; font-size:1rem; padding:13px 15px; border-radius:12px; border:1.5px solid var(--line-2);
  background:var(--surface); color:var(--ink); transition:border-color .12s, box-shadow .12s; width:100%; }
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-soft); }
.field .hint{ font-size:0.84rem; color:var(--ink-3); }
.field.error input, .field.error select{ border-color:oklch(0.6 0.2 25); }
.field .err-msg{ font-size:0.84rem; color:oklch(0.55 0.2 25); display:none; }
.field.error .err-msg{ display:block; }
.form-aside{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; }
.form-aside h3{ margin-bottom:16px; }
.rec-inline{ margin-top:8px; padding:14px 16px; border-radius:12px; background:var(--brand-soft);
  border:1px solid var(--brand-soft-2); font-size:0.95rem; display:none; }
.rec-inline.show{ display:block; }
.form-success{ display:none; text-align:center; padding:40px 20px; }
.form-success.show{ display:block; }
.form-success .ok-mark{ width:64px; height:64px; border-radius:50%; background:var(--ok-soft); color:var(--ok);
  display:grid; place-items:center; margin:0 auto 18px; }
.form-success .ok-mark svg{ width:32px; height:32px; }

/* offerte layout */
.offerte-cols{ grid-template-columns:1.6fr 1fr; gap:40px; align-items:start; }
@media (max-width: 880px){ .offerte-cols{ grid-template-columns:1fr; } }

/* — quote flow: steps + selectable choice cards (pickup / delivery) — */
.form-step{ border:0; margin:0; padding:0; min-width:0; }
.form-step + .form-step{ margin-top:26px; padding-top:26px; border-top:1px solid var(--line); }
.form-step > legend{ display:flex; align-items:center; gap:11px; font-size:1.15rem; font-weight:800;
  letter-spacing:-0.01em; padding:0; margin-bottom:8px; color:var(--ink); }
.step-badge{ width:28px; height:28px; flex:0 0 auto; border-radius:50%; background:var(--brand); color:#fff;
  font-size:0.9rem; font-weight:800; display:grid; place-items:center; }
.form-step .step-sub{ color:var(--ink-2); margin:0 0 16px; }
.form-step [hidden], .pickup-address[hidden]{ display:none !important; }

.choice-grid{ display:grid; gap:14px; }
.choice-grid--3{ grid-template-columns:repeat(3,1fr); }
.choice-grid--2{ grid-template-columns:1fr 1fr; }
@media (max-width: 560px){ .choice-grid--3, .choice-grid--2{ grid-template-columns:1fr; } }
.choice{ position:relative; display:block; cursor:pointer; }
.choice input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.choice-body{ display:flex; flex-direction:column; gap:6px; height:100%; border:1.5px solid var(--line-2);
  border-radius:var(--radius); background:var(--surface); padding:16px 18px;
  transition:border-color .14s, box-shadow .14s; }
.choice input:hover + .choice-body{ border-color:var(--brand-soft-2); }
.choice input:checked + .choice-body{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.choice input:focus-visible + .choice-body{ box-shadow:0 0 0 3px var(--brand-soft); }
.choice-head{ display:flex; align-items:center; gap:10px; }
.choice-head b{ font-size:1.04rem; }
.choice-ic{ width:34px; height:34px; flex:0 0 auto; border-radius:9px; background:var(--brand-soft);
  color:var(--brand-ink); display:grid; place-items:center; }
.choice-ic svg{ width:19px; height:19px; }
.choice-text{ color:var(--ink-2); font-size:0.92rem; }
.choice-best{ color:var(--ink-3); font-size:0.84rem; margin-top:auto; padding-top:2px; }
/* compact variant for the package picker */
.choice--pkg .choice-body{ align-items:center; text-align:center; gap:3px; padding:18px 12px; }
.choice--pkg .choice-vol{ font-size:1.25rem; font-weight:800; color:var(--ink); line-height:1.1; }
.choice--pkg .choice-sub{ color:var(--ink-3); font-size:0.84rem; }
.choice--pkg .choice-price{ font-weight:700; color:var(--brand-ink); font-size:0.9rem; margin-top:3px; }
.choice--pkg .choice-extra{ font-size:0.8rem; color:var(--ink-3); margin-top:1px; }

.field-note{ display:flex; align-items:center; gap:8px; margin-top:13px; font-size:0.9rem; color:var(--ink-2); }
.field-note [data-ic]{ color:var(--brand); flex:0 0 auto; }
.field-note [data-ic] svg{ width:17px; height:17px; }

.pickup-address{ display:flex; gap:13px; align-items:flex-start; margin-top:14px; padding:16px 18px;
  border-radius:var(--radius); background:var(--brand-soft); border:1px solid var(--brand-soft-2); }
.pickup-address .pa-ic{ width:34px; height:34px; flex:0 0 auto; border-radius:9px; background:var(--surface);
  color:var(--brand-ink); display:grid; place-items:center; }
.pickup-address .pa-ic svg{ width:19px; height:19px; }
.pickup-address b{ display:block; font-size:0.98rem; }
.pickup-address span{ display:block; color:var(--ink-2); font-size:0.92rem; }
.pickup-address .pa-soft{ color:var(--ink-3); font-size:0.85rem; margin-top:3px; }

/* ===========================================================
   FOOTER (injected by site.js)
   =========================================================== */
.site-footer{ background:var(--brand-strong); border-top:1px solid var(--brand-strong); color:oklch(0.88 0.02 264); margin-top:0; }
.site-footer .brand{ color:#fff; }
.site-footer .brand b{ color:#fff; }
.site-footer .brand small{ color:oklch(0.80 0.03 264); }
.site-footer .logo rect{ fill:oklch(0.62 0.10 264); }
.site-footer .logo circle[fill="var(--brand)"]{ fill:oklch(0.62 0.10 264); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; padding-block:56px 32px; }
.footer-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px;
  padding-top:clamp(32px,4vw,48px); }
.footer-cta .fc-txt h3{ color:#fff; font-size:1.18rem; margin-bottom:4px; letter-spacing:-0.01em; }
.footer-cta .fc-txt p{ color:oklch(0.85 0.02 264); font-size:0.92rem; max-width:52ch; margin:0; }
.footer-cta .fc-btns{ display:flex; flex-wrap:wrap; gap:10px; flex:0 0 auto; }
.footer-cta .btn-ghost{ background:transparent; color:#fff; border-color:oklch(1 0 0 / 0.4); }
.footer-cta .btn-ghost:hover{ background:oklch(1 0 0 / 0.08); }
.footer-cta + .footer-grid{ border-top:1px solid oklch(1 0 0 / 0.13); margin-top:clamp(28px,3.4vw,40px); }
@media (max-width:600px){ .footer-cta{ flex-direction:column; align-items:flex-start; } .footer-cta .fc-btns{ width:100%; } }
.footer-grid h4{ font-size:0.84rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:oklch(0.78 0.04 264);
  margin-bottom:14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ text-decoration:none; color:oklch(0.88 0.02 264); font-weight:500; }
.footer-grid a:hover{ color:#fff; }
.footer-about p{ color:oklch(0.85 0.02 264); font-size:0.95rem; margin-top:14px; max-width:34ch; }
.footer-legal{ border-top:1px solid oklch(1 0 0 / 0.13); padding-block:24px 36px; color:oklch(0.76 0.025 264); font-size:0.84rem; }
.footer-legal p{ margin-bottom:8px; max-width:none; }
.footer-legal .tm{ color:oklch(0.88 0.02 264); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; align-items:center; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 920px){
  .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ order:-1; }
  .party-grid{ grid-template-columns:1fr; }
  .paths{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  body{ font-size:16px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .hero-cta .btn{ width:100%; }
}

/* entrance (cheap, reduced-motion safe) */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(14px); animation:reveal .5s var(--ease) forwards; }
  @keyframes reveal{ to{ opacity:1; transform:none; } }
}

/* ===========================================================
   DESIGN PASS v2 — hierarchy · trust · package clarity
   (later rules override base; safe to read top-down)
   =========================================================== */

/* — refined hero: subtle stud-dot texture, no childishness — */
.hero{ position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(var(--brand) 1.4px, transparent 1.6px);
  background-size: 24px 24px;
  opacity:.055;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 58%);
  mask-image: linear-gradient(115deg, #000 0%, transparent 58%); }
.hero .container{ position:relative; z-index:1; }
.hero h1{ letter-spacing:-0.025em; }
.hero .hero-concept{ display:inline-flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }

/* — buttons: a touch more substance — */
.btn-white{ background:#fff; color:var(--brand-ink); }
.btn-white:hover{ background:var(--brand-soft); box-shadow:var(--shadow); }
.btn-lg{ font-weight:700; }

/* — header polish — */
.site-header{ box-shadow:0 1px 0 var(--line); }
.nav-links a{ position:relative; }
.nav-links a.is-active::after{ content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px;
  border-radius:2px; background:var(--brand); }
.nav-cta .btn-primary{ box-shadow:0 1px 2px oklch(0.50 0.13 45 / .28); }
.mobile-menu{ padding-top:12px; }
.mobile-menu .mm-label{ font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-3); padding:8px 8px 4px; }
.mobile-menu .mm-help{ font-size:0.86rem; color:var(--ink-3); padding:14px 8px 0; line-height:1.5; }
.nav-cta{ gap:8px; }
.nav-cta .btn{ --pad-x:18px; }

/* — Toepassingen dropdown (desktop) — */
.nav-dd{ position:relative; }
.nav-dd-toggle{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; cursor:pointer;
  font:inherit; color:var(--ink-2); font-weight:600; font-size:0.95rem; padding:9px 13px; border-radius:10px;
  transition:color .12s, background .12s; }
.nav-dd-toggle:hover{ color:var(--ink); background:var(--surface-2); }
.nav-dd-toggle.is-active{ color:var(--brand-ink); background:var(--brand-soft); }
.nav-dd-caret{ width:15px; height:15px; transition:transform .18s var(--ease); }
.nav-dd:hover .nav-dd-caret, .nav-dd.open .nav-dd-caret{ transform:rotate(180deg); }
.nav-dd-menu{ position:absolute; top:calc(100% + 9px); left:0; min-width:248px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:8px;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .16s var(--ease), transform .16s var(--ease); z-index:60; }
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu{ opacity:1; transform:none; pointer-events:auto; }
/* invisible hover bridge so the menu stays open while moving the cursor down */
.nav-dd-menu::before{ content:""; position:absolute; top:-9px; left:0; right:0; height:9px; }
.nav-dd-link{ display:block; padding:11px 14px; border-radius:11px; text-decoration:none;
  color:var(--ink); transition:background .12s; }
.nav-dd-link:hover{ background:var(--surface-2); }
.nav-dd-link.is-active{ background:var(--brand-soft); }
.nav-dd-txt b{ display:block; font-size:0.98rem; font-weight:700; line-height:1.25; color:var(--ink); }
.nav-dd-txt span{ display:block; font-size:0.82rem; color:var(--ink-3); margin-top:2px; }

/* — mobile: Toepassingen group, always expanded for quick scanning — */
.mobile-menu .mm-group{ font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-3); padding:16px 8px 4px; margin:0; }
.mobile-menu a.mm-sub{ padding-left:20px; }

/* keep the quote CTA visible on tablets/large phones, hide only on tiny screens */
@media (max-width: 1180px){
  .nav-cta .btn{ display:inline-flex; --pad-y:10px; --pad-x:16px; font-size:0.92rem; }
}
@media (max-width: 460px){
  /* keep the primary conversion action one tap away; secondary stays in the menu */
  .nav-cta .btn-ghost{ display:none; }
  .nav-cta .btn-primary{ display:inline-flex; --pad-y:9px; --pad-x:14px; font-size:0.9rem; }
}

/* — TRUST BAR — operational credibility, calm & professional — */
.trustbar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.trustbar .ti{ background:var(--surface); padding:24px 26px; display:flex; gap:15px; align-items:flex-start; }
.trustbar .ti .ti-ic{ width:42px; height:42px; flex:0 0 auto; border-radius:12px; background:var(--brand-soft);
  color:var(--brand-ink); display:grid; place-items:center; }
.trustbar .ti .ti-ic svg{ width:22px; height:22px; }
.trustbar .ti b{ display:block; font-size:0.98rem; line-height:1.25; margin-bottom:3px; }
.trustbar .ti span{ color:var(--ink-2); font-size:0.88rem; line-height:1.4; }
.trustbar .ti--lead{ background:var(--brand-soft); }
.trustbar .ti--lead .ti-ic{ background:var(--surface); }
.trustbar .ti--lead b{ color:var(--brand-strong); }
@media (max-width: 900px){ .trustbar{ grid-template-columns:1fr 1fr; } }
@media (max-width: 480px){ .trustbar{ grid-template-columns:1fr; } }

/* — "SAME BRICKS" banner — the core product message — */
.samebricks{ display:flex; gap:14px 18px; align-items:center; justify-content:center; flex-wrap:wrap;
  background:var(--brand-soft); border:1px solid var(--brand-soft-2); border-radius:999px;
  padding:14px 26px; max-width:760px; margin:0 auto 36px; text-align:center; }
.samebricks .sb-ic{ width:30px; height:30px; flex:0 0 auto; color:var(--brand); }
.samebricks .sb-ic svg{ width:30px; height:30px; }
.samebricks p{ font-size:1rem; color:var(--ink-2); }
.samebricks b{ color:var(--brand-strong); }
@media (max-width: 560px){ .samebricks{ border-radius:var(--radius-lg); } }

/* — VOLUME METER — makes "more volume" instantly legible inside each card — */
.volmeter{ margin:2px 0 20px; }
.volmeter .vm-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.volmeter .vm-top span{ font-size:0.74rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-3); }
.volmeter .vm-top b{ font-size:0.84rem; color:var(--ink-2); }
.volmeter .vm-track{ height:16px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--line); overflow:hidden; position:relative; }
.volmeter .vm-fill{ height:100%; border-radius:999px; background:var(--brand);
  background-image: repeating-linear-gradient(90deg, transparent 0 15px, oklch(1 0 0 / .45) 15px 17px);
  transition:width .6s var(--ease); }
.volmeter .vm-fill.vm-50{ width:50%; }
.volmeter .vm-fill.vm-100{ width:100%; }
.volmeter .vm-fill.vm-over{ width:100%;
  background-image: repeating-linear-gradient(90deg, transparent 0 15px, oklch(1 0 0 / .45) 15px 17px),
    linear-gradient(90deg, var(--brand) 78%, var(--stud)); }

/* — slim Bouwersfeestje cross-sell (non-distracting) — */
.bf-strip{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:space-between;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--stud);
  border-radius:var(--radius); padding:20px 26px; box-shadow:var(--shadow-sm); }
.bf-strip .bf-txt b{ display:block; font-size:1.05rem; }
.bf-strip .bf-txt span{ color:var(--ink-2); font-size:0.94rem; }

/* — PRE-FOOTER conversion band (injected site-wide) — */
.prefooter{ background:linear-gradient(120deg, var(--brand) 0%, var(--brand-strong) 100%); color:#fff; }
.prefooter .inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  padding-block:clamp(32px,4vw,48px); }
.prefooter h3{ color:#fff; font-size:clamp(1.4rem,2.4vw,1.9rem); max-width:24ch; }
.prefooter p{ color:oklch(0.92 0.02 256); margin-top:6px; max-width:48ch; }
.prefooter .pf-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.prefooter .btn-ghost{ background:transparent; color:#fff; border-color:oklch(1 0 0 / .4); }
.prefooter .btn-ghost:hover{ background:oklch(1 0 0 / .1); border-color:#fff; color:#fff; }

/* — footer trust line — */
.footer-trust{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:18px; }
.footer-trust .pill{ background:var(--surface); font-size:0.8rem; }

@media (max-width: 700px){
  .prefooter .inner{ flex-direction:column; align-items:flex-start; }
  .bf-strip{ flex-direction:column; align-items:flex-start; }
}

/* ===========================================================
   DESIGN PASS v3 — approved photography integration
   =========================================================== */

/* — Homepage: full-bleed background hero with readability overlay — */
.hero--bg{ overflow:hidden; background-color:var(--brand-strong);
  background-size:cover; background-position:center 38%; }
.hero--bg::before{ display:none; }                 /* drop the dot texture over a photo */
.hero--bg .hero-overlay{ position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(90deg, oklch(0.22 0.05 264 / 0.88) 0%, oklch(0.22 0.05 264 / 0.68) 38%, oklch(0.22 0.05 264 / 0.32) 72%, oklch(0.22 0.05 264 / 0.12) 100%),
    linear-gradient(0deg, oklch(0.22 0.05 264 / 0.38) 0%, transparent 45%); }
.hero--bg .hero-bg-inner{ position:relative; z-index:1; padding-block:clamp(64px,9vw,116px); }
.hero--bg .hero-copy{ max-width:680px; }
.hero--bg .hero-cta .btn-ghost{ background:transparent; color:#fff; border-color:oklch(1 0 0 / 0.55); }
.hero--bg .hero-cta .btn-ghost:hover{ background:oklch(1 0 0 / 0.12); border-color:#fff; color:#fff; }
.hero--bg .eyebrow{ color:#fff; }
.hero--bg .eyebrow::before{ box-shadow:none; }
.hero--bg h1{ color:#fff; }
.hero--bg .lede{ color:oklch(0.95 0.01 256); }
.hero--bg .trust{ color:oklch(0.9 0.015 256); margin-top:34px; }
.hero--bg .trust .pill{ background:oklch(1 0 0 / 0.14); color:#fff; border-color:oklch(1 0 0 / 0.26);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.hero--bg .hero-trust-row{ display:flex; flex-wrap:wrap; gap:9px 22px; margin-top:22px; }
.hero--bg .hero-trust-row span{ display:inline-flex; align-items:center; gap:8px; color:oklch(0.94 0.01 256);
  font-size:0.92rem; font-weight:600; }
.hero--bg .hero-trust-row span::before{ content:"\2713"; color:var(--stud); font-weight:800; }
.hero--bg .hero-alt{ margin-top:24px; font-size:0.92rem; color:oklch(0.88 0.015 256); }
.hero--bg .hero-alt a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.hero--bg .hero-alt a:hover{ color:var(--stud); }
@media (max-width: 760px){
  .hero--bg{ background-position:center; }
  .hero--bg .hero-overlay{ background:
      linear-gradient(180deg, oklch(0.22 0.05 264 / 0.64) 0%, oklch(0.22 0.05 264 / 0.84) 100%); }
}

/* — Interior pages: consistent split hero (text + framed photo) — */
.page-hero-grid{ display:grid; grid-template-columns:1.04fr 0.96fr; gap:clamp(28px,4.5vw,60px);
  align-items:center; }
.page-hero-media{ position:relative; }
.page-hero-media img{ width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:block; }
@media (max-width: 880px){
  .page-hero-grid{ grid-template-columns:1fr; gap:28px; }
  .page-hero-media img{ aspect-ratio:16/9; }
}

/* — shared figure treatment (package comparison, etc.) — */
.figure{ margin:0; }
.figure img{ width:100%; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  display:block; }
.figure figcaption{ margin-top:14px; text-align:center; color:var(--ink-3); font-size:0.92rem; }
.figure.figure--wide img{ aspect-ratio:21/9; }
@media (max-width: 700px){ .figure.figure--wide img{ aspect-ratio:16/10; } }

/* — photo inside the dark .party block (Bouwersfeestje) — */
.party .party-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.party .party-media img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
@media (max-width: 920px){ .party .party-media img{ aspect-ratio:16/10; } }

/* — small thumbnail in the slim Bouwersfeestje strip — */
.bf-strip .bf-thumb{ width:96px; height:72px; flex:0 0 auto; border-radius:12px; object-fit:cover;
  box-shadow:var(--shadow-sm); }
@media (max-width: 700px){ .bf-strip .bf-thumb{ width:100%; height:160px; } }

/* — split section photos (About, Schools, Events, Large groups) — */
.split img.split-photo{ width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:block; }
.split-cap{ display:flex; align-items:center; gap:9px; margin:14px 0 0; color:var(--ink-3); font-size:0.88rem; }
.split-cap i{ color:var(--brand); flex:0 0 auto; }
.split-cap i svg{ width:18px; height:18px; }

/* — "Wat zoek je?" decision block — floating routing cards — */
.decide{ align-items:stretch; gap:clamp(26px,3.2vw,44px); position:relative; }
.decide-card{ display:flex; flex-direction:column; position:relative; overflow:hidden;
  border-radius:22px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-lg);
  padding:clamp(26px,3vw,34px); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.decide-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; }
.decide-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.decide-card .pill{ position:relative; }
.decide-card h3{ margin:14px 0 8px; font-size:clamp(1.35rem,2vw,1.6rem); }
.decide-card > p{ color:var(--ink-2); margin-bottom:18px; }
.decide-card .decide-cta{ margin-top:auto; padding-top:22px; display:flex; flex-direction:column;
  gap:12px; align-items:stretch; }
.decide-card .decide-cta .textlink{ align-self:center; }
/* PRIMARY — BrickMix : lifted + more elevated so it reads as the main route */
.decide-card--lead{ box-shadow:0 6px 14px oklch(0.25 0.05 264 / 0.10), 0 22px 46px oklch(0.25 0.05 264 / 0.16);
  border-color:transparent; }
.decide-card--lead::before{ background:linear-gradient(90deg, var(--brand) 0%, var(--action) 100%); height:6px; }
/* SECONDARY — Bouwersfeestje (visible but quieter) */
.decide-card--alt{ background:var(--brand-soft); border-color:transparent; }
.decide-card--alt::before{ background:var(--brand-soft-2); }
.decide-card--alt .btn-stud{ background:var(--brand); color:#fff; }
.decide-card--alt .btn-stud:hover{ background:var(--brand-ink); filter:none; }
/* refined audience chips */
.decide-tags{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.decide-tags li{ font-size:0.8rem; font-weight:600; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:9px; padding:6px 12px; white-space:nowrap; }
.decide-card--alt .decide-tags li{ background:#fff; border-color:var(--brand-soft-2); }
.decide-cta .textlink{ font-size:0.94rem; padding:2px 2px; }

/* elegant "OF" decision marker between the two routes */
.decide-or{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:6;
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); color:var(--brand); border:1px solid var(--line-2);
  box-shadow:0 4px 14px oklch(0.25 0.05 264 / 0.16); font-weight:800; font-size:0.8rem;
  text-transform:uppercase; letter-spacing:0.06em; pointer-events:none; }
.decide-lift{ transform:translateY(-12px); }
@media (max-width:560px){
  .decide-lift{ transform:none; }
  .decide-or{ width:46px; height:46px; }
}

/* decision cards: beat the generic body[data-page="home"] .card overrides (specificity) */
body[data-page="home"] .decide .decide-card{ border-radius:22px; box-shadow:var(--shadow-lg); }
body[data-page="home"] .decide .decide-card--lead{ border-radius:22px;
  box-shadow:0 6px 14px oklch(0.25 0.05 264 / 0.10), 0 22px 46px oklch(0.25 0.05 264 / 0.16); }
body[data-page="home"] .decide .decide-lift{ transform:translateY(-12px); }
/* keep the lift while the two cards are still side-by-side (they stack at 560px) */
@media (max-width:560px){
  body[data-page="home"] .decide .decide-lift{ transform:none; }
  /* stacked: the "of" marker becomes an in-flow divider between the two cards */
  body[data-page="home"] .decide-or{ position:static; transform:none; margin:4px auto;
    justify-self:center; }
}

/* — "Hoe werkt het" — connected process stepper — */
.psteps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
/* connector rail — sits behind the cards, visible in the gaps between steps */
.psteps::before{ content:""; position:absolute; top:56px; left:0; right:0; height:2px;
  background:var(--brand-soft-2); z-index:0; }
.pstep{ position:relative; z-index:1; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px 24px 28px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.pstep-medal{ position:relative; width:60px; height:60px; flex:0 0 auto; border-radius:50%;
  background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; margin-bottom:18px;
  border:4px solid var(--surface); }
.pstep-medal svg{ width:28px; height:28px; }
.pstep-n{ position:absolute; top:-7px; right:-9px; width:26px; height:26px; border-radius:50%;
  background:var(--brand); color:#fff; font-size:0.8rem; font-weight:800; display:grid; place-items:center;
  box-shadow:0 0 0 3px var(--surface); }
.pstep-body{ width:100%; flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
.pstep h3{ font-size:1.12rem; margin-bottom:12px; text-wrap:balance; }
.pstep-body > p{ color:var(--ink-2); font-size:0.95rem; margin:0; }
/* package rows inside step 1 — scannable, fills the card */
.pkg-rows{ width:100%; display:flex; flex-direction:column; text-align:left; }
.pkg-row{ padding:9px 2px; }
.pkg-row + .pkg-row{ border-top:1px solid var(--line); }
.pkg-row b{ display:block; color:var(--brand-ink); font-size:1.04rem; line-height:1.2; white-space:nowrap; }
.pkg-row span{ display:block; color:var(--ink-2); font-size:0.87rem; }

@media (max-width: 920px){
  /* vertical timeline on mobile — keeps the flow crystal clear */
  .psteps{ grid-template-columns:1fr; gap:0; }
  .psteps::before{ display:none; }
  .pstep{ flex-direction:row; align-items:flex-start; text-align:left; gap:18px;
    background:none; border:0; box-shadow:none; border-radius:0; padding:0 0 30px; }
  .pstep-medal{ margin-bottom:0; }
  .pstep-body{ justify-content:flex-start; }
  .pstep:not(:last-child)::before{ content:""; position:absolute; left:30px; top:62px; bottom:0; width:2px;
    background:var(--brand-soft-2); transform:translateX(-1px); }
  .pkg-row{ padding:8px 0; }
}

.steps-cta{ margin-top:clamp(36px,5vw,52px); text-align:center; }
.steps-cta h3{ font-size:1.5rem; }
.steps-cta p{ margin:6px 0 22px; }

/* ===========================================================
   WAVE BAND — full-bleed colored section with wavy top/bottom
   =========================================================== */
.wave-band{ position:relative; isolation:isolate;
  background:linear-gradient(125deg, var(--brand) 0%, var(--brand-strong) 100%);
  padding-block:clamp(84px,11vw,148px); margin-block:clamp(40px,6vw,80px);
  overflow:hidden; }
.wave-band .wave{ position:absolute; left:0; width:100%; height:clamp(38px,6vw,78px);
  line-height:0; z-index:1; pointer-events:none; }
.wave-band .wave svg{ width:100%; height:100%; display:block; }
.wave-band .wave path{ fill:var(--wave-fill, var(--bg)); }
.wave-band .wave-top{ top:-1px; }
.wave-band .wave-bottom{ bottom:-1px; }
.wave-band > .container, .wave-band > .party{ position:relative; z-index:2; }

/* party content reused inside a full-bleed band (drop its own card chrome) */
.party--bleed{ background:none; border-radius:0; padding:0; }
.party--bleed::after{ display:none; }

/* ===========================================================
   DESIGN PASS v4 — homepage Pakketten: group-size first
   =========================================================== */
.pkg-explain{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px); align-items:center;
  margin-bottom:clamp(36px,5vw,52px); }
.pkg-explain .figure img{ aspect-ratio:16/10; }
.mantra-lines{ display:flex; flex-direction:column; gap:1px; margin-bottom:16px; }
.mantra-lines b{ font-size:clamp(1.6rem,3.2vw,2.15rem); font-weight:800; letter-spacing:-0.025em; line-height:1.08; }
.mantra-lines b:nth-child(1){ color:var(--ink); }
.mantra-lines b:nth-child(2){ color:var(--brand); }
.mantra-lines b:nth-child(3){ color:var(--brand-strong); }
.pkg-explain p{ color:var(--ink-2); max-width:48ch; font-size:1.02rem; }
.fig-labels{ display:flex; gap:14px; margin-top:14px; }
.fig-labels .fl{ flex:1; text-align:center; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; }
.fig-labels .fl b{ display:block; color:var(--brand-ink); font-size:0.98rem; line-height:1.2; }
.fig-labels .fl span{ display:block; color:var(--ink-2); font-size:0.84rem; }
@media (max-width: 880px){
  .pkg-explain{ grid-template-columns:1fr; gap:24px; }
  .pkg-explain .figure{ order:-1; }
}

.pkgs-grid{ display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:22px; align-items:stretch; }
@media (max-width: 760px){ .pkgs-grid{ grid-template-columns:1fr; } }
.pkg .pkg-grp-big{ font-size:1.7rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink);
  margin:14px 0 4px; line-height:1.1; }
.pkg .pkg-vol-line{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:20px; }
.pkg .pkg-vol-num{ font-weight:700; color:var(--brand-ink); white-space:nowrap; }
.vol-bricks{ display:inline-flex; gap:4px; align-items:center; }
.vol-bricks i{ width:17px; height:13px; border-radius:3px; background:var(--surface-2); border:1px solid var(--line-2); }
.vol-bricks i.on{ background:var(--brand); border-color:var(--brand); }
.vol-bricks .plus{ font-weight:800; color:var(--brand); margin-left:1px; font-size:1.05rem; }

.pkg.is-rec{ border:2px solid var(--brand); box-shadow:var(--shadow-lg); }
.pkg.is-rec .pkg-grp-big{ color:var(--brand-strong); }
.pkg > .pill{ white-space:nowrap; }

.pkg-helper{ margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--brand-soft); border:1px solid var(--brand-soft-2); border-radius:var(--radius-lg);
  padding:22px 28px; }
.pkg-helper .ph-ic{ width:46px; height:46px; flex:0 0 auto; border-radius:13px; background:var(--surface);
  color:var(--brand); display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.pkg-helper .ph-ic svg{ width:24px; height:24px; }
.pkg-helper .ph-txt{ flex:1; min-width:220px; }
.pkg-helper .ph-txt b{ display:block; font-size:1.1rem; }
.pkg-helper .ph-txt span{ color:var(--ink-2); }
.pkg-helper .btn{ flex:0 0 auto; }
@media (max-width: 600px){
  .pkg-helper{ flex-direction:column; align-items:flex-start; }
  .pkg-helper .btn{ width:100%; }
}

/* — Bouwersfeestje section as a choice helper — */
.party-options{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:18px;
  margin-top:30px; }
.popt{ background:oklch(1 0 0 / 0.10); border:1px solid oklch(1 0 0 / 0.22); border-radius:var(--radius-lg);
  padding:22px 24px; }
.popt-tag{ display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:1.12rem; color:#fff;
  margin-bottom:14px; }
.popt-tag::before{ content:""; width:13px; height:13px; border-radius:4px; background:#fff; flex:0 0 auto; }
.popt--alt .popt-tag::before{ background:var(--stud); }
.popt ul{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.popt ul li{ font-size:0.88rem; color:oklch(0.95 0.01 256); background:oklch(1 0 0 / 0.10);
  border:1px solid oklch(1 0 0 / 0.18); border-radius:999px; padding:5px 13px; }
.popt-foot{ font-weight:700; color:#fff; margin:0; }
.popt--alt .popt-foot{ color:var(--stud); }
.party-cta{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.party .btn-ghost{ background:transparent; color:#fff; border-color:oklch(1 0 0 / 0.4); }
.party .btn-ghost:hover{ background:oklch(1 0 0 / 0.1); border-color:#fff; color:#fff; }
@media (max-width: 920px){ .party-options{ grid-template-columns:1fr; } }
/* keep the choice itself primary — image plays a supporting role */
.party--choice .party-grid{ grid-template-columns:1.45fr 0.55fr; align-items:center; }
.party--choice .party-media img{ aspect-ratio:4/3; }
@media (max-width: 920px){ .party--choice .party-grid{ grid-template-columns:1fr; } }

/* — Reviews (placeholder examples, Google-inspired) — */
.reviews-summary{ display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:18px 28px; margin-bottom:36px; }
.reviews-summary .rs-score{ font-size:3rem; font-weight:800; line-height:1; letter-spacing:-0.02em; color:var(--ink); }
.reviews-summary .rs-meta{ text-align:left; }
.reviews-summary .rs-meta strong{ display:block; font-size:0.98rem; }
.reviews-summary .rs-meta small{ display:block; color:var(--ink-3); font-size:0.84rem; margin-top:1px; }
.rv-stars{ color:var(--stud); letter-spacing:2px; }
.reviews-summary .rv-stars{ font-size:1.3rem; display:block; margin-bottom:2px; }
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width: 820px){ .reviews-grid{ grid-template-columns:1fr; } }
.review-card{ position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px 24px; box-shadow:var(--shadow-sm); overflow:hidden; }
.review-card .rv-mark{ position:absolute; top:6px; right:20px; font-family:Georgia, "Times New Roman", serif;
  font-size:3.4rem; line-height:1; color:var(--brand-soft-2); pointer-events:none; }
.review-card .rv-stars{ font-size:1.05rem; display:block; margin-bottom:12px; position:relative; }
.review-card .rv-text{ color:var(--ink); margin:0 0 20px; position:relative; }
.review-card .rv-who{ display:flex; align-items:center; gap:12px; }
.review-card .rv-av{ width:42px; height:42px; flex:0 0 auto; border-radius:50%; background:var(--brand-soft);
  color:var(--brand-ink); display:grid; place-items:center; font-weight:800; }
.review-card .rv-name{ font-weight:700; line-height:1.2; }
.review-card .rv-type{ color:var(--ink-3); font-size:0.86rem; }

/* — compact Google-style reviews — */
.reviews-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px;
  margin-bottom:clamp(18px,2.4vw,26px); }
.reviews-head h2{ margin:0; }
.greviews{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--ink-2); font-size:0.95rem; }
.greviews b{ color:var(--ink); font-weight:800; }
.greviews .rv-stars{ font-size:1.05rem; }
.greview-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); }
.greview{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(16px,1.8vw,22px); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px; }
.gr-top{ display:flex; align-items:center; gap:11px; }
.gr-av{ width:38px; height:38px; flex:0 0 auto; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink);
  display:grid; place-items:center; font-weight:800; }
.gr-id{ display:flex; flex-direction:column; line-height:1.2; margin-right:auto; }
.gr-name{ font-weight:700; }
.gr-when{ color:var(--ink-3); font-size:0.82rem; }
.gr-g{ width:24px; height:24px; flex:0 0 auto; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  display:grid; place-items:center; font-weight:800; font-size:0.95rem; color:#4285F4; font-family:Arial, sans-serif; }
.greview .rv-stars{ font-size:1rem; line-height:1; }
.greview p{ color:var(--ink-2); font-size:0.92rem; margin:0; }
/* — practical reassurance cards (honest, no fabricated social proof) — */
.reassure-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); }
@media (max-width:820px){ .reassure-row{ grid-template-columns:1fr; } }
.reassure-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(20px,2.2vw,26px); box-shadow:var(--shadow-sm); }
.reassure-card .rc-ic{ width:44px; height:44px; border-radius:12px; background:var(--brand-soft); color:var(--brand-ink);
  display:grid; place-items:center; margin-bottom:14px; }
.reassure-card .rc-ic i{ width:22px; height:22px; }
.reassure-card h3{ font-size:1.06rem; margin:0 0 6px; }
.reassure-card p{ color:var(--ink-2); font-size:0.94rem; margin:0; line-height:1.5; }
.reassure-card a{ color:var(--brand-ink); font-weight:600; }
body[data-page="home"] .reviews-sec{ padding-block:clamp(36px,4.5vw,60px); }
/* homepage ends on the single dark CTA band — hide the global prefooter duplicate here */
body[data-page="home"] .prefooter{ display:none; }
/* /pakketten ends on its own "Pakket gekozen?" CTA — hide the duplicate prefooter */
body[data-page="pakketten"] .prefooter{ display:none; }
@media (max-width:720px){
  .greview-row{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%;
    overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin-inline:-24px; padding-inline:24px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .greview-row::-webkit-scrollbar{ display:none; }
  .greview{ scroll-snap-align:start; }
}

/* ===========================================================
   LANDING SECTIONS — scholen-bso & evenementen
   (reuse existing language; small additive helpers)
   =========================================================== */
/* 5-up process stepper (reuses .pstep / medallions) */
.psteps--5{ grid-template-columns:repeat(5,1fr); }
@media (max-width: 920px){ .psteps--5{ grid-template-columns:1fr; } }
.psteps--6{ grid-template-columns:repeat(6,1fr); }
.psteps--6::before{ top:30px; }
@media (max-width: 1000px){ .psteps--6{ grid-template-columns:repeat(3,1fr); row-gap:30px; } .psteps--6::before{ display:none; } }
@media (max-width: 620px){ .psteps--6{ grid-template-columns:1fr; } }

/* package / capacity guidance — three clear group→volume rows */
.pkg-guide{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width: 760px){ .pkg-guide{ grid-template-columns:1fr; } }
.pkg-guide .pg{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px 24px; text-align:center; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  align-items:center; gap:6px; }
.pkg-guide .pg--rec{ border:2px solid var(--brand); box-shadow:var(--shadow); }
.pkg-guide .pg-grp{ font-size:1.5rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink); line-height:1.1; }
.pkg-guide .pg-sub{ color:var(--ink-3); font-size:0.88rem; }
.pkg-guide .pg-arrow{ color:var(--brand); font-size:1.4rem; line-height:1; margin:4px 0; }
.pkg-guide .pg-vol{ display:inline-block; background:var(--brand-soft); color:var(--brand-strong);
  font-weight:800; padding:9px 20px; border-radius:999px; font-size:1.05rem; }
.pkg-guide .pg--rec .pg-vol{ background:var(--brand); color:#fff; }
.pkg-note{ max-width:60ch; margin:24px auto 0; text-align:center; color:var(--ink-2); }

/* 3-column trust grid variant (6 items) */
.trustbar--3{ grid-template-columns:repeat(3,1fr); }

/* idea / inspiration cards with a soft header band */
.idea-card{ overflow:hidden; padding:0; }
.idea-card .idea-top{ background:var(--brand-soft); color:var(--brand-ink); padding:20px 24px;
  display:flex; align-items:center; gap:13px; border-bottom:1px solid var(--brand-soft-2); }
.idea-card .idea-top .idea-ic{ width:38px; height:38px; flex:0 0 auto; border-radius:11px; background:var(--surface);
  display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.idea-card .idea-top .idea-ic svg{ width:20px; height:20px; }
.idea-card .idea-top b{ font-size:1.12rem; color:var(--brand-strong); letter-spacing:-0.01em; }
.idea-card .idea-body{ padding:22px 24px 26px; }
.idea-card .idea-body p{ color:var(--ink-2); }

/* SEO / GEO prose blocks */
.seo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px 40px; }
@media (max-width: 800px){ .seo-grid{ grid-template-columns:1fr; } }
.seo-block h3{ font-size:1.2rem; margin-bottom:10px; }
.seo-block p{ color:var(--ink-2); }
.seo-block + .seo-block{ }

/* ===========================================================
   REASSURANCE LAYER — reusable sections (injected by site.js)
   =========================================================== */
/* 8-step "wat gebeurt er na mijn aanvraag" */
.numsteps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width: 920px){ .numsteps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 540px){ .numsteps{ grid-template-columns:1fr; } }
.numstep{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 22px 24px; box-shadow:var(--shadow-sm); }
.numstep .ns-num{ width:34px; height:34px; border-radius:10px; background:var(--brand-soft); color:var(--brand-ink);
  font-weight:800; display:grid; place-items:center; margin-bottom:14px; }
.numstep h4{ font-size:1.02rem; margin:0 0 6px; line-height:1.25; }
.numstep p{ color:var(--ink-2); font-size:0.92rem; }

/* portal teaser benefit checklist */
.check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; }
@media (max-width: 480px){ .check-grid{ grid-template-columns:1fr; } }
.check-grid .ck{ display:flex; gap:11px; align-items:center; }
.check-grid .ck .ck-ic{ width:28px; height:28px; flex:0 0 auto; border-radius:8px; background:var(--ok-soft);
  color:var(--ok); display:grid; place-items:center; }
.check-grid .ck .ck-ic svg{ width:16px; height:16px; }
.check-grid .ck b{ font-weight:600; font-size:0.96rem; }

/* status example — horizontal timeline (non-interactive) */
.statuscard{ padding:clamp(24px,4vw,40px); }
.statustl{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.statustl .st{ position:relative; text-align:center; padding-top:42px; }
.statustl .st::before{ content:""; position:absolute; top:14px; left:-50%; width:100%; height:3px;
  background:var(--line-2); z-index:0; }
.statustl .st:first-child::before{ display:none; }
.statustl .st.done::before{ background:var(--ok); }
.statustl .st .st-dot{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:30px; height:30px;
  border-radius:50%; border:2.5px solid var(--line-2); background:var(--surface); display:grid; place-items:center;
  z-index:1; color:var(--ink-3); }
.statustl .st.done .st-dot{ border-color:var(--ok); background:var(--ok); color:#fff; }
.statustl .st.done .st-dot svg{ width:15px; height:15px; }
.statustl .st.now .st-dot{ border-color:var(--brand); box-shadow:0 0 0 5px var(--brand-soft); }
.statustl .st.now .st-dot b{ width:9px; height:9px; border-radius:50%; background:var(--brand); }
.statustl .st b.st-label{ display:block; font-size:0.92rem; line-height:1.25; }
.statustl .st.todo b.st-label{ color:var(--ink-3); }
.statustl .st span{ display:block; font-size:0.78rem; color:var(--ink-3); margin-top:3px; }
@media (max-width: 680px){
  .statustl{ grid-auto-flow:row; grid-auto-columns:auto; }
  .statustl .st{ text-align:left; padding:0 0 22px 44px; }
  .statustl .st:last-child{ padding-bottom:0; }
  .statustl .st::before{ top:26px; left:14px; width:3px; height:100%; }
  .statustl .st .st-dot{ left:0; transform:none; top:0; }
}

/* ===========================================================
   PRICING — package card prices, CTA stack, prijs-uitleg
   =========================================================== */
.pkg-price{ display:flex; align-items:baseline; gap:7px; margin:2px 0 3px; }
.pkg-price .pp-amt{ font-size:1.9rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink); line-height:1.05; }
.pkg-price .pp-unit{ color:var(--ink-2); font-size:0.9rem; font-weight:600; }
.pkg-price--quote .pp-amt{ font-size:1.4rem; color:var(--brand-strong); }
.pkg-extra{ font-size:0.85rem; color:var(--ink-3); margin:0 0 14px; }
.pkg-priceline{ font-weight:700; color:var(--brand-ink); margin:2px 0 14px; }
.pkg-priceline small{ color:var(--ink-3); font-weight:600; font-size:0.82rem; }
.pkg-pickup{ display:flex; gap:7px; align-items:center; font-size:0.84rem; color:var(--brand-ink); font-weight:600;
  margin:0 0 14px; }
.pkg-pickup [data-ic]{ color:var(--brand); flex:0 0 auto; }
.pkg-pickup [data-ic] svg{ width:15px; height:15px; }
.pkg-cta{ margin-top:auto; display:flex; flex-direction:column; gap:9px; }
.pkg-cta .btn{ margin-top:0; }

/* prijs-uitleg section */
.pricecard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;
  box-shadow:var(--shadow); }
.calc{ display:flex; flex-direction:column; margin-top:6px; }
.calc .cl{ display:flex; justify-content:space-between; align-items:baseline; padding:12px 0;
  border-bottom:1px solid var(--line); }
.calc .cl span{ color:var(--ink-2); }
.calc .cl b{ font-weight:700; }
.calc .cl.total{ border-bottom:0; border-top:2px solid var(--line-2); margin-top:4px; padding-top:15px; }
.calc .cl.total span{ color:var(--ink); font-weight:700; }
.calc .cl.total b{ font-size:1.5rem; color:var(--brand-strong); }
.dayrates{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
.dayrate{ background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.dayrate b{ display:block; color:var(--brand-ink); font-size:1rem; }
.dayrate span{ display:block; color:var(--ink-2); font-size:0.9rem; margin-top:5px; line-height:1.5; }
.trust-note{ display:flex; gap:12px; align-items:flex-start; background:var(--ok-soft);
  border:1px solid var(--brand-soft-2); border-radius:var(--radius); padding:16px 18px; margin-top:22px; }
.trust-note .tn-ic{ color:var(--ok); flex:0 0 auto; margin-top:1px; }
.trust-note .tn-ic svg{ width:22px; height:22px; }
.trust-note p{ font-size:0.92rem; color:var(--ink-2); }
.trust-note b{ color:var(--ink); }

/* ===========================================================
   AVAILABILITY LAYER — status badges, check UX, trust strip
   =========================================================== */
.avail{ display:inline-flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700;
  padding:5px 12px; border-radius:999px; }
.avail .av-dot{ width:8px; height:8px; border-radius:50%; background:currentColor; position:relative; }
.avail.ok{ background:var(--ok-soft); color:var(--ok); }
.avail.ok .av-dot::after{ content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid currentColor; opacity:0.4; animation:availpulse 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce){ .avail.ok .av-dot::after{ animation:none; } }
@keyframes availpulse{ 0%{ transform:scale(0.7); opacity:0.5; } 100%{ transform:scale(1.6); opacity:0; } }
.avail.limited{ background:var(--action-soft); color:var(--action-ink); }
.avail.no{ background:var(--surface-3); color:var(--ink-2); }
.avail-row{ margin:0 0 14px; }

/* availability check (simple, no calendar) */
.availcheck{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,36px); box-shadow:var(--shadow); }
.ac-controls{ display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:14px; align-items:end; }
@media (max-width: 760px){ .ac-controls{ grid-template-columns:1fr 1fr; } .ac-controls .ac-submit{ grid-column:1 / -1; } }
@media (max-width: 460px){ .ac-controls{ grid-template-columns:1fr; } }
.ac-submit .btn{ width:100%; }
.ac-result{ margin-top:20px; padding:18px 20px; border-radius:var(--radius); display:none; }
.ac-result.show{ display:block; }
.ac-result.ok{ background:var(--ok-soft); border:1px solid var(--brand-soft-2); }
.ac-result.limited{ background:var(--action-soft); border:1px solid var(--action-soft-2); }
.ac-result.no{ background:var(--surface-2); border:1px solid var(--line-2); }
.ac-result .acr-head{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; margin-bottom:6px; }
.ac-result .acr-head .avail{ font-size:0.78rem; }
.ac-result p{ color:var(--ink-2); font-size:0.95rem; }
.ac-result .acr-cta{ margin-top:14px; display:flex; flex-wrap:wrap; gap:12px; }
.ac-note{ display:flex; gap:8px; align-items:center; margin-top:14px; font-size:0.86rem; color:var(--ink-3); }
.ac-note [data-ic]{ color:var(--brand); flex:0 0 auto; }
.ac-note [data-ic] svg{ width:16px; height:16px; }

/* trust strip */
.trust-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width: 900px){ .trust-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px){ .trust-strip{ grid-template-columns:1fr; } }
.trust-strip .ts{ display:flex; gap:11px; align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:15px 16px; box-shadow:var(--shadow-sm); }
.trust-strip .ts .ts-ic{ width:32px; height:32px; flex:0 0 auto; border-radius:9px; background:var(--brand-soft);
  color:var(--brand-ink); display:grid; place-items:center; }
.trust-strip .ts .ts-ic svg{ width:18px; height:18px; }
.trust-strip .ts span{ font-weight:600; font-size:0.9rem; line-height:1.3; }

/* ===========================================================
   HIERARCHY PASS — distinctive layouts for rhythm variety
   =========================================================== */
/* 100L vs 200L direct comparison (replaces a 3-card grid) */
.pkg-select{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,26px); }
.pkg-select--3{ grid-template-columns:repeat(3,1fr); }
.psel-tag{ font-weight:800; font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--brand-ink);
  margin-bottom:2px; }
.psel{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.psel-img{ display:block; width:100%; aspect-ratio:16/9; overflow:hidden; }
.psel-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.psel-body{ padding:clamp(18px,2.2vw,24px); display:flex; flex-direction:column; gap:3px; }
.psel-vol{ font-size:clamp(1.5rem,2.4vw,1.9rem); font-weight:800; letter-spacing:-0.02em; color:var(--ink); line-height:1.05; }
.psel-grp{ color:var(--brand-ink); font-weight:700; font-size:0.96rem; }
.psel-price{ font-size:1.35rem; font-weight:800; color:var(--ink); margin:8px 0 16px; }
.psel-price small{ font-size:0.82rem; font-weight:600; color:var(--ink-3); }
@media (max-width: 560px){ .pkg-select{ grid-template-columns:1fr; } }
/* Lead with group size, volume+price support it (home + /pakketten + /kinderfeestje, consistent) */
body[data-page="pakketten"] .psel-tag,
body[data-page="kinderfeestje"] .psel-tag,
body[data-page="scholen-bso"] .psel-tag,
body[data-page="evenementen"] .psel-tag,
body[data-page="home"] .psel-tag{ order:0; }
body[data-page="pakketten"] .psel-grp,
body[data-page="kinderfeestje"] .psel-grp,
body[data-page="scholen-bso"] .psel-grp,
body[data-page="evenementen"] .psel-grp,
body[data-page="home"] .psel-grp{ font-size:clamp(1.4rem,2.2vw,1.6rem); font-weight:800; letter-spacing:-0.02em;
  color:var(--ink); line-height:1.05; order:1; }
body[data-page="pakketten"] .psel-vol,
body[data-page="kinderfeestje"] .psel-vol,
body[data-page="scholen-bso"] .psel-vol,
body[data-page="evenementen"] .psel-vol,
body[data-page="home"] .psel-vol{ order:2; font-size:0.92rem; font-weight:600; color:var(--ink-3); }
body[data-page="pakketten"] .psel-price,
body[data-page="kinderfeestje"] .psel-price,
body[data-page="scholen-bso"] .psel-price,
body[data-page="evenementen"] .psel-price,
body[data-page="home"] .psel-price{ order:3; font-size:1.15rem; margin:6px 0 14px; }
body[data-page="pakketten"] .psel-body .btn,
body[data-page="kinderfeestje"] .psel-body .btn,
body[data-page="scholen-bso"] .psel-body .btn,
body[data-page="evenementen"] .psel-body .btn,
body[data-page="home"] .psel-body .btn{ order:4; margin-top:8px; }

/* /kinderfeestje + /scholen-bso + /evenementen — compacte image-hero in homepage-stijl */
body[data-page="kinderfeestje"] .kf-hero,
body[data-page="scholen-bso"] .kf-hero,
body[data-page="evenementen"] .kf-hero,
body[data-page="grote-groepen"] .kf-hero{ background-position:center 40%; }
body[data-page="kinderfeestje"] .kf-hero .hero-bg-inner,
body[data-page="scholen-bso"] .kf-hero .hero-bg-inner,
body[data-page="evenementen"] .kf-hero .hero-bg-inner,
body[data-page="grote-groepen"] .kf-hero .hero-bg-inner{ padding-block:clamp(40px,5vw,64px);
  min-height:clamp(360px,40vw,460px); display:flex; align-items:center; }
body[data-page="kinderfeestje"] .kf-hero .breadcrumb,
body[data-page="scholen-bso"] .kf-hero .breadcrumb,
body[data-page="evenementen"] .kf-hero .breadcrumb,
body[data-page="grote-groepen"] .kf-hero .breadcrumb{ color:oklch(1 0 0 / 0.72); margin-bottom:14px; }
body[data-page="kinderfeestje"] .kf-hero .breadcrumb a,
body[data-page="scholen-bso"] .kf-hero .breadcrumb a,
body[data-page="evenementen"] .kf-hero .breadcrumb a,
body[data-page="grote-groepen"] .kf-hero .breadcrumb a{ color:oklch(1 0 0 / 0.9); }
body[data-page="kinderfeestje"] .kf-hero .breadcrumb a:hover,
body[data-page="scholen-bso"] .kf-hero .breadcrumb a:hover,
body[data-page="evenementen"] .kf-hero .breadcrumb a:hover,
body[data-page="grote-groepen"] .kf-hero .breadcrumb a:hover{ color:#fff; }
body[data-page="kinderfeestje"] .kf-hero .breadcrumb span,
body[data-page="scholen-bso"] .kf-hero .breadcrumb span,
body[data-page="evenementen"] .kf-hero .breadcrumb span,
body[data-page="grote-groepen"] .kf-hero .breadcrumb span{ color:oklch(1 0 0 / 0.5); }

/* compacte herkenningslijst — gewoon tekst, geen badges/kaarten */
.recog{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 0; max-width:760px;
  margin:clamp(14px,2vw,22px) auto 0; }
.recog span{ position:relative; padding:0 18px; color:var(--ink); font-weight:600; font-size:1.02rem; }
.recog span + span::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--action); }

/* /offerte + /over + /bestellen — compacte image-hero */
body[data-page="offerte"] .kf-hero,
body[data-page="bestellen"] .kf-hero,
body[data-page="over"] .kf-hero{ background-position:center 42%; }
body[data-page="bestellen"] .kf-hero .hero-bg-inner{ padding-block:clamp(40px,5vw,64px);
  min-height:clamp(340px,36vw,420px); display:flex; align-items:center; }
body[data-page="bestellen"] .kf-hero .breadcrumb{ color:oklch(1 0 0 / 0.72); margin-bottom:14px; }
body[data-page="bestellen"] .kf-hero .breadcrumb a{ color:oklch(1 0 0 / 0.9); }
body[data-page="bestellen"] .kf-hero .breadcrumb a:hover{ color:#fff; }
body[data-page="bestellen"] .kf-hero .breadcrumb span{ color:oklch(1 0 0 / 0.5); }
body[data-page="bestellen"] .psel-tag{ order:0; }
body[data-page="bestellen"] .psel-grp{ font-size:clamp(1.4rem,2.2vw,1.6rem); font-weight:800; letter-spacing:-0.02em;
  color:var(--ink); line-height:1.05; order:1; }
body[data-page="bestellen"] .psel-vol{ order:2; font-size:0.92rem; font-weight:600; color:var(--ink-3); }
body[data-page="bestellen"] .psel-price{ order:3; font-size:1.15rem; margin:6px 0 14px; }
body[data-page="bestellen"] .psel-body .btn{ order:4; margin-top:8px; }
/* compact feature line under the price (group-size-first comparison cards) */
.psel-feat{ order:4; list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.psel-feat li{ position:relative; padding-left:23px; font-size:0.9rem; color:var(--ink-2); line-height:1.35; }
.psel-feat li::before{ content:""; position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%;
  background:var(--ok-soft); }
.psel-feat li::after{ content:""; position:absolute; left:5px; top:5px; width:5px; height:8px;
  border:solid var(--ok); border-width:0 2px 2px 0; transform:rotate(45deg); }
/* equal-height cards: body fills, button drops to the bottom and aligns across cards */
body[data-page="pakketten"] .psel-body{ flex:1; }
body[data-page="pakketten"] .psel-feat{ order:4; margin-bottom:16px; }
body[data-page="pakketten"] .psel-body .btn{ order:5; margin-top:auto; }
/* maatwerk card volgt een ander proces — subtiel onderscheiden */
.psel--quote{ background:var(--surface-2); }
.psel--quote .psel-body .btn{ background:var(--surface); color:var(--brand); border-color:var(--brand); }
.psel--quote .psel-body .btn:hover{ background:var(--brand-soft); }

/* ===========================================================
   LOGIN (/inloggen) + ACCOUNT (/mijn-account) — frontend UX
   =========================================================== */
.nav-account{ text-decoration:none; color:var(--ink-3); font-weight:500; font-size:0.85rem;
  padding:5px 8px; margin-left:4px; border-radius:8px; transition:color .12s, background .12s; }
.nav-account:hover{ color:var(--ink); background:var(--surface-2); }
.nav-account[aria-current]{ color:var(--brand-ink); }
@media (max-width: 1180px){ .nav-account{ display:none; } }

.auth-wrap{ max-width:460px; margin-inline:auto; }
.auth-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:clamp(26px,3.4vw,40px); }
.auth-card h1{ font-size:clamp(1.5rem,3vw,1.9rem); }
.auth-card .lede{ font-size:1rem; margin:10px 0 22px; }
.auth-note{ font-size:0.88rem; color:var(--ink-3); margin-top:14px; }
.auth-back{ background:none; border:0; color:var(--brand-ink); font:inherit; font-weight:700; cursor:pointer;
  padding:0; margin-top:16px; text-decoration:underline; text-underline-offset:2px; }
.auth-sentto{ font-weight:700; color:var(--ink); }
[hidden]{ display:none !important; }

/* account dashboard */
.acc-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px 16px;
  margin-bottom:clamp(18px,2.4vw,26px); }
.acc-head .acc-logout{ color:var(--ink-2); font-weight:600; text-decoration:none; font-size:0.92rem; }
.acc-head .acc-logout:hover{ color:var(--brand-ink); text-decoration:underline; }
.acc-tabs{ display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line); margin-bottom:clamp(22px,3vw,30px); }
.acc-tab{ background:none; border:0; border-bottom:2px solid transparent; font:inherit; font-weight:700;
  font-size:0.98rem; color:var(--ink-2); padding:11px 14px; cursor:pointer; margin-bottom:-1px;
  transition:color .12s, border-color .12s; }
.acc-tab:hover{ color:var(--ink); }
.acc-tab.is-active{ color:var(--brand-ink); border-bottom-color:var(--brand); }
.acc-saved{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:9px 14px; border-radius:10px;
  background:var(--ok-soft); color:var(--ok); font-weight:700; font-size:0.92rem; }

/* order / quote rows */
.acc-list{ display:flex; flex-direction:column; gap:16px; }
.acc-row{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:20px 22px; }
.acc-row-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px;
  margin-bottom:14px; }
.acc-row-id{ font-weight:800; font-size:1.05rem; }
.acc-row-date{ color:var(--ink-3); font-size:0.88rem; }
.acc-status{ display:inline-flex; align-items:center; gap:7px; font-size:0.82rem; font-weight:700;
  padding:5px 12px; border-radius:999px; }
.acc-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.acc-status.s-open{ background:oklch(0.96 0.05 86); color:var(--stud-ink); }
.acc-status.s-paid, .acc-status.s-done{ background:var(--ok-soft); color:var(--ok); }
.acc-status.s-progress{ background:var(--brand-soft); color:var(--brand-ink); }
.acc-status.s-neutral{ background:var(--surface-2); color:var(--ink-2); }
.acc-status.s-fail{ background:oklch(0.95 0.05 25); color:oklch(0.52 0.2 25); }
.acc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px 20px; }
.acc-cell .acc-k{ display:block; font-size:0.76rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:2px; }
.acc-cell .acc-v{ font-weight:600; }
.acc-row-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line); }
.acc-invoice-note, .acc-req-note{ font-size:0.86rem; color:var(--ink-3); }
.acc-reqline{ font-size:0.92rem; color:var(--ink-2); margin-top:4px; }

/* success page */
.succes-wrap{ max-width:680px; margin-inline:auto; text-align:center; }
.succes-mark{ width:72px; height:72px; border-radius:50%; background:var(--ok-soft); color:var(--ok);
  display:grid; place-items:center; margin:0 auto 20px; }
.succes-mark svg{ width:38px; height:38px; }
.succes-wrap h1{ font-size:clamp(1.7rem,3.4vw,2.3rem); }
.succes-wrap > .lede{ margin:12px auto 0; }
.succes-block{ text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:24px 26px; margin-top:clamp(24px,3.4vw,34px); }
.succes-block h2{ font-size:1.15rem; margin-bottom:14px; }
.succes-account ul{ list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:9px 18px; }
.succes-account ul li{ position:relative; padding-left:20px; color:var(--ink-2); font-size:0.94rem; }
.succes-account ul li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--ok); font-weight:800;
  font-size:0.95rem; line-height:1.4; }
@media (max-width:520px){ .succes-account ul{ grid-template-columns:1fr; } }
.succes-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:clamp(24px,3.4vw,32px); }

/* confirmation card */
.conf-card{ text-align:left; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden;
  margin-top:clamp(22px,3vw,30px); }
.conf-head{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.02rem; color:var(--ink);
  padding:14px 22px; background:var(--ok-soft); border-bottom:1px solid var(--line); }
.conf-check{ width:24px; height:24px; border-radius:50%; background:var(--ok); color:#fff;
  display:grid; place-items:center; flex:0 0 auto; }
.conf-check svg{ width:14px; height:14px; }
.conf-rows{ margin:0; padding:8px 22px; }
.conf-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:9px 0; border-top:1px solid var(--line); }
.conf-row:first-child{ border-top:none; }
.conf-row dt{ color:var(--ink-2); font-size:0.94rem; margin:0; }
.conf-row dd{ margin:0; font-weight:700; color:var(--ink); text-align:right; }
.conf-status{ display:inline-block; background:oklch(0.95 0.06 86); color:var(--stud-ink);
  font-size:0.82rem; font-weight:700; padding:3px 10px; border-radius:999px; }

/* timeline (wat gebeurt er nu) */
.conf-timeline{ list-style:none; margin:4px 0 0; padding:0; position:relative; }
.conf-timeline li{ position:relative; display:flex; gap:16px; padding-bottom:20px; }
.conf-timeline li:last-child{ padding-bottom:0; }
.conf-timeline li::before{ content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px;
  background:var(--line); }
.conf-timeline li:last-child::before{ display:none; }
.conf-timeline .ct-dot{ position:relative; z-index:1; width:32px; height:32px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:800; display:grid; place-items:center; flex:0 0 auto; }
.conf-timeline .ct-body{ display:flex; flex-direction:column; gap:2px; padding-top:4px; }
.conf-timeline .ct-body b{ color:var(--ink); font-size:1rem; }
.conf-timeline .ct-body span{ color:var(--ink-2); font-size:0.93rem; line-height:1.45; }

/* account benefit card — two columns on desktop */
.conf-account{ text-align:left; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(20px,2.6vw,28px); margin-top:clamp(22px,3vw,30px);
  display:grid; grid-template-columns:1fr 1fr; gap:18px 30px; align-items:center; }
.conf-account .ca-intro h2{ font-size:1.15rem; margin-bottom:6px; }
.conf-account .ca-intro p{ color:var(--ink-2); font-size:0.95rem; margin:0; line-height:1.5; }
.conf-account .ca-benefits{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.conf-account .ca-benefits li{ display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:600;
  font-size:0.95rem; }
.conf-account .ca-benefits li i{ color:var(--ok); flex:0 0 auto; }
.conf-account .ca-benefits li svg{ width:17px; height:17px; }
@media (max-width:600px){ .conf-account{ grid-template-columns:1fr; gap:16px; } }

/* account empty states */
.acc-empty{ text-align:center; background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--radius-lg);
  padding:clamp(34px,5vw,52px) 24px; }
.acc-empty p{ color:var(--ink-2); margin-bottom:18px; }

/* detail pages */
.detail-back{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); text-decoration:none; font-weight:600;
  font-size:0.92rem; margin-bottom:16px; }
.detail-back:hover{ color:var(--brand-ink); }
.detail-head{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:6px; }
.detail-head h1{ font-size:clamp(1.5rem,3vw,2rem); }
.detail-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:clamp(22px,3vw,32px); margin-top:clamp(18px,2.4vw,26px); }
.detail-card + .detail-card{ margin-top:18px; }
.detail-card h2{ font-size:1.15rem; margin-bottom:16px; }
.detail-foot{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
body[data-page="over"] .kf-hero .hero-bg-inner{ padding-block:clamp(40px,5vw,64px);
  min-height:clamp(360px,40vw,460px); display:flex; align-items:center; }
body[data-page="over"] .kf-hero .breadcrumb{ color:oklch(1 0 0 / 0.72); margin-bottom:14px; }
body[data-page="over"] .kf-hero .breadcrumb a{ color:oklch(1 0 0 / 0.9); }
body[data-page="over"] .kf-hero .breadcrumb a:hover{ color:#fff; }
body[data-page="over"] .kf-hero .breadcrumb span{ color:oklch(1 0 0 / 0.5); }
body[data-page="offerte"] .kf-hero .hero-bg-inner{ padding-block:clamp(40px,5vw,64px);
  min-height:clamp(340px,36vw,420px); display:flex; align-items:center; }
body[data-page="offerte"] .kf-hero .breadcrumb{ color:oklch(1 0 0 / 0.72); margin-bottom:14px; }
body[data-page="offerte"] .kf-hero .breadcrumb a{ color:oklch(1 0 0 / 0.9); }
body[data-page="offerte"] .kf-hero .breadcrumb a:hover{ color:#fff; }
body[data-page="offerte"] .kf-hero .breadcrumb span{ color:oklch(1 0 0 / 0.5); }
.form-wrap{ max-width:760px; margin-inline:auto; }
.reassure-line{ max-width:760px; margin:0 auto clamp(20px,2.6vw,30px); }
.next-steps{ max-width:760px; margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px); }
@media (max-width:640px){ .next-steps{ grid-template-columns:1fr; gap:18px; } }
.next-step{ display:flex; gap:13px; align-items:flex-start; }
.next-step b.ns-n{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:0.92rem; }
.next-step .ns-t{ font-weight:700; display:block; margin-bottom:2px; }
.next-step .ns-d{ color:var(--ink-2); font-size:0.92rem; }

/* terms acceptance checkbox (in forms) */
.terms-check{ display:flex; gap:11px; align-items:flex-start; font-weight:500; font-size:0.95rem; cursor:pointer;
  color:var(--ink); }
.terms-check input{ width:20px; height:20px; margin-top:1px; flex:0 0 auto; accent-color:var(--action); cursor:pointer; }
.terms-check a{ color:var(--brand-ink); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.field.error .terms-check{ color:oklch(0.52 0.2 25); }

/* legal / terms prose page */
.legal-prose{ max-width:760px; }
.legal-prose h2{ font-size:1.2rem; margin:clamp(26px,3.4vw,38px) 0 8px; }
.legal-prose h2:first-child{ margin-top:0; }
.legal-prose h2 .ln{ color:var(--brand); font-weight:800; margin-right:8px; }
.legal-prose p{ color:var(--ink-2); margin:0 0 10px; }
.legal-prose a{ color:var(--brand-ink); font-weight:700; }
.legal-updated{ color:var(--ink-3); font-size:0.88rem; margin-top:clamp(28px,4vw,40px);
  padding-top:18px; border-top:1px solid var(--line); }

/* /bestellen — availability indicator (frontend concept) */
.order-avail{ display:flex; align-items:center; gap:9px; margin-top:12px; padding:10px 14px; border-radius:10px;
  font-size:0.92rem; font-weight:600; }
.order-avail[hidden]{ display:none; }
.order-avail.ok{ background:var(--ok-soft); color:var(--ok); }
.order-avail.warn{ background:oklch(0.96 0.06 86); color:var(--stud-ink); }
.order-avail .oa-dot{ width:9px; height:9px; border-radius:50%; background:currentColor; flex:0 0 auto; }
/* account — prominent upcoming reservation block */
.acc-upcoming{ background:linear-gradient(120deg, var(--brand) 0%, var(--brand-strong) 100%); color:#fff;
  border-radius:var(--radius-lg); padding:22px 24px; margin-bottom:clamp(22px,3vw,30px); box-shadow:var(--shadow); }
.acc-upcoming .au-lab{ font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:oklch(0.9 0.04 256); margin-bottom:12px; }
.acc-upcoming .au-grid{ display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; }
.acc-upcoming .au-cell .au-k{ display:block; font-size:0.74rem; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; color:oklch(0.84 0.04 256); margin-bottom:2px; }
.acc-upcoming .au-cell .au-v{ font-weight:800; font-size:1.05rem; }
.acc-upcoming .acc-status{ background:oklch(1 0 0 / 0.18); color:#fff; }
.acc-upcoming .au-link{ margin-left:auto; color:#fff; font-weight:700; text-decoration:underline;
  text-underline-offset:3px; font-size:0.92rem; white-space:nowrap; }

/* /offerte — direct-vs-quote clarification split (not pricing cards) */
.flow-split{ max-width:760px; margin:clamp(20px,3vw,30px) auto 0; display:grid; grid-template-columns:1fr auto 1fr;
  gap:0 clamp(14px,2.4vw,28px); align-items:stretch; }
.flow-opt{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 22px 24px; background:var(--surface);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.flow-opt--quote{ border-color:var(--brand-soft-2); background:var(--brand-soft); }
.flow-opt h3{ font-size:1.1rem; margin-bottom:12px; }
.flow-opt ul{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:7px; }
.flow-opt ul li{ position:relative; padding-left:18px; color:var(--ink-2); font-size:0.94rem; }
.flow-opt ul li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%;
  background:var(--action); }
.flow-opt--quote ul li::before{ background:var(--brand); }
.flow-opt .btn{ margin-top:auto; align-self:flex-start; }
.flow-opt .flow-here{ align-self:flex-start; font-size:0.84rem; font-weight:700; color:var(--brand-ink);
  background:var(--surface); border:1px solid var(--brand-soft-2); border-radius:999px; padding:5px 12px; margin-top:auto; }
.flow-or{ display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--ink-3);
  font-size:0.85rem; }
@media (max-width:620px){
  .flow-split{ grid-template-columns:1fr; gap:12px; }
  .flow-or{ padding:2px 0; }
}
@media (max-width: 880px){ .pkg-select--3{ grid-template-columns:1fr; } }
/* compact, human reassurance line under the package selection (no card/icon/badge) */
.pkg-reassure{ max-width:62ch; margin:clamp(16px,2.2vw,24px) auto 0; text-align:center;
  color:var(--ink-2); font-size:0.96rem; line-height:1.55; }
.pkg-reassure a{ color:var(--brand-ink); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.pkg-reassure a:hover{ color:var(--action-ink); }
.pkg-compare{ position:relative; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line);
  border-radius:var(--radius-xl); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
.pc-col{ padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; }
.pc-col + .pc-col{ border-left:1px solid var(--line); }
.pc-col.feat{ background:var(--brand-soft); }
.pc-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.pc-vol{ font-size:clamp(2.1rem,4vw,2.9rem); font-weight:800; letter-spacing:-0.03em; line-height:0.95;
  color:var(--ink); }
.pc-vol small{ display:block; font-size:0.82rem; font-weight:700; color:var(--ink-3); letter-spacing:0.06em;
  margin-top:9px; text-transform:uppercase; }
.pc-grp{ font-size:1.12rem; font-weight:800; color:var(--brand-ink); margin:9px 0 0; }
.pc-price{ font-size:1.45rem; font-weight:800; color:var(--ink); margin:10px 0 1px; }
.pc-price small{ font-size:0.85rem; font-weight:600; color:var(--ink-3); }
.pc-extra{ font-size:0.85rem; color:var(--ink-3); margin:0 0 14px; }
.pc-cta{ margin-top:auto; display:flex; flex-direction:column; gap:9px; }
.pc-vs{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:48px; height:48px;
  border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:800;
  font-size:0.88rem; box-shadow:0 0 0 5px var(--bg); }
@media (max-width: 680px){
  .pkg-compare{ grid-template-columns:1fr; }
  .pc-col + .pc-col{ border-left:0; border-top:1px solid var(--line); }
  .pc-vs{ display:none; }
}
.pkg-maatwerk{ display:flex; align-items:center; gap:24px; margin-top:14px; background:var(--surface);
  border:1px dashed var(--line-2); border-radius:var(--radius-lg); padding:16px 24px; }
.pkg-maatwerk .pm-vol{ font-size:1.7rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink); flex:0 0 auto; }
.pkg-maatwerk .pm-txt{ flex:1; min-width:200px; }
.pkg-maatwerk .pm-txt b{ display:block; }
.pkg-maatwerk .pm-txt span{ color:var(--ink-2); font-size:0.92rem; }
.pkg-maatwerk .pm-side{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
@media (max-width: 640px){
  .pkg-maatwerk{ flex-direction:column; align-items:flex-start; gap:16px; }
  .pkg-maatwerk .pm-side{ width:100%; justify-content:space-between; }
}

/* use-case row list (replaces a 4-icon-card grid) */
.usecase-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 640px){ .usecase-list{ grid-template-columns:1fr; } }
.uc{ display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface); text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-sm); transition:transform .15s var(--ease), border-color .15s, box-shadow .15s; }
.uc:hover{ transform:translateX(4px); border-color:var(--brand-soft-2); box-shadow:var(--shadow); }
.uc .uc-ic{ width:48px; height:48px; flex:0 0 auto; border-radius:13px; background:var(--brand-soft);
  color:var(--brand-ink); display:grid; place-items:center; }
.uc .uc-ic svg{ width:24px; height:24px; }
.uc .uc-txt{ flex:1; min-width:0; }
.uc .uc-txt b{ display:block; font-size:1.08rem; }
.uc .uc-txt span{ color:var(--ink-2); font-size:0.9rem; }
.uc .uc-arrow{ margin-left:auto; color:var(--brand); font-weight:700; flex:0 0 auto;
  transition:transform .15s var(--ease); }
.uc:hover .uc-arrow{ transform:translateX(3px); }

/* ===========================================================
   REFINEMENT PASS — depth, section contrast, block hierarchy
   (styling only; tightens the operational/booking-platform feel)
   =========================================================== */
/* crisper separation between adjacent sections */
.section--soft{ border-block:1px solid var(--line); }
.section--brand{ border-block:1px solid var(--brand-soft-2); }

/* tighten oversized inner radii to match the new scale */
.card .card-ic{ border-radius:10px; }
.numstep .ns-num,
.fl-ic, .ti .ti-ic, .goal .goal-ic, .rz .rz-ic, .ts .ts-ic{ border-radius:9px; }

/* PRIMARY blocks — package cards are revenue-driving, give them weight */
.pkg{ box-shadow:var(--shadow); }
.pkg.is-rec{ box-shadow:var(--shadow-lg); border-width:2px; }
.pkg-compare{ box-shadow:var(--shadow-lg); border-color:var(--line-2); }
.pc-col.feat{ box-shadow:inset 0 0 0 1px var(--brand-soft-2); }
.pkg-maatwerk{ box-shadow:var(--shadow-sm); }

/* CTA containers read clearly as actions, not information */
.cta-band{ box-shadow:var(--shadow-lg); }
.pkg-helper, .bf-strip{ box-shadow:var(--shadow); }

/* interactive cards: restrained, deliberate hover */
.uc, .smnode{ transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease); }
.recommender:focus-within, .availcheck:focus-within{ box-shadow:var(--shadow-lg); }

/* SECONDARY/informational cards sit a touch lighter than primary ones */
.trustbar, .statuscard{ box-shadow:var(--shadow); }

/* ===========================================================
   PICKUP ORDER FLOW (bestellen.html) — fast, clear, operational
   =========================================================== */
.order-cols{ display:grid; grid-template-columns:1.55fr 1fr; gap:32px; align-items:start; }
.order-cols{ min-width:0; }
.order-cols > *{ min-width:0; }
.order-cols .form-grid, .order-cols .choice-grid, .order-cols .field{ min-width:0; }
.order-cols .field input, .order-cols .field select, .order-cols .field textarea{ min-width:0; max-width:100%; }
@media (max-width: 920px){ .order-cols{ grid-template-columns:1fr; } }

/* live order summary (review + pay) */
.order-summary{ position:sticky; top:88px; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:26px; }
@media (max-width: 920px){ .order-summary{ position:static; } }
.order-summary h3{ font-size:1.15rem; margin-bottom:6px; }
.order-summary .os-sub{ font-size:0.86rem; color:var(--ink-3); margin-bottom:16px; }
.os-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line);
  font-size:0.93rem; }
.os-row span:first-child{ color:var(--ink-2); flex:0 0 auto; }
.os-row span:last-child{ font-weight:600; text-align:right; }
.os-row.empty span:last-child{ color:var(--ink-3); font-weight:500; }
.os-total{ display:flex; justify-content:space-between; align-items:flex-start; margin-top:14px; padding-top:14px;
  border-top:2px solid var(--line-2); }
.os-total > span{ font-weight:700; }
.os-total .os-amt{ text-align:right; }
.os-total .os-amt b{ font-size:1.5rem; color:var(--brand-strong); display:block; line-height:1; }
.os-total .os-amt small{ font-size:0.78rem; color:var(--ink-3); font-weight:500; }
.os-loc{ margin-top:16px; padding:14px 16px; border-radius:var(--radius); background:var(--brand-soft);
  border:1px solid var(--brand-soft-2); font-size:0.88rem; }
.os-loc b{ display:block; margin-bottom:2px; }
.os-loc span{ color:var(--ink-2); display:block; }
.order-summary .btn{ margin-top:18px; }
.order-summary .os-fineprint{ font-size:0.8rem; color:var(--ink-3); margin-top:12px; text-align:center; }

/* package choice with price (reuses .choice) */
.pkg-choice .choice-body{ gap:5px; }
.pkg-choice .choice-vol{ font-size:1.5rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink); }
.pkg-choice .choice-price{ font-size:1.05rem; font-weight:800; color:var(--brand-ink); }
.pkg-choice .choice-sub{ color:var(--ink-3); font-size:0.86rem; }

/* day stepper */
.daypick{ display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:10px; overflow:hidden; }
.daypick button{ width:42px; height:46px; border:0; background:var(--surface); font-size:1.3rem; font-weight:700;
  color:var(--brand-ink); cursor:pointer; transition:background .12s; }
.daypick button:hover{ background:var(--brand-soft); }
.daypick input{ width:54px; height:46px; border:0; border-inline:1.5px solid var(--line-2); text-align:center;
  font:inherit; font-weight:700; font-size:1.05rem; -moz-appearance:textfield; }
.daypick input::-webkit-outer-spin-button, .daypick input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* billing toggle */
.checkbox-row{ display:flex; gap:12px; align-items:flex-start; padding:4px 0; }
.checkbox-row input{ width:20px; height:20px; margin-top:1px; accent-color:var(--brand); flex:0 0 auto; cursor:pointer; }
.checkbox-row label{ font-weight:600; font-size:0.96rem; cursor:pointer; }
.billing-extra{ margin-top:18px; }
.billing-extra[hidden]{ display:none; }

/* confirmation */
.order-done{ display:none; }
.order-done.show{ display:block; }
.order-done .od-mark{ width:66px; height:66px; border-radius:50%; background:var(--ok-soft); color:var(--ok);
  display:grid; place-items:center; margin:0 auto 18px; }
.order-done .od-mark svg{ width:34px; height:34px; }
.order-done .od-num{ display:inline-block; margin-top:6px; font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-weight:700; color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand-soft-2);
  border-radius:8px; padding:6px 14px; }
.od-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px; text-align:left; }
@media (max-width: 760px){ .od-grid{ grid-template-columns:1fr; } }
.od-mailrow{ display:flex; gap:11px; align-items:flex-start; padding:10px 0; }
.od-mailrow .om-ic{ width:30px; height:30px; flex:0 0 auto; border-radius:8px; background:var(--ok-soft); color:var(--ok);
  display:grid; place-items:center; }
.od-mailrow .om-ic svg{ width:17px; height:17px; }
.od-mailrow b{ display:block; font-size:0.95rem; }
.od-mailrow span{ color:var(--ink-2); font-size:0.86rem; }

/* ===========================================================
   HOMEPAGE WARMTH + FLOW PASS  (scoped to body[data-page="home"])
   Softer tinted backgrounds, gentle depth, extra wave transitions.
   =========================================================== */
body[data-page="home"]{
  --soft-home: var(--surface-2);          /* warm zand voor zachte secties */
}
body[data-page="home"] .section--soft{ background:var(--soft-home); border-block:0; }

/* both colored bands sit between soft sections — blend the waves to cream,
   and let them meet their neighbours seamlessly (no page-gap) */
body[data-page="home"] .wave-band{ margin-block:0; --wave-fill:var(--soft-home); }

/* PAKKETTEN — de conversie-centerpiece wordt een rustig petrolvlak met golven */
body[data-page="home"] #pakketten.wave-band--soft{
  background:linear-gradient(180deg, var(--brand-soft) 0%, #DEE6F0 100%);
  padding-block:clamp(56px,7vw,96px);
}
body[data-page="home"] #pakketten .pkg-explain figure img,
body[data-page="home"] #pakketten .pkg-compare,
body[data-page="home"] #pakketten .pkg-maatwerk,
body[data-page="home"] #pakketten .pkg-helper{ box-shadow:var(--shadow-lg); }
/* subtle warm glow behind the comparison for depth */
body[data-page="home"] #pakketten .pkg-compare{ position:relative; }

/* gentle interactive lift on the home cards (restrained) */
body[data-page="home"] .ti,
body[data-page="home"] .pc-col,
body[data-page="home"] .review-card{
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
body[data-page="home"] .ti:hover,
body[data-page="home"] .review-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
body[data-page="home"] .pc-col:hover{ box-shadow:var(--shadow-lg); }

/* FINAL CTA → FOOTER : a closing wave so the footer rises into the page */
body[data-page="home"] .home-cta-sec{ position:relative; overflow:hidden;
  padding-bottom:clamp(104px,12vw,168px); }
body[data-page="home"] .home-foot-wave{ position:absolute; left:0; bottom:-1px; width:100%;
  height:clamp(40px,6vw,74px); line-height:0; pointer-events:none; z-index:1; }
body[data-page="home"] .home-foot-wave svg{ width:100%; height:100%; display:block; }
body[data-page="home"] .home-foot-wave path{ fill:var(--brand-strong); }

/* warm the closing CTA band a touch + a faint stud accent (professional) */
body[data-page="home"] .home-cta-sec .cta-band{ position:relative; }
body[data-page="home"] .home-cta-sec .cta-band::before{
  content:""; position:absolute; right:-30px; top:-30px; width:160px; height:160px; border-radius:26px;
  background:
    radial-gradient(circle at 22px 22px, oklch(1 0 0 / 0.06) 6px, transparent 7px) 0 0 / 44px 44px;
  transform:rotate(12deg); pointer-events:none; }

/* ===========================================================
   HOMEPAGE ENERGY + RHYTHM PASS  (navy/orange direction)
   Tighter flow, bolder headlines, deeper rounder cards, punchier CTAs.
   =========================================================== */
/* tighter vertical rhythm — cut dead space, stronger flow */
body[data-page="home"] .section{ padding-block:clamp(50px,6.2vw,86px); }
body[data-page="home"] .section--tight{ padding-block:clamp(38px,4.5vw,58px); }
body[data-page="home"] .section-head{ margin-bottom:clamp(22px,3vw,38px); }
body[data-page="home"] .section-head h2{ font-size:clamp(1.95rem,3.7vw,2.95rem); letter-spacing:-0.025em; }
body[data-page="home"] .section-head .lede{ margin-top:13px; }

/* deeper, rounder cards on the homepage for more energy */
body[data-page="home"] .card,
body[data-page="home"] .pstep,
body[data-page="home"] .review-card,
body[data-page="home"] .uc,
body[data-page="home"] .pc-col,
body[data-page="home"] .pkg-maatwerk,
body[data-page="home"] .pkg-helper,
body[data-page="home"] .pkg-compare,
body[data-page="home"] .reviews-summary{ border-radius:18px; }
body[data-page="home"] .card{ box-shadow:var(--shadow); }
body[data-page="home"] .card--link:hover,
body[data-page="home"] .uc:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* CTA emphasis — warm orange glow so actions pull the eye */
body[data-page="home"] .btn-primary{ box-shadow:0 2px 4px oklch(0.62 0.16 45 / 0.28), 0 9px 22px oklch(0.62 0.16 45 / 0.22); }
body[data-page="home"] .btn-primary:hover{ box-shadow:0 3px 6px oklch(0.62 0.16 45 / 0.34), 0 13px 28px oklch(0.62 0.16 45 / 0.28); transform:translateY(-1px); }

/* the decision block sits frameless — cards float on the continuous page bg */
body[data-page="home"] .decide-tint{ background:transparent; }

/* ===========================================================
   HOMEPAGE SECTION TRANSITIONS — varied, organic flow
   waves on the colored bands · curves + overlaps elsewhere · a few straight edges
   =========================================================== */
body[data-page="home"] .flow-sep{ position:absolute; left:0; width:100%; line-height:0; pointer-events:none; z-index:3; }
body[data-page="home"] .flow-sep svg{ display:block; width:100%; height:100%; }
body[data-page="home"] .flow-sep--bottom{ bottom:0; height:clamp(32px,4.4vw,54px); }
body[data-page="home"] .flow-sep--top{ top:0; transform:translateY(-100%); height:clamp(32px,4.4vw,54px); }

/* Hero → Trust : soft white curve lifting out of the photo */
body[data-page="home"] .hero--bg{ position:relative; }
body[data-page="home"] .hero-curve{ height:clamp(40px,5vw,64px); }
body[data-page="home"] .hero-curve path{ fill:var(--bg); }

/* Wat is BrickMix → Hoe werkt het : tinted curve rises into the white section */
body[data-page="home"] .hoe-werkt{ position:relative; }
body[data-page="home"] .hoe-curve path{ fill:var(--surface-2); }

/* Soft petrol-vlak met golven — page-agnostic zodat elke pagina die .pk-band gebruikt het lichte vlak krijgt */
.pk-band.wave-band--soft{
  background:linear-gradient(180deg, var(--brand-soft) 0%, #DEE6F0 100%);
  padding-block:clamp(56px,7vw,96px);
}
.pk-band .wave path{ fill:var(--bg); }

/* /pakketten — compacte image-hero in homepage-stijl (~400–500px) */
body[data-page="pakketten"] .pk-hero{ background-position:center 45%; }
body[data-page="pakketten"] .pk-hero .hero-bg-inner{ padding-block:clamp(40px,5vw,64px);
  min-height:clamp(360px,40vw,460px); display:flex; align-items:center; }
body[data-page="pakketten"] .pk-hero .breadcrumb{ color:oklch(1 0 0 / 0.72); margin-bottom:14px; }
body[data-page="pakketten"] .pk-hero .breadcrumb a{ color:oklch(1 0 0 / 0.9); }
body[data-page="pakketten"] .pk-hero .breadcrumb a:hover{ color:#fff; }
body[data-page="pakketten"] .pk-hero .breadcrumb span{ color:oklch(1 0 0 / 0.5); }

/* /pakketten — compactere sectie-ritmiek (zelfde dichtheid als de homepage) */
body[data-page="pakketten"] .section{ padding-block:clamp(40px,5vw,68px); }
body[data-page="pakketten"] .section.section--tight{ padding-block:clamp(28px,3.5vw,46px); }
body[data-page="pakketten"] .pk-band.wave-band--soft{ padding-block:clamp(46px,5.5vw,76px); margin-block:0; }

/* decision block : frameless, floating choice cards between sections */
body[data-page="home"] .decide-tint{ position:relative; z-index:3; background:transparent;
  border-radius:0; box-shadow:none;
  margin-top:0;
  padding-top:0; padding-bottom:clamp(40px,6vw,72px); }

/* Reviews → FAQ : layered overlap (white panel rises over the tinted reviews) */
body[data-page="home"] .faq-overlap{ position:relative; z-index:2; border-radius:30px 30px 0 0;
  margin-top:clamp(-32px,-3.5vw,-20px); padding-top:clamp(44px,5.5vw,68px);
  background:var(--bg); box-shadow:0 -12px 30px oklch(0.25 0.05 264 / 0.05); }

/* ===========================================================
   ROUTE SELECTION — "Welke bouwactiviteit past bij jouw groep?"
   Two photo-led, independent route choices (no comparison cards).
   =========================================================== */
.routes{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,76px); align-items:stretch; }
.route{ display:flex; flex-direction:column; }
.route-media{ display:block; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease); }
.route-media img{ width:100%; aspect-ratio:16/11; object-fit:cover; display:block; }
.route-media:hover{ transform:translateY(-5px); box-shadow:0 10px 22px oklch(0.25 0.05 264 / 0.12), 0 26px 52px oklch(0.25 0.05 264 / 0.18); }
.route h3{ font-size:clamp(1.4rem,2.2vw,1.85rem); margin:24px 0 10px; letter-spacing:-0.02em; }
.route > p{ color:var(--ink-2); margin-bottom:24px; max-width:48ch; }
.route .btn{ align-self:flex-start; margin-top:auto; }
@media (max-width:760px){
  .routes{ grid-template-columns:1fr; gap:clamp(40px,9vw,56px); }
}

/* ===========================================================
   HOE WERKT HET — connected process flow (no cards)
   small image snippets · dotted curved connector · minimal text
   =========================================================== */
.procflow{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(4px,0.6vw,12px);
  margin-top:clamp(6px,1vw,16px); }
.procflow-line{ position:absolute; top:clamp(60px,7.4vw,92px); left:0; width:100%; height:90px; z-index:0;
  pointer-events:none; }
.procflow-line path{ fill:none; stroke:oklch(0.74 0.055 264); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:1 8; }
.procstep{ position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; }
.procstep-img{ width:clamp(124px,15.5vw,186px); height:clamp(124px,15.5vw,186px); border-radius:24px; overflow:hidden;
  display:block; box-shadow:0 10px 24px oklch(0.25 0.05 264 / 0.15); border:5px solid var(--surface); }
.procstep-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.procstep-n{ width:36px; height:36px; flex:0 0 auto; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:0.92rem; margin:-18px 0 12px; position:relative; z-index:2;
  border:3px solid var(--soft-home); }
.procstep h3{ font-size:1.1rem; margin-bottom:4px; letter-spacing:-0.01em; }
.procstep p{ color:var(--ink-2); font-size:0.9rem; max-width:20ch; margin:0; }
@media (max-width:760px){
  .procflow{ grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,32px) 14px; }
  .procflow-line{ display:none; }
}
@media (max-width:430px){
  .procflow{ grid-template-columns:1fr; }
}
/* compact, connected section */
body[data-page="home"] .hoe-werkt{ padding-block:clamp(30px,3.6vw,50px); }
body[data-page="home"] .hoe-werkt .section-head{ margin-bottom:clamp(6px,1vw,14px); }
body[data-page="home"] .hoe-werkt .steps-cta{ margin-top:clamp(14px,2vw,24px); }

/* ===========================================================
   MOBILE DENSITY PASS (≤560px) — tighten vertical rhythm so the
   funnel scrolls less. Padding-only; no content/layout changes.
   =========================================================== */
@media (max-width:560px){
  .section{ padding-block:40px; }
  .section--tight{ padding-block:28px; }
  body[data-page="home"] .section,
  body[data-page="pakketten"] .section{ padding-block:40px; }
  body[data-page="home"] .section--tight,
  body[data-page="pakketten"] .section.section--tight{ padding-block:26px; }
  body[data-page="home"] .hoe-werkt{ padding-block:34px; }
  /* colored wave bands carry the most dead space on mobile */
  .wave-band{ padding-block:52px; margin-block:0; }
  body[data-page="home"] #pakketten.wave-band--soft,
  .pk-band.wave-band--soft,
  body[data-page="pakketten"] .pk-band.wave-band--soft{ padding-block:44px; }
  .section-head{ margin-bottom:24px; }
  .hero-grid{ padding-block:34px; }
}

/* ===========================================================
   BLOG — index list + article prose (clean, scannable, SEO-ready)
   =========================================================== */
.blog-intro{ max-width:680px; }
.blog-intro p{ color:var(--ink-2); font-size:1.05rem; line-height:1.7; margin:0 0 14px; }

.blog-list{ max-width:820px; }
.blog-item{ display:grid; grid-template-columns:210px 1fr; gap:clamp(18px,2.6vw,30px); align-items:start;
  padding:clamp(22px,3vw,30px) 0; border-bottom:1px solid var(--line); }
.blog-item:first-child{ padding-top:0; }
.blog-item:last-child{ border-bottom:0; padding-bottom:0; }
.blog-thumb{ display:block; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--surface-2); }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-item h2{ font-size:clamp(1.2rem,2.1vw,1.45rem); letter-spacing:-0.01em; margin-bottom:8px; line-height:1.25; }
.blog-item h2 a{ color:var(--ink); }
.blog-item h2 a:hover{ color:var(--brand-ink); }
.blog-item .bl-meta{ font-size:0.84rem; color:var(--ink-3); margin-bottom:9px; }
.blog-item p{ color:var(--ink-2); margin:0 0 12px; max-width:62ch; line-height:1.6; }
.blog-item .bl-more{ color:var(--brand-ink); font-weight:700; font-size:0.94rem; }
.blog-item .bl-more:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:560px){ .blog-item{ grid-template-columns:1fr; gap:14px; } }

.article-prose{ max-width:680px; }
.art-meta{ font-size:0.86rem; color:var(--ink-3); margin-top:14px; display:flex; align-items:center; gap:8px; }
.art-meta .am-dot{ width:4px; height:4px; border-radius:50%; background:var(--ink-3); }
.article-prose .art-lead{ font-size:1.18rem; line-height:1.6; color:var(--ink); margin:0 0 8px; }
.article-prose h2{ font-size:clamp(1.3rem,2.3vw,1.65rem); letter-spacing:-0.015em; margin:clamp(28px,3.8vw,42px) 0 12px; }
.article-prose h3{ font-size:1.12rem; margin:22px 0 8px; }
.article-prose p{ color:var(--ink-2); font-size:1.05rem; line-height:1.72; margin:0 0 16px; }
.article-prose ul{ margin:0 0 16px; padding-left:1.25em; color:var(--ink-2); }
.article-prose li{ margin-bottom:8px; line-height:1.6; }
.article-prose li::marker{ color:var(--brand); }
.article-prose a{ color:var(--brand-ink); font-weight:700; }
.article-prose strong{ color:var(--ink); font-weight:700; }

.article-related{ max-width:680px; margin-top:clamp(30px,4vw,44px); padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--line); }
.article-related h2{ font-size:1.05rem; margin-bottom:12px; letter-spacing:0.01em; }
.article-related ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.article-related a{ color:var(--brand-ink); font-weight:700; font-size:0.96rem; }
.article-related a:hover{ text-decoration:underline; text-underline-offset:3px; }

.article-cta{ max-width:680px; margin-top:clamp(28px,3.6vw,40px); padding:clamp(22px,3vw,30px);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); }
.article-cta h2{ font-size:1.2rem; margin-bottom:6px; letter-spacing:-0.01em; }
.article-cta p{ color:var(--ink-2); margin:0 0 16px; font-size:0.96rem; }
.article-cta .ac-btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* 404 — pagina niet gevonden */
.nf-head{ text-align:center; }
.nf-head .eyebrow{ display:inline-block; }
.nf-head h1{ margin:6px 0 12px; }
.nf-head .lede{ margin-inline:auto; max-width:54ch; }
.nf-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:24px; }
.nf-options{ margin-top:clamp(36px,5vw,56px); }
.nf-options h2{ font-size:1.15rem; text-align:center; margin-bottom:16px; }
.nf-list{ display:flex; flex-direction:column; gap:10px; }
.nf-item{ display:flex; align-items:center; gap:16px; justify-content:space-between; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:16px 18px; box-shadow:var(--shadow-sm); transition:border-color .14s, box-shadow .14s, transform .14s; }
.nf-item:hover{ border-color:var(--brand); box-shadow:var(--shadow); transform:translateY(-1px); }
.nf-it-main{ display:flex; flex-direction:column; gap:3px; }
.nf-it-main b{ color:var(--ink); font-size:1.02rem; }
.nf-it-main span{ color:var(--ink-2); font-size:0.92rem; line-height:1.45; }
.nf-arrow{ color:var(--brand-ink); font-weight:700; font-size:1.2rem; flex:0 0 auto; }
.nf-home{ text-align:center; margin-top:clamp(28px,4vw,40px); }
.nf-home a{ color:var(--brand-ink); font-weight:700; }
.nf-home a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ===========================================================
   HOMEPAGE FUNNEL PICK — direct order vs quote, right under hero
   =========================================================== */
.funnel-pick .section-head{ margin-bottom:clamp(18px,2.2vw,26px); }
.funnel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px);
  max-width:840px; margin-inline:auto; }
.funnel-opt{ display:flex; flex-direction:column; gap:7px; padding:clamp(18px,2.2vw,24px);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.funnel-opt h3{ font-size:1.12rem; letter-spacing:-0.01em; line-height:1.25; }
.funnel-opt p{ color:var(--ink-2); font-size:0.95rem; margin:0; flex:1; line-height:1.5; }
.funnel-opt .btn{ align-self:flex-start; margin-top:8px; }
@media (max-width:600px){ .funnel-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   /bestellen — compact offerte redirect + hero pickup policy
   =========================================================== */
.order-redirect{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-bottom:18px;
  padding:11px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2);
  font-size:0.9rem; color:var(--ink-2); }
.order-redirect .textlink{ font-weight:700; }
.hero-policy{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; }
.hero-policy li{ display:flex; align-items:center; gap:8px; font-size:0.92rem; font-weight:600; color:#fff; }
.hero-policy li i{ color:#fff; flex:0 0 auto; }
.hero-policy li svg{ width:16px; height:16px; }

/* /bestellen — compact reservation header (replaces the image hero) */
.order-header{ background:var(--surface-2); border-bottom:1px solid var(--line);
  padding-block:clamp(14px,1.8vw,20px); }
.order-header .breadcrumb{ margin-bottom:6px; }
.order-header h1{ font-size:clamp(1.5rem,2.8vw,1.9rem); letter-spacing:-0.02em; margin:2px 0 4px; }
.order-header .oh-sub{ color:var(--ink-2); font-size:0.98rem; margin:0; }
.order-header .hero-policy{ margin-top:10px; }
.order-header .hero-policy li{ color:var(--ink-2); }
.order-header .hero-policy li i{ color:var(--ok); }

/* /bestellen — usage-days stepper + price breakdown */
.daystepper{ display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:var(--surface); }
.daystepper .ds-btn{ width:48px; border:none; background:var(--surface-2); color:var(--ink); font-size:1.5rem;
  line-height:1; cursor:pointer; transition:background .12s; }
.daystepper .ds-btn:hover{ background:var(--brand-soft); color:var(--brand-ink); }
.daystepper .ds-val{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:120px; padding:10px 14px; border-inline:1px solid var(--line); }
.daystepper .ds-val b{ font-size:1.35rem; font-weight:800; line-height:1; color:var(--ink); }
.daystepper .ds-val small{ font-size:0.78rem; color:var(--ink-3); margin-top:2px; }
.day-breakdown{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-top:14px;
  padding:12px 16px; border-radius:10px; background:var(--brand-soft); }
.day-breakdown .db-sum{ font-weight:700; color:var(--ink); }
.day-breakdown .db-calc{ color:var(--brand-ink); font-weight:700; }
.os-row.os-calc span:last-child{ color:var(--ink-2); font-size:0.9rem; }
/* /bestellen — auto-calculated pickup/return panel (read-only) */
.date-calc{ margin-top:14px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.date-calc .dc-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:11px 16px; border-top:1px solid var(--line); }
.date-calc .dc-row:first-child{ border-top:none; background:var(--surface-2); }
.date-calc .dc-k{ color:var(--ink-2); font-size:0.92rem; }
.date-calc .dc-v{ font-weight:700; color:var(--ink); text-align:right; }
/* modern date input (order flow) */
body[data-page="bestellen"] input[type="date"]{ cursor:pointer; position:relative;
  font-weight:600; color:var(--ink); }
body[data-page="bestellen"] input[type="date"]:hover{ border-color:var(--brand); }
body[data-page="bestellen"] input[type="date"]:focus{ border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft); outline:none; }
body[data-page="bestellen"] input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:0.6; padding:4px; border-radius:6px; transition:opacity .12s, background .12s; }
body[data-page="bestellen"] input[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity:1; background:var(--brand-soft); }

/* ===========================================================
   /offerte — "Wanneer vraag je een offerte aan?" qualification
   =========================================================== */
.quote-qual{ margin-top:clamp(24px,3.2vw,36px); padding:clamp(16px,2vw,20px) clamp(18px,2.2vw,22px);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); }
.quote-qual h2{ font-size:1.08rem; margin-bottom:10px; letter-spacing:-0.01em; }
.qual-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 24px; }
.qual-list li{ display:flex; align-items:center; gap:8px; font-size:0.94rem; color:var(--ink); font-weight:600; }
.qual-list li i{ color:var(--ok); flex:0 0 auto; }
.qual-list li svg{ width:16px; height:16px; }
.qual-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line); font-size:0.92rem; color:var(--ink-2); }
.qual-foot span{ flex:1; min-width:200px; }
.qual-foot .btn{ flex:0 0 auto; --pad-y:9px; --pad-x:16px; font-size:0.9rem; }
.soft-sep{ height:1px; background:var(--line); margin:clamp(24px,3.2vw,36px) 0; }

/* ===========================================================
   Audience cross-links — "Misschien past dit beter bij jouw situatie"
   =========================================================== */
.audience-switch{ max-width:760px; }
.audience-switch h2{ font-size:1.15rem; margin-bottom:6px; letter-spacing:-0.01em; }
.audience-switch ul{ list-style:none; margin:0; padding:0; }
.audience-switch li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 12px;
  padding:13px 0; border-bottom:1px solid var(--line); }
.audience-switch li:last-child{ border-bottom:0; padding-bottom:0; }
.audience-switch li a{ font-weight:700; color:var(--brand-ink); flex:0 0 auto; }
.audience-switch li a:hover{ text-decoration:underline; text-underline-offset:3px; }
.audience-switch li span{ color:var(--ink-2); font-size:0.94rem; }