/* ============================================================================
   Van Baelen Interieur — chrome + secties
   Gedeeld: balk, mobiel menu, sticky CTA, voet, lightbox.
   Home: hero · statement · projecten · vakmanschap · stijlen · proces ·
         persoonlijk · getuigenissen · slot-CTA.
   Subpagina's: paginakop, filters, projectkaarten, spec-tabel, formulier, faq.
   ========================================================================== */

/* --- Balk ------------------------------------------------------------------ */
.balk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header);
  padding-inline: var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--d-1) var(--ease-inout),
    color 300ms var(--ease-inout),
    border-color var(--d-1) var(--ease-inout);
}

/* Boven de hero: transparant en licht. */
.balk.is-hero:not(.is-compact) {
  color: var(--papier);
}

.balk.is-compact {
  background: rgba(242, 239, 232, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--potlood);
  color: var(--inkt);
}

.balk.is-nacht {
  color: var(--papier);
}
.balk.is-nacht.is-compact {
  background: rgba(23, 23, 22, 0.86);
  border-bottom-color: rgba(242, 239, 232, 0.2);
}

.balk__merk {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: none;
}

.balk__logo {
  width: 128px; height: 128px;
  flex: none;
  border-radius: 50%;
  transition: width var(--d-1) var(--ease-inout), height var(--d-1) var(--ease-inout);
}

.balk.is-compact .balk__logo { width: 96px; height: 96px; }

.balk__naam {
  display: flex;
  flex-direction: column;
  gap: 5px;
  white-space: nowrap;
}

/* Merknaam, gekozen optie 7: losse naam, dun taupe lijntje, wijde subregel. */
.balk__naam-hoofd {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Het lijntje tussen naam en subregel, zonder extra markup. */
.balk__naam-hoofd::after {
  content: '';
  display: block;
  height: 1px;
  background: rgba(199, 188, 175, 0.45);
  margin-top: 7px;
}

.balk__naam-sub {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  opacity: 0.65;
}

@media (max-width: 640px) {
  .balk__logo { width: 76px; height: 76px; }
  .balk.is-compact .balk__logo { width: 64px; height: 64px; }
  .balk__naam-hoofd { font-size: 1.5rem; }
  .balk__naam-sub { font-size: 0.6875rem; }
}

@media (max-width: 1640px) and (min-width: 1461px) {
  .balk__naam-hoofd { font-size: 1.875rem; }
  .balk__logo { width: 104px; height: 104px; }
}

/* Navigatie */
.balk__nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.8vw, 2.2rem);
}

.balk__nav a:not(.knop) {
  position: relative;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  opacity: 0.85;
  transition: opacity var(--d-1);
  padding-block: 6px;
}

.balk__nav a:not(.knop):hover { opacity: 1; }

/* Hover en actieve pagina: de link wordt iets groter (geen onderlijn). */
.balk__nav a:not(.knop) {
  display: inline-block;
  transform-origin: center;
  transition: opacity var(--d-1), transform var(--d-1) var(--ease-lade);
}

.balk__nav a:not(.knop):hover { transform: scale(1.14); }

.balk__nav a[aria-current='page'] {
  opacity: 1;
  font-weight: 600;
  transform: scale(1.14);
}


.balk__nav .knop { padding: 16px 30px; }

@media (max-width: 1460px) {
  .balk__nav { display: none; }
}

/* Hamburger */
.balk__menu {
  display: none;
  position: relative;
  z-index: 130;
  width: 44px; height: 44px;
}

.balk__menu::before,
.balk__menu::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 22px; height: 1.5px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform 380ms var(--ease-lade);
}

.balk__menu::before { top: calc(50% - 4px); }
.balk__menu::after { top: calc(50% + 4px); }

.menu-open .balk__menu { color: var(--papier); }
.menu-open .balk__menu::before { transform: translateX(-50%) translateY(4px) rotate(45deg); }
.menu-open .balk__menu::after { transform: translateX(-50%) translateY(-4px) rotate(-45deg); }

@media (max-width: 1460px) {
  .balk__menu { display: block; }
}

/* Voortgangslijn — het enige permanente bordeaux-element. */
.balk__voortgang {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--bordeaux);
  transform: scaleX(var(--doc-p, 0));
  transform-origin: left;
}

/* Mobiel menu-overlay */
.menu-vlak {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--nacht);
  color: var(--papier);
  display: grid;
  align-content: center;
  gap: 4px;
  padding: var(--marge);
}

