/* Ontwerp 22: OFFERTEMOLEN. Werkplaats Licht in de kleuren van het molenlogo: donkerbruin, oranje, room, een vleug gras-groen. Baloo 2 als kopletter. */
:root{--font-head:"Baloo 2",ui-sans-serif,system-ui,sans-serif;--bg:#faf6ee;--white:#fff;--ink:#4a2410;--ink-2:#6b4a33;--muted:#8c7a6b;--line:#ece3d5;--radius:20px;--radius-sm:14px;
  --teal:#d4861c;--teal-d:#b06d12;--teal-l:#fbeedb;--accent:#f2b632;--accent-d:#d99d17;--accent-l:#fff4d1;
  --shadow:0 1px 2px rgba(74,36,16,.06),0 20px 50px -24px rgba(212,134,28,.35);--shadow-lg:0 40px 80px -30px rgba(212,134,28,.4)}
body{background:radial-gradient(900px 600px at 10% -10%,#fbe6c4 0,transparent 60%),radial-gradient(700px 500px at 100% 20%,#e6efd0 0,transparent 55%),var(--bg);color:var(--ink)}
h1,h2,h3{letter-spacing:-.01em;font-weight:700}
.site-header,.topbar{background:rgba(255,255,255,.7);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(74,36,16,.08)}
.site-nav>a:hover{color:var(--teal)}
.wordmark b{color:var(--teal);background:none}
.nav-search,.nav-toggle{background:#fff;border-color:rgba(74,36,16,.12)}
@media(max-width:1120px){.site-nav{background:#fff;border-bottom-color:var(--line)}}
.btn{border-radius:12px;background:linear-gradient(135deg,var(--teal),#e9a03a);color:#fff;font-weight:800;box-shadow:0 12px 30px -12px rgba(212,134,28,.9);position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);transition:transform .6s}
.btn:hover::after{transform:translateX(100%)}
.btn:hover{transform:translateY(-2px);color:#fff}
.btn-dark,.btn-accent,.site-nav>a.btn,.sticky-cta .btn{background:linear-gradient(135deg,var(--accent),#e9a300);color:#3a2208;box-shadow:0 12px 30px -12px rgba(242,182,50,.9)}
.btn-dark:hover,.btn-accent:hover,.site-nav>a.btn,.site-nav>a.btn:hover{color:#3a2208}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--teal);box-shadow:inset 0 0 0 1.5px rgba(212,134,28,.4)}
.btn-ghost:hover{background:#fff;color:var(--teal-d)}
.btn-muted{background:#efe6d8;color:var(--ink);box-shadow:none}.btn-muted:hover{color:var(--ink)}
.btn-link{color:var(--teal);box-shadow:none;background:none}.btn-link::after{content:none}
.hero-home,.page-hero,.hero{background:transparent;border-bottom:1px solid rgba(74,36,16,.08);position:relative;overflow:visible}
.hero-home h1,.page-hero h1{font-size:clamp(2.4rem,5.6vw,4.4rem)}
.hero-home::after{display:none}
.hero-home .hero-inner::before{content:"";position:absolute;inset:-40px 0 0;height:auto;pointer-events:none;z-index:-1;opacity:.9;
  background:no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cg fill='none' stroke='%23d4861c' stroke-opacity='.18' stroke-width='2'%3E%3Ccircle cx='150' cy='120' r='90'/%3E%3Ccircle cx='150' cy='120' r='140'/%3E%3Ccircle cx='1050' cy='460' r='120'/%3E%3Ccircle cx='1050' cy='460' r='180'/%3E%3C/g%3E%3Cg fill='%23f2b632' fill-opacity='.9'%3E%3Ccircle cx='980' cy='120' r='6'/%3E%3Ccircle cx='220' cy='470' r='5'/%3E%3Ccircle cx='620' cy='60' r='4'/%3E%3C/g%3E%3C/svg%3E") center/cover}
.mark{background:none;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(90deg,var(--teal),#7a4a1a)}
.eyebrow{color:var(--teal-d);letter-spacing:.14em;background:rgba(212,134,28,.1);padding:6px 14px;border-radius:999px;border:1px solid rgba(212,134,28,.3)}
.hero-search{background:#fff;border:1px solid rgba(74,36,16,.1);backdrop-filter:blur(12px);box-shadow:var(--shadow-lg)}
.quick a,.chip,.vp-facts li{background:rgba(255,255,255,.7);border-color:rgba(74,36,16,.1)}
.quick a:hover,.chip:hover{border-color:var(--teal);color:var(--teal)}
.trust span::before{color:var(--teal)}
.card,.step,.stat,.cat-tile,.faq details,.seo-company,.vp-service,.option-card,.tool-input,.bubble.customer{background:rgba(255,255,255,.72);border:1px solid rgba(74,36,16,.08);backdrop-filter:blur(10px)}
.card,.step,.stat{box-shadow:var(--shadow)}
.cat-tile{transition:transform .25s,box-shadow .25s,border-color .25s}
.cat-tile:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:var(--shadow-lg);border-color:var(--teal)}
.cat-tile .illu{border-radius:0;filter:saturate(1.1)}
.search-item:hover,.search-item.active{background:var(--teal-l)}
.section-white{background:rgba(255,255,255,.55);backdrop-filter:blur(6px);border-color:rgba(74,36,16,.06)}
.step .n{border-radius:12px;background:linear-gradient(135deg,var(--teal),var(--accent));color:#fff}
.cta-band{background:linear-gradient(135deg,#d4861c,#b06d12);color:#fff;border-radius:24px;box-shadow:var(--shadow-lg)}
.cta-band h2{color:#fff}.cta-band p{color:#fbeedb}.cta-band .eyebrow{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35)}
.cta-band[style*="--ink"]{background:linear-gradient(135deg,var(--accent),#e9a300)!important;color:#3a2208}
.cta-band[style*="--ink"] h2,.cta-band[style*="--ink"] p{color:#3a2208}
.cta-inline{background:rgba(212,134,28,.08);border:1px solid rgba(212,134,28,.25);border-radius:16px}
.illu,.hero-split .illu,.vp-hero-img img{border:1px solid rgba(74,36,16,.08);border-radius:20px;box-shadow:var(--shadow-lg)}
.vp-contact{border:1px solid rgba(242,182,50,.8)}
.vp-tabs button[aria-selected="true"]{background:var(--teal)}
.vp-kw span,.vp-kw a{background:var(--teal-l);color:var(--teal-d)}
.tool-row.main{background:var(--ink)}
.plan-featured{border-color:var(--teal)}
.footer{background:#4a2410}
.side a.active{background:var(--teal-l);color:var(--teal-d)}
.flash-info{background:var(--teal-l);border-color:rgba(212,134,28,.4)}
@keyframes wngfloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
.hl5-float{position:absolute;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:1.8rem;background:rgba(255,255,255,.78);border:1px solid rgba(74,36,16,.08);backdrop-filter:blur(8px);box-shadow:var(--shadow);animation:wngfloat 6s ease-in-out infinite;pointer-events:none}
.hl5-ticker,.hl6-ticker{background:rgba(255,255,255,.6);backdrop-filter:blur(6px);border-color:rgba(74,36,16,.08)}
.hl5-all{background:var(--teal-l)}.hl5-all strong{color:var(--teal-d)!important}
.hl6-panel{background:rgba(255,255,255,.72);border:1px solid rgba(74,36,16,.08);backdrop-filter:blur(14px);box-shadow:var(--shadow-lg)}
.hl6-badge{background:linear-gradient(135deg,var(--accent),#e9a300);color:#3a2208}
.hl6-pop-item{background:rgba(255,255,255,.75);border:1px solid rgba(74,36,16,.08)}
.hl6-pop-item:hover{border-color:var(--teal);box-shadow:var(--shadow)}
.hl6-cat{background:rgba(255,255,255,.72);border:1px solid rgba(74,36,16,.08);backdrop-filter:blur(10px)}
.hl6-cat:hover{border-color:var(--teal);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.hl6-timeline::before{background:linear-gradient(var(--teal),var(--accent))}
.hl6-timeline li>.n{background:linear-gradient(135deg,var(--teal),var(--accent));color:#fff;box-shadow:0 0 0 6px var(--bg)}
.hl6-trust li::before{background:var(--teal-l);color:var(--teal-d)}
.sticky-cta{background:rgba(255,255,255,.9);border-top:1px solid rgba(74,36,16,.1)}
.search-results{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.hero-search .field input,.nav-search input,input[type=search]{background:#fff}
.hero-search{z-index:30}.hero-search .search-results{background:#fff;backdrop-filter:none;z-index:80}
.cat-tile,.hl5-tile,.hl6-cat{background:#fff;backdrop-filter:none}.hl5-tile .cat-body{background:#fff}.hl5-all{background:#fff}
.cat-tile .illu,.hl5-tile .illu,.hl5-step img,.hl6-cat img{box-shadow:none;border:0}
.hero,.hero h1,.hero h2{color:var(--ink)}.hero .lead,.hero p{color:var(--ink-2)}.hero a:not(.btn){color:var(--teal)}.hero .eyebrow{color:var(--teal-d)}
.btn-link:hover,a.btn-link:hover{background:none;color:var(--teal-d);text-decoration:underline;transform:none;box-shadow:none}
.cta-band a:not(.btn){color:#fff;text-decoration:underline}.cta-band[style*="--ink"] a:not(.btn){color:#3a2208}

.brand-img{height:62px;width:auto;display:block;margin:-8px 0}.footer .brand-img{display:none}@media(max-width:560px){.brand-img{height:46px;margin:-4px 0}}
.footer .wordmark b{color:#f2b632}
.brand{flex-shrink:0}.brand-img{flex:0 0 auto;max-width:none;object-fit:contain;aspect-ratio:409/160}