/* ─────────────────────────────────────────────────────────────
   Woonstaete — site styling
   Gebaseerd op brand/design-system-hermes.html (Hermès-oranje variant).
   ───────────────────────────────────────────────────────────── */

:root {
  /* Kleuren — primaire palet */
  --blue:        #1F3A5F;
  --blue-dark:   #142840;
  --blue-soft:   #E8EEF5;
  --orange:      #F37021;
  --orange-soft: #FDEFE3;
  --offwhite:    #F7F5F1;
  --paper:       #FBFAF7;

  /* Inkt */
  --ink:         #1A1A1A;
  --ink-soft:    #3D3D3D;
  --muted:       #6B6660;
  --rule:        #DCD6CB;
  --rule-soft:   #E8E3D8;

  /* State */
  --success:     #1F6A3F;
  --warning:     #A36B00;
  --error:       #F37021;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Hoekafronding — één trap voor de hele site. Zacht genoeg om vriendelijk
     te ogen, niet zo rond dat het een consumenten-app wordt. */
  --r-xs:  6px;   /* tags, kleine labels */
  --r-sm:  8px;   /* knoppen, invoervelden, kleine vlakken */
  --r-md:  12px;  /* kaarten, beeldkaders, panelen */
  --r-lg:  16px;  /* grote vlakken: tabellen, uitgelichte blokken */
  --r-pil: 999px; /* pillen en ronde knoppen */

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);

  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 260ms;
  --ease:   cubic-bezier(0.2, 0, 0, 1);

  --header-h: 84px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* De canvas-kleur vult de strook achter de iOS-statusbalk en de overscroll-
   zones. Zonder deze regel erft die de crèmekleur van de body en zie je op de
   telefoon een lichte balk boven de donkere header. Header en footer zijn
   allebei blue-dark, dus aan beide uiteinden sluit dit aan. */
html { scroll-behavior: smooth; background: var(--blue-dark); }

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  font-optical-sizing: auto;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  padding: 0 var(--gutter);
  margin: 0 auto;
}

/* ─── Header ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(20, 40, 64, 0.18);
  transition: background var(--t-slow) var(--ease),
              border-color var(--t-slow) var(--ease),
              padding var(--t-slow) var(--ease);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: var(--header-h);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--blue-dark);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  position: relative;
  height: 72px;
  width: 72px;
}
.site-logo img {
  display: block;
  height: 72px;
  width: 72px;
  transition: opacity var(--t-slow) var(--ease);
}
/* Stapel de twee logo's; alleen de actieve is zichtbaar via opacity */
.site-logo__white {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* Horizontale variant — vierkant merk + haarlijn + slogan, conform brandbook */
.site-logo--horizontal {
  width: auto;
  height: auto;
  gap: 14px;
  align-items: center;
}
.site-logo--horizontal .site-logo__mark {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.site-logo--horizontal .site-logo__mark img {
  width: 56px;
  height: 56px;
}
.site-logo--horizontal .site-logo__rule {
  display: block;
  width: 1px;
  height: 44px;
  background: var(--blue-dark);
  opacity: 0.22;
  flex-shrink: 0;
  transition: background var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
}
.site-logo--horizontal .site-logo__slogan {
  font-family: var(--font, 'Inter', system-ui, sans-serif);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--blue-dark);
  white-space: nowrap;
  transition: color var(--t-slow) var(--ease);
}

/* Header-context (subpage gradient, over-hero transparent, over-hero scrolled):
   slogan altijd wit, haarlijn altijd licht — alle huidige headers hebben donkere achtergrond */
.site-header .site-logo--horizontal .site-logo__rule {
  background: #ffffff;
  opacity: 0.35;
}
.site-header .site-logo--horizontal .site-logo__slogan {
  color: #ffffff;
}

/* Smal scherm: slogan + haarlijn verbergen, alleen het merk tonen. De grens
   ligt hoger dan die van het schuifpaneel (1100px): tussen 1100 en 1280 staat de
   balk wel op één regel, maar schuift de slogan tegen 'Home' aan. */
@media (max-width: 1280px) {
  .site-logo--horizontal .site-logo__rule,
  .site-logo--horizontal .site-logo__slogan { display: none; }
}

/* Transparent-over-hero variant (alleen home) */
.site-header--over-hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.site-header--over-hero .site-logo__dark  { opacity: 0; }
.site-header--over-hero .site-logo__white { opacity: 1; }
.site-header--over-hero .site-nav a { color: rgba(255, 255, 255, 0.88); }
.site-header--over-hero .site-nav a:hover { color: #fff; }
.site-header--over-hero .site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--orange); }
.site-header--over-hero .nav-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
}

/* Scroll-state: diepblauwe gradient — zelfde stijl als invest-cards en subpage-nav */
.site-header--over-hero.is-scrolled {
  background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(20, 40, 64, 0.18);
}
.site-header--over-hero.is-scrolled .site-logo__dark  { opacity: 0; }
.site-header--over-hero.is-scrolled .site-logo__white { opacity: 1; }
.site-header--over-hero.is-scrolled .site-nav a { color: rgba(255, 255, 255, 0.92); }
.site-header--over-hero.is-scrolled .site-nav a:hover { color: #fff; }
.site-header--over-hero.is-scrolled .site-nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--orange);
}
.site-header--over-hero.is-scrolled .nav-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

/* Gap krimpt mee met de vensterbreedte; met acht items past de balk anders
   niet meer op één regel en breken de labels middenin een woord af. De bovengrens
   blijft laag: de container stopt bij 1240px, dus op een breed scherm zou een
   ruimere gap de balk alleen maar verder naar het logo toe duwen. */
.site-nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.site-nav a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  letter-spacing: -0.005em;
  padding: 8px 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.site-nav .nav-group__kop { white-space: nowrap; }
.site-nav a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.34); }
.site-nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--orange);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 10px;
  font-size: 13px;
  color: #fff;
  letter-spacing: -0.005em;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .site-nav {
    position: absolute;
    inset: var(--header-h) 0 auto 0;
    background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(20, 40, 64, 0.20);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--gutter) var(--s-5);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: var(--s-4) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .site-nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: inline-block; }
}

/* ─── Hero — full-bleed video met glas-feiten-blok ───────────── */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--blue-dark);
  padding: 120px 0 var(--s-8);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.92) saturate(0.95);
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      rgba(20, 40, 64, 0.78) 0%,
      rgba(20, 40, 64, 0.55) 28%,
      rgba(20, 40, 64, 0.25) 55%,
      rgba(20, 40, 64, 0.18) 100%),
    linear-gradient(to bottom,
      rgba(20, 40, 64, 0.40) 0%,
      rgba(20, 40, 64, 0) 25%,
      rgba(20, 40, 64, 0) 55%,
      rgba(20, 40, 64, 0.35) 78%,
      rgba(20, 40, 64, 0.85) 92%,
      var(--blue-dark) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.9fr;
  gap: clamp(64px, 8vw, 140px);
  align-items: end;
}
.hero__grid > * { min-width: 0; }
.hero__grid--single { grid-template-columns: 1fr; }

/* ─── Phone mockup (iPhone-style, Woonstaete-blauw dashboard) ── */
.phone-mockup {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s-4) 0;
}
.phone-mockup__frame {
  position: relative;
  width: 280px;
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(180deg, #1a1a1c 0%, #0a0a0c 100%);
  border-radius: 46px;
  padding: 10px;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.6),
    0 12px 30px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.1),
    inset 0 0 0 4px rgba(0, 0, 0, 0.4);
  transform: rotate(-4deg);
  transition: transform var(--t-slow) var(--ease);
}
.phone-mockup__frame:hover { transform: rotate(-2deg) translateY(-4px); }

/* iPhone side buttons */
.phone-mockup__side {
  position: absolute;
  background: linear-gradient(180deg, #2a2a2c, #0a0a0c);
  border-radius: var(--r-sm);
  z-index: 0;
}
.phone-mockup__side--left {
  left: -2px;
  top: 110px;
  width: 3px;
  height: 32px;
  box-shadow: 0 46px 0 #1a1a1c, 0 76px 0 #1a1a1c;
}
.phone-mockup__side--right {
  right: -2px;
  top: 150px;
  width: 3px;
  height: 60px;
}

/* Dynamic Island */
.phone-mockup__island {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  background: #000;
  border-radius: var(--r-lg);
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.phone-mockup__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  background: linear-gradient(180deg, #142840 0%, #1F3A5F 100%);
  overflow: hidden;
  padding: 52px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}

.phone-mockup__statusbar {
  position: absolute;
  top: 16px; left: 22px; right: 22px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  z-index: 2;
}
.phone-mockup__signals { font-size: 9px; letter-spacing: 0.08em; opacity: 0.9; }

.phone-mockup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
}
.phone-mockup__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.phone-mockup__mark {
  width: 22px; height: 22px;
  background: #fff;
  color: #142840;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.phone-mockup__avatar {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #F37021, #D55E14);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}

.phone-mockup__balance {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 0 2px;
}
.phone-mockup__label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
.phone-mockup__amount {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.phone-mockup__delta {
  font-size: 10px;
  color: #F37021;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.phone-mockup__chart {
  width: 100%;
  height: 44px;
  display: block;
  margin: 4px 0;
}

.phone-mockup__card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* fotostrook van het project onder de kop, met de naam op een blauw veil */
.phone-mockup__foto {
  position: relative;
  margin: 0 -14px;
  height: 132px;
  overflow: hidden;
  flex: 0 0 auto;
}
.phone-mockup__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.phone-mockup__foto::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 40, 64, 0) 30%, rgba(20, 40, 64, 0.85) 100%);
}
.phone-mockup__foto-tekst {
  position: absolute; left: 14px; right: 14px; bottom: 10px;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  z-index: 1;
}
.phone-mockup__card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.phone-mockup__tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #F37021;
  color: #fff;
  padding: 3px 7px;
  border-radius: var(--r-sm);
}
.phone-mockup__card-rate {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.02em;
}
.phone-mockup__card-title {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
}
.phone-mockup__card-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}
.phone-mockup__progress {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.phone-mockup__progress-bar {
  width: 65%;
  height: 100%;
  background: linear-gradient(90deg, #F37021 0%, #D55E14 100%);
}
.phone-mockup__card-foot {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
}

.phone-mockup__event {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(243, 112, 33, 0.14);
  border-radius: var(--r-md);
  border-left: 2px solid #F37021;
}
.phone-mockup__event-icon {
  width: 22px; height: 22px;
  background: #F37021;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.phone-mockup__event-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  font-size: 10px;
  color: #fff;
  font-weight: 500;
}
.phone-mockup__event-amount { color: #F37021; font-weight: 600; }

.phone-mockup__nav {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px 4px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.phone-mockup__nav-item {
  text-align: center;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  padding: 2px 0;
  letter-spacing: 0.02em;
}
.phone-mockup__nav-item.is-active {
  color: #fff;
  font-weight: 700;
}

/* Lichte app: het scherm in de lichte kleur van de site, met blauwe blokken (de inleg, de melding) */
.phone-mockup--koudum .phone-mockup__screen { background: var(--offwhite); color: var(--ink); }
.phone-mockup--koudum .phone-mockup__statusbar { color: var(--ink); }
.phone-mockup--koudum .phone-mockup__brand { color: var(--ink-soft); }
.phone-mockup--koudum .phone-mockup__mark { background: var(--blue-dark); color: #fff; }
.phone-mockup--koudum .phone-mockup__avatar { background: var(--blue); }
.phone-mockup--koudum .phone-mockup__foto { border-radius: var(--r-md); margin: 0; }
.phone-mockup--koudum .phone-mockup__balance {
  padding: 12px 12px 11px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: #fff;
}
.phone-mockup--koudum .phone-mockup__label { color: rgba(255, 255, 255, 0.7); }
.phone-mockup--koudum .phone-mockup__amount { color: #fff; }
.phone-mockup--koudum .phone-mockup__card {
  background: var(--paper);
  border: 1px solid var(--rule);
  backdrop-filter: none;
}
.phone-mockup--koudum .phone-mockup__card .phone-mockup__card-meta { color: var(--muted); }
.phone-mockup--koudum .phone-mockup__card-rate { color: var(--blue-dark); }
.phone-mockup--koudum .phone-mockup__progress { background: var(--rule-soft); }
.phone-mockup--koudum .phone-mockup__card-foot { color: var(--muted); }
.phone-mockup--koudum .phone-mockup__event {
  background: var(--blue-soft);
  border-left-color: var(--blue);
}
.phone-mockup--koudum .phone-mockup__event-icon { background: var(--blue); }
.phone-mockup--koudum .phone-mockup__event-body { color: var(--blue-dark); }
.phone-mockup--koudum .phone-mockup__event-amount { color: var(--blue-dark); }
.phone-mockup--koudum .phone-mockup__nav { border-top-color: var(--rule); }
.phone-mockup--koudum .phone-mockup__nav-item { color: var(--muted); }
.phone-mockup--koudum .phone-mockup__nav-item.is-active { color: var(--blue-dark); }

/* Koudum-spotlight variant met phone rechts */
.koudum-spotlight--with-phone {
  position: relative;
}
.koudum-spotlight--with-phone .container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.koudum-spotlight--with-phone .koudum-spotlight__head,
.koudum-spotlight--with-phone .koudum-terms,
.koudum-spotlight--with-phone .koudum-spotlight__footer {
  grid-column: 1;
}
.koudum-spotlight--with-phone .phone-mockup--koudum {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  padding: 0;
}

/* Editoriale term-sheet stijl */
.koudum-terms {
  margin: 0 0 var(--s-6);
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 640px;
}
.koudum-terms__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.koudum-terms__row dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  margin: 0;
  flex-shrink: 0;
}
.koudum-terms__row dd {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
  text-align: right;
}
.koudum-terms__row--hero { padding: 22px 0; }
.koudum-terms__row--hero dt {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.koudum-terms__row--hero dd {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}
.koudum-terms__num {
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
.koudum-terms__u {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
}

@media (max-width: 1080px) {
  .koudum-spotlight--with-phone .container {
    grid-template-columns: 1fr;
  }
  .koudum-spotlight--with-phone .phone-mockup--koudum {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 480px) {
  .koudum-terms__row { padding: 12px 0; }
  .koudum-terms__row dd { font-size: 15px; }
  .koudum-terms__num { font-size: 32px; }
}
@media (max-width: 720px) {
  .phone-mockup__frame { width: 240px; }
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--s-6);
}
.hero__eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--orange);
}
.hero__title {
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: var(--s-6);
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
  max-width: 22ch;
}
.hero__title em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 400;
}
.hero__lede {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 44ch;
  margin-bottom: var(--s-7);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* Glas-feiten-blok rechts in de hero */
.hero-facts {
  background: rgba(20, 40, 64, 0.62);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-5);
  position: relative;
  color: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  justify-self: end;
  width: 100%;
  max-width: 420px;
}
.hero-facts::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 56px; height: 4px;
  background: var(--orange);
}
.hero-facts__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 8px;
}
.hero-facts__title {
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  color: #fff;
  letter-spacing: -0.025em;
  margin-bottom: var(--s-5);
}
.hero-facts__title small {
  display: block;
  font-family: var(--font);
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0;
  margin-top: 6px;
}
.hero-facts__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14px;
}
.hero-facts__row:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.hero-facts__row .k { color: rgba(255, 255, 255, 0.7); }
.hero-facts__row .v {
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.hero-facts__foot {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: var(--s-4);
  line-height: 1.5;
}
.hero-facts__cta {
  margin-top: var(--s-5);
  width: 100%;
  justify-content: center;
}

/* ─── Trust-strip — 4 propositie-feiten direct onder hero ───────── */
.trust-strip {
  background: var(--blue-dark);
  color: #fff;
  padding: 0;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.trust-strip__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 28px;
  background: var(--blue-dark);
  min-height: 96px;
  justify-content: center;
}
.trust-strip__k {
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
.trust-strip__k--word {
  font-size: clamp(20px, 1.7vw, 26px);
  letter-spacing: -0.015em;
  color: var(--orange);
}
.trust-strip__v {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
@media (max-width: 880px) {
  .trust-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip__cell { padding: 20px 22px; min-height: 78px; }
}
@media (max-width: 480px) {
  .trust-strip__cell { padding: 18px 18px; }
}

/* ─── Koudum spotlight — het lopende project, direct onder hero ── */
.koudum-spotlight {
  background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: #fff;
  padding: var(--s-8) 0;
  position: relative;
  overflow: hidden;
}
.koudum-spotlight__head { margin-bottom: var(--s-7); max-width: 780px; }
.koudum-spotlight__head .ws-tag { margin-bottom: var(--s-5); }
.koudum-spotlight__title {
  font-weight: 500;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  max-width: 22ch;
}
.koudum-spotlight__title em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 400;
}
.koudum-spotlight__lede {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
  margin: 0;
}

/* Horizontale strip met 6 spec-cellen */
.facts-strip {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s-6);
}
.facts-strip__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 22px 22px;
  background: var(--blue-dark);
  min-height: 96px;
}
.facts-strip__item--rate {
  background: linear-gradient(135deg, #fff 0%, #FBFAF7 100%);
  color: var(--blue-dark);
  gap: 4px;
}
.facts-strip__num {
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--blue-dark);
}
.facts-strip__num-unit {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
}
.facts-strip__k {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
.facts-strip__v {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.koudum-spotlight__footer {
  display: flex;
  gap: var(--s-6);
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.koudum-spotlight__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.koudum-spotlight__foot {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  max-width: 44ch;
  margin: 0;
  flex: 1 1 320px;
}
/* Rekenvoorbeeld — eigen regel bovenin de footer, boven de knoppen */
.koudum-spotlight__example {
  flex: 1 1 100%;
  margin: 0 0 var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 62ch;
}
.koudum-spotlight__example strong {
  color: #fff;
  font-weight: 600;
}

@media (max-width: 1080px) {
  .facts-strip { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .facts-strip__item:nth-child(1) { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 12px; }
  .facts-strip__item--rate .facts-strip__num { font-size: 40px; }
}
@media (max-width: 720px) {
  .koudum-spotlight { padding: var(--s-7) 0; }
  .facts-strip { grid-template-columns: repeat(2, 1fr); }
  .facts-strip__item { padding: 16px 18px; min-height: 78px; }
  .facts-strip__num { font-size: 32px; }
  .koudum-spotlight__footer { flex-direction: column; }
}

/* ─── Prominente rate-badge (her-bruikbaar) ────────────────────── */
.rate-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: var(--s-3) 0 var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: #fff;
  border: 1px solid #fff;
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(20,40,64,0.08), 0 6px 16px rgba(20,40,64,0.18);
  line-height: 1;
  white-space: nowrap;
}
.rate-badge__num {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  color: var(--blue-dark, #142840);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'lnum' on, 'tnum' on;
}
.rate-badge__unit {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue, #1F3A5F);
}

/* ─── Booking-modal (mock Calendly-stijl, concept) ─────────────── */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 40, 64, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.booking-modal.is-open { display: flex; opacity: 1; }
.booking-modal__dialog {
  background: #fff;
  border-radius: var(--r-md);
  max-width: 940px;
  width: 100%;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
  position: relative;
  transform: translateY(20px);
  transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
}
.booking-modal.is-open .booking-modal__dialog { transform: none; }
.booking-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms, color 160ms;
  z-index: 1;
}
.booking-modal__close:hover { background: var(--offwhite); color: var(--blue-dark); }
.booking-modal__header {
  padding: var(--s-6) var(--s-6) var(--s-5);
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: var(--s-4);
  align-items: center;
}
.booking-modal__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  flex-shrink: 0;
}
.booking-modal__brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.booking-modal__title {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--blue-dark);
  letter-spacing: -0.02em;
  margin: 4px 0 2px;
}
.booking-modal__sub {
  font-size: 13px;
  color: var(--muted);
}
/* ─── Booking-modal — Calendly inline-embed ─────────────────────── */
.booking-modal__embed {
  /* Calendly's iframe staat op height:100%; een min-height geeft hem geen
     hoogte om tegenaan te rekenen, vandaar een expliciete height. */
  height: 680px;
  border-top: 1px solid var(--rule-soft);
}
.booking-modal__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.booking-modal__embed.is-loading::after {
  content: 'Agenda laden…';
  display: block;
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.booking-modal__fallback {
  padding: var(--s-6) var(--s-5);
  text-align: center;
  color: var(--ink-soft);
}
.booking-modal__fallback a { color: var(--blue); }

@media (max-width: 720px) {
  .booking-modal__embed { height: 940px; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-modal, .booking-modal__dialog { transition: none; }
}

/* ─── Contact-widget (floating bottom-right) ──────────────────── */
.contact-widget {
  position: fixed;
  bottom: var(--s-5);
  right: var(--s-5);
  z-index: 60;
  background: var(--blue-dark);
  color: #fff;
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 18px 48px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 340px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 360ms cubic-bezier(0.2, 0, 0, 1),
              transform 360ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}
.contact-widget.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.contact-widget::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 40px; height: 3px;
  background: var(--orange);
  border-top-left-radius: 12px;
}
.contact-widget__avatar-link {
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  line-height: 0;
}
.contact-widget__avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  display: block;
}
.contact-widget__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.contact-widget__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.contact-widget__title {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.contact-widget__title:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.contact-widget__name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}
.contact-widget__close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 200ms, background 200ms;
}
.contact-widget__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 600px) {
  .contact-widget {
    bottom: var(--s-3);
    right: var(--s-3);
    left: auto;
    max-width: none;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
  }
  .contact-widget::before { display: none; }
  .contact-widget__close { display: none; }
  .contact-widget__avatar {
    width: 60px;
    height: 60px;
    border: 3px solid #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24), 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  .contact-widget__body {
    background: var(--blue-dark);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 8px 14px;
    border-radius: var(--r-pil);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .contact-widget__body .contact-widget__eyebrow,
  .contact-widget__body .contact-widget__name { display: none; }
  .contact-widget__title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
  .contact-widget__title::after {
    content: ' ↓';
    color: var(--orange);
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-widget { transition: none; }
}

/* ─── Scroll-reveal — subtiele fade-up bij in-view ─────────────── */
.has-reveal .reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.2, 0, 0, 1),
              transform 600ms cubic-bezier(0.2, 0, 0, 1);
  will-change: opacity, transform;
}
.has-reveal .reveal-up.is-in-view {
  opacity: 1;
  transform: none;
}
/* Stagger binnen grids: tweede/derde/vierde sibling vertraagd */
.has-reveal .reveal-up.reveal-up--stagger:nth-child(2) { transition-delay: 90ms; }
.has-reveal .reveal-up.reveal-up--stagger:nth-child(3) { transition-delay: 180ms; }
.has-reveal .reveal-up.reveal-up--stagger:nth-child(4) { transition-delay: 270ms; }
.has-reveal .reveal-up.reveal-up--stagger:nth-child(5) { transition-delay: 360ms; }
.has-reveal .reveal-up.reveal-up--stagger:nth-child(6) { transition-delay: 450ms; }
@media (prefers-reduced-motion: reduce) {
  .has-reveal .reveal-up { opacity: 1; transform: none; transition: none; }
}

