/* Bouwbedrijf Steenvlijt, voorbeeldsite van FleurenFlow.
   Ingetogen luxe, zoals een architectuurboek: diep warm zwart, gebroken wit,
   één messingaccent. Koppen in een klassieke schreefletter, de rest klein en
   rustig. Weinig woorden, grote beelden. Donkere en lichte zones wisselen
   elkaar af; bij een donker systeemthema worden de lichte zones ook donker.

   Wat beweegt (alleen als de bezoeker geen "minder beweging" heeft aangezet):
   - de kop: de villa bouwt zich op zodra de pagina opent, als filmpje (bouw.js);
   - de kopbalk blijft bovenin staan en krijgt een donkere achtergrond zodra
     je scrolt;
   - van de zes projectbalken staat er steeds één open;
   - beelden onthullen zich met een schuivend venster (pagina.js).

   De kop staat in twee standen:
   - stil (standaard): foto van de afgebouwde villa met de fases als rij.
     Zo ziet het eruit bij "minder beweging" en zonder JavaScript.
   - bouwend: de film speelt vanzelf af, met de fase eroverheen. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --nacht: #12110e;
  --bot: #ece6db;
  --bot-zacht: rgba(236, 230, 219, 0.66);
  --bot-lijn: rgba(236, 230, 219, 0.18);
  --messing: #c2a671;

  /* De lichte zones. */
  --licht-grond: #f3efe7;
  --licht-inkt: #1a1813;
  --licht-zacht: #5c564b;
  --licht-lijn: rgba(26, 24, 19, 0.16);
  --licht-accent: #7a6440;

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --kant: clamp(20px, 5vw, 80px);
  --max: 1440px;
  --boven: 112px;
  --uit: cubic-bezier(0.16, 1, 0.3, 1);
  /* Een lichte site, ook als de Mac op donker staat (8 okt avond, Thijs). */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(194, 166, 113, 0.2); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  --tekst: var(--bot);
  --zacht: var(--bot-zacht);
  --lijn: var(--bot-lijn);
  --accent: var(--messing);
  margin: 0;
  background: var(--nacht);
  color: var(--tekst);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.licht {
  --tekst: var(--licht-inkt);
  --zacht: var(--licht-zacht);
  --lijn: var(--licht-lijn);
  --accent: var(--licht-accent);
  background: var(--licht-grond);
  color: var(--tekst);
}
::selection { background: var(--messing); color: var(--nacht); }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(3.6rem, 10vw, 10rem); line-height: 0.88; letter-spacing: -0.02em; }
h2 { font-size: clamp(2.8rem, 6.6vw, 6.6rem); line-height: 0.92; letter-spacing: -0.015em; }
h3 { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; touch-action: manipulation; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
[id] { scroll-margin-top: 88px; }
.verborgen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Klein, gespatieerd label boven een kop */
.boventitel {
  margin-bottom: clamp(18px, 2.4vw, 30px);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Alleen zichtbaar voor wie met het toetsenbord navigeert */
.sla-over {
  position: absolute; top: 8px; left: 8px; z-index: 10;
  padding: 10px 16px; background: var(--bot); color: var(--nacht);
  font-weight: 600; transform: translateY(-160%);
}
.sla-over:focus-visible { transform: none; }

/* ---------- Knoppen en links ---------- */
.knop, .kop__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 30px;
  border: 1px solid currentColor;
  color: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.35s var(--uit), color 0.35s var(--uit);
}
.knop:hover, .kop__knop:hover { background: var(--bot); color: var(--nacht); border-color: var(--bot); }
.pijl {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.pijl::after {
  content: "";
  width: 56px;
  height: 1px;
  background: currentColor;
  transition: width 0.5s var(--uit);
}
.pijl:hover::after { width: 96px; }

/* ---------- Bovenkant: voorbeeldbalk en kop, over de bouwkop heen ----------
   Staat vast bovenin. Zodra je scrolt schuift de voorbeeldbalk weg (pagina.js
   zet .is-gescrold en meet zijn hoogte in --strook) en krijgt de kop een
   lichte achtergrond met donkere letters, net als de rest van de site. */
.bovenkant {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 6;
  color: var(--bot);
  transition: transform 0.5s var(--uit);
}
.is-gescrold .bovenkant { transform: translateY(calc(-1 * var(--strook, 0px))); }
.kop { transition: background-color 0.5s var(--uit), padding 0.5s var(--uit); }
.is-gescrold .kop {
  padding-top: 12px;
  padding-bottom: 12px;
  background: rgba(243, 239, 231, 0.94);
  color: var(--licht-inkt);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--licht-lijn);
}
.is-gescrold .kop__knop { border-color: rgba(26, 24, 19, 0.45); }
.is-gescrold .kop__knop:hover { background: var(--licht-inkt); color: var(--licht-grond); border-color: var(--licht-inkt); }
.voorbeeld {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  padding: 7px var(--kant);
  background: #000;
  color: var(--bot-zacht);
  font-size: 0.75rem;
  line-height: 1.45;
}
.voorbeeld strong { font-weight: 600; color: var(--bot); }
.voorbeeld a { color: var(--bot); font-weight: 600; white-space: nowrap; }
.kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--kant);
}
.merk {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 0;
}
.kop__menu { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.kop__menu a:not(.kop__knop) {
  padding: 12px 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.85;
}
.kop__menu a:not(.kop__knop):hover { opacity: 1; text-decoration: underline; }
.kop__knop { min-height: 44px; padding: 10px 20px; border-color: rgba(236, 230, 219, 0.5); }
@media (max-width: 899px) {
  :root { --boven: 146px; }
  .verberg-klein { display: none; }
  .merk { font-size: 1.1rem; letter-spacing: 0.24em; }
}

/* ---------- Bouwkop, stille stand (standaard) ---------- */
.bouw__plak {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  overflow: hidden;
  background: var(--nacht);
}
.bouw__film, .bouw__opnieuw { display: none; }
.bouw__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Waas: bovenin achter de kop, onderin achter de tekst */
.bouw__plak::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(18, 17, 14, 0.62), rgba(18, 17, 14, 0) calc(var(--boven) + 80px)),
    linear-gradient(to top, rgba(18, 17, 14, 0.92) 0%, rgba(18, 17, 14, 0.62) 34%, rgba(18, 17, 14, 0) 66%);
}
.bouw__binnen {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-areas: "." "onder";
  gap: 40px;
  padding: calc(var(--boven) + 40px) var(--kant) clamp(32px, 6vh, 64px);
  color: var(--bot);
}
.bouw__intro { grid-area: onder; align-self: end; }
.bouw__intro h1 { margin-bottom: clamp(24px, 3.4vw, 44px); }
.bouw__intro .boventitel { color: var(--bot); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.6); }
.bouw__stappen { grid-area: onder; align-self: end; justify-self: end; }
.bouw__balk { display: none; }
.stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.stap { display: flex; gap: 10px; align-items: baseline; }
.stap__nr { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; color: var(--messing); font-variant-numeric: tabular-nums; }
.stap__naam { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bot-zacht); }
@media (max-width: 899px) {
  .bouw__stappen { justify-self: start; }
  .bouw__binnen { grid-template-areas: "." "onder" "stappen"; grid-template-rows: 1fr auto auto; }
  .bouw__stappen { grid-area: stappen; }
}

