/* ==========================================================================
   Bouwservice Limburg — "Modern & Verzorgd"
   Warm wit · diep petrol · zand · gedempt koper — Figtree
   ========================================================================== */

@font-face { font-family: "Figtree"; src: url(fonts/figtree-var.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --warmwit: #faf7f2;
  --wit: #fff;
  --zand: #ece3d3;
  --zand-licht: #f4eee4;
  --petrol: #0e4a53;
  --petrol-donker: #0a3a41;
  --petrol-licht: #e3eeee;
  --koper: #b8794f;          /* lijnen, stippen en randen */
  --koper-licht: #e3b58f;    /* tekst op petrol (5,3:1) */
  --koper-tekst: #8a4d28;    /* kleine kopertekst op licht (≥ 5,2:1) */
  --inkt: #1e2a2d;
  --zacht: #4c5a5d;
  --lijn: #e3dacb;
  --lijn-donker: #cdbfa8;
  --rood: #b3261e;
  --letter: "Figtree", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --rond: 22px;
  --breed: 84rem;      /* tekstsecties en beeldblokken delen één linkerkant */
  --breder: 84rem;
  --smal: 50rem;
  --marge: clamp(1.15rem, 4.5vw, 2.75rem);
  --kophoogte: 5.5rem;
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--kophoogte) + 4.5rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--letter); font-size: 1.08rem; line-height: 1.7; color: var(--inkt); background: var(--warmwit); }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3 { font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: var(--petrol-donker); margin: 0 0 .8rem; overflow-wrap: anywhere; hyphens: auto; }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--koper-tekst); }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
.voet__paneel :focus-visible { outline-color: var(--koper-licht); }
main:focus { outline: none; }
.icoon { width: 1.15em; height: 1.15em; flex: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skiplink { position: absolute; left: -9999px; top: .5rem; z-index: 200; padding: .7rem 1.1rem; background: var(--petrol); color: #fff; border-radius: 999px; font-weight: 600; }
.skiplink:focus { left: .5rem; }

.omhulsel { width: min(100% - 2 * var(--marge), var(--breed)); margin-inline: auto; }
.omhulsel-breed { width: min(100% - 2 * var(--marge), var(--breder)); margin-inline: auto; }
.omhulsel-smal { width: min(100% - 2 * var(--marge), var(--smal)); margin-inline: auto; }
.sectie { padding-block: clamp(4rem, 9vw, 7.5rem); }
.sectie--klein { padding-block: clamp(2.5rem, 5vw, 4rem); }
.sectie--zand { background: var(--zand-licht); }
.sectie--petrollicht { background: var(--petrol-licht); }
.sectie--formulier { background: var(--zand-licht); }
.sectie--formulier + .sectie--zand { background: var(--warmwit); }
.lead { font-size: clamp(1.14rem, 1.7vw, 1.28rem); line-height: 1.65; color: var(--inkt); }

.bovenkop { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--koper-tekst); }
.bovenkop::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--koper); flex: none; }
.bovenkop--licht { color: var(--koper-licht); }
.bovenkop--licht::before { background: var(--koper-licht); }
.sectiekop { max-width: 44rem; margin-bottom: 3rem; }
.sectiekop > p:last-child { margin-bottom: 0; color: var(--zacht); }
.sectiekop--midden { margin-inline: auto; text-align: center; }

