/* =========================================================
   Danny's Bouwbedrijf — Weboptimal
   Signaalkleur is het goud uit het logo en van de bedrijfsbus.
   ========================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --zwart: #111114;
  --zwart-2: #1a1a1f;
  --ink: #16161a;
  --zacht: #6b6b73;
  --goud: #e4a11b;
  --goud-dk: #c2870e;
  --goud-tekst: #97690a;
  --bg: #ffffff;
  --grijs: #f5f4f3;
  --grijs-2: #ebe9e7;
  --rand: #e4e1de;
  --titel: 'Archivo', sans-serif;
  --body: 'Hanken Grotesk', sans-serif;
  --max: 1240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* iOS blaast tekst anders op zodra je het toestel kantelt */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Ankerlinks niet onder de vastgezette balk laten verdwijnen */
[id] { scroll-margin-top: 96px; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(228, 161, 27, .2);
}

h1, h2, h3, h4 {
  font-family: var(--titel);
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -.025em;
  text-wrap: balance;
  /* Nederlandse samenstellingen zijn lang; op smalle schermen mogen ze breken */
  overflow-wrap: break-word;
}

p, li, dd, blockquote { overflow-wrap: break-word; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.sectie { padding: 104px 0; }
.sectie--s { padding: 80px 0; }
.zwart { background: var(--zwart); color: #fff; }
.grijs { background: var(--grijs); }
.center { text-align: center; }

.ic { width: 1em; height: 1em; fill: currentColor; flex: none; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.skiplink {
  position: absolute;
  left: -9999px;
  z-index: 999;
  background: var(--goud);
  color: var(--zwart);
  font-family: var(--titel);
  font-weight: 700;
  padding: 14px 22px;
}
.skiplink:focus { left: 12px; top: 12px; }

:focus-visible { outline: 3px solid var(--goud); outline-offset: 3px; }

/* Nog in te vullen door de klant (alleen zichtbaar zolang leeg) */
.tbd {
  background: rgba(228, 161, 27, .22);
  border-bottom: 1px dashed var(--goud);
  padding: 0 .25em;
}

.label {
  font-family: var(--titel);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--goud-tekst);
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.label::before { content: ''; width: 28px; height: 3px; background: var(--goud); }
.zwart .label,
.phead .label,
.hero .label { color: var(--goud); }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-family: var(--titel);
  font-weight: 700;
  font-size: .97rem;
  padding: 16px 32px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: transform .15s, background .2s, color .2s, border-color .2s;
}
.btn--p { background: var(--goud); color: var(--zwart); }
.btn--p:hover { background: var(--goud-dk); transform: translateY(-2px); }
.btn--zwart { background: var(--zwart); color: #fff; }
.btn--zwart:hover { background: #000; transform: translateY(-2px); }
.btn--rand { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn--rand:hover { background: var(--ink); color: #fff; }
.btn--randwit { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .4); }
.btn--randwit:hover { background: #fff; color: var(--zwart); border-color: #fff; }

.tekstlink {
  font-family: var(--titel);
  font-weight: 700;
  border-bottom: 2px solid var(--goud);
  padding-bottom: 2px;
}

/* ---------- Topbalk ---------- */
.top { background: #000; color: #bdbdc4; font-size: .85rem; font-weight: 500; }
.top__in { display: flex; justify-content: space-between; align-items: center; min-height: 44px; gap: 16px; }
.top__in span { display: inline-flex; align-items: center; }
.top__in .ic { color: var(--goud); margin-right: 8px; }
.top__in .l span { margin-right: 24px; }
.top__in .r span { margin-left: 24px; }
.top a:hover { color: #fff; }

/* ---------- Navigatie ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 24px; }

.nav__logo { display: flex; align-items: center; gap: 12px; flex: none; }
.logo-merk { width: 46px; height: auto; flex: none; color: var(--zwart); }
.logo-merk--wit { color: #fff; }
.nav__logo .custom-logo { max-height: 52px; width: auto; }
.nav__naam {
  font-family: var(--titel);
  font-weight: 900;
  font-size: 1.32rem;
  letter-spacing: -.045em;
  line-height: 1;
  text-transform: uppercase;
}
.nav__naam b { color: var(--goud-tekst); font-weight: 900; }
.nav__naam span {
  display: block;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .17em;
  color: var(--zacht);
  margin-top: 4px;
  text-transform: uppercase;
}

.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__links .menu {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  font-family: var(--titel);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  transition: color .2s;
  position: relative;
  display: inline-block;
}
.nav__links a:not(.btn):hover { color: var(--goud-tekst); }
.nav__links .current-menu-item > a,
.nav__links .current_page_item > a,
.nav__links .current-menu-ancestor > a { color: var(--goud-tekst); }
.nav__links .current-menu-item > a::after,
.nav__links .current_page_item > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: var(--goud);
}

.nav__toggle {
  display: none;
  background: none;
  border: none;
  color: var(--zwart);
  cursor: pointer;
  padding: 6px;
}
.nav__toggle svg { width: 26px; height: 26px; fill: currentColor; }

/* ---------- Hero (homepage) ---------- */
.hero { background: var(--zwart); color: #fff; position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 55%; height: 160%;
  background: radial-gradient(closest-side, rgba(228, 161, 27, .20), transparent);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 54px;
  align-items: center;
  /* padding-block, niet de verkorte notatie: die zou de zijmarge van
     .wrap wissen en de tekst tegen de schermrand duwen. */
  padding-block: 96px 100px;
}
.hero h1 {
  font-size: clamp(2.5rem, 4.4vw, 3.9rem);
  letter-spacing: -.04em;
  font-weight: 900;
  margin: 26px 0;
}
.hero h1 .g { color: var(--goud); }
.hero p { font-size: 1.22rem; color: #c3c3cc; max-width: 30em; margin-bottom: 36px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 50px; }
.hero__stats { display: flex; gap: 44px; flex-wrap: wrap; }
.hero__stats .n {
  font-family: var(--titel);
  font-weight: 900;
  font-size: 2.5rem;
  letter-spacing: -.03em;
  line-height: 1;
  color: #fff;
}
.hero__stats .n b { color: var(--goud); font-weight: 900; }
.hero__stats .t { font-size: .9rem; color: #9a9aa3; margin-top: 6px; }

.hero__beeld {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #2a2a31;
  background: #17171c;
}
.hero__beeld img { width: 100%; height: 100%; object-fit: cover; }
.hero__beeld .badge {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--goud);
  color: var(--zwart);
  padding: 20px 26px;
}
.hero__beeld .badge b {
  font-family: var(--titel);
  font-weight: 900;
  font-size: 2.1rem;
  display: block;
  line-height: 1;
}
.hero__beeld .badge span { font-size: .85rem; font-weight: 600; }

/* ---------- Paginakop (alle pagina's behalve home) ---------- */
.phead { background: var(--zwart); color: #fff; position: relative; overflow: hidden; }
.phead::before {
  content: '';
  position: absolute;
  top: -40%; right: -5%;
  width: 45%; height: 180%;
  background: radial-gradient(closest-side, rgba(228, 161, 27, .18), transparent);
  pointer-events: none;
}
.phead__in { position: relative; z-index: 1; padding-block: 74px 78px; }
.phead h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  font-weight: 900;
  letter-spacing: -.035em;
  margin: 18px 0 16px;
  max-width: 17em;
}
.phead p { color: #c3c3cc; font-size: 1.12rem; max-width: 44em; }
.crumb { font-size: .88rem; color: #8e8e97; font-weight: 500; margin-bottom: 20px; }
.crumb a:hover { color: #fff; }
.crumb .g { color: var(--goud); }

/* ---------- Sectiekop ---------- */
.kop { max-width: 700px; margin-bottom: 58px; }
.kop.mid { margin-inline: auto; text-align: center; }
.kop h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-top: 16px; }
.kop p { color: var(--zacht); font-size: 1.12rem; margin-top: 16px; }
.zwart .kop p { color: #b6b6bf; }

/* ---------- Dienstenlijst ---------- */
.dlijst { border-top: 1px solid var(--rand); }
.dienst {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 30px;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--rand);
  transition: padding-left .25s, background .2s;
}
.dienst:hover { padding-left: 16px; }
.dienst__nr { font-family: var(--titel); font-weight: 900; font-size: 1.7rem; color: var(--goud-tekst); }
.dienst__t h2,
.dienst__t h3 { font-size: 1.6rem; margin-bottom: 8px; }
.dienst__t p { color: var(--zacht); max-width: 52em; }
.dienst__p { font-size: 1.3rem; color: var(--ink); opacity: .22; transition: opacity .2s, transform .2s; }
.dienst:hover .dienst__p { opacity: 1; transform: translateX(7px); color: var(--goud-tekst); }

/* ---------- Dienstenkaarten (werkzaamheden-pagina) ---------- */
.dgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.dkaart {
  border: 1px solid var(--rand);
  padding: 38px;
  background: #fff;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.dkaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px -26px rgba(0, 0, 0, .3);
  border-color: transparent;
}
.dkaart__ic {
  width: 58px; height: 58px;
  background: var(--zwart);
  color: var(--goud);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  margin-bottom: 22px;
}
.dkaart h2,
.dkaart h3 { font-size: 1.45rem; margin-bottom: 12px; }
.dkaart h2 a:hover { color: var(--goud-tekst); }
.dkaart p { color: var(--zacht); margin-bottom: 18px; }
.dkaart ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.dkaart li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink); font-size: .97rem; }
.dkaart li .ic { color: var(--goud-tekst); margin-top: 5px; }
.dkaart__link a {
  font-family: var(--titel);
  font-weight: 700;
  font-size: .95rem;
  color: var(--goud-tekst);
}
.dkaart__link a:hover { color: var(--ink); }

/* ---------- Projecten ---------- */
.proj { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kaart-p {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--zwart-2);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}
.kaart-p img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.kaart-p:hover img { transform: scale(1.04); }
.kaart-p::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .1) 58%, transparent);
  z-index: 1;
  transition: background .3s;
}
.kaart-p:hover::after {
  background: linear-gradient(0deg, rgba(120, 82, 6, .72), rgba(0, 0, 0, .2) 70%, transparent);
}
.kaart-p > *:not(img) { position: relative; z-index: 2; }
.kaart-p .cat {
  font-family: var(--titel);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--goud);
  margin-bottom: 9px;
}
.kaart-p h3,
.kaart-p__titel { font-size: 1.35rem; color: #fff; margin-bottom: 6px; }
a.cat { align-self: flex-start; }
a.cat:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kaart-p .loc { font-size: .9rem; color: rgba(255, 255, 255, .78); }
.kaart-p.tall { grid-row: span 2; aspect-ratio: auto; }

/* De veeghint hoort bij de carrousel en verschijnt alleen op mobiel */
.veeg-hint { display: none; }

/* ---------- Cijferband ---------- */
.cijfers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.cijfers .n {
  font-family: var(--titel);
  font-weight: 900;
  font-size: clamp(2.7rem, 5vw, 4rem);
  color: var(--goud);
  letter-spacing: -.03em;
  line-height: 1;
}
.cijfers .t { margin-top: 12px; color: #c3c3cc; font-size: 1rem; font-weight: 500; }

/* ---------- Werkwijze: korte kaarten ---------- */
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.stappen--drie { grid-template-columns: repeat(3, 1fr); }
.stap { border-top: 3px solid var(--goud); }
.stap__nr { font-family: var(--titel); font-weight: 900; font-size: 3rem; color: var(--ink); line-height: 1; margin: 22px 0 14px; }
.zwart .stap__nr { color: #fff; }
.stap h3 { font-size: 1.25rem; margin-bottom: 9px; }
.stap p { color: var(--zacht); font-size: .97rem; }
.zwart .stap p { color: #b6b6bf; }

/* ---------- Werkwijze: uitgebreide stappen ---------- */
.stappenlang { border-top: 1px solid var(--rand); }
.stapl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  padding: 48px 0;
  border-bottom: 1px solid var(--rand);
}
.stapl__nr {
  font-family: var(--titel);
  font-weight: 900;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--goud);
  letter-spacing: -.04em;
}
.stapl__t h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 14px; }
.stapl__t p { color: var(--zacht); max-width: 56em; margin-bottom: 18px; }

/* ---------- Opsomming met vinkjes ---------- */
.haakjes { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 22px 0; }
.haakjes li { display: flex; gap: 12px; align-items: flex-start; }
.haakjes .ic { color: var(--goud-tekst); margin-top: 5px; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split p { color: var(--zacht); margin-bottom: 16px; }
.split h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 16px 0 18px; }
.split__beeld {
  aspect-ratio: 4 / 5;
  background: var(--zwart-2);
  position: relative;
  overflow: hidden;
}
.split__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Waarden ---------- */
.waarden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.waarde { padding: 32px; border: 1px solid var(--rand); background: #fff; }
.waarde .ic { font-size: 1.6rem; color: var(--goud-tekst); margin-bottom: 16px; display: block; width: 1.6rem; height: 1.6rem; }
.waarde h3 { font-size: 1.25rem; margin-bottom: 10px; }
.waarde p { color: var(--zacht); font-size: .97rem; }

/* ---------- Veelgestelde vragen ---------- */
.vragen { border-top: 1px solid var(--rand); }
.vragen details { border-bottom: 1px solid var(--rand); }
.vragen summary {
  font-family: var(--titel);
  font-weight: 700;
  font-size: 1.18rem;
  padding: 24px 44px 24px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--goud-tekst);
  line-height: 1;
}
.vragen details[open] summary::after { content: '–'; }
.vragen summary:hover { color: var(--goud-tekst); }
.vragen details p { color: var(--zacht); padding-bottom: 26px; max-width: 60em; }

/* ---------- Quote ---------- */
.quote { background: #fff; border: 1px solid var(--rand); padding: 56px; position: relative; }
.grijs .quote { background: #fff; }
.quote__t {
  font-family: var(--titel);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.32;
  letter-spacing: -.02em;
  margin-bottom: 24px;
}
.quote__t::before {
  content: '\201C';
  color: var(--goud);
  font-size: 2em;
  line-height: 0;
  vertical-align: -.35em;
  margin-right: 6px;
}
.quote__a { font-weight: 600; }
.quote__a span { display: block; color: var(--zacht); font-weight: 400; font-size: .95rem; }
.quote__link { margin-top: 22px; font-weight: 600; font-size: .95rem; }
.quote__link a { border-bottom: 2px solid var(--goud); padding-bottom: 2px; }

/* ---------- Offerte / contact ---------- */
.contact__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.contact__info { list-style: none; }
.contact__info li { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; color: var(--zacht); }
.contact__info .ic { color: var(--goud-tekst); font-size: 1.2rem; margin-top: 5px; width: 1.2rem; height: 1.2rem; }
.contact__info strong { display: block; color: var(--ink); font-weight: 700; font-family: var(--titel); }
.contact__info a { border-bottom: 1px solid var(--rand); color: var(--ink); }
.contact__info a:hover { border-color: var(--goud); }
.contact__info .uren { display: flex; justify-content: space-between; gap: 16px; max-width: 22em; }
.contact__info .uren span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }

.formulier { background: var(--grijs); padding: 38px; border: 1px solid var(--rand); }
.formulier h3,
.formulier__kop { font-size: 1.5rem; margin-bottom: 12px; }
.formulier > p { color: var(--zacht); margin-bottom: 24px; }
.formulier__acties { display: flex; flex-direction: column; gap: 12px; }
.beheerder-melding {
  margin-top: 26px;
  padding: 16px 18px;
  background: rgba(228, 161, 27, .16);
  border-left: 3px solid var(--goud);
  font-size: .9rem;
  color: var(--ink);
}

/* Losse velden (fallback en preview) */
.rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.veld { margin-bottom: 16px; }
.veld label {
  display: block;
  font-family: var(--titel);
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 7px;
}
.veld label i { color: var(--goud-tekst); font-style: normal; }
.veld input,
.veld select,
.veld textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--rand);
  border-radius: 0;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  transition: border-color .2s;
}
.veld input:focus,
.veld select:focus,
.veld textarea:focus { outline: none; border-color: var(--goud); }
.veld textarea { min-height: 140px; resize: vertical; }
.formulier .btn { width: 100%; }
.form__voet { margin-top: 14px; font-size: .86rem; color: var(--zacht); text-align: center; }

/* Fluent Forms in de huisstijl.
   De plugin laadt zijn eigen stylesheet ná die van het thema en zet daarin
   een blauwe knop met afgeronde hoeken. Vandaar de extra specificiteit via
   .frm-fluent-form en een paar !important-regels op precies die
   eigenschappen die de plugin hard overschrijft. */
.formulier .frm-fluent-form .ff-el-group { margin-bottom: 16px; }

.formulier .frm-fluent-form .ff-el-input--label label {
  font-family: var(--titel);
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 7px;
  display: block;
  color: var(--ink);
}
.formulier .frm-fluent-form .ff-el-is-required > label::after { color: var(--goud-tekst); }

.formulier .frm-fluent-form .ff-el-form-control {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--rand) !important;
  border-radius: 0 !important;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  box-shadow: none !important;
  transition: border-color .2s;
}
.formulier .frm-fluent-form .ff-el-form-control:focus {
  outline: none;
  border-color: var(--goud) !important;
  box-shadow: none !important;
}
.formulier .frm-fluent-form textarea.ff-el-form-control { min-height: 140px; resize: vertical; }

.formulier .frm-fluent-form .ff-btn-submit,
.formulier .frm-fluent-form button.ff-btn-submit,
.formulier .frm-fluent-form input[type="submit"].ff-btn-submit {
  width: 100%;
  background: var(--goud) !important;
  background-color: var(--goud) !important;
  background-image: none !important;
  color: var(--zwart) !important;
  font-family: var(--titel) !important;
  font-weight: 700 !important;
  font-size: .97rem !important;
  letter-spacing: -.01em;
  text-transform: none;
  padding: 16px 32px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .2s, transform .15s;
}
.formulier .frm-fluent-form .ff-btn-submit:hover,
.formulier .frm-fluent-form button.ff-btn-submit:hover {
  background-color: var(--goud-dk) !important;
  transform: translateY(-2px);
}
.formulier .frm-fluent-form .ff-btn-submit:focus-visible {
  outline: 3px solid var(--ink) !important;
  outline-offset: 3px;
}

.formulier .frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: #b3151b !important; }
.formulier .frm-fluent-form .error-text,
.formulier .frm-fluent-form .text-danger { color: #b3151b; font-size: .88rem; }
.formulier .frm-fluent-form .ff-message-success {
  background: rgba(228, 161, 27, .14);
  border-left: 3px solid var(--goud);
  color: var(--ink);
  padding: 16px 18px;
}

@media (prefers-reduced-motion: reduce) {
  .formulier .frm-fluent-form .ff-btn-submit:hover { transform: none; }
}

/* ---------- Werkgebied ---------- */
.plaatsen { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.plaatsen li {
  font-family: var(--titel);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #fff;
  border: 1px solid var(--rand);
  padding: 10px 16px;
}

/* ---------- Losse tekstpagina's ---------- */
.prose { max-width: 46em; margin-top: 44px; }
.prose h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 40px 0 14px; }
.prose h3 { font-size: 1.3rem; margin: 30px 0 10px; }
.prose p, .prose ul, .prose ol { margin-bottom: 18px; color: var(--zacht); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--goud-tekst); border-bottom: 1px solid var(--goud); }
.prose__beeld { margin-bottom: 28px; }
.prose strong { color: var(--ink); }

.berichten { display: grid; gap: 40px; max-width: 46em; }
.bericht { border-bottom: 1px solid var(--rand); padding-bottom: 32px; }
.bericht h2 { font-size: 1.7rem; margin-bottom: 8px; }
.bericht__meta { font-size: .88rem; color: var(--zacht); margin-bottom: 12px; }
.bericht p { color: var(--zacht); margin-bottom: 12px; }

.zoekform { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.zoekform input {
  flex: 1;
  min-width: 220px;
  padding: 14px 16px;
  border: 1.5px solid var(--rand);
  font-family: var(--body);
  font-size: 1rem;
  background: #fff;
}
.zoekform input:focus { outline: none; border-color: var(--goud); }
.zoek { margin-top: 48px; max-width: 30em; }

.pagination { margin-top: 44px; display: flex; gap: 10px; }
.pagination .page-numbers {
  padding: 10px 16px;
  border: 1px solid var(--rand);
  font-family: var(--titel);
  font-weight: 600;
}
.pagination .current { background: var(--goud); border-color: var(--goud); color: var(--zwart); }

/* ---------- CTA-band ---------- */
.ctaband { background: var(--zwart); color: #fff; text-align: center; position: relative; overflow: hidden; }
.ctaband::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 200%;
  background: radial-gradient(closest-side, rgba(228, 161, 27, .18), transparent);
  pointer-events: none;
}
.ctaband__in { position: relative; z-index: 1; }
.ctaband h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 18em; margin: 0 auto 18px; }
.ctaband p { color: #c3c3cc; max-width: 34em; margin: 0 auto 30px; font-size: 1.1rem; }
.ctaband .knoppen { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.foot { background: var(--zwart); color: #bdbdc4; padding: 76px 0 30px; }
.foot__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.foot__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.foot__logo .nav__naam { color: #fff; }
.foot__logo .nav__naam b { color: var(--goud); }
.foot__logo .nav__naam span { color: #8f8f97; }
.foot p { max-width: 26em; color: #8f8f97; font-size: .96rem; }
.foot__kop { color: #fff; font-size: 1rem; margin-bottom: 16px; font-weight: 700; letter-spacing: -.01em; }
.foot__uren { font-size: .9rem; color: #8f8f97; }
.foot__lijst { list-style: none; }
.foot__lijst li { margin-bottom: 10px; }
.foot__lijst a { color: #bdbdc4; font-size: .96rem; transition: color .2s; }
.foot__lijst a:hover { color: var(--goud); }
.foot__bottom {
  border-top: 1px solid #2a2a31;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: #74747c;
  font-size: .88rem;
}
.foot__bottom a { color: #74747c; }
.foot__bottom a:hover { color: var(--goud); }

/* ---------- Mobiele actiebalk ---------- */
.mobielbalk {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: #fff;
  border-top: 1px solid var(--rand);
  /* Extra ruimte voor de home-indicator op iPhones zonder thuisknop */
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 10px;
  box-shadow: 0 -8px 26px -12px rgba(0, 0, 0, .3);
}
.mobielbalk__ic {
  display: grid;
  place-items: center;
  width: 52px;
  flex: none;
  border: 2px solid var(--ink);
  color: var(--ink);
}
.mobielbalk__ic .ic { width: 1.25rem; height: 1.25rem; }
.mobielbalk__cta { flex: 1; padding: 15px 18px; }


/* ---------- Knoppenrij (dienstpagina's) ---------- */
.knoppenrij { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.knoppenrij .btn .ic { width: 1.05rem; height: 1.05rem; }

/* ---------- De bedrijfsbus ----------
   Direct onder de hero en van rand tot rand. De kopregel sluit met een
   dunne lijn aan op de hero, de foto loopt door tot de volgende sectie. */
.bus { position: relative; }
.bus__kop {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px 60px;
  align-items: end;
  padding-block: 64px 48px;
  border-top: 1px solid #2a2a31;
}
.bus__kop h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-top: 16px; max-width: 14em; }
.bus__tekst p { color: #b6b6bf; font-size: 1.08rem; margin-bottom: 14px; }
.bus .tekstlink { color: #fff; }
.bus .tekstlink:hover { color: var(--goud); }
.bus__beeld { margin: 0 auto; max-width: 1920px; background: #17171c; }
.bus__beeld picture,
.bus__beeld img { display: block; width: 100%; height: auto; }

/* ---------- Certificaten ---------- */
.cert__lijst {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
}
.cert__item {
  background: #fff;
  border: 1px solid var(--rand);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cert__logo {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--goud-tekst);
}
.cert__logo img { max-height: 96px; width: auto; max-width: 100%; object-fit: contain; }
.cert__logo > .ic { width: 3rem; height: 3rem; }
.cert__naam { font-size: 1.2rem; }
.cert__pdf {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--titel);
  font-weight: 700;
  font-size: .95rem;
  color: var(--goud-tekst);
}
a.cert__pdf:hover { color: var(--ink); }
.cert__pdf .ic { width: 1.1rem; height: 1.1rem; }

/* Voorbeeldvak: bewust opvallend, zodat niemand vergeet dat hier nog iets
   in moet. Verdwijnt zodra er één echt certificaat is ingevuld. */
.cert__item--leeg {
  background: rgba(228, 161, 27, .07);
  border: 2px dashed var(--goud);
}
.cert__item--leeg .cert__logo span {
  width: 140px;
  height: 80px;
  display: grid;
  place-items: center;
  font-family: var(--titel);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--goud-tekst);
  border: 1px dashed var(--goud-dk);
  background: repeating-linear-gradient(135deg, rgba(228, 161, 27, .10) 0 8px, transparent 8px 16px);
}
.cert__item--leeg .cert__naam { color: var(--goud-tekst); }
.cert__item--leeg .cert__pdf { font-family: var(--body); font-weight: 500; font-size: .9rem; color: var(--zacht); }
.cert .beheerder-melding { margin-top: 28px; }

/* ---------- Andere diensten (onderaan dienstpagina's) ---------- */
.dlinks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.dlink {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 18px;
  align-items: center;
  height: 100%;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--rand);
  transition: border-color .2s, transform .2s;
}
.dlink:hover { border-color: var(--goud); transform: translateY(-2px); }
.dlink__ic {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: var(--zwart);
  color: var(--goud);
  font-size: 1.25rem;
}
.dlink__t strong { display: block; font-family: var(--titel); font-weight: 800; font-size: 1.12rem; letter-spacing: -.015em; margin-bottom: 3px; }
.dlink__t span { display: block; color: var(--zacht); font-size: .92rem; line-height: 1.45; }
.dlink__p { color: var(--goud-tekst); font-size: 1.2rem; transition: transform .2s; }
.dlink:hover .dlink__p { transform: translateX(5px); }
.meer__links { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 34px; }
.zwart .tekstlink { color: #fff; }

/* ---------- Werkgebied ---------- */
.gebieden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gebied { background: #fff; border: 1px solid var(--rand); padding: 34px; }
.gebied h2,
.gebied h3 { font-size: 1.45rem; margin-bottom: 10px; }
.gebied > p { color: var(--zacht); margin-bottom: 18px; }
.gebied .plaatsen li { background: var(--grijs); }

/* ---------- Inkomen bij het laden ----------
   Puur CSS. Eerder hing dit aan een IntersectionObserver, maar dan blijft
   de tekst onzichtbaar zolang de JavaScript nog niet gedraaid heeft. Op een
   trage verbinding of met uitgestelde scripts zag de bezoeker dan een zwart
   scherm tot hij ergens tikte. Een animatie mag nooit bepalen of tekst
   leesbaar is. */
@keyframes dbb-inkomen {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.reveal { animation: dbb-inkomen .55s cubic-bezier(.2, .7, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  html { scroll-behavior: auto; }
  .btn:hover, .dkaart:hover { transform: none; }
  .kaart-p img { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .cijfers__grid, .stappen, .stappen--drie { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .proj { grid-template-columns: repeat(2, 1fr); }
  .kaart-p.tall { grid-row: span 1; aspect-ratio: 4 / 3; }
  .waarden { grid-template-columns: 1fr; }
  .dgrid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .sectie { padding: 68px 0; }
  .sectie--s { padding: 54px 0; }
  .top { display: none; }

  .nav__links {
    position: fixed;
    inset: 80px 0 auto 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--rand);
    transform: translateY(-140%);
    transition: transform .3s;
    box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .25);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .nav__links.open { transform: translateY(0); }
  .nav__links .menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__links a:not(.btn) { padding: 15px 28px; width: 100%; display: block; }
  .nav__links .current-menu-item > a::after,
  .nav__links .current_page_item > a::after { display: none; }
  .nav__links .btn { margin: 8px 28px; }
  .nav__toggle { display: block; }

  .hero__grid { grid-template-columns: 1fr; gap: 44px; padding-block: 60px 68px; }
  .hero__beeld { aspect-ratio: 16 / 11; }
  .hero__stats { gap: 30px; }
  .phead__in { padding-block: 52px 56px; }

  .dienst { grid-template-columns: 54px 1fr; gap: 18px; }
  .dienst__p { display: none; }
  .stapl { grid-template-columns: 64px 1fr; gap: 20px; padding: 34px 0; }
  .stapl__nr { font-size: 2.2rem; }
  .proj { grid-template-columns: 1fr; }
  .split, .contact__grid { grid-template-columns: 1fr; gap: 36px; }
  .split__beeld { aspect-ratio: 4 / 3; }
  .quote { padding: 34px; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 30px; }

  .mobielbalk { display: flex; }
  /* Alleen ruimte reserveren als de balk er ook echt staat */
  body.heeft-mobielbalk { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* Slankere kop: scheelt bijna 20 pixels aan inhoud boven de vouw */
  .nav__in { height: 64px; }
  .nav__links { inset: 64px 0 auto 0; max-height: calc(100vh - 64px); }
  [id] { scroll-margin-top: 76px; }
  .logo-merk { width: 38px; }
  .nav__naam { font-size: 1.05rem; }
  .nav__naam span { font-size: .5rem; letter-spacing: .14em; }

  /* Voetlinks als volwaardige aanraakvlakken */
  .foot__lijst li { margin-bottom: 2px; }
  .foot__lijst a { display: block; padding: 11px 0; }
  .foot__bottom { font-size: .84rem; }

  /* Vinkjeslijsten en contactregels wat ruimer aantikbaar */
  .contact__info a { display: inline-block; padding: 4px 0; }
  .quote__link a,
  .dkaart__link a { display: inline-block; padding: 8px 0; }
}

@media (max-width: 520px) {
  .cijfers__grid, .stappen, .stappen--drie, .foot__grid { grid-template-columns: 1fr; }
  .formulier, .dkaart { padding: 24px; }
  .rij { grid-template-columns: 1fr; gap: 0; }
  .hero__cta .btn { width: 100%; }

  /* Iets meer bruikbare breedte op kleine toestellen */
  .wrap { padding: 0 20px; }
  .kaart-p { padding: 22px; }
  .kaart-p h3, .kaart-p__titel { font-size: 1.2rem; }
  .quote { padding: 26px; }
  .waarde { padding: 24px; }
  .hero__stats { gap: 22px 30px; }
  .hero__stats .n { font-size: 2.1rem; }
  .stapl { grid-template-columns: 1fr; gap: 8px; }
  .stapl__nr { font-size: 1.9rem; }
  .plaatsen li { font-size: .78rem; padding: 9px 13px; }
  .ctaband .knoppen .btn { width: 100%; }
  .mobielbalk__cta { padding: 15px 12px; font-size: .92rem; }
}

/* Zeer smalle toestellen (iPhone SE en ouder) */
@media (max-width: 360px) {
  .nav__naam { font-size: .95rem; }
  .logo-merk { width: 34px; }
  .hero h1 { font-size: 2.25rem; }
  .mobielbalk__ic { width: 46px; }
}

/* =========================================================
   Mobiele afwerking
   Op een telefoon is de kolom smal en staat alles onder elkaar.
   Twee dingen vragen dan om andere maten dan op een breed scherm:
   de beeldverhoudingen en de ademruimte.
   ========================================================= */
@media (max-width: 820px) {

  /* --- Foto's ---
     Vrijwel al het werk van Danny is staand gefotografeerd (3:4 en 4:5).
     In een liggend vak sneed dat de helft van elke badkamer weg. De vakken
     staan op mobiel daarom rechtop, in de verhouding van de foto's zelf. */
  .hero__beeld { aspect-ratio: 5 / 6; }
  .split__beeld { aspect-ratio: 4 / 5; }

  /* --- Projectfoto's: veegbaar in plaats van een lange stapel ---
     Vijf staande foto's onder elkaar was ruim tweeduizend pixels scrollen.
     De kaarten staan nu naast elkaar; de volgende piept erlangs zodat
     meteen duidelijk is dat er meer is. */
  .proj--carrousel {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    margin-inline: -20px;
    padding-inline: 20px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .proj--carrousel::-webkit-scrollbar { display: none; }
  .proj--carrousel > .kaart-p {
    flex: 0 0 78%;
    grid-row: auto;
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
  }

  .veeg-hint {
    display: block;
    margin-top: 14px;
    font-family: var(--titel);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--zacht);
  }
  .grijs .veeg-hint { color: #6f757c; }

  /* --- Projectenpagina: compact raster ---
     Daar is het overzicht juist het doel, dus staan alle foto's als
     vierkante tegels naast elkaar in twee kolommen. */
  .proj--raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .proj--raster > .kaart-p {
    aspect-ratio: 1 / 1;
    grid-row: auto;
    padding: 14px;
  }
  .proj--raster .cat { font-size: .6rem; letter-spacing: .1em; margin-bottom: 4px; }
  .proj--raster .kaart-p__titel { font-size: .92rem; line-height: 1.15; }
  .proj--raster .loc { display: none; }
  .hero__beeld img,
  .kaart-p img,
  .split__beeld img { object-position: center; }

  /* --- Ademruimte ---
     De ruimtes waren op een breed scherm gekozen. Op 375 pixels leest
     dat als losse blokken met gaten ertussen. */
  .sectie { padding: 54px 0; }
  .sectie--s { padding: 42px 0; }
  .kop { margin-bottom: 32px; }
  .phead__in { padding-block: 40px 44px; }
  .hero__grid { gap: 32px; padding-block: 40px 52px; }
  .hero__cta { margin-bottom: 34px; }
  .dienst { padding: 24px 0; gap: 14px; }
  .stapl { padding: 26px 0; }

  /* De badge op de herofoto was op telefoonformaat te dominant */
  .hero__beeld .badge { padding: 14px 18px; }
  .hero__beeld .badge b { font-size: 1.55rem; }
  .hero__beeld .badge span { font-size: .74rem; }
  .dgrid, .waarden, .proj { gap: 14px; }
  .center[style] { margin-top: 32px !important; }

  /* --- Tekstmaten ---
     Koppen mochten kleiner; lopende tekst juist niet, die blijft 16px+. */
  .hero h1 { font-size: clamp(2.1rem, 8.6vw, 2.7rem); margin: 18px 0; }
  .hero p { font-size: 1.05rem; }
  .kop h2 { font-size: clamp(1.7rem, 6.6vw, 2.1rem); margin-top: 12px; }
  .kop p { font-size: 1.02rem; margin-top: 12px; }
  .phead h1 { font-size: clamp(1.9rem, 7.4vw, 2.4rem); margin: 14px 0 12px; }
  .phead p { font-size: 1.02rem; }
  .dienst__t h3 { font-size: 1.32rem; margin-bottom: 5px; }
  .dienst__t p { font-size: .98rem; }
  .dienst__nr { font-size: 1.25rem; }
  .split h2 { font-size: clamp(1.6rem, 6.4vw, 2rem); }
  .quote__t { font-size: 1.22rem; }
  .stap__nr, .stapl__nr { font-size: 2.2rem; margin: 14px 0 10px; }
  .stap h3 { font-size: 1.15rem; }
  .cijfers .n { font-size: 2.6rem; }
  .cijfers .t { font-size: .95rem; }
  .ctaband h2 { font-size: clamp(1.7rem, 6.6vw, 2.1rem); }
  .ctaband p { font-size: 1.02rem; }
  .foot__kop { font-size: .92rem; }

  /* --- De bus ---
     Kopregel onder elkaar; de foto krijgt een eigen, hogere uitsnede
     (bus-mobiel.webp) zodat logo en streep groot in beeld staan. */
  .bus__kop { grid-template-columns: 1fr; gap: 14px; padding-block: 40px 30px; }
  .bus__kop h2 { font-size: clamp(1.7rem, 6.6vw, 2.1rem); margin-top: 12px; }
  .bus__tekst p { font-size: 1.02rem; }

  /* --- Certificaten, dienstlinks, werkgebied --- */
  .cert__lijst { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cert__item { padding: 18px; gap: 10px; }
  .cert__logo { height: 64px; }
  .cert__logo img { max-height: 64px; }
  .cert__item--leeg .cert__logo span { width: 100%; height: 60px; }
  .cert__naam { font-size: 1.02rem; }
  .cert__pdf { font-size: .86rem; }
  .cert__item--leeg .cert__pdf { font-size: .82rem; line-height: 1.4; }

  .dlinks { grid-template-columns: 1fr; gap: 10px; }
  .dlink { grid-template-columns: 44px 1fr auto; gap: 14px; padding: 16px; }
  .dlink__ic { width: 44px; height: 44px; font-size: 1.1rem; }
  .dlink__t strong { font-size: 1.04rem; }
  .meer__links { gap: 12px 24px; margin-top: 26px; }
  .meer__links .tekstlink { display: inline-block; padding: 6px 0; }

  .gebieden { grid-template-columns: 1fr; gap: 14px; }
  .gebied { padding: 24px; }

  .knoppenrij .btn { flex: 1 1 100%; }
}

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