/* ---------- Bouwkop, bouwende stand ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Eén scherm hoog; de film speelt vanzelf (bouw.js). Tot hij loopt staat
     het eerste beeld er als poster. */
  .bouw:not(.bouw--stil) .bouw__plak { height: 100vh; height: 100dvh; }
  .bouw:not(.bouw--stil) .bouw__film,
  .bouw:not(.bouw--stil) .bouw__foto {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Op het eind vloeit het scherpe eindbeeld over de film heen: de film is
     zacht en zijn laatste beeld heeft halve borders (8 okt). Weg gaat het in
     één keer, zodat het niet over het lege kavel heen hangt bij opnieuw. */
  .bouw:not(.bouw--stil) .bouw__foto { opacity: 0; }
  .bouw--eind:not(.bouw--stil) .bouw__foto { opacity: 1; transition: opacity 1.2s ease-in-out; }
  .bouw--af:not(.bouw--stil) .bouw__plak { cursor: pointer; }
  /* De waas alleen linksonder achter de tekst en een smalle strook onderin
     achter de balk: over de hele breedte oogde de bouw troebel (8 okt). */
  .bouw:not(.bouw--stil) .bouw__plak::before {
    background:
      linear-gradient(to bottom, rgba(18, 17, 14, 0.6), rgba(18, 17, 14, 0) calc(var(--boven) + 80px)),
      linear-gradient(to top, rgba(18, 17, 14, 0.7), rgba(18, 17, 14, 0) 24%),
      radial-gradient(ellipse 75% 85% at 0% 100%, rgba(18, 17, 14, 0.85), rgba(18, 17, 14, 0.5) 50%, rgba(18, 17, 14, 0) 100%);
  }

  .bouw:not(.bouw--stil) .bouw__binnen { height: 100%; }
  /* De kop staat er voor en na de bouw; tijdens de bouw maakt hij plaats voor de fase. */
  .bouw:not(.bouw--stil) .bouw__intro { transition: opacity 0.7s var(--uit), transform 0.7s var(--uit), visibility 0s; }
  .bouw--bezig:not(.bouw--stil) .bouw__intro {
    opacity: 0;
    transform: translateY(-28px);
    visibility: hidden;
    transition: opacity 0.6s var(--uit), transform 0.6s var(--uit), visibility 0s 0.6s;
  }
  .bouw--af:not(.bouw--stil) .bouw__opnieuw {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 44px;
    margin-left: clamp(18px, 3vw, 40px);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bot-zacht);
    cursor: pointer;
    transition: color 0.35s var(--uit);
    animation: fase-in 0.7s var(--uit);
  }
  .bouw--af:not(.bouw--stil) .bouw__opnieuw:hover { color: var(--bot); }

  /* Fase: de naam van wat er nu gebouwd wordt, groot, met vijf streepjes en de week */
  .bouw:not(.bouw--stil) .bouw__stappen {
    justify-self: stretch;
    display: grid;
    gap: 22px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--uit), transform 0.7s var(--uit);
  }
  .bouw--bezig:not(.bouw--stil) .bouw__stappen { opacity: 1; transform: none; }
  .bouw:not(.bouw--stil) .stappen { display: block; }
  .bouw:not(.bouw--stil) .stap { display: none; }
  .bouw:not(.bouw--stil) .stap--nu { display: grid; gap: 10px; animation: fase-in 0.7s var(--uit); }
  .bouw:not(.bouw--stil) .stap--nu .stap__naam {
    font-family: var(--serif);
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--bot);
  }
  .bouw:not(.bouw--stil) .stap__nr { font-size: 0.72rem; letter-spacing: 0.26em; }
  .bouw:not(.bouw--stil) .stap__nr::after { content: " / 05"; color: var(--bot-zacht); }
  .bouw:not(.bouw--stil) .bouw__balk { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); }
  .bouw:not(.bouw--stil) .bouw__voortgang { display: flex; flex: 1; gap: 6px; }
  .bouw:not(.bouw--stil) .bouw__voortgang i { position: relative; flex: 1; height: 1px; background: var(--bot-lijn); overflow: hidden; }
  .bouw:not(.bouw--stil) .bouw__voortgang i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bot);
    transform: scaleX(var(--vol, 0));
    transform-origin: left;
  }
  .bouw:not(.bouw--stil) .bouw__week {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bot-zacht);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Telefoon: de kop en de tekst bovenin op donker, het beeld daaronder,
     de fase onderaan. */
  @media (max-width: 899px) {
    /* Vierkant, onderaan tegen het fasepaneel. Zo groot als past zonder het
       huis af te snijden: het huis met wat ruimte beslaat de middelste 624 van
       de 720 pixels breed, dus de zijkanten mogen er iets af (115,4%). */
    .bouw:not(.bouw--stil) .bouw__film,
    .bouw:not(.bouw--stil) .bouw__foto {
      --hoog: calc(100dvh - var(--boven) - var(--kaart, 150px) - 24px);
      inset: auto auto calc(var(--kaart, 150px) + 24px) 50%;
      width: min(115.4vw, var(--hoog));
      max-width: none; /* anders knijpt img { max-width: 100% } de foto kleiner dan de film */
      height: auto;
      aspect-ratio: 1;
      transform: translateX(-50%);
      -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%);
      mask-image: linear-gradient(to bottom, transparent, #000 22%);
    }
    .bouw:not(.bouw--stil) .bouw__plak::before {
      background: linear-gradient(to bottom, var(--nacht) calc(var(--boven) + 150px), rgba(18, 17, 14, 0) calc(var(--boven) + 300px));
    }
    .bouw:not(.bouw--stil) .bouw__binnen {
      grid-template-rows: auto 1fr auto;
      grid-template-areas: "intro" "." "stappen";
      padding-top: calc(var(--boven) + 8px);
      padding-bottom: 20px;
    }
    .bouw:not(.bouw--stil) .bouw__intro { grid-area: intro; align-self: start; }
    .bouw:not(.bouw--stil) .bouw__intro h1 { font-size: 3.4rem; margin-bottom: 16px; }
    .bouw:not(.bouw--stil) .bouw__intro .boventitel { margin-bottom: 14px; }
    .bouw:not(.bouw--stil) .bouw__stappen { grid-area: stappen; gap: 16px; }
    .bouw:not(.bouw--stil) .stap--nu .stap__naam { font-size: 2.6rem; }
    /* Hier staan kop en fase niet over elkaar, dus de fase blijft na afloop staan. */
    .bouw--af:not(.bouw--stil) .bouw__stappen { opacity: 1; transform: none; }
    .bouw--af:not(.bouw--stil) .bouw__lang { display: none; }
  }
}
@keyframes fase-in { from { opacity: 0; transform: translateY(10px); } }

