* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root{
  --ink:#1c1a17; --ink2:#615c52; --ink3:#9a958b;
  --line:rgba(0,0,0,0.11); --line2:rgba(0,0,0,0.06);
  --surface:rgba(255,255,255,0.55);
}
body{ color:var(--ink); font-family:"Public Sans",-apple-system,system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.page{ min-height:100vh; transition:background .25s ease; }
.wrap{ max-width:840px; margin:0 auto; padding:64px 28px 80px; }

/* ---------- typography / header ---------- */
.eyebrow{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:var(--ink3); }
.masthead h1{ font-size:34px; line-height:1.08; font-weight:700; letter-spacing:-.018em; margin:10px 0 18px; }
.lede{ max-width:62ch; }
.lede p{ font-size:16.5px; line-height:1.66; color:var(--ink2); margin:0 0 14px; text-wrap:pretty; }
.lede p b{ color:var(--ink); font-weight:600; }
.lede p a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.lede p.lede-break{ margin-top:54px; padding-top:34px; border-top:1px solid var(--line); }
.data-download{ display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  font-size:13px; font-weight:500; color:var(--ink2); background:var(--surface);
  border:1px solid var(--line); border-radius:7px; padding:7px 12px;
  text-decoration:none; line-height:1; }
.data-download:hover{ background:rgba(0,0,0,0.03); color:var(--ink); }
.freshness{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:22px; padding-top:16px;
  border-top:1px solid var(--line2); font-size:13px; color:var(--ink2); }
.fresh-dot{ width:8px; height:8px; border-radius:50%; background:#4a9d5b; box-shadow:0 0 0 0 rgba(74,157,91,.5);
  animation:pulse 2.4s ease-out infinite; flex:none; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(74,157,91,.45)} 70%{box-shadow:0 0 0 7px rgba(74,157,91,0)} 100%{box-shadow:0 0 0 0 rgba(74,157,91,0)} }
.fresh-sep{ color:var(--ink3); }
.fresh-time{ color:var(--ink3); }
.fresh-link{ margin-left:auto; color:var(--ink2); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--line); }
.fresh-link:hover{ text-decoration-color:var(--ink2); }

/* ---------- sections ---------- */
.section{ margin-top:54px; padding-top:34px; border-top:1px solid var(--line); }
.sec-head h2{ font-size:22px; font-weight:650; letter-spacing:-.012em; margin:6px 0 10px; }
.section .eyebrow + h2, .sec-head .eyebrow{ display:block; }
.sec-intro{ font-size:15.5px; line-height:1.6; color:var(--ink2); max-width:60ch; margin:0; text-wrap:pretty; }

/* ---------- stat cards ---------- */
.statrow{ display:grid; gap:12px; margin-top:24px; }
.statrow-3{ grid-template-columns:repeat(3,1fr); }
.statcard{ background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:16px 18px; }
.statcard-label{ font-size:12px; color:var(--ink3); font-weight:500; }
.statcard-value{ font-weight:700; letter-spacing:-.02em; margin-top:8px; line-height:1; font-variant-numeric:tabular-nums; }
.statcard-unit{ font-size:.5em; font-weight:600; margin-left:2px; color:inherit; }

/* ---------- legend ---------- */
.legend{ display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; font-size:12.5px; color:var(--ink2); }
.legend-item{ display:inline-flex; align-items:center; gap:7px; }
.legend-dot{ width:10px; height:10px; border-radius:3px; }

/* ---------- chart blocks ---------- */
.chartblock{ margin-top:26px; }
.block-cap{ font-size:13px; line-height:1.55; color:var(--ink2); margin-bottom:12px; max-width:64ch; text-wrap:pretty; }
.block-cap b{ color:var(--ink); font-weight:600; }
.chartblock-hero .heatmap{ padding:4px 0; }

