/* Oplever Klaar — retouch v34 ("versie 4"). Laatste CSS-laag; laat inhoud en structuur ongemoeid. */

/* Clear Sans zonder oude TrueType-hinting: rendert op elke grootte gelijkmatig en is 6x kleiner.
   Zelfde familienaam en gewichten, zodat alle bestaande regels deze bestanden gebruiken. */
@font-face{font-family:"Clear Sans";src:url("clear-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Clear Sans";src:url("clear-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --okr-green:#123f35;--okr-green-deep:#0c2f27;--okr-green-soft:#1b4b3f;
  --okr-cream:#fff5df;--okr-gold:#e3bf73;--okr-gold-soft:#f3dca6;--okr-gold-ink:#a77c25;
  --okr-line:#527568;--okr-paper:#faf7f0;--okr-ink:#123c35;--okr-muted:#566a63;
  --okr-radius:20px;--okr-ease:cubic-bezier(.2,.75,.2,1);
  --okr-shadow:0 1px 2px rgba(18,60,53,.05),0 14px 34px -18px rgba(18,60,53,.28);
  --okr-shadow-hover:0 2px 4px rgba(18,60,53,.06),0 28px 56px -24px rgba(18,60,53,.42);
  --okr-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--okr-gold);color:var(--okr-green)}
body{background:var(--okr-paper)}
:is(h1,h2,h3){text-wrap:balance}
main p{text-wrap:pretty}

/* ---------- Header: glas-effect, compacter na scrollen ---------- */
#navbar>div:first-child{background:rgba(15,55,46,.86)!important;-webkit-backdrop-filter:saturate(150%) blur(14px)!important;backdrop-filter:saturate(150%) blur(14px)!important;border-bottom:1px solid transparent;transition:box-shadow .35s var(--okr-ease),border-color .35s,padding .35s var(--okr-ease)}
html.okr-scrolled #navbar>div:first-child{box-shadow:0 14px 34px -22px rgba(0,0,0,.7);border-bottom-color:rgba(227,191,115,.16)}
@media (min-width:1024px){
  html.okr-scrolled #navbar>div:first-child{padding-top:10px!important;padding-bottom:10px!important}
  #navbar nav>ul>li>a{position:relative}
  #navbar nav>ul>li>a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--okr-gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--okr-ease)}
  #navbar nav>ul>li>a:hover::after,#navbar nav>ul>li>a:focus-visible::after{transform:scaleX(1)}
}

/* ---------- Donkere vlakken: diepte, zacht licht en fijne korrel ---------- */
:is(.ok23-hero,#offerte-aanvragen,.ok23-footer,.region-top){position:relative;isolation:isolate}
.ok23-hero{background:
  radial-gradient(900px 520px at 88% -8%,rgba(227,191,115,.17),transparent 62%),
  radial-gradient(760px 560px at -12% 108%,rgba(76,170,135,.20),transparent 60%),
  linear-gradient(180deg,#134136 0%,#0f362d 100%)!important}
.ok23-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,245,223,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,245,223,.05) 1px,transparent 1px);background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 72% 30%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 72% 30%,#000 0%,transparent 75%)}
:is(.ok23-hero,#offerte-aanvragen,.ok23-footer)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--okr-grain);opacity:.05;mix-blend-mode:overlay}
#offerte-aanvragen{background:
  radial-gradient(800px 500px at 100% 0%,rgba(227,191,115,.14),transparent 60%),
  radial-gradient(700px 500px at 0% 100%,rgba(76,170,135,.16),transparent 60%),
  var(--okr-green)!important}
.ok23-footer{background:radial-gradient(900px 420px at 15% 0%,rgba(227,191,115,.10),transparent 60%),linear-gradient(180deg,#123f35,#0c2f27)!important}

/* Hero: koppen strakker, goudaccent met zachte glans */
.ok23-hero h1{letter-spacing:-.05em!important;line-height:1!important}
.ok23-hero h1 span{background:linear-gradient(100deg,#e3bf73 0%,#f6e2b3 45%,#e3bf73 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important}
.ok23-lead{color:#e9efe9!important}
.ok23-assurances li{opacity:.92}

/* ---------- Lichte secties: rustiger ritme en strakkere koppen ---------- */
.ok-section{padding:clamp(64px,8vw,112px) 0!important}
.ok-section-head{align-items:flex-end!important;padding-bottom:26px;margin-bottom:40px!important;border-bottom:1px solid rgba(18,60,53,.10)}
:is(.ok-section-head h2,.region-wrap>h2,.ok-blog-related h2){letter-spacing:-.035em!important;line-height:1.06!important;font-weight:700!important}
.region-stats h2{color:var(--okr-cream)!important}
.ok-section-head h2{font-size:clamp(32px,3.7vw,52px)!important}
.ok-section-head p{color:var(--okr-muted)!important}
:is(main h3){letter-spacing:-.015em}

/* Kickers: dun goudlijntje ervoor, rustiger kleur op licht */
:is(.ok-eyebrow,.region-kicker)::before{content:"";display:inline-block;width:26px;height:2px;margin:0 12px 0 0;vertical-align:.3em;border-radius:2px;background:var(--okr-gold)}
main :is(.ok-eyebrow,.region-kicker){color:var(--okr-gold-ink)!important}
:is(.region-stats,.ok23-hero,#offerte-aanvragen,.ok23-footer) :is(.ok-eyebrow,.region-kicker){color:var(--okr-gold)!important}

/* ---------- Kaarten: één stijl, zachte schaduw, rustige hover ---------- */
:is(.ok-service,.ok-media-card,.v9-card,.rv-card,.ok-photo){border-radius:var(--okr-radius)!important;border:1px solid rgba(18,60,53,.08)!important;background:#fff;box-shadow:var(--okr-shadow)!important;overflow:hidden;transition:transform .5s var(--okr-ease),box-shadow .5s var(--okr-ease),border-color .3s ease!important}
:is(.ok-service,.ok-media-card,.ok-photo) img{transition:transform .9s var(--okr-ease)!important}
@media (hover:hover){
  :is(.ok-service,.ok-media-card,.v9-card,.rv-card,.ok-photo):hover{transform:translateY(-6px)!important;box-shadow:var(--okr-shadow-hover)!important;border-color:rgba(227,191,115,.6)!important}
  :is(.ok-service,.ok-media-card,.ok-photo):hover img{transform:scale(1.05)!important}
}
.rv-stars{color:var(--okr-gold-ink)!important;letter-spacing:.08em}
.rv-avatar{background:var(--okr-green)!important;color:var(--okr-gold)!important}

/* Stappen: groot volgnummer-gevoel met goudlijn */
.ok-step{position:relative;padding-top:22px!important;border-top:2px solid rgba(18,60,53,.12)}
.ok-step::before{content:"";position:absolute;left:0;top:-2px;width:56px;height:2px;background:var(--okr-gold);transition:width .6s var(--okr-ease)}
.ok-step:hover::before{width:100%}
.ok-step b{color:var(--okr-gold-ink)!important;letter-spacing:.12em}

/* Kerncijfers */
.region-stats strong{color:var(--okr-gold)!important;letter-spacing:-.03em}

/* ---------- Knoppen ---------- */
:is(.ok23-btn,.ok-button,.region-home-link,#offerte-aanvragen form button[type=submit]){border-radius:12px!important;transition:transform .3s var(--okr-ease),box-shadow .3s var(--okr-ease),background-color .25s ease,color .25s ease!important}
@media (hover:hover){
  :is(.ok23-btn,.ok-button,#offerte-aanvragen form button[type=submit]):hover{transform:translateY(-2px)}
  .ok23-btn:not(.ok23-outline):hover{box-shadow:0 16px 30px -14px rgba(227,191,115,.75)}
}
.ok23-btn [aria-hidden=true]{display:inline-block;transition:transform .3s var(--okr-ease)}
.ok23-btn:hover [aria-hidden=true]{transform:translate(3px,-3px)}

/* ---------- Formulier ---------- */
#offerte-aanvragen form{border-radius:24px!important;box-shadow:0 40px 90px -40px rgba(0,0,0,.55)!important}
form.oplever-form-v2 :is(input,select,textarea){border-radius:12px!important;background:#fbfcfa!important;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
form.oplever-form-v2 :is(input,select,textarea):hover{border-color:#9fbcb2!important}
form.oplever-form-v2 :is(input,select,textarea):focus{background:#fff!important;border-color:#1b6b57!important;outline:none!important;box-shadow:0 0 0 4px rgba(227,191,115,.45)!important}
form.oplever-form-v2 fieldset{border-radius:16px!important;background:linear-gradient(180deg,#fbfaf5,#fff)}

/* ---------- Veelgestelde vragen ---------- */
#faq details{border-radius:14px;padding:4px 20px!important;margin:0 0 10px;background:#fff;border:1px solid rgba(18,60,53,.09)!important;box-shadow:0 1px 2px rgba(18,60,53,.04);transition:border-color .3s,box-shadow .3s}
#faq details[open]{border-color:rgba(227,191,115,.7)!important;box-shadow:var(--okr-shadow)}
#faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;cursor:pointer}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"";flex:0 0 12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat;color:var(--okr-gold-ink);transition:transform .35s var(--okr-ease)}
#faq details[open] summary::after{transform:rotate(45deg)}
#faq details>p{margin-top:0;padding-bottom:16px}

/* ---------- Cookiemelding in huisstijl (keuzes even zichtbaar) ---------- */
.klaro .cookie-notice:not(.cookie-modal-notice){background:rgba(12,47,39,.97)!important;color:var(--okr-cream)!important;border-top:1px solid rgba(227,191,115,.22);box-shadow:0 -24px 60px -30px rgba(0,0,0,.6)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p{color:#e5ede8!important}
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn{border-radius:10px!important;padding:10px 18px!important;font-weight:700!important;font-family:inherit!important}
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cn-decline{background:var(--okr-cream)!important;color:var(--okr-green)!important}
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-success{background:var(--okr-gold)!important;color:var(--okr-green)!important}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more{background:transparent!important;color:var(--okr-cream)!important;border:1px solid rgba(255,245,223,.45)!important;border-radius:10px!important;padding:9px 16px!important;text-decoration:none!important}

/* ---------- Animaties (alleen als de bezoeker beweging toestaat) ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @keyframes okr-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes okr-shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
  .ok23-intro>*{animation:okr-up .9s var(--okr-ease) both}
  .ok23-intro>:nth-child(2){animation-delay:.08s}.ok23-intro>:nth-child(3){animation-delay:.16s}
  .ok23-intro>:nth-child(4){animation-delay:.24s}.ok23-intro>:nth-child(n+5){animation-delay:.32s}
  .ok23-visual{animation:okr-up 1.1s .2s var(--okr-ease) both}
  .ok23-hero h1 span{animation:okr-shine 7s ease-in-out infinite}
  html.okr-js .okr-rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--okr-ease),transform .9s var(--okr-ease);transition-delay:var(--okr-d,0ms)}
  html.okr-js .okr-rv.okr-in{opacity:1;transform:none}
  /* Leesvoortgang bovenaan (browsers met scroll-gestuurde animaties) */
  @supports (animation-timeline:scroll()){
    @keyframes okr-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    body::after{content:"";position:fixed;left:0;top:0;width:100%;height:3px;z-index:9999;pointer-events:none;background:linear-gradient(90deg,var(--okr-gold),var(--okr-gold-soft));transform-origin:0 50%;animation:okr-progress linear both;animation-timeline:scroll(root)}
  }
}
@media print{.okr-rv{opacity:1!important;transform:none!important}body::after{display:none}}

/* v87: cookiebalk compacter — kleinere tekst, knoppen naast elkaar, "Voorkeuren" als link */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body{padding:14px 20px!important;margin:0 auto!important;max-width:1100px!important}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p{font-size:14px!important;line-height:1.45!important;margin:0 0 10px!important;max-width:none!important}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-end!important;gap:8px 14px!important;margin:0!important;padding:0!important}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons{display:flex!important;gap:8px!important;margin:0!important}
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn{margin:0!important;padding:9px 16px!important;font-size:14px!important;min-height:40px}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more{border:0!important;padding:6px 2px!important;font-size:14px!important;text-decoration:underline!important;text-underline-offset:3px}
@media (max-width:640px){
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .klaro .cookie-notice:not(.cookie-modal-notice){left:0!important;right:0!important;bottom:0!important;width:auto!important;max-width:none!important;border-radius:16px 16px 0 0!important}
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body{margin:0!important;max-width:none!important;width:auto!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important}
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p{font-size:13px!important;margin:0 0 10px!important}
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok{display:grid!important;grid-template-columns:1fr;gap:6px!important}
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;width:100%;order:1}
  .klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn{width:100%!important;max-width:none!important;padding:10px 8px!important;font-size:14px!important;white-space:nowrap;min-width:0}
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok,.klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons{min-width:0;max-width:100%}
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more{order:2;justify-self:center;padding:2px!important;font-size:13px!important}
}
@media (max-width:359px){.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn{font-size:13px!important;padding:10px 4px!important}}