/* Buro Overheid — huisstijl van burooverheid.nl (Elementor-kit): Manrope, marine, blauw, cyaan, oranje. */
:root {
  --marine: #082755;      /* secondary */
  --primair: #004672;     /* primary / tekst */
  --blauw: #006aa3;
  --blauw-2: #0083ca;
  --cyaan: #59c2d6;
  --oranje: #ff8822;
  --oranje-d: #f07e1d;
  --ijs: #ebf7ff;         /* lichtblauw vlak */
  --room: #fff4eb;        /* lichtoranje vlak */
  --ijs-2: #d8ebf8;       /* dieper lichtblauw vlak */
  --grijs: #859197;
  --wit: #fff;
  --rand: #d5e6f2;
  --radius: 14px;
  --schaduw: 0 10px 30px rgba(8, 39, 85, .08);
  --breed: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Manrope, system-ui, sans-serif; font-size: 18px; line-height: 1.65; color: var(--primair); background: var(--ijs); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blauw); text-underline-offset: 3px; }
a:hover { color: var(--marine); }
h1, h2, h3 { color: var(--marine); font-weight: 600; line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 24px; }
.smal { max-width: 820px; }
.midden { text-align: center; margin-left: auto; margin-right: auto; }
.lead { font-size: 1.15rem; color: var(--primair); }
.klein { font-size: .9rem; color: var(--grijs); }
.bovenkop { text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; font-weight: 700; color: var(--blauw); margin-bottom: .8em; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--wit); padding: 8px 14px; }
:focus-visible { outline: 3px solid var(--cyaan); outline-offset: 2px; }

