/* Subpage styles - shared across hefbomen / verschil / geheugen */

.sub-hero{
  padding:88px 0 64px;display:grid;grid-template-columns:140px 1fr;gap:48px;align-items:end;
  border-bottom:1px solid var(--rule);
}
.sub-hero-num{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:120px;line-height:.85;
  letter-spacing:-.05em;color:var(--sienna);
}
.sub-hero-num::before{content:'/'}
.sub-hero-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(48px,7vw,108px);line-height:.92;letter-spacing:-.045em;color:var(--ink);
  margin-bottom:18px;text-wrap:balance;
}
.sub-hero-lede{
  grid-column:2/3;max-width:60ch;margin-top:24px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:500;
  font-size:clamp(18px,1.8vw,24px);line-height:1.4;letter-spacing:-.01em;color:var(--ink);
  text-wrap:pretty;
}

/* ─────── HEFBOMEN ─────── */

.formula-block{
  margin-bottom:64px;padding:24px 28px;border:1px solid var(--ink);background:var(--surface);
}
.formula-eyebrow{
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--sienna);font-weight:700;margin-bottom:10px;
}
.formula-row{display:flex;flex-direction:column;gap:18px}
.formula-label{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
  font-size:18px;letter-spacing:-.015em;color:var(--ash);text-transform:uppercase;letter-spacing:.05em;
}
.formula-eq{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(28px,3.6vw,48px);letter-spacing:-.04em;line-height:1;color:var(--ink);
}
.formula-eq .formula-op{color:var(--sienna);font-weight:700}
.formula-eq .formula-out{color:var(--sienna);font-size:clamp(18px,1.6vw,24px);font-weight:600;letter-spacing:-.01em}

.levers-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--ink);
}
.lever-card{
  padding:32px 28px;border-right:1px solid var(--rule);background:var(--ivory);
  display:flex;flex-direction:column;gap:14px;
  transition:background .25s;
}
.lever-card:last-child{border-right:none}
.lever-card:hover{background:var(--cream)}
.lever-num{font-size:11px;letter-spacing:.05em;color:var(--sienna);font-weight:700}
.lever-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:42px;letter-spacing:-.04em;line-height:1}
.lever-sub{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash);font-weight:600;margin-bottom:6px}
.lever-claim{font-family:'Archivo',sans-serif;font-size:15px;line-height:1.55;color:var(--ink);text-wrap:pretty}
.lever-hits{
  list-style:none;padding:0;margin:8px 0 0;border-top:1px solid var(--rule);
}
.lever-hits li{
  padding:10px 0 10px 22px;border-bottom:1px solid var(--rule);position:relative;
  font-family:'Archivo',sans-serif;font-size:13px;line-height:1.4;color:var(--ink);
}
.lever-hits li::before{
  content:'+';position:absolute;left:0;top:10px;color:var(--sienna);font-weight:700;
  font-family:'JetBrains Mono',monospace;
}
.lever-kpi{
  margin-top:auto;padding:12px 14px;background:rgba(196,90,61,.06);border-left:2px solid var(--sienna);
  font-size:12px;line-height:1.45;color:var(--ink);font-family:'Archivo',sans-serif;
}
.lever-kpi .mono{color:var(--sienna);font-weight:700;font-size:10px;letter-spacing:.08em;margin-right:6px}

.meta-lever{
  border:1px solid var(--ink);padding:48px 56px;background:var(--ink);color:var(--ivory);
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.meta-eyebrow{
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--sienna);font-weight:700;
  grid-column:1/-1;margin-bottom:8px;
}
.meta-name{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(48px,6vw,80px);
  letter-spacing:-.045em;line-height:.95;color:var(--ivory);
}
.meta-claim{
  font-family:'Archivo',sans-serif;font-size:17px;line-height:1.55;color:var(--ivory);
  text-wrap:pretty;
}
.meta-link{
  grid-column:1/-1;margin-top:12px;
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--sienna);
  border-bottom:1px solid var(--sienna);padding-bottom:4px;display:inline-block;width:fit-content;
}
.meta-link:hover{color:var(--ivory);border-color:var(--ivory)}

