/* ═══════════════════════════════════════════════════════════════════
   IRS Salarisburo · concept 2026-10

   Huisstijl uit de huidige site en het logo: blauw #0f5096, de schijf
   uit het logo #2453a0, oranje accent #f76a0c, groen voor wat klaar is.
   Outfit voor koppen, Mulish voor tekst.

   Twee dingen dragen het eigen gezicht, los van DevAlp:
   1. De cirkel uit het logo. Hij draagt de woordwolk in de hero, en komt terug in de
      rollen, de dagen van de maand en de oproep.
   2. De schuine hoek van de huidige site, op de bovenbalk en de band.
   De hero is licht, niet in een verloop.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Outfit"; src: url(../fonts/outfit-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Mulish"; src: url(../fonts/mulish-latin.woff2) format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --blauw: #0f5096;
  --blauw-licht: #1367c1;
  --blauw-diep: #0b3d75;
  --schijf: #2453a0;
  --nacht: #0a2647;
  --oranje: #f76a0c;
  --oranje-donker: #c94f00;
  --groen: #1f9a35;
  --inkt: #14213a;
  --tekst: #4a5568;
  --zacht: #6b7689;
  --grond: #f3f6fb;
  --lijn: #e2e8f1;
  --wit: #fff;
  --breed: 1240px;
  --rond: 14px;
  --kop: "Outfit", system-ui, sans-serif;
  --letter: "Mulish", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wit); color: var(--tekst); font: 500 17px/1.65 var(--letter); }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--blauw); }
h1, h2, h3 { font-family: var(--kop); color: var(--inkt); margin: 0; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -.02em; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.binnen { width: min(var(--breed), 100% - 32px); margin-inline: auto; }
.overslaan { position: absolute; left: -999px; top: 8px; background: var(--blauw); color: #fff; padding: 8px 14px; z-index: 99; border-radius: 6px; }
.overslaan:focus { left: 16px; }

/* Lijniconen overal dezelfde dikte */
svg[viewBox="0 0 24 24"], svg[viewBox="0 0 20 20"] { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.etiket { font: 600 .82rem/1 var(--kop); letter-spacing: .08em; text-transform: uppercase; color: var(--blauw-licht); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.etiket::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--oranje); flex: none; }
.lead { font-size: 1.12rem; color: var(--tekst); max-width: 56ch; }

