/* UTAMA, richting B "De uitbetaling". Fintech ontmoet hospitality. */
:root{
  --sand:#FAF5EA; --sand-2:#F1E9DB; --sand-3:#E9DFCC; --paper:#FEFBF6;
  --ink:#17140F; --ink-2:#211C14; --ink-soft:#332A1F; --muted:#5B564C; --line:#E7DECD;
  --terra:#8B5A3C; --olive:#9CA47C; --olive-2:#C3C9A6; --olive-3:#C9D1A6; --olive-deep:#5B6A45; --sage:#EEF0E2;
  --ok:#2E7D5B;
  --display:'Manrope', 'Inter', system-ui, sans-serif;
  --body:'Inter', system-ui, -apple-system, sans-serif;
  --shadow:rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.04) 0 2px 6px, rgba(0,0,0,.1) 0 4px 8px;
  --lift:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -18px rgba(23,20,15,.35), 0 2px 6px rgba(23,20,15,.08);
  --ease:cubic-bezier(.2,.7,.2,1);
  --nav-h:60px;
}
@media (min-width:1024px){ :root{ --nav-h:68px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{
  margin:0; background:var(--sand); color:var(--ink);
  font:400 16px/1.55 var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--display); }
p{ margin:0; }
.num,.kn,.step-dot,strong,.fact,.formula,.d-count,.rail-n{ font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1; }
:focus-visible{ outline:2px solid var(--olive-deep); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:1312px; margin-inline:auto; padding-inline:16px; }
@media (min-width:768px){ .wrap{ padding-inline:32px; } }
@media (min-width:1200px){ .wrap{ padding-inline:48px; } }

.skip{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:var(--paper); padding:10px 14px; border-radius:8px; }
.skip:focus{ left:8px; }

/* Gekleurde placeholder achter elk beeld, zodat er nooit een leeg vlak staat */
.ph{ background-color:var(--ph, var(--sand-2)); background-image:linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,0,0,.12)); }

/* ---------- Bouwstenen ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-bottom:18px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--olive-deep); box-shadow:0 0 0 4px rgba(91,106,69,.14); }
.eyebrow-light{ color:rgba(254,251,246,.7); }
.eyebrow-light .dot{ background:var(--olive); box-shadow:0 0 0 4px rgba(156,164,124,.18); }
.accent{ color:var(--olive-deep); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 22px; border-radius:999px; border:0; cursor:pointer;
  font:600 15px/1 var(--body); text-decoration:none; white-space:nowrap;
  transition:background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease);
}
.btn .arr{ width:16px; height:16px; transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.btn:active{ transform:scale(.98); }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:#2b241a; }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(23,20,15,.2); }
.btn-ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn-paper{ background:var(--paper); color:var(--ink); }
.btn-paper:hover{ background:#fff; }
.btn-line{ background:transparent; color:var(--paper); box-shadow:inset 0 0 0 1.5px rgba(254,251,246,.3); }
.btn-line:hover{ box-shadow:inset 0 0 0 1.5px var(--paper); }
.btn-sm{ min-height:44px; padding:0 18px; font-size:14px; }
.btn-lg{ min-height:54px; padding:0 26px; font-size:16px; }
.btn-block{ width:100%; }
/* Telefoon: een lange knoptekst mag over twee regels in plaats van buiten de kaart te lopen (zie de P&L-knop onder het rekenvoorbeeld) */
@media (max-width:759px){ .btn{ max-width:100%; white-space:normal; line-height:1.2; text-align:center; } }

