/* DB-PAGINA: vormgegeven losse pagina's + homepage-aanvullingen */
.dbx { --dbx-w: 1280px; color: var(--muted); font-family: var(--font); }
.dbx *, .dbx *::before, .dbx *::after { box-sizing: border-box; }
.dbx a { text-decoration: none; }
.dbx-in { width: 100%; max-width: calc(var(--dbx-w) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.dbx-sec { padding: clamp(56px, 8vw, 112px) 0; }
.dbx-sec + .dbx-sec:not(.is-dark):not(.dbx-svcs) { padding-top: clamp(24px, 4vw, 56px); }
.dbx .nb-eyebrow { margin: 0 0 14px; }
.dbx .nb-h2 { margin: 0; }
.dbx-shead { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.dbx-slead { margin-top: 16px; font-size: 17px; line-height: 1.7; }
.dbx-slead p { margin: 0 0 12px; }

/* Kop */
.dbx-hero { padding: clamp(150px, 16vw, 210px) 0 clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); background:
	radial-gradient(60% 80% at 100% 0%, rgba(221, 190, 72, .14), transparent 60%),
	linear-gradient(180deg, rgba(36, 63, 18, .035), transparent 70%); }
.dbx-h1 { font: 600 clamp(44px, 6.4vw, 92px)/1 var(--font); letter-spacing: -.02em; color: var(--g-b); margin: 0 0 24px; max-width: 14ch; }
.dbx-lead { max-width: 720px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--muted); }
.dbx-lead p { margin: 0 0 12px; }
.dbx-lead a, .dbx-prose a, .dbx-slead a { color: var(--g-b); border-bottom: 1px solid rgba(141, 120, 39, .5); transition: border-color .2s, color .2s; }
.dbx-lead a:hover, .dbx-prose a:hover, .dbx-slead a:hover { color: var(--gold-b); border-color: var(--gold-b); }
.dbx-hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.dbx-hero-act .nb-btn svg { transition: transform .25s ease; }
.dbx-hero-act .nb-btn:hover svg { transform: translateX(3px); }
.dbx-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--g-b); }
.dbx-link svg { transition: transform .25s ease; }
.dbx-link:hover svg { transform: translateX(3px); }

/* De 'Bekijk'-knop (ook op de homepage-diensten) */
.dbx-bekijk { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: auto; padding: 11px 18px; border: 1px solid currentColor; border-radius: 2px; font: 600 14px/1 var(--font); letter-spacing: .01em; color: var(--g-b); background: transparent; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.dbx-bekijk svg { transition: transform .25s ease; }
.dbx-bekijk:hover, .dbx-bekijk:focus-visible { background: var(--g-b); border-color: var(--g-b); color: var(--paper); }
.dbx-bekijk:hover svg, .dbx-bekijk:focus-visible svg { transform: translateX(3px); }
.is-dark .dbx-bekijk, .nb-dark .dbx-bekijk { color: var(--gold-a); }
.is-dark .dbx-bekijk:hover, .nb-dark .dbx-bekijk:hover, .is-dark .dbx-bekijk:focus-visible, .nb-dark .dbx-bekijk:focus-visible { background: var(--gold-a); border-color: var(--gold-a); color: var(--g-b); }
#diensten .nb-card { display: flex; flex-direction: column; }
#diensten .nb-card .dbx-bekijk { margin-top: auto; }
#diensten .nb-card:hover .dbx-bekijk { background: var(--g-b); border-color: var(--g-b); color: var(--paper); }
#diensten .nb-card.nb-dark:hover .dbx-bekijk { background: var(--gold-a); border-color: var(--gold-a); color: var(--g-b); }
#diensten .nb-card:hover .dbx-bekijk svg { transform: translateX(3px); }

/* Dienstkaarten */
.dbx-svcs { background: #fff; border-bottom: 1px solid var(--line); }
.dbx-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dbx-svc { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3vw, 40px); background: var(--paper); border: 1px solid var(--line); min-height: 320px; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.dbx-svc:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(26, 36, 18, .45); border-color: rgba(141, 120, 39, .45); }
.dbx-svc::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--gold-a); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.dbx-svc:hover::before { transform: scaleX(1); }
.dbx-svc.is-dark { background: var(--g-b); border-color: var(--g-b); color: rgba(246, 245, 239, .82); }
.dbx-svc.is-dark h3 { color: var(--paper); }
.dbx-svc.is-dark .dbx-body a { color: var(--gold-a); border-color: rgba(221, 190, 72, .5); }
.dbx-num { font: italic 400 28px/1 var(--serif); color: var(--gold-b); }
.dbx-svc.is-dark .dbx-num { color: var(--gold-a); }
.dbx-svc h3 { font: 600 clamp(22px, 2vw, 26px)/1.15 var(--font); color: var(--g-b); margin: 0; }
.dbx-body { font-size: 15px; line-height: 1.7; }
.dbx-body p { margin: 0 0 10px; }
.dbx-body a { color: var(--g-b); border-bottom: 1px solid rgba(141, 120, 39, .5); }
.dbx-svc .dbx-bekijk { margin-top: auto; }
.dbx-svc:nth-child(4), .dbx-svc:nth-child(5) { grid-column: span 1; }
@media (min-width: 981px) {
	.dbx-svc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.dbx-svc { grid-column: span 2; }
	.dbx-svc:nth-child(4):nth-last-child(2), .dbx-svc:nth-child(5):last-child { grid-column: span 3; }
}
@media (max-width: 980px) { .dbx-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dbx-svc-grid { grid-template-columns: 1fr; } .dbx-svc { min-height: 0; } }