/* ─── Brand-statement — slogan-reveal als adempauze na hero ───── */
.brand-statement {
  background: linear-gradient(180deg, var(--paper) 0%, var(--offwhite) 100%);
  border-top: none;
  padding: clamp(96px, 12vw, 200px) 0 clamp(40px, 5vw, 72px);
}
.brand-statement__inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.brand-statement__slogan {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--blue-dark);
  margin: 0;
  text-wrap: balance;
}
.brand-statement__word {
  display: inline-block;
}
.brand-statement__word--accent {
  color: var(--orange);
  font-weight: 500;
}
.brand-statement__word--accent em {
  font-style: italic;
  padding: 0 0.06em;
}
.brand-statement__body {
  max-width: 62ch;
  margin: clamp(36px, 4.4vw, 60px) auto 0;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Word-reveal: fade-up + blur-clear, gestaffeld */
.has-reveal .brand-statement__slogan .brand-statement__word {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity 1100ms cubic-bezier(0.2, 0, 0, 1),
              transform 1100ms cubic-bezier(0.2, 0, 0, 1),
              filter 1100ms cubic-bezier(0.2, 0, 0, 1);
  will-change: opacity, transform, filter;
}
.has-reveal .brand-statement__inner.is-in-view .brand-statement__word {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.has-reveal .brand-statement__inner.is-in-view .brand-statement__word:nth-child(1) { transition-delay: 80ms; }
.has-reveal .brand-statement__inner.is-in-view .brand-statement__word:nth-child(2) { transition-delay: 280ms; }
.has-reveal .brand-statement__inner.is-in-view .brand-statement__word:nth-child(3) { transition-delay: 480ms; }
.has-reveal .brand-statement__inner.is-in-view .brand-statement__word:nth-child(4) { transition-delay: 680ms; }
.has-reveal .brand-statement__inner.is-in-view .brand-statement__word:nth-child(5) { transition-delay: 880ms; }

/* Body fade-in volgt na de slogan */
.has-reveal .brand-statement__body {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms cubic-bezier(0.2, 0, 0, 1) 1500ms,
              transform 800ms cubic-bezier(0.2, 0, 0, 1) 1500ms;
}
.has-reveal .brand-statement__inner.is-in-view .brand-statement__body {
  opacity: 1;
  transform: none;
}

/* De .reveal-up op de wrapper triggert alleen .is-in-view — niet zelf faden */
.has-reveal .brand-statement__inner.reveal-up { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .has-reveal .brand-statement__slogan .brand-statement__word,
  .has-reveal .brand-statement__body { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Cards-sectie leidt direct uit de brand-statement — minder top-lucht */
.section--cards-flow { padding-top: clamp(40px, 5vw, 72px); }

/* ─── Tijdlijn — gerealiseerde projecten door de jaren ──────────── */
.timeline[data-timeline] {
  display: block;
  position: relative;
  max-width: 1120px;
  margin: clamp(48px, 6vw, 96px) auto 0;
  padding: var(--s-7) 0;
}
.timeline__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--rule);
  transform: translateX(-50%);
  z-index: 0;
}
.timeline__rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange) 85%, rgba(243, 112, 33, 0) 100%);
  will-change: height;
}
.timeline__item,
.timeline__item--left,
.timeline__item--right {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: start;
  margin: clamp(72px, 10vw, 160px) 0;
  z-index: 1;
  min-height: 0;
}
.timeline__item:first-child { margin-top: 0; }
.timeline__item:last-child { margin-bottom: 0; }

.timeline__node {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translate(-50%, 0) scale(0.6);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.2, 0, 0, 1) 300ms,
              transform 500ms cubic-bezier(0.2, 0, 0, 1) 300ms;
  z-index: 2;
}

/* Sticky jaartal — blijft in beeld zolang dit project langs scrollt. */
.timeline__year-mark,
.timeline__item--left .timeline__year-mark,
.timeline__item--right .timeline__year-mark {
  position: sticky;
  top: clamp(108px, 14vh, 160px);
  display: block;
  align-self: start;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: clamp(72px, 9vw, 132px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
  font-variant-numeric: tabular-nums lining-nums;
  opacity: 0.88;
  white-space: nowrap;
  margin: 0;
  pointer-events: none;
  left: auto;
  right: auto;
}
/* Grid-plaatsing: card aan z'n eigen kant, jaar aan de overkant. */
.timeline__item--left .timeline__card { grid-column: 1; }
.timeline__item--left .timeline__year-mark {
  grid-column: 2;
  justify-self: start;
  padding-left: var(--s-5);
}
.timeline__item--right .timeline__year-mark {
  grid-column: 1;
  justify-self: end;
  padding-right: var(--s-5);
  text-align: right;
}
.timeline__item--right .timeline__card { grid-column: 2; }

.timeline__card {
  display: block;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(20, 40, 64, 0.06);
  margin: 0;
}
.timeline__item--left .timeline__card { justify-self: end; }
.timeline__item--right .timeline__card { justify-self: start; }
.timeline__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--blue-soft);
  overflow: hidden;
  position: relative;
}
.timeline__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: translateY(0) scale(1.08);
}
.timeline__card-body { padding: var(--s-5) var(--s-5) var(--s-5); }
.timeline__card-meta {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-2);
}
.timeline__card-title {
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--blue-dark);
  margin: 0 0 var(--s-2);
}
.timeline__card-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Reveal: item komt rustig op vanuit beneden, node popt mee. */
.has-reveal .timeline__item.reveal-up {
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.2, 0, 0, 1),
              transform 900ms cubic-bezier(0.2, 0, 0, 1);
}
.has-reveal .timeline__item--left.reveal-up,
.has-reveal .timeline__item--right.reveal-up { transform: translateY(40px); }
.has-reveal .timeline__item.reveal-up.is-in-view { opacity: 1; transform: none; }
.has-reveal .timeline__item.reveal-up.is-in-view .timeline__node {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* Onder 800px: single column, rail aan de linkerkant, jaar als kop boven card. */
@media (max-width: 800px) {
  .timeline[data-timeline] { margin-top: var(--s-7); padding: var(--s-5) 0; max-width: 720px; }
  .timeline__rail { left: 18px; transform: none; }
  .timeline__item,
  .timeline__item--left,
  .timeline__item--right {
    display: block;
    padding: 0 0 0 52px;
    margin: clamp(48px, 9vw, 80px) 0;
  }
  .timeline__node { left: 18px; top: 24px; }
  .timeline__year-mark,
  .timeline__item--left .timeline__year-mark,
  .timeline__item--right .timeline__year-mark {
    position: static;
    top: auto;
    font-size: clamp(40px, 11vw, 64px);
    padding: 0;
    text-align: left;
    margin: 0 0 var(--s-3);
    justify-self: auto;
  }
  .timeline__card,
  .timeline__item--left .timeline__card,
  .timeline__item--right .timeline__card {
    width: 100%;
    max-width: none;
    margin: 0;
    justify-self: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-reveal .timeline__item.reveal-up,
  .timeline__node { opacity: 1; transform: none; transition: none; }
  .has-reveal .timeline__item--left.reveal-up,
  .has-reveal .timeline__item--right.reveal-up { transform: none; }
}

/* ─── Spec-grid (editorial 2-koloms, geen tegels) ──────────────── */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-5);
  margin: var(--s-4) 0 var(--s-5);
}
.spec-tile {
  background: transparent;
  border: none;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--orange);
  min-width: 0;
}
.spec-tile--wide { grid-column: 1 / -1; }
.spec-tile__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.spec-tile__value {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--blue-dark);
  letter-spacing: -0.015em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* Dark-variant voor hero-facts context */