.roi-block{display:flex;flex-direction:column;gap:24px}
.roi-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--sienna);font-weight:700}
.roi-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(36px,5vw,64px);
  letter-spacing:-.04em;line-height:.95;color:var(--ink);text-wrap:balance;
}
.roi-lede{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(18px,1.6vw,22px);
  line-height:1.45;letter-spacing:-.01em;color:var(--ink);max-width:80ch;text-wrap:pretty;
}
.roi-table{
  border:1px solid var(--rule);background:var(--ivory);margin-top:8px;
}
.roi-row{
  display:grid;grid-template-columns:1fr auto 220px;gap:24px;align-items:baseline;
  padding:18px 24px;border-bottom:1px solid var(--rule);
}
.roi-row:last-child{border-bottom:none}
.roi-l{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.015em;color:var(--ink);
}
.roi-v{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:28px;letter-spacing:-.03em;color:var(--ink);
  text-align:right;
}
.roi-t{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ash)}

.roi-out{
  display:grid;grid-template-columns:1fr auto 220px;gap:24px;align-items:baseline;
  padding:24px;background:var(--ink);color:var(--ivory);border-top:none;
}
.roi-out-l{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--sienna);font-weight:700}
.roi-out-v{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:48px;letter-spacing:-.04em;color:var(--sienna);
  text-align:right;line-height:1;
}
.roi-out-t{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ivory);opacity:.8}
.roi-foot{
  margin-top:8px;font-size:12px;color:var(--ash);line-height:1.6;text-transform:none;letter-spacing:.02em;
  max-width:80ch;
}
.roi-foot::first-letter{font-weight:600}

/* ─────── VERSCHIL ─────── */

.mech-grid{
  display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--ink);
}
.mech-row{
  display:grid;grid-template-columns:80px 1fr 2fr;gap:32px;
  padding:36px 32px;border-bottom:1px solid var(--rule);
  background:var(--ivory);transition:background .2s;
  align-items:start;
}
.mech-row:last-child{border-bottom:none}
.mech-row:hover{background:var(--cream)}
.mech-num{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:48px;letter-spacing:-.04em;
  color:var(--sienna);line-height:.9;
}
.mech-num::before{content:'/'}
.mech-head{display:flex;flex-direction:column;gap:8px}
.mech-name{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1;color:var(--ink);
  text-wrap:balance;
}
.mech-tag{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ash);font-weight:600;
}
.mech-body{display:flex;flex-direction:column;gap:14px}
.mech-claim{font-family:'Archivo',sans-serif;font-size:15px;line-height:1.55;color:var(--ink);text-wrap:pretty}
.mech-detail{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;
  border-top:1px solid var(--rule);padding-top:14px;
}
.mech-d-card{
  border:1px solid var(--rule);padding:14px;background:var(--surface);
  display:flex;flex-direction:column;gap:6px;
}
.mech-d-tag{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash);font-weight:600}
.mech-d-val{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.015em;color:var(--ink);
}
.mech-d-val.sienna{color:var(--sienna)}
.mech-d-d{font-size:12px;color:var(--ash);line-height:1.4}

/* Bouwkosten-kompas KRAP/PASSEND/RUIM */
.kompas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--ink);margin-top:14px;
}
.kompas-c{padding:14px 16px;border-right:1px solid var(--rule);background:var(--ivory);text-align:center}
.kompas-c:last-child{border-right:none}
.kompas-c.fit{background:#fbf8f1;border-left:3px solid var(--sienna);border-right:3px solid var(--sienna);padding-left:13px;padding-right:13px;position:relative;z-index:1}
.kompas-c.fit::after{content:'← jullie zit hier';position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--sienna);text-transform:uppercase;letter-spacing:.1em;font-weight:700;white-space:nowrap}
.kompas-l{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--ash);font-weight:700;margin-bottom:4px}
.kompas-c.fit .kompas-l{color:var(--sienna)}
.kompas-v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--ink);line-height:1}
.kompas-c.fit .kompas-v{color:var(--sienna)}
.kompas-d{font-size:10px;color:var(--ash);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}