.menu-vlak[hidden] { display: none; }

.menu-vlak a:not(.knop) {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 9vw, 4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}

.menu-open .menu-vlak a:not(.knop) { opacity: 1; transform: none; }
.menu-open .menu-vlak a:nth-child(2) { transition-delay: 50ms; }
.menu-open .menu-vlak a:nth-child(3) { transition-delay: 100ms; }
.menu-open .menu-vlak a:nth-child(4) { transition-delay: 150ms; }
.menu-open .menu-vlak a:nth-child(5) { transition-delay: 200ms; }
.menu-open .menu-vlak a:nth-child(6) { transition-delay: 250ms; }

.menu-vlak a[aria-current='page'] { color: var(--taupe); }

.menu-vlak .knop {
  margin-top: 2rem;
  justify-self: start;
  opacity: 0;
  transition: opacity 460ms var(--ease-out) 320ms;
}
.menu-open .menu-vlak .knop { opacity: 1; }

.menu-vlak__meta {
  margin-top: 2.5rem;
  display: grid;
  gap: 4px;
  font-size: var(--fs-caption);
  color: rgba(242, 239, 232, 0.6);
  opacity: 0;
  transition: opacity 460ms 380ms;
}
.menu-open .menu-vlak__meta { opacity: 1; }

/* De contactregels in het menu zijn gewone tekst, niet de grote navigatie:
   anders loopt het e-mailadres van het scherm af. */
.menu-vlak__meta a:not(.knop) {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* --- Sticky mobiele CTA ----------------------------------------------------- */
.mob-cta {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 90;
  display: none;
}

.mob-cta .knop {
  width: 100%;
  box-shadow: 0 8px 28px rgba(23, 23, 22, 0.28);
}

@media (max-width: 640px) {
  .mob-cta { display: block; }
  body { padding-bottom: 76px; }
}

/* --- Hero (volledig scherm) -------------------------------------------------- */
.held {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: var(--papier);
  display: grid;
  align-content: end;
}

.held .cinema {
  position: absolute;
  inset: 0;
}

.held .cinema > img { height: 100%; }

.held__inhoud {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(4rem, 11vh, 8rem);
}

.held__titel {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  line-height: 0.94;
  letter-spacing: -0.03em;
  max-width: 12ch;
}

.held__lead {
  margin-top: 1.6rem;
  font-size: var(--fs-lead);
  line-height: 1.45;
  max-width: 44ch;
  color: rgba(242, 239, 232, 0.88);
}

.held__acties {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.held__cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.held__cue-lijn {
  width: 1px;
  height: 52px;
  background: rgba(242, 239, 232, 0.35);
  position: relative;
}

.held__cue-lijn::after {
  content: '';
  position: absolute;
  left: -2.5px; top: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--papier);
  animation: cue-stip 2.4s var(--ease-inout) infinite;
}

@keyframes cue-stip {
  0% { top: 0; opacity: 1; }
  70% { top: calc(100% - 6px); opacity: 1; }
  100% { top: calc(100% - 6px); opacity: 0; }
}

/* --- Statement (donker, gepind — inkt-reveal) -------------------------------- */
.belofte { height: 170svh; background: var(--nacht); }

.belofte__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  padding-inline: var(--marge);
  background: var(--nacht);
  color: var(--papier);
}

/* Sfeerfoto achter het statement — donker gehouden zodat de tekst draagt. */
.belofte__foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.belofte__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}

/* Achtergrondwissel: liggend badkamerbeeld op groot scherm, staande
   kastenwand-04 op gsm. */
.belofte__foto--smal { display: none; }

@media (max-width: 720px) {
  .belofte__foto--breed { display: none; }
  .belofte__foto--smal { display: block; }
}

.belofte__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 23, 22, 0.6) 0%, rgba(23, 23, 22, 0.2) 60%);
}

.belofte__binnen {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
}

.belofte__regels { display: grid; gap: 1.4em; }

.regel { position: relative; --fs-regel: var(--fs-display); }

/* Beide kopieën als blok met identieke metriek, zodat de witte laag de
   grijze pixelprecies afdekt (inline vs. blok gaf een verschoven G). */
.regel__tekst {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-regel);
  line-height: 1.06;
  letter-spacing: -0.028em;
  white-space: nowrap;
}

/* Op telefoon: kleiner en mét afbreken, anders loopt de regel het scherm uit.
   Beide kopieën breken identiek (zelfde breedte), dus de inktlaag blijft dekkend. */
