@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext-normal-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-normal-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext-normal-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-normal-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext-normal-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-normal-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-latin-ext-italic-3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-latin-italic-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-latin-ext-normal-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-latin-normal-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/literata-latin-ext-normal-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/literata-latin-normal-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/literata-latin-ext-normal-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/literata-latin-normal-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* CinewallCheck - gedeelde stijlen (shell, navigatie, componenten) */
*{box-sizing:border-box}
body{margin:0;background:#faf8f5;font-family:'Literata',Georgia,serif;color:#1b1d1f}
a{color:#1d3b44;text-underline-offset:3px}
a:hover{color:#b0480f}
button{font:inherit}
select,input,textarea{font:inherit}
img{max-width:100%}
html{scroll-behavior:smooth;scroll-padding-top:120px}

@keyframes cta-gradient{
  0%{background-position:0% 50%;background-size:250% 100%}
  9%{background-position:22% 50%;background-size:268% 100%}
  21%{background-position:14% 50%;background-size:244% 100%}
  34%{background-position:58% 50%;background-size:276% 100%}
  46%{background-position:47% 50%;background-size:250% 100%}
  58%{background-position:86% 50%;background-size:282% 100%}
  69%{background-position:71% 50%;background-size:252% 100%}
  81%{background-position:96% 50%;background-size:272% 100%}
  91%{background-position:38% 50%;background-size:246% 100%}
  100%{background-position:0% 50%;background-size:250% 100%}
}
@keyframes petrol-gradient{
  0%{background-position:0% 50%;background-size:280% 100%}
  11%{background-position:26% 50%;background-size:300% 100%}
  24%{background-position:17% 50%;background-size:272% 100%}
  37%{background-position:63% 50%;background-size:306% 100%}
  52%{background-position:49% 50%;background-size:278% 100%}
  64%{background-position:91% 50%;background-size:312% 100%}
  77%{background-position:74% 50%;background-size:280% 100%}
  89%{background-position:41% 50%;background-size:296% 100%}
  100%{background-position:0% 50%;background-size:280% 100%}
}

/* Vuur-CTA (offerte) */
.cta-offerte{display:inline-block;padding:14px 22px;border-radius:12px;font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;color:#1a1a1a;text-decoration:none;border:0;cursor:pointer;
  background-image:linear-gradient(100deg,#ff5e00 0%,#ff8c00 25%,#ffb800 50%,#ffd21e 72%,#ff8c00 100%);
  background-size:250% 100%;background-position:0% 50%;animation:cta-gradient 11s ease-in-out infinite;
  box-shadow:0 6px 20px rgba(255,120,0,.35);transition:transform .15s ease,box-shadow .15s ease}
.cta-offerte:hover,.cta-offerte:focus-visible{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,120,0,.45);color:#1a1a1a}

/* Tabellen */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{width:100%;border-collapse:collapse;min-width:34rem}

/* Range-sliders */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;display:block}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#e2dbd0}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#e2dbd0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#1d3b44;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#1d3b44;border:3px solid #fff}
input[type=range]:focus-visible{outline:3px solid #1d3b44;outline-offset:2px;border-radius:4px}
.toc-scroll::-webkit-scrollbar{height:0}

/* ---------- Sticky snelmenu: full-bleed balk, sleepbare pillenrij ---------- */
.page-toc{position:sticky;top:65px;z-index:20;margin:26px calc(50% - 50vw + var(--sbw,0px)/2) 0;padding:7px 0;background:rgba(250,248,245,.94);backdrop-filter:blur(8px)}
.page-toc .toc-scroll{list-style:none;display:flex;gap:8px;margin:0;padding:0 16px;overflow-x:auto;scrollbar-width:none;cursor:grab}
/* centreer de knoppen als ze de breedte niet vullen; blijft scrollbaar bij overflow */
.page-toc .toc-scroll li:first-child{margin-left:auto}
.page-toc .toc-scroll li:last-child{margin-right:auto}
.page-toc .toc-scroll a{display:inline-flex;align-items:center;white-space:nowrap;font-family:'Archivo',sans-serif;font-weight:600;font-size:14.5px;text-decoration:none;border-radius:10px;padding:0 16px;min-height:44px;color:#1d3b44;background:#fffefc;border:1px solid #e0dace;box-shadow:0 1px 2px rgba(45,32,20,.05)}

/* ---------- Logo-rail: full-bleed, langzame marquee + sleepbaar ---------- */
@keyframes logo-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* de buitenste slider-wrapper full-bleed; binnenste rail dan neutraal (anders dubbel verschoven) */
.logo-viewport{margin-left:calc(50% - 50vw + var(--sbw,0px)/2)!important;margin-right:calc(50% - 50vw + var(--sbw,0px)/2)!important}
.logo-viewport .logo-rail{margin-left:0!important;margin-right:0!important}
.logo-rail{margin-left:calc(50% - 50vw + var(--sbw,0px)/2)!important;margin-right:calc(50% - 50vw + var(--sbw,0px)/2)!important}
/* tijdens slepen: animatie echt uit, anders overschrijft die de sleep-positie */
.logo-rail[data-sleep] .logo-track{animation:none!important}

/* ---------- Header ---------- */
.cwc-header{position:sticky;top:0;z-index:100;background:#fffefc}
.cwc-bar{position:relative;max-width:1120px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.cwc-logo{display:inline-block;text-decoration:none;font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;color:#c2521a;padding:10px 0;white-space:nowrap}
.cwc-nav{display:none;position:relative;align-items:stretch;align-self:stretch;gap:22px}
.cwc-nav-item{position:relative;display:flex;align-items:stretch}
.cwc-tab{display:inline-flex;align-items:center;font-family:'Archivo',sans-serif;font-weight:600;font-size:15.5px;text-decoration:none;padding:18px 4px;color:#3d4246;border-bottom:2px solid transparent}
.cwc-tab:hover,.cwc-nav-item:focus-within>.cwc-tab{color:#1b1d1f;border-bottom-color:#c2521a}
.cwc-drop{position:absolute;top:100%;padding-top:10px;z-index:110;visibility:hidden;opacity:0;transition:opacity .12s ease}
.cwc-drop-l{left:0}.cwc-drop-r{right:0}
.cwc-nav-item:hover>.cwc-drop,.cwc-nav-item:focus-within>.cwc-drop{visibility:visible;opacity:1}
.cwc-drop-inner{background:#fffefc;border:1px solid #e0dace;border-radius:12px;box-shadow:0 16px 36px rgba(45,32,20,.16);padding:8px;display:grid;gap:1px}
.cwc-drop-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:16px}
.cwc-drop-col{display:grid;gap:1px;align-content:start}
.cwc-dropkop{font-family:'Archivo',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#8a8079;padding:10px 10px 6px}
.cwc-droplink{display:block;font-family:'Archivo',sans-serif;font-weight:500;font-size:15.5px;color:#1b1d1f;text-decoration:none;padding:11px 12px;border-radius:8px}
.cwc-droplink:hover{background:#f4f0e9;color:#1b1d1f}
.cwc-acties{display:flex;align-items:center;gap:10px}
.cwc-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:10px;text-decoration:none;white-space:nowrap;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;color:#1a1a1a;
  background-image:linear-gradient(100deg,#ff5e00 0%,#ff8c00 25%,#ffb800 50%,#ffd21e 72%,#ff8c00 100%);background-size:250% 100%;background-position:0% 50%;animation:cta-gradient 11s ease-in-out infinite;box-shadow:0 4px 14px rgba(255,120,0,.35);transition:transform .15s ease,box-shadow .15s ease}
.cwc-cta:hover,.cwc-cta:focus-visible{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,120,0,.42);color:#1a1a1a}
.cwc-cta .kort{display:inline}.cwc-cta .lang{display:none}
.cwc-burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:1px solid #ddd6cb;background:#fff;cursor:pointer;flex:0 0 auto}
.cwc-burger span{display:block;width:20px;height:2px;background:#1b1d1f;box-shadow:0 -6px 0 #1b1d1f,0 6px 0 #1b1d1f}
#cwc-mobiel{display:none;border-top:1px solid #e6e1da;background:#fffefc;padding:8px 16px 20px;max-height:70vh;overflow-y:auto}
.cwc-mob-kop{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;text-decoration:none;color:#1b1d1f;padding:14px 0 10px;border-bottom:1px solid #f0ece5}
.cwc-mob-rij{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 16px}
.cwc-chip{font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;text-decoration:none;color:#1d3b44;background:transparent;border:1px solid rgba(29,59,68,.28);border-radius:999px;padding:11px 16px}
.cwc-lees{position:relative;height:5px;background:#eae4db;border-bottom:1px solid #e6e1da}
#leesFill{position:absolute;top:0;left:0;width:0%;height:100%;background:linear-gradient(90deg,#ff6a00,#ff9500 45%,#ffd200)}
#leesVlam{position:absolute;top:50%;left:11px;transform:translate(-50%,-58%);font-size:19px;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));pointer-events:none}

@media(min-width:520px){.cwc-cta{padding:0 22px;font-size:15.5px}.cwc-cta .kort{display:none}.cwc-cta .lang{display:inline}}
@media(min-width:860px){.cwc-nav{display:flex}.cwc-burger{display:none}#cwc-mobiel{display:none!important}}

/* ---------- Footer ---------- */
.cwc-footer{background-image:linear-gradient(100deg,#122c34 0%,#193440 22%,#1e3f4a 34%,#193440 48%,#122c34 100%);color:#e9e4dc;padding:44px 16px 32px}
.cwc-foot-grid{max-width:1120px;margin:0 auto;display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cwc-foot-merk{font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;margin:0 0 10px;color:#fff}
.cwc-foot-tekst{font-size:15.5px;line-height:1.6;margin:0;color:#b9c6ca;max-width:32ch}
.cwc-foot-kop{font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#8fa4a9;margin:0 0 12px}
.cwc-foot-links{display:grid;gap:2px}
.cwc-foot-link{color:#e9e4dc;font-size:16px;padding:8px 0;text-decoration:none;display:block}
.cwc-foot-link:hover{color:#ffb800}
.cwc-foot-onder{max-width:1120px;margin:32px auto 0;padding-top:20px;border-top:1px solid #2c505b;display:flex;flex-wrap:wrap;gap:18px 24px;align-items:center;justify-content:space-between}
.cwc-foot-copy{font-size:14.5px;color:#8fa4a9;margin:0;flex:1 1 280px}
.cwc-toeg{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#e9e4dc;border:1px solid #2c505b;background:rgba(255,255,255,.04);border-radius:999px;padding:7px 18px 7px 7px}
.cwc-toeg:hover{color:#ffb800;border-color:#4a707c;background:rgba(255,255,255,.08)}
.cwc-toeg-icoon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#e9e4dc;color:#122c34;flex:0 0 auto}

/* ---------- Petrol hero-band: full-bleed over de volle viewportbreedte ---------- */
.hero-band{
  margin:0 calc(50% - 50vw + var(--sbw,0px)/2);
  padding:20px calc(50vw - 50% - var(--sbw,0px)/2) 40px;
  border-radius:0 0 clamp(18px,2.6vw,30px) clamp(18px,2.6vw,30px);
  background-image:linear-gradient(100deg,#0e242b 0%,#17333c 26%,#2d5f6b 50%,#17333c 74%,#0e242b 100%);
  background-size:280% 100%;
  background-position:0% 50%;
  animation:petrol-gradient 16s ease-in-out infinite;
}

/* ---------- Hero met formulier (cinewall): mobiel intro -> formulier -> foto ---------- */
.cwc-hero{display:flex!important;flex-direction:column;gap:24px}
.cwc-hero-figuur{margin:0!important;min-height:220px;display:flex}
.cwc-intro{margin:0}
.cwc-intro.ingekort{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cwc-meer{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:none;border:0;padding:8px 0;min-height:44px;cursor:pointer;font-family:'Archivo',sans-serif;font-weight:600;font-size:15.5px;color:#cfe0e4;text-decoration:none}
.cwc-meer:hover{color:#fff}
@media(min-width:760px){
  .cwc-hero{display:grid!important;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;grid-template-areas:"tekst form" "figuur form";column-gap:clamp(24px,3.4vw,44px);row-gap:26px}
  .cwc-hero-tekst{grid-area:tekst;display:flex;flex-direction:column;align-self:start}
  .cwc-hero-form{grid-area:form;align-self:start}
  .cwc-hero-figuur{grid-area:figuur;align-self:stretch;min-height:0;margin:0!important}
  .cwc-hero-figuur>div{height:100%}
  .cwc-intro.ingekort{display:block;overflow:visible;-webkit-line-clamp:unset}
  .cwc-meer{display:none}
}

/* ---------- Compactere verticale ritmes op mobiel ---------- */
@media(max-width:759px){
  .page-toc{margin-top:12px!important}
  main section[data-visibility]{padding-top:30px!important}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}