/* vier balkjes uit het logo */
.balkjes { display: flex; gap: 8px; margin-bottom: 18px; }
.balkjes i { display: block; width: 34px; height: 8px; }
.balkjes i:nth-child(1) { background: var(--primair); }
.balkjes i:nth-child(2) { background: #02679b; }
.balkjes i:nth-child(3) { background: var(--cyaan); }
.balkjes i:nth-child(4) { background: var(--oranje); }

/* knoppen — marine tekst op oranje: WCAG-contrast (overheidseis) */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 6px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s; }
.knop-oranje { background: var(--oranje); color: var(--marine); }
.knop-oranje:hover { background: var(--oranje-d); color: var(--marine); }
.knop-marine { background: var(--marine); color: var(--wit); }
.knop-marine:hover { background: var(--primair); color: var(--wit); }
.knop-wit { background: var(--wit); color: var(--marine); border-color: var(--wit); }
.knop-wit:hover { background: transparent; color: var(--wit); }
.knop:disabled { opacity: .6; cursor: default; }
.knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* kop */
.kop { position: sticky; top: 0; z-index: 50; background: var(--wit); box-shadow: 0 1px 0 var(--rand); }
.kop-in { display: flex; align-items: center; gap: 24px; height: 84px; }
.logo img { width: 170px; height: auto; }
.menu { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.menu a { color: var(--marine); text-decoration: none; font-weight: 600; font-size: .98rem; }
.menu a:hover, .menu a[aria-current] { color: var(--blauw); }
.menu a[aria-current] { box-shadow: inset 0 -3px 0 var(--oranje); }
.menu-contact { display: none !important; }
.kop-contact { padding: 11px 22px; }
.hamburger { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.hamburger span { display: block; height: 2px; background: var(--marine); margin: 6px 0; transition: transform .2s, opacity .2s; }

/* held (home) */
.held { display: grid; grid-template-columns: 1fr 1fr; background: var(--marine); color: var(--wit); min-height: min(78vh, 720px); }
.held-tekst { display: flex; align-items: center; padding: 72px 56px 72px max(24px, calc((100vw - var(--breed)) / 2 + 24px)); }
.held-tekst > div { max-width: 600px; }
.held-tekst h1 { color: var(--wit); }
.held-tekst .bovenkop { color: var(--cyaan); }
.held-tekst p { color: #dbe8f3; }
.held-sub { font-size: 1.3rem; font-weight: 600; color: var(--blauw); }
.held-tekst .held-sub { color: var(--cyaan); }
.held-beeld { position: relative; }
.held-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.held-beeld::after { content: ""; position: absolute; left: 0; bottom: 0; width: 55%; height: 12px; background: linear-gradient(90deg, var(--primair) 0 25%, #02679b 25% 50%, var(--cyaan) 50% 75%, var(--oranje) 75%); }

.usp { background: var(--room); }
.usp-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 26px; padding: 22px 24px; font-weight: 600; color: var(--marine); font-size: .98rem; }
.usp-in span { display: inline-flex; align-items: center; gap: 8px; }
.usp svg, .vinken svg { width: 20px; height: 20px; flex: none; color: var(--oranje); }

/* secties */
.sectie { padding: 96px 0; background: var(--ijs); }
.sectie.licht { background: var(--ijs-2); }
.sectie.donker { background: var(--marine); color: #dbe8f3; }
.sectie.donker h2, .sectie.donker h3 { color: var(--wit); }
.sectie.donker .bovenkop { color: var(--cyaan); }
.sectie.donker .lead { color: #dbe8f3; }
.sectie.donker .vinken svg { color: var(--cyaan); }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.twee.omgekeerd > :first-child { order: 0; }
.beeld-kader { position: relative; }
.beeld-kader img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.beeld-kader img.staand { aspect-ratio: 4 / 5; }
.beeld-kader::after { content: ""; position: absolute; left: -14px; bottom: -14px; width: 40%; height: 10px; background: linear-gradient(90deg, var(--primair) 0 25%, #02679b 25% 50%, var(--cyaan) 50% 75%, var(--oranje) 75%); }
.klein-beeld { margin-top: 32px; max-width: 460px; }

.vinken { list-style: none; padding: 0; margin: 0 0 1.2em; }
.vinken li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: .55em; }
.vinken svg { margin-top: 5px; }

.paginakop { padding: 80px 0; background: var(--marine); color: #dbe8f3; }
.paginakop h1, .paginakop h2 { color: var(--wit); }
.paginakop .bovenkop, .paginakop .held-sub { color: var(--cyaan); }
.paginakop .lead { color: #dbe8f3; }
.paginakop a:not(.knop) { color: var(--cyaan); }
.paginakop .contactgegevens span { color: #9fb6cc; }
.paginakop .contactgegevens a { color: var(--wit); }
.smalkop { padding: 80px 0 40px; }

.cijfers { background: var(--room); padding: 72px 0; }
.cijfers-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.cijfers strong { display: block; font-size: 3rem; font-weight: 800; color: var(--oranje-d); line-height: 1; }
.cijfers span { display: block; font-weight: 700; color: var(--marine); margin: 8px 0 10px; font-size: 1.1rem; }
.cijfers p { margin: 0; font-size: .98rem; }

.kaart-groot { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; background: var(--wit); border: 1px solid var(--rand); border-radius: 22px; padding: 48px; box-shadow: var(--schaduw); }

.kaarten { display: grid; gap: 24px; margin-top: 40px; }
.kaarten.vier { grid-template-columns: repeat(4, 1fr); }
.kaarten.drie { grid-template-columns: repeat(3, 1fr); }
.kaarten.twee-kol { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.kaart { display: flex; flex-direction: column; background: var(--wit); border: 1px solid var(--rand); border-top: 4px solid var(--blauw); border-radius: var(--radius); padding: 30px 26px; color: var(--primair); text-decoration: none; transition: transform .15s, box-shadow .15s; }
a.kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw); color: var(--primair); }
.kaart p { font-size: .98rem; flex: 1; }
.kaart .nummer { font-weight: 800; color: var(--oranje-d); font-size: 1.1rem; margin-bottom: 8px; }
.lees { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blauw); }
.lees svg { width: 18px; height: 18px; }

.klanten { padding: 64px 0; background: var(--wit); }
.klein-kop { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .1em; text-align: center; color: var(--grijs); font-weight: 700; margin-bottom: 32px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 48px; }
.logos img { height: 54px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.logos img:hover { filter: none; opacity: 1; }

.band { background: var(--marine); color: var(--wit); padding: 84px 0; text-align: center; }
.band-in { display: flex; flex-direction: column; align-items: center; }
.band h2 { color: var(--wit); max-width: 820px; }
.band p { color: #dbe8f3; font-size: 1.15rem; }

/* talent sourcing */
.garanties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.garanties div { background: var(--ijs); border-radius: var(--radius); padding: 18px; }
.garanties small { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; color: var(--blauw); }
.garanties strong { display: block; font-size: 2.2rem; font-weight: 800; color: var(--marine); line-height: 1.2; }
.garanties span { font-size: .9rem; line-height: 1.4; display: block; }
.proces { list-style: none; padding: 0; margin: 48px 0 40px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; counter-reset: stap; }
.proces li { counter-increment: stap; border-top: 3px solid var(--cyaan); padding-top: 16px; }
.proces li:nth-child(n+4) { border-color: var(--oranje); }
.proces li::before { content: counter(stap, decimal-leading-zero); font-weight: 800; color: var(--cyaan); font-size: .9rem; }
.proces h3 { font-size: 1.05rem; margin: 6px 0; }
.proces p { font-size: .9rem; margin: 0; }
.trajecten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trajecten div { border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); padding: 18px 20px; }
.trajecten strong { display: block; color: var(--wit); }
.trajecten span { font-size: .92rem; }
.pakketten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; align-items: stretch; }
.pakket { display: flex; flex-direction: column; border: 1px solid var(--rand); border-radius: 18px; padding: 34px 30px; background: var(--wit); box-shadow: var(--schaduw); scroll-margin-top: 110px; }
.pakket:nth-child(2) { border-top: 5px solid var(--oranje); }
.pakket-kort { font-weight: 700; color: var(--marine); }
.pakket-belofte { background: var(--room); color: var(--marine); font-weight: 700; border-radius: 8px; padding: 10px 14px; }
.pakket .vinken { flex: 1; font-size: .98rem; }
.pakket-slot { font-size: .92rem; color: var(--grijs); }
.pakket .knop { align-self: flex-start; }

/* abonnementen */
.abonnementen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; }
.abonnement { display: flex; flex-direction: column; border: 1px solid var(--rand); border-radius: 18px; padding: 32px 26px; background: var(--wit); }
.abonnement p:not(.uren) { flex: 1; font-size: .98rem; }
.abonnement .uren { font-size: 2rem; font-weight: 800; color: var(--blauw); margin: 0 0 14px; line-height: 1.1; }
.abonnement.uitgelicht { background: var(--marine); color: #dbe8f3; border-color: var(--marine); }
.abonnement.uitgelicht h3 { color: var(--wit); }
.abonnement.uitgelicht .uren { color: var(--cyaan); }
.abonnement.uitgelicht .vinken svg { color: var(--oranje); }
.kader-kaart { background: var(--wit); border-radius: 18px; padding: 40px; box-shadow: var(--schaduw); border-left: 6px solid var(--oranje); }

.stappen-lijst { padding-left: 1.3em; margin: 0 0 1.5em; }
.stappen-lijst li { margin-bottom: .7em; padding-left: .3em; }
.stappen-lijst li::marker { color: var(--oranje-d); font-weight: 800; }

/* whitepapers / blog / vacatures */
.label { display: inline-block; background: var(--ijs); color: var(--blauw); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 5px 10px; border-radius: 4px; margin-bottom: 14px; }
.whitepaper { background: var(--wit); border: 1px solid var(--rand); border-top: 5px solid var(--cyaan); border-radius: 18px; padding: 40px; box-shadow: var(--schaduw); }
.whitepaper h2 { font-size: 1.6rem; }
.blogkaart { display: block; border: 1px solid var(--rand); border-radius: 18px; overflow: hidden; color: var(--primair); text-decoration: none; background: var(--wit); }
.blogkaart img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.blogkaart > div { padding: 26px; }
.blogkaart h2 { font-size: 1.25rem; }
.blogkaart p { font-size: .95rem; }
.blogkaart:hover { box-shadow: var(--schaduw); color: var(--primair); }
.artikel { padding: 80px 0 40px; }
.artikel h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.artikel-beeld { margin: 30px auto 40px; }
.artikel-beeld img { border-radius: var(--radius); aspect-ratio: 16 / 8; object-fit: cover; width: 100%; }
.tekst h2 { font-size: 1.55rem; margin-top: 1.6em; }
.terug { margin-top: 2em; font-weight: 700; }
.vacaturekaart { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border: 1px solid var(--rand); border-left: 6px solid var(--oranje); border-radius: 14px; padding: 30px 34px; text-decoration: none; color: var(--primair); box-shadow: var(--schaduw); }
.vacaturekaart h2 { font-size: 1.6rem; margin: 0 0 6px; }
.vacaturekaart .label { margin: 0; }
.vacature { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
.vacature .tekst h2:first-child { margin-top: 0; }

/* agenda */
.agenda-kaart { background: var(--wit); border-radius: 18px; padding: 16px; box-shadow: var(--schaduw); }
.agenda-kaart .klein { text-align: center; margin: 8px 0 4px; }

/* formulieren */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contactgegevens { list-style: none; padding: 0; margin: 26px 0 0; }
.contactgegevens li { margin-bottom: 12px; }
.contactgegevens span { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--grijs); }
.contactgegevens a { font-size: 1.3rem; font-weight: 700; color: var(--marine); text-decoration: none; }
.formulier-kaart { background: var(--wit); border: 1px solid var(--rand); border-radius: 18px; padding: 36px; box-shadow: var(--schaduw); position: sticky; top: 110px; }
.formulier-kaart h2 { font-size: 1.6rem; }
.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 20px 0; }
.veld { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--marine); }
.veld.vol { grid-column: 1 / -1; }
.veld em { font-weight: 400; color: var(--grijs); font-style: normal; }
.veld input, .veld textarea { font: inherit; font-weight: 400; font-size: 1rem; color: var(--primair); padding: 12px 14px; border: 1px solid #b9cfe0; border-radius: 6px; background: var(--wit); width: 100%; }
.veld input[type=file] { padding: 9px; }
.veld input:focus, .veld textarea:focus { border-color: var(--blauw); outline: 2px solid var(--ijs); }
.formulier-melding { margin: 16px 0 0; background: var(--room); border-left: 4px solid var(--oranje); padding: 12px 14px; font-size: .95rem; color: var(--marine); }

/* voet */
.voet { background: var(--ijs-2); padding: 64px 0 0; font-size: .96rem; }
.voet-in { display: grid; grid-template-columns: 1.2fr 2fr 1.2fr; gap: 40px; }
.voet-in nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 20px; align-content: start; }
.voet a { color: var(--marine); text-decoration: none; }
.voet a:hover { color: var(--blauw); text-decoration: underline; }
.voet-slogan { font-weight: 700; color: var(--blauw); margin-top: 14px; }
.voet-contact { display: flex; flex-direction: column; gap: 6px; }
.voet-contact a { font-weight: 700; }
.voet-contact p { color: var(--grijs); margin-top: 10px; }
.voet-onder { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--rand); margin-top: 48px; padding-top: 20px; padding-bottom: 26px; color: var(--grijs); font-size: .88rem; }

/* responsief */
@media (max-width: 1100px) {
  .kaarten.vier, .abonnementen { grid-template-columns: repeat(2, 1fr); }
  .proces { grid-template-columns: repeat(4, 1fr); }
  .menu { gap: 18px; }
}
@media (max-width: 960px) {
  .hamburger { display: block; margin-left: auto; }
  .kop-contact { display: none; }
  .menu { position: fixed; inset: 84px 0 0 0; background: var(--wit); flex-direction: column; align-items: flex-start; padding: 28px 24px; gap: 4px; transform: translateX(100%); transition: transform .25s; overflow-y: auto; }
  .menu.open { transform: none; }
  .menu a { font-size: 1.2rem; padding: 10px 0; width: 100%; border-bottom: 1px solid var(--rand); }
  .menu a[aria-current] { box-shadow: none; color: var(--blauw); }
  .menu-contact { display: inline-flex !important; width: auto !important; margin-top: 18px; border: 0 !important; padding: 14px 26px !important; }
  body.menu-open { overflow: hidden; }
  .menu-open .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-open .hamburger span:nth-child(2) { opacity: 0; }
  .menu-open .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .twee, .kaart-groot, .contact, .vacature { grid-template-columns: 1fr; gap: 40px; }
  .held { grid-template-columns: 1fr; min-height: 0; }
  .held-beeld { order: -1; height: 48vh; min-height: 300px; }
  .held-tekst { padding: 48px 24px 56px; }
  .twee.omgekeerd > :first-child { order: 2; }
  .kaart-groot { padding: 28px; }
  .pakketten, .kaarten.drie, .cijfers-in, .trajecten, .kaarten.twee-kol { grid-template-columns: 1fr; }
  .formulier-kaart { position: static; }
  .voet-in { grid-template-columns: 1fr; }
  .sectie { padding: 72px 0; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap { padding: 0 16px; }
  .kop-in { height: 72px; }
  .menu { inset: 72px 0 0 0; }
  .logo img { width: 140px; }
  .kaarten.vier, .abonnementen, .garanties, .velden { grid-template-columns: 1fr; }
  .proces { grid-template-columns: 1fr 1fr; }
  .usp-in { justify-content: flex-start; padding: 18px 16px; }
  .voet-in nav { grid-template-columns: repeat(2, 1fr); }
  .formulier-kaart, .whitepaper, .kader-kaart { padding: 26px 20px; }
  .beeld-kader::after { left: -8px; bottom: -10px; }
}