/*
 * OvergangInzicht – de stijl van de hele site. Eén raster (1280 breed), alles links, vaste maten.
 * Tekstmaten: 96 kop startpagina, 72 kop overige pagina's, 52 sectiekop, 26 subkop, 21 inleiding, 17 tekst, 15 klein.
 * Goud alleen in logo, accentwoord, hoofdknop en lijstteken.
 */
:root {
  --navy: #071B33;
  --navy-licht: #12335A;
  --gold: #C7A04A;
  --gold-licht: #DDBA62;
  --gold-donker: #9B7628;
  --wit: #FFFFFF;
  --vlak: #F4F3EE;
  --tekst: #2A3644;
  --klein: #5A6573;
  --lijn: #E4E3DD;
  --op-navy: #C9D2DD;
  --lijn-navy: rgba(234, 240, 245, .2);
  --gutter: 32px;
  --ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Ccircle cx='26' cy='26' r='23' fill='none' stroke='%23C7A04A' stroke-width='3.4'/%3E%3Ccircle cx='30.5' cy='21.5' r='14' fill='none' stroke='%23C7A04A' stroke-width='3'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--wit); color: var(--navy); font-family: "Hanken Grotesk", Arial, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--gold-donker); outline-offset: 3px; }
[id] { scroll-margin-top: 90px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap, .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.sectie, .section { padding-block: 112px; }
.vlak, .section.soft { background: var(--vlak); }

/* Vaste tekstmaten */
h1 { font-size: 96px; font-weight: 800; line-height: .98; letter-spacing: -0.04em; }
h2 { font-size: 52px; font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
h3 { font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.inleiding, .lead { font-size: 21px; line-height: 1.5; color: var(--tekst); }
.klein { font-size: 15px; line-height: 1.5; color: var(--klein); }
.tekst { color: var(--tekst); }
.accent { color: var(--gold-donker); }
.bovenregel, .eyebrow { display: block; margin-bottom: 18px; font-size: 15px; font-weight: 500; color: var(--klein); }
.section p, .sectie p { color: var(--tekst); }
.section p + p { margin-top: 16px; }

/* Knoppen */
.knoppen, .hero-actions, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.knop, .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 28px; border: 2px solid var(--navy); border-radius: 999px; background: var(--navy); color: var(--wit); font: 700 16px/1.2 "Hanken Grotesk", Arial, sans-serif; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.knop:hover, .btn:hover { background: var(--navy-licht); border-color: var(--navy-licht); }
.knop--goud, .page-hero .btn-primary { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.knop--goud:hover, .page-hero .btn-primary:hover { background: var(--gold-licht); border-color: var(--gold-licht); }
.knop--lijn, .btn-secondary, .btn--outline { background: transparent; color: var(--navy); }
.knop--lijn:hover, .btn-secondary:hover, .btn--outline:hover { background: var(--navy); border-color: var(--navy); color: var(--wit); }
.knop--wit, .btn-light { background: var(--wit); border-color: var(--wit); color: var(--navy); }
.knop--wit:hover, .btn-light:hover { background: var(--vlak); border-color: var(--vlak); }
.knop--lijn-wit, .cta .btn-secondary { background: transparent; border-color: var(--wit); color: var(--wit); }
.knop--lijn-wit:hover, .cta .btn-secondary:hover { background: var(--wit); border-color: var(--wit); color: var(--navy); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.link, .text-link, .more { font-weight: 700; text-underline-offset: 4px; }

/* Amplitia-link in de kleuren van hun logo, vet, en oppoppen bij aanwijzen */
.amplitia { display: inline-block; color: #542E84; font-weight: 800; text-decoration: none; transition: transform .2s ease; }
.amplitia .t { color: #C4077D; }
.amplitia:hover, .amplitia:focus-visible { transform: translateY(-2px) scale(1.08); }

/* Kopbalk */
.kopbalk { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--lijn); }
.balk { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; }
.merk { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.merk svg { width: 42px; height: 42px; flex: none; fill: none; stroke: var(--gold-licht); stroke-width: 2.8; }
.merk strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: .06em; line-height: 1.1; }
.merk small { display: block; margin-top: 4px; font-size: 12px; line-height: 1; color: var(--klein); }
.hoofdmenu { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
.hoofdmenu a { text-decoration: none; white-space: nowrap; }
.hoofdmenu a:hover { text-decoration: underline; text-underline-offset: 5px; }
.balk-rechts { display: flex; align-items: center; gap: 20px; }
.balk .knop { min-height: 46px; padding: 10px 20px; font-size: 15px; white-space: nowrap; }
.menu { display: none; min-height: 44px; padding: 8px 18px; border: 2px solid var(--navy); border-radius: 999px; background: none; color: var(--navy); font: 700 15px "Hanken Grotesk", Arial, sans-serif; cursor: pointer; }
.mobile-panel { display: none; padding-bottom: 20px; }
.mobile-panel.is-open { display: grid; gap: 2px; }
.mobile-panel a:not(.knop) { padding-block: 10px; font-weight: 500; text-decoration: none; }
.mobile-panel .knop { margin-top: 10px; }

/* Taalkeuze: altijd zichtbaar, de actieve taal vet */
.taal { display: flex; align-items: center; gap: 7px; font-size: 15px; white-space: nowrap; }
.taal a { padding: 4px 2px; font-weight: 500; color: var(--klein); text-decoration: none; }
.taal a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.taal a[aria-current] { font-weight: 800; color: var(--navy); text-decoration: none; }
.taal span { color: var(--klein); }

/* Opening startpagina */
.opening { padding-block: 72px 112px; }
.opening-raster { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.bovenregel-kop { margin-bottom: 22px; }
.opening .inleiding { margin-top: 26px; max-width: 32em; }
.opening .inleiding strong { color: var(--navy); font-weight: 700; }
.opening .knoppen { margin-top: 32px; }
.opening .route { margin-top: 22px; font-size: 15px; color: var(--klein); }
.opening .route a { color: var(--navy); font-weight: 700; text-decoration: none; margin-left: 4px; white-space: nowrap; }
.opening .route a:hover { text-decoration: underline; text-underline-offset: 4px; }
.portret { position: relative; overflow: hidden; border-radius: 20px; background: var(--navy); }
.portret img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.portret::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(to top, rgba(7, 27, 51, .94) 28%, rgba(7, 27, 51, 0)); }
.portret figcaption { position: absolute; inset: auto 0 0; z-index: 1; padding: 28px; color: var(--wit); }
.portret strong { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.portret span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: #E3E9F0; }

/* Sectiekop: kop links, korte toelichting rechts */
.kopregel { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; margin-bottom: 44px; }
.kopregel .klein { font-size: 17px; color: var(--tekst); }
.kopregel--vol { grid-template-columns: minmax(0, 1fr); max-width: 980px; }

/* Vlakken in drie kolommen */
.drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tegel { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 20px; background: var(--vlak); }
.vlak .tegel { background: var(--wit); }
.tegel p { color: var(--tekst); }

/* Vier kolommen: stappen en de app per rol */
.vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.app-blok { margin-top: 88px; }
.uitgangspunten { margin-top: 56px; }
.section.soft .tegel { background: var(--wit); }

/* Cijfers: per kolom gecentreerd */
.cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cijfer { padding-top: 20px; border-top: 3px solid var(--navy); text-align: center; }
.cijfer strong { display: block; font-size: 52px; font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cijfer > span { display: block; max-width: 24em; margin: 12px auto 0; color: var(--tekst); }
.bronnen { margin-top: 32px; text-align: center; }

/* Twee kolommen: kop links, inhoud rechts */
.twee { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
.twee .rechts > * + * { margin-top: 18px; }
.nadruk { color: var(--navy); font-weight: 700; }

/* Stappen */
.stap { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 3px solid var(--navy); }
.stap .nr { font-size: 15px; font-weight: 500; color: var(--klein); }
.stap p { color: var(--tekst); }

/* Groot vlak organisatiescan */
.scanvlak { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; padding: 56px; border-radius: 24px; background: var(--navy); color: var(--wit); }
.scanvlak .bovenregel { color: var(--op-navy); }
.scanvlak .inleiding { margin-top: 18px; color: var(--op-navy); }
.scanvlak p { color: var(--op-navy); }
.scanvlak .vraag-kort { margin-bottom: 10px; color: var(--wit); font-weight: 700; }
.scanvlak .feiten { margin-block: 16px 22px; font-size: 15px; }

/* Rijen */
.rijen { border-top: 3px solid var(--navy); }
.rijen > div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--lijn); }
.rijen dt { font-weight: 700; }
.rijen dd { color: var(--tekst); }

/* Lijsten met ring-in-ring */
.ringen { border-top: 3px solid var(--navy); }
.ringen li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--lijn); color: var(--tekst); }
.ringen li::before { content: ""; position: absolute; left: 0; top: 17px; width: 20px; height: 20px; background: var(--ring) center / contain no-repeat; }
.vlak .ringen li { border-bottom-color: #DEDDD5; }
.ticks { margin-block: 22px; }
.ticks li { position: relative; margin-block: 10px; padding-left: 32px; color: var(--tekst); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .25em; width: 20px; height: 20px; background: var(--ring) center / contain no-repeat; }

/* Over Brigitte: alles onder elkaar */
.verhaal > .bovenregel, .verhaal > h2, .verhaal > .inleiding, .verhaal > .ringen { max-width: 860px; }
.verhaal > .inleiding { margin-top: 18px; }
.verhaal > h2 + .inleiding { margin-top: 22px; }
.verhaal > .ringen { margin-top: 32px; }

/* Voor vrouwen */
.vrouwen .inleiding { margin-top: 18px; }
.vrouwen .ringen { margin-top: 26px; }
.vrouwen .tegel { gap: 14px; }
.vrouwen .tegel .knoppen { margin-top: 6px; }
.brug { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: 15px; line-height: 1.5; color: var(--tekst); }

/* Vragen */
.vragen, .faq { border-top: 3px solid var(--navy); }
.faq { max-width: 860px; margin-top: 32px; }
.vragen details, .faq details { border-bottom: 1px solid var(--lijn); }
.vragen summary, .faq summary { display: flex; justify-content: space-between; gap: 20px; padding-block: 18px; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; }
.vragen summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.vragen summary::after, .faq summary::after { content: "+"; color: var(--klein); font-size: 24px; font-weight: 400; line-height: 1; }
.vragen details[open] summary::after, .faq details[open] summary::after { content: "\2212"; }
.vragen details p, .faq details p { padding-bottom: 20px; color: var(--tekst); }

/* Afsluiting en voet */
.slot { background: var(--navy); color: var(--wit); padding-block: 96px 40px; }
.slot .bovenregel { color: var(--op-navy); }
.slot .knoppen { margin-top: 28px; }
.slot-raster { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.kaart { padding: 32px; border-radius: 20px; background: var(--navy-licht); }
.kaart strong { display: block; margin-bottom: 12px; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.kaart .bovenregel { margin: -8px 0 14px; }
.kaart a { display: block; padding-block: 3px; text-decoration: none; }
.kaart a:hover { text-decoration: underline; text-underline-offset: 4px; }
.voet-los { background: var(--navy); color: var(--wit); padding-block: 8px 40px; }
.voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--lijn-navy); font-size: 14px; color: var(--op-navy); }
.voet-los .voet { margin-top: 0; border-top: 0; }
.voet .merk strong { color: var(--wit); }
.voet .merk small { color: var(--op-navy); }
.voet .merk svg { width: 36px; height: 36px; }

/* Inhoudspagina's */
.page-hero { padding-block: 72px 72px; }
.page-hero h1 { font-size: 72px; max-width: 15em; }
.page-hero .lead { margin-top: 24px; max-width: 38em; }
.page-hero .hero-actions { margin-top: 32px; }
.page-hero + .section { padding-top: 0; }
.page-hero + .section.soft { padding-top: 112px; }
.content-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
.two-col { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.section h2 { margin-bottom: 22px; }
.gold-callout { margin-block: 24px; padding: 24px 28px; border-radius: 16px; background: var(--vlak); color: var(--tekst); }
.gold-callout strong { color: var(--navy); }
.section.soft .gold-callout { background: var(--wit); }
.side-card { position: sticky; top: 104px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px; border-radius: 20px; background: var(--vlak); }
.side-card .eyebrow { margin-bottom: 0; }
.section.soft .side-card { background: var(--wit); }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 32px; }
.service { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 20px; background: var(--vlak); }
.section.soft .service { background: var(--wit); }
.content-grid .services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.content-grid .service { padding: 24px; }
.content-grid .service h3 { font-size: 21px; }
.numbered { border-top: 3px solid var(--navy); }
.numbered .step { padding-block: 22px; border-bottom: 1px solid var(--lijn); }
.numbered .step h3, .role-card h3 { margin-bottom: 8px; }
.role-card { border-top: 3px solid var(--navy); }
.role-card > div { padding-block: 22px; border-bottom: 1px solid #DEDDD5; }
.portrait-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: 20px; }
.portrait-fallback { display: none; aspect-ratio: 4 / 5; place-items: center; padding: 30px; border-radius: 20px; background: var(--vlak); text-align: center; }
.cta { background: var(--navy); color: var(--wit); }
.cta .container { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
.cta .eyebrow { color: var(--op-navy); }
.cta h2 { margin-bottom: 0; color: var(--wit); }
.cta p, .cta .lead { color: var(--op-navy); }
.cta .hero-actions { margin-top: 24px; }
.source-note { margin-top: 16px; font-size: 15px; color: var(--klein); }
.legal { max-width: 860px; }
.legal h2 { margin-top: 40px; margin-bottom: 12px; padding-top: 32px; border-top: 1px solid var(--lijn); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.legal h3 { margin-top: 24px; margin-bottom: 8px; font-size: 20px; }
.legal ul { list-style: disc; margin-block: 12px; padding-left: 22px; }
.legal li { margin-block: 8px; color: var(--tekst); }

/* Contact en formulieren */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: start; }
.contact-details { padding: 40px; border-radius: 20px; background: var(--navy); color: var(--wit); }
.contact-details .eyebrow { color: var(--op-navy); }
.contact-details h2 { color: var(--wit); font-size: 36px; }
.contact-details p, .contact-details span { color: var(--op-navy); }
.contact-list { display: grid; gap: 18px; margin-top: 28px; }
.contact-item small { display: block; font-size: 14px; font-weight: 700; color: var(--wit); }
.contact-details a { color: var(--wit); }
.info-card, .lead-box, .lead-blok { padding: 40px; border-radius: 20px; background: var(--vlak); }
.info-card h2, .lead-box h2 { font-size: 36px; }
.lead-box h2 { margin: 0 0 8px; }
.lead-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.lead-field { display: flex; flex-direction: column; gap: 6px; }
.lead-field.full { grid-column: 1 / -1; }
.lead-field label { font-size: 15px; font-weight: 700; }
.lead-field input, .lead-field select { width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid rgba(7, 27, 51, .4); border-radius: 8px; background: var(--wit); color: var(--navy); font: 16px "Hanken Grotesk", Arial, sans-serif; }
.lead-field input:focus, .lead-field select:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 1px var(--navy); }
.lead-field input:user-invalid, .lead-field select:user-invalid { border-color: #9E4C45; }
.lead-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--tekst); }
.lead-consent input { margin-top: 4px; }
.lead-submit, .lead-status { grid-column: 1 / -1; }
.lead-status { min-height: 1.4em; font-size: 15px; }
.lead-status.success { color: #236147; font-weight: 700; }
.lead-status.error { color: #8A3030; font-weight: 700; }
.mail-fallback { display: inline-block; margin-top: 4px; text-decoration: underline; text-underline-offset: 3px; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* Overgangsscan */
.scan-shell { max-width: 900px; margin-inline: auto; padding: 72px var(--gutter) 112px; }
.scan-top { margin-bottom: 28px; }
.scan-top h1 { font-size: 52px; line-height: 1.04; letter-spacing: -0.03em; }
.scan-top .lead { margin-top: 18px; }
.scan-privacy-note { margin-top: 20px; font-size: 15px; color: var(--tekst); }
.scan-card { padding: 40px; border-radius: 20px; background: var(--vlak); }
.scan-progress-line { height: 4px; overflow: hidden; background: #DEDDD5; }
.scan-progress-bar { width: 0; height: 100%; background: var(--navy); transition: width .2s ease; }
.scan-progress-text { display: flex; justify-content: space-between; gap: 15px; margin-top: 10px; font-size: 15px; color: var(--klein); }
.scan-progress-text > span:first-child { white-space: nowrap; }
.scan-question { margin-block: 28px 20px; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.scan-question:focus { outline: none; }
.scan-options { border-top: 1px solid #DEDDD5; }
.scan-option { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 14px 6px; border: 0; border-bottom: 1px solid #DEDDD5; background: none; color: var(--navy); font: 500 17px/1.4 "Hanken Grotesk", Arial, sans-serif; text-align: left; cursor: pointer; }
.scan-option:hover { background: rgba(7, 27, 51, .05); }
.scan-option[aria-pressed=true] { font-weight: 700; }
.scan-option-dot { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border: 2px solid rgba(7, 27, 51, .35); border-radius: 50%; }
.scan-option[aria-pressed=true] .scan-option-dot { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 4px var(--vlak); }
.scan-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.scan-back, .scan-next { min-height: 52px; padding: 12px 26px; border: 2px solid var(--navy); border-radius: 999px; font: 700 16px "Hanken Grotesk", Arial, sans-serif; cursor: pointer; }
.scan-back { background: transparent; color: var(--navy); }
.scan-next { margin-left: auto; background: var(--navy); color: var(--wit); }
.scan-next:disabled { opacity: .35; cursor: not-allowed; }
.scan-result { display: none; }
.scan-result.is-visible { display: block; }
.result-score { margin-block: 6px 12px; font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.result-band { margin-bottom: 12px; font-size: 36px; }
.result-band:focus { outline: none; }
.result-copy { font-size: 19px; color: var(--tekst); }
.result-disclaimer { margin-top: 12px; font-size: 15px; color: var(--klein); }
.lead-divider { margin-block: 28px; border: 0; border-top: 1px solid #DEDDD5; }
.scan-card .app-cta, .scan-card .lead-box { background: var(--wit); }
.app-cta { margin-block: 24px 8px; padding: 26px 28px; border-radius: 16px; background: var(--vlak); }
.app-cta h3 { margin-bottom: 8px; }
.app-cta p { margin-bottom: 14px; color: var(--tekst); }
.app-cta .btn { margin-right: 12px; }
.brug-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.brug-tekst { max-width: 46em; margin-bottom: 20px; }
.scan-restart { margin-top: 18px; border: 0; background: none; color: var(--navy); font: 700 16px "Hanken Grotesk", Arial, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* Organisatiescan */
.scan-pagina { max-width: 900px; padding-top: 72px; padding-bottom: 112px; }
.scan-pagina .label { font-size: 15px; font-weight: 500; color: var(--klein); }
.scan-pagina .label--ink { font-weight: 700; color: var(--navy); }
.scan-pagina .lede { font-size: 21px; line-height: 1.5; color: var(--tekst); }
.scan-pagina .body { color: var(--tekst); }
.scan-pagina .small { font-size: 15px; line-height: 1.5; color: var(--klein); }
.scan-pagina .h1 { font-size: 52px; font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
.scan-pagina .h2 { font-size: 36px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.scan-pagina .h3 { font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.scan-intro { display: grid; gap: 16px; margin-bottom: 40px; }
.tip { padding: 16px 20px; border-radius: 12px; background: var(--vlak); font-size: 15px; color: var(--tekst); }
.scan-vak { padding: 40px; border-radius: 20px; background: var(--vlak); }
.scan-voortgang .label { display: flex; justify-content: space-between; gap: 16px; }
.scan-voortgang .lijn { height: 4px; margin-top: 12px; background: #DEDDD5; }
.scan-voortgang .lijn > div { width: 0; height: 100%; background: var(--navy); transition: width .2s ease; }
.vraag { margin-block: 28px 20px; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; outline: none; }
.opties { display: grid; border-top: 1px solid #DEDDD5; }
.optie { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 6px; border: 0; border-bottom: 1px solid #DEDDD5; background: none; color: var(--navy); font: 500 17px/1.4 "Hanken Grotesk", Arial, sans-serif; text-align: left; cursor: pointer; }
.optie:hover { background: rgba(7, 27, 51, .05); }
.optie-stip { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; border: 1.5px solid rgba(7, 27, 51, .35); border-radius: 50%; }
.optie[aria-pressed="true"] { font-weight: 700; }
.optie[aria-pressed="true"] .optie-stip { border-color: var(--navy); background: var(--navy); }
.optie[aria-pressed="true"] .optie-stip::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wit); }
.optie--onbekend { color: var(--klein); }
.scan-knoppen { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.uitslag-kop { display: grid; gap: 14px; padding-bottom: 28px; border-bottom: 3px solid var(--navy); }
.uitslag-kop h2 { outline: none; }
.uitslag-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 28px; }
.uitslag-raster h3 { margin-bottom: 12px; }
.onderdelen, .stappen { border-top: 3px solid var(--navy); }
.onderdelen li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding-block: 14px; border-bottom: 1px solid var(--lijn); }
.onderdelen .ond-naam { font-weight: 700; }
.onderdelen .meter { display: flex; gap: 4px; }
.onderdelen .meter span { width: 22px; height: 6px; background: var(--lijn); }
.onderdelen .meter span.aan { background: var(--navy); }
.onderdelen .ond-antwoord { grid-column: 1 / -1; font-size: 15px; color: var(--klein); }
.onderdelen li.is-aandacht .ond-naam::after { content: " · " attr(data-label); font-size: 15px; font-weight: 600; color: var(--gold-donker); }
.onbekend { margin-top: 12px; }
.stappen li { padding-block: 14px; border-bottom: 1px solid var(--lijn); line-height: 1.55; }
.knop-als-link { padding: 0; border: 0; background: none; color: var(--navy); font: 700 16px "Hanken Grotesk", Arial, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.print-voet, .print-kop { display: none !important; }
.lead-blok { display: grid; gap: 12px; margin-top: 56px; }
.lead-blok .lead-form { margin-top: 8px; }

/* Oppoppen bij aanwijzen */
@media (hover: hover) {
  .drie .tegel, .drie .stap, .vier .tegel, .vier .stap, .cijfer, .service, .numbered .step, .role-card > div { transition: transform .25s ease, box-shadow .25s ease; }
  .drie .tegel:hover, .vier .tegel:hover, .service:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(7, 27, 51, .1); }
  .drie .stap:hover, .vier .stap:hover, .cijfer:hover, .numbered .step:hover, .role-card > div:hover { transform: translateY(-6px); }
}

/* Toestemmingsbanner (door script.js gemaakt): klein in de hoek */
.oi-consent { position: fixed; z-index: 9999; right: 16px; bottom: 16px; width: calc(100% - 32px); max-width: 420px; padding: 20px; border-radius: 16px; background: var(--wit); box-shadow: 0 12px 40px rgba(7, 27, 51, .18); }
.oi-consent p { margin: 0; font-size: 14px; line-height: 1.45; }
.oi-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.oi-consent button { min-height: 42px; padding: 9px 16px; border-radius: 999px; font: 700 14px "Hanken Grotesk", Arial, sans-serif; cursor: pointer; }
.oi-consent-accept { border: 2px solid var(--navy); background: var(--navy); color: var(--wit); }
.oi-consent-decline { border: 2px solid var(--navy); background: var(--wit); color: var(--navy); }

@media (max-width: 1180px) {
  .hoofdmenu, .balk .knop { display: none; }
  .menu { display: inline-flex; align-items: center; }
  h1 { font-size: 72px; }
  .page-hero h1 { font-size: 60px; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  body { font-size: 16.5px; }
  .sectie, .section { padding-block: 72px; }
  .opening { padding-block: 40px 72px; }
  h1 { font-size: 52px; }
  h2 { font-size: 36px; }
  h3 { font-size: 23px; }
  .inleiding, .lead, .scan-pagina .lede { font-size: 19px; }
  .opening-raster, .kopregel, .twee, .scanvlak, .slot-raster, .drie, .vier, .cijfers,
  .content-grid, .two-col, .split, .cta .container, .contact-grid, .uitslag-raster { grid-template-columns: minmax(0, 1fr); }
  .opening-raster, .kopregel, .twee, .scanvlak, .slot-raster, .content-grid, .two-col, .split, .cta .container { gap: 28px; }
  .drie, .vier { gap: 14px; }
  .app-blok { margin-top: 56px; }
  .uitgangspunten { margin-top: 32px; }
  .cijfers { gap: 28px; }
  .kopregel { margin-bottom: 32px; }
  .tegel, .kaart, .service, .side-card { padding: 26px; }
  .scanvlak { padding: 30px 24px; border-radius: 20px; }
  .cijfer strong { font-size: 44px; }
  .knoppen .knop, .hero-actions .btn { width: 100%; }
  .slot { padding-block: 72px 32px; }
  .rijen > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .voet { margin-top: 48px; }
  .side-card { position: static; }
  .content-grid .services { grid-template-columns: minmax(0, 1fr); }
  .page-hero { padding-block: 40px 56px; }
  .page-hero h1 { font-size: clamp(30px, 9.2vw, 52px); letter-spacing: -0.03em; overflow-wrap: break-word; }
  .page-hero + .section.soft { padding-top: 72px; }
  .contact-details, .info-card, .lead-box, .lead-blok, .scan-card, .scan-vak { padding: 26px 22px; }
  .contact-details h2, .info-card h2, .lead-box h2 { font-size: 28px; }
  .scan-shell { padding-top: 40px; padding-bottom: 72px; }
  .scan-pagina { padding-top: 40px; padding-bottom: 72px; }
  .scan-top h1, .scan-pagina .h1 { font-size: clamp(30px, 9.2vw, 44px); }
  .scan-question, .vraag { font-size: 22px; }
  .result-score { font-size: 72px; }
  .result-band { font-size: 28px; }
  .lead-form { grid-template-columns: minmax(0, 1fr); }
  .scan-actions, .scan-knoppen { flex-direction: column-reverse; }
  .scan-back, .scan-next, .scan-knoppen .btn { width: 100%; margin-left: 0; }
  .oi-consent { right: 12px; bottom: 12px; width: calc(100% - 24px); max-width: none; padding: 14px; }
  .oi-consent p { font-size: 13px; line-height: 1.35; }
  .oi-consent-actions { flex-wrap: nowrap; gap: 8px; margin-top: 10px; }
  .oi-consent button { flex: 1; min-height: 40px; padding: 8px 10px; font-size: 13px; line-height: 1.15; }
}
@media (max-width: 480px) {
  .balk { gap: 10px; }
  .balk-rechts { gap: 10px; }
  .merk { gap: 8px; }
  .merk svg { width: 34px; height: 34px; }
  .merk strong { font-size: 14px; letter-spacing: .03em; }
  .merk small { font-size: 10px; }
  .menu { padding-inline: 12px; }
}
@media (max-width: 360px) {
  h1 { font-size: 44px; }
  h2 { font-size: 30px; overflow-wrap: break-word; }
  .merk small { display: none; }
  .merk svg { width: 28px; height: 28px; }
  .merk strong { font-size: 12px; letter-spacing: 0; }
  .balk, .balk-rechts { gap: 8px; }
  .taal { gap: 4px; font-size: 14px; }
  .menu { min-height: 40px; padding-inline: 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knop, .btn, .amplitia, .drie .tegel, .drie .stap, .vier .tegel, .vier .stap, .cijfer, .service, .numbered .step, .role-card > div { transition: none; }
  .drie .tegel:hover, .drie .stap:hover, .vier .tegel:hover, .vier .stap:hover, .cijfer:hover, .service:hover, .numbered .step:hover, .role-card > div:hover { transform: none; box-shadow: none; }
  .amplitia:hover, .amplitia:focus-visible { transform: none; text-decoration: underline; }
}
@media print {
  .niet-printen, .kopbalk, .oi-consent, .voet-los, .slot { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .scan-pagina { padding: 0; max-width: none; }
  .print-voet { display: block !important; margin-top: 24px; }
  .print-kop { display: flex !important; margin-bottom: 24px; }
  .onderdelen .meter span, .print-kop svg circle { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}