/* Viggo Studio 2026 — basislaag voor alle publieke pagina's */
@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlow-condensed-bold.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/assets/fonts/source-sans-3-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/assets/fonts/source-sans-3-semibold.woff2") format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
:root{--ink:#06080c;--ink-2:#131925;--muted:#566070;--paper:#eef0ea;--white:#fff;--line:#d3d8cc;--lime:#c8ff3c;--soft:#e3e7dc;--blue:#1d3bff;--radius:14px;--ease:cubic-bezier(.16,1,.3,1);
--font-d:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;--font-b:"Source Sans 3","Helvetica Neue",Arial,system-ui,sans-serif;
--v2-ink:#06080c;--v2-paper:#eef0ea;--v2-acid:#c8ff3c;--v2-coral:#1d3bff}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink);-webkit-text-size-adjust:100%}
body.s26{margin:0}
body.s26 :is(h1,h2,h3,p,ul,ol,figure){margin-top:0}
body.s26 img,body.s26 svg{max-width:100%}
body.s26-home a{color:inherit}
body.s26{background:var(--paper);color:var(--ink);font-family:var(--font-b);font-size:18px;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.s26 :is(button,input,select,textarea){font-family:var(--font-b)}
body.s26 :is(h1,h2,h3,.display-title,.brand,.brand-name){font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:-.005em;line-height:.92}
body.s26 ::selection{background:var(--lime);color:var(--ink)}
body.s26 :focus-visible{outline:3px solid var(--blue);outline-offset:3px}
body.s26 .site-footer :focus-visible,body.s26 .site-header :focus-visible,body.s26 .hero :focus-visible{outline-color:var(--lime)}
/* skip link: alleen zichtbaar bij focus */
body.s26 .skip-link{position:fixed;left:16px;top:-80px;z-index:200;background:var(--lime);color:var(--ink);padding:12px 20px;border-radius:99px;font-weight:700;text-decoration:none;transition:top .2s}
body.s26 .skip-link:focus{top:12px}
/* header */
body.s26 .site-header{position:sticky;top:0;z-index:100;background:var(--ink);color:#fff;border:0;box-shadow:none;transition:background .4s,transform .5s var(--ease)}
body.s26-home .site-header{position:fixed;left:0;right:0;background:transparent}
body.s26-home .site-header.is-solid{background:rgba(6,8,12,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.s26 .site-header.is-hidden{transform:translateY(-100%)}
body.s26 .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:none;width:100%;padding:16px clamp(18px,4vw,56px);margin:0}
body.s26 .site-header a{color:#fff;text-decoration:none}
body.s26 .brand{display:flex;align-items:center;font-size:28px;letter-spacing:.01em;line-height:1}
body.s26 .brand-mark{display:none}body.s26 .brand-name{font-size:inherit}body.s26 .brand-dot{color:var(--lime)}
body.s26 .desktop-nav{display:flex;gap:32px}
body.s26 .desktop-nav a{position:relative;font-size:16px;font-weight:600;padding:6px 0;color:#fff;opacity:.82;transition:opacity .3s}
body.s26 .desktop-nav a:hover,body.s26 .desktop-nav a[aria-current]{opacity:1}
body.s26 .desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
body.s26 .desktop-nav a:hover::after,body.s26 .desktop-nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
body.s26 .header-actions{display:flex;align-items:center;gap:16px}
body.s26 .customer-login{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff40;border-radius:50%;transition:background .3s,border-color .3s}
body.s26 .customer-login:hover{background:#ffffff1a;border-color:#fff}
body.s26 .account-icon{width:20px;height:20px;fill:none;stroke:#fff}
body.s26 .menu-toggle{display:none;width:44px;height:44px;background:none;border:0;position:relative;cursor:pointer}
body.s26 .menu-toggle span{position:absolute;left:10px;right:10px;height:2px;background:#fff;transition:transform .4s var(--ease),top .4s var(--ease)}
body.s26 .menu-toggle span:first-child{top:18px}body.s26 .menu-toggle span:last-child{top:26px}
body.s26 .menu-toggle[aria-expanded=true] span:first-child{top:22px;transform:rotate(45deg)}
body.s26 .menu-toggle[aria-expanded=true] span:last-child{top:22px;transform:rotate(-45deg)}
body.s26 .mobile-menu{position:fixed;inset:0;z-index:-1;background:var(--blue);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:90px 7vw 40px;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s}
body.s26 .mobile-menu.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .7s var(--ease)}
body.s26 .mobile-menu a{font:700 clamp(44px,13vw,88px)/1 var(--font-d);text-transform:uppercase;color:#fff;padding:4px 0}
body.s26 .mobile-menu a span{display:none}body.s26 .mobile-menu a.mobile-contact{color:var(--lime)}
body.menu-open{overflow:hidden}
@media(max-width:950px){body.s26 .desktop-nav,body.s26 .header-cta{display:none!important}body.s26 .menu-toggle{display:block}}
/* knoppen */
body.s26 .button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 28px;border-radius:99px;border:1.5px solid transparent;font:600 16px var(--font-b);text-decoration:none;background:var(--ink);color:#fff;transition:transform .5s var(--ease),background .3s,color .3s,border-color .3s}
body.s26 .button:hover{transform:translateY(-3px)}
body.s26 .button-lime{background:var(--lime);color:var(--ink)}
body.s26 .button-dark{background:var(--ink);color:#fff}body.s26 .button-dark:hover{background:var(--blue)}
body.s26 .button-small{min-height:44px;padding:10px 20px;font-size:15px}
body.s26 .site-header .button-small{background:var(--lime);color:var(--ink);line-height:1.2;min-height:44px}
body.s26 .site-header .button-small:hover{background:#fff}
body.s26 .text-link{color:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
body.s26 .text-link:hover{color:var(--blue)}
/* footer */
body.s26 .site-footer{background:var(--ink);color:#fff;padding:90px clamp(18px,4vw,56px) 28px}
body.s26 .site-footer .container{max-width:none;width:100%;padding:0}
body.s26 .footer-main{display:grid;grid-template-columns:2fr 1fr 1fr 1.6fr;gap:40px;padding-bottom:0}
body.s26 .site-footer h3{font:600 14px var(--font-b);text-transform:none;letter-spacing:0;color:#8c95a5;margin:0 0 14px}
body.s26 .site-footer a{color:#fff;text-decoration:none}
body.s26 .footer-links a{display:block;padding:4px 0;opacity:.86;transition:color .3s,opacity .3s}
body.s26 .footer-links a:hover,body.s26 .footer-email:hover{color:var(--lime);opacity:1}
body.s26 .site-footer p{color:#9aa3b2;max-width:36ch;font-size:17px;line-height:1.5}
body.s26 .footer-brand .brand{font-size:clamp(40px,6.2vw,92px);margin-bottom:22px}
body.s26 .footer-email{font:700 28px var(--font-d);text-transform:none;letter-spacing:.01em;overflow-wrap:anywhere}
body.s26 .footer-status{display:flex;align-items:center;gap:10px;color:#9aa3b2;font-size:15px;margin-top:18px}
body.s26 .status-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 #c8ff3c88;animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px #c8ff3c00}100%{box-shadow:0 0 0 0 #c8ff3c00}}
body.s26 .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:80px;padding-top:22px;border-top:1px solid #ffffff1f;color:#8c95a5;font-size:15px}
body.s26 .footer-bottom a{display:inline;color:#8c95a5}
@media(max-width:800px){body.s26 .footer-main{grid-template-columns:1fr 1fr}body.s26 .footer-brand,body.s26 .footer-contact{grid-column:1/-1}}
/* binnenpagina's: kleur- en vormtaal van het nieuwe ontwerp op de bestaande opbouw */
body.s26-inner .page-hero{background:var(--ink);color:#fff;border:0;padding:clamp(70px,11vw,150px) 0 clamp(50px,7vw,100px);position:relative;overflow:hidden}
body.s26-inner .page-hero::before{content:"";position:absolute;right:-18vw;top:-30vw;width:62vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#4a63ff,var(--blue) 42%,#050a3a 74%);opacity:.9;filter:blur(2px);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(-4vw,3vw,0) scale(1.06)}}
body.s26-inner .page-hero .container{position:relative}
body.s26-inner .page-hero :is(p,.lead,.page-hero-index){color:#b3bac7}
body.s26-inner .page-hero h1{font-size:clamp(52px,8.8vw,150px);line-height:.88;color:#fff;max-width:min(100%,17em);margin-bottom:.3em}
body.s26-inner .page-hero h1 .text-muted{color:var(--lime)}
body.s26-inner .page-hero .button-dark{background:var(--lime);color:var(--ink)}
body.s26-inner .page-hero .text-link{color:#fff}
body.s26-inner .section :is(h2,.display-title){margin-bottom:.3em}
body.s26-inner .eyebrow{color:var(--blue);font-weight:700;letter-spacing:.04em}
body.s26-inner .page-hero .eyebrow{color:var(--lime)}
body.s26-inner :is(.plan-card,.package-card,.maintenance-card,.scope-card,.project-card,.process-item,.detail-service){border-radius:var(--radius);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
body.s26-inner :is(.plan-card,.package-card,.maintenance-card,.project-card):hover{transform:translateY(-6px);box-shadow:0 30px 70px -30px rgba(6,8,12,.35)}
body.s26-inner :is(.display-title,.section h2){font-size:clamp(34px,7vw,110px);line-height:.9;overflow-wrap:break-word}
body.s26-inner .text-muted{color:var(--blue)}
body.s26-inner .cta-section .cta-panel{background:var(--blue);color:#fff;border-radius:var(--radius)}
body.s26-inner .cta-section h2{font-size:clamp(44px,7vw,110px);color:#fff}
/* beweging */
.s26-js [data-r]{opacity:0;transform:translateY(46px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.s26-js [data-r].in{opacity:1;transform:none}
.s26-js .split .w{display:inline-block;overflow:hidden;vertical-align:top}
.s26-js .split .w>i{display:inline-block;font-style:normal;transform:translateY(105%);transition:transform 1.2s var(--ease);transition-delay:calc(var(--i)*.07s)}
.s26-js .split.in .w>i{transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.s26-js [data-r]{opacity:1;transform:none}.s26-js .split .w>i{transform:none}}