/* ==========================================================================
   Vrenobouw B.V. — designsysteem
   Eén stylesheet. Kleuren en maten staan als variabelen bovenaan.
   ========================================================================== */

/* --- Fonts (zelf gehost, geen externe verzoeken) ------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/spacegrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Ontwerptokens ------------------------------------------------------- */

:root {
  /* Huisstijl */
  --groen: #3e8032;
  --groen-donker: #2c5d24;
  --groen-diep: #1e3f18;
  --groen-licht: #8fc683;
  --groen-zacht: #eef5ec;

  /* Neutraal */
  --inkt: #0e1210;
  --inkt-zacht: #1a211d;
  --grijs-900: #2a332e;
  --grijs-700: #4a554e;
  --grijs-500: #77837c;
  --grijs-300: #c9d1cc;
  --grijs-200: #e2e7e4;
  --grijs-100: #f2f5f3;
  --wit: #ffffff;

  /* Semantisch */
  --tekst: var(--grijs-900);
  --tekst-zacht: var(--grijs-700);
  --rand: var(--grijs-200);
  --vlak: var(--wit);
  --vlak-zacht: var(--grijs-100);

  --fout: #b3261e;
  --succes: #2c5d24;

  /* Typografie */
  --font-kop: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-tekst: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --tekst-xs: 0.78rem;
  --tekst-sm: 0.9rem;
  --tekst-base: 1.0rem;
  --tekst-lg: 1.125rem;
  --tekst-xl: clamp(1.25rem, 0.9rem + 1vw, 1.5rem);
  --kop-sm: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --kop-md: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --kop-lg: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
  /* Ondergrens zo gekozen dat "Vastgoedonderhoud" op een telefoon van 390px
     nog ruim binnen de marges past. */
  --kop-xl: clamp(2.15rem, 1.2rem + 4.4vw, 5rem);

  /* Ruimte */
  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 0.75rem;
  --ruimte-4: 1rem;
  --ruimte-5: 1.5rem;
  --ruimte-6: 2rem;
  --ruimte-7: 3rem;
  --ruimte-8: 4rem;
  --ruimte-9: 6rem;
  --sectie-y: clamp(4rem, 2rem + 8vw, 7.5rem);

  /* Vorm */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --schaduw-sm: 0 1px 2px rgba(14, 18, 16, 0.06), 0 1px 3px rgba(14, 18, 16, 0.04);
  --schaduw: 0 4px 16px rgba(14, 18, 16, 0.07), 0 1px 3px rgba(14, 18, 16, 0.05);
  --schaduw-lg: 0 18px 50px rgba(14, 18, 16, 0.12), 0 4px 12px rgba(14, 18, 16, 0.06);

  --breedte: 1200px;
  --breedte-smal: 780px;

  --overgang: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Basis --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* ruimte onder de vaste kopbalk bij het springen naar een anker */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: var(--tekst-base);
  line-height: 1.65;
  color: var(--tekst);
  background: var(--vlak);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-kop);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--inkt);
  margin: 0 0 var(--ruimte-4);
  text-wrap: balance;
}

p {
  margin: 0 0 var(--ruimte-4);
  text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--groen-donker);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--overgang);
}

a:hover { color: var(--groen); }

img, svg, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { margin: 0 0 var(--ruimte-4); padding-left: 1.2em; }
li { margin-bottom: var(--ruimte-2); }

strong { font-weight: 600; color: var(--inkt); }

:focus-visible {
  outline: 3px solid var(--groen);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--groen-licht);
  color: var(--groen-diep);
}

/* --- Hulpklassen --------------------------------------------------------- */

.omhulsel {
  width: 100%;
  max-width: var(--breedte);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.smal { max-width: var(--breedte-smal); }

.sectie {
  padding-block: var(--sectie-y);
  position: relative;
}

.sectie--zacht { background: var(--vlak-zacht); }

.sectie--donker {
  background: var(--inkt);
  color: var(--grijs-300);
}

.sectie--donker h2,
.sectie--donker h3,
.sectie--donker h4 { color: var(--wit); }

.alleen-schermlezer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.overslaan-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  background: var(--groen);
  color: var(--wit);
  padding: var(--ruimte-3) var(--ruimte-5);
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--overgang);
}

.overslaan-link:focus {
  top: 0;
  color: var(--wit);
}

/* --- Sectiekop ----------------------------------------------------------- */

.sectiekop {
  max-width: 62ch;
  margin-bottom: var(--ruimte-8);
}