/* Keuzehulp */
.dbx-choose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.dbx-pick { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #fff; border: 1px solid var(--line); transition: border-color .25s ease, transform .3s ease, box-shadow .3s ease; }
.dbx-pick:hover { border-color: var(--g-b); transform: translateY(-3px); box-shadow: 0 18px 36px -26px rgba(26, 36, 18, .45); }
.dbx-pick h3 { font: 600 17px/1.35 var(--font); color: var(--g-b); margin: 0; }
.dbx-pick p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.6; }
.dbx-pick p a { color: inherit; border: 0; }
.dbx-pick .dbx-bekijk { margin-top: auto; padding: 9px 14px; font-size: 13px; }
.dbx-pick:hover .dbx-bekijk { background: var(--g-b); border-color: var(--g-b); color: var(--paper); }
.dbx-stretch::after { content: ""; position: absolute; inset: 0; }
.dbx-after { margin-top: 24px; }

/* Stappen */
.dbx-steps.is-dark { background: var(--g-b); color: rgba(246, 245, 239, .8); }
.dbx-steps.is-dark .nb-h2 { color: var(--paper); }
.dbx-steps.is-dark .nb-eyebrow { color: var(--gold-a); }
.dbx-step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; position: relative; }
.dbx-step { position: relative; padding-top: 28px; }
.dbx-step::before { content: ""; position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-a); box-shadow: 0 0 0 5px rgba(221, 190, 72, .16); }
.dbx-step .num { display: block; font: italic 400 44px/1 var(--serif); color: var(--gold-a); margin-bottom: 14px; }
.dbx-step h3 { font: 600 19px/1.3 var(--font); color: var(--paper); margin: 0 0 8px; }
.dbx-step p { margin: 0; font-size: 15px; line-height: 1.65; }
.dbx-step-list::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--gold-a), rgba(221, 190, 72, .15)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.dbx-line-on .dbx-step-list::before, .dbx-line-on .nb-steps::before { transform: scaleX(1); }