/* ── Knoppen ─────────────────────────────────────────────────────── */
.knop { display: inline-flex; align-items: center; gap: 10px; font: 600 1rem/1 var(--letter); padding: 15px 22px; border-radius: 8px; text-decoration: none; border: 2px solid transparent; transition: background .2s, border-color .2s, color .2s, transform .2s; white-space: nowrap; }
.knop svg { width: 18px; height: 18px; }
.knop .pijl { transition: transform .2s; }
.knop:hover .pijl { transform: translateX(3px); }
.knop--vol { background: var(--blauw); color: #fff; }
.knop--vol:hover { background: var(--blauw-diep); }
.knop--rand { border-color: var(--lijn); color: var(--inkt); background: #fff; }
.knop--rand:hover { border-color: var(--blauw); color: var(--blauw); }
.knop--wit { background: #fff; color: var(--blauw); }
.knop--wit:hover { background: #eaf1fb; }
.knop--klein { padding: 11px 16px; font-size: .95rem; }
.tekstlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--blauw); }
.tekstlink svg { width: 18px; height: 18px; transition: transform .2s; }
.tekstlink:hover svg { transform: translateX(3px); }
.tekstlink--wit { color: #fff; }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* ── Bovenbalk met de schuine scheiding van de huidige site ──────── */
.topbalk { font-size: .88rem; background: var(--grond); overflow: hidden; }
.topbalk__rij { display: flex; justify-content: space-between; align-items: center; min-height: 40px; position: relative; }
.topbalk a { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.topbalk svg { width: 15px; height: 15px; }
.topbalk__links { display: flex; gap: 22px; background: var(--blauw); align-self: stretch; align-items: center; padding-right: 48px; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); }
.topbalk__links a { color: #fff; }
.topbalk__rechts { display: flex; gap: 22px; }
.topbalk__rechts a { color: var(--tekst); }
.topbalk__rechts a:hover { color: var(--blauw); }
/* het blauw loopt door tot de linkerrand van het scherm */
.topbalk__rij::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 100vw; background: var(--blauw); }

/* ── Kop ─────────────────────────────────────────────────────────── */
/* De bovenbalk en de kop blijven samen staan. */
.koppen { position: sticky; top: 0; z-index: 50; }
.kop { background: rgba(255,255,255,.95); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.koppen.is-vast .kop { border-color: var(--lijn); box-shadow: 0 6px 24px -18px rgba(10,38,71,.5); }
.kop__rij { display: flex; align-items: center; gap: 36px; min-height: 80px; }
.kop__logo img { width: 188px; height: auto; }
.menu { display: flex; gap: 4px; margin-right: auto; align-items: center; }
.menu__link, .menu__knop { font: 600 1rem/1 var(--letter); color: var(--inkt); text-decoration: none; padding: 10px 13px; border-radius: 999px; position: relative; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.menu__knop svg { width: 16px; height: 16px; transition: transform .2s; }
.menu__link:hover, .menu__knop:hover, .menu__groep:hover .menu__knop { color: var(--blauw); }
.menu__link[aria-current="page"], .menu__groep.is-actief .menu__knop { color: var(--blauw); }
.menu__link[aria-current="page"]::after, .menu__groep.is-actief .menu__knop::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--oranje); }
.menu__groep.is-actief .menu__knop::after { margin-left: -11px; }
.menu__groep { position: relative; }
.menu__paneel { position: absolute; top: calc(100% + 8px); left: -12px; width: 320px; background: #fff; border: 1px solid var(--lijn); border-radius: 14px; padding: 8px; box-shadow: 0 30px 60px -28px rgba(10,38,71,.45); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.menu__paneel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.menu__groep:hover .menu__paneel, .menu__groep:focus-within .menu__paneel, .menu__groep.is-open .menu__paneel { opacity: 1; visibility: visible; transform: none; }
.menu__groep:hover .menu__knop svg, .menu__groep.is-open .menu__knop svg { transform: rotate(180deg); }
.menu__paneel a { display: block; padding: 12px 14px; border-radius: 9px; text-decoration: none; }
.menu__paneel a:hover, .menu__paneel a[aria-current] { background: var(--grond); }
.menu__paneel b { display: block; font: 600 1rem/1.3 var(--kop); color: var(--inkt); }
.menu__paneel span { font-size: .88rem; color: var(--zacht); }
.menu__paneel .menu__alle { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; border-top: 1px solid var(--lijn); border-radius: 0 0 9px 9px; color: var(--blauw); font-weight: 700; font-size: .92rem; }
.menu__alle svg { width: 16px; height: 16px; }
.menu__bel { display: inline-flex; gap: 8px; align-items: center; justify-content: center; font-weight: 700; text-decoration: none; padding: 8px; }
.menu__bel svg { width: 18px; height: 18px; }
.menu__mobiel { display: none; }
.kop__acties { display: flex; gap: 10px; align-items: center; }
.kop__acties svg { width: 18px; height: 18px; }

.inlog { position: relative; }
.inlog .knop { cursor: pointer; font-family: var(--letter); }
.inlog__paneel { position: absolute; right: 0; top: calc(100% + 10px); width: 280px; background: #fff; border: 1px solid var(--lijn); border-radius: 12px; padding: 8px; box-shadow: 0 24px 50px -24px rgba(10,38,71,.45); }
.inlog__paneel a { display: block; padding: 12px 14px; border-radius: 8px; text-decoration: none; }
.inlog__paneel a:hover { background: var(--grond); }
.inlog__paneel b { display: block; color: var(--inkt); font-family: var(--kop); font-weight: 600; }
.inlog__paneel span { font-size: .88rem; color: var(--zacht); }

.hamburger { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; background: var(--grond); border-radius: 10px; cursor: pointer; padding: 0 12px; flex-direction: column; justify-content: center; gap: 5px; }
.hamburger span { height: 2px; background: var(--inkt); border-radius: 2px; transition: transform .2s, opacity .2s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero: licht, met de woordwolk op de schijf uit het logo ─────── */
.hero { background: var(--grond); overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(15,80,150,.09) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent 40%, #000 80%); -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 80%); pointer-events: none; }
.hero__rij { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 112px); position: relative; }
.hero h1 span { display: block; color: var(--blauw); }
.hero .lead { margin-top: 24px; font-size: 1.2rem; }
.feiten { display: flex; gap: 0; margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--lijn); }
.feiten div { flex: 1; padding-right: 20px; }
.feiten div + div { padding-left: 24px; border-left: 1px solid var(--lijn); }
.feiten dt { font: 600 1.5rem/1.1 var(--kop); color: var(--inkt); }
.feiten dd { margin: 4px 0 0; font-size: .92rem; color: var(--zacht); }

/* Woordwolk op de schijf uit het logo, naar de video van de huidige site */
.wolk { margin: 0; justify-self: end; width: min(560px, 100%); aspect-ratio: 1; position: relative; }
.wolk::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 46%, #2a6cc2 0%, #164f9c 38%, #0b3d75 68%, #082f5c 100%); box-shadow: 0 50px 90px -40px rgba(6,25,52,.7), inset 0 0 0 1px rgba(255,255,255,.06); }
.wolk::after { content: ""; position: absolute; inset: -34px; border-radius: 50%; border: 1px solid rgba(15,80,150,.16); }
.wolk__svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.wolk__woorden { filter: drop-shadow(0 0 7px rgba(111,200,255,.45)); }
.w { font-family: var(--kop); letter-spacing: .01em; transform-box: fill-box; transform-origin: center; animation: wolk-in 1s cubic-bezier(.16,.8,.24,1) both, wolk-gloed 7s ease-in-out infinite; }
.w--wit { fill: #fff; }
.w--cyaan { fill: #7fd6ff; }
.w--licht { fill: rgba(255,255,255,.62); }
.w--dim { fill: rgba(190,225,255,.4); }
.w--rand { fill: rgba(190,225,255,.24); }
.wolk__woorden > g:first-child .w { animation: wolk-in 1s cubic-bezier(.16,.8,.24,1) both; }
@keyframes wolk-in {
  0% { opacity: 0; transform: scale(5); filter: blur(5px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes wolk-gloed { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ── Secties ─────────────────────────────────────────────────────── */
.sectie { padding: clamp(72px, 9vw, 120px) 0; }
.sectie--licht { background: var(--grond); }
.sectiekop { max-width: 640px; margin-bottom: 48px; }
.sectiekop .lead { margin-top: 16px; }
.sectiekop--wit h2 { color: #fff; }
.sectiekop--wit .etiket { color: #b9d3f3; }

/* Wie doet wat: drie kolommen, IRS met de oranje streep */
.rollen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.rollen::before { content: ""; position: absolute; top: 32px; left: 32px; right: 32px; height: 2px; background: repeating-linear-gradient(90deg, var(--lijn) 0 8px, transparent 8px 14px); }
.rol { position: relative; padding: 0 8px 0 0; }
.rol__bol { width: 64px; height: 64px; border-radius: 50%; background: var(--blauw); color: #fff; display: grid; place-items: center; margin-bottom: 22px; position: relative; box-shadow: 0 0 0 8px #fff; }
.rol__bol svg { width: 28px; height: 28px; }
.rol__bol--licht { background: #e3edf9; color: var(--blauw); }
.rol__bol--irs { background: var(--schijf); font: 800 1.15rem/1 var(--kop); letter-spacing: -.02em; }
.rol h3 { font-size: 1.35rem; margin-bottom: 14px; }
.rol li { padding: 11px 0 11px 26px; border-top: 1px solid var(--lijn); position: relative; color: var(--inkt); }
.rol li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--blauw-licht); }
.rol--irs li::before { background: var(--oranje); border-color: var(--oranje); }
.rol--irs { padding: 0; }
.rol--irs::after { content: "Mensenwerk"; position: absolute; top: 18px; left: 82px; font: 700 .72rem/1 var(--kop); letter-spacing: .08em; text-transform: uppercase; color: var(--oranje-donker); background: #fff1e6; padding: 6px 9px; border-radius: 999px; }

/* De blauwe band met de schuine hoek, zoals op de huidige site */
.band { background: linear-gradient(100deg, var(--blauw) 64%, #105aa7 64%); color: #d9e6f7; padding: clamp(96px, 11vw, 140px) 0 clamp(80px, 9vw, 120px); clip-path: polygon(0 48px, 34% 48px, calc(34% + 48px) 0, 100% 0, 100% 100%, 0 100%); position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; width: 560px; aspect-ratio: 1; border-radius: 50%; right: -180px; bottom: -260px; border: 70px solid rgba(255,255,255,.05); }
.diensten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; position: relative; z-index: 1; }
.dienst { background: rgba(6,32,68,.32); border: 1px solid rgba(255,255,255,.12); border-radius: var(--rond); padding: 36px 36px 32px; display: flex; flex-direction: column; }
.dienst__nr { font: 600 .9rem/1 var(--kop); color: var(--oranje); letter-spacing: .06em; }
.dienst h3 { color: #fff; font-size: 1.9rem; margin: 14px 0 8px; }
.dienst > p { color: #cfdff3; margin-bottom: 22px; }
.dienst ul { margin-bottom: 28px; }
.dienst li { padding: 10px 0 10px 30px; border-top: 1px solid rgba(255,255,255,.12); color: #fff; position: relative; }
.dienst li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 6px; height: 11px; border: solid #8fc0ff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dienst .tekstlink { margin-top: auto; }

/* Twaalf tegels */
.tegels { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--lijn); border-left: 1px solid var(--lijn); }
.tegels li { border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 28px 24px 26px; transition: background .2s; }
.tegels li:hover { background: var(--grond); }
.tegels svg { width: 30px; height: 30px; color: var(--blauw); margin-bottom: 18px; stroke-width: 1.6; }
.tegels b { display: block; font: 600 1.05rem/1.3 var(--kop); color: var(--inkt); }
.tegels span { font-size: .92rem; color: var(--zacht); }

/* Een maand: een lijn van 30 dagen met vier momenten */
.maand { margin: 8px 0 40px; }
.maand__lijn { position: relative; height: 56px; }
.maand__lijn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: repeating-linear-gradient(90deg, #cfdaea 0 calc(100% / 30 - 3px), transparent calc(100% / 30 - 3px) calc(100% / 30)); }
.maand__lijn span { position: absolute; top: 0; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; background: var(--blauw); color: #fff; font: 700 1.2rem/56px var(--kop); text-align: center; box-shadow: 0 0 0 6px var(--grond); }
.maand__lijn span:nth-child(1) { left: calc(100% * 2.5 / 30); }
.maand__lijn span:nth-child(2) { left: calc(100% * 11.5 / 30); }
.maand__lijn span:nth-child(3) { left: calc(100% * 19.5 / 30); }
.maand__lijn span:nth-child(4) { left: calc(100% * 24.5 / 30); }
.maand__lijn .maand__betaal { background: var(--oranje); }
.momenten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.momenten li { background: #fff; border-radius: var(--rond); padding: 26px 24px; border-top: 3px solid var(--blauw); }
.momenten .moment--betaal { border-top-color: var(--oranje); }
.moment__dag { font: 600 .82rem/1 var(--kop); letter-spacing: .08em; text-transform: uppercase; color: var(--blauw-licht); }
.moment--betaal .moment__dag { color: var(--oranje-donker); }
.momenten h3 { margin: 10px 0 8px; }
.momenten p { font-size: .96rem; }

/* Expertise */
.expertise { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.expertise .sectiekop { margin-bottom: 0; position: sticky; top: 160px; }
.expertise .tekstlink { margin-top: 24px; }
.sectoren { display: grid; gap: 16px; }
.sector { display: flex; gap: 24px; align-items: center; padding: 28px; border: 1px solid var(--lijn); border-radius: var(--rond); transition: border-color .2s, transform .2s; }
.sector:hover { border-color: var(--blauw-licht); transform: translateX(4px); }
.sector__bol { flex: none; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--blauw); color: var(--blauw); display: grid; place-items: center; font: 700 1.05rem/1 var(--kop); }
.sector h3 { font-size: 1.3rem; margin-bottom: 4px; }

/* Vragen en oproep */
.slot { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.vragen h2 { margin-bottom: 28px; }
.vragen details { border-bottom: 1px solid #d6dfeb; }
.vragen summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font: 600 1.1rem/1.4 var(--kop); color: var(--inkt); position: relative; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%230f5096' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; transition: transform .2s; }
.vragen details[open] summary::after { transform: rotate(45deg); }
.vragen details p { padding: 0 44px 22px 0; }
.oproep { background: var(--blauw); color: #d9e6f7; border-radius: 20px; padding: 44px 40px 38px; position: relative; overflow: hidden; isolation: isolate; }
.oproep__schijf { position: absolute; z-index: -1; width: 360px; aspect-ratio: 1; border-radius: 50%; background: var(--schijf); right: -150px; top: -150px; box-shadow: 0 0 0 40px rgba(255,255,255,.04); }
.oproep h2 { color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: 14px; max-width: 14ch; }
.oproep .knop { margin-top: 28px; }
.oproep__bel { margin-top: 22px; font-size: .95rem; }
.oproep__bel a { color: #fff; font-weight: 700; text-decoration: none; }

/* ── Voet ────────────────────────────────────────────────────────── */
.voet { background: var(--blauw-diep); color: rgba(255,255,255,.75); padding: 72px 0 0; font-size: .95rem; }
.voet__rij { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 56px; }
.voet__merk img { width: 172px; height: auto; margin-bottom: 18px; }
.voet__merk p { max-width: 30ch; }
.voet h3 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.voet a { display: block; color: rgba(255,255,255,.88); text-decoration: none; padding: 3px 0; }
.voet a:hover { color: #fff; }
.voet p + a { margin-top: 10px; }
.voet__slot { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; border-top: 1px solid rgba(255,255,255,.15); padding: 22px 0 28px; font-size: .85rem; color: rgba(255,255,255,.65); }
.voet__slot a { display: inline; padding: 0; color: rgba(255,255,255,.65); }
.voet__slot .voet__credit { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.voet__slot .voet__credit:hover { color: #fff; }
.im-ster { width: 13px; height: 13px; flex: none; display: inline-block; animation: im-draai 9s linear infinite; background-color: #8fc0ff; -webkit-mask: url(../img/infinitemerlin.svg) center / contain no-repeat; mask: url(../img/infinitemerlin.svg) center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(143,192,255,.55)); }
.im-naam { font-weight: 700; color: #8fc0ff; }
@keyframes im-draai { to { transform: rotate(360deg); } }

/* ── Smaller ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .kop__acties .knop--rand { display: none; }
  .tegels { grid-template-columns: repeat(3, 1fr); }
  .momenten { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .menu, .kop__acties { display: none; }
  .hamburger { display: flex; }
  .kop__rij { min-height: 72px; }
  .kop__logo img { width: 160px; }
  .menu.is-open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 112px); overflow-y: auto; background: #fff; padding: 12px 16px 28px; border-top: 1px solid var(--lijn); gap: 2px; }
  .menu.is-open .menu__link, .menu.is-open .menu__knop { width: 100%; justify-content: space-between; padding: 16px 14px; font-size: 1.12rem; border-radius: 10px; }
  .menu.is-open .menu__link[aria-current="page"], .menu.is-open .is-actief .menu__knop { background: var(--grond); }
  .menu.is-open .menu__link::after, .menu.is-open .menu__knop::after { display: none; }
  .menu.is-open .menu__paneel { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 6px 10px; display: none; }
  .menu.is-open .menu__groep.is-open .menu__paneel { display: block; }
  .menu.is-open .menu__groep:hover .menu__knop svg { transform: none; }
  .menu.is-open .menu__groep.is-open .menu__knop svg { transform: rotate(180deg); }
  .menu.is-open .menu__mobiel { display: grid; gap: 10px; margin-top: 18px; }
  .menu__mobiel .knop { justify-content: center; }
  .hero__rij { grid-template-columns: 1fr; gap: 64px; }
  .wolk { justify-self: center; }
  .rollen { grid-template-columns: 1fr; gap: 40px; }
  .rollen::before { display: none; }
  .diensten, .expertise, .slot { grid-template-columns: 1fr; }
  .expertise { gap: 40px; }
  .expertise .sectiekop { position: static; }
  .voet__rij { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topbalk__rechts { display: none; }
  .topbalk { background: var(--blauw); }
  .topbalk__links { clip-path: none; padding-right: 0; gap: 18px; }
  .topbalk__links a:last-child { display: none; }
  .feiten dt { font-size: 1.2rem; }
  .feiten div + div { padding-left: 14px; }
  .feiten div { padding-right: 10px; }
  .band { clip-path: polygon(0 28px, 40% 28px, calc(40% + 28px) 0, 100% 0, 100% 100%, 0 100%); }
  .dienst { padding: 28px 22px; }
  .tegels { grid-template-columns: 1fr 1fr; }
  .tegels li { padding: 22px 16px; }
  .maand__lijn span { width: 44px; height: 44px; margin-left: -22px; line-height: 44px; font-size: 1rem; top: 6px; }
  .momenten { grid-template-columns: 1fr; }
  .sector { padding: 20px; gap: 16px; }
  .sector__bol { width: 48px; height: 48px; }
  .oproep { padding: 36px 24px 32px; }
  .voet__rij { grid-template-columns: 1fr; gap: 32px; }
  .voet__slot .voet__credit { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .w { animation: none; }
  html { scroll-behavior: auto; }
  .im-ster { animation: none; }
  * { transition: none !important; }
}

/* ═══ Binnenpagina's ═════════════════════════════════════════════════ */

.smal { max-width: 860px; }
h2.klein { font-size: 1.5rem; margin-bottom: 20px; }
.noot { margin-top: 28px; color: var(--zacht); font-size: .95rem; }

/* Paginakop: licht, met een stuk van de logoschijf rechts en de schuine
   hoek onderaan. Geen verloop, zodat het niet op DevAlp lijkt. */
.paginakop { position: relative; overflow: hidden; background: var(--grond); padding: clamp(40px, 6vw, 76px) 0 clamp(56px, 7vw, 92px); clip-path: polygon(0 0, 100% 0, 100% 100%, calc(66% + 36px) 100%, 66% calc(100% - 36px), 0 calc(100% - 36px)); }
.paginakop__schijf { position: absolute; width: 520px; aspect-ratio: 1; border-radius: 50%; right: -170px; top: -230px; background: var(--schijf); opacity: .95; }
.paginakop__schijf::after { content: ""; position: absolute; inset: -46px; border-radius: 50%; border: 1px solid rgba(36,83,160,.18); }
.paginakop__rij { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.paginakop h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); max-width: 19ch; }
.paginakop .lead { margin-top: 18px; }
.paginakop--rechts .paginakop__rij { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.paginakop--rechts .paginakop__schijf { right: auto; left: 58%; top: -120px; width: 640px; }
/* Kruimelpad als wit pilletje met huisje en dunne pijltjes */
.kruimels { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .86rem; margin-bottom: 26px; color: var(--zacht); background: #fff; border: 1px solid var(--lijn); border-radius: 999px; padding: 7px 16px 7px 12px; box-shadow: 0 6px 18px -12px rgba(10,38,71,.35); }
.kruimels a { display: inline-flex; align-items: center; color: var(--zacht); text-decoration: none; transition: color .2s; }
.kruimels a:hover { color: var(--blauw); }
.kruimels svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kruimels .kruimels__thuis { color: var(--blauw); }
.kruimels__stap { display: inline-flex; color: #a7b2c3; }
.kruimels__stap svg { width: 13px; height: 13px; stroke-width: 2; }
.kruimels [aria-current] { color: var(--blauw); font-weight: 700; }
.onzichtbaar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.paginakop__foto { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(6,25,52,.7); border: 6px solid #fff; }
.paginakop__foto img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: 50% 20%; }

/* Schema's in de paginakop van payroll en HR */
.cyclus, .route { background: #fff; border-radius: 18px; padding: 26px 26px 18px; box-shadow: 0 40px 70px -40px rgba(6,25,52,.6); }
.cyclus__titel { font: 600 .78rem/1 var(--kop); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); margin-bottom: 14px; }
.cyclus ol, .route ol { counter-reset: c; }
.cyclus li, .route li { position: relative; display: grid; grid-template-columns: 74px 1fr; column-gap: 14px; padding: 11px 0; border-top: 1px solid var(--lijn); }
.cyclus li b, .route li b { font: 600 1rem/1.3 var(--kop); color: var(--inkt); }
.cyclus li > span:last-child, .route li span { grid-column: 2; font-size: .88rem; color: var(--zacht); }
.wie { grid-row: span 2; align-self: center; justify-self: start; font: 700 .72rem/1 var(--kop); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: var(--grond); color: var(--zacht); }
.wie--u { background: #e3edf9; color: var(--blauw); }
.wie--irs { background: #fff1e6; color: var(--oranje-donker); }
.route li { grid-template-columns: 1fr; padding-left: 40px; }
.route li::before { content: ""; position: absolute; left: 6px; top: 15px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--blauw-licht); background: #fff; }
.route li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 31px; bottom: -13px; width: 2px; background: #d3dfef; }
.route li.route--klaar::before { background: var(--groen); border-color: var(--groen); }
.route li span { grid-column: 1; }

/* Sectiekop met een link rechts */
.sectiekop--rij { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.sectiekop--rij .sectiekop { margin: 0; }

/* Nieuws */
.nieuwsraster { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.nieuwsraster--drie { grid-template-columns: repeat(3, 1fr); }
.nieuwskaart { display: flex; flex-direction: column; gap: 10px; padding: 30px; border: 1px solid var(--lijn); border-radius: var(--rond); text-decoration: none; color: var(--tekst); transition: border-color .2s, transform .2s, box-shadow .2s; }
.nieuwskaart:hover { border-color: var(--blauw-licht); transform: translateY(-3px); box-shadow: 0 24px 40px -30px rgba(10,38,71,.5); }
.nieuwskaart time { font: 600 .8rem/1 var(--kop); letter-spacing: .08em; text-transform: uppercase; color: var(--oranje-donker); }
.nieuwskaart h3 { font-size: 1.3rem; line-height: 1.3; }
.nieuwskaart .tekstlink { margin-top: auto; padding-top: 8px; }

/* Diensten: twee keuzes */
.keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.keuze { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 40px; border-radius: 18px; border: 1px solid var(--lijn); text-decoration: none; color: var(--tekst); transition: border-color .2s, box-shadow .2s; }
.keuze::before { content: ""; position: absolute; width: 260px; aspect-ratio: 1; border-radius: 50%; right: -110px; top: -110px; background: #e3edf9; transition: transform .4s; }
.keuze--oranje::before { background: #fff1e6; }
.keuze:hover { border-color: var(--blauw-licht); box-shadow: 0 30px 50px -36px rgba(10,38,71,.55); }
.keuze:hover::before { transform: scale(1.12); }
.keuze > * { position: relative; }
.keuze__bol { width: 60px; height: 60px; border-radius: 50%; background: var(--blauw); color: #fff; display: grid; place-items: center; margin-bottom: 24px; }
.keuze--oranje .keuze__bol { background: var(--oranje); }
.keuze__bol svg { width: 26px; height: 26px; }
.keuze h2 { font-size: 2.2rem; margin-bottom: 10px; }
.keuze > p { margin-bottom: 22px; max-width: 42ch; }
.keuze .vinklijst { margin-bottom: 28px; }
.keuze .tekstlink { margin-top: auto; }

.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kaart { background: #fff; border-radius: var(--rond); padding: 30px 28px; }
.kaart__icoon { width: 30px; height: 30px; color: var(--blauw); margin-bottom: 18px; }
.kaart h3 { margin-bottom: 8px; }

.vinklijst li { position: relative; padding: 9px 0 9px 32px; border-top: 1px solid var(--lijn); color: var(--inkt); }
.vinklijst li::before { content: ""; position: absolute; left: 0; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: #e1f3e4; }
.vinklijst li::after { content: ""; position: absolute; left: 7px; top: 17px; width: 5px; height: 9px; border: solid var(--groen); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Oproepband onderaan binnenpagina's */
.sectie--oproep { padding-top: 0; }
.sectie--licht + .sectie--oproep { padding-top: clamp(72px, 9vw, 120px); }
.oproepband { position: relative; overflow: hidden; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 32px 48px; flex-wrap: wrap; background: var(--blauw); color: #d9e6f7; border-radius: 22px; padding: clamp(36px, 5vw, 56px); }
.oproepband__schijf { position: absolute; z-index: -1; width: 420px; aspect-ratio: 1; border-radius: 50%; background: var(--schijf); right: 8%; top: -260px; box-shadow: 0 0 0 48px rgba(255,255,255,.04); }
.oproepband h2 { color: #fff; margin-bottom: 10px; }
.oproepband p { max-width: 52ch; }
.oproepband__acties { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.oproepband__bel { color: #fff; font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.oproepband__bel svg { width: 18px; height: 18px; }

/* Dienstpagina's */
.lijstblokken { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.lijstblok h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lijstblok h3 svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: #e3edf9; color: var(--blauw); }
.slot--smal { grid-template-columns: 1.3fr .7fr; }
.naast { background: #fff; border-radius: 18px; padding: 32px; border: 1px solid var(--lijn); position: sticky; top: 160px; }
.naast h3 { font-size: 1.3rem; margin-bottom: 8px; }
.naast > p { margin-bottom: 18px; }
.naast__tel { display: flex; align-items: center; gap: 10px; font: 600 1.35rem/1 var(--kop); color: var(--inkt); text-decoration: none; margin-bottom: 18px; }
.naast__tel svg { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--blauw); color: #fff; }
.naast__tussen { margin: 24px 0 10px; font-weight: 700; color: var(--inkt); }
.naast .vinklijst { margin-top: 12px; }

/* Werkwijze */
.naastelkaar { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.naastelkaar .sectiekop { margin-bottom: 0; }
.schema { margin: 0; background: #fff; border-radius: 18px; padding: 26px; box-shadow: 0 40px 70px -40px rgba(6,25,52,.55); border: 1px solid var(--lijn); }
.schema figcaption { font: 600 .78rem/1.3 var(--kop); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); margin-bottom: 10px; }
.signaal { display: grid; grid-template-columns: 14px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--lijn); }
.signaal__stip { width: 12px; height: 12px; border-radius: 50%; background: #c9d6e8; }
.signaal--rood .signaal__stip { background: #d6372b; box-shadow: 0 0 0 4px #fbe4e2; }
.signaal--oranje .signaal__stip { background: var(--oranje); }
.signaal b { display: block; font: 600 1rem/1.3 var(--kop); color: var(--inkt); }
.signaal div span { font-size: .88rem; color: var(--zacht); }
.signaal em { font-style: normal; font-size: .82rem; font-weight: 700; color: var(--zacht); white-space: nowrap; }
.signaal--rood em { color: #b52a20; }

.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.stappen::before { content: ""; position: absolute; top: 26px; left: 26px; right: 26px; height: 2px; background: repeating-linear-gradient(90deg, #cfdaea 0 8px, transparent 8px 14px); }
.stappen li { position: relative; }
.stap__bol { width: 52px; height: 52px; border-radius: 50%; background: var(--blauw); color: #fff; display: grid; place-items: center; font: 700 1.2rem/1 var(--kop); margin-bottom: 20px; box-shadow: 0 0 0 8px #fff; position: relative; }
.stappen li:last-child .stap__bol { background: var(--oranje); }
.stappen h3 { margin-bottom: 6px; }
.stappen--lijst { grid-template-columns: 1fr; gap: 0; }
.stappen--lijst::before { display: none; }
.stappen--lijst li { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; padding: 14px 0; }
.stappen--lijst .stap__bol { grid-row: span 2; margin: 0; box-shadow: none; width: 44px; height: 44px; }
.stappen--lijst li:last-child .stap__bol { background: var(--blauw); }

/* Over IRS */
.pijlers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.pijler { border: 2px solid #eef2f6; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.pijler__kop { padding: 26px 24px 22px; }
.pijler__kop img { width: auto; height: 52px; margin-bottom: 26px; }
.pijler h3 { font: 500 1.45rem/1.2 var(--letter); color: var(--blauw); letter-spacing: 0; }
.pijler ul { background: #f6f7fb; padding: 22px 24px 24px; flex: 1; }
.pijler li { position: relative; padding: 4px 0 4px 26px; font-size: .97rem; color: var(--tekst); }
.pijler li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 5px; height: 10px; border: solid #22a738; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.voordelen { display: grid; gap: 20px; }
.voordeel { background: #fff; border-radius: 18px; padding: 28px; }
.voordeel h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.voordeel h3 svg { width: 24px; height: 24px; color: var(--blauw); }
.nirpa { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; max-width: 980px; }
.nirpa__bol { width: 170px; height: 170px; border-radius: 50%; background: var(--schijf); color: #fff; display: grid; place-items: center; font: 800 1.6rem/1 var(--kop); letter-spacing: .04em; box-shadow: 0 0 0 12px #e3edf9, 0 0 0 13px #c8d9ef; }

/* Lopende tekst: nieuws en juridisch */
.artikel { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.lopend { max-width: 70ch; }
.lopend--smal { margin-inline: auto; }
.lopend h2 { font-size: 1.5rem; margin: 2em 0 .6em; }
.lopend h3 { margin: 1.6em 0 .5em; }
.lopend p, .lopend ul, .lopend ol, .lopend table { margin-bottom: 1.1em; }
.lopend ul { list-style: disc; padding-left: 1.3em; }
.lopend ol { list-style: decimal; padding-left: 1.3em; }
.lopend li { margin-bottom: .35em; }
.lopend table { border-collapse: collapse; width: 100%; font-size: .95rem; display: block; overflow-x: auto; }
.lopend th, .lopend td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lijn); }
.lopend th { color: var(--inkt); font-family: var(--kop); font-weight: 600; }
.artikel__datum { font: 600 .82rem/1 var(--kop); letter-spacing: .08em; text-transform: uppercase; color: var(--oranje-donker); margin-bottom: 1.6em !important; }

/* Documenten, support, inloggen */
.documenten { display: grid; gap: 16px; }
.document { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 30px; border: 1px solid var(--lijn); border-radius: var(--rond); }
.document__icoon { width: 56px; height: 56px; padding: 15px; border-radius: 50%; background: #e3edf9; color: var(--blauw); }
.document h2 { font-size: 1.3rem; margin-bottom: 6px; }
.document__noot { font-size: .9rem; color: var(--zacht); margin-top: 10px; }
.document__actie { margin-top: 18px; }
.knop--klein svg { width: 16px; height: 16px; }
.downloads { display: grid; gap: 14px; }
.download { display: grid; grid-template-columns: 48px 1fr 24px; gap: 18px; align-items: center; padding: 22px 24px; border: 1px solid var(--lijn); border-radius: var(--rond); text-decoration: none; color: var(--tekst); transition: border-color .2s; }
.download:hover { border-color: var(--blauw-licht); }
.download > svg:first-child { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--blauw); color: #fff; }
.download > svg:last-child { width: 22px; height: 22px; color: var(--blauw); }
.download b { display: block; font: 600 1.1rem/1.3 var(--kop); color: var(--inkt); }
.download span { font-size: .9rem; color: var(--zacht); }
.portalen { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.portaal { display: flex; flex-direction: column; gap: 6px; padding: 34px; border: 1px solid var(--lijn); border-radius: 18px; text-decoration: none; color: var(--tekst); transition: border-color .2s, box-shadow .2s; }
.portaal:hover { border-color: var(--blauw-licht); box-shadow: 0 30px 50px -36px rgba(10,38,71,.55); }
.portaal__bol { width: 56px; height: 56px; border-radius: 50%; background: var(--blauw); color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.portaal__bol svg { width: 24px; height: 24px; }
.portaal .etiket { margin-bottom: 8px; }
.portaal h2 { font-size: 1.5rem; margin-bottom: 6px; }
.portaal .tekstlink { margin-top: 18px; }

/* ── Formulieren ─────────────────────────────────────────────────── */
.contactraster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: start; }
.formulier { background: #fff; border: 1px solid var(--lijn); border-radius: 20px; padding: clamp(24px, 4vw, 44px); }
.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.veld { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.veld--breed { grid-column: 1 / -1; }
.veld label, .veld legend { font-weight: 700; color: var(--inkt); font-size: .95rem; padding: 0; }
.veld legend { margin-bottom: 10px; }
.optioneel { font-weight: 500; color: var(--zacht); font-size: .85rem; margin-left: 4px; }
.veld input, .veld textarea, .keuzelijst select { width: 100%; font: 500 1rem/1.4 var(--letter); color: var(--inkt); background: var(--grond); border: 2px solid transparent; border-radius: 10px; padding: 13px 14px; transition: border-color .2s, background .2s; }
.veld textarea { resize: vertical; min-height: 130px; }
.veld input:focus, .veld textarea:focus, .keuzelijst select:focus { outline: none; border-color: var(--blauw-licht); background: #fff; }
.keuzelijst { position: relative; }
.keuzelijst select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.keuzelijst svg { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; color: var(--blauw); }
.keuzeknoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.keuzeknop { position: relative; cursor: pointer; }
.keuzeknop input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.keuzeknop span { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: var(--grond); border: 2px solid transparent; color: var(--inkt); font-weight: 600; font-size: .95rem; transition: border-color .15s, background .15s; }
.keuzeknop span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #b7c6da; background: #fff; flex: none; transition: border-color .15s, box-shadow .15s; }
.keuzeknop input[type="checkbox"] + span::before { border-radius: 4px; }
.keuzeknop input:checked + span { border-color: var(--blauw); background: #fff; }
.keuzeknop input:checked + span::before { border-color: var(--blauw); box-shadow: inset 0 0 0 3px #fff; background: var(--blauw); }
.keuzeknop input:focus-visible + span { outline: 2px solid var(--blauw-licht); outline-offset: 2px; }
.akkoord { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0; font-size: .92rem; cursor: pointer; }
.akkoord input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blauw); flex: none; }
.veld__fout { display: none; color: #b52a20; font-size: .85rem; font-weight: 700; }
.is-fout .veld__fout { display: block; }
.is-fout input, .is-fout textarea { border-color: #d6372b; background: #fff; }
.akkoord.is-fout span { color: #b52a20; }
.lokvak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.melding { background: #fbe4e2; color: #7d1d15; border-radius: 10px; padding: 14px 16px; margin-bottom: 22px; font-size: .95rem; }
.formulier > .knop { cursor: pointer; font-family: var(--letter); }

/* Offertewizard. Zonder JavaScript is het één lange lijst. */
.voortgang { display: none; }
.stap { border: 0; padding: 0; margin: 0 0 36px; min-width: 0; }
.stap > legend { font: 600 1.4rem/1.2 var(--kop); color: var(--inkt); margin-bottom: 22px; padding: 0; }
.stap__nr { display: block; font: 600 .78rem/1 var(--kop); letter-spacing: .1em; text-transform: uppercase; color: var(--oranje-donker); margin-bottom: 8px; }
.formulier__knoppen { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.formulier__knoppen .knop { cursor: pointer; font-family: var(--letter); }
.formulier__knoppen [data-verder], .formulier__knoppen [data-verstuur] { margin-left: auto; }
[data-wizard="aan"] .stap { display: none; margin-bottom: 28px; }
[data-wizard="aan"] .stap.is-hier { display: block; animation: stapin .3s ease; }
[data-wizard="aan"] .voortgang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 30px; counter-reset: v; }
.voortgang li { counter-increment: v; font-size: .82rem; font-weight: 700; color: var(--zacht); padding-top: 12px; border-top: 4px solid var(--lijn); transition: border-color .3s, color .3s; }
.voortgang li::before { content: counter(v) ". "; }
.voortgang li.is-gedaan { border-color: var(--blauw); color: var(--inkt); }
.voortgang li.is-hier { border-color: var(--oranje); color: var(--inkt); }
@keyframes stapin { from { opacity: 0; transform: translateX(10px); } }

.contactkaart { display: grid; gap: 4px; }
.contactkaart__regel { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--lijn); }
.contactkaart__regel > svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: #e3edf9; color: var(--blauw); }
.contactkaart__regel span { display: block; font: 600 .76rem/1 var(--kop); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); margin-bottom: 6px; }
.contactkaart__regel a { font-weight: 700; text-decoration: none; color: var(--inkt); }
.contactkaart__regel a:hover { color: var(--blauw); }
.contactkaart__regel p { color: var(--inkt); }
.contactkaart__route { display: inline-block; margin-top: 6px; color: var(--blauw) !important; font-size: .92rem; }
.contactkaart__foto { margin: 18px 0 0; border-radius: 16px; overflow: hidden; }
.contactkaart__foto img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; object-position: 50% 20%; }
.contactkaart__noot { font-size: .85rem; color: var(--zacht); margin-top: 10px; }

/* Bedankt en 404 */
.leeg { padding: clamp(80px, 12vw, 160px) 0; text-align: center; background: var(--grond); }
.leeg .smal { max-width: 640px; }
.leeg__bol { width: 96px; height: 96px; border-radius: 50%; background: var(--groen); color: #fff; display: grid; place-items: center; margin: 0 auto 28px; font: 800 1.6rem/1 var(--kop); }
.leeg__bol svg { width: 44px; height: 44px; stroke-width: 2.4; }
.leeg__bol--oranje { background: var(--oranje); }
.leeg h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.leeg .lead { margin: 16px auto 0; }
.leeg .knoppen { justify-content: center; }

.voet__nirpa { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; font-size: .88rem; }
.voet__nirpa svg { width: 18px; height: 18px; color: #8fc0ff; }
.voet h2 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.voet h2.voet__tussenkop { margin-top: 28px; }

@media (max-width: 1100px) {
  .pijlers { grid-template-columns: 1fr 1fr; }
  .nieuwsraster--drie { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .paginakop--rechts .paginakop__rij, .naastelkaar, .contactraster, .artikel, .slot--smal, .keuzes { grid-template-columns: 1fr; }
  .paginakop--rechts .paginakop__rij { gap: 40px; }
  .naastelkaar { gap: 40px; }
  .lijstblokken, .kaarten { grid-template-columns: 1fr; gap: 28px; }
  .stappen { grid-template-columns: 1fr 1fr; }
  .stappen::before { display: none; }
  .naast { position: static; }
  .portalen { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .paginakop { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + 22px) 100%, 50% calc(100% - 22px), 0 calc(100% - 22px)); }
  .paginakop__schijf { width: 220px; right: -130px; top: -120px; }
  .voortgang li { font-size: 0; padding-top: 0; }
  .paginakop--rechts .paginakop__schijf { width: 420px; left: 30%; top: auto; bottom: -160px; }
  .sectiekop--rij { flex-direction: column; align-items: start; }
  .nieuwsraster, .nieuwsraster--drie, .pijlers, .stappen { grid-template-columns: 1fr; }
  .keuze { padding: 28px 24px; }
  .velden { grid-template-columns: 1fr; }
  .nirpa { grid-template-columns: 1fr; gap: 32px; }
  .nirpa__bol { width: 120px; height: 120px; font-size: 1.2rem; }
  .document { grid-template-columns: 1fr; padding: 24px; gap: 14px; }
  .cyclus li { grid-template-columns: 64px 1fr; }
  .oproepband__acties { width: 100%; }
}
#formulier, [id] { scroll-margin-top: 140px; }
/* Pas beginnen als de wolk in beeld komt (mobiel staat hij onder de tekst) */
.wolk.is-wacht .w { animation-play-state: paused; }

/* ── Kop en topbalk (2026-10-07) ─────────────────────────────────── */
/* Topbalk één blauw vlak zonder schuine hoek. De kop licht, net niet wit,
   in de tint van de lichte vlakken van de site. */
.topbalk { background: var(--blauw); }
.topbalk__links { background: none; clip-path: none; padding-right: 0; }
.topbalk__rij::before { display: none; }
.topbalk__links a, .topbalk__rechts a { color: #fff; }
.topbalk__rechts a { color: #d9e6f7; }
.topbalk__rechts a:hover { color: #fff; }
.topbalk { font-size: .86rem; }
.topbalk__rij { min-height: 38px; }
.topbalk svg { width: 14px; height: 14px; }
.topbalk__links, .topbalk__rechts { gap: 22px; }
@media (max-width: 960px) { .menu.is-open { height: calc(100dvh - 110px); } }
.kop { background: rgba(248,250,253,.96); border-bottom-color: var(--lijn); }
.koppen.is-vast .kop { border-color: var(--lijn); }

/* ── Scrollbalk in huisstijl ─────────────────────────────────────── */
html { scrollbar-color: var(--blauw) var(--grond); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--grond); }
::-webkit-scrollbar-thumb { background: var(--blauw); border-radius: 999px; border: 3px solid var(--grond); }
::-webkit-scrollbar-thumb:hover { background: var(--blauw-diep); }

/* ── Team op Over IRS: portret en naam samen in één kaart ──────── */
.teamblok { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 56px; align-items: center; }
.teamblok .sectiekop { margin: 0; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.lid { margin: 0; background: #fff; border: 1px solid var(--lijn); border-radius: 16px; overflow: hidden; box-shadow: 0 22px 44px -34px rgba(10,38,71,.55); transition: transform .2s, box-shadow .2s; }
.lid:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -32px rgba(10,38,71,.6); }
.lid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--grond); }
.lid figcaption { padding: 16px 18px 18px; border-top: 3px solid var(--blauw); }
.lid h3 { font: 600 1.08rem/1.25 var(--kop); color: var(--inkt); margin: 0 0 2px; }
.lid p { margin: 0 0 10px; font-size: .9rem; color: var(--zacht); }
.lid a { display: flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--blauw); text-decoration: none; }
.lid a + a { margin-top: 5px; }
.lid a:hover { text-decoration: underline; }
.lid a svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 1100px) { .teamblok { grid-template-columns: 1fr; gap: 28px; } .team { grid-template-columns: repeat(3, minmax(0, 260px)); } }
/* Op smallere schermen een carrousel om doorheen te vegen, zelfde lettergrootte */
@media (max-width: 820px) {
  .team { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 calc(16px * -1); padding: 4px 16px 22px; scrollbar-width: none; }
  .team::-webkit-scrollbar { display: none; }
  .lid { flex: 0 0 min(78%, 280px); scroll-snap-align: start; }
}

/* ── Homepage-flow (2026-10-07) ──────────────────────────────────── */
/* Ingangen onder de herokop: voor wie is IRS */
.ingangen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; font-size: .92rem; }
.ingangen > span { color: var(--zacht); margin-right: 2px; }
.ingangen a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--lijn); color: var(--inkt); font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
.ingangen a:hover { border-color: var(--blauw); color: var(--blauw); }
.ingangen a svg { width: 14px; height: 14px; color: var(--blauw); }

/* Het kantoor: foto van het pand naast het verhaal */
.kantoor { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.kantoor__foto { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 70px -44px rgba(6,25,52,.6); }
.kantoor__foto img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.kantoor .sectiekop { margin-bottom: 22px; }
.kantoor__feiten { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 0; }
.kantoor__feiten li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--lijn); }
.kantoor__feiten li:last-child { border-bottom: 1px solid var(--lijn); }
.kantoor__feiten b { font: 600 1.35rem/1 var(--kop); color: var(--blauw); min-width: 108px; }
.kantoor__feiten span { color: var(--tekst); }

/* Vier diensten in de band */
.diensten--vier { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.diensten--vier .dienst { padding: 28px 24px 24px; }
.diensten--vier .dienst h3 { font-size: 1.45rem; }

/* Voor wie, op de dienstpagina's */
.voorwie { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.voorwie .sectiekop { margin-bottom: 0; }
.voorwie__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.voorwie__lijst li { display: flex; gap: 14px; align-items: flex-start; background: var(--grond); border-radius: 14px; padding: 18px 20px; color: var(--inkt); font-weight: 600; }
.voorwie__lijst svg { width: 22px; height: 22px; flex: none; color: var(--groen); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }

/* Blokken nummeren voor feedback: voeg #nummers toe aan de link */
.blok-nr { position: absolute; top: 12px; left: 12px; z-index: 40; background: var(--oranje); color: #fff; font: 700 15px/1 var(--letter); padding: 7px 10px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }

@media (max-width: 1100px) { .diensten--vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) {
  .kantoor, .voorwie { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) { .diensten--vier { grid-template-columns: 1fr; } }
.band > .blok-nr { top: 64px; }

/* ── Het originele filmpje in de cirkel van de hero ─────────────── */
.wolk--video::before { display: none; }
.wolk__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #071c3d; box-shadow: 0 50px 90px -40px rgba(6,25,52,.7); }

/* ── Filmpje als band over de volle breedte, hero eronder ─────────── */
.heldband { position: relative; height: clamp(220px, 34vw, 480px); overflow: hidden; background: #071c3d; }
.heldband__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero--onder .hero__rij { grid-template-columns: 1.35fr .65fr; align-items: start; padding: clamp(44px, 6vw, 80px) 0 clamp(52px, 6vw, 88px); }
.feiten--rechts { flex-direction: column; margin: 0; padding: 6px 0 0; border-top: 0; }
.feiten--rechts div, .feiten--rechts div + div { padding: 18px 0; border-left: 0; border-top: 1px solid var(--lijn); }
.feiten--rechts div:last-child { border-bottom: 1px solid var(--lijn); }
.feiten--rechts dt { font-size: 1.7rem; color: var(--blauw); }
@media (max-width: 960px) {
  .hero--onder .hero__rij { grid-template-columns: 1fr; gap: 32px; }
  .feiten--rechts { flex-direction: row; }
  .feiten--rechts div, .feiten--rechts div + div { padding: 14px 12px 0 0; border-top: 1px solid var(--lijn); border-bottom: 0; flex: 1; }
  .feiten--rechts div:last-child { border-bottom: 0; }
  .feiten--rechts dt { font-size: 1.25rem; }
}

/* ── Navigatie-instructie op de contactkaart ─────────────────────── */
.contactkaart__navi { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 10px; padding: 12px 14px; background: #fff7f0; border: 1px solid #fde0c8; border-radius: 10px; font-size: .9rem; line-height: 1.5; color: var(--tekst); }
.contactkaart__navi svg { width: 18px; height: 18px; flex: none; color: var(--oranje); margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contactkaart__navi b { color: var(--inkt); white-space: nowrap; }

/* ── Eigen uitklaplijst in huisstijl (vervangt de lijst van het systeem) ── */
.kiezer { position: relative; }
.kiezer__knop { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; font: 500 1rem/1.4 var(--letter); color: var(--inkt); background: var(--grond); border: 2px solid transparent; border-radius: 10px; padding: 13px 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.kiezer__knop:hover { border-color: var(--lijn); }
.kiezer__knop:focus-visible, .kiezer.is-open .kiezer__knop { outline: none; border-color: var(--blauw-licht); background: #fff; }
.kiezer__knop svg { width: 18px; height: 18px; flex: none; color: var(--blauw); transition: transform .2s; }
.kiezer.is-open .kiezer__knop svg { transform: rotate(180deg); }
.kiezer__lijst { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--lijn); border-radius: 12px; box-shadow: 0 24px 48px -24px rgba(10,38,71,.45); max-height: 300px; overflow-y: auto; }
.kiezer__lijst[hidden] { display: none; }
.kiezer__optie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 8px; cursor: pointer; color: var(--inkt); font-weight: 500; }
.kiezer__optie:hover, .kiezer__optie.is-actief { background: var(--grond); }
.kiezer__optie[aria-selected="true"] { color: var(--blauw); font-weight: 700; }
.kiezer__optie[aria-selected="true"]::after { content: ""; width: 6px; height: 11px; border: solid var(--blauw); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-right: 4px; }
.keuzelijst.is-vervangen > select, .keuzelijst.is-vervangen > svg { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.contactkaart__navi span { display: block; font: 500 .9rem/1.5 var(--letter); text-transform: none; letter-spacing: 0; color: var(--tekst); margin: 0; }
.topbalk__rechts svg { color: #fff; opacity: .85; }

/* ── Inlogpaneel met de beeldmerken van de portalen ───────────── */
.inlog__paneel { width: 290px; }
.inlog__paneel a.inlog__portaal { display: grid; grid-template-columns: 40px 1fr 16px; align-items: center; gap: 12px; padding: 10px 12px; }
.inlog__merk { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--lijn); border-radius: 10px; }
.inlog__merk img { width: 24px; height: 24px; object-fit: contain; }
.inlog__portaal span b { font-size: .95rem; }
.inlog__portaal > span:not(.inlog__merk) { line-height: 1.3; }
.inlog__portaal svg { width: 16px; height: 16px; color: var(--zacht); fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s, color .2s; }
.inlog__portaal:hover svg { color: var(--blauw); transform: translateX(2px); }
.portaal__logo { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #fff; border: 1px solid var(--lijn); border-radius: 14px; flex: none; }
.portaal__logo img { width: 30px; height: 30px; object-fit: contain; }

/* ── Support: een kaart per programma, knoppen voor Windows en Mac ─ */
.download { display: grid; grid-template-columns: 64px 1fr; grid-template-areas: "logo tekst" "knop knop"; gap: 16px 20px; align-items: center; padding: 22px; background: #fff; border: 1px solid var(--lijn); border-radius: var(--rond); box-shadow: 0 18px 40px -32px rgba(10,38,71,.5); }
.download:hover { border-color: var(--lijn); }
.download__logo { grid-area: logo; width: 64px; height: 64px; padding: 14px; border-radius: 16px; background: var(--grond); object-fit: contain; }
.download > div:not(.download__knoppen) { grid-area: tekst; }
.download b { display: block; font: 600 1.2rem/1.3 var(--kop); color: var(--inkt); }
.download > div > span { font-size: .9rem; color: var(--zacht); }
.download__knoppen { grid-area: knop; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.download__knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 8px; background: var(--blauw); color: #fff; font: 600 .95rem/1 var(--letter); text-decoration: none; transition: background .2s; }
.download__knop:hover { background: var(--blauw-diep); }
.download__knop svg { width: 16px; height: 16px; color: #fff; fill: none; stroke: currentColor; stroke-width: 2; }
.download__knop { position: relative; overflow: hidden; justify-content: flex-start; padding-left: 16px; }
.download__knop .download__merk { position: absolute; right: -10px; top: 50%; width: 54px; height: 54px; transform: translateY(-40%) rotate(-8deg); fill: #fff; stroke: none; opacity: .16; pointer-events: none; transition: opacity .2s, transform .2s; }
.download__knop:hover .download__merk { opacity: .24; transform: translateY(-44%) rotate(-8deg); }

/* ── Nieuws: rustige lijst met de datum links ─────────────────────── */
.nieuwskaart__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font: 600 .76rem/1 var(--kop); letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.nieuwskaart__meta span:first-child { color: var(--blauw); }
.nieuwskaart__meta time { color: var(--zacht); }
.nieuwslijst { border-top: 1px solid var(--lijn); max-width: 980px; }
.nieuwsregel { display: grid; grid-template-columns: 150px 1fr 32px; gap: 32px; align-items: start; padding: 34px 0; border-bottom: 1px solid var(--lijn); text-decoration: none; color: var(--tekst); }
.nieuwsregel__datum { display: flex; flex-direction: column; font: 500 .9rem/1.3 var(--letter); color: var(--zacht); padding-top: 2px; }
.nieuwsregel__datum b { font: 600 2.4rem/1 var(--kop); color: var(--inkt); margin-bottom: 4px; }
.nieuwsregel__tekst { display: flex; flex-direction: column; gap: 10px; }
.nieuwsregel h2 { margin: 0; font-size: 1.35rem; line-height: 1.3; color: var(--inkt); transition: color .2s; }
.nieuwsregel--eerste h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.nieuwsregel__tekst > p:last-child { margin: 0; max-width: 680px; }
.nieuwsregel__pijl { align-self: center; color: var(--blauw); opacity: .5; transition: opacity .2s, transform .2s; }
.nieuwsregel__pijl svg { width: 22px; height: 22px; }
.nieuwsregel:hover h2 { color: var(--blauw); }
.nieuwsregel:hover .nieuwsregel__pijl { opacity: 1; transform: translateX(4px); }
@media (max-width: 700px) {
  .nieuwsregel { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .nieuwsregel__datum { flex-direction: row; align-items: baseline; gap: 8px; }
  .nieuwsregel__datum b { font-size: 1.4rem; margin: 0; }
  .nieuwsregel__pijl { display: none; }
}

/* ── Topbalk met de schuine hoek van de huidige site (2026-10-10) ── */
/* Blauw tot halverwege, dan de schuine snede en licht, zoals op
   irs-salaris.nl (daar linear-gradient(100deg, … 52%, … 52%)). */
.topbalk { background: linear-gradient(100deg, var(--blauw) 50%, var(--grond) 50%); }
.topbalk__rechts a { color: var(--tekst); }
.topbalk__rechts a:hover { color: var(--blauw); }
.topbalk__rechts svg { color: var(--blauw); opacity: 1; }
@media (max-width: 960px) { .topbalk { background: var(--blauw); } }
/* Het gevulde supporticoon van de huidige site tussen de lijniconen */
.topbalk svg.icoon--vol { fill: currentColor; stroke: none; width: 16px; }

/* ── Etiket als schuine strook (2026-10-10, variant A) ──────────── */
/* Blauw vlakje met de schuine snede van de topbalk, in plaats van het
   oranje bolletje met blauwe tekst. */
.etiket { display: flex; width: fit-content; gap: 0; font-size: .78rem; letter-spacing: .09em; color: #fff; background: var(--blauw); padding: 8px 22px 8px 12px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); margin-bottom: 18px; }
.etiket::before { content: none; }
.sectiekop--wit .etiket { color: var(--blauw); background: #fff; }
.leeg .etiket { margin-left: auto; margin-right: auto; }

/* ── Kaart rechts in de hero (2026-10-10) ──────────────────────── */
/* Variant B2: blauw verloop naar diep, de schuine hoek van de topbalk
   rechtsboven, en geen oranje (IRS heeft eigenlijk geen oranje). */
@media (min-width: 961px) { .hero--onder .hero__rij { grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: center; } }
.herokaart { background: linear-gradient(160deg, var(--blauw-licht) 0%, var(--blauw) 50%, var(--blauw-diep) 100%); color: #fff; border-radius: 16px; padding: 30px 28px 26px; clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); }
.herokaart__etiket { font: 700 .74rem/1 var(--kop); letter-spacing: .09em; text-transform: uppercase; color: #bcd6f5; margin: 0 0 10px; }
.herokaart__kop { font: 600 1.35rem/1.2 var(--kop); color: #fff; letter-spacing: -.01em; margin: 0 0 20px; }
.herokaart ul { list-style: none; margin: 0; padding: 0; }
.herokaart li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.16); }
.herokaart li svg { display: block; width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; }
.herokaart li b { display: block; font: 600 1rem/1.3 var(--kop); color: #fff; }
.herokaart li span { display: block; font-size: .86rem; line-height: 1.45; color: #c9dbf2; margin-top: 2px; }
.herokaart__mens { display: flex; gap: 12px; align-items: center; margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: #fff; color: var(--tekst); font-size: .86rem; line-height: 1.45; }
.herokaart__mens img { width: 32px; height: 32px; flex: none; }
.herokaart__mens b { color: var(--inkt); font-weight: 700; }

/* ── Ingangen rustiger (2026-10-10) ─────────────────────────────── */
/* Geen pilletjes meer maar gewone tekstlinks met een dun streepje
   ertussen, onder een lijn. Zo concurreren ze niet met de knoppen. */
.ingangen { gap: 0; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--lijn); max-width: 520px; font-size: .9rem; }
.ingangen > span { margin-right: 12px; }
.ingangen a { padding: 0; border: 0; border-radius: 0; background: none; color: var(--blauw); gap: 4px; }
.ingangen a + a { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--lijn); }
.ingangen a:hover { color: var(--blauw-diep); text-decoration: underline; text-underline-offset: 3px; }
.ingangen a svg { width: 12px; height: 12px; }

/* ── Pijlers onder Het kantoor, in één sectie (2026-10-10) ──────── */
/* Eerst foto en verhaal, dan de vier pijlers als onderbouwing. Zo staan
   er na de hero niet twee losse blokken met argumenten na elkaar. */
.pijlers--kantoor { margin-top: clamp(48px, 6vw, 72px); }

/* ── Dienstenband: vier kaarten in twee bij twee (2026-10-10) ────── */
/* Vier smalle kaarten lieten onderdelen over twee regels lopen, en een
   brede Tijdelijk-kaart onder drie andere vond Odelin niet mooi. Twee bij
   twee geeft elke kaart genoeg breedte. Kaarten licht doorschijnend
   (variant A2), nummers lichtblauw. */
.diensten--twee { grid-template-columns: 1fr 1fr; gap: 20px; }
.diensten--twee .dienst { padding: 32px 34px 28px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-top-color: rgba(255,255,255,.34); }
.diensten--twee .dienst h3 { font-size: 1.6rem; }
.band .dienst__nr { color: #bcd6f5; }
@media (max-width: 760px) { .diensten--twee { grid-template-columns: 1fr; } }

/* ── Dienstenband: effen IRS-blauw met de logocirkel (2026-10-10) ── */
/* In plaats van de harde schuine verdeling en de ring rechtsonder: één
   vlak blauw met rechtsboven een grote, lichte cirkel met een ring
   eromheen, naar het rondje in het logo. De schuine bovenrand blijft. */
.band { background: var(--blauw); }
.band::after { width: 760px; right: -220px; bottom: auto; top: -160px; border: 0; background: radial-gradient(circle, rgba(255,255,255,.08) 0 54%, transparent 54.2%), radial-gradient(circle, transparent 0 60%, rgba(255,255,255,.06) 60.2% 70%, transparent 70.2%); pointer-events: none; }
.band > .binnen { position: relative; z-index: 1; }
@media (max-width: 760px) { .band::after { width: 520px; right: -260px; top: -120px; } }

/* ── Trap als ritmebreker (2026-10-10) ─────────────────────────── */
/* De dienstenband houdt zijn trap bovenaan (zie .band). Op de andere
   pagina's krijgt de eerste lichtgrijze sectie dezelfde trap als
   onderrand: links hoger, met een schuine stap van 45 graden naar een
   lager niveau rechts. In plaats van een gekantelde band, die vond
   Odelin minder passend. bouw.py zet de klasse. */
.sectie--trap {
  --trap: 48px;
  --trap-x: 22%;
  padding-bottom: calc(clamp(72px, 9vw, 120px) + var(--trap));
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--trap-x) + var(--trap)) 100%, var(--trap-x) calc(100% - var(--trap)), 0 calc(100% - var(--trap)));
}
.sectie--trap-rechts { --trap-x: 66%; }
/* De hero op de homepage: dezelfde trap, links. */
.hero--trap { --trap: 48px; --trap-x: 22%; padding-bottom: var(--trap); clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--trap-x) + var(--trap)) 100%, var(--trap-x) calc(100% - var(--trap)), 0 calc(100% - var(--trap))); }
/* De paginakop had al een trap van 36px op 66%; nu even groot als de rest. */
.paginakop { --trap: 48px; padding-bottom: calc(clamp(56px, 7vw, 92px) + 12px); clip-path: polygon(0 0, 100% 0, 100% 100%, calc(66% + var(--trap)) 100%, 66% calc(100% - var(--trap)), 0 calc(100% - var(--trap))); }
@media (max-width: 760px) {
  .sectie--trap, .hero--trap { --trap: 32px; --trap-x: 30%; }
  .sectie--trap-rechts { --trap-x: 50%; }
  .paginakop { --trap: 32px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + var(--trap)) 100%, 50% calc(100% - var(--trap)), 0 calc(100% - var(--trap))); }
}


/* ── Sectoren: blokjes en sectorpagina's (2026-10-10) ──────────── */
.sectortegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.sectortegel { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; background: #fff; border: 1px solid var(--lijn); border-radius: 14px; text-decoration: none; color: var(--tekst); transition: border-color .2s, transform .2s, box-shadow .2s; }
.sectortegel:hover { border-color: var(--blauw); transform: translateY(-3px); box-shadow: 0 22px 40px -30px rgba(10,38,71,.45); }
.sectortegel__ic svg { display: block; width: 42px; height: 42px; padding: 10px; border-radius: 10px; background: var(--grond); color: var(--blauw); margin-bottom: 10px; transition: background .2s, color .2s; }
.sectortegel:hover .sectortegel__ic svg { background: var(--blauw); color: #fff; }
.sectortegel b { font: 600 1.08rem/1.25 var(--kop); color: var(--inkt); padding-right: 22px; }
.sectortegel > span:not(.sectortegel__ic) { font-size: .88rem; line-height: 1.45; color: var(--zacht); }
.sectortegel > svg { position: absolute; right: 20px; top: 26px; width: 16px; height: 16px; color: var(--blauw); opacity: .5; transition: opacity .2s, transform .2s; }
.sectortegel:hover > svg { opacity: 1; transform: translateX(3px); }
.sectie--licht .sectortegel { border-color: #fff; }
@media (max-width: 1100px) { .sectortegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sectortegels { grid-template-columns: 1fr; } }
/* Sectorpagina: cao-kaart rechts in de kop, punten in twee kolommen */
.caokaart { background: #fff; border: 1px solid var(--lijn); border-radius: 16px; padding: 26px 28px; display: flex; gap: 20px; align-items: flex-start; box-shadow: 0 28px 56px -36px rgba(10,38,71,.4); max-width: 380px; justify-self: end; position: relative; z-index: 1; }
.caokaart__ic svg { display: block; width: 52px; height: 52px; padding: 13px; border-radius: 12px; background: var(--blauw); color: #fff; }
.caokaart dl { margin: 0; display: grid; gap: 14px; }
.caokaart dt { font: 700 .74rem/1 var(--kop); letter-spacing: .09em; text-transform: uppercase; color: var(--zacht); margin-bottom: 4px; }
.caokaart dd { margin: 0; font: 600 1.15rem/1.25 var(--kop); color: var(--inkt); }
.sectorpunten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.sectorpunt { display: grid; grid-template-columns: 30px 1fr; gap: 14px; background: #fff; border-radius: 14px; padding: 24px; }
.sectorpunt > svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #e6effa; color: var(--blauw); }
.sectorpunt h3 { font-size: 1.1rem; margin: 3px 0 4px; }
.sectorpunt p { margin: 0; font-size: .95rem; }
@media (max-width: 760px) { .sectorpunten { grid-template-columns: 1fr; } .caokaart { justify-self: stretch; max-width: none; } }

/* ── Trap onder de dienstenband, linksboven bij Sectoren (2026-10-11) */
/* Links loopt het blauw 48px verder door en stapt dan onder 45 graden
   omhoog naar rechts. Zo zit de trap linksboven in de sectorsectie. */
.band {
  clip-path: polygon(0 48px, 34% 48px, calc(34% + 48px) 0, 100% 0, 100% calc(100% - 48px), calc(22% + 48px) calc(100% - 48px), 22% 100%, 0 100%);
  padding-bottom: calc(clamp(80px, 9vw, 120px) + 48px);
}
@media (max-width: 760px) {
  .band { clip-path: polygon(0 32px, 40% 32px, calc(40% + 32px) 0, 100% 0, 100% calc(100% - 32px), calc(30% + 32px) calc(100% - 32px), 30% 100%, 0 100%); padding-bottom: calc(clamp(80px, 9vw, 120px) + 32px); }
}

/* Teamblok: de kop "De mensen achter uw salarisadministratie." past niet
   in 340px, daarom een bredere linkerkolom (2026-10-11). */
@media (min-width: 1300px) { .teamblok { grid-template-columns: minmax(0, 420px) 1fr; gap: 48px; } }
@media (min-width: 821px) and (max-width: 1299px) { .teamblok { grid-template-columns: 1fr; gap: 36px; } .teamblok .sectiekop { max-width: 640px; } .teamblok .team { max-width: 860px; } }

/* Werkverdeling (2026-10-11): label "IRS controleert" in plaats van
   "Mensenwerk", en blauw in plaats van oranje. */
.rol--irs li::before { background: var(--blauw); border-color: var(--blauw); }
.rol--irs::after { content: "IRS controleert"; color: var(--blauw); background: #e6effa; }
/* Het IRS-rondje uit het logo in plaats van de letters in Outfit */
.rol__bol--irs { background: #fff; overflow: hidden; }
.rol__bol--irs img { width: 100%; height: 100%; display: block; }
/* Wit rondje met blauwe letters en een blauwe rand, zodat het niet op
   het blauwe rondje van de werkgever lijkt (2026-10-11). */
.rol__bol--irs { background: #fff; border: 2px solid var(--blauw); box-sizing: border-box; }
.rol__bol--irs img { width: 100%; height: 100%; }

/* ── Nieuwskaarten op de homepage met een blauw datumblok (2026-10-11) */
.nieuwskaart { display: grid; grid-template-columns: 110px 1fr; gap: 26px; padding: 22px; border-radius: 16px; }
.nieuwskaart:hover { border-color: var(--blauw); }
.nieuwskaart__datum { background: var(--blauw); color: #cfe0f5; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 120px; font: 600 .8rem/1.2 var(--kop); letter-spacing: .08em; text-transform: uppercase; }
.nieuwskaart__datum b { font: 700 2.8rem/1 var(--kop); color: #fff; letter-spacing: -.02em; margin-bottom: 4px; }
.nieuwskaart__tekst { display: flex; flex-direction: column; align-items: flex-start; }
.nieuwskaart__onderwerp { font: 700 .72rem/1 var(--kop); letter-spacing: .09em; text-transform: uppercase; color: var(--blauw); background: #e6effa; padding: 6px 9px; border-radius: 999px; }
.nieuwskaart h3 { font-size: 1.25rem; margin: 12px 0 6px; }
.nieuwskaart p { margin: 0 0 12px; font-size: .95rem; }
.nieuwskaart .tekstlink { margin-top: auto; padding-top: 0; }
@media (max-width: 520px) { .nieuwskaart { grid-template-columns: 76px 1fr; gap: 16px; padding: 16px; } .nieuwskaart__datum { min-height: 90px; } .nieuwskaart__datum b { font-size: 2rem; } }
/* Oproep (2026-10-11): "Liever persoonlijk contact? Bel ons op …" als zin */
.oproepband__bel { margin: 0; font-weight: 500; font-size: .95rem; color: #d9e6f7; max-width: 300px; }
.oproepband__bel svg { flex: none; color: #fff; }
.oproepband__bel a { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.oproepband__bel a:hover { text-decoration: underline; }
/* Langere oproeptitel: tekst en knoppen blijven naast elkaar */
@media (min-width: 961px) { .oproepband { flex-wrap: nowrap; } .oproepband > div:not(.oproepband__acties) { flex: 1 1 auto; max-width: 680px; } .oproepband__acties { flex: none; } }
/* De maand in het datumblok niet oranje (oude regel .nieuwskaart time) */
.nieuwskaart .nieuwskaart__datum { color: #cfe0f5; font: 600 .8rem/1.2 var(--kop); letter-spacing: .08em; }

/* "En nog veel meer sectoren": één blok in een andere stijl, over de
   volle breedte onder de tegels (2026-10-12). */
.sectortegel--meer { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 22px; padding: 24px 28px; background: var(--blauw); border-color: var(--blauw); color: #d9e6f7; overflow: hidden; }
.sectortegel--meer::after { content: ""; position: absolute; width: 320px; aspect-ratio: 1; right: -90px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08) 0 54%, transparent 54.2%), radial-gradient(circle, transparent 0 60%, rgba(255,255,255,.06) 60.2% 70%, transparent 70.2%); pointer-events: none; }
.sectortegel--meer:hover { border-color: var(--blauw-diep); background: var(--blauw-diep); }
.sectortegel--meer .sectortegel__ic svg { margin: 0; background: rgba(255,255,255,.14); color: #fff; }
.sectortegel--meer:hover .sectortegel__ic svg { background: rgba(255,255,255,.2); }
.sectortegel--meer > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sectortegel--meer b { color: #fff; font-size: 1.2rem; padding: 0; }
.sectortegel--meer > div span { font-size: .95rem; color: #d9e6f7; }
.sectortegel--meer .sectortegel__knop { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; flex: none; background: #fff; color: var(--blauw); font: 600 .95rem/1 var(--kop); padding: 13px 18px; border-radius: 8px; white-space: nowrap; }
.sectortegel--meer .sectortegel__knop svg { position: static; width: 14px; height: 14px; opacity: 1; color: var(--blauw); }
@media (max-width: 760px) { .sectortegel--meer { flex-direction: column; align-items: flex-start; } }

/* Sectorpagina: inleiding met "Wat u van ons krijgt" ernaast (2026-10-12) */
.sectorintro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.sectorintro__tekst p { max-width: 62ch; margin: 0 0 16px; }
.sectorintro__tekst .sectiekop { margin-bottom: 22px; }
.sectorintro__krijgt { background: var(--grond); border-radius: 16px; padding: 28px 30px; }
.sectorintro__krijgt h3 { font-size: 1.15rem; margin: 0 0 14px; }
@media (max-width: 960px) { .sectorintro { grid-template-columns: 1fr; gap: 32px; } }

/* Paginakop met de grote blauwe schijf: geen trap, die sneed een hap uit
   de cirkel (2026-10-12). De schijf breekt het ritme daar zelf al. */
.paginakop--rechts, .paginakop.paginakop--rechts { clip-path: none; padding-bottom: clamp(56px, 7vw, 92px); }
@media (max-width: 760px) { .paginakop.paginakop--rechts { clip-path: none; } }

/* ── Voet, opzet B in donker IRS-blauw (2026-10-12) ─────────────── */
/* Donkerder dan --blauw-diep maar blauwer dan het marine van DevAlp
   (#0A1F3D). Trap aan de bovenrand, IRS-rondje als watermerk. */
.voet { --voet: #072c55; --trap: 48px; position: relative; overflow: hidden; background: var(--voet); color: rgba(255,255,255,.72); padding: calc(var(--trap) + 72px) 0 0; clip-path: polygon(0 var(--trap), 62% var(--trap), calc(62% + var(--trap)) 0, 100% 0, 100% 100%, 0 100%); }
.voet__watermerk { position: absolute; width: 560px; height: 560px; right: -150px; bottom: -190px; opacity: .05; pointer-events: none; user-select: none; }
.voet__rij { position: relative; grid-template-columns: 1.3fr 1fr 1.15fr .95fr 1.25fr; gap: 36px; }
.voet h2 { font: 600 .78rem/1 var(--kop); letter-spacing: .09em; text-transform: uppercase; color: #9fc2ec; margin: 0 0 16px; }
.voet nav a, .voet__contact a { display: block; color: rgba(255,255,255,.9); padding: 4px 0; }
.voet nav a:hover, .voet__contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.voet__contact p { margin: 0 0 12px; }
.voet__regel { display: flex !important; gap: 8px; align-items: center; font-weight: 600; }
.voet__regel svg { width: 16px; height: 16px; color: #9fc2ec; flex: none; }
.voet__slot { position: relative; }
.voet__slot a:not(.voet__credit) { color: rgba(255,255,255,.65); }
.voet__slot a:not(.voet__credit):hover { color: #fff; }
@media (max-width: 1100px) { .voet__rij { grid-template-columns: 1fr 1fr 1fr; } .voet__merk { grid-column: 1 / -1; } }
@media (max-width: 640px) { .voet { --trap: 32px; } .voet__rij { grid-template-columns: 1fr 1fr; } .voet__contact { grid-column: 1 / -1; } .voet__watermerk { width: 380px; height: 380px; right: -140px; bottom: -120px; } }

/* ── Voet licht, onderbalk in het blauw van het logo (2026-10-12) ── */
.voet { --voet: var(--grond); background: var(--voet); color: var(--tekst); padding-bottom: 0; }
.voet__watermerk { opacity: .06; }
.voet h2 { color: var(--blauw); }
.voet nav a, .voet__contact a { color: var(--inkt); }
.voet nav a:hover, .voet__contact a:hover { color: var(--blauw); }
.voet__regel svg { color: var(--blauw); }
.voet__nirpa { color: var(--blauw) !important; }
.voet__nirpa svg { color: var(--blauw); }
.voet__balk { position: relative; background: var(--schijf); color: rgba(255,255,255,.8); }
.voet__balk .voet__slot { border-top: 0; color: rgba(255,255,255,.8); }
.voet__balk .voet__slot a:not(.voet__credit) { color: rgba(255,255,255,.8); }
.voet__balk .voet__slot a:not(.voet__credit):hover { color: #fff; }
.voet__balk .voet__credit { color: rgba(255,255,255,.8); }
.voet__balk .voet__credit:hover { color: #fff; }

/* Voet (2026-10-12): geen onderstreping bij hover, maar blauw en een
   klein stukje naar rechts. De actieve pagina blauw en vet, met een
   streepje ervoor. */
.voet nav a, .voet__contact a { position: relative; transition: color .2s, transform .2s; }
.voet nav a:hover, .voet__contact a:hover { text-decoration: none; color: var(--blauw); transform: translateX(3px); }
.voet nav a[aria-current="page"] { color: var(--blauw); font-weight: 700; padding-left: 14px; }
.voet nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 2px; margin-top: -1px; background: var(--blauw); border-radius: 2px; }
.voet nav a[aria-current="page"]:hover { transform: none; }
.voet__balk .voet__slot a[aria-current="page"] { color: #fff; font-weight: 700; }

/* Kruimelpad als rustige kleine tekst, zonder pilletje (2026-10-12) */
.kruimels { background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0; margin-bottom: 18px; font-size: .82rem; gap: 6px; }
.kruimels a, .kruimels span, .kruimels .kruimels__thuis { color: var(--zacht); }
.kruimels a:hover { color: var(--blauw); }
.kruimels [aria-current] { color: var(--zacht); font-weight: 500; }
.kruimels svg { width: 12px; height: 12px; opacity: .6; }
.kruimels__stap svg { width: 11px; height: 11px; }

/* Contactpagina: de icoontjes van de huidige site, wit in een blauw
   vierkant (2026-10-12). */
.contactkaart__ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 6px; background: var(--blauw); }
.contactkaart__ic svg { width: 26px !important; height: 26px !important; padding: 0 !important; background: none !important; border-radius: 0 !important; color: #fff !important; stroke-width: 1.2; }
.contactkaart__regel { grid-template-columns: 48px 1fr; }
.contactkaart__regel span.contactkaart__ic { display: grid; margin: 0; }
/* "Met de auto?" lichtblauw in plaats van oranje: IRS heeft geen oranje */
.contactkaart__navi { background: #eef4fb !important; border-color: #cfe0f5 !important; }
.contactkaart__navi svg { color: var(--blauw) !important; }

/* ── Kaartje op de contactpagina (2026-10-12) ──────────────────── */
/* Vast plaatje uit OpenStreetMap, in IRS-blauw gekleurd: geen Google,
   geen cookies. De speld staat in het midden, op het kantoor. */
.kaartje { margin: 18px 0 0; }
.kaartje > a { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--lijn); text-decoration: none; }
.kaartje > a > img { display: block; width: 100%; height: auto; aspect-ratio: 1120 / 760; object-fit: cover; transition: transform .4s; }
.kaartje > a:hover > img { transform: scale(1.03); }
.kaartje__speld { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -62px 0 0 -26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #fff; box-shadow: 0 10px 24px -8px rgba(10,38,71,.55); display: grid; place-items: center; }
.kaartje__speld img { width: 40px; height: 40px; transform: rotate(45deg); display: block; }
.kaartje__speld::after { content: ""; position: absolute; left: -9px; bottom: -9px; width: 10px; height: 10px; border-radius: 50%; background: var(--blauw); box-shadow: 0 0 0 5px rgba(15,80,150,.2); transform: rotate(45deg); }
.kaartje__label { position: absolute; left: 50%; top: 50%; margin-left: 34px; margin-top: -58px; background: #fff; color: var(--inkt); font: 700 .85rem/1 var(--kop); padding: 9px 12px; border-radius: 8px; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(10,38,71,.5); }
.kaartje__open { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; background: var(--blauw); color: #fff; font: 600 .82rem/1 var(--kop); padding: 9px 12px; border-radius: 8px; }
.kaartje__open svg { width: 12px; height: 12px; }
.kaartje figcaption { margin-top: 6px; font-size: .72rem; color: var(--zacht); text-align: right; }
.kaartje figcaption a { color: var(--zacht); }
@media (max-width: 420px) { .kaartje__label { margin-left: -70px; margin-top: 4px; } }

/* Contact op mobiel: eerst de gegevens, dan het formulier (2026-10-12) */
@media (max-width: 960px) { .contactraster .contactkaart { order: -1; } }

/* Het vinkje in de stijl van de site: afgerond vakje, blauw met wit vinkje */
.akkoord input, .keuzes input[type="checkbox"].vink {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 1px 0 0; flex: none; cursor: pointer;
  border: 2px solid #b9c6d8; border-radius: 6px; background: #fff center / 14px 14px no-repeat;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.akkoord input:hover { border-color: var(--blauw); }
.akkoord input:checked { background-color: var(--blauw); border-color: var(--blauw); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.akkoord input:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(15,80,150,.22); }
.akkoord.is-fout input { border-color: #b52a20; }
/* Contact: gegevens links, formulier rechts, evenwichtiger verdeeld */
@media (min-width: 961px) { .contactraster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; } }
@media (max-width: 960px) { .contactraster .contactkaart { order: 0; } }
/* Topbalk tussen 641 en 960px: helemaal blauw, dus ook de rechterlinks wit */
@media (max-width: 960px) { .topbalk__rechts a { color: #fff; } .topbalk__rechts svg { color: #fff; } }
/* "Met de auto?" als rustige regel onder de kaart, niet meer als kader
   tussen de contactregels (2026-10-12). */
.kaartje figcaption { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.kaartje__navi { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; line-height: 1.5; color: var(--tekst); }
.kaartje__navi svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--blauw); }
.kaartje__navi b { color: var(--inkt); }
.kaartje__bron { font-size: .72rem; color: var(--zacht); text-align: right; }
/* "Met de auto?" als strook die aan de kaart vastzit, met het adres als
   duidelijke link naar de route (2026-10-12). */
.kaartje > a { border-radius: 14px 14px 0 0; border-bottom: 0; }
.kaartje figcaption { gap: 8px; }
.kaartje__navi { gap: 14px; align-items: center; margin: 0; padding: 14px 16px; background: var(--grond); border: 1px solid var(--lijn); border-top: 0; border-radius: 0 0 14px 14px; font-size: .9rem; line-height: 1.55; }
.kaartje__navi-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; background: var(--blauw); }
.kaartje__navi-ic svg { width: 20px; height: 20px; margin: 0; color: #fff; }
.kaartje__navi b { color: var(--inkt); }
.kaartje__adres { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--blauw); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.kaartje__adres:hover { color: var(--blauw-diep); text-decoration-thickness: 2px; }
.kaartje__adres svg { width: 13px; height: 13px; flex: none; }
.kaartje figcaption a.kaartje__adres { color: var(--blauw); }

/* Desktop: de kaart vult alleen de ruimte tot de onderkant van het
   formulier, zodat beide kolommen gelijk eindigen (2026-10-12). */
@media (min-width: 961px) {
  .contactraster { align-items: stretch; }
  .contactraster .contactkaart { display: flex; flex-direction: column; }
  .contactraster .kaartje { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .contactraster .kaartje > a { flex: 1 1 0; min-height: 170px; }
  .contactraster .kaartje > a > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
}
/* Oproep: knop en belregel even breed, de belregel op twee regels (2026-10-12) */
@media (min-width: 961px) {
  .oproepband__acties { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 260px; }
  .oproepband__acties .knop { justify-content: center; }
}
.oproepband__bel { align-items: flex-start; line-height: 1.5; }
.oproepband__bel svg { margin-top: 3px; }

/* ── Nieuws (2026-10-12) ───────────────────────────────────────── */
/* Datum in een artikel blauw in plaats van oranje */
.artikel__datum { color: var(--blauw); }
/* Overzicht: hetzelfde blauwe datumblok als op de homepage */
.nieuwsregel__datum { align-self: start; width: 96px; min-height: 104px; padding: 0; justify-content: center; align-items: center; text-align: center; background: var(--blauw); color: #cfe0f5; border-radius: 12px; font: 600 .76rem/1.2 var(--kop); letter-spacing: .08em; text-transform: uppercase; }
.nieuwsregel__datum b { font: 700 2.5rem/1 var(--kop); color: #fff; letter-spacing: -.02em; margin-bottom: 4px; }
@media (max-width: 640px) {
  .nieuwsregel__datum { flex-direction: column; width: 72px; min-height: 80px; gap: 0; }
  .nieuwsregel__datum b { font-size: 1.8rem; margin-bottom: 2px; }
}
/* Artikel: onderwerp, datum en leestijd onder de titel */
.artikelmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font: 600 .85rem/1 var(--kop); color: var(--zacht); }
.artikelmeta time { color: var(--blauw); }
/* Artikel: de eerste alinea als inleiding, groter en donkerder (2026-10-12) */
.artikel .lopend > p:first-child { font-size: 1.22rem; line-height: 1.6; color: var(--inkt); margin-bottom: 28px; }

/* ── Nieuwsartikel leesbaar (2026-10-12) ───────────────────────── */
.leesbalk { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 200; pointer-events: none; }
.leesbalk span { display: block; height: 100%; background: var(--blauw-licht); transform: scaleX(0); transform-origin: 0 50%; transition: transform .1s linear; }
.artikel { grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; }
.lopend--artikel { max-width: 68ch; font-size: 1.08rem; line-height: 1.8; color: var(--tekst); }
.lopend--artikel h2 { position: relative; font-size: 1.6rem; line-height: 1.25; margin: 2.2em 0 .7em; padding-top: 18px; scroll-margin-top: 150px; }
.lopend--artikel h2::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 3px; border-radius: 3px; background: var(--blauw); }
.lopend--artikel h3 { font-size: 1.18rem; color: var(--inkt); margin: 1.8em 0 .4em; }
.lopend--artikel ul { list-style: none; padding-left: 0; }
.lopend--artikel ul li { position: relative; padding-left: 26px; }
.lopend--artikel ul li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--blauw); }
.lopend--artikel strong { color: var(--inkt); }
.lopend--artikel p:has(> strong:only-child) { display: inline-block; padding: 12px 18px; background: #eef4fb; border: 1px solid #cfe0f5; border-radius: 10px; font-family: var(--kop); font-size: 1.2rem; letter-spacing: .02em; }
/* Inleiding: alleen de eerste alinea na "In het kort" of bovenaan */
.artikel .lopend > p:first-child, .artikel .inhetkort + p { font-size: 1.22rem; line-height: 1.65; color: var(--inkt); margin-bottom: 28px; }
.inhetkort { background: var(--grond); border-left: 4px solid var(--blauw); border-radius: 0 14px 14px 0; padding: 22px 26px 12px; margin-bottom: 36px; }
.inhetkort__kop { display: flex; align-items: center; gap: 10px; margin: 0 0 10px !important; font: 700 .78rem/1 var(--kop); letter-spacing: .09em; text-transform: uppercase; color: var(--blauw); }
.inhetkort__kop svg { width: 18px; height: 18px; }
.inhetkort ul li { padding-left: 32px; font-size: 1rem; line-height: 1.6; margin-bottom: .7em; }
.inhetkort ul li::before { display: none; }
.vooru { position: relative; overflow: hidden; margin-top: 48px; padding: 32px; border-radius: 18px; background: var(--blauw); color: #d9e6f7; }
.vooru::after { content: ""; position: absolute; width: 300px; aspect-ratio: 1; right: -110px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08) 0 54%, transparent 54.2%), radial-gradient(circle, transparent 0 60%, rgba(255,255,255,.06) 60.2% 70%, transparent 70.2%); }
.vooru h2 { color: #fff; margin: 0 0 10px !important; padding: 0 !important; font-size: 1.45rem; }
.vooru h2::before { display: none; }
.vooru p { margin: 0 0 22px !important; color: #e6effa; position: relative; }
.vooru__acties { position: relative; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.vooru__acties > a:last-child { display: inline-flex; gap: 8px; align-items: center; color: #fff; font-weight: 700; text-decoration: none; }
.vooru__acties > a:last-child svg { width: 18px; height: 18px; }
.artikel__zij { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 22px; }
.artikeltoc { display: flex; flex-direction: column; border-left: 2px solid var(--lijn); }
.artikeltoc p { margin: 0 0 10px; padding-left: 16px; font: 700 .74rem/1 var(--kop); letter-spacing: .09em; text-transform: uppercase; color: var(--zacht); }
.artikeltoc a { margin-left: -2px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: .92rem; line-height: 1.4; color: var(--tekst); text-decoration: none; transition: color .2s, border-color .2s; }
.artikeltoc a:hover { color: var(--blauw); }
.artikeltoc a.is-actief { color: var(--blauw); font-weight: 700; border-left-color: var(--blauw); }
@media (max-width: 960px) {
  .artikel { grid-template-columns: 1fr; gap: 40px; }
  .artikel__zij { position: static; }
  .artikeltoc { display: none; }
  .lopend--artikel { font-size: 1.02rem; }
}

/* ── Oproep als blauwe band die overgaat in de footer (2026-10-12) ── */
/* Variant C uit de proef: geen losse kaart boven de footer, maar een band
   over de volle breedte in het logoblauw. De footer heeft geen trap meer,
   dat werd te druk. */
.sectie--oproep { background: var(--schijf); padding: clamp(56px, 7vw, 88px) 0; position: relative; overflow: hidden; }
.sectie--licht + .sectie--oproep { padding-top: clamp(56px, 7vw, 88px); }
.sectie--oproep .oproepband { background: none; padding: 0; border-radius: 0; box-shadow: none; overflow: visible; isolation: auto; }
.sectie--oproep .oproepband__schijf { right: -120px; top: -200px; }
.voet { clip-path: none; padding-top: 72px; }

/* ── Donkere footer met een rustige oproep erboven (2026-10-12) ─── */
/* Zoals bij DevAlp een donkere voet, maar in het eigen donkere IRS-blauw.
   De oproep erboven is lichtblauw met een blauwe knop. */
.voet { --voet: #072c55; background: var(--voet); color: rgba(255,255,255,.72); border-top: 0; }
.voet h2 { color: #9fc2ec; }
.voet nav a, .voet__contact a { color: rgba(255,255,255,.9); }
.voet nav a:hover, .voet__contact a:hover { color: #fff; }
.voet nav a[aria-current="page"] { color: #fff; }
.voet nav a[aria-current="page"]::before { background: #9fc2ec; }
.voet__regel svg, .voet__nirpa svg { color: #9fc2ec; }
.voet__nirpa { color: #fff !important; }
.voet__balk { background: #05213f; border-top: 1px solid rgba(255,255,255,.08); }
.voet__balk .voet__slot, .voet__balk .voet__slot span { color: rgba(255,255,255,.6); }
.voet__balk .voet__credit { color: rgba(255,255,255,.6); }

.sectie--oproep { background: #e6effa; }
.sectie--oproep .oproepband h2 { color: var(--inkt); }
.sectie--oproep .oproepband p { color: var(--tekst); }
.sectie--oproep .oproepband__schijf { opacity: .35; }
.sectie--oproep .knop--wit { background: var(--blauw); color: #fff; border-color: var(--blauw); }
.sectie--oproep .knop--wit:hover { background: var(--blauw-diep); }
.sectie--oproep .knop--wit svg { color: #fff; }
.sectie--oproep .oproepband__bel { color: var(--tekst); }
.sectie--oproep .oproepband__bel a { color: var(--blauw); }
.sectie--oproep .oproepband__bel svg { color: var(--blauw); }

/* Oproep dunner zoals bij DevAlp, en de trap terug aan de bovenrand van
   de donkere footer (2026-10-12). De footer schuift 48px over de oproep,
   zodat in de stap het lichtblauw van de oproep te zien is. */
.sectie--oproep, .sectie--licht + .sectie--oproep { padding: clamp(36px, 4vw, 56px) 0 calc(clamp(36px, 4vw, 56px) + 48px); }
.sectie--oproep .oproepband h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: 8px; }
.sectie--oproep .oproepband p { max-width: 70ch; }
@media (min-width: 961px) { .sectie--oproep .oproepband > div:not(.oproepband__acties) { max-width: 760px; } }
.voet { position: relative; z-index: 1; margin-top: -48px; padding-top: calc(48px + 64px); clip-path: polygon(0 48px, 62% 48px, calc(62% + 48px) 0, 100% 0, 100% 100%, 0 100%); }
@media (max-width: 640px) {
  .sectie--oproep, .sectie--licht + .sectie--oproep { padding-bottom: calc(36px + 32px); }
  .voet { margin-top: -32px; padding-top: calc(32px + 48px); clip-path: polygon(0 32px, 55% 32px, calc(55% + 32px) 0, 100% 0, 100% 100%, 0 100%); }
}

/* Footer in IRS-blauw (2026-10-12, proef op verzoek): --blauw met de
   onderbalk in --blauw-diep. */
.voet { --voet: var(--blauw); background: var(--voet); color: rgba(255,255,255,.78); }
.voet h2 { color: #bcd6f5; }
.voet__regel svg, .voet__nirpa svg { color: #bcd6f5; }
.voet nav a[aria-current="page"]::before { background: #bcd6f5; }
.voet__balk { background: var(--blauw-diep); border-top: 0; }
.voet__balk .voet__slot, .voet__balk .voet__slot span, .voet__balk .voet__credit { color: rgba(255,255,255,.7); }

/* Het hoekje zit nu aan de onderkant van de oproep in plaats van aan de
   bovenkant van de footer (2026-10-12). De oproep hangt 48px over de
   footer: links loopt het lichtblauw door, dan stapt het schuin omhoog. */
.voet { margin-top: 0; padding-top: 72px; clip-path: none; z-index: 0; }
.sectie--oproep { position: relative; z-index: 1; margin-bottom: -48px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(38% + 48px) calc(100% - 48px), 38% 100%, 0 100%); }
.voet { padding-top: calc(72px + 48px); }
@media (max-width: 640px) {
  .voet { margin-top: 0; clip-path: none; padding-top: calc(48px + 32px); }
  .sectie--oproep { margin-bottom: -32px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(45% + 32px) calc(100% - 32px), 45% 100%, 0 100%); }
}
.sectie--oproep .oproepband__schijf { display: none; }

/* Hoekje tussen de vragen en de oproep, niet bij de footer (2026-10-12).
   De oproep begint links 48px lager en stapt schuin omhoog; de footer
   sluit recht aan. */
.sectie--oproep, .sectie--licht + .sectie--oproep { margin-bottom: 0; padding: calc(clamp(36px, 4vw, 56px) + 48px) 0 clamp(36px, 4vw, 56px); clip-path: polygon(0 48px, 38% 48px, calc(38% + 48px) 0, 100% 0, 100% 100%, 0 100%); }
.voet { padding-top: 72px; }
@media (max-width: 640px) {
  .sectie--oproep, .sectie--licht + .sectie--oproep { margin-bottom: 0; padding: calc(36px + 32px) 0 36px; clip-path: polygon(0 32px, 45% 32px, calc(45% + 32px) 0, 100% 0, 100% 100%, 0 100%); }
  .voet { padding-top: 56px; }
}