.hero-facts .spec-grid {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0 var(--s-5);
}
.hero-facts .spec-tile {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 13px 0;
  border-left: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hero-facts .spec-tile:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.hero-facts .spec-tile__label {
  margin-bottom: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}
.hero-facts .spec-tile__value {
  font-size: 14px;
  text-align: right;
  color: #fff;
}

/* ─── Editorial titel-hiërarchie (product groot, project-naam klein) */
.hero-facts__kicker {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  text-transform: lowercase;
  margin-bottom: 6px;
}
.hero-facts__headline {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0 0 var(--s-4);
}
.hero-facts__sub {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.015em;
  margin-top: 6px;
}
.hero-facts__meta {
  display: block;
  font-family: var(--font);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.01em;
  margin-top: 10px;
}

/* Generieke variant voor light backgrounds (productpagina-asides) */
.feiten-kicker {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: lowercase;
  margin-bottom: 6px;
}
.feiten-headline {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--blue-dark);
  margin: 0 0 var(--s-4);
}
.feiten-sub {
  display: block;
  font-family: var(--font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  letter-spacing: 0;
  margin-top: 6px;
}

@media (max-width: 880px) {
  .hero { min-height: auto; padding: 100px 0 var(--s-7); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero__title { font-size: clamp(32px, 8vw, 48px); }
}

/* ─── Page header (niet-home pagina's) ───────────────────────── */

.page-head {
  padding: calc(var(--s-9) + var(--s-4)) 0 var(--s-8);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--paper) 0%, var(--offwhite) 100%);
}
.page-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-5);
}
.page-head__eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--orange);
}
.page-head__title {
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 46px); /* gelijk aan Organisatie, besluit 23 okt 2026 */
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--blue-dark);
  margin-bottom: var(--s-5);
  max-width: 20ch;
  text-wrap: balance;
}
.page-head__lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 65ch;
}

/* ─── Sections ───────────────────────────────────────────────── */

.section { padding: var(--s-10) 0; }
.section--paper {
  background: linear-gradient(180deg, var(--paper) 0%, var(--offwhite) 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.section--blue {
  background: var(--blue-dark);
  color: rgba(255, 255, 255, 0.92);
}
.section--blue .section-title,
.section--blue .section-eyebrow { color: #fff; }
.section--blue .section-eyebrow { color: var(--orange); }
.section--blue .section-lede { color: rgba(255, 255, 255, 0.78); }

.section-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-4);
  display: inline-block;
}
.section-title {
  /* besluit Bodi 22 okt 2026: een trap kleiner dan de h1 van de paginakop; alleen die blijft groot */
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--blue-dark);
  margin-bottom: var(--s-5);
  max-width: 26ch;
  text-wrap: balance;
}
.section-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 65ch;
  margin-bottom: var(--s-7);
}

.prose h3 {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--blue-dark);
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}
.prose p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 70ch;
  margin-bottom: var(--s-4);
}
.prose p strong { color: var(--blue-dark); font-weight: 600; }
.prose ul {
  margin: 0 0 var(--s-5) var(--s-5);
  color: var(--ink-soft);
  max-width: 70ch;
}
.prose ul li {
  margin-bottom: var(--s-2);
  line-height: 1.65;
}

/* Two-column lay-out voor tekst + zij-blok */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 880px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ─── Knoppen (ws-btn) ───────────────────────────────────────── */

.ws-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 14px 26px;
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
  border: 1px solid transparent;
  background: none;
}
.ws-btn--primary { box-shadow: 0 1px 2px rgba(20,40,64,0.08), 0 6px 16px rgba(20,40,64,0.06); }
.ws-btn--primary:hover { box-shadow: 0 2px 4px rgba(20,40,64,0.10), 0 12px 28px rgba(20,40,64,0.12); transform: translateY(-1px); }
.ws-btn svg { transition: transform var(--t-base) var(--ease); }
.ws-btn:hover svg { transform: translateX(3px); }
.ws-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.ws-btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.ws-btn--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

.ws-btn--primary-on-dark { background: #fff; color: var(--blue-dark); border-color: #fff; }
.ws-btn--primary-on-dark:hover { background: var(--offwhite); border-color: var(--offwhite); }

.ws-btn--secondary { background: transparent; color: var(--blue); border-color: var(--blue); }
.ws-btn--secondary:hover { background: var(--blue); color: #fff; }

.ws-btn--secondary-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.ws-btn--secondary-on-dark:hover { background: rgba(255,255,255,0.08); border-color: #fff; }

.ws-btn--link {
  padding: 10px 0;
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
  border-radius: 0;
}
.ws-btn--link:hover { color: var(--blue-dark); border-bottom-color: var(--blue-dark); }

.ws-btn--sm { padding: 9px 18px; font-size: 13px; }
.ws-btn--lg { padding: 18px 32px; font-size: 17px; }

/* ─── Tags ───────────────────────────────────────────────────── */

.ws-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  border-radius: var(--r-xs);
  letter-spacing: -0.005em;
}
.ws-tag--orange { background: var(--orange-soft); color: var(--orange); }
.site-nav .ws-tag--orange {
  background: var(--orange);
  color: #fff;
  padding: 6px 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(243, 112, 33, 0.25);
}
.site-nav .ws-tag--orange:hover { background: #D55E14; }

/* ─── Nav — Investeerders portaal login-knop ───────────────── */
.site-nav .nav-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--r-xs);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.site-nav .nav-login:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.55);
}
.site-nav .nav-login svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke: currentColor;
}
@media (max-width: 1100px) {
  .site-nav .nav-login {
    justify-content: center;
    margin-top: var(--s-3);
    padding: 12px 16px;
    font-size: 14px;
  }
  .site-nav .nav-login svg { width: 14px; height: 14px; }
}

/* ─── Nav — taalschakelaar NL | EN ─────────────────────────── */
.site-nav .nav-lang {
  display: inline-flex;
  align-items: stretch;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.site-nav .nav-lang > a,
.site-nav .nav-lang > span {
  display: inline-flex;
  align-items: center;
  padding: 7px 9px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  border: 0;
  border-bottom: 0;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.site-nav .nav-lang > a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-bottom: 0;
}
.site-nav .nav-lang > .nav-lang__nu {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  cursor: default;
}
@media (max-width: 1100px) {
  .site-nav .nav-lang { align-self: flex-start; margin-top: var(--s-3); }
  .site-nav .nav-lang > a,
  .site-nav .nav-lang > span { padding: 10px 14px; font-size: 13px; }
  .site-nav .nav-lang > a { border-bottom: 0; }
}
.ws-tag--neutral { background: var(--rule-soft); color: var(--ink-soft); }
.ws-tag--dot::before { content:''; width:6px; height:6px; background: currentColor; border-radius: 50%; }
.ws-tag--lg { font-size: 13px; padding: 6px 12px; }

/* ─── Cards ──────────────────────────────────────────────────── */

.ws-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-6);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  text-decoration: none;
  color: inherit;
  display: block;
  box-shadow: 0 1px 2px rgba(20,40,64,0.04), 0 4px 16px rgba(20,40,64,0.04);
}
.ws-card--hover:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(20,40,64,0.06), 0 12px 28px rgba(20,40,64,0.08);
}
.ws-card--hover:hover .ws-card-cta { color: var(--blue-dark); }

/* ─── Blue invest-card variant ─────────────────────────────── */
.ws-card--invest {
  background: linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: 0 2px 4px rgba(20,40,64,0.12), 0 12px 28px rgba(20,40,64,0.18);
}
.ws-card--invest .ws-card-eyebrow {
  color: var(--orange);
}
.ws-card--invest .ws-card-title {
  color: #fff;
  font-size: 26px;
  margin-bottom: var(--s-4);
}
.ws-card--invest .ws-card-body {
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
}
.ws-card--invest .ws-card-body strong {
  color: #fff;
  font-weight: 600;
}
.ws-card--invest .ws-card-cta {
  color: #fff;
  padding-top: var(--s-3);
  margin-top: var(--s-2);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Prominent rendement-badge op invest-cards — primary-on-dark stijl (wit, 6px radius) */
.ws-card--invest .ws-card-rate {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  align-self: flex-start;
  margin: var(--s-2) 0 var(--s-5);
  padding: var(--s-3) var(--s-5);
  background: #fff;
  color: var(--blue-dark, #142840);
  border: 1px solid #fff;
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(20,40,64,0.08), 0 6px 16px rgba(20,40,64,0.18);
  line-height: 1;
  white-space: nowrap;
}
.ws-card--invest .ws-card-rate__num {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  color: var(--blue-dark, #142840);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'lnum' on, 'tnum' on;
}
.ws-card--invest .ws-card-rate__unit {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue, #1F3A5F);
}
.ws-card--invest .ws-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.ws-card--invest .ws-card-meta__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-card--invest .ws-card-meta__k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}
.ws-card--invest .ws-card-meta__v {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  line-height: 1.35;
}

.ws-card--invest.ws-card--hover:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(20,40,64,0.18), 0 20px 40px rgba(20,40,64,0.28);
}
.ws-card--invest.ws-card--hover:hover .ws-card-cta {
  color: #fff;
}
.ws-card-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.ws-card-title {
  font-weight: 600;
  font-size: 20px;
  color: var(--blue-dark);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}
.ws-card-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
}
.ws-card-cta {
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ws-card-cta::after { content: '→'; transition: transform var(--t-base) var(--ease); }
.ws-card--hover:hover .ws-card-cta::after { transform: translateX(3px); }

/* Teaser-bullets in project-cards */
.ws-card-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4) 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.ws-card-bullets li {
  position: relative;
  padding-left: 16px;
}
.ws-card-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* Cards-grid */
.cards-grid { display: grid; gap: var(--s-4); }
.cards-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 880px) {
  .cards-grid--3, .cards-grid--2 { grid-template-columns: 1fr; }
}

/* ─── Data-paar ──────────────────────────────────────────────── */

.ws-pair {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--s-4);
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}
.ws-pair:last-of-type { border-bottom: 1px solid var(--rule); }
.ws-pair .k { color: var(--muted); }
.ws-pair .v {
  font-weight: 500;
  font-size: 15px;
  color: var(--blue-dark);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ws-pair--uitleg { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); }
.ws-pair--uitleg .k { white-space: nowrap; }
.ws-pair--uitleg .v { text-align: left; }
/* Kaart als tabel: labels in een vaste kolom, waarden links op één lijn (Zekerheden, Bodi 4 nov 2026) */
.ws-card--tabel .ws-pair { grid-template-columns: 6.5em minmax(0, 1fr); }
.ws-card--tabel .ws-pair .v { text-align: left; }

/* ─── Product-vergelijkingstabel ─────────────────────────────── */

.product-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-5);
  font-size: 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,40,64,0.04), 0 4px 16px rgba(20,40,64,0.04);
}
.product-table th,
.product-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
.product-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--offwhite);
}
.product-table td:first-child,
.product-table th:first-child { font-weight: 500; color: var(--ink); }
.product-table tr:last-child td { border-bottom: 0; }
.product-table .num { font-variant-numeric: tabular-nums; color: var(--blue-dark); font-weight: 500; }
@media (max-width: 700px) {
  .product-table { font-size: 13px; }
  .product-table th, .product-table td { padding: var(--s-2) var(--s-3); }
}

/* ─── Vertrouwens-grid (zes elementen) ───────────────────────── */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.trust-grid__item {
  background: var(--paper);
  padding: var(--s-7) var(--s-6);
  transition: background var(--t-base) var(--ease);
}
.trust-grid__item:hover {
  background: var(--offwhite);
}
.trust-grid__num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--orange);
  letter-spacing: 0.1em;
  margin-bottom: var(--s-3);
}
.trust-grid__title {
  font-weight: 600;
  font-size: 17px;
  color: var(--blue-dark);
  letter-spacing: -0.015em;
  margin-bottom: var(--s-2);
}
.trust-grid__body {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.trust-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid--4 { grid-template-columns: 1fr; }
}

/* Process-stepper — gebruikt trust-grid + extra accent op het nummer */
.trust-grid--steps .trust-grid__num {
  font-size: 28px;
  font-family: var(--font);
  font-weight: 500;
  color: var(--blue-dark);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--s-4);
}

/* ─── Eigenaars-sectie (homepage) ────────────────────────────── */

.owners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.owners__visual {
  aspect-ratio: 4 / 3;
  background: var(--blue-dark) center / cover no-repeat;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: 0 2px 4px rgba(20,40,64,0.06), 0 12px 32px rgba(20,40,64,0.10);
}
.owners__visual::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 4px;
  background: var(--orange);
  z-index: 1;
}
.owners__visual img,
.owners__visual video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.owners__body { max-width: 50ch; }
.owners__belief {
  margin: var(--s-4) 0 var(--s-5);
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--orange);
}
.owners__belief p {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--blue-dark);
}
.owners__belief cite {
  display: block;
  margin-top: var(--s-2);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.owners__names {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5);
  font-size: 14px;
  color: var(--ink-soft);
}
.owners__names strong {
  color: var(--blue-dark);
  font-weight: 600;
  display: block;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.owners__names span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
@media (max-width: 880px) {
  .owners { grid-template-columns: 1fr; }
}

/* ─── LTV-grafiek (productpagina's) ─────────────────────────── */

.ltv-chart {
  position: relative;
  margin: var(--s-6) 0 var(--s-4);
}
.ltv-chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.ltv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  margin-bottom: var(--s-3);
}
.ltv-legend__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
.ltv-legend__marker { width: 16px; height: 16px; flex-shrink: 0; }
.ltv-legend__marker--line { height: 2px; background: var(--blue); }
.ltv-legend__marker--stabiel { background: var(--blue-soft); border: 1px solid #C5D3E4; }
.ltv-legend__marker--groei {
  background: rgba(31, 58, 95, 0.18);
  border: 1px solid rgba(31, 58, 95, 0.35);
}
.ltv-caption {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 65ch;
  margin-bottom: var(--s-5);
}
.ltv-caption strong { color: var(--ink-soft); font-weight: 500; }

.assumptions {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
}
.assumptions__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.assumptions ul { list-style: none; padding: 0; margin: 0; }
.assumptions li {
  font-size: 13px;
  color: var(--ink-soft);
  padding: 4px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  font-variant-numeric: tabular-nums;
}
.assumptions li .lbl { color: var(--muted); }
.assumptions li .val { color: var(--blue-dark); font-weight: 500; }

/* ─── Tijdlijn (Ontwikkel-pagina) ─────────────────────────── */

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: var(--s-6) 0 var(--s-5);
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--rule);
  z-index: 0;
}
.timeline__step {
  position: relative;
  z-index: 1;
  padding-right: var(--s-4);
}
.timeline__dot {
  width: 28px;
  height: 28px;
  border: 2px solid var(--blue);
  background: var(--paper);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: var(--s-4);
  font-variant-numeric: tabular-nums;
}
.timeline__step--accent .timeline__dot {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.timeline__phase {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.timeline__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-dark);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  line-height: 1.3;
}
.timeline__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.timeline-foot {
  font-size: 13px;
  color: var(--ink-soft);
  padding: var(--s-4) var(--s-5);
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
}
@media (max-width: 880px) {
  .timeline { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .timeline::before { display: none; }
}
@media (max-width: 560px) {
  .timeline { grid-template-columns: 1fr; }
}

/* ─── Project-card (uitgelicht) ──────────────────────────────── */

.project-feature {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(20,40,64,0.05), 0 12px 32px rgba(20,40,64,0.06);
}
.project-feature__media {
  background: var(--blue-dark);
  min-height: 360px;
  position: relative;
  overflow: hidden;
}
.project-feature__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(31,58,95,0.15) 0%, rgba(20,40,64,0.55) 100%);
}
.project-feature__media img,
.project-feature__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.project-feature__body { padding: var(--s-7); display: flex; flex-direction: column; justify-content: center; }
.project-feature__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-3);
}
.project-feature__title {
  font-weight: 500; font-size: clamp(28px, 3vw, 36px); line-height: 1.1;
  letter-spacing: -0.025em; color: var(--blue-dark);
  margin-bottom: var(--s-4);
}
.project-feature__lede {
  font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-bottom: var(--s-5);
  max-width: 50ch;
}
@media (max-width: 880px) {
  .project-feature { grid-template-columns: 1fr; }
  .project-feature__media { min-height: 240px; }
  .project-feature__body { padding: var(--s-6); }
}

/* ─── Project hero ───────────────────────────────────────────── */