/* Verschijnen bij scrollen, alleen als pagina.js draait en beweging mag. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-toon] { opacity: 0; transform: translateY(28px); transition: opacity 1.2s var(--uit), transform 1.2s var(--uit); }
  .js [data-toon].is-zichtbaar { opacity: 1; transform: none; }

  /* Beeld onthult zich van onder naar boven en zoomt tegelijk rustig uit. */
  .js [data-onthul] { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--uit); }
  .js [data-onthul] img { transform: scale(1.18); transition: transform 2.2s var(--uit); }
  .js [data-onthul].is-zichtbaar { clip-path: inset(0 0 0 0); }
  .js [data-onthul].is-zichtbaar img { transform: none; }
}

/* ---------- Opening: op een rustige, wat donker gemaakte foto ----------
   De foto bleef toch (8 okt avond, Thijs). Geen overloop naar zwart meer: de
   site is licht, dus de foto staat als een blok tussen de kop en het werk. */
.opening {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(120px, 17vw, 260px) var(--kant);
  text-align: center;
  --tekst: var(--bot);
  --zacht: var(--bot-zacht);
  --lijn: var(--bot-lijn);
  color: var(--bot);
}
.opening__beeld { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.opening::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(18, 17, 14, 0.5), rgba(18, 17, 14, 0.38) 50%, rgba(18, 17, 14, 0.5)),
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(18, 17, 14, 0.3), rgba(18, 17, 14, 0));
}
.opening h2 { margin: 0 auto; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.feiten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 920px;
  margin: clamp(72px, 10vw, 140px) auto 0;
}
.feiten > div { display: flex; flex-direction: column-reverse; gap: 14px; padding: 0 12px; }
.feiten > div + div { border-left: 1px solid var(--lijn); }
.feiten dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--zacht); }
.feiten dd { margin: 0; font-family: var(--serif); font-size: clamp(3rem, 7vw, 6rem); line-height: 0.9; }

