{"id":54792,"date":"2025-07-27T15:41:09","date_gmt":"2025-07-27T13:41:09","guid":{"rendered":"https:\/\/inr.institute\/?page_id=54792"},"modified":"2026-08-03T08:58:41","modified_gmt":"2026-08-03T06:58:41","slug":"inr","status":"publish","type":"page","link":"https:\/\/inr.institute\/en\/inr\/","title":{"rendered":"INR"},"content":{"rendered":"\n<!-- ============================================================================\n     INR \u00b7 MOEDERPAGINA (FRAMEWORK)\n     E\u00e9n bestand. Plak dit volledig in \u00c9\u00c9N Elementor HTML-widget.\n     Alles gescoped onder .inr-framework, afgedwongen met !important.\n     Neutraal zwart\/wit met grijze blobs. Zelfde systeem als de Model-pagina.\n     INR overkoepelt twee peilers: het INR Model en INR Dynamics.\n\n     HEADING-VOLGORDE FIX (PageSpeed \"Kopelementen niet in aflopende volgorde\"):\n     De koppen in de stroming-sectie (\"Begrijpen\" en \"Bewegen\") waren <h4>,\n     terwijl de voorafgaande kop een <h2> is. Dat sloeg niveau 3 over (h2 -> h4).\n     Ze zijn nu <h3>, zodat de documentvolgorde netjes h1 -> h2 -> h3 oploopt.\n     De CSS-selector .skaart h4 is mee aangepast naar .skaart h3.\n\n     TAALAFHANKELIJK VERBERGEN (EN): drie knoppen zijn verborgen op de Engelse\n     site via class \"hide-on-en\":\n       1. \"INR en andere modellen\" (hero, ghost-knop)\n       2. \"Begrijp hoe INR zich verhoudt tot andere modellen\" (statement)\n       3. \"Meer lezen over de wetenschap\" (donker stroming-blok)\n     BELANGRIJK: de verbergregels targeten NIET de globale body.lang-en, maar\n     een class lang-en die de widget zelf op zijn eigen root zet (zie script).\n     Een regel die met \"body\" begint reikt buiten de widget en breekt de\n     TranslatePress-editor (het blok is dan niet meer aanklikbaar om te\n     vertalen). Door alles binnen .inr-framework te houden blijft de sectie\n     gewoon vertaalbaar.\n     ============================================================================ -->\n\n<style>\n\/* ---------- 1. ELEMENTOR-ONTWAPENING + ROOT ---------- *\/\n.inr-framework{\n  --ink:#0E0E12; --ink-2:#1A1A20; --grijs:#64646E; --grijs-2:#9A9AA4; --bg:#F5F5F7;\n  --lijn:rgba(14,14,18,.10); --lijn-2:rgba(14,14,18,.06);\n  --radius:24px; --maxw:1200px;\n  position:relative !important; width:100% !important; max-width:100% !important;\n  margin:0 !important; padding:0 !important; box-sizing:border-box !important;\n  color:var(--ink) !important; background:#FFFFFF !important; line-height:1.5 !important;\n  overflow-x:hidden !important; text-align:left !important;\n  -webkit-font-smoothing:antialiased !important;\n}\n.inr-framework, .inr-framework *, .inr-framework *::before, .inr-framework *::after{\n  box-sizing:border-box !important;\n  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;\n}\n.inr-framework h1,.inr-framework h2,.inr-framework h3,.inr-framework h4,.inr-framework p,\n.inr-framework span,.inr-framework div,.inr-framework ul,.inr-framework li,.inr-framework a{margin:0;padding:0;}\n.inr-framework ul{list-style:none !important;}\n.inr-framework a{text-decoration:none !important;color:inherit !important;}\n\n\/* ---------- TAALAFHANKELIJK VERBERGEN (EN) ----------\n   Zelfde mechanisme als op de Dynamics-pagina: lang-en wordt door de widget\n   zelf op .inr-framework gezet (zie script), NIET op body. Zo blijft de\n   selector binnen de widget en breekt hij de TranslatePress-editor niet.\n   Hogere specificiteit dan de knop-display-regels, dus het verbergen wint. *\/\n.inr-framework.lang-en .hero .knop.hide-on-en{display:none !important;}\n.inr-framework.lang-en .statement .knop.hide-on-en{display:none !important;}\n.inr-framework.lang-en .stroming .s-onder .knop.hide-on-en{display:none !important;}\n\n\/* ---------- 2. ATMOSFEER ---------- *\/\n.inr-framework .atmos{position:absolute !important;inset:0 !important;z-index:0 !important;overflow:hidden !important;pointer-events:none !important;background:transparent !important;}\n.inr-framework .blob{position:absolute !important;border-radius:50% !important;filter:blur(110px) !important;opacity:.7 !important;animation:inrf-drift 30s ease-in-out infinite !important;}\n.inr-framework .blob.a{width:600px;height:600px;background:rgba(14,14,18,.12);top:-200px;left:-180px;}\n.inr-framework .blob.b{width:540px;height:540px;background:rgba(90,90,104,.14);top:26%;right:-220px;animation-delay:-8s;}\n.inr-framework .blob.c{width:680px;height:680px;background:rgba(14,14,18,.07);top:52%;left:-240px;animation-delay:-15s;}\n.inr-framework .blob.d{width:520px;height:520px;background:rgba(90,90,104,.10);top:74%;right:-180px;animation-delay:-22s;}\n.inr-framework .blob.e{width:560px;height:560px;background:rgba(14,14,18,.06);bottom:-260px;left:30%;animation-delay:-18s;}\n@keyframes inrf-drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(46px,-34px) scale(1.08);}}\n\n\/* ---------- 3. LAYOUT-PRIMITIEVEN ---------- *\/\n.inr-framework .wrap{position:relative !important;z-index:1 !important;width:100% !important;max-width:var(--maxw) !important;margin:0 auto !important;padding:0 clamp(28px,5vw,40px) !important;}\n.inr-framework .sec{position:relative !important;z-index:1 !important;padding:120px 0 !important;}\n.inr-framework .sec.tight{padding:80px 0 !important;}\n\n\/* ---------- 4. TYPO-HELPERS ---------- *\/\n.inr-framework .eyebrow{font-size:13px !important;font-weight:600 !important;letter-spacing:.09em !important;text-transform:uppercase !important;color:var(--grijs) !important;}\n.inr-framework .grad{background:linear-gradient(115deg,#0E0E12,#54545E) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;-webkit-text-fill-color:transparent !important;}\n.inr-framework .kop{text-align:center !important;max-width:820px !important;margin:0 auto 60px !important;}\n.inr-framework .kop .eyebrow{display:block !important;margin-bottom:16px !important;}\n.inr-framework .kop h2{font-weight:600 !important;font-size:clamp(30px,4.4vw,50px) !important;letter-spacing:-.028em !important;line-height:1.08 !important;color:var(--ink) !important;margin-bottom:18px !important;}\n.inr-framework .kop p{font-size:18px !important;font-weight:300 !important;color:var(--grijs) !important;line-height:1.6 !important;}\n\n\/* ---------- 5. REVEAL ---------- *\/\n.inr-framework .rev{opacity:0;transform:translateY(38px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}\n.inr-framework .rev.in{opacity:1 !important;transform:none !important;}\n.inr-framework .d1{transition-delay:.07s;}.inr-framework .d2{transition-delay:.14s;}.inr-framework .d3{transition-delay:.21s;}\n.inr-framework .d4{transition-delay:.28s;}\n.no-js .inr-framework .rev{opacity:1 !important;transform:none !important;}\n\n\/* ---------- responsive basis ---------- *\/\n@media(max-width:820px){\n  .inr-framework{padding-left:22px !important;padding-right:22px !important;}\n  .inr-framework .wrap{padding-left:0 !important;padding-right:0 !important;}\n  .inr-framework .hero{padding-left:0 !important;padding-right:0 !important;}\n  .inr-framework .slot{padding-left:0 !important;padding-right:0 !important;}\n  .inr-framework .sec{padding:72px 0 !important;}\n  .inr-framework .blob.a{width:320px;height:320px;top:-90px;left:-100px;}\n  .inr-framework .blob.b{width:300px;height:300px;right:-140px;}\n  .inr-framework .blob.c{width:340px;height:340px;left:-120px;}\n  .inr-framework .blob.d{width:300px;height:300px;right:-120px;}\n  .inr-framework .blob.e{width:340px;height:340px;left:-60px;bottom:-160px;}\n}\n@media(prefers-reduced-motion:reduce){\n  .inr-framework .rev{opacity:1 !important;transform:none !important;transition:none !important;}\n  .inr-framework .blob{animation:none !important;}\n}\n<\/style>\n\n<div class=\"inr-framework\">\n<div class=\"atmos\"><div class=\"blob a\"><\/div><div class=\"blob b\"><\/div><div class=\"blob c\"><\/div><div class=\"blob d\"><\/div><div class=\"blob e\"><\/div><\/div>\n\n<!-- ========================= HERO ========================= -->\n<style>\n.inr-framework .hero{min-height:92vh !important;display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:center !important;text-align:center !important;padding:140px clamp(24px,5vw,40px) 90px !important;}\n.inr-framework .hero .badge{display:inline-flex !important;align-items:center !important;gap:9px !important;\n  font-size:13px !important;font-weight:600 !important;color:var(--ink) !important;background:rgba(14,14,18,.06) !important;\n  padding:8px 16px !important;border-radius:99px !important;margin-bottom:34px !important;}\n.inr-framework .hero .badge .stip{width:8px !important;height:8px !important;border-radius:50% !important;background:var(--ink) !important;box-shadow:0 0 0 4px rgba(14,14,18,.12) !important;}\n.inr-framework .hero h1{font-weight:600 !important;font-size:clamp(44px,7.6vw,104px) !important;line-height:.98 !important;letter-spacing:-.045em !important;\n  max-width:15ch !important;color:var(--ink) !important;margin-bottom:34px !important;}\n.inr-framework .hero .lead{font-size:clamp(18px,2.3vw,23px) !important;font-weight:300 !important;color:var(--grijs) !important;max-width:60ch !important;line-height:1.55 !important;margin-bottom:42px !important;}\n.inr-framework .hero .lead strong{font-weight:600 !important;color:var(--ink) !important;}\n.inr-framework .hero .acties{display:flex !important;gap:14px !important;flex-wrap:wrap !important;justify-content:center !important;}\n.inr-framework .knop{display:inline-flex !important;align-items:center !important;gap:10px !important;font-weight:600 !important;font-size:15px !important;padding:15px 26px !important;border-radius:99px !important;\n  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .3s !important;cursor:pointer !important;}\n.inr-framework .knop svg{width:16px !important;height:16px !important;transition:transform .35s cubic-bezier(.2,.7,.2,1) !important;}\n.inr-framework .knop.primair{background:var(--ink) !important;color:#fff !important;}\n.inr-framework .knop.primair:hover{transform:translateY(-3px) !important;box-shadow:0 18px 40px -20px rgba(14,14,18,.5) !important;}\n.inr-framework .knop.primair:hover svg{transform:translateX(4px) !important;}\n.inr-framework .knop.ghost{background:rgba(14,14,18,.04) !important;color:var(--ink) !important;border:1px solid var(--lijn) !important;}\n.inr-framework .knop.ghost:hover{background:rgba(14,14,18,.08) !important;transform:translateY(-3px) !important;}\n.inr-framework .hero .hint{margin-top:64px !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:10px !important;font-size:12px !important;font-weight:600 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:var(--grijs-2) !important;}\n.inr-framework .hero .hint .lijn{width:1px !important;height:40px !important;background:linear-gradient(180deg,var(--grijs-2),transparent) !important;}\n@media(max-width:820px){\n  .inr-framework .hero{min-height:auto !important;padding:118px clamp(28px,5vw,40px) 64px !important;}\n  .inr-framework .hero h1{font-size:clamp(38px,12vw,60px) !important;}\n  .inr-framework .hero .lead{font-size:18px !important;}\n}\n<\/style>\n<section class=\"hero wrap\">\n  <h1 class=\"rev d1\">Regie over gedrag komt van <span class=\"grad\">binnen<\/span>.<\/h1>\n  <p class=\"lead rev d2\">De architectuur van menselijke groei, en het operating system onder elke organisatie. Een nieuwe kijk op gedrag: niet als probleem dat je moet oplossen, maar als <strong>informatie die je kunt lezen<\/strong>.<\/p>\n  <div class=\"acties rev d3\">\n    <a class=\"knop primair\" href=\"#peilers\">Ontdek het framework <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path d=\"M12 5v14M6 13l6 6 6-6\"><\/path><\/svg><\/a>\n    <a class=\"knop ghost hide-on-en\" href=\"https:\/\/inr.institute\/inr-en-andere-modellen\/\">INR en andere modellen<\/a>\n  <\/div>\n  <div class=\"hint rev d4\"><span>Twee peilers, \u00e9\u00e9n systeem<\/span><span class=\"lijn\"><\/span><\/div>\n<\/section>\n\n<!-- ========================= STATEMENT: GEDRAG IS INFORMATIE ========================= -->\n<style>\n.inr-framework .statement{text-align:center !important;max-width:920px !important;margin:0 auto !important;}\n.inr-framework .statement .eyebrow{display:block !important;margin-bottom:22px !important;}\n.inr-framework .statement .groot{font-weight:600 !important;font-size:clamp(30px,5vw,58px) !important;letter-spacing:-.03em !important;line-height:1.08 !important;color:var(--ink) !important;margin-bottom:28px !important;}\n.inr-framework .statement p{font-size:19px !important;font-weight:300 !important;color:var(--grijs) !important;line-height:1.6 !important;max-width:64ch !important;margin:0 auto 34px !important;}\n.inr-framework .statement .knop{margin:0 auto !important;}\n<\/style>\n<section class=\"sec wrap\">\n  <div class=\"statement rev\">\n    <span class=\"eyebrow\">Een nieuwe kijk op gedrag in organisaties<\/span>\n    <div class=\"groot\">Gedrag is geen probleem.<br>Het is <span class=\"grad\">informatie<\/span>.<\/div>\n    <p>Organisaties proberen gedrag te corrigeren, te belonen of bij te sturen. Wij lezen het. Achter elke reactie ligt een logica die verklaart wat mensen drijft. Wie die logica begrijpt, hoeft gedrag niet langer te bestrijden.<\/p>\n    <a class=\"knop ghost hide-on-en\" href=\"https:\/\/inr.institute\/inr-en-andere-modellen\/\">Begrijp hoe INR zich verhoudt tot andere modellen <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg><\/a>\n  <\/div>\n<\/section>\n\n<!-- ========================= TWEE STROMINGEN (DONKER) ========================= -->\n<style>\n.inr-framework .stroming{background:var(--ink) !important;color:#fff !important;border-radius:36px !important;padding:84px 60px !important;position:relative !important;overflow:hidden !important;}\n.inr-framework .stroming::before{content:'' !important;position:absolute !important;top:-130px !important;right:-100px !important;width:400px !important;height:400px !important;border-radius:50% !important;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%) !important;filter:blur(50px) !important;}\n.inr-framework .stroming .s-kop{position:relative !important;z-index:1 !important;text-align:center !important;max-width:760px !important;margin:0 auto 52px !important;}\n.inr-framework .stroming .eyebrow{color:rgba(255,255,255,.6) !important;display:block !important;margin-bottom:16px !important;}\n.inr-framework .stroming h2{font-weight:600 !important;font-size:clamp(28px,4.2vw,48px) !important;letter-spacing:-.028em !important;line-height:1.08 !important;color:#fff !important;margin-bottom:18px !important;}\n.inr-framework .stroming .s-kop p{font-size:18px !important;font-weight:300 !important;color:rgba(255,255,255,.72) !important;line-height:1.6 !important;}\n.inr-framework .duo{display:grid !important;grid-template-columns:1fr 1fr !important;gap:18px !important;position:relative !important;z-index:1 !important;margin-bottom:44px !important;}\n.inr-framework .skaart{background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:22px !important;padding:34px 32px !important;\n  transition:transform .4s cubic-bezier(.2,.7,.2,1),background .4s !important;}\n.inr-framework .skaart:hover{transform:translateY(-5px) !important;background:rgba(255,255,255,.08) !important;}\n.inr-framework .skaart .afk{font-size:13px !important;font-weight:700 !important;letter-spacing:.1em !important;color:rgba(255,255,255,.5) !important;margin-bottom:14px !important;}\n\/* HEADING-FIX: was .skaart h4, nu .skaart h3 (h2 -> h3, geen niveau-sprong). *\/\n.inr-framework .skaart h3{font-weight:600 !important;font-size:21px !important;color:#fff !important;letter-spacing:-.015em !important;margin-bottom:10px !important;}\n.inr-framework .skaart p{font-size:15px !important;font-weight:300 !important;color:rgba(255,255,255,.7) !important;line-height:1.6 !important;}\n.inr-framework .stroming .s-onder{position:relative !important;z-index:1 !important;text-align:center !important;}\n.inr-framework .stroming .s-onder .knop{background:#fff !important;color:var(--ink) !important;margin:0 auto !important;}\n.inr-framework .stroming .s-onder .knop:hover{transform:translateY(-3px) !important;box-shadow:0 18px 44px -20px rgba(0,0,0,.5) !important;}\n.inr-framework .jaren{position:relative !important;z-index:1 !important;text-align:center !important;margin-bottom:44px !important;}\n.inr-framework .jaren .getal{font-size:clamp(56px,9vw,104px) !important;font-weight:700 !important;letter-spacing:-.05em !important;line-height:1 !important;color:#fff !important;}\n.inr-framework .jaren .label{font-size:15px !important;font-weight:300 !important;color:rgba(255,255,255,.6) !important;margin-top:6px !important;}\n@media(max-width:820px){\n  .inr-framework .stroming{padding:54px 26px !important;border-radius:26px !important;}\n  .inr-framework .duo{grid-template-columns:1fr !important;}\n}\n<\/style>\n<section class=\"sec wrap\" id=\"peilers\">\n  <div class=\"stroming rev\">\n    <div class=\"s-kop\">\n      <span class=\"eyebrow\">De twee denkrichtingen onder INR<\/span>\n      <h2>Twee stromingen. Zelfde impact.<\/h2>\n      <p>INR kent twee bewegingen die elkaar versterken. De ene helpt je gedrag te begrijpen, de andere helpt je het te bewegen. Verschillend van vorm, \u00e9\u00e9n in fundament.<\/p>\n    <\/div>\n    <div class=\"duo\">\n      <div class=\"skaart\">\n        <div class=\"afk\">DE LENS<\/div>\n        <h3>Begrijpen<\/h3>\n        <p>Het INR Model leest de psychologische logica achter gedrag. Het laat zien wat mensen drijft, nog voordat je iets verandert. Inzicht is het vertrekpunt.<\/p>\n      <\/div>\n      <div class=\"skaart\">\n        <div class=\"afk\">DE PROGRAMMA&#8217;S<\/div>\n        <h3>Bewegen<\/h3>\n        <p>INR Dynamics vertaalt dat inzicht naar leerprogramma&#8217;s, van leiderschap tot sales. Hetzelfde fundament, gericht op waar mensen werkelijk staan.<\/p>\n      <\/div>\n    <\/div>\n    <div class=\"jaren\">\n      <div class=\"getal\">20<\/div>\n      <div class=\"label\">jaar ervaring vertaald naar \u00e9\u00e9n werkend systeem<\/div>\n    <\/div>\n    <div class=\"s-onder\">\n      <a class=\"knop hide-on-en\" href=\"https:\/\/inr.institute\/onderzoek\/\">Meer lezen over de wetenschap <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg><\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ========================= DE TWEE PEILERS ========================= -->\n<style>\n.inr-framework .peilers{display:grid !important;grid-template-columns:1fr 1fr !important;gap:24px !important;}\n.inr-framework .pkaart{position:relative !important;display:flex !important;flex-direction:column !important;\n  background:rgba(255,255,255,.72) !important;-webkit-backdrop-filter:blur(20px) !important;backdrop-filter:blur(20px) !important;\n  border:1px solid var(--lijn) !important;border-radius:var(--radius) !important;padding:48px 44px !important;overflow:hidden !important;\n  box-shadow:0 14px 50px -34px rgba(14,14,18,.3) !important;\n  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s !important;}\n.inr-framework .pkaart::before{content:'' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;height:4px !important;background:var(--ink) !important;transform:scaleX(0) !important;transform-origin:left !important;transition:transform .5s cubic-bezier(.2,.7,.2,1) !important;}\n.inr-framework .pkaart:hover{transform:translateY(-8px) !important;border-color:rgba(14,14,18,.3) !important;box-shadow:0 40px 80px -40px rgba(14,14,18,.4) !important;}\n.inr-framework .pkaart:hover::before{transform:scaleX(1) !important;}\n.inr-framework .pkaart .pico{width:60px !important;height:60px !important;border-radius:17px !important;display:flex !important;align-items:center !important;justify-content:center !important;margin-bottom:26px !important;background:var(--ink) !important;color:#fff !important;}\n.inr-framework .pkaart .pico svg{width:30px !important;height:30px !important;}\n.inr-framework .pkaart .plens{font-size:12.5px !important;font-weight:600 !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--grijs) !important;margin-bottom:8px !important;}\n.inr-framework .pkaart .pnaam{font-weight:600 !important;font-size:30px !important;letter-spacing:-.025em !important;color:var(--ink) !important;margin-bottom:16px !important;}\n.inr-framework .pkaart .poms{font-size:16px !important;font-weight:300 !important;color:var(--grijs) !important;line-height:1.62 !important;margin-bottom:30px !important;flex:1 1 auto !important;}\n.inr-framework .pkaart .plink{display:inline-flex !important;align-items:center !important;gap:10px !important;font-weight:600 !important;font-size:15px !important;color:var(--ink) !important;align-self:flex-start !important;}\n.inr-framework .pkaart .plink svg{width:17px !important;height:17px !important;transition:transform .35s cubic-bezier(.2,.7,.2,1) !important;}\n.inr-framework .pkaart:hover .plink svg{transform:translateX(5px) !important;}\n@media(max-width:820px){.inr-framework .peilers{grid-template-columns:1fr !important;}.inr-framework .pkaart{padding:38px 32px !important;}.inr-framework .pkaart .pnaam{font-size:26px !important;}}\n<\/style>\n<section class=\"sec wrap\">\n  <div class=\"kop rev\">\n    <span class=\"eyebrow\">E\u00e9n framework, twee peilers<\/span>\n    <h2>De lens en de leerprogramma&#8217;s.<\/h2>\n    <p>INR begint bij het begrijpen van gedrag en eindigt bij het bewegen ervan. Het Model is de lens waarmee je kijkt, Dynamics is waar dat inzicht werk wordt.<\/p>\n  <\/div>\n  <div class=\"peilers\">\n    <a class=\"pkaart rev d1\" href=\"https:\/\/inr.institute\/inr\/inr-model\/\">\n      <div class=\"pico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\"><circle cx=\"11\" cy=\"11\" r=\"7\"><\/circle><path d=\"M21 21l-4.3-4.3\"><\/path><circle cx=\"11\" cy=\"11\" r=\"2.6\"><\/circle><\/svg><\/div>\n      <div class=\"plens\">De lens<\/div>\n      <div class=\"pnaam\">INR Model<\/div>\n      <div class=\"poms\">Organisaties sturen vaak op gedrag. Wij helpen je het te begrijpen. Het INR Model onthult de psychologische logica achter motivatie, samenwerking en leiderschap.<\/div>\n      <span class=\"plink\">Meer leren <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg><\/span>\n    <\/a>\n    <a class=\"pkaart rev d2\" href=\"https:\/\/inr.institute\/inr\/inr-dynamics\/\">\n      <div class=\"pico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\"><circle cx=\"12\" cy=\"12\" r=\"2.4\"><\/circle><circle cx=\"12\" cy=\"12\" r=\"9\" stroke-dasharray=\"2.5 3.5\"><\/circle><path d=\"M12 3v3M12 18v3M3 12h3M18 12h3\"><\/path><\/svg><\/div>\n      <div class=\"plens\">De leerprogramma&#8217;s<\/div>\n      <div class=\"pnaam\">INR Dynamics<\/div>\n      <div class=\"poms\">INR Dynamics is geen methode, maar een onderliggend systeem van gedragslogica. Elke dienst, elk programma, van leiderschap tot sales, werkt vanuit dezelfde structuur als het INR Model.<\/div>\n      <span class=\"plink\">Meer leren <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg><\/span>\n    <\/a>\n  <\/div>\n<\/section>\n\n<!-- ========================= SLOT ========================= -->\n<style>\n.inr-framework .slot-sec{position:relative !important;z-index:2 !important;background:#FFFFFF !important;}\n.inr-framework .slot{text-align:center !important;min-height:58vh !important;display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:center !important;padding-top:100px !important;padding-bottom:110px !important;}\n.inr-framework .slot > .rev{display:flex !important;flex-direction:column !important;align-items:center !important;text-align:center !important;}\n.inr-framework .slot h2{font-weight:600 !important;font-size:clamp(34px,6vw,68px) !important;letter-spacing:-.032em !important;line-height:1.04 !important;max-width:17ch !important;color:var(--ink) !important;margin-bottom:24px !important;}\n.inr-framework .slot p{font-size:19px !important;font-weight:300 !important;color:var(--grijs) !important;max-width:48ch !important;line-height:1.55 !important;margin-bottom:40px !important;}\n.inr-framework .slot .scta{display:inline-flex !important;align-items:center !important;gap:11px !important;background:var(--ink) !important;color:#fff !important;font-weight:600 !important;font-size:15px !important;padding:16px 32px !important;border-radius:99px !important;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s !important;}\n.inr-framework .slot .scta:hover{transform:translateY(-3px) !important;box-shadow:0 22px 50px -22px rgba(14,14,18,.6) !important;}\n.inr-framework .slot .scta svg{width:17px !important;height:17px !important;transition:transform .35s cubic-bezier(.2,.7,.2,1) !important;}\n.inr-framework .slot .scta:hover svg{transform:translateX(4px) !important;}\n.inr-framework .slot .merk{margin-top:50px !important;display:inline-flex !important;align-items:center !important;gap:12px !important;font-weight:600 !important;font-size:22px !important;color:var(--ink) !important;}\n.inr-framework .slot .merk .dot{width:11px !important;height:11px !important;border-radius:50% !important;background:var(--ink) !important;box-shadow:0 0 0 5px rgba(14,14,18,.12) !important;}\n<\/style>\n<div class=\"slot-sec\">\n<section class=\"slot wrap\">\n  <div class=\"rev\">\n    <h2>Begrijp gedrag. <span class=\"grad\">Beweeg<\/span> het.<\/h2>\n    <p>Begin bij de lens en laat het inzicht werk worden. E\u00e9n framework dat regie over gedrag terugbrengt naar waar het vandaan komt: van binnen.<\/p>\n    <a class=\"scta\" href=\"https:\/\/inr.institute\/inr\/inr-model\/\">Begin bij het INR Model <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg><\/a>\n    <div class=\"merk\"><span class=\"dot\"><\/span>INR&nbsp;Framework<\/div>\n  <\/div>\n<\/section>\n<\/div>\n\n<\/div>\n<!-- ========================= EINDE .inr-framework ========================= -->\n\n<script>\n(function(){\n  function start(){\n    var root=document.querySelector('.inr-framework');\n    if(!root) return;\n\n    \/* Taalvlag: zet lang-en op de widget-root zelf (NIET op body) wanneer de\n       URL het \/en\/-pad bevat. Zo blijft de verbergregel binnen .inr-framework\n       en breekt hij de TranslatePress-editor niet. *\/\n    if(\/\\\/en\\\/\/.test(window.location.pathname)) root.classList.add('lang-en');\n\n    var els=root.querySelectorAll('.rev');\n    if(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('in');});}\n    else{\n      var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:.12,rootMargin:'0px 0px -8% 0px'});\n      els.forEach(function(e){io.observe(e);});\n    }\n  }\n  if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',start);}else{start();}\n})();\n<\/script>\n\n\n\n\n\n<!-- ============================================================================\n     INR CONTACTFORMULIER\n     E\u00e9n bestand. Plak dit volledig in \u00c9\u00c9N Elementor HTML-widget.\n     Alles is gescoped onder .inr-contact en afgedwongen met !important,\n     zodat Elementor\/WordPress de stijl niet kan overrulen.\n\n     Stijl in lijn met de rest van de site: Inter, witte basis, ink #0A0A0B,\n     glassmorphism, atmosfeer-blobs, reveal-on-scroll, ink-accent.\n\n     Verzending: eigen plugin-endpoint (INR Website Leads), form-type 'contact'.\n     Geen Elementor-capture meer. Honeypot + tijdslot tegen bots.\n\n     CONTRAST-FIX (WCAG AA): de lichtgrijze tint --grijs-licht (#9A95A8) haalde\n     maar 2.9:1 op wit en zakte daarmee onder de 4.5:1-eis. Alle leesbare tekst\n     die daarop stond \u2014 het (optioneel)-sterretje en de placeholders \u2014 staat nu\n     op --grijs (#6B6480, 5.59:1). De decoratieve select-chevron is mee verhoogd.\n     ============================================================================ -->\n\n<style>\n\/* ---------- 1. ELEMENTOR-ONTWAPENING + ROOT ---------- *\/\n.inr-contact{\n  --ink:#0A0A0B; --ink-2:#1C1C20; --grijs:#6B6480; --grijs-licht:#9A95A8;\n  --lijn:rgba(10,10,11,.10); --lijn-zacht:rgba(10,10,11,.06);\n  --veld-bg:#FFFFFF; --glas:rgba(255,255,255,.72); --soft:#F7F6FA;\n  --radius:24px; --maxw:1200px;\n  position:relative !important; width:100% !important; max-width:100% !important;\n  margin:0 !important; padding:0 clamp(22px,5vw,40px) !important; box-sizing:border-box !important;\n  color:var(--ink) !important; background:transparent !important; line-height:1.5 !important;\n  overflow:hidden !important; text-align:left !important;\n  -webkit-font-smoothing:antialiased !important;\n}\n.inr-contact, .inr-contact *, .inr-contact *::before, .inr-contact *::after{\n  box-sizing:border-box !important;\n  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;\n}\n.inr-contact h1,.inr-contact h2,.inr-contact h3,.inr-contact p,\n.inr-contact span,.inr-contact div,.inr-contact label,.inr-contact a,.inr-contact button{margin:0;padding:0;}\n.inr-contact a{text-decoration:none !important;color:inherit !important;}\n.inr-contact button{background:none !important;border:none !important;cursor:pointer !important;color:inherit !important;font:inherit !important;}\n\n\/* ---------- 2. ATMOSFEER (drift-blobs) ---------- *\/\n.inr-contact .atmos{position:absolute !important;inset:0 !important;z-index:0 !important;overflow:hidden !important;pointer-events:none !important;background:transparent !important;}\n.inr-contact .blob{position:absolute !important;border-radius:50% !important;filter:blur(120px) !important;opacity:.07 !important;animation:inrc-drift 32s ease-in-out infinite !important;}\n.inr-contact .blob.a{width:520px;height:520px;background:rgba(10,10,11,1);top:-160px;left:-140px;}\n.inr-contact .blob.b{width:460px;height:460px;background:rgba(28,28,32,1);bottom:-200px;right:-160px;animation-delay:-13s;}\n@keyframes inrc-drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(36px,-28px) scale(1.06);}}\n\n\/* ---------- 3. LAYOUT ---------- *\/\n.inr-contact .wrap{position:relative !important;z-index:1 !important;width:100% !important;max-width:var(--maxw) !important;margin:0 auto !important;padding:clamp(64px,9vw,120px) 0 !important;}\n.inr-contact .kaart{\n  display:grid !important;grid-template-columns:0.92fr 1.08fr !important;gap:0 !important;\n  background:var(--glas) !important;-webkit-backdrop-filter:blur(20px) !important;backdrop-filter:blur(20px) !important;\n  border:1px solid var(--lijn) !important;border-radius:32px !important;overflow:hidden !important;\n  box-shadow:0 40px 90px -54px rgba(10,10,11,.4) !important;\n}\n\n\/* ---------- 4. LINKER PANEEL ---------- *\/\n.inr-contact .paneel{\n  position:relative !important;overflow:hidden !important;background:var(--ink) !important;color:#fff !important;\n  padding:clamp(40px,5vw,64px) clamp(32px,4vw,56px) !important;\n  display:flex !important;flex-direction:column !important;\n}\n.inr-contact .paneel::before{content:'' !important;position:absolute !important;top:-130px !important;right:-90px !important;width:360px !important;height:360px !important;border-radius:50% !important;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%) !important;filter:blur(50px) !important;pointer-events:none !important;}\n.inr-contact .paneel::after{content:'' !important;position:absolute !important;bottom:-150px !important;left:-110px !important;width:340px !important;height:340px !important;border-radius:50% !important;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%) !important;filter:blur(50px) !important;pointer-events:none !important;}\n.inr-contact .paneel-in{position:relative !important;z-index:1 !important;display:flex !important;flex-direction:column !important;height:100% !important;}\n.inr-contact .badge{display:inline-flex !important;align-items:center !important;gap:9px !important;align-self:flex-start !important;\n  font-size:12px !important;font-weight:600 !important;letter-spacing:.02em !important;color:#fff !important;\n  border:1px solid rgba(255,255,255,.22) !important;background:rgba(255,255,255,.06) !important;\n  padding:8px 15px !important;border-radius:99px !important;margin-bottom:30px !important;}\n.inr-contact .badge .stip{width:7px !important;height:7px !important;border-radius:50% !important;background:#fff !important;}\n.inr-contact .paneel h2{font-weight:700 !important;font-size:clamp(28px,3.6vw,42px) !important;line-height:1.08 !important;letter-spacing:-.03em !important;color:#fff !important;margin-bottom:18px !important;}\n.inr-contact .paneel .lead{font-size:clamp(15px,1.6vw,17px) !important;font-weight:300 !important;color:rgba(255,255,255,.74) !important;line-height:1.62 !important;max-width:42ch !important;}\n.inr-contact .direct{margin-top:auto !important;padding-top:42px !important;}\n.inr-contact .direct-l{font-size:12px !important;font-weight:600 !important;letter-spacing:.02em !important;text-transform:uppercase !important;color:rgba(255,255,255,.5) !important;margin-bottom:16px !important;}\n.inr-contact .direct-rij{display:flex !important;align-items:center !important;gap:13px !important;margin-bottom:13px !important;}\n.inr-contact .direct-rij:last-child{margin-bottom:0 !important;}\n.inr-contact .direct-ic{flex:none !important;width:38px !important;height:38px !important;border-radius:11px !important;background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.12) !important;display:flex !important;align-items:center !important;justify-content:center !important;color:#fff !important;}\n.inr-contact .direct-ic svg{width:17px !important;height:17px !important;stroke:#fff !important;fill:none !important;stroke-width:1.7 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}\n.inr-contact .direct-rij a,.inr-contact .direct-rij span{font-size:15.5px !important;font-weight:400 !important;color:rgba(255,255,255,.92) !important;letter-spacing:-.01em !important;transition:color .2s !important;word-break:break-word !important;}\n.inr-contact a.direct-link:hover{color:#fff !important;}\n\n\/* ---------- 5. RECHTER PANEEL: FORMULIER ---------- *\/\n.inr-contact .form-zij{padding:clamp(40px,5vw,64px) clamp(32px,4vw,56px) !important;background:transparent !important;}\n.inr-contact .veld-rij{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:18px !important;margin-bottom:20px !important;}\n.inr-contact .veld{display:flex !important;flex-direction:column !important;min-width:0 !important;}\n.inr-contact .veld.vol{margin-bottom:20px !important;}\n.inr-contact .veld label{font-size:13px !important;font-weight:600 !important;color:var(--ink) !important;letter-spacing:-.005em !important;margin-bottom:8px !important;}\n\/* CONTRAST-FIX: was --grijs-licht (2.9:1), nu --grijs (5.59:1). *\/\n.inr-contact .veld label .ster{color:var(--grijs) !important;font-weight:400 !important;}\n.inr-contact .veld input,.inr-contact .veld select,.inr-contact .veld textarea{\n  width:100% !important;border:1px solid var(--lijn) !important;border-radius:13px !important;\n  padding:14px 16px !important;font-size:15px !important;font-weight:400 !important;line-height:1.4 !important;\n  color:var(--ink) !important;background:var(--veld-bg) !important;-webkit-text-fill-color:var(--ink) !important;\n  outline:none !important;-webkit-appearance:none !important;appearance:none !important;\n  transition:border-color .2s,box-shadow .2s,background .2s !important;\n}\n\/* CONTRAST-FIX: placeholders waren --grijs-licht (2.9:1), nu --grijs (5.59:1). *\/\n.inr-contact .veld input::placeholder,.inr-contact .veld textarea::placeholder{color:var(--grijs) !important;opacity:1 !important;}\n.inr-contact .veld input:focus,.inr-contact .veld select:focus,.inr-contact .veld textarea:focus{\n  border-color:var(--ink) !important;box-shadow:0 0 0 4px rgba(10,10,11,.07) !important;\n}\n.inr-contact .veld input.fout,.inr-contact .veld textarea.fout{border-color:#DC2626 !important;box-shadow:0 0 0 4px rgba(220,38,38,.10) !important;}\n.inr-contact .veld textarea{min-height:130px !important;resize:vertical !important;}\n.inr-contact .veld.select-veld{position:relative !important;}\n\/* Decoratieve chevron, mee verhoogd naar --grijs voor visuele samenhang. *\/\n.inr-contact .veld.select-veld::after{content:'' !important;position:absolute !important;right:18px !important;bottom:19px !important;width:8px !important;height:8px !important;border-right:1.6px solid var(--grijs) !important;border-bottom:1.6px solid var(--grijs) !important;transform:rotate(45deg) !important;pointer-events:none !important;}\n.inr-contact .veld select{cursor:pointer !important;padding-right:40px !important;}\n\n\/* honeypot, visueel verborgen *\/\n.inr-contact .hp-veld{position:absolute !important;left:-9999px !important;top:-9999px !important;width:1px !important;height:1px !important;overflow:hidden !important;}\n\n.inr-contact .knop{\n  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;width:100% !important;\n  margin-top:8px !important;background:var(--ink) !important;color:#fff !important;border-radius:14px !important;\n  padding:17px 28px !important;font-size:16px !important;font-weight:600 !important;letter-spacing:-.005em !important;line-height:1.2 !important;\n  box-shadow:0 14px 30px -16px rgba(10,10,11,.6) !important;\n  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,opacity .25s !important;\n}\n.inr-contact .knop:hover{transform:translateY(-2px) !important;box-shadow:0 20px 40px -18px rgba(10,10,11,.7) !important;}\n.inr-contact .knop svg{width:16px !important;height:16px !important;stroke:currentColor !important;fill:none !important;stroke-width:2 !important;stroke-linecap:round !important;stroke-linejoin:round !important;transition:transform .35s cubic-bezier(.2,.7,.2,1) !important;}\n.inr-contact .knop:hover svg{transform:translateX(4px) !important;}\n.inr-contact .knop[disabled]{opacity:.55 !important;cursor:wait !important;transform:none !important;box-shadow:none !important;}\n\n.inr-contact .form-fout{font-size:13.5px !important;font-weight:400 !important;color:#DC2626 !important;margin-top:14px !important;text-align:center !important;\n  max-height:0 !important;overflow:hidden !important;opacity:0 !important;transition:opacity .25s,max-height .25s !important;}\n.inr-contact .form-fout.toon{opacity:1 !important;max-height:60px !important;}\n.inr-contact .form-belofte{margin-top:18px !important;display:flex !important;align-items:flex-start !important;gap:9px !important;font-size:12.5px !important;font-weight:400 !important;color:var(--grijs) !important;line-height:1.55 !important;}\n.inr-contact .form-belofte svg{width:14px !important;height:14px !important;flex:none !important;margin-top:2px !important;stroke:var(--ink) !important;fill:none !important;stroke-width:2 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}\n\n\/* ---------- 6. SUCCES-STAAT ---------- *\/\n.inr-contact .form-velden.verzonden{display:none !important;}\n.inr-contact .succes{display:none !important;flex-direction:column !important;align-items:flex-start !important;gap:16px !important;padding:14px 0 !important;}\n.inr-contact .succes.toon{display:flex !important;}\n.inr-contact .succes .vink{width:54px !important;height:54px !important;border-radius:16px !important;background:var(--soft) !important;border:1px solid var(--lijn) !important;display:flex !important;align-items:center !important;justify-content:center !important;}\n.inr-contact .succes .vink svg{width:26px !important;height:26px !important;stroke:var(--ink) !important;fill:none !important;stroke-width:2.4 !important;stroke-linecap:round !important;stroke-linejoin:round !important;}\n.inr-contact .succes h3{font-weight:700 !important;font-size:23px !important;letter-spacing:-.02em !important;color:var(--ink) !important;}\n.inr-contact .succes p{font-size:15.5px !important;font-weight:300 !important;color:var(--grijs) !important;line-height:1.6 !important;max-width:42ch !important;}\n\n\/* ---------- 7. REVEAL ---------- *\/\n.inr-contact .rev{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}\n.inr-contact .rev.in{opacity:1 !important;transform:none !important;}\n\n\/* ---------- 8. MOBIEL ---------- *\/\n@media(max-width:880px){\n  .inr-contact .wrap{padding:64px 0 !important;}\n  .inr-contact .kaart{grid-template-columns:1fr !important;border-radius:26px !important;}\n  .inr-contact .paneel{padding:40px 28px !important;}\n  .inr-contact .paneel .lead{max-width:none !important;}\n  .inr-contact .direct{padding-top:34px !important;}\n  .inr-contact .form-zij{padding:36px 28px !important;}\n  .inr-contact .veld-rij{grid-template-columns:1fr !important;gap:0 !important;margin-bottom:0 !important;}\n  .inr-contact .veld-rij .veld{margin-bottom:20px !important;}\n}\n@media(prefers-reduced-motion:reduce){\n  .inr-contact .rev{opacity:1 !important;transform:none !important;transition:none !important;}\n  .inr-contact .blob{animation:none !important;}\n  .inr-contact .knop,.inr-contact .knop svg{transition:none !important;}\n}\n<\/style>\n\n<div class=\"inr-contact\">\n<div class=\"atmos\"><div class=\"blob a\"><\/div><div class=\"blob b\"><\/div><\/div>\n\n<div class=\"wrap\">\n  <div class=\"kaart rev\">\n\n    <!-- LINKER PANEEL -->\n    <div class=\"paneel\">\n      <div class=\"paneel-in\">\n\n        <h2>Zeg hallo. Wij denken graag met je mee.<\/h2>\n        <p class=\"lead\">Laat je gegevens achter en vertel kort waar je mee bezig bent. We nemen persoonlijk contact met je op, zonder verkooppraat.<\/p>\n        <div class=\"direct\">\n          <div class=\"direct-l\">Ons direct bereiken<\/div>\n          <div class=\"direct-rij\">\n            <span class=\"direct-ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L20 13l1 4v3a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z\"><\/path><\/svg><\/span>\n            <a class=\"direct-link\" href=\"tel:+31320844170\">+31 320 844 170<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- RECHTER PANEEL: FORMULIER -->\n    <div class=\"form-zij\">\n      <div class=\"form-velden\" id=\"inrcVelden\">\n\n        <div class=\"veld-rij\">\n          <div class=\"veld\">\n            <label for=\"inrcNaam\">Naam<\/label>\n            <input type=\"text\" id=\"inrcNaam\" placeholder=\"Jan Willem\" autocomplete=\"name\">\n          <\/div>\n          <div class=\"veld\">\n            <label for=\"inrcTel\">Telefoon <span class=\"ster\">(optioneel)<\/span><\/label>\n            <input type=\"tel\" id=\"inrcTel\" placeholder=\"Telefoon\" autocomplete=\"tel\">\n          <\/div>\n        <\/div>\n\n        <div class=\"veld vol\">\n          <label for=\"inrcEmail\">E-mail<\/label>\n          <input type=\"email\" id=\"inrcEmail\" placeholder=\"jij@bedrijf.nl\" autocomplete=\"email\" inputmode=\"email\">\n        <\/div>\n\n        <div class=\"veld-rij\">\n          <div class=\"veld select-veld\">\n            <label for=\"inrcLocatie\">Locatie <span class=\"ster\">(optioneel)<\/span><\/label>\n            <select id=\"inrcLocatie\">\n              <option value=\"\">Selecteer<\/option>\n              <option value=\"Noord-Nederland\">Noord-Nederland<\/option>\n              <option value=\"Oost-Nederland\">Oost-Nederland<\/option>\n              <option value=\"Midden-Nederland\">Midden-Nederland<\/option>\n              <option value=\"West-Nederland\">West-Nederland<\/option>\n              <option value=\"Zuid-Nederland\">Zuid-Nederland<\/option>\n              <option value=\"Heel Nederland \/ landelijk\">Heel Nederland \/ landelijk<\/option>\n            <\/select>\n          <\/div>\n          <div class=\"veld\">\n            <label for=\"inrcMedewerkers\">Medewerkers <span class=\"ster\">(optioneel)<\/span><\/label>\n            <input type=\"number\" id=\"inrcMedewerkers\" placeholder=\"1\" min=\"1\" inputmode=\"numeric\">\n          <\/div>\n        <\/div>\n\n        <div class=\"veld vol\">\n          <label for=\"inrcBericht\">Bericht<\/label>\n          <textarea id=\"inrcBericht\" placeholder=\"Waar kunnen we je mee helpen?\"><\/textarea>\n        <\/div>\n\n        <!-- honeypot -->\n        <div class=\"hp-veld\" aria-hidden=\"true\">\n          <label for=\"inrcHp\">Laat dit veld leeg<\/label>\n          <input type=\"text\" id=\"inrcHp\" tabindex=\"-1\" autocomplete=\"off\">\n        <\/div>\n\n        <button type=\"button\" class=\"knop\" id=\"inrcKnop\">\n          Verstuur bericht\n          <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>\n        <\/button>\n\n        <div class=\"form-fout\" id=\"inrcFout\">Controleer de gemarkeerde velden.<\/div>\n\n        <div class=\"form-belofte\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M20 6 9 17l-5-5\"><\/path><\/svg>\n          <span>We gebruiken je gegevens uitsluitend om contact met je op te nemen over je vraag.<\/span>\n        <\/div>\n      <\/div>\n\n      <!-- succes-staat -->\n      <div class=\"succes\" id=\"inrcSucces\">\n        <div class=\"vink\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 6 9 17l-5-5\"><\/path><\/svg><\/div>\n        <h3>Bedankt, je bericht is binnen.<\/h3>\n        <p>We hebben je gegevens ontvangen en nemen zo snel mogelijk persoonlijk contact met je op.<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n<\/div>\n\n<script>\n\/* ----- Config: pas hier het endpoint aan zonder de rest te raken ----- *\/\nwindow.INR_CONTACT = {\n  endpoint: \"\/wp-json\/inr-dashboard\/v1\/lead-binnen\",\n  form: \"contact\"\n};\n\n(function(){\n  var GELADEN = Math.floor(Date.now() \/ 1000);\n\n  function start(root){\n    if(!root || root.getAttribute('data-inr-actief') === '1'){ return; }\n    root.setAttribute('data-inr-actief', '1');\n\n    var CFG = window.INR_CONTACT || {};\n    var ENDPOINT = CFG.endpoint || '\/wp-json\/inr-dashboard\/v1\/lead-binnen';\n    var FORM = CFG.form || 'contact';\n\n    var velden = root.querySelector('#inrcVelden');\n    var succes = root.querySelector('#inrcSucces');\n    var knop   = root.querySelector('#inrcKnop');\n    var fout   = root.querySelector('#inrcFout');\n    if(!knop) return;\n\n    var naam   = root.querySelector('#inrcNaam');\n    var tel    = root.querySelector('#inrcTel');\n    var email  = root.querySelector('#inrcEmail');\n    var loc    = root.querySelector('#inrcLocatie');\n    var mede   = root.querySelector('#inrcMedewerkers');\n    var bericht= root.querySelector('#inrcBericht');\n    var hp     = root.querySelector('#inrcHp');\n\n    function geldigEmail(e){ return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(e); }\n\n    function toonFout(tekst){\n      if(tekst) fout.textContent = tekst;\n      fout.classList.add('toon');\n    }\n    function wisFout(){ fout.classList.remove('toon'); }\n\n    [naam, email, bericht].forEach(function(v){\n      if(v){ v.addEventListener('input', function(){ v.classList.remove('fout'); wisFout(); }); }\n    });\n\n    function valideer(){\n      var ok = true;\n      if(!(naam.value || '').trim()){ naam.classList.add('fout'); ok = false; }\n      if(!geldigEmail((email.value || '').trim())){ email.classList.add('fout'); ok = false; }\n      if(!(bericht.value || '').trim()){ bericht.classList.add('fout'); ok = false; }\n      return ok;\n    }\n\n    \/* Verstuur naar het eigen plugin-endpoint (geen Elementor). Fire-and-forget\n       met honeypot + tijdslot tegen bots. Opslaan-voor-mailen gebeurt server-\n       side, dus een lead raakt niet kwijt; we tonen de bezoeker altijd de\n       bevestiging zodra de aanvraag is weggestuurd. *\/\n    function verzendNaarPlugin(klaar){\n      var payload = {\n        form: FORM,\n        naam: (naam.value || '').trim(),\n        email: (email.value || '').trim(),\n        velden: {\n          'Telefoon': (tel.value || '').trim(),\n          'Locatie': (loc.value || '').trim(),\n          'Aantal medewerkers': (mede.value || '').trim(),\n          'Bericht': (bericht.value || '').trim()\n        },\n        meta: {},\n        bron: window.location.href,\n        ts: GELADEN,\n        website: (hp ? hp.value : '')\n      };\n      try {\n        var xhr = new XMLHttpRequest();\n        xhr.open('POST', ENDPOINT, true);\n        xhr.setRequestHeader('Content-Type', 'application\/json');\n        xhr.timeout = 15000;\n        xhr.onreadystatechange = function(){\n          if(xhr.readyState !== 4) return;\n          if(xhr.status >= 200 && xhr.status < 300){ klaar(true); }\n          else { klaar(false); }\n        };\n        xhr.ontimeout = function(){ klaar(false); };\n        xhr.onerror = function(){ klaar(false); };\n        xhr.send(JSON.stringify(payload));\n      } catch(e){ klaar(false); }\n    }\n\n    function toonSucces(){\n      velden.classList.add('verzonden');\n      succes.classList.add('toon');\n      try { succes.scrollIntoView({ behavior:'smooth', block:'center' }); } catch(e){}\n    }\n\n    knop.addEventListener('click', function(){\n      wisFout();\n      if(!valideer()){ toonFout('Vul je naam, een geldig e-mailadres en een bericht in.'); return; }\n      knop.disabled = true;\n      knop.textContent = 'Een moment...';\n      verzendNaarPlugin(function(ok){\n        if(ok){\n          toonSucces();\n        } else {\n          knop.disabled = false;\n          knop.innerHTML = 'Verstuur bericht <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>';\n          toonFout('Er ging iets mis bij het versturen. Probeer het zo nog eens, of bel ons direct.');\n        }\n      });\n    });\n\n    \/* Enter in een normaal veld (niet de textarea) verstuurt het formulier. *\/\n    [naam, tel, email, mede].forEach(function(v){\n      if(v){ v.addEventListener('keypress', function(e){ if(e.key === 'Enter'){ e.preventDefault(); knop.click(); } }); }\n    });\n\n    \/* Reveal-on-scroll, met een veiligheidsval: als de IntersectionObserver om\n       welke reden dan ook niet vuurt (bijvoorbeeld omdat de template-widget al\n       volledig in beeld staat bij het laden, of buiten een normale scroll-context\n       leeft), maken we de kaart sowieso zichtbaar. Zo blijft het formulier nooit\n       op opacity:0 hangen. *\/\n    var revs = root.querySelectorAll('.rev');\n    function toonAlles(){ [].forEach.call(revs, function(e){ e.classList.add('in'); }); }\n    if(!('IntersectionObserver' in window)){\n      toonAlles();\n    } else {\n      var io = new IntersectionObserver(function(es){\n        es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });\n      }, { threshold:.08, rootMargin:'0px 0px -4% 0px' });\n      [].forEach.call(revs, function(e){ io.observe(e); });\n      \/\/ Veiligheidsval: wat er ook gebeurt, na 1,2s is de kaart zichtbaar.\n      setTimeout(toonAlles, 1200);\n    }\n  }\n\n  \/* Initialiseer elk contactformulier op de pagina. Dit is bewust bestand tegen\n     de manier waarop WordPress een template-widget kan inladen: de widget kan op\n     de ene pagina vroeg in de DOM staan en op de andere later worden geinjecteerd\n     (waardoor een eenmalige querySelector bij het laden niets vond en het formulier\n     onzichtbaar bleef). We proberen daarom meermaals:\n       1. meteen, voor formulieren die er al zijn,\n       2. op DOMContentLoaded,\n       3. via een MutationObserver voor widgets die later in de DOM verschijnen,\n       4. met een paar korte herhaalde pogingen als veiligheidsnet. *\/\n  function initAlle(){\n    var lijst = document.querySelectorAll('.inr-contact');\n    [].forEach.call(lijst, function(node){ start(node); });\n  }\n\n  \/\/ 1 + 2: meteen en bij DOM-gereed.\n  if(document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded', initAlle);\n  } else {\n    initAlle();\n  }\n\n  \/\/ 3: vang formulieren op die na het laden alsnog worden ingeladen.\n  if('MutationObserver' in window){\n    var mo = new MutationObserver(function(){ initAlle(); });\n    if(document.body){\n      mo.observe(document.body, { childList:true, subtree:true });\n    } else {\n      document.addEventListener('DOMContentLoaded', function(){\n        mo.observe(document.body, { childList:true, subtree:true });\n      });\n    }\n  }\n\n  \/\/ 4: een paar korte herhaalde pogingen als extra vangnet (stopt vanzelf).\n  var pogingen = 0;\n  var herhaal = setInterval(function(){\n    pogingen++;\n    initAlle();\n    if(pogingen >= 10){ clearInterval(herhaal); }\n  }, 400);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Regie over gedrag komt van binnen. De architectuur van menselijke groei, en het operating system onder elke organisatie. Een nieuwe kijk op gedrag: niet als probleem dat je moet oplossen, maar als informatie die je kunt lezen. Ontdek het framework INR en andere modellen Twee peilers, \u00e9\u00e9n systeem Een nieuwe kijk op gedrag in organisaties [&hellip;]<\/p>\n","protected":false},"author":224244682,"featured_media":54908,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-54792","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/pages\/54792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/users\/224244682"}],"replies":[{"embeddable":true,"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/comments?post=54792"}],"version-history":[{"count":3,"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/pages\/54792\/revisions"}],"predecessor-version":[{"id":80613,"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/pages\/54792\/revisions\/80613"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/media\/54908"}],"wp:attachment":[{"href":"https:\/\/inr.institute\/en\/wp-json\/wp\/v2\/media?parent=54792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}