.project-hero {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 62vw, 640px);
  background: var(--blue-dark);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
  padding: clamp(64px, 10vw, 120px) 0 clamp(40px, 6vw, 64px);
}
.project-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}
.project-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,40,64,0.35) 0%, rgba(20,40,64,0.10) 30%, rgba(20,40,64,0.78) 100%);
  pointer-events: none;
  z-index: 1;
}
.project-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.project-hero .crumbs,
.project-hero .crumbs a {
  color: rgba(255,255,255,0.78);
}
.project-hero .crumbs a:hover { color: #fff; }
.project-hero__eyebrow {
  display: inline-flex;
  margin-bottom: var(--s-4);
}
.project-hero__title {
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 46px); /* gelijk aan Organisatie, besluit 23 okt 2026 */
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 var(--s-4);
}
.project-hero__lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  max-width: 64ch;
  margin: 0;
}

/* ─── Card met cover-afbeelding ──────────────────────────────── */

.ws-card--cover {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ws-card--cover .ws-card__cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--blue-dark);
  overflow: hidden;
  position: relative;
}
.ws-card--cover .ws-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--t-slow) var(--ease);
}
.ws-card--cover.ws-card--hover:hover .ws-card__cover img {
  transform: scale(1.04);
}
.ws-card--cover .ws-card__body {
  padding: var(--s-5) var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ─── Family-story (founder quote + familie samengevoegd) ────── */
.family-story {
  background: var(--paper);
  padding-bottom: clamp(64px, 8vw, 120px);
  position: relative;
}
.family-story__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 620px;
  overflow: hidden;
  background: var(--blue-dark);
}
.family-story__hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.95);
}
.family-story__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(20,40,64,0.35) 100%);
  pointer-events: none;
}
.family-story__quote-card {
  position: absolute;
  bottom: -60px;
  left: max(24px, calc((100% - 1240px) / 2 + 24px));
  right: auto;
  max-width: 520px;
  margin: 0;
  padding: 24px 26px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--orange);
  box-shadow: 0 12px 40px rgba(20, 40, 64, 0.18),
              0 3px 12px rgba(20, 40, 64, 0.08);
  display: flex;
  gap: 18px;
  align-items: center;
  z-index: 2;
}
.family-story__quote-photo {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-soft);
  box-shadow: 0 2px 8px rgba(20, 40, 64, 0.12);
}
.family-story__quote-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.family-story__quote-body p {
  margin: 0 0 8px;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--blue-dark);
  letter-spacing: -0.015em;
  font-style: italic;
  text-wrap: balance;
}
.family-story__quote-body figcaption strong {
  display: inline;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--blue-dark);
}
.family-story__quote-body figcaption strong::after {
  content: ' · ';
  color: var(--muted);
}
.family-story__quote-body figcaption span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.family-story__body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(100px, 12vw, 140px);
}
.family-story__intro { max-width: 44ch; }
.family-story__portraits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding-left: clamp(0px, 3vw, 40px);
  border-left: 1px solid var(--rule);
  padding-top: 4px;
}
.family-story__portrait {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}
.family-story__portrait-photo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-soft);
  box-shadow: 0 2px 8px rgba(20, 40, 64, 0.10);
}
.family-story__portrait-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.family-story__portrait figcaption strong {
  color: var(--blue-dark);
  font-weight: 600;
  display: block;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.family-story__portrait figcaption span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

@media (max-width: 880px) {
  .family-story__hero { aspect-ratio: 4 / 3; }
  .family-story__quote-card {
    position: relative;
    bottom: auto;
    left: auto;
    max-width: none;
    margin: -40px var(--gutter, 24px) 0;
    box-shadow: 0 8px 28px rgba(20, 40, 64, 0.16);
  }
  .family-story__body {
    grid-template-columns: 1fr;
    margin-top: var(--s-6);
    gap: var(--s-6);
  }
  .family-story__portraits {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--rule);
    padding-top: var(--s-5);
  }
}

/* ─── Family-merged (compact founder quote + familie in één blok) ── */
.family-merged__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.family-merged__visual {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--blue-dark);
  position: relative;
  box-shadow: 0 2px 6px rgba(20,40,64,0.08), 0 14px 40px rgba(20,40,64,0.12);
}
.family-merged__visual::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 4px;
  background: var(--orange);
  z-index: 1;
}
.family-merged__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.family-merged__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.family-merged__quote-card {
  margin: 0;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-sm);
  box-shadow: 0 2px 8px rgba(20, 40, 64, 0.06);
  display: flex;
  gap: 16px;
  align-items: center;
}
.family-merged__quote-photo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-soft);
  box-shadow: 0 2px 6px rgba(20, 40, 64, 0.10);
}
.family-merged__quote-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.family-merged__quote-text p {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--blue-dark);
  letter-spacing: -0.01em;
  font-style: italic;
  text-wrap: balance;
}
.family-merged__quote-text figcaption strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-dark);
  letter-spacing: -0.005em;
}
.family-merged__quote-text figcaption strong::after {
  content: ' · ';
  color: var(--muted);
}
.family-merged__quote-text figcaption span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.family-merged__intro { max-width: 42ch; }
.family-merged__intro .section-lede { margin-bottom: 0; }

.family-merged__portraits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.family-merged__portrait {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.family-merged__portrait-photo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-soft);
  box-shadow: 0 2px 6px rgba(20, 40, 64, 0.10);
}
.family-merged__portrait-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.family-merged__portrait figcaption strong {
  color: var(--blue-dark);
  font-weight: 600;
  display: block;
  font-size: 13px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.family-merged__portrait figcaption span {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.family-merged__cta { margin-top: var(--s-2); }

@media (max-width: 880px) {
  .family-merged__grid { grid-template-columns: 1fr; }
  .family-merged__visual { aspect-ratio: 4 / 3; }
}

/* ─── Founder quote (Pieter's overtuiging) ─────────────────── */
.founder-quote {
  background: var(--paper);
  padding: clamp(64px, 8vw, 120px) 0;
  position: relative;
}
.founder-quote::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 64px; height: 1px;
  background: var(--rule);
  transform: translateX(-50%);
}
.founder-quote__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}
.founder-quote__photo {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-soft);
  box-shadow: 0 4px 16px rgba(20, 40, 64, 0.12);
  border: 3px solid #fff;
  position: relative;
}
.founder-quote__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founder-quote__body {
  margin: 0;
  padding: 0;
  position: relative;
}
.founder-quote__body::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--orange);
  margin: 0 auto var(--s-4);
}
.founder-quote__body p {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
  text-wrap: balance;
  font-style: italic;
}
.founder-quote__cite {
  display: block;
  margin-top: var(--s-2);
}
.founder-quote__cite strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--blue-dark);
  margin-bottom: 4px;
}
.founder-quote__cite span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── Project carousel (homepage) ────────────────────────────── */
.project-carousel-section { overflow: hidden; }

.project-carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}
.project-carousel__head-text { max-width: 60ch; }
.project-carousel__head-text .section-lede { margin-bottom: 0; }

.project-carousel__nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.project-carousel__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--blue-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.project-carousel__btn:hover:not(:disabled) {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
}
.project-carousel__btn:active:not(:disabled) { transform: scale(0.96); }
.project-carousel__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.project-carousel {
  position: relative;
  margin: 0 calc(var(--gutter, 24px) * -1);
}
.project-carousel__track {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--gutter);
  scroll-behavior: smooth;
  padding: 8px var(--s-5) 24px var(--gutter);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.project-carousel__track::-webkit-scrollbar { display: none; }
.project-carousel__card {
  flex: 0 0 calc((100% - var(--s-5) * 2) / 3);
  scroll-snap-align: start;
  min-width: 0;
}

.project-carousel__foot {
  text-align: center;
  margin-top: var(--s-6);
}

@media (max-width: 1024px) {
  .project-carousel__card {
    flex: 0 0 calc((100% - var(--s-5)) / 2);
  }
}
@media (max-width: 720px) {
  .project-carousel__head { flex-direction: column; align-items: flex-start; }
  .project-carousel__card {
    flex: 0 0 100%;
  }
}

/* ─── Project gallery ────────────────────────────────────────── */

.project-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.project-gallery__item {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--blue-dark);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.project-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--t-slow) var(--ease);
}
.project-gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20,40,64,0) 60%, rgba(20,40,64,0.18) 100%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  pointer-events: none;
}
.project-gallery__item:hover img {
  transform: scale(1.04);
}
.project-gallery__item:hover::after { opacity: 1; }
.project-gallery__item--wide {
  grid-column: span 1;
  aspect-ratio: 4 / 3;
}
@media (max-width: 880px) {
  .project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
}
@media (max-width: 520px) {
  .project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── Lightbox ───────────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 16, 28, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: clamp(16px, 4vw, 48px);
  -webkit-tap-highlight-color: transparent;
}
.lightbox.is-open { display: flex; }
.lightbox__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  border-radius: var(--r-pil);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  z-index: 2;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255,255,255,0.18);
}
.lightbox__close {
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 18px;
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__nav--prev { left: clamp(12px, 2vw, 24px); }
.lightbox__nav--next { right: clamp(12px, 2vw, 24px); }
.lightbox__counter {
  position: absolute;
  bottom: clamp(12px, 2vw, 24px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

/* ─── Footer ─────────────────────────────────────────────────── */

.site-footer {
  background: var(--blue-dark);
  color: rgba(255, 255, 255, 0.72);
  padding: var(--s-9) 0 var(--s-6);
  font-size: 14px;
  line-height: 1.6;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-6);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--s-4);
}
.site-footer__brand { max-width: 36ch; }
.site-footer__brand img { width: 72px; height: 72px; margin-bottom: var(--s-4); }
.site-footer__brand p { color: rgba(255, 255, 255, 0.62); font-size: 13px; }
.site-footer ul { list-style: none; display: grid; gap: var(--s-2); }
.site-footer a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--t-fast) var(--ease);
}
.site-footer a:hover { color: #fff; }
.site-footer__bottom {
  padding-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}
.site-footer__bottom small { font-size: 12px; }
@media (max-width: 880px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}

/* ─── Partner-marquee ─────────────────────────────────────── */

.partners {
  padding: var(--s-9) 0 var(--s-9);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.partners__lede {
  text-align: center;
  margin-bottom: var(--s-7);
}
.partners__lede .section-eyebrow { margin-bottom: var(--s-3); }
.partners__lede p {
  font-size: 15px;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto;
}
.partners__track-wrap {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.partners__track {
  display: flex;
  align-items: center;
  gap: clamp(48px, 8vw, 96px);
  width: max-content;
  animation: partners-scroll 36s linear infinite;
}
.partners__track-wrap:hover .partners__track { animation-play-state: paused; }
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-16.667%); }
}
.partner-logo {
  flex-shrink: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-5);
  text-decoration: none;
}
.partner-logo img {
  width: auto;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-base) var(--ease);
}
.partner-logo:hover img {
  opacity: 1;
  transform: scale(1.04);
}
/* Per-logo dimensies — verschillende aspect ratios netjes laten landen */
.partner-logo--wbs img  { max-height: 64px; max-width: 110px; }
.partner-logo--vw  img  { max-height: 38px; max-width: 260px; }
.partner-logo--eve img  { max-height: 78px; max-width: 70px; }
.partner-logo--akor img { max-height: 54px; max-width: 150px; }
.partner-logo--bloqhouse img { max-height: 44px; max-width: 160px; }
.partner-logo--fiz       img { max-height: 56px; max-width: 56px; }
.partner-logo--ing       img { max-height: 48px; max-width: 150px; }
/* De SVG van B+O is maar 71x33 groot; zonder expliciete hoogte blijft hij op
   die intrinsieke maat staan en valt hij weg tussen de rest. */
.partner-logo--beno      img { height: 44px; width: auto; max-width: 130px; }
.partner-logo--cfb       img { max-height: 42px; max-width: 140px; }
.partner-logo--opp       img { height: 46px; width: auto; max-width: 120px; }

/* Inline SVG (gebruikt voor VolkerWessels — workaround voor SVG-in-img issues) */
.partner-logo .partner-svg {
  display: block;
  height: 38px;
  width: 260px;
  opacity: 0.85;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-base) var(--ease);
}
.partner-logo:hover .partner-svg {
  opacity: 1;
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .partners__track { animation: none; }
}

/* ─── Testimonials (PLATZHALTER, niet voor publicatie) ─────── */