@media (max-width: 720px) {
  .regel { --fs-regel: min(var(--fs-display), 8vw); }
  .regel__tekst { white-space: normal; }
  .regel__zaag { display: none; }
}

.regel__potlood { color: rgba(242, 239, 232, 0.16); }

.regel__inkt {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--papier);
  clip-path: inset(-15% calc((1 - var(--t, 0)) * 100.5%) -15% 0);
}

.regel__zaag {
  position: absolute;
  /* Alleen zo hoog als de titelregel, niet de subtekst eronder. */
  top: calc(var(--fs-regel) * -0.04);
  height: calc(var(--fs-regel) * 1.14);
  left: calc(var(--t, 0) * 100%);
  width: 1px;
  background: var(--taupe);
  opacity: calc(min(var(--t, 0) * 20, 1) - max(0, (var(--t, 0) - 0.9)) * 10);
  pointer-events: none;
}

.regel__sub {
  margin-top: 1em;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgba(242, 239, 232, 0.62);
  max-width: 52ch;
}

@media (max-width: 700px) {
  .regel__tekst { white-space: normal; }
}

/* --- Uitgelichte projecten (editoriaal, afwisselend) -------------------------- */
.projecten__kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: calc(var(--stap) * 1.25);
}

.project-kaart {
  display: block;
  margin-bottom: calc(var(--stap) * 1.75);
}

.project-kaart:last-of-type { margin-bottom: 0; }

.project-kaart__media {
  position: relative;
  overflow: hidden;
}

/* Kaart-hover: het beeld komt licht naar voren. Een animerende scale tekent
   op grote lagen flikkerende naadlijnen, dus het beeld zelf beweegt nooit;
   een statisch grotere kopie (JS: .kaart-zoom) vloeit alleen in opacity over. */
.project-kaart__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-kaart__media .kaart-zoom {
  position: absolute;
  inset: 0;
  transform: scale(1.04);
  opacity: 0;
  transition: opacity 650ms var(--ease-out);
  pointer-events: none;
}

.project-kaart:hover .kaart-zoom,
.project-kaart:focus-visible .kaart-zoom { opacity: 1; }

/* Volle breedte */
.project-kaart--vol .project-kaart__media { aspect-ratio: 21 / 10; }

/* Asymmetrisch: beeld + tekstkolom */
.project-kaart--links,
.project-kaart--rechts {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--kolomgap);
  align-items: end;
}

.project-kaart--links .project-kaart__media { grid-column: 1 / span 8; aspect-ratio: 4 / 3; }
.project-kaart--links .project-kaart__info { grid-column: 10 / span 3; }

.project-kaart--rechts .project-kaart__media { grid-column: 5 / span 8; aspect-ratio: 4 / 3; }
.project-kaart--rechts .project-kaart__info { grid-column: 1 / span 3; grid-row: 1; }

.project-kaart--vol .project-kaart__info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 18px;
}

.project-kaart__code {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--notelaar);
}

.project-kaart__titel {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 0.35em;
}

.project-kaart__meta {
  margin-top: 0.6em;
  font-size: var(--fs-caption);
  color: var(--grafiet);
}

.project-kaart__omschrijving {
  margin-top: 0.9em;
  font-size: var(--fs-caption);
  color: var(--grafiet);
  max-width: 34ch;
}

.project-kaart__cta {
  margin-top: 1.2em;
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt);
}

.project-kaart:hover .project-kaart__cta { color: var(--bordeaux); }

@media (max-width: 900px) {
  .project-kaart--links,
  .project-kaart--rechts { display: block; }
  .project-kaart--links .project-kaart__info,
  .project-kaart--rechts .project-kaart__info { padding-top: 16px; }
  .project-kaart--vol .project-kaart__media { aspect-ratio: 4 / 3; }
}

/* --- Vakmanschap (donkere band met close-ups) --------------------------------- */
.vakmanschap { color: var(--papier); }

/* Op vraag van de klant: de vier foto's strak bij elkaar in een vierkant. */
.vakmanschap__grid {
  margin-top: calc(var(--stap) * 1.25);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--kolomgap);
  max-width: min(100%, 1080px);
}

.vakmanschap .cinema { background: #23231f; }
.vakmanschap__grid .cinema { aspect-ratio: 1 / 1; }

.vakmanschap figcaption {
  padding-top: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.55);
}