/* ─────── GEHEUGEN ─────── */

.geheugen-claim{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
  font-size:clamp(28px,3.4vw,44px);line-height:1.15;letter-spacing:-.03em;
  text-wrap:balance;max-width:30ch;margin-bottom:64px;color:var(--ink);
}
.geheugen-claim em{font-style:normal;color:var(--sienna)}

.layers-stack{
  display:flex;flex-direction:column;border-top:1px solid var(--ink);
}
.layer-row{
  display:grid;grid-template-columns:60px 1fr 2fr 200px;gap:32px;
  padding:24px 0;border-bottom:1px solid var(--rule);align-items:center;
}
.layer-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--sienna);font-weight:700;letter-spacing:.05em}
.layer-name{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.02em;line-height:1.1;color:var(--ink);
}
.layer-d{font-family:'Archivo',sans-serif;font-size:14px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.layer-ex{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ash);text-align:right;line-height:1.5;
}
.layer-ex b{color:var(--ink);font-weight:500}

.feed-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border:1px solid var(--ink);margin-top:48px;
}
.feed-card{
  padding:28px 28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--ivory);display:flex;flex-direction:column;gap:10px;
}
.feed-card:nth-child(2n){border-right:none}
.feed-card:nth-last-child(-n+2){border-bottom:none}
.feed-num{font-size:11px;letter-spacing:.05em;color:var(--sienna);font-weight:700}
.feed-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.feed-d{font-family:'Archivo',sans-serif;font-size:14px;line-height:1.5;color:var(--ink);text-wrap:pretty}

.cycle-block{
  margin-top:64px;padding:48px 56px;background:var(--ink);color:var(--ivory);
}
.cycle-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--sienna);font-weight:700;margin-bottom:14px}
.cycle-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,42px);
  letter-spacing:-.03em;line-height:1.1;color:var(--ivory);margin-bottom:24px;text-wrap:balance;
}
.cycle-flow{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;
}
.cycle-step{
  border:1px solid rgba(244,241,234,.4);padding:12px 18px;
  font-family:'Archivo Narrow',sans-serif;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ivory);
}
.cycle-step.hot{border-color:var(--sienna);color:var(--sienna);background:rgba(196,90,61,.1)}
.cycle-arr{color:var(--sienna);font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18px}

/* responsive */
@media (max-width:1100px){
  .sub-hero{grid-template-columns:1fr;gap:24px;padding:60px 0 48px}
  .sub-hero-lede{grid-column:1/-1}
  .sub-hero-num{font-size:80px}
  .levers-grid{grid-template-columns:1fr}
  .lever-card{border-right:none;border-bottom:1px solid var(--rule)}
  .lever-card:last-child{border-bottom:none}
  .meta-lever{grid-template-columns:1fr;padding:32px 28px;gap:24px}
  .roi-row,.roi-out{grid-template-columns:1fr auto}
  .roi-t,.roi-out-t{display:none}
  .mech-row{grid-template-columns:1fr;gap:16px;padding:28px 24px}
  .mech-detail{grid-template-columns:1fr}
  .layer-row{grid-template-columns:40px 1fr;gap:14px}
  .layer-d,.layer-ex{grid-column:2/-1}
  .layer-ex{text-align:left}
  .feed-grid{grid-template-columns:1fr}
  .feed-card{border-right:none}
  .feed-card:nth-last-child(2){border-bottom:1px solid var(--rule)}
  .cycle-block{padding:32px 28px}
}