.testimonials {
  position: relative;
}
.testimonials__warning {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: #B33A1A;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--r-sm);
  z-index: 2;
  box-shadow: 0 4px 12px rgba(179, 58, 26, 0.3);
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.testimonial {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-6);
  position: relative;
  box-shadow: 0 1px 2px rgba(20,40,64,0.04), 0 4px 16px rgba(20,40,64,0.04);
  overflow: hidden;
}
.testimonial[data-placeholder]::after {
  content: 'VOORBEELD';
  position: absolute;
  top: 12px;
  right: -36px;
  background: rgba(179, 58, 26, 0.92);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 4px 40px;
  transform: rotate(35deg);
  box-shadow: 0 2px 8px rgba(179, 58, 26, 0.25);
}
.testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.testimonial__person {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.testimonial__person-text { display: flex; flex-direction: column; }
.testimonial::before {
  content: '"';
  position: absolute;
  top: 4px;
  left: 16px;
  font-family: Georgia, serif;
  font-size: 56px;
  color: var(--orange);
  opacity: 0.35;
  line-height: 1;
}
.testimonial__quote {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: var(--s-5) 0 var(--s-5);
  position: relative;
  z-index: 1;
}
.testimonial__attribution {
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.testimonial__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-dark);
  letter-spacing: -0.01em;
}
.testimonial__role {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
@media (max-width: 880px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* ─── FAQ ────────────────────────────────────────────────────── */

.faq-group + .faq-group { margin-top: var(--s-8); }
.faq-group__title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 var(--s-5);
  letter-spacing: -0.005em;
}
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-item[open] { background: var(--paper); }
.faq-item > summary {
  cursor: pointer;
  list-style: none;
  display: block;
  padding: var(--s-5) 48px var(--s-5) var(--s-4);
  position: relative;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.4;
  transition: color var(--t-base) var(--ease);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:hover { color: var(--blue); }
.faq-item > summary::after {
  content: "";
  position: absolute;
  right: var(--s-4);
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.faq-item[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
  border-color: var(--blue);
}
.faq-item > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}
.faq-item__body {
  padding: 0 var(--s-4) var(--s-6);
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 68ch;
}
.faq-item__body p + p { margin-top: var(--s-4); }
.faq-item__body a { color: var(--blue); }

/* ─── Disclaimer-strip onderaan pagina's ─────────────────────── */

.disclaimer-strip {
  background: var(--offwhite);
  border-top: 1px solid var(--rule);
  padding: var(--s-6) 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.disclaimer-strip strong { color: var(--ink-soft); font-weight: 600; }

/* ─── Breadcrumb ─────────────────────────────────────────────── */

.crumbs {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--s-5);
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }
.crumbs span { margin: 0 8px; color: var(--rule); }

/* ─── Utility ────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue-dark);
  color: #fff;
  padding: 8px 14px;
  font-size: 14px;
}
.skip-link:focus { left: 8px; top: 8px; z-index: 100; }

/* ─── Lead-formulier · "Plan een kennismaking" (inline, geen pop-up) ─── */
.ws-form { display: grid; gap: var(--s-4); }
.ws-field { display: grid; gap: 6px; }
.ws-label { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.ws-input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 12px 14px;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.ws-input::placeholder { color: var(--muted); }
.ws-input:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,58,95,0.12); }
.ws-input--select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%231F3A5F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.ws-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ws-form__alt { font-size: 13px; color: var(--muted); margin: 0; }
.ws-form__alt a { color: var(--blue); }
.ws-form__status { font-size: 14px; line-height: 1.5; margin: 0; }
.ws-form__status--ok  { color: #2F7D5C; }
.ws-form__status--err { color: #B23A3A; }

/* ─── Productpagina's: cijferstrook, beeldband, meeschuivende zijkaart ── */
.facts-band {
  background: var(--blue-dark);
  padding: clamp(28px, 4vw, 44px) 0;
}
.facts-band .facts-strip { margin-bottom: 0; }

.prod-aside { position: sticky; top: 92px; }
@media (max-width: 880px) {
  .prod-aside { position: static; }
}

.photo-band {
  position: relative;
  margin: 0;
}
.photo-band__img {
  display: block;
  width: 100%;
  height: clamp(260px, 34vw, 460px);
  object-fit: cover;
}
.photo-band__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(64px, 9vw, 120px) 0 clamp(24px, 3vw, 38px);
  background: linear-gradient(to top,
    rgba(10, 22, 38, .94) 0%,
    rgba(10, 22, 38, .80) 45%,
    rgba(10, 22, 38, 0) 100%);
  color: #fff;
}
.photo-band__caption .k {
  display: block;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); font-weight: 600; margin-bottom: 6px;
}
.photo-band__caption p {
  margin: 0; max-width: 80ch; font-size: 16px; line-height: 1.55;
  color: rgba(255,255,255,.9);
}
.photo-band__caption a { color: #fff; text-underline-offset: 3px; }

/* Verdeling van lasten en baten, op donkere ondergrond */
.split-list { display: grid; gap: 1px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-md); overflow: hidden; }
.split-list__row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s-4); align-items: baseline;
  padding: 18px clamp(18px, 2.4vw, 28px); background: var(--blue-dark);
}
.split-list__row .k { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.45; }
.split-list__row .v { color: #fff; font-weight: 500; font-size: 15px; text-align: right; }
.split-list__row .v em { font-style: normal; color: var(--orange); }
@media (max-width: 620px) {
  .split-list__row { grid-template-columns: 1fr; gap: 4px; }
  .split-list__row .v { text-align: left; }
}

/* Sterkere sluier voor hero's met een lichte foto (lucht, witte gevels),
   zodat de kop en de lopende tekst leesbaar blijven. */
.project-hero--legible .project-hero__veil {
  background:
    linear-gradient(180deg, rgba(16,32,52,0.52) 0%, rgba(16,32,52,0.28) 26%, rgba(16,32,52,0.92) 100%),
    linear-gradient(90deg, rgba(16,32,52,0.72) 0%, rgba(16,32,52,0.34) 46%, rgba(16,32,52,0.06) 100%);
}

/* Sfeerhero met verloop naar het diepblauw, zoals de homepage-hero.
   Het beeld dooft onderaan volledig uit in var(--blue-dark), zodat de
   cijferstrook eronder er naadloos op aansluit. */
.project-hero--fade .project-hero__veil {
  background:
    linear-gradient(to right,
      rgba(20, 40, 64, 0.82) 0%,
      rgba(20, 40, 64, 0.58) 30%,
      rgba(20, 40, 64, 0.28) 60%,
      rgba(20, 40, 64, 0.18) 100%),
    linear-gradient(to bottom,
      rgba(20, 40, 64, 0.42) 0%,
      rgba(20, 40, 64, 0.05) 24%,
      rgba(20, 40, 64, 0.05) 52%,
      rgba(20, 40, 64, 0.42) 76%,
      rgba(20, 40, 64, 0.88) 92%,
      var(--blue-dark) 100%);
}

/* Kostenregel onder aan de productpagina: bewust apart van de feiten. */
.kosten-note {
  border-top: 1px solid var(--rule-soft);
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: baseline;
}
.kosten-note__k {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); font-weight: 600; flex: 0 0 auto;
}
.kosten-note__v {
  margin: 0; flex: 1 1 420px; max-width: 68ch;
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}
.kosten-note__v strong { color: var(--blue-dark); font-weight: 600; }

/* ─── Uitklapmenu in de hoofdnavigatie ─────────────────────────── */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  min-width: 232px;
  background: var(--blue-dark);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgba(10, 22, 38, 0.38);
  padding: 8px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              visibility var(--t-fast) var(--ease);
}
.nav-group:hover .nav-group__panel,
.nav-group.is-open .nav-group__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-group__panel a {
  display: block;
  padding: 10px 12px;
  border-bottom: 0;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}
.nav-group__panel a:hover,
.nav-group__panel a:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-group__panel a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.06); }
/* onzichtbare brug, zodat het paneel niet dichtklapt tussen knop en menu */
.nav-group::after {
  content: '';
  position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}

@media (max-width: 1100px) {
  .nav-group { display: block; }
  .nav-group::after { content: none; }
  .nav-group__panel {
    position: static; min-width: 0;
    background: none; border: 0; box-shadow: none;
    padding: 0 0 var(--s-3) var(--s-4);
    opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; transition: none;
  }
  .nav-group__kop::after { display: none; }
  .nav-group__panel a {
    padding: var(--s-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    white-space: normal;
  }
}

/* ─── Persoonlijk contactblok met portret ──────────────────────── */
.contact-person {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.contact-person__portrait {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--blue-dark);
  aspect-ratio: 3 / 4;
}
.contact-person__portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  display: block;
}
.contact-person__who {
  margin-top: var(--s-3);
  font-size: 13px;
  line-height: 1.45;
}
.contact-person__who strong { display: block; color: var(--blue-dark); font-weight: 600; }
.contact-person__who span { color: var(--muted); }
@media (max-width: 700px) {
  .contact-person { grid-template-columns: 1fr; }
  .contact-person__portrait { max-width: 180px; }
}

/* ─── Tellers die oplopen zodra ze in beeld komen ──────────────── */
.counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  overflow: hidden;
}
.counter { background: var(--blue-dark); padding: clamp(26px, 3.4vw, 40px); }
.counter__num {
  display: block;
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.counter__num sup {
  font-size: .42em; top: -.9em; margin-left: 2px; color: var(--orange); font-weight: 600;
}
.counter__k {
  display: block;
  margin-top: 12px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); font-weight: 600;
}
.counter__v { display: block; margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.68); line-height: 1.5; }
@media (max-width: 760px) { .counters { grid-template-columns: 1fr; } }

/* ─── Pipeline: projecten op schaal van hun omvang ─────────────── */
.pipeline { display: grid; gap: 10px; }
.pipeline__row {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 74px;
  gap: var(--s-4);
  align-items: center;
}
.pipeline__naam { font-size: 15px; font-weight: 500; color: var(--blue-dark); }
.pipeline__naam small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
.pipeline__balk { height: 12px; background: var(--rule-soft); border-radius: var(--r-sm); overflow: hidden; }
.pipeline__vul {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue) 0%, var(--orange) 140%);
  border-radius: var(--r-sm);
  transition: width 1100ms cubic-bezier(.22,.61,.36,1);
}
.pipeline__aantal { text-align: right; font-size: 15px; font-weight: 500; color: var(--blue-dark); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .pipeline__row { grid-template-columns: minmax(0,1fr) 60px; }
  .pipeline__balk { grid-column: 1 / -1; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .pipeline__vul { transition: none; }
}

/* Nog aan te leveren cijfer: zichtbaar leeg, niet stiekem verzonnen */
.counter__num--open { color: rgba(255,255,255,.34); font-size: clamp(30px,3.6vw,46px); }
.counter__todo {
  display: inline-block; margin-top: 10px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: #FFCE00; border: 1px solid rgba(255,206,0,.5);
  border-radius: var(--r-sm); padding: 3px 7px;
}
.counters--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* vier naast elkaar: het cijfer iets kleiner en nooit afgebroken; eenheid (mln) klein achter het getal */
.counters--vier .counter__num { font-size: clamp(36px, 4.1vw, 56px); white-space: nowrap; }
.counter__num small { font-size: .42em; font-weight: 500; letter-spacing: 0; margin-left: .18em; color: rgba(255,255,255,.75); }
@media (max-width: 1000px) { .counters--vier { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .counters--vier { grid-template-columns: 1fr; } }

/* "Over ons" is een menukop, geen pagina: zelfde uiterlijk als de links */
.nav-group__kop {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 8px 2px;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: color var(--t-fast) var(--ease);
}
.nav-group__kop:hover,
.nav-group:hover .nav-group__kop,
.nav-group:hover .nav-group__kop,
.nav-group.is-open .nav-group__kop { color: #fff; }

/* pijltje: maakt zichtbaar dat hier een menu onder zit */
.nav-group__kop { display: inline-flex; align-items: center; gap: 7px; }
.nav-group__kop::after {
  content: '';
  width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.55;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-group:hover .nav-group__kop::after,
.nav-group.is-open .nav-group__kop::after {
  transform: translateY(1px) rotate(-135deg);
  opacity: 1;
}
/* streep onder de open kop, zodat knop en paneel bij elkaar horen */
.nav-group:hover .nav-group__kop,
.nav-group.is-open .nav-group__kop { border-bottom-color: var(--orange); }
/* De kop van het menu waarin de huidige pagina staat, houdt de oranje streep */
.nav-group__kop.is-current { color: #fff; border-bottom-color: var(--orange); }
@media (max-width: 1100px) {
  .nav-group__kop {
    display: block; width: 100%; text-align: left;
    padding: var(--s-4) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  }
}
.crumbs__kop { color: rgba(255,255,255,.62); }

/* ─── Gestapelde balk: de pipeline als één geheel ──────────────── */
.stack { margin-top: var(--s-6); }
.stack__balk {
  display: flex;
  height: 46px;
  border-radius: var(--r-md);
  overflow: hidden;
}
/* Scheiding via een rand in plaats van gap: anders tellen de tussen-
   ruimtes bij de 100% op en valt het laatste segment buiten de balk. */
.stack__deel {
  position: relative;
  flex: 0 0 auto;
  width: 0;
  box-sizing: border-box;
  border-right: 3px solid var(--blue-dark);
  transition: width 1200ms cubic-bezier(.22,.61,.36,1);
  min-width: 4px;
}
.stack__deel:last-child { border-right: 0; }
.stack__deel span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.92);
  font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity 400ms 700ms var(--ease);
}
.stack__deel.is-vol span { opacity: 1; }
.stack__legenda {
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px var(--s-5);
}
.stack__item { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.stack__vlak { flex: 0 0 auto; width: 11px; height: 11px; border-radius: var(--r-sm); transform: translateY(1px); }
.stack__naam { color: #fff; }
.stack__naam small { display: block; color: rgba(255,255,255,.5); font-size: 12px; margin-top: 1px; }
.stack__n { margin-left: auto; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .stack__deel { transition: none; }
  .stack__deel span { transition: none; opacity: 1; }
}
@media (max-width: 620px) {
  .stack__balk { height: 34px; }
  .stack__deel span { display: none; }
}

/* ─── Ritme: kolommen en blokken laten verspringen ──────────────
   De tekst blijft links uitgelijnd (dat leest nu eenmaal het best),
   maar het blok zelf wisselt van kant. Zo krijgt het oog beweging
   zonder dat de leesbaarheid eronder lijdt. */
.two-col--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.two-col--flip > :first-child { order: 2; }
.two-col--flip > :last-child  { order: 1; }
@media (max-width: 880px) {
  .two-col--flip > :first-child,
  .two-col--flip > :last-child { order: 0; }
}

/* Losstaand tekstblok dat naar de rechterhelft schuift */
.blok--rechts { margin-left: auto; }
@media (max-width: 880px) { .blok--rechts { margin-left: 0; } }

/* ─── Plaatshouders ────────────────────────────────────────────
   Bewust lelijk en opvallend: dit moet nooit ongemerkt live gaan.
   Verwijderen kan in één klap, zie PLAATSHOUDERS.md. */
.plaatshouder {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: var(--ph-h, 280px);
  padding: clamp(24px, 3vw, 40px);
  border: 2px dashed rgba(243, 112, 33, .55);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(135deg,
      rgba(243,112,33,.05) 0 12px, transparent 12px 24px);
  color: var(--ink-soft);
}
.plaatshouder__tag {
  position: absolute; top: -11px; left: 16px;
  background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-sm);
}
.plaatshouder__wat { font-size: 18px; font-weight: 500; color: var(--blue-dark); }
.plaatshouder__hoe { font-size: 14px; line-height: 1.6; max-width: 62ch; }
.plaatshouder__spec {
  margin-top: 4px; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.section--blue .plaatshouder,
.facts-band .plaatshouder {
  border-color: rgba(255, 206, 0, .5);
  background: repeating-linear-gradient(135deg, rgba(255,206,0,.06) 0 12px, transparent 12px 24px);
  color: rgba(255,255,255,.72);
}
.section--blue .plaatshouder__wat,
.facts-band .plaatshouder__wat { color: #fff; }
.section--blue .plaatshouder__tag,
.facts-band .plaatshouder__tag { background: #FFCE00; color: var(--blue-dark); }

/* ─── Organogram ───────────────────────────────────────────────── */
.organo { display: grid; gap: var(--s-4); }
.organo__laag { display: grid; gap: 12px; justify-items: center; }
.organo__doos {
  background: var(--blue-dark); color: #fff;
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-md);
  padding: 16px 20px; text-align: center; min-width: 210px;
}
.organo__doos--top { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); }
.organo__doos--accent { border-color: var(--orange); }
.organo__naam { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.organo__rol { display: block; margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.4; }
.organo__rij { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; width: 100%; }
.organo__lijn { width: 1px; height: 22px; background: rgba(255,255,255,.28); justify-self: center; }
.organo__balk { height: 1px; background: rgba(255,255,255,.28); width: 66%; justify-self: center; }
.organo__voet { margin-top: var(--s-4); font-size: 13px; color: rgba(255,255,255,.6); max-width: 74ch; line-height: 1.6; }
.organo__voet strong { color: #fff; font-weight: 600; }
@media (max-width: 700px) {
  .organo__rij { grid-template-columns: 1fr; }
  .organo__balk { display: none; }
}

/* ─── Groeigrafiek ─────────────────────────────────────────────── */
.groei { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; }
.groei__as { display: flex; flex-direction: column; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,.45); text-align: right; padding-bottom: 30px;
  font-variant-numeric: tabular-nums; }
.groei__vlak { position: relative; }
.groei__staven { display: flex; align-items: flex-end; gap: clamp(4px, 1vw, 12px); height: 260px;
  border-bottom: 1px solid rgba(255,255,255,.18); }
.groei__kolom { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.groei__staaf {
  width: 100%; height: 0; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--orange);
  transition: height 900ms cubic-bezier(.22,.61,.36,1);
}
.groei__staaf--gepland { background: repeating-linear-gradient(135deg,
    rgba(243,112,33,.85) 0 6px, rgba(243,112,33,.45) 6px 12px); }
.groei__staaf--leeg { background: rgba(255,255,255,.10); border: 1px dashed rgba(255,255,255,.3); }
.groei__jaar { margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.55); text-align: center;
  font-variant-numeric: tabular-nums; }
.groei__n { font-size: 12px; color: #fff; text-align: center; margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.groei__legenda { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-5); font-size: 13px; color: rgba(255,255,255,.7); }
.groei__legenda span { display: inline-flex; align-items: center; gap: 8px; }
.groei__vlak-i { width: 12px; height: 12px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .groei__staaf { transition: none; } }

/* ─── Mobiel menu — schuifpaneel met uitklapbare rubrieken ─────
   Het paneel stond absoluut gepositioneerd binnen de header. Op de homepage
   is die header `fixed`, dus een lange lijst liep buiten beeld door zonder
   dat je erbij kon: scrollen deed niets. Nu is het paneel zelf een vast,
   schuifbaar vlak van header tot onderkant scherm, en klappen de rubrieken
   dicht zodat de lijst kort blijft. */
@media (max-width: 1100px) {
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
    box-shadow: none;
  }
  /* Zonder dit persen de flex-kinderen zichzelf samen zodra de lijst hoger is
     dan het scherm — de rubrieken knippen dan hun eigen links weg. */
  .site-nav > * { flex: 0 0 auto; }

  /* Rubriek staat dicht; de kop schakelt hem open (JS zet .is-open) */
  .nav-group__panel {
    max-height: 0;
    overflow: hidden;
    padding: 0 0 0 var(--s-4);
    transition: max-height var(--t-slow) var(--ease);
  }
  .nav-group.is-open .nav-group__panel {
    max-height: 440px;
    padding-bottom: var(--s-3);
  }

  /* Pijltje rechts in de kop, zodat zichtbaar is dat hier iets onder zit */
  .nav-group__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-group__kop::after {
    display: block;
    content: '';
    width: 7px;
    height: 7px;
    flex: none;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.7;
    transition: transform var(--t-base) var(--ease);
  }
  .nav-group.is-open .nav-group__kop { color: rgba(255, 255, 255, 0.9); }
  .nav-group.is-open .nav-group__kop::after {
    transform: translateY(1px) rotate(-135deg);
    opacity: 1;
  }
}

/* Zolang het menu openstaat krijgt de transparante home-header dezelfde
   donkere ondergrond als het paneel, anders zweeft het logo los over de video. */
@media (max-width: 1100px) {
  .site-header--over-hero:has(.site-nav.is-open) {
    background: var(--blue-dark);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  /* Het contact-widgetje ligt anders over het menu heen. */
  body:has(.site-nav.is-open) .contact-widget {
    opacity: 0;
    pointer-events: none;
  }
}

/* ─── Uitklapmenu — afwerking op desktop ───────────────────────
   Het paneel was een vlakke doos met platte links. Nu: een puntje dat naar de
   kop wijst, iets meer diepte, en per regel een oranje markering plus pijl die
   meeschuift bij hover — dezelfde taal als de knoppen elders op de site. */
@media (min-width: 1101px) {
  .nav-group__panel {
    min-width: 264px;
    padding: 10px;
    border-radius: var(--r-md);
    border-color: rgba(255, 255, 255, 0.10);
    background:
      linear-gradient(180deg, #1B3454 0%, var(--blue-dark) 100%);
    box-shadow:
      0 20px 44px rgba(8, 20, 34, 0.46),
      0 2px 6px rgba(8, 20, 34, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  /* Puntje naar de kop toe */
  .nav-group__panel::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 26px;
    width: 9px;
    height: 9px;
    background: #1B3454;
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    transform: rotate(45deg);
  }

  .nav-group__panel a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 11px 14px 11px 16px;
    border-radius: var(--r-md);
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.80);
    transition: background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                padding-left var(--t-fast) var(--ease);
  }

  /* Oranje streepje links — groeit uit het niets bij hover */
  .nav-group__panel a::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--orange);
    border-radius: var(--r-xs);
    transform: translateY(-50%);
    transition: height var(--t-base) var(--ease);
  }

  /* Pijl rechts — schuift mee naar binnen */
  .nav-group__panel a::after {
    content: '';
    flex: none;
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-3px, 3px);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-base) var(--ease);
  }

  .nav-group__panel a:hover,
  .nav-group__panel a:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    padding-left: 20px;
  }
  .nav-group__panel a:hover::before,
  .nav-group__panel a:focus-visible::before { height: 17px; }
  .nav-group__panel a:hover::after,
  .nav-group__panel a:focus-visible::after {
    opacity: 0.65;
    transform: rotate(45deg) translate(0, 0);
  }

  .nav-group__panel a[aria-current="page"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
  }
  .nav-group__panel a[aria-current="page"]::before { height: 17px; }

  /* Toetsenbord-focus in de merkkleur in plaats van het blauwe systeemkader */
  .site-nav a:focus-visible,
  .site-nav .nav-group__kop:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }
  .nav-group__panel a:focus-visible { outline-offset: -2px; }
}