/* Rolchips: WIJ is inkt, JIJ is olijf, PARTNER is een open chip. Alles binnen het UTAMA-palet. */
.role{
  display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:4px;
  font:700 10.5px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  vertical-align:.12em;
}
.role.wij{ background:var(--ink); color:var(--paper); }
.role.jij{ background:var(--olive-deep); color:#fff; }
.role.partner{ background:transparent; color:var(--ink-soft); box-shadow:inset 0 0 0 1.5px var(--ink-soft); }
.roles{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.roles .to{ width:14px; height:14px; color:var(--muted); }

.tag{
  position:absolute; z-index:3; left:12px; top:12px; margin:0;
  display:inline-block; height:24px; padding:0 10px; border-radius:999px;
  font:600 10.5px/24px var(--body); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.tag-dark{ background:rgba(23,20,15,.55); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.tag-sm{ height:21px; padding:0 8px; font-size:9.5px; line-height:21px; left:10px; top:10px; }
.fnode .tag-sm{ font-size:11px; }

.ico{ position:relative; flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; }
.ico svg{ width:19px; height:19px; }
.ico.sm{ width:30px; height:30px; border-radius:9px; }
.ico.sm svg{ width:15px; height:15px; }
.ico-olive{ background:var(--olive-deep); color:#fff; }
.ico-ink{ background:var(--ink); color:var(--paper); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  background:rgba(250,245,234,.84); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent; transition:border-color .3s, background-color .3s;
}
.nav.scrolled{ border-bottom-color:var(--line); background:rgba(254,251,246,.9); }
.nav-in{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo{ font:800 15px/1 var(--body); letter-spacing:.34em; text-transform:uppercase; text-decoration:none; margin-right:-.34em; }
.nav-links{ display:none; }
.nav-right{ display:flex; align-items:center; gap:8px; }
.lang{ display:flex; padding:3px; border-radius:999px; background:var(--sand-2); }
.lang button{
  appearance:none; border:0; background:transparent; cursor:pointer; color:var(--muted);
  font:600 12.5px/1 var(--body); letter-spacing:.04em; height:38px; min-width:44px; padding:0 10px; border-radius:999px;
}
.lang button.on{ background:var(--paper); color:var(--ink); box-shadow:0 1px 2px rgba(23,20,15,.12); }
.nav-lang{ display:none; }
.burger{
  appearance:none; border:0; cursor:pointer; width:44px; height:44px; margin-right:-6px; border-radius:12px;
  background:transparent; display:grid; place-content:center; gap:6px;
}
.burger span{ display:block; width:20px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }
@media (max-width:359px){ .nav-cta{ padding:0 14px; font-size:13.5px; } .logo{ font-size:14px; letter-spacing:.28em; } }
@media (min-width:640px){ .nav-lang{ display:flex; } .lang button{ height:36px; } }
@media (min-width:1100px){
  .nav-links{ display:flex; gap:2px; }
  .nav-links a{ text-decoration:none; font:500 14.5px/1 var(--body); color:var(--ink-soft); padding:10px 12px; border-radius:999px; transition:background-color .2s; }
  .nav-links a:hover{ background:rgba(23,20,15,.05); }
  .burger{ display:none; }
  .nav-right{ gap:12px; }
}

/* Mobiel menu */
.menu{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:49; background:var(--paper);
  display:flex; flex-direction:column; justify-content:space-between; padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.menu[hidden]{ display:none; }
.menu.open{ animation:menuIn .35s var(--ease); }
@keyframes menuIn{ from{ transform:translateY(-10px); } }
.menu-links a{
  display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px;
  padding:12px 4px; border-bottom:1px solid var(--line); text-decoration:none;
  font:700 24px/1.1 var(--display); letter-spacing:-.02em;
}
.menu-links svg{ flex:none; width:18px; height:18px; color:var(--muted); }
.menu-foot{ display:grid; gap:10px; padding-top:20px; }
.menu-links:focus{ outline:none; }
.menu-proof{ display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:10px; border-radius:16px; background:var(--sand); box-shadow:0 0 0 1px var(--line); text-decoration:none; }
.mp-star{ display:flex; align-items:center; gap:6px; }
.mp-star svg{ width:20px; height:20px; color:var(--terra); }
.mp-star b{ font:800 26px/1 var(--display); letter-spacing:-.03em; }
.mp-t{ display:grid; gap:3px; }
.mp-t b{ font:700 14px/1.2 var(--body); }
.mp-t small{ font:500 12px/1.2 var(--body); color:var(--muted); }
.menu-lang{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; font:600 13px/1 var(--body); color:var(--muted); letter-spacing:.04em; }
.lang-lg button{ height:44px; padding:0 16px; font-size:14px; }
.menu-line{ text-align:center; margin-top:6px; font:600 15px/1.4 var(--display); }
html.menu-open{ overflow:hidden; }
@media (min-width:1100px){ .menu{ display:none !important; } }

/* ---------- 1. Hero ---------- */
.hero{ padding:calc(var(--nav-h) + 8px) 0 40px; }
.hero-grid{ display:grid; gap:24px; grid-template-areas:"media" "copy" "meta"; }
.hero-media{ grid-area:media; position:relative; }
.hero-copy{ grid-area:copy; }
.hero-meta{ grid-area:meta; }
.teller{ grid-area:teller; display:none; }
.hero h1{
  font-weight:800; font-size:clamp(35px, 9.4vw, 66px); line-height:1.03; letter-spacing:-.04em;
  margin-bottom:16px; text-wrap:balance;
}
.lead{ font-size:17px; line-height:1.55; color:var(--ink-soft); max-width:34em; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.hero-cta .btn{ flex:1 1 auto; }
.split{ margin-top:18px; font:700 16px/1.6 var(--display); letter-spacing:-.01em; color:var(--ink); }

.hero-photo{ position:relative; margin:0; height:clamp(260px, 38svh, 420px); border-radius:22px; overflow:hidden; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:46% 60%; }
.hero-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,20,15,.18) 0%, rgba(23,20,15,0) 30%, rgba(23,20,15,0) 70%, rgba(23,20,15,.3)); pointer-events:none; }
.hero-photo .tag{ left:auto; right:12px; top:auto; bottom:12px; }

.note{
  position:absolute; z-index:4; top:12px; left:12px; right:12px;
  display:flex; align-items:center; gap:10px; padding:9px 12px 9px 9px; border-radius:16px;
  background:rgba(254,251,246,.9); -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:var(--lift);
}
.note .ico{ width:32px; height:32px; border-radius:10px; }
.note .ico svg{ width:16px; height:16px; }
.note-t{ min-width:0; flex:1; display:grid; gap:2px; }
.note-t b{ font:700 12.5px/1.2 var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-t span{ font:500 11px/1.2 var(--body); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note em.time{ font-style:normal; font:500 11px/1 var(--body); color:var(--muted); align-self:flex-start; margin-top:3px; }

.kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.kpis > div{ padding:14px 8px 14px 0; min-width:0; }
.kpis > div + div{ padding-left:12px; border-left:1px solid var(--line); }
.kpis dt{ font:500 12px/1.3 var(--body); color:var(--muted); letter-spacing:.02em; margin-bottom:6px; }
.kpis dd{ margin:0; font:800 17px/1.15 var(--display); letter-spacing:-.02em; }
.kpis dd small, .kpis dd.sm{ display:block; font:500 11.5px/1.3 var(--body); color:var(--muted); letter-spacing:0; margin-top:3px; }
.fine{ margin-top:12px; font-size:12px; line-height:1.5; color:var(--muted); }

/* De teller in de hero (desktop). Op mobiel neemt de dock deze rol over. */
.teller{
  position:relative; z-index:5; width:340px; padding:18px 18px 16px; border-radius:22px;
  background:rgba(254,251,246,.94); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 0 0 1px rgba(23,20,15,.05), 0 30px 60px -24px rgba(23,20,15,.45), 0 6px 16px rgba(23,20,15,.08);
}
.t-top{ display:flex; justify-content:space-between; align-items:center; }
.t-chip{ font:700 10.5px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; padding:6px 9px; border-radius:999px; background:var(--sage); color:var(--olive-deep); }
.t-proj{ font:600 12px/1 var(--body); color:var(--muted); }
.t-title{ margin:14px 0 14px; font:800 19px/1.2 var(--display); letter-spacing:-.02em; }
.t-bars{ position:relative; display:grid; grid-template-columns:repeat(12,1fr); gap:5px; height:84px; align-items:end; margin-top:30px; }
.t-bar{ display:block; height:calc(var(--h) * 100%); border-radius:5px 5px 2px 2px; background:var(--olive-2); transform-origin:bottom; appearance:none; border:0; padding:0; margin:0; cursor:pointer; transition:background .2s; }
.t-bar.s-hoog{ background:var(--olive); }
.t-bar.s-laag{ background:#E1E5CF; }
.t-bar:hover, .t-bar:focus-visible, .t-bar.sel{ background:var(--olive-deep); }
.t-bar:focus-visible{ outline:2px solid var(--olive-deep); outline-offset:2px; }
.t-lbls{ display:grid; grid-template-columns:repeat(12,1fr); gap:5px; margin-top:6px; font:500 9.5px/1 var(--body); color:var(--muted); text-align:center; }
.t-tip{ position:absolute; left:var(--x,0); top:0; transform:translate(-50%, calc(-100% - 6px)); z-index:2; display:grid; justify-items:center; gap:1px; padding:5px 8px; border-radius:8px; background:var(--ink); color:var(--paper); white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .2s, left .3s var(--ease), top .3s var(--ease); }
.t-tip.show{ opacity:1; }
.t-tip b{ font:800 13px/1 var(--display); color:var(--olive-3); }
.t-tip small{ font:500 9.5px/1.2 var(--body); color:rgba(254,251,246,.72); }
.flow-notes{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; }
.flow-notes li{ padding:10px 12px; border-radius:12px; background:var(--paper); box-shadow:0 0 0 1px var(--line); font:500 13px/1.45 var(--body); color:var(--muted); }
.flow-notes b{ color:var(--ink); font-weight:700; }
@media (max-width:759px){ .flow-notes li:first-child{ display:none; } }
@media (min-width:900px){ .flow-notes{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:18px; } }
.t-axis span:first-child{ grid-column:1; }
.t-axis .t-axis span:last-child{ grid-column:12; justify-self:end; }
.t-foot{ display:grid; grid-template-columns:1fr auto; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.t-foot b{ display:block; font:800 26px/1 var(--display); letter-spacing:-.03em; }
.t-foot div + div b{ text-align:right; }
.t-foot small{ display:block; margin-top:5px; font:500 11.5px/1.3 var(--body); color:var(--muted); }
.t-foot div + div small{ text-align:right; }
.t-note{ margin-top:10px; font-size:11px; line-height:1.45; color:var(--muted); }

@media (min-width:600px){
  .hero-photo{ height:clamp(380px, 52svh, 520px); }
  .note{ left:auto; width:300px; top:18px; right:18px; }
}
@media (min-width:1024px){
  .hero{ padding:calc(var(--nav-h) + 28px) 0 56px; }
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:64px; row-gap:0;
    grid-template-areas:"copy media" "meta media";
  }
  .hero-copy{ align-self:end; padding-bottom:28px; }
  .hero-meta{ align-self:start; }
  .hero-cta .btn{ flex:0 0 auto; }
  .hero-media{ height:clamp(580px, calc(100svh - var(--nav-h) - 84px), 740px); }
  .hero-photo{ position:absolute; inset:0; height:auto; border-radius:28px; }
  .hero-photo img{ object-position:50% 58%; }
  .teller{ display:block; grid-area:media; align-self:end; justify-self:start; margin:0 0 28px -44px; }
  .note{ width:312px; top:24px; right:24px; padding:12px 14px 12px 12px; border-radius:18px; }
  .note .ico{ width:38px; height:38px; border-radius:12px; }
  .note .ico svg{ width:19px; height:19px; }
  .note-t b{ font-size:14px; }
  .note-t span{ font-size:12px; }
  .lead{ font-size:18.5px; }
  .kpis dd{ font-size:22px; }
  .kpis dt{ font-size:12px; }
}

/* ---------- Secties ---------- */
.sec{ padding:64px 0; }
@media (min-width:1024px){ .sec{ padding:104px 0; } }
.sec-head{ margin-bottom:32px; max-width:780px; }
.sec h2{ font-weight:800; font-size:clamp(31px, 4.4vw, 58px); line-height:1.04; letter-spacing:-.035em; text-wrap:balance; }
.sec-sub{ margin-top:14px; font-size:17px; line-height:1.55; color:var(--muted); max-width:36em; }
.sec-sub, .lead, .faq-a p{ text-wrap:pretty; } /* geen weduwe zoals "is." onder de FAQ-kop; browsers zonder steun negeren het */
@media (min-width:1024px){ .sec-head{ margin-bottom:56px; } .sec-sub{ font-size:18.5px; } }
/* Telefoon: 52 px boven en onder per sectie en 26 px onder de kop. Twaalf secties lang scheelt dat ruim 350 px. */
@media (max-width:759px){ .sec{ padding:52px 0; } .sec-head{ margin-bottom:26px; } }

/* ---------- 2. Product: de geldstroom ---------- */
.product{ background:var(--paper); }
.flow{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.fnode{ position:relative; background:var(--sand); border-radius:20px; box-shadow:0 0 0 1px var(--line); }
.fnode .tile{ position:relative; border-radius:14px; overflow:hidden; background:var(--sand-2); }
.fnode .k{ display:flex; align-items:center; gap:10px; font:600 11px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.kn{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 1px var(--line); font:700 11px/1 var(--body); letter-spacing:0; color:var(--ink); }
.fnode h3{ font-weight:800; font-size:20px; line-height:1.15; letter-spacing:-.025em; }
.fnode > p:not(.k){ font-size:14px; line-height:1.45; color:var(--muted); }

/* Mobiel: compacte rijen, de hele geldstroom past in een scherm */
.fnode{
  display:grid; grid-template-columns:120px minmax(0,1fr); grid-template-rows:auto auto 1fr auto;
  column-gap:14px; row-gap:4px; padding:8px 12px 8px 8px; align-items:start;
}
.fnode .tile{ grid-column:1; grid-row:1 / span 4; height:100%; min-height:112px; }
.fnode .k{ grid-column:2; margin-top:6px; }
.fnode h3{ grid-column:2; }
.fnode > p:not(.k){ grid-column:2; }
.fnode .roles{ grid-column:2; margin:4px 0 4px; }
.fnode > p:not(.k){ display:none; }
.fnode + .fnode::before{
  content:""; position:absolute; left:68px; top:-12px; width:2px; height:12px; margin-left:-1px;
  background-image:linear-gradient(180deg, var(--olive-deep) 55%, transparent 55%); background-size:2px 6px;
  animation:dashY .7s linear infinite;
}
@keyframes dashY{ to{ background-position:0 6px; } }
@keyframes dashX{ to{ background-position:8px 0; } }

.tile-img img{ width:100%; height:100%; object-fit:cover; }
.tile-tx{ display:grid; place-items:center; padding:8px; background:linear-gradient(160deg, var(--sand-2), var(--sand-3)); }
.tx{ width:100%; max-width:250px; background:var(--paper); border-radius:12px; padding:9px 8px 9px; box-shadow:var(--shadow); }
.tx-top{ display:flex; justify-content:space-between; gap:6px; font:500 11px/1.2 var(--body); color:var(--muted); }
.tx-top small{ font-size:inherit; }
.tx-to{ color:var(--ink-soft); display:none; }
.tx strong{ display:block; font:800 15px/1.1 var(--display); letter-spacing:-.03em; margin:6px 0 8px; white-space:nowrap; }
.tx strong small{ display:block; font:500 11px/1 var(--body); color:var(--muted); letter-spacing:0; margin-bottom:3px; }
.tx-bar{ display:block; height:5px; border-radius:5px; background:var(--sand-2); overflow:hidden; }
.tx-bar i{ display:block; height:100%; width:100%; border-radius:5px; background:linear-gradient(90deg, var(--ink-soft), var(--ink)); }
.tx-plus{ display:block; margin-top:7px; font:500 9.5px/1.25 var(--body); color:var(--muted); white-space:nowrap; letter-spacing:-.01em; }
.tile-pf{ display:flex; align-items:center; padding:8px; background:var(--sand-2); }
.pfs{ display:flex; flex-wrap:wrap; gap:4px; min-width:0; width:100%; }
.pf{ font:600 11px/1 var(--body); padding:6px 7px; border-radius:999px; background:var(--paper); color:var(--ink-soft); box-shadow:0 0 0 1px var(--line); white-space:nowrap; }
.pf:nth-child(n+4){ display:none; }
.pf.pf-goal{ display:inline-block; background:transparent; color:var(--olive-deep); box-shadow:none; border:1.5px dashed var(--olive-deep); }
@media (max-width:599px){ .pf:nth-child(3){ display:none; } .pf.pf-goal{ white-space:normal; text-align:center; line-height:1.2; } }
.fnode.pay{ background:var(--olive-deep); box-shadow:none; color:#fff; }
.fnode.pay .k{ color:rgba(255,255,255,.78); }
.fnode.pay .kn{ background:rgba(255,255,255,.14); box-shadow:none; color:#fff; }
.fnode.pay > p:not(.k){ color:rgba(255,255,255,.85); }
.fnode.pay .role.jij{ background:var(--paper); color:var(--olive-deep); }
.tile-pay{ background:rgba(255,255,255,.1); display:grid; place-items:center; padding:10px 8px; }
.mini-note{
  position:relative; z-index:2; width:100%; max-width:260px; display:flex; align-items:center; gap:10px;
  background:var(--paper); color:var(--ink); border-radius:14px; padding:10px 12px 10px 10px; box-shadow:0 14px 30px -12px rgba(0,0,0,.35);
}
.mini-note div{ flex:1; min-width:0; display:grid; gap:2px; }
.mini-note b{ font:700 13px/1.2 var(--body); }
.mini-note small{ font:500 11px/1.25 var(--body); color:var(--muted); }
.mini-note em{ white-space:nowrap; font-style:normal; font:800 15px/1 var(--display); color:var(--olive-deep); }
.tile-pay .ghost1, .tile-pay .ghost2{ position:absolute; height:44px; box-shadow:none; padding:0; }
.tile-pay .ghost1{ width:calc(100% - 28px); background:rgba(254,251,246,.5); transform:translateY(-14px); z-index:1; }
.tile-pay .ghost2{ width:calc(100% - 44px); background:rgba(254,251,246,.22); transform:translateY(-26px); z-index:0; }
.tile-pay .mini-note{ flex-direction:column; align-items:flex-start; gap:6px; padding:9px 8px; }
.tile-pay .mini-note .ico{ display:none; }
.tile-pay .mini-note b{ font-size:11.5px; }
.tile-pay .mini-note small{ font-size:11px; }
.tile-pay .mini-note em{ font-size:16px; }

@media (min-width:600px){
  .fnode{ grid-template-columns:150px minmax(0,1fr); padding:10px 16px 10px 10px; }
  .fnode > p:not(.k){ display:block; }
  .tx-to{ display:inline; }
  .tx strong{ font-size:19px; }
  .pf:nth-child(n+4){ display:inline-block; }
  .fnode + .fnode::before{ left:85px; }
}
@media (min-width:900px){
  .flow{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px; }
  .fnode{ display:flex; flex-direction:column; padding:10px 10px 20px; border-radius:22px; }
  .fnode .tile{ height:156px; min-height:0; }
  .fnode .k{ margin:18px 8px 6px; }
  .fnode h3{ margin:0 8px 6px; font-size:23px; }
  .fnode > p:not(.k){ margin:0 8px 16px; font-size:14.5px; }
  .fnode .roles{ margin:auto 8px 0; padding-top:2px; }
  .fnode + .fnode::before{
    left:-40px; top:86px; width:40px; height:2px; margin:0;
    background-image:linear-gradient(90deg, var(--olive-deep) 55%, transparent 55%); background-size:8px 2px;
    animation-name:dashX;
  }
  .fnode + .fnode::after{
    content:""; position:absolute; left:-14px; top:82px; width:8px; height:8px;
    border-right:2px solid var(--olive-deep); border-bottom:2px solid var(--olive-deep); transform:rotate(-45deg);
  }
  .tile-tx{ padding:16px; }
  .tx{ padding:12px 14px 13px; border-radius:14px; }
  .tx-top{ font-size:11px; }
  .tx strong{ font-size:24px; margin:8px 0 10px; }
  .tx strong small{ display:inline; font-size:12px; margin-right:3px; }
  .tile-pf{ padding:16px; }
  .pfs{ gap:6px; }
  .pf{ font-size:12px; padding:8px 10px; }
  .tile-pay{ padding:16px; }
  .tile-pay .mini-note{ flex-direction:row; align-items:center; gap:10px; padding:10px 12px 10px 10px; }
  .tile-pay .mini-note .ico{ display:grid; }
  .tile-pay .mini-note b{ font-size:13px; }
  .tile-pay .mini-note small{ font-size:11px; }
  .tile-pay .ghost1, .tile-pay .ghost2{ height:52px; }
  .tile-pay .ghost1{ width:calc(100% - 52px); max-width:232px; transform:translateY(-18px); }
  .tile-pay .ghost2{ width:calc(100% - 72px); max-width:214px; transform:translateY(-34px); }
}

/* De rekensom */
.calc{ display:grid; gap:14px; margin-top:16px; }
.sum{ position:relative; overflow:hidden; border-radius:22px; padding:20px 18px 18px; background:var(--ink); color:var(--paper); }
.sum::after{ content:""; position:absolute; right:-120px; bottom:-140px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(156,164,124,.32), rgba(156,164,124,0) 68%); pointer-events:none; }
.sum-k{ font:600 11px/1.45 var(--body); letter-spacing:.12em; text-transform:uppercase; color:rgba(254,251,246,.66); }
/* Drie losse feiten onder elkaar, elk met zijn bron. Geen pijl: het ene volgt niet uit het andere. */
.sum-rows{ position:relative; z-index:1; margin:14px 0 18px; display:grid; }
.big{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; column-gap:14px; padding:12px 0; border-top:1px solid rgba(254,251,246,.12); min-width:0; }
.big:first-child{ border-top:0; }
.big dt, .big dd{ margin:0; min-width:0; }
.big .num{ font:800 clamp(34px, 9vw, 50px)/.95 var(--display); letter-spacing:-.05em; white-space:nowrap; }
.big dd{ display:grid; gap:3px; }
.big dd b{ font:600 13.5px/1.3 var(--body); color:var(--paper); }
.big dd small{ font:500 12px/1.3 var(--body); color:rgba(254,251,246,.68); }
.big.olive .num{ color:var(--olive-3); }
.formula{
  position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font:500 13px/1.3 var(--body); color:rgba(254,251,246,.75);
  padding-top:14px; border-top:1px solid rgba(254,251,246,.14);
}
.formula span{ color:var(--paper); background:rgba(254,251,246,.08); border-radius:6px; padding:4px 8px; }
.formula i{ font-style:normal; color:rgba(254,251,246,.7); }
.formula b{ color:var(--ink); background:var(--olive-3); border-radius:6px; padding:4px 8px; font-weight:700; }
.formula b i{ color:var(--ink-soft); }

.year{ margin:0; border-radius:22px; padding:20px 18px 18px; background:var(--sand); box-shadow:0 0 0 1px var(--line); }
.year-h{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin:0 0 20px; }
.year h3{ font-weight:800; font-size:18px; line-height:1.2; letter-spacing:-.02em; }
.year-h p{ font-size:13px; color:var(--muted); margin-top:4px; }
.year-pill{ flex:none; font:700 12px/1 var(--body); padding:8px 10px; border-radius:999px; background:var(--sage); color:var(--olive-deep); }
@media (max-width:759px){ .year-pill{ display:none; } }
.bars{
  --H:120px; position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)) auto; gap:4px; align-items:end;
  height:var(--H); border-bottom:1.5px solid var(--ink); margin:40px 0 26px;
}
.bar{ position:relative; height:calc(var(--h) * (var(--H) - 26px)); border-radius:5px 5px 1px 1px; background:var(--olive-2); transform-origin:bottom;
  appearance:none; border:0; padding:0; margin:0; cursor:pointer; font:inherit; color:inherit; transition:background .25s var(--ease), opacity .25s var(--ease); }
.bar.s-hoog{ background:var(--olive); }
.bar.s-laag{ background:#E1E5CF; }
.bar:hover, .bar:focus-visible, .bar.sel{ background:var(--olive-deep); }
.seasons{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:6px 0 12px; font:500 12px/1.4 var(--body); color:var(--muted); }
.seasons > span{ display:inline-flex; align-items:center; gap:6px; }
.sw{ display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--olive-2); }
.sw.hoog{ background:var(--olive); }
.sw.laag{ background:#E1E5CF; }
.bar:focus-visible{ outline:2px solid var(--olive-deep); outline-offset:3px; }
.bars.hot .bar:not(:hover):not(.sel){ opacity:.72; }
.bar-tip{
  position:absolute; left:var(--x, 0); top:0; transform:translate(-50%, calc(-100% - 10px)); z-index:2;
  display:grid; justify-items:center; gap:2px; padding:7px 10px; border-radius:10px;
  background:var(--ink); color:var(--paper); box-shadow:var(--shadow); white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .25s var(--ease), left .35s var(--ease), top .35s var(--ease);
}
.bar-tip.show{ opacity:1; }
.bar-tip::after{ content:""; position:absolute; left:var(--ax, 50%); top:100%; width:10px; height:10px; background:var(--ink); transform:translate(-50%, -55%) rotate(45deg); border-radius:2px; }
.bar-tip b{ font:800 15px/1 var(--display); letter-spacing:-.02em; color:var(--olive-3); }
.bar-tip small{ font:500 10.5px/1.2 var(--body); color:rgba(254,251,246,.72); }
.year-split{ margin:4px 0 14px; padding:14px 16px 12px; border-radius:14px; background:var(--paper); box-shadow:0 0 0 1px var(--line); }
.ys-h{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.ys-h b{ font:800 14px/1.2 var(--display); letter-spacing:-.01em; }
.ys-toggle{ display:inline-flex; padding:3px; border-radius:999px; background:var(--sand-2); }
.ys-toggle button{ appearance:none; border:0; margin:0; padding:6px 11px; white-space:nowrap; border-radius:999px; background:transparent; font:600 12px/1 var(--body); color:var(--muted); cursor:pointer; transition:background .2s, color .2s; }
.ys-toggle button.on{ background:var(--ink); color:var(--paper); }
.ys-toggle button:focus-visible{ outline:2px solid var(--olive-deep); outline-offset:2px; }
@media (max-width:759px){
  .ys-h{ flex-direction:column; align-items:stretch; gap:10px; margin-bottom:10px; }
  .ys-toggle{ display:flex; }
  .ys-toggle button{ flex:1; min-height:38px; padding:0 12px; font-size:13px; }
}
.year-split dl{ margin:0; display:grid; }
.year-split dl > div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:7px 0; border-top:1px solid var(--line); }
.year-split dt{ font:500 13px/1.3 var(--body); color:var(--muted); }
.year-split dd{ margin:0; font:700 14px/1 var(--body); font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; }
.year-split .ys-net{ border-top:1.5px solid var(--ink); margin-top:2px; padding-top:10px; }
.year-split .ys-net dt{ color:var(--ink); font-weight:700; }
.year-split .ys-net dd{ font:800 18px/1 var(--display); letter-spacing:-.02em; color:var(--olive-deep); }
.bar > span{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px; font:500 11px/1 var(--body); color:var(--muted); white-space:nowrap; }
/* Smal: alleen elke derde maand zichtbaar, de rest visueel verborgen maar wel leesbaar voor hulptechnologie */
.bar:not(.lbl) > span{ width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.bars-total{ align-self:start; display:grid; justify-items:end; padding-left:8px; margin-left:4px; border-left:1px dashed var(--line); height:100%; align-content:start; }
.bars-total b{ font:800 15px/1 var(--display); letter-spacing:-.03em; color:var(--olive-deep); white-space:nowrap; }
@media (max-width:759px){ .bars-total{ display:none; } .bars{ grid-template-columns:repeat(12,minmax(0,1fr)); } }
.bars-total small{ font:500 11px/1.2 var(--body); color:var(--muted); margin-top:4px; }
.year-note{ font-size:13px; line-height:1.5; color:var(--muted); }

.source{ margin-top:20px; font-size:13px; line-height:1.55; color:var(--muted); max-width:62em; }
.source a{ color:var(--ink-soft); text-underline-offset:2px; }

@media (min-width:900px){
  .calc{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; margin-top:24px; }
  .big .num{ font-size:clamp(40px, 3.9vw, 56px); }
  .sum{ padding:32px 32px 28px; display:flex; flex-direction:column; }
  .sum-rows{ flex:1; align-content:space-evenly; margin:12px 0 16px; }
  .big{ padding:16px 0; column-gap:20px; }
  .big dd b{ font-size:14.5px; }
  .big dd small{ font-size:12.5px; }
  .formula{ font-size:14px; gap:8px; }
  .year{ padding:28px 30px 26px; }
  .bars{ --H:168px; gap:8px; }
  .bar:not(.lbl) > span{ width:auto; height:auto; overflow:visible; clip-path:none; }
  .bars-total{ padding-left:14px; }
  .bars-total b{ font-size:21px; }
  .year-split{ padding:16px 20px 14px; }
  .year-split dt{ font-size:14px; }
  .year-split dd{ font-size:15px; }
  .year-split .ys-net dd{ font-size:22px; }
}

/* ---------- 3. Van A tot Z ---------- */
.atoz{ background:var(--sand); }
.atoz-head{ max-width:none; display:grid; gap:20px; align-items:end; }
.legend{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; }
.legend li{ display:flex; align-items:center; gap:8px; font:500 13.5px/1 var(--body); color:var(--ink-soft); }
@media (max-width:759px){
  .legend{ display:grid; grid-template-columns:auto 1fr; gap:10px 8px; align-items:center; }
  .legend li{ display:contents; }
  .legend .role{ justify-self:start; }
}
@media (min-width:1024px){
  .atoz-head{ grid-template-columns:minmax(0,1fr) auto; }
  .legend{ flex-direction:column; gap:10px; padding:16px 18px; border-radius:16px; background:var(--paper); box-shadow:0 0 0 1px var(--line); }
}

.rail{ position:relative; display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.rail::before{ content:""; flex:1; height:3px; border-radius:3px; background:var(--sand-3); }
.rail i{ position:absolute; left:0; top:50%; margin-top:-1.5px; height:3px; width:calc(100% - 76px); border-radius:3px; background:var(--olive-deep); transform-origin:left center; transform:scaleX(var(--p, .1)); transition:transform .15s linear; }
.rail-n{ flex:none; width:64px; text-align:right; font:500 12.5px/1 var(--body); color:var(--muted); }
.rail-n b{ color:var(--ink); font-weight:700; }

.steps-vp{ margin:0 -16px; }
.steps{
  list-style:none; margin:0; padding:0 16px 22px; display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:16px;
  scrollbar-width:none;
}
.steps::-webkit-scrollbar{ display:none; }
.steps:focus-visible{ outline-offset:-2px; }
.step{ scroll-snap-align:start; display:flex; flex-direction:column; min-width:0; transition:opacity .5s var(--ease); cursor:pointer; }
.step-head{ display:flex; align-items:center; margin-bottom:14px; }
.step-head::after{ content:""; flex:1; height:2px; margin-left:10px; margin-right:-14px; background:linear-gradient(90deg, var(--olive-deep), var(--olive-2)); border-radius:2px; }
.step:last-child .step-head::after{ background:linear-gradient(90deg, var(--olive-2), transparent); }
.step-dot{
  flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font:700 12px/1 var(--body); background:var(--ink); color:var(--paper);
  box-shadow:0 0 0 4px var(--sand); transition:transform .4s var(--ease), background-color .4s, color .4s;
}
.step-dot{ cursor:pointer; }
.step-dot:focus-visible{ outline:2px solid var(--olive-deep); outline-offset:3px; }
.step-dot.jij{ background:var(--olive-deep); color:#fff; }
.step-dot.partner{ background:var(--sand); color:var(--ink-soft); box-shadow:0 0 0 4px var(--sand), inset 0 0 0 2px var(--ink-soft); }
.step-media{ position:relative; margin:0; aspect-ratio:4/3; border-radius:16px; overflow:hidden; }
.step-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.step:hover .step-media img{ transform:scale(1.04); }
.step h3{ margin:16px 0 6px; font-weight:800; font-size:20px; line-height:1.2; letter-spacing:-.02em; }
.step > p{ flex:1; margin:0 0 14px; font-size:14.5px; line-height:1.48; color:var(--muted); }

.step-media.ui{ display:grid; place-items:center; padding:16px; background:linear-gradient(160deg, var(--paper), var(--sand-2)); box-shadow:0 0 0 1px var(--line) inset; }
.ui-card{ width:100%; max-width:220px; background:var(--paper); border-radius:14px; padding:14px; box-shadow:var(--shadow); }
.ui-row{ display:flex; align-items:center; gap:10px; }
.ui-ic{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--sand-2); color:var(--ink-soft); }
.ui-ic svg{ width:18px; height:18px; }
.ui-row div{ display:grid; gap:2px; }
.ui-row b{ font:700 13.5px/1.2 var(--body); }
.ui-row small{ font:500 11.5px/1.2 var(--body); color:var(--muted); }
.ui-status{ display:flex; align-items:center; gap:6px; margin-top:12px; padding:8px 10px; border-radius:10px; background:var(--sage); color:var(--olive-deep); font:700 12.5px/1 var(--body); }
.ui-status svg{ width:14px; height:14px; }
.ui-sub{ margin-top:8px; font:500 11px/1 var(--body); color:var(--muted); padding-left:2px; }
.ui-check{ list-style:none; margin:0; padding:8px 14px; width:100%; max-width:220px; background:var(--paper); border-radius:14px; box-shadow:var(--shadow); }
.ui-check li{ display:flex; align-items:center; gap:10px; padding:9px 0; font:600 13.5px/1.2 var(--body); }
.ui-check li + li{ border-top:1px solid var(--line); }
.ui-check svg{ flex:none; width:22px; height:22px; padding:4px; border-radius:50%; background:var(--olive-deep); color:#fff; }
.ui-cap{ font:600 11px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.ui-cap-dark{ position:absolute; left:14px; bottom:12px; color:var(--muted); letter-spacing:.1em; font-size:10px; }

/* stap 3: mini-kaart */
.ui-map{ padding:0; place-items:stretch; }
.mini-map{ width:100%; height:100%; }
.mm-land{ fill:var(--paper); }
.mm-coast{ fill:none; stroke:#D3C8B1; stroke-width:2.5; }
.mm-grow{ fill:none; stroke:var(--olive-deep); stroke-width:4; stroke-linecap:round; stroke-dasharray:1 9; }
.mm-head{ fill:none; stroke:var(--olive-deep); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.mm-dot.old{ fill:#CFC3AC; stroke:var(--paper); stroke-width:3; }
.mm-dot.new{ fill:var(--olive-deep); stroke:var(--paper); stroke-width:3; }
.mm-t{ font:700 19px var(--body); fill:var(--olive-deep); }
.mm-t.old{ fill:var(--muted); font-weight:500; }
.ui-map{ background:#E4E8D6; }

/* stap 7: social content op een echte foto (er speelt niets af, dus geen afspeelknop) */
.social::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,20,15,0) 50%, rgba(23,20,15,.62)); pointer-events:none; }
.soc{ position:absolute; z-index:2; left:12px; right:12px; bottom:11px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#fff; }
.soc-l{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.soc-l > span{ display:grid; gap:5px; flex:1; }
.soc-l > span i{ display:block; height:4px; border-radius:4px; background:rgba(255,255,255,.9); width:70%; }
.soc-l > span i + i{ width:45%; background:rgba(255,255,255,.55); }
.post-av{ flex:none; display:block; width:22px; height:22px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 2px rgba(255,255,255,.45); }
.soc-i{ display:flex; gap:9px; }
.soc-n{ position:absolute; left:10px; right:10px; top:40px; display:block; padding:7px 9px; border-radius:9px; background:rgba(23,20,15,.74); color:#fff; font:500 10.5px/1.35 var(--body); backdrop-filter:blur(3px); }
.soc-n b{ font-weight:800; }
.soc-n small{ display:block; margin-top:2px; font-size:9.5px; opacity:.72; }
@media (max-width:759px){ .soc-n{ display:none; } }
.soc-i svg{ width:17px; height:17px; }
@media (max-width:759px){
  .atoz .tag-sm{ font-size:11px; }
  .ui-cap-dark{ font-size:11px; }
}

/* stap 9: Airbnb-listing (Steven, 9 oktober 2026). Schaalt mee met het vlak: foto vult, gegevens onderin. */
.step-media.ui-airbnb{ padding:0; display:block; background:#fff; box-shadow:0 0 0 1px var(--line) inset; }
.abc{ display:flex; flex-direction:column; width:100%; height:100%; color:#222; text-decoration:none; font-family:var(--body); }
.abc-img{ position:relative; display:block; flex:1; min-height:0; overflow:hidden; background:#ddd; }
.step-media.ui-airbnb .abc-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.abc-brand{ position:absolute; top:8px; left:8px; display:inline-flex; align-items:center; gap:4px; padding:4px 8px 4px 6px; border-radius:999px; background:#fff; font:700 10.5px/1 var(--body); color:#222; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.abc-brand svg{ width:13px; height:13px; color:#FF385C; }
.abc-heart{ position:absolute; top:7px; right:8px; width:22px; height:22px; }
.abc-dots{ position:absolute; left:0; right:0; bottom:7px; display:flex; justify-content:center; gap:4px; }
.abc-dots i{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.6); }
.abc-dots i.on{ background:#fff; }
.abc-info{ display:grid; gap:1px; padding:7px 10px 8px; background:#fff; }
.abc-row{ display:flex; justify-content:space-between; gap:8px; min-width:0; font:600 12px/1.3 var(--body); color:#222; }
.abc-row b{ font-weight:600; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.abc-rate{ display:inline-flex; align-items:center; gap:3px; font-weight:500; white-space:nowrap; }
.abc-rate svg{ width:11px; height:11px; }
.abc-n{ color:#717171; }
.abc-sub{ font:400 11.5px/1.3 var(--body); color:#717171; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.step-media.ui-pay{ background:var(--olive-deep); box-shadow:none; padding:18px; }
.ui-pay-in{ width:100%; display:grid; gap:10px; justify-items:center; }
.ui-pay-in .mini-note{ max-width:100%; }

.swipe-hint{ display:flex; align-items:center; gap:8px; margin-top:0; font:500 13px/1 var(--body); color:var(--muted); }
.swipe-hint svg{ width:14px; height:14px; }
@media (max-width:759px){ .atoz .sec-cta .btn{ width:100%; } }

@media (min-width:640px){ .steps{ grid-auto-columns:46%; } }
@media (min-width:768px){ .steps-vp{ margin:0 -32px; } .steps{ padding-inline:32px; scroll-padding-inline:32px; } }
@media (min-width:1024px){
  .swipe-hint{ display:none; }
  .rail{ display:none; }
  .steps-vp{ margin:0; }
  .steps{ margin:0; padding:0; overflow:visible; grid-auto-flow:row; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-columns:auto; row-gap:48px; column-gap:20px; }
  .step-head::after{ margin-right:-20px; }
  .step:nth-child(5n) .step-head::after{ margin-right:0; background:linear-gradient(90deg, var(--olive-2), transparent); }
}

/* Desktop met JS: de tijdlijn wordt een horizontale stepper die meeloopt met het scrollen */
.atoz.pin{ padding:0; }
.atoz.pin .atoz-stage{
  position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h)); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-start; padding-top:clamp(20px, 4vh, 48px);
}
.atoz.pin .sec-head{ margin-bottom:28px; }
.atoz.pin .sec h2, .atoz.pin h2{ font-size:clamp(36px, 3.6vw, 52px); }
.atoz.pin .rail{ display:flex; margin-bottom:22px; }
.atoz.pin .steps-vp{ width:max-content; transform:translate3d(var(--x, 0px),0,0); will-change:transform; }
.atoz.pin .steps{ display:flex; flex-wrap:nowrap; gap:22px; width:max-content; overflow:visible; }
.atoz.pin .step{ width:300px; flex:none; }
.atoz.pin .step .step-head::after{ margin-right:-22px; }
.atoz.pin .step:nth-child(5n) .step-head::after{ margin-right:-22px; background:linear-gradient(90deg, var(--olive-deep), var(--olive-2)); }
.atoz.pin .step:last-child .step-head::after{ background:linear-gradient(90deg, var(--olive-2), transparent); margin-right:0; }
.atoz.pin .step-media{ aspect-ratio:16/11; }
.atoz.pin .step:not(.on){ opacity:.42; }
.atoz.pin .step:not(.on) .step-dot{ transform:scale(.86); }
.atoz.pin .step.now .step-dot{ transform:scale(1.12); }

/* ---------- 4. Gasten ---------- */
.guests{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.guests .accent{ color:var(--olive-3); }
.guests .sec-sub{ color:rgba(254,251,246,.72); }
.guests .role.partner{ color:var(--paper); box-shadow:inset 0 0 0 1.5px rgba(254,251,246,.6); }
.model{ display:grid; gap:16px; }
.m-src{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:16px; align-items:stretch; padding:12px; border-radius:22px; background:var(--ink-2); box-shadow:0 0 0 1px rgba(254,251,246,.08) inset; }
.reel-frame{ position:relative; width:100%; align-self:center; aspect-ratio:9/16; border-radius:14px; overflow:hidden; }
.reel-frame img{ width:100%; height:100%; object-fit:cover; object-position:30% 50%; }
.reel-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,20,15,.35), rgba(23,20,15,0) 22%, rgba(23,20,15,0) 62%, rgba(23,20,15,.55)); }
.reel-top{ position:absolute; z-index:2; left:8px; right:8px; top:8px; display:flex; align-items:center; gap:6px; }
.reel-name{ display:block; width:42%; height:5px; border-radius:5px; background:rgba(255,255,255,.85); }
.reel-ui{ position:absolute; z-index:2; inset:auto 8px 10px 8px; display:flex; align-items:flex-end; gap:8px; }
.reel-lines{ flex:1; display:grid; gap:5px; padding-bottom:2px; }
.reel-lines i{ display:block; height:4px; border-radius:4px; background:rgba(254,251,246,.85); }
.reel-lines i + i{ width:62%; background:rgba(254,251,246,.5); }
.reel-rail{ display:grid; gap:9px; justify-items:center; color:#fff; }
.reel-rail span{ display:grid; justify-items:center; gap:2px; font:700 9.5px/1 var(--body); text-shadow:0 1px 2px rgba(0,0,0,.45); }
.reel-rail svg{ width:17px; height:17px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.reel-views{ position:absolute; z-index:2; left:8px; top:68px; padding:4px 8px; border-radius:999px; background:rgba(23,20,15,.62); color:#fff; font:600 9.5px/1 var(--body); backdrop-filter:blur(3px); }
.reel-views b{ font-weight:800; }
.reel-src{ grid-column:1; grid-row:2; align-self:start; margin:8px 2px 0; font:500 10.5px/1.35 var(--body); color:rgba(254,251,246,.55); }
@media (max-width:759px){
  .reel-views{ font-size:11px; }
  .reel-rail span{ font-size:10.5px; }
  .reel-src{ font-size:11.5px; color:rgba(254,251,246,.65); }
  .guests .tag-sm{ font-size:11px; }
}
.m-src{ grid-template-rows:auto auto; }
.m-src-t{ grid-column:2; grid-row:1 / span 2; }
.reel-frame{ grid-column:1; grid-row:1; }
.ch-ic svg{ width:16px; height:16px; }
.reel-tag{ bottom:auto; left:8px; top:40px; }
.m-src-t{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.m-k{ font:600 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(254,251,246,.58); margin-bottom:8px; }
.m-k.dark{ color:var(--muted); }
.model h3{ font-weight:800; font-size:21px; line-height:1.15; letter-spacing:-.02em; }
.m-p{ margin-top:6px; font-size:14px; line-height:1.45; color:rgba(254,251,246,.72); }
.ch-list{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:6px; }
.ch-list li{ display:flex; align-items:center; gap:10px; font:600 13px/1.2 var(--body); color:rgba(254,251,246,.9); padding:7px 8px; border-radius:10px; background:rgba(254,251,246,.06); }
.ch-ic{ flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; background:rgba(254,251,246,.12); font:800 9.5px/1 var(--body); letter-spacing:.02em; color:var(--paper); }
.ch-ic svg{ width:14px; height:14px; }
.m-fan{ display:none; }
.m-lanes{ display:grid; gap:12px; position:relative; }
.lane{ border-radius:22px; padding:20px; display:flex; flex-direction:column; }
.lane > p:not(.m-k){ margin-top:8px; font-size:15px; line-height:1.45; color:rgba(254,251,246,.78); }
.lane-a{ background:linear-gradient(150deg, rgba(156,164,124,.28), rgba(156,164,124,.1)); box-shadow:0 0 0 1px rgba(156,164,124,.55) inset; }
.lane-a .m-k{ color:var(--olive-3); display:flex; align-items:center; gap:8px; }
.lane-soon{ font:600 9.5px/1 var(--body); letter-spacing:.1em; padding:4px 7px; border-radius:999px; border:1px dashed rgba(201,209,166,.7); color:var(--olive-3); }
@media (max-width:759px){ .lane-soon{ display:none; } }
.lane-badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:14px; font:700 12.5px/1 var(--body); padding:8px 12px; border-radius:999px; background:var(--olive); color:var(--ink); }
.lane-badge svg{ width:14px; height:14px; }
@media (max-width:759px){ .lane-badge{ line-height:1.3; } }
.lane-b{ background:rgba(254,251,246,.04); box-shadow:0 0 0 1px rgba(254,251,246,.12) inset; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.chips span{ font:600 12px/1 var(--body); padding:8px 10px; border-radius:999px; background:rgba(254,251,246,.08); color:rgba(254,251,246,.88); box-shadow:0 0 0 1px rgba(254,251,246,.1) inset; }
.m-lanes::before{
  content:""; position:absolute; left:50%; top:-16px; height:16px; width:2px; margin-left:-1px;
  background-image:linear-gradient(180deg, var(--olive) 55%, transparent 55%); background-size:2px 8px; animation:dashY .7s linear infinite;
}
.merge{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:16px; padding:14px 16px; border-radius:16px;
  background:var(--olive-deep); color:#fff; font:600 14px/1.3 var(--body);
}
.merge-k{ font:700 10.5px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,.14); }
.merge-arr{ width:28px; height:14px; color:rgba(255,255,255,.7); }
.merge b{ font:800 16px/1.2 var(--display); letter-spacing:-.01em; }
.merge-out{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
@media (max-width:759px){ .merge-k{ font-size:11px; } }
.model-note{ margin-top:18px; font-size:13px; line-height:1.55; color:rgba(254,251,246,.62); max-width:56em; }
@media (min-width:900px){
  .model{ grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr); gap:0; align-items:stretch; }
  .m-src{ grid-template-columns:200px minmax(0,1fr); gap:24px; padding:14px 24px 14px 14px; }
  .m-src h3{ font-size:26px; }
  .m-fan{ display:block; width:100%; height:100%; overflow:visible; }
  .m-fan path{ fill:none; stroke-width:2; }
  .fan-a{ stroke:var(--olive); stroke-dasharray:6 6; animation:fanDash 1s linear infinite; }
  .fan-b{ stroke:rgba(254,251,246,.32); stroke-dasharray:6 6; }
  .m-lanes{ grid-template-rows:1fr 1fr; gap:16px; }
  .m-lanes::before{ display:none; }
  .lane{ padding:24px 28px; justify-content:center; }
  .lane-a h3, .lane-b h3{ font-size:26px; }
  .merge{ margin-top:20px; padding:16px 22px; font-size:15px; }
  .merge b{ font-size:19px; }
}
@keyframes fanDash{ to{ stroke-dashoffset:-12; } }

/* ---------- 8. Elk project een merk ---------- */
.projects{ background:var(--paper); }
.brands{ display:grid; gap:18px; }
.brand{ display:grid; gap:14px; padding:10px; border-radius:26px; background:var(--sand); box-shadow:0 0 0 1px var(--line); }
.brand-media{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.bm-main{ position:relative; grid-column:1 / -1; display:block; aspect-ratio:16/10; border-radius:18px; overflow:hidden; }
.bm-main img, .bm-main video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.bm-main:hover img, .bm-main:hover video{ transform:scale(1.04); }
.bm-main:focus-visible{ outline-offset:-3px; }
.bm-small{ position:relative; margin:0; aspect-ratio:16/10; border-radius:14px; overflow:hidden; }
.bm-small img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.brand-media-one .bm-main{ aspect-ratio:16/11; }
.b-maison .bm-main img{ object-position:44% 60%; }
.b-reload .bm-main img{ object-position:72% 50%; }
.brand-body{ padding:8px 10px 12px; display:flex; flex-direction:column; align-items:flex-start; }
.brand-mini{ display:grid; gap:12px; }
.bmini{ display:block; border-radius:22px; background:var(--sand); box-shadow:0 0 0 1px var(--line); padding:8px; color:var(--ink); text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.bmini:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px var(--line), 0 18px 40px -18px rgba(23,20,15,.35); }
.bmini-img{ position:relative; display:block; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:var(--ph); }
.bmini-img img, .bmini-img video{ width:100%; height:100%; object-fit:cover; display:block; }
.bmini-img .tag{ position:absolute; top:10px; left:10px; }
.bmini-body{ display:block; padding:16px 10px 12px; }
.bmini .brand-loc{ display:block; margin-bottom:8px; }
.bmini .brand-name{ display:block; font-size:30px; line-height:1; }
.bmini.b-reload .brand-name{ font-size:22px; }
/* volgend project als verrassing (Steven, 9 oktober 2026), in de stijl van de teaser op invest */
.bmini.b-teaser{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:420px; padding:28px 22px; background:#171512; color:#fff; text-align:center; box-shadow:none; }
.bmini.b-teaser:hover{ box-shadow:0 18px 40px -18px rgba(23,20,15,.45); }
.b-teaser .tz-bg{ position:absolute; inset:0; background-size:cover; background-position:30% 50%; transform:scale(1.06); }
.b-teaser .tz-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,21,18,.18), rgba(23,21,18,.66)); }
.b-teaser .tz-c{ position:relative; z-index:1; display:grid; justify-items:center; gap:12px; max-width:300px; }
@media (max-width:759px){
  .bmini.b-teaser{ min-height:320px; }
}
.tz-tag{ font:700 11px/1.3 var(--body); letter-spacing:.16em; text-transform:uppercase; color:#f0c9a8; }
.tz-t{ font:800 24px/1.2 var(--display); letter-spacing:-.01em; color:#fff; }
.tz-price{ margin-top:2px; padding:8px 14px; border-radius:999px; background:rgba(254,251,246,.14); border:1px solid rgba(254,251,246,.4); font:700 14px/1.2 var(--body); color:#fff; }
.tz-note{ font:400 13.5px/1.45 var(--body); color:rgba(254,251,246,.88); }
.tz-go{ display:inline-flex; align-items:center; gap:8px; margin-top:2px; font:600 14px/1 var(--body); color:#f0c9a8; }
.tz-go .arr{ width:14px; height:14px; }
.bmini-line{ display:block; margin-top:8px; font:400 15px/1.5 var(--body); color:var(--ink-soft); }
/* logo van The Maison (de luipaard uit het merk) naast de naam */
.bmini-head{ display:flex; align-items:center; gap:12px; }
.bmini-mark{ width:60px; height:auto; flex:none; }
/* opleverlabel van MOKA */
.bmini-status{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:6px 11px; border-radius:999px; background:var(--sage); box-shadow:0 0 0 1px rgba(91,105,74,.25); font:700 12px/1 var(--body); color:var(--olive-deep); }
.bmini-status i{ width:7px; height:7px; border-radius:50%; background:var(--olive-deep); }
/* unitmix van MOKA (Steven, 9 oktober 2026) */
.bmini-mix{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.bmini-mix span{ padding:5px 10px; border-radius:999px; background:var(--paper); box-shadow:0 0 0 1px var(--line); font:700 12px/1 var(--body); letter-spacing:.02em; color:var(--ink); }
.bmini-go{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font:600 14px/1 var(--body); color:var(--ink); }
.bmini-go .arr{ width:14px; height:14px; }
@media (max-width:759px){
  .bmini-go{ display:flex; justify-content:center; min-height:46px; margin-top:16px; border-radius:999px; box-shadow:inset 0 0 0 1.5px rgba(23,20,15,.2); }
  .tz-go{ min-height:46px; padding:0 20px; border-radius:999px; box-shadow:inset 0 0 0 1.5px rgba(254,251,246,.45); margin-top:4px; }
}
.sec-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin:36px 0 0; }
/* De knop onder de tien stappen staat buiten .wrap (in .atoz-stage) en kreeg dus geen kantlijn: dezelfde maten als .wrap. */
.atoz-stage > .sec-cta{ width:100%; max-width:1312px; margin-inline:auto; padding-inline:16px; }
@media (min-width:768px){ .atoz-stage > .sec-cta{ padding-inline:32px; } }
@media (min-width:1200px){ .atoz-stage > .sec-cta{ padding-inline:48px; } }
.sec-cta .btn{ margin-top:0; }
.sec-cta-note{ font:500 14px/1.4 var(--body); color:var(--muted); }
/* Telefoon: de knop "Investeer mee" in de vaste nav staat altijd in beeld. Eén volle knop na de projecten en na het bewijs is genoeg;
   de vier andere herhalingen en de zes keer dezelfde bijschriftregel gaan op de telefoon weg (het bijschrift blijft één keer, bij de projecten). */
@media (max-width:759px){
  .sec-cta{ margin-top:28px; }
  .sec-cta .btn{ width:100%; }
  .sec-cta-note{ display:none; }
  .projects .sec-cta-note{ display:block; width:100%; text-align:center; font-size:13px; }
  .atoz .sec-cta, .smart .sec-cta, .compact .sec-cta, .sure .sec-cta{ display:none; }
}
.sec-cta-big{ margin-top:28px; padding:22px 24px; border-radius:20px; background:var(--sage); box-shadow:0 0 0 1px var(--line); gap:14px 22px; }
.sec-cta-txt{ display:grid; gap:4px; flex:1 1 320px; min-width:0; }
.sec-cta-txt b{ font:800 18px/1.25 var(--display); letter-spacing:-.01em; color:var(--ink); }
.sec-cta-txt span{ font:400 14.5px/1.5 var(--body); color:var(--ink-soft); }
.sec-cta-link{ flex-basis:100%; font:600 13.5px/1.4 var(--body); color:var(--olive-deep); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:759px){
  .projects .sec-cta .btn{ width:100%; }
}
@media (max-width:759px){
  .sec-cta-big{ padding:20px 18px; }
  .sec-cta-big .btn{ width:100%; white-space:normal; text-align:center; line-height:1.25; padding:12px 18px; }
  .sec-cta-big .btn > span{ text-wrap:balance; }
}
@media (min-width:760px){ .brand-mini{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } }
/* eerder uitverkocht: bewijs onder de merkkaarten (Steven, 9 oktober 2026) */
.sold-row{ margin-top:26px; }
.sold-head{ display:flex; align-items:center; gap:12px; margin:0 0 12px; font:700 11.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.sold-head::after{ content:""; flex:1; height:1px; background:var(--line); }
.sold-mini{ display:grid; gap:12px; }
@media (min-width:760px){ .sold-mini{ grid-template-columns:1fr 1fr; gap:18px; } }
.smini{ display:flex; gap:14px; align-items:center; padding:8px; border-radius:20px; background:var(--sand); box-shadow:0 0 0 1px var(--line); color:var(--ink); text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
a.smini:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px var(--line), 0 14px 32px -16px rgba(23,20,15,.3); }
.smini-img{ position:relative; flex:0 0 42%; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--ph); display:grid; place-items:center; }
.smini-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.smini-img::after{ content:""; position:absolute; inset:0; background:rgba(23,20,15,.28); }
.smini-img .tag{ position:absolute; top:8px; left:8px; z-index:2; }
.smini-stamp{ position:relative; z-index:2; transform:rotate(-3deg); padding:6px 12px; border-radius:999px; background:var(--paper); color:var(--ink); font:800 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; box-shadow:0 6px 16px rgba(23,20,15,.22); }
.smini-body{ display:grid; gap:4px; min-width:0; padding:4px 4px 4px 0; }
.smini-body .brand-loc{ margin-bottom:2px; }
.smini-name{ font:800 20px/1.1 var(--display); letter-spacing:-.01em; }
.smini-st{ font:500 13.5px/1.35 var(--body); color:var(--ink-soft); }
.smini-ab{ display:inline-flex; align-items:center; gap:5px; margin-top:4px; font:500 13.5px/1 var(--body); color:var(--ink); }
.smini-ab .ab-logo{ width:18px; height:18px; color:#FF385C; margin-right:3px; }
.smini-ab .ab-star{ width:13px; height:13px; }
.smini-rev{ color:var(--muted); }
.smini-video{ width:100%; border:0; font:inherit; text-align:left; cursor:pointer; }
.smini-video:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px var(--line), 0 14px 32px -16px rgba(23,20,15,.3); }
.smini-play{ position:absolute; right:8px; bottom:8px; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(254,251,246,.95); color:var(--ink); display:grid; place-items:center; box-shadow:0 6px 16px rgba(23,20,15,.25); }
.smini-play svg{ width:16px; height:16px; margin-left:2px; }
.smini-status{ margin-top:4px; justify-self:start; }
.smini-go{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; font:600 13.5px/1 var(--body); color:var(--ink); }
.smini-go svg{ width:13px; height:13px; }
@media (max-width:759px){
  .smini{ gap:12px; }
  .smini-img{ flex-basis:40%; aspect-ratio:1/1; }
  .smini-status{ padding:0; background:none; box-shadow:none; font-size:11.5px; }
}
/* videolaag */
.vmodal{ position:fixed; inset:0; z-index:2147482000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(23,20,15,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vmodal[hidden]{ display:none; }
.vmodal-box{ position:relative; width:min(960px,100%); border-radius:18px; overflow:hidden; background:#000; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.vmodal-box video{ display:block; width:100%; aspect-ratio:16/9; background:#000; }
.vmodal-x{ position:absolute; top:10px; right:10px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; background:rgba(254,251,246,.92); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; }
.vmodal-tag{ position:absolute; top:12px; left:12px; z-index:2; pointer-events:none; }
.brand-loc{ font:600 11.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.brand-name{ font-size:44px; line-height:1; letter-spacing:-.02em; }
.b-maison .brand-name{ font-family:'Fraunces', Georgia, serif; font-weight:400; font-variation-settings:"opsz" 144, "SOFT" 0; }
.b-moka .brand-name{ font-family:'Fraunces', Georgia, serif; font-weight:600; font-variation-settings:"opsz" 144, "SOFT" 100; letter-spacing:.02em; }
.b-reload .brand-name{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:32px; }
.brand-story{ margin-top:12px; font-size:16px; line-height:1.5; color:var(--ink-soft); max-width:30em; }
/* Tekstregels met een punt, geen klikbare pillen: de eigen site en Instagram per project krijgen later een echte link */
.brand-facts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.brand-facts span{ font:600 12.5px/1 var(--body); padding:9px 12px; border-radius:999px; background:var(--sage); color:var(--olive-deep); }
.brand-facts .fact-dev{ background:var(--sand-2); color:var(--ink-soft); }
.brand-body .btn{ margin-top:20px; }
@media (min-width:1024px){
  .brands{ gap:24px; }
  .brand{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px; padding:14px; align-items:center; }
  .brand:nth-child(even) .brand-media{ order:2; }
  .brand-media{ gap:10px; }
  .bm-main{ border-radius:20px; }
  .brand-body{ padding:24px 28px 24px 8px; }
  .brand:nth-child(even) .brand-body{ padding:24px 8px 24px 28px; }
  .brand-name{ font-size:64px; }
  .b-reload .brand-name{ font-size:40px; }
  .brand-story{ font-size:17px; }
}

/* ---------- 6. Slim gekozen ---------- */
.smart{ background:var(--sand); }
.smart-grid{ display:grid; gap:14px; }
.map-card{ margin:0; border-radius:22px; overflow:hidden; background:var(--paper); box-shadow:0 0 0 1px var(--line); }
/* Google Maps met plekken (Steven, 8 oktober 2026: interactiever, pins van hotspots, de echte kaart). */
.map-ui{ display:grid; }
.map-list{ list-style:none; margin:0; padding:12px 12px 4px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.map-list::-webkit-scrollbar{ display:none; }
.map-list .mp-k{ display:none; }
.mp{ appearance:none; border:0; margin:0; cursor:pointer; text-align:left; font:inherit; color:var(--ink); background:var(--sand); border-radius:12px; padding:9px 12px; white-space:nowrap; box-shadow:0 0 0 1px var(--line); transition:background .2s, color .2s; }
.mp b{ display:block; font:700 13px/1.2 var(--display); letter-spacing:-.01em; }
.mp small{ display:block; margin-top:2px; font:500 11px/1.2 var(--body); color:var(--muted); }
.mp.on{ background:var(--ink); color:var(--paper); box-shadow:none; }
.mp.on small{ color:rgba(254,251,246,.7); }
.mp:focus-visible{ outline:2px solid var(--olive-deep); outline-offset:2px; }
@media (max-width:759px){
  .map-list{ padding:12px 40px 6px 12px; scroll-snap-type:x proximity; scroll-padding-inline:12px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); }
  .mp{ scroll-snap-align:start; }
  .mp small{ font-size:0; line-height:0; }
  .mp small > span:first-child{ display:block; font-size:11px; line-height:1.2; }
  .mp small > span + span{ display:none; }
}
.map-frame{ position:relative; aspect-ratio:4/3; background:#ECEEE2; }
.gmap{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@media (hover:none) and (pointer:coarse){ .gmap{ pointer-events:none; } }
.map-open{ position:absolute; right:10px; bottom:10px; padding:7px 11px; border-radius:999px; background:var(--ink); color:var(--paper); font:600 11.5px/1 var(--body); text-decoration:none; box-shadow:var(--shadow); }
@media (max-width:759px){ .map-open{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; font-size:12.5px; } }
@media (min-width:900px){
  .map-ui{ grid-template-columns:230px minmax(0,1fr); }
  .map-list{ flex-direction:column; gap:4px; padding:14px 10px 14px 14px; overflow:visible; border-right:1px solid var(--line); }
  .map-list .mp-k{ display:block; margin:10px 0 4px; font:600 10.5px/1.3 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .map-list .mp-k:first-child{ margin-top:0; }
  .mp{ white-space:normal; width:100%; }
  .map-frame{ aspect-ratio:auto; min-height:480px; }
}
.bali{ width:100%; height:auto; }
.bali .sea{ fill:#ECEEE2; }
.bali .land{ fill:var(--paper); }
.bali .coast{ fill:none; stroke:#D9CFBA; stroke-width:2.5; }
.bali .grow{ fill:none; stroke:url(#growG); stroke-width:10; stroke-linecap:round; opacity:.9; stroke-dasharray:1; stroke-dashoffset:0; }
.bali .grow-head{ fill:none; stroke:var(--olive-deep); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.bali .place circle{ stroke:var(--paper); stroke-width:3; }
.bali .place.old circle{ fill:#CFC3AC; }
.bali .place.new circle{ fill:var(--olive-deep); }
.bali .place.new .pulse{ fill:none; stroke:var(--olive-deep); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; }
.bali .place text{ font:600 15px var(--body); fill:var(--ink-soft); }
.bali .place.old text{ fill:var(--muted); font-weight:500; }
.bali .pin rect{ fill:var(--ink); }
.bali .pin text{ font:700 12px var(--body); fill:var(--paper); text-anchor:middle; letter-spacing:.02em; }
.bali .sea-l{ font:italic 500 14px var(--body); fill:#9DA290; letter-spacing:.06em; }
.bali .compass circle{ fill:var(--paper); stroke:var(--line); stroke-width:1.5; }
.bali .compass path{ fill:var(--ink); }
.bali .compass text{ font:700 10px var(--body); fill:var(--ink); text-anchor:middle; }
.map-card figcaption{ display:grid; gap:6px; padding:16px 18px 18px; border-top:1px solid var(--line); }
@media (max-width:759px){ .map-card figcaption{ display:none; } }
.mc-k{ font:600 10.5px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.mc-t{ font-size:14.5px; line-height:1.45; color:var(--ink-soft); }
.smart-side{ display:grid; gap:14px; }
.auto-card, .compact-card{ border-radius:22px; padding:20px; background:var(--paper); box-shadow:0 0 0 1px var(--line); }
.auto{ list-style:none; margin:4px 0 0; padding:0; display:grid; }
.auto li{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; font-size:14.5px; line-height:1.45; color:var(--ink-soft); }
.auto li + li{ border-top:1px solid var(--line); }
.a-ic{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--sage); color:var(--olive-deep); }
.a-ic svg{ width:18px; height:18px; }
.c-ic{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; }
.c-ic svg{ width:13px; height:13px; }
.c-ic.down{ background:var(--sand-2); color:var(--ink-soft); }
.c-ic.up{ background:var(--olive-deep); color:#fff; }
.c-ic.dot{ background:var(--sand-2); color:var(--olive-deep); }
.c-ic.dot svg{ width:9px; height:9px; }
@media (min-width:1024px){
  .smart-grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:20px; align-items:stretch; }
  .map-card{ display:flex; flex-direction:column; }
  .bali{ flex:1; }
  .map-card figcaption{ grid-template-columns:auto 1fr; align-items:baseline; gap:20px; padding:18px 24px 20px; }
  .auto-card, .compact-card{ padding:24px 26px; }
}
@media (max-width:759px){ .smart .sec-cta{ display:none; } }

/* ---------- 7. Bewijs en mensen ---------- */
.proof{ background:var(--paper); }
.proof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pf-card{ position:relative; margin:0; border-radius:20px; overflow:hidden; }
.pf-card img{ width:100%; height:100%; object-fit:cover; }
.pf-card figcaption{
  position:absolute; left:10px; right:10px; bottom:10px; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
}
.pf-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,20,15,0) 55%, rgba(23,20,15,.55)); pointer-events:none; }
.pf-card figcaption{ z-index:2; }
.pf-name{ font:800 15px/1.1 var(--display); color:#fff; letter-spacing:-.01em; margin-right:4px; }
.pf-st{ font:600 10.5px/1 var(--body); padding:6px 8px; border-radius:999px; background:rgba(254,251,246,.92); color:var(--ink); }
.pf-st.ok{ background:var(--ok); color:#fff; }
/* Telefoon: chips op de brede kaarten naar 11px. In de smalle Calmaan-kaart past de chip net niet altijd op een regel (NL 145,9 px in 145,5 px, EN 152,7 px), dus iets meer ruimte en een nette tweede regel als het toch moet */
@media (max-width:759px){
  .pf-calma .pf-st, .pf-moka .pf-st{ font-size:11px; }
  .pf-calmaan figcaption{ left:8px; right:8px; bottom:8px; }
  .pf-calmaan .pf-st{ padding:5px 7px; line-height:1.3; }
}
.pf-calma{ grid-column:1 / -1; aspect-ratio:3/2; }
.pf-calmaan{ aspect-ratio:3/4; }
.pf-moka{ grid-column:1 / -1; aspect-ratio:3/2; }
.pf-rating{ display:flex; flex-direction:column; padding:16px; background:var(--sand); box-shadow:0 0 0 1px var(--line) inset; }
.pf-rating::after, .pf-list::after{ display:none; }
.rating{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.rating svg{ width:26px; height:26px; color:var(--terra); }
.rating b{ font:800 46px/1 var(--display); letter-spacing:-.04em; }
.r-sub{ margin-top:6px; font-size:14px; color:var(--ink-soft); }
.r-sub b{ font-weight:700; }
.r-foot{ margin-top:auto; padding-top:12px; display:grid; gap:2px; font-size:13px; color:var(--ink-soft); }
.r-foot b{ font:800 14px/1.2 var(--display); color:var(--ink); }
.r-foot small{ font-size:11px; color:var(--muted); margin-top:4px; }
.pf-list{ grid-column:1 / -1; padding:18px 18px 10px; background:var(--sand); box-shadow:0 0 0 1px var(--line) inset; }
.track{ list-style:none; margin:4px 0 0; padding:0; }
.track li{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; font:600 14px/1.2 var(--body); }
.track li + li{ border-top:1px solid var(--line); }
.track em{ font-style:normal; font:600 11.5px/1 var(--body); padding:6px 9px; border-radius:999px; background:var(--sand-2); color:var(--ink-soft); white-space:nowrap; }
.track em.ok{ background:rgba(46,125,91,.12); color:var(--ok); }
@media (max-width:759px){
  .pf-list{ padding:16px 16px 8px; }
  .track li{ flex-wrap:wrap; }
  .track em{ margin-left:auto; }
}

/* ---------- 11. De mensen ---------- */
.people-sec{ background:var(--sand); }
.site-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:18px; }
.site-ph{ position:relative; margin:0; aspect-ratio:4/3; border-radius:14px; overflow:hidden; }
.site-ph img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease); }
.site-ph:hover img{ transform:scale(1.04); }
/* Telefoon: vier van de acht bouwfoto's (Steven op de bouw, de voorman op de fundering, de opgeleverde villa en MOKA van boven); scheelt twee rijen, geen feit verloren */
@media (max-width:759px){ .site-ph:nth-child(n+3):nth-child(-n+6){ display:none; } }
@media (max-width:759px){ .site-grid .site-ph:nth-child(n+5){ display:none; } }
.site-ph figcaption{ position:absolute; left:8px; bottom:8px; padding:4px 8px; border-radius:999px; background:rgba(23,20,15,.72); color:#fff; font:600 10px/1.2 var(--body); letter-spacing:.06em; text-transform:uppercase; }
/* Telefoon: de pil houdt rechts dezelfde 8 px als links, een lang bijschrift loopt niet meer tot op de tegelrand */
@media (max-width:759px){ .site-ph figcaption{ max-width:calc(100% - 16px); } }
/* Telefoon: geen pil van twee regels op 10px, maar een leesbaar bijschrift op een verloop, zoals de bewijskaarten */
@media (max-width:759px){
  .site-ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,20,15,0) 48%, rgba(23,20,15,.62)); pointer-events:none; }
  .site-ph figcaption{ left:10px; right:10px; bottom:9px; z-index:2; padding:0; border-radius:0; background:none; font:700 11.5px/1.25 var(--body); letter-spacing:.01em; text-transform:none; text-shadow:0 1px 2px rgba(23,20,15,.4); }
}
.team-line{ margin-top:14px; font-size:14px; line-height:1.55; color:var(--muted); max-width:62em; }
.faq-cta{ display:grid; gap:12px; margin-top:12px; }
.faq-cta > div{ display:grid; gap:6px; justify-items:start; }
.faq-cta small{ font:500 12.5px/1.45 var(--body); color:var(--muted); }
.btn-wa{ background:#075E54; color:#fff; display:inline-flex; align-items:center; gap:8px; }
.btn-wa svg{ flex:none; }
@media (min-width:900px){
  .site-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:22px; }
  .faq-cta{ grid-template-columns:1fr 1fr; gap:16px; }
}
.people{ display:grid; gap:12px; }
.person{ display:grid; grid-template-columns:124px minmax(0,1fr); gap:16px; padding:10px; border-radius:22px; background:var(--paper); box-shadow:0 0 0 1px var(--line); align-items:center; }
.person-img{ border-radius:16px; overflow:hidden; aspect-ratio:4/5; }
.person-img img{ width:100%; height:100%; object-fit:cover; }
.person-t{ min-width:0; }
.person-t h3{ font-weight:800; font-size:22px; letter-spacing:-.02em; line-height:1.15; }
.person-t p:not(.m-k){ margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--muted); }
.person-t .m-k{ margin-bottom:6px; }
.person-t .btn{ margin-top:14px; min-height:44px; }
/* Telefoon: de foto vult de hele kaarthoogte, zodat hij niet los in het midden zweeft */
@media (max-width:759px){
  .person{ align-items:stretch; }
  .person-img{ position:relative; aspect-ratio:auto; min-height:150px; }
  .person-img img{ position:absolute; inset:0; }
}
@media (min-width:700px){
  .people{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px){
  .proof-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:300px; gap:16px; }
  .pf-calma{ grid-column:span 6; grid-row:span 1; aspect-ratio:auto; }
  .pf-rating{ grid-column:span 3; padding:22px; }
  .pf-calmaan{ grid-column:span 3; aspect-ratio:auto; }
  .pf-moka{ grid-column:span 8; aspect-ratio:auto; }
  .pf-list{ grid-column:span 4; padding:22px 24px 12px; }
  .pf-card figcaption{ left:16px; right:16px; bottom:16px; }
  .pf-name{ font-size:18px; }
  .rating b{ font-size:60px; }
  .people{ gap:20px; }
  .person{ grid-template-columns:220px minmax(0,1fr); gap:28px; padding:14px; }
  .person-t h3{ font-size:27px; }
  .person-t p:not(.m-k){ font-size:16px; }
}

/* ---------- 6. Compact wint ---------- */
.compact{ background:var(--paper); }
.cmp-grid{ display:grid; gap:14px; }
.cmp-card{ position:relative; margin:0; border-radius:22px; padding:16px; background:var(--sand); box-shadow:0 0 0 1px var(--line); }
@media (max-width:759px){ .cmp-card{ padding:20px; } }
/* inleg als label bovenaan de kaart, over de plattegrond (Steven, 9 oktober 2026) */
.cmp-chips{ position:absolute; top:26px; left:26px; right:26px; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.cmp-price{ display:inline-flex; align-items:baseline; gap:7px; padding:8px 13px 8px 12px; border-radius:999px; background:var(--ink); color:#fff; box-shadow:0 8px 20px rgba(23,20,15,.18); }
.cmp-price-l{ font:700 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; opacity:.78; }
.cmp-price-v{ font:800 15px/1 var(--display); letter-spacing:-.01em; }
@media (max-width:759px){
  .cmp-chips{ position:static; margin:0 0 12px; }
  .cmp-chips .cmp-price{ flex:1 1 0; min-width:max-content; flex-direction:column; align-items:flex-start; gap:5px; padding:10px 13px; border-radius:16px; }
  .plan{ height:160px; }
}
.cmp-card.on .cmp-price{ background:var(--olive-deep); }
/* rendement als tweede label rechtsboven, zodat inleg en rendement naast elkaar staan (Steven, 9 oktober 2026) */
.cmp-roi{ background:var(--paper); color:var(--ink); box-shadow:0 0 0 1px var(--line), 0 8px 20px rgba(23,20,15,.12); }
.cmp-card.on .cmp-roi{ background:var(--paper); color:var(--olive-deep); }
.cmp-roi .cmp-price-l{ opacity:.62; }
.cmp-list li.hl{ font-weight:800; color:var(--ink); }
.cmp-card.on .cmp-list li.hl{ color:var(--olive-deep); }
.cmp-card.on{ background:var(--sage); box-shadow:0 0 0 1.5px var(--olive-deep); }
.plan{ width:100%; height:auto; }
.pl-plot{ fill:var(--paper); stroke:var(--line); stroke-width:1.5; }
.pl-lawn{ fill:#EEF0E2; }
.pl-house{ fill:var(--sand-3); stroke:var(--ink-soft); stroke-width:1.5; }
.pl-roof{ fill:none; stroke:var(--ink-soft); stroke-width:1.5; opacity:.45; }
.pl-pool{ fill:#D5DEDF; stroke:var(--ink-soft); stroke-width:1.5; }
.pl-wave{ fill:none; stroke:#8FA3A6; stroke-width:1.5; stroke-linecap:round; }
.pl-tree circle{ fill:var(--olive-2); }
.pl-staff{ fill:var(--ink-soft); opacity:.7; }
.cmp-card.on .pl-plot{ fill:var(--paper); stroke:var(--olive-2); }
.cmp-card.on .pl-lawn{ fill:#E3E7D2; }
.cmp-card.on .pl-house{ fill:var(--olive-2); stroke:var(--olive-deep); }
.cmp-card.on .pl-roof{ stroke:var(--olive-deep); }
.cmp-card.on .pl-staff{ fill:var(--olive-deep); opacity:1; }
.cmp-card figcaption{ margin-top:12px; }
.cmp-k{ display:block; font:800 18px/1.2 var(--display); letter-spacing:-.02em; margin-bottom:2px; }
.cmp-ex{ font:500 13.5px/1.35 var(--body); color:var(--muted); margin:0 0 8px; }
.cmp-card.on .cmp-k{ color:var(--olive-deep); }
.cmp-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.cmp-list li{ display:flex; align-items:center; gap:10px; padding:6px 0; font:600 14px/1.3 var(--body); color:var(--ink-soft); }
.cmp-ams{ border-radius:22px; padding:20px; background:var(--ink); color:var(--paper); }
.cmp-ams .m-k.dark{ color:rgba(254,251,246,.6); }
.ams-rows{ display:grid; gap:12px; margin-top:8px; }
.ams-row{ display:grid; gap:6px; }
.ams-l{ font:600 13.5px/1.3 var(--body); }
.ams-bar{ display:block; height:12px; border-radius:6px; background:rgba(254,251,246,.1); overflow:hidden; }
.ams-bar i{ display:block; height:100%; width:calc(var(--w) * 100%); border-radius:6px; background:rgba(254,251,246,.45); }
.ams-row:first-child .ams-bar i{ background:var(--olive-3); }
.ams-v{ display:inline-flex; align-items:center; gap:6px; font:700 12px/1 var(--body); }
.ams-v svg{ width:14px; height:14px; }
.ams-v.up{ color:var(--olive-3); }
.ams-v.down{ color:rgba(254,251,246,.6); }
@media (max-width:759px){
  .ams-v{ font-size:12.5px; line-height:1.35; align-items:flex-start; text-wrap:balance; }
  .ams-v svg{ flex:none; margin-top:2px; }
}
.ams-p{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(254,251,246,.14); font-size:14px; line-height:1.45; color:rgba(254,251,246,.82); }
.cmp-photo{ position:relative; margin:0; border-radius:22px; overflow:hidden; aspect-ratio:3/2; }
.cmp-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:759px){ .cmp-photo .tag{ height:24px; padding:0 10px; font-size:10.5px; line-height:24px; } }
@media (min-width:700px){ .cmp-grid{ grid-template-columns:1fr 1fr; } .cmp-ams, .cmp-photo{ grid-column:1 / -1; } .cmp-photo{ aspect-ratio:21/9; } }
@media (min-width:1024px){
  .cmp-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; }
  .cmp-card{ grid-column:span 4; padding:22px; }
  .cmp-ams{ grid-column:span 4; padding:26px; display:flex; flex-direction:column; }
  .cmp-ams .ams-p{ margin-top:auto; padding-top:18px; }
  .cmp-photo{ grid-column:span 12; aspect-ratio:3/1; }
  .ams-rows{ gap:18px; margin-top:14px; }
  .ams-l{ font-size:14.5px; }
  .ams-p{ font-size:15.5px; }
}
@media (max-width:759px){
  .compact .sec-cta{ display:grid; gap:10px; }
  .compact .sec-cta .btn{ width:100%; }
  .compact .sec-cta-note{ text-align:center; }
}

/* ---------- 7. Gezond en in beeld ---------- */
.wellness{ background:var(--sand); }
.well-grid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.well-hero{ position:relative; grid-column:1 / -1; margin:0; aspect-ratio:16/9; border-radius:22px; overflow:hidden; }
.well-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.well-hero .tag{ left:auto; right:12px; top:auto; bottom:12px; }
@media (max-width:759px){
  .well-hero .tag{ max-width:272px; height:auto; min-height:24px; white-space:normal; line-height:1.3; padding:5px 10px; text-align:right; font-size:11px; }
}
.wpin{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); display:flex; align-items:center; gap:8px; z-index:3; }
.wpin i{ display:block; flex:none; width:12px; height:12px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 3px rgba(23,20,15,.4), 0 0 0 7px rgba(254,251,246,.35); }
.wpin b{ font:700 10.5px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; padding:7px 9px; border-radius:999px; background:rgba(23,20,15,.74); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); white-space:nowrap; }
@media (max-width:759px){
  .wpin{ transform:translate(-6px,-50%); gap:6px; }
  .wpin b{ font-size:11px; padding:5px 8px; }
  .well-hero .wpin:nth-of-type(2){ flex-direction:row-reverse; transform:translate(calc(-100% + 6px),-50%); }
}
.well-tile{ position:relative; margin:0; border-radius:18px; overflow:hidden; aspect-ratio:4/5; }
.well-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.well-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,20,15,0) 55%, rgba(23,20,15,.62)); pointer-events:none; }
.well-tile figcaption{ position:absolute; inset:0; z-index:2; }
.wt-cap{ position:absolute; left:12px; right:12px; bottom:12px; font:700 14px/1.25 var(--display); color:#fff; letter-spacing:-.01em; }
@media (max-width:759px){
  .well-tile .tag, .bmini-img .tag, .smini-img .tag{ height:24px; padding:0 10px; font-size:10.5px; line-height:24px; }
}
.well-partners{ grid-column:1 / -1; border-radius:22px; padding:20px; background:var(--paper); box-shadow:0 0 0 1px var(--line); }
/* Naamchips. Het logo-slot (.plogo) staat in de markup en gaat aan zodra de klasse "names" van de lijst gaat. */
.pchips{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pchips li{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:var(--sand); box-shadow:0 0 0 1px var(--line); white-space:nowrap; }
.pchips b{ font:700 13.5px/1.2 var(--display); letter-spacing:-.01em; }
.plogo{ display:block; height:22px; }
.plogo img{ height:100%; width:auto; filter:brightness(0); opacity:.8; }
.pchips.names .plogo{ display:none; }
.wp-p{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--muted); }
@media (max-width:759px){
  .pchips{ display:grid; gap:8px; }
  .pchips li{ padding:9px 14px; white-space:normal; }
  .plogo{ width:92px; display:flex; justify-content:center; }
  .well-partners .m-k{ font-size:11.5px; }
  .wp-p{ display:none; }
}
.well-stats{ display:grid; gap:10px; margin:14px 0 0; }
.well-stats > div{ border-radius:20px; padding:18px 20px; background:var(--paper); box-shadow:0 0 0 1px var(--line); }
.well-stats dt{ font:600 11px/1.4 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.well-stats dd{ margin:8px 0 0; display:grid; gap:6px; }
.well-stats dd .num{ font:800 clamp(32px, 6vw, 46px)/1 var(--display); letter-spacing:-.04em; color:var(--olive-deep); white-space:nowrap; }
.well-stats small{ font:500 12.5px/1.45 var(--body); color:var(--muted); }
@media (min-width:700px){ .well-stats{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:699px){
  .well-stats{ gap:0; border-radius:20px; background:var(--paper); box-shadow:0 0 0 1px var(--line); overflow:hidden; }
  .well-stats > div{ border-radius:0; box-shadow:none; padding:16px 20px; }
  .well-stats > div + div{ border-top:1px solid var(--line); }
  .well-stats dt{ font-size:11.5px; }
  .well-stats dd{ margin-top:6px; gap:4px; }
}
@media (min-width:1024px){
  .well-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:minmax(0,1fr) minmax(0,1fr) auto; gap:16px; }
  .well-hero{ grid-column:span 8; grid-row:span 2; }
  .well-hero .tag{ right:16px; bottom:16px; }
  .wpin b{ font-size:12px; padding:8px 11px; }
  .well-tile{ grid-column:span 4; aspect-ratio:auto; min-height:0; }
  .wt-cap{ left:16px; right:16px; bottom:16px; font-size:16px; }
  .well-partners{ padding:22px 26px; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:32px; align-items:center; }
  .well-partners .m-k{ margin:0; }
  .well-partners .wp-p{ margin:6px 0 0; grid-column:1; }
  .well-partners .pchips{ grid-column:2; grid-row:1 / span 2; margin:0; justify-content:flex-end; }
  .well-stats{ gap:16px; margin-top:16px; }
  .well-stats > div{ padding:24px 26px; }
}

/* ---------- 9. Zekerheid, Nederlands en precies ---------- */
.sure{ background:var(--sand); }
.sure-grid{ display:grid; gap:14px; }
.sure-photo{ position:relative; margin:0; border-radius:22px; overflow:hidden; aspect-ratio:16/10; }
.sure-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.sure-photo .tag{ left:auto; right:12px; top:auto; bottom:12px; }
/* Per punt een vette aanhef en één korte feitzin, meer niet */
.sure-list{ list-style:none; margin:0; padding:4px 0 0; display:grid; }
.sure-list li{ display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.sure-list li:first-child{ border-top:0; padding-top:0; }
.s-ic{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--paper); color:var(--olive-deep); box-shadow:0 0 0 1px var(--line); }
.s-ic svg{ width:19px; height:19px; }
.sure-list div{ font-size:15px; line-height:1.45; color:var(--ink-soft); }
.sure-list b{ color:var(--ink); font-weight:700; }
@media (min-width:1024px){
  .sure-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:44px; align-items:start; }
  .sure-photo{ aspect-ratio:4/5; position:sticky; top:calc(var(--nav-h) + 24px); }
  .sure-list{ padding-top:0; align-self:center; }
  .sure-list li{ padding:15px 0; }
  .sure-list div{ font-size:16px; }
}

/* ---------- 12. FAQ ---------- */
.faq{ background:var(--paper); }
.faq-grid{ display:grid; gap:14px; }
.faq-aside{ order:2; border-radius:20px; padding:20px; background:var(--sand); box-shadow:0 0 0 1px var(--line); }
.faq-aside h3{ font-weight:800; font-size:21px; line-height:1.2; letter-spacing:-.02em; }
.faq-aside p:not(.m-k){ margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--muted); }
.faq-aside .m-k{ margin-bottom:8px; }
.faq-aside .btn{ margin-top:16px; }
/* Telefoon: het label "Niet gevonden?" zegt hetzelfde als de kop eronder; de knop vult de kaart, net als de andere knoppen op de telefoon. */
@media (max-width:759px){ .faq-aside .m-k{ display:none; } .faq-aside .btn{ width:100%; } }
.faq-list{ display:grid; gap:8px; min-width:0; }
.faq-item{ border-radius:16px; background:var(--sand); box-shadow:0 0 0 1px var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; font:700 16px/1.3 var(--display); letter-spacing:-.01em; border-radius:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:focus-visible{ outline:2px solid var(--olive-deep); outline-offset:-2px; }
.faq-x{ position:relative; flex:none; width:28px; height:28px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 1px var(--line); transition:background-color .25s; }
.faq-x::before, .faq-x::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; border-radius:2px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .25s var(--ease), background-color .25s; }
.faq-x::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-x{ background:var(--ink); }
.faq-item[open] .faq-x::before, .faq-item[open] .faq-x::after{ background:var(--paper); }
.faq-item[open] .faq-x::after{ transform:translate(-50%,-50%) rotate(0); }
.faq-a{ padding:0 20px 20px; font-size:15px; line-height:1.55; color:var(--ink-soft); max-width:62em; }
@media (min-width:1024px){
  .faq-grid{ grid-template-columns:minmax(0,1fr) 26em; gap:28px; align-items:start; }
  .faq-aside{ position:sticky; top:calc(var(--nav-h) + 24px); padding:26px 28px; }
  .faq-item summary{ padding:22px 24px; font-size:18px; } .faq-a{ padding:0 24px 24px; font-size:16px; }
}

/* ---------- Afsluiter en footer ---------- */
.cta{ background:var(--ink); color:var(--paper); padding:72px 0 56px; }
.cta-in{ display:grid; gap:36px; }
@media (max-width:759px){ .cta{ padding:56px 0 48px; } .cta-in{ gap:28px; } }
.cta h2{ font-weight:800; font-size:clamp(38px, 5vw, 66px); line-height:1.03; letter-spacing:-.04em; }
.cta .accent{ color:var(--olive-3); }
.cta .eyebrow{ margin-bottom:14px; }
.cta p:not(.eyebrow){ margin-top:16px; font-size:17px; color:rgba(254,251,246,.74); }
.cta-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.cta-btns .btn{ flex:1 1 auto; }
.referral{ display:grid; gap:6px; align-content:start; padding:22px; border-radius:20px; text-decoration:none; background:var(--sand); color:var(--ink); }
.ref-k{ font:600 11.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--terra); }
.ref-amt{ font:800 44px/1 var(--display); letter-spacing:-.04em; color:var(--terra); margin-top:6px; }
.ref-t{ font-size:14.5px; line-height:1.45; color:var(--ink-soft); margin-top:4px; }
.ref-go{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; font:700 14px/1 var(--body); }
.ref-go svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.referral:hover .ref-go svg{ transform:translateX(3px); }
@media (min-width:1024px){
  .cta{ padding:120px 0 80px; }
  .cta-in{ grid-template-columns:minmax(0,1fr) 340px; align-items:end; gap:64px; }
  .cta-btns .btn{ flex:0 0 auto; }
}
.foot{ background:var(--ink); color:rgba(254,251,246,.72); padding:0 0 32px; }
.foot-in{ display:grid; gap:24px; padding-top:32px; border-top:1px solid rgba(254,251,246,.12); }
.logo-light{ color:var(--paper); }
.foot-brand p{ margin-top:12px; font-size:14px; max-width:28em; }
.foot-ig{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font:600 13.5px/1 var(--body); color:var(--paper); text-decoration:none; padding:9px 12px 9px 10px; border-radius:999px; background:rgba(254,251,246,.08); box-shadow:0 0 0 1px rgba(254,251,246,.14) inset; }
.foot-ig svg{ width:16px; height:16px; }
.foot-ig:hover{ background:rgba(254,251,246,.14); }
.foot-links{ display:flex; flex-wrap:wrap; gap:6px 20px; }
.foot-links a{ text-decoration:none; font:500 14px/2.6 var(--body); color:rgba(254,251,246,.86); }
.foot-links a:hover{ color:#fff; }
/* Telefoon: tikdoelen van 44 px, en de Instagram-link weg omdat de chip @stevenbalivillas er al staat; zo past "Privacy" op dezelfde regel. */
@media (max-width:759px){
  .foot-ig{ min-height:44px; }
  .foot-links{ gap:0 22px; }
  .foot-links a{ line-height:3.15; }
  .foot-links a[href*="instagram"]{ display:none; }
}
.foot-fine{ margin-top:24px; font-size:12px; color:rgba(254,251,246,.55); }
@media (min-width:1024px){ .foot-in{ grid-template-columns:1fr auto; align-items:start; } }
body.has-dock .foot{ padding-bottom:calc(40px + env(safe-area-inset-bottom)); } /* de dock verdwijnt zodra de footer in beeld is (main.js, footVisible), dus 104 px was dode ruimte */
@media (min-width:1024px){ body.has-dock .foot{ padding-bottom:32px; } }

/* ---------- De uitbetalingsteller (dock) ---------- */
.dock{
  position:fixed; z-index:45; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 14px 10px 12px; border-radius:18px;
  background:rgba(23,20,15,.94); color:var(--paper); text-decoration:none;
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 0 0 1px rgba(254,251,246,.12) inset, 0 20px 40px -16px rgba(23,20,15,.55), 0 4px 12px rgba(23,20,15,.18);
}
.dock.live{ transition:transform .45s var(--ease), opacity .35s var(--ease); }
.dock.enter:not(.off){ animation:dockIn .55s var(--ease); }
@keyframes dockIn{ from{ transform:translateY(14px); } }
.dock[hidden]{ display:none; }
/* Telefoon en tablet: geen tweede vaste balk onder de vaste nav-knop. Hij bedekte de kop van "Ons model"; de rail "01 / 10" en de jaargrafiek dragen dezelfde informatie. */
@media (max-width:1023px){ .dock{ display:none; } }
.dock.off, .dock.tuck{ transform:translateY(calc(100% + 24px)); opacity:0; pointer-events:none; }
html.menu-open .dock{ transform:translateY(calc(100% + 24px)); opacity:0; }
/* Boven de donkere afsluiter: lichte variant, anders is hij donker op donker */
.dock.paper{ background:rgba(254,251,246,.96); color:var(--ink); box-shadow:0 0 0 1px rgba(23,20,15,.1) inset, 0 20px 40px -16px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.25); }
.dock.paper .d-sub{ color:var(--muted); }
.dock.paper .d-bars i{ background:rgba(23,20,15,.12); }
.dock.paper .d-bars i.f, .dock.paper .d-bars i.new{ background:var(--olive-deep); }
.dock.paper.preview .d-bars i{ background:rgba(91,106,69,.35); }
.dock.paper .d-count{ color:var(--olive-deep); }
.dock.paper .d-prog{ background:rgba(23,20,15,.1); }
.dock.paper .d-prog i{ background:var(--olive-deep); }
.d-bars{ flex:none; display:grid; grid-template-columns:repeat(12,5px); gap:3px; height:32px; align-items:end; }
.d-bars i{ display:block; height:calc(var(--h) * 100%); border-radius:2px; background:rgba(254,251,246,.16); transform-origin:bottom; transition:background-color .35s, transform .35s var(--ease); }
.d-bars i.f{ background:var(--olive-3); }
.d-bars i.new{ background:#E4EAC4; animation:pop .6s var(--ease); }
.dock.preview .d-bars i{ background:rgba(201,209,166,.45); }
@keyframes pop{ 0%{ transform:scaleY(.2); } 60%{ transform:scaleY(1.12); } 100%{ transform:none; } }
.d-txt{ flex:1; min-width:0; display:grid; gap:3px; }
.d-title{ font:700 14px/1.2 var(--display); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d-sub{ font:500 11.5px/1.25 var(--body); color:rgba(254,251,246,.68); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d-prog{ display:none; height:3px; border-radius:3px; background:rgba(254,251,246,.14); overflow:hidden; margin-top:3px; }
.d-prog i{ display:block; height:100%; width:100%; background:var(--olive); transform-origin:left; transform:scaleX(var(--dp, 0)); transition:transform .3s var(--ease); }
.dock.build .d-prog{ display:block; }
.d-count{ flex:none; font:800 15px/1 var(--display); letter-spacing:-.02em; color:var(--olive-3); }
.d-count:empty{ display:none; }
@media (min-width:1024px){
  .dock{ left:auto; right:24px; bottom:24px; width:380px; min-height:76px; padding:14px 18px 14px 16px; border-radius:20px; gap:14px; }
  .d-bars{ grid-template-columns:repeat(12,7px); gap:4px; height:42px; }
  .d-title{ font-size:15.5px; }
  .d-sub{ font-size:12px; }
  .d-count{ font-size:18px; }
}

/* ---------- Beweging (alleen als JS het toestaat) ---------- */
.rv-pre{ opacity:0; transform:translateY(22px); }
.rv-pre.rv-in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv-done{ opacity:1 !important; transform:none !important; }
.bars.rv-pre .bar, .rv-pre .bars .bar{ transform:scaleY(0); }
.rv-in .bars .bar{ transform:none; transition:transform .7s var(--ease) calc(var(--i) * 55ms + .2s), background .25s var(--ease), opacity .25s var(--ease); }
.steps.rv-pre .step{ opacity:0; transform:translateY(16px); }
.steps.rv-pre.rv-in .step{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.steps.rv-in .step:nth-child(2){ transition-delay:.06s; } .steps.rv-in .step:nth-child(3){ transition-delay:.12s; }
.steps.rv-in .step:nth-child(4){ transition-delay:.18s; } .steps.rv-in .step:nth-child(5){ transition-delay:.24s; }
.steps.rv-in .step:nth-child(6){ transition-delay:.30s; } .steps.rv-in .step:nth-child(7){ transition-delay:.36s; }
.steps.rv-in .step:nth-child(8){ transition-delay:.42s; } .steps.rv-in .step:nth-child(9){ transition-delay:.48s; }
.steps.rv-in .step:nth-child(10){ transition-delay:.54s; }
.steps.rv-pre{ opacity:1; transform:none; }
.map-card.rv-pre .grow{ stroke-dashoffset:1; }
.map-card.rv-in .grow{ stroke-dashoffset:0; transition:stroke-dashoffset 1.8s var(--ease) .3s; }
.bali .pulse{ animation:pulse 2.8s ease-out 1.6s infinite; }
@keyframes pulse{ 0%{ opacity:.7; transform:scale(1); } 80%,100%{ opacity:0; transform:scale(2.6); } }

.anim .note{ animation:noteIn .8s var(--ease) both .7s; }
.anim .teller{ animation:phoneIn 1s var(--ease) both .2s; }
.anim .t-bar{ animation:barIn .7s var(--ease) both; animation-delay:calc(.5s + var(--i) * 60ms); }
@keyframes noteIn{ from{ opacity:0; transform:translateY(-10px) scale(.97); } }
@keyframes phoneIn{ from{ opacity:0; transform:translateY(24px); } }
@keyframes barIn{ from{ transform:scaleY(0); } }

/* Telefoon: geen leesbaar label onder 11 px. Hoofdletterchips met letterspatiëring (.role, .tag, .m-k, .cmp-price-l) blijven 10,5 tot 11 px, die lezen groter.
   .pf en .lane-soon staan hier bewust niet in: die lopen nu al uit hun tegel en horen bij de fix van hun eigen sectie. Staat laat in het bestand zodat het wint van de regels per sectie. */
@media (max-width:759px){
  .tx-top, .tx-top small, .tx strong small, .tile-pay .mini-note small, .ui-cap-dark, .soc-n, .soc-n small, .bar > span, .site-ph figcaption, .kn, .reel-src{ font-size:11px; }
  .tag-sm, .reel-views, .reel-rail span{ font-size:10.5px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}