/* ---------------------------------------------------------------- knoppen */
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.25rem; margin-top: 2rem; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.1rem; padding: .8rem 1.5rem; font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; border: 1.5px solid transparent; border-radius: 999px; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.knop .icoon { transition: transform .2s; }
.knop:hover .icoon { transform: translateX(3px); }
.knop--petrol { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.knop--petrol:hover { background: var(--petrol-donker); border-color: var(--petrol-donker); color: #fff; }
.knop--rand { background: transparent; border-color: var(--petrol); color: var(--petrol); }
.knop--rand:hover { background: var(--petrol); color: #fff; }
.knop--licht { background: #fff; border-color: #fff; color: var(--petrol-donker); }
.knop--licht:hover { background: var(--zand); border-color: var(--zand); color: var(--petrol-donker); }
.knop--klein { min-height: 2.75rem; padding: .55rem 1.15rem; font-size: .95rem; }
.knop--groot { min-height: 3.4rem; padding: .95rem 1.8rem; font-size: 1.05rem; }
@media (max-width: 34rem) {
  .knop { white-space: normal; max-width: 100%; text-align: left; border-radius: 1.6rem; }
}
.pijllink { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--petrol); text-decoration: underline; text-decoration-color: var(--koper); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.pijllink .icoon { transition: transform .2s; }
.pijllink:hover { color: var(--koper-tekst); }
.pijllink:hover .icoon { transform: translateX(3px); }

/* ---------------------------------------------------------------- foto's */
.foto { position: relative; margin: 0; overflow: hidden; border-radius: var(--rond); background: var(--zand); }
.foto > img { width: 100%; }
.foto--43 { aspect-ratio: 4 / 3; }
.foto--32 { aspect-ratio: 3 / 2; }
.foto--45 { aspect-ratio: 4 / 5; }
.foto--169 { aspect-ratio: 16 / 9; }
.foto--43 > img, .foto--32 > img, .foto--45 > img, .foto--169 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto__label { position: absolute; top: .8rem; left: .8rem; z-index: 2; margin: 0; padding: .3rem .75rem; border-radius: 999px; background: rgba(250, 247, 242, .93); color: var(--petrol-donker); font-size: .74rem; font-weight: 600; line-height: 1.3; letter-spacing: .04em; }

/* ---------------------------------------------------------------- kop */
.kop { position: sticky; top: 0; z-index: 50; background: var(--warmwit); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.kop.is-geplakt { border-bottom-color: var(--lijn); box-shadow: 0 10px 30px rgba(14, 74, 83, .07); }
.kop__binnen { display: flex; align-items: center; gap: 1.25rem; height: var(--kophoogte); }
.merk { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: .8rem; min-width: 0; color: var(--petrol-donker); text-decoration: none; }
.merk:hover { color: var(--petrol-donker); }
.merk__teken { width: 2.65rem; height: 2.65rem; flex: none; }
.merk__vlak { fill: var(--petrol); }
.merk__dak { stroke: var(--koper-licht); }
.merk__tekst { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.merk__naam { font-size: 1.34rem; font-weight: 700; letter-spacing: -.015em; }
.merk__regio { margin-top: .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .36em; text-transform: uppercase; color: var(--koper-tekst); }
.merk__logo { display: block; width: auto; }
.merk__logo--kop { height: 2.8rem; }
.merk__logo--voet { height: 3.2rem; }

.menuknop { position: relative; z-index: 3; margin-left: auto; display: inline-flex; align-items: center; gap: .65rem; min-height: 2.9rem; padding: .5rem 1.1rem; font: inherit; font-weight: 600; color: var(--petrol); background: transparent; border: 1.5px solid var(--petrol); border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s; }
.menuknop__lijnen { display: grid; gap: 5px; width: 1.1rem; }
.menuknop__lijnen span { height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s; }
body.menu-open .menuknop { background: var(--petrol); color: #fff; }
body.menu-open .menuknop__lijnen span:first-child { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .menuknop__lijnen span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.kop__contact { display: none; }

/* schermvullend menu (telefoon en tablet) */
.nav { position: fixed; inset: 0; z-index: 2; padding: calc(var(--kophoogte) + .5rem) var(--marge) 2.5rem; overflow-y: auto; background: var(--warmwit); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s, transform .3s, visibility 0s linear .3s; }
body.menu-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s; }
body.menu-open { overflow: hidden; }
.nav__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.nav__item { border-bottom: 1px solid var(--lijn); }
.nav__link { display: block; padding: 1rem 0; font-size: 1.55rem; font-weight: 600; letter-spacing: -.01em; color: var(--petrol-donker); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--koper-tekst); }
.nav__knop { display: none; }
.mega { padding: 0 0 1.1rem; }
.mega__intro { display: none; }
.mega__groepen { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mega__groepen a { display: block; padding: .75rem 1rem; border-radius: 14px; background: var(--zand-licht); text-decoration: none; }
.mega__groepen a[aria-current="page"] { background: var(--petrol-licht); }
.mega__titel { display: block; font-weight: 600; color: var(--petrol-donker); line-height: 1.3; }
.mega__sub { display: block; margin-top: .15rem; font-size: .9rem; line-height: 1.4; color: var(--zacht); }
.nav__voet { display: grid; justify-items: start; gap: .75rem; margin-top: 2rem; }
.nav__voet p { margin: 0; font-size: .92rem; color: var(--zacht); }

@media (min-width: 40rem) {
  .kop__contact { display: inline-flex; margin-left: auto; }
  .menuknop { margin-left: 0; }
}
@media (max-width: 23.5rem) {
  .merk__naam { font-size: 1.16rem; }
  .merk__regio { letter-spacing: .28em; }
  .merk__teken { width: 2.3rem; height: 2.3rem; }
  .merk { gap: .6rem; }
  .menuknop { padding-inline: .85rem; }
}

@media (min-width: 64rem) {
  :root { --kophoogte: 6rem; }
  .menuknop, .nav__voet, .nav__link--mobiel { display: none; }
  .nav { position: static; z-index: auto; margin-left: auto; padding: 0; overflow: visible; background: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .kop__contact { margin-left: 0; }
  .nav__lijst { display: flex; align-items: center; gap: .2rem; border: 0; }
  .nav__item { border: 0; }
  .nav__link { position: relative; padding: .6rem 1rem; font-size: 1.02rem; font-weight: 500; letter-spacing: 0; color: var(--inkt); border-radius: 999px; white-space: nowrap; }
  .nav__link:hover { background: var(--zand-licht); color: var(--petrol-donker); }
  .nav__link[aria-current="page"], .nav__item--diensten.is-actief .nav__knop { color: var(--petrol); font-weight: 600; }
  .nav__link[aria-current="page"]::after, .nav__item--diensten.is-actief .nav__knop::after { content: ""; position: absolute; left: 50%; bottom: .15rem; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--koper); }
  .nav__knop { display: inline-flex; align-items: center; gap: .35rem; font: inherit; background: none; border: 0; cursor: pointer; }
  .nav__knop .icoon { width: 1rem; height: 1rem; transition: transform .25s; }
  .nav__knop[aria-expanded="true"] { background: var(--zand-licht); }
  .nav__knop[aria-expanded="true"] .icoon { transform: rotate(180deg); }
  .mega { position: absolute; left: 0; right: 0; top: 100%; padding: 2.25rem 0 2.5rem; background: #fff; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); box-shadow: 0 30px 50px rgba(14, 74, 83, .12); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
  .nav__item--diensten.is-open .mega,
  html:not(.js) .nav__item--diensten:hover .mega,
  html:not(.js) .nav__item--diensten:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
  .mega__binnen { width: min(100% - 2 * var(--marge), var(--breder)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 3rem; }
  .mega__intro { display: block; }
  .mega__kop { margin: 0 0 .5rem; font-size: 1.55rem; font-weight: 600; color: var(--petrol-donker); }
  .mega__intro p:not(.mega__kop) { color: var(--zacht); }
  .mega__groepen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .mega__groepen a { height: 100%; padding: 1.1rem 1.25rem; background: var(--warmwit); border: 1px solid var(--lijn); transition: border-color .2s, background-color .2s; }
  .mega__groepen a:hover { border-color: var(--petrol); background: #fff; }
  .mega__titel { font-size: 1.08rem; }
}

/* ---------------------------------------------------------------- held */
.held { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3.5rem, 8vw, 6.5rem); overflow: hidden; }
.held__raster { display: grid; gap: 3rem; align-items: center; }
.held__raster > * { min-width: 0; }
@media (min-width: 56rem) { .held__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4.5rem; } }
.held h1 { font-size: clamp(2.6rem, 6.2vw, 4.9rem); line-height: 1.03; letter-spacing: -.035em; margin: 0 0 1.4rem; }
.held__lead { font-size: clamp(1.14rem, 1.9vw, 1.32rem); color: var(--zacht); max-width: 34rem; }
.held__onderwerpen { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.6rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--lijn); }
.held__onderwerpen a { display: inline-block; padding: .45rem .95rem; border-radius: 999px; background: var(--zand-licht); color: var(--petrol-donker); font-size: .93rem; font-weight: 500; text-decoration: none; }
.held__onderwerpen a:hover { background: var(--zand); }
.held__beeld { position: relative; isolation: isolate; width: 100%; max-width: 34rem; margin-left: auto; }
.held__beeld::before { content: ""; position: absolute; z-index: -1; top: 14%; bottom: -1.25rem; left: -1.25rem; right: 22%; border-radius: var(--rond); background: var(--zand); }
.held__foto { aspect-ratio: 5 / 4; }
.held__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.held__kaart { position: relative; display: grid; gap: .1rem; max-width: 17rem; margin: -2.5rem 0 0 1rem; padding: 1rem 1.25rem 1.05rem; background: #fff; border-radius: 16px; color: var(--inkt); text-decoration: none; box-shadow: 0 18px 40px rgba(14, 74, 83, .16); }
.held__kaart:hover { color: var(--inkt); }
.held__kaart-boven { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--koper-tekst); }
.held__kaart strong { font-size: 1.28rem; color: var(--petrol-donker); }
.held__kaart-actie { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 600; color: var(--petrol); }
@media (min-width: 40rem) { .held__foto { aspect-ratio: 4 / 5; } .held__foto > img { object-position: 50% 50%; } }
@media (min-width: 56rem) {
  .held__kaart { position: absolute; left: -2.5rem; bottom: 2.25rem; margin: 0; }
}

/* ---------------------------------------------------------------- hulpvragen */
.hulpvragen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .hulpvragen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hulpvragen li:last-child { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
  .hulpvragen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hulpvragen li:nth-child(-n+3) { grid-column: span 2; }
  .hulpvragen li:nth-child(n+4) { grid-column: span 3; }
}
.hulpvraag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icoon vraag pijl" "icoon tekst pijl"; align-items: center; gap: .2rem 1rem; height: 100%; padding: 1.4rem 1.5rem; background: #fff; border: 1px solid var(--lijn); border-radius: 18px; color: var(--inkt); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.hulpvraag:hover { color: var(--inkt); border-color: var(--petrol); box-shadow: 0 14px 34px rgba(14, 74, 83, .1); transform: translateY(-2px); }
.hulpvraag__icoon { grid-area: icoon; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--petrol-licht); color: var(--petrol); }
.hulpvraag__icoon .icoon { width: 1.5rem; height: 1.5rem; }
.hulpvraag__vraag { grid-area: vraag; font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--petrol-donker); }
.hulpvraag__tekst { grid-area: tekst; font-size: .93rem; line-height: 1.45; color: var(--zacht); }
.hulpvraag__pijl { grid-area: pijl; color: var(--koper-tekst); transition: transform .2s; }
.hulpvraag:hover .hulpvraag__pijl { transform: translateX(3px); }

/* ---------------------------------------------------------------- kennismaking */
.kennis { display: grid; gap: 3rem; align-items: center; }
.kennis > * { min-width: 0; }
@media (min-width: 56rem) { .kennis { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; } }
.kennis__beeld { position: relative; padding: 0 2.5rem 3rem 0; max-width: 30rem; }
.kennis--over .kennis__beeld { padding: 0; }
.kennis__foto { position: absolute; right: 0; bottom: 0; width: 55%; border: 6px solid var(--zand-licht); border-radius: 20px; }
.portret { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--rond); overflow: hidden; }
.portret img { width: 100%; height: 100%; object-fit: cover; }
.portret--leeg { display: grid; place-content: center; justify-items: center; gap: .6rem; background: linear-gradient(160deg, var(--petrol-licht) 0%, var(--zand) 100%); }
.portret__initialen { font-size: clamp(3.6rem, 9vw, 5.2rem); font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--petrol); }
.portret__tekst { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.portret--rond { width: 4.25rem; height: 4.25rem; flex: none; aspect-ratio: 1; border-radius: 50%; }
.portret--rond .portret__initialen { font-size: 1.35rem; }
.portret--rond .portret__tekst { display: none; }

/* ---------------------------------------------------------------- afwisselende blokken */
.blok { padding-block: clamp(2rem, 5vw, 3.5rem); }
.blok__raster { display: grid; gap: 2rem 4.5rem; align-items: center; }
.blok__raster > * { min-width: 0; }
@media (min-width: 56rem) {
  .blok__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .blok--omgekeerd .blok__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .blok--omgekeerd .blok__beeld { order: 2; }
}
.blok__nr { margin: 0 0 .8rem; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--koper-tekst); }
.blok h2, .blok h3 { font-size: clamp(1.5rem, 6.2vw, 2.6rem); }
.blok__tekst > p { color: var(--zacht); }
.blok__tekst > p.lead { color: var(--inkt); }
.blok--dienst { padding-block: clamp(3rem, 7vw, 5rem); }
.blok--dienst:nth-of-type(odd) { background: var(--zand-licht); }
.blok--onderdeel { padding-block: clamp(3.5rem, 8vw, 6rem); }
.blok--onderdeel.blok--omgekeerd { background: var(--zand-licht); }
.labels { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1.6rem; padding: 0; }
.labels a { display: inline-block; padding: .45rem .95rem; border: 1px solid var(--lijn-donker); border-radius: 999px; color: var(--petrol-donker); font-size: .95rem; font-weight: 500; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.labels a:hover { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.labels--klein { margin-bottom: 0; }
.labels--klein a { padding: .35rem .8rem; font-size: .88rem; }
.onderdelen { margin: 1.5rem 0 0; }
.onderdelen > div { padding: 1rem 0; border-top: 1px solid var(--lijn-donker); }
.onderdelen dt { font-weight: 600; font-size: 1.1rem; }
.onderdelen dt a { color: var(--petrol-donker); text-decoration: none; }
.onderdelen dt a:hover { text-decoration: underline; color: var(--petrol); }
.onderdelen dd { margin: .2rem 0 0; color: var(--zacht); }
.bespreekkaart { margin: 1.6rem 0 1.9rem; padding: 1.4rem 1.6rem; background: var(--zand-licht); border-radius: 16px; }
.blok--omgekeerd .bespreekkaart { background: #fff; }
.bespreekkaart h3 { font-size: 1.1rem; margin: 0 0 .75rem; }
.vinklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.vinklijst li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .7rem; line-height: 1.5; }
.vinklijst li::before { content: ""; width: 1.4rem; height: 1.4rem; margin-top: .1rem; border-radius: 50%; background: var(--petrol-licht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6L17.5 8.6' fill='none' stroke='%230e4a53' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.sectie--petrollicht .vinklijst li::before { background-color: #fff; }

/* ---------------------------------------------------------------- paginakop */
.paginakop { padding-block: clamp(2rem, 5vw, 4rem) clamp(3.25rem, 7vw, 5.5rem); }
.paginakop__raster { display: grid; gap: 2.5rem; align-items: center; }
.paginakop__raster > * { min-width: 0; }
@media (min-width: 56rem) { .paginakop__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4.5rem; } }
.paginakop h1, .contactintro h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 1.2rem; }
.paginakop__intro { max-width: 38rem; font-size: clamp(1.1rem, 1.7vw, 1.25rem); color: var(--zacht); }
.paginakop__beeld .foto, .contactintro__beeld .foto { box-shadow: -.6rem .6rem 0 var(--zand); }
@media (min-width: 56rem) { .paginakop__beeld .foto, .contactintro__beeld .foto { box-shadow: -1.25rem 1.25rem 0 var(--zand); } }
.kruimelpad ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin: 0 0 1.6rem; padding: 0; font-size: .92rem; color: var(--zacht); }
.kruimelpad li + li::before { content: "›"; margin-right: .5rem; color: var(--koper); }
.kruimelpad a { color: var(--petrol); }

.chipnav { position: sticky; top: var(--kophoogte); z-index: 20; background: var(--warmwit); border-block: 1px solid var(--lijn); }
.chipnav__binnen { display: flex; align-items: center; gap: 1rem; padding-block: .7rem; overflow-x: auto; scrollbar-width: none; }
.chipnav__binnen::-webkit-scrollbar { display: none; }
.chipnav__kop { flex: none; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--koper-tekst); }
.chipnav ul { display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.chipnav a { display: block; padding: .45rem 1rem; border: 1px solid var(--lijn-donker); border-radius: 999px; color: var(--petrol-donker); font-size: .95rem; font-weight: 500; text-decoration: none; }
.chipnav a:hover, .chipnav a.is-actief { background: var(--petrol); border-color: var(--petrol); color: #fff; }

/* ---------------------------------------------------------------- dienstenpagina */
.index__kop { font-size: 1.45rem; margin-bottom: 1.5rem; }
.index { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.index__groep { padding: 1.4rem 1.5rem; background: #fff; border: 1px solid var(--lijn); border-radius: 18px; }
.index__groep h3 { font-size: 1.08rem; margin: 0 0 .6rem; }
.index__groep h3 a { color: var(--petrol-donker); text-decoration: none; }
.index__groep h3 a:hover { text-decoration: underline; }
.index__groep ul { list-style: none; margin: 0; padding: 0; }
.index__groep li a { display: inline-block; padding-block: .28rem; color: var(--zacht); text-decoration: none; }
.index__groep li a:hover { color: var(--petrol); text-decoration: underline; }

/* ---------------------------------------------------------------- dienstpagina */
.weetpaneel { display: grid; gap: 1.5rem 3rem; padding: clamp(1.75rem, 4.5vw, 3rem); background: var(--petrol-licht); border-radius: var(--rond); }
.weetpaneel > * { min-width: 0; }
@media (min-width: 56rem) { .weetpaneel { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.weetpaneel__icoon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 50%; background: var(--petrol); color: #fff; }
.weetpaneel__icoon .icoon { width: 1.4rem; height: 1.4rem; }
.weetpaneel__kop p { color: var(--zacht); margin: 0; }
.weetpaneel__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.weetpaneel__lijst li { padding: 1rem 1.25rem; background: #fff; border-left: 4px solid var(--koper); border-radius: 14px; }
.anderen { display: grid; gap: 1.5rem 4rem; }
.anderen > * { min-width: 0; }
@media (min-width: 56rem) { .anderen { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.anderen h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.anderen ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn-donker); }
.anderen a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid var(--lijn-donker); color: var(--inkt); text-decoration: none; }
.anderen__titel { font-size: 1.2rem; font-weight: 600; color: var(--petrol-donker); }
.anderen__tekst { grid-column: 1; font-size: .95rem; color: var(--zacht); }
.anderen .icoon { grid-column: 2; grid-row: 1 / 3; color: var(--koper-tekst); transition: transform .2s; }
.anderen a:hover .anderen__titel { text-decoration: underline; }
.anderen a:hover .icoon { transform: translateX(4px); }
.ctakaart { display: grid; gap: 1.5rem 3rem; align-items: center; padding: clamp(1.75rem, 4.5vw, 3.25rem); background: var(--zand); border-radius: var(--rond); }
.ctakaart > * { min-width: 0; }
@media (min-width: 56rem) { .ctakaart { grid-template-columns: minmax(0, 1fr) auto; } }
.ctakaart h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 0 .6rem; }
.ctakaart p { margin: 0; max-width: 40rem; color: var(--zacht); }
.ctakaart .knoppen { margin-top: 0; }

/* ---------------------------------------------------------------- over */
.aanbod { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .aanbod { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aanbod > li { padding: 1.75rem 1.75rem 1.6rem; background: #fff; border-top: 3px solid var(--koper); border-radius: 18px; }
.aanbod h3 a { color: var(--petrol-donker); text-decoration: none; }
.aanbod h3 a:hover { text-decoration: underline; }
.aanbod p { color: var(--zacht); }
.combi { display: grid; gap: 2.5rem 4rem; align-items: center; }
.combi > * { min-width: 0; }
@media (min-width: 60rem) { .combi { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.lijnstappen { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
.lijnstappen li { position: relative; display: grid; justify-items: center; gap: .3rem; text-align: center; }
.lijnstappen__punt { position: relative; z-index: 1; display: grid; place-items: center; width: 3.3rem; height: 3.3rem; margin-bottom: .5rem; border-radius: 50%; background: var(--petrol); color: #fff; }
.lijnstappen__punt .icoon { width: 1.45rem; height: 1.45rem; }
.lijnstappen strong { font-size: 1.15rem; color: var(--petrol-donker); }
.lijnstappen li > span:last-child { font-size: .93rem; line-height: 1.45; color: var(--zacht); }
@media (min-width: 40rem) {
  .lijnstappen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lijnstappen::before { content: ""; position: absolute; top: 1.6rem; left: 16%; right: 16%; height: 2px; background: repeating-linear-gradient(90deg, var(--koper) 0 8px, transparent 8px 14px); }
}
.werkwijze { display: grid; gap: 2rem 4rem; }
.werkwijze > * { min-width: 0; }
@media (min-width: 56rem) { .werkwijze { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.werkwijze > div p { color: var(--zacht); font-size: .95rem; }
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn li { position: relative; padding: 0 0 2rem 4.25rem; }
.tijdlijn li::before { content: ""; position: absolute; left: 1.4rem; top: 2.9rem; bottom: .2rem; width: 2px; background: var(--lijn-donker); }
.tijdlijn li:last-child { padding-bottom: 0; }
.tijdlijn li:last-child::before { display: none; }
.tijdlijn__nr { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.85rem; height: 2.85rem; border: 2px solid var(--petrol); border-radius: 50%; background: #fff; color: var(--petrol); font-weight: 700; }
.tijdlijn h3 { margin: .45rem 0 .35rem; font-size: 1.22rem; }
.tijdlijn p { margin: 0; color: var(--zacht); }

/* ---------------------------------------------------------------- contact */
.contactstart { display: grid; gap: 2.5rem 4rem; align-items: center; }
.contactstart > * { min-width: 0; }
@media (min-width: 56rem) { .contactstart { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kiezer { display: grid; gap: .8rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: #fff; border-radius: var(--rond); box-shadow: 0 20px 50px rgba(14, 74, 83, .1); }
.kiezer > * { min-width: 0; }
.kiezer__kop { margin: 0 0 .3rem; font-size: 1.45rem; }
.kiezer label { font-weight: 600; }
.kiezer .knop { justify-self: start; white-space: normal; text-align: left; }
.kiezer .contactregels { margin-top: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--lijn); }
.contactregels { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .5rem; }
.contactregels li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .8rem; }
.contactregels span { min-width: 8.5rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--koper-tekst); }
.contactregels strong { color: var(--petrol-donker); font-weight: 600; }
.contactregels a { overflow-wrap: anywhere; }
.contactregels__noot { margin: .7rem 0 0; font-size: .93rem; color: var(--zacht); }
.contactregels--licht span { color: var(--koper-licht); }
.contactregels--licht strong, .contactregels--licht a { color: #fff; }
.contactintro { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.contactintro__raster { display: grid; gap: 2.5rem 4.5rem; align-items: center; }
.contactintro__raster > * { min-width: 0; }
@media (min-width: 56rem) { .contactintro__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.contactintro__persoon { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.contactintro__persoon p { display: grid; margin: 0; line-height: 1.3; }
.contactintro__persoon span { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--koper-tekst); }
.contactintro__persoon strong { font-size: 1.22rem; font-weight: 600; color: var(--petrol-donker); }
.formulierkaart { padding: clamp(1.4rem, 4.5vw, 3.25rem); background: #fff; border-radius: var(--rond); box-shadow: 0 24px 60px rgba(14, 74, 83, .08); }
.formulierkaart h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.formulierkaart__intro { color: var(--zacht); }
.melding { margin: 0 0 1.5rem; padding: 1.1rem 1.3rem; border-radius: 14px; }
.melding:focus { outline: 3px solid var(--petrol); outline-offset: 3px; }
.melding p { margin: 0; }
.melding--goed { display: flex; align-items: center; gap: .8rem; background: #e6f2ea; border: 1.5px solid #2e7d4f; color: #173d23; font-size: 1.08rem; font-weight: 600; }
.melding--goed .icoon { width: 1.6rem; height: 1.6rem; color: #2e7d4f; }
.melding--fout { background: #fdecea; border: 1.5px solid var(--rood); color: #6e1510; }
.melding--fout ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.melding--fout a { color: inherit; }
.formulier__groep { margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.formulier__groep + .formulier__groep { padding-top: 1.5rem; border-top: 1px solid var(--lijn); }
.formulier__groep legend { margin-bottom: 1rem; padding: 0; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--koper-tekst); }
.veldrij { display: grid; gap: 0 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .veldrij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.veld { display: grid; gap: .4rem; align-content: start; margin-bottom: 1.3rem; }
.veld > * { min-width: 0; }
.veld label { font-weight: 600; }
.veld__status { font-size: .9rem; font-weight: 400; color: var(--zacht); }
.veld input, .veld select, .veld textarea, .kiezer select { width: 100%; min-height: 3.25rem; padding: .8rem 1rem; font: inherit; color: var(--inkt); background: #fff; border: 1.5px solid #7a8385; border-radius: 12px; }
.veld select, .kiezer select { appearance: none; padding-right: 2.8rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230e4a53' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .95rem center; background-size: 1.15rem; }
.veld textarea { min-height: 11rem; resize: vertical; line-height: 1.55; }
.veld input:focus, .veld select:focus, .veld textarea:focus, .kiezer select:focus { outline: 3px solid var(--petrol); outline-offset: 1px; border-color: var(--petrol); }
.veld__hulp { margin: 0; font-size: .9rem; color: var(--zacht); }
.veld__fout { margin: 0; font-size: .95rem; font-weight: 600; color: var(--rood); }
.veld--fout input, .veld--fout select, .veld--fout textarea { border-color: var(--rood); background-color: #fff8f7; }
.formulier__voet { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; }
.formulier__noot { margin: 0; font-size: .93rem; color: var(--zacht); }
.formulier__noot [data-teller] { display: block; }
.vragen__kop { margin-bottom: 1.5rem; }
.vragen { display: grid; gap: .75rem; }
.vragen details { background: #fff; border: 1px solid var(--lijn); border-radius: 16px; }
.vragen summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; font-weight: 600; color: var(--petrol-donker); cursor: pointer; list-style: none; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary .icoon { color: var(--koper-tekst); transition: transform .25s; }
.vragen details[open] summary .icoon { transform: rotate(180deg); }
.vragen details p { margin: 0; padding: 0 1.35rem 1.25rem; color: var(--zacht); }

/* ---------------------------------------------------------------- 404 */
.fout404 h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); letter-spacing: -.03em; }
.fout404 .lead { color: var(--zacht); }
.fout404__links { list-style: none; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin: 2rem 0 0; padding: 0; }
.fout404__links a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--lijn); border-radius: 14px; color: var(--petrol-donker); font-weight: 600; text-decoration: none; }
.fout404__links a:hover { border-color: var(--petrol); color: var(--petrol-donker); }
.fout404__links .icoon { color: var(--koper-tekst); }

/* ---------------------------------------------------------------- voettekst */
.voet { padding-top: clamp(3rem, 6vw, 5rem); background: var(--zand-licht); color: var(--inkt); }
.voet__paneel { display: grid; gap: 1.75rem 3rem; align-items: center; padding: clamp(1.75rem, 4.5vw, 3.25rem); color: #fff; background-color: var(--petrol); background-image: radial-gradient(circle at 100% 0, rgba(227, 181, 143, .2), transparent 48%); border-radius: var(--rond); }
.voet__paneel > * { min-width: 0; }
@media (min-width: 56rem) { .voet__paneel { grid-template-columns: minmax(0, 1fr) auto; } }
.voet__paneel h2 { margin: 0 0 .4rem; font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: #fff; }
.voet__paneel .contactregels__noot { color: #d6e3e4; }
.voet__paneel-actie { display: grid; justify-items: start; gap: .7rem; }
.voet__paneel-actie p { margin: 0; font-size: .92rem; color: #d6e3e4; }
.voet__raster { display: grid; gap: 2.25rem 3rem; padding-block: 3.25rem 2.5rem; grid-template-columns: minmax(0, 1fr); }
.voet__raster > * { min-width: 0; }
@media (min-width: 48rem) { .voet__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr) minmax(0, .75fr); } }
.voet__merk p { max-width: 22rem; margin-top: 1rem; color: var(--zacht); }
.voet__kop { margin: 0 0 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--koper-tekst); }
.voet__diensten ul, .voet__paginas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.voet__diensten a { display: inline-block; padding-block: .1rem; font-weight: 600; color: var(--petrol-donker); text-decoration: none; }
.voet__diensten span { display: block; font-size: .9rem; line-height: 1.45; color: var(--zacht); }
.voet__paginas a { display: inline-block; padding-block: .25rem; color: var(--inkt); text-decoration: none; }
.voet__diensten a:hover, .voet__paginas a:hover { text-decoration: underline; color: var(--petrol); }
.voet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; padding-block: 1.4rem 1.8rem; border-top: 1px solid var(--lijn-donker); font-size: .93rem; color: var(--zacht); }
.voet__onder p { margin: 0; }
.voet__onder a { display: inline-block; padding-block: .25rem; }
.voet__ijob a { font-weight: 700; color: var(--koper-tekst); }
.voet__ijob a:hover { color: var(--petrol); }

/* ---------------------------------------------------------------- onthulling */
.onthul { transition: opacity .7s ease, transform .7s ease; }
.js .onthul.is-wacht { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .onthul.is-wacht { opacity: 1; transform: none; }
}