/* ─── Tweede laag in het menu: Leningen ▸ Rust, Stabiel, Opbouw ──
   Besluit Vincent en Bodi, 26 okt 2026: onder Investeren staan Aanbod,
   Leningen, Zekerheden en Stichting; Leningen klapt uit naar de drie
   profielen. Op desktop opent een tweede paneel rechts naast het eerste
   (hover, klik of Enter/pijl rechts); onder 1100px klapt het in de lijst
   open. main.js zet .is-open en aria-expanded en data-regie; zonder JS
   werkt alleen de hover. */
.nav-sub__kop {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.86);
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  -webkit-tap-highlight-color: transparent;
}
.nav-sub__kop::after {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.6;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-sub.is-open > .nav-sub__kop,
.nav-sub__kop.is-current { color: #fff; }
.nav-sub.is-open > .nav-sub__kop::after { opacity: 1; }

@media (min-width: 1101px) {
  .nav-sub { position: relative; }
  .nav-sub__kop {
    position: relative;
    padding: 11px 14px 11px 16px;
    border-radius: var(--r-md);
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.80);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  /* pijl naar rechts: het paneel komt ernaast */
  .nav-sub__kop::after { transform: rotate(-45deg); }
  /* zelfde oranje streepje als de links in het paneel */
  .nav-sub__kop::before {
    content: '';
    position: absolute;
    left: 6px; top: 50%;
    width: 2px; height: 0;
    background: var(--orange);
    border-radius: var(--r-xs);
    transform: translateY(-50%);
    transition: height var(--t-base) var(--ease);
  }
  .nav-sub__kop:hover,
  .nav-sub.is-open > .nav-sub__kop { background: rgba(255, 255, 255, 0.07); color: #fff; }
  .nav-sub__kop:hover::before,
  .nav-sub.is-open > .nav-sub__kop::before,
  .nav-sub__kop.is-current::before { height: 17px; }
  .nav-sub__kop:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
    border-radius: var(--r-md);
  }

  .nav-sub__panel {
    position: absolute;
    top: -11px;
    left: calc(100% + 16px);
    min-width: 200px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, #1B3454 0%, var(--blue-dark) 100%);
    box-shadow:
      0 20px 44px rgba(8, 20, 34, 0.46),
      0 2px 6px rgba(8, 20, 34, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
    z-index: 61;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    /* dicht gaat 200 ms later: wie schuin naar Opbouw beweegt, verliest het paneel niet */
    transition: opacity var(--t-fast) var(--ease) 200ms,
                transform var(--t-fast) var(--ease) 200ms,
                visibility 0s linear 320ms;
  }
  /* onzichtbare brug over de kier tussen de twee panelen */
  .nav-sub__panel::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -18px; width: 18px;
  }
  .nav-sub.is-open > .nav-sub__panel,
  .nav-sub:not([data-regie]):hover > .nav-sub__panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                visibility 0s;
  }
}

@media (max-width: 1100px) {
  .nav-sub__kop {
    padding: var(--s-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  /* pijl omlaag, draait om als de profielen openstaan */
  .nav-sub__kop::after { width: 7px; height: 7px; transform: translateY(-2px) rotate(45deg); }
  .nav-sub.is-open > .nav-sub__kop::after { transform: translateY(1px) rotate(-135deg); }
  .nav-sub__panel {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    padding-left: var(--s-4);
    transition: max-height var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
  }
  .nav-sub.is-open > .nav-sub__panel {
    max-height: 200px;
    visibility: visible;
    transition: max-height var(--t-slow) var(--ease), visibility 0s;
  }
  /* het eerste paneel moet de drie extra regels kunnen bevatten */
  .nav-group.is-open .nav-group__panel { max-height: 560px; }
}

/* ─── Aanbod — uitgelicht project bovenaan ─────────────────────
   Foto over de volle breedte met het blauwe gegevensvlak er schuin overheen.
   Het vlak zelf staat scheef via skewY; de inhoud draait met dezelfde hoek
   terug, zodat de tekst waterpas blijft staan en gewoon leesbaar is. */
.lead-project {
  position: relative;
  margin-top: var(--s-6);
}
.lead-project + .lead-project { margin-top: clamp(72px, 9vw, 128px); }

.lead-project__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
  background: var(--blue-soft);
}
@media (min-width: 1100px) { .lead-project__media { aspect-ratio: 3 / 2; } }
.lead-project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lead-project__panel {
  position: relative;
  width: min(460px, 100%);
  margin: -64px auto 0;
  padding: clamp(22px, 2.2vw, 32px);
  color: #fff;
  background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%);
  box-shadow: 0 24px 54px rgba(10, 22, 38, 0.38);
  transform: skewY(-2deg);
}
.lead-project--rechts .lead-project__panel { transform: skewY(2deg); }
.lead-project__inner { transform: skewY(2deg); }
.lead-project--rechts .lead-project__inner { transform: skewY(-2deg); }

/* Pas vanaf 1100px ligt het vlak óver het beeld. Daaronder is het beeld te laag
   om er een vlak van deze hoogte in kwijt te kunnen; daar staat het eronder. */
@media (min-width: 1100px) {
  /* Het vlak zit in de onderhoek van het beeld en steekt er 40px onderuit.
     De positie wordt gemeten vanaf de rand van dit blok, dus dat blok mag geen
     eigen ondermarge hebben — anders zakt het vlak die afstand extra omlaag. */
  .lead-project { padding-bottom: 0; }
  .lead-project__panel {
    position: absolute;
    bottom: -40px;
    left: clamp(12px, 2vw, 28px);
    width: min(450px, 44%);
    margin: 0;
    padding: clamp(20px, 1.9vw, 28px);
  }
  .lead-project--rechts .lead-project__panel {
    left: auto;
    right: clamp(12px, 2vw, 28px);
  }
  /* compacter, zodat het vlak in de onderhoek past en er film boven vrijblijft */
  .lead-project__spec { padding: 7px 0; }
  .lead-project__specs { margin: var(--s-3) 0 var(--s-4); }
}

.lead-project__tag { display: inline-flex; margin-bottom: var(--s-4); }
.lead-project__title {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.lead-project__lede {
  margin-top: var(--s-3);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  /* Drie regels vasthouden. De twee vlakken staan onder elkaar met dezelfde
     opbouw; zonder deze ondergrens breekt de ene tekst op een tussenbreedte
     naar twee regels en de andere naar drie, en verschillen de vlakken. */
  min-height: calc(3 * 1.6 * 15px);
}

.lead-project__rate {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 2px solid var(--orange);
}
.lead-project__rate .num {
  font-size: clamp(32px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.lead-project__rate .unit { font-size: 13px; color: rgba(255, 255, 255, 0.72); }

.lead-project__specs { margin: var(--s-4) 0; }
.lead-project__spec {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: baseline;
  padding: 8px 0;
  font-size: 13.5px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.lead-project__spec:first-child { border-top: 0; padding-top: 0; }
.lead-project__spec .k { color: rgba(255, 255, 255, 0.62); }
.lead-project__spec .v { color: #fff; font-weight: 500; text-align: right; }

.lead-project__acties { display: flex; flex-wrap: wrap; gap: var(--s-3); }

@media (prefers-reduced-motion: reduce) {
  .lead-project__panel,
  .lead-project__inner { transform: none; }
}

/* De vergelijkingstabel is 489px breed en past dus niet in een telefoonvenster.
   Zonder deze wikkel schuift de hele pagina horizontaal weg; nu schuift alleen
   de tabel zelf. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.table-scroll .product-table { min-width: 480px; }

/* ─── Videoblok met afspeelknop (aanbod) ───────────────────────
   Het bestand wordt pas opgehaald als iemand op play drukt (preload none);
   tot dan staat het posterbeeld er. Anders trekt elke bezoeker van deze
   pagina de hele film binnen. */
.lead-project__media--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lead-project__media--video::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 40, 64, 0.04) 0%, rgba(20, 40, 64, 0.26) 100%);
  transition: opacity var(--t-slow) var(--ease);
}

.video-knop {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: opacity var(--t-slow) var(--ease);
}
.video-knop__cirkel {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(10, 22, 38, 0.32);
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.video-knop__cirkel svg {
  width: 30px;
  height: 30px;
  margin-left: 4px;   /* optisch midden: een driehoek weegt naar links */
}
/* rustige puls, zodat de knop leeft zonder te schreeuwen */
.video-knop__ring {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  animation: video-puls 2.8s var(--ease) infinite;
}
@keyframes video-puls {
  0%   { transform: scale(1);    opacity: 0.75; }
  70%  { transform: scale(1.34); opacity: 0; }
  100% { transform: scale(1.34); opacity: 0; }
}
.video-knop__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(10, 22, 38, 0.5);
}
.video-knop:hover .video-knop__cirkel {
  background: rgba(255, 255, 255, 0.26);
  transform: scale(1.05);
}
.video-knop:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; border-radius: var(--r-md); }

/* Op brede schermen ligt het blauwe vlak over de helft van het beeld; de knop
   wijkt daarom uit naar de vrije kant. */
@media (min-width: 861px) {
  .lead-project .video-knop { left: 68%; }
  .lead-project--rechts .video-knop { left: 32%; }
}

/* Zodra de film loopt gaan de knop en het waas eraf. De klasse staat op het
   artikel, zodat ook het gegevensvlak (een broer van het beeld) meedoet. */
.lead-project.is-spelend .video-knop,
.lead-project.is-spelend .lead-project__media--video::after {
  opacity: 0;
  pointer-events: none;
}

/* Het blauwe vlak ligt op brede schermen óver het beeld. Zolang de film
   speelt zakt het rustig uit beeld; na afloop komt het langs dezelfde weg
   terug. Daaronder staat het vlak naast de film en blijft het gewoon staan. */
@media (min-width: 1100px) {
  .lead-project__panel {
    transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  }
  .lead-project.is-spelend .lead-project__panel {
    opacity: 0;
    transform: skewY(-2deg) translateY(36px);
    pointer-events: none;
  }
  .lead-project--rechts.is-spelend .lead-project__panel {
    transform: skewY(2deg) translateY(36px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lead-project.is-spelend .lead-project__panel { transform: none; }
}

@media (max-width: 600px) {
  .video-knop__cirkel { width: 66px; height: 66px; }
  .video-knop__cirkel svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-knop__ring { animation: none; opacity: 0.5; }
}

/* ─── Projectvideo (aanbod/<project>) ──────────────────────────
   Losse film met de eigen bediening van de browser. Het posterbeeld staat
   er tot iemand op play drukt (preload none), zodat niet elke bezoeker de
   hele film binnentrekt. Liggend 16:9, in hetzelfde kader als de kaarten. */
.project-video {
  margin: var(--s-5) 0 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--blue-dark);
  border: 1px solid var(--rule);
  box-shadow: 0 2px 4px rgba(20,40,64,0.05), 0 12px 32px rgba(20,40,64,0.06);
}
.project-video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ─── Uitgelicht project — kleinere variant ────────────────────
   Het tweede blok mag minder gewicht hebben dan het lopende project: lager
   beeldkader, smaller vlak, kleinere kop. De gegevenslijst is korter, anders
   past het vlak niet meer in de onderhoek van dat lagere beeld. */
@media (min-width: 1100px) {
  .lead-project--klein .lead-project__media { aspect-ratio: 16 / 9; }
  .lead-project--klein .lead-project__panel { width: min(400px, 39%); }
}
.lead-project--klein .lead-project__title { font-size: clamp(22px, 2vw, 27px); }
.lead-project--klein .lead-project__rate .num { font-size: clamp(26px, 2.2vw, 33px); }
.lead-project--klein .lead-project__tag { margin-bottom: var(--s-3); }

/* ─── De leningen — verspringende rijen ────────────────────────
   Tekst en gegevensvlak wisselen per rij van kant, zodat het oog van links
   naar rechts loopt in plaats van drie keer dezelfde kolom af te gaan. */
.lening-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 88px);
}
.lening-rij--gespiegeld .lening-rij__tekst { order: 2; }

.lening-rij__nr {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-bottom: var(--s-3);
}
.lening-rij__tag { margin-left: var(--s-3); vertical-align: 2px; }
.lening-rij__titel {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
}
.lening-rij__titel em { font-style: normal; color: var(--muted); }
.lening-rij__lede {
  margin: var(--s-4) 0 var(--s-5);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 46ch;
}

.lening-rij__vlak {
  padding: clamp(24px, 2.4vw, 36px);
  color: #fff;
  background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%);
  box-shadow: 0 18px 42px rgba(10, 22, 38, 0.26);
}
.lening-rij__rente {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--orange);
}
.lening-rij__rente .num {
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.lening-rij__rente .unit { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.lening-rij__vlak .lead-project__specs { margin: var(--s-4) 0 0; }

@media (max-width: 880px) {
  .lening-rij {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .lening-rij--gespiegeld .lening-rij__tekst { order: 0; }
}

/* ─── Binnenkort open — drie kleinere projectkaarten ───────────── */
.lead-sub { margin-top: clamp(64px, 8vw, 112px); }
.lead-sub__titel {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
}
.lead-sub__lede {
  margin-top: var(--s-3);
  font-size: 16px;
  color: var(--muted);
  max-width: 62ch;
}

.komende {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: var(--s-6);
}
/* De kaart zelf clipt niet: het renterondje mag over de hoek heen.
   Alles wat wél binnen de kaartvorm moet blijven zit in __inner. */
.komende__kaart { position: relative; display: flex; }
.komende__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(10, 22, 38, 0.16);
  border-radius: var(--r-md);
  background: var(--blue-dark);
}
/* Geen haakse rand tussen beeld en vlak: de onderkant van het beeld loopt
   schuin omhoog naar rechts, ongeveer 8 graden uit het horizontale vlak.
   Wat wegvalt is de blauwe kaartachtergrond, dus het vlak loopt door. */
.komende__beeld {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 81%, 0 100%);
}
.komende__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease);
}
.komende__kaart:hover .komende__beeld img { transform: scale(1.04); }