/* Duidelijk gelabelde media-placeholder (te vervangen door echte video). */
.media-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border: 1px dashed rgba(242, 239, 232, 0.35);
  text-align: center;
  padding: 1.5rem;
  gap: 8px;
  align-content: center;
}

.media-placeholder .t-label { color: rgba(242, 239, 232, 0.55); }



/* --- Stijlrichtingen (op maat gemaakt) ----------------------------------------- */
.stijlen__grid {
  margin-top: calc(var(--stap) * 1.25);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kolomgap);
}

.stijl {
  display: block;
}

.stijl .mount__beeld { aspect-ratio: 3 / 4; }

.stijl img { transition: transform 1.2s var(--ease-out); }
.stijl:hover img { transform: scale(1.035); }

.stijl__naam {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2.25rem);
  letter-spacing: -0.02em;
}

.stijl__tekst { margin-top: 0.5em; font-size: var(--fs-caption); color: var(--grafiet); max-width: 34ch; }

@media (max-width: 820px) {
  .stijlen__grid { grid-template-columns: 1fr; row-gap: calc(var(--stap) * 1.1); }
}

/* --- Proces (grote nummers) ----------------------------------------------------- */
.proces__stappen {
  margin-top: calc(var(--stap) * 1.25);
  display: grid;
}

.proces-stap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(96px, 180px) 1fr;
  column-gap: var(--kolomgap);
  align-items: baseline;
  padding-block: clamp(1.75rem, 3.5vh, 3rem);
  border-top: 1px solid var(--potlood);
}

.proces-stap:last-child { border-bottom: 1px solid var(--potlood); }

.proces-stap__num {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 2rem + 3.6vw, 6rem);
  line-height: 0.9;
  color: var(--notelaar);
  font-variant-numeric: tabular-nums;
}

.proces-stap__titel { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; }
.proces-stap__tekst { margin-top: 0.5em; color: var(--grafiet); max-width: 56ch; }

@media (max-width: 640px) {
  .proces-stap { grid-template-columns: 72px 1fr; }
}

/* --- Persoonlijk ------------------------------------------------------------------ */
.persoonlijk__media { grid-column: 1 / span 5; }
.persoonlijk__tekst { grid-column: 7 / span 6; align-self: center; }

.persoonlijk__feiten { margin-top: calc(var(--stap) * 0.75); display: grid; }
.persoonlijk__feiten > div {
  padding-block: 12px;
  border-top: 1px solid var(--potlood);
}

@media (max-width: 900px) {
  .persoonlijk__media { grid-column: 1 / -1; }
  .persoonlijk__tekst { grid-column: 1 / -1; margin-top: var(--stap); }
}

/* --- Getuigenissen ------------------------------------------------------------------ */
.getuigen__grid {
  margin-top: calc(var(--stap) * 1.25);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kolomgap);
}

.getuige {
  border-top: 1px solid var(--potlood);
  padding-top: 1.5rem;
  display: grid;
  gap: 1rem;
  align-content: start;
}

.getuige__tekst {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.625rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--inkt);
}

.getuige__wie { font-size: var(--fs-caption); color: var(--grafiet); }

.getuige--placeholder { opacity: 0.75; }
.getuige--placeholder .getuige__tekst { color: var(--grafiet); }

@media (max-width: 820px) {
  .getuigen__grid { grid-template-columns: 1fr; }
}

/* --- Slot-CTA (volledig scherm) ------------------------------------------------------ */
.slot {
  position: relative;
  min-height: 92svh;
  display: grid;
  align-content: center;
  overflow: hidden;
  color: var(--papier);
}

.slot .cinema { position: absolute; inset: 0; }
.slot .cinema > img { height: 100%; }
/* Sluier van links: tekst blijft leesbaar, de foto blijft grotendeels zichtbaar. */
.slot .cinema__sluier {
  background:
    linear-gradient(to right, rgba(23, 23, 22, 0.82) 0%, rgba(23, 23, 22, 0.42) 52%, rgba(23, 23, 22, 0.1) 100%),
    linear-gradient(to top, rgba(23, 23, 22, 0.35) 0%, rgba(23, 23, 22, 0) 40%);
}

.slot__inhoud { position: relative; z-index: 2; }

.slot__titel {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.028em;
  max-width: 14ch;
}

.slot__tekst {
  margin-top: 1.4rem;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: rgba(242, 239, 232, 0.85);
  max-width: 44ch;
}

.slot__acties { margin-top: 2.2rem; }