.sectiekop--midden {
  margin-inline: auto;
  text-align: center;
}

.label {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  font-family: var(--font-kop);
  font-size: var(--tekst-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--groen-donker);
  margin-bottom: var(--ruimte-4);
}

.label::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  background: var(--groen);
  border-radius: 2px;
}

.sectiekop--midden .label { justify-content: center; }

.sectie--donker .label { color: var(--groen-licht); }
.sectie--donker .label::before { background: var(--groen-licht); }

.sectiekop h2 { font-size: var(--kop-md); margin-bottom: var(--ruimte-4); }

.sectiekop p {
  font-size: var(--tekst-lg);
  color: var(--tekst-zacht);
  margin-bottom: 0;
}

.sectie--donker .sectiekop p { color: var(--grijs-300); }

/* --- Knoppen ------------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-2);
  font-family: var(--font-kop);
  font-size: var(--tekst-base);
  font-weight: 500;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--overgang), color var(--overgang),
    border-color var(--overgang), transform var(--overgang),
    box-shadow var(--overgang);
}

.knop:hover { transform: translateY(-2px); }
.knop:active { transform: translateY(0); }

/* Wit op #2c5d24 geeft 7.4:1 — ruim voldoende, ook voor de hoverstaat. */
.knop--primair {
  background: var(--groen-donker);
  color: var(--wit);
  box-shadow: 0 2px 10px rgba(44, 93, 36, 0.25);
}

.knop--primair:hover {
  background: var(--groen-diep);
  color: var(--wit);
  box-shadow: 0 8px 22px rgba(44, 93, 36, 0.3);
}

.knop--rand {
  background: transparent;
  color: var(--inkt);
  border-color: var(--grijs-300);
}

.knop--rand:hover {
  border-color: var(--groen-donker);
  color: var(--groen-donker);
  background: var(--groen-zacht);
}

.sectie--donker .knop--rand,
.hero .knop--rand {
  color: var(--wit);
  border-color: rgba(255, 255, 255, 0.35);
}

.sectie--donker .knop--rand:hover,
.hero .knop--rand:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--wit);
  color: var(--wit);
}

.knop--wit {
  background: var(--wit);
  color: var(--groen-diep);
}

.knop--wit:hover { background: var(--groen-zacht); color: var(--groen-diep); }

.knop--vol { width: 100%; }

.knop[disabled],
.knop[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.knop .pijl {
  transition: transform var(--overgang);
}

.knop:hover .pijl { transform: translateX(3px); }

/* --- Kopbalk ------------------------------------------------------------- */

.kopbalk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: var(--ruimte-4);
  transition: background var(--overgang), box-shadow var(--overgang),
    padding var(--overgang), border-color var(--overgang);
  border-bottom: 1px solid transparent;
}

.kopbalk__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-5);
}

.kopbalk__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Het logo is breed (verhouding 2,26:1) en de onderregel "vastgoed renovatie
   en onderhoud" is maar een fractie van die hoogte. Bovenaan de pagina staat
   het logo daarom groot, zodat die regel leesbaar is. Zodra de bezoeker gaat
   scrollen krimpt het mee met de kopbalk; dan telt herkenbaarheid zwaarder
   dan leesbaarheid van de onderregel. */
.kopbalk__logo img {
  height: 112px;
  width: auto;
  transition: height var(--overgang);
}

.kopbalk__nav {
  display: flex;
  align-items: center;
  gap: var(--ruimte-6);
  margin-left: auto;
}

/* Overal :not(.knop): de oproepknop is ook een <a> in de navigatie, maar mag
   geen linkkleur en geen onderstreping krijgen. Zonder die uitzondering wint
   de navigatieregel het van .knop--primair en wordt de knoptekst donker zodra
   de kopbalk bij het scrollen wit wordt. */

.kopbalk__nav a:not(.knop) {
  font-family: var(--font-kop);
  font-size: var(--tekst-sm);
  font-weight: 500;
  color: var(--inkt);
  text-decoration: none;
  padding-block: var(--ruimte-2);
  position: relative;
}

.kopbalk__nav a:not(.knop)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--groen);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--overgang);
}

.kopbalk__nav a:not(.knop):hover::after,
.kopbalk__nav a:not(.knop)[aria-current='page']::after { transform: scaleX(1); }

.kopbalk .knop { padding: 0.7rem 1.25rem; font-size: var(--tekst-sm); }