.komende__vlak {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  color: #fff;
  background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%);
}
.komende__titel {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: var(--s-3);
  color: #fff;
}
.komende__specs { margin: var(--s-4) 0 var(--s-5); }
.komende__spec {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: 7px 0;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.komende__spec:first-child { border-top: 0; padding-top: 0; }
.komende__spec .k { color: rgba(255, 255, 255, 0.62); }
.komende__spec .v { color: #fff; font-weight: 500; text-align: right; }

.komende__acties {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.komende__dossier {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
}
.komende__dossier:hover { color: #fff; border-bottom-color: #fff; }

@media (max-width: 980px) { .komende { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .komende { grid-template-columns: 1fr; } }

/* ─── Kleine kaarten: het rentevlak in de hoek ────────────────
   Geen los plakkertje in het beeld, maar een wit vlak dat in de hoek van de
   foto is gezet en dezelfde schuine onderrand heeft als de snede tussen
   foto en blauw vlak. Twee evenwijdige diagonalen, boven en onder.
   De ronding komt van __inner, die het beeld op de kaartvorm clipt — het
   vlak volgt dus vanzelf exact de ronding van de hoek. */
.komende__rente {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 13px 18px 26px 20px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 17px), 0 100%);
  color: var(--blue-dark);
}
.komende__rente .num {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 500;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'lnum' on, 'tnum' on;
}
.komende__rente .label {
  font-size: 12px;
  line-height: 1;
  color: var(--muted);
}


/* ─── Vergelijking van de drie varianten ────────────────────────
   Geen raster van hokjes: alleen zachte horizontale lijnen, ruime hoeken en
   het rentepercentage in een afgeronde pil. Rente en naam vormen de kop van
   elke kolom; het lichaam draagt alleen nog de kenmerken. */
.vergelijk { margin-top: clamp(56px, 7vw, 96px); }
.vergelijk__tabel {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(20, 40, 64, 0.04), 0 18px 46px rgba(20, 40, 64, 0.08);
}
.vergelijk__tabel thead th {
  background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: #fff;
  text-align: left;
  vertical-align: bottom;
  padding: var(--s-5) var(--s-5) var(--s-5);
}
.vergelijk__hoek {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5) !important;
  width: 24%;
}
.vergelijk__naam {
  display: block;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}
/* het percentage als afgeronde pil, in plaats van nog een los cijfer */
.vergelijk__rente {
  display: inline-block;
  padding: 5px 15px;
  border-radius: var(--r-pil);
  background: var(--orange);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.vergelijk__tabel tbody th,
.vergelijk__tabel tbody td {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--rule-soft);
  vertical-align: top;
  text-align: left;
  transition: background var(--t-fast) var(--ease);
}
.vergelijk__tabel tbody tr:first-child th,
.vergelijk__tabel tbody tr:first-child td { border-top: 0; }
.vergelijk__tabel tbody th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.vergelijk__tabel tbody td { color: var(--ink-soft); }
/* de regel onder de muis licht op met ronde uiteinden */
.vergelijk__tabel tbody tr:hover th,
.vergelijk__tabel tbody tr:hover td { background: var(--blue-soft); }
.vergelijk__tabel tbody tr:hover th { border-radius: var(--r-pil) 0 0 var(--r-pil); }
.vergelijk__tabel tbody tr:hover td:last-child { border-radius: 0 var(--r-pil) var(--r-pil) 0; }

/* ─── Rondere vormen in dit deel van de pagina ─────────────────── */
.komende__inner { border-radius: var(--r-lg); }
.lening-rij__vlak { border-radius: var(--r-lg); }
.lead-project__media { border-radius: var(--r-md); }
@media (min-width: 1100px) { .lead-project__panel { border-radius: var(--r-md); } }

/* ─── Logovak — merk van een externe partij naast de tekst ────── */
.logo-vak {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s-5);
  box-shadow: 0 1px 2px rgba(20, 40, 64, 0.04), 0 10px 28px rgba(20, 40, 64, 0.05);
}
.logo-vak__beeld {
  display: grid;
  place-items: center;
  padding: var(--s-6) var(--s-5);
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
.logo-vak__beeld img {
  max-width: 190px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.logo-vak__tekst { padding: var(--s-5); }
.logo-vak__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-3);
}
.logo-vak__tekst p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.logo-vak__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--s-4);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 58, 95, 0.28);
  padding-bottom: 2px;
}
.logo-vak__link:hover { border-bottom-color: var(--blue); }

/* ─── Route — genummerde stappen met een doorlopende lijn ─────── */
.route {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: var(--s-7);
  counter-reset: route;
}
.route__stap { position: relative; padding-top: var(--s-6); }
/* de lijn die de stappen verbindt, met een stip op elke stap */
.route__stap::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  right: calc(-1 * clamp(20px, 2.4vw, 36px));
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.route__stap:last-child::before { right: 0; }
.route__stap::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(243, 112, 33, 0.18);
}
.route__nr {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--orange);
  margin-bottom: var(--s-3);
}
.route__titel {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--s-3);
}
.route__stap p {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.76);
}
@media (max-width: 980px) {
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route__stap:nth-child(2)::before { right: 0; }
}
@media (max-width: 560px) {
  .route { grid-template-columns: 1fr; gap: var(--s-5); }
  .route__stap::before { right: 0; }
}

/* ─── Taken — wat een partij doet, in vier vakken ─────────────── */
.taken {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: var(--s-6);
}
.taak {
  padding: clamp(22px, 2.4vw, 32px);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  border-top: 2px solid var(--orange);
}
.taak__titel {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
  margin-bottom: var(--s-3);
}
.taak p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
@media (max-width: 760px) { .taken { grid-template-columns: 1fr; } }

/* ─── Bedragtegels ────────────────────────────────────────────── */
.bedragen { display: grid; gap: var(--s-3); }
.bedragen__tegel {
  padding: var(--s-5);
  border-radius: var(--r-md);
  color: #fff;
  background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%);
}
.bedragen__num {
  display: block;
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.bedragen__wat {
  display: block;
  margin-top: var(--s-3);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.bedragen__bij {
  display: inline-block;
  margin-top: var(--s-3);
  padding: 3px 11px;
  border-radius: var(--r-pil);
  background: rgba(255, 255, 255, 0.14);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ─── Lagen van zekerheid — icoonkaarten ──────────────────────── */
.lagen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: var(--s-7);
}
.laag {
  padding: clamp(24px, 2.4vw, 32px);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.laag:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(20, 40, 64, 0.09);
}
.laag__ring {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
  margin-bottom: var(--s-4);
}
.laag__icoon { width: 24px; height: 24px; }
.laag__titel {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
  margin-bottom: var(--s-3);
}
.laag p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
@media (max-width: 980px) { .lagen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .lagen { grid-template-columns: 1fr; } }

/* ─── Rangorde — de volgorde van uitbetaling als beeld ─────────── */
.rang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin-top: var(--s-7);
}
.rang__kolom {
  padding: clamp(20px, 2.2vw, 30px);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.rang__kolom--wij { border-color: var(--orange); box-shadow: 0 12px 34px rgba(243, 112, 33, 0.12); }
.rang__kop {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-4);
}
.rang__kolom--wij .rang__kop { color: var(--orange); }

/* de balk leest van boven naar beneden: bovenaan wordt als eerste voldaan */
.rang__balk {
  position: relative;
  display: grid;
  gap: 4px;
  padding-left: 26px;
}
.rang__balk::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--orange) 0%, var(--rule) 100%);
}
.rang__balk::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.rang__laag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-sm);
}
.rang__rang {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pil);
}
.rang__wie { font-size: 15px; font-weight: 500; }
.rang__laag--bank { background: var(--offwhite); color: var(--ink-soft); }
.rang__laag--bank .rang__rang { background: var(--rule); color: var(--ink-soft); }
.rang__laag--na { background: var(--offwhite); color: var(--muted); }
.rang__laag--na .rang__rang { background: var(--rule-soft); color: var(--muted); }
.rang__laag--u {
  background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: #fff;
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}
.rang__laag--u .rang__rang { background: var(--orange); color: #fff; }
.rang__uitleg {
  margin-top: var(--s-4);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.rang__varianten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(32px, 4vw, 56px);
}
.rang__variant { padding-top: var(--s-4); border-top: 2px solid var(--orange); }
.rang__variant-naam {
  display: block;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
  margin-bottom: var(--s-3);
}
.rang__variant p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 880px) {
  .rang { grid-template-columns: 1fr; }
  .rang__varianten { grid-template-columns: 1fr; }
}