/* Werkwijze op de homepage: zelfde gouden lijn */
.nb-process .nb-steps { position: relative; }
.nb-process .nb-steps::before { content: ""; position: absolute; top: -26px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--gold-a), rgba(221, 190, 72, .12)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
.nb-process .nb-step { position: relative; }
.nb-process .nb-step::before { content: ""; position: absolute; top: -30px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-a); box-shadow: 0 0 0 5px rgba(221, 190, 72, .16); transform: scale(0); transition: transform .4s ease; }
.dbx-line-on .nb-step::before { transform: scale(1); }
.dbx-line-on .nb-step:nth-child(2)::before { transition-delay: .35s; }
.dbx-line-on .nb-step:nth-child(3)::before { transition-delay: .7s; }
.dbx-line-on .nb-step:nth-child(4)::before { transition-delay: 1.05s; }
@media (max-width: 760px) { .nb-process .nb-steps::before, .dbx-step-list::before { display: none; } }

/* Kernwaarden en missie/visie */
.dbx-val-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dbx-val { padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-left: 2px solid var(--gold-a); }
.dbx-val h3, .dbx-val h4 { font: 600 17px/1.3 var(--font); color: var(--g-b); margin: 0 0 6px; }
.dbx-val p { margin: 0; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 860px) { .dbx-val-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dbx-val-grid { grid-template-columns: 1fr; } }

/* Tweekolom-tekst */
.dbx-split-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.dbx-split-in .dbx-shead { margin: 0; position: sticky; top: 120px; }
.dbx-prose { font-size: 16.5px; line-height: 1.75; }
.dbx-prose p { margin: 0 0 14px; }
.dbx-prose ul, .dbx-prose ol { margin: 0 0 16px; padding-left: 20px; }
.dbx-prose li { margin: 0 0 8px; }
.dbx-prose li::marker { color: var(--gold-b); }
.dbx-prose strong { color: var(--g-b); }
@media (max-width: 860px) { .dbx-split-in { grid-template-columns: 1fr; } .dbx-split-in .dbx-shead { position: static; } }