/* ---------- Werk: zes balken, er staat er steeds één open ----------
   Zonder script groeit de open balk (flex). Met script (.is-los) is elke balk
   altijd zo breed als een open balk; pagina.js zet hem op zijn plek (--x) en
   knipt er links en rechts een stuk af (--a). Bij openen schuift alleen dat
   venster open, zonder dat de browser de rij opnieuw hoeft op te bouwen: dat
   hapert niet in Safari. Op de telefoon hetzelfde, maar dan onder elkaar. */
.werk { padding-top: clamp(96px, 12vw, 180px); }
.werk__kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--kant) clamp(40px, 5vw, 72px);
}
.werk__teller { font-family: var(--serif); font-size: clamp(2.8rem, 6.6vw, 6.6rem); line-height: 0.92; color: var(--messing); }
.balken {
  --gat: 8px;
  list-style: none;
  margin: 0 var(--kant);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gat);
  height: min(86svh, 760px);
}
.balk {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #000;
  transition: flex-grow 0.8s var(--uit);
}
.balk.is-open { flex-grow: 6; }
.balk img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transform: scale(1.08);
  transition: opacity 0.8s var(--uit), transform 1.4s var(--uit);
}
.balk.is-open img { opacity: 1; transform: none; }
.balk::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 9, 7, 0.86) 0%, rgba(10, 9, 7, 0.35) 38%, rgba(10, 9, 7, 0) 64%);
}
.balk__knop {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0 18px;
  border: 0;
  background: none;
  color: var(--bot);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.4s ease;
}
.balk.is-open .balk__knop { opacity: 0; }
.balk__nr { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; color: var(--messing); font-variant-numeric: tabular-nums; }
.balk__naam { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; }
.balk__info {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: 0 20px 22px;
  color: var(--bot);
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.7s var(--uit), visibility 0s linear 0.4s;
  pointer-events: none;
}
.balk.is-open .balk__info { visibility: visible; opacity: 1; transform: none; transition-delay: 0.3s, 0.3s, 0s; }
.balk__info h3 { font-size: clamp(2rem, 4.4vw, 4.4rem); line-height: 0.95; }
.balk__info p { max-width: 30rem; font-size: 0.95rem; color: var(--bot-zacht); }
.balk__maat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.balk__maat i, .voet__rij i { display: inline-block; width: 18px; height: 1px; background: currentColor; opacity: 0.6; }
@media (min-width: 900px) {
  .balken { flex-direction: row; height: min(82vh, 760px); min-height: 540px; }
  .balk__knop { flex-direction: column; justify-content: space-between; align-items: center; padding: 26px 0; }
  .balk__naam { writing-mode: vertical-rl; transform: rotate(180deg); }
  .balk__info { padding: 0 clamp(28px, 3vw, 48px) clamp(28px, 4vh, 44px); }
}
@media (max-width: 899px) {
  .balk::after { background: linear-gradient(to top, rgba(10, 9, 7, 0.92) 0%, rgba(10, 9, 7, 0.62) 48%, rgba(10, 9, 7, 0) 80%); }
  .balk__info { gap: 10px; }
  .balk__info h3 { font-size: 2rem; }
  .balk__info p { font-size: 0.88rem; }
}