/* --- Voet ---------------------------------------------------------------------------- */
.voet { border-top: 1px solid var(--hairline, var(--potlood)); padding-block: calc(var(--stap) * 1.25) var(--stap); }

.voet__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--stap) var(--kolomgap);
}

.voet__kolom { display: grid; gap: 8px; align-content: start; justify-items: start; }
.voet__kolom .t-label { margin-bottom: 8px; color: var(--taupe); }

.voet__onder {
  margin-top: calc(var(--stap) * 1);
  padding-top: 18px;
  border-top: 1px solid var(--hairline, var(--potlood));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.voet__merk { display: flex; align-items: center; gap: 10px; }
.voet__merk img { width: 24px; height: 24px; border-radius: 50%; }

@media (max-width: 720px) {
  .voet__grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   SUBPAGINA-BOUWBLOKKEN
   ========================================================================== */

/* Paginakop (voor subpagina's zonder volle hero) */
.pagina-kop {
  padding-top: calc(var(--header) + clamp(48px, 9vh, 110px));
  padding-bottom: calc(var(--stap) * 1.25);
}

.pagina-kop__titel {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: 0.96;
  letter-spacing: -0.028em;
  max-width: 14ch;
}

.pagina-kop .t-lead { margin-top: 1.4rem; }

/* Filters (realisaties) */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: calc(var(--stap) * 1);
}

.filters button {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--potlood);
  color: var(--grafiet);
  transition: color var(--d-1), border-color var(--d-1), background-color var(--d-1);
}

.form__status { margin-top: 14px; }
.form__status:empty { display: none; }

.filters button:hover { color: var(--inkt); border-color: var(--inkt); }

.filters button.is-actief {
  color: var(--papier);
  background: var(--inkt);
  border-color: var(--inkt);
}

/* Werkenraster (realisaties-overzicht) */
.werken-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--stap) * 1.25) var(--kolomgap);
}

.werken-grid .project-kaart { margin-bottom: 0; }
.werken-grid .project-kaart__media { aspect-ratio: 4 / 5; }
.werken-grid .project-kaart--breed { grid-column: 1 / -1; }
.werken-grid .project-kaart--breed .project-kaart__media { aspect-ratio: 21 / 10; }

.project-kaart.is-weggefilterd { display: none; }

@media (max-width: 720px) {
  .werken-grid { grid-template-columns: 1fr; }
  .werken-grid .project-kaart--breed .project-kaart__media { aspect-ratio: 4 / 5; }
}

/* Projectdetail */
/* Zo hoog mogelijk: de projectfoto's zijn staand, dus hoe hoger de held,
   hoe meer van de foto zichtbaar is en hoe minder "ingezoomd" hij oogt. */
.project-held {
  position: relative;
  height: 96svh;
  min-height: 480px;
  overflow: hidden;
  color: var(--papier);
  display: grid;
  align-content: end;
}

.project-held .cinema { position: absolute; inset: 0; }
.project-held .cinema > img { height: 100%; }

/* Op telefoon is de smalle uitsnede soms verkeerd gecentreerd; een pagina kan
   dan per foto een eigen focuspunt meegeven (inline --fokus-mobiel). */
@media (max-width: 720px) {
  .project-held .cinema > img { object-position: var(--fokus-mobiel, 50% 50%); }
}

/* Held-foto per formaat: liggend beeld op groot scherm, staand op gsm. */
.cinema__smal { display: none; }

@media (max-width: 720px) {
  .cinema__breed { display: none; }
  .cinema__smal { display: block; }

  /* De staande foto volledig tonen: held krijgt de verhouding van de foto,
     zodat de boogcompositie niet aan de zijkanten wordt weggesneden. */
  .project-held--vol-mobiel { height: auto; min-height: 0; aspect-ratio: 3 / 4; }
}
.project-held__inhoud { position: relative; z-index: 2; padding-bottom: clamp(3rem, 8vh, 6rem); }

.spec-tabel { display: grid; border-top: 1px solid var(--potlood); }

.spec-tabel > div {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr;
  gap: var(--kolomgap);
  padding-block: 14px;
  border-bottom: 1px solid var(--potlood);
}

.spec-tabel dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafiet);
}

.spec-tabel dd { color: var(--inkt); }

/* Beeldparen op projectpagina's */
.beeld-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kolomgap);
  align-items: start;
}

@media (max-width: 720px) {
  .beeld-paar { grid-template-columns: 1fr; }
}