/* heatmap */
.hm-htick{ text-align:center; color:var(--ink3); font-variant-numeric:tabular-nums; align-self:end; padding-bottom:2px; }
.hm-dlabel{ color:var(--ink2); font-weight:500; padding-right:8px; align-self:center; text-align:right; }
.hm-wlabel{ font-size:9px; white-space:nowrap; }
.hm-cell{ border-radius:2px; }
.hm-cell:hover{ outline:1.6px solid var(--ink); outline-offset:-1px; cursor:crosshair; }
.heat-tip{ position:fixed; z-index:60; pointer-events:none; background:#211e19; color:#f3efe8;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border-radius:10px; padding:11px 13px 10px; font-size:12.5px; line-height:1.5;
  box-shadow:0 12px 32px -12px rgba(0,0,0,.55); min-width:138px; max-width:260px;
  font-feature-settings:"tnum" 1; }
.heat-tip .tip-head{ font-weight:600; font-size:12px; color:#fff; margin-bottom:8px; letter-spacing:.005em; white-space:nowrap; }
.heat-tip .tip-row{ display:flex; justify-content:space-between; align-items:baseline; gap:26px; padding:2px 0; }
.heat-tip .tip-dot-row{ display:flex; align-items:center; gap:7px; }
.heat-tip .tip-l{ color:#a39c8f; }
.heat-tip .tip-v{ font-weight:600; font-variant-numeric:tabular-nums; color:#f8f5ef; }
.heat-tip .tip-dot{ width:9px; height:9px; border-radius:2px; flex:none; }
.hm-now{ outline:1.6px solid var(--ink); outline-offset:-1px; }
.hm-nowrow{ box-shadow:inset 0 1.4px 0 #1c1a17, inset 0 -1.4px 0 #1c1a17; }
.daycurve{ display:block; }

/* map */
.delft-map{ height:360px; border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.delft-map .leaflet-container{ font:inherit; background:#e8e6e0; }
.map-legend{ display:flex; flex-wrap:wrap; gap:18px; margin-top:12px; font-size:12.5px; color:var(--ink2); }
.map-legend-item{ display:inline-flex; align-items:center; gap:7px; }
.map-dot{ width:10px; height:10px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); }

/* callout */
.callout{ margin-top:16px; background:rgba(0,0,0,0.025); border:1px solid var(--line2); border-radius:9px;
  padding:13px 16px; font-size:14px; line-height:1.55; color:var(--ink2); text-wrap:pretty; }
.callout b{ color:var(--ink); font-weight:600; }
.callout-mark{ display:inline-block; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700;
  color:var(--ink3); margin-right:10px; vertical-align:1px; }

/* ---------- garage rows ---------- */
.rows{ margin-top:26px; border-top:1px solid var(--line); }
.rows-head{ display:flex; justify-content:space-between; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink3); padding:10px 4px 8px; }
.grow{ border-bottom:1px solid var(--line2); }
.grow-head{ width:100%; display:grid; grid-template-columns:18px 1fr auto 178px; align-items:center; gap:16px;
  background:none; border:0; text-align:left; padding:13px 4px; cursor:pointer; font:inherit; color:inherit; }
.grow-head:hover{ background:rgba(0,0,0,0.018); }
.grow-caret{ color:var(--ink3); font-size:17px; transition:transform .18s ease; line-height:1; }
.grow-name{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.grow-title{ font-weight:600; font-size:15px; }
.grow-sub{ font-size:12px; color:var(--ink3); }
.grow-free{ font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.grow-bar{ justify-self:end; }
.grow-open{ background:rgba(0,0,0,0.015); }

.grow-body{ padding:6px 4px 22px; }
.grow-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.mini{ background:var(--surface); border:1px solid var(--line2); border-radius:8px; padding:11px 12px; }
.mini-l{ font-size:11.5px; color:var(--ink3); }
.mini-v{ font-size:21px; font-weight:700; letter-spacing:-.02em; margin-top:5px; font-variant-numeric:tabular-nums; }
.grow-detail{ display:grid; grid-template-columns:1fr 230px; gap:24px; align-items:start; }
.grow-viewbar{ margin-bottom:12px; }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); }
.seg button{ font:inherit; font-size:12px; font-weight:500; color:var(--ink2); background:none; border:0; padding:6px 12px; cursor:pointer; }
.seg button + button{ border-left:1px solid var(--line); }
.seg button:hover{ background:rgba(0,0,0,0.03); }
.seg .seg-on{ background:#1c1a17; color:#f5f2ed; font-weight:600; }
.seg .seg-on:hover{ background:#1c1a17; }
.dow{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.dow button{ font:inherit; font-size:11.5px; font-weight:500; color:var(--ink2); background:var(--surface);
  border:1px solid var(--line); border-radius:7px; padding:5px 9px; cursor:pointer; line-height:1; }
.dow button:hover{ background:rgba(0,0,0,0.03); }
.dow .dow-on{ background:#1c1a17; color:#f5f2ed; border-color:#1c1a17; font-weight:600; }
.inlinesel-wrap{ position:relative; display:inline-flex; align-items:baseline; }
.inlinesel{ -webkit-appearance:none; appearance:none; font:inherit; font-weight:700; color:var(--ink);
  background:rgba(0,0,0,0.04); border:1px solid var(--line); border-radius:6px; padding:1px 17px 1px 7px;
  cursor:pointer; line-height:1.3; font-variant-numeric:tabular-nums; }
.inlinesel:hover{ background:rgba(0,0,0,0.07); }
.inlinesel-caret{ position:absolute; right:5px; top:50%; transform:translateY(-50%); font-size:8px; color:var(--ink2); pointer-events:none; }
.grow-notes{ display:flex; flex-direction:column; gap:0; padding-top:18px; }
.kv{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:8px 0; border-bottom:1px dashed var(--line2); }
.kv span{ color:var(--ink3); }
.kv b{ font-weight:600; }

/* ---------- analyses index (front page) ---------- */
.analyses-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:24px; }
.analysis-card{ display:flex; flex-direction:column; gap:8px; background:var(--surface);
  border:1px solid var(--line); border-radius:11px; padding:18px 20px; text-decoration:none; color:inherit;
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.analysis-card:hover{ border-color:var(--ink3); transform:translateY(-2px);
  box-shadow:0 10px 26px -16px rgba(0,0,0,.4); }
.analysis-card-eyebrow{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; font-weight:600; color:var(--ink3); }
.analysis-card-title{ font-size:17px; font-weight:650; line-height:1.22; letter-spacing:-.01em; }
.analysis-card-teaser{ font-size:13.5px; line-height:1.5; color:var(--ink2); text-wrap:pretty; }
.analysis-card-cta{ margin-top:auto; font-size:13px; font-weight:600; color:var(--ink); }

/* ---------- analysis (case study) article ---------- */
.analysis-back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500;
  color:var(--ink2); text-decoration:none; margin-bottom:18px; }
.analysis-back:hover{ color:var(--ink); }
.analysis-prose p{ font-size:16px; line-height:1.66; color:var(--ink2); margin:0 0 14px; max-width:62ch; text-wrap:pretty; }
.analysis-prose p b{ color:var(--ink); font-weight:600; }
.analysis-prose a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.analysis-prose blockquote{ margin:18px 0; padding:2px 0 2px 18px; border-left:3px solid var(--line); max-width:62ch; }
.analysis-prose blockquote p{ font-size:15px; line-height:1.62; color:var(--ink2); margin:0 0 11px; }
.analysis-prose blockquote p:last-child{ margin-bottom:0; }
.cijfers-divider{ margin-top:30px; padding-top:18px; border-top:1px dashed var(--line); font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; font-weight:600; color:var(--ink3); }

/* ---------- event case study ---------- */
.ev-section{ position:relative; }
.ev-scrub{ position:sticky; top:10px; z-index:20; margin-top:24px;
  background:rgba(250,249,246,0.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:11px; padding:13px 18px 11px;
  box-shadow:0 6px 20px -10px rgba(0,0,0,0.22); }
.ev-scrub-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.ev-scrub-cap{ font-size:12.5px; color:var(--ink2); }
.ev-scrub-read{ display:flex; align-items:baseline; gap:16px; }
.ev-rd{ font-size:12.5px; color:var(--ink2); display:inline-flex; align-items:center; gap:6px; }
.ev-rd i{ width:9px; height:9px; border-radius:2px; display:inline-block; }
.ev-rd b{ font-variant-numeric:tabular-nums; font-weight:700; font-size:14px; }
.ev-scrub-time{ font-size:24px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ev-range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px;
  background:#b0aaa0; outline:none; }
.ev-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:#1c1a17; border:3px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3); cursor:pointer; }
.ev-range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#1c1a17; border:3px solid #fff; cursor:pointer; }
.ev-scrub-ticks{ display:flex; justify-content:space-between; margin-top:7px; font-size:10px; color:var(--ink3); font-variant-numeric:tabular-nums; }

.ev-contrast{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; margin-top:18px; }
.ev-card{ background:var(--surface); border:1px solid var(--line); border-left-width:3px; border-radius:10px; padding:16px 18px; }
.ev-card-top{ font-size:12px; color:var(--ink2); font-weight:500; }
.ev-card-num{ font-size:38px; font-weight:700; letter-spacing:-.025em; line-height:1; margin:9px 0 4px; font-variant-numeric:tabular-nums; }
.ev-card-unit{ font-size:.42em; font-weight:600; color:var(--ink3); }
.ev-card-sub{ font-size:12.5px; color:var(--ink2); margin-bottom:12px; }
.ev-vs{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); font-weight:600; }

.ev-moment{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:24px; }
.ev-mlist{ display:flex; flex-direction:column; }
.ev-mrow{ display:grid; grid-template-columns:1fr auto 88px; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid var(--line2); }
.ev-mname{ font-size:13.5px; font-weight:500; }
.ev-mfree{ font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.ev-mcap{ color:var(--ink3); font-weight:400; }
.ev-mbar{ display:block; height:6px; background:rgba(0,0,0,0.06); border-radius:3px; overflow:hidden; }
.ev-mbar span{ display:block; height:100%; border-radius:3px; }

.ev-legend2{ display:flex; gap:20px; margin-top:10px; font-size:12px; color:var(--ink2); }
.ev-tip{ max-width:none; min-width:360px; padding:13px 15px 12px; }
.ev-tip .tip-head{ margin-bottom:11px; font-size:12.5px; }
.evtip-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.evtip-col{ min-width:0; }
.evtip-h{ display:flex; align-items:center; gap:7px; font-weight:600; color:#fff; font-size:12px; padding-bottom:7px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.16); }
.evtip-tot{ margin-left:auto; color:#e8e2d6; font-variant-numeric:tabular-nums; font-size:11.5px; font-weight:600; }
.evtip-row{ display:flex; justify-content:space-between; gap:14px; font-size:11.5px; padding:2.5px 0; line-height:1.3; }
.evtip-n{ color:#bcb5a7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evtip-v{ font-variant-numeric:tabular-nums; white-space:nowrap; color:#f3efe8; }
.evtip-cap{ color:#928c7f; }
.ev-legend2 .ld{ display:inline-block; width:18px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px; }

.ev-callout{ margin-top:24px; background:#1c1a17; color:#f0ece3; border-radius:11px; padding:20px 22px; }
.ev-callout-mark{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:#b8b0a2; margin-bottom:8px; }
.ev-callout p{ margin:0; font-size:15px; line-height:1.62; text-wrap:pretty; }
.ev-callout b{ color:#fff; font-weight:650; }

.ev-hmgroup{ margin-top:14px; }
.ev-hmlabel{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); font-weight:600; margin-bottom:7px; }
.ev-rowname{ font-size:11.5px; color:var(--ink2); align-self:center; text-align:right; padding-right:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-selcol{ outline:1.6px solid #1c1a17; outline-offset:-1px; }

@media (max-width:680px){
  .ev-contrast{ grid-template-columns:1fr; }
  .ev-vs{ justify-self:center; }
  .ev-moment{ grid-template-columns:1fr; gap:16px; }
}

/* ---------- autoluw case study ---------- */
.al-summary{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; margin-top:22px; }
.al-card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 18px; text-align:center; }
.al-card-l{ font-size:12px; color:var(--ink2); font-weight:500; }
.al-card-v{ font-size:42px; font-weight:700; letter-spacing:-.025em; line-height:1; margin:8px 0 5px; font-variant-numeric:tabular-nums; }
.al-card-s{ font-size:12px; color:var(--ink3); }
.al-delta{ text-align:center; }
.al-delta-v{ font-size:22px; font-weight:700; color:#a8412c; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.al-delta-l{ font-size:11px; color:var(--ink3); text-transform:uppercase; letter-spacing:.05em; margin-top:3px; }

.al-shift{ margin-top:14px; border-top:1px solid var(--line2); }
.al-srow{ display:grid; grid-template-columns:1.3fr 150px auto 56px; align-items:center; gap:16px; padding:11px 4px; border-bottom:1px solid var(--line2); }
.al-sname{ display:flex; flex-direction:column; gap:1px; font-size:14px; font-weight:600; }
.al-ssub{ font-size:11.5px; color:var(--ink3); font-weight:400; }
.al-sbars{ display:flex; flex-direction:column; gap:3px; }
.al-sbar{ display:block; height:5px; background:rgba(0,0,0,0.06); border-radius:3px; overflow:hidden; }
.al-sbar span{ display:block; height:100%; border-radius:3px; }
.al-sval{ font-size:13px; color:var(--ink2); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.al-arrow{ color:var(--ink3); margin:0 2px; }
.al-sdelta{ font-size:12.5px; font-weight:700; color:#a8412c; font-variant-numeric:tabular-nums; text-align:right; }

.al-rules{ margin-top:26px; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:18px 20px; }
.al-rules-h{ font-size:13px; font-weight:650; margin-bottom:13px; }
.al-rules-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px 26px; }
.al-rule{ display:flex; justify-content:space-between; gap:14px; font-size:13px; padding-bottom:8px; border-bottom:1px solid var(--line2); }
.al-rule-l{ color:var(--ink2); }
.al-rule-v{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.al-rules-note{ font-size:12.5px; color:var(--ink3); margin-top:13px; }

.al-sources{ display:flex; flex-wrap:wrap; align-items:baseline; gap:7px 16px; margin-top:24px; padding-top:16px; border-top:1px solid var(--line2); }
.al-sources-l{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); font-weight:600; }
.al-sources a{ font-size:12.5px; color:var(--ink2); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--line); }
.al-sources a:hover{ text-decoration-color:var(--ink2); color:var(--ink); }

@media (max-width:680px){
  .al-summary{ grid-template-columns:1fr; }
  .al-srow{ grid-template-columns:1fr auto; }
  .al-sbars{ display:none; }
  .al-rules-grid{ grid-template-columns:1fr; }
}

/* ---------- methodology + footer ---------- */
.methode{ margin-top:56px; padding-top:30px; border-top:1px solid var(--ink); }
.methode h3{ font-size:15px; font-weight:650; margin:0 0 14px; }
.methode p{ font-size:14px; line-height:1.62; color:var(--ink2); margin:0 0 12px; max-width:64ch; text-wrap:pretty; }
.methode a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.foot{ margin-top:40px; padding-top:18px; border-top:1px solid var(--line2); font-size:12.5px; color:var(--ink3); }

@media (max-width:680px){
  .wrap{ padding:44px 18px 64px; }
  .statrow-3{ grid-template-columns:1fr; }
  .grow-head{ grid-template-columns:16px 1fr auto; }
  .grow-bar{ display:none; }
  .grow-detail{ grid-template-columns:1fr; gap:16px; }
  .grow-metrics{ grid-template-columns:repeat(2,1fr); }
  .masthead h1{ font-size:28px; }
  .delft-map{ height:280px; }
}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:.65}}
.skel{background:#b5b0a8;border-radius:4px;animation:breathe 1.8s ease-in-out infinite;display:inline-block;vertical-align:middle}
.skel-block{background:#b5b0a8;border-radius:8px;animation:breathe 1.8s ease-in-out infinite;width:100%;display:block}