/* Transparante variant boven een donkere hero */
.kopbalk--transparant .kopbalk__nav a:not(.knop) { color: var(--wit); }
.kopbalk--transparant .kopbalk__logo img { filter: brightness(0) invert(1); }

.kopbalk--vast {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--rand);
  box-shadow: var(--schaduw-sm);
  padding-block: var(--ruimte-3);
}

.kopbalk--vast .kopbalk__nav a:not(.knop) { color: var(--inkt); }
.kopbalk--vast .kopbalk__logo img { filter: none; }
.kopbalk--vast .kopbalk__logo img { height: 44px; }

/* Menuknop (mobiel) */
.menuknop {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--grijs-300);
  border-radius: var(--radius-sm);
  background: var(--wit);
  cursor: pointer;
  position: relative;
}

.menuknop span,
.menuknop span::before,
.menuknop span::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--inkt);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform var(--overgang), opacity var(--overgang);
}

.menuknop span { top: 50%; margin-top: -1px; }
.menuknop span::before { top: -6px; left: 0; transform: none; }
.menuknop span::after { top: 6px; left: 0; transform: none; }

.menuknop[aria-expanded='true'] span { background: transparent; }
.menuknop[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.menuknop[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
  background: var(--inkt);
  color: var(--grijs-300);
  overflow: hidden;
  padding-block: clamp(10.5rem, 16vh, 12rem) var(--ruimte-8);
}

.hero__achtergrond {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Groene gloed achter het 3D-model */
.hero__achtergrond::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 78% 45%, rgba(62, 128, 50, 0.28), transparent 70%),
    radial-gradient(45% 45% at 12% 78%, rgba(143, 198, 131, 0.12), transparent 70%);
  pointer-events: none;
}

.hero__canvas,
.hero__statisch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__statisch {
  object-fit: contain;
  object-position: 76% 55%;
  opacity: 0.85;
  transition: opacity 600ms ease;
}

.hero__canvas {
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero.is-3d-actief .hero__canvas { opacity: 1; }

/* Zodra vaststaat dat de 3D gaat draaien verdwijnt de statische tekening
   meteen, zonder overgang. Anders zie je het logo eerst compleet staan, dan
   wegvallen, en dan pas tekenen - alsof er iets misgaat. Deze klasse wordt
   gezet voordat three.js wordt opgehaald. */
.hero.is-3d-komt .hero__statisch {
  opacity: 0;
  transition: none;
}

/* Vanaf tabletbreedte staat de illustratie in de rechterhelft, zodat de
   koptekst er nooit overheen valt. Alleen het beeld schuift op; de gloed
   blijft over de volle breedte lopen, anders ontstaat er een zichtbare naad. */
@media (min-width: 900px) {
  .hero__statisch,
  .hero__canvas {
    left: 44%;
    width: 56%;
  }
}

.hero__binnen {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__inhoud { max-width: 40rem; }

.hero .label { color: var(--groen-licht); }
.hero .label::before { background: var(--groen-licht); }

.hero h1 {
  font-size: var(--kop-xl);
  color: var(--wit);
  margin-bottom: var(--ruimte-5);
  letter-spacing: -0.03em;
}

.hero__tekst {
  font-size: var(--tekst-xl);
  line-height: 1.55;
  color: var(--grijs-300);
  margin-bottom: var(--ruimte-7);
  max-width: 34rem;
}

.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-4);
}

/* Kengetallenbalk onder de hero */
/* --- Dienstenbalk onder de hero ------------------------------------------ */

.dienstenbalk {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--inkt);
}

.dienstenbalk__rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.dienstbalk {
  display: block;
  padding: var(--ruimte-6) var(--ruimte-5);
  text-align: center;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: background var(--overgang);
}

.dienstbalk:last-child { border-right: none; }

.dienstbalk:hover { background: rgba(255, 255, 255, 0.04); }

.dienstbalk__titel {
  display: block;
  font-family: var(--font-kop);
  font-size: var(--tekst-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--groen-licht);
  line-height: 1.3;
}

.dienstbalk__pitch {
  display: block;
  margin-top: var(--ruimte-3);
  font-size: var(--tekst-lg);
  color: var(--wit);
  line-height: 1.4;
  text-wrap: balance;
}

/* --- Rasters ------------------------------------------------------------- */

.raster {
  display: grid;
  gap: var(--ruimte-5);
}

.raster--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* De arbeidsvoorwaarden: vier punten in twee kolommen. Zonder deze
   breedtebeperking worden de kaarten onnodig breed voor zo weinig tekst. */