/* Collage: één staand kader (zelfde vorm als de andere stapfoto's)
   met meerdere kleinere beelden erin (werkwijze, Ontwerp) */
.mount--collage .mount__beeld {
  aspect-ratio: 3 / 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.5fr 1fr 1fr;
  gap: 10px;
}

.mount--collage .mount__beeld > img { min-height: 0; min-width: 0; }
.mount--collage .mount__beeld > img:first-child { grid-column: 1 / -1; grid-row: 1; }

@media (max-width: 720px) {
  .mount--collage .mount__beeld { gap: 8px; }
}

/* Volgend project */
.volgend {
  display: block;
  border-top: 1px solid var(--potlood);
  padding-block: calc(var(--stap) * 1.25);
}

.volgend__titel {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  line-height: 1.02;
  transition: color var(--d-1);
}

.volgend:hover .volgend__titel { color: var(--bordeaux); }

/* Diensten (maatwerk) */
.dienst {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--kolomgap);
  align-items: center;
  padding-block: calc(var(--stap) * 1.1);
  border-top: 1px solid var(--potlood);
}

.dienst__media { grid-column: 1 / span 5; }
.dienst__tekst { grid-column: 7 / span 6; }
.dienst:nth-child(even) .dienst__media { grid-column: 8 / span 5; grid-row: 1; }
.dienst:nth-child(even) .dienst__tekst { grid-column: 1 / span 6; grid-row: 1; }

.dienst .mount__beeld { aspect-ratio: 4 / 3; }

@media (max-width: 900px) {
  .dienst { display: block; }
  .dienst__tekst { margin-top: 1.25rem; }
}

/* Werkwijze-pagina: sticky rail met reuzencijfer + stappen */
.werkwijze-sectie { position: relative; }

.werkwijze__rail {
  grid-column: 1 / span 4;
  position: sticky;
  top: calc(var(--header) + 14vh);
  align-self: start;
}

.werkwijze__cijfer {
  position: relative;
  height: 1em;
  width: 2ch;
  overflow: hidden;
  font-family: var(--font-serif);
  font-size: var(--fs-cijfer);
  line-height: 1;
  color: var(--notelaar);
  font-variant-numeric: tabular-nums;
  margin-top: 0.2em;
}

.werkwijze__cijfer span { position: absolute; inset: 0; }

.werkwijze__stapnaam { margin-top: 0.8rem; min-height: 2.6em; font-size: var(--fs-h3); font-weight: 500; }

.werkwijze__lijn {
  margin-top: calc(var(--stap) * 0.75);
  width: 1px;
  height: 280px;
  background: var(--potlood);
  position: relative;
}

.werkwijze__lijn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bordeaux);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}

.werkwijze__stappen { grid-column: 6 / span 7; display: grid; gap: calc(var(--stap) * 1.25); }

.stap-blok { min-height: 46svh; display: grid; gap: calc(var(--stap) * 0.5); align-content: start; }

.stap-blok__kop { display: flex; align-items: baseline; gap: 1rem; }

.stap-blok__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--notelaar);
}

.stap-blok .mount { max-width: 620px; }

@media (max-width: 900px) {
  .werkwijze__rail { display: none; }
  .werkwijze__stappen { grid-column: 1 / -1; }
  .stap-blok { min-height: 0; }
}

/* Materialenbank (maatwerk-pagina, gepind) */
.materialen { height: calc(100svh + 5 * 26svh); }

.materialen__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(300px, 42%) 1fr;
  align-items: center;
  column-gap: var(--kolomgap);
  padding-inline: var(--marge);
  max-width: var(--maxw);
  margin-inline: auto;
}

.materialen__lijst { display: grid; align-content: center; }

.materialen__kop { margin-bottom: calc(var(--stap) * 0.6); }

.mat-rij {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-height: 72px;
  padding-block: 10px;
  padding-left: 16px;
  border-bottom: 1px solid var(--potlood);
  text-align: left;
  width: 100%;
}

.mat-rij:first-of-type { border-top: 1px solid var(--potlood); }

.mat-rij::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--bordeaux);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 300ms var(--ease-inout);
}

.mat-rij[aria-selected='true']::before { transform: scaleY(1); }

.mat-rij__swatch {
  width: 48px; height: 48px;
  flex: none;
  border: 1px solid var(--potlood);
  background: var(--mount);
  padding: 3px;
  transition: transform 380ms var(--ease-stop);
  transform-origin: left center;
}

