JKitwerken \u2013 Strak, waterdicht en betrouwbaar<\/title>\r\n<meta name=\"robots\" content=\"max-image-preview:large\">\r\n<link rel=\"alternate\" type=\"application\/rss+xml\" title=\"JKitwerken \u00bb feed\" href=\"https:\/\/www.jkitwerken.nl\/index.php\/feed\/\">\r\n<link rel=\"alternate\" type=\"application\/rss+xml\" title=\"JKitwerken \u00bb reacties feed\" href=\"https:\/\/www.jkitwerken.nl\/index.php\/comments\/feed\/\">\r\n<link rel=\"alternate\" title=\"oEmbed (JSON)\" type=\"application\/json+oembed\" href=\"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/oembed\/1.0\/embed?url=https%3A%2F%2Fwww.jkitwerken.nl%2F\">\r\n<link rel=\"alternate\" title=\"oEmbed (XML)\" type=\"text\/xml+oembed\" href=\"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/oembed\/1.0\/embed?url=https%3A%2F%2Fwww.jkitwerken.nl%2F&format=xml\">\r\n<style id=\"wp-img-auto-sizes-contain-inline-css\">\r\nimg:is([sizes=auto i],[sizes^=\"auto,\" i]){contain-intrinsic-size:3000px 1500px}\r\n<\/style>\r\n<style id=\"wp-emoji-styles-inline-css\">\r\n\timg.wp-smiley, img.emoji {\r\n\t\tdisplay: inline !important;\r\n\t\tborder: none !important;\r\n\t\tbox-shadow: none !important;\r\n\t\theight: 1em !important;\r\n\t\twidth: 1em !important;\r\n\t\tmargin: 0 0.07em !important;\r\n\t\tvertical-align: -0.1em !important;\r\n\t\tbackground: none !important;\r\n\t\tpadding: 0 !important;\r\n\t}\r\n<\/style>\r\n<link rel=\"stylesheet\" id=\"hello-elementor-css\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/themes\/hello-elementor\/assets\/css\/reset.css?ver=3.4.7\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"hello-elementor-theme-style-css\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/themes\/hello-elementor\/assets\/css\/theme.css?ver=3.4.7\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"hello-elementor-header-footer-css\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/themes\/hello-elementor\/assets\/css\/header-footer.css?ver=3.4.7\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"elementor-frontend-css\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/plugins\/elementor\/assets\/css\/frontend.min.css?ver=4.0.1\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"elementor-post-8-css\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/elementor\/css\/post-8.css?ver=1775062234\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"elementor-post-11-css\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/elementor\/css\/post-11.css?ver=1775062234\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"elementor-gf-roboto-css\" href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&display=swap\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"elementor-gf-robotoslab-css\" href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto+Slab:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&display=swap\" media=\"all\">\r\n<script src=\"https:\/\/www.jkitwerken.nl\/wp-includes\/js\/jquery\/jquery.min.js?ver=3.7.1\" id=\"jquery-core-js\"><\/script>\r\n<script src=\"https:\/\/www.jkitwerken.nl\/wp-includes\/js\/jquery\/jquery-migrate.min.js?ver=3.4.1\" id=\"jquery-migrate-js\"><\/script>\r\n<link rel=\"https:\/\/api.w.org\/\" href=\"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/\"><link rel=\"alternate\" title=\"JSON\" type=\"application\/json\" href=\"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/pages\/11\"><link rel=\"EditURI\" type=\"application\/rsd+xml\" title=\"RSD\" href=\"https:\/\/www.jkitwerken.nl\/xmlrpc.php?rsd\">\r\n<meta name=\"generator\" content=\"WordPress 6.9.4\">\r\n<link rel=\"canonical\" href=\"https:\/\/www.jkitwerken.nl\/\">\r\n<link rel=\"shortlink\" href=\"https:\/\/www.jkitwerken.nl\/\">\r\n<meta name=\"generator\" content=\"Elementor 4.0.1; features: e_font_icon_svg, additional_custom_breakpoints; settings: css_print_method-external, google_font-enabled, font_display-swap\">\r\n\t\t\t<style>\r\n\t\t\t\t.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),\r\n\t\t\t\t.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {\r\n\t\t\t\t\tbackground-image: none !important;\r\n\t\t\t\t}\r\n\t\t\t\t@media screen and (max-height: 1024px) {\r\n\t\t\t\t\t.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),\r\n\t\t\t\t\t.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * {\r\n\t\t\t\t\t\tbackground-image: none !important;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\t@media screen and (max-height: 640px) {\r\n\t\t\t\t\t.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),\r\n\t\t\t\t\t.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * {\r\n\t\t\t\t\t\tbackground-image: none !important;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t<\/style>\r\n\t\t\t<link rel=\"icon\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/cropped-JKitwerken_logo_transparant-32x32.png\" sizes=\"32x32\">\r\n<link rel=\"icon\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/cropped-JKitwerken_logo_transparant-192x192.png\" sizes=\"192x192\">\r\n<link rel=\"apple-touch-icon\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/cropped-JKitwerken_logo_transparant-180x180.png\">\r\n<meta name=\"msapplication-TileImage\" content=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/cropped-JKitwerken_logo_transparant-270x270.png\">\r\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\"><script src=\"https:\/\/www.jkitwerken.nl\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.9.4\" defer=\"\"><\/script><\/head>\r\n<body class=\"home wp-singular page-template page-template-elementor_canvas page page-id-11 wp-embed-responsive wp-theme-hello-elementor hello-elementor-default elementor-default elementor-template-canvas elementor-kit-8 elementor-page elementor-page-11 e--ua-blink e--ua-chrome e--ua-webkit\" data-elementor-device-mode=\"desktop\" cz-shortcut-listen=\"true\">\r\n\t\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11\" class=\"elementor elementor-11\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-aeb5969 e-con-full e-flex e-con e-parent e-lazyloaded\" data-id=\"aeb5969\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-44a6fcb elementor-widget elementor-widget-html\" data-id=\"44a6fcb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\r\n\t\t\t\t\t\r\n\r\n\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>JKitwerken \u2013 Strak, waterdicht, betrouwbaar<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n:root {\r\n --dark: #0f1117;\r\n --dark2: #181c26;\r\n --dark3: #1e2330;\r\n --mid: #2a3040;\r\n --steel: #3b4560;\r\n --blue: #2e6ff3;\r\n --blue-light: #4d87ff;\r\n --blue-glow: rgba(46,111,243,.35);\r\n --white: #ffffff;\r\n --offwhite: #f4f5f7;\r\n --grey: #8a93a8;\r\n --light-grey: #e8eaf0;\r\n --glass: rgba(255,255,255,.04);\r\n --glass-border: rgba(255,255,255,.10);\r\n}\r\n\r\nhtml { scroll-behavior: smooth; }\r\n\r\nbody {\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--dark);\r\n color: var(--white);\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hero {\r\n min-height: 100vh;\r\n min-height: 100svh;\r\n background: var(--offwhite);\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n overflow: hidden;\r\n padding-top: env(safe-area-inset-top);\r\n}\r\n#hero::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background-image:\r\n linear-gradient(rgba(46,111,243,.07) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(46,111,243,.07) 1px, transparent 1px);\r\n background-size: 48px 48px;\r\n pointer-events: none;\r\n}\r\n#hero::after {\r\n content: '';\r\n position: absolute;\r\n top: -200px; right: -200px;\r\n width: 700px; height: 700px;\r\n background: radial-gradient(circle, rgba(46,111,243,.10) 0%, transparent 70%);\r\n pointer-events: none;\r\n}\r\n\r\n.topbar {\r\n position: relative; z-index: 10;\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 28px 60px;\r\n}\r\n.logo-wrap { display: flex; align-items: center; gap: 12px; }\r\n.btn-offerte {\r\n background: var(--blue); color: var(--white);\r\n font-size: 15px; font-weight: 500;\r\n padding: 13px 28px; border-radius: 8px;\r\n text-decoration: none; border: none; cursor: pointer;\r\n transition: background .2s, transform .15s;\r\n}\r\n.btn-offerte:hover { background: var(--blue-light); transform: translateY(-1px); }\r\n\r\n.hero-body {\r\n flex: 1;\r\n display: flex; flex-direction: column; justify-content: center;\r\n padding: 40px 60px 80px;\r\n position: relative; z-index: 5;\r\n max-width: 780px;\r\n}\r\n.hero-tag {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: rgba(46,111,243,.12);\r\n border: 1px solid rgba(46,111,243,.25);\r\n color: var(--blue);\r\n font-size: 13px; font-weight: 500;\r\n padding: 6px 14px; border-radius: 100px;\r\n margin-bottom: 28px; width: fit-content;\r\n}\r\n.hero-tag::before { content: ''; width: 6px; height: 6px; background: var(--blue); border-radius: 50%; }\r\n.hero-h1 {\r\n font-size: clamp(42px, 6vw, 80px);\r\n font-weight: 800; line-height: 1.05;\r\n letter-spacing: -2px; color: var(--dark);\r\n margin-bottom: 24px;\r\n}\r\n.hero-h1 em { font-style: normal; color: var(--blue); }\r\n.hero-sub {\r\n font-size: 18px; line-height: 1.65;\r\n color: rgba(15,17,23,.55);\r\n margin-bottom: 44px; max-width: 520px; font-weight: 300;\r\n}\r\n.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\r\n.btn-primary {\r\n background: var(--blue); color: var(--white);\r\n font-size: 16px; font-weight: 500;\r\n padding: 16px 36px; border-radius: 8px;\r\n text-decoration: none; border: none; cursor: pointer;\r\n transition: background .2s, transform .15s;\r\n}\r\n.btn-primary:hover { background: var(--blue-light); transform: translateY(-1px); }\r\n.btn-ghost-light {\r\n color: rgba(15,17,23,.5); font-size: 15px;\r\n text-decoration: none;\r\n display: flex; align-items: center; gap: 8px;\r\n transition: color .2s; border: none; background: none; cursor: pointer;\r\n}\r\n.btn-ghost-light:hover { color: var(--dark); }\r\n.btn-ghost-light svg { transition: transform .2s; }\r\n.btn-ghost-light:hover svg { transform: translateX(3px); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n STATS BAR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.stats-bar {\r\n background: var(--dark2);\r\n border-top: 1px solid rgba(255,255,255,.06);\r\n border-bottom: 1px solid rgba(255,255,255,.06);\r\n padding: 32px 60px;\r\n display: flex; justify-content: space-around; flex-wrap: wrap;\r\n}\r\n.stat-item { text-align: center; padding: 0 40px; border-right: 1px solid rgba(255,255,255,.08); }\r\n.stat-item:last-child { border-right: none; }\r\n.stat-num { font-size: 36px; font-weight: 800; color: var(--white); letter-spacing: -1px; line-height: 1; }\r\n.stat-num span { color: var(--blue); }\r\n.stat-label { font-size: 13px; color: var(--grey); margin-top: 6px; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SHARED SECTION STYLES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nsection { padding: 100px 60px; }\r\n.section-label {\r\n font-size: 12px; font-weight: 600;\r\n letter-spacing: 2.5px; text-transform: uppercase;\r\n color: var(--blue); margin-bottom: 16px;\r\n}\r\n.section-title {\r\n font-size: clamp(30px, 4vw, 46px);\r\n font-weight: 800; line-height: 1.1;\r\n letter-spacing: -1.5px; margin-bottom: 16px;\r\n}\r\n.section-sub { font-size: 16px; line-height: 1.7; max-width: 540px; }\r\n.section-dark .section-title { color: var(--white); }\r\n.section-dark .section-sub { color: rgba(255,255,255,.5); }\r\n.section-light .section-title { color: var(--dark); }\r\n.section-light .section-sub { color: rgba(15,17,23,.55); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n DIENSTEN\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#diensten { background: var(--dark2); }\r\n.diensten-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\r\n gap: 24px; margin-top: 56px;\r\n}\r\n.dienst-card {\r\n background: var(--dark3);\r\n border-radius: 14px; padding: 0;\r\n border: 1px solid rgba(255,255,255,.07);\r\n position: relative; overflow: hidden;\r\n transition: box-shadow .25s, transform .2s;\r\n display: flex; flex-direction: column;\r\n}\r\n.dienst-card::before {\r\n content: '';\r\n position: absolute; top: 0; left: 0; right: 0;\r\n height: 3px; background: var(--blue);\r\n transform: scaleX(0); transform-origin: left;\r\n transition: transform .3s; z-index: 2;\r\n}\r\n.dienst-card:hover::before { transform: scaleX(1); }\r\n.dienst-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.3); transform: translateY(-3px); }\r\n.dienst-foto { width: 100%; height: 180px; object-fit: cover; display: block; }\r\n.dienst-body { padding: 28px 28px 32px; flex: 1; }\r\n.dienst-icon {\r\n width: 48px; height: 48px;\r\n background: rgba(46,111,243,.15);\r\n border-radius: 12px;\r\n display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 18px;\r\n}\r\n.dienst-icon svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.8; }\r\n.dienst-title { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 10px; }\r\n.dienst-desc { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.45); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n WERKWIJZE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#werkwijze { background: var(--dark3); }\r\n.stappen-grid {\r\n display: grid; grid-template-columns: repeat(4, 1fr);\r\n gap: 0; margin-top: 60px; position: relative;\r\n}\r\n.stappen-grid::before {\r\n content: '';\r\n position: absolute; top: 28px; left: 10%; right: 10%;\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, var(--steel), var(--steel), transparent);\r\n}\r\n.stap-item { padding: 0 28px; text-align: center; position: relative; }\r\n.stap-num {\r\n width: 56px; height: 56px; border-radius: 50%;\r\n background: var(--blue); color: var(--white);\r\n font-size: 20px; font-weight: 800;\r\n display: flex; align-items: center; justify-content: center;\r\n margin: 0 auto 24px; position: relative; z-index: 2;\r\n box-shadow: 0 0 0 6px var(--dark3), 0 0 0 8px rgba(46,111,243,.25);\r\n}\r\n.stap-title { font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 10px; }\r\n.stap-desc { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.45); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PROJECTEN\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#projecten { background: var(--dark); padding: 100px 0 0; }\r\n.projecten-intro {\r\n display: flex; justify-content: space-between; align-items: flex-end;\r\n margin-bottom: 56px; flex-wrap: wrap; gap: 24px;\r\n padding: 0 60px;\r\n}\r\n.projecten-intro .section-label { color: var(--blue); }\r\n.projecten-intro .section-title {\r\n font-size: clamp(52px, 7vw, 96px);\r\n letter-spacing: -3px;\r\n color: var(--white);\r\n margin-bottom: 0;\r\n line-height: 1;\r\n}\r\n.projecten-intro p { color: rgba(255,255,255,.35) !important; }\r\n\r\n.foto-grid {\r\n display: grid;\r\n grid-template-columns: 1.5fr 1fr 1fr;\r\n grid-template-rows: 420px 360px;\r\n gap: 3px;\r\n}\r\n.foto-item {\r\n border-radius: 0;\r\n background: var(--dark3);\r\n border: none;\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n}\r\n.foto-item::after {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: rgba(0,0,0,.25);\r\n transition: background .35s;\r\n}\r\n.foto-item:hover::after { background: rgba(0,0,0,.05); }\r\n.foto-item:hover img { transform: scale(1.04); }\r\n.foto-item:first-child { grid-row: span 2; }\r\n.foto-item img {\r\n width: 100%; height: 100%;\r\n object-fit: cover; display: block;\r\n transition: transform .6s cubic-bezier(.25,.46,.45,.94);\r\n}\r\n.foto-caption {\r\n position: absolute; bottom: 0; left: 0; right: 0;\r\n background: linear-gradient(transparent, rgba(0,0,0,.82));\r\n color: #fff; font-size: 14px; font-weight: 400;\r\n padding: 48px 20px 18px; line-height: 1.4;\r\n pointer-events: none;\r\n z-index: 2;\r\n letter-spacing: .1px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n OVER ONS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#over { background: var(--dark2); }\r\n.over-layout {\r\n display: grid;\r\n grid-template-columns: 1fr 1.6fr;\r\n gap: 80px;\r\n align-items: start;\r\n margin-top: 48px;\r\n}\r\n.over-grid {\r\n display: grid; grid-template-columns: 1fr 1fr;\r\n gap: 80px; align-items: center; margin-top: 60px;\r\n}\r\n.over-img-wrap { position: relative; }\r\n.over-img-box {\r\n width: 100%; aspect-ratio: 4\/5;\r\n background: var(--dark3); border-radius: 16px;\r\n overflow: hidden;\r\n display: flex; align-items: center; justify-content: center;\r\n border: 1px solid rgba(255,255,255,.07);\r\n}\r\n.over-img-box svg { width: 56px; height: 56px; stroke: var(--steel); fill: none; opacity: .35; }\r\n.over-badge {\r\n position: absolute; bottom: 28px; right: -20px;\r\n background: var(--blue); color: var(--white);\r\n padding: 18px 24px; border-radius: 12px;\r\n font-weight: 700; font-size: 15px;\r\n box-shadow: 0 8px 32px rgba(46,111,243,.35); line-height: 1.3;\r\n}\r\n.over-badge small { display: block; font-size: 11px; font-weight: 400; opacity: .75; margin-top: 3px; }\r\n.over-functie { font-size: 12px; color: var(--blue); font-weight: 500; margin-bottom: 20px; letter-spacing: .3px; text-transform: uppercase; }\r\n.over-tekst { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.5); margin-bottom: 28px; }\r\n.over-punten { list-style: none; display: flex; flex-direction: column; gap: 10px; }\r\n.over-punten li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.5; }\r\n.over-punten li::before { content: ''; flex-shrink: 0; margin-top: 5px; width: 6px; height: 6px; background: var(--blue); border-radius: 50%; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n WERKGEBIED\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#werkgebied { background: var(--dark3); }\r\n.werkgebied-grid {\r\n display: grid; grid-template-columns: 1fr 1.4fr;\r\n gap: 64px; align-items: center; margin-top: 56px;\r\n}\r\n.werkgebied-info p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.5); margin-bottom: 32px; }\r\n.plaatsen-lijst { list-style: none; display: flex; flex-direction: column; gap: 8px; }\r\n.plaatsen-lijst li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.6); }\r\n.plaatsen-lijst li::before { content: ''; width: 6px; height: 6px; background: var(--blue); border-radius: 50%; flex-shrink: 0; }\r\n.map-wrap {\r\n border-radius: 14px; overflow: hidden;\r\n border: 1px solid rgba(255,255,255,.07);\r\n box-shadow: 0 20px 60px rgba(0,0,0,.3); height: 380px;\r\n}\r\n.map-wrap iframe { width: 100%; height: 100%; border: none; display: block; filter: invert(90%) hue-rotate(180deg) brightness(.85) contrast(1.1); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n OFFERTE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#offerte {\r\n background: var(--dark);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n#offerte::before {\r\n content: '';\r\n position: absolute;\r\n top: -300px; left: 50%; transform: translateX(-50%);\r\n width: 900px; height: 900px;\r\n background: radial-gradient(circle, rgba(46,111,243,.08) 0%, transparent 65%);\r\n pointer-events: none;\r\n}\r\n#offerte::after {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background-image:\r\n linear-gradient(rgba(46,111,243,.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(46,111,243,.03) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n pointer-events: none;\r\n}\r\n\r\n.offerte-inner {\r\n position: relative; z-index: 2;\r\n}\r\n\r\n.offerte-header {\r\n text-align: center;\r\n margin-bottom: 56px;\r\n}\r\n.offerte-header .section-label { justify-content: center; display: flex; }\r\n.offerte-header .section-title { color: var(--white); }\r\n.offerte-header .section-sub { color: rgba(255,255,255,.45); margin: 0 auto; text-align: center; }\r\n\r\n.offerte-wrap { max-width: 820px; margin: 0 auto; }\r\n\r\n.progress-track {\r\n display: flex; align-items: center;\r\n margin-bottom: 52px;\r\n gap: 0;\r\n}\r\n.prog-step {\r\n flex: 1; display: flex; flex-direction: column;\r\n align-items: center; position: relative;\r\n}\r\n.prog-step::after {\r\n content: '';\r\n position: absolute; top: 20px; left: calc(50% + 22px);\r\n right: calc(-50% + 22px); height: 1px;\r\n background: rgba(255,255,255,.1);\r\n transition: background .4s;\r\n}\r\n.prog-step:last-child::after { display: none; }\r\n.prog-step.done::after { background: var(--blue); }\r\n\r\n.prog-dot {\r\n width: 40px; height: 40px; border-radius: 50%;\r\n border: 1.5px solid rgba(255,255,255,.18);\r\n background: rgba(255,255,255,.04);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 13px; font-weight: 700;\r\n color: rgba(255,255,255,.3);\r\n position: relative; z-index: 1;\r\n transition: all .35s cubic-bezier(.4,0,.2,1);\r\n}\r\n.prog-step.active .prog-dot {\r\n background: var(--blue);\r\n border-color: var(--blue);\r\n color: var(--white);\r\n box-shadow: 0 0 0 6px rgba(46,111,243,.18), 0 0 20px rgba(46,111,243,.3);\r\n}\r\n.prog-step.done .prog-dot {\r\n background: var(--blue);\r\n border-color: var(--blue);\r\n color: var(--white);\r\n}\r\n.prog-step.done .prog-dot::after {\r\n content: '\u2713';\r\n position: absolute;\r\n font-size: 14px;\r\n}\r\n.prog-step.done .prog-dot span { display: none; }\r\n\r\n.prog-label {\r\n font-size: 11px; letter-spacing: .8px;\r\n text-transform: uppercase; margin-top: 10px;\r\n color: rgba(255,255,255,.25);\r\n transition: color .3s;\r\n}\r\n.prog-step.active .prog-label { color: var(--blue); }\r\n.prog-step.done .prog-label { color: rgba(255,255,255,.45); }\r\n\r\n.form-card {\r\n background: rgba(255,255,255,.03);\r\n border: 1px solid rgba(255,255,255,.09);\r\n border-radius: 20px;\r\n padding: 48px 52px;\r\n backdrop-filter: blur(12px);\r\n box-shadow: 0 40px 80px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);\r\n}\r\n\r\n.form-step { display: none; }\r\n.form-step.active {\r\n display: block;\r\n animation: stepIn .35s cubic-bezier(.4,0,.2,1);\r\n}\r\n@keyframes stepIn {\r\n from { opacity: 0; transform: translateY(14px); }\r\n to { opacity: 1; transform: none; }\r\n}\r\n\r\n.step-head { margin-bottom: 36px; }\r\n.step-num {\r\n font-size: 11px; font-weight: 600; letter-spacing: 2px;\r\n text-transform: uppercase; color: var(--blue);\r\n margin-bottom: 8px;\r\n}\r\n.step-title {\r\n font-size: 28px; font-weight: 800;\r\n color: var(--white); letter-spacing: -.5px;\r\n margin-bottom: 6px;\r\n}\r\n.step-sub { font-size: 14px; color: rgba(255,255,255,.4); line-height: 1.6; }\r\n\r\n.dienst-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 14px;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.dienst-opt {\r\n position: relative;\r\n border: 1.5px solid rgba(255,255,255,.1);\r\n border-radius: 14px;\r\n padding: 20px 20px 20px 20px;\r\n cursor: pointer;\r\n transition:\r\n border-color .25s,\r\n background .25s,\r\n box-shadow .25s,\r\n transform .2s;\r\n display: flex; align-items: center; gap: 16px;\r\n background: rgba(255,255,255,.03);\r\n overflow: hidden;\r\n user-select: none;\r\n}\r\n\r\n.dienst-opt::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: radial-gradient(circle at 30% 50%, rgba(46,111,243,.10), transparent 70%);\r\n opacity: 0;\r\n transition: opacity .3s;\r\n border-radius: inherit;\r\n}\r\n\r\n.dienst-opt:hover {\r\n border-color: rgba(46,111,243,.5);\r\n background: rgba(46,111,243,.07);\r\n box-shadow: 0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);\r\n transform: translateY(-2px);\r\n}\r\n.dienst-opt:hover::before { opacity: 1; }\r\n\r\n.dienst-opt.selected {\r\n border-color: var(--blue);\r\n background: rgba(46,111,243,.12);\r\n box-shadow:\r\n 0 0 0 1px var(--blue),\r\n 0 8px 32px rgba(46,111,243,.18),\r\n inset 0 1px 0 rgba(255,255,255,.08);\r\n transform: translateY(-2px);\r\n}\r\n.dienst-opt.selected::before { opacity: 1; }\r\n\r\n.d-icon {\r\n flex-shrink: 0;\r\n width: 44px; height: 44px;\r\n border-radius: 11px;\r\n background: rgba(46,111,243,.12);\r\n border: 1px solid rgba(46,111,243,.2);\r\n display: flex; align-items: center; justify-content: center;\r\n transition: background .25s, box-shadow .25s;\r\n}\r\n.dienst-opt.selected .d-icon {\r\n background: rgba(46,111,243,.25);\r\n box-shadow: 0 0 12px rgba(46,111,243,.3);\r\n}\r\n.d-icon svg { width: 20px; height: 20px; stroke: var(--blue-light); fill: none; stroke-width: 1.8; }\r\n\r\n.d-text { flex: 1; min-width: 0; }\r\n.d-text strong { display: block; font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 2px; }\r\n.d-text small { font-size: 12px; color: rgba(255,255,255,.38); }\r\n\r\n.d-check {\r\n position: absolute; top: 12px; right: 12px;\r\n width: 22px; height: 22px; border-radius: 50%;\r\n background: var(--blue);\r\n display: flex; align-items: center; justify-content: center;\r\n opacity: 0; transform: scale(.5) rotate(-20deg);\r\n transition: opacity .25s, transform .3s cubic-bezier(.34,1.56,.64,1);\r\n box-shadow: 0 2px 8px rgba(46,111,243,.5);\r\n}\r\n.dienst-opt.selected .d-check { opacity: 1; transform: scale(1) rotate(0deg); }\r\n.d-check svg { width: 12px; height: 12px; stroke: white; fill: none; stroke-width: 2.8; }\r\n\r\n.dienst-hint {\r\n font-size: 12px; color: rgba(255,255,255,.25);\r\n margin-bottom: 32px;\r\n display: flex; align-items: center; gap: 8px;\r\n}\r\n.dienst-hint::before {\r\n content: '';\r\n width: 4px; height: 4px;\r\n background: var(--blue); border-radius: 50%; opacity: .6;\r\n}\r\n\r\n.type-row {\r\n display: grid; grid-template-columns: 1fr 1fr;\r\n gap: 12px; margin-bottom: 10px;\r\n}\r\n\r\n.type-opt {\r\n position: relative;\r\n border: 1.5px solid rgba(255,255,255,.1);\r\n border-radius: 12px;\r\n padding: 16px 18px;\r\n cursor: pointer;\r\n transition: border-color .22s, background .22s, box-shadow .22s, transform .18s;\r\n display: flex; align-items: center; gap: 12px;\r\n background: rgba(255,255,255,.03);\r\n user-select: none;\r\n}\r\n.type-opt::before {\r\n content: '';\r\n position: absolute; inset: 0; border-radius: inherit;\r\n background: radial-gradient(circle at 20% 50%, rgba(46,111,243,.08), transparent 60%);\r\n opacity: 0; transition: opacity .25s;\r\n}\r\n.type-opt:hover {\r\n border-color: rgba(46,111,243,.45);\r\n background: rgba(46,111,243,.06);\r\n transform: translateY(-1px);\r\n box-shadow: 0 4px 16px rgba(0,0,0,.15);\r\n}\r\n.type-opt:hover::before { opacity: 1; }\r\n.type-opt.selected {\r\n border-color: var(--blue);\r\n background: rgba(46,111,243,.1);\r\n box-shadow: 0 0 0 1px var(--blue), 0 6px 24px rgba(46,111,243,.15);\r\n transform: translateY(-1px);\r\n}\r\n.type-opt.selected::before { opacity: 1; }\r\n\r\n.type-radio {\r\n width: 20px; height: 20px; border-radius: 50%;\r\n border: 2px solid rgba(255,255,255,.2);\r\n flex-shrink: 0; position: relative;\r\n transition: border-color .22s;\r\n}\r\n.type-radio::after {\r\n content: '';\r\n position: absolute; inset: 3px;\r\n border-radius: 50%; background: var(--blue);\r\n opacity: 0; transform: scale(0);\r\n transition: opacity .22s, transform .25s cubic-bezier(.34,1.56,.64,1);\r\n}\r\n.type-opt.selected .type-radio {\r\n border-color: var(--blue);\r\n box-shadow: 0 0 0 3px rgba(46,111,243,.2);\r\n}\r\n.type-opt.selected .type-radio::after { opacity: 1; transform: scale(1); }\r\n\r\n.type-label { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.75); }\r\n.type-opt.selected .type-label { color: var(--white); }\r\n\r\n.type-section-label {\r\n font-size: 12px; font-weight: 600; letter-spacing: 1.5px;\r\n text-transform: uppercase; color: rgba(255,255,255,.35);\r\n margin-bottom: 10px; margin-top: 24px;\r\n}\r\n\r\n.field { margin-bottom: 20px; }\r\n.field label {\r\n display: block; font-size: 13px; font-weight: 500;\r\n color: rgba(255,255,255,.45); margin-bottom: 8px; letter-spacing: .3px;\r\n}\r\n.field input,\r\n.field textarea {\r\n width: 100%;\r\n background: rgba(255,255,255,.05);\r\n border: 1.5px solid rgba(255,255,255,.1);\r\n border-radius: 10px;\r\n padding: 14px 18px;\r\n font-size: 15px; color: var(--white);\r\n font-family: 'DM Sans', sans-serif;\r\n outline: none;\r\n transition: border-color .22s, background .22s, box-shadow .22s;\r\n}\r\n.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.2); }\r\n.field input:hover, .field textarea:hover { border-color: rgba(255,255,255,.2); }\r\n.field input:focus, .field textarea:focus {\r\n border-color: var(--blue);\r\n background: rgba(46,111,243,.06);\r\n box-shadow: 0 0 0 3px rgba(46,111,243,.12);\r\n}\r\n.field textarea { resize: vertical; min-height: 110px; }\r\n.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\r\n\r\n.overzicht-card {\r\n background: rgba(255,255,255,.04);\r\n border: 1px solid rgba(255,255,255,.1);\r\n border-radius: 14px; overflow: hidden;\r\n margin-bottom: 28px;\r\n}\r\n.overzicht-row {\r\n display: flex; justify-content: space-between;\r\n align-items: flex-start;\r\n padding: 15px 24px;\r\n border-bottom: 1px solid rgba(255,255,255,.06);\r\n gap: 20px;\r\n}\r\n.overzicht-row:last-child { border-bottom: none; }\r\n.overzicht-row dt { font-size: 13px; color: rgba(255,255,255,.35); flex-shrink: 0; width: 140px; }\r\n.overzicht-row dd { font-size: 14px; color: rgba(255,255,255,.85); text-align: right; }\r\n.dienst-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }\r\n.dienst-tag {\r\n background: rgba(46,111,243,.15);\r\n color: var(--blue-light);\r\n font-size: 12px; font-weight: 500;\r\n padding: 3px 10px; border-radius: 100px;\r\n border: 1px solid rgba(46,111,243,.25);\r\n}\r\n\r\n.form-nav {\r\n display: flex; gap: 14px; align-items: center;\r\n margin-top: 36px; flex-wrap: wrap;\r\n}\r\n.btn-back {\r\n background: transparent;\r\n border: 1.5px solid rgba(255,255,255,.12);\r\n color: rgba(255,255,255,.4);\r\n padding: 14px 26px; border-radius: 10px;\r\n font-size: 15px; font-family: 'DM Sans', sans-serif;\r\n cursor: pointer;\r\n transition: border-color .22s, color .22s, background .22s;\r\n}\r\n.btn-back:hover {\r\n border-color: rgba(255,255,255,.3);\r\n color: var(--white);\r\n background: rgba(255,255,255,.05);\r\n}\r\n.btn-next {\r\n position: relative; overflow: hidden;\r\n background: var(--blue); border: none;\r\n color: var(--white);\r\n padding: 14px 32px; border-radius: 10px;\r\n font-size: 15px; font-weight: 600;\r\n font-family: 'DM Sans', sans-serif;\r\n cursor: pointer;\r\n transition: background .22s, transform .18s, box-shadow .22s;\r\n display: flex; align-items: center; gap: 10px;\r\n box-shadow: 0 4px 20px rgba(46,111,243,.3);\r\n}\r\n.btn-next::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);\r\n opacity: 0; transition: opacity .22s;\r\n}\r\n.btn-next:hover {\r\n background: var(--blue-light);\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 32px rgba(46,111,243,.45);\r\n}\r\n.btn-next:hover::before { opacity: 1; }\r\n.btn-next:active { transform: translateY(0); }\r\n\r\n.success-screen { display: none; text-align: center; padding: 60px 0; animation: stepIn .4s ease; }\r\n.success-screen.active { display: block; }\r\n.success-ring {\r\n width: 80px; height: 80px; border-radius: 50%;\r\n border: 2px solid rgba(46,111,243,.3);\r\n display: flex; align-items: center; justify-content: center;\r\n margin: 0 auto 28px;\r\n position: relative;\r\n animation: pulseRing 2s ease infinite;\r\n}\r\n.success-ring::before {\r\n content: '';\r\n position: absolute; inset: -8px; border-radius: 50%;\r\n border: 1px solid rgba(46,111,243,.12);\r\n}\r\n@keyframes pulseRing {\r\n 0%, 100% { box-shadow: 0 0 0 0 rgba(46,111,243,.25); }\r\n 50% { box-shadow: 0 0 0 12px rgba(46,111,243,.0); }\r\n}\r\n.success-icon-inner {\r\n width: 56px; height: 56px; border-radius: 50%;\r\n background: rgba(46,111,243,.15);\r\n display: flex; align-items: center; justify-content: center;\r\n}\r\n.success-icon-inner svg { width: 26px; height: 26px; stroke: var(--blue-light); fill: none; stroke-width: 2.5; }\r\n.success-screen h3 { font-size: 28px; font-weight: 800; color: var(--white); margin-bottom: 12px; letter-spacing: -.5px; }\r\n.success-screen p { font-size: 15px; color: rgba(255,255,255,.45); line-height: 1.7; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FOOTER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfooter {\r\n background: var(--dark2);\r\n border-top: 1px solid rgba(255,255,255,.06);\r\n padding: 48px 60px;\r\n display: flex; justify-content: space-between; align-items: center;\r\n flex-wrap: wrap; gap: 24px;\r\n}\r\n\/* AANPASSING: JK ook blauw, \"it\" blijft blauw \u2014 hele naam is donkerblauw tekst *\/\r\n.footer-logo {\r\n font-size: 18px; font-weight: 800;\r\n color: var(--blue); \/* hele naam blauw *\/\r\n letter-spacing: -.3px;\r\n}\r\n\/* \"werken\" in wit zodat alleen JKit blauw is en \"werken\" afwijkt *\/\r\n.footer-logo .werken {\r\n color: var(--white);\r\n}\r\n.footer-kvk { font-size: 12px; color: var(--steel); margin-top: 6px; }\r\n.footer-info { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }\r\n.footer-item {\r\n display: flex; align-items: center; gap: 8px;\r\n font-size: 13px; color: var(--grey); text-decoration: none;\r\n transition: color .2s;\r\n}\r\n.footer-item:hover { color: var(--white); }\r\n.footer-item svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }\r\n.footer-social { display: flex; gap: 10px; }\r\n.footer-social a {\r\n width: 36px; height: 36px; border-radius: 9px;\r\n background: rgba(255,255,255,.06);\r\n border: 1px solid rgba(255,255,255,.1);\r\n display: flex; align-items: center; justify-content: center;\r\n text-decoration: none;\r\n transition: background .2s, border-color .2s, transform .15s;\r\n}\r\n.footer-social a:hover {\r\n background: rgba(46,111,243,.22);\r\n border-color: rgba(46,111,243,.4);\r\n transform: translateY(-2px);\r\n}\r\n.footer-social svg { width: 16px; height: 16px; fill: var(--grey); transition: fill .2s; }\r\n.footer-social a:hover svg { fill: var(--white); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n WHATSAPP\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.wa-btn {\r\n position: fixed; bottom: 28px; right: 28px; z-index: 1000;\r\n width: 56px; height: 56px; background: #25D366;\r\n border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n box-shadow: 0 4px 20px rgba(37,211,102,.4);\r\n text-decoration: none; transition: transform .2s, box-shadow .2s;\r\n}\r\n.wa-btn:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37,211,102,.5); }\r\n.wa-btn svg { width: 28px; height: 28px; fill: white; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 900px) {\r\n .topbar, section, footer { padding-left: 28px; padding-right: 28px; }\r\n .stats-bar { padding: 24px 28px; }\r\n .stat-item { padding: 0 16px; }\r\n .hero-body { padding: 40px 28px 60px; }\r\n .stappen-grid { grid-template-columns: 1fr 1fr; gap: 40px; }\r\n .stappen-grid::before { display: none; }\r\n .projecten-intro { padding: 0 28px; }\r\n .foto-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }\r\n .foto-item:first-child { grid-row: span 1; }\r\n .foto-item { min-height: 260px; }\r\n .over-layout { grid-template-columns: 1fr; gap: 36px; }\r\n .over-grid, .werkgebied-grid { grid-template-columns: 1fr; gap: 40px; }\r\n .dienst-grid { grid-template-columns: 1fr; }\r\n .field-row { grid-template-columns: 1fr; }\r\n .form-card { padding: 32px 28px; }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n .topbar { padding: 16px 20px; }\r\n .btn-offerte { font-size: 12px; padding: 9px 14px; white-space: nowrap; }\r\n #hero { min-height: 100svh; }\r\n .hero-body { padding: 28px 20px 52px; max-width: 100%; }\r\n .hero-tag { font-size: 12px; padding: 5px 12px; margin-bottom: 20px; }\r\n .hero-h1 { font-size: clamp(32px, 9vw, 46px); letter-spacing: -1px; margin-bottom: 16px; }\r\n .hero-sub { font-size: 15px; margin-bottom: 28px; }\r\n .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }\r\n .btn-primary { text-align: center; padding: 15px 24px; }\r\n .btn-ghost-light { justify-content: center; }\r\n .stats-bar { padding: 0 20px; }\r\n .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding: 16px 0; width: 100%; }\r\n .stat-item:last-child { border-bottom: none; }\r\n section { padding: 64px 20px; }\r\n footer { padding: 36px 20px; }\r\n .stappen-grid { grid-template-columns: 1fr; }\r\n .foto-grid { grid-template-columns: 1fr; }\r\n .foto-item { min-height: 280px; }\r\n .diensten-grid { grid-template-columns: 1fr; }\r\n .type-row { grid-template-columns: 1fr; }\r\n .form-card { padding: 28px 20px; }\r\n .progress-track { gap: 0; }\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n\r\n<section id=\"hero\" class=\"section-light\">\r\n <div class=\"topbar\">\r\n <div class=\"logo-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/jkitwerken.nl\/wp-content\/uploads\/2026\/03\/JKitwerken_logo_transparant.png\" alt=\"JKitwerken\" style=\"width:130px;height:auto;max-height:50px;display:block;object-fit:contain;\">\r\n <\/div>\r\n <a href=\"#offerte\" class=\"btn-offerte\">Offerte aanvragen<\/a>\r\n <\/div>\r\n <div class=\"hero-body\">\r\n <div class=\"hero-tag\">Mierlo & omstreken \u00b7 heel Nederland op aanvraag<\/div>\r\n <h1 class=\"hero-h1\">Strak,<br><em>waterdicht,<\/em><br>betrouwbaar.<\/h1>\r\n <p class=\"hero-sub\">Vakmanschap en precisie voor duurzame kitoplossingen. Voor particulieren en zakelijke opdrachtgevers \u2014 actief in Mierlo en omstreken, door heel Nederland op aanvraag.<\/p>\r\n <div class=\"hero-ctas\">\r\n <a href=\"#offerte\" class=\"btn-primary\">Vraag een offerte aan<\/a>\r\n <a href=\"#diensten\" class=\"btn-ghost-light\">\r\n Bekijk diensten\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<div class=\"stats-bar\">\r\n <div class=\"stat-item\"><div class=\"stat-num\">100<span>%<\/span><\/div><div class=\"stat-label\">Kwaliteitsgarantie<\/div><\/div>\r\n <div class=\"stat-item\"><div class=\"stat-num\">Particulier<\/div><div class=\"stat-label\">& zakelijk<\/div><\/div>\r\n <div class=\"stat-item\"><div class=\"stat-num\">5<\/div><div class=\"stat-label\">Gespecialiseerde diensten<\/div><\/div>\r\n <div class=\"stat-item\"><div class=\"stat-num\">Nieuwbouw<\/div><div class=\"stat-label\">& renovatie<\/div><\/div>\r\n<\/div>\r\n\r\n\r\n<section id=\"diensten\" class=\"section-dark\">\r\n <div class=\"section-label\">Wat wij doen<\/div>\r\n <h2 class=\"section-title\">Onze diensten<\/h2>\r\n <p class=\"section-sub\">Gespecialiseerde kitafwerkingen, perfect afgestemd op uw wensen. Wij luisteren, denken mee en bieden duurzame oplossingen voor elk project.<\/p>\r\n <div class=\"diensten-grid\">\r\n <div class=\"dienst-card\">\r\n <img decoding=\"async\" class=\"dienst-foto\" src=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_1379-scaled.jpeg\" alt=\"Sanitair\" loading=\"lazy\">\r\n <div class=\"dienst-body\">\r\n <div class=\"dienst-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M7 7h10v10H7z\"><\/path><path d=\"M5 12H2M22 12h-3M12 5V2M12 22v-3\"><\/path><\/svg><\/div>\r\n <div class=\"dienst-title\">Sanitair<\/div>\r\n <p class=\"dienst-desc\">Waterdicht kitten van sanitaire ruimtes: douche, bad, wastafel en toilet. Wij verwijderen oude kit en brengen een strakke, duurzame kitnaad aan.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dienst-card\">\r\n <img decoding=\"async\" class=\"dienst-foto\" src=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_8724-scaled.jpeg\" alt=\"Plinten\" loading=\"lazy\">\r\n <div class=\"dienst-body\">\r\n <div class=\"dienst-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><path d=\"M3 9h18M9 3v18\"><\/path><\/svg><\/div>\r\n <div class=\"dienst-title\">Plinten<\/div>\r\n <p class=\"dienst-desc\">Nette afwerking van plinten en aansluitingen. Strakke verbinding tussen vloer en wand, zowel in nieuwbouw als bij renovatieprojecten.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dienst-card\">\r\n <img decoding=\"async\" class=\"dienst-foto\" src=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_6341-scaled.jpeg\" alt=\"Kozijnen\" loading=\"lazy\">\r\n <div class=\"dienst-body\">\r\n <div class=\"dienst-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"><\/rect><path d=\"M2 10h20M12 4v16\"><\/path><\/svg><\/div>\r\n <div class=\"dienst-title\">Kozijnen<\/div>\r\n <p class=\"dienst-desc\">Professioneel kitten van kozijnen binnen \u00e9n buiten voor perfecte afwerking en optimale waterdichtheid en isolatie.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dienst-card\">\r\n <img decoding=\"async\" class=\"dienst-foto\" src=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_1372-scaled.jpeg\" alt=\"Beglazing\" loading=\"lazy\">\r\n <div class=\"dienst-body\">\r\n <div class=\"dienst-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"2\"><\/rect><path d=\"M7 7h10v10H7z\"><\/path><\/svg><\/div>\r\n <div class=\"dienst-title\">Beglazing<\/div>\r\n <p class=\"dienst-desc\">Kitten van beglazing voor een waterdichte en duurzame aansluiting rondom elk type glas en raamwerk.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dienst-card\">\r\n <img decoding=\"async\" class=\"dienst-foto\" src=\"https:\/\/jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_9935-scaled.jpeg\" alt=\"Speciaal kitwerk\" loading=\"lazy\">\r\n <div class=\"dienst-body\">\r\n <div class=\"dienst-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" stroke-width=\"1.8\"><\/path><\/svg><\/div>\r\n <div class=\"dienst-title\">Speciaal kitwerk<\/div>\r\n <p class=\"dienst-desc\">Projecten buiten de standaard \u2014 zoals betonnen buitentrappen, grote zakelijke objecten of specifieke constructies. Neem contact op voor maatwerk.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"werkwijze\" class=\"section-dark\">\r\n <div class=\"section-label\">Hoe het werkt<\/div>\r\n <h2 class=\"section-title\">Van aanvraag tot oplevering<\/h2>\r\n <p class=\"section-sub\">Transparant, snel en zonder gedoe. In vier stappen van eerste contact tot strakke oplevering.<\/p>\r\n <div class=\"stappen-grid\">\r\n <div class=\"stap-item\"><div class=\"stap-num\">1<\/div><div class=\"stap-title\">Aanvraag<\/div><p class=\"stap-desc\">Vul het offerteformulier in of neem direct contact op via telefoon of WhatsApp.<\/p><\/div>\r\n <div class=\"stap-item\"><div class=\"stap-num\">2<\/div><div class=\"stap-title\">Vrijblijvende offerte<\/div><p class=\"stap-desc\">Wij nemen contact op, stellen vragen en sturen een duidelijke offerte zonder verborgen kosten.<\/p><\/div>\r\n <div class=\"stap-item\"><div class=\"stap-num\">3<\/div><div class=\"stap-title\">Uitvoering<\/div><p class=\"stap-desc\">Op een afgesproken moment voeren wij het werk vakkundig en netjes uit.<\/p><\/div>\r\n <div class=\"stap-item\"><div class=\"stap-num\">4<\/div><div class=\"stap-title\">Oplevering<\/div><p class=\"stap-desc\">U inspecteert het resultaat. Pas als u tevreden bent is het werk klaar.<\/p><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"projecten\" class=\"section-light\">\r\n <div class=\"projecten-intro\">\r\n <div>\r\n <div class=\"section-label\">Ons werk<\/div>\r\n <h2 class=\"section-title\">Projecten<\/h2>\r\n <\/div>\r\n <p style=\"color:rgba(15,17,23,.4);font-size:14px;max-width:280px;text-align:right;line-height:1.6;\">Een selectie van uitgevoerde projecten.<\/p>\r\n <\/div>\r\n <div class=\"foto-grid\">\r\n <div class=\"foto-item\">\r\n <img decoding=\"async\" src=\"https:\/\/jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_9935-scaled.jpeg\" alt=\"Betonnen buitentrap Helmond Sport\" loading=\"lazy\">\r\n <div class=\"foto-caption\">Betonnen buitentrap \u2014 Helmond Sport<\/div>\r\n <\/div>\r\n <div class=\"foto-item\">\r\n <img decoding=\"async\" src=\"https:\/\/jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_1218-scaled.jpeg\" alt=\"Nieuwbouw badkamer Asten\" loading=\"lazy\">\r\n <div class=\"foto-caption\">Badkamer nieuwbouw \u2014 Asten<\/div>\r\n <\/div>\r\n <div class=\"foto-item\">\r\n <img decoding=\"async\" src=\"https:\/\/jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_9076-scaled.jpeg\" alt=\"Plinten tandartsenpraktijk Etten-Leur\" loading=\"lazy\">\r\n <div class=\"foto-caption\">Plinten \u2014 Tandartsenpraktijk Etten-Leur<\/div>\r\n <\/div>\r\n <div class=\"foto-item\">\r\n <img decoding=\"async\" src=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_7933-scaled.jpeg\" alt=\"Nieuwbouwhuis Nuenen plinten kozijnen keuken\" loading=\"lazy\">\r\n <div class=\"foto-caption\">Plinten, kozijnen & keuken \u2014 Nieuwbouw Nuenen<\/div>\r\n <\/div>\r\n <div class=\"foto-item\">\r\n <img decoding=\"async\" src=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_6265-scaled.jpeg\" alt=\"Toiletgroepen kantoorpand Geldrop\" loading=\"lazy\">\r\n <div class=\"foto-caption\">Toiletgroepen \u2014 Kantoorpand Geldrop<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"over\" class=\"section-dark\">\r\n <div class=\"section-label\">Over ons<\/div>\r\n <div class=\"over-layout\">\r\n <div>\r\n <h2 class=\"section-title\" style=\"font-size:clamp(36px,4.5vw,56px);letter-spacing:-2px;margin-bottom:20px;\">Jelle<br>Kruitwagen<\/h2>\r\n <div class=\"over-functie\">Eigenaar JKitwerken<\/div>\r\n <div style=\"display:inline-flex;align-items:center;gap:10px;background:rgba(46,111,243,.12);border:1px solid rgba(46,111,243,.25);border-radius:10px;padding:14px 18px;margin-top:8px;\">\r\n <span style=\"width:8px;height:8px;background:var(--blue);border-radius:50%;flex-shrink:0;box-shadow:0 0 8px var(--blue);\"><\/span>\r\n <span style=\"font-size:13px;color:rgba(255,255,255,.7);line-height:1.4;\">Mierlo & omstreken<br><span style=\"color:rgba(255,255,255,.4);font-size:12px;\">Particulier & zakelijk<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <p class=\"over-tekst\" style=\"font-size:17px;line-height:1.8;margin-bottom:32px;\">Als eigenaar van JKitwerken combineer ik vakmanschap met een scherp oog voor detail. Of het nu gaat om een kleine badkamerrenovatie of een groot zakelijk project \u2014 ik werk altijd met dezelfde toewijding en precisie.<\/p>\r\n <ul class=\"over-punten\">\r\n <li>Particuliere en zakelijke projecten in Mierlo en omstreken<\/li>\r\n <li>Strakke afwerking van sanitair, kozijnen, plinten en meer<\/li>\r\n <li>Persoonlijk contact en eerlijke prijzen<\/li>\r\n <li>Nieuwbouw \u00e9n renovatie \u2014 altijd tot in de puntjes<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"werkgebied\" class=\"section-dark\">\r\n <div class=\"section-label\">Waar wij actief zijn<\/div>\r\n <h2 class=\"section-title\">Werkgebied<\/h2>\r\n <div class=\"werkgebied-grid\">\r\n <div class=\"werkgebied-info\">\r\n <p>JKitwerken is actief in Mierlo en de directe omgeving. Voor grotere of specifieke projecten werken wij ook door heel Nederland \u2014 neem contact op voor een vrijblijvende bespreking.<\/p>\r\n <ul class=\"plaatsen-lijst\">\r\n <li>Mierlo<\/li><li>Helmond<\/li><li>Geldrop<\/li><li>Nuenen<\/li>\r\n <li>Omstreken<\/li><li>Heel Nederland op aanvraag<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"map-wrap\">\r\n <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d19869.31!2d5.607!3d51.4391!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c6d8c8c8c8c8c8%3A0x0!2sMierlo%2C+Nederland!5e0!3m2!1snl!2snl!4v1\" allowfullscreen=\"\" loading=\"lazy\"><\/iframe>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"offerte\" class=\"section-dark\">\r\n <div class=\"offerte-inner\">\r\n\r\n <div class=\"offerte-header\">\r\n <div class=\"section-label\">Gratis & vrijblijvend<\/div>\r\n <h2 class=\"section-title\">Offerte aanvragen<\/h2>\r\n <p class=\"section-sub\">Vul het formulier in en wij nemen zo snel mogelijk contact op.<\/p>\r\n <\/div>\r\n\r\n <div class=\"offerte-wrap\">\r\n\r\n <div class=\"progress-track\" id=\"progressBar\">\r\n <div class=\"prog-step active\" data-step=\"1\">\r\n <div class=\"prog-dot\"><span>1<\/span><\/div>\r\n <div class=\"prog-label\">Dienst<\/div>\r\n <\/div>\r\n <div class=\"prog-step\" data-step=\"2\">\r\n <div class=\"prog-dot\"><span>2<\/span><\/div>\r\n <div class=\"prog-label\">Details<\/div>\r\n <\/div>\r\n <div class=\"prog-step\" data-step=\"3\">\r\n <div class=\"prog-dot\"><span>3<\/span><\/div>\r\n <div class=\"prog-label\">Gegevens<\/div>\r\n <\/div>\r\n <div class=\"prog-step\" data-step=\"4\">\r\n <div class=\"prog-dot\"><span>4<\/span><\/div>\r\n <div class=\"prog-label\">Bevestig<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-card\">\r\n\r\n \r\n <form id=\"offerteForm\" action=\"https:\/\/api.web3forms.com\/submit\" method=\"POST\">\r\n <input type=\"hidden\" name=\"access_key\" value=\"9f9252a1-ffab-44fc-9e88-6a0150238781\">\r\n <input type=\"hidden\" name=\"to\" value=\"info@jkitwerken.nl\">\r\n <input type=\"hidden\" name=\"subject\" value=\"Nieuwe offerteaanvraag \u2013 JKitwerken\">\r\n <input type=\"hidden\" name=\"redirect\" value=\"false\">\r\n <input type=\"hidden\" name=\"dienst\" id=\"h_dienst\">\r\n <input type=\"hidden\" name=\"naam\" id=\"h_naam\">\r\n <input type=\"hidden\" name=\"email\" id=\"h_email\">\r\n <input type=\"hidden\" name=\"telefoon\" id=\"h_telefoon\">\r\n <input type=\"hidden\" name=\"beschrijving\" id=\"h_beschrijving\">\r\n <input type=\"hidden\" name=\"adres\" id=\"h_adres\">\r\n\r\n \r\n <div class=\"form-step active\" id=\"step1\">\r\n <div class=\"step-head\">\r\n <div class=\"step-num\">Stap 1 van 4<\/div>\r\n <div class=\"step-title\">Welke dienst(en) heeft u nodig?<\/div>\r\n <p class=\"step-sub\">Selecteer een of meerdere diensten \u2014 meerdere aanvinken is mogelijk.<\/p>\r\n <\/div>\r\n\r\n <div class=\"dienst-grid\">\r\n <div class=\"dienst-opt\" data-value=\"Sanitair\" onclick=\"toggleDienst(this)\">\r\n <div class=\"d-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"d-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M7 7h10v10H7z\"><\/path><path d=\"M5 12H2M22 12h-3M12 5V2M12 22v-3\"><\/path><\/svg><\/div>\r\n <div class=\"d-text\"><strong>Sanitair<\/strong><small>Badkamer, douche, toilet<\/small><\/div>\r\n <\/div>\r\n <div class=\"dienst-opt\" data-value=\"Plinten\" onclick=\"toggleDienst(this)\">\r\n <div class=\"d-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"d-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><path d=\"M3 9h18M9 3v18\"><\/path><\/svg><\/div>\r\n <div class=\"d-text\"><strong>Plinten<\/strong><small>Vloer-wand aansluitingen<\/small><\/div>\r\n <\/div>\r\n <div class=\"dienst-opt\" data-value=\"Kozijnen\" onclick=\"toggleDienst(this)\">\r\n <div class=\"d-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"d-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"><\/rect><path d=\"M2 10h20M12 4v16\"><\/path><\/svg><\/div>\r\n <div class=\"d-text\"><strong>Kozijnen<\/strong><small>Binnen- en buitenkozijnen<\/small><\/div>\r\n <\/div>\r\n <div class=\"dienst-opt\" data-value=\"Beglazing\" onclick=\"toggleDienst(this)\">\r\n <div class=\"d-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"d-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"2\"><\/rect><path d=\"M7 7h10v10H7z\"><\/path><\/svg><\/div>\r\n <div class=\"d-text\"><strong>Beglazing<\/strong><small>Ramen en glaspanelen<\/small><\/div>\r\n <\/div>\r\n <div class=\"dienst-opt\" data-value=\"Speciaal kitwerk\" onclick=\"toggleDienst(this)\">\r\n <div class=\"d-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"d-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" stroke-width=\"1.8\"><\/path><\/svg><\/div>\r\n <div class=\"d-text\"><strong>Speciaal kitwerk<\/strong><small>Maatwerk op aanvraag<\/small><\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"dienst-hint\">Meerdere opties mogelijk \u2014 klik om te selecteren of deselecteren<\/p>\r\n\r\n <div class=\"form-nav\">\r\n <button type=\"button\" class=\"btn-next\" onclick=\"goStep(2)\">\r\n Volgende stap\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-step\" id=\"step2\">\r\n <div class=\"step-head\">\r\n <div class=\"step-num\">Stap 2 van 4<\/div>\r\n <div class=\"step-title\">Vertel over uw project<\/div>\r\n <p class=\"step-sub\">Hoe meer detail, hoe beter wij kunnen inschatten wat u nodig heeft.<\/p>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label>Omschrijving van het werk<\/label>\r\n <textarea id=\"f_beschrijving\" placeholder=\"Beschrijf het project zo concreet mogelijk...\"><\/textarea>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Adres of locatie<\/label>\r\n <input type=\"text\" id=\"f_adres\" placeholder=\"Straat + huisnummer, plaats\">\r\n <\/div>\r\n\r\n <div class=\"type-section-label\">Particulier of zakelijk?<\/div>\r\n <div class=\"type-row\" id=\"klanttype-row\">\r\n <div class=\"type-opt\" data-group=\"klanttype\" data-value=\"Particulier\" onclick=\"selectType(this)\">\r\n <div class=\"type-radio\"><\/div><div class=\"type-label\">Particulier<\/div>\r\n <\/div>\r\n <div class=\"type-opt\" data-group=\"klanttype\" data-value=\"Zakelijk\" onclick=\"selectType(this)\">\r\n <div class=\"type-radio\"><\/div><div class=\"type-label\">Zakelijk<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"type-section-label\" style=\"margin-top:20px;\">Nieuwbouw of renovatie?<\/div>\r\n <div class=\"type-row\" id=\"projecttype-row\">\r\n <div class=\"type-opt\" data-group=\"projecttype\" data-value=\"Nieuwbouw\" onclick=\"selectType(this)\">\r\n <div class=\"type-radio\"><\/div><div class=\"type-label\">Nieuwbouw<\/div>\r\n <\/div>\r\n <div class=\"type-opt\" data-group=\"projecttype\" data-value=\"Renovatie \/ herstelwerk\" onclick=\"selectType(this)\">\r\n <div class=\"type-radio\"><\/div><div class=\"type-label\">Renovatie \/ herstelwerk<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-nav\" style=\"margin-top:32px;\">\r\n <button type=\"button\" class=\"btn-back\" onclick=\"goStep(1)\">Terug<\/button>\r\n <button type=\"button\" class=\"btn-next\" onclick=\"goStep(3)\">\r\n Volgende stap\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-step\" id=\"step3\">\r\n <div class=\"step-head\">\r\n <div class=\"step-num\">Stap 3 van 4<\/div>\r\n <div class=\"step-title\">Uw contactgegevens<\/div>\r\n <p class=\"step-sub\">Zodat wij u kunnen bereiken met de offerte.<\/p>\r\n <\/div>\r\n\r\n <div class=\"field-row\">\r\n <div class=\"field\"><label>Voornaam<\/label><input type=\"text\" id=\"f_voornaam\" placeholder=\"Jan\"><\/div>\r\n <div class=\"field\"><label>Achternaam<\/label><input type=\"text\" id=\"f_achternaam\" placeholder=\"Jansen\"><\/div>\r\n <\/div>\r\n <div class=\"field\"><label>E-mailadres<\/label><input type=\"email\" id=\"f_email\" placeholder=\"jan@voorbeeld.nl\"><\/div>\r\n <div class=\"field\"><label>Telefoonnummer<\/label><input type=\"tel\" id=\"f_telefoon\" placeholder=\"+31 6 12345678\"><\/div>\r\n\r\n <div class=\"form-nav\">\r\n <button type=\"button\" class=\"btn-back\" onclick=\"goStep(2)\">Terug<\/button>\r\n <button type=\"button\" class=\"btn-next\" onclick=\"goStep(4)\">\r\n Controleer aanvraag\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-step\" id=\"step4\">\r\n <div class=\"step-head\">\r\n <div class=\"step-num\">Stap 4 van 4<\/div>\r\n <div class=\"step-title\">Controleer uw aanvraag<\/div>\r\n <p class=\"step-sub\">Klopt alles? Dan versturen wij uw aanvraag.<\/p>\r\n <\/div>\r\n\r\n <div class=\"overzicht-card\">\r\n <dl>\r\n <div class=\"overzicht-row\"><dt>Dienst(en)<\/dt><dd id=\"ov_dienst\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>Klanttype<\/dt><dd id=\"ov_klanttype\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>Type project<\/dt><dd id=\"ov_projecttype\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>Omschrijving<\/dt><dd id=\"ov_beschrijving\" style=\"max-width:340px\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>Adres<\/dt><dd id=\"ov_adres\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>Naam<\/dt><dd id=\"ov_naam\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>E-mail<\/dt><dd id=\"ov_email\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>Telefoon<\/dt><dd id=\"ov_telefoon\">\u2014<\/dd><\/div>\r\n <\/dl>\r\n <\/div>\r\n\r\n <div class=\"form-nav\">\r\n <button type=\"button\" class=\"btn-back\" onclick=\"goStep(3)\">Terug<\/button>\r\n <button type=\"submit\" class=\"btn-next\" id=\"submitBtn\">\r\n Aanvraag versturen\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n\r\n <div class=\"success-screen\" id=\"successScreen\">\r\n <div class=\"success-ring\">\r\n <div class=\"success-icon-inner\">\r\n <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\r\n <\/div>\r\n <\/div>\r\n <h3>Aanvraag verstuurd!<\/h3>\r\n <p>Bedankt voor uw aanvraag. Jelle neemt zo snel mogelijk<br>contact met u op voor een vrijblijvende offerte.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n<footer>\r\n <div>\r\n <div class=\"footer-logo\">JKit<span class=\"werken\">werken<\/span><\/div>\r\n <div class=\"footer-kvk\">KVK 99662906 \u2014 Mierlo<\/div>\r\n <\/div>\r\n <div class=\"footer-info\">\r\n <a href=\"tel:+31617714535\" class=\"footer-item\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.5a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21.73 16v.92z\"><\/path><\/svg>\r\n +31 6 17714535\r\n <\/a>\r\n <a href=\"mailto:info@jkitwerken.nl\" class=\"footer-item\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path><polyline points=\"22,6 12,13 2,6\"><\/polyline><\/svg>\r\n info@jkitwerken.nl\r\n <\/a>\r\n <div class=\"footer-social\">\r\n <a href=\"https:\/\/www.instagram.com\/jkitwerken\/\" target=\"_blank\" title=\"Instagram\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"><\/path><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/www.facebook.com\/people\/JKitwerken\/61580362393382\" target=\"_blank\" title=\"Facebook\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"><\/path><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n\r\n<a href=\"https:\/\/wa.me\/31617714535\" target=\"_blank\" class=\"wa-btn\" title=\"WhatsApp JKitwerken\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z\"><\/path><\/svg>\r\n<\/a>\r\n\r\n<script>\r\n let currentStep = 1;\r\n const selectedDiensten = new Set();\r\n const selectedTypes = {};\r\n\r\n function toggleDienst(el) {\r\n const v = el.dataset.value;\r\n if (selectedDiensten.has(v)) {\r\n selectedDiensten.delete(v);\r\n el.classList.remove('selected');\r\n } else {\r\n selectedDiensten.add(v);\r\n el.classList.add('selected');\r\n }\r\n }\r\n\r\n function selectType(el) {\r\n const group = el.dataset.group;\r\n selectedTypes[group] = el.dataset.value;\r\n document.querySelectorAll(`.type-opt[data-group=\"${group}\"]`).forEach(o => o.classList.remove('selected'));\r\n el.classList.add('selected');\r\n }\r\n\r\n function goStep(step) {\r\n if (step === 2 && selectedDiensten.size === 0) {\r\n shakeForm(); alert('Selecteer minimaal \u00e9\u00e9n dienst.'); return;\r\n }\r\n if (step === 4) {\r\n const naam = (document.getElementById('f_voornaam').value.trim() + ' ' + document.getElementById('f_achternaam').value.trim()).trim();\r\n const email = document.getElementById('f_email').value.trim();\r\n const tel = document.getElementById('f_telefoon').value.trim();\r\n if (!naam || !email || !tel) { alert('Vul alle contactgegevens in.'); return; }\r\n\r\n const beschr = document.getElementById('f_beschrijving').value.trim() || '\u2014';\r\n const adres = document.getElementById('f_adres').value.trim() || '\u2014';\r\n const klanttype = selectedTypes['klanttype'] || '\u2014';\r\n const projecttype = selectedTypes['projecttype'] || '\u2014';\r\n const diensten = Array.from(selectedDiensten);\r\n\r\n const ovD = document.getElementById('ov_dienst');\r\n ovD.innerHTML = '';\r\n const wrap = document.createElement('div');\r\n wrap.className = 'dienst-tags';\r\n diensten.forEach(d => {\r\n const t = document.createElement('span');\r\n t.className = 'dienst-tag'; t.textContent = d;\r\n wrap.appendChild(t);\r\n });\r\n ovD.appendChild(wrap);\r\n\r\n document.getElementById('ov_klanttype').textContent = klanttype;\r\n document.getElementById('ov_projecttype').textContent = projecttype;\r\n document.getElementById('ov_beschrijving').textContent = beschr;\r\n document.getElementById('ov_adres').textContent = adres;\r\n document.getElementById('ov_naam').textContent = naam;\r\n document.getElementById('ov_email').textContent = email;\r\n document.getElementById('ov_telefoon').textContent = tel;\r\n\r\n document.getElementById('h_dienst').value = diensten.join(', ');\r\n document.getElementById('h_naam').value = naam;\r\n document.getElementById('h_email').value = email;\r\n document.getElementById('h_telefoon').value = tel;\r\n document.getElementById('h_beschrijving').value = beschr + ' | Klant: ' + klanttype + ' | Project: ' + projecttype;\r\n document.getElementById('h_adres').value = adres;\r\n }\r\n\r\n document.getElementById('step' + currentStep).classList.remove('active');\r\n document.getElementById('step' + step).classList.add('active');\r\n\r\n document.querySelectorAll('.prog-step').forEach(s => {\r\n const n = parseInt(s.dataset.step);\r\n s.classList.remove('active', 'done');\r\n if (n === step) s.classList.add('active');\r\n if (n < step) s.classList.add('done');\r\n });\r\n\r\n currentStep = step;\r\n document.getElementById('offerte').scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n }\r\n\r\n function shakeForm() {\r\n const c = document.querySelector('.form-card');\r\n c.style.animation = 'none';\r\n c.offsetHeight;\r\n c.style.animation = 'shake .4s ease';\r\n setTimeout(() => c.style.animation = '', 400);\r\n }\r\n\r\n document.getElementById('offerteForm').addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n const btn = document.getElementById('submitBtn');\r\n btn.innerHTML = 'Versturen\u2026 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>';\r\n btn.disabled = true;\r\n\r\n try {\r\n const res = await fetch('https:\/\/api.web3forms.com\/submit', { method: 'POST', body: new FormData(this) });\r\n const json = await res.json();\r\n if (json.success) {\r\n document.getElementById('progressBar').style.display = 'none';\r\n document.getElementById('offerteForm').style.display = 'none';\r\n document.getElementById('successScreen').classList.add('active');\r\n } else {\r\n alert('Er ging iets mis. Probeer het opnieuw of bel ons direct.');\r\n btn.innerHTML = 'Aanvraag versturen <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>';\r\n btn.disabled = false;\r\n }\r\n } catch {\r\n alert('Verbindingsfout. Probeer het opnieuw.');\r\n btn.innerHTML = 'Aanvraag versturen <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>';\r\n btn.disabled = false;\r\n }\r\n });\r\n<\/script>\r\n\r\n<style>\r\n@keyframes shake {\r\n 0%,100% { transform: translateX(0); }\r\n 20% { transform: translateX(-6px); }\r\n 40% { transform: translateX(6px); }\r\n 60% { transform: translateX(-4px); }\r\n 80% { transform: translateX(4px); }\r\n}\r\n<\/style>\r\n\r\n\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t<script type=\"speculationrules\">\r\n{\"prefetch\":[{\"source\":\"document\",\"where\":{\"and\":[{\"href_matches\":\"\/*\"},{\"not\":{\"href_matches\":[\"\/wp-*.php\",\"\/wp-admin\/*\",\"\/wp-content\/uploads\/*\",\"\/wp-content\/*\",\"\/wp-content\/plugins\/*\",\"\/wp-content\/themes\/hello-elementor\/*\",\"\/*\\\\?(.+)\"]}},{\"not\":{\"selector_matches\":\"a[rel~=\\\"nofollow\\\"]\"}},{\"not\":{\"selector_matches\":\".no-prefetch, .no-prefetch a\"}}]},\"eagerness\":\"conservative\"}]}\r\n<\/script>\r\n\t\t\t<script>\r\n\t\t\t\tconst lazyloadRunObserver = () => {\r\n\t\t\t\t\tconst lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );\r\n\t\t\t\t\tconst lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {\r\n\t\t\t\t\t\tentries.forEach( ( entry ) => {\r\n\t\t\t\t\t\t\tif ( entry.isIntersecting ) {\r\n\t\t\t\t\t\t\t\tlet lazyloadBackground = entry.target;\r\n\t\t\t\t\t\t\t\tif( lazyloadBackground ) {\r\n\t\t\t\t\t\t\t\t\tlazyloadBackground.classList.add( 'e-lazyloaded' );\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\tlazyloadBackgroundObserver.unobserve( entry.target );\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}, { rootMargin: '200px 0px 200px 0px' } );\r\n\t\t\t\t\tlazyloadBackgrounds.forEach( ( lazyloadBackground ) => {\r\n\t\t\t\t\t\tlazyloadBackgroundObserver.observe( lazyloadBackground );\r\n\t\t\t\t\t} );\r\n\t\t\t\t};\r\n\t\t\t\tconst events = [\r\n\t\t\t\t\t'DOMContentLoaded',\r\n\t\t\t\t\t'elementor\/lazyload\/observe',\r\n\t\t\t\t];\r\n\t\t\t\tevents.forEach( ( event ) => {\r\n\t\t\t\t\tdocument.addEventListener( event, lazyloadRunObserver );\r\n\t\t\t\t} );\r\n\t\t\t<\/script>\r\n\t\t\t<script src=\"https:\/\/www.jkitwerken.nl\/wp-content\/themes\/hello-elementor\/assets\/js\/hello-frontend.js?ver=3.4.7\" id=\"hello-theme-frontend-js\"><\/script>\r\n<script src=\"https:\/\/www.jkitwerken.nl\/wp-content\/plugins\/elementor\/assets\/js\/webpack.runtime.min.js?ver=4.0.1\" id=\"elementor-webpack-runtime-js\"><\/script>\r\n<script src=\"https:\/\/www.jkitwerken.nl\/wp-content\/plugins\/elementor\/assets\/js\/frontend-modules.min.js?ver=4.0.1\" id=\"elementor-frontend-modules-js\"><\/script>\r\n<script src=\"https:\/\/www.jkitwerken.nl\/wp-includes\/js\/jquery\/ui\/core.min.js?ver=1.13.3\" id=\"jquery-ui-core-js\"><\/script>\r\n<script id=\"elementor-frontend-js-before\">\r\nvar elementorFrontendConfig = {\"environmentMode\":{\"edit\":false,\"wpPreview\":false,\"isScriptDebug\":false},\"i18n\":{\"shareOnFacebook\":\"Deel via Facebook\",\"shareOnTwitter\":\"Deel via Twitter\",\"pinIt\":\"Pin dit\",\"download\":\"Downloaden\",\"downloadImage\":\"Download afbeelding\",\"fullscreen\":\"Volledig scherm\",\"zoom\":\"Zoom\",\"share\":\"Delen\",\"playVideo\":\"Video afspelen\",\"previous\":\"Vorige\",\"next\":\"Volgende\",\"close\":\"Sluiten\",\"a11yCarouselPrevSlideMessage\":\"Vorige slide\",\"a11yCarouselNextSlideMessage\":\"Volgende slide\",\"a11yCarouselFirstSlideMessage\":\"Ga naar de eerste slide\",\"a11yCarouselLastSlideMessage\":\"Ga naar de laatste slide\",\"a11yCarouselPaginationBulletMessage\":\"Ga naar slide\"},\"is_rtl\":false,\"breakpoints\":{\"xs\":0,\"sm\":480,\"md\":768,\"lg\":1025,\"xl\":1440,\"xxl\":1600},\"responsive\":{\"breakpoints\":{\"mobile\":{\"label\":\"Mobiel portret\",\"value\":767,\"default_value\":767,\"direction\":\"max\",\"is_enabled\":true},\"mobile_extra\":{\"label\":\"Mobiel landschap\",\"value\":880,\"default_value\":880,\"direction\":\"max\",\"is_enabled\":false},\"tablet\":{\"label\":\"Tablet portret\",\"value\":1024,\"default_value\":1024,\"direction\":\"max\",\"is_enabled\":true},\"tablet_extra\":{\"label\":\"Tablet landschap\",\"value\":1200,\"default_value\":1200,\"direction\":\"max\",\"is_enabled\":false},\"laptop\":{\"label\":\"Laptop\",\"value\":1366,\"default_value\":1366,\"direction\":\"max\",\"is_enabled\":false},\"widescreen\":{\"label\":\"Breedbeeld\",\"value\":2400,\"default_value\":2400,\"direction\":\"min\",\"is_enabled\":false}},\"hasCustomBreakpoints\":false},\"version\":\"4.0.1\",\"is_static\":false,\"experimentalFeatures\":{\"e_font_icon_svg\":true,\"additional_custom_breakpoints\":true,\"container\":true,\"e_optimized_markup\":true,\"hello-theme-header-footer\":true,\"e_pro_free_trial_popup\":true,\"nested-elements\":true,\"global_classes_should_enforce_capabilities\":true,\"e_variables\":true,\"e_opt_in_v4_page\":true,\"e_components\":true,\"e_interactions\":true,\"e_widget_creation\":true,\"import-export-customization\":true},\"urls\":{\"assets\":\"https:\\\/\\\/www.jkitwerken.nl\\\/wp-content\\\/plugins\\\/elementor\\\/assets\\\/\",\"ajaxurl\":\"https:\\\/\\\/www.jkitwerken.nl\\\/wp-admin\\\/admin-ajax.php\",\"uploadUrl\":\"https:\\\/\\\/www.jkitwerken.nl\\\/wp-content\\\/uploads\"},\"nonces\":{\"floatingButtonsClickTracking\":\"b2fcd0c709\",\"atomicFormsSendForm\":\"1e2f5619af\"},\"swiperClass\":\"swiper\",\"settings\":{\"page\":[],\"editorPreferences\":[]},\"kit\":{\"active_breakpoints\":[\"viewport_mobile\",\"viewport_tablet\"],\"global_image_lightbox\":\"yes\",\"lightbox_enable_counter\":\"yes\",\"lightbox_enable_fullscreen\":\"yes\",\"lightbox_enable_zoom\":\"yes\",\"lightbox_enable_share\":\"yes\",\"lightbox_title_src\":\"title\",\"lightbox_description_src\":\"description\",\"hello_header_logo_type\":\"title\",\"hello_footer_logo_type\":\"logo\"},\"post\":{\"id\":11,\"title\":\"JKitwerken%20%E2%80%93%20Strak%2C%20waterdicht%20en%20betrouwbaar\",\"excerpt\":\"\",\"featuredImage\":false}};\r\n<\/script>\r\n<script src=\"https:\/\/www.jkitwerken.nl\/wp-content\/plugins\/elementor\/assets\/js\/frontend.min.js?ver=4.0.1\" id=\"elementor-frontend-js\"><\/script><span id=\"elementor-device-mode\" class=\"elementor-screen-only\"><\/span>\r\n\r\n<\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>JKitwerken \u2013 Strak, waterdicht en betrouwbaar JKitwerken \u2013 Strak, waterdicht, betrouwbaar Offerte aanvragen Mierlo & omstreken \u00b7 heel Nederland op aanvraag Strak,waterdicht,betrouwbaar. Vakmanschap en precisie voor duurzame kitoplossingen. Voor particulieren en zakelijke opdrachtgevers \u2014 actief in Mierlo en omstreken, door heel Nederland op aanvraag. Vraag een offerte aan Bekijk diensten 100%Kwaliteitsgarantie Particulier& zakelijk 5Gespecialiseerde diensten […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":16,"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":58,"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions\/58"}],"wp:attachment":[{"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\t\r\n\t\tJKitwerken \u2013 Strak, waterdicht en betrouwbaar<\/title>\r\n<meta name=\"robots\" content=\"max-image-preview:large\">\r\n<link rel=\"alternate\" type=\"application\/rss+xml\" title=\"JKitwerken \u00bb feed\" href=\"https:\/\/www.jkitwerken.nl\/index.php\/feed\/\">\r\n<link rel=\"alternate\" type=\"application\/rss+xml\" title=\"JKitwerken \u00bb reacties feed\" href=\"https:\/\/www.jkitwerken.nl\/index.php\/comments\/feed\/\">\r\n<link rel=\"alternate\" title=\"oEmbed (JSON)\" type=\"application\/json+oembed\" href=\"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/oembed\/1.0\/embed?url=https%3A%2F%2Fwww.jkitwerken.nl%2F\">\r\n<link rel=\"alternate\" title=\"oEmbed (XML)\" type=\"text\/xml+oembed\" href=\"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/oembed\/1.0\/embed?url=https%3A%2F%2Fwww.jkitwerken.nl%2F&format=xml\">\r\n<style id=\"wp-img-auto-sizes-contain-inline-css\">\r\nimg:is([sizes=auto i],[sizes^=\"auto,\" i]){contain-intrinsic-size:3000px 1500px}\r\n<\/style>\r\n<style id=\"wp-emoji-styles-inline-css\">\r\n\timg.wp-smiley, img.emoji {\r\n\t\tdisplay: inline !important;\r\n\t\tborder: none !important;\r\n\t\tbox-shadow: none !important;\r\n\t\theight: 1em !important;\r\n\t\twidth: 1em !important;\r\n\t\tmargin: 0 0.07em !important;\r\n\t\tvertical-align: -0.1em !important;\r\n\t\tbackground: none !important;\r\n\t\tpadding: 0 !important;\r\n\t}\r\n<\/style>\r\n<link rel=\"stylesheet\" id=\"hello-elementor-css\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/themes\/hello-elementor\/assets\/css\/reset.css?ver=3.4.7\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"hello-elementor-theme-style-css\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/themes\/hello-elementor\/assets\/css\/theme.css?ver=3.4.7\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"hello-elementor-header-footer-css\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/themes\/hello-elementor\/assets\/css\/header-footer.css?ver=3.4.7\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"elementor-frontend-css\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/plugins\/elementor\/assets\/css\/frontend.min.css?ver=4.0.1\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"elementor-post-8-css\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/elementor\/css\/post-8.css?ver=1775062234\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"elementor-post-11-css\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/elementor\/css\/post-11.css?ver=1775062234\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"elementor-gf-roboto-css\" href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&display=swap\" media=\"all\">\r\n<link rel=\"stylesheet\" id=\"elementor-gf-robotoslab-css\" href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto+Slab:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&display=swap\" media=\"all\">\r\n<script src=\"https:\/\/www.jkitwerken.nl\/wp-includes\/js\/jquery\/jquery.min.js?ver=3.7.1\" id=\"jquery-core-js\"><\/script>\r\n<script src=\"https:\/\/www.jkitwerken.nl\/wp-includes\/js\/jquery\/jquery-migrate.min.js?ver=3.4.1\" id=\"jquery-migrate-js\"><\/script>\r\n<link rel=\"https:\/\/api.w.org\/\" href=\"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/\"><link rel=\"alternate\" title=\"JSON\" type=\"application\/json\" href=\"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/pages\/11\"><link rel=\"EditURI\" type=\"application\/rsd+xml\" title=\"RSD\" href=\"https:\/\/www.jkitwerken.nl\/xmlrpc.php?rsd\">\r\n<meta name=\"generator\" content=\"WordPress 6.9.4\">\r\n<link rel=\"canonical\" href=\"https:\/\/www.jkitwerken.nl\/\">\r\n<link rel=\"shortlink\" href=\"https:\/\/www.jkitwerken.nl\/\">\r\n<meta name=\"generator\" content=\"Elementor 4.0.1; features: e_font_icon_svg, additional_custom_breakpoints; settings: css_print_method-external, google_font-enabled, font_display-swap\">\r\n\t\t\t<style>\r\n\t\t\t\t.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),\r\n\t\t\t\t.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {\r\n\t\t\t\t\tbackground-image: none !important;\r\n\t\t\t\t}\r\n\t\t\t\t@media screen and (max-height: 1024px) {\r\n\t\t\t\t\t.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),\r\n\t\t\t\t\t.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * {\r\n\t\t\t\t\t\tbackground-image: none !important;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\t@media screen and (max-height: 640px) {\r\n\t\t\t\t\t.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),\r\n\t\t\t\t\t.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * {\r\n\t\t\t\t\t\tbackground-image: none !important;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t<\/style>\r\n\t\t\t<link rel=\"icon\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/cropped-JKitwerken_logo_transparant-32x32.png\" sizes=\"32x32\">\r\n<link rel=\"icon\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/cropped-JKitwerken_logo_transparant-192x192.png\" sizes=\"192x192\">\r\n<link rel=\"apple-touch-icon\" href=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/cropped-JKitwerken_logo_transparant-180x180.png\">\r\n<meta name=\"msapplication-TileImage\" content=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/cropped-JKitwerken_logo_transparant-270x270.png\">\r\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\"><script src=\"https:\/\/www.jkitwerken.nl\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.9.4\" defer=\"\"><\/script><\/head>\r\n<body class=\"home wp-singular page-template page-template-elementor_canvas page page-id-11 wp-embed-responsive wp-theme-hello-elementor hello-elementor-default elementor-default elementor-template-canvas elementor-kit-8 elementor-page elementor-page-11 e--ua-blink e--ua-chrome e--ua-webkit\" data-elementor-device-mode=\"desktop\" cz-shortcut-listen=\"true\">\r\n\t\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11\" class=\"elementor elementor-11\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-aeb5969 e-con-full e-flex e-con e-parent e-lazyloaded\" data-id=\"aeb5969\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-44a6fcb elementor-widget elementor-widget-html\" data-id=\"44a6fcb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\r\n\t\t\t\t\t\r\n\r\n\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>JKitwerken \u2013 Strak, waterdicht, betrouwbaar<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n:root {\r\n --dark: #0f1117;\r\n --dark2: #181c26;\r\n --dark3: #1e2330;\r\n --mid: #2a3040;\r\n --steel: #3b4560;\r\n --blue: #2e6ff3;\r\n --blue-light: #4d87ff;\r\n --blue-glow: rgba(46,111,243,.35);\r\n --white: #ffffff;\r\n --offwhite: #f4f5f7;\r\n --grey: #8a93a8;\r\n --light-grey: #e8eaf0;\r\n --glass: rgba(255,255,255,.04);\r\n --glass-border: rgba(255,255,255,.10);\r\n}\r\n\r\nhtml { scroll-behavior: smooth; }\r\n\r\nbody {\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--dark);\r\n color: var(--white);\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#hero {\r\n min-height: 100vh;\r\n min-height: 100svh;\r\n background: var(--offwhite);\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n overflow: hidden;\r\n padding-top: env(safe-area-inset-top);\r\n}\r\n#hero::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background-image:\r\n linear-gradient(rgba(46,111,243,.07) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(46,111,243,.07) 1px, transparent 1px);\r\n background-size: 48px 48px;\r\n pointer-events: none;\r\n}\r\n#hero::after {\r\n content: '';\r\n position: absolute;\r\n top: -200px; right: -200px;\r\n width: 700px; height: 700px;\r\n background: radial-gradient(circle, rgba(46,111,243,.10) 0%, transparent 70%);\r\n pointer-events: none;\r\n}\r\n\r\n.topbar {\r\n position: relative; z-index: 10;\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 28px 60px;\r\n}\r\n.logo-wrap { display: flex; align-items: center; gap: 12px; }\r\n.btn-offerte {\r\n background: var(--blue); color: var(--white);\r\n font-size: 15px; font-weight: 500;\r\n padding: 13px 28px; border-radius: 8px;\r\n text-decoration: none; border: none; cursor: pointer;\r\n transition: background .2s, transform .15s;\r\n}\r\n.btn-offerte:hover { background: var(--blue-light); transform: translateY(-1px); }\r\n\r\n.hero-body {\r\n flex: 1;\r\n display: flex; flex-direction: column; justify-content: center;\r\n padding: 40px 60px 80px;\r\n position: relative; z-index: 5;\r\n max-width: 780px;\r\n}\r\n.hero-tag {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: rgba(46,111,243,.12);\r\n border: 1px solid rgba(46,111,243,.25);\r\n color: var(--blue);\r\n font-size: 13px; font-weight: 500;\r\n padding: 6px 14px; border-radius: 100px;\r\n margin-bottom: 28px; width: fit-content;\r\n}\r\n.hero-tag::before { content: ''; width: 6px; height: 6px; background: var(--blue); border-radius: 50%; }\r\n.hero-h1 {\r\n font-size: clamp(42px, 6vw, 80px);\r\n font-weight: 800; line-height: 1.05;\r\n letter-spacing: -2px; color: var(--dark);\r\n margin-bottom: 24px;\r\n}\r\n.hero-h1 em { font-style: normal; color: var(--blue); }\r\n.hero-sub {\r\n font-size: 18px; line-height: 1.65;\r\n color: rgba(15,17,23,.55);\r\n margin-bottom: 44px; max-width: 520px; font-weight: 300;\r\n}\r\n.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }\r\n.btn-primary {\r\n background: var(--blue); color: var(--white);\r\n font-size: 16px; font-weight: 500;\r\n padding: 16px 36px; border-radius: 8px;\r\n text-decoration: none; border: none; cursor: pointer;\r\n transition: background .2s, transform .15s;\r\n}\r\n.btn-primary:hover { background: var(--blue-light); transform: translateY(-1px); }\r\n.btn-ghost-light {\r\n color: rgba(15,17,23,.5); font-size: 15px;\r\n text-decoration: none;\r\n display: flex; align-items: center; gap: 8px;\r\n transition: color .2s; border: none; background: none; cursor: pointer;\r\n}\r\n.btn-ghost-light:hover { color: var(--dark); }\r\n.btn-ghost-light svg { transition: transform .2s; }\r\n.btn-ghost-light:hover svg { transform: translateX(3px); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n STATS BAR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.stats-bar {\r\n background: var(--dark2);\r\n border-top: 1px solid rgba(255,255,255,.06);\r\n border-bottom: 1px solid rgba(255,255,255,.06);\r\n padding: 32px 60px;\r\n display: flex; justify-content: space-around; flex-wrap: wrap;\r\n}\r\n.stat-item { text-align: center; padding: 0 40px; border-right: 1px solid rgba(255,255,255,.08); }\r\n.stat-item:last-child { border-right: none; }\r\n.stat-num { font-size: 36px; font-weight: 800; color: var(--white); letter-spacing: -1px; line-height: 1; }\r\n.stat-num span { color: var(--blue); }\r\n.stat-label { font-size: 13px; color: var(--grey); margin-top: 6px; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SHARED SECTION STYLES\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nsection { padding: 100px 60px; }\r\n.section-label {\r\n font-size: 12px; font-weight: 600;\r\n letter-spacing: 2.5px; text-transform: uppercase;\r\n color: var(--blue); margin-bottom: 16px;\r\n}\r\n.section-title {\r\n font-size: clamp(30px, 4vw, 46px);\r\n font-weight: 800; line-height: 1.1;\r\n letter-spacing: -1.5px; margin-bottom: 16px;\r\n}\r\n.section-sub { font-size: 16px; line-height: 1.7; max-width: 540px; }\r\n.section-dark .section-title { color: var(--white); }\r\n.section-dark .section-sub { color: rgba(255,255,255,.5); }\r\n.section-light .section-title { color: var(--dark); }\r\n.section-light .section-sub { color: rgba(15,17,23,.55); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n DIENSTEN\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#diensten { background: var(--dark2); }\r\n.diensten-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\r\n gap: 24px; margin-top: 56px;\r\n}\r\n.dienst-card {\r\n background: var(--dark3);\r\n border-radius: 14px; padding: 0;\r\n border: 1px solid rgba(255,255,255,.07);\r\n position: relative; overflow: hidden;\r\n transition: box-shadow .25s, transform .2s;\r\n display: flex; flex-direction: column;\r\n}\r\n.dienst-card::before {\r\n content: '';\r\n position: absolute; top: 0; left: 0; right: 0;\r\n height: 3px; background: var(--blue);\r\n transform: scaleX(0); transform-origin: left;\r\n transition: transform .3s; z-index: 2;\r\n}\r\n.dienst-card:hover::before { transform: scaleX(1); }\r\n.dienst-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.3); transform: translateY(-3px); }\r\n.dienst-foto { width: 100%; height: 180px; object-fit: cover; display: block; }\r\n.dienst-body { padding: 28px 28px 32px; flex: 1; }\r\n.dienst-icon {\r\n width: 48px; height: 48px;\r\n background: rgba(46,111,243,.15);\r\n border-radius: 12px;\r\n display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 18px;\r\n}\r\n.dienst-icon svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.8; }\r\n.dienst-title { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 10px; }\r\n.dienst-desc { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.45); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n WERKWIJZE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#werkwijze { background: var(--dark3); }\r\n.stappen-grid {\r\n display: grid; grid-template-columns: repeat(4, 1fr);\r\n gap: 0; margin-top: 60px; position: relative;\r\n}\r\n.stappen-grid::before {\r\n content: '';\r\n position: absolute; top: 28px; left: 10%; right: 10%;\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, var(--steel), var(--steel), transparent);\r\n}\r\n.stap-item { padding: 0 28px; text-align: center; position: relative; }\r\n.stap-num {\r\n width: 56px; height: 56px; border-radius: 50%;\r\n background: var(--blue); color: var(--white);\r\n font-size: 20px; font-weight: 800;\r\n display: flex; align-items: center; justify-content: center;\r\n margin: 0 auto 24px; position: relative; z-index: 2;\r\n box-shadow: 0 0 0 6px var(--dark3), 0 0 0 8px rgba(46,111,243,.25);\r\n}\r\n.stap-title { font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 10px; }\r\n.stap-desc { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.45); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PROJECTEN\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#projecten { background: var(--dark); padding: 100px 0 0; }\r\n.projecten-intro {\r\n display: flex; justify-content: space-between; align-items: flex-end;\r\n margin-bottom: 56px; flex-wrap: wrap; gap: 24px;\r\n padding: 0 60px;\r\n}\r\n.projecten-intro .section-label { color: var(--blue); }\r\n.projecten-intro .section-title {\r\n font-size: clamp(52px, 7vw, 96px);\r\n letter-spacing: -3px;\r\n color: var(--white);\r\n margin-bottom: 0;\r\n line-height: 1;\r\n}\r\n.projecten-intro p { color: rgba(255,255,255,.35) !important; }\r\n\r\n.foto-grid {\r\n display: grid;\r\n grid-template-columns: 1.5fr 1fr 1fr;\r\n grid-template-rows: 420px 360px;\r\n gap: 3px;\r\n}\r\n.foto-item {\r\n border-radius: 0;\r\n background: var(--dark3);\r\n border: none;\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n}\r\n.foto-item::after {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: rgba(0,0,0,.25);\r\n transition: background .35s;\r\n}\r\n.foto-item:hover::after { background: rgba(0,0,0,.05); }\r\n.foto-item:hover img { transform: scale(1.04); }\r\n.foto-item:first-child { grid-row: span 2; }\r\n.foto-item img {\r\n width: 100%; height: 100%;\r\n object-fit: cover; display: block;\r\n transition: transform .6s cubic-bezier(.25,.46,.45,.94);\r\n}\r\n.foto-caption {\r\n position: absolute; bottom: 0; left: 0; right: 0;\r\n background: linear-gradient(transparent, rgba(0,0,0,.82));\r\n color: #fff; font-size: 14px; font-weight: 400;\r\n padding: 48px 20px 18px; line-height: 1.4;\r\n pointer-events: none;\r\n z-index: 2;\r\n letter-spacing: .1px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n OVER ONS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#over { background: var(--dark2); }\r\n.over-layout {\r\n display: grid;\r\n grid-template-columns: 1fr 1.6fr;\r\n gap: 80px;\r\n align-items: start;\r\n margin-top: 48px;\r\n}\r\n.over-grid {\r\n display: grid; grid-template-columns: 1fr 1fr;\r\n gap: 80px; align-items: center; margin-top: 60px;\r\n}\r\n.over-img-wrap { position: relative; }\r\n.over-img-box {\r\n width: 100%; aspect-ratio: 4\/5;\r\n background: var(--dark3); border-radius: 16px;\r\n overflow: hidden;\r\n display: flex; align-items: center; justify-content: center;\r\n border: 1px solid rgba(255,255,255,.07);\r\n}\r\n.over-img-box svg { width: 56px; height: 56px; stroke: var(--steel); fill: none; opacity: .35; }\r\n.over-badge {\r\n position: absolute; bottom: 28px; right: -20px;\r\n background: var(--blue); color: var(--white);\r\n padding: 18px 24px; border-radius: 12px;\r\n font-weight: 700; font-size: 15px;\r\n box-shadow: 0 8px 32px rgba(46,111,243,.35); line-height: 1.3;\r\n}\r\n.over-badge small { display: block; font-size: 11px; font-weight: 400; opacity: .75; margin-top: 3px; }\r\n.over-functie { font-size: 12px; color: var(--blue); font-weight: 500; margin-bottom: 20px; letter-spacing: .3px; text-transform: uppercase; }\r\n.over-tekst { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.5); margin-bottom: 28px; }\r\n.over-punten { list-style: none; display: flex; flex-direction: column; gap: 10px; }\r\n.over-punten li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.5; }\r\n.over-punten li::before { content: ''; flex-shrink: 0; margin-top: 5px; width: 6px; height: 6px; background: var(--blue); border-radius: 50%; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n WERKGEBIED\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#werkgebied { background: var(--dark3); }\r\n.werkgebied-grid {\r\n display: grid; grid-template-columns: 1fr 1.4fr;\r\n gap: 64px; align-items: center; margin-top: 56px;\r\n}\r\n.werkgebied-info p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.5); margin-bottom: 32px; }\r\n.plaatsen-lijst { list-style: none; display: flex; flex-direction: column; gap: 8px; }\r\n.plaatsen-lijst li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.6); }\r\n.plaatsen-lijst li::before { content: ''; width: 6px; height: 6px; background: var(--blue); border-radius: 50%; flex-shrink: 0; }\r\n.map-wrap {\r\n border-radius: 14px; overflow: hidden;\r\n border: 1px solid rgba(255,255,255,.07);\r\n box-shadow: 0 20px 60px rgba(0,0,0,.3); height: 380px;\r\n}\r\n.map-wrap iframe { width: 100%; height: 100%; border: none; display: block; filter: invert(90%) hue-rotate(180deg) brightness(.85) contrast(1.1); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n OFFERTE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#offerte {\r\n background: var(--dark);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n#offerte::before {\r\n content: '';\r\n position: absolute;\r\n top: -300px; left: 50%; transform: translateX(-50%);\r\n width: 900px; height: 900px;\r\n background: radial-gradient(circle, rgba(46,111,243,.08) 0%, transparent 65%);\r\n pointer-events: none;\r\n}\r\n#offerte::after {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background-image:\r\n linear-gradient(rgba(46,111,243,.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(46,111,243,.03) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n pointer-events: none;\r\n}\r\n\r\n.offerte-inner {\r\n position: relative; z-index: 2;\r\n}\r\n\r\n.offerte-header {\r\n text-align: center;\r\n margin-bottom: 56px;\r\n}\r\n.offerte-header .section-label { justify-content: center; display: flex; }\r\n.offerte-header .section-title { color: var(--white); }\r\n.offerte-header .section-sub { color: rgba(255,255,255,.45); margin: 0 auto; text-align: center; }\r\n\r\n.offerte-wrap { max-width: 820px; margin: 0 auto; }\r\n\r\n.progress-track {\r\n display: flex; align-items: center;\r\n margin-bottom: 52px;\r\n gap: 0;\r\n}\r\n.prog-step {\r\n flex: 1; display: flex; flex-direction: column;\r\n align-items: center; position: relative;\r\n}\r\n.prog-step::after {\r\n content: '';\r\n position: absolute; top: 20px; left: calc(50% + 22px);\r\n right: calc(-50% + 22px); height: 1px;\r\n background: rgba(255,255,255,.1);\r\n transition: background .4s;\r\n}\r\n.prog-step:last-child::after { display: none; }\r\n.prog-step.done::after { background: var(--blue); }\r\n\r\n.prog-dot {\r\n width: 40px; height: 40px; border-radius: 50%;\r\n border: 1.5px solid rgba(255,255,255,.18);\r\n background: rgba(255,255,255,.04);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 13px; font-weight: 700;\r\n color: rgba(255,255,255,.3);\r\n position: relative; z-index: 1;\r\n transition: all .35s cubic-bezier(.4,0,.2,1);\r\n}\r\n.prog-step.active .prog-dot {\r\n background: var(--blue);\r\n border-color: var(--blue);\r\n color: var(--white);\r\n box-shadow: 0 0 0 6px rgba(46,111,243,.18), 0 0 20px rgba(46,111,243,.3);\r\n}\r\n.prog-step.done .prog-dot {\r\n background: var(--blue);\r\n border-color: var(--blue);\r\n color: var(--white);\r\n}\r\n.prog-step.done .prog-dot::after {\r\n content: '\u2713';\r\n position: absolute;\r\n font-size: 14px;\r\n}\r\n.prog-step.done .prog-dot span { display: none; }\r\n\r\n.prog-label {\r\n font-size: 11px; letter-spacing: .8px;\r\n text-transform: uppercase; margin-top: 10px;\r\n color: rgba(255,255,255,.25);\r\n transition: color .3s;\r\n}\r\n.prog-step.active .prog-label { color: var(--blue); }\r\n.prog-step.done .prog-label { color: rgba(255,255,255,.45); }\r\n\r\n.form-card {\r\n background: rgba(255,255,255,.03);\r\n border: 1px solid rgba(255,255,255,.09);\r\n border-radius: 20px;\r\n padding: 48px 52px;\r\n backdrop-filter: blur(12px);\r\n box-shadow: 0 40px 80px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);\r\n}\r\n\r\n.form-step { display: none; }\r\n.form-step.active {\r\n display: block;\r\n animation: stepIn .35s cubic-bezier(.4,0,.2,1);\r\n}\r\n@keyframes stepIn {\r\n from { opacity: 0; transform: translateY(14px); }\r\n to { opacity: 1; transform: none; }\r\n}\r\n\r\n.step-head { margin-bottom: 36px; }\r\n.step-num {\r\n font-size: 11px; font-weight: 600; letter-spacing: 2px;\r\n text-transform: uppercase; color: var(--blue);\r\n margin-bottom: 8px;\r\n}\r\n.step-title {\r\n font-size: 28px; font-weight: 800;\r\n color: var(--white); letter-spacing: -.5px;\r\n margin-bottom: 6px;\r\n}\r\n.step-sub { font-size: 14px; color: rgba(255,255,255,.4); line-height: 1.6; }\r\n\r\n.dienst-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 14px;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.dienst-opt {\r\n position: relative;\r\n border: 1.5px solid rgba(255,255,255,.1);\r\n border-radius: 14px;\r\n padding: 20px 20px 20px 20px;\r\n cursor: pointer;\r\n transition:\r\n border-color .25s,\r\n background .25s,\r\n box-shadow .25s,\r\n transform .2s;\r\n display: flex; align-items: center; gap: 16px;\r\n background: rgba(255,255,255,.03);\r\n overflow: hidden;\r\n user-select: none;\r\n}\r\n\r\n.dienst-opt::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: radial-gradient(circle at 30% 50%, rgba(46,111,243,.10), transparent 70%);\r\n opacity: 0;\r\n transition: opacity .3s;\r\n border-radius: inherit;\r\n}\r\n\r\n.dienst-opt:hover {\r\n border-color: rgba(46,111,243,.5);\r\n background: rgba(46,111,243,.07);\r\n box-shadow: 0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);\r\n transform: translateY(-2px);\r\n}\r\n.dienst-opt:hover::before { opacity: 1; }\r\n\r\n.dienst-opt.selected {\r\n border-color: var(--blue);\r\n background: rgba(46,111,243,.12);\r\n box-shadow:\r\n 0 0 0 1px var(--blue),\r\n 0 8px 32px rgba(46,111,243,.18),\r\n inset 0 1px 0 rgba(255,255,255,.08);\r\n transform: translateY(-2px);\r\n}\r\n.dienst-opt.selected::before { opacity: 1; }\r\n\r\n.d-icon {\r\n flex-shrink: 0;\r\n width: 44px; height: 44px;\r\n border-radius: 11px;\r\n background: rgba(46,111,243,.12);\r\n border: 1px solid rgba(46,111,243,.2);\r\n display: flex; align-items: center; justify-content: center;\r\n transition: background .25s, box-shadow .25s;\r\n}\r\n.dienst-opt.selected .d-icon {\r\n background: rgba(46,111,243,.25);\r\n box-shadow: 0 0 12px rgba(46,111,243,.3);\r\n}\r\n.d-icon svg { width: 20px; height: 20px; stroke: var(--blue-light); fill: none; stroke-width: 1.8; }\r\n\r\n.d-text { flex: 1; min-width: 0; }\r\n.d-text strong { display: block; font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 2px; }\r\n.d-text small { font-size: 12px; color: rgba(255,255,255,.38); }\r\n\r\n.d-check {\r\n position: absolute; top: 12px; right: 12px;\r\n width: 22px; height: 22px; border-radius: 50%;\r\n background: var(--blue);\r\n display: flex; align-items: center; justify-content: center;\r\n opacity: 0; transform: scale(.5) rotate(-20deg);\r\n transition: opacity .25s, transform .3s cubic-bezier(.34,1.56,.64,1);\r\n box-shadow: 0 2px 8px rgba(46,111,243,.5);\r\n}\r\n.dienst-opt.selected .d-check { opacity: 1; transform: scale(1) rotate(0deg); }\r\n.d-check svg { width: 12px; height: 12px; stroke: white; fill: none; stroke-width: 2.8; }\r\n\r\n.dienst-hint {\r\n font-size: 12px; color: rgba(255,255,255,.25);\r\n margin-bottom: 32px;\r\n display: flex; align-items: center; gap: 8px;\r\n}\r\n.dienst-hint::before {\r\n content: '';\r\n width: 4px; height: 4px;\r\n background: var(--blue); border-radius: 50%; opacity: .6;\r\n}\r\n\r\n.type-row {\r\n display: grid; grid-template-columns: 1fr 1fr;\r\n gap: 12px; margin-bottom: 10px;\r\n}\r\n\r\n.type-opt {\r\n position: relative;\r\n border: 1.5px solid rgba(255,255,255,.1);\r\n border-radius: 12px;\r\n padding: 16px 18px;\r\n cursor: pointer;\r\n transition: border-color .22s, background .22s, box-shadow .22s, transform .18s;\r\n display: flex; align-items: center; gap: 12px;\r\n background: rgba(255,255,255,.03);\r\n user-select: none;\r\n}\r\n.type-opt::before {\r\n content: '';\r\n position: absolute; inset: 0; border-radius: inherit;\r\n background: radial-gradient(circle at 20% 50%, rgba(46,111,243,.08), transparent 60%);\r\n opacity: 0; transition: opacity .25s;\r\n}\r\n.type-opt:hover {\r\n border-color: rgba(46,111,243,.45);\r\n background: rgba(46,111,243,.06);\r\n transform: translateY(-1px);\r\n box-shadow: 0 4px 16px rgba(0,0,0,.15);\r\n}\r\n.type-opt:hover::before { opacity: 1; }\r\n.type-opt.selected {\r\n border-color: var(--blue);\r\n background: rgba(46,111,243,.1);\r\n box-shadow: 0 0 0 1px var(--blue), 0 6px 24px rgba(46,111,243,.15);\r\n transform: translateY(-1px);\r\n}\r\n.type-opt.selected::before { opacity: 1; }\r\n\r\n.type-radio {\r\n width: 20px; height: 20px; border-radius: 50%;\r\n border: 2px solid rgba(255,255,255,.2);\r\n flex-shrink: 0; position: relative;\r\n transition: border-color .22s;\r\n}\r\n.type-radio::after {\r\n content: '';\r\n position: absolute; inset: 3px;\r\n border-radius: 50%; background: var(--blue);\r\n opacity: 0; transform: scale(0);\r\n transition: opacity .22s, transform .25s cubic-bezier(.34,1.56,.64,1);\r\n}\r\n.type-opt.selected .type-radio {\r\n border-color: var(--blue);\r\n box-shadow: 0 0 0 3px rgba(46,111,243,.2);\r\n}\r\n.type-opt.selected .type-radio::after { opacity: 1; transform: scale(1); }\r\n\r\n.type-label { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.75); }\r\n.type-opt.selected .type-label { color: var(--white); }\r\n\r\n.type-section-label {\r\n font-size: 12px; font-weight: 600; letter-spacing: 1.5px;\r\n text-transform: uppercase; color: rgba(255,255,255,.35);\r\n margin-bottom: 10px; margin-top: 24px;\r\n}\r\n\r\n.field { margin-bottom: 20px; }\r\n.field label {\r\n display: block; font-size: 13px; font-weight: 500;\r\n color: rgba(255,255,255,.45); margin-bottom: 8px; letter-spacing: .3px;\r\n}\r\n.field input,\r\n.field textarea {\r\n width: 100%;\r\n background: rgba(255,255,255,.05);\r\n border: 1.5px solid rgba(255,255,255,.1);\r\n border-radius: 10px;\r\n padding: 14px 18px;\r\n font-size: 15px; color: var(--white);\r\n font-family: 'DM Sans', sans-serif;\r\n outline: none;\r\n transition: border-color .22s, background .22s, box-shadow .22s;\r\n}\r\n.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.2); }\r\n.field input:hover, .field textarea:hover { border-color: rgba(255,255,255,.2); }\r\n.field input:focus, .field textarea:focus {\r\n border-color: var(--blue);\r\n background: rgba(46,111,243,.06);\r\n box-shadow: 0 0 0 3px rgba(46,111,243,.12);\r\n}\r\n.field textarea { resize: vertical; min-height: 110px; }\r\n.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\r\n\r\n.overzicht-card {\r\n background: rgba(255,255,255,.04);\r\n border: 1px solid rgba(255,255,255,.1);\r\n border-radius: 14px; overflow: hidden;\r\n margin-bottom: 28px;\r\n}\r\n.overzicht-row {\r\n display: flex; justify-content: space-between;\r\n align-items: flex-start;\r\n padding: 15px 24px;\r\n border-bottom: 1px solid rgba(255,255,255,.06);\r\n gap: 20px;\r\n}\r\n.overzicht-row:last-child { border-bottom: none; }\r\n.overzicht-row dt { font-size: 13px; color: rgba(255,255,255,.35); flex-shrink: 0; width: 140px; }\r\n.overzicht-row dd { font-size: 14px; color: rgba(255,255,255,.85); text-align: right; }\r\n.dienst-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }\r\n.dienst-tag {\r\n background: rgba(46,111,243,.15);\r\n color: var(--blue-light);\r\n font-size: 12px; font-weight: 500;\r\n padding: 3px 10px; border-radius: 100px;\r\n border: 1px solid rgba(46,111,243,.25);\r\n}\r\n\r\n.form-nav {\r\n display: flex; gap: 14px; align-items: center;\r\n margin-top: 36px; flex-wrap: wrap;\r\n}\r\n.btn-back {\r\n background: transparent;\r\n border: 1.5px solid rgba(255,255,255,.12);\r\n color: rgba(255,255,255,.4);\r\n padding: 14px 26px; border-radius: 10px;\r\n font-size: 15px; font-family: 'DM Sans', sans-serif;\r\n cursor: pointer;\r\n transition: border-color .22s, color .22s, background .22s;\r\n}\r\n.btn-back:hover {\r\n border-color: rgba(255,255,255,.3);\r\n color: var(--white);\r\n background: rgba(255,255,255,.05);\r\n}\r\n.btn-next {\r\n position: relative; overflow: hidden;\r\n background: var(--blue); border: none;\r\n color: var(--white);\r\n padding: 14px 32px; border-radius: 10px;\r\n font-size: 15px; font-weight: 600;\r\n font-family: 'DM Sans', sans-serif;\r\n cursor: pointer;\r\n transition: background .22s, transform .18s, box-shadow .22s;\r\n display: flex; align-items: center; gap: 10px;\r\n box-shadow: 0 4px 20px rgba(46,111,243,.3);\r\n}\r\n.btn-next::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);\r\n opacity: 0; transition: opacity .22s;\r\n}\r\n.btn-next:hover {\r\n background: var(--blue-light);\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 32px rgba(46,111,243,.45);\r\n}\r\n.btn-next:hover::before { opacity: 1; }\r\n.btn-next:active { transform: translateY(0); }\r\n\r\n.success-screen { display: none; text-align: center; padding: 60px 0; animation: stepIn .4s ease; }\r\n.success-screen.active { display: block; }\r\n.success-ring {\r\n width: 80px; height: 80px; border-radius: 50%;\r\n border: 2px solid rgba(46,111,243,.3);\r\n display: flex; align-items: center; justify-content: center;\r\n margin: 0 auto 28px;\r\n position: relative;\r\n animation: pulseRing 2s ease infinite;\r\n}\r\n.success-ring::before {\r\n content: '';\r\n position: absolute; inset: -8px; border-radius: 50%;\r\n border: 1px solid rgba(46,111,243,.12);\r\n}\r\n@keyframes pulseRing {\r\n 0%, 100% { box-shadow: 0 0 0 0 rgba(46,111,243,.25); }\r\n 50% { box-shadow: 0 0 0 12px rgba(46,111,243,.0); }\r\n}\r\n.success-icon-inner {\r\n width: 56px; height: 56px; border-radius: 50%;\r\n background: rgba(46,111,243,.15);\r\n display: flex; align-items: center; justify-content: center;\r\n}\r\n.success-icon-inner svg { width: 26px; height: 26px; stroke: var(--blue-light); fill: none; stroke-width: 2.5; }\r\n.success-screen h3 { font-size: 28px; font-weight: 800; color: var(--white); margin-bottom: 12px; letter-spacing: -.5px; }\r\n.success-screen p { font-size: 15px; color: rgba(255,255,255,.45); line-height: 1.7; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FOOTER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfooter {\r\n background: var(--dark2);\r\n border-top: 1px solid rgba(255,255,255,.06);\r\n padding: 48px 60px;\r\n display: flex; justify-content: space-between; align-items: center;\r\n flex-wrap: wrap; gap: 24px;\r\n}\r\n\/* AANPASSING: JK ook blauw, \"it\" blijft blauw \u2014 hele naam is donkerblauw tekst *\/\r\n.footer-logo {\r\n font-size: 18px; font-weight: 800;\r\n color: var(--blue); \/* hele naam blauw *\/\r\n letter-spacing: -.3px;\r\n}\r\n\/* \"werken\" in wit zodat alleen JKit blauw is en \"werken\" afwijkt *\/\r\n.footer-logo .werken {\r\n color: var(--white);\r\n}\r\n.footer-kvk { font-size: 12px; color: var(--steel); margin-top: 6px; }\r\n.footer-info { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }\r\n.footer-item {\r\n display: flex; align-items: center; gap: 8px;\r\n font-size: 13px; color: var(--grey); text-decoration: none;\r\n transition: color .2s;\r\n}\r\n.footer-item:hover { color: var(--white); }\r\n.footer-item svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }\r\n.footer-social { display: flex; gap: 10px; }\r\n.footer-social a {\r\n width: 36px; height: 36px; border-radius: 9px;\r\n background: rgba(255,255,255,.06);\r\n border: 1px solid rgba(255,255,255,.1);\r\n display: flex; align-items: center; justify-content: center;\r\n text-decoration: none;\r\n transition: background .2s, border-color .2s, transform .15s;\r\n}\r\n.footer-social a:hover {\r\n background: rgba(46,111,243,.22);\r\n border-color: rgba(46,111,243,.4);\r\n transform: translateY(-2px);\r\n}\r\n.footer-social svg { width: 16px; height: 16px; fill: var(--grey); transition: fill .2s; }\r\n.footer-social a:hover svg { fill: var(--white); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n WHATSAPP\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.wa-btn {\r\n position: fixed; bottom: 28px; right: 28px; z-index: 1000;\r\n width: 56px; height: 56px; background: #25D366;\r\n border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n box-shadow: 0 4px 20px rgba(37,211,102,.4);\r\n text-decoration: none; transition: transform .2s, box-shadow .2s;\r\n}\r\n.wa-btn:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37,211,102,.5); }\r\n.wa-btn svg { width: 28px; height: 28px; fill: white; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 900px) {\r\n .topbar, section, footer { padding-left: 28px; padding-right: 28px; }\r\n .stats-bar { padding: 24px 28px; }\r\n .stat-item { padding: 0 16px; }\r\n .hero-body { padding: 40px 28px 60px; }\r\n .stappen-grid { grid-template-columns: 1fr 1fr; gap: 40px; }\r\n .stappen-grid::before { display: none; }\r\n .projecten-intro { padding: 0 28px; }\r\n .foto-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }\r\n .foto-item:first-child { grid-row: span 1; }\r\n .foto-item { min-height: 260px; }\r\n .over-layout { grid-template-columns: 1fr; gap: 36px; }\r\n .over-grid, .werkgebied-grid { grid-template-columns: 1fr; gap: 40px; }\r\n .dienst-grid { grid-template-columns: 1fr; }\r\n .field-row { grid-template-columns: 1fr; }\r\n .form-card { padding: 32px 28px; }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n .topbar { padding: 16px 20px; }\r\n .btn-offerte { font-size: 12px; padding: 9px 14px; white-space: nowrap; }\r\n #hero { min-height: 100svh; }\r\n .hero-body { padding: 28px 20px 52px; max-width: 100%; }\r\n .hero-tag { font-size: 12px; padding: 5px 12px; margin-bottom: 20px; }\r\n .hero-h1 { font-size: clamp(32px, 9vw, 46px); letter-spacing: -1px; margin-bottom: 16px; }\r\n .hero-sub { font-size: 15px; margin-bottom: 28px; }\r\n .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }\r\n .btn-primary { text-align: center; padding: 15px 24px; }\r\n .btn-ghost-light { justify-content: center; }\r\n .stats-bar { padding: 0 20px; }\r\n .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding: 16px 0; width: 100%; }\r\n .stat-item:last-child { border-bottom: none; }\r\n section { padding: 64px 20px; }\r\n footer { padding: 36px 20px; }\r\n .stappen-grid { grid-template-columns: 1fr; }\r\n .foto-grid { grid-template-columns: 1fr; }\r\n .foto-item { min-height: 280px; }\r\n .diensten-grid { grid-template-columns: 1fr; }\r\n .type-row { grid-template-columns: 1fr; }\r\n .form-card { padding: 28px 20px; }\r\n .progress-track { gap: 0; }\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n\r\n<section id=\"hero\" class=\"section-light\">\r\n <div class=\"topbar\">\r\n <div class=\"logo-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/jkitwerken.nl\/wp-content\/uploads\/2026\/03\/JKitwerken_logo_transparant.png\" alt=\"JKitwerken\" style=\"width:130px;height:auto;max-height:50px;display:block;object-fit:contain;\">\r\n <\/div>\r\n <a href=\"#offerte\" class=\"btn-offerte\">Offerte aanvragen<\/a>\r\n <\/div>\r\n <div class=\"hero-body\">\r\n <div class=\"hero-tag\">Mierlo & omstreken \u00b7 heel Nederland op aanvraag<\/div>\r\n <h1 class=\"hero-h1\">Strak,<br><em>waterdicht,<\/em><br>betrouwbaar.<\/h1>\r\n <p class=\"hero-sub\">Vakmanschap en precisie voor duurzame kitoplossingen. Voor particulieren en zakelijke opdrachtgevers \u2014 actief in Mierlo en omstreken, door heel Nederland op aanvraag.<\/p>\r\n <div class=\"hero-ctas\">\r\n <a href=\"#offerte\" class=\"btn-primary\">Vraag een offerte aan<\/a>\r\n <a href=\"#diensten\" class=\"btn-ghost-light\">\r\n Bekijk diensten\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<div class=\"stats-bar\">\r\n <div class=\"stat-item\"><div class=\"stat-num\">100<span>%<\/span><\/div><div class=\"stat-label\">Kwaliteitsgarantie<\/div><\/div>\r\n <div class=\"stat-item\"><div class=\"stat-num\">Particulier<\/div><div class=\"stat-label\">& zakelijk<\/div><\/div>\r\n <div class=\"stat-item\"><div class=\"stat-num\">5<\/div><div class=\"stat-label\">Gespecialiseerde diensten<\/div><\/div>\r\n <div class=\"stat-item\"><div class=\"stat-num\">Nieuwbouw<\/div><div class=\"stat-label\">& renovatie<\/div><\/div>\r\n<\/div>\r\n\r\n\r\n<section id=\"diensten\" class=\"section-dark\">\r\n <div class=\"section-label\">Wat wij doen<\/div>\r\n <h2 class=\"section-title\">Onze diensten<\/h2>\r\n <p class=\"section-sub\">Gespecialiseerde kitafwerkingen, perfect afgestemd op uw wensen. Wij luisteren, denken mee en bieden duurzame oplossingen voor elk project.<\/p>\r\n <div class=\"diensten-grid\">\r\n <div class=\"dienst-card\">\r\n <img decoding=\"async\" class=\"dienst-foto\" src=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_1379-scaled.jpeg\" alt=\"Sanitair\" loading=\"lazy\">\r\n <div class=\"dienst-body\">\r\n <div class=\"dienst-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M7 7h10v10H7z\"><\/path><path d=\"M5 12H2M22 12h-3M12 5V2M12 22v-3\"><\/path><\/svg><\/div>\r\n <div class=\"dienst-title\">Sanitair<\/div>\r\n <p class=\"dienst-desc\">Waterdicht kitten van sanitaire ruimtes: douche, bad, wastafel en toilet. Wij verwijderen oude kit en brengen een strakke, duurzame kitnaad aan.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dienst-card\">\r\n <img decoding=\"async\" class=\"dienst-foto\" src=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_8724-scaled.jpeg\" alt=\"Plinten\" loading=\"lazy\">\r\n <div class=\"dienst-body\">\r\n <div class=\"dienst-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><path d=\"M3 9h18M9 3v18\"><\/path><\/svg><\/div>\r\n <div class=\"dienst-title\">Plinten<\/div>\r\n <p class=\"dienst-desc\">Nette afwerking van plinten en aansluitingen. Strakke verbinding tussen vloer en wand, zowel in nieuwbouw als bij renovatieprojecten.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dienst-card\">\r\n <img decoding=\"async\" class=\"dienst-foto\" src=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_6341-scaled.jpeg\" alt=\"Kozijnen\" loading=\"lazy\">\r\n <div class=\"dienst-body\">\r\n <div class=\"dienst-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"><\/rect><path d=\"M2 10h20M12 4v16\"><\/path><\/svg><\/div>\r\n <div class=\"dienst-title\">Kozijnen<\/div>\r\n <p class=\"dienst-desc\">Professioneel kitten van kozijnen binnen \u00e9n buiten voor perfecte afwerking en optimale waterdichtheid en isolatie.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dienst-card\">\r\n <img decoding=\"async\" class=\"dienst-foto\" src=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_1372-scaled.jpeg\" alt=\"Beglazing\" loading=\"lazy\">\r\n <div class=\"dienst-body\">\r\n <div class=\"dienst-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"2\"><\/rect><path d=\"M7 7h10v10H7z\"><\/path><\/svg><\/div>\r\n <div class=\"dienst-title\">Beglazing<\/div>\r\n <p class=\"dienst-desc\">Kitten van beglazing voor een waterdichte en duurzame aansluiting rondom elk type glas en raamwerk.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dienst-card\">\r\n <img decoding=\"async\" class=\"dienst-foto\" src=\"https:\/\/jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_9935-scaled.jpeg\" alt=\"Speciaal kitwerk\" loading=\"lazy\">\r\n <div class=\"dienst-body\">\r\n <div class=\"dienst-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" stroke-width=\"1.8\"><\/path><\/svg><\/div>\r\n <div class=\"dienst-title\">Speciaal kitwerk<\/div>\r\n <p class=\"dienst-desc\">Projecten buiten de standaard \u2014 zoals betonnen buitentrappen, grote zakelijke objecten of specifieke constructies. Neem contact op voor maatwerk.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"werkwijze\" class=\"section-dark\">\r\n <div class=\"section-label\">Hoe het werkt<\/div>\r\n <h2 class=\"section-title\">Van aanvraag tot oplevering<\/h2>\r\n <p class=\"section-sub\">Transparant, snel en zonder gedoe. In vier stappen van eerste contact tot strakke oplevering.<\/p>\r\n <div class=\"stappen-grid\">\r\n <div class=\"stap-item\"><div class=\"stap-num\">1<\/div><div class=\"stap-title\">Aanvraag<\/div><p class=\"stap-desc\">Vul het offerteformulier in of neem direct contact op via telefoon of WhatsApp.<\/p><\/div>\r\n <div class=\"stap-item\"><div class=\"stap-num\">2<\/div><div class=\"stap-title\">Vrijblijvende offerte<\/div><p class=\"stap-desc\">Wij nemen contact op, stellen vragen en sturen een duidelijke offerte zonder verborgen kosten.<\/p><\/div>\r\n <div class=\"stap-item\"><div class=\"stap-num\">3<\/div><div class=\"stap-title\">Uitvoering<\/div><p class=\"stap-desc\">Op een afgesproken moment voeren wij het werk vakkundig en netjes uit.<\/p><\/div>\r\n <div class=\"stap-item\"><div class=\"stap-num\">4<\/div><div class=\"stap-title\">Oplevering<\/div><p class=\"stap-desc\">U inspecteert het resultaat. Pas als u tevreden bent is het werk klaar.<\/p><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"projecten\" class=\"section-light\">\r\n <div class=\"projecten-intro\">\r\n <div>\r\n <div class=\"section-label\">Ons werk<\/div>\r\n <h2 class=\"section-title\">Projecten<\/h2>\r\n <\/div>\r\n <p style=\"color:rgba(15,17,23,.4);font-size:14px;max-width:280px;text-align:right;line-height:1.6;\">Een selectie van uitgevoerde projecten.<\/p>\r\n <\/div>\r\n <div class=\"foto-grid\">\r\n <div class=\"foto-item\">\r\n <img decoding=\"async\" src=\"https:\/\/jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_9935-scaled.jpeg\" alt=\"Betonnen buitentrap Helmond Sport\" loading=\"lazy\">\r\n <div class=\"foto-caption\">Betonnen buitentrap \u2014 Helmond Sport<\/div>\r\n <\/div>\r\n <div class=\"foto-item\">\r\n <img decoding=\"async\" src=\"https:\/\/jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_1218-scaled.jpeg\" alt=\"Nieuwbouw badkamer Asten\" loading=\"lazy\">\r\n <div class=\"foto-caption\">Badkamer nieuwbouw \u2014 Asten<\/div>\r\n <\/div>\r\n <div class=\"foto-item\">\r\n <img decoding=\"async\" src=\"https:\/\/jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_9076-scaled.jpeg\" alt=\"Plinten tandartsenpraktijk Etten-Leur\" loading=\"lazy\">\r\n <div class=\"foto-caption\">Plinten \u2014 Tandartsenpraktijk Etten-Leur<\/div>\r\n <\/div>\r\n <div class=\"foto-item\">\r\n <img decoding=\"async\" src=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_7933-scaled.jpeg\" alt=\"Nieuwbouwhuis Nuenen plinten kozijnen keuken\" loading=\"lazy\">\r\n <div class=\"foto-caption\">Plinten, kozijnen & keuken \u2014 Nieuwbouw Nuenen<\/div>\r\n <\/div>\r\n <div class=\"foto-item\">\r\n <img decoding=\"async\" src=\"https:\/\/www.jkitwerken.nl\/wp-content\/uploads\/2026\/03\/IMG_6265-scaled.jpeg\" alt=\"Toiletgroepen kantoorpand Geldrop\" loading=\"lazy\">\r\n <div class=\"foto-caption\">Toiletgroepen \u2014 Kantoorpand Geldrop<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"over\" class=\"section-dark\">\r\n <div class=\"section-label\">Over ons<\/div>\r\n <div class=\"over-layout\">\r\n <div>\r\n <h2 class=\"section-title\" style=\"font-size:clamp(36px,4.5vw,56px);letter-spacing:-2px;margin-bottom:20px;\">Jelle<br>Kruitwagen<\/h2>\r\n <div class=\"over-functie\">Eigenaar JKitwerken<\/div>\r\n <div style=\"display:inline-flex;align-items:center;gap:10px;background:rgba(46,111,243,.12);border:1px solid rgba(46,111,243,.25);border-radius:10px;padding:14px 18px;margin-top:8px;\">\r\n <span style=\"width:8px;height:8px;background:var(--blue);border-radius:50%;flex-shrink:0;box-shadow:0 0 8px var(--blue);\"><\/span>\r\n <span style=\"font-size:13px;color:rgba(255,255,255,.7);line-height:1.4;\">Mierlo & omstreken<br><span style=\"color:rgba(255,255,255,.4);font-size:12px;\">Particulier & zakelijk<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <p class=\"over-tekst\" style=\"font-size:17px;line-height:1.8;margin-bottom:32px;\">Als eigenaar van JKitwerken combineer ik vakmanschap met een scherp oog voor detail. Of het nu gaat om een kleine badkamerrenovatie of een groot zakelijk project \u2014 ik werk altijd met dezelfde toewijding en precisie.<\/p>\r\n <ul class=\"over-punten\">\r\n <li>Particuliere en zakelijke projecten in Mierlo en omstreken<\/li>\r\n <li>Strakke afwerking van sanitair, kozijnen, plinten en meer<\/li>\r\n <li>Persoonlijk contact en eerlijke prijzen<\/li>\r\n <li>Nieuwbouw \u00e9n renovatie \u2014 altijd tot in de puntjes<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"werkgebied\" class=\"section-dark\">\r\n <div class=\"section-label\">Waar wij actief zijn<\/div>\r\n <h2 class=\"section-title\">Werkgebied<\/h2>\r\n <div class=\"werkgebied-grid\">\r\n <div class=\"werkgebied-info\">\r\n <p>JKitwerken is actief in Mierlo en de directe omgeving. Voor grotere of specifieke projecten werken wij ook door heel Nederland \u2014 neem contact op voor een vrijblijvende bespreking.<\/p>\r\n <ul class=\"plaatsen-lijst\">\r\n <li>Mierlo<\/li><li>Helmond<\/li><li>Geldrop<\/li><li>Nuenen<\/li>\r\n <li>Omstreken<\/li><li>Heel Nederland op aanvraag<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"map-wrap\">\r\n <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d19869.31!2d5.607!3d51.4391!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c6d8c8c8c8c8c8%3A0x0!2sMierlo%2C+Nederland!5e0!3m2!1snl!2snl!4v1\" allowfullscreen=\"\" loading=\"lazy\"><\/iframe>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"offerte\" class=\"section-dark\">\r\n <div class=\"offerte-inner\">\r\n\r\n <div class=\"offerte-header\">\r\n <div class=\"section-label\">Gratis & vrijblijvend<\/div>\r\n <h2 class=\"section-title\">Offerte aanvragen<\/h2>\r\n <p class=\"section-sub\">Vul het formulier in en wij nemen zo snel mogelijk contact op.<\/p>\r\n <\/div>\r\n\r\n <div class=\"offerte-wrap\">\r\n\r\n <div class=\"progress-track\" id=\"progressBar\">\r\n <div class=\"prog-step active\" data-step=\"1\">\r\n <div class=\"prog-dot\"><span>1<\/span><\/div>\r\n <div class=\"prog-label\">Dienst<\/div>\r\n <\/div>\r\n <div class=\"prog-step\" data-step=\"2\">\r\n <div class=\"prog-dot\"><span>2<\/span><\/div>\r\n <div class=\"prog-label\">Details<\/div>\r\n <\/div>\r\n <div class=\"prog-step\" data-step=\"3\">\r\n <div class=\"prog-dot\"><span>3<\/span><\/div>\r\n <div class=\"prog-label\">Gegevens<\/div>\r\n <\/div>\r\n <div class=\"prog-step\" data-step=\"4\">\r\n <div class=\"prog-dot\"><span>4<\/span><\/div>\r\n <div class=\"prog-label\">Bevestig<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-card\">\r\n\r\n \r\n <form id=\"offerteForm\" action=\"https:\/\/api.web3forms.com\/submit\" method=\"POST\">\r\n <input type=\"hidden\" name=\"access_key\" value=\"9f9252a1-ffab-44fc-9e88-6a0150238781\">\r\n <input type=\"hidden\" name=\"to\" value=\"info@jkitwerken.nl\">\r\n <input type=\"hidden\" name=\"subject\" value=\"Nieuwe offerteaanvraag \u2013 JKitwerken\">\r\n <input type=\"hidden\" name=\"redirect\" value=\"false\">\r\n <input type=\"hidden\" name=\"dienst\" id=\"h_dienst\">\r\n <input type=\"hidden\" name=\"naam\" id=\"h_naam\">\r\n <input type=\"hidden\" name=\"email\" id=\"h_email\">\r\n <input type=\"hidden\" name=\"telefoon\" id=\"h_telefoon\">\r\n <input type=\"hidden\" name=\"beschrijving\" id=\"h_beschrijving\">\r\n <input type=\"hidden\" name=\"adres\" id=\"h_adres\">\r\n\r\n \r\n <div class=\"form-step active\" id=\"step1\">\r\n <div class=\"step-head\">\r\n <div class=\"step-num\">Stap 1 van 4<\/div>\r\n <div class=\"step-title\">Welke dienst(en) heeft u nodig?<\/div>\r\n <p class=\"step-sub\">Selecteer een of meerdere diensten \u2014 meerdere aanvinken is mogelijk.<\/p>\r\n <\/div>\r\n\r\n <div class=\"dienst-grid\">\r\n <div class=\"dienst-opt\" data-value=\"Sanitair\" onclick=\"toggleDienst(this)\">\r\n <div class=\"d-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"d-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M7 7h10v10H7z\"><\/path><path d=\"M5 12H2M22 12h-3M12 5V2M12 22v-3\"><\/path><\/svg><\/div>\r\n <div class=\"d-text\"><strong>Sanitair<\/strong><small>Badkamer, douche, toilet<\/small><\/div>\r\n <\/div>\r\n <div class=\"dienst-opt\" data-value=\"Plinten\" onclick=\"toggleDienst(this)\">\r\n <div class=\"d-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"d-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><path d=\"M3 9h18M9 3v18\"><\/path><\/svg><\/div>\r\n <div class=\"d-text\"><strong>Plinten<\/strong><small>Vloer-wand aansluitingen<\/small><\/div>\r\n <\/div>\r\n <div class=\"dienst-opt\" data-value=\"Kozijnen\" onclick=\"toggleDienst(this)\">\r\n <div class=\"d-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"d-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"><\/rect><path d=\"M2 10h20M12 4v16\"><\/path><\/svg><\/div>\r\n <div class=\"d-text\"><strong>Kozijnen<\/strong><small>Binnen- en buitenkozijnen<\/small><\/div>\r\n <\/div>\r\n <div class=\"dienst-opt\" data-value=\"Beglazing\" onclick=\"toggleDienst(this)\">\r\n <div class=\"d-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"d-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"2\"><\/rect><path d=\"M7 7h10v10H7z\"><\/path><\/svg><\/div>\r\n <div class=\"d-text\"><strong>Beglazing<\/strong><small>Ramen en glaspanelen<\/small><\/div>\r\n <\/div>\r\n <div class=\"dienst-opt\" data-value=\"Speciaal kitwerk\" onclick=\"toggleDienst(this)\">\r\n <div class=\"d-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"d-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" stroke-width=\"1.8\"><\/path><\/svg><\/div>\r\n <div class=\"d-text\"><strong>Speciaal kitwerk<\/strong><small>Maatwerk op aanvraag<\/small><\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"dienst-hint\">Meerdere opties mogelijk \u2014 klik om te selecteren of deselecteren<\/p>\r\n\r\n <div class=\"form-nav\">\r\n <button type=\"button\" class=\"btn-next\" onclick=\"goStep(2)\">\r\n Volgende stap\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-step\" id=\"step2\">\r\n <div class=\"step-head\">\r\n <div class=\"step-num\">Stap 2 van 4<\/div>\r\n <div class=\"step-title\">Vertel over uw project<\/div>\r\n <p class=\"step-sub\">Hoe meer detail, hoe beter wij kunnen inschatten wat u nodig heeft.<\/p>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label>Omschrijving van het werk<\/label>\r\n <textarea id=\"f_beschrijving\" placeholder=\"Beschrijf het project zo concreet mogelijk...\"><\/textarea>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Adres of locatie<\/label>\r\n <input type=\"text\" id=\"f_adres\" placeholder=\"Straat + huisnummer, plaats\">\r\n <\/div>\r\n\r\n <div class=\"type-section-label\">Particulier of zakelijk?<\/div>\r\n <div class=\"type-row\" id=\"klanttype-row\">\r\n <div class=\"type-opt\" data-group=\"klanttype\" data-value=\"Particulier\" onclick=\"selectType(this)\">\r\n <div class=\"type-radio\"><\/div><div class=\"type-label\">Particulier<\/div>\r\n <\/div>\r\n <div class=\"type-opt\" data-group=\"klanttype\" data-value=\"Zakelijk\" onclick=\"selectType(this)\">\r\n <div class=\"type-radio\"><\/div><div class=\"type-label\">Zakelijk<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"type-section-label\" style=\"margin-top:20px;\">Nieuwbouw of renovatie?<\/div>\r\n <div class=\"type-row\" id=\"projecttype-row\">\r\n <div class=\"type-opt\" data-group=\"projecttype\" data-value=\"Nieuwbouw\" onclick=\"selectType(this)\">\r\n <div class=\"type-radio\"><\/div><div class=\"type-label\">Nieuwbouw<\/div>\r\n <\/div>\r\n <div class=\"type-opt\" data-group=\"projecttype\" data-value=\"Renovatie \/ herstelwerk\" onclick=\"selectType(this)\">\r\n <div class=\"type-radio\"><\/div><div class=\"type-label\">Renovatie \/ herstelwerk<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-nav\" style=\"margin-top:32px;\">\r\n <button type=\"button\" class=\"btn-back\" onclick=\"goStep(1)\">Terug<\/button>\r\n <button type=\"button\" class=\"btn-next\" onclick=\"goStep(3)\">\r\n Volgende stap\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-step\" id=\"step3\">\r\n <div class=\"step-head\">\r\n <div class=\"step-num\">Stap 3 van 4<\/div>\r\n <div class=\"step-title\">Uw contactgegevens<\/div>\r\n <p class=\"step-sub\">Zodat wij u kunnen bereiken met de offerte.<\/p>\r\n <\/div>\r\n\r\n <div class=\"field-row\">\r\n <div class=\"field\"><label>Voornaam<\/label><input type=\"text\" id=\"f_voornaam\" placeholder=\"Jan\"><\/div>\r\n <div class=\"field\"><label>Achternaam<\/label><input type=\"text\" id=\"f_achternaam\" placeholder=\"Jansen\"><\/div>\r\n <\/div>\r\n <div class=\"field\"><label>E-mailadres<\/label><input type=\"email\" id=\"f_email\" placeholder=\"jan@voorbeeld.nl\"><\/div>\r\n <div class=\"field\"><label>Telefoonnummer<\/label><input type=\"tel\" id=\"f_telefoon\" placeholder=\"+31 6 12345678\"><\/div>\r\n\r\n <div class=\"form-nav\">\r\n <button type=\"button\" class=\"btn-back\" onclick=\"goStep(2)\">Terug<\/button>\r\n <button type=\"button\" class=\"btn-next\" onclick=\"goStep(4)\">\r\n Controleer aanvraag\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"form-step\" id=\"step4\">\r\n <div class=\"step-head\">\r\n <div class=\"step-num\">Stap 4 van 4<\/div>\r\n <div class=\"step-title\">Controleer uw aanvraag<\/div>\r\n <p class=\"step-sub\">Klopt alles? Dan versturen wij uw aanvraag.<\/p>\r\n <\/div>\r\n\r\n <div class=\"overzicht-card\">\r\n <dl>\r\n <div class=\"overzicht-row\"><dt>Dienst(en)<\/dt><dd id=\"ov_dienst\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>Klanttype<\/dt><dd id=\"ov_klanttype\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>Type project<\/dt><dd id=\"ov_projecttype\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>Omschrijving<\/dt><dd id=\"ov_beschrijving\" style=\"max-width:340px\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>Adres<\/dt><dd id=\"ov_adres\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>Naam<\/dt><dd id=\"ov_naam\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>E-mail<\/dt><dd id=\"ov_email\">\u2014<\/dd><\/div>\r\n <div class=\"overzicht-row\"><dt>Telefoon<\/dt><dd id=\"ov_telefoon\">\u2014<\/dd><\/div>\r\n <\/dl>\r\n <\/div>\r\n\r\n <div class=\"form-nav\">\r\n <button type=\"button\" class=\"btn-back\" onclick=\"goStep(3)\">Terug<\/button>\r\n <button type=\"submit\" class=\"btn-next\" id=\"submitBtn\">\r\n Aanvraag versturen\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"><\/path><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n\r\n <div class=\"success-screen\" id=\"successScreen\">\r\n <div class=\"success-ring\">\r\n <div class=\"success-icon-inner\">\r\n <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\r\n <\/div>\r\n <\/div>\r\n <h3>Aanvraag verstuurd!<\/h3>\r\n <p>Bedankt voor uw aanvraag. Jelle neemt zo snel mogelijk<br>contact met u op voor een vrijblijvende offerte.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n<footer>\r\n <div>\r\n <div class=\"footer-logo\">JKit<span class=\"werken\">werken<\/span><\/div>\r\n <div class=\"footer-kvk\">KVK 99662906 \u2014 Mierlo<\/div>\r\n <\/div>\r\n <div class=\"footer-info\">\r\n <a href=\"tel:+31617714535\" class=\"footer-item\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.5a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21.73 16v.92z\"><\/path><\/svg>\r\n +31 6 17714535\r\n <\/a>\r\n <a href=\"mailto:info@jkitwerken.nl\" class=\"footer-item\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path><polyline points=\"22,6 12,13 2,6\"><\/polyline><\/svg>\r\n info@jkitwerken.nl\r\n <\/a>\r\n <div class=\"footer-social\">\r\n <a href=\"https:\/\/www.instagram.com\/jkitwerken\/\" target=\"_blank\" title=\"Instagram\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"><\/path><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/www.facebook.com\/people\/JKitwerken\/61580362393382\" target=\"_blank\" title=\"Facebook\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"><\/path><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n\r\n<a href=\"https:\/\/wa.me\/31617714535\" target=\"_blank\" class=\"wa-btn\" title=\"WhatsApp JKitwerken\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z\"><\/path><\/svg>\r\n<\/a>\r\n\r\n<script>\r\n let currentStep = 1;\r\n const selectedDiensten = new Set();\r\n const selectedTypes = {};\r\n\r\n function toggleDienst(el) {\r\n const v = el.dataset.value;\r\n if (selectedDiensten.has(v)) {\r\n selectedDiensten.delete(v);\r\n el.classList.remove('selected');\r\n } else {\r\n selectedDiensten.add(v);\r\n el.classList.add('selected');\r\n }\r\n }\r\n\r\n function selectType(el) {\r\n const group = el.dataset.group;\r\n selectedTypes[group] = el.dataset.value;\r\n document.querySelectorAll(`.type-opt[data-group=\"${group}\"]`).forEach(o => o.classList.remove('selected'));\r\n el.classList.add('selected');\r\n }\r\n\r\n function goStep(step) {\r\n if (step === 2 && selectedDiensten.size === 0) {\r\n shakeForm(); alert('Selecteer minimaal \u00e9\u00e9n dienst.'); return;\r\n }\r\n if (step === 4) {\r\n const naam = (document.getElementById('f_voornaam').value.trim() + ' ' + document.getElementById('f_achternaam').value.trim()).trim();\r\n const email = document.getElementById('f_email').value.trim();\r\n const tel = document.getElementById('f_telefoon').value.trim();\r\n if (!naam || !email || !tel) { alert('Vul alle contactgegevens in.'); return; }\r\n\r\n const beschr = document.getElementById('f_beschrijving').value.trim() || '\u2014';\r\n const adres = document.getElementById('f_adres').value.trim() || '\u2014';\r\n const klanttype = selectedTypes['klanttype'] || '\u2014';\r\n const projecttype = selectedTypes['projecttype'] || '\u2014';\r\n const diensten = Array.from(selectedDiensten);\r\n\r\n const ovD = document.getElementById('ov_dienst');\r\n ovD.innerHTML = '';\r\n const wrap = document.createElement('div');\r\n wrap.className = 'dienst-tags';\r\n diensten.forEach(d => {\r\n const t = document.createElement('span');\r\n t.className = 'dienst-tag'; t.textContent = d;\r\n wrap.appendChild(t);\r\n });\r\n ovD.appendChild(wrap);\r\n\r\n document.getElementById('ov_klanttype').textContent = klanttype;\r\n document.getElementById('ov_projecttype').textContent = projecttype;\r\n document.getElementById('ov_beschrijving').textContent = beschr;\r\n document.getElementById('ov_adres').textContent = adres;\r\n document.getElementById('ov_naam').textContent = naam;\r\n document.getElementById('ov_email').textContent = email;\r\n document.getElementById('ov_telefoon').textContent = tel;\r\n\r\n document.getElementById('h_dienst').value = diensten.join(', ');\r\n document.getElementById('h_naam').value = naam;\r\n document.getElementById('h_email').value = email;\r\n document.getElementById('h_telefoon').value = tel;\r\n document.getElementById('h_beschrijving').value = beschr + ' | Klant: ' + klanttype + ' | Project: ' + projecttype;\r\n document.getElementById('h_adres').value = adres;\r\n }\r\n\r\n document.getElementById('step' + currentStep).classList.remove('active');\r\n document.getElementById('step' + step).classList.add('active');\r\n\r\n document.querySelectorAll('.prog-step').forEach(s => {\r\n const n = parseInt(s.dataset.step);\r\n s.classList.remove('active', 'done');\r\n if (n === step) s.classList.add('active');\r\n if (n < step) s.classList.add('done');\r\n });\r\n\r\n currentStep = step;\r\n document.getElementById('offerte').scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n }\r\n\r\n function shakeForm() {\r\n const c = document.querySelector('.form-card');\r\n c.style.animation = 'none';\r\n c.offsetHeight;\r\n c.style.animation = 'shake .4s ease';\r\n setTimeout(() => c.style.animation = '', 400);\r\n }\r\n\r\n document.getElementById('offerteForm').addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n const btn = document.getElementById('submitBtn');\r\n btn.innerHTML = 'Versturen\u2026 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>';\r\n btn.disabled = true;\r\n\r\n try {\r\n const res = await fetch('https:\/\/api.web3forms.com\/submit', { method: 'POST', body: new FormData(this) });\r\n const json = await res.json();\r\n if (json.success) {\r\n document.getElementById('progressBar').style.display = 'none';\r\n document.getElementById('offerteForm').style.display = 'none';\r\n document.getElementById('successScreen').classList.add('active');\r\n } else {\r\n alert('Er ging iets mis. Probeer het opnieuw of bel ons direct.');\r\n btn.innerHTML = 'Aanvraag versturen <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>';\r\n btn.disabled = false;\r\n }\r\n } catch {\r\n alert('Verbindingsfout. Probeer het opnieuw.');\r\n btn.innerHTML = 'Aanvraag versturen <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>';\r\n btn.disabled = false;\r\n }\r\n });\r\n<\/script>\r\n\r\n<style>\r\n@keyframes shake {\r\n 0%,100% { transform: translateX(0); }\r\n 20% { transform: translateX(-6px); }\r\n 40% { transform: translateX(6px); }\r\n 60% { transform: translateX(-4px); }\r\n 80% { transform: translateX(4px); }\r\n}\r\n<\/style>\r\n\r\n\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t<script type=\"speculationrules\">\r\n{\"prefetch\":[{\"source\":\"document\",\"where\":{\"and\":[{\"href_matches\":\"\/*\"},{\"not\":{\"href_matches\":[\"\/wp-*.php\",\"\/wp-admin\/*\",\"\/wp-content\/uploads\/*\",\"\/wp-content\/*\",\"\/wp-content\/plugins\/*\",\"\/wp-content\/themes\/hello-elementor\/*\",\"\/*\\\\?(.+)\"]}},{\"not\":{\"selector_matches\":\"a[rel~=\\\"nofollow\\\"]\"}},{\"not\":{\"selector_matches\":\".no-prefetch, .no-prefetch a\"}}]},\"eagerness\":\"conservative\"}]}\r\n<\/script>\r\n\t\t\t<script>\r\n\t\t\t\tconst lazyloadRunObserver = () => {\r\n\t\t\t\t\tconst lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );\r\n\t\t\t\t\tconst lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {\r\n\t\t\t\t\t\tentries.forEach( ( entry ) => {\r\n\t\t\t\t\t\t\tif ( entry.isIntersecting ) {\r\n\t\t\t\t\t\t\t\tlet lazyloadBackground = entry.target;\r\n\t\t\t\t\t\t\t\tif( lazyloadBackground ) {\r\n\t\t\t\t\t\t\t\t\tlazyloadBackground.classList.add( 'e-lazyloaded' );\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\tlazyloadBackgroundObserver.unobserve( entry.target );\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}, { rootMargin: '200px 0px 200px 0px' } );\r\n\t\t\t\t\tlazyloadBackgrounds.forEach( ( lazyloadBackground ) => {\r\n\t\t\t\t\t\tlazyloadBackgroundObserver.observe( lazyloadBackground );\r\n\t\t\t\t\t} );\r\n\t\t\t\t};\r\n\t\t\t\tconst events = [\r\n\t\t\t\t\t'DOMContentLoaded',\r\n\t\t\t\t\t'elementor\/lazyload\/observe',\r\n\t\t\t\t];\r\n\t\t\t\tevents.forEach( ( event ) => {\r\n\t\t\t\t\tdocument.addEventListener( event, lazyloadRunObserver );\r\n\t\t\t\t} );\r\n\t\t\t<\/script>\r\n\t\t\t<script src=\"https:\/\/www.jkitwerken.nl\/wp-content\/themes\/hello-elementor\/assets\/js\/hello-frontend.js?ver=3.4.7\" id=\"hello-theme-frontend-js\"><\/script>\r\n<script src=\"https:\/\/www.jkitwerken.nl\/wp-content\/plugins\/elementor\/assets\/js\/webpack.runtime.min.js?ver=4.0.1\" id=\"elementor-webpack-runtime-js\"><\/script>\r\n<script src=\"https:\/\/www.jkitwerken.nl\/wp-content\/plugins\/elementor\/assets\/js\/frontend-modules.min.js?ver=4.0.1\" id=\"elementor-frontend-modules-js\"><\/script>\r\n<script src=\"https:\/\/www.jkitwerken.nl\/wp-includes\/js\/jquery\/ui\/core.min.js?ver=1.13.3\" id=\"jquery-ui-core-js\"><\/script>\r\n<script id=\"elementor-frontend-js-before\">\r\nvar elementorFrontendConfig = {\"environmentMode\":{\"edit\":false,\"wpPreview\":false,\"isScriptDebug\":false},\"i18n\":{\"shareOnFacebook\":\"Deel via Facebook\",\"shareOnTwitter\":\"Deel via Twitter\",\"pinIt\":\"Pin dit\",\"download\":\"Downloaden\",\"downloadImage\":\"Download afbeelding\",\"fullscreen\":\"Volledig scherm\",\"zoom\":\"Zoom\",\"share\":\"Delen\",\"playVideo\":\"Video afspelen\",\"previous\":\"Vorige\",\"next\":\"Volgende\",\"close\":\"Sluiten\",\"a11yCarouselPrevSlideMessage\":\"Vorige slide\",\"a11yCarouselNextSlideMessage\":\"Volgende slide\",\"a11yCarouselFirstSlideMessage\":\"Ga naar de eerste slide\",\"a11yCarouselLastSlideMessage\":\"Ga naar de laatste slide\",\"a11yCarouselPaginationBulletMessage\":\"Ga naar slide\"},\"is_rtl\":false,\"breakpoints\":{\"xs\":0,\"sm\":480,\"md\":768,\"lg\":1025,\"xl\":1440,\"xxl\":1600},\"responsive\":{\"breakpoints\":{\"mobile\":{\"label\":\"Mobiel portret\",\"value\":767,\"default_value\":767,\"direction\":\"max\",\"is_enabled\":true},\"mobile_extra\":{\"label\":\"Mobiel landschap\",\"value\":880,\"default_value\":880,\"direction\":\"max\",\"is_enabled\":false},\"tablet\":{\"label\":\"Tablet portret\",\"value\":1024,\"default_value\":1024,\"direction\":\"max\",\"is_enabled\":true},\"tablet_extra\":{\"label\":\"Tablet landschap\",\"value\":1200,\"default_value\":1200,\"direction\":\"max\",\"is_enabled\":false},\"laptop\":{\"label\":\"Laptop\",\"value\":1366,\"default_value\":1366,\"direction\":\"max\",\"is_enabled\":false},\"widescreen\":{\"label\":\"Breedbeeld\",\"value\":2400,\"default_value\":2400,\"direction\":\"min\",\"is_enabled\":false}},\"hasCustomBreakpoints\":false},\"version\":\"4.0.1\",\"is_static\":false,\"experimentalFeatures\":{\"e_font_icon_svg\":true,\"additional_custom_breakpoints\":true,\"container\":true,\"e_optimized_markup\":true,\"hello-theme-header-footer\":true,\"e_pro_free_trial_popup\":true,\"nested-elements\":true,\"global_classes_should_enforce_capabilities\":true,\"e_variables\":true,\"e_opt_in_v4_page\":true,\"e_components\":true,\"e_interactions\":true,\"e_widget_creation\":true,\"import-export-customization\":true},\"urls\":{\"assets\":\"https:\\\/\\\/www.jkitwerken.nl\\\/wp-content\\\/plugins\\\/elementor\\\/assets\\\/\",\"ajaxurl\":\"https:\\\/\\\/www.jkitwerken.nl\\\/wp-admin\\\/admin-ajax.php\",\"uploadUrl\":\"https:\\\/\\\/www.jkitwerken.nl\\\/wp-content\\\/uploads\"},\"nonces\":{\"floatingButtonsClickTracking\":\"b2fcd0c709\",\"atomicFormsSendForm\":\"1e2f5619af\"},\"swiperClass\":\"swiper\",\"settings\":{\"page\":[],\"editorPreferences\":[]},\"kit\":{\"active_breakpoints\":[\"viewport_mobile\",\"viewport_tablet\"],\"global_image_lightbox\":\"yes\",\"lightbox_enable_counter\":\"yes\",\"lightbox_enable_fullscreen\":\"yes\",\"lightbox_enable_zoom\":\"yes\",\"lightbox_enable_share\":\"yes\",\"lightbox_title_src\":\"title\",\"lightbox_description_src\":\"description\",\"hello_header_logo_type\":\"title\",\"hello_footer_logo_type\":\"logo\"},\"post\":{\"id\":11,\"title\":\"JKitwerken%20%E2%80%93%20Strak%2C%20waterdicht%20en%20betrouwbaar\",\"excerpt\":\"\",\"featuredImage\":false}};\r\n<\/script>\r\n<script src=\"https:\/\/www.jkitwerken.nl\/wp-content\/plugins\/elementor\/assets\/js\/frontend.min.js?ver=4.0.1\" id=\"elementor-frontend-js\"><\/script><span id=\"elementor-device-mode\" class=\"elementor-screen-only\"><\/span>\r\n\r\n<\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>JKitwerken \u2013 Strak, waterdicht en betrouwbaar JKitwerken \u2013 Strak, waterdicht, betrouwbaar Offerte aanvragen Mierlo & omstreken \u00b7 heel Nederland op aanvraag Strak,waterdicht,betrouwbaar. Vakmanschap en precisie voor duurzame kitoplossingen. Voor particulieren en zakelijke opdrachtgevers \u2014 actief in Mierlo en omstreken, door heel Nederland op aanvraag. Vraag een offerte aan Bekijk diensten 100%Kwaliteitsgarantie Particulier& zakelijk 5Gespecialiseerde diensten […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":16,"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":58,"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions\/58"}],"wp:attachment":[{"href":"https:\/\/www.jkitwerken.nl\/index.php\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}