.voorwaardenraster {
  max-width: 54rem;
  margin-inline: auto;
}
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* --- Dienstkaarten ------------------------------------------------------- */

.dienstkaart {
  display: flex;
  flex-direction: column;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--overgang), box-shadow var(--overgang),
    border-color var(--overgang);
}

.dienstkaart:hover {
  transform: translateY(-5px);
  box-shadow: var(--schaduw-lg);
  border-color: var(--groen-licht);
  color: inherit;
}

/* Een klein pictogram boven de tekst, in dezelfde stijl als de blokjes bij
   "Waarom Vrenobouw". Bewust geen groot beeldvlak: dat trok alle aandacht
   weg van de tekst die de dienst uitlegt. */
.dienstkaart__icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--groen-zacht);
  color: var(--groen-donker);
  margin-bottom: var(--ruimte-5);
  transition: background var(--overgang), color var(--overgang);
}

.dienstkaart__icoon svg { width: 22px; height: 22px; }

.dienstkaart:hover .dienstkaart__icoon {
  background: var(--groen-donker);
  color: var(--wit);
}

.dienstkaart__inhoud {
  padding: var(--ruimte-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dienstkaart__pitch {
  font-family: var(--font-kop);
  font-size: var(--tekst-sm);
  font-weight: 500;
  color: var(--groen-donker);
  margin-bottom: var(--ruimte-2);
}

.dienstkaart h3 {
  font-size: var(--kop-sm);
  margin-bottom: var(--ruimte-3);
}

.dienstkaart p {
  color: var(--tekst-zacht);
  font-size: var(--tekst-sm);
  margin-bottom: var(--ruimte-5);
}

.dienstkaart__meer {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: var(--tekst-sm);
  color: var(--groen-donker);
}

.dienstkaart:hover .dienstkaart__meer .pijl { transform: translateX(4px); }
.dienstkaart__meer .pijl { transition: transform var(--overgang); }

/* --- Stappen (werkwijze) ------------------------------------------------- */

.stappen {
  display: grid;
  gap: var(--ruimte-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: stap;
}

.stap {
  position: relative;
  padding: var(--ruimte-6);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  transition: background var(--overgang), border-color var(--overgang),
    transform var(--overgang);
}

.stap:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(143, 198, 131, 0.4);
  transform: translateY(-4px);
}

.stap__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--groen);
  color: var(--wit);
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: var(--tekst-lg);
  margin-bottom: var(--ruimte-5);
  letter-spacing: -0.02em;
}

.stap h3 {
  font-size: var(--tekst-xl);
  margin-bottom: var(--ruimte-3);
}

.stap p {
  color: var(--grijs-300);
  font-size: var(--tekst-sm);
  margin-bottom: 0;
}

/* --- Tweekoloms tekst + beeld -------------------------------------------- */

.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--omgekeerd .duo__beeld { order: -1; }
}

.duo__beeld {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--groen-zacht);
  aspect-ratio: 4 / 3;
}

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

.duo__tekst h2 { font-size: var(--kop-md); }

.duo__tekst p { color: var(--tekst-zacht); }

/* --- Voordelenlijst ------------------------------------------------------ */

.voordeel {
  padding: var(--ruimte-6);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  transition: border-color var(--overgang), box-shadow var(--overgang),
    transform var(--overgang);
}

.voordeel:hover {
  border-color: var(--groen-licht);
  box-shadow: var(--schaduw);
  transform: translateY(-3px);
}

.voordeel__icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--groen-zacht);
  color: var(--groen-donker);
  margin-bottom: var(--ruimte-4);
}

.voordeel__icoon svg { width: 22px; height: 22px; }

.voordeel h3 {
  font-size: var(--tekst-lg);
  margin-bottom: var(--ruimte-2);
}

.voordeel p {
  font-size: var(--tekst-sm);
  color: var(--tekst-zacht);
  margin-bottom: 0;
}

/* --- Sectorenlijst ------------------------------------------------------- */

.sector {
  padding: var(--ruimte-5) 0;
  border-bottom: 1px solid var(--rand);
  display: grid;
  gap: var(--ruimte-3);
  align-items: baseline;
}

@media (min-width: 760px) {
  .sector { grid-template-columns: 16rem 1fr; gap: var(--ruimte-6); }
}

.sector:first-of-type { border-top: 1px solid var(--rand); }

.sector h3 {
  font-size: var(--tekst-xl);
  margin-bottom: 0;
}

.sector p {
  color: var(--tekst-zacht);
  margin-bottom: 0;
}

