/* De Recruitment Assistent — huisstijl van derecruitmentassistent.nl (Elementor-kit 1730), statisch nagebouwd.
   Koppen Loubag (eigen webfont), tekst sofia-pro, knoppen greycliff-cf (Adobe Fonts-kit drw2qwe).
   Kleuren: crème #FFF2DE / #FAF8F4, roze #FFF3FE, lichtgroen #F2FFE8, grijs #ECF0F1, groen #2E6417, oker #E49C2F, magenta #D64AC9. */
@font-face { font-family: 'Loubag'; font-weight: 400; font-display: swap; src: url(/fonts/loubag-regular.woff2) format('woff2'), url(/fonts/loubag-regular.woff) format('woff'); }
@font-face { font-family: 'Loubag'; font-weight: 600; font-display: swap; src: url(/fonts/loubag-medium.woff2) format('woff2'), url(/fonts/loubag-medium.woff) format('woff'); }
@font-face { font-family: 'Loubag'; font-weight: 800; font-display: swap; src: url(/fonts/loubag-bold.woff2) format('woff2'), url(/fonts/loubag-bold.woff) format('woff'); }

:root {
  --creme: #FFF2DE; --zand: #FAF8F4; --roze: #FFF3FE; --lichtgroen: #F2FFE8; --grijs: #ECF0F1;
  --groen: #2E6417; --oker: #E49C2F; --oker-donker: #D38E25; --magenta: #D64AC9; --blauw: #006AA3; --tekst: #000; --zacht: #605E5E;
  --kop: 'Loubag', 'sofia-pro', sans-serif; --romp: 'sofia-pro', system-ui, sans-serif; --knopfont: 'greycliff-cf', 'sofia-pro', sans-serif;
  --breed: 1200px; --r: 24px;
  --cookie-bg: #000; --cookie-tekst: #fff; --cookie-knop: var(--oker);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--romp); font-size: 19px; line-height: 1.4; letter-spacing: -.2px; color: var(--tekst); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--kop); font-weight: 800; letter-spacing: -.2px; margin: 0 0 .5em; }
h1 { font-size: clamp(38px, 5vw, 55px); line-height: 1.15; }
h2 { font-size: clamp(32px, 4vw, 45px); line-height: 1.2; }
h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1.25; }
h4 { font-size: 28px; line-height: 1.3; color: var(--oker); }
h5 { font-family: var(--romp); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; margin: 0 0 .6em; }
h6 { font-family: var(--romp); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .08em; color: var(--oker); margin: 0 0 .6em; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 24px; }
.smal { max-width: 860px; }
.midden { text-align: center; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }

/* knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--knopfont); font-weight: 600; font-size: 19px; line-height: 1; padding: 15px 26px; border-radius: 999px; text-decoration: none; border: 2px solid transparent; transition: transform .15s, background .15s; cursor: pointer; }
.knop:hover { transform: translateY(-1px); }
.knop-zwart { background: #000; color: #fff; }
.knop-oker { background: var(--oker); color: #fff; }
.knop-oker:hover { background: var(--oker-donker); }
.knop-wit { background: #fff; color: #000; border-color: #000; }
.knop-groen { background: var(--groen); color: #fff; }
.knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.lees { display: inline-flex; align-items: center; gap: 6px; font-family: var(--knopfont); font-weight: 600; color: var(--oker); text-decoration: none; font-size: 17px; }
.lees svg { width: 18px; height: 18px; }

/* kop */
.kop { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 rgba(0,0,0,.05); }
.kop-in { display: flex; align-items: center; gap: 28px; min-height: 92px; }
.logo img { width: 200px; height: auto; }
.menu { display: flex; gap: 30px; margin-left: auto; }
.menu a { text-decoration: none; font-size: 18px; padding: 10px 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-color: var(--oker); }
.menu .menu-contact { display: none; }
.hamburger { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.hamburger span { display: block; height: 2px; background: #000; margin: 6px 0; }

/* secties */
.sectie { padding: 100px 0; }
.creme { background: var(--creme); }
.zand { background: var(--zand); }
.roze { background: var(--roze); }
.lichtgroen { background: var(--lichtgroen); }
.grijs { background: var(--grijs); }
.groen { background: var(--groen); color: #fff; }
.zwart { background: #000; color: #fff; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.twee.boven { align-items: start; }
.twee.omgekeerd > :first-child { order: 2; }
.held { padding: 80px 0 0; background: var(--creme); overflow: hidden; }
.held .twee { align-items: end; grid-template-columns: 1.25fr 1fr; gap: 40px; }
.held-beeld { position: relative; }
.held-beeld::before { content: ''; position: absolute; z-index: 0; right: -12%; bottom: 0; width: 115%; height: 92%; background: rgba(228, 156, 47, .22); border-radius: 0 0 0 0; clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); }
.held-beeld img { position: relative; z-index: 1; }
.held-tekst { padding-bottom: 90px; }
.ondertitel { font-family: var(--kop); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--oker); }
.held-beeld img { width: 100%; max-width: 560px; margin-left: auto; }
.lead { font-size: 22px; line-height: 1.45; }

/* lijsten met pijltjes */
.pijlen { list-style: none; padding: 0; margin: 0 0 1.2em; }
.pijlen li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; }
.pijlen li svg { flex: none; width: 20px; height: 20px; margin-top: 4px; color: var(--groen); }
.pijlen.magenta svg { color: var(--magenta); }
.pijlen.oker svg { color: var(--oker); }
.pijlen.wit svg { color: #fff; }

/* usp-balk */
.usp { background: #fff; padding: 28px 0; }
.usp-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 30px; }
.usp-in span { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.usp-in svg { width: 20px; height: 20px; color: var(--groen); }

/* collage van twee beelden + vormpje */
.collage { position: relative; max-width: 440px; min-height: 400px; margin: 0 auto; }
.collage .c1 { width: 62%; border-radius: 26px; overflow: hidden; position: relative; z-index: 1; }
.collage .c2 { position: absolute; right: 0; top: 30%; width: 50%; border-radius: 26px; overflow: hidden; z-index: 2; }
.collage .c1 img, .collage .c2 img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.collage .vorm { position: absolute; left: 6%; bottom: 0; width: 38%; z-index: 0; }
.beeld-rond img { border-radius: 32px; width: 100%; }
.beeld-boog { background: #9EB595; border-radius: 32px; overflow: hidden; padding-top: 24px; max-width: 480px; margin-left: auto; }
.beeld-boog img { width: 82%; margin: 0 auto; }
.twee.breed { grid-template-columns: 1.5fr 1fr; }

/* citaat */
.citaat { padding: 60px 0; }
.citaat .wrap { display: flex; gap: 28px; align-items: flex-start; max-width: 980px; }
.citaat svg { flex: none; width: 56px; height: 56px; color: #000; }
.citaat h5 { margin: 0; }

/* kaarten */
.kaarten { display: grid; gap: 24px; }
.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); }
.kaart { background: #fff; border-radius: var(--r); padding: 30px 28px; display: flex; flex-direction: column; gap: 6px; }
.kaart .icoon { width: 56px; height: 56px; margin-bottom: 10px; }
.kaart h4 { margin-bottom: .2em; color: #000; font-size: 26px; }
.kaart p { font-size: 17px; flex: 1; }
.groot-kaart { background: #fff; border-radius: 32px; padding: 48px; }
.groot-kaart .twee { gap: 48px; }

/* talent sourcing */
.garanties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; }
.garanties div { background: #fff; border-radius: var(--r); padding: 24px; text-align: center; }
.garanties small { display: block; font-size: 15px; color: var(--zacht); }
.garanties strong { display: block; font-family: var(--kop); font-size: 48px; line-height: 1.1; color: var(--groen); }
.garanties span { font-size: 16px; }
.proces { list-style: none; padding: 0; margin: 40px 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; counter-reset: stap; }
.proces li { background: rgba(255,255,255,.12); border-radius: 18px; padding: 18px 14px; counter-increment: stap; }
.proces li::before { content: counter(stap); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--oker); color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.proces h3 { font-family: var(--romp); font-size: 18px; margin: 0 0 4px; }
.proces p { font-size: 15px; margin: 0; }
.trajecten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trajecten div { border: 1px solid rgba(255,255,255,.35); border-radius: 18px; padding: 16px 18px; }
.trajecten strong { display: block; font-family: var(--kop); font-size: 22px; }
.trajecten span { font-size: 16px; }
.pakketten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pakket { background: #fff; border-radius: var(--r); padding: 32px 28px; display: flex; flex-direction: column; box-shadow: 0 6px 30px rgba(0,0,0,.06); }
.pakket hr { border: 0; border-top: 1px solid #e3e3e3; margin: 14px 0; width: 100%; }
.pakket .slot { font-style: italic; font-weight: 700; flex: 1; }
.pakket .knop { align-self: flex-start; }
.abonnementen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.abonnement { background: #fff; border-radius: var(--r); padding: 30px 26px; display: flex; flex-direction: column; box-shadow: 0 6px 30px rgba(0,0,0,.06); }
.abonnement .uren { font-family: var(--kop); font-weight: 800; font-size: 26px; color: #000; margin: 0 0 .4em; }
.abonnement p { font-size: 17px; flex: 1; }
.abonnement .knop { align-self: flex-start; }
.cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case { background: #fff; border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.case img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.case > div { padding: 24px 26px; }
.case dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 14px 0; align-items: baseline; }
.case dt { font-family: var(--kop); font-weight: 800; font-size: 26px; color: var(--groen); text-align: right; }
.case dd { margin: 0; font-size: 16px; }

/* accordeon (extra diensten) */
details.uitklap { background: #fff; border-radius: 16px; margin: 10px 0; padding: 0 22px; }
details.uitklap summary { cursor: pointer; padding: 16px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
details.uitklap summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--oker); }
details.uitklap[open] summary::after { content: '–'; }
details.uitklap > div { padding: 0 0 18px; font-size: 17px; }
.dienst { padding: 70px 0; border-bottom: 1px solid #e8e8e8; }
.dienst:last-child { border-bottom: 0; }

/* band (afsluitende oproep) */
.band { background: var(--groen); color: #fff; padding: 100px 0; text-align: center; }
.band h2 { color: #fff; }
.band p { font-size: 22px; margin-bottom: 28px; }

/* whitepapers, blog, vacatures */
.whitepaper { background: #fff; border-radius: 32px; padding: 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
.whitepaper img { border-radius: 18px; }
.blogkaart { background: #fff; border-radius: var(--r); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; box-shadow: 0 6px 30px rgba(0,0,0,.06); }
.blogkaart img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.blogkaart > div { padding: 22px 24px; }
.blogkaart h2 { font-size: 24px; }
.label { display: inline-block; font-size: 14px; font-weight: 600; background: var(--lichtgroen); color: var(--groen); border-radius: 999px; padding: 4px 12px; margin: 0 6px 8px 0; }
.vacaturekaart { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; border-radius: var(--r); padding: 26px 30px; text-decoration: none; margin-bottom: 16px; box-shadow: 0 6px 30px rgba(0,0,0,.06); }
.vacaturekaart h2 { font-size: 28px; margin: 0 0 6px; }
.vacaturekaart p { font-size: 17px; margin: 6px 0 0; }
.vacature { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.tekst h2 { font-size: 30px; margin-top: 1.2em; }
.tekst h3 { font-size: 24px; margin-top: 1.1em; }
.tekst ul, .tekst ol { padding-left: 1.2em; }
.tekst li { margin-bottom: 6px; }
.formulier-kaart { background: #fff; border-radius: 32px; padding: 34px; box-shadow: 0 6px 30px rgba(0,0,0,.06); }
.formulier-kaart h2, .formulier-kaart h3 { font-size: 30px; }
.artikel header { padding: 80px 0 30px; }
.artikel-beeld img { border-radius: 32px; width: 100%; margin-bottom: 30px; }
.terug { margin-top: 40px; }
.contactgegevens { list-style: none; padding: 0; margin: 20px 0; }
.contactgegevens li { margin: 8px 0; display: flex; gap: 10px; align-items: center; }
.contactgegevens svg { width: 20px; height: 20px; color: var(--oker); }
.klein { font-size: 15px; color: var(--zacht); }
.paginakop { padding: 90px 0 70px; background: var(--creme); }
.paginakop.kort { padding: 80px 0 50px; }

/* voet */
.voet { background: #000; color: #fff; padding: 80px 0 30px; }
.voet-in { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 40px; }
.voet img { width: 190px; }
.voet nav { display: flex; flex-direction: column; gap: 6px; }
.voet a { text-decoration: none; }
.voet a:hover { color: var(--oker); }
.voet-contact { display: flex; flex-direction: column; gap: 8px; }
.voet-contact a { display: inline-flex; gap: 10px; align-items: center; }
.voet-contact svg { width: 18px; height: 18px; }
.voet-onder { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; color: #bbb; margin-top: 60px; }
.lp-kop { background: var(--creme); padding: 22px 0; }
.lp-kop img { width: 190px; }
.lp-voet { background: #000; color: #bbb; padding: 26px 0; font-size: 14px; }
.lp-voet .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.lp-voet a { color: #bbb; }
.lp-voet img { width: 150px; }

/* cookiemelding (scripts/cms.mjs) */
.cookie-melding { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 600px; margin: 0 auto; background: var(--cookie-bg); color: var(--cookie-tekst); border-radius: 20px; padding: 18px 20px; font-size: 15px; line-height: 1.45; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.cookie-melding p { margin: 0 0 12px; }
.cookie-melding a { color: inherit; }
.cookie-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-knoppen button { font-family: var(--knopfont); font-weight: 600; font-size: 15px; border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; background: #fff; color: #000; }
.cookie-knoppen button[data-cookie="ja"] { background: var(--cookie-knop); color: #fff; }

@media (max-width: 1024px) {
  .kaarten.vier, .abonnementen { grid-template-columns: repeat(2, 1fr); }
  .proces { grid-template-columns: repeat(4, 1fr); }
  .menu { position: fixed; inset: 92px 0 auto 0; background: #fff; flex-direction: column; gap: 0; padding: 10px 24px 24px; display: none; box-shadow: 0 10px 20px rgba(0,0,0,.08); }
  .menu.open { display: flex; }
  .menu .menu-contact { display: inline-flex; margin-top: 12px; align-self: flex-start; }
  .kop-contact { display: none; }
  .hamburger { display: block; margin-left: auto; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .sectie { padding: 64px 0; }
  .twee, .vacature, .whitepaper, .voet-in, .garanties, .trajecten, .pakketten, .cijfers, .kaarten.drie, .kaarten.twee-kol { grid-template-columns: 1fr; gap: 32px; }
  .twee.omgekeerd > :first-child { order: 0; }
  .kaarten.vier, .abonnementen, .proces { grid-template-columns: 1fr; }
  .collage { min-height: 380px; }
  .held-tekst { padding-bottom: 20px; }
  .groot-kaart { padding: 28px; }
  .logo img { width: 160px; }
}