.mat-rij__swatch img { width: 100%; height: 100%; object-fit: cover; }

.mat-rij[aria-selected='true'] .mat-rij__swatch { transform: scale(1.24); }

.mat-rij__tekst { display: grid; gap: 3px; }

.mat-rij__naam {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  transition: color 200ms var(--ease-inout);
}

.mat-rij[aria-selected='true'] .mat-rij__naam { color: var(--notelaar); }

.materialen__paneel {
  position: relative;
  align-self: center;
  padding: calc(var(--stap) * 1);
  background: var(--fineer);
}

.materialen__beeld {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
}

.materialen__beeld .mount__beeld { aspect-ratio: 3 / 4; }

.materialen__beeld img.is-weg {
  position: absolute;
  inset: 14px;
  height: calc(100% - 28px);
  object-fit: cover;
}

.materialen__spec { margin-top: 12px; text-align: right; }

@media (max-width: 900px) {
  .materialen { height: auto; }
  .materialen__stage {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    padding-block: calc(var(--stap) * 2);
    row-gap: var(--stap);
  }
  .materialen__paneel { order: -1; }
}

/* FAQ / werkwijze-details */
.faq { display: grid; }

.faq details { border-top: 1px solid var(--potlood); }
.faq details:last-child { border-bottom: 1px solid var(--potlood); }

.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding-block: 1.4rem;
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color var(--d-1);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--bordeaux); }

.faq summary::after {
  content: '+';
  font-family: var(--font-serif);
  font-size: 1.5em;
  line-height: 0.8;
  color: var(--notelaar);
  flex: none;
  transition: transform 380ms var(--ease-lade);
}

.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.6rem; max-width: 62ch; color: var(--grafiet); }

/* Formulier (contact) */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--kolomgap);
}

.veld { position: relative; padding-top: 20px; }
.veld--vol { grid-column: 1 / -1; }

.veld input,
.veld select,
.veld textarea {
  width: 100%;
  height: 58px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--potlood);
  color: var(--inkt);
  padding: 0;
  border-radius: 0;
  transition: border-color var(--d-1) var(--ease-inout);
}

.veld textarea { height: auto; min-height: 110px; padding-top: 16px; resize: vertical; }
.veld select { appearance: none; cursor: pointer; }

.veld input:focus,
.veld select:focus,
.veld textarea:focus { outline: none; border-bottom-color: var(--bordeaux); }

.veld label {
  position: absolute;
  left: 0; top: 36px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafiet);
  pointer-events: none;
  transition: transform var(--d-1) var(--ease-out), color var(--d-1);
}

.veld input:focus ~ label,
.veld input:not(:placeholder-shown) ~ label,
.veld select:focus ~ label,
.veld select.heeft-waarde ~ label,
.veld textarea:focus ~ label,
.veld textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-32px);
  color: var(--notelaar);
}

/* Chique dropdown (motion.js vervangt de native <select> door dit patroon;
   zonder JS blijft de native select gewoon werken). */
.keuze { position: relative; }

.keuze__native {
  position: absolute !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.keuze__knop {
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--potlood);
  transition: border-color var(--d-1) var(--ease-inout);
}

.keuze.is-open .keuze__knop,
.keuze__knop:focus-visible { border-bottom-color: var(--bordeaux); outline: none; }

.keuze__waarde { color: var(--inkt); }
.keuze__waarde:empty::before { content: '\00a0'; }

.keuze__pijl {
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--notelaar);
  border-bottom: 1.5px solid var(--notelaar);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--d-2) var(--ease-lade);
}

.keuze.is-open .keuze__pijl { transform: rotate(-135deg) translateY(-2px); }

.keuze__lijst {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  background: var(--papier);
  border: 1px solid var(--potlood);
  border-top: 2px solid var(--bruin);
  box-shadow: 0 24px 60px rgba(23, 23, 22, 0.16);
  max-height: 320px;
  overflow: auto;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--d-1) var(--ease-out), transform var(--d-2) var(--ease-lade);
  /* scrollbalk in thema */
  scrollbar-width: thin;
  scrollbar-color: var(--bruin) var(--fineer);
}

.keuze__lijst::-webkit-scrollbar { width: 8px; }
.keuze__lijst::-webkit-scrollbar-track { background: var(--fineer); }
.keuze__lijst::-webkit-scrollbar-thumb {
  background: var(--bruin);
  border-radius: 4px;
  border: 0;
}
.keuze__lijst::-webkit-scrollbar-thumb:hover { background: var(--notelaar); }