/* --- Oproepblok ---------------------------------------------------------- */

.oproep {
  background: linear-gradient(135deg, var(--groen-donker), var(--groen-diep));
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--wit);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.oproep::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 80% at 85% 20%, rgba(143, 198, 131, 0.25), transparent 70%);
  pointer-events: none;
}

.oproep > * { position: relative; }

.oproep h2 {
  color: var(--wit);
  font-size: var(--kop-md);
  max-width: 24ch;
  margin-inline: auto;
}

.oproep p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--tekst-lg);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--ruimte-6);
}

/* --- Contact ------------------------------------------------------------- */

.contact {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 940px) {
  .contact { grid-template-columns: 1fr 1.15fr; }
}

.contactgegevens {
  display: grid;
  gap: var(--ruimte-5);
  margin-top: var(--ruimte-7);
}

.contactregel {
  display: flex;
  gap: var(--ruimte-4);
  align-items: flex-start;
}

.contactregel__icoon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  background: var(--groen-zacht);
  color: var(--groen-donker);
}

.contactregel__icoon svg { width: 20px; height: 20px; }

.contactregel dt {
  font-family: var(--font-kop);
  font-size: var(--tekst-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grijs-500);
  margin-bottom: var(--ruimte-1);
}

.contactregel dd {
  margin: 0;
  font-size: var(--tekst-lg);
  color: var(--inkt);
  line-height: 1.45;
}

.contactregel dd a { text-decoration: none; font-weight: 500; }
.contactregel dd a:hover { text-decoration: underline; }

.contactregel dd small {
  display: block;
  font-size: var(--tekst-sm);
  color: var(--grijs-500);
  font-weight: 400;
}

/* --- Sfeerbeeld ---------------------------------------------------------- */

/* Een losse foto in een tekstkolom, bijvoorbeeld onder de contactgegevens. */
.sfeerbeeld {
  margin-top: var(--ruimte-7);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--groen-zacht);
}

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

/* --- Kaart --------------------------------------------------------------- */

.kaart {
  margin-top: var(--ruimte-7);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--groen-zacht);
  border: 1px solid var(--groen-licht);
}

.kaart.is-geladen { border-color: var(--rand); }

/* Het vlak dat er staat tot de bezoeker de kaart opvraagt. */
.kaart__aanzet {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-3);
  text-align: center;
  padding: var(--ruimte-6);
}

.kaart__aanzet .knop { margin-top: var(--ruimte-2); }

.kaart__speld {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--wit);
  color: var(--groen-donker);
}

.kaart__speld svg { width: 24px; height: 24px; }

.kaart__adres {
  margin: 0;
  color: var(--inkt);
  line-height: 1.5;
}

.kaart__toelichting {
  margin: 0;
  max-width: 38ch;
  font-size: var(--tekst-sm);
  color: var(--grijs-700);
  line-height: 1.5;
}

.kaart iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.kaart__route {
  margin-top: var(--ruimte-4);
  font-size: var(--tekst-sm);
}

.kaart__route a {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  font-family: var(--font-kop);
  font-weight: 500;
  text-decoration: none;
}

.kaart__route a:hover { text-decoration: underline; }
.kaart__route svg { width: 15px; height: 15px; }

/* --- Formulieren --------------------------------------------------------- */

.formulierkaart {
  container-type: inline-size;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--schaduw);
}

.sectie--zacht .formulierkaart { background: var(--wit); }

.formulierkaart h3 {
  font-size: var(--kop-sm);
  margin-bottom: var(--ruimte-2);
}

.formulierkaart > p {
  color: var(--tekst-zacht);
  font-size: var(--tekst-sm);
  margin-bottom: var(--ruimte-6);
}

.veldenrij {
  display: grid;
  gap: var(--ruimte-4);
  grid-template-columns: 1fr;
}

@container (min-width: 30rem) {
  .veldenrij--2 { grid-template-columns: 1fr 1fr; }
}

.veld { margin-bottom: var(--ruimte-4); }

.veld label {
  display: block;
  font-size: var(--tekst-sm);
  font-weight: 500;
  color: var(--inkt);
  margin-bottom: var(--ruimte-2);
}

.veld .verplicht { color: var(--groen-donker); }

.veld input[type='text'],
.veld input[type='email'],
.veld input[type='tel'],
.veld select,
.veld textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--tekst-base);
  color: var(--inkt);
  background: var(--wit);
  border: 1.5px solid var(--grijs-300);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}