/* Veelgestelde vragen */
.dbx-faq-list { border-top: 1px solid var(--line); }
.dbx-q { border-bottom: 1px solid var(--line); }
.dbx-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 600 18px/1.35 var(--font); color: var(--g-b); }
.dbx-q summary::-webkit-details-marker { display: none; }
.dbx-q summary i { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; transition: background .25s, border-color .25s, transform .3s; }
.dbx-q summary i::before, .dbx-q summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--g-b); transform: translate(-50%, -50%); transition: transform .3s; }
.dbx-q summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.dbx-q[open] summary i { background: var(--gold-a); border-color: var(--gold-a); }
.dbx-q[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.dbx-q summary:hover { color: var(--gold-b); }
.dbx-a { padding: 0 48px 22px 0; font-size: 16px; line-height: 1.7; }
.dbx-a p { margin: 0 0 10px; }

/* Afsluitende oproep */
.dbx-cta.is-dark { background: var(--g-b); color: rgba(246, 245, 239, .82); }
.dbx-cta-box { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.dbx-cta .nb-h2 { color: var(--paper); }
.dbx-cta-act { display: flex; flex-direction: column; gap: 12px; }
.dbx-cta-act .nb-btn { justify-content: space-between; height: 56px; }
.dbx-btn-line { border: 1px solid rgba(246, 245, 239, .35) !important; color: var(--paper) !important; background: transparent; }
.dbx-btn-line:hover { border-color: var(--gold-a) !important; color: var(--gold-a) !important; }
@media (max-width: 860px) { .dbx-cta-box { grid-template-columns: 1fr; } }

/* Team */
.dbx-team-body .dbteam-intro { max-width: 720px; font-size: 17px; line-height: 1.7; margin: -16px 0 28px; }
.dbx-team-body .dbteam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.dbx-team-body .dbteam-card { background: #fff; border: 1px solid var(--line); padding: 28px; transition: transform .35s ease, box-shadow .35s ease; }
.dbx-team-body .dbteam-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(26, 36, 18, .45); }
.dbx-team-body .dbteam-name { font: 600 22px/1.2 var(--font); color: var(--g-b); margin: 18px 0 4px; }
.dbx-team-body .dbteam-role { color: var(--gold-b); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }

/* Contact */
.dbx-form-card { background: #fff; border: 1px solid var(--line); padding: clamp(22px, 3vw, 40px); box-shadow: 0 30px 60px -40px rgba(26, 36, 18, .4); }
.dbx-info { padding-top: 0 !important; }
.dbx-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.dbx-info-card { padding: 26px; background: #fff; border: 1px solid var(--line); }
.dbx-info-card h3 { font: 600 18px/1.3 var(--font); color: var(--g-b); margin: 14px 0 10px; }
.dbx-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(221, 190, 72, .16); color: var(--gold-b); }
.dbx-info-card .dbx-prose { font-size: 15px; }
.dbx-info-card ul { list-style: none; padding: 0; }

/* Homepage: Over ons in blokken */
.dbx-about-more { grid-column: 1 / -1; display: grid; gap: 16px; margin-top: clamp(16px, 3vw, 32px); }
.dbx-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dbx-mv { padding: clamp(24px, 3vw, 36px); background: var(--g-b); color: rgba(246, 245, 239, .85); }
.dbx-mv:nth-child(2) { background: #fff; color: var(--muted); border: 1px solid var(--line); }
.dbx-mv h3 { font: italic 400 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); color: var(--gold-a); margin: 0 0 12px; }
.dbx-mv:nth-child(2) h3 { color: var(--gold-b); }
.dbx-mv p { margin: 0; font-size: 16.5px; line-height: 1.7; }
.dbx-about-more .dbx-val-head { grid-column: 1 / -1; }
.dbx-about-more .dbx-val-head h3 { font: 600 14px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-b); margin: 20px 0 4px; }
.dbx-tag { margin: 18px 0 0; font: italic 400 clamp(24px, 2.6vw, 34px)/1.25 var(--serif); color: var(--g-b); }
@media (max-width: 760px) { .dbx-mv-grid { grid-template-columns: 1fr; } }
#over-ons.nb-about { padding-bottom: clamp(48px, 6vw, 80px); }

/* Homepage: opdrachtgevers rustig in één toon, in kleur bij hover */
.dbpa img { filter: grayscale(1) contrast(.95); opacity: .7; transition: filter .35s ease, opacity .35s ease; }
.dbpa img:hover, .dbpa a:hover img, .dbpa li:hover img { filter: none; opacity: 1; }

/* Ingelogd: header onder de beheerbalk */
.admin-bar .nb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .nb-header { top: 46px; } }

@media (prefers-reduced-motion: reduce) {
	.dbx-svc, .dbx-pick, .dbx-bekijk, .dbx-bekijk svg, .dbx-step-list::before, .nb-process .nb-steps::before, .nb-process .nb-step::before { transition: none !important; }
}
/* /DB-PAGINA */
/* DB-PAGINA aanvulling */
.dbx h1, .dbx h2, .dbx h3, .dbx h4, .dbx-about-more h3 { text-transform: none; }
.dbx .is-dark a:not(.nb-btn):not(.dbx-bekijk), .dbx-steps.is-dark .dbx-slead a, .dbx-cta.is-dark .dbx-slead a { color: var(--gold-a); border-bottom-color: rgba(221, 190, 72, .5); }
.dbx .is-dark .dbx-slead { color: rgba(246, 245, 239, .78); }

/* DB-PAGINA team */
.dbx-team-body .dbteam-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 2px 24px; align-items: start; }
.dbx-team-body .dbteam-photo { grid-row: 1 / span 4; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--paper); border: 1px solid var(--line); margin: 0; aspect-ratio: auto; }
.dbx-team-body .dbteam-photo img, .dbx-team-body .dbteam-ph { display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover; }
.dbx-team-body .dbteam-ph svg { width: 54%; height: 54%; fill: none; stroke: rgba(36, 63, 18, .35); stroke-width: 2; }
.dbx-team-body .dbteam-name { margin: 6px 0 4px; }
.dbx-team-body .dbteam-bio { margin: 0; font-size: 15px; line-height: 1.7; }
@media (max-width: 560px) { .dbx-team-body .dbteam-card { grid-template-columns: 1fr; } .dbx-team-body .dbteam-photo { grid-row: auto; } }