/* Met script: schuiven en knippen in plaats van groeien */
.balken.is-los { display: block; position: relative; }
.is-los > .balk {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--open-b);
  height: 100%;
  transform: translateX(var(--x, 0px));
  clip-path: inset(0 var(--a, 0px));
  transition: transform 0.75s var(--uit), clip-path 0.75s var(--uit);
  will-change: transform, clip-path;
}
.is-los .balk__knop { left: 50%; width: var(--dicht-b); transform: translateX(-50%); }
@media (max-width: 899px) {
  .is-los > .balk {
    width: 100%;
    height: var(--open-b);
    transform: translateY(var(--x, 0px));
    clip-path: inset(var(--a, 0px) 0);
  }
  .is-los .balk__knop { left: 0; width: 100%; top: 50%; bottom: auto; height: var(--dicht-b); transform: translateY(-50%); }
}
.is-los.is-direct > .balk { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .balk, .balk img, .balk__knop, .balk__info { transition: none !important; }
}

/* ---------- Vakmanschap ---------- */
.vak {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 clamp(16px, 2vw, 32px);
  padding: clamp(120px, 15vw, 220px) var(--kant);
}
.vak figure { overflow: hidden; }
.vak img { width: 100%; height: 100%; object-fit: cover; }
.vak__groot { grid-column: 1 / 8; aspect-ratio: 4 / 5; }
.vak__tekst { grid-column: 9 / 13; align-self: center; }
.vak__tekst h2 { margin-bottom: clamp(24px, 3vw, 40px); }
.vak__tekst p:last-child { max-width: 22rem; color: var(--zacht); }
@media (max-width: 899px) {
  .vak { row-gap: 48px; }
  .vak__groot, .vak__tekst { grid-column: 1 / -1; }
}