.veld textarea {
  min-height: 8.5rem;
  resize: vertical;
  line-height: 1.6;
}

.veld select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234a554e' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.75rem;
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  outline: none;
  border-color: var(--groen);
  box-shadow: 0 0 0 3px rgba(62, 128, 50, 0.16);
}

.veld input[aria-invalid='true'],
.veld textarea[aria-invalid='true'],
.veld select[aria-invalid='true'] {
  border-color: var(--fout);
}

.veld__fout {
  display: block;
  font-size: var(--tekst-sm);
  color: var(--fout);
  margin-top: var(--ruimte-2);
  min-height: 0;
}

.veld__hint {
  display: block;
  font-size: var(--tekst-sm);
  color: var(--grijs-500);
  margin-top: var(--ruimte-2);
}

/* Bestandsveld */
.bestandsveld {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ruimte-4);
  border: 1.5px dashed var(--grijs-300);
  border-radius: var(--radius);
  padding: var(--ruimte-5);
  background: var(--vlak-zacht);
  transition: border-color var(--overgang), background var(--overgang);
  cursor: pointer;
}

.bestandsveld:hover,
.bestandsveld.is-actief {
  border-color: var(--groen);
  background: var(--groen-zacht);
}

.bestandsveld input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.bestandsveld__icoon {
  flex-shrink: 0;
  color: var(--groen-donker);
}

.bestandsveld__tekst {
  font-size: var(--tekst-sm);
  color: var(--tekst-zacht);
  line-height: 1.5;
}

.bestandsveld__tekst strong {
  display: block;
  color: var(--inkt);
  font-weight: 500;
}

/* Akkoordvinkje */
.akkoord {
  display: flex;
  gap: var(--ruimte-3);
  align-items: flex-start;
  margin-bottom: var(--ruimte-5);
}

.akkoord input[type='checkbox'] {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.22rem;
  accent-color: var(--groen-donker);
  cursor: pointer;
}

.akkoord label {
  font-size: var(--tekst-sm);
  color: var(--tekst-zacht);
  line-height: 1.55;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor bots */
.vangveld {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Terugkoppeling na versturen */
.formulier__melding {
  display: none;
  padding: var(--ruimte-4) var(--ruimte-5);
  border-radius: var(--radius);
  font-size: var(--tekst-sm);
  margin-bottom: var(--ruimte-5);
  line-height: 1.55;
}

.formulier__melding.is-zichtbaar { display: block; }

.formulier__melding--succes {
  background: var(--groen-zacht);
  color: var(--groen-diep);
  border: 1px solid var(--groen-licht);
}

.formulier__melding--fout {
  background: #fdeceb;
  color: #7f1d18;
  border: 1px solid #f3c2bf;
}

/* --- Vacatures ----------------------------------------------------------- */

.vacaturelijst {
  display: grid;
  gap: var(--ruimte-4);
}

.vacaturekaart {
  display: grid;
  gap: var(--ruimte-4);
  align-items: center;
  padding: var(--ruimte-6);
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--overgang), box-shadow var(--overgang),
    transform var(--overgang);
}

@media (min-width: 820px) {
  .vacaturekaart { grid-template-columns: 1fr auto; gap: var(--ruimte-6); }
}

.vacaturekaart:hover {
  border-color: var(--groen-licht);
  box-shadow: var(--schaduw);
  transform: translateY(-3px);
  color: inherit;
}

.vacaturekaart h3 {
  font-size: var(--tekst-xl);
  margin-bottom: var(--ruimte-2);
}

.vacaturekaart p {
  color: var(--tekst-zacht);
  font-size: var(--tekst-sm);
  margin-bottom: var(--ruimte-4);
}

.merkjes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.merkje {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  font-size: var(--tekst-xs);
  font-weight: 500;
  color: var(--groen-diep);
  background: var(--groen-zacht);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  margin: 0;
}

.merkje svg { width: 13px; height: 13px; }

.merkje--rand {
  background: transparent;
  border: 1px solid var(--grijs-300);
  color: var(--tekst-zacht);
}

/* --- Vacaturedetail ------------------------------------------------------ */

.paginakop {
  background: var(--inkt);
  color: var(--grijs-300);
  padding-block: clamp(11rem, 18vh, 13rem) var(--sectie-y);
  position: relative;
  overflow: hidden;
}

.paginakop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 60% at 80% 30%, rgba(62, 128, 50, 0.25), transparent 70%);
  pointer-events: none;
}

.paginakop > * { position: relative; z-index: 1; }