.keuze.is-open .keuze__lijst {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.keuze__optie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 18px;
  cursor: pointer;
  color: var(--grafiet);
  border-bottom: 1px solid var(--fineer);
  transition: background-color var(--d-1), color var(--d-1), padding-left var(--d-2) var(--ease-lade);
}

.keuze__optie:last-child { border-bottom: 0; }

.keuze__optie:hover,
.keuze__optie:focus-visible,
.keuze__optie.is-actief {
  background: var(--fineer);
  color: var(--inkt);
  padding-left: 24px;
  outline: none;
}

.keuze__optie[aria-selected='true'] { color: var(--notelaar); }

.keuze__optie[aria-selected='true']::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bordeaux);
  flex: none;
}

.veld--checkbox {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-top: 24px;
}

.veld--checkbox input {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 3px;
  accent-color: var(--bordeaux);
}

.veld--checkbox label { font-size: var(--fs-caption); color: var(--grafiet); }

/* De privacylink in het formulier is altijd onderlijnd. */
.veld--checkbox .lijn-link::after { transform: scaleX(1); transform-origin: left; }

.form__verstuur { grid-column: 1 / -1; margin-top: calc(var(--stap) * 0.6); justify-self: start; }

@media (max-width: 720px) {
  .form { grid-template-columns: 1fr; }
}

/* Op donkere achtergrond */
.blok--nacht .veld input,
.blok--nacht .veld select,
.blok--nacht .veld textarea { color: var(--papier); border-bottom-color: var(--hairline); }
.blok--nacht .veld input:focus,
.blok--nacht .veld select:focus,
.blok--nacht .veld textarea:focus { border-bottom-color: var(--taupe); }
.blok--nacht .veld label { color: rgba(242, 239, 232, 0.55); }
.blok--nacht .veld select option { color: var(--inkt); background: var(--papier); }

/* Contactgegevens: rustig gestapeld blok (geen tabel) */
.contact-blok { display: grid; gap: 10px; align-content: start; justify-items: start; }

.contact-blok .t-label { margin-bottom: 8px; }

.contact-blok__groot {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.contact-blok__groep {
  margin-top: 1.25rem;
  display: grid;
  gap: 12px;
  justify-items: start;
  font-size: var(--fs-caption);
  color: var(--grafiet);
}

/* Prose (privacy e.d.) */
.prose { max-width: 68ch; color: var(--grafiet); }
.prose h2 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--inkt); margin-top: 2em; letter-spacing: -0.01em; }
.prose p + p { margin-top: 1em; }
.prose ul { list-style: disc; padding-left: 1.2em; margin-top: 1em; }

/* --- Lightbox -------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(23, 23, 22, 0.93);
  display: grid;
  place-items: center;
  animation: lb-in 300ms var(--ease-out);
}

.lightbox[hidden] { display: none; }

@keyframes lb-in { from { opacity: 0; } }

.lightbox__figure {
  max-width: min(92vw, 110rem);
  max-height: 88svh;
  display: grid;
  gap: 10px;
}

.lightbox__figure .mount { padding: 0; }

.lightbox__figure img {
  max-height: 76svh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}

.lightbox__figure figcaption {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.75);
}

.lightbox__knop {
  position: absolute;
  z-index: 2;
  width: 44px; height: 44px;
  border: 1px solid rgba(242, 239, 232, 0.4);
  border-radius: 50%;
  transition: border-color var(--d-1);
}

.lightbox__knop:hover { border-color: var(--papier); }

.lightbox__knop--sluit { top: 18px; right: 18px; }
.lightbox__knop--sluit::before,
.lightbox__knop--sluit::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 1px;
  background: var(--papier);
}
.lightbox__knop--sluit::before { transform: translate(-50%, -50%) rotate(45deg); }
.lightbox__knop--sluit::after { transform: translate(-50%, -50%) rotate(-45deg); }

.lightbox__knop--vorige { top: 50%; left: 18px; transform: translateY(-50%); }
.lightbox__knop--volgende { top: 50%; right: 18px; transform: translateY(-50%); }
.lightbox__knop--vorige::before,
.lightbox__knop--volgende::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-top: 1px solid var(--papier);
  border-right: 1px solid var(--papier);
}
.lightbox__knop--vorige::before { transform: translate(-30%, -50%) rotate(-135deg); }
.lightbox__knop--volgende::before { transform: translate(-70%, -50%) rotate(45deg); }