/* ---------- Werkwijze: drie regels ---------- */
.afspraak { padding: clamp(120px, 15vw, 220px) var(--kant) clamp(96px, 12vw, 180px); }
.drie {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  margin: 0;
  padding: 0;
}
.drie li { padding-top: 28px; border-top: 1px solid var(--lijn); }
.drie li:nth-child(2) { transition-delay: 0.12s; }
.drie li:nth-child(3) { transition-delay: 0.24s; }
.drie span { display: block; margin-bottom: clamp(28px, 4vw, 56px); font-family: var(--serif); font-size: 1.3rem; color: var(--messing); }
.drie h3 { margin-bottom: 16px; font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
.drie p { color: var(--zacht); max-width: 20rem; }
@media (max-width: 899px) {
  .drie { grid-template-columns: 1fr; }
}

/* ---------- Energielabel ---------- */
.label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  padding: clamp(96px, 11vw, 160px) var(--kant);
}
/* Wit en slank sinds 8 okt avond (Thijs): geen foto meer, een dunne letter. */
.label__groot { font-size: clamp(4.2rem, 10vw, 10rem); line-height: 0.8; letter-spacing: -0.045em; margin-bottom: clamp(20px, 2.4vw, 32px); }
.label__tekst > p:last-child { color: var(--zacht); }
.label { --groen: #0b7a3e; }
.label__groot { color: var(--groen); }
/* Kleur sinds 8 okt laat (Thijs): de balken zoals op een echt energielabel,
   van donkergroen naar rood. Muis erop: de balk wordt groter. */
.ladder ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ladder li { --w: 30%; --k: #0b7a3e; --t: #fff; display: flex; align-items: center; gap: 18px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; color: var(--zacht); }
.ladder li span {
  width: var(--w);
  min-width: 6.2em;
  flex: none;
  padding: 9px 22px 9px 14px;
  background: var(--k);
  color: var(--t);
  font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  transform-origin: left center;
}
.ladder b { font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; }
.ladder li:nth-child(2) { --w: 37%; --k: #1f9446; }
.ladder li:nth-child(3) { --w: 44%; --k: #4caf3f; }
.ladder li:nth-child(4) { --w: 51%; --k: #86c33b; --t: #1c2a12; }
.ladder li:nth-child(5) { --w: 58%; --k: #bcd531; --t: #1c2a12; }
.ladder li:nth-child(6) { --w: 65%; --k: #f0d81d; --t: #2a2408; }
.ladder li:nth-child(7) { --w: 72%; --k: #f5a01c; --t: #2a1a06; }
.ladder li:nth-child(8) { --w: 79%; --k: #e2442b; }
.ladder .is-wij { color: var(--groen); }
.ladder .is-wij span { padding-block: 14px; font-size: 0.95rem; }
.ladder .is-gemiddeld { color: var(--tekst); }
/* Groter worden gaat via scale, los van de inschuif-animatie op transform. */
.ladder li span { transition: transform 1.2s var(--uit) var(--v, 0s), scale 0.35s var(--uit), filter 0.35s var(--uit); }
.ladder b { transition: translate 0.35s var(--uit); }
@media (hover: hover) {
  .ladder li:hover span { scale: 1.08; filter: saturate(1.15) brightness(1.05); }
  .ladder li:hover b { translate: 10px 0; }
}
.ladder li:nth-child(2) { --v: 0.06s; }
.ladder li:nth-child(3) { --v: 0.12s; }
.ladder li:nth-child(4) { --v: 0.18s; }
.ladder li:nth-child(5) { --v: 0.24s; }
.ladder li:nth-child(6) { --v: 0.3s; }
.ladder li:nth-child(7) { --v: 0.36s; }
.ladder li:nth-child(8) { --v: 0.42s; }
@media (prefers-reduced-motion: no-preference) {
  .js .ladder li span { transform: scaleX(0); }
  .js .ladder.is-zichtbaar li span { transform: none; }
}
.waarom { grid-column: 1 / -1; padding-top: clamp(24px, 4vw, 56px); }
.waarom dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px);
  margin: 0;
}
.waarom dl > div { padding-top: 24px; border-top: 3px solid var(--groen); transform-origin: left bottom; }
.waarom dl > div:nth-child(2) { --v: 0.1s; }
.waarom dl > div:nth-child(3) { --v: 0.2s; }
.waarom dl > div:nth-child(4) { --v: 0.3s; }
.waarom dl > div, .js .waarom dl > [data-toon] { transition: opacity 1.2s var(--uit) var(--v, 0s), transform 1.2s var(--uit) var(--v, 0s), scale 0.35s var(--uit); }
@media (hover: hover) { .waarom dl > div:hover { scale: 1.05; } }
.waarom dt { margin-bottom: 10px; font-family: var(--serif); font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1; }
.waarom dd { margin: 0; max-width: 19rem; font-size: 0.92rem; color: var(--zacht); }
@media (max-width: 899px) {
  .label { grid-template-columns: 1fr; }
  .waarom dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .waarom dl { grid-template-columns: 1fr; }
  .ladder li span { width: calc(var(--w) * 0.8); }
  .ladder b { font-size: 0.66rem; letter-spacing: 0.14em; }
}

/* ---------- Notities van bewoners ----------
   Zeven briefjes op een rij die langzaam naar rechts schuiven (8 okt avond,
   Thijs). Muis erop: de rij staat stil en dat briefje wordt groter. pagina.js
   zet de rij er een tweede keer achter, zodat hij naadloos rondloopt. Zonder
   JavaScript of bij "minder beweging" staat de rij stil en schuif je zelf. */
.notities { padding: clamp(110px, 13vw, 200px) 0; }
.notities > .boventitel { padding: 0 var(--kant); color: var(--messing); }
.notities__baan {
  overflow-x: auto;
  padding: 36px var(--kant) 56px;
  scrollbar-width: none;
}
.notities__spoor {
  --gat: clamp(16px, 2vw, 28px);
  display: flex;
  align-items: flex-start;
  gap: var(--gat);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.noot {
  flex: none;
  width: clamp(250px, 24vw, 330px);
  padding: clamp(26px, 2.4vw, 34px) clamp(22px, 2vw, 30px) 24px;
  background: #f3efe7;
  color: #1a1813;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  transition: transform 0.6s var(--uit), box-shadow 0.6s var(--uit);
}
/* Niet allemaal op één lijn: een paar briefjes zakken wat. Per zeven, zodat de
   tweede rij precies hetzelfde staat. */
.noot:nth-child(7n+2), .noot:nth-child(7n+5) { margin-top: 48px; }
.noot:nth-child(7n+4), .noot:nth-child(7n+7) { margin-top: 20px; }
.noot blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.35rem, 1.7vw, 1.65rem); line-height: 1.15; }
.noot blockquote::before { content: "“"; display: block; height: 0.5em; font-size: 2.4em; line-height: 1; color: #7a6440; }
.noot__wie { margin-top: 22px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #7a6440; }
.noot__wie span { display: block; margin-top: 4px; color: #5c564b; }
@media (hover: hover) {
  .noot:hover { position: relative; z-index: 1; transform: scale(1.1); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.42); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .notities__baan { overflow: hidden; padding-inline: 0; }
  .js .notities__spoor { animation: noten-schuif 90s linear infinite; }
  .js .notities__baan:hover .notities__spoor { animation-play-state: paused; }
}
/* Eén rij plus één gat verder, dan staat de tweede rij waar de eerste stond. */
@keyframes noten-schuif {
  from { transform: translateX(calc(-50% - var(--gat) / 2)); }
  to { transform: none; }
}

/* ---------- Contact ---------- */
.contact {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px var(--kant);
  overflow: hidden;
  text-align: center;
}
.contact__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(18, 17, 14, 0.72), rgba(18, 17, 14, 0.88)); }
.contact__binnen { position: relative; z-index: 2; display: grid; justify-items: center; }
.contact h2 { font-size: clamp(3.4rem, 9vw, 9rem); line-height: 0.88; }
.contact__melding { max-width: 27rem; margin: clamp(28px, 4vw, 48px) 0 32px; font-size: 0.95rem; color: var(--bot); opacity: 0.8; }

/* ---------- Achtergronden: elke zone een ander huis (8 okt) ----------
   Thijs: geen kale zwarte vlakken, en niet drie keer dezelfde villa. Alleen
   het energielabel is effen wit (8 okt avond, Thijs).
   Donkere zones (.met-beeld) liggen op een donker gemaakte foto. De lichte
   zones zijn effen; de boom achter vakmanschap ging eruit (8 okt, Thijs). De huizen komen uit Google Flow
   (bron/achtergrond/). Bij scrollen zoomt elke foto rustig uit, in browsers
   die dat zonder script kunnen; elders staat hij stil. */
.met-beeld { position: relative; isolation: isolate; overflow: hidden; }
.contact { isolation: isolate; }
.achter { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.met-beeld::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Werkwijze: de schuurwoning bij het blauwe uur, onder de drie regels. */
.afspraak.met-beeld { padding-bottom: clamp(340px, 44vw, 640px); }
.afspraak .achter { object-position: center 80%; }
.afspraak::before { background: linear-gradient(to bottom, rgba(18, 17, 14, 0.78) 0%, rgba(18, 17, 14, 0.55) 30%, rgba(18, 17, 14, 0.15) 70%, rgba(18, 17, 14, 0.5) 100%); }
/* Telefoon: de drie regels staan onder elkaar, dus het huis komt eronder als band. */
@media (max-width: 899px) {
  .afspraak.met-beeld { padding-bottom: 58svh; }
  .afspraak .achter { top: auto; height: 64svh; object-position: 58% 80%; }
  .afspraak::before { background: linear-gradient(to bottom, var(--nacht) calc(100% - 64svh), rgba(18, 17, 14, 0.2) calc(100% - 40svh), rgba(18, 17, 14, 0.45) 100%); }
}

/* Notities: de woonkamer bij schemer, donker genoeg dat de briefjes eruit springen. */
.notities.met-beeld::before { background: radial-gradient(ellipse at center, rgba(18, 17, 14, 0.7), rgba(18, 17, 14, 0.86)); }


/* Contact: het huis in de duinen mag er meer doorheen komen dan de oude villa. */
.contact::before { background: radial-gradient(ellipse at center, rgba(18, 17, 14, 0.62), rgba(18, 17, 14, 0.82)); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .achter {
      animation: achter-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes achter-zoom {
  from { transform: scale(1.16) translateY(-3%); }
  to { transform: scale(1.02) translateY(3%); }
}

/* ---------- Voet ---------- */
.voet { padding: clamp(72px, 9vw, 140px) var(--kant) 32px; overflow: hidden; }
.voet__merk {
  font-family: var(--serif);
  font-size: clamp(3rem, 13.4vw, 15rem);
  line-height: 0.8;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tekst);
  opacity: 0.92;
}
.voet__rij {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--lijn);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zacht);
}
.voet__rij p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.voet__rij a { color: var(--tekst); }