.paginakop h1 {
  color: var(--wit);
  font-size: var(--kop-lg);
  max-width: 20ch;
}

.paginakop__ondertitel {
  font-size: var(--tekst-xl);
  color: var(--groen-licht);
  font-family: var(--font-kop);
  font-weight: 500;
  margin-bottom: var(--ruimte-5);
}

.paginakop p {
  font-size: var(--tekst-lg);
  color: var(--grijs-300);
  max-width: 58ch;
}

.kruimelpad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ruimte-5);
  font-size: var(--tekst-sm);
  color: var(--grijs-500);
}

.kruimelpad li { margin: 0; display: flex; gap: var(--ruimte-2); align-items: center; }
.kruimelpad li:not(:last-child)::after { content: '/'; color: var(--grijs-500); }
.kruimelpad a { color: var(--grijs-300); text-decoration: none; }
.kruimelpad a:hover { color: var(--groen-licht); }

.artikel { max-width: 48rem; }

.artikel h2 {
  font-size: var(--kop-sm);
  margin-top: var(--ruimte-8);
  margin-bottom: var(--ruimte-4);
}

.artikel h2:first-child { margin-top: 0; }

.artikel ul { padding-left: 0; list-style: none; }

.artikel ul li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: var(--ruimte-3);
  color: var(--tekst-zacht);
}

.artikel ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--groen);
  transform: rotate(45deg);
}

.artikel p { color: var(--tekst-zacht); }

/* Contactpersoonkaart */
.persoonkaart {
  display: flex;
  gap: var(--ruimte-5);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--ruimte-6);
  background: var(--groen-zacht);
  border-radius: var(--radius-lg);
  border: 1px solid var(--groen-licht);
}

.persoonkaart__foto {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--wit);
}

.persoonkaart__inhoud { flex: 1; min-width: 200px; }

.persoonkaart h3 {
  font-size: var(--tekst-lg);
  margin-bottom: var(--ruimte-1);
}

.persoonkaart p {
  font-size: var(--tekst-sm);
  color: var(--grijs-700);
  margin-bottom: var(--ruimte-3);
}

.persoonkaart__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-4);
  font-size: var(--tekst-sm);
  font-weight: 500;
}

.persoonkaart__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  text-decoration: none;
}

.persoonkaart__links a:hover { text-decoration: underline; }

.persoonkaart__links svg { width: 16px; height: 16px; flex-shrink: 0; }

/* --- Zijkolom + inhoud --------------------------------------------------- */

.metzijkolom {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
  .metzijkolom { grid-template-columns: 1fr 24rem; }
  .metzijkolom__zij { position: sticky; top: 7rem; }
}

/* --- Voettekst ----------------------------------------------------------- */

.voettekst {
  background: var(--inkt);
  color: var(--grijs-300);
  padding-block: var(--ruimte-9) var(--ruimte-6);
}

.voettekst__raster {
  display: grid;
  gap: var(--ruimte-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--ruimte-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 720px) {
  .voettekst__raster { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--ruimte-6); }
}

.voettekst__logo img {
  height: 62px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: var(--ruimte-5);
}

.voettekst__over {
  font-size: var(--tekst-sm);
  color: var(--grijs-500);
  max-width: 34ch;
  line-height: 1.7;
}

.voettekst h4 {
  font-family: var(--font-kop);
  font-size: var(--tekst-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wit);
  margin-bottom: var(--ruimte-4);
}

.voettekst ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.voettekst li { margin-bottom: var(--ruimte-3); }

.voettekst a {
  color: var(--grijs-300);
  text-decoration: none;
  font-size: var(--tekst-sm);
}

.voettekst a:hover { color: var(--groen-licht); }

.voettekst address {
  font-style: normal;
  font-size: var(--tekst-sm);
  color: var(--grijs-300);
  line-height: 1.8;
}

.voettekst__vca {
  margin-top: var(--ruimte-6);
  display: inline-block;
}

/* Het VCA-merk is donkerblauwgroen op een doorzichtige achtergrond en zou op
   de donkere voettekst wegvallen. In plaats van er een wit vlak achter te
   zetten tonen we het als wit merk, net als het Vrenobouw-logo hierboven. */
.voettekst__vca img {
  height: 46px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.voettekst__onder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-4) var(--ruimte-6);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--ruimte-6);
  font-size: var(--tekst-sm);
  color: var(--grijs-500);
}

.voettekst__documenten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-4);
}

/* --- Scroll-animaties ---------------------------------------------------- */