/* ─── Bouwreeks — één project van tekening tot sleutel (ontwikkeling) ── */
.bouwreeks { margin-top: clamp(48px, 6vw, 80px); }
.bouwreeks-host { overflow-x: clip; }
.bouwreeks__kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}
.bouwreeks__kop h3 {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 40ch;
  text-wrap: balance;
  margin: 0;
}
.bouwreeks__nav { display: inline-flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.bouwreeks__knop {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.bouwreeks__knop svg { width: 18px; height: 18px; }
.bouwreeks__knop:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-2px); }
.bouwreeks__knop:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.bouwreeks__voortgang {
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  margin-bottom: var(--s-5);
  overflow: hidden;
}
.bouwreeks__voortgang span {
  display: block;
  height: 100%;
  background: var(--orange);
  transform-origin: left center;
  transform: scaleX(0);
}
.bouwreeks__hint {
  flex: 0 0 auto;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bouwreeks__hint svg { width: 18px; height: 18px; }
/* de strook loopt tot aan de rand van het scherm en scrollt horizontaal */
.project-gallery.bouwreeks__strip {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(50% - 50vw) 0 0;
  padding: 4px calc(50vw - 50%) var(--s-4) 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  -webkit-overflow-scrolling: touch;
}
.bouwreeks__frame {
  flex: 0 0 clamp(272px, 36vw, 500px);
  scroll-snap-align: start;
  margin: 0;
  transition: transform var(--t-base) var(--ease);
}
.bouwreeks__frame:hover { transform: translateY(-2px); }
.project-gallery__item.bouwreeks__beeld {
  aspect-ratio: 3 / 2;
  background: var(--blue);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.bouwreeks__beeld:hover img { transform: none; }
.bouwreeks__cap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.bouwreeks__nr {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--orange);
  font-variant-numeric: tabular-nums lining-nums;
  padding-top: 3px;
}
.bouwreeks__cap strong {
  display: block;
  font-weight: 500;
  color: #fff;
  margin-bottom: 2px;
}
.bouwreeks__bron {
  margin-top: var(--s-2);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 720px) {
  .bouwreeks__kop { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .bouwreeks__frame { flex-basis: 78vw; }
  .bouwreeks__voortgang { display: none; }
}

/* Gepind: op desktop drijft de verticale scroll de reeks horizontaal aan.
   Op telefoons, bij reduced-motion en op een laag venster (onder 760 px, waar de foto's
   kleiner dan 270 px zouden worden) blijft het de veegstrook hierboven.
   Dezelfde mediaquery staat in main.js (Bouwreeks) en hieronder bij .bouwreeks__intro. */
@media (min-width: 721px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .bouwreeks--pin {
    height: 300vh;                 /* JS zet de exacte hoogte: blokhoogte + schuifafstand */
    view-timeline-name: --reeks;
    view-timeline-axis: block;
    /* de tijdlijn loopt precies van vastpinnen (onder de navigatiebalk) tot loslaten */
    view-timeline-inset: var(--kop-h, 84px) var(--reeks-inset-end, 0px);
  }
  .bouwreeks--pin .bouwreeks__pin {
    position: sticky;
    top: var(--kop-h, 84px);
    container-type: inline-size;
  }
  .bouwreeks--pin .project-gallery.bouwreeks__strip {
    width: max-content;
    overflow: visible;
    scroll-snap-type: none;
    margin: 0;
    padding: 4px 0 var(--s-4);
    will-change: transform;
    animation: reeks-schuif linear both;
    animation-timeline: --reeks;
    animation-range: contain 0% contain 100%;
  }
  .bouwreeks--pin .bouwreeks__voortgang span {
    animation: reeks-vul linear both;
    animation-timeline: --reeks;
    animation-range: contain 0% contain 100%;
  }
  /* Safari en browsers zonder animation-timeline: main.js schuift de strook (vloeiender in
     WebKit). Zonder animation-timeline zou de animatie meteen op haar eindstand blijven staan
     en de stand van het script overschrijven. */
  .bouwreeks--pin.bouwreeks--js .project-gallery.bouwreeks__strip,
  .bouwreeks--pin.bouwreeks--js .bouwreeks__voortgang span { animation: none; }
  /* Een echte breedte, niet alleen flex-basis: Safari rekent de max-content-breedte van de
     strook anders uit vanaf de bijschriften op één regel (7.154 px in plaats van 2.990 px op 1440),
     waarna de strook te ver schuift en alleen het blauwe vlak overblijft (9 nov 2026). */
  .bouwreeks--pin .bouwreeks__frame { flex: 0 0 auto; width: clamp(360px, 34vw, 520px); }
  .bouwreeks--pin .bouwreeks__hint { display: none; }
}
@keyframes reeks-schuif { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - 100%)); } }
@keyframes reeks-vul { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ─── Woonbeeld — drie tegels uit een opgeleverd appartement ────── */
.woonbeeld {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: var(--s-6);
}
.woonbeeld figure { margin: 0; }
.woonbeeld__beeld {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--blue-soft);
  box-shadow: 0 2px 4px rgba(20,40,64,0.05), 0 12px 32px rgba(20,40,64,0.06);
}
.woonbeeld__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.woonbeeld figcaption {
  margin-top: var(--s-3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.woonbeeld figcaption strong { display: block; color: var(--blue-dark); font-weight: 500; }
@media (max-width: 720px) {
  .woonbeeld { grid-template-columns: 1fr; }
}

/* ─── Kavelbeeld — luchtfoto in de prose-kolom ───────────────── */
.kavelbeeld { margin: var(--s-6) 0 0; }
.kavelbeeld__beeld {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--blue-soft);
}
.kavelbeeld__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kavelbeeld figcaption { margin-top: var(--s-3); font-size: 14px; line-height: 1.5; color: var(--muted); }
.kavelbeeld figcaption strong { color: var(--blue-dark); font-weight: 500; }

/* ─── Ontwikkelpagina: inhoudsopgave, lichte route, reeks bovenin ── */
.pagina-index {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: baseline;
}
.pagina-index__label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.pagina-index a {
  font-size: 15px; color: var(--blue); text-decoration: none;
  border-bottom: 1px solid rgba(31, 58, 95, 0.28); padding-bottom: 2px;
  transition: border-color var(--t-base) var(--ease);
}
.pagina-index a:hover { border-bottom-color: var(--blue); }
.route--licht .route__stap::before { background: var(--rule); }
.route--licht .route__titel { color: var(--blue-dark); }
.route--licht .route__stap p { color: var(--ink-soft); }
.bouwreeks--boven { margin-top: 0; margin-bottom: clamp(48px, 6vw, 80px); }
.bouwreeks__intro { max-width: 62ch; margin-bottom: var(--s-6); }
.bouwreeks__intro .section-lede { margin-bottom: 0; }
@media (min-width: 721px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  /* in de gepinde stand moet kop plus reeks in één scherm passen */
  .bouwreeks--pin .bouwreeks__intro { margin-bottom: var(--s-5); }
  .bouwreeks--pin .bouwreeks__intro .section-title { margin-bottom: var(--s-3); }
  .bouwreeks--pin .bouwreeks__frame { width: min(clamp(360px, 34vw, 520px), calc((100vh - 580px) * 1.5)); }
}

/* ─── Split — tekst naast een halve plaat die tot de schermrand loopt ── */
.split-host { overflow-x: clip; }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split .prose { max-width: 56ch; }
.split + .pagina-index { margin-top: var(--s-8); }
.split__paneel {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 560px;
  align-self: stretch;
}
.split__paneel--bleed-l { margin-left: calc(50% - 50vw); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.split__paneel--bleed-r { margin-right: calc(50% - 50vw); border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* foto-plaat met de kaart erover */
.split__paneel--foto { background: var(--blue-dark); }
.split__paneel--foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.split__paneel--foto::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,40,64,0) 45%, rgba(20,40,64,0.55) 100%);
  pointer-events: none;
}
.split__kaart {
  position: absolute;
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(20px, 3vw, 40px);
  left: auto;
  width: min(420px, calc(100% - 2 * clamp(20px, 3vw, 40px)));
  z-index: 1;
  background: var(--paper);
  box-shadow: 0 12px 40px rgba(20,40,64,0.28);
}
.split__kaart--links { right: auto; left: clamp(20px, 3vw, 40px); }
/* donker vlak met statement en feiten */
.split__paneel--donker {
  background: linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: #fff;
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split__paneel--donker .section-eyebrow { color: var(--orange); }
.split__statement {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 22ch;
  text-wrap: balance;
  margin: var(--s-3) 0 var(--s-6);
}
.split__pairs .ws-pair { border-color: rgba(255,255,255,0.16); }
.split__pairs .ws-pair:last-of-type { border-bottom-color: rgba(255,255,255,0.16); }
.split__pairs .ws-pair .k { color: rgba(255,255,255,0.62); }
.split__pairs .ws-pair .v { color: #fff; }
.split__pairs .ws-pair .v a { color: #fff; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split .prose { max-width: none; }
  .split__paneel { min-height: 0; }
  .split__paneel--bleed-l, .split__paneel--bleed-r { margin: 0; border-radius: var(--r-md); }
  .split__paneel--foto { display: flex; flex-direction: column; }
  .split__paneel--foto img { position: static; aspect-ratio: 3 / 2; height: auto; }
  .split__paneel--foto::after { display: none; }
  .split__kaart, .split__kaart--links { position: static; width: auto; border-radius: 0; border: 0; border-top: 1px solid var(--rule); box-shadow: none; }
  .split__paneel--donker { order: 2; }
}

/* ─── MacBook met het projectenoverzicht van het portaal (homepage, spotlight).
   Vervangt de telefoon (14 okt 2026): dun scherm, lichte glans, voet met
   uitsparing en schaduw. Het scherm volgt de projectenpagina van Bloqhouse;
   de open ronde is de enige scherpe kaart, de andere twee zijn onscherp.
   Maten in cqw zodat het portaal meeschaalt met het scherm. ── */
.koudum-spotlight--with-mac .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 600px);
  gap: clamp(36px, 4vw, 64px);
  align-items: center;
}
.koudum-spotlight--with-mac .koudum-spotlight__head,
.koudum-spotlight--with-mac .koudum-terms,
.koudum-spotlight--with-mac .koudum-spotlight__footer { grid-column: 1; }
.koudum-spotlight--with-mac .mac-mockup { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

.mac-mockup { width: 100%; max-width: 620px; margin-inline: auto; padding-bottom: 18px; }
.mac-mockup__deksel {
  position: relative;
  background: linear-gradient(180deg, #2b2c30 0%, #141416 100%);
  border-radius: 18px 18px 5px 5px;
  padding: 11px 11px 16px;
  box-shadow: 0 34px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.mac-mockup__camera { position: absolute; top: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #3a3b40; box-shadow: 0 0 0 1px #0b0b0c; }
.mac-mockup__scherm { position: relative; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; background: #f4f5f7; container-type: inline-size; }
.mac-mockup__glans { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0) 46%); }
.mac-mockup__voet {
  position: relative;
  height: 13px;
  margin: 0 -5%;
  background: linear-gradient(180deg, #ebecee 0%, #c9cbd0 40%, #8a8c91 100%);
  border-radius: 1px 1px 12px 12px / 1px 1px 7px 7px;
}
.mac-mockup__voet::before { content: ''; position: absolute; left: 50%; top: 0; width: 14%; height: 4px; margin-left: -7%; background: linear-gradient(180deg, #a9abb0, #d7d9dd); border-radius: 0 0 5px 5px; }
.mac-mockup__voet::after { content: ''; position: absolute; left: 3%; right: 3%; bottom: -16px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 70%); }

.portaal { height: 100%; display: flex; flex-direction: column; font-size: 1.85cqw; color: var(--ink); line-height: 1.3; }
.portaal__browser { display: flex; align-items: center; gap: 0.4em; padding: 0.5em 0.8em; background: #e8e9eb; border-bottom: 1px solid #d5d6d9; }
.portaal__stip { width: 0.65em; height: 0.65em; border-radius: 50%; background: #c8cacf; }
.portaal__adres { flex: 1; margin-left: 0.6em; background: #fff; border-radius: 0.5em; padding: 0.25em 0.8em; font-size: 0.8em; color: var(--muted); }
.portaal__kop { display: flex; align-items: center; gap: 1em; padding: 1em 2.6em; background: var(--blue); color: #fff; }
.portaal__logo { height: 2.8em; width: auto; }
.portaal__slogan { font-size: 0.68em; line-height: 1.25; padding-left: 1em; border-left: 1px solid rgba(255, 255, 255, 0.35); }
.portaal__titel { margin-left: 1.2em; font-size: 1.05em; }
.portaal__knop { border: 1px solid #fff; border-radius: 0.6em; padding: 0.45em 1.1em; font-size: 0.9em; }
.portaal__knop--eerste { margin-left: auto; }
a.portaal__knop, a.portaal-kaart__knop, a.portaal-kaart__link { color: inherit; text-decoration: inherit; cursor: pointer; transition: background 0.2s cubic-bezier(0.2, 0, 0, 1), color 0.2s cubic-bezier(0.2, 0, 0, 1); }
a.portaal__knop:hover, a.portaal-kaart__knop:hover { background: #fff; color: var(--blue); }
a.portaal-kaart__link { text-decoration: underline; }
.portaal__balk { display: flex; justify-content: space-between; align-items: center; padding: 1.4em 2.6em 0.6em; }
.portaal__weergave { display: grid; grid-template-columns: repeat(2, 0.5em); gap: 0.12em; }
.portaal__weergave i { display: block; height: 0.5em; background: var(--ink); border-radius: 1px; }
.portaal__zoek { width: 34%; background: #fff; border-radius: 1em; padding: 0.5em 1em; font-size: 0.9em; color: var(--muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.portaal__kaarten { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6em; padding: 1em 2.6em 2em; align-items: stretch; }
.portaal-kaart { display: flex; flex-direction: column; background: var(--blue); color: #fff; border-radius: 1.3em; overflow: hidden; box-shadow: 0 0.6em 1.4em rgba(20, 40, 64, 0.18); }
.portaal-kaart__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #d9dbe0; clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); margin-bottom: -0.4em; }
.portaal-kaart__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portaal-kaart__rente { position: absolute; top: 0.9em; right: 0.9em; background: #fff; color: var(--ink); font-weight: 600; font-size: 0.85em; border-radius: 999px; padding: 0.3em 0.75em; }
.portaal-kaart__body { display: flex; flex-direction: column; gap: 0.28em; padding: 0.9em 1.2em 1.2em; }
.portaal-kaart__naam { font-size: 1.05em; margin-bottom: 0.5em; }
.portaal-kaart__regel { font-size: 0.7em; }
.portaal-kaart__regel b { font-weight: 600; }
.portaal-kaart__acties { display: flex; align-items: center; gap: 0.9em; margin-top: 0.9em; }
.portaal-kaart__knop { border: 1px solid #fff; border-radius: 0.6em; padding: 0.4em 0.85em; font-size: 0.72em; }
.portaal-kaart__link { font-size: 0.72em; text-decoration: underline; text-underline-offset: 0.2em; }
.portaal-kaart--vaag { opacity: 0.6; }
.portaal-kaart--vaag .portaal-kaart__foto img { filter: blur(5px); transform: scale(1.08); }
.portaal-kaart--vaag .portaal-kaart__body { padding-top: 1.4em; flex: 1; }
.portaal-kaart--vaag .portaal-kaart__body i { display: block; height: 0.55em; width: 70%; margin: 0.3em 0; border-radius: 0.3em; background: rgba(255, 255, 255, 0.22); }
.portaal-kaart--vaag .portaal-kaart__body i:first-child { width: 45%; height: 0.8em; margin-bottom: 0.8em; }

@media (max-width: 1080px) {
  .koudum-spotlight--with-mac .container { grid-template-columns: minmax(0, 1fr); }
  .koudum-spotlight--with-mac .koudum-spotlight__head { margin-bottom: var(--s-5); }
  .koudum-spotlight--with-mac .mac-mockup { grid-column: 1; grid-row: auto; margin-bottom: var(--s-7); }
}
@media (max-width: 600px) {
  .mac-mockup__deksel { padding: 7px 7px 9px; border-radius: 10px 10px 2px 2px; }
  .mac-mockup__voet { height: 9px; }
}

/* ─── Leningkaarten op de homepage (14 okt 2026): lichte kaart met een eigen
   detailfoto bovenin (interieur, entree, bouwplaats; niet herkenbaar als één
   project), het rentecijfer in serif op het beeld, daaronder alleen de kopjes
   en een blauwe knop. Effen blauw vond Bodi kil. ── */
.lening-kaart {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(20, 40, 64, 0.06), 0 12px 28px rgba(20, 40, 64, 0.08);
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.lening-kaart:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(20, 40, 64, 0.08), 0 20px 40px rgba(20, 40, 64, 0.14); }
.lening-kaart__beeld { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--blue-soft); }
.lening-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lening-kaart__beeld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 40, 64, 0.08) 0%, rgba(20, 40, 64, 0) 30%, rgba(20, 40, 64, 0.82) 100%); }
.lening-kaart__eyebrow {
  position: absolute; top: 16px; left: 18px; z-index: 1;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; background: rgba(20, 40, 64, 0.5); padding: 5px 10px; border-radius: var(--r-xs);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.lening-kaart__rente { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; display: flex; align-items: baseline; gap: 10px; color: #fff; }
.lening-kaart__num {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: clamp(40px, 4vw, 56px); font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'lnum' on, 'tnum' on;
}
.lening-kaart__unit { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.lening-kaart__body { display: flex; flex-direction: column; flex: 1; gap: var(--s-1); padding: clamp(20px, 2vw, 28px); }
.lening-kaart__titel { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--blue-dark); }
.lening-kaart__sub { font-size: 15px; color: var(--muted); margin-bottom: var(--s-4); }
.lening-kaart__specs { margin: 0; border-top: 1px solid var(--rule-soft); }
.lening-kaart__specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 9px 0; border-bottom: 1px solid var(--rule-soft); font-size: 14.5px; }
.lening-kaart__specs dt { color: var(--muted); }
.lening-kaart__specs dd { margin: 0; font-weight: 500; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.lening-kaart__cta.ws-btn { margin-top: var(--s-5); align-self: flex-start; }
.lening-kaart:hover .lening-kaart__cta.ws-btn { background: var(--blue-dark); border-color: var(--blue-dark); }

/* ─── iPhone met het portaal (homepage, 14 okt 2026): het scherm volgt de
   mobiele projectenpagina van Bloqhouse. Vervangt de MacBook op verzoek van
   Bodi; de oude .mac-mockup-regels blijven staan voor als hij terug wil. ── */
.phone-mockup--portaal .phone-mockup__screen { padding: 0; gap: 0; background: #f4f5f7; }
.phone-mockup--portaal .phone-mockup__statusbar { color: #fff; z-index: 2; }
.portaal-m { height: 100%; display: flex; flex-direction: column; font-size: 10px; line-height: 1.3; color: var(--ink); }
.portaal-m__kop { display: flex; align-items: center; gap: 8px; padding: 48px 16px 14px; background: var(--blue); color: #fff; flex-shrink: 0; }
.portaal-m__logo { height: 28px; width: auto; }
.portaal-m__slogan { font-size: 7.5px; line-height: 1.25; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.35); }
.portaal-m__menu { margin-left: auto; display: flex; flex-direction: column; gap: 3px; }
.portaal-m__menu i { display: block; width: 16px; height: 2px; background: #fff; border-radius: 1px; }
.portaal-m__body { flex: 1; overflow: hidden; padding: 16px 12px 0; display: flex; flex-direction: column; gap: 12px; }
.portaal-m__zoek { background: #fff; border-radius: 999px; padding: 9px 14px; font-size: 11px; color: var(--muted); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08); }
.portaal-m-kaart { flex-shrink: 0; background: var(--blue); color: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 16px rgba(20, 40, 64, 0.18); }
.portaal-m-kaart__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #d9dbe0; clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); margin-bottom: -6px; }
.portaal-m-kaart__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portaal-m-kaart__rente { position: absolute; top: 10px; right: 10px; background: #fff; color: var(--ink); font-weight: 600; font-size: 10px; border-radius: 999px; padding: 4px 9px; }
.portaal-m-kaart__tekst { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 16px; }
.portaal-m-kaart__naam { font-size: 13px; }
.portaal-m-kaart__regel { font-size: 8.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); }
a.portaal-m-kaart__knop { margin-top: 8px; display: block; text-align: center; border: 1px solid #fff; border-radius: 8px; padding: 7px; font-size: 10px; color: #fff; text-decoration: none; transition: background 0.2s cubic-bezier(0.2, 0, 0, 1), color 0.2s cubic-bezier(0.2, 0, 0, 1); }
a.portaal-m-kaart__knop:hover { background: #fff; color: var(--blue); }
a.portaal-m-kaart__link { display: block; text-align: center; font-size: 9.5px; color: #fff; text-decoration: underline; text-underline-offset: 2px; padding-bottom: 2px; }
.portaal-m-kaart--vaag { opacity: 0.55; }
.portaal-m-kaart--vaag .portaal-m-kaart__foto img { filter: blur(4px); transform: scale(1.08); }