/* Belangrijk: het verbergen gebeurt alleen als er ook JavaScript is om het
   weer zichtbaar te maken. Zonder JavaScript zou de halve pagina anders leeg
   blijven. Browsers die (scripting) niet kennen slaan het blok over en tonen
   alles gewoon: ook dat is de veilige kant. */
@media (scripting: enabled) {
  [data-onthul] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--onthul-vertraging, 0ms);
    will-change: opacity, transform;
  }
}

[data-onthul].is-zichtbaar {
  opacity: 1;
  transform: none;
}

/* Kaarten in een raster komen na elkaar in beeld in plaats van tegelijk.
   Dit staat hier en niet als style-attribuut in de HTML, zodat de site met
   een strikte Content-Security-Policy kan draaien. */
.raster > [data-onthul]:nth-child(3n + 2),
.stappen > [data-onthul]:nth-child(4n + 2),
.vacaturelijst > [data-onthul]:nth-child(2) { --onthul-vertraging: 90ms; }

.raster > [data-onthul]:nth-child(3n + 3),
.stappen > [data-onthul]:nth-child(4n + 3),
.vacaturelijst > [data-onthul]:nth-child(3) { --onthul-vertraging: 180ms; }

.stappen > [data-onthul]:nth-child(4n + 4),
.vacaturelijst > [data-onthul]:nth-child(n + 4) { --onthul-vertraging: 270ms; }

.duo > [data-onthul]:nth-child(2) { --onthul-vertraging: 120ms; }

/* --- Kleine marge-hulpklassen -------------------------------------------- */

/* --- Antwoordpagina van de formulieren (alleen zonder JavaScript) -------- */

.antwoord { padding-top: calc(var(--sectie-y) + 3rem); }
.antwoord__melding { font-size: var(--tekst-lg); }
.antwoord--ok h1 { color: var(--groen-donker); }
.antwoord--fout h1 { color: var(--fout); }

.marge-boven { margin-top: var(--ruimte-6); }
.marge-boven-ruim { margin-top: var(--ruimte-7); }
.marge-onder { margin-bottom: var(--ruimte-5); }

/* --- Mobiel -------------------------------------------------------------- */

@media (max-width: 900px) {
  .menuknop { display: block; }

  .kopbalk__nav {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6rem var(--ruimte-5) var(--ruimte-6);
    background: var(--wit);
    box-shadow: var(--schaduw-lg);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 320ms;
    margin: 0;
  }

  .kopbalk__nav.is-open {
    transform: translateY(0);
    visibility: visible;
  }

  .kopbalk__nav a:not(.knop),
  .kopbalk--transparant .kopbalk__nav a:not(.knop) {
    color: var(--inkt);
    font-size: var(--tekst-lg);
    padding-block: var(--ruimte-4);
    border-bottom: 1px solid var(--rand);
  }

  .kopbalk__nav a:not(.knop)::after { display: none; }

  /* De knop onderaan het uitgeklapte menu houdt zijn eigen kleuren. */
  .kopbalk__nav .knop {
    margin-top: var(--ruimte-5);
    justify-content: center;
    font-size: var(--tekst-base);
    padding-block: 0.95rem;
  }

  body.menu-open { overflow: hidden; }

  .kopbalk__logo img { height: 72px; }
  .kopbalk--vast .kopbalk__logo img { height: 40px; }

  .hero { min-height: auto; padding-block: 9.5rem var(--ruimte-8); }
  .hero__achtergrond { opacity: 0.45; }
  .hero__inhoud { max-width: none; }
  .dienstbalk { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .dienstbalk:last-child { border-bottom: none; }
}

@media (max-width: 520px) {
  .hero__acties { flex-direction: column; align-items: stretch; }
  .hero__acties .knop { width: 100%; }
  .dienstbalk { padding: var(--ruimte-5) var(--ruimte-4); }
}

/* --- Minder beweging ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-onthul] {
    opacity: 1;
    transform: none;
  }

  .knop:hover,
  .dienstkaart:hover,
  .voordeel:hover,
  .stap:hover,
  .vacaturekaart:hover { transform: none; }
}

/* --- Afdrukken ----------------------------------------------------------- */

@media print {
  .kopbalk,
  .voettekst,
  .hero__achtergrond,
  .formulierkaart,
  .oproep { display: none !important; }

  body { color: #000; background: #fff; }
  .sectie { padding-block: 1rem; }
  [data-onthul] { opacity: 1; transform: none; }
}